Ui changes

Signed-off-by: joshuajpiluden@gmail.com <joshuajpiluden@Gmail.com>
jjosh102 · Dec 28, 2024 · f183038 · f183038
1 parent 1872917
commit f183038
Show file tree

Hide file tree

Showing 12 changed files with 362 additions and 114 deletions.
diff --git a/src/Open.Blazor.Core/Components/Chat/Chat.razor.css b/src/Open.Blazor.Core/Components/Chat/Chat.razor.css
diff --git a/src/Open.Blazor.Core/Open.Blazor.Core.csproj b/src/Open.Blazor.Core/Open.Blazor.Core.csproj
@@ -7,8 +7,7 @@
         <NoWarn>SKEXP0010</NoWarn>
         <NoWarn>SKEXP0070</NoWarn>
     </PropertyGroup>
-
-
+
     <ItemGroup>
         <SupportedPlatform Include="browser" />
     </ItemGroup>
@@ -26,22 +25,9 @@
 
     </ItemGroup>
 
-
     <ItemGroup>
         <InternalsVisibleTo Include="Open.Blazor.Tests" />
 
     </ItemGroup>
-
-
-    <ItemGroup>
-        <Folder Include="wwwroot\" />
-    </ItemGroup>
-
-
-    <ItemGroup>
-      <UpToDateCheckInput Remove="Features\Components\Layout\MainLayout.razor" />
-      <UpToDateCheckInput Remove="Features\Components\Layout\NavMenu.razor" />
-      <UpToDateCheckInput Remove="Features\Components\SettingsPanel.razor" />
-    </ItemGroup>
-
+
 </Project>
diff --git a/src/Open.Blazor.Core/_Imports.razor b/src/Open.Blazor.Core/_Imports.razor
diff --git a/src/Open.Blazor.Ui/Components/App.razor b/src/Open.Blazor.Ui/Components/App.razor
@@ -13,7 +13,7 @@
 </head>
 
 <body>
-<Routes/>
+<Routes @rendermode="new InteractiveServerRenderMode(false)"/>
 <script src="js/utilities.js"></script>
 <script src="_framework/blazor.web.js"></script>
 </body>

diff --git a/...en.Blazor.Core/Components/Chat/Chat.razor → ...Open.Blazor.Ui/Components/Chat/Chat.razor b/...en.Blazor.Core/Components/Chat/Chat.razor → ...Open.Blazor.Ui/Components/Chat/Chat.razor
@@ -1,14 +1,15 @@
 @using Open.Blazor.Core.Models.Enums
