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

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,18 +163,12 @@ export const MessageInputBox = styled.div `
     button {
       border: none;
       border-radius: 2px;
-      opacity: 0.6;
+      /* opacity: 0.6; */
       transition: background-color 0.2s, opacity 0.2s;
-      background-color: transparent;
+      /* background-color: transparent; */
       padding: 0;
 
-      svg {
-        fill: ${theme.color.light[700]};
-        width: 16px;
-        height: 16px;
-      }
-
-      &:hover {
+      /* &:hover {
         background-color: ${theme.color.light[500]};
       }
 
@@ -141,7 +179,7 @@ export const MessageInputBox = styled.div `
         }
         svg {
           fill: ${theme.color.inverse.contrastText};
-        }
+        } 
       }
 
       &.expand {
@@ -154,7 +192,7 @@ export const MessageInputBox = styled.div `
         svg {
           transform: rotate(180deg);
         }
-      } 
+      }  */
 
       &.agent {
         border-radius: 50%; 

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;;;;;;;;;;;;;;;;;;;;;;;4BAuBtB,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.20.2-beta.0",
+  "version": "1.20.2-beta.10",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/app-metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.20.2",
-  "date": "Wed May 14 2025 11:51:55 GMT-0300 (Horário Padrão de Brasília)",
+  "version": "1.20.2-beta.10",
+  "date": "Mon May 19 2025 15:28:06 GMT-0300 (Horário Padrão de Brasília)",
   "dependencies": [
     {
       "name": "@stack-spot/app-metadata",

package/src/components/ProgressBar.tsx

@@ -129,15 +129,15 @@ const Styled = styled.div<{ $bg: string[], $fg: string[], $shimmer: string[], $a
     &:before {
       content: '';
       display: block;
-      width: 33%;
+      width: 100%;
       height: 100%;
       background: ${({ $fg, $animate, $bg }) => $animate ? gradientFromColorArray($fg) : $bg};
-      animation: ${({ $animate }) => $animate ? 'slide 1.5s infinite forwards' : 'none'};
+      animation: ${({ $animate }) => $animate ? 'slide .5s infinite forwards' : 'none'};
     }
 
     @keyframes slide {
       from {
-        margin-left: -33%;
+        margin-left: -100%;
       }
       to {
         margin-left: 100%;

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,15 @@ 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' ? <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 +186,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 +252,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 +265,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 +324,47 @@ 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={handleCopy}>
               <Copy />
+              {copied && (
+                <div style={{ fontSize: 12, marginLeft: 4 }}>
+                  <Text appearance="microtext1" colorScheme="light.700">{t.copied}</Text>
+                </div>
+              )}
             </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">
+            <IconButton
+              appearance="square" 
+              color="light" 
+              title={t.copy}
+              aria-label={t.copy}
+              onClick={handleCopy}
+              size="sm"
+            >
+              <Copy />
+              {copied && (
+                <div style={{ fontSize: 12, marginLeft: 4  }}>
+                  <Text appearance="microtext1" colorScheme="light.700">{t.copied}</Text>
+                </div>
+              )}
+            </IconButton>
+          </div>
+        )}
+        <Text as="label" appearance="microtext1" className="chat-date">
           {dateFormatter.formatForChatMessage(date)}
         </Text>
       </div>}
@@ -352,6 +379,7 @@ const dictionary = {
     dislike: 'Dislike',
     tools: 'Tools',
     openToolsPanel: 'Open the tools panel to see more details.',
+    copied: 'Copied',
   },
   pt: {
     copy: 'Copiar',
@@ -359,5 +387,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,8 @@ export const ChatList: IStyledComponentBase<
   flex-direction: column;
   justify-content: end;
   gap: 20px;
-  margin: 0 5px;
+  /* margin: 0 5px; */
+  margin: 0;
   padding: 0;
   flex: 1;
 
@@ -61,14 +62,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 +150,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

@@ -28,8 +28,8 @@ export const ButtonBar = ({ onSend, isLoading, focused }: SelectionBarProps) =>
   const features = useCurrentChatState('features')
 
   return (
-    <SelectionBarWrapper $inputFocused={focused}>
-      <Flex>
+    <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')}>

package/src/views/MessageInput/SelectContent.tsx

@@ -1,13 +1,52 @@
 import { Clip, KnowledgeSource, Spaces, Stack } from '@citric/icons'
 import { IconButton } from '@citric/ui'
 import { SelectionList } from '@stack-spot/portal-components/SelectionList'
-import { useState } from 'react'
-import { useWidget } from '../../context/hooks'
+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 
@@ -17,24 +56,18 @@ export const SelectContent = () => {
         title="title" 
         data-test-hint="button-hint"
         aria-label="aria-label"
-        onClick={() => setVisibleMenu(state => !state)} >
+        onClick={() => setVisibleMenu(state => !state)}>
         <Clip />
       </IconButton>
       <SelectionList
         style={{ 
           position: 'absolute', 
-          top: '-150px', 
+          top: '-140px', 
         }}
         id="teste"
         visible={visibleMenu}
         onHide={() => setVisibleMenu(false)}
-        items={
-          [
-            { label: 'Knowledge Sources', icon: <KnowledgeSource />, onClick: () => widget.set('panel', 'ks') },
-            { label: 'Stacks AI', icon: <Stack />, onClick: () => widget.set('panel', 'stack') },
-            { label: 'Spots', icon: <Spaces />, onClick: () => widget.set('panel', 'workspace') },
-          ]
-        }
+        items={listItems}
       />
     </>
   )

package/src/views/MessageInput/styled.ts

@@ -2,7 +2,7 @@ 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
@@ -12,15 +12,24 @@ export const SelectionBarWrapper = styled.div<{$inputFocused?: boolean}>`
   justify-content: space-between;
   position: relative;
   padding: 8px;
-  padding-top: 6px;
   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]}
