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

package/src/views/MessageInput/ButtonAgent.tsx

@@ -2,16 +2,40 @@ import { Flex, IconBox } from '@citric/core'
 import { Agent, TimesMini } from '@citric/icons'
 import { IconButton, Tooltip } from '@citric/ui'
 import { MiniLogo } from '@stack-spot/portal-components/svg'
+import { agentClient } from '@stack-spot/portal-network'
+import { useEffect } from 'react'
 import { useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
+import { isAgentDefault } from '../../utils/agent'
 import { useMessageInputDictionary } from './dictionary'
 
 export const ButtonAgent = () => {
   const t = useMessageInputDictionary()
+  const [agentsBuiltIn] = agentClient.publicAgents.useStatefulQuery({})
+  const agentDefault = agentsBuiltIn?.find((agent) => isAgentDefault(agent.slug))
   const widget = useWidget()
   const chat = useCurrentChat()
   const agent = useCurrentChatState('agent')
   const features = useCurrentChatState('features')
 
+  const setAgentDefault = () => {
+    agentDefault && chat.set(
+      'agent',
+      {
+        id: agentDefault.id,
+        slug: agentDefault.slug,
+        label: agentDefault.name,
+        image: agentDefault.avatar,
+        builtIn: true,
+      },
+    )
+  }
+  
+  useEffect(() => {
+    if (!agent && !!agentDefault) {
+      setAgentDefault()
+    }
+  }, [agentDefault, agent])
+
   return (
     <div className="button-group">
       {features.agent && (
@@ -19,9 +43,9 @@ export const ButtonAgent = () => {
           <IconButton aria-label={t.agent} title={t.agent} className="agent" onClick={() => widget.set('panel', 'agent')}>
             <MiniLogo />
           </IconButton>
-          {agent?.id &&
+          {agent?.id && !isAgentDefault(agent?.slug) &&
             <Tooltip text={t.remove} >
-              <IconButton aria-label={t.remove} className="agent agent-selected" onClick={() => chat.set('agent', undefined)}>
+              <IconButton aria-label={t.remove} className="agent agent-selected" onClick={setAgentDefault}>
                 {agent?.image ? <img src={agent.image} className="image" /> : <IconBox className="image" size="xs"><Agent /></IconBox>}
                 <Flex className="icon-remove" alignContent="center" justifyContent="center">
                   <TimesMini />

package/src/views/MessageInput/index.tsx

@@ -31,7 +31,7 @@ export const MessageInput = () => {
   const value = useCurrentChatState('nextMessage') ?? ''
   const isMinimized = useWidgetState('isMinimized')
   const textAreaRef = useRef<HTMLTextAreaElement>(null)
-  const agentLabel = useCurrentChatState('agent')?.label ?? 'Stackspot AI'
+  const agentLabel = useCurrentChatState('agent')?.label
   const { handleKeyDown, handleKeyUp } = useUserEntryHistoryShortcut()
 
   const onSend = useCallback(async () => {
@@ -70,7 +70,7 @@ export const MessageInput = () => {
           <AdaptiveTextArea
             ref={textAreaRef}
             disabled={isLoading}
-            placeholder={interpolate(t.placeholder, agentLabel)}
+            placeholder={agentLabel && interpolate(t.placeholder, agentLabel)}
             onChange={e => chat.set('nextMessage', e.target.value)}
             value={value}
             onFocus={() => setFocused(true)}

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

package/src/views/{Tools → Steps}/dictionary.ts

@@ -2,7 +2,8 @@ import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 
 export const dictionary = {
   en: {
-    toolsDescription: 'A description for tools',
+    stepsPanelDescription: 'The steps and tools used to reach the answer',
+    steps: 'Steps',
     step: 'Step',
     response: 'Response',
     tools: 'Tools',
@@ -12,15 +13,15 @@ export const dictionary = {
     unknown: 'unknown',
     running: 'Running',
     pending: 'Pending',
-    nextStep: 'Next step',
-    previousStep: 'Previous step',
-    thoughtFor: 'Thought for $0 seconds',
+    nextAttempt: 'Next execution',
+    previousAttempt: 'Previous execution',
     open: 'Open',
     close: 'Close',
     input: 'Input',
   },
   pt: {
-    toolsDescription: 'Uma descrição para as Ferramentas',
+    stepsPanelDescription: 'Os passos e ferramentas usados para chegar na resposta',
+    steps: 'Passos',
     step: 'Passo',
     response: 'Resposta',
     tools: 'Ferramentas',
@@ -30,16 +31,13 @@ export const dictionary = {
     unknown: 'desconhecido',
     running: 'Executando',
     pending: 'Aguardando',
-    nextStep: 'Próximo passo',
-    previousStep: 'Passo anterior',
-    thoughtFor: 'Pensado por $0 segundos',
-    open: 'Open',
-    close: 'Close',
+    nextAttempt: 'Próxima execução',
+    previousAttempt: 'Execução anterior',
     input: 'Entrada',
   },
 } satisfies Dictionary
 
-export function useToolsDictionary() {
+export function useStepsDictionary() {
   return useTranslate(dictionary)
 }
 

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

@@ -3,31 +3,31 @@ import { LoadingCircular } from '@citric/ui'
 import { lazy, Suspense, useEffect } from 'react'
 import { useWidget, useWidgetState } from '../../context/hooks'
 import { useRightPanel } from '../../right-panel/hooks'
-import { useToolsDictionary } from './dictionary'
+import { useStepsDictionary } from './dictionary'
 
-const LazyToolsPanel = lazy(() =>  import('./ToolsPanel'))
+const LazyStepsPanel = lazy(() =>  import('./StepsPanel'))
 
 /**
  * Renders the Stack selection form in the Right Panel if this is the panel that is currently opened.
  */
-export const Tools = () => {
-  const t = useToolsDictionary()
+export const Steps = () => {
+  const t = useStepsDictionary()
   const panel = useWidgetState('panel')
-  const message = useWidgetState('currentMessageInToolsPanel')
+  const message = useWidgetState('currentMessageInPanel')
   const { open } = useRightPanel()
   const widget = useWidget()
 
   useEffect(() => {
-    if (panel === 'tools' && message) open(
+    if (panel === 'steps' && message) open(
       <Suspense fallback={<Flex alignItems="center" justifyContent="center" flex={1}><LoadingCircular /></Flex>}>
-        <LazyToolsPanel key={message.messageId} chatId={message.chatId} messageId={message.messageId} />
+        <LazyStepsPanel key={message.messageId} chatId={message.chatId} messageId={message.messageId} />
       </Suspense>,
       {
-        title: t.tools,
-        description: t.toolsDescription,
+        title: t.steps,
+        description: t.stepsPanelDescription,
         onClose: () => {
           widget.set('panel', undefined)
-          widget.set('currentMessageInToolsPanel', undefined)
+          widget.set('currentMessageInPanel', undefined)
         },
       },
     )

package/src/views/{Tools → Steps}/utils.tsx

@@ -1,9 +1,9 @@
 import { IconBox } from '@citric/core'
 import { CheckCircleFill, ListUnordered, PlayFill, TimesCircleFill } from '@citric/icons'
 import { LoadingCircular } from '@citric/ui'
-import { ChatEntryStep } from '../../state/ChatEntry'
+import { ChatStep } from '@stack-spot/portal-network'
 
-export function getStatusIcon(status: ChatEntryStep['status']) {
+export function getStatusIcon(status: ChatStep['status']) {
   switch (status) {
     case 'success': return <IconBox colorIcon="success.500"><CheckCircleFill /></IconBox>
     case 'error': return <IconBox colorIcon="danger.500"><TimesCircleFill /></IconBox>
@@ -12,14 +12,14 @@ export function getStatusIcon(status: ChatEntryStep['status']) {
   }
 }
 
-export function getTypeIcon(type: ChatEntryStep['type']) {
+export function getTypeIcon(type: ChatStep['type']) {
   switch (type) {
     case 'planning': return <ListUnordered />
     default: return <PlayFill />
   }
 }
 
-export function getTitle(translation: Record<'planning' | 'step' | 'answer', string>, step: ChatEntryStep | undefined, index: number) {
+export function getTitle(translation: Record<'planning' | 'step' | 'answer', string>, step: ChatStep | undefined, index: number) {
   if (!step) return ''
   switch (step.type) {
     case 'planning': return translation.planning

package/src/views/Tools.tsx

@@ -0,0 +1,71 @@
+import { agentClient } from '@stack-spot/portal-network'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useEffect, useMemo } from 'react'
+import styled from 'styled-components'
+import { ToolBadge } from '../components/ToolBadge'
+import { useWidget, useWidgetState } from '../context/hooks'
+import { useRightPanel } from '../right-panel/hooks'
+import { toolById } from '../utils/tools'
+
+const ToolList = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`
+
+export const Tools = () => {
+  const t = useTranslate(dictionary)
+  const panel = useWidgetState('panel')
+  const message = useWidgetState('currentMessageInPanel')
+  const { open } = useRightPanel()
+  const widget = useWidget()
+
+  useEffect(() => {
+    if (panel === 'tools' && message) open(
+      <ToolsPanel key={message.messageId} />,
+      { title: t.title, description: t.description, onClose: () => widget.set('panel', undefined) },
+    )
+  }, [panel, t])
+
+  return null
+}
+
+const ToolsPanel = () => {
+  const { chatId, messageId } = useWidgetState('currentMessageInPanel') ?? {}
+  const widget = useWidget()
+  const message = useMemo(() => {
+    const chat = widget.chatTabs.getAll().find(c => c.id === chatId)
+    return chat?.getMessages().find(m => m.id === messageId)?.getValue()
+  }, [messageId])
+  const [agent] = agentClient.agent.useStatefulQuery({ agentId: message?.agent?.id ?? '' }, { enabled: !!message?.agent?.id })
+  const tools = useMemo(() => message?.tools?.map(id => toolById(id, agent?.toolkits) ?? { id }), [messageId, agent])
+
+  return !!tools?.length && (
+    <ToolList>
+      {tools.map((tool) => (
+        <li key={tool.id}>
+          <ToolBadge
+            name={tool.name || tool.id}
+            image={tool.image}
+            description={tool.description}
+            backgroundColor="light.500"
+          />
+        </li>
+      ))}
+    </ToolList>
+  )
+}
+
+const dictionary = {
+  en: {
+    title: 'Tools',
+    description: 'The tools used to generate the answer.',
+  },
+  pt: {
+    title: 'Ferramentas',
+    description: 'As ferramentas usadas para gerar a resposta.',
+  },
+} satisfies Dictionary

package/dist/views/Tools/FlowChart/NodeStep.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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.js';
-import { getStatusIcon, getTitle, getTypeIcon } from '../utils.js';
-import { HandleGroup } from './HandleGroup.js';
-export const NodeStep = ({ data: { step, index, nextStatus, onClick } }) => {
-    const t = useToolsDictionary();
-    return (_jsxs("div", { className: listToClass(['chart-node', step.type, nextStatus]), onClick: onClick, onKeyDown: e => e.key === 'Enter' && onClick?.(), tabIndex: 0, role: "button", "aria-label": getTitle(t, step, index), children: [_jsxs("header", { children: [_jsx(IconBox, { children: getTypeIcon(step.type) }), _jsx(Text, { className: "step-index", children: getTitle(t, step, index) }), getStatusIcon(step.status)] }), step.input && _jsx(Text, { className: "step-title", children: step.input }), step.type === 'step' && _jsxs("div", { className: "step-details", children: [_jsx(Text, { className: listToClass(['step-description', !!step.tools?.length && 'with-tools']), children: step.output || last(step.tools)?.output }), !!step.tools?.length && (_jsxs("div", { className: "step-tools", children: [_jsx(Text, { appearance: "microtext1", children: t.tools }), _jsx("ul", { children: step.tools.slice(0, 3).map(({ id, name, image }) => (_jsx("li", { children: image
-                                        ? _jsx("img", { alt: name, "aria-label": name, title: name, src: image })
-                                        : _jsx(IconBox, { size: "xs", "aria-label": name, title: name, children: _jsx(Cog, {}) }) }, id))) })] }))] }), _jsx(HandleGroup, { renderSource: step.type !== 'answer', renderTarget: step.type !== 'planning' })] }));
-};
-//# sourceMappingURL=NodeStep.js.map