doc

assets/css/chat.css

@@ -1,3 +1,4 @@
+/* 消息容器 */
 #messages {
     padding: 10px;
     margin-bottom: 10px;
@@ -5,6 +6,7 @@
     overflow-y: auto;
 }
 
+/* 消息 */
 #messages div {
     border: 2px solid #000000;
     font-size: 14px;
@@ -14,31 +16,38 @@
     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;
@@ -47,12 +56,13 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-
+}
-    #input {
+
-        margin-bottom: 10px;
+/* 输入框 */
-        height: 50px;
+#input {
-        width: 90%;
+    margin-bottom: 10px;
-        border: 1px solid #ccc;
+    height: 50px;
-        border-radius: 5px;
+    width: 90%;
-    }
+    border: 1px solid #ccc;
+    border-radius: 5px;
 }

assets/js/chat.js

@@ -1,47 +1,52 @@
 const mujianSdk = new window.MujianUMD.MujianSdk();
 const stopController = new AbortController();
 
+// 发送消息。入参是用户输入
 async function send(query) {
 	const id = Date.now();
-	addMessage("assistant", "等待回复中...", id);
+	addMessage("assistant", "等待回复中...", id); // 添加一个占位的AI消息。用于后续刷返回文字
-	startLoading(id);
+	startLoading(id); // 给消息添加loading状态
-	await mujianSdk.ai.chat.complete(
+	await mujianSdk.ai.chat.complete( // 调用 mujian sdk 发送请求
 		query,
 		(res) => {
-			updateMessage(id, res.fullContent);
+			updateMessage(id, res.fullContent); // 流式实时更新消息
-			if (res.isFinished) {
+			if (res.isFinished) { // 如果流式完成结束，则停止loading状态
-				stopLoading(id);
+				stopLoading(id); // 停止loading状态
 			}
 		},
 		stopController.signal,
 		{
-			parseContent: true,
+			parseContent: true, // 让 sdk 只返回消息内容，不会返回其他字段
 		},
 	);
 }
 
+// 停止发送消息
 function stop() {
 	stopController.abort();
 }
 
+// 渲染所有消息
 async function renderAllMessages() {
-	const messages = await mujianSdk.ai.chat.message.getAll();
+	const messages = await mujianSdk.ai.chat.message.getAll(); // 通过 sdk 获取所有消息
-	renderMessages(messages);
+	renderMessages(messages); // 渲染所有消息
-	scrollToBottom();
+	scrollToBottom(); // 滚动到底部
 }
 
+// 更新消息。入参是消息id和消息内容
 function updateMessage(id, message) {
-	if ($(`#message-assistant-${id}`).length === 0) {
+	if ($(`#message-assistant-${id}`).length === 0) { // 如果消息不存在，则返回
 		return;
 	}
-	$(`#message-assistant-${id}`).text("assistant: " + message);
+	$(`#message-assistant-${id}`).text("assistant: " + message); // 更新消息内容
-	scrollToBottom();
+	scrollToBottom(); // 滚动到底部
 }
 
+// 添加消息。入参是消息角色和消息内容
 function addMessage(role, message, id = null) {
-	const _id = id || Date.now();
+	const _id = id || Date.now(); // 如果消息id不存在，则生成一个唯一id
 	$("#messages").append(
-		`<div id="message-${role}-${_id}" class="message ${role === "user" ? "user" : "assistant"}">${role}: ${message}</div>`,
+		`<div id="message-${role}-${_id}" class="message ${role === "user" ? "user" : "assistant"}">${role}: ${message}</div>`, // 添加消息
 	);
 }
 
@@ -64,28 +69,32 @@ function scrollToBottom() {
 	);
 }
 
+// 渲染消息。入参是消息列表
 function renderMessages(messages) {
 	// console.log("messages", messages);
 	messages.forEach((message) => {
+		// 添加消息
 		addMessage(message.role, message.content, message.id);
 	});
 }
 
+// 发送消息。点击发送按钮时，获取用户输入，并发送消息
 $("#send").click(async () => {
-	const query = $("#input").val();
+	const query = $("#input").val(); // 获取用户输入
-	console.log("query", query);
+	if (!query) { // 如果用户输入为空，则返回
-	if (!query) {
 		return;
 	}
-	$("#input").val("");
+	$("#input").val(""); // 清空用户输入
-	addMessage("user", query, Date.now());
+	addMessage("user", query, Date.now()); // 添加用户消息
-	await send(query);
+	await send(query); // 发送消息
 });
 
-$("#stop").click(stop);
+$("#stop").click(stop); // 点击停止按钮时，停止发送消息
 
+
+// 初始化。初始化幕间官方SDK
 (async () => {
 	await mujianSdk.init().then(async () => {
-		await renderAllMessages();
+		await renderAllMessages(); // 渲染所有消息
 	});
 })();