@stack-spot/ai-chat-widget 0.11.0 → 1.0.0-dev.1768324407795

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

@@ -1,44 +1,272 @@
-import { aiClient, StackspotAPIError } from '@stack-spot/portal-network'
-import { ChatEntry, KnowledgeSource } from '../state/ChatEntry'
+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'
 import { ChatState } from '../state/ChatState'
+import { LabeledWithImage } from '../state/types'
 import { buildConversationContext } from '../utils/chat'
+import { treatHTMLInErrorMessage } from '../utils/error'
 import { genericSourcesToKnowledgeSources } from '../utils/knowledge-source'
+import { planningToolDictionaryHelper } from '../utils/planning-tool'
 
+/**
+ * Transforms a chat response from the backend into a chat entry that can be added to the chat.
+ * @param response the original response.
+ * @param knowledgeSources the knowledge sources already in format used by the chat.
+ * @param agent the current chat agent.
+ * @param tools the tools for the current chat agent.
+ * @param includeDate whether or not to include the date in the chat entry.
+ * @returns the TextChatEntry to build a ChatEntry.
+ */
+export function createEntryValueFromChatResponse(
+  response: Partial<ChatResponseWithSteps> & ChatResponseWithPMResources,
+  knowledgeSources: KnowledgeSource[] | undefined,
+  agent: LabeledWithImage | undefined,
+  includeDate = false,
+): TextChatEntry {
+  const entry = {
+    agentType: 'bot',
+    type: 'md',
+    content: response.answer ?? '',
+    messageId: response.message_id ?? undefined,
+    knowledgeSources,
+    agent: agent,
+    updated: includeDate ? new Date().toISOString() : undefined,
+    steps: response.steps,
+    tools: response.tools,
+    opportunities: response.opportunities,
+    hypothesis: response.hypothesis,
+    prfaq: response.prfaq,
+    done: false,
+  }
+  return entry as TextChatEntry
+}
+
+function buildPrompt(content: string, data?: any) {
+  if (data === undefined || data === '' || data === null) return content || '.' // prevents empty strings
+  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 })
+    }
+  }
+}
+
+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 })
+      }
+    }
+  }
+
+  const hasPlanning = botEntry.getValue().hasPlanning || chat.get('isPlaning')
+  botEntry.setValue({ ...createEntryValueFromChatResponse(value, knowledgeSources, chat.get('agent')), hasPlanning })
+}
+
+/**
+ * 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 } = entry.getValue()
+  const { agentType, content, data } = entry.getValue()
   if (agentType !== 'user') return
-  const context = buildConversationContext(chat)
+  const context = buildConversationContext(chat, entry)
   chat.set('isLoading', true)
-  const isFirstMessage = chat.getMessages().length === 1
-  if (isFirstMessage) chat.set('label', content)
-  const stream = aiClient.sendChatMessage({ context, user_prompt: content.replace(/^\s*\\(\\|\/)/, '$1') })
+  const untitled = chat.untitled
+  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 stream = aiClient.sendChatMessage({ context, user_prompt: buildPrompt(content, data) })
   signal.addEventListener('abort', () => stream.cancel())
   const botEntry = ChatEntry.createStreamedBotEntry()
-  chat.pushMessage(botEntry)
+  // 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 => {
-    if (value.sources?.length !== knowledgeSources?.length) {
-      knowledgeSources = genericSourcesToKnowledgeSources(value.sources)
-    }
-    botEntry.setValue({
-      agentType: 'bot',
-      type: 'md',
-      content: value.answer ?? '',
-      messageId: value.message_id ?? undefined,
-      knowledgeSources,
-      updated: new Date().toISOString(),
-      agent: chat.get('agent'),
-    })
+    helperSendMessage(messages, value, chat, botEntry, knowledgeSources)
   })
+
+  let finalValue: Partial<ChatResponse3> | undefined
   try {
-    await stream.getValue()
-    aiClient.chat.invalidate({ conversationId: chat.id })
-    if (isFirstMessage) aiClient.chats.invalidate()
+    finalValue = await stream.getValue()
+
+    const lastPlanningAwaiting = getLastPlanningAwaiting(messages)
+    if (lastPlanningAwaiting) {
+      const value = lastPlanningAwaiting.getValue()
+      value.content = finalValue.answer || value.content
+      lastPlanningAwaiting.setValue(value)
+    }
+    // if the streaming feature is not enabled, we only add the chat entry once the streaming has finished
+    if (!chat.get('features').streaming) {
+      chat.pushMessage(botEntry)
+    }
   } catch (error: any) {
+    if (error instanceof StreamCanceledError) {
+      finalValue = stream.getPartialValue()
+    } else {
+      botEntry.setValue({
+        ...botEntry.getValue(),
+        error: treatHTMLInErrorMessage(
+          error instanceof StackspotAPIError ? error.translate() : (error.message ?? `${error}`),
+          error.status ?? 500,
+        ),
+      })
+    }
+  }
+  if (finalValue?.answer) {
     botEntry.setValue({
-      ...botEntry.getValue(),
-      error: error instanceof StackspotAPIError ? error.translate() : (error.message ?? `${error}`),
+      ...createEntryValueFromChatResponse(finalValue, botEntry.getValue().knowledgeSources, chat.get('agent'), true),
+      hasPlanning: botEntry.getValue().hasPlanning,
     })
+    aiClient.chat.invalidate({ conversationId: chat.id })
+    if (isFirstMessage) {
+      // if the chat has a title and this was its first message, we need to rename it according to the title, otherwise, the backend will
+      // keep the name generated by default.
+      if (!untitled) {
+        try {
+          await aiClient.renameChat.mutate({
+            conversationId: chat.id,
+            conversationUpdateTitleRequest: { title: chat.get('label') },
+          })
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.warn('Failed to rename chat:', chat.get('label'), error)
+        }
+      }
+      // this makes sure to update the chat history
+      aiClient.chats.invalidate()
+    }
   }
+  botEntry.setValue({ ...botEntry.getValue(), done: true })
   chat.set('isLoading', false)
 }

package/src/components/AdaptiveTextArea.tsx

@@ -1,34 +1,59 @@
-import { Textarea } from '@citric/core'
-import { useEffect, useRef } from 'react'
+/* eslint-disable react/display-name */
+import { Textarea } from '@stack-spot/citric-react'
+import { forwardRef, useEffect, useRef } from 'react'
 import { PropsOf } from '../types'
 
 interface Props extends PropsOf<typeof Textarea> {
+  /**
+   * A function to run whenever the height of the text area increases.
+   */
   onIncreaseSize?: () => void,
+  /**
+   * A function to run whenever the text area value becomes empty.
+   */
   onResetSize?: () => void,
-  maxHeight?: number,
+  /**
+   * The maximum height this textarea can get to.
+   */
+  maxHeight?: () => number,
 }
 