+
 @if (OllamaHostMode == OllamaHostMode.Local && _activeOllamaModels is not null)
 {
     <div class="p-6 bg-gray-800 text-white rounded-md shadow-md">
-
         <div class="text-xl font-bold mb-4">Chat Settings</div>
         <hr class="my-4 border-gray-600"/>
 
         <div class="mb-4">
             <label for="listOfActiveModels" class="block text-sm font-medium text-gray-300">Model</label>
-            <select id="listOfActiveModels" class="block w-52 p-2 bg-gray-700 border border-gray-600 rounded-md text-white"
+            <select id="listOfActiveModels"
+                    class="block w-52 p-2 bg-gray-700 border border-gray-600 rounded-md text-white"
                     @bind="_selectedModel">
                 @foreach (var model in _activeOllamaModels.Models)
                 {
@@ -17,53 +18,47 @@
             </select>
         </div>
 
-        @* Temperature Slider *@
         <div class="mb-4">
-            <label for="temp-control" class="block text-sm font-medium text-gray-300">
-                Temperature: @_temperature
-            </label>
+            <label for="temp-control" class="block text-sm font-medium text-gray-300">Temperature: @_temperature</label>
             <input id="temp-control" type="range" min="0" max="2" step="0.1"
-                   class="w-full h-2 bg-gray-600 rounded-lg cursor-pointer accent-blue-500"
-                   @bind="_temperature" />
-            <p class="text-xs text-gray-400 mt-1">Think of it as a measure of creativity. Lower values are more predictable, higher values are more diverse.</p>
+                   class="w-full h-2 bg-gray-600 rounded-lg cursor-pointer accent-blue-500" @bind="_temperature"/>
+            <p class="text-xs text-gray-400 mt-1">Think of it as a measure of creativity. Lower values are more
+                predictable, higher values are more diverse.</p>
         </div>
 
-        @* Max Tokens Slider *@
         <div class="mb-4">
-            <label for="max-token-control" class="block text-sm font-medium text-gray-300">
-                Max Tokens: @_maxTokens
-            </label>
+            <label for="max-token-control" class="block text-sm font-medium text-gray-300">Max
+                Tokens: @_maxTokens</label>
             <input id="max-token-control" type="range" min="0" max="4000" step="10"
-                   class="w-full h-2 bg-gray-600 rounded-lg cursor-pointer accent-blue-500"
-                   @bind="_maxTokens" />
-            <p class="text-xs text-gray-400 mt-1">Limits the response length by setting the maximum number of words or tokens.</p>
+                   class="w-full h-2 bg-gray-600 rounded-lg cursor-pointer accent-blue-500" @bind="_maxTokens"/>
+            <p class="text-xs text-gray-400 mt-1">Limits the response length by setting the maximum number of words or
+                tokens.</p>
         </div>
 
-        @* Other sliders omitted for brevity but follow the same pattern *@
-
         <div class="mb-4">
             <label for="system-prompt-control" class="block text-sm font-medium text-gray-300">System Prompt</label>
-            <textarea id="system-prompt-control" rows="4" class="block w-full p-2 bg-gray-700 border border-gray-600 rounded-md text-white"
+            <textarea id="system-prompt-control" rows="4"
+                      class="block w-full p-2 bg-gray-700 border border-gray-600 rounded-md text-white"
                       @bind="_chatSystemPrompt"></textarea>
             <p class="text-xs text-gray-400 mt-1">Personalizes responses based on identity or preferences.</p>
         </div>
     </div>
 }
 
-<div id="chat-window" class="p-6 bg-gray-900 rounded-md shadow-md text-white">
+<div id="chat-window" class="overflow-auto h-[calc(100vh-10rem)] mb-4">
     @foreach (var message in _discourse.ChatMessages)
     {
-        <ChatContent Message="message" ToastService="_toastService" JsRuntime="_jsRuntime" />
+        <ChatContent Message="message" JsRuntime="_jsRuntime"/>
     }
 </div>
 
-<div class="flex items-center space-x-4 mt-4">
+<div class="fixed bottom-0 left-1/2 transform -translate-x-1/2 bg-[#0d1117] p-4 flex items-center space-x-4 max-w-3xl w-full border-none">
     @if (!_isListening)
     {
         <button id="speech-button" class="p-2 bg-gray-800 border border-gray-700 rounded-full hover:bg-gray-700"
                 @onclick="StartListening">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
-                <path d="M9 3a3 3 0 1 1 6 0v6a3 3 0 1 1-6 0V3zM5 10a5 5 0 0 0 10 0V3a5 5 0 1 0-10 0v7zM2 10a8 8 0 1 1 16 0v6h-3v-6a8 8 0 1 0-16 0v6H2v-6z" />
+                <path d="M14 10c0 1.38-.56 2.63-1.46 3.54C11.64 14.77 10.37 15 9 15s-2.64-.23-3.54-.46C4.56 12.63 4 11.38 4 10c0-.74.2-1.43.56-2.03C5.56 7.23 6.79 7 8 7s2.44.23 3.44.97C13.8 8.57 14 9.26 14 10zM9 1c2.21 0 4 1.79 4 4v6a4 4 0 1 1-8 0V5c0-2.21 1.79-4 4-4z"/>
             </svg>
         </button>
     }
@@ -72,27 +67,33 @@
         <button id="speech-button" class="p-2 bg-red-800 border border-red-700 rounded-full hover:bg-red-700"
                 @onclick="StopListening">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-500" viewBox="0 0 20 20" fill="currentColor">
-                <path d="M10 3a3 3 0 0 1 3 3v6a3 3 0 1 1-6 0V6a3 3 0 0 1 3-3zM6 10a4 4 0 1 0 8 0V6a4 4 0 1 0-8 0v4zM3 10a7 7 0 1 1 14 0v5h-3v-5a7 7 0 1 0-14 0v5H3v-5z" />
+                <path d="M10 3a3 3 0 0 1 3 3v6a3 3 0 1 1-6 0V6a3 3 0 0 1 3-3zM6 10a4 4 0 1 0 8 0V6a4 4 0 1 0-8 0v4zM3 10a7 7 0 1 1 14 0v5h-3v-5a7 7 0 1 0-14 0v5H3v-5z"/>
             </svg>
         </button>
     }
 
