js/main.js - main - githubmirror/text-generation-webui

js/main.js
1 025 строк35 KB
oobabooga
Fix stray scrollbars and leftover spacing in instruct mode chat
01 июн 2026, 05:48
01 июн 2026, 05:48fbaa8a3
// ------------------------------------------------
// Main
// ------------------------------------------------

// Sync highlight.js theme with the actual Gradio theme
var defined_hljs_css = document.body.classList.contains("dark") ? "file/css/highlightjs/github-dark.min.css" : "file/css/highlightjs/github.min.css";
var hljsCssElement = document.getElementById("highlight-css");
if (hljsCssElement.getAttribute("href") !== defined_hljs_css) {
  hljsCssElement.setAttribute("href", defined_hljs_css);
}

let main_parent = document.getElementById("chat-tab").parentNode;
let extensions = document.getElementById("extensions");

main_parent.childNodes[0].classList.add("header_bar");
main_parent.style = "padding: 0; margin: 0";
main_parent.parentNode.style = "gap: 0";
main_parent.parentNode.parentNode.style = "padding: 0";

document.querySelector(".header_bar").addEventListener("click", function(event) {
  if (event.target.tagName !== "BUTTON") return;

  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");

  if (extensionsVisible) {
    if (extensions) {
      extensions.style.display = "flex";
    }

    this.style.marginBottom = chatVisible ? "0px" : "19px";

    if (chatVisible && !showControlsChecked) {
      document.querySelectorAll("#extensions").forEach(element => {
        element.style.display = "none";
      });
    }

  } else {
    this.style.marginBottom = "19px";
    if (extensions) extensions.style.display = "none";
  }
});

//------------------------------------------------
// Keyboard shortcuts
//------------------------------------------------

// --- Helper functions --- //
function isModifiedKeyboardEvent(event) {
  return event instanceof KeyboardEvent &&
    (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey);
}

function isFocusedOnEditableTextbox(event) {
  if (event.target.tagName === "INPUT" || event.target.tagName === "TEXTAREA") {
    return !!event.target.value;
  }
  return false;
}

document.addEventListener("keydown", function(event) {
  // Stop generation on Esc pressed
  if (event.key === "Escape") {
    // Find the element with id 'stop' and click it
    var stopButton = document.getElementById("stop");
    if (stopButton) {
      stopButton.click();
    }
    return;
  }

  if (!document.querySelector("#chat-tab").checkVisibility() ) {
    return;
  }

  // Show chat controls on Ctrl + S
  if (event.ctrlKey && event.key == "s") {
    event.preventDefault();

    var showControlsElement = document.getElementById("show-controls");
    if (showControlsElement && showControlsElement.childNodes.length >= 4) {
      showControlsElement.childNodes[3].click();

      var arr = document.getElementById("chat-input").childNodes[2].childNodes;
      arr[arr.length - 1].focus();
    }
  }

  // Regenerate on Ctrl + Enter
  else if (event.ctrlKey && event.key === "Enter") {
    event.preventDefault();
    document.getElementById("Regenerate").click();
  }

  // Continue on Alt + Enter
  else if (event.altKey && event.key === "Enter") {
    event.preventDefault();
    document.getElementById("Continue").click();
  }

  // Remove last on Ctrl + Shift + Backspace
  else if (event.ctrlKey && event.shiftKey && event.key === "Backspace") {
    event.preventDefault();
    document.getElementById("Remove-last").click();
  }

  // Impersonate on Ctrl + Shift + M
  else if (event.ctrlKey && event.shiftKey && event.key === "M") {
    event.preventDefault();
    document.getElementById("Impersonate").click();
  }

  // --- Simple version navigation --- //
  if (!isFocusedOnEditableTextbox(event)) {
    // Version navigation on Arrow keys (horizontal)
    if (!isModifiedKeyboardEvent(event) && event.key === "ArrowLeft") {
      event.preventDefault();
      navigateLastAssistantMessage("left");
    }

    else if (!isModifiedKeyboardEvent(event) && event.key === "ArrowRight") {
      event.preventDefault();
      if (!navigateLastAssistantMessage("right")) {
        // If can't navigate right (last version), regenerate
        document.getElementById("Regenerate").click();
      }
    }
  }

});

