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

package/src/chat-interceptors/quick-commands.ts

@@ -67,6 +67,10 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
     chat.set('isLoading', true)
     CustomInputs.deleteCustomInputsFromChat(chat)
     ctx.customInputs = { ...ctx.customInputs, ...inputsValues }
+    ctx.context.upload_ids = chat.getMessages()
+      .flatMap(message =>
+        (message.getValue().upload || []).map(upload => upload.id),
+      )
   }
 
   /**
@@ -101,9 +105,9 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
         return runStepsRecursively(stepIndex, progress, ctx, iteration)
       }
       const nextStepIndex = steps?.findIndex((step) => step.slug === next_step_slug)
-      
+
       if (isNil(nextStepIndex) || nextStepIndex === -1) return
-      
+
       return runStepsRecursively(nextStepIndex, progress, ctx, iteration)
     }
     catch (error: any) {
@@ -173,8 +177,8 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
     }
 
     const stream = aiClient.streamLlmStepOfQuickCommand(
-      slug, 
-      step.slug, 
+      slug,
+      step.slug,
       {
         input_data: code,
         context: stepContext,

package/src/chat-interceptors/send-message.ts

@@ -1,4 +1,4 @@
-import { AgentInfo, aiClient, ChatResponseWithSteps, StackspotAPIError, StreamCanceledError } from '@stack-spot/portal-network'
+import { aiClient, ChatResponseWithSteps, StackspotAPIError, StreamCanceledError } from '@stack-spot/portal-network'
 import { ChatResponse3 } from '@stack-spot/portal-network/api/ai'
 import { ChatEntry, KnowledgeSource, TextChatEntry } from '../state/ChatEntry'
 import { ChatState } from '../state/ChatState'
@@ -6,7 +6,6 @@ import { LabeledWithImage } from '../state/types'
 import { buildConversationContext } from '../utils/chat'
 import { treatHTMLInErrorMessage } from '../utils/error'
 import { genericSourcesToKnowledgeSources } from '../utils/knowledge-source'
-import { planningToolDictionaryHelper } from '../utils/planning-tool'
 
 /**
  * Transforms a chat response from the backend into a chat entry that can be added to the chat.
@@ -23,7 +22,7 @@ function createEntryValueFromChatResponse(
   agent: LabeledWithImage | undefined,
   includeDate = false,
 ): TextChatEntry {
-  const entry= {
+  return {
     agentType: 'bot',
     type: 'md',
     content: response.answer ?? '',
@@ -34,7 +33,6 @@ function createEntryValueFromChatResponse(
     steps: response.steps,
     tools: response.tools,
   }
-  return entry as TextChatEntry
 }
 
 function buildPrompt(content: string, data?: any) {
@@ -63,18 +61,6 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
     chat.set('label', content || entry.getValue().upload?.[0]?.name || 'Chat')
     chat.untitled = false
   }
-
-  //Verify if the last planning in the messages has status awaiting_approval
-  const messages = chat.getMessages()
-  const lastPlanningAwaiting = messages.slice().reverse().find(item => {
-    const steps = item.getValue().steps
-    if (steps) {
-      const hasPlanning = steps.find((step) => step.type === 'planning')
-      return hasPlanning ? hasPlanning.status === 'awaiting_approval' : false
-    }
-    return false
-  })
-
   const stream = aiClient.sendChatMessage({ context, user_prompt: buildPrompt(content, data) })
   signal.addEventListener('abort', () => stream.cancel())
   const botEntry = ChatEntry.createStreamedBotEntry()
@@ -83,109 +69,12 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
     chat.pushMessage(botEntry)
   }
   let knowledgeSources: KnowledgeSource[] | undefined
-
-  const updatePlanningMessage = () => {
-    if (lastPlanningAwaiting) {
-      const originalItem = messages.find((message) => message.id === lastPlanningAwaiting.id)
-      const originalItemValue = originalItem?.getValue()
-      originalItemValue?.steps?.map((step) => {
-        if (step.type === 'planning' && step.status === 'awaiting_approval') {
-          step.status = 'success'
-        }
-      })
-      originalItem?.setValue({ ...originalItemValue as TextChatEntry })
-    }
-  }
-
-  const updateToolStatus = (agentInfo: AgentInfo) => {
-    const executionId = agentInfo.id
-    if (executionId) {
-      //Update message with type step which contains the planning steps
-      const messageId = planningToolDictionaryHelper.getMessageIdPlanningStepFromToolExecutionId(executionId)
-      const originalItem = messages.find((message) => `${message.id}` === messageId)
-      const originalItemValue = originalItem?.getValue()
-      let update = false
-      const status = agentInfo.action === 'start' ? 'running' : 'success'
-      const step = originalItemValue?.steps?.find(step => step.type === 'step' && step.attempts?.[0].tools?.[0].executionId === executionId)
-      if (step && step.status !== status) {
-        step.status = status
-        update = true
-      }
-      if (update) {
-        originalItem?.setValue({ ...originalItemValue as TextChatEntry })
-      }
-
-      //Updates message with type tool which contains the actually tool steps
-      //We only want to show tools banner when they are awaiting_approval, by removing the step
-      // we avoid the entire bot message to be visible
-      const toolMessageId = planningToolDictionaryHelper.getMessageIdToolStepFromToolExecutionId(executionId)
-      const toolOriginalItem = messages.find((message) => `${message.id}` === toolMessageId)
-      const toolOriginalItemValue = toolOriginalItem?.getValue()
-      const toolStep = toolOriginalItemValue?.steps?.find(step => 
-        step.type === 'tool' && step.attempts?.[0].tools?.[0].executionId === executionId)
-      update = false
-      if (toolOriginalItemValue && toolStep && toolStep.status !== status) {
-        toolOriginalItemValue.steps = undefined
-        update = true
-      }
-      if (update) {
-        toolOriginalItem?.setValue({ ...toolOriginalItemValue as TextChatEntry })
-      }
-    }
-  }
-
   stream.onChange(value => {
-    if (value.agent_info?.type === 'planning') {
-      if (value.agent_info.action === 'start') {
-        chat.set('isPlaning', true)
-      } else {
-        chat.set('isPlaning', false)
-      }
-    }
-
     if (value.sources?.length !== knowledgeSources?.length && chat.get('features').showSourcesInResponse) {
       knowledgeSources = genericSourcesToKnowledgeSources(value.sources)
     }
-
-    // When there is a planning with status awaiting_approval and we receive a new one
-    // we do not not want to add it again.
-    if (lastPlanningAwaiting && value.steps) {
-      const hasPlanningAwaiting = value.steps.find((item) => item.type === 'planning' && item.status === 'awaiting_approval')
-      value.steps = value.steps?.filter(step => {
-        if (step.type === 'planning') {
-          updatePlanningMessage()
-        }
-
-        return hasPlanningAwaiting ? true : (step.type !== 'planning' && step.type !== 'step' &&
-          (step.type !== 'answer' || (step.type === 'answer' && step.status === 'pending')))
-      })
-    }
-
-    if (value.agent_info?.type === 'tool' && value.agent_info?.action !== 'awaiting_approval') {
-      updateToolStatus(value.agent_info)
-    }
-
-    if (value.steps) {
-      const tool = value.steps.find((item) => item.type === 'tool')
-      if (tool && tool.status === 'running') {
-        const messageId = planningToolDictionaryHelper.getMessageIdPlanningStepFromToolExecutionId(tool.id)
-        const originalItem = messages.find((message) => `${message.id}` === messageId)
-        const originalItemValue = originalItem?.getValue()
-        let update = false
-        const step = originalItemValue?.steps?.find(step => step.type === 'step')
-        if (step && step.attempts?.[0].tools?.[0].executionId === tool.id) {
-          step.attempts = JSON.parse(JSON.stringify(tool.attempts))
-          update = true
-        }
-        if (update) {
-          originalItem?.setValue({ ...originalItemValue as TextChatEntry })
-        }
-      }
-    }
-
     botEntry.setValue(createEntryValueFromChatResponse(value, knowledgeSources, chat.get('agent')))
   })
-
   let finalValue: Partial<ChatResponse3> | undefined
   try {
     finalValue = await stream.getValue()

package/src/state/ChatEntry.ts

@@ -205,14 +205,13 @@ export class ChatEntry {
    * @param hiddenContent the message's content.
    * @returns a new ChatEntry.
    */
