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

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.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.0",
+  "date": "Mon May 19 2025 19:02:34 GMT+0000 (Coordinated Universal Time)",
   "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 } 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)
@@ -322,22 +322,22 @@ 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)}>
+            <IconButton appearance="square" color="light" title={t.copy} aria-label={t.copy} onClick={() => onCopyAll(entry, chat)}>
               <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">
+        <Text as="label" appearance="microtext1" className="chat-date">
           {dateFormatter.formatForChatMessage(date)}
         </Text>
       </div>}

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;
 
@@ -65,10 +65,12 @@ export const ChatList: IStyledComponentBase<
     .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 +147,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>
+  )
+}

package/src/views/MessageInput/InfoBar.tsx

@@ -1,5 +1,5 @@
 import { Text } from '@citric/core'
-import { Times, TimesMini } from '@citric/icons'
+import { TimesMini } from '@citric/icons'
 import { Badge, IconButton } from '@citric/ui'
 import { loader } from '@monaco-editor/react'
 import { ColorPaletteName, listToClass } from '@stack-spot/portal-theme'
@@ -73,7 +73,11 @@ export const InfoBar = () => {
       <div className="space"></div>
       <div className="content">
         {shouldRenderRemoveAllButton && (
-          <IconButton aria-label={t.removeConfig} title={t.removeConfig} onClick={removeAll}><Times /></IconButton>
+          <IconButton 
+            appearance="square" color="light" 
+            aria-label={t.removeConfig} title={t.removeConfig} onClick={removeAll}>
+            <TimesMini />
+          </IconButton>
         )}
         <FadingOverflow className="list-overflow" scroll="arrows" enableHorizontalScrollWithVerticalWheel>
           <ul>

package/src/views/MessageInput/SelectContent.tsx

@@ -0,0 +1,74 @@
+import { Clip, KnowledgeSource, Spaces, Stack } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { SelectionList } from '@stack-spot/portal-components/SelectionList'
+import { useMemo, useState } from 'react'
+import { useCurrentChatState, useWidget } from '../../context/hooks'
+
+type chatFeatures = 'workspace' | 'knowledgeSource' | 'stack'
+type chatPanel = 'ks' | 'workspace' | 'stack'
+
+export const SelectContent = () => {
+  const widget = useWidget()
+  const [visibleMenu, setVisibleMenu] = useState(false)
+  const features = useCurrentChatState('features')
+  const hasFeatureButtons = features.workspace || features.knowledgeSource || features.stack
+
+  const itemConfigs = [
+    {
+      key: 'knowledgeSource',
+      label: 'Knowledge Sources',
+      icon: <KnowledgeSource />,
+      panel: 'ks',
+    },
+    {
+      key: 'stack',
+      label: 'Stacks AI',
+      icon: <Stack />,
+      panel: 'stack',
+    },
+    {
+      key: 'workspace',
+      label: 'Spots',
+      icon: <Spaces />,
+      panel: 'workspace',
+    },
+  ]
+
+  const listItems = useMemo(() =>
+    itemConfigs.filter(chatFeatures => features[chatFeatures.key as chatFeatures])
+      .map(chatFeatures => ({
+        label: chatFeatures.label,
+        icon: chatFeatures.icon,
+        onClick: () => {
+          widget.set('panel', chatFeatures.panel as chatPanel)
+          setVisibleMenu(false)
+        },
+      })), [features, widget])
+
+  if (!hasFeatureButtons) return null
+
+  return (
+    <>
+      <IconButton 
+        color="light"
+        appearance="square"
+        role="button"
+        title="title" 
+        data-test-hint="button-hint"
+        aria-label="aria-label"
+        onClick={() => setVisibleMenu(state => !state)}>
+        <Clip />
+      </IconButton>
+      <SelectionList
+        style={{ 
+          position: 'absolute', 
+          top: '-140px', 
+        }}
+        id="teste"
+        visible={visibleMenu}
+        onHide={() => setVisibleMenu(false)}
+        items={listItems}
+      />
+    </>
+  )
+}

package/src/views/MessageInput/dictionary.ts

@@ -10,7 +10,7 @@ const dictionary = {
     collapse: 'Hide buttons',
     expand: 'Show buttons',
     send: 'Send message',
-    placeholder: 'Message to $0',
+    placeholder: 'Message to $0 or use / or @.',
     cancel: 'Cancel',
     removeConfig: 'Remove all the configuration',
     removeStack: 'Stop using the current stack',
@@ -29,7 +29,7 @@ const dictionary = {
     collapse: 'Esconder botões',
     expand: 'Mostrar botões',
     send: 'Enviar mensagem',
-    placeholder: 'Mensagem para $0',
+    placeholder: 'Mensagem para $0 ou use / ou @.',
     cancel: 'Cancelar',
     removeConfig: 'Remover todas as configurações',
     removeStack: 'Parar de usar a stack atual',