@stack-spot/ai-chat-widget 1.24.3 → 1.25.0

package/src/views/Chat/ChatMessage.tsx

@@ -4,9 +4,11 @@ import { Badge, IconButton, Tooltip } from '@citric/ui'
 import { agentClient } from '@stack-spot/portal-network'
 import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { groupBy } from 'lodash'
 import { createElement, Dispatch, useCallback, useMemo, useRef, useState } from 'react'
 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'
@@ -166,6 +168,14 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
   </Flex>
 }
 
+const UserInfo = ({ entry }: { entry: TextChatEntry }) => {
+  switch (entry.agentType) {
+    case 'user': return
+    case 'bot': return <AgentInfo agent={entry.agent} />
+    case 'system': return <AgentInfo agent={{ id: 'system', label: 'System' }} icon={<Cog />} />
+  }
+}
+
 /**
  * Renders a message (ChatEntry) in the chat.
  */
@@ -176,7 +186,6 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
   const [labels, setLabels] = useState<string[]>(message.getValue()?.initialValue ?? [])
   const entry = useChatEntry(message)
   const dateFormatter = useDateFormatter()
-  const userInfo = entry.agentType === 'user' ? <></> : <AgentInfo agent={entry.agent} />
   const date = new Date(entry.updated ?? '')
   const shouldShowFooter = entry.updated && !isNaN(date.getTime())
   const ref = useRef<HTMLLIElement>(null)
@@ -259,9 +268,26 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
     setTimeout(() => setCopied(false), 2000)
   }
 
