Fix admin authorization and harden chat requests
This commit is contained in:
@@ -0,0 +1,342 @@
|
||||
import {messagesDiv, msgInput} from "./dom.js?v=20260909-account-controls";
|
||||
import {appendAttachments} from "./attachments.js?v=20260930-chat-usability";
|
||||
import {updateReasoning} from "./reasoning.js?v=20260921-reasoning-capability";
|
||||
import {appendSources} from "./webSearch.js";
|
||||
|
||||
export function createMessageRenderer({
|
||||
getChatById,
|
||||
state,
|
||||
setNotice,
|
||||
sendMessage,
|
||||
editChatMessage,
|
||||
deleteChatMessage,
|
||||
branchFromMessage,
|
||||
retryLatestAssistantMessage,
|
||||
switchResponseVersion,
|
||||
switchRetryVariant,
|
||||
renderDrawerSummary,
|
||||
updateChatActionState,
|
||||
updateComposerPlaceholder,
|
||||
createNewChat,
|
||||
openRoleplayStarter,
|
||||
openPersonaForm
|
||||
}) {
|
||||
const jumpToLatest = document.getElementById("jumpToLatest");
|
||||
|
||||
let scrollFrame = null;
|
||||
|
||||
let renderedChatId = null;
|
||||
|
||||
let renderedMessages = new Map();
|
||||
|
||||
function setMessageContent(el, content) {
|
||||
const markdownParser = window.marked;
|
||||
const purifier = window.DOMPurify;
|
||||
if (markdownParser?.parse && purifier?.sanitize) {
|
||||
el.innerHTML = purifier.sanitize(markdownParser.parse(content, { breaks: true }));
|
||||
} else {
|
||||
el.textContent = content;
|
||||
}
|
||||
}
|
||||
|
||||
function scrollMessagesToBottom() {
|
||||
if (scrollFrame !== null) cancelAnimationFrame(scrollFrame);
|
||||
scrollFrame = requestAnimationFrame(() => {
|
||||
scrollFrame = null;
|
||||
messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
||||
updateJumpToLatest();
|
||||
});
|
||||
}
|
||||
|
||||
function updateJumpToLatest() {
|
||||
const distance = messagesDiv.scrollHeight - messagesDiv.scrollTop - messagesDiv.clientHeight;
|
||||
jumpToLatest.classList.toggle("hidden", distance < 180);
|
||||
}
|
||||
|
||||
function addMessage(contentOrMessage, isUser = false, isLoading = false, options = {}) {
|
||||
const msgDiv = document.createElement("div");
|
||||
msgDiv.className = `msg ${isUser ? "user" : "bot"}${isLoading ? " loading" : ""}`;
|
||||
msgDiv.setAttribute("role", "article");
|
||||
msgDiv.tabIndex = 0;
|
||||
if (isLoading) {
|
||||
msgDiv.setAttribute("aria-label", "Assistant is responding");
|
||||
msgDiv.innerHTML = `
|
||||
<div class="msg-header">Assistant</div>
|
||||
<div class="loading-shell" aria-live="polite" aria-label="Assistant is responding">
|
||||
<div class="loading-bars">
|
||||
<span class="loading-bar"></span>
|
||||
<span class="loading-bar"></span>
|
||||
<span class="loading-bar"></span>
|
||||
<span class="loading-bar"></span>
|
||||
</div>
|
||||
<div class="loading-copy">
|
||||
<strong>Thinking</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg-content streaming-content"></div>`;
|
||||
} else {
|
||||
const message = typeof contentOrMessage === "object" && contentOrMessage
|
||||
? contentOrMessage
|
||||
: { id: null, role: isUser ? "user" : "bot", content: String(contentOrMessage || "") };
|
||||
const isMessageUser = message.role === "user";
|
||||
msgDiv.dataset.messageId = message.id;
|
||||
msgDiv.className = `msg ${isMessageUser ? "user" : "bot"}`;
|
||||
msgDiv.setAttribute("aria-label", isMessageUser ? "Your message" : "Assistant message");
|
||||
const header = document.createElement("div"), body = document.createElement("div"), actions = document.createElement("div");
|
||||
header.className = "msg-header"; body.className = "msg-content";
|
||||
actions.className = "msg-actions";
|
||||
actions.setAttribute("aria-label", "Message actions");
|
||||
const activeChat = getChatById(state.activeChatId);
|
||||
header.textContent = isMessageUser ? "You" : (activeChat?.assistant_persona_name || "Assistant");
|
||||
setMessageContent(body, message.content);
|
||||
|
||||
const copyBtn = document.createElement("button");
|
||||
copyBtn.type = "button";
|
||||
copyBtn.className = "msg-action-btn";
|
||||
copyBtn.textContent = "Copy";
|
||||
copyBtn.setAttribute("aria-label", `Copy ${isMessageUser ? "your" : "assistant"} message`);
|
||||
copyBtn.addEventListener("click", async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(message.content || "");
|
||||
setNotice("Message copied.", "success");
|
||||
} catch {
|
||||
setNotice("Unable to copy message.", "error");
|
||||
}
|
||||
});
|
||||
actions.appendChild(copyBtn);
|
||||
|
||||
if (message.deliveryStatus === "failed" && isMessageUser) {
|
||||
const retryFailedBtn = document.createElement("button");
|
||||
retryFailedBtn.type = "button";
|
||||
retryFailedBtn.className = "msg-action-btn";
|
||||
retryFailedBtn.dataset.messageAction = "retry-failed";
|
||||
retryFailedBtn.textContent = "Retry";
|
||||
retryFailedBtn.disabled = state.isProcessing;
|
||||
retryFailedBtn.addEventListener("click", () => { void sendMessage({ retryMessage: message }); });
|
||||
actions.appendChild(retryFailedBtn);
|
||||
}
|
||||
|
||||
const menu = document.createElement("details");
|
||||
menu.className = "msg-action-menu";
|
||||
const menuTrigger = document.createElement("summary");
|
||||
menuTrigger.className = "msg-action-btn";
|
||||
menuTrigger.textContent = "More";
|
||||
menuTrigger.setAttribute("aria-label", "More message actions");
|
||||
const menuItems = document.createElement("div");
|
||||
menuItems.className = "msg-action-menu-items";
|
||||
menuItems.addEventListener("click", () => { menu.open = false; });
|
||||
menu.append(menuTrigger, menuItems);
|
||||
if (message.id) actions.appendChild(menu);
|
||||
|
||||
const editBtn = document.createElement("button");
|
||||
editBtn.type = "button";
|
||||
editBtn.className = "msg-action-btn";
|
||||
editBtn.textContent = isMessageUser ? "Edit & resend" : "Edit";
|
||||
editBtn.setAttribute("aria-label", `Edit ${isMessageUser ? "your" : "assistant"} message`);
|
||||
editBtn.addEventListener("click", () => {
|
||||
void editChatMessage(message.id, options.messageIndex ?? -1);
|
||||
});
|
||||
menuItems.appendChild(editBtn);
|
||||
|
||||
const deleteBtn = document.createElement("button");
|
||||
deleteBtn.type = "button";
|
||||
deleteBtn.className = "msg-action-btn";
|
||||
deleteBtn.textContent = "Delete";
|
||||
deleteBtn.setAttribute("aria-label", `Delete ${isMessageUser ? "your" : "assistant"} message`);
|
||||
deleteBtn.addEventListener("click", () => {
|
||||
void deleteChatMessage(message.id, options.messageIndex ?? -1);
|
||||
});
|
||||
menuItems.appendChild(deleteBtn);
|
||||
|
||||
const branchBtn = document.createElement("button");
|
||||
branchBtn.type = "button";
|
||||
branchBtn.className = "msg-action-btn";
|
||||
branchBtn.textContent = "Branch here";
|
||||
branchBtn.addEventListener("click", () => { void branchFromMessage(message.id); });
|
||||
menuItems.appendChild(branchBtn);
|
||||
|
||||
if (message.role === "bot") {
|
||||
const retriesUsed = Math.max(0, Number(message.versionCount || 1) - 1);
|
||||
const retryBtn = document.createElement("button");
|
||||
retryBtn.type = "button";
|
||||
retryBtn.className = "msg-action-btn";
|
||||
retryBtn.dataset.messageAction = "regenerate";
|
||||
retryBtn.dataset.retryLimitReached = String(retriesUsed >= 5);
|
||||
retryBtn.textContent = `Regenerate (${retriesUsed}/5)`;
|
||||
retryBtn.setAttribute("aria-label", `Regenerate assistant message, ${retriesUsed} of 5 retries used`);
|
||||
retryBtn.disabled = retriesUsed >= 5 || state.isProcessing;
|
||||
retryBtn.addEventListener("click", () => {
|
||||
void retryLatestAssistantMessage(message.id, options.messageIndex ?? -1);
|
||||
});
|
||||
actions.appendChild(retryBtn);
|
||||
}
|
||||
|
||||
for (const versioned of [true, false]) {
|
||||
if (Number((versioned ? message.versionCount : message.siblingCount) || 1) <= 1) continue;
|
||||
const navigate = versioned ? switchResponseVersion : switchRetryVariant;
|
||||
const prevBtn = document.createElement("button");
|
||||
prevBtn.type = "button";
|
||||
prevBtn.className = "msg-action-btn";
|
||||
prevBtn.textContent = "Prev";
|
||||
prevBtn.setAttribute("aria-label", versioned ? "Show previous response version" : "Show previous branch");
|
||||
prevBtn.disabled = versioned ? message.versionIndex <= 0 : !message.previousSiblingId;
|
||||
prevBtn.addEventListener("click", () => {
|
||||
void navigate(message.id, -1, options.messageIndex ?? -1);
|
||||
});
|
||||
|
||||
const nextBtn = document.createElement("button");
|
||||
nextBtn.type = "button";
|
||||
nextBtn.className = "msg-action-btn";
|
||||
nextBtn.textContent = "Next";
|
||||
nextBtn.setAttribute("aria-label", versioned ? "Show next response version" : "Show next branch");
|
||||
nextBtn.disabled = versioned ? message.versionIndex >= message.versionCount - 1 : !message.nextSiblingId;
|
||||
nextBtn.addEventListener("click", () => {
|
||||
void navigate(message.id, 1, options.messageIndex ?? -1);
|
||||
});
|
||||
|
||||
const indexBadge = document.createElement("span");
|
||||
indexBadge.className = "msg-variant-index";
|
||||
indexBadge.textContent = versioned ? `${message.versionIndex + 1} / ${message.versionCount}` : `${Number(message.siblingIndex || 0) + 1}/${message.siblingCount}`;
|
||||
actions.append(prevBtn, indexBadge, nextBtn);
|
||||
}
|
||||
|
||||
msgDiv.append(header);
|
||||
appendAttachments(msgDiv, message.attachments);
|
||||
msgDiv.append(body);
|
||||
if (!isMessageUser) updateReasoning(msgDiv, message.thinking);
|
||||
if (!isMessageUser) appendSources(msgDiv, message.sources);
|
||||
if (message.deliveryStatus === "failed" && message.errorMessage) {
|
||||
const error = document.createElement("p");
|
||||
error.className = "status error";
|
||||
error.textContent = message.errorMessage;
|
||||
msgDiv.appendChild(error);
|
||||
}
|
||||
if (actions.childElementCount) {
|
||||
msgDiv.appendChild(actions);
|
||||
}
|
||||
}
|
||||
if (!options.detached) {
|
||||
messagesDiv.appendChild(msgDiv);
|
||||
scrollMessagesToBottom();
|
||||
}
|
||||
return msgDiv;
|
||||
}
|
||||
|
||||
function renderMessages() {
|
||||
if (scrollFrame !== null) { cancelAnimationFrame(scrollFrame); scrollFrame = null; }
|
||||
const sameChat = renderedChatId === state.activeChatId;
|
||||
const wasReadingEarlier = sameChat && messagesDiv.scrollHeight - messagesDiv.scrollTop - messagesDiv.clientHeight >= 100;
|
||||
const previousScrollTop = messagesDiv.scrollTop;
|
||||
const chat = getChatById(state.activeChatId);
|
||||
if (!state.currentMessages.length && (!chat || chat.assistant_persona_id)) {
|
||||
messagesDiv.replaceChildren();
|
||||
renderMessageEmptyState();
|
||||
renderedMessages = new Map();
|
||||
} else {
|
||||
const fragment = document.createDocumentFragment();
|
||||
const nextRendered = new Map();
|
||||
state.currentMessages.forEach((msg, index) => {
|
||||
const key = msg.id ? String(msg.id) : null;
|
||||
const snapshot = JSON.stringify(msg);
|
||||
const previous = sameChat && key ? renderedMessages.get(key) : null;
|
||||
const card = previous?.snapshot === snapshot && previous.node.isConnected
|
||||
? previous.node
|
||||
: addMessage(msg, msg.role === "user", false, {
|
||||
messageIndex: index,
|
||||
isNewest: index === state.currentMessages.length - 1,
|
||||
detached: true
|
||||
});
|
||||
fragment.append(card);
|
||||
if (key) nextRendered.set(key, {snapshot, node: card});
|
||||
});
|
||||
messagesDiv.replaceChildren(fragment);
|
||||
renderedMessages = nextRendered;
|
||||
}
|
||||
renderedChatId = state.activeChatId;
|
||||
renderDrawerSummary();
|
||||
updateChatActionState();
|
||||
updateComposerPlaceholder();
|
||||
if (wasReadingEarlier) {
|
||||
messagesDiv.scrollTop = previousScrollTop;
|
||||
updateJumpToLatest();
|
||||
} else if (state.currentMessages.length) {
|
||||
scrollMessagesToBottom();
|
||||
} else {
|
||||
updateJumpToLatest();
|
||||
}
|
||||
}
|
||||
|
||||
function createStarterAction(label, className, handler) {
|
||||
const button = document.createElement("button");
|
||||
button.type = "button";
|
||||
button.className = className;
|
||||
button.textContent = label;
|
||||
button.addEventListener("click", handler);
|
||||
return button;
|
||||
}
|
||||
|
||||
function createMessageStarterPrompt(label, prompt) {
|
||||
return createStarterAction(label, "secondary-action", async () => {
|
||||
if (!state.activeChatId) await createNewChat();
|
||||
msgInput.value = prompt;
|
||||
msgInput.dispatchEvent(new Event("input"));
|
||||
msgInput.focus();
|
||||
});
|
||||
}
|
||||
|
||||
function renderMessageEmptyState() {
|
||||
const empty = document.createElement("section");
|
||||
const title = document.createElement("h3");
|
||||
const description = document.createElement("p");
|
||||
const actions = document.createElement("div");
|
||||
const chat = getChatById(state.activeChatId);
|
||||
|
||||
empty.className = "messages-empty";
|
||||
title.className = "messages-empty-title";
|
||||
description.className = "messages-empty-copy";
|
||||
actions.className = "messages-empty-actions";
|
||||
|
||||
if (!chat) {
|
||||
title.textContent = "Where shall we start?";
|
||||
description.textContent = "Choose a starting point.";
|
||||
actions.append(
|
||||
createStarterAction("New chat", "primary-action", () => { void createNewChat(); }),
|
||||
createStarterAction("Roleplay", "secondary-action", () => {
|
||||
if (state.assistantPersonas.length) {
|
||||
openRoleplayStarter();
|
||||
return;
|
||||
}
|
||||
openPersonaForm(null, "assistant");
|
||||
}),
|
||||
createMessageStarterPrompt("Try a prompt", "Help me plan my day in 3 steps.")
|
||||
);
|
||||
} else if (chat.assistant_persona_id) {
|
||||
title.textContent = "Roleplay is ready";
|
||||
description.textContent = "Send a line or pick a prompt.";
|
||||
actions.append(
|
||||
createMessageStarterPrompt("Add tension", "Open with a tense line that raises the stakes immediately."),
|
||||
createMessageStarterPrompt("Set the scene", "Describe what your character notices first in this scene."),
|
||||
createStarterAction("Change setup", "secondary-action", () => openRoleplayStarter())
|
||||
);
|
||||
} else {
|
||||
title.textContent = "What can I help with?";
|
||||
description.textContent = "Write a message below or start with one of these prompts.";
|
||||
actions.append(
|
||||
createMessageStarterPrompt("Explain something", "Explain this topic in simple terms: "),
|
||||
createMessageStarterPrompt("Plan a task", "Help me make a practical step-by-step plan for: "),
|
||||
createMessageStarterPrompt("Brainstorm ideas", "Give me several creative ideas for: ")
|
||||
);
|
||||
}
|
||||
|
||||
empty.append(title, description, actions);
|
||||
messagesDiv.appendChild(empty);
|
||||
}
|
||||
|
||||
return {
|
||||
setMessageContent,
|
||||
scrollMessagesToBottom,
|
||||
updateJumpToLatest,
|
||||
addMessage,
|
||||
renderMessages
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user