@stack-spot/ai-chat-widget 2.4.0 → 2.4.2

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

@@ -1,4 +1,4 @@
-import { AgentInfo, aiClient, ChatResponseWithSteps, ChatStep, StackspotAPIError, StreamCanceledError } from '@stack-spot/portal-network'
+import { AgentInfo, aiClient, ChatResponseWithPMResources, 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'
@@ -18,13 +18,13 @@ import { planningToolDictionaryHelper } from '../utils/planning-tool'
  * @param includeDate whether or not to include the date in the chat entry.
  * @returns the TextChatEntry to build a ChatEntry.
  */
-function createEntryValueFromChatResponse(
-  response: Partial<ChatResponseWithSteps>,
+export function createEntryValueFromChatResponse(
+  response: Partial<ChatResponseWithSteps> & ChatResponseWithPMResources,
   knowledgeSources: KnowledgeSource[] | undefined,
   agent: LabeledWithImage | undefined,
   includeDate = false,
 ): TextChatEntry {
-  const entry= {
+  const entry = {
     agentType: 'bot',
     type: 'md',
     content: response.answer ?? '',
@@ -34,6 +34,9 @@ function createEntryValueFromChatResponse(
     updated: includeDate ? new Date().toISOString() : undefined,
     steps: response.steps,
     tools: response.tools,
+    opportunities: response.opportunities,
+    hypothesis: response.hypothesis,
+    prfaq: response.prfaq,
   }
   return entry as TextChatEntry
 }
@@ -43,32 +46,11 @@ function buildPrompt(content: string, data?: any) {
   return typeof data === 'string' ? data : JSON.stringify(data)
 }
 
-/**
- * The chat interceptor that sends the message to the AI agent, interprets the response and adds it to the chat.
- * 
- * The message added to the chat is streamed, i.e. it changes over time, until it's completed.
- * 
- * @param entry the chat entry.
- * @param chat the chat state.
- * @param signal a signal that can be canceled by the user.
- * @returns undefined
- */
-export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState, signal: AbortSignal) {
-  const { agentType, content, data } = entry.getValue()
-  if (agentType !== 'user') return
-  const context = buildConversationContext(chat, entry)
-  chat.set('isLoading', true)
-  const untitled = chat.untitled
-  const isFirstMessage = chat.getMessages().length === 1
-  if (untitled) {
-    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 getLastPlanningAwaiting = (chat: ChatState) => {
   const messages = chat.getMessages()
 
-  //Verify if the last planning in the messages has status awaiting_approval
-  const getLastPlanningAwaiting = () => findLast(messages, item => {
+  return findLast(messages, item => {
     const steps = item.getValue().steps
     if (steps) {
       const hasPlanning = steps.find((step) => step.type === 'planning')
@@ -76,157 +58,189 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
     }
     return false
   })
+}
 
-  const stream = aiClient.sendChatMessage({ context, user_prompt: buildPrompt(content, data) })
-  signal.addEventListener('abort', () => stream.cancel())
-  const botEntry = ChatEntry.createStreamedBotEntry()
-  // we add the chat entry and show the streaming if the streaming feature is enabled
-  if (chat.get('features').streaming) {
-    chat.pushMessage(botEntry)
-  }
-  let knowledgeSources: KnowledgeSource[] | undefined
-
-  const updatePlanningMessage = () => {
-    const lastPlanningAwaiting = getLastPlanningAwaiting()
+const updateToolStatus = (agentInfo: AgentInfo, chat: ChatState) => {
+  const executionId = agentInfo.id
+  const messages = chat.getMessages()
 
-    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'
-        }
-      })
+  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 })
     }
-  }
-  
-  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 })
+    //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 })
     }
   }
+}
 
-  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 })
-      }
+const updateStepMessage = (step: ChatStep, chat: ChatState) => {
+  const lastPlanningAwaiting = getLastPlanningAwaiting(chat)
+  const messages = chat.getMessages()
 
-      //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 })
+  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 })
   }
+}
 
-  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.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'
+const updatePlanningMessage = (chat: ChatState) => {
+  const lastPlanningAwaiting = getLastPlanningAwaiting(chat)
+  const messages = chat.getMessages()
+
+  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 })
+  }
+}
 
