ng-code/backup-original/app/components/ai-response.component.html

<div class="ai-response-container">
  <!-- 头部工具栏 -->
  <div class="header-toolbar">
    <div class="session-info">
      @if (currentResponse) {
        <div class="type-indicator" [style.backgroundColor]="getTypeColor(getCurrentType())">
          <mat-icon class="type-icon">{{ getTypeIcon(getCurrentType()) }}</mat-icon>
          <span class="type-label">{{ getTypeLabel(getCurrentType()) }}</span>
        </div>
        
        <div class="session-id">
          <mat-icon>fingerprint</mat-icon>
          <span>{{ getCurrentSessionId() | slice:0:8 }}...</span>
        </div>
        
        <div class="timestamp">
          <mat-icon>schedule</mat-icon>
          <span>{{ getFormattedTimestamp() }}</span>
        </div>
      } @else {
        <div class="empty-state">
          <mat-icon>smart_toy</mat-icon>
          <span>等待AI回复...</span>
        </div>
      }
    </div>
    
    <div class="toolbar-actions">
      <button mat-icon-button matTooltip="切换完整/折叠视图" (click)="toggleFullText()">
        <mat-icon>{{ showFullText ? 'unfold_less' : 'unfold_more' }}</mat-icon>
      </button>
      <button mat-icon-button matTooltip="清空响应" (click)="clearResponses()">
        <mat-icon>delete</mat-icon>
      </button>
    </div>
  </div>
  
  <!-- 内容区域 -->
  <div class="content-area" [class.streaming]="isStreaming" [class.collapsed]="!showFullText">
    @if (currentResponse) {
      <div class="content-wrapper">
        <!-- 响应内容 -->
        <div class="response-content" [innerHTML]="getDisplayContent() | markdown"></div>
        
        <!-- 流式传输进度 -->
        @if (isStreaming) {
          <div class="streaming-indicator">
            <mat-progress-bar mode="determinate" [value]="streamingProgress"></mat-progress-bar>
            <div class="streaming-text">
              <mat-icon>hourglass_empty</mat-icon>
              <span>AI正在思考... {{ streamingProgress | number:'1.0-0' }}%</span>
            </div>
          </div>
        } @else {
          <div class="response-complete">
            <mat-icon>check_circle</mat-icon>
            <span>回复完成</span>
          </div>
        }
      </div>
    } @else {
      <div class="no-response">
        <mat-icon class="empty-icon">chat</mat-icon>
        <p>暂无AI回复内容</p>
        <p class="hint">AI的回复将实时显示在这里</p>
      </div>
    }
  </div>
  
  <!-- 响应历史（可选） -->
  @if (responses.length > 1) {
    <div class="response-history">
      <div class="history-header">
        <mat-icon>history</mat-icon>
        <span>历史响应 ({{ responses.length - 1 }})</span>
      </div>
      <div class="history-list">
        @for (response of responses.slice(-5); track $index) {
          @if (response !== currentResponse) {
            <div class="history-item" 
                 [style.borderLeftColor]="getTypeColor(response.type)"
                 (click)="currentResponse = response">
              <div class="history-type-icon">
                <mat-icon>{{ getTypeIcon(response.type) }}</mat-icon>
              </div>
              <div class="history-content">
                <div class="history-session">{{ response.sessionId | slice:0:6 }}...</div>
                <div class="history-preview">{{ response.content | slice:0:60 }}...</div>
              </div>
              <div class="history-time">
                {{ response.timestamp | date:'HH:mm' }}
              </div>
            </div>
          }
        }
      </div>
    </div>
  }
</div>