@stack-spot/ai-chat-widget 3.5.0-beta.5 → 3.6.0-beta.5

package/src/views/Chat/ChatMessage.tsx

@@ -9,7 +9,7 @@ import { PhoneInput } from 'react-international-phone'
 import 'react-international-phone/style.css'
 import { FileDescription } from '../../components/FileDescription'
 import { Markdown } from '../../components/Markdown'
-import { useChatEntry, useChatMessages, useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
+import { useChatEntry, useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
 import { useMidnightUpdateView } from '../../hooks/midnight-update-view'
 import { ChatEntry, SerializableAction, TextChatEntry } from '../../state/ChatEntry'
 import { useDateFormatter } from '../../utils/date'
@@ -213,26 +213,24 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
   const widget = useWidget()
   const chat = useCurrentChat()
   const agentId = entry.agent?.id ?? ''
-  const [toolKits] = agentToolsClient.tools.useStatefulQuery({}, { enabled: !!agentId })
+  // enabled: we don't want to make any request if there is no agent
+  const [agent] = agentToolsClient.agent.useStatefulQuery({ agentId }, { enabled: !!agentId })
+  const toolkits = useMemo(() => [
+    ...agent?.toolkits?.builtin_toolkits ?? [],
+    ...agent?.toolkits?.custom_toolkits ?? [],
+    ...agent?.toolkits?.mcp_toolkits ?? [],
+  ], [agent])
   const [agentsTools] = agentToolsClient.agentsByIds.useStatefulQuery(
-    { searchAgentsRequest: { ids: entry.tools || [''] } }, { enabled: !!entry.tools })
+    { searchAgentsRequest: { ids: entry.tools || [''] } }, { enabled: !!entry.tools?.length })
   const [copied, setCopied] = useState(false)
   const [showUserButtonCopy, setShowUserButtonCopy] = useState(false)
   const isPlanning = useCurrentChatState('isPlaning') ?? false
 
-  // when we have a steps but we are not showing any content of the step
-  // (because it is a tool and the user has already answered the question)
-  // we do not want to show an avatar with empty content, so we hide the entire message
-  const toolsStep = entry.steps?.find(s => s.type === 'tool')
-  const messages = useChatMessages(chat.id)
-  const userHasAlreadyAnswered = useMemo(() => {
-    const messageIndex = messages.findIndex((messageItem) => messageItem.id === message.id)
-    if (messages.length - 1 === messageIndex) return false
-    const nextMessage = messages[messageIndex + 1].getValue()
-    return nextMessage.agentType === 'user'
-  }, [messages, messages.length])
-  const isMessageHidden = toolsStep && userHasAlreadyAnswered
-
+  // Dynamic tool steps are identified by the "dynamic" id.
+  // We're temporarily hiding the toolbox for these dynamic tools while we finalize their UI.
+  const shouldHideToolbox =  entry?.steps?.some((step) => step?.id === 'dynamic')
+  const showToolBox = (!!agentsTools?.length || !!entry.tools?.length) && !shouldHideToolbox
+  
   useChatScrollToBottomEffect(ref, [entry])
   useMidnightUpdateView()
 
@@ -357,8 +355,8 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
     widget.set('panel', 'resources')
   }
 
-  const shouldRender = (entry.content || entry.error || (message.isDone() && !!entry.steps?.length) || !!entry.upload?.length)
-    && (!isMessageHidden || !toolsStep || isPlanning)
+  const shouldShowToolsOnlyMessage = (entry.done !== false || entry.hasPlanning) && !!entry.steps?.length
+  const shouldRender = entry.content || entry.error || shouldShowToolsOnlyMessage || !!entry.upload?.length
 
   return shouldRender && (
     <li key={entry.messageId} className={entry.agentType} ref={ref}>
@@ -374,8 +372,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
                 {entry.badges.map((b, index) => <Badge key={index} colorPalette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
               </div>}
 
-              {!!entry.steps?.length && <StepsList steps={entry.steps} chatId={chat.id} messageId={message.id}
-                userHasAlreadyAnswered={userHasAlreadyAnswered} />}
+              {!!entry.steps?.length && <StepsList steps={entry.steps} chatId={chat.id} messageId={message.id} />}
 
               {renderContent()}
 
@@ -396,7 +393,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
           ))}</ul>
         </div>}
 
