@stack-spot/ai-chat-widget 2.7.1 → 2.8.1

package/src/views/Resources.tsx

@@ -46,29 +46,30 @@ const ResourcesPanel = () => {
     const chat = widget.chatTabs.getAll().find(c => c.id === chatId)
     return chat?.getMessages().find(m => m.id === messageId)?.getValue()
   }, [messageId])
-  const [toolKits] = agentToolsClient.tools.useStatefulQuery({}, { enabled: !!message?.agent?.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])
-
+  const toolkits = useMemo(() => [
+    ...agent?.toolkits?.builtin_toolkits ?? [],
+    ...agent?.toolkits?.custom_toolkits ?? [],
+    ...agent?.toolkits?.mcp_toolkits ?? [],
+  ], [agent])
+  const tools = useMemo(() => message?.tools?.map(id => toolById(id, toolkits)), [messageId, toolkits])
   const [agentsTools] = agentToolsClient.agentsByIds.useStatefulQuery({ searchAgentsRequest:{ ids: message?.tools || [] } })
-  const hasAgentTool = useMemo(() => message?.tools?.some(id => agentsTools?.find((agent) => agent.id === id)), [messageId, toolKits])
+  const hasAgentTool = useMemo(() => message?.tools?.some(id => agentsTools?.find((agent) => agent.id === id)), [messageId])
 
   const header = (image?: string, label?: string) => (
     <Row>
-      <ImageBox >
+      <ImageBox>
         <ImageWithFallback src={image} fallback={<Icon icon="Agent" />} aria-label={label} title={label} />
       </ImageBox>
       <Text style={{ marginLeft: '8px' }}>{label}</Text>
     </Row>
   )
-  
-  return !!(tools?.length || customTools?.length) && (
+
+  return !!tools?.length && (
     <>
       <>
-        {[...(tools || []), ...(customTools || [])].map(
+        {tools.map(
           (tool) =>
             tool && (
               <StyledAccordion key={tool.id} header={header(tool?.image, tool?.name)} appearance="card" maxHeight={120}>

package/src/views/Tools.tsx

@@ -54,7 +54,7 @@ const ToolsPanel = () => {
           tool && (
             <li key={tool.id}>
               <ToolBadge
-                name={tool.name || tool.id}
+                name={tool.name || tool.id || ''}
                 image={tool.image ?? ''}
                 description={tool.description ?? ''}
               />