@stack-spot/ai-chat-widget 1.24.4 → 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)
@@ -187,6 +196,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
   const [agent] = agentClient.agentById.useStatefulQuery({ agentId, builtIn: !!entry?.agent?.builtIn }, { enabled: !!agentId  })
   const [copied, setCopied] = useState(false)
   const [showUserButtonCopy, setShowUserButtonCopy] = useState(false)
+
   
   useChatScrollToBottomEffect(ref, [entry])
 
@@ -258,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()}
       </>
@@ -268,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()}
       </>
     }
@@ -285,21 +313,26 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
     widget.set('panel', 'tools')
   }
 
-  return (entry.content || entry.error || !!entry.steps?.length) && (
+
+  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}>
         <div className="chat-message" ref={chatRef} onKeyDown={handleKeyDown} tabIndex={0}>
-          <div className={`user-info ${entry.agentType}`}>{userInfo}</div>
+          <div className={`user-info ${entry.agentType}`}><UserInfo entry={entry} /></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.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.error && (
             <div className="error">
               <IconBox size="xs"><TimesCircle /></IconBox>
@@ -329,7 +362,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
             </li>
           ))}</ul>
         </div>}
-   
+    
         {shouldShowFooter && <div className="message-footer">
           {entry.agentType === 'bot' && !entry.error && <div className="message-actions">
             {entry.type === 'md' && (
@@ -368,6 +401,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
               </>
             )}
           </div>}
+
           {entry.agentType === 'user' && (
             <div className="message-actions">
               {copied ? (
@@ -384,7 +418,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
                 </Tooltip>
               ) : (
                 showUserButtonCopy && (
-                  <div>
+                  <div className="action-bar">
                     <IconButton
                       appearance="square"
                       color="light"
@@ -393,13 +427,14 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
                       onClick={handleCopy}
                       size="sm"
                     >
-                      <Copy/>
+                      <Copy className="copy-btn"/>
                     </IconButton>
                   </div>
                 )
               )}
             </div>
           )}
+
           <Text as="label" appearance="microtext1" className="chat-date">
             {dateFormatter.formatForChatMessage(date)}
           </Text>

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;
     }
   }
