Added an enum selection component

This commit is contained in:
Thorsten Sommer 2024-08-05 09:00:50 +02:00
parent c5a64a8e82
commit 8fc9c6b92c
Signed by: tsommer
GPG Key ID: 371BBA77A02C0108
6 changed files with 113 additions and 47 deletions

View File

@ -0,0 +1,17 @@
@typeparam T
@inherits EnumSelectionBase
<MudStack Row="@true" AlignItems="AlignItems.Center" Class="mb-3">
<MudSelect T="@T" Value="@this.Value" ValueChanged="@this.SelectionChanged" AdornmentIcon="@this.Icon" Adornment="Adornment.Start" Label="@this.Label" Variant="Variant.Outlined" Margin="Margin.Dense" Validation="@this.ValidateSelection">
@foreach (var value in Enum.GetValues<T>())
{
<MudSelectItem Value="@value">
@this.NameFunc(value)
</MudSelectItem>
}
</MudSelect>
@if (this.AllowOther && this.Value.Equals(this.OtherValue))
{
<MudTextField T="string" Text="@this.OtherInput" TextChanged="this.OtherInputChanged" Validation="@this.ValidateOther" Label="@this.LabelOther" Variant="Variant.Outlined" Margin="Margin.Dense" UserAttributes="@USER_INPUT_ATTRIBUTES" Immediate="@true"/>
}
</MudStack>

View File

@ -0,0 +1,79 @@
using AIStudio.Settings;
using Microsoft.AspNetCore.Components;
namespace AIStudio.Components.Blocks;
public partial class EnumSelection<T> : EnumSelectionBase where T : struct, Enum
{
[Parameter]
public T Value { get; set; }
[Parameter]
public EventCallback<T> ValueChanged { get; set; }
[Parameter]
public bool AllowOther { get; set; }
[Parameter]
public T OtherValue { get; set; }
[Parameter]
public string OtherInput { get; set; } = string.Empty;
[Parameter]
public EventCallback<string> OtherInputChanged { get; set; }
[Parameter]
public string Label { get; set; } = string.Empty;
[Parameter]
public string LabelOther { get; set; } = "Other";
[Parameter]
public Func<T, string?> ValidateSelection { get; set; } = _ => null;
[Parameter]
public Func<string, string?> ValidateOther { get; set; } = _ => null;
[Parameter]
public string Icon { get; set; } = Icons.Material.Filled.ArrowDropDown;
/// <summary>
/// Gets or sets the custom name function for selecting the display name of an enum value.
/// </summary>
/// <typeparam name="T">The enum type.</typeparam>
/// <param name="value">The enum value.</param>
/// <returns>The display name of the enum value.</returns>
[Parameter]
public Func<T, string> NameFunc { get; set; } = value => value.ToString();
[Parameter]
public Func<T, Task> SelectionUpdated { get; set; } = _ => Task.CompletedTask;
[Inject]
private SettingsManager SettingsManager { get; set; } = null!;
#region Overrides of ComponentBase
protected override async Task OnInitializedAsync()
{
// Configure the spellchecking for the user input:
this.SettingsManager.InjectSpellchecking(USER_INPUT_ATTRIBUTES);
await base.OnInitializedAsync();
}
#endregion
private async Task SelectionChanged(T value)
{
await this.ValueChanged.InvokeAsync(value);
await this.SelectionUpdated(value);
}
private async Task OtherValueChanged(string value)
{
await this.OtherInputChanged.InvokeAsync(value);
await this.SelectionUpdated(this.Value);
}
}

View File

@ -0,0 +1,8 @@
using Microsoft.AspNetCore.Components;
namespace AIStudio.Components.Blocks;
public abstract class EnumSelectionBase : ComponentBase
{
protected static readonly Dictionary<string, object?> USER_INPUT_ATTRIBUTES = new();
}

View File

