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

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

Browse source 
To avoid scrolling
This commit is contained in:
oobabooga 2025-05-04 18:04:52 -07:00
parent d9da16edba
commit 690d693913
10 changed files with 25 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
css/chat_style-Dark.css
View file

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

3
css/chat_style-TheEncrypted777.css
View file

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

3
css/chat_style-cai-chat-square.css
View file

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

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

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

3
css/chat_style-messenger.css
View file

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

3
css/chat_style-wpp.css
View file

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

4
css/html_instruct_style.css
View file

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

4
css/main.css
View file

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

10
js/main.js
View file

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

9
modules/html_generator.py
View file

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