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

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

@@ -16,6 +16,16 @@
           </mat-select>
           <mat-hint>Choose an enabled project with published version</mat-hint>
         </mat-form-field>
+        
+        <mat-checkbox 
+          [(ngModel)]="useTTS" 
+          [disabled]="!ttsAvailable"
+          class="tts-checkbox">
+          Use TTS
+        </mat-checkbox>
+        <div *ngIf="!ttsAvailable" class="tts-hint">
+          TTS is not configured. Please configure a TTS engine in Environment settings.
+        </div>
       </mat-card-content>
       
       <mat-card-actions align="end">
@@ -39,6 +49,7 @@
       <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>
@@ -46,9 +57,14 @@
 
     <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"
+        *ngFor="let msg of messages; let i = index"
         [ngClass]="{
           'msg-row': true,
           'me': msg.author === 'user',
@@ -58,7 +74,17 @@
         <mat-icon class="msg-icon">
           {{ msg.author === 'user' ? 'person' : 'smart_toy' }}
         </mat-icon>
-        <span class="bubble">{{ msg.text }}</span>
+        <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>
 
@@ -82,10 +108,13 @@
         mat-fab
         color="primary"
         type="submit"
-        [disabled]="input.invalid || !input.value?.trim()"
+        [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>