@stack-spot/ai-chat-widget 1.12.4 → 1.13.1

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"NodeStep.js","sourceRoot":"","sources":["../../../../src/views/Tools/FlowChart/NodeStep.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAO3C,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,EAAS,EAAE,EAAE;IAChF,MAAM,CAAC,GAAG,kBAAkB,EAAE,CAAA;IAE9B,OAAO,CACL,eACE,SAAS,EAAE,WAAW,CAAC,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,EAC7D,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,OAAO,EAAE,EAAE,EAChD,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,gBACD,QAAQ,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,aAEpC,6BACE,KAAC,OAAO,cAAE,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAW,EAC3C,KAAC,IAAI,IAAC,SAAS,EAAC,YAAY,YAAE,QAAQ,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,GAAQ,EAC7D,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,IACpB,EACR,IAAI,CAAC,KAAK,IAAI,KAAC,IAAI,IAAC,SAAS,EAAC,YAAY,YAAE,IAAI,CAAC,KAAK,GAAQ,EAC9D,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,eAAK,SAAS,EAAC,cAAc,aACpD,KAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,CAAC,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,IAAI,YAAY,CAAC,CAAC,YACrF,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,MAAM,GACnC,EACN,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,IAAI,CACvB,eAAK,SAAS,EAAC,YAAY,aACzB,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,YAAE,CAAC,CAAC,KAAK,GAAQ,EAC9C,uBACG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CACzB,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACvB,uBACG,KAAK;wCACJ,CAAC,CAAC,cAAK,GAAG,EAAE,IAAI,gBAAc,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,GAAI;wCAC/D,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,gBAAa,IAAI,EAAE,KAAK,EAAE,IAAI,YAAE,KAAC,GAAG,KAAG,GAAU,IAHhE,EAAE,CAKN,CACN,CACF,GACE,IACD,CACP,IACG,EACN,KAAC,WAAW,IAAC,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU,GAAI,IACzF,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/views/Tools/FlowChart/index.d.ts

@@ -1,9 +0,0 @@
-import '@xyflow/react/dist/style.css';
-import { ChatEntry, ChatEntryStep } from '../../../state/ChatEntry.js';
-interface Props {
-    message: ChatEntry;
-    onClick: (step: ChatEntryStep, index: number) => void;
-}
-export declare const FlowChart: ({ message, onClick }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/views/Tools/FlowChart/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Tools/FlowChart/index.tsx"],"names":[],"mappings":"AAEA,OAAO,8BAA8B,CAAA;AAGrC,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAKnE,UAAU,KAAK;IACb,OAAO,EAAE,SAAS,CAAC;IACnB,OAAO,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAQD,eAAO,MAAM,SAAS,GAAI,sBAAsB,KAAK,4CAiDpD,CAAA"}

package/dist/views/Tools/FlowChart/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/views/Tools/FlowChart/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAExD,MAAM,WAAW,QAAQ;IACvB,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;IACrC,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB"}

package/dist/views/Tools/FlowChart/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/views/Tools/FlowChart/types.ts"],"names":[],"mappings":""}

package/dist/views/Tools/StepModal.d.ts

@@ -1,9 +0,0 @@
-import { ChatEntry } from '../../state/ChatEntry.js';
-interface Props {
-    message: ChatEntry;
-    stepId: string | undefined;
-    onClose: () => void;
-}
-export declare const StepModal: ({ message, stepId: initialStepId, onClose }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=StepModal.d.ts.map

package/dist/views/Tools/StepModal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StepModal.d.ts","sourceRoot":"","sources":["../../../src/views/Tools/StepModal.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAa,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAI5D,UAAU,KAAK;IACb,OAAO,EAAE,SAAS,CAAC;IACnB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAqJD,eAAO,MAAM,SAAS,GAAI,6CAA6C,KAAK,4CA6E3E,CAAA"}