feat(ui): add single select component to form extension

Signed-off-by: Petr Bulánek <[email protected]>

Author: PetrBulanek

apps/beeai-sdk-py/examples/request_form_agent.py

@@ -13,6 +13,7 @@
     FormRender,
     MultiSelectField,
     OptionItem,
+    SingleSelectField,
     TextField,
 )
 from beeai_sdk.server import Server
@@ -45,6 +46,15 @@ async def request_form_agent(
                     TextField(id="text_field", label="Text Field", col_span=1),
                     DateField(id="date_field", label="Date Field", col_span=1),
                     FileField(id="file_field", label="File Field", accept=["*/*"], col_span=2),
+                    SingleSelectField(
+                        id="singleselect_field",
+                        label="Single-Select Field",
+                        options=[
+                            OptionItem(id="option1", label="Option 1"),
+                            OptionItem(id="option2", label="Option 2"),
+                        ],
+                        col_span=2,
+                    ),
                     MultiSelectField(
                         id="multiselect_field",
                         label="Multi-Select Field",

apps/beeai-sdk-py/src/beeai_sdk/a2a/extensions/ui/form.py

@@ -52,6 +52,20 @@ class OptionItem(BaseModel):
     label: str
 
 
+class SingleSelectField(BaseField):
+    type: Literal["singleselect"] = "singleselect"
+    options: list[OptionItem]
+    default_value: str | None = None
+
+    @model_validator(mode="after")
+    def default_value_validator(self):
+        if self.default_value:
+            valid_values = {opt.id for opt in self.options}
+            if self.default_value not in valid_values:
+                raise ValueError(f"Invalid default_value: {self.default_value}. Must be one of {valid_values}")
+        return self
+
+
 class MultiSelectField(BaseField):
     type: Literal["multiselect"] = "multiselect"
     options: list[OptionItem]
@@ -73,7 +87,7 @@ class CheckboxField(BaseField):
     default_value: bool = False
 
 
-FormField = TextField | DateField | FileField | MultiSelectField | CheckboxField
+FormField = TextField | DateField | FileField | SingleSelectField | MultiSelectField | CheckboxField
 
 
 class FormRender(BaseModel):
@@ -106,6 +120,11 @@ class FileFieldValue(BaseModel):
     value: list[FileInfo] | None = None
 
 
+class SingleSelectFieldValue(BaseModel):
+    type: Literal["singleselect"] = "singleselect"
+    value: str | None = None
+
+
 class MultiSelectFieldValue(BaseModel):
     type: Literal["multiselect"] = "multiselect"
     value: list[str] | None = None
@@ -116,7 +135,14 @@ class CheckboxFieldValue(BaseModel):
     value: bool | None = None
 
 
-FormFieldValue = TextFieldValue | DateFieldValue | FileFieldValue | MultiSelectFieldValue | CheckboxFieldValue
+FormFieldValue = (
+    TextFieldValue
+    | DateFieldValue
+    | FileFieldValue
+    | SingleSelectFieldValue
+    | MultiSelectFieldValue
+    | CheckboxFieldValue
+)
 
 
 class FormResponse(BaseModel):

apps/beeai-sdk-ts/src/client/a2a/extensions/ui/form.ts

@@ -57,6 +57,24 @@ const fileFieldValue = z.object({
     .nullish(),
 });
 
+const singleSelectField = baseField.extend({
+  type: z.literal('singleselect'),
+  options: z
+    .array(
+      z.object({
+        id: z.string().nonempty(),
+        label: z.string().nonempty(),
+      }),
+    )
+    .nonempty(),
+  default_value: z.string().nullish(),
+});
+
+const singleSelectFieldValue = z.object({
+  type: singleSelectField.shape.type,
+  value: z.string().nullish(),
+});
+
 const multiSelectField = baseField.extend({
   type: z.literal('multiselect'),
   options: z
@@ -86,7 +104,14 @@ const checkboxFieldValue = z.object({
   value: z.boolean().nullish(),
 });
 
-const fieldSchema = z.discriminatedUnion('type', [textField, dateField, fileField, multiSelectField, checkboxField]);
+const fieldSchema = z.discriminatedUnion('type', [
+  textField,
+  dateField,
+  fileField,
+  singleSelectField,
+  multiSelectField,
+  checkboxField,
+]);
 
 const renderSchema = z.object({
   id: z.string().nonempty(),
@@ -105,6 +130,7 @@ const responseSchema = z.object({
       textFieldValue,
       dateFieldValue,
       fileFieldValue,
+      singleSelectFieldValue,
       multiSelectFieldValue,
       checkboxFieldValue,
     ]),
@@ -114,6 +140,7 @@ const responseSchema = z.object({
 export type TextField = z.infer<typeof textField>;
 export type DateField = z.infer<typeof dateField>;
 export type FileField = z.infer<typeof fileField>;
+export type SingleSelectField = z.infer<typeof singleSelectField>;
 export type MultiSelectField = z.infer<typeof multiSelectField>;
 export type CheckboxField = z.infer<typeof checkboxField>;
 

apps/beeai-ui/src/modules/agents/components/ImportAgentsModal.tsx

@@ -107,6 +107,7 @@ export function ImportAgentsModal({ onRequestClose, ...modalProps }: ModalProps)
               {actionField.value === 'update_provider' && providersToUpdate && (
                 <Select
                   id={`${id}:provider`}
+                  size="lg"
                   labelText="Select agent to update"
                   {...register('providerId', { required: true, disabled: isPending })}
                 >

apps/beeai-ui/src/modules/form/components/FormField.tsx

@@ -12,6 +12,7 @@ import { DateField } from './fields/DateField';
 import { FileField } from './fields/FileField';
 import { FileFieldValue } from './fields/FileFieldValue';
 import { MultiSelectField } from './fields/MultiSelectField';
+import { SingleSelectField } from './fields/SingleSelectField';
 import { TextField } from './fields/TextField';
 import classes from './FormField.module.scss';
 
@@ -31,6 +32,7 @@ export function FormField({ field, value }: Props) {
         .with({ type: 'file', value: P.nonNullable }, ({ value }) => <FileFieldValue field={field} value={value} />)
         .otherwise(() => <FileField field={field} />),
     )
+    .with({ type: 'singleselect' }, (field) => <SingleSelectField field={field} />)
     .with({ type: 'multiselect' }, (field) => <MultiSelectField field={field} />)
     .with({ type: 'checkbox' }, (field) => <CheckboxField field={field} />)
     .exhaustive();

apps/beeai-ui/src/modules/form/components/fields/SingleSelectField.tsx

@@ -0,0 +1,30 @@
+/**
+ * Copyright 2025 © BeeAI a Series of LF Projects, LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Select, SelectItem } from '@carbon/react';
+import type { SingleSelectField } from 'beeai-sdk';
+import { useFormContext } from 'react-hook-form';
+
+import type { ValuesOfField } from '#modules/form/types.ts';
+
+interface Props {
+  field: SingleSelectField;
+}
+
+export function SingleSelectField({ field }: Props) {
+  const { id, label, required, options } = field;
+
+  const { register } = useFormContext<ValuesOfField<SingleSelectField>>();
+
+  const inputProps = register(`${id}.value`, { required: Boolean(required) });
+
+  return (
+    <Select id={id} size="lg" labelText={label} {...inputProps}>
+      {options.map(({ id, label }) => (
+        <SelectItem key={id} text={label} value={id} />
+      ))}
+    </Select>
+  );
+}

apps/beeai-ui/src/modules/form/utils.ts

@@ -18,6 +18,7 @@ export function getDefaultValues(fields: FormField[]) {
         .with(
           { type: 'text' },
           { type: 'date' },
+          { type: 'singleselect' },
           { type: 'multiselect' },
           { type: 'checkbox' },
           ({ id, type, default_value }) => [id, { type, value: default_value }],

apps/beeai-ui/src/modules/messages/components/MessageFormResponse.module.scss

@@ -21,7 +21,8 @@
       color: $text-secondary;
     }
     textarea,
-    :global(.cds--date-picker__input) {
+    :global(.cds--date-picker__input),
+    :global(.cds--select-input) {
       color: $text-primary;
       background-color: transparent;
     }

apps/beeai-ui/src/modules/messages/components/MessageFormResponse.tsx

@@ -4,7 +4,15 @@
  */
 
 import { Button } from '@carbon/react';
-import type { CheckboxField, DateField, FileField, FormField, MultiSelectField, TextField } from 'beeai-sdk';
+import type {
+  CheckboxField,
+  DateField,
+  FileField,
+  FormField,
+  MultiSelectField,
+  SingleSelectField,
+  TextField,
+} from 'beeai-sdk';
 import { useMemo } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
@@ -79,6 +87,7 @@ function FormValueRenderer({ field }: { field: FieldWithValue }) {
       {match(field)
         .with({ type: 'text' }, { type: 'date' }, ({ value }) => value)
         .with({ type: 'checkbox' }, ({ value }) => (value ? 'yes' : 'no'))
+        .with({ type: 'singleselect' }, ({ value }) => value)
         .with({ type: 'multiselect' }, ({ value }) => value?.join(', '))
         .with({ type: 'file' }, ({ value }) => value?.map(({ name }) => name).join(', '))
         .otherwise(() => null)}
@@ -91,5 +100,6 @@ type FieldWithValue =
   | FieldWithValueMapper<TextField>
   | FieldWithValueMapper<DateField>
   | FieldWithValueMapper<CheckboxField>
+  | FieldWithValueMapper<SingleSelectField>
   | FieldWithValueMapper<MultiSelectField>
   | FieldWithValueMapper<FileField>;

apps/beeai-ui/src/styles/components/_date-picker.scss

@@ -15,7 +15,6 @@
 
 .cds--date-picker {
   .cds--date-picker__input {
-    background-color: $background;
     &:disabled {
       background-color: $field;
       &,