diff --git a/webui/components/messages/process-group/process-group-dom.js b/webui/components/messages/process-group/process-group-dom.js index df0650a5f..5f5dd51c4 100644 --- a/webui/components/messages/process-group/process-group-dom.js +++ b/webui/components/messages/process-group/process-group-dom.js @@ -12,14 +12,17 @@ export function applyModeSteps(detailMode, showUtils) { const chatHistory = document.getElementById("chat-history"); if (!chatHistory) return; + chatHistory.dataset.detailMode = mode; + const shouldExpand = mode !== "collapsed"; + const allMode = mode === "expanded"; const messages = chatHistory.querySelectorAll(".process-group"); for (let i = 0; i < messages.length; i += 1) { messages[i].classList.toggle("expanded", shouldExpand); const steps = messages[i].querySelectorAll(".process-step"); for (let si = 0; si < steps.length; si += 1) { - steps[si].classList.toggle("expanded", mode === "expanded"); + steps[si].classList.toggle("expanded", allMode); } } } diff --git a/webui/components/sidebar/sidebar-store.js b/webui/components/sidebar/sidebar-store.js index 4b590ae68..e27e0f94d 100644 --- a/webui/components/sidebar/sidebar-store.js +++ b/webui/components/sidebar/sidebar-store.js @@ -3,6 +3,7 @@ import { createStore } from "/js/AlpineStore.js"; // This store manages the visibility and state of the main sidebar panel. const model = { isOpen: true, + menuOpen: false, _initialized: false, // Centralized collapse state for all sidebar sections (persisted in localStorage) @@ -79,7 +80,10 @@ const model = { // Handle browser resize to show/hide sidebar based on viewport width handleResize() { - this.isOpen = !this.isMobile(); + if (this.isMobile()) { + this.isOpen = false; + } + this.menuClose(); }, // Check if the current viewport is mobile @@ -89,8 +93,29 @@ const model = { // Dropdown positioning for quick-actions (fixed position to escape overflow:hidden) dropdownStyle: {}, - - updateDropdownPosition(triggerElement) { + + headOpen() { + return this.isOpen || this.menuOpen; + }, + + menuToggle(triggerElement) { + this.menuOpen = !this.menuOpen; + if (this.menuOpen) { + this.menuPos(triggerElement); + } + }, + + menuClose() { + this.menuOpen = false; + }, + + menuClick(event, panelElement) { + if (this.menuOpen && panelElement && !panelElement.contains(event.target)) { + this.menuClose(); + } + }, + + menuPos(triggerElement) { if (!triggerElement) return; const rect = triggerElement.getBoundingClientRect(); const menuWidth = Math.max(rect.width, 180); diff --git a/webui/components/sidebar/top-section/header-icons.html b/webui/components/sidebar/top-section/header-icons.html index e1dd4e2db..890a564d2 100644 --- a/webui/components/sidebar/top-section/header-icons.html +++ b/webui/components/sidebar/top-section/header-icons.html @@ -9,13 +9,17 @@
-