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,68 @@
+/* 消息容器 */
+#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;
+}
+
+/* AI消息 */
+#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,3 +1,15 @@
+html {
+    height: 100%;
+    width: 100%;
+}
+
+body {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+
 #project-info-img {
     width: 64px;
     height: 64px;

assets/js/chat.js

@@ -1,59 +1,100 @@
 const mujianSdk = new window.MujianUMD.MujianSdk();
+const stopController = new AbortController();
 
-async function chat(
+// 发送消息。入参是用户输入
+async function send(query) {
+	const id = Date.now();
+	addMessage("assistant", "等待回复中...", id); // 添加一个占位的AI消息。用于后续刷返回文字
+	startLoading(id); // 给消息添加loading状态
+	await mujianSdk.ai.chat.complete( // 调用 mujian sdk 发送请求
 		query,
-    cb,
+		(res) => {
-) {
+			updateMessage(id, res.fullContent); // 流式实时更新消息
-    let lastChunk = '';
+			if (res.isFinished) { // 如果流式完成结束，则停止loading状态
-    // 让缓冲区跨回调持久，防止分包导致的半行重复解析
+				stopLoading(id); // 停止loading状态
-    let buffer = '';
+			}
-    await mujianSdk.ai.chat.complete(query, (data) => {
+		},
-
+		stopController.signal,
-        // data 可能是块状字符串；避免逐字符遍历
+		{
-        buffer += data;
+			parseContent: true, // 让 sdk 只返回消息内容，不会返回其他字段
-        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') {
+function stop() {
-                //     const username = localStorage.getItem(USERNAME_KEY) || 'User';
+	stopController.abort();
-                //     content = content?.replace(new RegExp(FAKE_USERNAME, 'g'), username);
+}
-                //   }
 
-                if (content !== undefined && content !== null) {
+// 渲染所有消息
-                    if (content.length > 0) {
+async function renderAllMessages() {
-                        lastChunk += content;
+	const messages = await mujianSdk.ai.chat.message.getAll(); // 通过 sdk 获取所有消息
-                        cb && cb(lastChunk);
+	renderMessages(messages); // 渲染所有消息
+	scrollToBottom(); // 滚动到底部
 }
-                } else {
+
-                    console.error('data', payload);
+// 更新消息。入参是消息id和消息内容
+function updateMessage(id, message) {
+	if ($(`#message-assistant-${id}`).length === 0) { // 如果消息不存在，则返回
+		return;
 	}
-            } catch (error) {
+	$(`#message-assistant-${id}`).text("assistant: " + message); // 更新消息内容
-                console.log('error', error);
+	scrollToBottom(); // 滚动到底部
-                throw error;
 }
+
+// 添加消息。入参是消息角色和消息内容
+function addMessage(role, message, id = null) {
+	const _id = id || Date.now(); // 如果消息id不存在，则生成一个唯一id
+	$("#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(); // 获取用户输入
+	if (!query) { // 如果用户输入为空，则返回
+		return;
+	}
+	$("#input").val(""); // 清空用户输入
+	addMessage("user", query, Date.now()); // 添加用户消息
+	await send(query); // 发送消息
 });
 
-
+$("#stop").click(stop); // 点击停止按钮时，停止发送消息
-    //   console.log('lastChunk', lastChunk);
-    return lastChunk;
-}
 
 
-mujianSdk.init().then(() => {
+// 初始化。初始化幕间官方SDK
-    chat('你好', (res) => {
+(async () => {
-        // console.log('res', res)
+	await mujianSdk.init().then(async () => {
-        $('#message').text(res);
+		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="input-container">
-    <div id="message"></div>
+      <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>