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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "2.3.0",
+  "version": "2.3.1-beta.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,12 +11,12 @@
   },
   "peerDependencies": {
     "@stack-spot/citric-react": "^0.36.0",
-    "@stack-spot/citric-icons": "^0.2.3",
+    "@stack-spot/citric-icons": "^0.2.5",
     "@stack-spot/portal-theme": "^1.2.1",
     "@citric/core": "^6.4.0",
-    "@stack-spot/portal-components": "^2.26.0",
+    "@stack-spot/portal-components": "^2.27.3",
     "@citric/icons": "^5.13.0",
-    "@stack-spot/portal-network": "0.193.0",
+    "@stack-spot/portal-network": "0.190.0-beta.1",
     "@citric/ui": "^6.10.2",
     "@stack-spot/portal-translate": "^2.1.0",
     "lodash": "^4.17.0",

package/src/app-metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "2.3.0",
-  "date": "Tue Oct 28 2025 17:04:35 GMT+0000 (Coordinated Universal Time)",
+  "version": "2.3.1-beta.1",
+  "date": "Thu Nov 06 2025 13:51:17 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.193.0(@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.190.0-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)"
     },
     {
       "name": "@stack-spot/portal-theme",

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

@@ -245,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

@@ -24,7 +24,7 @@ function createEntryValueFromChatResponse(
   agent: LabeledWithImage | undefined,
   includeDate = false,
 ): TextChatEntry {
-  const entry= {
+  const entry = {
     agentType: 'bot',
     type: 'md',
     content: response.answer ?? '',
@@ -65,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 = findLast(messages, 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')
@@ -86,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()
@@ -97,8 +100,10 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
       originalItem?.setValue({ ...originalItemValue as TextChatEntry })
     }
   }
-  
+
   const updateStepMessage = (step: ChatStep) => {
+    const lastPlanningAwaiting = getLastPlanningAwaiting()
+
     if (lastPlanningAwaiting) {
       const originalItem = messages.find((message) => message.id === lastPlanningAwaiting.id)
       const originalItemValue = originalItem?.getValue()
@@ -120,7 +125,8 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
       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)
+      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
@@ -135,8 +141,8 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
       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 (toolOriginalItemValue && toolStep && toolStep.status !== status) {
         toolOriginalItemValue.steps = undefined
@@ -157,10 +163,19 @@ 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)
     }
 
+    const lastPlanningAwaiting = getLastPlanningAwaiting()
     if (lastPlanningAwaiting && value.steps) {
       value.steps?.map(step => {
         if (step.type === 'planning') {
@@ -177,24 +192,26 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
 
     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?.map((attempt, i) => {
+        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?.map((origTool, j) => {
+            attempt.tools = attempt.tools?.map((origTool, j) => {
               const newTool = newAttempt.tools?.[j]
-              if (!newTool || origTool.executionId !== newTool.executionId) return origTool
+              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 })
@@ -208,6 +225,8 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
   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

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/views/Chat/ChatMessage.tsx

@@ -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' }}
@@ -219,7 +219,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
   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
@@ -227,12 +227,12 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
   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()
+    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()
 
@@ -277,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) => (<>
@@ -357,7 +357,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
     widget.set('panel', 'resources')
   }
 
-  return (entry.content || entry.error || !!entry.steps?.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"
@@ -371,16 +371,16 @@ 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 })}
@@ -421,7 +421,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
                 />
               </ImageBox>
             ))}
-            {entry.tools?.map((id) => {
+            {entry?.tools?.map((id) => {
               const tool = toolById(id, toolKits)
               return (
                 <ImageBox key={id} className="agent-info-avatar-resource">
@@ -433,11 +433,12 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
                     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' && (

package/src/views/Chat/StepsList.tsx

@@ -189,7 +189,7 @@ export const ToolStepsList = ({ toolStep, messageId, chatId }: { toolStep: ToolC
 
   useEffect(() => {
     if (!toolStep) return undefined
-    const executionId = toolStep.attempts?.[0].tools?.[0].executionId
+    const executionId = toolStep.attempts?.[0]?.tools?.[0]?.executionId
     if (!executionId) return
 
     updateToolStep(messages, executionId, toolStep.status)
@@ -251,7 +251,7 @@ export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }:
 
   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)
       }
@@ -271,8 +271,8 @@ export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }:
   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
+    const firstAttempt = !!step.attempts && !!step.attempts.length ? step.attempts[0] : undefined
+    const toolsCount = firstAttempt?.tools?.length ?? 0
     return sum + toolsCount
   }, 0), [steps])
 
@@ -302,13 +302,15 @@ export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }:
         <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} />}
+          {!userHasAlreadyAnswered && planning?.[0]?.status === 'awaiting_approval' && <AwaitingApproval chatId={chatId} />}
         </Column>
 
+        {userHasAlreadyAnswered && planning?.[0]?.status === 'success' && <ViewToolsDetails chatId={chatId} />}
+
       </div>
     </AnimatedHeight> : null}
 
-    {toolsStep && toolsStep.status === 'awaiting_approval' && !userHasAlreadyAnswered && 
+    {toolsStep && toolsStep.status === 'awaiting_approval' && !userHasAlreadyAnswered &&
       <ToolStepsList toolStep={toolsStep} messageId={messageId} chatId={chatId} />}
   </>
   )
@@ -317,18 +319,19 @@ export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }:
 export const ViewToolsDetails = ({ chatId }: { chatId: string }) => {
   const t = useTranslate(dictionary)
   const messages = useChatMessages(chatId)
-  const messageId = useMemo(() => {
+  const widget = useWidget()
+  const getPlanningMessageId = () => {
     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() {
+    const messageId = getPlanningMessageId()
+
     if (messageId) {
       widget.set('currentMessageInPanel', { chatId, messageId })
       widget.set('panel', 'steps')

package/src/views/MessageInput/ButtonBar.tsx

@@ -1,6 +1,7 @@
 import { IconButton, Row } from '@stack-spot/citric-react'
 import { useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
 import { useMessageInputDictionary } from './dictionary'
+import { ModelSwitcher } from './ModelSwitcher'
 import { SelectContent } from './SelectContent'
 import { SelectionBarWrapper } from './styled'
 
@@ -29,6 +30,7 @@ export const ButtonBar = ({ onSend, isLoading }: SelectionBarProps) => {
           <IconButton icon="Code" appearance="square" aria-label={t.code} title={t.code} onClick={() => widget.set('panel', 'editor')} />
         )}
       </Row>
+      <ModelSwitcher />
       {isLoading ? (
         <IconButton
           icon="Stop"

package/src/views/MessageInput/ModelSwitcher/index.tsx

@@ -0,0 +1,67 @@
+import { CitricIconOutline, CitricIconSocial } from '@stack-spot/citric-icons'
+import { AsyncContent, Button, Column, FieldGroup, Icon, Input, Row } from '@stack-spot/citric-react'
+import { SelectionList } from '@stack-spot/portal-components/SelectionList'
+import { agentToolsClient, genAiInferenceClient } from '@stack-spot/portal-network'
+import { useMemo, useState } from 'react'
+import { CSSProperties } from 'styled-components'
+import { useCurrentChat, useCurrentChatState } from '../../../context/hooks'
+import { useMessageInputDictionary } from '../dictionary'
+import { RowWrapperStyled, stylesModelSwitcher } from '../styled'
+import { getModelData, handleFilter, providerIcon } from './utils'
+
+export const ModelSwitcher = () => {
+  const t = useMessageInputDictionary()
+  const agentCurrentChat = useCurrentChatState('agent')
+  const chat = useCurrentChat()
+  const [visibleMenu, setVisibleMenu] = useState(false)
+  const [agentData, isLoadingAgentData] = agentToolsClient.agent.useStatefulQuery({ agentId: agentCurrentChat?.id || '' })
+  const [listModels, isLoadingModels] = genAiInferenceClient.listModels.useStatefulQuery({ pageSize: 999, active: true })
+  const [filter, setFilter] = useState('')
+
+  const { modelName, modelProviderType, listItemsData } = 
+    getModelData(chat, setVisibleMenu, agentData, listModels)
+
+  const data = useMemo(() => {
+    const items = listItemsData ?? []
+    return handleFilter(items, t, filter)
+  }, [filter, agentCurrentChat?.id, chat.get('selected_model_id'), listItemsData])
+  
+  return (
+    <RowWrapperStyled>
+      <AsyncContent loading={isLoadingAgentData && isLoadingModels}>
+        <Button
+          className="button-select-model"
+          colorScheme="light"
+          size="sm"
+          aria-label={t.agent}
+          title={t.agent}
+          onClick={() => setVisibleMenu(state => !state)}
+        >
+          <Icon
+            icon={providerIcon[modelProviderType as CitricIconOutline | CitricIconSocial]} 
+            group={modelProviderType === 'stackspot' ? 'outline' : 'social'} 
+          />
+          {modelName}
+          <Icon icon="ChevronDown" group="fill" size="sm" />
+        </Button>
+      </AsyncContent>
+      <SelectionList
+        id="menuModelSwitcher"
+        items={data || []}
+        visible={visibleMenu}
+        onHide={() => setVisibleMenu(false)}
+        showListAsCard
+        style={stylesModelSwitcher.selection as CSSProperties}
+        before={
+          <Column>
+            <FieldGroup fullWidth style={{ marginTop: '8px' }}>
+              <Icon icon="Search" />
+              <Input type="search" value={filter} onChange={(value) => (setFilter(value))} />
+            </FieldGroup>
+            {!data.length ? <Row m="16px 8px">{t.nothingFound}</Row> : undefined}
+          </Column>
+        }
+      />
+    </RowWrapperStyled>
+  )
+}