@stack-spot/ai-chat-widget 1.38.2-beta.1 → 2.0.0-beta.1

package/src/views/MessageInput/styled.ts

@@ -1,4 +1,3 @@
-import { IconButton } from '@citric/ui'
 import { theme } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
 
@@ -51,7 +50,7 @@ export const SelectionBarWrapper = styled.div`
   }
 `
 
-export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
+export const MessageInputBox = styled.div`
   display: flex;
   flex-direction: column;
 
@@ -127,7 +126,7 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
       line-height: 0.75rem;
       white-space: nowrap;
 
-      ${IconButton} {
+      /* $ {IconButton} {
         padding: 4px 0;
         background: none;
         border: none;
@@ -138,7 +137,7 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
           width: auto;
           height: 12px;
         }
-      }
+      } */
     }
   }
 
@@ -175,18 +174,15 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
       background-color: ${theme.color.light[300]};
       padding: 10px 8px;
       transition: border-color 0.3s, background-color 0.3s;
-
-      &.focused {
-        border: 2px solid ${theme.color.light[300]};
-      }
-
-      
-      &.disabled {
-        background-color: ${theme.color.light[300]};
-      }
     }
   }
 
+  [data-citric="progress-bar"] {
+    background-color: ${theme.color.light[500]};
+    border: 0;
+    padding: 0;
+  }
+
   .button-group {
     display: flex;
     flex-direction: row;
@@ -239,10 +235,10 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
       }
     }
 
-    ${IconButton} {
+    /* $ {IconButton} {
       width: 24px;
       height: 24px;
-    }
+    } */
 
     .group-agent {
       display: flex;
@@ -302,7 +298,7 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
     transition: height 0.3s;
     background-color: transparent;
     &:focus {
-      box-shadow: none;
+      box-shadow: none !important;
     }
   }
 `

package/src/views/MinimizedHeader.tsx

@@ -1,6 +1,4 @@
-import { Text } from '@citric/core'
-import { ChevronDown, Times } from '@citric/icons'
-import { IconButton } from '@citric/ui'
+import { IconButton, Text } from '@stack-spot/citric-react'
 import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useCallback, useRef, useState } from 'react'