-export const AdaptiveTextArea = ({ value, onIncreaseSize, onResetSize, maxHeight, style, ...props }: Props) => {
-  const ref = useRef<HTMLTextAreaElement>(null)
+/**
+ * The adaptive textarea grows in height whenever needed until the maximum height is reached.
+ */
+export const AdaptiveTextArea = forwardRef<HTMLTextAreaElement, Props>((
+  { value, onIncreaseSize, onResetSize, style, maxHeight, ...props },
+  externalRef,
+) => {
+  const localRef = useRef<HTMLTextAreaElement>(null)
+  const ref = externalRef as React.RefObject<HTMLTextAreaElement> ?? localRef
+
+  const handleIncreaseSize = (newHeight: number) => {
+    onIncreaseSize?.()
+    if (maxHeight && newHeight > maxHeight?.() && ref.current) {
+      ref.current.style.overflowY = 'auto'
+    }
+  }
 
   useEffect(() => {
     if (!ref.current) return
     const height = ref.current.clientHeight
     const scroll = ref.current.scrollHeight
-    if (!maxHeight || height < maxHeight) {
+    const computedMaxHeight = maxHeight?.() ?? 0
+    if (!maxHeight || height < computedMaxHeight) {
       ref.current.style.overflowY = 'hidden'
       if (height < scroll) {
         ref.current.style.height = `${scroll}px`
-        onIncreaseSize?.()
+        handleIncreaseSize(scroll)
       }
-    } else if (maxHeight) {
+    } else if (computedMaxHeight) {
       ref.current.style.overflowY = 'auto'
     }
     if (!value) {
       ref.current.style.height = ''
       onResetSize?.()
     }
-  }, [value, maxHeight])
+  }, [value])
 
-  return <Textarea {...props} ref={ref} value={value} style={{ ...style, maxHeight }} />
-}
+  return <Textarea {...props} ref={ref} value={value} style={{ ...style, maxHeight: maxHeight?.() }} />
+})

