diff --git a/css/html_instruct_style.css b/css/html_instruct_style.css
index 5a439304..130c353a 100644
--- a/css/html_instruct_style.css
+++ b/css/html_instruct_style.css
@@ -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 {
@@ -15,6 +19,10 @@
line-height: 24px;
}
+.message:first-child {
+ padding-top: 0;
+}
+
.username {
display: none;
}
diff --git a/css/main.css b/css/main.css
index 33feb179..fa706ba9 100644
--- a/css/main.css
+++ b/css/main.css
@@ -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;
}
@@ -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;
}
@@ -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 {
@@ -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 {
@@ -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 {
diff --git a/js/main.js b/js/main.js
index 9f10915d..0828dee4 100644
--- a/js/main.js
+++ b/js/main.js
@@ -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");
}
}
});
@@ -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;
@@ -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);
diff --git a/js/show_controls.js b/js/show_controls.js
index 0ba1ecde..cdd6efc4 100644
--- a/js/show_controls.js
+++ b/js/show_controls.js
@@ -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) {
@@ -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";
}
}
diff --git a/settings-template.yaml b/settings-template.yaml
index 8f7e9e9e..8ebbc1ab 100644
--- a/settings-template.yaml
+++ b/settings-template.yaml
@@ -15,6 +15,7 @@ truncation_length: 2048
truncation_length_min: 0
truncation_length_max: 200000
max_tokens_second: 0
+max_updates_second: 0
custom_stopping_strings: ''
custom_token_bans: ''
auto_max_new_tokens: false