74 lines
2.3 KiB
JavaScript
74 lines
2.3 KiB
JavaScript
 
|
let sessionId = null;
|
||
|
|
|
||
|
|
const logEl = document.getElementById("log");
|
||
|
|
const slotsEl = document.getElementById("slots");
|
||
|
|
const schemeEl = document.getElementById("scheme");
|
||
|
|
const metaEl = document.getElementById("meta");
|
||
|
|
const form = document.getElementById("form");
|
||
|
|
const input = document.getElementById("input");
|
||
|
|
const resetBtn = document.getElementById("reset");
|
||
|
|
|
||
|
|
function addBubble(role, text) {
|
||
|
|
const div = document.createElement("div");
|
||
|
|
div.className = `bubble ${role}`;
|
||
|
|
div.textContent = text;
|
||
|
|
logEl.appendChild(div);
|
||
|
|
logEl.scrollTop = logEl.scrollHeight;
|
||
|
|
}
|
||
|
|
|
||
|
|
async function ensureSession() {
|
||
|
|
if (sessionId) return sessionId;
|
||
|
|
const res = await fetch("/api/sessions", { method: "POST" });
|
||
|
|
const data = await res.json();
|
||
|
|
sessionId = data.session_id;
|
||
|
|
metaEl.textContent = `session: ${sessionId.slice(0, 8)}…`;
|
||
|
|
return sessionId;
|
||
|
|
}
|
||
|
|
|
||
|
|
async function sendMessage(message) {
|
||
|
|
await ensureSession();
|
||
|
|
addBubble("user", message);
|
||
|
|
const res = await fetch("/api/chat", {
|
||
|
|
method: "POST",
|
||
|
|
headers: { "Content-Type": "application/json" },
|
||
|
|
body: JSON.stringify({ session_id: sessionId, message }),
|
||
|
|
});
|
||
|
|
if (!res.ok) {
|
||
|
|
addBubble("sys", `错误：${res.status}`);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const data = await res.json();
|
||
|
|
addBubble("bot", data.reply);
|
||
|
|
slotsEl.textContent = JSON.stringify(data.slots || {}, null, 2);
|
||
|
|
schemeEl.textContent = data.scheme
|
||
|
|
? JSON.stringify(data.scheme, null, 2)
|
||
|
|
: "尚未生成";
|
||
|
|
metaEl.textContent = `session: ${sessionId.slice(0, 8)}… · phase: ${data.phase}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
form.addEventListener("submit", async (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
const text = input.value.trim();
|
||
|
|
if (!text) return;
|
||
|
|
input.value = "";
|
||
|
|
form.querySelector("button").disabled = true;
|
||
|
|
try {
|
||
|
|
await sendMessage(text);
|
||
|
|
} finally {
|
||
|
|
form.querySelector("button").disabled = false;
|
||
|
|
input.focus();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
resetBtn.addEventListener("click", () => {
|
||
|
|
sessionId = null;
|
||
|
|
logEl.innerHTML = "";
|
||
|
|
slotsEl.textContent = "{}";
|
||
|
|
schemeEl.textContent = "尚未生成";
|
||
|
|
metaEl.textContent = "";
|
||
|
|
addBubble("bot", "新会话已开始。可以直接说场景，例如：「产线检测，偏向 B 类」。");
|
||
|
|
input.focus();
|
||
|
|
});
|
||
|
|
|
||
|
|
addBubble("bot", "你好，我是鲜境方案引擎原型。先收集几个关键信息，再给出产品组合草稿。\n试试：「我们在户外做监测，指标还不确定」。");
|