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

package/src/views/ChatTabSelection.tsx

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

package/src/views/KnowledgeSources.tsx

@@ -12,6 +12,7 @@ import { RightPanelTabs } from '../components/RightPanelTabs'
 import { useCurrentChat, useWidget, useWidgetState } from '../context/hooks'
 import { useRightPanel } from '../right-panel/hooks'
 import { ChatProperties } from '../state/ChatState'
+import { checkIsTrial } from '../utils/check-is-trial'
 
 interface TabProps {
   visibility: VisibilityLevelEnum,
@@ -43,6 +44,7 @@ const KnowledgeSourcesPanel = () => {
   const chat = useCurrentChat()
   const allKS = useRef(chat.get('knowledgeSources') ?? [])
   const { close } = useRightPanel()
+  const isTrial = checkIsTrial()
 
   const onSubmit = useCallback(() => {
     chat.set('knowledgeSources', allKS.current)
@@ -52,12 +54,16 @@ const KnowledgeSourcesPanel = () => {
   useEffect(() => {
     allKS.current = chat.get('knowledgeSources') ?? []
   }, [chat])
-  
-  return <RightPanelTabs key={chat.id} tabs={[
+
+  const tabs = isTrial ? [
+    { title: t.personal, content: <KnowledgeSourcesTab key="personal" visibility="personal" allKS={allKS} onSubmit={onSubmit} /> },
+  ]: [
     { title: t.personal, content: <KnowledgeSourcesTab key="personal" visibility="personal" allKS={allKS} onSubmit={onSubmit} /> },
     { title: t.shared, content: <KnowledgeSourcesTab key="shared" visibility="shared" allKS={allKS} onSubmit={onSubmit} /> },
     { title: t.account, content: <KnowledgeSourcesTab key="account" visibility="account" allKS={allKS} onSubmit={onSubmit} /> },
-  ]} />
+  ]
+  
+  return <RightPanelTabs key={chat.id} tabs={tabs} />
 }
 
 const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit }: TabProps) => {

package/src/views/MessageInput/AgentSelector.tsx

@@ -8,15 +8,26 @@ import { useCallback } from 'react'
 import { Selector } from '../../components/Selector'
 import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
 import { agentRegex } from '../../regex'
-import { isAgentDefault } from '../../utils/agent'
 
-export const AgentSelector = ({ inputRef }: { inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement> }) => {
+const AGENT_DEFAULT_SLUG = 'stackspot_ai'
+
+const isAgentStackspotAI = (slug: string) => slug === AGENT_DEFAULT_SLUG
+
+const defaultAgent = {
+  id: '',
+  name: 'StackSpot AI',
+  slug: AGENT_DEFAULT_SLUG,
+  visibility_level: 'builtIn',
+} as AgentResponse
+
+export const AgentSelector = ({ inputRef, isTrial }: { isTrial: boolean,
+  inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement>, }) => {
   const chat = useCurrentChat()
   const isAgentEnabled = useCurrentChatState('features').agent
   const onSelectItem = useCallback((agent: AgentResponse) => {
     const newValue = `@${agent.slug}`
     chat.set('nextMessage', undefined)
-    chat.set('agent', isAgentDefault(agent.slug)
+    chat.set('agent', isAgentStackspotAI(agent.slug)
       ? undefined
       : { id: agent.id, label: agent.name, image: agent.avatar, builtIn: agent.visibility_level === 'builtIn' },
     )
@@ -28,10 +39,10 @@ export const AgentSelector = ({ inputRef }: { inputRef: React.RefObject<HTMLText
 
   const getAgents = () => {
     const personalAgents = agentClient.agents.useQuery({ visibility: 'PERSONAL' })
-    const accountAgents = agentClient.agents.useQuery({ visibility: 'ACCOUNT' })
-    const sharedAgents = agentClient.agents.useQuery({ visibility: 'SHARED' })
+    const accountAgents = agentClient.agents.useQuery({ visibility: 'ACCOUNT' }, { enabled: !isTrial })
+    const sharedAgents = agentClient.agents.useQuery({ visibility: 'SHARED' }, { enabled: !isTrial })
     const publicAgents = agentClient.publicAgents.useQuery({})
-    const buildIns = [...publicAgents.map((agent) => ({ ...agent, visibility_level: 'builtIn' }))]
+    const buildIns = [...[defaultAgent], ...publicAgents.map((agent) => ({ ...agent, visibility_level: 'builtIn' }))]
 
     return uniqBy([...personalAgents, ...accountAgents, ...sharedAgents, ...buildIns], 'id')
   }
@@ -40,7 +51,7 @@ export const AgentSelector = ({ inputRef }: { inputRef: React.RefObject<HTMLText
     const AvatarComponent = avatar ? <Image width="32" height="32" radius="full" src={avatar} /> : <IconBox size="md"><Agent /></IconBox>
 
     return <Flex flexWrap="nowrap" alignItems="center" sx={{ gap: '8px' }}>
-      {isAgentDefault(slug) ? <MiniLogo style={{ width: '32px', height: '32px' }} /> : AvatarComponent}
+      {isAgentStackspotAI(slug) ? <MiniLogo style={{ width: '32px', height: '32px' }} /> : AvatarComponent}
       <p className="selector-title">{name}</p>
     </Flex>
   }
@@ -54,7 +65,7 @@ export const AgentSelector = ({ inputRef }: { inputRef: React.RefObject<HTMLText
       regex: agentRegex,
       urlBuilder: (agent) => `/agents/${agent?.id}`,
       searchProp: 'name',
-      sections: ['personal', 'account', 'shared', 'builtIn'],
+      sections:  isTrial ? ['personal', 'builtIn'] : ['personal', 'account', 'shared', 'builtIn'],
       renderComponentItem: AgentItem,
       isEnabled: isAgentEnabled,
       onSelect: onSelectItem,

package/src/views/MessageInput/QuickCommandSelector.tsx

@@ -6,7 +6,8 @@ import { Selector } from '../../components/Selector'
 import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
 import { quickCommandRegex } from '../../regex'
 
-export const QuickCommandSelector = ({ inputRef }: { inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement> }) => {
+export const QuickCommandSelector = ({ inputRef, isTrial }: 
+  { isTrial: boolean, inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement> }) => {
   const chat = useCurrentChat()
   const isQuickCommandEnabled =  useCurrentChatState('features').quickCommands
 
@@ -33,7 +34,7 @@ export const QuickCommandSelector = ({ inputRef }: { inputRef: React.RefObject<H
       searchProp: 'slug',
       urlBuilder: (qc) => `/quick-command/${qc?.slug}`,
       regex: quickCommandRegex,
-      sections: ['personal', 'workspace', 'account', 'shared'],
+      sections: isTrial ? ['personal'] : ['personal', 'workspace', 'account', 'shared'],
       isEnabled: isQuickCommandEnabled,
       onSelect: onSelectItem,
       renderComponentItem: QuickCommandItem,

package/src/views/MessageInput/index.tsx

@@ -6,13 +6,13 @@ import { ProgressBar } from '../../components/ProgressBar'
 import { useCurrentChat, useCurrentChatState, useWidgetState } from '../../context/hooks'
 import { quickCommandRegex } from '../../regex'
 import { ChatEntry } from '../../state/ChatEntry'
+import { checkIsTrial } from '../../utils/check-is-trial'
 import { AgentSelector } from './AgentSelector'
 import { ButtonAgent } from './ButtonAgent'
 import { ButtonGroup } from './ButtonGroup'
+import { useUserEntryHistoryShortcut } from './chat-entry-history'
 import { useMessageInputDictionary } from './dictionary'
 import { InfoBar } from './InfoBar'
-
-import { useUserEntryHistoryShortcut } from './chat-entry-history'
 import { QuickCommandSelector } from './QuickCommandSelector'
 import { MAX_INPUT_HEIGHT, MessageInputBox, MIN_INPUT_HEIGHT } from './styled'
 
@@ -33,6 +33,7 @@ export const MessageInput = () => {
   const textAreaRef = useRef<HTMLTextAreaElement>(null)
   const agentLabel = useCurrentChatState('agent')?.label ?? 'Stackspot AI'
   const { handleKeyDown, handleKeyUp } = useUserEntryHistoryShortcut()
+  const isTrial = checkIsTrial()
 
   const onSend = useCallback(async () => {
     const message = chat.get('nextMessage')
@@ -63,8 +64,8 @@ export const MessageInput = () => {
       <ProgressBar visible={isLoading} shimmer />
       <InfoBar />
       <div className="wrapper-action">
-        <QuickCommandSelector inputRef={textAreaRef} />
-        <AgentSelector inputRef={textAreaRef} />
+        <QuickCommandSelector inputRef={textAreaRef} isTrial={isTrial} />
+        <AgentSelector inputRef={textAreaRef} isTrial={isTrial} />
         <div className={listToClass(['action-box', focused && 'focused', isLoading && 'disabled'])}>
           <ButtonAgent />
           <AdaptiveTextArea

package/src/views/Stacks.tsx

@@ -10,6 +10,7 @@ import { IconInput } from '../components/IconInput'
 import { RightPanelTabs } from '../components/RightPanelTabs'
 import { useCurrentChat, useWidget, useWidgetState } from '../context/hooks'
 import { useRightPanel } from '../right-panel/hooks'
+import { checkIsTrial } from '../utils/check-is-trial'
 
 /**
  * Renders the Stack selection form in the Right Panel if this is the panel that is currently opened.
@@ -30,15 +31,20 @@ export const Stacks = () => {
   return null
 }
 
-const StacksPanel = () => {
+const StacksPanel =  () => {
   const t = useTranslate(dictionary)
   const chat = useCurrentChat()
-  
-  return <RightPanelTabs key={chat.id} tabs={[
+  const isTrial = checkIsTrial()
+
+  const tabs = useMemo(() => isTrial ? [
+    { title: t.personal, content: <StacksTab key="personal" visibility="personal" /> },
+  ]: [
     { title: t.personal, content: <StacksTab key="personal" visibility="personal" /> },
     { title: t.shared, content: <StacksTab key="shared" visibility="shared" /> },
     { title: t.account, content: <StacksTab key="account" visibility="account" /> },
-  ]} />
+  ], [t, isTrial])
+  
+  return <RightPanelTabs key={chat.id} tabs={tabs} />
 }
 
 const StacksTab = ({ visibility }: { visibility: VisibilityLevelEnum }) => {

package/src/views/{Tools → Steps}/FlowChart/NodeStep.tsx

@@ -1,8 +1,8 @@
 import { IconBox, Text } from '@citric/core'
 import { Cog } from '@citric/icons'
 import { listToClass } from '@stack-spot/portal-theme'
-import { last } from 'lodash'
-import { useToolsDictionary } from '../dictionary'
+import { StackedBadge } from '../../../components/StackedBadge'
+import { useStepsDictionary } from '../dictionary'
 import { getStatusIcon, getTitle, getTypeIcon } from '../utils'
 import { HandleGroup } from './HandleGroup'
 import { NodeData } from './types'
@@ -12,7 +12,7 @@ interface Props {
 }
 
 export const NodeStep = ({ data: { step, index, nextStatus, onClick } }: Props) => {
-  const t = useToolsDictionary()
+  const t = useStepsDictionary()
 
   return (
     <div
@@ -28,28 +28,16 @@ export const NodeStep = ({ data: { step, index, nextStatus, onClick } }: Props)
         <Text className="step-index">{getTitle(t, step, index)}</Text>
         {getStatusIcon(step.status)}
       </header>
-      {step.input && <Text className="step-title">{step.input}</Text>}
+      {step.type === 'planning' && <Text className="step-title">{step.goal}</Text>}
+      {step.type === 'step' && step.input && <Text className="step-title">{step.input}</Text>}
       {step.type === 'step' && <div className="step-details">
-        <Text className={listToClass(['step-description', !!step.tools?.length && 'with-tools'])}>
-          {step.output || last(step.tools)?.output}
+        <Text className={listToClass(['step-description', !!step.attempts[0].tools?.length && 'with-tools'])}>
+          {step.output}
         </Text>
-        {!!step.tools?.length && (
-          <div className="step-tools">
-            <Text appearance="microtext1">{t.tools}</Text>
-            <ul>
-              {step.tools.slice(0, 3).map(
-                ({ id, name, image }) => (
-                  <li key={id}>
-                    {image
-                      ? <img alt={name} aria-label={name} title={name} src={image} />
-                      : <IconBox size="xs" aria-label={name} title={name}><Cog /></IconBox>
-                    }
-                  </li>
-                ),
-              )}
-            </ul>
-          </div>
-        )}
+        {!!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: <Cog /> }))}
+        />}
       </div>}
       <HandleGroup renderSource={step.type !== 'answer'} renderTarget={step.type !== 'planning'} />
     </div>

package/src/views/{Tools → Steps}/FlowChart/index.tsx

@@ -1,16 +1,17 @@
+import { ChatStep } from '@stack-spot/portal-network'
 import { listToClass, theme } from '@stack-spot/portal-theme'
 import { Background, Controls, Edge, MarkerType, ReactFlow } from '@xyflow/react'
 import '@xyflow/react/dist/style.css'
 import { useMemo } from 'react'
 import { useChatEntry } from '../../../context/hooks'
-import { ChatEntry, ChatEntryStep } from '../../../state/ChatEntry'
+import { ChatEntry } from '../../../state/ChatEntry'
 import { useLayoutedElements } from './layout'
 import { NodeStep } from './NodeStep'
 import { FlowChartBox, runningColor } from './styled'
 
 interface Props {
   message: ChatEntry,
-  onClick: (step: ChatEntryStep, index: number) => void,
+  onClick: (step: ChatStep, index: number) => void,
 }
 
 const nodeTypes = {
@@ -56,11 +57,6 @@ export const FlowChart = ({ message, onClick }: Props) => {
         edges={layouted.edges}
         nodeTypes={nodeTypes}
         snapToGrid={true}
-        fitViewOptions={{
-          minZoom: 1,
-          maxZoom: 1,
-          nodes: [layouted.nodes.find(n => n.data?.nextStatus === 'pending') ?? layouted.nodes[0]],
-        }}
         fitView
       >
         <Controls orientation="horizontal" className="controls" showInteractive={false} />

package/src/views/{Tools → Steps}/FlowChart/styled.ts

@@ -88,55 +88,6 @@ export const FlowChartBox = styled.div`
           -webkit-line-clamp: 2;
         }
       }
-
-      .step-tools {
-        border-radius: 25px;
-        background-color: ${theme.color.light[600]};
-        border: 1px solid ${theme.color.light[500]};
-        color: ${theme.color.light[700]};
-        padding: 2px 7px;
-        display: flex;
-        gap: 5px;
-        align-items: center;
-
-        small {
-          line-height: 0.75rem;
-        }
-
-        ul {
-          list-style: none;
-          margin: 0;
-          padding: 0;
-          display: flex;
-          flex-direction: row;
-
-          li {
-            border: 1px solid ${theme.color.light[600]};
-            background-color: ${theme.color.light[400]};
-            border-radius: 50%;
-            width: 16px;
-            height: 16px;
-            overflow: hidden;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            &:not(:first-child) {
-              margin-left: -12px;
-            }
-          }
-
-          i {
-            width: 12px;
-            height: 12px;
-          }
-
-          img, svg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
     }
   }
 

package/src/views/{Tools → Steps}/FlowChart/types.ts

@@ -1,9 +1,9 @@
-import { ChatEntryStep } from '../../../state/ChatEntry'
+import { ChatStep } from '@stack-spot/portal-network'
 
 export interface NodeData {
-  nextStatus: ChatEntryStep['status'] | undefined,
+  nextStatus: ChatStep['status'] | undefined,
   onClick?: () => void,
-  step: ChatEntryStep,
+  step: ChatStep,
   index: number,
 }
 

package/src/views/Steps/StepModal.tsx

@@ -0,0 +1,216 @@
+import { Flex, Text } from '@citric/core'
+import { ChevronLeft, ChevronRight } from '@citric/icons'
+import { Badge, IconButton } from '@citric/ui'
+import { theme } from '@stack-spot/portal-theme'
+import { useMemo, useState } from 'react'
+import { styled } from 'styled-components'
+import { Code } from '../../components/Code'
+import { Markdown } from '../../components/Markdown'
+import { Modal } from '../../components/Modal'
+import { ToolBadge } from '../../components/ToolBadge'
+import { useChatEntry } from '../../context/hooks'
+import { ChatEntry } from '../../state/ChatEntry'
+import { useStepsDictionary } from './dictionary'
+import { getTitle, toPrecision } from './utils'
+
+interface Props {
+  message: ChatEntry,
+  stepId: string | undefined,
+  onClose: () => void,
+}
+
+const StyledSection = styled.section`
+  padding: 18px 14px;
+  border-bottom: 1px solid var(--light-600);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: start;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &.restrict-image-size img {
+    max-width: 100%;
+  }
+
+  .markdown p {
+    margin-top: 0;
+  }
+
+  .tool {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    align-self: stretch;
+    gap: 6px;
+    background-color: ${theme.color.light[500]};
+    border-radius: 5px;
+    padding: 6px;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid ${theme.color.light[500]};
+    }
+
+    .tool-input {
+      align-self: stretch;
+      &, .highlighter {
+        background: ${theme.color.light[300]} !important;
+      }
+    }
+  }
+
+  p {
+    line-height: 20px;
+  }
+
+  ul.steps {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    > li {
+      padding: 8px 12px;
+      background-color: ${theme.color.light[500]};
+      border-radius: 6px;
+    }
+
+    .step-description {
+      color: ${theme.color.light[700]};
+    }
+  }
+
+  ul.side-by-side-tools {
+    margin: 14px 0 0 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+`
+
+const ExecutionBox = styled.div`
+  border-radius: 4px;
+  background-color: ${theme.color.light[500]};
+  color: ${theme.color.light[700]};
+  display: flex;
+  align-items: center;
+  .time {
+    padding: 6px 8px;
+    border-right: 1px solid ${theme.color.light[600]};
+  }
+  .navigator {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    padding: 2px 8px;
+    button {
+      width: 12px;
+      height: 12px;
+      padding: 0;
+    }
+    small {
+      line-height: 0.75rem;
+    }
+  }
+`
+
+export const StepModal = ({ message, stepId, onClose }: Props) => {
+  const t = useStepsDictionary()
+  const entry = useChatEntry(message)
+  const [attempt, setAttempt] = useState(0)
+  const stepIndex = useMemo(() => entry.steps?.findIndex(s => s.id === stepId) ?? -1, [entry, stepId])
+  const step = entry.steps?.[stepIndex]
+
+  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} />
+      {tool.input && <>
+        <Text appearance="microtext1" colorScheme="light.700">{t.input}:</Text>
+        <Code language="json" className="tool-input" showLineNumbers={false} showActionBar>{tool.input}</Code>
+      </>}
+      {tool.output && <>
+        <Text appearance="microtext1" colorScheme="light.700">{t.response}:</Text>
+        <Code language="json" className="tool-input" showLineNumbers={false} showActionBar>{tool.output}</Code>
+      </>}
+    </div>
+  )) : undefined
+
+  const title = (
+    <Flex flex={1} justifyContent="space-between" alignItems="center">
+      <Text appearance="h6">{getTitle(t, step, stepIndex)}</Text>
+      <ExecutionBox>
+        <Text className="time" appearance="microtext1">
+          {step?.status === 'running' && t.running}
+          {step?.status === 'pending' && t.pending}
+          {step?.status === 'success' && `${t.executionTime}: ${step?.duration ? `${toPrecision(step?.duration)}s` : t.unknown}`}
+        </Text>
+        {step?.type === 'step' && step.attempts.length > 1 && <div className="navigator">
+          {attempt > 0 && (
+            <IconButton
+              size="xs"
+              appearance="text"
+              title={t.previousAttempt}
+              aria-label={t.previousAttempt}
+              onClick={() => setAttempt(attempt - 1)}
+            >
+              <ChevronLeft />
+            </IconButton>
+          )}
+          <Text appearance="microtext1">{attempt + 1}/{step.attempts.length}</Text>
+          {attempt < step.attempts.length - 1 && (
+            <IconButton
+              size="xs"
+              appearance="text"
+              title={t.nextAttempt}
+              aria-label={t.nextAttempt}
+              onClick={() => setAttempt(attempt + 1)}
+            >
+              <ChevronRight />
+            </IconButton>
+          )}
+        </div>}
+      </ExecutionBox>
+    </Flex>
+  )
+
+  return (
+    <Modal open={!!step} onClose={onClose} title={title}>
+      {step?.type === 'answer' && <StyledSection className="restrict-image-size">
+        {entry.type === 'md' ? <Markdown>{entry.content}</Markdown> : <Text>{entry.content}</Text>}  
+      </StyledSection>}
+
+      {step?.type === 'planning' && <StyledSection style={{ alignItems: 'stretch' }}>
+        <Badge appearance="square" palette="blue" style={{ alignSelf: 'start' }}>Prompt</Badge>
+        <Text>{step.goal}</Text>
+        <ul className="steps">
+          {entry.steps?.filter(s => s.type === 'step').map((s, index) => (
+            <li key={index}>
+              <Flex mb={2}>
+                <Text>{t.step} {index + 1}: <span className="step-description">{s.input}</span></Text>
+              </Flex>
+              {!!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} appearance="round" />
+                  </li>
+                ))}
+              </ul>}
+            </li>
+          ))}
+        </ul>
+      </StyledSection>}
+      
+      {step?.type === 'step' && step?.input && <StyledSection>
+        <Badge appearance="square" palette="blue">Prompt</Badge>
+        <Text>{step.input}</Text>
+      </StyledSection>}
+      {!!tools?.length && <StyledSection>{tools}</StyledSection>}
+    </Modal>
+  )
+}

package/src/views/{Tools/ToolsPanel.tsx → Steps/StepsPanel.tsx}

@@ -5,7 +5,7 @@ import { useWidget } from '../../context/hooks'
 import { FlowChart } from './FlowChart'
 import { StepModal } from './StepModal'
 
-const ToolsPanel = ({ chatId, messageId }: { chatId: string, messageId: number }) => {
+const StepsPanel = ({ chatId, messageId }: { chatId: string, messageId: number }) => {
   const [currentStepId, setCurrentStepId] = useState<string | undefined>()
   const widget = useWidget()
   const message = useMemo(
@@ -21,4 +21,4 @@ const ToolsPanel = ({ chatId, messageId }: { chatId: string, messageId: number }
   ) : null
 }
 
-export default ToolsPanel
+export default StepsPanel