From 39417424d2541ce7e3ea44fb5139f4ba1f436d84 Mon Sep 17 00:00:00 2001
From: Justin Yoo <justin.yoojh@gmail.com>
Date: Thu, 12 Sep 2024 23:53:02 +0900
Subject: [PATCH] Add more chat components

---
 .../Models/AdminResourceDetails.cs            |  3 +-
 .../Components/Pages/Playground.razor         | 49 +------------------
 .../Components/UI/ChatHistoryComponent.razor  | 23 +++++++++
 .../Components/UI/ChatPromptComponent.razor   | 47 ++++++++++++++++++
 .../Components/UI/ChatWindowComponent.razor   | 35 ++++++-------
 .../Models/ChatMessage.cs                     | 38 ++++++++++++++
 6 files changed, 126 insertions(+), 69 deletions(-)
 create mode 100644 src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ChatHistoryComponent.razor
 create mode 100644 src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ChatPromptComponent.razor
 create mode 100644 src/AzureOpenAIProxy.PlaygroundApp/Models/ChatMessage.cs

diff --git a/src/AzureOpenAIProxy.ApiApp/Models/AdminResourceDetails.cs b/src/AzureOpenAIProxy.ApiApp/Models/AdminResourceDetails.cs
index b1464200..b610f077 100644
--- a/src/AzureOpenAIProxy.ApiApp/Models/AdminResourceDetails.cs
+++ b/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
 {
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Playground.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Playground.razor
index 18a6728c..ac7463cb 100644
--- a/src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Playground.razor
+++ b/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
-    }
-}
\ No newline at end of file
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ChatHistoryComponent.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ChatHistoryComponent.razor
new file mode 100644
index 00000000..5a4b2100
--- /dev/null
+++ b/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; }
+}
\ No newline at end of file
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ChatPromptComponent.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ChatPromptComponent.razor
new file mode 100644
index 00000000..b6f5bff4
--- /dev/null
+++ b/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();
+    }
+}
\ No newline at end of file
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ChatWindowComponent.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ChatWindowComponent.razor
index 3b3635dd..043b582c 100644
--- a/src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ChatWindowComponent.razor
+++ b/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;
     }
 }
\ No newline at end of file
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Models/ChatMessage.cs b/src/AzureOpenAIProxy.PlaygroundApp/Models/ChatMessage.cs
new file mode 100644
index 00000000..15f7cb6c
--- /dev/null
+++ b/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
+}