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

package/dist/views/MessageInput/ButtonGroup.d.ts

@@ -5,7 +5,7 @@ interface ButtonGroupProps {
     setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
     isLoading: boolean;
     onSend: () => void;
-    onCancel?: () => void;
+    onCancel: () => void;
 }
 export declare const ButtonGroup: ({ features, onSend, onCancel, expanded, setExpanded, isLoading }: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/views/MessageInput/ButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/views/MessageInput/ButtonGroup.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAGrD,UAAU,gBAAgB;IACxB,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3D,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,eAAO,MAAM,WAAW,qEAAsE,gBAAgB,4CAwE7G,CAAA"}
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/views/MessageInput/ButtonGroup.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAGrD,UAAU,gBAAgB;IACxB,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3D,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,qEAAsE,gBAAgB,4CAwE7G,CAAA"}

package/dist/views/MessageInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/MessageInput/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAOrD,UAAU,KAAK;IACb,QAAQ,EAAE,oBAAoB,CAAC;CAChC;AAED,eAAO,MAAM,YAAY,iBAAkB,KAAK,4CA2D/C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/MessageInput/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAOrD,UAAU,KAAK;IACb,QAAQ,EAAE,oBAAoB,CAAC;CAChC;AAED,eAAO,MAAM,YAAY,iBAAkB,KAAK,4CAgE/C,CAAA"}

package/dist/views/MessageInput/index.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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.js';
 import { ProgressBar } from '../../components/ProgressBar.js';
 import { useCurrentChat, useCurrentChatState, useWidgetState } from '../../context/hooks.js';
@@ -19,13 +18,14 @@ export const MessageInput = ({ features }) => {
     const isLoading = useCurrentChatState('isLoading') ?? false;
     const value = useCurrentChatState('nextMessage') ?? '';
     const isMinimized = useWidgetState('isMinimized');
+    const elementRef = useRef(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);
@@ -36,7 +36,11 @@ export const MessageInput = ({ features }) => {
             onSend();
         }
     }, [onSend]);
