Release v0.2.21303

src/app/components/conversation.component.html

@@ -9,7 +9,7 @@
               <span class="message-time">{{ message.timestamp | date:'HH:mm' }}</span>
             </div>
             <div class="message-content">
-              <div [innerHTML]="formatContent(message.content)"></div>
+              <div [innerHTML]="message.content | markdown"></div>
               <mat-spinner *ngIf="message.loading" diameter="20" class="loading-spinner"></mat-spinner>
             </div>
           </div>

src/app/components/conversation.component.scss

@@ -99,3 +99,138 @@
       color: #666;
       background: #f5f5f5;
     }
+
+    /* 可折叠标签样式 */
+    details {
+      margin: 8px 0;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+
+    .thinking-details {
+      border: 1px solid #e3f2fd;
+      background-color: #f5fbff;
+    }
+
+    .tool-details {
+      border: 1px solid #f3e5f5;
+      background-color: #faf5ff;
+    }
+
+    .thinking-summary,
+    .tool-summary {
+      padding: 8px 12px;
+      cursor: pointer;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      user-select: none;
+    }
+
+    .thinking-summary {
+      color: #1565c0;
+      background-color: #e3f2fd;
+    }
+
+    .tool-summary {
+      color: #7b1fa2;
+      background-color: #f3e5f5;
+    }
+
+    /* details元素内的内容样式 */
+    .thinking-details > *:not(summary),
+    .tool-details > *:not(summary) {
+      padding: 12px;
+      border-top: 1px solid rgba(0, 0, 0, 0.05);
+    }
+
+    .thinking-details > *:not(summary) {
+      background-color: #f5fbff;
+    }
+
+    .tool-details > *:not(summary) {
+      background-color: #faf5ff;
+    }
+
+    /* 标签样式（非折叠） */
+    .thinking-tag,
+    .tool-tag,
+    .error-tag {
+      display: inline-block;
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 500;
+      margin-right: 8px;
+    }
+
+    .thinking-tag {
+      background-color: #e3f2fd;
+      color: #1565c0;
+    }
+
+    .tool-tag {
+      background-color: #f3e5f5;
+      color: #7b1fa2;
+    }
+
+    .error-tag {
+      background-color: #ffebee;
+      color: #c62828;
+    }
+
+    /* 确保markdown内容样式正确 */
+    .message-content :deep(*) {
+      margin-top: 8px;
+      margin-bottom: 8px;
+    }
+
+    .message-content :deep(ul),
+    .message-content :deep(ol) {
+      padding-left: 24px;
+    }
+
+    .message-content :deep(code) {
+      background-color: #f5f5f5;
+      padding: 2px 4px;
+      border-radius: 3px;
+      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+      font-size: 0.9em;
+    }
+
+    .message-content :deep(pre) {
+      margin: 12px 0;
+    }
+
+    /* 自定义details元素图标 */
+    .message-content :deep(details) {
+      position: relative;
+    }
+
+    .message-content :deep(details summary) {
+      list-style: none;
+    }
+
+    .message-content :deep(details summary::-webkit-details-marker) {
+      display: none;
+    }
+
+    .message-content :deep(details summary::before) {
+      content: '▶';
+      font-size: 10px;
+      margin-right: 6px;
+      transition: transform 0.2s;
+      display: inline-block;
+    }
+
+    .message-content :deep(details[open] summary::before) {
+      transform: rotate(90deg);
+    }
+
+    /* 确保标签内的内容正确显示 */
+    .message-content :deep(.thinking-details),
+    .message-content :deep(.tool-details) {
+      white-space: normal;
+      word-break: break-word;
+    }

src/app/components/conversation.component.ts

@@ -15,6 +15,7 @@ import { EventService } from '../services/event.service';
 import { ChatMessage } from '../models/conversation.model';
 import { Session } from '../models/session.model';
 import { GlobalEvent, MessageUpdatedEvent, MessagePartUpdatedEvent, SessionUpdatedEvent } from '../models/event.model';
+import { MarkdownPipe } from '../shared/pipes/markdown.pipe';
 
 @Component({
   selector: 'app-conversation',
@@ -27,7 +28,8 @@ import { GlobalEvent, MessageUpdatedEvent, MessagePartUpdatedEvent, SessionUpdat
     MatInputModule,
     MatFormFieldModule,
     MatProgressSpinnerModule,
-    FormsModule
+    FormsModule,
+    MarkdownPipe
   ],
   templateUrl: './conversation.component.html',
   styleUrl: './conversation.component.scss',
@@ -530,10 +532,7 @@ export class ConversationComponent implements OnInit, OnDestroy, AfterViewChecke
     this.focusInput();
   }
 
-  formatContent(content: string): string {
-    // 简单的格式化，可扩展为Markdown渲染
-    return content.replace(/\n/g, '<br>');
-  }
+
 
   private scrollToBottom() {
     try {

src/app/shared/pipes/markdown.pipe.ts

@@ -0,0 +1,110 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { marked } from 'marked';
+import Prism from 'prismjs';
+
+// 导入需要的语言支持
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-go';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-csharp';
+import 'prismjs/components/prism-php';
+import 'prismjs/components/prism-ruby';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-yaml';
+import 'prismjs/components/prism-markdown';
+
+@Pipe({
+  name: 'markdown',
+  standalone: true
+})
+export class MarkdownPipe implements PipeTransform {
+  constructor(private sanitizer: DomSanitizer) {}
+
+  transform(value: string): SafeHtml {
+    if (!value) {
+      return '';
+    }
+
+    // 预处理：将标签替换为美化版本
+    const processedContent = this.preprocessTags(value);
+    
+    // 配置marked（使用基本配置）
+    marked.setOptions({
+      gfm: true,
+      breaks: true
+    });
+
+    // 解析markdown
+    let html = marked.parse(processedContent) as string;
+    
+    // 后处理：添加代码高亮和样式
+    html = this.postprocessCodeBlocks(html);
+    
+    // 安全注入HTML
+    return this.sanitizer.bypassSecurityTrustHtml(html);
+  }
+
+  /**
+   * 预处理：将文本标签替换为美化版本和可折叠区域
+   */
+  private preprocessTags(content: string): string {
+    // 处理 [思考] 标签及其内容
+    content = this.processTagWithContent(content, '思考', '💭', 'thinking');
+    
+    // 处理 [工具] 标签及其内容
+    content = this.processTagWithContent(content, '工具', '🛠️', 'tool');
+    
+    // 处理 [错误] 标签
+    content = content.replace(/\[错误\]/g, '<span class="error-tag">❌ 错误</span>');
+    
+    return content;
+  }
+
+  /**
+   * 处理标签及其后的内容，转换为可折叠区域
+   */
+  private processTagWithContent(content: string, tagName: string, emoji: string, cssClass: string): string {
+    // 正则表达式匹配 [标签] 及其后的内容（直到下一个标签或字符串结束）
+    const pattern = new RegExp(`\\[${tagName}\\]\\s*([\\s\\S]*?)(?=\\n\\s*\\[|$)`, 'g');
+    
+    return content.replace(pattern, (match, tagContent) => {
+      // 清理内容前后的空白
+      const trimmedContent = tagContent.trim();
+      if (!trimmedContent) {
+        return `<details class="${cssClass}-details"><summary class="${cssClass}-summary">${emoji} ${tagName}</summary></details>`;
+      }
+      
+      return `<details class="${cssClass}-details" ${cssClass === 'thinking' || cssClass === 'tool' ? '' : 'open'}><summary class="${cssClass}-summary">${emoji} ${tagName}</summary>${trimmedContent}</details>`;
+    });
+  }
+
+  /**
+   * 后处理：添加代码高亮和样式
+   */
+  private postprocessCodeBlocks(html: string): string {
+    // 使用正则表达式匹配代码块
+    const codeBlockRegex = /<pre><code\s*(?:class="language-([^"]+)")?>([\s\S]*?)<\/code><\/pre>/gi;
+    
+    html = html.replace(codeBlockRegex, (match, lang, code) => {
+      const language = lang || 'plaintext';
+      
+      try {
+        // 使用Prism高亮代码
+        const highlighted = Prism.highlight(code, Prism.languages[language] || Prism.languages['plaintext'], language);
+        return `<pre class="prism-code language-${language}"><code class="language-${language}">${highlighted}</code></pre>`;
+      } catch (e) {
+        // 如果高亮失败，返回原始代码块
+        return `<pre class="prism-code language-${language}"><code class="language-${language}">${code}</code></pre>`;
+      }
+    });
+    
+    return html;
+  }
+}