@stack-spot/ai-chat-widget 0.11.0 → 1.0.0-dev.1768324407795

package/src/views/MessageInput/chat-entry-history.ts

@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useRef } from 'react'
+import { useCurrentChat } from '../../context/hooks'
+
+const DEFAULT_POINTER = -1
+
+const useChatEntryHistory = () => {
+  const chat = useCurrentChat()
+  const historyPointer = useRef(DEFAULT_POINTER)
+  const messages = chat.getMessages()
+
+  useEffect(() => {
+    historyPointer.current = chat.getMessages().length
+  }, [chat.id, messages])
+
+  const navigateEntry = useCallback((startIndex: number, direction: 1 | -1, inputValue: string) => {
+    const chatEntries = chat.getMessages() || []
+    let pointer = startIndex + direction
+
+    while (pointer > DEFAULT_POINTER && pointer < chatEntries.length && chatEntries[pointer]?.getValue().agentType !== 'user') {
+      pointer += direction
+    }
+
+    if (pointer >= chatEntries.length + direction) {
+      return inputValue
+    }
+
+    if (pointer <= DEFAULT_POINTER) {
+      return chatEntries[0]?.getValue().content ?? inputValue
+    }
+
+    historyPointer.current = pointer
+    return chatEntries[pointer]?.getValue().content ?? inputValue
+  }, [chat])
+
+  const getPreviousUserEntry = useCallback((inputValue: string) => navigateEntry(historyPointer.current, -1, inputValue), [navigateEntry])
+  const getNextUserEntry = useCallback((inputValue: string) => navigateEntry(historyPointer.current, +1, inputValue), [navigateEntry])
+
+  return { getNextUserEntry, getPreviousUserEntry }
+}
+
+/**
+ * Hook to manage keyboard shortcuts for the user's input history.
+ *
+ * This hook allows the user to navigate through the history of messages sent in a chat
+ * using the up arrow (`ArrowUp`) and down arrow (`ArrowDown`) keys.
+ */
+export const useUserEntryHistoryShortcut = () => {
+  const { getNextUserEntry, getPreviousUserEntry } = useChatEntryHistory()
+  const chat = useCurrentChat()
+  const userEntryRef = useRef(chat.get('nextMessage') ?? '')
+
+  useEffect(() => {
+    userEntryRef.current = chat.get('nextMessage') ?? ''
+    chat.onChange('nextMessage', (value) => {
+      if (value === '') {
+        userEntryRef.current = ''
+      }
+    })
+  }, [chat.id])
+
+  const setNextMessageFromHistory = useCallback(
+    (event: React.KeyboardEvent<HTMLTextAreaElement>, getEntryHistory: typeof getNextUserEntry) => {
+      const textarea = event.target as HTMLTextAreaElement
+      if (textarea.selectionStart !== 0) return
+
+      const entryHistory = getEntryHistory(userEntryRef.current)
+      if (entryHistory === chat.get('nextMessage')) return
+
+      chat.set('nextMessage', entryHistory)
+
+      requestAnimationFrame(() => {
+        textarea.selectionStart = 0
+        textarea.selectionEnd = 0
+        event.preventDefault()
+        event.stopPropagation()
+      })
+
+    }, [chat])
+
+  const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'ArrowUp') {
+      setNextMessageFromHistory(event, getPreviousUserEntry)
+    }
+
+    if (event.key === 'ArrowDown') {
+      setNextMessageFromHistory(event, getNextUserEntry)
+    }
+  }, [getPreviousUserEntry, getNextUserEntry, setNextMessageFromHistory])
+
+  const handleKeyUp = useCallback((event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (!event.key.startsWith('Arrow')) {
+      userEntryRef.current = chat.get('nextMessage') ?? ''
+    }
+  }, [chat])
+
+  return { handleKeyDown, handleKeyUp }
+}

package/src/views/MessageInput/dictionary.ts

