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

package/src/components/WorkspaceTabNavigator.tsx

@@ -1,5 +1,5 @@
 import { Box, Flex, IconBox, Image, Text } from '@citric/core'
-import { ArrowRight, Circle, Search, Times } from '@citric/icons'
+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'
@@ -8,9 +8,9 @@ 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 { ComponentNavigator, ComponentNavigatorProps, NavigationComponent, NavigationMap, useComponentNavigation } from './ComponentNavigator'
 import { IconInput } from './IconInput'
-import { ListGroup } from './ListGroup'
+import { ListResource } from './ListResource'
 
 interface CardSpaceProps {
   onClick: VoidFunction,
@@ -96,13 +96,11 @@ const WorkspaceSourcesTab = ({ visibility, onClick }: WorkspaceSourcesTabProps)
       </Box>
 
       {!!filtered.length &&
-        <ListGroup
+        <ListResource
           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}
+          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()))
@@ -122,20 +120,20 @@ const WorkspaceSourcesTab = ({ visibility, onClick }: WorkspaceSourcesTabProps)
 }
 
 
-const WorkspaceHeader = <T extends NavigationMap, K extends keyof T>({ data }: { data: NavigationItem<T, K> }) => {
+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' ? 'Spaces' : workspace.name}
+    {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) => NavigationItem<NavigationMap, string>,
+  getNavigateParam: (workspace: WorkspaceResponse) => NavigationComponent<NavigationMap, string>,
   visibility?: WorkspaceVisibilityLevelEnum,
   className?: string,
 }
@@ -171,7 +169,7 @@ const dictionary = {
     noSearchResultsDescription: 'Por favor, tente outra busca.',
     noData: 'Ainda não há spaces.',
     noDataDescription: 'Use o Portal AI para criar novos spaces.',
-    apply: 'Apply',
+    apply: 'Aplicar',
   },
 } satisfies Dictionary
 

package/src/components/form/DescribedCheckboxGroup.tsx

@@ -11,17 +11,17 @@ import { CheckProps } from './types'
  * The description in placed under the label and checkbox as an accordion.
  */
 export function DescribedCheckboxGroup<T>({
-  keygen,
-  onChange,
-  options,
-  renderDescription,
-  renderLabel,
-  renderBeforeElement,
-  renderAfterElement,
-  optionClassName,
-  optionStyle,
-  value,
-  className,
+  keygen, 
+  onChange, 
+  options, 
+  renderDescription, 
+  renderLabel, 
+  renderBeforeElement, 
+  renderAfterElement, 
+  optionClassName, 
+  optionStyle, 
+  value, 
+  className, 
   style }: CheckProps<T>) {
   const t = useTranslate(dictionary)
   const allSelected = options.length > 0 && options.every(option => value.includes(option))

package/src/views/Agents/AgentsPanel.tsx

@@ -30,7 +30,7 @@ export const AgentsPanel = () => {
     { 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.spots, content: <AgentsTabWorkspace key="workspace"  visibility="WORKSPACE" agent={agent} /> },
     { title: t.account, content: <AgentsTab key="account" visibility="ACCOUNT" agent={agent} /> },
  
   ], [t, isTrial, agent])

package/src/views/Agents/AgentsTab.tsx

@@ -7,7 +7,7 @@ import { AgentResponse, VisibilityLevel } from '@stack-spot/portal-network/api/a
 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 { NavigationComponent } from '../../components/ComponentNavigator'
 import { DescribedRadioGroup } from '../../components/form/DescribedRadioGroup'
 import { IconInput } from '../../components/IconInput'
 import { WorkspaceTabNavigator } from '../../components/WorkspaceTabNavigator'
