@stack-spot/ai-chat-widget 2.4.1 → 2.5.0

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,8 +18,8 @@ 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,
@@ -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,6 +46,155 @@ function buildPrompt(content: string, data?: any) {
   return typeof data === 'string' ? data : JSON.stringify(data)
 }
 
+//Verify if the last planning in the messages has status awaiting_approval
+const getLastPlanningAwaiting = (messages: ChatEntry[]) => 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 updateToolStatus = (agentInfo: AgentInfo, messages: ChatEntry[]) => {
+  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 })
+    }
+  }
+}
+
+const updateStepMessage = (step: ChatStep, messages: ChatEntry[]) => {
+  const lastPlanningAwaiting = getLastPlanningAwaiting(messages)
+
+  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 updatePlanningMessage = (messages: ChatEntry[]) => {
+  const lastPlanningAwaiting = getLastPlanningAwaiting(messages)
+
+  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 })
+  }
+}
+
+export function helperSendMessage(messages: ChatEntry[], value: Partial<ChatResponseWithSteps> & { opportunities?: any },
+  chat: ChatState, botEntry: ChatEntry, knowledgeSources: KnowledgeSource[] | undefined) {
+  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'
+    }
+  }
+
+  if (value.sources?.length !== knowledgeSources?.length && chat.get('features').showSourcesInResponse) {
+    knowledgeSources = genericSourcesToKnowledgeSources(value.sources)
+  }
+
+  const lastPlanningAwaiting = getLastPlanningAwaiting(messages)
+  if (lastPlanningAwaiting && value.steps) {
+    value.steps?.map(step => {
+      if (step.type === 'planning') {
+        updatePlanningMessage(messages)
+      } else if (step.type === 'step') {
+        updateStepMessage(step, messages)
+      }
+    })
+  }
+
+  if (value.agent_info?.type === 'tool' && value.agent_info?.action !== 'awaiting_approval') {
+    updateToolStatus(value.agent_info, messages)
+  }
+
+  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 })
+      }
+    }
+  }
+
+  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.
  * 
@@ -59,24 +211,13 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
   const context = buildConversationContext(chat, entry)
   chat.set('isLoading', true)
   const untitled = chat.untitled
-  const isFirstMessage = chat.getMessages().length === 1
+  const messages = chat.getMessages()
+  const isFirstMessage = messages.length === 1
   if (untitled) {
     chat.set('label', content || entry.getValue().upload?.[0]?.name || 'Chat')
     chat.untitled = false
   }
 
