@stack-spot/ai-chat-widget 1.17.1 → 1.18.0-beta.2

package/src/components/Selector/styled.ts

@@ -2,7 +2,7 @@ import { theme } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
 
 
-export const SelectorBox = styled.div`
+export const SelectorBox = styled.div<{tabsCount: number}>`
   position: absolute;
   bottom: 0;
 
@@ -53,6 +53,8 @@ export const SelectorBox = styled.div`
       display: flex;
       flex-direction: row;
       align-items: center;
+      align-items: flex-start;
+      height: ${({ tabsCount }) => 34 + (tabsCount * 34)}px;
     }
 
     ul {
@@ -105,7 +107,6 @@ export const SelectorBox = styled.div`
       gap: 2px;
       overflow-y: auto;
       flex: 1;
-      max-height: 170px;
 
       li {
         display: flex;

package/src/components/WorkspaceTabNavigator.tsx

@@ -0,0 +1,172 @@
+import { Flex, IconBox, Image, Text } from '@citric/core'
+import { ArrowRight, Circle, Search, Times } from '@citric/icons'
+import { Avatar, IconButton } from '@citric/ui'
+import { Placeholder } from '@stack-spot/portal-components/Placeholder'
+import { workspaceAiClient } from '@stack-spot/portal-network'
+import { WorkspaceResponse, WorkspaceVisibilityLevelEnum } from '@stack-spot/portal-network/api/workspace-ai'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { memo, useMemo, useState } from 'react'
+import { useRightPanel } from '../right-panel/hooks'
+import { ButtonFavorite } from './ButtonFavorite'
+import { ComponentNavigator, ComponentNavigatorProps, NavigationItem, NavigationMap, useComponentNavigation } from './ComponentNavigator'
+import { IconInput } from './IconInput'
+import { ListGroup } from './ListGroup'
+
+interface CardSpaceProps {
+  onClick: VoidFunction,
+  name: string,
+  icon: React.ReactElement,
+  logoUrl?: string | null,
+}
+
+export const CardSpace = ({ onClick, name, icon, logoUrl }: CardSpaceProps) =>
+  <Flex
+    onClick={onClick}
+    flex={1}
+    alignItems="center"
+    justifyContent="space-between"
+    mr={2}
+    bg="light.400"
+    r="sm"
+    p={3}
+    sx={{ cursor: 'pointer' }}
+  >
+    <Flex alignContent="center" alignItems="center" sx={{ gap: '8px', m: 1 }} >
+      <Avatar size="xxs" appearance="square" sx={{ bg: 'light.600', r: 'xxs' }}>
+        {logoUrl ? <Image src={logoUrl} /> : <IconBox> {icon} </IconBox>}
+      </Avatar>
+      <Text appearance="body2">{name}</Text>
+    </Flex>
+    <IconButton><ArrowRight /></IconButton>
+  </Flex>
+
+interface WorkspaceSourcesTabProps {
+  visibility: WorkspaceVisibilityLevelEnum,
+  onClick: (workspace: WorkspaceResponse) => void,
+}
+
+const WorkspaceSourcesTab = ({ visibility, onClick }: WorkspaceSourcesTabProps) => {
+  const t = useTranslate(dictionary)
+  const [filter, setFilter] = useState('')
+  const workspaces = workspaceAiClient.workspacesAi.useQuery({ visibility })
+  const listFavorites = workspaceAiClient.workspacesAi.useQuery({ visibility: 'favorite' })
+  const [addFavorite, pendingAddFav] = workspaceAiClient.addFavoriteWorkspaceAi.useMutation()
+  const [removeFavorite, pendingRemoveFav] = workspaceAiClient.removeFavoriteWorkspaceAi.useMutation()
+
+  // eslint-disable-next-line no-async-promise-executor
+  const onAddFavorite = async (idOrSlug: string) => new Promise<boolean>(async (resolve, reject) => {
+    try {
+      await addFavorite({ workspaceId: idOrSlug })
+      await workspaceAiClient.workspacesAi.invalidate()
+      if (!pendingAddFav) {
+        resolve(true)
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+      reject(error)
+    }
+  })
+
+  // eslint-disable-next-line no-async-promise-executor
+  const onRemoveFavorite = (idOrSlug: string) => new Promise<boolean>(async (resolve, reject) => {
+    try {
+      await removeFavorite({ workspaceId: idOrSlug })
+      await workspaceAiClient.workspacesAi.invalidate()
+      if (!pendingRemoveFav) {
+        resolve(true)
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+      reject(error)
+    }
+  })
+
+  const filtered = useMemo(
+    // Recreate the list so that the favorites list is taken into account
+    () => filter ? workspaces.filter(w => w.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : [...workspaces],
+    [workspaces, filter, listFavorites],
+  )
+
+  return (
+    <Flex w={12} sx={{ gap: '16px' }} flexDirection="column">
+      <IconInput icon={<Search />} value={filter} onChange={setFilter} className="search" />
+      {!!filtered.length &&
+        <ListGroup
+          list={filtered}
+          keygen={w => w.id}
+          onClick={onClick}
+          style={{ gap: '6px', display: 'flex', flexDirection: 'column' }}
+          renderLabel={w => <CardSpace name={w.name} logoUrl={w.logo} icon={<Circle />} onClick={() => onClick(w)} />}
+          renderDescription={w => w.description}
+          renderAfterElement={(w) =>
+            <ButtonFavorite favorite={{ idOrSlug: w?.id, listFavorites, onAddFavorite, onRemoveFavorite }} />}
+          optionClassName={w => (filter && !w.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
+            ? 'filtered-out'
+            : ''
+          }
+          className="option-list"
+        />
+      }
+      {!!workspaces.length && !filtered.length &&
+        <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder" />}
+      {!workspaces.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
+    </Flex>
+  )
+}
+
+
+const WorkspaceHeader = <T extends NavigationMap, K extends keyof T>({ data }: { data: NavigationItem<T, K> }) => {
+  const { close: closeRightPanel } = useRightPanel()
+  const workspaceId = (data.props as any)['workspaceId']
+  if (!workspaceId) return
+
+  const workspace = workspaceAiClient.workspaceAi.useQuery({ id: workspaceId })
+  return <Flex justifyContent="space-between" alignItems="center" flex={1}>
+    {data.component === 'workspaceResource' ? 'Spaces' : workspace.name}
+    {data.fullScreen && <IconButton title={'t.close'} aria-label={'t.close'} onClick={closeRightPanel}>  <Times /> </IconButton>}
+  </Flex>
+}
+
+interface WorkspaceTabNavigatorProps {
+  getNavigateParam: (workspace: WorkspaceResponse) => NavigationItem<NavigationMap, string>,
+  visibility?: WorkspaceVisibilityLevelEnum,
+  className?: string,
+}
+export function WorkspaceTabNavigator<T extends NavigationMap, K extends keyof T>({ components, getNavigateParam, visibility, className }:
+  Omit<ComponentNavigatorProps<T, K>, 'initialItem'> & WorkspaceTabNavigatorProps) {
+
+  const workspaceTabComponents = useMemo(() => ({
+    workspace: memo(function WorkspacesTab() {
+      const { navigate } = useComponentNavigation()
+      return (<WorkspaceSourcesTab visibility={visibility ?? 'all'} onClick={(w) => navigate(getNavigateParam(w))} />)
+    }),
+    ...components,
+  }), [components])
+
+  return <ComponentNavigator
+    initialItem={{ component: 'workspace' }}
+    components={workspaceTabComponents}
+    className={className}
+    renderTitle={(data) => <WorkspaceHeader data={data} />}
+  />
+}
+
+const dictionary = {
+  en: {
+    noSearchResults: "Your search didn't yield results.",
+    noSearchResultsDescription: 'Please, try another search term.',
+    noData: 'There are no spaces yet.',
+    noDataDescription: 'Use the AI portal to create new spaces.',
+    apply: 'Apply',
+  },
+  pt: {
+    noSearchResults: 'Sua busca não produziu resultados',
+    noSearchResultsDescription: 'Por favor, tente outra busca.',
+    noData: 'Ainda não há spaces.',
+    noDataDescription: 'Use o Portal AI para criar novos spaces.',
+    apply: 'Apply',
+  },
+} satisfies Dictionary
+

package/src/components/form/DescribedCheckboxGroup.tsx

@@ -1,5 +1,6 @@
-import { Checkbox, Text } from '@citric/core'
+import { Checkbox, Flex, Text } from '@citric/core'
 import { listToClass } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useMemo } from 'react'
 import { Accordion } from '../Accordion'
 import { RadioCheckBox } from './styled'
@@ -9,30 +10,40 @@ 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, 
+export function DescribedCheckboxGroup<T>({
+  keygen,
+  onChange,
+  options,
+  renderDescription,
+  renderLabel,
   renderBeforeElement,
   renderAfterElement,
-  optionClassName, 
-  optionStyle, 
-  value, 
-  className, 
+  optionClassName,
+  optionStyle,
+  value,
+  className,
   style }: CheckProps<T>) {
+  const t = useTranslate(dictionary)
+  const allSelected = options.length > 0 && options.every(option => value.includes(option))
+
+  const handleSelectAll = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.checked) {
+      onChange(options)
+    } else {
+      onChange([])
+    }
+  }
+
   const items = useMemo(() => options.map((option) => {
     const label = renderLabel(option)
     const description = renderDescription(option)
-    
     const header = (
       <label>
         <Checkbox
           checked={value.includes(option)}
           onChange={(e) => {
             if (e.target.checked && !value.includes(option)) onChange([...value, option])
-            else onChange(value.filter(item => item !== option)) 
+            else onChange(value.filter(item => item !== option))
           }}
         />
         {typeof label === 'string' ? <Text>{label}</Text> : label}
@@ -55,5 +66,25 @@ export function DescribedCheckboxGroup<T>({
     )
   }), [options, value])
 
-  return <RadioCheckBox style={style} className={className}>{items}</RadioCheckBox>
+  return <RadioCheckBox style={style} className={className}>
+    <Flex as="li" alignItems="center" sx={{ pl: 4 }}>
+      <Checkbox
+        checked={allSelected}
+        onChange={handleSelectAll}
+      />
+      <Text>{allSelected ? t.removeAll : t.selectAll}</Text>
+    </Flex>
+    {items}
+  </RadioCheckBox>
 }
+
+const dictionary = {
+  en: {
+    selectAll: 'Select all',
+    removeAll: 'Remove all',
+  },
+  pt: {
+    selectAll: 'Selecionar todos',
+    removeAll: 'Remover todos',
+  },
+} satisfies Dictionary

package/src/views/Agents/AgentsPanel.tsx

@@ -1,8 +1,9 @@
-import { useMemo } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import { RightPanelTabs } from '../../components/RightPanelTabs'
 import { useCurrentChat } from '../../context/hooks'
+import { isAgentDefault } from '../../utils/agent'
 import { checkIsTrial } from '../../utils/check-is-trial'
-import { AgentsTab } from './AgentsTab'
+import { AgentsTab, AgentsTabWorkspace } from './AgentsTab'
 import { useAgentsDictionary } from './dictionary'
 
 /**
@@ -12,18 +13,27 @@ export const AgentsPanel = () => {
   const t = useAgentsDictionary()
   const chat = useCurrentChat()
   const isTrial = checkIsTrial()
+  const agent = useRef(chat.get('agent'))
+
+  useEffect(() => {
+    if (!isAgentDefault(chat.get('agent')?.slug)) {
+      agent.current = chat.get('agent')
+    }
+  }, [chat])
 
   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" agent={agent} /> },
+    { title: t.builtin, content: <AgentsTab key="builtin" visibility="BUILT-IN" agent={agent} /> },
+    { title: t.personal, content: <AgentsTab key="personal" visibility="PERSONAL" agent={agent} /> },
   ]: [
-    { 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" /> },
-    { title: t.account, content: <AgentsTab key="account" visibility="ACCOUNT" /> },
-  ], [t, isTrial])
+    { title: t.favorites, content: <AgentsTab key="favorite" visibility="FAVORITE" agent={agent} /> },
+    { title: t.builtin, content: <AgentsTab key="builtin" visibility="BUILT-IN" agent={agent} /> },
+    { title: t.personal, content: <AgentsTab key="personal" visibility="PERSONAL" agent={agent} /> },
+    { title: t.shared, content: <AgentsTab key="shared" visibility="SHARED" agent={agent} /> },
+    { title: t.spaces, content: <AgentsTabWorkspace key="workspace"  visibility="WORKSPACE" agent={agent} /> },
+    { title: t.account, content: <AgentsTab key="account" visibility="ACCOUNT" agent={agent} /> },
+ 
+  ], [t, isTrial, agent])
   
   return <RightPanelTabs key={chat.id} tabs={tabs} />
 }

package/src/views/Agents/AgentsTab.tsx

@@ -2,21 +2,32 @@ import { Button, IconBox, Text } from '@citric/core'
 import { Agent, Search } from '@citric/icons'
 import { Placeholder } from '@stack-spot/portal-components/Placeholder'
 import { MiniLogo } from '@stack-spot/portal-components/svg'
-import { agentClient } from '@stack-spot/portal-network'
+import { agentClient, workspaceAiClient } from '@stack-spot/portal-network'
 import { AgentResponse, VisibilityLevel } from '@stack-spot/portal-network/api/agent'
-import { useMemo, useState } from 'react'
+import { WorkspaceResponse } from '@stack-spot/portal-network/api/workspace-ai'
+import { useCallback, useMemo, useState } from 'react'
 import { ButtonFavorite } from '../../components/ButtonFavorite'
+import { NavigationItem } from '../../components/ComponentNavigator'
 import { DescribedRadioGroup } from '../../components/form/DescribedRadioGroup'
 import { IconInput } from '../../components/IconInput'
+import { WorkspaceTabNavigator } from '../../components/WorkspaceTabNavigator'
 import { useCurrentChat } from '../../context/hooks'
 import { useRightPanel } from '../../right-panel/hooks'
+import { ChatProperties } from '../../state/ChatState'
 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' }) => {
+export interface AgentTabProps {
+  visibility: VisibilityLevel | 'BUILT-IN',
+  workspaceId?: string,
+  agent: React.MutableRefObject<ChatProperties['agent']>,
+  showSubmitButton?: boolean,
+}
+
+export const AgentsTab = ({ visibility, workspaceId, agent, showSubmitButton = true }: AgentTabProps) => {
   const t = useAgentsDictionary()
   const { close } = useRightPanel()
   const chat = useCurrentChat()
@@ -26,10 +37,14 @@ export const AgentsTab = ({ visibility }: { visibility: VisibilityLevel | 'BUILT
 
   const agentsBuiltIn = agentClient.publicAgents.useQuery({})
   const agentDefault = agentsBuiltIn.find((agent) => isAgentDefault(agent.slug))
-  const agents = visibility === 'BUILT-IN' ? agentsBuiltIn : agentClient.agents.useQuery({ visibility })
-  
+  const agents = workspaceId
+    ? workspaceAiClient.getAgentFromWorkspaceAi.useQuery({ workspaceId })
+    : 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,
+    agent.current
+      ? agents.find(a => a.id === agent.current?.id)
+      : chat.get('agent') ? agents.find(a => a.id === chat.get('agent')?.id) : agentDefault,
   )
 
   const filtered = useMemo(
@@ -53,6 +68,13 @@ export const AgentsTab = ({ visibility }: { visibility: VisibilityLevel | 'BUILT
     close()
   }
 
+  const onChange = useCallback((newValue: AgentResponse) => {
+    const isBuiltIn = visibility === 'BUILT-IN' || agentsBuiltIn.some((agent) => agent.id === newValue.id)
+
+    setValue(newValue)
+    agent.current = { ...newValue, builtIn: isBuiltIn, label: newValue.name }
+  }, [])
+
   return (
     <>
       <div className="content">
@@ -65,7 +87,7 @@ export const AgentsTab = ({ visibility }: { visibility: VisibilityLevel | 'BUILT
           )}
           keygen={a => a.id}
           value={value}
-          onChange={setValue}
+          onChange={onChange}
           renderLabel={({ name, avatar, id }) => (
             <AgentLabel>
               {id ? (avatar ? <img src={avatar} /> : <IconBox size="xs"><Agent /></IconBox>) : <MiniLogo />}
@@ -74,7 +96,7 @@ export const AgentsTab = ({ visibility }: { visibility: VisibilityLevel | 'BUILT
           )}
           renderDescription={a => <AgentDescription
             agentId={a.id}
-            visibility={visibility}            
+            visibility={visibility}
             description={a.description}
             llm={a.llm_config?.model_slug}
             numberOfKnowledgeSources={a.knowledge_sources_config?.knowledge_sources?.length ?? 0}
@@ -89,7 +111,18 @@ export const AgentsTab = ({ visibility }: { visibility: VisibilityLevel | 'BUILT
           <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder" />}
         {!agents.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
       </div>
-      {!!filtered.length && <Button onClick={submit} disabled={!value}>{t.apply}</Button>}
+      {!!filtered.length && showSubmitButton && <Button onClick={submit} disabled={!value}>{t.apply}</Button>}
     </>
   )
 }
+
+export function AgentsTabWorkspace({ agent, visibility, showSubmitButton }: AgentTabProps) {
+  const workspaceTabComponents = useMemo(() => ({ agent: AgentsTab }), [agent])
+
+  const buildNavigateParams = (workspace: WorkspaceResponse): NavigationItem<typeof workspaceTabComponents> => ({
+    component: 'agent',
+    props: { visibility, workspaceId: workspace.id, agent, showSubmitButton },
+  })
+
+  return <WorkspaceTabNavigator components={workspaceTabComponents} getNavigateParam={buildNavigateParams} />
+}

package/src/views/Agents/dictionary.ts

@@ -17,6 +17,7 @@ const dictionary = {
     description: 'Description',
     favorites: 'Favorites',
     tools: 'Tools',
+    spaces: 'Spaces',
   },
   pt: {
     title: 'Agentes',
@@ -34,6 +35,8 @@ const dictionary = {
     description: 'Descrição',
     favorites: 'Favoritos',
     tools: 'Ferramentas',
+    spaces: 'Spaces',
+
   },
 } satisfies Dictionary
 

package/src/views/ChatHistory/utils.ts

@@ -1,4 +1,4 @@
-import { agentClient, aiClient, workspaceClient } from '@stack-spot/portal-network'
+import { agentClient, aiClient, workspaceAiClient, workspaceClient } from '@stack-spot/portal-network'
 import { ChatProperties } from '../../state/ChatState'
 import { LabeledWithImage } from '../../state/types'
 
@@ -44,9 +44,15 @@ export async function findWorkspace(id: string | null): Promise<ChatProperties['
  */
 export async function getAllAgents(): Promise<LabeledWithImage[]> {
   try {
-    const [agents, publicAgents] = await Promise.all([agentClient.agents.query({}), agentClient.publicAgents.query({})])
+    const [agents, publicAgents, workspaceAgents] = await Promise.all([
+      agentClient.agents.query({}),
+      agentClient.publicAgents.query({}),
+      workspaceAiClient.workspacesContentsByType.query({ contentType: 'agent' }),
+    ])
+   
     const builtInAgents = publicAgents.map((a) => ({ id: a.id, label: a.name, image: a.avatar, slug: a.slug, builtIn: true }))
-    return agents.map(a => ({ id: a.id, label: a.name, image: a.avatar, slug: a.slug, builtIn: false })).concat(builtInAgents)
+    return [...agents, ... workspaceAgents.agents].map(a => ({ id: a.id, label: a.name, image: a.avatar, slug: a.slug, builtIn: false }))
+      .concat(builtInAgents)
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error(error)

package/src/views/KnowledgeSources.tsx

@@ -1,24 +1,29 @@
 import { Button } from '@citric/core'
 import { Search } from '@citric/icons'
 import { Placeholder } from '@stack-spot/portal-components/Placeholder'
-import { aiClient, dataIntegrationClient } from '@stack-spot/portal-network'
+import { aiClient, dataIntegrationClient, workspaceAiClient } from '@stack-spot/portal-network'
 import { KnowledgeSourceItemResponse, 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 { difference, uniqBy } from 'lodash'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { ButtonFavorite } from '../components/ButtonFavorite'
+import { NavigationItem } from '../components/ComponentNavigator'
 import { DescribedCheckboxGroup } from '../components/form/DescribedCheckboxGroup'
 import { IconInput } from '../components/IconInput'
 import { RightPanelTabs } from '../components/RightPanelTabs'
+import { WorkspaceTabNavigator } from '../components/WorkspaceTabNavigator'
 import { useCurrentChat, useWidget, useWidgetState } from '../context/hooks'
 import { useRightPanel } from '../right-panel/hooks'
 import { ChatProperties } from '../state/ChatState'
 import { checkIsTrial } from '../utils/check-is-trial'
 
-interface TabProps {
+export interface TabProps {
   visibility: VisibilityLevelEnum,
-  onSubmit: () => void,
   allKS: React.MutableRefObject<ChatProperties['knowledgeSources']>,
+  workspaceId?: string,
+  showSubmitButton?: boolean,
+  onSubmit?: () => void,
 }
 
 export const KnowledgeSources = () => {
@@ -55,7 +60,7 @@ 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} /> },
@@ -63,19 +68,23 @@ const KnowledgeSourcesPanel = () => {
     { 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} /> },
+    { title: t.spaces, content: <KnowledgeSourcesTabWorkspace key="workspace" visibility="workspace" allKS={allKS} onSubmit={onSubmit} /> },
+    { title: t.account, content: <KnowledgeSourcesTab key="account" visibility="account" allKS={allKS} onSubmit={onSubmit} /> },    
   ]
-  
+
   return <RightPanelTabs key={chat.id} tabs={tabs} />
 }
 
-const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit }: TabProps) => {
+export const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit, workspaceId, showSubmitButton = true }: 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 knowledgeSources = workspaceId
+    ? workspaceAiClient.getKSFromWorkspaceAi.useQuery({ workspaceId })
+    : 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()
@@ -131,7 +140,7 @@ const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit }: TabProps) => {
       reject(error)
     } 
   })
-  
+
   const [value, setValue] = useState<KnowledgeSourceItemResponse[]>((() => {
     const currentlySelected = allKS.current?.map(ks => ks.id)
     return knowledgeSources.filter(ks => currentlySelected?.includes(ks.slug))
@@ -139,7 +148,7 @@ const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit }: TabProps) => {
   const filtered = useMemo(
     () => 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.filter(ks => value.includes(ks) || ks.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
       : [...knowledgeSources]
     , [knowledgeSources, filter, value, listFavorites],
   )
@@ -181,11 +190,23 @@ const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit }: TabProps) => {
         )}
         {!filtered.length && <Placeholder title={t.noData} description={t.noDataDescription} className="no-data-placeholder" />}
       </div>
-      {!!filtered.length && <Button onClick={onSubmit}>{t.apply}</Button>}
+      {!!filtered.length && showSubmitButton && <Button onClick={onSubmit}>{t.apply}</Button>}
     </>
   )
 }
 
