feat(assistant): админ-панель LLM (ключ/URL/модель/тест) + многоходовой чат
Админка (Управление → игры/фичи): карточка «Помощник Квантик — модель» — пресеты провайдеров, URL/модель, поле ключа, кнопки Сохранить/Проверить/ Очистить ключ, индикатор статуса. Конфиг в app_settings (без рестарта), откат на ENV/дефолты; нет ключа → автоматически FAQ-режим. Эндпоинты GET/PUT/POST /api/admin/assistant(/test), admin-only. «Спроси Квантика» теперь многоходовой чат: история диалога (последние 6 реплик) уходит модели, ответы рендерятся как чат-лента, кнопка «Очистить». Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
+64
-47
@@ -303,6 +303,14 @@
|
||||
'.asst-rich li{margin:2px 0;}',
|
||||
'.asst-rich code{background:rgba(15,23,42,.06);border-radius:4px;padding:1px 4px;}',
|
||||
'.asst-md-h{font-weight:800;color:#0F172A;margin:6px 0 2px;}',
|
||||
'.asst-chat{max-height:46vh;overflow:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:8px;}',
|
||||
'.asst-chat:empty{display:none;}',
|
||||
'.asst-msg{font-size:.84rem;line-height:1.5;border-radius:12px;padding:8px 11px;max-width:92%;word-break:break-word;}',
|
||||
'.asst-msg-user{align-self:flex-end;background:#9B5DE5;color:#fff;}',
|
||||
'.asst-msg-assistant{align-self:flex-start;background:rgba(15,23,42,.05);}',
|
||||
'.asst-msg-assistant .asst-rich{color:#28324a;}',
|
||||
'.asst-msg-ph{opacity:.6;}',
|
||||
'.asst-msg-links{align-self:flex-start;font-size:.74rem;}',
|
||||
'.asst-empty{font-size:.82rem;color:#8a94a6;padding:6px 0;}',
|
||||
// на мобиле сайдбар — выезжающая шторка, контент во всю ширину → к левому краю
|
||||
'@media(max-width:768px){.asst-root,.app-layout ~ .asst-root,.app-layout.sb-collapsed ~ .asst-root{left:12px;bottom:18px;}.asst-fab{width:48px;height:48px;}}',
|
||||
@@ -433,6 +441,18 @@
|
||||
|
||||
/* ── «Спроси Квантика» ───────────────────────────────────────────────── */
|
||||
var SUGGESTIONS = ['Как вырезать кусок учебника?', 'Как создать карточки?', 'Как начать тест?', 'Объясни теорему Пифагора', 'Где мои домашние задания?', 'Как включить тёмную тему?'];
|
||||
var _chat = []; // многоходовой диалог: [{role:'user'|'assistant', content}]
|
||||
function msgEl(role) { var d = document.createElement('div'); d.className = 'asst-msg asst-msg-' + role; return d; }
|
||||
function renderChat(chatEl) {
|
||||
chatEl.innerHTML = '';
|
||||
_chat.forEach(function (m) {
|
||||
var d = msgEl(m.role);
|
||||
if (m.role === 'assistant') { d.innerHTML = '<div class="asst-rich"></div>'; renderRich(d.querySelector('.asst-rich'), m.content); }
|
||||
else d.textContent = m.content;
|
||||
chatEl.appendChild(d);
|
||||
});
|
||||
chatEl.scrollTop = chatEl.scrollHeight;
|
||||
}
|
||||
function openAsk(prefill) {
|
||||
var sel = _lastSel, pc = getPageContext();
|
||||
var ctxBtns = '';
|
||||
@@ -443,67 +463,64 @@
|
||||
var chips = '<div class="asst-chips">' + ctxBtns +
|
||||
SUGGESTIONS.map(function (q) { return '<button class="asst-chip" type="button">' + esc(q) + '</button>'; }).join('') + '</div>';
|
||||
openBubble(
|
||||
'<div class="asst-name">Спроси Квантика</div>' +
|
||||
'<input class="asst-ask-in" type="text" placeholder="Спроси что угодно: «объясни…», «как…»" maxlength="300" />' +
|
||||
chips + '<div class="asst-ans-box"></div>', {});
|
||||
'<div class="asst-name">Спроси Квантика' + (_chat.length ? '<button class="asst-link" data-a="clear" style="float:right;font-weight:600;margin-right:24px">Очистить</button>' : '') + '</div>' +
|
||||
'<div class="asst-chat"></div>' + chips +
|
||||
'<input class="asst-ask-in" type="text" placeholder="Спроси что угодно: «объясни…», «как…»" maxlength="300" />', {});
|
||||
var inp = bubble.querySelector('.asst-ask-in');
|
||||
var box = bubble.querySelector('.asst-ans-box');
|
||||
var t = null;
|
||||
inp.addEventListener('input', function () { clearTimeout(t); t = setTimeout(function () { runAsk(inp.value, box); }, 350); });
|
||||
inp.addEventListener('keydown', function (e) { if (e.key === 'Enter') { clearTimeout(t); runAsk(inp.value, box); } });
|
||||
var chatEl = bubble.querySelector('.asst-chat');
|
||||
var chipsEl = bubble.querySelector('.asst-chips');
|
||||
renderChat(chatEl);
|
||||
if (_chat.length) chipsEl.style.display = 'none';
|
||||
function go(q, context) { if (chipsEl) chipsEl.style.display = 'none'; inp.value = ''; send(q, context, chatEl); }
|
||||
inp.addEventListener('keydown', function (e) { if (e.key === 'Enter') go(inp.value); });
|
||||
bubble.querySelectorAll('.asst-chip').forEach(function (c) {
|
||||
c.addEventListener('click', function () {
|
||||
var ctx = c.getAttribute('data-ctx');
|
||||
if (ctx === 'sel') return runAsk('Объясни простыми словами и приведи пример.', box, sel);
|
||||
if (ctx === 'sec') return runAsk('Объясни простыми словами, о чём этот параграф, и выдели главное.', box, pc && pc.text);
|
||||
if (ctx === 'sum') return runAsk('Сделай краткий конспект этого материала: 4–6 главных пунктов.', box, pc && pc.text);
|
||||
if (ctx === 'cards') return makeFlashcards(pc, box);
|
||||
inp.value = c.textContent; runAsk(c.textContent, box); inp.focus();
|
||||
if (ctx === 'sel') return go('Объясни простыми словами и приведи пример.', sel);
|
||||
if (ctx === 'sec') return go('Объясни простыми словами, о чём этот параграф, и выдели главное.', pc && pc.text);
|
||||
if (ctx === 'sum') return go('Сделай краткий конспект этого материала: 4–6 главных пунктов.', pc && pc.text);
|
||||
if (ctx === 'cards') { if (chipsEl) chipsEl.style.display = 'none'; return makeFlashcards(pc, chatEl); }
|
||||
go(c.textContent);
|
||||
});
|
||||
});
|
||||
if (prefill) { inp.value = prefill.q || ''; runAsk(prefill.q, box, prefill.context); }
|
||||
var clr = bubble.querySelector('[data-a="clear"]');
|
||||
if (clr) clr.onclick = function () { _chat = []; openAsk(); };
|
||||
if (prefill && prefill.q) go(prefill.q, prefill.context);
|
||||
else inp.focus();
|
||||
}
|
||||
function runAsk(q, box, context) {
|
||||
function send(q, context, chatEl) {
|
||||
q = (q || '').trim();
|
||||
if (q.length < 3) { box.innerHTML = ''; return; }
|
||||
box.innerHTML = '<div class="asst-empty">Думаю…</div>';
|
||||
if (q.length < 2) return;
|
||||
var history = _chat.slice(-6);
|
||||
_chat.push({ role: 'user', content: q });
|
||||
var u = msgEl('user'); u.textContent = q; chatEl.appendChild(u);
|
||||
var ph = msgEl('assistant'); ph.className += ' asst-msg-ph'; ph.textContent = 'Думаю…'; chatEl.appendChild(ph);
|
||||
chatEl.scrollTop = chatEl.scrollHeight;
|
||||
Promise.all([
|
||||
LS.assistantAsk(q, context).catch(function () { return { answers: [] }; }),
|
||||
(LS.globalSearch ? LS.globalSearch(q, 'all', 4) : Promise.resolve({ results: [] })).catch(function () { return { results: [] }; }),
|
||||
LS.assistantAsk(q, context, history).catch(function () { return { answers: [] }; }),
|
||||
(LS.globalSearch ? LS.globalSearch(q, 'all', 3) : Promise.resolve({ results: [] })).catch(function () { return { results: [] }; }),
|
||||
]).then(function (res) {
|
||||
var modelAnswer = res[0] && res[0].answer;
|
||||
ph.remove();
|
||||
var model = res[0] && res[0].answer;
|
||||
var ans = (res[0] && res[0].answers) || [];
|
||||
var found = (res[1] && res[1].results) || [];
|
||||
box.innerHTML = '';
|
||||
if (modelAnswer) {
|
||||
var a = document.createElement('div'); a.className = 'asst-ans';
|
||||
a.innerHTML = '<div class="asst-ans-q">Квантик</div><div class="asst-rich"></div>';
|
||||
box.appendChild(a);
|
||||
renderRich(a.querySelector('.asst-rich'), modelAnswer);
|
||||
if (ans.length) box.insertAdjacentHTML('beforeend', '<div class="asst-ans-sec">Из справки</div>');
|
||||
}
|
||||
var rest = '';
|
||||
if (ans.length) rest += ans.map(function (a2) {
|
||||
return '<div class="asst-ans"><div class="asst-ans-q">' + esc(a2.q) + '</div>' + esc(a2.a) +
|
||||
(a2.url ? '<br><a class="asst-ans-link" href="' + esc(a2.url) + '">Открыть</a>' : '') + '</div>';
|
||||
}).join('');
|
||||
if (found.length) {
|
||||
rest += '<div class="asst-ans-sec">На платформе</div>';
|
||||
rest += found.slice(0, 4).map(function (f) {
|
||||
return '<div class="asst-ans"><a class="asst-ans-link" style="margin-top:0" href="' + esc(f.url || '#') + '">' + esc(f.title || 'Без названия') + '</a>' +
|
||||
(f.subtitle ? ' <span style="color:#8a94a6">— ' + esc(f.subtitle) + '</span>' : '') + '</div>';
|
||||
}).join('');
|
||||
}
|
||||
if (rest) box.insertAdjacentHTML('beforeend', rest);
|
||||
if (!box.innerHTML) box.innerHTML = '<div class="asst-empty">Ничего не нашёл. Попробуй переформулировать.</div>';
|
||||
}).catch(function () { box.innerHTML = '<div class="asst-empty">Не удалось получить ответ.</div>'; });
|
||||
var content = model || (ans[0] && (ans[0].q + '\n' + ans[0].a)) || 'Не нашёл точного ответа. Попробуй переформулировать или поищи (Ctrl+K).';
|
||||
_chat.push({ role: 'assistant', content: content });
|
||||
var d = msgEl('assistant'); d.innerHTML = '<div class="asst-rich"></div>'; chatEl.appendChild(d);
|
||||
renderRich(d.querySelector('.asst-rich'), content);
|
||||
var links = '';
|
||||
if (!model && ans.length) links += ans.slice(0, 2).filter(function (a) { return a.url; }).map(function (a) { return '<a class="asst-ans-link" href="' + esc(a.url) + '">' + esc(a.q) + '</a>'; }).join(' · ');
|
||||
if (found.length) links += (links ? '<br>' : '') + '<span style="color:#8a94a6">На платформе: </span>' + found.slice(0, 3).map(function (f) { return '<a class="asst-ans-link" href="' + esc(f.url || '#') + '">' + esc(f.title || '…') + '</a>'; }).join(' · ');
|
||||
if (links) { var l = document.createElement('div'); l.className = 'asst-msg-links'; l.innerHTML = links; chatEl.appendChild(l); }
|
||||
chatEl.scrollTop = chatEl.scrollHeight;
|
||||
}).catch(function () { ph.textContent = 'Не удалось получить ответ.'; });
|
||||
}
|
||||
|
||||
/* ── «Флешкарты из параграфа» — модель → колода через API флешкарт ─────── */
|
||||
function makeFlashcards(pc, box) {
|
||||
if (!pc || !pc.text) { box.innerHTML = '<div class="asst-empty">Открой параграф учебника, чтобы сделать карточки.</div>'; return; }
|
||||
box.innerHTML = '<div class="asst-empty">Готовлю карточки…</div>';
|
||||
function makeFlashcards(pc, chatEl) {
|
||||
var note = msgEl('assistant');
|
||||
if (!pc || !pc.text) { note.innerHTML = '<div class="asst-rich">Открой параграф учебника, чтобы сделать карточки.</div>'; chatEl.appendChild(note); return; }
|
||||
note.innerHTML = '<div class="asst-rich">Готовлю карточки…</div>'; chatEl.appendChild(note); chatEl.scrollTop = chatEl.scrollHeight;
|
||||
LS.assistantFlashcards(pc.text, pc.title || 'Карточки').then(function (r) {
|
||||
var cards = (r && r.cards) || [];
|
||||
if (!cards.length) throw new Error('empty');
|
||||
@@ -514,9 +531,9 @@
|
||||
}, Promise.resolve()).then(function () { return cards.length; });
|
||||
});
|
||||
}).then(function (n) {
|
||||
box.innerHTML = '<div class="asst-ans">Готово: создано ' + n + ' ' + plural(n, 'карточка', 'карточки', 'карточек') +
|
||||
note.innerHTML = '<div class="asst-rich">Готово: создано ' + n + ' ' + plural(n, 'карточка', 'карточки', 'карточек') +
|
||||
'. <a class="asst-ans-link" href="/flashcards">Открыть флешкарты</a></div>';
|
||||
}).catch(function () { box.innerHTML = '<div class="asst-empty">Не удалось сделать карточки. Попробуй позже.</div>'; });
|
||||
}).catch(function () { note.innerHTML = '<div class="asst-rich">Не удалось сделать карточки. Попробуй позже.</div>'; });
|
||||
}
|
||||
|
||||
/* ── Ф2: онбординг-тур по разделам ───────────────────────────────────── */
|
||||
|
||||
Reference in New Issue
Block a user