simcop2387/text-generation-webui-mirror
1
0
Fork 0
mirror of https://github.com/oobabooga/text-generation-webui.git synced 2025-06-07 22:25:54 -04:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
css/chat_style-Dark.css
View file

@ -1,5 +1,6 @@
.message { .message {
display: grid; display: grid;
align-items: start;
grid-template-columns: 60px minmax(0, 1fr); grid-template-columns: 60px minmax(0, 1fr);
padding-bottom: 28px; padding-bottom: 28px;
font-size: 18px; font-size: 18px;
@ -102,6 +103,7 @@
@media screen and (width <= 688px) { @media screen and (width <= 688px) {
.message { .message {
display: grid; display: grid;
align-items: start;
grid-template-columns: 60px minmax(0, 1fr); grid-template-columns: 60px minmax(0, 1fr);
padding-bottom: 25px; padding-bottom: 25px;
font-size: 15px; font-size: 15px;

2
css/chat_style-TheEncrypted777.css
View file

@ -2,6 +2,7 @@
.message { .message {
display: grid; display: grid;
align-items: start;
grid-template-columns: 60px minmax(0, 1fr); grid-template-columns: 60px minmax(0, 1fr);
padding-bottom: 28px; padding-bottom: 28px;
font-size: 18px; font-size: 18px;
@ -100,6 +101,7 @@
@media screen and (width <= 688px) { @media screen and (width <= 688px) {
.message { .message {
display: grid; display: grid;
align-items: start;
grid-template-columns: 60px minmax(0, 1fr); grid-template-columns: 60px minmax(0, 1fr);
padding-bottom: 25px; padding-bottom: 25px;
font-size: 15px; font-size: 15px;

1
css/chat_style-cai-chat.css
View file

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

5
css/main.css
View file

@ -403,6 +403,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
.chat-parent { .chat-parent {
height: calc(100dvh - 98px - var(--input-delta)); height: calc(100dvh - 98px - var(--input-delta));
overflow: auto !important; overflow: auto !important;
/* scroll-behavior: smooth; */
border-radius: 0 !important; border-radius: 0 !important;
margin-bottom: var(--input-delta) !important; margin-bottom: var(--input-delta) !important;
} }
@ -1382,3 +1383,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
50% { opacity: 1; } 50% { opacity: 1; }
100% { opacity: 0.6; } 100% { opacity: 0.6; }
} }
.streaming {
min-height: 70vh;
}

9
modules/html_generator.py
View file

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