@stack-spot/ai-chat-widget 1.0.0-dev.1769120820021 → 1.0.0-dev.1769797270860

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

@@ -1,24 +1,43 @@
-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, 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'
+import appData from '../app-metadata.json'
 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 { defaultLanguage } from '../utils/programming-languages'
 import { CustomInputs } from './CustomInputs'
 
+export function buildQuickCommandContext(state: ChatState, message?: ChatEntry) {
+  return {
+    workspace: state.get('workspace')?.id,
+    conversation_id: state.id,
+    stack_id: state.get('stack')?.id,
+    language: state.get('codeLanguage') || (state.get('codeSelection') ? defaultLanguage : undefined),
+    knowledge_sources: state.get('knowledgeSources')?.map(ks => ks.id),
+    upload_ids: message?.getValue().upload?.map(f => f.id),
+    agent_id: state.get('agent')?.id,
+    agent_built_in: state.get('agent')?.builtIn,
+    os: navigator.userAgent,
+    platform: 'web-widget',
+    platform_version: navigator.userAgent,
+    stackspot_ai_version: appData.version,
+    selected_model_id: state.get('selected_model_id'),
+  }
+}
+
+type QuickCommandContext = ReturnType<typeof buildQuickCommandContext>
+
 type SlugExecution = Record<string, QuickCommandStepResult>
 
 interface QCContext {
   qc: QuickCommandResponse,
-  context: Required<FixedChatRequest>['context'],
+  context: QuickCommandContext,
   resultMap: SlugExecution,
   customInputs: Record<string, string>,
   chat: ChatState,
@@ -73,132 +92,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 +123,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 +163,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 +172,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
   }
 
   /**
@@ -455,19 +218,17 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
       qc: { slug } as QuickCommandResponse,
       chat,
       code: chat.get('codeSelection'),
-      context: buildConversationContext(chat, entry) ?? {},
+      context: buildQuickCommandContext(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}`
@@ -480,7 +241,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

@@ -1,5 +1,4 @@
-import { AgentInfo, aiClient, ChatResponseWithPMResources, ChatResponseWithSteps, ChatStep, StackspotAPIError, StreamCanceledError } from '@stack-spot/portal-network'
-import { ChatResponse3 } from '@stack-spot/portal-network/api/ai'
+import { AgentInfo, aiClient, ChatResponse, ChatResponseWithPMResources, ChatResponseWithSteps, ChatStep, genAiInferenceClient, StackspotAPIError, StreamCanceledError } from '@stack-spot/portal-network'
 import { findLast } from 'lodash'
 import { ChatEntry, KnowledgeSource, TextChatEntry } from '../state/ChatEntry'
 import { ChatState } from '../state/ChatState'
@@ -27,13 +26,13 @@ export function createEntryValueFromChatResponse(
   const entry = {
     agentType: 'bot',
     type: 'md',
-    content: response.answer ?? '',
+    content: response.message ?? '',
     messageId: response.message_id ?? undefined,
     knowledgeSources,
     agent: agent,
     updated: includeDate ? new Date().toISOString() : undefined,
     steps: response.steps,
-    tools: response.tools,
+    tools: response.tools_id,
     opportunities: response.opportunities,
     hypothesis: response.hypothesis,
     prfaq: response.prfaq,
@@ -112,39 +111,44 @@ const updatePlanningMessage = (messages: ChatEntry[]) => {
 
 export function helperSendMessage(messages: ChatEntry[], value: Partial<ChatResponseWithSteps> & { opportunities?: any },
   chat: ChatState, botEntry: ChatEntry, knowledgeSources: KnowledgeSource[] | undefined) {
-  if (value.agent_info?.type === 'planning') {
-    if (value.agent_info.action === 'start') {
-      chat.set('isPlaning', true)
-    } else {
-      chat.set('isPlaning', false)
+  for (const agent_info of value.agent_info ?? []) {
+    if (agent_info?.type === 'planning') {
+      if (agent_info.action === 'start') {
+        chat.set('isPlaning', true)
+      } else {
+        chat.set('isPlaning', false)
+      }
     }
-  }
 
-  if (value.agent_info?.type === 'chat' && value.agent_info?.action === 'end') {
-    //When an error happens, the step can still be running, so we enforce the error
-    const stepRunning = findLast(value.steps, (item) => item.status === 'running')
-    if (stepRunning?.status) {
-      stepRunning.status = 'error'
+    if (agent_info?.type === 'chat' && agent_info?.action === 'end') {
+      //When an error happens, the step can still be running, so we enforce the error
+      const stepRunning = findLast(value.steps, (item) => item.status === 'running')
+      if (stepRunning?.status) {
+        stepRunning.status = 'error'
+      }
     }
-  }
 
-  if (value.sources?.length !== knowledgeSources?.length && chat.get('features').showSourcesInResponse) {
-    knowledgeSources = genericSourcesToKnowledgeSources(value.sources)
-  }
+    const lastPlanningAwaiting = getLastPlanningAwaiting(messages)
+    if (lastPlanningAwaiting && value.steps) {
+      value.steps?.map(step => {
+        if (step.type === 'planning') {
+          updatePlanningMessage(messages)
+        } else if (step.type === 'step') {
+          updateStepMessage(step, messages)
+        }
+      })
+    }
 
-  const lastPlanningAwaiting = getLastPlanningAwaiting(messages)
-  if (lastPlanningAwaiting && value.steps) {
-    value.steps?.map(step => {
-      if (step.type === 'planning') {
-        updatePlanningMessage(messages)
-      } else if (step.type === 'step') {
-        updateStepMessage(step, messages)
-      }
-    })
+    if (agent_info?.type === 'tool' && agent_info?.action !== 'awaiting_approval') {
+      updateToolStatus(agent_info, messages)
+    }
   }
 
-  if (value.agent_info?.type === 'tool' && value.agent_info?.action !== 'awaiting_approval') {
-    updateToolStatus(value.agent_info, messages)
+  if (chat.get('features').showSourcesInResponse) {
+    const mergedSources = [...(value.source ?? []), ...(value.cross_account_source ?? [])]
+    if (mergedSources.length !== (knowledgeSources?.length ?? 0)) {
+      knowledgeSources = genericSourcesToKnowledgeSources(mergedSources)
+    }
   }
 
   if (value.steps) {
@@ -193,7 +197,7 @@ export function helperSendMessage(messages: ChatEntry[], value: Partial<ChatResp
 export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState, signal: AbortSignal) {
   const { agentType, content, data } = entry.getValue()
   if (agentType !== 'user') return
-  const context = buildConversationContext(chat, entry)
+  const context = buildConversationContext(chat, entry, buildPrompt(content, data))
   chat.set('isLoading', true)
   const untitled = chat.untitled
   const messages = chat.getMessages()
@@ -202,12 +206,8 @@ 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), 
-    agent_version_number: chat.get('agent')?.agent_version_number,
-  })
+
+  const stream = genAiInferenceClient.sendChatMessage(context)
   signal.addEventListener('abort', () => stream.cancel())
   const botEntry = ChatEntry.createStreamedBotEntry()
   // we add the chat entry and show the streaming if the streaming feature is enabled
@@ -220,14 +220,14 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
     helperSendMessage(messages, value, chat, botEntry, knowledgeSources)
   })
 
-  let finalValue: Partial<ChatResponse3> | undefined
+  let finalValue: Partial<ChatResponse> | undefined
   try {
     finalValue = await stream.getValue()
 
     const lastPlanningAwaiting = getLastPlanningAwaiting(messages)
     if (lastPlanningAwaiting) {
       const value = lastPlanningAwaiting.getValue()
-      value.content = finalValue.answer || value.content
+      value.content = finalValue.message || value.content
       lastPlanningAwaiting.setValue(value)
     }
     // if the streaming feature is not enabled, we only add the chat entry once the streaming has finished
@@ -247,7 +247,7 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
       })
     }
   }
-  if (finalValue?.answer) {
+  if (finalValue?.message) {
     botEntry.setValue({
       ...createEntryValueFromChatResponse(finalValue, botEntry.getValue().knowledgeSources, chat.get('agent'), true),
       hasPlanning: botEntry.getValue().hasPlanning,

package/src/components/FileDescription.tsx

@@ -94,7 +94,7 @@ export const FileDescription = ({ fileName, icon, status, onRemove, onRetry }: F
         icon="TimesMini"
         onClick={onRemove}
         title={t.remove}
-        arial-label={`${t.remove} ${name}`}
+        aria-label={name}
         style={{ alignSelf: 'start' }}
         size="xs"
       />}

package/src/components/Markdown.tsx

@@ -4,7 +4,9 @@
 
 import { Children, Fragment } from 'react'
 import ReactMarkdown from 'react-markdown'
+import rehypeKatex from 'rehype-katex'
 import remarkGfm from 'remark-gfm'
+import remarkMath from 'remark-math'
 import { WithChildren } from '../types'
 import { Code, Props as CodeProps } from './Code'
 
@@ -29,26 +31,43 @@ export const Markdown = (
     onCopyCode,
     children,
   }: Props,
-) => (
-  <>
-    <ReactMarkdown
-      className="markdown apply-citric"
-      remarkPlugins={[[remarkGfm]]}
-      components={{
-        a: props => <a target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'underline' }} {...props} />,
-        code: props =>
-          <Code
-            {...props}
-            onInsertCode={onInsertCode}
-            onNewFile={onNewFile}
-            onCopyCode={onCopyCode}
-            showActionBar
-          />,
-        pre: ({ children }) => <>{children}</>,
-        p: ({ children }) => <p>{Children.map(children, renderP)}</p>,
-      }}
-    >
-      {children}
-    </ReactMarkdown>
-  </>
-)
+) => {
+  
+  // fix parsing LaTex: https://github.com/remarkjs/react-markdown/issues/785
+  const content = typeof children === 'string'
+    ? children
+      .replace(/\\\\\[/g, '$$$$') // Replace '\\[' with '$$'
+      .replace(/\\\\\]/g, '$$$$') // Replace '\\]' with '$$'
+      .replace(/\\\\\(/g, '$$$$') // Replace '\\(' with '$$'
+      .replace(/\\\\\)/g, '$$$$') // Replace '\\)' with '$$'
+      .replace(/\\\[/g, '$$$$') // Replace '\[' with '$$'
+      .replace(/\\\]/g, '$$$$') // Replace '\]' with '$$'
+      .replace(/\\\(/g, '$$$$') // Replace '\(' with '$$'
+      .replace(/\\\)/g, '$$$$') // Replace '\)' with '$$';
+    : children
+
+  return (
+    <>
+      <ReactMarkdown
+        className="markdown apply-citric"
+        remarkPlugins={[[remarkMath, { singleDollarTextMath: true }], remarkGfm]}
+        rehypePlugins={[rehypeKatex]}
+        components={{
+          a: props => <a target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'underline' }} {...props} />,
+          code: props =>
+            <Code
+              {...props}
+              onInsertCode={onInsertCode}
+              onNewFile={onNewFile}
+              onCopyCode={onCopyCode}
+              showActionBar
+            />,
+          pre: ({ children }) => <>{children}</>,
+          p: ({ children }) => <p>{Children.map(children, renderP)}</p>,
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </>
+  )
+}

package/src/components/Selector/index.tsx

@@ -42,7 +42,7 @@ interface ListProps<T> {
   filter?: string,
   visibility?: SectionVisibility,
   selectorConfig: SelectorConfig<T>,
-  onSelect: (item: T) => void,
+  onSelect: (item: T, selectedVersion?: number) => void,
   favorite?: Favorite<T>,
 }
 
@@ -76,7 +76,7 @@ interface SelectorConfig<T> {
   isEnabled: boolean,
   sections: SectionVisibility[],
   renderComponentItem: FC<T>,
-  onSelect: (item: T) => void,
+  onSelect: (item: T, selectedVersion?: number) => void,
   /**
    * A react hook or a simple function that returns the selectable items.
    * 
@@ -104,7 +104,7 @@ const ListItem = <T extends Item>({ item, selectorConfig, onSelect, favorite }:
     <li>
       <button
         className="selector"
-        onClick={() => onSelect(item)}
+        onClick={() => onSelect(item, selectedVersion)}
         onKeyDown={(e) => e.key === 'Enter' && e.preventDefault()}
         onFocus={(e) => e.target.closest('li')?.classList.add('focus')}
         onBlur={(e) => e.target.closest('li')?.classList.remove('focus')}
@@ -157,14 +157,14 @@ const List = <T extends Item>({ selectorConfig, filter, visibility, onSelect, fa
   )
 }
 
-const SelectorContent = ({ filter, onClose, selectorConfig, favorite }: ContentProps<any>) => {
+const SelectorContent = <T, > ({ filter, onClose, selectorConfig, favorite }: ContentProps<T>) => {
   const t = useTranslate(dictionary)
   const ref = useRef<HTMLDivElement>(null)
   const [visibility, setVisibility] = useState<SectionVisibility | undefined>()
   const isGroupResourcesByScope = useWidgetState('features')?.groupResourcesByScope
   const { resourceName, icon, onSelect, sections } = selectorConfig
-  const onSelectItem = useCallback((slug: string) => {
-    onSelect(slug)
+  const onSelectItem = useCallback((item: any, selectedVersion?: number) => {
+    onSelect(item, selectedVersion)
     onClose()
   }, [])