@stack-spot/ai-chat-widget 1.0.0-dev.1769537635610 → 1.0.0-dev.1770209132260

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

@@ -1,5 +1,4 @@
-import { AgentInfo, aiClient, ChatResponseWithPMResources, ChatResponseWithSteps, ChatStep, StackspotAPIError, StreamCanceledError } from '@stack-spot/portal-network'
-import { ChatResponse3 } from '@stack-spot/portal-network/api/ai'
+import { AgentInfo, aiClient, ChatResponse, ChatResponseWithPMResources, ChatResponseWithSteps, ChatStep, genAiInferenceClient, StackspotAPIError, StreamCanceledError } from '@stack-spot/portal-network'
 import { findLast } from 'lodash'
 import { ChatEntry, KnowledgeSource, TextChatEntry } from '../state/ChatEntry'
 import { ChatState } from '../state/ChatState'
@@ -27,13 +26,13 @@ export function createEntryValueFromChatResponse(
   const entry = {
     agentType: 'bot',
     type: 'md',
-    content: response.answer ?? '',
+    content: response.message ?? '',
     messageId: response.message_id ?? undefined,
     knowledgeSources,
     agent: agent,
     updated: includeDate ? new Date().toISOString() : undefined,
     steps: response.steps,
-    tools: response.tools,
+    tools: response.tools_id,
     opportunities: response.opportunities,
     hypothesis: response.hypothesis,
     prfaq: response.prfaq,
@@ -112,39 +111,44 @@ const updatePlanningMessage = (messages: ChatEntry[]) => {
 
 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)
+  for (const agent_info of value.agent_info ?? []) {
+    if (agent_info?.type === 'planning') {
+      if (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 (agent_info?.type === 'chat' && 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)
+        }
+      })
+    }
 
-  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 (agent_info?.type === 'tool' && agent_info?.action !== 'awaiting_approval') {
+      updateToolStatus(agent_info, messages)
+    }
   }
 
-  if (value.agent_info?.type === 'tool' && value.agent_info?.action !== 'awaiting_approval') {
-    updateToolStatus(value.agent_info, messages)
+  if (chat.get('features').showSourcesInResponse) {
+    const mergedSources = [...(value.source ?? []), ...(value.cross_account_source ?? [])]
+    if (mergedSources.length !== (knowledgeSources?.length ?? 0)) {
+      knowledgeSources = genericSourcesToKnowledgeSources(mergedSources)
+    }
   }
 
   if (value.steps) {
@@ -193,7 +197,7 @@ export function helperSendMessage(messages: ChatEntry[], value: Partial<ChatResp
 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)
+  const context = buildConversationContext(chat, entry, buildPrompt(content, data))
   chat.set('isLoading', true)
   const untitled = chat.untitled
   const messages = chat.getMessages()
@@ -202,12 +206,8 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
     chat.set('label', content || entry.getValue().upload?.[0]?.name || 'Chat')
     chat.untitled = false
   }
-  
-  const stream = aiClient.sendChatMessage({ 
-    context, 
-    user_prompt: buildPrompt(content, data), 
-    agent_version_number: chat.get('agent')?.agent_version_number,
-  })
+
+  const stream = genAiInferenceClient.sendChatMessage(context)
   signal.addEventListener('abort', () => stream.cancel())
   const botEntry = ChatEntry.createStreamedBotEntry()
   // we add the chat entry and show the streaming if the streaming feature is enabled
@@ -220,14 +220,14 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
     helperSendMessage(messages, value, chat, botEntry, knowledgeSources)
   })
 
-  let finalValue: Partial<ChatResponse3> | undefined
+  let finalValue: Partial<ChatResponse> | undefined
   try {
     finalValue = await stream.getValue()
 
     const lastPlanningAwaiting = getLastPlanningAwaiting(messages)
     if (lastPlanningAwaiting) {
       const value = lastPlanningAwaiting.getValue()
-      value.content = finalValue.answer || value.content
+      value.content = finalValue.message || value.content
       lastPlanningAwaiting.setValue(value)
     }
     // if the streaming feature is not enabled, we only add the chat entry once the streaming has finished
@@ -247,7 +247,7 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
       })
     }
   }
