@stack-spot/ai-chat-widget 0.10.0 → 1.0.0-dev.1768314799914

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

@@ -1,12 +1,508 @@
+import { aiClient, CancelledError, FixedChatRequest, StackspotAPIError } from '@stack-spot/portal-network'
+import { QuickCommandStepResult, QuickCommandPromptResponse2, QuickCommandResponse, QuickCommandScriptExecutionResponse, QuickCommandStepFetchResponse, QuickCommandStepLlmResponse } from '@stack-spot/portal-network/api/ai'
+import { Dictionary, interpolate, translate } from '@stack-spot/portal-translate'
+import { isNil } from 'lodash'
+import type { editor } from 'monaco-editor'
+import { ulid } from 'ulid'
+import { AbortedError } from '../AbortedError'
+import { quickCommandRegex } from '../regex'
 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 { 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, QuickCommandStepResult>
+
+interface QCContext {
+  qc: QuickCommandResponse,
+  context: Required<FixedChatRequest>['context'],
+  resultMap: SlugExecution,
+  customInputs: Record<string, string>,
+  chat: ChatState,
+  code?: string,
+  executionId: string,
+  signal: AbortSignal,
+  isRemote?: boolean,
+}
+
+/**
+ * While the quick command is running, if it takes more than `progressMessageDelayMS` a progress message is shown.
+ * This progress message is shown immediately if one of the steps is of type "LLM".
+ */
+const progressMessageDelayMS = 1000
+
+/**
+ * This creates a chat interceptor for interpreting and running quick commands. We need a function to create the interceptor because, for
+ * quick commands, we need access to the full widget state and the editor, which are not provided to a chat interceptor.
+ * 
+ * The quick command interceptor intercepts all user messages (trimmed) that matches the quick command regex. It fetches the quick command
+ * from the backend, runs all of its steps and outputs the final response (in the chat or in the editor).
+ * 
+ * @param widget the full widget state.
+ * @param getEditor a function that returns the editor instance (monaco).
+ * @returns the quick commands chat interceptor.
+ */
+export function createQuickCommandInterceptor(widget: WidgetState, getEditor: () => typeof editor | undefined) {
+  /**
+   * This creates a CustomInputs instance in the current chat, which activates the `quickCommandQuestionsInterceptor`. In summary, this asks
+   * the first question, wait for all answers to be given and fills the result map in the context passed as parameter.
+   */
+  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'))
+    CustomInputs.setCustomInputsForChat(customInputs, chat)
+    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)
+    CustomInputs.deleteCustomInputsFromChat(chat)
+    ctx.customInputs = { ...ctx.customInputs, ...inputsValues }
+    ctx.context.upload_ids = chat.getMessages()
+      .flatMap(message =>
+        (message.getValue().upload || []).map(upload => upload.id),
+      )
+  }
+
+  /**
+   * Runs an Router step of a quick command.
+   */
+  async function runRouterStep(
+    ctx: QCContext,
+    stepIndex: number, iteration: Record<string, number>,
+    progress: { update: (index: number) => void, remove: () => void },
+  ) {
+    const { qc: { slug, steps }, code, resultMap, customInputs } = ctx
+    const step = steps![stepIndex]
+    const inputData = Object.keys(customInputs).length > 0 && code ? { ...customInputs, [code]: code } : code ?? customInputs
+    try {
+      if (step.slug in iteration) {
+        iteration[step.slug] = iteration[step.slug] + 1
+      } else {
+        iteration[step.slug] = 1
+      }
+
+      const { next_step_slug } = await aiClient.calculateNextStep.mutate({
+        stepSlug: step.slug,
+        slug: slug,
+        quickCommandEvaluateStepRouterRequest: {
+          executions_count: iteration[step.slug],
+          input_data: inputData,
+          slugs_executions: resultMap,
+        },
+      })
+
+      if (next_step_slug === step.slug) {
+        return runStepsRecursively(stepIndex, progress, ctx, iteration)
+      }
+      const nextStepIndex = steps?.findIndex((step) => step.slug === next_step_slug)
+
+      if (isNil(nextStepIndex) || nextStepIndex === -1) return
+
+      return runStepsRecursively(nextStepIndex, progress, ctx, iteration)
+    }
+    catch (error: any) {
+      // eslint-disable-next-line no-console
+      console.error('Error executing QC step', error)
+    }
+  }
+
+  /**
+   * Runs a fetch step of a quick command and puts the result in the `resultMap` of the context passed as parameter.
+   */
+  async function runFetchStep(ctx: QCContext, stepIndex: number) {
+    const { qc: { slug, steps }, code, context, resultMap, customInputs, executionId, signal } = ctx
+    const step = steps![stepIndex] as QuickCommandStepFetchResponse
+    if (step.is_remote) {
+      ctx.isRemote = true
+
+      const { data } = await aiClient.fetchStepOfQuickCommandRemotely.mutate({
+        slug, stepSlug: step.slug,
+        quickCommandsExecutionRequest: {
+          code_selection: code, context, qc_execution_id: executionId,
+          slugs_executions: { ...resultMap, ...customInputs },
+        },
+      })
+
+      //data is the return of the request in the QC so we do not have full control over the response
+      //We handle the usual format with body, status_code and headers, but we might also handle other formats
+      const responseData = data as any
+      resultMap[step.slug] = {
+        status: responseData.status_code || 200,
+        data: JSON.stringify(responseData.body) ?? JSON.stringify(responseData),
+        headers: responseData.headers ?? {},
+      }
+      return
+    }
+
+    const { headers, data, method, url } = await aiClient.fetchStepOfQuickCommand.mutate({
+      slug,
+      stepSlug: step.slug,
+      quickCommandsExecutionRequest: {
+        input_data: code, context, qc_execution_id: executionId,
+        slugs_executions: { ...resultMap, ...customInputs },
+      },
+    }, 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()),
+    }
   }
