Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve chat styles #5044

Merged
merged 21 commits into from
Dec 25, 2023
Merged

Improve chat styles #5044

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
f42074b
UI: Remove header margin on chat tab
TheLounger Dec 19, 2023
40d5bf6
Set margin on other tabs too
TheLounger Dec 19, 2023
ff3e845
UI: Header boy is dropping shadows
TheLounger Dec 20, 2023
f9accd3
UI: Update chat instruct styles
TheLounger Dec 20, 2023
a098c7e
Merge branch 'dev' into style_improvements
TheLounger Dec 20, 2023
e3e053a
UI: Expand chat vertically and handle header wrapping
TheLounger Dec 21, 2023
6fbd64d
Set borders for all chat styles
TheLounger Dec 21, 2023
0dd759c
Claim more vertical space
TheLounger Dec 21, 2023
568541a
Remove bottom padding on chat tab
TheLounger Dec 21, 2023
588b37c
Add slight padding to top of message container
TheLounger Dec 21, 2023
554a8f9
Attempt at shrinking chat area when input box grows
TheLounger Dec 22, 2023
4aeebfc
Merge branch 'dev' into TheLounger-style_improvements
oobabooga Dec 24, 2023
73ba7a8
Change height -> min-height for .chat
oobabooga Dec 25, 2023
18ca35f
Space between chat tab and extensions block
oobabooga Dec 25, 2023
ae92795
Remove instruct style border radius
oobabooga Dec 25, 2023
02d063f
Fix extra space after 18ca35faaa9e8fb52da368bf9eb156a46e9c7b84
oobabooga Dec 25, 2023
5466ae5
Prevent input/chat area overlap with new --my-delta variable
oobabooga Dec 25, 2023
8d0359a
Rename some CSS variables
oobabooga Dec 25, 2023
abd2275
Fix a border radius
oobabooga Dec 25, 2023
63553b4
Improve some paddings
oobabooga Dec 25, 2023
2ad6c52
Check if extensions block exists before changing it
oobabooga Dec 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion css/html_instruct_style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,12 @@
background: var(--block-background-fill);
padding: 24px 19px;
padding-right: 19px !important;
padding-top: 0px;
border: 1px solid var(--block-border-color);
border-radius: 8px;
}

.chat > .messages {
padding-top: 28px !important;
}

.message {
Expand All @@ -15,6 +19,10 @@
line-height: 24px;
}

.message:first-child {
padding-top: 0;
}

.username {
display: none;
}
Expand Down
34 changes: 20 additions & 14 deletions css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,16 +91,19 @@ div.svelte-15lo0d8 > *, div.svelte-15lo0d8 > .form > * {

.header_bar {
background-color: #f7f7f7;
margin-bottom: 19px;
box-shadow: 0 2px 3px rgba(22 22 22 / 35%);
margin-bottom: 0px;
overflow-x: scroll;
margin-left: calc(-1 * var(--size-4));
margin-right: calc(-1 * var(--size-4));
display: block !important;
text-wrap: nowrap;
z-index: 90;
}

.dark .header_bar {
border: none !important;
box-shadow: 0 3px 4px rgba(20 20 20 / 60%);
background-color: #8080802b;
}

Expand Down Expand Up @@ -299,6 +302,10 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
width: 100%;
}

#chat-tab {
padding-top: 0px;
}

#chat-tab button#Generate, #chat-tab button#stop {
width: 89.3438px !important;
}
Expand All @@ -318,14 +325,6 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
padding-left: 0;
padding-right: 0;
}

.chat-parent {
height: calc(100dvh - 179px) !important;
}

.old-ui .chat-parent {
height: calc(100dvh - 310px) !important;
}
}

.chat {
Expand All @@ -339,24 +338,31 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
flex-direction: column;
word-break: break-word;
overflow-wrap: anywhere;
border-top: none;
border-radius: 0 0 0 8px;
}

.chat-parent {
height: calc(100dvh - 181px);
height: calc(100dvh - 98px - var(--header-height) - var(--input-delta));
overflow: auto !important;
border-radius: 0 !important;
margin-bottom: var(--input-delta) !important;
}

.old-ui .chat-parent {
height: calc(100dvh - 270px);
height: calc(100dvh - 192px - var(--header-height) - var(--input-delta));
margin-bottom: var(--input-delta) !important;
}

