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

package/src/views/Chat/StepsList.tsx

@@ -0,0 +1,97 @@
+import { Button, IconBox, Text } from '@citric/core'
+import { CheckCircleFill, Circle, PlayFill, TimesCircleFill } from '@citric/icons'
+import { LoadingCircular } from '@citric/ui'
+import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { findLastIndex } from 'lodash'
+import { useState } from 'react'
+import { useWidget } from '../../context/hooks'
+import { ChatEntryStep } from '../../state/ChatEntry'
+import { PropsOf } from '../../types'
+
+interface Props {
+  steps: ChatEntryStep[],
+  messageId: number,
+  chatId: string,
+}
+
+interface StepProps {
+  step: ChatEntryStep,
+  index: number,
+  total: number,
+  onClick?: () => void,
+}
+
+function getStatusIcon(status: ChatEntryStep['status']) {
+  const iconBoxProps: PropsOf<typeof IconBox> = { colorIcon: 'light.700', size: 'xs' }
+  switch (status) {
+    case 'error': return <IconBox {...iconBoxProps}><TimesCircleFill /></IconBox>
+    case 'success': return <IconBox {...iconBoxProps}><CheckCircleFill /></IconBox>
+    case 'pending': return <IconBox {...iconBoxProps}><Circle /></IconBox>
+    case 'running': return <LoadingCircular className="loading" colorScheme="inverse" size="xs" />
+  }
+}
+
+const Step = ({ step, index, total, onClick }: StepProps) => {
+  const t = useTranslate(dictionary)
+  return (
+    <li tabIndex={onClick ? 0 : undefined} onClick={onClick} role={onClick ? 'button' : 'listitem'}>
+      <div className="step-status-icon">{getStatusIcon(step.status)}</div>
+      <Text className="step-title" appearance="microtext1" colorScheme="light.700">
+        {t.step} {index}/{total}: {step.input}
+      </Text>
+    </li>
+  )
+}
+
+export const StepsList = ({ steps, chatId, messageId }: Props) => {
+  const t = useTranslate(dictionary)
+  const [isExpanded, setExpanded] = useState(false)
+  const actualSteps = steps.filter(s => s.type === 'step')
+  let currentStepIndex = findLastIndex(actualSteps, s => s.status === 'running' || s.status === 'success')
+  if (currentStepIndex === -1) currentStepIndex = 0
+  const widget = useWidget()
+
+  function openToolsPanel() {
+    widget.set('currentMessageInToolsPanel', { chatId, messageId })
+    widget.set('panel', 'tools')
+  }
+  
+  return (
+    <AnimatedHeight>
+      <div className="steps">
+        <ul>
+          {isExpanded
+            ? actualSteps.map((s, i) => <Step step={s} key={i} index={i + 1} total={actualSteps.length} />)
+            : <Step
+              step={actualSteps[currentStepIndex]}
+              index={currentStepIndex + 1}
+              total={actualSteps.length}
+              onClick={() => setExpanded(true)}
+            />
+          }
+        </ul>
+        {isExpanded && <div className="step-actions">
+          <Button colorScheme="light" size="sm" onClick={() => setExpanded(false)}>{t.hideSteps}</Button>
+          <Button colorScheme="light" size="sm" className="icon-button" onClick={openToolsPanel}>
+            <IconBox size="xs"><PlayFill /></IconBox>
+            {t.detailed}
+          </Button>
+        </div>}
+      </div>
+    </AnimatedHeight>
+  )
+}
+
+const dictionary = {
+  en: {
+    step: 'Step',
+    hideSteps: 'Hide steps',
+    detailed: 'View detailed mode',
+  },
+  pt: {
+    step: 'Passo',
+    hideSteps: 'Esconder passos',
+    detailed: 'Ver modo detalhado',
+  },
+} satisfies Dictionary

package/src/views/Chat/styled.ts

@@ -1,7 +1,12 @@
 import { theme } from '@stack-spot/portal-theme'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import { styled } from 'styled-components'
+import { FastOmit, IStyledComponentBase } from 'styled-components/dist/types'
 
-export const ChatList = styled.ul`
+export const ChatList: IStyledComponentBase<
+  'web',
+  FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>
+> = styled.ul`
   display: flex;
   flex-direction: column;
   justify-content: end;
@@ -183,4 +188,60 @@ export const ChatList = styled.ul`
       }
     }
   }
+
+  .steps {
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+
+      li {
+        display: flex;
+        flex-direction: row;
+        gap: 4px;
+        align-items: center;
+
+        &[role="button"] {
+          cursor: pointer;
+        }
+
+        .loading {
+          width: 12px;
+          height: 12px;
+        }
+
+        .step-status-icon {
+          width: 20px;
+          height: 20px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .step-title {
+          line-height: 0.75rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical; 
+        }
+      }
+    }
+
+    .step-actions {
+      margin-top: 8px;
+      display: flex;
+      gap: 6px;
+
+      .icon-button {
+        display: flex;
+        gap: 6px;
+        align-items: center;
+      }
+    }
+  }
 `

package/src/views/Stacks.tsx

@@ -46,6 +46,7 @@ const StacksTab = ({ visibility }: { visibility: VisibilityLevelEnum }) => {
   const { close } = useRightPanel()
   const chat = useCurrentChat()
   const [filter, setFilter] = useState('')
+  // @ts-ignore type in backend (openapi) is incorrect. fixme.
   const stacks = aiClient.aiStacks.useQuery({ visibility, order: 'a-to-z' })
   const [value, setValue] = useState<GetAiStackResponse | undefined>(stacks.find(s => s.id === chat.get('stack')?.id))
   const filtered = useMemo(

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

@@ -0,0 +1,12 @@
+import { Handle, Position } from '@xyflow/react'
+
+interface Props {
+  renderSource?: boolean,
+  renderTarget?: boolean,
+}
+export const HandleGroup = ({ renderSource = true, renderTarget = true }: Props) => (
+  <>
+    {renderTarget && <Handle type="target" position={Position.Left} isConnectable className="target-handle" />}
+    {renderSource && <Handle type="source" position={Position.Right} isConnectable className="source-handle" />}
+  </>
+)

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,
+}