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

package/src/views/Agents/AgentsTab.tsx

@@ -1,21 +1,17 @@
-import { Button, IconBox, Text } from '@citric/core'
-import { Agent, Search } from '@citric/icons'
+import { Icon } from '@stack-spot/citric-icons'
+import { Button } from '@stack-spot/citric-react'
 import { Placeholder } from '@stack-spot/portal-components/Placeholder'
-import { MiniLogo } from '@stack-spot/portal-components/svg'
 import { AgentResponseWithBuiltIn, agentToolsClient, AgentVisibilityLevel, workspaceAiClient } from '@stack-spot/portal-network'
 import { WorkspaceResponse } from '@stack-spot/portal-network/api/workspace-ai'
-import { useCallback, useMemo, useState } from 'react'
-import { ButtonFavorite } from '../../components/ButtonFavorite'
+import { useMemo, useState } from 'react'
 import { NavigationComponent } from '../../components/ComponentNavigator'
 import { DescribedRadioGroup } from '../../components/form/DescribedRadioGroup'
-import { IconInput } from '../../components/IconInput'
 import { WorkspaceTabNavigator } from '../../components/WorkspaceTabNavigator'
 import { useCurrentChat } from '../../context/hooks'
 import { useRightPanel } from '../../right-panel/hooks'
 import { ChatProperties } from '../../state/ChatState'
 import { AgentDescription } from './AgentDescription'
 import { useAgentsDictionary } from './dictionary'
