diff --git a/public/app/chatDrawer.js b/public/app/chatDrawer.js new file mode 100644 index 0000000..1fceb8f --- /dev/null +++ b/public/app/chatDrawer.js @@ -0,0 +1,58 @@ +import {chatDrawer, chatDrawerButton, chatDrawerCloseBtn} from "./dom.js"; + +function syncChatDrawerState(isOpen) { + if (!chatDrawer || !chatDrawerButton) return; + if (isOpen) document.body.classList.remove("sidebar-open"); + chatDrawer.classList.toggle("hidden", !isOpen); + chatDrawerButton.setAttribute("aria-expanded", String(isOpen)); + document.body.classList.toggle("chat-drawer-open", isOpen); +} + +function isChatDrawerOpen() { + return Boolean(chatDrawer && !chatDrawer.classList.contains("hidden")); +} + +function openChatDrawer() { + syncChatDrawerState(true); +} + +function closeChatDrawer() { + syncChatDrawerState(false); +} + +function toggleChatDrawer() { + syncChatDrawerState(!isChatDrawerOpen()); +} + +function handleDocumentClick(event) { + if (!isChatDrawerOpen()) return; + const target = event.target; + if (!(target instanceof Node)) return; + if (chatDrawerButton?.contains(target)) return; + if (chatDrawer?.querySelector(".chat-drawer-panel")?.contains(target)) return; + closeChatDrawer(); +} + +function handleDocumentKeydown(event) { + if (event.key === "Escape") closeChatDrawer(); +} + +if (chatDrawerButton && chatDrawer) { + chatDrawerButton.addEventListener("click", () => { + toggleChatDrawer(); + }); +} + +if (chatDrawerCloseBtn) { + chatDrawerCloseBtn.addEventListener("click", closeChatDrawer); +} + +document.addEventListener("click", handleDocumentClick); +document.addEventListener("keydown", handleDocumentKeydown); + +export { + closeChatDrawer, + isChatDrawerOpen, + openChatDrawer, + toggleChatDrawer +}; diff --git a/public/app/dom.js b/public/app/dom.js index 409e070..4bbfb6d 100644 --- a/public/app/dom.js +++ b/public/app/dom.js @@ -6,13 +6,13 @@ const authMsg = $("authMsg"); const logoutButton = $("logout"); const messagesDiv = $("messages"); const modelSelect = $("model"); -const modelMenuButton = $("modelMenuButton"); -const modelPopover = $("modelPopover"); +const modelPanel = $("modelPanel"); const modelBadgeName = $("modelBadgeName"); const modelCount = $("modelCount"); const modelHelpTitle = $("modelHelpTitle"); const modelHelpBadge = $("modelHelpBadge"); const modelHelpSummary = $("modelHelpSummary"); +const chatDrawerPersonaValue = $("chatDrawerPersonaValue"); const loginForm = $("loginForm"); const registerForm = $("registerForm"); const msgInput = $("msgInput"); @@ -27,6 +27,8 @@ const chatList = $("chatList"); const chatSearchInput = $("chatSearch"); const chatSidebar = $("chatSidebar"); const chatDrawerCloseBtn = $("chatDrawerClose"); +const chatDrawerButton = $("chatDrawerButton"); +const chatDrawer = $("chatDrawer"); const newChatBtn = $("newChat"); const chatListLoading = $("chatListLoading"); const chatListLoadingText = $("chatListLoadingText"); @@ -43,14 +45,8 @@ const chatActivityOverlay = $("chatActivityOverlay"); const chatActivityEyebrow = $("chatActivityEyebrow"); const chatActivityTitle = $("chatActivityTitle"); const chatActivityDetail = $("chatActivityDetail"); -const contextChipButton = $("contextChipButton"); -const contextPopover = $("contextPopover"); -const contextSummaryLabel = $("contextSummaryLabel"); -const chatActionsMenuButton = $("chatActionsMenuButton"); -const chatActionsPopover = $("chatActionsPopover"); const chatCharacterPill = $("chatCharacterPill"); const chatUserPersonaPill = $("chatUserPersonaPill"); -const personaList = $("personaList"); const userPersonaList = $("userPersonaList"); const personaForm = $("personaForm"); const personaFormTitle = $("personaFormTitle"); @@ -65,12 +61,10 @@ const personaExampleDialoguesInput = $("personaExampleDialogues"); const personaFormNotice = $("personaFormNotice"); const roleplayNewPersonaBtn = $("roleplayNewPersona"); const clearUserPersonaBtn = $("clearUserPersona"); -const activePersonaStatus = $("activePersonaStatus"); const activeUserPersonaStatus = $("activeUserPersonaStatus"); const personaModal = $("personaModal"); const personaCloseBtn = $("personaClose"); -const personaMenuButton = $("personaMenuButton"); -const personaPopover = $("personaPopover"); +const personaPanel = $("personaPanel"); const roleplayStarterModal = $("roleplayStarterModal"); const roleplayStarterClose = $("roleplayStarterClose"); const roleplayStarterCancel = $("roleplayStarterCancel"); @@ -106,24 +100,24 @@ const authScreens = document.querySelectorAll(".auth-screen"); const toggleButtons = document.querySelectorAll(".auth-toggle .toggle"); const themeNameTargets = document.querySelectorAll("[data-theme-name]"); const themeLogoTargets = document.querySelectorAll("[data-theme-logo]"); -const modelMenu = document.querySelector(".model-menu"); -const personaMenu = document.querySelector(".persona-menu"); +const modelSection = document.querySelector(".chat-drawer-section--model"); +const personaSection = document.querySelector(".chat-drawer-section--persona"); export { $, activeChatTitle, - activePersonaStatus, activeUserPersonaStatus, authDiv, authMsg, authScreens, - chatActionsMenuButton, - chatActionsPopover, chatActivityDetail, chatActivityEyebrow, chatActivityOverlay, chatActivityTitle, chatCharacterPill, + chatDrawerPersonaValue, + chatDrawer, + chatDrawerButton, chatDiv, chatList, chatListLoading, @@ -134,9 +128,6 @@ export { chatUserPersonaPill, clearChatBtn, clearUserPersonaBtn, - contextChipButton, - contextPopover, - contextSummaryLabel, exportChatBtn, pinChatBtn, moveChatFolderBtn, @@ -153,9 +144,8 @@ export { modelHelpBadge, modelHelpSummary, modelHelpTitle, - modelMenu, - modelMenuButton, - modelPopover, + modelPanel, + modelSection, modelSelect, msgInput, newChatBtn, @@ -173,12 +163,10 @@ export { personaForm, personaFormNotice, personaFormTitle, - personaList, - personaMenu, - personaMenuButton, personaModal, personaNameInput, - personaPopover, + personaPanel, + personaSection, personaPronounsInput, personaTypeSelect, personaAppearanceInput, diff --git a/public/index.html b/public/index.html index 385abb1..5d3113b 100644 --- a/public/index.html +++ b/public/index.html @@ -109,32 +109,38 @@
- -