2023-08-21 06:02:53 +02:00
|
|
|
let main_parent = document.getElementById('chat-tab').parentNode;
|
2023-03-15 20:34:31 +01:00
|
|
|
let extensions = document.getElementById('extensions');
|
|
|
|
|
2023-08-13 06:12:15 +02:00
|
|
|
main_parent.childNodes[0].classList.add("header_bar");
|
|
|
|
main_parent.style = "padding: 0; margin: 0";
|
|
|
|
main_parent.parentNode.parentNode.style = "padding: 0";
|
|
|
|
|
2023-08-21 06:02:53 +02:00
|
|
|
document.querySelector('.header_bar').addEventListener('click', function(event) {
|
|
|
|
if (event.target.tagName === 'BUTTON') {
|
|
|
|
const buttonText = event.target.textContent.trim();
|
|
|
|
|
|
|
|
let chat_visible = (buttonText == 'Chat');
|
|
|
|
let default_visible = (buttonText == 'Default');
|
|
|
|
let notebook_visible = (buttonText == 'Notebook');
|
2023-08-13 06:12:15 +02:00
|
|
|
|
2023-08-21 06:02:53 +02:00
|
|
|
// Check if one of the generation tabs is visible
|
|
|
|
if (chat_visible || notebook_visible || default_visible) {
|
|
|
|
extensions.style.display = 'flex';
|
|
|
|
if (chat_visible) {
|
|
|
|
extensions.style.maxWidth = "800px";
|
|
|
|
extensions.style.padding = "0px";
|
|
|
|
} else {
|
|
|
|
extensions.style.maxWidth = "none";
|
|
|
|
extensions.style.padding = "15px";
|
|
|
|
}
|
2023-08-13 06:12:15 +02:00
|
|
|
} else {
|
2023-08-21 06:02:53 +02:00
|
|
|
extensions.style.display = 'none';
|
2023-08-13 06:12:15 +02:00
|
|
|
}
|
2023-03-15 20:34:31 +01:00
|
|
|
}
|
|
|
|
});
|
2023-08-02 17:02:36 +02:00
|
|
|
|
2023-08-17 20:06:18 +02:00
|
|
|
//------------------------------------------------
|
2023-08-27 22:06:01 +02:00
|
|
|
// Keyboard shortcuts
|
2023-08-17 20:06:18 +02:00
|
|
|
//------------------------------------------------
|
2023-08-03 17:13:17 +02:00
|
|
|
document.addEventListener("keydown", function(event) {
|
2023-08-27 22:06:01 +02:00
|
|
|
|
|
|
|
// Stop generation on Esc pressed
|
2023-08-03 17:13:17 +02:00
|
|
|
if (event.key === "Escape") {
|
|
|
|
// Find the element with id 'stop' and click it
|
|
|
|
var stopButton = document.getElementById("stop");
|
|
|
|
if (stopButton) {
|
|
|
|
stopButton.click();
|
|
|
|
}
|
|
|
|
}
|
2023-08-27 22:06:01 +02:00
|
|
|
|
|
|
|
// Show chat controls on Ctrl+S pressed
|
|
|
|
else if (event.ctrlKey && event.key == "s") {
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
var showControlsElement = document.getElementById('show-controls');
|
|
|
|
if (showControlsElement && showControlsElement.childNodes.length >= 4) {
|
|
|
|
showControlsElement.childNodes[3].click();
|
2023-08-28 01:45:37 +02:00
|
|
|
|
|
|
|
var arr = document.getElementById('chat-input').childNodes[2].childNodes;
|
|
|
|
arr[arr.length - 1].focus();
|
2023-08-27 22:06:01 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-08-03 17:13:17 +02:00
|
|
|
});
|
2023-08-17 06:03:40 +02:00
|
|
|
|
2023-08-28 22:50:36 +02:00
|
|
|
//------------------------------------------------
|
|
|
|
// Position the chat typing dots
|
|
|
|
//------------------------------------------------
|
|
|
|
typing = document.getElementById('typing-container');
|
|
|
|
typingParent = typing.parentNode;
|
|
|
|
typingSibling = typing.previousElementSibling;
|
|
|
|
typingSibling.insertBefore(typing, typingSibling.childNodes[2]);
|
|
|
|
|
2023-08-17 20:06:18 +02:00
|
|
|
//------------------------------------------------
|
2023-08-17 06:03:40 +02:00
|
|
|
// Chat scrolling
|
2023-08-17 20:06:18 +02:00
|
|
|
//------------------------------------------------
|
2023-08-17 06:03:40 +02:00
|
|
|
const targetElement = document.getElementById('chat').parentNode.parentNode.parentNode;
|
2023-08-28 21:03:20 +02:00
|
|
|
targetElement.classList.add('pretty_scrollbar');
|
|
|
|
targetElement.classList.add('chat-parent');
|
|
|
|
let isScrolled = false;
|
|
|
|
|
|
|
|
targetElement.addEventListener('scroll', function() {
|
|
|
|
let diff = targetElement.scrollHeight - targetElement.clientHeight;
|
|
|
|
if(Math.abs(targetElement.scrollTop - diff) <= 1 || diff == 0) {
|
|
|
|
isScrolled = false;
|
|
|
|
} else {
|
|
|
|
isScrolled = true;
|
|
|
|
}
|
|
|
|
});
|
2023-08-17 06:03:40 +02:00
|
|
|
|
|
|
|
// Create a MutationObserver instance
|
|
|
|
const observer = new MutationObserver(function(mutations) {
|
|
|
|
mutations.forEach(function(mutation) {
|
2023-08-28 21:03:20 +02:00
|
|
|
if(!isScrolled) {
|
|
|
|
targetElement.scrollTop = targetElement.scrollHeight;
|
|
|
|
}
|
2023-08-28 22:50:36 +02:00
|
|
|
|
|
|
|
const firstChild = targetElement.children[0];
|
|
|
|
if (firstChild.classList.contains('generating')) {
|
|
|
|
typing.parentNode.classList.add('visible-dots');
|
|
|
|
} else {
|
|
|
|
typing.parentNode.classList.remove('visible-dots');
|
|
|
|
}
|
|
|
|
|
2023-08-17 06:03:40 +02:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
// Configure the observer to watch for changes in the subtree and attributes
|
|
|
|
const config = {
|
|
|
|
childList: true,
|
|
|
|
subtree: true,
|
|
|
|
characterData: true,
|
|
|
|
attributeOldValue: true,
|
|
|
|
characterDataOldValue: true
|
|
|
|
};
|
|
|
|
|
|
|
|
// Start observing the target element
|
|
|
|
observer.observe(targetElement, config);
|
2023-08-17 20:06:18 +02:00
|
|
|
|
2023-08-28 21:03:20 +02:00
|
|
|
//------------------------------------------------
|
|
|
|
// Add some scrollbars
|
|
|
|
//------------------------------------------------
|
|
|
|
const textareaElements = document.querySelectorAll('.add_scrollbar textarea');
|
|
|
|
for(i = 0; i < textareaElements.length; i++) {
|
|
|
|
textareaElements[i].classList.remove('scroll-hide');
|
|
|
|
textareaElements[i].classList.add('pretty_scrollbar');
|
|
|
|
textareaElements[i].style.resize = "none";
|
|
|
|
}
|
|
|
|
|
2023-08-17 20:06:18 +02:00
|
|
|
//------------------------------------------------
|
|
|
|
// Improve the looks of the chat input field
|
|
|
|
//------------------------------------------------
|
|
|
|
document.getElementById('chat-input').parentNode.style.background = 'transparent';
|
|
|
|
document.getElementById('chat-input').parentNode.style.border = 'none';
|
2023-08-23 05:18:16 +02:00
|
|
|
|
|
|
|
//------------------------------------------------
|
|
|
|
// Remove some backgrounds
|
|
|
|
//------------------------------------------------
|
|
|
|
const noBackgroundelements = document.querySelectorAll('.no-background');
|
|
|
|
for(i = 0; i < noBackgroundelements.length; i++) {
|
|
|
|
noBackgroundelements[i].parentNode.style.border = 'none';
|
|
|
|
noBackgroundelements[i].parentNode.parentNode.parentNode.style.alignItems = 'center';
|
|
|
|
}
|