@stack-spot/ai-chat-widget 2.2.0-beta.1 → 2.2.1

package/dist/views/Steps/utils.d.ts

@@ -2,6 +2,6 @@ import { WithIcon } from '@stack-spot/citric-icons';
 import { ChatStep } from '@stack-spot/portal-network';
 export declare function getStatusIcon(status: ChatStep['status']): import("react/jsx-runtime").JSX.Element | null;
 export declare function getTypeIcon(type: ChatStep['type']): WithIcon;
-export declare function getTitle(translation: Record<'planning' | 'step' | 'answer', string>, step: ChatStep | undefined, index: number): string | undefined;
+export declare function getTitle(translation: Record<'planning' | 'step' | 'answer', string>, step: ChatStep | undefined, index: number): string;
 export declare function toPrecision(n: number, precisionDigits?: number): number;
 //# sourceMappingURL=utils.d.ts.map

package/dist/views/Steps/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/views/Steps/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAA;AAGrD,wBAAgB,aAAa,CAAC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,kDAOvD;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,QAAQ,CAK5D;AAED,wBAAgB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC,UAAU,GAAG,MAAM,GAAG,QAAQ,EAAE,MAAM,CAAC,EAAE,IAAI,EAAE,QAAQ,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,sBAO9H;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,eAAe,SAAI,UAGzD"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/views/Steps/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAA;AAGrD,wBAAgB,aAAa,CAAC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,kDAOvD;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,QAAQ,CAK5D;AAED,wBAAgB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC,UAAU,GAAG,MAAM,GAAG,QAAQ,EAAE,MAAM,CAAC,EAAE,IAAI,EAAE,QAAQ,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,UAO9H;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,eAAe,SAAI,UAGzD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "2.2.0-beta.1",
+  "version": "2.2.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.2",
     "@stack-spot/portal-theme": "^1.2.1",
     "@citric/core": "^6.4.0",
     "@stack-spot/portal-components": "^2.26.0",
     "@citric/icons": "^5.13.0",
-    "@stack-spot/portal-network": "0.189.0-beta.1",
+    "@stack-spot/portal-network": "0.181.0",
     "@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.2.0-beta.1",
-  "date": "Mon Oct 27 2025 19:05:06 GMT+0000 (Coordinated Universal Time)",
+  "version": "2.2.1",
+  "date": "Mon Oct 27 2025 20:27:26 GMT+0000 (Coordinated Universal Time)",
   "dependencies": [
     {
       "name": "@stack-spot/app-metadata",
@@ -109,11 +109,11 @@
     },
     {
       "name": "@stack-spot/citric-icons",
-      "version": "0.2.3"
+      "version": "0.2.2"
     },
     {
       "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.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@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",
@@ -121,7 +121,7 @@
     },
     {
       "name": "@stack-spot/portal-network",
-      "version": "0.189.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)"
+      "version": "0.181.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)"
     },
     {
       "name": "@stack-spot/portal-theme",

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

@@ -1,13 +1,11 @@
-import { AgentInfo, aiClient, ChatResponseWithSteps, ChatStep, 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 { findLast } from 'lodash'
 import { ChatEntry, KnowledgeSource, TextChatEntry } from '../state/ChatEntry'
 import { ChatState } from '../state/ChatState'
 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.
@@ -24,7 +22,7 @@ function createEntryValueFromChatResponse(
   agent: LabeledWithImage | undefined,
   includeDate = false,
 ): TextChatEntry {
-  const entry= {
+  return {
     agentType: 'bot',
     type: 'md',
     content: response.answer ?? '',
@@ -35,7 +33,6 @@ function createEntryValueFromChatResponse(
     steps: response.steps,
     tools: response.tools,
   }
-  return entry as TextChatEntry
 }
 
 function buildPrompt(content: string, data?: any) {
@@ -64,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 = findLast(messages, 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()
@@ -84,135 +69,15 @@ 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 updateStepMessage = (step: ChatStep) => {
-    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) {
-      //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)
     }
-
-    if (lastPlanningAwaiting && value.steps) {
-      value.steps?.map(step => {
-        if (step.type === 'planning') {
-          updatePlanningMessage()
-        } else if (step.type === 'step') {
-          updateStepMessage(step)
-        }
-      })
-    }
-
-    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?.map((attempt, i) => {
-            const newAttempt = tool.attempts?.[i]
-            if (!newAttempt) return
-            attempt.tools?.map((origTool, j) => {
-              const newTool = newAttempt.tools?.[j]
-              if (!newTool || origTool.executionId !== newTool.executionId) return origTool
-              update = true
-              return { ...origTool, ...newTool }
-            })
-          })
-        }
-        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()
-    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/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.
    */
@@ -59,10 +55,6 @@ 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,6 +26,5 @@ 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/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, useChatMessages, 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, ViewToolsDetails } from './StepsList'
+import { StepsList } from './StepsList'
 
 export interface CustomRenderResult {
   /**
@@ -218,21 +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
-  
-  // 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()
 
@@ -357,8 +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) && (!isMessageHidden || !toolsStep || 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}
@@ -371,15 +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} 
-                userHasAlreadyAnswered={userHasAlreadyAnswered} />}
-
               {renderContent()}
             
+              {!!entry.steps?.length && <StepsList steps={entry.steps} chatId={chat.id} messageId={message.id} />}
             </div>
           )}
-          {isPlanning && entry.agentType === 'bot' && isLast && <StepsPlaceholder /> }
           
           {entry.error && <Alert type="error">{entry.error}</Alert>}
         </div>
@@ -435,7 +416,6 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
                 </ImageBox>
               )})}
           </Button>
-          <ViewToolsDetails chatId={chat.id} />
         </div>}
     
         {shouldShowFooter && <div className="message-footer">