diff --git a/public/app/dom.js b/public/app/dom.js index 2fd97f3..25d5128 100644 --- a/public/app/dom.js +++ b/public/app/dom.js @@ -8,6 +8,7 @@ const messagesDiv = $("messages"); const modelSelect = $("model"); const modelPanel = $("modelPanel"); const modelBadgeName = $("modelBadgeName"); +const headerModelButton = $("headerModelButton"); const headerModelName = $("headerModelName"); const headerPersonaName = $("headerPersonaName"); const modelCount = $("modelCount"); @@ -163,6 +164,7 @@ export { logoutButton, messagesDiv, modelBadgeName, + headerModelButton, headerModelName, headerPersonaName, modelCount, diff --git a/public/index.html b/public/index.html index 6c3bb40..70645b0 100644 --- a/public/index.html +++ b/public/index.html @@ -113,7 +113,7 @@

New chat

- ModelLoading... + PersonaNone
diff --git a/public/script.js b/public/script.js index 15bc4ea..b4d699d 100644 --- a/public/script.js +++ b/public/script.js @@ -1,5 +1,5 @@ import {del, get, post, put, stream} from "./app/api.js"; -import {closeChatDrawer} from "./app/chatDrawer.js"; +import {closeChatDrawer, openChatDrawer} from "./app/chatDrawer.js"; import {defaultModelProfile, onboardingPrompts, requestedChatId} from "./app/constants.js"; import {applyTheme as applySharedTheme, applyThemeMode as applySharedThemeMode, readStoredAppearance} from "./app/themeController.js"; import { @@ -35,6 +35,7 @@ import { manageChatMemoryBtn, managePersonaStateBtn, importWorkspaceFileInput, + headerModelButton, headerModelName, headerPersonaName, moveChatFolderBtn, @@ -182,7 +183,7 @@ function applyWorkspaceMode(nextMode, persist = true) { workspaceMode = nextMode === "advanced" ? "advanced" : "basic"; document.body.dataset.workspaceMode = workspaceMode; if (persist) localStorage.setItem("krishd-workspace-mode", workspaceMode); - if (modelSection) modelSection.classList.toggle("hidden", workspaceMode === "basic"); + if (modelSection) modelSection.classList.remove("hidden"); if (personaSection) personaSection.classList.toggle("hidden", workspaceMode === "basic"); updateComposerPlaceholder(); } @@ -1013,6 +1014,15 @@ function updateChatActionState() { exportChatBtn.disabled = !hasChat || currentMessages.length === 0; if (backupWorkspaceBtn) backupWorkspaceBtn.disabled = !currentUsername; if (importWorkspaceBtn) importWorkspaceBtn.disabled = !currentUsername; + if (headerModelButton) headerModelButton.disabled = !hasChat; +} + +function openModelSettings() { + if (!activeChatId || !modelSection) return; + modelSection.classList.remove("hidden"); + modelSection.open = true; + openChatDrawer(); + requestAnimationFrame(() => modelSelect?.focus()); } function renderPersonaSection() { @@ -1994,6 +2004,10 @@ modelSelect.addEventListener("change", () => { renderModelSection(); void saveSelectedModel(); }); +if (headerModelButton) headerModelButton.addEventListener("click", (event) => { + event.stopPropagation(); + openModelSettings(); +}); saveGenerationSettingsBtn.addEventListener("click", () => { void saveGenerationSettings(); }); roleplayNewPersonaBtn.addEventListener("click", () => openPersonaForm(null, "assistant")); clearUserPersonaBtn.addEventListener("click", () => { diff --git a/public/style.css b/public/style.css index 68ed4ff..61d946e 100644 --- a/public/style.css +++ b/public/style.css @@ -369,6 +369,8 @@ input:focus, textarea:focus, select:focus { border-color: var(--brand); } } .chat-context-item > span { color: var(--text-muted); font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .chat-context-item > strong { max-width: 140px; overflow: hidden; color: var(--text-soft); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; } +.chat-context-button { min-height: 0; border: 0; color: inherit; text-align: left; justify-content: start; } +.chat-context-button:hover:not(:disabled) { background: var(--surface-hover); } .chat-header-actions { display: flex; align-items: center; } .overflow-trigger { min-height: 38px; padding: 8px 12px; border-radius: 999px; font-size: .8rem; }