Add Tab for system message and parameters

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

@@ -7,4 +7,6 @@
 
 Welcome to your new app.
 
-<ChatWindowComponent @rendermode="InteractiveServer" />
+<ChatWindowComponent @rendermode="InteractiveServer"/>
+
+<ConfigTabComponent @rendermode="InteractiveServer"/>

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

@@ -0,0 +1,21 @@
+@using Microsoft.FluentUI.AspNetCore.Components
+
+<FluentTabs ActiveTabId="system-message" OnTabChange="HandleOnTabChange">
+    <FluentTab Label="System message" Id="system-message">
+        This is "System message" tab.
+    </FluentTab>
+    <FluentTab Label="Parameters" Id="parameters">
+        This is "Parameters" tab.
+    </FluentTab>
+</FluentTabs>
+
+<p>[TEST] Active tab changed to: @SelectedTab?.Label</p>
+
+@code {
+    FluentTab? SelectedTab;
+
+    private void HandleOnTabChange(FluentTab tab)
+    {
+        SelectedTab = tab;
+    }
+}

src/AzureOpenAIProxy.PlaygroundApp/Program.cs

@@ -16,6 +16,8 @@
 
 builder.Services.AddScoped<IOpenAIApiClient, OpenAIApiClient>();
 
+builder.Services.AddSingleton<Microsoft.FluentUI.AspNetCore.Components.LibraryConfiguration>();
+
 var app = builder.Build();
 
 app.MapDefaultEndpoints();