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

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

@@ -11,10 +11,13 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialog } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
 
 import { ApiService } from '../../services/api.service';
 import { EnvironmentService } from '../../services/environment.service';
+import { RealtimeChatComponent } from './realtime-chat.component';
+import { Router } from '@angular/router';
 
 interface ChatMessage {
   author: 'user' | 'assistant';
@@ -39,7 +42,8 @@ interface ChatMessage {
     MatDividerModule,
     MatTooltipModule,
     MatProgressSpinnerModule,
-    MatCheckboxModule
+    MatCheckboxModule,
+    RealtimeChatComponent 
   ],
   templateUrl: './chat.component.html',
   styleUrls: ['./chat.component.scss']
@@ -64,6 +68,7 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
   useSTT = false;
   sttAvailable = false;
   isListening = false;
+  sttAvailable = false; 
   
   // Audio visualization
   audioContext?: AudioContext;
@@ -76,7 +81,9 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
   constructor(
     private fb: FormBuilder, 
     private api: ApiService,
-    private environmentService: EnvironmentService
+    private environmentService: EnvironmentService,
+    private dialog: MatDialog,
+    private router: Router  
   ) {}
 
   ngOnInit(): void {
@@ -86,6 +93,9 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
     
     // Initialize Audio Context
     this.audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
+
+    // STT availability kontrolü
+    this.checkSTTAvailability();
   }
 
   ngAfterViewChecked() {
@@ -105,6 +115,94 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
     }
   }
 
+  private checkSTTAvailability(): void {
+    this.api.getEnvironment().subscribe({
+      next: (env) => {
+        this.sttAvailable = env.stt_engine !== 'no_stt';
+        if (!this.sttAvailable) {
+          this.useSTT = false;
+        }
+      },
+      error: (err) => {
+        console.error('Failed to check STT availability:', err);
+        this.sttAvailable = false;
+      }
+    });
+  }
+  
+  startRealtimeChat(): void {
+    if (!this.selectedProject) {
+      this.error = 'Please select a project first';
+      return;
+    }
+    
+    if (!this.sttAvailable) {
+      this.error = 'STT is not configured. Please configure it in Environment settings.';
+      return;
+    }
+    
+    this.loading = true;
+    this.error = '';
+    
+    // Start a new session for realtime chat
+    const sub = this.api.startChat(this.selectedProject).subscribe({
+      next: res => {
+        // Store session ID for realtime component
+        localStorage.setItem('current_session_id', res.session_id);
+        localStorage.setItem('current_project', this.selectedProject);
+        
+        // Open realtime chat dialog
+        this.openRealtimeDialog(res.session_id);
+        
+        this.loading = false;
+      },
+      error: (err) => {
+        this.error = err.error?.detail || 'Failed to start realtime session';
+        this.loading = false;
+        console.error('Start realtime chat error:', err);
+      }
+    });
+    
+    this.subs.add(sub);
+  }
+  
+  private openRealtimeDialog(sessionId: string): void {
+    const dialogRef = this.dialog.open(RealtimeChatComponent, {
+      width: '90%',
+      maxWidth: '900px',
+      height: '85vh',
+      maxHeight: '800px',
+      disableClose: false,
+      panelClass: 'realtime-chat-dialog',
+      data: { 
+        sessionId: sessionId,
+        projectName: this.selectedProject 
+      }
+    });
+    
+    dialogRef.afterClosed().subscribe(result => {
+      // Clean up session data
+      localStorage.removeItem('current_session_id');
+      localStorage.removeItem('current_project');
+      
+      // If session was active, we might want to end it
+      if (result === 'session_active') {
+        // Optionally end the session on backend
+        this.api.endSession(sessionId).subscribe({
+          next: () => console.log('Session ended'),
+          error: (err) => console.error('Failed to end session:', err)
+        });
+      }
+    });
+  }
+  
+  // Alternatif: Route navigasyonu kullanmak isterseniz
+  private navigateToRealtimeChat(sessionId: string): void {
+    this.router.navigate(['/realtime-chat', sessionId], {
+      queryParams: { project: this.selectedProject }
+    });
+  }
+  
   loadProjects(): void {
     this.loading = true;
     const sub = this.api.getChatProjects().subscribe({