Move hover menu shortcuts to right side (#3951)

css/main.css

@@ -313,6 +313,10 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     .chat-parent {
         height: calc(100dvh - 179px) !important;
     }
+
+    .old-ui .chat-parent {
+        height: calc(100dvh - 310px) !important;
+    }
 }
 
 .chat {
@@ -333,11 +337,11 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     overflow: auto !important;
 }
 
-.chat-parent.old-ui {
+.old-ui .chat-parent {
     height: calc(100dvh - 270px);
 }
 
-.bigchat {
+.chat-parent.bigchat {
     height: calc(100dvh - 181px) !important;
 }
 
@@ -515,7 +519,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
   width: 100%;
   background: transparent !important;
   border-radius: 0px !important;
-  justify-content: left;
+  justify-content: space-between;
   margin: 0 !important;
   height: 36px;
 }
@@ -536,6 +540,52 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
   opacity: 0.333;
 }
 
-#chat-buttons:not(.old-ui) {
+#chat-tab:not(.old-ui) #chat-buttons {
     display: none !important;
 }
+
+#gr-hover-container {
+  min-width: 0 !important;
+  display: flex;
+  flex-direction: column-reverse;
+  padding-right: 20px;
+  padding-bottom: 3px;
+  flex-grow: 0 !important;
+}
+
+#generate-stop-container {
+  min-width: 0 !important;
+  display: flex;
+  flex-direction: column-reverse;
+  padding-bottom: 3px;
+  flex: 0 auto !important;
+}
+
+#chat-input-container {
+  min-width: 0 !important;
+}
+
+#chat-input-container > .form {
+  background: transparent;
+  border: none;
+}
+
+#chat-input-row {
+  padding-bottom: 20px;
+}
+
+.old-ui #chat-input-row, #chat-input-row.bigchat {
+  padding-bottom: 0px !important;
+}
+
+#chat-col {
+    padding-bottom: 115px;
+}
+
+.old-ui #chat-col, #chat-col.bigchat {
+    padding-bottom: 95px !important;
+}
+
+.old-ui #chat-buttons #clear-history-confirm {
+    order: -1;
+}

js/main.js

@@ -213,30 +213,6 @@ for(i = 0; i < textareaElements.length; i++) {
     textareaElements[i].style.resize = "none";
 }
 
-//------------------------------------------------
-// Improve the looks of the chat input field
-//------------------------------------------------
-let isOld = document.querySelectorAll('.old-ui').length > 0;
-
-document.getElementById('chat-input').parentNode.style.background = 'transparent';
-document.getElementById('chat-input').parentNode.style.border = 'none';
-document.getElementById('chat-input').parentElement.parentElement.style.minWidth = 0;
-
-document.getElementById('stop').parentElement.parentElement.style.minWidth = 0;
-document.getElementById('stop').parentElement.parentElement.style.display = 'flex';
-document.getElementById('stop').parentElement.parentElement.style.flexDirection = 'column-reverse';
-document.getElementById('stop').parentElement.parentElement.style.paddingBottom = '3px';
-document.getElementById('stop').parentElement.parentElement.parentElement.style.paddingBottom = isOld ? '0px' : '20px';
-
-document.getElementById('stop').parentElement.parentElement.style.flex = '0 0 auto';
-
-document.getElementById('gr-hover').parentElement.style.minWidth = 0;
-document.getElementById('gr-hover').parentElement.style.display = 'flex';
-document.getElementById('gr-hover').parentElement.style.flexDirection = 'column-reverse';
-document.getElementById('gr-hover').parentElement.style.flex = '0';
-document.getElementById('gr-hover').parentElement.style.paddingRight = '20px';
-document.getElementById('gr-hover').parentElement.style.paddingBottom = '3px';
-
 //------------------------------------------------
 // Remove some backgrounds
 //------------------------------------------------
