@stack-spot/ai-chat-widget 2.0.0-betacitric.8 → 2.0.0

package/src/views/Agents/AgentDescription.tsx

@@ -1,7 +1,7 @@
-import { Badge, Skeleton, Text } from '@stack-spot/citric-react'
+import { Icon } from '@stack-spot/citric-icons'
+import { Badge, Card, IconBox, ImageBox, ImageWithFallback, Skeleton, Text } from '@stack-spot/citric-react'
 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'
@@ -10,11 +10,16 @@ export const AgentDescription = ({ agentId }: { agentId?: string }) => {
   const t = useAgentsDictionary()
   const [agent, , , { isLoading }] = agentToolsClient.agent.useStatefulQuery({ agentId: agentId! }, { enabled: !!agentId })
   const [toolKits, , , { isLoading: isLoadingToolKit }] = agentToolsClient.tools.useStatefulQuery({})
-  const numberOfKnowledgeSources = agent?.knowledge_source_config?.knowledge_sources.length ?? 0
+  const numberOfKnowledgeSources = agent?.knowledge_sources_config?.knowledge_sources.length ?? 0
   
   const knowledgeSources = useMemo(
-    () => agent?.knowledge_source_config?.knowledge_sources_details?.map((ks, index) => (
-      <li key={index}><Badge colorPalette="teal" appearance="square">{ks.name}</Badge></li>
+    () => agent?.knowledge_sources_config?.knowledge_sources_details?.map((ks, index) => (
+      <li key={index}>
+        <Card gap="10px" direction="row" flex={1} size="xxs" bgLevel={500} justifyContent="space-between">
+          <Text color="light.contrastText">{ks.name}</Text>
+          <Badge colorScheme="inverse" appearance="square">{ks.type}</Badge>
+        </Card>
+      </li>
     )),
     [agent],
   )
@@ -25,32 +30,50 @@ export const AgentDescription = ({ agentId }: { agentId?: string }) => {
     }
     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}>
+              <Card gap="10px" direction="row" flex={1} size="xxs" bgLevel={500}>
+                <ImageBox><ImageWithFallback src={toolWithImage?.image} fallback={<Icon icon="Cog" />} /></ImageBox>
+                <Text color="light.contrastText">{toolWithImage?.name || toolWithImage?.id || 'unknown'}</Text>
+              </Card>
+            </li>,
+          )
+        }
+        if (toolkit.id == 'MULTI_AGENTS'){
+          multiAgents.push(
+            <li key={tool.id}>
+              <Card gap="10px" direction="row" flex={1} size="xxs" bgLevel={500}>
+                <IconBox icon="Agent" />
+                <Text color="light.contrastText">{tool.name}</Text>
+              </Card>
+            </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' }} />
+            <Card gap="10px" direction="row" flex={1} size="xxs" bgLevel={500}>
+              <ImageBox><ImageWithFallback src={toolkit.avatar ?? undefined} fallback={<Icon icon="Cog" />} /></ImageBox>
+              <Text color="light.contrastText">{tool.name}</Text>
+            </Card>
           </li>,
         )
       }
     }
