@stack-spot/ai-chat-widget 1.36.3-beta.1 → 1.36.4

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>
   )
 }