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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.18.0-beta.0",
+  "version": "1.18.0-beta.2",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/WorkspaceTabNavigator.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, IconBox, Text } from '@citric/core'
+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'
@@ -12,7 +12,14 @@ import { ComponentNavigator, ComponentNavigatorProps, NavigationItem, Navigation
 import { IconInput } from './IconInput'
 import { ListGroup } from './ListGroup'
 
-export const CardSpace = ({ onClick, name, icon }: { onClick: VoidFunction, name: string, icon: React.ReactElement }) =>
+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}
@@ -24,13 +31,11 @@ export const CardSpace = ({ onClick, name, icon }: { onClick: VoidFunction, name
     p={3}
     sx={{ cursor: 'pointer' }}
   >
-    <Flex alignContent="center" alignItems="center" sx={{ gap: '8px' }} >
-      <Avatar size="xxs" appearance="square" sx={{ bg: 'light.600', r: 'xxs'  }}>
-        <IconBox>
-          {icon}
-        </IconBox>
+    <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>{name}</Text>
+      <Text appearance="body2">{name}</Text>
     </Flex>
     <IconButton><ArrowRight /></IconButton>
   </Flex>
@@ -85,17 +90,15 @@ const WorkspaceSourcesTab = ({ visibility, onClick }: WorkspaceSourcesTabProps)
   )
 
   return (
-    <>
-      <Box w={12}>
-        <IconInput icon={<Search />} value={filter} onChange={setFilter} className="search" />
-      </Box>
+    <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} icon={<Circle />} onClick={() => onClick(w)} />}
+          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 }} />}
@@ -109,7 +112,7 @@ const WorkspaceSourcesTab = ({ visibility, onClick }: WorkspaceSourcesTabProps)
       {!!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>
   )
 }
 
@@ -126,7 +129,6 @@ const WorkspaceHeader = <T extends NavigationMap, K extends keyof T>({ data }: {
   </Flex>
 }
 
-
 interface WorkspaceTabNavigatorProps {
   getNavigateParam: (workspace: WorkspaceResponse) => NavigationItem<NavigationMap, string>,
   visibility?: WorkspaceVisibilityLevelEnum,

package/src/views/Workspaces/WorkspacesTab.tsx

@@ -16,14 +16,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 alignItems="center" sx={{ gap: '4px' }}>
-      {workspace.logo
-        ? <Image src={workspace.logo} />
-        : <Avatar size="xxs" appearance="square" sx={{ bg: 'light.500' }}><IconBox><Circle /></IconBox></Avatar>}
-      <Text appearance="body2" weight="medium">{workspace.name} </Text>
+    <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>}
+        </Avatar>
+        <Text appearance="body2" weight="medium">{workspace.name} </Text>
+      </Flex>
+      <Text colorScheme="light.700">{workspace.description}</Text>
     </Flex>
-
-    <Text colorScheme="light.700">{workspace.description}</Text>
   </Flex>
 }