package/src/components/AgentCard/AgentCardCreate.tsx

@@ -0,0 +1,42 @@
+import { IconBox, Link, Text } from '@stack-spot/citric-react'
+import { theme } from '@stack-spot/portal-theme'
+import { useTranslate } from '@stack-spot/portal-translate'
+import { styled } from 'styled-components'
+import { dictionary } from './dictionary'
+
+const StyledCard = styled(Link)`
+  cursor: pointer;
+  border-radius: 8px;
+  transition: background-color 0.3s;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  border: 1px solid ${theme.color.light[600]};
+  text-decoration: none;
+  padding-right: 16px !important;
+
+  &:hover {
+    background-color: ${theme.color.light[500]};
+  }
+
+  .text-box {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    color: ${theme.color.light['contrastText']}
+  }
+`
+
+export const AgentCardCreate = ({ urlCreateAgent }: { urlCreateAgent: string  }) => {
+  const t = useTranslate(dictionary)
+  return (
+    <StyledCard href={urlCreateAgent} role="link" tabIndex={0} className={'agent-card'}>
+      <IconBox appearance="square" size="md" icon="PlusMini" />
+      <div className="text-box">
+        <Text appearance="body2">
+          {`${t.create} ${t.agent}`}
+        </Text>
+      </div>
+    </StyledCard>
+  )
+}

package/src/components/AgentCard/dictionary.ts

@@ -0,0 +1,25 @@
+import { Dictionary } from '@stack-spot/portal-translate'
+
+export const dictionary = {
+  en: {
+    'built_in': 'Built-in',
+    'recently_used': 'Recent',
+    workspace: 'Spot',
+    personal: 'Personal',
+    account: 'Account',
+    shared: 'Shared',
+    agent: 'Agent',
+    create: 'Create',
+  },
+  pt: {
+    'built_in': 'Embutido',
+    'recently_used': 'Recente',
+    workspace: 'Spot',
+    personal: 'Personal',
+    account: 'Conta',
+    shared: 'Compartilhado',
+    agent: 'Agente',
+    create: 'Criar',
+  },
+} satisfies Dictionary
+

package/src/components/AgentCard/index.tsx

@@ -0,0 +1,82 @@
+import { Card, ImageWithFallback, Text } from '@stack-spot/citric-react'
+import { listToClass, theme } from '@stack-spot/portal-theme'
+import { useTranslate } from '@stack-spot/portal-translate'
+import { styled } from 'styled-components'
+import placeholder from '../../assets/placeholder.png'
+import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
+import { LabeledAgent } from '../../state/types'
+import { dictionary } from './dictionary'
+
+const StyledCard = styled(Card)`
+  cursor: pointer;
+  border-radius: 8px;
+  transition: background-color 0.3s;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  &:hover, &:focus {
+    background-color: ${theme.color.light[500]} !important;
+  }
+
+  &.active {
+    background-color: ${theme.color.light[600]} !important;
+  }
+
+  img {
+    width: 125px;
+    height: 130px;
+    border-radius: 8px;
+  }
+  
+  h6 {
+    max-width: 125px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .agent-type {
+    display: flex;
+    gap: 4px;
+  }
+
+  .text-box {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+`
+
+export const AgentCard = ({ agent }: { agent: LabeledAgent }) => {
+  const t = useTranslate(dictionary)
+  const chat = useCurrentChat()
+  const currentAgent = useCurrentChatState('agent')
+    
+  return (
+    <StyledCard
+      onClick={() => chat.set('agent', agent)} 
+      role="button"
+      tabIndex={0}
+      bgLevel={400}
+      className={listToClass(['agent-card', currentAgent?.id === agent.id && 'active'])}
+    >
+      <ImageWithFallback src={agent.image ?? ''} fallback={<img src={placeholder} />} />
+      <div className="text-box">
+        {agent.visibility_level && (
+          <div className="agent-type">
+            <Text appearance="microtext1" color="light.700">
+              {t[agent.visibility_level.toLowerCase() as keyof typeof t]}
+            </Text>
+            <Text appearance="microtext1">
+              {t.agent}
+            </Text>
+          </div>
+        )}
+        <Text appearance="h6">
+          {agent.label}
+        </Text>
+      </div>
+    </StyledCard>
+  )
+}

