@stack-spot/ai-chat-widget 1.14.0-beta.7 → 1.14.0

package/src/views/KnowledgeSources.tsx

@@ -1,11 +1,12 @@
 import { Button } from '@citric/core'
 import { Search } from '@citric/icons'
 import { Placeholder } from '@stack-spot/portal-components/Placeholder'
-import { aiClient } from '@stack-spot/portal-network'
+import { aiClient, dataIntegrationClient } from '@stack-spot/portal-network'
 import { KnowledgeSourceItemResponse, VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { difference, uniqBy } from 'lodash'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { ButtonFavorite } from '../components/ButtonFavorite'
 import { DescribedCheckboxGroup } from '../components/form/DescribedCheckboxGroup'
 import { IconInput } from '../components/IconInput'
 import { RightPanelTabs } from '../components/RightPanelTabs'
@@ -54,10 +55,12 @@ const KnowledgeSourcesPanel = () => {
   useEffect(() => {
     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.account, content: <KnowledgeSourcesTab key="account" visibility="account" allKS={allKS} onSubmit={onSubmit} /> },
@@ -69,18 +72,46 @@ const KnowledgeSourcesPanel = () => {
 const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit }: TabProps) => {
   const t = useTranslate(dictionary)
   const [filter, setFilter] = useState('')
+  
   const knowledgeSources = aiClient.knowledgeSources.useQuery({ 
     visibility, order: 'a-to-z', types: ['snippet', 'api', 'event', 'custom'], 
   })
+  const listFavorites = dataIntegrationClient.knowledgeSources.useQuery({ visibility: 'favorite' })
+  const [addFavorite, pendingAddFav] = dataIntegrationClient.addFavoriteKnowledgeSource.useMutation()
+  const [removeFavorite, pendingRemoveFav] = dataIntegrationClient.removeFavoriteKnowledgeSource.useMutation()
+
+  const onRemoveFavorite = async (idOrSlug: string) => {
+    try {
+      await removeFavorite({ slug: idOrSlug })
+      await aiClient.knowledgeSources.invalidate()
+      await dataIntegrationClient.knowledgeSources.invalidate()
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }
+
+  const onAddFavorite = async (idOrSlug: string) => {
+    try {
+      await addFavorite({ slug: idOrSlug })
+      await aiClient.knowledgeSources.invalidate()
+      await dataIntegrationClient.knowledgeSources.invalidate()
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }
+  
   const [value, setValue] = useState<KnowledgeSourceItemResponse[]>((() => {
     const currentlySelected = allKS.current?.map(ks => ks.id)
     return knowledgeSources.filter(ks => currentlySelected?.includes(ks.slug))
   })())
   const filtered = useMemo(
-    () => filter
-      ? knowledgeSources.filter(ks => value.includes(ks) || ks.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
-      : knowledgeSources,
-    [knowledgeSources, filter, value],
+    () => filter 
+      // Recreate the list so that the favorites list is taken into account
+      ? knowledgeSources.filter(ks => value.includes(ks) || ks.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) 
+      : [...knowledgeSources]
+    , [knowledgeSources, filter, value, listFavorites],
   )
 
   const onChange = useCallback((newValue: KnowledgeSourceItemResponse[]) => {
@@ -99,6 +130,10 @@ const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit }: TabProps) => {
         <IconInput icon={<Search />} value={filter} onChange={setFilter} className="search" />
         {!!filtered.length && <DescribedCheckboxGroup
           options={filtered}
+          renderAfterElement={({ slug }) => (
+            <ButtonFavorite 
+              favorite={{ idOrSlug: slug, listFavorites, onAddFavorite, onRemoveFavorite, pendingAddFav, pendingRemoveFav }} />
+          )}
           keygen={ks => ks.id}
           value={value}
           onChange={onChange}
@@ -110,10 +145,10 @@ const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit }: TabProps) => {
           }
           className="option-list"
         />}
-        {!!knowledgeSources.length && !filtered.length && (
+        {!!filtered.length && !filtered.length && (
           <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />
         )}
-        {!knowledgeSources.length && <Placeholder title={t.noData} description={t.noDataDescription} className="no-data-placeholder" />}
+        {!filtered.length && <Placeholder title={t.noData} description={t.noDataDescription} className="no-data-placeholder" />}
       </div>
       {!!filtered.length && <Button onClick={onSubmit}>{t.apply}</Button>}
     </>
@@ -124,6 +159,7 @@ const dictionary = {
   en: {
     title: 'Knowledge Sources',
     description: 'By selecting one or more knowledge sources, they will be consulted to generate the responses.',
+    favorites: 'Favorites',
     personal: 'Personal',
     shared: 'Shared',
     account: 'Account',
@@ -136,6 +172,7 @@ const dictionary = {
   pt: {
     title: 'Knowledge Sources',
     description: 'Ao selecionar um ou mais knowledge sources, eles serão consultados para gerar as respostas.',
+    favorites: 'Favoritos',
     personal: 'Pessoal',
     shared: 'Compartilhado',
     account: 'Conta',

package/src/views/MessageInput/AgentSelector.tsx

@@ -7,11 +7,15 @@ import { useCallback } from 'react'
 import { Selector } from '../../components/Selector'
 import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
 import { agentRegex } from '../../regex'
+import { useAgentFavorites } from '../Agents/useAgentFavorites'
 
 export const AgentSelector = ({ inputRef, isTrial }: { isTrial: boolean,
   inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement>, }) => {
   const chat = useCurrentChat()
   const isAgentEnabled = useCurrentChatState('features').agent
+  
+  const { listFavorites, onAddFavorite, onRemoveFavorite, pendingAddFav, pendingRemoveFav } = useAgentFavorites()
+
   const onSelectItem = useCallback((agent: AgentResponse) => {
     const newValue = `@${agent.slug}`
     chat.set('nextMessage', undefined)
@@ -36,16 +40,17 @@ export const AgentSelector = ({ inputRef, isTrial }: { isTrial: boolean,
   }
 
   const AgentItem = ({ avatar, name }: AgentResponse) => {
-    const AvatarComponent = avatar ? <Image width="32" height="32" radius="full" src={avatar} /> : <IconBox size="md"><Agent /></IconBox>
+    const avatarComponent = avatar ? <Image width="32" height="32" radius="full" src={avatar} /> : <IconBox size="md"><Agent /></IconBox>
 
     return <Flex flexWrap="nowrap" alignItems="center" sx={{ gap: '8px' }}>
-      {AvatarComponent}
+      {avatarComponent}
       <p className="selector-title">{name}</p>
     </Flex>
   }
 
   return <Selector
     inputRef={inputRef}
+    favorite={{ listFavorites, onAddFavorite, onRemoveFavorite, pendingAddFav, pendingRemoveFav }}
     selectorConfig={{
       resourceName: 'Agent',
       shortcut: '@',
@@ -53,7 +58,7 @@ export const AgentSelector = ({ inputRef, isTrial }: { isTrial: boolean,
       regex: agentRegex,
       urlBuilder: (agent) => `/agents/${agent?.id}`,
       searchProp: 'name',
-      sections:  isTrial ? ['personal', 'builtIn'] : ['personal', 'account', 'shared', 'builtIn'],
+      sections:  isTrial ? ['favorite', 'personal', 'builtIn'] : ['favorite', 'personal', 'account', 'shared', 'builtIn'],
       renderComponentItem: AgentItem,
       isEnabled: isAgentEnabled,
       onSelect: onSelectItem,

package/src/views/MessageInput/QuickCommandSelector.tsx

@@ -11,6 +11,29 @@ export const QuickCommandSelector = ({ inputRef, isTrial }:
   const chat = useCurrentChat()
   const isQuickCommandEnabled =  useCurrentChatState('features').quickCommands
 
+  const listFavorites = aiClient.quickCommands.useQuery({ visibility: 'favorite' })
+  const [addFavorite, pendingAddFav] = aiClient.addFavoriteQuickCommand.useMutation()
+  const [removeFavorite, pendingRemoveFav] = aiClient.removeFavoriteQuickCommand.useMutation()
+
+  const onAddFavorite = async(idOrSlug?: string) => {
+    try {
+      await addFavorite({ slug: idOrSlug || '' })
+      await aiClient.quickCommands.invalidate()
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }
+  const onRemoveFavorite = async(idOrSlug?: string) => {
+    try {
+      await removeFavorite({ slug: idOrSlug || '' })
+      await aiClient.quickCommands.invalidate()
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }
+  
   const onSelectItem = useCallback((qc: QuickCommandListResponse) => {
     const newValue = `/${qc.slug}`
     chat.set('nextMessage', newValue)
@@ -27,6 +50,7 @@ export const QuickCommandSelector = ({ inputRef, isTrial }:
 
   return <Selector
     inputRef={inputRef}
+    favorite={{ listFavorites, onAddFavorite, onRemoveFavorite, pendingAddFav, pendingRemoveFav }}
     selectorConfig={{
       resourceName: 'Quick Command',
       shortcut: '/',
@@ -34,7 +58,7 @@ export const QuickCommandSelector = ({ inputRef, isTrial }:
       searchProp: 'slug',
       urlBuilder: (qc) => `/quick-command/${qc?.slug}`,
       regex: quickCommandRegex,
-      sections: isTrial ? ['personal'] : ['personal', 'workspace', 'account', 'shared'],
+      sections: isTrial ? ['favorite', 'personal'] : ['favorite', 'personal', 'workspace', 'account', 'shared'],
       isEnabled: isQuickCommandEnabled,
       onSelect: onSelectItem,
       renderComponentItem: QuickCommandItem,

package/src/views/Stacks.tsx

@@ -5,6 +5,7 @@ import { aiClient } from '@stack-spot/portal-network'
 import { GetAiStackResponse, VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useEffect, useMemo, useState } from 'react'
+import { ButtonFavorite } from '../components/ButtonFavorite'
 import { DescribedRadioGroup } from '../components/form/DescribedRadioGroup'
 import { IconInput } from '../components/IconInput'
 import { RightPanelTabs } from '../components/RightPanelTabs'
@@ -34,11 +35,14 @@ export const Stacks = () => {
 const StacksPanel =  () => {
   const t = useTranslate(dictionary)
   const chat = useCurrentChat()
+  
   const isTrial = checkIsTrial()
 
   const tabs = useMemo(() => isTrial ? [
+    { title: t.favorites, content: <StacksTab key="favorites" visibility="favorite" /> },
     { title: t.personal, content: <StacksTab key="personal" visibility="personal" /> },
   ]: [
+    { title: t.favorites, content: <StacksTab key="favorites" visibility="favorite" /> },
     { title: t.personal, content: <StacksTab key="personal" visibility="personal" /> },
     { title: t.shared, content: <StacksTab key="shared" visibility="shared" /> },
     { title: t.account, content: <StacksTab key="account" visibility="account" /> },
@@ -52,12 +56,38 @@ const StacksTab = ({ visibility }: { visibility: VisibilityLevelEnum }) => {
   const { close } = useRightPanel()
   const chat = useCurrentChat()
   const [filter, setFilter] = useState('')
-  // @ts-ignore type in backend (openapi) is incorrect. fixme.
+
+  const listFavorites = aiClient.aiStacks.useQuery({ visibility: 'favorite' })
+  const [addFavorite, pendingAddFav] = aiClient.addFavoriteStackAi.useMutation()
+  const [removeFavorite, pendingRemoveFav] = aiClient.removeFavoriteStackAi.useMutation()
+
+  const onRemoveFavorite = async (idOrSlug: string) => {
+    try {
+      await removeFavorite({ stackId: idOrSlug })
+      await aiClient.aiStacks.invalidate()
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }
+
+  const onAddFavorite = async (idOrSlug: string) => {
+    try {
+      await addFavorite({ stackId: idOrSlug })
+      await aiClient.aiStacks.invalidate()
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }
+  
+  //@ts-ignore
   const stacks = aiClient.aiStacks.useQuery({ visibility, order: 'a-to-z' })
   const [value, setValue] = useState<GetAiStackResponse | undefined>(stacks.find(s => s.id === chat.get('stack')?.id))
-  const filtered = useMemo(
-    () => filter ? stacks.filter(s => s === value || s.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : stacks,
-    [stacks, filter, value],
+  const filtered = useMemo(() => filter ? 
+    // Recreate the list so that the favorites list is taken into account
+    stacks.filter(s => s === value || s.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : [...stacks], 
+  [stacks, listFavorites, filter, value],
   )
 
   function submit() {
@@ -71,6 +101,9 @@ const StacksTab = ({ visibility }: { visibility: VisibilityLevelEnum }) => {
         <IconInput icon={<Search />} value={filter} onChange={setFilter} className="search" />
         {!!filtered.length && <DescribedRadioGroup
           options={filtered}
+          renderAfterElement={({ id }) => 
+            <ButtonFavorite favorite={{ idOrSlug:id, listFavorites, onAddFavorite, onRemoveFavorite, pendingAddFav, pendingRemoveFav }} />
+          }
           keygen={s => s.id}
           value={value}
           onChange={setValue}
@@ -103,6 +136,7 @@ const dictionary = {
     noSearchResultsDescription: 'Please, try another search term.',
     noData: 'There are no stacks in this category yet.',
     noDataDescription: 'Use the tabs above to try other categories or use the AI portal to create new stacks.',
+    favorites: 'Favoritos',
   },
   pt: {
     title: 'Stacks AI',
@@ -115,5 +149,6 @@ const dictionary = {
     noSearchResultsDescription: 'Por favor, tente outra busca.',
     noData: 'Ainda não há stacks nesta categoria.',
     noDataDescription: 'Use as abas acima para tentar outras categorias ou use o Portal AI para criar novas stacks.',
+    favorites: 'Favorites',
   },
 } satisfies Dictionary

package/src/views/Workspaces.tsx

@@ -1,13 +1,13 @@
 import { Button } from '@citric/core'
 import { Search } from '@citric/icons'
 import { Placeholder } from '@stack-spot/portal-components/Placeholder'
-import { workspaceAiClient } from '@stack-spot/portal-network'
-import { WorkspaceResponse } from '@stack-spot/portal-network/api/workspace-ai'
+import { workspaceClient } from '@stack-spot/portal-network'
+import { WorkspaceReadResponse } from '@stack-spot/portal-network/api/workspace'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useEffect, useMemo, useState } from 'react'
 import { DescribedRadioGroup } from '../components/form/DescribedRadioGroup'
 import { IconInput } from '../components/IconInput'
-import { RightPanelForm } from '../components/RightPanelForm'
+import { RightPanelTabs } from '../components/RightPanelTabs'
 import { useCurrentChat, useWidget, useWidgetState } from '../context/hooks'
 import { useRightPanel } from '../right-panel/hooks'
 
@@ -23,22 +23,60 @@ export const Workspaces = () => {
 
   useEffect(() => {
     if (panel === 'workspace') open(
-      <RightPanelForm><WorkspacesPanel key={chat.id} /></RightPanelForm>,
+      <WorkspacesPanel key={chat.id} />,
       { title: t.title, description: t.description, onClose: () => widget.set('panel', undefined) },
     )
   }, [panel, t, chat.id])
-
   return null
 }
 
 const WorkspacesPanel = () => {
+  const t = useTranslate(dictionary)
+  const chat = useCurrentChat()
+
+  return <RightPanelTabs key={chat.id} tabs={[
+    // { title: t.favorites, content: <WorkspaceSourcesTab key="favorite" visibility="favorite" /> },
+    { title: t.all, content: <WorkspaceSourcesTab key="all" /> },
+  ]}
+  />
+}
+
+const WorkspaceSourcesTab = () => {
   const t = useTranslate(dictionary)
   const { close } = useRightPanel()
   const chat = useCurrentChat()
   const [filter, setFilter] = useState('')
-  const workspaces = workspaceAiClient.workspacesAi.useQuery({})
-  const [value, setValue] = useState<WorkspaceResponse | undefined>(workspaces.find(w => w.id === chat.get('workspace')?.id))
+  // const workspaces = workspaceAiClient.workspacesAi.useQuery({ visibility })
+  // const [value, setValue] = useState<WorkspaceResponse | undefined>(workspaces.find(w => w.id === chat.get('workspace')?.id))
+  const workspaces = workspaceClient.workspaces.useQuery({ aclOnly: false })
+
+  const [value, setValue] = useState<WorkspaceReadResponse | undefined>(workspaces.find(w => w.id === chat.get('workspace')?.id))
+  // const listFavorites = workspaceAiClient.workspacesAi.useQuery({ visibility: 'favorite' })
+
+  // const [addFavorite, pendingAddFav] = workspaceAiClient.addFavoriteWorkspaceAi.useMutation()
+  // const [removeFavorite, pendingRemoveFav] = workspaceAiClient.removeFavoriteWorkspaceAi.useMutation()
+
+  // const onAddFavorite = async(idOrSlug: string) => {
+  //   try {
+  //     await addFavorite({ workspaceId: idOrSlug })
+  //     await workspaceAiClient.workspacesAi.invalidate()
+  //   } catch (error) {
+  //     // eslint-disable-next-line no-console
+  //     console.error(error)
+  //   }
+  // }
+  // const onRemoveFavorite = async(idOrSlug: string) => {
+  //   try {
+  //     await removeFavorite({ workspaceId: idOrSlug })
+  //     await workspaceAiClient.workspacesAi.invalidate()
+  //   } catch (error) {
+  //     // eslint-disable-next-line no-console
+  //     console.error(error)
+  //   }
+  // }
+
   const filtered = useMemo(
+    // Recreate the list so that the favorites list is taken into account
     () => filter ? workspaces.filter(w => w === value || w.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : workspaces,
     [workspaces, filter, value],
   )
@@ -47,7 +85,6 @@ const WorkspacesPanel = () => {
     if (value) chat.set('workspace', { id: value.id, label: value.name })
     close()
   }
-
   return (
     <>
       <div className="content">
@@ -83,6 +120,8 @@ const dictionary = {
     noSearchResultsDescription: 'Please, try another search term.',
     noData: 'There are no workspaces yet.',
     noDataDescription: 'Use the AI portal to create new workspaces.',
+    all: 'All',
+    favorites: 'Favorites',
   },
   pt: {
     title: 'Workspaces',
@@ -92,5 +131,7 @@ const dictionary = {
     noSearchResultsDescription: 'Por favor, tente outra busca.',
     noData: 'Ainda não há workspace.',
     noDataDescription: 'Use o Portal AI para criar novos workspaces.',
+    all: 'Todos',
+    favorites: 'Favoritos',
   },
 } satisfies Dictionary