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

package/src/views/Chat/ChatMessage.tsx

@@ -12,6 +12,7 @@ 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'
@@ -198,6 +199,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
   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 })

package/src/views/MessageInput/ContextBar.tsx

@@ -19,7 +19,7 @@ const ContextBadge = ({ label, color, dismiss, onDismiss }: ContextBadgeProps) =
   <Badge appearance="square" palette={color} className="context-badge" 
     afterElement={
       onDismiss && 
-      <IconButton appearance="square" colorIcon={`${color}.800`} onClick={onDismiss} title={dismiss} arial-label={dismiss}>
+      <IconButton appearance="square" colorIcon={`${color}.800`} onClick={onDismiss} title={dismiss} aria-label={dismiss}>
         <TimesMini />
       </IconButton>
     }>

package/src/views/MessageInput/SelectContent.tsx

@@ -20,53 +20,53 @@ export const SelectContent = () => {
 
   const itemConfigs = [
     {
+      role: 'button',
       key: 'agent',
       label: t.chatAgent,
       icon: <Agent />,
-      'aria-label': 'Botão de agent',
       onClick: (event?: React.MouseEvent) => {
         event?.stopPropagation()
         chat.set('nextMessage', '@')
       },
     },
     {
+      role: 'button',
       key: 'quickCommands',
       label: 'Quick Commands',
       icon: <QuickCommand />,
-      'aria-label': 'Botão de quickCommands',
       onClick: (event?: React.MouseEvent) => {
         event?.stopPropagation()
         chat.set('nextMessage', '/')
       },
     },
     {
+      role: 'button',
       key: 'knowledgeSource',
       label: 'Knowledge Sources',
       icon: <KnowledgeSource />,
-      'aria-label': 'Botão de knowledgeSource',
       panel: 'ks',
     },
     {
+      role: 'button',
       key: 'stack',
       label: 'Stacks AI',
       icon: <Stack />,
-      'aria-label': 'Botão de stack',
       panel: 'stack',
     },
     {
+      role: 'button',
       key: 'workspace',
       label: 'Spots',
       icon: <Spaces />,
-      'aria-label': 'Botão de workspace',
       panel: 'workspace',
     },
     {
+      role: 'button',
       key: 'upload',
       label: t.upload,
       onClick: () => uploadManager.open(),
       className: 'upload-item',
       icon: <DocumentUpload />,
-      'aria-label': 'Botão de upload de arquivos',
     },
   ]
 
@@ -80,7 +80,7 @@ export const SelectContent = () => {
           widget.set('panel', chatFeatures.panel as ChatPanel)
           setVisibleMenu(false)
         }) : chatFeatures.onClick,
-        'aria-label': chatFeatures['aria-label'],
+        role: chatFeatures.role,
       })), [features, widget])
 
   if (!hasFeatureButtons) return null
@@ -91,10 +91,9 @@ export const SelectContent = () => {
         id="button-content-select"
         color="light"
         appearance="square"
-        role="button"
-        title={visibleMenu ? t.collapse : t.expand}
+        title={t.chatViewMenu}
         data-test-hint="button-options"
-        aria-label={visibleMenu ? t.collapse : t.expand}
+        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,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}
@@ -39,7 +40,7 @@ export const UploadBar = () => {
   const visible = !!uploads.length
   const [ariaMessage, setAriaMessage] = useState('')
   const prevUploadsRef = useRef<FileUpload[]>([])
-  const announcedUploadsRef = useRef<Set<string>>(new Set())
+  const announcedUploadsRef = useRef(new Set())
 
   useEffect(() => {
     const prevUploads = prevUploadsRef.current
@@ -79,15 +80,8 @@ 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 (
     <div className={listToClass(['info-bar', 'upload-bar', visible && 'visible'])}>
       <div className="aria-live"

package/src/views/MessageInput/dictionary.ts

@@ -34,6 +34,7 @@ const dictionary = {
     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',
@@ -68,6 +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',
+    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/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>
   )
 }