Add more chat components

src/AzureOpenAIProxy.ApiApp/Models/AdminResourceDetails.cs

@@ -60,7 +60,8 @@ public class AdminResourceDetails
 }
 
 /// <summary>
-/// /// This defines the type of the resource.
+/// This defines the type of the resource.
+/// </summary>
 [JsonConverter(typeof(EnumMemberConverter<ResourceType>))]
 public enum ResourceType
 {

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

@@ -12,54 +12,7 @@
         </FluentGridItem>
 
         <FluentGridItem Class="chat-grid" xs="12" sm="12" md="8" lg="8" xl="8" xxl="8" Style="height: 900px;">
-            <FluentStack Style="width: 100%; height: 100%;" Orientation="Orientation.Vertical" VerticalAlignment="VerticalAlignment.Bottom">
-                <FluentStack Style="width: 100%;" Orientation="Orientation.Vertical" VerticalAlignment="VerticalAlignment.Top">
-                    @if (this.messages != null && this.messages.Any())
-                    {
-                        foreach (var message in this.messages)
-                        {
-                            <FluentStack Style="width: 70%;" Orientation="Orientation.Horizontal" HorizontalAlignment="@(message.Role == MessageRole.Assistant ? HorizontalAlignment.Start : HorizontalAlignment.End)">
-                                <FluentCard MinimalStyle="true">
-                                    <p>@message.Message</p>
-                                </FluentCard>
-                            </FluentStack>
-                        }
-                    }
-                </FluentStack>
-                <FluentStack Style="width: 100%;" Orientation="Orientation.Vertical" VerticalAlignment="VerticalAlignment.Bottom">
-                    <ChatWindowComponent Id="chat-window" OnPromptSent="SendPrompt" />
-                </FluentStack>
-            </FluentStack>
+            <ChatWindowComponent Id="chat-window" @rendermode="InteractiveServer" />
         </FluentGridItem>
     </FluentGrid>
 </FluentLayout>
-
-@code {
-    private List<ChatMessage>? messages;
-
-    protected override async Task OnInitializedAsync()
-    {
-        this.messages = [];
-
-        await Task.CompletedTask;
-    }
-
-    private async Task SendPrompt(string prompt)
-    {
-        this.messages!.Add(new ChatMessage() { Role = MessageRole.User, Message = prompt });
-
-        await Task.CompletedTask;
-    }
-
-    public class ChatMessage
-    {
-        public MessageRole? Role { get; set; }
-        public string? Message { get; set; }
-    }
-
-    public enum MessageRole
-    {
-        User,
-        Assistant
-    }
-}

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

@@ -0,0 +1,23 @@
+@using AzureOpenAIProxy.PlaygroundApp.Models
+
+<FluentStack Id="@Id" Style="width: 100%;" Orientation="Orientation.Vertical" VerticalAlignment="VerticalAlignment.Top">
+    @if (this.Messages != null && this.Messages.Any())
+    {
+        foreach (var message in this.Messages)
+        {
+            <FluentStack id="message-@(this.Messages.IndexOf(message).ToString("00"))" Style="width: 100%;" Orientation="Orientation.Horizontal" HorizontalAlignment="@(message.Role == MessageRole.Assistant ? HorizontalAlignment.Start : HorizontalAlignment.End)">
+                <FluentCard Style="width: 70%;" MinimalStyle="true">
+                    <p>@message.Message</p>
+                </FluentCard>
+            </FluentStack>
+        }
+    }
+</FluentStack>
+
+@code {
+    [Parameter]
+    public string? Id { get; set; }
+
+    [Parameter]
+    public List<ChatMessage>? Messages { get; set; }
+}

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

@@ -0,0 +1,47 @@
+<FluentStack Id="@Id" Style="width: 100%;" Orientation="Orientation.Vertical" VerticalAlignment="VerticalAlignment.Bottom">
+    <FluentTextArea Id="prompt" Style="width: 100%;" Rows="6" Placeholder="Type user query here. (Shift + Enter for new line)" @bind-Value="prompt" @onchange="UpdatePrompt"></FluentTextArea>
+    <FluentStack Style="width: 100%;" Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.Start">
+        <FluentStack Style="width: 50%;" Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.Start">
+            <FluentButton Id="button-clear" IconStart="@(new Icons.Regular.Size20.Broom())" OnClick="ClearChat">Clear</FluentButton>
+        </FluentStack>
+        <FluentStack Style="width: 50%;" Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.End">
+            <FluentButton Id="button-send" IconStart="@(new Icons.Regular.Size20.Send())" OnClick="CompleteChat">Send</FluentButton>
+        </FluentStack>
+    </FluentStack>
+</FluentStack>
+
+@code {
+    private string? prompt;
+
+    [Parameter]
+    public string? Id { get; set; }
+
+    [Parameter]
+    public EventCallback<string?> OnPromptSent { get; set; }
+
+    [Parameter]
+    public EventCallback OnChatCleared { get; set; }
+
+    private async Task UpdatePrompt(ChangeEventArgs e)
+    {
+        this.prompt = e.Value!.ToString();
+
+        await Task.CompletedTask;
+    }
+
+    private async Task CompleteChat()
+    {
+        if (string.IsNullOrWhiteSpace(this.prompt) == true)
+        {
+            return;
+        }
+
+        await this.OnPromptSent.InvokeAsync(this.prompt);
+        this.prompt = string.Empty;
+    }
+
+    private async Task ClearChat()
+    {
+        await this.OnChatCleared.InvokeAsync();
+    }
+}

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

@@ -1,39 +1,34 @@
-<FluentLayout Id="@Id">
-    <FluentTextArea Style="width: 100%;" Rows="6" Placeholder="Type user query here. (Shift + Enter for new line)" @bind-Value="prompt" @onchange="UpdatePrompt"></FluentTextArea>
-    <FluentStack Style="width: 100%;" Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.Start">
-        <FluentStack Style="width: 50%;" Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.Start">
-            <FluentButton IconStart="@(new Icons.Regular.Size20.Broom())" OnClick="ClearChat">Clear</FluentButton>
-        </FluentStack>
-        <FluentStack Style="width: 50%;" Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.End">
-            <FluentButton IconStart="@(new Icons.Regular.Size20.Send())" OnClick="CompleteChat">Send</FluentButton>
-        </FluentStack>
-    </FluentStack>
-</FluentLayout>
+@using AzureOpenAIProxy.PlaygroundApp.Models
+
+<FluentStack Id="@Id" Style="width: 100%; height: 100%;" Orientation="Orientation.Vertical" VerticalAlignment="VerticalAlignment.Bottom">
+    <ChatHistoryComponent Id="chat-history" Messages="messages" />
+    <ChatPromptComponent Id="chat-prompt" OnPromptSent="SendPrompt" OnChatCleared="ClearMessage" />
+</FluentStack>
 
 @code {
-    private string? prompt;
+    private List<ChatMessage>? messages;
 
     [Parameter]
     public string? Id { get; set; }
 
-    [Parameter]
-    public EventCallback<string?> OnPromptSent { get; set; }
-
-    private async Task UpdatePrompt(ChangeEventArgs e)
+    protected override async Task OnInitializedAsync()
     {
-        this.prompt = e.Value!.ToString();
+        this.messages = [];
 
         await Task.CompletedTask;
     }
 
-    private async Task CompleteChat()
+    private async Task SendPrompt(string prompt)
     {
-        await this.OnPromptSent.InvokeAsync(this.prompt);
+        this.messages!.Add(new ChatMessage() { Role = MessageRole.User, Message = prompt });
 
         await Task.CompletedTask;
     }
-    private async Task ClearChat()
+
+    private async Task ClearMessage()
     {
+        this.messages!.Clear();
+
         await Task.CompletedTask;
     }
 }

src/AzureOpenAIProxy.PlaygroundApp/Models/ChatMessage.cs

@@ -0,0 +1,38 @@
+namespace AzureOpenAIProxy.PlaygroundApp.Models;
+
+/// <summary>
+/// This represents the entity for chat message.
+/// </summary>
+public class ChatMessage
+{
+    /// <summary>
+    /// Gets or sets the message role.
+    /// </summary>
+    public MessageRole? Role { get; set; }
+
+    /// <summary>
+    /// Gets or sets the message.
+    /// </summary>
+    public string? Message { get; set; }
+}
+
+/// <summary>
+/// This defines the role of the message.
+/// </summary>
+public enum MessageRole
+{
+    /// <summary>
+    /// Indicates the role is not defined.
+    /// </summary>
+    Undefined,
+
+    /// <summary>
+    /// Indicates the user role.
+    /// </summary>
+    User,
+
+    /// <summary>
+    /// Indicates the assistant role.
+    /// </summary>
+    Assistant
+}