@stack-spot/ai-chat-widget 2.8.5 → 2.10.0

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

package/src/views/Steps/StepModal.tsx

@@ -1,5 +1,7 @@
-import { Badge, IconButton, Row, Text } from '@stack-spot/citric-react'
+import { Avatar, Badge, Divider, IconButton, Row, Text } from '@stack-spot/citric-react'
+import { ChatAgentTool } from '@stack-spot/portal-network'
 import { theme } from '@stack-spot/portal-theme'
+import { isNil } from 'lodash'
 import { useMemo, useState } from 'react'
 import { styled } from 'styled-components'
 import { Code } from '../../components/Code'
@@ -14,6 +16,7 @@ import { getTitle, toPrecision } from './utils'
 interface Props {
   message: ChatEntry,
   stepId: string | undefined,
+  toolIndex?: number,
   onClose: () => void,
 }
 
@@ -43,16 +46,26 @@ const StyledSection = styled.section`
     align-items: start;
     align-self: stretch;
     gap: 6px;
-    background-color: ${theme.color.light[500]};
+    background-color: ${theme.color.light[400]};
     border-radius: 5px;
-    padding: 6px;
+    padding: 0 6px;
 
     &:not(:last-child) {
       border-bottom: 1px solid ${theme.color.light[500]};
     }
 
+    hr {
+      margin: 16px 0;
+    }
+    
+    .header-code {
+      background-color: ${theme.color.light[300]};
+    }
+
     .tool-input {
       align-self: stretch;
+      border: 1px solid ${theme.color.light[600]};
+      margin-top: 8px;
       &, .highlighter {
         background: ${theme.color.light[300]} !important;
       }
@@ -118,29 +131,39 @@ const ExecutionBox = styled.div`
   }
 `
 
-export const StepModal = ({ message, stepId, onClose }: Props) => {
+export const StepModal = ({ message, stepId, toolIndex, 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 showSingleTool = !isNil(toolIndex)
+  const attemptTools: ChatAgentTool[] | undefined = step?.type === 'step' ? step.attempts[attempt]?.tools : undefined
+  const toolsToRender = showSingleTool && attemptTools ? [attemptTools[toolIndex]].filter(Boolean) : attemptTools
 
-  const tools = step?.type === 'step' ? step.attempts[attempt]?.tools?.map(tool => (
+  const tools = toolsToRender?.map(tool => (
     <div className="tool" key={tool.id}>
-      <ToolBadge name={tool.name ?? ''} duration={tool.duration} image={tool.image} description={tool.description} />
+      {!showSingleTool && <ToolBadge name={tool.name ?? ''} duration={tool.duration} image={tool.image} description={tool.description} />}
       {tool.input && <>
-        <Text appearance="microtext1" color="light.700">{t.input}:</Text>
+        <Badge appearance="square" colorPalette="cyan">{t.input}</Badge>
         <Code language="json" className="tool-input" showLineNumbers={false} showActionBar>{tool.input}</Code>
       </>}
       {tool.output && <>
-        <Text appearance="microtext1" color="light.700">{t.response}:</Text>
+        <Divider />
+        <Badge appearance="square" colorPalette="cyan">{t.response}</Badge>
         <Code language="json" className="tool-input" showLineNumbers={false} showActionBar>{tool.output}</Code>
       </>}
     </div>
-  )) : undefined
+  ))
 
-  const title = (
-    <Row flex={1} justifyContent="space-between">
+  const singleTool = showSingleTool ? toolsToRender?.[0] : undefined
+
+  const title = (showSingleTool
+    ? <Row flex={1} gap="8px">
+      {!!singleTool?.name && <Avatar size="xxs" image={singleTool?.image} name={singleTool?.name} />}
+      <Text appearance="h6">{singleTool?.name ?? t.finalAnswer}</Text>
+    </Row>
+    : <Row flex={1} justifyContent="space-between">
       <Text appearance="h6">{getTitle(t, step, stepIndex)}</Text>
       <ExecutionBox>
         <Text className="time" appearance="microtext1">
@@ -176,7 +199,7 @@ export const StepModal = ({ message, stepId, onClose }: Props) => {
   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>}  
+        {entry.type === 'md' ? <Markdown>{entry.content}</Markdown> : <Text>{entry.content}</Text>}
       </StyledSection>}
 
       {step?.type === 'planning' && <StyledSection style={{ alignItems: 'stretch' }}>
@@ -199,7 +222,7 @@ export const StepModal = ({ message, stepId, onClose }: Props) => {
           ))}
         </ul>
       </StyledSection>}
-      
+
       {step?.type === 'step' && step?.input && <StyledSection>
         <Badge appearance="square" colorPalette="blue">Prompt</Badge>
         <Text>{step.input}</Text>

package/src/views/Steps/StepsPanel.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable import/no-default-export */
 
+import { ChatStep } from '@stack-spot/portal-network'
 import { useMemo, useState } from 'react'
 import { useWidget } from '../../context/hooks'
 import { FlowChart } from './FlowChart'
@@ -7,16 +8,22 @@ import { StepModal } from './StepModal'
 
 const StepsPanel = ({ chatId, messageId }: { chatId: string, messageId: number }) => {
   const [currentStepId, setCurrentStepId] = useState<string | undefined>()
+  const [toolIndex, setToolIndex] = useState<number | undefined>()
   const widget = useWidget()
   const message = useMemo(
     () => widget.chatTabs.getAll().find(c => c.id === chatId)?.getMessages().find(m => m.id === messageId),
     [chatId, messageId],
   )
 
+  const handleClick = (step: ChatStep, tooIndex?: number) => {
+    setCurrentStepId(step.id)
+    setToolIndex(tooIndex)
+  }
+
   return message ? (
     <>
-      <FlowChart message={message} onClick={(step) => setCurrentStepId(step.id)} />
-      <StepModal message={message} stepId={currentStepId} onClose={() => setCurrentStepId(undefined)} />
+      <FlowChart message={message} onClick={handleClick} direction="TB" />
+      <StepModal message={message} stepId={currentStepId} toolIndex={toolIndex} onClose={() => setCurrentStepId(undefined)} />
     </>
   ) : null
 }

package/src/views/Steps/dictionary.ts

@@ -18,6 +18,8 @@ export const dictionary = {
     open: 'Open',
     close: 'Close',
     input: 'Input',
+    finalAnswer: 'Final answer',
+    userPrompt: 'User prompt',
   },
   pt: {
     stepsPanelDescription: 'Os passos e ferramentas usados para chegar na resposta',
@@ -34,6 +36,8 @@ export const dictionary = {
     nextAttempt: 'Próxima execução',
     previousAttempt: 'Execução anterior',
     input: 'Entrada',
+    finalAnswer: 'Resposta final',
+    userPrompt: 'Prompt do usuário',
   },
 } satisfies Dictionary
 

package/src/views/Steps/utils.tsx

@@ -14,8 +14,8 @@ export function getStatusIcon(status: ChatStep['status']) {
 
 export function getTypeIcon(type: ChatStep['type']): WithIcon {
   switch (type) {
-    case 'planning': return { group: 'outline', icon: 'ListUnordered' }
-    default: return { group: 'fill', icon: 'Play' }
+    case 'planning': return { group: 'fill', icon: 'ChevronRight' }
+    default: return { group: 'outline', icon: 'StackSpot' }
   }
 }