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

package/src/views/Home/BuiltInAgent.tsx

@@ -1,5 +1,4 @@
-import { Text } from '@citric/core'
-import { FaceSmile, KnowledgeSource, QuickCommand, StackSpot } from '@citric/icons'
+import { Row, Text } from '@stack-spot/citric-react'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { QuickStartButton } from '../../components/QuickStartButton'
 import { useCurrentChat } from '../../context/hooks'
@@ -22,28 +21,28 @@ export const BuiltInAgent = ({ username }: HomeProps) => {
     <HomeBox className="home-page">
       <Text appearance="h2" className="title">{t.hello}, {username}</Text>
       <Text appearance="h3" className="subtitle">{t.subtitle}</Text>
-      <div className="shortcuts">
+      <Row className="shortcuts">
         <QuickStartButton
           label={t['question.meta']}
           onClick={() => send(t['question.meta'])}
-          icon={<StackSpot />}
+          icon="StackSpot"
         />
         <QuickStartButton
           label={t['question.ks']}
           onClick={() => send(t['question.ks'])}
-          icon={<KnowledgeSource />}
+          icon="KnowledgeSource"
         />
         <QuickStartButton
           label={t['question.agents']}
           onClick={() => send(t['question.agents'])}
-          icon={<FaceSmile />}
+          icon="FaceSmile"
         />
         <QuickStartButton
           label={t['question.qc']}
           onClick={() => send(t['question.qc'])}
-          icon={<QuickCommand />}
+          icon="QuickCommand"
         />
-      </div>
+      </Row>
     </HomeBox>
   )
 }

package/src/views/Home/CustomAgent.tsx

@@ -1,5 +1,5 @@
-import { IconBox, Text } from '@citric/core'
-import { Agent } from '@citric/icons'
+import { Icon } from '@stack-spot/citric-icons'
+import { Text } from '@stack-spot/citric-react'
 import { agentToolsClient } from '@stack-spot/portal-network'
 import { useMemo } from 'react'
 import { QuickStartButton } from '../../components/QuickStartButton'