//------------------------------------------------
// Chat scrolling
//------------------------------------------------
const targetElement = document.getElementById("chat").parentNode.parentNode.parentNode;
targetElement.classList.add("pretty_scrollbar");
targetElement.classList.add("chat-parent");
window.isScrolled = false;
window.pendingGenerationStart = false;
window.smoothScrollUntilTs = 0;
let scrollTimeout;
let lastScrollTop = 0;
let lastScrollHeight = 0;
let lastClientHeight = 0;

targetElement.addEventListener("scroll", function() {
  let diff = targetElement.scrollHeight - targetElement.clientHeight;
  let isAtBottomNow = Math.abs(targetElement.scrollTop - diff) <= 10 || diff <= 0;

  if (window.isScrolled || !isAtBottomNow) {
    targetElement.classList.add("scrolling"); // Disables hover effects during scroll
  }

  if(isAtBottomNow) {
    window.isScrolled = false;
  } else if (targetElement.scrollTop < lastScrollTop && targetElement.scrollHeight >= lastScrollHeight && targetElement.clientHeight <= lastClientHeight) {
    window.isScrolled = true;
  }
  lastScrollTop = targetElement.scrollTop;
  lastScrollHeight = targetElement.scrollHeight;
  lastClientHeight = targetElement.clientHeight;

  // Clear previous timeout and set new one
  clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(() => {
    targetElement.classList.remove("scrolling");
    doSyntaxHighlighting(); // Only run after scrolling stops
  }, 150);
});

// Create a MutationObserver instance
const observer = new MutationObserver(function() {
  if (targetElement.classList.contains("_generating")) {
    document.getElementById("stop").style.display = "flex";
    document.getElementById("Generate").style.display = "none";
    window.pendingGenerationStart = true;
    // If the user is near the bottom, ensure auto-scroll is enabled
    // for the new reply. This catches cases where isScrolled was
    // incorrectly set to true by layout shifts during page load, etc.
    const diff = targetElement.scrollHeight - targetElement.clientHeight;
    if (Math.abs(targetElement.scrollTop - diff) <= 10 || diff <= 0) {
      window.isScrolled = false;
    }
  } else {
    document.getElementById("stop").style.display = "none";
    document.getElementById("Generate").style.display = "flex";
  }
});

// Only watch for attribute changes on targetElement (e.g. _generating class)
// Start observing the target element
observer.observe(targetElement, { attributes: true });

//------------------------------------------------
// 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
  );
}

window.doSyntaxHighlighting = function() {
  const messageBodies = document.getElementById("chat").querySelectorAll(".message-body");

  if (messageBodies.length > 0) {
    let hasSeenVisible = false;

    // Go from last message to first so we can early-exit once past visible area
    for (let i = messageBodies.length - 1; i >= 0; i--) {
      const messageBody = messageBodies[i];

      if (isElementVisibleOnScreen(messageBody)) {
        hasSeenVisible = true;

        // Handle both code and math in a single pass through each message
        const codeBlocks = messageBody.querySelectorAll("pre code:not([data-highlighted])");
        codeBlocks.forEach((codeBlock) => {
          hljs.highlightElement(codeBlock);
          codeBlock.setAttribute("data-highlighted", "true");
          codeBlock.classList.add("pretty_scrollbar");
        });

        const mathContainers = messageBody.querySelectorAll("p, span, li, td, th, h1, h2, h3, h4, h5, h6, blockquote, figcaption, caption, dd, dt");
        // Only render math in individually visible containers (the outer check is on the message body)
        mathContainers.forEach(container => {
          if (isElementVisibleOnScreen(container)) {
            renderMathInElement(container, {
              delimiters: [
                { left: "$$", right: "$$", display: true },
                { left: "$", right: "$", display: false },
                { left: "\\(", right: "\\)", display: false },
                { left: "\\[", right: "\\]", display: true },
              ],
              // Render invalid LaTeX as an inline error instead of throwing,
              // which would abort the update before paddings/scroll are fixed.
              throwOnError: false,
            });
          }
        });
      } else if (hasSeenVisible) {
      // We've seen visible messages but this one is not visible
      // Since we're going from last to first, we can break
        break;
      }
    }
  }
}
const doSyntaxHighlighting = window.doSyntaxHighlighting;

//------------------------------------------------
// Add some scrollbars
//------------------------------------------------
const scrollbarElements = document.querySelectorAll(".add_scrollbar textarea, .add_scrollbar .drag-drop-list");
for(let i = 0; i < scrollbarElements.length; i++) {
  scrollbarElements[i].classList.remove("scroll-hide");
  scrollbarElements[i].classList.add("pretty_scrollbar");
  scrollbarElements[i].style.resize = "none";
}


