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

package/src/state/ChatEntry.ts

@@ -4,7 +4,7 @@ import { pull } from 'lodash'
 import { LabeledAgent } from './types'
 
 export interface ActionDataClick {
-  name?: string,
+  name?: string, 
   value?: string[],
 }
 
@@ -44,9 +44,9 @@ export interface ChatAction extends SerializableAction {
    * @default button
    */
   buttonType?: 'submit' | 'button',
-  /**
-  * @default lg
-  */
+   /**
+   * @default lg
+   */
   size?: 'lg' | 'md' | 'sm',
 }
 
@@ -149,7 +149,7 @@ export interface TextChatEntry {
   /*
    * Options for radio, checkbox or button type.
    */
-  options?: { color?: ColorSchemeName, label: string, value?: string, hasInput?: boolean }[],
+  options?: { color?: ColorSchemeName, label: string, value?: string, hasInput?: boolean}[],
   /**
    * Name to be used in input type fields.
    */
@@ -211,7 +211,7 @@ export class ChatEntry {
       type: isMd ? 'md' : 'text',
       content,
       name: fieldName,
-      hiddenContent,
+      hiddenContent, 
       data,
       updated: new Date().toISOString(),
     })

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/check-is-trial.ts

@@ -1,9 +1,6 @@
 import { NetworkClient } from '@stack-spot/portal-network'
 
 export const checkIsTrial = () => {
-  const hasSession = NetworkClient.sessionManager?.hasSession()
-  if (hasSession){
-    const trialInfo =  NetworkClient.sessionManager?.getSession()?.getTokenData()?.trial_account_status
-    return !!trialInfo
-  } return false
+  const trialInfo = NetworkClient.sessionManager?.getSession()?.getTokenData()?.trial_account_status
+  return !!trialInfo
 }

package/src/utils/planning-tool.ts

@@ -0,0 +1,41 @@
+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
+  }
+
+  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
+  }
+  
+  setMessageIdForStepId(messageId: number, stepId: string){
+    this.stepId[stepId] = messageId
+  }
+
+  getMessageIdFromStepId(stepId: string){
+    return this.stepId[stepId]
+  }
+
+  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/Agents/AgentsTab.tsx

@@ -7,7 +7,7 @@ import { useMemo, useState } from 'react'
 import { NavigationComponent } from '../../components/ComponentNavigator'
 import { DescribedRadioGroup } from '../../components/form/DescribedRadioGroup'
 import { WorkspaceTabNavigator } from '../../components/WorkspaceTabNavigator'
-import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
+import { useCurrentChat } from '../../context/hooks'
 import { useRightPanel } from '../../right-panel/hooks'
 import { ChatProperties } from '../../state/ChatState'
 import { AgentDescription } from './AgentDescription'
@@ -28,11 +28,10 @@ export const AgentsTab = ({ visibility, workspaceId, agent, showSubmitButton = t
   const { useFavorites, onAddFavorite, onRemoveFavorite } = useAgentFavorites()
   const [submitEnabled, setSubmitEnabled] = useState(false)
   const listFavorites = useFavorites()
-  const isAgentEnabled = useCurrentChatState('features').agent
-  const agentDefault = agentToolsClient.agentDefault.useQuery({ enabled: isAgentEnabled })
+  const agentDefault = agentToolsClient.agentDefault.useQuery()
   const agents = workspaceId
     ? workspaceAiClient.getAgentFromWorkspaceAi.useQuery({ workspaceId }) as AgentResponseWithBuiltIn[]
-    : agentToolsClient.agents.useQuery({ visibility }, { enabled: isAgentEnabled })
+    : agentToolsClient.agents.useQuery({ visibility })
 
   const initialValue = useMemo<AgentResponseWithBuiltIn | undefined>(
     () => {

package/src/views/Agents/useAgentFavorites.ts

@@ -1,10 +1,8 @@
 /* eslint-disable filenames/match-regex */
 import { agentToolsClient } from '@stack-spot/portal-network'
-import { useCurrentChatState } from '../../context/hooks'
 
 export function useAgentFavorites() {
-  const isAgentEnabled = useCurrentChatState('features').agent
-  const useFavorites = () => agentToolsClient.agents.useQuery({ visibility: 'favorite' }, { enabled: isAgentEnabled })
+  const useFavorites = () => agentToolsClient.agents.useQuery({ visibility: 'favorite' })
   const [addFavorite, pendingAddFav] = agentToolsClient.addFavorite.useMutation()
   const [removeFavorite, pendingRemoveFav] = agentToolsClient.removeFavorite.useMutation()
 

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, 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 } from './StepsList'
+import { StepsList, StepsPlaceholder, ViewToolsDetails } from './StepsList'
 
 export interface CustomRenderResult {
   /**
@@ -218,7 +218,21 @@ 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()
 
@@ -343,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) && (
+  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}
@@ -356,11 +371,15 @@ 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>
@@ -416,6 +435,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
                 </ImageBox>
               )})}
           </Button>
+          <ViewToolsDetails chatId={chat.id} />
         </div>}
     
         {shouldShowFooter && <div className="message-footer">