diff --git a/assets/css/chat.css b/assets/css/chat.css index 4208333..122f7a3 100644 --- a/assets/css/chat.css +++ b/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; - width: 90%; - border: 1px solid #ccc; - border-radius: 5px; - } +/* 输入框 */ +#input { + margin-bottom: 10px; + height: 50px; + width: 90%; + border: 1px solid #ccc; + border-radius: 5px; } \ No newline at end of file diff --git a/assets/js/chat.js b/assets/js/chat.js index 504a52f..a5083a3 100644 --- a/assets/js/chat.js +++ b/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); - startLoading(id); - await mujianSdk.ai.chat.complete( + addMessage("assistant", "等待回复中...", id); // 添加一个占位的AI消息。用于后续刷返回文字 + startLoading(id); // 给消息添加loading状态 + await mujianSdk.ai.chat.complete( // 调用 mujian sdk 发送请求 query, (res) => { - updateMessage(id, res.fullContent); - if (res.isFinished) { - stopLoading(id); + updateMessage(id, res.fullContent); // 流式实时更新消息 + if (res.isFinished) { // 如果流式完成结束,则停止loading状态 + 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(); - renderMessages(messages); - scrollToBottom(); + const messages = await mujianSdk.ai.chat.message.getAll(); // 通过 sdk 获取所有消息 + renderMessages(messages); // 渲染所有消息 + 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); - scrollToBottom(); + $(`#message-assistant-${id}`).text("assistant: " + message); // 更新消息内容 + scrollToBottom(); // 滚动到底部 } +// 添加消息。入参是消息角色和消息内容 function addMessage(role, message, id = null) { - const _id = id || Date.now(); + const _id = id || Date.now(); // 如果消息id不存在,则生成一个唯一id $("#messages").append( - `
${role}: ${message}
`, + `
${role}: ${message}
`, // 添加消息 ); } @@ -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(); - console.log("query", query); - if (!query) { + const query = $("#input").val(); // 获取用户输入 + if (!query) { // 如果用户输入为空,则返回 return; } - $("#input").val(""); - addMessage("user", query, Date.now()); - await send(query); + $("#input").val(""); // 清空用户输入 + addMessage("user", query, Date.now()); // 添加用户消息 + await send(query); // 发送消息 }); -$("#stop").click(stop); +$("#stop").click(stop); // 点击停止按钮时,停止发送消息 + +// 初始化。初始化幕间官方SDK (async () => { await mujianSdk.init().then(async () => { - await renderAllMessages(); + await renderAllMessages(); // 渲染所有消息 }); })();