flare-ui/src/app/components/chat/chat.component.html

<div class="chat-container">
  <!-- Project Selection and Start Chat -->
  <div *ngIf="!sessionId" class="start-wrapper">
    <mat-card>
      <mat-card-header>
        <mat-icon mat-card-avatar>chat_bubble_outline</mat-icon>
        <mat-card-title>Start a Chat Session</mat-card-title>
        <mat-card-subtitle>Select a project to begin testing</mat-card-subtitle>
      </mat-card-header>
      
      <mat-card-content>
        <mat-form-field appearance="outline" class="project-select">
          <mat-label>Select Project</mat-label>
          <mat-select [(ngModel)]="selectedProject" required>
            <mat-option *ngFor="let p of projects" [value]="p">{{ p }}</mat-option>
          </mat-select>
          <mat-hint>Choose an enabled project with published version</mat-hint>
        </mat-form-field>
      </mat-card-content>
      
      <mat-card-actions align="end">
        <button
          mat-raised-button
          color="primary"
          (click)="startChat()"
          [disabled]="!selectedProject"
        >
          <mat-icon>chat</mat-icon>
          Start Chat
        </button>
      </mat-card-actions>
    </mat-card>
  </div>

  <!-- Chat Panel -->
  <mat-card *ngIf="sessionId" class="chat-card">
    <mat-card-header>
      <mat-icon mat-card-avatar>smart_toy</mat-icon>
      <mat-card-title>{{ selectedProject }}</mat-card-title>
      <mat-card-subtitle>Session: {{ sessionId.substring(0, 8) }}...</mat-card-subtitle>
      <div class="spacer"></div>
      <button mat-icon-button (click)="endSession()" matTooltip="End Session">
        <mat-icon>close</mat-icon>
      </button>
    </mat-card-header>

    <mat-divider></mat-divider>

    <div class="chat-history" #scrollMe>
      <div
        *ngFor="let msg of messages"
        [ngClass]="{
          'msg-row': true,
          'me': msg.author === 'user',
          'bot': msg.author === 'assistant'
        }"
      >
        <mat-icon class="msg-icon">
          {{ msg.author === 'user' ? 'person' : 'smart_toy' }}
        </mat-icon>
        <span class="bubble">{{ msg.text }}</span>
      </div>
    </div>

    <mat-divider></mat-divider>

    <form (ngSubmit)="send()" class="input-row">
      <mat-form-field appearance="outline" class="flex-1">
        <mat-label>Type your message</mat-label>
        <input
          matInput
          placeholder="Ask something..."
          [formControl]="input"
          autocomplete="off"
          cdkTextareaAutosize
          cdkAutosizeMinRows="1"
          cdkAutosizeMaxRows="3"/>
        <mat-hint>Press Enter to send</mat-hint>
      </mat-form-field>
    
      <button
        mat-fab
        color="primary"
        type="submit"
        [disabled]="input.invalid || !input.value?.trim()"
        class="send-button">
        <mat-icon>send</mat-icon>
      </button>
    </form>
  </mat-card>
</div>