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

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>
   )
 }
-
-

package/src/views/MessageInput/styled.ts

@@ -2,8 +2,10 @@ import { IconButton } from '@citric/ui'
 import { theme } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
 
-const INFO_BAR_HEIGHT = 38
-const INFO_BAR_DISPLACEMENT = 4
+const CONTEXT_BAR_HEIGHT = 38
+const CONTEXT_BAR_DISPLACEMENT = 4
+const UPLOAD_BAR_HEIGHT = 60
+const UPLOAD_BAR_DISPLACEMENT = 4
 export const MAX_INPUT_HEIGHT = 300
 export const MIN_INPUT_HEIGHT = 24
 
@@ -60,7 +62,7 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
 
     &.visible {
       > .space {
-        height: ${INFO_BAR_HEIGHT - INFO_BAR_DISPLACEMENT}px;
+        height: var(--space-height, 'auto');
       }
     }
 
@@ -74,17 +76,15 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
       top: 0;
       left: 0;
       right: 0;
-      height: ${INFO_BAR_HEIGHT}px;
+      height: var(--content-height, 'auto');
       padding-top: 8px;
       background-color: ${theme.color.light[500]};
       display: flex;
       flex-direction: row;
       gap: 4px;
-      border-right: 2px solid ${({ $inputFocused }) => theme.color.light[$inputFocused ? 600 : 500]};
-      border-left: 2px solid ${({ $inputFocused }) => theme.color.light[$inputFocused ? 600 : 500]};
 
       .list-overflow {
-        max-width: calc(100% - 30px); // close button + gap
+        max-width: calc(100% - var(--list-margins, 0px));
         height: 24px;
         &:first-child {
           margin-left: 0.25rem; // space added to the left when the close all button isn't rendered
@@ -100,31 +100,54 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
         align-items: center;
         gap: 6px;
       }
+    }
+  }
 
-      .info-badge > span {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 4px;
-        line-height: 0.75rem;
-        white-space: nowrap;
-
-        ${IconButton} {
-          padding: 4px 0;
-          background: none;
-          border: none;
-          width: auto;
-          height: auto;
+  > .context-bar {
+    --space-height: ${CONTEXT_BAR_HEIGHT - CONTEXT_BAR_DISPLACEMENT}px;
+    --content-height: ${CONTEXT_BAR_HEIGHT}px;
+    --list-margins: 30px; // close button width + gap
 
-          svg {
-            width: auto;
-            height: 12px;
-          }
+    .context-badge > span {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 4px;
+      line-height: 0.75rem;
+      white-space: nowrap;
+
+      ${IconButton} {
+        padding: 4px 0;
+        background: none;
+        border: none;
+        width: auto;
+        height: auto;
+
+        svg {
+          width: auto;
+          height: 12px;
         }
       }
     }
   }
 
+  > .upload-bar {
+    --space-height: ${UPLOAD_BAR_HEIGHT - UPLOAD_BAR_DISPLACEMENT}px;
+    --content-height: ${UPLOAD_BAR_HEIGHT}px;
+    --list-margins: 12px; // margins from .list-overflow
+
+    .list-overflow {
+      margin: 0 6px !important;
+      .scroll-to-left, .scroll-to-right {
+        top: 11px;
+      }
+    }
+
+    input[type="file"] {
+      display: none;
+    }
+  }
+
   .wrapper-action {
     position: relative;
 
@@ -153,8 +176,6 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
     }
   }
 
- 
-
   .button-group {
     display: flex;
     flex-direction: row;
@@ -252,6 +273,14 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
     }
   }
 
+  .message-menu {
+    position: absolute;
+    bottom: 34px;
+    .upload-item {
+      border-top: 1px solid ${theme.color.light[600]};
+    }
+  }
+
   textarea {
     resize: none;
     border: none;

package/dist/views/MessageInput/InfoBar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InfoBar.d.ts","sourceRoot":"","sources":["../../../src/views/MessageInput/InfoBar.tsx"],"names":[],"mappings":"AA6BA;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,+CA8EnB,CAAA"}

package/dist/views/MessageInput/InfoBar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InfoBar.js","sourceRoot":"","sources":["../../../src/views/MessageInput/InfoBar.tsx"],"names":[],"mappings":"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"}