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

package/src/views/Agents/AgentDescription.tsx

@@ -1,4 +1,5 @@
-import { Badge, Skeleton, Text } from '@stack-spot/citric-react'
+import { Text } from '@citric/core'
+import { Badge, Skeleton } from '@citric/ui'
 import { agentToolsClient } from '@stack-spot/portal-network'
 import { useMemo } from 'react'
 import { ToolBadge } from '../../components/ToolBadge'
@@ -10,18 +11,18 @@ export const AgentDescription = ({ agentId }: { agentId?: string }) => {
   const t = useAgentsDictionary()
   const [agent, , , { isLoading }] = agentToolsClient.agent.useStatefulQuery({ agentId: agentId! }, { enabled: !!agentId })
   const [toolKits, , , { isLoading: isLoadingToolKit }] = agentToolsClient.tools.useStatefulQuery({})
-  const numberOfKnowledgeSources = agent?.knowledge_source_config?.knowledge_sources.length ?? 0
+  const numberOfKnowledgeSources = agent?.knowledge_sources_config?.knowledge_sources.length ?? 0
   
   const knowledgeSources = useMemo(
-    () => agent?.knowledge_source_config?.knowledge_sources_details?.map((ks, index) => (
-      <li key={index}><Badge colorPalette="teal" appearance="square">{ks.name}</Badge></li>
+    () => agent?.knowledge_sources_config?.knowledge_sources_details?.map((ks, index) => (
+      <li key={index}><Badge palette="teal" appearance="square">{ks.name}</Badge></li>
     )),
     [agent],
   )
   const skeleton = useMemo(() => {
     const loadingKS: React.ReactElement[] = []
     for (let i = 0; i < numberOfKnowledgeSources; i++) {
-      loadingKS.push(<li key={i}><Badge colorPalette="teal" appearance="square"><Skeleton className="ks-skeleton" /></Badge></li>)
+      loadingKS.push(<li key={i}><Badge palette="teal" appearance="square"><Skeleton className="ks-skeleton" /></Badge></li>)
     }
     return loadingKS
   }, [numberOfKnowledgeSources])
@@ -69,7 +70,7 @@ export const AgentDescription = ({ agentId }: { agentId?: string }) => {
       </section>}
       {agent?.model_name && <section>
         <Text appearance="microtext1" className="title">LLM</Text>
-        <Badge colorPalette="orange" appearance="square">{agent?.model_name}</Badge>
+        <Badge palette="orange" appearance="square">{agent?.model_name}</Badge>
       </section>}
     </AgentDescriptionBox>
   )

package/src/views/Agents/AgentsPanel.tsx

@@ -1,6 +1,5 @@
-import { Tab } from '@stack-spot/citric-react'
 import { agentToolsClient } from '@stack-spot/portal-network'
-import { useEffect, useRef } from 'react'
+import { ReactElement, useEffect, useRef } from 'react'
 import { RightPanelContentList } from '../../components/RightPanelContentList'
 import { RightPanelTabs } from '../../components/RightPanelTabs'
 import { useCurrentChat, useWidgetState } from '../../context/hooks'
@@ -9,6 +8,8 @@ import { checkIsTrial } from '../../utils/check-is-trial'
 import { AgentsTab, AgentsTabWorkspace } from './AgentsTab'
 import { useAgentsDictionary } from './dictionary'
 
+type TabElement = { title: string, content: ReactElement }
+
 /**
  * Renders the Agent selection form in the Right Panel if this is the panel that is currently opened.
  */
@@ -28,13 +29,13 @@ export const AgentsPanel = () => {
     }
   }, [chat])
 
