Added RPG
This commit is contained in:
@@ -45,6 +45,21 @@ header h1 { font-size: 1.1rem; color: #e94560; }
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rpg-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.75rem;
|
||||
color: #888;
|
||||
border: 1px solid #0f3460;
|
||||
border-radius: 10px;
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.rpg-toggle input { accent-color: #e94560; }
|
||||
.rpg-toggle:hover { border-color: #e94560; color: #e94560; }
|
||||
|
||||
.app-body { display: flex; flex: 1; overflow: hidden; }
|
||||
|
||||
.sidebar {
|
||||
@@ -96,6 +111,7 @@ header h1 { font-size: 1.1rem; color: #e94560; }
|
||||
.session-item:hover { background: #1a1a2e; }
|
||||
.session-item.active { background: #1a1a2e; border-left-color: #e94560; }
|
||||
.session-item .s-title { flex: 1; font-size: 0.82rem; color: #ccc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.session-item .s-companion { flex: 1; font-size: 0.72rem; color: #777; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.session-item .s-meta { font-size: 0.7rem; color: #555; }
|
||||
.session-item .s-del { background: none; border: none; color: #555; cursor: pointer; opacity: 0; }
|
||||
.session-item:hover .s-del { opacity: 1; }
|
||||
@@ -111,6 +127,38 @@ header h1 { font-size: 1.1rem; color: #e94560; }
|
||||
border-bottom: 1px solid #0f3460;
|
||||
}
|
||||
|
||||
.system-blob {
|
||||
border-bottom: 1px solid #0f3460;
|
||||
background: #11162a;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
.system-blob-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #888;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.system-blob-header button {
|
||||
background: transparent;
|
||||
border: 1px solid #0f3460;
|
||||
border-radius: 8px;
|
||||
color: #888;
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.system-blob-header button:hover { border-color: #e94560; color: #e94560; }
|
||||
.system-blob-content {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
font-size: 0.78rem;
|
||||
color: #aaa;
|
||||
max-height: 140px;
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.persona-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -128,6 +176,13 @@ header h1 { font-size: 1.1rem; color: #e94560; }
|
||||
.persona-card.active { border-color: #e94560; background: #1f1535; }
|
||||
.persona-card .emoji { font-size: 1.2rem; }
|
||||
.persona-card .pname { font-size: 0.7rem; color: #ccc; }
|
||||
.persona-card .avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 1px solid #0f3460;
|
||||
}
|
||||
.persona-card .del-btn {
|
||||
position: absolute; top: -5px; right: -5px;
|
||||
width: 14px; height: 14px;
|
||||
@@ -224,6 +279,45 @@ header h1 { font-size: 1.1rem; color: #e94560; }
|
||||
.chat-image { margin-top: 8px; max-width: 100%; border-radius: 8px; border: 1px solid #0f3460; }
|
||||
.image-error { margin-top: 6px; font-size: 0.75rem; color: #888; }
|
||||
|
||||
.choice-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.choice-btn {
|
||||
background: #16213e;
|
||||
border: 1px solid #0f3460;
|
||||
border-radius: 10px;
|
||||
color: #ccc;
|
||||
font-size: 0.8rem;
|
||||
padding: 6px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.choice-btn:hover {
|
||||
border-color: #e94560;
|
||||
color: #e94560;
|
||||
}
|
||||
|
||||
.resolution-block {
|
||||
margin-top: 8px;
|
||||
padding: 8px 12px;
|
||||
background: #11162a;
|
||||
border: 1px solid #0f3460;
|
||||
border-left: 3px solid #4a90d9;
|
||||
border-radius: 8px;
|
||||
color: #bbb;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.resolution-title {
|
||||
color: #4a90d9;
|
||||
font-size: 0.75rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.resolution-text {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.typing {
|
||||
align-self: flex-start;
|
||||
display: flex; gap: 4px;
|
||||
|
||||
+58
-2
@@ -12,6 +12,10 @@
|
||||
<button id="sidebarToggle" type="button">☰</button>
|
||||
<h1>🤖 AI Chat</h1>
|
||||
<span class="header-title" id="headerTitle">Новый чат</span>
|
||||
<label class="rpg-toggle" title="Experimental RPG mode">
|
||||
<input type="checkbox" id="rpgToggle">
|
||||
<span>RPG</span>
|
||||
</label>
|
||||
</header>
|
||||
|
||||
<div class="app-body">
|
||||
@@ -25,6 +29,13 @@
|
||||
|
||||
<div class="main">
|
||||
<div class="persona-bar" id="personaBar"></div>
|
||||
<div class="system-blob" id="systemBlob">
|
||||
<div class="system-blob-header">
|
||||
<span>System</span>
|
||||
<button type="button" id="systemBlobToggle">Скрыть</button>
|
||||
</div>
|
||||
<pre class="system-blob-content" id="systemBlobContent">—</pre>
|
||||
</div>
|
||||
<div class="messages" id="messages">
|
||||
<div class="empty-state" id="emptyState">
|
||||
<span class="big">💬</span>
|
||||
@@ -55,8 +66,23 @@
|
||||
<label>Описание
|
||||
<input type="text" id="pDesc" placeholder="Краткое описание">
|
||||
</label>
|
||||
<label>Системный промт
|
||||
<textarea id="pPrompt" rows="4" placeholder="Ты — ..."></textarea>
|
||||
<label>Личность
|
||||
<textarea id="pPersonality" rows="3" placeholder="calm, confident, sarcastic..."></textarea>
|
||||
</label>
|
||||
<label>Сценарий / мир
|
||||
<textarea id="pScenario" rows="3" placeholder="где вы находитесь, что происходит, правила мира"></textarea>
|
||||
</label>
|
||||
<label>Первое сообщение (first_mes)
|
||||
<textarea id="pFirstMes" rows="3" placeholder="приветствие персонажа"></textarea>
|
||||
</label>
|
||||
<label>Пример диалога (mes_example)
|
||||
<textarea id="pMesExample" rows="3" placeholder="пример стиля речи персонажа"></textarea>
|
||||
</label>
|
||||
<label>Lorebook JSON (опционально)
|
||||
<textarea id="pLorebook" rows="3" placeholder='[]'></textarea>
|
||||
</label>
|
||||
<label>Системный промт (опционально, если пусто — соберём автоматически)
|
||||
<textarea id="pPrompt" rows="3" placeholder=""></textarea>
|
||||
</label>
|
||||
<label><input type="checkbox" id="pSdEnabled"> Генерировать SD-промпт</label>
|
||||
<label>LoRA
|
||||
@@ -95,6 +121,9 @@
|
||||
<div class="modal" style="max-width:560px;max-height:90vh;overflow-y:auto">
|
||||
<h2>✏️ Редактор карточки</h2>
|
||||
<input type="hidden" id="editCardId">
|
||||
<label>Аватар (PNG)
|
||||
<input type="file" id="editCardAvatar" accept=".png">
|
||||
</label>
|
||||
<label>Имя <input type="text" id="editName"></label>
|
||||
<label>Описание <textarea id="editDescription" rows="4"></textarea></label>
|
||||
<label>Личность <textarea id="editPersonality" rows="3"></textarea></label>
|
||||
@@ -111,6 +140,33 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="personaEditOverlay">
|
||||
<div class="modal" style="max-width:560px;max-height:90vh;overflow-y:auto">
|
||||
<h2>✏️ Редактор персонажа</h2>
|
||||
<input type="hidden" id="editPersonaId">
|
||||
<label>Аватар (PNG)
|
||||
<input type="file" id="editPAvatar" accept=".png">
|
||||
</label>
|
||||
<label>Имя <input type="text" id="editPName"></label>
|
||||
<label>Эмодзи <input type="text" id="editPEmoji" maxlength="4"></label>
|
||||
<label>Описание <textarea id="editPDesc" rows="3"></textarea></label>
|
||||
<label>Личность <textarea id="editPPersonality" rows="3"></textarea></label>
|
||||
<label>Сценарий <textarea id="editPScenario" rows="3"></textarea></label>
|
||||
<label>Первое сообщение <textarea id="editPFirstMes" rows="3"></textarea></label>
|
||||
<label>Пример диалога <textarea id="editPMesExample" rows="3"></textarea></label>
|
||||
<label>Lorebook JSON <textarea id="editPLorebook" rows="3"></textarea></label>
|
||||
<label>Системный промпт (опционально) <textarea id="editPPrompt" rows="3"></textarea></label>
|
||||
<label><input type="checkbox" id="editPSdEnabled"> Генерировать SD-промпт</label>
|
||||
<label>LoRA <input type="text" id="editPLora"></label>
|
||||
<label>Вес LoRA <input type="number" id="editPLoraWeight" value="0.8" min="0" max="2" step="0.1"></label>
|
||||
<label>Теги внешности (SD) <input type="text" id="editPAppearance"></label>
|
||||
<div class="modal-buttons">
|
||||
<button id="personaEditCancel" type="button">Отмена</button>
|
||||
<button id="personaEditSave" type="button" style="background:#e94560;color:white">Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="/static/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+37
-1
@@ -1,4 +1,4 @@
|
||||
import { toggleSidebar, dom } from './state.js';
|
||||
import { toggleSidebar, dom, setRpgEnabled } from './state.js';
|
||||
import { initSessions, createNewChat } from './sessions.js';
|
||||
import { loadPersonas, initPersonaModals } from './personas.js';
|
||||
import { sendMessage, clearHistory } from './chat.js';
|
||||
@@ -25,6 +25,42 @@ dom.inputEl.addEventListener('keydown', (e) => {
|
||||
dom.sendBtn.addEventListener('click', sendMessage);
|
||||
dom.clearBtn.addEventListener('click', clearHistory);
|
||||
|
||||
dom.rpgToggle?.addEventListener('change', async () => {
|
||||
setRpgEnabled(dom.rpgToggle.checked);
|
||||
const { sessionId } = await import('./state.js');
|
||||
if (!sessionId) return;
|
||||
await fetch(`/sessions/${sessionId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ rpg_enabled: dom.rpgToggle.checked }),
|
||||
});
|
||||
|
||||
// Debug: immediately bootstrap plot arc and show it in chat
|
||||
if (dom.rpgToggle.checked) {
|
||||
const { currentPersona } = await import('./state.js');
|
||||
const res = await fetch('/chat/rpg/bootstrap', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ session_id: sessionId, persona_id: currentPersona }),
|
||||
});
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
if (data.plot_arc) {
|
||||
const { addMessage } = await import('./chat.js');
|
||||
const title = data.plot_arc.title || 'PlotArc';
|
||||
const phase = data.plot_arc.phase || '';
|
||||
const hint = data.plot_arc.next_beat_hint || '';
|
||||
addMessage('assistant', `--- PlotArc ---\n${title}\nphase: ${phase}\nnext: ${hint}\n---`);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
dom.systemBlobToggle?.addEventListener('click', () => {
|
||||
const hidden = dom.systemBlobContent.classList.toggle('hidden');
|
||||
dom.systemBlobToggle.textContent = hidden ? 'Показать' : 'Скрыть';
|
||||
});
|
||||
|
||||
initPersonaModals();
|
||||
await initSessions();
|
||||
loadPersonas();
|
||||
|
||||
@@ -53,6 +53,52 @@ export function createImagePromptBlock(promptText) {
|
||||
return block;
|
||||
}
|
||||
|
||||
function renderChoices(wrapper, choices) {
|
||||
if (!choices || !choices.length) return;
|
||||
const row = document.createElement('div');
|
||||
row.className = 'choice-row';
|
||||
for (const c of choices) {
|
||||
const btn = document.createElement('button');
|
||||
btn.type = 'button';
|
||||
btn.className = 'choice-btn';
|
||||
btn.textContent = c.label;
|
||||
btn.addEventListener('click', () => {
|
||||
dom.inputEl.value = c.label;
|
||||
dom.inputEl.focus();
|
||||
});
|
||||
row.appendChild(btn);
|
||||
}
|
||||
wrapper.appendChild(row);
|
||||
}
|
||||
|
||||
function renderResolution(wrapper, resolution) {
|
||||
if (!resolution?.text) return;
|
||||
const block = document.createElement('div');
|
||||
block.className = 'resolution-block';
|
||||
block.innerHTML = `
|
||||
<div class="resolution-title">Resolution (d20=${resolution.roll}, ${resolution.outcome})</div>
|
||||
<div class="resolution-text"></div>
|
||||
`;
|
||||
block.querySelector('.resolution-text').textContent = resolution.text;
|
||||
wrapper.appendChild(block);
|
||||
}
|
||||
|
||||
function renderDebugBlocks(wrapper, blocks) {
|
||||
if (!blocks || !blocks.length) return;
|
||||
for (const b of blocks) {
|
||||
if (!b?.text) continue;
|
||||
if (b.type === 'global_plot') {
|
||||
addMessage('assistant', `--- Global plot ---\n${b.text}\n---`);
|
||||
} else if (b.type === 'facts') {
|
||||
addMessage('assistant', b.text);
|
||||
} else if (b.type === 'status_quo') {
|
||||
addMessage('assistant', b.text);
|
||||
} else {
|
||||
addMessage('assistant', b.text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function generateImageViaA1111(promptText, block) {
|
||||
block.parentElement.querySelector('.chat-image')?.remove();
|
||||
block.parentElement.querySelector('.image-error')?.remove();
|
||||
@@ -238,6 +284,16 @@ export async function sendMessage() {
|
||||
err.textContent = '🖼 ' + data.image_error;
|
||||
bubble.parentElement.appendChild(err);
|
||||
}
|
||||
if (data.choices && bubble) {
|
||||
renderChoices(bubble.parentElement, data.choices);
|
||||
}
|
||||
if (data.resolution && bubble) {
|
||||
// show resolution under the last user message (best-effort: attach near assistant response)
|
||||
renderResolution(bubble.parentElement, data.resolution);
|
||||
}
|
||||
if (data.debug) {
|
||||
renderDebugBlocks(bubble?.parentElement || dom.messagesEl, data.debug);
|
||||
}
|
||||
const { loadSessions } = await import('./sessions.js');
|
||||
loadSessions();
|
||||
}
|
||||
|
||||
+91
-3
@@ -1,6 +1,8 @@
|
||||
import { currentPersona, setCurrentPersona, sessionId } from './state.js';
|
||||
import { initChat } from './chat.js';
|
||||
|
||||
export let personaIndex = new Map();
|
||||
|
||||
export function highlightPersona(personaId) {
|
||||
document.querySelectorAll('.persona-card').forEach(c => {
|
||||
c.classList.toggle('active', c.dataset.id === personaId);
|
||||
@@ -10,6 +12,7 @@ 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]));
|
||||
const bar = document.getElementById('personaBar');
|
||||
bar.innerHTML = '';
|
||||
|
||||
@@ -18,11 +21,14 @@ export async function loadPersonas() {
|
||||
card.className = 'persona-card' + (p.persona_id === currentPersona ? ' active' : '');
|
||||
card.dataset.id = p.persona_id;
|
||||
const isCard = p.persona_id.startsWith('card_');
|
||||
const isCustomPersona = p.custom && !isCard;
|
||||
const avatar = p.avatar_path ? `/static/${p.avatar_path}` : '';
|
||||
card.innerHTML = `
|
||||
<span class="emoji">${p.emoji}</span>
|
||||
${avatar ? `<img class="avatar" src="${avatar}" alt="">` : `<span class="emoji">${p.emoji}</span>`}
|
||||
<span class="pname">${p.name}</span>
|
||||
${p.custom ? `<button class="del-btn" type="button">✕</button>` : ''}
|
||||
${isCard ? `<button class="edit-btn" type="button">✏️</button>` : ''}
|
||||
${isCustomPersona ? `<button class="edit-persona-btn" type="button">✏️</button>` : ''}
|
||||
`;
|
||||
card.addEventListener('click', () => selectPersona(p.persona_id));
|
||||
card.querySelector('.del-btn')?.addEventListener('click', async (e) => {
|
||||
@@ -48,6 +54,27 @@ export async function loadPersonas() {
|
||||
document.getElementById('editLoraWeight').value = data.lora_weight ?? 0.8;
|
||||
document.getElementById('cardEditOverlay').classList.add('open');
|
||||
});
|
||||
|
||||
card.querySelector('.edit-persona-btn')?.addEventListener('click', async (e) => {
|
||||
e.stopPropagation();
|
||||
const r = await fetch(`/personas/${p.persona_id}`);
|
||||
const data = await r.json();
|
||||
document.getElementById('editPersonaId').value = p.persona_id;
|
||||
document.getElementById('editPName').value = data.name || '';
|
||||
document.getElementById('editPEmoji').value = data.emoji || '';
|
||||
document.getElementById('editPDesc').value = data.description || '';
|
||||
document.getElementById('editPPersonality').value = data.personality || '';
|
||||
document.getElementById('editPScenario').value = data.scenario || '';
|
||||
document.getElementById('editPFirstMes').value = data.first_mes || '';
|
||||
document.getElementById('editPMesExample').value = data.mes_example || '';
|
||||
document.getElementById('editPLorebook').value = data.lorebook_json || '[]';
|
||||
document.getElementById('editPPrompt').value = data.prompt || '';
|
||||
document.getElementById('editPSdEnabled').checked = !!data.sd_enabled;
|
||||
document.getElementById('editPLora').value = data.lora_name || '';
|
||||
document.getElementById('editPLoraWeight').value = data.lora_weight ?? 0.8;
|
||||
document.getElementById('editPAppearance').value = data.appearance_tags || '';
|
||||
document.getElementById('personaEditOverlay').classList.add('open');
|
||||
});
|
||||
bar.appendChild(card);
|
||||
});
|
||||
|
||||
@@ -90,6 +117,14 @@ export function initPersonaModals() {
|
||||
document.getElementById('cardEditOverlay').classList.remove('open');
|
||||
});
|
||||
|
||||
// custom persona editor (reuses create modal fields)
|
||||
const personaEditCancel = document.getElementById('personaEditCancel');
|
||||
if (personaEditCancel) {
|
||||
personaEditCancel.addEventListener('click', () => {
|
||||
document.getElementById('personaEditOverlay').classList.remove('open');
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('modalSave').addEventListener('click', async () => {
|
||||
const data = {
|
||||
persona_id: document.getElementById('pId').value.trim(),
|
||||
@@ -100,9 +135,14 @@ export function initPersonaModals() {
|
||||
sd_enabled: document.getElementById('pSdEnabled').checked,
|
||||
lora_name: document.getElementById('pLora').value.trim(),
|
||||
appearance_tags: document.getElementById('pAppearance').value.trim(),
|
||||
personality: document.getElementById('pPersonality').value.trim(),
|
||||
scenario: document.getElementById('pScenario').value.trim(),
|
||||
first_mes: document.getElementById('pFirstMes').value.trim(),
|
||||
mes_example: document.getElementById('pMesExample').value.trim(),
|
||||
lorebook_json: document.getElementById('pLorebook').value.trim() || '[]',
|
||||
};
|
||||
if (!data.persona_id || !data.name || !data.prompt) {
|
||||
alert('Заполни ID, имя и промт');
|
||||
if (!data.persona_id || !data.name) {
|
||||
alert('Заполни ID и имя');
|
||||
return;
|
||||
}
|
||||
await fetch('/personas/', {
|
||||
@@ -134,6 +174,15 @@ export function initPersonaModals() {
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (!res.ok) { alert('Ошибка сохранения'); return; }
|
||||
|
||||
const avatarFile = document.getElementById('editCardAvatar')?.files?.[0];
|
||||
if (avatarFile) {
|
||||
const form = new FormData();
|
||||
form.append('file', avatarFile);
|
||||
await fetch(`/characters/${cardId}/avatar`, { method: 'POST', body: form });
|
||||
document.getElementById('editCardAvatar').value = '';
|
||||
}
|
||||
|
||||
document.getElementById('cardEditOverlay').classList.remove('open');
|
||||
await loadPersonas();
|
||||
});
|
||||
@@ -160,5 +209,44 @@ export function initPersonaModals() {
|
||||
await loadPersonas();
|
||||
await selectPersona(data.persona_id);
|
||||
});
|
||||
|
||||
const personaEditSave = document.getElementById('personaEditSave');
|
||||
if (personaEditSave) {
|
||||
personaEditSave.addEventListener('click', async () => {
|
||||
const personaId = document.getElementById('editPersonaId').value;
|
||||
const body = {
|
||||
name: document.getElementById('editPName').value.trim() || undefined,
|
||||
emoji: document.getElementById('editPEmoji').value.trim() || undefined,
|
||||
description: document.getElementById('editPDesc').value.trim() || undefined,
|
||||
personality: document.getElementById('editPPersonality').value.trim() || undefined,
|
||||
scenario: document.getElementById('editPScenario').value.trim() || undefined,
|
||||
first_mes: document.getElementById('editPFirstMes').value.trim() || undefined,
|
||||
mes_example: document.getElementById('editPMesExample').value.trim() || undefined,
|
||||
lorebook_json: document.getElementById('editPLorebook').value.trim() || undefined,
|
||||
prompt: document.getElementById('editPPrompt').value.trim() || undefined,
|
||||
sd_enabled: document.getElementById('editPSdEnabled').checked,
|
||||
lora_name: document.getElementById('editPLora').value.trim() || undefined,
|
||||
lora_weight: parseFloat(document.getElementById('editPLoraWeight').value) || undefined,
|
||||
appearance_tags: document.getElementById('editPAppearance').value.trim() || undefined,
|
||||
};
|
||||
const res = await fetch(`/personas/${personaId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (!res.ok) { alert('Ошибка сохранения'); return; }
|
||||
|
||||
const avatarFile = document.getElementById('editPAvatar')?.files?.[0];
|
||||
if (avatarFile) {
|
||||
const form = new FormData();
|
||||
form.append('file', avatarFile);
|
||||
await fetch(`/personas/${personaId}/avatar`, { method: 'POST', body: form });
|
||||
document.getElementById('editPAvatar').value = '';
|
||||
}
|
||||
|
||||
document.getElementById('personaEditOverlay').classList.remove('open');
|
||||
await loadPersonas();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+23
-2
@@ -1,6 +1,6 @@
|
||||
import { sessionId, setSessionId, setCurrentPersona, currentPersona, dom } from './state.js';
|
||||
import { sessionId, setSessionId, setCurrentPersona, currentPersona, dom, setRpgEnabled } from './state.js';
|
||||
import { clearMessages, addMessage, initChat } from './chat.js';
|
||||
import { highlightPersona } from './personas.js';
|
||||
import { highlightPersona, personaIndex } from './personas.js';
|
||||
|
||||
function escapeTitle(t) {
|
||||
const d = document.createElement('div');
|
||||
@@ -16,8 +16,10 @@ export async function loadSessions() {
|
||||
sessions.forEach(s => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'session-item' + (s.session_id === sessionId ? ' active' : '');
|
||||
const personaName = personaIndex.get(s.persona_id)?.name || s.persona_id || 'default';
|
||||
item.innerHTML = `
|
||||
<div class="s-title">${escapeTitle(s.title || 'Новый чат')}</div>
|
||||
<div class="s-companion">С: ${escapeTitle(personaName)}</div>
|
||||
<div class="s-meta">${s.message_count} сообщ.</div>
|
||||
<button class="s-del" type="button">🗑</button>
|
||||
`;
|
||||
@@ -48,8 +50,27 @@ export async function loadChatHistory(id) {
|
||||
setCurrentPersona(s.persona_id);
|
||||
highlightPersona(s.persona_id);
|
||||
}
|
||||
if (dom.rpgToggle) {
|
||||
const enabled = !!s.rpg_enabled;
|
||||
dom.rpgToggle.checked = enabled;
|
||||
setRpgEnabled(enabled);
|
||||
}
|
||||
}
|
||||
|
||||
// system blob
|
||||
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') || '—';
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
|
||||
const histRes = await fetch(`/chat/history/${id}`);
|
||||
if (!histRes.ok) return;
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
export let sessionId = localStorage.getItem('chat_session_id') || null;
|
||||
export let currentPersona = localStorage.getItem('persona_id') || 'default';
|
||||
export let sidebarOpen = true;
|
||||
export let rpgEnabled = false;
|
||||
export function toggleSidebar() { sidebarOpen = !sidebarOpen; return sidebarOpen; }
|
||||
|
||||
export function setSessionId(id) {
|
||||
@@ -13,6 +14,8 @@ export function setCurrentPersona(id) {
|
||||
localStorage.setItem('persona_id', id);
|
||||
}
|
||||
|
||||
export function setRpgEnabled(v) { rpgEnabled = !!v; }
|
||||
|
||||
export const dom = {
|
||||
messagesEl: document.getElementById('messages'),
|
||||
inputEl: document.getElementById('input'),
|
||||
@@ -21,4 +24,8 @@ export const dom = {
|
||||
sessionList: document.getElementById('sessionList'),
|
||||
headerTitle: document.getElementById('headerTitle'),
|
||||
emptyState: document.getElementById('emptyState'),
|
||||
rpgToggle: document.getElementById('rpgToggle'),
|
||||
systemBlob: document.getElementById('systemBlob'),
|
||||
systemBlobContent: document.getElementById('systemBlobContent'),
|
||||
systemBlobToggle: document.getElementById('systemBlobToggle'),
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user