@stack-spot/ai-chat-widget 2.9.0 → 2.11.0

package/src/views/KnowledgeSources.tsx

@@ -2,6 +2,7 @@ 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'
@@ -64,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} /> },
   }
 
@@ -95,16 +102,29 @@ 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'],
-    })
+  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))
-  }, [])
-  const listFavorites = dataIntegrationClient.knowledgeSources.useQuery({ visibility: 'favorite' })
+    return knowledgeSources?.filter((ks: KnowledgeSourceItemResponse) => currentlySelected?.includes(ks.slug))
+  }, [knowledgeSources])
+
+  const listFavorites = dataIntegrationClient.knowledgeSourcesV2.useQuery({ visibilityList: ['favorite'] })?.items
+
   const [addFavorite, pendingAddFav] = dataIntegrationClient.addFavoriteKnowledgeSource.useMutation()
   const [removeFavorite, pendingRemoveFav] = dataIntegrationClient.removeFavoriteKnowledgeSource.useMutation()
 
@@ -112,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)
@@ -123,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)
       }
 
@@ -131,14 +151,14 @@ export const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit, workspaceId,
       // eslint-disable-next-line no-console
       console.error(error)
       reject(error)
-    } 
+    }
   })
 
   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)
@@ -149,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)
       }
 
@@ -157,23 +177,27 @@ export const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit, workspaceId,
       // eslint-disable-next-line no-console
       console.error(error)
       reject(error)
-    } 
+    }
   })
 
-  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>
-      {!!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>}
+  </>
   )
 }
 
@@ -184,11 +208,10 @@ export function KnowledgeSourcesTabWorkspace({ allKS, onSubmit }: TabProps) {
     component: 'ks',
     props: { visibility: 'workspace', workspaceId: workspace.id, allKS, onSubmit },
   })
-  
+
   return <WorkspaceTabNavigator components={workspaceTabComponents} getNavigateParam={buildNavigateParams} />
 }
 