+export function KnowledgeSourcesTabWorkspace({ allKS, onSubmit }: TabProps) {
+  const workspaceTabComponents = useMemo(() => ({ ks: KnowledgeSourcesTab }), [allKS, onSubmit])
+
+  const buildNavigateParams = (workspace: WorkspaceResponse): NavigationItem<typeof workspaceTabComponents> => ({
+    component: 'ks',
+    props: { visibility: 'workspace', workspaceId: workspace.id, allKS, onSubmit },
+  })
+  
+  return <WorkspaceTabNavigator components={workspaceTabComponents} getNavigateParam={buildNavigateParams} />
+}
+
+
 const dictionary = {
   en: {
     title: 'Knowledge Sources',
@@ -199,6 +220,7 @@ const dictionary = {
     noSearchResultsDescription: 'Please, try another search term.',
     noData: 'There are no knowledge sources in this category yet.',
     noDataDescription: 'Use the tabs above to try other categories or use the AI portal to create new knowledge sources.',
+    spaces: 'Spaces',
   },
   pt: {
     title: 'Knowledge Sources',
@@ -212,5 +234,6 @@ const dictionary = {
     noSearchResultsDescription: 'Por favor, tente outra busca.',
     noData: 'Ainda não há knowledge sources nesta categoria.',
     noDataDescription: 'Use as abas acima para tentar outras categorias ou use o Portal AI para criar novos knowledge sources.',
+    spaces: 'Spaces',
   },
 } satisfies Dictionary

package/src/views/MessageInput/AgentSelector.tsx

@@ -1,6 +1,6 @@
 import { Flex, IconBox, Image } from '@citric/core'
 import { Agent } from '@citric/icons'
-import { agentClient } from '@stack-spot/portal-network'
+import { agentClient, workspaceAiClient } from '@stack-spot/portal-network'
 import { AgentResponse } from '@stack-spot/portal-network/api/agent'
 import { uniqBy } from 'lodash'
 import { useCallback } from 'react'
@@ -46,6 +46,7 @@ export const AgentSelector = ({ inputRef, isTrial }: { isTrial: boolean,
     const personalAgents = agentClient.agents.useQuery({ visibility: 'PERSONAL' })
     const publicAgents = agentClient.publicAgents.useQuery({})
     const builtInsAgents = [...publicAgents.map((agent) => ({ ...agent, visibility_level: 'builtIn' }))]
+    const workspaceAgents = workspaceAiClient.workspacesContentsByType.useQuery({ contentType: 'agent' })
     let accountAgents: AgentResponse[] = []
     let sharedAgents: AgentResponse[] = []
     if (!isTrial) {
@@ -53,7 +54,7 @@ export const AgentSelector = ({ inputRef, isTrial }: { isTrial: boolean,
       sharedAgents = agentClient.agents.useQuery({ visibility: 'SHARED' }) || []
     }
 
-    return uniqBy([...personalAgents, ...accountAgents, ...sharedAgents, ...builtInsAgents], 'id')
+    return uniqBy([...personalAgents, ...workspaceAgents.agents, ...accountAgents, ...sharedAgents, ...builtInsAgents], 'id')
   }
 
   return <Selector
@@ -66,7 +67,7 @@ export const AgentSelector = ({ inputRef, isTrial }: { isTrial: boolean,
       regex: agentRegex,
       urlBuilder: (agent) => `/agents/${agent?.id}`,
       searchProp: 'name',
-      sections:  isTrial ? ['favorite', 'personal', 'builtIn'] : ['favorite', 'personal', 'account', 'shared', 'builtIn'],
+      sections:  isTrial ? ['favorite', 'personal', 'builtIn'] : ['favorite', 'personal', 'workspace', 'account', 'shared', 'builtIn'],
       renderComponentItem: AgentItem,
       isEnabled: isAgentEnabled,
       onSelect: onSelectItem,

package/src/views/MessageInput/ButtonGroup.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight, Code, KnowledgeSource, Send, Stack, Times, Workspace } from '@citric/icons'
+import { ChevronRight, Circle, Code, KnowledgeSource, Send, Stack, Times } from '@citric/icons'
 import { IconButton } from '@citric/ui'
 import { listToClass } from '@stack-spot/portal-theme'
 import { useEffect, useRef } from 'react'
@@ -62,8 +62,8 @@ export const ButtonGroup = ({ onSend, onCancel, expanded, setExpanded, isLoading
           style={{ width: expanded ? featureButtonsWidth.current : 0 }}
         >
           {features.workspace && (
-            <IconButton aria-label={t.workspace} title={t.workspace} onClick={() => widget.set('panel', 'workspace')}>
-              <Workspace />
+            <IconButton aria-label={t.space} title={t.space} onClick={() => widget.set('panel', 'workspace')}>
+              <Circle />
             </IconButton>
           )}
           {features.knowledgeSource && (