-  if (finalValue?.answer) {
+  if (finalValue?.message) {
     botEntry.setValue({
       ...createEntryValueFromChatResponse(finalValue, botEntry.getValue().knowledgeSources, chat.get('agent'), true),
       hasPlanning: botEntry.getValue().hasPlanning,

package/src/components/FileDescription.tsx

@@ -94,7 +94,7 @@ export const FileDescription = ({ fileName, icon, status, onRemove, onRetry }: F
         icon="TimesMini"
         onClick={onRemove}
         title={t.remove}
-        arial-label={`${t.remove} ${name}`}
+        aria-label={name}
         style={{ alignSelf: 'start' }}
         size="xs"
       />}

package/src/components/Markdown.tsx

@@ -4,7 +4,9 @@
 
 import { Children, Fragment } from 'react'
 import ReactMarkdown from 'react-markdown'
+import rehypeKatex from 'rehype-katex'
 import remarkGfm from 'remark-gfm'
+import remarkMath from 'remark-math'
 import { WithChildren } from '../types'
 import { Code, Props as CodeProps } from './Code'
 
@@ -29,26 +31,43 @@ export const Markdown = (
     onCopyCode,
     children,
   }: Props,
-) => (
-  <>
-    <ReactMarkdown
-      className="markdown apply-citric"
-      remarkPlugins={[[remarkGfm]]}
-      components={{
-        a: props => <a target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'underline' }} {...props} />,
-        code: props =>
-          <Code
-            {...props}
-            onInsertCode={onInsertCode}
-            onNewFile={onNewFile}
-            onCopyCode={onCopyCode}
-            showActionBar
-          />,
-        pre: ({ children }) => <>{children}</>,
-        p: ({ children }) => <p>{Children.map(children, renderP)}</p>,
-      }}
-    >
-      {children}
-    </ReactMarkdown>
-  </>
-)
+) => {
+  
+  // fix parsing LaTex: https://github.com/remarkjs/react-markdown/issues/785
+  const content = typeof children === 'string'
+    ? children
+      .replace(/\\\\\[/g, '$$$$') // Replace '\\[' with '$$'
+      .replace(/\\\\\]/g, '$$$$') // Replace '\\]' with '$$'
+      .replace(/\\\\\(/g, '$$$$') // Replace '\\(' with '$$'
+      .replace(/\\\\\)/g, '$$$$') // Replace '\\)' with '$$'
+      .replace(/\\\[/g, '$$$$') // Replace '\[' with '$$'
+      .replace(/\\\]/g, '$$$$') // Replace '\]' with '$$'
+      .replace(/\\\(/g, '$$$$') // Replace '\(' with '$$'
+      .replace(/\\\)/g, '$$$$') // Replace '\)' with '$$';
+    : children
+
+  return (
+    <>
+      <ReactMarkdown
+        className="markdown apply-citric"
+        remarkPlugins={[[remarkMath, { singleDollarTextMath: true }], remarkGfm]}
+        rehypePlugins={[rehypeKatex]}
+        components={{
+          a: props => <a target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'underline' }} {...props} />,
+          code: props =>
+            <Code
+              {...props}
+              onInsertCode={onInsertCode}
+              onNewFile={onNewFile}
+              onCopyCode={onCopyCode}
+              showActionBar
+            />,
+          pre: ({ children }) => <>{children}</>,
+          p: ({ children }) => <p>{Children.map(children, renderP)}</p>,
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </>
+  )
+}

package/src/components/Selector/index.tsx

@@ -42,7 +42,7 @@ interface ListProps<T> {
   filter?: string,
   visibility?: SectionVisibility,
   selectorConfig: SelectorConfig<T>,
-  onSelect: (item: T) => void,
+  onSelect: (item: T, selectedVersion?: number) => void,
   favorite?: Favorite<T>,
 }
 
