feat: Markdown格式显示 + 重新生成 + 删除功能

- 使用 marked.js 渲染 Markdown 格式
- AI消息添加重新生成按钮（刷新图标）
- 用户和AI消息都可删除
- 删除AI消息时同时删除对应的用户消息
- 删除用户消息时同时删除对应的AI回复
- 消息操作按钮hover时显示
- 优化Markdown样式（标题、列表、代码块、表格等）

works/ai-chat-app/www/app.js

@@ -69,6 +69,12 @@ async function sendMessage() {
   userInput.value = '';
   autoResize(userInput);
 
+  // 调用流式生成
+  await streamGenerate(messages.length - 1);
+}
+
+// 流式生成 AI 回复
+async function streamGenerate(userMsgIndex) {
   // 显示加载状态
   isLoading = true;
   sendBtn.disabled = true;
@@ -98,7 +104,7 @@ async function sendMessage() {
           content: m.content
         })),
         max_tokens: CONFIG.maxTokens,
-        stream: true  // 开启流式输出
+        stream: true
       })
     });
 
@@ -119,7 +125,7 @@ async function sendMessage() {
       
       // 解析 SSE 数据
       const lines = buffer.split('\n');
-      buffer = lines.pop() || '';  // 保留未完成的行
+      buffer = lines.pop() || '';
 
       for (const line of lines) {
         if (line.startsWith('data: ')) {
@@ -129,64 +135,124 @@ async function sendMessage() {
           try {
             const data = JSON.parse(jsonStr);
             if (data.choices && data.choices[0]?.delta?.content) {
-              // 追加内容
               messages[aiMessageIndex].content += data.choices[0].delta.content;
-              
+              contentEl.innerHTML = renderMarkdown(messages[aiMessageIndex].content) + '<span class="streaming-cursor">▌</span>';
-              // 更新显示（带光标）
-              contentEl.innerHTML = formatContent(messages[aiMessageIndex].content) + '<span class="streaming-cursor">▌</span>';
               scrollToBottom();
             }
-          } catch (e) {
+          } catch (e) {}
-            // 忽略解析错误
-          }
         }
       }
     }
 
     // 完成，移除光标
