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