From 358c161e7a35c33a1915e73e6e11f3093499e861 Mon Sep 17 00:00:00 2001 From: Thorsten Sommer Date: Sun, 13 Sep 2026 14:59:26 +0200 Subject: [PATCH] Made the tool selection in the chat and the assistants more compact (#962) --- .../Components/ToolSelection.razor | 112 +++++++++--------- app/MindWork AI Studio/wwwroot/app.css | 22 ++++ 2 files changed, 81 insertions(+), 53 deletions(-) diff --git a/app/MindWork AI Studio/Components/ToolSelection.razor b/app/MindWork AI Studio/Components/ToolSelection.razor index 32df8caf..439c77b0 100644 --- a/app/MindWork AI Studio/Components/ToolSelection.razor +++ b/app/MindWork AI Studio/Components/ToolSelection.razor @@ -7,7 +7,7 @@ - + @T("Tool Selection") @@ -15,8 +15,8 @@ - - + + @T("Tools allow the LLM to perform targeted additional actions such as web searches or reading web pages.") @if (!this.SupportsTools) @@ -25,7 +25,7 @@ } else if (this.Disabled) { - + @T("Tool changes are locked while a response is running. Your current selection is shown below and applies again from the next message once the run is finished.") } @@ -36,56 +36,62 @@ @if (this.SupportsTools && this.catalog.Count > 0) { - @foreach (var item in this.catalog) - { - var isSelected = this.SelectedToolIds.Contains(item.Definition.Id); - var isConfigured = item.ConfigurationState.IsConfigured; - var providerConfidenceHint = this.GetProviderConfidenceHint(item); - - - @* - Everything but the settings button switches the tool, so aiming for the - small switch is optional. The button spans that part of the row, which - keeps the settings button outside of it without any event plumbing. - *@ - - - @* - The switch only shows the state; the surrounding button does the switching. - It therefore takes no pointer events at all: its label reaches past the visible - switch and would otherwise swallow the clicks landing in that strip. - *@ - - - @if (!item.IsActive) - { - - + @* + The striping sits on this wrapper: the rows share their parent with the + introduction and the occasional alert, which would shift the parity. + *@ +
+ @foreach (var item in this.catalog) + { + var isSelected = this.SelectedToolIds.Contains(item.Definition.Id); + var isConfigured = item.ConfigurationState.IsConfigured; + var providerConfidenceHint = this.GetProviderConfidenceHint(item); +
+ + @* + Everything but the settings button switches the tool, so aiming for the + small switch is optional. The button spans that part of the row, which + keeps the settings button outside of it without any event plumbing. + *@ + + + @* + The switch only shows the state; the surrounding button does the switching. + It therefore takes no pointer events at all: its label reaches past the visible + switch and would otherwise swallow the clicks landing in that strip. + *@ + + + @if (!item.IsActive) + { + + + + } + + @item.Implementation.GetDisplayName() - } - - @item.Implementation.GetDisplayName() - - - - - - @if (!isConfigured) - { - @(string.IsNullOrWhiteSpace(item.ConfigurationState.Message) ? T("Required settings are missing. Configure this tool before enabling it.") : item.ConfigurationState.Message) - } - @if (!item.IsActive) - { - @T("This tool has been disabled by your organization.") - } - @if (!string.IsNullOrWhiteSpace(providerConfidenceHint)) - { - @providerConfidenceHint - } - - } + + + + + @if (!isConfigured) + { + @(string.IsNullOrWhiteSpace(item.ConfigurationState.Message) ? T("Required settings are missing. Configure this tool before enabling it.") : item.ConfigurationState.Message) + } + @if (!item.IsActive) + { + @T("This tool has been disabled by your organization.") + } + @if (!string.IsNullOrWhiteSpace(providerConfidenceHint)) + { + @providerConfidenceHint + } +
+ } +
} diff --git a/app/MindWork AI Studio/wwwroot/app.css b/app/MindWork AI Studio/wwwroot/app.css index 223b0ba6..9cfd455d 100644 --- a/app/MindWork AI Studio/wwwroot/app.css +++ b/app/MindWork AI Studio/wwwroot/app.css @@ -470,3 +470,25 @@ tr:has(> .provider-group-header) .mud-icon-button { padding-top: 0.25rem; padding-bottom: 0.25rem; } + +/* + * Rows of the tool selection which the chat and the assistants open from their footer. There will be + * far more tools than the ones we start with, so a row must not waste height: MudBlazor's settings + * button alone puts 12px of padding around a 24px icon, which makes a row 48px tall before the + * switch and the frame are counted at all. Size.Small takes most of that away; the rule below takes + * the rest, and it has to name the MudBlazor class to outweigh its specificity. Alternating rows + * carry a grey ground, which tells a long list apart better than a separator line does and costs no + * height at all. The colors are MudBlazor palette variables, so both grounds follow the theme. + */ +.tool-selection-rows > .tool-selection-row { + padding: 0.15rem 0.25rem; + border-radius: var(--mud-default-borderradius); +} + +.tool-selection-rows > .tool-selection-row:nth-child(odd) { + background-color: var(--mud-palette-background-gray); +} + +.tool-selection-row .mud-icon-button { + padding: 0.2em; +}