Fixed RPG
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
+34
-1
@@ -136,11 +136,13 @@ header h1 { font-size: 1.1rem; color: #e94560; }
|
||||
.system-blob-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
justify-content: space-between;
|
||||
color: #888;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.system-blob-header span { flex: 1; }
|
||||
.system-blob-header button {
|
||||
background: transparent;
|
||||
border: 1px solid #0f3460;
|
||||
@@ -150,6 +152,10 @@ header h1 { font-size: 1.1rem; color: #e94560; }
|
||||
cursor: pointer;
|
||||
}
|
||||
.system-blob-header button:hover { border-color: #e94560; color: #e94560; }
|
||||
#systemBlobRefresh { font-size: 1rem; padding: 2px 8px; }
|
||||
#systemBlobRefresh.spinning { animation: spin 0.6s linear infinite; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.blob-changed { background: rgba(255, 200, 50, 0.15); border-radius: 3px; transition: background 2s ease; }
|
||||
.system-blob-content {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
@@ -278,6 +284,31 @@ header h1 { font-size: 1.1rem; color: #e94560; }
|
||||
.translate-btn:disabled { opacity: 0.5; cursor: default; }
|
||||
|
||||
.chat-image { margin-top: 8px; max-width: 100%; border-radius: 8px; border: 1px solid #0f3460; }
|
||||
|
||||
.image-generating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 8px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 8px;
|
||||
border: 1px dashed #533483;
|
||||
background: rgba(15, 52, 96, 0.45);
|
||||
color: #bbb;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.image-generating-spinner {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid #0f3460;
|
||||
border-top-color: #e94560;
|
||||
border-radius: 50%;
|
||||
animation: image-spin 0.75s linear infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@keyframes image-spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.gen-image-btn:disabled { opacity: 0.6; cursor: wait; }
|
||||
.image-error { margin-top: 6px; font-size: 0.75rem; color: #888; }
|
||||
|
||||
.choice-row {
|
||||
@@ -407,11 +438,13 @@ textarea:focus { border-color: #e94560; }
|
||||
.wizard-nav-btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
||||
.modal h2 { font-size: 1.1rem; color: #e94560; }
|
||||
.modal label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: #888; }
|
||||
.modal input, .modal textarea {
|
||||
.modal input, .modal textarea, .modal select {
|
||||
background: #1a1a2e; border: 1px solid #0f3460;
|
||||
border-radius: 8px; color: #e0e0e0;
|
||||
padding: 8px 10px; outline: none; font-family: inherit;
|
||||
}
|
||||
.modal select { cursor: pointer; }
|
||||
.modal select[size] { min-height: 80px; }
|
||||
.modal-buttons { display: flex; gap: 8px; justify-content: flex-end; }
|
||||
.modal-wizard-footer { justify-content: space-between; align-items: center; }
|
||||
.modal-buttons button { padding: 8px 18px; border-radius: 8px; border: none; cursor: pointer; }
|
||||
|
||||
+59
-14
@@ -35,6 +35,7 @@
|
||||
<div class="system-blob" id="systemBlob">
|
||||
<div class="system-blob-header">
|
||||
<span>System</span>
|
||||
<button type="button" id="systemBlobRefresh" title="Обновить">↻</button>
|
||||
<button type="button" id="systemBlobToggle">Скрыть</button>
|
||||
</div>
|
||||
<pre class="system-blob-content" id="systemBlobContent">—</pre>
|
||||
@@ -126,20 +127,53 @@
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="cardModalOverlay">
|
||||
<div class="modal">
|
||||
<h2>📥 Импорт карточки (chub.io / V2)</h2>
|
||||
<label>Файл JSON или PNG
|
||||
<input type="file" id="cardFile" accept=".json,.png">
|
||||
</label>
|
||||
<label>LoRA
|
||||
<input type="text" id="cardLora" placeholder="CharacterLoRA">
|
||||
</label>
|
||||
<label>Вес LoRA
|
||||
<input type="number" id="cardLoraWeight" value="0.8" min="0" max="2" step="0.1">
|
||||
</label>
|
||||
<div class="modal-buttons">
|
||||
<div class="modal modal-wizard" style="max-width:520px">
|
||||
<div class="modal-wizard-header">
|
||||
<h2>📥 Импорт карточки</h2>
|
||||
<div class="wizard-steps">
|
||||
<span class="wizard-step-dot active" data-step="1">1</span>
|
||||
<span class="wizard-step-line"></span>
|
||||
<span class="wizard-step-dot" data-step="2">2</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-wizard-body">
|
||||
<div class="wizard-page active" data-step="1">
|
||||
<p class="wizard-page-title">Файл</p>
|
||||
<label>JSON или PNG (chub.io / V2)
|
||||
<input type="file" id="cardFile" accept=".json,.png">
|
||||
</label>
|
||||
<p class="wizard-hint" id="cardPreviewHint"></p>
|
||||
<label>LoRA
|
||||
<input type="text" id="cardLora" placeholder="CharacterLoRA">
|
||||
</label>
|
||||
<label>Вес LoRA
|
||||
<input type="number" id="cardLoraWeight" value="0.8" min="0" max="2" step="0.1">
|
||||
</label>
|
||||
</div>
|
||||
<div class="wizard-page" data-step="2">
|
||||
<p class="wizard-page-title">Проверь и отредактируй</p>
|
||||
<label>Имя <input type="text" id="impCardName"></label>
|
||||
<label>Описание <textarea id="impCardDescription" rows="3"></textarea></label>
|
||||
<label>Личность <textarea id="impCardPersonality" rows="2"></textarea></label>
|
||||
<label>Сценарий <textarea id="impCardScenario" rows="2"></textarea></label>
|
||||
<label>Первое сообщение
|
||||
<select id="impCardGreetingSelect"></select>
|
||||
</label>
|
||||
<label>Текст первого сообщения
|
||||
<textarea id="impCardFirstMes" rows="4"></textarea>
|
||||
</label>
|
||||
<p class="wizard-hint hidden" id="impCardAltHint"></p>
|
||||
<label>Пример диалога <textarea id="impCardMesExample" rows="2"></textarea></label>
|
||||
<label>Теги внешности (SD) <input type="text" id="impCardAppearance"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-buttons modal-wizard-footer">
|
||||
<button id="cardModalCancel" type="button">Отмена</button>
|
||||
<button id="cardModalImport" type="button">Импорт</button>
|
||||
<div class="wizard-nav">
|
||||
<button id="cardModalPrev" type="button" class="wizard-nav-btn hidden">← Назад</button>
|
||||
<button id="cardModalNext" type="button" class="wizard-nav-btn">Далее →</button>
|
||||
<button id="cardModalImport" type="button" class="hidden" style="background:#e94560;color:white">Импорт</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -156,6 +190,9 @@
|
||||
<label>Личность <textarea id="editPersonality" rows="3"></textarea></label>
|
||||
<label>Сценарий <textarea id="editScenario" rows="3"></textarea></label>
|
||||
<label>Первое сообщение <textarea id="editFirstMes" rows="3"></textarea></label>
|
||||
<label class="hidden" id="editCardAltBlock">Альтернативные приветствия (из карточки)
|
||||
<select id="editCardGreetingSelect" size="4"></select>
|
||||
</label>
|
||||
<label>Пример диалога <textarea id="editMesExample" rows="3"></textarea></label>
|
||||
<label>Теги внешности (SD) <input type="text" id="editAppearance" placeholder="silver hair, yellow eyes, wolf ears, black cloak"></label>
|
||||
<label>LoRA <input type="text" id="editLora" placeholder="CharacterLoRA"></label>
|
||||
@@ -226,6 +263,14 @@
|
||||
<label>Название чата
|
||||
<input type="text" id="newChatTitle" placeholder="Оставь пустым — сгенерируем автоматически">
|
||||
</label>
|
||||
<div id="newChatGreetingBlock" class="hidden" style="margin-top:12px">
|
||||
<label>Первое сообщение
|
||||
<select id="newChatGreetingSelect"></select>
|
||||
</label>
|
||||
<label>Текст (можно отредактировать)
|
||||
<textarea id="newChatGreetingText" rows="3"></textarea>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="newChatRpgStep" class="hidden">
|
||||
<p class="wizard-page-title">Жанры и настройки RPG</p>
|
||||
@@ -301,6 +346,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="/static/js/app.js"></script>
|
||||
<script type="module" src="/static/js/app.js?v=4"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+3
-3
@@ -1,7 +1,7 @@
|
||||
import { toggleSidebar, dom } from './state.js';
|
||||
import {
|
||||
initSessions, openNewChatWizard, initNewChatWizard, initChatSettings, openChatSettings,
|
||||
} from './sessions.js';
|
||||
import { initSessions } from './sessions.js';
|
||||
import { openNewChatWizard, initNewChatWizard } from './newChatWizard.js';
|
||||
import { openChatSettings, initChatSettings } from './chatSettings.js';
|
||||
import { loadPersonas, initPersonaModals } from './personas.js';
|
||||
import { sendMessage, clearHistory } from './chat.js';
|
||||
|
||||
|
||||
+131
-160
@@ -1,13 +1,11 @@
|
||||
import { sessionId, currentPersona, dom } from './state.js';
|
||||
import { parseImagePromptFromContent, copyToClipboard } from './utils.js';
|
||||
|
||||
export async function initChat() {
|
||||
export async function initChat(options = {}) {
|
||||
if (!sessionId || !currentPersona) return;
|
||||
const res = await fetch('/chat/init', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ message: '', session_id: sessionId, persona_id: currentPersona }),
|
||||
});
|
||||
const payload = { message: '', session_id: sessionId, persona_id: currentPersona };
|
||||
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;
|
||||
const data = await res.json();
|
||||
if (data.first_mes) addMessage('assistant', data.first_mes);
|
||||
@@ -21,7 +19,6 @@ export function updateEmptyState() {
|
||||
export function createImagePromptBlock(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>';
|
||||
@@ -37,17 +34,43 @@ export function createImagePromptBlock(promptText) {
|
||||
});
|
||||
header.appendChild(copyBtn);
|
||||
|
||||
const genBtn = document.createElement('button');
|
||||
genBtn.type = 'button';
|
||||
genBtn.className = 'gen-image-btn';
|
||||
genBtn.textContent = '🖼 Генерировать';
|
||||
genBtn.addEventListener('click', () => generateImageViaA1111(promptText, block));
|
||||
header.appendChild(genBtn);
|
||||
const regenBtn = document.createElement('button');
|
||||
regenBtn.type = 'button';
|
||||
regenBtn.className = 'copy-prompt-btn';
|
||||
regenBtn.textContent = '🖼 Перегенерировать';
|
||||
regenBtn.addEventListener('click', async () => {
|
||||
const wrapper = block.parentElement;
|
||||
regenBtn.disabled = true;
|
||||
regenBtn.textContent = '⏳…';
|
||||
wrapper?.querySelector('.chat-image')?.remove();
|
||||
wrapper?.querySelector('.image-error')?.remove();
|
||||
showImageGenerating(wrapper);
|
||||
try {
|
||||
const res = await fetch('/images/generate', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ session_id: sessionId, prompt: promptText }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.detail || res.statusText);
|
||||
removeImageGenerating(wrapper);
|
||||
appendChatImage(wrapper, data.image_path);
|
||||
} catch (e) {
|
||||
removeImageGenerating(wrapper);
|
||||
const err = document.createElement('div');
|
||||
err.className = 'image-error';
|
||||
err.textContent = '🖼 ' + e.message;
|
||||
wrapper?.appendChild(err);
|
||||
} finally {
|
||||
regenBtn.disabled = false;
|
||||
regenBtn.textContent = '🖼 Перегенерировать';
|
||||
}
|
||||
});
|
||||
header.appendChild(regenBtn);
|
||||
|
||||
const textEl = document.createElement('span');
|
||||
textEl.className = 'prompt-text';
|
||||
textEl.textContent = promptText;
|
||||
|
||||
block.appendChild(header);
|
||||
block.appendChild(textEl);
|
||||
return block;
|
||||
@@ -60,37 +83,38 @@ const OUTCOME_CLASS = {
|
||||
'critical success': 'outcome-crit-success',
|
||||
};
|
||||
|
||||
function renderNarratorMessage(narrator) {
|
||||
// narrator = { roll, outcome, text }
|
||||
function buildNarratorEl(narrator) {
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'message narrator';
|
||||
|
||||
const label = document.createElement('div');
|
||||
label.className = 'label';
|
||||
label.textContent = '📖 Рассказчик';
|
||||
wrapper.appendChild(label);
|
||||
|
||||
const bubble = document.createElement('div');
|
||||
bubble.className = 'bubble';
|
||||
|
||||
const diceBlock = document.createElement('div');
|
||||
diceBlock.className = `dice-block ${OUTCOME_CLASS[narrator.outcome] || ''}`;
|
||||
diceBlock.innerHTML = `<span class="dice-icon">🎲</span><span class="dice-roll">${narrator.roll}</span><span class="dice-outcome">${narrator.outcome}</span>`;
|
||||
bubble.appendChild(diceBlock);
|
||||
|
||||
if (narrator.roll != null) {
|
||||
const diceBlock = document.createElement('div');
|
||||
diceBlock.className = `dice-block ${OUTCOME_CLASS[narrator.outcome] || ''}`;
|
||||
diceBlock.innerHTML = `<span class="dice-icon">🎲</span><span class="dice-roll">${narrator.roll}</span><span class="dice-outcome">${narrator.outcome}</span>`;
|
||||
bubble.appendChild(diceBlock);
|
||||
}
|
||||
const textEl = document.createElement('div');
|
||||
textEl.className = 'narrator-text';
|
||||
textEl.textContent = narrator.text;
|
||||
bubble.appendChild(textEl);
|
||||
|
||||
wrapper.appendChild(bubble);
|
||||
dom.messagesEl.appendChild(wrapper);
|
||||
dom.messagesEl.scrollTop = dom.messagesEl.scrollHeight;
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
function renderNarratorMessage(narrator) {
|
||||
const el = buildNarratorEl(narrator);
|
||||
dom.messagesEl.appendChild(el);
|
||||
dom.messagesEl.scrollTop = dom.messagesEl.scrollHeight;
|
||||
return el;
|
||||
}
|
||||
|
||||
function renderChoices(wrapper, choices) {
|
||||
if (!choices || !choices.length) return;
|
||||
if (!choices?.length) return;
|
||||
const row = document.createElement('div');
|
||||
row.className = 'choice-row';
|
||||
for (const c of choices) {
|
||||
@@ -98,20 +122,17 @@ function renderChoices(wrapper, choices) {
|
||||
btn.type = 'button';
|
||||
btn.className = 'choice-btn';
|
||||
btn.textContent = c.label;
|
||||
btn.addEventListener('click', () => {
|
||||
sendMessage(c.label, true);
|
||||
});
|
||||
btn.addEventListener('click', () => sendMessage(c.label, true));
|
||||
row.appendChild(btn);
|
||||
}
|
||||
wrapper.appendChild(row);
|
||||
}
|
||||
|
||||
function renderDebugBlocks(wrapper, blocks) {
|
||||
if (!blocks || !blocks.length) return;
|
||||
if (!blocks?.length) return;
|
||||
for (const b of blocks) {
|
||||
if (!b?.text) continue;
|
||||
if (b.type === 'narrator_injection') {
|
||||
// Show beat injections as narrator bubbles (no dice)
|
||||
const w = document.createElement('div');
|
||||
w.className = 'message narrator';
|
||||
const lbl = document.createElement('div');
|
||||
@@ -124,7 +145,6 @@ function renderDebugBlocks(wrapper, blocks) {
|
||||
w.appendChild(bub);
|
||||
dom.messagesEl.appendChild(w);
|
||||
}
|
||||
// facts/status_quo/plot_arc — silently skip (debug only, not shown to user)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -149,31 +169,6 @@ export function updateAffinityDisplay(affinity) {
|
||||
el.className = `affinity-display ${affinity > 5 ? 'affinity-high' : affinity < -3 ? 'affinity-low' : ''}`;
|
||||
}
|
||||
|
||||
async function generateImageViaA1111(promptText, block) {
|
||||
block.parentElement.querySelector('.chat-image')?.remove();
|
||||
block.parentElement.querySelector('.image-error')?.remove();
|
||||
|
||||
try {
|
||||
const res = await fetch('/images/generate', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ session_id: sessionId, prompt: promptText }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.detail || res.statusText);
|
||||
|
||||
const img = document.createElement('img');
|
||||
img.className = 'chat-image';
|
||||
img.src = data.image_path;
|
||||
block.parentElement.appendChild(img);
|
||||
} catch (e) {
|
||||
const err = document.createElement('div');
|
||||
err.className = 'image-error';
|
||||
err.textContent = '🖼 ' + e.message;
|
||||
block.parentElement.appendChild(err);
|
||||
}
|
||||
}
|
||||
|
||||
export function appendChatImage(wrapper, imagePath) {
|
||||
if (!imagePath) return;
|
||||
const img = document.createElement('img');
|
||||
@@ -182,20 +177,31 @@ export function appendChatImage(wrapper, imagePath) {
|
||||
wrapper.appendChild(img);
|
||||
}
|
||||
|
||||
export function showImageGenerating(wrapper) {
|
||||
if (!wrapper || wrapper.querySelector('.image-generating')) return;
|
||||
const el = document.createElement('div');
|
||||
el.className = 'image-generating';
|
||||
el.setAttribute('role', 'status');
|
||||
el.innerHTML = '<span class="image-generating-spinner" aria-hidden="true"></span><span class="image-generating-text">Генерация изображения в ComfyUI…</span>';
|
||||
wrapper.appendChild(el);
|
||||
dom.messagesEl.scrollTop = dom.messagesEl.scrollHeight;
|
||||
}
|
||||
|
||||
export function removeImageGenerating(wrapper) {
|
||||
wrapper?.querySelector('.image-generating')?.remove();
|
||||
}
|
||||
|
||||
function attachMessageActions(wrapper, messageId, role) {
|
||||
if (!messageId) return;
|
||||
wrapper.dataset.messageId = String(messageId);
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'message-actions';
|
||||
|
||||
const editBtn = document.createElement('button');
|
||||
editBtn.type = 'button';
|
||||
editBtn.textContent = '✏️';
|
||||
editBtn.title = 'Редактировать';
|
||||
editBtn.addEventListener('click', () => startEditMessage(wrapper, messageId));
|
||||
actions.appendChild(editBtn);
|
||||
|
||||
if (role === 'assistant') {
|
||||
const regenBtn = document.createElement('button');
|
||||
regenBtn.type = 'button';
|
||||
@@ -204,14 +210,12 @@ function attachMessageActions(wrapper, messageId, role) {
|
||||
regenBtn.addEventListener('click', () => regenerateMessage(messageId, wrapper));
|
||||
actions.appendChild(regenBtn);
|
||||
}
|
||||
|
||||
const branchBtn = document.createElement('button');
|
||||
branchBtn.type = 'button';
|
||||
branchBtn.textContent = '🌿';
|
||||
branchBtn.title = 'Ветка отсюда';
|
||||
branchBtn.addEventListener('click', () => forkFromMessage(messageId));
|
||||
actions.appendChild(branchBtn);
|
||||
|
||||
wrapper.appendChild(actions);
|
||||
}
|
||||
|
||||
@@ -224,7 +228,6 @@ async function startEditMessage(wrapper, messageId) {
|
||||
ta.value = original;
|
||||
bubble.replaceWith(ta);
|
||||
wrapper.querySelector('.message-actions')?.remove();
|
||||
|
||||
const saveRow = document.createElement('div');
|
||||
saveRow.className = 'message-actions';
|
||||
const saveBtn = document.createElement('button');
|
||||
@@ -234,17 +237,10 @@ async function startEditMessage(wrapper, messageId) {
|
||||
saveRow.appendChild(saveBtn);
|
||||
saveRow.appendChild(cancelBtn);
|
||||
wrapper.appendChild(saveRow);
|
||||
|
||||
const truncate = role => confirm(
|
||||
role === 'user'
|
||||
? 'Удалить все сообщения после этого? (рекомендуется)'
|
||||
: 'Удалить все сообщения после этого?',
|
||||
);
|
||||
|
||||
cancelBtn.addEventListener('click', () => reloadChatFromServer(sessionId));
|
||||
saveBtn.addEventListener('click', async () => {
|
||||
const role = wrapper.classList.contains('user') ? 'user' : 'assistant';
|
||||
const doTruncate = truncate(role);
|
||||
const doTruncate = confirm(role === 'user' ? 'Удалить все сообщения после этого? (рекомендуется)' : 'Удалить все сообщения после этого?');
|
||||
const res = await fetch(`/chat/messages/${messageId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
@@ -266,11 +262,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, persona_id: currentPersona, message_id: messageId }),
|
||||
});
|
||||
if (!res.ok) throw new Error('Ошибка: ' + res.status);
|
||||
removeTyping();
|
||||
@@ -315,6 +307,8 @@ export async function reloadChatFromServer(id) {
|
||||
});
|
||||
}
|
||||
|
||||
const IMAGE_PROMPT_RE = /\[IMAGE_PROMPT:.*?\]/gs;
|
||||
|
||||
async function consumeStream(res) {
|
||||
const reader = res.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
@@ -324,71 +318,80 @@ async function consumeStream(res) {
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
|
||||
buffer += decoder.decode(value, { stream: true });
|
||||
const lines = buffer.split('\n');
|
||||
buffer = lines.pop();
|
||||
|
||||
for (const line of lines) {
|
||||
if (!line.startsWith('data: ')) continue;
|
||||
try {
|
||||
const data = JSON.parse(line.slice(6));
|
||||
if (data.chunk !== undefined) {
|
||||
if (!bubble) {
|
||||
bubble = addMessage('assistant', '');
|
||||
bubble.classList.add('typing-active');
|
||||
}
|
||||
bubble.textContent += data.chunk;
|
||||
bubble.textContent = bubble.textContent.replace(/\[IMAGE_PROMPT:.*?\]/gs, '').trim();
|
||||
dom.messagesEl.scrollTop = dom.messagesEl.scrollHeight;
|
||||
let data;
|
||||
try { data = JSON.parse(line.slice(6)); } catch { continue; }
|
||||
|
||||
// Narrator arrives BEFORE chunks — render immediately
|
||||
if (data.narrator) {
|
||||
renderNarratorMessage(data.narrator);
|
||||
}
|
||||
|
||||
if (data.chunk !== undefined) {
|
||||
if (!bubble) {
|
||||
bubble = addMessage('assistant', '');
|
||||
bubble.classList.add('typing-active');
|
||||
}
|
||||
if (data.done) {
|
||||
bubble?.classList.remove('typing-active');
|
||||
if (data.narrator && !bubble) {
|
||||
renderNarratorMessage(data.narrator);
|
||||
} else if (data.narrator && bubble) {
|
||||
const assistantWrapper = bubble.parentElement;
|
||||
dom.messagesEl.insertBefore(buildNarratorWrapper(data.narrator), assistantWrapper);
|
||||
}
|
||||
if (data.image_prompt && bubble) {
|
||||
bubble.parentElement.appendChild(createImagePromptBlock(data.image_prompt));
|
||||
}
|
||||
if (data.image_path && bubble) {
|
||||
appendChatImage(bubble.parentElement, data.image_path);
|
||||
}
|
||||
if (data.image_error && bubble) {
|
||||
const err = document.createElement('div');
|
||||
err.className = 'image-error';
|
||||
err.textContent = '🖼 ' + data.image_error;
|
||||
bubble.parentElement.appendChild(err);
|
||||
}
|
||||
if (data.choices && bubble) {
|
||||
renderChoices(bubble.parentElement, data.choices);
|
||||
}
|
||||
if (data.debug) {
|
||||
renderDebugBlocks(bubble?.parentElement || dom.messagesEl, data.debug);
|
||||
}
|
||||
if (data.affinity !== undefined) {
|
||||
updateAffinityDisplay(data.affinity);
|
||||
}
|
||||
if (data.quests?.length) {
|
||||
updateQuestPanel(data.quests);
|
||||
}
|
||||
await reloadChatFromServer(sessionId);
|
||||
const { loadSessions } = await import('./sessions.js');
|
||||
loadSessions();
|
||||
bubble.textContent += data.chunk;
|
||||
dom.messagesEl.scrollTop = dom.messagesEl.scrollHeight;
|
||||
}
|
||||
|
||||
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));
|
||||
}
|
||||
} catch { /* skip */ }
|
||||
showImageGenerating(wrapper);
|
||||
dom.messagesEl.scrollTop = dom.messagesEl.scrollHeight;
|
||||
}
|
||||
|
||||
if (data.done) {
|
||||
const wrapper = bubble?.parentElement;
|
||||
removeImageGenerating(wrapper);
|
||||
bubble?.classList.remove('typing-active');
|
||||
|
||||
// Strip IMAGE_PROMPT tag from final text
|
||||
if (bubble) {
|
||||
bubble.textContent = bubble.textContent.replace(IMAGE_PROMPT_RE, '').trim();
|
||||
}
|
||||
|
||||
if (data.image_prompt && wrapper && !wrapper.querySelector('.image-prompt-block')) {
|
||||
wrapper.appendChild(createImagePromptBlock(data.image_prompt));
|
||||
}
|
||||
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);
|
||||
}
|
||||
if (data.image_error && wrapper) {
|
||||
const err = document.createElement('div');
|
||||
err.className = 'image-error';
|
||||
err.textContent = '🖼 ' + data.image_error;
|
||||
wrapper.appendChild(err);
|
||||
}
|
||||
if (data.choices?.length && bubble) renderChoices(bubble.parentElement, data.choices);
|
||||
if (data.debug) renderDebugBlocks(bubble?.parentElement || dom.messagesEl, data.debug);
|
||||
if (data.affinity !== undefined) updateAffinityDisplay(data.affinity);
|
||||
if (data.quests?.length) updateQuestPanel(data.quests);
|
||||
|
||||
const { loadSessions } = await import('./sessions.js');
|
||||
loadSessions();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function addMessage(role, content = '', imagePrompt = null, imagePath = null, messageId = null) {
|
||||
updateEmptyState();
|
||||
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = `message ${role}`;
|
||||
|
||||
const label = document.createElement('div');
|
||||
label.className = 'label';
|
||||
label.textContent = role === 'user' ? 'Вы' : 'AI';
|
||||
@@ -445,9 +448,7 @@ export function addMessage(role, content = '', imagePrompt = null, imagePath = n
|
||||
|
||||
if (prompt) wrapper.appendChild(createImagePromptBlock(prompt));
|
||||
if (imagePath) appendChatImage(wrapper, imagePath);
|
||||
|
||||
attachMessageActions(wrapper, messageId, role);
|
||||
|
||||
dom.messagesEl.appendChild(wrapper);
|
||||
dom.messagesEl.scrollTop = dom.messagesEl.scrollHeight;
|
||||
return bubble;
|
||||
@@ -477,27 +478,18 @@ export function clearMessages() {
|
||||
export async function sendMessage(text, isNarratorChoice = false) {
|
||||
if (typeof text !== 'string') text = dom.inputEl.value.trim();
|
||||
if (!text || !sessionId) return;
|
||||
|
||||
dom.inputEl.value = '';
|
||||
dom.inputEl.style.height = 'auto';
|
||||
dom.sendBtn.disabled = true;
|
||||
|
||||
addMessage('user', isNarratorChoice ? `[${text}]` : text);
|
||||
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, persona_id: currentPersona, is_narrator_choice: isNarratorChoice }),
|
||||
});
|
||||
if (!res.ok) throw new Error('Ошибка сервера: ' + res.status);
|
||||
|
||||
removeTyping();
|
||||
await consumeStream(res);
|
||||
} catch (err) {
|
||||
@@ -509,27 +501,6 @@ export async function sendMessage(text, isNarratorChoice = false) {
|
||||
}
|
||||
}
|
||||
|
||||
function buildNarratorWrapper(narrator) {
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'message narrator';
|
||||
const label = document.createElement('div');
|
||||
label.className = 'label';
|
||||
label.textContent = '📖 Рассказчик';
|
||||
wrapper.appendChild(label);
|
||||
const bubble = document.createElement('div');
|
||||
bubble.className = 'bubble';
|
||||
const diceBlock = document.createElement('div');
|
||||
diceBlock.className = `dice-block ${OUTCOME_CLASS[narrator.outcome] || ''}`;
|
||||
diceBlock.innerHTML = `<span class="dice-icon">🎲</span><span class="dice-roll">${narrator.roll}</span><span class="dice-outcome">${narrator.outcome}</span>`;
|
||||
bubble.appendChild(diceBlock);
|
||||
const textEl = document.createElement('div');
|
||||
textEl.className = 'narrator-text';
|
||||
textEl.textContent = narrator.text;
|
||||
bubble.appendChild(textEl);
|
||||
wrapper.appendChild(bubble);
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
export async function clearHistory() {
|
||||
if (!sessionId) return;
|
||||
await fetch(`/chat/${sessionId}`, { method: 'DELETE' });
|
||||
|
||||
@@ -0,0 +1,154 @@
|
||||
import { sessionId, currentPersona, dom } from './state.js';
|
||||
import { GENRE_LABELS, bindGenreGrid, resetGenreGrid } from './utils.js';
|
||||
|
||||
const chatSettingsGenres = new Set();
|
||||
|
||||
function updateChatSettingsGenresLabel() {
|
||||
const el = document.getElementById('chatSettingsGenresLabel');
|
||||
const labels = [...chatSettingsGenres].map(g => GENRE_LABELS[g] || g);
|
||||
if (!el) return;
|
||||
if (labels.length) {
|
||||
el.textContent = `Выбрано: ${labels.join(' + ')}`;
|
||||
el.classList.remove('hidden');
|
||||
} else {
|
||||
el.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
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}SettingChoices`).checked = settings.choices !== false;
|
||||
}
|
||||
|
||||
function readRpgSettingsFromDom(prefix) {
|
||||
return {
|
||||
dice: document.getElementById(`${prefix}SettingDice`)?.checked ?? true,
|
||||
narrator: document.getElementById(`${prefix}SettingNarrator`)?.checked ?? true,
|
||||
quests: document.getElementById(`${prefix}SettingQuests`)?.checked ?? true,
|
||||
affinity: document.getElementById(`${prefix}SettingAffinity`)?.checked ?? true,
|
||||
choices: document.getElementById(`${prefix}SettingChoices`)?.checked ?? true,
|
||||
};
|
||||
}
|
||||
|
||||
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 async function openChatSettings() {
|
||||
if (!sessionId) return;
|
||||
const res = await fetch(`/sessions/${sessionId}`);
|
||||
if (!res.ok) return;
|
||||
const s = await res.json();
|
||||
|
||||
document.getElementById('chatSettingsTitle').value = s.title || '';
|
||||
const rpgOn = !!s.rpg_enabled;
|
||||
document.getElementById('chatSettingsRpg').checked = rpgOn;
|
||||
document.getElementById('chatSettingsRpgBlock').classList.toggle('hidden', !rpgOn);
|
||||
|
||||
chatSettingsGenres.clear();
|
||||
(s.genre || 'adventure').split(',').forEach(g => {
|
||||
const t = g.trim();
|
||||
if (t) chatSettingsGenres.add(t);
|
||||
});
|
||||
resetGenreGrid(document.getElementById('chatSettingsGenreGrid'), chatSettingsGenres);
|
||||
document.getElementById('chatSettingsGenreGrid')?.querySelectorAll('.genre-btn').forEach(btn => {
|
||||
if (chatSettingsGenres.has(btn.dataset.genre)) btn.classList.add('selected');
|
||||
});
|
||||
updateChatSettingsGenresLabel();
|
||||
|
||||
let settings = {};
|
||||
try { settings = JSON.parse(s.rpg_settings_json || '{}'); } catch { /* ignore */ }
|
||||
loadRpgSettingsToDom('cs', settings);
|
||||
|
||||
let phase = '';
|
||||
try {
|
||||
const arc = JSON.parse(s.plot_arc_json || '{}');
|
||||
phase = arc.phase || '';
|
||||
} catch { /* ignore */ }
|
||||
document.getElementById('chatSettingsMeta').innerHTML = [
|
||||
`Симпатия: ${s.affinity ?? 0}`,
|
||||
s.genre ? `Жанр: ${(s.genre || '').split(',').map(g => GENRE_LABELS[g.trim()] || g).join(' + ')}` : '',
|
||||
phase ? `Фаза арки: ${phase}` : '',
|
||||
].filter(Boolean).join('<br>');
|
||||
|
||||
document.getElementById('chatSettingsModal').classList.add('open');
|
||||
}
|
||||
|
||||
export function initChatSettings() {
|
||||
bindGenreGrid(
|
||||
document.getElementById('chatSettingsGenreGrid'),
|
||||
chatSettingsGenres,
|
||||
updateChatSettingsGenresLabel,
|
||||
);
|
||||
|
||||
document.getElementById('chatSettingsRpg')?.addEventListener('change', (e) => {
|
||||
document.getElementById('chatSettingsRpgBlock').classList.toggle('hidden', !e.target.checked);
|
||||
});
|
||||
|
||||
document.getElementById('chatSettingsCancel')?.addEventListener('click', () => {
|
||||
document.getElementById('chatSettingsModal').classList.remove('open');
|
||||
});
|
||||
|
||||
document.getElementById('chatSettingsSave')?.addEventListener('click', async () => {
|
||||
if (!sessionId) return;
|
||||
const { loadSessions, applySessionUi } = await import('./sessions.js');
|
||||
|
||||
const title = document.getElementById('chatSettingsTitle').value.trim();
|
||||
const rpgOn = document.getElementById('chatSettingsRpg').checked;
|
||||
const genreValue = [...chatSettingsGenres].join(',') || 'adventure';
|
||||
const settings = readRpgSettingsFromDom('cs');
|
||||
|
||||
await fetch(`/sessions/${sessionId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
title: title || undefined,
|
||||
rpg_enabled: rpgOn,
|
||||
genre: genreValue,
|
||||
rpg_settings_json: JSON.stringify(settings),
|
||||
}),
|
||||
});
|
||||
|
||||
if (rpgOn) {
|
||||
const sessionRes = await fetch(`/sessions/${sessionId}`);
|
||||
const s = sessionRes.ok ? await sessionRes.json() : {};
|
||||
let arc = {};
|
||||
try { arc = JSON.parse(s.plot_arc_json || '{}'); } catch { /* ignore */ }
|
||||
if (!arc || !Object.keys(arc).length) {
|
||||
await bootstrapRpg(sessionId, currentPersona, genreValue, settings);
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('chatSettingsModal').classList.remove('open');
|
||||
const updated = await (await fetch(`/sessions/${sessionId}`)).json();
|
||||
applySessionUi(updated);
|
||||
dom.headerTitle.textContent = updated.title || 'Новый чат';
|
||||
await loadSessions();
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,257 @@
|
||||
import { setSessionId, setCurrentPersona, currentPersona, dom } from './state.js';
|
||||
import {
|
||||
initWizard,
|
||||
GENRE_LABELS,
|
||||
bindGenreGrid,
|
||||
resetGenreGrid,
|
||||
fillGreetingSelect,
|
||||
getSelectedGreeting,
|
||||
} from './utils.js';
|
||||
import { personaIndex, highlightPersona } from './personas.js';
|
||||
|
||||
let newChatPersonaId = currentPersona;
|
||||
let newChatGreetingCtx = null;
|
||||
const newChatGenres = new Set();
|
||||
const newChatModalEl = document.getElementById('newChatModal');
|
||||
let newChatWizard;
|
||||
|
||||
async function resolveGreetingContext(personaId) {
|
||||
const p = personaIndex.get(personaId);
|
||||
let firstMes = p?.first_mes || '';
|
||||
let alternates = p?.alternate_greetings || [];
|
||||
if (personaId.startsWith('card_') && (!alternates.length || !firstMes)) {
|
||||
try {
|
||||
const r = await fetch(`/characters/${personaId.slice(5)}`);
|
||||
if (r.ok) {
|
||||
const c = await r.json();
|
||||
firstMes = c.first_mes || firstMes;
|
||||
alternates = c.alternate_greetings?.length ? c.alternate_greetings : alternates;
|
||||
}
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
return { firstMes, alternates };
|
||||
}
|
||||
|
||||
async function syncNewChatGreetingBlock() {
|
||||
const block = document.getElementById('newChatGreetingBlock');
|
||||
const select = document.getElementById('newChatGreetingSelect');
|
||||
const text = document.getElementById('newChatGreetingText');
|
||||
if (!block || !select || !text) return;
|
||||
|
||||
newChatGreetingCtx = await resolveGreetingContext(newChatPersonaId);
|
||||
const { firstMes, alternates } = newChatGreetingCtx;
|
||||
if (!alternates.length) {
|
||||
block.classList.add('hidden');
|
||||
return;
|
||||
}
|
||||
block.classList.remove('hidden');
|
||||
fillGreetingSelect(select, firstMes, alternates);
|
||||
text.value = firstMes;
|
||||
select.onchange = () => {
|
||||
text.value = getSelectedGreeting(select, firstMes, alternates);
|
||||
};
|
||||
}
|
||||
|
||||
function getNewChatFirstMesOverride() {
|
||||
const block = document.getElementById('newChatGreetingBlock');
|
||||
if (!block || block.classList.contains('hidden') || !newChatGreetingCtx) return null;
|
||||
const edited = document.getElementById('newChatGreetingText')?.value.trim();
|
||||
if (edited) return edited;
|
||||
const select = document.getElementById('newChatGreetingSelect');
|
||||
const { firstMes, alternates } = newChatGreetingCtx;
|
||||
return getSelectedGreeting(select, firstMes, alternates) || null;
|
||||
}
|
||||
|
||||
function isNewChatRpg() {
|
||||
return document.querySelector('input[name="newChatRpg"]:checked')?.value === '1';
|
||||
}
|
||||
|
||||
function syncNewChatStep3() {
|
||||
const plain = document.getElementById('newChatPlainStep');
|
||||
const rpg = document.getElementById('newChatRpgStep');
|
||||
if (isNewChatRpg()) {
|
||||
plain?.classList.add('hidden');
|
||||
rpg?.classList.remove('hidden');
|
||||
} else {
|
||||
plain?.classList.remove('hidden');
|
||||
rpg?.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
function fillNewChatPersonaGrid() {
|
||||
const grid = document.getElementById('newChatPersonaGrid');
|
||||
if (!grid) return;
|
||||
grid.innerHTML = '';
|
||||
newChatPersonaId = currentPersona;
|
||||
for (const p of personaIndex.values()) {
|
||||
const card = document.createElement('button');
|
||||
card.type = 'button';
|
||||
card.className = 'persona-pick-card' + (p.persona_id === newChatPersonaId ? ' selected' : '');
|
||||
card.dataset.id = p.persona_id;
|
||||
card.innerHTML = `<span class="emoji">${p.emoji || '🤖'}</span>${p.name}`;
|
||||
card.addEventListener('click', () => {
|
||||
newChatPersonaId = p.persona_id;
|
||||
grid.querySelectorAll('.persona-pick-card').forEach(c => {
|
||||
c.classList.toggle('selected', c.dataset.id === newChatPersonaId);
|
||||
});
|
||||
syncNewChatGreetingBlock();
|
||||
});
|
||||
grid.appendChild(card);
|
||||
}
|
||||
}
|
||||
|
||||
function updateNewChatGenresLabel() {
|
||||
const el = document.getElementById('newChatGenresLabel');
|
||||
const nextBtn = document.getElementById('newChatNext');
|
||||
const labels = [...newChatGenres].map(g => GENRE_LABELS[g] || g);
|
||||
if (el) {
|
||||
if (labels.length) {
|
||||
el.textContent = `Выбрано: ${labels.join(' + ')}`;
|
||||
el.classList.remove('hidden');
|
||||
} else {
|
||||
el.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
if (nextBtn && isNewChatRpg()) {
|
||||
const wizard = newChatModalEl?.querySelector('.modal-wizard');
|
||||
const onStep3 = wizard?.querySelector('.wizard-page[data-step="3"]')?.classList.contains('active');
|
||||
if (onStep3) nextBtn.disabled = newChatGenres.size === 0;
|
||||
}
|
||||
}
|
||||
|
||||
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() {
|
||||
fillNewChatPersonaGrid();
|
||||
resetGenreGrid(document.getElementById('newChatGenreGrid'), newChatGenres);
|
||||
updateNewChatGenresLabel();
|
||||
document.querySelector('input[name="newChatRpg"][value="0"]')?.click();
|
||||
document.getElementById('newChatTitle').value = '';
|
||||
syncNewChatStep3();
|
||||
newChatWizard?.reset();
|
||||
newChatModalEl?.classList.add('open');
|
||||
syncNewChatGreetingBlock();
|
||||
}
|
||||
|
||||
export async function createNewChatFromWizard() {
|
||||
const { clearMessages, initChat, reloadChatFromServer } = await import('./chat.js');
|
||||
const { loadSessions, applySessionUi } = await import('./sessions.js');
|
||||
|
||||
const sid = 'sess_' + Math.random().toString(36).slice(2, 10);
|
||||
setSessionId(sid);
|
||||
setCurrentPersona(newChatPersonaId);
|
||||
clearMessages();
|
||||
|
||||
const customTitle = document.getElementById('newChatTitle')?.value.trim();
|
||||
const rpg = isNewChatRpg();
|
||||
|
||||
newChatModalEl?.classList.remove('open');
|
||||
newChatWizard?.reset();
|
||||
|
||||
try {
|
||||
await fetch(`/sessions/${sid}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ persona_id: newChatPersonaId, rpg_enabled: rpg }),
|
||||
});
|
||||
|
||||
if (customTitle) {
|
||||
await fetch(`/sessions/${sid}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ title: customTitle }),
|
||||
});
|
||||
dom.headerTitle.textContent = customTitle;
|
||||
} else {
|
||||
const pName = personaIndex.get(newChatPersonaId)?.name || newChatPersonaId;
|
||||
dom.headerTitle.textContent = rpg ? `${pName} — RPG` : `${pName} — новый чат`;
|
||||
}
|
||||
|
||||
highlightPersona(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);
|
||||
}
|
||||
|
||||
await reloadChatFromServer(sid);
|
||||
const sessionRes = await fetch(`/sessions/${sid}`);
|
||||
if (sessionRes.ok) applySessionUi(await sessionRes.json());
|
||||
await loadSessions();
|
||||
} catch (e) {
|
||||
console.error('createNewChat error:', e);
|
||||
}
|
||||
}
|
||||
|
||||
export function initNewChatWizard() {
|
||||
if (!newChatModalEl) return;
|
||||
|
||||
newChatWizard = initWizard(newChatModalEl.querySelector('.modal-wizard'), {
|
||||
totalSteps: 3,
|
||||
onStepChange(step) {
|
||||
syncNewChatStep3();
|
||||
if (step === 3 && !isNewChatRpg()) syncNewChatGreetingBlock();
|
||||
const nextBtn = document.getElementById('newChatNext');
|
||||
if (step === 3 && isNewChatRpg()) {
|
||||
nextBtn.disabled = newChatGenres.size === 0;
|
||||
} else {
|
||||
nextBtn.disabled = false;
|
||||
}
|
||||
},
|
||||
validateStep(step) {
|
||||
if (step === 1 && !newChatPersonaId) {
|
||||
alert('Выбери персонажа');
|
||||
return false;
|
||||
}
|
||||
if (step === 3 && isNewChatRpg() && newChatGenres.size === 0) {
|
||||
alert('Выбери хотя бы один жанр');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
});
|
||||
|
||||
bindGenreGrid(document.getElementById('newChatGenreGrid'), newChatGenres, updateNewChatGenresLabel);
|
||||
|
||||
document.getElementById('newChatCancel')?.addEventListener('click', () => {
|
||||
newChatModalEl.classList.remove('open');
|
||||
newChatWizard.reset();
|
||||
});
|
||||
document.getElementById('newChatCreate')?.addEventListener('click', createNewChatFromWizard);
|
||||
}
|
||||
+154
-26
@@ -1,10 +1,25 @@
|
||||
import { currentPersona, setCurrentPersona, sessionId } from './state.js';
|
||||
import { initChat } from './chat.js';
|
||||
import { initWizard } from './utils.js';
|
||||
import { initWizard, fillGreetingSelect, getSelectedGreeting } from './utils.js';
|
||||
|
||||
export let personaIndex = new Map();
|
||||
|
||||
function parseAlternateGreetings(p) {
|
||||
if (Array.isArray(p?.alternate_greetings) && p.alternate_greetings.length) {
|
||||
return p.alternate_greetings;
|
||||
}
|
||||
try {
|
||||
const parsed = JSON.parse(p?.alternate_greetings_json || '[]');
|
||||
return Array.isArray(parsed) ? parsed : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
let createWizard;
|
||||
let cardImportWizard;
|
||||
let cardPreview = null;
|
||||
let cardImportFile = null;
|
||||
|
||||
export function highlightPersona(personaId) {
|
||||
document.querySelectorAll('.persona-card').forEach(c => {
|
||||
@@ -15,7 +30,10 @@ export function highlightPersona(personaId) {
|
||||
export async function loadPersonas() {
|
||||
const res = await fetch('/personas/');
|
||||
const personas = await res.json();
|
||||
personaIndex = new Map(personas.map(p => [p.persona_id, p]));
|
||||
personaIndex = new Map(personas.map(p => {
|
||||
const alternate_greetings = parseAlternateGreetings(p);
|
||||
return [p.persona_id, { ...p, alternate_greetings }];
|
||||
}));
|
||||
const bar = document.getElementById('personaBar');
|
||||
bar.innerHTML = '';
|
||||
|
||||
@@ -55,6 +73,19 @@ export async function loadPersonas() {
|
||||
document.getElementById('editAppearance').value = data.appearance_tags || '';
|
||||
document.getElementById('editLora').value = data.lora_name || '';
|
||||
document.getElementById('editLoraWeight').value = data.lora_weight ?? 0.8;
|
||||
const alts = data.alternate_greetings || [];
|
||||
const altBlock = document.getElementById('editCardAltBlock');
|
||||
const altSelect = document.getElementById('editCardGreetingSelect');
|
||||
if (alts.length) {
|
||||
altBlock?.classList.remove('hidden');
|
||||
fillGreetingSelect(altSelect, data.first_mes, alts);
|
||||
altSelect.onchange = () => {
|
||||
document.getElementById('editFirstMes').value =
|
||||
getSelectedGreeting(altSelect, data.first_mes, alts);
|
||||
};
|
||||
} else {
|
||||
altBlock?.classList.add('hidden');
|
||||
}
|
||||
document.getElementById('cardEditOverlay').classList.add('open');
|
||||
});
|
||||
|
||||
@@ -95,7 +126,7 @@ export async function loadPersonas() {
|
||||
importBtn.type = 'button';
|
||||
importBtn.className = 'card-import-btn';
|
||||
importBtn.innerHTML = '📥<span>Chub</span>';
|
||||
importBtn.addEventListener('click', () => document.getElementById('cardModalOverlay').classList.add('open'));
|
||||
importBtn.addEventListener('click', () => openCardImportModal());
|
||||
bar.appendChild(importBtn);
|
||||
}
|
||||
|
||||
@@ -112,6 +143,122 @@ export async function selectPersona(personaId) {
|
||||
}
|
||||
}
|
||||
|
||||
function fillImpCardForm(preview) {
|
||||
document.getElementById('impCardName').value = preview.name || '';
|
||||
document.getElementById('impCardDescription').value = preview.description || '';
|
||||
document.getElementById('impCardPersonality').value = preview.personality || '';
|
||||
document.getElementById('impCardScenario').value = preview.scenario || '';
|
||||
document.getElementById('impCardMesExample').value = preview.mes_example || '';
|
||||
document.getElementById('impCardAppearance').value = preview.appearance_tags || '';
|
||||
|
||||
const alts = preview.alternate_greetings || [];
|
||||
const selectEl = document.getElementById('impCardGreetingSelect');
|
||||
const firstMesEl = document.getElementById('impCardFirstMes');
|
||||
fillGreetingSelect(selectEl, preview.first_mes, alts);
|
||||
firstMesEl.value = preview.first_mes || '';
|
||||
|
||||
const altHint = document.getElementById('impCardAltHint');
|
||||
if (alts.length) {
|
||||
altHint.textContent = `В карточке ${alts.length} альтернативных приветствий — выбери в списке или отредактируй текст ниже`;
|
||||
altHint.classList.remove('hidden');
|
||||
} else {
|
||||
altHint.classList.add('hidden');
|
||||
}
|
||||
|
||||
selectEl.onchange = () => {
|
||||
firstMesEl.value = getSelectedGreeting(selectEl, preview.first_mes, alts);
|
||||
};
|
||||
}
|
||||
|
||||
async function loadCardPreview() {
|
||||
const fileInput = document.getElementById('cardFile');
|
||||
if (!fileInput.files?.length) {
|
||||
alert('Выберите файл карточки (JSON или PNG)');
|
||||
return false;
|
||||
}
|
||||
const form = new FormData();
|
||||
form.append('file', fileInput.files[0]);
|
||||
const res = await fetch('/characters/preview', { method: 'POST', body: form });
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
alert(data.detail || 'Ошибка чтения карточки');
|
||||
return false;
|
||||
}
|
||||
cardPreview = data;
|
||||
cardImportFile = fileInput.files[0];
|
||||
fillImpCardForm(data);
|
||||
const hint = document.getElementById('cardPreviewHint');
|
||||
if (hint) {
|
||||
hint.textContent = `${data.name} · ${data.alternate_count || 0} альт. приветствий`;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function openCardImportModal() {
|
||||
cardPreview = null;
|
||||
cardImportFile = null;
|
||||
document.getElementById('cardFile').value = '';
|
||||
document.getElementById('cardPreviewHint').textContent = '';
|
||||
document.getElementById('cardLora').value = '';
|
||||
document.getElementById('cardLoraWeight').value = '0.8';
|
||||
cardImportWizard?.reset();
|
||||
document.getElementById('cardModalOverlay').classList.add('open');
|
||||
}
|
||||
|
||||
function closeCardImportModal() {
|
||||
document.getElementById('cardModalOverlay').classList.remove('open');
|
||||
cardImportWizard?.reset();
|
||||
cardPreview = null;
|
||||
cardImportFile = null;
|
||||
}
|
||||
|
||||
function initCardImportWizard() {
|
||||
const modal = document.getElementById('cardModalOverlay')?.querySelector('.modal-wizard');
|
||||
if (!modal) return;
|
||||
|
||||
cardImportWizard = initWizard(modal, {
|
||||
totalSteps: 2,
|
||||
validateStep(step) {
|
||||
if (step !== 1) return true;
|
||||
return loadCardPreview();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function submitCardImport() {
|
||||
if (!cardImportFile || !cardPreview) {
|
||||
alert('Сначала загрузите и проверьте карточку');
|
||||
return;
|
||||
}
|
||||
const form = new FormData();
|
||||
form.append('file', cardImportFile);
|
||||
form.append('card_id', cardPreview.card_id || '');
|
||||
form.append('lora_name', document.getElementById('cardLora').value.trim());
|
||||
form.append('lora_weight', document.getElementById('cardLoraWeight').value || '0.8');
|
||||
form.append('name', document.getElementById('impCardName').value.trim());
|
||||
form.append('description', document.getElementById('impCardDescription').value.trim());
|
||||
form.append('personality', document.getElementById('impCardPersonality').value.trim());
|
||||
form.append('scenario', document.getElementById('impCardScenario').value.trim());
|
||||
form.append('first_mes', document.getElementById('impCardFirstMes').value.trim());
|
||||
form.append('mes_example', document.getElementById('impCardMesExample').value.trim());
|
||||
form.append('appearance_tags', document.getElementById('impCardAppearance').value.trim());
|
||||
form.append(
|
||||
'alternate_greetings_json',
|
||||
JSON.stringify(cardPreview.alternate_greetings || []),
|
||||
);
|
||||
|
||||
const res = await fetch('/characters/import', { method: 'POST', body: form });
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
alert(data.detail || 'Ошибка импорта');
|
||||
return;
|
||||
}
|
||||
closeCardImportModal();
|
||||
document.getElementById('cardFile').value = '';
|
||||
await loadPersonas();
|
||||
await selectPersona(data.persona_id);
|
||||
}
|
||||
|
||||
export function initPersonaModals() {
|
||||
const createModal = document.getElementById('modalOverlay');
|
||||
createWizard = initWizard(createModal.querySelector('.modal-wizard'), {
|
||||
@@ -132,8 +279,10 @@ export function initPersonaModals() {
|
||||
createModal.classList.remove('open');
|
||||
createWizard.reset();
|
||||
});
|
||||
initCardImportWizard();
|
||||
|
||||
document.getElementById('cardModalCancel').addEventListener('click', () => {
|
||||
document.getElementById('cardModalOverlay').classList.remove('open');
|
||||
closeCardImportModal();
|
||||
});
|
||||
document.getElementById('cardEditCancel').addEventListener('click', () => {
|
||||
document.getElementById('cardEditOverlay').classList.remove('open');
|
||||
@@ -210,28 +359,7 @@ export function initPersonaModals() {
|
||||
await loadPersonas();
|
||||
});
|
||||
|
||||
document.getElementById('cardModalImport').addEventListener('click', async () => {
|
||||
const fileInput = document.getElementById('cardFile');
|
||||
if (!fileInput.files?.length) {
|
||||
alert('Выберите файл карточки (JSON или PNG)');
|
||||
return;
|
||||
}
|
||||
const form = new FormData();
|
||||
form.append('file', fileInput.files[0]);
|
||||
form.append('lora_name', document.getElementById('cardLora').value.trim());
|
||||
form.append('lora_weight', document.getElementById('cardLoraWeight').value || '0.8');
|
||||
|
||||
const res = await fetch('/characters/import', { method: 'POST', body: form });
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
alert(data.detail || 'Ошибка импорта');
|
||||
return;
|
||||
}
|
||||
document.getElementById('cardModalOverlay').classList.remove('open');
|
||||
fileInput.value = '';
|
||||
await loadPersonas();
|
||||
await selectPersona(data.persona_id);
|
||||
});
|
||||
document.getElementById('cardModalImport').addEventListener('click', submitCardImport);
|
||||
|
||||
const personaEditSave = document.getElementById('personaEditSave');
|
||||
if (personaEditSave) {
|
||||
|
||||
+70
-329
@@ -1,13 +1,13 @@
|
||||
import {
|
||||
sessionId, setSessionId, setCurrentPersona, currentPersona, dom, setRpgEnabled,
|
||||
} from './state.js';
|
||||
import {
|
||||
clearMessages, addMessage, initChat, updateQuestPanel, updateAffinityDisplay, reloadChatFromServer,
|
||||
} from './chat.js';
|
||||
import { highlightPersona, personaIndex, loadPersonas } from './personas.js';
|
||||
import {
|
||||
initWizard, GENRE_LABELS, bindGenreGrid, resetGenreGrid, formatSessionDate,
|
||||
} from './utils.js';
|
||||
import { updateQuestPanel, updateAffinityDisplay } from './chat.js';
|
||||
import { highlightPersona, personaIndex } from './personas.js';
|
||||
import { formatSessionDate } from './utils.js';
|
||||
import { openNewChatWizard } from './newChatWizard.js';
|
||||
|
||||
export { openNewChatWizard, initNewChatWizard } from './newChatWizard.js';
|
||||
export { openChatSettings, initChatSettings } from './chatSettings.js';
|
||||
|
||||
function escapeTitle(t) {
|
||||
const d = document.createElement('div');
|
||||
@@ -15,10 +15,6 @@ function escapeTitle(t) {
|
||||
return d.innerHTML;
|
||||
}
|
||||
|
||||
let newChatPersonaId = currentPersona;
|
||||
const newChatGenres = new Set();
|
||||
const chatSettingsGenres = new Set();
|
||||
|
||||
export function applySessionUi(session) {
|
||||
if (!session) return;
|
||||
dom.headerTitle.textContent = session.title || 'Новый чат';
|
||||
@@ -106,6 +102,7 @@ export async function loadSessions() {
|
||||
|
||||
export async function switchSession(id) {
|
||||
setSessionId(id);
|
||||
const { clearMessages } = await import('./chat.js');
|
||||
clearMessages();
|
||||
await loadSessions();
|
||||
await loadChatHistory(id);
|
||||
@@ -113,337 +110,27 @@ export async function switchSession(id) {
|
||||
|
||||
export async function loadChatHistory(id) {
|
||||
const sessionRes = await fetch(`/sessions/${id}`);
|
||||
let session = null;
|
||||
if (sessionRes.ok) {
|
||||
session = await sessionRes.json();
|
||||
if (session.persona_id) {
|
||||
setCurrentPersona(session.persona_id);
|
||||
highlightPersona(session.persona_id);
|
||||
const s = await sessionRes.json();
|
||||
if (s.persona_id) {
|
||||
setCurrentPersona(s.persona_id);
|
||||
highlightPersona(s.persona_id);
|
||||
}
|
||||
applySessionUi(session);
|
||||
applySessionUi(s);
|
||||
}
|
||||
|
||||
try {
|
||||
const blobRes = await fetch(`/chat/system/${id}`);
|
||||
if (blobRes.ok) {
|
||||
const blob = await blobRes.json();
|
||||
const parts = [];
|
||||
if (blob.system_prompt) parts.push(blob.system_prompt);
|
||||
if (blob.status_quo) parts.push(`--- Status quo ---\n${blob.status_quo}\n---`);
|
||||
if (blob.facts_json) parts.push(`facts_json: ${blob.facts_json}`);
|
||||
if (blob.plot_arc_json) parts.push(`plot_arc_json: ${blob.plot_arc_json}`);
|
||||
dom.systemBlobContent.textContent = parts.filter(Boolean).join('\n\n') || '—';
|
||||
_prevBlobSections = {}; // reset on session switch to avoid false highlights
|
||||
renderSystemBlob(await blobRes.json());
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
|
||||
const { reloadChatFromServer } = await import('./chat.js');
|
||||
await reloadChatFromServer(id);
|
||||
}
|
||||
|
||||
async function bootstrapRpg(sid, personaId, genreValue, settings) {
|
||||
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 : ''}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function fillNewChatPersonaGrid() {
|
||||
const grid = document.getElementById('newChatPersonaGrid');
|
||||
if (!grid) return;
|
||||
grid.innerHTML = '';
|
||||
newChatPersonaId = currentPersona;
|
||||
for (const p of personaIndex.values()) {
|
||||
const card = document.createElement('button');
|
||||
card.type = 'button';
|
||||
card.className = 'persona-pick-card' + (p.persona_id === newChatPersonaId ? ' selected' : '');
|
||||
card.dataset.id = p.persona_id;
|
||||
card.innerHTML = `<span class="emoji">${p.emoji || '🤖'}</span>${p.name}`;
|
||||
card.addEventListener('click', () => {
|
||||
newChatPersonaId = p.persona_id;
|
||||
grid.querySelectorAll('.persona-pick-card').forEach(c => {
|
||||
c.classList.toggle('selected', c.dataset.id === newChatPersonaId);
|
||||
});
|
||||
});
|
||||
grid.appendChild(card);
|
||||
}
|
||||
}
|
||||
|
||||
function updateNewChatGenresLabel() {
|
||||
const el = document.getElementById('newChatGenresLabel');
|
||||
const nextBtn = document.getElementById('newChatNext');
|
||||
const labels = [...newChatGenres].map(g => GENRE_LABELS[g] || g);
|
||||
if (el) {
|
||||
if (labels.length) {
|
||||
el.textContent = `Выбрано: ${labels.join(' + ')}`;
|
||||
el.classList.remove('hidden');
|
||||
} else {
|
||||
el.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
const isRpg = document.querySelector('input[name="newChatRpg"]:checked')?.value === '1';
|
||||
if (nextBtn && isRpg) {
|
||||
const wizard = newChatModalEl?.querySelector('.modal-wizard');
|
||||
const onStep3 = wizard?.querySelector('.wizard-page[data-step="3"]')?.classList.contains('active');
|
||||
if (onStep3) nextBtn.disabled = newChatGenres.size === 0;
|
||||
}
|
||||
}
|
||||
|
||||
const newChatModalEl = document.getElementById('newChatModal');
|
||||
let newChatWizard;
|
||||
|
||||
function isNewChatRpg() {
|
||||
return document.querySelector('input[name="newChatRpg"]:checked')?.value === '1';
|
||||
}
|
||||
|
||||
function syncNewChatStep3() {
|
||||
const plain = document.getElementById('newChatPlainStep');
|
||||
const rpg = document.getElementById('newChatRpgStep');
|
||||
if (isNewChatRpg()) {
|
||||
plain?.classList.add('hidden');
|
||||
rpg?.classList.remove('hidden');
|
||||
} else {
|
||||
plain?.classList.remove('hidden');
|
||||
rpg?.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
export function openNewChatWizard() {
|
||||
fillNewChatPersonaGrid();
|
||||
resetGenreGrid(document.getElementById('newChatGenreGrid'), newChatGenres);
|
||||
updateNewChatGenresLabel();
|
||||
document.querySelector('input[name="newChatRpg"][value="0"]')?.click();
|
||||
document.getElementById('newChatTitle').value = '';
|
||||
syncNewChatStep3();
|
||||
newChatWizard?.reset();
|
||||
newChatModalEl?.classList.add('open');
|
||||
}
|
||||
|
||||
export async function createNewChatFromWizard() {
|
||||
const sid = 'sess_' + Math.random().toString(36).slice(2, 10);
|
||||
setSessionId(sid);
|
||||
setCurrentPersona(newChatPersonaId);
|
||||
clearMessages();
|
||||
|
||||
const customTitle = document.getElementById('newChatTitle')?.value.trim();
|
||||
const rpg = isNewChatRpg();
|
||||
|
||||
await fetch(`/sessions/${sid}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ persona_id: newChatPersonaId, rpg_enabled: rpg }),
|
||||
});
|
||||
|
||||
if (customTitle) {
|
||||
await fetch(`/sessions/${sid}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ title: customTitle }),
|
||||
});
|
||||
dom.headerTitle.textContent = customTitle;
|
||||
} else {
|
||||
const pName = personaIndex.get(newChatPersonaId)?.name || newChatPersonaId;
|
||||
dom.headerTitle.textContent = rpg ? `${pName} — RPG` : `${pName} — новый чат`;
|
||||
}
|
||||
|
||||
highlightPersona(newChatPersonaId);
|
||||
await initChat();
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
await reloadChatFromServer(sid);
|
||||
|
||||
newChatModalEl?.classList.remove('open');
|
||||
const sessionRes = await fetch(`/sessions/${sid}`);
|
||||
if (sessionRes.ok) applySessionUi(await sessionRes.json());
|
||||
await loadSessions();
|
||||
}
|
||||
|
||||
export function initNewChatWizard() {
|
||||
if (!newChatModalEl) return;
|
||||
|
||||
newChatWizard = initWizard(newChatModalEl.querySelector('.modal-wizard'), {
|
||||
totalSteps: 3,
|
||||
onStepChange(step) {
|
||||
syncNewChatStep3();
|
||||
const nextBtn = document.getElementById('newChatNext');
|
||||
if (step === 3 && isNewChatRpg()) {
|
||||
nextBtn.disabled = newChatGenres.size === 0;
|
||||
} else {
|
||||
nextBtn.disabled = false;
|
||||
}
|
||||
},
|
||||
validateStep(step) {
|
||||
if (step === 1 && !newChatPersonaId) {
|
||||
alert('Выбери персонажа');
|
||||
return false;
|
||||
}
|
||||
if (step === 3 && isNewChatRpg() && newChatGenres.size === 0) {
|
||||
alert('Выбери хотя бы один жанр');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
});
|
||||
|
||||
bindGenreGrid(document.getElementById('newChatGenreGrid'), newChatGenres, updateNewChatGenresLabel);
|
||||
|
||||
document.getElementById('newChatCancel')?.addEventListener('click', () => {
|
||||
newChatModalEl.classList.remove('open');
|
||||
newChatWizard.reset();
|
||||
});
|
||||
document.getElementById('newChatCreate')?.addEventListener('click', createNewChatFromWizard);
|
||||
}
|
||||
|
||||
function updateChatSettingsGenresLabel() {
|
||||
const el = document.getElementById('chatSettingsGenresLabel');
|
||||
const labels = [...chatSettingsGenres].map(g => GENRE_LABELS[g] || g);
|
||||
if (!el) return;
|
||||
if (labels.length) {
|
||||
el.textContent = `Выбрано: ${labels.join(' + ')}`;
|
||||
el.classList.remove('hidden');
|
||||
} else {
|
||||
el.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
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}SettingChoices`).checked = settings.choices !== false;
|
||||
}
|
||||
|
||||
function readRpgSettingsFromDom(prefix) {
|
||||
return {
|
||||
dice: document.getElementById(`${prefix}SettingDice`)?.checked ?? true,
|
||||
narrator: document.getElementById(`${prefix}SettingNarrator`)?.checked ?? true,
|
||||
quests: document.getElementById(`${prefix}SettingQuests`)?.checked ?? true,
|
||||
affinity: document.getElementById(`${prefix}SettingAffinity`)?.checked ?? true,
|
||||
choices: document.getElementById(`${prefix}SettingChoices`)?.checked ?? true,
|
||||
};
|
||||
}
|
||||
|
||||
export async function openChatSettings() {
|
||||
if (!sessionId) return;
|
||||
const res = await fetch(`/sessions/${sessionId}`);
|
||||
if (!res.ok) return;
|
||||
const s = await res.json();
|
||||
|
||||
document.getElementById('chatSettingsTitle').value = s.title || '';
|
||||
const rpgOn = !!s.rpg_enabled;
|
||||
document.getElementById('chatSettingsRpg').checked = rpgOn;
|
||||
document.getElementById('chatSettingsRpgBlock').classList.toggle('hidden', !rpgOn);
|
||||
|
||||
chatSettingsGenres.clear();
|
||||
(s.genre || 'adventure').split(',').forEach(g => {
|
||||
const t = g.trim();
|
||||
if (t) chatSettingsGenres.add(t);
|
||||
});
|
||||
resetGenreGrid(document.getElementById('chatSettingsGenreGrid'), chatSettingsGenres);
|
||||
document.getElementById('chatSettingsGenreGrid')?.querySelectorAll('.genre-btn').forEach(btn => {
|
||||
if (chatSettingsGenres.has(btn.dataset.genre)) btn.classList.add('selected');
|
||||
});
|
||||
updateChatSettingsGenresLabel();
|
||||
|
||||
let settings = {};
|
||||
try { settings = JSON.parse(s.rpg_settings_json || '{}'); } catch { /* ignore */ }
|
||||
loadRpgSettingsToDom('cs', settings);
|
||||
|
||||
let phase = '';
|
||||
try {
|
||||
const arc = JSON.parse(s.plot_arc_json || '{}');
|
||||
phase = arc.phase || '';
|
||||
} catch { /* ignore */ }
|
||||
document.getElementById('chatSettingsMeta').innerHTML = [
|
||||
`Симпатия: ${s.affinity ?? 0}`,
|
||||
s.genre ? `Жанр: ${(s.genre || '').split(',').map(g => GENRE_LABELS[g.trim()] || g).join(' + ')}` : '',
|
||||
phase ? `Фаза арки: ${phase}` : '',
|
||||
].filter(Boolean).join('<br>');
|
||||
|
||||
document.getElementById('chatSettingsModal').classList.add('open');
|
||||
}
|
||||
|
||||
export function initChatSettings() {
|
||||
bindGenreGrid(
|
||||
document.getElementById('chatSettingsGenreGrid'),
|
||||
chatSettingsGenres,
|
||||
updateChatSettingsGenresLabel,
|
||||
);
|
||||
|
||||
document.getElementById('chatSettingsRpg')?.addEventListener('change', (e) => {
|
||||
document.getElementById('chatSettingsRpgBlock').classList.toggle('hidden', !e.target.checked);
|
||||
});
|
||||
|
||||
document.getElementById('chatSettingsCancel')?.addEventListener('click', () => {
|
||||
document.getElementById('chatSettingsModal').classList.remove('open');
|
||||
});
|
||||
|
||||
document.getElementById('chatSettingsSave')?.addEventListener('click', async () => {
|
||||
if (!sessionId) return;
|
||||
const title = document.getElementById('chatSettingsTitle').value.trim();
|
||||
const rpgOn = document.getElementById('chatSettingsRpg').checked;
|
||||
const genreValue = [...chatSettingsGenres].join(',') || 'adventure';
|
||||
const settings = readRpgSettingsFromDom('cs');
|
||||
|
||||
const body = {
|
||||
title: title || undefined,
|
||||
rpg_enabled: rpgOn,
|
||||
genre: genreValue,
|
||||
rpg_settings_json: JSON.stringify(settings),
|
||||
};
|
||||
await fetch(`/sessions/${sessionId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
if (rpgOn) {
|
||||
const sessionRes = await fetch(`/sessions/${sessionId}`);
|
||||
const s = sessionRes.ok ? await sessionRes.json() : {};
|
||||
let arc = {};
|
||||
try { arc = JSON.parse(s.plot_arc_json || '{}'); } catch { /* ignore */ }
|
||||
if (!arc || !Object.keys(arc).length) {
|
||||
await bootstrapRpg(sessionId, currentPersona, genreValue, settings);
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('chatSettingsModal').classList.remove('open');
|
||||
const updated = await (await fetch(`/sessions/${sessionId}`)).json();
|
||||
applySessionUi(updated);
|
||||
dom.headerTitle.textContent = updated.title || 'Новый чат';
|
||||
await loadSessions();
|
||||
});
|
||||
}
|
||||
|
||||
export async function initSessions() {
|
||||
await loadSessions();
|
||||
if (sessionId) {
|
||||
@@ -453,4 +140,58 @@ export async function initSessions() {
|
||||
} else {
|
||||
openNewChatWizard();
|
||||
}
|
||||
|
||||
dom.systemBlobRefresh?.addEventListener('click', async () => {
|
||||
if (!sessionId) return;
|
||||
dom.systemBlobRefresh.classList.add('spinning');
|
||||
try {
|
||||
const res = await fetch(`/chat/system/${sessionId}`);
|
||||
if (res.ok) renderSystemBlob(await res.json());
|
||||
} finally {
|
||||
dom.systemBlobRefresh.classList.remove('spinning');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let _prevBlobSections = {};
|
||||
|
||||
function renderSystemBlob(blob) {
|
||||
const tryFmt = (str, fallback = '') => {
|
||||
try { return JSON.stringify(JSON.parse(str), null, 2); } catch { return str || fallback; }
|
||||
};
|
||||
|
||||
const questLines = (blob.quests || []).map(q => {
|
||||
const icon = q.status === 'done' ? '✓' : q.status === 'failed' ? '✗' : '◆';
|
||||
return ` ${icon} [${q.status}] ${q.title}`;
|
||||
}).join('\n');
|
||||
|
||||
const sections = {
|
||||
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}` : '',
|
||||
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)}` : '',
|
||||
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}` : '',
|
||||
};
|
||||
|
||||
const el = dom.systemBlobContent;
|
||||
el.innerHTML = '';
|
||||
|
||||
for (const [key, text] of Object.entries(sections)) {
|
||||
if (!text) continue;
|
||||
const span = document.createElement('span');
|
||||
span.textContent = text;
|
||||
if (_prevBlobSections[key] && _prevBlobSections[key] !== text) {
|
||||
span.className = 'blob-changed';
|
||||
setTimeout(() => span.classList.remove('blob-changed'), 3000);
|
||||
}
|
||||
el.appendChild(span);
|
||||
el.appendChild(document.createTextNode('\n\n'));
|
||||
}
|
||||
|
||||
if (!el.textContent.trim()) el.textContent = '—';
|
||||
_prevBlobSections = { ...sections };
|
||||
}
|
||||
|
||||
@@ -29,4 +29,5 @@ export const dom = {
|
||||
systemBlob: document.getElementById('systemBlob'),
|
||||
systemBlobContent: document.getElementById('systemBlobContent'),
|
||||
systemBlobToggle: document.getElementById('systemBlobToggle'),
|
||||
systemBlobRefresh: document.getElementById('systemBlobRefresh'),
|
||||
};
|
||||
|
||||
+36
-5
@@ -30,7 +30,9 @@ export function initWizard(modalEl, { totalSteps, onStepChange, validateStep })
|
||||
const dots = modalEl.querySelectorAll('.wizard-step-dot');
|
||||
const prevBtn = modalEl.querySelector('[id$="Prev"]');
|
||||
const nextBtn = modalEl.querySelector('[id$="Next"]');
|
||||
const saveBtn = modalEl.querySelector('[id$="Save"], [id$="Confirm"], [id$="Create"]');
|
||||
const saveBtn = modalEl.querySelector(
|
||||
'[id$="Save"], [id$="Confirm"], [id$="Create"], [id$="Import"]',
|
||||
);
|
||||
|
||||
function render() {
|
||||
pages.forEach(p => p.classList.toggle('active', Number(p.dataset.step) === step));
|
||||
@@ -45,14 +47,17 @@ export function initWizard(modalEl, { totalSteps, onStepChange, validateStep })
|
||||
onStepChange?.(step);
|
||||
}
|
||||
|
||||
function goTo(next) {
|
||||
if (next > step && validateStep && !validateStep(step)) return;
|
||||
async function goTo(next) {
|
||||
if (next > step && validateStep) {
|
||||
const ok = await Promise.resolve(validateStep(step));
|
||||
if (!ok) return;
|
||||
}
|
||||
step = Math.max(1, Math.min(totalSteps, next));
|
||||
render();
|
||||
}
|
||||
|
||||
prevBtn?.addEventListener('click', () => goTo(step - 1));
|
||||
nextBtn?.addEventListener('click', () => goTo(step + 1));
|
||||
prevBtn?.addEventListener('click', () => { goTo(step - 1); });
|
||||
nextBtn?.addEventListener('click', () => { goTo(step + 1); });
|
||||
|
||||
render();
|
||||
|
||||
@@ -96,6 +101,32 @@ export function getRpgSettingsFromDom(prefix = '') {
|
||||
};
|
||||
}
|
||||
|
||||
export function fillGreetingSelect(selectEl, firstMes, alternates = []) {
|
||||
if (!selectEl) return;
|
||||
selectEl.innerHTML = '';
|
||||
const main = document.createElement('option');
|
||||
main.value = '0';
|
||||
const mainPreview = (firstMes || '').replace(/\s+/g, ' ').trim();
|
||||
main.textContent = mainPreview
|
||||
? `Основное: ${mainPreview.slice(0, 50)}${mainPreview.length > 50 ? '…' : ''}`
|
||||
: 'Основное (first_mes)';
|
||||
selectEl.appendChild(main);
|
||||
alternates.forEach((text, i) => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = String(i + 1);
|
||||
const preview = String(text).replace(/\s+/g, ' ').trim();
|
||||
opt.textContent = `Альт. ${i + 1}: ${preview.slice(0, 50)}${preview.length > 50 ? '…' : ''}`;
|
||||
selectEl.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
export function getSelectedGreeting(selectEl, firstMes, alternates = []) {
|
||||
const v = selectEl?.value ?? '0';
|
||||
if (v === '0') return firstMes || '';
|
||||
const idx = parseInt(v, 10) - 1;
|
||||
return alternates[idx] ?? firstMes ?? '';
|
||||
}
|
||||
|
||||
export function formatSessionDate(iso) {
|
||||
if (!iso) return '';
|
||||
const d = new Date(iso.includes('T') ? iso : iso.replace(' ', 'T') + 'Z');
|
||||
|
||||
Reference in New Issue
Block a user