diff --git a/css/main.css b/css/main.css
index bdaacd4f..adc59fba 100644
--- a/css/main.css
+++ b/css/main.css
@@ -582,7 +582,6 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
#chat-input {
padding: 0;
- padding-top: 18px;
background: transparent;
border: none;
}
@@ -661,31 +660,6 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
}
}
-#show-controls {
- position: absolute;
- background-color: transparent;
- border: 0 !important;
- border-radius: 0;
-}
-
-#show-controls label {
- z-index: 1000;
- position: absolute;
- right: 30px;
- top: 10px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.dark #show-controls span {
- color: var(--neutral-400);
-}
-
-#show-controls span {
- color: var(--neutral-600);
-}
-
#typing-container {
display: none;
position: absolute;
@@ -785,6 +759,32 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
background: var(--selected-item-color-dark) !important;
}
+#show-controls {
+ height: 36px;
+ border-top: 1px solid var(--border-color-dark) !important;
+ border-left: 1px solid var(--border-color-dark) !important;
+ border-right: 1px solid var(--border-color-dark) !important;
+ border-radius: 0;
+ border-bottom: 0 !important;
+ background-color: var(--darker-gray);
+ padding-top: 3px;
+ padding-left: 4px;
+ display: flex;
+}
+
+#show-controls label {
+ display: flex;
+ flex-direction: row-reverse;
+ font-weight: bold;
+ justify-content: space-between;
+ width: 100%;
+ padding-right: 12px;
+}
+
+#show-controls label input {
+ margin-top: 4px;
+}
+
.transparent-substring {
opacity: 0.333;
}
diff --git a/js/main.js b/js/main.js
index b9cb3cdd..3652daa0 100644
--- a/js/main.js
+++ b/js/main.js
@@ -277,7 +277,7 @@ for (i = 0; i < slimDropdownElements.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 button");
+var buttonsInChat = document.querySelectorAll("#chat-tab #chat-buttons button, #chat-tab #chat-buttons #show-controls");
var button = document.getElementById("hover-element-button");
var menu = document.getElementById("hover-menu");
var istouchscreen = (navigator.maxTouchPoints > 0) || "ontouchstart" in document.documentElement;
@@ -298,18 +298,21 @@ if (buttonsInChat.length > 0) {
const thisButton = buttonsInChat[i];
menu.appendChild(thisButton);
- thisButton.addEventListener("click", () => {
- hideMenu();
- });
+ // Only apply transformations to button elements
+ if (thisButton.tagName.toLowerCase() === 'button') {
+ thisButton.addEventListener("click", () => {
+ hideMenu();
+ });
+
+ const buttonText = thisButton.textContent;
+ const matches = buttonText.match(/(\(.*?\))/);
- const buttonText = thisButton.textContent;
- const matches = buttonText.match(/(\(.*?\))/);
-
- if (matches && matches.length > 1) {
- // Apply the transparent-substring class to the matched substring
- const substring = matches[1];
- const newText = buttonText.replace(substring, ` ${substring.slice(1, -1)}`);
- thisButton.innerHTML = newText;
+ if (matches && matches.length > 1) {
+ // Apply the transparent-substring class to the matched substring
+ const substring = matches[1];
+ const newText = buttonText.replace(substring, ` ${substring.slice(1, -1)}`);
+ thisButton.innerHTML = newText;
+ }
}
}
}
@@ -382,21 +385,10 @@ document.addEventListener("click", function (event) {
}
});
-//------------------------------------------------
-// Relocate the "Show controls" checkbox
-//------------------------------------------------
-var elementToMove = document.getElementById("show-controls");
-var parent = elementToMove.parentNode;
-for (var i = 0; i < 2; i++) {
- parent = parent.parentNode;
-}
-
-parent.insertBefore(elementToMove, parent.firstChild);
-
//------------------------------------------------
// Position the chat input
//------------------------------------------------
-document.getElementById("show-controls").parentNode.classList.add("chat-input-positioned");
+document.getElementById("chat-input-row").classList.add("chat-input-positioned");
//------------------------------------------------
// Focus on the chat input
diff --git a/modules/ui_chat.py b/modules/ui_chat.py
index 73528a92..822b77b8 100644
--- a/modules/ui_chat.py
+++ b/modules/ui_chat.py
@@ -55,7 +55,6 @@ def create_ui():
with gr.Column(scale=10, elem_id='chat-input-container'):
shared.gradio['textbox'] = gr.MultimodalTextbox(label='', placeholder='Send a message', file_types=['text', '.pdf'], file_count="multiple", 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='
', label='typing', elem_id='typing-container')
with gr.Column(scale=1, elem_id='generate-stop-container'):
@@ -65,21 +64,15 @@ def create_ui():
# Hover menu buttons
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')
- shared.gradio['Remove last'] = gr.Button('Remove last reply (Ctrl + Shift + Backspace)', elem_id='Remove-last')
-
- with gr.Row():
- shared.gradio['Impersonate'] = gr.Button('Impersonate (Ctrl + Shift + M)', elem_id='Impersonate')
-
- with gr.Row():
- shared.gradio['Send dummy message'] = gr.Button('Send dummy message')
- shared.gradio['Send dummy reply'] = gr.Button('Send dummy reply')
-
- with gr.Row():
- shared.gradio['send-chat-to-default'] = gr.Button('Send to Default')
- shared.gradio['send-chat-to-notebook'] = gr.Button('Send to Notebook')
+ shared.gradio['Regenerate'] = gr.Button('Regenerate (Ctrl + Enter)', elem_id='Regenerate')
+ shared.gradio['Continue'] = gr.Button('Continue (Alt + Enter)', elem_id='Continue')
+ shared.gradio['Remove last'] = gr.Button('Remove last reply (Ctrl + Shift + Backspace)', elem_id='Remove-last')
+ shared.gradio['Impersonate'] = gr.Button('Impersonate (Ctrl + Shift + M)', elem_id='Impersonate')
+ shared.gradio['Send dummy message'] = gr.Button('Send dummy message')
+ shared.gradio['Send dummy reply'] = gr.Button('Send dummy reply')
+ shared.gradio['send-chat-to-default'] = gr.Button('Send to Default')
+ shared.gradio['send-chat-to-notebook'] = gr.Button('Send to Notebook')
+ shared.gradio['show_controls'] = gr.Checkbox(value=shared.settings['show_controls'], label='Show controls (Ctrl+S)', elem_id='show-controls')
with gr.Row(elem_id='chat-controls', elem_classes=['pretty_scrollbar']):
with gr.Column():