@stack-spot/ai-chat-widget 1.31.2-beta.1 → 1.32.0

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

@@ -1,5 +1,5 @@
 import { aiClient, CancelledError, FixedChatRequest, StackspotAPIError } from '@stack-spot/portal-network'
-import { QuickCommandFetchResponseResult, QuickCommandPromptResponse2, QuickCommandResponse, QuickCommandStepFetchResponse, QuickCommandStepLlmResponse } from '@stack-spot/portal-network/api/ai'
+import { QuickCommandFetchResponseResult, QuickCommandPromptResponse2, QuickCommandResponse, QuickCommandStepFetchResponse } 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'
@@ -13,13 +13,12 @@ import { buildConversationContext } from '../utils/chat'
 import { getSizeOfString } from '../utils/string'
 import { CustomInputs } from './CustomInputs'
 
-type SlugExecution = Record<string, QuickCommandFetchResponseResult | QuickCommandPromptResponse2>
+type SlugExecution = Record<string, string | QuickCommandFetchResponseResult | QuickCommandPromptResponse2>
 
 interface QCContext {
   qc: QuickCommandResponse,
   context: Required<FixedChatRequest>['context'],
   resultMap: SlugExecution,
-  customInputs: Record<string, string>,
   chat: ChatState,
   code?: string,
   executionId: string,
@@ -65,61 +64,21 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
     const inputsValues = await customInputs.getValue()
     chat.set('isLoading', true)
     CustomInputs.deleteCustomInputsFromChat(chat)
-    ctx.customInputs = { ...ctx.customInputs, ...inputsValues }
-  }
-
-  /**
-   * Runs an Router step of a quick command.
-   */
-  async function runRouterStep(
-    ctx: QCContext,
-    stepIndex: number, iteration: 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 {
-      const { next_step_slug } = await aiClient.calculateNextStep.mutate({ 
-        stepSlug: step.slug, 
-        slug: slug, 
-        quickCommandEvaluateStepRouterRequest: {
-          executions_count: iteration,
-          input_data: inputData,
-          slugs_executions: resultMap,
-        },
-      })
-    
-      if (next_step_slug === step.slug) {
-        return runStepsRecursively(stepIndex, progress, ctx, iteration+1)
-      }
-      const nextStepIndex = steps?.findIndex((step) => step.slug === next_step_slug)
-      
-      if (!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)
-    }
+    ctx.resultMap = { ...ctx.resultMap, ...inputsValues }
   }
 
   /**
    * 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 { qc: { slug, steps }, code, context, resultMap, 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 }, 
-        },
+        quickCommandsExecutionRequest: { code_selection: code, context, slugs_executions: resultMap, qc_execution_id: executionId },
       })
 
       //data is the return of the request in the QC so we do not have full control over the response
@@ -136,9 +95,7 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
     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 }, 
-      },
+      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 })
@@ -154,17 +111,12 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
    * 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,
+    { qc: { slug, steps }, code, context, executionId, resultMap, signal }: QCContext,
     stepIndex: number,
   ) {
     const step = steps![stepIndex]
     const stream = aiClient.streamLlmStepOfQuickCommand(
-      slug, step.slug, { 
-        input_data: code, 
-        context, 
-        qc_execution_id: executionId, 
-        slugs_executions: { ...resultMap, ...customInputs }, 
-      },
+      slug, step.slug, { input_data: code, context, qc_execution_id: executionId, slugs_executions: resultMap },
     )
  
     signal.addEventListener('abort', () => stream.cancel())
@@ -183,7 +135,7 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
     const t = translate(dictionary)
     message.setValue({
       ...message.getValue(),
-      content: interpolate(t.progress, qc.steps?.[stepIndex]?.slug, qc.name || qc.slug),
+      content: interpolate(t.progress, qc.name || qc.slug, stepIndex + 1, qc.steps?.[stepIndex]?.slug, qc.steps?.length),
     })
   }
 
@@ -211,44 +163,27 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
     return controller
   }
 
-  async function runStepsRecursively(currentIndex: number, progress: { update: (index: number) => void, remove: () => void },
-    ctx: QCContext, iteration: 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
-    } 
-    const currentStep = qc.steps?.[currentIndex] as QuickCommandStepFetchResponse | QuickCommandStepLlmResponse
-    await (currentStep.type === 'FETCH' ? runFetchStep(ctx, currentIndex) : runLLMStep(ctx, currentIndex))
-    
-    let nextIndex = currentIndex + 1
-    if (currentStep.next_step_slug) {
-      nextIndex = currentStep.next_step_slug === 'end' ? 
-        qc.steps.length : qc.steps?.findIndex((step) => step.slug === currentStep.next_step_slug) 
-    }
-    await runStepsRecursively(nextIndex, progress, ctx, iteration)
-  }
-
   async function runSteps(ctx: QCContext) {
+    const { qc } = ctx
     const progress = showProgressMessage(ctx)
     try {
-      await runStepsRecursively(0, progress, ctx, 0)
+      for (let i = 0; i < (qc.steps?.length ?? 0); i++) {
+        progress.update(i)
+        await (qc.steps?.[i].type === 'FETCH' ? runFetchStep(ctx, i) : runLLMStep(ctx, i))
+      }
     } finally {
       progress.remove()
     }
   }
 
-  async function formatResult({ qc, code, executionId, context, resultMap, customInputs, signal }: QCContext) {
+  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, ...customInputs },
+        slugs_executions: resultMap,
       },
     }, signal)
     return formatted.result
@@ -363,7 +298,6 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
       context: buildConversationContext(chat) ?? {},
       executionId: ulid(),
       resultMap: {},
-      customInputs: {},
       signal,
     }
     chat.set('isLoading', true)
@@ -397,14 +331,14 @@ const dictionary = {
   en: {
     requiresSelection: 'This quick command requires some code to be selected in the editor. To open the editor click the icon "{/}" in the field below.',
     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".',
+    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. Para abrir o editor clique no ícone "{/}" no campo abaixo.',
     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".',
+    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 "\\".',
   },

package/src/components/RightPanelContentList.tsx

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react'
+import { RightPanelForm } from './RightPanelForm'
+
+interface Props {
+  children: ReactElement,
+}
+
+/**
+ * List content for the right panel.
+ */
+export const RightPanelContentList = ({ children }: Props) => (
+  <RightPanelForm>
+    {children}
+  </RightPanelForm>
+)

