@stack-spot/ai-chat-widget 1.20.2 → 1.21.1-beta.0

package/dist/views/MessageInput/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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.js';
@@ -10,7 +10,7 @@ import { ChatEntry } from '../../state/ChatEntry.js';
 import { checkIsTrial } from '../../utils/check-is-trial.js';
 import { AgentSelector } from './AgentSelector.js';
 import { ButtonAgent } from './ButtonAgent.js';
-import { ButtonGroup } from './ButtonGroup.js';
+import { ButtonBar } from './ButtonBar.js';
 import { useUserEntryHistoryShortcut } from './chat-entry-history.js';
 import { useMessageInputDictionary } from './dictionary.js';
 import { InfoBar } from './InfoBar.js';
@@ -24,7 +24,7 @@ import { MAX_INPUT_HEIGHT, MessageInputBox, MIN_INPUT_HEIGHT } from './styled.js
 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) => {
         if (!event.shiftKey && event.key === 'Enter') {
@@ -56,9 +55,6 @@ export const MessageInput = () => {
         if (!isLoading)
             textAreaRef.current?.focus();
     }, [isLoading]);
-    return (_jsxs(MessageInputBox, { "aria-busy": isLoading, className: "message-input", children: [_jsx(ProgressBar, { visible: isLoading, shimmer: true }), _jsx(InfoBar, {}), _jsxs("div", { className: "wrapper-action", children: [_jsx(QuickCommandSelector, { inputRef: textAreaRef, isTrial: isTrial }), _jsx(AgentSelector, { inputRef: textAreaRef, isTrial: isTrial }), _jsxs("div", { className: listToClass(['action-box', focused && 'focused', isLoading && 'disabled']), children: [_jsx(ButtonAgent, {}), _jsx(AdaptiveTextArea, { ref: textAreaRef, disabled: isLoading, 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 }), _jsx(ButtonGroup, { onSend: onSend, onCancel: () => chat.abort(), expanded: expanded, isLoading: isLoading, setExpanded: (value) => {
-                                    setExpanded(value);
-                                    expansionLocked.current = expanded;
-                                } })] })] })] }));
+    return (_jsxs(MessageInputBox, { "aria-busy": isLoading, className: "message-input", "$inputFocused": focused, children: [_jsxs("div", { className: "wrapper-action", children: [_jsx(QuickCommandSelector, { inputRef: textAreaRef, isTrial: isTrial }), _jsx(AgentSelector, { inputRef: textAreaRef, isTrial: isTrial }), _jsxs("div", { className: listToClass(['action-box', focused && 'focused', isLoading && 'disabled']), children: [_jsx(ButtonAgent, {}), _jsx(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 })] })] }), _jsx(ProgressBar, { visible: true, animate: isLoading, backgroundColor: isLoading || !focused ? theme.color.light[600] : theme.color.primary[500] }), _jsx(InfoBar, {}), _jsx(ButtonBar, { focused: focused, onSend: onSend, isLoading: isLoading })] }));
 };
 //# sourceMappingURL=index.js.map

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

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

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

@@ -1,4 +1,9 @@
 export declare const MAX_INPUT_HEIGHT = 300;
 export declare const MIN_INPUT_HEIGHT = 24;
-export declare const MessageInputBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SelectionBarWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $inputFocused?: boolean;
+}>> & string;
+export declare const MessageInputBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $inputFocused?: boolean;
+}>> & string;
 //# sourceMappingURL=styled.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/views/MessageInput/styled.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,gBAAgB,MAAM,CAAA;AACnC,eAAO,MAAM,gBAAgB,KAAK,CAAA;AAElC,eAAO,MAAM,eAAe,wOAwP3B,CAAA"}
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/views/MessageInput/styled.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,gBAAgB,MAAM,CAAA;AACnC,eAAO,MAAM,gBAAgB,KAAK,CAAA;AAElC,eAAO,MAAM,mBAAmB;oBAA+B,OAAO;YA0CrE,CAAA;AAED,eAAO,MAAM,eAAe;oBAA+B,OAAO;YAuNjE,CAAA"}

package/dist/views/MessageInput/styled.js

