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

package/src/components/form/DescribedCheckboxGroup.tsx

@@ -1,81 +1,106 @@
-import { Checkbox, Flex, Text } from '@citric/core'
-import { listToClass } from '@stack-spot/portal-theme'
+import { Icon } from '@stack-spot/citric-icons'
+import { Accordion, Checkbox, CheckboxGroup, FieldGroup, Input, Row, Text, useCheckboxGroupControls } from '@stack-spot/citric-react'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { useMemo } from 'react'
-import { Accordion } from '../Accordion'
-import { RadioCheckBox } from './styled'
-import { CheckProps } from './types'
+import { difference, uniqBy } from 'lodash'
+import { useCallback, useEffect, useState } from 'react'
+import { Labeled } from '../../state/types'
+import { ButtonFavorite, Favorite } from '../ButtonFavorite'
+
+interface Props<T> {
+  initialValue?: T[],
+  options: T[],
+  /**
+   * Must return the data needed by the component, given the option.
+   */
+  data: (option: T) => { name: string, description: string } & Favorite<any>,
+  /**
+   * Use this when the selection must be kept at a global level, managed by a React Ref.
+   */
+  globalSelection?: React.MutableRefObject<Labeled[] | undefined>,
+  emptyResults: React.ReactNode,
+  emptyDataset: React.ReactNode,
+  onChange?: (value: T[]) => void,
+}
 
 /**
  * Renders a checkbox 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 and a select all checkbox.
  */
-export function DescribedCheckboxGroup<T>({
-  keygen, 
-  onChange, 
-  options, 
-  renderDescription, 
-  renderLabel, 
-  renderBeforeElement, 
-  renderAfterElement, 
-  optionClassName, 
-  optionStyle, 
-  value, 
-  className, 
-  style }: CheckProps<T>) {
+export function DescribedCheckboxGroup<T>(
+  { initialValue, options: opt, data, globalSelection, onChange: change, emptyDataset, emptyResults }: Props<T>,
+) {
   const t = useTranslate(dictionary)
-  const allSelected = options.length > 0 && options.every(option => value.includes(option))
+  const [options, setOptions] = useState(opt)
 
-  const handleSelectAll = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.checked) {
-      onChange(options)
-    } else {
-      onChange([])
-    }
-  }
+  useEffect(() => {
+    if (controls.value.length === 0 && (initialValue?.length ?? 0) > 0) controls.setValue(initialValue!)
+  }, [initialValue])
 
-  const items = useMemo(() => options.map((option) => {
-    const label = renderLabel(option)
-    const description = renderDescription(option)
-    const header = (
-      <label>
-        <Checkbox
-          checked={value.includes(option)}
-          onChange={(e) => {
-            if (e.target.checked && !value.includes(option)) onChange([...value, option])
-            else onChange(value.filter(item => item !== option))
-          }}
-        />
-        {typeof label === 'string' ? <Text>{label}</Text> : label}
-      </label>
+  const onChange = useCallback((newValue: T[], previousValue: T[]) => {
+    change?.(newValue)
+    if (!globalSelection?.current) return
+    const added = difference(newValue, previousValue)
+    const removed = difference(previousValue, newValue)
+    globalSelection.current = globalSelection.current?.filter(o => !removed.some(r => data(r).idOrSlug === o.id)) ?? []
+    globalSelection.current = uniqBy(
+      [...globalSelection.current, ...added.map(o => ({ id: data(o).idOrSlug, label: data(o).name }))],
+      'id',
     )
+  }, [])
 
-    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])
+  const controls = useCheckboxGroupControls({
+    initialValue,
+    options,
+    applyFilter: (filter, o) => data(o).name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()),
+    renderKey: o => data(o).idOrSlug,
+    onChange,
+  })
 
-  return <RadioCheckBox style={style} className={className}>
-    <Flex as="li" alignItems="center" ml={3} pl={1}>
-      <Checkbox
-        checked={allSelected}
-        onChange={handleSelectAll}
+  return options.length ? <>
+    <FieldGroup fullWidth>
+      <Icon icon="Search" />
+      <Input type="search" value={controls.filter} onChange={controls.setFilter} />
+    </FieldGroup>
+    {controls.options.length ? <>
+      <Row tag="label" gap="10px" p="11px">
+        <Checkbox value={controls.isAllSelected} onChange={v => v ? controls.selectAll() : controls.removeSelection()} />
+        <Text>{controls.isAllSelected ? t.removeAll : t.selectAll}</Text>
+      </Row>
+      <CheckboxGroup
+        options={controls.options}
+        value={controls.value}
+        onChange={controls.setValue}
+        renderKey={controls.renderKey}
+        className="option-list"
+        renderItem={(checkbox, o) => {
+          const { description, idOrSlug, name, listFavorites, onAddFavorite, onRemoveFavorite } = data(o)
+          return (
+            <Row className={controls.isUnfilteredButChecked(o) ? 'filtered-out' : ''}>
+              <Accordion header={btn => <>{checkbox}<Text>{name}</Text>{btn}</>} appearance="card" maxHeight={100}>
+                <Text appearance="microtext1" color="light.700">{description}</Text>
+              </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>
+          )
+        }}
       />
-      <Text>{allSelected ? t.removeAll : t.selectAll}</Text>
-    </Flex>
-    {items}
-  </RadioCheckBox>
+    </> : emptyResults}
+  </> : emptyDataset
 }
 
 const dictionary = {

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'
@@ -17,4 +16,3 @@ export { ObservableState } from './state/ObservableState'
 export type { Labeled, LabeledAgent, LabeledWithImage } from './state/types'
 export { WidgetState } from './state/WidgetState'
 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/types.ts

@@ -1,3 +1,4 @@
+import { WithIcon } from '@stack-spot/citric-icons'
 import { WithStyle } from '@stack-spot/portal-theme'
 
 export interface WithChildren<T = React.ReactNode> {
@@ -6,13 +7,13 @@ 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,
   onClick: () => any,
-}
+} & WithStyle & Partial<WithIcon>
+
 
 export interface MinimizedActions {
   /**

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'
@@ -15,14 +14,14 @@ export const AgentDescription = ({ agentId }: { agentId?: string }) => {
   
   const knowledgeSources = useMemo(
     () => agent?.knowledge_source_config?.knowledge_sources_details?.map((ks, index) => (
-      <li key={index}><Badge palette="teal" appearance="square">{ks.name}</Badge></li>
+      <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>}
     </>
   )
 }