| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 |
- <div class="conversation-container">
- <!-- DEBUG: 显示当前会话状态 -->
- <div style="display: none; background: #f0f0f0; padding: 4px; font-size: 12px; border-bottom: 1px solid #ccc;">
- activeSession: {{ activeSession | json }}, instanceId: {{ instanceId }}, sessionId: {{ sessionId }}
- </div>
- <!-- 消息区域 -->
- <div class="messages-container" #messagesContainer (scroll)="onMessagesContainerScroll()">
- <div *ngFor="let message of messages" class="message-wrapper">
- <div class="message" [class.user]="message.role === 'user'" [class.assistant]="message.role === 'assistant'">
- <div class="message-header">
- <mat-icon class="message-icon">{{ message.role === 'user' ? 'person' : 'smart_toy' }}</mat-icon>
- <span class="message-role">{{ message.role === 'user' ? '用户' : 'AI助手' }}</span>
- <span class="message-time">{{ message.timestamp | date:'HH:mm' }}</span>
- </div>
- <div class="message-content">
- <div [innerHTML]="message.content | markdown"></div>
- <mat-spinner *ngIf="message.loading" diameter="20" class="loading-spinner"></mat-spinner>
- </div>
- </div>
- </div>
-
- <div *ngIf="messages.length === 0" class="empty-state">
- <mat-icon>forum</mat-icon>
- <h3>开始对话</h3>
- <p>选择或创建一个会话来开始对话</p>
- </div>
- </div>
-
- <!-- 输入区域 -->
- <div class="input-container" *ngIf="activeSession">
- <mat-form-field appearance="outline" class="input-field">
-
- <textarea
- matInput
- [(ngModel)]="userInput"
- (keydown.enter)="onSendMessage($event)"
- placeholder="输入消息,按Enter发送,Shift+Enter换行"
- rows="3"
- #messageInput
- ></textarea>
- </mat-form-field>
- <button
- mat-raised-button
- color="primary"
- class="send-button"
- (click)="sendMessage()"
- [disabled]="!userInput.trim()"
- >
- <mat-icon *ngIf="!isLoading">send</mat-icon>
- <mat-spinner *ngIf="isLoading" diameter="20"></mat-spinner>
- </button>
- </div>
- <div *ngIf="!activeSession" class="no-session">
- <p>请先选择或创建一个会话</p>
- </div>
- </div>
|