@stack-spot/ai-chat-widget 1.36.1-betacitric.1 → 1.36.1

package/src/views/Chat/styled.ts

@@ -25,9 +25,9 @@ export const ChatList: IStyledComponentBase<
     border-radius: 8px;
     align-self: start;
 
-    /* svg {
+    svg {
       fill: ${theme.color.danger.contrastText};
-    } */
+    }
 
     small {
       margin-top: 1px;
@@ -78,12 +78,6 @@ export const ChatList: IStyledComponentBase<
       opacity: 0.6;
       margin-left: auto;
     }
-
-    // prevents the feedback from being cut by the overflow rules of the parent elements. 
-    .copy-btn:after {
-      left: 0;
-      margin-top: -20px;
-    }
   }
 
   > li {

package/src/views/ChatHistory/HistoryItem.tsx

@@ -1,14 +1,18 @@
-import { Icon } from '@stack-spot/citric-icons'
-import { IconButton, Input, MenuItem, MenuOverlay, ProgressCircular } from '@stack-spot/citric-react'
+import { IconBox, Input } from '@citric/core'
+import { Check, Download, EllipsisHorizontal, Pencil, Trash } from '@citric/icons'
+import { IconButton, LoadingCircular } from '@citric/ui'
+import { focusNextIgnoringChildren } from '@stack-spot/portal-components'
 import { agentToolsClient, aiClient } from '@stack-spot/portal-network'
 import { ConversationResponse } from '@stack-spot/portal-network/api/ai'
 import { theme } from '@stack-spot/portal-theme'
 import { last } from 'lodash'
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { OverlayMenu } from '../../components/OverlayMenu'
 import { useWidget } from '../../context/hooks'
 import { ChatEntry } from '../../state/ChatEntry'
 import { ChatState } from '../../state/ChatState'
 import { LabeledAgent } from '../../state/types'
+import { ButtonAction } from '../../types'
 import { download } from '../../utils/download'
 import { genericSourcesToKnowledgeSources } from '../../utils/knowledge-source'
 import { useHistoryDictionary } from './dictionary'
@@ -27,6 +31,7 @@ export const HistoryItem = ({ item }: { item: ConversationResponse }) => {
   const [isDeleted, setDeleted] = useState(false)
   const renameInput = useRef<HTMLInputElement>(null)
   const widget = useWidget()
+  const overlayRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     if (isRenaming) renameInput.current?.focus() 
@@ -53,6 +58,7 @@ export const HistoryItem = ({ item }: { item: ConversationResponse }) => {
   }
 
   const onDownload = useCallback(async () => {
+    setTimeout(() => focusNextIgnoringChildren(overlayRef.current), 10)
     setLoading(true)
     try {
       const content = await aiClient.downloadChat.mutate({ conversationId: item.id })
@@ -66,6 +72,7 @@ export const HistoryItem = ({ item }: { item: ConversationResponse }) => {
 
   const onDelete = useCallback(async () => {
     setDeleted(true)
+    setTimeout(() => overlayRef.current?.focus(), 10)
     try {
       await aiClient.deleteChat.mutate({ conversationId: item.id })
       aiClient.chats.invalidate()
@@ -116,10 +123,10 @@ export const HistoryItem = ({ item }: { item: ConversationResponse }) => {
     setLoading(false)
   }, [])
 
-  const actions: MenuItem[] = [
-    { label: t.rename, onClick: onRename, icon: <Icon icon="Pencil" /> },
-    { label: t.download, onClick: onDownload, icon: <Icon icon="Download" /> },
-    { label: t.delete, onClick: onDelete, icon: <Icon icon="Trash" />, style: { color: theme.color.danger[500] } },
+  const actions: ButtonAction[] = [
+    { label: t.rename, onClick: onRename, icon: <Pencil /> },
+    { label: t.download, onClick: onDownload, icon: <Download /> },
+    { label: t.delete, onClick: onDelete, icon: <Trash />, color: theme.color.danger[500] },
   ]
 
   return isDeleted ? null : (
@@ -129,22 +136,22 @@ export const HistoryItem = ({ item }: { item: ConversationResponse }) => {
           <Input
             ref={renameInput}
             value={renamed}
-            onChange={setRenamed}
-            style={{ flex: 1 }}
+            onChange={e => setRenamed(e.target.value)}
             onKeyDown={(e) => {
               if (['Enter', 'Escape'].includes(e.key)) {
                 e.key === 'Enter' ? onSubmitRename() : setRenaming(false)
+                setTimeout(() => overlayRef.current?.focus(), 10)
               }
             }}
           />
-          <IconButton icon="Check" onClick={onSubmitRename} />
+          <IconButton onClick={onSubmitRename}><Check /></IconButton>
         </>
       ) : (
         <>
           <button className="label" onClick={onSelect} disabled={isLoading}>{title}</button>
-          {isLoading ? <ProgressCircular size="xs" /> : <MenuOverlay items={actions} position="left">
-            <Icon icon="EllipsisHorizontal" size="xs" />
-          </MenuOverlay>}
+          {isLoading ? <LoadingCircular size="xs" /> : <OverlayMenu actions={actions} position="left" ref={overlayRef}>
+            <IconBox><EllipsisHorizontal /></IconBox>
+          </OverlayMenu>}
         </>
       )}
     </HistoryItemBox>

package/src/views/ChatHistory/index.tsx

@@ -1,5 +1,5 @@
-import { FallbackBoundary } from '@stack-spot/citric-react'
 import { useEffect } from 'react'
+import { FallbackBoundary } from '../../components/FallbackBoundary'
 import { useWidget, useWidgetState } from '../../context/hooks'
 import { useRightPanel } from '../../right-panel/hooks'
 import { ChatHistoryPanel } from './ChatHistoryPanel'

package/src/views/ChatHistory/styled.ts

@@ -1,3 +1,5 @@
+import { IconBox } from '@citric/core'
+import { IconButton } from '@citric/ui'
 import { theme } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
 
@@ -40,7 +42,7 @@ export const HistoryItemBox = styled.div`
     }
   }
 
-  /* $ {IconBox}, $ {IconButton} {
+  ${IconBox}, ${IconButton} {
     padding: 0;
     border: none;
     background-color: transparent;
@@ -52,7 +54,7 @@ export const HistoryItemBox = styled.div`
     }
   }
 
-  $ {IconButton} svg {
+  ${IconButton} svg {
     width: 16px;
-  } */
+  }
 `

package/src/views/ChatTabSelection.tsx

@@ -1,3 +1,4 @@
+import { Clock, Plus } from '@citric/icons'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useMemo } from 'react'
 import { TabManager } from '../components/TabManager'
@@ -39,13 +40,13 @@ export const ChatTabSelection = () => {
   const buttons = useMemo<ButtonAction[]>(
     () => {
       const actions: ButtonAction[] = [{
-        icon: 'Plus',
+        icon: <Plus />,
         ariaLabel: t.newChat,
         onClick: create,
       }]
       if (chatHistory) {
         actions.push({
-          icon: 'Clock',
+          icon: <Clock />,
           label: t.history,
           ariaLabel: t.openHistory,
           className: 'test',

package/src/views/Editor.tsx

@@ -1,6 +1,8 @@
+import { Text } from '@citric/core'
+import { LoadingCircular } from '@citric/ui'
 import MonacoEditor, { OnMount } from '@monaco-editor/react'
-import { ProgressCircular, Select, Text } from '@stack-spot/citric-react'
 import { delay } from '@stack-spot/portal-components'
+import { Select } from '@stack-spot/portal-components/Select'
 import { useThemeKind } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { debounce } from 'lodash'
@@ -27,13 +29,17 @@ const TitleBox = styled.div`
   position: relative;
   
   .language-selector {
-    height: 28px;
+    width: 150px;
     position: absolute;
     top: -4px;
     right: 0;
 
-    .search-bar {
-      display: none;
+    .options {
+      max-height: 250px;
+    }
+
+    .current-value {
+      padding: 2px 8px;
     }
   }
 `
@@ -72,12 +78,11 @@ const Title = () => {
       <Text appearance="h5">Editor</Text>
       <Select
         options={languages}
-        renderLabel={l => l?.label ?? defaultLanguage}
-        renderKey={l => l?.value}
+        renderLabel={l => l.label}
+        renderValue={l => l.value}
         value={language}
-        onChange={l => chat.set('codeLanguage', l?.value ?? defaultLanguage)}
+        onChange={l => chat.set('codeLanguage', l.value)}
         className="language-selector"
-        searchable
       />
     </TitleBox>
   )
@@ -120,7 +125,7 @@ const EditorPanel = () => {
         options={{ minimap: { enabled: false } }}
         value={value}
         onChange={v => chat.set('code', v)}
-        loading={<ProgressCircular />}
+        loading={<LoadingCircular />}
         onMount={setup}
       />
     </EditorBox>

package/src/views/Home/BuiltInAgent.tsx

@@ -1,4 +1,5 @@
-import { Row, Text } from '@stack-spot/citric-react'
+import { Text } from '@citric/core'
+import { FaceSmile, KnowledgeSource, QuickCommand, StackSpot } from '@citric/icons'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { QuickStartButton } from '../../components/QuickStartButton'
 import { useCurrentChat } from '../../context/hooks'
@@ -21,28 +22,28 @@ export const BuiltInAgent = ({ username }: HomeProps) => {
     <HomeBox className="home-page">
       <Text appearance="h2" className="title">{t.hello}, {username}</Text>
       <Text appearance="h3" className="subtitle">{t.subtitle}</Text>
-      <Row className="shortcuts">
+      <div className="shortcuts">
         <QuickStartButton
           label={t['question.meta']}
           onClick={() => send(t['question.meta'])}
-          icon="StackSpot"
+          icon={<StackSpot />}
         />
         <QuickStartButton
           label={t['question.ks']}
           onClick={() => send(t['question.ks'])}
-          icon="KnowledgeSource"
+          icon={<KnowledgeSource />}
         />
         <QuickStartButton
           label={t['question.agents']}
           onClick={() => send(t['question.agents'])}
-          icon="FaceSmile"
+          icon={<FaceSmile />}
         />
         <QuickStartButton
           label={t['question.qc']}
           onClick={() => send(t['question.qc'])}
-          icon="QuickCommand"
+          icon={<QuickCommand />}
         />
-      </Row>
+      </div>
     </HomeBox>
   )
 }

package/src/views/Home/CustomAgent.tsx

@@ -1,5 +1,5 @@
-import { Icon } from '@stack-spot/citric-icons'
-import { Text } from '@stack-spot/citric-react'
+import { IconBox, Text } from '@citric/core'
+import { Agent } from '@citric/icons'
 import { agentToolsClient } from '@stack-spot/portal-network'
 import { useMemo } from 'react'
 import { QuickStartButton } from '../../components/QuickStartButton'
@@ -28,7 +28,7 @@ export const CustomAgent = () => {
 
   return (
     <HomeBox className="home-page custom-agent">
-      {image ? <img src={image} className="avatar" /> : <Icon icon="Agent" 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/index.tsx

@@ -1,9 +1,9 @@
-import { FallbackBoundary } from '@stack-spot/citric-react'
 import { FadingOverflow } from '@stack-spot/portal-components/FadingOverflow'
 import { agentToolsClient } from '@stack-spot/portal-network'
 import { styled } from 'styled-components'
 import { AgentCard } from '../../components/AgentCard'
 import { AgentCardCreate } from '../../components/AgentCard/AgentCardCreate'
+import { FallbackBoundary } from '../../components/FallbackBoundary'
 import { useCurrentChatState } from '../../context/hooks'
 import { BuiltInAgent } from './BuiltInAgent'
 import { CustomAgent } from './CustomAgent'

package/src/views/Home/styled.ts

@@ -21,34 +21,35 @@ export const HomeBox = styled.div`
   }
 
   .shortcuts {
-    flex-wrap: wrap;
-    button {
-      margin-left: 0;
-      margin-right: 8px;
-      border-radius: 50px;
-      padding-inline: 16px;
-      padding-block: 8px;
-      font-weight: 400;
-      line-height: normal;
-      border: none;
-      max-width: 30vw;
-      margin-bottom: 8px;
-      i {
-        width: 16px;
-        height: 16px;
+    li {
+      flex: 1;
+    }
+      button {
+        margin-left: 0;
         margin-right: 8px;
-      }
-      &:hover, &:visited, &:active, &:focus {
-        background-color: ${theme.color.light[600]} !important;
-      }
+        border-radius: 50px;
+        padding-inline: 16px;
+        padding-block: 8px;
+        font-weight: 400;
+        line-height: normal;
+        border: none;
+        max-width: 30vw;
+        margin-bottom: 8px;
+        i {
+          width: 16px;
+          height: 16px;
+          margin-right: 8px;
+        }
+        &:hover, &:visited, &:active, &:focus {
+          background-color: ${theme.color.light[600]}
+        }
     }
   }
 
-  .avatar {
+  .avatar, .avatar svg {
     width: 74px;
     height: 74px;
     border-radius: 50%;
-    font-size: 74px;
   }
 
   &.custom-agent {

package/src/views/KSDocument.tsx

@@ -1,9 +1,10 @@
-import { Icon } from '@stack-spot/citric-icons'
-import { FallbackBoundary, Row, Text } from '@stack-spot/citric-react'
+import { Flex, IconBox, Text } from '@citric/core'
+import { Score } from '@citric/icons'
 import { aiClient } from '@stack-spot/portal-network'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useEffect } from 'react'
 import { Code } from '../components/Code'
+import { FallbackBoundary } from '../components/FallbackBoundary'
 import { useWidget, useWidgetState } from '../context/hooks'
 import { useRightPanel } from '../right-panel/hooks'
 import { extractCodeFromKSDocument } from '../utils/knowledge-source'
@@ -23,13 +24,13 @@ export const KSDocument = () => {
       <FallbackBoundary><KSDocumentPanel documentId={ks.documentId} slug={ks.slug} /></FallbackBoundary>,
       {
         title: (
-          <Row flex={1}>
+          <Flex flexDirection="row" alignItems="center" flex="1">
             <Text appearance="h5" style={{ flex: 1 }}>{ks.name}</Text>
-            <Row gap="5px" title="Score" aria-label="Score">
-              <Icon icon="Score" />
+            <Flex flexDirection="row" alignItems="center" style={{ gap: '5px' }} title="Score" aria-label="Score">
+              <IconBox><Score /></IconBox>
               <Text>{ks.score.toFixed(2)}</Text>
-            </Row>
-          </Row>
+            </Flex>
+          </Flex>
         ),
         description: t.description,
         onClose: () => widget.set('panel', undefined),

package/src/views/KnowledgeSources.tsx

@@ -1,12 +1,16 @@
-import { Button, Tab } from '@stack-spot/citric-react'
+import { Button } from '@citric/core'
+import { Search } from '@citric/icons'
 import { Placeholder } from '@stack-spot/portal-components/Placeholder'
 import { aiClient, dataIntegrationClient, workspaceAiClient } from '@stack-spot/portal-network'
-import { VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
+import { KnowledgeSourceItemResponse, VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
 import { WorkspaceResponse } from '@stack-spot/portal-network/api/workspace-ai'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import React, { useCallback, useEffect, useMemo, useRef } from 'react'
+import { difference, uniqBy } from 'lodash'
+import React, { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { ButtonFavorite } from '../components/ButtonFavorite'
 import { NavigationComponent } from '../components/ComponentNavigator'
 import { DescribedCheckboxGroup } from '../components/form/DescribedCheckboxGroup'
+import { IconInput } from '../components/IconInput'
 import { RightPanelContentList } from '../components/RightPanelContentList'
 import { RightPanelTabs } from '../components/RightPanelTabs'
 import { WorkspaceTabNavigator } from '../components/WorkspaceTabNavigator'
@@ -24,6 +28,8 @@ export interface TabProps {
   onSubmit?: () => void,
 }
 
+type TabElement = { title: string, content: ReactElement }
+
 export const KnowledgeSources = () => {
   const t = useTranslate(dictionary)
   const panel = useWidgetState('panel')
@@ -63,15 +69,15 @@ const KnowledgeSourcesPanel = () => {
     allKS.current = chat.get('knowledgeSources') ?? []
   }, [chat])
 
-  const allTabsMap: Partial<Record<Scope, Omit<Tab, 'key'>>> = {
-    favorite: { label: t.favorites, 
+  const allTabsMap: Partial<Record<Scope, TabElement>> = {
+    favorite: { title: t.favorites, 
       content: <KnowledgeSourcesTab key="favorite" visibility="favorite" allKS={allKS} onSubmit={onSubmit} /> },
-    personal: { label: t.personal, 
+    personal: { title: t.personal, 
       content: <KnowledgeSourcesTab key="personal" visibility="personal" allKS={allKS} onSubmit={onSubmit} /> },
-    shared: { label: t.shared, content: <KnowledgeSourcesTab key="shared" visibility="shared" allKS={allKS} onSubmit={onSubmit} /> },
-    workspace: { label: t.spots,
+    shared: { title: t.shared, content: <KnowledgeSourcesTab key="shared" visibility="shared" allKS={allKS} onSubmit={onSubmit} /> },
+    workspace: { title: t.spots,
       content: <KnowledgeSourcesTabWorkspace key="workspace" visibility="workspace" allKS={allKS} onSubmit={onSubmit} /> },
-    account: { label: t.account, content: <KnowledgeSourcesTab key="account" visibility="account" allKS={allKS} onSubmit={onSubmit} /> },
+    account: { title: t.account, content: <KnowledgeSourcesTab key="account" visibility="account" allKS={allKS} onSubmit={onSubmit} /> },
   }
 
   const defaultScopes: Scope[] = ['favorite', 'personal', 'shared', 'workspace', 'account']
@@ -83,8 +89,8 @@ const KnowledgeSourcesPanel = () => {
     : rawScopes
 
   const tabs = scopesToRender
-    .map(scope => scope in allTabsMap ? { key: scope, ...allTabsMap[scope] } : undefined)
-    .filter(Boolean) as Tab[]
+    .map(scope => allTabsMap[scope])
+    .filter(Boolean) as TabElement[]
 
   return (isGroupResourcesByScope ? (
     <RightPanelTabs key={chat.id} tabs={tabs} />
@@ -95,15 +101,14 @@ const KnowledgeSourcesPanel = () => {
 
 export const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit, workspaceId, showSubmitButton = true }: TabProps) => {
   const t = useTranslate(dictionary)
+  const [filter, setFilter] = useState('')
+
   const knowledgeSources = workspaceId
     ? workspaceAiClient.getKSFromWorkspaceAi.useQuery({ workspaceId })
     : aiClient.knowledgeSources.useQuery({
       visibility, order: 'a-to-z', types: ['snippet', 'api', 'event', 'custom'],
     })
-  const initialValue = useMemo(() => {
-    const currentlySelected = allKS.current?.map(ks => ks.id)
-    return knowledgeSources.filter(ks => currentlySelected?.includes(ks.slug))
-  }, [])
+
   const listFavorites = dataIntegrationClient.knowledgeSources.useQuery({ visibility: 'favorite' })
   const [addFavorite, pendingAddFav] = dataIntegrationClient.addFavoriteKnowledgeSource.useMutation()
   const [removeFavorite, pendingRemoveFav] = dataIntegrationClient.removeFavoriteKnowledgeSource.useMutation()
@@ -160,19 +165,56 @@ export const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit, workspaceId,
     } 
   })
 
+  const [value, setValue] = useState<KnowledgeSourceItemResponse[]>((() => {
+    const currentlySelected = allKS.current?.map(ks => ks.id)
+    return knowledgeSources.filter(ks => currentlySelected?.includes(ks.slug))
+  })())
+  const filtered = useMemo(
+    () => filter 
+      // Recreate the list so that the favorites list is taken into account
+      ? knowledgeSources.filter(ks => value.includes(ks) || ks.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
+      : [...knowledgeSources]
+    , [knowledgeSources, filter, value, listFavorites],
+  )
+
+  const onChange = useCallback((newValue: KnowledgeSourceItemResponse[]) => {
+    setValue((current) => {
+      const added = difference(newValue, current)
+      const removed = difference(current, newValue)
+      allKS.current = allKS.current?.filter(ks => !removed.some(r => r.slug === ks.id)) ?? []
+      allKS.current = uniqBy([...allKS.current, ...added.map(ks => ({ id: ks.slug, label: ks.name }))], 'id')
+      return newValue
+    })
+  }, [])
+
   return (
     <>
       <div className="content">
-        <DescribedCheckboxGroup
-          options={knowledgeSources}
-          initialValue={initialValue}
-          globalSelection={allKS}
-          data={ks => ({ idOrSlug: ks.slug, description: ks.description, name: ks.name, listFavorites, onAddFavorite, onRemoveFavorite })}
-          emptyResults={<Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />}
-          emptyDataset={<Placeholder title={t.noData} description={t.noDataDescription} className="no-data-placeholder" />}
-        />
+        <IconInput icon={<Search />} value={filter} onChange={setFilter} className="search" />
+        {!!filtered.length && <DescribedCheckboxGroup
+          options={filtered}
+          renderAfterElement={({ slug }) => (
+            <ButtonFavorite 
+              favorite={{ 
+                idOrSlug: slug, listFavorites, onAddFavorite, onRemoveFavorite }} />
+          )}
+          keygen={ks => ks.id}
+          value={value}
+          onChange={onChange}
+          renderLabel={ks => ks.name}
+          renderDescription={ks => ks.description}
+          optionClassName={ks => (filter && !ks.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()) && value.includes(ks))
+            ? 'filtered-out'
+            : ''
+          }
+          className="option-list"
+        />}
+        {!!filtered.length && !filtered.length && (
+          <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />
+        )}
+        {!filtered.length && <Placeholder title={t.noData} description={t.noDataDescription} className="no-data-placeholder" />}
       </div>
-      {!!knowledgeSources.length && showSubmitButton && <Button onClick={onSubmit}>{t.apply}</Button>}
+      {!!filtered.length && showSubmitButton && <Button onClick={onSubmit}>{t.apply}</Button>}
     </>
   )
 }

package/src/views/MessageInput/AgentSelector.tsx

@@ -1,5 +1,5 @@
-import { Icon } from '@stack-spot/citric-icons'
-import { IconBox, Row, Text } from '@stack-spot/citric-react'
+import { Flex, IconBox, Image } from '@citric/core'
+import { Agent } from '@citric/icons'
 import { AgentResponseWithBuiltIn, agentToolsClient, workspaceAiClient } from '@stack-spot/portal-network'
 import { useCallback } from 'react'
 import { Selector } from '../../components/Selector'
@@ -10,17 +10,15 @@ import { useAgentFavorites } from '../Agents/useAgentFavorites'
 type AgentWithSpaceName = AgentResponseWithBuiltIn
 
 const AgentItem = ({ avatar, name, spaceName }: AgentWithSpaceName) => {
-  const avatarComponent = avatar
-    ? <img style={{ width: '32px', height: '32px', borderRadius: '50%' }} src={avatar} />
-    : <IconBox size="md" icon="Agent" style={{ backgroundColor: 'transparent' }} />
+  const avatarComponent = avatar ? <Image width="32" height="32" radius="full" src={avatar} /> : <IconBox size="md"><Agent /></IconBox>
 
-  return <Row gap="8px" style={{ flexWrap: 'nowrap' }}>
+  return <Flex flexWrap="nowrap" alignItems="center" sx={{ gap: '8px' }}>
     {avatarComponent}
     <div>
-      <Text className="selector-description">{spaceName}</Text>
-      <Text className="selector-title">{name}</Text>
+      <p className="selector-description">{spaceName}</p>
+      <p className="selector-title">{name}</p>
     </div>
-  </Row>
+  </Flex>
 }
 
 export const AgentSelector = ({ inputRef, isTrial }: {
@@ -74,7 +72,7 @@ export const AgentSelector = ({ inputRef, isTrial }: {
     selectorConfig={{
       resourceName: 'Agent',
       shortcut: '@',
-      icon: <Icon icon="Agent" />,
+      icon: <Agent />,
       regex: agentRegex,
       urlBuilder: (agent) => `/agents/${agent?.id}`,
       searchProp: 'name',

package/src/views/MessageInput/ButtonAgent.tsx

@@ -1,5 +1,6 @@
-import { Icon } from '@stack-spot/citric-icons'
-import { Center, ImageButton, ImageWithFallback, Tooltip } from '@stack-spot/citric-react'
+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 { agentToolsClient } from '@stack-spot/portal-network'
 import { useEffect } from 'react'
@@ -40,30 +41,17 @@ export const ButtonAgent = () => {
     <div className="button-group">
       {features.agent && (
         <div className="group-agent">
-          <ImageButton
-            aria-label={t.agent}
-            title={t.agent}
-            className="agent"
-            onClick={() => widget.set('panel', 'agent')}
-          >
+          <IconButton aria-label={t.agent} title={t.agent} className="agent" onClick={() => widget.set('panel', 'agent')}>
             {agentDefault?.avatar ? <img src={agentDefault.avatar} className="image" /> : <MiniLogo />}
-          </ImageButton>
+          </IconButton>
           {agent?.id && !isAgentDefault() &&
-            <Tooltip content={t.remove} >
-              <ImageButton
-                aria-label={t.remove}
-                className="agent agent-selected"
-                onClick={setAgentDefault}
-              >
-                <ImageWithFallback
-                  src={agent.image ?? ''}
-                  className="image"
-                  fallback={<Icon className="image" size="xs" icon="Agent" />}
-                />
-                <Center className="icon-remove">
-                  <Icon icon="TimesMini" />
-                </Center>
-              </ImageButton>
+            <Tooltip text={t.remove} >
+              <IconButton aria-label={t.remove} className="agent agent-selected" onClick={setAgentDefault}>
+                {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>