@stack-spot/ai-chat-widget 1.38.2-beta.1 → 2.0.0-beta.1

package/src/views/Agents/useAgentFavorites.ts

@@ -2,14 +2,14 @@
 import { agentToolsClient } from '@stack-spot/portal-network'
 
 export function useAgentFavorites() {
-  const useFavorites = () => agentToolsClient.agents.useQuery({ visibility: 'favorite' })
+  const useFavorites = () => agentToolsClient.agents.useQuery({ request: { visibility: 'favorite' } })
   const [addFavorite, pendingAddFav] = agentToolsClient.addFavorite.useMutation()
   const [removeFavorite, pendingRemoveFav] = agentToolsClient.removeFavorite.useMutation()
 
   const removeFavoriteAgent = async (idOrSlug?: string) => {
     try {
       await removeFavorite({ agentId: idOrSlug || '' })
-      await agentToolsClient.agents.invalidate({ visibility: 'favorite' })
+      await agentToolsClient.agents.invalidate({ request: { visibility: 'favorite' } })
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error(error)
@@ -19,7 +19,7 @@ export function useAgentFavorites() {
   const addFavoriteAgent = async (idOrSlug?: string) => {
     try {
       await addFavorite({ agentId: idOrSlug || '' })
-      await agentToolsClient.agents.invalidate({ visibility: 'favorite' })
+      await agentToolsClient.agents.invalidate({ request: { visibility: 'favorite' } })
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error(error)

package/src/views/Chat/AgentInfo.tsx

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

package/src/views/Chat/ChatMessage.tsx

@@ -1,8 +1,7 @@
-import { Box, Button, Checkbox, Flex, IconBox, Input, Label, Radio, Text } from '@citric/core'
-import { Agent, Check, Cog, Copy, Dislike, DislikeFill, Like, LikeFill, TimesCircle } from '@citric/icons'
-import { Avatar, AvatarGroup, Badge, IconButton, Tooltip } from '@citric/ui'
+import { Icon } from '@stack-spot/citric-icons'
+import { Alert, Badge, Button, CheckboxGroup, Column, IconButton, ImageBox, ImageWithFallback, Input, RadioGroup, Row, Text, Tooltip } from '@stack-spot/citric-react'
 import { agentToolsClient } from '@stack-spot/portal-network'
-import { listToClass } from '@stack-spot/portal-theme'
+import { listToClass, theme } 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'
@@ -11,6 +10,7 @@ import 'react-international-phone/style.css'
 import { FileDescription } from '../../components/FileDescription'
 import { Markdown } from '../../components/Markdown'
 import { useChatEntry, useCurrentChat, useWidget } from '../../context/hooks'
+import { useMidnightUpdateView } from '../../hooks/midnight-update-view'
 import { ChatEntry, SerializableAction, TextChatEntry } from '../../state/ChatEntry'
 import { useDateFormatter } from '../../utils/date'
 import { toolById } from '../../utils/tools'
@@ -19,6 +19,21 @@ import { useChatScrollToBottomEffect } from './chat-scroll'
 import { onCopyAll, onCopyCode, onLikeOrDislike } from './events'
 import { StepsList } from './StepsList'
 
+export interface CustomRenderResult {
+  /**
+   * The React Element to render.
+   */
+  content: React.ReactElement,
+  /**
+   * If set to "prepend" or "append", instead of replacing the default rendering of the message, it will complement it, by rendering this
+   * custom content in addition to the default rendering.
+   * 
+   * - prepend: place the custom content before the default rendering;
+   * - append: place the custom content after the default rendering.
+   */
+  mode: 'prepend' | 'append' | 'replace',
+}
+
 export interface CustomMessage {
   /**
    * React component to render before each message in the chat. It receives the message as a prop.
@@ -28,6 +43,14 @@ export interface CustomMessage {
    * React component to render after each message in the chat. It receives the message as a prop.
    */
   afterMessage?: React.FC<{ message: ChatEntry }>,
+  /**
+   * A custom message renderer. The custom message can replace or complement the original message.
+   * 
+   * @param message the message to render.
+   * @returns a CustomRenderResult or undefined. If undefined, no custom message is added to the view and the default message renderer is
+   * used.
+   */
+  customRenderer?: (message: TextChatEntry) => CustomRenderResult | undefined,
 }
 
 interface Props extends CustomMessage {
@@ -57,49 +80,47 @@ 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] ?? ''}
-        sx={{ maxWidth: '500px' }}
+        style={{ maxWidth: '500px' }}
         autoFocus
-        {...entry.validations} onChange={(data) => setValue([data.target.value])} required={entry.required} />
+        {...entry.validations}
+        onChange={v => setValue([v])}
+        required={entry.required}
+      />
     }
 
     if (entry.type === 'input-radio') {
-      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>
+      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>
+        )}
+      />  
     }
 
     if (entry.type === 'button-list') {
-      return <Flex className="button-group" style={{ gap: '8px' }}>
+      return <Row className="button-group" 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),
@@ -107,46 +128,46 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
           }}
         >
           {item.label}