package/src/components/AnimatedOpacity.tsx

@@ -0,0 +1,55 @@
+/* eslint-disable react/display-name */
+import { listToClass } from '@stack-spot/portal-theme'
+import { forwardRef, useEffect, useRef, useState } from 'react'
+import { styled } from 'styled-components'
+
+interface Props {
+  children: React.ReactNode | React.ReactNode[],
+  durationMs?: number,
+  visible: boolean,
+}
+
+const Styled = styled.div<{ $durationMs: number }>`
+  opacity: 0;
+  transition: opacity ${({ $durationMs }) => $durationMs / 1000}s;
+  &.visible {
+    opacity: 1;
+  }
+`
+
+export const AnimatedOpacity = forwardRef<HTMLDivElement, Props>(({ children, visible, durationMs = 300 }, ref) => {
+  const [content, setContent] = useState(visible ? children : null)
+  const animation = useRef<number | undefined>()
+  const previousVisible = useRef<boolean | undefined>()
+
+  useEffect(() => {
+    const isFirstRender = previousVisible === undefined
+    const isChangingVisibility = visible !== previousVisible.current
+    previousVisible.current = visible
+    if (isFirstRender) return
+    if (isChangingVisibility) {
+      if (animation.current) {
+        window.clearTimeout(animation.current)
+        animation.current = undefined
+        return setContent(visible ? children : null)
+      }
+      if (visible) setContent(children)
+      animation.current = window.setTimeout(() => {
+        if (!visible) setContent(null)
+        animation.current = undefined
+      }, durationMs)
+    } else if (visible || !animation.current) {
+      setContent(visible ? children : null)
+    }
+
+    return () => {
+      window.clearTimeout(animation.current)
+    }
+  }, [visible, children])
+
+  return (
+    <Styled ref={ref} $durationMs={durationMs} className={listToClass(['fade-animation', visible && 'visible'])}>
+      {content}
+    </Styled>
+  )
+})

package/src/components/AutoFocus.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable react/display-name */
+import { focusFirstChild, TagPriorityElement } from '@stack-spot/portal-components'
+import { forwardRef, RefObject, useEffect, useRef } from 'react'
+import { styled } from 'styled-components'
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * A delay in ms to focus the first focusable element.
+   */
+  delay?: number,
+  /**
+   * Instead of focusing the first element overall, focus the first according to this list of priorities.
+   * 
+   * 'other' means elements that are normally not focusable, but have positive tabIndex values.
+   */
+  priority?: TagPriorityElement[],
+  /**
+   * Ignores any element that matches this query selector.
+   */
+  ignore?: string,
+}
+
+const FlexibleDiv = styled.div`
+  overflow: hidden;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+`
+
+/**
+ * Focus the first focusable child as soon as the component mounts.
+ */
+export const AutoFocus = forwardRef<HTMLDivElement, Props>(({ children, delay = 0, priority, ignore, ...props }, externalRef) => {
+  const localRef = useRef<HTMLDivElement>(null)
+  const ref = externalRef as RefObject<HTMLDivElement> ?? localRef
+
+  useEffect(() => {
+    setTimeout(() => focusFirstChild(ref.current, { priority, ignore }), delay)
+  }, [])
+
+  return <FlexibleDiv ref={ref} {...props}>{children}</FlexibleDiv>
+})