356 lines
11 KiB
HTML
356 lines
11 KiB
HTML
{% extends "_layout.html" %}
|
|
{% set active = "chat" %}
|
|
{% block title %}beaver-gateway · chat{% endblock %}
|
|
{% block content %}
|
|
<div class="chat-wrap">
|
|
<div class="chat-toolbar">
|
|
<label>
|
|
<span>Agent</span>
|
|
<select id="agent-select">
|
|
{% for a in agents %}
|
|
<option value="{{ a.name }}">{{ a.name }} · {{ a.model }}</option>
|
|
{% else %}
|
|
<option disabled>no agents with a backend</option>
|
|
{% endfor %}
|
|
</select>
|
|
</label>
|
|
<div class="spacer"></div>
|
|
<button id="new-chat-btn" type="button">New chat</button>
|
|
</div>
|
|
<div id="messages" class="chat-messages" aria-live="polite"></div>
|
|
<form id="chat-form" class="chat-input">
|
|
<textarea id="chat-text" rows="3" placeholder="Message… (⌘/Ctrl+Enter to send)" required></textarea>
|
|
<button type="submit" class="primary" id="send-btn">Send</button>
|
|
</form>
|
|
</div>
|
|
|
|
<style>
|
|
.chat-wrap {
|
|
display: flex; flex-direction: column;
|
|
height: calc(100vh - 200px); min-height: 480px;
|
|
}
|
|
.chat-toolbar {
|
|
display: flex; gap: 0.85rem; align-items: end;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.chat-toolbar .spacer { flex: 1; }
|
|
.chat-toolbar label {
|
|
display: flex; flex-direction: column; gap: 0.3rem;
|
|
min-width: 260px;
|
|
}
|
|
.chat-toolbar label > span {
|
|
font-size: 0.8em; color: var(--muted);
|
|
text-transform: uppercase; letter-spacing: 0.05em;
|
|
}
|
|
.chat-messages {
|
|
flex: 1; overflow-y: auto;
|
|
background: var(--surface); border: 1px solid var(--line);
|
|
border-radius: 14px; padding: 1.25rem;
|
|
display: flex; flex-direction: column; gap: 1rem;
|
|
}
|
|
.chat-empty { color: var(--muted); margin: auto; }
|
|
.msg { display: flex; }
|
|
.msg.user { justify-content: flex-end; }
|
|
.msg.user .bubble {
|
|
max-width: 78%; padding: 0.7rem 0.95rem; border-radius: 14px;
|
|
background: var(--accent); color: white;
|
|
white-space: pre-wrap; word-wrap: break-word;
|
|
}
|
|
.msg.assistant .blocks {
|
|
display: flex; flex-direction: column; gap: 0.5rem;
|
|
max-width: 88%;
|
|
}
|
|
.block-text {
|
|
background: var(--code-bg); padding: 0.7rem 0.95rem;
|
|
border-radius: 14px;
|
|
white-space: pre-wrap; word-wrap: break-word;
|
|
}
|
|
details.tool-call, details.thinking-block {
|
|
border: 1px solid var(--line); border-radius: 10px;
|
|
background: var(--surface); padding: 0 0.85rem;
|
|
font-size: 0.9em;
|
|
}
|
|
details.tool-call > summary,
|
|
details.thinking-block > summary {
|
|
cursor: pointer; padding: 0.55rem 0;
|
|
list-style: none;
|
|
display: flex; align-items: center; gap: 0.55rem;
|
|
}
|
|
details > summary::-webkit-details-marker { display: none; }
|
|
details.tool-call > summary::before,
|
|
details.thinking-block > summary::before {
|
|
content: "▸"; color: var(--muted); font-size: 0.78em;
|
|
}
|
|
details.tool-call[open] > summary::before,
|
|
details.thinking-block[open] > summary::before { content: "▾"; }
|
|
.tool-name {
|
|
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
|
font-weight: 500;
|
|
}
|
|
.tool-id, .tool-label {
|
|
color: var(--muted); font-size: 0.78em;
|
|
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
|
}
|
|
details.tool-call pre, details.thinking-block pre {
|
|
margin: 0 0 0.6rem; padding: 0.7rem 0.85rem;
|
|
background: var(--code-bg); border-radius: 8px;
|
|
font-size: 0.85em; max-height: 360px; overflow: auto;
|
|
}
|
|
.tool-label { display: block; margin: 0.15rem 0 0.25rem; }
|
|
.chat-input { display: flex; gap: 0.75rem; margin-top: 1rem; }
|
|
.chat-input textarea {
|
|
flex: 1; padding: 0.7rem 0.9rem;
|
|
border: 1px solid var(--line); border-radius: 12px;
|
|
font-family: inherit; font-size: 0.95em;
|
|
background: var(--surface); color: var(--fg); resize: vertical;
|
|
}
|
|
.chat-input textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
.chat-input button { align-self: stretch; padding-left: 1.4rem; padding-right: 1.4rem; }
|
|
.chat-error {
|
|
color: var(--danger); font-size: 0.85em;
|
|
padding: 0.55rem 0.75rem;
|
|
background: #fff0f0; border-radius: 10px;
|
|
border: 1px solid #f5c2c5;
|
|
}
|
|
.chat-input button:disabled { opacity: 0.55; cursor: progress; }
|
|
</style>
|
|
|
|
<script>
|
|
(() => {
|
|
const CSRF = {{ csrf | tojson }};
|
|
const URL_PREFIX = {{ p | tojson }};
|
|
const agentSelect = document.getElementById("agent-select");
|
|
const messagesEl = document.getElementById("messages");
|
|
const form = document.getElementById("chat-form");
|
|
const textEl = document.getElementById("chat-text");
|
|
const sendBtn = document.getElementById("send-btn");
|
|
const newBtn = document.getElementById("new-chat-btn");
|
|
|
|
// Anthropic-style history sent to the backend. We keep assistant
|
|
// content text-only — tool_use blocks can't round-trip without
|
|
// matching tool_result, and backends (claude-code) run tools
|
|
// internally anyway.
|
|
let apiMessages = [];
|
|
|
|
function renderEmpty() {
|
|
messagesEl.innerHTML = '<div class="chat-empty">No messages yet — say something.</div>';
|
|
}
|
|
renderEmpty();
|
|
|
|
newBtn.addEventListener("click", () => {
|
|
apiMessages = [];
|
|
renderEmpty();
|
|
});
|
|
|
|
function clearEmpty() {
|
|
const e = messagesEl.querySelector(".chat-empty");
|
|
if (e) e.remove();
|
|
}
|
|
function scrollDown() { messagesEl.scrollTop = messagesEl.scrollHeight; }
|
|
|
|
function appendUser(text) {
|
|
clearEmpty();
|
|
const row = document.createElement("div");
|
|
row.className = "msg user";
|
|
const bub = document.createElement("div");
|
|
bub.className = "bubble";
|
|
bub.textContent = text;
|
|
row.appendChild(bub);
|
|
messagesEl.appendChild(row);
|
|
scrollDown();
|
|
}
|
|
function appendAssistant() {
|
|
clearEmpty();
|
|
const row = document.createElement("div");
|
|
row.className = "msg assistant";
|
|
const blocks = document.createElement("div");
|
|
blocks.className = "blocks";
|
|
row.appendChild(blocks);
|
|
messagesEl.appendChild(row);
|
|
scrollDown();
|
|
return blocks;
|
|
}
|
|
function appendError(text) {
|
|
clearEmpty();
|
|
const e = document.createElement("div");
|
|
e.className = "chat-error";
|
|
e.textContent = text;
|
|
messagesEl.appendChild(e);
|
|
scrollDown();
|
|
}
|
|
|
|
function ensureBlock(state, index, type, extra) {
|
|
if (state.blocks[index]) return state.blocks[index];
|
|
const block = { type };
|
|
if (type === "text") {
|
|
const el = document.createElement("div");
|
|
el.className = "block-text";
|
|
state.container.appendChild(el);
|
|
block.el = el;
|
|
} else if (type === "thinking") {
|
|
const det = document.createElement("details");
|
|
det.className = "thinking-block";
|
|
const sum = document.createElement("summary");
|
|
sum.textContent = "Thinking";
|
|
det.appendChild(sum);
|
|
const pre = document.createElement("pre");
|
|
det.appendChild(pre);
|
|
state.container.appendChild(det);
|
|
block.el = pre;
|
|
} else if (type === "tool_use") {
|
|
const det = document.createElement("details");
|
|
det.className = "tool-call";
|
|
const sum = document.createElement("summary");
|
|
const name = document.createElement("span");
|
|
name.className = "tool-name";
|
|
name.textContent = "🔧 " + (extra.name || "tool");
|
|
sum.appendChild(name);
|
|
if (extra.id) {
|
|
const idEl = document.createElement("span");
|
|
idEl.className = "tool-id";
|
|
idEl.textContent = extra.id;
|
|
sum.appendChild(idEl);
|
|
}
|
|
det.appendChild(sum);
|
|
const label = document.createElement("span");
|
|
label.className = "tool-label";
|
|
label.textContent = "input";
|
|
det.appendChild(label);
|
|
const pre = document.createElement("pre");
|
|
det.appendChild(pre);
|
|
state.container.appendChild(det);
|
|
block.el = pre;
|
|
block.jsonBuf = "";
|
|
block.seedInput = extra.input;
|
|
}
|
|
state.blocks[index] = block;
|
|
return block;
|
|
}
|
|
|
|
function applyEvent(state, ev) {
|
|
const t = ev.type;
|
|
if (t === "content_block_start") {
|
|
const cb = ev.content_block || {};
|
|
if (cb.type === "text") {
|
|
ensureBlock(state, ev.index, "text", {});
|
|
} else if (cb.type === "thinking") {
|
|
ensureBlock(state, ev.index, "thinking", {});
|
|
} else if (cb.type === "tool_use") {
|
|
ensureBlock(state, ev.index, "tool_use",
|
|
{ name: cb.name, id: cb.id, input: cb.input });
|
|
}
|
|
} else if (t === "content_block_delta") {
|
|
const d = ev.delta || {};
|
|
const b = state.blocks[ev.index];
|
|
if (!b) return;
|
|
if (d.type === "text_delta") {
|
|
b.el.textContent += d.text || "";
|
|
state.assistantText += d.text || "";
|
|
scrollDown();
|
|
} else if (d.type === "thinking_delta") {
|
|
b.el.textContent += d.thinking || "";
|
|
scrollDown();
|
|
} else if (d.type === "input_json_delta") {
|
|
b.jsonBuf += d.partial_json || "";
|
|
}
|
|
} else if (t === "content_block_stop") {
|
|
const b = state.blocks[ev.index];
|
|
if (!b) return;
|
|
if (b.type === "tool_use") {
|
|
let input = null;
|
|
if (b.jsonBuf && b.jsonBuf.trim()) {
|
|
try { input = JSON.parse(b.jsonBuf); }
|
|
catch { input = b.jsonBuf; }
|
|
} else if (b.seedInput !== undefined && b.seedInput !== null) {
|
|
input = b.seedInput;
|
|
}
|
|
b.el.textContent = input === null
|
|
? "(no input)"
|
|
: (typeof input === "string"
|
|
? input
|
|
: JSON.stringify(input, null, 2));
|
|
}
|
|
} else if (t === "error") {
|
|
const msg = (ev.error && ev.error.message) || "stream error";
|
|
appendError(msg);
|
|
}
|
|
}
|
|
|
|
async function send() {
|
|
const text = textEl.value.trim();
|
|
if (!text) return;
|
|
const model = agentSelect.value;
|
|
if (!model) { appendError("no agent selected"); return; }
|
|
|
|
apiMessages.push({ role: "user", content: text });
|
|
appendUser(text);
|
|
textEl.value = "";
|
|
sendBtn.disabled = true;
|
|
|
|
const container = appendAssistant();
|
|
const state = { container, blocks: {}, assistantText: "" };
|
|
|
|
let resp;
|
|
try {
|
|
resp = await fetch(URL_PREFIX + "/chat/send", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"X-CSRF-Token": CSRF,
|
|
},
|
|
body: JSON.stringify({ model, messages: apiMessages }),
|
|
});
|
|
} catch (e) {
|
|
appendError("network error: " + e.message);
|
|
sendBtn.disabled = false;
|
|
return;
|
|
}
|
|
if (!resp.ok || !resp.body) {
|
|
let msg = resp.status + " " + resp.statusText;
|
|
try { const body = await resp.text(); if (body) msg = body; } catch {}
|
|
appendError(msg);
|
|
sendBtn.disabled = false;
|
|
return;
|
|
}
|
|
|
|
const reader = resp.body.getReader();
|
|
const dec = new TextDecoder();
|
|
let buf = "";
|
|
while (true) {
|
|
const { value, done } = await reader.read();
|
|
if (done) break;
|
|
buf += dec.decode(value, { stream: true });
|
|
let i;
|
|
while ((i = buf.indexOf("\n\n")) >= 0) {
|
|
const raw = buf.slice(0, i);
|
|
buf = buf.slice(i + 2);
|
|
if (!raw) continue;
|
|
let dataLine = "";
|
|
for (const line of raw.split("\n")) {
|
|
if (line.startsWith("data:")) dataLine += line.slice(5).trimStart();
|
|
}
|
|
if (!dataLine) continue;
|
|
let payload;
|
|
try { payload = JSON.parse(dataLine); } catch { continue; }
|
|
applyEvent(state, payload);
|
|
}
|
|
}
|
|
|
|
if (state.assistantText) {
|
|
apiMessages.push({ role: "assistant", content: state.assistantText });
|
|
}
|
|
sendBtn.disabled = false;
|
|
textEl.focus();
|
|
}
|
|
|
|
form.addEventListener("submit", (e) => { e.preventDefault(); send(); });
|
|
textEl.addEventListener("keydown", (e) => {
|
|
if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
|
|
e.preventDefault();
|
|
send();
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
{% endblock %}
|