-  const messages = chat.getMessages()
-
-  //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')
-      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()
@@ -86,147 +227,15 @@ 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()
-      originalItemValue?.steps?.map((step) => {
-        if (step.type === 'planning' && step.status === 'awaiting_approval') {
-          step.status = 'success'
-        }
-      })
-      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 })
-    }
-  }
-
-  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.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') {
-          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?.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 })
-        }
-      }
-    }
-
-    botEntry.setValue(createEntryValueFromChatResponse(value, knowledgeSources, chat.get('agent')))
+    helperSendMessage(messages, value, chat, botEntry, knowledgeSources)
   })
 
   let finalValue: Partial<ChatResponse3> | undefined
   try {
     finalValue = await stream.getValue()
 
-    const lastPlanningAwaiting = getLastPlanningAwaiting()
+    const lastPlanningAwaiting = getLastPlanningAwaiting(messages)
     if (lastPlanningAwaiting) {
       const value = lastPlanningAwaiting.getValue()
       value.content = finalValue.answer || value.content

package/src/components/form/DescribedRadioGroup.tsx

@@ -1,6 +1,9 @@
 import { Icon } from '@stack-spot/citric-icons'
 import { Accordion, FieldGroup, ImageBox, Input, RadioGroup, Row, Text, useRadioGroupControls } from '@stack-spot/citric-react'
+import { InfiniteScroll } from '@stack-spot/portal-components/InfiniteScroll'
+import { isEqual } from 'lodash'
 import { useEffect, useState } from 'react'
+import styled from 'styled-components'
 import { ButtonFavorite, Favorite } from '../ButtonFavorite'
 
 interface Props<T> {
@@ -15,15 +18,24 @@ interface Props<T> {
   emptyResults: React.ReactNode,
   emptyDataset: React.ReactNode,
   onChange?: (value: T | undefined) => void,
+  fetchNextPage?: () => void,
+  hasNextPage?: boolean,
 }
 
+const StyledDiv = styled.div`
+  &#agents-content {
+    overflow: auto;
+  }
+`
+
 /**
  * Renders a radio group where each option has a label and a description.
  * The description in placed under the label and checkbox as an accordion.
  * 
  * Also renders a search input.
  */
-export function DescribedRadioGroup<T>({ initialValue, options: opt, data, emptyDataset, emptyResults, onChange }: Props<T>) {
+export function DescribedRadioGroup<T>({ initialValue, options: opt, data, emptyDataset, emptyResults, onChange,
+  fetchNextPage, hasNextPage }: Props<T>) {
   const [options, setOptions] = useState(opt)
   const controls = useRadioGroupControls({
     initialValue,
@@ -37,48 +49,63 @@ export function DescribedRadioGroup<T>({ initialValue, options: opt, data, empty
     if (controls.value === undefined && initialValue !== undefined) controls.setValue(initialValue)
   }, [initialValue])
 
+  useEffect(() => {
+    if (!isEqual(opt, options)) {
+      setOptions(opt)
+    }
+  }, [opt])
+
   return options.length ? <>
     <FieldGroup fullWidth>
       <Icon icon="Search" />
       <Input type="search" value={controls.filter} onChange={controls.setFilter} />
     </FieldGroup>
-    {controls.options.length ? <RadioGroup
-      options={controls.options}
-      value={controls.value}
-      onChange={controls.setValue}
-      renderKey={controls.renderKey}
-      className="option-list"
-      renderItem={(radio, o) => {
-        const { description, idOrSlug, name, image, listFavorites, onAddFavorite, onRemoveFavorite } = data(o)
-        return (
-          <Row className={controls.isUnfilteredButChecked(o) ? 'filtered-out' : ''}>
-            <Accordion
-              header={btn => <>
-                {radio}
-                {image && <ImageBox size="xs" style={{ fontSize: '16px' }}>{image}</ImageBox>}
-                <Text>{name}</Text>{btn}</>
-              }
-              appearance="card"
-            >
-              {typeof description === 'string' ? <Text appearance="microtext1" color="light.700">{description}</Text> : description}
-            </Accordion>
-            {onAddFavorite && <ButtonFavorite favorite={{
-              idOrSlug: idOrSlug,
-              listFavorites,
-              onAddFavorite: async (...args) => {
-                const res = await onAddFavorite(...args)
-                setOptions([...options]) // forces options re-rendering
-                return res
-              },
-              onRemoveFavorite: async (...args) => {
-                const res = await onRemoveFavorite?.(...args)
-                setOptions([...options]) // forces options re-rendering
-                return res ?? false
-              },
-            }} />}
-          </Row>
-        )
-      }}
-    /> : emptyResults}
+    <StyledDiv id="agents-content">
+      {controls.options.length ?
+        <InfiniteScroll scrollableTarget="agents-content"
+          dataLength={controls.options.length}
+          next={fetchNextPage as any ?? undefined}
+          hasMore={hasNextPage ?? false}>
+          <RadioGroup
+            options={controls.options}
+            value={controls.value}
+            onChange={controls.setValue}
+            renderKey={controls.renderKey}
+            className="option-list"
+            renderItem={(radio, o) => {
+              const { description, idOrSlug, name, image, listFavorites, onAddFavorite, onRemoveFavorite } = data(o)
+              return (
+                <Row className={controls.isUnfilteredButChecked(o) ? 'filtered-out' : ''}>
+                  <Accordion
+                    header={btn => <>
+                      {radio}
+                      {image && <ImageBox size="xs" style={{ fontSize: '16px' }}>{image}</ImageBox>}
+                      <Text>{name}</Text>{btn}</>
+                    }
+                    appearance="card"
+                  >
+                    {typeof description === 'string' ? <Text appearance="microtext1" color="light.700">{description}</Text> : description}
+                  </Accordion>
+                  {onAddFavorite && <ButtonFavorite favorite={{
+                    idOrSlug: idOrSlug,
+                    listFavorites,
+                    onAddFavorite: async (...args) => {
+                      const res = await onAddFavorite(...args)
+                      setOptions([...options]) // forces options re-rendering
+                      return res
+                    },
+                    onRemoveFavorite: async (...args) => {
+                      const res = await onRemoveFavorite?.(...args)
+                      setOptions([...options]) // forces options re-rendering
+                      return res ?? false
+                    },
+                  }} />}
+                </Row>
+              )
+            }}
+          />
+        </InfiniteScroll> 
+        : emptyResults}
+    </StyledDiv> 
   </> : emptyDataset
 }

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(),
     })