Nail/fission-console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(console): wider assistant, generate+explain buttons v0.8.2

Browse Source
This commit is contained in:
Naeel
2026-04-20 15:17:17 +03:00
parent d76aa53f73
commit 48f787403c
1 changed files with 51 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/ui/index.html
+51 -4
View File
@@ -390,8 +390,10 @@
<textarea id="c-code">def main(ctx):
return {"ok": True, "msg": "hello from fission console"}
</textarea>
<div style="margin-top:6px;">
<div style="margin-top:6px; display:flex; gap:6px; flex-wrap:wrap;">
<button class="btn ghost" id="c-ai-btn" onclick="aiCheck('c-code','c-lang','c-ai-result')">&#x1F50D; Проверить синтаксис</button>
<button class="btn ghost" id="c-gen-btn" onclick="aiGenerate()">&#x2728; Сгенерировать код</button>
<button class="btn ghost" id="c-exp-btn" onclick="aiExplain('c-code','c-lang','c-ai-result')">&#x1F4D6; Что делает?</button>
</div>
<div id="c-ai-result" style="display:none;margin-top:8px;padding:10px 12px;border-radius:6px;font-size:13px;line-height:1.5;white-space:pre-wrap;font-family:monospace;"></div>
</div>
@@ -424,8 +426,9 @@
<div>
<label>Код</label>
<textarea id="e-code"></textarea>
<div style="margin-top:6px;">
<div style="margin-top:6px; display:flex; gap:6px; flex-wrap:wrap;">
<button class="btn ghost" id="e-ai-btn" onclick="aiCheck('e-code','e-lang-hidden','e-ai-result')">&#x1F50D; Проверить синтаксис</button>
<button class="btn ghost" id="e-exp-btn" onclick="aiExplain('e-code','e-lang-hidden','e-ai-result')">&#x1F4D6; Что делает?</button>
</div>
<div id="e-ai-result" style="display:none;margin-top:8px;padding:10px 12px;border-radius:6px;font-size:13px;line-height:1.5;white-space:pre-wrap;font-family:monospace;"></div>
</div>
@@ -858,7 +861,7 @@
================================================================ -->
<div id="assistant-panel" style="
position:fixed; bottom:0; right:24px;
width:360px; background:#1e1e2e; border:1px solid #3a3a5c;
width:720px; background:#1e1e2e; border:1px solid #3a3a5c;
border-bottom:none; border-radius:8px 8px 0 0;
font-family:inherit; z-index:900; box-shadow:0 -2px 12px rgba(0,0,0,.4);
">
@@ -872,7 +875,7 @@
</div>
<div id="assistant-body" style="padding:10px; display:flex; flex-direction:column; gap:8px;">
<div id="assistant-messages" style="
min-height:80px; max-height:260px; overflow-y:auto;
min-height:80px; max-height:400px; overflow-y:auto;
font-size:.82rem; line-height:1.5; color:#cdd6f4;
background:#13131f; border-radius:4px; padding:8px;
white-space:pre-wrap; word-break:break-word;
@@ -918,6 +921,50 @@
}
msgs.scrollTop = msgs.scrollHeight;
}
async function aiGenerate() {
var name = (document.getElementById('c-name').value || '').trim() || 'my-func';
var lang = document.getElementById('c-lang').value || 'python';
var btn = document.getElementById('c-gen-btn');
var resEl = document.getElementById('c-ai-result');
btn.disabled = true; btn.textContent = '⏳ Генерирую...';
resEl.style.display = 'block'; resEl.style.background = 'var(--bg-alt)'; resEl.style.color = 'var(--fg)';
resEl.textContent = 'Запрашиваю у LLM...';
try {
var q = 'Напиши функцию Fission на ' + lang + ' с именем "' + name + '". Верни только чистый код без пояснений и без markdown-блоков.';
var d = await requestJSON('/console/api/ai/ask', 'POST', {question: q});
var code = (d.answer || '').replace(/^```[\w]*\n?/, '').replace(/\n?```$/, '');
document.getElementById('c-code').value = code;
resEl.style.background = '#1a3a1a'; resEl.style.color = '#8f8';
resEl.textContent = 'Код сгенерирован и вставлен.';
} catch(e) {
resEl.style.background = '#3a2a00'; resEl.style.color = '#ffa';
resEl.textContent = 'Ошибка: ' + e.message;
} finally {
btn.disabled = false; btn.textContent = '✨ Сгенерировать код';
}
}
async function aiExplain(codeId, langId, resultId) {
var code = (document.getElementById(codeId).value || '').trim();
var lang = (document.getElementById(langId) ? document.getElementById(langId).value : '') || 'python';
var resEl = document.getElementById(resultId);
var btnId = codeId === 'c-code' ? 'c-exp-btn' : 'e-exp-btn';
var btn = document.getElementById(btnId);
if (!code) { resEl.style.display='block'; resEl.style.background='var(--bg-alt)'; resEl.textContent='Введите код.'; return; }
btn.disabled = true; btn.textContent = '⏳ Объясняю...';
resEl.style.display = 'block'; resEl.style.background = 'var(--bg-alt)'; resEl.style.color = 'var(--fg)';
resEl.textContent = 'Запрашиваю у LLM...';
try {
var q = 'Кратко объясни что делает этот ' + lang + ' код:\n' + code;
var d = await requestJSON('/console/api/ai/ask', 'POST', {question: q});
resEl.style.background = '#1a2a3a'; resEl.style.color = '#8cf';
resEl.textContent = d.answer || '(пустой ответ)';
} catch(e) {
resEl.style.background = '#3a2a00'; resEl.style.color = '#ffa';
resEl.textContent = 'Ошибка: ' + e.message;
} finally {
btn.disabled = false; btn.textContent = '📖 Что делает?';
}
}
// end ai/ask feature
</script>
<!-- end ai/ask feature -->