@stack-spot/ai-chat-widget 2.3.0-alpha.1 → 2.3.0

package/src/state/ChatState.ts

@@ -33,6 +33,10 @@ export interface ChatPropertiesWithOptionalFeatures {
    * Whether or not the chat is in a loading state.
    */
   isLoading?: boolean,
+  /**
+   * Whether or not the chat is planning.
+   */
+  isPlaning?: boolean,
   /**
    * The value of the next message. This is the value of the text typed in the textarea below the chat.
    */

package/src/utils/check-is-trial.ts

@@ -1,9 +1,6 @@
 import { NetworkClient } from '@stack-spot/portal-network'
 
 export const checkIsTrial = () => {
-  const hasSession = NetworkClient.sessionManager?.hasSession()
-  if (hasSession){
-    const trialInfo =  NetworkClient.sessionManager?.getSession()?.getTokenData()?.trial_account_status
-    return !!trialInfo
-  } return false
+  const trialInfo = NetworkClient.sessionManager?.getSession()?.getTokenData()?.trial_account_status
+  return !!trialInfo
 }

package/src/utils/planning-tool.ts

@@ -0,0 +1,41 @@
+class PlanningToolDictionaryHelper {
+  static instance: PlanningToolDictionaryHelper | undefined
+  private toolExecutionIdPlanningStep: Record<string, string> = {}
+  private toolExecutionIdToolStep: Record<string, string> = {}
+  private stepId: Record<string, number> = {}
+
+  private constructor() {
+    PlanningToolDictionaryHelper.instance = this
+  }
+
+  static create() {
+    return PlanningToolDictionaryHelper.instance ?? new PlanningToolDictionaryHelper()
+  }
+
+  setMessageIdPlanningStepToolExecutionId(messageId: string, toolExecutionId: string){
+    this.toolExecutionIdPlanningStep[toolExecutionId] = messageId
+  }
+
+  setMessageIdToolStepToolExecutionId(messageId: string, toolExecutionId: string){
+    this.toolExecutionIdToolStep[toolExecutionId] = messageId
+  }
+  
+  setMessageIdForStepId(messageId: number, stepId: string){
+    this.stepId[stepId] = messageId
+  }
+
+  getMessageIdFromStepId(stepId: string){
+    return this.stepId[stepId]
+  }
+
+  getMessageIdPlanningStepFromToolExecutionId(toolExecutionId: string){
+    return this.toolExecutionIdPlanningStep[toolExecutionId]
+  }
+
+  getMessageIdToolStepFromToolExecutionId(toolExecutionId: string){
+    return this.toolExecutionIdToolStep[toolExecutionId]
+  }
+}
+
+export const planningToolDictionaryHelper = PlanningToolDictionaryHelper.create()
+

package/src/utils/update-tool-step.tsx

@@ -0,0 +1,27 @@
+import { ChatEntry, TextChatEntry } from '../state/ChatEntry'
+import { planningToolDictionaryHelper } from './planning-tool'
+
+export const updateToolStep = (messages: ChatEntry[], executionId: string, 
+  newStatus: 'pending' | 'running' | 'success' | 'error' | 'awaiting_approval') => {
+  
+  // if last message is a user message, no update in tool status is needed
+  if (messages[messages.length-1].getValue().agentType === 'user') return
+  
+  const messageId = planningToolDictionaryHelper.getMessageIdPlanningStepFromToolExecutionId(executionId)
+  const message = messages.find((message) => `${message.id}` === messageId)
+  let update = false
+  const messageValue = message?.getValue()
+  messageValue?.steps?.map((step) => {
+    if (step.type === 'step') {
+      const tool = step.attempts?.[0].tools?.[0]
+      if (tool?.executionId === executionId && step.status !== newStatus) {
+        step.status = newStatus
+        update = true
+      }
+    }
+  })
+  
+  if (update) {
+    message?.setValue({ ...messageValue as TextChatEntry })
+  }
+}

package/src/views/Agents/AgentsTab.tsx

@@ -7,7 +7,7 @@ import { useMemo, useState } from 'react'
 import { NavigationComponent } from '../../components/ComponentNavigator'
 import { DescribedRadioGroup } from '../../components/form/DescribedRadioGroup'
 import { WorkspaceTabNavigator } from '../../components/WorkspaceTabNavigator'
-import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
+import { useCurrentChat } from '../../context/hooks'
 import { useRightPanel } from '../../right-panel/hooks'
 import { ChatProperties } from '../../state/ChatState'
 import { AgentDescription } from './AgentDescription'
@@ -28,11 +28,10 @@ export const AgentsTab = ({ visibility, workspaceId, agent, showSubmitButton = t
   const { useFavorites, onAddFavorite, onRemoveFavorite } = useAgentFavorites()
   const [submitEnabled, setSubmitEnabled] = useState(false)
   const listFavorites = useFavorites()
-  const isAgentEnabled = useCurrentChatState('features').agent
-  const agentDefault = agentToolsClient.agentDefault.useQuery({ enabled: isAgentEnabled })
+  const agentDefault = agentToolsClient.agentDefault.useQuery()
   const agents = workspaceId
     ? workspaceAiClient.getAgentFromWorkspaceAi.useQuery({ workspaceId }) as AgentResponseWithBuiltIn[]
-    : agentToolsClient.agents.useQuery({ visibility }, { enabled: isAgentEnabled })
+    : agentToolsClient.agents.useQuery({ visibility })
 
   const initialValue = useMemo<AgentResponseWithBuiltIn | undefined>(
     () => {

package/src/views/Agents/useAgentFavorites.ts

@@ -1,10 +1,8 @@
 /* eslint-disable filenames/match-regex */
 import { agentToolsClient } from '@stack-spot/portal-network'
-import { useCurrentChatState } from '../../context/hooks'
 
 export function useAgentFavorites() {
-  const isAgentEnabled = useCurrentChatState('features').agent
-  const useFavorites = () => agentToolsClient.agents.useQuery({ visibility: 'favorite' }, { enabled: isAgentEnabled })
+  const useFavorites = () => agentToolsClient.agents.useQuery({ visibility: 'favorite' })
   const [addFavorite, pendingAddFav] = agentToolsClient.addFavorite.useMutation()
   const [removeFavorite, pendingRemoveFav] = agentToolsClient.removeFavorite.useMutation()
 

package/src/views/Chat/ChatMessage.tsx

@@ -9,7 +9,7 @@ import { PhoneInput } from 'react-international-phone'
 import 'react-international-phone/style.css'
 import { FileDescription } from '../../components/FileDescription'
 import { Markdown } from '../../components/Markdown'
-import { useChatEntry, useCurrentChat, useWidget } from '../../context/hooks'
+import { useChatEntry, useChatMessages, useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
 import { useMidnightUpdateView } from '../../hooks/midnight-update-view'
 import { ChatEntry, SerializableAction, TextChatEntry } from '../../state/ChatEntry'
 import { useDateFormatter } from '../../utils/date'
@@ -17,7 +17,7 @@ import { toolById } from '../../utils/tools'
 import { AgentInfo } from './AgentInfo'
 import { useChatScrollToBottomEffect } from './chat-scroll'
 import { onCopyAll, onCopyCode, onLikeOrDislike } from './events'
-import { StepsList } from './StepsList'
+import { StepsList, StepsPlaceholder, ViewToolsDetails } from './StepsList'
 
 export interface CustomRenderResult {
   /**
@@ -218,7 +218,21 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
     { searchAgentsRequest: { ids: entry.tools || [''] } }, { enabled: !!entry.tools })
   const [copied, setCopied] = useState(false)
   const [showUserButtonCopy, setShowUserButtonCopy] = useState(false)
-
+  const isPlanning = useCurrentChatState('isPlaning') ?? false
+  
+  // when we have a steps but we are not showing any content of the step
+  // (because it is a tool and the user has already answered the question)
+  // we do not want to show an avatar with empty content, so we hide the entire message
+  const toolsStep = entry.steps?.find(s => s.type === 'tool')
+  const messages = useChatMessages(chat.id)
+  const userHasAlreadyAnswered = useMemo(() => {
+    const messageIndex = messages.findIndex((messageItem) => messageItem.id === message.id)
+    if (messages.length-1 === messageIndex) return false
+    const nextMessage = messages[messageIndex+1].getValue()
+    return nextMessage.agentType === 'user'
+  }, [messages, messages.length])
+  const isMessageHidden = toolsStep && userHasAlreadyAnswered
+  
   useChatScrollToBottomEffect(ref, [entry])
   useMidnightUpdateView()
 
@@ -343,7 +357,8 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
     widget.set('panel', 'resources')
   }
 
-  return (entry.content || entry.error || !!entry.steps?.length || entry.upload?.length) && (
+  return (entry.content || entry.error || !!entry.steps?.length  ||
+    entry.upload?.length) && (!isMessageHidden || !toolsStep || isPlanning) && (
     <li key={entry.messageId} className={entry.agentType} ref={ref}>
       <div className="chat-message-container"
         onMouseEnter={entry.agentType === 'user' ? () => setShowUserButtonCopy(true) : undefined}
@@ -356,11 +371,15 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
               {!!entry.badges?.length && <div className="badges">
                 {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} 
+                userHasAlreadyAnswered={userHasAlreadyAnswered} />}
+
               {renderContent()}
             
-              {!!entry.steps?.length && <StepsList steps={entry.steps} chatId={chat.id} messageId={message.id} />}
             </div>
           )}
+          {isPlanning && entry.agentType === 'bot' && isLast && <StepsPlaceholder /> }
           
           {entry.error && <Alert type="error">{entry.error}</Alert>}
         </div>
@@ -416,6 +435,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
                 </ImageBox>
               )})}
           </Button>
+          <ViewToolsDetails chatId={chat.id} />
         </div>}
     
         {shouldShowFooter && <div className="message-footer">

package/src/views/Chat/StepsList.tsx

@@ -1,96 +1,389 @@
-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 { findLast, findLastIndex } from 'lodash'
+import React, { useEffect, useMemo } from 'react'
+import styled from 'styled-components'
+import { Markdown } from '../../components/Markdown'
+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'
+import { onCopyCode } from './events'
 
 interface Props {
   steps: ChatStep[],
   messageId: number,
   chatId: string,
+  userHasAlreadyAnswered?: boolean,
+}
+
+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)
+  const hasTools = step.attempts?.[0]?.tools && step.attempts?.[0]?.tools?.length > 0
+
   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="80%">
+          <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 ?? 0}
+                  </Row>
+                </Row>
+                : <>
+                  <Row pb="8px">
+                    <Icon icon="Target" size="sm" color="light.700" />
+                    <Text color="light.700" tag="span" style={{ margin: '0 4px' }}>{t.stepGoal}:</Text>
+                    <Text tag="span">
+                      {step.input}
+                    </Text>
+                  </Row>
+                  {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.noToolToBeUsed}</Text>
+                  </Row>
+                  }
+                </>
+              }
+            </Column>
+          </Accordion>
+        </StyledCard>
+      </Row>
     </li>
   )
 }
 
-export const StepsList = ({ steps, chatId, messageId }: Props) => {
+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, chatId }: { chatId: string, customApproveText?: string }) => {
+  const t = useTranslate(dictionary)
+  const chat = useChat(chatId)
+
+  const onAnswer = (response: string) => {
+    chat.pushMessage(ChatEntry.createUserEntry('', false, undefined, undefined, 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 = ({ toolStep, messageId, chatId }: { toolStep: ToolChatStep, messageId: number, chatId: string }) => {
+  const t = useTranslate(dictionary)
+  const chat = useCurrentChat()
+  const messages = useCurrentChatMessages()
+  const inputParsed = `\`\`\`json
+    ${JSON.stringify(toolStep?.input, null, 2)}
+  \`\`\``
+
+  const tool = useMemo(() => {
+    if (!toolStep) return undefined
+    return toolStep.attempts?.[0].tools?.[0]
+  }, [toolStep])
+
+  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 <>
+    {toolStep && 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>
+            {toolStep.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>
+
+          <AwaitingApproval customApproveText={t.approveTool} chatId={chatId} />
+        </Card>
+      </div>
+    </AnimatedHeight> : null}
+  </>
+}
+
+export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }: Props) => {
   const t = useTranslate(dictionary)
-  const [isExpanded, setExpanded] = useState(false)
-  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')
+
+  useEffect(() => {
+    actualSteps.map((item) => {
+      const executionId = item.attempts[0]?.tools?.[0].executionId
+      if (executionId) {
+        planningToolDictionaryHelper.setMessageIdPlanningStepToolExecutionId(`${messageId}`, executionId)
+      }
+    })
+  }, [actualSteps, messageId])
+
+  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 = 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()
 
-  function openToolsPanel() {
-    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">
+          {actualSteps.map((s, i) => <Step step={s} key={i} index={i + 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>
-          <Button colorScheme="light" size="sm" className="icon-button details" onClick={openToolsPanel}>
-            <Icon group="fill" icon="Play" size="xs" />
-            {t.detailed}
-          </Button>
-        </div>}
+
+        <Column gap="8px" mt="8px">
+          <Divider colorScheme="light" />
+          <Text color="light.700">{planning?.[0]?.user_question}</Text>
+          {!userHasAlreadyAnswered && planning?.[0]?.status === 'awaiting_approval' &&  <AwaitingApproval chatId={chatId} />}
+        </Column>
+
       </div>
-    </AnimatedHeight>
+    </AnimatedHeight> : null}
+
+    {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',
     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',
+    noToolToBeUsed: 'No tool will be needed',
   },
   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',
+    noToolToBeUsed: 'Nenhuma tool será necessária',
   },
 } satisfies Dictionary