@stack-spot/ai-chat-widget 1.6.0 → 1.7.0-beta.1

package/src/app-metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.6.0",
-  "date": "Tue Jan 14 2025 23:31:13 GMT+0000 (Coordinated Universal Time)",
+  "version": "1.7.0-beta.1",
+  "date": "Tue Jan 21 2025 10:16:13 GMT-0300 (Brasilia Standard Time)",
   "dependencies": [
     {
       "name": "@stack-spot/app-metadata",
@@ -89,15 +89,15 @@
     },
     {
       "name": "@citric/core",
-      "version": "6.2.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))"
+      "version": "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))"
     },
     {
       "name": "@citric/icons",
-      "version": "5.7.7(react@18.2.0)"
+      "version": "5.9.0(react@18.2.0)"
     },
     {
       "name": "@citric/ui",
-      "version": "6.1.2(@citric/core@6.2.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.7.7(react@18.2.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))"
+      "version": "6.5.5(@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.9.0(react@18.2.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))"
     },
     {
       "name": "@monaco-editor/react",
@@ -105,7 +105,7 @@
     },
     {
       "name": "@stack-spot/portal-components",
-      "version": "2.8.1(@citric/core@6.2.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.7.7(react@18.2.0))(@citric/ui@6.1.2(@citric/core@6.2.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.7.7(react@18.2.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)))(@stack-spot/portal-theme@1.1.0(@citric/core@6.2.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.8.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.9.0(react@18.2.0))(@citric/ui@6.5.5(@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.9.0(react@18.2.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)))(@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",
@@ -113,7 +113,7 @@
     },
     {
       "name": "@stack-spot/portal-theme",
-      "version": "1.1.0(@citric/core@6.2.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))"
+      "version": "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))"
     },
     {
       "name": "@stack-spot/portal-translate",

package/src/components/Selector/index.tsx

@@ -0,0 +1,245 @@
+import { IconBox, Image, Text } from '@citric/core'
+import { Agent, ExternalLink } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { useKeyboardControls } from '@stack-spot/portal-components'
+import { VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCurrentChatState } from '../../context/hooks'
+import { getUrlToStackSpotAI } from '../../utils/url'
+import { Fading } from '../Fading'
+import { FallbackBoundary } from '../FallbackBoundary'
+import { SelectorBox } from './styled'
+
+const sections = [undefined, 'personal', 'workspace', 'account', 'shared'] as const
+
+type SelectorShortcut = '/' | '@'
+
+interface Item {
+  id: string,
+  slug: string,
+  description: string,
+  visibility_level: VisibilityLevelEnum,
+}
+
+interface ListProps<T> {
+  filter?: string,
+  visibility?: VisibilityLevelEnum,
+  selectorConfig: SelectorConfig<T>,
+  onSelect: (item: T) => void,
+}
+
+interface ListItemProps<T> extends ListProps<T> {
+  item: T,
+}
+
+interface ContentProps<T> {
+  filter?: string,
+  onClose: () => void,
+  inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement>,
+  selectorConfig: SelectorConfig<T>,
+}
+
+interface SelectorConfig<T> {
+  resourceName: string,
+  shortcut: SelectorShortcut,
+  icon: React.ReactElement,
+  regex: RegExp,
+  url: string,
+  imageProp?: keyof T,
+  data: () => T[],
+  isEnabled: boolean,
+  onSelect: (item: T) => void,
+}
+
+interface SelectorProps<T> {
+  selectorConfig: SelectorConfig<T>,
+  inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement>,
+}
+
+const ListItem = <T extends Item>({ item, selectorConfig, onSelect }: ListItemProps<T>) => {
+  const t = useTranslate(dictionary)
+  const { shortcut, url } = selectorConfig
+  const hasImage = !!selectorConfig.imageProp
+  const image = item[selectorConfig.imageProp!] as string
+  const linkTitle = t.open.replace('%s', item.slug)
+
+  return (
+    <li>
+      {!!hasImage && (image ? <Image width="32" height="32" radius="full" src={image} /> : <IconBox size="md"><Agent /></IconBox>)}
+      <button
+        className="selector"
+        onClick={() => onSelect(item)}
+        onKeyDown={(e) => e.key === 'Enter' && e.preventDefault()}
+        onFocus={(e) => e.target.closest('li')?.classList.add('focus')}
+        onBlur={(e) => e.target.closest('li')?.classList.remove('focus')}
+      >
+        <p className="selector-title">{!hasImage ? shortcut : ''}{item.slug}</p>
+        <p className="selector-description">{item.description}</p>
+      </button>
+      <IconButton as="a" title={linkTitle} aria-label={linkTitle} href={`${getUrlToStackSpotAI()}${url}${item.slug}`} target="_blank">
+        <ExternalLink />
+      </IconButton>
+    </li>
+  )
+}
+
+const List = <T extends Item>({ selectorConfig, filter, visibility, onSelect }: ListProps<T>) => {
+  const t = useTranslate(dictionary)
+  const items = selectorConfig.data()
+  const filtered = useMemo(() => {
+    if (!filter && !visibility) return items
+    const lowerFilter = filter?.toLowerCase() ?? ''
+
+    return items.filter(item =>
+      item.slug.toLocaleLowerCase().startsWith(lowerFilter) && (!visibility || item?.visibility_level?.toLowerCase() === visibility),
+    )
+  }, [filter, items, visibility])
+
+  if (!items.length) return <Text className="empty" colorScheme="light.700">{t.noData.replace('%', selectorConfig.resourceName)}</Text>
+  if (!filtered.length)
+    <Text className="empty" colorScheme="light.700">{t.noResults.replace('%', selectorConfig.resourceName)}</Text>
+
+  return (
+    <ul className="selector-list">
+      {filtered.map((item) => (
+        <ListItem key={item.id} item={item} selectorConfig={selectorConfig} onSelect={onSelect} />
+      ))}
+    </ul>
+  )
+}
+
+const SelectorContent = ({ filter, onClose, selectorConfig }: ContentProps<any>) => {
+  const t = useTranslate(dictionary)
+  const ref = useRef<HTMLDivElement>(null)
+  const [visibility, setVisibility] = useState<VisibilityLevelEnum | undefined>()
+  const { resourceName, icon, onSelect } = selectorConfig
+  const onSelectItem = useCallback((slug: string) => {
+    onSelect(slug)
+    onClose()
+  }, [])
+
+  useKeyboardControls({
+    querySelectors: '.tabs button, button.selector',
+    disableTabBehavior: true,
+    onPressEscape: onClose,
+    onPressArrowLeft: () => (ref.current?.querySelector('.tabs button.active') as HTMLElement)?.focus(),
+    onPressArrowRight: () => (ref.current?.querySelector('button.selector') as HTMLElement)?.focus(),
+    ref,
+  }, [])
+
+  function createSectionItem(action: VisibilityLevelEnum | undefined) {
+    return (
+      <li key={action ?? 'all'}>
+        <button className={visibility === action ? 'active' : ''} onFocus={() => setVisibility(action)}>
+          {t[action || 'all']}
+        </button>
+      </li>
+    )
+  }
+
+  return (
+    <div ref={ref}>
+      <header>
+        <IconBox>{icon}</IconBox>
+        <Text as="h3" className="uppercase"> {resourceName} </Text>
+      </header>
+      <div className="body">
+        <ul className="tabs">{sections.map(createSectionItem)}</ul>
+        <FallbackBoundary message={t.error.replace('%s', selectorConfig.resourceName)} mini>
+          <List filter={filter} visibility={visibility} selectorConfig={selectorConfig} onSelect={onSelectItem} />
+        </FallbackBoundary>
+      </div>
+    </div>
+  )
+}
+
+export const Selector = <T,>({ inputRef, selectorConfig }: SelectorProps<T>) => {
+  const { shortcut, regex, isEnabled } = selectorConfig
+  const [isClosed, setClosed] = useState(false)
+  const selectorRef = useRef<HTMLDivElement>(null)
+  const value = useCurrentChatState('nextMessage') ?? ''
+
+  const filter = useMemo(() => value === shortcut || regex.test(value) ? value.substring(1) : undefined, [value])
+  const shouldRender = isEnabled && filter !== undefined && !isClosed
+
+  // Resets the closed state whenever the message input is cleared
+  useEffect(() => {
+    if (!value) setClosed(false)
+  }, [value])
+
+  // Creates the following behavior while the user types in the message input:
+  // auto-complete on tab; move focus to the resource panel on press up or down; and close the resource panel on esc.
+  useEffect(() => {
+    function getFirst() {
+      return selectorRef.current?.querySelector('.selector') as HTMLElement | null
+    }
+
+    function onKeyDown(event: Event) {
+      const key = (event as KeyboardEvent).key
+      if (!selectorRef.current) return
+      if (key === 'Tab') {
+        getFirst()?.click()
+        event.preventDefault()
+      } else if (key === 'ArrowDown' || key === 'ArrowUp') {
+        getFirst()?.focus()
+        event.preventDefault()
+      }
+      if (key === 'Escape') {
+        setClosed(true)
+      }
+    }
+
+    inputRef.current?.addEventListener('keydown', onKeyDown)
+    return () => inputRef.current?.removeEventListener('keydown', onKeyDown)
+  }, [])
+
+  // Closes the panel when the user clicks outside the panel or the message input.
+  useEffect(() => {
+    if (!shouldRender) return
+    function onClickOut(e: Event) {
+      const target = e.target as HTMLElement | null
+      if (!selectorRef.current?.contains(target) && !inputRef.current?.contains(target)) setClosed(true)
+    }
+    document.addEventListener('click', onClickOut)
+    return () => document.removeEventListener('click', onClickOut)
+  }, [shouldRender])
+
+  return (
+    <SelectorBox>
+      <Fading visible={shouldRender} ref={selectorRef} className="box-selector">
+        <SelectorContent
+          selectorConfig={selectorConfig}
+          filter={filter}
+          onClose={() => setClosed(true)}
+          inputRef={inputRef}
+        />
+      </Fading>
+    </SelectorBox>
+  )
+}
+
+const dictionary = {
+  en: {
+    all: 'All',
+    personal: 'Personal',
+    account: 'Account',
+    shared: 'Shared',
+    workspace: 'Workspace',
+    error: 'Could not load the %ss.',
+    noData: 'You don\'t have any %s yet.',
+    noResults: 'There are no %ss to show here.',
+    open: 'Open this %s settings in a new tab.',
+  },
+  pt: {
+    all: 'Todos',
+    personal: 'Pessoal',
+    account: 'Conta',
+    shared: 'Compartilhado',
+    workspace: 'Workspace',
+    error: 'Não foi possível carregar os %ss.',
+    noData: 'Você ainda não possui %ss.',
+    noResults: 'Não há %ss para mostrar aqui.',
+    open: 'Abra as configurações deste %s em uma nova aba.',
+  },
+} satisfies Dictionary

package/src/components/Selector/styled.ts

@@ -0,0 +1,145 @@
+import { theme } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+
+
+export const SelectorBox = styled.div`
+  .box-selector  {
+    position: absolute;
+    border-radius: 4px;
+    border: 1px solid ${theme.color.light[600]};
+    background-color: ${theme.color.light[400]};
+    box-shadow: 0px 2px 16px 0px #0000005C;
+    display: flex;
+    flex-direction: column;
+    width: 480px;
+    bottom: 74px;
+
+    .loading, .error {
+      padding-bottom: 26px;
+      p {
+        width: 200px;
+        text-align: center;
+        line-height: 20px;
+      }
+    }
+
+    .empty {
+      padding-bottom: 26px;
+      width: 200px;
+      text-align: center;
+      line-height: 20px;
+      margin: auto;
+    }
+
+    header {
+      display: flex;
+      flex-direction: row;
+      gap: 8px;
+      align-items: center;
+      padding: 8px;
+      margin-bottom: 4px;
+      font-family: 'San Francisco';
+      text-transform: uppercase;
+      font-weight: 500;
+      font-size: 11px;
+      background-color: ${theme.color.light[500]};
+    }
+
+    .body {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    ul.tabs {
+      display: flex;
+      flex-direction: column;
+
+      li {
+        display: flex;
+        flex-direction: column;
+      }
+
+      button {
+        box-sizing: border-box;
+        color: ${theme.color.light[700]};
+        text-align: left;
+        padding: 10px;
+        font-weight: 600;
+        font-size: 12px;
+        transition: background-color 0.3s;
+        border-left: 1px solid transparent;
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+        outline: none;
+
+        &:hover, &.active, &:focus {
+          background-color: ${theme.color.light[600]};
+        }
+
+        &.active {
+          border-left: 1px solid ${theme.color.light.contrastText};
+          color: ${theme.color.light.contrastText};
+        }
+      }
+    }
+
+    ul.selector-list {
+      align-self: stretch;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      overflow-y: auto;
+      flex: 1;
+      max-height: 170px;
+
+      li {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+        padding: 8px;
+        border-radius: 4px;
+
+        &:hover, &.focus {
+          background-color: ${theme.color.light[600]};
+        }
+
+        button.selector {
+          flex: 1;
+          border: none;
+          text-align: left;
+          background-color: transparent;
+          text-align: left;
+          outline: none;
+          overflow: hidden;
+          cursor: pointer;
+          
+        .selector-title {
+            font-size: 11px;
+            margin: 0 0 4px 0;
+            color: ${theme.color.light.contrastText};
+            text-transform: uppercase;
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+
+         .selector-description {
+            color: ${theme.color.light[700]};
+            font-size: 12px;
+            margin: 0;
+          }
+        }
+      }
+    }
+  }
+`

package/src/regex.ts

@@ -1 +1,2 @@
 export const quickCommandRegex = /^\/[\w\d-_]+$/
+export const agentRegex = /^@[\w\d-_]+$/

package/src/views/Agents/AgentsTab.tsx

@@ -1,5 +1,5 @@
-import { Button, Text } from '@citric/core'
-import { Search } from '@citric/icons'
+import { Button, IconBox, Text } from '@citric/core'
+import { Agent, Search } from '@citric/icons'
 import { Placeholder } from '@stack-spot/portal-components/Placeholder'
 import { MiniLogo } from '@stack-spot/portal-components/svg'
 import { agentClient } from '@stack-spot/portal-network'
@@ -20,7 +20,7 @@ export const AgentsTab = ({ visibility }: { visibility: VisibilityLevel | 'BUILT
   const [filter, setFilter] = useState('')
   const defaultAgent = useMemo(() => ({
     id: '',
-    name: 'Stackspot AI',
+    name: 'StackSpot AI',
     description: t.defaultAgentDescription,
     llm_config: { model_slug: 'gpt4o' },
   } as AgentResponse), [])
@@ -54,7 +54,7 @@ export const AgentsTab = ({ visibility }: { visibility: VisibilityLevel | 'BUILT
           onChange={setValue}
           renderLabel={({ name, avatar, id }) => (
             <AgentLabel>
-              {id ? (avatar && <img src={avatar} />) : <MiniLogo />}
+              {id ? (avatar ? <img src={avatar} /> :  <IconBox size="xs"><Agent /></IconBox>) : <MiniLogo />}
               <Text>{name}</Text>
             </AgentLabel>
           )}

package/src/views/Chat/AgentInfo.tsx

@@ -15,6 +15,6 @@ export const AgentInfo = ({ agent }: Props) => (
       ? <img src={agent.image} className="custom-agent-image" />
       : <div className="default-image-wrapper"><MiniLogo className="agent-image" /></div>
     }
-    <Text appearance="body2">{agent?.label || 'Stackspot AI'}</Text>
+    <Text appearance="body2">{agent?.label || 'StackSpot AI'}</Text>
   </>
 )

package/src/views/Home/CustomAgent.tsx

@@ -1,5 +1,5 @@
-import { Text } from '@citric/core'
-import { MiniLogo } from '@stack-spot/portal-components/svg'
+import { IconBox, Text } from '@citric/core'
+import { Agent } from '@citric/icons'
 import { agentClient } from '@stack-spot/portal-network'
 import { theme } from '@stack-spot/portal-theme'
 import { useMemo } from 'react'
@@ -31,7 +31,7 @@ export const CustomAgent = () => {
 
   return (
     <HomeBox className="home-page custom-agent">
-      {image ? <img src={image} className="avatar" /> : <MiniLogo className="avatar" />}
+      {image ? <img src={image} className="avatar" /> : <IconBox className="avatar"><Agent /></IconBox>}
       <Text appearance="h3">{label}</Text>
       <div className="shortcuts">{suggestions?.length ? suggestions : null}</div>
     </HomeBox>

package/src/views/Home/styled.ts

@@ -32,7 +32,7 @@ export const HomeBox = styled.div`
     }
   }
 
-  .avatar {
+  .avatar, .avatar svg {
     width: 74px;
     height: 74px;
     border-radius: 50%;

package/src/views/MessageInput/AgentSelector.tsx

@@ -0,0 +1,35 @@
+import { Agent } from '@citric/icons'
+import { agentClient } from '@stack-spot/portal-network'
+import { AgentResponse } from '@stack-spot/portal-network/api/agent'
+import { useCallback } from 'react'
+import { Selector } from '../../components/Selector'
+import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
+import { agentRegex } from '../../regex'
+
+export const AgentSelector = ({ inputRef }: { inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement> }) => {
+  const chat = useCurrentChat()
+  const onSelectItem = useCallback((agent: AgentResponse) => {
+    const newValue = `@${agent.slug}`
+    chat.set('nextMessage', undefined)
+    chat.set('agent', { id: agent.id, label: agent.slug, image: agent.avatar, builtIn: false })
+
+    if (!inputRef.current) return
+    inputRef.current.value = newValue
+    inputRef.current.focus()
+  }, [])
+
+  return <Selector
+    inputRef={inputRef}
+    selectorConfig={{
+      resourceName: 'Agent',
+      shortcut: '@',
+      icon: <Agent />,   
+      imageProp: 'avatar',
+      regex: agentRegex,
+      url: '/agent/',
+      data: () =>  agentClient.agents.useQuery({}),
+      isEnabled: useCurrentChatState('features').agent,
+      onSelect: onSelectItem,
+    }}
+  />
+}

package/src/views/MessageInput/ButtonAgent.tsx

@@ -0,0 +1,36 @@
+import { Flex, IconBox } from '@citric/core'
+import { Agent, TimesMini } from '@citric/icons'
+import { IconButton, Tooltip } from '@citric/ui'
+import { MiniLogo } from '@stack-spot/portal-components/svg'
+import { useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
+import { useMessageInputDictionary } from './dictionary'
+
+export const ButtonAgent = () => {
+  const t = useMessageInputDictionary()
+  const widget = useWidget()
+  const chat = useCurrentChat()
+  const agent = useCurrentChatState('agent')
+  const features = useCurrentChatState('features')
+
+  return (
+    <div className="button-group">
+      {features.agent && (
+        <div className="group-agent">
+          <IconButton aria-label={t.agent} title={t.agent} className="agent" onClick={() => widget.set('panel', 'agent')}>
+            <MiniLogo />
+          </IconButton>
+          {agent?.id &&
+            <Tooltip text={t.remove} >
+              <IconButton aria-label={t.remove} className="agent agent-selected" onClick={() => chat.set('agent', undefined)}>
+                {agent?.image ? <img src={agent.image} className="image" /> : <IconBox className="image" size="xs"><Agent /></IconBox>}
+                <Flex className="icon-remove" alignContent="center" justifyContent="center">
+                  <TimesMini />
+                </Flex>
+              </IconButton>
+            </Tooltip>
+          }
+        </div>
+      )}
+    </div>
+  )
+}

package/src/views/MessageInput/ButtonGroup.tsx

@@ -1,6 +1,5 @@
 import { ChevronRight, Code, KnowledgeSource, Send, Stack, Times, Workspace } from '@citric/icons'
 import { IconButton } from '@citric/ui'
-import { MiniLogo } from '@stack-spot/portal-components/svg'
 import { listToClass } from '@stack-spot/portal-theme'
 import { useEffect, useRef } from 'react'
 import { useCurrentChatState, useWidget } from '../../context/hooks'
@@ -31,16 +30,15 @@ interface ButtonGroupProps {
 
 /**
  * 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 agent, the stack, etc.
+ * 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 agent = useCurrentChatState('agent')
   const features = useCurrentChatState('features')
-  const hasFeatureButtons = features.agent || features.workspace || features.knowledgeSource || features.stack || features.editor
+  const hasFeatureButtons = features.workspace || features.knowledgeSource || features.stack || features.editor
 
   useEffect(
     () => {
@@ -52,7 +50,7 @@ export const ButtonGroup = ({ onSend, onCancel, expanded, setExpanded, isLoading
       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.agent, features.workspace, features.knowledgeSource, features.stack, features.editor],
+    [features.workspace, features.knowledgeSource, features.stack, features.editor],
   )
 
   return (
@@ -63,11 +61,6 @@ export const ButtonGroup = ({ onSend, onCancel, expanded, setExpanded, isLoading
           className={listToClass(['feature-buttons', expanded && 'expanded'])}
           style={{ width: expanded ? featureButtonsWidth.current : 0 }}
         >
-          {features.agent && (
-            <IconButton aria-label={t.agent} title={t.agent} className="agent" onClick={() => widget.set('panel', 'agent')}>
-              {agent?.image ? <img src={agent.image} /> : <MiniLogo />}
-            </IconButton>
-          )}
           {features.workspace && (
             <IconButton aria-label={t.workspace} title={t.workspace} onClick={() => widget.set('panel', 'workspace')}>
               <Workspace />