@@ -1,17 +1,58 @@
 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 SelectionBarWrapper = styled.div `
+  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 `
   display: flex;
   flex-direction: column;
 
   > .info-bar {
-    margin-top: 8px;
-    margin-bottom: -3px;
     position: relative;
     overflow: hidden;
 
@@ -31,14 +72,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
@@ -91,16 +132,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]};
       }
@@ -119,43 +163,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/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/views/MessageInput/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,MAAM,eAAe,GAAG,EAAE,CAAA;AAC1B,MAAM,qBAAqB,GAAG,CAAC,CAAA;AAC/B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;AACnC,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,CAAA;AAElC,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;kBAYvB,eAAe,GAAG,qBAAqB;;;;;;;;;;;;;;;;gBAgBzC,eAAe;;0BAEL,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA+BtC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;0BA0BM,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;0BACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;wBAKxB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;;;;4BAIpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;gBAuBlC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;4BAMV,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;4BAItB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;;;;;kBAKlC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAuD5C,UAAU;;;;;;;;;;;;;;8BAcc,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;8BACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;gCAQpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;oBAOlC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;cAoBpC,gBAAgB;;;;;;;;CAQ7B,CAAA"}
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/views/MessageInput/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,MAAM,eAAe,GAAG,EAAE,CAAA;AAC1B,MAAM,qBAAqB,GAAG,CAAC,CAAA;AAC/B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;AACnC,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,CAAA;AAElC,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAA2B;;;;;sBAKlD,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;sBAGtB,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;;;;;;;;;;;;wBAYjE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;0BAgBpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;0BAGtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;CAG/C,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAA2B;;;;;;;;;;kBAUlD,eAAe,GAAG,qBAAqB;;;;;;;;;;;;;;gBAczC,eAAe;;0BAEL,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;gCAIhB,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;+BACpE,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA4BxF,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA2BM,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;0BAEtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;4BAKpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;4BAKtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2D5C,UAAU;;;;;;;;;;;;;;8BAcc,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;8BACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;gCAQpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;oBAOlC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;cAoBpC,gBAAgB;;;;;;;;CAQ7B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.20.2",
+  "version": "1.21.1-beta.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,7 +12,7 @@
   "peerDependencies": {
     "@citric/core": "^6.4.0",
     "@stack-spot/portal-components": "^2.22.1",
-    "@citric/icons": "^5.11.0",
+    "@citric/icons": "^5.13.0",
     "@stack-spot/portal-network": "^0.124.0",
     "@citric/ui": "^6.10.2",
     "@stack-spot/portal-theme": "^1.0.0",

package/src/app-metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.20.2",
-  "date": "Mon May 12 2025 19:59:56 GMT+0000 (Coordinated Universal Time)",
+  "version": "1.21.1-beta.0",
+  "date": "Tue May 20 2025 14:17:41 GMT-0300 (Horário Padrão de Brasília)",
   "dependencies": [
     {
       "name": "@stack-spot/app-metadata",
@@ -93,11 +93,11 @@
     },
     {
       "name": "@citric/icons",
-      "version": "5.11.0(react@18.2.0)"
+      "version": "5.13.0(react@18.2.0)"
     },
     {
       "name": "@citric/ui",
-      "version": "6.10.2(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.11.0(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0))"
+      "version": "6.10.2(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.13.0(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0))"
     },
     {
       "name": "@dagrejs/dagre",
@@ -109,7 +109,7 @@
     },
     {
       "name": "@stack-spot/portal-components",
-      "version": "2.22.1(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.11.0(react@18.2.0))(@citric/ui@6.10.2(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.11.0(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-theme@1.1.0(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@types/react@18.3.11)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "version": "2.22.1(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.13.0(react@18.2.0))(@citric/ui@6.10.2(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.13.0(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-theme@1.1.0(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@types/react@18.3.11)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
     {
       "name": "@stack-spot/portal-network",

package/src/components/ProgressBar.tsx

@@ -2,6 +2,10 @@ import { listToClass, theme, WithStyle } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
 
 interface Props extends WithStyle {
+  /**
+   * Apply animation effects to the progress bar.
+   */
+  animate?: boolean,
   /**
    * Whether or not the progress bar is visible.
    */
@@ -42,8 +46,8 @@ function gradientFromColorArray(colors: string[]) {
 // the shimmering effect requires more space
 const SHIMMER_PADDING = '10px'
 
-const Styled = styled.div<{ $bg: string[], $fg: string[], $shimmer: string[] }>`
-  margin: 7px 0;
+const Styled = styled.div<{ $bg: string[], $fg: string[], $shimmer: string[], $animate?: boolean }>`
+  /* margin: ${({ $shimmer }) => $shimmer.length > 0 ? '7px 0' : '0'}; */
   opacity: 0;
   transition: opacity 0.5s;
 
@@ -125,15 +129,15 @@ const Styled = styled.div<{ $bg: string[], $fg: string[], $shimmer: string[] }>`
     &:before {
       content: '';
       display: block;
-      width: 33%;
+      width: 100%;
       height: 100%;
-      background: ${({ $fg }) => gradientFromColorArray($fg)};
-      animation: slide 3s infinite forwards;
+      background: ${({ $fg, $animate, $bg }) => $animate ? gradientFromColorArray($fg) : $bg};
+      animation: ${({ $animate }) => $animate ? 'slide .5s infinite forwards' : 'none'};
     }
 
     @keyframes slide {
       from {
-        margin-left: -33%;
+        margin-left: -100%;
       }
       to {
         margin-left: 100%;
@@ -147,6 +151,7 @@ const Styled = styled.div<{ $bg: string[], $fg: string[], $shimmer: string[] }>`
  * right.
  */
 export const ProgressBar = ({
+  animate,
   visible = true,
   shimmer,
   backgroundColor = shimmer ? 'rgba(255, 255, 255, 0.4)' : theme.color.light[500],
@@ -161,7 +166,7 @@ export const ProgressBar = ({
   const progress = <div className="progress-bar"></div>
   const result = shimmer 
     ? (
-      <div className="shimmer">
+      <div className={listToClass([shimmer && 'shimmer'])}>
         <div className="colors"></div>
         <div className="progress-glow"></div>
         {progress}
@@ -169,7 +174,9 @@ export const ProgressBar = ({
     )
     : progress
   return (
-    <Styled className={listToClass([className, visible && 'visible'])} style={style} $fg={$fg} $bg={$bg} $shimmer={$shimmer}>
+    <Styled 
+      className={listToClass([className, visible && 'visible'])} 
+      style={style} $fg={$fg} $bg={$bg} $shimmer={$shimmer} $animate={animate}>
       {result}
     </Styled>
   )

package/src/layout.css

@@ -31,7 +31,6 @@
   background-color: var(--light-400);
   border-radius: 4px;
   position: relative;
-  overflow: hidden;
   width: 100%;
   height: 100%;
 
@@ -104,11 +103,13 @@
 }
 
 .chat-content {
+  padding-bottom: 16px;
   display: flex;
   flex-direction: column;
   flex: 1;
   flex-basis: 0;
   overflow: auto;
+  padding-right: 12px;
 }
 
 .chat-right-panel {

package/src/views/Chat/ChatMessage.tsx

@@ -1,6 +1,6 @@
 import { Box, Button, Checkbox, Flex, IconBox, Input, Label, Radio, Text } from '@citric/core'
 import { Cog, Copy, Dislike, DislikeFill, Like, LikeFill, TimesCircle } from '@citric/icons'
-import { Avatar, Badge, IconButton } from '@citric/ui'
+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'
@@ -37,7 +37,7 @@ interface Props extends CustomMessage {
   /**
    * The name of the user currently logged in (will be used if the agent type of the message is "user").
    */
-  username: string,
+  username?: string,
   /**
    * Whether or not this is the last message in the chat. This is important for disabling action buttons in messages that are no longer
    * relevant.
@@ -169,14 +169,14 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
 /**
  * Renders a message (ChatEntry) in the chat.
  */
-export const ChatMessage = ({ message, username, isLast, beforeMessage, afterMessage }: Props) => {
+export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Props) => {
   const t = useTranslate(dictionary)
   const [liked, setLiked] = useState<boolean | undefined>()
   const [value, setValue] = useState<string[]>(message.getValue()?.initialValue ?? [])
   const [labels, setLabels] = useState<string[]>(message.getValue()?.initialValue ?? [])
   const entry = useChatEntry(message)
   const dateFormatter = useDateFormatter()
-  const userInfo = entry.agentType === 'user' ? <Avatar size="xs">{username}</Avatar> : <AgentInfo agent={entry.agent} />
+  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)
@@ -185,7 +185,8 @@ export const ChatMessage = ({ message, username, isLast, beforeMessage, afterMes
   const chat = useCurrentChat()
   const agentId = entry.agent?.id ?? ''
   const [agent] = agentClient.agentById.useStatefulQuery({ agentId, builtIn: !!entry?.agent?.builtIn }, { enabled: !!agentId  })
-
+  const [copied, setCopied] = useState(false)
+  
   useChatScrollToBottomEffect(ref, [entry])
 
   const detailKS = useCallback(({ name, slug, documentScore, documentId }: Required<TextChatEntry>['knowledgeSources'][number]) => {
@@ -250,6 +251,12 @@ export const ChatMessage = ({ message, username, isLast, beforeMessage, afterMes
   )}
   </>, [entry, isLast, runAction])
 
+  const handleCopy = () => {
+    onCopyAll(entry, chat)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1000)
+  }
+
   const renderContent = () => {
     if (entry.type === 'md') {
       return <>
@@ -257,13 +264,7 @@ export const ChatMessage = ({ message, username, isLast, beforeMessage, afterMes
         {renderActions()}
       </>
     }
-    if (entry.type === 'text') {
-      return <>
-        <p className="plain-text">{entry.content}</p>
-        {renderActions()}
-      </>
-    }
-
+    
     return <form>
       <RenderInputsEntry entry={entry} isLast={isLast} value={value} setValue={setValue} setLabels={setLabels} labels={labels} />
       <Box mt="4">
@@ -322,22 +323,72 @@ export const ChatMessage = ({ message, username, isLast, beforeMessage, afterMes
       {shouldShowFooter && <div className="message-footer">
         {entry.agentType === 'bot' && !entry.error && <div className="message-actions">
           {entry.type === 'md' && (
-            <IconButton title={t.copy} aria-label={t.copy} onClick={() => onCopyAll(entry, chat)}>
-              <Copy />
-            </IconButton>
+            copied ? (
+              <Tooltip text={t.copied} sx={{ marginLeft: '14px' }}>
+                <IconButton
+                  appearance="square"
+                  color="light"
+                  title={t.copied}
+                  aria-label={t.copied}
+                  onClick={handleCopy}
+                >
+                  <Copy />
+                </IconButton>
+              </Tooltip>
+            ) : (
+              <IconButton
+                appearance="square"
+                color="light"
+                title={t.copy}
+                aria-label={t.copy}
+                onClick={handleCopy}
+              >
+                <Copy />
+              </IconButton>
+            )
           )}
           {entry.messageId && (
             <>
-              <IconButton title={t.like} aria-label={t.like} onClick={like}>
+              <IconButton appearance="square" color="light" title={t.like} aria-label={t.like} onClick={like}>
                 {liked === true ? <LikeFill /> : <Like />}
               </IconButton>
-              <IconButton title={t.dislike} aria-label={t.dislike} onClick={dislike}>
+              <IconButton appearance="square" color="light" title={t.dislike} aria-label={t.dislike} onClick={dislike}>
                 {liked === false ? <DislikeFill /> : <Dislike />}
               </IconButton>
             </>
           )}
         </div>}
-        <Text appearance="microtext1" className="chat-date">
+
+        {entry.agentType === 'user' && (
+          <div className="message-actions">
+            {copied ? (
+              <Tooltip text={t.copied}>
+                <IconButton
+                  appearance="square"
+                  color="light"
+                  title={t.copied}
+                  aria-label={t.copied}
+                  onClick={handleCopy}
+                  size="sm"
+                >
+                  <Copy />
+                </IconButton>
+              </Tooltip>
+            ) : (
+              <IconButton
+                appearance="square"
+                color="light"
+                title={t.copy}
+                aria-label={t.copy}
+                onClick={handleCopy}
+                size="sm"
+              >
+                <Copy />
+              </IconButton>
+            )}
+          </div>
+        )}
+        <Text as="label" appearance="microtext1" className="chat-date">
           {dateFormatter.formatForChatMessage(date)}
         </Text>
       </div>}
@@ -352,6 +403,7 @@ const dictionary = {
     dislike: 'Dislike',
     tools: 'Tools',
     openToolsPanel: 'Open the tools panel to see more details.',
+    copied: 'Copied',
   },
   pt: {
     copy: 'Copiar',
@@ -359,5 +411,6 @@ const dictionary = {
     dislike: 'Não gostei',
     tools: 'Ferramentas',
     openToolsPanel: 'Abrir o painel de ferramentas para ver mais detalhes.',
+    copied: 'Copiado',
   },
 } satisfies Dictionary

package/src/views/Chat/styled.ts

@@ -11,7 +11,7 @@ export const ChatList: IStyledComponentBase<
   flex-direction: column;
   justify-content: end;
   gap: 20px;
-  margin: 0 5px;
+  margin: 0;
   padding: 0;
   flex: 1;
 
@@ -61,14 +61,18 @@ export const ChatList: IStyledComponentBase<
   .message-footer {
     display: flex;
     flex-direction: row;
+    align-items: center;
+    gap: 8px;
 
     .message-actions {
       display: flex;
       flex-direction: row;
-      gap: 8px;
+      gap: 4px;
     }
 
     .chat-date {
+      display: inline-block;
+      align-content: flex-end;
       opacity: 0.6;
       margin-left: auto;
     }
@@ -145,9 +149,10 @@ export const ChatList: IStyledComponentBase<
         gap: 8px;
         
         .message-content {
-          padding: 10px;
+          padding: 16px;
+          border-radius: 24px;
+          border-top-right-radius: 0;
           background-color: ${theme.color.light[500]};
-          border-radius: 4px;
 
           .markdown > p:first-child {
             margin-top: 0;

package/src/views/MessageInput/ButtonBar.tsx

@@ -0,0 +1,55 @@
+import { Flex } from '@citric/core'
+import { ArrowUp, Code, Stop } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
+import { useMessageInputDictionary } from './dictionary'
+import { SelectContent } from './SelectContent'
+import { SelectionBarWrapper } from './styled'
+
+interface SelectionBarProps {
+  /**
+   * A function to run when the send button is clicked.
+   */
+  onSend: () => void,
+  /**
+   * Whether or not the message is currently being sent. This is used to decide which button to show: send or cancel.
+   */
+  isLoading?: boolean,
+  /**
+   * State to determine whether the input is focused
+   */
+  focused?: boolean,
+}
+
+export const ButtonBar = ({ onSend, isLoading, focused }: SelectionBarProps) => {
+  const t = useMessageInputDictionary()
+  const chat = useCurrentChat()
+  const widget = useWidget()
+  const features = useCurrentChatState('features')
+
+  return (
+    <SelectionBarWrapper className="button-group" $inputFocused={focused}>
+      <Flex sx={{ gap: '4px' }}>
+        <SelectContent />
+        {features.editor && (
+          <IconButton color="light" appearance="square" aria-label={t.code} title={t.code} onClick={() => widget.set('panel', 'editor')}>
+            <Code />
+          </IconButton>
+        )}
+      </Flex>
+      <Flex>
+        {isLoading ? (
+          <IconButton appearance="square" color="inverse" aria-label={t.cancel} 
+            onClick={() => chat.abort()} className="send" title={t.cancel}>
+            <Stop />
+          </IconButton>
+        ) : (
+          <IconButton appearance="square" color="inverse" aria-label={t.send} 
+            onClick={onSend} className="send" title={t.send}>
+            <ArrowUp />
+          </IconButton>
+        )}
+      </Flex>
+    </SelectionBarWrapper>
+  )
+}