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

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

@@ -66,83 +66,82 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
     this.projectName = data.projectName || null;
   }
 
-  ngOnInit(): void {
-      console.log('🎤 RealtimeChat component initialized');
-      console.log('Session ID:', this.sessionId);
-      console.log('Project Name:', this.projectName);
-      
-      // Subscribe to messages FIRST - before any connection
-      this.conversationManager.messages$.pipe(
-        takeUntil(this.destroyed$)
-      ).subscribe(messages => {
-        console.log('💬 Messages updated:', messages.length, 'messages');
-        this.messages = messages;
-        this.shouldScrollToBottom = true;
-        
-        // Check if we have initial welcome message
-        if (messages.length > 0) {
-          const lastMessage = messages[messages.length - 1];
-          console.log('📝 Last message:', lastMessage.role, lastMessage.text?.substring(0, 50) + '...');
-        }
-      });
+ngOnInit(): void {
+    console.log('🎤 RealtimeChat component initialized');
+    console.log('Session ID:', this.sessionId);
+    console.log('Project Name:', this.projectName);
+    
+    // Subscribe to messages FIRST - before any connection
+    this.conversationManager.messages$.pipe(
+      takeUntil(this.destroyed$)
+    ).subscribe(messages => {
+      console.log('💬 Messages updated:', messages.length, 'messages');
+      this.messages = messages;
+      this.shouldScrollToBottom = true;
       
-      // Check browser support
-      if (!AudioStreamService.checkBrowserSupport()) {
-        this.error = 'Tarayıcınız ses kaydını desteklemiyor. Lütfen modern bir tarayıcı kullanın.';
-        this.snackBar.open(this.error, 'Close', {
-          duration: 5000,
-          panelClass: 'error-snackbar'
-        });
-        return;
+      // Check if we have initial welcome message
+      if (messages.length > 0) {
+        const lastMessage = messages[messages.length - 1];
+        console.log('📝 Last message:', lastMessage.role, lastMessage.text?.substring(0, 50) + '...');
       }
-      
-      // Check microphone permission
-      this.checkMicrophonePermission();
-      
-      // Subscribe to conversation state
-      this.conversationManager.currentState$.pipe(
-        takeUntil(this.destroyed$)
-      ).subscribe(state => {
-        console.log('📊 Conversation state:', state);
-        this.currentState = state;
-        
-        // Update recording state based on conversation state
-        if (state === 'listening') {
-          this.isRecording = true;
-          // Make sure visualization is running
-          if (!this.animationId && this.isConversationActive) {
-            this.startVisualization();
-          }
-        } else {
-          this.isRecording = false;
-        }
-      });
-      
-      // Subscribe to transcription - HER ZAMAN GÖSTER
-      this.conversationManager.transcription$.pipe(
-        takeUntil(this.destroyed$)
-      ).subscribe(text => {
-        console.log('🎙️ Transcription update:', text);
-        this.currentTranscription = text;
+    });
+    
+    // Check browser support
+    if (!AudioStreamService.checkBrowserSupport()) {
+      this.error = 'Tarayıcınız ses kaydını desteklemiyor. Lütfen modern bir tarayıcı kullanın.';
+      this.snackBar.open(this.error, 'Close', {
+        duration: 5000,
+        panelClass: 'error-snackbar'
       });
+      return;
+    }
+    
+    // Check microphone permission
+    this.checkMicrophonePermission();
+    
+    // Subscribe to conversation state
+    this.conversationManager.currentState$.pipe(
+      takeUntil(this.destroyed$)
+    ).subscribe(state => {
+      console.log('📊 Conversation state:', state);
+      this.currentState = state;
       
-      // Subscribe to errors
-      this.conversationManager.error$.pipe(
-        takeUntil(this.destroyed$)
-      ).subscribe(error => {
-        console.error('Conversation error:', error);
-        this.error = error.message;
-      });
+      // Update recording state based on conversation state
+      // SADECE listening state'inde recording true olmalı
+      this.isRecording = (state === 'listening');
       
-      // Load initial messages from session if available
-      const initialMessages = this.conversationManager.getMessages();
-      console.log('📋 Initial messages:', initialMessages.length);
-      if (initialMessages.length > 0) {
-        this.messages = initialMessages;
-        this.shouldScrollToBottom = true;
+      // Eğer listening state'e geçtiyse ve konuşma aktifse visualization'ı başlat
+      if (state === 'listening' && this.isConversationActive && !this.animationId) {
+        console.log('🎤 Starting visualization for listening state');
+        this.startVisualization();
       }
-  }
+    });
+    
+    // Subscribe to transcription
+    this.conversationManager.transcription$.pipe(
+      takeUntil(this.destroyed$)
+    ).subscribe(text => {
+      console.log('🎙️ Transcription update:', text);
+      this.currentTranscription = text;
+    });
+    
+    // Subscribe to errors
+    this.conversationManager.error$.pipe(
+      takeUntil(this.destroyed$)
+    ).subscribe(error => {
+      console.error('Conversation error:', error);
+      this.error = error.message;
+    });
     
+    // Load initial messages from session if available
+    const initialMessages = this.conversationManager.getMessages();
+    console.log('📋 Initial messages:', initialMessages.length);
+    if (initialMessages.length > 0) {
+      this.messages = initialMessages;
+      this.shouldScrollToBottom = true;
+    }
+  }
+
   ngAfterViewChecked(): void {
     if (this.shouldScrollToBottom) {
       this.scrollToBottom();
@@ -303,19 +302,6 @@ export class RealtimeChatComponent implements OnInit, OnDestroy, AfterViewChecke
     }
   }
 
-  private updateRecordingState(state: ConversationState): void {
-    // State'e göre recording durumunu güncelle
-    this.isRecording = state === 'listening';
-    
-    // Visualizer'ı güncelle
-    if (this.isRecording && this.isConversationActive) {
-      // Eğer visualizer çalışmıyorsa başlat
-      if (!this.animationId) {
-        this.startVisualization();
-      }
-    }
-  }
-
   private scrollToBottom(): void {
     try {
       if (this.scrollContainer?.nativeElement) {