@stack-spot/ai-chat-widget 1.0.0-dev.1769120820021 → 1.0.0-dev.1769797270860

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/Editor.tsx

@@ -21,6 +21,7 @@ const EditorBox = styled.div`
     --vscode-editor-background: transparent !important;
     --vscode-editorGutter-background: transparent !important;
   }
+
 `
 
 const TitleBox = styled.div`
@@ -69,7 +70,7 @@ const Title = () => {
 
   return (
     <TitleBox>
-      <Text appearance="h5">Editor</Text>
+      <Text appearance="h5" tag="h2" >Editor</Text>
       <Select
         options={languages}
         renderLabel={l => l?.label ?? defaultLanguage}
@@ -91,6 +92,22 @@ const EditorPanel = () => {
   const selectionObserver = useRef<IDisposable | undefined>()
 
   const setup: OnMount = useCallback(async (editor) => {
+    const container = editor.getContainerDomNode()
+    const el = container.querySelector('.native-edit-context')
+    if (el && el.hasAttribute('aria-label')) {
+      el.removeAttribute('aria-label')
+    }
+
+    const observer = new MutationObserver(() => {
+      const el = container.querySelector('.native-edit-context')
+      if (el && el.hasAttribute('aria-label')) {
+        el.removeAttribute('aria-label')
+      }
+    })
+    observer.observe(container, { subtree: true, attributes: true, childList: true })
+
+    editor.onDidDispose(() => observer.disconnect())
+
     selectionObserver.current = editor.onDidChangeCursorSelection(debounce((e) => {
       const selectedText = editor.getModel()?.getValueInRange(e.selection)
       chat.set('codeSelection', selectedText?.trim() ? selectedText : undefined)
@@ -110,14 +127,14 @@ const EditorPanel = () => {
       selectionObserver.current?.dispose()
     }
   }, [])
-  
+
   return (
     <EditorBox>
       <MonacoEditor
         height="100%"
         language={language}
         theme={themeKind === 'dark' ? 'vs-dark' : 'light'}
-        options={{ minimap: { enabled: false } }}
+        options={{ minimap: { enabled: false }, accessibilitySupport: 'off' }}
         value={value}
         onChange={v => chat.set('code', v)}
         loading={<ProgressCircular />}

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>