@stack-spot/ai-chat-widget 3.6.0-beta.5 → 3.6.2-beta.5

package/src/views/Chat/ChatMessage.tsx

@@ -15,6 +15,7 @@ import { ChatEntry, SerializableAction, TextChatEntry } from '../../state/ChatEn
 import { useDateFormatter } from '../../utils/date'
 import { toolById } from '../../utils/tools'
 import { AgentInfo } from './AgentInfo'
+import { ButtonExecutionDetail } from './ButtonExecutionDetail'
 import { useChatScrollToBottomEffect } from './chat-scroll'
 import { onCopyAll, onCopyCode, onLikeOrDislike } from './events'
 import { StepsList, StepsPlaceholder, ViewToolsDetails } from './StepsList'
@@ -228,8 +229,9 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
 
   // Dynamic tool steps are identified by the "dynamic" id.
   // We're temporarily hiding the toolbox for these dynamic tools while we finalize their UI.
-  const shouldHideToolbox =  entry?.steps?.some((step) => step?.id === 'dynamic')
-  const showToolBox = (!!agentsTools?.length || !!entry.tools?.length) && !shouldHideToolbox
+  const isDynamicSteps = !!entry?.steps?.some((s) => s.id?.toLowerCase() === 'dynamic')
+  const hasTools = ((agentsTools?.length ?? 0) > 0) || ((entry.tools?.length ?? 0) > 0)
+  const showToolBox = hasTools && !isDynamicSteps
   
   useChatScrollToBottomEffect(ref, [entry])
   useMidnightUpdateView()
@@ -355,7 +357,8 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
     widget.set('panel', 'resources')
   }
 
