UI: Add padding to only show the last message/reply after sending a message

To avoid scrolling

css/chat_style-Dark.css

@@ -2,7 +2,8 @@
     display: grid;
     align-items: start;
     grid-template-columns: 60px minmax(0, 1fr);
-    padding-bottom: 28px;
+    padding-bottom: 14px;
+    padding-top: 14px;
     font-size: 18px;
     font-family: Roboto, Arial, sans-serif; /* Modern font */
     line-height: 1.5;

css/chat_style-TheEncrypted777.css

@@ -4,7 +4,8 @@
     display: grid;
     align-items: start;
     grid-template-columns: 60px minmax(0, 1fr);
-    padding-bottom: 28px;
+    padding-bottom: 14px;
+    padding-top: 14px;
     font-size: 18px;
     font-family: 'Noto Sans', Arial, sans-serif;
     line-height: 1.428571429;

css/chat_style-cai-chat-square.css

@@ -16,6 +16,7 @@
 }
 
 .message {
-    padding-bottom: 2em;
+    padding-bottom: 1em;
+    padding-top: 1em;
     grid-template-columns: 70px minmax(0, 1fr);
 }

css/chat_style-cai-chat.css

@@ -2,7 +2,8 @@
     display: grid;
     align-items: start;
     grid-template-columns: 60px minmax(0, 1fr);
-    padding-bottom: 2em;
+    padding-bottom: 1em;
+    padding-top: 1em;
     font-size: 15px;
     font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
     line-height: 22.5px !important;

css/chat_style-messenger.css

@@ -1,5 +1,6 @@
 .message {
-    padding-bottom: 25px;
+    padding-bottom: 12.5px;
+    padding-top: 12.5px;
     font-size: 15px;
     font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
     line-height: 1.428571429;

css/chat_style-wpp.css

@@ -1,5 +1,6 @@
 .message {
-    padding-bottom: 25px;
+    padding-bottom: 12.5px;
+    padding-top: 12.5px;
     font-size: 15px;
     font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
     line-height: 1.428571429;

css/html_instruct_style.css

@@ -8,10 +8,6 @@
     padding-top: 0 !important;
 }
 
-.chat > .messages > :last-child {
-    margin-bottom: 1.7rem !important;
-}
-
 .chat .message-body p, .chat .message-body li {
     font-size: 1rem !important;
     line-height: 28px !important;

css/main.css

@@ -1375,7 +1375,3 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     50% { opacity: 1; }
     100% { opacity: 0.6; }
 }
-
-.streaming {
-    min-height: 70vh;
-}

js/main.js

@@ -150,6 +150,16 @@ const observer = new MutationObserver(function(mutations) {
   if (!isScrolled && targetElement.scrollTop !== targetElement.scrollHeight) {
     targetElement.scrollTop = targetElement.scrollHeight;
   }
+
+  const chatElement = document.getElementById("chat");
+  if (chatElement) {
+    const messagesContainer = chatElement.querySelector(".messages");
+    const lastChild = messagesContainer?.lastElementChild;
+    const prevSibling = lastChild?.previousElementSibling;
+    if (lastChild && prevSibling) {
+      lastChild.style.minHeight = `calc(100vh - ${prevSibling.offsetHeight}px - 102px)`;
+    }
+  }
 });
 
 // Configure the observer to watch for changes in the subtree and attributes

modules/html_generator.py

@@ -365,9 +365,8 @@ def generate_instruct_html(history):
                 f'</div>'
             )
 
-        streaming_class = " streaming" if i == len(history["visible"]) - 1 else ""
         output += (
-            f'<div class="assistant-message{streaming_class}" '
+            f'<div class="assistant-message" '
             f'data-raw="{html.escape(row_internal[1], quote=True)}">'
             f'<div class="text">'
             f'<div class="message-body">{converted_visible[1]}</div>'
@@ -415,9 +414,8 @@ def generate_cai_chat_html(history, name1, name2, style, character, reset_cache=
                 f'</div>'
             )
 
-        streaming_class = " streaming" if i == len(history["visible"]) - 1 else ""
         output += (
-            f'<div class="message{streaming_class}" '
+            f'<div class="message" '
             f'data-raw="{html.escape(row_internal[1], quote=True)}">'
             f'<div class="circle-bot">{img_bot}</div>'
             f'<div class="text">'
@@ -454,9 +452,8 @@ def generate_chat_html(history, name1, name2, reset_cache=False):
                 f'</div>'
             )
 
-        streaming_class = " streaming" if i == len(history["visible"]) - 1 else ""
         output += (
-            f'<div class="message{streaming_class}" '
+            f'<div class="message" '
             f'data-raw="{html.escape(row_internal[1], quote=True)}">'
             f'<div class="text-bot">'
             f'<div class="message-body">{converted_visible[1]}</div>'