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

package/src/app-metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "3.0.0-beta.1",
-  "date": "Wed Oct 01 2025 15:13:49 GMT+0000 (Coordinated Universal Time)",
+  "version": "3.0.2-beta.1",
+  "date": "Mon Nov 10 2025 19:36:38 GMT+0000 (Coordinated Universal Time)",
   "dependencies": [
     {
       "name": "@stack-spot/app-metadata",
@@ -109,19 +109,19 @@
     },
     {
       "name": "@stack-spot/citric-icons",
-      "version": "0.2.3"
+      "version": "0.2.5"
     },
     {
       "name": "@stack-spot/citric-react",
-      "version": "0.36.0(@stack-spot/citric-icons@0.2.3)(@stack-spot/portal-theme@1.2.1(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-translate@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "version": "0.36.0(@stack-spot/citric-icons@0.2.5)(@stack-spot/portal-theme@1.2.1(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-translate@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
     {
       "name": "@stack-spot/portal-components",
-      "version": "2.26.0(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.13.0(react@18.2.0))(@citric/ui@6.10.2(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.13.0(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-theme@1.2.1(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-translate@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@types/react@18.3.11)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "version": "2.27.3(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.13.0(react@18.2.0))(@citric/ui@6.10.2(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.13.0(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-theme@1.2.1(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-translate@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@types/react@18.3.11)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
     {
       "name": "@stack-spot/portal-network",
-      "version": "0.179.1-beta.1(@stack-spot/auth@6.1.0)(@stack-spot/opa@2.5.0(@stack-spot/auth@6.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@stack-spot/portal-translate@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@tanstack/react-query@5.59.16(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "version": "0.195.1(@stack-spot/auth@6.1.0)(@stack-spot/opa@2.5.0(@stack-spot/auth@6.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@stack-spot/portal-translate@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@tanstack/react-query@5.59.16(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
     {
       "name": "@stack-spot/portal-theme",

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,
@@ -241,9 +245,16 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
     await (currentStep.type === 'FETCH' ? runFetchStep(ctx, currentIndex) : runLLMStep(ctx, currentIndex))
 
     let nextIndex = currentIndex + 1
-    if (currentStep.next_step_slug) {
-      nextIndex = currentStep.next_step_slug === 'end' ?
-        qc.steps.length : qc.steps?.findIndex((step) => step.slug === currentStep.next_step_slug)
+
+    let nextStepSlug = currentStep.next_step_slug
+    const stepResult = ctx.resultMap[currentStep.slug]
+    if (stepResult && typeof stepResult !== 'string' && 'answer_status' in stepResult && !!stepResult.answer_status?.next_step_slug) {
+      nextStepSlug = stepResult.answer_status.next_step_slug
+    }
+
+    if (nextStepSlug) {
+      nextIndex =nextStepSlug === 'end' ?
+        qc.steps.length : qc.steps?.findIndex((step) => step.slug === nextStepSlug)
     }
     await runStepsRecursively(nextIndex, progress, ctx, iteration)
   }

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

@@ -1,5 +1,6 @@
-import { AgentInfo, aiClient, ChatResponseWithSteps, StackspotAPIError, StreamCanceledError } from '@stack-spot/portal-network'
+import { AgentInfo, aiClient, ChatResponseWithSteps, ChatStep, StackspotAPIError, StreamCanceledError } from '@stack-spot/portal-network'
 import { ChatResponse3 } from '@stack-spot/portal-network/api/ai'
+import { findLast } from 'lodash'
 import { ChatEntry, KnowledgeSource, TextChatEntry } from '../state/ChatEntry'
 import { ChatState } from '../state/ChatState'
 import { LabeledWithImage } from '../state/types'
@@ -23,7 +24,7 @@ function createEntryValueFromChatResponse(
   agent: LabeledWithImage | undefined,
   includeDate = false,
 ): TextChatEntry {
-  return {
+  const entry = {
     agentType: 'bot',
     type: 'md',
     content: response.answer ?? '',
@@ -34,6 +35,7 @@ function createEntryValueFromChatResponse(
     steps: response.steps,
     tools: response.tools,
   }
+  return entry as TextChatEntry
 }
 
 function buildPrompt(content: string, data?: any) {
@@ -63,9 +65,10 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
     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 => {
+
+  //Verify if the last planning in the messages has status awaiting_approval
+  const getLastPlanningAwaiting = () => findLast(messages, item => {
     const steps = item.getValue().steps
     if (steps) {
       const hasPlanning = steps.find((step) => step.type === 'planning')
@@ -84,6 +87,8 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
   let knowledgeSources: KnowledgeSource[] | undefined
 
   const updatePlanningMessage = () => {
+    const lastPlanningAwaiting = getLastPlanningAwaiting()
+
     if (lastPlanningAwaiting) {
       const originalItem = messages.find((message) => message.id === lastPlanningAwaiting.id)
       const originalItemValue = originalItem?.getValue()
@@ -96,6 +101,21 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
     }
   }
 
+  const updateStepMessage = (step: ChatStep) => {
+    const lastPlanningAwaiting = getLastPlanningAwaiting()
+
+    if (lastPlanningAwaiting) {
+      const originalItem = messages.find((message) => message.id === lastPlanningAwaiting.id)
+      const originalItemValue = originalItem?.getValue()
+      originalItemValue?.steps?.filter((messageStep) => {
+        if (messageStep.id === step.id) {
+          messageStep = { ...step }
+        }
+      })
+      originalItem?.setValue({ ...originalItemValue as TextChatEntry })
+    }
+  }
+
   const updateToolStatus = (agentInfo: AgentInfo) => {
     const executionId = agentInfo.id
     if (executionId) {
@@ -104,8 +124,9 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
       const originalItem = messages.find((message) => `${message.id}` === messageId)
       const originalItemValue = originalItem?.getValue()
       let update = false
-      const status = agentInfo.action === 'start' ? 'pending' : 'success'
-      const step = originalItemValue?.steps?.find(step => step.type === 'step' && step.attempts?.[0].tools?.[0].executionId === executionId)
+      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
@@ -115,14 +136,16 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
       }
 
       //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)
+      const toolStep = toolOriginalItemValue?.steps?.find(step =>
+        step.type === 'tool' && step.attempts?.[0]?.tools?.[0]?.executionId === executionId)
       update = false
-      if (toolStep && toolStep.status !== status) {
-        toolStep.status = status
+      if (toolOriginalItemValue && toolStep && toolStep.status !== status) {
+        toolOriginalItemValue.steps = undefined
         update = true
       }
       if (update) {
@@ -140,34 +163,75 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
       }
     }
 
+    if (value.agent_info?.type === 'chat' && value.agent_info?.action === 'end') {
+      //When an error happens, the step can still be running, so we enforce the error
+      const stepRunning = findLast(value.steps, (item) => item.status === 'running')
+      if (stepRunning?.status) {
+        stepRunning.status = 'error'
+      }
+    }
+
     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.
+    const lastPlanningAwaiting = getLastPlanningAwaiting()
     if (lastPlanningAwaiting && value.steps) {
-      const hasPlanningAwaiting = value.steps.find((item) => item.type === 'planning' && item.status === 'awaiting_approval')
-      value.steps = value.steps?.filter(step => {
+      value.steps?.map(step => {
         if (step.type === 'planning') {
           updatePlanningMessage()
+        } else if (step.type === 'step') {
+          updateStepMessage(step)
         }
-
-        return hasPlanningAwaiting ? true : (step.type !== 'planning' && step.type !== 'step' &&
-          (step.type !== 'answer' || (step.type === 'answer' && step.status === 'pending')))
       })
     }
 
-    if (value.agent_info?.type === 'tool') {
+    if (value.agent_info?.type === 'tool' && value.agent_info?.action !== 'awaiting_approval') {
       updateToolStatus(value.agent_info)
     }
 
+    if (value.steps) {
+      const tool = findLast(value.steps, (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?.forEach((attempt, i) => {
+            const newAttempt = tool.attempts?.[i]
+            if (!newAttempt) return
+            attempt.tools = attempt.tools?.map((origTool, j) => {
+              const newTool = newAttempt.tools?.[j]
+              if (!newTool || origTool?.executionId !== newTool?.executionId) return origTool
+              update = true
+              return { ...origTool, ...newTool }
+            })
+          })
+          if (step.attempts.length < tool.attempts.length) {
+            step.attempts.push(tool.attempts[tool.attempts.length - 1])
+          }
+        }
+        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()
+
+    const lastPlanningAwaiting = getLastPlanningAwaiting()
+    if (lastPlanningAwaiting) {
+      const value = lastPlanningAwaiting.getValue()
+      value.content = finalValue.answer || value.content
+      lastPlanningAwaiting.setValue(value)
+    }
     // if the streaming feature is not enabled, we only add the chat entry once the streaming has finished
     if (!chat.get('features').streaming) {
       chat.pushMessage(botEntry)

package/src/layout.css

@@ -184,3 +184,9 @@
   pointer-events: auto;
   color: var(--light-contrastText)
 }
+
+.menu-citric-hr {
+  hr {
+    margin: 0;
+  }
+}

package/src/state/ChatEntry.ts

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

package/src/state/ChatState.ts

@@ -59,6 +59,10 @@ export interface ChatPropertiesWithOptionalFeatures {
    * If a feature is marked as false, it's disabled, otherwise it's enabled.
    */
   features?: Partial<ChatFeatures>,
+  /**
+   * The current LLM (Large Language Model) being used for this chat.
+   */
+  selected_model_id?: string,
 }
 
 export interface ChatProperties extends ChatPropertiesWithOptionalFeatures {

package/src/utils/chat.ts

@@ -26,5 +26,6 @@ export function buildConversationContext(state: ChatState, message?: ChatEntry):
     platform: 'web-widget',
     platform_version: navigator.userAgent,
     stackspot_ai_version: appData.version,
+    selected_model_id: state.get('selected_model_id'),
   }
 }

package/src/utils/knowledge-source.ts

@@ -1,4 +1,4 @@
-import { DocumentResponse, SourceKnowledgeSource, SourceProjectFile4, SourceStackAi } from '@stack-spot/portal-network/api/ai'
+import { DocumentResponse, SourceKnowledgeSource, SourceProjectFile3, SourceStackAi } from '@stack-spot/portal-network/api/ai'
 import { KnowledgeSource } from '../state/ChatEntry'
 
 /**
@@ -60,7 +60,7 @@ export function extractCodeFromKSDocument(document: DocumentResponse): { languag
  * @returns a list of knowledge sources in the format expected by the chat.
  */
 export function genericSourcesToKnowledgeSources(
-  sources: (SourceStackAi | SourceKnowledgeSource | SourceProjectFile4)[] | undefined,
+  sources: (SourceStackAi | SourceKnowledgeSource | SourceProjectFile3)[] | undefined,
 ): KnowledgeSource[] | undefined {
   return sources?.filter(s => s.type === 'knowledge_source').map(ks => {
     const { document_id: documentId, document_score: documentScore, name, slug } = ks as SourceKnowledgeSource

package/src/utils/planning-tool.ts

@@ -2,6 +2,7 @@ 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
@@ -18,6 +19,14 @@ class PlanningToolDictionaryHelper {
   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]

package/src/views/Agents/styled.ts

@@ -19,8 +19,7 @@ export const AgentDescriptionBox = styled.div`
   color: ${theme.color.light[700]};
   line-height: 18px;
   background-color: ${theme.color.light[400]};
-  margin: -10px;
-  padding: 8px;
+  margin-top: 16px;
 
   section {
     padding-bottom: 10px;

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, 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, StepsPlaceholder } from './StepsList'
+import { StepsList, StepsPlaceholder, ViewToolsDetails } from './StepsList'
 
 export interface CustomRenderResult {
   /**
@@ -69,12 +69,12 @@ interface Props extends CustomMessage {
   isLast: boolean,
 }
 
-interface RenderInputsEntryProps { 
-  isLast: boolean, 
-  entry: TextChatEntry, 
-  value: string[], 
+interface RenderInputsEntryProps {
+  isLast: boolean,
+  entry: TextChatEntry,
+  value: string[],
   setValue: Dispatch<React.SetStateAction<string[]>>,
-  labels: string[], 
+  labels: string[],
   setLabels: Dispatch<React.SetStateAction<string[]>>,
 }
 
@@ -113,7 +113,7 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
               <Input name={entry.name} onChange={v => setValue([v])} required style={{ height: '30px', width: '33%' }} />}
           </Row>
         )}
-      />  
+      />
     }
 
     if (entry.type === 'button-list') {
@@ -145,7 +145,7 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
         renderLabel={o => (
           <Row gap={3}>
             <Text>{o.label}</Text>
-            {o.hasInput && o.value && labels.findIndex((label) => label === o.value)!== -1 &&
+            {o.hasInput && o.value && labels.findIndex((label) => label === o.value) !== -1 &&
               <div style={{ width: '33%' }}>
                 <Input
                   name={entry.name}
@@ -158,7 +158,7 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
                       const newValue = [...value]
                       newValue[customIndex] = v
                       setValue(newValue)
-                    } 
+                    }
                   }}
                   required={true}
                   style={{ height: '30px' }}
@@ -220,6 +220,19 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
   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()
 
@@ -264,7 +277,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
     }
   }
 
-  const renderActions = useCallback(()=> <> {entry.actions?.length && (
+  const renderActions = useCallback(() => <> {entry.actions?.length && (
     <div className="actions">
       {entry.actions.map(
         (a, index) => (<>
@@ -344,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 || isPlanning) && (
+  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}
@@ -357,32 +371,19 @@ 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} />}
+
+              {!!entry.steps?.length && <StepsList steps={entry.steps} chatId={chat.id} messageId={message.id}
+                userHasAlreadyAnswered={userHasAlreadyAnswered} />}
 
               {renderContent()}
-            
+
             </div>
           )}
-          {isPlanning && entry.agentType === 'bot' && isLast && <StepsPlaceholder /> }
-          
+          {isPlanning && entry.agentType === 'bot' && isLast && <StepsPlaceholder />}
+
           {entry.error && <Alert type="error">{entry.error}</Alert>}
         </div>
         {afterMessage && createElement(afterMessage, { message })}
-        {/* {!!entry.tools?.length && <StackedBadge
-          aria-label={t.openToolsPanel}
-          title={t.openToolsPanel}
-          tabIndex={0}
-          role="button"
-          className="tools-badge"
-          label={t.tools}
-          images={entry.tools.slice(0, 3).map((id) => {
-            const tool = toolById(id, toolKits)
-            return { key: id, name: tool?.name || id, icon: <Icon icon="Cog" />, url: tool?.image }
-          })}
-          onClick={openToolsPanel}
-          style={{ marginTop: '12px', width: 'fit-content' }}
-        />} */}
 
         {!!entry.knowledgeSources?.length && <div className="ks-box">
           <Text appearance="microtext1" color="light.700">Knowledge Sources:</Text>
@@ -393,35 +394,40 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
           ))}</ul>
         </div>}
 
-        {(!!agentsTools?.length || !!entry.tools?.length) && <div className="tools-box">
-          <Button appearance="none" onClick={openResourcesPanel} aria-label={t.openResourcesPanel}>
-            {agentsTools?.map((agent) => (
-              <ImageBox key={agent.id} className="agent-info-avatar-resource">
-                <ImageWithFallback
-                  src={agent.avatar ?? undefined}
-                  fallback={<Icon icon="Agent" />}
-                  alt={agent.name}
-                  aria-label={agent.name}
-                  title={agent.name}
-                />
-              </ImageBox>
-            ))}
-            {entry.tools?.map((id) => {
-              const tool = toolById(id, toolKits)
-              return (
-                <ImageBox key={id} className="agent-info-avatar-resource">
+        {(!!agentsTools?.length || !!entry.tools?.length) && 
+          <div className="tools-box">
+            <Button appearance="none" onClick={openResourcesPanel} aria-label={t.openResourcesPanel}>
+              {agentsTools?.map((agent) => (
+                <ImageBox key={agent.id} className="agent-info-avatar-resource">
                   <ImageWithFallback
-                    src={tool?.image}
-                    fallback={<Icon icon="Cog" />}
-                    alt={tool?.name}
-                    aria-label={tool?.name}
-                    title={tool?.name}
+                    src={agent.avatar ?? undefined}
+                    fallback={<Icon icon="Agent" />}
+                    alt={agent.name}
+                    aria-label={agent.name}
+                    title={agent.name}
                   />
                 </ImageBox>
-              )})}
-          </Button>
-        </div>}
-    
+              ))}
+              {entry?.tools?.map((id) => {
+                if (agentsTools?.some((agent) => agent.id === id)) return null
+                const tool = toolById(id, toolKits)
+                return (
+                  <ImageBox key={id} className="agent-info-avatar-resource">
+                    <ImageWithFallback
+                      src={tool?.image}
+                      fallback={<Icon icon="Cog" />}
+                      alt={tool?.name}
+                      aria-label={tool?.name}
+                      title={tool?.name}
+                    />
+                  </ImageBox>
+                )
+              })}
+            </Button>
+            <ViewToolsDetails chatId={chat.id} />
+          </div>
+        }
+
         {shouldShowFooter && <div className="message-footer">
           {entry.agentType === 'bot' && !entry.error && <div className="message-actions">
             {entry.type === 'md' && (