[Playground] Parameters Tab: UI Components only #290

src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Playground.razor

@@ -1,29 +1,42 @@
 @page "/playground"
 @rendermode InteractiveServer
 
+@using AzureOpenAIProxy.PlaygroundApp.Models
+
 <PageTitle>Playground Page</PageTitle>
 
 <FluentLayout>
     <FluentHeader Style="padding-top: 5px;"><h1>Azure OpenAI Proxy Playground</h1></FluentHeader>
 
-    <FluentGrid Spacing="3" AdaptiveRendering="true" Justify="JustifyContent.FlexStart">
-        <FluentGridItem Class="config-grid" xs="12" sm="12" md="4" lg="4" xl="4" xxl="4">
-            <ConfigWindowComponent Id="config-window" OnSystemMessageChanged="SetSystemMessage" @rendermode="InteractiveServer" />
+    <FluentGrid Spacing="0" AdaptiveRendering="true" Justify="JustifyContent.FlexStart">
+        <FluentGridItem Class="config-grid" xs="12" sm="12" md="4" lg="4" xl="4" xxl="4" Style="border:1px solid lightgrey">
+            <ConfigWindowComponent Id="config-window"
+                                   OnSystemMessageChanged="SetSystemMessage"
+                                   OnChatParametersChanged="SetChatParameters"
+                                   @rendermode="InteractiveServer" />
         </FluentGridItem>
 
-        <FluentGridItem Class="chat-grid" xs="12" sm="12" md="8" lg="8" xl="8" xxl="8" Style="height: 900px;">
+        <FluentGridItem Class="chat-grid" xs="12" sm="12" md="8" lg="8" xl="8" xxl="8" Style="border:1px solid lightgrey">
             <ChatWindowComponent Id="chat-window" @rendermode="InteractiveServer" />
         </FluentGridItem>
     </FluentGrid>
 </FluentLayout>
 
 @code {
     private string? systemMessage;
+    private ChatParameters? chatParameters;
 
     private async Task SetSystemMessage(string systemMessage)
     {
         this.systemMessage = systemMessage;
 
         await Task.CompletedTask;
     }
+
+    private async Task SetChatParameters(ChatParameters parameters)
+    {
+        this.chatParameters = parameters;
+
+        await Task.CompletedTask;
+    }
 }

src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ConfigTabComponent.razor

@@ -1,10 +1,12 @@
+@using AzureOpenAIProxy.PlaygroundApp.Models
+
 <FluentStack Id="@Id" Style="width: 100%;" Orientation="Orientation.Vertical" VerticalAlignment="VerticalAlignment.Top">
     <FluentTabs Id="config-tabs" Style="width: 100%;" ActiveTabId="system-message-tab" OnTabChange="ChangeTab">
         <FluentTab Id="system-message-tab" Label="System message">
             <SystemMessageTabComponent Id="system-message-tab-component" OnSystemMessageChanged="SetSystemMessage" />
         </FluentTab>
         <FluentTab Id="parameters-tab" Label="Parameters">
-            This is "Parameters" tab.
+            <ParametersTabComponent OnParametersChanged="OnChatParametersChanged" />
         </FluentTab>
     </FluentTabs>
 </FluentStack>
@@ -19,6 +21,9 @@
     [Parameter]
     public EventCallback<string> OnSystemMessageChanged { get; set; }
 
+    [Parameter]
+    public EventCallback<ChatParameters> OnChatParametersChanged { get; set; }
+
     private async Task ChangeTab(FluentTab tab)
     {
         this.selectedTab = tab;
@@ -29,7 +34,7 @@
     private async Task SetSystemMessage(string systemMessage)
     {
         this.systemMessage = systemMessage;
-        
+
         await OnSystemMessageChanged.InvokeAsync(systemMessage);
     }
 }

src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ConfigWindowComponent.razor