package/src/components/Selector/index.tsx

@@ -5,7 +5,7 @@ import { useKeyboardControls } from '@stack-spot/portal-components'
 import { AgentVisibilityLevel } from '@stack-spot/portal-network'
 import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
 import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { useCurrentChatState } from '../../context/hooks'
+import { useCurrentChatState, useWidgetState } from '../../context/hooks'
 import { getUrlToStackSpotAI } from '../../utils/url'
 import { ButtonFavorite } from '../ButtonFavorite'
 import { Fading } from '../Fading'
@@ -112,7 +112,6 @@ const List = <T extends Item>({ selectorConfig, filter, visibility, onSelect, fa
   const t = useTranslate(dictionary)
   const items = selectorConfig.useData()
   const favorites = favorite?.useFavorites?.()
-
   const filtered = useMemo(() => {
     if (!filter && !visibility) return [...items]
     const lowerFilter = filter?.toLowerCase() ?? ''
@@ -152,6 +151,7 @@ const SelectorContent = ({ filter, onClose, selectorConfig, favorite }: ContentP
   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)
@@ -184,10 +184,12 @@ const SelectorContent = ({ filter, onClose, selectorConfig, favorite }: ContentP
         <Text as="h3" className="uppercase"> {resourceName} </Text>
       </header>
       <div className="body">
-        <ul className="tabs">
-          {createSectionItem()}
-          {sections.map(createSectionItem)}
-        </ul>
+        {isGroupResourcesByScope && (
+          <ul className="tabs">
+            {createSectionItem()}
+            {sections.map(createSectionItem)}
+          </ul>
+        )}
         <FallbackBoundary message={interpolate(t.error, selectorConfig.resourceName)} mini>
           <List filter={filter} visibility={visibility} selectorConfig={selectorConfig} onSelect={onSelectItem} favorite={favorite} />
         </FallbackBoundary>

package/src/features.ts

@@ -41,11 +41,27 @@ export interface ChatFeatures {
   streaming: boolean,
 }
 
+export type Scope = 'favorite' | 'builtin' | 'personal' | 'shared' | 'workspace' | 'account'
+
 export interface GlobalFeatures {
   /**
    * Enables the chat history.
    */
   chatHistory: boolean,
+  /**
+   * When selecting a resource, they're separated by scope (account, personal, workspace, etc.).
+   * 
+   * If this is set, only the scopes in this list will be enabled.
+   */
+  scopes?: Scope[],
+ /**
+   * When set, only items(knowledge sources, agents, stacks ai, quick commands) from that workspace will be shown to the user.
+   */
+  workspaceId?: string,
+  /**
+   * when set to false it does not show tab by scope, it shows a single list.
+   */
+  groupResourcesByScope?: boolean,
 }
 
 export type AIWidgetFeatures = ChatFeatures & GlobalFeatures
@@ -68,6 +84,7 @@ export function getFeaturesWithDefaults(features?: Partial<AIWidgetFeatures>): A
     upload: true,
     streaming: true,
     showSourcesInResponse: true,
+    groupResourcesByScope: true,
     ...features,
   }
 }

package/src/index.ts

@@ -16,3 +16,4 @@ export { ObservableState } from './state/ObservableState'
 export type { Labeled, LabeledAgent, LabeledWithImage } from './state/types'
 export { WidgetState } from './state/WidgetState'
 export { defaultLanguage, languages } from './utils/programming-languages'
+

package/src/layout.css

@@ -143,6 +143,10 @@
   display: flex;
   flex-direction: column;
 
+  code {
+     overflow: auto;
+  }
+  
   &.visible {
     left: 50%;
   }
@@ -205,4 +209,4 @@
   z-index: 9999;
   pointer-events: auto;
   color: var(--light-contrastText)
-}
+}

package/src/state/constants.ts

@@ -1,7 +1,7 @@
 import { FileSize } from './types'
 
 export const acceptedFileTypes = [
-  'json', 'yaml', 'txt', 'md', 'json', 'yaml', 'pdf', /*'xls', 'xlsx', 'csv',*/ 'cbl', 'cpp', 'cxx', 'cc', 'c', 'hpp', 'hxx', 'hh', 'h',
+  'json', 'yaml', 'txt', 'md', 'json', 'yaml', 'pdf', /*'xls', 'xlsx',*/ 'csv', 'cbl', 'cpp', 'cxx', 'cc', 'c', 'hpp', 'hxx', 'hh', 'h',
   'cs', 'go', 'html', 'htm', 'kt', 'kts', 'md', 'php', 'proto', 'py', 'java', 'js', 'jsx', 'ts', 'tsx', 'rst', 'rb', 'rs', 'scala', 'swift',
   'sql', 'yaml', 'yml', 'tf', 'sh', 'ps1', 'psd1', 'psm1', 'bat', 'cmd', 'rego', 'f', 'for', 'r', 'pl', 'vb', 'dart', 'hs', 'lua',
   'asm', 'groovy', 'gvy', 'gy', 'mat', 'clj', 'lisp', 'm', 'cls', 'css', 'scss', 'json', 'jpg', 'jpeg', 'png',

package/src/views/Agents/AgentDescription.tsx

@@ -28,7 +28,7 @@ export const AgentDescription = ({ agentId }: { agentId?: string }) => {
   }, [numberOfKnowledgeSources])
   const tools = useMemo(() => {
     const result: React.ReactElement[] = []
-    const builtInTools = agent?.toolkits?.builtin_toolkits?.[0].tools
+    const builtInTools = agent?.toolkits?.builtin_toolkits?.[0]?.tools
     const customToolkits = agent?.toolkits?.custom_toolkits ?? []
     for (const tool of builtInTools ?? []) {
       const toolWithImage = toolById(tool.id, toolKits)

package/src/views/Agents/AgentsPanel.tsx

@@ -1,11 +1,15 @@
 import { agentToolsClient } from '@stack-spot/portal-network'
-import { useEffect, useMemo, useRef } from 'react'
+import { ReactElement, useEffect, useRef } from 'react'
+import { RightPanelContentList } from '../../components/RightPanelContentList'
 import { RightPanelTabs } from '../../components/RightPanelTabs'
-import { useCurrentChat } from '../../context/hooks'
+import { useCurrentChat, useWidgetState } from '../../context/hooks'
+import { Scope } from '../../features'
 import { checkIsTrial } from '../../utils/check-is-trial'
 import { AgentsTab, AgentsTabWorkspace } from './AgentsTab'
 import { useAgentsDictionary } from './dictionary'
 
+type TabElement = { title: string, content: ReactElement }
+
 /**
  * Renders the Agent selection form in the Right Panel if this is the panel that is currently opened.
  */
@@ -14,6 +18,10 @@ export const AgentsPanel = () => {
   const chat = useCurrentChat()
   const isTrial = checkIsTrial()
   const agent = useRef(chat.get('agent'))
+  const features = useWidgetState('features')
+  const isGroupResourcesByScope = features?.groupResourcesByScope
+  const scopes = features?.scopes ?? []
+  const spotId = features?.workspaceId
 
   useEffect(() => {
     if (agentToolsClient.agentDefaultSlug !== chat.get('agent')?.slug) {
@@ -21,19 +29,30 @@ export const AgentsPanel = () => {
     }
   }, [chat])
 
-  const tabs= useMemo(() => isTrial ? [
-    { title: t.favorites, content: <AgentsTab key="favorite" visibility="favorite" agent={agent} /> },
-    { title: t.builtin, content: <AgentsTab key="builtin" visibility="built_in" agent={agent} /> },
-    { title: t.personal, content: <AgentsTab key="personal" visibility="personal" agent={agent} /> },
-  ]: [
-    { title: t.favorites, content: <AgentsTab key="favorite" visibility="favorite" agent={agent} /> },
-    { title: t.builtin, content: <AgentsTab key="builtin" visibility="built_in" agent={agent} /> },
-    { title: t.personal, content: <AgentsTab key="personal" visibility="personal" agent={agent} /> },
-    { title: t.shared, content: <AgentsTab key="shared" visibility="shared" agent={agent} /> },
-    { title: t.spots, content: <AgentsTabWorkspace key="workspace"  visibility="workspace" agent={agent} /> },
-    { title: t.account, content: <AgentsTab key="account" visibility="account" agent={agent} /> },
- 
-  ], [t, isTrial, agent])
-  
-  return <RightPanelTabs key={chat.id} tabs={tabs} />
+  const allTabsMap: Record<Scope, TabElement> = {
+    favorite: { title: t.favorites, content: <AgentsTab key="favorite" visibility="favorite" agent={agent} /> },
+    builtin: { title: t.builtin, content: <AgentsTab key="builtin" visibility="built_in" agent={agent} /> },
+    personal: { title: t.personal, content: <AgentsTab key="personal" visibility="personal" agent={agent} /> },
+    shared: { title: t.shared, content: <AgentsTab key="shared" visibility="shared" agent={agent} /> },
+    workspace: { title: t.spots, content: <AgentsTabWorkspace key="workspace" visibility="workspace" agent={agent} /> },
+    account: { title: t.account, content: <AgentsTab key="account" visibility="account" agent={agent} /> },
+  }
+   
+  const defaultScopes: Scope[] = ['favorite', 'builtin', 'personal', 'shared', 'workspace', 'account']
+
+  const rawScopes: Scope[] = scopes?.length ? scopes : defaultScopes
+
+  const scopesToRender: Scope[] = isTrial
+    ? ['favorite', 'builtin', 'personal']
+    : rawScopes
+
+  const tabs = scopesToRender
+    .map(scope => allTabsMap[scope])
+    .filter(Boolean) as TabElement[]
+
+  return (isGroupResourcesByScope ? (
+    <RightPanelTabs key={chat.id} tabs={tabs} />
+  ) : (
+    <RightPanelContentList><AgentsTab workspaceId={spotId} agent={agent} /></RightPanelContentList>
+  ))
 }

package/src/views/Agents/AgentsTab.tsx

@@ -19,7 +19,7 @@ import { AgentLabel } from './styled'
 import { useAgentFavorites } from './useAgentFavorites'
 
 export interface AgentTabProps {
-  visibility: AgentVisibilityLevel,
+  visibility?: AgentVisibilityLevel,
   workspaceId?: string,
   agent: React.MutableRefObject<ChatProperties['agent']>,
   showSubmitButton?: boolean,

package/src/views/ChatHistory/HistoryItem.tsx

@@ -102,7 +102,8 @@ export const HistoryItem = ({ item }: { item: ConversationResponse }) => {
       const builtIn = !!last(chat.history ?? [])?.custom_agent?.built_in
       widget.chatTabs.add(new ChatState({
         id: chat.id,
-        initial: { label: chat.title, stack, workspace, agent: agent ? { ...agent, builtIn } : undefined },
+        initial: { features: widget.chatFeatures, label: chat.title, stack, workspace, agent: agent ? { 
+          ...agent, builtIn } : undefined },
         interceptors: widget.interceptors,
         entries: chat.history?.map(item => new ChatEntry({
           agentType: item.agent === 'USER' ? 'user' : 'bot',

package/src/views/KSDocument.tsx

@@ -4,6 +4,7 @@ import { aiClient } from '@stack-spot/portal-network'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useEffect } from 'react'
 import { Code } from '../components/Code'
+import { FallbackBoundary } from '../components/FallbackBoundary'
 import { useWidget, useWidgetState } from '../context/hooks'
 import { useRightPanel } from '../right-panel/hooks'
 import { extractCodeFromKSDocument } from '../utils/knowledge-source'
@@ -20,7 +21,7 @@ export const KSDocument = () => {
 
   useEffect(() => {
     if (panel === 'ks-details' && ks) open(
-      <KSDocumentPanel documentId={ks.documentId} slug={ks.slug} />,
+      <FallbackBoundary><KSDocumentPanel documentId={ks.documentId} slug={ks.slug} /></FallbackBoundary>,
       {
         title: (
           <Flex flexDirection="row" alignItems="center" flex="1">

package/src/views/KnowledgeSources.tsx

@@ -6,26 +6,30 @@ import { KnowledgeSourceItemResponse, VisibilityLevelEnum } from '@stack-spot/po
 import { WorkspaceResponse } from '@stack-spot/portal-network/api/workspace-ai'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { difference, uniqBy } from 'lodash'
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { ButtonFavorite } from '../components/ButtonFavorite'
 import { NavigationComponent } from '../components/ComponentNavigator'
 import { DescribedCheckboxGroup } from '../components/form/DescribedCheckboxGroup'
 import { IconInput } from '../components/IconInput'
+import { RightPanelContentList } from '../components/RightPanelContentList'
 import { RightPanelTabs } from '../components/RightPanelTabs'
 import { WorkspaceTabNavigator } from '../components/WorkspaceTabNavigator'
 import { useCurrentChat, useWidget, useWidgetState } from '../context/hooks'
+import { Scope } from '../features'
 import { useRightPanel } from '../right-panel/hooks'
 import { ChatProperties } from '../state/ChatState'
 import { checkIsTrial } from '../utils/check-is-trial'
 
 export interface TabProps {
-  visibility: VisibilityLevelEnum,
+  visibility?: VisibilityLevelEnum,
   allKS: React.MutableRefObject<ChatProperties['knowledgeSources']>,
   workspaceId?: string,
   showSubmitButton?: boolean,
   onSubmit?: () => void,
 }
 
+type TabElement = { title: string, content: ReactElement }
+
 export const KnowledgeSources = () => {
   const t = useTranslate(dictionary)
   const panel = useWidgetState('panel')
@@ -51,6 +55,10 @@ const KnowledgeSourcesPanel = () => {
   const allKS = useRef(chat.get('knowledgeSources') ?? [])
   const { close } = useRightPanel()
   const isTrial = checkIsTrial()
+  const features = useWidgetState('features')
+  const isGroupResourcesByScope = features?.groupResourcesByScope
+  const scopes = features?.scopes ?? []
+  const spotId = features?.workspaceId
 
   const onSubmit = useCallback(() => {
     chat.set('knowledgeSources', allKS.current)
@@ -61,18 +69,34 @@ const KnowledgeSourcesPanel = () => {
     allKS.current = chat.get('knowledgeSources') ?? []
   }, [chat])
 
-  const tabs = isTrial ? [
-    { title: t.favorites, content: <KnowledgeSourcesTab key="favorite" visibility="favorite" allKS={allKS} onSubmit={onSubmit} /> },
-    { title: t.personal, content: <KnowledgeSourcesTab key="personal" visibility="personal" allKS={allKS} onSubmit={onSubmit} /> },
-  ]: [
-    { title: t.favorites, content: <KnowledgeSourcesTab key="favorite" visibility="favorite" allKS={allKS} onSubmit={onSubmit} /> },
-    { title: t.personal, content: <KnowledgeSourcesTab key="personal" visibility="personal" allKS={allKS} onSubmit={onSubmit} /> },
-    { title: t.shared, content: <KnowledgeSourcesTab key="shared" visibility="shared" allKS={allKS} onSubmit={onSubmit} /> },
-    { title: t.spots, content: <KnowledgeSourcesTabWorkspace key="workspace" visibility="workspace" allKS={allKS} onSubmit={onSubmit} /> },
-    { title: t.account, content: <KnowledgeSourcesTab key="account" visibility="account" allKS={allKS} onSubmit={onSubmit} /> },    
-  ]
-
-  return <RightPanelTabs key={chat.id} tabs={tabs} />
+  const allTabsMap: Partial<Record<Scope, TabElement>> = {
+    favorite: { title: t.favorites, 
+      content: <KnowledgeSourcesTab key="favorite" visibility="favorite" allKS={allKS} onSubmit={onSubmit} /> },
+    personal: { title: t.personal, 
+      content: <KnowledgeSourcesTab key="personal" visibility="personal" allKS={allKS} onSubmit={onSubmit} /> },
+    shared: { title: t.shared, content: <KnowledgeSourcesTab key="shared" visibility="shared" allKS={allKS} onSubmit={onSubmit} /> },
+    workspace: { title: t.spots,
+      content: <KnowledgeSourcesTabWorkspace key="workspace" visibility="workspace" allKS={allKS} onSubmit={onSubmit} /> },
+    account: { title: t.account, content: <KnowledgeSourcesTab key="account" visibility="account" allKS={allKS} onSubmit={onSubmit} /> },
+  }
+
+  const defaultScopes: Scope[] = ['favorite', 'personal', 'shared', 'workspace', 'account']
+
+  const rawScopes: Scope[] = scopes?.length ? scopes : defaultScopes
+
+  const scopesToRender: Scope[] = isTrial
+    ? ['favorite', 'personal']
+    : rawScopes
+
+  const tabs = scopesToRender
+    .map(scope => allTabsMap[scope])
+    .filter(Boolean) as TabElement[]
+
+  return (isGroupResourcesByScope ? (
+    <RightPanelTabs key={chat.id} tabs={tabs} />
+  ) : (
+    <RightPanelContentList><KnowledgeSourcesTab allKS={allKS} onSubmit={onSubmit} workspaceId={spotId} /></RightPanelContentList>
+  ))
 }
 
 export const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit, workspaceId, showSubmitButton = true }: TabProps) => {

package/src/views/MessageInput/AgentSelector.tsx

@@ -1,9 +1,9 @@
 import { Flex, IconBox, Image } from '@citric/core'
 import { Agent } from '@citric/icons'
-import { AgentResponseWithBuiltIn, agentToolsClient } from '@stack-spot/portal-network'
+import { AgentResponseWithBuiltIn, agentToolsClient, workspaceAiClient } from '@stack-spot/portal-network'
 import { useCallback } from 'react'
 import { Selector } from '../../components/Selector'
-import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
+import { useCurrentChat, useCurrentChatState, useWidgetState } from '../../context/hooks'
 import { agentRegex } from '../../regex'
 import { useAgentFavorites } from '../Agents/useAgentFavorites'
 
@@ -27,7 +27,8 @@ export const AgentSelector = ({ inputRef, isTrial }: {
 }) => {
   const chat = useCurrentChat()
   const isAgentEnabled = useCurrentChatState('features').agent
-  
+  const spotId = useWidgetState('features')?.workspaceId
+
   const { useFavorites, onAddFavorite, onRemoveFavorite } = useAgentFavorites()
 
   const onSelectItem = useCallback(async (agent: AgentResponseWithBuiltIn) => {
@@ -52,9 +53,14 @@ export const AgentSelector = ({ inputRef, isTrial }: {
 
 
   const getAgents = () => {
+    if (spotId) {
+      return workspaceAiClient.getAgentFromWorkspaceAi.useQuery({ workspaceId: spotId }) as AgentResponseWithBuiltIn[]
+    }
+
     if (isTrial) {
       return agentToolsClient.allAgents.useQuery({ visibilities: ['personal', 'built_in'] })
     }
+
     return agentToolsClient.allAgents.useQuery({ visibilities: ['account', 'shared', 'personal', 'built_in', 'workspace'] })
   }
 

package/src/views/MessageInput/QuickCommandSelector.tsx

@@ -3,7 +3,7 @@ import { aiClient, workspaceAiClient } from '@stack-spot/portal-network'
 import { QuickCommandResponse } from '@stack-spot/portal-network/api/ai'
 import { useCallback } from 'react'
 import { Selector } from '../../components/Selector'
-import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
+import { useCurrentChat, useCurrentChatState, useWidgetState } from '../../context/hooks'
 import { quickCommandRegex } from '../../regex'
 
 type QuickCommandResponseWithSpaceName = QuickCommandResponse & { spaceName?: string }
@@ -12,6 +12,7 @@ export const QuickCommandSelector = ({ inputRef, isTrial }:
   { isTrial: boolean, inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement> }) => {
   const chat = useCurrentChat()
   const isQuickCommandEnabled =  useCurrentChatState('features').quickCommands
+  const spotId = useWidgetState('features')?.workspaceId
 
   const useFavorites = () => aiClient.allQuickCommands.useQuery({ visibility: 'favorite' })
   const [addFavorite, pendingAddFav] = aiClient.addFavoriteQuickCommand.useMutation()
@@ -77,11 +78,23 @@ export const QuickCommandSelector = ({ inputRef, isTrial }:
   }, [chat, inputRef])
 
   const getQuickCommands = () => {
+    if (spotId) {
+      return workspaceAiClient.getQCFromWorkspaceAi.useQuery({ workspaceId: spotId })
+    }
+
     const quickCommands = aiClient.allQuickCommands.useQuery({ order: 'a-to-z' })
-    const quickCommandsFiltered = quickCommands.filter((qc) => qc.visibility_level.toLowerCase() !== 'workspace')
-    const workspaceQuickCommands = workspaceAiClient.workspacesContentsByType.useQuery({ contentType: 'quick_command' })
-    const workspaceQuickCommandsWithWorkspaceName: QuickCommandResponseWithSpaceName[] = workspaceQuickCommands
-      .flatMap(({ qcs, space_name }) => qcs?.map((qc) => ({ ...qc, spaceName: space_name }))) as QuickCommandResponseWithSpaceName[]
+    const quickCommandsFiltered = quickCommands.filter(
+      (qc) => qc.visibility_level.toLowerCase() !== 'workspace',
+    )
+
+    const workspaceQuickCommands = workspaceAiClient.workspacesContentsByType.useQuery({
+      contentType: 'quick_command',
+    })
+
+    const workspaceQuickCommandsWithWorkspaceName: QuickCommandResponseWithSpaceName[] =
+    workspaceQuickCommands.flatMap(({ qcs, space_name }) =>
+      qcs?.map((qc) => ({ ...qc, spaceName: space_name })),
+    ) as QuickCommandResponseWithSpaceName[]
 
     return [...quickCommandsFiltered, ...workspaceQuickCommandsWithWorkspaceName]
   }