@stack-spot/ai-chat-widget 1.20.2 → 1.21.0

package/src/views/MessageInput/index.tsx

@@ -1,4 +1,4 @@
-import { listToClass } from '@stack-spot/portal-theme'
+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'
@@ -9,7 +9,7 @@ import { ChatEntry } from '../../state/ChatEntry'
 import { checkIsTrial } from '../../utils/check-is-trial'
 import { AgentSelector } from './AgentSelector'
 import { ButtonAgent } from './ButtonAgent'
-import { ButtonGroup } from './ButtonGroup'
+import { ButtonBar } from './ButtonBar'
 import { useUserEntryHistoryShortcut } from './chat-entry-history'
 import { useMessageInputDictionary } from './dictionary'
 import { InfoBar } from './InfoBar'
@@ -24,7 +24,7 @@ import { MAX_INPUT_HEIGHT, MessageInputBox, MIN_INPUT_HEIGHT } from './styled'
 export const MessageInput = () => {
   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
@@ -43,7 +43,6 @@ export const MessageInput = () => {
     const prompt = code && !quickCommandRegex.test(message) ? `${message}\n\`\`\`${language}\n${code}\n\`\`\`` : message
     chat.pushMessage(ChatEntry.createUserEntry(prompt, true))
     chat.set('nextMessage', '')
-    setFocused(false)
   }, [chat])
 
   const onKeyDown = useCallback((event: React.KeyboardEvent<HTMLTextAreaElement>) => {
@@ -60,9 +59,7 @@ export const MessageInput = () => {
   }, [isLoading])
 
   return (
-    <MessageInputBox aria-busy={isLoading} className="message-input">
-      <ProgressBar visible={isLoading} shimmer />
-      <InfoBar />
+    <MessageInputBox aria-busy={isLoading} className="message-input" $inputFocused={focused}>
       <div className="wrapper-action">
         <QuickCommandSelector inputRef={textAreaRef} isTrial={isTrial} />
         <AgentSelector inputRef={textAreaRef} isTrial={isTrial} />
@@ -70,7 +67,6 @@ export const MessageInput = () => {
           <ButtonAgent />
           <AdaptiveTextArea
             ref={textAreaRef}
-            disabled={isLoading}
             placeholder={agentLabel && interpolate(t.placeholder, agentLabel)}
             onChange={e => chat.set('nextMessage', e.target.value)}
             value={value}
@@ -82,18 +78,12 @@ export const MessageInput = () => {
             onResetSize={() => !expansionLocked.current && setExpanded(true)}
             maxHeight={isMinimized ? MIN_INPUT_HEIGHT : MAX_INPUT_HEIGHT}
           />
-          <ButtonGroup
-            onSend={onSend}
-            onCancel={() => chat.abort()}
-            expanded={expanded}
-            isLoading={isLoading}
-            setExpanded={(value) => {
-              setExpanded(value)
-              expansionLocked.current = expanded
-            }}
-          />
         </div>
       </div>
+      <ProgressBar visible={true} animate={isLoading} 
+        backgroundColor={isLoading || !focused ? theme.color.light[600] : theme.color.primary[500]} />
+      <InfoBar />
+      <ButtonBar focused={focused} onSend={onSend} isLoading={isLoading} />
     </MessageInputBox>
   )
 }

package/src/views/MessageInput/styled.ts

@@ -2,18 +2,60 @@ import { IconButton } from '@citric/ui'
 import { theme } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
 
-const INFO_BAR_HEIGHT = 42
+const INFO_BAR_HEIGHT = 38
 const INFO_BAR_DISPLACEMENT = 4
 export const MAX_INPUT_HEIGHT = 300
 export const MIN_INPUT_HEIGHT = 24
 
-export const MessageInputBox = styled.div`
+export const SelectionBarWrapper = styled.div<{$inputFocused?: boolean}>`
+  display: inline-flex;
+  justify-content: space-between;
+  position: relative;
+  padding: 8px;
+  background-color: ${theme.color.light[500]};
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border: 2px solid ${({ $inputFocused }) => theme.color.light[$inputFocused ? 600 : 500]};
+  border-top: none;
+
+  .selection-list {
+    opacity: 0;
+    transition: height 0.4s, opacity 0.3s;
+  }
+  .visible {
+    opacity: 1;
+  }
+
+  .selection-list-content {
+    background-color: ${theme.color.light[500]};
+  }
+  
+  ul { 
+    list-style: none;
+    padding: 0;
+    margin: 12px;
+    min-width: 225px;
+  }
+  li {
+    cursor: pointer;
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+    &:hover {
+      background-color: ${theme.color.light[600]}
+    }
+    a:hover {
+      background-color: ${theme.color.light[600]}
+    }
+  }
+`
+
+export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
   display: flex;
   flex-direction: column;
 
   > .info-bar {
-    margin-top: 8px;
-    margin-bottom: -3px;
     position: relative;
     overflow: hidden;
 
@@ -33,14 +75,14 @@ export const MessageInputBox = styled.div`
       top: 0;
       left: 0;
       right: 0;
-      border-top-left-radius: 10px;
-      border-top-right-radius: 10px;
       height: ${INFO_BAR_HEIGHT}px;
-      padding: 6px 4px 0;
+      padding-top: 8px;
       background-color: ${theme.color.light[500]};
       display: flex;
       flex-direction: row;
-      gap: 6px;
+      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
@@ -93,16 +135,19 @@ export const MessageInputBox = styled.div`
       flex-direction: row;
       gap: 8px;
       align-items: end;
-      border-radius: 4px;
-      border: 1px solid ${theme.color.light[500]};
-      background-color: ${theme.color.light[300]};
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      border: 2px solid ${theme.color.light[500]};
+      
+      background-color: ${theme.color.light[500]};
       padding: 10px 8px;
       transition: border-color 0.3s, background-color 0.3s;
 
       &.focused {
-        border-color: ${theme.color.primary[500]};
+        border: 2px solid ${theme.color.light[600]};
       }
 
+      
       &.disabled {
         background-color: ${theme.color.light[500]};
       }
@@ -121,43 +166,9 @@ export const MessageInputBox = styled.div`
     button {
       border: none;
       border-radius: 2px;
-      opacity: 0.6;
       transition: background-color 0.2s, opacity 0.2s;
-      background-color: transparent;
       padding: 0;
 
-      svg {
-        fill: ${theme.color.light[700]};
-        width: 16px;
-        height: 16px;
-      }
-
-      &:hover {
-        background-color: ${theme.color.light[500]};
-      }
-
-      &.send {
-        background-color: ${theme.color.inverse[500]};
-        &:hover {
-          opacity: 1;
-        }
-        svg {
-          fill: ${theme.color.inverse.contrastText};
-        }
-      }
-
-      &.expand {
-        svg {
-          transition: transform 0.3s;
-        }
-      }
-
-      &.collapsed {
-        svg {
-          transform: rotate(180deg);
-        }
-      } 
-
       &.agent {
         border-radius: 50%; 
         opacity: 1;

package/dist/views/MessageInput/ButtonGroup.d.ts

@@ -1,29 +0,0 @@
-interface ButtonGroupProps {
-    /**
-     * Whether or not the button group is expanded.
-     */
-    expanded: boolean;
-    /**
-     * A function to set the button group as expanded or collapsed.
-     */
-    setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
-    /**
-     * Whether or not the message is currently being sent. This is used to decide which button to show: send or cancel.
-     */
-    isLoading: boolean;
-    /**
-     * A function to run when the send button is clicked.
-     */
-    onSend: () => void;
-    /**
-     * A function to run when the cancel button is clicked.
-     */
-    onCancel: () => void;
-}
-/**
- * Renders the button group at right bottom side of the message input. This includes the send button as well as the buttons to open the
- * editor, change the stack, etc.
- */
-export declare const ButtonGroup: ({ onSend, onCancel, expanded, setExpanded, isLoading }: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=ButtonGroup.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/views/MessageInput/ButtonGroup.tsx"],"names":[],"mappings":"AAOA,UAAU,gBAAgB;IACxB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3D;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,2DAA4D,gBAAgB,4CA0EnG,CAAA"}

package/dist/views/MessageInput/ButtonGroup.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ChevronRight, Code, KnowledgeSource, Send, Spaces, Stack, Times } from '@citric/icons';
-import { IconButton } from '@citric/ui';
-import { listToClass } from '@stack-spot/portal-theme';
-import { useEffect, useRef } from 'react';
-import { useCurrentChatState, useWidget } from '../../context/hooks.js';
-import { useMessageInputDictionary } from './dictionary.js';
-/**
- * Renders the button group at right bottom side of the message input. This includes the send button as well as the buttons to open the
- * editor, change the stack, etc.
- */
-export const ButtonGroup = ({ onSend, onCancel, expanded, setExpanded, isLoading }) => {
-    const t = useMessageInputDictionary();
-    const widget = useWidget();
-    const featureButtonsWidth = useRef();
-    const featureButtons = useRef(null);
-    const features = useCurrentChatState('features');
-    const hasFeatureButtons = features.workspace || features.knowledgeSource || features.stack || features.editor;
-    useEffect(() => {
-        if (!featureButtons.current)
-            return;
-        const isHidden = featureButtons.current.style.width === '0px';
-        featureButtons.current.style.width = 'auto';
-        featureButtonsWidth.current = featureButtons.current.clientWidth;
-        if (isHidden)
-            featureButtons.current.style.width = '0px';
-        else
-            featureButtons.current.style.width = `${featureButtonsWidth.current}px`;
-    }, 
-    // don't use the whole features object here, it would make every chat tab change rerun this effect.
-    [features.workspace, features.knowledgeSource, features.stack, features.editor]);
-    return (_jsxs("div", { className: "button-group", children: [hasFeatureButtons && _jsxs(_Fragment, { children: [_jsxs("div", { ref: featureButtons, className: listToClass(['feature-buttons', expanded && 'expanded']), style: { width: expanded ? featureButtonsWidth.current : 0 }, children: [features.workspace && (_jsx(IconButton, { "aria-label": t.spot, title: t.spot, onClick: () => widget.set('panel', 'workspace'), children: _jsx(Spaces, {}) })), features.knowledgeSource && (_jsx(IconButton, { "aria-label": t.knowledgeSource, title: t.knowledgeSource, onClick: () => widget.set('panel', 'ks'), children: _jsx(KnowledgeSource, {}) })), features.stack && (_jsx(IconButton, { "aria-label": t.stack, title: t.stack, onClick: () => widget.set('panel', 'stack'), children: _jsx(Stack, {}) })), features.editor && (_jsx(IconButton, { "aria-label": t.code, title: t.code, onClick: () => widget.set('panel', 'editor'), children: _jsx(Code, {}) }))] }), _jsx(IconButton, { title: expanded ? t.collapse : t.expand, className: listToClass(['expand', !expanded && 'collapsed']), "aria-label": expanded ? t.collapse : t.expand, onClick: () => setExpanded(v => !v), children: _jsx(ChevronRight, {}) })] }), isLoading ? (_jsx(IconButton, { "aria-label": t.cancel, onClick: onCancel, className: "send", title: t.cancel, children: _jsx(Times, {}) })) : (_jsx(IconButton, { "aria-label": t.send, onClick: onSend, className: "send", title: t.send, children: _jsx(Send, {}) }))] }));
-};
-//# sourceMappingURL=ButtonGroup.js.map

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

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

package/src/views/MessageInput/ButtonGroup.tsx

@@ -1,109 +0,0 @@
-import { ChevronRight, Code, KnowledgeSource, Send, Spaces, Stack, Times } from '@citric/icons'
-import { IconButton } from '@citric/ui'
-import { listToClass } from '@stack-spot/portal-theme'
-import { useEffect, useRef } from 'react'
-import { useCurrentChatState, useWidget } from '../../context/hooks'
-import { useMessageInputDictionary } from './dictionary'
-
-interface ButtonGroupProps {
-  /**
-   * Whether or not the button group is expanded.
-   */
-  expanded: boolean,
-  /**
-   * A function to set the button group as expanded or collapsed.
-   */
-  setExpanded: React.Dispatch<React.SetStateAction<boolean>>,
-  /**
-   * Whether or not the message is currently being sent. This is used to decide which button to show: send or cancel.
-   */
-  isLoading: boolean,
-  /**
-   * A function to run when the send button is clicked.
-   */
-  onSend: () => void,
-  /**
-   * A function to run when the cancel button is clicked.
-   */
-  onCancel: () => void,
-}
-
-/**
- * Renders the button group at right bottom side of the message input. This includes the send button as well as the buttons to open the
- * editor, change the stack, etc.
- */
-export const ButtonGroup = ({ onSend, onCancel, expanded, setExpanded, isLoading }: ButtonGroupProps) => {
-  const t = useMessageInputDictionary()
-  const widget = useWidget()
-  const featureButtonsWidth = useRef<number | undefined>()
-  const featureButtons = useRef<HTMLDivElement>(null)
-  const features = useCurrentChatState('features')
-  const hasFeatureButtons = features.workspace || features.knowledgeSource || features.stack || features.editor
-
-  useEffect(
-    () => {
-      if (!featureButtons.current) return
-      const isHidden = featureButtons.current.style.width === '0px'
-      featureButtons.current.style.width = 'auto'
-      featureButtonsWidth.current = featureButtons.current.clientWidth
-      if (isHidden) featureButtons.current.style.width = '0px'
-      else featureButtons.current.style.width = `${featureButtonsWidth.current}px`
-    },
-    // don't use the whole features object here, it would make every chat tab change rerun this effect.
-    [features.workspace, features.knowledgeSource, features.stack, features.editor],
-  )
-
-  return (
-    <div className="button-group">
-      {hasFeatureButtons && <>
-        <div
-          ref={featureButtons}
-          className={listToClass(['feature-buttons', expanded && 'expanded'])}
-          style={{ width: expanded ? featureButtonsWidth.current : 0 }}
-        >
-          {features.workspace && (
-            <IconButton aria-label={t.spot} title={t.spot} onClick={() => widget.set('panel', 'workspace')}>
-              <Spaces />
-            </IconButton>
-          )}
-          {features.knowledgeSource && (
-            <IconButton
-              aria-label={t.knowledgeSource}
-              title={t.knowledgeSource}
-              onClick={() => widget.set('panel', 'ks')}
-            >
-              <KnowledgeSource />
-            </IconButton>
-          )}
-          {features.stack && (
-            <IconButton aria-label={t.stack} title={t.stack} onClick={() => widget.set('panel', 'stack')}>
-              <Stack />
-            </IconButton>
-          )}
-          {features.editor && (
-            <IconButton aria-label={t.code} title={t.code} onClick={() => widget.set('panel', 'editor')}>
-              <Code />
-            </IconButton>
-          )}
-        </div>
-        <IconButton
-          title={expanded ? t.collapse : t.expand}
-          className={listToClass(['expand', !expanded && 'collapsed'])}
-          aria-label={expanded ? t.collapse : t.expand}
-          onClick={() => setExpanded(v => !v)}
-        >
-          <ChevronRight />
-        </IconButton>
-      </>}
-      {isLoading ? (
-        <IconButton aria-label={t.cancel} onClick={onCancel} className="send" title={t.cancel}>
-          <Times />
-        </IconButton>
-      ) : (
-        <IconButton aria-label={t.send} onClick={onSend} className="send" title={t.send}>
-          <Send />
-        </IconButton>
-      )}
-    </div>
-  )
-}