AI-Studio/app/MindWork AI Studio/Components/ToolSelection.razor

@inherits MSGComponentBase

<div class="d-flex">
    <MudTooltip Text="@this.ToolButtonTooltip" Placement="Placement.Top">
        <MudIconButton Icon="@Icons.Material.Filled.Build" Class="@this.PopoverButtonClasses" OnClick="@this.ToggleSelection"/>
    </MudTooltip>

    <MudPopover Open="@this.showSelection" AnchorOrigin="Origin.TopLeft" TransformOrigin="Origin.BottomLeft" DropShadow="@true" Class="border-solid border-4 rounded-lg">
        <MudCard>
            <MudCardHeader Class="pa-2 pb-0">
                <CardHeaderContent>
                    <MudStack Row="true" AlignItems="AlignItems.Center">
                        <MudText Typo="Typo.h5">@T("Tool Selection")</MudText>
                        <MudSpacer />
                    </MudStack>
                </CardHeaderContent>
            </MudCardHeader>
            <MudCardContent Class="pa-2" Style="min-width: 22em; max-height: 60vh; max-width: 34vw; overflow: auto;">
                <MudText Typo="Typo.body2" Class="mb-2">
                    @T("Tools allow the LLM to perform targeted additional actions such as web searches or reading web pages.")
                </MudText>
                @if (!this.SupportsTools)
                {
                    <MudText Typo="Typo.body1">@this.UnsupportedToolsMessage</MudText>
                }
                else if (this.Disabled)
                {
                    <MudAlert Dense="@true" Severity="Severity.Info" Variant="Variant.Outlined" Class="mb-2">
                        @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.")
                    </MudAlert>
                }
                else if (this.catalog.Count == 0)
                {
                    <MudText Typo="Typo.body1">@T("No tools are available in this context.")</MudText>
                }

                @if (this.SupportsTools && this.catalog.Count > 0)
                {
                    @*
                        The striping sits on this wrapper: the rows share their parent with the
                        introduction and the occasional alert, which would shift the parity.
                    *@
                    <div class="tool-selection-rows">
                        @foreach (var item in this.catalog)
                        {
                            var isSelected = this.SelectedToolIds.Contains(item.Definition.Id);
                            var isConfigured = item.ConfigurationState.IsConfigured;
                            var providerConfidenceHint = this.GetProviderConfidenceHint(item);
                            <div class="tool-selection-row">
                                <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Spacing="1">
                                    @*
                                        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.
                                    *@
                                    <MudButton Variant="Variant.Text" Color="Color.Default" Class="px-1 py-0 justify-start"
                                               Style="min-width:auto; text-transform:none; flex-grow:1;"
                                               Disabled="@this.IsRowDisabled(item)" OnClick="@(async () => await this.ToggleToolFromRow(item))">
                                        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
                                            @*
                                                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.
                                            *@
                                            <MudSwitch T="bool" Size="Size.Small" Color="Color.Primary" Value="@isSelected" ReadOnly="@true" Disabled="@this.IsRowDisabled(item)" Style="pointer-events: none;" />
                                            <MudIcon Icon="@item.Implementation.Icon" Color="Color.Info" />
                                            @if (!item.IsActive)
                                            {
                                                <MudTooltip Text="@T("This tool has been disabled by your organization.")">
                                                    <MudIcon Icon="@Icons.Material.Filled.Lock" Color="Color.Error" Size="Size.Small" />
                                                </MudTooltip>
                                            }
                                            <MudTooltip Text="@item.Implementation.GetDescription()">
                                                <MudText Typo="Typo.body1">@item.Implementation.GetDisplayName()</MudText>
                                            </MudTooltip>
                                        </MudStack>
                                    </MudButton>
                                    <MudIconButton Icon="@Icons.Material.Filled.Settings" Size="Size.Small" OnClick="@(async () => await this.OpenSettings(item.Definition.Id))" />
                                </MudStack>
                                @if (!isConfigured)
                                {
                                    <MudText Typo="Typo.caption" Color="Color.Warning" Class="ml-2">@(string.IsNullOrWhiteSpace(item.ConfigurationState.Message) ? T("Required settings are missing. Configure this tool before enabling it.") : item.ConfigurationState.Message)</MudText>
                                }
                                @if (!item.IsActive)
                                {
                                    <MudText Typo="Typo.caption" Color="Color.Warning" Class="ml-2">@T("This tool has been disabled by your organization.")</MudText>
                                }
                                @if (!string.IsNullOrWhiteSpace(providerConfidenceHint))
                                {
                                    <MudText Typo="Typo.caption" Color="Color.Warning" Class="ml-2">@providerConfidenceHint</MudText>
                                }
                            </div>
                        }
                    </div>
                }
            </MudCardContent>
            <MudCardActions>
                <MudSpacer />
                <MudButton Variant="Variant.Filled" OnClick="@this.Hide">@T("Close")</MudButton>
            </MudCardActions>
        </MudCard>
    </MudPopover>
</div>