@stack-spot/ai-chat-widget 1.36.1-betacitric.1 → 1.36.1

package/src/views/MessageInput/ButtonBar.tsx

@@ -1,4 +1,6 @@
-import { IconButton, Row } from '@stack-spot/citric-react'
+import { Flex } from '@citric/core'
+import { ArrowUp, Code, Stop } from '@citric/icons'
+import { IconButton } from '@citric/ui'
 import { useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
 import { useMessageInputDictionary } from './dictionary'
 import { SelectContent } from './SelectContent'
@@ -23,33 +25,27 @@ export const ButtonBar = ({ onSend, isLoading }: SelectionBarProps) => {
 
   return (
     <SelectionBarWrapper className="button-group">
-      <Row center={false} gap="4px">
+      <Flex sx={{ gap: '4px' }}>
         <SelectContent />
         {features.editor && (
-          <IconButton icon="Code" appearance="square" aria-label={t.code} title={t.code} onClick={() => widget.set('panel', 'editor')} />
+          <IconButton color="light" appearance="square" aria-label={t.code} title={t.code} onClick={() => widget.set('panel', 'editor')}>
+            <Code />
+          </IconButton>
         )}
-      </Row>
-      {isLoading ? (
-        <IconButton
-          icon="Stop"
-          appearance="square"
-          colorScheme="inverse"
-          aria-label={t.cancel}
-          onClick={() => chat.abort()}
-          className="send"
-          title={t.cancel}
-        />
-      ) : (
-        <IconButton
-          icon="ArrowUp"
-          appearance="square"
-          colorScheme="inverse"
-          aria-label={t.send}
-          onClick={onSend}
-          className="send"
-          title={t.send}
-        />
-      )}
+      </Flex>
+      <Flex>
+        {isLoading ? (
+          <IconButton appearance="square" color="inverse" aria-label={t.cancel} 
+            onClick={() => chat.abort()} className="send" title={t.cancel}>
+            <Stop />
+          </IconButton>
+        ) : (
+          <IconButton appearance="square" color="inverse" aria-label={t.send} 
+            onClick={onSend} className="send" title={t.send}>
+            <ArrowUp />
+          </IconButton>
+        )}
+      </Flex>
     </SelectionBarWrapper>
   )
 }

package/src/views/MessageInput/ContextBar.tsx

@@ -1,6 +1,7 @@
+import { Text } from '@citric/core'
+import { TimesMini } from '@citric/icons'
+import { Badge, IconButton } from '@citric/ui'
 import { loader } from '@monaco-editor/react'
-import { Icon } from '@stack-spot/citric-icons'
-import { Badge, Button, IconButton, Text } from '@stack-spot/citric-react'
 import { ColorPaletteName, listToClass } from '@stack-spot/portal-theme'
 import { useCallback, useMemo } from 'react'
 import { FadingOverflow } from '../../components/FadingOverflow'
@@ -15,11 +16,14 @@ interface ContextBadgeProps {
 }
 
 const ContextBadge = ({ label, color, dismiss, onDismiss }: ContextBadgeProps) => (
-  <Badge appearance="square" colorPalette={color} className="context-badge">
+  <Badge appearance="square" palette={color} className="context-badge" 
+    afterElement={
+      onDismiss && 
+      <IconButton appearance="square" colorIcon={`${color}.800`} onClick={onDismiss} title={dismiss} aria-label={dismiss}>
+        <TimesMini />
+      </IconButton>
+    }>
     <Text nowrapEllipsis>{label}</Text>
-    {onDismiss && <Button appearance="none" onClick={onDismiss} title={dismiss} arial-label={dismiss} style={{ padding: '2px 0 2px 2px' }}>
-      <Icon icon="TimesMini" size="sm" />
-    </Button>}
   </Badge>
 )
 
@@ -70,12 +74,10 @@ export const ContextBar = () => {
       <div className="content">
         {shouldRenderRemoveAllButton && (
           <IconButton 
-            icon="TimesMini"
-            aria-label={t.removeConfig}
-            title={t.removeConfig}
-            onClick={removeAll}
-            style={{ marginLeft: '8px' }}
-          />
+            appearance="square" color="light" 
+            aria-label={t.removeConfig} title={t.removeConfig} onClick={removeAll}>
+            <TimesMini />
+          </IconButton>
         )}
         <FadingOverflow className="list-overflow" scroll="arrows" enableHorizontalScrollWithVerticalWheel>
           <ul>

package/src/views/MessageInput/QuickCommandSelector.tsx

@@ -1,4 +1,4 @@
-import { Icon } from '@stack-spot/citric-icons'
+import { QuickCommand } from '@citric/icons'
 import { aiClient, workspaceAiClient } from '@stack-spot/portal-network'
 import { QuickCommandResponse } from '@stack-spot/portal-network/api/ai'
 import { useCallback } from 'react'
@@ -113,7 +113,7 @@ export const QuickCommandSelector = ({ inputRef, isTrial }:
     selectorConfig={{
       resourceName: 'Quick Command',
       shortcut: '/',
-      icon: <Icon icon="QuickCommand" />,
+      icon: <QuickCommand />,
       searchProp: 'slug',
       urlBuilder: (qc) => `/quick-command/${qc?.slug}`,
       regex: quickCommandRegex,

package/src/views/MessageInput/SelectContent.tsx

@@ -1,93 +1,122 @@
-import { Icon } from '@stack-spot/citric-icons'
-import { IconButton, ImageButton, MenuAction, MenuOverlay, MenuSection } from '@stack-spot/citric-react'
-import { useMemo } from 'react'
+import { Agent, DocumentUpload, KnowledgeSource, Plus, QuickCommand, Spaces, Stack } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { SelectionList } from '@stack-spot/portal-components/SelectionList'
+import { useMemo, useState } from 'react'
 import { useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
 import { useUploadManager } from '../../utils/upload/context'
 import { useMessageInputDictionary } from './dictionary'
 
+type ChatFeatures = 'workspace' | 'knowledgeSource' | 'stack'
+type ChatPanel = 'ks' | 'workspace' | 'stack'
+
 export const SelectContent = () => {
   const widget = useWidget()
+  const [visibleMenu, setVisibleMenu] = useState(false)
   const features = useCurrentChatState('features')
   const t = useMessageInputDictionary()
   const uploadManager = useUploadManager()
   const hasFeatureButtons = features.workspace || features.knowledgeSource || features.stack || features.upload
   const chat = useCurrentChat()
 
-  const itemConfigs = useMemo<(MenuAction & { key: keyof typeof features, section: 0 | 1 })[]>(() => ([
+  const itemConfigs = [
     {
+      role: 'button',
       key: 'agent',
-      section: 0,
       label: t.chatAgent,
-      icon: <Icon icon="Agent" />,
+      icon: <Agent />,
       onClick: (event?: React.MouseEvent) => {
         event?.stopPropagation()
         chat.set('nextMessage', '@')
       },
     },
     {
+      role: 'button',
       key: 'quickCommands',
-      section: 0,
       label: 'Quick Commands',
-      icon: <Icon icon="QuickCommand" />,
+      icon: <QuickCommand />,
       onClick: (event?: React.MouseEvent) => {
         event?.stopPropagation()
         chat.set('nextMessage', '/')
       },
     },
     {
+      role: 'button',
       key: 'knowledgeSource',
-      section: 0,
       label: 'Knowledge Sources',
-      icon: <Icon icon="KnowledgeSource" />,
-      onClick: () => widget.set('panel', 'ks'),
+      icon: <KnowledgeSource />,
+      panel: 'ks',
     },
     {
+      role: 'button',
       key: 'stack',
-      section: 0,
       label: 'Stacks AI',
-      icon: <Icon icon="Stack" />,
-      onClick: () => widget.set('panel', 'stack'),
+      icon: <Stack />,
+      panel: 'stack',
     },
     {
+      role: 'button',
       key: 'workspace',
-      section: 0,
       label: 'Spots',
-      icon: <Icon icon="Spaces" />,
-      onClick: () => widget.set('panel', 'workspace'),
+      icon: <Spaces />,
+      panel: 'workspace',
     },
     {
+      role: 'button',
       key: 'upload',
-      section: 1,
       label: t.upload,
       onClick: () => uploadManager.open(),
       className: 'upload-item',
-      icon: <Icon icon="DocumentUpload" />,
+      icon: <DocumentUpload />,
     },
-  ] as const).filter(({ key }) => features[key]), [features, widget])
+  ]
 
-  const listItems = useMemo(() => {
-    const sections: [MenuSection, MenuSection] = [
-      { type: 'section', children: [] },
-      { type: 'section', children: [] },
-    ]
-    itemConfigs.forEach(item => sections[item.section].children.push(item))
-    return sections.filter(s => !!s.children.length)
-  }, [itemConfigs])
+  const listItems = useMemo(() =>
+    itemConfigs.filter(chatFeatures => features[chatFeatures.key as ChatFeatures])
+      .map(chatFeatures => ({
+        label: chatFeatures.label,
+        icon: chatFeatures.icon,
+        className: chatFeatures.className,
+        onClick: chatFeatures.panel ? (() => {
+          widget.set('panel', chatFeatures.panel as ChatPanel)
+          setVisibleMenu(false)
+        }) : chatFeatures.onClick,
+        role: chatFeatures.role,
+      })), [features, widget])
 
   if (!hasFeatureButtons) return null
 
-  return itemConfigs.length > 1 ? (
-    <MenuOverlay items={listItems} position="top" bgLevel={500} spaced roundedItems>
-      <IconButton icon="Plus" />
-    </MenuOverlay>
+  return listItems.length > 1 ? (
+    <>
+      <IconButton
+        id="button-content-select"
+        color="light"
+        appearance="square"
+        title={t.chatViewMenu}
+        data-test-hint="button-options"
+        aria-label={t.chatViewMenu}
+        aria-controls="chatMessageMenu"
+        aria-expanded={visibleMenu} 
+        onClick={() => setVisibleMenu(state => !state)}>
+        <Plus />
+      </IconButton>
+      <SelectionList
+        className="message-menu"
+        id="chatMessageMenu"
+        visible={visibleMenu}
+        onHide={() => setVisibleMenu(false)}
+        items={listItems}
+        aria-label={t.chatViewMenu}
+      />
+    </>
   ) : (
-    <ImageButton
+    <IconButton
+      color="light"
       appearance="square"
-      title={`${itemConfigs[0].label}`}
-      aria-label={`${itemConfigs[0].label}`}
-      onClick={itemConfigs[0].onClick}
-    >
-      {itemConfigs[0].icon}
-    </ImageButton>
+      role="button"
+      title={listItems[0].label}
+      aria-label={listItems[0].label}
+      onClick={listItems[0].onClick}>
+      {listItems[0].icon}
+    </IconButton>
   )
 }

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,19 @@ 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') }))
   })
-
+  
   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/UploadDragNDrop.tsx

@@ -1,4 +1,5 @@
-import { Icon } from '@stack-spot/citric-icons'
+import { IconBox } from '@citric/core'
+import { Document } from '@citric/icons'
 import { DragEvent, useCallback, useEffect, useState } from 'react'
 import { useCurrentChat } from '../../context/hooks'
 import { useMessageInputDictionary } from './dictionary'
@@ -71,7 +72,9 @@ export const UploadDragNDrop = ({ isDragging, onDrop, onDragLeave }: UploadDragN
         e.stopPropagation()
       }}
     >
-      <Icon icon="Document" size="lg" aria-hidden={true} />
+      <IconBox size="lg" aria-hidden={true}>
+        <Document />
+      </IconBox>
       <h2 id="upload-drag-drop-title">{t.uploadDragDropTitle}</h2>
       <p id="upload-drag-drop-description">{t.uploadDragDropDescription}</p>
     </div>

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/index.tsx

@@ -1,7 +1,8 @@
-import { ProgressBar } from '@stack-spot/citric-react'
+import { listToClass, theme } from '@stack-spot/portal-theme'
 import { interpolate } from '@stack-spot/portal-translate'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { AdaptiveTextArea } from '../../components/AdaptiveTextArea'
+import { ProgressBar } from '../../components/ProgressBar'
 import { useCurrentChat, useCurrentChatState, useWidgetState } from '../../context/hooks'
 import { quickCommandRegex } from '../../regex'
 import { ChatEntry } from '../../state/ChatEntry'
@@ -136,11 +137,11 @@ export const MessageInput = ({ chatWindowRef }: { chatWindowRef?: React.RefObjec
 
   return (
     <UploadProvider value={chat.uploadManager}>
-      <MessageInputBox aria-busy={isLoading} className="message-input">
+      <MessageInputBox aria-busy={isLoading} className="message-input" $inputFocused={focused}>
         <div className="wrapper-action">
           <QuickCommandSelector inputRef={textAreaRef} isTrial={isTrial} />
           <AgentSelector inputRef={textAreaRef} isTrial={isTrial} />
-          <div className="action-box">
+          <div className={listToClass(['action-box', focused && 'focused', isLoading && 'disabled'])}>
             <ButtonAgent />
             <AdaptiveTextArea
               maxHeight={() => isMinimized
@@ -153,7 +154,7 @@ export const MessageInput = ({ chatWindowRef }: { chatWindowRef?: React.RefObjec
                   ? interpolate(t.placeholder, agentLabel)
                   : t.typing
               }
-              onChange={v => chat.set('nextMessage', v)}
+              onChange={e => chat.set('nextMessage', e.target.value)}
               value={value}
               onFocus={() => setFocused(true)}
               onBlur={() => setFocused(false)}
@@ -164,7 +165,8 @@ export const MessageInput = ({ chatWindowRef }: { chatWindowRef?: React.RefObjec
             />
           </div>
         </div>
-        <ProgressBar progress={isLoading ? undefined : (focused ? 100 : 0)} />
+        <ProgressBar visible={true} animate={isLoading} 
+          backgroundColor={isLoading || !focused ? theme.color.light[500] : theme.color.primary[500]} />
         <ContextBar />
         {chat.get('features').upload && <UploadBar />}
         <ButtonBar onSend={onSend} isLoading={isLoading} />

package/src/views/MessageInput/styled.ts

@@ -1,3 +1,4 @@
+import { IconButton } from '@citric/ui'
 import { theme } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
 
@@ -50,7 +51,7 @@ export const SelectionBarWrapper = styled.div`
   }
 `
 
-export const MessageInputBox = styled.div`
+export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
   display: flex;
   flex-direction: column;
 
@@ -64,6 +65,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;
@@ -114,7 +127,7 @@ export const MessageInputBox = styled.div`
       line-height: 0.75rem;
       white-space: nowrap;
 
-      /* $ {IconButton} {
+      ${IconButton} {
         padding: 4px 0;
         background: none;
         border: none;
@@ -125,7 +138,7 @@ export const MessageInputBox = styled.div`
           width: auto;
           height: 12px;
         }
-      } */
+      }
     }
   }
 
@@ -162,13 +175,16 @@ export const MessageInputBox = styled.div`
       background-color: ${theme.color.light[300]};
       padding: 10px 8px;
       transition: border-color 0.3s, background-color 0.3s;
-    }
-  }
 
-  [data-citric="progress-bar"] {
-    background-color: ${theme.color.light[500]};
-    border: 0;
-    padding: 0;
+      &.focused {
+        border: 2px solid ${theme.color.light[300]};
+      }
+
+      
+      &.disabled {
+        background-color: ${theme.color.light[300]};
+      }
+    }
   }
 
   .button-group {
@@ -223,10 +239,10 @@ export const MessageInputBox = styled.div`
       }
     }
 
-    /* $ {IconButton} {
+    ${IconButton} {
       width: 24px;
       height: 24px;
-    } */
+    }
 
     .group-agent {
       display: flex;
@@ -286,7 +302,7 @@ export const MessageInputBox = styled.div`
     transition: height 0.3s;
     background-color: transparent;
     &:focus {
-      box-shadow: none !important;
+      box-shadow: none;
     }
   }
 `

package/src/views/MinimizedHeader.tsx

@@ -1,4 +1,6 @@
-import { IconButton, Text } from '@stack-spot/citric-react'
+import { Text } from '@citric/core'
+import { ChevronDown, Times } from '@citric/icons'
+import { IconButton } from '@citric/ui'
 import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useCallback, useRef, useState } from 'react'
@@ -67,13 +69,14 @@ export const MinimizedHeader = ({ onClose, onCollapse, onExpand }: MinimizedActi
       <FadingOverflow className="title"><Text title={label}>{label}</Text></FadingOverflow>
       {showButtons && <div className="button-group">
         {(onExpand || onCollapse) && <IconButton
-          icon="ChevronDown"
           title={collapsed ? t.expand : t.collapse}
           aria-label={collapsed ? t.expand : t.collapse}
           className={listToClass(['collapse', collapsed && 'collapsed'])}
           onClick={toggleCollapsed}
-        />}
-        {onClose && <IconButton icon="Times" title={t.close} aria-label={t.close} onClick={onClose} />}
+        >
+          <ChevronDown />
+        </IconButton>}
+        {onClose && <IconButton title={t.close} aria-label={t.close} onClick={onClose}><Times /></IconButton>}
       </div>}
     </Header>
   )