diff --git a/js/main.js b/js/main.js index e9a980e2..460b3538 100644 --- a/js/main.js +++ b/js/main.js @@ -539,3 +539,60 @@ document.querySelectorAll(".focus-on-chat-input").forEach(element => { // Fix a border around the "past chats" menu //------------------------------------------------ document.getElementById("past-chats").parentNode.style.borderRadius = "0px"; + +//------------------------------------------------ +// Allow the character dropdown to coexist at the +// Chat tab and the Parameters > Character tab +//------------------------------------------------ + +const headerBar = document.querySelector(".header_bar"); +let originalParent; +let originalIndex; // To keep track of the original position +let movedElement; + +function moveToChatTab() { + const characterMenu = document.getElementById("character-menu"); + const grandParent = characterMenu.parentElement.parentElement; + + if (!originalParent) { + originalParent = grandParent.parentElement; + originalIndex = Array.from(originalParent.children).indexOf(grandParent); + movedElement = grandParent; + } + + const instructRadio = document.querySelector("#chat-mode input[value=\"instruct\"]"); + if (instructRadio && instructRadio.checked) { + grandParent.style.display = "none"; + } + + const chatControlsFirstChild = document.querySelector("#chat-controls").firstElementChild; + const newParent = chatControlsFirstChild; + let newPosition = newParent.children.length - 2; + + newParent.insertBefore(grandParent, newParent.children[newPosition]); +} + +function restoreOriginalPosition() { + if (originalParent && movedElement) { + if (originalIndex >= originalParent.children.length) { + originalParent.appendChild(movedElement); + } else { + originalParent.insertBefore(movedElement, originalParent.children[originalIndex]); + } + + movedElement.style.display = ""; + } +} + +headerBar.addEventListener("click", (e) => { + if (e.target.tagName === "BUTTON") { + const tabName = e.target.textContent.trim(); + if (tabName === "Chat") { + moveToChatTab(); + } else { + restoreOriginalPosition(); + } + } +}); + +moveToChatTab(); diff --git a/modules/ui_chat.py b/modules/ui_chat.py index 112e6b51..c537a5c6 100644 --- a/modules/ui_chat.py +++ b/modules/ui_chat.py @@ -300,6 +300,8 @@ def create_event_handlers(): lambda x: gr.update(choices=(histories := chat.find_all_histories_with_first_prompts(x)), value=histories[0][1]), gradio('interface_state'), gradio('unique_id'), show_progress=False).then( None, None, None, js=f'() => {{{ui.update_big_picture_js}; updateBigPicture()}}') + shared.gradio['mode'].change(None, gradio('mode'), None, js="(mode) => {mode === 'instruct' ? document.getElementById('character-menu').parentNode.parentNode.style.display = 'none' : document.getElementById('character-menu').parentNode.parentNode.style.display = ''}") + shared.gradio['mode'].change( lambda x: [gr.update(visible=x != 'instruct'), gr.update(visible=x == 'chat-instruct')], gradio('mode'), gradio('chat_style', 'chat-instruct_command'), show_progress=False).then( ui.gather_interface_values, gradio(shared.input_elements), gradio('interface_state')).then(