Restyle the chat input box + several CSS improvements

- Remove extra spacing below the last chat message
- Change the background color of code blocks in dark mode
- Remove border radius from selected header bar elements
- Make the chat scrollbar more discrete

css/html_instruct_style.css

@@ -43,6 +43,10 @@
     margin-bottom: 9px !important;
 }
 
+.gradio-container .chat .assistant-message:last-child, .gradio-container .chat .user-message:last-child {
+    margin-bottom: 0px !important;
+}
+
 .dark .chat .assistant-message {
     background-color: #3741519e;
     border: 1px solid #4b5563;
@@ -58,5 +62,5 @@ code {
 }
 
 .dark code {
-    background-color: #1a212f !important;
+    background-color: #0e1321 !important;
 }

css/main.css

@@ -100,6 +100,10 @@ div.svelte-15lo0d8 > *, div.svelte-15lo0d8 > .form > * {
     background-color: #8080802b;
 }
 
+.header_bar button.selected {
+    border-radius: 0;
+}
+
 .textbox_default textarea {
     height: calc(100dvh - 310px);
 }
@@ -166,7 +170,7 @@ button {
 }
 
 .pretty_scrollbar::-webkit-scrollbar {
-  width: 10px;
+  width: 5px;
 }
 
 .pretty_scrollbar::-webkit-scrollbar-track {
@@ -176,13 +180,11 @@ button {
 .pretty_scrollbar::-webkit-scrollbar-thumb,
 .pretty_scrollbar::-webkit-scrollbar-thumb:hover {
   background: #c5c5d2;
-  border-radius: 10px;
 }
 
 .dark .pretty_scrollbar::-webkit-scrollbar-thumb,
 .dark .pretty_scrollbar::-webkit-scrollbar-thumb:hover {
   background: #374151;
-  border-radius: 10px;
 }
 
 .pretty_scrollbar::-webkit-resizer {
@@ -247,7 +249,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     }
 
     #chat {
-        height: calc(100dvh - 272px) !important;
+        height: calc(100dvh - 262px) !important;
     }
 
     .bigchat #chat {
@@ -265,7 +267,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     max-width: 800px;
     height: 100%;
     overflow-y: auto;
-    padding-right: 20px;
+    padding-right: 15px;
     display: flex;
     flex-direction: column;
     word-break: break-word;
@@ -274,7 +276,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
 }
 
 #chat {
-    height: calc(100dvh - 284px);
+    height: calc(100dvh - 272px);
 }
 
 .bigchat #chat {
@@ -284,7 +286,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
 #show-controls {
     position: absolute;
     background-color: transparent;
-    left: calc(100% - 140px);
+    left: calc(100% - 130px);
 }
 
 .chat > .messages {
@@ -292,6 +294,11 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     flex-direction: column;
 }
 
+.chat .message:last-child {
+    margin-bottom: 0px !important;
+    padding-bottom: 0px !important;
+}
+
 .message-body li {
     margin-top: 0.5em !important;
     margin-bottom: 0.5em !important;
@@ -322,6 +329,17 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     white-space: normal !important;
 }
 
+#chat-input {
+    padding: 0;
+    padding-top: 18px;
+    background: var(--background-fill-primary);
+    border: none;
+}
+
+#chat-input textarea:focus {
+    box-shadow: none !important;
+}
+
 @media print {
     body {
         visibility: hidden;

js/main.js

@@ -30,7 +30,9 @@ main_parent.addEventListener('click', function(e) {
     }
 });
 
+//------------------------------------------------
 // Add some scrollbars
+//------------------------------------------------
 const textareaElements = document.querySelectorAll('.add_scrollbar textarea');
 for(i = 0; i < textareaElements.length; i++) {
     textareaElements[i].classList.remove('scroll-hide');
@@ -38,7 +40,9 @@ for(i = 0; i < textareaElements.length; i++) {
     textareaElements[i].style.resize = "none";
 }
 
+//------------------------------------------------
 // Stop generation on Esc pressed
+//------------------------------------------------
 document.addEventListener("keydown", function(event) {
   if (event.key === "Escape") {
     // Find the element with id 'stop' and click it
@@ -49,7 +53,9 @@ document.addEventListener("keydown", function(event) {
   }
 });
 
+//------------------------------------------------
 // Chat scrolling
+//------------------------------------------------
 const targetElement = document.getElementById('chat').parentNode.parentNode.parentNode;
 
 // Create a MutationObserver instance
@@ -71,3 +77,9 @@ const config = {
 
 // Start observing the target element
 observer.observe(targetElement, config);
+
+//------------------------------------------------
+// Improve the looks of the chat input field
+//------------------------------------------------
+document.getElementById('chat-input').parentNode.style.background = 'transparent';
+document.getElementById('chat-input').parentNode.style.border = 'none';

modules/ui_chat.py

@@ -22,7 +22,7 @@ def create_ui():
 
     with gr.Tab('Chat', elem_id='chat-tab'):
         shared.gradio['display'] = gr.HTML(value=chat_html_wrapper({'internal': [], 'visible': []}, shared.settings['name1'], shared.settings['name2'], 'chat', 'cai-chat'))
-        shared.gradio['textbox'] = gr.Textbox(label='Input', elem_id='chat-input')
+        shared.gradio['textbox'] = gr.Textbox(label='', placeholder='Send a message', elem_id='chat-input')
         shared.gradio['show_controls'] = gr.Checkbox(value=shared.settings['show_controls'], label='Show controls', elem_id='show-controls')
 
         with gr.Row():