-
 const dictionary = {
   en: {
     title: 'Knowledge Sources',

package/src/views/MessageInput/AgentSelector.tsx

@@ -1,6 +1,7 @@
 import { Icon } from '@stack-spot/citric-icons'
 import { IconBox, Row, Text } from '@stack-spot/citric-react'
-import { AgentResponseWithBuiltIn, agentToolsClient, workspaceAiClient } from '@stack-spot/portal-network'
+import { AgentResponseWithBuiltIn, agentToolsClient, AgentVisibilityLevel, workspaceAiClient } from '@stack-spot/portal-network'
+import { VisibilityLevelEnum } from '@stack-spot/portal-network/api/agent-tools'
 import { useCallback } from 'react'
 import { Selector } from '../../components/Selector'
 import { useCurrentChat, useCurrentChatState, useWidgetState } from '../../context/hooks'
@@ -54,18 +55,19 @@ export const AgentSelector = ({ inputRef, isTrial }: {
   }, [chat, inputRef])
 
 
-  const getAgents = () => {
+  const getAgents = ({ filter, visibility }: {filter?: string, visibility?: AgentVisibilityLevel[] | VisibilityLevelEnum[]}) => {
     if (spotId) {
-      return workspaceAiClient.getAgentFromWorkspaceAi.useQuery({ workspaceId: spotId }) as AgentResponseWithBuiltIn[]
+      return { data: workspaceAiClient.getAgentFromWorkspaceAi.useQuery({ 
+        workspaceId: spotId, name: filter }) as AgentResponseWithBuiltIn[] }
     }
 
     if (isTrial) {
-      return agentToolsClient.allAgents.useQuery({ visibilities: ['personal', 'built_in', 'recently_used'] })
+      return  { data: agentToolsClient.allAgents.useQuery({ visibilities: visibility as VisibilityLevelEnum[], filter }) }
     }
-
-    return agentToolsClient.allAgents.useQuery({
-      visibilities: ['account', 'shared', 'personal', 'built_in', 'recently_used', 'workspace'],
-    })
+    
+    return  { data: agentToolsClient.allAgents.useQuery({
+      visibilities: visibility as VisibilityLevelEnum[], filter,
+    }) }
   }
 
   return <Selector

package/src/views/MessageInput/QuickCommandSelector.tsx

@@ -1,6 +1,6 @@
 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 { AgentVisibilityLevel, aiClient, workspaceAiClient } from '@stack-spot/portal-network'
+import { QuickCommandResponse, VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
 import { useCallback } from 'react'
 import { Selector } from '../../components/Selector'
 import { useCurrentChat, useCurrentChatState, useWidgetState } from '../../context/hooks'
@@ -8,17 +8,16 @@ import { quickCommandRegex } from '../../regex'
 
 type QuickCommandResponseWithSpaceName = QuickCommandResponse & { spaceName?: string }
 
-export const QuickCommandSelector = ({ inputRef, isTrial }: 
+export const QuickCommandSelector = ({ inputRef, isTrial }:
   { isTrial: boolean, inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement> }) => {
   const chat = useCurrentChat()
-  const isQuickCommandEnabled =  useCurrentChatState('features').quickCommands
+  const isQuickCommandEnabled = useCurrentChatState('features').quickCommands
   const spotId = useWidgetState('features')?.workspaceId
 
-  const useFavorites = () => aiClient.allQuickCommands.useQuery({ visibility: 'favorite' })
   const [addFavorite, pendingAddFav] = aiClient.addFavoriteQuickCommand.useMutation()
   const [removeFavorite, pendingRemoveFav] = aiClient.removeFavoriteQuickCommand.useMutation()
 
-  const addFavoriteQc = async(idOrSlug?: string) => {
+  const addFavoriteQc = async (idOrSlug?: string) => {
     try {
       await addFavorite({ slug: idOrSlug || '' })
       await aiClient.allQuickCommands.invalidate()
@@ -32,7 +31,7 @@ export const QuickCommandSelector = ({ inputRef, isTrial }:
   const onAddFavorite = (idOrSlug?: string) => new Promise<boolean>(async (resolve, reject) => {
     try {
       await addFavoriteQc(idOrSlug)
-      if (!pendingAddFav){
+      if (!pendingAddFav) {
         resolve(true)
       }
 
@@ -40,10 +39,10 @@ export const QuickCommandSelector = ({ inputRef, isTrial }:
       // eslint-disable-next-line no-console
       console.error(error)
       reject(error)
-    } 
-  }) 
+    }
+  })
 
-  const removeFavoriteQc = async(idOrSlug?: string) => {
+  const removeFavoriteQc = async (idOrSlug?: string) => {
     try {
       await removeFavorite({ slug: idOrSlug || '' })
       await aiClient.allQuickCommands.invalidate()
@@ -57,7 +56,7 @@ export const QuickCommandSelector = ({ inputRef, isTrial }:
   const onRemoveFavorite = (idOrSlug?: string) => new Promise<boolean>(async (resolve, reject) => {
     try {
       await removeFavoriteQc(idOrSlug)
-      if (!pendingRemoveFav){
+      if (!pendingRemoveFav) {
         resolve(true)
       }
 
@@ -65,9 +64,9 @@ export const QuickCommandSelector = ({ inputRef, isTrial }:
       // eslint-disable-next-line no-console
       console.error(error)
       reject(error)
-    } 
+    }
   })
-  
+
   const onSelectItem = useCallback((qc: QuickCommandResponseWithSpaceName) => {
     const newValue = `/${qc.slug}`
     chat.set('nextMessage', newValue)
@@ -77,12 +76,19 @@ export const QuickCommandSelector = ({ inputRef, isTrial }:
     inputRef.current.focus()
   }, [chat, inputRef])
 
-  const getQuickCommands = () => {
+  const getQuickCommands = ({ filter, visibility }: { filter?: string, visibility?: AgentVisibilityLevel[] | VisibilityLevelEnum[] }) => {
+
     if (spotId) {
-      return workspaceAiClient.getQCFromWorkspaceAi.useQuery({ workspaceId: spotId })
+      return { data: workspaceAiClient.getQCFromWorkspaceAi.useQuery({ workspaceId: spotId, name: filter }) }
     }
 
-    const quickCommands = aiClient.allQuickCommands.useQuery({ order: 'a-to-z' })
+    const [quickCommands, { fetchNextPage, hasNextPage }] = aiClient.allQuickCommandsV3.useInfiniteQuery({
+      order: 'a-to-z',
+      visibilityList: visibility as VisibilityLevelEnum[],
+      name: filter,
+      page: 1, size: 20,
+    })
+
     const quickCommandsFiltered = quickCommands.filter(
       (qc) => qc.visibility_level.toLowerCase() !== 'workspace',
     )
@@ -92,11 +98,17 @@ export const QuickCommandSelector = ({ inputRef, isTrial }:
     })
 
     const workspaceQuickCommandsWithWorkspaceName: QuickCommandResponseWithSpaceName[] =
-    workspaceQuickCommands.flatMap(({ qcs, space_name }) =>
-      qcs?.map((qc) => ({ ...qc, spaceName: space_name })),
-    ) as QuickCommandResponseWithSpaceName[]
+      workspaceQuickCommands.flatMap(({ qcs, space_name }) =>
+        qcs?.map((qc) => ({ ...qc, spaceName: space_name })),
+      ) as QuickCommandResponseWithSpaceName[]
+
+    const filteredWorkspaceQuickCommand = filter ? workspaceQuickCommandsWithWorkspaceName?.filter((qc) => 
+      qc.name?.toLowerCase().includes(filter!)) : workspaceQuickCommandsWithWorkspaceName
 
-    return [...quickCommandsFiltered, ...workspaceQuickCommandsWithWorkspaceName]
+    const data = !visibility ? [...quickCommandsFiltered, ...filteredWorkspaceQuickCommand] : (
+      visibility.includes('workspace') ? filteredWorkspaceQuickCommand : quickCommandsFiltered
+    )
+    return { data, fetchNextPage: fetchNextPage, hasNextPage }
   }
 
   const QuickCommandItem = ({ slug, description, spaceName }: QuickCommandResponseWithSpaceName) => <>
@@ -107,9 +119,7 @@ export const QuickCommandSelector = ({ inputRef, isTrial }:
 
   return <Selector
     inputRef={inputRef}
-    favorite={{ 
-      useFavorites, onAddFavorite, onRemoveFavorite, favoriteIsSlug: true,
-    }}
+    favorite={{ onAddFavorite, onRemoveFavorite, favoriteIsSlug: true }}
     selectorConfig={{
       resourceName: 'Quick Command',
       shortcut: '/',