doc

.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.zip

assets/css/chat.css

@@ -0,0 +1,58 @@
+#messages {
+    padding: 10px;
+    margin-bottom: 10px;
+    height: calc(100% - 140px);
+    overflow-y: auto;
+}
+
+#messages div {
+    border: 2px solid #000000;
+    font-size: 14px;
+    color: #000;
+    margin-bottom: 10px;
+    padding: 10px;
+    border-radius: 5px;
+}
+
+#messages>.message.loading {
+    border-color: #003cff;
+    animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        border-color: #6e90ff;
+    }
+    50% {
+        border-color: #002ec5;
+    }
+    100% {
+        border-color: #6e90ff;
+    }
+}
+
+#messages>.message.user {
+    border-color: #c90000;
+}
+
+#messages>.message.assistant {
+    border-color: #06af2d;
+}
+
+#input-container {
+    border-top: 2px solid #000000;
+    height: 100px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    #input {
+        margin-bottom: 10px;
+        height: 50px;
+        width: 90%;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+    }
+}

assets/css/index.css

@@ -1,5 +1,17 @@
+html {
+    height: 100%;
+    width: 100%;
+}
+
+body {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+
 #project-info-img {
     width: 64px;
     height: 64px;
     object-fit: cover;
-}
+}

assets/js/chat.js

@@ -1,59 +1,91 @@
 const mujianSdk = new window.MujianUMD.MujianSdk();
+const stopController = new AbortController();
 
-async function chat(
+async function send(query) {
-    query,
+	const id = Date.now();
-    cb,
+	addMessage("assistant", "等待回复中...", id);
-) {
+	startLoading(id);
-    let lastChunk = '';
+	await mujianSdk.ai.chat.complete(
-    // 让缓冲区跨回调持久，防止分包导致的半行重复解析
+		query,
-    let buffer = '';
+		(res) => {
-    await mujianSdk.ai.chat.complete(query, (data) => {
+			updateMessage(id, res.fullContent);
-
+			if (res.isFinished) {
-        // data 可能是块状字符串；避免逐字符遍历
+				stopLoading(id);
-        buffer += data;
+			}
-        const lines = buffer.split('\n');
+		},
-        buffer = lines.pop() || '';
+		stopController.signal,
-
+		{
-        for (const line of lines) {
+			parseContent: true,
-            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;
 }
 
+function stop() {
+	stopController.abort();
+}
 
-mujianSdk.init().then(() => {
+async function renderAllMessages() {
-    chat('你好', (res) => {
+	const messages = await mujianSdk.ai.chat.message.getAll();
-        // console.log('res', res)
+	renderMessages(messages);
-        $('#message').text(res);
+	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();
+	});
+})();

chat.html

@@ -12,16 +12,22 @@
 
     <!-- 你的 CSS 样式代码，都放在这里 -->
     <link rel="stylesheet" href="assets/css/index.css" />
+    <link rel="stylesheet" href="assets/css/chat.css" />
   </head>
 
   <body>
-   
+    <div id="messages" class="max-h-[200px] overflow-y-auto"></div>
-
-    <div id="message"></div>
 
+    <div id="input-container">
+      <textarea id="input" class="" ></textarea>
+      <div class="flex-1">
+        <button id="send" class="ui-button ui-widget ui-corner-all">发送</button>
+        <button id="stop" class="ui-button ui-widget ui-corner-all">停止</button>
+      </div>
+    </div>
 
     <!-- 幕间官方SDK -->
-    <script src="https://npm.onmicrosoft.cn/@mujian/js-sdk@0.0.6-beta.35/dist/umd/index.js"></script>
+    <script src="https://npm.onmicrosoft.cn/@mujian/js-sdk@0.0.6-beta.37/dist/umd/index.js"></script>
     <!-- 第三方库：JQuery - 主要用于提供便利地操作页面元素的函数 -->
     <script src="https://npm.onmicrosoft.cn/jquery@3.7.1/dist/jquery.min.js"></script>
     <!-- 第三方库：JQuery-UI - 主要用于提供基础的UI控件 -->
@@ -31,6 +37,5 @@
 
     <!-- 你的 JS 代码，都放在这里 -->
     <script src="assets/js/chat.js"></script>
-
   </body>
 </html>