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

package/src/components/form/DescribedRadioGroup.tsx

@@ -1,52 +1,85 @@
-import { Radio, Text } from '@citric/core'
-import { listToClass } from '@stack-spot/portal-theme'
-import { useMemo } from 'react'
-import { Accordion } from '../Accordion'
-import { RadioCheckBox } from './styled'
-import { RadioProps } from './types'
+import { Icon } from '@stack-spot/citric-icons'
+import { Accordion, FieldGroup, ImageBox, Input, RadioGroup, Row, Text, useRadioGroupControls } from '@stack-spot/citric-react'
+import { useEffect, useState } from 'react'
+import { ButtonFavorite, Favorite } from '../ButtonFavorite'
+
+interface Props<T> {
+  initialValue?: T,
+  options: T[],
+  /**
+   * Must return the data needed by the component, given the option.
+   * @param option 
+   * @returns 
+   */
+  data: (option: T) => { name: string, description: React.ReactNode, image?: React.ReactElement } & Favorite<any>,
+  emptyResults: React.ReactNode,
+  emptyDataset: React.ReactNode,
+  onChange?: (value: T | undefined) => void,
+}
 
 /**
- * Renders a radio button group where each option has a label and a description.
- * The description in placed under the label and radio button as an accordion.
+ * Renders a radio group where each option has a label and a description.
+ * The description in placed under the label and checkbox as an accordion.
+ * 
+ * Also renders a search input.
  */
-export function DescribedRadioGroup<T>(
-  { 
-    keygen, 
-    onChange, 
-    options, 
-    renderDescription, 
-    renderLabel, 
-    renderBeforeElement,
-    renderAfterElement,
-    optionClassName, 
-    optionStyle, 
-    value, 
-    className, 
-    style }: RadioProps<T>,
-) {
-  const items = useMemo(() => options.map((option) => {
-    const label = renderLabel(option)
-    const description = renderDescription(option)
+export function DescribedRadioGroup<T>({ initialValue, options: opt, data, emptyDataset, emptyResults, onChange }: Props<T>) {
+  const [options, setOptions] = useState(opt)
+  const controls = useRadioGroupControls({
+    initialValue,
+    options,
+    applyFilter: (filter, o) => data(o).name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()),
+    renderKey: o => data(o).idOrSlug,
+    onChange,
+  })
 
-    const header = (
-      <label>
-        <Radio checked={option === value} onChange={() => onChange(option)} />
-        {typeof label === 'string' ? <Text>{label}</Text> : label}
-      </label>
-    )
-    return (
-      <li key={keygen(option)} className={listToClass(['radio-group-item', optionClassName?.(option)])} style={optionStyle?.(option)}>
-        {renderBeforeElement?.(option)}
-        <Accordion header={header}>
-          {typeof description === 'string'
-            ? <Text appearance="microtext1" colorScheme="light.700">{description}</Text>
-            : description as any
-          }
-        </Accordion>
-        {renderAfterElement?.(option)}
-      </li>
-    )
-  }), [options, value])
+  useEffect(() => {
+    if (controls.value === undefined && initialValue !== undefined) controls.setValue(initialValue)
+  }, [initialValue])
 
-  return <RadioCheckBox style={style} className={className}>{items}</RadioCheckBox>
+  return options.length ? <>
+    <FieldGroup fullWidth>
+      <Icon icon="Search" />
+      <Input type="search" value={controls.filter} onChange={controls.setFilter} />
+    </FieldGroup>
+    {controls.options.length ? <RadioGroup
+      options={controls.options}
+      value={controls.value}
+      onChange={controls.setValue}
+      renderKey={controls.renderKey}
+      className="option-list"
+      renderItem={(radio, o) => {
+        const { description, idOrSlug, name, image, listFavorites, onAddFavorite, onRemoveFavorite } = data(o)
+        return (
+          <Row className={controls.isUnfilteredButChecked(o) ? 'filtered-out' : ''}>
+            <Accordion
+              header={btn => <>
+                {radio}
+                {image && <ImageBox size="xs" style={{ fontSize: '16px' }}>{image}</ImageBox>}
+                <Text>{name}</Text>{btn}</>
+              }
+              appearance="card"
+              maxHeight={100}
+            >
+              {typeof description === 'string' ? <Text appearance="microtext1" color="light.700">{description}</Text> : description}
+            </Accordion>
+            {onAddFavorite && <ButtonFavorite favorite={{
+              idOrSlug: idOrSlug,
+              listFavorites,
+              onAddFavorite: async (...args) => {
+                const res = await onAddFavorite(...args)
+                setOptions([...options]) // forces options re-rendering
+                return res
+              },
+              onRemoveFavorite: async (...args) => {
+                const res = await onRemoveFavorite?.(...args)
+                setOptions([...options]) // forces options re-rendering
+                return res ?? false
+              },
+            }} />}
+          </Row>
+        )
+      }}
+    /> : emptyResults}
+  </> : emptyDataset
 }

