@stack-spot/ai-chat-widget 1.9.0 → 1.10.0

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

@@ -0,0 +1,57 @@
+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 { getStatusIcon, getTitle, getTypeIcon } from '../utils'
+import { HandleGroup } from './HandleGroup'
+import { NodeData } from './types'
+
+interface Props {
+  data: NodeData,
+}
+
+export const NodeStep = ({ data: { step, index, nextStatus, onClick } }: Props) => {
+  const t = useToolsDictionary()
+
+  return (
+    <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)}
+    >
+      <header>
+        <IconBox>{getTypeIcon(step.type)}</IconBox>
+        <Text className="step-index">{getTitle(t, step, index)}</Text>
+        {getStatusIcon(step.status)}
+      </header>
+      {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>
+        {!!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>
+        )}
+      </div>}
+      <HandleGroup renderSource={step.type !== 'answer'} renderTarget={step.type !== 'planning'} />
+    </div>
+  )
+}

package/src/views/Tools/FlowChart/index.tsx

@@ -0,0 +1,71 @@
+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 { useLayoutedElements } from './layout'
+import { NodeStep } from './NodeStep'
+import { FlowChartBox, runningColor } from './styled'
+
+interface Props {
+  message: ChatEntry,
+  onClick: (step: ChatEntryStep, index: number) => void,
+}
+
+const nodeTypes = {
+  planning: NodeStep,
+  step: NodeStep,
+  answer: NodeStep,
+}
+
+export const FlowChart = ({ message, onClick }: Props) => {
+  const steps = useChatEntry(message).steps
+  const { nodes, edges } = useMemo(() => {
+    const nodes = steps?.map((s, i) => ({
+      id: s.id,
+      type: s.type,
+      focusable: false,
+      data: { step: s, index: i, nextStatus: steps[i + 1]?.status, onClick: () => onClick(s, i) },
+    })) ?? []
+    const edges: Edge[] = []
+    for (let i = 0; i < nodes.length - 1; i++) {
+      edges.push({
+        id: `${nodes[i].id}-${nodes[i + 1].id}`,
+        source: nodes[i].id,
+        target: nodes[i + 1].id,
+        className: listToClass(['edge', nodes[i]?.data?.nextStatus ?? 'pending']),
+        focusable: false,
+        markerEnd: {
+          type: MarkerType.Arrow,
+          strokeWidth: 2,
+          color: nodes[i]?.data?.nextStatus === 'running' ? runningColor : theme.color.light[700],
+        },
+      })
+    }
+    return { nodes, edges }
+  }, [steps])
+
+  const layouted = useLayoutedElements(nodes, edges)
+
+  return (
+    <FlowChartBox>
+      <ReactFlow
+        // @ts-ignore wrong type in the lib
+        nodes={layouted.nodes}
+        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} />
+        <Background />
+      </ReactFlow>
+    </FlowChartBox>
+  )
+}

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

@@ -0,0 +1,49 @@
+import dagre from '@dagrejs/dagre'
+import { Edge } from '@xyflow/react'
+import { useMemo } from 'react'
+import { answerNodeSize, planningNodeSize, stepNodeSize } from './styled'
+import { NodeWithoutLayout } from './types'
+
+const nodesSizes = {
+  step: stepNodeSize,
+  planning: planningNodeSize,
+  answer: answerNodeSize,
+}
+
+export function useLayoutedElements(nodes: NodeWithoutLayout[], edges: Edge[]) {
+  const dagreGraph = useMemo(() => new dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({})), [])
+  return useMemo(() => {
+    dagreGraph.setGraph({ rankdir: 'LR' })
+    
+    nodes.forEach((node) => {
+      const { width, height } = nodesSizes[node.type]
+      dagreGraph.setNode(node.id, { width, height })
+    })
+  
+    edges.forEach((edge) => {
+      dagreGraph.setEdge(edge.source, edge.target)
+    })
+  
+    dagre.layout(dagreGraph)
+  
+    const newNodes = nodes.map((node) => {
+      const { width, height } = nodesSizes[node.type]
+      const nodeWithPosition = dagreGraph.node(node.id)
+      const newNode = {
+        ...node,
+        targetPosition: 'left',
+        sourcePosition: 'right',
+        // We are shifting the dagre node position (anchor=center center) to the top left
+        // so it matches the React Flow node anchor point (top left).
+        position: {
+          x: nodeWithPosition.x - width / 2,
+          y: nodeWithPosition.y - height / 2,
+        },
+      }
+  
+      return newNode
+    })
+  
+    return { nodes: newNodes, edges }
+  }, [nodes, edges])
+}