@@ -3,37 +3,79 @@ import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 const dictionary = {
   en: {
     stack: 'Select stack',
-    workspace: 'Select workspace',
+    code: 'Open code editor',
+    spot: 'Select spot',
     knowledgeSource: 'Select knowledge sources',
     agent: 'Select agent',
-    collapse: 'Hide buttons',
-    expand: 'Show buttons',
     send: 'Send message',
-    placeholder: 'Type your prompt',
+    placeholder: 'Send a message to $0. For commands, use @ or /',
+    typing: 'Type your message...',
     cancel: 'Cancel',
     removeConfig: 'Remove all the configuration',
     removeStack: 'Stop using the current stack',
-    removeWorkspace: 'Stop using the current workspace',
+    removeWorkspace: 'Stop using the current spot',
     removeKS: 'Stop using this knowledge source',
     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 $0:',
+    uploadItemLimitError: 'The following files were not added because no more than $1 items may be uploaded at a time:',
+    uploadError: 'An error occurred while uploading the file "$0".',
+    uploadDragging: 'Drop the file here to upload',
+    uploadDragDropTitle: 'Drop your files here',
+    uploadDragDropDescription: 'Drag or drop files to share in the conversation',
+    unknownUploadError: 'An error occurred while uploading the files.',
+    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.',
+    cantSendBecausePromptMaxLength: 'You can\'t send messages longer than $0 characters. Please, shorten your message.',
+    chatAgent: 'Agents',
+    uploadSuccessStatus: 'File sent successfully',
+    chatViewMenu: 'Chat options menu',
+    nothingFound: 'Nothing Found',
+    hosted: 'Hosted',
+    selfHosted: 'Self Hosted',
   },
   pt: {
     stack: 'Selecionar stack',
-    workspace: 'Selecionar workspace',
+    code: 'Abrir editor de código',
+    spot: 'Selecionar spot',
     knowledgeSource: 'Selecionar knowledge sources',
     agent: 'Selecionar agente',
-    collapse: 'Esconder botões',
-    expand: 'Mostrar botões',
     send: 'Enviar mensagem',
-    placeholder: 'Digite sua pergunta',
+    placeholder: 'Envie uma mensagem para $0. Para comandos, use @ ou /',
+    typing: 'Digite sua mensagem...',
     cancel: 'Cancelar',
     removeConfig: 'Remover todas as configurações',
     removeStack: 'Parar de usar a stack atual',
-    removeWorkspace: 'Parar de usar o workspace atual',
+    removeWorkspace: 'Parar de usar o spot atual',
     removeKS: 'Parar de usar este knowledge source',
     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".',
+    uploadDragging: 'Solte o arquivo aqui para fazer upload',
+    uploadDragDropTitle: 'Solte seus arquivos aqui',
+    uploadDragDropDescription: 'Arraste ou solte arquivos para compartilhar na conversa',
+    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 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',
+    nothingFound: 'Nada encontrado',
+    hosted: 'Hospedado',
+    selfHosted: 'Auto-hospedado',
   },
 } satisfies Dictionary
 

package/src/views/MessageInput/index.tsx

@@ -1,83 +1,186 @@
-import { listToClass } from '@stack-spot/portal-theme'
+import { ProgressBar } from '@stack-spot/citric-react'
+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 { MessageInputFeatures } from '../../features'
+import { quickCommandRegex } from '../../regex'
 import { ChatEntry } from '../../state/ChatEntry'
-import { ButtonGroup } from './ButtonGroup'
+import { checkIsTrial } from '../../utils/check-is-trial'
+import { UploadProvider } from '../../utils/upload/context'
+import { usePasteUpload } from '../../utils/upload/use-paste-upload'
+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 { MAX_INPUT_HEIGHT, MessageInputBox, MIN_INPUT_HEIGHT } from './styled'
+import { QuickCommandSelector } from './QuickCommandSelector'
+import { MessageInputBox, MIN_INPUT_HEIGHT } from './styled'
+import { UploadBar } from './UploadBar'
+import { UploadDragNDrop, useUploadDragDrop } from './UploadDragNDrop'
 
