优化Ai响应样式

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%);

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) {
+// 逐字输出 Markdown 并渲染
-    const chatContainer = document.getElementById('chatContainer');
+async function typeMarkdownEffect(fullText, container) {
-    const messageDiv = document.createElement('div');
+  let currentText = '';
-    messageDiv.classList.add('message', sender);
+  const length = fullText.length;
+  const delay = Math.max(5, 40 - Math.min(length / 1.5, 35)); // 根据长度自动调整速度
 
-    if (isMarkdown) {
+  for (let i = 0; i < length; i++) {
-      // 将 Markdown 转为 HTML 并清理
+    currentText += fullText[i];
-      const html = DOMPurify.sanitize(marked.parse(content));
+    const sanitizedHtml = DOMPurify.sanitize(marked.parse(currentText));
-      messageDiv.innerHTML = html;
+    container.innerHTML = sanitizedHtml;
-    } else {
-      messageDiv.textContent = content;
-    }
 
-    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 = `<em class="typing">正在输入中...</em>`;
+
+    // 稍等一下再逐字渲染（比如 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 inputElem = document.getElementById('userInput');
-    const userMessage = inputElem.value.trim();
+  const userMessage = inputElem.value.trim();
-    if (!userMessage) return;
+  if (!userMessage) return;
 
-    appendMessage(userMessage, 'user');
+  appendMessage(userMessage, 'user');
-    messages.push({ role: 'user', content: userMessage });
+  messages.push({ role: 'user', content: userMessage });
-    inputElem.value = '';
+  inputElem.value = '';
 
-    const payload = {
+  // 👉 提前显示“正在输入中...”并保存 messageDiv 元素引用
-      model: 'deepseek/deepseek-chat-v3-0324:free',
+  const chatContainer = document.getElementById('chatContainer');
-      messages: messages
+  const botMessageDiv = document.createElement('div');
-    };
+  botMessageDiv.classList.add('message', 'bot');
+  botMessageDiv.innerHTML = `<em class="typing">正在输入中...</em>`;
+  chatContainer.appendChild(botMessageDiv);
+  chatContainer.scrollTop = chatContainer.scrollHeight;
 
-    try {
+  const payload = {
-      const response = await fetch(API_URL, {
+    //model: 'deepseek/deepseek-r1:free',
-        method: 'POST',
+    model: 'deepseek/deepseek-chat-v3-0324:free',
-        headers: {
+    messages: messages
-          'Content-Type': 'application/json',
+  };
-          'Authorization': 'Bearer ' + API_KEY
-        },
-        body: JSON.stringify(payload)
-      });
 
-      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 data = await response.json();
-        const botMessage = data.choices[0].message.content;
+
-        appendMessage(botMessage, 'bot', true); //  这里启用 Markdown 渲染
+    if (data.choices && data.choices.length > 0) {
-        messages.push({ role: 'assistant', content: botMessage });
+      const botMessage = data.choices[0].message.content;
-      } else {
+
-        appendMessage('没有收到有效响应，请检查 API 设置。', 'bot');
+      // ✅ 拿到内容后替换 messageDiv 的内容，逐字打字渲染
-      }
+      typeMarkdownEffect(botMessage, botMessageDiv);
-    } catch (error) {
+      messages.push({ role: 'assistant', content: botMessage });
-      console.error('请求错误：', error);
+    } else {
-      appendMessage('请求出错：' + error.message, 'bot');
+      botMessageDiv.textContent = '没有收到有效响应，请检查 API 设置。';
     }
+  } catch (error) {
+    console.error('请求错误：', error);
+    botMessageDiv.textContent = '请求出错：' + error.message;
+  }
 }