Update flare-ui/src/app/components/chat/realtime-chat.component.ts

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

@@ -27,287 +27,8 @@ import { AudioStreamService } from '../../services/audio-stream.service';
     MatChipsModule,
     MatSnackBarModule
   ],
-  template: `
-    <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">
-          <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' : 'smart_toy' }}
-            </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" 
-                      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">
-        </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>
-  `,
-  styles: [`
-    .realtime-chat-container {
-      max-width: 800px;
-      margin: 20px auto;
-      height: 80vh;
-      display: flex;
-      flex-direction: column;
-      position: relative;
-    }
-
-    mat-card-header {
-      position: relative;
-      
-      .close-button {
-        position: absolute;
-        top: 8px;
-        right: 8px;
-      }
-    }
-
-    .error-banner {
-      background-color: #ffebee;
-      color: #c62828;
-      padding: 12px;
-      border-radius: 4px;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-bottom: 16px;
-      
-      mat-icon {
-        font-size: 20px;
-        width: 20px;
-        height: 20px;
-      }
-      
-      span {
-        flex: 1;
-      }
-    }
-
-    .transcription-area {
-      background: #f5f5f5;
-      padding: 16px;
-      border-radius: 8px;
-      margin-bottom: 16px;
-      min-height: 60px;
-      animation: pulse 2s infinite;
-    }
-
-    @keyframes pulse {
-      0% { opacity: 1; }
-      50% { opacity: 0.7; }
-      100% { opacity: 1; }
-    }
-
-    .transcription-label {
-      font-size: 12px;
-      color: #666;
-      margin-bottom: 4px;
-    }
-
-    .transcription-text {
-      font-size: 16px;
-      color: #333;
-      min-height: 24px;
-    }
-
-    .chat-messages {
-      flex: 1;
-      overflow-y: auto;
-      padding: 16px;
-      background: #fafafa;
-      border-radius: 8px;
-      min-height: 200px;
-      max-height: 400px;
-    }
-
-    .message {
-      display: flex;
-      align-items: flex-start;
-      margin-bottom: 16px;
-      animation: slideIn 0.3s ease-out;
-    }
-
-    @keyframes slideIn {
-      from {
-        opacity: 0;
-        transform: translateY(10px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-
-    .message.user {
-      flex-direction: row-reverse;
-    }
-
-    .message-icon {
-      margin: 0 8px;
-      color: #666;
-    }
-
-    .message-content {
-      max-width: 70%;
-      background: white;
-      padding: 12px 16px;
-      border-radius: 12px;
-      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
-      position: relative;
-    }
-
-    .message.user .message-content {
-      background: #3f51b5;
-      color: white;
-    }
-
-    .message-text {
-      margin-bottom: 4px;
-    }
-
-    .message-time {
-      font-size: 11px;
-      opacity: 0.7;
-    }
-
-    .audio-button {
-      margin-top: 8px;
-    }
-
-    .empty-state {
-      text-align: center;
-      padding: 60px 20px;
-      color: #999;
-      
-      mat-icon {
-        font-size: 48px;
-        width: 48px;
-        height: 48px;
-        margin-bottom: 16px;
-      }
-    }
-
-    .audio-visualizer {
-      width: 100%;
-      height: 100px;
-      background: #333;
-      border-radius: 8px;
-      margin-top: 16px;
-      opacity: 0.3;
-      transition: opacity 0.3s;
-    }
-
-    .audio-visualizer.active {
-      opacity: 1;
-    }
-
-    mat-chip {
-      font-size: 12px;
-    }
-
-    mat-chip.active {
-      background-color: #3f51b5 !important;
-      color: white !important;
-    }
-
-    mat-card-actions {
-      padding: 16px;
-      display: flex;
-      gap: 16px;
-      justify-content: flex-start;
-      
-      mat-spinner {
-        display: inline-block;
-        margin-right: 8px;
-      }
-    }
-  `]
+  templateUrl: './realtime-chat.component.html',
+  styleUrls: ['./realtime-chat.component.scss']
 })
 export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecked {
   @ViewChild('scrollContainer') private scrollContainer!: ElementRef;