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

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 ?? ''}
               />