Без опису
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

conversation.component.html 2.4KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <div class="conversation-container">
  2. <!-- DEBUG: 显示当前会话状态 -->
  3. <div style="display: none; background: #f0f0f0; padding: 4px; font-size: 12px; border-bottom: 1px solid #ccc;">
  4. activeSession: {{ activeSession | json }}, instanceId: {{ instanceId }}, sessionId: {{ sessionId }}
  5. </div>
  6. <!-- 消息区域 -->
  7. <div class="messages-container" #messagesContainer (scroll)="onMessagesContainerScroll()">
  8. <div *ngFor="let message of messages" class="message-wrapper">
  9. <div class="message" [class.user]="message.role === 'user'" [class.assistant]="message.role === 'assistant'">
  10. <div class="message-header">
  11. <mat-icon class="message-icon">{{ message.role === 'user' ? 'person' : 'smart_toy' }}</mat-icon>
  12. <span class="message-role">{{ message.role === 'user' ? '用户' : 'AI助手' }}</span>
  13. <span class="message-time">{{ message.timestamp | date:'HH:mm' }}</span>
  14. </div>
  15. <div class="message-content">
  16. <div [innerHTML]="message.content | markdown"></div>
  17. <mat-spinner *ngIf="message.loading" diameter="20" class="loading-spinner"></mat-spinner>
  18. </div>
  19. </div>
  20. </div>
  21. <div *ngIf="messages.length === 0" class="empty-state">
  22. <mat-icon>forum</mat-icon>
  23. <h3>开始对话</h3>
  24. <p>选择或创建一个会话来开始对话</p>
  25. </div>
  26. </div>
  27. <!-- 输入区域 -->
  28. <div class="input-container" *ngIf="activeSession">
  29. <mat-form-field appearance="outline" class="input-field">
  30. <textarea
  31. matInput
  32. [(ngModel)]="userInput"
  33. (keydown.enter)="onSendMessage($event)"
  34. placeholder="输入消息,按Enter发送,Shift+Enter换行"
  35. rows="3"
  36. #messageInput
  37. ></textarea>
  38. </mat-form-field>
  39. <button
  40. mat-raised-button
  41. color="primary"
  42. class="send-button"
  43. (click)="sendMessage()"
  44. [disabled]="!userInput.trim()"
  45. >
  46. <mat-icon *ngIf="!isLoading">send</mat-icon>
  47. <mat-spinner *ngIf="isLoading" diameter="20"></mat-spinner>
  48. </button>
  49. </div>
  50. <div *ngIf="!activeSession" class="no-session">
  51. <p>请先选择或创建一个会话</p>
  52. </div>
  53. </div>