Frederik Spirgi
1185 lines
50 KiB
JavaScript
1185 lines
50 KiB
JavaScript
import {createMemoryPanel} from "./memoryPanel.js";
|
|
import {createBranchExplorer} from "./branchExplorer.js";
|
|
import {createWorkspaceTransfer} from "./workspaceTransfer.js";
|
|
import {createDraftStore} from "./draftStore.js";
|
|
import {createMessageRenderer} from "./messageRenderer.js";
|
|
import {createPersonaController} from "./personaController.js";
|
|
import {createConversationController} from "./conversationController.js";
|
|
import {createComposerController} from "./composerController.js";
|
|
import {createConversationState} from "./conversationState.js";
|
|
/**
|
|
* @file Steuert die Chat-Oberfläche mit Gesprächsauswahl, Nachrichteneingabe, Streaming und Persona-Verwaltung.
|
|
*/
|
|
import {del, get, post, put} from "./api.js?v=20260909-account-controls";
|
|
import {createMessageActions} from "./messageActions.js";
|
|
import {createWebSearchToggle} from "./webSearch.js";
|
|
import {createAttachmentComposer} from "./attachments.js?v=20260930-chat-usability";
|
|
import {createReasoningToggle} from "./reasoning.js?v=20260921-reasoning-capability";
|
|
import { closeChatDrawer, openChatDrawer } from "./chatDrawer.js?v=20260909-account-controls";
|
|
import { openModal, closeModal, topModal } from "./modalFocus.js";
|
|
import {onboardingPrompts} from "./constants.js?v=20260909-account-controls";
|
|
import { getModelProfile } from "./modelProfiles.js?v=20260909-account-controls";
|
|
import {
|
|
applyTheme as applySharedTheme,
|
|
applyThemeMode as applySharedThemeMode,
|
|
readStoredAppearance
|
|
} from "./themeController.js?v=20260909-account-controls";
|
|
import {
|
|
activeChatTitle,
|
|
chatActivityDetail,
|
|
chatActivityEyebrow,
|
|
chatActivityOverlay,
|
|
chatActivityTitle,
|
|
chatCharacterPill,
|
|
chatDiv,
|
|
chatList,
|
|
chatListLoading,
|
|
chatListLoadingText,
|
|
chatSidebar,
|
|
chatSidebarToggle,
|
|
chatSearchInput,
|
|
chatUserPersonaPill,
|
|
chatTemperatureInput,
|
|
chatContextLengthInput,
|
|
chatResponseLengthInput,
|
|
chatSystemInstructionInput,
|
|
clearChatBtn,
|
|
archiveChatBtn,
|
|
backupWorkspaceBtn,
|
|
clearUserPersonaBtn,
|
|
exportChatBtn,
|
|
importWorkspaceBtn,
|
|
manageChatMemoryBtn,
|
|
managePersonaStateBtn,
|
|
importWorkspaceFileInput,
|
|
headerModelName,
|
|
moveChatFolderBtn,
|
|
messagesDiv,
|
|
modelBadgeName,
|
|
modelCount,
|
|
modelHelpBadge,
|
|
modelHelpSummary,
|
|
modelHelpTitle,
|
|
modelSection,
|
|
modelSelect,
|
|
msgInput,
|
|
newChatBtn,
|
|
onboardingBack,
|
|
onboardingChoices,
|
|
onboardingContinue,
|
|
onboardingModal,
|
|
onboardingSkip,
|
|
onboardingSubtitle,
|
|
onboardingTitle,
|
|
pinChatBtn,
|
|
personaCloseBtn,
|
|
personaExampleDialoguesInput,
|
|
personaExamplesField,
|
|
personaForm,
|
|
personaModal,
|
|
personaSection,
|
|
personaTypeSelect,
|
|
popupCancelBtn,
|
|
popupCloseBtn,
|
|
popupConfirmBtn,
|
|
popupDescription,
|
|
popupEyebrow,
|
|
popupField,
|
|
popupInput,
|
|
popupInputLabel,
|
|
popupModal,
|
|
popupTitle,
|
|
renameChatBtn,
|
|
roleplayCharacterSelect,
|
|
roleplayNewPersonaBtn,
|
|
roleplayStarterBack,
|
|
roleplayStarterCancel,
|
|
roleplayStarterClose,
|
|
roleplayStarterConfirm,
|
|
roleplayStarterModal,
|
|
roleplayUserPersonaSelect,
|
|
sendBtn,
|
|
saveGenerationSettingsBtn,
|
|
brandLogoTargets,
|
|
brandNameTargets
|
|
} from "./dom.js?v=20260909-account-controls";
|
|
|
|
const conversation = createConversationState();
|
|
|
|
const headerModelButton = document.getElementById("headerModelButton");
|
|
const stopBtn = document.getElementById("stopGeneration");
|
|
const webSearchButton = document.getElementById("webSearch");
|
|
const webSearchToggle = createWebSearchToggle(webSearchButton);
|
|
const reasoningToggle = createReasoningToggle(document.getElementById("reasoning"));
|
|
|
|
const attachmentComposer = createAttachmentComposer({ onChange: () => updateSendState(), onError: message => setNotice(message, "error") });
|
|
|
|
let popupResolver = null, popupMode = null, popupLastFocus = null;
|
|
|
|
let workspaceMode = localStorage.getItem("krishd-workspace-mode") || "basic";
|
|
let onboardingStep = 1, onboardingIntent = "ask";
|
|
let chatLoadingDepth = 0;
|
|
let chatActivityDepth = 0;
|
|
let noticeTimer = null;
|
|
|
|
let availableModelsById = new Map();
|
|
const personalitySelect = document.getElementById("personalitySelect");
|
|
let personalities = [];
|
|
|
|
const {setMessageContent, scrollMessagesToBottom, updateJumpToLatest, addMessage, renderMessages, announceResponding, announceReply, announceResponseStatus} = createMessageRenderer({
|
|
getChatById: (...args) => getChatById(...args),
|
|
state: conversation,
|
|
setNotice: (...args) => setNotice(...args),
|
|
sendMessage: (...args) => sendMessage(...args),
|
|
editChatMessage: (...args) => editChatMessage(...args),
|
|
deleteChatMessage: (...args) => deleteChatMessage(...args),
|
|
branchFromMessage: (...args) => branchFromMessage(...args),
|
|
retryLatestAssistantMessage: (...args) => retryLatestAssistantMessage(...args),
|
|
switchResponseVersion: (...args) => switchResponseVersion(...args),
|
|
switchRetryVariant: (...args) => switchRetryVariant(...args),
|
|
renderDrawerSummary: (...args) => renderDrawerSummary(...args),
|
|
updateChatActionState: (...args) => updateChatActionState(...args),
|
|
updateComposerPlaceholder: (...args) => updateComposerPlaceholder(...args),
|
|
createNewChat: (...args) => createNewChat(...args),
|
|
openMessage: messageId => setActiveChat(conversation.activeChatId, {matchMessageId: messageId})
|
|
});
|
|
|
|
const {
|
|
updateRoleplaySuggestions,
|
|
setRoleplayStarterNotice,
|
|
renderRoleplayStarterStep,
|
|
maybeShowPersonaNudge,
|
|
closePersonaForm,
|
|
closeRoleplayStarter,
|
|
clearChatUserPersona,
|
|
renderPersonaSection,
|
|
savePersona,
|
|
startRoleplay
|
|
} = createPersonaController({
|
|
state: conversation,
|
|
setNotice: (...args) => setNotice(...args),
|
|
closePopup: (...args) => closePopup(...args),
|
|
updateWorkspaceCopy: (...args) => updateWorkspaceCopy(...args),
|
|
loadChatSessions: (...args) => loadChatSessions(...args),
|
|
confirmPopup: (...args) => confirmPopup(...args),
|
|
setChatLoading: (...args) => setChatLoading(...args),
|
|
setChatActivity: (...args) => setChatActivity(...args),
|
|
setActiveChat: (...args) => setActiveChat(...args)
|
|
});
|
|
|
|
const {
|
|
getChatById,
|
|
openCreatedChat,
|
|
setActiveChat,
|
|
loadChatSessions,
|
|
scheduleChatSearch,
|
|
createNewChat,
|
|
loadOlderMessages
|
|
} = createConversationController({
|
|
state: conversation,
|
|
renderChatList: (...args) => renderChatList(...args),
|
|
attachmentComposer,
|
|
resizeComposerInput: (...args) => resizeComposerInput(...args),
|
|
isMobileLayout: (...args) => isMobileLayout(...args),
|
|
closeMobileSidebar: (...args) => closeMobileSidebar(...args),
|
|
setChatLoading: (...args) => setChatLoading(...args),
|
|
setChatActivity: (...args) => setChatActivity(...args),
|
|
updateWorkspaceCopy: (...args) => updateWorkspaceCopy(...args),
|
|
updateChatActionState: (...args) => updateChatActionState(...args),
|
|
setNotice: (...args) => setNotice(...args),
|
|
populateGenerationSettings: (...args) => populateGenerationSettings(...args),
|
|
renderMessages: (...args) => renderMessages(...args),
|
|
updateJumpToLatest: (...args) => updateJumpToLatest(...args),
|
|
updateSendState: (...args) => updateSendState(...args),
|
|
loadSummary: (...args) => loadSummary(...args),
|
|
updateHistoryControls: () => updateHistoryControls(),
|
|
getPersonalityId: () => personalitySelect?.value || "general-assistant"
|
|
});
|
|
|
|
const {updateSendState, resizeComposerInput, setLoadingState, stopGeneration, sendMessage} = createComposerController({
|
|
state: conversation,
|
|
elements: {msgInput, sendBtn, stopBtn, messagesDiv, modelSelect},
|
|
attachmentComposer,
|
|
webSearchButton,
|
|
reasoningToggle,
|
|
setChatActivity: (...args) => setChatActivity(...args),
|
|
updateComposerPlaceholder: (...args) => updateComposerPlaceholder(...args),
|
|
setNotice: (...args) => setNotice(...args),
|
|
webSearchToggle,
|
|
createNewChat: (...args) => createNewChat(...args),
|
|
getChatById: (...args) => getChatById(...args),
|
|
updateWorkspaceCopy: (...args) => updateWorkspaceCopy(...args),
|
|
renderChatList: (...args) => renderChatList(...args),
|
|
addMessage: (...args) => addMessage(...args),
|
|
updateChatActionState: (...args) => updateChatActionState(...args),
|
|
scrollMessagesToBottom: (...args) => scrollMessagesToBottom(...args),
|
|
setMessageContent: (...args) => setMessageContent(...args),
|
|
announceResponding,
|
|
announceReply,
|
|
announceResponseStatus,
|
|
setActiveChat: (...args) => setActiveChat(...args),
|
|
loadSummary: (...args) => loadSummary(...args),
|
|
markOnboardingCompleted: (...args) => markOnboardingCompleted(...args),
|
|
maybeShowPersonaNudge: (...args) => maybeShowPersonaNudge(...args)
|
|
});
|
|
|
|
const {exportCurrentChat, backupWorkspace, importWorkspaceFromFile} = createWorkspaceTransfer({
|
|
conversation, getChatById, setNotice, promptPopup, confirmPopup, setChatLoading, loadChatSessions
|
|
});
|
|
const {editChatMessage, deleteChatMessage, retryLatestAssistantMessage, switchResponseVersion, switchRetryVariant, branchFromMessage} = createMessageActions({
|
|
conversation, setNotice, promptPopup, confirmPopup, setActiveChat, openCreatedChat, setLoadingState, loadSummary, renderMessages, addMessage, setMessageContent, announceReply, announceResponseStatus, webSearchToggle, reasoningToggle, modelSelect, messagesDiv, msgInput
|
|
});
|
|
|
|
const memoryPanel = createMemoryPanel({state: conversation});
|
|
const branchExplorer = createBranchExplorer({state: conversation, setActiveChat, setMessageContent});
|
|
|
|
function setNotice(message = "", state = "") {
|
|
const notice = document.getElementById("workspaceNotice");
|
|
clearTimeout(noticeTimer);
|
|
if (notice) {
|
|
const visible = state === "error" || state === "success";
|
|
notice.textContent = visible ? message : "";
|
|
notice.classList.toggle("hidden", !visible);
|
|
notice.classList.toggle("error", state === "error");
|
|
notice.classList.toggle("success", state === "success");
|
|
if (state === "success") noticeTimer = setTimeout(() => setNotice(), 3500);
|
|
}
|
|
return { message, state };
|
|
}
|
|
|
|
function setChatLoading(active, message = "Loading chats...") {
|
|
if (!chatListLoading || !chatListLoadingText) return;
|
|
if (active) {
|
|
chatLoadingDepth += 1;
|
|
chatListLoadingText.textContent = message;
|
|
chatListLoading.classList.remove("hidden");
|
|
return;
|
|
}
|
|
chatLoadingDepth = Math.max(0, chatLoadingDepth - 1);
|
|
if (chatLoadingDepth === 0) {
|
|
chatListLoading.classList.add("hidden");
|
|
chatListLoadingText.textContent = "Loading chats...";
|
|
}
|
|
}
|
|
|
|
function setChatActivity(active, { eyebrow = "Please wait", title = "Preparing chat", detail = "The assistant is still working." } = {}) {
|
|
if (!chatActivityOverlay || !chatActivityEyebrow || !chatActivityTitle || !chatActivityDetail) return;
|
|
if (active) {
|
|
chatActivityDepth += 1;
|
|
chatActivityEyebrow.textContent = eyebrow;
|
|
chatActivityTitle.textContent = title;
|
|
chatActivityDetail.textContent = detail;
|
|
chatActivityOverlay.classList.remove("hidden");
|
|
return;
|
|
}
|
|
chatActivityDepth = Math.max(0, chatActivityDepth - 1);
|
|
if (chatActivityDepth === 0) {
|
|
chatActivityOverlay.classList.add("hidden");
|
|
chatActivityEyebrow.textContent = "Please wait";
|
|
chatActivityTitle.textContent = "Preparing chat";
|
|
chatActivityDetail.textContent = "The assistant is still working.";
|
|
}
|
|
}
|
|
|
|
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.remove("hidden");
|
|
if (personaSection) personaSection.classList.toggle("hidden", workspaceMode === "basic");
|
|
updateComposerPlaceholder();
|
|
}
|
|
|
|
function isMobileLayout() {
|
|
return window.matchMedia("(max-width: 980px)").matches;
|
|
}
|
|
|
|
function closeMobileSidebar() {
|
|
if (!chatSidebar || !document.body.classList.contains("sidebar-open")) return;
|
|
document.body.classList.remove("sidebar-open");
|
|
if (chatSidebarToggle) {
|
|
chatSidebarToggle.setAttribute("aria-expanded", "false");
|
|
chatSidebarToggle.setAttribute("aria-label", "Open conversation history");
|
|
}
|
|
chatSidebar.inert = isMobileLayout();
|
|
chatSidebar.removeAttribute("aria-modal");
|
|
chatSidebar.removeAttribute("role");
|
|
const backdrop = document.getElementById("chatSidebarBackdrop");
|
|
if (backdrop) backdrop.hidden = true;
|
|
chatSidebarToggle?.focus();
|
|
}
|
|
|
|
function openMobileSidebar() {
|
|
if (!chatSidebar || !isMobileLayout()) return;
|
|
chatSidebar.inert = false;
|
|
chatSidebar.setAttribute("role", "dialog");
|
|
chatSidebar.setAttribute("aria-modal", "true");
|
|
document.body.classList.add("sidebar-open");
|
|
if (chatSidebarToggle) {
|
|
chatSidebarToggle.setAttribute("aria-expanded", "true");
|
|
chatSidebarToggle.setAttribute("aria-label", "Close conversation history");
|
|
}
|
|
const backdrop = document.getElementById("chatSidebarBackdrop");
|
|
if (backdrop) backdrop.hidden = false;
|
|
chatSearchInput?.focus();
|
|
}
|
|
|
|
function hasCompletedOnboarding() {
|
|
return localStorage.getItem("krishd-onboarding-complete") === "true";
|
|
}
|
|
|
|
function markOnboardingCompleted() {
|
|
localStorage.setItem("krishd-onboarding-complete", "true");
|
|
closeOnboarding();
|
|
}
|
|
|
|
function closeOnboarding() {
|
|
if (!onboardingModal) return;
|
|
closeModal(onboardingModal);
|
|
}
|
|
|
|
function renderOnboardingStep() {
|
|
if (!onboardingChoices || !onboardingTitle || !onboardingSubtitle) return;
|
|
onboardingChoices.innerHTML = "";
|
|
onboardingBack.classList.toggle("hidden", onboardingStep === 1);
|
|
onboardingContinue.classList.toggle("hidden", onboardingStep === 2);
|
|
if (onboardingStep === 1) {
|
|
onboardingTitle.textContent = "Where shall we start?";
|
|
onboardingSubtitle.textContent = "Ask a question, explore an idea, or step into a story.";
|
|
[["ask", "Ask questions"], ["brainstorm", "Explore ideas"], ["write", "Write something"], ["learn", "Learn a topic"]].forEach(([key, label]) => {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.className = `secondary-action${onboardingIntent === key ? " active" : ""}`;
|
|
button.textContent = label;
|
|
button.addEventListener("click", () => {
|
|
onboardingIntent = key;
|
|
renderOnboardingStep();
|
|
onboardingChoices.querySelector(".active")?.focus();
|
|
});
|
|
onboardingChoices.appendChild(button);
|
|
});
|
|
return;
|
|
}
|
|
onboardingTitle.textContent = "Choose a starter";
|
|
onboardingSubtitle.textContent = "Pick one template and send your first message.";
|
|
onboardingPrompts[onboardingIntent].forEach((template) => {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.className = "secondary-action";
|
|
button.textContent = template;
|
|
button.addEventListener("click", async () => {
|
|
if (!conversation.activeChatId) await createNewChat();
|
|
msgInput.value = template;
|
|
msgInput.dispatchEvent(new Event("input"));
|
|
msgInput.focus();
|
|
closeOnboarding();
|
|
});
|
|
onboardingChoices.appendChild(button);
|
|
});
|
|
}
|
|
|
|
function maybeShowOnboarding() {
|
|
if (!onboardingModal || hasCompletedOnboarding()) return;
|
|
onboardingStep = 1;
|
|
onboardingIntent = "ask";
|
|
renderOnboardingStep();
|
|
openModal(onboardingModal, onboardingChoices.querySelector("button"));
|
|
}
|
|
|
|
function updateComposerPlaceholder() {
|
|
if (conversation.isProcessing) { msgInput.placeholder = "Draft your next message..."; return; }
|
|
const activeChat = getChatById(conversation.activeChatId);
|
|
if (!activeChat) {
|
|
msgInput.placeholder = "Create a chat to begin...";
|
|
return;
|
|
}
|
|
if (activeChat.assistant_persona_id) {
|
|
msgInput.placeholder = "Continue the scene...";
|
|
return;
|
|
}
|
|
msgInput.placeholder = workspaceMode === "basic" ? "Ask anything..." : "Type your message...";
|
|
}
|
|
|
|
function populateGenerationSettings(chat) {
|
|
if (!chat) return;
|
|
if (chat.preferred_model && Array.from(modelSelect.options).some((option) => option.value === chat.preferred_model)) {
|
|
modelSelect.value = chat.preferred_model;
|
|
}
|
|
chatTemperatureInput.value = chat.temperature ?? "";
|
|
chatContextLengthInput.value = chat.context_length ?? "";
|
|
chatResponseLengthInput.value = chat.response_length ?? "";
|
|
chatSystemInstructionInput.value = chat.system_instruction || "";
|
|
renderModelSection();
|
|
}
|
|
|
|
async function saveGenerationSettings() {
|
|
if (!conversation.activeChatId) return;
|
|
const payload = {
|
|
preferredModel: modelSelect.value || null,
|
|
temperature: chatTemperatureInput.value,
|
|
contextLength: chatContextLengthInput.value,
|
|
responseLength: chatResponseLengthInput.value,
|
|
systemInstruction: chatSystemInstructionInput.value
|
|
};
|
|
const res = await put(`/chats/${conversation.activeChatId}/generation-settings`, payload);
|
|
if (res.error || !res.chat) return setNotice(res.error || "Unable to save generation settings.", "error");
|
|
const chat = getChatById(conversation.activeChatId);
|
|
if (chat) Object.assign(chat, res.chat);
|
|
populateGenerationSettings(res.chat);
|
|
setNotice("Generation settings saved.", "success");
|
|
}
|
|
|
|
async function saveSelectedModel() {
|
|
if (!conversation.activeChatId || !modelSelect.value) return;
|
|
const chatId = conversation.activeChatId;
|
|
const selectedModel = modelSelect.value;
|
|
const res = await put(`/chats/${chatId}/model`, { model: selectedModel });
|
|
if (res.error || !res.chat) return setNotice(res.error || "Unable to switch models.", "error");
|
|
const chat = getChatById(chatId);
|
|
if (chat) Object.assign(chat, res.chat);
|
|
if (chatId === conversation.activeChatId && modelSelect.value === selectedModel) {
|
|
renderModelSection();
|
|
setNotice(`Model switched to ${modelSelect.selectedOptions[0]?.textContent || selectedModel}.`, "success");
|
|
}
|
|
}
|
|
|
|
messagesDiv.addEventListener("scroll", updateJumpToLatest, {passive: true});
|
|
document.getElementById("jumpToLatest").addEventListener("click", scrollMessagesToBottom);
|
|
|
|
function updateWorkspaceCopy() {
|
|
const activeChat = getChatById(conversation.activeChatId);
|
|
if (activeChatTitle) {
|
|
activeChatTitle.textContent = activeChat ? activeChat.title : "New chat";
|
|
}
|
|
if (personalitySelect) {
|
|
personalitySelect.value = activeChat?.personality_id || personalitySelect.value || "general-assistant";
|
|
syncPersonalityIdentity();
|
|
}
|
|
|
|
renderDrawerSummary();
|
|
renderPersonaSection();
|
|
updateComposerPlaceholder();
|
|
}
|
|
|
|
function syncPersonalityIdentity() {
|
|
const personality = personalities.find(item => item.id === personalitySelect?.value);
|
|
if (personality && personalitySelect) personalitySelect.style.setProperty("--personality-accent", personality.accentColor);
|
|
}
|
|
|
|
async function loadPersonalities() {
|
|
const response = await get("/personalities");
|
|
if (response.error) return setNotice(response.error, "error");
|
|
personalities = response.personalities || [];
|
|
if (!personalitySelect) return;
|
|
personalitySelect.replaceChildren(...personalities.map(item => {
|
|
const option = document.createElement("option");
|
|
option.value = item.id;
|
|
option.textContent = `${item.name} · ${item.specialization}${item.isDefault ? " · Default" : ""}`;
|
|
option.title = `${item.description} Inspired by ${item.historicalInspiration}.`;
|
|
return option;
|
|
}));
|
|
const requested = new URLSearchParams(location.search).get("personality");
|
|
personalitySelect.value = getChatById(conversation.activeChatId)?.personality_id ||
|
|
(personalities.some(item => item.id === requested) ? requested : response.defaultPersonalityId) || "general-assistant";
|
|
syncPersonalityIdentity();
|
|
}
|
|
|
|
personalitySelect?.addEventListener("change", async () => {
|
|
const chatId = conversation.activeChatId;
|
|
const selected = personalitySelect.value;
|
|
syncPersonalityIdentity();
|
|
if (!chatId) return;
|
|
const response = await put(`/chats/${chatId}/personality`, {personalityId: selected});
|
|
if (response.error || !response.chat) {
|
|
updateWorkspaceCopy();
|
|
return setNotice(response.error || "Unable to change personality.", "error");
|
|
}
|
|
Object.assign(getChatById(chatId) || {}, response.chat);
|
|
updateWorkspaceCopy();
|
|
setNotice(`Personality changed to ${response.personality.name}.`, "success");
|
|
});
|
|
|
|
function renderDrawerSummary() {
|
|
const chat = getChatById(conversation.activeChatId);
|
|
if (!chatCharacterPill || !chatUserPersonaPill) return;
|
|
if (!chat) {
|
|
chatCharacterPill.classList.add("hidden");
|
|
chatUserPersonaPill.classList.add("hidden");
|
|
return;
|
|
}
|
|
if (chat.assistant_persona_id) {
|
|
chatCharacterPill.textContent = `Character: ${chat.assistant_persona_name || chat.title}`;
|
|
chatCharacterPill.classList.remove("hidden");
|
|
if (chat.user_persona_id) {
|
|
chatUserPersonaPill.textContent = `You as: ${chat.user_persona_name || "User persona"}`;
|
|
chatUserPersonaPill.classList.remove("hidden");
|
|
} else {
|
|
chatUserPersonaPill.textContent = "You as: yourself";
|
|
chatUserPersonaPill.classList.remove("hidden");
|
|
}
|
|
return;
|
|
}
|
|
chatCharacterPill.classList.add("hidden");
|
|
chatUserPersonaPill.classList.add("hidden");
|
|
}
|
|
|
|
function renderModelSection() {
|
|
reasoningToggle.setModel(modelSelect.value);
|
|
updateModelHelp();
|
|
return modelSelect?.selectedOptions[0]?.textContent || "";
|
|
}
|
|
|
|
function updateModelHelp() {
|
|
if (!modelSelect || !modelHelpTitle || !modelHelpBadge || !modelHelpSummary) return;
|
|
const selectedOption = modelSelect.selectedOptions[0];
|
|
if (!selectedOption || selectedOption.disabled) {
|
|
if (modelCount) modelCount.textContent = "No models";
|
|
if (modelBadgeName) modelBadgeName.textContent = "Unavailable";
|
|
if (headerModelName) headerModelName.textContent = "Unavailable";
|
|
modelHelpBadge.dataset.badge = "waiting";
|
|
modelHelpTitle.textContent = "Choose a model";
|
|
modelHelpBadge.textContent = "Waiting";
|
|
modelHelpSummary.textContent = "Pick a model to see what it is best suited for.";
|
|
return;
|
|
}
|
|
if (modelCount) {
|
|
const totalModels = Array.from(modelSelect.options).filter((option) => !option.disabled).length;
|
|
modelCount.textContent = `${totalModels} ${totalModels === 1 ? "model" : "models"}`;
|
|
}
|
|
const modelId = selectedOption.value;
|
|
const modelName = selectedOption.textContent || modelId;
|
|
const profile = getModelProfile(availableModelsById.get(modelId) || { model: modelId, name: modelName });
|
|
if (modelBadgeName) modelBadgeName.textContent = modelName;
|
|
if (headerModelName) headerModelName.textContent = modelName;
|
|
modelHelpTitle.textContent = modelName;
|
|
modelHelpBadge.textContent = profile.badge;
|
|
modelHelpBadge.dataset.badge = profile.badge.toLowerCase();
|
|
modelHelpSummary.textContent = profile.summary;
|
|
}
|
|
|
|
function applyTheme(themeKey, persist = true) {
|
|
applySharedTheme(themeKey, {
|
|
persist,
|
|
title: "Elsewhere",
|
|
nameTargets: brandNameTargets,
|
|
logoTargets: brandLogoTargets
|
|
});
|
|
updateWorkspaceCopy();
|
|
renderModelSection();
|
|
}
|
|
|
|
function applyThemeMode(modeKey, persist = true) {
|
|
applySharedThemeMode(modeKey, { persist });
|
|
}
|
|
|
|
function updateChatActionState() {
|
|
updateHistoryControls();
|
|
const activeChat = getChatById(conversation.activeChatId);
|
|
const hasChat = Boolean(activeChat);
|
|
renameChatBtn.disabled = !hasChat || Boolean(activeChat?.assistant_persona_id);
|
|
if (pinChatBtn) {
|
|
pinChatBtn.disabled = !hasChat;
|
|
if (hasChat) pinChatBtn.textContent = activeChat.is_pinned ? "Unpin" : "Pin";
|
|
}
|
|
if (moveChatFolderBtn) moveChatFolderBtn.disabled = !hasChat;
|
|
if (manageChatMemoryBtn) manageChatMemoryBtn.disabled = !hasChat;
|
|
document.getElementById("exploreBranches").disabled = !hasChat;
|
|
if (managePersonaStateBtn) managePersonaStateBtn.disabled = !hasChat || !activeChat?.assistant_persona_id;
|
|
if (archiveChatBtn) {
|
|
archiveChatBtn.disabled = !hasChat;
|
|
if (hasChat) archiveChatBtn.textContent = activeChat.archived_at ? "Unarchive" : "Archive";
|
|
}
|
|
clearChatBtn.disabled = !hasChat;
|
|
exportChatBtn.disabled = !hasChat || conversation.currentMessages.length === 0;
|
|
if (backupWorkspaceBtn) backupWorkspaceBtn.disabled = !conversation.currentUsername;
|
|
if (importWorkspaceBtn) importWorkspaceBtn.disabled = !conversation.currentUsername;
|
|
if (headerModelButton) headerModelButton.disabled = !hasChat;
|
|
}
|
|
|
|
function updateHistoryControls() {
|
|
const older = document.getElementById("loadOlderMessages");
|
|
older.hidden = !conversation.historyPage?.hasMore;
|
|
older.disabled = conversation.historyLoading;
|
|
older.textContent = conversation.historyLoading ? "Loading messages..." : "Load older messages";
|
|
document.getElementById("loadLatestMessages").hidden = !conversation.historyPage?.hasNewer;
|
|
}
|
|
|
|
function openModelSettings() {
|
|
if (!conversation.activeChatId || !modelSection) return;
|
|
modelSection.classList.remove("hidden");
|
|
modelSection.open = true;
|
|
openChatDrawer();
|
|
requestAnimationFrame(() => modelSelect?.focus());
|
|
}
|
|
|
|
function formatChatActivity(value) {
|
|
if (!value) return "";
|
|
const date = new Date(value.includes("T") ? value : `${value.replace(" ", "T")}Z`);
|
|
if (Number.isNaN(date.getTime())) return "";
|
|
const today = new Date();
|
|
const sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
|
|
if (sameDay(date, today)) return new Intl.DateTimeFormat(undefined, {hour: "numeric", minute: "2-digit"}).format(date);
|
|
const yesterday = new Date(today); yesterday.setDate(today.getDate() - 1);
|
|
if (sameDay(date, yesterday)) return "Yesterday";
|
|
return new Intl.DateTimeFormat(undefined, {month: "short", day: "numeric", ...(date.getFullYear() === today.getFullYear() ? {} : {year: "numeric"})}).format(date);
|
|
}
|
|
|
|
function renderChatList() {
|
|
const query = chatSearchInput.value.trim().toLowerCase();
|
|
const source = query ? (conversation.chatSearchResults ?? []) : conversation.chatSessions;
|
|
const filtered = source.filter((chat) => !query
|
|
|| chat.title.toLowerCase().includes(query)
|
|
|| String(chat.matched_content || "").toLowerCase().includes(query));
|
|
chatList.innerHTML = "";
|
|
if (!filtered.length) {
|
|
const empty = document.createElement("p");
|
|
empty.className = "status";
|
|
empty.textContent = query && conversation.chatSearchError ? conversation.chatSearchError
|
|
: query && conversation.chatSearchResults === null ? "Searching chats..."
|
|
: query ? "No chats match this search." : "No chats yet. Start a new one.";
|
|
chatList.appendChild(empty);
|
|
return;
|
|
}
|
|
const folderGroups = filtered
|
|
.filter((chat) => chat.folder_name && !chat.is_pinned && !chat.archived_at)
|
|
.reduce((map, chat) => {
|
|
const key = String(chat.folder_name).trim();
|
|
const items = map.get(key) || [];
|
|
items.push(chat);
|
|
map.set(key, items);
|
|
return map;
|
|
}, new Map());
|
|
const groups = [
|
|
{ label: "Pinned", items: filtered.filter((chat) => chat.is_pinned && !chat.archived_at) },
|
|
...Array.from(folderGroups.entries()).map(([label, items]) => ({ label, items })),
|
|
{ label: "Recent", items: filtered.filter((chat) => !chat.is_pinned && !chat.folder_name && !chat.archived_at) },
|
|
{ label: "Archived", items: filtered.filter((chat) => chat.archived_at) }
|
|
].filter((group) => group.items.length);
|
|
groups.forEach((group) => {
|
|
const section = document.createElement("section");
|
|
const heading = document.createElement("div");
|
|
const list = document.createElement("div");
|
|
section.className = "chat-list-section";
|
|
heading.className = "chat-list-section-header";
|
|
heading.textContent = group.label;
|
|
list.className = "chat-list-section-body";
|
|
list.setAttribute("role", "list");
|
|
section.append(heading, list);
|
|
group.items.forEach((chat) => {
|
|
const item = document.createElement("div"), content = document.createElement("button"), title = document.createElement("span"), meta = document.createElement("small"), remove = document.createElement("button");
|
|
item.className = `chat-item${chat.id === conversation.activeChatId ? " active" : ""}`;
|
|
item.setAttribute("role", "listitem");
|
|
content.type = "button";
|
|
content.className = "chat-item-copy secondary-action";
|
|
content.setAttribute("aria-label", `Open chat ${chat.title}`);
|
|
if (chat.id === conversation.activeChatId) content.setAttribute("aria-current", "page");
|
|
title.textContent = chat.title;
|
|
meta.className = "chat-item-meta";
|
|
const chatType = chat.assistant_persona_id
|
|
? `Roleplay${chat.user_persona_name ? ` · ${chat.user_persona_name}` : ""}`
|
|
: "Assistant chat";
|
|
const activity = formatChatActivity(chat.updated_at);
|
|
meta.textContent = [chat.source_chat_id ? `Branch · ${chatType}` : chatType, activity].filter(Boolean).join(" · ");
|
|
remove.type = "button";
|
|
remove.className = "chat-item-delete";
|
|
remove.textContent = "Delete";
|
|
remove.setAttribute("aria-label", `Delete chat ${chat.title}`);
|
|
remove.addEventListener("click", async (event) => {
|
|
event.stopPropagation();
|
|
closeMobileSidebar();
|
|
await deleteChat(chat.id);
|
|
});
|
|
content.append(title, meta);
|
|
const preview = query && chat.matched_content ? chat.matched_content : chat.last_message_preview;
|
|
if (preview) {
|
|
const excerpt = document.createElement("small");
|
|
const normalized = preview.replace(/\s+/g, " ").trim();
|
|
const matchAt = query ? normalized.toLowerCase().indexOf(query) : -1;
|
|
const start = Math.max(0, matchAt - 35);
|
|
excerpt.className = "chat-item-excerpt";
|
|
excerpt.textContent = `${start ? "…" : ""}${normalized.slice(start, start + 110)}${normalized.length > start + 110 ? "…" : ""}`;
|
|
content.append(excerpt);
|
|
}
|
|
item.append(content, remove);
|
|
content.addEventListener("click", () => {
|
|
closeMobileSidebar();
|
|
void setActiveChat(chat.id, {matchMessageId: query ? chat.matched_message_id : null});
|
|
});
|
|
list.appendChild(item);
|
|
});
|
|
chatList.appendChild(section);
|
|
});
|
|
}
|
|
|
|
function isPopupOpen() { return popupModal && !popupModal.classList.contains("hidden"); }
|
|
function finishPopup(result) {
|
|
if (typeof popupResolver === "function") popupResolver(result);
|
|
popupResolver = null;
|
|
popupMode = null;
|
|
}
|
|
function closePopup(resolveValue = null) {
|
|
if (!popupModal || popupModal.classList.contains("hidden")) return;
|
|
closeModal(popupModal);
|
|
popupField.classList.add("hidden");
|
|
popupInput.value = "";
|
|
popupConfirmBtn.disabled = false;
|
|
const nextFocus = popupLastFocus;
|
|
popupLastFocus = null;
|
|
finishPopup(resolveValue);
|
|
if (nextFocus instanceof HTMLElement) nextFocus.focus();
|
|
}
|
|
function openPopup(options) {
|
|
if (!popupModal) return Promise.resolve(null);
|
|
if (isPopupOpen()) closePopup(null);
|
|
popupLastFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
|
|
popupMode = options.mode;
|
|
popupEyebrow.textContent = options.eyebrow || "Action";
|
|
popupTitle.textContent = options.title || "Confirm action";
|
|
popupDescription.textContent = options.description || "";
|
|
popupConfirmBtn.textContent = options.confirmLabel || "Confirm";
|
|
popupCancelBtn.textContent = options.cancelLabel || "Cancel";
|
|
popupConfirmBtn.classList.toggle("danger", Boolean(options.danger));
|
|
popupField.classList.toggle("hidden", options.mode !== "prompt");
|
|
if (options.mode === "prompt") {
|
|
popupInputLabel.textContent = options.label || "Value";
|
|
popupInput.value = options.value || "";
|
|
popupInput.placeholder = options.placeholder || "";
|
|
} else {
|
|
popupInput.value = "";
|
|
}
|
|
openModal(popupModal, options.mode === "prompt" ? popupInput : popupConfirmBtn);
|
|
return new Promise((resolve) => {
|
|
popupResolver = resolve;
|
|
requestAnimationFrame(() => {
|
|
if (options.mode === "prompt") {
|
|
popupInput.focus();
|
|
popupInput.select();
|
|
} else {
|
|
popupConfirmBtn.focus();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
function confirmPopup(options) {
|
|
return openPopup({ ...options, mode: "confirm" }).then((result) => Boolean(result));
|
|
}
|
|
function promptPopup(options) {
|
|
return openPopup({ ...options, mode: "prompt" }).then((result) => typeof result === "string" ? result : null);
|
|
}
|
|
|
|
async function loadSummary() {
|
|
updateWorkspaceCopy();
|
|
return conversation.currentSummary;
|
|
}
|
|
|
|
async function renameChat(id) {
|
|
const chat = getChatById(id);
|
|
const nextTitle = chat ? await promptPopup({
|
|
eyebrow: "Conversation",
|
|
title: "Rename chat",
|
|
description: "Choose a new title for this thread.",
|
|
label: "Chat title",
|
|
value: chat.title,
|
|
placeholder: "New chat",
|
|
confirmLabel: "Save"
|
|
}) : "";
|
|
const title = (nextTitle || "").trim();
|
|
if (!chat || !title) return;
|
|
const res = await put(`/chats/${id}`, { title });
|
|
if (res.error) return setNotice(res.error, "error");
|
|
chat.title = title; updateWorkspaceCopy(); renderChatList(); setNotice("Chat renamed.", "success");
|
|
}
|
|
|
|
async function updateChatOrganization(id, changes) {
|
|
const chat = getChatById(id);
|
|
if (!chat) return;
|
|
const payload = {
|
|
folderName: changes.folderName !== undefined ? changes.folderName : chat.folder_name,
|
|
isPinned: changes.isPinned !== undefined ? changes.isPinned : Boolean(chat.is_pinned),
|
|
archived: changes.archived !== undefined ? changes.archived : Boolean(chat.archived_at)
|
|
};
|
|
const res = await put(`/chats/${id}/organization`, payload);
|
|
if (res.error) return setNotice(res.error, "error");
|
|
const index = conversation.chatSessions.findIndex((item) => item.id === id);
|
|
if (index >= 0) conversation.chatSessions[index] = {...conversation.chatSessions[index], ...res.chat};
|
|
updateWorkspaceCopy();
|
|
renderChatList();
|
|
updateChatActionState();
|
|
}
|
|
|
|
async function clearChat(id) {
|
|
const chat = getChatById(id);
|
|
if (!chat) return;
|
|
const confirmed = await confirmPopup({
|
|
eyebrow: "Conversation",
|
|
title: "Clear messages",
|
|
description: `Clear all messages in "${chat.title}"? The chat will stay, but its history will be removed.`,
|
|
confirmLabel: "Clear",
|
|
danger: true
|
|
});
|
|
if (!confirmed) return;
|
|
const res = await post(`/chats/${id}/clear`, {});
|
|
if (res.error) return setNotice(res.error, "error");
|
|
conversation.messageRetryState = new Map();
|
|
conversation.historyPage = null;
|
|
chat.last_message_preview = null;
|
|
chat.updated_at = new Date().toISOString();
|
|
conversation.currentMessages = []; renderMessages(); renderChatList(); await loadSummary(); setNotice("Chat cleared.", "success");
|
|
}
|
|
|
|
const personaStateFields = [
|
|
["relationship_notes", "Relationship notes"],
|
|
["tone", "Tone"],
|
|
["current_location", "Current location"],
|
|
["goals", "Goals"],
|
|
["unresolved_threads", "Unresolved threads"],
|
|
["boundaries", "Boundaries"]
|
|
];
|
|
|
|
function formatPersonaState(state = {}) {
|
|
const lines = personaStateFields.map(([key, label], index) => {
|
|
const value = String(state[key] || "").trim();
|
|
return `${index + 1}. ${label}: ${value || "Not set"}`;
|
|
});
|
|
return lines.join("\n");
|
|
}
|
|
|
|
async function managePersonaState() {
|
|
if (!conversation.activeChatId) return;
|
|
const loaded = await get(`/chats/${conversation.activeChatId}/persona-state`);
|
|
if (loaded.error) return setNotice(loaded.error, "error");
|
|
const state = loaded.state || {};
|
|
const fieldChoice = await promptPopup({
|
|
eyebrow: "Roleplay",
|
|
title: "Roleplay state",
|
|
description: `${formatPersonaState(state)}\n\nType a field number to edit it.`,
|
|
label: "Field number",
|
|
placeholder: "1",
|
|
confirmLabel: "Next"
|
|
});
|
|
const selected = personaStateFields[Number(String(fieldChoice || "").trim()) - 1];
|
|
if (!selected) return;
|
|
const [key, label] = selected;
|
|
const value = await promptPopup({
|
|
eyebrow: "Roleplay",
|
|
title: label,
|
|
description: "Leave blank to clear this field.",
|
|
label,
|
|
value: state[key] || "",
|
|
placeholder: label
|
|
});
|
|
if (value === null) return;
|
|
const nextState = { ...state, [key]: String(value || "").trim() || null };
|
|
const saved = await put(`/chats/${conversation.activeChatId}/persona-state`, nextState);
|
|
if (saved.error) return setNotice(saved.error, "error");
|
|
return setNotice("Roleplay state saved.", "success");
|
|
}
|
|
|
|
async function deleteChat(id) {
|
|
setChatLoading(true, "Deleting chat...");
|
|
const chat = getChatById(id);
|
|
if (!chat) {
|
|
setChatLoading(false);
|
|
return;
|
|
}
|
|
const confirmed = await confirmPopup({
|
|
eyebrow: "Conversation",
|
|
title: "Delete chat",
|
|
description: `Delete "${chat.title}"? This permanently removes the conversation.`,
|
|
confirmLabel: "Delete",
|
|
danger: true
|
|
});
|
|
if (!confirmed) {
|
|
setChatLoading(false);
|
|
return;
|
|
}
|
|
const res = await del(`/chats/${id}`);
|
|
if (res.error) {
|
|
setChatLoading(false);
|
|
return setNotice(res.error, "error");
|
|
}
|
|
conversation.chatSessions = conversation.chatSessions.filter((item) => item.id !== id);
|
|
conversation.chatDrafts.delete(id);
|
|
attachmentComposer.discardDraft(id);
|
|
if (conversation.activeChatId === id) { attachmentComposer.discard(); msgInput.value = ""; conversation.activeChatId = null; conversation.currentMessages = []; renderMessages(); }
|
|
conversation.messageRetryState = new Map();
|
|
await loadSummary(); renderChatList();
|
|
if (conversation.chatSessions.length) await setActiveChat(conversation.chatSessions[0].id); else await createNewChat();
|
|
setNotice("Chat deleted.", "success");
|
|
setChatLoading(false);
|
|
}
|
|
|
|
async function displayModels() {
|
|
const res = await get("/models");
|
|
const models = Array.isArray(res.models) ? res.models : null;
|
|
if (res.error || !models) {
|
|
availableModelsById = new Map();
|
|
modelSelect.innerHTML = "<option>Error loading models</option>";
|
|
renderModelSection();
|
|
return setNotice("Models could not be loaded.", "error");
|
|
}
|
|
modelSelect.innerHTML = "";
|
|
availableModelsById = new Map(models.map((model) => [String(model.model || model.name || ""), model]));
|
|
const preferredModelId = "qwen3:14b";
|
|
const preferredIndex = models.findIndex((model) => (model.model || model.name) === preferredModelId);
|
|
models.forEach((model, index) => {
|
|
const modelId = String(model.model || model.name || "");
|
|
const option = document.createElement("option");
|
|
option.value = modelId;
|
|
option.textContent = model.name || modelId;
|
|
option.title = getModelProfile(model).summary;
|
|
option.selected = preferredIndex >= 0 ? index === preferredIndex : index === 0;
|
|
modelSelect.appendChild(option);
|
|
});
|
|
const activeChat = getChatById(conversation.activeChatId);
|
|
if (activeChat?.preferred_model && models.some((model) => (model.model || model.name) === activeChat.preferred_model)) {
|
|
modelSelect.value = activeChat.preferred_model;
|
|
}
|
|
renderModelSection();
|
|
}
|
|
|
|
async function checkSession() {
|
|
const res = await get("/session");
|
|
if (!res.user) { window.location.replace(`/login?next=${encodeURIComponent(location.pathname + location.search)}`); return false; }
|
|
conversation.currentUsername = res.user; chatDiv.classList.remove("hidden");
|
|
const drafts = createDraftStore(res.user, {onError: message => setNotice(message, "error")});
|
|
conversation.chatDrafts = drafts.textDrafts;
|
|
attachmentComposer.setDraftStore(drafts);
|
|
if (location.pathname.endsWith("/new")) {
|
|
msgInput.value = drafts.textDrafts.get("new") || "";
|
|
attachmentComposer.restoreDraft(null);
|
|
resizeComposerInput();
|
|
}
|
|
await Promise.all([displayModels(), loadSummary(), loadChatSessions(), loadPersonalities()]);
|
|
// Starters are offered on workspace home.
|
|
const starter = new URLSearchParams(location.search).get("prompt");
|
|
if (starter && !msgInput.value) { msgInput.value = starter; msgInput.dispatchEvent(new Event("input")); }
|
|
msgInput.focus();
|
|
if (!starter && !conversation.activeChatId) maybeShowOnboarding();
|
|
return true;
|
|
}
|
|
|
|
const chatActions = {
|
|
archive: async () => {
|
|
const chat = getChatById(conversation.activeChatId);
|
|
if (chat) await updateChatOrganization(chat.id, { archived: !chat.archived_at });
|
|
},
|
|
clear: async () => {
|
|
if (conversation.activeChatId) await clearChat(conversation.activeChatId);
|
|
},
|
|
export: () => {
|
|
exportCurrentChat();
|
|
},
|
|
folder: async () => {
|
|
const chat = getChatById(conversation.activeChatId);
|
|
if (!chat) return;
|
|
const folderName = await promptPopup({
|
|
eyebrow: "Folder",
|
|
title: "Move chat to folder",
|
|
description: "Leave blank to remove the folder.",
|
|
label: "Folder name",
|
|
value: chat.folder_name || "",
|
|
placeholder: "Research"
|
|
});
|
|
if (folderName === null) return;
|
|
await updateChatOrganization(chat.id, { folderName: String(folderName || "").trim() || null });
|
|
},
|
|
memory: async () => {
|
|
await memoryPanel.open();
|
|
},
|
|
branches: () => branchExplorer.open(),
|
|
personaState: async () => {
|
|
await managePersonaState();
|
|
},
|
|
pin: async () => {
|
|
const chat = getChatById(conversation.activeChatId);
|
|
if (chat) await updateChatOrganization(chat.id, { isPinned: !chat.is_pinned });
|
|
},
|
|
rename: async () => {
|
|
if (conversation.activeChatId) await renameChat(conversation.activeChatId);
|
|
}
|
|
};
|
|
|
|
function bindChatDrawerActions() {
|
|
document.querySelectorAll("[data-chat-action]").forEach((button) => {
|
|
button.addEventListener("click", async () => {
|
|
closeChatDrawer();
|
|
const action = chatActions[button.dataset.chatAction];
|
|
if (typeof action === "function") await action();
|
|
});
|
|
});
|
|
}
|
|
|
|
sendBtn.addEventListener("click", () => { void sendMessage(); });
|
|
stopBtn.addEventListener("click", () => { void stopGeneration(); });
|
|
msgInput.addEventListener("keydown", (event) => { if (event.key === "Enter" && !event.shiftKey && !event.isComposing && !conversation.isProcessing) { event.preventDefault(); void sendMessage(); } });
|
|
msgInput.addEventListener("input", function () {
|
|
if (conversation.currentUsername) conversation.chatDrafts.set(conversation.activeChatId ?? "new", msgInput.value);
|
|
resizeComposerInput();
|
|
updateSendState();
|
|
});
|
|
document.getElementById("loadOlderMessages").addEventListener("click", () => { void loadOlderMessages(); });
|
|
document.getElementById("loadLatestMessages").addEventListener("click", () => { void setActiveChat(conversation.activeChatId); });
|
|
resizeComposerInput();
|
|
newChatBtn.addEventListener("click", () => {
|
|
closeChatDrawer();
|
|
closeMobileSidebar();
|
|
void createNewChat();
|
|
});
|
|
if (backupWorkspaceBtn) backupWorkspaceBtn.addEventListener("click", () => {
|
|
closeChatDrawer();
|
|
void backupWorkspace();
|
|
});
|
|
if (importWorkspaceBtn) importWorkspaceBtn.addEventListener("click", () => {
|
|
closeChatDrawer();
|
|
importWorkspaceFileInput.value = "";
|
|
importWorkspaceFileInput.click();
|
|
});
|
|
if (importWorkspaceFileInput) importWorkspaceFileInput.addEventListener("change", () => {
|
|
void importWorkspaceFromFile(importWorkspaceFileInput.files?.[0]);
|
|
});
|
|
chatSearchInput.addEventListener("input", scheduleChatSearch);
|
|
modelSelect.addEventListener("change", () => {
|
|
renderModelSection();
|
|
void saveSelectedModel();
|
|
});
|
|
if (headerModelButton) headerModelButton.addEventListener("click", (event) => {
|
|
event.stopPropagation();
|
|
openModelSettings();
|
|
});
|
|
saveGenerationSettingsBtn.addEventListener("click", () => { void saveGenerationSettings(); });
|
|
roleplayNewPersonaBtn.addEventListener("click", closeRoleplayStarter);
|
|
if (clearUserPersonaBtn) clearUserPersonaBtn.addEventListener("click", () => {
|
|
closeChatDrawer();
|
|
void clearChatUserPersona();
|
|
});
|
|
personaForm.addEventListener("submit", (event) => { event.preventDefault(); void savePersona(); }); personaCloseBtn.addEventListener("click", closePersonaForm);
|
|
personaTypeSelect.addEventListener("change", () => {
|
|
const isAssistant = personaTypeSelect.value === "assistant";
|
|
personaExamplesField.classList.toggle("hidden", !isAssistant);
|
|
if (!isAssistant) personaExampleDialoguesInput.value = "";
|
|
});
|
|
personaModal.addEventListener("click", (event) => { if (event.target === personaModal) closePersonaForm(); });
|
|
roleplayStarterClose.addEventListener("click", closeRoleplayStarter);
|
|
roleplayStarterCancel.addEventListener("click", closeRoleplayStarter);
|
|
if (roleplayStarterBack) {
|
|
roleplayStarterBack.addEventListener("click", () => {
|
|
conversation.roleplayStarterStep = 1;
|
|
setRoleplayStarterNotice("");
|
|
renderRoleplayStarterStep();
|
|
roleplayCharacterSelect.focus();
|
|
});
|
|
}
|
|
roleplayStarterConfirm.addEventListener("click", () => { void startRoleplay(); });
|
|
roleplayCharacterSelect.addEventListener("change", updateRoleplaySuggestions);
|
|
roleplayUserPersonaSelect.addEventListener("change", updateRoleplaySuggestions);
|
|
roleplayStarterModal.addEventListener("click", (event) => { if (event.target === roleplayStarterModal) closeRoleplayStarter(); });
|
|
popupConfirmBtn.addEventListener("click", () => {
|
|
if (popupMode === "prompt") {
|
|
closePopup(popupInput.value);
|
|
return;
|
|
}
|
|
closePopup(true);
|
|
});
|
|
popupCancelBtn.addEventListener("click", () => closePopup(false));
|
|
popupCloseBtn.addEventListener("click", () => closePopup(false));
|
|
popupModal.addEventListener("click", (event) => { if (event.target === popupModal) closePopup(false); });
|
|
popupInput.addEventListener("keydown", (event) => {
|
|
if (event.key === "Enter") {
|
|
event.preventDefault();
|
|
closePopup(popupInput.value);
|
|
}
|
|
});
|
|
bindChatDrawerActions();
|
|
if (chatSidebar) chatSidebar.inert = isMobileLayout();
|
|
if (chatSidebar) {
|
|
chatSidebar.addEventListener("click", (event) => event.stopPropagation());
|
|
}
|
|
document.getElementById("chatSidebarBackdrop")?.addEventListener("click", closeMobileSidebar);
|
|
if (chatSidebarToggle) {
|
|
chatSidebarToggle.addEventListener("click", (event) => {
|
|
event.stopPropagation();
|
|
if (document.body.classList.contains("sidebar-open")) {
|
|
closeMobileSidebar();
|
|
return;
|
|
}
|
|
openMobileSidebar();
|
|
});
|
|
}
|
|
if (onboardingContinue) {
|
|
onboardingContinue.addEventListener("click", () => {
|
|
onboardingStep = 2;
|
|
renderOnboardingStep();
|
|
onboardingChoices.querySelector("button")?.focus();
|
|
});
|
|
}
|
|
if (onboardingBack) {
|
|
onboardingBack.addEventListener("click", () => {
|
|
onboardingStep = 1;
|
|
renderOnboardingStep();
|
|
(onboardingChoices.querySelector(".active") || onboardingChoices.querySelector("button"))?.focus();
|
|
});
|
|
}
|
|
if (onboardingSkip) {
|
|
onboardingSkip.addEventListener("click", markOnboardingCompleted);
|
|
}
|
|
if (onboardingModal) {
|
|
onboardingModal.addEventListener("click", (event) => {
|
|
if (event.target === onboardingModal) markOnboardingCompleted();
|
|
});
|
|
}
|
|
document.addEventListener("click", (event) => {
|
|
if (!event.target.closest(".msg-action-menu")) {
|
|
document.querySelectorAll(".msg-action-menu[open]").forEach((menu) => { menu.open = false; });
|
|
}
|
|
closeMobileSidebar();
|
|
});
|
|
window.addEventListener("resize", () => {
|
|
if (!isMobileLayout()) closeMobileSidebar();
|
|
if (chatSidebar) chatSidebar.inert = isMobileLayout() && !document.body.classList.contains("sidebar-open");
|
|
});
|
|
document.addEventListener("keydown", (event) => {
|
|
if (event.key === "Tab" && isMobileLayout() && document.body.classList.contains("sidebar-open")) {
|
|
const focusables = [...chatSidebar.querySelectorAll('button:not([disabled]), input:not([disabled]), [tabindex="0"]')]
|
|
.filter((element) => !element.hidden && !element.closest("[hidden]"));
|
|
const first = focusables[0], last = focusables.at(-1);
|
|
if (event.shiftKey && (document.activeElement === first || !chatSidebar.contains(document.activeElement))) {
|
|
event.preventDefault(); last?.focus();
|
|
} else if (!event.shiftKey && (document.activeElement === last || !chatSidebar.contains(document.activeElement))) {
|
|
event.preventDefault(); first?.focus();
|
|
}
|
|
}
|
|
if (event.key === "Escape") {
|
|
const activeModal = topModal();
|
|
if (activeModal) {
|
|
event.preventDefault();
|
|
if (activeModal === popupModal) closePopup(false);
|
|
else if (activeModal === personaModal) closePersonaForm();
|
|
else if (activeModal === roleplayStarterModal) closeRoleplayStarter();
|
|
else if (activeModal === onboardingModal) closeOnboarding();
|
|
else closeModal(activeModal);
|
|
return;
|
|
}
|
|
const openMenu = document.querySelector(".msg-action-menu[open]");
|
|
if (openMenu) {
|
|
openMenu.open = false;
|
|
openMenu.querySelector("summary")?.focus();
|
|
}
|
|
closeMobileSidebar();
|
|
closeRoleplayStarter();
|
|
closePersonaForm();
|
|
closePopup(false);
|
|
closeOnboarding();
|
|
}
|
|
});
|
|
window.addEventListener("load", async () => {
|
|
const appearance = readStoredAppearance();
|
|
applyTheme(appearance.theme, false);
|
|
applyThemeMode(appearance.mode, false);
|
|
applyWorkspaceMode(localStorage.getItem("krishd-workspace-mode") || "basic", false);
|
|
setNotice("Ready.");
|
|
updateChatActionState();
|
|
updateSendState();
|
|
await checkSession();
|
|
});
|