feat(ui): new ux for run model settings (#1386)

Signed-off-by: Petr Kadlec <petr@puradesign.cz>

Author: kapetr

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

@@ -10,9 +10,11 @@
 from beeai_sdk.a2a.extensions.ui.settings import (
     CheckboxField,
     CheckboxGroupField,
+    OptionItem,
     SettingsExtensionServer,
     SettingsExtensionSpec,
     SettingsRender,
+    SingleSelectField,
 )
 from beeai_sdk.a2a.types import RunYield
 from beeai_sdk.server import Server
@@ -39,7 +41,17 @@ async def settings_agent(
                                 default_value=True,
                             )
                         ],
-                    )
+                    ),
+                    SingleSelectField(
+                        id="response_style",
+                        label="Response Style",
+                        options=[
+                            OptionItem(value="concise", label="Concise"),
+                            OptionItem(value="detailed", label="Detailed"),
+                            OptionItem(value="humorous", label="Humorous"),
+                        ],
+                        default_value="concise",
+                    ),
                 ],
             ),
         ),

…gs/SingleSelectSettingsField.module.scss …ents/RadioSelect/RadioSelect.module.scssapps/beeai-ui/src/modules/runs/settings/SingleSelectSettingsField.module.scss renamed to apps/beeai-ui/src/components/RadioSelect/RadioSelect.module.scss apps/beeai-ui/src/modules/runs/settings/SingleSelectSettingsField.module.scss renamed to apps/beeai-ui/src/components/RadioSelect/RadioSelect.module.scss