-    return (_jsxs(MessageInputBox, { "aria-busy": isLoading, className: "message-input", children: [_jsx(ProgressBar, { visible: isLoading, shimmer: true }), _jsx(InfoBar, {}), _jsxs("div", { className: listToClass(['action-box', focused && 'focused', isLoading && 'disabled']), children: [_jsx(AdaptiveTextArea, { disabled: isLoading, placeholder: t.placeholder, onChange: e => chat.set('nextMessage', e.target.value), value: value, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onKeyDown: onKeyDown, onIncreaseSize: () => setExpanded(false), onResetSize: () => !expansionLocked.current && setExpanded(true), maxHeight: isMinimized ? MIN_INPUT_HEIGHT : MAX_INPUT_HEIGHT }), _jsx(ButtonGroup, { features: features, onSend: onSend, onCancel: () => last(chat.getMessages())?.abort(), expanded: expanded, isLoading: isLoading, setExpanded: (value) => {
+    useEffect(() => {
+        if (!isLoading)
+            elementRef.current?.querySelector('textarea')?.focus();
+    }, [isLoading]);
+    return (_jsxs(MessageInputBox, { ref: elementRef, "aria-busy": isLoading, className: "message-input", children: [_jsx(ProgressBar, { visible: isLoading, shimmer: true }), _jsx(InfoBar, {}), _jsxs("div", { className: listToClass(['action-box', focused && 'focused', isLoading && 'disabled']), children: [_jsx(AdaptiveTextArea, { disabled: isLoading, placeholder: t.placeholder, onChange: e => chat.set('nextMessage', e.target.value), value: value, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onKeyDown: onKeyDown, onIncreaseSize: () => setExpanded(false), onResetSize: () => !expansionLocked.current && setExpanded(true), maxHeight: isMinimized ? MIN_INPUT_HEIGHT : MAX_INPUT_HEIGHT }), _jsx(ButtonGroup, { features: features, onSend: onSend, onCancel: () => chat.abort(), expanded: expanded, isLoading: isLoading, setExpanded: (value) => {
                             setExpanded(value);
                             expansionLocked.current = expanded;
                         } })] })] }));

package/dist/views/MessageInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/views/MessageInput/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/views/MessageInput/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAA;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEzF,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAM9E,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAS,EAAE,EAAE;IAClD,MAAM,CAAC,GAAG,yBAAyB,EAAE,CAAA;IACrC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IAC9C,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IACrC,MAAM,IAAI,GAAG,cAAc,EAAE,CAAA;IAC7B,MAAM,SAAS,GAAG,mBAAmB,CAAC,WAAW,CAAC,IAAI,KAAK,CAAA;IAC3D,MAAM,KAAK,GAAG,mBAAmB,CAAC,aAAa,CAAC,IAAI,EAAE,CAAA;IACtD,MAAM,WAAW,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA;IACjD,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE/C,MAAM,MAAM,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACpC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,CAAA;QACvC,IAAI,CAAC,OAAO;YAAE,OAAM;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,CAAA;QACtC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;QACzC,MAAM,MAAM,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,WAAW,QAAQ,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,OAAO,CAAA;QAC5G,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAA;QACzD,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,EAAE,CAAC,CAAA;QAC3B,UAAU,CAAC,KAAK,CAAC,CAAA;IACnB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,KAA+C,EAAE,EAAE;QAChF,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC7C,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,MAAM,EAAE,CAAA;QACV,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS;YAAE,UAAU,CAAC,OAAO,EAAE,aAAa,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,CAAA;IACxE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO,CACL,MAAC,eAAe,IAAC,GAAG,EAAE,UAAU,eAAa,SAAS,EAAE,SAAS,EAAC,eAAe,aAC/E,KAAC,WAAW,IAAC,OAAO,EAAE,SAAS,EAAE,OAAO,SAAG,EAC3C,KAAC,OAAO,KAAG,EACX,eAAK,SAAS,EAAE,WAAW,CAAC,CAAC,YAAY,EAAE,OAAO,IAAI,SAAS,EAAE,SAAS,IAAI,UAAU,CAAC,CAAC,aACxF,KAAC,gBAAgB,IACf,QAAQ,EAAE,SAAS,EACnB,WAAW,EAAE,CAAC,CAAC,WAAW,EAC1B,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACtD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAC/B,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EACxC,WAAW,EAAE,GAAG,EAAE,CAAC,CAAC,eAAe,CAAC,OAAO,IAAI,WAAW,CAAC,IAAI,CAAC,EAChE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,GAC5D,EACF,KAAC,WAAW,IACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,EAC5B,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;4BACrB,WAAW,CAAC,KAAK,CAAC,CAAA;4BAClB,eAAe,CAAC,OAAO,GAAG,QAAQ,CAAA;wBACpC,CAAC,GACD,IACE,IACU,CACnB,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,7 +9,7 @@
     "@citric/icons": "^5.4.0 || ^6.0.0",
     "@citric/ui": "^5.4.0 || ^6.0.0",
     "@stack-spot/portal-components": "^2.6.1",
-    "@stack-spot/portal-network": "^0.42.2",
+    "@stack-spot/portal-network": "^0.46.0",
     "@stack-spot/portal-theme": "^1.0.0",
     "@stack-spot/portal-translate": "^1.1.0",
     "lodash": "^4.17.0",

package/src/AbortedError.ts

@@ -0,0 +1,7 @@
+import { StackspotAPIError } from '@stack-spot/portal-network'
+
+export class AbortedError extends StackspotAPIError {
+  constructor() {
+    super({ status: 0, message: 'Operation canceled by the user.' })
+  }
+}

package/src/StackspotAIWidget.tsx

@@ -1,9 +1,11 @@
+import { loader } from '@monaco-editor/react'
 import { listToClass } from '@stack-spot/portal-theme'
 import { useMemo, useRef } from 'react'
-import { quickCommandInterceptor } from './chat-interceptors/quick-commands'
+import { quickCommandQuestionsInterceptor } from './chat-interceptors/quick-command-questions'
+import { createQuickCommandInterceptor } from './chat-interceptors/quick-commands'
 import { sendMessageInterceptor } from './chat-interceptors/send-message'
 import { TooltipProvider } from './components/Tooltip'
-import { useCurrentChatMessages, useFirstChat, useWidgetState } from './context/hooks'
+import { useCurrentChatMessages, useFirstChat, useWidget, useWidgetState } from './context/hooks'
 import { AIWidgetFeatures, defaultFeatures } from './features'
 import './layout.css'
 import { RightPanel } from './right-panel/RightPanel'
@@ -34,7 +36,15 @@ export interface AIWidgetProps {
 export const StackspotAIWidget = (
   { username, features = defaultFeatures, interceptors: userInterceptors = [], minimizedActions = {}, children }: AIWidgetProps,
 ) => {
-  const interceptors: MessageInterceptor[] = useMemo(() => [...userInterceptors, quickCommandInterceptor, sendMessageInterceptor], [])
+  const widget = useWidget()
+  const interceptors: MessageInterceptor[] = useMemo(
+    () => [
+      ...userInterceptors,
+      quickCommandQuestionsInterceptor,
+      createQuickCommandInterceptor(widget, () => loader.__getMonacoInstance()?.editor),
+      sendMessageInterceptor],
+    [],
+  )
   useFirstChat(interceptors)
   const rightPanelRef = useRef<HTMLDivElement>(null)
   const chatWindowRef = useRef<HTMLDivElement>(null)

package/src/chat-interceptors/CustomInputs.ts

@@ -0,0 +1,70 @@
+import { CustomInputResponse } from '@stack-spot/portal-network/api/ai'
+import { Dictionary, translate } from '@stack-spot/portal-translate'
+import { ChatEntry } from '../state/ChatEntry'
+import { LabeledWithImage } from '../state/types'
+
+export const CUSTOM_INPUTS_KEY = 'customInputs'
+
+export class CustomInputs {
+  private value: Record<string, string> = {}
+  private inputs: CustomInputResponse[]
+  private index = 0
+  private resolve?: (value: Record<string, string>) => void
+  private promise: Promise<Record<string, string>>
+  private agent?: LabeledWithImage
+
+  constructor(inputs: CustomInputResponse[], agent?: LabeledWithImage) {
+    this.inputs = inputs
+    this.agent = agent
+    this.promise = new Promise(resolve => {
+      this.resolve = resolve
+    })
+  }
+
+  ask(): ChatEntry {
+    if (this.index >= this.inputs.length) throw new Error('No more questions to ask.')
+    const t = translate(dictionary)
+    const input = this.inputs[this.index]
+    return new ChatEntry({
+      agentType: 'bot',
+      content: input.question,
+      type: 'text',
+      agent: this.agent,
+      badges: [{ label: input.mandatory ? t.required : t.optional }],
+      card: true,
+      actions: input.mandatory ? undefined : [{ type: 'command', appearance: 'primary', title: t.skip, exec: '/skip' }],
+      updated: new Date().toISOString(),
+    })
+  }
+
+  answer(value: string) {
+    this.value[this.inputs[this.index].slug] = value
+    this.skip()
+  }
+
+  skip() {
+    this.index++
+    if (this.hasFinished()) this.resolve?.(this.value)
+  }
+
+  hasFinished() {
+    return this.index === this.inputs.length
+  }
+
+  getValue() {
+    return this.promise
+  }
+}
+
+const dictionary = {
+  en: {
+    required: 'Required information',
+    optional: 'Optional information',
+    skip: 'Skip',
+  },
+  pt: {
+    required: 'Informação obrigatória',
+    optional: 'Informação opcional',
+    skip: 'Pular',
+  },
+} satisfies Dictionary

package/src/chat-interceptors/quick-command-questions.ts

@@ -0,0 +1,15 @@
+import { ChatEntry } from '../state/ChatEntry'
+import { ChatState } from '../state/ChatState'
+import { CUSTOM_INPUTS_KEY } from './CustomInputs'
+
+export function quickCommandQuestionsInterceptor(entry: ChatEntry, chat: ChatState) {
+  const { agentType, content } = entry.getValue()
+  if (agentType !== 'user') return
+  const customInputs = chat.interceptorMemory.get(CUSTOM_INPUTS_KEY)
+  if (!customInputs) return
+  if (content === '/skip') customInputs.skip()
+  else customInputs.answer(content)
+  if (!customInputs.hasFinished()) chat.pushMessage(customInputs.ask())
+  // prevents next interceptors from running
+  return false
+}

package/src/chat-interceptors/quick-commands.ts

@@ -1,12 +1,274 @@
+import { aiClient, CancelledError, FixedChatRequest, StackspotAPIError } from '@stack-spot/portal-network'
+import { QuickCommandFetchResponseResult, QuickCommandPromptResponse2, QuickCommandResponse } from '@stack-spot/portal-network/api/ai'
+import { Dictionary, interpolate, translate } from '@stack-spot/portal-translate'
+import type { editor } from 'monaco-editor'
+import { ulid } from 'ulid'
+import { AbortedError } from '../AbortedError'
 import { ChatEntry } from '../state/ChatEntry'
 import { ChatState } from '../state/ChatState'
+import { LabeledWithImage } from '../state/types'
+import { WidgetState } from '../state/WidgetState'
+import { buildConversationContext } from '../utils/chat'
+import { getSizeOfString } from '../utils/string'
+import { CUSTOM_INPUTS_KEY, CustomInputs } from './CustomInputs'
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function quickCommandInterceptor(entry: ChatEntry, _chat: ChatState) {
-  const { agentType, content } = entry.getValue()
-  if (agentType !== 'user') return
-  if (content.startsWith('/')) {
-    alert('Quick commands are not yet supported!') /* todo */
-    return false // by returning false, the next interceptor are not run. i.e. the message is not sent to the AI agent.
+type SlugExecution = Record<string, string | QuickCommandFetchResponseResult | QuickCommandPromptResponse2>
+
+interface QCContext {
+  qc: QuickCommandResponse,
+  context: Required<FixedChatRequest>['context'],
+  resultMap: SlugExecution,
+  chat: ChatState,
+  code?: string,
+  executionId: string,
+  signal: AbortSignal,
+}
+
+const commandRegex = /^\/[\w\d-_]+$/
+const progressMessageDelayMS = 1000
+
+export function createQuickCommandInterceptor(widget: WidgetState, getEditor: () => typeof editor | undefined) {
+  async function computeCustomInputs(ctx: QCContext) {
+    const { chat, qc: { custom_inputs: inputs, name, slug } } = ctx
+    if (!inputs?.length) return
+    chat.set('isLoading', false)
+    const t = translate(dictionary)
+    const customInputs = new CustomInputs(inputs, chat.get('agent'))
+    chat.interceptorMemory.set(CUSTOM_INPUTS_KEY, customInputs)
+    chat.pushMessage(new ChatEntry({
+      agentType: 'bot',
+      type: 'text',
+      content: interpolate(t.startQuestioning, name || slug),
+    }))
+    chat.pushMessage(customInputs.ask())
+    const inputsValues = await customInputs.getValue()
+    chat.set('isLoading', true)
+    chat.interceptorMemory.delete(CUSTOM_INPUTS_KEY)
+    ctx.resultMap = { ...ctx.resultMap, ...inputsValues }
+  }
+
+  async function runFetchStep(ctx: QCContext, stepIndex: number) {
+    const { qc: { slug, steps }, code, context, resultMap, executionId, signal } = ctx
+    const step = steps![stepIndex]
+    const { headers, data, method, url } = await aiClient.fetchStepOfQuickCommand.mutate({
+      slug,
+      stepSlug: step.slug,
+      quickCommandsExecutionRequest: { input_data: code, context, slugs_executions: resultMap, qc_execution_id: executionId },
+    }, signal)
+    const body = ['get', 'head'].includes(method.toLowerCase()) ? undefined : data
+    const response = await fetch(url, { headers: headers || undefined, body, method, signal })
+    if (!response.ok) throw new Error(`Failed to execute step "${step.slug}" of quick command "${slug}". Status ${response.status}.`)
+    resultMap[step.slug] = {
+      status: response.status,
+      data: await response.text(),
+      headers: Object.fromEntries(response.headers.entries()),
+    }
+  }
+
+  async function runLLMStep(
+    { qc: { slug, steps }, code, context, executionId, resultMap, signal }: QCContext,
+    stepIndex: number,
+  ) {
+    const step = steps![stepIndex]
+    resultMap[step.slug] = await aiClient.llmStepOfQuickCommand.mutate({
+      slug,
+      stepSlug: step.slug,
+      quickCommandsExecutionRequest: { input_data: code, context, qc_execution_id: executionId, slugs_executions: resultMap },
+    }, signal)
+  }
+
+  function updateProgressMessageForStep(message: ChatEntry, qc: QuickCommandResponse, stepIndex: number) {
+    const t = translate(dictionary)
+    message.setValue({
+      ...message.getValue(),
+      content: interpolate(t.progress, qc.name || qc.slug, stepIndex + 1, qc.steps?.[stepIndex]?.slug, qc.steps?.length),
+      updated: new Date().toISOString(),
+    })
+  }
+
+  function showProgressMessage(ctx: QCContext, message: ChatEntry) {
+    const result = {
+      removeProgressMessage: () => clearTimeout(timeout),
+    }
+    const timeout = window.setTimeout(() => {
+      const chat = ctx.chat
+      chat.pushMessage(message)
+      result.removeProgressMessage = () => chat.popMessage()
+    }, progressMessageDelayMS)
+    return result
+  }
+
+  function createProgressMessage(agent?: LabeledWithImage) {
+    return new ChatEntry({
+      agentType: 'bot',
+      content: '',
+      type: 'text',
+      agent,
+      updated: new Date().toISOString(),
+    })
+  }
+
+  async function runSteps(ctx: QCContext) {
+    const { qc, chat } = ctx
+    const progress = createProgressMessage(chat.get('agent'))
+    const { removeProgressMessage } = showProgressMessage(ctx, progress)
+    try {
+      for (let i = 0; i < (qc.steps?.length ?? 0); i++) {
+        updateProgressMessageForStep(progress, qc, i)
+        await (qc.steps?.[i].type === 'FETCH' ? runFetchStep(ctx, i) : runLLMStep(ctx, i))
+      }
+    } finally {
+      removeProgressMessage()
+    }
+  }
+
+  async function formatResult({ qc, code, executionId, context, resultMap, signal }: QCContext) {
+    const formatted = await aiClient.formatResultOfQuickCommand.mutate({
+      slug: qc.slug,
+      quickCommandsExecutionRequest: {
+        input_data: code,
+        context,
+        qc_execution_id: executionId,
+        slugs_executions: resultMap,
+      },
+    }, signal)
+    return formatted.result
+  }
+
+  // opens a new chat tab if the quick command doesn't preserve the conversation and the current conversation isn't clean.
+  function manageConversationContext(ctx: QCContext) {
+    if (!ctx.qc.preserve_conversation && ctx.chat.getMessages().length > 1) {
+      if (ctx.qc.return_type === 'CHAT') {
+        ctx.chat.set('isLoading', false)
+        ctx.chat = ctx.chat.transferToNewChat(ctx.qc.name || ctx.qc.slug)
+        ctx.chat.set('isLoading', true)
+        widget.chatTabs.add(ctx.chat)
+        widget.chatTabs.select(ctx.chat.id)
+        ctx.context.conversation_id = ctx.chat.id
+      } else {
+        ctx.context.conversation_id = ulid()
+      }
+    }
+  }
+
+  async function runQuickCommand(ctx: QCContext) {
+    const { qc: { slug }, code } = ctx
+    const t = translate(dictionary)
+    ctx.signal.addEventListener('abort', () => aiClient.quickCommand.cancel({ slug }))
+    await aiClient.quickCommand.invalidate({ slug })
+    try {
+      ctx.qc = await aiClient.quickCommand.query({ slug })
+    } catch (error) {
+      throw error instanceof StackspotAPIError && error.status === 404 ? new Error(t.notFound) : error
+    }
+    if (ctx.qc.use_selected_code && !code) {
+      throw new Error(t.requiresSelection)
+    }
+    manageConversationContext(ctx)
+    await computeCustomInputs(ctx)
+    await runSteps(ctx)
+    return formatResult(ctx)
   }
+
+  async function registerAnalyticsEvent({ qc, executionId, code = '', context }: QCContext, status: string, start: number) {
+    const now = new Date().getTime()
+    try {
+      await aiClient.createEvent.mutate({
+        body: [{
+          type: 'custom_quick_command_execution',
+          quick_command_event: {
+            type: qc.type || '',
+            duration_execution: now - start,
+            status_execution: status,
+            slug: qc.slug,
+            qc_execution_id: executionId,
+            id: qc.id,
+          },
+          code,
+          context,
+          knowledge_sources: [],
+          size: getSizeOfString(code),
+          generated_at: now,
+        }],
+      })
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.warn('Failed to register event: quick command.')
+    }
+  }
+
+  function outputResult({ qc, chat, code }: QCContext, result: string) {
+    if (qc.return_type === 'CHAT') {
+      chat.pushMessage(new ChatEntry({
+        agentType: 'bot',
+        content: result,
+        agent: chat.get('agent'),
+        type: 'md',
+      }))
+    } else {
+      const editor = getEditor()?.getEditors()[0]
+      let finalCode = result
+      if (qc.return_type === 'BEFORE_CODE') finalCode = `${result}\n${code}`
+      else if (qc.return_type === 'AFTER_CODE') finalCode = `${code}\n${result}`
+      finalCode = finalCode.replace(/(\$[{a-z]|\})/g, '\\$1')
+      editor?.trigger('keyboard', 'type', { text: finalCode })
+    }
+  }
+
+  async function quickCommandInterceptor(entry: ChatEntry, chat: ChatState, signal: AbortSignal) {
+    const { agentType, content } = entry.getValue()
+    if (agentType !== 'user' || !commandRegex.test(content.trim())) return
+    const t = translate(dictionary)
+    const slug = content.trim().substring(1)
+    const ctx: QCContext = {
+      qc: { slug } as QuickCommandResponse,
+      chat,
+      code: chat.get('codeSelection'),
+      context: buildConversationContext(chat) ?? {},
+      executionId: ulid(),
+      resultMap: {},
+      signal,
+    }
+    chat.set('isLoading', true)
+    const start = new Date().getTime()
+    try {
+      const result = await runQuickCommand(ctx)
+      outputResult(ctx, result)
+      registerAnalyticsEvent(ctx, '200', start)
+    } catch (error: any) {
+      let message = error.message || `${error}`
+      if (error instanceof AbortedError || error instanceof CancelledError) message = t.aborted
+      else if (error instanceof StackspotAPIError) message = error.translate()
+      ctx.chat.pushMessage(new ChatEntry({
+        agentType: 'bot',
+        content: '',
+        error: message,
+        agent: chat.get('agent'),
+        type: 'text',
+      }))
+      registerAnalyticsEvent(ctx, message, start)
+    }
+    ctx.chat.set('isLoading', false)
+    // prevents the next interceptors from running
+    return false
+  }
+
+  return quickCommandInterceptor
 }
+
+const dictionary = {
+  en: {
+    requiresSelection: 'This quick command requires some code to be selected in the editor.',
+    startQuestioning: 'To execute the Quick Command "$0", I\'ll need you to provide some information. Some may be mandatory, and others optional. Let\'s get started.',
+    progress: 'Running quick command "$0". Step $1 ($2) of $3.',
+    aborted: 'The quick command execution aborted by the user.',
+    notFound: 'There\'s no quick command with the provided name. If you don\'t wish to run a command, prefix the first "/" with a "\\".',
+  },
+  pt: {
+    requiresSelection: 'Este quick command precisa que algum código esteja selecionado no editor.',
+    startQuestioning: 'Para executar o Quick Command "$0", vou precisar que você providencie algumas explicações. Algumas são obrigatórias e outras opcionais. Vamos começar.',
+    progress: 'Executando quick command "$0". Passo $1 ($2) de $3.',
+    aborted: 'A execução do quick command foi abortada pelo usuário.',
+    notFound: 'Não existe quick command com o nome providenciado. Se você não quiser rodar um comando, prefixe o primeiro "/" com um "\\".',
+  },
+} satisfies Dictionary

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

@@ -4,15 +4,16 @@ import { ChatState } from '../state/ChatState'
 import { buildConversationContext } from '../utils/chat'
 import { genericSourcesToKnowledgeSources } from '../utils/knowledge-source'
 
-export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState) {
+export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState, signal: AbortSignal) {
   const { agentType, content } = entry.getValue()
   if (agentType !== 'user') return
   const context = buildConversationContext(chat)
   chat.set('isLoading', true)
   const isFirstMessage = chat.getMessages().length === 1
   if (isFirstMessage) chat.set('label', content)
-  const stream = aiClient.sendChatMessage({ context, user_prompt: content })
-  const botEntry = ChatEntry.createStreamedBotEntry(() => stream.cancel())
+  const stream = aiClient.sendChatMessage({ context, user_prompt: content.replace(/^\s*\\(\\|\/)/, '$1') })
+  signal.addEventListener('abort', () => stream.cancel())
+  const botEntry = ChatEntry.createStreamedBotEntry()
   chat.pushMessage(botEntry)
   let knowledgeSources: KnowledgeSource[] | undefined
   stream.onChange(value => {
@@ -39,6 +40,5 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState)
       error: error instanceof StackspotAPIError ? error.translate() : (error.message ?? `${error}`),
     })
   }
-  botEntry.finish()
   chat.set('isLoading', false)
 }

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)
     }