-    <textarea class="flex-grow p-2 bg-gray-700 border border-gray-600 rounded-md text-white"
-              placeholder="Let's chat" @bind="_userMessage"></textarea>
+    <textarea class="w-full m-1 p-2 bg-gray-700 border border-gray-600 rounded-md text-white resize-none"
+              placeholder="Let's chat"
+              @bind="_userMessage"
+              style="min-height: 2.5rem; max-height: 10rem;">
+    </textarea>
 
     @if (!_isChatOngoing)
     {
         <button class="p-2 bg-gray-800 border border-gray-700 rounded-full hover:bg-gray-700" @onclick="SendMessage">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
-                <path d="M10 2a1 1 0 0 1 1 1v12a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1zm0 14a2 2 0 1 1 0 4 2 2 0 0 1 0-4z" />
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-500" viewBox="0 0 24 24"
+                 fill="currentColor">
+                <path
+                    d="M2.01 21l20.63-8.69a1.003 1.003 0 0 0 .01-1.86L2.01 1.99c-.72-.3-1.48.45-1.18 1.18L3.69 11H11a1 1 0 0 1 0 2H3.69l-2.86 7.83c-.3.73.46 1.48 1.18 1.18z"/>
             </svg>
         </button>
     }
     else
     {
         <button class="p-2 bg-gray-800 border border-gray-700 rounded-full hover:bg-gray-700" @onclick="StopChat">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-500" viewBox="0 0 20 20" fill="currentColor">
-                <path d="M9 2a1 1 0 0 1 1 1v14a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1z" />
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-500" viewBox="0 0 24 24"
+                 fill="currentColor">
+                <path d="M6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/>
             </svg>
         </button>
     }

diff --git a/...Blazor.Core/Components/Chat/Chat.razor.cs → ...n.Blazor.Ui/Components/Chat/Chat.razor.cs b/...Blazor.Core/Components/Chat/Chat.razor.cs → ...n.Blazor.Ui/Components/Chat/Chat.razor.cs
@@ -7,7 +7,7 @@
 using Open.Blazor.Core.Services;
 using Toolbelt.Blazor.SpeechRecognition;
 