+  const renderUploads = () => {
+    const groups = groupBy(entry.upload, f => f.image ? 'images' : 'documents')
+    const lists: React.ReactElement[] = []
+    if (groups.images?.length) {
+      lists.push(<ul className="image-uploads">{groups.images.map(f => <li key={f.id}><img src={f.image}></img></li>)}</ul>)
+    }
+    if (groups.documents?.length) {
+      lists.push(
+        <ul className="document-uploads">
+          {groups.documents.map(f => <li key={f.id}><FileDescription fileName={f.name} /></li>)}
+        </ul>,
+      )
+    }
+    return lists
+  }
+
   const renderContent = () => {
     if (entry.type === 'md') {
       return <>
+        {renderUploads()}
         <Markdown onCopyCode={(code) => onCopyCode(code, entry.messageId ?? '', chat)}>{entry.content}</Markdown>
         {renderActions()}
       </>
@@ -269,6 +295,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
     if (entry.type === 'text') {
       return <>
         <p className="plain-text">{entry.content}</p>
+        {renderUploads()}
         {renderActions()}
       </>
     }
@@ -287,133 +314,132 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
   }
 
 
-  return (entry.content || entry.error || !!entry.steps?.length) && (
-    <li key={entry.messageId} className={entry.agentType} ref={ref} 
-    >
-      <div className="chat-message" ref={chatRef} onKeyDown={handleKeyDown} tabIndex={0}
-        onMouseEnter={entry.agentType === 'user' ? () => setShowUserButtonCopy(true) : undefined}
-        onMouseLeave={entry.agentType === 'user' ? () => setShowUserButtonCopy(false) : undefined}>
-        <div className={`user-info ${entry.agentType}`}>{userInfo}</div>
-        {beforeMessage && createElement(beforeMessage, { message })}
-        {(entry.content || entry.steps) && <div className={listToClass(['message-content', entry.card && 'card', entry.type])}>
-          {!!entry.badges?.length && <div className="badges">
-            {entry.badges.map((b, index) => <Badge key={index} palette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
-          </div>}
-          {renderContent()}
-         
-          {!!entry.steps?.length && <StepsList steps={entry.steps} chatId={chat.id} messageId={message.id} />}
-        </div>}
-        
-        {entry.error && (
-          <div className="error">
-            <IconBox size="xs"><TimesCircle /></IconBox>
-            <Text appearance="microtext1">{entry.error}</Text>
-          </div>
-        )}
-      </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, agent?.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) => (
-          <li key={index}>
-            <Button size="sm" colorScheme="light" onClick={() => detailKS(ks)}>{ks.name}</Button>
-          </li>
-        ))}</ul>
-      </div>}
-   
-      {shouldShowFooter && <div className="message-footer"
+  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"
         onMouseEnter={entry.agentType === 'user' ? () => setShowUserButtonCopy(true) : undefined}
         onMouseLeave={entry.agentType === 'user' ? () => setShowUserButtonCopy(false) : undefined}>
-      
-        {entry.agentType === 'bot' && !entry.error && <div className="message-actions">
-
-          {entry.type === 'md' && (
-            copied ? (
-              <Tooltip text={t.copied} position={'right'}>
-                <IconButton
-                  appearance="square"
-                  colorBg="light"
-                  title={t.copied}
-                  aria-label={t.copied}
-                  onClick={handleCopy}
-                >
-                  <Check />
-                </IconButton>
-              </Tooltip>
-            ) : (
-              <IconButton
-                appearance="square"
-                color="light"
-                title={t.copy}
-                aria-label={t.copy}
-                onClick={handleCopy}
-              >
-                <Copy />
-              </IconButton>
-            )
+        <div className="chat-message" ref={chatRef} onKeyDown={handleKeyDown} tabIndex={0}>
+          <div className={`user-info ${entry.agentType}`}><UserInfo entry={entry} /></div>
+          {beforeMessage && createElement(beforeMessage, { message })}
+          {(entry.content || entry.steps || entry.upload?.length) && (
+            <div className={listToClass(['message-content', entry.card && 'card', entry.type])}>
+              {!!entry.badges?.length && <div className="badges">
+                {entry.badges.map((b, index) => <Badge key={index} palette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
+              </div>}
+              {renderContent()}
+            
+              {!!entry.steps?.length && <StepsList steps={entry.steps} chatId={chat.id} messageId={message.id} />}
+            </div>
           )}
-          {entry.messageId && (
-            <>
-              <IconButton appearance="square" color="light" title={t.like} aria-label={t.like} onClick={like}>
-                {liked === true ? <LikeFill /> : <Like />}
-              </IconButton>
-              <IconButton appearance="square" color="light" title={t.dislike} aria-label={t.dislike} onClick={dislike}>
-                {liked === false ? <DislikeFill /> : <Dislike />}
-              </IconButton>
-            </>
+          
+          {entry.error && (
+            <div className="error">
+              <IconBox size="xs"><TimesCircle /></IconBox>
+              <Text appearance="microtext1">{entry.error}</Text>
+            </div>
           )}
+        </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, agent?.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) => (
+            <li key={index}>
+              <Button size="sm" colorScheme="light" onClick={() => detailKS(ks)}>{ks.name}</Button>
+            </li>
+          ))}</ul>
         </div>}
-
-        {entry.agentType === 'user' && (
-          <div className="message-actions">
-            {copied ? (
-              <Tooltip text={t.copied} position={'left'}>
+    
+        {shouldShowFooter && <div className="message-footer">
+          {entry.agentType === 'bot' && !entry.error && <div className="message-actions">
+            {entry.type === 'md' && (
+              copied ? (
+                <Tooltip text={t.copied} position={'right'}>
+                  <IconButton
+                    appearance="square"
+                    colorBg="light"
+                    title={t.copied}
+                    aria-label={t.copied}
+                    onClick={handleCopy}
+                  >
+                    <Check />
+                  </IconButton>
+                </Tooltip>
+              ) : (
                 <IconButton
                   appearance="square"
-                  colorBg="light"
-                  title={t.copied}
-                  aria-label={t.copied}
-                  size="sm"
+                  color="light"
+                  title={t.copy}
+                  aria-label={t.copy}
+                  onClick={handleCopy}
                 >
-                  <Check />
+                  <Copy />
+                </IconButton>
+              )
+            )}
+            {entry.messageId && (
+              <>
+                <IconButton appearance="square" color="light" title={t.like} aria-label={t.like} onClick={like}>
+                  {liked === true ? <LikeFill /> : <Like />}
+                </IconButton>
+                <IconButton appearance="square" color="light" title={t.dislike} aria-label={t.dislike} onClick={dislike}>
+                  {liked === false ? <DislikeFill /> : <Dislike />}
                 </IconButton>
-              </Tooltip>
-            ) : (
-              showUserButtonCopy && (
-                <div className="action-bar">
+              </>
+            )}
+          </div>}
+
+          {entry.agentType === 'user' && (
+            <div className="message-actions">
+              {copied ? (
+                <Tooltip text={t.copied} position={'left'}>
                   <IconButton
                     appearance="square"
-                    color="light"
-                    title={t.copy}
-                    aria-label={t.copy}
-                    onClick={handleCopy}
+                    colorBg="light"
+                    title={t.copied}
+                    aria-label={t.copied}
                     size="sm"
                   >
-                    <Copy className="copy-btn"/>
+                    <Check />
                   </IconButton>
-                </div>
-              )
-            )}
-          </div>
-        )}
+                </Tooltip>
+              ) : (
+                showUserButtonCopy && (
+                  <div className="action-bar">
+                    <IconButton
+                      appearance="square"
+                      color="light"
+                      title={t.copy}
+                      aria-label={t.copy}
+                      onClick={handleCopy}
+                      size="sm"
+                    >
+                      <Copy className="copy-btn"/>
+                    </IconButton>
+                  </div>
+                )
+              )}
+            </div>
+          )}
 
-        <Text as="label" appearance="microtext1" className="chat-date">
-          {dateFormatter.formatForChatMessage(date)}
-        </Text>
-      </div>}
+          <Text as="label" appearance="microtext1" className="chat-date">
+            {dateFormatter.formatForChatMessage(date)}
+          </Text>
+        </div>}
+      </div>
     </li>
   )
 }

package/src/views/Chat/styled.ts

@@ -39,7 +39,7 @@ export const ChatList: IStyledComponentBase<
     flex-direction: row;
     gap: 10px;
 
-    &.bot {
+    &.bot, &.system {
       align-items: center;
     }
   }
@@ -63,6 +63,7 @@ export const ChatList: IStyledComponentBase<
     flex-direction: row;
     align-items: center;
     gap: 8px;
+    margin-top: 10px;
 
     .message-actions {
       display: flex;
@@ -138,12 +139,33 @@ export const ChatList: IStyledComponentBase<
           background: linear-gradient(180deg, ${theme.color.blue[500]} 0%, ${theme.color.indigo[500]} 100%);
         }
       }
