doc

assets/js/chat.js

@@ -1,59 +1,91 @@
 const mujianSdk = new window.MujianUMD.MujianSdk();
+const stopController = new AbortController();
 
-async function chat(
-    query,
-    cb,
-) {
-    let lastChunk = '';
-    // 让缓冲区跨回调持久，防止分包导致的半行重复解析
-    let buffer = '';
-    await mujianSdk.ai.chat.complete(query, (data) => {
-
-        // data 可能是块状字符串；避免逐字符遍历
-        buffer += data;
-        const lines = buffer.split('\n');
-        buffer = lines.pop() || '';
-
-        for (const line of lines) {
-            if (!line.startsWith('data: ')) continue;
-            const payload = line.slice(6);
-            try {
-                const parsedData = JSON.parse(payload);
-                if (parsedData?.isFinished) {
-                    // 结束标志，交给外层 await 完成
-                    continue;
-                }
-
-                let content = parsedData?.choices?.[0]?.delta?.content;
-                //   if (content && typeof window !== 'undefined') {
-                //     const username = localStorage.getItem(USERNAME_KEY) || 'User';
-                //     content = content?.replace(new RegExp(FAKE_USERNAME, 'g'), username);
-                //   }
-
-                if (content !== undefined && content !== null) {
-                    if (content.length > 0) {
-                        lastChunk += content;
-                        cb && cb(lastChunk);
-                    }
-                } else {
-                    console.error('data', payload);
-                }
-            } catch (error) {
-                console.log('error', error);
-                throw error;
-            }
-        }
-    });
-
-
-    //   console.log('lastChunk', lastChunk);
-    return lastChunk;
+async function send(query) {
+	const id = Date.now();
+	addMessage("assistant", "等待回复中...", id);
+	startLoading(id);
+	await mujianSdk.ai.chat.complete(
+		query,
+		(res) => {
+			updateMessage(id, res.fullContent);
+			if (res.isFinished) {
+				stopLoading(id);
+			}
+		},
+		stopController.signal,
+		{
+			parseContent: true,
+		},
+	);
 }
 
+function stop() {
+	stopController.abort();
+}
 
-mujianSdk.init().then(() => {
-    chat('你好', (res) => {
-        // console.log('res', res)
-        $('#message').text(res);
-    })
-});
+async function renderAllMessages() {
+	const messages = await mujianSdk.ai.chat.message.getAll();
+	renderMessages(messages);
+	scrollToBottom();
+}
+
+function updateMessage(id, message) {
+	if ($(`#message-assistant-${id}`).length === 0) {
+		return;
+	}
+	$(`#message-assistant-${id}`).text("assistant: " + message);
+	scrollToBottom();
+}
+
+function addMessage(role, message, id = null) {
+	const _id = id || Date.now();
+	$("#messages").append(
+		`<div id="message-${role}-${_id}" class="message ${role === "user" ? "user" : "assistant"}">${role}: ${message}</div>`,
+	);
+}
+
+function startLoading(id) {
+	$(`#message-assistant-${id}`).addClass("loading");
+}
+
+function stopLoading(id) {
+	$(`#message-assistant-${id}`).removeClass("loading");
+}
+
+function clearMessages() {
+	$("#messages").empty();
+}
+
+function scrollToBottom() {
+	$("#messages").animate(
+		{ scrollTop: $("#messages").prop("scrollHeight") },
+		100,
+	);
+}
+
+function renderMessages(messages) {
+	// console.log("messages", messages);
+	messages.forEach((message) => {
+		addMessage(message.role, message.content, message.id);
+	});
+}
+
+$("#send").click(async () => {
+	const query = $("#input").val();
+	console.log("query", query);
+	if (!query) {
+		return;
+	}
+	$("#input").val("");
+	addMessage("user", query, Date.now());
+	await send(query);
+});
+
+$("#stop").click(stop);
+
+(async () => {
+	await mujianSdk.init().then(async () => {
+		await renderAllMessages();
+	});
+})();