feat: captain custom tools v1 (#13890)

# Pull Request Template ## Description Adds custom tool support to v1 ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration. <img width="1816" height="958" alt="CleanShot 2026-03-24 at 11 37 33@2x" src="https://github.com/user-attachments/assets/2777a953-8b65-4a2d-88ec-39f395b3fb47" /> <img width="378" height="488" alt="CleanShot 2026-03-24 at 11 38 18@2x" src="https://github.com/user-attachments/assets/f6973c99-efd0-40e4-90fe-4472a2f63cea" /> <img width="1884" height="1452" alt="CleanShot 2026-03-24 at 11 38 32@2x" src="https://github.com/user-attachments/assets/9fba4fc4-0c33-46da-888a-52ec6bad6130" /> ## Checklist: - [x] My code follows the style guidelines of this project - [ ] I have performed a self-review of my code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
2026-04-02 12:40:11 +05:30
parent 211fb1102d
commit 8daf6cf6cb
21 changed files with 307 additions and 57 deletions
--- a/app/javascript/dashboard/api/captain/customTools.js
+++ b/app/javascript/dashboard/api/captain/customTools.js
@@ -31,6 +31,12 @@ class CaptainCustomTools extends ApiClient {
  delete(id) {
    return axios.delete(`${this.url}/${id}`);
  }
+
+  test(data = {}) {
+    return axios.post(`${this.url}/test`, {
+      custom_tool: data,
+    });
+  }
 }

 export default new CaptainCustomTools();
--- a/app/javascript/dashboard/components-next/captain/pageComponents/customTool/CustomToolCard.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/customTool/CustomToolCard.vue
@@ -101,12 +101,9 @@ const authTypeLabel = computed(() => {
        </Policy>
      </div>
    </div>
-    <div class="flex items-center justify-between w-full gap-4">
-      <div class="flex items-center gap-3 flex-1">
-        <span
-          v-if="description"
-          class="text-sm truncate text-n-slate-11 flex-1"
-        >
+    <div class="flex items-center justify-between w-full gap-4 min-w-0">
+      <div class="flex items-center gap-3 flex-1 min-w-0">
+        <span v-if="description" class="text-sm truncate text-n-slate-11">
          {{ description }}
        </span>
        <span
--- a/app/javascript/dashboard/components-next/captain/pageComponents/customTool/CustomToolForm.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/customTool/CustomToolForm.vue
@@ -1,9 +1,10 @@
 <script setup>
-import { reactive, computed, useTemplateRef, watch } from 'vue';
+import { reactive, computed, ref, useTemplateRef, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useVuelidate } from '@vuelidate/core';
-import { required } from '@vuelidate/validators';
+import { required, maxLength } from '@vuelidate/validators';
 import { useMapGetter } from 'dashboard/composables/store';
+import CustomToolsAPI from 'dashboard/api/captain/customTools';

 import Input from 'dashboard/components-next/input/Input.vue';
 import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
@@ -72,8 +73,12 @@ const DEFAULT_PARAM = {
  required: false,
 };

+// OpenAI enforces a 64-char limit on function names. The backend slug is
+// "custom_" (7 chars) + parameterized title, so cap the title conservatively.
+const MAX_TOOL_NAME_LENGTH = 55;
+
 const validationRules = {
-  title: { required },
+  title: { required, maxLength: maxLength(MAX_TOOL_NAME_LENGTH) },
  endpoint_url: { required },
  http_method: { required },
  auth_type: { required },
@@ -103,9 +108,15 @@ const isLoading = computed(() =>
 );

 const getErrorMessage = (field, errorKey) => {
-  return v$.value[field].$error
-    ? t(`CAPTAIN.CUSTOM_TOOLS.FORM.${errorKey}.ERROR`)
-    : '';
+  if (!v$.value[field].$error) return '';
+
+  const failedRule = v$.value[field].$errors[0]?.$validator;
+  if (failedRule === 'maxLength') {
+    return t(`CAPTAIN.CUSTOM_TOOLS.FORM.${errorKey}.MAX_LENGTH_ERROR`, {
+      max: MAX_TOOL_NAME_LENGTH,
+    });
+  }
+  return t(`CAPTAIN.CUSTOM_TOOLS.FORM.${errorKey}.ERROR`);
 };

 const formErrors = computed(() => ({
@@ -140,6 +151,30 @@ const handleSubmit = async () => {

  emit('submit', state);
 };
+
+const isTesting = ref(false);
+const testResult = ref(null);
+const isTestDisabled = computed(
+  () => state.endpoint_url.includes('{{') || !!state.request_template
+);
+
+const handleTest = async () => {
+  if (!state.endpoint_url) return;
+
+  isTesting.value = true;
+  testResult.value = null;
+  try {
+    const { data } = await CustomToolsAPI.test(state);
+    const isOk = data.status >= 200 && data.status < 300;
+    testResult.value = { success: isOk, status: data.status };
+  } catch (e) {
+    const message =
+      e.response?.data?.error || t('CAPTAIN.CUSTOM_TOOLS.TEST.ERROR');
+    testResult.value = { success: false, message };
+  } finally {
+    isTesting.value = false;
+  }
+};
 </script>

 <template>
@@ -248,6 +283,45 @@ const handleSubmit = async () => {
      class="[&_textarea]:font-mono"
    />

+    <div class="flex flex-col gap-2">
+      <Button
+        type="button"
+        variant="faded"
+        color="slate"
+        icon="i-lucide-play"
+        :label="t('CAPTAIN.CUSTOM_TOOLS.TEST.BUTTON')"
+        :is-loading="isTesting"
+        :disabled="isTesting || !state.endpoint_url || isTestDisabled"
+        @click="handleTest"
+      />
+      <p v-if="isTestDisabled" class="text-xs text-n-slate-11">
+        {{ t('CAPTAIN.CUSTOM_TOOLS.TEST.DISABLED_HINT') }}
+      </p>
+      <div
+        v-if="testResult"
+        class="flex items-center gap-2 px-3 py-2 text-xs rounded-lg"
+        :class="
+          testResult.success
+            ? 'bg-n-teal-2 text-n-teal-11'
+            : 'bg-n-ruby-2 text-n-ruby-11'
+        "
+      >
+        <span
+          :class="
+            testResult.success ? 'i-lucide-check-circle' : 'i-lucide-x-circle'
+          "
+          class="size-3.5 shrink-0"
+        />
+        {{
+          testResult.status
+            ? t('CAPTAIN.CUSTOM_TOOLS.TEST.SUCCESS', {
+                status: testResult.status,
+              })
+            : testResult.message
+        }}
+      </div>
+    </div>
+
    <div class="flex gap-3 justify-between items-center w-full">
      <Button
        type="button"
--- a/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/CustomToolsPageEmptyState.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/CustomToolsPageEmptyState.vue
@@ -1,8 +1,11 @@
 <script setup>
+import { useAccount } from 'dashboard/composables/useAccount';
 import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import FeatureSpotlight from 'dashboard/components-next/feature-spotlight/FeatureSpotlight.vue';
 import Button from 'dashboard/components-next/button/Button.vue';

 const emit = defineEmits(['click']);
+const { isOnChatwootCloud } = useAccount();

 const onClick = () => {
  emit('click');
@@ -10,6 +13,15 @@ const onClick = () => {
 </script>

 <template>
+  <FeatureSpotlight
+    :title="$t('CAPTAIN.CUSTOM_TOOLS.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
+    :note="$t('CAPTAIN.CUSTOM_TOOLS.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
+    fallback-thumbnail="/assets/images/dashboard/captain/assistant-light.svg"
+    fallback-thumbnail-dark="/assets/images/dashboard/captain/assistant-dark.svg"
+    learn-more-url="https://chwt.app/hc/captain-tools"
+    class="mb-8"
+    :hide-actions="!isOnChatwootCloud"
+  />
  <EmptyStateLayout
    :title="$t('CAPTAIN.CUSTOM_TOOLS.EMPTY_STATE.TITLE')"
    :subtitle="$t('CAPTAIN.CUSTOM_TOOLS.EMPTY_STATE.SUBTITLE')"
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -63,6 +63,16 @@ const hasAdvancedAssignment = computed(() => {
  );
 });

+const hasCustomTools = computed(() => {
+  return (
+    isFeatureEnabledonAccount.value(
+      accountId.value,
+      FEATURE_FLAGS.CAPTAIN_CUSTOM_TOOLS
+    ) ||
+    isFeatureEnabledonAccount.value(accountId.value, FEATURE_FLAGS.CAPTAIN_V2)
+  );
+});
+
 const toggleShortcutModalFn = show => {
  if (show) {
    emit('openKeyShortcutModal');
@@ -364,14 +374,18 @@ const menuItems = computed(() => {
            navigationPath: 'captain_assistants_inboxes_index',
          }),
        },
-        {
-          name: 'Tools',
-          label: t('SIDEBAR.CAPTAIN_TOOLS'),
-          activeOn: ['captain_tools_index'],
-          to: accountScopedRoute('captain_assistants_index', {
-            navigationPath: 'captain_tools_index',
-          }),
-        },
+        ...(hasCustomTools.value
+          ? [
+              {
+                name: 'Tools',
+                label: t('SIDEBAR.CAPTAIN_TOOLS'),
+                activeOn: ['captain_tools_index'],
+                to: accountScopedRoute('captain_assistants_index', {
+                  navigationPath: 'captain_tools_index',
+                }),
+              },
+            ]
+          : []),
        {
          name: 'Settings',
          label: t('SIDEBAR.CAPTAIN_SETTINGS'),
--- a/app/javascript/dashboard/featureFlags.js
+++ b/app/javascript/dashboard/featureFlags.js
@@ -37,6 +37,7 @@ export const FEATURE_FLAGS = {
  CHANNEL_INSTAGRAM: 'channel_instagram',
  CHANNEL_TIKTOK: 'channel_tiktok',
  CONTACT_CHATWOOT_SUPPORT_TEAM: 'contact_chatwoot_support_team',
+  CAPTAIN_CUSTOM_TOOLS: 'custom_tools',
  CAPTAIN_V2: 'captain_integration_v2',
  CAPTAIN_TASKS: 'captain_tasks',
  SAML: 'saml',
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -807,6 +807,7 @@
    "CUSTOM_TOOLS": {
      "HEADER": "Tools",
      "ADD_NEW": "Create a new tool",
+      "SOFT_LIMIT_WARNING": "Having more than 10 tools may reduce the assistant's reliability in selecting the right tool. Consider removing unused tools for better results.",
      "EMPTY_STATE": {
        "TITLE": "No custom tools available",
        "SUBTITLE": "Create custom tools to connect your assistant with external APIs and services, enabling it to fetch data and perform actions on your behalf.",
@@ -837,11 +838,18 @@
        "SUCCESS_MESSAGE": "Custom tool deleted successfully",
        "ERROR_MESSAGE": "Failed to delete custom tool"
      },
+      "TEST": {
+        "BUTTON": "Test connection",
+        "SUCCESS": "Endpoint returned HTTP {status}",
+        "ERROR": "Connection failed",
+        "DISABLED_HINT": "Testing is only available for endpoints without templates or request bodies."
+      },
      "FORM": {
        "TITLE": {
          "LABEL": "Tool Name",
          "PLACEHOLDER": "Order Lookup",
-          "ERROR": "Tool name is required"
+          "ERROR": "Tool name is required",
+          "MAX_LENGTH_ERROR": "Tool name must be {max} characters or fewer"
        },
        "DESCRIPTION": {
          "LABEL": "Description",
--- a/app/javascript/dashboard/routes/dashboard/captain/captain.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/captain/captain.routes.js
@@ -46,7 +46,7 @@ const assistantRoutes = [
    path: frontendURL('accounts/:accountId/captain/:assistantId/tools'),
    component: CustomToolsIndex,
    name: 'captain_tools_index',
-    meta: metaV2,
+    meta,
  },
  {
    path: frontendURL('accounts/:accountId/captain/:assistantId/scenarios'),
--- a/app/javascript/dashboard/routes/dashboard/captain/tools/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/tools/Index.vue
@@ -2,21 +2,29 @@
 import { computed, onMounted, ref, nextTick } from 'vue';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import { usePolicy } from 'dashboard/composables/usePolicy';

 import PageLayout from 'dashboard/components-next/captain/PageLayout.vue';
-import CaptainPaywall from 'dashboard/components-next/captain/pageComponents/Paywall.vue';
 import CustomToolsPageEmptyState from 'dashboard/components-next/captain/pageComponents/emptyStates/CustomToolsPageEmptyState.vue';
 import CreateCustomToolDialog from 'dashboard/components-next/captain/pageComponents/customTool/CreateCustomToolDialog.vue';
 import CustomToolCard from 'dashboard/components-next/captain/pageComponents/customTool/CustomToolCard.vue';
 import DeleteDialog from 'dashboard/components-next/captain/pageComponents/DeleteDialog.vue';

 const store = useStore();
+const { isFeatureFlagEnabled } = usePolicy();
+
+const SOFT_LIMIT = 10;
+const isV2 = computed(() => isFeatureFlagEnabled(FEATURE_FLAGS.CAPTAIN_V2));

 const uiFlags = useMapGetter('captainCustomTools/getUIFlags');
 const customTools = useMapGetter('captainCustomTools/getRecords');
 const isFetching = computed(() => uiFlags.value.fetchingList);
 const customToolsMeta = useMapGetter('captainCustomTools/getMeta');

+const showSoftLimitWarning = computed(
+  () => !isV2.value && customToolsMeta.value.totalCount > SOFT_LIMIT
+);
+
 const createDialogRef = ref(null);
 const deleteDialogRef = ref(null);
 const selectedTool = ref(null);
@@ -86,21 +94,23 @@ onMounted(() => {
    :show-pagination-footer="!isFetching && !!customTools.length"
    :is-fetching="isFetching"
    :is-empty="!customTools.length"
-    :feature-flag="FEATURE_FLAGS.CAPTAIN_V2"
    :show-know-more="false"
    @update:current-page="onPageChange"
    @click="openCreateDialog"
  >
-    <template #paywall>
-      <CaptainPaywall />
-    </template>
-
    <template #emptyState>
      <CustomToolsPageEmptyState @click="openCreateDialog" />
    </template>

    <template #body>
      <div class="flex flex-col gap-4">
+        <div
+          v-if="showSoftLimitWarning"
+          class="flex items-center gap-2 px-4 py-3 text-sm rounded-lg bg-n-amber-2 text-n-amber-11"
+        >
+          <span class="i-lucide-triangle-alert size-4 shrink-0" />
+          {{ $t('CAPTAIN.CUSTOM_TOOLS.SOFT_LIMIT_WARNING') }}
+        </div>
        <CustomToolCard
          v-for="tool in customTools"
          :id="tool.id"