-    return result
+    return { tools, multiAgents }
   }, [agent])
 
   return (
@@ -63,10 +86,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 colorPalette="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,5 +1,5 @@
 import { Icon } from '@stack-spot/citric-icons'
-import { Alert, Badge, Button, CheckboxGroup, Column, IconButton, Input, RadioGroup, Row, Text, Tooltip } from '@stack-spot/citric-react'
+import { Alert, Badge, Button, CheckboxGroup, Column, IconButton, ImageBox, ImageWithFallback, Input, RadioGroup, Row, Text, Tooltip } from '@stack-spot/citric-react'
 import { agentToolsClient } from '@stack-spot/portal-network'
 import { listToClass, theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
@@ -9,8 +9,8 @@ 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'
 import { useDateFormatter } from '../../utils/date'
 import { toolById } from '../../utils/tools'
@@ -214,10 +214,13 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
   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)
 
   useChatScrollToBottomEffect(ref, [entry])
+  useMidnightUpdateView()
 
   const detailKS = useCallback(({ name, slug, documentScore, documentId }: Required<TextChatEntry>['knowledgeSources'][number]) => {
     widget.set('currentKSInPanel', { name, slug, score: documentScore, documentId })
@@ -335,12 +338,11 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
     </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"
@@ -363,7 +365,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
           {entry.error && <Alert type="error">{entry.error}</Alert>}
         </div>
         {afterMessage && createElement(afterMessage, { message })}
-        {!!entry.tools?.length && <StackedBadge
+        {/* {!!entry.tools?.length && <StackedBadge
           aria-label={t.openToolsPanel}
           title={t.openToolsPanel}
           tabIndex={0}
@@ -376,7 +378,8 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
           })}
           onClick={openToolsPanel}
           style={{ marginTop: '12px', width: 'fit-content' }}
-        />}
+        />} */}
+
         {!!entry.knowledgeSources?.length && <div className="ks-box">
           <Text appearance="microtext1" color="light.700">Knowledge Sources:</Text>
           <ul>{entry.knowledgeSources.map((ks, index) => (
@@ -385,6 +388,35 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
             </li>
           ))}</ul>
         </div>}
+
+        {(!!agentsTools?.length || !!entry.tools?.length) && <div className="tools-box">
+          <Button appearance="none" onClick={openResourcesPanel} aria-label={t.openResourcesPanel}>
+            {agentsTools?.map((agent) => (
+              <ImageBox key={agent.id} className="agent-info-avatar-resource">
+                <ImageWithFallback
+                  src={agent.avatar ?? undefined}
+                  fallback={<Icon icon="Agent" />}
+                  alt={agent.name}
+                  aria-label={agent.name}
+                  title={agent.name}
+                />
+              </ImageBox>
+            ))}
+            {entry.tools?.map((id) => {
+              const tool = toolById(id, toolKits)
+              return (
+                <ImageBox key={id} className="agent-info-avatar-resource">
+                  <ImageWithFallback
+                    src={tool?.image}
+                    fallback={<Icon icon="Cog" />}
+                    alt={tool?.name}
+                    aria-label={tool?.name}
+                    title={tool?.name}
+                  />
+                </ImageBox>
+              )})}
+          </Button>
+        </div>}
     
         {shouldShowFooter && <div className="message-footer">
           {entry.agentType === 'bot' && !entry.error && <div className="message-actions">
@@ -467,6 +499,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: {
@@ -475,6 +508,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

@@ -218,6 +218,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/ContextBar.tsx

@@ -22,8 +22,7 @@ const ContextBadge = ({ label, color, dismiss, onDismiss }: ContextBadgeProps) =
       onClick={onDismiss}
       title={dismiss}
       arial-label={dismiss}
-      style={{ padding: '2px 0 2px 2px' }}
-      colorPalette={color}
+      style={{ padding: '2px 0 2px 2px', color: 'inherit' }}
     />}
   </Badge>
 )

package/src/views/MessageInput/SelectContent.tsx

@@ -15,6 +15,7 @@ export const SelectContent = () => {
 
   const itemConfigs = useMemo<(MenuAction & { key: keyof typeof features, section: 0 | 1 })[]>(() => ([
     {
+      role: 'button',
       key: 'agent',
       section: 0,
       label: t.chatAgent,
@@ -25,6 +26,7 @@ export const SelectContent = () => {
       },
     },
     {
+      role: 'button',
       key: 'quickCommands',
       section: 0,
       label: 'Quick Commands',
@@ -35,6 +37,7 @@ export const SelectContent = () => {
       },
     },
     {
+      role: 'button',
       key: 'knowledgeSource',
       section: 0,
       label: 'Knowledge Sources',
@@ -42,6 +45,7 @@ export const SelectContent = () => {
       onClick: () => widget.set('panel', 'ks'),
     },
     {
+      role: 'button',
       key: 'stack',
       section: 0,
       label: 'Stacks AI',
@@ -49,6 +53,7 @@ export const SelectContent = () => {
       onClick: () => widget.set('panel', 'stack'),
     },
     {
+      role: 'button',
       key: 'workspace',
       section: 0,
       label: 'Spots',
@@ -56,6 +61,7 @@ export const SelectContent = () => {
       onClick: () => widget.set('panel', 'workspace'),
     },
     {
+      role: 'button',
       key: 'upload',
       section: 1,
       label: t.upload,

package/src/views/MessageInput/UploadBar.tsx

@@ -1,6 +1,6 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { interpolate } from '@stack-spot/portal-translate'
-import { useMemo } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { FadingOverflow } from '../../components/FadingOverflow'
 import { FileDescription } from '../../components/FileDescription'
 import { useCurrentChat } from '../../context/hooks'
@@ -22,6 +22,7 @@ const UploadItem = ({ upload }: UploadedFileProps) => {
   const uploadManager = useUploadManager()
   const icon = upload.file.type.toLowerCase().startsWith('image/') ? createImageFromFile(upload.file) : undefined
   const status = useUploadStatus(upload)
+
   return <FileDescription
     fileName={upload.file.name}
     icon={icon}
@@ -37,6 +38,29 @@ export const UploadBar = () => {
   const t = useMessageInputDictionary()
   const chat = useCurrentChat()
   const visible = !!uploads.length
+  const [ariaMessage, setAriaMessage] = useState('')
+  const prevUploadsRef = useRef<FileUpload[]>([])
+  const announcedUploadsRef = useRef(new Set())
+
+  useEffect(() => {
+    const prevUploads = prevUploadsRef.current
+    const newUploads = uploads.filter(
+      up => !prevUploads.some(prev => prev.id === up.id),
+    )
+    newUploads.forEach((up) => {
+      if (!announcedUploadsRef.current.has(up.id)) {
+        setAriaMessage('') 
+        setTimeout(() => {
+          setAriaMessage(`${t.uploadSuccessStatus}: ${up.file.name}`)
+          setTimeout(() => setAriaMessage(''), 2500) 
+        }, 100) 
+        announcedUploadsRef.current.add(up.id)
+      }
+    })
+    if (uploads.some(up => up.status === 'error')) {
+      setTimeout(() => setAriaMessage(''), 2000)
+    }
+  }, [uploads])
 
   useUploadErrorEffect((errors) => {
     const sizeErrors = errors.filter(e => e instanceof FileIsTooLarge)
@@ -53,11 +77,25 @@ export const UploadBar = () => {
       lines.push(`${interpolate(t.uploadItemLimitError, maxItems)}\n- ${maxItemsErrorsNames.join('\n- ')}`)
     }
     if (!lines.length) return
+    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 (
     <div className={listToClass(['info-bar', 'upload-bar', visible && 'visible'])}>
+      <div className="aria-live"
+        aria-live="polite"
+        aria-atomic="true"
+      >
+        {ariaMessage}
+      </div>
       <div className="space"></div>
       <div className="content">
         <FadingOverflow className="list-overflow" scroll="arrows" enableHorizontalScrollWithVerticalWheel>

package/src/views/MessageInput/dictionary.ts

@@ -33,6 +33,8 @@ const dictionary = {
     cantSendBecauseOfEmptyContent: 'You can\'t send empty messages. Please write some text or upload a file.',
     cantSendBecausePromptMaxLength: 'You can\'t send messages longer than $0 characters. Please, shorten your message.',
     chatAgent: 'Agents',
+    uploadSuccessStatus: 'File sent successfully',
+    chatViewMenu: 'Chat options menu',
   },
   pt: {
     stack: 'Selecionar stack',
@@ -66,6 +68,8 @@ const dictionary = {
     cantSendBecauseOfEmptyContent: 'Não é possível enviar mensagens vazias. Por favor, escreva algum texto ou envie um arquivo.',
     cantSendBecausePromptMaxLength: 'Você não pode enviar mensagens com mais de $0 caracteres. Por favor, reduza sua mensagem.',
     chatAgent: 'Agentes',
+    uploadSuccessStatus: 'Arquivo anexado com sucesso',
+    chatViewMenu: 'Menu de opções do chat',
   },
 } satisfies Dictionary
 

package/src/views/MessageInput/styled.ts

@@ -64,6 +64,18 @@ export const MessageInputBox = styled.div`
       }
     }
 
+    > .aria-live {
+       position: absolute;
+       width: 1px;
+       height: 1px;
+       margin: -1px;
+       padding: 0;
+       overflow: hidden;
+       clip: rect(0 0 0 0);
+       white-space: nowrap;
+       border: 0;
+    }
+
     > .space {
       height: 0;
       transition: height 0.4s;

package/src/views/Resources.tsx

@@ -0,0 +1,99 @@
+import { Accordion, Icon, ImageBox, ImageWithFallback, Row, Text } from '@stack-spot/citric-react'
+import { agentToolsClient } from '@stack-spot/portal-network'
+import { theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useEffect, useMemo } from 'react'
+import { styled } from 'styled-components'
+import { useWidget, useWidgetState } from '../context/hooks'
+import { useRightPanel } from '../right-panel/hooks'
+import { toolById } from '../utils/tools'
+import { AgentDescription } from './Agents/AgentDescription'
+
+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(
+      <ResourcesPanel key={message.messageId} />,
+      { title: t.title, description: t.description, onClose: () => widget.set('panel', undefined) },
+    )
+  }, [panel, t])
+
+  return null
+}
+
+const StyledAccordion = styled(Accordion)`
+  &[data-citric="accordion"] {
+    background-color: ${theme.color.light[400]};
+  }
+`
+
+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?: string, label?: string) => (
+    <Row gap="10px">
+      <ImageBox>
+        <ImageWithFallback src={image} fallback={<Icon icon="Agent" />} aria-label={label} title={label} />
+      </ImageBox>
+      <Text>{label}</Text>
+    </Row>
+  )
+  
+  return !!(tools?.length || customTools?.length) && (
+    <>
+      <>
+        {[...(tools || []), ...(customTools || [])].map(
+          (tool) =>
+            tool && (
+              <StyledAccordion key={tool.id} header={header(tool?.image, tool?.name)} appearance="card">
+                {tool?.description}
+              </StyledAccordion>
+            ))}
+      </>
+      {
+        hasAgentTool && 
+        <>
+          {message?.tools?.map((id) => {
+            const agentTool = agentsTools?.find((agent) => agent.id === id)
+            return (
+              <StyledAccordion key={id} header={header(agentTool?.avatar || undefined, agentTool?.name)}>
+                <AgentDescription  agentId={id} />
+              </StyledAccordion>
+            )},
+          )}
+        </>
+      }
+    </>
+  )
+}
+
+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.',
+  },
+} satisfies Dictionary

package/src/views/Tools.tsx

@@ -42,19 +42,25 @@ 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}
-          />
-        </li>
-      ))}
+      {[...(tools || []), ...(customTools || [])].map(
+        (tool) =>
+          tool && (
+            <li key={tool.id}>
+              <ToolBadge
+                name={tool.name || tool.id}
+                image={tool.image ?? ''}
+                description={tool.description ?? ''}
+              />
+            </li>
+          ),
+      )}
     </ToolList>
   )
 }