Release v0.2.21502

src/app/modules/editor/editor.component.html

@@ -56,33 +56,7 @@
       <!-- 消息容器 -->
       <div class="messages-container" #messagesContainer>
         @for (message of messages; track message.id) {
-          <div class="message-wrapper" [class.user-message]="message.role === 'user'" [class.ai-message]="message.role === 'assistant'">
-            <div class="message-bubble">
-              @if (message.role === 'user') {
-                <div class="message-header">
-                  <mat-icon class="message-avatar">person</mat-icon>
-                  <span class="message-role">用户</span>
-                  <span class="message-time">{{ message.timestamp | date:'HH:mm' }}</span>
-                </div>
-              } @else {
-                <div class="message-header">
-                  <mat-icon class="message-avatar">smart_toy</mat-icon>
-                  <span class="message-role">AI助手</span>
-                  <span class="message-time">{{ message.timestamp | date:'HH:mm' }}</span>
-                </div>
-              }
-              
-               <div class="message-content">
-                 @if (message.loading) {
-                   <div class="loading-indicator">
-                     <mat-spinner diameter="16"></mat-spinner>
-                     <span>思考中...</span>
-                   </div>
-                 }
-                 <div [innerHTML]="message.content | markdown"></div>
-               </div>
-            </div>
-          </div>
+          <app-chat-message [message]="message"></app-chat-message>
         }
         
         @if (messages.length === 0) {

src/app/modules/editor/editor.component.scss

@@ -5,48 +5,44 @@
   background-color: #f5f5f5;
 }
 
