@stack-spot/ai-chat-widget 1.8.5 → 1.10.0

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

@@ -1,9 +1,10 @@
-import { aiClient, StackspotAPIError, StreamCanceledError } from '@stack-spot/portal-network'
+import { aiClient, ChatResponseWithSteps, StackspotAPIError, StreamCanceledError } from '@stack-spot/portal-network'
 import { ChatResponse3 } from '@stack-spot/portal-network/api/ai'
 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'
 
 /**
@@ -15,7 +16,7 @@ import { genericSourcesToKnowledgeSources } from '../utils/knowledge-source'
  * @returns the TextChatEntry to build a ChatEntry.
  */
 function createEntryValueFromChatResponse(
-  response: Partial<ChatResponse3>,
+  response: Partial<ChatResponseWithSteps>,
   knowledgeSources: KnowledgeSource[] | undefined,
   agent: LabeledWithImage | undefined,
   includeDate = false,
@@ -28,6 +29,7 @@ function createEntryValueFromChatResponse(
     knowledgeSources,
     agent: agent,
     updated: includeDate ? new Date().toISOString() : undefined,
+    steps: response.steps,
   }
 }
 
@@ -72,7 +74,10 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
     } else {
       botEntry.setValue({
         ...botEntry.getValue(),
-        error: error instanceof StackspotAPIError ? error.translate() : (error.message ?? `${error}`),
+        error: treatHTMLInErrorMessage(
+          error instanceof StackspotAPIError ? error.translate() : (error.message ?? `${error}`),
+          error.status ?? 500,
+        ),
       })
     }
   }

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