@@ -0,0 +1,48 @@
+/**
+ * Copyright 2025 © BeeAI a Series of LF Projects, LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Checkmark } from '@carbon/icons-react';
+import { RadioButton, RadioButtonGroup } from '@carbon/react';
+import clsx from 'clsx';
+import { useId } from 'react';
+
+import classes from './RadioSelect.module.scss';
+
+interface Props {
+  name: string;
+  label: string;
+  value?: string;
+  options: { value: string; label: string }[];
+  onChange: (value: string) => void;
+}
+
+export function RadioSelect({ name, label, value, options, onChange }: Props) {
+  const htmlId = useId();
+
+  return (
+    <RadioButtonGroup
+      legendText={label}
+      name={name}
+      valueSelected={value}
+      orientation="vertical"
+      className={classes.root}
+    >
+      {options.map(({ value: optionValue, label }) => {
+        const isSelected = optionValue === value;
+        return (
+          <div className={clsx(classes.option, { [classes.selected]: isSelected })} key={optionValue}>
+            <RadioButton
+              id={`${htmlId}:${optionValue}`}
+              value={optionValue}
+              labelText={label}
+              onClick={() => onChange(optionValue)}
+            />
+            {optionValue === value && <Checkmark size={16} />}
+          </div>
+        );
+      })}
+    </RadioButtonGroup>
+  );
+}

apps/beeai-ui/src/components/RadioSelect/RadioSelect.tsx

@@ -0,0 +1,22 @@
+/**
+ * Copyright 2025 © BeeAI a Series of LF Projects, LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.root {
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  align-items: center;
+}
+
+.settings {
+  display: flex;
+  gap: $spacing-03;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  text-align: end;
+  gap: $spacing-04;
+}

apps/beeai-ui/src/modules/form/components/FormActionBar.module.scss

@@ -0,0 +1,48 @@
+/**
+ * Copyright 2025 © BeeAI a Series of LF Projects, LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Button } from '@carbon/react';
+import { useMergeRefs } from '@floating-ui/react';
+
+import { useApp } from '#contexts/App/index.ts';
+import { RunModels } from '#modules/runs/settings/RunModels.tsx';
+import { RunSettings } from '#modules/runs/settings/RunSettings.tsx';
+import { useRunSettingsDialog } from '#modules/runs/settings/useRunSettingsDialog.ts';
+
+import classes from './FormActionBar.module.scss';
+
+interface Props {
+  showSubmitButton?: boolean;
+  submitLabel: string;
+  showRunSettings?: boolean;
+}
+
+export function FormActionBar({ showSubmitButton = true, submitLabel, showRunSettings }: Props) {
+  const {
+    config: { featureFlags },
+  } = useApp();
+
+  const modelsDialog = useRunSettingsDialog({ blockOffset: 8 });
+  const settingsDialog = useRunSettingsDialog({ blockOffset: 8 });
+  const formRefs = useMergeRefs([modelsDialog.refs.setPositionReference, settingsDialog.refs.setPositionReference]);
+
+  return (
+    <div className={classes.root} ref={formRefs}>
+      {showRunSettings && (
+        <div className={classes.settings}>
+          <RunSettings dialog={settingsDialog} iconOnly={false} />
+          {featureFlags.ModelProviders && <RunModels dialog={modelsDialog} iconOnly={false} />}
+        </div>
+      )}
+      {showSubmitButton && (
+        <div className={classes.buttons}>
+          <Button type="submit" size="md">
+            {submitLabel}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -8,17 +8,3 @@
   flex-direction: column;
   row-gap: $spacing-06;
 }
-
-.fields {
-  display: grid;
-  column-gap: $spacing-04;
-  row-gap: $spacing-06;
-  grid-template-columns: repeat(var(--grid-columns, 1), minmax(0, 1fr));
-}
-
-.buttons {
-  display: flex;
-  justify-content: flex-end;
-  text-align: end;
-  gap: $spacing-04;
-}

apps/beeai-ui/src/modules/form/components/FormRenderer.module.scss

@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Button } from '@carbon/react';
 import type { FormRender } from 'beeai-sdk';
 import { FormProvider, useForm } from 'react-hook-form';
 
@@ -13,6 +12,7 @@ import { isNotNull } from '#utils/helpers.ts';
 
 import type { RunFormValues } from '../types';
 import { getDefaultValues } from '../utils';
+import { FormActionBar } from './FormActionBar';
 import { FormFields } from './FormFields';
 import classes from './FormRenderer.module.scss';
 
@@ -21,13 +21,15 @@ interface Props {
   defaultHeading?: string | null;
   showHeading?: boolean;
   isDisabled?: boolean;
+  showRunSettings?: boolean;
   onSubmit: (values: RunFormValues) => void;
 }
 
 export function FormRenderer({
   definition,
   defaultHeading,
   showHeading: showHeadingProp = true,
+  showRunSettings,
   isDisabled,
   onSubmit,
 }: Props) {
@@ -52,15 +54,11 @@ export function FormRenderer({
 
           <FormFields fields={fields} columns={columns} />
 
-          {!isDisabled && (
-            <>
-              <div className={classes.buttons}>
-                <Button type="submit" size="md">
-                  {submit_label ?? 'Submit'}
-                </Button>
-              </div>
-            </>
-          )}
+          <FormActionBar
+            submitLabel={submit_label ?? 'Submit'}
+            showRunSettings={showRunSettings}
+            showSubmitButton={!isDisabled}
+          />
         </fieldset>
       </form>
     </FormProvider>

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

@@ -27,6 +27,7 @@ export function FormRenderView({ formRender }: Props) {
     <Container size="sm" className={classes.root}>
       <FormRenderer
         definition={formRender}
+        showRunSettings
         onSubmit={(values: RunFormValues) => {
           const form = {
             request: formRender,

apps/beeai-ui/src/modules/runs/components/FormRenderView.tsx

@@ -16,9 +16,14 @@ export function MCPConfig() {
   const id = useId();
   const { selectedMCPServers, selectMCPServer } = useAgentDemands();
 
+  const entries = Object.entries(selectedMCPServers);
+  if (!entries.length) {
+    return null;
+  }
+
   return (
     <div className={classes.root}>
-      {Object.entries(selectedMCPServers).map(([key, value]) => (
+      {entries.map(([key, value]) => (
         <TextInput
           value={value}
           onChange={(e) => selectMCPServer(key, e.target.value)}