@stack-spot/ai-chat-widget 2.1.0-beta.1 → 2.1.1-beta.1

package/src/views/Chat/StepsList.tsx

@@ -3,11 +3,11 @@ import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
 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 React, { useMemo } from 'react'
+import { findLast, findLastIndex } from 'lodash'
+import React, { useEffect, useMemo } from 'react'
 import styled from 'styled-components'
 import { Markdown } from '../../components/Markdown'
-import { useCurrentChat, useCurrentChatMessages, useWidget } from '../../context/hooks'
+import { useChat, useChatMessages, useCurrentChat, useCurrentChatMessages, useWidget } from '../../context/hooks'
 import { ChatEntry } from '../../state/ChatEntry'
 import { planningToolDictionaryHelper } from '../../utils/planning-tool'
 import { updateToolStep } from '../../utils/update-tool-step'
@@ -17,6 +17,7 @@ interface Props {
   steps: ChatStep[],
   messageId: number,
   chatId: string,
+  userHasAlreadyAnswered?: boolean,
 }
 
 interface StepChatStepWithTarget extends Omit<StepChatStep, 'status' | 'id' | 'type'> {
@@ -52,14 +53,14 @@ const StepAccordionHeader = ({ step, index, expand }: Pick<StepProps, 'step' | '
       <Badge colorScheme="inverse" appearance="square">
         {t.step} {index}
       </Badge>}
-    <Text className="step-title" appearance="body2" >
+    <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>}
+    {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>
 }
 
