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

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