diff --git a/css/chat.css b/css/chat.css
index 4ebb936..8f1eccc 100644
--- a/css/chat.css
+++ b/css/chat.css
@@ -114,6 +114,18 @@ button:hover {
background-color: #0056b3;
}
+.typing {
+ color: #aaa;
+ font-style: italic;
+ animation: blink 1s steps(1) infinite;
+}
+
+@keyframes blink {
+ 50% {
+ opacity: 0.3;
+ }
+}
+
@keyframes slideUp {
from {
transform: translateY(100%);
diff --git a/javascape/ai_api.js b/javascape/ai_api.js
index ee5ad84..cc65971 100644
--- a/javascape/ai_api.js
+++ b/javascape/ai_api.js
@@ -4,58 +4,98 @@ const API_KEY = 'sk-or-v1-4915a672258dc64f8d553da4df271fce635b6cdf86b296d45ccbde
const API_URL = 'https://openrouter.ai/api/v1/chat/completions';
let messages = [];
-function appendMessage(content, sender, isMarkdown = false) {
- const chatContainer = document.getElementById('chatContainer');
- const messageDiv = document.createElement('div');
- messageDiv.classList.add('message', sender);
+// 逐字输出 Markdown 并渲染
+async function typeMarkdownEffect(fullText, container) {
+ let currentText = '';
+ const length = fullText.length;
+ const delay = Math.max(5, 40 - Math.min(length / 1.5, 35)); // 根据长度自动调整速度
- if (isMarkdown) {
- // 将 Markdown 转为 HTML 并清理
- const html = DOMPurify.sanitize(marked.parse(content));
- messageDiv.innerHTML = html;
- } else {
- messageDiv.textContent = content;
- }
+ for (let i = 0; i < length; i++) {
+ currentText += fullText[i];
+ const sanitizedHtml = DOMPurify.sanitize(marked.parse(currentText));
+ container.innerHTML = sanitizedHtml;
- chatContainer.appendChild(messageDiv);
- chatContainer.scrollTop = chatContainer.scrollHeight;
+ // 滚动到底部
+ container.parentElement.scrollTop = container.parentElement.scrollHeight;
+
+ await new Promise(resolve => setTimeout(resolve, delay));
+ }
}
+// 修改后的 appendMessage:支持逐字输出 + Markdown
+function appendMessage(content, sender, isMarkdown = false, withTyping = false) {
+ const chatContainer = document.getElementById('chatContainer');
+ const messageDiv = document.createElement('div');
+ messageDiv.classList.add('message', sender);
+
+ chatContainer.appendChild(messageDiv);
+ chatContainer.scrollTop = chatContainer.scrollHeight;
+
+ // 处理 AI 打字效果
+ if (isMarkdown && sender === 'bot' && withTyping) {
+ // 先显示“正在输入中...”提示
+ messageDiv.innerHTML = `正在输入中...`;
+
+ // 稍等一下再逐字渲染(比如 50ms)
+ setTimeout(() => {
+ typeMarkdownEffect(content, messageDiv);
+ }, 50);
+
+ } else if (isMarkdown) {
+ const html = DOMPurify.sanitize(marked.parse(content));
+ messageDiv.innerHTML = html;
+ } else {
+ messageDiv.textContent = content;
+ }
+}
+
+// 发送消息(主函数)
async function sendMessage() {
- const inputElem = document.getElementById('userInput');
- const userMessage = inputElem.value.trim();
- if (!userMessage) return;
+ const inputElem = document.getElementById('userInput');
+ const userMessage = inputElem.value.trim();
+ if (!userMessage) return;
- appendMessage(userMessage, 'user');
- messages.push({ role: 'user', content: userMessage });
- inputElem.value = '';
+ appendMessage(userMessage, 'user');
+ messages.push({ role: 'user', content: userMessage });
+ inputElem.value = '';
- const payload = {
- model: 'deepseek/deepseek-chat-v3-0324:free',
- messages: messages
- };
+ // 👉 提前显示“正在输入中...”并保存 messageDiv 元素引用
+ const chatContainer = document.getElementById('chatContainer');
+ const botMessageDiv = document.createElement('div');
+ botMessageDiv.classList.add('message', 'bot');
+ botMessageDiv.innerHTML = `正在输入中...`;
+ chatContainer.appendChild(botMessageDiv);
+ chatContainer.scrollTop = chatContainer.scrollHeight;
- try {
- const response = await fetch(API_URL, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- 'Authorization': 'Bearer ' + API_KEY
- },
- body: JSON.stringify(payload)
- });
+ const payload = {
+ //model: 'deepseek/deepseek-r1:free',
+ model: 'deepseek/deepseek-chat-v3-0324:free',
+ messages: messages
+ };
- const data = await response.json();
+ try {
+ const response = await fetch(API_URL, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': 'Bearer ' + API_KEY
+ },
+ body: JSON.stringify(payload)
+ });
- if (data.choices && data.choices.length > 0) {
- const botMessage = data.choices[0].message.content;
- appendMessage(botMessage, 'bot', true); // 这里启用 Markdown 渲染
- messages.push({ role: 'assistant', content: botMessage });
- } else {
- appendMessage('没有收到有效响应,请检查 API 设置。', 'bot');
- }
- } catch (error) {
- console.error('请求错误:', error);
- appendMessage('请求出错:' + error.message, 'bot');
+ const data = await response.json();
+
+ if (data.choices && data.choices.length > 0) {
+ const botMessage = data.choices[0].message.content;
+
+ // ✅ 拿到内容后替换 messageDiv 的内容,逐字打字渲染
+ typeMarkdownEffect(botMessage, botMessageDiv);
+ messages.push({ role: 'assistant', content: botMessage });
+ } else {
+ botMessageDiv.textContent = '没有收到有效响应,请检查 API 设置。';
}
+ } catch (error) {
+ console.error('请求错误:', error);
+ botMessageDiv.textContent = '请求出错:' + error.message;
+ }
}
\ No newline at end of file