@@ -119,7 +119,7 @@ export const AgentsTab = ({ visibility, workspaceId, agent, showSubmitButton = t
 export function AgentsTabWorkspace({ agent, visibility, showSubmitButton }: AgentTabProps) {
   const workspaceTabComponents = useMemo(() => ({ agent: AgentsTab }), [agent])
 
-  const buildNavigateParams = (workspace: WorkspaceResponse): NavigationItem<typeof workspaceTabComponents> => ({
+  const buildNavigateParams = (workspace: WorkspaceResponse): NavigationComponent<typeof workspaceTabComponents> => ({
     component: 'agent',
     props: { visibility, workspaceId: workspace.id, agent, showSubmitButton },
   })

package/src/views/Agents/dictionary.ts

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

package/src/views/Chat/StepsList.tsx

@@ -1,5 +1,5 @@
 import { Button, IconBox, Text } from '@citric/core'
-import { CheckCircleFill, Circle, PlayFill, TimesCircleFill } from '@citric/icons'
+import { CheckCircleFill, PlayFill, Spaces, TimesCircleFill } from '@citric/icons'
 import { LoadingCircular } from '@citric/ui'
 import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
 import { ChatStep, StepChatStep } from '@stack-spot/portal-network'
@@ -27,7 +27,7 @@ function getStatusIcon(status: ChatStep['status']) {
   switch (status) {
     case 'error': return <IconBox {...iconBoxProps}><TimesCircleFill /></IconBox>
     case 'success': return <IconBox {...iconBoxProps}><CheckCircleFill /></IconBox>
-    case 'pending': return <IconBox {...iconBoxProps}><Circle /></IconBox>
+    case 'pending': return <IconBox {...iconBoxProps}><Spaces /></IconBox>
     case 'running': return <LoadingCircular className="loading" colorScheme="inverse" size="xs" />
   }
 }

package/src/views/ChatHistory/utils.ts

@@ -49,13 +49,14 @@ export async function getAllAgents(): Promise<LabeledWithImage[]> {
       agentClient.agents.query({ visibility: 'PERSONAL' }),
       agentClient.agents.query({ visibility: 'SHARED' }),
       agentClient.publicAgents.query({}),
-      
+
       workspaceAiClient.workspacesContentsByType.query({ contentType: 'agent' }),
     ])
-    const workspaceAgentsAsArray = workspaceAgents.flatMap((workspaceAgent: any) =>workspaceAgent?.agents)
+
+    const workspaceAgentsAsArray = workspaceAgents.flatMap(({ agents }) => agents)
     const builtInAgents = publicAgents.map((a) => ({ id: a.id, label: a.name, image: a.avatar, slug: a.slug, builtIn: true }))
     return [...agentsAccount, ...agentsPersonal, ...agentsShared, ...workspaceAgentsAsArray]
-      .map(a => ({ id: a.id, label: a.name, image: a.avatar, slug: a.slug, builtIn: false }))
+      .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

package/src/views/KnowledgeSources.tsx

@@ -8,7 +8,7 @@ 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 { NavigationComponent } from '../components/ComponentNavigator'
 import { DescribedCheckboxGroup } from '../components/form/DescribedCheckboxGroup'
 import { IconInput } from '../components/IconInput'
 import { RightPanelTabs } from '../components/RightPanelTabs'
@@ -68,7 +68,7 @@ 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.spaces, content: <KnowledgeSourcesTabWorkspace key="workspace" visibility="workspace" allKS={allKS} onSubmit={onSubmit} /> },
+    { title: t.spots, content: <KnowledgeSourcesTabWorkspace key="workspace" visibility="workspace" allKS={allKS} onSubmit={onSubmit} /> },
     { title: t.account, content: <KnowledgeSourcesTab key="account" visibility="account" allKS={allKS} onSubmit={onSubmit} /> },    
   ]
 
@@ -198,7 +198,7 @@ export const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit, workspaceId,
 export function KnowledgeSourcesTabWorkspace({ allKS, onSubmit }: TabProps) {
   const workspaceTabComponents = useMemo(() => ({ ks: KnowledgeSourcesTab }), [allKS, onSubmit])
 
-  const buildNavigateParams = (workspace: WorkspaceResponse): NavigationItem<typeof workspaceTabComponents> => ({
+  const buildNavigateParams = (workspace: WorkspaceResponse): NavigationComponent<typeof workspaceTabComponents> => ({
     component: 'ks',
     props: { visibility: 'workspace', workspaceId: workspace.id, allKS, onSubmit },
   })
@@ -220,7 +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',
+    spots: 'Spots',
   },
   pt: {
     title: 'Knowledge Sources',
@@ -234,6 +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',
+    spots: 'Spots',
   },
 } satisfies Dictionary

package/src/views/MessageInput/AgentSelector.tsx

@@ -9,7 +9,9 @@ import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
 import { agentRegex } from '../../regex'
 import { useAgentFavorites } from '../Agents/useAgentFavorites'
 
-const AgentItem = ({ avatar, name, spaceName }: AgentResponse & { spaceName?: string }) => {
+type AgentWithSpaceName = AgentResponse & { spaceName?: string }
+
+const AgentItem = ({ avatar, name, spaceName }: AgentWithSpaceName) => {
   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' }}>
@@ -18,7 +20,6 @@ const AgentItem = ({ avatar, name, spaceName }: AgentResponse & { spaceName?: st
       <p className="selector-description">{spaceName}</p>
       <p className="selector-title">{name}</p>
     </div>
-
   </Flex>
 }
 
@@ -40,7 +41,7 @@ export const AgentSelector = ({ inputRef, isTrial }: { isTrial: boolean,
       'agent',
       {
         id: agent.id, label: agent.name, image: agent.avatar, slug: agent.slug,
-        builtIn: isBuiltIn, visibility_level: agent.visibility_level
+        builtIn: isBuiltIn, visibility_level: agent.visibility_level,
       },
     )
 
@@ -54,9 +55,9 @@ export const AgentSelector = ({ inputRef, isTrial }: { isTrial: boolean,
     const publicAgents = agentClient.publicAgents.useQuery({})
     const builtInsAgents = [...publicAgents.map((agent) => ({ ...agent, visibility_level: 'builtIn' }))]
     const workspaceAgents = workspaceAiClient.workspacesContentsByType.useQuery({ contentType: 'agent' })
-    
-    const workspaceAgentsWithWorkspaceName = workspaceAgents.flatMap(({ agents, space_name }: any) =>
-      agents.map((agent: any) => ({ ...agent, spaceName: space_name })))
+
+    const workspaceAgentsWithWorkspaceName = workspaceAgents.flatMap(({ agents, space_name }) =>
+      agents?.map((agent) => ({ ...agent, spaceName: space_name }))) as AgentWithSpaceName[]
     let accountAgents: AgentResponse[] = []
     let sharedAgents: AgentResponse[] = []
     if (!isTrial) {

package/src/views/MessageInput/ButtonGroup.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight, Circle, Code, KnowledgeSource, Send, Stack, Times } from '@citric/icons'
+import { ChevronRight, Code, KnowledgeSource, Send, Spaces, 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.space} title={t.space} onClick={() => widget.set('panel', 'workspace')}>
-              <Circle />
+            <IconButton aria-label={t.spot} title={t.spot} onClick={() => widget.set('panel', 'workspace')}>
+              <Spaces />
             </IconButton>
           )}
           {features.knowledgeSource && (

package/src/views/MessageInput/QuickCommandSelector.tsx

@@ -1,11 +1,13 @@
 import { QuickCommand } from '@citric/icons'
 import { aiClient, workspaceAiClient } from '@stack-spot/portal-network'
-import { QuickCommandListResponse } from '@stack-spot/portal-network/api/ai'
+import { QuickCommandResponse } from '@stack-spot/portal-network/api/ai'
 import { useCallback } from 'react'
 import { Selector } from '../../components/Selector'
 import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
 import { quickCommandRegex } from '../../regex'
 
+type QuickCommandResponseWithSpaceName = QuickCommandResponse & { spaceName?: string }
+
 export const QuickCommandSelector = ({ inputRef, isTrial }: 
   { isTrial: boolean, inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement> }) => {
   const chat = useCurrentChat()
@@ -65,7 +67,7 @@ export const QuickCommandSelector = ({ inputRef, isTrial }:
     } 
   })
   
-  const onSelectItem = useCallback((qc: QuickCommandListResponse) => {
+  const onSelectItem = useCallback((qc: QuickCommandResponseWithSpaceName) => {
     const newValue = `/${qc.slug}`
     chat.set('nextMessage', newValue)
 
@@ -78,13 +80,13 @@ export const QuickCommandSelector = ({ inputRef, isTrial }:
     const quickCommands = aiClient.quickCommands.useQuery({ order: 'a-to-z' })
     const quickCommandsFiltered = quickCommands.filter((qc) => qc.visibility_level.toLowerCase() !== 'workspace')
     const workspaceQuickCommands = workspaceAiClient.workspacesContentsByType.useQuery({ contentType: 'quick_command' })
-    const workspaceQuickCommandsWithWorkspaceName = workspaceQuickCommands.flatMap(({ qcs, space_name }: any) =>
-      qcs.map((qc: any) => ({ ...qc, spaceName: space_name })))
+    const workspaceQuickCommandsWithWorkspaceName: QuickCommandResponseWithSpaceName[] = workspaceQuickCommands
+      .flatMap(({ qcs, space_name }) => qcs?.map((qc) => ({ ...qc, spaceName: space_name }))) as QuickCommandResponseWithSpaceName[]
 
     return [...quickCommandsFiltered, ...workspaceQuickCommandsWithWorkspaceName]
   }
 
-  const QuickCommandItem = ({ slug, description, spaceName }: QuickCommandListResponse & { spaceName?: string }) => <>
+  const QuickCommandItem = ({ slug, description, spaceName }: QuickCommandResponseWithSpaceName) => <>
     <p className="selector-description">{spaceName}</p>
     <p className="selector-title">/{slug?.toUpperCase()}</p>
     <p className="selector-description">{description}</p>

package/src/views/MessageInput/dictionary.ts

@@ -4,8 +4,8 @@ const dictionary = {
   en: {
     stack: 'Select stack',
     code: 'Open code editor',
-    workspace: 'Select workspace',
-    space: 'Select space',
+    workspace: 'Select spot',
+    spot: 'Select spot',
     knowledgeSource: 'Select knowledge sources',
     agent: 'Select agent',
     collapse: 'Hide buttons',
@@ -15,7 +15,7 @@ const dictionary = {
     cancel: 'Cancel',
     removeConfig: 'Remove all the configuration',
     removeStack: 'Stop using the current stack',
-    removeWorkspace: 'Stop using the current workspace',
+    removeWorkspace: 'Stop using the current spot',
     removeKS: 'Stop using this knowledge source',
     selected: 'Selected',
     removeSelection: 'Remove current code selection',
@@ -24,8 +24,8 @@ const dictionary = {
   pt: {
     stack: 'Selecionar stack',
     code: 'Abrir editor de código',
-    workspace: 'Selecionar workspace',
-    space: 'Select Space',
+    workspace: 'Selecionar spot',
+    spot: 'Selecionar spot',
     knowledgeSource: 'Selecionar knowledge sources',
     agent: 'Selecionar agente',
     collapse: 'Esconder botões',
@@ -35,7 +35,7 @@ const dictionary = {
     cancel: 'Cancelar',
     removeConfig: 'Remover todas as configurações',
     removeStack: 'Parar de usar a stack atual',
-    removeWorkspace: 'Parar de usar o workspace atual',
+    removeWorkspace: 'Parar de usar o spot atual',
     removeKS: 'Parar de usar este knowledge source',
     selected: 'Selecionado',
     removeSelection: 'Desfazer seleção de código',

package/src/views/Stacks.tsx

@@ -7,7 +7,7 @@ import { WorkspaceResponse } from '@stack-spot/portal-network/api/workspace-ai'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { ButtonFavorite } from '../components/ButtonFavorite'
-import { NavigationItem } from '../components/ComponentNavigator'
+import { NavigationComponent } from '../components/ComponentNavigator'
 import { DescribedRadioGroup } from '../components/form/DescribedRadioGroup'
 import { IconInput } from '../components/IconInput'
 import { RightPanelTabs } from '../components/RightPanelTabs'
@@ -53,7 +53,7 @@ const StacksPanel =  () => {
     { title: t.favorites, content: <StacksTab key="favorites" visibility="favorite" stack={stack} /> },
     { title: t.personal, content: <StacksTab key="personal" visibility="personal" stack={stack} /> },
     { title: t.shared, content: <StacksTab key="shared" visibility="shared" stack={stack} /> },
-    { title: t.spaces, content: <StacksTabWorkspace key="workspace" visibility="workspace" stack={stack} /> },
+    { title: t.spots, content: <StacksTabWorkspace key="workspace" visibility="workspace" stack={stack} /> },
     { title: t.account, content: <StacksTab key="account" visibility="account" stack={stack} /> },
   ], [t, isTrial])
   
@@ -184,7 +184,7 @@ export const StacksTab = ({ visibility, workspaceId, stack, showSubmitButton = t
 function StacksTabWorkspace({ stack, visibility, showSubmitButton }: StacksTabProps) {
   const workspaceTabComponents = useMemo(() => ({ stack: StacksTab }), [stack])
 
-  const buildNavigateParams = (workspace: WorkspaceResponse): NavigationItem<typeof workspaceTabComponents> => ({
+  const buildNavigateParams = (workspace: WorkspaceResponse): NavigationComponent<typeof workspaceTabComponents> => ({
     component: 'stack',
     props: { visibility, workspaceId: workspace.id, stack, showSubmitButton },
   }) 
@@ -205,7 +205,7 @@ const dictionary = {
     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: 'Favorites',
-    spaces: 'Spaces',
+    spots: 'Spots',
   },
   pt: {
     title: 'Stacks AI',
@@ -219,6 +219,6 @@ const dictionary = {
     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: 'Favoritos',
-    spaces: 'Spaces',
+    spots: 'Spots',
   },
 } satisfies Dictionary

package/src/views/Workspaces/WorkspacesTab.tsx

@@ -1,12 +1,13 @@
 import { Button, Flex, IconBox, Image, Text } from '@citric/core'
-import { Agent, Circle, KnowledgeSource, Stack } from '@citric/icons'
+import { Agent, KnowledgeSource, Spaces, Stack } from '@citric/icons'
 import { Avatar } from '@citric/ui'
 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 { useTransition } from 'react'
 import { useComponentNavigation } from '../../components/ComponentNavigator'
-import { ListGroup } from '../../components/ListGroup'
+import { Loading } from '../../components/FallbackBoundary/Loading'
+import { ListResource } from '../../components/ListResource'
 import { CardSpace, WorkspaceTabNavigator } from '../../components/WorkspaceTabNavigator'
 import { ChatProperties } from '../../state/ChatState'
 import { AgentsTab } from '../Agents/AgentsTab'
@@ -19,7 +20,7 @@ const SpaceCard = ({ workspaceId }: { workspaceId: string }) => {
     <Flex flexDirection="column" sx={{ gap: '4px' }}>
       <Flex alignContent="center" alignItems="center" sx={{ gap: '8px', m: 1 }} >
         <Avatar size="xxs" appearance="square" sx={{ bg: 'light.600', r: 'xxs' }}>
-          {workspace.logo ? <Image src={workspace.logo} /> : <IconBox> <Circle /> </IconBox>}
+          {workspace.logo ? <Image src={workspace.logo} /> : <IconBox> <Spaces /> </IconBox>}
         </Avatar>
         <Text appearance="body2" weight="medium">{workspace.name} </Text>
       </Flex>
@@ -71,13 +72,14 @@ export const WorkspaceResources = ({ workspaceId, allKS, agent, stack }: Omit<Ta
 
   return (<>
     {workspaceId && <SpaceCard workspaceId={workspaceId} />}
-    <ListGroup
-      list={resourceTypes}
-      keygen={w => w.id}
-      onClick={(resource) => { handleNavigate(resource) }}
-      renderLabel={r => <CardSpace name={r.displayName} icon={r.icon} onClick={() => handleNavigate(r)} />}
-      style={{ gap: '6px', display: 'flex', flexDirection: 'column', opacity: isPending ? '0.5' : '1' }}
-    />
+    {isPending ? <Loading /> :
+      <ListResource
+        list={resourceTypes}
+        keygen={w => w.id}
+        renderLabel={r => <CardSpace name={r.displayName} icon={r.icon} onClick={() => handleNavigate(r)} />}
+        style={{ gap: '6px', display: 'flex', flexDirection: 'column' }}
+      />
+    }
   </>
   )
 }

package/src/views/Workspaces/index.tsx

@@ -61,24 +61,15 @@ const WorkspacesPanel = () => {
 
 const dictionary = {
   en: {
-    title: 'Spaces',
-    description: 'By selecting a space, its Knowledge Sources (KSs), Agents, Quick Commands and Stacks Ai will be consulted to generate the answers.',
-    apply: 'Apply',
+    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.",
-    noSearchResultsDescription: 'Please, try another search term.',
-    noData: 'There are no spaces yet.',
-    noDataDescription: 'Use the AI portal to create new spaces.',
     all: 'All',
     favorites: 'Favorites',
   },
   pt: {
-    title: 'Spaces',
-    description: 'Ao selecionar um space, seus Knowledge Sources (KSs), Agentes, Quick Commands e Stacks Ai serão consultados para gerar as respostas.',
-    apply: 'Aplicar',
-    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.',
+    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',
   },

package/dist/components/ListGroup.d.ts

@@ -1,46 +0,0 @@
-import { WithStyle } from '@stack-spot/portal-theme';
-interface ListGroupProps<T> extends WithStyle {
-    /**
-     * The list available.
-     */
-    list: T[];
-    /**
-     * A function that renders an option as a label. This can either return a string or a React Element.
-     */
-    renderLabel: (item: T) => React.ReactNode;
-    /**
-     * A function that renders an option as a description. This can either return a string or a React Element.
-     */
-    renderDescription?: (item: T) => React.ReactNode;
-    /**
-     * A function that renders a element before the content
-     */
-    renderBeforeElement?: (item: T) => React.ReactNode;
-    /**
-     * A function that renders a element after the content
-     */
-    renderAfterElement?: (item: T) => React.ReactNode;
-    /**
-     * A function that gives a custom className to the rendered option.
-     */
-    optionClassName?: (item: T) => string | undefined;
-    /**
-     * A function that gives a custom style to the rendered option.
-     */
-    optionStyle?: (item: T) => React.CSSProperties | undefined;
-    /**
-     * A function that generates a unique id for the option.
-     */
-    keygen: (item: T) => React.Key;
-    /**
-     * A function to call whenever the item click.
-     */
-    onClick: (item: T) => void;
-}
-/**
- * Renders a radio button group where each option has a label and a description.
- * The description in placed under the label and radio button as an accordion.
- */
-export declare function ListGroup<T>({ list, renderLabel, renderBeforeElement, renderAfterElement, className, keygen, style }: ListGroupProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=ListGroup.d.ts.map

package/dist/components/ListGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListGroup.d.ts","sourceRoot":"","sources":["../../src/components/ListGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAIpD,UAAU,cAAc,CAAC,CAAC,CAAE,SAAQ,SAAS;IAC3C;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;OAEG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1C;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACjD;;OAEG;IACH,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACnD;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAClD;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IAClD;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC;IAC/B;;OAEG;IACH,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CAC5B;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,CAAC,EACzB,EACE,IAAI,EACJ,WAAW,EACX,mBAAmB,EACnB,kBAAkB,EAClB,SAAS,EACT,MAAM,EACN,KAAK,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,2CAkB7B"}

package/dist/components/ListGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListGroup.js","sourceRoot":"","sources":["../../src/components/ListGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AA0C/B;;;GAGG;AACH,MAAM,UAAU,SAAS,CACvB,EACE,IAAI,EACJ,WAAW,EACX,mBAAmB,EACnB,kBAAkB,EAClB,SAAS,EACT,MAAM,EACN,KAAK,EAAqB;IAE5B,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;QAChD,MAAM,KAAK,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAA;QACnC,MAAM,OAAO,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,cAAE,KAAK,GAAQ,CAAC,CAAC,CAAC,KAAK,CAAA;QAExE,OAAO,CACL,uBACE,MAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,aACtB,mBAAmB,EAAE,CAAC,QAAQ,CAAC,EAC/B,OAAO,EACP,kBAAkB,EAAE,CAAC,QAAQ,CAAC,IAC1B,IALA,MAAM,CAAC,QAAQ,CAAC,CAMpB,CACN,CAAA;IACH,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEX,OAAO,KAAC,GAAG,IAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,YAAG,KAAK,GAAO,CAAA;AAC1F,CAAC"}

package/src/components/ListGroup.tsx

@@ -1,76 +0,0 @@
-import { Box, Flex, Text } from '@citric/core'
-import { WithStyle } from '@stack-spot/portal-theme'
-import { useMemo } from 'react'
-
-
-interface ListGroupProps<T> extends WithStyle {
-  /**
-   * The list available.
-   */
-  list: T[],
-  /**
-   * A function that renders an option as a label. This can either return a string or a React Element.
-   */
-  renderLabel: (item: T) => React.ReactNode,
-  /**
-   * A function that renders an option as a description. This can either return a string or a React Element.
-   */
-  renderDescription?: (item: T) => React.ReactNode,
-  /**
-   * A function that renders a element before the content
-   */
-  renderBeforeElement?: (item: T) => React.ReactNode,
-  /**
-   * A function that renders a element after the content
-   */
-  renderAfterElement?: (item: T) => React.ReactNode,
-  /**
-   * A function that gives a custom className to the rendered option.
-   */
-  optionClassName?: (item: T) => string | undefined,
-  /**
-   * A function that gives a custom style to the rendered option.
-   */
-  optionStyle?: (item: T) => React.CSSProperties | undefined,
-  /**
-   * A function that generates a unique id for the option.
-   */
-  keygen: (item: T) => React.Key,
-  /**
-   * A function to call whenever the item click.
-   */
-  onClick: (item: T) => void,
-}
-
-/**
- * Renders a radio button group where each option has a label and a description.
- * The description in placed under the label and radio button as an accordion.
- */
-export function ListGroup<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>
-}
-