Grigo/ChatAIBot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed SD RPG

Browse Source
This commit is contained in:
grigo
2026-06-04 08:05:06 +03:00
parent d4cd8f02f4
commit 6189a5fb74
62 changed files with 6969 additions and 552 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/app.js
+4 -1
View File
@@ -2,8 +2,9 @@ import { toggleSidebar, dom } from './state.js';
import { initSessions } from './sessions.js';
import { openNewChatWizard, initNewChatWizard } from './newChatWizard.js';
import { openChatSettings, initChatSettings } from './chatSettings.js';
import { initContextEditor } from './contextEditor.js';
import { loadPersonas, initPersonaModals } from './personas.js';
import { sendMessage, clearHistory } from './chat.js';
import { sendMessage, clearHistory, initQuestPanel } from './chat.js';
document.getElementById('sidebarToggle').addEventListener('click', () => {
const open = toggleSidebar();
@@ -36,5 +37,7 @@ dom.systemBlobToggle?.addEventListener('click', () => {
initPersonaModals();
initNewChatWizard();
initChatSettings();
initContextEditor();
initQuestPanel();
await initSessions();
loadPersonas();
static/js/chat.js
+392 -43
View File
@@ -1,9 +1,19 @@
import { sessionId, currentPersona, dom } from './state.js';
import { parseImagePromptFromContent, copyToClipboard } from './utils.js';
import { parseImagePromptFromContent, copyToClipboard, splitSdPromptForCopy } from './utils.js';
import {
attachFormatToggle,
initBubbleContent,
applyDiceOverrideToBubble,
isPlayerChoiceContent,
} from './rpFormat.js';
let _pendingUserBubble = null;
let _selectedQuestId = null;
let _questsCache = [];
export async function initChat(options = {}) {
if (!sessionId || !currentPersona) return;
const payload = { message: '', session_id: sessionId, persona_id: currentPersona };
if (!sessionId) return;
const payload = { message: '', session_id: sessionId };
if (options.first_mes_override?.trim()) payload.first_mes_override = options.first_mes_override.trim();
const res = await fetch('/chat/init', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
if (!res.ok) return;
@@ -16,19 +26,22 @@ export function updateEmptyState() {
dom.emptyState?.classList.toggle('hidden', !!hasMessages);
}
export function createImagePromptBlock(promptText) {
function createImagePromptBlockSingle(label, promptText) {
const block = document.createElement('div');
block.className = 'image-prompt-block';
const header = document.createElement('div');
header.className = 'image-prompt-header';
header.innerHTML = '<span>🎨 SD prompt</span>';
header.innerHTML = `<span>🎨 ${label}</span>`;
const copyBtn = document.createElement('button');
copyBtn.type = 'button';
copyBtn.className = 'copy-prompt-btn';
copyBtn.textContent = 'Копировать';
copyBtn.addEventListener('click', async () => {
const ok = await copyToClipboard(promptText);
copyBtn.addEventListener('click', async (e) => {
e.preventDefault();
e.stopPropagation();
const full = textEl.textContent?.trim() || promptText || '';
const ok = await copyToClipboard(splitSdPromptForCopy(full));
copyBtn.textContent = ok ? 'Скопировано' : 'Ошибка';
setTimeout(() => { copyBtn.textContent = 'Копировать'; }, 1500);
});
@@ -39,11 +52,10 @@ export function createImagePromptBlock(promptText) {
regenBtn.className = 'copy-prompt-btn';
regenBtn.textContent = '🖼 Перегенерировать';
regenBtn.addEventListener('click', async () => {
const wrapper = block.parentElement;
const wrapper = block.closest('.message');
regenBtn.disabled = true;
regenBtn.textContent = '⏳…';
wrapper?.querySelector('.chat-image')?.remove();
wrapper?.querySelector('.image-error')?.remove();
wrapper?.querySelectorAll('.chat-image-wrap, .chat-image, .image-error').forEach(el => el.remove());
showImageGenerating(wrapper);
try {
const res = await fetch('/images/generate', {
@@ -76,6 +88,26 @@ export function createImagePromptBlock(promptText) {
return block;
}
export function createImagePromptBlock(promptText, promptAlt = null) {
const wrap = document.createElement('div');
wrap.className = 'image-prompt-blocks';
wrap.appendChild(createImagePromptBlockSingle('SD prompt', promptText));
const alt = (promptAlt || '').trim();
const main = (promptText || '').trim();
if (alt && alt !== main) {
wrap.appendChild(createImagePromptBlockSingle('SD prompt (только теги)', promptAlt));
}
return wrap;
}
/** Replace or create tag + optional hybrid prompt blocks under a message. */
export function ensureImagePromptBlocks(wrapper, tagPrompt, altPrompt = null) {
if (!wrapper || !tagPrompt) return;
wrapper.querySelector('.image-prompt-blocks')?.remove();
wrapper.querySelectorAll('.image-prompt-block').forEach(el => el.remove());
wrapper.appendChild(createImagePromptBlock(tagPrompt, altPrompt || null));
}
const OUTCOME_CLASS = {
'critical failure': 'outcome-crit-fail',
'failure': 'outcome-fail',
@@ -113,26 +145,132 @@ function renderNarratorMessage(narrator) {
return el;
}
function renderChoices(wrapper, choices) {
if (!choices?.length) return;
export function removeChoiceRows(wrapper) {
wrapper?.querySelectorAll('.choice-row').forEach(el => el.remove());
}
export function ensureMessageActionsLast(wrapper) {
const actions = wrapper?.querySelector('.message-actions');
if (actions) wrapper.appendChild(actions);
}
export function renderChoices(wrapper, choices) {
if (!choices?.length || !wrapper) return;
removeChoiceRows(wrapper);
const plotChoices = choices.filter(c => c?.source === 'plot_beat');
const otherChoices = choices.filter(c => c?.source !== 'plot_beat');
const row = document.createElement('div');
row.className = 'choice-row';
for (const c of choices) {
const appendBtn = (container, c) => {
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'choice-btn';
btn.textContent = c.label;
btn.addEventListener('click', () => sendMessage(c.label, true));
row.appendChild(btn);
}
btn.className = c.source === 'plot_beat' ? 'choice-btn choice-btn-plot' : 'choice-btn';
const label = c.label || '';
btn.textContent = label;
if (c.beat_title) btn.title = c.beat_title;
btn.addEventListener('click', () => {
removeChoiceRows(wrapper);
sendMessage(label, true);
});
container.appendChild(btn);
};
const appendSection = (items, { plot } = {}) => {
if (!items.length) return;
const section = document.createElement('div');
section.className = plot ? 'choice-section choice-section-plot' : 'choice-section';
if (plot) {
const hdr = document.createElement('div');
hdr.className = 'choice-section-label';
const title = items[0].beat_title || 'Сюжетный beat';
hdr.textContent = `📜 ${title}`;
section.appendChild(hdr);
const inj = (items[0].beat_injection || '').trim();
if (inj) {
const teaser = document.createElement('div');
teaser.className = 'choice-beat-teaser';
teaser.textContent = inj.length > 220 ? `${inj.slice(0, 217)}…` : inj;
section.appendChild(teaser);
}
} else if (plotChoices.length) {
const hdr = document.createElement('div');
hdr.className = 'choice-section-label choice-section-label-generic';
hdr.textContent = '🔘 Дальше';
section.appendChild(hdr);
}
const btns = document.createElement('div');
btns.className = 'choice-section-btns';
for (const c of items) appendBtn(btns, c);
section.appendChild(btns);
row.appendChild(section);
};
appendSection(plotChoices, { plot: true });
appendSection(otherChoices);
wrapper.appendChild(row);
ensureMessageActionsLast(wrapper);
}
function restoreChoicesFromHistory(messages) {
const visible = messages.filter(m => m.role !== 'system');
if (!visible.length) return;
const last = visible[visible.length - 1];
if (last.role !== 'assistant' || !last.choices_json) return;
let choices = [];
try {
choices = JSON.parse(last.choices_json);
} catch { return; }
if (!choices?.length) return;
const wrapper = dom.messagesEl.querySelector(
`.message.assistant[data-message-id="${last.id}"]`,
);
if (wrapper) renderChoices(wrapper, choices);
}
function finalizeAssistantMessage(wrapper, messageId, choices) {
if (!wrapper || !messageId) return;
wrapper.dataset.messageId = String(messageId);
attachMessageActions(wrapper, Number(messageId), 'assistant');
if (choices?.length) renderChoices(wrapper, choices);
else ensureMessageActionsLast(wrapper);
}
function showNarratorActivityHint(wrapper, meta) {
if (!wrapper || !meta) return;
wrapper.querySelector('.narrator-activity-hint')?.remove();
const parts = [];
if (meta.post_ok === false && meta.pre_ok === false) {
parts.push('⚠️ Narrator LLM не ответил — проверьте ROUTER_KEY / RPG_NARRATOR_MODEL');
} else {
if (meta.dice) parts.push('🎲 бросок');
if (meta.directives_count > 0) parts.push(`📋 ${meta.directives_count} указаний`);
if (meta.choices_count > 0) parts.push(`🔘 ${meta.choices_count} выборов`);
if (meta.status_quo) parts.push('🌍 status_quo');
if (meta.beats_replenished) parts.push(`📜 +${meta.beats_replenished} beats`);
if (meta.beat_mode === 'after_dice') parts.push('📜 beat (d20)');
if (meta.beat_mode === 'llm') parts.push('📜 beat (AI)');
if (meta.beat_mode === 'stuck_recovery') parts.push('📜 beat (recovery)');
if (meta.beat_mode === 'trigger') parts.push('📜 beat (keywords)');
if (meta.arc_pruned) parts.push(`🧹 −${meta.arc_pruned} beat`);
if (meta.facts_added) parts.push(`📌 +${meta.facts_added} фактов`);
}
if (!parts.length) return;
const el = document.createElement('div');
el.className = 'narrator-activity-hint';
el.textContent = `📖 Narrator: ${parts.join(' · ')}`;
wrapper.appendChild(el);
ensureMessageActionsLast(wrapper);
}
function renderDebugBlocks(wrapper, blocks) {
if (!blocks?.length) return;
for (const b of blocks) {
if (!b?.text) continue;
if (b.type === 'narrator_injection') {
if (b.type === 'narrator_injection' || b.type === 'status_quo') {
const w = document.createElement('div');
w.className = 'message narrator';
const lbl = document.createElement('div');
@@ -148,16 +286,106 @@ function renderDebugBlocks(wrapper, blocks) {
}
}
function questIdEq(a, b) {
return Number(a) === Number(b);
}
function syncQuestActionButtons() {
const doneBtn = document.getElementById('questBtnDone');
const failBtn = document.getElementById('questBtnFail');
const active = _selectedQuestId != null
&& _questsCache.some(q => questIdEq(q.id, _selectedQuestId) && q.status === 'active');
if (doneBtn) doneBtn.disabled = !active;
if (failBtn) failBtn.disabled = !active;
}
export function updateQuestPanel(quests) {
const list = document.getElementById('questList');
const actions = document.getElementById('questPanelActions');
if (!list) return;
_questsCache = quests || [];
list.innerHTML = '';
for (const q of quests) {
if (!_questsCache.length) {
_selectedQuestId = null;
syncQuestActionButtons();
return;
}
if (_selectedQuestId != null && !_questsCache.some(
q => questIdEq(q.id, _selectedQuestId) && q.status === 'active',
)) {
_selectedQuestId = null;
}
for (const q of _questsCache) {
const el = document.createElement('div');
el.className = `quest-item quest-${q.status}`;
if (questIdEq(q.id, _selectedQuestId)) el.classList.add('quest-selected');
if (q.status === 'done') el.classList.add('quest-done');
if (q.status === 'failed') el.classList.add('quest-failed');
el.dataset.questId = String(q.id);
el.textContent = (q.status === 'done' ? '✅ ' : q.status === 'failed' ? '❌ ' : '🔸 ') + q.title;
if (q.status === 'active') {
el.addEventListener('click', () => {
const qid = Number(q.id);
_selectedQuestId = questIdEq(_selectedQuestId, qid) ? null : qid;
updateQuestPanel(_questsCache);
});
}
list.appendChild(el);
}
syncQuestActionButtons();
}
async function patchSelectedQuest(status) {
if (!sessionId || _selectedQuestId == null) {
alert('Сначала выберите активный квест (🔸) в списке.');
return;
}
const q = _questsCache.find(x => questIdEq(x.id, _selectedQuestId));
if (!q || q.status !== 'active') return;
const verb = status === 'done' ? 'завершить' : 'отметить провалом';
if (!confirm(`${verb.charAt(0).toUpperCase() + verb.slice(1)} квест?\n\n«${q.title}»`)) return;
const doneBtn = document.getElementById('questBtnDone');
const failBtn = document.getElementById('questBtnFail');
doneBtn && (doneBtn.disabled = true);
failBtn && (failBtn.disabled = true);
try {
const res = await fetch(`/sessions/${sessionId}/quests/${Number(_selectedQuestId)}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ status }),
});
if (!res.ok) {
const err = await res.json().catch(() => ({}));
alert(err.detail || res.statusText);
return;
}
_selectedQuestId = null;
const listRes = await fetch(`/sessions/${sessionId}/quests`);
if (listRes.ok) updateQuestPanel(await listRes.json());
} finally {
syncQuestActionButtons();
}
}
export function initQuestPanel() {
const panel = document.getElementById('questPanel');
if (!panel || panel.dataset.questBound === '1') return;
panel.dataset.questBound = '1';
panel.addEventListener('click', (e) => {
if (e.target.id === 'questBtnDone') {
e.preventDefault();
patchSelectedQuest('done');
} else if (e.target.id === 'questBtnFail') {
e.preventDefault();
patchSelectedQuest('failed');
}
});
}
export function updateAffinityDisplay(affinity) {
@@ -169,12 +397,38 @@ export function updateAffinityDisplay(affinity) {
el.className = `affinity-display ${affinity > 5 ? 'affinity-high' : affinity < -3 ? 'affinity-low' : ''}`;
}
export function appendChatImage(wrapper, imagePath) {
export function updateStatsDisplay(stats) {
const el = dom.statsDisplay;
if (!el || !stats) return;
const lust = Number(stats.lust ?? 0);
const stamina = Number(stats.stamina ?? 10);
const tension = Number(stats.tension ?? 0);
el.textContent = `🔥${lust} ⚡${stamina} 😰${tension}`;
el.className = 'stats-display';
if (stamina <= 2 || tension >= 8) el.classList.add('stats-critical');
else if (stamina <= 4 || tension >= 6) el.classList.add('stats-warn');
el.classList.remove('hidden');
}
export function hideStatsDisplay() {
dom.statsDisplay?.classList.add('hidden');
}
export function appendChatImage(wrapper, imagePath, label = '') {
if (!imagePath) return;
const figure = document.createElement('figure');
figure.className = 'chat-image-wrap';
if (label) {
const cap = document.createElement('figcaption');
cap.className = 'chat-image-label';
cap.textContent = label;
figure.appendChild(cap);
}
const img = document.createElement('img');
img.className = 'chat-image';
img.src = imagePath;
wrapper.appendChild(img);
figure.appendChild(img);
wrapper.appendChild(figure);
}
export function showImageGenerating(wrapper) {
@@ -194,6 +448,7 @@ export function removeImageGenerating(wrapper) {
function attachMessageActions(wrapper, messageId, role) {
if (!messageId) return;
wrapper.dataset.messageId = String(messageId);
wrapper.querySelector('.message-actions')?.remove();
const actions = document.createElement('div');
actions.className = 'message-actions';
const editBtn = document.createElement('button');
@@ -216,7 +471,28 @@ function attachMessageActions(wrapper, messageId, role) {
branchBtn.title = 'Ветка отсюда';
branchBtn.addEventListener('click', () => forkFromMessage(messageId));
actions.appendChild(branchBtn);
const delBtn = document.createElement('button');
delBtn.type = 'button';
delBtn.textContent = '🗑';
delBtn.title = 'Удалить сообщение и всё после него';
delBtn.addEventListener('click', () => deleteMessageAndAfter(messageId, wrapper));
actions.appendChild(delBtn);
wrapper.appendChild(actions);
ensureMessageActionsLast(wrapper);
}
async function deleteMessageAndAfter(messageId, wrapper) {
if (!sessionId || !messageId) return;
if (!confirm('Удалить это сообщение и всю переписку после него?')) return;
const res = await fetch(`/chat/messages/${messageId}`, { method: 'DELETE' });
if (!res.ok) {
const err = await res.json().catch(() => ({}));
alert(err.detail || res.statusText);
return;
}
await reloadChatFromServer(sessionId);
const listRes = await fetch(`/sessions/${sessionId}/quests`);
if (listRes.ok) updateQuestPanel(await listRes.json());
}
async function startEditMessage(wrapper, messageId) {
@@ -262,7 +538,7 @@ async function regenerateMessage(messageId, wrapper) {
const res = await fetch('/chat/regenerate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ session_id: sessionId, persona_id: currentPersona, message_id: messageId }),
body: JSON.stringify({ session_id: sessionId, message_id: messageId }),
});
if (!res.ok) throw new Error('Ошибка: ' + res.status);
removeTyping();
@@ -297,14 +573,25 @@ export async function reloadChatFromServer(id) {
const messages = await histRes.json();
clearMessages();
messages.filter(m => m.role !== 'system').forEach(m => {
if (m.role === 'narrator') {
try {
const data = typeof m.content === 'string' ? JSON.parse(m.content) : m.content;
if (data?.text) renderNarratorMessage(data);
} catch { /* ignore bad narrator payload */ }
return;
}
addMessage(
m.role === 'user' ? 'user' : 'assistant',
m.content,
m.image_prompt,
m.image_path ? `/static/${m.image_path}` : null,
m.id,
m.image_prompt_alt,
m.image_path_alt ? `/static/${m.image_path_alt}` : null,
m.role === 'user' ? m.action_resolution : null,
);
});
restoreChoicesFromHistory(messages);
}
const IMAGE_PROMPT_RE = /\[IMAGE_PROMPT:.*?\]/gs;
@@ -330,6 +617,22 @@ async function consumeStream(res) {
// Narrator arrives BEFORE chunks — render immediately
if (data.narrator) {
renderNarratorMessage(data.narrator);
if (
_pendingUserBubble
&& data.narrator.roll != null
&& data.narrator.original_intent
&& !isPlayerChoiceContent(_pendingUserBubble.dataset.raw || '')
) {
const resolution = {
intent_text: data.narrator.original_intent,
resolution_text: data.narrator.text,
roll: data.narrator.roll,
outcome: data.narrator.outcome,
};
_pendingUserBubble._diceResolution = resolution;
applyDiceOverrideToBubble(_pendingUserBubble, resolution);
_pendingUserBubble.closest('.message')?.classList.add('has-dice-override');
}
}
if (data.chunk !== undefined) {
@@ -344,8 +647,12 @@ async function consumeStream(res) {
if (data.image_generating && bubble) {
bubble.classList.remove('typing-active');
const wrapper = bubble.parentElement;
if (data.image_prompt && !wrapper.querySelector('.image-prompt-block')) {
wrapper.appendChild(createImagePromptBlock(data.image_prompt));
if (data.image_prompt) {
ensureImagePromptBlocks(
wrapper,
data.image_prompt,
data.image_prompt_alt || null,
);
}
showImageGenerating(wrapper);
dom.messagesEl.scrollTop = dom.messagesEl.scrollHeight;
@@ -356,19 +663,24 @@ async function consumeStream(res) {
removeImageGenerating(wrapper);
bubble?.classList.remove('typing-active');
// Strip IMAGE_PROMPT tag from final text
// Strip IMAGE_PROMPT tag; apply server-side OOC strip if provided
if (bubble) {
bubble.textContent = bubble.textContent.replace(IMAGE_PROMPT_RE, '').trim();
const fromServer = data.assistant_content;
const cleaned = (fromServer ?? bubble.textContent)
.replace(IMAGE_PROMPT_RE, '')
.trim();
initBubbleContent(bubble, cleaned, { formatted: true });
}
if (data.image_prompt && wrapper && !wrapper.querySelector('.image-prompt-block')) {
wrapper.appendChild(createImagePromptBlock(data.image_prompt));
if (data.image_prompt && wrapper) {
ensureImagePromptBlocks(
wrapper,
data.image_prompt,
data.image_prompt_alt || null,
);
}
if (data.image_path && wrapper) {
console.log('[image] appending', data.image_path, 'to', wrapper);
appendChatImage(wrapper, data.image_path);
} else {
console.log('[image] skip: image_path=', data.image_path, 'wrapper=', wrapper);
appendChatImage(wrapper, data.image_path, '');
}
if (data.image_error && wrapper) {
const err = document.createElement('div');
@@ -376,11 +688,25 @@ async function consumeStream(res) {
err.textContent = '🖼 ' + data.image_error;
wrapper.appendChild(err);
}
if (data.choices?.length && bubble) renderChoices(bubble.parentElement, data.choices);
if (bubble?.parentElement && data.assistant_message_id) {
finalizeAssistantMessage(
bubble.parentElement,
data.assistant_message_id,
data.choices,
);
} else if (data.choices?.length && bubble) {
renderChoices(bubble.parentElement, data.choices);
}
if (data.debug) renderDebugBlocks(bubble?.parentElement || dom.messagesEl, data.debug);
if (data.narrator_meta && bubble?.parentElement) {
showNarratorActivityHint(bubble.parentElement, data.narrator_meta);
}
if (data.affinity !== undefined) updateAffinityDisplay(data.affinity);
if (data.narrative_stats) updateStatsDisplay(data.narrative_stats);
if (data.quests?.length) updateQuestPanel(data.quests);
_pendingUserBubble = null;
const { loadSessions } = await import('./sessions.js');
loadSessions();
}
@@ -388,7 +714,16 @@ async function consumeStream(res) {
}
}
export function addMessage(role, content = '', imagePrompt = null, imagePath = null, messageId = null) {
export function addMessage(
role,
content = '',
imagePrompt = null,
imagePath = null,
messageId = null,
imagePromptAlt = null,
imagePathAlt = null,
actionResolution = null,
) {
updateEmptyState();
const wrapper = document.createElement('div');
wrapper.className = `message ${role}`;
@@ -407,8 +742,18 @@ export function addMessage(role, content = '', imagePrompt = null, imagePath = n
const bubble = document.createElement('div');
bubble.className = 'bubble';
bubble.textContent = displayContent;
initBubbleContent(bubble, displayContent, {
formatted: !!displayContent,
actionResolution: role === 'user' ? actionResolution : null,
});
wrapper.appendChild(bubble);
if (role === 'user' && actionResolution?.resolution_text) {
wrapper.classList.add('has-dice-override');
}
if (displayContent) {
attachFormatToggle(wrapper, bubble);
}
if (role === 'assistant') {
const translateBtn = document.createElement('button');
@@ -418,12 +763,12 @@ export function addMessage(role, content = '', imagePrompt = null, imagePath = n
let originalText = null;
translateBtn.addEventListener('click', async () => {
if (originalText !== null) {
bubble.textContent = originalText;
initBubbleContent(bubble, originalText, { formatted: true });
originalText = null;
translateBtn.textContent = '🌐 RU';
return;
}
originalText = bubble.textContent;
originalText = bubble.dataset.raw ?? bubble.textContent;
translateBtn.disabled = true;
translateBtn.textContent = '…';
try {
@@ -434,7 +779,8 @@ export function addMessage(role, content = '', imagePrompt = null, imagePath = n
});
if (!res.ok) throw new Error(res.statusText);
const data = await res.json();
bubble.textContent = data.translated;
initBubbleContent(bubble, data.translated, { formatted: true });
bubble.dataset.raw = data.translated;
translateBtn.textContent = '↩ Оригинал';
} catch {
originalText = null;
@@ -446,8 +792,9 @@ export function addMessage(role, content = '', imagePrompt = null, imagePath = n
wrapper.appendChild(translateBtn);
}
if (prompt) wrapper.appendChild(createImagePromptBlock(prompt));
if (imagePath) appendChatImage(wrapper, imagePath);
if (prompt) wrapper.appendChild(createImagePromptBlock(prompt, imagePromptAlt));
if (imagePath) appendChatImage(wrapper, imagePath, imagePathAlt ? 'Теги' : '');
if (imagePathAlt) appendChatImage(wrapper, imagePathAlt, 'Гибрид');
attachMessageActions(wrapper, messageId, role);
dom.messagesEl.appendChild(wrapper);
dom.messagesEl.scrollTop = dom.messagesEl.scrollHeight;
@@ -481,13 +828,15 @@ export async function sendMessage(text, isNarratorChoice = false) {
dom.inputEl.value = '';
dom.inputEl.style.height = 'auto';
dom.sendBtn.disabled = true;
addMessage('user', isNarratorChoice ? `[${text}]` : text);
const userContent = isNarratorChoice ? `[Player chose: ${text}]` : text;
dom.messagesEl.querySelectorAll('.message.assistant').forEach(w => removeChoiceRows(w));
_pendingUserBubble = addMessage('user', userContent);
showTyping();
try {
const res = await fetch('/chat/stream', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message: text, session_id: sessionId, persona_id: currentPersona, is_narrator_choice: isNarratorChoice }),
body: JSON.stringify({ message: text, session_id: sessionId, is_narrator_choice: isNarratorChoice }),
});
if (!res.ok) throw new Error('Ошибка сервера: ' + res.status);
removeTyping();
static/js/chatSettings.js
+136 -3
View File
@@ -1,7 +1,10 @@
import { sessionId, currentPersona, dom } from './state.js';
import { sessionId, currentPersona, setCurrentPersona, dom } from './state.js';
import { GENRE_LABELS, bindGenreGrid, resetGenreGrid } from './utils.js';
import { personaIndex } from './personas.js';
const chatSettingsGenres = new Set();
let chatSettingsPersonaId = 'default';
let chatSettingsInitialPersonaId = 'default';
function updateChatSettingsGenresLabel() {
const el = document.getElementById('chatSettingsGenresLabel');
@@ -15,11 +18,32 @@ function updateChatSettingsGenresLabel() {
}
}
function fillChatSettingsPersonaGrid() {
const grid = document.getElementById('chatSettingsPersonaGrid');
if (!grid) return;
grid.innerHTML = '';
for (const p of personaIndex.values()) {
const card = document.createElement('button');
card.type = 'button';
card.className = 'persona-pick-card' + (p.persona_id === chatSettingsPersonaId ? ' selected' : '');
card.dataset.id = p.persona_id;
card.innerHTML = `<span class="emoji">${p.emoji || '🤖'}</span>${p.name}`;
card.addEventListener('click', () => {
chatSettingsPersonaId = p.persona_id;
grid.querySelectorAll('.persona-pick-card').forEach(c => {
c.classList.toggle('selected', c.dataset.id === chatSettingsPersonaId);
});
});
grid.appendChild(card);
}
}
function loadRpgSettingsToDom(prefix, settings) {
document.getElementById(`${prefix}SettingDice`).checked = settings.dice !== false;
document.getElementById(`${prefix}SettingNarrator`).checked = settings.narrator !== false;
document.getElementById(`${prefix}SettingQuests`).checked = settings.quests !== false;
document.getElementById(`${prefix}SettingAffinity`).checked = settings.affinity !== false;
document.getElementById(`${prefix}SettingStats`).checked = settings.stats === true;
document.getElementById(`${prefix}SettingChoices`).checked = settings.choices !== false;
}
@@ -29,6 +53,7 @@ function readRpgSettingsFromDom(prefix) {
narrator: document.getElementById(`${prefix}SettingNarrator`)?.checked ?? true,
quests: document.getElementById(`${prefix}SettingQuests`)?.checked ?? true,
affinity: document.getElementById(`${prefix}SettingAffinity`)?.checked ?? true,
stats: document.getElementById(`${prefix}SettingStats`)?.checked ?? false,
choices: document.getElementById(`${prefix}SettingChoices`)?.checked ?? true,
};
}
@@ -51,6 +76,10 @@ async function bootstrapRpg(sid, personaId, genreValue, settings) {
});
if (res.ok) {
const data = await res.json();
if (data.affinity !== undefined) {
const { updateAffinityDisplay } = await import('./chat.js');
updateAffinityDisplay(data.affinity);
}
if (data.quests) updateQuestPanel(data.quests);
if (data.plot_arc) {
const title = data.plot_arc.title || '';
@@ -67,6 +96,10 @@ export async function openChatSettings() {
const s = await res.json();
document.getElementById('chatSettingsTitle').value = s.title || '';
chatSettingsPersonaId = s.persona_id || 'default';
chatSettingsInitialPersonaId = chatSettingsPersonaId;
fillChatSettingsPersonaGrid();
const rpgOn = !!s.rpg_enabled;
document.getElementById('chatSettingsRpg').checked = rpgOn;
document.getElementById('chatSettingsRpgBlock').classList.toggle('hidden', !rpgOn);
@@ -91,12 +124,33 @@ export async function openChatSettings() {
const arc = JSON.parse(s.plot_arc_json || '{}');
phase = arc.phase || '';
} catch { /* ignore */ }
let stats = { lust: 0, stamina: 10, tension: 0 };
try {
stats = { ...stats, ...JSON.parse(s.narrative_stats_json || '{}') };
} catch { /* ignore */ }
document.getElementById('chatSettingsMeta').innerHTML = [
`Симпатия: ${s.affinity ?? 0}`,
settings.stats
? `Шкалы: lust ${stats.lust ?? 0}, stamina ${stats.stamina ?? 10}, tension ${stats.tension ?? 0}`
: '',
s.genre ? `Жанр: ${(s.genre || '').split(',').map(g => GENRE_LABELS[g.trim()] || g).join(' + ')}` : '',
phase ? `Фаза арки: ${phase}` : '',
].filter(Boolean).join('<br>');
const dbg = document.getElementById('chatSettingsRpgDebug');
if (dbg) dbg.open = rpgOn;
const affIn = document.getElementById('debugAffinity');
const lustIn = document.getElementById('debugLust');
const stamIn = document.getElementById('debugStamina');
const tensIn = document.getElementById('debugTension');
if (affIn) affIn.value = String(s.affinity ?? 0);
if (lustIn) lustIn.value = String(stats.lust ?? 0);
if (stamIn) stamIn.value = String(stats.stamina ?? 10);
if (tensIn) tensIn.value = String(stats.tension ?? 0);
const st = document.getElementById('debugRpgStateStatus');
if (st) st.textContent = '';
document.getElementById('chatSettingsModal').classList.add('open');
}
@@ -115,15 +169,94 @@ export function initChatSettings() {
document.getElementById('chatSettingsModal').classList.remove('open');
});
document.getElementById('debugRpgStateApply')?.addEventListener('click', async () => {
if (!sessionId) return;
const statusEl = document.getElementById('debugRpgStateStatus');
const body = {};
const aff = document.getElementById('debugAffinity')?.value;
const lust = document.getElementById('debugLust')?.value;
const stam = document.getElementById('debugStamina')?.value;
const tens = document.getElementById('debugTension')?.value;
if (aff !== '' && aff != null) body.affinity = Number(aff);
if (lust !== '' && lust != null) body.lust = Number(lust);
if (stam !== '' && stam != null) body.stamina = Number(stam);
if (tens !== '' && tens != null) body.tension = Number(tens);
try {
const res = await fetch(`/sessions/${sessionId}/rpg-state`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
});
if (!res.ok) {
const err = await res.json().catch(() => ({}));
if (statusEl) {
statusEl.textContent = err.detail || 'Ошибка';
statusEl.style.color = '#e74c3c';
}
return;
}
const data = await res.json();
const { updateAffinityDisplay, updateStatsDisplay } = await import('./chat.js');
if (data.affinity !== undefined) updateAffinityDisplay(data.affinity);
if (data.narrative_stats) updateStatsDisplay(data.narrative_stats);
if (statusEl) {
statusEl.textContent = 'Сохранено';
statusEl.style.color = '#2ecc71';
}
const blobRes = await fetch(`/chat/system/${sessionId}`);
if (blobRes.ok) {
const { renderSystemBlob } = await import('./sessions.js');
renderSystemBlob(await blobRes.json());
}
} catch {
if (statusEl) {
statusEl.textContent = 'Сеть';
statusEl.style.color = '#e74c3c';
}
}
});
document.getElementById('chatSettingsSave')?.addEventListener('click', async () => {
if (!sessionId) return;
const { loadSessions, applySessionUi } = await import('./sessions.js');
const { loadSessions, applySessionUi, renderSystemBlob } = await import('./sessions.js');
const { reloadChatFromServer } = await import('./chat.js');
const { highlightPersonaBar } = await import('./personas.js');
const title = document.getElementById('chatSettingsTitle').value.trim();
const rpgOn = document.getElementById('chatSettingsRpg').checked;
const genreValue = [...chatSettingsGenres].join(',') || 'adventure';
const settings = readRpgSettingsFromDom('cs');
if (chatSettingsPersonaId !== chatSettingsInitialPersonaId) {
const pName = personaIndex.get(chatSettingsPersonaId)?.name || chatSettingsPersonaId;
const keepHistory = confirm(
`Перепривязать чат к «${pName}»?\n\n`
+ 'OK — сохранить историю сообщений (персонаж в старых репликах может не совпадать).\n'
+ 'Отмена — очистить историю и начать с приветствия нового персонажа.',
);
const clearHistory = !keepHistory;
const rebindRes = await fetch(`/sessions/${sessionId}/rebind-persona`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
persona_id: chatSettingsPersonaId,
clear_history: clearHistory,
}),
});
if (!rebindRes.ok) {
const err = await rebindRes.json().catch(() => ({}));
alert(err.detail || 'Не удалось сменить персонажа');
return;
}
setCurrentPersona(chatSettingsPersonaId);
chatSettingsInitialPersonaId = chatSettingsPersonaId;
highlightPersonaBar(chatSettingsPersonaId);
await reloadChatFromServer(sessionId);
const blobRes = await fetch(`/chat/system/${sessionId}`);
if (blobRes.ok) renderSystemBlob(await blobRes.json());
}
await fetch(`/sessions/${sessionId}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
@@ -141,7 +274,7 @@ export function initChatSettings() {
let arc = {};
try { arc = JSON.parse(s.plot_arc_json || '{}'); } catch { /* ignore */ }
if (!arc || !Object.keys(arc).length) {
await bootstrapRpg(sessionId, currentPersona, genreValue, settings);
await bootstrapRpg(sessionId, chatSettingsPersonaId, genreValue, settings);
}
}
static/js/contextEditor.js
+105
View File
@@ -0,0 +1,105 @@
import { sessionId } from './state.js';
function fmtJson(raw, fallback) {
try {
return JSON.stringify(JSON.parse(raw || fallback), null, 2);
} catch {
return raw || fallback;
}
}
function parseStats(raw) {
try {
return { lust: 0, stamina: 10, tension: 0, ...JSON.parse(raw || '{}') };
} catch {
return { lust: 0, stamina: 10, tension: 0 };
}
}
export async function openContextEditor() {
if (!sessionId) return;
const res = await fetch(`/chat/system/${sessionId}`);
if (!res.ok) return;
const blob = await res.json();
document.getElementById('ctxStatusQuo').value = blob.status_quo || '';
document.getElementById('ctxGlobalPlot').value = blob.global_plot || '';
document.getElementById('ctxOutfit').value = fmtJson(blob.outfit_json, '[]');
document.getElementById('ctxScene').value = fmtJson(blob.scene_json, '{}');
document.getElementById('ctxFacts').value = fmtJson(blob.facts_json, '[]');
document.getElementById('ctxPlotArc').value = fmtJson(blob.plot_arc_json, '{}');
document.getElementById('ctxAffinity').value = String(blob.affinity ?? 0);
const stats = parseStats(blob.narrative_stats_json);
document.getElementById('ctxLust').value = String(stats.lust ?? 0);
document.getElementById('ctxStamina').value = String(stats.stamina ?? 10);
document.getElementById('ctxTension').value = String(stats.tension ?? 0);
const st = document.getElementById('contextEditorStatus');
if (st) {
st.textContent = '';
st.style.color = '';
}
document.getElementById('contextEditorModal')?.classList.add('open');
}
export function initContextEditor() {
document.getElementById('contextEditorOpen')?.addEventListener('click', () => {
openContextEditor();
});
document.getElementById('contextEditorCancel')?.addEventListener('click', () => {
document.getElementById('contextEditorModal')?.classList.remove('open');
});
document.getElementById('contextEditorSave')?.addEventListener('click', async () => {
if (!sessionId) return;
const statusEl = document.getElementById('contextEditorStatus');
const body = {
status_quo: document.getElementById('ctxStatusQuo')?.value ?? '',
global_plot: document.getElementById('ctxGlobalPlot')?.value ?? '',
outfit_json: document.getElementById('ctxOutfit')?.value ?? '[]',
scene_json: document.getElementById('ctxScene')?.value ?? '{}',
facts_json: document.getElementById('ctxFacts')?.value ?? '[]',
plot_arc_json: document.getElementById('ctxPlotArc')?.value ?? '{}',
affinity: Number(document.getElementById('ctxAffinity')?.value ?? 0),
lust: Number(document.getElementById('ctxLust')?.value ?? 0),
stamina: Number(document.getElementById('ctxStamina')?.value ?? 10),
tension: Number(document.getElementById('ctxTension')?.value ?? 0),
};
try {
const res = await fetch(`/sessions/${sessionId}/context`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
});
if (!res.ok) {
const err = await res.json().catch(() => ({}));
if (statusEl) {
statusEl.textContent = err.detail || res.statusText;
statusEl.style.color = '#e74c3c';
}
return;
}
const data = await res.json();
if (data.outfit_json) {
document.getElementById('ctxOutfit').value = fmtJson(data.outfit_json, '[]');
}
const { renderSystemBlob, applySessionUi } = await import('./sessions.js');
const { updateAffinityDisplay, updateStatsDisplay } = await import('./chat.js');
const blobRes = await fetch(`/chat/system/${sessionId}`);
if (blobRes.ok) renderSystemBlob(await blobRes.json());
const sessRes = await fetch(`/sessions/${sessionId}`);
if (sessRes.ok) applySessionUi(await sessRes.json());
if (data.affinity !== undefined) updateAffinityDisplay(data.affinity);
if (data.narrative_stats) updateStatsDisplay(data.narrative_stats);
if (statusEl) {
statusEl.textContent = 'Сохранено (outfit: цвета добавлены автоматически, если не указаны)';
statusEl.style.color = '#2ecc71';
}
} catch {
if (statusEl) {
statusEl.textContent = 'Ошибка сети';
statusEl.style.color = '#e74c3c';
}
}
});
}
static/js/debug.js
+217
View File
@@ -0,0 +1,217 @@
const $ = (id) => document.getElementById(id);
function fmt(obj) {
return typeof obj === 'string' ? obj : JSON.stringify(obj, null, 2);
}
async function api(path, opts = {}) {
const res = await fetch(path, {
headers: { 'Content-Type': 'application/json', ...(opts.headers || {}) },
...opts,
});
const text = await res.text();
let data;
try {
data = JSON.parse(text);
} catch {
data = text;
}
if (!res.ok) {
const detail = data?.detail || text || res.statusText;
throw new Error(`${res.status}: ${detail}`);
}
return data;
}
function initTabs() {
const tabs = document.querySelectorAll('#debugTabs button');
tabs.forEach((btn) => {
btn.addEventListener('click', () => {
tabs.forEach((t) => t.classList.remove('active'));
btn.classList.add('active');
document.querySelectorAll('.debug-panel').forEach((p) => p.classList.remove('active'));
$(`panel-${btn.dataset.tab}`).classList.add('active');
});
});
}
async function loadConfig() {
const c = await api('/debug/config');
$('configOut').textContent = fmt(c);
$('llmModel').placeholder = c.sd_prompt_model || c.system_model;
return c;
}
async function loadPersonas() {
const list = await api('/debug/personas');
const sel = $('sdPersona');
sel.innerHTML = '';
for (const p of list) {
const opt = document.createElement('option');
opt.value = p.persona_id;
opt.textContent = `${p.name} (${p.persona_id})`;
sel.appendChild(opt);
}
}
async function runSdPrompt() {
$('sdScene').textContent = '…';
$('sdPrompts').textContent = '…';
const body = {
persona_id: $('sdPersona').value,
chat_excerpt: $('sdChat').value,
outfit_json: $('sdOutfit').value || '[]',
use_prose: $('sdUseProse') ? $('sdUseProse').checked : false,
};
const app = $('sdAppearance').value.trim();
if (app) body.appearance_override = app;
const data = await api('/debug/sd-prompt', { method: 'POST', body: JSON.stringify(body) });
$('sdScene').textContent = data.scene ? fmt(data.scene) : (data.error || '—');
const prompts = [];
if (data.tags_only_full) prompts.push('=== TAGS + POV (no prose) ===\n' + data.tags_only_full);
if (data.hybrid_full) prompts.push('\n=== HYBRID (Comfy) ===\n' + data.hybrid_full);
if (!data.tags_only_full && data.tag_full) prompts.push('=== PROMPT ===\n' + data.tag_full);
$('sdPrompts').textContent = prompts.join('\n') || data.error || '—';
$('sdLlmRaw').textContent = [
`model: ${data.sd_prompt_model}`,
`dual: ${data.anima_dual}`,
'',
'--- system ---',
data.builder_system || '',
'',
'--- user ---',
data.builder_user || '',
'',
'--- raw ---',
data.llm_raw || data.error || '',
].join('\n');
if (data.tag_full || data.hybrid_full) {
const src = data.hybrid_full || data.tag_full;
const parts = src.includes('__NEGATIVE_PROMPT__')
? src.split('\n\n__NEGATIVE_PROMPT__\n\n')
: src.includes('\n\nNegative prompt:')
? src.split('\n\nNegative prompt:')
: [src, ''];
$('genPositive').value = parts[0] || '';
$('genNegative').value = parts[1] || '';
}
}
async function runLlm() {
$('llmOut').textContent = '…';
const data = await api('/debug/llm', {
method: 'POST',
body: JSON.stringify({
model: $('llmModel').value.trim(),
system: $('llmSystem').value,
user: $('llmUser').value,
}),
});
$('llmOut').textContent = `model: ${data.model}\n\n${data.response}`;
}
function fillModelSelect(sel, options, configured) {
const current = sel.querySelector('option')?.value ?? '';
sel.innerHTML = `<option value="">— env: ${configured || '—'} —</option>`;
for (const name of options || []) {
const opt = document.createElement('option');
opt.value = name;
opt.textContent = name;
if (name === configured) opt.selected = true;
sel.appendChild(opt);
}
}
async function loadComfyModels() {
$('comfyModelLists').textContent = 'Загрузка object_info…';
const data = await api('/debug/comfy/models');
const { models, configured } = data;
fillModelSelect($('genUnet'), models.unets, configured.unet);
fillModelSelect($('genClip'), models.clips, configured.clip);
fillModelSelect($('genVae'), models.vaes, configured.vae);
fillModelSelect($('genCkpt'), models.checkpoints, configured.checkpoint);
const wrap = $('comfyModelLists');
wrap.innerHTML = '';
for (const [key, list] of Object.entries(models)) {
const block = document.createElement('details');
block.className = 'model-list-block';
block.open = key === 'unets' || key === 'checkpoints';
block.innerHTML = `<summary>${key} (${list.length})</summary>`;
const ul = document.createElement('ul');
for (const item of list) {
const li = document.createElement('li');
li.textContent = item;
ul.appendChild(li);
}
block.appendChild(ul);
wrap.appendChild(block);
}
}
async function comfyPing() {
$('comfyPingOut').textContent = '…';
const data = await api('/debug/comfy/ping');
$('comfyPingOut').textContent = fmt(data);
}
async function comfyGenerate() {
$('comfyGenOut').textContent = 'Генерация…';
$('comfyImgWrap').classList.add('hidden');
const body = {
positive: $('genPositive').value,
negative: $('genNegative').value,
};
const u = $('genUnet').value;
const c = $('genClip').value;
const v = $('genVae').value;
const ck = $('genCkpt').value;
if (u) body.unet = u;
if (c) body.clip = c;
if (v) body.vae = v;
if (ck) body.checkpoint = ck;
const data = await api('/debug/comfy/generate', {
method: 'POST',
body: JSON.stringify(body),
});
$('comfyGenOut').textContent = fmt(data);
if (data.image_path) {
$('comfyImg').src = data.image_path + '?t=' + Date.now();
$('comfyImgWrap').classList.remove('hidden');
}
}
async function comfyRaw() {
$('comfyRawOut').textContent = '…';
const data = await api('/debug/comfy/raw', {
method: 'POST',
body: JSON.stringify({
method: $('rawMethod').value,
path: $('rawPath').value,
params_json: $('rawParams').value || '{}',
body_json: $('rawBody').value || '',
}),
});
$('comfyRawOut').textContent = fmt(data);
}
function bind() {
initTabs();
$('btnReloadConfig').addEventListener('click', loadConfig);
$('btnSdPrompt').addEventListener('click', () => runSdPrompt().catch(showErr));
$('btnLlm').addEventListener('click', () => runLlm().catch(showErr));
$('btnComfyPing').addEventListener('click', () => comfyPing().catch(showErr));
$('btnComfyModels').addEventListener('click', () => loadComfyModels().catch(showErr));
$('btnComfyGen').addEventListener('click', () => comfyGenerate().catch(showErr));
$('btnComfyRaw').addEventListener('click', () => comfyRaw().catch(showErr));
}
function showErr(e) {
alert(e.message || String(e));
}
bind();
loadConfig().catch(showErr);
loadPersonas().catch(showErr);
static/js/newChatWizard.js
+78 -45
View File
@@ -1,4 +1,9 @@
import { setSessionId, setCurrentPersona, currentPersona, dom } from './state.js';
import {
setSessionId,
setCurrentPersona,
getNewChatDefaultPersona,
dom,
} from './state.js';
import {
initWizard,
GENRE_LABELS,
@@ -7,9 +12,9 @@ import {
fillGreetingSelect,
getSelectedGreeting,
} from './utils.js';
import { personaIndex, highlightPersona } from './personas.js';
import { personaIndex } from './personas.js';
let newChatPersonaId = currentPersona;
let newChatPersonaId = getNewChatDefaultPersona();
let newChatGreetingCtx = null;
const newChatGenres = new Set();
const newChatModalEl = document.getElementById('newChatModal');
@@ -84,7 +89,7 @@ function fillNewChatPersonaGrid() {
const grid = document.getElementById('newChatPersonaGrid');
if (!grid) return;
grid.innerHTML = '';
newChatPersonaId = currentPersona;
newChatPersonaId = getNewChatDefaultPersona();
for (const p of personaIndex.values()) {
const card = document.createElement('button');
card.type = 'button';
@@ -121,34 +126,8 @@ function updateNewChatGenresLabel() {
}
}
async function bootstrapRpg(sid, personaId, genreValue, settings) {
const { updateQuestPanel, addMessage } = await import('./chat.js');
await fetch(`/sessions/${sid}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
rpg_enabled: true,
genre: genreValue,
rpg_settings_json: JSON.stringify(settings),
}),
});
const res = await fetch('/chat/rpg/bootstrap', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ session_id: sid, persona_id: personaId, genre: genreValue }),
});
if (res.ok) {
const data = await res.json();
if (data.quests) updateQuestPanel(data.quests);
if (data.plot_arc) {
const title = data.plot_arc.title || '';
const hint = data.plot_arc.next_beat_hint || '';
if (title || hint) addMessage('assistant', `📖 ${title}${hint ? '\n' + hint : ''}`);
}
}
}
export function openNewChatWizard() {
import('./personas.js').then(({ refreshPersonaBarHighlight }) => refreshPersonaBarHighlight());
fillNewChatPersonaGrid();
resetGenreGrid(document.getElementById('newChatGenreGrid'), newChatGenres);
updateNewChatGenresLabel();
@@ -161,8 +140,17 @@ export function openNewChatWizard() {
}
export async function createNewChatFromWizard() {
const { clearMessages, initChat, reloadChatFromServer } = await import('./chat.js');
const { loadSessions, applySessionUi } = await import('./sessions.js');
const {
clearMessages,
initChat,
reloadChatFromServer,
showImageGenerating,
removeImageGenerating,
updateQuestPanel,
updateAffinityDisplay,
renderChoices,
} = await import('./chat.js');
const { loadSessions, applySessionUi, renderSystemBlob } = await import('./sessions.js');
const sid = 'sess_' + Math.random().toString(36).slice(2, 10);
setSessionId(sid);
@@ -176,10 +164,23 @@ export async function createNewChatFromWizard() {
newChatWizard?.reset();
try {
const sessionPatch = { persona_id: newChatPersonaId, rpg_enabled: rpg };
if (rpg) {
sessionPatch.genre = [...newChatGenres].join(',') || 'adventure';
sessionPatch.rpg_settings_json = JSON.stringify({
dice: document.getElementById('ncSettingDice')?.checked ?? true,
narrator: document.getElementById('ncSettingNarrator')?.checked ?? true,
quests: document.getElementById('ncSettingQuests')?.checked ?? true,
affinity: document.getElementById('ncSettingAffinity')?.checked ?? true,
stats: document.getElementById('ncSettingStats')?.checked ?? false,
choices: document.getElementById('ncSettingChoices')?.checked ?? true,
});
}
await fetch(`/sessions/${sid}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ persona_id: newChatPersonaId, rpg_enabled: rpg }),
body: JSON.stringify(sessionPatch),
});
if (customTitle) {
@@ -194,25 +195,57 @@ export async function createNewChatFromWizard() {
dom.headerTitle.textContent = rpg ? `${pName} — RPG` : `${pName} — новый чат`;
}
highlightPersona(newChatPersonaId);
const { highlightPersonaBar } = await import('./personas.js');
highlightPersonaBar(newChatPersonaId);
const greetingOverride = getNewChatFirstMesOverride();
await initChat(greetingOverride ? { first_mes_override: greetingOverride } : {});
if (rpg) {
const genreValue = [...newChatGenres].join(',') || 'adventure';
const settings = {
dice: document.getElementById('ncSettingDice')?.checked ?? true,
narrator: document.getElementById('ncSettingNarrator')?.checked ?? true,
quests: document.getElementById('ncSettingQuests')?.checked ?? true,
affinity: document.getElementById('ncSettingAffinity')?.checked ?? true,
choices: document.getElementById('ncSettingChoices')?.checked ?? true,
};
await bootstrapRpg(sid, newChatPersonaId, genreValue, settings);
const assistantWrapper = dom.messagesEl.querySelector('.message.assistant');
showImageGenerating(assistantWrapper);
let openingData = null;
try {
const openingRes = await fetch('/chat/opening/process', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
session_id: sid,
persona_id: newChatPersonaId,
rpg,
}),
});
openingData = await openingRes.json();
if (!openingRes.ok) {
console.error('opening/process failed:', openingData.detail || openingRes.statusText);
}
} finally {
removeImageGenerating(assistantWrapper);
}
await reloadChatFromServer(sid);
if (openingData?.quests?.length) {
updateQuestPanel(openingData.quests);
}
if (openingData?.affinity !== undefined) {
updateAffinityDisplay(openingData.affinity);
}
if (openingData?.image_error) {
const wrapper = dom.messagesEl.querySelector('.message.assistant');
if (wrapper) {
const err = document.createElement('div');
err.className = 'image-error';
err.textContent = '🖼 ' + openingData.image_error;
wrapper.appendChild(err);
}
}
const sessionRes = await fetch(`/sessions/${sid}`);
if (sessionRes.ok) applySessionUi(await sessionRes.json());
const blobRes = await fetch(`/chat/system/${sid}`);
if (blobRes.ok) renderSystemBlob(await blobRes.json());
await loadSessions();
} catch (e) {
console.error('createNewChat error:', e);
static/js/personas.js
+18 -14
View File
@@ -1,5 +1,9 @@
import { currentPersona, setCurrentPersona, sessionId } from './state.js';
import { initChat } from './chat.js';
import {
currentPersona,
sessionId,
getNewChatDefaultPersona,
setNewChatDefaultPersona,
} from './state.js';
import { initWizard, fillGreetingSelect, getSelectedGreeting } from './utils.js';
export let personaIndex = new Map();
@@ -21,12 +25,18 @@ let cardImportWizard;
let cardPreview = null;
let cardImportFile = null;
export function highlightPersona(personaId) {
export function highlightPersonaBar(personaId) {
document.querySelectorAll('.persona-card').forEach(c => {
c.classList.toggle('active', c.dataset.id === personaId);
});
}
/** Active session → session persona; otherwise new-chat preset. */
export function refreshPersonaBarHighlight() {
const id = sessionId ? currentPersona : getNewChatDefaultPersona();
highlightPersonaBar(id);
}
export async function loadPersonas() {
const res = await fetch('/personas/');
const personas = await res.json();
@@ -37,9 +47,11 @@ export async function loadPersonas() {
const bar = document.getElementById('personaBar');
bar.innerHTML = '';
const barActiveId = sessionId ? currentPersona : getNewChatDefaultPersona();
personas.forEach(p => {
const card = document.createElement('div');
card.className = 'persona-card' + (p.persona_id === currentPersona ? ' active' : '');
card.className = 'persona-card' + (p.persona_id === barActiveId ? ' active' : '');
card.dataset.id = p.persona_id;
const isCard = p.persona_id.startsWith('card_');
const isCustomPersona = p.custom && !isCard;
@@ -131,16 +143,8 @@ export async function loadPersonas() {
}
export async function selectPersona(personaId) {
setCurrentPersona(personaId);
highlightPersona(personaId);
if (sessionId) {
await fetch(`/sessions/${sessionId}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ persona_id: personaId }),
});
await initChat();
}
setNewChatDefaultPersona(personaId);
highlightPersonaBar(personaId);
}
function fillImpCardForm(preview) {
static/js/rpFormat.js
+209
View File
@@ -0,0 +1,209 @@
/** Escape for safe text nodes (not HTML injection). */
function appendText(parent, text) {
if (!text) return;
parent.appendChild(document.createTextNode(text));
}
const PLAYER_CHOSE_RE = /^\[Player chose:\s*(.+)\]$/s;
const RP_TOKEN_RE = /("(?:[^"\\]|\\.)*"|«[^»]*»|'(?:[^'\\]|\\.)*'|\*\*[^*]+\*\*|\*[^*]+\*)/g;
const OUTCOME_CLASS = {
'critical failure': 'outcome-crit-fail',
failure: 'outcome-fail',
success: 'outcome-success',
'critical success': 'outcome-crit-success',
};
export function isPlayerChoiceContent(text) {
return PLAYER_CHOSE_RE.test((text || '').trim());
}
export function parsePlayerChoice(text) {
const m = (text || '').trim().match(PLAYER_CHOSE_RE);
return m ? m[1].trim() : null;
}
function appendPlayerChoice(frag, label) {
const wrap = document.createElement('span');
wrap.className = 'rp-choice';
const tag = document.createElement('span');
tag.className = 'rp-choice-tag';
tag.textContent = '🔘 Выбор';
wrap.appendChild(tag);
appendText(wrap, ' ');
const lab = document.createElement('span');
lab.className = 'rp-choice-label';
lab.textContent = label;
wrap.appendChild(lab);
frag.appendChild(wrap);
}
/**
* Build DOM fragment for RP formatting (dialogue, action, player choice).
*/
export function buildRpFormatFragment(text) {
const frag = document.createDocumentFragment();
if (!text) return frag;
const trimmed = text.trim();
const choiceLabel = parsePlayerChoice(trimmed);
if (choiceLabel !== null) {
appendPlayerChoice(frag, choiceLabel);
return frag;
}
let last = 0;
for (const m of trimmed.matchAll(RP_TOKEN_RE)) {
const idx = m.index ?? 0;
if (idx > last) appendText(frag, trimmed.slice(last, idx));
const token = m[0];
if (
(token.startsWith('"') && token.endsWith('"'))
|| (token.startsWith('«') && token.endsWith('»'))
|| (token.startsWith("'") && token.endsWith("'"))
) {
const span = document.createElement('span');
span.className = 'rp-dialogue';
span.textContent = token;
frag.appendChild(span);
} else if (token.startsWith('**') && token.endsWith('**')) {
const em = document.createElement('em');
em.className = 'rp-action';
em.textContent = token.slice(2, -2);
frag.appendChild(em);
} else if (token.startsWith('*') && token.endsWith('*')) {
const em = document.createElement('em');
em.className = 'rp-action';
em.textContent = token.slice(1, -1);
frag.appendChild(em);
} else {
appendText(frag, token);
}
last = idx + token.length;
}
if (last < trimmed.length) appendText(frag, trimmed.slice(last));
return frag;
}
/**
* Dice override block on user bubble (intent struck through → resolution).
*/
export function buildDiceOverrideFragment(resolution) {
const { intent_text, resolution_text, roll, outcome } = resolution;
const wrap = document.createElement('div');
wrap.className = 'dice-user-override';
const badge = document.createElement('div');
badge.className = `dice-user-badge ${OUTCOME_CLASS[outcome] || ''}`;
badge.textContent = `🎲 ${roll} · ${outcome || 'roll'}`;
wrap.appendChild(badge);
const row = document.createElement('div');
row.className = 'dice-user-row';
const struck = document.createElement('span');
struck.className = 'dice-intent-struck';
struck.textContent = intent_text || '';
row.appendChild(struck);
const arrow = document.createElement('span');
arrow.className = 'dice-intent-arrow';
arrow.textContent = '→';
row.appendChild(arrow);
const resolved = document.createElement('span');
resolved.className = 'dice-intent-resolved';
resolved.textContent = resolution_text || '';
row.appendChild(resolved);
wrap.appendChild(row);
return wrap;
}
export function applyDiceOverrideToBubble(bubble, resolution) {
if (!resolution?.resolution_text) return;
bubble.dataset.diceOverride = '1';
const raw = bubble.dataset.raw ?? '';
const frag = document.createDocumentFragment();
if (raw && !isPlayerChoiceContent(raw)) {
frag.appendChild(buildRpFormatFragment(raw));
frag.appendChild(document.createElement('br'));
} else if (raw) {
frag.appendChild(buildRpFormatFragment(raw));
frag.appendChild(document.createElement('br'));
}
frag.appendChild(buildDiceOverrideFragment(resolution));
bubble.innerHTML = '';
bubble.appendChild(frag);
bubble.classList.add('rp-formatted', 'has-dice-override');
}
export function applyRpFormatToBubble(bubble) {
if (bubble.dataset.diceOverride === '1' && bubble._diceResolution) {
applyDiceOverrideToBubble(bubble, bubble._diceResolution);
return;
}
const raw = bubble.dataset.raw ?? bubble.textContent ?? '';
bubble.dataset.raw = raw;
bubble.innerHTML = '';
bubble.appendChild(buildRpFormatFragment(raw));
bubble.classList.add('rp-formatted');
}
export function applyRpPlainToBubble(bubble) {
const raw = bubble.dataset.raw ?? bubble.textContent ?? '';
bubble.dataset.raw = raw;
bubble.textContent = raw;
bubble.classList.remove('rp-formatted');
}
export function attachFormatToggle(wrapper, bubble) {
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'format-btn';
btn.textContent = '↩ Текст';
let showingPlain = false;
const syncBtn = () => {
btn.textContent = showingPlain ? '✨' : '↩ Текст';
btn.title = showingPlain ? 'Форматировать' : 'Показать оригинал';
};
btn.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
if (showingPlain) {
if (bubble._diceResolution) {
applyDiceOverrideToBubble(bubble, bubble._diceResolution);
} else {
applyRpFormatToBubble(bubble);
}
showingPlain = false;
} else {
applyRpPlainToBubble(bubble);
showingPlain = true;
}
syncBtn();
});
syncBtn();
wrapper.appendChild(btn);
return btn;
}
export function initBubbleContent(bubble, rawText, { formatted = true, actionResolution = null } = {}) {
bubble.dataset.raw = rawText ?? '';
bubble._diceResolution = actionResolution || null;
if (actionResolution?.resolution_text && formatted) {
bubble.dataset.diceOverride = '1';
applyDiceOverrideToBubble(bubble, actionResolution);
return;
}
if (formatted && rawText) {
applyRpFormatToBubble(bubble);
} else {
bubble.textContent = rawText ?? '';
bubble.classList.remove('rp-formatted', 'has-dice-override');
}
}
static/js/sessions.js
+33 -6
View File
@@ -1,8 +1,10 @@
import {
sessionId, setSessionId, setCurrentPersona, currentPersona, dom, setRpgEnabled,
} from './state.js';
import { updateQuestPanel, updateAffinityDisplay } from './chat.js';
import { highlightPersona, personaIndex } from './personas.js';
import {
updateQuestPanel, updateAffinityDisplay, updateStatsDisplay, hideStatsDisplay,
} from './chat.js';
import { highlightPersonaBar, personaIndex } from './personas.js';
import { formatSessionDate } from './utils.js';
import { openNewChatWizard } from './newChatWizard.js';
@@ -35,6 +37,16 @@ export function applySessionUi(session) {
dom.affinityDisplay?.classList.add('hidden');
}
if (rpgOn && settings.stats) {
try {
updateStatsDisplay(JSON.parse(session.narrative_stats_json || '{}'));
} catch {
hideStatsDisplay();
}
} else {
hideStatsDisplay();
}
if (rpgOn && settings.quests) {
fetch(`/sessions/${session.session_id}/quests`)
.then(r => r.ok ? r.json() : [])
@@ -114,7 +126,7 @@ export async function loadChatHistory(id) {
const s = await sessionRes.json();
if (s.persona_id) {
setCurrentPersona(s.persona_id);
highlightPersona(s.persona_id);
highlightPersonaBar(s.persona_id);
}
applySessionUi(s);
}
@@ -155,7 +167,7 @@ export async function initSessions() {
let _prevBlobSections = {};
function renderSystemBlob(blob) {
export function renderSystemBlob(blob) {
const tryFmt = (str, fallback = '') => {
try { return JSON.stringify(JSON.parse(str), null, 2); } catch { return str || fallback; }
};
@@ -165,13 +177,26 @@ function renderSystemBlob(blob) {
return ` ${icon} [${q.status}] ${q.title}`;
}).join('\n');
const personaLine = blob.persona_id
? `[persona] ${blob.persona_name || blob.persona_id} (${blob.persona_id})`
: '';
const ctx = blob.context_usage;
const ctxLine = ctx
? `[context] ~${ctx.tokens_est} / ${ctx.max_tokens_est} tokens (${ctx.percent}%) · ${ctx.chars} chars`
: '';
const sections = {
context: ctxLine,
persona: personaLine,
system_prompt: blob.system_prompt ? `[system_prompt]\n${blob.system_prompt}` : '',
status_quo: blob.status_quo ? `[status_quo]\n${blob.status_quo}` : '',
affinity: blob.affinity != null ? `[affinity] ${blob.affinity}` : '',
scene: blob.scene_json && blob.scene_json !== '{}' ? `[scene]\n${tryFmt(blob.scene_json)}` : '',
stats: blob.narrative_stats_json && blob.narrative_stats_json !== '{}' ? `[stats]\n${tryFmt(blob.narrative_stats_json)}` : '',
genre: blob.genre ? `[genre] ${blob.genre}` : '',
rpg_settings: blob.rpg_settings_json && blob.rpg_settings_json !== '{}' ? `[rpg_settings]\n${tryFmt(blob.rpg_settings_json)}` : '',
outfit: blob.outfit_json && blob.outfit_json !== '[]' ? `[outfit]\n${tryFmt(blob.outfit_json)}` : '',
outfit: `[outfit]\n${tryFmt(blob.outfit_json ?? '[]')}`,
facts: blob.facts_json && blob.facts_json !== '[]' ? `[facts]\n${tryFmt(blob.facts_json)}` : '',
plot_arc: blob.plot_arc_json && blob.plot_arc_json !== '{}' ? `[plot_arc]\n${tryFmt(blob.plot_arc_json)}` : '',
quests: questLines ? `[quests]\n${questLines}` : '',
@@ -184,7 +209,9 @@ function renderSystemBlob(blob) {
if (!text) continue;
const span = document.createElement('span');
span.textContent = text;
if (_prevBlobSections[key] && _prevBlobSections[key] !== text) {
if (key === 'context' && ctx && ctx.percent > 80) {
span.className = 'blob-context-warn';
} else if (_prevBlobSections[key] && _prevBlobSections[key] !== text) {
span.className = 'blob-changed';
setTimeout(() => span.classList.remove('blob-changed'), 3000);
}
static/js/state.js
+18 -3
View File
@@ -1,17 +1,31 @@
export let sessionId = localStorage.getItem('chat_session_id') || null;
export let currentPersona = localStorage.getItem('persona_id') || 'default';
/** Persona bound to the active session (from server, not global preset). */
export let currentPersona = 'default';
export let sidebarOpen = true;
export let rpgEnabled = false;
const NEW_CHAT_PERSONA_KEY = 'new_chat_persona_id';
export function toggleSidebar() { sidebarOpen = !sidebarOpen; return sidebarOpen; }
export function getNewChatDefaultPersona() {
return localStorage.getItem(NEW_CHAT_PERSONA_KEY)
|| localStorage.getItem('persona_id')
|| 'default';
}
export function setNewChatDefaultPersona(id) {
const pid = id || 'default';
localStorage.setItem(NEW_CHAT_PERSONA_KEY, pid);
}
export function setSessionId(id) {
sessionId = id;
if (id) localStorage.setItem('chat_session_id', id);
}
export function setCurrentPersona(id) {
currentPersona = id;
localStorage.setItem('persona_id', id);
currentPersona = id || 'default';
}
export function setRpgEnabled(v) { rpgEnabled = !!v; }
@@ -25,6 +39,7 @@ export const dom = {
headerTitle: document.getElementById('headerTitle'),
emptyState: document.getElementById('emptyState'),
affinityDisplay: document.getElementById('affinityDisplay'),
statsDisplay: document.getElementById('statsDisplay'),
rpgBadge: document.getElementById('rpgBadge'),
systemBlob: document.getElementById('systemBlob'),
systemBlobContent: document.getElementById('systemBlobContent'),
static/js/utils.js
+21 -1
View File
@@ -6,12 +6,32 @@ export function parseImagePromptFromContent(content) {
return { text, prompt };
}
export function splitSdPromptForCopy(fullPrompt) {
if (!fullPrompt) return '';
const marker = '\n\nNegative prompt:';
const i = fullPrompt.indexOf(marker);
return (i >= 0 ? fullPrompt.slice(0, i) : fullPrompt).trim();
}
export async function copyToClipboard(text) {
if (!text) return false;
try {
await navigator.clipboard.writeText(text);
return true;
} catch {
return false;
try {
const ta = document.createElement('textarea');
ta.value = text;
ta.setAttribute('readonly', '');
ta.style.cssText = 'position:fixed;left:-9999px;top:0';
document.body.appendChild(ta);
ta.select();
const ok = document.execCommand('copy');
document.body.removeChild(ta);
return ok;
} catch {
return false;
}
}
}