package/src/views/Tools/FlowChart/styled.ts

@@ -0,0 +1,182 @@
+import { theme } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+
+export const stepNodeSize = { width: 160, height: 167 }
+export const planningNodeSize = { width: 160, height: 61 }
+export const answerNodeSize = { width: 160, height: 40 }
+export const runningColor = '#0097FA'
+
+export const FlowChartBox = styled.div`
+  width: 100%;
+  height: 100%;
+
+  .chart-node {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 6px;
+    border-radius: 4px;
+    border: 1px solid ${theme.color.light[600]};
+    background-color: ${theme.color.light[500]};
+    box-sizing: border-box;
+    justify-content: center;
+
+    &.running .source-handle {
+      background-color: ${runningColor};
+    }
+
+    &.pending .source-handle {
+      opacity: 0.3;
+    }
+
+    &.step {
+      width: ${stepNodeSize.width}px;
+      height: ${stepNodeSize.height}px;
+    }
+
+    &.planning {
+      width: ${planningNodeSize.width}px;
+      height: ${planningNodeSize.height}px;
+    }
+
+    &.answer {
+      width: ${answerNodeSize.width}px;
+      height: ${answerNodeSize.height}px;
+    }
+
+    header {
+      display: flex;
+      gap: 4px;
+      align-items: center;
+      .step-index {
+        flex: 1;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .step-title {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      color: ${theme.color.light[700]};
+      overflow-x: clip;
+    }
+
+    .step-details {
+      background-color: ${theme.color.light[400]};
+      border-radius: 2px;
+      padding: 8px;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      justify-content: space-between;
+      gap: 10px;
+      overflow: hidden;
+
+      .step-description {
+        flex: 1;
+        line-height: 18px;
+        max-height: 72px; // line-height * 4
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical; 
+
+        &.with-tools {
+          max-height: 36px; // line-height * 2
+          -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%;
+          }
+        }
+      }
+    }
+  }
+
+  .source-handle {
+    background-color: ${theme.color.light[700]};
+    border: none;
+  }
+
+  .target-handle {
+    opacity: 0;
+  }
+
+  .controls {
+    background-color: ${theme.color.light[300]};
+    border-radius: 4px;
+    border: none;
+    display: flex;
+
+    button {
+      background: transparent;
+      border: none;
+    }
+  }
+
+  .edge {
+    path {
+      stroke: ${theme.color.light[700]};
+      stroke-width: 2px;
+    }
+    &.pending path {
+      opacity: 0.3;
+    }
+    &.running path {
+      stroke: ${runningColor};
+      stroke-dasharray: 5, 5;
+    }
+  }
+
+  .react-flow__attribution {
+    background-color: transparent;
+    opacity: 0.1;
+  }
+`

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

@@ -0,0 +1,14 @@
+import { ChatEntryStep } from '../../../state/ChatEntry'
+
+export interface NodeData {
+  nextStatus: ChatEntryStep['status'] | undefined,
+  onClick?: () => void,
+  step: ChatEntryStep,
+  index: number,
+}
+
+export interface NodeWithoutLayout {
+  id: string,
+  type: 'step' | 'planning' | 'answer',
+  data?: NodeData,
+}

package/src/views/Tools/StepModal.tsx

