@stack-spot/ai-chat-widget 1.36.2 → 1.36.3

package/dist/views/MessageInput/UploadBar.js

@@ -63,6 +63,11 @@ export const UploadBar = () => {
         setAriaMessage(lines.join(' '));
         setTimeout(() => setAriaMessage(''), 2000);
         chat.pushMessage(new ChatEntry({ agentType: 'system', type: 'md', content: lines.join('\n\n') }));
+        if (lines.length) {
+            setAriaMessage(lines.join(' '));
+            setTimeout(() => setAriaMessage(''), 2000);
+            chat.pushMessage(new ChatEntry({ agentType: 'system', type: 'md', content: lines.join('\n\n') }));
+        }
     });
     return (_jsxs("div", { className: listToClass(['info-bar', 'upload-bar', visible && 'visible']), children: [_jsx("div", { className: "aria-live", "aria-live": "polite", "aria-atomic": "true", children: ariaMessage }), _jsx("div", { className: "space" }), _jsx("div", { className: "content", children: _jsx(FadingOverflow, { className: "list-overflow", scroll: "arrows", enableHorizontalScrollWithVerticalWheel: true, children: _jsx("ul", { children: listItems }) }) })] }));
 };

package/dist/views/MessageInput/UploadBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadBar.js","sourceRoot":"","sources":["../../../src/views/MessageInput/UploadBar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"UploadBar.js","sourceRoot":"","sources":["../../../src/views/MessageInput/UploadBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAC1D,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAA;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAA;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AACjD,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAChH,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAE3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAA;AAMxD,SAAS,mBAAmB,CAAC,IAAU;IACrC,OAAO,cAAK,GAAG,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,IAAI,GAAI,CAAA;AAChE,CAAC;AAED,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAqB,EAAE,EAAE;IACnD,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAA;IACxC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC/G,MAAM,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAEtC,OAAO,KAAC,eAAe,IACrB,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,EAC1B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,EAC5C,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAC7B,MAAM,EAAE,MAAM,GACd,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IAC5B,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,uBAAgB,KAAC,UAAU,IAAC,MAAM,EAAE,EAAE,GAAI,IAAjC,EAAE,CAAC,EAAE,CAAiC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAChH,MAAM,CAAC,GAAG,yBAAyB,EAAE,CAAA;IACrC,MAAM,IAAI,GAAG,cAAc,EAAE,CAAA;IAC7B,MAAM,OAAO,GAAG,CAAC,CAAC,OAAO,CAAC,MAAM,CAAA;IAChC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAClD,MAAM,cAAc,GAAG,MAAM,CAAe,EAAE,CAAC,CAAA;IAC/C,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC,CAAA;IAE7C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,CAAA;QAC1C,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,CAC/B,EAAE,CAAC,EAAE,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CACnD,CAAA;QACD,UAAU,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;YACxB,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;gBAC5C,cAAc,CAAC,EAAE,CAAC,CAAA;gBAClB,UAAU,CAAC,GAAG,EAAE;oBACd,cAAc,CAAC,GAAG,CAAC,CAAC,mBAAmB,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA;oBAC3D,UAAU,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAA;gBAC5C,CAAC,EAAE,GAAG,CAAC,CAAA;gBACP,mBAAmB,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;YACxC,CAAC;QACH,CAAC,CAAC,CAAA;QACF,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,MAAM,KAAK,OAAO,CAAC,EAAE,CAAC;YAC9C,UAAU,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAA;QAC5C,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,oBAAoB,CAAC,CAAC,MAAM,EAAE,EAAE;QAC9B,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,YAAY,cAAc,CAAC,CAAA;QAClE,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,YAAY,eAAe,CAAC,CAAA;QACvE,MAAM,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,EAAE,OAAO,CAAA;QACtC,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAA;QAC5C,MAAM,eAAe,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;QACvD,MAAM,mBAAmB,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;QAC/D,MAAM,KAAK,GAAa,EAAE,CAAA;QAC1B,IAAI,UAAU,CAAC,MAAM,EAAE,CAAC;YACtB,KAAK,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,eAAe,EAAE,GAAG,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,IAAI,EAAE,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;QACxH,CAAC;QACD,IAAI,cAAc,CAAC,MAAM,EAAE,CAAC;YAC1B,KAAK,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,oBAAoB,EAAE,QAAQ,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;QACvG,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,OAAM;QACzB,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAA;QAC/B,UAAU,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAA;QAC1C,IAAI,CAAC,WAAW,CAAC,IAAI,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAA;QAEjG,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACjB,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAA;YAC/B,UAAU,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAA;YAC1C,IAAI,CAAC,WAAW,CAAC,IAAI,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAA;QACnG,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,YAAY,EAAE,OAAO,IAAI,SAAS,CAAC,CAAC,aAC3E,cAAK,SAAS,EAAC,WAAW,eACd,QAAQ,iBACN,MAAM,YAEjB,WAAW,GACR,EACN,cAAK,SAAS,EAAC,OAAO,GAAO,EAC7B,cAAK,SAAS,EAAC,SAAS,YACtB,KAAC,cAAc,IAAC,SAAS,EAAC,eAAe,EAAC,MAAM,EAAC,QAAQ,EAAC,uCAAuC,kBAC/F,uBAAK,SAAS,GAAM,GACL,GACb,IACF,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/views/Resources.d.ts

@@ -0,0 +1,2 @@
+export declare const Resources: () => null;
+//# sourceMappingURL=Resources.d.ts.map

package/dist/views/Resources.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Resources.d.ts","sourceRoot":"","sources":["../../src/views/Resources.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,SAAS,YAerB,CAAA"}

package/dist/views/Resources.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Flex, IconBox, Text } from '@citric/core';
+import { Agent } from '@citric/icons';
+import { Avatar } from '@citric/ui';
+import { agentToolsClient } from '@stack-spot/portal-network';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { useEffect, useMemo } from 'react';
+import { Accordion } from '../components/Accordion.js';
+import { useWidget, useWidgetState } from '../context/hooks.js';
+import { useRightPanel } from '../right-panel/hooks.js';
+import { toolById } from '../utils/tools.js';
+import { AgentDescription } from './Agents/AgentDescription.js';
+export const Resources = () => {
+    const t = useTranslate(dictionary);
+    const panel = useWidgetState('panel');
+    const message = useWidgetState('currentMessageInPanel');
+    const { open } = useRightPanel();
+    const widget = useWidget();
+    useEffect(() => {
+        if (panel === 'resources' && message)
+            open(_jsx(ResourcesPanel, {}, message.messageId), { title: t.title, description: t.description, onClose: () => widget.set('panel', undefined) });
+    }, [panel, t]);
+    return null;
+};
+const ResourcesPanel = () => {
+    const { chatId, messageId } = useWidgetState('currentMessageInPanel') ?? {};
+    const widget = useWidget();
+    const message = useMemo(() => {
+        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 [agentsTools] = agentToolsClient.agentsByIds.useStatefulQuery({ searchAgentsRequest: { ids: message?.tools || [] } });
+    const hasAgentTool = useMemo(() => message?.tools?.some(id => agentsTools?.find((agent) => agent.id === id)), [messageId, toolKits]);
+    const header = (image, label) => (_jsxs(Flex, { alignItems: "center", children: [image ? _jsx(Avatar, { size: "xxs", children: _jsx("img", { title: label, src: image }) }) :
+                _jsx(IconBox, { appearance: "circle", title: label, color: "gray", children: _jsx(Agent, {}) }), _jsx(Text, { ml: 3, children: label })] }));
+    return !!(tools?.length || customTools?.length) && (_jsxs(_Fragment, { children: [_jsx(_Fragment, { children: [...(tools || []), ...(customTools || [])].map((tool) => tool && (_jsx(Box, { mt: 3, children: _jsx(Accordion, { header: header(tool?.image, tool?.name), children: _jsx(Box, { sx: { backgroundColor: 'light.400', m: '-10px', p: '16px' }, children: tool?.description }) }) }, tool.id))) }), hasAgentTool &&
+                _jsx(_Fragment, { children: message?.tools?.map((id) => {
+                        const agentTool = agentsTools?.find((agent) => agent.id === id);
+                        return (_jsx(Box, { mt: 3, children: _jsx(Accordion, { header: header(agentTool?.avatar || undefined, agentTool?.name), children: _jsx(AgentDescription, { agentId: id }) }) }, id));
+                    }) })] }));
+};
+const dictionary = {
+    en: {
+        title: 'Resources',
+        description: 'These are the resources used to generate this answer.',
+    },
+    pt: {
+        title: 'Recursos',
+        description: 'Esses são os recursos usados pra gerar essa resposta.',
+    },
+};
+//# sourceMappingURL=Resources.js.map

package/dist/views/Resources.js.map

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

package/dist/views/Steps/dictionary.d.ts

@@ -34,6 +34,6 @@ export declare const dictionary: {
         input: string;
     };
 };
-export declare function useStepsDictionary(): Record<"input" | "step" | "pending" | "steps" | "tools" | "answer" | "running" | "planning" | "unknown" | "stepsPanelDescription" | "response" | "executionTime" | "nextAttempt" | "previousAttempt", string>;
+export declare function useStepsDictionary(): Record<"input" | "step" | "pending" | "steps" | "tools" | "answer" | "unknown" | "running" | "planning" | "stepsPanelDescription" | "response" | "executionTime" | "nextAttempt" | "previousAttempt", string>;
 export type ToolsDictionary = typeof dictionary['en'];
 //# sourceMappingURL=dictionary.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.36.2",
+  "version": "1.36.3",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
     "@citric/core": "^6.4.0",
     "@stack-spot/portal-components": "^2.25.5",
     "@citric/icons": "^5.13.0",
-    "@stack-spot/portal-network": "~0.169.0",
+    "@stack-spot/portal-network": "0.173.1",
     "@citric/ui": "^6.10.2",
     "@stack-spot/portal-theme": "^1.0.0",
     "@stack-spot/portal-translate": "^1.1.0",

package/src/StackspotAIWidget.tsx

@@ -20,6 +20,7 @@ import { KnowledgeSources } from './views/KnowledgeSources'
 import { KSDocument } from './views/KSDocument'
 import { MessageInput } from './views/MessageInput'
 import { MinimizedHeader } from './views/MinimizedHeader'
+import { Resources } from './views/Resources'
 import { Stacks } from './views/Stacks'
 import { Steps } from './views/Steps'
 import { Tools } from './views/Tools'
@@ -117,6 +118,7 @@ export const StackspotAIWidget = (
             <ChatHistory />
             <Steps />
             <Tools />
+            <Resources />
             <div className="chat-right-panel" ref={rightPanelRef}><RightPanel /></div>
           </div>
         </RightPanelProvider>

package/src/app-metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.36.2",
-  "date": "Thu Aug 28 2025 17:57:34 GMT+0000 (Coordinated Universal Time)",
+  "version": "1.36.3",
+  "date": "Thu Aug 28 2025 22:15:33 GMT+0000 (Coordinated Universal Time)",
   "dependencies": [
     {
       "name": "@stack-spot/app-metadata",
@@ -113,7 +113,7 @@
     },
     {
       "name": "@stack-spot/portal-network",
-      "version": "0.169.0(@stack-spot/auth@5.3.2)(@stack-spot/opa@2.5.0(@stack-spot/auth@5.3.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@tanstack/react-query@5.59.16(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "version": "0.173.1(@stack-spot/auth@5.3.2)(@stack-spot/opa@2.5.0(@stack-spot/auth@5.3.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@tanstack/react-query@5.59.16(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
     {
       "name": "@stack-spot/portal-theme",

package/src/index.ts

@@ -12,8 +12,9 @@ export type { ChatAction } from './state/ChatEntry'
 export { ChatState } from './state/ChatState'
 export type { MessageInterceptor } from './state/ChatState'
 export { ChatTabsController } from './state/ChatTabsController'
+export { acceptedFileTypes } from './state/constants'
 export { ObservableState } from './state/ObservableState'
 export type { Labeled, LabeledAgent, LabeledWithImage } from './state/types'
 export { WidgetState } from './state/WidgetState'
 export { defaultLanguage, languages } from './utils/programming-languages'
-export { acceptedFileTypes } from './state/constants'
+

package/src/layout.css

@@ -209,4 +209,4 @@
   z-index: 9999;
   pointer-events: auto;
   color: var(--light-contrastText)
-}
+}

package/src/state/WidgetState.ts

@@ -13,7 +13,7 @@ export interface WidgetProperties {
   /**
    * Current content of the right panel. Undefined for closed right panel.
    */
-  panel?: 'stack' | 'workspace' | 'agent' | 'ks' | 'editor' | 'history' | 'ks-details' | 'steps' | 'tools',
+  panel?: 'stack' | 'workspace' | 'agent' | 'ks' | 'editor' | 'history' | 'ks-details' | 'steps' | 'tools' | 'resources',
   /**
    * KS to use when the right panel "ks-details" is open.
    */

package/src/views/Agents/AgentDescription.tsx

@@ -1,8 +1,8 @@
-import { Text } from '@citric/core'
-import { Badge, Skeleton } from '@citric/ui'
+import { Box, Flex, IconBox, Text } from '@citric/core'
+import { Agent, Cog } from '@citric/icons'
+import { Avatar, Badge, Skeleton } from '@citric/ui'
 import { agentToolsClient } from '@stack-spot/portal-network'
 import { useMemo } from 'react'
-import { ToolBadge } from '../../components/ToolBadge'
 import { toolById } from '../../utils/tools'
 import { useAgentsDictionary } from './dictionary'
 import { AgentDescriptionBox } from './styled'
@@ -15,43 +15,80 @@ export const AgentDescription = ({ agentId }: { agentId?: string }) => {
   
   const knowledgeSources = useMemo(
     () => agent?.knowledge_sources_config?.knowledge_sources_details?.map((ks, index) => (
-      <li key={index}><Badge palette="teal" appearance="square">{ks.name}</Badge></li>
+      <li key={index}>
+        <Box className="card-agent-info">
+          <Flex alignItems="center" justifyContent="space-between" pl={2}>
+            <Text colorScheme="light.contrastText">{ks.name}</Text>
+            <Badge palette="gray" appearance="square">{ks.type}</Badge>
+          </Flex>
+        </Box>
+      </li>
     )),
     [agent],
   )
   const skeleton = useMemo(() => {
     const loadingKS: React.ReactElement[] = []
     for (let i = 0; i < numberOfKnowledgeSources; i++) {
-      loadingKS.push(<li key={i}><Badge palette="teal" appearance="square"><Skeleton className="ks-skeleton" /></Badge></li>)
+      loadingKS.push(<li key={i}><Skeleton className="ks-skeleton" /></li>)
     }
     return loadingKS
   }, [numberOfKnowledgeSources])
-  const tools = useMemo(() => {
-    const result: React.ReactElement[] = []
-    const builtInTools = agent?.toolkits?.builtin_toolkits?.[0]?.tools
+  
+  const { tools, multiAgents } = useMemo(() => {
+    const tools: React.ReactElement[] = [] 
+    const multiAgents: React.ReactElement[] = [] 
+    const builtInTools = agent?.toolkits?.builtin_toolkits ?? []
     const customToolkits = agent?.toolkits?.custom_toolkits ?? []
-    for (const tool of builtInTools ?? []) {
-      const toolWithImage = toolById(tool.id, toolKits)
-      result.push(
-        <li key={tool.id}>
-          <ToolBadge
-            name={toolWithImage?.name || toolWithImage?.id || 'unknown'}
-            image={toolWithImage?.image}
-            style={{ maxWidth: '150px' }}
-          />
-        </li>,
-      )
+    for (const toolkit of builtInTools) {
+      for (const tool of toolkit.tools ?? []) {
+        if (toolkit.id == 'UTILITIES'){ 
+          const toolWithImage = toolById(tool.id, toolKits)
+          tools.push(
+            <li key={tool.id}>
+              <Box className="card-agent-info">
+                <Flex alignItems="center">
+                  {toolWithImage?.image ? 
+                    <Avatar size="xxs" sx={{ mr: 3 }}> <img src={toolWithImage?.image} /></Avatar> : 
+                    <IconBox colorIcon="light" sx={{ mr: 3 }}><Cog /></IconBox>}
+                  <Text colorScheme="light.contrastText">{toolWithImage?.name || toolWithImage?.id || 'unknown'}</Text>
+                </Flex>
+              </Box>
+            </li>,
+          )
+        }
+        if (toolkit.id == 'MULTI_AGENTS'){
+          multiAgents.push(
+            <li key={tool.id}>
+              <Box className="card-agent-info">
+                <Flex alignItems="center">
+                  <IconBox colorIcon="light" sx={{ mr: 3 }}><Agent /></IconBox>
+                  <Text colorScheme="light.contrastText">
+                    {tool.name}
+                  </Text>
+                </Flex>
+              </Box>
+            </li>,
+          )
+        }
+      }
     }
     for (const toolkit of customToolkits) {
       for (const tool of toolkit.tools) {
-        result.push(
+        tools.push(
           <li key={tool.id}>
-            <ToolBadge name={tool.name} image={toolkit.avatar ?? undefined} style={{ maxWidth: '150px' }} />
+            <Box className="card-agent-info">
+              <Flex alignItems="center">
+                {toolkit.avatar ? 
+                  <Avatar size="xxs" sx={{ mr: 3 }}><img src={toolkit.avatar}  /></Avatar> : 
+                  <IconBox colorIcon="light" sx={{ mr: 3 }}><Cog /></IconBox>}
+                <Text colorScheme="light.contrastText">{tool.name}</Text>
+              </Flex>
+            </Box>
           </li>,
         )
       }
     }
-    return result
+    return { tools, multiAgents }
   }, [agent])
 
   return (
@@ -64,10 +101,14 @@ export const AgentDescription = ({ agentId }: { agentId?: string }) => {
         <Text appearance="microtext1" className="title">Knowledge sources</Text>
         <ul>{isLoading || isLoadingToolKit ? skeleton : knowledgeSources}</ul>
       </section>}
-      {!!tools.length && <section>
+      {!!tools?.length && <section>
         <Text appearance="microtext1" className="title">{t.tools}</Text>
         <ul>{tools}</ul>
       </section>}
+      {!!multiAgents?.length && <section>
+        <Text appearance="microtext1" className="title">{t.multiAgent}</Text>
+        <ul>{multiAgents}</ul>
+      </section>}
       {agent?.model_name && <section>
         <Text appearance="microtext1" className="title">LLM</Text>
         <Badge palette="orange" appearance="square">{agent?.model_name}</Badge>

package/src/views/Agents/dictionary.ts

@@ -18,6 +18,7 @@ const dictionary = {
     favorites: 'Favorites',
     tools: 'Tools',
     spots: 'Spots',
+    multiAgent: 'Multi-agents',
   },
   pt: {
     title: 'Agentes',
@@ -36,6 +37,7 @@ const dictionary = {
     favorites: 'Favoritos',
     tools: 'Ferramentas',
     spots: 'Spots',
+    multiAgent: 'Multi-agents',
 
   },
 } satisfies Dictionary

package/src/views/Agents/styled.ts

@@ -18,9 +18,11 @@ export const AgentLabel = styled.div`
 export const AgentDescriptionBox = styled.div`
   color: ${theme.color.light[700]};
   line-height: 18px;
+  background-color: ${theme.color.light[400]};
+  margin: -10px;
+  padding: 8px;
 
   section {
-    border-bottom: 1px solid ${theme.color.light[600]};
     padding-bottom: 10px;
     margin-bottom: 10px;
 
@@ -34,6 +36,14 @@ export const AgentDescriptionBox = styled.div`
       display: block;
       margin-bottom: 6px;
     }
+
+    .card-agent-info {
+      background-color: ${theme.color.light[500]};
+      border: 1px solid ${theme.color.light[600]};
+      border-radius: 3px;
+      padding: 4px;
+      width: 100%;
+    }
   }
   
   ul {
@@ -44,10 +54,11 @@ export const AgentDescriptionBox = styled.div`
     flex-direction: row;
     flex-wrap: wrap;
     white-space: nowrap;
-    gap: 6px;
 
     li {
-      margin: 3px 0;
+      margin-bottom: 3px;
+      display: flex;
+      width: 100%;
     }
   }
 

package/src/views/Agents/useAgentFavorites.ts

@@ -1,10 +1,10 @@
 /* eslint-disable filenames/match-regex */
-import { agentClient, agentToolsClient } from '@stack-spot/portal-network'
+import { agentToolsClient } from '@stack-spot/portal-network'
 
 export function useAgentFavorites() {
   const useFavorites = () => agentToolsClient.agents.useQuery({ visibility: 'favorite' })
-  const [addFavorite, pendingAddFav] = agentClient.addFavoriteAgent.useMutation()
-  const [removeFavorite, pendingRemoveFav] = agentClient.removeFavoriteAgent.useMutation()
+  const [addFavorite, pendingAddFav] = agentToolsClient.addFavorite.useMutation()
+  const [removeFavorite, pendingRemoveFav] = agentToolsClient.removeFavorite.useMutation()
 
   const removeFavoriteAgent = async (idOrSlug?: string) => {
     try {

package/src/views/Chat/ChatMessage.tsx

@@ -1,6 +1,6 @@
 import { Box, Button, Checkbox, Flex, IconBox, Input, Label, Radio, Text } from '@citric/core'
-import { Check, Cog, Copy, Dislike, DislikeFill, Like, LikeFill, TimesCircle } from '@citric/icons'
-import { Badge, IconButton, Tooltip } from '@citric/ui'
+import { Agent, Check, Cog, Copy, Dislike, DislikeFill, Like, LikeFill, TimesCircle } from '@citric/icons'
+import { Avatar, AvatarGroup, Badge, IconButton, Tooltip } from '@citric/ui'
 import { agentToolsClient } from '@stack-spot/portal-network'
 import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
@@ -10,7 +10,6 @@ import { PhoneInput } from 'react-international-phone'
 import 'react-international-phone/style.css'
 import { FileDescription } from '../../components/FileDescription'
 import { Markdown } from '../../components/Markdown'
-import { StackedBadge } from '../../components/StackedBadge'
 import { useChatEntry, useCurrentChat, useWidget } from '../../context/hooks'
 import { useMidnightUpdateView } from '../../hooks/midnight-update-view'
 import { ChatEntry, SerializableAction, TextChatEntry } from '../../state/ChatEntry'
@@ -195,6 +194,8 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
   const chat = useCurrentChat()
   const agentId = entry.agent?.id ?? ''
   const [toolKits] = agentToolsClient.tools.useStatefulQuery({}, { enabled: !!agentId })
+  const [agentsTools] = agentToolsClient.agentsByIds.useStatefulQuery(
+    { searchAgentsRequest: { ids: entry.tools || [''] } }, { enabled: !!entry.tools })
   const [copied, setCopied] = useState(false)
   const [showUserButtonCopy, setShowUserButtonCopy] = useState(false)
 
@@ -309,12 +310,11 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
     </form>
   }
 
-  function openToolsPanel() {
+  function openResourcesPanel() {
     widget.set('currentMessageInPanel', { chatId: chat.id, messageId: message.id })
-    widget.set('panel', 'tools')
+    widget.set('panel', 'resources')
   }
 
-
   return (entry.content || entry.error || !!entry.steps?.length || entry.upload?.length) && (
     <li key={entry.messageId} className={entry.agentType} ref={ref}>
       <div className="chat-message-container"
@@ -342,19 +342,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
           )}
         </div>
         {afterMessage && createElement(afterMessage, { message })}
-        {!!entry.tools?.length && <StackedBadge
-          aria-label={t.openToolsPanel}
-          title={t.openToolsPanel}
-          tabIndex={0}
-          role="button"
-          className="tools-badge"
-          label={t.tools}
-          images={entry.tools.slice(0, 3).map((id) => {
-            const tool = toolById(id, toolKits)
-            return { key: id, name: tool?.name || id, icon: <Cog />, url: tool?.image }
-          })}
-          onClick={openToolsPanel}
-        />}
+
         {!!entry.knowledgeSources?.length && <div className="ks-box">
           <Text appearance="microtext1" colorScheme="light.700">Knowledge Sources:</Text>
           <ul>{entry.knowledgeSources.map((ks, index) => (
@@ -363,6 +351,28 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
             </li>
           ))}</ul>
         </div>}
+
+        {(!!agentsTools?.length || !!entry.tools?.length) && <div className="tools-box">
+          <AvatarGroup onClick={openResourcesPanel} aria-label={t.openResourcesPanel} role="button">
+            {agentsTools?.map((agent) => (
+              <Avatar size="xxs" key={agent.id} className="agent-info-avatar-resource">
+                {agent.avatar ? 
+                  <img alt={agent.name} aria-label={agent.name} title={agent.name} src={agent.avatar} /> : 
+                  <IconBox appearance="circle" aria-label={agent.name} title={agent.name} color="gray"><Agent /></IconBox>}
+              </Avatar>
+            ))}
+            {entry.tools?.map((id) => {
+              const tool = toolById(id, toolKits)
+              return (
+                <Avatar size="xxs" key={id} className="agent-info-avatar-resource">
+                  {tool?.image ? 
+                    <img alt={tool.name} aria-label={tool.name} title={tool.name} src={tool.image} /> : 
+                    <IconBox appearance="circle" aria-label={tool?.name} title={tool?.name} color="gray"><Cog /></IconBox>}
+                </Avatar>
+              )})}
+
+          </AvatarGroup>
+        </div>}
     
         {shouldShowFooter && <div className="message-footer">
           {entry.agentType === 'bot' && !entry.error && <div className="message-actions">
@@ -452,6 +462,7 @@ const dictionary = {
     dislike: 'Dislike',
     tools: 'Tools',
     openToolsPanel: 'Open the tools panel to see more details.',
+    openResourcesPanel: 'Open the resources panel to see more details.',
     copied: 'Copied',
   },
   pt: {
@@ -460,6 +471,7 @@ const dictionary = {
     dislike: 'Não gostei',
     tools: 'Ferramentas',
     openToolsPanel: 'Abrir o painel de ferramentas para ver mais detalhes.',
+    openResourcesPanel: 'Abrir o painel de recursos para ver mais detalhes.',
     copied: 'Copiado',
   },
 } satisfies Dictionary

package/src/views/Chat/styled.ts

@@ -219,6 +219,30 @@ export const ChatList: IStyledComponentBase<
     }
   }
 
+  .tools-box {
+    
+    > ul {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      white-space: nowrap;
+      margin: 0;
+      margin-top: 8px;
+      padding: 0;
+      list-style: none;
+      gap: 6px;
+      
+      &:hover{
+        cursor: pointer;
+        
+        .agent-info-avatar-resource {
+          transition: margin-left 0.3s ease-in;
+          margin-left: 0px;
+        }
+      }
+    }
+  }
+
   .steps {
     ul {
       list-style: none;

package/src/views/MessageInput/UploadBar.tsx

@@ -80,6 +80,12 @@ export const UploadBar = () => {
     setAriaMessage(lines.join(' '))
     setTimeout(() => setAriaMessage(''), 2000)
     chat.pushMessage(new ChatEntry({ agentType: 'system', type: 'md', content: lines.join('\n\n') }))
+
+    if (lines.length) {
+      setAriaMessage(lines.join(' '))
+      setTimeout(() => setAriaMessage(''), 2000)
+      chat.pushMessage(new ChatEntry({ agentType: 'system', type: 'md', content: lines.join('\n\n') }))
+    }
   })
   
   return (