@stack-spot/ai-chat-widget 2.2.0-beta.1 → 2.3.0-alpha.1

package/src/views/Chat/StepsList.tsx

@@ -1,389 +1,96 @@
-import { Accordion, Badge, Button, Card, Column, Divider, Icon, IconBox, ImageWithFallback, ProgressCircular, Row, Skeleton, Text } from '@stack-spot/citric-react'
+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, ToolChatStep } from '@stack-spot/portal-network'
+import { ChatStep, StepChatStep } from '@stack-spot/portal-network'
 import { theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { findLast, findLastIndex } from 'lodash'
-import React, { useEffect, useMemo } from 'react'
-import styled from 'styled-components'
-import { Markdown } from '../../components/Markdown'
-import { useChat, useChatMessages, useCurrentChat, useCurrentChatMessages, useWidget } from '../../context/hooks'
-import { ChatEntry } from '../../state/ChatEntry'
-import { planningToolDictionaryHelper } from '../../utils/planning-tool'
-import { updateToolStep } from '../../utils/update-tool-step'
-import { onCopyCode } from './events'
+import { findLastIndex } from 'lodash'
+import { useState } from 'react'
+import { useWidget } from '../../context/hooks'
 
 interface Props {
   steps: ChatStep[],
   messageId: number,
   chatId: string,
-  userHasAlreadyAnswered?: boolean,
-}
-
-interface StepChatStepWithTarget extends Omit<StepChatStep, 'status' | 'id' | 'type'> {
-  status: 'pending' | 'running' | 'success' | 'error' | 'target' | 'awaiting_approval',
 }
 
 interface StepProps {
-  step: StepChatStepWithTarget,
+  step: StepChatStep,
   index: number,
-  total?: number,
-  totalTools?: number,
-  isAllDone?: boolean,
+  total: number,
   onClick?: () => void,
 }
 
-function getStatusIcon(status: StepChatStepWithTarget['status'] | 'target', isDone?: boolean) {
+function getStatusIcon(status: ChatStep['status']) {
   const iconProps = { style: { color: theme.color.light[700] }, size: 'xs' } as const
   switch (status) {
     case 'error': return <Icon group="fill" icon="TimesCircle" {...iconProps} />
     case 'success': return <Icon group="fill" icon="CheckCircle" {...iconProps} />
-    case 'pending': return <Icon group="fill" icon="Circle" {...iconProps} style={{ color: theme.color.light[600] }} />
-    case 'awaiting_approval': return <Icon group="fill" icon="ExclamationTriangle" {...iconProps} />
-    case 'target': return <Icon icon="Target" {...iconProps} style={{ color: isDone ? theme.color.light[700] : theme.color.light[600] }} />
+    case 'pending': return <Icon icon="Spaces" {...iconProps} />
     case 'running': return <ProgressCircular className="loading" colorScheme="inverse" size="xs" />
   }
 }
 
-const StepAccordionHeader = ({ step, index, expand }: Pick<StepProps, 'step' | 'index'> & { expand: React.ReactElement }) => {
-  const t = useTranslate(dictionary)
-  return <Row gap="8px">
-    {expand}
-    {step.status === 'target' ? <Text className="step-title" appearance="body2" color="light.700">{t.planGoal}:</Text> :
-      <Badge colorScheme="inverse" appearance="square">
-        {t.step} {index}
-      </Badge>}
-    <Text className="step-title" appearance="body2">
-      {step.input}
-    </Text>
-    {step.status === 'awaiting_approval' &&
-      <Badge appearance="square" style={{ backgroundColor: theme.color.gray[800], color: theme.color.gray[50] }}>
-        <Icon icon="Security" />
-        {t.pendingReview}
-      </Badge>}
-  </Row>
-}
-
-const StyledCard = styled(Card)`
-  &:hover { 
-    background-color: ${theme.color.light[500]}
-  }
-`
-
-const Step = ({ step, index, onClick, total, totalTools, isAllDone }: StepProps) => {
+const Step = ({ step, index, total, onClick }: StepProps) => {
   const t = useTranslate(dictionary)
-  const status = getStatusIcon(step.status, isAllDone)
-  const hasTools = step.attempts?.[0]?.tools && step.attempts?.[0]?.tools?.length > 0
-
   return (
     <li tabIndex={onClick ? 0 : undefined} onClick={onClick} role={onClick ? 'button' : 'listitem'}>
-      <Row gap="4px" alignItems="center">
-        <div className="step-status-icon">{status}</div>
-        <StyledCard p="8px" w="80%">
-          <Accordion header={expand => <StepAccordionHeader step={step} index={index} expand={expand} />}>
-            <Column pt="12px">
-              {total ?
-                <Row gap="40px">
-                  <Row gap="4px">
-                    <Icon icon="Hashtag" size="sm" color="light.700" />
-                    <Text color="light.700">{t.totalSteps}</Text>
-                    {total}
-                  </Row>
-                  <Row gap="4px">
-                    <Icon icon="BorderRadius" size="sm" color="light.700" />
-                    <Text color="light.700">{t.totalTools}</Text>
-                    {totalTools ?? 0}
-                  </Row>
-                </Row>
-                : <>
-                  <Row pb="8px">
-                    <Icon icon="Target" size="sm" color="light.700" />
-                    <Text color="light.700" tag="span" style={{ margin: '0 4px' }}>{t.stepGoal}:</Text>
-                    <Text tag="span">
-                      {step.input}
-                    </Text>
-                  </Row>
-                  {hasTools ? <>
-                    <Row gap="4px">
-                      <Icon icon="BorderRadius" size="sm" color="light.700" />
-                      <Text color="light.700">{t.toolsToBeExecuted}:</Text>
-                    </Row>
-                    <ul className="tools-list">
-                      {step.attempts?.[0]?.tools?.map((tool, index) => (<li key={`${tool.id}-${index}`}>
-                        <Text>{tool.name}: {tool.goal}</Text>
-                      </li>))}
-                    </ul>
-                  </> : <Row gap="4px">
-                    <Icon icon="BorderRadius" size="sm" color="light.700" />
-                    <Text color="light.700">{t.noToolToBeUsed}</Text>
-                  </Row>
-                  }
-                </>
-              }
-            </Column>
-          </Accordion>
-        </StyledCard>
-      </Row>
+      <div className="step-status-icon">{getStatusIcon(step.status)}</div>
+      <Text className="step-title" appearance="microtext1" color="light.700">
+        {t.step} {index}/{total}: {step.input}
+      </Text>
     </li>
   )
 }
 
-export const StepsPlaceholder = () => {
-  const t = useTranslate(dictionary)
-  return <Card gap="8px">
-    <Row gap="8px">
-      <ProgressCircular colorScheme="inverse" size="xs" />
-      <Text color="light.700">{t.generatingPlan}</Text>
-    </Row>
-    <Text color="light.700">
-      {t.analyzingRequirements}
-    </Text>
-    <Row gap="12px">
-      <Skeleton height="31px" width="148px" bgLevel={600} />
-      <Skeleton height="31px" width="148px" bgLevel={600} />
-      <Skeleton height="31px" width="148px" bgLevel={600} />
-      <Skeleton height="31px" width="148px" bgLevel={600} />
-    </Row>
-  </Card>
-}
-
-const AwaitingApproval = ({ customApproveText, chatId }: { chatId: string, customApproveText?: string }) => {
-  const t = useTranslate(dictionary)
-  const chat = useChat(chatId)
-
-  const onAnswer = (response: string) => {
-    chat.pushMessage(ChatEntry.createUserEntry('', false, undefined, undefined, response))
-  }
-
-  return <>
-    <Row gap="8px">
-      <Button colorScheme="light" onClick={() => onAnswer(t.cancel)}>
-        <Row gap="8px">
-          <Icon icon="Stop" />
-          {t.cancel}
-        </Row>
-      </Button>
-
-      <Button colorScheme="inverse" onClick={() => onAnswer(customApproveText ?? t.approve)}>
-        <Row gap="8px">
-          <Icon group="fill" icon="Play" />
-          {customApproveText ?? t.approve}
-        </Row>
-      </Button>
-    </Row>
-  </>
-}
-
-export const ToolStepsList = ({ toolStep, messageId, chatId }: { toolStep: ToolChatStep, messageId: number, chatId: string }) => {
-  const t = useTranslate(dictionary)
-  const chat = useCurrentChat()
-  const messages = useCurrentChatMessages()
-  const inputParsed = `\`\`\`json
-    ${JSON.stringify(toolStep?.input, null, 2)}
-  \`\`\``
-
-  const tool = useMemo(() => {
-    if (!toolStep) return undefined
-    return toolStep.attempts?.[0].tools?.[0]
-  }, [toolStep])
-
-  useEffect(() => {
-    if (!toolStep) return undefined
-    const executionId = toolStep.attempts?.[0].tools?.[0].executionId
-    if (!executionId) return
-
-    updateToolStep(messages, executionId, toolStep.status)
-
-  }, [messages, toolStep, toolStep.status])
-
-  return <>
-    {toolStep && tool ? <AnimatedHeight>
-      <div className="steps">
-        <Badge colorPalette="yellow" appearance="square">
-          <Icon icon="StopWatch" />
-          <Text>{tool.name} {t.keepWorking}</Text>
-        </Badge>
-        <Card mt="16px" gap="8px" bgLevel={500}>
-          <Row>
-            <ImageWithFallback src={tool.image} width="32px" fallback={<IconBox appearance="circle" icon="StackSpot" />} />
-            <Text>{tool.name}</Text>
-          </Row>
-
-          <Text>
-            {toolStep.user_question}
-          </Text>
-
-          <Accordion header={expand => <Row gap="8px" mb="4px">
-            <Card p="4px" bgLevel={400}>{expand}</Card>
-            <Text > {t.viewDetails} </Text>
-          </Row>}>
-            <Markdown onCopyCode={(code) => onCopyCode(code, `${messageId}`, chat)}>
-              {inputParsed}
-            </Markdown>
-          </Accordion>
-
-          <AwaitingApproval customApproveText={t.approveTool} chatId={chatId} />
-        </Card>
-      </div>
-    </AnimatedHeight> : null}
-  </>
-}
-
-export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }: Props) => {
+export const StepsList = ({ steps, chatId, messageId }: Props) => {
   const t = useTranslate(dictionary)
-
-  const filteredSteps = steps.filter(s => s.type === 'step')
-  const actualSteps = useMemo(() => filteredSteps.filter((item) => {
-    const messageIdForStep = planningToolDictionaryHelper.getMessageIdFromStepId(item.id)
-    if (!messageIdForStep) {
-      planningToolDictionaryHelper.setMessageIdForStepId(messageId, item.id)
-      return true
-    } else if (messageIdForStep === messageId) {
-      return true
-    }
-    // If a step is from a planning and it is already inserted in the planningToolDictionaryHelper it means the step is already in a 
-    // previous message and we do not want to show it again (for instance, when required a approval in the planning, we will have 
-    // two messages with the same step id one for the planning awaiting and one for the planning end, so we want to show only one) 
-    return false
-  }), [filteredSteps])
-
-  const planning = steps.filter(s => s.type === 'planning')
-
-  useEffect(() => {
-    actualSteps.map((item) => {
-      const executionId = item.attempts[0]?.tools?.[0].executionId
-      if (executionId) {
-        planningToolDictionaryHelper.setMessageIdPlanningStepToolExecutionId(`${messageId}`, executionId)
-      }
-    })
-  }, [actualSteps, messageId])
-
-  const toolsStep = findLast(steps, s => s.type === 'tool')
-
-  useEffect(() => {
-    const executionId = toolsStep?.attempts?.[0]?.tools?.[0]?.executionId
-    if (executionId) {
-      planningToolDictionaryHelper.setMessageIdToolStepToolExecutionId(`${messageId}`, executionId)
-    }
-  }, [toolsStep, messageId])
-
-  const planningGoal = planning?.[0]?.goal
-  const isLastStepDone = actualSteps[actualSteps.length - 1]?.status !== 'running' &&
-    actualSteps[actualSteps.length - 1]?.status !== 'pending'
-  const totalTools = useMemo(() => actualSteps?.reduce((sum, step) => {
-    const firstAttempt = step.attempts && step.attempts[0]
-    const toolsCount = firstAttempt.tools?.length ?? 0
-    return sum + toolsCount
-  }, 0), [steps])
-
+  const [isExpanded, setExpanded] = useState(false)
+  const actualSteps = steps.filter(s => s.type === 'step')
   let currentStepIndex = findLastIndex(actualSteps, s => s.status === 'running' || s.status === 'success')
   if (currentStepIndex === -1) currentStepIndex = 0
+  const widget = useWidget()
 
-  return (<>
-    {actualSteps.length > 0 ? <AnimatedHeight>
+  function openToolsPanel() {
+    widget.set('currentMessageInPanel', { chatId, messageId })
+    widget.set('panel', 'steps')
+  }
+  
+  return (
+    <AnimatedHeight>
       <div className="steps">
-        <Row gap="14px" mb="8px" ml="5px">
-          <Icon icon="Target" size="sm" color="light.600" />
-          <Text>{t.executionPlan}</Text>
-        </Row>
-
-        <ul className="steps-list">
-          {actualSteps.map((s, i) => <Step step={s} key={i} index={i + 1} />)}
-
-          <Step
-            step={{ status: 'target', input: planningGoal, attempts: [] }}
-            index={currentStepIndex + 1}
-            total={actualSteps.length}
-            totalTools={totalTools}
-            isAllDone={isLastStepDone}
-          />
+        <ul>
+          {isExpanded
+            ? actualSteps.map((s, i) => <Step step={s} key={i} index={i + 1} total={actualSteps.length} />)
+            : <Step
+              step={actualSteps[currentStepIndex]}
+              index={currentStepIndex + 1}
+              total={actualSteps.length}
+              onClick={() => setExpanded(true)}
+            />
+          }
         </ul>
-
-        <Column gap="8px" mt="8px">
-          <Divider colorScheme="light" />
-          <Text color="light.700">{planning?.[0]?.user_question}</Text>
-          {!userHasAlreadyAnswered && planning?.[0]?.status === 'awaiting_approval' &&  <AwaitingApproval chatId={chatId} />}
-        </Column>
-
+        {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" />
+            {t.detailed}
+          </Button>
+        </div>}
       </div>
-    </AnimatedHeight> : null}
-
-    {toolsStep && toolsStep.status === 'awaiting_approval' && !userHasAlreadyAnswered && 
-      <ToolStepsList toolStep={toolsStep} messageId={messageId} chatId={chatId} />}
-  </>
+    </AnimatedHeight>
   )
 }
 
-export const ViewToolsDetails = ({ chatId }: { chatId: string }) => {
-  const t = useTranslate(dictionary)
-  const messages = useChatMessages(chatId)
-  const messageId = useMemo(() => {
-    const messageWithPlanning = findLast(messages, (message) => {
-      const steps = message.getValue().steps
-      const planningStep = steps?.find((step) => step.type === 'planning' && step.status === 'success')
-      return planningStep ? true : false
-    })
-    return messageWithPlanning?.id
-
-  }, [messages])
-  const widget = useWidget()
-
-  function openToolsPanel() {
-    if (messageId) {
-      widget.set('currentMessageInPanel', { chatId, messageId })
-      widget.set('panel', 'steps')
-    }
-  }
-
-  return <>
-    <div className="step-actions">
-      <Button colorScheme="light" size="sm" className="icon-button details" onClick={openToolsPanel}>
-        <Icon group="fill" icon="Play" size="xs" />
-        {t.detailed}
-      </Button>
-    </div>
-  </>
-}
-
 const dictionary = {
   en: {
     step: 'Step',
     hideSteps: 'Hide steps',
     detailed: 'View detailed mode',
-    generatingPlan: 'Generating execution plan...',
-    analyzingRequirements: 'Analyzing task requirements',
-    executionPlan: 'Execution Plan',
-    planGoal: 'Plan Goal',
-    toolsToBeExecuted: 'Tools to be executed',
-    totalSteps: 'Total Steps',
-    totalTools: 'Total Tools',
-    stepGoal: 'Step Goal',
-    cancel: 'Cancel execution',
-    approve: 'Approve & Execute Plan',
-    keepWorking: 'will keep working after your answer',
-    viewDetails: 'View details',
-    approveTool: 'Approve execution',
-    pendingReview: 'Pending review',
-    noToolToBeUsed: 'No tool will be needed',
   },
   pt: {
     step: 'Passo',
     hideSteps: 'Esconder passos',
     detailed: 'Ver modo detalhado',
-    generatingPlan: 'Gerando plano de execução...',
-    analyzingRequirements: 'Analisando os requisitos da task',
-    executionPlan: 'Plano de Execução',
-    planGoal: 'Finalidade do Plano',
-    toolsToBeExecuted: 'Tools a serem executadas',
-    totalSteps: 'Total de Passos',
-    totalTools: 'Total de Tools',
-    stepGoal: 'Objetivo do passo',
-    cancel: 'Cancelar execução',
-    approve: 'Aprovar & Executar plano',
-    keepWorking: 'continuará trabalhando após a sua resposta',
-    viewDetails: 'Ver detalhes',
-    approveTool: 'Aprovar execução',
-    pendingReview: 'Revisão pendente',
-    noToolToBeUsed: 'Nenhuma tool será necessária',
   },
 } satisfies Dictionary

package/src/views/Chat/styled.ts

@@ -243,27 +243,20 @@ export const ChatList: IStyledComponentBase<
   }
 
   .steps {
-    .steps-list {
+    ul {
       list-style: none;
       margin: 0;
       padding: 0;
       display: flex;
       flex-direction: column;
       gap: 6px;
-    }
-
-    .tools-list {
-      list-style: disc;
-      margin: 0;
-      padding-left: 24px;
-      display: block;
-      ::marker {
-        color: ${theme.color.light.contrastText};
-      }
-    }
 
-    ul {
       li {
+        display: flex;
+        flex-direction: row;
+        gap: 4px;
+        align-items: center;
+
         &[role="button"] {
           cursor: pointer;
         }
@@ -282,6 +275,7 @@ export const ChatList: IStyledComponentBase<
         }
 
         .step-title {
+          line-height: 0.75rem;
           overflow: hidden;
           text-overflow: ellipsis;
           display: -webkit-box;
@@ -291,10 +285,8 @@ export const ChatList: IStyledComponentBase<
       }
     }
 
-  }
-
-  .step-actions {
-      margin-top: 16px;
+    .step-actions {
+      margin-top: 8px;
       display: flex;
       gap: 6px;
 
@@ -304,6 +296,7 @@ export const ChatList: IStyledComponentBase<
         align-items: center;
       }
     }
+  }
 
   .markdown img {
     max-width: 70%;

package/src/views/MessageInput/AgentSelector.tsx

@@ -56,15 +56,20 @@ export const AgentSelector = ({ inputRef, isTrial }: {
 
   const getAgents = () => {
     if (spotId) {
-      return workspaceAiClient.getAgentFromWorkspaceAi.useQuery({ workspaceId: spotId }) as AgentResponseWithBuiltIn[]
+      return workspaceAiClient.getAgentFromWorkspaceAi.useQuery({ workspaceId: spotId }, { 
+        enabled: isAgentEnabled }) as AgentResponseWithBuiltIn[]
     }
 
     if (isTrial) {
-      return agentToolsClient.allAgents.useQuery({ visibilities: ['personal', 'built_in', 'recently_used'] })
+      return agentToolsClient.allAgents.useQuery({ visibilities: ['personal', 'built_in', 'recently_used'] }, {
+        enabled: isAgentEnabled,
+      })
     }
 
     return agentToolsClient.allAgents.useQuery({
       visibilities: ['account', 'shared', 'personal', 'built_in', 'recently_used', 'workspace'],
+    }, {
+      enabled: isAgentEnabled,
     })
   }
 

package/src/views/MessageInput/ButtonAgent.tsx

@@ -8,11 +8,11 @@ import { useMessageInputDictionary } from './dictionary'
 
 export const ButtonAgent = () => {
   const t = useMessageInputDictionary()
-  const agentDefault = agentToolsClient.agentDefault.useQuery()
   const widget = useWidget()
   const chat = useCurrentChat()
   const agent = useCurrentChatState('agent')
   const features = useCurrentChatState('features')
+  const [agentDefault] = agentToolsClient.agentDefault.useStatefulQuery({ enabled: features.agent })
 
   const setAgentDefault = () => {
     agentDefault && chat.set(

package/src/views/MessageInput/ButtonBar.tsx

@@ -1,7 +1,6 @@
 import { IconButton, Row } from '@stack-spot/citric-react'
 import { useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
 import { useMessageInputDictionary } from './dictionary'
-import { ModelSwitcher } from './ModelSwitcher'
 import { SelectContent } from './SelectContent'
 import { SelectionBarWrapper } from './styled'
 
@@ -14,9 +13,10 @@ interface SelectionBarProps {
    * Whether or not the message is currently being sent. This is used to decide which button to show: send or cancel.
    */
   isLoading?: boolean,
+  customButtonBarItems?: React.ReactNode,
 }
 
-export const ButtonBar = ({ onSend, isLoading }: SelectionBarProps) => {
+export const ButtonBar = ({ onSend, isLoading, customButtonBarItems }: SelectionBarProps) => {
   const t = useMessageInputDictionary()
   const chat = useCurrentChat()
   const widget = useWidget()
@@ -29,8 +29,8 @@ export const ButtonBar = ({ onSend, isLoading }: SelectionBarProps) => {
         {features.editor && (
           <IconButton icon="Code" appearance="square" aria-label={t.code} title={t.code} onClick={() => widget.set('panel', 'editor')} />
         )}
+        {customButtonBarItems}
       </Row>
-      <ModelSwitcher />
       {isLoading ? (
         <IconButton
           icon="Stop"

package/src/views/MessageInput/QuickCommandSelector.tsx

@@ -14,7 +14,7 @@ export const QuickCommandSelector = ({ inputRef, isTrial }:
   const isQuickCommandEnabled =  useCurrentChatState('features').quickCommands
   const spotId = useWidgetState('features')?.workspaceId
 
-  const useFavorites = () => aiClient.allQuickCommands.useQuery({ visibility: 'favorite' })
+  const useFavorites = () => aiClient.allQuickCommands.useQuery({ visibility: 'favorite' }, { enabled: isQuickCommandEnabled })
   const [addFavorite, pendingAddFav] = aiClient.addFavoriteQuickCommand.useMutation()
   const [removeFavorite, pendingRemoveFav] = aiClient.removeFavoriteQuickCommand.useMutation()
 

package/src/views/MessageInput/index.tsx

@@ -24,8 +24,8 @@ import { UploadDragNDrop, useUploadDragDrop } from './UploadDragNDrop'
  * going to be used for the question and the buttons to send, cancel, set the workspace, among others. This also includes the Quick
  * Commands panel for auto completing.
  */
-export const MessageInput = ({ chatWindowRef, customInputMessage }: 
-  { chatWindowRef?: React.RefObject<HTMLElement>, customInputMessage?: string }) => {
+export const MessageInput = ({ chatWindowRef, customInputMessage, customButtonBarItems }: 
+  { chatWindowRef?: React.RefObject<HTMLElement>, customInputMessage?: string, customButtonBarItems?: React.ReactNode}) => {
   const t = useMessageInputDictionary()
   const [focused, setFocused] = useState(false)
   const [, setExpanded] = useState(true)
@@ -152,7 +152,7 @@ export const MessageInput = ({ chatWindowRef, customInputMessage }:
               placeholder={
                 agentLabel
                   ? customInputMessage ?? interpolate(t.placeholder, agentLabel)
-                  : t.typing
+                  : customInputMessage ?? t.typing
               }
               onChange={v => chat.set('nextMessage', v)}
               value={value}
@@ -168,7 +168,7 @@ export const MessageInput = ({ chatWindowRef, customInputMessage }:
         <ProgressBar className="progress-bar" progress={isLoading ? undefined : (focused ? 100 : 0)} speed="fast" />
         <ContextBar />
         {chat.get('features').upload && <UploadBar />}
-        <ButtonBar onSend={onSend} isLoading={isLoading} />
+        <ButtonBar onSend={onSend} isLoading={isLoading} customButtonBarItems={customButtonBarItems} />
       </MessageInputBox>
       <UploadDragNDrop isDragging={isDragging} onDrop={handleDrop} onDragLeave={handleDragLeave} />
     </UploadProvider>

package/src/views/MessageInput/styled.ts

@@ -1,4 +1,3 @@
-import { Flex } from '@citric/core'
 import { theme } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
 
@@ -303,14 +302,3 @@ export const MessageInputBox = styled.div`
     }
   }
 `
-export const RowWrapperStyled = styled(Flex)`
-  width: 100%;
-  justify-content: end;
-  margin-right: 4px;
-  ul {
-    margin: 0;
-  }
-  .button-select-model {
-    border-radius: 15px !important;
-  }
-`

package/src/views/Steps/FlowChart/NodeStep.tsx

@@ -37,7 +37,7 @@ export const NodeStep = ({ data: { step, index, nextStatus, onClick } }: Props)
         {!!step.attempts[0].tools?.length && <StackedBadge
           label={t.tools}
           images={step.attempts[0].tools?.slice(0, 3).map(
-            tool => ({ key: tool.id, name: tool.name ?? '', url: tool.image, icon: <Icon icon="Cog" /> }),
+            tool => ({ key: tool.id, name: tool.name, url: tool.image, icon: <Icon icon="Cog" /> }),
           )}
         />}
       </div>}

package/src/views/Steps/FlowChart/layout.ts

@@ -8,7 +8,6 @@ const nodesSizes = {
   step: stepNodeSize,
   planning: planningNodeSize,
   answer: answerNodeSize,
-  tool: stepNodeSize,
 }
 
 export function useLayoutedElements(nodes: NodeWithoutLayout[], edges: Edge[]) {

package/src/views/Steps/FlowChart/types.ts

@@ -9,6 +9,6 @@ export interface NodeData {
 
 export interface NodeWithoutLayout {
   id: string,
-  type: 'step' | 'planning' | 'answer' | 'tool',
+  type: 'step' | 'planning' | 'answer',
   data?: NodeData,
 }

package/src/views/Steps/StepModal.tsx

@@ -127,7 +127,7 @@ export const StepModal = ({ message, stepId, onClose }: Props) => {
 
   const tools = step?.type === 'step' ? step.attempts[attempt]?.tools?.map(tool => (
     <div className="tool" key={tool.id}>
-      <ToolBadge name={tool.name ?? ''} duration={tool.duration} image={tool.image} description={tool.description} />
+      <ToolBadge name={tool.name} duration={tool.duration} image={tool.image} description={tool.description} />
       {tool.input && <>
         <Text appearance="microtext1" color="light.700">{t.input}:</Text>
         <Code language="json" className="tool-input" showLineNumbers={false} showActionBar>{tool.input}</Code>
@@ -191,7 +191,7 @@ export const StepModal = ({ message, stepId, onClose }: Props) => {
               {!!s.attempts[0].tools?.length && <ul className="side-by-side-tools">
                 {s.attempts[0].tools.map((tool) => (
                   <li key={tool.id}>
-                    <ToolBadge name={tool.name ?? ''} image={tool.image} />
+                    <ToolBadge name={tool.name} image={tool.image} />
                   </li>
                 ))}
               </ul>}