@@ -24,6 +22,7 @@ const Header = styled.header`
     white-space: nowrap;
     max-width: calc(100% - 78px); // size of the button-group + gap
     height: 15px; // fixes weird problem where the text has 14px instead of 15px of height
+    line-height: 1;
   }
 
   .button-group {
@@ -69,14 +68,13 @@ export const MinimizedHeader = ({ onClose, onCollapse, onExpand }: MinimizedActi
       <FadingOverflow className="title"><Text title={label}>{label}</Text></FadingOverflow>
       {showButtons && <div className="button-group">
         {(onExpand || onCollapse) && <IconButton
+          icon="ChevronDown"
           title={collapsed ? t.expand : t.collapse}
           aria-label={collapsed ? t.expand : t.collapse}
           className={listToClass(['collapse', collapsed && 'collapsed'])}
           onClick={toggleCollapsed}
-        >
-          <ChevronDown />
-        </IconButton>}
-        {onClose && <IconButton title={t.close} aria-label={t.close} onClick={onClose}><Times /></IconButton>}
+        />}
+        {onClose && <IconButton icon="Times" title={t.close} aria-label={t.close} onClick={onClose} />}
       </div>}
     </Header>
   )

package/src/views/Resources.tsx

@@ -1,10 +1,9 @@
-import { Box, Flex, IconBox, Text } from '@citric/core'
-import { Agent } from '@citric/icons'
-import { Avatar } from '@citric/ui'
+import { Accordion, Icon, ImageBox, ImageWithFallback, Row, Text } from '@stack-spot/citric-react'
 import { agentToolsClient } from '@stack-spot/portal-network'
+import { theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useEffect, useMemo } from 'react'
-import { Accordion } from '../components/Accordion'
+import { styled } from 'styled-components'
 import { useWidget, useWidgetState } from '../context/hooks'
 import { useRightPanel } from '../right-panel/hooks'
 import { toolById } from '../utils/tools'
@@ -27,6 +26,12 @@ export const Resources = () => {
   return null
 }
 
+const StyledAccordion = styled(Accordion)`
+  &[data-citric="accordion"] {
+    background-color: ${theme.color.light[400]};
+  }
+`
+
 const ResourcesPanel = () => {
   const { chatId, messageId } = useWidgetState('currentMessageInPanel') ?? {}
   const widget = useWidget()
@@ -46,13 +51,12 @@ const ResourcesPanel = () => {
   const hasAgentTool = useMemo(() => message?.tools?.some(id => agentsTools?.find((agent) => agent.id === id)), [messageId, toolKits])
 
   const header = (image?: string, label?: string) => (
-    <Flex alignItems="center">
-      {image ? <Avatar size="xxs">
-        <img title={label} src={image} />
-      </Avatar> : 
-        <IconBox appearance="circle" title={label} color="gray"><Agent /></IconBox>}
-      <Text ml={3}>{label}</Text>
-    </Flex>
+    <Row gap="10px">
+      <ImageBox>
+        <ImageWithFallback src={image} fallback={<Icon icon="Agent" />} aria-label={label} title={label} />
+      </ImageBox>
+      <Text>{label}</Text>
+    </Row>
   )
   
   return !!(tools?.length || customTools?.length) && (
@@ -61,28 +65,25 @@ const ResourcesPanel = () => {
         {[...(tools || []), ...(customTools || [])].map(
           (tool) =>
             tool && (
-              <Box key={tool.id} mt={3}>
-                <Accordion header={header(tool?.image, tool?.name)}>
-                  <Box sx={{ backgroundColor: 'light.400', m: '-10px', p: '16px' }}>
-                    {tool?.description}
-                  </Box>
-                </Accordion>
-              </Box>))}
+              <StyledAccordion key={tool.id} header={header(tool?.image, tool?.name)} appearance="card">
+                {tool?.description}
+              </StyledAccordion>
+            ))}
       </>
-      {hasAgentTool && 
-      <>
-        {message?.tools?.map((id) => {
-          const agentTool = agentsTools?.find((agent) => agent.id === id)
-          return (
-            <Box key={id} mt={3}>
-              <Accordion header={header(agentTool?.avatar || undefined, agentTool?.name)}>
+      {
+        hasAgentTool && 
+        <>
+          {message?.tools?.map((id) => {
+            const agentTool = agentsTools?.find((agent) => agent.id === id)
+            return (
+              <StyledAccordion key={id} header={header(agentTool?.avatar || undefined, agentTool?.name)}>
                 <AgentDescription  agentId={id} />
-              </Accordion>
-            </Box>)},
-        )}
-      </>}
+              </StyledAccordion>
+            )},
+          )}
+        </>
+      }
     </>
-    
   )
 }
 

package/src/views/Stacks.tsx

@@ -1,15 +1,12 @@
-import { Button } from '@citric/core'
-import { Search } from '@citric/icons'
+import { Button, Tab } from '@stack-spot/citric-react'
 import { Placeholder } from '@stack-spot/portal-components/Placeholder'
 import { aiClient, workspaceAiClient } from '@stack-spot/portal-network'
-import { GetAiStackResponse, VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
+import { 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 { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { ButtonFavorite } from '../components/ButtonFavorite'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { NavigationComponent } from '../components/ComponentNavigator'
 import { DescribedRadioGroup } from '../components/form/DescribedRadioGroup'
-import { IconInput } from '../components/IconInput'
 import { RightPanelContentList } from '../components/RightPanelContentList'
 import { RightPanelTabs } from '../components/RightPanelTabs'
 import { WorkspaceTabNavigator } from '../components/WorkspaceTabNavigator'
@@ -19,8 +16,6 @@ import { useRightPanel } from '../right-panel/hooks'
 import { ChatProperties } from '../state/ChatState'
 import { checkIsTrial } from '../utils/check-is-trial'
 
-type TabElement = { title: string, content: ReactElement }
-
 /**
  * Renders the Stack selection form in the Right Panel if this is the panel that is currently opened.
  */
@@ -54,12 +49,12 @@ const StacksPanel =  () => {
     stack.current = chat.get('stack')
   }, [chat])
 
-  const allTabsMap: Partial<Record<Scope, TabElement>> = {
-    favorite: { title: t.favorites, content: <StacksTab key="favorites" visibility="favorite" stack={stack} /> },
-    personal: { title: t.personal, content: <StacksTab key="personal" visibility="personal" stack={stack} /> },
-    shared: { title: t.shared, content: <StacksTab key="shared" visibility="shared" stack={stack} /> },
-    workspace: { title: t.spots, content: <StacksTabWorkspace key="workspace" visibility="workspace" stack={stack} /> },
-    account: { title: t.account, content: <StacksTab key="account" visibility="account" stack={stack} /> },
+  const allTabsMap: Partial<Record<Scope, Omit<Tab, 'key'>>> = {
+    favorite: { label: t.favorites, content: <StacksTab key="favorites" visibility="favorite" stack={stack} /> },
+    personal: { label: t.personal, content: <StacksTab key="personal" visibility="personal" stack={stack} /> },
+    shared: { label: t.shared, content: <StacksTab key="shared" visibility="shared" stack={stack} /> },
+    workspace: { label: t.spots, content: <StacksTabWorkspace key="workspace" visibility="workspace" stack={stack} /> },
+    account: { label: t.account, content: <StacksTab key="account" visibility="account" stack={stack} /> },
   }
   const defaultScopes: Scope[] = ['favorite', 'personal', 'shared', 'workspace', 'account']
 
@@ -70,8 +65,8 @@ const StacksPanel =  () => {
     : rawScopes
 
   const tabs = scopesToRender
-    .map(scope => allTabsMap[scope])
-    .filter(Boolean) as TabElement[]
+    .map(scope => scope in allTabsMap ? { key: scope, ...allTabsMap[scope] } : undefined)
+    .filter(Boolean) as Tab[]
 
   return (isGroupResourcesByScope ? (
     <RightPanelTabs key={chat.id} tabs={tabs} />
@@ -91,11 +86,10 @@ export const StacksTab = ({ visibility, workspaceId, stack, showSubmitButton = t
   const t = useTranslate(dictionary)
   const { close } = useRightPanel()
   const chat = useCurrentChat()
-  const [filter, setFilter] = useState('')
-
   const listFavorites = aiClient.aiStacks.useQuery({ visibility: 'favorite' })
   const [addFavorite, pendingAddFav] = aiClient.addFavoriteStackAi.useMutation()
   const [removeFavorite, pendingRemoveFav] = aiClient.removeFavoriteStackAi.useMutation()
+  const [submitEnabled, setSubmitEnabled] = useState(false)
 
   const removeFavoriteStack = async (idOrSlug: string) => {
     try {
@@ -146,57 +140,40 @@ export const StacksTab = ({ visibility, workspaceId, stack, showSubmitButton = t
       reject(error)
     } 
   })
-  
- 
 
   const stacks = workspaceId
     ? workspaceAiClient.getStackFromWorkspaceAi.useQuery({ workspaceId })
     //@ts-ignore
     : aiClient.aiStacks.useQuery({ visibility, order: 'a-to-z' })
 
-  const currentStackId = stack.current ? stack.current.id : chat.get('stack')?.id
-  const [value, setValue] = useState<GetAiStackResponse | undefined>(stacks.find(s => s.id === currentStackId))
-  const filtered = useMemo(() => filter ? 
-    // Recreate the list so that the favorites list is taken into account
-    stacks.filter(s => s === value || s.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : [...stacks],
-  [stacks, listFavorites, filter, value], 
-  )
+  const initialValue = useMemo(() => {
+    const currentStackId = stack.current ? stack.current.id : chat.get('stack')?.id
+    const initial = stacks.find(s => s.id === currentStackId)
+    if (initial) setSubmitEnabled(true)
+    return initial
+  }, [stacks])
 
   function submit() {
-    if (value) chat.set('stack', { id: value.id, label: value.name })
+    if (stack.current) chat.set('stack', stack.current)
     close()
   }
 
-  const onChange = useCallback((newValue: GetAiStackResponse) => {
-    setValue(newValue)
-    stack.current = { ...newValue, label: newValue.name }
-  }, [])
-
   return (
     <>
       <div className="content">
-        <IconInput icon={<Search />} value={filter} onChange={setFilter} className="search" />
-        {!!filtered.length && <DescribedRadioGroup
-          options={filtered}
-          renderAfterElement={({ id }) => 
-            <ButtonFavorite favorite={{ idOrSlug:id, listFavorites, onAddFavorite, onRemoveFavorite }} />
-          }
-          keygen={s => s.id}
-          value={value}
-          onChange={onChange}
-          renderLabel={s => s.name}
-          renderDescription={s => s.use_case}
-          optionClassName={s => (s === value && filter && !s.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
-            ? 'filtered-out'
-            : ''
-          }
-          className="option-list"
-        />}
-        {!!stacks.length && !filtered.length &&
-          <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder"/>}
-        {!stacks.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
+        <DescribedRadioGroup
+          options={stacks}
+          initialValue={initialValue}
+          data={s => ({ idOrSlug: s.id, description: s.use_case, name: s.name, listFavorites, onAddFavorite, onRemoveFavorite })}
+          emptyResults={<Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder"/>}
+          emptyDataset={<Placeholder title={t.noData} description={t.noDataDescription} />}
+          onChange={(s) => {
+            stack.current = s ? { ...s, label: s.name } : undefined
+            setSubmitEnabled(true)
+          }}
+        />
       </div>
-      {!!filtered.length && showSubmitButton && <Button onClick={submit} disabled={!value}>{t.apply}</Button>}
+      {!!stacks.length && showSubmitButton && <Button onClick={submit} disabled={!submitEnabled}>{t.apply}</Button>}
     </>
   )
 }

package/src/views/Steps/FlowChart/NodeStep.tsx

@@ -1,5 +1,5 @@
-import { IconBox, Text } from '@citric/core'
-import { Cog } from '@citric/icons'
+import { Icon } from '@stack-spot/citric-icons'
+import { Text } from '@stack-spot/citric-react'
 import { listToClass } from '@stack-spot/portal-theme'
 import { StackedBadge } from '../../../components/StackedBadge'
 import { useStepsDictionary } from '../dictionary'
@@ -24,7 +24,7 @@ export const NodeStep = ({ data: { step, index, nextStatus, onClick } }: Props)
       aria-label={getTitle(t, step, index)}
     >
       <header>
-        <IconBox>{getTypeIcon(step.type)}</IconBox>
+        <Icon {...getTypeIcon(step.type)} />
         <Text className="step-index">{getTitle(t, step, index)}</Text>
         {getStatusIcon(step.status)}
       </header>
@@ -36,7 +36,9 @@ export const NodeStep = ({ data: { step, index, nextStatus, onClick } }: Props)
         </Text>
         {!!step.attempts[0].tools?.length && <StackedBadge
           label={t.tools}
-          images={step.attempts[0].tools?.slice(0, 3).map(tool => ({ key: tool.id, name: tool.name, url: tool.image, icon: <Cog /> }))}
+          images={step.attempts[0].tools?.slice(0, 3).map(
+            tool => ({ key: tool.id, name: tool.name, url: tool.image, icon: <Icon icon="Cog" /> }),
+          )}
         />}
       </div>}
       <HandleGroup renderSource={step.type !== 'answer'} renderTarget={step.type !== 'planning'} />

package/src/views/Steps/StepModal.tsx

@@ -1,6 +1,4 @@
-import { Flex, Text } from '@citric/core'
-import { ChevronLeft, ChevronRight } from '@citric/icons'
-import { Badge, IconButton } from '@citric/ui'
+import { Badge, IconButton, Row, Text } from '@stack-spot/citric-react'
 import { theme } from '@stack-spot/portal-theme'
 import { useMemo, useState } from 'react'
 import { styled } from 'styled-components'
@@ -131,18 +129,18 @@ export const StepModal = ({ message, stepId, onClose }: Props) => {
     <div className="tool" key={tool.id}>
       <ToolBadge name={tool.name} duration={tool.duration} image={tool.image} description={tool.description} />
       {tool.input && <>
-        <Text appearance="microtext1" colorScheme="light.700">{t.input}:</Text>
+        <Text appearance="microtext1" color="light.700">{t.input}:</Text>
         <Code language="json" className="tool-input" showLineNumbers={false} showActionBar>{tool.input}</Code>
       </>}
       {tool.output && <>
-        <Text appearance="microtext1" colorScheme="light.700">{t.response}:</Text>
+        <Text appearance="microtext1" color="light.700">{t.response}:</Text>
         <Code language="json" className="tool-input" showLineNumbers={false} showActionBar>{tool.output}</Code>
       </>}
     </div>
   )) : undefined
 
   const title = (
-    <Flex flex={1} justifyContent="space-between" alignItems="center">
+    <Row flex={1} justifyContent="space-between">
       <Text appearance="h6">{getTitle(t, step, stepIndex)}</Text>
       <ExecutionBox>
         <Text className="time" appearance="microtext1">
@@ -153,28 +151,26 @@ export const StepModal = ({ message, stepId, onClose }: Props) => {
         {step?.type === 'step' && step.attempts.length > 1 && <div className="navigator">
           {attempt > 0 && (
             <IconButton
+              icon="ChevronLeft"
               size="xs"
               title={t.previousAttempt}
               aria-label={t.previousAttempt}
               onClick={() => setAttempt(attempt - 1)}
-            >
-              <ChevronLeft />
-            </IconButton>
+            />
           )}
           <Text appearance="microtext1">{attempt + 1}/{step.attempts.length}</Text>
           {attempt < step.attempts.length - 1 && (
             <IconButton
+              icon="ChevronRight"
               size="xs"
               title={t.nextAttempt}
               aria-label={t.nextAttempt}
               onClick={() => setAttempt(attempt + 1)}
-            >
-              <ChevronRight />
-            </IconButton>
+            />
           )}
         </div>}
       </ExecutionBox>
-    </Flex>
+    </Row>
   )
 
   return (
@@ -184,18 +180,18 @@ export const StepModal = ({ message, stepId, onClose }: Props) => {
       </StyledSection>}
 
       {step?.type === 'planning' && <StyledSection style={{ alignItems: 'stretch' }}>
-        <Badge appearance="square" palette="blue" style={{ alignSelf: 'start' }}>Prompt</Badge>
+        <Badge appearance="square" colorPalette="blue" style={{ alignSelf: 'start' }}>Prompt</Badge>
         <Text>{step.goal}</Text>
         <ul className="steps">
           {entry.steps?.filter(s => s.type === 'step').map((s, index) => (
             <li key={index}>
-              <Flex mb={2}>
+              <Row mb={2}>
                 <Text>{t.step} {index + 1}: <span className="step-description">{s.input}</span></Text>
-              </Flex>
+              </Row>
               {!!s.attempts[0].tools?.length && <ul className="side-by-side-tools">
                 {s.attempts[0].tools.map((tool) => (
                   <li key={tool.id}>
-                    <ToolBadge name={tool.name} image={tool.image} appearance="round" />
+                    <ToolBadge name={tool.name} image={tool.image} />
                   </li>
                 ))}
               </ul>}
@@ -205,7 +201,7 @@ export const StepModal = ({ message, stepId, onClose }: Props) => {
       </StyledSection>}
       
       {step?.type === 'step' && step?.input && <StyledSection>
-        <Badge appearance="square" palette="blue">Prompt</Badge>
+        <Badge appearance="square" colorPalette="blue">Prompt</Badge>
         <Text>{step.input}</Text>
       </StyledSection>}
       {!!tools?.length && <StyledSection>{tools}</StyledSection>}

package/src/views/Steps/index.tsx

@@ -1,6 +1,5 @@
-import { Flex } from '@citric/core'
-import { LoadingCircular } from '@citric/ui'
-import { lazy, Suspense, useEffect } from 'react'
+import { FallbackBoundary } from '@stack-spot/citric-react'
+import { lazy, useEffect } from 'react'
 import { useWidget, useWidgetState } from '../../context/hooks'
 import { useRightPanel } from '../../right-panel/hooks'
 import { useStepsDictionary } from './dictionary'
@@ -19,9 +18,9 @@ export const Steps = () => {
 
   useEffect(() => {
     if (panel === 'steps' && message) open(
-      <Suspense fallback={<Flex alignItems="center" justifyContent="center" flex={1}><LoadingCircular /></Flex>}>
+      <FallbackBoundary>
         <LazyStepsPanel key={message.messageId} chatId={message.chatId} messageId={message.messageId} />
-      </Suspense>,
+      </FallbackBoundary>,
       {
         title: t.steps,
         description: t.stepsPanelDescription,

package/src/views/Steps/utils.tsx

@@ -1,21 +1,21 @@
-import { IconBox } from '@citric/core'
-import { CheckCircleFill, ListUnordered, PlayFill, TimesCircleFill } from '@citric/icons'
-import { LoadingCircular } from '@citric/ui'
+import { Icon, WithIcon } from '@stack-spot/citric-icons'
+import { ProgressCircular } from '@stack-spot/citric-react'
 import { ChatStep } from '@stack-spot/portal-network'
+import { theme } from '@stack-spot/portal-theme'
 
 export function getStatusIcon(status: ChatStep['status']) {
   switch (status) {
-    case 'success': return <IconBox colorIcon="success.500"><CheckCircleFill /></IconBox>
-    case 'error': return <IconBox colorIcon="danger.500"><TimesCircleFill /></IconBox>
-    case 'running': return <LoadingCircular colorScheme="inverse" size="xs" />
+    case 'success': return <Icon group="fill" icon="CheckCircle" style={{ color: theme.color.success[500] }} />
+    case 'error': return <Icon group="fill" icon="TimesCircle" style={{ color: theme.color.danger[500] }} />
+    case 'running': return <ProgressCircular colorScheme="inverse" size="xs" />
     default: return null
   }
 }
 
-export function getTypeIcon(type: ChatStep['type']) {
+export function getTypeIcon(type: ChatStep['type']): WithIcon {
   switch (type) {
-    case 'planning': return <ListUnordered />
-    default: return <PlayFill />
+    case 'planning': return { group: 'outline', icon: 'ListUnordered' }
+    default: return { group: 'fill', icon: 'Play' }
   }
 }
 

package/src/views/Tools.tsx

@@ -57,7 +57,6 @@ const ToolsPanel = () => {
                 name={tool.name || tool.id}
                 image={tool.image ?? ''}
                 description={tool.description ?? ''}
-                backgroundColor="light.500"
               />
             </li>
           ),

package/src/views/Workspaces/WorkspacesTab.tsx

@@ -1,12 +1,10 @@
-import { Button, Flex, IconBox, Image, Text } from '@citric/core'
-import { Agent, KnowledgeSource, Spaces, Stack } from '@citric/icons'
-import { Avatar } from '@citric/ui'
+import { Icon } from '@stack-spot/citric-icons'
+import { AsyncContent, Button, Center, Column, ImageBox, ImageWithFallback, Text } from '@stack-spot/citric-react'
 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 { Loading } from '../../components/FallbackBoundary/Loading'
 import { ListResource } from '../../components/ListResource'
 import { CardSpace, WorkspaceTabNavigator } from '../../components/WorkspaceTabNavigator'
 import { ChatProperties } from '../../state/ChatState'
@@ -16,17 +14,15 @@ import { StacksTab } from '../Stacks'
 
 const SpaceCard = ({ workspaceId }: { workspaceId: string }) => {
   const workspace = workspaceAiClient.workspaceAi.useQuery({ id: workspaceId })
-  return <Flex flexDirection="column" sx={{ gap: '8px' }}>
-    <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> <Spaces /> </IconBox>}
-        </Avatar>
-        <Text appearance="body2" weight="medium">{workspace.name} </Text>
-      </Flex>
-      <Text colorScheme="light.700">{workspace.description}</Text>
-    </Flex>
-  </Flex>
+  return <Column gap="4px">
+    <Center gap="8px">
+      <ImageBox size="sm" appearance="square">
+        <ImageWithFallback src={workspace.logo ?? ''} fallback={<Icon icon="Spaces" />} />
+      </ImageBox>
+      <Text appearance="body2" weight="medium">{workspace.name}</Text>
+    </Center>
+    <Text color="light.700">{workspace.description}</Text>
+  </Column>
 }
 
 export interface TabProps {
@@ -52,9 +48,9 @@ export const WorkspaceResources = ({ workspaceId, allKS, agent, stack }: Omit<Ta
   const { navigate } = useComponentNavigation<typeof workspaceTabComponents>()
   const [isPending, startTransition] = useTransition()
   const resourceTypes: WorkspaceResource[] = [
-    { id: 'agents', resourceType: 'agent', displayName: 'Agents', workspaceId, icon: <Agent /> },
-    { id: 'ks', resourceType: 'ks', displayName: 'Knowledge Sources', workspaceId, icon: <KnowledgeSource /> },
-    { id: 'stack', resourceType: 'stack', displayName: 'Stacks', workspaceId, icon: <Stack /> },
+    { id: 'agents', resourceType: 'agent', displayName: 'Agents', workspaceId, icon: <Icon icon="Agent" /> },
+    { id: 'ks', resourceType: 'ks', displayName: 'Knowledge Sources', workspaceId, icon: <Icon icon="KnowledgeSource" /> },
+    { id: 'stack', resourceType: 'stack', displayName: 'Stacks', workspaceId, icon: <Icon icon="Stack" /> },
   ]
 
   const handleNavigate = (resource: WorkspaceResource) => {
@@ -72,14 +68,14 @@ export const WorkspaceResources = ({ workspaceId, allKS, agent, stack }: Omit<Ta
 
   return (<>
     {workspaceId && <SpaceCard workspaceId={workspaceId} />}
-    {isPending ? <Loading /> :
+    {<AsyncContent loading={isPending}>
       <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' }}
       />
-    }
+    </AsyncContent>}
   </>
   )
 }
@@ -105,7 +101,7 @@ export function WorkspacesTab({ visibility, allKS, agent, stack, onSubmit }: Tab
       getNavigateParam={buildNavigateParams}
       visibility={visibility}
     />
-    <Button className="workspace-submit" onClick={onSubmit} >{t.apply}</Button>
+    <Button className="workspace-submit" onClick={onSubmit}>{t.apply}</Button>
   </>
   )
 }

package/src/views/Workspaces/index.tsx

@@ -48,11 +48,13 @@ const WorkspacesPanel = () => {
 
   return <RightPanelTabs key={chat.id} tabs={[
     {
-      title: t.favorites,
+      key: 'favorites',
+      label: t.favorites,
       content: <WorkspacesTab key="favorite" visibility="favorite" allKS={allKS} agent={agent} stack={stack} onSubmit={onSubmit} />,
     },
     {
-      title: t.all,
+      key: 'all',
+      label: t.all,
       content: <WorkspacesTab key="all" visibility="all" allKS={allKS} agent={agent} stack={stack} onSubmit={onSubmit} />,
     },
   ]}