Added chat UI

app/MindWork AI Studio/Components/Pages/Chat.razor

@@ -1,26 +1,27 @@
 @page "/chat"
 @using AIStudio.Chat
+@using AIStudio.Settings
 
-<MudText Typo="Typo.h3" Class="mb-12">Chats</MudText>
+<MudText Typo="Typo.h3" Class="mb-2">Chats</MudText>
+<MudSelect T="Provider" @bind-Value="@this.selectedProvider" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Apps" Margin="Margin.Dense" Label="Provider" Class="mb-2 rounded-lg" Variant="Variant.Outlined">
+    @foreach (var provider in this.SettingsManager.ConfigurationData.Providers)
+    {
+        <MudSelectItem Value="@provider"/>
+    }
+</MudSelect>
 
-<div class="d-flex flex-column" style="height: calc(100vh - 8.3em);">
+<div class="d-flex flex-column" style="height: calc(100vh - 12.3em);">
     <div class="flex-auto overflow-auto">
-        <ContentBlockComponent/>
-        <ContentBlockComponent/>
-        <ContentBlockComponent/>
-        <ContentBlockComponent/>
-        <ContentBlockComponent/>
-        <ContentBlockComponent/>
-        <ContentBlockComponent/>
-        <ContentBlockComponent/>
-        <ContentBlockComponent/>
-        <ContentBlockComponent/>
-        <ContentBlockComponent/>
-        <ContentBlockComponent/>
+        @if (this.chatThread is not null)
+        {
+            foreach (var block in this.chatThread.Blocks.OrderBy(n => n.Time))
+            {
+                <ContentBlockComponent Role="@block.Role" Type="@block.ContentType" Time="@block.Time" Content="@block.Content"/>
+            }
+        }
     </div>
 
     <MudPaper Style="flex: 0 0 auto;">
-        <MudTextField T="string" Variant="Variant.Filled" AutoGrow="@true" Lines="3" MaxLines="12" Label="Your Prompt" Placeholder="Type your question here..." Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Send" OnAdornmentClick="() => this.SendMessage()">
-        </MudTextField>
+        <MudTextField T="string" @ref="@this.inputField" @bind-Text="@this.userInput" Variant="Variant.Outlined" AutoGrow="@true" Lines="3" MaxLines="12" Label="@this.InputLabel" Placeholder="@this.ProviderPlaceholder" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Send" OnAdornmentClick="() => this.SendMessage()" ReadOnly="!this.IsProviderSelected || this.isStreaming" Immediate="@true" OnKeyUp="this.InputKeyEvent"/>
     </MudPaper>
 </div>

app/MindWork AI Studio/Components/Pages/Chat.razor.cs

@@ -1,4 +1,12 @@
+using AIStudio.Chat;
+using AIStudio.Provider;
+using AIStudio.Settings;
+
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.JSInterop;
+
+using MudBlazor;
 
 namespace AIStudio.Components.Pages;
 
@@ -7,7 +15,122 @@ namespace AIStudio.Components.Pages;
 /// </summary>
 public partial class Chat : ComponentBase
 {
+    [Inject]
+    private SettingsManager SettingsManager { get; set; } = null!;
+    
+    [Inject]
+    public IJSRuntime JsRuntime { get; init; } = null!;
+
+    [Inject]
+    public Random RNG { get; set; } = null!;
+    
+    private AIStudio.Settings.Provider selectedProvider;
+    private ChatThread? chatThread;
+    private bool isStreaming;
+    private string userInput = string.Empty;
+    
+    // Unfortunately, we need the input field reference to clear it after sending a message.
+    // This is necessary because we have to handle the key events ourselves. Otherwise,
+    // the clearing would be done automatically.
+    private MudTextField<string> inputField = null!;
+
+    #region Overrides of ComponentBase
+
+    protected override async Task OnInitializedAsync()
+    {
+        // Ensure that the settings are loaded:
+        await this.SettingsManager.LoadSettings();
+        
+        // For now, we just create a new chat thread.
+        // Later we want the chats to be persisted
+        // across page loads and organize them in
+        // a chat history & workspaces.
+        this.chatThread = new("Thread 1", this.RNG.Next(), "You are a helpful assistant!", []);
+        await base.OnInitializedAsync();
+    }
+
+    #endregion
+
+    private bool IsProviderSelected => this.selectedProvider.UsedProvider != Providers.NONE;
+    
+    private string ProviderPlaceholder => this.IsProviderSelected ? "Type your input here..." : "Select a provider first";
+
+    private string InputLabel => this.IsProviderSelected ? $"Your Prompt (use selected instance '{this.selectedProvider.InstanceName}', provider '{this.selectedProvider.UsedProvider.ToName()}')" : "Select a provider first";
+    
     private async Task SendMessage()
     {
+        if (!this.IsProviderSelected)
+            return;
+        
+        //
+        // Add the user message to the thread:
+        //
+        var time = DateTimeOffset.Now;
+        this.chatThread?.Blocks.Add(new ContentBlock(time, ContentType.TEXT, new ContentText
+        {
+            // Text content properties:
+            Text = this.userInput,
+        })
+        {
+            // Content block properties:
+            Role = ChatRole.USER,
+        });
+
+        //
+        // Add the AI response to the thread:
+        //
+        var aiText = new ContentText
+        {
+            // We have to wait for the remote
+            // for the content stream: 
+            InitialRemoteWait = true,
+        };
+        
+        this.chatThread?.Blocks.Add(new ContentBlock(time, ContentType.TEXT, aiText)
+        {
+            Role = ChatRole.AI,
+        });
+        
+        // Clear the input field:
+        await this.inputField.Clear();
+        this.userInput = string.Empty;
+        
+        // Enable the stream state for the chat component:
+        this.isStreaming = true;
+        this.StateHasChanged();
+        
+        // Use the selected provider to get the AI response.
+        // By awaiting this line, we wait for the entire
+        // content to be streamed.
+        await aiText.CreateFromProviderAsync(this.selectedProvider.UsedProvider.CreateProvider(), this.JsRuntime, this.SettingsManager, new Model("gpt-4-turbo-preview"), this.chatThread);
+        
+        // Disable the stream state:
+        this.isStreaming = false;
+        this.StateHasChanged();
+    }
+
+    private async Task InputKeyEvent(KeyboardEventArgs keyEvent)
+    {
+        var key = keyEvent.Code.ToLowerInvariant();
+        
+        // Was the enter key (either enter or numpad enter) pressed?
+        var isEnter = key is "enter" or "numpadenter";
+        
+        // Was a modifier key pressed as well?
+        var isModifier = keyEvent.AltKey || keyEvent.CtrlKey || keyEvent.MetaKey || keyEvent.ShiftKey;
+        
+        // Depending on the user's settings, might react to shortcuts:
+        switch (this.SettingsManager.ConfigurationData.ShortcutSendBehavior)
+        {
+            case SendBehavior.ENTER_IS_SENDING:
+                if (!isModifier && isEnter)
+                    await this.SendMessage();
+                break;
+            
+            case SendBehavior.MODIFER_ENTER_IS_SENDING:
+                if (isEnter && isModifier)
+                    await this.SendMessage();
+                break;
+        }
     }
 }