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

package/dist/views/Workspaces/index.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslate } from '@stack-spot/portal-translate';
+import { useCallback, useEffect, useRef } from 'react';
+import { RightPanelTabs } from '../../components/RightPanelTabs.js';
+import { useCurrentChat, useWidget, useWidgetState } from '../../context/hooks.js';
+import { useRightPanel } from '../../right-panel/hooks.js';
+import { WorkspacesTab } from './WorkspacesTab.js';
+/**
+ * Renders the Workspace selection form in the Right Panel if this is the panel that is currently opened.
+ */
+export const Workspaces = () => {
+    const t = useTranslate(dictionary);
+    const panel = useWidgetState('panel');
+    const { open } = useRightPanel();
+    const widget = useWidget();
+    const chat = useCurrentChat();
+    useEffect(() => {
+        if (panel === 'workspace')
+            open(_jsx(WorkspacesPanel, {}, 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();
+    const allKS = useRef(chat.get('knowledgeSources') ?? []);
+    const agent = useRef(chat.get('agent'));
+    const stack = useRef(chat.get('stack'));
+    const { close } = useRightPanel();
+    const onSubmit = useCallback(() => {
+        chat.set('knowledgeSources', allKS.current);
+        chat.set('stack', stack.current);
+        chat.set('agent', agent.current);
+        close();
+    }, [chat]);
+    useEffect(() => {
+        allKS.current = chat.get('knowledgeSources') ?? [];
+        agent.current = chat.get('agent');
+        stack.current = chat.get('stack');
+    }, [chat]);
+    return _jsx(RightPanelTabs, { tabs: [
+            {
+                title: t.favorites,
+                content: _jsx(WorkspacesTab, { visibility: "favorite", allKS: allKS, agent: agent, stack: stack, onSubmit: onSubmit }, "favorite"),
+            },
+            {
+                title: t.all,
+                content: _jsx(WorkspacesTab, { visibility: "all", allKS: allKS, agent: agent, stack: stack, onSubmit: onSubmit }, "all"),
+            },
+        ] }, chat.id);
+};
+const dictionary = {
+    en: {
+        title: 'Spot',
+        description: 'By selecting a spot, its Knowledge Sources (KSs), Agents, Quick Commands and Stacks Ai will be consulted to generate the answers.',
+        noSearchResults: "Your search didn't yield results.",
+        all: 'All',
+        favorites: 'Favorites',
+    },
+    pt: {
+        title: 'Spot',
+        description: 'Ao selecionar um spot, seus Knowledge Sources (KSs), Agentes, Quick Commands e Stacks Ai serão consultados para gerar as respostas.',
+        all: 'Todos',
+        favorites: 'Favoritos',
+    },
+};
+//# sourceMappingURL=index.js.map

package/dist/views/Workspaces/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/views/Workspaces/index.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.17.1",
+  "version": "1.18.0-beta.10",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,8 +12,8 @@
   "peerDependencies": {
     "@citric/core": "^6.4.0",
     "@stack-spot/portal-components": "^2.22.1",
-    "@citric/icons": "^5.9.0",
-    "@stack-spot/portal-network": "^0.115.0",
+    "@citric/icons": "^5.11.0",
+    "@stack-spot/portal-network": "^0.119.1",
     "@citric/ui": "^6.7.0",
     "@stack-spot/portal-theme": "^1.0.0",
     "@stack-spot/portal-translate": "^1.1.0",

package/src/app-metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.17.1",
-  "date": "Mon Apr 28 2025 22:15:02 GMT+0000 (Coordinated Universal Time)",
+  "version": "1.18.0-beta.10",
+  "date": "Fri May 02 2025 11:09:02 GMT-0300 (Brasilia Standard Time)",
   "dependencies": [
     {
       "name": "@stack-spot/app-metadata",
@@ -93,11 +93,11 @@
     },
     {
       "name": "@citric/icons",
-      "version": "5.9.0(react@18.2.0)"
+      "version": "5.11.0(react@18.2.0)"
     },
     {
       "name": "@citric/ui",
-      "version": "6.7.0(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.9.0(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0))"
+      "version": "6.7.0(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.11.0(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0))"
     },
     {
       "name": "@dagrejs/dagre",
@@ -109,11 +109,11 @@
     },
     {
       "name": "@stack-spot/portal-components",
-      "version": "2.22.1(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.9.0(react@18.2.0))(@citric/ui@6.7.0(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.9.0(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-theme@1.1.0(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@types/react@18.3.11)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "version": "2.22.1(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.11.0(react@18.2.0))(@citric/ui@6.7.0(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.11.0(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-theme@1.1.0(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@types/react@18.3.11)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
     {
       "name": "@stack-spot/portal-network",
-      "version": "0.115.0(@stack-spot/auth@5.3.2)(@stack-spot/opa@2.5.0(@stack-spot/auth@5.3.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@tanstack/react-query@5.59.16(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "version": "0.119.1(@stack-spot/auth@5.3.2)(@stack-spot/opa@2.5.0(@stack-spot/auth@5.3.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@tanstack/react-query@5.59.16(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
     {
       "name": "@stack-spot/portal-theme",

package/src/components/ComponentNavigator.tsx

@@ -0,0 +1,103 @@
+import { Flex } from '@citric/core'
+import { ArrowLeft } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { createContext, useCallback, useContext, useMemo, useState } from 'react'
+
+/**
+ * Map of string keys to React components.
+ */
+export type NavigationMap = Record<string, React.ComponentType<any>>
+
+/**
+ * Navigation component describing which component to render and its props.
+ */
+export type NavigationComponent<T extends NavigationMap, K extends keyof T = keyof T> = {
+  /** Component key to render. */
+  component: K,
+
+  /** Props for the component. */
+  props?: T[K] extends React.ComponentType<infer P> ? P : never,
+
+  /** Render in fullscreen mode. */
+  fullScreen?: boolean,
+}
+
+export interface NavigationContextType<T extends NavigationMap> {
+  /** Navigate to a new component. */
+  navigate: <K extends keyof T>(item: NavigationComponent<T, K>) => Promise<void>,
+
+  /** Go back to previous component. */
+  goBack: () => void,
+
+  /** True if can go back. */
+  canGoBack: boolean,
+
+  /** Current component. */
+  currentItem: NavigationComponent<T>,
+}
+
+export interface ComponentNavigatorProps<T extends NavigationMap, K extends keyof T> {
+  /** Initial component to render. */
+  initialItem: NavigationComponent<T, K>,
+  
+   /** Map of available components. */
+  components: T,
+
+  /** Optional title renderer. */
+  renderTitle?: (item: NavigationComponent<T, keyof T>) => React.ReactNode,
+  
+   /** Optional CSS class. */
+  className?: string,
+}
+
+const NavigationContext = createContext<NavigationContextType<NavigationMap> | null>(null)
+
+export function ComponentNavigator<T extends NavigationMap, K extends keyof T>({
+  initialItem,
+  components,
+  renderTitle,
+  className,
+}: ComponentNavigatorProps<T, K>) {
+  const [navigationStack, setNavigationStack] = useState<NavigationComponent<T>[]>([initialItem])
+  const currentItem = navigationStack[navigationStack.length - 1]
+
+  const navigate = useCallback((item: NavigationComponent<T>) => { setNavigationStack((prev) => [...prev, item]) }, [])
+  const canGoBack = navigationStack.length > 1
+  const goBack = useCallback(() => {
+    if (canGoBack) {
+      setNavigationStack((prev) => prev.slice(0, -1))
+    }
+  }, [canGoBack])
+
+  const navigationContext = useMemo(() => ({ navigate, goBack, canGoBack, currentItem }), [navigate, goBack, canGoBack, currentItem])
+  const Component = components[currentItem.component]
+  const isFullScreen = currentItem.fullScreen
+
+  if (!Component) {
+    // eslint-disable-next-line no-console
+    console.error(`Componente not found: ${String(currentItem.component)}`)
+  }
+
+  return (<NavigationContext.Provider value={navigationContext as NavigationContextType<NavigationMap>}>
+    <div className={`content-navigator ${className || isFullScreen ? 'full' : ''}`} role="navigation">
+      {canGoBack && (
+        <Flex alignItems="center" w={12} sx={{ gap: '4px' }}>
+          <IconButton onClick={goBack} appearance="square" className="back-button" aria-label="Back">
+            <ArrowLeft />
+          </IconButton>
+          {renderTitle?.(currentItem)}
+        </Flex>
+      )}
+      <Component {...(currentItem.props as any)} />
+    </div>
+  </NavigationContext.Provider>
+  )
+}
+
+export function useComponentNavigation<T extends NavigationMap>(): NavigationContextType<T> {
+  const context = useContext(NavigationContext)
+  if (!context) {
+    throw new Error('useComponentNavigation should be used inside ComponentNavigator')
+  }
+  return context
+}

package/src/components/ListResource.tsx

@@ -0,0 +1,60 @@
+import { Box, Flex, Text } from '@citric/core'
+import { WithStyle } from '@stack-spot/portal-theme'
+import { useMemo } from 'react'
+
+/**
+ *
+ * @template T Type of list item.
+ */
+interface ListGroupProps<T> extends WithStyle {
+
+  /** Items to show. */
+  list: T[],
+  
+  /** Render the label for an item. */
+  renderLabel: (item: T) => React.ReactNode,
+
+  /** Optional: element before label. */
+  renderBeforeElement?: (item: T) => React.ReactNode,
+
+  /** Optional: element after label. */
+  renderAfterElement?: (item: T) => React.ReactNode,
+
+  /** Optional: custom class name per item. */
+  optionClassName?: (item: T) => string | undefined,
+
+  /** Optional: custom style per item. */
+  optionStyle?: (item: T) => React.CSSProperties | undefined,
+
+  /** Unique key for each item. */
+  keygen: (item: T) => React.Key,
+}
+
+/**
+ * Renders a customizable list of items.
+ *
+ * @template T Type of list item.
+ */
+export function ListResource<T>({ list, renderLabel, renderBeforeElement, renderAfterElement, className, keygen, style }
+  : ListGroupProps<T>) {
+  const items = useMemo(() =>
+    list.map((listItem) => {
+      const label = renderLabel(listItem)
+      const content = typeof label === 'string' ? <Text>{label}</Text> : label
+      return (
+        <li key={keygen(listItem)}>
+          <Flex alignItems="center">
+            {renderBeforeElement?.(listItem)}
+            {content}
+            {renderAfterElement?.(listItem)}
+          </Flex>
+        </li>
+      )
+    }), [list])
+    
+  return (
+    <Box as="ul" m={0} p={0} w={12} style={style} className={className}>
+      {items}
+    </Box>
+  )
+}

package/src/components/RightPanelForm.tsx

@@ -1,4 +1,5 @@
 import { Card } from '@citric/ui'
+import { theme } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
 import { panelAnimationTime } from '../right-panel/constants'
 import { PropsOf } from '../types'
@@ -13,12 +14,39 @@ const Form = styled.form`
   flex: 1;
   gap: 20px;
 
-  > .content {
+  > .content, .content-navigator .content, .content-navigator:not(.full) {
     display: flex;
     flex-direction: column;
     gap: 8px;
     flex: 1;
     overflow: hidden;
+    width: 100%;
+  }
+
+  .content-navigator {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    ul {
+      list-style: none;
+    }
+  }
+  
+  .content-navigator.full  {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 25px;
+    gap: 16px;
+    width: calc(100% - 50px);
+    height: calc(100% - 100px);
+    background: ${theme.color.light[300]};
+    
+    ~ .workspace-submit {
+      position: absolute;
+      left: 25px;
+      bottom: 25px;
+    }
   }
 
   > button {

package/src/components/Selector/index.tsx

@@ -152,7 +152,7 @@ const List = <T extends Item>({ selectorConfig, filter, visibility, onSelect, fa
 const SelectorContent = ({ filter, onClose, selectorConfig, favorite }: ContentProps<any>) => {
   const t = useTranslate(dictionary)
   const ref = useRef<HTMLDivElement>(null)
-  const [visibility, setVisibility] = useState<SectionVisibility | undefined>('favorite')
+  const [visibility, setVisibility] = useState<SectionVisibility | undefined>()
   const { resourceName, icon, onSelect, sections } = selectorConfig
   const onSelectItem = useCallback((slug: string) => {
     onSelect(slug)
@@ -186,8 +186,8 @@ const SelectorContent = ({ filter, onClose, selectorConfig, favorite }: ContentP
       </header>
       <div className="body">
         <ul className="tabs">
-          {sections.map(createSectionItem)}
           {createSectionItem()}
+          {sections.map(createSectionItem)}
         </ul>
         <FallbackBoundary message={interpolate(t.error, selectorConfig.resourceName)} mini>
           <List filter={filter} visibility={visibility} selectorConfig={selectorConfig} onSelect={onSelectItem} favorite={favorite} />
@@ -248,7 +248,7 @@ export const Selector = <T, >({ inputRef, selectorConfig, favorite }: SelectorPr
   }, [shouldRender])
 
   return (
-    <SelectorBox>
+    <SelectorBox tabsCount={selectorConfig.sections.length}>
       <Fading visible={shouldRender} ref={selectorRef} className="box-selector">
         <SelectorContent
           favorite={favorite}
@@ -269,7 +269,7 @@ const dictionary = {
     account: 'Account',
     shared: 'Shared',
     builtIn: 'Built-in',
-    workspace: 'Workspace',
+    workspace: 'Spot',
     error: 'Could not load the $0s.',
     noData: 'You don\'t have any $0 yet.',
     noResults: 'There are no $0s to show here.',
@@ -281,7 +281,7 @@ const dictionary = {
     personal: 'Pessoal',
     account: 'Conta',
     shared: 'Compartilhado',
-    workspace: 'Workspace',
+    workspace: 'Spot',
     builtIn: 'Embutido',
     error: 'Não foi possível carregar os $0s.',
     noData: 'Você ainda não possui $0s.',

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,175 @@
+import { Box, Flex, IconBox, Image, Text } from '@citric/core'
+import { ArrowRight, Search, Spaces, 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, NavigationComponent, NavigationMap, useComponentNavigation } from './ComponentNavigator'
+import { IconInput } from './IconInput'
+import { ListResource } from './ListResource'
+
+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 (
+    <>
+      <Box w={12}>
+        <IconInput icon={<Search />} value={filter} onChange={setFilter} className="search" />
+      </Box>
+
+      {!!filtered.length &&
+        <ListResource
+          list={filtered}
+          keygen={w => w.id}
+          style={{ gap: '6px', display: 'flex', flexDirection: 'column' }}
+          renderLabel={w => <CardSpace name={w.name} logoUrl={w.logo} icon={<Spaces />} onClick={() => onClick(w)} />}
+          renderAfterElement={(w) =>
+            <ButtonFavorite favorite={{ idOrSlug: w?.id, listFavorites, onAddFavorite, onRemoveFavorite }} />}
+          optionClassName={w => (filter && !w.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
+            ? 'filtered-out'
+            : ''
+          }
+          className="option-list"
+        />
+      }
+      <Box w={12}>
+        {!!workspaces.length && !filtered.length &&
+          <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder" />}
+        {!workspaces.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
+      </Box>
+    </>
+  )
+}
+
+
+const WorkspaceHeader = <T extends NavigationMap, K extends keyof T>({ data }: { data: NavigationComponent<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' ? 'Spots' : workspace.name}
+    {data.fullScreen && <IconButton title={'t.close'} aria-label={'t.close'} onClick={closeRightPanel}>  <Times /> </IconButton>}
+  </Flex>
+}
+
+interface WorkspaceTabNavigatorProps {
+  getNavigateParam: (workspace: WorkspaceResponse) => NavigationComponent<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: 'Aplicar',
+  },
+} 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>({ 
+export function DescribedCheckboxGroup<T>({
   keygen, 
   onChange, 
   options, 
   renderDescription, 
   renderLabel, 
-  renderBeforeElement,
-  renderAfterElement,
+  renderBeforeElement, 
+  renderAfterElement, 
   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" ml={3} pl={1}>
+      <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