cc

LM-Kit · Jan 11, 2025 · 4155347 · 4155347
1 parent 54379d7
commit 4155347
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 56 deletions.
diff --git a/LM-Kit-Maestro/UI/Razor/Components/Chat.razor b/LM-Kit-Maestro/UI/Razor/Components/Chat.razor
@@ -11,12 +11,11 @@
 
 <div id="chat-container">
     <div id="chats-sidebar">
-
     </div>
 
-    <div id="conversation-container">
-        <div id="conversation-content"
-             class="chat-element dark @(ViewModel.ConversationListViewModel.CurrentConversation is { IsEmpty: true } ? "centered-container" : "top-align-container")">
+    <div id="chat-content">
+        <div id="chat-messages"
+             class="chat-element @(ViewModel.ConversationListViewModel.CurrentConversation is { IsEmpty: true } ? "centered-container" : "top-align-container")">
             @if (ViewModel?.ConversationListViewModel.CurrentConversation != null)
             {
                 if (ViewModel.ConversationListViewModel.CurrentConversation.IsEmpty)
@@ -56,40 +55,39 @@
                     </div>
                 }
             }
-        </div>
 
-        <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 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 id="settings-sidebar">
 
-    </div>
+        <div id="user-input" class="chat-element">
+            <UserInput ViewModel="ViewModel!.ConversationListViewModel.CurrentConversation" />
+        </div>
 
-    <div id="user-input" class="chat-element">
-        <UserInput ViewModel="ViewModel!.ConversationListViewModel.CurrentConversation" />
+        <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>
+            }
+        </div>
     </div>
 
-    <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>
-        }
+    <div id="settings-sidebar">
     </div>
 </div>
 
@@ -329,7 +327,7 @@
 
 
     [JSInvokable]
-    public async Task OnConversationContainerScrolled(double scrollTop)
+    public async Task OnChatScrolled(double scrollTop)
     {
         _scrollTop = scrollTop;
 

diff --git a/LM-Kit-Maestro/UI/Razor/Components/Chat.razor.css b/LM-Kit-Maestro/UI/Razor/Components/Chat.razor.css
@@ -8,36 +8,38 @@
     /*    width: auto;
     left: 0;
     right: 0;*/
-
 }
 
-#conversation-container {
-    background-color: transparent;
-    display: flex;
+#chat-content {
+    display: grid;
+    grid-template-rows: 1fr, auto, auto;
     flex-direction: column;
     position: relative;
     overflow-y: auto;
     scrollbar-gutter: both-edges stable;
-    grid-template-rows: 1fr auto;
 }
 
-    #conversation-container::-webkit-scrollbar {
-        width: 10px;
-    }
+#chat-messages {
+
+}
 
-    #conversation-container::-webkit-scrollbar-thumb {
-        background-color: var(--OutlineVariant);
-        border-radius: 0;
-        border: 10px solid transparent;
-    }
+#chat-content::-webkit-scrollbar {
+    width: 10px;
+}
 
-    #conversation-container::-webkit-scrollbar-track {
-        background-color: transparent;
-    }
+#chat-content::-webkit-scrollbar-thumb {
+    background-color: var(--OutlineVariant);
+    border-radius: 0;
+    border: 10px solid transparent;
+}
 
-    #conversation-container::-webkit-scrollbar-thumb:hover {
-        background-color: var(--Outline);
-    }
+#chat-content::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+
+#chat-content::-webkit-scrollbar-thumb:hover {
+    background-color: var(--Outline);
+}
 
 #bottom-space {
     display: flex;

diff --git a/LM-Kit-Maestro/wwwroot/js/lmkitmaestro.js b/LM-Kit-Maestro/wwwroot/js/lmkitmaestro.js
@@ -21,19 +21,19 @@ document.addEventListener("DOMContentLoaded", function () {
     Chat 
 */
 function initializeScrollHandler(dotNetHelper) {
-    const container = document.getElementById('conversation-container');
+    const container = document.getElementById('chat-content');
     container.addEventListener('scroll', () => {
-        dotNetHelper.invokeMethodAsync('OnConversationContainerScrolled', container.scrollTop);
+        dotNetHelper.invokeMethodAsync('OnChatScrolled', container.scrollTop);
     });
 }
 
 function getScrollHeight() {
-    const element = document.getElementById('conversation-container');
+    const element = document.getElementById('chat-content');
     return element.scrollHeight;
 };
 
 function getConversationViewHeight() {
-    const element = document.getElementById('conversation-container');
+    const element = document.getElementById('chat-content');
     return element.clientHeight;
 };
 
@@ -44,7 +44,7 @@ function setUserInputFocus() {
 }
 
 function scrollToEnd(smooth) {
-    const container = document.getElementById('conversation-container');
+    const container = document.getElementById('chat-content');
     container.scrollTo({
         top: container.scrollHeight,
         behavior: smooth ? 'smooth' : 'auto'