From 08f6445d6faf998958dfc2e825f568998d567a2f Mon Sep 17 00:00:00 2001
From: BeepBeepBopBop <116374330+BeepBeepBopBop@users.noreply.github.com>
Date: Wed, 15 Jan 2025 12:14:09 +0100
Subject: [PATCH] cc

---
 LM-Kit-Maestro/UI/Razor/Components/Chat.razor | 106 +++++++++---------
 .../UI/Razor/Components/Chat.razor.css        |  23 ++--
 LM-Kit-Maestro/wwwroot/js/lmkitmaestro.js     |  13 ++-
 3 files changed, 73 insertions(+), 69 deletions(-)

diff --git a/LM-Kit-Maestro/UI/Razor/Components/Chat.razor b/LM-Kit-Maestro/UI/Razor/Components/Chat.razor
index e4e44f94..ef13f538 100644
--- a/LM-Kit-Maestro/UI/Razor/Components/Chat.razor
+++ b/LM-Kit-Maestro/UI/Razor/Components/Chat.razor
@@ -10,7 +10,7 @@
 @inherits MvvmComponentBase<ChatPageViewModel>
 
 <div id="chat-container">
-    <div id="chats-sidebar"class="@(ViewModel.ChatsSidebarIsToggled ? "sidebar-show" : "sidebar-hide")">
+    <div id="chats-sidebar" class="@(ViewModel.ChatsSidebarIsToggled ? "sidebar-show" : "sidebar-hide")">
 
         <div id="conversation-list">
 
@@ -26,64 +26,62 @@
     </div>
 
     <div id="chat-content">
-        <div id="chat-messages"
-             class="@(ViewModel.ConversationListViewModel.CurrentConversation is { IsEmpty: true } ? "centered-container" : "top-align-container")">
-            @if (ViewModel?.ConversationListViewModel.CurrentConversation != null)
+        @if (ViewModel?.ConversationListViewModel.CurrentConversation != null)
+        {
+            if (ViewModel.ConversationListViewModel.CurrentConversation.IsEmpty)
             {
-                if (ViewModel.ConversationListViewModel.CurrentConversation.IsEmpty)
-                {
-                    <div id="empty-conversation" class="chat-element vertical-stack">
-                        <div class="vertical-stack spacing-4">
-                            <div class="welcome-message"><b>Maestro</b> at your service—let’s orchestrate something
-                                amazing!
-                            </div>
-                            <div class="welcome-message">
-                                Feel free to ask questions, explore ideas, or engage in meaningful conversations.
-
-                            </div>
-                            <div class="welcome-message">
-                                Whether you need assistance, inspiration, or just some lighthearted chat, I'm here to
-                                help.
+                <div id="empty-conversation" class="chat-element vertical-stack">
+                    <div class="vertical-stack spacing-4">
+                        <div class="welcome-message"><b>Maestro</b> at your service—let’s orchestrate something
+                            amazing!
+                        </div>
+                        <div class="welcome-message">
+                            Feel free to ask questions, explore ideas, or engage in meaningful conversations.
 
-                            </div>
+                        </div>
+                        <div class="welcome-message">
+                            Whether you need assistance, inspiration, or just some lighthearted chat, I'm here to
+                            help.
 
                         </div>
 
-                        <div class="vertical-stack" style="gap:12px;">
-                            <div class="shortcut-instruction">
-                                Press Enter to send a new message
-                            </div>
+                    </div>
+
+                    <div class="vertical-stack" style="gap:12px;">
+                        <div class="shortcut-instruction">
+                            Press Enter to send a new message
+                        </div>
 
-                            <div class="shortcut-instruction">
-                                Hold Shift + Enter to insert a new line
-                            </div>
+                        <div class="shortcut-instruction">
+                            Hold Shift + Enter to insert a new line
                         </div>
                     </div>
-                }
-                else
-                {
-                    <div id="message-list" class="chat-element">
-                        @foreach (var message in ViewModel.ConversationListViewModel.CurrentConversation.Messages)
-                        {
-                            <ChatMessage MessageViewModel="message"/>
-                        }
-                    </div>
-                }
+                </div>
             }
-
-            <div id="chat-info" class="chat-element">
-                <div id="scroll-to-end">
-                    @if (!IsScrolledToEnd)
+            else
+            {
+                <div id="chat-messages" class="chat-element">
+                    @foreach (var message in ViewModel.ConversationListViewModel.CurrentConversation.Messages)
                     {
-                        <button @onclick="OnScrollToEndButtonClicked" class="round-button scroll-to-end-button">
-                            <span>
-                                <i class="fas fa-arrow-down"></i>
-                            </span>
-                        </button>
+                        <ChatMessage MessageViewModel="message"/>
                     }
+
+                    <div id="chat-info" class="chat-element">
+                        <div id="scroll-to-end">
+                            @if (!IsScrolledToEnd)
+                            {
+                                <button @onclick="OnScrollToEndButtonClicked" class="round-button scroll-to-end-button">
+                                <span>
+                                    <i class="fas fa-arrow-down"></i>
+                                </span>
+                                </button>
+                            }
+                        </div>
+                    </div>
                 </div>
-            </div>
-        </div>
+            }
+        }
+
 
         <div id="user-input" class="chat-element">
             <UserInput ViewModel="ViewModel!.ConversationListViewModel.CurrentConversation"/>
