@stack-spot/ai-chat-widget 1.13.2-beta.0 → 1.14.0-beta.1

package/src/index.ts

@@ -11,5 +11,5 @@ export { ChatState } from './state/ChatState'
 export type { MessageInterceptor } from './state/ChatState'
 export { ChatTabsController } from './state/ChatTabsController'
 export { ObservableState } from './state/ObservableState'
-export type { Labeled, LabeledWithImage } from './state/types'
+export type { Labeled, LabeledAgent } from './state/types'
 export { WidgetState } from './state/WidgetState'

package/src/state/ChatEntry.ts

@@ -1,7 +1,8 @@
 import { OneOfColorSchemes } from '@citric/core'
+import { ChatStep } from '@stack-spot/portal-network'
 import { ColorPaletteName } from '@stack-spot/portal-theme'
 import { pull } from 'lodash'
-import { LabeledWithImage } from './types'
+import { LabeledAgent } from './types'
 
 export interface ActionDataClick {
   name?: string, 
@@ -57,24 +58,11 @@ export interface KnowledgeSource {
   documentId: string,
 }
 
-export interface AgentTool {
+export interface ChatTool {
   id: string,
-  name: string,
-  description?: string,
   image?: string,
-  duration?: number,
-  input?: string,
-  output?: string,
-}
-
-export interface ChatEntryStep {
-  id: string,
-  type: 'planning' | 'step' | 'answer',
-  input?: string,
-  output?: string,
-  status: 'pending' | 'running' | 'success' | 'error',
-  duration?: number,
-  tools?: AgentTool[],
+  name: string,
+  description: string,
 }
 
 export interface TextChatEntry {
@@ -109,9 +97,9 @@ export interface TextChatEntry {
    */
   updated?: string,
   /**
-   * The agent who wrote the message. Undefined for the default agent or if the agentType is "user".
+   * The agent who wrote the message. Undefined for the agentType is "user".
    */
-  agent?: LabeledWithImage,
+  agent?: LabeledAgent,
   /**
    * The unique identifier of the message.
    */
@@ -131,7 +119,11 @@ export interface TextChatEntry {
   /**
    * This entry may contain steps. If so, specify them in this array.
    */
-  steps?: ChatEntryStep[],
+  steps?: ChatStep[],
+  /**
+   * If any tool was used to generate the response, its id is returned in this list.
+   */
+  tools?: string[],
   /*
    * Options for radio, checkbox or button type.
    */

package/src/state/ChatState.ts

@@ -4,7 +4,7 @@ import { AbortedError } from '../AbortedError'
 import { ChatFeatures, getFeaturesWithDefaults } from '../features'
 import { ChatEntry } from './ChatEntry'
 import { ObservableState } from './ObservableState'
-import { Labeled, LabeledWithImage } from './types'
+import { Labeled, LabeledAgent } from './types'
 
 export interface ChatPropertiesWithOptionalFeatures {
   /**
@@ -14,7 +14,7 @@ export interface ChatPropertiesWithOptionalFeatures {
   /**
    * The current AI agent.
    */
-  agent?: LabeledWithImage & { builtIn: boolean, slug?: string },
+  agent?: LabeledAgent,
   /**
    * The current workspace.
    */

package/src/state/WidgetState.ts

@@ -13,15 +13,15 @@ export interface WidgetProperties {
   /**
    * Current content of the right panel. Undefined for closed right panel.
    */
-  panel?: 'stack' | 'workspace' | 'agent' | 'ks' | 'editor' | 'history' | 'ks-details' | 'tools',
+  panel?: 'stack' | 'workspace' | 'agent' | 'ks' | 'editor' | 'history' | 'ks-details' | 'steps' | 'tools',
   /**
    * KS to use when the right panel "ks-details" is open.
    */
   currentKSInPanel?: { name: string, slug: string, score: number, documentId: string },
   /**
-   * The message to show in the tools panel.
+   * The message to show in the tools panel or the steps panel.
    */
-  currentMessageInToolsPanel?: { chatId: string, messageId: number },
+  currentMessageInPanel?: { chatId: string, messageId: number },
   /**
    * Whether or not the widget is in its minimized version.
    */
@@ -58,8 +58,6 @@ interface Options {
   chatTabs?: ChatTabsController,
 }
 
-const untitledChatPrefix = 'Chat '
-
 /**
  * Holds the full state of the AI Chat Widget.
  * 
@@ -90,16 +88,6 @@ export class WidgetState extends ObservableState<WidgetProperties> {
     this.createChat()
   }
 
-  private getNextUntitledChatIndex() {
-    let max = 0
-    for (const chat of this.chatTabs.getAll()) {
-      const [, match] = chat.get('label').match(`${untitledChatPrefix}(\\d+)`) ?? []
-      const index = parseInt(match)
-      if (index > max) max = index
-    }
-    return max + 1
-  }
-
   /**
    * Utility function for adding a new chat to the chat tabs. This also selects the new tab.
    * @param properties the chat properties (initial state).
@@ -109,7 +97,7 @@ export class WidgetState extends ObservableState<WidgetProperties> {
   createChat({ label, ...properties }: Partial<ChatPropertiesWithOptionalFeatures> = {}, entries: ChatEntry[] = []) {
     const chat = new ChatState({
       id: ulid(),
-      initial: { label: label || `${untitledChatPrefix}${this.getNextUntitledChatIndex()}`, features: this.chatFeatures, ...properties },
+      initial: { label: label || 'Chat', features: this.chatFeatures, ...properties },
       entries,
       interceptors: this.interceptors,
       untitled: !label,

package/src/state/types.ts

@@ -1,8 +1,11 @@
+
 export interface Labeled {
   id: string,
   label: string,
 }
 
-export interface LabeledWithImage extends Labeled {
+export interface LabeledAgent extends Labeled {
   image?: string,
+  builtIn?: boolean,
+  slug?: string,
 }

package/src/utils/agent.ts

@@ -1 +1 @@
-export const isAgentDefault = (agentSlug?: string) => agentSlug === 'stk_code_buddy'
+export const isAgentDefault = (agentSlug?: string) => agentSlug === 'stk_code_buddy'

package/src/utils/tools.ts

@@ -0,0 +1,11 @@
+import { BuiltinToolResponse, ToolkitsInAgentResponse } from '@stack-spot/portal-network/api/agent'
+
+export type ToolWithImage = BuiltinToolResponse & { id: string, image?: string }
+
+export function toolById(id: string, toolkits: ToolkitsInAgentResponse | undefined): ToolWithImage | undefined {
+  for (const toolkit of toolkits?.builtins ?? []) {
+    for (const tool of toolkit.tools ?? []) {
+      if (tool.id === id) return { ...tool, id, image: toolkit.image_url }
+    }
+  }
+}

package/src/views/Agents/AgentDescription.tsx

@@ -2,6 +2,7 @@ import { Text } from '@citric/core'
 import { Badge, Skeleton } from '@citric/ui'
 import { agentClient } from '@stack-spot/portal-network'
 import { useMemo } from 'react'
+import { ToolBadge } from '../../components/ToolBadge'
 import { useAgentsDictionary } from './dictionary'
 import { AgentDescriptionBox } from './styled'
 
@@ -28,6 +29,15 @@ export const AgentDescription = ({ agentId, llm, description, numberOfKnowledgeS
     }
     return loadingKS
   }, [numberOfKnowledgeSources])
+  const tools = useMemo(() => {
+    const result: React.ReactElement[] = []
+    for (const kit of agent?.toolkits?.builtins ?? []) {
+      for (const tool of kit.tools ?? []) {
+        result.push(<li key={tool.id}><ToolBadge name={tool.name || tool.id || 'unknown'} image={kit.image_url} /></li>)
+      }
+    }
+    return result
+  }, [agent])
 
   return (
     <AgentDescriptionBox>
@@ -39,6 +49,10 @@ export const AgentDescription = ({ agentId, llm, description, numberOfKnowledgeS
         <Text appearance="microtext1" className="title">Knowledge sources</Text>
         <ul>{isLoading ? skeleton : knowledgeSources}</ul>
       </section>}
+      {!!tools.length && <section>
+        <Text appearance="microtext1" className="title">{t.tools}</Text>
+        <ul>{tools}</ul>
+      </section>}
       {llm && <section>
         <Text appearance="microtext1" className="title">LLM</Text>
         <Badge palette="orange" appearance="square">{llm}</Badge>

package/src/views/Agents/AgentsTab.tsx

@@ -20,24 +20,19 @@ export const AgentsTab = ({ visibility }: { visibility: VisibilityLevel | 'BUILT
   const chat = useCurrentChat()
   const [filter, setFilter] = useState('')
   const agentsBuiltIn = agentClient.publicAgents.useQuery({})
-  const defaultAgent = agentsBuiltIn.find((agent) => isAgentDefault(agent.slug))
+  const agentDefault = agentsBuiltIn.find((agent) => isAgentDefault(agent.slug))
   const agents = visibility === 'BUILT-IN' ? agentsBuiltIn : agentClient.agents.useQuery({ visibility })
   const [value, setValue] = useState<AgentResponse | undefined>(
-    chat.get('agent') ? agents.find(a => a.id === chat.get('agent')?.id) : defaultAgent,
+    chat.get('agent') ? agents.find(a => a.id === chat.get('agent')?.id) : agentDefault,
   )
   const filtered = useMemo(
-    () => {      
-      return filter ? agents.filter(a => a === value || a.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : agents
-    },
+    () => filter ? agents.filter(a => a === value || a.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : agents,
     [agents, filter, value],
   )
 
   function submit() {
     if (value) {
-      chat.set('agent',  !isAgentDefault(value.slug)
-        ? { id: value.id, label: value.name, image: value.avatar, builtIn: visibility === 'BUILT-IN', slug: value.slug } 
-        : undefined
-      )
+      chat.set('agent', { id: value.id, label: value.name, image: value.avatar, builtIn: visibility === 'BUILT-IN', slug: value.slug })
     }
     close()
   }
@@ -53,7 +48,7 @@ export const AgentsTab = ({ visibility }: { visibility: VisibilityLevel | 'BUILT
           onChange={setValue}
           renderLabel={({ name, avatar, id }) => (
             <AgentLabel>
-              {id ? (avatar ? <img src={avatar} /> :  <IconBox size="xs"><Agent /></IconBox>) : <MiniLogo />}
+              {id ? (avatar ? <img src={avatar} /> : <IconBox size="xs"><Agent /></IconBox>) : <MiniLogo />}
               <Text>{name}</Text>
             </AgentLabel>
           )}

package/src/views/Agents/dictionary.ts

@@ -15,6 +15,7 @@ const dictionary = {
     noDataDescription: 'Use the tabs above to try other categories or use the AI portal to create new agents.',
     defaultAgentDescription: 'The StackSpot CodeGen is an advanced artificial intelligence agent designed to optimize and accelerate software development. Integrated directly into your integrated development environment, StackSpot CodeGen offers real-time code suggestions, helping developers write high-quality code more efficiently. With robust features such as creating Stacks AI, customized knowledge sources, and quick commands, StackSpot CodeGen contextualizes your development needs to provide the best answers and code suggestions.',
     description: 'Description',
+    tools: 'Tools',
   },
   pt: {
     title: 'Agentes',
@@ -30,6 +31,7 @@ const dictionary = {
     noDataDescription: 'Use as abas acima para tentar outras categorias ou use o Portal AI para criar novos agentes.',
     defaultAgentDescription: 'O StackSpot CodeGen é um agente de inteligência artificial avançado projetado para otimizar e acelerar o desenvolvimento de software. Integrado diretamente ao seu ambiente de desenvolvimento, o StackSpot CodeGen oferece sugestões de código em tempo real, ajudando os desenvolvedores a escreverem código de alta qualidade de forma mais eficiente. Com recursos robustos, como a criação de Stacks AI, Knowledge Sources personalizadas e comandos rápidos, o StackSpot CodeGen contextualiza suas necessidades de desenvolvimento para fornecer as melhores respostas e sugestões de código.',
     description: 'Descrição',
+    tools: 'Ferramentas',
   },
 } satisfies Dictionary
 

package/src/views/Agents/styled.ts

@@ -30,7 +30,7 @@ export const AgentDescriptionBox = styled.div`
       border-bottom: none;
     }
 
-    .title {
+    > .title {
       display: block;
       margin-bottom: 6px;
     }

package/src/views/Chat/AgentInfo.tsx

@@ -1,9 +1,9 @@
-import { Text } from '@citric/core'
-import { MiniLogo } from '@stack-spot/portal-components/svg'
-import { LabeledWithImage } from '../../state/types'
+import { IconBox, Text } from '@citric/core'
+import { Agent } from '@citric/icons'
+import { LabeledAgent } from '../../state/types'
 
 interface Props {
-  agent?: LabeledWithImage,
+  agent?: LabeledAgent,
 }
 
 /**
@@ -13,8 +13,8 @@ export const AgentInfo = ({ agent }: Props) => (
   <>
     {agent?.image
       ? <img src={agent.image} className="custom-agent-image" />
-      : <div className="default-image-wrapper"><MiniLogo className="agent-image" /></div>
+      : <IconBox className="default-image-wrapper" colorIcon="light.700"><Agent className="agent-image" /></IconBox>
     }
-    <Text appearance="body2">{agent?.label || 'StackSpot AI CodeGen'}</Text>
+    <Text appearance="body2">{agent?.label}</Text>
   </>
 )

package/src/views/Chat/ChatMessage.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable semi */
 import { Box, Button, Checkbox, Flex, IconBox, Input, Label, Radio, Text } from '@citric/core'
-import { Copy, Dislike, DislikeFill, Like, LikeFill, TimesCircle } from '@citric/icons'
+import { Cog, Copy, Dislike, DislikeFill, Like, LikeFill, TimesCircle } from '@citric/icons'
 import { Avatar, 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'
 import { debounce } from 'lodash'
@@ -9,9 +10,11 @@ import { Dispatch, useCallback, useEffect, useMemo, useRef, useState } from 'rea
 import { PhoneInput } from 'react-international-phone'
 import 'react-international-phone/style.css'
 import { Markdown } from '../../components/Markdown'
+import { StackedBadge } from '../../components/StackedBadge'
 import { useChatEntry, useCurrentChat, useWidget } from '../../context/hooks'
 import { ChatEntry, SerializableAction, TextChatEntry } from '../../state/ChatEntry'
 import { useDateFormatter } from '../../utils/date'
+import { toolById } from '../../utils/tools'
 import { AgentInfo } from './AgentInfo'
 import { useChatScrollToBottomEffect } from './chat-scroll'
 import { onCopyAll, onCopyCode, onLikeOrDislike } from './events'
@@ -82,7 +85,7 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
             {option.hasInput && option.value && labels.findIndex((label) => label === option.value) !== -1 &&
               <Box w={4} ml={2}>
                 <Input name={entry.name} onChange={(data) => setValue([data.target.value])} 
-                  required={true} />
+                  required={true} sx={{ height: '30px' }} />
               </Box>
             }
           </Flex>
@@ -120,7 +123,7 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
           {option.hasInput && option.value && labels.findIndex((label) => label === option.value)!== -1 &&
             <Box w={4} ml={2}>
               <Input name={entry.name} {...entry.validations} onChange={(data) => handleChange(data)} 
-                required={true}  />
+                required={true} sx={{ height: '30px' }} />
             </Box>
           }
         </Flex>
@@ -163,6 +166,11 @@ export const ChatMessage = ({ message, username, isLast }: Props) => {
   const chatRef = useRef<HTMLDivElement>(null)
   const widget = useWidget()
   const chat = useCurrentChat()
+  const agentId = entry.agent?.id ?? ''
+  const [agentById] = agentClient.agent.useStatefulQuery({ agentId }, { enabled: !!agentId && !entry?.agent?.builtIn })
+  const [AgentBuiltInById] = agentClient.publicAgent.useStatefulQuery({ agentId }, { enabled: !!agentId && entry?.agent?.builtIn })
+  const agent = agentById ?? AgentBuiltInById
+
   useChatScrollToBottomEffect(ref, [entry])
 
   const detailKS = useCallback(({ name, slug, documentScore, documentId }: Required<TextChatEntry>['knowledgeSources'][number]) => {
@@ -249,10 +257,15 @@ export const ChatMessage = ({ message, username, isLast }: Props) => {
     </form>
   }
 
+  function openToolsPanel() {
+    widget.set('currentMessageInPanel', { chatId: chat.id, messageId: message.id })
+    widget.set('panel', 'tools')
+  }
+
   return (entry.content || entry.error || !!entry.steps?.length) && (
     <li className={entry.agentType} ref={ref}>
       <div className="chat-message" ref={chatRef} onKeyDown={handleKeyDown} tabIndex={0}>
-        <div className="user-info">{userInfo}</div>
+        <div className={`user-info ${entry.agentType}`}>{userInfo}</div>
         {(entry.content || entry.steps) && <div className={listToClass(['message-content', entry.card && 'card'])}>
           {!!entry.badges?.length && <div className="badges">
             {entry.badges.map((b, index) => <Badge key={index} palette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
@@ -268,6 +281,19 @@ export const ChatMessage = ({ message, username, isLast }: Props) => {
           <Text appearance="microtext1">{entry.error}</Text>
         </div>
       )}
+      {!!entry.tools?.length && <StackedBadge
+        aria-label={t.openToolsPanel}
+        title={t.openToolsPanel}
+        tabIndex={0}
+        role="button"
+        className="tools-badge"
+        label={t.tools}
+        images={entry.tools.slice(0, 3).map((id) => {
+          const tool = toolById(id, agent?.toolkits)
+          return { key: id, name: tool?.name || id, icon: <Cog />, url: tool?.image }
+        })}
+        onClick={openToolsPanel}
+      />}
       {!!entry.knowledgeSources?.length && <div className="ks-box">
         <Text appearance="microtext1" colorScheme="light.700">Knowledge Sources:</Text>
         <ul>{entry.knowledgeSources.map((ks, index) => (
@@ -307,10 +333,14 @@ const dictionary = {
     copy: 'Copy',
     like: 'Like',
     dislike: 'Dislike',
+    tools: 'Tools',
+    openToolsPanel: 'Open the tools panel to see more details.',
   },
   pt: {
     copy: 'Copiar',
     like: 'Gostei',
     dislike: 'Não gostei',
+    tools: 'Ferramentas',
+    openToolsPanel: 'Abrir o painel de ferramentas para ver mais detalhes.',
   },
 } satisfies Dictionary

package/src/views/Chat/StepsList.tsx

@@ -2,27 +2,27 @@ import { Button, IconBox, Text } from '@citric/core'
 import { CheckCircleFill, Circle, PlayFill, TimesCircleFill } from '@citric/icons'
 import { LoadingCircular } from '@citric/ui'
 import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
+import { ChatStep, StepChatStep } from '@stack-spot/portal-network'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { findLastIndex } from 'lodash'
 import { useState } from 'react'
 import { useWidget } from '../../context/hooks'
-import { ChatEntryStep } from '../../state/ChatEntry'
 import { PropsOf } from '../../types'
 
 interface Props {
-  steps: ChatEntryStep[],
+  steps: ChatStep[],
   messageId: number,
   chatId: string,
 }
 
 interface StepProps {
-  step: ChatEntryStep,
+  step: StepChatStep,
   index: number,
   total: number,
   onClick?: () => void,
 }
 
-function getStatusIcon(status: ChatEntryStep['status']) {
+function getStatusIcon(status: ChatStep['status']) {
   const iconBoxProps: PropsOf<typeof IconBox> = { colorIcon: 'light.700', size: 'xs' }
   switch (status) {
     case 'error': return <IconBox {...iconBoxProps}><TimesCircleFill /></IconBox>
@@ -53,8 +53,8 @@ export const StepsList = ({ steps, chatId, messageId }: Props) => {
   const widget = useWidget()
 
   function openToolsPanel() {
-    widget.set('currentMessageInToolsPanel', { chatId, messageId })
-    widget.set('panel', 'tools')
+    widget.set('currentMessageInPanel', { chatId, messageId })
+    widget.set('panel', 'steps')
   }
   
   return (

package/src/views/Chat/styled.ts

@@ -38,6 +38,10 @@ export const ChatList: IStyledComponentBase<
     display: flex;
     flex-direction: row;
     gap: 10px;
+
+    &.bot {
+      align-items: center;
+    }
   }
 
   .chat-message {
@@ -82,23 +86,19 @@ export const ChatList: IStyledComponentBase<
         gap: 4px;
     
         .default-image-wrapper {
-          width: 24px;
-          height: 24px;
-          border-radius: 4px;
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
           background-color: ${theme.color.light[300]};
           display: flex;
           align-items: center;
           justify-content: center;
-    
-          .agent-image {
-            width: 18px;
-            height: 18px;
-          }
+          border: 1px solid ${theme.color.light[600]};
         }
 
         .custom-agent-image {
-          width: 24px;
-          height: 24px;
+          width: 32px;
+          height: 32px;
           border-radius: 50%;
         }
       }
@@ -149,11 +149,11 @@ export const ChatList: IStyledComponentBase<
           background-color: ${theme.color.light[500]};
           border-radius: 4px;
 
-          > p:first-child {
+          .markdown > p:first-child {
             margin-top: 0;
           }
 
-          > p:last-child {
+          .markdown > p:last-child {
             margin-bottom: 0;
           }
         }
@@ -244,4 +244,13 @@ export const ChatList: IStyledComponentBase<
       }
     }
   }
+
+  .markdown img {
+    max-width: 70%;
+  }
+
+  .tools-badge {
+    align-self: start;
+    cursor: pointer;
+  }
 `

package/src/views/ChatHistory/utils.ts

@@ -1,6 +1,6 @@
 import { agentClient, aiClient, workspaceClient } from '@stack-spot/portal-network'
 import { ChatProperties } from '../../state/ChatState'
-import { LabeledWithImage } from '../../state/types'
+import { LabeledAgent } from '../../state/types'
 
 /**
  * Finds a stack by its id.
@@ -40,7 +40,7 @@ export async function findWorkspace(id: string | null): Promise<ChatProperties['
  * Finds all the agents, including common agents and public agents.
  * @returns an array with every agent.
  */
-export async function getAllAgents(): Promise<LabeledWithImage[]> {
+export async function getAllAgents(): Promise<LabeledAgent[]> {
   try {
     const [agents, publicAgents] = await Promise.all([agentClient.agents.query({}), agentClient.publicAgents.query({})])
     return [...agents, ...publicAgents].map(a => ({ id: a.id, label: a.name, image: a.avatar }))

package/src/views/ChatTabSelection.tsx

@@ -3,6 +3,8 @@ import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useMemo } from 'react'
 import { TabManager } from '../components/TabManager'
 import { useChatState, useChatTabs, useWidget, useWidgetState } from '../context/hooks'
+import { useRightPanel } from '../right-panel/hooks'
+import { ChatState } from '../state/ChatState'
 import { ButtonAction } from '../types'
 
 const TabLabel = ({ id }: { id: string }) => {
@@ -18,13 +20,29 @@ export const ChatTabSelection = () => {
   const widget = useWidget()
   const { chatHistory } = useWidgetState('features') ?? {}
   const { active, chats } = useChatTabs()
+  const { close: closeRightPanel } = useRightPanel()
+
+  function create() {
+    widget.createChat()
+    closeRightPanel()
+  }
+
+  function select({ id }: ChatState) {
+    widget.chatTabs.select(id)
+    closeRightPanel()
+  }
+
+  function remove({ id }: ChatState) {
+    widget.chatTabs.remove(id)
+    closeRightPanel()
+  }
 
   const buttons = useMemo<ButtonAction[]>(
     () => {
       const actions: ButtonAction[] = [{
         icon: <Plus />,
         label: t.newChat,
-        onClick: () => widget.createChat(),
+        onClick: create,
       }]
       if (chatHistory) {
         actions.push({
@@ -39,14 +57,14 @@ export const ChatTabSelection = () => {
     },
     [chatHistory],
   )
-  
+
   return <TabManager
     tabs={chats}
     active={active.id}
     renderLabel={({ id }) => <TabLabel id={id} />}
     keygen={({ id }) => id}
-    onRemove={({ id }) => widget.chatTabs.remove(id)}
-    onSelect={({ id }) => widget.chatTabs.select(id)}
+    onRemove={remove}
+    onSelect={select}
     buttons={buttons}
   />
 }

package/src/views/MessageInput/AgentSelector.tsx

@@ -1,6 +1,5 @@
 import { Flex, IconBox, Image } from '@citric/core'
 import { Agent } from '@citric/icons'
-import { MiniLogo } from '@stack-spot/portal-components/svg'
 import { agentClient } from '@stack-spot/portal-network'
 import { AgentResponse } from '@stack-spot/portal-network/api/agent'
 import { uniqBy } from 'lodash'
@@ -8,7 +7,6 @@ import { useCallback } from 'react'
 import { Selector } from '../../components/Selector'
 import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
 import { agentRegex } from '../../regex'
-import { isAgentDefault } from '../../utils/agent'
 
 export const AgentSelector = ({ inputRef }: { inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement> }) => {
   const chat = useCurrentChat()
@@ -16,9 +14,9 @@ export const AgentSelector = ({ inputRef }: { inputRef: React.RefObject<HTMLText
   const onSelectItem = useCallback((agent: AgentResponse) => {
     const newValue = `@${agent.slug}`
     chat.set('nextMessage', undefined)
-    chat.set('agent', isAgentDefault(agent.slug)
-      ? undefined
-      : { id: agent.id, label: agent.name, image: agent.avatar, builtIn: agent.visibility_level === 'builtIn' },
+    chat.set(
+      'agent',
+      { id: agent.id, label: agent.name, image: agent.avatar, slug: agent.slug, builtIn: agent.visibility_level === 'builtIn' },
     )
 
     if (!inputRef.current) return
@@ -31,16 +29,16 @@ export const AgentSelector = ({ inputRef }: { inputRef: React.RefObject<HTMLText
     const accountAgents = agentClient.agents.useQuery({ visibility: 'ACCOUNT' })
     const sharedAgents = agentClient.agents.useQuery({ visibility: 'SHARED' })
     const publicAgents = agentClient.publicAgents.useQuery({})
-    const buildIns = [...publicAgents.map((agent) => ({ ...agent, visibility_level: 'builtIn' }))]
+    const builtIns = [...publicAgents.map((agent) => ({ ...agent, visibility_level: 'builtIn' }))]
 
-    return uniqBy([...personalAgents, ...accountAgents, ...sharedAgents, ...buildIns], 'id')
+    return uniqBy([...personalAgents, ...accountAgents, ...sharedAgents, ...builtIns], 'id')
   }
 
-  const AgentItem = ({ avatar, name, slug }: AgentResponse) => {
+  const AgentItem = ({ avatar, name }: AgentResponse) => {
     const AvatarComponent = avatar ? <Image width="32" height="32" radius="full" src={avatar} /> : <IconBox size="md"><Agent /></IconBox>
 
     return <Flex flexWrap="nowrap" alignItems="center" sx={{ gap: '8px' }}>
-      {isAgentDefault(slug) ? <MiniLogo style={{ width: '32px', height: '32px' }} /> : AvatarComponent}
+      {AvatarComponent}
       <p className="selector-title">{name}</p>
     </Flex>
   }