-  const allTabsMap: Record<Scope, Omit<Tab, 'key'>> = {
-    favorite: { label: t.favorites, content: <AgentsTab key="favorite" visibility="favorite" agent={agent} /> },
-    builtin: { label: t.builtin, content: <AgentsTab key="builtin" visibility="built_in" agent={agent} /> },
-    personal: { label: t.personal, content: <AgentsTab key="personal" visibility="personal" agent={agent} /> },
-    shared: { label: t.shared, content: <AgentsTab key="shared" visibility="shared" agent={agent} /> },
-    workspace: { label: t.spots, content: <AgentsTabWorkspace key="workspace" visibility="workspace" agent={agent} /> },
-    account: { label: t.account, content: <AgentsTab key="account" visibility="account" agent={agent} /> },
+  const allTabsMap: Record<Scope, TabElement> = {
+    favorite: { title: t.favorites, content: <AgentsTab key="favorite" visibility="favorite" agent={agent} /> },
+    builtin: { title: t.builtin, content: <AgentsTab key="builtin" visibility="built_in" agent={agent} /> },
+    personal: { title: t.personal, content: <AgentsTab key="personal" visibility="personal" agent={agent} /> },
+    shared: { title: t.shared, content: <AgentsTab key="shared" visibility="shared" agent={agent} /> },
+    workspace: { title: t.spots, content: <AgentsTabWorkspace key="workspace" visibility="workspace" agent={agent} /> },
+    account: { title: t.account, content: <AgentsTab key="account" visibility="account" agent={agent} /> },
   }
    
   const defaultScopes: Scope[] = ['favorite', 'builtin', 'personal', 'shared', 'workspace', 'account']
@@ -46,8 +47,8 @@ export const AgentsPanel = () => {
     : 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} />

package/src/views/Agents/AgentsTab.tsx

@@ -1,17 +1,21 @@
-import { Icon } from '@stack-spot/citric-icons'
-import { Button } from '@stack-spot/citric-react'
+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 { AgentResponseWithBuiltIn, agentToolsClient, AgentVisibilityLevel, workspaceAiClient } from '@stack-spot/portal-network'
 import { WorkspaceResponse } from '@stack-spot/portal-network/api/workspace-ai'
-import { useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
+import { ButtonFavorite } from '../../components/ButtonFavorite'
 import { NavigationComponent } from '../../components/ComponentNavigator'
 import { DescribedRadioGroup } from '../../components/form/DescribedRadioGroup'
+import { IconInput } from '../../components/IconInput'
 import { WorkspaceTabNavigator } from '../../components/WorkspaceTabNavigator'
 import { useCurrentChat } from '../../context/hooks'
 import { useRightPanel } from '../../right-panel/hooks'
 import { ChatProperties } from '../../state/ChatState'
 import { AgentDescription } from './AgentDescription'
 import { useAgentsDictionary } from './dictionary'
+import { AgentLabel } from './styled'
 import { useAgentFavorites } from './useAgentFavorites'
 
 export interface AgentTabProps {
@@ -25,58 +29,73 @@ export const AgentsTab = ({ visibility, workspaceId, agent, showSubmitButton = t
   const t = useAgentsDictionary()
   const { close } = useRightPanel()
   const chat = useCurrentChat()
+  const [filter, setFilter] = useState('')
   const { useFavorites, onAddFavorite, onRemoveFavorite } = useAgentFavorites()
-  const [submitEnabled, setSubmitEnabled] = useState(false)
   const listFavorites = useFavorites()
   const agentDefault = agentToolsClient.agentDefault.useQuery()
   const agents = workspaceId
     ? workspaceAiClient.getAgentFromWorkspaceAi.useQuery({ workspaceId }) as AgentResponseWithBuiltIn[]
     : agentToolsClient.agents.useQuery({ visibility })
 
-  const initialValue = useMemo<AgentResponseWithBuiltIn | undefined>(
-    () => {
-      const initial = agent.current
-        ? agents.find(a => a.id === agent.current?.id)
-        : chat.get('agent') ? agents.find(a => a.id === chat.get('agent')?.id) : agentDefault as unknown as AgentResponseWithBuiltIn
-      if (initial) setSubmitEnabled(true)
-      return initial
-    },
-    [agents],
+  const [value, setValue] = useState<AgentResponseWithBuiltIn | undefined>(
+    agent.current
+      ? agents.find(a => a.id === agent.current?.id)
+      : chat.get('agent') ? agents.find(a => a.id === chat.get('agent')?.id) : agentDefault as unknown as AgentResponseWithBuiltIn,
+  )
+
+  const filtered = useMemo(
+    // Recreate the list so that the favorites list is taken into account
+    () => filter ? agents.filter(a => a === value || a.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : [...agents],
+    [agents, filter, value, listFavorites],
   )
 
   function submit() {
-    if (agent.current) chat.set('agent', agent.current)
+    if (value) {
+      chat.set(
+        'agent', 
+        { id: value.id, label: value.name, image: value.avatar!, builtIn: value.visibility_level === 'built_in', slug: value.slug },
+      )
+    }
     close()
   }
 
+  const onChange = useCallback((newValue: AgentResponseWithBuiltIn) => {
+    setValue(newValue)
+    agent.current = { ...newValue, label: newValue.name, builtIn: newValue.visibility_level === 'built_in' }
+  }, [])
+
   return (
     <>
       <div className="content">
-        <DescribedRadioGroup
-          options={agents}
-          initialValue={initialValue}
-          onChange={(ag) => {
-            agent.current = ag
-              ? { ...ag, label: ag.name, image: ag.avatar!, slug: ag.slug, builtIn: ag.visibility_level === 'built_in' }
-              : undefined
-            setSubmitEnabled(true)
-          }}
-          data={ag => ({
-            idOrSlug: ag.id,
-            image: ag.avatar ? <img src={ag.avatar} /> : <Icon icon="Agent" />,
-            description: <AgentDescription agentId={ag.id} />,
-            name: ag.name,
-            listFavorites,
-            onAddFavorite,
-            onRemoveFavorite,
-          })}
-          emptyResults={
-            <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder" />
+        <IconInput icon={<Search />} value={filter} onChange={setFilter} className="search" />
+        {!!filtered.length && <DescribedRadioGroup
+          options={filtered}
+          renderAfterElement={({ id }) => (
+            <ButtonFavorite favorite={{
+              idOrSlug: id, listFavorites, onAddFavorite, onRemoveFavorite,
+            }} />
+          )}
+          keygen={a => a.id}
+          value={value}
+          onChange={onChange}
+          renderLabel={({ name, avatar, id }) => (
+            <AgentLabel>
+              {id ? (avatar ? <img src={avatar} /> : <IconBox size="xs"><Agent /></IconBox>) : <MiniLogo />}
+              <Text>{name}</Text>
+            </AgentLabel>
+          )}
+          renderDescription={a => <AgentDescription agentId={a.id} />}
+          optionClassName={a => (a === value && filter && !a.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
+            ? 'filtered-out'
+            : ''
           }
-          emptyDataset={<Placeholder title={t.noData} description={t.noDataDescription} />}
-        />
+          className="option-list"
+        />}
+        {!!agents.length && !filtered.length &&
+          <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder" />}
+        {!agents.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
       </div>
-      {!!agents.length && showSubmitButton && <Button onClick={submit} disabled={!submitEnabled}>{t.apply}</Button>}
+      {!!filtered.length && showSubmitButton && <Button onClick={submit} disabled={!value}>{t.apply}</Button>}
     </>
   )
 }

package/src/views/Chat/AgentInfo.tsx

@@ -1,5 +1,5 @@
-import { Icon } from '@stack-spot/citric-icons'
-import { ImageWithFallback, Text } from '@stack-spot/citric-react'
+import { IconBox, Text } from '@citric/core'
+import { Agent } from '@citric/icons'
 import { LabeledWithImage } from '../../state/types'
 
 interface Props {
@@ -12,11 +12,10 @@ interface Props {
  */
 export const AgentInfo = ({ agent, icon }: Props) => (
   <>
-    <ImageWithFallback
-      src={agent?.image ?? ''}
-      className="custom-agent-image"
-      fallback={<div className="default-image-wrapper">{icon ?? <Icon icon="Agent" className="agent-image" />}</div>}
-    />
+    {agent?.image
+      ? <img src={agent.image} className="custom-agent-image" />
+      : <IconBox className="default-image-wrapper" colorIcon="light.700">{icon ?? <Agent className="agent-image" />}</IconBox>
+    }
     <Text appearance="body2">{agent?.label}</Text>
   </>
 )

package/src/views/Chat/ChatMessage.tsx

@@ -1,7 +1,8 @@
-import { Icon } from '@stack-spot/citric-icons'
-import { Badge, Button, CheckboxGroup, Column, IconButton, Input, RadioGroup, Row, Text, Tooltip } from '@stack-spot/citric-react'
+import { Box, Button, Checkbox, Flex, IconBox, Input, Label, Radio, Text } from '@citric/core'
+import { Check, Cog, Copy, Dislike, DislikeFill, Like, LikeFill, TimesCircle } from '@citric/icons'
+import { Badge, IconButton, Tooltip } from '@citric/ui'
 import { agentToolsClient } from '@stack-spot/portal-network'
-import { listToClass, theme } from '@stack-spot/portal-theme'
+import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { groupBy } from 'lodash'
 import { createElement, Dispatch, useCallback, useMemo, useRef, useState } from 'react'
@@ -57,47 +58,49 @@ interface RenderInputsEntryProps {
 
 const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }: RenderInputsEntryProps) => {
   const chat = useCurrentChat()
-  const [radioValue, setRadioValue] = useState<Required<TextChatEntry>['options'][number] | undefined>()
-  const [checkboxValue, setCheckboxValue] = useState<Required<TextChatEntry>['options']>([])
 
   const renderInputs = () => {
     if (entry.type === 'input-text') {
-      return <Input
-        name={entry.name}
+      return <Input name={entry.name}
         value={value[0] ?? ''}
-        style={{ maxWidth: '500px' }}
+        sx={{ maxWidth: '500px' }}
         autoFocus
-        {...entry.validations}
-        onChange={v => setValue([v])}
-        required={entry.required}
-      />
+        {...entry.validations} onChange={(data) => setValue([data.target.value])} required={entry.required} />
     }
 
     if (entry.type === 'input-radio') {
-      return <RadioGroup
-        value={radioValue}
-        onChange={(v) => {
-          setRadioValue(v)
-          setValue([v.label])
-          v.value && setLabels([v.value])
-        }}
-        options={entry.options ?? []}
-        renderKey={o => `${o.value}_${o.label}`}
-        renderLabel={o => (
-          <Row gap={3} w="50%">
-            <Text>{o.label}</Text>
-            {o.hasInput && o.value && labels.findIndex((label) => label === o.value) !== -1 &&
-              <Input name={entry.name} onChange={v => setValue([v])} required style={{ height: '30px', width: '33%' }} />}
-          </Row>
-        )}
-      />  
+      return <Flex className="radio-group">
+        {entry.options?.map((option) => (<Box w={6} key={option.value} className="radio-item">
+          <Flex alignItems="center">
+            <Label htmlFor={option.value} colorScheme="light.contrastText">
+              <Radio name={entry.name} id={option.value} onChange={(data) => {
+                if (data.target.checked) {
+                  setValue([option.label])
+                  option.value && setLabels([option.value])
+                } else {
+                  setValue([])
+                }
+              }} />
+              <Text ml={3}>{option.label}</Text>
+            </Label>
+            {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} sx={{ height: '30px' }} />
+              </Box>
+            }
+          </Flex>
+        </Box>
+        ))}
+      </Flex>
     }
 
     if (entry.type === 'button-list') {
-      return <Row className="button-group" gap="8px">
+      return <Flex className="button-group" style={{ gap: '8px' }}>
         {entry.options?.map((item) => <Button
           key={item.label}
           colorScheme={item.color}
+          style={{ margin: 0 }}
           onClick={() => {
             item.value && chat.pushMessage(
               ChatEntry.createUserEntry(item.value, false, entry.name, item?.label ? [item?.label] : undefined),
@@ -105,46 +108,46 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
           }}
         >
           {item.label}
-        </Button>)}
-      </Row>
+        </Button>)
+        }</Flex>
     }
 
     if (entry.type === 'input-checkbox') {
-      return <CheckboxGroup
-        value={checkboxValue}
-        onChange={(v) => {
-          setCheckboxValue(v)
-          setValue(v.map(i => i.label))
-          setLabels(v.map(i => i.value).filter(i => !!i) as string[])
-        }}
-        options={entry.options ?? []}
-        renderKey={o => `${o.value}_${o.label}`}
-        renderLabel={o => (
-          <Row gap={3}>
-            <Text>{o.label}</Text>
-            {o.hasInput && o.value && labels.findIndex((label) => label === o.value)!== -1 &&
-              <div style={{ width: '33%' }}>
-                <Input
-                  name={entry.name}
-                  {...entry.validations}
-                  onChange={(v) => {
-                    const customIndex = value.findIndex(v => !entry.options?.map(o => o.label).includes(v))
-                    if (customIndex === -1) {
-                      setValue([...value, v])
-                    } else {
-                      const newValue = [...value]
-                      newValue[customIndex] = v
-                      setValue(newValue)
-                    } 
-                  }}
-                  required={true}
-                  style={{ height: '30px' }}
-                />
-              </div>
+      return <Flex className="checkbox-group">
+        {entry.options?.map((option) => (<Flex as="label" w={6} key={option.label} alignItems="center" className="checkbox-item">
+          <Checkbox name={entry.name} key={option.label} onChange={(data) => {
+            if (data.target.checked) {
+              setValue([...value, option.label])
+              option.value && setLabels([...labels, option.value])
+            } else {
+              const newValue = value.filter(((item) => item !== option.label))
+              setValue([...newValue])
             }
-          </Row>
-        )}
-      />
+          }}/>
+          <Text ml={3}>{option.label}</Text>
+          {option.hasInput && option.value && labels.findIndex((label) => label === option.value)!== -1 &&
+            <Box w={4} ml={2}>
+              <Input
+                name={entry.name}
+                {...entry.validations}
+                onChange={(data) => {
+                  const customIndex = value.findIndex(v => !entry.options?.map(o => o.label).includes(v))
+                  if (customIndex === -1) {
+                    setValue([...value, data.target.value])
+                  } else {
+                    const newValue = [...value]
+                    newValue[customIndex] = data.target.value
+                    setValue(newValue)
+                  } 
+                }}
+                required={true}
+                sx={{ height: '30px' }}
+              />
+            </Box>
+          }
+        </Flex>
+        ))}
+      </Flex>
     }
 
     if (entry.type === 'input-phone') {
@@ -159,17 +162,17 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
     return <p className="plain-text">{entry.content}</p>
   }
 
-  return <Column gap={4}>
-    <Text appearance="body2">{entry.content}</Text>
+  return <Flex flexDirection="column">
+    <Text appearance="body2" mb={4}>{entry.content}</Text>
     {isLast && renderInputs()}
-  </Column>
+  </Flex>
 }
 
 const UserInfo = ({ entry }: { entry: TextChatEntry }) => {
   switch (entry.agentType) {
     case 'user': return
     case 'bot': return <AgentInfo agent={entry.agent} />
-    case 'system': return <AgentInfo agent={{ id: 'system', label: 'System' }} icon={<Icon icon="Cog" />} />
+    case 'system': return <AgentInfo agent={{ id: 'system', label: 'System' }} icon={<Cog />} />
   }
 }
 
@@ -298,9 +301,9 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
 
     return <form>
       <RenderInputsEntry entry={entry} isLast={isLast} value={value} setValue={setValue} setLabels={setLabels} labels={labels} />
-      <div style={{ marginTop: theme.spacing[4] }}>
+      <Box mt="4">
         {renderActions()}
-      </div>
+      </Box>
     </form>
   }
 
@@ -321,7 +324,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
           {(entry.content || entry.steps || entry.upload?.length) && (
             <div className={listToClass(['message-content', entry.card && 'card', entry.type])}>
               {!!entry.badges?.length && <div className="badges">
-                {entry.badges.map((b, index) => <Badge key={index} colorPalette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
+                {entry.badges.map((b, index) => <Badge key={index} palette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
               </div>}
               {renderContent()}
             
@@ -331,7 +334,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
           
           {entry.error && (
             <div className="error">
-              <Icon icon="TimesCircle" size="xs" />
+              <IconBox size="xs"><TimesCircle /></IconBox>
               <Text appearance="microtext1">{entry.error}</Text>
             </div>
           )}
@@ -346,13 +349,12 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
           label={t.tools}
           images={entry.tools.slice(0, 3).map((id) => {
             const tool = toolById(id, toolKits)
-            return { key: id, name: tool?.name || id, icon: <Icon icon="Cog" />, url: tool?.image }
+            return { key: id, name: tool?.name || id, icon: <Cog />, url: tool?.image }
           })}
           onClick={openToolsPanel}
-          style={{ marginTop: '12px', width: 'fit-content' }}
         />}
         {!!entry.knowledgeSources?.length && <div className="ks-box">
-          <Text appearance="microtext1" color="light.700">Knowledge Sources:</Text>
+          <Text appearance="microtext1" colorScheme="light.700">Knowledge Sources:</Text>
           <ul>{entry.knowledgeSources.map((ks, index) => (
             <li key={index}>
               <Button size="sm" colorScheme="light" onClick={() => detailKS(ks)}>{ks.name}</Button>
@@ -363,35 +365,38 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
         {shouldShowFooter && <div className="message-footer">
           {entry.agentType === 'bot' && !entry.error && <div className="message-actions">
             {entry.type === 'md' && (
-              <IconButton
-                icon="Copy"
-                className="copy-btn"
-                appearance="square"
-                title={t.copy}
-                aria-label={t.copy}
-                feedback={t.copied}
-                onClick={handleCopy}
-              />
-            )}
-            {entry.messageId && (
-              <>
-                <IconButton
-                  group={liked === true ? 'fill' : 'outline'}
-                  icon="Like"
-                  appearance="square"
-                  title={t.like}
-                  aria-label={t.like}
-                  onClick={like}
-                />
+              copied ? (
+                <Tooltip text={t.copied} position={'right'}>
+                  <IconButton
+                    appearance="square"
+                    colorBg="light"
+                    title={t.copied}
+                    aria-label={t.copied}
+                    onClick={handleCopy}
+                  >
+                    <Check />
+                  </IconButton>
+                </Tooltip>
+              ) : (
                 <IconButton
-                  group={liked === false ? 'fill' : 'outline'}
-                  icon="Dislike"
                   appearance="square"
                   color="light"
-                  title={t.dislike}
-                  aria-label={t.dislike}
-                  onClick={dislike}
-                />
+                  title={t.copy}
+                  aria-label={t.copy}
+                  onClick={handleCopy}
+                >
+                  <Copy />
+                </IconButton>
+              )
+            )}
+            {entry.messageId && (
+              <>
+                <IconButton appearance="square" color="light" title={t.like} aria-label={t.like} onClick={like}>
+                  {liked === true ? <LikeFill /> : <Like />}
+                </IconButton>
+                <IconButton appearance="square" color="light" title={t.dislike} aria-label={t.dislike} onClick={dislike}>
+                  {liked === false ? <DislikeFill /> : <Dislike />}
+                </IconButton>
               </>
             )}
           </div>}
@@ -399,33 +404,37 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
           {entry.agentType === 'user' && (
             <div className="message-actions">
               {copied ? (
-                <Tooltip content={t.copied} position={'left'}>
+                <Tooltip text={t.copied} position={'left'}>
                   <IconButton
-                    icon="Check"
                     appearance="square"
+                    colorBg="light"
                     title={t.copied}
                     aria-label={t.copied}
                     size="sm"
-                  />
+                  >
+                    <Check />
+                  </IconButton>
                 </Tooltip>
               ) : (
                 showUserButtonCopy && (
                   <div className="action-bar">
                     <IconButton
-                      icon="Copy"
                       appearance="square"
+                      color="light"
                       title={t.copy}
                       aria-label={t.copy}
                       onClick={handleCopy}
                       size="sm"
-                    />
+                    >
+                      <Copy className="copy-btn"/>
+                    </IconButton>
                   </div>
                 )
               )}
             </div>
           )}
 
-          <Text appearance="microtext1" className="chat-date">
+          <Text as="label" appearance="microtext1" className="chat-date">
             {dateFormatter.formatForChatMessage(date)}
           </Text>
         </div>}

package/src/views/Chat/StepsList.tsx

@@ -1,12 +1,13 @@
-import { Icon } from '@stack-spot/citric-icons'
-import { Button, ProgressCircular, Text } from '@stack-spot/citric-react'
+import { Button, IconBox, Text } from '@citric/core'
+import { CheckCircleFill, PlayFill, Spaces, 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 { theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { findLastIndex } from 'lodash'
 import { useState } from 'react'
 import { useWidget } from '../../context/hooks'
+import { PropsOf } from '../../types'
 
 interface Props {
   steps: ChatStep[],
@@ -22,12 +23,12 @@ interface StepProps {
 }
 
 function getStatusIcon(status: ChatStep['status']) {
-  const iconProps = { style: { color: theme.color.light[700] }, size: 'xs' } as const
+  const iconBoxProps: PropsOf<typeof IconBox> = { colorIcon: 'light.700', size: 'xs' }
   switch (status) {
-    case 'error': return <Icon group="fill" icon="TimesCircle" {...iconProps} />
-    case 'success': return <Icon group="fill" icon="CheckCircle" {...iconProps} />
-    case 'pending': return <Icon icon="Spaces" {...iconProps} />
-    case 'running': return <ProgressCircular className="loading" colorScheme="inverse" size="xs" />
+    case 'error': return <IconBox {...iconBoxProps}><TimesCircleFill /></IconBox>
+    case 'success': return <IconBox {...iconBoxProps}><CheckCircleFill /></IconBox>
+    case 'pending': return <IconBox {...iconBoxProps}><Spaces /></IconBox>
+    case 'running': return <LoadingCircular className="loading" colorScheme="inverse" size="xs" />
   }
 }
 
@@ -36,7 +37,7 @@ const Step = ({ step, index, total, onClick }: StepProps) => {
   return (
     <li tabIndex={onClick ? 0 : undefined} onClick={onClick} role={onClick ? 'button' : 'listitem'}>
       <div className="step-status-icon">{getStatusIcon(step.status)}</div>
-      <Text className="step-title" appearance="microtext1" color="light.700">
+      <Text className="step-title" appearance="microtext1" colorScheme="light.700">
         {t.step} {index}/{total}: {step.input}
       </Text>
     </li>
@@ -73,7 +74,7 @@ export const StepsList = ({ steps, chatId, messageId }: Props) => {
         {isExpanded && <div className="step-actions">
           <Button colorScheme="light" size="sm" onClick={() => setExpanded(false)}>{t.hideSteps}</Button>
           <Button colorScheme="light" size="sm" className="icon-button details" onClick={openToolsPanel}>
-            <Icon group="fill" icon="Play" size="xs" />
+            <IconBox size="xs"><PlayFill /></IconBox>
             {t.detailed}
           </Button>
         </div>}