Fretux/KrisHD_AI
3
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix more stuff and improve styling immensely

Browse Source
This commit is contained in:
fretuks
2026-06-09 12:01:42 +02:00
parent f8d1c5370d
commit 58df321d8d
15 changed files with 1594 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/api.js
+14 -1
View File
@@ -2,6 +2,7 @@ export async function request(url, data, method = "POST") {
try {
const res = await fetch(url, {
method,
credentials: "same-origin",
headers: {"Content-Type": "application/json"},
body: data ? JSON.stringify(data) : undefined
});
@@ -19,12 +20,24 @@ export const del = (url) => request(url, null, "DELETE");
export async function stream(url, data, handlers = {}) {
const response = await fetch(url, {
method: "POST",
credentials: "same-origin",
headers: {"Content-Type": "application/json"},
body: JSON.stringify(data || {})
});
if (!response.ok || !response.body) {
throw new Error("Streaming request failed");
let error = "Streaming request failed";
try {
const payload = await response.json();
error = payload.error || error;
} catch {
// Keep the generic error if the server did not send JSON.
}
if (handlers.onError) {
handlers.onError({error});
return;
}
throw new Error(error);
}
const reader = response.body.getReader();
public/app/chatDrawer.js
+52 -2
View File
@@ -1,11 +1,41 @@
import {chatDrawer, chatDrawerButton, chatDrawerCloseBtn} from "./dom.js";
let lastFocusedElement = null;
const focusableSelector = [
"a[href]",
"button:not([disabled])",
"textarea:not([disabled])",
"input:not([disabled])",
"select:not([disabled])",
"summary",
"[tabindex]:not([tabindex='-1'])"
].join(",");
function getFocusableElements() {
if (!chatDrawer) return [];
return Array.from(chatDrawer.querySelectorAll(focusableSelector))
.filter((element) => element instanceof HTMLElement && element.offsetParent !== null);
}
function syncChatDrawerState(isOpen) {
if (!chatDrawer || !chatDrawerButton) return;
if (isOpen) document.body.classList.remove("sidebar-open");
if (isOpen) {
lastFocusedElement = document.activeElement instanceof HTMLElement ? document.activeElement : null;
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);
if (isOpen) {
window.requestAnimationFrame(() => {
const firstFocusable = getFocusableElements()[0];
(chatDrawerCloseBtn || firstFocusable)?.focus();
});
} else if (lastFocusedElement) {
lastFocusedElement.focus();
lastFocusedElement = null;
}
}
function isChatDrawerOpen() {
@@ -34,7 +64,27 @@ function handleDocumentClick(event) {
}
function handleDocumentKeydown(event) {
if (event.key === "Escape") closeChatDrawer();
if (!isChatDrawerOpen()) return;
if (event.key === "Escape") {
closeChatDrawer();
return;
}
if (event.key !== "Tab") return;
const focusableElements = getFocusableElements();
if (!focusableElements.length) return;
const first = focusableElements[0];
const last = focusableElements[focusableElements.length - 1];
if (event.shiftKey && document.activeElement === first) {
event.preventDefault();
last.focus();
return;
}
if (!event.shiftKey && document.activeElement === last) {
event.preventDefault();
first.focus();
}
}
if (chatDrawerButton && chatDrawer) {
public/app/dom.js
+2
View File
@@ -26,6 +26,7 @@ const registerSubmit = $("registerSubmit");
const chatList = $("chatList");
const chatSearchInput = $("chatSearch");
const chatSidebar = $("chatSidebar");
const chatSidebarToggle = $("chatSidebarToggle");
const chatDrawerCloseBtn = $("chatDrawerClose");
const chatDrawerButton = $("chatDrawerButton");
const chatDrawer = $("chatDrawer");
@@ -123,6 +124,7 @@ export {
chatListLoading,
chatListLoadingText,
chatSidebar,
chatSidebarToggle,
chatDrawerCloseBtn,
chatSearchInput,
chatUserPersonaPill,
public/index.html
+7 -5
View File
@@ -68,9 +68,9 @@
</div>
</section>
<section id="chat" class="card chat-card chat-focus-card" style="display:none;">
<section id="chat" class="card chat-card chat-focus-card" aria-label="AI chat workspace" style="display:none;">
<div class="chat-layout chat-layout-focus">
<aside id="chatSidebar" class="chat-sidebar">
<aside id="chatSidebar" class="chat-sidebar" aria-label="Workspace navigation">
<div class="sidebar-top">
<div class="sidebar-workspace-card">
<div>
@@ -100,8 +100,9 @@
</div>
</aside>
<section class="chat-main chat-main-focus">
<section class="chat-main chat-main-focus" aria-label="Active conversation">
<header class="chat-header chat-header-focus">
<button id="chatSidebarToggle" class="icon-button sidebar-toggle" type="button" aria-controls="chatSidebar" aria-expanded="false" aria-label="Open chat sidebar">Menu</button>
<div class="chat-title-block">
<div class="chat-title">
<h2 id="activeChatTitle">New chat</h2>
@@ -112,7 +113,7 @@
<button id="chatDrawerButton" class="secondary-action overflow-trigger" type="button" aria-expanded="false" aria-controls="chatDrawer">
<span class="overflow-trigger-label">Controls</span>
</button>
<div id="chatDrawer" class="chat-drawer hidden" role="dialog" aria-modal="false" aria-labelledby="chatDrawerTitle">
<div id="chatDrawer" class="chat-drawer hidden" role="dialog" aria-modal="true" aria-labelledby="chatDrawerTitle">
<div class="chat-drawer-panel">
<div class="chat-drawer-header">
<div>
@@ -242,13 +243,14 @@
</div>
</div>
<div id="messages" class="messages-panel messages-panel-focus"></div>
<div id="messages" class="messages-panel messages-panel-focus" role="log" aria-live="polite" aria-relevant="additions text"></div>
<div class="input-shell input-shell-focus">
<div class="input-meta">
<p class="composer-hint">Enter to send · Shift+Enter for new line</p>
</div>
<div class="input-container">
<label class="visually-hidden" for="msgInput">Message</label>
<textarea id="msgInput" rows="1" placeholder="Type your message..."></textarea>
<button id="send" type="button" aria-label="Send message"></button>
</div>
public/market.html
+5 -5
View File
@@ -31,13 +31,13 @@
<p id="marketStatus" class="status persona-status">Loading market personas...</p>
<section class="settings-layout market-settings-layout">
<aside class="settings-nav" aria-label="Market sections">
<button class="settings-nav-item active" type="button" data-market-view="ai-characters">Characters</button>
<button class="settings-nav-item" type="button" data-market-view="user-personas">User personas</button>
<aside class="settings-nav" aria-label="Market sections" role="tablist">
<button class="settings-nav-item active" type="button" role="tab" aria-selected="true" data-market-view="ai-characters">Characters</button>
<button class="settings-nav-item" type="button" role="tab" aria-selected="false" data-market-view="user-personas">User personas</button>
</aside>
<div class="settings-content">
<section class="settings-view active" data-market-panel="ai-characters">
<section class="settings-view active" role="tabpanel" data-market-panel="ai-characters">
<div class="settings-panel">
<div class="settings-section-header">
<div>
@@ -63,7 +63,7 @@
</div>
</section>
<section class="settings-view" data-market-panel="user-personas">
<section class="settings-view" role="tabpanel" aria-hidden="true" data-market-panel="user-personas">
<div class="settings-panel">
<div class="settings-section-header">
<div>
public/market.js
+11 -2
View File
@@ -82,6 +82,7 @@ async function request(url, data, method = "POST") {
try {
const res = await fetch(url, {
method,
credentials: "same-origin",
headers: {"Content-Type": "application/json"},
body: data ? JSON.stringify(data) : undefined
});
@@ -183,8 +184,16 @@ function setMarketActivity(active, {
function setMarketView(view) {
const normalizedView = view === "user-personas" ? "user-personas" : "ai-characters";
activeMarketView = normalizedView;
marketViewButtons.forEach((item) => item.classList.toggle("active", item.dataset.marketView === normalizedView));
marketPanels.forEach((panel) => panel.classList.toggle("active", panel.dataset.marketPanel === normalizedView));
marketViewButtons.forEach((item) => {
const isActive = item.dataset.marketView === normalizedView;
item.classList.toggle("active", isActive);
item.setAttribute("aria-selected", String(isActive));
});
marketPanels.forEach((panel) => {
const isActive = panel.dataset.marketPanel === normalizedView;
panel.classList.toggle("active", isActive);
panel.setAttribute("aria-hidden", String(!isActive));
});
syncMarketQuery();
applyMarketFilter();
}
public/script.js
+51 -2
View File
@@ -18,6 +18,7 @@ import {
chatListLoading,
chatListLoadingText,
chatSidebar,
chatSidebarToggle,
chatSearchInput,
chatUserPersonaPill,
clearChatBtn,
@@ -179,6 +180,13 @@ function isMobileLayout() {
function closeMobileSidebar() {
if (!chatSidebar) return;
document.body.classList.remove("sidebar-open");
if (chatSidebarToggle) chatSidebarToggle.setAttribute("aria-expanded", "false");
}
function openMobileSidebar() {
if (!chatSidebar) return;
document.body.classList.add("sidebar-open");
if (chatSidebarToggle) chatSidebarToggle.setAttribute("aria-expanded", "true");
}
function hasCompletedOnboarding() {
@@ -541,7 +549,10 @@ async function switchRetryVariant(messageId, direction, fallbackIndex = -1) {
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="loading-shell" aria-live="polite" aria-label="Assistant is responding">
<div class="loading-bars">
@@ -560,9 +571,11 @@ function addMessage(contentOrMessage, isUser = false, isLoading = false, options
: {id: null, role: isUser ? "user" : "bot", content: String(contentOrMessage || "")};
const isMessageUser = message.role === "user";
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(activeChatId);
header.textContent = isMessageUser ? "You" : (activeChat?.assistant_persona_name || "Assistant");
setMessageContent(body, message.content);
@@ -571,6 +584,7 @@ function addMessage(contentOrMessage, isUser = false, isLoading = false, options
editBtn.type = "button";
editBtn.className = "msg-action-btn";
editBtn.textContent = "Edit";
editBtn.setAttribute("aria-label", `Edit ${isMessageUser ? "your" : "assistant"} message`);
editBtn.addEventListener("click", () => {
void editChatMessage(message.id, options.messageIndex ?? -1);
});
@@ -580,6 +594,7 @@ function addMessage(contentOrMessage, isUser = false, isLoading = false, options
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);
});
@@ -591,6 +606,7 @@ function addMessage(contentOrMessage, isUser = false, isLoading = false, options
retryBtn.type = "button";
retryBtn.className = "msg-action-btn";
retryBtn.textContent = `Retry (${state.retriesUsed}/5)`;
retryBtn.setAttribute("aria-label", `Retry assistant message, ${state.retriesUsed} of 5 retries used`);
retryBtn.disabled = state.retriesUsed >= 5 || isProcessing;
retryBtn.addEventListener("click", () => {
void retryLatestAssistantMessage(message.id, options.messageIndex ?? -1);
@@ -602,6 +618,7 @@ function addMessage(contentOrMessage, isUser = false, isLoading = false, options
prevBtn.type = "button";
prevBtn.className = "msg-action-btn";
prevBtn.textContent = "Prev";
prevBtn.setAttribute("aria-label", "Show previous retry variant");
prevBtn.disabled = state.activeIndex <= 0;
prevBtn.addEventListener("click", () => {
void switchRetryVariant(message.id, -1, options.messageIndex ?? -1);
@@ -611,6 +628,7 @@ function addMessage(contentOrMessage, isUser = false, isLoading = false, options
nextBtn.type = "button";
nextBtn.className = "msg-action-btn";
nextBtn.textContent = "Next";
nextBtn.setAttribute("aria-label", "Show next retry variant");
nextBtn.disabled = state.activeIndex >= state.variants.length - 1;
nextBtn.addEventListener("click", () => {
void switchRetryVariant(message.id, 1, options.messageIndex ?? -1);
@@ -935,10 +953,15 @@ function renderChatList() {
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("div"), title = document.createElement("span"), meta = document.createElement("small"), remove = document.createElement("button");
item.className = `chat-item${chat.id === activeChatId ? " active" : ""}`;
item.setAttribute("role", "button");
item.tabIndex = 0;
item.setAttribute("aria-label", `Open chat ${chat.title}`);
if (chat.id === activeChatId) item.setAttribute("aria-current", "page");
content.className = "chat-item-copy";
title.textContent = chat.title;
meta.className = "chat-item-meta";
@@ -946,14 +969,25 @@ function renderChatList() {
? `Roleplay${chat.user_persona_name ? ` · ${chat.user_persona_name}` : ""}`
: "Assistant chat";
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();
await deleteChat(chat.id);
});
content.append(title, meta);
item.append(content, remove);
item.addEventListener("click", () => setActiveChat(chat.id));
item.addEventListener("click", () => {
closeMobileSidebar();
setActiveChat(chat.id);
});
item.addEventListener("keydown", (event) => {
if (event.key !== "Enter" && event.key !== " ") return;
event.preventDefault();
closeMobileSidebar();
void setActiveChat(chat.id);
});
list.appendChild(item);
});
chatList.appendChild(section);
@@ -1356,7 +1390,12 @@ async function startRoleplay() {
closeRoleplayStarter();
await loadChatSessions();
await setActiveChat(res.chat.id);
setNotice(res.generatedInitialMessage ? "Roleplay started with a fresh scene." : "Roleplay reopened.", "success");
setNotice(
res.degraded
? "Roleplay started, but the opening scene timed out. Send the first message to continue."
: res.generatedInitialMessage ? "Roleplay started with a fresh scene." : "Roleplay reopened.",
res.degraded ? "error" : "success"
);
setChatLoading(false);
setChatActivity(false);
}
@@ -1711,6 +1750,16 @@ bindChatDrawerActions();
if (chatSidebar) {
chatSidebar.addEventListener("click", (event) => event.stopPropagation());
}
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;
public/settings.html
+7 -7
View File
@@ -25,14 +25,14 @@
<p id="settingsNotice" class="status">Loading settings...</p>
<section class="settings-layout">
<aside class="settings-nav" aria-label="Settings sections">
<button class="settings-nav-item active" type="button" data-settings-view="personal">Account</button>
<button class="settings-nav-item" type="button" data-settings-view="my-roleplay-companions">Personas</button>
<button class="settings-nav-item" type="button" data-settings-view="design">Appearance</button>
<aside class="settings-nav" aria-label="Settings sections" role="tablist">
<button class="settings-nav-item active" type="button" role="tab" aria-selected="true" data-settings-view="personal">Account</button>
<button class="settings-nav-item" type="button" role="tab" aria-selected="false" data-settings-view="my-roleplay-companions">Personas</button>
<button class="settings-nav-item" type="button" role="tab" aria-selected="false" data-settings-view="design">Appearance</button>
</aside>
<div class="settings-content">
<section class="settings-view active" data-settings-panel="personal">
<section class="settings-view active" role="tabpanel" data-settings-panel="personal">
<div class="settings-panel">
<div class="settings-section-header">
<div>
@@ -82,7 +82,7 @@
</div>
</section>
<section class="settings-view" data-settings-panel="my-roleplay-companions">
<section class="settings-view" role="tabpanel" aria-hidden="true" data-settings-panel="my-roleplay-companions">
<div class="settings-panel">
<div class="settings-section-header">
<div>
@@ -101,7 +101,7 @@
</div>
</section>
<section class="settings-view" data-settings-panel="design">
<section class="settings-view" role="tabpanel" aria-hidden="true" data-settings-panel="design">
<div class="settings-panel settings-panel-compact">
<div class="settings-section-header">
<div>
public/settings.js
+11 -2
View File
@@ -61,6 +61,7 @@ async function request(url, data, method = "POST") {
try {
const res = await fetch(url, {
method,
credentials: "same-origin",
headers: {"Content-Type": "application/json"},
body: data ? JSON.stringify(data) : undefined
});
@@ -140,8 +141,16 @@ function applyThemeMode(modeKey, persist = true) {
function setSettingsView(view) {
const normalizedView = ["my-ai-characters", "my-personas"].includes(view) ? "my-roleplay-companions" : view;
settingsNavItems.forEach((item) => item.classList.toggle("active", item.dataset.settingsView === normalizedView));
settingsPanels.forEach((panel) => panel.classList.toggle("active", panel.dataset.settingsPanel === normalizedView));
settingsNavItems.forEach((item) => {
const isActive = item.dataset.settingsView === normalizedView;
item.classList.toggle("active", isActive);
item.setAttribute("aria-selected", String(isActive));
});
settingsPanels.forEach((panel) => {
const isActive = panel.dataset.settingsPanel === normalizedView;
panel.classList.toggle("active", isActive);
panel.setAttribute("aria-hidden", String(!isActive));
});
const params = new URLSearchParams(window.location.search);
params.set("view", normalizedView);
history.replaceState(null, "", `${window.location.pathname}?${params.toString()}`);
public/style.css
+1273
View File
File diff suppressed because it is too large Load Diff
src/routes/personas.js
+11 -2
View File
@@ -314,7 +314,9 @@ export function createPersonasRouter({repositories, chatService, modelService, c
scenarioPrompt,
sceneSummary
});
if (!opener) return res.status(500).json({error: "Failed to generate the character opener"});
if (!opener || chatService.containsUserVoiceInRoleplayOpener(opener, userPersona)) {
return res.json({chat, existing: false, generatedInitialMessage: false, degraded: true});
}
chatService.insertChatMessage(chat.id, "bot", opener, {
retryVariants: [opener],
retryActiveIndex: 0,
@@ -325,7 +327,14 @@ export function createPersonasRouter({repositories, chatService, modelService, c
return res.json({chat: repositories.getChat(chat.id, user), existing: false, generatedInitialMessage: true, opener});
} catch (error) {
const mapped = modelService.mapError(error);
return res.status(mapped.status).json(mapped.body);
return res.json({
chat,
existing: false,
generatedInitialMessage: false,
degraded: true,
modelError: mapped.body.error,
modelErrorCode: mapped.body.code
});
}
});
src/services/chatService.js
+3 -3
View File
@@ -278,6 +278,9 @@ export function createChatService(repositories, modelService, config) {
: await modelService.streamReply(model, messagesPayload, onChunk);
if (!fullReply) return {error: "Failed to generate a valid character reply", status: 500};
if (activePersona && containsUserVoiceInRoleplayOpener(fullReply, activeUserPersona)) {
return {error: "Failed to generate a valid character reply", status: 500};
}
insertChatMessage(chatId, "bot", fullReply, {
retryVariants: [fullReply],
retryActiveIndex: 0,
@@ -285,9 +288,6 @@ export function createChatService(repositories, modelService, config) {
retryPromptMessageId: null
}, model);
repositories.touchChat(chatId, user);
if (activePersona && containsUserVoiceInRoleplayOpener(fullReply, activeUserPersona)) {
return {error: "Failed to generate a valid character reply", status: 500};
}
return {reply: fullReply};
},
async retryMessage({user, chatId, selectedModel, targetMessage, retryStyle = null}) {
src/services/modelService.js
+31 -25
View File
@@ -92,18 +92,20 @@ export function createModelService(config, overrides = {}) {
state.activeRequests += 1;
try {
const response = await withTimeout(config.modelRequestTimeoutMs, (signal) => fetchImpl(`${config.modelApiBaseUrl}/chat`, {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({model, messages: messagesPayload, stream: true}),
signal
}));
const fullReply = await withTimeout(config.modelRequestTimeoutMs, async (signal) => {
const response = await fetchImpl(`${config.modelApiBaseUrl}/chat`, {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({model, messages: messagesPayload, stream: true}),
signal
});
if (!response.ok) {
throw new ModelServiceError("MODEL_UPSTREAM_ERROR", `Model backend returned ${response.status}.`, 502);
}
if (!response.ok) {
throw new ModelServiceError("MODEL_UPSTREAM_ERROR", `Model backend returned ${response.status}.`, 502);
}
const fullReply = await readStreamingReply(response);
return readStreamingReply(response);
});
lastHealth = {ok: true, checkedAt: new Date().toISOString(), error: null};
return fullReply;
} catch (error) {
@@ -124,18 +126,20 @@ export function createModelService(config, overrides = {}) {
state.activeRequests += 1;
try {
const response = await withTimeout(config.modelRequestTimeoutMs, (signal) => fetchImpl(`${config.modelApiBaseUrl}/chat`, {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({model, messages: messagesPayload, stream: true}),
signal
}));
const fullReply = await withTimeout(config.modelRequestTimeoutMs, async (signal) => {
const response = await fetchImpl(`${config.modelApiBaseUrl}/chat`, {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({model, messages: messagesPayload, stream: true}),
signal
});
if (!response.ok) {
throw new ModelServiceError("MODEL_UPSTREAM_ERROR", `Model backend returned ${response.status}.`, 502);
}
if (!response.ok) {
throw new ModelServiceError("MODEL_UPSTREAM_ERROR", `Model backend returned ${response.status}.`, 502);
}
const fullReply = await readStreamingReply(response, onChunk);
return readStreamingReply(response, onChunk);
});
lastHealth = {ok: true, checkedAt: new Date().toISOString(), error: null};
return fullReply;
} catch (error) {
@@ -157,11 +161,13 @@ export function createModelService(config, overrides = {}) {
}
try {
const response = await withTimeout(config.modelListTimeoutMs, (signal) => fetchImpl(`${config.modelApiBaseUrl}/tags`, {signal}));
if (!response.ok) {
throw new ModelServiceError("MODEL_LIST_FAILED", "Failed to load models.", 502);
}
modelsCache = await response.json();
modelsCache = await withTimeout(config.modelListTimeoutMs, async (signal) => {
const response = await fetchImpl(`${config.modelApiBaseUrl}/tags`, {signal});
if (!response.ok) {
throw new ModelServiceError("MODEL_LIST_FAILED", "Failed to load models.", 502);
}
return response.json();
});
modelsCacheAt = Date.now();
lastHealth = {ok: true, checkedAt: new Date().toISOString(), error: null};
return modelsCache;
src/services/personaService.js
+28 -11
View File
@@ -7,6 +7,15 @@ const PERSONA_FIELD_LIMITS = {
exampleDialogues: 12000
};
const PERSONA_PROMPT_FIELD_LIMITS = {
appearance: 1200,
background: 1400,
details: 1400,
exampleDialogues: 1800,
summaryField: 360,
scenarioPrompt: 700
};
const blockedPersonaPatterns = [
/\b(child|children|kid|kids|minor|underage|under-aged|teenager|young girl|young boy|loli|shota)\b/i,
/\b(nazi|hitler|third reich|kkk|ku klux klan|white power|nigger|nigga)\b/i,
@@ -59,13 +68,19 @@ export function clampText(value, limit = 260) {
return `${normalized.slice(0, limit - 3).trimEnd()}...`;
}
function clampPromptText(value, limit) {
const normalized = String(value || "").trim();
if (normalized.length <= limit) return normalized;
return `${normalized.slice(0, limit - 3).trimEnd()}...`;
}
export function summarizePersona(persona) {
if (!persona) return "";
return [
persona.name ? `Name: ${persona.name}` : null,
persona.pronouns ? `Pronouns: ${persona.pronouns}` : null,
persona.background ? `Background: ${persona.background}` : null,
persona.details ? `Traits: ${persona.details}` : null
persona.background ? `Background: ${clampText(persona.background, PERSONA_PROMPT_FIELD_LIMITS.summaryField)}` : null,
persona.details ? `Traits: ${clampText(persona.details, PERSONA_PROMPT_FIELD_LIMITS.summaryField)}` : null
].filter(Boolean).join(" | ");
}
@@ -85,13 +100,13 @@ export function buildPersonaPrompt(persona) {
];
if (persona.name) lines.push(`Name: ${persona.name}`);
if (persona.pronouns) lines.push(`Pronouns: ${persona.pronouns}`);
if (persona.appearance) lines.push(`Appearance: ${persona.appearance}`);
if (persona.background) lines.push(`Background: ${persona.background}`);
if (persona.details) lines.push(`Additional Traits: ${persona.details}`);
if (persona.appearance) lines.push(`Appearance: ${clampPromptText(persona.appearance, PERSONA_PROMPT_FIELD_LIMITS.appearance)}`);
if (persona.background) lines.push(`Background: ${clampPromptText(persona.background, PERSONA_PROMPT_FIELD_LIMITS.background)}`);
if (persona.details) lines.push(`Additional Traits: ${clampPromptText(persona.details, PERSONA_PROMPT_FIELD_LIMITS.details)}`);
if (persona.example_dialogues) {
lines.push("", "EXAMPLE DIALOGUES:");
lines.push("Use these examples to mirror tone, cadence, and phrasing without rigidly repeating them.");
lines.push(persona.example_dialogues);
lines.push(clampPromptText(persona.example_dialogues, PERSONA_PROMPT_FIELD_LIMITS.exampleDialogues));
}
return lines.join("\n");
}
@@ -110,9 +125,9 @@ export function buildUserPersonaPrompt(persona) {
];
if (persona.name) lines.push(`Name: ${persona.name}`);
if (persona.pronouns) lines.push(`Pronouns: ${persona.pronouns}`);
if (persona.appearance) lines.push(`Appearance: ${persona.appearance}`);
if (persona.background) lines.push(`Background: ${persona.background}`);
if (persona.details) lines.push(`Additional Traits: ${persona.details}`);
if (persona.appearance) lines.push(`Appearance: ${clampPromptText(persona.appearance, PERSONA_PROMPT_FIELD_LIMITS.appearance)}`);
if (persona.background) lines.push(`Background: ${clampPromptText(persona.background, PERSONA_PROMPT_FIELD_LIMITS.background)}`);
if (persona.details) lines.push(`Additional Traits: ${clampPromptText(persona.details, PERSONA_PROMPT_FIELD_LIMITS.details)}`);
return lines.join("\n");
}
@@ -128,6 +143,7 @@ export function buildRoleplaySceneSummary(assistantPersona, userPersona, scenari
}
export function buildRoleplayDirectionPrompt({assistantPersona, userPersona, scenarioPrompt, sceneSummary}) {
const scenarioSeed = clampPromptText(scenarioPrompt || "", PERSONA_PROMPT_FIELD_LIMITS.scenarioPrompt);
const lines = [
"ROLEPLAY DIRECTION:",
"Create an immersive one-on-one roleplay between the assistant persona and the user.",
@@ -149,7 +165,7 @@ export function buildRoleplayDirectionPrompt({assistantPersona, userPersona, sce
"",
`SCENE SUMMARY: ${sceneSummary}`
];
if (scenarioPrompt) lines.push(`USER SCENARIO SEED: ${scenarioPrompt}`);
if (scenarioSeed) lines.push(`USER SCENARIO SEED: ${scenarioSeed}`);
if (assistantPersona) lines.push("", `ASSISTANT SNAPSHOT: ${summarizePersona(assistantPersona)}`);
if (userPersona) lines.push(`USER SNAPSHOT: ${summarizePersona(userPersona)}`);
return lines.join("\n");
@@ -158,8 +174,9 @@ export function buildRoleplayDirectionPrompt({assistantPersona, userPersona, sce
export function buildRoleplayOpenerPrompt({assistantPersona, userPersona, scenarioPrompt, sceneSummary}) {
const assistantName = assistantPersona?.name || "the assistant";
const userName = userPersona?.name || "the user";
const scenarioSeedText = clampPromptText(scenarioPrompt || "", PERSONA_PROMPT_FIELD_LIMITS.scenarioPrompt);
const sceneSeed = scenarioPrompt
? `Use this scenario seed: ${scenarioPrompt}`
? `Use this scenario seed: ${scenarioSeedText}`
: `Invent a fresh scenario that suits ${assistantName} and how they would realistically meet or confront ${userName}.`;
return [
test/app.test.js
+88 -3
View File
@@ -20,9 +20,9 @@ class CookieJar {
}
}
async function startTestServer() {
async function startTestServer(overrides = {}) {
let replyCount = 0;
const modelService = {
const modelService = overrides.modelService || {
async generateReply() {
replyCount += 1;
return `stub-reply-${replyCount}`;
@@ -52,7 +52,8 @@ async function startTestServer() {
port: 0,
dbPath: ":memory:",
testMode: true,
sessionSecret: "test-secret"
sessionSecret: "test-secret",
...(overrides.config || {})
},
modelService
});
@@ -156,6 +157,90 @@ test("chat creation, send, and retry endpoints work with stubbed model service",
await server.close();
});
test("roleplay start keeps the session and roleplay messages work", async () => {
const server = await startTestServer();
const jar = new CookieJar();
await request(server.baseUrl, "/register", {method: "POST", body: {username: "roleplayer", password: "password123"}});
await request(server.baseUrl, "/login", {method: "POST", body: {username: "roleplayer", password: "password123"}, jar});
const persona = await request(server.baseUrl, "/personas", {
method: "POST",
body: {personaType: "assistant", name: "Guide", details: "Patient and direct"},
jar
});
assert.equal(persona.status, 200);
const started = await request(server.baseUrl, "/roleplays/start", {
method: "POST",
body: {assistantPersonaId: persona.json.persona.id, scenarioPrompt: "A quiet station.", model: "mistral:latest"},
jar
});
assert.equal(started.status, 200);
assert.equal(started.json.generatedInitialMessage, true);
assert.ok(started.json.chat.id);
const session = await request(server.baseUrl, "/session", {jar});
assert.equal(session.status, 200);
assert.equal(session.json.user, "roleplayer");
const sendMessage = await request(server.baseUrl, "/chat", {
method: "POST",
body: {chatId: started.json.chat.id, message: "I step closer.", model: "mistral:latest"},
jar
});
assert.equal(sendMessage.status, 200);
assert.equal(sendMessage.json.reply, "stub-reply-2");
await server.close();
});
test("roleplay start degrades to an open chat when opener generation fails", async () => {
const modelService = {
async generateReply() {
throw new Error("Model backend timed out.");
},
async streamReply() {
return "unused";
},
async listModels() {
return {models: [{name: "mistral:latest"}]};
},
async checkHealth() {
return {ok: false, checkedAt: new Date().toISOString(), error: "Model backend timed out."};
},
mapError(error) {
return {status: 504, body: {error: error.message, code: "MODEL_TIMEOUT"}};
}
};
const server = await startTestServer({modelService});
const jar = new CookieJar();
await request(server.baseUrl, "/register", {method: "POST", body: {username: "degraded", password: "password123"}});
await request(server.baseUrl, "/login", {method: "POST", body: {username: "degraded", password: "password123"}, jar});
const persona = await request(server.baseUrl, "/personas", {
method: "POST",
body: {personaType: "assistant", name: "Guide", details: "Patient and direct"},
jar
});
const started = await request(server.baseUrl, "/roleplays/start", {
method: "POST",
body: {assistantPersonaId: persona.json.persona.id, model: "mistral:latest"},
jar
});
assert.equal(started.status, 200);
assert.equal(started.json.degraded, true);
assert.equal(started.json.generatedInitialMessage, false);
assert.ok(started.json.chat.id);
const session = await request(server.baseUrl, "/session", {jar});
assert.equal(session.json.user, "degraded");
await server.close();
});
test("persona publish and collect flow works across accounts", async () => {
const server = await startTestServer();
const creatorJar = new CookieJar();