-    if (value.sources?.length !== knowledgeSources?.length && chat.get('features').showSourcesInResponse) {
-      knowledgeSources = genericSourcesToKnowledgeSources(value.sources)
+export function helperSendMessage(value: Partial<ChatResponseWithSteps> & { opportunities?: any },
+  chat: ChatState, botEntry: ChatEntry, knowledgeSources: KnowledgeSource[] | undefined) {
+  const messages = chat.getMessages()
+  if (value.agent_info?.type === 'planning') {
+    if (value.agent_info.action === 'start') {
+      chat.set('isPlaning', true)
+    } else {
+      chat.set('isPlaning', false)
     }
+  }
 
-    const lastPlanningAwaiting = getLastPlanningAwaiting()
-    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 === '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.agent_info?.type === 'tool' && value.agent_info?.action !== 'awaiting_approval') {
-      updateToolStatus(value.agent_info)
-    }
+  if (value.sources?.length !== knowledgeSources?.length && chat.get('features').showSourcesInResponse) {
+    knowledgeSources = genericSourcesToKnowledgeSources(value.sources)
+  }
+
+  const lastPlanningAwaiting = getLastPlanningAwaiting(chat)
+  if (lastPlanningAwaiting && value.steps) {
+    value.steps?.map(step => {
+      if (step.type === 'planning') {
+        updatePlanningMessage(chat)
+      } else if (step.type === 'step') {
+        updateStepMessage(step, chat)
+      }
+    })
+  }
+
+  if (value.agent_info?.type === 'tool' && value.agent_info?.action !== 'awaiting_approval') {
+    updateToolStatus(value.agent_info, chat)
+  }
 
-    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 (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 })
+        })
+        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')))
-  })
+  botEntry.setValue(createEntryValueFromChatResponse(value, knowledgeSources, chat.get('agent')))
+}
+
+/**
+ * The chat interceptor that sends the message to the AI agent, interprets the response and adds it to the chat.
+ * 
+ * The message added to the chat is streamed, i.e. it changes over time, until it's completed.
+ * 
+ * @param entry the chat entry.
+ * @param chat the chat state.
+ * @param signal a signal that can be canceled by the user.
+ * @returns undefined
+ */
+export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState, signal: AbortSignal) {
+  const { agentType, content, data } = entry.getValue()
+  if (agentType !== 'user') return
+  const context = buildConversationContext(chat, entry)
+  chat.set('isLoading', true)
+  const untitled = chat.untitled
+  const isFirstMessage = chat.getMessages().length === 1
+  if (untitled) {
+    chat.set('label', content || entry.getValue().upload?.[0]?.name || 'Chat')
+    chat.untitled = false
+  }
+
+  const stream = aiClient.sendChatMessage({ context, user_prompt: buildPrompt(content, data) })
+  signal.addEventListener('abort', () => stream.cancel())
+  const botEntry = ChatEntry.createStreamedBotEntry()
+  // we add the chat entry and show the streaming if the streaming feature is enabled
+  if (chat.get('features').streaming) {
+    chat.pushMessage(botEntry)
+  }
+  let knowledgeSources: KnowledgeSource[] | undefined
+
+  stream.onChange(value => helperSendMessage(value, chat, botEntry, knowledgeSources))
 
   let finalValue: Partial<ChatResponse3> | undefined
   try {
     finalValue = await stream.getValue()
 
-    const lastPlanningAwaiting = getLastPlanningAwaiting()
+    const lastPlanningAwaiting = getLastPlanningAwaiting(chat)
     if (lastPlanningAwaiting) {
       const value = lastPlanningAwaiting.getValue()
       value.content = finalValue.answer || value.content

package/src/features.ts

@@ -39,6 +39,10 @@ export interface ChatFeatures {
    * Enables streaming in chat responses.
    */
   streaming: boolean,
+  /**
+  * Enables LLM select.
+  */
+  showLLMSelect: boolean,
 }
 
 export type Scope = 'favorite' | 'builtin' | 'personal' | 'shared' | 'workspace' | 'account'
@@ -54,9 +58,9 @@ export interface GlobalFeatures {
    * If this is set, only the scopes in this list will be enabled.
    */
   scopes?: Scope[],
- /**
-   * When set, only items(knowledge sources, agents, stacks ai, quick commands) from that workspace will be shown to the user.
-   */
+  /**
+    * When set, only items(knowledge sources, agents, stacks ai, quick commands) from that workspace will be shown to the user.
+    */
   workspaceId?: string,
   /**
    * when set to false it does not show tab by scope, it shows a single list.
@@ -83,6 +87,7 @@ export function getFeaturesWithDefaults(features?: Partial<AIWidgetFeatures>): A
     messageInput: true,
     upload: true,
     streaming: true,
+    showLLMSelect: true,
     showSourcesInResponse: true,
     groupResourcesByScope: true,
     ...features,

package/src/index.ts

@@ -1,5 +1,7 @@
 /* Attention: in order for the package "page" to work without linking the lib, we must export types separately, using the "type" keyword */
 
+
+export { createEntryValueFromChatResponse, helperSendMessage } from './chat-interceptors/send-message'
 export { QuickStartButton } from './components/QuickStartButton'
 export { AIWidgetProvider } from './context/AIWidgetProvider'
 export * from './context/hooks'

package/src/state/ChatEntry.ts

@@ -1,10 +1,10 @@
-import { ChatStep } from '@stack-spot/portal-network'
+import { ChatStep, HypothesisPMAgent, OpportunitiesPMAgent, PrfaqPMAgent } from '@stack-spot/portal-network'
 import { ColorPaletteName, ColorSchemeName } from '@stack-spot/portal-theme'
 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',
 }
 
@@ -146,10 +146,22 @@ export interface TextChatEntry {
    * If any tool was used to generate the response, its id is returned in this list.
    */
   tools?: string[],
+  /**
+  * If opportunities exists in pm agent, its send in this list.
+  */
+  opportunities?: OpportunitiesPMAgent[],
+  /**
+  * If hypothesis exists in pm agent, its send in this list.
+  */
+  hypothesis?: HypothesisPMAgent[],
+  /**
+  * If prfaq exists in pm agent, its send in this object.
+  */
+  prfaq?: PrfaqPMAgent,
   /*
    * 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 +223,7 @@ export class ChatEntry {
       type: isMd ? 'md' : 'text',
       content,
       name: fieldName,
-      hiddenContent, 
+      hiddenContent,
       data,
       updated: new Date().toISOString(),
     })

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;