Personal-Test-Ground-NG/src/app/chat/chat.component.html

<div class="chat-wrapper">
  <!-- Chat panel -->
  <mat-card class="panel chat-panel">
    <mat-card-title>Chat</mat-card-title>
    <mat-card-content>
      <div class="messages">
        <div *ngFor="let msg of messages" [ngClass]="['message', msg.sender]">
          <strong>{{ msg.sender === 'user' ? 'You' : 'Bot' }}:</strong>
          <span>{{ msg.content }}</span>
        </div>
      </div>
      <div *ngIf="loading" class="bot-typing">Bot is typing...</div>
    </mat-card-content>
    <mat-card-actions class="chat-input">
      <mat-form-field appearance="outline">
        <input matInput placeholder="Type a message" [(ngModel)]="inputMessage" (keyup.enter)="sendMessage()" />
      </mat-form-field>
      <button mat-raised-button color="primary" (click)="sendMessage()">Send</button>
    </mat-card-actions>
  </mat-card>

  <!-- Planner output panel -->
  <mat-card class="panel planner-panel">
    <mat-card-title>Planner Output</mat-card-title>
    <mat-card-content>
      <pre>{{ plannerOutput | json }}</pre>
    </mat-card-content>
  </mat-card>

  <!-- Executor output panel -->
  <mat-card class="panel executor-panel">
    <mat-card-title>Executor Output</mat-card-title>
    <mat-card-content>
      <pre>{{ executorOutput | json }}</pre>
    </mat-card-content>
  </mat-card>
</div>