UI: Add a min-height to prevent constant scrolling during chat streaming

This commit is contained in:
oobabooga 2025-05-02 23:45:58 -07:00
parent b21bd8bb1e
commit b71ef50e9d
5 changed files with 16 additions and 3 deletions

View file

@ -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;

View file

@ -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;

View file

@ -1,5 +1,6 @@
.message {
display: grid;
align-items: start;
grid-template-columns: 60px minmax(0, 1fr);
padding-bottom: 2em;
font-size: 15px;

View file

@ -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;
}

View file

@ -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>'