@stack-spot/ai-chat-widget 2.0.0 → 3.0.0-beta.1

package/src/views/Chat/StepsList.tsx

@@ -1,12 +1,17 @@
-import { Icon } from '@stack-spot/citric-icons'
-import { Button, ProgressCircular, Text } from '@stack-spot/citric-react'
+import { Accordion, Badge, Button, Card, Column, Divider, Icon, IconBox, ImageWithFallback, ProgressCircular, Row, Skeleton, Text } from '@stack-spot/citric-react'
 import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
-import { ChatStep, StepChatStep } from '@stack-spot/portal-network'
+import { ChatStep, StepChatStep, ToolChatStep } from '@stack-spot/portal-network'
 import { theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { findLastIndex } from 'lodash'
-import { useState } from 'react'
-import { useWidget } from '../../context/hooks'
+import React, { useMemo } from 'react'
+import styled from 'styled-components'
+import { Markdown } from '../../components/Markdown'
+import { useCurrentChat, useCurrentChatMessages, useWidget } from '../../context/hooks'
+import { ChatEntry } from '../../state/ChatEntry'
+import { planningToolDictionaryHelper } from '../../utils/planning-tool'
+import { updateToolStep } from '../../utils/update-tool-step'
+import { onCopyCode } from './events'
 
 interface Props {
   steps: ChatStep[],
@@ -14,39 +19,243 @@ interface Props {
   chatId: string,
 }
 
+interface StepChatStepWithTarget extends Omit<StepChatStep, 'status' | 'id' | 'type'> {
+  status: 'pending' | 'running' | 'success' | 'error' | 'target' | 'awaiting_approval',
+}
+
 interface StepProps {
-  step: StepChatStep,
+  step: StepChatStepWithTarget,
   index: number,
-  total: number,
+  total?: number,
+  totalTools?: number,
+  isAllDone?: boolean,
   onClick?: () => void,
 }
 
-function getStatusIcon(status: ChatStep['status']) {
+function getStatusIcon(status: StepChatStepWithTarget['status'] | 'target', isDone?: boolean) {
   const iconProps = { style: { color: theme.color.light[700] }, size: 'xs' } as const
   switch (status) {
     case 'error': return <Icon group="fill" icon="TimesCircle" {...iconProps} />
     case 'success': return <Icon group="fill" icon="CheckCircle" {...iconProps} />
-    case 'pending': return <Icon icon="Spaces" {...iconProps} />
+    case 'pending': return <Icon group="fill" icon="Circle" {...iconProps} style={{ color: theme.color.light[600] }} />
+    case 'awaiting_approval': return <Icon group="fill" icon="ExclamationTriangle" {...iconProps} />
+    case 'target': return <Icon icon="Target" {...iconProps} style={{ color: isDone ? theme.color.light[700] : theme.color.light[600] }} />
     case 'running': return <ProgressCircular className="loading" colorScheme="inverse" size="xs" />
   }
 }
 
-const Step = ({ step, index, total, onClick }: StepProps) => {
+const StepAccordionHeader = ({ step, index, expand }: Pick<StepProps, 'step' | 'index'> & { expand: React.ReactElement }) => {
   const t = useTranslate(dictionary)
+  return <Row gap="8px">
+    {expand}
+    {step.status === 'target' ? <Text className="step-title" appearance="body2" color="light.700">{t.planGoal}:</Text> :
+      <Badge colorScheme="inverse" appearance="square">
+        {t.step} {index}
+      </Badge>}
+    <Text className="step-title" appearance="body2" >
+      {step.input}
+    </Text>
+    {step.status === 'awaiting_approval' && 
+    <Badge appearance="square" style={{ backgroundColor: theme.color.gray[800], color: theme.color.gray[50] }}>
+      <Icon icon="Security" />
+      {t.pendingReview}
+    </Badge>}
+  </Row>
+}
+
+const StyledCard = styled(Card)`
+  &:hover { 
+    background-color: ${theme.color.light[500]}
+  }
+`
+
+const Step = ({ step, index, onClick, total, totalTools, isAllDone }: StepProps) => {
+  const t = useTranslate(dictionary)
+  const status = getStatusIcon(step.status, isAllDone)
+
   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" color="light.700">
-        {t.step} {index}/{total}: {step.input}
-      </Text>
+      <Row gap="4px" alignItems="center">
+        <div className="step-status-icon">{status}</div>
+        <StyledCard p="8px" w="75%">
+          <Accordion header={expand => <StepAccordionHeader step={step} index={index} expand={expand} />}>
+            <Column pt="12px">
+              {total ?
+                <Row gap="40px">
+                  <Row gap="4px">
+                    <Icon icon="Hashtag" size="sm" color="light.700" />
+                    <Text color="light.700">{t.totalSteps}</Text>
+                    {total}
+                  </Row>
+                  <Row gap="4px">
+                    <Icon icon="BorderRadius" size="sm" color="light.700" />
+                    <Text color="light.700">{t.totalTools}</Text>
+                    {totalTools}
+                  </Row>
+                </Row>
+                : <>
+                  <Row pb="8px" gap="4px">
+                    <Icon icon="Target" size="sm" color="light.700" />
+                    <Text color="light.700">{t.stepGoal}:</Text>
+                    <Text>
+                      {step.input}
+                    </Text>
+                  </Row>
+                  <Row gap="4px">
+                    <Icon icon="BorderRadius" size="sm" color="light.700" />
+                    <Text color="light.700">{t.toolsToBeExecuted}:</Text>
+                  </Row>
+                  <ul className="tools-list">
+                    {step.attempts?.[0]?.tools?.map((tool) => (<li key={tool.id}>
+                      <Text>{tool.name}: {tool.goal}</Text>
+                    </li>),
+                    )}
+                  </ul>
+                </>
+              }
+            </Column>
+          </Accordion>
+        </StyledCard>
+      </Row>
     </li>
   )
 }
 
+export const StepsPlaceholder = () => {
+  const t = useTranslate(dictionary)
+  return <Card gap="8px">
+    <Row gap="8px">
+      <ProgressCircular colorScheme="inverse" size="xs" />
+      <Text color="light.700">{t.generatingPlan}</Text>
+    </Row>
+    <Text color="light.700">
+      {t.analyzingRequirements}
+    </Text>
+    <Row gap="12px">
+      <Skeleton height="31px" width="148px" bgLevel={600} />
+      <Skeleton height="31px" width="148px" bgLevel={600} />
+      <Skeleton height="31px" width="148px" bgLevel={600} />
+      <Skeleton height="31px" width="148px" bgLevel={600} />
+    </Row>
+  </Card>
+}
+
+const AwaitingApproval = ({ customApproveText }: { customApproveText?: string }) => {
+  const t = useTranslate(dictionary)
+  const chat = useCurrentChat()
+
+  const onAnswer = (response: string) => {
+    chat.pushMessage(ChatEntry.createUserEntry(response))
+  }
+
+  return <>
+    <Row gap="8px">
+      <Button colorScheme="light" onClick={() => onAnswer(t.cancel)}>
+        <Row gap="8px">
+          <Icon icon="Stop" />
+          {t.cancel}
+        </Row>
+      </Button>
+
+      <Button colorScheme="inverse" onClick={() => onAnswer(customApproveText ?? t.approve)}>
+        <Row gap="8px">
+          <Icon group="fill" icon="Play" />
+          {customApproveText ?? t.approve}
+        </Row>
+      </Button>
+    </Row>
+  </>
+}
+
+export const ToolStepsList = ({ steps, messageId }: { steps: ToolChatStep, messageId: number }) => {
+  const t = useTranslate(dictionary)
+  const toolsAwaiting = steps
+  const chat = useCurrentChat()
+  const messages = useCurrentChatMessages()
+  const inputParsed = `\`\`\`json
+    ${JSON.stringify(toolsAwaiting?.input, null, 2)}
+  \`\`\``
+
+  const tool = useMemo(() => {
+    if (!toolsAwaiting) return undefined
+    return toolsAwaiting.attempts?.[0].tools?.[0]
+  }, [toolsAwaiting])
+
+  useMemo(() => {
+    if (!toolsAwaiting) return undefined
+    const executionId = toolsAwaiting.attempts?.[0].tools?.[0].executionId
+    if (!executionId) return
+
+    updateToolStep(messages, executionId, steps.status)
+    
+  }, [messages, toolsAwaiting, steps.status])
+
+  return <>
+    {toolsAwaiting && tool ? <AnimatedHeight>
+      <div className="steps">
+        <Badge colorPalette="yellow" appearance="square">
+          <Icon icon="StopWatch" />
+          <Text>{tool.name} {t.keepWorking}</Text>
+        </Badge>
+        <Card mt="16px" gap="8px" bgLevel={500}>
+          <Row>
+            <ImageWithFallback src={tool.image} width="32px" fallback={<IconBox appearance="circle" icon="StackSpot" />} />
+            <Text>{tool.name}</Text>
+          </Row>
+
+          <Text>
+            {toolsAwaiting.user_question}
+          </Text>
+
+          <Accordion header={expand => <Row gap="8px" mb="4px">
+            <Card p="4px" bgLevel={400}>{expand}</Card>
+            <Text > {t.viewDetails} </Text>
+          </Row>}>
+            <Markdown onCopyCode={(code) => onCopyCode(code, `${messageId}`, chat)}>
+              {inputParsed}
+            </Markdown>
+          </Accordion>
+
+          {toolsAwaiting.status === 'awaiting_approval' && <AwaitingApproval customApproveText={t.approveTool} />}
+
+        </Card>
+      </div>
+    </AnimatedHeight> : null}
+  </>
+}
+
 export const StepsList = ({ steps, chatId, messageId }: Props) => {
   const t = useTranslate(dictionary)
-  const [isExpanded, setExpanded] = useState(false)
   const actualSteps = steps.filter(s => s.type === 'step')
+  const planning = steps.filter(s => s.type === 'planning')
+  
+  useMemo(() => {
+    actualSteps.map((item) => {
+      const executionId = item.attempts[0]?.tools?.[0].executionId 
+      if (executionId) {
+        planningToolDictionaryHelper.setMessageIdPlanningStepToolExecutionId(`${messageId}`, executionId)
+      }
+    })
+  }, [actualSteps, messageId])
+
+  const toolsStep = steps.filter(s => s.type === 'tool')
+  
+  useMemo(() => {
+    const executionId = toolsStep?.[0]?.attempts?.[0]?.tools?.[0]?.executionId
+    if (executionId) {
+      planningToolDictionaryHelper.setMessageIdToolStepToolExecutionId(`${messageId}`, executionId)
+    }
+  }, [toolsStep, messageId])
+
+  const planningGoal = steps.filter(s => s.type === 'planning')?.[0]?.goal
+  const isLastStepDone = actualSteps[actualSteps.length - 1]?.status !== 'running' &&
+    actualSteps[actualSteps.length - 1]?.status !== 'pending'
+  const totalTools = useMemo(() => actualSteps?.reduce((sum, step) => {
+    const firstAttempt = step.attempts && step.attempts[0]
+    const toolsCount = firstAttempt.tools?.length ?? 0
+    return sum + toolsCount
+  }, 0), [steps])
+
   let currentStepIndex = findLastIndex(actualSteps, s => s.status === 'running' || s.status === 'success')
   if (currentStepIndex === -1) currentStepIndex = 0
   const widget = useWidget()
@@ -55,30 +264,46 @@ export const StepsList = ({ steps, chatId, messageId }: Props) => {
     widget.set('currentMessageInPanel', { chatId, messageId })
     widget.set('panel', 'steps')
   }
-  
-  return (
-    <AnimatedHeight>
+
+  return (<>
+    {actualSteps.length > 0 ? <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)}
-            />
-          }
+        <Row gap="14px" mb="8px" ml="5px">
+          <Icon icon="Target" size="sm" color="light.600" />
+          <Text>{t.executionPlan}</Text>
+        </Row>
+        <ul className="steps-list">
+          <Step
+            step={actualSteps[currentStepIndex]}
+            index={currentStepIndex + 1}
+          />
+          
+          <Step
+            step={{ status: 'target', input: planningGoal, attempts: [] }}
+            index={currentStepIndex + 1}
+            total={actualSteps.length}
+            totalTools={totalTools}
+            isAllDone={isLastStepDone}
+          />
         </ul>
-        {isExpanded && <div className="step-actions">
-          <Button colorScheme="light" size="sm" onClick={() => setExpanded(false)}>{t.hideSteps}</Button>
+
+        <Column gap="8px" mt="8px">
+          <Divider colorScheme="light" />
+          <Text color="light.700">{planning?.[0]?.user_question}</Text>
+          {planning?.[0]?.status === 'awaiting_approval' && <AwaitingApproval />}
+        </Column>
+
+        {isLastStepDone && <div className="step-actions">
           <Button colorScheme="light" size="sm" className="icon-button details" onClick={openToolsPanel}>
             <Icon group="fill" icon="Play" size="xs" />
             {t.detailed}
           </Button>
         </div>}
       </div>
-    </AnimatedHeight>
+    </AnimatedHeight> : null}
+
+    {toolsStep?.length > 0 && <ToolStepsList steps={toolsStep[0]} messageId={messageId} />}
+  </>
   )
 }
 
@@ -87,10 +312,38 @@ const dictionary = {
     step: 'Step',
     hideSteps: 'Hide steps',
     detailed: 'View detailed mode',
+    generatingPlan: 'Generating execution plan...',
+    analyzingRequirements: 'Analyzing task requirements',
+    executionPlan: 'Execution Plan',
+    planGoal: 'Plan Goal',
+    toolsToBeExecuted: 'Tools to be executed',
+    totalSteps: 'Total Steps',
+    totalTools: 'Total Tools',
+    stepGoal: 'Step Goal',
+    cancel: 'Cancel execution',
+    approve: 'Approve & Execute Plan',
+    keepWorking: 'will keep working after your answer',
+    viewDetails: 'View details',
+    approveTool: 'Approve execution',
+    pendingReview: 'Pending review',
   },
   pt: {
     step: 'Passo',
     hideSteps: 'Esconder passos',
     detailed: 'Ver modo detalhado',
+    generatingPlan: 'Gerando plano de execução...',
+    analyzingRequirements: 'Analisando os requisitos da task',
+    executionPlan: 'Plano de Execução',
+    planGoal: 'Finalidade do Plano',
+    toolsToBeExecuted: 'Tools a serem executadas',
+    totalSteps: 'Total de Passos',
+    totalTools: 'Total de Tools',
+    stepGoal: 'Objetivo do passo',
+    cancel: 'Cancelar execução',
+    approve: 'Aprovar & Executar plano',
+    keepWorking: 'continuará trabalhando após a sua resposta',
+    viewDetails: 'Ver detalhes',
+    approveTool: 'Aprovar execução',
+    pendingReview: 'Revisão pendente',
   },
 } satisfies Dictionary

package/src/views/Chat/styled.ts

@@ -243,20 +243,27 @@ export const ChatList: IStyledComponentBase<
   }
 
   .steps {
-    ul {
+    .steps-list {
       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;
+    .tools-list {
+      list-style: disc;
+      margin: 0;
+      padding-left: 24px;
+      display: block;
+      ::marker {
+        color: ${theme.color.light.contrastText};
+      }
+    }
 
+    ul {
+      li {
         &[role="button"] {
           cursor: pointer;
         }

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

@@ -37,7 +37,7 @@ export const NodeStep = ({ data: { step, index, nextStatus, onClick } }: Props)
         {!!step.attempts[0].tools?.length && <StackedBadge
           label={t.tools}
           images={step.attempts[0].tools?.slice(0, 3).map(
-            tool => ({ key: tool.id, name: tool.name, url: tool.image, icon: <Icon icon="Cog" /> }),
+            tool => ({ key: tool.id, name: tool.name ?? '', url: tool.image, icon: <Icon icon="Cog" /> }),
           )}
         />}
       </div>}

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

@@ -8,6 +8,7 @@ const nodesSizes = {
   step: stepNodeSize,
   planning: planningNodeSize,
   answer: answerNodeSize,
+  tool: stepNodeSize,
 }
 
 export function useLayoutedElements(nodes: NodeWithoutLayout[], edges: Edge[]) {

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

@@ -9,6 +9,6 @@ export interface NodeData {
 
 export interface NodeWithoutLayout {
   id: string,
-  type: 'step' | 'planning' | 'answer',
+  type: 'step' | 'planning' | 'answer' | 'tool',
   data?: NodeData,
 }

package/src/views/Steps/StepModal.tsx

@@ -127,7 +127,7 @@ export const StepModal = ({ message, stepId, onClose }: Props) => {
 
   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} />
+      <ToolBadge name={tool.name ?? ''} duration={tool.duration} image={tool.image} description={tool.description} />
       {tool.input && <>
         <Text appearance="microtext1" color="light.700">{t.input}:</Text>
         <Code language="json" className="tool-input" showLineNumbers={false} showActionBar>{tool.input}</Code>
@@ -191,7 +191,7 @@ export const StepModal = ({ message, stepId, onClose }: Props) => {
               {!!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} />
+                    <ToolBadge name={tool.name ?? ''} image={tool.image} />
                   </li>
                 ))}
               </ul>}