-namespace Open.Blazor.Core.Components.Chat;
+namespace Open.Blazor.Ui.Components.Chat;
 
 public partial class Chat : ComponentBase, IDisposable
 {
@@ -109,6 +109,7 @@ private async Task SendMessage()
     {
         try
         {
+            Console.WriteLine($"Sending message: {_userMessage}");
             if (string.IsNullOrWhiteSpace(_userMessage)) return;
 
             _isChatOngoing = true;

diff --git a/...or.Core/Components/Chat/ChatContent.razor → ...azor.Ui/Components/Chat/ChatContent.razor b/...or.Core/Components/Chat/ChatContent.razor → ...azor.Ui/Components/Chat/ChatContent.razor
@@ -4,7 +4,7 @@
 
 @if (Message is not null)
 {
-    <div class="chat-content flex flex-col @(_alignment == "left" ? "items-start" : "items-end")">
+    <div class="chat-content flex flex-col @(_alignment == "left" ? "items-start" : "items-end") ">
         @if (Message.Role == MessageRole.User)
         {
             <div class="card-container bg-blue-500 text-white p-4 rounded-lg max-w-md shadow-lg">
@@ -29,7 +29,8 @@
             }
             else
             {
-                <div class="markdown-container prose prose-sm text-gray-300">
+                // todo: fix overlapping width
+                <div class="prose prose-sm text-gray-300 max-w-3xl w-full mx-auto break-words">
                     @((MarkupString)Markdown.ToHtml(Message.Content ?? string.Empty))
                 </div>
             }
@@ -39,8 +40,10 @@
                 <div class="copy-container mt-2">
                     <button id="copy-content-button" @onclick="CopyToClipboard"
                             class="p-2 bg-gray-700 hover:bg-gray-600 rounded-md">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-300" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M16 1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm0 14H4V3h12v12zM20 5h-2v2h2v12H8v-2H6v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm-6 4H6v2h8V9z" />
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-300" fill="currentColor"
+                             viewBox="0 0 24 24">
+                            <path
+                                d="M16 1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm0 14H4V3h12v12zM20 5h-2v2h2v12H8v-2H6v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm-6 4H6v2h8V9z"/>
                         </svg>
                     </button>
                     <div class="tooltip bg-gray-800 text-white p-2 rounded-md shadow-lg text-sm mt-1">
@@ -56,7 +59,7 @@
     [Parameter] public MessageContent? Message { get; set; }
 
     [Parameter] public IJSRuntime? JsRuntime { get; set; }
-    
+
 
     private string _alignment = string.Empty;
 
@@ -73,4 +76,5 @@
         // else
         //    // ToastService!.ShowError("Clipboard's empty");
     }
+
 }
diff --git a/...ore/Components/Chat/ChatContent.razor.css → ....Ui/Components/Chat/ChatContent.razor.css b/...ore/Components/Chat/ChatContent.razor.css → ....Ui/Components/Chat/ChatContent.razor.css
@@ -1,12 +1,12 @@
-::deep .markdown-content {
+.markdown-content {
     padding: 10px;
     border: 1px solid #444;
     border-radius: 5px;
     background-color: #1e1e1e;
     color: #dcdcdc;
 }
 
-::deep pre {
+pre {
     background-color: #0D0D0D;
     padding: 10px;
     border-radius: 5px;
@@ -15,49 +15,49 @@
     max-width: 700px;
 }
 
-::deep code {
+code {
     background-color: #0D0D0D;
     padding: 2px 4px;
     border-radius: 3px;
     color: #f8f8f2;
     max-width: 700px;
 }
 
-::deep strong {
+strong {
     color: #ffffff;
 }
 
-::deep a {
+a {
     color: #66d9ef;
     text-decoration: none;
 }
 
-::deep a:hover {
+a:hover {
     text-decoration: underline;
 }
 
-::deep blockquote {
+blockquote {
     color: #888;
     border-left: 3px solid #444;
     padding-left: 10px;
     margin-left: 0;
     margin-right: 0;
 }
 
-::deep ul, ol {
+ul, ol {
     padding-left: 20px;
 }
 
-::deep li {
+li {
     margin-bottom: 5px;
 }
 
-::deep .card-container {
+.card-container {
     display: flex;
     justify-content: flex-end;
 }
 
-::deep .card {
+.card {
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     padding: 10px;

diff --git a/src/Open.Blazor.Ui/Components/Home.razor b/src/Open.Blazor.Ui/Components/Home.razor
@@ -1,7 +1,4 @@
 @page "/"
-@using Open.Blazor.Core.Components.Chat
+@using Open.Blazor.Ui.Components.Chat
 <Chat/>
 
-@code {
-
-}
diff --git a/src/Open.Blazor.Ui/Components/Layout/MainLayout.razor b/src/Open.Blazor.Ui/Components/Layout/MainLayout.razor
@@ -8,10 +8,14 @@
     <main class="flex-grow bg-[#0d1117]">
         <div class="max-w-3xl mx-auto p-4">
             <ErrorBoundary>
-                <ChildContent> @Body </ChildContent>
+                <ChildContent>
+                    <CascadingValue Value="_hostMode">
+                        @Body
+                    </CascadingValue>
+                </ChildContent>
                 <ErrorContent Context="Exception">
                     <div class="bg-[#161b22] border border-[#f85149] text-[#f85149] px-4 py-3 rounded">
-                        <span class="font-bold">Error Type:</span> @Exception.GetType() <br />
+                        <span class="font-bold">Error Type:</span> @Exception.GetType() <br/>
                         <span class="font-bold">Message:</span> @Exception.Message
                     </div>
                     <p class="text-center text-[#8b949e] mt-4">Nothing to see here right now. Sorry!</p>
@@ -26,8 +30,9 @@
 </div>
 
 @code
+
 {
-    OllamaHostMode _hostMode;
+    OllamaHostMode _hostMode = OllamaHostMode.Aspire;
+
 
-
 }