+
+  /**
+   * Runs an LLM step of a quick command and puts the result in the `resultMap` of the context passed as parameter.
+   */
+  async function runLLMStep(
+    { qc: { slug, steps }, code, customInputs, context, executionId, resultMap, signal }: QCContext,
+    stepIndex: number,
+  ) {
+    const step = steps![stepIndex] as QuickCommandStepLlmResponse
+    let stepContext = context
+    if (!step.use_uploaded_files) {
+      const { upload_ids: _upload_ids, ...contextDataProps } = context
+      stepContext = { ...contextDataProps }
+    }
+
+    const stream = aiClient.streamLlmStepOfQuickCommand(
+      slug,
+      step.slug,
+      {
+        input_data: code,
+        context: stepContext,
+        qc_execution_id: executionId,
+        slugs_executions: { ...resultMap, ...customInputs },
+      },
+    )
+
+    signal.addEventListener('abort', () => stream.cancel())
+
+    let finalValue: QuickCommandPromptResponse2
+    try {
+      finalValue = await stream.getValue()
+      resultMap[step.slug] = finalValue
+    } catch (error: any) {
+      // eslint-disable-next-line no-console
+      console.error('Error executing QC step', error)
+    }
+  }
+
+  function updateProgressMessageForStep(message: ChatEntry, qc: QuickCommandResponse, stepIndex: number) {
+    const t = translate(dictionary)
+    message.setValue({
+      ...message.getValue(),
+      content: interpolate(t.progress, qc.steps?.[stepIndex]?.slug, qc.name || qc.slug),
+    })
+  }
+
+  function createProgressMessage(agent?: LabeledWithImage) {
+    return new ChatEntry({
+      agentType: 'bot',
+      content: '',
+      type: 'text',
+      agent,
+    })
+  }
+
+  function showProgressMessage(ctx: QCContext) {
+    const showImmediately = ctx.qc.steps?.some(s => s.type === 'LLM')
+    const message = createProgressMessage(ctx.chat.get('agent'))
+    const controller = {
+      update: (index: number) => updateProgressMessageForStep(message, ctx.qc, index),
+      remove: () => clearTimeout(timeout),
+    }
+    const timeout = window.setTimeout(() => {
+      const chat = ctx.chat
+      chat.pushMessage(message)
+      controller.remove = () => chat.popMessage()
+    }, showImmediately ? 0 : progressMessageDelayMS)
+    return controller
+  }
+  async function getScriptStepStatus(
+    scriptExecutionId: string,
+    interval = 5000,
+    maxAttempts = 500,
+    currentAttempt = 0,
+  ): Promise<QuickCommandScriptExecutionResponse> {
+    if (currentAttempt >= maxAttempts) {
+      throw new Error('Max attempts reached in verify script status')
+    }
+    await aiClient.getStatusScriptStep.invalidate({ scriptExecutionId })
+    const response = await aiClient.getStatusScriptStep.query({ scriptExecutionId })
+    
+    if (response.status === 'success') {
+      return response
+    }
+
+    if (response.status === 'failure') {
+      throw response
+    }
+
+    await new Promise(resolve => {setTimeout(resolve, interval)})
+
+    return getScriptStepStatus(scriptExecutionId, interval, maxAttempts, currentAttempt + 1)
+  }
+
+  async function runScriptStep(
+    { qc: { slug, steps }, code, context, resultMap, customInputs, signal }: QCContext,
+    stepIndex: number,
+  ) {
+    const step = steps![stepIndex] as QuickCommandStepLlmResponse
+    let stepContext = context
+    if (!step.use_uploaded_files) {
+      const { upload_ids: _upload_ids, ...contextDataProps } = context
+      stepContext = { ...contextDataProps }
+    }
+
+    try {
+      const { script_execution_id } = await aiClient.startScriptStep.mutate({
+        stepSlug: step.slug,
+        slug: slug,
+        quickCommandStartScriptRequest: {
+          input_data: code,
+          custom_inputs: customInputs,
+          context: stepContext,
+          slugs_executions: resultMap,
+        },
+      }, signal)
+      const scriptResult = await getScriptStepStatus(script_execution_id)
+      resultMap[step.slug] = scriptResult
+    }
+    catch (error: any) {
+      throw new Error(`Failed to execute step "${step.slug}" of quick command "${slug}". Error ${error}.`)
+    }
+  }
+
+  async function runStepsRecursively(currentIndex: number, progress: { update: (index: number) => void, remove: () => void },
+    ctx: QCContext, iteration: Record<string, number>) {
+    const { qc } = ctx
+
+    if (!qc.steps || currentIndex >= qc.steps?.length) return
+    progress.update(currentIndex)
+
+    if (qc.steps[currentIndex].type === 'ROUTER') {
+      await runRouterStep(ctx, currentIndex, iteration, progress)
+      return
+    }
+
+    if (qc.steps[currentIndex].type === 'SCRIPT') {
+      await runScriptStep(ctx, currentIndex)
+    } else {
+      await (qc.steps[currentIndex].type === 'FETCH' ? runFetchStep(ctx, currentIndex) : runLLMStep(ctx, currentIndex))
+    }
+
+    const currentStep = qc.steps?.[currentIndex] as QuickCommandStepFetchResponse | QuickCommandStepLlmResponse
+    let nextIndex = currentIndex + 1
+
+    let nextStepSlug = currentStep.next_step_slug
+    const stepResult = ctx.resultMap[currentStep.slug]
+    if (stepResult && typeof stepResult !== 'string' && 'answer_status' in stepResult && !!stepResult.answer_status?.next_step_slug) {
+      nextStepSlug = stepResult.answer_status.next_step_slug
+    }
+
+    if (nextStepSlug) {
+      nextIndex = nextStepSlug === 'end' ?
+        qc.steps.length : qc.steps?.findIndex((step) => step.slug === nextStepSlug)
+    }
+    await runStepsRecursively(nextIndex, progress, ctx, iteration)
+  }
+
+  async function runSteps(ctx: QCContext) {
+    const progress = showProgressMessage(ctx)
+    try {
+      await runStepsRecursively(0, progress, ctx, {})
+    } finally {
+      progress.remove()
+    }
+  }
+
+  async function formatResult({ qc, code, executionId, context, resultMap, customInputs, signal }: QCContext) {
+    const formatted = await aiClient.formatResultOfQuickCommand.mutate({
+      slug: qc.slug,
+      quickCommandsExecutionRequest: {
+        input_data: code,
+        context,
+        qc_execution_id: executionId,
+        slugs_executions: { ...resultMap, ...customInputs },
+      },
+    }, 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 {
+        // if we're running a command in the editor, we don't need to open a new tab, we just need to run it in a new conversation context.
+        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 && ctx.context.upload_ids?.length === 0)) {
+      widget.set('panel', 'editor')
+      ctx.chat.pushMessage(new ChatEntry({
+        agentType: 'bot',
+        type: 'text',
+        agent: ctx.chat.get('agent'),
+        content: t.requiresSelection,
+      }))
+      return 
+    }
+    manageConversationContext(ctx)
+    await computeCustomInputs(ctx)
+    await runSteps(ctx)
+    return formatResult(ctx)
+  }
+
+  /**
+   * This registers a quick command event in the backend (analytics).
+   */
+  async function registerAnalyticsEvent({ qc, isRemote, 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,
+            //@ts-ignore
+            is_remote: isRemote,
+          },
+          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.')
+    }
+  }
+
+  /**
+   * Writes the result in the chat or in the editor.
+   */
+  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',
+        updated: new Date().toISOString(),
+      }))
+    } 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 })
+    }
+  }
+
+  /**
+   * The chat interceptor itself.
+   * @param entry the chat entry.
+   * @param chat the chat state.
+   * @param signal a signal that can be canceled by the user.
+   * @returns false if, and only if, this entry (trimmed) matches the quick command regex. Undefined otherwise.
+   */
+  async function quickCommandInterceptor(entry: ChatEntry, chat: ChatState, signal: AbortSignal) {
+    const { agentType, content } = entry.getValue()
+    if (!chat.get('features')?.quickCommands || agentType !== 'user' || !quickCommandRegex.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, entry) ?? {},
+      executionId: ulid(),
+      resultMap: {},
+      customInputs: {},
+      signal,
+    }
+    chat.set('isLoading', true)
+    const start = new Date().getTime()
+    try {
+      const result = await runQuickCommand(ctx)
+      if (result) {
+        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: 'Select the code in the editor next to it for this quick command to interact with it.',
+    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 step "$0" from Quick Command "$1".',
+    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: 'Selecione o código no editor ao lado para que este quick command possa interagir com ele.',
+    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 step "$0" do Quick Command "$1".',
+    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