@@ -0,0 +1,247 @@
+import { Flex, IconBox, Text } from '@citric/core'
+import { ChevronDown, ChevronLeft, ChevronRight, Cog } from '@citric/icons'
+import { Badge, IconButton } from '@citric/ui'
+import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
+import { listToClass, theme } from '@stack-spot/portal-theme'
+import { interpolate } from '@stack-spot/portal-translate'
+import { useEffect, 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 { useChatEntry } from '../../context/hooks'
+import { AgentTool, ChatEntry } from '../../state/ChatEntry'
+import { useToolsDictionary } 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%;
+  }
+
+  .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;
+
+    &.output {
+      padding: 0;
+      background-color: transparent;
+    }
+
+    .tool-header-wrapper {
+      background-color: ${theme.color.light[300]};
+      border-radius: 8px;
+    }
+
+    .tool-header {
+      padding: 4px 8px 4px 4px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      position: relative;
+
+      &:before {
+        content: '';
+        top: 32px;
+        bottom: 8px;
+        left: 15px;
+        width: 1px;
+        background-color: ${theme.color.light[700]};
+        opacity: 0.3;
+        position: absolute;
+      }
+
+      .title {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        .tool-image {
+          width: 24px;
+          height: 24px;
+          border-radius: 50%;
+          overflow: hidden;
+          flex-shrink: 0;
+        }
+      }
+
+      .btn-expand {
+        transition: transform 0.3s ease-in-out;
+        &.open {
+          transform: rotate(180deg);
+        }
+      }
+
+      .duration {
+        opacity: 0.7;
+        text-align: right;
+      }
+
+      .description {
+        padding: 0 0 10px 20px;
+        opacity: 0.7;
+      }
+    }
+
+    .tool-input {
+      align-self: stretch;
+      &, .highlighter {
+        background: ${theme.color.light[300]} !important;
+      }
+    }
+  }
+`
+
+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;
+    }
+  }
+`
+
+const ToolHeader = ({ tool }: { tool: AgentTool }) => {
+  const t = useToolsDictionary()
+  const [showDescription, setShowDescription] = useState(false)
+  return (
+    <AnimatedHeight className="tool-header-wrapper">
+      <div className="tool-header">
+        <div className="title">
+          {tool.image ? <img src={tool.image} className="tool-image" /> : <IconBox className="tool-image"><Cog /></IconBox>}
+          <Text colorScheme="light.700">{tool.name}</Text>
+          {tool.duration && <Text colorScheme="light.700" className="duration">
+            {interpolate(t.thoughtFor, toPrecision(tool.duration))}
+          </Text>}
+          {tool.description && <IconButton
+            size="xs"
+            className={listToClass(['btn-expand', showDescription && 'open'])}
+            onClick={() => setShowDescription(v => !v)}
+            aria-label={showDescription ? t.close : t.open}
+          >
+            <ChevronDown />
+          </IconButton>}
+        </div>
+        {showDescription && <Text className="description" colorScheme="light.700">{tool.description}</Text>}
+      </div>
+    </AnimatedHeight>
+  )
+}
+
+export const StepModal = ({ message, stepId: initialStepId, onClose }: Props) => {
+  const t = useToolsDictionary()
+  const [stepId, setStepId] = useState(initialStepId)
+  const entry = useChatEntry(message)
+  const stepIndex = useMemo(() => entry.steps?.findIndex(s => s.id === stepId) ?? -1, [entry, stepId])
+  const step = entry.steps?.[stepIndex]
+  useEffect(() => setStepId(initialStepId), [initialStepId])
+
+  const inputTools = step?.tools?.map(tool => (
+    <div className="tool" key={tool.id}>
+      <ToolHeader tool={tool} />
+      <Text appearance="microtext1" colorScheme="light.700">{t.input}:</Text>
+      {tool.input && <Code language="json" className="tool-input" showLineNumbers={false}>{tool.input}</Code>}
+    </div>
+  ))
+
+  const outputTools = step?.tools?.filter(tool => !!tool.output)?.map(tool => (
+    <div className="tool output" key={tool.id}>
+      <Badge appearance="square" palette="moss">{t.response}</Badge>
+      <ToolHeader tool={tool} />
+      <Text appearance="microtext1" colorScheme="light.700">{t.response}:</Text>
+      <Text appearance="microtext1">{tool.output}</Text>
+    </div>
+  ))
+
+  function changeStep(amount: number) {
+    const next = entry.steps?.[stepIndex + amount]?.id
+    if (next) setStepId(next)
+  }
+
+  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>
+        <div className="navigator">
+          {step?.type !== 'planning' && (
+            <IconButton size="xs" appearance="text" title={t.previousStep} aria-label={t.previousStep} onClick={() => changeStep(-1)}>
+              <ChevronLeft />
+            </IconButton>
+          )}
+          {step?.type === 'step' && <Text appearance="microtext1">{stepIndex}/{(entry.steps?.length ?? 0) - 2}</Text>}
+          {step?.type !== 'answer' && (
+            <IconButton size="xs" appearance="text" title={t.nextStep} aria-label={t.nextStep} onClick={() => changeStep(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?.input && <StyledSection>
+        <Badge appearance="square" palette="blue">Prompt</Badge>
+        <Text>{step.input}</Text>
+        {inputTools}
+      </StyledSection>}
+      {(outputTools?.length || step?.output) && (
+        <StyledSection> 
+          {outputTools}
+          {step?.output && !outputTools?.length && <>
+            <Badge appearance="square" palette="moss">{t.response}</Badge>
+            <Text>{step.output}</Text>
+          </>}
+        </StyledSection>
+      )}
+    </Modal>
+  )
+}

package/src/views/Tools/ToolsPanel.tsx

@@ -0,0 +1,24 @@
+/* eslint-disable import/no-default-export */
+
+import { useMemo, useState } from 'react'
+import { useWidget } from '../../context/hooks'
+import { FlowChart } from './FlowChart'
+import { StepModal } from './StepModal'
+
+const ToolsPanel = ({ chatId, messageId }: { chatId: string, messageId: number }) => {
+  const [currentStepId, setCurrentStepId] = useState<string | undefined>()
+  const widget = useWidget()
+  const message = useMemo(
+    () => widget.chatTabs.getAll().find(c => c.id === chatId)?.getMessages().find(m => m.id === messageId),
+    [chatId, messageId],
+  )
+
+  return message ? (
+    <>
+      <FlowChart message={message} onClick={(step) => setCurrentStepId(step.id)} />
+      <StepModal message={message} stepId={currentStepId} onClose={() => setCurrentStepId(undefined)} />
+    </>
+  ) : null
+}
+
+export default ToolsPanel

package/src/views/Tools/dictionary.ts

@@ -0,0 +1,46 @@
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+
+export const dictionary = {
+  en: {
+    toolsDescription: 'A description for tools',
+    step: 'Step',
+    response: 'Response',
+    tools: 'Tools',
+    planning: 'Planning',
+    answer: 'Final answer',
+    executionTime: 'Time',
+    unknown: 'unknown',
+    running: 'Running',
+    pending: 'Pending',
+    nextStep: 'Next step',
+    previousStep: 'Previous step',
+    thoughtFor: 'Thought for $0 seconds',
+    open: 'Open',
+    close: 'Close',
+    input: 'Input',
+  },
+  pt: {
+    toolsDescription: 'Uma descrição para as Ferramentas',
+    step: 'Passo',
+    response: 'Resposta',
+    tools: 'Ferramentas',
+    planning: 'Planejamento',
+    answer: 'Resposta final',
+    executionTime: 'Tempo',
+    unknown: 'desconhecido',
+    running: 'Executando',
+    pending: 'Aguardando',
+    nextStep: 'Próximo passo',
+    previousStep: 'Passo anterior',
+    thoughtFor: 'Pensado por $0 segundos',
+    open: 'Open',
+    close: 'Close',
+    input: 'Entrada',
+  },
+} satisfies Dictionary
+
+export function useToolsDictionary() {
+  return useTranslate(dictionary)
+}
+
+export type ToolsDictionary = typeof dictionary['en']