@@ -5,7 +5,10 @@
     <ApiKeyInputComponent Id="api-key" OnKeyInput="SetApiKey" @rendermode="InteractiveServer" />
     <DeploymentModelListComponent Id="deployment-model-list" OnUserOptionSelected="SetDeploymentModel" @rendermode="InteractiveServer" />
     <FluentDivider />
-    <ConfigTabComponent id="config-tab" OnSystemMessageChanged="SetSystemMessage" @rendermode="InteractiveServer" />
+    <ConfigTabComponent id="config-tab"
+                        OnSystemMessageChanged="SetSystemMessage"
+                        OnChatParametersChanged="OnChatParametersChanged"
+                        @rendermode="InteractiveServer" />
 </FluentStack>
 
 @code {
@@ -19,6 +22,9 @@
     [Parameter]
     public EventCallback<string> OnSystemMessageChanged { get; set; }
 
+    [Parameter]
+    public EventCallback<ChatParameters> OnChatParametersChanged { get; set; }
+
     private async Task SetApiKey(string apiKey)
     {
         this.apiKey = apiKey;
@@ -36,7 +42,7 @@
     private async Task SetSystemMessage(string systemMessage)
     {
         this.systemMessage = systemMessage;
-        
+
         await OnSystemMessageChanged.InvokeAsync(systemMessage);
     }
 }

src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParameterMultiselectComponent.razor

@@ -0,0 +1,76 @@
+<div id="@Id">
+    <label id=@($"{Id}-label") for=@($"{Id}-content")
+           class="parameter-child-label"
+           style="display:inline-block;padding-left:5px;">
+        @LabelText
+
+        @* Tooltip Image *@
+        <FluentIcon Id=@($"{Id}-anchor") Value="@(new Icons.Regular.Size12.Info())" />
+        <FluentTooltip Id=@($"{Id}-tooltip")
+                       Anchor=@($"{Id}-anchor")
+                       Position="TooltipPosition.End"
+                       UseTooltipService="false"
+                       MaxWidth="250px"
+                       Style="line-break:anywhere">
+            @TooltipText
+        </FluentTooltip>
+    </label>
+
+    <div id=@($"{Id}-content")>
+        <FluentAutocomplete Id=@($"{Id}-textfield")
+                            TOption="string" Multiple="true" AutoComplete="false"
+                            ShowOverlayOnEmptyResults="false"
+                            SelectValueOnTab="true"
+                            MaximumOptionsSearch="1"
+                            @bind-SelectedOptions=Values
+                            @bind-SelectedOptions:after=OnChangeValues
+                            OnOptionsSearch=OnSearch
+                            Style="width:95%;padding:5px 0px;margin: 0 auto">
+            <OptionTemplate>
+                <FluentLabel>Create "@(context)"</FluentLabel>
+            </OptionTemplate>
+        </FluentAutocomplete>
+    </div>
+</div>
+
+@code {
+    [Parameter]
+    public string? Id { get; set; }
+
+    // Label Property
+    [Parameter, EditorRequired]
+    public string LabelText { get; set; } = string.Empty;
+
+    [Parameter, EditorRequired]
+    public string TooltipText { get; set; } = string.Empty;
+
+    // Bind Property
+    [Parameter]
+    public IEnumerable<string>? Values { get; set; }
+
+    [Parameter]
+    public EventCallback<IEnumerable<string>> ValuesChanged { get; set; }
+
+    // Fields
+    private List<string> searchTextItems = new();
+
+    private async Task OnChangeValues()
+    {
+        await ValuesChanged.InvokeAsync(Values);
+    }
+
+    private void OnSearch(OptionsSearchEventArgs<string> e)
+    {
+        searchTextItems.Clear();
+
+        var input = e.Text.Trim();
+        if (string.IsNullOrWhiteSpace(input) || 
+            Values != null && Values.Contains(input))
+        {
+            return;
+        }
+
+        searchTextItems.Add(input);
+        e.Items = searchTextItems;
+    }
+}

src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParameterRangeComponent.razor

@@ -0,0 +1,103 @@
+<div id="@Id">
+    <label id=@($"{Id}-label") class="parameter-component-label" for=@($"{Id}-content")>
+        @LabelText
+
+        @* Tooltip Image *@
+        <FluentIcon Id=@($"{Id}-anchor") Value="@(new Icons.Regular.Size12.Info())" />
+        <FluentTooltip Id=@($"{Id}-tooltip")
+                       Anchor=@($"{Id}-anchor")
+                       Position="TooltipPosition.End"
+                       UseTooltipService="false"
+                       MaxWidth="250px"
+                       Style="line-break:anywhere">
+            @TooltipText
+        </FluentTooltip>
+    </label>
+
+    <FluentStack Id=@($"{Id}-content")
+                 Orientation="Orientation.Horizontal"
+                 Style="column-gap:0px">
+
+        <FluentSlider Id=@($"{Id}-slider") Class="parameter-component-slider"
+                      TValue="float"
+                      Min="@Min" Max="@Max" Step="@Step"
+                      @bind-Value=Value @bind-Value:after=AfterSliderChange />
+
+        <FluentTextField Id=@($"{Id}-textfield") Class="parameter-component-textfield"
+                         @bind-Value=textFieldValue @bind-Value:after=AfterTextFieldChange />
+
+    </FluentStack>
+
+    @if (!hasNoError)
+    {
+        <FluentCard Class="parameter-component-error">
+            @errorText
+        </FluentCard>
+    }
+</div>
+
+@code {
+    [Parameter]
+    public string? Id { get; set; }
+
+    // Label Property
+    [Parameter, EditorRequired]
+    public string LabelText { get; set; } = string.Empty;
+
+    [Parameter, EditorRequired]
+    public string TooltipText { get; set; } = string.Empty;
+
+    // Slider Property
+    [Parameter, EditorRequired]
+    public float Min { get; set; } = default;
+
+    [Parameter, EditorRequired]
+    public float Max { get; set; } = default;
+
+    [Parameter, EditorRequired]
+    public float Step { get; set; } = default;
+
+    // Text Field Property
+    public string? textFieldValue { get; set; }
+
+    // Bind Property
+    [Parameter]
+    public float Value { get; set; }
+
+    [Parameter]
+    public EventCallback<float> ValueChanged { get; set; }
+
+    // Fields
+    private bool hasNoError = true;
+    private string errorText = string.Empty;
+
+    protected override void OnInitialized()
+    {
+        textFieldValue = Value!.ToString();
+        errorText = $"Only numbers between {Min} and {Max} are permitted";
+
+        base.OnInitialized();
+    }
+
+    private async Task AfterSliderChange()
+    {
+        hasNoError = true;
+        textFieldValue = Value!.ToString();
+
+        await ValueChanged.InvokeAsync(Value);
+    }
+
+    private async Task AfterTextFieldChange()
+    {
+        hasNoError = float.TryParse(textFieldValue, null, out var parsed);
+        if (!hasNoError)
+            return;
+
+        hasNoError = parsed >= Min! && parsed <= Max!;
+        if (!hasNoError)
+            return;
+
+        this.Value = parsed;
+        await ValueChanged.InvokeAsync(Value);
+    }
+}

src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ParameterRangeComponent.razor.css

@@ -0,0 +1,24 @@
+::deep .parameter-component-label {
+    display: inline-block;
+    padding-left: 5px;
+}
+
+::deep .parameter-component-slider {
+    width: 88%;
+    padding-top: 15px;
+}
+
+::deep .parameter-component-textfield {
+    width: 12%;
+    font-size: 9px;
+    padding-right: 5px;
+}
+
+::deep .parameter-component-error {
+    padding: 10px;
+    width: 95%;
+    margin: 5px auto;
+    border-color: crimson;
+    background-color: lightcoral;
+    color: black
+}