@@ -72,12 +73,13 @@ const StyledCard = styled(Card)`
 const Step = ({ step, index, onClick, total, totalTools, isAllDone }: StepProps) => {
   const t = useTranslate(dictionary)
   const status = getStatusIcon(step.status, isAllDone)
+  const hasTools = step.attempts?.[0]?.tools && step.attempts?.[0]?.tools?.length > 0
 
   return (
     <li tabIndex={onClick ? 0 : undefined} onClick={onClick} role={onClick ? 'button' : 'listitem'}>
       <Row gap="4px" alignItems="center">
         <div className="step-status-icon">{status}</div>
-        <StyledCard p="8px" w="75%">
+        <StyledCard p="8px" w="80%">
           <Accordion header={expand => <StepAccordionHeader step={step} index={index} expand={expand} />}>
             <Column pt="12px">
               {total ?
@@ -90,27 +92,32 @@ const Step = ({ step, index, onClick, total, totalTools, isAllDone }: StepProps)
                   <Row gap="4px">
                     <Icon icon="BorderRadius" size="sm" color="light.700" />
                     <Text color="light.700">{t.totalTools}</Text>
-                    {totalTools}
+                    {totalTools ?? 0}
                   </Row>
                 </Row>
                 : <>
-                  <Row pb="8px" gap="4px">
+                  <Row pb="8px">
                     <Icon icon="Target" size="sm" color="light.700" />
-                    <Text color="light.700">{t.stepGoal}:</Text>
-                    <Text>
+                    <Text color="light.700" tag="span" style={{ margin: '0 4px' }}>{t.stepGoal}:</Text>
+                    <Text tag="span">
                       {step.input}
                     </Text>
                   </Row>
-                  <Row gap="4px">
+                  {hasTools ? <>
+                    <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, index) => (<li key={`${tool.id}-${index}`}>
+                        <Text>{tool.name}: {tool.goal}</Text>
+                      </li>))}
+                    </ul>
+                  </> : <Row gap="4px">
                     <Icon icon="BorderRadius" size="sm" color="light.700" />
-                    <Text color="light.700">{t.toolsToBeExecuted}:</Text>
+                    <Text color="light.700">{t.noToolToBeUsed}</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>
@@ -140,9 +147,9 @@ export const StepsPlaceholder = () => {
   </Card>
 }
 
-const AwaitingApproval = ({ customApproveText }: { customApproveText?: string }) => {
+const AwaitingApproval = ({ customApproveText, chatId }: { chatId: string, customApproveText?: string }) => {
   const t = useTranslate(dictionary)
-  const chat = useCurrentChat()
+  const chat = useChat(chatId)
 
   const onAnswer = (response: string) => {
     chat.pushMessage(ChatEntry.createUserEntry('', false, undefined, undefined, response))
@@ -167,7 +174,7 @@ const AwaitingApproval = ({ customApproveText }: { customApproveText?: string })
   </>
 }
 
-export const ToolStepsList = ({ toolStep, messageId }: { toolStep: ToolChatStep, messageId: number }) => {
+export const ToolStepsList = ({ toolStep, messageId, chatId }: { toolStep: ToolChatStep, messageId: number, chatId: string }) => {
   const t = useTranslate(dictionary)
   const chat = useCurrentChat()
   const messages = useCurrentChatMessages()
@@ -180,13 +187,13 @@ export const ToolStepsList = ({ toolStep, messageId }: { toolStep: ToolChatStep,
     return toolStep.attempts?.[0].tools?.[0]
   }, [toolStep])
 
-  useMemo(() => {
+  useEffect(() => {
     if (!toolStep) return undefined
     const executionId = toolStep.attempts?.[0].tools?.[0].executionId
     if (!executionId) return
 
     updateToolStep(messages, executionId, toolStep.status)
-    
+
   }, [messages, toolStep, toolStep.status])
 
   return <>
@@ -215,37 +222,52 @@ export const ToolStepsList = ({ toolStep, messageId }: { toolStep: ToolChatStep,
             </Markdown>
           </Accordion>
 
-          <AwaitingApproval customApproveText={t.approveTool} />
+          <AwaitingApproval customApproveText={t.approveTool} chatId={chatId} />
         </Card>
       </div>
     </AnimatedHeight> : null}
   </>
 }
 
-export const StepsList = ({ steps, chatId, messageId }: Props) => {
+export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }: Props) => {
   const t = useTranslate(dictionary)
-  const actualSteps = steps.filter(s => s.type === 'step')
+
+  const filteredSteps = steps.filter(s => s.type === 'step')
+  const actualSteps = useMemo(() => filteredSteps.filter((item) => {
+    const messageIdForStep = planningToolDictionaryHelper.getMessageIdFromStepId(item.id)
+    if (!messageIdForStep) {
+      planningToolDictionaryHelper.setMessageIdForStepId(messageId, item.id)
+      return true
+    } else if (messageIdForStep === messageId) {
+      return true
+    }
+    // If a step is from a planning and it is already inserted in the planningToolDictionaryHelper it means the step is already in a 
+    // previous message and we do not want to show it again (for instance, when required a approval in the planning, we will have 
+    // two messages with the same step id one for the planning awaiting and one for the planning end, so we want to show only one) 
+    return false
+  }), [filteredSteps])
+
   const planning = steps.filter(s => s.type === 'planning')
-  
-  useMemo(() => {
+
+  useEffect(() => {
     actualSteps.map((item) => {
-      const executionId = item.attempts[0]?.tools?.[0].executionId 
+      const executionId = item.attempts[0]?.tools?.[0].executionId
       if (executionId) {
         planningToolDictionaryHelper.setMessageIdPlanningStepToolExecutionId(`${messageId}`, executionId)
       }
     })
   }, [actualSteps, messageId])
 
-  const toolsStep = steps.find(s => s.type === 'tool')
-  
-  useMemo(() => {
+  const toolsStep = findLast(steps, s => s.type === 'tool')
+
+  useEffect(() => {
     const executionId = toolsStep?.attempts?.[0]?.tools?.[0]?.executionId
     if (executionId) {
       planningToolDictionaryHelper.setMessageIdToolStepToolExecutionId(`${messageId}`, executionId)
     }
   }, [toolsStep, messageId])
 
-  const planningGoal = steps.filter(s => s.type === 'planning')?.[0]?.goal
+  const planningGoal = planning?.[0]?.goal
   const isLastStepDone = actualSteps[actualSteps.length - 1]?.status !== 'running' &&
     actualSteps[actualSteps.length - 1]?.status !== 'pending'
   const totalTools = useMemo(() => actualSteps?.reduce((sum, step) => {
@@ -256,12 +278,6 @@ export const StepsList = ({ steps, chatId, messageId }: Props) => {
 
   let currentStepIndex = findLastIndex(actualSteps, s => s.status === 'running' || s.status === 'success')
   if (currentStepIndex === -1) currentStepIndex = 0
-  const widget = useWidget()
-
-  function openToolsPanel() {
-    widget.set('currentMessageInPanel', { chatId, messageId })
-    widget.set('panel', 'steps')
-  }
 
   return (<>
     {actualSteps.length > 0 ? <AnimatedHeight>
@@ -270,12 +286,10 @@ export const StepsList = ({ steps, chatId, messageId }: Props) => {
           <Icon icon="Target" size="sm" color="light.600" />
           <Text>{t.executionPlan}</Text>
         </Row>
+
         <ul className="steps-list">
-          <Step
-            step={actualSteps[currentStepIndex]}
-            index={currentStepIndex + 1}
-          />
-          
+          {actualSteps.map((s, i) => <Step step={s} key={i} index={i + 1} />)}
+
           <Step
             step={{ status: 'target', input: planningGoal, attempts: [] }}
             index={currentStepIndex + 1}
@@ -288,23 +302,49 @@ export const StepsList = ({ steps, chatId, messageId }: Props) => {
         <Column gap="8px" mt="8px">
           <Divider colorScheme="light" />
           <Text color="light.700">{planning?.[0]?.user_question}</Text>
-          {planning?.[0]?.status === 'awaiting_approval' && <AwaitingApproval />}
+          {!userHasAlreadyAnswered && planning?.[0]?.status === 'awaiting_approval' &&  <AwaitingApproval chatId={chatId} />}
         </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> : null}
 
-    {toolsStep && toolsStep.status === 'awaiting_approval' && <ToolStepsList toolStep={toolsStep} messageId={messageId} />}
+    {toolsStep && toolsStep.status === 'awaiting_approval' && !userHasAlreadyAnswered && 
+      <ToolStepsList toolStep={toolsStep} messageId={messageId} chatId={chatId} />}
   </>
   )
 }
 
+export const ViewToolsDetails = ({ chatId }: { chatId: string }) => {
+  const t = useTranslate(dictionary)
+  const messages = useChatMessages(chatId)
+  const messageId = useMemo(() => {
+    const messageWithPlanning = findLast(messages, (message) => {
+      const steps = message.getValue().steps
+      const planningStep = steps?.find((step) => step.type === 'planning' && step.status === 'success')
+      return planningStep ? true : false
+    })
+    return messageWithPlanning?.id
+
+  }, [messages])
+  const widget = useWidget()
+
+  function openToolsPanel() {
+    if (messageId) {
+      widget.set('currentMessageInPanel', { chatId, messageId })
+      widget.set('panel', 'steps')
+    }
+  }
+
+  return <>
+    <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>
+  </>
+}
+
 const dictionary = {
   en: {
     step: 'Step',
@@ -324,6 +364,7 @@ const dictionary = {
     viewDetails: 'View details',
     approveTool: 'Approve execution',
     pendingReview: 'Pending review',
+    noToolToBeUsed: 'No tool will be needed',
   },
   pt: {
     step: 'Passo',
@@ -343,5 +384,6 @@ const dictionary = {
     viewDetails: 'Ver detalhes',
     approveTool: 'Aprovar execução',
     pendingReview: 'Revisão pendente',
+    noToolToBeUsed: 'Nenhuma tool será necessária',
   },
 } satisfies Dictionary

package/src/views/Chat/styled.ts

@@ -292,8 +292,10 @@ export const ChatList: IStyledComponentBase<
       }
     }
 
-    .step-actions {
-      margin-top: 8px;
+  }
+
+  .step-actions {
+      margin-top: 16px;
       display: flex;
       gap: 6px;
 
@@ -303,7 +305,6 @@ export const ChatList: IStyledComponentBase<
         align-items: center;
       }
     }
-  }
 
   .markdown img {
     max-width: 70%;