@@ -139,6 +139,20 @@ 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 {

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
 

package/src/views/MessageInput/index.tsx

@@ -7,14 +7,16 @@ import { useCurrentChat, useCurrentChatState, useWidgetState } from '../../conte
 import { quickCommandRegex } from '../../regex'
 import { ChatEntry } from '../../state/ChatEntry'
 import { checkIsTrial } from '../../utils/check-is-trial'
+import { UploadProvider } from '../../utils/upload/context'
 import { AgentSelector } from './AgentSelector'
 import { ButtonAgent } from './ButtonAgent'
 import { ButtonBar } from './ButtonBar'
 import { useUserEntryHistoryShortcut } from './chat-entry-history'
+import { ContextBar } from './ContextBar'
 import { useMessageInputDictionary } from './dictionary'
-import { InfoBar } from './InfoBar'
 import { QuickCommandSelector } from './QuickCommandSelector'
 import { MAX_INPUT_HEIGHT, MessageInputBox, MIN_INPUT_HEIGHT } from './styled'
+import { UploadBar } from './UploadBar'
 
 /**
  * This renders the MessageInput part of the layout which includes the progress bar, the actual textarea, the badges telling what is
@@ -35,14 +37,56 @@ export const MessageInput = () => {
   const { handleKeyDown, handleKeyUp } = useUserEntryHistoryShortcut()
   const isTrial = checkIsTrial()
 
+  const checkSendRequirements = useCallback(() => {
+    if (chat.uploadManager.status === 'error') {
+      chat.pushMessage(new ChatEntry({
+        agentType: 'system',
+        type: 'text',
+        content: t.cantSendBecauseOfUploadError,
+      }))
+      return false
+    }
+    if (chat.uploadManager.status === 'uploading') {
+      chat.pushMessage(new ChatEntry({
+        agentType: 'system',
+        type: 'text',
+        content: t.cantSendBecauseOfUploadProgress,
+      }))
+      return false
+    }
+    if (!chat.get('nextMessage') && !chat.uploadManager.get().length) {
+      chat.pushMessage(new ChatEntry({
+        agentType: 'system',
+        type: 'text',
+        content: t.cantSendBecauseOfEmptyContent,
+      }))
+      return false
+    }
+    return true
+  }, [chat])
+
   const onSend = useCallback(async () => {
-    const message = chat.get('nextMessage')
-    if (!message) return
+    const message = chat.get('nextMessage') 
+    const canSend = checkSendRequirements()
+    if (!canSend) return
     const code = chat.get('codeSelection')
     const language = chat.get('codeLanguage')
-    const prompt = code && !quickCommandRegex.test(message) ? `${message}\n\`\`\`${language}\n${code}\n\`\`\`` : message
-    chat.pushMessage(ChatEntry.createUserEntry(prompt, true))
+    const prompt = code && !quickCommandRegex.test(message ?? '') ? `${message}\n\`\`\`${language}\n${code}\n\`\`\`` : message    
+    chat.pushMessage(new ChatEntry({
+      type: 'md',
+      agentType: 'user',
+      content: prompt || '',
+      upload: chat.uploadManager.get().map(
+        up => ({ 
+          id: up.uploadId!, // we know that all files have been uploaded, so they have an id
+          name: up.file.name,
+          image: up.file.type.toLowerCase().startsWith('image/') ? URL.createObjectURL(up.file) : undefined,
+        }),
+      ),
+      updated: new Date().toISOString(),
+    }))
     chat.set('nextMessage', '')
+    chat.uploadManager.reset()
   }, [chat])
 
   const onKeyDown = useCallback((event: React.KeyboardEvent<HTMLTextAreaElement>) => {
@@ -59,33 +103,34 @@ export const MessageInput = () => {
   }, [isLoading])
 
   return (
-    <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={listToClass(['action-box', focused && 'focused', isLoading && 'disabled'])}>
-          <ButtonAgent />
-          <AdaptiveTextArea
-            ref={textAreaRef}
-            placeholder={agentLabel && interpolate(t.placeholder, agentLabel)}
-            onChange={e => chat.set('nextMessage', e.target.value)}
-            value={value}
-            onFocus={() => setFocused(true)}
-            onBlur={() => setFocused(false)}
-            onKeyDown={onKeyDown}
-            onKeyUp={handleKeyUp}
-            onIncreaseSize={() => setExpanded(false)}
-            onResetSize={() => !expansionLocked.current && setExpanded(true)}
-            maxHeight={isMinimized ? MIN_INPUT_HEIGHT : MAX_INPUT_HEIGHT}
-          />
+    <UploadProvider value={chat.uploadManager}>
+      <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={listToClass(['action-box', focused && 'focused', isLoading && 'disabled'])}>
+            <ButtonAgent />
+            <AdaptiveTextArea
+              ref={textAreaRef}
+              placeholder={agentLabel && interpolate(t.placeholder, agentLabel)}
+              onChange={e => chat.set('nextMessage', e.target.value)}
+              value={value}
+              onFocus={() => setFocused(true)}
+              onBlur={() => setFocused(false)}
+              onKeyDown={onKeyDown}
+              onKeyUp={handleKeyUp}
+              onIncreaseSize={() => setExpanded(false)}
+              onResetSize={() => !expansionLocked.current && setExpanded(true)}
+              maxHeight={isMinimized ? MIN_INPUT_HEIGHT : MAX_INPUT_HEIGHT}
+            />
+          </div>
         </div>
-      </div>
-      <ProgressBar visible={true} animate={isLoading} 
-        backgroundColor={isLoading || !focused ? theme.color.light[500] : theme.color.primary[500]} />
-      <InfoBar />
-      <ButtonBar onSend={onSend} isLoading={isLoading} />
-    </MessageInputBox>
+        <ProgressBar visible={true} animate={isLoading} 
+          backgroundColor={isLoading || !focused ? theme.color.light[500] : theme.color.primary[500]} />
+        <ContextBar />
+        <UploadBar />
+        <ButtonBar onSend={onSend} isLoading={isLoading} />
+      </MessageInputBox>
+    </UploadProvider>
   )
 }
-
-