documented the new component

This commit is contained in:
Nils Kruthoff 2026-07-20 16:41:17 +02:00
parent 69718261e5
commit 444f7b7ca2
No known key found for this signature in database
GPG Key ID: A5C0151B4DDB172C
2 changed files with 23 additions and 6 deletions

View File

@ -153,7 +153,8 @@ ASSISTANT = {
- `TIME_PICKER`: time input based on `MudTimePicker`; requires `Name`, `Label`, and may include `Value`, `Color`, `Placeholder`, `HelperText`, `TimeFormat`, `AmPm`, `PickerVariant`, `UserPrompt`, `Class`, `Style`. - `TIME_PICKER`: time input based on `MudTimePicker`; requires `Name`, `Label`, and may include `Value`, `Color`, `Placeholder`, `HelperText`, `TimeFormat`, `AmPm`, `PickerVariant`, `UserPrompt`, `Class`, `Style`.
- `PROVIDER_SELECTION` / `PROFILE_SELECTION`: hooks into the shared provider/profile selectors. - `PROVIDER_SELECTION` / `PROFILE_SELECTION`: hooks into the shared provider/profile selectors.
- `WEB_CONTENT_READER`: renders `ReadWebContent`; include `Name`, `UserPrompt`, `Preselect`, `PreselectContentCleanerAgent`. - `WEB_CONTENT_READER`: renders `ReadWebContent`; include `Name`, `UserPrompt`, `Preselect`, `PreselectContentCleanerAgent`.
- `FILE_CONTENT_READER`: renders `ReadFileContent`; include `Name`, `UserPrompt`. - `FILE_CONTENT_READER`: renders `ReadFileContent`; use it when exactly one expected file should be read and inserted into the prompt; include `Name`, `UserPrompt`.
- `FILE_ATTACHMENTS`: renders `AttachDocuments`; use it when the assistant should accept multiple documents/images or an unpredictable number of files as context; include `Name`, and may include `Heading`, `UserPrompt`, `CatchAllDocuments`, `UseSmallForm`, `Class`, `Style`. Keep `UseSmallForm = false` by default unless compact layout is explicitly required.
- `IMAGE`: embeds a static illustration; `Props` must include `Src` plus optionally `Alt` and `Caption`. `Src` can be an HTTP/HTTPS URL, a `data:` URI, or a plugin-relative path (`plugin://assets/your-image.png`). The runtime will convert plugin-relative paths into `data:` URLs (base64). - `IMAGE`: embeds a static illustration; `Props` must include `Src` plus optionally `Alt` and `Caption`. `Src` can be an HTTP/HTTPS URL, a `data:` URI, or a plugin-relative path (`plugin://assets/your-image.png`). The runtime will convert plugin-relative paths into `data:` URLs (base64).
- `HEADING`, `TEXT`, `LIST`: descriptive helpers. - `HEADING`, `TEXT`, `LIST`: descriptive helpers.
@ -169,6 +170,7 @@ Images referenced via the `plugin://` scheme must exist in the plugin directory
| `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) |
| `PROFILE_SELECTION` | `None` | `None` | [`internal`](https://github.com/MindWorkAI/AI-Studio/blob/main/app/MindWork%20AI%20Studio/Components/ProfileSelection.razor) | | `PROFILE_SELECTION` | `None` | `None` | [`internal`](https://github.com/MindWorkAI/AI-Studio/blob/main/app/MindWork%20AI%20Studio/Components/ProfileSelection.razor) |
| `FILE_CONTENT_READER` | `Name` | `UserPrompt` | [`internal`](https://github.com/MindWorkAI/AI-Studio/blob/main/app/MindWork%20AI%20Studio/Components/ReadFileContent.razor) | | `FILE_CONTENT_READER` | `Name` | `UserPrompt` | [`internal`](https://github.com/MindWorkAI/AI-Studio/blob/main/app/MindWork%20AI%20Studio/Components/ReadFileContent.razor) |
| `FILE_ATTACHMENTS` | `Name` | `Heading`, `UserPrompt`, `CatchAllDocuments`, `UseSmallForm`, `Class`, `Style` | [`internal`](https://github.com/MindWorkAI/AI-Studio/blob/main/app/MindWork%20AI%20Studio/Components/AttachDocuments.razor) |
| `WEB_CONTENT_READER` | `Name` | `UserPrompt` | [`internal`](https://github.com/MindWorkAI/AI-Studio/blob/main/app/MindWork%20AI%20Studio/Components/ReadWebContent.razor) | | `WEB_CONTENT_READER` | `Name` | `UserPrompt` | [`internal`](https://github.com/MindWorkAI/AI-Studio/blob/main/app/MindWork%20AI%20Studio/Components/ReadWebContent.razor) |
| `COLOR_PICKER` | `Name`, `Label` | `Placeholder`, `Color`, `ShowAlpha`, `ShowToolbar`, `ShowModeSwitch`, `PickerVariant`, `UserPrompt`, `Class`, `Style` | [MudColorPicker](https://www.mudblazor.com/components/colorpicker) | | `COLOR_PICKER` | `Name`, `Label` | `Placeholder`, `Color`, `ShowAlpha`, `ShowToolbar`, `ShowModeSwitch`, `PickerVariant`, `UserPrompt`, `Class`, `Style` | [MudColorPicker](https://www.mudblazor.com/components/colorpicker) |
| `DATE_PICKER` | `Name`, `Label` | `Value`, `Color`, `Placeholder`, `HelperText`, `DateFormat`, `PickerVariant`, `UserPrompt`, `Class`, `Style` | [MudDatePicker](https://www.mudblazor.com/components/datepicker) | | `DATE_PICKER` | `Name`, `Label` | `Value`, `Color`, `Placeholder`, `HelperText`, `DateFormat`, `PickerVariant`, `UserPrompt`, `Class`, `Style` | [MudDatePicker](https://www.mudblazor.com/components/datepicker) |
@ -331,6 +333,7 @@ More information on rendered components can be found [here](https://www.mudblazo
- Supported `Value` write targets: - Supported `Value` write targets:
- `TEXT_AREA`, single-select `DROPDOWN`, `WEB_CONTENT_READER`, `FILE_CONTENT_READER`, `COLOR_PICKER`, `DATE_PICKER`, `DATE_RANGE_PICKER`, `TIME_PICKER`: string values - `TEXT_AREA`, single-select `DROPDOWN`, `WEB_CONTENT_READER`, `FILE_CONTENT_READER`, `COLOR_PICKER`, `DATE_PICKER`, `DATE_RANGE_PICKER`, `TIME_PICKER`: string values
- multiselect `DROPDOWN`: array-like Lua table of strings - multiselect `DROPDOWN`: array-like Lua table of strings
- `FILE_ATTACHMENTS`: array-like Lua table of file path strings
- `SWITCH`: boolean values - `SWITCH`: boolean values
- Unknown component names, wrong value types, unsupported prop values, and non-writeable props are ignored and logged. - Unknown component names, wrong value types, unsupported prop values, and non-writeable props are ignored and logged.
@ -664,7 +667,7 @@ user prompt:
<value extracted from the component> <value extracted from the component>
``` ```
For switches the “value” is the boolean `true/false`; for readers it is the fetched/selected content; for color pickers it is the selected color text (for example `#FFAA00` or `rgba(...)`, depending on the picker mode); for date and time pickers it is the formatted date, date range, or time string. Always provide a meaningful `UserPrompt` so the final concatenated prompt remains coherent from the LLMs perspective. For switches the “value” is the boolean `true/false`; for `WEB_CONTENT_READER` and `FILE_CONTENT_READER` it is the fetched or selected content; for `FILE_ATTACHMENTS` it is the selected file paths and the files are also attached to the chat request; for color pickers it is the selected color text (for example `#FFAA00` or `rgba(...)`, depending on the picker mode); for date and time pickers it is the formatted date, date range, or time string. Always provide a meaningful `UserPrompt` so the final concatenated prompt remains coherent from the LLMs perspective.
## Advanced Prompt Assembly - BuildPrompt() ## Advanced Prompt Assembly - BuildPrompt()
If you want full control over prompt composition, define `ASSISTANT.BuildPrompt` as a Lua function. When present, AI Studio calls it and uses its return value as the final user prompt. The default prompt assembly is skipped. If you want full control over prompt composition, define `ASSISTANT.BuildPrompt` as a Lua function. When present, AI Studio calls it and uses its return value as the final user prompt. The default prompt assembly is skipped.
@ -688,7 +691,7 @@ The function receives a single `input` Lua table with:
``` ```
input = { input = {
["<Name>"] = { ["<Name>"] = {
Type = "<TEXT_AREA|DROPDOWN|SWITCH|WEB_CONTENT_READER|FILE_CONTENT_READER|COLOR_PICKER|DATE_PICKER|DATE_RANGE_PICKER|TIME_PICKER>", Type = "<TEXT_AREA|DROPDOWN|SWITCH|WEB_CONTENT_READER|FILE_CONTENT_READER|FILE_ATTACHMENTS|COLOR_PICKER|DATE_PICKER|DATE_RANGE_PICKER|TIME_PICKER>",
Value = "<string|boolean|table>", Value = "<string|boolean|table>",
Props = { Props = {
Name = "<string>", Name = "<string>",

View File

@ -342,10 +342,24 @@ ASSISTANT = {
} }
}, },
{ {
["Type"] = "FILE_CONTENT_READER", -- allows the user to load local files ["Type"] = "FILE_CONTENT_READER", -- allows the user to load one expected local file and inject its content into the prompt
["Props"] = { ["Props"] = {
["Name"] = "<unique identifier of this component>", -- required ["Name"] = "<unique identifier of this component>", -- required
["UserPrompt"] = "<help text reminding the user what kind of file they should load>" ["UserPrompt"] = "<prompt context for the selected file>",
["Class"] = "<optional MudBlazor or css classes>",
["Style"] = "<optional css styles>",
}
},
{
["Type"] = "FILE_ATTACHMENTS", -- allows the user to attach multiple local documents or images as context
["Props"] = {
["Name"] = "<unique identifier of this component>", -- required
["Heading"] = "<component heading>",
["CatchAllDocuments"] = true, -- whether the component catches all documents that are hovered over the AI Studio window and not only over the drop zone
["UseSmallForm"] = false, -- whether the component should be rendered compact; keep false by default unless compact layout is explicitly needed
["UserPrompt"] = "<prompt context for the selected file(s)>",
["Class"] = "<optional MudBlazor or css classes>",
["Style"] = "<optional css styles>",
} }
}, },
{ {
@ -358,7 +372,7 @@ ASSISTANT = {
["ShowToolbar"] = true, -- weather the toolbar to toggle between picker, grid or palette is shown ["ShowToolbar"] = true, -- weather the toolbar to toggle between picker, grid or palette is shown
["ShowModeSwitch"] = true, -- weather switch to toggle between RGB(A), HEX or HSL color mode is shown ["ShowModeSwitch"] = true, -- weather switch to toggle between RGB(A), HEX or HSL color mode is shown
["PickerVariant"] = "<Dialog|Inline|Static>", -- different rendering modes: `Dialog` opens the picker in a modal type screen, `Inline` shows the picker next to the input field and `Static` renders the picker widget directly (default); Case sensitiv ["PickerVariant"] = "<Dialog|Inline|Static>", -- different rendering modes: `Dialog` opens the picker in a modal type screen, `Inline` shows the picker next to the input field and `Static` renders the picker widget directly (default); Case sensitiv
["UserPrompt"] = "<help text reminding the user what kind of file they should load>", ["UserPrompt"] = "<prompt context for the selected color>",
} }
}, },
{ {