@@ -251,7 +227,7 @@ for(i = 0; i < noBackgroundelements.length; i++) {
 // The show/hide events were adapted from:
 // https://github.com/SillyTavern/SillyTavern/blob/6c8bd06308c69d51e2eb174541792a870a83d2d6/public/script.js
 //------------------------------------------------
-var buttonsInChat = document.querySelectorAll("#chat-tab #chat-buttons:not(.old-ui) button");
+var buttonsInChat = document.querySelectorAll("#chat-tab:not(.old-ui) #chat-buttons button");
 var button = document.getElementById('hover-element-button');
 var menu = document.getElementById('hover-menu');
 
@@ -280,17 +256,16 @@ if (buttonsInChat.length > 0) {
         if (matches && matches.length > 1) {
             // Apply the transparent-substring class to the matched substring
             const substring = matches[1];
-            const newText = buttonText.replace(substring, `&nbsp;<span class="transparent-substring">${substring}</span>`);
+            const newText = buttonText.replace(substring, `&nbsp;<span class="transparent-substring">${substring.slice(1, -1)}</span>`);
             thisButton.innerHTML = newText;
         }
     }
 } else {
-    buttonsInChat = document.querySelectorAll("#chat-tab #chat-buttons.old-ui button");
+    buttonsInChat = document.querySelectorAll("#chat-tab.old-ui #chat-buttons button");
-    console.log(buttonsInChat);
     for (let i = 0; i < buttonsInChat.length; i++) {
         buttonsInChat[i].textContent = buttonsInChat[i].textContent.replace(/ \(.*?\)/, '');
     }
-    document.getElementById('gr-hover').parentElement.style.display = 'none';
+    document.getElementById('gr-hover-container').style.display = 'none';
 }
 
 function isMouseOverButtonOrMenu() {

js/show_controls.js

@@ -1,6 +1,5 @@
 const belowChatInput = document.querySelectorAll("#chat-tab > div > :nth-child(n+2), #extensions");
 const chatParent = document.querySelector(".chat-parent");
-let isOld = document.querySelectorAll('.old-ui').length > 0;
 
 function toggle_controls(value) {
     if (value) {
@@ -9,15 +8,15 @@ function toggle_controls(value) {
         });
 
         chatParent.classList.remove("bigchat");
-        document.getElementById('stop').parentElement.parentElement.parentElement.style.paddingBottom = isOld ? '0px' : '20px';
+        document.getElementById('chat-input-row').classList.remove("bigchat");
-        document.getElementById('show-controls').parentNode.parentNode.style.paddingBottom = isOld ? '95px' : '115px';
+        document.getElementById('chat-col').classList.remove("bigchat");
     } else {
         belowChatInput.forEach(element => {
           element.style.display = "none";
         });
 
         chatParent.classList.add("bigchat");
-        document.getElementById('stop').parentElement.parentElement.parentElement.style.paddingBottom = '0px';
+        document.getElementById('chat-input-row').classList.add("bigchat")
-        document.getElementById('show-controls').parentNode.parentNode.style.paddingBottom = '95px';
+        document.getElementById('chat-col').classList.add("bigchat");
     }
 }

modules/ui_chat.py

@@ -20,27 +20,27 @@ def create_ui():
     shared.gradio['dummy'] = gr.State()
     shared.gradio['history'] = gr.State({'internal': [], 'visible': []})
 
-    with gr.Tab('Chat', elem_id='chat-tab'):
+    with gr.Tab('Chat', elem_id='chat-tab', elem_classes=("old-ui" if shared.args.chat_buttons else None)):
         with gr.Row():
-            with gr.Column():
+            with gr.Column(elem_id='chat-col'):
-                shared.gradio['display'] = gr.HTML(value=chat_html_wrapper({'internal': [], 'visible': []}, shared.settings['name1'], shared.settings['name2'], 'chat', 'cai-chat'), elem_classes=("old-ui" if shared.args.chat_buttons else None))
+                shared.gradio['display'] = gr.HTML(value=chat_html_wrapper({'internal': [], 'visible': []}, shared.settings['name1'], shared.settings['name2'], 'chat', 'cai-chat'))
 
-                with gr.Row():
+                with gr.Row(elem_id="chat-input-row"):
-                    with gr.Column(scale=1):
+                    with gr.Column(scale=1, elem_id='gr-hover-container'):
                         gr.HTML(value='<div class="hover-element" onclick="void(0)"><span style="width: 100px; display: block" id="hover-element-button">&#9776;</span><div class="hover-menu" id="hover-menu"></div>', elem_id='gr-hover')
 
-                    with gr.Column(scale=10):
+                    with gr.Column(scale=10, elem_id='chat-input-container'):
                         shared.gradio['textbox'] = gr.Textbox(label='', placeholder='Send a message', elem_id='chat-input', elem_classes=['add_scrollbar'])
                         shared.gradio['show_controls'] = gr.Checkbox(value=shared.settings['show_controls'], label='Show controls (Ctrl+S)', elem_id='show-controls')
                         shared.gradio['typing-dots'] = gr.HTML(value='<div class="typing"><span></span><span class="dot1"></span><span class="dot2"></span></div>', label='typing', elem_id='typing-container')
 
-                    with gr.Column(scale=1):
+                    with gr.Column(scale=1, elem_id='generate-stop-container'):
                         with gr.Row():
                             shared.gradio['Stop'] = gr.Button('Stop', elem_id='stop', visible=False)
                             shared.gradio['Generate'] = gr.Button('Generate', elem_id='Generate', variant='primary')
 
         # Hover menu buttons
-        with gr.Column(elem_id='chat-buttons', elem_classes=("old-ui" if shared.args.chat_buttons else None)):
+        with gr.Column(elem_id='chat-buttons'):
             with gr.Row():
                 shared.gradio['Regenerate'] = gr.Button('Regenerate (Ctrl + Enter)', elem_id='Regenerate')
                 shared.gradio['Continue'] = gr.Button('Continue (Alt + Enter)', elem_id='Continue')