@stack-spot/ai-chat-widget 1.36.1-betacitric.1 → 1.36.1

package/src/views/Stacks.tsx

@@ -1,12 +1,15 @@
-import { Button, Tab } from '@stack-spot/citric-react'
+import { Button } from '@citric/core'
+import { Search } from '@citric/icons'
 import { Placeholder } from '@stack-spot/portal-components/Placeholder'
 import { aiClient, workspaceAiClient } from '@stack-spot/portal-network'
-import { VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
+import { GetAiStackResponse, 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 { useEffect, useMemo, useRef, useState } from 'react'
+import { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { ButtonFavorite } from '../components/ButtonFavorite'
 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'
@@ -16,6 +19,8 @@ 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.
  */
@@ -49,12 +54,12 @@ const StacksPanel =  () => {
     stack.current = chat.get('stack')
   }, [chat])
 
-  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 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 defaultScopes: Scope[] = ['favorite', 'personal', 'shared', 'workspace', 'account']
 
@@ -65,8 +70,8 @@ const StacksPanel =  () => {
     : rawScopes
 
   const tabs = scopesToRender
-    .map(scope => scope in allTabsMap ? { key: scope, ...allTabsMap[scope] } : undefined)
-    .filter(Boolean) as Tab[]
+    .map(scope => allTabsMap[scope])
+    .filter(Boolean) as TabElement[]
 
   return (isGroupResourcesByScope ? (
     <RightPanelTabs key={chat.id} tabs={tabs} />
@@ -86,10 +91,11 @@ 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 {
@@ -140,40 +146,57 @@ 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 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])
+  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], 
+  )
 
   function submit() {
-    if (stack.current) chat.set('stack', stack.current)
+    if (value) chat.set('stack', { id: value.id, label: value.name })
     close()
   }
 
+  const onChange = useCallback((newValue: GetAiStackResponse) => {
+    setValue(newValue)
+    stack.current = { ...newValue, label: newValue.name }
+  }, [])
+
   return (
     <>
       <div className="content">
-        <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)
-          }}
-        />
+        <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} />}
       </div>
-      {!!stacks.length && showSubmitButton && <Button onClick={submit} disabled={!submitEnabled}>{t.apply}</Button>}
+      {!!filtered.length && showSubmitButton && <Button onClick={submit} disabled={!value}>{t.apply}</Button>}
     </>
   )
 }

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

@@ -1,5 +1,5 @@
-import { Icon } from '@stack-spot/citric-icons'
-import { Text } from '@stack-spot/citric-react'
+import { IconBox, Text } from '@citric/core'
+import { Cog } from '@citric/icons'
 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>
-        <Icon {...getTypeIcon(step.type)} />
+        <IconBox>{getTypeIcon(step.type)}</IconBox>
         <Text className="step-index">{getTitle(t, step, index)}</Text>
         {getStatusIcon(step.status)}
       </header>
@@ -36,9 +36,7 @@ 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: <Icon icon="Cog" /> }),
-          )}
+          images={step.attempts[0].tools?.slice(0, 3).map(tool => ({ key: tool.id, name: tool.name, url: tool.image, icon: <Cog /> }))}
         />}
       </div>}
       <HandleGroup renderSource={step.type !== 'answer'} renderTarget={step.type !== 'planning'} />

package/src/views/Steps/StepModal.tsx

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

package/src/views/Steps/index.tsx

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

package/src/views/Steps/utils.tsx

@@ -1,21 +1,21 @@
-import { Icon, WithIcon } from '@stack-spot/citric-icons'
-import { ProgressCircular } from '@stack-spot/citric-react'
+import { IconBox } from '@citric/core'
+import { CheckCircleFill, ListUnordered, PlayFill, TimesCircleFill } from '@citric/icons'
+import { LoadingCircular } from '@citric/ui'
 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 <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" />
+    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" />
     default: return null
   }
 }
 