//------------------------------------------------
// Tools: inject "Refresh list" link into the label
//------------------------------------------------
const toolsTitle = document.querySelector("#tools-group > [data-testid='block-info']");
const toolsInfo = toolsTitle ? toolsTitle.nextElementSibling : null;
if (toolsInfo) {
  const refreshLink = document.createElement("span");
  refreshLink.textContent = " [Refresh list]";
  refreshLink.className = "tools-refresh-link";
  refreshLink.addEventListener("click", function(e) {
    e.preventDefault();
    document.querySelector("#tools-refresh-btn").click();
  });
  toolsInfo.appendChild(refreshLink);
}

//------------------------------------------------
// Remove some backgrounds
//------------------------------------------------
const noBackgroundelements = document.querySelectorAll(".no-background");
for(let i = 0; i < noBackgroundelements.length; i++) {
  noBackgroundelements[i].parentNode.style.border = "none";
  noBackgroundelements[i].parentNode.parentNode.parentNode.style.alignItems = "center";
}

const slimDropdownElements = document.querySelectorAll(".slim-dropdown");
for (let i = 0; i < slimDropdownElements.length; i++) {
  const parentNode = slimDropdownElements[i].parentNode;
  parentNode.style.background = "transparent";
  parentNode.style.border = "0";
}

//------------------------------------------------
// 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
//------------------------------------------------
var buttonsInChat = document.querySelectorAll("#chat-tab #chat-buttons button, #chat-tab #chat-buttons #show-controls");
var hoverContainer = document.getElementById("gr-hover-container");
var button = document.getElementById("hover-element-button");
var menu = document.getElementById("hover-menu");
var istouchscreen = (navigator.maxTouchPoints > 0) || "ontouchstart" in document.documentElement;

function showMenu() {
  menu.style.display = "flex";
}

function hideMenu() {
  menu.style.display = "none";
  if (!istouchscreen) {
    document.querySelector("#chat-input textarea").focus();
  }
}

if (buttonsInChat.length > 0) {
  for (let i = buttonsInChat.length - 1; i >= 0; i--) {
    const thisButton = buttonsInChat[i];
    menu.appendChild(thisButton);

    if (thisButton.tagName.toLowerCase() === "button") {
      thisButton.addEventListener("click", () => {
        hideMenu();
      });

      const buttonText = thisButton.textContent;
      const matches = buttonText.match(/(\(.*?\))/);

      if (matches && matches.length > 1) {
        const substring = matches[1];
        const newText = buttonText.replace(substring, `&nbsp;<span class="transparent-substring">${substring.slice(1, -1)}</span>`);
        thisButton.innerHTML = newText;
      }
    }
  }
}

var menuInteracting = false;

hoverContainer.addEventListener("mouseenter", function () {
  if (!istouchscreen) {
    showMenu();
  }
});

hoverContainer.addEventListener("mousedown", function () {
  menuInteracting = true;
  setTimeout(function () { menuInteracting = false; }, 300);
});

button.addEventListener("click", function () {
  if (menu.style.display === "flex") {
    hideMenu();
  }
  else {
    showMenu();
  }
});

hoverContainer.addEventListener("mouseleave", function () {
  if (!istouchscreen) {
    setTimeout(function () {
      if (!hoverContainer.matches(":hover") && !menu.matches(":hover")) {
        hideMenu();
      }
    }, 50);
  }
});

// Add event listener for click anywhere in the document
document.addEventListener("click", function (event) {
  // Check if the click is outside the button/menu and the menu is visible
  if (!menuInteracting && !event.target.closest("#gr-hover-container") && menu.style.display === "flex") {
    hideMenu();
  }

  const target = event.target;

  if (target.classList.contains("pfp_character")) {
    toggleBigPicture();
  }

  // Handle sidebar clicks on mobile
  if (isMobile()) {
    // Check if the click did NOT originate from any of the specified toggle buttons or elements
    if (
      target.closest("#navigation-toggle") !== navigationToggle &&
      target.closest("#past-chats-toggle") !== pastChatsToggle &&
      target.closest("#chat-controls-toggle") !== chatControlsToggle &&
      target.closest(".header_bar") !== headerBar &&
      target.closest("#past-chats-row") !== pastChatsRow &&
      target.closest("#chat-controls") !== chatControlsRow
    ) {
      handleIndividualSidebarClose(event);
    }
  }
});

