@stack-spot/ai-chat-widget 1.35.3 → 1.35.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.35.4](https://github.com/stack-spot/portal-ai-chat-widget/compare/ai-chat-widget@v1.35.3...ai-chat-widget@v1.35.4) (2025-08-13)
+
+
+### Bug Fixes
+
+* 1745 to show custom tools on panel ([#278](https://github.com/stack-spot/portal-ai-chat-widget/issues/278)) ([fed5db7](https://github.com/stack-spot/portal-ai-chat-widget/commit/fed5db7dfc86fbdd0d8a60f958b302e552dfbbd3))
+
 ## [1.35.3](https://github.com/stack-spot/portal-ai-chat-widget/compare/ai-chat-widget@v1.35.2...ai-chat-widget@v1.35.3) (2025-08-08)
 
 

package/dist/app-metadata.json

@@ -1,7 +1,7 @@
 {
     "name": "@stack-spot/ai-chat-widget",
-    "version": "1.35.3",
-    "date": "Fri Aug 08 2025 18:56:07 GMT+0000 (Coordinated Universal Time)",
+    "version": "1.35.4",
+    "date": "Wed Aug 13 2025 13:02:11 GMT+0000 (Coordinated Universal Time)",
     "dependencies": [
         {
             "name": "@stack-spot/app-metadata",

package/dist/utils/tools.d.ts

@@ -1,7 +1,8 @@
 import { BuiltinToolkitResponse, BuiltinToolResponse } from '@stack-spot/portal-network/api/agent';
+import { CustomToolkitDto } from '@stack-spot/portal-network/api/agent-tools';
 export type ToolWithImage = BuiltinToolResponse & {
     id: string;
     image?: string;
 };
-export declare function toolById(id: string, toolkits: BuiltinToolkitResponse[] | undefined): ToolWithImage | undefined;
+export declare function toolById(id: string, toolkits: (BuiltinToolkitResponse | CustomToolkitDto)[] | undefined): ToolWithImage | undefined;
 //# sourceMappingURL=tools.d.ts.map

package/dist/utils/tools.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tools.d.ts","sourceRoot":"","sources":["../../src/utils/tools.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAA;AAGlG,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAEhF,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,sBAAsB,EAAE,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAG9G"}
+{"version":3,"file":"tools.d.ts","sourceRoot":"","sources":["../../src/utils/tools.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAA;AAClG,OAAO,EAAE,gBAAgB,EAAE,MAAM,4CAA4C,CAAA;AAG7E,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAShF,wBAAgB,QAAQ,CACtB,EAAE,EAAE,MAAM,EACV,QAAQ,EAAE,CAAC,sBAAsB,GAAG,gBAAgB,CAAC,EAAE,GAAG,SAAS,GAClE,aAAa,GAAG,SAAS,CAa3B"}

package/dist/utils/tools.js

@@ -1,6 +1,17 @@
 import { keyBy } from 'lodash';
+function isBuiltinToolkit(toolkit) {
+    return 'image_url' in toolkit;
+}
 export function toolById(id, toolkits) {
-    const tools = toolkits?.map(({ image_url, tools }) => tools?.map((tool) => ({ ...tool, id: tool.id, image: image_url }))).flat();
+    const tools = toolkits
+        ?.map((toolkit) => toolkit.tools?.map((tool) => ({
+        ...tool,
+        id: tool.id,
+        image: isBuiltinToolkit(toolkit)
+            ? toolkit.image_url ?? undefined
+            : toolkit.avatar ?? undefined,
+    })))
+        .flat();
     return keyBy(tools, 'id')[id];
 }
 //# sourceMappingURL=tools.js.map

package/dist/utils/tools.js.map

@@ -1 +1 @@
-{"version":3,"file":"tools.js","sourceRoot":"","sources":["../../src/utils/tools.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAI9B,MAAM,UAAU,QAAQ,CAAC,EAAU,EAAE,QAA8C;IACjF,MAAM,KAAK,GAAG,QAAQ,EAAE,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,EAAG,EAAE,KAAK,EAAE,SAAU,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAA;IAClI,OAAO,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,EAAE,CAAC,CAAA;AAC/B,CAAC"}
+{"version":3,"file":"tools.js","sourceRoot":"","sources":["../../src/utils/tools.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAI9B,SAAS,gBAAgB,CACvB,OAAkD;IAElD,OAAO,WAAW,IAAI,OAAO,CAAA;AAC/B,CAAC;AAGD,MAAM,UAAU,QAAQ,CACtB,EAAU,EACV,QAAmE;IAEnE,MAAM,KAAK,GAAG,QAAQ;QACpB,EAAE,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAChB,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAC5B,GAAG,IAAI;QACP,EAAE,EAAE,IAAI,CAAC,EAAG;QACZ,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC;YAC9B,CAAC,CAAC,OAAO,CAAC,SAAS,IAAI,SAAS;YAChC,CAAC,CAAE,OAA4B,CAAC,MAAM,IAAI,SAAS;KACtD,CAAC,CAAC,CACJ;SACA,IAAI,EAAE,CAAA;IACT,OAAO,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,EAAE,CAAC,CAAA;AAC/B,CAAC"}

package/dist/views/Tools.js

@@ -35,8 +35,10 @@ const ToolsPanel = () => {
         return chat?.getMessages().find(m => m.id === messageId)?.getValue();
     }, [messageId]);
     const [toolKits] = agentToolsClient.tools.useStatefulQuery({}, { enabled: !!message?.agent?.id });
-    const tools = useMemo(() => message?.tools?.map(id => toolById(id, toolKits) ?? { id }), [messageId, toolKits]);
-    return !!tools?.length && (_jsx(ToolList, { children: tools.map((tool) => (_jsx("li", { children: _jsx(ToolBadge, { name: tool.name || tool.id, image: tool.image, description: tool.description, backgroundColor: "light.500" }) }, tool.id))) }));
+    const [agent] = agentToolsClient.agent.useStatefulQuery({ agentId: message?.agent?.id || '' }, { enabled: !!message?.agent?.id });
+    const tools = useMemo(() => message?.tools?.map(id => toolById(id, toolKits)), [messageId, toolKits]);
+    const customTools = useMemo(() => message?.tools?.map(id => toolById(id, agent?.toolkits?.custom_toolkits)), [messageId, agent?.toolkits?.custom_toolkits]);
+    return !!(tools?.length || customTools?.length) && (_jsx(ToolList, { children: [...(tools || []), ...(customTools || [])].map((tool) => tool && (_jsx("li", { children: _jsx(ToolBadge, { name: tool.name || tool.id, image: tool.image ?? '', description: tool.description ?? '', backgroundColor: "light.500" }) }, tool.id))) }));
 };
 const dictionary = {
     en: {

package/dist/views/Tools.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tools.js","sourceRoot":"","sources":["../../src/views/Tools.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tools.js","sourceRoot":"","sources":["../../src/views/Tools.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.35.3",
+  "version": "1.35.4",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/app-metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.35.3",
-  "date": "Fri Aug 08 2025 18:56:07 GMT+0000 (Coordinated Universal Time)",
+  "version": "1.35.4",
+  "date": "Wed Aug 13 2025 13:02:11 GMT+0000 (Coordinated Universal Time)",
   "dependencies": [
     {
       "name": "@stack-spot/app-metadata",

package/src/utils/tools.ts

@@ -1,9 +1,30 @@
 import { BuiltinToolkitResponse, BuiltinToolResponse } from '@stack-spot/portal-network/api/agent'
+import { CustomToolkitDto } from '@stack-spot/portal-network/api/agent-tools'
 import { keyBy } from 'lodash'
 
 export type ToolWithImage = BuiltinToolResponse & { id: string, image?: string }
 
-export function toolById(id: string, toolkits: BuiltinToolkitResponse[] | undefined): ToolWithImage | undefined {
-  const tools = toolkits?.map(({ image_url, tools }) => tools?.map((tool) => ({ ...tool, id: tool.id!, image: image_url! }))).flat()
+function isBuiltinToolkit(
+  toolkit: BuiltinToolkitResponse | CustomToolkitDto,
+): toolkit is BuiltinToolkitResponse {
+  return 'image_url' in toolkit
+}
+
+
+export function toolById(
+  id: string,
+  toolkits: (BuiltinToolkitResponse | CustomToolkitDto)[] | undefined,
+): ToolWithImage | undefined {
+  const tools = toolkits
+    ?.map((toolkit) =>
+      toolkit.tools?.map((tool) => ({
+        ...tool,
+        id: tool.id!,
+        image: isBuiltinToolkit(toolkit)
+          ? toolkit.image_url ?? undefined
+          : (toolkit as CustomToolkitDto).avatar ?? undefined,
+      })),
+    )
+    .flat()
   return keyBy(tools, 'id')[id]
 }

package/src/views/Tools.tsx

@@ -42,20 +42,26 @@ const ToolsPanel = () => {
   }, [messageId])
 
   const [toolKits] = agentToolsClient.tools.useStatefulQuery({}, { enabled: !!message?.agent?.id })
-  const tools = useMemo(() => message?.tools?.map(id => toolById(id, toolKits) ?? { id }), [messageId, toolKits])
-
-  return !!tools?.length && (
+  const [agent] = agentToolsClient.agent.useStatefulQuery({ agentId: message?.agent?.id || '' },
+    { enabled: !!message?.agent?.id })
+  const tools = useMemo(() => message?.tools?.map(id => toolById(id, toolKits)), [messageId, toolKits])
+  const customTools = useMemo(() => message?.tools?.map(id => toolById(id, agent?.toolkits?.custom_toolkits)),
+    [messageId, agent?.toolkits?.custom_toolkits])
+  return !!(tools?.length || customTools?.length) && (
     <ToolList>
-      {tools.map((tool) => (
-        <li key={tool.id}>
-          <ToolBadge
-            name={tool.name || tool.id}
-            image={tool.image}
-            description={tool.description}
-            backgroundColor="light.500"
-          />
-        </li>
-      ))}
+      {[...(tools || []), ...(customTools || [])].map(
+        (tool) =>
+          tool && (
+            <li key={tool.id}>
+              <ToolBadge
+                name={tool.name || tool.id}
+                image={tool.image ?? ''}
+                description={tool.description ?? ''}
+                backgroundColor="light.500"
+              />
+            </li>
+          ),
+      )}
     </ToolList>
   )
 }