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

package/src/components/ButtonFavorite.tsx

@@ -0,0 +1,100 @@
+import { Button, IconBox } from '@citric/core'
+import { Star, StarFill } from '@citric/icons'
+import { IconButton, LoadingCircular } from '@citric/ui'
+import { useTranslate } from '@stack-spot/portal-translate'
+import { useEffect, useState } from 'react'
+import { dictionaryFavorites } from './form/dictionary'
+
+interface ItemFavorite {
+  id?: string,
+  slug?: string,
+}
+
+interface Favorite<T extends ItemFavorite> {
+  /**
+   * id or slug to be used on functions
+   */
+  idOrSlug: string,
+  /**
+   * Array containing the list of favorite items.
+   */
+  listFavorites?: T[], 
+  /**
+   * Function to add an item to the list of favorites.
+   * @param idOrSlug - The ID or slug of the content to be added to the favorites list.
+   * @returns void
+   */
+  onAddFavorite?: (idOrSlug: string) => void, 
+  /**
+   * Function to remove an item from the list of favorites.
+   * @param idOrSlug - The ID or slug of the content to be removed from the favorites list.
+   * @returns void
+   */
+  onRemoveFavorite?: (idOrSlug: string) => void, 
+  /**
+   * Indicates whether a request to add a favorite item is pending. 
+   */
+  pendingAddFav?: boolean, 
+  /**
+   * Indicates whether a request to remove a favorite item is pending.
+   */
+  pendingRemoveFav?: boolean,
+}
+
+interface Props<T extends ItemFavorite> {
+  /**
+   * Determine whether the component should be a Button or an IconButton.
+   */
+  isIconButton?: boolean,
+  /**
+   * An object containing favorite items and related operations.
+  */
+ favorite: Favorite<T>,
+}
+
+export const ButtonFavorite = <T extends ItemFavorite>({ favorite, isIconButton = false }: Props<T>) => {
+  const [isFavorite, setIsFavorite] = useState(false)
+  const { idOrSlug, listFavorites, pendingAddFav, pendingRemoveFav } = favorite || {}
+
+  useEffect(() => {
+    setIsFavorite(!!listFavorites?.some((fav) => fav.slug === idOrSlug || fav.id === idOrSlug))
+  }, [listFavorites])
+
+  return (
+    <ButtonWrapper isFavorite={isFavorite} isIconButton={isIconButton} favorite={favorite}>
+      <IconBox colorIcon={isFavorite ? 'yellow.500' : 'light'}>
+        {pendingAddFav || pendingRemoveFav ? 
+          <LoadingCircular colorScheme="warning"/> : isFavorite ? <StarFill/> : <Star/> }
+      </IconBox>
+    </ButtonWrapper>
+  )
+}
+
+const ButtonWrapper = <T extends ItemFavorite>({ children, isIconButton, isFavorite, favorite }: 
+  {children: React.ReactNode, isIconButton?: boolean, isFavorite: boolean, favorite: Favorite<T>}) => {
+  const t = useTranslate(dictionaryFavorites)
+  const { idOrSlug, onAddFavorite, onRemoveFavorite, pendingAddFav, pendingRemoveFav } = favorite
+  if (isIconButton){
+    return (
+      <IconButton 
+        as="button" 
+        disabled={pendingAddFav || pendingRemoveFav} 
+        aria-label={`${t[isFavorite ? 'remove' : 'become']} ${t.favorite}`}
+        title={`${t[isFavorite ? 'remove' : 'become']} ${t.favorite}`}
+        onClick={() => isFavorite ? onRemoveFavorite?.(idOrSlug || '') : onAddFavorite?.(idOrSlug || '')}>
+        {children}
+      </IconButton>
+    )
+  }
+  return (
+    <Button 
+      as="button" 
+      colorScheme="light" 
+      disabled={pendingAddFav || pendingRemoveFav} 
+      aria-label={`${t[isFavorite ? 'remove' : 'become']} ${t.favorite}`}
+      title={`${t[isFavorite ? 'remove' : 'become']} ${t.favorite}`}
+      onClick={() => isFavorite ? onRemoveFavorite?.(idOrSlug || '') : onAddFavorite?.(idOrSlug || '')} >
+      {children}
+    </Button>
+  )
+}

