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

package/src/app-metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "2.0.0",
-  "date": "Thu Sep 18 2025 12:46:36 GMT+0000 (Coordinated Universal Time)",
+  "version": "3.0.0-beta.1",
+  "date": "Wed Oct 01 2025 15:13:49 GMT+0000 (Coordinated Universal Time)",
   "dependencies": [
     {
       "name": "@stack-spot/app-metadata",
@@ -109,19 +109,19 @@
     },
     {
       "name": "@stack-spot/citric-icons",
-      "version": "0.2.2"
+      "version": "0.2.3"
     },
     {
       "name": "@stack-spot/citric-react",
-      "version": "0.35.0(@stack-spot/citric-icons@0.2.2)(@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@1.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.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)"
     },
     {
       "name": "@stack-spot/portal-components",
-      "version": "2.25.5(@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@1.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.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)"
     },
     {
       "name": "@stack-spot/portal-network",
-      "version": "0.173.1(@stack-spot/auth@5.3.2)(@stack-spot/opa@2.5.0(@stack-spot/auth@5.3.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@stack-spot/portal-translate@1.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.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)"
     },
     {
       "name": "@stack-spot/portal-theme",
@@ -129,7 +129,7 @@
     },
     {
       "name": "@stack-spot/portal-translate",
-      "version": "1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "version": "2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
     {
       "name": "@xyflow/react",

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

@@ -1,4 +1,4 @@
-import { aiClient, ChatResponseWithSteps, StackspotAPIError, StreamCanceledError } from '@stack-spot/portal-network'
+import { AgentInfo, 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,6 +6,7 @@ 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.
@@ -61,6 +62,18 @@ 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()
@@ -69,12 +82,89 @@ 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' ? 'pending' : '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
+      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 (toolStep && toolStep.status !== status) {
+        toolStep.status = status
+        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') {
+      updateToolStatus(value.agent_info)
+    }
+
     botEntry.setValue(createEntryValueFromChatResponse(value, knowledgeSources, chat.get('agent')))
   })
+
   let finalValue: Partial<ChatResponse3> | undefined
   try {
     finalValue = await stream.getValue()

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/date.ts

@@ -1,4 +1,4 @@
-import { Dictionary, Language, getLanguage, useLanguage } from '@stack-spot/portal-translate'
+import { Dictionary, getLanguage, ptEn, useLanguage } from '@stack-spot/portal-translate'
 
 const OneDay = 24 * 60 * 60 * 1000
 const timeFormatOptions: Intl.DateTimeFormatOptions = { hour: '2-digit', minute:'2-digit' }
@@ -19,7 +19,7 @@ const fullFormatOptions: Intl.DateTimeFormatOptions = {
  * @param language the language to use.
  * @returns the formatted date.
  */
-export function formatDateForChatMessage(date: Date, language: Language = getLanguage()) {
+export function formatDateForChatMessage(date: Date, language = getLanguage(ptEn)) {
   const formatted: string[] = []
   const now = new Date()
   const isToday = date.toDateString() === now.toDateString()
@@ -36,7 +36,7 @@ export function formatDateForChatMessage(date: Date, language: Language = getLan
  * @returns an object containing functions for formatting dates.
  */
 export function useDateFormatter() {
-  const language = useLanguage()
+  const language = useLanguage(ptEn)
   return {
     /**
      * @param date the date to format using {@link formatDateForChatMessage}.

package/src/utils/error.ts

@@ -1,4 +1,4 @@
-import { getLanguage } from '@stack-spot/portal-translate'
+import { getLanguage, ptEn } from '@stack-spot/portal-translate'
 
 const httpErrors: Record<'en' | 'pt', Record<number, string>> = {
   en: {
@@ -48,7 +48,7 @@ const httpErrors: Record<'en' | 'pt', Record<number, string>> = {
 }
 
 function getGenericErrorBasedOnStatus(status: number) {
-  return httpErrors[getLanguage()][status] ?? `Unknown error. Status code: ${status}.`
+  return httpErrors[getLanguage(ptEn)][status] ?? `Unknown error. Status code: ${status}.`
 }
 
 export function treatHTMLInErrorMessage(text: string, status: number) {

package/src/utils/planning-tool.ts

@@ -0,0 +1,32 @@
+class PlanningToolDictionaryHelper {
+  static instance: PlanningToolDictionaryHelper | undefined
+  private toolExecutionIdPlanningStep: Record<string, string> = {}
+  private toolExecutionIdToolStep: Record<string, string> = {}
+
+  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
+  }
+
+  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/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, 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 } from './StepsList'
 
 export interface CustomRenderResult {
   /**
@@ -218,6 +218,7 @@ 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()
@@ -343,7 +344,7 @@ 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 || isPlanning) && (
     <li key={entry.messageId} className={entry.agentType} ref={ref}>
       <div className="chat-message-container"
         onMouseEnter={entry.agentType === 'user' ? () => setShowUserButtonCopy(true) : undefined}
@@ -356,11 +357,14 @@ 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>