-        </Button>)
-        }</Flex>
+        </Button>)}
+      </Row>
     }
 
     if (entry.type === 'input-checkbox') {
-      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])
+      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>
             }
-          }}/>
-          <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>
+          </Row>
+        )}
+      />
     }
 
     if (entry.type === 'input-phone') {
@@ -161,24 +182,24 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
     return <p className="plain-text">{entry.content}</p>
   }
 
-  return <Flex flexDirection="column">
-    <Text appearance="body2" mb={4}>{entry.content}</Text>
+  return <Column gap={4}>
+    <Text appearance="body2">{entry.content}</Text>
     {isLast && renderInputs()}
-  </Flex>
+  </Column>
 }
 
 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={<Cog />} />
+    case 'system': return <AgentInfo agent={{ id: 'system', label: 'System' }} icon={<Icon icon="Cog" />} />
   }
 }
 
 /**
  * Renders a message (ChatEntry) in the chat.
  */
-export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Props) => {
+export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, customRenderer }: Props) => {
   const t = useTranslate(dictionary)
   const [liked, setLiked] = useState<boolean | undefined>()
   const [value, setValue] = useState<string[]>(message.getValue()?.initialValue ?? [])
@@ -199,6 +220,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
   const [showUserButtonCopy, setShowUserButtonCopy] = useState(false)
 
   useChatScrollToBottomEffect(ref, [entry])
+  useMidnightUpdateView()
 
   const detailKS = useCallback(({ name, slug, documentScore, documentId }: Required<TextChatEntry>['knowledgeSources'][number]) => {
     widget.set('currentKSInPanel', { name, slug, score: documentScore, documentId })
@@ -285,16 +307,24 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
   }
 
   const renderContent = () => {
+    const custom = customRenderer?.(entry)
+    if (custom?.mode === 'replace') return custom.content
+
     if (entry.type === 'md') {
       return <>
         {renderUploads()}
+        {custom?.mode === 'prepend' && custom.content}
         <Markdown onCopyCode={(code) => onCopyCode(code, entry.messageId ?? '', chat)}>{entry.content}</Markdown>
+        {custom?.mode === 'append' && custom.content}
         {renderActions()}
       </>
     }
+
     if (entry.type === 'text') {
       return <>
+        {custom?.mode === 'prepend' && custom.content}
         <p className="plain-text">{entry.content}</p>
+        {custom?.mode === 'append' && custom.content}
         {renderUploads()}
         {renderActions()}
       </>
@@ -302,24 +332,17 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
 
     return <form>
       <RenderInputsEntry entry={entry} isLast={isLast} value={value} setValue={setValue} setLabels={setLabels} labels={labels} />
-      <Box mt="4">
+      <div style={{ marginTop: theme.spacing[4] }}>
         {renderActions()}
-      </Box>
+      </div>
     </form>
   }
 
-  // function openToolsPanel() {
-  //   widget.set('currentMessageInPanel', { chatId: chat.id, messageId: message.id })
-  //   widget.set('panel', 'tools')
-  // }
-
   function openResourcesPanel() {
     widget.set('currentMessageInPanel', { chatId: chat.id, messageId: message.id })
     widget.set('panel', 'resources')
   }
 
-
-
   return (entry.content || entry.error || !!entry.steps?.length || entry.upload?.length) && (
     <li key={entry.messageId} className={entry.agentType} ref={ref}>
       <div className="chat-message-container"
@@ -331,7 +354,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} palette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
+                {entry.badges.map((b, index) => <Badge key={index} colorPalette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
               </div>}
               {renderContent()}
             
@@ -339,12 +362,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
             </div>
           )}
           
-          {entry.error && (
-            <div className="error">
-              <IconBox size="xs"><TimesCircle /></IconBox>
-              <Text appearance="microtext1">{entry.error}</Text>
-            </div>
-          )}
+          {entry.error && <Alert type="error">{entry.error}</Alert>}
         </div>
         {afterMessage && createElement(afterMessage, { message })}
         {/* {!!entry.tools?.length && <StackedBadge
@@ -356,13 +374,14 @@ 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: <Cog />, url: tool?.image }
+            return { key: id, name: tool?.name || id, icon: <Icon icon="Cog" />, url: tool?.image }
           })}
           onClick={openToolsPanel}
+          style={{ marginTop: '12px', width: 'fit-content' }}
         />} */}
 
         {!!entry.knowledgeSources?.length && <div className="ks-box">
-          <Text appearance="microtext1" colorScheme="light.700">Knowledge Sources:</Text>
+          <Text appearance="microtext1" color="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>
@@ -371,62 +390,66 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
         </div>}
 
         {(!!agentsTools?.length || !!entry.tools?.length) && <div className="tools-box">
-          <AvatarGroup onClick={openResourcesPanel} aria-label={t.openResourcesPanel} role="button">
+          <Button appearance="none" onClick={openResourcesPanel} aria-label={t.openResourcesPanel}>
             {agentsTools?.map((agent) => (
-              <Avatar size="xxs" key={agent.id} className="agent-info-avatar-resource">
-                {agent.avatar ? 
-                  <img alt={agent.name} aria-label={agent.name} title={agent.name} src={agent.avatar} /> : 
-                  <IconBox appearance="circle" aria-label={agent.name} title={agent.name} color="gray"><Agent /></IconBox>}
-              </Avatar>
+              <ImageBox key={agent.id} className="agent-info-avatar-resource">
+                <ImageWithFallback
+                  src={agent.avatar ?? undefined}
+                  fallback={<Icon icon="Agent" />}
+                  alt={agent.name}
+                  aria-label={agent.name}
+                  title={agent.name}
+                />
+              </ImageBox>
             ))}
             {entry.tools?.map((id) => {
               const tool = toolById(id, toolKits)
               return (
-                <Avatar size="xxs" key={id} className="agent-info-avatar-resource">
-                  {tool?.image ? 
-                    <img alt={tool.name} aria-label={tool.name} title={tool.name} src={tool.image} /> : 
-                    <IconBox appearance="circle" aria-label={tool?.name} title={tool?.name} color="gray"><Cog /></IconBox>}
-                </Avatar>
+                <ImageBox key={id} className="agent-info-avatar-resource">
+                  <ImageWithFallback
+                    src={tool?.image}
+                    fallback={<Icon icon="Cog" />}
+                    alt={tool?.name}
+                    aria-label={tool?.name}
+                    title={tool?.name}
+                  />
+                </ImageBox>
               )})}
-
-          </AvatarGroup>
+          </Button>
         </div>}
     
         {shouldShowFooter && <div className="message-footer">
           {entry.agentType === 'bot' && !entry.error && <div className="message-actions">
             {entry.type === 'md' && (
-              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
-                  appearance="square"
-                  color="light"
-                  title={t.copy}
-                  aria-label={t.copy}
-                  onClick={handleCopy}
-                >
-                  <Copy />
-                </IconButton>
-              )
+              <IconButton
+                icon="Copy"
+                className="copy-btn"
+                appearance="square"
+                title={t.copy}
+                aria-label={t.copy}
+                feedback={t.copied}
+                onClick={handleCopy}
+              />
             )}
             {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>
+                <IconButton
+                  group={liked === true ? 'fill' : 'outline'}
+                  icon="Like"
+                  appearance="square"
+                  title={t.like}
+                  aria-label={t.like}
+                  onClick={like}
+                />
+                <IconButton
+                  group={liked === false ? 'fill' : 'outline'}
+                  icon="Dislike"
+                  appearance="square"
+                  color="light"
+                  title={t.dislike}
+                  aria-label={t.dislike}
+                  onClick={dislike}
+                />
               </>
             )}
           </div>}
@@ -434,37 +457,33 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
           {entry.agentType === 'user' && (
             <div className="message-actions">
               {copied ? (
-                <Tooltip text={t.copied} position={'left'}>
+                <Tooltip content={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 as="label" appearance="microtext1" className="chat-date">
+          <Text appearance="microtext1" className="chat-date">
             {dateFormatter.formatForChatMessage(date)}
           </Text>
         </div>}
@@ -481,7 +500,6 @@ const dictionary = {
     tools: 'Tools',
     openToolsPanel: 'Open the tools panel to see more details.',
     openResourcesPanel: 'Open the resources panel to see more details.',
-    
     copied: 'Copied',
   },
   pt: {

package/src/views/Chat/ChatMessages.tsx

@@ -11,7 +11,7 @@ interface Props extends CustomMessage {
 /**
  * Renders all messages of a chat.
  */
-export const ChatMessages = ({ chatId, username, beforeMessage, afterMessage }: Props) => {
+export const ChatMessages = ({ chatId, username, beforeMessage, afterMessage, customRenderer }: Props) => {
   const messages = useChatMessages(chatId)
   const items = useMemo(
     () => messages.map((m, index) => <ChatMessage
@@ -21,6 +21,7 @@ export const ChatMessages = ({ chatId, username, beforeMessage, afterMessage }:
       isLast={index === messages.length - 1}
       beforeMessage={beforeMessage}
       afterMessage={afterMessage}
+      customRenderer={customRenderer}
     />),
     [messages],
   )

package/src/views/Chat/StepsList.tsx

@@ -1,13 +1,12 @@
-import { Button, IconBox, Text } from '@citric/core'
-import { CheckCircleFill, PlayFill, Spaces, TimesCircleFill } from '@citric/icons'
-import { LoadingCircular } from '@citric/ui'
+import { Icon } from '@stack-spot/citric-icons'
+import { Button, ProgressCircular, Text } from '@stack-spot/citric-react'
 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[],
@@ -23,12 +22,12 @@ interface StepProps {
 }
 
 function getStatusIcon(status: ChatStep['status']) {
-  const iconBoxProps: PropsOf<typeof IconBox> = { colorIcon: 'light.700', size: 'xs' }
+  const iconProps = { style: { color: theme.color.light[700] }, size: 'xs' } as const
   switch (status) {
-    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" />
+    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" />
   }
 }
 
@@ -37,7 +36,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" colorScheme="light.700">
+      <Text className="step-title" appearance="microtext1" color="light.700">
         {t.step} {index}/{total}: {step.input}
       </Text>
     </li>
@@ -74,7 +73,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}>
-            <IconBox size="xs"><PlayFill /></IconBox>
+            <Icon group="fill" icon="Play" size="xs" />
             {t.detailed}
           </Button>
         </div>}

package/src/views/Chat/index.tsx

@@ -12,7 +12,14 @@ interface Props extends CustomMessage {
 /**
  * Renders the chat panel, with all of its messages.
  */
-export const Chat = ({ username, beforeMessage, afterMessage }: Props) => {
+export const Chat = ({ username, beforeMessage, afterMessage, customRenderer }: Props) => {
   const { active } = useChatTabs()
-  return <ChatMessages key={active.id} chatId={active.id} username={username} beforeMessage={beforeMessage} afterMessage={afterMessage} />
+  return <ChatMessages
+    key={active.id}
+    chatId={active.id}
+    username={username}
+    beforeMessage={beforeMessage}
+    afterMessage={afterMessage}
+    customRenderer={customRenderer}
+  />
 }