@Component
({
  selector: 'app-agent-chat',
  template: `
    <div class="agent-chat-container">
      <p-toolbar>
        <span class="text-xl font-semibold">{{ conversation?.title }}</span>
        <p-tag *ngIf="isConnected" value="Connected" severity="success"></p-tag>
      </p-toolbar>  <div class="messages-container" #messagesContainer>
    <div *ngFor="let message of messages" class="message-wrapper">
      <div class="message" [ngClass]="message.role + '-message'">
        <div class="message-header">
          <i [class]="message.role === 'user' ? 'pi pi-user' : 'pi pi-android'"></i>
          <span>{{ message.role === 'user' ? 'You' : 'Agent' }}</span>
        </div>
        <div [innerHTML]="formatMessage(message.content)"></div>
      </div>
    </div>
  </div>

  <div class="input-container">
    <textarea pInputTextarea [(ngModel)]="userMessage"
              (keydown.enter)="onEnterKey($event)"></textarea>
    <p-button icon="pi pi-send" (onClick)="sendMessage()"></p-button>
  </div>
</div>  `
})