294 lines
10 KiB
JavaScript
294 lines
10 KiB
JavaScript
|
const state = {
|
|||
|
|
runtime: null,
|
|||
|
|
knowledgeBases: [],
|
|||
|
|
activeKnowledgeBaseId: null,
|
|||
|
|
conversationId: null,
|
|||
|
|
isSending: false,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const elements = {
|
|||
|
|
kbList: document.getElementById("knowledge-base-list"),
|
|||
|
|
refreshKbs: document.getElementById("refresh-kbs"),
|
|||
|
|
importKb: document.getElementById("import-kb"),
|
|||
|
|
importPath: document.getElementById("import-path"),
|
|||
|
|
importSubmit: document.getElementById("import-submit"),
|
|||
|
|
importStatus: document.getElementById("import-status"),
|
|||
|
|
runtimeMode: document.getElementById("runtime-mode"),
|
|||
|
|
runtimeModel: document.getElementById("runtime-model"),
|
|||
|
|
threadTitle: document.getElementById("thread-title"),
|
|||
|
|
threadSubtitle: document.getElementById("thread-subtitle"),
|
|||
|
|
activeKbBadge: document.getElementById("active-kb-badge"),
|
|||
|
|
newThread: document.getElementById("new-thread"),
|
|||
|
|
messageList: document.getElementById("message-list"),
|
|||
|
|
composer: document.getElementById("composer"),
|
|||
|
|
sendMessage: document.getElementById("send-message"),
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function escapeHtml(text) {
|
|||
|
|
return String(text)
|
|||
|
|
.replaceAll("&", "&")
|
|||
|
|
.replaceAll("<", "<")
|
|||
|
|
.replaceAll(">", ">");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function fetchJson(url, options) {
|
|||
|
|
const response = await fetch(url, options);
|
|||
|
|
if (!response.ok) {
|
|||
|
|
const text = await response.text();
|
|||
|
|
throw new Error(text || `HTTP ${response.status}`);
|
|||
|
|
}
|
|||
|
|
return response.json();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function bootstrap() {
|
|||
|
|
const [runtime, kbPayload] = await Promise.all([
|
|||
|
|
fetchJson("/api/runtime"),
|
|||
|
|
fetchJson("/api/knowledge-bases"),
|
|||
|
|
]);
|
|||
|
|
state.runtime = runtime;
|
|||
|
|
state.knowledgeBases = kbPayload.knowledge_bases || [];
|
|||
|
|
state.activeKnowledgeBaseId =
|
|||
|
|
runtime.default_knowledge_base_id ||
|
|||
|
|
kbPayload.default_knowledge_base_id ||
|
|||
|
|
state.knowledgeBases[0]?.knowledge_base_id ||
|
|||
|
|
null;
|
|||
|
|
renderRuntime();
|
|||
|
|
renderKnowledgeBases();
|
|||
|
|
updateThreadHeader();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function renderRuntime() {
|
|||
|
|
elements.runtimeMode.textContent = state.runtime?.mode || "unknown";
|
|||
|
|
elements.runtimeModel.textContent = state.runtime?.model_name || "offline";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function renderKnowledgeBases() {
|
|||
|
|
const cards = state.knowledgeBases;
|
|||
|
|
elements.kbList.innerHTML = "";
|
|||
|
|
if (!cards.length) {
|
|||
|
|
elements.kbList.innerHTML = '<div class="micro-copy">还没有知识库，先从上面导入一份会议文本。</div>';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
for (const kb of cards) {
|
|||
|
|
const button = document.createElement("button");
|
|||
|
|
button.type = "button";
|
|||
|
|
button.className = `kb-item${kb.knowledge_base_id === state.activeKnowledgeBaseId ? " active" : ""}`;
|
|||
|
|
button.innerHTML = `
|
|||
|
|
<div class="kb-name">${escapeHtml(kb.title)}</div>
|
|||
|
|
<div class="kb-meta">最近会议：${escapeHtml(kb.last_meeting_date || "暂无")} · ${kb.meeting_count} 次导入</div>
|
|||
|
|
<div class="kb-meta">指标 ${kb.counts.metrics} · 待办 ${kb.counts.actions} · 风险 ${kb.counts.risks}</div>
|
|||
|
|
<div class="kb-summary">${escapeHtml((kb.latest_summary || []).join(" "))}</div>
|
|||
|
|
`;
|
|||
|
|
button.addEventListener("click", async () => {
|
|||
|
|
state.activeKnowledgeBaseId = kb.knowledge_base_id;
|
|||
|
|
state.conversationId = null;
|
|||
|
|
renderKnowledgeBases();
|
|||
|
|
updateThreadHeader();
|
|||
|
|
appendSystemMessage(`已切换到知识库“${kb.knowledge_base_id}”。`);
|
|||
|
|
await ensureConversation();
|
|||
|
|
});
|
|||
|
|
elements.kbList.appendChild(button);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateThreadHeader() {
|
|||
|
|
const active = state.knowledgeBases.find((item) => item.knowledge_base_id === state.activeKnowledgeBaseId);
|
|||
|
|
if (!active) {
|
|||
|
|
elements.threadTitle.textContent = "选择一个知识库开始提问";
|
|||
|
|
elements.threadSubtitle.textContent = "左侧选择知识库，右侧像 nanobot 一样按对话线程提问。";
|
|||
|
|
elements.activeKbBadge.textContent = "未选择知识库";
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
elements.threadTitle.textContent = active.title;
|
|||
|
|
elements.threadSubtitle.textContent = `最近会议：${active.last_meeting_date || "暂无"}，待办 ${active.counts.actions}，风险 ${active.counts.risks}`;
|
|||
|
|
elements.activeKbBadge.textContent = `知识库：${active.knowledge_base_id}`;
|
|||
|
|
elements.importKb.value = active.knowledge_base_id;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function clearHeroCard() {
|
|||
|
|
const hero = elements.messageList.querySelector(".hero-card");
|
|||
|
|
if (hero) {
|
|||
|
|
hero.remove();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function appendMessage(role, text) {
|
|||
|
|
clearHeroCard();
|
|||
|
|
const article = document.createElement("article");
|
|||
|
|
article.className = `message ${role}`;
|
|||
|
|
article.innerHTML = `
|
|||
|
|
<div class="message-role">${role === "user" ? "我" : "AI"}</div>
|
|||
|
|
<div class="message-body">${escapeHtml(text)}</div>
|
|||
|
|
`;
|
|||
|
|
elements.messageList.appendChild(article);
|
|||
|
|
elements.messageList.scrollTop = elements.messageList.scrollHeight;
|
|||
|
|
return article;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function appendSystemMessage(text) {
|
|||
|
|
appendMessage("assistant", text);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function ensureConversation() {
|
|||
|
|
if (state.conversationId) {
|
|||
|
|
return state.conversationId;
|
|||
|
|
}
|
|||
|
|
const payload = await fetchJson("/api/conversations", {
|
|||
|
|
method: "POST",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
body: JSON.stringify({ knowledge_base_id: state.activeKnowledgeBaseId }),
|
|||
|
|
});
|
|||
|
|
state.conversationId = payload.conversation_id;
|
|||
|
|
return state.conversationId;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function refreshKnowledgeBases() {
|
|||
|
|
const kbPayload = await fetchJson("/api/knowledge-bases");
|
|||
|
|
state.knowledgeBases = kbPayload.knowledge_bases || [];
|
|||
|
|
if (!state.activeKnowledgeBaseId && state.knowledgeBases[0]) {
|
|||
|
|
state.activeKnowledgeBaseId = state.knowledgeBases[0].knowledge_base_id;
|
|||
|
|
}
|
|||
|
|
renderKnowledgeBases();
|
|||
|
|
updateThreadHeader();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function importTranscript() {
|
|||
|
|
const knowledgeBaseId = elements.importKb.value.trim();
|
|||
|
|
const filePath = elements.importPath.value.trim();
|
|||
|
|
if (!knowledgeBaseId || !filePath) {
|
|||
|
|
elements.importStatus.textContent = "请输入知识库 ID 和文本路径。";
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
elements.importStatus.textContent = "正在导入...";
|
|||
|
|
try {
|
|||
|
|
const payload = await fetchJson("/api/knowledge-bases/import", {
|
|||
|
|
method: "POST",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
knowledge_base_id: knowledgeBaseId,
|
|||
|
|
file_path: filePath,
|
|||
|
|
}),
|
|||
|
|
});
|
|||
|
|
elements.importStatus.textContent = `导入完成：${payload.knowledge_base_id}，meeting_id=${payload.meeting_id}`;
|
|||
|
|
state.activeKnowledgeBaseId = payload.knowledge_base_id;
|
|||
|
|
state.conversationId = null;
|
|||
|
|
await refreshKnowledgeBases();
|
|||
|
|
appendSystemMessage(`已导入到知识库“${payload.knowledge_base_id}”，现在可以直接提问。`);
|
|||
|
|
} catch (error) {
|
|||
|
|
elements.importStatus.textContent = String(error.message || error);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function sendMessage() {
|
|||
|
|
const message = elements.composer.value.trim();
|
|||
|
|
if (!message || state.isSending) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
state.isSending = true;
|
|||
|
|
elements.sendMessage.disabled = true;
|
|||
|
|
appendMessage("user", message);
|
|||
|
|
elements.composer.value = "";
|
|||
|
|
|
|||
|
|
const assistantCard = appendMessage("assistant", "正在思考...");
|
|||
|
|
const body = assistantCard.querySelector(".message-body");
|
|||
|
|
const activityNode = document.createElement("div");
|
|||
|
|
activityNode.className = "message-activity";
|
|||
|
|
body.appendChild(activityNode);
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const conversationId = await ensureConversation();
|
|||
|
|
const response = await fetch(`/api/conversations/${conversationId}/chat`, {
|
|||
|
|
method: "POST",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
message,
|
|||
|
|
knowledge_base_id: state.activeKnowledgeBaseId,
|
|||
|
|
}),
|
|||
|
|
});
|
|||
|
|
if (!response.ok || !response.body) {
|
|||
|
|
throw new Error((await response.text()) || `HTTP ${response.status}`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let finalText = "";
|
|||
|
|
const reader = response.body.getReader();
|
|||
|
|
const decoder = new TextDecoder("utf-8");
|
|||
|
|
let buffer = "";
|
|||
|
|
|
|||
|
|
while (true) {
|
|||
|
|
const { done, value } = await reader.read();
|
|||
|
|
if (done) {
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
buffer += decoder.decode(value, { stream: true });
|
|||
|
|
const chunks = buffer.split("\n\n");
|
|||
|
|
buffer = chunks.pop() || "";
|
|||
|
|
for (const chunk of chunks) {
|
|||
|
|
const line = chunk.split("\n").find((item) => item.startsWith("data: "));
|
|||
|
|
if (!line) {
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
const payload = JSON.parse(line.slice(6));
|
|||
|
|
if (payload.type === "meta" && payload.knowledge_base_id) {
|
|||
|
|
state.activeKnowledgeBaseId = payload.knowledge_base_id;
|
|||
|
|
updateThreadHeader();
|
|||
|
|
renderKnowledgeBases();
|
|||
|
|
}
|
|||
|
|
if (payload.type === "tool_call") {
|
|||
|
|
activityNode.textContent = `工具调用：${payload.tool_name}`;
|
|||
|
|
}
|
|||
|
|
if (payload.type === "tool_result") {
|
|||
|
|
activityNode.textContent = `工具已返回：${payload.tool_name}`;
|
|||
|
|
}
|
|||
|
|
if (payload.type === "final") {
|
|||
|
|
finalText = payload.final_response || "";
|
|||
|
|
body.textContent = finalText;
|
|||
|
|
if (activityNode.textContent) {
|
|||
|
|
body.appendChild(activityNode);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (!finalText) {
|
|||
|
|
body.textContent = "这次没有拿到有效回答。";
|
|||
|
|
}
|
|||
|
|
await refreshKnowledgeBases();
|
|||
|
|
} catch (error) {
|
|||
|
|
body.textContent = `请求失败：${error.message || error}`;
|
|||
|
|
} finally {
|
|||
|
|
state.isSending = false;
|
|||
|
|
elements.sendMessage.disabled = false;
|
|||
|
|
elements.messageList.scrollTop = elements.messageList.scrollHeight;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
elements.refreshKbs.addEventListener("click", () => {
|
|||
|
|
refreshKnowledgeBases().catch((error) => appendSystemMessage(`刷新失败：${error.message || error}`));
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
elements.importSubmit.addEventListener("click", () => {
|
|||
|
|
importTranscript().catch((error) => {
|
|||
|
|
elements.importStatus.textContent = String(error.message || error);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
elements.sendMessage.addEventListener("click", () => {
|
|||
|
|
sendMessage().catch((error) => appendSystemMessage(`发送失败：${error.message || error}`));
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
elements.newThread.addEventListener("click", async () => {
|
|||
|
|
state.conversationId = null;
|
|||
|
|
await ensureConversation();
|
|||
|
|
appendSystemMessage("已新建一个对话线程。");
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
elements.composer.addEventListener("keydown", (event) => {
|
|||
|
|
if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
|
|||
|
|
event.preventDefault();
|
|||
|
|
sendMessage().catch((error) => appendSystemMessage(`发送失败：${error.message || error}`));
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
bootstrap().catch((error) => {
|
|||
|
|
appendSystemMessage(`初始化失败：${error.message || error}`);
|
|||
|
|
});
|