@@ -29,6 +29,7 @@ export interface Props extends WithChildren {
   onNewFile?: CodeAction,
   onCopyCode?: CodeAction,
   language?: string,
+  showLineNumbers?: boolean,
 }
 
 const CodeBox = styled.code`
@@ -98,11 +99,12 @@ export const Code = ({
   language,
   children,
   showActionBar,
+  showLineNumbers = true,
   ...props
 }: Pick<CodeProps, 'className' | 'messageId'> & Props) => {
   const t = useTranslate(dictionary)
   const themeKind = useThemeKind()
-  const [showLines, setShowLines] = useState(true)
+  const [showLines, setShowLines] = useState(showLineNumbers)
   const match = /language-(\w+)/.exec(className || '')
   const computedLanguage = language ?? (match ?? [])[1]?.toLowerCase() ?? 'txt'
   const content = String(children ?? '').replaceAll(/\n\t/g, '\n').trim()
@@ -124,7 +126,7 @@ export const Code = ({
   }
 
   if (children === undefined) return <></>
-  if (!(/language-(\w+)/.exec(className || ''))) {
+  if (computedLanguage === 'txt') {
     return (
       <code {...props} className={className}>
         {children}
@@ -133,7 +135,7 @@ export const Code = ({
   }
 
   return (
-    <CodeBox className={['code-box', themeKind].join(' ')}>
+    <CodeBox className={['code-box', themeKind, className].join(' ')}>
       {showActionBar && (
         <div className="action-bar" role="toolbar">
           <IconButton

package/src/components/Modal.tsx

@@ -0,0 +1,87 @@
+import { Text } from '@citric/core'
+import { Times } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { AnimatedOpacity } from './AnimatedOpacity'
+
+interface Props {
+  children: React.ReactNode | React.ReactNode[],
+  title: React.ReactNode,
+  open: boolean,
+  onClose?: () => void,
+}
+
+const ModalContent = ({ title, children, onClose }: Omit<Props, 'open'>) => {
+  const t = useTranslate(dictionary)
+  return (
+    <div className="chat-modal">
+      <header>
+        {typeof title === 'string' ? <Text appearance="h6">{title}</Text> : title}
+        <IconButton aria-label={t.close} title={t.close} appearance="circle" onClick={onClose}><Times /></IconButton>
+      </header>
+      <article>{children}</article>
+    </div>
+  )
+}
+
+export const Modal = ({ title, onClose, open, children }: Props) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const [closestChat, setClosestChat] = useState<HTMLDivElement | undefined>()
+
+  useEffect(() => {
+    if (!closestChat) {
+      const chat = ref.current?.closest('.ai-chat-widget')
+      if (!chat) throw new Error('Could not find the chat widget (.ai-chat-widget) in the HTML tree.')
+      return setClosestChat(chat as HTMLDivElement)
+    }
+    if (!open) return
+    const chatWindow = closestChat?.querySelector('.chat-window')
+    const rightPanel = closestChat?.querySelector('.chat-right-panel')
+
+    function closeOnClickOutside(event: Event) {
+      const modal = closestChat?.querySelector('.chat-modal')
+      if (modal?.contains(event.target as Node)) return
+      onClose?.()
+    }
+
+    function onPressEsc(event: KeyboardEvent) {
+      if (event.key === 'Escape') onClose?.()
+    }
+
+    chatWindow?.setAttribute('inert', '')
+    rightPanel?.setAttribute('inert', '')
+    closestChat?.addEventListener('click', closeOnClickOutside)
+    document.addEventListener('keydown', onPressEsc)
+
+    return () => {
+      chatWindow?.removeAttribute('inert')
+      rightPanel?.removeAttribute('inert')
+      closestChat?.removeEventListener('click', closeOnClickOutside)
+      document.removeEventListener('keydown', onPressEsc)
+    }
+  }, [open])
+
+  return (
+    <div ref={ref}>
+      {closestChat && createPortal(
+        <AnimatedOpacity visible={open}>
+          <ModalContent title={title} onClose={onClose}>
+            {children}
+          </ModalContent>
+        </AnimatedOpacity>,
+        closestChat,
+      )}
+    </div>
+  )
+}
+
+const dictionary = {
+  en: {
+    close: 'Close',
+  },
+  pt: {
+    close: 'Fechar',
+  },
+} satisfies Dictionary

package/src/layout.css

@@ -129,9 +129,43 @@
   }
 }
 
+.chat-modal {
+  position: absolute;
+  top: 90px;
+  bottom: 20px;
+  right: 20px;
+  width: 20%;
+  min-width: 400px;
+  border-radius: 6px;
+  background-color: var(--light-400);
+  border: 1px solid var(--light-600);
+  overflow: auto;
+
+  > header {
+    padding: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
+  }
+}
+
 /* fixes placeholder description */
 .no-data-placeholder {
   > div > p {
     text-align: center;
   }
+}
+
+.input-phone .react-international-phone-country-selector-button {
+  background-color: var(--light-300);
+  border: 1px solid var(--primary-500);
+  border-right: none;
+}
+
+.input-phone.react-international-phone-input-container .react-international-phone-input {
+  background-color: var(--light-300);
+  border: 1px solid var(--primary-500);
+  border-left: none;
+  color: var(--light-contrastText);
 }

package/src/state/ChatEntry.ts

@@ -1,7 +1,13 @@
+import { OneOfColorSchemes } from '@citric/core'
 import { ColorPaletteName } from '@stack-spot/portal-theme'
 import { pull } from 'lodash'
 import { LabeledWithImage } from './types'
 
+export interface ActionDataClick {
+  name?: string, 
+  value?: string[],
+}
+
 export interface SerializableAction {
   /**
    * The text for the button or anchor.
@@ -14,7 +20,7 @@ export interface SerializableAction {
   /**
    * The URL if the action is a link. The content of the user message otherwise.
    */
-  exec: string,
+  exec?: string,
 }
 
 export interface ChatAction extends SerializableAction {
@@ -22,6 +28,22 @@ export interface ChatAction extends SerializableAction {
    * @default primary
    */
   appearance?: 'primary' | 'secondary',
+  /**
+   * @default inverse
+   */
+  colorScheme?: OneOfColorSchemes,
+  /**
+   * @default false
+   */
+  hideWhenNotLast?: boolean,
+  /**
+   * @default false
+   */
+  disabled?: boolean,
+  /**
+   * @default button
+   */
+  buttonType?: 'submit' | 'button',
 }
 
 export interface KnowledgeSource {
@@ -31,11 +53,33 @@ export interface KnowledgeSource {
   documentId: string,
 }
 
+export interface AgentTool {
+  id: string,
+  name: string,
+  description?: string,
+  image?: string,
+  duration?: number,
+  input?: string,
+  output?: string,
+}
+
+export interface ChatEntryStep {
+  id: string,
+  type: 'planning' | 'step' | 'answer',
+  input?: string,
+  output?: string,
+  status: 'pending' | 'running' | 'success' | 'error',
+  duration?: number,
+  tools?: AgentTool[],
+}
+
 export interface TextChatEntry {
   /**
-   * "text" for simple unformatted paragraphs. "md" for markdown.
+   * "text" for simple unformatted paragraphs. "md" for markdown. 
+   * "input-text" for text inputs, 'input-radio' and "input-checkbox" for radio and checkbox inputs,
+   * "input-phone" for phone formatted inputs and "button-list" for a list of buttons in which only one is selected
    */
-  type: 'text' | 'md',
+  type: 'text' | 'md' | 'input-text' | 'input-radio' | 'button-list' | 'input-checkbox' | 'input-phone',
   /**
    * If the message was typed by the AI agent (bot), the user or the system (not currently in use).
    */
@@ -48,6 +92,10 @@ export interface TextChatEntry {
    * The content of the message.
    */
   content: string,
+  /**
+   * A content that is not shown to the user, it is used only to share data.
+   */
+  hiddenContent?: string[],
   /**
    * The knowledge sources used to create the message.
    */
@@ -76,6 +124,30 @@ export interface TextChatEntry {
    * Whether or not to show this chat entry as a card.
    */
   card?: boolean,
+  /**
+   * This entry may contain steps. If so, specify them in this array.
+   */
+  steps?: ChatEntryStep[],
+  /*
+   * Options for radio or button type.
+   */
+  options?: { color?: OneOfColorSchemes, label: string, value?: string}[],
+  /**
+   * Name to be used in input type fields.
+   */
+  name?: string,
+  /**
+   * Whether or not a input field is required.
+   */
+  required?: boolean,
+  /**
+   * The validations of input fields.
+   */
+  validations?: {
+    minLength?: number,
+    maxLength?: number,
+    pattern?: string,
+  },
 }
 
 type ChatEntryListener = (value: TextChatEntry) => void
@@ -104,13 +176,16 @@ export class ChatEntry {
    * Utility function to create a user entry.
    * @param content the message's content.
    * @param isMd whether or not this should be rendered as markdown.
+   * @param hiddenContent the message's content.
    * @returns a new ChatEntry.
    */
-  static createUserEntry(content: string, isMd = false) {
+  static createUserEntry(content: string, isMd = false, fieldName?: string, hiddenContent?: string[]) {
     return new ChatEntry({
       agentType: 'user',
       type: isMd ? 'md' : 'text',
       content,
+      name: fieldName,
+      hiddenContent, 
       updated: new Date().toISOString(),
     })
   }

package/src/state/WidgetState.ts

@@ -13,11 +13,15 @@ export interface WidgetProperties {
   /**
    * Current content of the right panel. Undefined for closed right panel.
    */
-  panel?: 'stack' | 'workspace' | 'agent' | 'ks' | 'editor' | 'history' | 'ks-details',
+  panel?: 'stack' | 'workspace' | 'agent' | 'ks' | 'editor' | 'history' | 'ks-details' | 'tools',
   /**
    * KS to use when the right panel "ks-details" is open.
    */
   currentKSInPanel?: { name: string, slug: string, score: number, documentId: string },
+  /**
+   * The message to show in the tools panel.
+   */
+  currentMessageInToolsPanel?: { chatId: string, messageId: number },
   /**
    * Whether or not the widget is in its minimized version.
    */
@@ -82,7 +86,7 @@ export class WidgetState extends ObservableState<WidgetProperties> {
       quickCommandQuestionsInterceptor,
       createQuickCommandInterceptor(this, () => loader.__getMonacoInstance()?.editor),
       sendMessageInterceptor,
-    ]
+    ],
     this.createChat()
   }
 

package/src/utils/error.ts

@@ -0,0 +1,56 @@
+import { getLanguage } from '@stack-spot/portal-translate'
+
+const httpErrors: Record<'en' | 'pt', Record<number, string>> = {
+  en: {
+    400: 'Bad Request',
+    401: 'Unauthorized',
+    403: 'Forbidden',
+    404: 'Not Found',
+    405: 'Method Not Allowed',
+    406: 'Not Acceptable',
+    408: 'Request Timeout',
+    409: 'Conflict',
+    410: 'Gone',
+    411: 'Length Required',
+    413: 'Payload Too Large',
+    414: 'URI Too Long',
+    415: 'Unsupported Media Type',
+    429: 'Too Many Requests',
+    500: 'Internal Server Error',
+    501: 'Not Implemented',
+    502: 'Bad Gateway',
+    503: 'Service Unavailable',
+    504: 'Gateway Timeout',
+    505: 'HTTP Version Not Supported',
+  },
+  pt: {
+    400: 'Requisição Inválida',
+    401: 'Não Autorizado',
+    403: 'Proibido',
+    404: 'Não Encontrado',
+    405: 'Método Não Permitido',
+    406: 'Não Aceitável',
+    408: 'Tempo de Requisição Esgotado',
+    409: 'Conflito',
+    410: 'Indisponível',
+    411: 'Comprimento Necessário',
+    413: 'Carga Muito Grande',
+    414: 'URI Muito Longa',
+    415: 'Tipo de Mídia Não Suportado',
+    429: 'Muitas Requisições',
+    500: 'Erro Interno do Servidor',
+    501: 'Não Implementado',
+    502: 'Gateway Inválido',
+    503: 'Serviço Indisponível',
+    504: 'Tempo de Gateway Esgotado',
+    505: 'Versão HTTP Não Suportada',
+  },
+}
+
+function getGenericErrorBasedOnStatus(status: number) {
+  return httpErrors[getLanguage()][status] ?? `Unknown error. Status code: ${status}.`
+}
+
+export function treatHTMLInErrorMessage(text: string, status: number) {
+  return (!text.includes('<html>')) ? text : getGenericErrorBasedOnStatus(status)
+}

package/src/views/Chat/ChatMessage.tsx

@@ -1,9 +1,11 @@
-import { Button, IconBox, Text } from '@citric/core'
+import { Box, Button, Checkbox, Flex, IconBox, Input, Label, Radio, Text } from '@citric/core'
 import { Copy, Dislike, DislikeFill, Like, LikeFill, TimesCircle } from '@citric/icons'
 import { Avatar, Badge, IconButton } from '@citric/ui'
 import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { Dispatch, useCallback, useMemo, useRef, useState } from 'react'
+import { PhoneInput } from 'react-international-phone'
+import 'react-international-phone/style.css'
 import { Markdown } from '../../components/Markdown'
 import { useChatEntry, useCurrentChat, useWidget } from '../../context/hooks'
 import { ChatEntry, SerializableAction, TextChatEntry } from '../../state/ChatEntry'
@@ -11,6 +13,7 @@ import { useDateFormatter } from '../../utils/date'
 import { AgentInfo } from './AgentInfo'
 import { useChatScrollToBottomEffect } from './chat-scroll'
 import { onCopyAll, onCopyCode, onLikeOrDislike } from './events'
+import { StepsList } from './StepsList'
 
 interface Props {
   /**
@@ -28,12 +31,98 @@ interface Props {
   isLast: boolean,
 }
 
+interface RenderInputsEntryProps { 
+  isLast: boolean, 
+  entry: TextChatEntry, 
+  value: string[], 
+  setValue: Dispatch<React.SetStateAction<string[]>>,
+  labels: string[], 
+  setLabels: Dispatch<React.SetStateAction<string[]>>,
+}
+
+const RenderInputsEntry = ({ isLast, entry, value, setValue, setLabels }: RenderInputsEntryProps) => {
+  const chat = useCurrentChat()
+
+  const renderInputs = () => {
+    if (entry.type === 'input-text') {
+      return <Input name={entry.name} {...entry.validations} onChange={(data) => setValue([data.target.value])} required={entry.required} />
+    }
+
+    if (entry.type === 'input-radio') {
+      return <Flex>
+        {entry.options?.map((option) => (<Box w={6} key={option.value}>
+          <Label htmlFor={option.value} colorScheme="light.contrastText">
+            <Radio name={entry.name} id={option.value} onChange={(data) => {
+              if (data.target.checked) {
+                setValue([option.label])
+                option.value && setLabels([option.value])
+              } else {
+                setValue([])
+              }
+            }} />
+            <Text ml={3}>{option.label}</Text>
+          </Label>
+        </Box>))}
+      </Flex>
+    }
+
+    if (entry.type === 'button-list') {
+      return <Flex>
+        {entry.options?.map((item) => (<Button key={item.label} colorScheme={item.color} 
+          onClick={() => {
+            item.value && chat.pushMessage(
+              ChatEntry.createUserEntry(item.value, false, entry.name, item?.label ? [item?.label] : undefined),
+            )
+          }}>
+          {item.label}
+        </Button>))
+        }</Flex>
+    }
+
+    if (entry.type === 'input-checkbox') {
+      return <Flex>
+        {entry.options?.map((option) => (
+          <Flex w={6} key={option.label}>
+            <Checkbox name={entry.name} key={option.label} onChange={(data) => {
+              if (data.target.checked) {
+                setValue([...value, option.label])
+                option.value && setLabels([option.value])
+              } else {
+                const newValue = value.filter(((item) => item !== option.label))
+                setValue([...newValue])
+              }
+            }}/>
+            <Text ml={3}>{option.label}</Text>
+          </Flex>))}
+      </Flex>
+    }
+
+    if (entry.type === 'input-phone') {
+      return (<PhoneInput
+        defaultCountry="br"
+        value={value[0]}
+        onChange={(phone) => setValue([phone])}
+        className="input-phone"
+        placeholder="11961234567"
+      />)
+    }
+    return <p className="plain-text">{entry.content}</p>
+  }
+
+  return <Flex flexDirection="column">
+    <Text appearance="body2" mb={4}>{entry.content}</Text>
+    {isLast && renderInputs()}
+  </Flex>
+}
+
 /**
  * Renders a message (ChatEntry) in the chat.
  */
 export const ChatMessage = ({ message, username, isLast }: Props) => {
   const t = useTranslate(dictionary)
   const [liked, setLiked] = useState<boolean | undefined>()
+  const [value, setValue] = useState<string[]>([])
+  const [labels, setLabels] = useState<string[]>([])
   const entry = useChatEntry(message)
   const dateFormatter = useDateFormatter()
   const userInfo = entry.agentType === 'user' ? <Avatar size="xs">{username}</Avatar> : <AgentInfo agent={entry.agent} />
@@ -50,13 +139,17 @@ export const ChatMessage = ({ message, username, isLast }: Props) => {
     widget.set('panel', 'ks-details')
   }, [])
 
-  const runAction = useCallback((action: SerializableAction) => {
+  const runAction = (action: SerializableAction) => {
     if (action.type === 'link') {
       window.open(action.exec, '_blank')
     } else {
-      chat.pushMessage(ChatEntry.createUserEntry(action.exec))
+      if (action.exec) {
+        chat.pushMessage(ChatEntry.createUserEntry(action.exec))
+      } else {
+        value && chat.pushMessage(ChatEntry.createUserEntry(value.toString(), false, entry.name, labels))
+      }
     }
-  }, [])
+  }
 
   const { like, dislike } = useMemo(() => {
     async function feedback(like: boolean) {
@@ -82,35 +175,45 @@ export const ChatMessage = ({ message, username, isLast }: Props) => {
     }
   }
 
-  return (entry.content || entry.error) && (
+  const renderContent = () => {
+    if (entry.type === 'md') {
+      return <Markdown onCopyCode={(code) => onCopyCode(code, entry.messageId ?? '', chat)}>{entry.content}</Markdown>
+    }
+    if (entry.type === 'text') {
+      return <p className="plain-text">{entry.content}</p>
+    }
+
+    return <RenderInputsEntry entry={entry} isLast={isLast} value={value} setValue={setValue} setLabels={setLabels} labels={labels} />
+  }
+
+  return (entry.content || entry.error || !!entry.steps?.length) && (
     <li className={entry.agentType} ref={ref}>
       <div className="chat-message" ref={chatRef} onKeyDown={handleKeyDown} tabIndex={0}>
         <div className="user-info">{userInfo}</div>
-        {entry.content && <div className={listToClass(['message-content', entry.card && 'card'])}>
-          {entry.badges?.length && <div className="badges">
+        {(entry.content || entry.steps) && <div className={listToClass(['message-content', entry.card && 'card'])}>
+          {!!entry.badges?.length && <div className="badges">
             {entry.badges.map((b, index) => <Badge key={index} palette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
           </div>}
-          {entry.type === 'md'
-            ? <Markdown onCopyCode={(code) => onCopyCode(code, entry.messageId ?? '', chat)}>{entry.content}</Markdown>
-            : <p className="plain-text">{entry.content}</p>
-          }
+          {renderContent()}
           {entry.actions?.length && (
             <div className="actions">
               {entry.actions.map(
-                (a, index) => (
-                  <Button
+                (a, index) => (<>
+                  {(!a.hideWhenNotLast || isLast) && <Button
                     key={index}
                     appearance={a.appearance === 'primary' ? 'contained' : 'outlined'}
-                    colorScheme="inverse"
+                    colorScheme={a.colorScheme ? a.colorScheme : 'inverse'}
                     onClick={() => runAction(a)}
-                    disabled={!isLast}
+                    disabled={(entry.required && !value.length) ?? !isLast}
+                    type={a.buttonType ?? 'button'}
                   >
                     {a.title}
-                  </Button>
-                ),
+                  </Button>}
+                </>),
               )}
             </div>
           )}
+          {!!entry.steps?.length && <StepsList steps={entry.steps} chatId={chat.id} messageId={message.id} />}
         </div>}
       </div>
       {entry.error && (