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

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 { ChatEntry, SerializableAction, TextChatEntry } from '../../state/ChatEntry'
 import { useDateFormatter } from '../../utils/date'
@@ -194,6 +193,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)
 
@@ -307,12 +308,18 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
     </form>
   }
 
-  function openToolsPanel() {
+  // function openToolsPanel() {
+  //   widget.set('currentMessageInPanel', { chatId: chat.id, messageId: message.id })
+  //   widget.set('panel', 'tools')
+  // }
+
+  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,7 +347,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
           )}
         </div>
         {afterMessage && createElement(afterMessage, { message })}
-        {!!entry.tools?.length && <StackedBadge
+        {/* {!!entry.tools?.length && <StackedBadge
           aria-label={t.openToolsPanel}
           title={t.openToolsPanel}
           tabIndex={0}
@@ -352,7 +359,8 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
             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 +369,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 +480,8 @@ 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 +490,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,34 @@ 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/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,98 @@
+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