@@ -28,7 +28,7 @@ export const CustomAgent = () => {
 
   return (
     <HomeBox className="home-page custom-agent">
-      {image ? <img src={image} className="avatar" /> : <IconBox className="avatar"><Agent /></IconBox>}
+      {image ? <img src={image} className="avatar" /> : <Icon icon="Agent" className="avatar" />}
       <Text appearance="h3">{label}</Text>
       <div className="shortcuts">{suggestions?.length ? suggestions : null}</div>
     </HomeBox>

package/src/views/Home/index.tsx

@@ -1,9 +1,9 @@
+import { FallbackBoundary } from '@stack-spot/citric-react'
 import { FadingOverflow } from '@stack-spot/portal-components/FadingOverflow'
 import { agentToolsClient } from '@stack-spot/portal-network'
 import { styled } from 'styled-components'
 import { AgentCard } from '../../components/AgentCard'
 import { AgentCardCreate } from '../../components/AgentCard/AgentCardCreate'
-import { FallbackBoundary } from '../../components/FallbackBoundary'
 import { useCurrentChatState } from '../../context/hooks'
 import { BuiltInAgent } from './BuiltInAgent'
 import { CustomAgent } from './CustomAgent'
@@ -14,11 +14,11 @@ const AgentList = styled.ul`
   margin: 0;
   padding: 0;
   display: flex;
-  align-items: center;
   gap: 14px;
   
   li {
     flex-shrink: 0;
+    display: flex;
   }
 `
 

package/src/views/Home/styled.ts

@@ -21,35 +21,34 @@ export const HomeBox = styled.div`
   }
 
   .shortcuts {
-    li {
-      flex: 1;
-    }
-      button {
-        margin-left: 0;
+    flex-wrap: wrap;
+    button {
+      margin-left: 0;
+      margin-right: 8px;
+      border-radius: 50px;
+      padding-inline: 16px;
+      padding-block: 8px;
+      font-weight: 400;
+      line-height: normal;
+      border: none;
+      max-width: 30vw;
+      margin-bottom: 8px;
+      i {
+        width: 16px;
+        height: 16px;
         margin-right: 8px;
-        border-radius: 50px;
-        padding-inline: 16px;
-        padding-block: 8px;
-        font-weight: 400;
-        line-height: normal;
-        border: none;
-        max-width: 30vw;
-        margin-bottom: 8px;
-        i {
-          width: 16px;
-          height: 16px;
-          margin-right: 8px;
-        }
-        &:hover, &:visited, &:active, &:focus {
-          background-color: ${theme.color.light[600]}
-        }
+      }
+      &:hover, &:visited, &:active, &:focus {
+        background-color: ${theme.color.light[600]} !important;
+      }
     }
   }
 
-  .avatar, .avatar svg {
+  .avatar {
     width: 74px;
     height: 74px;
     border-radius: 50%;
+    font-size: 74px;
   }
 
   &.custom-agent {

package/src/views/KSDocument.tsx

@@ -1,10 +1,9 @@
-import { Flex, IconBox, Text } from '@citric/core'
-import { Score } from '@citric/icons'
+import { Icon } from '@stack-spot/citric-icons'
+import { FallbackBoundary, Row, Text } from '@stack-spot/citric-react'
 import { aiClient } from '@stack-spot/portal-network'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useEffect } from 'react'
 import { Code } from '../components/Code'
-import { FallbackBoundary } from '../components/FallbackBoundary'
 import { useWidget, useWidgetState } from '../context/hooks'
 import { useRightPanel } from '../right-panel/hooks'
 import { extractCodeFromKSDocument } from '../utils/knowledge-source'
@@ -24,13 +23,13 @@ export const KSDocument = () => {
       <FallbackBoundary><KSDocumentPanel documentId={ks.documentId} slug={ks.slug} /></FallbackBoundary>,
       {
         title: (
-          <Flex flexDirection="row" alignItems="center" flex="1">
+          <Row flex={1}>
             <Text appearance="h5" style={{ flex: 1 }}>{ks.name}</Text>
-            <Flex flexDirection="row" alignItems="center" style={{ gap: '5px' }} title="Score" aria-label="Score">
-              <IconBox><Score /></IconBox>
+            <Row gap="5px" title="Score" aria-label="Score">
+              <Icon icon="Score" />
               <Text>{ks.score.toFixed(2)}</Text>
-            </Flex>
-          </Flex>
+            </Row>
+          </Row>
         ),
         description: t.description,
         onClose: () => widget.set('panel', undefined),

package/src/views/KnowledgeSources.tsx

@@ -1,16 +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, dataIntegrationClient, workspaceAiClient } from '@stack-spot/portal-network'
-import { KnowledgeSourceItemResponse, 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 { difference, uniqBy } from 'lodash'
-import React, { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { ButtonFavorite } from '../components/ButtonFavorite'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import { NavigationComponent } from '../components/ComponentNavigator'
 import { DescribedCheckboxGroup } from '../components/form/DescribedCheckboxGroup'
-import { IconInput } from '../components/IconInput'
 import { RightPanelContentList } from '../components/RightPanelContentList'
 import { RightPanelTabs } from '../components/RightPanelTabs'
 import { WorkspaceTabNavigator } from '../components/WorkspaceTabNavigator'
@@ -28,8 +24,6 @@ export interface TabProps {
   onSubmit?: () => void,
 }
 
-type TabElement = { title: string, content: ReactElement }
-
 export const KnowledgeSources = () => {
   const t = useTranslate(dictionary)
   const panel = useWidgetState('panel')
@@ -69,15 +63,15 @@ const KnowledgeSourcesPanel = () => {
     allKS.current = chat.get('knowledgeSources') ?? []
   }, [chat])
 
-  const allTabsMap: Partial<Record<Scope, TabElement>> = {
-    favorite: { title: t.favorites, 
+  const allTabsMap: Partial<Record<Scope, Omit<Tab, 'key'>>> = {
+    favorite: { label: t.favorites, 
       content: <KnowledgeSourcesTab key="favorite" visibility="favorite" allKS={allKS} onSubmit={onSubmit} /> },
-    personal: { title: t.personal, 
+    personal: { label: t.personal, 
       content: <KnowledgeSourcesTab key="personal" visibility="personal" allKS={allKS} onSubmit={onSubmit} /> },
-    shared: { title: t.shared, content: <KnowledgeSourcesTab key="shared" visibility="shared" allKS={allKS} onSubmit={onSubmit} /> },
-    workspace: { title: t.spots,
+    shared: { label: t.shared, content: <KnowledgeSourcesTab key="shared" visibility="shared" allKS={allKS} onSubmit={onSubmit} /> },
+    workspace: { label: t.spots,
       content: <KnowledgeSourcesTabWorkspace key="workspace" visibility="workspace" allKS={allKS} onSubmit={onSubmit} /> },
-    account: { title: t.account, content: <KnowledgeSourcesTab key="account" visibility="account" allKS={allKS} onSubmit={onSubmit} /> },
+    account: { label: t.account, content: <KnowledgeSourcesTab key="account" visibility="account" allKS={allKS} onSubmit={onSubmit} /> },
   }
 
   const defaultScopes: Scope[] = ['favorite', 'personal', 'shared', 'workspace', 'account']
@@ -89,8 +83,8 @@ const KnowledgeSourcesPanel = () => {
     : 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} />
@@ -101,14 +95,15 @@ const KnowledgeSourcesPanel = () => {
 
 export const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit, workspaceId, showSubmitButton = true }: TabProps) => {
   const t = useTranslate(dictionary)
-  const [filter, setFilter] = useState('')
-
   const knowledgeSources = workspaceId
     ? workspaceAiClient.getKSFromWorkspaceAi.useQuery({ workspaceId })
     : aiClient.knowledgeSources.useQuery({
       visibility, order: 'a-to-z', types: ['snippet', 'api', 'event', 'custom'],
     })
-
+  const initialValue = useMemo(() => {
+    const currentlySelected = allKS.current?.map(ks => ks.id)
+    return knowledgeSources.filter(ks => currentlySelected?.includes(ks.slug))
+  }, [])
   const listFavorites = dataIntegrationClient.knowledgeSources.useQuery({ visibility: 'favorite' })
   const [addFavorite, pendingAddFav] = dataIntegrationClient.addFavoriteKnowledgeSource.useMutation()
   const [removeFavorite, pendingRemoveFav] = dataIntegrationClient.removeFavoriteKnowledgeSource.useMutation()
@@ -165,56 +160,19 @@ export const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit, workspaceId,
     } 
   })
 
-  const [value, setValue] = useState<KnowledgeSourceItemResponse[]>((() => {
-    const currentlySelected = allKS.current?.map(ks => ks.id)
-    return knowledgeSources.filter(ks => currentlySelected?.includes(ks.slug))
-  })())
-  const filtered = useMemo(
-    () => filter 
-      // Recreate the list so that the favorites list is taken into account
-      ? knowledgeSources.filter(ks => value.includes(ks) || ks.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
-      : [...knowledgeSources]
-    , [knowledgeSources, filter, value, listFavorites],
-  )
-
-  const onChange = useCallback((newValue: KnowledgeSourceItemResponse[]) => {
-    setValue((current) => {
-      const added = difference(newValue, current)
-      const removed = difference(current, newValue)
-      allKS.current = allKS.current?.filter(ks => !removed.some(r => r.slug === ks.id)) ?? []
-      allKS.current = uniqBy([...allKS.current, ...added.map(ks => ({ id: ks.slug, label: ks.name }))], 'id')
-      return newValue
-    })
-  }, [])
-
   return (
     <>
       <div className="content">
-        <IconInput icon={<Search />} value={filter} onChange={setFilter} className="search" />
-        {!!filtered.length && <DescribedCheckboxGroup
-          options={filtered}
-          renderAfterElement={({ slug }) => (
-            <ButtonFavorite 
-              favorite={{ 
-                idOrSlug: slug, listFavorites, onAddFavorite, onRemoveFavorite }} />
-          )}
-          keygen={ks => ks.id}
-          value={value}
-          onChange={onChange}
-          renderLabel={ks => ks.name}
-          renderDescription={ks => ks.description}
-          optionClassName={ks => (filter && !ks.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()) && value.includes(ks))
-            ? 'filtered-out'
-            : ''
-          }
-          className="option-list"
-        />}
-        {!!filtered.length && !filtered.length && (
-          <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />
-        )}
-        {!filtered.length && <Placeholder title={t.noData} description={t.noDataDescription} className="no-data-placeholder" />}
+        <DescribedCheckboxGroup
+          options={knowledgeSources}
+          initialValue={initialValue}
+          globalSelection={allKS}
+          data={ks => ({ idOrSlug: ks.slug, description: ks.description, name: ks.name, listFavorites, onAddFavorite, onRemoveFavorite })}
+          emptyResults={<Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />}
+          emptyDataset={<Placeholder title={t.noData} description={t.noDataDescription} className="no-data-placeholder" />}
+        />
       </div>
-      {!!filtered.length && showSubmitButton && <Button onClick={onSubmit}>{t.apply}</Button>}
+      {!!knowledgeSources.length && showSubmitButton && <Button onClick={onSubmit}>{t.apply}</Button>}
     </>
   )
 }

package/src/views/MessageInput/AgentSelector.tsx

@@ -1,5 +1,5 @@
-import { Flex, IconBox, Image } from '@citric/core'
-import { Agent } from '@citric/icons'
+import { Icon } from '@stack-spot/citric-icons'
+import { IconBox, Row, Text } from '@stack-spot/citric-react'
 import { AgentResponseWithBuiltIn, agentToolsClient, workspaceAiClient } from '@stack-spot/portal-network'
 import { useCallback } from 'react'
 import { Selector } from '../../components/Selector'
@@ -10,15 +10,17 @@ import { useAgentFavorites } from '../Agents/useAgentFavorites'
 type AgentWithSpaceName = AgentResponseWithBuiltIn
 
 const AgentItem = ({ avatar, name, spaceName }: AgentWithSpaceName) => {
-  const avatarComponent = avatar ? <Image width="32" height="32" radius="full" src={avatar} /> : <IconBox size="md"><Agent /></IconBox>
+  const avatarComponent = avatar
+    ? <img style={{ width: '32px', height: '32px', borderRadius: '50%' }} src={avatar} />
+    : <IconBox size="md" icon="Agent" style={{ backgroundColor: 'transparent' }} />
 
-  return <Flex flexWrap="nowrap" alignItems="center" sx={{ gap: '8px' }}>
+  return <Row gap="8px" style={{ flexWrap: 'nowrap' }}>
     {avatarComponent}
     <div>
-      <p className="selector-description">{spaceName}</p>
-      <p className="selector-title">{name}</p>
+      <Text className="selector-description">{spaceName}</Text>
+      <Text className="selector-title">{name}</Text>
     </div>
-  </Flex>
+  </Row>
 }
 
 export const AgentSelector = ({ inputRef, isTrial }: {
@@ -72,7 +74,7 @@ export const AgentSelector = ({ inputRef, isTrial }: {
     selectorConfig={{
       resourceName: 'Agent',
       shortcut: '@',
-      icon: <Agent />,
+      icon: <Icon icon="Agent" />,
       regex: agentRegex,
       urlBuilder: (agent) => `/agents/${agent?.id}`,
       searchProp: 'name',

package/src/views/MessageInput/ButtonAgent.tsx

@@ -1,6 +1,5 @@
-import { Flex, IconBox } from '@citric/core'
-import { Agent, TimesMini } from '@citric/icons'
-import { IconButton, Tooltip } from '@citric/ui'
+import { Icon } from '@stack-spot/citric-icons'
+import { Center, ImageButton, ImageWithFallback, Tooltip } from '@stack-spot/citric-react'
 import { MiniLogo } from '@stack-spot/portal-components/svg'
 import { agentToolsClient } from '@stack-spot/portal-network'
 import { useEffect } from 'react'
@@ -41,17 +40,30 @@ export const ButtonAgent = () => {
     <div className="button-group">
       {features.agent && (
         <div className="group-agent">
-          <IconButton aria-label={t.agent} title={t.agent} className="agent" onClick={() => widget.set('panel', 'agent')}>
+          <ImageButton
+            aria-label={t.agent}
+            title={t.agent}
+            className="agent"
+            onClick={() => widget.set('panel', 'agent')}
+          >
             {agentDefault?.avatar ? <img src={agentDefault.avatar} className="image" /> : <MiniLogo />}
-          </IconButton>
+          </ImageButton>
           {agent?.id && !isAgentDefault() &&
-            <Tooltip text={t.remove} >
-              <IconButton aria-label={t.remove} className="agent agent-selected" onClick={setAgentDefault}>
-                {agent?.image ? <img src={agent.image} className="image" /> : <IconBox className="image" size="xs"><Agent /></IconBox>}
-                <Flex className="icon-remove" alignContent="center" justifyContent="center">
-                  <TimesMini />
-                </Flex>
-              </IconButton>
+            <Tooltip content={t.remove} >
+              <ImageButton
+                aria-label={t.remove}
+                className="agent agent-selected"
+                onClick={setAgentDefault}
+              >
+                <ImageWithFallback
+                  src={agent.image ?? ''}
+                  className="image"
+                  fallback={<Icon className="image" size="xs" icon="Agent" />}
+                />
+                <Center className="icon-remove">
+                  <Icon icon="TimesMini" />
+                </Center>
+              </ImageButton>
             </Tooltip>
           }
         </div>

package/src/views/MessageInput/ButtonBar.tsx

@@ -1,6 +1,4 @@
-import { Flex } from '@citric/core'
-import { ArrowUp, Code, Stop } from '@citric/icons'
-import { IconButton } from '@citric/ui'
+import { IconButton, Row } from '@stack-spot/citric-react'
 import { useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
 import { useMessageInputDictionary } from './dictionary'
 import { SelectContent } from './SelectContent'
@@ -25,27 +23,33 @@ export const ButtonBar = ({ onSend, isLoading }: SelectionBarProps) => {
 
   return (
     <SelectionBarWrapper className="button-group">
-      <Flex sx={{ gap: '4px' }}>
+      <Row center={false} gap="4px">
         <SelectContent />
         {features.editor && (
-          <IconButton color="light" appearance="square" aria-label={t.code} title={t.code} onClick={() => widget.set('panel', 'editor')}>
-            <Code />
-          </IconButton>
+          <IconButton icon="Code" appearance="square" aria-label={t.code} title={t.code} onClick={() => widget.set('panel', 'editor')} />
         )}
-      </Flex>
-      <Flex>
-        {isLoading ? (
-          <IconButton appearance="square" color="inverse" aria-label={t.cancel} 
-            onClick={() => chat.abort()} className="send" title={t.cancel}>
-            <Stop />
-          </IconButton>
-        ) : (
-          <IconButton appearance="square" color="inverse" aria-label={t.send} 
-            onClick={onSend} className="send" title={t.send}>
-            <ArrowUp />
-          </IconButton>
-        )}
-      </Flex>
+      </Row>
+      {isLoading ? (
+        <IconButton
+          icon="Stop"
+          appearance="square"
+          colorScheme="inverse"
+          aria-label={t.cancel}
+          onClick={() => chat.abort()}
+          className="send"
+          title={t.cancel}
+        />
+      ) : (
+        <IconButton
+          icon="ArrowUp"
+          appearance="square"
+          colorScheme="inverse"
+          aria-label={t.send}
+          onClick={onSend}
+          className="send"
+          title={t.send}
+        />
+      )}
     </SelectionBarWrapper>
   )
 }

package/src/views/MessageInput/ContextBar.tsx

@@ -1,7 +1,5 @@
-import { Text } from '@citric/core'
-import { TimesMini } from '@citric/icons'
-import { Badge, IconButton } from '@citric/ui'
 import { loader } from '@monaco-editor/react'
+import { Badge, IconButton, Text } from '@stack-spot/citric-react'
 import { ColorPaletteName, listToClass } from '@stack-spot/portal-theme'
 import { useCallback, useMemo } from 'react'
 import { FadingOverflow } from '../../components/FadingOverflow'
@@ -16,14 +14,17 @@ interface ContextBadgeProps {
 }
 
 const ContextBadge = ({ label, color, dismiss, onDismiss }: ContextBadgeProps) => (
-  <Badge appearance="square" palette={color} className="context-badge" 
-    afterElement={
-      onDismiss && 
-      <IconButton appearance="square" colorIcon={`${color}.800`} onClick={onDismiss} title={dismiss} aria-label={dismiss}>
-        <TimesMini />
-      </IconButton>
-    }>
+  <Badge appearance="square" colorPalette={color} className="context-badge">
     <Text nowrapEllipsis>{label}</Text>
+    {onDismiss && <IconButton
+      icon="TimesMini"
+      appearance="none"
+      onClick={onDismiss}
+      title={dismiss}
+      arial-label={dismiss}
+      style={{ padding: '2px 0 2px 2px' }}
+      colorPalette={color}
+    />}
   </Badge>
 )
 
@@ -74,10 +75,12 @@ export const ContextBar = () => {
       <div className="content">
         {shouldRenderRemoveAllButton && (
           <IconButton 
-            appearance="square" color="light" 
-            aria-label={t.removeConfig} title={t.removeConfig} onClick={removeAll}>
-            <TimesMini />
-          </IconButton>
+            icon="TimesMini"
+            aria-label={t.removeConfig}
+            title={t.removeConfig}
+            onClick={removeAll}
+            style={{ marginLeft: '8px' }}
+          />
         )}
         <FadingOverflow className="list-overflow" scroll="arrows" enableHorizontalScrollWithVerticalWheel>
           <ul>

package/src/views/MessageInput/QuickCommandSelector.tsx

@@ -1,4 +1,4 @@
-import { QuickCommand } from '@citric/icons'
+import { Icon } from '@stack-spot/citric-icons'
 import { aiClient, workspaceAiClient } from '@stack-spot/portal-network'
 import { QuickCommandResponse } from '@stack-spot/portal-network/api/ai'
 import { useCallback } from 'react'
@@ -113,7 +113,7 @@ export const QuickCommandSelector = ({ inputRef, isTrial }:
     selectorConfig={{
       resourceName: 'Quick Command',
       shortcut: '/',
-      icon: <QuickCommand />,
+      icon: <Icon icon="QuickCommand" />,
       searchProp: 'slug',
       urlBuilder: (qc) => `/quick-command/${qc?.slug}`,
       regex: quickCommandRegex,