452 lines
26 KiB
JavaScript
452 lines
26 KiB
JavaScript
// The assistant: a round button in the bottom right corner opens a chat. Each
|
|
// question goes with what the panel shows - the tabs, the active pane, the
|
|
// text of its terminal or its list of files - and the answer streams in.
|
|
// Commands the model suggests come as ```run``` blocks with «Выполнить»: a
|
|
// click sends the command to the active terminal, with the user's rights.
|
|
// Off until the user turns it on in the profile.
|
|
(function () {
|
|
'use strict';
|
|
const PLANE = '<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3.4 20.4 20.85 12.9a1 1 0 0 0 0-1.8L3.4 3.6a1 1 0 0 0-1.39 1.17L4 11l9 1-9 1-1.99 6.23a1 1 0 0 0 1.39 1.17z"/></svg>';
|
|
const STOP = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="5" y="5" width="14" height="14" rx="2"/></svg>';
|
|
const esc = v => String(v).replace(/[&<>"]/g, c => ({'&': '&', '<': '<', '>': '>', '"': '"'}[c]));
|
|
const fab = document.createElement('button');
|
|
fab.type = 'button';
|
|
fab.className = 'ai-fab';
|
|
fab.hidden = true;
|
|
fab.title = 'ИИ-ассистент';
|
|
fab.setAttribute('aria-label', 'ИИ-ассистент');
|
|
fab.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M10 2.5c.3 0 .5.2.6.5l1 3.7a5 5 0 0 0 3.6 3.6l3.7 1c.6.2.6 1 0 1.2l-3.7 1a5 5 0 0 0-3.6 3.6l-1 3.7c-.2.6-1 .6-1.2 0l-1-3.7a5 5 0 0 0-3.6-3.6l-3.7-1c-.6-.2-.6-1 0-1.2l3.7-1a5 5 0 0 0 3.6-3.6l1-3.7c.1-.3.3-.5.6-.5z"/><path d="M18.5 1.5c.2 0 .3.1.4.3l.4 1.4c.2.6.7 1.1 1.3 1.3l1.4.4c.4.1.4.6 0 .8l-1.4.4c-.6.2-1.1.7-1.3 1.3l-.4 1.4c-.1.4-.7.4-.8 0l-.4-1.4a2 2 0 0 0-1.3-1.3l-1.4-.4c-.4-.2-.4-.7 0-.8l1.4-.4c.6-.2 1.1-.7 1.3-1.3l.4-1.4c.1-.2.2-.3.4-.3z" opacity=".75"/></svg>';
|
|
const box = document.createElement('div');
|
|
box.className = 'ai-box';
|
|
box.innerHTML =
|
|
'<div class="ai-head"><b>Ассистент</b><span class="muted ai-where"></span><span class="spacer"></span>' +
|
|
|
|
'<button type="button" class="btn ghost small icon sq ai-clear" title="Очистить разговор" aria-label="Очистить разговор"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 4 5 5"/><path d="M17.5 6.5 11 13"/><path d="M11 13c-2-2-5-1.5-6.5 0L3 14.5 9.5 21l1.5-1.5c1.5-1.5 2-4.5 0-6.5z"/><path d="m6 17 2-2M8.5 19.5 10 18"/></svg></button>' +
|
|
'<button type="button" class="btn ghost small icon close x ai-close" aria-label="Закрыть"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button></div>' +
|
|
'<div class="ai-list"><p class="muted ai-hello">Спросите о том, что открыто в панели: ассистент видит вкладки и активный терминал или папку. Команды он предложит кнопкой «Выполнить», умеет читать и писать файлы на любой вашей машине. В режиме «Агент» он делает шаги сам, спрашивая перед каждой командой.</p></div>' +
|
|
'<div class="ai-pills">' +
|
|
'<button type="button" class="ai-pill" data-mode="agent" aria-pressed="false" title="Сам выполняет шаги один за другим, спрашивая перед каждой командой и записью файла">' +
|
|
'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect x="4" y="8" width="16" height="12" rx="2"/><path d="M2 14h2M20 14h2M9 13v2M15 13v2"/></svg>Агент</button>' +
|
|
'<button type="button" class="ai-pill" data-mode="think" aria-pressed="false" title="Сначала обдумывает, потом отвечает: дольше, но точнее">' +
|
|
'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6M10 22h4"/><path d="M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.3h6c0-1 .4-1.8 1-2.3A7 7 0 0 0 12 2z"/></svg>Думать</button>' +
|
|
'</div>' +
|
|
'<form class="ai-form-in"><textarea rows="1" placeholder="Сообщение…"></textarea>' +
|
|
'<button type="submit" class="ai-send" title="Отправить" aria-label="Отправить">' + PLANE + '</button></form>';
|
|
document.body.append(fab, box);
|
|
const q = s => box.querySelector(s);
|
|
const list = q('.ai-list'), input = q('textarea'), send = q('.ai-send');
|
|
// The talk lives on the server (the database); here only what is shown.
|
|
let loaded = false;
|
|
let ac = null;
|
|
|
|
// Open and shut with a short slide. On a phone the chat takes the screen
|
|
// and is one step of history: «назад» shuts it.
|
|
const phone = () => matchMedia('(max-width: 640px)').matches;
|
|
const isOpen = () => box.classList.contains('on');
|
|
function show() {
|
|
loadTalk();
|
|
placeBox();
|
|
box.classList.add('on');
|
|
fab.classList.add('away');
|
|
if (phone() && !(history.state && history.state.aiChat)) history.pushState({aiChat: 1}, '', location.href);
|
|
where();
|
|
if (!phone()) input.focus();
|
|
}
|
|
function hide() {
|
|
if (!isOpen()) return;
|
|
if (history.state && history.state.aiChat) { history.back(); return; }
|
|
shut();
|
|
}
|
|
// shut: the chat goes, and the ball comes back in its corner - where the
|
|
// chat was last moved to.
|
|
function shut() {
|
|
if (desk && !phone()) {
|
|
const b = box.getBoundingClientRect(), o = box.style.transformOrigin || 'bottom right';
|
|
const right = /right/.test(o) ? innerWidth - b.right : innerWidth - b.left - fab.offsetWidth;
|
|
const bottom = /bottom/.test(o) ? innerHeight - b.bottom : innerHeight - b.top - fab.offsetHeight;
|
|
const pos = placeFab(right, bottom);
|
|
try { localStorage.setItem('lpra.ai.pos', JSON.stringify(pos)); } catch (e) { /* not kept */ }
|
|
}
|
|
box.classList.remove('on');
|
|
fab.classList.remove('away');
|
|
}
|
|
window.addEventListener('popstate', () => { if (isOpen() && !(history.state && history.state.aiChat)) shut(); });
|
|
function setOn(on) { fab.hidden = !on; if (!on) hide(); }
|
|
const desk = !matchMedia('(pointer: coarse)').matches;
|
|
fetch('/api/panel/ai', {cache: 'no-store', credentials: 'same-origin'}).then(r => r.json()).then(d => setOn(!!d.on)).catch(() => {});
|
|
document.addEventListener('lpra:ai', ev => setOn(ev.detail));
|
|
fab.onclick = () => { if (moved) { moved = false; return; } isOpen() ? hide() : show(); };
|
|
|
|
// ---------- on a computer: the ball and the chat move ----------
|
|
// The ball goes where it is dragged and stays there (kept in this
|
|
// browser, as distances from the right and bottom edges); the chat opens
|
|
// beside it, toward the room, and moves by its title.
|
|
let moved = false;
|
|
const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
|
|
function placeFab(right, bottom) {
|
|
right = clamp(right, 8, innerWidth - fab.offsetWidth - 8);
|
|
bottom = clamp(bottom, 8, innerHeight - fab.offsetHeight - 8);
|
|
fab.style.right = right + 'px'; fab.style.bottom = bottom + 'px';
|
|
return {right, bottom};
|
|
}
|
|
function placeBox() {
|
|
if (!desk || phone()) { box.style.left = box.style.top = box.style.right = box.style.bottom = ''; return; }
|
|
const f = fab.getBoundingClientRect(), w = box.offsetWidth, h = box.offsetHeight, gap = 12;
|
|
const toLeft = f.left + f.width / 2 > innerWidth / 2, up = f.top + f.height / 2 > innerHeight / 2;
|
|
// The chat takes the ball's place, grown from its corner.
|
|
const x = toLeft ? f.right - w : f.left;
|
|
const y = up ? f.bottom - h : f.top;
|
|
box.style.right = box.style.bottom = 'auto';
|
|
box.style.left = clamp(x, 8, innerWidth - w - 8) + 'px';
|
|
box.style.top = clamp(y, 8, innerHeight - h - 8) + 'px';
|
|
box.style.transformOrigin = (up ? 'bottom ' : 'top ') + (toLeft ? 'right' : 'left');
|
|
}
|
|
if (desk) {
|
|
try { const p = JSON.parse(localStorage.getItem('lpra.ai.pos') || 'null'); if (p) requestAnimationFrame(() => placeFab(p.right, p.bottom)); } catch (e) { /* default */ }
|
|
const drag = (el, ev, onMove, onEnd) => {
|
|
if (ev.button !== 0) return;
|
|
const x0 = ev.clientX, y0 = ev.clientY;
|
|
let on = false;
|
|
const mv = e => {
|
|
if (!on && Math.hypot(e.clientX - x0, e.clientY - y0) < 5) return;
|
|
on = true;
|
|
onMove(e.clientX - x0, e.clientY - y0);
|
|
};
|
|
const up = () => {
|
|
removeEventListener('pointermove', mv); removeEventListener('pointerup', up);
|
|
document.body.classList.remove('ai-dragging');
|
|
if (on) onEnd();
|
|
};
|
|
addEventListener('pointermove', mv); addEventListener('pointerup', up);
|
|
document.body.classList.add('ai-dragging');
|
|
};
|
|
fab.addEventListener('pointerdown', ev => {
|
|
const r0 = innerWidth - fab.getBoundingClientRect().right, b0 = innerHeight - fab.getBoundingClientRect().bottom;
|
|
let pos = {right: r0, bottom: b0};
|
|
drag(fab, ev, (dx, dy) => { moved = true; pos = placeFab(r0 - dx, b0 - dy); if (isOpen()) placeBox(); }, () => {
|
|
try { localStorage.setItem('lpra.ai.pos', JSON.stringify(pos)); } catch (e) { /* not kept */ }
|
|
});
|
|
});
|
|
q('.ai-head').addEventListener('pointerdown', ev => {
|
|
if (ev.target.closest('button')) return;
|
|
const r = box.getBoundingClientRect();
|
|
drag(box, ev, (dx, dy) => {
|
|
box.style.left = clamp(r.left + dx, 8, innerWidth - r.width - 8) + 'px';
|
|
box.style.top = clamp(r.top + dy, 8, innerHeight - r.height - 8) + 'px';
|
|
}, () => {});
|
|
});
|
|
addEventListener('resize', () => {
|
|
try { const p = JSON.parse(localStorage.getItem('lpra.ai.pos') || 'null'); if (p) placeFab(p.right, p.bottom); } catch (e) { /* default */ }
|
|
if (isOpen()) placeBox();
|
|
});
|
|
}
|
|
q('.ai-close').onclick = hide;
|
|
q('.ai-clear').onclick = async () => {
|
|
if (!list.querySelector('.ai-msg') || !await UI.confirm('Очистить разговор?', {ok: 'Очистить', danger: true})) return;
|
|
if (ac) ac.abort();
|
|
fetch('/api/panel/ai/clear', {method: 'POST', credentials: 'same-origin'});
|
|
list.querySelectorAll('.ai-msg').forEach(m => m.remove());
|
|
q('.ai-hello').hidden = false;
|
|
};
|
|
// The talk so far, once, when the chat first opens.
|
|
async function loadTalk() {
|
|
if (loaded) return;
|
|
loaded = true;
|
|
try {
|
|
const h = await fetch('/api/panel/ai/history', {cache: 'no-store', credentials: 'same-origin'}).then(r => r.json());
|
|
h.forEach(m => {
|
|
if (m.role === 'result') showResult(m.content);
|
|
else { const el = add(m.role, m.content); el.querySelectorAll('.ai-act').forEach(b => { b.disabled = true; }); }
|
|
});
|
|
} catch (e) { loaded = false; }
|
|
}
|
|
|
|
// ---------- what the panel shows ----------
|
|
const W = () => window.Workspace;
|
|
function termText(p, lines) {
|
|
const b = p.term && p.term.buffer && p.term.buffer.active;
|
|
if (!b) return '';
|
|
const out = [];
|
|
for (let i = Math.max(0, b.length - lines); i < b.length; i++) {
|
|
const l = b.getLine(i);
|
|
if (l) out.push(l.translateToString(true));
|
|
}
|
|
while (out.length && !out[out.length - 1].trim()) out.pop();
|
|
return out.join('\n');
|
|
}
|
|
function paneLine(p) {
|
|
const kind = {term: 'терминал', ssh: 'SSH-терминал', files: 'файлы', sshfiles: 'файлы по SSH'}[p.kind] || p.kind;
|
|
return kind + ' · ' + (p.tooltip ? p.tooltip() : p.title()) + ' (машина ' + (p.agent ? p.agent.name : '?') + ')';
|
|
}
|
|
function context() {
|
|
const view = document.querySelector('main#app').dataset.view;
|
|
const out = ['Страница: ' + ({machines: 'Машины', terminal: 'WorkSpace', settings: 'Настройки'}[view] || view)];
|
|
out.push('Машины пользователя: ' + machines.map(m => m.name + ' (' + m.user + '@' + m.hostname + (m.online ? '' : ', офлайн') + ')').join('; '));
|
|
const ws = W();
|
|
if (!ws) return out.join('\n');
|
|
const panes = ws.panes(), act = ws.activePane();
|
|
out.push('Панели (' + panes.length + '):');
|
|
panes.forEach(p => out.push((p === act ? '* ' : '- ') + paneLine(p)));
|
|
if (act && act.term) {
|
|
out.push('', 'Активный терминал, последние строки:', '```', termText(act, 120), '```');
|
|
} else if (act && act.entries) {
|
|
out.push('', 'Активная файловая панель: ' + act.cwd + (act.selected.size ? ' · выбрано: ' + [...act.selected].join(', ') : ''));
|
|
out.push(act.entries.slice(0, 200).map(e => (e.is_dir ? e.name + '/' : e.name + ' (' + e.size + ' B)')).join('\n'));
|
|
}
|
|
return out.join('\n');
|
|
}
|
|
function where() {
|
|
const act = W() && W().activePane();
|
|
q('.ai-where').textContent = act ? '· ' + (act.agent ? act.agent.name : '') : '';
|
|
}
|
|
|
|
// ---------- machines ----------
|
|
let machines = [];
|
|
async function loadMachines() {
|
|
try { machines = await fetch('/api/panel/agents/presence', {cache: 'no-store', credentials: 'same-origin'}).then(r => r.json()); } catch (e) { /* keep */ }
|
|
return machines;
|
|
}
|
|
// machineOf: the machine an action names, else the one of the active pane.
|
|
function machineOf(name) {
|
|
const n = (name || '').trim().toLowerCase();
|
|
if (n) return machines.find(m => m.name.toLowerCase() === n || m.id === n || m.hostname.toLowerCase() === n) || null;
|
|
const act = W() && W().activePane();
|
|
if (act && act.agent) return machines.find(m => m.id === act.agent.id) || {id: act.agent.id, name: act.agent.name, online: true};
|
|
return machines.length === 1 ? machines[0] : null;
|
|
}
|
|
|
|
// ---------- actions ----------
|
|
const sleep = ms => new Promise(r => setTimeout(r, ms));
|
|
const lineAt = (b, i) => { const l = b.getLine(i); return l ? l.translateToString(true) : ''; };
|
|
// terminalFor: a terminal of machine m - the active one if it is, else any
|
|
// open one of it, else a new tab.
|
|
async function terminalFor(m) {
|
|
const ws = W(), act = ws.activePane();
|
|
if (act && act.term && !act.ssh && act.agent.id === m.id) return act;
|
|
let t = ws.panes().find(p => p.term && !p.ssh && p.agent.id === m.id);
|
|
if (!t) {
|
|
if (document.querySelector('main#app').dataset.view !== 'terminal') App.go('/workspace');
|
|
ws.open('term', {id: m.id, name: m.name, host: m.hostname, user: m.user});
|
|
t = ws.panes().find(p => p.term && !p.ssh && p.agent.id === m.id);
|
|
for (let i = 0; i < 40 && t && t.state !== 'ok'; i++) await sleep(250);
|
|
await sleep(600);
|
|
}
|
|
return t;
|
|
}
|
|
// runIn sends cmd to terminal t and gives what it printed: until the
|
|
// output has been still for 1.5 s (up to 2 minutes).
|
|
async function runIn(t, cmd, signal) {
|
|
const b = t.term.buffer.active;
|
|
const start = b.baseY + b.cursorY;
|
|
t.send(cmd.replace(/\n/g, '\r') + '\r');
|
|
let last = '', still = 0;
|
|
for (let ms = 0; ms < 120000 && !(signal && signal.aborted); ms += 300) {
|
|
await sleep(300);
|
|
const end = b.baseY + b.cursorY;
|
|
const now = end + ':' + lineAt(b, end);
|
|
if (now === last) { if ((still += 300) >= 1500) break; } else { still = 0; last = now; }
|
|
}
|
|
const lines = [];
|
|
for (let i = start; i <= b.baseY + b.cursorY; i++) lines.push(lineAt(b, i));
|
|
let out = lines.join('\n').replace(/\s+$/, '');
|
|
if (out.length > 8000) out = '…' + out.slice(-8000);
|
|
return out;
|
|
}
|
|
const b64 = text => { const u = new TextEncoder().encode(text); let s = ''; for (let i = 0; i < u.length; i++) s += String.fromCharCode(u[i]); return btoa(s); };
|
|
// perform does one action with the user's rights and tells what came of it.
|
|
async function perform(a, signal) {
|
|
await loadMachines();
|
|
const m = machineOf(a.machine);
|
|
if (!m) return 'Ошибка: нет машины «' + (a.machine || '?') + '». Машины: ' + machines.map(x => x.name).join(', ');
|
|
if (m.online === false) return 'Ошибка: машина ' + m.name + ' офлайн';
|
|
const src = new MachineSource({id: m.id, name: m.name});
|
|
if (a.kind === 'run') {
|
|
const t = await terminalFor(m);
|
|
if (!t) return 'Ошибка: терминал на ' + m.name + ' не открылся';
|
|
return 'Вывод на ' + m.name + ':\n```\n' + await runIn(t, a.body, signal) + '\n```';
|
|
}
|
|
if (a.kind === 'read') {
|
|
const r = await src.op('read', {path: a.path});
|
|
if (!r.ok) return 'Ошибка чтения ' + m.name + ':' + a.path + ': ' + r.error;
|
|
if (r.data.binary) return m.name + ':' + a.path + ' - двоичный файл, ' + r.data.size + ' B';
|
|
let text = new TextDecoder().decode(FileViews.b64ToBytes(r.data.content));
|
|
if (text.length > 20000) text = text.slice(0, 20000) + '\n…';
|
|
return 'Файл ' + m.name + ':' + a.path + (r.data.truncated ? ' (начало)' : '') + ':\n```\n' + text + '\n```';
|
|
}
|
|
if (a.kind === 'ls') {
|
|
const r = await src.op('list', {path: a.path || '~'});
|
|
if (!r.ok) return 'Ошибка: ' + r.error;
|
|
return 'Папка ' + m.name + ':' + r.data.path + ':\n' + (r.data.entries || []).slice(0, 300)
|
|
.map(e => (e.is_dir ? e.name + '/' : e.name + ' ' + e.size + ' B')).join('\n');
|
|
}
|
|
if (a.kind === 'write') {
|
|
const r = await src.op('write', {path: a.path, data: b64(a.body + '\n')});
|
|
return r.ok ? 'Записано: ' + m.name + ':' + a.path : 'Ошибка записи: ' + r.error;
|
|
}
|
|
return 'Ошибка: неизвестное действие';
|
|
}
|
|
// ask first for what changes something: commands and writes.
|
|
function needsYes(a) { return a.kind === 'run' || a.kind === 'write'; }
|
|
function describe(a) {
|
|
const where = a.machine ? a.machine + ': ' : '';
|
|
return a.kind === 'run' ? 'Выполнить на ' + (a.machine || 'активной машине') + ':\n\n' + a.body
|
|
: 'Записать файл ' + where + a.path + ' (' + a.body.length + ' символов)?';
|
|
}
|
|
|
|
// ---------- messages ----------
|
|
// stripThink: the answer without its thinking - what is acted on and kept.
|
|
const stripThink = t => t.replace(/^\s*(?:<think>|::думаю::)[\s\S]*?((?:<\/think>|::ответ::)\s*|$)/, '');
|
|
const LABEL = {run: 'Выполнить', read: 'Прочитать', ls: 'Показать', write: 'Записать'};
|
|
// render: text with ``` blocks; action blocks get their button.
|
|
function render(el, text, done) {
|
|
// Thinking first, folded: ::думаю:: … ::ответ:: (or <think>), open while
|
|
// it is going on.
|
|
let html = '', n = 0;
|
|
const th = /^\s*(?:<think>|::думаю::)([\s\S]*?)(<\/think>|::ответ::|$)/.exec(text);
|
|
if (th) {
|
|
const going = !th[2];
|
|
html += '<details class="ai-think"' + (going ? ' open' : '') + '><summary>' + (going ? 'Думает…' : 'Размышления') + '</summary><div>' +
|
|
esc(th[1].trim()).replace(/\n/g, '<br>') + '</div></details>';
|
|
text = text.slice(th[0].length);
|
|
}
|
|
const parts = text.split(/```/);
|
|
parts.forEach((part, i) => {
|
|
if (i % 2 === 0) { html += '<div class="ai-text">' + esc(part).replace(/\n/g, '<br>') + '</div>'; return; }
|
|
const m = /^([^\n]*)\n?([\s\S]*)$/.exec(part);
|
|
const head = m[1].trim(), kind = head.split(/\s+/)[0], code = m[2].replace(/\n$/, '');
|
|
const closed = i < parts.length - 1 || done;
|
|
const act = LABEL[kind] && closed;
|
|
html += '<div class="ai-code">' + (act && head !== kind ? '<div class="muted ai-cap">' + esc(head) + '</div>' : '') +
|
|
(code || !act ? '<pre>' + esc(code) + '</pre>' : '') +
|
|
(act ? '<button type="button" class="btn small ai-act" data-i="' + (n++) + '">' + LABEL[kind] + '</button>' : '') + '</div>';
|
|
});
|
|
el.innerHTML = html;
|
|
el.dataset.text = text;
|
|
}
|
|
function add(role, text) {
|
|
q('.ai-hello').hidden = true;
|
|
const el = document.createElement('div');
|
|
el.className = 'ai-msg ' + role;
|
|
if (role === 'assistant') render(el, text, true); else el.textContent = text;
|
|
list.appendChild(el);
|
|
list.scrollTop = list.scrollHeight;
|
|
return el;
|
|
}
|
|
// An action's result shows folded; it reaches the talk on the server with
|
|
// the next question (or by note, when done by hand).
|
|
function showResult(text) {
|
|
const el = add('result', '');
|
|
el.innerHTML = '<details><summary>Результат</summary><pre></pre></details>';
|
|
el.querySelector('pre').textContent = text;
|
|
}
|
|
list.addEventListener('click', async ev => {
|
|
const b = ev.target.closest('.ai-act');
|
|
if (!b || b.disabled) return;
|
|
const msg = b.closest('.ai-msg'), a = WSUtil.parseActions(msg.dataset.text || '')[Number(b.dataset.i)];
|
|
if (!a) return;
|
|
b.disabled = true;
|
|
b.textContent = '…';
|
|
const res = await perform(a);
|
|
b.textContent = /^Ошибка/.test(res) ? 'Ошибка' : 'Готово';
|
|
showResult(res);
|
|
fetch('/api/panel/ai/note', {method: 'POST', headers: {'Content-Type': 'application/json'}, credentials: 'same-origin', body: JSON.stringify({content: res})});
|
|
});
|
|
|
|
function responseError(status, contentType, body) {
|
|
const html = /text\/html/i.test(contentType) || /<!doctype\s+html|<html\b|<body\b/i.test(body);
|
|
if (html) return status === 502
|
|
? 'Сервис ИИ временно недоступен (502 Bad Gateway). Попробуйте позже.'
|
|
: 'Сервис ИИ вернул страницу ошибки (HTTP ' + status + '). Попробуйте позже.';
|
|
const detail = body.trim().slice(0, 500).replace(/^\[ошибка:\s*/i, '').replace(/\]$/, '').trim();
|
|
return detail || 'Ошибка сервиса ИИ (HTTP ' + status + ').';
|
|
}
|
|
// ask sends the new words (or an action's result) and shows the answer.
|
|
async function ask(text, res) {
|
|
if (text) add('user', text);
|
|
if (res) showResult(res);
|
|
const el = add('assistant', '');
|
|
el.classList.add('wait');
|
|
ac = new AbortController();
|
|
send.innerHTML = STOP; send.title = 'Остановить';
|
|
let answer = '';
|
|
try {
|
|
await loadMachines();
|
|
const r = await fetch('/api/panel/ai/chat', {
|
|
method: 'POST', headers: {'Content-Type': 'application/json'}, credentials: 'same-origin', signal: ac.signal,
|
|
body: JSON.stringify({message: text || '', result: res || '', context: context(), agent: agentOn(), think: thinkOn()})
|
|
});
|
|
if (r.redirected && new URL(r.url).pathname === '/login') { location.href = '/login'; return; }
|
|
const contentType = r.headers.get('content-type') || '';
|
|
if (!r.ok) throw new Error(responseError(r.status, contentType, await r.text()));
|
|
if (/text\/html/i.test(contentType)) throw new Error(responseError(r.status, contentType, ''));
|
|
if (!r.body) throw new Error('Ошибка сервиса ИИ (HTTP ' + r.status + ').');
|
|
const rd = r.body.getReader(), dec = new TextDecoder();
|
|
for (;;) {
|
|
const {done, value} = await rd.read();
|
|
if (done) break;
|
|
answer += dec.decode(value, {stream: true});
|
|
el.classList.remove('wait');
|
|
render(el, answer, false);
|
|
list.scrollTop = list.scrollHeight;
|
|
}
|
|
} catch (e) {
|
|
if (e.name !== 'AbortError') answer += (answer ? '\n' : '') + '[ошибка: ' + (e.message || 'нет связи') + ']';
|
|
} finally {
|
|
el.classList.remove('wait');
|
|
render(el, answer || '[нет ответа]', true);
|
|
}
|
|
return {el, answer: stripThink(answer)};
|
|
}
|
|
const pill = k => q('.ai-pill[data-mode="' + k + '"]');
|
|
const agentOn = () => pill('agent').getAttribute('aria-pressed') === 'true';
|
|
const thinkOn = () => pill('think').getAttribute('aria-pressed') === 'true';
|
|
// The modes are kept in this browser.
|
|
box.querySelectorAll('.ai-pill').forEach(b => {
|
|
try { b.setAttribute('aria-pressed', String(localStorage.getItem('lpra.ai.' + b.dataset.mode) === '1')); } catch (e) { /* off */ }
|
|
b.onclick = () => {
|
|
const on = b.getAttribute('aria-pressed') !== 'true';
|
|
b.setAttribute('aria-pressed', String(on));
|
|
try { localStorage.setItem('lpra.ai.' + b.dataset.mode, on ? '1' : ''); } catch (e) { /* not kept */ }
|
|
};
|
|
});
|
|
// talkTurn: one question, and in agent mode the steps after it - the
|
|
// first action of each answer done (asking first for commands and writes)
|
|
// and its result sent back - until an answer asks for nothing.
|
|
async function talkTurn(text) {
|
|
let turn = await ask(text);
|
|
for (let step = 0; agentOn() && ac && !ac.signal.aborted && step < 15; step++) {
|
|
const a = WSUtil.parseActions(turn.answer)[0];
|
|
if (!a) break;
|
|
const b = turn.el.querySelector('.ai-act');
|
|
if (needsYes(a) && !await UI.confirm(describe(a), {ok: a.kind === 'run' ? 'Выполнить' : 'Записать'})) {
|
|
if (b) { b.disabled = true; b.textContent = 'Отклонено'; }
|
|
turn = await ask(null, 'Пользователь отклонил это действие. Предложи другое или закончи.');
|
|
continue;
|
|
}
|
|
if (b) { b.disabled = true; b.textContent = '…'; }
|
|
const res = await perform(a, ac.signal);
|
|
if (b) b.textContent = /^Ошибка/.test(res) ? 'Ошибка' : 'Готово';
|
|
if (ac.signal.aborted) { showResult(res); break; }
|
|
turn = await ask(null, res);
|
|
}
|
|
ac = null;
|
|
send.innerHTML = PLANE; send.title = 'Отправить';
|
|
}
|
|
q('.ai-form-in').onsubmit = ev => {
|
|
ev.preventDefault();
|
|
if (ac) { ac.abort(); return; }
|
|
const text = input.value.trim();
|
|
if (!text) return;
|
|
input.value = '';
|
|
grow();
|
|
where();
|
|
talkTurn(text);
|
|
};
|
|
// The field grows with the text, up to a few lines.
|
|
function grow() { input.style.height = '40px'; input.style.height = Math.min(140, input.scrollHeight + 2) + 'px'; }
|
|
input.addEventListener('input', grow);
|
|
input.addEventListener('keydown', ev => {
|
|
if (ev.key === 'Enter' && !ev.shiftKey && !ev.isComposing) { ev.preventDefault(); q('.ai-form-in').requestSubmit(); }
|
|
});
|
|
})();
|