-  const shouldShowToolsOnlyMessage = (entry.done !== false || entry.hasPlanning) && !!entry.steps?.length
+  const buttonExecutionDetail = useMemo(() =>  <ButtonExecutionDetail chatId={chat.id} messageId={message.id} />, [chat.id, message.id])
+  const shouldShowToolsOnlyMessage = (entry.done !== false || entry.hasPlanning || isDynamicSteps) && !!entry.steps?.length
   const shouldRender = entry.content || entry.error || shouldShowToolsOnlyMessage || !!entry.upload?.length
 
   return shouldRender && (
@@ -372,7 +375,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
                 {entry.badges.map((b, index) => <Badge key={index} colorPalette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
               </div>}
 
-              {!!entry.steps?.length && <StepsList steps={entry.steps} chatId={chat.id} messageId={message.id} />}
+              {!!entry.steps?.length && !isDynamicSteps && <StepsList steps={entry.steps} chatId={chat.id} messageId={message.id} />}
 
               {renderContent()}
 
@@ -428,6 +431,8 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
           </div>
         }
 
+        {!!entry.steps?.length && isDynamicSteps && buttonExecutionDetail}
+
         {shouldShowFooter && <div className="message-footer">
           {entry.agentType === 'bot' && !entry.error && <div className="message-actions">
             {entry.type === 'md' && (

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

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

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

@@ -1,6 +1,7 @@
 import { Icon } from '@stack-spot/citric-icons'
 import { Text } from '@stack-spot/citric-react'
 import { listToClass } from '@stack-spot/portal-theme'
+import { Position } from '@xyflow/react'
 import { StackedBadge } from '../../../components/StackedBadge'
 import { useStepsDictionary } from '../dictionary'
 import { getStatusIcon, getTitle, getTypeIcon } from '../utils'
@@ -9,15 +10,17 @@ import { NodeData } from './types'
 
 interface Props {
   data: NodeData,
+  targetPosition?: Position,
+  sourcePosition?: Position,
 }
 
-export const NodeStep = ({ data: { step, index, nextStatus, onClick } }: Props) => {
+export const NodeStep = ({ data: { step, index, nextStatus, onClick }, ...props }: Props) => {
   const t = useStepsDictionary()
 
   return (
     <div
       className={listToClass(['chart-node', step.type, nextStatus])}
-      onClick={onClick}
+      onClick={() => onClick?.()}
       onKeyDown={e => e.key === 'Enter' && onClick?.()}
       tabIndex={0}
       role="button"
@@ -29,7 +32,7 @@ export const NodeStep = ({ data: { step, index, nextStatus, onClick } }: Props)
         {getStatusIcon(step.status)}
       </header>
       {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' && step.input && <Text className="step-title">b {step.input}</Text>}
       {step.type === 'step' && <div className="step-details">
         <Text className={listToClass(['step-description', !!step.attempts[0].tools?.length && 'with-tools'])}>
           {step.output}
@@ -41,7 +44,6 @@ export const NodeStep = ({ data: { step, index, nextStatus, onClick } }: Props)
           )}
         />}
       </div>}
-      <HandleGroup renderSource={step.type !== 'answer'} renderTarget={step.type !== 'planning'} />
-    </div>
+      <HandleGroup {...props} renderSource={step.type !== 'answer'} renderTarget={step.type !== 'planning'} />    </div>
   )
 }

package/src/views/Steps/FlowChart/NodeTool.tsx

@@ -0,0 +1,97 @@
+import { Icon, WithIcon } from '@stack-spot/citric-icons'
+import { Avatar, Column, IconBox, Row, Skeleton, Text } from '@stack-spot/citric-react'
+import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
+import { ChatAgentTool } from '@stack-spot/portal-network'
+import { listToClass } from '@stack-spot/portal-theme'
+import { Position } from '@xyflow/react'
+import { useChatEntry } from '../../../context/hooks'
+import { useStepsDictionary } from '../dictionary'
+import { getTitle, getTypeIcon } from '../utils'
+import { HandleGroup } from './HandleGroup'
+import { useResizeObserver } from './hooks'
+import { NodeData } from './types'
+
+const ToolItem = ({ tool, index, onClick }: { tool: ChatAgentTool, index: number, onClick?: (index: number) => void }) => {
+  const { name, image, input, status } = tool
+
+  if (status === 'running') {
+    return <Skeleton height="48px" bgLevel={600} />
+  }
+
+  return (
+    <div className="tool" onClick={() => onClick?.(index)}>
+      <Row gap="4px" alignItems="center" mb={2}>
+        {image
+          ? <Avatar size="xxs" image={image} name={name} />
+          : <Icon icon="Cog" group="outline" />
+        }
+        <Text weight="500" className="title">{name}</Text>
+      </Row>
+      <Text nowrapEllipsis color="light.700">{input}</Text>
+    </div>
+  )
+}
+
+export const ListTools = ({ tools, onClick }: { tools: ChatAgentTool[], onClick?: (toolIndex?: number) => void }) => (
+  <AnimatedHeight>
+    <Column gap="8px">
+      {tools.map((tool, index) => (
+        <Column key={`${tool.id}-${index}`} className="wrapper-tool">
+          <ToolItem tool={tool} index={index} onClick={onClick} />
+        </Column>
+      ))}
+    </Column>
+  </AnimatedHeight>
+)
+
+const StepCard = ({ title, icon, content, onClick }: { title: string, icon: WithIcon, content?: string, onClick?: () => void }) => (
+  <Column onClick={onClick} style={{ cursor: onClick ? 'pointer' : 'default' }}>
+    <Row>
+      <IconBox {...icon} appearance="square" colorScheme="light" size="sm" />
+      <Text className="step-index" weight="500">{title}</Text>
+    </Row>
+    <Text nowrapEllipsis color="light.700">
+      {content}
+    </Text>
+  </Column>
+)
+
+interface Props {
+  data: NodeData,
+  targetPosition?: Position,
+  sourcePosition?: Position,
+}
+
+export const NodeTool = ({ data, ...props }: Props) => {
+  const { step, index, onClick, onResize, message } = data
+  const content = useChatEntry(message)?.content
+  const t = useStepsDictionary()
+  const ref = useResizeObserver(onResize)
+
+  const tools = step.type === 'step' ? step?.attempts?.[0]?.tools : undefined
+
+  const renderContent = () => {
+    if (step.type === 'planning') {
+      return <StepCard title={t.userPrompt} content={step.user_question} icon={{ ...getTypeIcon(step.type) }} />
+    }
+
+    if (step.type === 'step') {
+      return tools?.length ? <ListTools onClick={onClick} tools={tools} /> : null
+    }
+
+    if (step.type === 'answer') {
+      return <Column p={3} bg="light.400" onClick={() => onClick?.(index)}>
+        <StepCard onClick={onClick} title={t.finalAnswer} content={content} icon={{ ...getTypeIcon(step.type) }} />     
+      </Column> 
+    }
+  }
+
+  return (
+    <div ref={ref} aria-label={getTitle(t, step, index)}>
+      <div className={listToClass(['chart-node', null, step.status])} >
+        {renderContent()}
+        <HandleGroup  {...props} renderSource={step.type !== 'answer'} renderTarget={step.type !== 'planning'} />
+      </div>
+    </div>
+  )
+}

package/src/views/Steps/FlowChart/hooks.ts

@@ -0,0 +1,40 @@
+import { debounce } from 'lodash'
+import { useEffect, useRef } from 'react'
+
+interface Size {
+  width: number,
+  height: number,
+}
+
+export const useResizeObserver = (callback?: (size: Size) => void) => {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const previousSizeRef = useRef<Size | null>(null)
+
+  useEffect(() => {
+    if (!ref.current || !callback) return
+
+    const debouncedCallback = debounce((newSize: Size) => {
+      const prevSize = previousSizeRef.current
+      const hasChanged = !prevSize || prevSize.width !== newSize.width || prevSize.height !== newSize.height
+
+      if (hasChanged) {
+        previousSizeRef.current = newSize
+        callback(newSize)
+      }
+    }, 50)
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      const { width, height } = entries[0].contentRect
+      debouncedCallback({ width, height })
+    })
+
+    resizeObserver.observe(ref.current)
+
+    return () => {
+      resizeObserver.disconnect()
+      debouncedCallback.cancel()
+    }
+  }, [callback])
+
+  return ref
+}

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

@@ -1,34 +1,63 @@
 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 { Background, Controls, Edge, MarkerType, ReactFlow, ReactFlowProvider, useReactFlow } from '@xyflow/react'
 import '@xyflow/react/dist/style.css'
-import { useMemo } from 'react'
+import { last } from 'lodash'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useChatEntry } from '../../../context/hooks'
 import { ChatEntry } from '../../../state/ChatEntry'
-import { useLayoutedElements } from './layout'
+import { LayoutDirection, useLayoutedElements } from './layout'
 import { NodeStep } from './NodeStep'
-import { FlowChartBox, runningColor } from './styled'
+import { NodeTool } from './NodeTool'
+import { FlowChartBox } from './styled'
+import { NodeFullProps } from './types'
 
 interface Props {
   message: ChatEntry,
-  onClick: (step: ChatStep, index: number) => void,
+  onClick: (step: ChatStep, toolIndex?: number) => void,
+  direction?: LayoutDirection,
 }
 
-const nodeTypes = {
-  planning: NodeStep,
-  step: NodeStep,
-  answer: NodeStep,
+const NODE_TYPES = {
+  step: { planning: NodeStep, step: NodeStep, answer: NodeStep },
+  tool: { planning: NodeTool, step: NodeTool, answer: NodeTool },
 }
 
-export const FlowChart = ({ message, onClick }: Props) => {
+const Flow = ({ message, onClick, direction = 'LR' }: 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 [nodeSizes, setNodeSizes] = useState<Record<string, { width: number, height: number }>>({})
+  const reactFlowInstance = useReactFlow()
+
+  const isDynamic = useMemo(() => steps?.some((step) => step.id === 'dynamic'), [steps])
+  const nodeTypes = useMemo(() => NODE_TYPES[isDynamic ? 'tool' : 'step'], [isDynamic])
+
+  const handleNodeSizeChange = useCallback((id: string, size: { width: number, height: number }) => {
+    setNodeSizes((prev) => {
+      const current = prev[id]
+      if (current?.width === size.width && current?.height === size.height) return prev
+      return { ...prev, [id]: size }
+    })
+  }, [])
+
+  const baseElements = useMemo(() => {
+    const nodes = steps?.map((s, index) => {
+      const nodeSize = nodeSizes[s.id]
+      return {
+        id: s.id,
+        type: s.type,
+        focusable: false,
+        ...(nodeSize && { width: nodeSize.width, height: nodeSize.height }),
+        origin: [1, 0],
+        data: {
+          message,
+          step: s,
+          index,
+          nextStatus: steps[index + 1]?.status,
+          onClick: (toolIndex) => onClick(s, toolIndex),
+          onResize: (size) => handleNodeSizeChange(s.id, size),
+        },
+      }
+    }) as NodeFullProps[] ?? []
     const edges: Edge[] = []
     for (let i = 0; i < nodes.length - 1; i++) {
       edges.push({
@@ -40,24 +69,33 @@ export const FlowChart = ({ message, onClick }: Props) => {
         markerEnd: {
           type: MarkerType.Arrow,
           strokeWidth: 2,
-          color: nodes[i]?.data?.nextStatus === 'running' ? runningColor : theme.color.light[700],
+          color: theme.color.light[700],
         },
       })
     }
     return { nodes, edges }
-  }, [steps])
+  }, [steps, nodeSizes, message, onClick, handleNodeSizeChange])
+
+  const { nodes, edges } = useLayoutedElements(baseElements.nodes, baseElements.edges, direction)
 
-  const layouted = useLayoutedElements(nodes, edges)
+  useEffect(() => {
+    const lastNode = last(nodes)
+    const isRunning = lastNode?.data?.step?.status === 'running'
+    const shouldFitView = nodes.length > 2 && isRunning || (lastNode?.height ?? 0 > 180) && isRunning
+    if (shouldFitView) {
+      reactFlowInstance.fitView({ duration: 1000,  padding: { bottom: '120px', top: '20px' } })
+    }
+  }, [nodes, edges, reactFlowInstance])
 
   return (
     <FlowChartBox>
       <ReactFlow
-        // @ts-ignore wrong type in the lib
-        nodes={layouted.nodes}
-        edges={layouted.edges}
+        nodes={nodes}
+        edges={edges}
         nodeTypes={nodeTypes}
         snapToGrid={true}
         fitView
+        maxZoom={1}
       >
         <Controls orientation="horizontal" className="controls" showInteractive={false} />
         <Background />
@@ -65,3 +103,9 @@ export const FlowChart = ({ message, onClick }: Props) => {
     </FlowChartBox>
   )
 }
+
+export const FlowChart = (props: Props) => (
+  <ReactFlowProvider>
+    <Flow {...props} />
+  </ReactFlowProvider>
+)

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

@@ -1,8 +1,8 @@
 import dagre from '@dagrejs/dagre'
-import { Edge } from '@xyflow/react'
+import { Edge, Position } from '@xyflow/react'
 import { useMemo } from 'react'
 import { answerNodeSize, planningNodeSize, stepNodeSize } from './styled'
-import { NodeWithoutLayout } from './types'
+import { NodeFullProps } from './types'
 
 const nodesSizes = {
   step: stepNodeSize,
@@ -11,40 +11,63 @@ const nodesSizes = {
   tool: stepNodeSize,
 }
 
-export function useLayoutedElements(nodes: NodeWithoutLayout[], edges: Edge[]) {
+export type LayoutDirection = 'TB' | 'BT' | 'LR' | 'RL'
+
+const getHandlePositions = (direction: LayoutDirection) => {
+  switch (direction) {
+    case 'TB':
+      return { target: Position.Top, source: Position.Bottom }
+    case 'BT':
+      return { target: Position.Bottom, source: Position.Top }
+    case 'LR':
+      return { target: Position.Left, source: Position.Right }
+    case 'RL':
+      return { target: Position.Right, source: Position.Left }
+  }
+}
+
+export function useLayoutedElements(nodes: NodeFullProps[], edges: Edge[], direction: LayoutDirection = 'LR') {
   const dagreGraph = useMemo(() => new dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({})), [])
+
   return useMemo(() => {
-    dagreGraph.setGraph({ rankdir: 'LR' })
-    
+    dagreGraph.setGraph({ rankdir: direction })
+
     nodes.forEach((node) => {
       const { width, height } = nodesSizes[node.type]
-      dagreGraph.setNode(node.id, { width, height })
+      const nodeWidth = node.width ?? width
+      const nodeHeight = node.height ?? height
+      dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight })
     })
-  
+
     edges.forEach((edge) => {
       dagreGraph.setEdge(edge.source, edge.target)
     })
-  
+
     dagre.layout(dagreGraph)
-  
-    const newNodes = nodes.map((node) => {
+
+    const { target, source } = getHandlePositions(direction)
+
+    const newNodes: NodeFullProps[] = nodes.map((node) => {
       const { width, height } = nodesSizes[node.type]
+      const nodeWidth = node?.width ?? width
+      const nodeHeight = node.height ?? height
       const nodeWithPosition = dagreGraph.node(node.id)
       const newNode = {
         ...node,
-        targetPosition: 'left',
-        sourcePosition: 'right',
+        targetPosition: target,
+        sourcePosition: source,
         // 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,
+          x: nodeWithPosition.x - nodeWidth / 2,
+          y: nodeWithPosition.y - nodeHeight / 2,
         },
       }
-  
+
       return newNode
     })
-  
+
     return { nodes: newNodes, edges }
   }, [nodes, edges])
 }
+

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

@@ -1,10 +1,9 @@
 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 stepNodeSize = { width: 400, height: 167 }
+export const planningNodeSize = { width: 400, height: 61 }
+export const answerNodeSize = { width: 400, height: 40 }
 
 export const FlowChartBox = styled.div`
   width: 100%;
@@ -19,31 +18,35 @@ export const FlowChartBox = styled.div`
     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};
-    }
+    justify-content: center; 
+    width: 400px;
 
     &.pending .source-handle {
       opacity: 0.3;
     }
 
+    .source-handle {
+      transition: opacity 1s ease; opacity: 1;
+    }
+
+    &.running .source-handle {
+       opacity: 0;
+    }
+    
     &.step {
       width: ${stepNodeSize.width}px;
-      height: ${stepNodeSize.height}px;
+      min-height: ${stepNodeSize.height}px;
     }
 
     &.planning {
       width: ${planningNodeSize.width}px;
-      height: ${planningNodeSize.height}px;
+      min-height: ${planningNodeSize.height}px;
     }
 
     &.answer {
       width: ${answerNodeSize.width}px;
-      height: ${answerNodeSize.height}px;
+      min-height: ${answerNodeSize.height}px;
     }
-
     header {
       display: flex;
       gap: 4px;
@@ -71,7 +74,7 @@ export const FlowChartBox = styled.div`
       flex-direction: column;
       align-items: start;
       justify-content: space-between;
-      gap: 10px;
+      gap: 8px;
       overflow: hidden;
 
       .step-description {
@@ -89,6 +92,28 @@ export const FlowChartBox = styled.div`
         }
       }
     }