//------------------------------------------------
// Position the chat input
//------------------------------------------------
document.getElementById("chat-input-row").classList.add("chat-input-positioned");

//------------------------------------------------
// Focus on the chat input
//------------------------------------------------
const chatTextArea = document.getElementById("chat-input").querySelector("textarea");

function focusOnVisible(element) {
  var observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.intersectionRatio > 0) {
        element.focus();
      }
    });
  }, { root: document.documentElement });

  observer.observe(element);
}

focusOnVisible(chatTextArea);

//------------------------------------------------
// Show enlarged character picture when the profile
// picture is clicked on
//------------------------------------------------
let bigPictureVisible = false;

function addBigPicture() {
  var imgElement = document.createElement("img");
  imgElement.src = getProfilePictureUrl();
  imgElement.classList.add("bigProfilePicture");
  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() {
  document.querySelectorAll(".bigProfilePicture").forEach(function (element) {
    element.remove();
  });
}

function toggleBigPicture() {
  if(bigPictureVisible) {
    deleteBigPicture();
    bigPictureVisible = false;
  } else {
    addBigPicture();
    bigPictureVisible = true;
  }
}

//------------------------------------------------
// Focus on the rename text area when it becomes visible
//------------------------------------------------
const renameTextArea = document.getElementById("rename-row").querySelector("textarea");
focusOnVisible(renameTextArea);

//------------------------------------------------
// 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();
  });
});

//------------------------------------------------
// "New chat" hover menu with incognito option
//------------------------------------------------

(function() {
  const newChatBtn = document.getElementById("new-chat-btn");

  const wrapper = document.createElement("div");
  wrapper.id = "new-chat-wrapper";
  newChatBtn.replaceWith(wrapper);
  wrapper.appendChild(newChatBtn);

  const arrow = document.createElement("span");
  arrow.className = "new-chat-arrow";
  arrow.textContent = "\u25BE";

  const menu = document.createElement("div");
  menu.className = "new-chat-menu";
  const option = document.createElement("div");
  option.className = "new-chat-menu-item";
  option.textContent = "Incognito chat";
  menu.appendChild(option);

  arrow.appendChild(menu);
  wrapper.appendChild(arrow);

  option.addEventListener("click", function(e) {
    e.stopPropagation();
    document.querySelector("#incognito-chat-btn").click();
  });
})();

//------------------------------------------------
// 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() {
  // On first call, wait until mode is initialized so the visibility check below sees the real state
  if (!originalParent && !document.querySelector("#chat-mode input:checked")) {
    requestAnimationFrame(moveToChatTab);
    return;
  }

  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";
  }

  grandParent.children[0].style.flex = "1";
  grandParent.children[0].style.minWidth = "0";

  const chatControlsFirstChild = document.querySelector("#chat-controls").firstElementChild;
  const newParent = chatControlsFirstChild;
  let newPosition = 1;

  newParent.insertBefore(grandParent, newParent.children[newPosition]);
  document.getElementById("save-character").style.display = "none";
  document.getElementById("restore-character").style.display = "none";

  const characterInfo = document.querySelector("#character-menu [data-testid='block-info']")?.nextElementSibling;
  if (characterInfo) characterInfo.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 = "";
    document.getElementById("restore-character").style.display = "";
    movedElement.style.display = "";
    movedElement.children[0].style.flex = "";
    movedElement.children[0].style.minWidth = "";

    const characterInfo = document.querySelector("#character-menu [data-testid='block-info']")?.nextElementSibling;
    if (characterInfo) characterInfo.style.display = "";
  }
}

headerBar.addEventListener("click", (e) => {
  if (e.target.tagName === "BUTTON") {
    const tabName = e.target.textContent.trim();
    if (tabName === "Chat") {
      moveToChatTab();
    } else {
      restoreOriginalPosition();
    }
  }
});

//------------------------------------------------
// Add a confirmation dialog when leaving the page
// Useful to avoid data loss
//------------------------------------------------
window.addEventListener("beforeunload", function (event) {
  // Cancel the event
  event.preventDefault();
  // Chrome requires returnValue to be set
  event.returnValue = "";
});

moveToChatTab();

//------------------------------------------------
// Buttons to toggle the sidebars
//------------------------------------------------

