@stack-spot/ai-chat-widget 1.0.0-dev.1769003016623 → 1.0.0-dev.1769537635610

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

@@ -1,7 +1,6 @@
-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 { aiClient, CancelledError, FixedChatRequest, QCContext as QCContextLib, StackspotAPIError } from '@stack-spot/portal-network'
+import { QuickCommandResponse, QuickCommandStepResult } 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'
@@ -11,7 +10,6 @@ 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'
 
 type SlugExecution = Record<string, QuickCommandStepResult>
@@ -73,132 +71,6 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
       )
   }
 
-  /**
-   * 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({
@@ -230,115 +102,17 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
     }, 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) {
+  async function runQC(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
+    // await runStepsRecursively(0, progress, ctx, {}
+    const { qc, ...props } = ctx
+    const context: QCContextLib = { ...props, slug: qc.slug }
+    const finalResult = await aiClient.runQuickCommand(context, progress)
+
+    progress.remove()
+    return finalResult
   }
 
   // opens a new chat tab if the quick command doesn't preserve the conversation and the current conversation isn't clean.
@@ -368,7 +142,7 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
     } 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({
@@ -377,44 +151,12 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
         agent: ctx.chat.get('agent'),
         content: t.requiresSelection,
       }))
-      return 
+      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.')
-    }
+    const result = await runQC(ctx)
+    return result
   }
 
   /**
@@ -462,12 +204,10 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
       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}`
@@ -480,7 +220,6 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
         agent: chat.get('agent'),
         type: 'text',
       }))
-      registerAnalyticsEvent(ctx, message, start)
     }
     ctx.chat.set('isLoading', false)
     // prevents the next interceptors from running

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

@@ -202,8 +202,12 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
     chat.set('label', content || entry.getValue().upload?.[0]?.name || 'Chat')
     chat.untitled = false
   }
-
-  const stream = aiClient.sendChatMessage({ context, user_prompt: buildPrompt(content, data) })
+  
+  const stream = aiClient.sendChatMessage({ 
+    context, 
+    user_prompt: buildPrompt(content, data), 
+    agent_version_number: chat.get('agent')?.agent_version_number,
+  })
   signal.addEventListener('abort', () => stream.cancel())
   const botEntry = ChatEntry.createStreamedBotEntry()
   // we add the chat entry and show the streaming if the streaming feature is enabled

package/src/components/Selector/SelectVersion.tsx

@@ -0,0 +1,55 @@
+
+import { Select } from '@stack-spot/citric-react'
+import { useTranslate } from '@stack-spot/portal-translate'
+import { Dispatch, MouseEvent, SetStateAction, useEffect, useState } from 'react'
+import { isEqual } from 'lodash'
+import { VersionSelector } from './styled'
+
+interface Props {
+  value?: number,
+  onChange: Dispatch<SetStateAction<number | undefined>>,
+  options?: number[],
+  lazyLoadOptions?: boolean,
+  useVersions?: (id: string, enabled: boolean) => number[] | undefined,
+  id: string,
+}
+
+export const SelectVersion = ({ useVersions, value, onChange, options: initialOptions, id, lazyLoadOptions=false }: Props) => {
+  const t = useTranslate(dictionary)
+  const [options, setOptions] = useState(initialOptions)
+  const [enabled, setEnabled] = useState(!lazyLoadOptions)
+  const versions = useVersions?.(id, enabled)
+
+  const onClick = (e?:  MouseEvent<HTMLDivElement>) => {
+    e?.stopPropagation()
+    if (lazyLoadOptions) {
+      setEnabled(true)
+    }
+  }
+
+  useEffect(() => {
+    if (lazyLoadOptions && !isEqual(versions, options)){
+      setOptions(versions)
+    }
+  }, [versions])
+
+  return (
+    <VersionSelector>
+      <Select className="version-selector" 
+        options={options || []} 
+        value={value} 
+        onChange={onChange} 
+        onClick={onClick}
+        renderLabel={(item) =>`${t.version} ${item}`} />
+    </VersionSelector>
+  )  
+}
+
+const dictionary = {
+  en: {
+    version: 'Version',
+  },
+  pt: {
+    version: 'Versão',
+  },
+}

package/src/components/Selector/index.tsx

@@ -10,6 +10,7 @@ import { useCurrentChatState, useWidgetState } from '../../context/hooks'
 import { getUrlToStackSpotAI } from '../../utils/url'
 import { ButtonFavorite } from '../ButtonFavorite'
 import { Fading } from '../Fading'
+import { SelectVersion } from './SelectVersion'
 import { SelectorBox } from './styled'
 
 type SectionVisibility =  AgentVisibilityLevel | VisibilityLevelEnum
@@ -20,6 +21,7 @@ interface Item {
   slug: string,
   description: string,
   visibility_level: SectionVisibility,
+  version_number?: number,
 }
 
 interface Favorite<T> {
@@ -69,6 +71,8 @@ interface SelectorConfig<T> {
   regex: RegExp,
   urlBuilder: (item: T) => string,
   searchProp: keyof T,
+  isEnabledVersionContent?: boolean,
+  useVersions?: (id: string, enabled: boolean) => number[] | undefined,
   isEnabled: boolean,
   sections: SectionVisibility[],
   renderComponentItem: FC<T>,
@@ -91,10 +95,11 @@ interface SelectorProps<T> {
 
 const ListItem = <T extends Item>({ item, selectorConfig, onSelect, favorite }: ListItemProps<T>) => {
   const t = useTranslate(dictionary)
-  const { urlBuilder, renderComponentItem } = selectorConfig
+  const { urlBuilder, renderComponentItem, useVersions, isEnabledVersionContent } = selectorConfig
   const linkTitle = interpolate(t.open, item.slug)
   const listFavorites = favorite?.useFavorites?.()
-  
+  const [selectedVersion, setSelectedVersion] = useState(item.version_number)
+
   return (
     <li>
       <button
@@ -106,6 +111,10 @@ const ListItem = <T extends Item>({ item, selectorConfig, onSelect, favorite }:
       >
         {renderComponentItem(item)}
       </button>
+      {isEnabledVersionContent && 
+        <SelectVersion options={item.version_number ? [item.version_number] : []}  id={item.id}
+          value={selectedVersion} onChange={setSelectedVersion} lazyLoadOptions={true} useVersions={useVersions}
+        /> }
       <IconLink
         icon="ExternalLink"
         title={linkTitle}

package/src/components/Selector/styled.ts

@@ -156,3 +156,50 @@ export const SelectorBox = styled.div<{ $tabsCount: number }>`
     }
   }
 `
+
+export const VersionSelector = styled.div`
+  position: relative;
+  min-width: 100px;
+
+  .version-selector {
+    height: 28px;
+    position: absolute;
+    top: -18px;
+    left: -12px;
+
+    header {
+      height: 20px;
+      background-color: ${theme.color.light[300]};
+      border: none;
+      margin-bottom: 0;
+      gap: 0;
+      padding: 0;
+      
+    }
+    .selection-panel .options{
+      overflow: hidden;
+    }
+    li {
+      gap: 5px;
+      padding: 0 8px 0 !important;
+      padding-left: 5px;
+    }
+  }
+
+`
+
+export const VersionSelectorBox = styled.div`
+  border: 1px solid ${theme.color.light[500]};
+  border-radius: 4px;
+  .version-selector {
+    position: relative;
+    top: 0;
+    left: 0;
+  }
+  > div {
+    position: relative;
+    .options {
+      overflow: hidden;
+    }
+  }
+`

package/src/hooks/enabled-feature-flags.ts

@@ -0,0 +1,31 @@
+import { accountClient } from '@stack-spot/portal-network'
+
+const useEnabledFeatureFlags = (resourceType?: string, resourceSlug?: string) => {
+  const queryParams = resourceType && resourceSlug ? { [resourceType]: resourceSlug } : {}
+  const [featureFlags, , error, { isLoading }] = accountClient.getEnabledFeatureFlagsForAccount.useStatefulQuery({
+    queryParams,
+  })
+  return { featureFlags, isLoading, error }
+}
+
+export const useIsFeatureFlagEnabled = (
+  flagSlug: string,
+  resourceType?: string,
+  resourceSlug?: string,
+) => {
+  const { featureFlags, isLoading } = useEnabledFeatureFlags(resourceType, resourceSlug)
+  if (resourceType && resourceSlug) {
+    const featureFlag = featureFlags?.find((flag) => flag.slug === flagSlug)
+    const resourcesByType = featureFlag?.resources?.[resourceType]
+    if (!!featureFlag && !!resourcesByType) {
+      if (resourcesByType.mode === 'ALL') {
+        return { flagEnabled: true, isLoading }
+      } else {
+        return { flagEnabled: !!featureFlag.resources?.[resourceType].slugs.some((slug) => slug === resourceSlug), isLoading }
+      }
+    }
+    return { flagEnabled: false, isLoading }
+  } else {
+    return { flagEnabled: !!featureFlags?.some((flag) => flag.slug === flagSlug), isLoading }
+  }
+}

package/src/state/types.ts

@@ -11,6 +11,7 @@ export interface LabeledAgent extends LabeledWithImage {
   builtIn?: boolean,
   slug?: string,
   visibility_level?: string,
+  agent_version_number?: number,
 }
 
 export interface FileSize {

package/src/utils/tools.ts

@@ -1,9 +1,9 @@
 
-export type ToolWithImage = { id?: string, image?: string, name: string, description?: string }
+export type ToolWithImage = { id?: string | null, image?: string, name?: string, description?: string }
 
 interface Toolkit {
   id?: string | null,
-  tools?: { id?: string, name?: string, description?: string, function?: { name: string, description?: string } }[] | null,
+  tools?: { id?: string | null, name?: string, description?: string, function?: { name: string, description: string } | null }[] | null,
   image_url?: string | null,
   avatar?: string | null,
 }
@@ -22,8 +22,8 @@ export function toolById(id: string, toolkits: Toolkit[] | undefined): ToolWithI
   if (mcp) {
     const [, toolkitId, toolName] = mcp
     const toolkit = toolkits?.find(tk => tk.id === toolkitId)
-    const tool = toolkit?.tools?.find(t => t.name === toolName)
-    return { id, image: toolkit?.avatar ?? undefined, name: toolName, description: tool?.function?.description }
+    const tool = toolkit?.tools?.find(t => t.name === toolName || t.function?.name === toolName)
+    return { id, image: toolkit?.avatar ?? undefined, name: tool?.function?.name, description: tool?.function?.description }
   }
   const { tool, toolkit } = findToolById(id, toolkits ?? []) ?? {}
   return (tool && toolkit)