🎛️ fix: Replace Stacked Capability Dropdowns with a Checkbox List

package.json

@@ -22,7 +22,7 @@
     "format:check": "prettier --check 'src/**/*.{ts,tsx,css,json}'"
   },
   "dependencies": {
-    "@clickhouse/click-ui": "0.2.0-rc.4",
+    "@clickhouse/click-ui": "0.9.1",
     "@librechat/data-schemas": "^0.0.56",
     "@radix-ui/react-dialog": "1.1.15",
     "@tailwindcss/vite": "^4.3.1",

src/components/configuration/FieldRenderer.test.tsx

@@ -54,6 +54,12 @@ interface MockIconButtonProps {
   onClick?: () => void;
   'aria-label'?: string;
 }
+interface MockCheckboxProps {
+  label?: React.ReactNode;
+  checked?: boolean;
+  disabled?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
 
 vi.mock('@clickhouse/click-ui', () => ({
   Switch: (props: MockSwitchProps) => (
@@ -81,6 +87,15 @@ vi.mock('@clickhouse/click-ui', () => ({
   ),
   Icon: ({ name }: MockIconProps) => <span data-testid={`icon-${name}`} />,
   Button: ({ label, onClick }: MockButtonProps) => <button onClick={onClick}>{label}</button>,
+  Checkbox: ({ label, checked, disabled, onCheckedChange }: MockCheckboxProps) => (
+    <input
+      type="checkbox"
+      aria-label={typeof label === 'string' ? label : undefined}
+      checked={checked ?? false}
+      disabled={disabled}
+      onChange={() => onCheckedChange?.(!(checked ?? false))}
+    />
+  ),
   IconButton: ({ icon, onClick, ...props }: MockIconButtonProps) => (
     <button
       onClick={onClick}

src/components/configuration/FieldRenderer.tsx

@@ -23,6 +23,7 @@ import { ListRecordField } from './fields/ListRecordField';
 import { renderCollapsible } from './renderCollapsible';
 import { TextareaField } from './fields/TextareaField';
 import { KeyValueField } from './fields/KeyValueField';
+import { EnumSetField } from './fields/EnumSetField';
 import { NumberField } from './fields/NumberField';
 import { SecretField } from './fields/SecretField';
 import { ToggleField } from './fields/ToggleField';
@@ -333,6 +334,29 @@ export function SingleFieldRenderer({
     const arrayValue = Array.isArray(currentValue) ? currentValue : [];
     const itemType = getArrayItemType(field.type);
 
+    if (itemType.startsWith('enum(')) {
+      const schemaDefault = schemaDefaults?.[path];
+      return (
+        <ConfigRow
+          title={fieldLabel}
+          description={description}
+          disabled={disabled}
+          fieldId={fieldId}
+          {...rowProps}
+        >
+          <EnumSetField
+            id={fieldId}
+            value={Array.isArray(currentValue) ? currentValue.map(String) : undefined}
+            options={getEnumOptions(itemType)}
+            onChange={(v) => onChange(path, v)}
+            defaultValue={Array.isArray(schemaDefault) ? schemaDefault.map(String) : undefined}
+            disabled={disabled}
+            aria-label={fieldLabel}
+          />
+        </ConfigRow>
+      );
+    }
+
     if (isStringLikeItemType(itemType)) {
       return (
         <ConfigRow
@@ -348,7 +372,6 @@ export function SingleFieldRenderer({
             onChange={(v) => onChange(path, v)}
             itemLabel={localize(`com_config_field_${field.key}_item`)}
             disabled={disabled}
-            options={itemType.startsWith('enum(') ? getEnumOptions(itemType) : undefined}
             aria-label={fieldLabel}
           />
         </ConfigRow>
@@ -1147,6 +1170,20 @@ export function renderInlineField(
   if (controlType === 'array') {
     const arrayValue = Array.isArray(fieldValue) ? fieldValue : [];
     const itemType = getArrayItemType(field.type);
+    if (itemType.startsWith('enum(')) {
+      return (
+        <InlineRow key={field.key} label={fieldLabel} fieldId={fieldId} required={required}>
+          <EnumSetField
+            id={fieldId}
+            value={Array.isArray(fieldValue) ? fieldValue.map(String) : undefined}
+            options={getEnumOptions(itemType)}
+            onChange={(v) => onChange(field.key, v)}
+            disabled={disabled}
+            aria-label={fieldLabel}
+          />
+        </InlineRow>
+      );
+    }
     if (isStringLikeItemType(itemType)) {
       return (
         <InlineRow key={field.key} label={fieldLabel} fieldId={fieldId} required={required}>
@@ -1155,7 +1192,6 @@ export function renderInlineField(
             values={arrayValue.map(String)}
             onChange={(v) => onChange(field.key, v)}
             disabled={disabled}
-            options={itemType.startsWith('enum(') ? getEnumOptions(itemType) : undefined}
             aria-label={fieldLabel}
           />
         </InlineRow>

src/components/configuration/fields/EnumSetField.test.tsx

@@ -0,0 +1,105 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import type * as t from '@/types';
+import { EnumSetField } from './EnumSetField';
+
+vi.mock('@/hooks/useLocalize', () => ({
+  default: () => (key: string, options?: Record<string, string | number>) =>
+    options ? `${key} ${Object.values(options).join('/')}` : key,
+  useLocalize: () => (key: string, options?: Record<string, string | number>) =>
+    options ? `${key} ${Object.values(options).join('/')}` : key,
+}));
+
+const options: t.SelectOption[] = [
+  { label: 'Code interpreter', value: 'code_interpreter' },
+  { label: 'File search', value: 'file_search' },
+  { label: 'Tools', value: 'tools' },
+];
+
+describe('EnumSetField', () => {
+  it('renders a checkbox for every option', () => {
+    render(<EnumSetField id="caps" value={[]} options={options} onChange={() => {}} />);
+    expect(screen.getAllByRole('checkbox')).toHaveLength(3);
+    expect(screen.getByRole('checkbox', { name: 'Code interpreter' })).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: 'File search' })).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: 'Tools' })).toBeInTheDocument();
+  });
+
+  it('checks exactly the options present in the value array', () => {
+    render(
+      <EnumSetField id="caps" value={['file_search']} options={options} onChange={() => {}} />,
+    );
+    expect(screen.getByRole('checkbox', { name: 'File search' })).toBeChecked();
+    expect(screen.getByRole('checkbox', { name: 'Code interpreter' })).not.toBeChecked();
+    expect(screen.getByRole('checkbox', { name: 'Tools' })).not.toBeChecked();
+  });
+
+  it('adds a toggled-on option in canonical option order', () => {
+    const onChange = vi.fn();
+    render(<EnumSetField id="caps" value={['tools']} options={options} onChange={onChange} />);
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Code interpreter' }));
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(['code_interpreter', 'tools']);
+  });
+
+  it('removes a toggled-off option and writes the full remaining array', () => {
+    const onChange = vi.fn();
+    render(
+      <EnumSetField
+        id="caps"
+        value={['code_interpreter', 'tools']}
+        options={options}
+        onChange={onChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Tools' }));
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(['code_interpreter']);
+  });
+
+  it('writes an empty array when the last checked option is toggled off', () => {
+    const onChange = vi.fn();
+    render(<EnumSetField id="caps" value={['tools']} options={options} onChange={onChange} />);
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Tools' }));
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith([]);
+  });
+
+  it('renders schema defaults as checked hints when unset without calling onChange', () => {
+    const onChange = vi.fn();
+    render(
+      <EnumSetField
+        id="caps"
+        value={undefined}
+        defaultValue={['code_interpreter', 'file_search']}
+        options={options}
+        onChange={onChange}
+      />,
+    );
+    expect(onChange).not.toHaveBeenCalled();
+    expect(screen.getByRole('checkbox', { name: 'Code interpreter' })).toBeChecked();
+    expect(screen.getByRole('checkbox', { name: 'File search' })).toBeChecked();
+    expect(screen.getByRole('checkbox', { name: 'Tools' })).not.toBeChecked();
+  });
+
+  it('derives the first written array from the schema default when unset', () => {
+    const onChange = vi.fn();
+    render(
+      <EnumSetField
+        id="caps"
+        value={undefined}
+        defaultValue={['code_interpreter', 'file_search']}
+        options={options}
+        onChange={onChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Tools' }));
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(['code_interpreter', 'file_search', 'tools']);
+  });
+
+  it('shows a selected count indicator', () => {
+    render(<EnumSetField id="caps" value={['tools']} options={options} onChange={() => {}} />);
+    expect(screen.getByText('com_config_enum_selected_count 1/3')).toBeInTheDocument();
+  });
+});

src/components/configuration/fields/EnumSetField.tsx

@@ -0,0 +1,52 @@
+import { Checkbox } from '@clickhouse/click-ui';
+import type * as t from '@/types';
+import { useLocalize } from '@/hooks';
+
+export function EnumSetField({
+  id,
+  value,
+  options,
+  onChange,
+  defaultValue,
+  disabled,
+  'aria-label': ariaLabel,
+}: t.EnumSetFieldProps) {
+  const localize = useLocalize();
+  const checked = new Set(value ?? defaultValue ?? []);
+  const selectedCount = options.reduce((n, opt) => n + (checked.has(opt.value) ? 1 : 0), 0);
+
+  const handleToggle = (optionValue: string) => {
+    const next = new Set(checked);
+    if (next.has(optionValue)) {
+      next.delete(optionValue);
+    } else {
+      next.add(optionValue);
+    }
+    onChange(options.filter((opt) => next.has(opt.value)).map((opt) => opt.value));
+  };
+
+  return (
+    <div
+      id={id}
+      role="group"
+      aria-label={ariaLabel}
+      className="flex w-full max-w-100 flex-col gap-1.5"
+    >
+      <span className="text-xs text-(--cui-color-text-muted)">
+        {localize('com_config_enum_selected_count', {
+          selected: selectedCount,
+          total: options.length,
+        })}
+      </span>
+      {options.map((opt) => (
+        <Checkbox
+          key={opt.value}
+          label={opt.label}
+          checked={checked.has(opt.value)}
+          disabled={disabled}
+          onCheckedChange={() => handleToggle(opt.value)}
+        />
+      ))}
+    </div>
+  );
+}