Merge pull request #5044 from TheLounger/style_improvements

Improve chat styles

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

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 {

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";
+        this.style.marginBottom = "0px";
-        extensions.style.padding = "0px";
+        extensions && (extensions.style.maxWidth = "880px");
+        extensions && (extensions.style.padding = "0px");
       } else {
-        extensions.style.maxWidth = "none";
+        this.style.marginBottom = "19px";
-        extensions.style.padding = "15px";
+        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
+// Define global CSS properties for resizing and
-// the height of the chat parent
+// positioning certain elements
 //------------------------------------------------
-function updateChatHeight() {
+let currentChatInputHeight = 0;
-  const chatContainer = document.getElementById('chat').parentNode.parentNode.parentNode;
-  const newChatHeight = `${chatContainer.clientHeight}px`;
 
+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);

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