package/src/index.ts

@@ -1,6 +1,5 @@
 /* Attention: in order for the package "page" to work without linking the lib, we must export types separately, using the "type" keyword */
 
-export { ProgressBar } from './components/ProgressBar'
 export { QuickStartButton } from './components/QuickStartButton'
 export { AIWidgetProvider } from './context/AIWidgetProvider'
 export * from './context/hooks'
@@ -16,5 +15,5 @@ export { acceptedFileTypes } from './state/constants'
 export { ObservableState } from './state/ObservableState'
 export type { Labeled, LabeledAgent, LabeledWithImage } from './state/types'
 export { WidgetState } from './state/WidgetState'
+export type { ButtonAction } from './types'
 export { defaultLanguage, languages } from './utils/programming-languages'
-

package/src/layout.css

@@ -1,29 +1,3 @@
-@font-face {
-  font-family: "San Francisco";
-  font-weight: 400;
-  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
-}
-
-/* Scroll bars */
-
-::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-::-webkit-scrollbar {
-  width: 0.25rem;
-  height: 0.5rem;
-  background-color: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: var(--light-600);
-}
-
-::-webkit-scrollbar-corner {
-  background-color: transparent; 
-}
-
 /* Classes */
 
 .ai-chat-widget {
@@ -209,4 +183,4 @@
   z-index: 9999;
   pointer-events: auto;
   color: var(--light-contrastText)
-}
+}

package/src/right-panel/DefaultPanel.tsx

@@ -1,6 +1,4 @@
-import { Text } from '@citric/core'
-import { Times } from '@citric/icons'
-import { IconButton } from '@citric/ui'
+import { IconButton, Text } from '@stack-spot/citric-react'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { styled } from 'styled-components'
 import { WithChildren } from '../types'
@@ -51,11 +49,9 @@ export const DefaultPanel = ({ description, onClose, title, children }: Props) =
       <header>
         <div className="title">
           {typeof title === 'string' ? <Text appearance="h5">{title}</Text> : title}
-          {typeof description === 'string' ? <Text colorScheme="light.700">{description}</Text> : description}
+          {typeof description === 'string' ? <Text color="light.700">{description}</Text> : description}
         </div>
-        <IconButton title={t.close} aria-label={t.close} onClick={onClose}>
-          <Times />
-        </IconButton>
+        <IconButton icon="Times" title={t.close} aria-label={t.close} onClick={onClose} />
       </header>
       <article>{children}</article>
     </PanelBox>

package/src/state/ChatEntry.ts

@@ -1,6 +1,5 @@
-import { OneOfColorSchemes } from '@citric/core'
 import { ChatStep } from '@stack-spot/portal-network'
-import { ColorPaletteName } from '@stack-spot/portal-theme'
+import { ColorPaletteName, ColorSchemeName } from '@stack-spot/portal-theme'
 import { pull } from 'lodash'
 import { LabeledAgent } from './types'
 
