From dea9c9ed6f9ce73ef2343eb6da0b1cad4fbc420b Mon Sep 17 00:00:00 2001 From: nilsk Date: Fri, 13 Mar 2026 23:47:41 +0100 Subject: [PATCH] added accordions as new layout components - resembles MudExpansionPanels --- .../Assistants/Dynamic/AssistantDynamic.razor | 49 +++++- .../Plugins/assistants/README.md | 148 +++++++++++++++--- .../Plugins/assistants/plugin.lua | 40 +++++ .../Assistants/AssistantComponentFactory.cs | 4 + .../DataModel/AssistantComponentPropHelper.cs | 4 +- .../DataModel/AssistantComponentType.cs | 2 + .../DataModel/ComponentPropSpecs.cs | 14 ++ .../DataModel/Layout/AssistantAccordion.cs | 64 ++++++++ .../Layout/AssistantAccordionSection.cs | 102 ++++++++++++ .../DataModel/Layout/AssistantStack.cs | 6 +- 10 files changed, 408 insertions(+), 25 deletions(-) create mode 100644 app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/Layout/AssistantAccordion.cs create mode 100644 app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/Layout/AssistantAccordionSection.cs diff --git a/app/MindWork AI Studio/Assistants/Dynamic/AssistantDynamic.razor b/app/MindWork AI Studio/Assistants/Dynamic/AssistantDynamic.razor index 7b729b23..cb68aeba 100644 --- a/app/MindWork AI Studio/Assistants/Dynamic/AssistantDynamic.razor +++ b/app/MindWork AI Studio/Assistants/Dynamic/AssistantDynamic.razor @@ -201,7 +201,7 @@ } break; + case AssistantComponentType.LAYOUT_ACCORDION: + if (component is AssistantAccordion assistantAccordion) + { + var accordion = assistantAccordion; + + @this.RenderChildren(accordion.Children) + + } + break; + case AssistantComponentType.LAYOUT_ACCORDION_SECTION: + if (component is AssistantAccordionSection assistantAccordionSection) + { + var accordionSection = assistantAccordionSection; + var textColor = accordionSection.IsDisabled ? Color.Info : AssistantComponentPropHelper.GetColor(accordionSection.HeaderColor, Color.Inherit); + + +
+ + + @accordionSection.HeaderText + +
+ + + @this.RenderChildren(accordionSection.Children) + + + } + break; case AssistantComponentType.PROVIDER_SELECTION: if (component is AssistantProviderSelection providerSelection) { diff --git a/app/MindWork AI Studio/Plugins/assistants/README.md b/app/MindWork AI Studio/Plugins/assistants/README.md index a40a56ec..b1ccb3f9 100644 --- a/app/MindWork AI Studio/Plugins/assistants/README.md +++ b/app/MindWork AI Studio/Plugins/assistants/README.md @@ -31,6 +31,8 @@ This folder keeps the Lua manifest (`plugin.lua`) that defines a custom assistan - [`LAYOUT_ITEM` reference](#layout_item-reference) - [`LAYOUT_PAPER` reference](#layout_paper-reference) - [`LAYOUT_STACK` reference](#layout_stack-reference) + - [`LAYOUT_ACCORDION` reference](#layout_accordion-reference) + - [`LAYOUT_ACCORDION_SECTION` reference](#layout_accordion_section-reference) - [Useful Lua Functions](#useful-lua-functions) - [Included lua libraries](#included-lua-libraries) - [Logging helpers](#logging-helpers) @@ -94,6 +96,8 @@ ASSISTANT = { - `LAYOUT_ITEM`: renders a `MudItem`; use it inside `LAYOUT_GRID` and configure breakpoints with `Xs`, `Sm`, `Md`, `Lg`, `Xl`, `Xxl`, plus optional `Class`, `Style`. - `LAYOUT_PAPER`: renders a `MudPaper`; may include `Elevation`, `Height`, `MaxHeight`, `MinHeight`, `Width`, `MaxWidth`, `MinWidth`, `IsOutlined`, `IsSquare`, `Class`, `Style`. - `LAYOUT_STACK`: renders a `MudStack`; may include `IsRow`, `IsReverse`, `Breakpoint`, `Align`, `Justify`, `Stretch`, `Wrap`, `Spacing`, `Class`, `Style`. +- `LAYOUT_ACCORDION`: renders a `MudExpansionPanels`; may include `AllowMultiSelection`, `IsDense`, `HasOutline`, `IsSquare`, `Elevation`, `HasSectionPaddings`, `Class`, `Style`. +- `LAYOUT_ACCORDION_SECTION`: renders a `MudExpansionPanel`; requires `Name`, `HeaderText`, and may include `IsDisabled`, `IsExpanded`, `IsDense`, `HasInnerPadding`, `HideIcon`, `HeaderIcon`, `HeaderColor`, `HeaderTypo`, `HeaderAlign`, `MaxHeight`, `ExpandIcon`, `Class`, `Style`. - `SWITCH`: boolean option; requires `Name`, `Label`, `Value`, and may include `Disabled`, `UserPrompt`, `LabelOn`, `LabelOff`, `LabelPlacement`, `Icon`, `IconColor`, `CheckedColor`, `UncheckedColor`, `Class`, `Style`. - `COLOR_PICKER`: color input based on `MudColorPicker`; requires `Name`, `Label`, and may include `Placeholder`, `ShowAlpha`, `ShowToolbar`, `ShowModeSwitch`, `PickerVariant`, `UserPrompt`, `Class`, `Style`. - `PROVIDER_SELECTION` / `PROFILE_SELECTION`: hooks into the shared provider/profile selectors. @@ -104,26 +108,28 @@ 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. -| 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) | -| `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) | -| `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) | -| `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) | -| `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`, `ShowAlpha`, `ShowToolbar`, `ShowModeSwitch`, `PickerVariant`, `UserPrompt`, `Class`, `Style` | [MudColorPicker](https://www.mudblazor.com/components/colorpicker) | -| `HEADING` | `Text` | `Level` | [MudText Typo="Typo."](https://www.mudblazor.com/components/typography) | -| `TEXT` | `Content` | `None` | [MudText Typo="Typo.body1"](https://www.mudblazor.com/components/typography) | -| `LIST` | `Type`, `Text` | `Href` | [MudList](https://www.mudblazor.com/componentss/list) | -| `IMAGE` | `Src` | `Alt`, `Caption`,`Src` | [MudImage](https://www.mudblazor.com/components/image) | -| `BUTTON_GROUP` | `None` | `Variant`, `Color`, `Size`, `OverrideStyles`, `Vertical`, `DropShadow`, `Class`, `Style` | [MudButtonGroup](https://www.mudblazor.com/components/buttongroup) | -| `LAYOUT_PAPER` | `None` | `Elevation`, `Height`, `MaxHeight`, `MinHeight`, `Width`, `MaxWidth`, `MinWidth`, `IsOutlined`, `IsSquare`, `Class`, `Style` | [MudPaper](https://www.mudblazor.com/components/paper) | -| `LAYOUT_ITEM` | `None` | `Xs`, `Sm`, `Md`, `Lg`, `Xl`, `Xxl`, `Class`, `Style` | [MudItem](https://www.mudblazor.com/api/MudItem) | -| `LAYOUT_STACK` | `None` | `IsRow`, `IsReverse`, `Breakpoint`, `Align`, `Justify`, `Stretch`, `Wrap`, `Spacing`, `Class`, `Style` | [MudStack](https://www.mudblazor.com/components/stack) | -| `LAYOUT_GRID` | `None` | `Justify`, `Spacing`, `Class`, `Style` | [MudGrid](https://www.mudblazor.com/components/grid) | +| 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) | +| `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) | +| `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) | +| `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) | +| `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`, `ShowAlpha`, `ShowToolbar`, `ShowModeSwitch`, `PickerVariant`, `UserPrompt`, `Class`, `Style` | [MudColorPicker](https://www.mudblazor.com/components/colorpicker) | +| `HEADING` | `Text` | `Level` | [MudText Typo="Typo."](https://www.mudblazor.com/components/typography) | +| `TEXT` | `Content` | `None` | [MudText Typo="Typo.body1"](https://www.mudblazor.com/components/typography) | +| `LIST` | `Type`, `Text` | `Href` | [MudList](https://www.mudblazor.com/componentss/list) | +| `IMAGE` | `Src` | `Alt`, `Caption`,`Src` | [MudImage](https://www.mudblazor.com/components/image) | +| `BUTTON_GROUP` | `None` | `Variant`, `Color`, `Size`, `OverrideStyles`, `Vertical`, `DropShadow`, `Class`, `Style` | [MudButtonGroup](https://www.mudblazor.com/components/buttongroup) | +| `LAYOUT_PAPER` | `None` | `Elevation`, `Height`, `MaxHeight`, `MinHeight`, `Width`, `MaxWidth`, `MinWidth`, `IsOutlined`, `IsSquare`, `Class`, `Style` | [MudPaper](https://www.mudblazor.com/components/paper) | +| `LAYOUT_ITEM` | `None` | `Xs`, `Sm`, `Md`, `Lg`, `Xl`, `Xxl`, `Class`, `Style` | [MudItem](https://www.mudblazor.com/api/MudItem) | +| `LAYOUT_STACK` | `None` | `IsRow`, `IsReverse`, `Breakpoint`, `Align`, `Justify`, `Stretch`, `Wrap`, `Spacing`, `Class`, `Style` | [MudStack](https://www.mudblazor.com/components/stack) | +| `LAYOUT_GRID` | `None` | `Justify`, `Spacing`, `Class`, `Style` | [MudGrid](https://www.mudblazor.com/components/grid) | +| `LAYOUT_ACCORDION` | `None` | `AllowMultiSelection`, `IsDense`, `HasOutline`, `IsSquare`, `Elevation`, `HasSectionPaddings`, `Class`, `Style` | [MudExpansionPanels](https://www.mudblazor.com/components/expansionpanels) | +| `LAYOUT_ACCORDION_SECTION` | `Name`, `HeaderText` | `IsDisabled`, `IsExpanded`, `IsDense`, `HasInnerPadding`, `HideIcon`, `HeaderIcon`, `HeaderColor`, `HeaderTypo`, `HeaderAlign`, `MaxHeight`, `ExpandIcon`, `Class`, `Style` | [MudExpansionPanel](https://www.mudblazor.com/components/expansionpanels) | More information on rendered components can be found [here](https://www.mudblazor.com/docs/overview). ## Component References @@ -720,6 +726,108 @@ For a visual example and a full explanation look [here](https://www.mudblazor.co ``` For a visual example and a full explanation look [here](https://www.mudblazor.com/components/stack#basic-usage) +--- + +### `LAYOUT_ACCORDION` reference +- Use `Type = "LAYOUT_ACCORDION"` to render a MudBlazor accordion container (`MudExpansionPanels`). +- Required props: + - `Name`: unique identifier for the layout node. +- Required structure: + - `Children`: array of `LAYOUT_ACCORDION_SECTION` component tables. Other child component types are ignored by intent and should be avoided. +- Optional props: + - `AllowMultiSelection`: defaults to `false`; allows multiple sections to stay expanded at the same time. + - `IsDense`: defaults to `false`; reduces the visual density of the accordion. + - `HasOutline`: defaults to `false`; toggles outlined panel styling. + - `IsSquare`: defaults to `false`; removes rounded corners from the accordion container. + - `Elevation`: integer elevation; omitted values fall back to `0`. + - `HasSectionPaddings`: defaults to `false`; toggles the section gutter/padding behavior. + - `Class`, `Style`: forwarded to the rendered `MudExpansionPanels` for layout/styling. + +#### Example: Define an accordion container +```lua +{ + ["Type"] = "LAYOUT_ACCORDION", + ["Props"] = { + ["Name"] = "settingsAccordion", + ["AllowMultiSelection"] = true, + ["IsDense"] = false, + ["HasOutline"] = true, + ["IsSquare"] = false, + ["Elevation"] = 0, + ["HasSectionPaddings"] = true + }, + ["Children"] = { + { + ["Type"] = "LAYOUT_ACCORDION_SECTION", + ["Props"] = { + ["Name"] = "generalSection", + ["HeaderText"] = "General" + }, + ["Children"] = { + { + ["Type"] = "", + ["Props"] = {...}, + } + } + } + } +} +``` +Use `LAYOUT_ACCORDION` as the outer wrapper and put the actual content into one or more `LAYOUT_ACCORDION_SECTION` children. + +--- + +### `LAYOUT_ACCORDION_SECTION` reference +- Use `Type = "LAYOUT_ACCORDION_SECTION"` to render one expandable section inside `LAYOUT_ACCORDION`. +- Required props: + - `Name`: unique identifier for the layout node. + - `HeaderText`: visible header text shown in the section title row. +- Intended parent: + - Use this component inside `LAYOUT_ACCORDION`. +- Optional props: + - `IsDisabled`: defaults to `false`; disables user interaction for the section. + - `IsExpanded`: defaults to `false`; sets the initial expanded state. + - `IsDense`: defaults to `false`; reduces section density. + - `HasInnerPadding`: defaults to `true`; controls the inner content gutter/padding. + - `HideIcon`: defaults to `false`; hides the expand/collapse icon. + - `HeaderIcon`: MudBlazor icon identifier rendered before the header text. + - `HeaderColor`: one of the MudBlazor `Color` enum names such as `Primary`, `Secondary`, `Warning`; omitted values fall back to `Inherit`. + - `HeaderTypo`: one of the MudBlazor `Typo` enum names such as `body1`, `subtitle1`, `h6`; omitted values follow the renderer default. + - `HeaderAlign`: one of the MudBlazor `Align` enum names such as `Start`, `Center`, `End`; omitted values follow the renderer default. + - `MaxHeight`: nullable integer max height in pixels for the expanded content area. + - `ExpandIcon`: MudBlazor icon identifier used for the expand/collapse control. + - `Class`, `Style`: forwarded to the rendered `MudExpansionPanel` for layout/styling. +- `Children` may contain any other assistant components you want to reveal inside the section. + +#### Example: Define an accordion section +```lua +{ + ["Type"] = "LAYOUT_ACCORDION_SECTION", + ["Props"] = { + ["Name"] = "advancedOptions", + ["HeaderText"] = "Advanced options", + ["IsDisabled"] = false, + ["IsExpanded"] = true, + ["IsDense"] = false, + ["HasInnerPadding"] = true, + ["HideIcon"] = false, + ["HeaderIcon"] = "Icons.Material.Filled.Tune", + ["HeaderColor"] = "Primary", + ["HeaderTypo"] = "subtitle1", + ["HeaderAlign"] = "Start", + ["MaxHeight"] = 320, + ["ExpandIcon"] = "Icons.Material.Filled.ExpandMore" + }, + ["Children"] = { + { + ["Type"] = "", + ["Props"] = {...}, + } + } +} +``` +`MaxHeight` is an integer pixel value, unlike `LAYOUT_PAPER` sizing props which accept CSS length strings such as `24rem` or `50vh`. + ## Useful Lua Functions ### Included lua libraries - [Basic Functions Library](https://www.lua.org/manual/5.2/manual.html#6.1) diff --git a/app/MindWork AI Studio/Plugins/assistants/plugin.lua b/app/MindWork AI Studio/Plugins/assistants/plugin.lua index 0bba5df3..cf59e8df 100644 --- a/app/MindWork AI Studio/Plugins/assistants/plugin.lua +++ b/app/MindWork AI Studio/Plugins/assistants/plugin.lua @@ -193,6 +193,46 @@ ASSISTANT = { -- CHILDREN } }, + { + ["Type"] = "LAYOUT_ACCORDION", + ["Props"] = { + ["Name"] = "exampleAccordion", + ["AllowMultiSelection"] = false, -- if true, multiple sections can stay open at the same time + ["IsDense"] = false, -- denser layout with less spacing + ["HasOutline"] = false, -- outlined accordion panels + ["IsSquare"] = false, -- removes rounded corners + ["Elevation"] = 0, -- shadow depth of the accordion container + ["HasSectionPaddings"] = true, -- controls section gutters / inner frame paddings + ["Class"] = "", + ["Style"] = "", + }, + ["Children"] = { + -- LAYOUT_ACCORDION_SECTION elements + } + }, + { + ["Type"] = "LAYOUT_ACCORDION_SECTION", + ["Props"] = { + ["Name"] = "exampleAccordionSection", -- required + ["HeaderText"] = "
", -- required + ["IsDisabled"] = false, -- disables expanding/collapsing and interaction + ["IsExpanded"] = false, -- initial expansion state + ["IsDense"] = false, -- denser panel layout + ["HasInnerPadding"] = true, -- controls padding around the section content + ["HideIcon"] = false, -- hides the expand/collapse icon + ["HeaderIcon"] = "Icons.Material.Filled.ExpandMore", -- icon shown before the header text + ["HeaderColor"] = "", + ["HeaderTypo"] = "", -- MudBlazor typo value used for the header + ["HeaderAlign"] = "", -- header text alignment + ["MaxHeight"] = 320, -- nullable integer pixel height for the expanded content area + ["ExpandIcon"] = "Icons.Material.Filled.ExpandMore", -- override the expand/collapse icon + ["Class"] = "", + ["Style"] = "", + }, + ["Children"] = { + -- CHILDREN + } + }, { ["Type"] = "LAYOUT_PAPER", ["Props"] = { diff --git a/app/MindWork AI Studio/Tools/PluginSystem/Assistants/AssistantComponentFactory.cs b/app/MindWork AI Studio/Tools/PluginSystem/Assistants/AssistantComponentFactory.cs index 78c79c8e..12f15968 100644 --- a/app/MindWork AI Studio/Tools/PluginSystem/Assistants/AssistantComponentFactory.cs +++ b/app/MindWork AI Studio/Tools/PluginSystem/Assistants/AssistantComponentFactory.cs @@ -52,6 +52,10 @@ public class AssistantComponentFactory return new AssistantPaper { Props = props, Children = children }; case AssistantComponentType.LAYOUT_STACK: return new AssistantStack { Props = props, Children = children }; + case AssistantComponentType.LAYOUT_ACCORDION: + return new AssistantAccordion { Props = props, Children = children }; + case AssistantComponentType.LAYOUT_ACCORDION_SECTION: + return new AssistantAccordionSection { Props = props, Children = children }; default: LOGGER.LogError($"Unknown assistant component type!\n{type} is not a supported assistant component type"); throw new Exception($"Unknown assistant component type: {type}"); diff --git a/app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/AssistantComponentPropHelper.cs b/app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/AssistantComponentPropHelper.cs index fa21a281..969d5771 100644 --- a/app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/AssistantComponentPropHelper.cs +++ b/app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/AssistantComponentPropHelper.cs @@ -66,7 +66,9 @@ internal static class AssistantComponentPropHelper public static string GetIconSvg(string value) => MudBlazorIconRegistry.TryGetSvg(value, out var svg) ? svg : string.Empty; public static Size GetComponentSize(string value, Size fallback) => Enum.TryParse(value, out var size) ? size : fallback; public static Justify? GetJustify(string value) => Enum.TryParse(value, out var justify) ? justify : null; - public static AlignItems? GetAlignment(string value) => Enum.TryParse(value, out var alignment) ? alignment : null; + public static AlignItems? GetItemsAlignment(string value) => Enum.TryParse(value, out var alignment) ? alignment : null; + public static Align GetAlignment(string value, Align fallback = Align.Inherit) => Enum.TryParse(value, out var alignment) ? alignment : fallback; + public static Typo GetTypography(string value, Typo fallback = Typo.body1) => Enum.TryParse(value, out var typo) ? typo : fallback; public static Wrap? GetWrap(string value) => Enum.TryParse(value, out var wrap) ? wrap : null; public static StretchItems? GetStretching(string value) => Enum.TryParse(value, out var stretch) ? stretch : null; public static Breakpoint GetBreakpoint(string value, Breakpoint fallback) => Enum.TryParse(value, out var breakpoint) ? breakpoint : fallback; diff --git a/app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/AssistantComponentType.cs b/app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/AssistantComponentType.cs index 10acbb8c..bc9ae0ca 100644 --- a/app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/AssistantComponentType.cs +++ b/app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/AssistantComponentType.cs @@ -21,4 +21,6 @@ public enum AssistantComponentType LAYOUT_GRID, LAYOUT_PAPER, LAYOUT_STACK, + LAYOUT_ACCORDION, + LAYOUT_ACCORDION_SECTION, } diff --git a/app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/ComponentPropSpecs.cs b/app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/ComponentPropSpecs.cs index 147be447..e2c9d7ea 100644 --- a/app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/ComponentPropSpecs.cs +++ b/app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/ComponentPropSpecs.cs @@ -103,5 +103,19 @@ public static class ComponentPropSpecs "Wrap", "Spacing", "Class", "Style", ] ), + [AssistantComponentType.LAYOUT_ACCORDION] = new( + required: ["Name"], + optional: [ + "AllowMultiSelection", "IsDense", "HasOutline", "IsSquare", "Elevation", + "HasSectionPaddings", "Class", "Style", + ] + ), + [AssistantComponentType.LAYOUT_ACCORDION_SECTION] = new( + required: ["Name", "HeaderText"], + optional: [ + "IsDisabled", "IsExpanded", "IsDense", "HasInnerPadding", "HideIcon", "HeaderIcon", "HeaderColor", + "HeaderTypo", "HeaderAlign", "MaxHeight","ExpandIcon", "Class", "Style", + ] + ), }; } diff --git a/app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/Layout/AssistantAccordion.cs b/app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/Layout/AssistantAccordion.cs new file mode 100644 index 00000000..617224da --- /dev/null +++ b/app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/Layout/AssistantAccordion.cs @@ -0,0 +1,64 @@ +using Lua; + +namespace AIStudio.Tools.PluginSystem.Assistants.DataModel.Layout; + +internal sealed class AssistantAccordion : AssistantComponentBase +{ + public override AssistantComponentType Type => AssistantComponentType.LAYOUT_ACCORDION; + public override Dictionary Props { get; set; } = new(); + public override List Children { get; set; } = new(); + + public string Name + { + get => AssistantComponentPropHelper.ReadString(this.Props, nameof(this.Name)); + set => AssistantComponentPropHelper.WriteString(this.Props, nameof(this.Name), value); + } + + public bool AllowMultiSelection + { + get => AssistantComponentPropHelper.ReadBool(this.Props, nameof(this.AllowMultiSelection), false); + set => AssistantComponentPropHelper.WriteBool(this.Props, nameof(this.AllowMultiSelection), value); + } + + public bool IsDense + { + get => AssistantComponentPropHelper.ReadBool(this.Props, nameof(this.IsDense), false); + set => AssistantComponentPropHelper.WriteBool(this.Props, nameof(this.IsDense), value); + } + + public bool HasOutline + { + get => AssistantComponentPropHelper.ReadBool(this.Props, nameof(this.HasOutline), true); + set => AssistantComponentPropHelper.WriteBool(this.Props, nameof(this.HasOutline), value); + } + + public bool IsSquare + { + get => AssistantComponentPropHelper.ReadBool(this.Props, nameof(this.IsSquare), false); + set => AssistantComponentPropHelper.WriteBool(this.Props, nameof(this.IsSquare), value); + } + + public int Elevation + { + get => AssistantComponentPropHelper.ReadInt(this.Props, nameof(this.Elevation), 0); + set => AssistantComponentPropHelper.WriteInt(this.Props, nameof(this.Elevation), value); + } + + public bool HasSectionPaddings + { + get => AssistantComponentPropHelper.ReadBool(this.Props, nameof(this.HasSectionPaddings), true); + set => AssistantComponentPropHelper.WriteBool(this.Props, nameof(this.HasSectionPaddings), value); + } + + public string Class + { + get => AssistantComponentPropHelper.ReadString(this.Props, nameof(this.Class)); + set => AssistantComponentPropHelper.WriteString(this.Props, nameof(this.Class), value); + } + + public string Style + { + get => AssistantComponentPropHelper.ReadString(this.Props, nameof(this.Style)); + set => AssistantComponentPropHelper.WriteString(this.Props, nameof(this.Style), value); + } +} diff --git a/app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/Layout/AssistantAccordionSection.cs b/app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/Layout/AssistantAccordionSection.cs new file mode 100644 index 00000000..ab943b47 --- /dev/null +++ b/app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/Layout/AssistantAccordionSection.cs @@ -0,0 +1,102 @@ +using Lua; + +namespace AIStudio.Tools.PluginSystem.Assistants.DataModel.Layout; + +internal sealed class AssistantAccordionSection : AssistantComponentBase +{ + public override AssistantComponentType Type => AssistantComponentType.LAYOUT_ACCORDION_SECTION; + public override Dictionary Props { get; set; } = new(); + public override List Children { get; set; } = new(); + + public bool KeepContentAlive = true; + + public string Name + { + get => AssistantComponentPropHelper.ReadString(this.Props, nameof(this.Name)); + set => AssistantComponentPropHelper.WriteString(this.Props, nameof(this.Name), value); + } + + public string HeaderText + { + get => AssistantComponentPropHelper.ReadString(this.Props, nameof(this.HeaderText)); + set => AssistantComponentPropHelper.WriteString(this.Props, nameof(this.HeaderText), value); + } + + public string HeaderColor + { + get => AssistantComponentPropHelper.ReadString(this.Props, nameof(this.HeaderColor)); + set => AssistantComponentPropHelper.WriteString(this.Props, nameof(this.HeaderColor), value); + } + + public string HeaderIcon + { + get => AssistantComponentPropHelper.ReadString(this.Props, nameof(this.HeaderIcon)); + set => AssistantComponentPropHelper.WriteString(this.Props, nameof(this.HeaderIcon), value); + } + + public string HeaderTypo + { + get => AssistantComponentPropHelper.ReadString(this.Props, nameof(this.HeaderTypo)); + set => AssistantComponentPropHelper.WriteString(this.Props, nameof(this.HeaderTypo), value); + } + + public string HeaderAlign + { + get => AssistantComponentPropHelper.ReadString(this.Props, nameof(this.HeaderAlign)); + set => AssistantComponentPropHelper.WriteString(this.Props, nameof(this.HeaderAlign), value); + } + + public bool IsDisabled + { + get => AssistantComponentPropHelper.ReadBool(this.Props, nameof(this.IsDisabled), false); + set => AssistantComponentPropHelper.WriteBool(this.Props, nameof(this.IsDisabled), value); + } + + public bool IsExpanded + { + get => AssistantComponentPropHelper.ReadBool(this.Props, nameof(this.IsExpanded), false); + set => AssistantComponentPropHelper.WriteBool(this.Props, nameof(this.IsExpanded), value); + } + + public bool IsDense + { + get => AssistantComponentPropHelper.ReadBool(this.Props, nameof(this.IsDense), false); + set => AssistantComponentPropHelper.WriteBool(this.Props, nameof(this.IsDense), value); + } + + public bool HasInnerPadding + { + get => AssistantComponentPropHelper.ReadBool(this.Props, nameof(this.HasInnerPadding), true); + set => AssistantComponentPropHelper.WriteBool(this.Props, nameof(this.HasInnerPadding), value); + } + + public bool HideIcon + { + get => AssistantComponentPropHelper.ReadBool(this.Props, nameof(this.HideIcon), false); + set => AssistantComponentPropHelper.WriteBool(this.Props, nameof(this.HideIcon), value); + } + + public int? MaxHeight + { + get => AssistantComponentPropHelper.ReadNullableInt(this.Props, nameof(this.MaxHeight)); + set => AssistantComponentPropHelper.WriteNullableInt(this.Props, nameof(this.MaxHeight), value); + } + + public string ExpandIcon + { + get => AssistantComponentPropHelper.ReadString(this.Props, nameof(this.ExpandIcon)); + set => AssistantComponentPropHelper.WriteString(this.Props, nameof(this.ExpandIcon), value); + } + + public string Class + { + get => AssistantComponentPropHelper.ReadString(this.Props, nameof(this.Class)); + set => AssistantComponentPropHelper.WriteString(this.Props, nameof(this.Class), value); + } + + public string Style + { + get => AssistantComponentPropHelper.ReadString(this.Props, nameof(this.Style)); + set => AssistantComponentPropHelper.WriteString(this.Props, nameof(this.Style), value); + } +} diff --git a/app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/Layout/AssistantStack.cs b/app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/Layout/AssistantStack.cs index 6ba8bcd8..26b78685 100644 --- a/app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/Layout/AssistantStack.cs +++ b/app/MindWork AI Studio/Tools/PluginSystem/Assistants/DataModel/Layout/AssistantStack.cs @@ -68,9 +68,9 @@ internal sealed class AssistantStack : AssistantComponentBase set => AssistantComponentPropHelper.WriteString(this.Props, nameof(this.Class), value); } - public int Style + public string Style { - get => AssistantComponentPropHelper.ReadInt(this.Props, nameof(this.Style), 3); - set => AssistantComponentPropHelper.WriteInt(this.Props, nameof(this.Style), value); + get => AssistantComponentPropHelper.ReadString(this.Props, nameof(this.Style)); + set => AssistantComponentPropHelper.WriteString(this.Props, nameof(this.Style), value); } }