text-generation-webui/js/main.js

598 lines
19 KiB
JavaScript
Raw Normal View History

2023-10-07 22:07:57 -04:00
let main_parent = document.getElementById("chat-tab").parentNode;
let extensions = document.getElementById("extensions");
2023-08-13 00:12:15 -04:00
main_parent.childNodes[0].classList.add("header_bar");
main_parent.style = "padding: 0; margin: 0";
2023-08-29 19:15:12 -04:00
main_parent.parentNode.style = "gap: 0";
2023-08-13 00:12:15 -04:00
main_parent.parentNode.parentNode.style = "padding: 0";
2023-10-07 22:07:57 -04:00
document.querySelector(".header_bar").addEventListener("click", function(event) {
if (event.target.tagName !== "BUTTON") return;
2023-10-07 22:07:57 -04:00
const buttonText = event.target.textContent.trim();
const extensionsVisible = ["Chat", "Default", "Notebook"].includes(buttonText);
const chatVisible = buttonText === "Chat";
const showControlsChecked = document.querySelector("#show-controls input").checked;
const extensions = document.querySelector("#extensions");
2023-10-07 22:07:57 -04:00
if (extensionsVisible) {
if (extensions) {
extensions.style.display = "flex";
extensions.style.maxWidth = chatVisible ? "880px" : "none";
extensions.style.padding = chatVisible ? "0px" : "15px";
}
this.style.marginBottom = chatVisible ? "0px" : "19px";
if (chatVisible && !showControlsChecked) {
document.querySelectorAll("#chat-tab > div > :nth-child(n+2), #extensions").forEach(element => {
element.style.display = "none";
});
}
} else {
this.style.marginBottom = "19px";
if (extensions) extensions.style.display = "none";
2023-10-07 22:07:57 -04:00
}
});
//------------------------------------------------
2023-08-27 16:06:01 -04:00
// Keyboard shortcuts
//------------------------------------------------
2024-01-09 19:27:50 -05:00
let previousTabId = "chat-tab-button";
2023-08-03 11:13:17 -04:00
document.addEventListener("keydown", function(event) {
2023-08-27 16:06:01 -04:00
// Stop generation on Esc pressed
2023-08-03 11:13:17 -04: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 16:06:01 -04:00
2023-09-13 22:21:39 -04:00
// Show chat controls on Ctrl + S
2023-08-27 16:06:01 -04:00
else if (event.ctrlKey && event.key == "s") {
event.preventDefault();
2023-10-07 22:07:57 -04:00
var showControlsElement = document.getElementById("show-controls");
2023-08-27 16:06:01 -04:00
if (showControlsElement && showControlsElement.childNodes.length >= 4) {
showControlsElement.childNodes[3].click();
2023-08-27 19:45:37 -04:00
2023-10-07 22:07:57 -04:00
var arr = document.getElementById("chat-input").childNodes[2].childNodes;
2023-08-27 19:45:37 -04:00
arr[arr.length - 1].focus();
2023-08-27 16:06:01 -04:00
}
}
2023-09-13 22:21:39 -04:00
// Regenerate on Ctrl + Enter
2023-10-07 22:07:57 -04:00
else if (event.ctrlKey && event.key === "Enter") {
2023-09-13 22:21:39 -04:00
event.preventDefault();
2023-10-07 22:07:57 -04:00
document.getElementById("Regenerate").click();
2023-09-13 22:21:39 -04:00
}
2023-09-14 06:59:12 -04:00
// Continue on Alt + Enter
2023-10-07 22:07:57 -04:00
else if (event.altKey && event.key === "Enter") {
2023-09-13 22:21:39 -04:00
event.preventDefault();
2023-10-07 22:07:57 -04:00
document.getElementById("Continue").click();
2023-09-13 22:21:39 -04:00
}
// Remove last on Ctrl + Shift + Backspace
2023-10-07 22:07:57 -04:00
else if (event.ctrlKey && event.shiftKey && event.key === "Backspace") {
2023-09-13 22:21:39 -04:00
event.preventDefault();
2023-10-07 22:07:57 -04:00
document.getElementById("Remove-last").click();
2023-09-13 22:21:39 -04:00
}
// Copy last on Ctrl + Shift + K
2023-10-07 22:07:57 -04:00
else if (event.ctrlKey && event.shiftKey && event.key === "K") {
2023-09-13 22:21:39 -04:00
event.preventDefault();
2023-10-07 22:07:57 -04:00
document.getElementById("Copy-last").click();
2023-09-13 22:21:39 -04:00
}
// Replace last on Ctrl + Shift + L
2023-10-07 22:07:57 -04:00
else if (event.ctrlKey && event.shiftKey && event.key === "L") {
2023-09-13 22:21:39 -04:00
event.preventDefault();
2023-10-07 22:07:57 -04:00
document.getElementById("Replace-last").click();
2023-09-13 22:21:39 -04:00
}
// Impersonate on Ctrl + Shift + M
2023-10-07 22:07:57 -04:00
else if (event.ctrlKey && event.shiftKey && event.key === "M") {
2023-09-13 22:21:39 -04:00
event.preventDefault();
2023-10-07 22:07:57 -04:00
document.getElementById("Impersonate").click();
2023-09-13 22:21:39 -04:00
}
2023-08-03 11:13:17 -04:00
});
2023-08-17 00:03:40 -04:00
//------------------------------------------------
// Position the chat typing dots
//------------------------------------------------
2023-10-07 22:07:57 -04:00
typing = document.getElementById("typing-container");
typingParent = typing.parentNode;
typingSibling = typing.previousElementSibling;
typingSibling.insertBefore(typing, typingSibling.childNodes[2]);
//------------------------------------------------
2023-08-17 00:03:40 -04:00
// Chat scrolling
//------------------------------------------------
2023-10-07 22:07:57 -04:00
const targetElement = document.getElementById("chat").parentNode.parentNode.parentNode;
targetElement.classList.add("pretty_scrollbar");
targetElement.classList.add("chat-parent");
let isScrolled = false;
2023-10-07 22:07:57 -04:00
targetElement.addEventListener("scroll", function() {
let diff = targetElement.scrollHeight - targetElement.clientHeight;
2023-09-19 16:12:34 -04:00
if(Math.abs(targetElement.scrollTop - diff) <= 10 || diff == 0) {
isScrolled = false;
} else {
isScrolled = true;
}
doSyntaxHighlighting();
});
2023-08-17 00:03:40 -04:00
// Create a MutationObserver instance
const observer = new MutationObserver(function(mutations) {
updateCssProperties();
const firstChild = targetElement.children[0];
if (firstChild.classList.contains("generating")) {
typing.parentNode.classList.add("visible-dots");
document.getElementById("stop").style.display = "flex";
document.getElementById("Generate").style.display = "none";
} else {
typing.parentNode.classList.remove("visible-dots");
document.getElementById("stop").style.display = "none";
document.getElementById("Generate").style.display = "flex";
}
doSyntaxHighlighting();
if(!isScrolled) {
targetElement.scrollTop = targetElement.scrollHeight;
}
2023-08-17 00:03:40 -04: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);
//------------------------------------------------
// Handle syntax highlighting / LaTeX
//------------------------------------------------
function isElementVisibleOnScreen(element) {
const rect = element.getBoundingClientRect();
return (
rect.left < window.innerWidth &&
rect.right > 0 &&
rect.top < window.innerHeight &&
rect.bottom > 0
);
}
function getVisibleMessagesIndexes() {
const elements = document.querySelectorAll(".message-body");
const visibleIndexes = [];
elements.forEach((element, index) => {
if (isElementVisibleOnScreen(element) && !element.hasAttribute("data-highlighted")) {
visibleIndexes.push(index);
}
});
return visibleIndexes;
}
function doSyntaxHighlighting() {
const indexes = getVisibleMessagesIndexes();
const elements = document.querySelectorAll(".message-body");
if (indexes.length > 0) {
observer.disconnect();
indexes.forEach((index) => {
const element = elements[index];
// Tag this element to prevent it from being highlighted twice
element.setAttribute("data-highlighted", "true");
// Perform syntax highlighting
const codeBlocks = element.querySelectorAll("pre code");
codeBlocks.forEach((codeBlock) => {
hljs.highlightElement(codeBlock);
});
renderMathInElement(element, {
delimiters: [
{ left: "$$", right: "$$", display: true },
{ left: "\\(", right: "\\)", display: false },
{ left: "\\[", right: "\\]", display: true },
],
});
});
observer.observe(targetElement, config);
}
}
//------------------------------------------------
// Add some scrollbars
//------------------------------------------------
2023-10-07 22:07:57 -04:00
const textareaElements = document.querySelectorAll(".add_scrollbar textarea");
for(i = 0; i < textareaElements.length; i++) {
2023-10-07 22:07:57 -04:00
textareaElements[i].classList.remove("scroll-hide");
textareaElements[i].classList.add("pretty_scrollbar");
textareaElements[i].style.resize = "none";
}
//------------------------------------------------
// Remove some backgrounds
//------------------------------------------------
2023-10-07 22:07:57 -04:00
const noBackgroundelements = document.querySelectorAll(".no-background");
for(i = 0; i < noBackgroundelements.length; i++) {
2023-10-07 22:07:57 -04:00
noBackgroundelements[i].parentNode.style.border = "none";
noBackgroundelements[i].parentNode.parentNode.parentNode.style.alignItems = "center";
}
2023-09-13 01:36:12 -04:00
2023-12-27 12:59:23 -05:00
const slimDropdownElements = document.querySelectorAll(".slim-dropdown");
2023-10-10 21:20:49 -04:00
for (i = 0; i < slimDropdownElements.length; i++) {
2023-12-27 12:59:23 -05:00
const parentNode = slimDropdownElements[i].parentNode;
parentNode.style.background = "transparent";
parentNode.style.border = "0";
2023-10-10 21:20:49 -04:00
}
2023-09-13 01:36:12 -04:00
//------------------------------------------------
// Create the hover menu in the chat tab
// The show/hide events were adapted from:
// https://github.com/SillyTavern/SillyTavern/blob/6c8bd06308c69d51e2eb174541792a870a83d2d6/public/script.js
2023-09-13 01:36:12 -04:00
//------------------------------------------------
var buttonsInChat = document.querySelectorAll("#chat-tab:not(.old-ui) #chat-buttons button");
2023-10-07 22:07:57 -04:00
var button = document.getElementById("hover-element-button");
var menu = document.getElementById("hover-menu");
var istouchscreen = (navigator.maxTouchPoints > 0) || "ontouchstart" in document.documentElement;
function showMenu() {
2023-10-07 22:07:57 -04:00
menu.style.display = "flex"; // Show the menu
}
function hideMenu() {
2023-10-07 22:07:57 -04:00
menu.style.display = "none"; // Hide the menu
if (!istouchscreen) {
document.querySelector("#chat-input textarea").focus(); // Focus on the chat input
}
}
2023-09-13 01:36:12 -04:00
if (buttonsInChat.length > 0) {
2023-10-07 22:07:57 -04:00
for (let i = buttonsInChat.length - 1; i >= 0; i--) {
const thisButton = buttonsInChat[i];
menu.appendChild(thisButton);
thisButton.addEventListener("click", () => {
hideMenu();
});
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, `&nbsp;<span class="transparent-substring">${substring.slice(1, -1)}</span>`);
thisButton.innerHTML = newText;
}
2023-10-07 22:07:57 -04:00
}
} else {
2023-10-07 22:07:57 -04:00
buttonsInChat = document.querySelectorAll("#chat-tab.old-ui #chat-buttons button");
for (let i = 0; i < buttonsInChat.length; i++) {
buttonsInChat[i].textContent = buttonsInChat[i].textContent.replace(/ \(.*?\)/, "");
}
document.getElementById("gr-hover-container").style.display = "none";
2023-09-13 01:36:12 -04:00
}
function isMouseOverButtonOrMenu() {
2023-10-07 22:07:57 -04:00
return menu.matches(":hover") || button.matches(":hover");
}
2023-10-07 22:07:57 -04:00
button.addEventListener("mouseenter", function () {
if (!istouchscreen) {
showMenu();
}
});
2023-10-07 22:07:57 -04:00
button.addEventListener("click", function () {
if (menu.style.display === "flex") {
hideMenu();
}
else {
2024-01-09 19:27:50 -05:00
showMenu();
}
});
// Add event listener for mouseleave on the button
2023-10-07 22:07:57 -04:00
button.addEventListener("mouseleave", function () {
// Delay to prevent menu hiding when the mouse leaves the button into the menu
setTimeout(function () {
if (!isMouseOverButtonOrMenu()) {
hideMenu();
}
}, 100);
});
// Add event listener for mouseleave on the menu
2023-10-07 22:07:57 -04:00
menu.addEventListener("mouseleave", function () {
// Delay to prevent menu hide when the mouse leaves the menu into the button
setTimeout(function () {
if (!isMouseOverButtonOrMenu()) {
hideMenu();
}
}, 100);
});
// Add event listener for click anywhere in the document
2023-10-07 22:07:57 -04:00
document.addEventListener("click", function (event) {
// Check if the click is outside the button/menu and the menu is visible
if (!isMouseOverButtonOrMenu() && menu.style.display === "flex") {
hideMenu();
}
if (event.target.classList.contains("pfp_character")) {
toggleBigPicture();
}
});
2023-09-13 13:02:25 -04:00
//------------------------------------------------
// Relocate the "Show controls" checkbox
//------------------------------------------------
2023-10-07 22:07:57 -04:00
var elementToMove = document.getElementById("show-controls");
2023-09-13 13:02:25 -04:00
var parent = elementToMove.parentNode;
for (var i = 0; i < 2; i++) {
parent = parent.parentNode;
}
parent.insertBefore(elementToMove, parent.firstChild);
//------------------------------------------------
// Make the chat input grow upwards instead of downwards
//------------------------------------------------
2023-10-07 22:07:57 -04:00
document.getElementById("show-controls").parentNode.style.position = "absolute";
document.getElementById("show-controls").parentNode.style.bottom = "0px";
2023-09-13 01:36:12 -04:00
//------------------------------------------------
// Focus on the chat input
//------------------------------------------------
const chatTextArea = document.getElementById("chat-input").querySelector("textarea");
function respondToChatInputVisibility(element, callback) {
var options = {
root: document.documentElement,
};
var observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
callback(entry.intersectionRatio > 0);
});
}, options);
observer.observe(element);
}
function handleChatInputVisibilityChange(isVisible) {
if (isVisible) {
chatTextArea.focus();
}
}
respondToChatInputVisibility(chatTextArea, handleChatInputVisibilityChange);
//------------------------------------------------
// Show enlarged character picture when the profile
// picture is clicked on
//------------------------------------------------
let bigPictureVisible = false;
function addBigPicture() {
var imgElement = document.createElement("img");
var timestamp = new Date().getTime();
imgElement.src = "/file/cache/pfp_character.png?time=" + timestamp;
imgElement.classList.add("bigProfilePicture");
2024-02-25 12:10:16 -05:00
imgElement.addEventListener("load", function () {
this.style.visibility = "visible";
});
imgElement.addEventListener("error", function () {
this.style.visibility = "hidden";
});
var imgElementParent = document.getElementById("chat").parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
imgElementParent.appendChild(imgElement);
}
function deleteBigPicture() {
2023-12-27 12:59:23 -05:00
var bigProfilePictures = document.querySelectorAll(".bigProfilePicture");
bigProfilePictures.forEach(function (element) {
element.parentNode.removeChild(element);
});
}
function toggleBigPicture() {
if(bigPictureVisible) {
deleteBigPicture();
bigPictureVisible = false;
} else {
addBigPicture();
bigPictureVisible = true;
}
}
2023-12-16 20:16:26 -05:00
//------------------------------------------------
// Handle the chat input box growth
2023-12-16 20:16:26 -05:00
//------------------------------------------------
let currentChatInputHeight = 0;
// Update chat layout based on chat and input dimensions
function updateCssProperties() {
2023-12-27 12:59:23 -05:00
const chatContainer = document.getElementById("chat").parentNode.parentNode.parentNode;
const chatInputHeight = document.querySelector("#chat-input textarea").clientHeight;
// Check if the chat container is visible
if (chatContainer.clientHeight > 0) {
var numericHeight = chatContainer.parentNode.clientHeight - chatInputHeight + 40 - 100;
if (document.getElementById("chat-tab").style.paddingBottom != "") {
numericHeight += 20;
}
const newChatHeight = `${numericHeight}px`;
document.documentElement.style.setProperty("--chat-height", newChatHeight);
document.documentElement.style.setProperty("--input-delta", `${chatInputHeight - 40}px`);
// Get and set header height
const header = document.querySelector(".header_bar");
const headerHeight = `${header.clientHeight}px`;
document.documentElement.style.setProperty("--header-height", headerHeight);
// Adjust scrollTop based on input height change
if (chatInputHeight !== currentChatInputHeight) {
chatContainer.scrollTop += chatInputHeight - currentChatInputHeight;
currentChatInputHeight = chatInputHeight;
}
}
2023-12-16 20:16:26 -05:00
}
// Observe textarea size changes and call update function
new ResizeObserver(updateCssProperties).observe(document.querySelector("#chat-input textarea"));
// Handle changes in window size
2023-12-27 12:59:23 -05:00
window.addEventListener("resize", updateCssProperties);
//------------------------------------------------
// Keep track of the display width to position the past
// chats dropdown on desktop
//------------------------------------------------
function updateDocumentWidth() {
var updatedWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
document.documentElement.style.setProperty("--document-width", updatedWidth + "px");
}
updateDocumentWidth();
window.addEventListener("resize", updateDocumentWidth);
//------------------------------------------------
// Focus on the rename text area when it becomes visible
//------------------------------------------------
const renameTextArea = document.getElementById("rename-row").querySelector("textarea");
function respondToRenameVisibility(element, callback) {
var options = {
root: document.documentElement,
};
var observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
callback(entry.intersectionRatio > 0);
});
}, options);
observer.observe(element);
}
function handleVisibilityChange(isVisible) {
if (isVisible) {
renameTextArea.focus();
}
}
respondToRenameVisibility(renameTextArea, handleVisibilityChange);
//------------------------------------------------
// Adjust the chat tab margin if no extension UI
// is present at the bottom
//------------------------------------------------
if (document.getElementById("extensions") === null) {
document.getElementById("chat-tab").style.marginBottom = "-29px";
}
//------------------------------------------------
// Focus on the chat input after starting a new chat
//------------------------------------------------
document.querySelectorAll(".focus-on-chat-input").forEach(element => {
element.addEventListener("click", function() {
document.querySelector("#chat-input textarea").focus();
});
});
2024-06-24 23:07:22 -04:00
//------------------------------------------------
// 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;
// Save the initial location for the character dropdown
if (!originalParent) {
originalParent = grandParent.parentElement;
originalIndex = Array.from(originalParent.children).indexOf(grandParent);
movedElement = grandParent;
}
// Do not show the Character dropdown in the Chat tab when "instruct" mode is selected
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]);
document.getElementById("save-character").style.display = "none";
}
function restoreOriginalPosition() {
if (originalParent && movedElement) {
if (originalIndex >= originalParent.children.length) {
originalParent.appendChild(movedElement);
} else {
originalParent.insertBefore(movedElement, originalParent.children[originalIndex]);
}
document.getElementById("save-character").style.display = "";
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();