@@ -32,7 +31,7 @@ export interface ChatAction extends SerializableAction {
   /**
    * @default inverse
    */
-  colorScheme?: OneOfColorSchemes,
+  colorScheme?: ColorSchemeName,
   /**
    * @default false
    */
@@ -150,7 +149,7 @@ export interface TextChatEntry {
   /*
    * Options for radio, checkbox or button type.
    */
-  options?: { color?: OneOfColorSchemes, label: string, value?: string, hasInput?: boolean}[],
+  options?: { color?: ColorSchemeName, label: string, value?: string, hasInput?: boolean}[],
   /**
    * Name to be used in input type fields.
    */

package/src/state/constants.ts

@@ -1,10 +1,10 @@
 import { FileSize } from './types'
 
 export const acceptedFileTypes = [
-  'json', 'yaml', 'txt', 'md', 'json', 'yaml', 'pdf', /*'xls',*/ 'xlsx', 'csv', 'cbl', 'cpp', 'cxx', 'cc', 'c', 'hpp', 'hxx', 'hh', 'h',
+  'json', 'yaml', 'txt', 'md', 'json', 'yaml', 'pdf', /*'xls', 'xlsx',*/ 'csv', 'cbl', 'cpp', 'cxx', 'cc', 'c', 'hpp', 'hxx', 'hh', 'h',
   'cs', 'go', 'html', 'htm', 'kt', 'kts', 'md', 'php', 'proto', 'py', 'java', 'js', 'jsx', 'ts', 'tsx', 'rst', 'rb', 'rs', 'scala', 'swift',
   'sql', 'yaml', 'yml', 'tf', 'sh', 'ps1', 'psd1', 'psm1', 'bat', 'cmd', 'rego', 'f', 'for', 'r', 'pl', 'vb', 'dart', 'hs', 'lua',
-  'asm', 'groovy', 'gvy', 'gy', 'mat', 'clj', 'lisp', 'm', 'cls', 'css', 'scss', 'json', 'jpg', 'jpeg', 'png', 'docx', 'pptx',
+  'asm', 'groovy', 'gvy', 'gy', 'mat', 'clj', 'lisp', 'm', 'cls', 'css', 'scss', 'json', 'jpg', 'jpeg', 'png',
 ]
 
 export const maxFileSize: FileSize = { value: 10, unit: 'MB' }

package/src/types.ts

@@ -1,3 +1,5 @@
+import { WithIcon } from '@stack-spot/citric-icons'
+import { BaseIconBoxProps } from '@stack-spot/citric-react'
 import { WithStyle } from '@stack-spot/portal-theme'
 
 export interface WithChildren<T = React.ReactNode> {
@@ -6,13 +8,16 @@ export interface WithChildren<T = React.ReactNode> {
 
 export type PropsOf<T extends React.FunctionComponent> = T extends React.FunctionComponent<infer P> ? P : never
 
-export interface ButtonAction extends WithStyle {
-  icon?: React.ReactElement,
+export type ButtonAction = {
   color?: string,
   label?: string,
   ariaLabel?: string,
+  title?: string,
   onClick: () => any,
-}
+  appearance?: BaseIconBoxProps<any, any>['appearance'],
+  size?: BaseIconBoxProps<any, any>['size'],
+} & WithStyle & Partial<WithIcon>
+
 
 export interface MinimizedActions {
   /**

package/src/utils/tools.ts

@@ -1,30 +1,9 @@
 import { BuiltinToolkitResponse, BuiltinToolResponse } from '@stack-spot/portal-network/api/agent'
-import { CustomToolkitDto } from '@stack-spot/portal-network/api/agent-tools'
 import { keyBy } from 'lodash'
 
 export type ToolWithImage = BuiltinToolResponse & { id: string, image?: string }
 
-function isBuiltinToolkit(
-  toolkit: BuiltinToolkitResponse | CustomToolkitDto,
-): toolkit is BuiltinToolkitResponse {
-  return 'image_url' in toolkit
-}
-
-
-export function toolById(
-  id: string,
-  toolkits: (BuiltinToolkitResponse | CustomToolkitDto)[] | undefined,
-): ToolWithImage | undefined {
-  const tools = toolkits
-    ?.map((toolkit) =>
-      toolkit.tools?.map((tool) => ({
-        ...tool,
-        id: tool.id!,
-        image: isBuiltinToolkit(toolkit)
-          ? toolkit.image_url ?? undefined
-          : (toolkit as CustomToolkitDto).avatar ?? undefined,
-      })),
-    )
-    .flat()
+export function toolById(id: string, toolkits: BuiltinToolkitResponse[] | undefined): ToolWithImage | undefined {
+  const tools = toolkits?.map(({ image_url, tools }) => tools?.map((tool) => ({ ...tool, id: tool.id!, image: image_url! }))).flat()
   return keyBy(tools, 'id')[id]
 }

package/src/utils/upload/FileUpload.ts

@@ -2,6 +2,7 @@ import { dataIntegrationClient } from '@stack-spot/portal-network'
 import { FileUploadType } from '@stack-spot/portal-network/api/dataIntegration'
 import { pull } from 'lodash'
 import { FileUploadStatus } from './types'
+import { getFileId } from './utils'
 
 export type FileUploadChangeListener = (status: FileUploadStatus) => void
 
@@ -17,8 +18,8 @@ export class FileUpload {
 
   constructor(file: File, type: FileUploadType = 'CONTEXT') {
     this.file = file
+    this.id = getFileId(file)
     this.type = type
-    this.id = `${Date.now()}-${Math.random()}`
     this.upload()
   }
 

package/src/views/Agents/AgentDescription.tsx

@@ -1,5 +1,4 @@
-import { Text } from '@citric/core'
-import { Badge, Skeleton } from '@citric/ui'
+import { Badge, Skeleton, Text } from '@stack-spot/citric-react'
 import { agentToolsClient } from '@stack-spot/portal-network'
 import { useMemo } from 'react'
 import { ToolBadge } from '../../components/ToolBadge'
@@ -11,18 +10,18 @@ export const AgentDescription = ({ agentId }: { agentId?: string }) => {
   const t = useAgentsDictionary()
   const [agent, , , { isLoading }] = agentToolsClient.agent.useStatefulQuery({ agentId: agentId! }, { enabled: !!agentId })
   const [toolKits, , , { isLoading: isLoadingToolKit }] = agentToolsClient.tools.useStatefulQuery({})
-  const numberOfKnowledgeSources = agent?.knowledge_sources_config?.knowledge_sources.length ?? 0
+  const numberOfKnowledgeSources = agent?.knowledge_source_config?.knowledge_sources.length ?? 0
   
   const knowledgeSources = useMemo(
-    () => agent?.knowledge_sources_config?.knowledge_sources_details?.map((ks, index) => (
-      <li key={index}><Badge palette="teal" appearance="square">{ks.name}</Badge></li>
+    () => agent?.knowledge_source_config?.knowledge_sources_details?.map((ks, index) => (
+      <li key={index}><Badge colorPalette="teal" appearance="square">{ks.name}</Badge></li>
     )),
     [agent],
   )
   const skeleton = useMemo(() => {
     const loadingKS: React.ReactElement[] = []
     for (let i = 0; i < numberOfKnowledgeSources; i++) {
-      loadingKS.push(<li key={i}><Badge palette="teal" appearance="square"><Skeleton className="ks-skeleton" /></Badge></li>)
+      loadingKS.push(<li key={i}><Badge colorPalette="teal" appearance="square"><Skeleton className="ks-skeleton" /></Badge></li>)
     }
     return loadingKS
   }, [numberOfKnowledgeSources])
@@ -70,7 +69,7 @@ export const AgentDescription = ({ agentId }: { agentId?: string }) => {
       </section>}
       {agent?.model_name && <section>
         <Text appearance="microtext1" className="title">LLM</Text>
-        <Badge palette="orange" appearance="square">{agent?.model_name}</Badge>
+        <Badge colorPalette="orange" appearance="square">{agent?.model_name}</Badge>
       </section>}
     </AgentDescriptionBox>
   )

package/src/views/Agents/AgentsPanel.tsx

@@ -1,5 +1,6 @@
+import { Tab } from '@stack-spot/citric-react'
 import { agentToolsClient } from '@stack-spot/portal-network'
-import { ReactElement, useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { RightPanelContentList } from '../../components/RightPanelContentList'
 import { RightPanelTabs } from '../../components/RightPanelTabs'
 import { useCurrentChat, useWidgetState } from '../../context/hooks'
@@ -8,8 +9,6 @@ import { checkIsTrial } from '../../utils/check-is-trial'
 import { AgentsTab, AgentsTabWorkspace } from './AgentsTab'
 import { useAgentsDictionary } from './dictionary'
 
-type TabElement = { title: string, content: ReactElement }
-
 /**
  * Renders the Agent selection form in the Right Panel if this is the panel that is currently opened.
  */
@@ -29,13 +28,13 @@ export const AgentsPanel = () => {
     }
   }, [chat])
 
-  const allTabsMap: Record<Scope, TabElement> = {
-    favorite: { title: t.favorites, content: <AgentsTab key="favorite" visibility="favorite" agent={agent} /> },
-    builtin: { title: t.builtin, content: <AgentsTab key="builtin" visibility="built_in" agent={agent} /> },
-    personal: { title: t.personal, content: <AgentsTab key="personal" visibility="personal" agent={agent} /> },
-    shared: { title: t.shared, content: <AgentsTab key="shared" visibility="shared" agent={agent} /> },
-    workspace: { title: t.spots, content: <AgentsTabWorkspace key="workspace" visibility="workspace" agent={agent} /> },
-    account: { title: t.account, content: <AgentsTab key="account" visibility="account" agent={agent} /> },
+  const allTabsMap: Record<Scope, Omit<Tab, 'key'>> = {
+    favorite: { label: t.favorites, content: <AgentsTab key="favorite" visibility="favorite" agent={agent} /> },
+    builtin: { label: t.builtin, content: <AgentsTab key="builtin" visibility="built_in" agent={agent} /> },
+    personal: { label: t.personal, content: <AgentsTab key="personal" visibility="personal" agent={agent} /> },
+    shared: { label: t.shared, content: <AgentsTab key="shared" visibility="shared" agent={agent} /> },
+    workspace: { label: t.spots, content: <AgentsTabWorkspace key="workspace" visibility="workspace" agent={agent} /> },
+    account: { label: t.account, content: <AgentsTab key="account" visibility="account" agent={agent} /> },
   }
    
   const defaultScopes: Scope[] = ['favorite', 'builtin', 'personal', 'shared', 'workspace', 'account']
@@ -47,8 +46,8 @@ export const AgentsPanel = () => {
     : 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} />

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>
   </>
 )