.chat-parent.bigchat {
height: calc(100dvh - 181px) !important;
height: calc(100dvh - 98px - var(--header-height) - var(--input-delta)) !important;
margin-bottom: var(--input-delta) !important;
}

.chat > .messages {
display: flex;
flex-direction: column;
padding-top: 25px;
}

.chat .message:last-child {
Expand Down Expand Up @@ -624,11 +630,11 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
}

#chat-col {
padding-bottom: 115px;
padding-bottom: 100px;
}

.old-ui #chat-col, #chat-col.bigchat {
padding-bottom: 95px !important;
padding-bottom: 80px !important;
}

.old-ui #chat-buttons #clear-history-confirm {
Expand Down
48 changes: 35 additions & 13 deletions js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,20 @@ document.querySelector(".header_bar").addEventListener("click", function(event)

// Check if one of the generation tabs is visible
if (chat_visible || notebook_visible || default_visible) {
extensions.style.display = "flex";
extensions && (extensions.style.display = "flex");

if (chat_visible) {
extensions.style.maxWidth = "880px";
extensions.style.padding = "0px";
this.style.marginBottom = "0px";
extensions && (extensions.style.maxWidth = "880px");
extensions && (extensions.style.padding = "0px");
} else {
extensions.style.maxWidth = "none";
extensions.style.padding = "15px";
this.style.marginBottom = "19px";
extensions && (extensions.style.maxWidth = "none");
extensions && (extensions.style.padding = "15px");
}
} else {
extensions.style.display = "none";
this.style.marginBottom = "19px";
extensions && (extensions.style.display = "none");
}
}
});
Expand Down Expand Up @@ -123,7 +127,7 @@ targetElement.addEventListener("scroll", function() {
// Create a MutationObserver instance
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
updateChatHeight();
updateCssProperties();

if(!isScrolled) {
targetElement.scrollTop = targetElement.scrollHeight;
Expand Down Expand Up @@ -326,14 +330,32 @@ function toggleBigPicture() {
}

//------------------------------------------------
// Define the --chat-height global CSS variable to
// the height of the chat parent
// Define global CSS properties for resizing and
// positioning certain elements
//------------------------------------------------
function updateChatHeight() {
const chatContainer = document.getElementById('chat').parentNode.parentNode.parentNode;
const newChatHeight = `${chatContainer.clientHeight}px`;
let currentChatInputHeight = 0;

function updateCssProperties() {
// Set the height of the chat area
const chatContainer = document.getElementById('chat').parentNode.parentNode.parentNode;
const chatInputHeight = document.querySelector('#chat-input textarea').clientHeight;
const newChatHeight = `${chatContainer.clientHeight - chatInputHeight + 40}px`;
document.documentElement.style.setProperty('--chat-height', newChatHeight);
document.documentElement.style.setProperty('--input-delta', `${chatInputHeight - 40}px`);

// Set the position offset of the chat input box
const header = document.querySelector('.header_bar');
const headerHeight = `${header.clientHeight}px`;
document.documentElement.style.setProperty('--header-height', headerHeight);

// Offset the scroll position of the chat area
if (chatInputHeight !== currentChatInputHeight) {
chatContainer.scrollTop += chatInputHeight > currentChatInputHeight ? chatInputHeight : -chatInputHeight;
currentChatInputHeight = chatInputHeight;
}
}

window.addEventListener('resize', updateChatHeight);
new ResizeObserver(updateCssProperties)
.observe(document.querySelector('#chat-input textarea'));

window.addEventListener('resize', updateCssProperties);
2 changes: 2 additions & 0 deletions js/show_controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ function toggle_controls(value) {
chatParent.classList.remove("bigchat");
document.getElementById("chat-input-row").classList.remove("bigchat");
document.getElementById("chat-col").classList.remove("bigchat");
document.getElementById("chat-tab").style.paddingBottom = "";

let gallery_element = document.getElementById('gallery-extension');
if (gallery_element) {
Expand All @@ -24,5 +25,6 @@ function toggle_controls(value) {
chatParent.classList.add("bigchat");
document.getElementById("chat-input-row").classList.add("bigchat");
document.getElementById("chat-col").classList.add("bigchat");
document.getElementById("chat-tab").style.paddingBottom = "0px";
}
}