-  static createUserEntry(content: string, isMd = false, fieldName?: string, hiddenContent?: string[], data?: any) {
+  static createUserEntry(content: string, isMd = false, fieldName?: string, hiddenContent?: string[]) {
     return new ChatEntry({
       agentType: 'user',
       type: isMd ? 'md' : 'text',
       content,
       name: fieldName,
       hiddenContent, 
-      data,
       updated: new Date().toISOString(),
     })
   }

package/src/state/ChatState.ts

@@ -33,10 +33,6 @@ 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/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, useCurrentChatState, useWidget } from '../../context/hooks'
+import { useChatEntry, useCurrentChat, 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, StepsPlaceholder } from './StepsList'
+import { StepsList } from './StepsList'
 
 export interface CustomRenderResult {
   /**
@@ -218,7 +218,6 @@ 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
 
   useChatScrollToBottomEffect(ref, [entry])
   useMidnightUpdateView()
@@ -344,7 +343,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
     widget.set('panel', 'resources')
   }
 
-  return (entry.content || entry.error || !!entry.steps?.length || entry.upload?.length || isPlanning) && (
+  return (entry.content || entry.error || !!entry.steps?.length || entry.upload?.length) && (
     <li key={entry.messageId} className={entry.agentType} ref={ref}>
       <div className="chat-message-container"
         onMouseEnter={entry.agentType === 'user' ? () => setShowUserButtonCopy(true) : undefined}
@@ -357,14 +356,11 @@ 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} />}
-
               {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>

package/src/views/Chat/StepsList.tsx

@@ -1,17 +1,12 @@
-import { Accordion, Badge, Button, Card, Column, Divider, Icon, IconBox, ImageWithFallback, ProgressCircular, Row, Skeleton, Text } from '@stack-spot/citric-react'
+import { Icon } from '@stack-spot/citric-icons'
+import { Button, ProgressCircular, Text } from '@stack-spot/citric-react'
 import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
-import { ChatStep, StepChatStep, ToolChatStep } from '@stack-spot/portal-network'
+import { ChatStep, StepChatStep } 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 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'
+import { useState } from 'react'
+import { useWidget } from '../../context/hooks'
 
 interface Props {
   steps: ChatStep[],
@@ -19,241 +14,39 @@ interface Props {
   chatId: string,
 }
 
-interface StepChatStepWithTarget extends Omit<StepChatStep, 'status' | 'id' | 'type'> {
-  status: 'pending' | 'running' | 'success' | 'error' | 'target' | 'awaiting_approval',
-}
-
 interface StepProps {
-  step: StepChatStepWithTarget,
+  step: StepChatStep,
   index: number,
-  total?: number,
-  totalTools?: number,
-  isAllDone?: boolean,
+  total: number,
   onClick?: () => void,
 }
 
-function getStatusIcon(status: StepChatStepWithTarget['status'] | 'target', isDone?: boolean) {
+function getStatusIcon(status: ChatStep['status']) {
   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 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 'pending': return <Icon icon="Spaces" {...iconProps} />
     case 'running': return <ProgressCircular className="loading" colorScheme="inverse" size="xs" />
   }
 }
 
-const StepAccordionHeader = ({ step, index, expand }: Pick<StepProps, 'step' | 'index'> & { expand: React.ReactElement }) => {
+const Step = ({ step, index, total, onClick }: StepProps) => {
   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'}>
-      <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>
+      <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>
     </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('', 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 }: { toolStep: ToolChatStep, messageId: number }) => {
-  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])
-
-  useMemo(() => {
-    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} />
-        </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.find(s => s.type === 'tool')
-  
-  useMemo(() => {
-    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 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()
@@ -262,46 +55,30 @@ export const StepsList = ({ steps, chatId, messageId }: Props) => {
     widget.set('currentMessageInPanel', { chatId, messageId })
     widget.set('panel', 'steps')
   }
-
-  return (<>
-    {actualSteps.length > 0 ? <AnimatedHeight>
+  
+  return (
+    <AnimatedHeight>
       <div className="steps">
-        <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
+            ? 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)}
+            />
+          }
         </ul>
-
-        <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">
+        {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>}
       </div>
-    </AnimatedHeight> : null}
-
-    {toolsStep && toolsStep.status === 'awaiting_approval' && <ToolStepsList toolStep={toolsStep} messageId={messageId} />}
-  </>
+    </AnimatedHeight>
   )
 }
 
@@ -310,38 +87,10 @@ 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