-interface Props {
-  features: MessageInputFeatures,
-}
-
-export const MessageInput = ({ features }: Props) => {
+/**
+ * This renders the MessageInput part of the layout which includes the progress bar, the actual textarea, the badges telling what is
+ * going to be used for the question and the buttons to send, cancel, set the workspace, among others. This also includes the Quick
+ * Commands panel for auto completing.
+ */
+export const MessageInput = ({ chatWindowRef, customInputMessage }:
+  { chatWindowRef?: React.RefObject<HTMLElement>, customInputMessage?: string }) => {
   const t = useMessageInputDictionary()
   const [focused, setFocused] = useState(false)
-  const [expanded, setExpanded] = useState(true)
+  const [, setExpanded] = useState(true)
   const expansionLocked = useRef(false)
   const chat = useCurrentChat()
   const isLoading = useCurrentChatState('isLoading') ?? false
   const value = useCurrentChatState('nextMessage') ?? ''
   const isMinimized = useWidgetState('isMinimized')
-  const elementRef = useRef<HTMLDivElement>(null)
+  const textAreaRef = useRef<HTMLTextAreaElement>(null)
+  const agentLabel = useCurrentChatState('agent')?.label
+  const { handleKeyDown, handleKeyUp } = useUserEntryHistoryShortcut()
+  const isTrial = checkIsTrial()
+  const { isDragging, handleDrop, handleDragLeave } = useUploadDragDrop()
+  const [disabled, setDisabled] = useState(false)
+
+  usePasteUpload({
+    textAreaRef,
+    onUploadFiles: files => chat.uploadManager.add(files),
+    enabled: !isLoading,
+  })
+
+  const checkPromptMaxLength = (prompt: string) => {
+    const MAX_LENGTH = 1_000_000
+    if (prompt.length >= MAX_LENGTH) {
+      chat.pushMessage(new ChatEntry({
+        agentType: 'system',
+        type: 'text',
+        content: interpolate(t.cantSendBecausePromptMaxLength, MAX_LENGTH.toLocaleString()),
+      }))
+      return false
+    }
+    return true
+  }
+
+  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, t])
 
   const onSend = useCallback(async () => {
+    if (disabled) return
+
+    if (chat.get('isLoading')) {
+      setDisabled(true)
+      await chat.whenLoadingEnds()
+      setDisabled(false)
+    }
+
     const message = chat.get('nextMessage')
-    if (!message) return
     const code = chat.get('codeSelection')
     const language = chat.get('codeLanguage')
-    const prompt = code && !message.startsWith('/') ? `${message}\n\`\`\`${language}\n${code}\n\`\`\`` : message
-    chat.pushMessage(ChatEntry.createUserEntry(prompt, true))
+
+    // Check if requirements to send are met
+    if (!checkSendRequirements()) return
+
+    // Compose prompt with code block if needed
+    const prompt = code && !quickCommandRegex.test(message ?? '') ? `${message}\n\`\`\`${language}\n${code}\n\`\`\`` : message
+
+    // Validate prompt length
+    if (!checkPromptMaxLength(prompt || '')) return
+
+    // Prepare uploads
+    const uploads = chat.uploadManager.get().map(up => ({
+      id: up.uploadId!, // All files should have an id at this point
+      name: up.file.name,
+      image: up.file.type.toLowerCase().startsWith('image/') ? URL.createObjectURL(up.file) : undefined,
+    }))
+
+    // Push user message
+    chat.pushMessage(new ChatEntry({
+      type: 'md',
+      agentType: 'user',
+      content: prompt || '',
+      upload: uploads,
+      updated: new Date().toISOString(),
+    }))
+
+    // Reset input and uploads
     chat.set('nextMessage', '')
-    setFocused(false)
-  }, [chat])
+    chat.uploadManager.reset()
+  }, [chat, checkSendRequirements, checkPromptMaxLength])
 
   const onKeyDown = useCallback((event: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (!event.shiftKey && event.key === 'Enter') {
       event.preventDefault()
       onSend()
     }
-  }, [onSend])
+
+    handleKeyDown(event)
+  }, [onSend, handleKeyDown])
 
   useEffect(() => {
-    if (!isLoading) elementRef.current?.querySelector('textarea')?.focus()
+    if (!isLoading) textAreaRef.current?.focus()
   }, [isLoading])
 
   return (
-    <MessageInputBox ref={elementRef} aria-busy={isLoading} className="message-input">
-      <ProgressBar visible={isLoading} shimmer />
-      <InfoBar />
-      <div className={listToClass(['action-box', focused && 'focused', isLoading && 'disabled'])}>
-        <AdaptiveTextArea
-          disabled={isLoading}
-          placeholder={t.placeholder}
-          onChange={e => chat.set('nextMessage', e.target.value)}
-          value={value}
-          onFocus={() => setFocused(true)}
-          onBlur={() => setFocused(false)}
-          onKeyDown={onKeyDown}
-          onIncreaseSize={() => setExpanded(false)}
-          onResetSize={() => !expansionLocked.current && setExpanded(true)}
-          maxHeight={isMinimized ? MIN_INPUT_HEIGHT : MAX_INPUT_HEIGHT}
-        />
-        <ButtonGroup
-          features={features}
-          onSend={onSend}
-          onCancel={() => chat.abort()}
-          expanded={expanded}
-          isLoading={isLoading}
-          setExpanded={(value) => {
-            setExpanded(value)
-            expansionLocked.current = expanded
-          }}
-        />
-      </div>
-    </MessageInputBox>
+    <UploadProvider value={chat.uploadManager}>
+      <MessageInputBox aria-busy={isLoading} className={`message-input ${focused ? 'focused' : ''}`}>
+        <div className="wrapper-action">
+          <QuickCommandSelector inputRef={textAreaRef} isTrial={isTrial} />
+          <AgentSelector inputRef={textAreaRef} isTrial={isTrial} />
+          <div className="action-box">
+            <ButtonAgent />
+            <AdaptiveTextArea
+              maxHeight={() => isMinimized
+                ? MIN_INPUT_HEIGHT
+                : (chatWindowRef?.current?.querySelector('.chat-container')?.clientHeight ?? 0) / 2
+              }
+              ref={textAreaRef}
+              placeholder={
+                agentLabel
+                  ? customInputMessage ?? interpolate(t.placeholder, agentLabel)
+                  : t.typing
+              }
+              onChange={v => chat.set('nextMessage', v)}
+              value={value}
+              onFocus={() => setFocused(true)}
+              onBlur={() => setFocused(false)}
+              onKeyDown={onKeyDown}
+              onKeyUp={handleKeyUp}
+              onIncreaseSize={() => setExpanded(false)}
+              onResetSize={() => !expansionLocked.current && setExpanded(true)}
+              disabled={disabled}
+            />
+          </div>
+        </div>
+        <ProgressBar className="progress-bar" progress={isLoading ? undefined : (focused ? 100 : 0)} speed="fast" />
+        <ContextBar />
+        {chat.get('features').upload && <UploadBar />}
+        <ButtonBar onSend={onSend} isLoading={isLoading} />
+      </MessageInputBox>
+      <UploadDragNDrop isDragging={isDragging} onDrop={handleDrop} onDragLeave={handleDragLeave} />
+    </UploadProvider>
   )
 }
-
-