-        {(!!agentsTools?.length || !!entry.tools?.length) && 
+        {showToolBox && 
           <div className="tools-box">
             <Button appearance="none" onClick={openResourcesPanel} aria-label={t.openResourcesPanel}>
               {agentsTools?.map((agent) => (
@@ -411,13 +408,14 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
                 </ImageBox>
               ))}
               {entry?.tools?.map((id) => {
+                // In the multi-agents feature, an agent is returned as a tool, but we don't want to show agents here.
                 if (agentsTools?.some((agent) => agent.id === id)) return null
-                const tool = toolById(id, toolKits)
+                const tool = toolById(id, toolkits)
                 return (
                   <ImageBox key={id} className="agent-info-avatar-resource">
                     <ImageWithFallback
                       src={tool?.image}
-                      fallback={<Icon icon="Cog" />}
+                      fallback={<Icon icon="Cog" title={tool?.name} aria-label={tool?.name} />}
                       alt={tool?.name}
                       aria-label={tool?.name}
                       title={tool?.name}

package/src/views/Chat/StepsList.tsx

@@ -7,7 +7,7 @@ import { findLast, findLastIndex } from 'lodash'
 import React, { useEffect, useMemo } from 'react'
 import styled from 'styled-components'
 import { Markdown } from '../../components/Markdown'
-import { useChat, useChatMessages, useCurrentChat, useCurrentChatMessages, useWidget } from '../../context/hooks'
+import { useChat, useChatMessages, useCurrentChat, useCurrentChatMessages, useIsLastEntryInCurrentChat, useWidget } from '../../context/hooks'
 import { ChatEntry } from '../../state/ChatEntry'
 import { planningToolDictionaryHelper } from '../../utils/planning-tool'
 import { updateToolStep } from '../../utils/update-tool-step'
@@ -17,7 +17,6 @@ interface Props {
   steps: ChatStep[],
   messageId: number,
   chatId: string,
-  userHasAlreadyAnswered?: boolean,
 }
 
 interface StepChatStepWithTarget extends Omit<StepChatStep, 'status' | 'id' | 'type'> {
@@ -174,10 +173,11 @@ const AwaitingApproval = ({ customApproveText, chatId }: { chatId: string, custo
   </>
 }
 
-export const ToolStepsList = ({ toolStep, messageId, chatId }: { toolStep: ToolChatStep, messageId: number, chatId: string }) => {
+const ToolStepsList = ({ toolStep, messageId, chatId }: { toolStep: ToolChatStep, messageId: number, chatId: string }) => {
   const t = useTranslate(dictionary)
   const chat = useCurrentChat()
   const messages = useCurrentChatMessages()
+  const isLastMessage = useIsLastEntryInCurrentChat(messageId)
   const inputParsed = `\`\`\`json
     ${JSON.stringify(toolStep?.input, null, 2)}
   \`\`\``
@@ -222,15 +222,16 @@ export const ToolStepsList = ({ toolStep, messageId, chatId }: { toolStep: ToolC
             </Markdown>
           </Accordion>
 
-          <AwaitingApproval customApproveText={t.approveTool} chatId={chatId} />
+          {isLastMessage && <AwaitingApproval customApproveText={t.approveTool} chatId={chatId} />}
         </Card>
       </div>
     </AnimatedHeight> : null}
   </>
 }
 
-export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }: Props) => {
+export const StepsList = ({ steps, messageId, chatId }: Props) => {
   const t = useTranslate(dictionary)
+  const isLastMessage = useIsLastEntryInCurrentChat(messageId)
   
   const filteredSteps = steps.filter(s => s.type === 'step')
   const actualSteps = useMemo(() => filteredSteps.filter((item) => {
@@ -302,7 +303,7 @@ export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }:
         <Column gap="8px" mt="8px">
           <Divider colorScheme="light" />
           <Text color="light.700">{planning?.[0]?.user_question}</Text>
-          {!userHasAlreadyAnswered && planning?.[0]?.status === 'awaiting_approval' && <AwaitingApproval chatId={chatId} />}
+          {isLastMessage && planning?.[0]?.status === 'awaiting_approval' && <AwaitingApproval chatId={chatId} />}
         </Column>
 
         {planning?.[0]?.status === 'success' && <ViewToolsDetails chatId={chatId} messageId={messageId}/>}
@@ -310,8 +311,7 @@ export const StepsList = ({ steps, messageId, chatId, userHasAlreadyAnswered }:
       </div>
     </AnimatedHeight> : null}
 
-    {toolsStep && toolsStep.status === 'awaiting_approval' && !userHasAlreadyAnswered &&
-      <ToolStepsList toolStep={toolsStep} messageId={messageId} chatId={chatId} />}
+    {toolsStep && toolsStep.status === 'awaiting_approval' && <ToolStepsList toolStep={toolsStep} messageId={messageId} chatId={chatId} />}
   </>
   )
 }

package/src/views/ChatHistory/utils.ts

@@ -64,7 +64,7 @@ function findTool(agent: AgentModel | undefined, id: string) {
   ]
   for (const toolkit of allToolkits) {
     for (const tool of toolkit.tools ?? []) {
-      if (tool.id === id) return { toolkit, tool }
+      if ('id' in tool && tool.id === id) return { toolkit, tool }
     }
   }
   return { toolkit: undefined, tool: { name: id } }
@@ -106,7 +106,7 @@ async function stepsFromAgentInfo(
               id: t.tool_id,
               executionId: t.tool_execution_id,
               name: tool?.name,
-              description: tool?.description,
+              description: 'description' in tool ? tool.description : undefined,
               image: toolkit ? (('image_url' in toolkit ? toolkit?.image_url : toolkit?.avatar) ?? undefined) : undefined,
               goal: t.goal,
               duration: end?.duration,

package/src/views/KnowledgeSources.tsx

@@ -1,12 +1,11 @@
-import { Box } from '@citric/core'
 import { Button, Tab } from '@stack-spot/citric-react'
 import { Placeholder } from '@stack-spot/portal-components/Placeholder'
 import { aiClient, dataIntegrationClient, workspaceAiClient } from '@stack-spot/portal-network'
 import { VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
+import { KnowledgeSourceItemResponse } from '@stack-spot/portal-network/api/dataIntegration'
 import { WorkspaceResponse } from '@stack-spot/portal-network/api/workspace-ai'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
-import InfiniteScroll from 'react-infinite-scroll-component'
 import { NavigationComponent } from '../components/ComponentNavigator'
 import { DescribedCheckboxGroup } from '../components/form/DescribedCheckboxGroup'
 import { RightPanelContentList } from '../components/RightPanelContentList'
@@ -66,13 +65,19 @@ const KnowledgeSourcesPanel = () => {
   }, [chat])
 
   const allTabsMap: Partial<Record<Scope, Omit<Tab, 'key'>>> = {
-    favorite: { label: t.favorites, 
-      content: <KnowledgeSourcesTab key="favorite" visibility="favorite" allKS={allKS} onSubmit={onSubmit} /> },
-    personal: { label: t.personal, 
-      content: <KnowledgeSourcesTab key="personal" visibility="personal" allKS={allKS} onSubmit={onSubmit} /> },
+    favorite: {
+      label: t.favorites,
+      content: <KnowledgeSourcesTab key="favorite" visibility="favorite" allKS={allKS} onSubmit={onSubmit} />,
+    },
+    personal: {
+      label: t.personal,
+      content: <KnowledgeSourcesTab key="personal" visibility="personal" allKS={allKS} onSubmit={onSubmit} />,
+    },
     shared: { label: t.shared, content: <KnowledgeSourcesTab key="shared" visibility="shared" allKS={allKS} onSubmit={onSubmit} /> },
-    workspace: { label: t.spots,
-      content: <KnowledgeSourcesTabWorkspace key="workspace" visibility="workspace" allKS={allKS} onSubmit={onSubmit} /> },
+    workspace: {
+      label: t.spots,
+      content: <KnowledgeSourcesTabWorkspace key="workspace" visibility="workspace" allKS={allKS} onSubmit={onSubmit} />,
+    },
     account: { label: t.account, content: <KnowledgeSourcesTab key="account" visibility="account" allKS={allKS} onSubmit={onSubmit} /> },
   }
 
@@ -97,47 +102,29 @@ const KnowledgeSourcesPanel = () => {
 
 export const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit, workspaceId, showSubmitButton = true }: TabProps) => {
   const t = useTranslate(dictionary)
-  
-  let knowledgeSources: any[] = []
-  let fetchNextPage: (() => void) | undefined
-  let hasNextPage: boolean | undefined
-  let isLoadingKnowledgeSources: boolean | undefined
-  let ksListError: any
-
-  if (workspaceId) {
-    knowledgeSources = workspaceAiClient.getKSFromWorkspaceAi.useQuery({ workspaceId })
-    fetchNextPage = undefined
-    hasNextPage = false
-    isLoadingKnowledgeSources = false
-    ksListError = undefined
-  } else {
-    const [
-      ksListPages,
-      _isLoadingKnowledgeSources,
-      _ksListError,
-      { fetchNextPage: _fetchNextPage, hasNextPage: _hasNextPage },
-    ] = dataIntegrationClient.knowledgeSourcesV2.useStatefulInfiniteQuery(
-      {
-        order: 'a-to-z',
-        visibilityList: visibility ? [visibility] : [],
-        types: ['snippet', 'api', 'event', 'custom'],
-        size: 20,
-      },
-      { enabled: true },
-    )
-    knowledgeSources = ksListPages?.flat() ?? []
-    fetchNextPage = _fetchNextPage
-    hasNextPage = _hasNextPage
-    isLoadingKnowledgeSources = _isLoadingKnowledgeSources
-    ksListError = _ksListError
-  }
+  const [data = []] = workspaceAiClient.getKSFromWorkspaceAi.useStatefulQuery(
+    { workspaceId: workspaceId! }, { enabled: !!workspaceId })
+  const workspaceKs = data as KnowledgeSourceItemResponse[]
+
+  const [ksListPages = [], { fetchNextPage, hasNextPage }] = dataIntegrationClient.knowledgeSourcesV2.useInfiniteQuery(
+    {
+      order: 'a-to-z',
+      visibilityList: visibility ? [visibility] : [],
+      types: ['snippet', 'api', 'event', 'custom'],
+      size: 20,
+      page: 1,
+    },
+    { enabled: !workspaceId },
+  )
+  const knowledgeSources = workspaceId ? workspaceKs : ksListPages
 
   const initialValue = useMemo(() => {
     const currentlySelected = allKS.current?.map(ks => ks.id)
-    return knowledgeSources.filter(ks => currentlySelected?.includes(ks.slug))
-  }, [knowledgeSources, allKS])
+    return knowledgeSources?.filter((ks: KnowledgeSourceItemResponse) => currentlySelected?.includes(ks.slug))
+  }, [knowledgeSources])
+
+  const listFavorites = dataIntegrationClient.knowledgeSourcesV2.useQuery({ visibilityList: ['favorite'] })?.items
 
-  const listFavorites = dataIntegrationClient.knowledgeSources.useQuery({ visibility: 'favorite' })
   const [addFavorite, pendingAddFav] = dataIntegrationClient.addFavoriteKnowledgeSource.useMutation()
   const [removeFavorite, pendingRemoveFav] = dataIntegrationClient.removeFavoriteKnowledgeSource.useMutation()
 
@@ -145,7 +132,7 @@ export const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit, workspaceId,
     try {
       await removeFavorite({ slug: idOrSlug })
       await aiClient.knowledgeSources.invalidate()
-      await dataIntegrationClient.knowledgeSources.invalidate()
+      await dataIntegrationClient.knowledgeSourcesV2.invalidate()
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error(error)
@@ -156,7 +143,7 @@ export const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit, workspaceId,
   const onRemoveFavorite = (idOrSlug: string) => new Promise<boolean>(async (resolve, reject) => {
     try {
       await removeFavoriteKs(idOrSlug)
-      if (!pendingRemoveFav){
+      if (!pendingRemoveFav) {
         resolve(true)
       }
 
@@ -164,17 +151,14 @@ export const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit, workspaceId,
       // eslint-disable-next-line no-console
       console.error(error)
       reject(error)
-    } 
+    }
   })
 
-  if (isLoadingKnowledgeSources && knowledgeSources.length === 0) {return null}
-  if (ksListError) {return null}
-
   const addFavoriteKs = async (idOrSlug: string) => {
     try {
       await addFavorite({ slug: idOrSlug })
       await aiClient.knowledgeSources.invalidate()
-      await dataIntegrationClient.knowledgeSources.invalidate()
+      await dataIntegrationClient.knowledgeSourcesV2.invalidate()
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error(error)
@@ -185,7 +169,7 @@ export const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit, workspaceId,
   const onAddFavorite = (idOrSlug: string) => new Promise<boolean>(async (resolve, reject) => {
     try {
       await addFavoriteKs(idOrSlug)
-      if (!pendingAddFav){
+      if (!pendingAddFav) {
         resolve(true)
       }
 
@@ -193,31 +177,27 @@ export const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit, workspaceId,
       // eslint-disable-next-line no-console
       console.error(error)
       reject(error)
-    } 
+    }
   })
 
-  return (
-    <>
-      <Box className="content" id="ks-scrollable" style={{ overflow: 'auto', height: '100%' }}>
-        <InfiniteScroll
-          scrollableTarget="ks-scrollable"
-          dataLength={knowledgeSources.length}
-          next={fetchNextPage ?? (() => {})}
-          hasMore={hasNextPage}
-          loader={isLoadingKnowledgeSources}
-        >
-          <DescribedCheckboxGroup
-            options={knowledgeSources}
-            initialValue={initialValue}
-            globalSelection={allKS}
-            data={ks => ({ idOrSlug: ks.slug, description: ks.description, name: ks.name, listFavorites, onAddFavorite, onRemoveFavorite })}
-            emptyResults={<Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />}
-            emptyDataset={<Placeholder title={t.noData} description={t.noDataDescription} className="no-data-placeholder" />}
-          />
-        </InfiniteScroll>
-      </Box>
-      {!!knowledgeSources.length && showSubmitButton && <Button onClick={onSubmit}>{t.apply}</Button>}
-    </>
+  return (<>
+    <div className="content">
+      <DescribedCheckboxGroup
+        options={knowledgeSources}
+        initialValue={initialValue}
+        globalSelection={allKS}
+        hasNextPage={hasNextPage && !workspaceId}
+        fetchNextPage={fetchNextPage}
+        data={(ks: KnowledgeSourceItemResponse) => ({
+          idOrSlug: ks.slug, description: ks.description, name: ks.name, listFavorites,
+          onAddFavorite, onRemoveFavorite,
+        })}
+        emptyResults={<Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />}
+        emptyDataset={<Placeholder title={t.noData} description={t.noDataDescription} className="no-data-placeholder" />}
+      />
+    </div>
+    {!!knowledgeSources?.length && showSubmitButton && <Button onClick={onSubmit}>{t.apply}</Button>}
+  </>
   )
 }
 
@@ -228,7 +208,7 @@ export function KnowledgeSourcesTabWorkspace({ allKS, onSubmit }: TabProps) {
     component: 'ks',
     props: { visibility: 'workspace', workspaceId: workspace.id, allKS, onSubmit },
   })
-  
+
   return <WorkspaceTabNavigator components={workspaceTabComponents} getNavigateParam={buildNavigateParams} />
 }
 

package/src/views/MessageInput/QuickCommandSelector.tsx

@@ -1,9 +1,7 @@
-import { Box } from '@citric/core'
 import { Icon } from '@stack-spot/citric-icons'
 import { aiClient, workspaceAiClient } from '@stack-spot/portal-network'
 import { QuickCommandResponse } from '@stack-spot/portal-network/api/ai'
-import { useCallback, useMemo } from 'react'
-import InfiniteScroll from 'react-infinite-scroll-component'
+import { useCallback } from 'react'
 import { Selector } from '../../components/Selector'
 import { useCurrentChat, useCurrentChatState, useWidgetState } from '../../context/hooks'
 import { quickCommandRegex } from '../../regex'
@@ -79,103 +77,51 @@ export const QuickCommandSelector = ({ inputRef, isTrial }:
     inputRef.current.focus()
   }, [chat, inputRef])
 
-  const [quickCommandsPages = [], isLoadingQuickCommands, _qcListError, infiniteQueryResult,
-  ] = aiClient.allQuickCommandsV3.useStatefulInfiniteQuery(
-    {
-      size: 20,
-      page: 1,
-      order: 'a-to-z',
-    },
-    { enabled: !spotId },
-  )
-  
-  const quickCommands = useMemo(() => quickCommandsPages, [quickCommandsPages])
-
-  const quickCommandsFiltered = useMemo(() => quickCommands.filter(
-    (qc) => qc.visibility_level.toLowerCase() !== 'workspace'), [quickCommands],
-  )
-
-  const workspaceQuickCommands = workspaceAiClient.workspacesContentsByType.useQuery({
-    contentType: 'quick_command',
-  }) || []
-
-  const workspaceQuickCommandsWithWorkspaceName: QuickCommandResponseWithSpaceName[] =
-    useMemo(
-      () =>
-        workspaceQuickCommands.flatMap(({ qcs, space_name }) =>
-          qcs?.map((qc) => ({ ...qc, spaceName: space_name })),
-        ) as QuickCommandResponseWithSpaceName[],
-      [workspaceQuickCommands],
+  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 allQuickCommands =
-    spotId
-      ? workspaceAiClient.getQCFromWorkspaceAi.useQuery({ workspaceId: spotId }) || []
-      : [...quickCommandsFiltered, ...workspaceQuickCommandsWithWorkspaceName]
+    const workspaceQuickCommands = workspaceAiClient.workspacesContentsByType.useQuery({
+      contentType: 'quick_command',
+    })
 
-  const fetchNextPage = !spotId ? infiniteQueryResult?.fetchNextPage : undefined
-  const hasNextPage = !spotId ? infiniteQueryResult?.hasNextPage : false
+    const workspaceQuickCommandsWithWorkspaceName: QuickCommandResponseWithSpaceName[] =
+    workspaceQuickCommands.flatMap(({ qcs, space_name }) =>
+      qcs?.map((qc) => ({ ...qc, spaceName: space_name })),
+    ) as QuickCommandResponseWithSpaceName[]
 
-  const QuickCommandItem = ({ slug, description, spaceName }: QuickCommandResponseWithSpaceName) => (<>
+    return [...quickCommandsFiltered, ...workspaceQuickCommandsWithWorkspaceName]
+  }
+
+  const QuickCommandItem = ({ slug, description, spaceName }: QuickCommandResponseWithSpaceName) => <>
     <p className="selector-description">{spaceName}</p>
     <p className="selector-title">/{slug?.toUpperCase()}</p>
     <p className="selector-description">{description}</p>
   </>
-  )
-
-  if (spotId) {
-    return (
-      <Selector
-        inputRef={inputRef}
-        favorite={{ 
-          useFavorites, onAddFavorite, onRemoveFavorite, favoriteIsSlug: true,
-        }}
-        selectorConfig={{
-          resourceName: 'Quick Command',
-          shortcut: '/',
-          icon: <Icon icon="QuickCommand" />,
-          searchProp: 'slug',
-          urlBuilder: (qc) => `/quick-command/${qc?.slug}`,
-          regex: quickCommandRegex,
-          sections: isTrial ? ['favorite', 'personal'] : ['favorite', 'personal', 'workspace', 'account', 'shared'],
-          isEnabled: isQuickCommandEnabled,
-          onSelect: onSelectItem,
-          renderComponentItem: QuickCommandItem,
-          useData: () => allQuickCommands,
-        }}
-      />
-    )
-  }
 
-  return (
-    <Box className="content" id="qc-scrollable" style={{ overflow: 'auto', height: '100%' }}>
-      <InfiniteScroll
-        scrollableTarget="qc-scrollable"
-        dataLength={allQuickCommands.length}
-        next={fetchNextPage as any}
-        hasMore={!!hasNextPage}
-        loader={isLoadingQuickCommands}
-      >
-        <Selector
-          inputRef={inputRef}
-          favorite={{ 
-            useFavorites, onAddFavorite, onRemoveFavorite, favoriteIsSlug: true,
-          }}
-          selectorConfig={{
-            resourceName: 'Quick Command',
-            shortcut: '/',
-            icon: <Icon icon="QuickCommand" />,
-            searchProp: 'slug',
-            urlBuilder: (qc) => `/quick-command/${qc?.slug}`,
-            regex: quickCommandRegex,
-            sections: isTrial ? ['favorite', 'personal'] : ['favorite', 'personal', 'workspace', 'account', 'shared'],
-            isEnabled: isQuickCommandEnabled,
-            onSelect: onSelectItem,
-            renderComponentItem: QuickCommandItem,
-            useData: () => allQuickCommands,
-          }}
-        />
-      </InfiniteScroll>
-    </Box>
-  )
+  return <Selector
+    inputRef={inputRef}
+    favorite={{ 
+      useFavorites, onAddFavorite, onRemoveFavorite, favoriteIsSlug: true,
+    }}
+    selectorConfig={{
+      resourceName: 'Quick Command',
+      shortcut: '/',
+      icon: <Icon icon="QuickCommand" />,
+      searchProp: 'slug',
+      urlBuilder: (qc) => `/quick-command/${qc?.slug}`,
+      regex: quickCommandRegex,
+      sections: isTrial ? ['favorite', 'personal'] : ['favorite', 'personal', 'workspace', 'account', 'shared'],
+      isEnabled: isQuickCommandEnabled,
+      onSelect: onSelectItem,
+      renderComponentItem: QuickCommandItem,
+      useData: getQuickCommands,
+    }}
+  />
 }

package/src/views/MessageInput/index.tsx

@@ -39,6 +39,7 @@ export const MessageInput = ({ chatWindowRef, customInputMessage }:
   const { handleKeyDown, handleKeyUp } = useUserEntryHistoryShortcut()
   const isTrial = checkIsTrial()
   const { isDragging, handleDrop, handleDragLeave } = useUploadDragDrop()
+  const [disabled, setDisabled] = useState(false)
 
   usePasteUpload({
     textAreaRef,
@@ -88,6 +89,14 @@ export const MessageInput = ({ chatWindowRef, customInputMessage }:
   }, [chat, t])
 
   const onSend = useCallback(async () => {
+    if (disabled) return
+
+    if (chat.get('isLoading')) {
+      setDisabled(true)
+      await chat.whenLoadingEnds()
+      setDisabled(false)
+    }
+
     const message = chat.get('nextMessage')
     const code = chat.get('codeSelection')
     const language = chat.get('codeLanguage')
@@ -162,6 +171,7 @@ export const MessageInput = ({ chatWindowRef, customInputMessage }:
               onKeyUp={handleKeyUp}
               onIncreaseSize={() => setExpanded(false)}
               onResetSize={() => !expansionLocked.current && setExpanded(true)}
+              disabled={disabled}
             />
           </div>
         </div>

package/src/views/MessageInput/styled.ts

@@ -301,6 +301,10 @@ export const MessageInputBox = styled.div`
     &:focus {
       box-shadow: none !important;
     }
+    &:disabled {
+      background-color: transparent !important;
+      opacity: 0.6;
+    }
   }
 `
 

package/src/views/Resources.tsx

@@ -46,29 +46,30 @@ const ResourcesPanel = () => {
     const chat = widget.chatTabs.getAll().find(c => c.id === chatId)
     return chat?.getMessages().find(m => m.id === messageId)?.getValue()
   }, [messageId])
-  const [toolKits] = agentToolsClient.tools.useStatefulQuery({}, { enabled: !!message?.agent?.id })
   const [agent] = agentToolsClient.agent.useStatefulQuery({ agentId: message?.agent?.id || '' },
     { enabled: !!message?.agent?.id })
-  const tools = useMemo(() => message?.tools?.map(id => toolById(id, toolKits)), [messageId, toolKits])
-  const customTools = useMemo(() => message?.tools?.map(id => toolById(id, agent?.toolkits?.custom_toolkits)),
-    [messageId, agent?.toolkits?.custom_toolkits])
-
+  const toolkits = useMemo(() => [
+    ...agent?.toolkits?.builtin_toolkits ?? [],
+    ...agent?.toolkits?.custom_toolkits ?? [],
+    ...agent?.toolkits?.mcp_toolkits ?? [],
+  ], [agent])
+  const tools = useMemo(() => message?.tools?.map(id => toolById(id, toolkits)), [messageId, toolkits])
   const [agentsTools] = agentToolsClient.agentsByIds.useStatefulQuery({ searchAgentsRequest:{ ids: message?.tools || [] } })
-  const hasAgentTool = useMemo(() => message?.tools?.some(id => agentsTools?.find((agent) => agent.id === id)), [messageId, toolKits])
+  const hasAgentTool = useMemo(() => message?.tools?.some(id => agentsTools?.find((agent) => agent.id === id)), [messageId])
 
   const header = (image?: string, label?: string) => (
     <Row>
-      <ImageBox >
+      <ImageBox>
         <ImageWithFallback src={image} fallback={<Icon icon="Agent" />} aria-label={label} title={label} />
       </ImageBox>
       <Text style={{ marginLeft: '8px' }}>{label}</Text>
     </Row>
   )
-  
-  return !!(tools?.length || customTools?.length) && (
+
+  return !!tools?.length && (
     <>
       <>
-        {[...(tools || []), ...(customTools || [])].map(
+        {tools.map(
           (tool) =>
             tool && (
               <StyledAccordion key={tool.id} header={header(tool?.image, tool?.name)} appearance="card" maxHeight={120}>

package/src/views/Tools.tsx

@@ -54,7 +54,7 @@ const ToolsPanel = () => {
           tool && (
             <li key={tool.id}>
               <ToolBadge
-                name={tool.name || tool.id}
+                name={tool.name || tool.id || ''}
                 image={tool.image ?? ''}
                 description={tool.description ?? ''}
               />