@stack-spot/ai-chat-widget 0.9.0 → 0.11.0

package/src/components/Code.tsx

@@ -2,11 +2,11 @@
  * Copied from the extension's webview.
  */
 
-import { AddCode, ChevronDoubleDown, Copy } from '@citric/icons'
+import { AddCode, ChevronDoubleDown, Collapse, Copy } from '@citric/icons'
 import { IconButton } from '@citric/ui'
 import { theme, useThemeKind } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { CSSProperties } from 'react'
+import { CSSProperties, useState } from 'react'
 import { ExtraProps } from 'react-markdown'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { materialDark, vs } from 'react-syntax-highlighter/dist/esm/styles/prism'
@@ -102,6 +102,7 @@ export const Code = ({
 }: Pick<CodeProps, 'className' | 'messageId'> & Props) => {
   const t = useTranslate(dictionary)
   const themeKind = useThemeKind()
+  const [showLines, setShowLines] = useState(true)
   const match = /language-(\w+)/.exec(className || '')
   const computedLanguage = language ?? (match ?? [])[1]?.toLowerCase() ?? 'txt'
   const content = String(children ?? '').replaceAll(/\n\t/g, '\n').trim()
@@ -135,6 +136,14 @@ export const Code = ({
     <CodeBox className={['code-box', themeKind].join(' ')}>
       {showActionBar && (
         <div className="action-bar" role="toolbar">
+          <IconButton
+            aria-label={showLines ? t.hideLines : t.showLines}
+            title={showLines ? t.hideLines : t.showLines}
+            onClick={() => setShowLines(v => !v)}
+            style={{ position: 'relative', transform: showLines ? undefined : 'rotate(180deg)', transition: 'transform 0.2s' }}
+          >
+            <Collapse />
+          </IconButton>
           <IconButton
             aria-label={t.copy}
             title={t.copy}
@@ -176,7 +185,7 @@ export const Code = ({
           style={themeKind === 'dark' ? materialDark : vs}
           language={computedLanguage}
           PreTag="div"
-          showLineNumbers={true}
+          showLineNumbers={showLines}
           lineNumberContainerStyle={lineNumbersStyle}
           lineNumberStyle={lineNumbersStyle}
         >
@@ -192,10 +201,14 @@ const dictionary = {
     copy: 'Copy code to the clipboard',
     insert: 'Inject code into editor',
     newFile: 'Creates a new file with this code as its content',
+    hideLines: 'Hide line numbers',
+    showLines: 'Show line numbers',
   },
   pt: {
     copy: 'Copiar código para a área de transferência',
     insert: 'Inserir código no editor',
     newFile: 'Criar um novo arquivo com este código como conteúdo',
+    hideLines: 'Esconder números das linhas',
+    showLines: 'Mostrar números das linhas',
   },
 } satisfies Dictionary

package/src/state/ChatEntry.ts

@@ -1,3 +1,4 @@
+import { ColorPaletteName } from '@stack-spot/portal-theme'
 import { pull } from 'lodash'
 import { LabeledWithImage } from './types'
 
@@ -27,16 +28,15 @@ export interface KnowledgeSource {
 export interface TextChatEntry {
   type: 'text' | 'md',
   agentType: 'bot' | 'user' | 'system',
-  // image?: string,
   actions?: ChatAction[],
-  subtitle?: string,
   content: string,
   knowledgeSources?: KnowledgeSource[],
   updated?: string,
   agent?: LabeledWithImage,
   messageId?: string,
   error?: string,
-  // customInput?: CustomInputResponse,
+  badges?: { color?: ColorPaletteName, label: string }[],
+  card?: boolean,
 }
 
 type ChatEntryListener = (value: TextChatEntry) => void
@@ -46,20 +46,15 @@ let nextId = 0
 export class ChatEntry {
   readonly id: number
   private value: TextChatEntry
-  private streamFinished: boolean
   private listeners: ChatEntryListener[] = []
-  abort: () => void
 
   /**
    * @param value the value of the entry.
    * @param isStreamed whether or not this entry is streamed. Defaults to false.
-   * @param abort an abort function to cancel the transmission of this chat entry. Specially useful for canceling streamings.
    */
-  constructor(value: TextChatEntry, isStreamed = false, abort = () => {}) {
+  constructor(value: TextChatEntry) {
     this.id = nextId++
     this.value = value
-    this.streamFinished = !isStreamed
-    this.abort = abort
   }
 
   static createUserEntry(content: string, isMd = false) {
@@ -71,8 +66,8 @@ export class ChatEntry {
     })
   }
 
-  static createStreamedBotEntry(abort: () => void) {
-    return new ChatEntry({ agentType: 'bot', type: 'md', content: '' }, true, abort)
+  static createStreamedBotEntry() {
+    return new ChatEntry({ agentType: 'bot', type: 'md', content: '' })
   }
 
   setValue(value: TextChatEntry) {
@@ -84,16 +79,8 @@ export class ChatEntry {
     return this.value
   }
 
-  finish() {
-    this.streamFinished = true
-  }
-
-  hasFinished() {
-    return this.streamFinished
-  }
-
   onChange(listener: ChatEntryListener) {
-    if (!this.streamFinished) this.listeners.push(listener)
+    this.listeners.push(listener)
     return () => {
       pull(this.listeners, listener)
     }

package/src/state/ChatState.ts

@@ -1,4 +1,6 @@
 import { dropRight, last, pull } from 'lodash'
+import { ulid } from 'ulid'
+import { AbortedError } from '../AbortedError'
 import { ChatEntry } from './ChatEntry'
 import { ObservableState } from './ObservableState'
 import { Labeled, LabeledWithImage } from './types'
@@ -27,7 +29,9 @@ export interface ChatProperties {
 
 type ChatMessagesListener = (chat: ChatEntry[]) => void
 
-export type MessageInterceptor = (entry: ChatEntry, chat: ChatState) => boolean | undefined | void | Promise<boolean | undefined | void>
+export type MessageInterceptor = (
+  entry: ChatEntry, chat: ChatState, signal: AbortSignal,
+) => boolean | undefined | void | Promise<boolean | undefined | void>
 
 interface Options {
   id: string,
@@ -41,6 +45,8 @@ export class ChatState extends ObservableState<ChatProperties> {
   private entries: ChatEntry[]
   private messagesListeners: ChatMessagesListener[] = []
   private readonly interceptors: MessageInterceptor[]
+  interceptorMemory = new Map<string, any>()
+  private abortions: AbortController[] = []
 
   /**
    * @param id the id of the chat.
@@ -62,10 +68,18 @@ export class ChatState extends ObservableState<ChatProperties> {
   }
 
   private async runInterceptors(entry: ChatEntry) {
+    const abort = new AbortController()
+    this.abortions.push(abort)
     for (const interceptor of this.interceptors) {
-      const result = await interceptor(entry, this)
-      if (result === false) break
+      try {
+        const result = await interceptor(entry, this, abort.signal)
+        if (result === false) break
+      } catch (error) {
+        pull(this.abortions, abort)
+        throw error
+      }
     }
+    pull(this.abortions, abort)
   }
 
   pushMessage(...entries: ChatEntry[]) {
@@ -90,4 +104,28 @@ export class ChatState extends ObservableState<ChatProperties> {
       pull(this.messagesListeners, listener)
     }
   }
+
+  /**
+   * Aborts all currently running chat interceptors.
+   */
+  abort() {
+    this.abortions.forEach(a => a.abort(new AbortedError()))
+    this.abortions = []
+  }
+
+  /**
+   * Creates a chat that has the same state value and interceptors as this one.
+   * 
+   * All abortions from this chat will be transferred to the new chat. The abortions of this chat will be cleared.
+   */
+  transferToNewChat(label: string) {
+    const newChat = new ChatState({
+      id: ulid(),
+      initial: { ...this.state, label },
+      interceptors: this.interceptors,
+    })
+    newChat.abortions = this.abortions
+    this.abortions = []
+    return newChat
+  }
 }

package/src/state/ObservableState.ts

@@ -7,7 +7,7 @@ type Listeners<T> = {
 }
 
 export class ObservableState<T> {
-  private state: T
+  protected state: T
   private listeners: Listeners<T> = {}
 
   constructor(initial: T) {

package/src/utils/chat.ts

@@ -2,6 +2,7 @@ import { FixedChatRequest } from '@stack-spot/portal-network'
 import { ulid } from 'ulid'
 import { ChatState, MessageInterceptor } from '../state/ChatState'
 import { WidgetState } from '../state/WidgetState'
+import { defaultLanguage } from './programming-languages'
 
 let next = 1
 
@@ -17,7 +18,7 @@ export function buildConversationContext(state: ChatState): FixedChatRequest['co
     workspace: state.get('workspace')?.id,
     conversation_id: state.id,
     stack_id: state.get('stack')?.id,
-    language: state.get('codeLanguage'),
+    language: state.get('codeLanguage') || (state.get('codeSelection') ? defaultLanguage : undefined),
     knowledge_sources: state.get('knowledgeSources')?.map(ks => ks.id),
     agent_id: state.get('agent')?.id,
     agent_built_in: state.get('agent')?.builtIn,

package/src/utils/knowledge-source.ts

@@ -1,4 +1,4 @@
-import { DocumentResponse, SourceKnowledgeSource4, SourceProjectFile4, SourceStackAi } from '@stack-spot/portal-network/api/ai'
+import { DocumentResponse, SourceKnowledgeSource, SourceProjectFile4, SourceStackAi } from '@stack-spot/portal-network/api/ai'
 import { KnowledgeSource } from '../state/ChatEntry'
 
 function attemptToParseMalFormedJson(str: string) {
@@ -44,12 +44,10 @@ export function extractCodeFromKSDocument(document: DocumentResponse): { languag
 }
 
 export function genericSourcesToKnowledgeSources(
-  sources: (SourceStackAi | SourceKnowledgeSource4 | SourceProjectFile4)[] | undefined,
+  sources: (SourceStackAi | SourceKnowledgeSource | SourceProjectFile4)[] | undefined,
 ): KnowledgeSource[] | undefined {
-  return sources?.filter(s => s.type === 'knowledge_source').map(ks => ({
-    documentId: ks.document_id,
-    documentScore: ks.document_score,
-    name: ks.name,
-    slug: ks.slug,
-  }))
+  return sources?.filter(s => s.type === 'knowledge_source').map(ks => {
+    const { document_id: documentId, document_score: documentScore, name, slug } = ks as SourceKnowledgeSource
+    return { documentId, documentScore, name, slug }
+  })
 }

package/src/utils/programming-languages.ts

@@ -1,3 +1,5 @@
+export const defaultLanguage = 'python'
+
 export const languages = [
   {
     'value': 'abap',

package/src/utils/string.ts

@@ -0,0 +1,6 @@
+// gets the size of a string removing control characters and spaces
+export function getSizeOfString(str: string): number {
+  // eslint-disable-next-line no-control-regex
+  const withoutSpacesAndControls = str.replace(/[\u0000-\u001F\u007F-\u009F\u061C\u200E\u200F\u202A-\u202E\u2066-\u2069\s]/g, '')
+  return withoutSpacesAndControls.length
+}

package/src/views/Chat/ChatMessage.tsx

@@ -1,17 +1,18 @@
 import { Button, IconBox, Text } from '@citric/core'
 import { Copy, Dislike, DislikeFill, Like, LikeFill, TimesCircle } from '@citric/icons'
-import { Avatar, IconButton } from '@citric/ui'
+import { Avatar, Badge, IconButton } from '@citric/ui'
 import { aiClient } from '@stack-spot/portal-network'
+import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { Markdown } from '../../components/Markdown'
-import { useChatEntry, useWidget } from '../../context/hooks'
-import { ChatEntry, TextChatEntry } from '../../state/ChatEntry'
+import { useChatEntry, useCurrentChat, useWidget } from '../../context/hooks'
+import { ChatEntry, SerializableAction, TextChatEntry } from '../../state/ChatEntry'
 import { useDateFormatter } from '../../utils/date'
 import { AgentInfo } from './AgentInfo'
 import { useChatScrollToBottomEffect } from './chat-scroll'
 
-export const ChatMessage = ({ message, username }: { message: ChatEntry, username: string }) => {
+export const ChatMessage = ({ message, username, isLast }: { message: ChatEntry, username: string, isLast: boolean }) => {
   const t = useTranslate(dictionary)
   const [liked, setLiked] = useState<boolean | undefined>()
   const entry = useChatEntry(message)
@@ -21,6 +22,7 @@ export const ChatMessage = ({ message, username }: { message: ChatEntry, usernam
   const shouldShowDate = entry.updated && !isNaN(date.getTime())
   const ref = useRef<HTMLLIElement>(null)
   const widget = useWidget()
+  const chat = useCurrentChat()
   useChatScrollToBottomEffect(ref, [entry])
 
   const detailKS = useCallback(({ name, slug, documentScore, documentId }: Required<TextChatEntry>['knowledgeSources'][number]) => {
@@ -28,6 +30,14 @@ export const ChatMessage = ({ message, username }: { message: ChatEntry, usernam
     widget.set('panel', 'ks-details')
   }, [])
 
+  const runAction = useCallback((action: SerializableAction) => {
+    if (action.type === 'link') {
+      window.open(action.exec, '_blank')
+    } else {
+      chat.pushMessage(ChatEntry.createUserEntry(action.exec))
+    }
+  }, [])
+
   const { like, dislike } = useMemo(() => {
     async function feedback(like: boolean) {
       if (!entry.messageId || like === liked) return
@@ -58,8 +68,26 @@ export const ChatMessage = ({ message, username }: { message: ChatEntry, usernam
     <li className={entry.agentType} ref={ref}>
       <div className="chat-message">
         <div className="user-info">{userInfo}</div>
-        {entry.content && <div className="message-content">
+        {entry.content && <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>{entry.content}</Markdown> : <p className="plain-text">{entry.content}</p>}
+          {entry.actions?.length && <div className="actions">
+            {entry.actions.map(
+              (a, index) => (
+                <Button
+                  key={index}
+                  appearance={a.appearance === 'primary' ? 'contained' : 'outlined'}
+                  colorScheme="inverse"
+                  onClick={() => runAction(a)}
+                  disabled={!isLast}
+                >
+                  {a.title}
+                </Button>
+              ),
+            )}
+          </div>}
         </div>}
       </div>
       {entry.error && (
@@ -78,9 +106,11 @@ export const ChatMessage = ({ message, username }: { message: ChatEntry, usernam
       </div>}
       <div className="message-footer">
         {entry.agentType === 'bot' && !entry.error && <div className="message-actions">
-          <IconButton title={t.copy} aria-label={t.copy} onClick={() => navigator.clipboard.writeText(entry.content)}>
-            <Copy />
-          </IconButton>
+          {entry.type === 'md' && (
+            <IconButton title={t.copy} aria-label={t.copy} onClick={() => navigator.clipboard.writeText(entry.content)}>
+              <Copy />
+            </IconButton>
+          )}
           {entry.messageId && (
             <>
               <IconButton title={t.like} aria-label={t.like} onClick={like}>

package/src/views/Chat/ChatMessages.tsx

@@ -10,7 +10,10 @@ interface Props {
 
 export const ChatMessages = ({ chatId, username }: Props) => {
   const messages = useChatMessages(chatId)
-  const items = useMemo(() => messages.map(m => <ChatMessage key={m.id} message={m} username={username} />), [messages])
+  const items = useMemo(
+    () => messages.map((m, index) => <ChatMessage key={m.id} message={m} username={username} isLast={index === messages.length - 1} />),
+    [messages],
+  )
   const ref = useRef<HTMLUListElement>(null)
   return <ChatList ref={ref}>{items}</ChatList>
 }

package/src/views/Chat/styled.ts

@@ -99,6 +99,37 @@ export const ChatList = styled.ul`
       }
     }
 
+    .message-content {
+      > .badges, > .actions {
+        display: flex;
+        flex-direction: row;
+        gap: 4px;
+      }
+      > .badges {
+        margin-bottom: 20px;
+      }
+      > .actions {
+        margin-top: 20px;
+      }
+      &.card {
+        margin-top: 5px;
+        position: relative;
+        padding: 16px;
+        border: 2px solid ${theme.color.light[500]};
+        border-radius: 4px;
+        overflow: hidden;
+        &:before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          width: 2px;
+          background: linear-gradient(180deg, ${theme.color.blue[500]} 0%, ${theme.color.indigo[500]} 100%);
+        }
+      }
+    }
+
     &.user {
       align-items: end;
 

package/src/views/Editor.tsx

@@ -10,9 +10,8 @@ import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { styled } from 'styled-components'
 import { useCurrentChat, useCurrentChatState, useWidget, useWidgetState } from '../context/hooks'
 import { useRightPanel } from '../right-panel/hooks'
-import { languages } from '../utils/programming-languages'
+import { defaultLanguage, languages } from '../utils/programming-languages'
 
-const DEFAULT_LANGUAGE = 'python'
 const MIN_SELECTION_UPDATE_MS = 200
 
 const EditorBox = styled.div`
@@ -65,7 +64,7 @@ export const Editor = () => {
 }
 
 const Title = () => {
-  const languageValue = useCurrentChatState('codeLanguage') || DEFAULT_LANGUAGE
+  const languageValue = useCurrentChatState('codeLanguage') || defaultLanguage
   const language = useMemo(() => languages.find(l => l.value === languageValue), [languageValue])
   const chat = useCurrentChat()
   return (
@@ -86,7 +85,7 @@ const Title = () => {
 const EditorPanel = () => {
   const themeKind = useThemeKind()
   const value = useCurrentChatState('code')
-  const language = useCurrentChatState('codeLanguage') || DEFAULT_LANGUAGE
+  const language = useCurrentChatState('codeLanguage') || defaultLanguage
   const chat = useCurrentChat()
   const selectionObserver = useRef<IDisposable | undefined>()
 

package/src/views/MessageInput/ButtonGroup.tsx

@@ -13,7 +13,7 @@ interface ButtonGroupProps {
   setExpanded: React.Dispatch<React.SetStateAction<boolean>>,
   isLoading: boolean,
   onSend: () => void,
-  onCancel?: () => void,
+  onCancel: () => void,
 }
 
 export const ButtonGroup = ({ features, onSend, onCancel, expanded, setExpanded, isLoading }: ButtonGroupProps) => {

package/src/views/MessageInput/index.tsx

@@ -1,6 +1,5 @@
 import { listToClass } from '@stack-spot/portal-theme'
-import { last } from 'lodash'
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { AdaptiveTextArea } from '../../components/AdaptiveTextArea'
 import { ProgressBar } from '../../components/ProgressBar'
 import { useCurrentChat, useCurrentChatState, useWidgetState } from '../../context/hooks'
@@ -24,13 +23,14 @@ export const MessageInput = ({ features }: Props) => {
   const isLoading = useCurrentChatState('isLoading') ?? false
   const value = useCurrentChatState('nextMessage') ?? ''
   const isMinimized = useWidgetState('isMinimized')
+  const elementRef = useRef<HTMLDivElement>(null)
 
   const onSend = useCallback(async () => {
     const message = chat.get('nextMessage')
     if (!message) return
     const code = chat.get('codeSelection')
     const language = chat.get('codeLanguage')
-    const prompt = code ? `${message}\n\`\`\`${language}\n${code}\n\`\`\`` : message
+    const prompt = code && !message.startsWith('/') ? `${message}\n\`\`\`${language}\n${code}\n\`\`\`` : message
     chat.pushMessage(ChatEntry.createUserEntry(prompt, true))
     chat.set('nextMessage', '')
     setFocused(false)
@@ -43,8 +43,12 @@ export const MessageInput = ({ features }: Props) => {
     }
   }, [onSend])
 
+  useEffect(() => {
+    if (!isLoading) elementRef.current?.querySelector('textarea')?.focus()
+  }, [isLoading])
+
   return (
-    <MessageInputBox aria-busy={isLoading} className="message-input">
+    <MessageInputBox ref={elementRef} aria-busy={isLoading} className="message-input">
       <ProgressBar visible={isLoading} shimmer />
       <InfoBar />
       <div className={listToClass(['action-box', focused && 'focused', isLoading && 'disabled'])}>
@@ -63,7 +67,7 @@ export const MessageInput = ({ features }: Props) => {
         <ButtonGroup
           features={features}
           onSend={onSend}
-          onCancel={() => last(chat.getMessages())?.abort()}
+          onCancel={() => chat.abort()}
           expanded={expanded}
           isLoading={isLoading}
           setExpanded={(value) => {

package/dist/components/Editor.d.ts

@@ -1,9 +0,0 @@
-import { WithStyle } from '@stack-spot/portal-theme';
-interface Props extends WithStyle {
-    value: string;
-    onChange: (value: string) => void;
-    language: string;
-}
-export declare const Editor: ({}: Props) => null;
-export {};
-//# sourceMappingURL=Editor.d.ts.map

package/dist/components/Editor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../../src/components/Editor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAGpD,UAAU,KAAM,SAAQ,SAAS;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,MAAM,OAAQ,KAAK,SAAS,CAAA"}

package/dist/components/Editor.js

@@ -1,2 +0,0 @@
-export const Editor = ({}) => null;
-//# sourceMappingURL=Editor.js.map

package/dist/components/Editor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Editor.js","sourceRoot":"","sources":["../../src/components/Editor.tsx"],"names":[],"mappings":"AAWA,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAS,EAAE,EAAE,CAAC,IAAI,CAAA"}

package/src/components/Editor.tsx

@@ -1,12 +0,0 @@
-/* eslint-disable no-empty-pattern */
-/* Copiar do portal AI? */
-import { WithStyle } from '@stack-spot/portal-theme'
-
-
-interface Props extends WithStyle {
-  value: string,
-  onChange: (value: string) => void,
-  language: string,
-}
-
-export const Editor = ({}: Props) => null