-import { AgentLabel } from './styled'
 import { useAgentFavorites } from './useAgentFavorites'
 
 export interface AgentTabProps {
@@ -29,73 +25,58 @@ export const AgentsTab = ({ visibility, workspaceId, agent, showSubmitButton = t
   const t = useAgentsDictionary()
   const { close } = useRightPanel()
   const chat = useCurrentChat()
-  const [filter, setFilter] = useState('')
   const { useFavorites, onAddFavorite, onRemoveFavorite } = useAgentFavorites()
+  const [submitEnabled, setSubmitEnabled] = useState(false)
   const listFavorites = useFavorites()
   const agentDefault = agentToolsClient.agentDefault.useQuery()
   const agents = workspaceId
     ? workspaceAiClient.getAgentFromWorkspaceAi.useQuery({ workspaceId }) as AgentResponseWithBuiltIn[]
     : agentToolsClient.agents.useQuery({ visibility })
 
-  const [value, setValue] = useState<AgentResponseWithBuiltIn | undefined>(
-    agent.current
-      ? agents.find(a => a.id === agent.current?.id)
-      : chat.get('agent') ? agents.find(a => a.id === chat.get('agent')?.id) : agentDefault as unknown as AgentResponseWithBuiltIn,
-  )
-
-  const filtered = useMemo(
-    // Recreate the list so that the favorites list is taken into account
-    () => filter ? agents.filter(a => a === value || a.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : [...agents],
-    [agents, filter, value, listFavorites],
+  const initialValue = useMemo<AgentResponseWithBuiltIn | undefined>(
+    () => {
+      const initial = agent.current
+        ? agents.find(a => a.id === agent.current?.id)
+        : chat.get('agent') ? agents.find(a => a.id === chat.get('agent')?.id) : agentDefault as unknown as AgentResponseWithBuiltIn
+      if (initial) setSubmitEnabled(true)
+      return initial
+    },
+    [agents],
   )
 
   function submit() {
-    if (value) {
-      chat.set(
-        'agent', 
-        { id: value.id, label: value.name, image: value.avatar!, builtIn: value.visibility_level === 'built_in', slug: value.slug },
-      )
-    }
+    if (agent.current) chat.set('agent', agent.current)
     close()
   }
 
-  const onChange = useCallback((newValue: AgentResponseWithBuiltIn) => {
-    setValue(newValue)
-    agent.current = { ...newValue, label: newValue.name, builtIn: newValue.visibility_level === 'built_in' }
-  }, [])
-
   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={a => a.id}
-          value={value}
-          onChange={onChange}
-          renderLabel={({ name, avatar, id }) => (
-            <AgentLabel>
-              {id ? (avatar ? <img src={avatar} /> : <IconBox size="xs"><Agent /></IconBox>) : <MiniLogo />}
-              <Text>{name}</Text>
-            </AgentLabel>
-          )}
-          renderDescription={a => <AgentDescription agentId={a.id} />}
-          optionClassName={a => (a === value && filter && !a.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
-            ? 'filtered-out'
-            : ''
+        <DescribedRadioGroup
+          options={agents}
+          initialValue={initialValue}
+          onChange={(ag) => {
+            agent.current = ag
+              ? { ...ag, label: ag.name, image: ag.avatar!, slug: ag.slug, builtIn: ag.visibility_level === 'built_in' }
+              : undefined
+            setSubmitEnabled(true)
+          }}
+          data={ag => ({
+            idOrSlug: ag.id,
+            image: ag.avatar ? <img src={ag.avatar} /> : <Icon icon="Agent" />,
+            description: <AgentDescription agentId={ag.id} />,
+            name: ag.name,
+            listFavorites,
+            onAddFavorite,
+            onRemoveFavorite,
+          })}
+          emptyResults={
+            <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder" />
           }
-          className="option-list"
-        />}
-        {!!agents.length && !filtered.length &&
-          <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder" />}
-        {!agents.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
+          emptyDataset={<Placeholder title={t.noData} description={t.noDataDescription} />}
+        />
       </div>
-      {!!filtered.length && showSubmitButton && <Button onClick={submit} disabled={!value}>{t.apply}</Button>}
+      {!!agents.length && showSubmitButton && <Button onClick={submit} disabled={!submitEnabled}>{t.apply}</Button>}
     </>
   )
 }

package/src/views/Chat/AgentInfo.tsx

@@ -1,5 +1,5 @@
-import { IconBox, Text } from '@citric/core'
-import { Agent } from '@citric/icons'
+import { Icon } from '@stack-spot/citric-icons'
+import { ImageWithFallback, Text } from '@stack-spot/citric-react'
 import { LabeledWithImage } from '../../state/types'
 
 interface Props {
@@ -12,10 +12,11 @@ interface Props {
  */
 export const AgentInfo = ({ agent, icon }: Props) => (
   <>
-    {agent?.image
-      ? <img src={agent.image} className="custom-agent-image" />
-      : <IconBox className="default-image-wrapper" colorIcon="light.700">{icon ?? <Agent className="agent-image" />}</IconBox>
-    }
+    <ImageWithFallback
+      src={agent?.image ?? ''}
+      className="custom-agent-image"
+      fallback={<div className="default-image-wrapper">{icon ?? <Icon icon="Agent" className="agent-image" />}</div>}
+    />
     <Text appearance="body2">{agent?.label}</Text>
   </>
 )

package/src/views/Chat/ChatMessage.tsx

@@ -1,8 +1,7 @@
-import { Box, Button, Checkbox, Flex, IconBox, Input, Label, Radio, Text } from '@citric/core'
-import { Check, Cog, Copy, Dislike, DislikeFill, Like, LikeFill, TimesCircle } from '@citric/icons'
-import { Badge, IconButton, Tooltip } from '@citric/ui'
+import { Icon } from '@stack-spot/citric-icons'
+import { Badge, Button, CheckboxGroup, Column, IconButton, Input, RadioGroup, Row, Text, Tooltip } from '@stack-spot/citric-react'
 import { agentToolsClient } from '@stack-spot/portal-network'
-import { listToClass } from '@stack-spot/portal-theme'
+import { listToClass, theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { groupBy } from 'lodash'
 import { createElement, Dispatch, useCallback, useMemo, useRef, useState } from 'react'
@@ -58,49 +57,47 @@ interface RenderInputsEntryProps {
 
 const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }: RenderInputsEntryProps) => {
   const chat = useCurrentChat()
+  const [radioValue, setRadioValue] = useState<Required<TextChatEntry>['options'][number] | undefined>()
+  const [checkboxValue, setCheckboxValue] = useState<Required<TextChatEntry>['options']>([])
 
   const renderInputs = () => {
     if (entry.type === 'input-text') {
-      return <Input name={entry.name}
+      return <Input
+        name={entry.name}
         value={value[0] ?? ''}
-        sx={{ maxWidth: '500px' }}
+        style={{ maxWidth: '500px' }}
         autoFocus
-        {...entry.validations} onChange={(data) => setValue([data.target.value])} required={entry.required} />
+        {...entry.validations}
+        onChange={v => setValue([v])}
+        required={entry.required}
+      />
     }
 
     if (entry.type === 'input-radio') {
-      return <Flex className="radio-group">
-        {entry.options?.map((option) => (<Box w={6} key={option.value} className="radio-item">
-          <Flex alignItems="center">
-            <Label htmlFor={option.value} colorScheme="light.contrastText">
-              <Radio name={entry.name} id={option.value} onChange={(data) => {
-                if (data.target.checked) {
-                  setValue([option.label])
-                  option.value && setLabels([option.value])
-                } else {
-                  setValue([])
-                }
-              }} />
-              <Text ml={3}>{option.label}</Text>
-            </Label>
-            {option.hasInput && option.value && labels.findIndex((label) => label === option.value) !== -1 &&
-              <Box w={4} ml={2}>
-                <Input name={entry.name} onChange={(data) => setValue([data.target.value])} 
-                  required={true} sx={{ height: '30px' }} />
-              </Box>
-            }
-          </Flex>
-        </Box>
-        ))}
-      </Flex>
+      return <RadioGroup
+        value={radioValue}
+        onChange={(v) => {
+          setRadioValue(v)
+          setValue([v.label])
+          v.value && setLabels([v.value])
+        }}
+        options={entry.options ?? []}
+        renderKey={o => `${o.value}_${o.label}`}
+        renderLabel={o => (
+          <Row gap={3} w="50%">
+            <Text>{o.label}</Text>
+            {o.hasInput && o.value && labels.findIndex((label) => label === o.value) !== -1 &&
+              <Input name={entry.name} onChange={v => setValue([v])} required style={{ height: '30px', width: '33%' }} />}
+          </Row>
+        )}
+      />  
     }
 
     if (entry.type === 'button-list') {
-      return <Flex className="button-group" style={{ gap: '8px' }}>
+      return <Row className="button-group" gap="8px">
         {entry.options?.map((item) => <Button
           key={item.label}
           colorScheme={item.color}
-          style={{ margin: 0 }}
           onClick={() => {
             item.value && chat.pushMessage(
               ChatEntry.createUserEntry(item.value, false, entry.name, item?.label ? [item?.label] : undefined),
@@ -108,46 +105,46 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
           }}
         >
           {item.label}
-        </Button>)
-        }</Flex>
+        </Button>)}
+      </Row>
     }
 
     if (entry.type === 'input-checkbox') {
-      return <Flex className="checkbox-group">
-        {entry.options?.map((option) => (<Flex as="label" w={6} key={option.label} alignItems="center" className="checkbox-item">
-          <Checkbox name={entry.name} key={option.label} onChange={(data) => {
-            if (data.target.checked) {
-              setValue([...value, option.label])
-              option.value && setLabels([...labels, option.value])
-            } else {
-              const newValue = value.filter(((item) => item !== option.label))
-              setValue([...newValue])
+      return <CheckboxGroup
+        value={checkboxValue}
+        onChange={(v) => {
+          setCheckboxValue(v)
+          setValue(v.map(i => i.label))
+          setLabels(v.map(i => i.value).filter(i => !!i) as string[])
+        }}
+        options={entry.options ?? []}
+        renderKey={o => `${o.value}_${o.label}`}
+        renderLabel={o => (
+          <Row gap={3}>
+            <Text>{o.label}</Text>
+            {o.hasInput && o.value && labels.findIndex((label) => label === o.value)!== -1 &&
+              <div style={{ width: '33%' }}>
+                <Input
+                  name={entry.name}
+                  {...entry.validations}
+                  onChange={(v) => {
+                    const customIndex = value.findIndex(v => !entry.options?.map(o => o.label).includes(v))
+                    if (customIndex === -1) {
+                      setValue([...value, v])
+                    } else {
+                      const newValue = [...value]
+                      newValue[customIndex] = v
+                      setValue(newValue)
+                    } 
+                  }}
+                  required={true}
+                  style={{ height: '30px' }}
+                />
+              </div>
             }
-          }}/>
-          <Text ml={3}>{option.label}</Text>
-          {option.hasInput && option.value && labels.findIndex((label) => label === option.value)!== -1 &&
-            <Box w={4} ml={2}>
-              <Input
-                name={entry.name}
-                {...entry.validations}
-                onChange={(data) => {
-                  const customIndex = value.findIndex(v => !entry.options?.map(o => o.label).includes(v))
-                  if (customIndex === -1) {
-                    setValue([...value, data.target.value])
-                  } else {
-                    const newValue = [...value]
-                    newValue[customIndex] = data.target.value
-                    setValue(newValue)
-                  } 
-                }}
-                required={true}
-                sx={{ height: '30px' }}
-              />
-            </Box>
-          }
-        </Flex>
-        ))}
-      </Flex>
+          </Row>
+        )}
+      />
     }
 
     if (entry.type === 'input-phone') {
@@ -162,17 +159,17 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
     return <p className="plain-text">{entry.content}</p>
   }
 
-  return <Flex flexDirection="column">
-    <Text appearance="body2" mb={4}>{entry.content}</Text>
+  return <Column gap={4}>
+    <Text appearance="body2">{entry.content}</Text>
     {isLast && renderInputs()}
-  </Flex>
+  </Column>
 }
 
 const UserInfo = ({ entry }: { entry: TextChatEntry }) => {
   switch (entry.agentType) {
     case 'user': return
     case 'bot': return <AgentInfo agent={entry.agent} />
-    case 'system': return <AgentInfo agent={{ id: 'system', label: 'System' }} icon={<Cog />} />
+    case 'system': return <AgentInfo agent={{ id: 'system', label: 'System' }} icon={<Icon icon="Cog" />} />
   }
 }
 
@@ -301,9 +298,9 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
 
     return <form>
       <RenderInputsEntry entry={entry} isLast={isLast} value={value} setValue={setValue} setLabels={setLabels} labels={labels} />
-      <Box mt="4">
+      <div style={{ marginTop: theme.spacing[4] }}>
         {renderActions()}
-      </Box>
+      </div>
     </form>
   }
 
@@ -324,7 +321,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
           {(entry.content || entry.steps || entry.upload?.length) && (
             <div className={listToClass(['message-content', entry.card && 'card', entry.type])}>
               {!!entry.badges?.length && <div className="badges">
-                {entry.badges.map((b, index) => <Badge key={index} palette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
+                {entry.badges.map((b, index) => <Badge key={index} colorPalette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
               </div>}
               {renderContent()}
             
@@ -334,7 +331,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
           
           {entry.error && (
             <div className="error">
-              <IconBox size="xs"><TimesCircle /></IconBox>
+              <Icon icon="TimesCircle" size="xs" />
               <Text appearance="microtext1">{entry.error}</Text>
             </div>
           )}
@@ -349,12 +346,13 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
           label={t.tools}
           images={entry.tools.slice(0, 3).map((id) => {
             const tool = toolById(id, toolKits)
-            return { key: id, name: tool?.name || id, icon: <Cog />, url: tool?.image }
+            return { key: id, name: tool?.name || id, icon: <Icon icon="Cog" />, url: tool?.image }
           })}
           onClick={openToolsPanel}
+          style={{ marginTop: '12px', width: 'fit-content' }}
         />}
         {!!entry.knowledgeSources?.length && <div className="ks-box">
-          <Text appearance="microtext1" colorScheme="light.700">Knowledge Sources:</Text>
+          <Text appearance="microtext1" color="light.700">Knowledge Sources:</Text>
           <ul>{entry.knowledgeSources.map((ks, index) => (
             <li key={index}>
               <Button size="sm" colorScheme="light" onClick={() => detailKS(ks)}>{ks.name}</Button>
@@ -365,38 +363,35 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
         {shouldShowFooter && <div className="message-footer">
           {entry.agentType === 'bot' && !entry.error && <div className="message-actions">
             {entry.type === 'md' && (
-              copied ? (
-                <Tooltip text={t.copied} position={'right'}>
-                  <IconButton
-                    appearance="square"
-                    colorBg="light"
-                    title={t.copied}
-                    aria-label={t.copied}
-                    onClick={handleCopy}
-                  >
-                    <Check />
-                  </IconButton>
-                </Tooltip>
-              ) : (
-                <IconButton
-                  appearance="square"
-                  color="light"
-                  title={t.copy}
-                  aria-label={t.copy}
-                  onClick={handleCopy}
-                >
-                  <Copy />
-                </IconButton>
-              )
+              <IconButton
+                icon="Copy"
+                className="copy-btn"
+                appearance="square"
+                title={t.copy}
+                aria-label={t.copy}
+                feedback={t.copied}
+                onClick={handleCopy}
+              />
             )}
             {entry.messageId && (
               <>
-                <IconButton appearance="square" color="light" title={t.like} aria-label={t.like} onClick={like}>
-                  {liked === true ? <LikeFill /> : <Like />}
-                </IconButton>
-                <IconButton appearance="square" color="light" title={t.dislike} aria-label={t.dislike} onClick={dislike}>
-                  {liked === false ? <DislikeFill /> : <Dislike />}
-                </IconButton>
+                <IconButton
+                  group={liked === true ? 'fill' : 'outline'}
+                  icon="Like"
+                  appearance="square"
+                  title={t.like}
+                  aria-label={t.like}
+                  onClick={like}
+                />
+                <IconButton
+                  group={liked === false ? 'fill' : 'outline'}
+                  icon="Dislike"
+                  appearance="square"
+                  color="light"
+                  title={t.dislike}
+                  aria-label={t.dislike}
+                  onClick={dislike}
+                />
               </>
             )}
           </div>}
@@ -404,37 +399,33 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
           {entry.agentType === 'user' && (
             <div className="message-actions">
               {copied ? (
-                <Tooltip text={t.copied} position={'left'}>
+                <Tooltip content={t.copied} position={'left'}>
                   <IconButton
+                    icon="Check"
                     appearance="square"
-                    colorBg="light"
                     title={t.copied}
                     aria-label={t.copied}
                     size="sm"
-                  >
-                    <Check />
-                  </IconButton>
+                  />
                 </Tooltip>
               ) : (
                 showUserButtonCopy && (
                   <div className="action-bar">
                     <IconButton
+                      icon="Copy"
                       appearance="square"
-                      color="light"
                       title={t.copy}
                       aria-label={t.copy}
                       onClick={handleCopy}
                       size="sm"
-                    >
-                      <Copy className="copy-btn"/>
-                    </IconButton>
+                    />
                   </div>
                 )
               )}
             </div>
           )}
 
-          <Text as="label" appearance="microtext1" className="chat-date">
+          <Text appearance="microtext1" className="chat-date">
             {dateFormatter.formatForChatMessage(date)}
           </Text>
         </div>}

package/src/views/Chat/StepsList.tsx

@@ -1,13 +1,12 @@
-import { Button, IconBox, Text } from '@citric/core'
-import { CheckCircleFill, PlayFill, Spaces, TimesCircleFill } from '@citric/icons'
-import { LoadingCircular } from '@citric/ui'
+import { Icon } from '@stack-spot/citric-icons'
+import { Button, ProgressCircular, Text } from '@stack-spot/citric-react'
 import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
 import { ChatStep, StepChatStep } from '@stack-spot/portal-network'
+import { theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { findLastIndex } from 'lodash'
 import { useState } from 'react'
 import { useWidget } from '../../context/hooks'
-import { PropsOf } from '../../types'
 
 interface Props {
   steps: ChatStep[],
@@ -23,12 +22,12 @@ interface StepProps {
 }
 
 function getStatusIcon(status: ChatStep['status']) {
-  const iconBoxProps: PropsOf<typeof IconBox> = { colorIcon: 'light.700', size: 'xs' }
+  const iconProps = { style: { color: theme.color.light[700] }, size: 'xs' } as const
   switch (status) {
-    case 'error': return <IconBox {...iconBoxProps}><TimesCircleFill /></IconBox>
-    case 'success': return <IconBox {...iconBoxProps}><CheckCircleFill /></IconBox>
-    case 'pending': return <IconBox {...iconBoxProps}><Spaces /></IconBox>
-    case 'running': return <LoadingCircular className="loading" colorScheme="inverse" size="xs" />
+    case 'error': return <Icon group="fill" icon="TimesCircle" {...iconProps} />
+    case 'success': return <Icon group="fill" icon="CheckCircle" {...iconProps} />
+    case 'pending': return <Icon icon="Spaces" {...iconProps} />
+    case 'running': return <ProgressCircular className="loading" colorScheme="inverse" size="xs" />
   }
 }
 
@@ -37,7 +36,7 @@ const Step = ({ step, index, total, onClick }: StepProps) => {
   return (
     <li tabIndex={onClick ? 0 : undefined} onClick={onClick} role={onClick ? 'button' : 'listitem'}>
       <div className="step-status-icon">{getStatusIcon(step.status)}</div>
-      <Text className="step-title" appearance="microtext1" colorScheme="light.700">
+      <Text className="step-title" appearance="microtext1" color="light.700">
         {t.step} {index}/{total}: {step.input}
       </Text>
     </li>
@@ -74,7 +73,7 @@ export const StepsList = ({ steps, chatId, messageId }: Props) => {
         {isExpanded && <div className="step-actions">
           <Button colorScheme="light" size="sm" onClick={() => setExpanded(false)}>{t.hideSteps}</Button>
           <Button colorScheme="light" size="sm" className="icon-button details" onClick={openToolsPanel}>
-            <IconBox size="xs"><PlayFill /></IconBox>
+            <Icon group="fill" icon="Play" size="xs" />
             {t.detailed}
           </Button>
         </div>}

package/src/views/Chat/styled.ts

@@ -25,9 +25,9 @@ export const ChatList: IStyledComponentBase<
     border-radius: 8px;
     align-self: start;
 
-    svg {
+    /* svg {
       fill: ${theme.color.danger.contrastText};
-    }
+    } */
 
     small {
       margin-top: 1px;
@@ -78,6 +78,12 @@ export const ChatList: IStyledComponentBase<
       opacity: 0.6;
       margin-left: auto;
     }
+
+    // prevents the feedback from being cut by the overflow rules of the parent elements. 
+    .copy-btn:after {
+      left: 0;
+      margin-top: -20px;
+    }
   }
 
   > li {