-.editor-toolbar {
-  flex-shrink: 0;
+.toolbar-title {
+  font-size: 18px;
+  font-weight: 500;
+  margin-left: 12px;
   
-  .toolbar-title {
-    font-size: 18px;
-    font-weight: 500;
-    margin-left: 12px;
-    
-    .project-subtitle {
-      margin-left: 8px;
-      font-size: 14px;
-      opacity: 0.8;
-      font-weight: normal;
-    }
+  .project-subtitle {
+    margin-left: 8px;
+    font-size: 14px;
+    opacity: 0.8;
+    font-weight: normal;
   }
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+
+.toolbar-spinner {
+  margin-right: 8px;
+}
+
+.sse-status {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-right: 8px;
+  font-size: 12px;
   
-  .spacer {
-    flex: 1 1 auto;
+  &.connected {
+    color: #4caf50;
   }
   
-  .toolbar-spinner {
-    margin-right: 8px;
+  &.disconnected {
+    color: #f44336;
   }
   
-  .sse-status {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    margin-right: 8px;
-    font-size: 12px;
-    
-    &.connected {
-      color: #4caf50;
-    }
-    
-    &.disconnected {
-      color: #f44336;
-    }
-    
-    .sse-text {
-      margin-left: 4px;
-    }
+  .sse-text {
+    margin-left: 4px;
   }
 }
 
@@ -159,87 +155,7 @@
   }
 }
 
-.message-wrapper {
-  display: flex;
-  max-width: 80%;
-  
-  &.user-message {
-    align-self: flex-end;
-    
-    .message-bubble {
-      background-color: #1976d2;
-      color: white;
-      border-radius: 18px 18px 4px 18px;
-    }
-    
-    .message-header {
-      color: rgba(255, 255, 255, 0.8);
-    }
-  }
-  
-  &.ai-message {
-    align-self: flex-start;
-    
-    .message-bubble {
-      background-color: white;
-      color: #333;
-      border-radius: 18px 18px 18px 4px;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    }
-    
-    .message-header {
-      color: #666;
-    }
-  }
-}
-
-.message-bubble {
-  padding: 12px 16px;
-  word-wrap: break-word;
-  word-break: break-word;
-  line-height: 1.5;
-}
-
-.message-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-  font-size: 12px;
-  
-  .message-avatar {
-    font-size: 16px;
-    height: 16px;
-    width: 16px;
-  }
-  
-  .message-role {
-    font-weight: 500;
-    flex: 1;
-  }
-  
-  .message-time {
-    opacity: 0.7;
-  }
-}
 
-.message-content {
-  font-size: 14px;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  
-  .loading-indicator {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 8px;
-    color: #666;
-    
-    span {
-      font-size: 12px;
-    }
-  }
-}
 
 .input-container {
   flex-shrink: 0;
@@ -311,211 +227,3 @@
   background: #a8a8a8;
 }
 
-/* Markdown渲染样式 */
-.message-content {
-  /* 可折叠标签样式 */
-  ::ng-deep details {
-    margin: 8px 0;
-    border-radius: 8px;
-    overflow: hidden;
-  }
-
-  ::ng-deep .thinking-details {
-    border: 2px solid #2196f3;
-    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
-  }
-
-  ::ng-deep .tool-details {
-    border: 2px solid #9c27b0;
-    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.2);
-  }
-
-  ::ng-deep .thinking-summary,
-  ::ng-deep .tool-summary {
-    padding: 8px 12px;
-    cursor: pointer;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    user-select: none;
-  }
-
-  ::ng-deep .thinking-summary {
-    color: #0d47a1;
-    background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
-    border-bottom: 1px solid #64b5f6;
-    font-weight: 600;
-  }
-
-  ::ng-deep .tool-summary {
-    color: #4a148c;
-    background: linear-gradient(135deg, #e1bee7 0%, #ce93d8 100%);
-    border-bottom: 1px solid #ba68c8;
-    font-weight: 600;
-  }
-
-  /* details元素内的内容样式 */
-  ::ng-deep .thinking-details > *:not(summary),
-  ::ng-deep .tool-details > *:not(summary) {
-    padding: 12px;
-    border-top: 1px solid rgba(0, 0, 0, 0.05);
-  }
-
-  ::ng-deep .thinking-details > *:not(summary) {
-    background-color: #f0f7ff;
-    color: #0d47a1;
-    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-    font-size: 0.95em;
-    line-height: 1.5;
-  }
-
-  ::ng-deep .tool-details > *:not(summary) {
-    background-color: #f5f0ff;
-    color: #4a148c;
-    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-    font-size: 0.95em;
-    line-height: 1.5;
-  }
-
-  /* 标签样式（非折叠） */
-  ::ng-deep .thinking-tag,
-  ::ng-deep .tool-tag,
-  ::ng-deep .error-tag {
-    display: inline-block;
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: 500;
-    margin-right: 8px;
-  }
-
-  ::ng-deep .thinking-tag {
-    background-color: #e3f2fd;
-    color: #1565c0;
-  }
-
-  ::ng-deep .tool-tag {
-    background-color: #f3e5f5;
-    color: #7b1fa2;
-  }
-
-  ::ng-deep .error-tag {
-    background-color: #ffebee;
-    color: #c62828;
-  }
-
-  /* Markdown内容样式 - 参考原版优化 */
-  ::ng-deep h1, 
-  ::ng-deep h2, 
-  ::ng-deep h3, 
-  ::ng-deep h4 {
-    margin-top: 1em;
-    margin-bottom: 0.5em;
-    color: #1976d2;
-  }
-  
-  ::ng-deep p {
-    margin: 0.5em 0;
-    line-height: 1.5;
-  }
-  
-  ::ng-deep code {
-    background: #f5f5f5;
-    padding: 2px 4px;
-    border-radius: 3px;
-    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-    font-size: 0.9em;
-  }
-  
-  ::ng-deep pre {
-    background: #1e1e1e;
-    color: #d4d4d4;
-    padding: 12px;
-    border-radius: 6px;
-    overflow: auto;
-    margin: 0.75em 0;
-    
-    code {
-      background: transparent;
-      padding: 0;
-      border-radius: 0;
-      font-size: 0.9em;
-      line-height: 1.5;
-    }
-  }
-  
-  ::ng-deep .prism-code {
-    margin: 0;
-    padding: 0;
-    font-size: 0.9em;
-    line-height: 1.5;
-  }
-  
-  ::ng-deep blockquote {
-    border-left: 3px solid #1976d2;
-    margin: 0.75em 0;
-    padding-left: 1em;
-    color: #666;
-    font-style: italic;
-  }
-  
-  ::ng-deep ul,
-  ::ng-deep ol {
-    padding-left: 1.5em;
-    margin: 0.5em 0;
-  }
-  
-  ::ng-deep table {
-    border-collapse: collapse;
-    width: 100%;
-    margin: 0.75em 0;
-    
-    th, td {
-      border: 1px solid #e0e0e0;
-      padding: 6px 10px;
-      text-align: left;
-    }
-    
-    th {
-      background: #f5f5f5;
-      font-weight: 600;
-    }
-  }
-
-  /* 自定义details元素图标 */
-  ::ng-deep details {
-    position: relative;
-  }
-
-  ::ng-deep details summary {
-    list-style: none;
-  }
-
-  ::ng-deep details summary::-webkit-details-marker {
-    display: none;
-  }
-
-  ::ng-deep details summary::before {
-    content: '▶';
-    font-size: 10px;
-    margin-right: 6px;
-    transition: transform 0.2s;
-    display: inline-block;
-  }
-
-  ::ng-deep details[open] summary::before {
-    transform: rotate(90deg);
-  }
-
-  /* 确保标签内的内容正确显示 */
-  ::ng-deep .thinking-details,
-  ::ng-deep .tool-details {
-    white-space: normal;
-    word-break: break-word;
-  }
-}

src/app/modules/editor/editor.component.ts

@@ -18,6 +18,7 @@ import { ChatMessage } from '../../core/models/conversation.model';
 import { Session } from '../../core/models/session.model';
 import { GlobalEvent, MessageUpdatedEvent, MessagePartUpdatedEvent } from '../../core/models/event.model';
 import { MarkdownPipe } from '../../shared/pipes/markdown.pipe';
+import { ChatMessageComponent } from '../../shared/components/chat-message/chat-message.component';
 
 @Component({
   selector: 'app-editor',
@@ -32,7 +33,7 @@ import { MarkdownPipe } from '../../shared/pipes/markdown.pipe';
     MatProgressSpinnerModule,
     MatToolbarModule,
     FormsModule,
-    MarkdownPipe
+    ChatMessageComponent
   ],
   templateUrl: './editor.component.html',
   styleUrl: './editor.component.scss',

src/app/shared/components/chat-message/chat-message.component.html

@@ -0,0 +1,25 @@
+<div class="chat-message-wrapper" [class.user-message]="message.role === 'user'" [class.ai-message]="message.role === 'assistant'">
+  <div class="chat-message-bubble">
+    @if (displayHeader) {
+      <div class="chat-message-header">
+        @if (displayAvatar) {
+          <mat-icon class="chat-message-avatar">{{ avatarIcon }}</mat-icon>
+        }
+        <span class="chat-message-role">{{ avatarLabel }}</span>
+        @if (displayTimestamp && formattedTimestamp) {
+          <span class="chat-message-time">{{ formattedTimestamp }}</span>
+        }
+      </div>
+    }
+    
+    <div class="chat-message-content">
+      @if (message.loading) {
+        <div class="chat-message-loading">
+          <mat-spinner diameter="16"></mat-spinner>
+          <span>思考中...</span>
+        </div>
+      }
+      <div [innerHTML]="message.content | markdown"></div>
+    </div>
+  </div>
+</div>

src/app/shared/components/chat-message/chat-message.component.scss

@@ -0,0 +1,348 @@
+/* ChatMessageComponent自包含样式系统 */
+/* 消除外部样式干扰，协调所有markdown元素 */
+
+.chat-message-wrapper {
+  display: flex;
+  width: 100%;  /* 改为100%，跟随父容器宽度 */
+  max-width: none;  /* 移除最大宽度限制 */
+  flex-shrink: 0;
+  align-self: flex-start;
+  margin-bottom: 16px;
+  
+  &.user-message {
+    .chat-message-bubble {
+      background-color: #1976d2 !important;
+      color: white !important;
+      border-radius: 18px 18px 4px 18px !important;
+    }
+    
+    .chat-message-header {
+      color: rgba(255, 255, 255, 0.8) !important;
+    }
+  }
+  
+  &.ai-message {
+    .chat-message-bubble {
+      background-color: white !important;
+      color: #333 !important;
+      border-radius: 18px 18px 18px 4px !important;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+    }
+    
+    .chat-message-header {
+      color: #666 !important;
+    }
+  }
+}
+
+.chat-message-bubble {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 12px 16px;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.chat-message-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  font-size: 12px;
+  
+  .chat-message-avatar {
+    font-size: 16px;
+    height: 16px;
+    width: 16px;
+  }
+  
+  .chat-message-role {
+    font-weight: 500;
+    flex: 1;
+  }
+  
+  .chat-message-time {
+    opacity: 0.7;
+  }
+}
+
+.chat-message-content {
+  font-size: 13px;
+  line-height: 1.3;
+  white-space: pre-wrap;
+  
+  .chat-message-loading {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+    color: #666;
+    
+    span {
+      font-size: 12px;
+    }
+  }
+  
+  /* ================================= */
+  /* 自包含Markdown样式系统            */
+  /* 协调所有元素间距，避免外部干扰    */
+  /* ================================= */
+  ::ng-deep {
+    /* 标题 - 统一间距管理 */
+    h1, h2, h3, h4, h5, h6 {
+      margin: 0.2em 0 0.1em 0;
+      padding: 0;
+      font-weight: 600;
+      color: #1976d2;
+      line-height: 1.3;
+    }
+    
+    h1 {
+      font-size: 1.4em;
+      margin-top: 0.3em;
+    }
+    
+    h2 {
+      font-size: 1.3em;
+    }
+    
+    h3 {
+      font-size: 1.2em;
+    }
+    
+    h4 {
+      font-size: 1.1em;
+    }
+    
+    h5 {
+      font-size: 1.05em;
+    }
+    
+    h6 {
+      font-size: 1em;
+      color: #666;
+    }
+    
+    /* 段落和文本 */
+    p {
+      margin: 0.1em 0;
+      line-height: 1.3;
+    }
+    
+    /* 标题后的段落更紧凑 */
+    h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
+      margin-top: 0.05em;
+    }
+    
+    /* 连续段落 */
+    p + p {
+      margin-top: 0.05em;
+    }
+    
+    /* 内联代码 - 针对AI消息和用户消息分别处理 */
+    :host-context(.ai-message) code:not(pre code),
+    .ai-message code:not(pre code) {
+      background: #f5f5f5;
+      padding: 2px 4px;
+      border-radius: 3px;
+      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+      font-size: 0.9em;
+      color: #d63384;
+    }
+    
+    :host-context(.user-message) code:not(pre code),
+    .user-message code:not(pre code) {
+      background: rgba(255, 255, 255, 0.2);
+      padding: 2px 4px;
+      border-radius: 3px;
+      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+      font-size: 0.9em;
+      color: white;
+    }
+    
+    /* 代码块 - 针对所有消息类型 */
+    pre {
+      background: #1e1e1e !important;
+      color: #d4d4d4 !important;
+      padding: 12px !important;
+      border-radius: 6px !important;
+      overflow-x: auto !important;
+      margin: 0.4em 0 !important;
+    }
+    
+    pre code {
+      background: transparent !important;
+      padding: 0 !important;
+      border-radius: 0 !important;
+      font-size: 0.9em !important;
+      line-height: 1.5 !important;
+      color: inherit !important;
+      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
+    }
+    
+    /* 引用块 - 针对不同消息类型 */
+    :host-context(.ai-message) blockquote,
+    .ai-message blockquote {
+      border-left: 3px solid #1976d2;
+      margin: 0.4em 0;
+      padding-left: 12px;
+      color: #666;
+      font-style: italic;
+    }
+    
+    :host-context(.user-message) blockquote,
+    .user-message blockquote {
+      border-left: 3px solid rgba(255, 255, 255, 0.5);
+      margin: 0.4em 0;
+      padding-left: 12px;
+      color: rgba(255, 255, 255, 0.9);
+      font-style: italic;
+    }
+    
+    /* 列表 */
+    ul, ol {
+      padding-left: 1.2em;
+      margin: 0.2em 0;
+    }
+    
+    li {
+      margin: 0.05em 0;
+      line-height: 1.3;
+    }
+    
+    /* 表格 */
+    table {
+      border-collapse: collapse;
+      width: 100%;
+      margin: 0.4em 0;
+      font-size: 0.9em;
+      
+      th, td {
+        border: 1px solid #e0e0e0;
+        padding: 4px 8px;
+        text-align: left;
+      }
+      
+      th {
+        background: #f5f5f5;
+        font-weight: 600;
+      }
+    }
+    
+    /* 图片 */
+    img {
+      max-width: 100%;
+      height: auto;
+      border-radius: 4px;
+      margin: 0.2em 0;
+    }
+    
+    /* 链接 - 针对不同消息类型 */
+    :host-context(.ai-message) a,
+    .ai-message a {
+      color: #1976d2;
+      text-decoration: none;
+      
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+    
+    :host-context(.user-message) a,
+    .user-message a {
+      color: white;
+      text-decoration: underline;
+      text-decoration-color: rgba(255, 255, 255, 0.5);
+      
+      &:hover {
+        text-decoration-color: white;
+      }
+    }
+    
+    /* 水平线 */
+    hr {
+      border: none;
+      border-top: 1px solid #e0e0e0;
+      margin: 0.4em 0;
+    }
+    
+    /* 思考部分样式 */
+    .thinking-container {
+      background-color: #f0f7ff;
+      border: 1px solid #bbdefb;
+      border-radius: 6px;
+      margin: 0.4em 0;
+      overflow: hidden;
+    }
+    
+    .thinking-container > strong {
+      display: block;
+      padding: 4px 8px;
+      background-color: #e3f2fd;
+      color: #0d47a1;
+      font-weight: 600;
+      font-size: 12px;
+      border-bottom: 1px solid #bbdefb;
+    }
+    
+    .thinking-body {
+      padding: 8px;
+      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+      font-size: 0.9em;
+      line-height: 1.4;
+      color: #0d47a1;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    
+    /* 工具部分样式 */
+    .tool-container {
+      background-color: #f5f0ff;
+      border: 1px solid #e1bee7;
+      border-radius: 6px;
+      margin: 0.4em 0;
+      overflow: hidden;
+    }
+    
+    .tool-container > strong {
+      display: block;
+      padding: 4px 8px;
+      background-color: #f3e5f5;
+      color: #7b1fa2;
+      font-weight: 600;
+      font-size: 12px;
+      border-bottom: 1px solid #e1bee7;
+    }
+    
+    .tool-body {
+      padding: 8px;
+      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+      font-size: 0.9em;
+      line-height: 1.4;
+      color: #4a148c;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    
+    /* 错误标签样式 */
+    .error-tag {
+      display: inline-block;
+      padding: 2px 5px;
+      border-radius: 3px;
+      font-size: 11px;
+      font-weight: 500;
+      margin-right: 4px;
+      background-color: #ffebee;
+      color: #c62828;
+    }
+    
+    /* 文本样式 */
+    strong {
+      font-weight: 600;
+    }
+    
+    em {
+      font-style: italic;
+    }
+  }
+}

src/app/shared/components/chat-message/chat-message.component.ts

@@ -0,0 +1,75 @@
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MarkdownPipe } from '../../pipes/markdown.pipe';
+
+export interface ChatMessageInput {
+  role: 'user' | 'assistant' | 'system';
+  content: string;               // markdown内容
+  timestamp?: Date;              // 可选时间戳
+  loading?: boolean;            // 加载状态
+  showAvatar?: boolean;         // 是否显示头像（默认true）
+  showTimestamp?: boolean;      // 是否显示时间（默认true）
+  showHeader?: boolean;         // 是否显示头部（默认true）
+}
+
+@Component({
+  selector: 'app-chat-message',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MarkdownPipe
+  ],
+  templateUrl: './chat-message.component.html',
+  styleUrl: './chat-message.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ChatMessageComponent {
+  @Input() message!: ChatMessageInput;
+
+  // 默认值设置
+  get displayAvatar(): boolean {
+    return this.message.showAvatar !== false;
+  }
+
+  get displayTimestamp(): boolean {
+    return this.message.showTimestamp !== false;
+  }
+
+  get displayHeader(): boolean {
+    return this.message.showHeader !== false;
+  }
+
+  get formattedTimestamp(): string {
+    if (!this.message.timestamp) return '';
+    return this.formatTime(this.message.timestamp);
+  }
+
+  get avatarIcon(): string {
+    switch (this.message.role) {
+      case 'user': return 'person';
+      case 'assistant': return 'smart_toy';
+      case 'system': return 'computer';
+      default: return 'person';
+    }
+  }
+
+  get avatarLabel(): string {
+    switch (this.message.role) {
+      case 'user': return '用户';
+      case 'assistant': return 'AI助手';
+      case 'system': return '系统';
+      default: return '用户';
+    }
+  }
+
+  private formatTime(date: Date): string {
+    const d = new Date(date);
+    const hours = d.getHours().toString().padStart(2, '0');
+    const minutes = d.getMinutes().toString().padStart(2, '0');
+    return `${hours}:${minutes}`;
+  }
+}

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

@@ -52,13 +52,13 @@ export class MarkdownPipe implements PipeTransform {
   }
 
   /**
-   * 预处理：将文本标签替换为美化版本和可折叠区域
+   * 预处理：将文本标签替换为美化版本
    */
   private preprocessTags(content: string): string {
-    // 处理 [思考] 标签及其内容
+    // 处理 [思考] 标签及其内容（不折叠，普通显示）
     content = this.processTagWithContent(content, '思考', '💭', 'thinking');
     
-    // 处理 [工具] 标签及其内容
+    // 处理 [工具] 标签及其内容（不折叠）
     content = this.processTagWithContent(content, '工具', '🛠️', 'tool');
     
     // 处理 [错误] 标签
@@ -68,7 +68,7 @@ export class MarkdownPipe implements PipeTransform {
   }
 
   /**
-   * 处理标签及其后的内容，转换为可折叠区域
+   * 处理标签及其后的内容
    */
   private processTagWithContent(content: string, tagName: string, emoji: string, cssClass: string): string {
     // 正则表达式匹配 [标签] 及其后的内容（直到下一个标签或字符串结束）
@@ -78,10 +78,17 @@ export class MarkdownPipe implements PipeTransform {
       // 清理内容前后的空白
       const trimmedContent = tagContent.trim();
       if (!trimmedContent) {
-        return `<details class="${cssClass}-details"><summary class="${cssClass}-summary">${emoji} ${tagName}</summary></details>`;
+        return `<div class="${cssClass}-container">${emoji} ${tagName}</div>`;
       }
       
-      return `<details class="${cssClass}-details" ${cssClass === 'thinking' || cssClass === 'tool' ? 'open' : ''}><summary class="${cssClass}-summary">${emoji} ${tagName}</summary>${trimmedContent}</details>`;
+      // 思考部分和工具部分都不折叠
+      if (cssClass === 'thinking') {
+        return `<div class="thinking-container"><strong>${emoji} ${tagName}</strong><div class="thinking-body">${trimmedContent}</div></div>`;
+      } else if (cssClass === 'tool') {
+        return `<div class="tool-container"><strong>${emoji} ${tagName}</strong><div class="tool-body">${trimmedContent}</div></div>`;
+      }
+      
+      return `<div class="${cssClass}-container">${emoji} ${tagName}<br/>${trimmedContent}</div>`;
     });
   }