@ -9,33 +9,8 @@
} }
<MudTextField T="string" Disabled="@this.isAgentRunning" @bind-Text="@this.inputText" Validation="@this.ValidatingText" AdornmentIcon="@Icons.Material.Filled.DocumentScanner" Adornment="Adornment.Start" Label="Your input" Variant="Variant.Outlined" Lines="6" AutoGrow="@true" MaxLines="12" Class="mb-3" UserAttributes="@USER_INPUT_ATTRIBUTES"/> <MudTextField T="string" Disabled="@this.isAgentRunning" @bind-Text="@this.inputText" Validation="@this.ValidatingText" AdornmentIcon="@Icons.Material.Filled.DocumentScanner" Adornment="Adornment.Start" Label="Your input" Variant="Variant.Outlined" Lines="6" AutoGrow="@true" MaxLines="12" Class="mb-3" UserAttributes="@USER_INPUT_ATTRIBUTES"/>
<EnumSelection T="CommonLanguages" NameFunc="@(language => language.Name())" @bind-Value="@this.selectedTargetLanguage" Icon="@Icons.Material.Filled.Translate" Label="Target language" AllowOther="@true" @bind-OtherInput="@this.customTargetLanguage" OtherValue="CommonLanguages.OTHER" LabelOther="Custom target language" ValidateOther="@this.ValidateCustomLanguage" />
<MudStack Row="@true" AlignItems="AlignItems.Center" Class="mb-3"> <EnumSelection T="Complexity" NameFunc="@(complexity => complexity.Name())" @bind-Value="@this.selectedComplexity" Icon="@Icons.Material.Filled.Layers" Label="Target complexity" AllowOther="@true" @bind-OtherInput="@this.expertInField" OtherValue="Complexity.SCIENTIFIC_LANGUAGE_OTHER_EXPERTS" LabelOther="Your expertise" ValidateOther="@this.ValidateExpertInField" />
<MudSelect T="CommonLanguages" @bind-Value="@this.selectedTargetLanguage" AdornmentIcon="@Icons.Material.Filled.Translate" Adornment="Adornment.Start" Label="Target language" Variant="Variant.Outlined" Margin="Margin.Dense">
@foreach (var targetLanguage in Enum.GetValues<CommonLanguages>())
{
<MudSelectItem Value="@targetLanguage">@targetLanguage.Name()</MudSelectItem>
}
</MudSelect>
@if (this.selectedTargetLanguage is CommonLanguages.OTHER)
{
<MudTextField T="string" @bind-Text="@this.customTargetLanguage" Validation="@this.ValidateCustomLanguage" Label="Custom target language" Variant="Variant.Outlined" Margin="Margin.Dense" UserAttributes="@USER_INPUT_ATTRIBUTES"/>
}
</MudStack>
<MudStack Row="@true" AlignItems="AlignItems.Center" Class="mb-3">
<MudSelect T="Complexity" @bind-Value="@this.selectedComplexity" AdornmentIcon="@Icons.Material.Filled.Layers" Adornment="Adornment.Start" Label="Target complexity" Variant="Variant.Outlined" Margin="Margin.Dense">
@foreach (var targetComplexity in Enum.GetValues<Complexity>())
{
<MudSelectItem Value="@targetComplexity">@targetComplexity.Name()</MudSelectItem>
}
</MudSelect>
@if (this.selectedComplexity is Complexity.SCIENTIFIC_LANGUAGE_OTHER_EXPERTS)
{
<MudTextField T="string" @bind-Text="@this.expertInField" Validation="@this.ValidateExpertInField" Label="Your expertise" Variant="Variant.Outlined" Margin="Margin.Dense" UserAttributes="@USER_INPUT_ATTRIBUTES"/>
}
</MudStack>
<MudSelect T="Provider" Disabled="@this.isAgentRunning" @bind-Value="@this.providerSettings" Validation="@this.ValidatingProvider" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Apps" Margin="Margin.Dense" Label="Provider" Class="mb-3 rounded-lg" Variant="Variant.Outlined"> <MudSelect T="Provider" Disabled="@this.isAgentRunning" @bind-Value="@this.providerSettings" Validation="@this.ValidatingProvider" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Apps" Margin="Margin.Dense" Label="Provider" Class="mb-3 rounded-lg" Variant="Variant.Outlined">
@foreach (var provider in this.SettingsManager.ConfigurationData.Providers) @foreach (var provider in this.SettingsManager.ConfigurationData.Providers)
{ {

View File

@ -18,26 +18,7 @@ else
<MudTextField T="string" Disabled="@this.isAgentRunning" @bind-Text="@this.inputText" Validation="@this.ValidatingText" AdornmentIcon="@Icons.Material.Filled.DocumentScanner" Adornment="Adornment.Start" Label="Your input" Variant="Variant.Outlined" Lines="6" AutoGrow="@true" MaxLines="12" Class="mb-3" UserAttributes="@USER_INPUT_ATTRIBUTES"/> <MudTextField T="string" Disabled="@this.isAgentRunning" @bind-Text="@this.inputText" Validation="@this.ValidatingText" AdornmentIcon="@Icons.Material.Filled.DocumentScanner" Adornment="Adornment.Start" Label="Your input" Variant="Variant.Outlined" Lines="6" AutoGrow="@true" MaxLines="12" Class="mb-3" UserAttributes="@USER_INPUT_ATTRIBUTES"/>
} }
<MudStack Row="@true" AlignItems="AlignItems.Center" Class="mb-3"> <EnumSelection T="CommonLanguages" NameFunc="@(language => this.GetDisplayName(language))" @bind-Value="@this.selectedTargetLanguage" ValidateSelection="@this.ValidatingTargetLanguage" Icon="@Icons.Material.Filled.Translate" Label="Target language" AllowOther="@true" OtherValue="CommonLanguages.OTHER" @bind-OtherInput="@this.customTargetLanguage" ValidateOther="@this.ValidateCustomLanguage" LabelOther="Custom target language" />
<MudSelect T="CommonLanguages" @bind-Value="@this.selectedTargetLanguage" Validation="@this.ValidatingTargetLanguage" AdornmentIcon="@Icons.Material.Filled.Translate" Adornment="Adornment.Start" Label="Target language" Variant="Variant.Outlined" Margin="Margin.Dense">
@foreach (var targetLanguage in Enum.GetValues<CommonLanguages>())
{
if (targetLanguage is CommonLanguages.AS_IS)
{
<MudSelectItem Value="@targetLanguage">Please select the target language</MudSelectItem>
}
else
{
<MudSelectItem Value="@targetLanguage">@targetLanguage.Name()</MudSelectItem>
}
}
</MudSelect>
@if (this.selectedTargetLanguage is CommonLanguages.OTHER)
{
<MudTextField T="string" @bind-Text="@this.customTargetLanguage" Validation="@this.ValidateCustomLanguage" Label="Custom target language" Variant="Variant.Outlined" Margin="Margin.Dense" UserAttributes="@USER_INPUT_ATTRIBUTES"/>
}
</MudStack>
<MudSelect T="Provider" @bind-Value="@this.providerSettings" Disabled="@this.isAgentRunning" Validation="@this.ValidatingProvider" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Apps" Margin="Margin.Dense" Label="Provider" Class="mb-3 rounded-lg" Variant="Variant.Outlined"> <MudSelect T="Provider" @bind-Value="@this.providerSettings" Disabled="@this.isAgentRunning" Validation="@this.ValidatingProvider" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Apps" Margin="Margin.Dense" Label="Provider" Class="mb-3 rounded-lg" Variant="Variant.Outlined">
@foreach (var provider in this.SettingsManager.ConfigurationData.Providers) @foreach (var provider in this.SettingsManager.ConfigurationData.Providers)
{ {

View File

@ -67,6 +67,12 @@ public partial class AssistantTranslation : AssistantBaseCore
return null; return null;
} }
private string GetDisplayName(CommonLanguages language) => language switch
{
CommonLanguages.AS_IS => "Please select the target language",
_ => language.Name()
};
private async Task TranslateText(bool force) private async Task TranslateText(bool force)
{ {
if (!this.inputIsValid) if (!this.inputIsValid)