+      .image-uploads, .document-uploads {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        gap: 8px;
+        list-style: none;
+        margin: 0 0 4px 0;
+        padding: 0;
+
+        img {
+          max-width: 240px;
+          max-height: 240px;
+        }
+      }
     }
 
     &.user {
       align-items: end;
       margin-left: 40px;
 
+      .chat-message-container {
+        display: flex;
+        flex-direction: column;
+        max-width: 100%; 
+        align-items: end;
+      }
+
       .chat-message {
         display: flex;
         flex-direction: row;

package/src/views/MessageInput/{InfoBar.tsx → ContextBar.tsx}

@@ -8,15 +8,15 @@ import { FadingOverflow } from '../../components/FadingOverflow'
 import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
 import { useMessageInputDictionary } from './dictionary'
 
-interface InfoBadgeProps {
+interface ContextBadgeProps {
   label: string,
   color: ColorPaletteName,
   dismiss: string,
   onDismiss?: () => void,
 }
 
-const InfoBadge = ({ label, color, dismiss, onDismiss }: InfoBadgeProps) => (
-  <Badge appearance="square" palette={color} className="info-badge" 
+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}>
@@ -34,7 +34,7 @@ const InfoBadge = ({ label, color, dismiss, onDismiss }: InfoBadgeProps) => (
  * - which stack is being used;
  * - which knowledge sources are being used.
  */
-export const InfoBar = () => {
+export const ContextBar = () => {
   const t = useMessageInputDictionary()
   const chat = useCurrentChat()
   const currentStack = useCurrentChatState('stack')
@@ -47,7 +47,7 @@ export const InfoBar = () => {
     const onDismiss = features.knowledgeSource
       ? (() => chat.set('knowledgeSources', currentKnowledgeSources.filter(({ id }) => id !== ks.id)))
       : undefined
-    return <li key={ks.id}><InfoBadge label={ks.label} dismiss={t.removeKS} color="teal" onDismiss={onDismiss} /></li>
+    return <li key={ks.id}><ContextBadge label={ks.label} dismiss={t.removeKS} color="teal" onDismiss={onDismiss} /></li>
   }), [currentKnowledgeSources])
   const shouldRenderRemoveAllButton = (
     currentSelection
@@ -69,7 +69,7 @@ export const InfoBar = () => {
   }, [])
 
   return (
-    <div className={listToClass(['info-bar', visible && 'visible'])}>
+    <div className={listToClass(['info-bar', 'context-bar', visible && 'visible'])}>
       <div className="space"></div>
       <div className="content">
         {shouldRenderRemoveAllButton && (
@@ -83,12 +83,12 @@ export const InfoBar = () => {
           <ul>
             {currentSelection && (
               <li>
-                <InfoBadge label={t.selected} dismiss={t.removeSelection} color="blue" onDismiss={removeCodeSelection} />
+                <ContextBadge label={t.selected} dismiss={t.removeSelection} color="blue" onDismiss={removeCodeSelection} />
               </li>
             )}
             {currentStack && (
               <li>
-                <InfoBadge
+                <ContextBadge
                   label={currentStack.label}
                   dismiss={t.removeStack}
                   color="cyan"
@@ -98,7 +98,7 @@ export const InfoBar = () => {
             )}
             {currentWorkspace && (
               <li>
-                <InfoBadge
+                <ContextBadge
                   label={currentWorkspace.label}
                   dismiss={t.removeWorkspace}
                   color="pink"

package/src/views/MessageInput/SelectContent.tsx

@@ -1,9 +1,10 @@
-import { KnowledgeSource, Plus, Spaces, Stack } from '@citric/icons'
+import { DocumentUpload, KnowledgeSource, Plus, Spaces, Stack } from '@citric/icons'
 import { IconButton } from '@citric/ui'
 import { SelectionList } from '@stack-spot/portal-components/SelectionList'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useMemo, useState } from 'react'
 import { 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'
@@ -12,8 +13,9 @@ 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
-  const t = useTranslate(dictionary)
 
   const itemConfigs = [
     {
@@ -59,31 +61,25 @@ export const SelectContent = () => {
         title={visibleMenu ? t.collapse : t.expand}
         data-test-hint="button-options"
         aria-label={visibleMenu ? t.collapse : t.expand}
+        aria-controls="chatMessageMenu"
         onClick={() => setVisibleMenu(state => !state)}>
         <Plus />
       </IconButton>
       <SelectionList
-        style={{
-          position: 'absolute',
-          top: '-140px',
-        }}
-        id="menuConfig"
+        className="message-menu"
+        id="chatMessageMenu"
         visible={visibleMenu}
         onHide={() => setVisibleMenu(false)}
-        items={listItems}
+        items={[
+          ...listItems,
+          {
+            label: t.upload,
+            onClick: () => uploadManager.open(),
+            className: 'upload-item',
+            icon: <DocumentUpload />,
+          },
+        ]}
       />
     </>
   )
 }
-
-const dictionary = {
-  en: {
-    expand: 'Expand options',
-    collapse: 'Collapse options',
-  },
-  pt: {
-    expand: 'Mostrar opções',
-    collapse: 'Esconder opções',
-  },
-} satisfies Dictionary
-

package/src/views/MessageInput/UploadBar.tsx

@@ -0,0 +1,69 @@
+import { listToClass } from '@stack-spot/portal-theme'
+import { interpolate } from '@stack-spot/portal-translate'
+import { useMemo } from 'react'
+import { FadingOverflow } from '../../components/FadingOverflow'
+import { FileDescription } from '../../components/FileDescription'
+import { useCurrentChat } from '../../context/hooks'
+import { ChatEntry } from '../../state/ChatEntry'
+import { useUploadErrorEffect, useUploadManager, useUploads, useUploadStatus } from '../../utils/upload/context'
+import { FileIsTooLarge, MaxFilesReached } from '../../utils/upload/errors'
+import { FileUpload } from '../../utils/upload/FileUpload'
+import { useMessageInputDictionary } from './dictionary'
+
+interface UploadedFileProps {
+  upload: FileUpload,
+}
+
+function createImageFromFile(file: File) {
+  return <img src={URL.createObjectURL(file)} alt={file.name} />
+}
+
+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}
+    onRemove={() => uploadManager.remove(upload)}
+    onRetry={() => upload.retry()}
+    status={status}
+  />
+}
+
+export const UploadBar = () => {
+  const uploads = useUploads()
+  const listItems = useMemo(() => uploads.map((up) => <li key={up.id}><UploadItem upload={up} /></li>), [uploads])
+  const t = useMessageInputDictionary()
+  const chat = useCurrentChat()
+  const visible = !!uploads.length
+
+  useUploadErrorEffect((errors) => {
+    const sizeErrors = errors.filter(e => e instanceof FileIsTooLarge)
+    const maxItemsErrors = errors.filter(e => e instanceof MaxFilesReached)
+    const maxSize = sizeErrors[0]?.maxSize
+    const maxItems = maxItemsErrors[0]?.maxFiles
+    const sizeErrorsNames = sizeErrors.map(e => e.fileName)
+    const maxItemsErrorsNames = maxItemsErrors.map(e => e.fileName)
+    const lines: string[] = []
+    if (sizeErrors.length) {
+      lines.push(`${interpolate(t.uploadSizeError, `${maxSize.value} ${maxSize.unit}`)}\n- ${sizeErrorsNames.join('\n- ')}`)
+    }
+    if (maxItemsErrors.length) {
+      lines.push(`${interpolate(t.uploadItemLimitError, maxItems)}\n- ${maxItemsErrorsNames.join('\n- ')}`)
+    }
+    if (!lines.length) return
+    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="space"></div>
+      <div className="content">
+        <FadingOverflow className="list-overflow" scroll="arrows" enableHorizontalScrollWithVerticalWheel>
+          <ul>{listItems}</ul>
+        </FadingOverflow>
+      </div>
+    </div>
+  )
+}

package/src/views/MessageInput/dictionary.ts

@@ -7,8 +7,6 @@ const dictionary = {
     spot: 'Select spot',
     knowledgeSource: 'Select knowledge sources',
     agent: 'Select agent',
-    collapse: 'Hide buttons',
-    expand: 'Show buttons',
     send: 'Send message',
     placeholder: 'Message to $0 or use / or @.',
     cancel: 'Cancel',
@@ -19,6 +17,14 @@ const dictionary = {
     selected: 'Selected',
     removeSelection: 'Remove current code selection',
     remove: 'Remove',
+    upload: 'Upload file',
+    expand: 'Expand options',
+    collapse: 'Collapse options',
+    uploadSizeError: 'The following files were not added to the upload list because they\'re larger than $1:',
+    uploadItemLimitError: 'The following files were not added because no more than $1 items may be uploaded at a time:',
+    cantSendBecauseOfUploadError: 'Can\'t send the message because one of the files in the upload list could not be uploaded. Please, retry it or remove it from the list.',
+    cantSendBecauseOfUploadProgress: 'Please wait until all files are uploaded before sending the message. You can also cancel the upload by removing it from the list of uploads.',
+    cantSendBecauseOfEmptyContent: 'You can\'t send empty messages. Please write some text or upload a file.',
   },
   pt: {
     stack: 'Selecionar stack',
@@ -26,8 +32,6 @@ const dictionary = {
     spot: 'Selecionar spot',
     knowledgeSource: 'Selecionar knowledge sources',
     agent: 'Selecionar agente',
-    collapse: 'Esconder botões',
-    expand: 'Mostrar botões',
     send: 'Enviar mensagem',
     placeholder: 'Mensagem para $0 ou use / ou @.',
     cancel: 'Cancelar',
@@ -38,6 +42,16 @@ const dictionary = {
     selected: 'Selecionado',
     removeSelection: 'Desfazer seleção de código',
     remove: 'Remover',
+    upload: 'Enviar arquivo',
+    expand: 'Mostrar opções',
+    collapse: 'Esconder opções',
+    uploadSizeError: 'Os seguintes arquivos não foram adicionados à lista de upload porque eles são maiores que $0:',
+    uploadItemLimitError: 'Os seguintes arquivos não foram adicionados à lista de upload porque é permitido enviar no máximo $0 arquivos por vez:',
+    uploadError: 'Ocorreu um erro ao enviar o arquivo "$0".',
+    unknownUploadError: 'Ocorreu um erro ao enviar os arquivos.',
+    cantSendBecauseOfUploadError: 'Não é possível enviar a mensagem, pois um dos arquivos na lista de uploads não pôde ser enviado. Por favor, tente enviá-lo novamente ou remova-o da lista.',
+    cantSendBecauseOfUploadProgress: 'Por favor aguarde todos os uploads de arquivos antes de enviar a mensagem. Você pode cancelar o upload removendo o arquivo da lista de uploads.',
+    cantSendBecauseOfEmptyContent: 'Não é possível enviar mensagens vazia. Por favor, escreva algum texto ou envie um arquivo.',
   },
 } satisfies Dictionary