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

package/src/views/KnowledgeSources.tsx

@@ -1,3 +1,4 @@
+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'
@@ -5,6 +6,7 @@ import { VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
 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'
@@ -95,15 +97,46 @@ const KnowledgeSourcesPanel = () => {
 
 export const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit, workspaceId, showSubmitButton = true }: TabProps) => {
   const t = useTranslate(dictionary)
-  const knowledgeSources = workspaceId
-    ? workspaceAiClient.getKSFromWorkspaceAi.useQuery({ workspaceId })
-    : aiClient.knowledgeSources.useQuery({
-      visibility, order: 'a-to-z', types: ['snippet', 'api', 'event', 'custom'],
-    })
+  
+  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 initialValue = useMemo(() => {
     const currentlySelected = allKS.current?.map(ks => ks.id)
     return knowledgeSources.filter(ks => currentlySelected?.includes(ks.slug))
-  }, [])
+  }, [knowledgeSources, allKS])
+
   const listFavorites = dataIntegrationClient.knowledgeSources.useQuery({ visibility: 'favorite' })
   const [addFavorite, pendingAddFav] = dataIntegrationClient.addFavoriteKnowledgeSource.useMutation()
   const [removeFavorite, pendingRemoveFav] = dataIntegrationClient.removeFavoriteKnowledgeSource.useMutation()
@@ -134,6 +167,9 @@ export const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit, workspaceId,
     } 
   })
 
+  if (isLoadingKnowledgeSources && knowledgeSources.length === 0) {return null}
+  if (ksListError) {return null}
+
   const addFavoriteKs = async (idOrSlug: string) => {
     try {
       await addFavorite({ slug: idOrSlug })
@@ -162,16 +198,24 @@ export const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit, workspaceId,
 
   return (
     <>
-      <div className="content">
-        <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" />}
-        />
-      </div>
+      <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>}
     </>
   )
@@ -188,7 +232,6 @@ export function KnowledgeSourcesTabWorkspace({ allKS, onSubmit }: TabProps) {
   return <WorkspaceTabNavigator components={workspaceTabComponents} getNavigateParam={buildNavigateParams} />
 }
 
-
 const dictionary = {
   en: {
     title: 'Knowledge Sources',

package/src/views/MessageInput/QuickCommandSelector.tsx

@@ -1,7 +1,9 @@
+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 } from 'react'
+import { useCallback, useMemo } from 'react'
+import InfiniteScroll from 'react-infinite-scroll-component'
 import { Selector } from '../../components/Selector'
 import { useCurrentChat, useCurrentChatState, useWidgetState } from '../../context/hooks'
 import { quickCommandRegex } from '../../regex'
@@ -77,51 +79,103 @@ export const QuickCommandSelector = ({ inputRef, isTrial }:
     inputRef.current.focus()
   }, [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 [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 workspaceQuickCommands = workspaceAiClient.workspacesContentsByType.useQuery({
-      contentType: 'quick_command',
-    })
+  const allQuickCommands =
+    spotId
+      ? workspaceAiClient.getQCFromWorkspaceAi.useQuery({ workspaceId: spotId }) || []
+      : [...quickCommandsFiltered, ...workspaceQuickCommandsWithWorkspaceName]
 
-    const workspaceQuickCommandsWithWorkspaceName: QuickCommandResponseWithSpaceName[] =
-    workspaceQuickCommands.flatMap(({ qcs, space_name }) =>
-      qcs?.map((qc) => ({ ...qc, spaceName: space_name })),
-    ) as QuickCommandResponseWithSpaceName[]
+  const fetchNextPage = !spotId ? infiniteQueryResult?.fetchNextPage : undefined
+  const hasNextPage = !spotId ? infiniteQueryResult?.hasNextPage : false
 
-    return [...quickCommandsFiltered, ...workspaceQuickCommandsWithWorkspaceName]
-  }
-
-  const QuickCommandItem = ({ slug, description, spaceName }: QuickCommandResponseWithSpaceName) => <>
+  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 <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,
-    }}
-  />
+  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>
+  )
 }

package/src/views/MessageInput/UploadBar.tsx

@@ -80,12 +80,6 @@ export const UploadBar = () => {
     setAriaMessage(lines.join(' '))
     setTimeout(() => setAriaMessage(''), 2000)
     chat.pushMessage(new ChatEntry({ agentType: 'system', type: 'md', content: lines.join('\n\n') }))
-
-    if (lines.length) {
-      setAriaMessage(lines.join(' '))
-      setTimeout(() => setAriaMessage(''), 2000)
-      chat.pushMessage(new ChatEntry({ agentType: 'system', type: 'md', content: lines.join('\n\n') }))
-    }
   })
   
   return (