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-form-field appearance="outline" class="locale-select">
          <mat-label>Language</mat-label>
          <mat-select [(ngModel)]="selectedLocale" required>
            <mat-option *ngFor="let locale of availableLocales" [value]="locale.code">
              {{ locale.name }} ({{ locale.english_name }})
            </mat-option>
          </mat-select>
          <mat-hint>Select conversation language</mat-hint>
        </mat-form-field>        
        
        <mat-checkbox 
          [(ngModel)]="useTTS" 
          [disabled]="!ttsAvailable"
          class="tts-checkbox">
          Use TTS (Text-to-Speech)
        </mat-checkbox>
        <div *ngIf="!ttsAvailable" class="tts-hint">
          TTS is not configured. Please configure a TTS engine in Environment settings.
        </div>
      
        <mat-checkbox 
          [(ngModel)]="useSTT" 
          [disabled]="!sttAvailable"
          class="stt-checkbox">
          Use STT (Speech-to-Text)
        </mat-checkbox>
        <div *ngIf="!sttAvailable" class="stt-hint">
          STT is not configured. Please configure an STT engine in Environment settings.
        </div>
        <div *ngIf="sttAvailable && useSTT" class="stt-hint">
          When STT is enabled, use the Real-time Chat button for voice conversation.
        </div>
      </mat-card-content>
      
      <mat-card-actions align="end">
        <button
          mat-raised-button
          color="primary"
          (click)="startChat()"
          [disabled]="!selectedProject || useSTT"
        >
          <mat-icon>chat</mat-icon>
          Start Chat
        </button>
        
        <button
          mat-raised-button
          color="accent"
          (click)="startRealtimeChat()"
          [disabled]="!selectedProject || !useSTT"
          class="realtime-button"
          matTooltip="Start real-time voice conversation with STT"
        >
          <mat-icon>mic</mat-icon>
          Real-time 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>
      <mat-icon *ngIf="useTTS" matTooltip="TTS Enabled" class="tts-indicator">record_voice_over</mat-icon>
      <button mat-icon-button (click)="endSession()" matTooltip="End Session">
        <mat-icon>close</mat-icon>
      </button>
    </mat-card-header>

    <mat-divider></mat-divider>

    <!-- Audio Waveform Visualization -->
    <div *ngIf="playingAudio" class="waveform-container">
      <canvas #waveformCanvas width="800" height="100"></canvas>
    </div>

    <div class="chat-history" #scrollMe>
      <div
        *ngFor="let msg of messages; let i = index"
        [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>
        <div class="msg-content">
          <span class="bubble">{{ msg.text }}</span>
          <button 
            *ngIf="msg.audioUrl && msg.author === 'assistant'" 
            mat-icon-button 
            (click)="playAudio(msg.audioUrl)"
            class="play-button"
            matTooltip="Play audio">
            <mat-icon>play_arrow</mat-icon>
          </button>
        </div>
      </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() || loading"
        class="send-button">
        <mat-icon>send</mat-icon>
      </button>
    </form>
  </mat-card>

  <!-- Hidden audio player -->
  <audio #audioPlayer style="display: none;"></audio>
</div>