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

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}`;
  }
}