form

Cysharp · Mar 13, 2024 · e636fe6 · e636fe6
1 parent 282eb6c
commit e636fe6
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 19 deletions.
diff --git a/sandbox/BlazorApp1/Components/Pages/Home.razor b/sandbox/BlazorApp1/Components/Pages/Home.razor
@@ -4,10 +4,13 @@
 
 <PageTitle>Blazor Claude</PageTitle>
 
-<div class="page">
-    <div class="w-11/12 md:w-1/2 bg-white shadow-lg rounded-lg p-6 mx-auto mt-6 mb-20">
-        <h1 class="text-2xl font-bold mb-4 text-center">Blazor Claude</h1>
-        <div class="border rounded-md p-4 h-96 overflow-y-auto">
+<div class="flex flex-col relative h-full w-full overflow-auto transition-width">
+
+    <div class="flex-0 bg-white text-2xl font-bold py-2 text-center border-b-2">Blazor Claude</div>
+
+    <div class="flex-1 text-sm p-4">
+
+        <div class="p-4 h-full border bg-white rounded-md overflow-y-auto">
             @foreach (var item in chatMessages)
             {
                 @if (item.Role == Roles.User)
@@ -26,16 +29,26 @@
         </div>
     </div>
 
-    Temperature: <input type="range" min="0.0" max="1.0" step=0.1 value=@temperature>
-
-    System: <textarea type="text" @bind="systemInput" />
 
-    <div class="fixed bottom-0 left-0 right-0 p-4 bg-white shadow-lg">
-        <div class="w-11/12 md:w-1/2 mx-auto">
+    <div class="flex-0 bg-white p-4 border-t-2">
+        <div class="flex w-full mb-2">
+            <div class="flex-0 mr-2">
+                <div class="block text-sm font-medium leading-6 text-gray-900">Temperature</div>
+                <input class="w-full h-1 mb-6 bg-gray-200 rounded-lg appearance-none cursor-pointer range-sm dark:bg-gray-700" type="range" min="0.0" max="1.0" step=0.1 value=@temperature>
+            </div>
+            <div class="flex-1">
+                <div class="block text-sm font-medium leading-6 text-gray-900">System</div>
+                <textarea type="text" class="block w-full rounded-md border-0 py-1.5 text-sm leading-6 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600"
+                          @bind="systemInput" />
+            </div>
+        </div>
+        <div class="w-full">
             <div class="flex">
-                <input type="text" id="chat-input" class="w-full px-3 py-2 text-gray-700 border rounded-l-md focus:outline-none" @bind="textInput" placeholder=" Enter Message...">
-                <button class="px-4 text-white bg-blue-500 border-l rounded-r-md hover:bg-blue-600 focus:outline-none" @onclick="SendClick">Send</button>
+                <form @onsubmit=SendClick>
+                    <input type="text" id="chat-input" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm leading-6" placeholder=" Enter Message..." @bind="textInput">
+                    <button class="ml-2 mt-0 w-auto inline-flex items-center justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" disabled="@running">Send</button>
+                </form>
             </div>
         </div>
     </div>
-</div>
+</div>
diff --git a/sandbox/BlazorApp1/Components/Pages/Home.razor.cs b/sandbox/BlazorApp1/Components/Pages/Home.razor.cs
@@ -1,5 +1,6 @@
 using Claudia;
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 
 namespace BlazorApp1.Components.Pages;
 
@@ -33,7 +34,8 @@ async void SendClick()
                 Messages = chatMessages.ToArray()
             });
 
-            chatMessages.Add(new Message { Role = Roles.Assistant, Content = "" });
+            var currentMessage = new Message { Role = Roles.Assistant, Content = "" };
+            chatMessages.Add(currentMessage);
 
             textInput = ""; // clear input.
             StateHasChanged();
@@ -42,12 +44,7 @@ async void SendClick()
             {
                 if (messageStreamEvent is ContentBlockDelta content)
                 {
-                    var lastMessage = chatMessages[^1];
-                    var newMessage = lastMessage with
-                    {
-                        Content = lastMessage.Content[0].Text + content.Delta.Text
-                    };
-                    chatMessages[^1] = newMessage;
+                    currentMessage.Content[0].Text += content.Delta.Text;
                     StateHasChanged();
                 }
             }