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

package/src/hooks/midnight-update-view.ts

@@ -0,0 +1,36 @@
+import { useManualRender } from '@stack-spot/portal-components'
+import { useEffect } from 'react'
+
+/**
+ * Returns the number of milliseconds remaining until the next midnight.
+ */
+function getTimeUntilMidnight() {
+  const now = new Date()
+  const midnight = new Date(now)
+  midnight.setHours(24, 0, 0, 0)
+  return midnight.getTime() - now.getTime()
+}
+
+/**
+ * Hook that triggers a component re-render at midnight every day.
+ */
+export function useMidnightUpdateView() {
+  const { repaint } = useManualRender()
+
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout> | undefined
+
+    const scheduleUpdate = () => {
+      const timeUntilMidnight = getTimeUntilMidnight()
+
+      timer = setTimeout(() => {
+        repaint()
+        scheduleUpdate()
+      }, timeUntilMidnight)
+    }
+
+    scheduleUpdate()
+    
+    return () => { timer && clearTimeout(timer) }
+  }, [])
+}

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/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/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,8 +10,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'
@@ -194,10 +194,13 @@ 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)
 
   useChatScrollToBottomEffect(ref, [entry])
+  useMidnightUpdateView()
 
   const detailKS = useCallback(({ name, slug, documentScore, documentId }: Required<TextChatEntry>['knowledgeSources'][number]) => {
     widget.set('currentKSInPanel', { name, slug, score: documentScore, documentId })
@@ -307,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"
@@ -340,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) => (
@@ -361,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">
@@ -450,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: {
@@ -458,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/SelectContent.tsx

@@ -91,10 +91,9 @@ export const SelectContent = () => {
         id="button-content-select"
         color="light"
         appearance="square"
-        role="button"
-        title={visibleMenu ? t.collapse && t.chatViewMenu : t.expand}
+        title={t.chatViewMenu}
         data-test-hint="button-options"
-        aria-label={visibleMenu ? t.collapse : t.expand && t.chatMenu}
+        aria-label={t.chatViewMenu}
         aria-controls="chatMessageMenu"
         aria-expanded={visibleMenu} 
         onClick={() => setVisibleMenu(state => !state)}>
@@ -106,7 +105,7 @@ export const SelectContent = () => {
         visible={visibleMenu}
         onHide={() => setVisibleMenu(false)}
         items={listItems}
-        aria-label="Menu de opções do chat"
+        aria-label={t.chatViewMenu}
       />
     </>
   ) : (

package/src/views/MessageInput/UploadBar.tsx

@@ -22,7 +22,6 @@ const UploadItem = ({ upload }: UploadedFileProps) => {
   const uploadManager = useUploadManager()
   const icon = upload.file.type.toLowerCase().startsWith('image/') ? createImageFromFile(upload.file) : undefined
   const status = useUploadStatus(upload)
-  const errorMessage = status === 'error' ? (upload.error?.message || 'Falha ao anexar o arquivo') : undefined
 
   return <FileDescription
     fileName={upload.file.name}
@@ -30,7 +29,6 @@ const UploadItem = ({ upload }: UploadedFileProps) => {
     onRemove={() => uploadManager.remove(upload)}
     onRetry={() => upload.retry()}
     status={status}
-    errorMessage={errorMessage}
   />
 }
 
@@ -62,7 +60,7 @@ export const UploadBar = () => {
     if (uploads.some(up => up.status === 'error')) {
       setTimeout(() => setAriaMessage(''), 2000)
     }
-  }, [uploads, t.uploadSuccessStatus])
+  }, [uploads])
 
   useUploadErrorEffect((errors) => {
     const sizeErrors = errors.filter(e => e instanceof FileIsTooLarge)
@@ -89,8 +87,7 @@ export const UploadBar = () => {
       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"

package/src/views/MessageInput/dictionary.ts

@@ -34,8 +34,7 @@ const dictionary = {
     cantSendBecausePromptMaxLength: 'You can\'t send messages longer than $0 characters. Please, shorten your message.',
     chatAgent: 'Agents',
     uploadSuccessStatus: 'File sent successfully',
-    chatMenu: 'Chat options menu',
-    chatViewMenu: 'Viewing menu options',
+    chatViewMenu: 'Chat options menu',
   },
   pt: {
     stack: 'Selecionar stack',
@@ -70,8 +69,7 @@ const dictionary = {
     cantSendBecausePromptMaxLength: 'Você não pode enviar mensagens com mais de $0 caracteres. Por favor, reduza sua mensagem.',
     chatAgent: 'Agentes',
     uploadSuccessStatus: 'Arquivo anexado com sucesso',
-    chatMenu: 'Menu de opções do chat',
-    chatViewMenu: 'Visualizando as opções de menu',
+    chatViewMenu: 'Menu de opções do chat',
   },
 } satisfies Dictionary
 

package/src/views/MessageInput/styled.ts

@@ -67,14 +67,14 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
 
     > .aria-live {
        position: absolute;
-          width: 1;
-          height: 1;
-          margin: -1;
-          padding: 0;
-          overflow: hidden;
-          clip: rect(0 0 0 0);
-          white-Space: nowrap;
-          border: 0;
+       width: 1px;
+       height: 1px;
+       margin: -1px;
+       padding: 0;
+       overflow: hidden;
+       clip: rect(0 0 0 0);
+       white-space: nowrap;
+       border: 0;
     }
 
     > .space {

package/src/views/Resources.tsx

@@ -0,0 +1,99 @@
+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 { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useEffect, useMemo } from 'react'
+import { Accordion } from '../components/Accordion'
+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 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) => (
+    <Flex alignItems="center">
+      {image ? <Avatar size="xxs">
+        <img title={label} src={image} />
+      </Avatar> : 
+        <IconBox appearance="circle" title={label} color="gray"><Agent /></IconBox>}
+      <Text ml={3}>{label}</Text>
+    </Flex>
+  )
+  
+  return !!(tools?.length || customTools?.length) && (
+    <>
+      <>
+        {[...(tools || []), ...(customTools || [])].map(
+          (tool) =>
+            tool && (
+              <Box key={tool.id} mt={3}>
+                <Accordion header={header(tool?.image, tool?.name)}>
+                  <Box sx={{ backgroundColor: 'light.400', m: '-10px', p: '16px' }}>
+                    {tool?.description}
+                  </Box>
+                </Accordion>
+              </Box>))}
+      </>
+      {
+        hasAgentTool && 
+        <>
+          {message?.tools?.map((id) => {
+            const agentTool = agentsTools?.find((agent) => agent.id === id)
+            return (
+              <Box key={id} mt={3}>
+                <Accordion header={header(agentTool?.avatar || undefined, agentTool?.name)}>
+                  <AgentDescription  agentId={id} />
+                </Accordion>
+              </Box>)},
+          )}
+        </>
+      }
+    </>
+  )
+}
+
+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,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>
   )
 }