included a dropdown reference in the documentation

This commit is contained in:
nilsk 2026-03-13 02:19:07 +01:00
parent 41126be7b7
commit 271279ac34
2 changed files with 86 additions and 23 deletions

View File

@ -11,6 +11,7 @@ This folder keeps the Lua manifest (`plugin.lua`) that defines a custom assistan
- [Supported types (matching the Blazor UI components):](#supported-types-matching-the-blazor-ui-components) - [Supported types (matching the Blazor UI components):](#supported-types-matching-the-blazor-ui-components)
- [Component References](#component-references) - [Component References](#component-references)
- [`TEXT_AREA` reference](#text_area-reference) - [`TEXT_AREA` reference](#text_area-reference)
- [`DROPDOWN` reference](#dropdown-reference)
- [`BUTTON` reference](#button-reference) - [`BUTTON` reference](#button-reference)
- [`Action(input)` interface](#actioninput-interface) - [`Action(input)` interface](#actioninput-interface)
- [`BUTTON_GROUP` reference](#button_group-reference) - [`BUTTON_GROUP` reference](#button_group-reference)
@ -104,9 +105,9 @@ ASSISTANT = {
Images referenced via the `plugin://` scheme must exist in the plugin directory (e.g., `assets/example.png`). Drop the file there and point `Src` at it. The component will read the file at runtime, encode it as Base64, and render it inside the assistant UI. Images referenced via the `plugin://` scheme must exist in the plugin directory (e.g., `assets/example.png`). Drop the file there and point `Src` at it. The component will read the file at runtime, encode it as Base64, and render it inside the assistant UI.
| Component | Required Props | Optional Props | Renders | | Component | Required Props | Optional Props | Renders |
|-----------------------|-------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------| |-----------------------|-------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------|
| `TEXT_AREA` | `Name`, `Label` | `HelperText`, `HelperTextOnFocus`, `Adornment`, `AdornmentIcon`, `AdornmentText`, `AdornmentColor`, `Counter`, `MaxLength`, `IsImmediate`, `UserPrompt`, `PrefillText`, `IsSingleLine`, `ReadOnly`, `Class`, `Style` | [MudTextField](https://www.mudblazor.com/components/textfield) | | `TEXT_AREA` | `Name`, `Label` | `HelperText`, `HelperTextOnFocus`, `Adornment`, `AdornmentIcon`, `AdornmentText`, `AdornmentColor`, `Counter`, `MaxLength`, `IsImmediate`, `UserPrompt`, `PrefillText`, `IsSingleLine`, `ReadOnly`, `Class`, `Style` | [MudTextField](https://www.mudblazor.com/components/textfield) |
| `DROPDOWN` | `Name`, `Label`, `Default`, `Items` | `ValueType`, `UserPrompt` | [MudSelect](https://www.mudblazor.com/components/select) | | `DROPDOWN` | `Name`, `Label`, `Default`, `Items` | `IsMultiselect`, `HasSelectAll`, `SelectAllText`, `HelperText`, `OpenIcon`, `CloseIcon`, `IconColor`, `IconPositon`, `Variant`, `ValueType`, `UserPrompt` | [MudSelect](https://www.mudblazor.com/components/select) |
| `BUTTON` | `Name`, `Text`, `Action` | `Variant`, `Color`, `IsFullWidth`, `Size`, `StartIcon`, `EndIcon`, `IconColor`, `IconSize`, `Class`, `Style` | [MudButton](https://www.mudblazor.com/components/button) | | `BUTTON` | `Name`, `Text`, `Action` | `Variant`, `Color`, `IsFullWidth`, `Size`, `StartIcon`, `EndIcon`, `IconColor`, `IconSize`, `Class`, `Style` | [MudButton](https://www.mudblazor.com/components/button) |
| `SWITCH` | `Name`, `Label`, `Value` | `Disabled`, `UserPrompt`, `LabelOn`, `LabelOff`, `LabelPlacement`, `Icon`, `IconColor`, `CheckedColor`, `UncheckedColor`, `Class`, `Style` | [MudSwitch](https://www.mudblazor.com/components/switch) | | `SWITCH` | `Name`, `Label`, `Value` | `Disabled`, `UserPrompt`, `LabelOn`, `LabelOff`, `LabelPlacement`, `Icon`, `IconColor`, `CheckedColor`, `UncheckedColor`, `Class`, `Style` | [MudSwitch](https://www.mudblazor.com/components/switch) |
| `PROVIDER_SELECTION` | `None` | `None` | [`internal`](https://github.com/MindWorkAI/AI-Studio/blob/main/app/MindWork%20AI%20Studio/Components/ProviderSelection.razor) | | `PROVIDER_SELECTION` | `None` | `None` | [`internal`](https://github.com/MindWorkAI/AI-Studio/blob/main/app/MindWork%20AI%20Studio/Components/ProviderSelection.razor) |
@ -170,6 +171,66 @@ More information on rendered components can be found [here](https://www.mudblazo
``` ```
--- ---
### `DROPDOWN` reference
- Use `Type = "DROPDOWN"` to render a MudBlazor select field.
- Required props:
- `Name`: unique state key used in prompt assembly, button actions, and `BuildPrompt(input.fields)`.
- `Label`: visible field label.
- `Default`: dropdown item table with the shape `{ ["Value"] = "<internal value>", ["Display"] = "<visible label>" }`.
- `Items`: array of dropdown item tables with the same shape as `Default`.
- Optional props:
- `UserPrompt`: prompt context text for this field.
- `ValueType`: one of `string`, `int`, `double`, `bool`; currently the dropdown values exposed to prompt building and button actions are handled as the configured item `Value`s, with typical usage being `string`.
- `IsMultiselect`: defaults to `false`; when `true`, the component allows selecting multiple items.
- `HasSelectAll`: defaults to `false`; enables MudBlazor's select-all behavior for multiselect dropdowns.
- `SelectAllText`: custom label for the select-all action in multiselect mode.
- `HelperText`: helper text rendered below the dropdown.
- `OpenIcon`: MudBlazor icon identifier used while the dropdown is closed.
- `CloseIcon`: MudBlazor icon identifier used while the dropdown is open.
- `IconColor`: one of the MudBlazor `Color` enum names such as `Primary`, `Secondary`, `Warning`; invalid or omitted values fall back to `Default`.
- `IconPositon`: one of `Start` or `End`; controls where the icon adornment is rendered.
- `Variant`: one of the MudBlazor `Variant` enum names such as `Text`, `Filled`, `Outlined`; invalid or omitted values fall back to `Outlined`.
- `Class`, `Style`: forwarded to the rendered component for layout/styling.
- Dropdown item shape:
- `Value`: the internal raw value stored in component state and passed to prompt building.
- `Display`: the visible label shown to the user in the menu and selection text.
- Behavior notes:
- For single-select dropdowns, `input.fields.<Name>` is a single raw value such as `germany`.
- For multiselect dropdowns, `input.fields.<Name>` is an array-like Lua table of raw values.
- The UI shows the `Display` text, while prompt assembly and `BuildPrompt(input)` receive the raw `Value`.
- `Default` should usually also exist in `Items`. If it is missing there, the runtime currently still renders it as an available option.
#### Example Dropdown component
```lua
{
["Type"] = "DROPDOWN",
["Props"] = {
["Name"] = "targetCountries",
["Label"] = "Target countries",
["UserPrompt"] = "Use the selected countries in your answer.",
["ValueType"] = "string",
["IsMultiselect"] = true,
["HasSelectAll"] = true,
["SelectAllText"] = "Select all countries",
["HelperText"] = "Pick one or more countries.",
["OpenIcon"] = "Icons.Material.Filled.ArrowDropDown",
["CloseIcon"] = "Icons.Material.Filled.ArrowDropUp",
["IconColor"] = "Secondary",
["IconPositon"] = "End",
["Variant"] = "Filled",
["Default"] = { ["Value"] = "germany", ["Display"] = "Germany" },
["Items"] = {
{ ["Value"] = "germany", ["Display"] = "Germany" },
{ ["Value"] = "austria", ["Display"] = "Austria" },
{ ["Value"] = "france", ["Display"] = "France" }
},
["Class"] = "mb-3",
["Style"] = "min-width: 16rem;"
}
}
```
---
### `BUTTON` reference ### `BUTTON` reference
- Use `Type = "BUTTON"` to render a clickable action button. - Use `Type = "BUTTON"` to render a clickable action button.
- Required props: - Required props:
@ -193,7 +254,8 @@ More information on rendered components can be found [here](https://www.mudblazo
- To update component state, return a table with a `fields` table. - To update component state, return a table with a `fields` table.
- `fields` keys must reference existing component `Name` values. - `fields` keys must reference existing component `Name` values.
- Supported write targets: - Supported write targets:
- `TEXT_AREA`, `DROPDOWN`, `WEB_CONTENT_READER`, `FILE_CONTENT_READER`, `COLOR_PICKER`: string values - `TEXT_AREA`, single-select `DROPDOWN`, `WEB_CONTENT_READER`, `FILE_CONTENT_READER`, `COLOR_PICKER`: string values
- multiselect `DROPDOWN`: array-like Lua table of strings
- `SWITCH`: boolean values - `SWITCH`: boolean values
- Unknown field names and wrong value types are ignored and logged. - Unknown field names and wrong value types are ignored and logged.
@ -390,7 +452,8 @@ If you want full control over prompt composition, define `ASSISTANT.BuildPrompt`
### `input` table shape ### `input` table shape
The function receives a single `input` Lua table with: The function receives a single `input` Lua table with:
- `input.fields`: values keyed by component `Name` - `input.fields`: values keyed by component `Name`
- Text area, dropdown, and readers are strings - Text area, single-select dropdown, and readers are strings
- Multiselect dropdown is an array-like Lua table of strings
- Switch is a boolean - Switch is a boolean
- Color picker is the selected color as a string - Color picker is the selected color as a string
- `input.meta`: per-component metadata keyed by component `Name` - `input.meta`: per-component metadata keyed by component `Name`

View File

@ -31,7 +31,7 @@ public static class ComponentPropSpecs
[AssistantComponentType.DROPDOWN] = new( [AssistantComponentType.DROPDOWN] = new(
required: ["Name", "Label", "Default", "Items"], required: ["Name", "Label", "Default", "Items"],
optional: [ optional: [
"UserPrompt", "IsMultiselect", "HasSelectAll", "SelectAllText", "HelperText", "UserPrompt", "IsMultiselect", "HasSelectAll", "SelectAllText", "HelperText", "ValueType",
"OpenIcon", "CloseIcon", "IconColor", "IconPositon", "Variant", "Class", "Style" "OpenIcon", "CloseIcon", "IconColor", "IconPositon", "Variant", "Class", "Style"
] ]
), ),