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: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
@@ -5,6 +5,7 @@ body {
|
||||
color: #e0e0e0;
|
||||
font-family: 'Segoe UI', sans-serif;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
@@ -45,6 +46,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 +112,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 +128,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 +177,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 +280,27 @@ 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;
|
||||
}
|
||||
|
||||
|
||||
.typing {
|
||||
align-self: flex-start;
|
||||
display: flex; gap: 4px;
|
||||
@@ -240,6 +317,7 @@ header h1 { font-size: 1.1rem; color: #e94560; }
|
||||
.input-area {
|
||||
display: flex; gap: 10px;
|
||||
padding: 12px 16px;
|
||||
padding-bottom: max(12px, env(safe-area-inset-bottom));
|
||||
border-top: 1px solid #0f3460;
|
||||
}
|
||||
|
||||
@@ -276,6 +354,8 @@ textarea:focus { border-color: #e94560; }
|
||||
display: none; position: fixed; inset: 0;
|
||||
background: rgba(0,0,0,0.7);
|
||||
z-index: 100; align-items: center; justify-content: center;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.modal-overlay.open { display: flex; }
|
||||
|
||||
@@ -283,8 +363,48 @@ textarea:focus { border-color: #e94560; }
|
||||
background: #16213e; border: 1px solid #0f3460;
|
||||
border-radius: 16px; padding: 24px;
|
||||
width: 100%; max-width: 440px;
|
||||
max-height: calc(100vh - 32px);
|
||||
display: flex; flex-direction: column; gap: 12px;
|
||||
margin: auto;
|
||||
}
|
||||
.modal-wizard { max-width: 480px; }
|
||||
.modal-wizard-header { flex-shrink: 0; }
|
||||
.modal-wizard-header h2 { margin-bottom: 8px; }
|
||||
.modal-wizard-body {
|
||||
flex: 1; min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
.modal-wizard-footer {
|
||||
flex-shrink: 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.wizard-steps {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
gap: 0; margin-bottom: 4px;
|
||||
}
|
||||
.wizard-step-dot {
|
||||
width: 28px; height: 28px; border-radius: 50%;
|
||||
background: #1a1a2e; border: 1px solid #0f3460;
|
||||
color: #666; font-size: 0.75rem;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.wizard-step-dot.active { border-color: #e94560; color: #e94560; background: #1f0a14; }
|
||||
.wizard-step-dot.done { border-color: #9b7fd4; color: #9b7fd4; }
|
||||
.wizard-step-line { width: 40px; height: 1px; background: #0f3460; }
|
||||
.wizard-page { display: none; flex-direction: column; gap: 12px; }
|
||||
.wizard-page.active { display: flex; }
|
||||
.wizard-page-title { font-size: 0.85rem; color: #9b7fd4; margin: 0 0 4px; }
|
||||
.wizard-hint { font-size: 0.8rem; color: #666; margin: -4px 0 4px; }
|
||||
.selected-genres-label { font-size: 0.8rem; color: #e94560; margin-top: 4px; }
|
||||
.wizard-nav { display: flex; gap: 8px; }
|
||||
.wizard-nav-btn {
|
||||
padding: 8px 18px; border-radius: 8px; border: none; cursor: pointer;
|
||||
background: #0f3460; color: #ccc;
|
||||
}
|
||||
.wizard-nav-btn:hover { color: #e0e0e0; }
|
||||
.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 {
|
||||
@@ -293,6 +413,7 @@ textarea:focus { border-color: #e94560; }
|
||||
padding: 8px 10px; outline: none; font-family: inherit;
|
||||
}
|
||||
.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; }
|
||||
#modalCancel, #cardModalCancel { background: #0f3460; color: #aaa; }
|
||||
#modalSave, #cardModalImport { background: #e94560; color: white; }
|
||||
@@ -304,3 +425,168 @@ textarea:focus { border-color: #e94560; }
|
||||
}
|
||||
.empty-state .big { font-size: 2.5rem; }
|
||||
.hidden { display: none !important; }
|
||||
|
||||
/* Narrator message bubble */
|
||||
.message.narrator { align-self: center; max-width: 80%; }
|
||||
.message.narrator .label { color: #9b7fd4; font-size: 0.75rem; margin-bottom: 4px; }
|
||||
.message.narrator .bubble {
|
||||
background: #1a1230;
|
||||
border: 1px solid #4a2d8a;
|
||||
border-left: 3px solid #9b7fd4;
|
||||
border-radius: 12px;
|
||||
padding: 10px 14px;
|
||||
color: #ccc;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Dice block inside narrator bubble */
|
||||
.dice-block {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
background: #0f0a1e;
|
||||
font-size: 0.8rem;
|
||||
width: fit-content;
|
||||
}
|
||||
.dice-icon { font-size: 1.1rem; }
|
||||
.dice-roll { font-size: 1.3rem; font-weight: bold; }
|
||||
.dice-outcome { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
.outcome-crit-fail { border: 1px solid #c0392b; }
|
||||
.outcome-crit-fail .dice-roll { color: #e74c3c; }
|
||||
.outcome-crit-fail .dice-outcome { color: #e74c3c; }
|
||||
.outcome-fail { border: 1px solid #555; }
|
||||
.outcome-fail .dice-roll { color: #aaa; }
|
||||
.outcome-fail .dice-outcome { color: #888; }
|
||||
.outcome-success { border: 1px solid #27ae60; }
|
||||
.outcome-success .dice-roll { color: #2ecc71; }
|
||||
.outcome-success .dice-outcome { color: #2ecc71; }
|
||||
.outcome-crit-success { border: 1px solid #f39c12; }
|
||||
.outcome-crit-success .dice-roll { color: #f1c40f; }
|
||||
.outcome-crit-success .dice-outcome { color: #f1c40f; }
|
||||
.narrator-text { white-space: pre-wrap; line-height: 1.5; }
|
||||
|
||||
/* Affinity display in header */
|
||||
.affinity-display {
|
||||
font-size: 0.8rem; padding: 4px 10px;
|
||||
border: 1px solid #0f3460; border-radius: 10px;
|
||||
color: #aaa; white-space: nowrap;
|
||||
}
|
||||
.affinity-display.affinity-high { border-color: #e94560; color: #e94560; }
|
||||
.affinity-display.affinity-low { border-color: #555; color: #666; }
|
||||
|
||||
/* Quest panel in sidebar */
|
||||
.quest-panel {
|
||||
border-top: 1px solid #0f3460;
|
||||
padding: 10px 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.quest-panel-header {
|
||||
font-size: 0.75rem; color: #888;
|
||||
text-transform: uppercase; letter-spacing: 0.05em;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.quest-item {
|
||||
font-size: 0.8rem; padding: 4px 0;
|
||||
color: #bbb; line-height: 1.4;
|
||||
border-bottom: 1px solid #0f3460;
|
||||
}
|
||||
.quest-item:last-child { border-bottom: none; }
|
||||
.quest-done { color: #555; text-decoration: line-through; }
|
||||
.quest-failed { color: #c0392b; }
|
||||
|
||||
/* Genre modal grid */
|
||||
.genre-grid {
|
||||
display: grid; grid-template-columns: 1fr 1fr;
|
||||
gap: 8px; margin: 4px 0;
|
||||
}
|
||||
.genre-btn {
|
||||
background: #1a1a2e; border: 1px solid #0f3460;
|
||||
border-radius: 8px; color: #ccc;
|
||||
padding: 10px 8px; cursor: pointer;
|
||||
font-size: 0.85rem; text-align: center;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.genre-btn:hover { border-color: #9b7fd4; color: #e0e0e0; }
|
||||
.genre-btn.selected { border-color: #e94560; color: #e94560; background: #1f0a14; }
|
||||
|
||||
/* RPG settings checkboxes */
|
||||
.rpg-settings-grid {
|
||||
display: grid; grid-template-columns: 1fr 1fr;
|
||||
gap: 6px; margin: 4px 0;
|
||||
}
|
||||
.rpg-settings-grid label {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
font-size: 0.8rem; color: #aaa; cursor: pointer;
|
||||
flex-direction: row;
|
||||
}
|
||||
.rpg-settings-grid input[type=checkbox] { accent-color: #e94560; }
|
||||
|
||||
.header-icon-btn {
|
||||
background: transparent; border: 1px solid #0f3460;
|
||||
border-radius: 10px; color: #aaa; padding: 4px 10px;
|
||||
cursor: pointer; font-size: 1rem;
|
||||
}
|
||||
.header-icon-btn:hover { border-color: #e94560; color: #e94560; }
|
||||
.rpg-badge {
|
||||
font-size: 0.7rem; padding: 3px 8px;
|
||||
border: 1px solid #9b7fd4; border-radius: 8px;
|
||||
color: #9b7fd4; text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.persona-pick-grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
.persona-pick-card {
|
||||
background: #1a1a2e; border: 1px solid #0f3460;
|
||||
border-radius: 10px; padding: 10px 8px;
|
||||
cursor: pointer; text-align: center;
|
||||
font-size: 0.8rem; color: #ccc;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.persona-pick-card:hover { border-color: #9b7fd4; }
|
||||
.persona-pick-card.selected { border-color: #e94560; color: #e94560; background: #1f0a14; }
|
||||
.persona-pick-card .emoji { font-size: 1.5rem; display: block; margin-bottom: 4px; }
|
||||
.rpg-mode-option {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
font-size: 0.9rem; color: #ccc; cursor: pointer;
|
||||
flex-direction: row !important;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.chat-settings-meta {
|
||||
margin-top: 12px; padding: 10px;
|
||||
background: #1a1a2e; border-radius: 8px;
|
||||
font-size: 0.8rem; color: #888; line-height: 1.5;
|
||||
}
|
||||
.session-item .s-preview {
|
||||
font-size: 0.75rem; color: #666;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.session-item .s-row {
|
||||
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
|
||||
}
|
||||
.session-item .s-badge {
|
||||
font-size: 0.65rem; padding: 1px 5px;
|
||||
border: 1px solid #9b7fd4; border-radius: 4px;
|
||||
color: #9b7fd4;
|
||||
}
|
||||
.session-item .s-date { font-size: 0.7rem; color: #555; margin-left: auto; }
|
||||
.session-item .s-title[contenteditable] {
|
||||
outline: none; border-bottom: 1px dashed #e94560;
|
||||
}
|
||||
.message-actions {
|
||||
display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap;
|
||||
}
|
||||
.message-actions button {
|
||||
background: #0f3460; border: none; border-radius: 6px;
|
||||
color: #aaa; font-size: 0.7rem; padding: 3px 8px; cursor: pointer;
|
||||
}
|
||||
.message-actions button:hover { color: #e94560; }
|
||||
.message .bubble-edit {
|
||||
width: 100%; min-height: 60px;
|
||||
background: #1a1a2e; border: 1px solid #e94560;
|
||||
border-radius: 8px; color: #e0e0e0; padding: 8px;
|
||||
font-family: inherit; resize: vertical;
|
||||
}
|
||||
|
||||
+217
-27
@@ -2,7 +2,7 @@
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<title>AI Chat</title>
|
||||
<link rel="stylesheet" href="/static/css/app.css">
|
||||
</head>
|
||||
@@ -12,6 +12,9 @@
|
||||
<button id="sidebarToggle" type="button">☰</button>
|
||||
<h1>🤖 AI Chat</h1>
|
||||
<span class="header-title" id="headerTitle">Новый чат</span>
|
||||
<span id="rpgBadge" class="rpg-badge hidden" title="RPG режим">RPG</span>
|
||||
<button id="chatSettingsBtn" type="button" class="header-icon-btn" title="Настройки чата">⚙️</button>
|
||||
<span id="affinityDisplay" class="affinity-display hidden"></span>
|
||||
</header>
|
||||
|
||||
<div class="app-body">
|
||||
@@ -21,10 +24,21 @@
|
||||
<button id="newChatBtn" type="button">+ Новый</button>
|
||||
</div>
|
||||
<div class="session-list" id="sessionList"></div>
|
||||
<div class="quest-panel hidden" id="questPanel">
|
||||
<div class="quest-panel-header">Квесты</div>
|
||||
<div id="questList"></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<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>
|
||||
@@ -41,33 +55,72 @@
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="modalOverlay">
|
||||
<div class="modal">
|
||||
<h2>✨ Новый персонаж</h2>
|
||||
<label>ID (латиницей)
|
||||
<input type="text" id="pId" placeholder="my_hero">
|
||||
</label>
|
||||
<label>Имя
|
||||
<input type="text" id="pName" placeholder="Мой герой">
|
||||
</label>
|
||||
<label>Эмодзи
|
||||
<input type="text" id="pEmoji" placeholder="🦸" maxlength="4">
|
||||
</label>
|
||||
<label>Описание
|
||||
<input type="text" id="pDesc" placeholder="Краткое описание">
|
||||
</label>
|
||||
<label>Системный промт
|
||||
<textarea id="pPrompt" rows="4" placeholder="Ты — ..."></textarea>
|
||||
</label>
|
||||
<label><input type="checkbox" id="pSdEnabled"> Генерировать SD-промпт</label>
|
||||
<label>LoRA
|
||||
<input type="text" id="pLora" placeholder="CharacterLoRA">
|
||||
</label>
|
||||
<label>Теги внешности (SD)
|
||||
<input type="text" id="pAppearance" placeholder="blue hair, elf ears">
|
||||
</label>
|
||||
<div class="modal-buttons">
|
||||
<div class="modal modal-wizard">
|
||||
<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>
|
||||
<span class="wizard-step-line"></span>
|
||||
<span class="wizard-step-dot" data-step="3">3</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-wizard-body">
|
||||
<div class="wizard-page active" data-step="1">
|
||||
<p class="wizard-page-title">Основное</p>
|
||||
<label>ID (латиницей)
|
||||
<input type="text" id="pId" placeholder="my_hero">
|
||||
</label>
|
||||
<label>Имя
|
||||
<input type="text" id="pName" placeholder="Мой герой">
|
||||
</label>
|
||||
<label>Эмодзи
|
||||
<input type="text" id="pEmoji" placeholder="🦸" maxlength="4">
|
||||
</label>
|
||||
<label>Описание
|
||||
<input type="text" id="pDesc" placeholder="Краткое описание">
|
||||
</label>
|
||||
</div>
|
||||
<div class="wizard-page" data-step="2">
|
||||
<p class="wizard-page-title">Характер и сценарий</p>
|
||||
<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>
|
||||
</div>
|
||||
<div class="wizard-page" data-step="3">
|
||||
<p class="wizard-page-title">Дополнительно</p>
|
||||
<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
|
||||
<input type="text" id="pLora" placeholder="CharacterLoRA">
|
||||
</label>
|
||||
<label>Теги внешности (SD)
|
||||
<input type="text" id="pAppearance" placeholder="blue hair, elf ears">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-buttons modal-wizard-footer">
|
||||
<button id="modalCancel" type="button">Отмена</button>
|
||||
<button id="modalSave" type="button">Создать</button>
|
||||
<div class="wizard-nav">
|
||||
<button id="modalPrev" type="button" class="wizard-nav-btn hidden">← Назад</button>
|
||||
<button id="modalNext" type="button" class="wizard-nav-btn">Далее →</button>
|
||||
<button id="modalSave" type="button" class="hidden">Создать</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -95,6 +148,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 +167,140 @@
|
||||
</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>
|
||||
|
||||
<div class="modal-overlay" id="newChatModal">
|
||||
<div class="modal modal-wizard">
|
||||
<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>
|
||||
<span class="wizard-step-line"></span>
|
||||
<span class="wizard-step-dot" data-step="3">3</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-wizard-body">
|
||||
<div class="wizard-page active" data-step="1">
|
||||
<p class="wizard-page-title">Персонаж</p>
|
||||
<div class="persona-pick-grid" id="newChatPersonaGrid"></div>
|
||||
</div>
|
||||
<div class="wizard-page" data-step="2">
|
||||
<p class="wizard-page-title">Режим</p>
|
||||
<label class="rpg-mode-option">
|
||||
<input type="radio" name="newChatRpg" value="0" checked> Обычный чат
|
||||
</label>
|
||||
<label class="rpg-mode-option">
|
||||
<input type="radio" name="newChatRpg" value="1"> RPG режим
|
||||
</label>
|
||||
</div>
|
||||
<div class="wizard-page" data-step="3">
|
||||
<div id="newChatPlainStep">
|
||||
<p class="wizard-page-title">Название (опционально)</p>
|
||||
<label>Название чата
|
||||
<input type="text" id="newChatTitle" placeholder="Оставь пустым — сгенерируем автоматически">
|
||||
</label>
|
||||
</div>
|
||||
<div id="newChatRpgStep" class="hidden">
|
||||
<p class="wizard-page-title">Жанры и настройки RPG</p>
|
||||
<p class="wizard-hint">Можно выбрать несколько жанров</p>
|
||||
<div class="genre-grid" id="newChatGenreGrid">
|
||||
<button type="button" class="genre-btn" data-genre="adventure">⚔️ Приключение</button>
|
||||
<button type="button" class="genre-btn" data-genre="horror">👻 Хоррор</button>
|
||||
<button type="button" class="genre-btn" data-genre="romance">💕 Романтика</button>
|
||||
<button type="button" class="genre-btn" data-genre="slice_of_life">☕ Повседневность</button>
|
||||
<button type="button" class="genre-btn" data-genre="fantasy">🧙 Фэнтези</button>
|
||||
<button type="button" class="genre-btn" data-genre="sci_fi">🚀 Sci-Fi</button>
|
||||
</div>
|
||||
<p class="selected-genres-label hidden" id="newChatGenresLabel"></p>
|
||||
<div class="rpg-settings-grid" style="margin-top:12px">
|
||||
<label><input type="checkbox" id="ncSettingDice" checked> 🎲 Проверки d20</label>
|
||||
<label><input type="checkbox" id="ncSettingNarrator" checked> 📖 Нарратор</label>
|
||||
<label><input type="checkbox" id="ncSettingQuests" checked> 📜 Квесты</label>
|
||||
<label><input type="checkbox" id="ncSettingAffinity" checked> 💖 Симпатия</label>
|
||||
<label><input type="checkbox" id="ncSettingChoices" checked> 🔘 Кнопки выбора</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-buttons modal-wizard-footer">
|
||||
<button id="newChatCancel" type="button">Отмена</button>
|
||||
<div class="wizard-nav">
|
||||
<button id="newChatPrev" type="button" class="wizard-nav-btn hidden">← Назад</button>
|
||||
<button id="newChatNext" type="button" class="wizard-nav-btn">Далее →</button>
|
||||
<button id="newChatCreate" type="button" class="hidden" style="background:#e94560;color:white">Создать</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="chatSettingsModal">
|
||||
<div class="modal modal-wizard" style="max-width:520px">
|
||||
<div class="modal-wizard-header">
|
||||
<h2>⚙️ Настройки чата</h2>
|
||||
</div>
|
||||
<div class="modal-wizard-body">
|
||||
<label>Название чата
|
||||
<input type="text" id="chatSettingsTitle">
|
||||
</label>
|
||||
<label class="rpg-mode-option">
|
||||
<input type="checkbox" id="chatSettingsRpg"> RPG режим
|
||||
</label>
|
||||
<div id="chatSettingsRpgBlock" class="hidden">
|
||||
<p class="wizard-page-title">Жанры</p>
|
||||
<div class="genre-grid" id="chatSettingsGenreGrid">
|
||||
<button type="button" class="genre-btn" data-genre="adventure">⚔️ Приключение</button>
|
||||
<button type="button" class="genre-btn" data-genre="horror">👻 Хоррор</button>
|
||||
<button type="button" class="genre-btn" data-genre="romance">💕 Романтика</button>
|
||||
<button type="button" class="genre-btn" data-genre="slice_of_life">☕ Повседневность</button>
|
||||
<button type="button" class="genre-btn" data-genre="fantasy">🧙 Фэнтези</button>
|
||||
<button type="button" class="genre-btn" data-genre="sci_fi">🚀 Sci-Fi</button>
|
||||
</div>
|
||||
<p class="selected-genres-label hidden" id="chatSettingsGenresLabel"></p>
|
||||
<p class="wizard-page-title" style="margin-top:12px">Настройки RPG</p>
|
||||
<div class="rpg-settings-grid">
|
||||
<label><input type="checkbox" id="csSettingDice"> 🎲 Проверки d20</label>
|
||||
<label><input type="checkbox" id="csSettingNarrator"> 📖 Нарратор</label>
|
||||
<label><input type="checkbox" id="csSettingQuests"> 📜 Квесты</label>
|
||||
<label><input type="checkbox" id="csSettingAffinity"> 💖 Симпатия</label>
|
||||
<label><input type="checkbox" id="csSettingChoices"> 🔘 Кнопки выбора</label>
|
||||
</div>
|
||||
<div class="chat-settings-meta" id="chatSettingsMeta"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-buttons modal-wizard-footer">
|
||||
<button id="chatSettingsCancel" type="button">Отмена</button>
|
||||
<button id="chatSettingsSave" type="button" style="background:#e94560;color:white">Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="/static/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+12
-2
@@ -1,5 +1,7 @@
|
||||
import { toggleSidebar, dom } from './state.js';
|
||||
import { initSessions, createNewChat } from './sessions.js';
|
||||
import {
|
||||
initSessions, openNewChatWizard, initNewChatWizard, initChatSettings, openChatSettings,
|
||||
} from './sessions.js';
|
||||
import { loadPersonas, initPersonaModals } from './personas.js';
|
||||
import { sendMessage, clearHistory } from './chat.js';
|
||||
|
||||
@@ -8,7 +10,8 @@ document.getElementById('sidebarToggle').addEventListener('click', () => {
|
||||
document.getElementById('sidebar').classList.toggle('collapsed', !open);
|
||||
});
|
||||
|
||||
document.getElementById('newChatBtn').addEventListener('click', createNewChat);
|
||||
document.getElementById('newChatBtn').addEventListener('click', openNewChatWizard);
|
||||
document.getElementById('chatSettingsBtn')?.addEventListener('click', openChatSettings);
|
||||
|
||||
dom.inputEl.addEventListener('input', () => {
|
||||
dom.inputEl.style.height = 'auto';
|
||||
@@ -25,6 +28,13 @@ dom.inputEl.addEventListener('keydown', (e) => {
|
||||
dom.sendBtn.addEventListener('click', sendMessage);
|
||||
dom.clearBtn.addEventListener('click', clearHistory);
|
||||
|
||||
dom.systemBlobToggle?.addEventListener('click', () => {
|
||||
const hidden = dom.systemBlobContent.classList.toggle('hidden');
|
||||
dom.systemBlobToggle.textContent = hidden ? 'Показать' : 'Скрыть';
|
||||
});
|
||||
|
||||
initPersonaModals();
|
||||
initNewChatWizard();
|
||||
initChatSettings();
|
||||
await initSessions();
|
||||
loadPersonas();
|
||||
|
||||
+331
-54
@@ -53,6 +53,102 @@ export function createImagePromptBlock(promptText) {
|
||||
return block;
|
||||
}
|
||||
|
||||
const OUTCOME_CLASS = {
|
||||
'critical failure': 'outcome-crit-fail',
|
||||
'failure': 'outcome-fail',
|
||||
'success': 'outcome-success',
|
||||
'critical success': 'outcome-crit-success',
|
||||
};
|
||||
|
||||
function renderNarratorMessage(narrator) {
|
||||
// narrator = { roll, outcome, text }
|
||||
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);
|
||||
dom.messagesEl.appendChild(wrapper);
|
||||
dom.messagesEl.scrollTop = dom.messagesEl.scrollHeight;
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
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', () => {
|
||||
sendMessage(c.label, true);
|
||||
});
|
||||
row.appendChild(btn);
|
||||
}
|
||||
wrapper.appendChild(row);
|
||||
}
|
||||
|
||||
function renderDebugBlocks(wrapper, blocks) {
|
||||
if (!blocks || !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');
|
||||
lbl.className = 'label';
|
||||
lbl.textContent = '📖 Рассказчик';
|
||||
const bub = document.createElement('div');
|
||||
bub.className = 'bubble';
|
||||
bub.textContent = b.text;
|
||||
w.appendChild(lbl);
|
||||
w.appendChild(bub);
|
||||
dom.messagesEl.appendChild(w);
|
||||
}
|
||||
// facts/status_quo/plot_arc — silently skip (debug only, not shown to user)
|
||||
}
|
||||
}
|
||||
|
||||
export function updateQuestPanel(quests) {
|
||||
const list = document.getElementById('questList');
|
||||
if (!list) return;
|
||||
list.innerHTML = '';
|
||||
for (const q of quests) {
|
||||
const el = document.createElement('div');
|
||||
el.className = `quest-item quest-${q.status}`;
|
||||
el.textContent = (q.status === 'done' ? '✅ ' : q.status === 'failed' ? '❌ ' : '🔸 ') + q.title;
|
||||
list.appendChild(el);
|
||||
}
|
||||
}
|
||||
|
||||
export function updateAffinityDisplay(affinity) {
|
||||
const el = dom.affinityDisplay;
|
||||
if (!el) return;
|
||||
el.classList.remove('hidden');
|
||||
const hearts = affinity >= 10 ? '❤️❤️❤️' : affinity >= 5 ? '❤️❤️' : affinity >= 1 ? '❤️' : affinity <= -5 ? '💔' : '🤍';
|
||||
el.textContent = `${hearts} ${affinity > 0 ? '+' : ''}${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();
|
||||
@@ -86,7 +182,208 @@ export function appendChatImage(wrapper, imagePath) {
|
||||
wrapper.appendChild(img);
|
||||
}
|
||||
|
||||
export function addMessage(role, content = '', imagePrompt = null, imagePath = null) {
|
||||
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';
|
||||
regenBtn.textContent = '🔄';
|
||||
regenBtn.title = 'Перегенерировать';
|
||||
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);
|
||||
}
|
||||
|
||||
async function startEditMessage(wrapper, messageId) {
|
||||
const bubble = wrapper.querySelector('.bubble');
|
||||
if (!bubble || wrapper.querySelector('.bubble-edit')) return;
|
||||
const original = bubble.textContent;
|
||||
const ta = document.createElement('textarea');
|
||||
ta.className = 'bubble-edit';
|
||||
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');
|
||||
saveBtn.textContent = 'Сохранить';
|
||||
const cancelBtn = document.createElement('button');
|
||||
cancelBtn.textContent = 'Отмена';
|
||||
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 res = await fetch(`/chat/messages/${messageId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ content: ta.value.trim(), truncate_after: doTruncate }),
|
||||
});
|
||||
if (!res.ok) { alert('Ошибка сохранения'); return; }
|
||||
await reloadChatFromServer(sessionId);
|
||||
const { loadSessions } = await import('./sessions.js');
|
||||
loadSessions();
|
||||
});
|
||||
}
|
||||
|
||||
async function regenerateMessage(messageId, wrapper) {
|
||||
if (!sessionId) return;
|
||||
wrapper?.remove();
|
||||
showTyping();
|
||||
dom.sendBtn.disabled = true;
|
||||
try {
|
||||
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,
|
||||
}),
|
||||
});
|
||||
if (!res.ok) throw new Error('Ошибка: ' + res.status);
|
||||
removeTyping();
|
||||
await consumeStream(res);
|
||||
} catch (err) {
|
||||
removeTyping();
|
||||
addMessage('assistant', '⚠️ ' + err.message);
|
||||
} finally {
|
||||
dom.sendBtn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function forkFromMessage(messageId) {
|
||||
if (!sessionId) return;
|
||||
const res = await fetch(`/sessions/${sessionId}/fork`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ until_message_id: messageId }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) { alert(data.detail || 'Ошибка'); return; }
|
||||
const { switchSession, loadSessions } = await import('./sessions.js');
|
||||
await switchSession(data.session_id);
|
||||
await loadSessions();
|
||||
}
|
||||
|
||||
export async function reloadChatFromServer(id) {
|
||||
const sid = id || sessionId;
|
||||
if (!sid) return;
|
||||
const histRes = await fetch(`/chat/history/${sid}`);
|
||||
if (!histRes.ok) return;
|
||||
const messages = await histRes.json();
|
||||
clearMessages();
|
||||
messages.filter(m => m.role !== 'system').forEach(m => {
|
||||
addMessage(
|
||||
m.role === 'user' ? 'user' : 'assistant',
|
||||
m.content,
|
||||
m.image_prompt,
|
||||
m.image_path ? `/static/${m.image_path}` : null,
|
||||
m.id,
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
async function consumeStream(res) {
|
||||
const reader = res.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let buffer = '';
|
||||
let bubble = null;
|
||||
|
||||
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;
|
||||
}
|
||||
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();
|
||||
}
|
||||
} catch { /* skip */ }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function addMessage(role, content = '', imagePrompt = null, imagePath = null, messageId = null) {
|
||||
updateEmptyState();
|
||||
|
||||
const wrapper = document.createElement('div');
|
||||
@@ -149,6 +446,8 @@ 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;
|
||||
@@ -175,75 +474,32 @@ export function clearMessages() {
|
||||
}
|
||||
}
|
||||
|
||||
export async function sendMessage() {
|
||||
const text = dom.inputEl.value.trim();
|
||||
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', text);
|
||||
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 }),
|
||||
body: JSON.stringify({
|
||||
message: text,
|
||||
session_id: sessionId,
|
||||
persona_id: currentPersona,
|
||||
is_narrator_choice: isNarratorChoice,
|
||||
}),
|
||||
});
|
||||
if (!res.ok) throw new Error('Ошибка сервера: ' + res.status);
|
||||
|
||||
const reader = res.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let buffer = '';
|
||||
let bubble = null;
|
||||
|
||||
removeTyping();
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
if (data.done) {
|
||||
bubble?.classList.remove('typing-active');
|
||||
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);
|
||||
}
|
||||
const { loadSessions } = await import('./sessions.js');
|
||||
loadSessions();
|
||||
}
|
||||
} catch { /* skip */ }
|
||||
}
|
||||
}
|
||||
await consumeStream(res);
|
||||
} catch (err) {
|
||||
removeTyping();
|
||||
addMessage('assistant', '⚠️ Ошибка: ' + err.message);
|
||||
@@ -253,6 +509,27 @@ export async function sendMessage() {
|
||||
}
|
||||
}
|
||||
|
||||
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' });
|
||||
|
||||
+116
-5
@@ -1,5 +1,10 @@
|
||||
import { currentPersona, setCurrentPersona, sessionId } from './state.js';
|
||||
import { initChat } from './chat.js';
|
||||
import { initWizard } from './utils.js';
|
||||
|
||||
export let personaIndex = new Map();
|
||||
|
||||
let createWizard;
|
||||
|
||||
export function highlightPersona(personaId) {
|
||||
document.querySelectorAll('.persona-card').forEach(c => {
|
||||
@@ -10,6 +15,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 +24,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 +57,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);
|
||||
});
|
||||
|
||||
@@ -55,7 +85,10 @@ export async function loadPersonas() {
|
||||
addBtn.type = 'button';
|
||||
addBtn.className = 'persona-add';
|
||||
addBtn.innerHTML = '➕<span>Создать</span>';
|
||||
addBtn.addEventListener('click', () => document.getElementById('modalOverlay').classList.add('open'));
|
||||
addBtn.addEventListener('click', () => {
|
||||
document.getElementById('modalOverlay').classList.add('open');
|
||||
createWizard?.reset();
|
||||
});
|
||||
bar.appendChild(addBtn);
|
||||
|
||||
const importBtn = document.createElement('button');
|
||||
@@ -80,8 +113,24 @@ export async function selectPersona(personaId) {
|
||||
}
|
||||
|
||||
export function initPersonaModals() {
|
||||
const createModal = document.getElementById('modalOverlay');
|
||||
createWizard = initWizard(createModal.querySelector('.modal-wizard'), {
|
||||
totalSteps: 3,
|
||||
validateStep(step) {
|
||||
if (step !== 1) return true;
|
||||
const id = document.getElementById('pId').value.trim();
|
||||
const name = document.getElementById('pName').value.trim();
|
||||
if (!id || !name) {
|
||||
alert('Заполни ID и имя');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
});
|
||||
|
||||
document.getElementById('modalCancel').addEventListener('click', () => {
|
||||
document.getElementById('modalOverlay').classList.remove('open');
|
||||
createModal.classList.remove('open');
|
||||
createWizard.reset();
|
||||
});
|
||||
document.getElementById('cardModalCancel').addEventListener('click', () => {
|
||||
document.getElementById('cardModalOverlay').classList.remove('open');
|
||||
@@ -90,6 +139,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 +157,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/', {
|
||||
@@ -111,6 +173,7 @@ export function initPersonaModals() {
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
document.getElementById('modalOverlay').classList.remove('open');
|
||||
createWizard.reset();
|
||||
await loadPersonas();
|
||||
await selectPersona(data.persona_id);
|
||||
});
|
||||
@@ -134,6 +197,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 +232,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();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+400
-30
@@ -1,6 +1,13 @@
|
||||
import { sessionId, setSessionId, setCurrentPersona, currentPersona, dom } from './state.js';
|
||||
import { clearMessages, addMessage, initChat } from './chat.js';
|
||||
import { highlightPersona } from './personas.js';
|
||||
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';
|
||||
|
||||
function escapeTitle(t) {
|
||||
const d = document.createElement('div');
|
||||
@@ -8,6 +15,38 @@ 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 || 'Новый чат';
|
||||
const rpgOn = !!session.rpg_enabled;
|
||||
setRpgEnabled(rpgOn);
|
||||
document.getElementById('rpgBadge')?.classList.toggle('hidden', !rpgOn);
|
||||
|
||||
let settings = { quests: true, affinity: true };
|
||||
try {
|
||||
settings = { ...settings, ...JSON.parse(session.rpg_settings_json || '{}') };
|
||||
} catch { /* ignore */ }
|
||||
|
||||
document.getElementById('questPanel')?.classList.toggle('hidden', !rpgOn || !settings.quests);
|
||||
if (rpgOn && settings.affinity) {
|
||||
updateAffinityDisplay(session.affinity ?? 0);
|
||||
dom.affinityDisplay?.classList.remove('hidden');
|
||||
} else {
|
||||
dom.affinityDisplay?.classList.add('hidden');
|
||||
}
|
||||
|
||||
if (rpgOn && settings.quests) {
|
||||
fetch(`/sessions/${session.session_id}/quests`)
|
||||
.then(r => r.ok ? r.json() : [])
|
||||
.then(q => updateQuestPanel(q))
|
||||
.catch(() => {});
|
||||
}
|
||||
}
|
||||
|
||||
export async function loadSessions() {
|
||||
const res = await fetch('/sessions/');
|
||||
const sessions = await res.json();
|
||||
@@ -16,16 +55,49 @@ 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';
|
||||
const dateStr = formatSessionDate(s.updated_at);
|
||||
item.innerHTML = `
|
||||
<div class="s-title">${escapeTitle(s.title || 'Новый чат')}</div>
|
||||
<div class="s-row">
|
||||
<div class="s-title" title="Двойной клик — переименовать">${escapeTitle(s.title || 'Новый чат')}</div>
|
||||
${s.rpg_enabled ? '<span class="s-badge">RPG</span>' : ''}
|
||||
${dateStr ? `<span class="s-date">${dateStr}</span>` : ''}
|
||||
</div>
|
||||
<div class="s-companion">С: ${escapeTitle(personaName)}</div>
|
||||
<div class="s-preview">${escapeTitle(s.last_message_preview || '')}</div>
|
||||
<div class="s-meta">${s.message_count} сообщ.</div>
|
||||
<button class="s-del" type="button">🗑</button>
|
||||
`;
|
||||
item.addEventListener('click', () => switchSession(s.session_id));
|
||||
item.addEventListener('click', (e) => {
|
||||
if (e.target.closest('.s-del') || item.querySelector('.s-title')?.isContentEditable) return;
|
||||
switchSession(s.session_id);
|
||||
});
|
||||
const titleEl = item.querySelector('.s-title');
|
||||
titleEl.addEventListener('dblclick', (e) => {
|
||||
e.stopPropagation();
|
||||
titleEl.contentEditable = 'true';
|
||||
titleEl.focus();
|
||||
});
|
||||
titleEl.addEventListener('blur', async () => {
|
||||
titleEl.contentEditable = 'false';
|
||||
const t = titleEl.textContent.trim();
|
||||
if (t && t !== (s.title || 'Новый чат')) {
|
||||
await fetch(`/sessions/${s.session_id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ title: t }),
|
||||
});
|
||||
if (s.session_id === sessionId) dom.headerTitle.textContent = t;
|
||||
loadSessions();
|
||||
}
|
||||
});
|
||||
titleEl.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') { e.preventDefault(); titleEl.blur(); }
|
||||
});
|
||||
item.querySelector('.s-del').addEventListener('click', async (e) => {
|
||||
e.stopPropagation();
|
||||
await fetch(`/sessions/${s.session_id}`, { method: 'DELETE' });
|
||||
if (s.session_id === sessionId) createNewChat();
|
||||
if (s.session_id === sessionId) openNewChatWizard();
|
||||
else loadSessions();
|
||||
});
|
||||
dom.sessionList.appendChild(item);
|
||||
@@ -41,37 +113,335 @@ export async function switchSession(id) {
|
||||
|
||||
export async function loadChatHistory(id) {
|
||||
const sessionRes = await fetch(`/sessions/${id}`);
|
||||
let session = null;
|
||||
if (sessionRes.ok) {
|
||||
const s = await sessionRes.json();
|
||||
dom.headerTitle.textContent = s.title || 'Новый чат';
|
||||
if (s.persona_id) {
|
||||
setCurrentPersona(s.persona_id);
|
||||
highlightPersona(s.persona_id);
|
||||
session = await sessionRes.json();
|
||||
if (session.persona_id) {
|
||||
setCurrentPersona(session.persona_id);
|
||||
highlightPersona(session.persona_id);
|
||||
}
|
||||
applySessionUi(session);
|
||||
}
|
||||
|
||||
const histRes = await fetch(`/chat/history/${id}`);
|
||||
if (!histRes.ok) return;
|
||||
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 messages = await histRes.json();
|
||||
clearMessages();
|
||||
messages.filter(m => m.role !== 'system').forEach(m => {
|
||||
addMessage(
|
||||
m.role === 'user' ? 'user' : 'assistant',
|
||||
m.content,
|
||||
m.image_prompt,
|
||||
m.image_path ? `/static/${m.image_path}` : null,
|
||||
);
|
||||
});
|
||||
await reloadChatFromServer(id);
|
||||
}
|
||||
|
||||
export async function createNewChat() {
|
||||
setSessionId('sess_' + Math.random().toString(36).slice(2, 10));
|
||||
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();
|
||||
dom.headerTitle.textContent = 'Новый чат';
|
||||
highlightPersona(currentPersona);
|
||||
|
||||
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();
|
||||
loadSessions();
|
||||
|
||||
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() {
|
||||
@@ -79,8 +449,8 @@ export async function initSessions() {
|
||||
if (sessionId) {
|
||||
const check = await fetch(`/sessions/${sessionId}`);
|
||||
if (check.ok) await switchSession(sessionId);
|
||||
else createNewChat();
|
||||
else openNewChatWizard();
|
||||
} else {
|
||||
createNewChat();
|
||||
openNewChatWizard();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,9 @@ export const dom = {
|
||||
sessionList: document.getElementById('sessionList'),
|
||||
headerTitle: document.getElementById('headerTitle'),
|
||||
emptyState: document.getElementById('emptyState'),
|
||||
affinityDisplay: document.getElementById('affinityDisplay'),
|
||||
rpgBadge: document.getElementById('rpgBadge'),
|
||||
systemBlob: document.getElementById('systemBlob'),
|
||||
systemBlobContent: document.getElementById('systemBlobContent'),
|
||||
systemBlobToggle: document.getElementById('systemBlobToggle'),
|
||||
};
|
||||
|
||||
@@ -14,3 +14,94 @@ export async function copyToClipboard(text) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export const GENRE_LABELS = {
|
||||
adventure: 'Приключение',
|
||||
horror: 'Хоррор',
|
||||
romance: 'Романтика',
|
||||
slice_of_life: 'Повседневность',
|
||||
fantasy: 'Фэнтези',
|
||||
sci_fi: 'Sci-Fi',
|
||||
};
|
||||
|
||||
export function initWizard(modalEl, { totalSteps, onStepChange, validateStep }) {
|
||||
let step = 1;
|
||||
const pages = modalEl.querySelectorAll('.wizard-page');
|
||||
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"]');
|
||||
|
||||
function render() {
|
||||
pages.forEach(p => p.classList.toggle('active', Number(p.dataset.step) === step));
|
||||
dots.forEach(d => {
|
||||
const n = Number(d.dataset.step);
|
||||
d.classList.toggle('active', n === step);
|
||||
d.classList.toggle('done', n < step);
|
||||
});
|
||||
prevBtn?.classList.toggle('hidden', step <= 1);
|
||||
nextBtn?.classList.toggle('hidden', step >= totalSteps);
|
||||
saveBtn?.classList.toggle('hidden', step < totalSteps);
|
||||
onStepChange?.(step);
|
||||
}
|
||||
|
||||
function goTo(next) {
|
||||
if (next > step && validateStep && !validateStep(step)) return;
|
||||
step = Math.max(1, Math.min(totalSteps, next));
|
||||
render();
|
||||
}
|
||||
|
||||
prevBtn?.addEventListener('click', () => goTo(step - 1));
|
||||
nextBtn?.addEventListener('click', () => goTo(step + 1));
|
||||
|
||||
render();
|
||||
|
||||
return {
|
||||
reset() { step = 1; render(); },
|
||||
getStep: () => step,
|
||||
goTo,
|
||||
render,
|
||||
};
|
||||
}
|
||||
|
||||
export function bindGenreGrid(gridEl, selectedSet, onChange) {
|
||||
gridEl.addEventListener('click', (e) => {
|
||||
const btn = e.target.closest('.genre-btn');
|
||||
if (!btn) return;
|
||||
const genre = btn.dataset.genre;
|
||||
if (selectedSet.has(genre)) {
|
||||
selectedSet.delete(genre);
|
||||
btn.classList.remove('selected');
|
||||
} else {
|
||||
selectedSet.add(genre);
|
||||
btn.classList.add('selected');
|
||||
}
|
||||
onChange?.();
|
||||
});
|
||||
}
|
||||
|
||||
export function resetGenreGrid(gridEl, selectedSet) {
|
||||
selectedSet.clear();
|
||||
gridEl.querySelectorAll('.genre-btn').forEach(b => b.classList.remove('selected'));
|
||||
}
|
||||
|
||||
export function getRpgSettingsFromDom(prefix = '') {
|
||||
const id = (name) => document.getElementById(prefix + name);
|
||||
return {
|
||||
dice: id('settingDice')?.checked ?? true,
|
||||
narrator: id('settingNarrator')?.checked ?? true,
|
||||
quests: id('settingQuests')?.checked ?? true,
|
||||
affinity: id('settingAffinity')?.checked ?? true,
|
||||
choices: id('settingChoices')?.checked ?? true,
|
||||
};
|
||||
}
|
||||
|
||||
export function formatSessionDate(iso) {
|
||||
if (!iso) return '';
|
||||
const d = new Date(iso.includes('T') ? iso : iso.replace(' ', 'T') + 'Z');
|
||||
if (Number.isNaN(d.getTime())) return '';
|
||||
const now = new Date();
|
||||
const sameDay = d.toDateString() === now.toDateString();
|
||||
if (sameDay) return d.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });
|
||||
return d.toLocaleDateString('ru-RU', { day: 'numeric', month: 'short' });
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user