+    background-color: ${theme.color.light[500]};
   }
+  
   ul { 
     list-style: none;
     padding: 0;
@@ -45,11 +54,8 @@ export const SelectionBarWrapper = styled.div<{$inputFocused?: boolean}>`
 export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
   display: flex;
   flex-direction: column;
-  margin-top: 8px;
 
   > .info-bar {
-    padding-top: 8px;
-    /* padding-bottom: -3px; */
     position: relative;
     overflow: hidden;
 
@@ -69,14 +75,12 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
       top: 0;
       left: 0;
       right: 0;
-      /* border-top-left-radius: 10px;
-      border-top-right-radius: 10px; */
       height: ${INFO_BAR_HEIGHT}px;
-      padding: 6px 8px 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]};
 
@@ -162,18 +166,12 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
     button {
       border: none;
       border-radius: 2px;
-      opacity: 0.6;
+      /* opacity: 0.6; */
       transition: background-color 0.2s, opacity 0.2s;
-      background-color: transparent;
+      /* background-color: transparent; */
       padding: 0;
 
-      svg {
-        fill: ${theme.color.light[700]};
-        width: 16px;
-        height: 16px;
-      }
-
-      &:hover {
+      /* &:hover {
         background-color: ${theme.color.light[500]};
       }
 
@@ -184,7 +182,7 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
         }
         svg {
           fill: ${theme.color.inverse.contrastText};
-        }
+        } 
       }
 
       &.expand {
@@ -197,7 +195,7 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
         svg {
           transform: rotate(180deg);
         }
-      } 
+      }  */
 
       &.agent {
         border-radius: 50%; 

package/dist/utils/agent.d.ts

@@ -1,2 +0,0 @@
-export declare const isAgentDefault: (agentSlug?: string) => agentSlug is "stk_code_buddy";
-//# sourceMappingURL=agent.d.ts.map

package/dist/utils/agent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"agent.d.ts","sourceRoot":"","sources":["../../src/utils/agent.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,eAAgB,MAAM,kCAAmC,CAAA"}

package/dist/utils/agent.js

@@ -1,2 +0,0 @@
-export const isAgentDefault = (agentSlug) => agentSlug === 'stk_code_buddy';
-//# sourceMappingURL=agent.js.map

package/dist/utils/agent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"agent.js","sourceRoot":"","sources":["../../src/utils/agent.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,SAAkB,EAAE,EAAE,CAAC,SAAS,KAAK,gBAAgB,CAAA"}

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