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

package/src/components/form/DescribedRadioGroup.tsx

@@ -1,52 +1,84 @@
-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"
+            >
+              {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/context/hooks.ts

@@ -17,7 +17,10 @@ export function useWidget(): WidgetState {
   return globalWidgetState
 }
 
-function useObservableState<T, K extends keyof T>(state: ObservableState<T>, key: K): T[K] {
+/**
+ * Watches an ObservableState.
+ */
+export function useObservableState<T, K extends keyof T>(state: ObservableState<T>, key: K): T[K] {
   const [value, setValue] = useState(state.get(key))
   useEffect(() => {
     setValue(state.get(key))

package/src/hooks/midnight-update-view.ts

@@ -0,0 +1,36 @@
+import { useManualRender } from '@stack-spot/portal-components'
+import { useEffect } from 'react'
+
+/**
+ * Returns the number of milliseconds remaining until the next midnight.
+ */
+function getTimeUntilMidnight() {
+  const now = new Date()
+  const midnight = new Date(now)
+  midnight.setHours(24, 0, 0, 0)
+  return midnight.getTime() - now.getTime()
+}
+
+/**
+ * Hook that triggers a component re-render at midnight every day.
+ */
+export function useMidnightUpdateView() {
+  const { repaint } = useManualRender()
+
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout> | undefined
+
+    const scheduleUpdate = () => {
+      const timeUntilMidnight = getTimeUntilMidnight()
+
+      timer = setTimeout(() => {
+        repaint()
+        scheduleUpdate()
+      }, timeUntilMidnight)
+    }
+
+    scheduleUpdate()
+    
+    return () => { timer && clearTimeout(timer) }
+  }, [])
+}

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'
@@ -8,7 +7,7 @@ export { getFeaturesWithDefaults } from './features'
 export type { AIWidgetFeatures, ChatFeatures } from './features'
 export { StackspotAIWidget } from './StackspotAIWidget'
 export { ChatEntry } from './state/ChatEntry'
-export type { ChatAction } from './state/ChatEntry'
+export type { ChatAction, TextChatEntry } from './state/ChatEntry'
 export { ChatState } from './state/ChatState'
 export type { MessageInterceptor } from './state/ChatState'
 export { ChatTabsController } from './state/ChatTabsController'
@@ -16,5 +15,8 @@ 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'
+export type { CustomRenderResult } from './views/Chat/ChatMessage'
+export { loadChat } from './views/ChatHistory/utils'
 

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 {

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

@@ -4,7 +4,8 @@ export const acceptedFileTypes = [
   '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', 'docx', 'pptx', 
+  'tiff', 'tif', 'bmp',
 ]
 
 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,17 @@ 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'],
+  disabled?: boolean,
+} & WithStyle & Partial<WithIcon>
+
 
 export interface MinimizedActions {
   /**

package/src/utils/tools.ts

@@ -1,28 +1,19 @@
-import { BuiltinToolkitResponse, BuiltinToolResponse } from '@stack-spot/portal-network/api/agent'
-import { CustomToolkitDto } from '@stack-spot/portal-network/api/agent-tools'
+import { BuiltinToolResponse } from '@stack-spot/portal-network/api/agent'
 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,
+  toolkits: { tools?: { id: string, name: string }[], image_url?: string | null, avatar?: string | null }[] | 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,
+        image: toolkit.image_url || toolkit.avatar || undefined,
       })),
     )
     .flat()

package/src/views/Agents/AgentDescription.tsx

@@ -1,6 +1,5 @@
-import { Box, Flex, IconBox, Text } from '@citric/core'
-import { Agent, Cog } from '@citric/icons'
-import { Avatar, Badge, Skeleton } from '@citric/ui'
+import { Icon } from '@stack-spot/citric-icons'
+import { Badge, Card, IconBox, ImageBox, ImageWithFallback, Skeleton, Text } from '@stack-spot/citric-react'
 import { agentToolsClient } from '@stack-spot/portal-network'
 import { useMemo } from 'react'
 import { toolById } from '../../utils/tools'
@@ -16,12 +15,10 @@ export const AgentDescription = ({ agentId }: { agentId?: string }) => {
   const knowledgeSources = useMemo(
     () => agent?.knowledge_sources_config?.knowledge_sources_details?.map((ks, index) => (
       <li key={index}>
-        <Box className="card-agent-info">
-          <Flex alignItems="center" justifyContent="space-between" pl={2}>
-            <Text colorScheme="light.contrastText">{ks.name}</Text>
-            <Badge palette="gray" appearance="square">{ks.type}</Badge>
-          </Flex>
-        </Box>
+        <Card gap="10px" direction="row" flex={1} size="xxs" bgLevel={500} justifyContent="space-between">
+          <Text color="light.contrastText">{ks.name}</Text>
+          <Badge colorScheme="inverse" appearance="square">{ks.type}</Badge>
+        </Card>
       </li>
     )),
     [agent],
@@ -29,11 +26,10 @@ export const AgentDescription = ({ agentId }: { agentId?: string }) => {
   const skeleton = useMemo(() => {
     const loadingKS: React.ReactElement[] = []
     for (let i = 0; i < numberOfKnowledgeSources; i++) {
-      loadingKS.push(<li key={i}><Skeleton className="ks-skeleton" /></li>)
+      loadingKS.push(<li key={i}><Badge colorPalette="teal" appearance="square"><Skeleton className="ks-skeleton" /></Badge></li>)
     }
     return loadingKS
   }, [numberOfKnowledgeSources])
-
   
   const { tools, multiAgents } = useMemo(() => {
     const tools: React.ReactElement[] = [] 
@@ -46,28 +42,20 @@ export const AgentDescription = ({ agentId }: { agentId?: string }) => {
           const toolWithImage = toolById(tool.id, toolKits)
           tools.push(
             <li key={tool.id}>
-              <Box className="card-agent-info">
-                <Flex alignItems="center">
-                  {toolWithImage?.image ? 
-                    <Avatar size="xxs" sx={{ mr: 3 }}> <img src={toolWithImage?.image} /></Avatar> : 
-                    <IconBox colorIcon="light" sx={{ mr: 3 }}><Cog /></IconBox>}
-                  <Text colorScheme="light.contrastText">{toolWithImage?.name || toolWithImage?.id || 'unknown'}</Text>
-                </Flex>
-              </Box>
+              <Card gap="10px" direction="row" flex={1} size="xxs" bgLevel={500}>
+                <ImageBox><ImageWithFallback src={toolWithImage?.image} fallback={<Icon icon="Cog" />} /></ImageBox>
+                <Text color="light.contrastText">{toolWithImage?.name || toolWithImage?.id || 'unknown'}</Text>
+              </Card>
             </li>,
           )
         }
         if (toolkit.id == 'MULTI_AGENTS'){
           multiAgents.push(
             <li key={tool.id}>
-              <Box className="card-agent-info">
-                <Flex alignItems="center">
-                  <IconBox colorIcon="light" sx={{ mr: 3 }}><Agent /></IconBox>
-                  <Text colorScheme="light.contrastText">
-                    {tool.name}
-                  </Text>
-                </Flex>
-              </Box>
+              <Card gap="10px" direction="row" flex={1} size="xxs" bgLevel={500}>
+                <IconBox icon="Agent" />
+                <Text color="light.contrastText">{tool.name}</Text>
+              </Card>
             </li>,
           )
         }
@@ -77,14 +65,10 @@ export const AgentDescription = ({ agentId }: { agentId?: string }) => {
       for (const tool of toolkit.tools) {
         tools.push(
           <li key={tool.id}>
-            <Box className="card-agent-info">
-              <Flex alignItems="center">
-                {toolkit.avatar ? 
-                  <Avatar size="xxs" sx={{ mr: 3 }}><img src={toolkit.avatar}  /></Avatar> : 
-                  <IconBox colorIcon="light" sx={{ mr: 3 }}><Cog /></IconBox>}
-                <Text colorScheme="light.contrastText">{tool.name}</Text>
-              </Flex>
-            </Box>
+            <Card gap="10px" direction="row" flex={1} size="xxs" bgLevel={500}>
+              <ImageBox><ImageWithFallback src={toolkit.avatar ?? undefined} fallback={<Icon icon="Cog" />} /></ImageBox>
+              <Text color="light.contrastText">{tool.name}</Text>
+            </Card>
           </li>,
         )
       }
@@ -112,7 +96,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 })
+    : agentToolsClient.agents.useQuery({ request: { 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>}
     </>
   )
 }