Refactor config components

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

@@ -8,8 +8,7 @@
 
     <FluentGrid Spacing="3" AdaptiveRendering="true" Justify="JustifyContent.FlexStart">
         <FluentGridItem Class="config-grid" xs="12" sm="12" md="4" lg="4" xl="4" xxl="4">
-            <ApiKeyInputComponent Id="api-key" @rendermode="InteractiveServer" />
-            <ConfigTabComponent @rendermode="InteractiveServer"/>
+            <ConfigWindowComponent Id="config-window" @rendermode="InteractiveServer" />
         </FluentGridItem>
 
         <FluentGridItem Class="chat-grid" xs="12" sm="12" md="8" lg="8" xl="8" xxl="8" Style="height: 900px;">

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

@@ -1,4 +1,10 @@
-<FluentTextField Id="@Id" @bind-Value=apiKeyValue TextFieldType="TextFieldType.Password" data-type="GUID" @oninput="SetApiKey" Required="true">API key input</FluentTextField>
+<FluentStack Id="@Id" Style="width: 100%;" Orientation="Orientation.Vertical" VerticalAlignment="VerticalAlignment.Top">
+    <FluentTextField Id="api-key-field" Label="API key" Required="true"
+                     TextFieldType="TextFieldType.Password"
+                     Placeholder="Enter API key"
+                     @bind-Value="apiKeyValue"
+                     @oninput="SetApiKey" />
+</FluentStack>
 
 @code {
     private string? apiKeyValue { get; set; }

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

@@ -1,20 +1,23 @@
-<FluentTabs Id="config-tab" ActiveTabId="system-message" OnTabChange="ChangeTab">
-    <FluentTab Label="System message" Id="system-message-tab">
-        This is "System message" tab.
-    </FluentTab>
-    <FluentTab Label="Parameters" Id="parameters-tab">
-        This is "Parameters" tab.
-    </FluentTab>
-</FluentTabs>
-
-<p id="active-tab">[TEST] Active tab changed to: @SelectedTab?.Id</p>
+<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">
+            This is "System message" tab.
+        </FluentTab>
+        <FluentTab Id="parameters-tab" Label="Parameters">
+            This is "Parameters" tab.
+        </FluentTab>
+    </FluentTabs>
+</FluentStack>
 
 @code {
-    FluentTab? SelectedTab;
+    private FluentTab? selectedTab { get; set; }
+
+    [Parameter]
+    public string? Id { get; set; }
 
     private async Task ChangeTab(FluentTab tab)
     {
-        SelectedTab = tab;
+        this.selectedTab = tab;
         await Task.CompletedTask;
     }
 }

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

@@ -0,0 +1,31 @@
+@using AzureOpenAIProxy.PlaygroundApp.Models
+
+<FluentStack Id="@Id" Style="width: 100%; height: 100%;" Orientation="Orientation.Vertical" VerticalAlignment="VerticalAlignment.Top">
+    <FluentLabel Typo="Typography.H2">Setup</FluentLabel>
+    <ApiKeyInputComponent Id="api-key" OnKeyInput="SetApiKey" @rendermode="InteractiveServer" />
+    <DeploymentModelListComponent Id="deployment-model-list" OnUserOptionSelected="SetDeploymentModel" @rendermode="InteractiveServer" />
+    <FluentDivider />
+    <ConfigTabComponent id="config-tab" @rendermode="InteractiveServer" />
+</FluentStack>
+
+@code {
+    private string? apiKey;
+    private string? deploymentModel;
+
+    [Parameter]
+    public string? Id { get; set; }
+
+    private async Task SetApiKey(string apiKey)
+    {
+        this.apiKey = apiKey;
+
+        await Task.CompletedTask;
+    }
+
+    private async Task SetDeploymentModel(string deploymentModel)
+    {
+        this.deploymentModel = deploymentModel;
+
+        await Task.CompletedTask;
+    }
+}

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

@@ -1,74 +1,39 @@
-<FluentLayout Id="@Id" Style="margin: 10px;">
-    <div style="display: flex; align-items: center; margin-bottom: 5px;">
-        <label id="deployment-model-label" for="deployment-model-list-options" style="margin-right: 5px;">Deployment</label>
-        <span style="color: red;">*</span>
-    </div>
-
-    <FluentSelect Items=@deploymentModelOptions Id="deployment-model-list-options" name="deployment-models"
-        TOption="Option<string>" Height="300px"
-        OptionText="@(e => e.Text?.ToString())"
-        OptionValue="@(e => e.Value?.ToString())" 
-        OptionSelected="@(e => e.Selected)"
-        @bind-SelectedOption="@selectedOption"
-        @onclick="OnValueChanged"
-        aria-labelledby="deployment-model-label">
-    </FluentSelect>
-</FluentLayout>
+<FluentStack Id="@Id" Style="width: 100%;" Orientation="Orientation.Vertical" VerticalAlignment="VerticalAlignment.Top">
+    <FluentSelect Id="deployment-model-list-options" Label="Deployment" Required="true"
+                  Placeholder="Select a deployment model"
+                  Items=@deploymentModels
+                  TOption="Option<string>"
+                  OptionText="@(option => option.Text!)"
+                  OptionValue="@(option => option.Value!)"
+                  @bind-SelectedOption="@selectedOption"
+                  @onchange="SetDeploymentModel"/>
+</FluentStack>
 
 @code {
-    private Option<string>? selectedOption { get; set; } = new();
+    private List<Option<string>>? deploymentModels;
+    private Option<string>? selectedOption { get; set; }
 
     [Parameter]
     public string? Id { get; set; }
 
     [Parameter]
     public EventCallback<string> OnUserOptionSelected { get; set; }
-    
-    private async Task OnValueChanged()
+
+    protected override async Task OnInitializedAsync()
     {
-        string? selectedValue = selectedOption?.Value?.ToString();
-        await OnUserOptionSelected.InvokeAsync(selectedValue);
+        this.deploymentModels = new()
+        {
+            new Option<string> { Value = "model-gpt35turbo16k-0613", Text = "model-gpt35turbo16k-0613" },
+            new Option<string> { Value = "model-gpt4o-20240513", Text = "model-gpt4o-20240513" },
+        };
+
+        await Task.CompletedTask;
     }
 
-    static List<Option<string>> deploymentModelOptions = new()
+    private async Task SetDeploymentModel()
     {
-        new Option<string> { Value = "AL", Text = "Alabama" },
-        new Option<string> { Value = "AK", Text = "Alaska" },
-        new Option<string> { Value = "AZ", Text = "Arizona" },
-        new Option<string> { Value = "AR", Text = "Arkansas" },
-        new Option<string> { Value = "CA", Text = "California" },
-        new Option<string> { Value = "CO", Text = "Colorado" },
-        new Option<string> { Value = "CT", Text = "Connecticut" },
-        new Option<string> { Value = "DE", Text = "Delaware" },
-        new Option<string> { Value = "FL", Text = "Florida" },
-        new Option<string> { Value = "GA", Text = "Georgia" },
-        new Option<string> { Value = "HI", Text = "Hawaii" },
-        new Option<string> { Value = "ID", Text = "Idaho" },
-        new Option<string> { Value = "IL", Text = "Illinois" },
-        new Option<string> { Value = "IN", Text = "Indiana" },
-        new Option<string> { Value = "IA", Text = "Iowa" },
-        new Option<string> { Value = "KS", Text = "Kansas" },
-        new Option<string> { Value = "KY", Text = "Kentucky" },
-        new Option<string> { Value = "LA", Text = "Louisiana" },
-        new Option<string> { Value = "ME", Text = "Maine" },
-        new Option<string> { Value = "MD", Text = "Maryland" },
-        new Option<string> { Value = "MA", Text = "Massachussets" },
-        new Option<string> { Value = "MI", Text = "Michigain" },
-        new Option<string> { Value = "MN", Text = "Minnesota" },
-        new Option<string> { Value = "MS", Text = "Mississippi" },
-        new Option<string> { Value = "MO", Text = "Missouri" },
-        new Option<string> { Value = "MT", Text = "Montana" },
-        new Option<string> { Value = "NE", Text = "Nebraska" },
-        new Option<string> { Value = "NV", Text = "Nevada" },
-        new Option<string> { Value = "NH", Text = "New Hampshire" },
-        new Option<string> { Value = "NJ", Text = "New Jersey" },
-        new Option<string> { Value = "NM", Text = "New Mexico" },
-        new Option<string> { Value = "NY", Text = "New York" },
-        new Option<string> { Value = "NC", Text = "North Carolina" },
-        new Option<string> { Value = "ND", Text = "North Dakota" },
-        new Option<string> { Value = "OH", Text = "Ohio" },
-        new Option<string> { Value = "OK", Text = "Oklahoma" },
-        new Option<string> { Value = "OR", Text = "Oregon" },
-        new Option<string> { Value = "PA", Text = "Pennsylvania" }
-    };
+        var selectedValue = selectedOption?.Value!;
+
+        await OnUserOptionSelected.InvokeAsync(selectedValue);
+    }
 }