-    contentEl.innerHTML = formatContent(messages[aiMessageIndex].content);
+    contentEl.innerHTML = renderMarkdown(messages[aiMessageIndex].content);
 
   } catch (error) {
     console.error('Error:', error);
     messages[aiMessageIndex].content = `抱歉，出现了错误：${error.message}\n\n请检查网络连接后重试。`;
-    contentEl.innerHTML = formatContent(messages[aiMessageIndex].content);
+    contentEl.innerHTML = renderMarkdown(messages[aiMessageIndex].content);
   } finally {
     isLoading = false;
     sendBtn.disabled = false;
     saveHistory();
+    renderMessages();  // 重新渲染显示操作按钮
+  }
+}
+
+// 重新生成 AI 回复
+async function regenerate(index) {
+  if (isLoading || index < 1) return;
+  
+  // 找到对应的用户消息（AI消息前一条）
+  const userMsgIndex = index - 1;
+  if (messages[userMsgIndex].role !== 'user') return;
+  
+  // 删除当前 AI 回复
+  messages.splice(index, 1);
+  
+  // 重新生成
+  await streamGenerate(userMsgIndex);
+}
+
+// 删除消息
+function deleteMessage(index) {
+  if (isLoading) return;
+  
+  const msg = messages[index];
+  
+  if (msg.role === 'assistant') {
+    // 删除 AI 消息时，同时删除前一条用户消息
+    if (index > 0 && messages[index - 1].role === 'user') {
+      messages.splice(index - 1, 2);  // 删除两条
+    } else {
+      messages.splice(index, 1);
+    }
+  } else {
+    // 删除用户消息时，同时删除后一条 AI 消息
+    if (index < messages.length - 1 && messages[index + 1].role === 'assistant') {
+      messages.splice(index, 2);
+    } else {
+      messages.splice(index, 1);
+    }
+  }
+  
+  renderMessages();
+  saveHistory();
+  
+  // 如果没有消息了，显示欢迎界面
+  if (messages.length === 0) {
+    welcome.style.display = 'block';
   }
 }
 
 // 渲染消息
 function renderMessages() {
-  messagesDiv.innerHTML = messages.map(msg => {
+  messagesDiv.innerHTML = messages.map((msg, index) => {
     const isUser = msg.role === 'user';
     const avatar = isUser ? '👤' : '🤖';
-    const content = formatContent(msg.content);
+    const content = renderMarkdown(msg.content);
+    
+    // 操作按钮
+    const actions = isUser 
+      ? `<div class="message-actions">
+          <button class="action-btn delete-btn" onclick="deleteMessage(${index})" title="删除">
+            <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
+          </button>
+        </div>`
+      : `<div class="message-actions">
+          <button class="action-btn regenerate-btn" onclick="regenerate(${index})" title="重新生成">
+            <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
+          </button>
+          <button class="action-btn delete-btn" onclick="deleteMessage(${index})" title="删除">
+            <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
+          </button>
+        </div>`;
     
     return `
-      <div class="message ${msg.role}">
+      <div class="message ${msg.role}" data-index="${index}">
         <div class="message-avatar">${avatar}</div>
+        <div class="message-body">
           <div class="message-content">${content}</div>
+          ${actions}
+        </div>
       </div>
     `;
   }).join('');
 
-  // 滚动到底部
   scrollToBottom();
 }
 
-// 格式化内容（简单处理代码块）
+// 渲染 Markdown
-function formatContent(text) {
+function renderMarkdown(text) {
   if (!text) return '';
   
-  // 处理代码块
+  // 配置 marked
-  text = text.replace(/```(\w+)?\n([\s\S]*?)```/g, '<pre><code>$2</code></pre>');
+  marked.setOptions({
-  // 处理行内代码
+    breaks: true,      // 支持 GFM 换行
-  text = text.replace(/`([^`]+)`/g, '<code>$1</code>');
+    gfm: true          // GitHub Flavored Markdown
-  // 处理换行
+  });
-  text = text.replace(/\n/g, '<br>');
+  
-  return text;
+  return marked.parse(text);
 }
 
 // 滚动到底部

works/ai-chat-app/www/index.html

@@ -55,6 +55,7 @@
     </div>
   </div>
 
+  <script src="marked.min.js"></script>
   <script src="app.js"></script>
 </body>
 </html>

works/ai-chat-app/www/style.css

@@ -172,11 +172,9 @@ body {
 }
 
 .message-content {
-  max-width: 75%;
   padding: 12px 16px;
   border-radius: 18px;
   word-wrap: break-word;
-  white-space: pre-wrap;
 }
 
 .message.user .message-content {
@@ -214,6 +212,10 @@ body {
   padding: 0;
 }
 
+.message.user .message-content pre {
+  background: rgba(0,0,0,0.2);
+}
+
 /* 加载动画 */
 .typing-indicator {
   display: flex;
@@ -297,6 +299,121 @@ body {
   padding: 8px;
 }
 
+/* 消息结构 */
+.message-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 75%;
+}
+
+.message.user .message-body {
+  align-items: flex-end;
+}
+
+.message.assistant .message-body {
+  align-items: flex-start;
+}
+
+/* 消息操作按钮 */
+.message-actions {
+  display: flex;
+  gap: 6px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.message:hover .message-actions {
+  opacity: 1;
+}
+
+.action-btn {
+  background: transparent;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: 4px 6px;
+  color: var(--text-light);
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.action-btn:hover {
+  background: var(--border-color);
+  color: var(--text-color);
+}
+
+.action-btn.delete-btn:hover {
+  background: #fee2e2;
+  border-color: #e53e3e;
+  color: #e53e3e;
+}
+
+.action-btn.regenerate-btn:hover {
+  background: #dbeafe;
+  border-color: var(--primary);
+  color: var(--primary);
+}
+
+/* Markdown 内容样式 */
+.message-content h1, .message-content h2, .message-content h3 {
+  margin: 12px 0 8px;
+  font-weight: 600;
+}
+
+.message-content h1 { font-size: 1.3em; }
+.message-content h2 { font-size: 1.2em; }
+.message-content h3 { font-size: 1.1em; }
+
+.message-content ul, .message-content ol {
+  margin: 8px 0;
+  padding-left: 20px;
+}
+
+.message-content li {
+  margin: 4px 0;
+}
+
+.message-content strong {
+  font-weight: 600;
+}
+
+.message-content em {
+  font-style: italic;
+}
+
+.message-content a {
+  color: var(--primary);
+  text-decoration: underline;
+}
+
+.message-content blockquote {
+  margin: 8px 0;
+  padding: 8px 12px;
+  border-left: 3px solid var(--primary);
+  background: rgba(102, 126, 234, 0.1);
+  border-radius: 4px;
+}
+
+.message-content table {
+  margin: 8px 0;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.message-content th, .message-content td {
+  border: 1px solid var(--border-color);
+  padding: 6px 10px;
+  text-align: left;
+}
+
+.message-content th {
+  background: var(--bg-color);
+  font-weight: 600;
+}
+
 /* 流式输出光标 */
 .streaming-cursor {
   animation: blink 1s infinite;