@@ -76,7 +76,7 @@ interface SelectorConfig<T> {
   isEnabled: boolean,
   sections: SectionVisibility[],
   renderComponentItem: FC<T>,
-  onSelect: (item: T) => void,
+  onSelect: (item: T, selectedVersion?: number) => void,
   /**
    * A react hook or a simple function that returns the selectable items.
    * 
@@ -104,7 +104,7 @@ const ListItem = <T extends Item>({ item, selectorConfig, onSelect, favorite }:
     <li>
       <button
         className="selector"
-        onClick={() => onSelect(item)}
+        onClick={() => onSelect(item, selectedVersion)}
         onKeyDown={(e) => e.key === 'Enter' && e.preventDefault()}
         onFocus={(e) => e.target.closest('li')?.classList.add('focus')}
         onBlur={(e) => e.target.closest('li')?.classList.remove('focus')}
@@ -157,14 +157,14 @@ const List = <T extends Item>({ selectorConfig, filter, visibility, onSelect, fa
   )
 }
 
-const SelectorContent = ({ filter, onClose, selectorConfig, favorite }: ContentProps<any>) => {
+const SelectorContent = <T, > ({ filter, onClose, selectorConfig, favorite }: ContentProps<T>) => {
   const t = useTranslate(dictionary)
   const ref = useRef<HTMLDivElement>(null)
   const [visibility, setVisibility] = useState<SectionVisibility | undefined>()
   const isGroupResourcesByScope = useWidgetState('features')?.groupResourcesByScope
   const { resourceName, icon, onSelect, sections } = selectorConfig
-  const onSelectItem = useCallback((slug: string) => {
-    onSelect(slug)
+  const onSelectItem = useCallback((item: any, selectedVersion?: number) => {
+    onSelect(item, selectedVersion)
     onClose()
   }, [])
 

package/src/components/TabManager.tsx

@@ -5,7 +5,7 @@ import { Button, IconButton } from '@stack-spot/citric-react'
 import { listToClass, theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { last } from 'lodash'
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { styled } from 'styled-components'
 import { ButtonAction } from '../types'
 import { FadingOverflow } from './FadingOverflow'
@@ -152,19 +152,31 @@ export function TabManager<T, Key extends React.Key>(
   const t = useTranslate(dictionary)
   const tabList = useRef<HTMLUListElement>(null)
   const lastNumberOfTabs = useRef(tabs.length)
+  const [ariaMessage, setAriaMessage] = useState('')
 
   const onClickTab = useCallback((event: React.MouseEvent<HTMLElement, MouseEvent>) => {
     const target = event.target as HTMLElement
     if (target.tagName === 'LI') target.querySelector('button')?.click()
   }, [])
 
-  const tabItems = useMemo(() => tabs.map((tab) => (
-    <li key={keygen(tab)} className={keygen(tab) === active ? 'active' : undefined} onClick={onClickTab}>
-      <button className="label" onClick={() => onSelect(tab)}><FadingOverflow>{renderLabel(tab)}</FadingOverflow></button>
-      {tabs.length > 1 &&
-        <IconButton appearance="text" icon="TimesMini" aria-label={t.close} title={t.close} onClick={() => onRemove(tab)} />}
-    </li>
-  )), [tabs, active])
+  const tabItems = useMemo(() => tabs.map((tab, idx) => {
+    const tabLabel = typeof renderLabel(tab) === 'string'
+      ? renderLabel(tab)
+      : `${t.tab} ${idx + 1}`
+
+    return (
+      <li key={keygen(tab)} className={keygen(tab) === active ? 'active' : undefined} onClick={onClickTab}>
+        <button className="label" aria-label={`${t.chat} ${tabLabel}`} onClick={() => onSelect(tab)}>
+          <FadingOverflow>{renderLabel(tab)}</FadingOverflow>
+        </button>
+        {tabs.length > 1 &&
+        <IconButton appearance="text" icon="TimesMini" aria-label={`${tabLabel}`} 
+          title={t.close}   onClick={() => { onRemove(tab), setAriaMessage(`${t.chat} ${tabLabel} ${t.closed}`)
+          
+            // Clears the message after a short time to prevent it from repeating
+            setTimeout(() => setAriaMessage(''), 1000)}} />}
+      </li>
+    )}), [tabs, active])
 
   const extras = useMemo(() => buttons.map(({
     ariaLabel, title, label, onClick, group, icon, appearance, size, className, style, disabled }) => label
@@ -204,6 +216,11 @@ export function TabManager<T, Key extends React.Key>(
 
   return (
     <Tabs $numberOfExtraButtons={buttons.length} className="tabs">
+      <div
+        aria-live="polite" aria-atomic="true"
+        style={{ position: 'absolute', left: '-9999px', width: '1px', height: '1px', overflow: 'hidden' }}>
+        {ariaMessage}
+      </div>
       <FadingOverflow className="list-overflow" scroll="arrows" enableHorizontalScrollWithVerticalWheel>
         <ul ref={tabList}>{tabItems}</ul>
       </FadingOverflow>
@@ -215,9 +232,15 @@ export function TabManager<T, Key extends React.Key>(
 const dictionary = {
   en: {
     close: 'Close',
+    tab: 'Tab',
+    chat: 'Chat',
+    closed: 'Closed',
   },
   pt: {
     close: 'Fechar',
+    tab: 'Aba',
+    chat: 'Chat',
+    closed: 'Fechado',
   },
 } satisfies Dictionary
 

package/src/state/ChatState.ts

@@ -1,3 +1,4 @@
+import { ChatRequest } from '@stack-spot/portal-network/api/genAiInference'
 import { dropRight, last, pull } from 'lodash'
 import { ulid } from 'ulid'
 import { AbortedError } from '../AbortedError'
@@ -63,6 +64,11 @@ export interface ChatPropertiesWithOptionalFeatures {
    * The current LLM (Large Language Model) being used for this chat.
    */
   selected_model_id?: string,
+
+  /**
+   * Extra options to be merged into the chat request payload sent to the backend.
+   */
+  requestOptions?: Pick<ChatRequest, 'deep_search_ks' | 'return_ks_in_response' | 'use_conversation'>,
 }
 
 export interface ChatProperties extends ChatPropertiesWithOptionalFeatures {

package/src/utils/chat.ts

@@ -1,31 +1,32 @@
-import { FixedChatRequest } from '@stack-spot/portal-network'
+import type { FixedChatRequest } from '@stack-spot/portal-network'
 import appData from '../app-metadata.json'
-import { ChatEntry } from '../state/ChatEntry'
-import { ChatState } from '../state/ChatState'
-import { defaultLanguage } from './programming-languages'
+import type { ChatEntry } from '../state/ChatEntry'
+import type { ChatState } from '../state/ChatState'
 
-/**
- * Builds a conversation context from a ChatState.
- * 
- * The conversation context is needed by most backend services.
- * 
- * @param state the ChatState to build the context from.
- * @returns the conversation context ready to be sent to the backend.
- */
-export function buildConversationContext(state: ChatState, message?: ChatEntry): FixedChatRequest['context'] {
+export function buildConversationContext(state: ChatState, message?: ChatEntry | undefined, userPrompt?: string): FixedChatRequest { 
+  const requestOptions = state.get('requestOptions')
   return {
-    workspace: state.get('workspace')?.id,
+    streaming: true,
+    show_chat_processing_state: true,
+    return_ks_in_response: state.get('features')?.showSourcesInResponse,
+    deep_search_ks: false,
+    stackspot_knowledge: false,
+    user_prompt: userPrompt ?? '',
+    use_conversation: true,
     conversation_id: state.id,
+    workspace_id: state.get('workspace')?.id,
     stack_id: state.get('stack')?.id,
-    language: state.get('codeLanguage') || (state.get('codeSelection') ? defaultLanguage : undefined),
     knowledge_sources: state.get('knowledgeSources')?.map(ks => ks.id),
     upload_ids: message?.getValue().upload?.map(f => f.id),
-    agent_id: state.get('agent')?.id,
-    agent_built_in: state.get('agent')?.builtIn,
-    os: navigator.userAgent,
-    platform: 'web-widget',
-    platform_version: navigator.userAgent,
-    stackspot_ai_version: appData.version,
-    selected_model_id: state.get('selected_model_id'),
+    selected_model: state.get('selected_model_id') ?? null,
+    agent_version_number: state.get('agent')?.agent_version_number,
+    context: {
+      os: navigator.userAgent,
+      platform: 'web-widget',
+      platform_version: navigator.userAgent,
+      stackspot_ai_version: appData.version,
+      agent_id: state.get('agent')?.id,
+    },
+    ...requestOptions,
   }
 }

package/src/utils/knowledge-source.ts

@@ -62,7 +62,7 @@ export function extractCodeFromKSDocument(document: DocumentResponse): { languag
 export function genericSourcesToKnowledgeSources(
   sources: (SourceStackAi | SourceKnowledgeSource | SourceProjectFile3)[] | undefined,
 ): KnowledgeSource[] | undefined {
-  return sources?.filter(s => s.type === 'knowledge_source').map(ks => {
+  return sources?.filter(s => s.type === 'knowledge_source' || s.type === 'cross_account').map(ks => {
     const { document_id: documentId, document_score: documentScore, name, slug } = ks as SourceKnowledgeSource
     return { documentId, documentScore, name, slug }
   })

package/src/views/ChatHistory/utils.ts

@@ -140,10 +140,12 @@ function toolsFromAgentInfo(agentInfo: any[] | null | undefined): string[] {
  */
 export async function loadChat(widget: WidgetState, conversationId: string) {
   const chat = await aiClient.chat.query({ conversationId })
-  const historyAgents = chat.history?.reduce<{ agent_core_id: string }[]>((accumulator, item) => {
+  const addedIds: Record<string, boolean> = {}
+  const historyAgents = chat.history?.reduce<{ agent_core_id: string, version_number?: number }[]>((accumulator, item) => {
     const agentId = item.custom_agent?.id
-    if (agentId !== undefined) {
-      accumulator.push({ agent_core_id: agentId })
+    if (agentId !== undefined && !addedIds[agentId]) {
+      addedIds[agentId] = true
+      accumulator.push({ agent_core_id: agentId, version_number: item.custom_agent?.version_number })
     }
     return accumulator
   }, []) ?? []
@@ -155,13 +157,16 @@ export async function loadChat(widget: WidgetState, conversationId: string) {
   ])
   const agentsAsLabeledAgents: LabeledAgent[] = agents
     .map((a) => ({ ...a, label: a.name, image: a.avatar ?? '', builtIn: a.visibility_level === 'built_in' }))
-  
+
   const agent = agentsAsLabeledAgents.find(a => a.id === last(chat.history)?.custom_agent?.id)
   const builtIn = !!last(chat.history ?? [])?.custom_agent?.built_in
   widget.chatTabs.add(new ChatState({
     id: chat.id,
-    initial: { features: widget.chatFeatures, label: chat.title, stack, workspace, agent: agent ? { 
-      ...agent, builtIn } : undefined },
+    initial: {
+      features: widget.chatFeatures, label: chat.title, stack, workspace, agent: agent ? {
+        ...agent, builtIn,
+      } : undefined,
+    },
     interceptors: widget.interceptors,
     entries: await Promise.all(chat.history?.map(async (item, index) => new ChatEntry({
       agentType: item.agent === 'USER' ? 'user' : 'bot',

package/src/views/KnowledgeSources.tsx

@@ -189,7 +189,7 @@ export const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit, workspaceId,
         hasNextPage={hasNextPage && !workspaceId}
         fetchNextPage={fetchNextPage}
         data={(ks: KnowledgeSourceItemResponse) => ({
-          idOrSlug: ks.slug, description: ks.description, name: ks.name, listFavorites,
+          idOrSlug: ks.id, description: ks.description, name: ks.name, listFavorites,
           onAddFavorite, onRemoveFavorite,
         })}
         emptyResults={<Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />}

package/src/views/MessageInput/ContextBar.tsx

@@ -21,7 +21,7 @@ const ContextBadge = ({ label, color, dismiss, onDismiss }: ContextBadgeProps) =
       appearance="none"
       onClick={onDismiss}
       title={dismiss}
-      arial-label={dismiss}
+      aria-label={dismiss}
       style={{ padding: '2px 0 2px 2px', color: 'inherit' }}
     />}
   </Badge>

package/src/views/MessageInput/ModelSwitcher/index.tsx

@@ -1,5 +1,5 @@
 import { CitricIconOutline, CitricIconSocial } from '@stack-spot/citric-icons'
-import { AsyncContent, Button, Column, FieldGroup, Icon, Input, Row } from '@stack-spot/citric-react'
+import { Button, Column, FieldGroup, Icon, Input, ProgressCircular, Row } from '@stack-spot/citric-react'
 import { SelectionList } from '@stack-spot/portal-components/SelectionList'
 import { agentToolsClient, genAiInferenceClient } from '@stack-spot/portal-network'
 import { useMemo, useState } from 'react'
@@ -31,7 +31,8 @@ export const ModelSwitcher = () => {
 
   return (
     <RowWrapperStyled>
-      <AsyncContent loading={isLoadingAgentData && isLoadingModels}>
+      {(isLoadingAgentData && isLoadingModels) ? 
+        <ProgressCircular /> : 
         <Button
           className="button-select-model"
           colorScheme="light"
@@ -46,8 +47,7 @@ export const ModelSwitcher = () => {
           />
           {modelName}
           <Icon icon="ChevronDown" group="fill" size="sm" />
-        </Button>
-      </AsyncContent>
+        </Button>}
       <SelectionList
         id="menuModelSwitcher"
         items={data || []}