package/src/components/Selector/index.tsx

@@ -7,6 +7,7 @@ import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-transl
 import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useCurrentChatState } from '../../context/hooks'
 import { getUrlToStackSpotAI } from '../../utils/url'
+import { ButtonFavorite } from '../ButtonFavorite'
 import { Fading } from '../Fading'
 import { FallbackBoundary } from '../FallbackBoundary'
 import { SelectorBox } from './styled'
@@ -22,11 +23,20 @@ interface Item {
   visibility_level: SectionVisibility,
 }
 
+interface Favorite<T> {
+  listFavorites?: Array<T>, 
+  onAddFavorite?: (idOrSlug?: string) => void, 
+  onRemoveFavorite?: (idOrSlug?: string) => void, 
+  pendingAddFav: boolean, 
+  pendingRemoveFav: boolean,
+}
+
 interface ListProps<T> {
   filter?: string,
   visibility?: SectionVisibility,
   selectorConfig: SelectorConfig<T>,
   onSelect: (item: T) => void,
+  favorite?: Favorite<T>,
 }
 
 interface ListItemProps<T> extends ListProps<T> {
@@ -38,6 +48,7 @@ interface ContentProps<T> {
   onClose: () => void,
   inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement>,
   selectorConfig: SelectorConfig<T>,
+  favorite?: Favorite<T>,
 }
 
 interface SelectorConfig<T> {
@@ -57,9 +68,10 @@ interface SelectorConfig<T> {
 interface SelectorProps<T> {
   selectorConfig: SelectorConfig<T>,
   inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement>,
+  favorite?: Favorite<T>,
 }
 
-const ListItem = <T extends Item>({ item, selectorConfig, onSelect }: ListItemProps<T>) => {
+const ListItem = <T extends Item>({ item, selectorConfig, onSelect, favorite }: ListItemProps<T>) => {
   const t = useTranslate(dictionary)
   const { urlBuilder, renderComponentItem } = selectorConfig
   const linkTitle = interpolate(t.open, item.slug)
@@ -78,40 +90,54 @@ const ListItem = <T extends Item>({ item, selectorConfig, onSelect }: ListItemPr
       <IconButton as="a" title={linkTitle} aria-label={linkTitle} href={`${getUrlToStackSpotAI()}${urlBuilder(item)}`} target="_blank">
         <ExternalLink />
       </IconButton>
+      <ButtonFavorite favorite={{ idOrSlug: item?.id || '', ...favorite }} isIconButton />
     </li>
   )
 }
 
-const List = <T extends Item>({ selectorConfig, filter, visibility, onSelect }: ListProps<T>) => {
+const List = <T extends Item>({ selectorConfig, filter, visibility, onSelect, favorite }: ListProps<T>) => {
   const t = useTranslate(dictionary)
   const items = selectorConfig.data()
+
   const filtered = useMemo(() => {
-    if (!filter && !visibility) return items
+    if (!filter && !visibility) return [...items]
     const lowerFilter = filter?.toLowerCase() ?? ''
 
+    if (visibility?.toLowerCase() === 'favorite'){
+      return favorite?.listFavorites?.filter(item =>
+        (item[selectorConfig.searchProp] as string).toLocaleLowerCase().includes(lowerFilter))
+    }
+
     return items.filter(item =>
       (item[selectorConfig.searchProp] as string).toLocaleLowerCase().includes(lowerFilter) &&
       (!visibility || item?.visibility_level?.toLowerCase() === visibility.toLowerCase()),
     )
-  }, [filter, items, visibility])
+  }, [filter, items, visibility, favorite?.listFavorites])
+
 
   if (!items.length) return <Text className="empty" colorScheme="light.700">{interpolate(t.noData, selectorConfig.resourceName)}</Text>
-  if (!filtered.length)
+  if (!filtered?.length)
     <Text className="empty" colorScheme="light.700">{interpolate(t.noResults, selectorConfig.resourceName)}</Text>
 
   return (
     <ul className="selector-list">
-      {filtered.map((item) => (
-        <ListItem key={item.id} item={item} selectorConfig={selectorConfig} onSelect={onSelect} />
+      {filtered?.map((item) => (
+        <ListItem 
+          key={item.id} 
+          item={item} 
+          selectorConfig={selectorConfig} 
+          onSelect={onSelect} 
+          favorite={favorite} 
+        />
       ))}
     </ul>
   )
 }
 
-const SelectorContent = ({ filter, onClose, selectorConfig }: ContentProps<any>) => {
+const SelectorContent = ({ filter, onClose, selectorConfig, favorite }: ContentProps<any>) => {
   const t = useTranslate(dictionary)
   const ref = useRef<HTMLDivElement>(null)
-  const [visibility, setVisibility] = useState<SectionVisibility | undefined>()
+  const [visibility, setVisibility] = useState<SectionVisibility | undefined>('favorite')
   const { resourceName, icon, onSelect, sections } = selectorConfig
   const onSelectItem = useCallback((slug: string) => {
     onSelect(slug)
@@ -127,11 +153,11 @@ const SelectorContent = ({ filter, onClose, selectorConfig }: ContentProps<any>)
     ref,
   }, [])
 
-  function createSectionItem(action?: SectionVisibility) {
+  function createSectionItem(action: SectionVisibility) {
     return (
-      <li key={action ?? 'all'}>
+      <li key={action}>
         <button className={visibility === action ? 'active' : ''} onFocus={() => setVisibility(action)}>
-          {t[action || 'all']}
+          {t[action]}
         </button>
       </li>
     )
@@ -145,17 +171,17 @@ const SelectorContent = ({ filter, onClose, selectorConfig }: ContentProps<any>)
       </header>
       <div className="body">
         <ul className="tabs">
-          {createSectionItem()}
-          {sections.map(createSectionItem)}</ul>
+          {sections.map(createSectionItem)}
+        </ul>
         <FallbackBoundary message={interpolate(t.error, selectorConfig.resourceName)} mini>
-          <List filter={filter} visibility={visibility} selectorConfig={selectorConfig} onSelect={onSelectItem} />
+          <List filter={filter} visibility={visibility} selectorConfig={selectorConfig} onSelect={onSelectItem} favorite={favorite} />
         </FallbackBoundary>
       </div>
     </div>
   )
 }
 
-export const Selector = <T, >({ inputRef, selectorConfig }: SelectorProps<T>) => {
+export const Selector = <T, >({ inputRef, selectorConfig, favorite }: SelectorProps<T>) => {
   const { shortcut, regex, isEnabled } = selectorConfig
   const [isClosed, setClosed] = useState(false)
   const selectorRef = useRef<HTMLDivElement>(null)
@@ -210,6 +236,7 @@ export const Selector = <T, >({ inputRef, selectorConfig }: SelectorProps<T>) =>
     <SelectorBox>
       <Fading visible={shouldRender} ref={selectorRef} className="box-selector">
         <SelectorContent
+          favorite={favorite}
           selectorConfig={selectorConfig}
           filter={filter}
           onClose={() => setClosed(true)}
@@ -232,6 +259,7 @@ const dictionary = {
     noData: 'You don\'t have any $0 yet.',
     noResults: 'There are no $0s to show here.',
     open: 'Open this $0 settings in a new tab.',
+    favorite: 'Favorites',
   },
   pt: {
     all: 'Todos',
@@ -244,5 +272,6 @@ const dictionary = {
     noData: 'Você ainda não possui $0s.',
     noResults: 'Não $0s para mostrar aqui.',
     open: 'Abra as configurações deste $0 em uma nova aba.',
+    favorite: 'Favoritos',
   },
 } satisfies Dictionary

package/src/components/form/DescribedCheckboxGroup.tsx

@@ -9,12 +9,23 @@ import { CheckProps } from './types'
  * Renders a checkbox group where each option has a label and a description.
  * The description in placed under the label and checkbox as an accordion.
  */
-export function DescribedCheckboxGroup<T>(
-  { keygen, onChange, options, renderDescription, renderLabel, optionClassName, optionStyle, value, className, style }: CheckProps<T>,
-) {
+export function DescribedCheckboxGroup<T>({ 
+  keygen, 
+  onChange, 
+  options, 
+  renderDescription, 
+  renderLabel, 
+  renderBeforeElement,
+  renderAfterElement,
+  optionClassName, 
+  optionStyle, 
+  value, 
+  className, 
+  style }: CheckProps<T>) {
   const items = useMemo(() => options.map((option) => {
     const label = renderLabel(option)
     const description = renderDescription(option)
+    
     const header = (
       <label>
         <Checkbox
@@ -27,15 +38,20 @@ export function DescribedCheckboxGroup<T>(
         {typeof label === 'string' ? <Text>{label}</Text> : label}
       </label>
     )
+
     return (
-      <li key={keygen(option)} className={listToClass(['radio-group-item', optionClassName?.(option)])} style={optionStyle?.(option)}>
-        <Accordion header={header}>
-          {typeof description === 'string'
-            ? <Text appearance="microtext1" colorScheme="light.700">{description}</Text>
-            : description as any
-          }
-        </Accordion>
-      </li>
+      <>
+        <li key={keygen(option)} className={listToClass(['radio-group-item', optionClassName?.(option)])} style={optionStyle?.(option)}>
+          {renderBeforeElement?.(option)}
+          <Accordion header={header}>
+            {typeof description === 'string'
+              ? <Text appearance="microtext1" colorScheme="light.700">{description}</Text>
+              : description as any
+            }
+          </Accordion>
+          {renderAfterElement?.(option)}
+        </li>
+      </>
     )
   }), [options, value])
 

package/src/components/form/DescribedRadioGroup.tsx

@@ -10,11 +10,24 @@ import { RadioProps } from './types'
  * The description in placed under the label and radio button as an accordion.
  */
 export function DescribedRadioGroup<T>(
-  { keygen, onChange, options, renderDescription, renderLabel, optionClassName, optionStyle, value, className, style }: RadioProps<T>,
+  { 
+    keygen, 
+    onChange, 
+    options, 
+    renderDescription, 
+    renderLabel, 
+    renderBeforeElement,
+    renderAfterElement,
+    optionClassName, 
+    optionStyle, 
+    value, 
+    className, 
+    style }: RadioProps<T>,
 ) {
   const items = useMemo(() => options.map((option) => {
     const label = renderLabel(option)
     const description = renderDescription(option)
+
     const header = (
       <label>
         <Radio checked={option === value} onChange={() => onChange(option)} />
@@ -23,12 +36,14 @@ export function DescribedRadioGroup<T>(
     )
     return (
       <li key={keygen(option)} className={listToClass(['radio-group-item', optionClassName?.(option)])} style={optionStyle?.(option)}>
+        {renderBeforeElement?.(option)}
         <Accordion header={header}>
           {typeof description === 'string'
             ? <Text appearance="microtext1" colorScheme="light.700">{description}</Text>
             : description as any
           }
         </Accordion>
+        {renderAfterElement?.(option)}
       </li>
     )
   }), [options, value])

package/src/components/form/dictionary.ts

@@ -0,0 +1,18 @@
+export  const dictionaryFavorites = {
+  en: {
+    add: 'Add',
+    remove: 'Remove',
+    become: 'Become',
+    favorite: 'Favorite',
+    couldNotActFavorite: 'Could not $0 favorite',
+    actionFavoriteSuccessfully: '$0 from favorites successfully',
+  },
+  pt: {
+    add: 'Adicionar',
+    remove: 'Remover',
+    become: 'Tornar',
+    favorite: 'Favorito',
+    couldNotActFavorite: 'Não foi possível $0 o favorito',
+    actionFavoriteSuccessfully: '$0 dos favoritos com sucesso',
+  },
+}

package/src/components/form/styled.ts

@@ -11,10 +11,9 @@ export const RadioCheckBox = styled.ul`
 
   > li {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     gap: 8px;
     border-radius: 6px;
-    background-color: ${theme.color.light[400]};
 
     label {
       display: flex;

package/src/components/form/types.ts

@@ -13,6 +13,14 @@ interface RadioCheckProps<T> extends WithStyle {
    * A function that renders an option as a description. This can either return a string or a React Element.
    */
   renderDescription: (option: T) => React.ReactNode,
+  /**
+   * A function that renders a element before the content
+   */
+  renderBeforeElement?: (option: T) => React.ReactNode,
+  /**
+   * A function that renders a element after the content
+   */
+  renderAfterElement?: (option: T) => React.ReactNode,
   /**
    * A function that gives a custom className to the rendered option.
    */
@@ -25,7 +33,9 @@ interface RadioCheckProps<T> extends WithStyle {
    * A function that generates a unique id for the option.
    */
   keygen: (option: T) => React.Key,
-  
+  /**
+   * An object containing favorite items and related operations.
+   */
 }
 
 export interface RadioProps<T> extends RadioCheckProps<T> {

package/src/views/Agents/AgentsPanel.tsx

@@ -14,9 +14,11 @@ export const AgentsPanel = () => {
   const isTrial = checkIsTrial()
 
   const tabs= useMemo(() => isTrial ? [
+    { title: t.favorites, content: <AgentsTab key="favorite" visibility="FAVORITE" /> },
     { title: t.builtin, content: <AgentsTab key="builtin" visibility="BUILT-IN" /> },
     { title: t.personal, content: <AgentsTab key="personal" visibility="PERSONAL" /> },
   ]: [
+    { title: t.favorites, content: <AgentsTab key="favorite" visibility="FAVORITE" /> },
     { title: t.builtin, content: <AgentsTab key="builtin" visibility="BUILT-IN" /> },
     { title: t.personal, content: <AgentsTab key="personal" visibility="PERSONAL" /> },
     { title: t.shared, content: <AgentsTab key="shared" visibility="SHARED" /> },

package/src/views/Agents/AgentsTab.tsx

@@ -5,6 +5,7 @@ import { MiniLogo } from '@stack-spot/portal-components/svg'
 import { agentClient } from '@stack-spot/portal-network'
 import { AgentResponse, VisibilityLevel } from '@stack-spot/portal-network/api/agent'
 import { useMemo, useState } from 'react'
+import { ButtonFavorite } from '../../components/ButtonFavorite'
 import { DescribedRadioGroup } from '../../components/form/DescribedRadioGroup'
 import { IconInput } from '../../components/IconInput'
 import { useCurrentChat } from '../../context/hooks'
@@ -13,21 +14,27 @@ import { isAgentDefault } from '../../utils/agent'
 import { AgentDescription } from './AgentDescription'
 import { useAgentsDictionary } from './dictionary'
 import { AgentLabel } from './styled'
+import { useAgentFavorites } from './useAgentFavorites'
 
 export const AgentsTab = ({ visibility }: { visibility: VisibilityLevel | 'BUILT-IN' }) => {
   const t = useAgentsDictionary()
   const { close } = useRightPanel()
   const chat = useCurrentChat()
   const [filter, setFilter] = useState('')
+  const { listFavorites, onAddFavorite, onRemoveFavorite, pendingAddFav, pendingRemoveFav } = useAgentFavorites()
+
   const agentsBuiltIn = agentClient.publicAgents.useQuery({})
   const agentDefault = agentsBuiltIn.find((agent) => isAgentDefault(agent.slug))
   const agents = visibility === 'BUILT-IN' ? agentsBuiltIn : agentClient.agents.useQuery({ visibility })
+  
   const [value, setValue] = useState<AgentResponse | undefined>(
     chat.get('agent') ? agents.find(a => a.id === chat.get('agent')?.id) : agentDefault,
   )
+
   const filtered = useMemo(
-    () => filter ? agents.filter(a => a === value || a.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : agents,
-    [agents, filter, value],
+    // Recreate the list so that the favorites list is taken into account
+    () => filter ? agents.filter(a => a === value || a.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : [...agents],
+    [agents, filter, value, listFavorites],
   )
 
   function submit() {
@@ -43,6 +50,9 @@ export const AgentsTab = ({ visibility }: { visibility: VisibilityLevel | 'BUILT
         <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={a => a.id}
           value={value}
           onChange={setValue}

package/src/views/Agents/dictionary.ts

@@ -15,6 +15,7 @@ const dictionary = {
     noDataDescription: 'Use the tabs above to try other categories or use the AI portal to create new agents.',
     defaultAgentDescription: 'The StackSpot CodeGen is an advanced artificial intelligence agent designed to optimize and accelerate software development. Integrated directly into your integrated development environment, StackSpot CodeGen offers real-time code suggestions, helping developers write high-quality code more efficiently. With robust features such as creating Stacks AI, customized knowledge sources, and quick commands, StackSpot CodeGen contextualizes your development needs to provide the best answers and code suggestions.',
     description: 'Description',
+    favorites: 'Favorites',
     tools: 'Tools',
   },
   pt: {
@@ -31,6 +32,7 @@ const dictionary = {
     noDataDescription: 'Use as abas acima para tentar outras categorias ou use o Portal AI para criar novos agentes.',
     defaultAgentDescription: 'O StackSpot CodeGen é um agente de inteligência artificial avançado projetado para otimizar e acelerar o desenvolvimento de software. Integrado diretamente ao seu ambiente de desenvolvimento, o StackSpot CodeGen oferece sugestões de código em tempo real, ajudando os desenvolvedores a escreverem código de alta qualidade de forma mais eficiente. Com recursos robustos, como a criação de Stacks AI, Knowledge Sources personalizadas e comandos rápidos, o StackSpot CodeGen contextualiza suas necessidades de desenvolvimento para fornecer as melhores respostas e sugestões de código.',
     description: 'Descrição',
+    favorites: 'Favoritos',
     tools: 'Ferramentas',
   },
 } satisfies Dictionary

package/src/views/Agents/useAgentFavorites.ts

@@ -0,0 +1,32 @@
+/* eslint-disable filenames/match-regex */
+import { agentClient } from '@stack-spot/portal-network'
+
+export function useAgentFavorites() {
+  const listFavorites = agentClient.agents.useQuery({ visibility: 'FAVORITE' })
+  const [addFavorite, pendingAddFav] = agentClient.addFavoriteAgent.useMutation()
+  const [removeFavorite, pendingRemoveFav] = agentClient.removeFavoriteAgent.useMutation()
+
+  const onRemoveFavorite = async (idOrSlug?: string) => {
+    try {
+      await removeFavorite({ agentId: idOrSlug || '' })
+      await agentClient.agents.invalidate()
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }
+
+  const onAddFavorite = async (idOrSlug?: string) => {
+    try {
+      await addFavorite({ agentId: idOrSlug || '' })
+      await agentClient.agents.invalidate()
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }
+
+  return {
+    listFavorites, onAddFavorite, onRemoveFavorite, pendingAddFav, pendingRemoveFav,
+  }
+}

package/src/views/Chat/ChatMessage.tsx

@@ -168,8 +168,8 @@ export const ChatMessage = ({ message, username, isLast }: Props) => {
   const chat = useCurrentChat()
   const agentId = entry.agent?.id ?? ''
   const [agentById] = agentClient.agent.useStatefulQuery({ agentId }, { enabled: !!agentId && !entry?.agent?.builtIn })
-  const [AgentBuiltInById] = agentClient.publicAgent.useStatefulQuery({ agentId }, { enabled: !!agentId && entry?.agent?.builtIn })
-  const agent = agentById ?? AgentBuiltInById
+  const [agentBuiltInById] = agentClient.publicAgent.useStatefulQuery({ agentId }, { enabled: !!agentId && entry?.agent?.builtIn })
+  const agent = agentById ?? agentBuiltInById
 
   useChatScrollToBottomEffect(ref, [entry])
 

package/src/views/ChatHistory/utils.ts

@@ -1,4 +1,4 @@
-import { agentClient, aiClient, workspaceAiClient } from '@stack-spot/portal-network'
+import { agentClient, aiClient, workspaceClient } from '@stack-spot/portal-network'
 import { ChatProperties } from '../../state/ChatState'
 import { LabeledWithImage } from '../../state/types'
 
@@ -27,7 +27,8 @@ export async function findStack(id: string | null): Promise<ChatProperties['stac
 export async function findWorkspace(id: string | null): Promise<ChatProperties['workspace'] | undefined> {
   if (!id) return
   try {
-    const ws = await workspaceAiClient.workspaceAi.query({ id })
+    // const ws = await workspaceAiClient.workspaceAi.query({ id })
+    const ws = await workspaceClient.workspace.query({ workspaceId: id })
     return { id, label: ws.name }
   } catch (error) {
     // eslint-disable-next-line no-console