const leftArrowSVG = `
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-arrow-bar-left">
  <path d="M4 12l10 0"></path>
  <path d="M4 12l4 4"></path>
  <path d="M4 12l4 -4"></path>
  <path d="M20 4l0 16"></path>
</svg>`;

const rightArrowSVG = `
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-arrow-bar-right">
  <path d="M20 12l-10 0"></path>
  <path d="M20 12l-4 4"></path>
  <path d="M20 12l-4 -4"></path>
  <path d="M4 4l0 16"></path>
</svg>`;

const hamburgerMenuSVG = `
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-hamburger-menu">
  <line x1="3" y1="12" x2="21" y2="12"></line>
  <line x1="3" y1="6" x2="21" y2="6"></line>
  <line x1="3" y1="18" x2="21" y2="18"></line>
</svg>`;

const closeMenuSVG = `
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-close-menu">
  <line x1="18" y1="6" x2="6" y2="18"></line>
  <line x1="6" y1="6" x2="18" y2="18"></line>
</svg>`;

const chatTab = document.getElementById("chat-tab");
const pastChatsRow = document.getElementById("past-chats-row");
const chatControlsRow = document.getElementById("chat-controls");

if (chatTab) {
  // Create past-chats-toggle div
  const pastChatsToggle = document.createElement("div");
  pastChatsToggle.id = "past-chats-toggle";
  pastChatsToggle.innerHTML = leftArrowSVG; // Set initial icon to left arrow
  pastChatsToggle.classList.add("past-chats-open"); // Set initial position

  // Create chat-controls-toggle div
  const chatControlsToggle = document.createElement("div");
  chatControlsToggle.id = "chat-controls-toggle";
  chatControlsToggle.innerHTML = rightArrowSVG; // Set initial icon to right arrow
  chatControlsToggle.classList.add("chat-controls-open"); // Set initial position

  // Append both elements to the chat-tab
  chatTab.appendChild(pastChatsToggle);
  chatTab.appendChild(chatControlsToggle);
}

// Create navigation toggle div
const navigationToggle = document.createElement("div");
navigationToggle.id = "navigation-toggle";
navigationToggle.innerHTML = leftArrowSVG; // Set initial icon to right arrow
navigationToggle.classList.add("navigation-left"); // Set initial position
headerBar.appendChild(navigationToggle);

// Retrieve the dynamically created toggle buttons
const pastChatsToggle = document.getElementById("past-chats-toggle");
const chatControlsToggle = document.getElementById("chat-controls-toggle");

const SIDEBARS = [
  { element: headerBar, toggle: navigationToggle, key: "sidebar-header-hidden" },
  { element: pastChatsRow, toggle: pastChatsToggle, key: "sidebar-past-chats-hidden" },
  { element: chatControlsRow, toggle: chatControlsToggle, key: "sidebar-chat-controls-hidden" },
];
window.SIDEBARS = SIDEBARS;

function handleIndividualSidebarClose(event) {
  const target = event.target;
  SIDEBARS.forEach(({ element, toggle, key }) => {
    if (!element.contains(target) && !element.classList.contains("sidebar-hidden")) {
      toggleSidebar(element, toggle);
      localStorage.setItem(key, "true");
    }
  });
}

function setSidebarState(sidebar, toggle, hidden) {
  sidebar.classList.toggle("sidebar-hidden", hidden);
  sidebar.classList.toggle("sidebar-shown", !hidden);

  if (sidebar === headerBar) {
    document.documentElement.style.setProperty("--header-width", hidden ? "0px" : "112px");
    pastChatsRow.classList.toggle("negative-header", hidden);
    pastChatsToggle.classList.toggle("negative-header", hidden);
    toggle.innerHTML = hidden ? hamburgerMenuSVG : closeMenuSVG;
  } else if (sidebar === pastChatsRow) {
    toggle.classList.toggle("past-chats-closed", hidden);
    toggle.classList.toggle("past-chats-open", !hidden);
    toggle.innerHTML = hidden ? rightArrowSVG : leftArrowSVG;
  } else if (sidebar === chatControlsRow) {
    toggle.classList.toggle("chat-controls-closed", hidden);
    toggle.classList.toggle("chat-controls-open", !hidden);
    toggle.innerHTML = hidden ? leftArrowSVG : rightArrowSVG;
  }
}