@@ -92,17 +90,17 @@
         <div id="bottom-space">
             @if (ViewModel?.ConversationListViewModel?.CurrentConversation?.LMKitConversation?.ContextSize > 0)
             {
-                    <MudText Align="Align.Center" Typo="Typo.caption">
-                        Tokens: @ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextUsedSpace /
-                        @ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextSize
-                        (@CalculateUsagePercentage(ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextUsedSpace,
-                            ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextSize)%)
-                    </MudText>
+                <MudText Align="Align.Center" Typo="Typo.caption">
+                    Tokens: @ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextUsedSpace /
+                    @ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextSize
+                    (@CalculateUsagePercentage(ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextUsedSpace,
+                             ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextSize)%)
+                </MudText>
             }
         </div>
     </div>
 
-@*     <div id="settings-sidebar"
+    @*     <div id="settings-sidebar"
          class="@(ViewModel.SettingsSidebarIsToggled ? "sidebar-show" : "sidebar-hide")">
         <ChatSettings/>
     </div> *@
diff --git a/LM-Kit-Maestro/UI/Razor/Components/Chat.razor.css b/LM-Kit-Maestro/UI/Razor/Components/Chat.razor.css
index 6044d5fd..9957e366 100644
--- a/LM-Kit-Maestro/UI/Razor/Components/Chat.razor.css
+++ b/LM-Kit-Maestro/UI/Razor/Components/Chat.razor.css
@@ -16,6 +16,9 @@
     height: 100%;
     width: 100%;
     scrollbar-gutter: both-edges stable;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
 }
 
     #chat-messages::-webkit-scrollbar {
@@ -79,16 +82,17 @@ body.mac .chat-element {
     justify-content: center;
 }
 
-#message-list {
-    margin: auto;
-    display: flex;
-    flex-direction: column;
-}
-
 #empty-conversation {
-    flex-direction: column;
-    gap: 32px;
+    height: 100%;
+/*    gap: 32px;
     display: flex;
+    align-items: center;
+    height: 100%;
+    justify-content: center;
+    background-color: red;
+    margin-inline: 0 auto;
+    width: 100%;
+    text-align: center;*/
 }
 
 #chat-info {
@@ -133,13 +137,12 @@ body.mac .chat-element {
 }
 
 .sidebar-hide {
-    visibility: collapse;
+    display: none;
 }
 
 .sidebar-show {
     overflow-y: auto;
     background-color: var(--Surface);
-    visibility: visible;
     width: 300px;
     min-width: 300px;
     max-width: 300px;
diff --git a/LM-Kit-Maestro/wwwroot/js/lmkitmaestro.js b/LM-Kit-Maestro/wwwroot/js/lmkitmaestro.js
index 5f1a5bfd..eaa42693 100644
--- a/LM-Kit-Maestro/wwwroot/js/lmkitmaestro.js
+++ b/LM-Kit-Maestro/wwwroot/js/lmkitmaestro.js
@@ -44,11 +44,14 @@ function setUserInputFocus() {
 }
 
 function scrollToEnd(smooth) {
-    const container = document.getElementById('chat-messages');
-    container.scrollTo({
-        top: container.scrollHeight,
-        behavior: smooth ? 'smooth' : 'auto'
-    });
+    const element = document.getElementById('chat-messages');
+
+    if (element != null) {
+        element.scrollTo({
+            top: element.scrollHeight,
+            behavior: smooth ? 'smooth' : 'auto'
+        });
+    }
 }