-export function getTypeIcon(type: ChatStep['type']): WithIcon {
+export function getTypeIcon(type: ChatStep['type']) {
   switch (type) {
-    case 'planning': return { group: 'outline', icon: 'ListUnordered' }
-    default: return { group: 'fill', icon: 'Play' }
+    case 'planning': return <ListUnordered />
+    default: return <PlayFill />
   }
 }
 

package/src/views/Tools.tsx

@@ -42,19 +42,26 @@ const ToolsPanel = () => {
   }, [messageId])
 
   const [toolKits] = agentToolsClient.tools.useStatefulQuery({}, { enabled: !!message?.agent?.id })
-  const tools = useMemo(() => message?.tools?.map(id => toolById(id, toolKits) ?? { id }), [messageId, toolKits])
-
-  return !!tools?.length && (
+  const [agent] = agentToolsClient.agent.useStatefulQuery({ agentId: message?.agent?.id || '' },
+    { enabled: !!message?.agent?.id })
+  const tools = useMemo(() => message?.tools?.map(id => toolById(id, toolKits)), [messageId, toolKits])
+  const customTools = useMemo(() => message?.tools?.map(id => toolById(id, agent?.toolkits?.custom_toolkits)),
+    [messageId, agent?.toolkits?.custom_toolkits])
+  return !!(tools?.length || customTools?.length) && (
     <ToolList>
-      {tools.map((tool) => (
-        <li key={tool.id}>
-          <ToolBadge
-            name={tool.name || tool.id}
-            image={tool.image}
-            description={tool.description}
-          />
-        </li>
-      ))}
+      {[...(tools || []), ...(customTools || [])].map(
+        (tool) =>
+          tool && (
+            <li key={tool.id}>
+              <ToolBadge
+                name={tool.name || tool.id}
+                image={tool.image ?? ''}
+                description={tool.description ?? ''}
+                backgroundColor="light.500"
+              />
+            </li>
+          ),
+      )}
     </ToolList>
   )
 }

package/src/views/Workspaces/WorkspacesTab.tsx

@@ -1,10 +1,12 @@
-import { Icon } from '@stack-spot/citric-icons'
-import { AsyncContent, Button, Center, Column, ImageBox, ImageWithFallback, Text } from '@stack-spot/citric-react'
+import { Button, Flex, IconBox, Image, Text } from '@citric/core'
+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 { Loading } from '../../components/FallbackBoundary/Loading'
 import { ListResource } from '../../components/ListResource'
 import { CardSpace, WorkspaceTabNavigator } from '../../components/WorkspaceTabNavigator'
 import { ChatProperties } from '../../state/ChatState'
@@ -14,15 +16,17 @@ import { StacksTab } from '../Stacks'
 
 const SpaceCard = ({ workspaceId }: { workspaceId: string }) => {
   const workspace = workspaceAiClient.workspaceAi.useQuery({ id: workspaceId })
-  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>
+  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>
 }
 
 export interface TabProps {
@@ -48,9 +52,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: <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" /> },
+    { 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 /> },
   ]
 
   const handleNavigate = (resource: WorkspaceResource) => {
@@ -68,14 +72,14 @@ export const WorkspaceResources = ({ workspaceId, allKS, agent, stack }: Omit<Ta
 
   return (<>
     {workspaceId && <SpaceCard workspaceId={workspaceId} />}
-    {<AsyncContent loading={isPending}>
+    {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' }}
       />
-    </AsyncContent>}
+    }
   </>
   )
 }
@@ -101,7 +105,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,13 +48,11 @@ const WorkspacesPanel = () => {
 
   return <RightPanelTabs key={chat.id} tabs={[
     {
-      key: 'favorites',
-      label: t.favorites,
+      title: t.favorites,
       content: <WorkspacesTab key="favorite" visibility="favorite" allKS={allKS} agent={agent} stack={stack} onSubmit={onSubmit} />,
     },
     {
-      key: 'all',
-      label: t.all,
+      title: t.all,
       content: <WorkspacesTab key="all" visibility="all" allKS={allKS} agent={agent} stack={stack} onSubmit={onSubmit} />,
     },
   ]}