function toggleSidebar(sidebar, toggle) {
  setSidebarState(sidebar, toggle, !sidebar.classList.contains("sidebar-hidden"));
}

window.toggleSidebar = toggleSidebar;

function isMobile() {
  return window.innerWidth <= 924;
}

function initializeSidebars() {
  const width = window.innerWidth;
  const defaults = {
    "sidebar-header-hidden": width <= 924,
    "sidebar-past-chats-hidden": width < 1200,
    "sidebar-chat-controls-hidden": width < 1470,
  };

  SIDEBARS.forEach(({ element, toggle, key }) => {
    const stored = localStorage.getItem(key);
    const hidden = stored !== null ? stored === "true" : defaults[key];
    setSidebarState(element, toggle, hidden);
  });
}

initializeSidebars();

SIDEBARS.forEach(({ element, toggle, key }) => {
  toggle.addEventListener("click", () => {
    toggleSidebar(element, toggle);
    localStorage.setItem(key, element.classList.contains("sidebar-hidden"));
  });
});

//------------------------------------------------
// Fixes #chat-input textarea height issue
// for devices with width <= 924px
//------------------------------------------------

if (isMobile()) {
  // Target the textarea
  const textarea = document.querySelector("#chat-input textarea");

  if (textarea) {
    // Force textarea height recalculation by simulating content change
    textarea.value += "\n";
    textarea.dispatchEvent(new Event("input", { bubbles: true }));
    textarea.value = textarea.value.slice(0, -1);
    textarea.dispatchEvent(new Event("input", { bubbles: true }));
  }
}

//------------------------------------------------
// Create a top navigation bar on mobile
//------------------------------------------------

function createMobileTopBar() {
  const chatTab = document.getElementById("chat-tab");

  // Only create the top bar if it doesn't already exist
  if (chatTab && !chatTab.querySelector(".mobile-top-bar")) {
    const topBar = document.createElement("div");
    topBar.classList.add("mobile-top-bar");

    // Insert the top bar as the first child of chat-tab
    chatTab.appendChild(topBar);
  }
}

createMobileTopBar();

//------------------------------------------------
// Simple Navigation Functions
//------------------------------------------------

function navigateLastAssistantMessage(direction) {
  const chat = document.querySelector("#chat");
  if (!chat) return false;

  const messages = chat.querySelectorAll("[data-index]");
  if (messages.length === 0) return false;

  // Find the last assistant message (starting from the end)
  let lastAssistantMessage = null;
  for (let i = messages.length - 1; i >= 0; i--) {
    const msg = messages[i];
    if (
      msg.classList.contains("assistant-message") ||
      msg.querySelector(".circle-bot") ||
      msg.querySelector(".text-bot")
    ) {
      lastAssistantMessage = msg;
      break;
    }
  }

  if (!lastAssistantMessage) return false;

  const buttons = lastAssistantMessage.querySelectorAll(".version-nav-button");

  for (let i = 0; i < buttons.length; i++) {
    const button = buttons[i];
    const onclick = button.getAttribute("onclick");
    const disabled = button.hasAttribute("disabled");

    const isLeft = onclick && onclick.includes("'left'");
    const isRight = onclick && onclick.includes("'right'");

    if (!disabled) {
      if (direction === "left" && isLeft) {
        navigateVersion(button, direction);
        return true;
      }
      if (direction === "right" && isRight) {
        navigateVersion(button, direction);
        return true;
      }
    }
  }

  return false;
}

//------------------------------------------------
// Paste Handler for Long Text
//------------------------------------------------

const MAX_PLAIN_TEXT_LENGTH = 2500;

function setupPasteHandler() {
  const textbox = document.querySelector("#chat-input textarea[data-testid=\"textbox\"]");
  const fileInput = document.querySelector("#chat-input input[data-testid=\"file-upload\"]");

  if (!textbox || !fileInput) {
    setTimeout(setupPasteHandler, 500);
    return;
  }

  textbox.addEventListener("paste", async (event) => {
    const text = event.clipboardData?.getData("text");

    if (text && text.length > MAX_PLAIN_TEXT_LENGTH && document.querySelector("#paste_to_attachment input[data-testid=\"checkbox\"]")?.checked) {
      event.preventDefault();

      const file = new File([text], "pasted_text.txt", {
        type: "text/plain",
        lastModified: Date.now()
      });

      const dataTransfer = new DataTransfer();
      dataTransfer.items.add(file);
      fileInput.files = dataTransfer.files;
      fileInput.dispatchEvent(new Event("change", { bubbles: true }));
    }
  });
}

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", setupPasteHandler);
} else {
  setupPasteHandler();
}

