From b71ef50e9d01c15a09c67b95e2032fed535c63ba Mon Sep 17 00:00:00 2001
From: oobabooga <112222186+oobabooga@users.noreply.github.com>
Date: Fri, 2 May 2025 23:45:58 -0700
Subject: [PATCH] UI: Add a min-height to prevent constant scrolling during
 chat streaming

---
 css/chat_style-Dark.css            | 2 ++
 css/chat_style-TheEncrypted777.css | 2 ++
 css/chat_style-cai-chat.css        | 1 +
 css/main.css                       | 5 +++++
 modules/html_generator.py          | 9 ++++++---
 5 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/css/chat_style-Dark.css b/css/chat_style-Dark.css
index 368a2a16..3b2bd385 100644
--- a/css/chat_style-Dark.css
+++ b/css/chat_style-Dark.css
@@ -1,5 +1,6 @@
 .message {
     display: grid;
+    align-items: start;
     grid-template-columns: 60px minmax(0, 1fr);
     padding-bottom: 28px;
     font-size: 18px;
@@ -102,6 +103,7 @@
 @media screen and (width <= 688px) {
     .message {
         display: grid;
+        align-items: start;
         grid-template-columns: 60px minmax(0, 1fr);
         padding-bottom: 25px;
         font-size: 15px;
diff --git a/css/chat_style-TheEncrypted777.css b/css/chat_style-TheEncrypted777.css
index 6404f41d..25d26db8 100644
--- a/css/chat_style-TheEncrypted777.css
+++ b/css/chat_style-TheEncrypted777.css
@@ -2,6 +2,7 @@
 
 .message {
     display: grid;
+    align-items: start;
     grid-template-columns: 60px minmax(0, 1fr);
     padding-bottom: 28px;
     font-size: 18px;
@@ -100,6 +101,7 @@
 @media screen and (width <= 688px) {
     .message {
         display: grid;
+        align-items: start;
         grid-template-columns: 60px minmax(0, 1fr);
         padding-bottom: 25px;
         font-size: 15px;
diff --git a/css/chat_style-cai-chat.css b/css/chat_style-cai-chat.css
index 93276bd3..223f6150 100644
--- a/css/chat_style-cai-chat.css
+++ b/css/chat_style-cai-chat.css
@@ -1,5 +1,6 @@
 .message {
     display: grid;
+    align-items: start;
     grid-template-columns: 60px minmax(0, 1fr);
     padding-bottom: 2em;
     font-size: 15px;
diff --git a/css/main.css b/css/main.css
index d6e5ac83..cf0dfde7 100644
--- a/css/main.css
+++ b/css/main.css
@@ -403,6 +403,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
 .chat-parent {
     height: calc(100dvh - 98px - var(--input-delta));
     overflow: auto !important;
+    /* scroll-behavior: smooth; */
     border-radius: 0 !important;
     margin-bottom: var(--input-delta) !important;
 }
@@ -1382,3 +1383,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     50% { opacity: 1; }
     100% { opacity: 0.6; }
 }
+
+.streaming {
+    min-height: 70vh;
+}
diff --git a/modules/html_generator.py b/modules/html_generator.py
index 67d15b6e..a6f5f930 100644
--- a/modules/html_generator.py
+++ b/modules/html_generator.py
@@ -365,8 +365,9 @@ def generate_instruct_html(history):
                 f'</div>'
             )
 
+        streaming_class = " streaming" if i == len(history["visible"]) - 1 else ""
         output += (
-            f'<div class="assistant-message" '
+            f'<div class="assistant-message{streaming_class}" '
             f'data-raw="{html.escape(row_internal[1], quote=True)}">'
             f'<div class="text">'
             f'<div class="message-body">{converted_visible[1]}</div>'
@@ -414,8 +415,9 @@ 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" '
+            f'<div class="message{streaming_class}" '
             f'data-raw="{html.escape(row_internal[1], quote=True)}">'
             f'<div class="circle-bot">{img_bot}</div>'
             f'<div class="text">'
@@ -452,8 +454,9 @@ 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" '
+            f'<div class="message{streaming_class}" '
             f'data-raw="{html.escape(row_internal[1], quote=True)}">'
             f'<div class="text-bot">'
             f'<div class="message-body">{converted_visible[1]}</div>'