Create realtime-chat.component.html

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

@@ -0,0 +1,99 @@
+<mat-card class="realtime-chat-container">
+  <mat-card-header>
+    <mat-icon mat-card-avatar>voice_chat</mat-icon>
+    <mat-card-title>Real-time Conversation</mat-card-title>
+    <mat-card-subtitle>
+      <mat-chip-listbox>
+        <mat-chip [class.active]="currentState === state" 
+                 *ngFor="let state of conversationStates">
+          {{ getStateLabel(state) }}
+        </mat-chip>
+      </mat-chip-listbox>
+    </mat-card-subtitle>
+    <button mat-icon-button class="close-button" (click)="closeDialog()">
+      <mat-icon>close</mat-icon>
+    </button>
+  </mat-card-header>
+
+  <mat-divider></mat-divider>
+
+  <mat-card-content>
+    <!-- Error State -->
+    <div class="error-banner" *ngIf="error">
+      <mat-icon>error_outline</mat-icon>
+      <span>{{ error }}</span>
+      <button mat-icon-button (click)="retryConnection()">
+        <mat-icon>refresh</mat-icon>
+      </button>
+    </div>
+
+    <!-- Transcription Display -->
+    <div class="transcription-area" *ngIf="currentTranscription && currentState === 'listening'">
+      <div class="transcription-label">Dinleniyor...</div>
+      <div class="transcription-text">{{ currentTranscription }}</div>
+    </div>
+
+    <!-- Chat Messages -->
+    <div class="chat-messages" #scrollContainer>
+      <div *ngFor="let msg of messages; trackBy: trackByIndex" 
+           [class]="'message ' + msg.role">
+        <mat-icon class="message-icon">
+          {{ msg.role === 'user' ? 'person' : msg.role === 'assistant' ? 'smart_toy' : 'info' }}
+        </mat-icon>
+        <div class="message-content">
+          <div class="message-text">{{ msg.text }}</div>
+          <div class="message-time">{{ msg.timestamp | date:'HH:mm:ss' }}</div>
+          <button *ngIf="msg.audioUrl && msg.role === 'assistant'" 
+                  mat-icon-button 
+                  (click)="playAudio(msg.audioUrl)"
+                  class="audio-button"
+                  [disabled]="isPlayingAudio">
+            <mat-icon>{{ isPlayingAudio ? 'stop' : 'volume_up' }}</mat-icon>
+          </button>
+        </div>
+      </div>
+      
+      <!-- Empty State -->
+      <div class="empty-state" *ngIf="messages.length === 0 && !isConversationActive">
+        <mat-icon>mic_off</mat-icon>
+        <p>Konuşmaya başlamak için aşağıdaki butona tıklayın</p>
+      </div>
+    </div>
+
+    <!-- Audio Visualizer -->
+    <canvas #audioVisualizer 
+            class="audio-visualizer" 
+            width="600" 
+            height="100"
+            [class.active]="isRecording && isConversationActive">
+    </canvas>
+  </mat-card-content>
+
+  <mat-card-actions>
+    <button mat-raised-button 
+            color="primary" 
+            (click)="toggleConversation()"
+            [disabled]="!sessionId || loading">
+      @if (loading) {
+        <mat-spinner diameter="20"></mat-spinner>
+      } @else {
+        <mat-icon>{{ isConversationActive ? 'stop' : 'mic' }}</mat-icon>
+        {{ isConversationActive ? 'Konuşmayı Bitir' : 'Konuşmaya Başla' }}
+      }
+    </button>
+
+    <button mat-button 
+            (click)="clearChat()"
+            [disabled]="messages.length === 0">
+      <mat-icon>clear</mat-icon>
+      Temizle
+    </button>
+    
+    <button mat-button 
+            (click)="performBargeIn()"
+            [disabled]="!isConversationActive || currentState === 'idle' || currentState === 'listening'">
+      <mat-icon>pan_tool</mat-icon>
+      Kesme (Barge-in)
+    </button>
+  </mat-card-actions>
+</mat-card>