//------------------------------------------------
// Spellcheck toggle (Electron only; checkbox is hidden in the browser)
//------------------------------------------------

function setupSpellcheckToggle() {
  if (!window.electronAPI) return;
  const checkbox = document.querySelector("#spellcheck input[data-testid=\"checkbox\"]");
  if (!checkbox) {
    setTimeout(setupSpellcheckToggle, 500);
    return;
  }

  const apply = () => { document.body.spellcheck = checkbox.checked; };
  apply();
  checkbox.addEventListener("change", apply);
}

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", setupSpellcheckToggle);
} else {
  setupSpellcheckToggle();
}

//------------------------------------------------
// Tooltips
//------------------------------------------------

// File upload button
document.querySelector("#chat-input .upload-button").title = "Upload text files, PDFs, DOCX documents, and images";

// Activate web search
document.getElementById("web-search").title = "Search the internet with DuckDuckGo";

//------------------------------------------------
// Inline icons for deleting past chats
//------------------------------------------------

function addMiniDeletes() {
  document.querySelectorAll("#past-chats label:not(.has-delete)").forEach(label => {
    const container = document.createElement("span");
    container.className = "delete-container";

    label.classList.add("chat-label-with-delete");

    const trashBtn = document.createElement("button");
    trashBtn.innerHTML = "🗑️";
    trashBtn.className = "trash-btn";

    const cancelBtn = document.createElement("button");
    cancelBtn.innerHTML = "✕";
    cancelBtn.className = "cancel-btn";

    const confirmBtn = document.createElement("button");
    confirmBtn.innerHTML = "✓";
    confirmBtn.className = "confirm-btn";

    label.addEventListener("mouseenter", () => {
      container.style.opacity = "1";
    });

    label.addEventListener("mouseleave", () => {
      container.style.opacity = "0";
    });

    trashBtn.onclick = (e) => {
      e.stopPropagation();
      label.querySelector("input").click();
      document.querySelector("#delete_chat").click();
      trashBtn.style.display = "none";
      cancelBtn.style.display = "flex";
      confirmBtn.style.display = "flex";
    };

    cancelBtn.onclick = (e) => {
      e.stopPropagation();
      document.querySelector("#delete_chat-cancel").click();
      resetButtons();
    };

    confirmBtn.onclick = (e) => {
      e.stopPropagation();
      label.querySelector("input").click();
      document.querySelector("#delete_chat-confirm").click();
      resetButtons();
    };

    function resetButtons() {
      trashBtn.style.display = "inline";
      cancelBtn.style.display = "none";
      confirmBtn.style.display = "none";
    }

    container.append(trashBtn, cancelBtn, confirmBtn);
    label.appendChild(container);
    label.classList.add("has-delete");
  });
}

new MutationObserver(() => addMiniDeletes()).observe(
  document.querySelector("#past-chats"),
  {childList: true, subtree: true}
);
addMiniDeletes();

//------------------------------------------------
// Fix autoscroll after fonts load
//------------------------------------------------
document.fonts.addEventListener("loadingdone", (event) => {
  setTimeout(() => {
    if (!window.isScrolled) {
      const maxScroll = targetElement.scrollHeight - targetElement.clientHeight;
      if (targetElement.scrollTop < maxScroll - 5) {
        targetElement.scrollTop = maxScroll;
      }
    }
  }, 50);
});

(function() {
  const chatParent = document.querySelector(".chat-parent");
  const chatInputRow = document.querySelector("#chat-input-row");
  if (!chatParent || !chatInputRow) return;

  // Keep chat-parent's box ending 15px above the (absolute)
  // composer so the message-actions row isn't glued to it.
  function syncMargin() {
    chatParent.style.marginBottom = (chatInputRow.offsetHeight + 15) + "px";
    // The instruct buffer is sized off chatParent.clientHeight, which the
    // margin change above just shrank/grew, so recompute it here too.
    window.updateInstructPadding?.();
    if (!window.isScrolled) {
      chatParent.scrollTop = chatParent.scrollHeight - chatParent.clientHeight;
    }
  }

  new ResizeObserver(syncMargin).observe(chatInputRow);
  window.addEventListener("resize", syncMargin);
  syncMargin();
})();