+
+    .wrapper-tool {
+      &:not(:last-child) {         
+        border-bottom: 1px solid ${theme.color.light[600]};
+        padding-bottom: 8px;
+      }
+      
+      .tool {
+        padding: 8px;     
+        border-radius: 4px;
+        min-height: 48px;
+        border: 1px solid ${theme.color.light[500]};
+        background-color: ${theme.color.light[400]}; 
+        border-bottom: 1px solid ${theme.color.light[300]}; 
+        cursor: pointer; 
+      
+        &:hover .title {
+          text-decoration: underline;
+        }      
+      }
+    }
+ 
   }
 
   .source-handle {
@@ -121,7 +146,6 @@ export const FlowChartBox = styled.div`
       opacity: 0.3;
     }
     &.running path {
-      stroke: ${runningColor};
       stroke-dasharray: 5, 5;
     }
   }

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

@@ -1,14 +1,28 @@
 import { ChatStep } from '@stack-spot/portal-network'
+import { Node } from '@xyflow/react'
+import { ChatEntry } from '../../../state/ChatEntry'
+
+export type NodeType = 'step' | 'planning' | 'answer' | 'tool'
 
 export interface NodeData {
   nextStatus: ChatStep['status'] | undefined,
-  onClick?: () => void,
+  onClick?: (toolIndex?:  number) => void,
   step: ChatStep,
   index: number,
+  message: ChatEntry,
+  onResize?: (size: { width: number, height: number }) => void,
 }
 
 export interface NodeWithoutLayout {
   id: string,
-  type: 'step' | 'planning' | 'answer' | 'tool',
+  type: NodeType,
   data?: NodeData,
 }
+
+export type NodeDataFullProps = NodeData & Record<string, unknown>
+
+export interface NodeFullProps extends Node<NodeDataFullProps> {
+  type: NodeType,
+}
+
+