@hivegpt/hiveai-angular 0.0.585 → 0.0.586

package/fesm2015/hivegpt-hiveai-angular.js

@@ -5,16 +5,15 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import * as i0 from '@angular/core';
 import { Injectable, InjectionToken, Inject, PLATFORM_ID, Optional, NgZone, EventEmitter, Component, Injector, Output, Input, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, Renderer2, ViewContainerRef, ViewChild, ViewChildren, NgModule, Pipe } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { BehaviorSubject, of, throwError, Subject, Subscription } from 'rxjs';
-import { switchMap, catchError, filter, take, map, tap } from 'rxjs/operators';
+import { BehaviorSubject, of, throwError, Subject, Subscription, combineLatest } from 'rxjs';
+import { switchMap, catchError, filter, take, map, takeUntil, tap } from 'rxjs/operators';
 import { isPlatformBrowser, CommonModule, DOCUMENT } from '@angular/common';
 import { Socket } from 'ngx-socket-io';
 import { Validators, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as SpeechSDK from 'microsoft-cognitiveservices-speech-sdk';
 import * as marked from 'marked';
 import { __awaiter } from 'tslib';
-import { PipecatClient, RTVIEvent } from '@pipecat-ai/client-js';
-import { WebSocketTransport } from '@pipecat-ai/websocket-transport';
+import Daily from '@daily-co/daily-js';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { QuillModule } from 'ngx-quill';
@@ -685,8 +684,8 @@ BotsService.ctorParameters = () => [
 ];
 
 /**
- * Audio analyzer for waveform visualization and local (mic) speaking detection.
- * VoiceAgentService may combine this with WebSocket server events for call state.
+ * Audio analyzer for waveform visualization only.
+ * Do NOT use isUserSpeaking$ for call state; speaking state must come from Daily.js.
  */
 class AudioAnalyzerService {
     constructor() {
@@ -807,23 +806,423 @@ AudioAnalyzerService.decorators = [
 ];
 
 /**
- * Voice agent orchestrator using the official PipecatClient SDK.
+ * WebSocket-only client for voice agent signaling.
+ * CRITICAL: Uses native WebSocket only. NO Socket.IO, NO ngx-socket-io.
  *
- * Audio flow (mirrors the React reference implementation):
- *  - Local mic: acquired by PipecatClient.initDevices(); local track fed to
- *    AudioAnalyzerService for waveform visualisation.
- *  - Bot audio: received as a MediaStreamTrack via RTVIEvent.TrackStarted,
- *    played through a hidden <audio> element.
- *  - All binary protobuf framing / RTVI protocol handled by
- *    @pipecat-ai/client-js + @pipecat-ai/websocket-transport.
+ * Responsibilities:
+ * - Connect to ws_url (from POST /ai/ask-voice response)
+ * - Parse JSON messages (room_created, user_transcript, bot_transcript)
+ * - Emit roomCreated$, userTranscript$, botTranscript$
+ * - NO audio logic, NO mic logic. Audio is handled by Daily.js (WebRTC).
+ */
+class WebSocketVoiceClientService {
+    constructor() {
+        this.ws = null;
+        this.roomCreatedSubject = new Subject();
+        this.userTranscriptSubject = new Subject();
+        this.botTranscriptSubject = new Subject();
+        /** Emits room_url when backend sends room_created. */
+        this.roomCreated$ = this.roomCreatedSubject.asObservable();
+        /** Emits user transcript updates. */
+        this.userTranscript$ = this.userTranscriptSubject.asObservable();
+        /** Emits bot transcript updates. */
+        this.botTranscript$ = this.botTranscriptSubject.asObservable();
+    }
+    /** Connect to signaling WebSocket. No audio over this connection. */
+    connect(wsUrl) {
+        var _a;
+        if (((_a = this.ws) === null || _a === void 0 ? void 0 : _a.readyState) === WebSocket.OPEN) {
+            return;
+        }
+        if (this.ws) {
+            this.ws.close();
+            this.ws = null;
+        }
+        try {
+            this.ws = new WebSocket(wsUrl);
+            this.ws.onmessage = (event) => {
+                var _a;
+                try {
+                    const msg = JSON.parse(event.data);
+                    if ((msg === null || msg === void 0 ? void 0 : msg.type) === 'room_created') {
+                        const roomUrl = ((_a = msg.room_url) !== null && _a !== void 0 ? _a : msg.roomUrl);
+                        if (typeof roomUrl === 'string') {
+                            this.roomCreatedSubject.next(roomUrl);
+                        }
+                    }
+                    else if ((msg === null || msg === void 0 ? void 0 : msg.type) === 'user_transcript' && typeof msg.text === 'string') {
+                        this.userTranscriptSubject.next({
+                            text: msg.text,
+                            final: msg.final === true,
+                        });
+                    }
+                    else if ((msg === null || msg === void 0 ? void 0 : msg.type) === 'bot_transcript' && typeof msg.text === 'string') {
+                        this.botTranscriptSubject.next(msg.text);
+                    }
+                }
+                catch (_b) {
+                    // Ignore non-JSON or unknown messages
+                }
+            };
+            this.ws.onerror = () => {
+                this.disconnect();
+            };
+            this.ws.onclose = () => {
+                this.ws = null;
+            };
+        }
+        catch (err) {
+            console.error('WebSocketVoiceClient: connect failed', err);
+            this.ws = null;
+            throw err;
+        }
+    }
+    /** Disconnect and cleanup. */
+    disconnect() {
+        if (this.ws) {
+            this.ws.close();
+            this.ws = null;
+        }
+    }
+    /** Whether the WebSocket is open. */
+    get isConnected() {
+        var _a;
+        return ((_a = this.ws) === null || _a === void 0 ? void 0 : _a.readyState) === WebSocket.OPEN;
+    }
+}
+WebSocketVoiceClientService.ɵprov = i0.ɵɵdefineInjectable({ factory: function WebSocketVoiceClientService_Factory() { return new WebSocketVoiceClientService(); }, token: WebSocketVoiceClientService, providedIn: "root" });
+WebSocketVoiceClientService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+
+/**
+ * Daily.js WebRTC client for voice agent audio.
+ * Responsibilities:
+ * - Create and manage Daily CallObject
+ * - Join Daily room using room_url
+ * - Handle mic capture + speaker playback
+ * - Bot speaking detection via AnalyserNode on remote track (instant)
+ * - User speaking detection via active-speaker-change
+ * - Expose speaking$ (bot speaking), userSpeaking$ (user speaking), micMuted$
+ * - Expose localStream$ for waveform visualization (AudioAnalyzerService)
+ */
+class DailyVoiceClientService {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.callObject = null;
+        this.localStream = null;
+        this.localSessionId = null;
+        /** Explicit playback of remote (bot) audio; required in some browsers. */
+        this.remoteAudioElement = null;
+        /** AnalyserNode-based remote audio monitor for instant bot speaking detection. */
+        this.remoteAudioContext = null;
+        this.remoteSpeakingRAF = null;
+        this.speakingSubject = new BehaviorSubject(false);
+        this.userSpeakingSubject = new BehaviorSubject(false);
+        this.micMutedSubject = new BehaviorSubject(false);
+        this.localStreamSubject = new BehaviorSubject(null);
+        this.firstRemoteAudioFrameSubject = new BehaviorSubject(false);
+        /** True when bot (remote participant) is the active speaker. */
+        this.speaking$ = this.speakingSubject.asObservable();
+        /** True when user (local participant) is the active speaker. */
+        this.userSpeaking$ = this.userSpeakingSubject.asObservable();
+        /** True when mic is muted. */
+        this.micMuted$ = this.micMutedSubject.asObservable();
+        /** Emits local mic stream for waveform visualization. */
+        this.localStream$ = this.localStreamSubject.asObservable();
+        /** Emits true once when first remote audio frame starts playing. */
+        this.firstRemoteAudioFrame$ = this.firstRemoteAudioFrameSubject.asObservable();
+    }
+    /**
+     * Connect to Daily room. Acquires mic first for waveform, then joins with audio.
+     * @param roomUrl Daily room URL (from room_created)
+     * @param token Optional meeting token
+     */
+    connect(roomUrl, token) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.callObject) {
+                yield this.disconnect();
+            }
+            try {
+                // Get mic stream for both Daily and waveform (single capture)
+                const stream = yield navigator.mediaDevices.getUserMedia({ audio: true });
+                const audioTrack = stream.getAudioTracks()[0];
+                if (!audioTrack) {
+                    stream.getTracks().forEach((t) => t.stop());
+                    throw new Error('No audio track');
+                }
+                this.localStream = stream;
+                this.localStreamSubject.next(stream);
+                // Create audio-only call object
+                // videoSource: false = no camera, audioSource = our mic track
+                const callObject = Daily.createCallObject({
+                    videoSource: false,
+                    audioSource: audioTrack,
+                });
+                this.callObject = callObject;
+                this.setupEventHandlers(callObject);
+                // Join room; Daily handles playback of remote (bot) audio automatically.
+                // Only pass token when it's a non-empty string (Daily rejects undefined/non-string).
+                const joinOptions = { url: roomUrl };
+                if (typeof token === 'string' && token.trim() !== '') {
+                    joinOptions.token = token;
+                }
+                yield callObject.join(joinOptions);
+                console.log(`[VoiceDebug] Room connected (Daily join complete) — ${new Date().toISOString()}`);
+                const participants = callObject.participants();
+                if (participants === null || participants === void 0 ? void 0 : participants.local) {
+                    this.localSessionId = participants.local.session_id;
+                }
+                // Start with mic muted; VoiceAgentService auto-unmutes after first remote audio frame.
+                callObject.setLocalAudio(false);
+                this.micMutedSubject.next(true);
+            }
+            catch (err) {
+                this.cleanup();
+                throw err;
+            }
+        });
+    }
+    setupEventHandlers(call) {
+        // active-speaker-change: used ONLY for user speaking detection.
+        // Bot speaking is detected by our own AnalyserNode (instant, no debounce).
+        call.on('active-speaker-change', (event) => {
+            this.ngZone.run(() => {
+                var _a;
+                const peerId = (_a = event === null || event === void 0 ? void 0 : event.activeSpeaker) === null || _a === void 0 ? void 0 : _a.peerId;
+                if (!peerId || !this.localSessionId) {
+                    this.userSpeakingSubject.next(false);
+                    return;
+                }
+                const isLocal = peerId === this.localSessionId;
+                this.userSpeakingSubject.next(isLocal);
+            });
+        });
+        // track-started / track-stopped: set up remote audio playback + AnalyserNode monitor.
+        call.on('track-started', (event) => {
+            this.ngZone.run(() => {
+                var _a, _b, _c, _d;
+                const p = event === null || event === void 0 ? void 0 : event.participant;
+                const type = (_a = event === null || event === void 0 ? void 0 : event.type) !== null && _a !== void 0 ? _a : (_b = event === null || event === void 0 ? void 0 : event.track) === null || _b === void 0 ? void 0 : _b.kind;
+                const track = event === null || event === void 0 ? void 0 : event.track;
+                if (p && !p.local && type === 'audio') {
+                    console.log(`[VoiceDebug] Got audio track from backend (track-started) — readyState=${track === null || track === void 0 ? void 0 : track.readyState}, muted=${track === null || track === void 0 ? void 0 : track.muted} — ${new Date().toISOString()}`);
+                    const audioTrack = track !== null && track !== void 0 ? track : (_d = (_c = p.tracks) === null || _c === void 0 ? void 0 : _c.audio) === null || _d === void 0 ? void 0 : _d.track;
+                    if (audioTrack && typeof audioTrack === 'object') {
+                        this.playRemoteTrack(audioTrack);
+                        this.monitorRemoteAudio(audioTrack);
+                    }
+                }
+            });
+        });
+        call.on('track-stopped', (event) => {
+            this.ngZone.run(() => {
+                var _a, _b;
+                const p = event === null || event === void 0 ? void 0 : event.participant;
+                const type = (_a = event === null || event === void 0 ? void 0 : event.type) !== null && _a !== void 0 ? _a : (_b = event === null || event === void 0 ? void 0 : event.track) === null || _b === void 0 ? void 0 : _b.kind;
+                if (p && !p.local && type === 'audio') {
+                    this.stopRemoteAudioMonitor();
+                    this.stopRemoteAudio();
+                }
+            });
+        });
+        call.on('left-meeting', () => {
+            this.ngZone.run(() => this.cleanup());
+        });
+        call.on('error', (event) => {
+            this.ngZone.run(() => {
+                var _a;
+                console.error('DailyVoiceClient: Daily error', (_a = event === null || event === void 0 ? void 0 : event.errorMsg) !== null && _a !== void 0 ? _a : event);
+                this.cleanup();
+            });
+        });
+    }
+    /**
+     * Play remote (bot) audio track via a dedicated audio element.
+     * Required in many browsers where Daily's internal playback does not output to speakers.
+     */
+    playRemoteTrack(track) {
+        this.stopRemoteAudio();
+        try {
+            console.log(`[VoiceDebug] playRemoteTrack called — track.readyState=${track.readyState}, track.muted=${track.muted} — ${new Date().toISOString()}`);
+            track.onunmute = () => {
+                console.log(`[VoiceDebug] Remote audio track UNMUTED (audio data arriving) — ${new Date().toISOString()}`);
+            };
+            const stream = new MediaStream([track]);
+            const audio = new Audio();
+            audio.autoplay = true;
+            audio.srcObject = stream;
+            this.remoteAudioElement = audio;
+            audio.onplaying = () => {
+                console.log(`[VoiceDebug] Audio element PLAYING (browser started playback) — ${new Date().toISOString()}`);
+            };
+            let firstTimeUpdate = true;
+            audio.ontimeupdate = () => {
+                if (firstTimeUpdate) {
+                    firstTimeUpdate = false;
+                    console.log(`[VoiceDebug] Audio element first TIMEUPDATE (actual audio output) — ${new Date().toISOString()}`);
+                    this.firstRemoteAudioFrameSubject.next(true);
+                }
+            };
+            const p = audio.play();
+            if (p && typeof p.then === 'function') {
+                p.then(() => {
+                    console.log(`[VoiceDebug] audio.play() resolved — ${new Date().toISOString()}`);
+                    this.firstRemoteAudioFrameSubject.next(true);
+                }).catch((err) => {
+                    console.warn('DailyVoiceClient: remote audio play failed (may need user gesture)', err);
+                });
+            }
+        }
+        catch (err) {
+            console.warn('DailyVoiceClient: failed to create remote audio element', err);
+        }
+    }
+    /**
+     * Monitor remote audio track energy via AnalyserNode.
+     * Polls at ~60fps and flips speakingSubject based on actual audio energy.
+     */
+    monitorRemoteAudio(track) {
+        this.stopRemoteAudioMonitor();
+        try {
+            const ctx = new AudioContext();
+            const source = ctx.createMediaStreamSource(new MediaStream([track]));
+            const analyser = ctx.createAnalyser();
+            analyser.fftSize = 256;
+            source.connect(analyser);
+            this.remoteAudioContext = ctx;
+            const dataArray = new Uint8Array(analyser.frequencyBinCount);
+            const THRESHOLD = 5;
+            const SILENCE_MS = 1500;
+            let lastSoundTime = 0;
+            let isSpeaking = false;
+            const poll = () => {
+                if (!this.remoteAudioContext)
+                    return;
+                analyser.getByteFrequencyData(dataArray);
+                let sum = 0;
+                for (let i = 0; i < dataArray.length; i++) {
+                    sum += dataArray[i];
+                }
+                const avg = sum / dataArray.length;
+                const now = Date.now();
+                if (avg > THRESHOLD) {
+                    lastSoundTime = now;
+                    if (!isSpeaking) {
+                        isSpeaking = true;
+                        console.log(`[VoiceDebug] Bot audio energy detected (speaking=true) — avg=${avg.toFixed(1)} — ${new Date().toISOString()}`);
+                        this.ngZone.run(() => {
+                            this.userSpeakingSubject.next(false);
+                            this.speakingSubject.next(true);
+                        });
+                    }
+                }
+                else if (isSpeaking && now - lastSoundTime > SILENCE_MS) {
+                    isSpeaking = false;
+                    console.log(`[VoiceDebug] Bot audio silence detected (speaking=false) — ${new Date().toISOString()}`);
+                    this.ngZone.run(() => this.speakingSubject.next(false));
+                }
+                this.remoteSpeakingRAF = requestAnimationFrame(poll);
+            };
+            this.remoteSpeakingRAF = requestAnimationFrame(poll);
+        }
+        catch (err) {
+            console.warn('DailyVoiceClient: failed to create remote audio monitor', err);
+        }
+    }
+    stopRemoteAudioMonitor() {
+        if (this.remoteSpeakingRAF) {
+            cancelAnimationFrame(this.remoteSpeakingRAF);
+            this.remoteSpeakingRAF = null;
+        }
+        if (this.remoteAudioContext) {
+            this.remoteAudioContext.close().catch(() => { });
+            this.remoteAudioContext = null;
+        }
+    }
+    stopRemoteAudio() {
+        if (this.remoteAudioElement) {
+            try {
+                this.remoteAudioElement.pause();
+                this.remoteAudioElement.srcObject = null;
+            }
+            catch (_) { }
+            this.remoteAudioElement = null;
+        }
+    }
+    /** Set mic muted state. */
+    setMuted(muted) {
+        if (!this.callObject)
+            return;
+        this.callObject.setLocalAudio(!muted);
+        this.micMutedSubject.next(muted);
+    }
+    /** Disconnect and cleanup. */
+    disconnect() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.callObject) {
+                this.cleanup();
+                return;
+            }
+            try {
+                yield this.callObject.leave();
+            }
+            catch (e) {
+                // ignore
+            }
+            this.cleanup();
+        });
+    }
+    cleanup() {
+        this.stopRemoteAudioMonitor();
+        this.stopRemoteAudio();
+        if (this.callObject) {
+            this.callObject.destroy().catch(() => { });
+            this.callObject = null;
+        }
+        if (this.localStream) {
+            this.localStream.getTracks().forEach((t) => t.stop());
+            this.localStream = null;
+        }
+        this.localSessionId = null;
+        this.speakingSubject.next(false);
+        this.userSpeakingSubject.next(false);
+        this.localStreamSubject.next(null);
+        this.firstRemoteAudioFrameSubject.next(false);
+        // Keep last micMuted state; will reset on next connect
+    }
+}
+DailyVoiceClientService.ɵprov = i0.ɵɵdefineInjectable({ factory: function DailyVoiceClientService_Factory() { return new DailyVoiceClientService(i0.ɵɵinject(i0.NgZone)); }, token: DailyVoiceClientService, providedIn: "root" });
+DailyVoiceClientService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+DailyVoiceClientService.ctorParameters = () => [
+    { type: NgZone }
+];
+
+/**
+ * Voice agent orchestrator. Coordinates WebSocket (signaling) and Daily.js (WebRTC audio).
+ *
+ * CRITICAL: This service must NEVER use Socket.IO or ngx-socket-io. Voice flow uses only:
+ * - Native WebSocket (WebSocketVoiceClientService) for signaling (room_created, transcripts)
+ * - Daily.js (DailyVoiceClientService) for WebRTC audio. Audio does NOT flow over WebSocket.
+ *
+ * - Maintains callState, statusText, duration, isMicMuted, isUserSpeaking, audioLevels
+ * - Uses WebSocket for room_created and transcripts only (no audio)
+ * - Uses Daily.js for all audio, mic, and real-time speaking detection
  */
 class VoiceAgentService {
-    constructor(audioAnalyzer, platformTokenRefresh, ngZone, 
+    constructor(audioAnalyzer, wsClient, dailyClient, platformTokenRefresh, 
     /** `Object` not `object` — ngc metadata collection rejects the `object` type in DI params. */
     platformId) {
         this.audioAnalyzer = audioAnalyzer;
+        this.wsClient = wsClient;
+        this.dailyClient = dailyClient;
         this.platformTokenRefresh = platformTokenRefresh;
-        this.ngZone = ngZone;
         this.platformId = platformId;
         this.callStateSubject = new BehaviorSubject('idle');
         this.statusTextSubject = new BehaviorSubject('');
@@ -835,10 +1234,9 @@ class VoiceAgentService {
         this.botTranscriptSubject = new Subject();
         this.callStartTime = 0;
         this.durationInterval = null;
-        this.pcClient = null;
-        this.botAudioElement = null;
         this.subscriptions = new Subscription();
         this.destroy$ = new Subject();
+        this.hasAutoUnmutedAfterFirstAudio = false;
         this.callState$ = this.callStateSubject.asObservable();
         this.statusText$ = this.statusTextSubject.asObservable();
         this.duration$ = this.durationSubject.asObservable();
@@ -847,236 +1245,199 @@ class VoiceAgentService {
         this.audioLevels$ = this.audioLevelsSubject.asObservable();
         this.userTranscript$ = this.userTranscriptSubject.asObservable();
         this.botTranscript$ = this.botTranscriptSubject.asObservable();
+        // Waveform visualization only - do NOT use for speaking state
         this.subscriptions.add(this.audioAnalyzer.audioLevels$.subscribe((levels) => this.audioLevelsSubject.next(levels)));
     }
     ngOnDestroy() {
         this.destroy$.next();
         this.subscriptions.unsubscribe();
-        void this.disconnect();
+        this.disconnect();
     }
-    /** Reset to idle (e.g. when modal re-opens so user can click Start Call). */
+    /** Reset to idle state (e.g. when modal opens so user can click Start Call). */
     resetToIdle() {
         if (this.callStateSubject.value === 'idle')
             return;
-        void this.disconnect();
+        this.stopDurationTimer();
+        this.audioAnalyzer.stop();
+        this.wsClient.disconnect();
+        // Fire-and-forget: Daily disconnect is async; connect() will await if needed
+        void this.dailyClient.disconnect();
         this.callStateSubject.next('idle');
         this.statusTextSubject.next('');
         this.durationSubject.next('0:00');
+        this.hasAutoUnmutedAfterFirstAudio = false;
     }
     connect(apiUrl, token, botId, conversationId, apiKey, eventToken, eventId, eventUrl, domainAuthority, usersApiUrl) {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.callStateSubject.value !== 'idle') {
-                console.warn('[HiveGpt Voice] Call already in progress');
+                console.warn('Call already in progress');
                 return;
             }
             try {
                 this.callStateSubject.next('connecting');
                 this.statusTextSubject.next('Connecting...');
                 let accessToken = token;
+                // Align with chat drawer token handling: always delegate to
+                // PlatformTokenRefreshService when we have a usersApiUrl, so it can
+                // fall back to stored tokens even if the caller passed an empty token.
                 if (usersApiUrl && isPlatformBrowser(this.platformId)) {
                     try {
                         const ensured = yield this.platformTokenRefresh
                             .ensureValidAccessToken(token, usersApiUrl)
                             .pipe(take(1))
                             .toPromise();
-                        if (ensured === null || ensured === void 0 ? void 0 : ensured.accessToken)
+                        if (ensured === null || ensured === void 0 ? void 0 : ensured.accessToken) {
                             accessToken = ensured.accessToken;
+                        }
                     }
                     catch (e) {
-                        console.warn('[HiveGpt Voice] Token refresh failed', e);
+                        console.warn('[HiveGpt Voice] Token refresh before connect failed', e);
                     }
                 }
                 const baseUrl = apiUrl.replace(/\/$/, '');
-                const pcClient = new PipecatClient({
-                    transport: new WebSocketTransport(),
-                    enableMic: true,
-                    enableCam: false,
-                    callbacks: {
-                        onConnected: () => this.ngZone.run(() => this.onPipecatConnected()),
-                        onDisconnected: () => this.ngZone.run(() => this.onPipecatDisconnected()),
-                        onBotReady: () => this.ngZone.run(() => this.onBotReady()),
-                        onUserTranscript: (data) => this.ngZone.run(() => this.userTranscriptSubject.next({ text: data.text, final: !!data.final })),
-                        onBotTranscript: (data) => this.ngZone.run(() => this.botTranscriptSubject.next(data.text)),
-                        onError: (err) => {
-                            this.ngZone.run(() => {
-                                console.error('[HiveGpt Voice] PipecatClient error', err);
-                                this.callStateSubject.next('ended');
-                                this.statusTextSubject.next('Connection failed');
-                            });
-                        },
-                    },
-                });
-                this.pcClient = pcClient;
-                // Bot audio arrives as a MediaStreamTrack — wire to a hidden <audio> element
-                pcClient.on(RTVIEvent.TrackStarted, (track, participant) => {
-                    if (!(participant === null || participant === void 0 ? void 0 : participant.local) && track.kind === 'audio') {
-                        this.ngZone.run(() => this.setupBotAudioTrack(track));
-                    }
-                });
-                // Speaking state comes straight from RTVI events
-                pcClient.on(RTVIEvent.BotStartedSpeaking, () => this.ngZone.run(() => this.onBotStartedSpeaking()));
-                pcClient.on(RTVIEvent.BotStoppedSpeaking, () => this.ngZone.run(() => this.onBotStoppedSpeaking()));
-                pcClient.on(RTVIEvent.UserStartedSpeaking, () => this.ngZone.run(() => {
-                    this.isUserSpeakingSubject.next(true);
-                    this.callStateSubject.next('listening');
-                    this.statusTextSubject.next('Listening...');
-                }));
-                pcClient.on(RTVIEvent.UserStoppedSpeaking, () => this.ngZone.run(() => {
-                    this.isUserSpeakingSubject.next(false);
-                    if (this.callStateSubject.value === 'listening') {
-                        // Brief 'Processing...' while we wait for the bot to respond.
-                        this.callStateSubject.next('connected');
-                        this.statusTextSubject.next('Processing...');
-                    }
-                }));
-                // Acquire mic (triggers browser permission prompt)
-                yield pcClient.initDevices();
-                // Build headers using the browser Headers API (required by pipecat's APIRequest type)
-                const requestHeaders = new Headers();
-                requestHeaders.append('Authorization', `Bearer ${accessToken}`);
-                requestHeaders.append('x-api-key', apiKey);
-                requestHeaders.append('hive-bot-id', botId);
-                requestHeaders.append('domain-authority', domainAuthority);
-                requestHeaders.append('eventUrl', eventUrl);
-                requestHeaders.append('eventId', eventId);
-                requestHeaders.append('eventToken', eventToken);
-                requestHeaders.append('ngrok-skip-browser-warning', 'true');
-                // POST to /ai/ask-voice-socket → receives { ws_url } → WebSocketTransport connects
-                yield pcClient.startBotAndConnect({
-                    endpoint: `${baseUrl}/ai/ask-voice-socket`,
-                    headers: requestHeaders,
-                    requestData: {
+                const postUrl = `${baseUrl}/ai/ask-voice`;
+                const headers = {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${accessToken}`,
+                    'x-api-key': apiKey,
+                    'hive-bot-id': botId,
+                    'domain-authority': domainAuthority,
+                    eventUrl,
+                    eventId,
+                    eventToken,
+                    'ngrok-skip-browser-warning': 'true',
+                };
+                // POST to get ws_url for signaling
+                const res = yield fetch(postUrl, {
+                    method: 'POST',
+                    headers,
+                    body: JSON.stringify({
                         bot_id: botId,
                         conversation_id: conversationId,
                         voice: 'alloy',
-                    },
+                    }),
                 });
+                if (!res.ok) {
+                    throw new Error(`HTTP ${res.status}`);
+                }
+                const json = yield res.json();
+                const wsUrl = json === null || json === void 0 ? void 0 : json.rn_ws_url;
+                if (!wsUrl || typeof wsUrl !== 'string') {
+                    throw new Error('No ws_url in response');
+                }
+                // Subscribe to room_created BEFORE connecting to avoid race
+                this.wsClient.roomCreated$
+                    .pipe(take(1), takeUntil(this.destroy$))
+                    .subscribe((roomUrl) => __awaiter(this, void 0, void 0, function* () {
+                    try {
+                        yield this.onRoomCreated(roomUrl);
+                    }
+                    catch (err) {
+                        console.error('Daily join failed:', err);
+                        this.callStateSubject.next('ended');
+                        this.statusTextSubject.next('Connection failed');
+                        yield this.disconnect();
+                        throw err;
+                    }
+                }));
+                // Forward transcripts from WebSocket
+                this.subscriptions.add(this.wsClient.userTranscript$
+                    .pipe(takeUntil(this.destroy$))
+                    .subscribe((t) => this.userTranscriptSubject.next(t)));
+                this.subscriptions.add(this.wsClient.botTranscript$
+                    .pipe(takeUntil(this.destroy$))
+                    .subscribe((t) => this.botTranscriptSubject.next(t)));
+                // Connect signaling WebSocket (no audio over WS)
+                this.wsClient.connect(wsUrl);
             }
             catch (error) {
-                console.error('[HiveGpt Voice] connect failed', error);
+                console.error('Error connecting voice agent:', error);
                 this.callStateSubject.next('ended');
-                yield this.cleanupPipecatClient();
+                yield this.disconnect();
                 this.statusTextSubject.next('Connection failed');
                 throw error;
             }
         });
     }
-    onPipecatConnected() {
-        // Start the duration timer from the moment the session is live.
-        this.callStartTime = Date.now();
-        this.startDurationTimer();
-        this.callStateSubject.next('connected');
-        this.statusTextSubject.next('Connected');
-        this.isMicMutedSubject.next(false);
-        this.startLocalMicAnalyzer();
-    }
-    onPipecatDisconnected() {
-        this.stopDurationTimer();
-        this.callStartTime = 0;
-        this.audioAnalyzer.stop();
-        this.stopBotAudio();
-        this.callStateSubject.next('ended');
-        this.statusTextSubject.next('Call Ended');
-    }
-    onBotReady() {
-        var _a, _b, _c;
-        // Retry track wiring in case tracks weren't ready at onConnected.
-        this.startLocalMicAnalyzer();
-        const botTrack = (_c = (_b = (_a = this.pcClient) === null || _a === void 0 ? void 0 : _a.tracks()) === null || _b === void 0 ? void 0 : _b.bot) === null || _c === void 0 ? void 0 : _c.audio;
-        if (botTrack)
-            this.setupBotAudioTrack(botTrack);
-        // Bot is initialised — signal that we're now waiting for user input.
-        this.statusTextSubject.next('Listening...');
-    }
-    startLocalMicAnalyzer() {
-        var _a, _b, _c;
-        const localTrack = (_c = (_b = (_a = this.pcClient) === null || _a === void 0 ? void 0 : _a.tracks()) === null || _b === void 0 ? void 0 : _b.local) === null || _c === void 0 ? void 0 : _c.audio;
-        if (localTrack) {
-            this.audioAnalyzer.start(new MediaStream([localTrack]));
-        }
-    }
-    onBotStartedSpeaking() {
-        this.callStateSubject.next('talking');
-        this.statusTextSubject.next('Talking...');
-        // Mark user as no longer speaking when bot takes the turn.
-        this.isUserSpeakingSubject.next(false);
-    }
-    onBotStoppedSpeaking() {
-        if (this.callStateSubject.value === 'talking') {
-            this.callStateSubject.next('connected');
-            this.statusTextSubject.next('Listening...');
-        }
-    }
-    setupBotAudioTrack(track) {
-        var _a;
-        if (!this.botAudioElement) {
-            this.botAudioElement = new Audio();
-            this.botAudioElement.autoplay = true;
-        }
-        const existing = (_a = this.botAudioElement.srcObject) === null || _a === void 0 ? void 0 : _a.getAudioTracks()[0];
-        if ((existing === null || existing === void 0 ? void 0 : existing.id) === track.id)
-            return;
-        this.botAudioElement.srcObject = new MediaStream([track]);
-        this.botAudioElement.play().catch((err) => console.warn('[HiveGpt Voice] Bot audio play blocked', err));
-    }
-    stopBotAudio() {
-        var _a;
-        if (this.botAudioElement) {
-            try {
-                this.botAudioElement.pause();
-                (_a = this.botAudioElement.srcObject) === null || _a === void 0 ? void 0 : _a.getAudioTracks().forEach((t) => t.stop());
-                this.botAudioElement.srcObject = null;
-            }
-            catch (_b) {
-                // ignore
-            }
-            this.botAudioElement = null;
-        }
+    onRoomCreated(roomUrl) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Connect Daily.js for WebRTC audio
+            yield this.dailyClient.connect(roomUrl);
+            this.hasAutoUnmutedAfterFirstAudio = false;
+            // Waveform: use local mic stream from Daily client
+            this.dailyClient.localStream$
+                .pipe(filter((s) => s != null), take(1))
+                .subscribe((stream) => {
+                this.audioAnalyzer.start(stream);
+            });
+            this.subscriptions.add(this.dailyClient.userSpeaking$.subscribe((s) => this.isUserSpeakingSubject.next(s)));
+            this.subscriptions.add(combineLatest([
+                this.dailyClient.speaking$,
+                this.dailyClient.userSpeaking$,
+            ]).subscribe(([bot, user]) => {
+                const current = this.callStateSubject.value;
+                if (current === 'connecting' && !bot) {
+                    return;
+                }
+                if (current === 'connecting' && bot) {
+                    this.callStartTime = Date.now();
+                    this.startDurationTimer();
+                    this.callStateSubject.next('talking');
+                    return;
+                }
+                if (user) {
+                    this.callStateSubject.next('listening');
+                }
+                else if (bot) {
+                    this.callStateSubject.next('talking');
+                }
+                else if (current === 'talking' || current === 'listening') {
+                    this.callStateSubject.next('connected');
+                }
+            }));
+            this.subscriptions.add(this.dailyClient.micMuted$.subscribe((muted) => this.isMicMutedSubject.next(muted)));
+            // One-time auto-unmute after first remote audio frame starts playing.
+            // This keeps initial capture muted until bot audio is heard, then restores normal mic flow.
+            this.subscriptions.add(this.dailyClient.firstRemoteAudioFrame$
+                .pipe(filter((hasFirstFrame) => hasFirstFrame), take(1))
+                .subscribe(() => {
+                if (this.hasAutoUnmutedAfterFirstAudio)
+                    return;
+                this.hasAutoUnmutedAfterFirstAudio = true;
+                if (this.isMicMutedSubject.value) {
+                    this.dailyClient.setMuted(false);
+                }
+            }));
+            this.statusTextSubject.next('Connecting...');
+        });
     }
     disconnect() {
         return __awaiter(this, void 0, void 0, function* () {
             this.stopDurationTimer();
-            this.callStartTime = 0;
             this.audioAnalyzer.stop();
-            this.stopBotAudio();
-            yield this.cleanupPipecatClient();
+            // Daily first, then WebSocket
+            yield this.dailyClient.disconnect();
+            this.wsClient.disconnect();
             this.callStateSubject.next('ended');
             this.statusTextSubject.next('Call Ended');
-        });
-    }
-    cleanupPipecatClient() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.pcClient) {
-                try {
-                    yield this.pcClient.disconnect();
-                }
-                catch (_a) {
-                    // ignore
-                }
-                this.pcClient = null;
-            }
+            this.hasAutoUnmutedAfterFirstAudio = false;
         });
     }
     toggleMic() {
-        if (!this.pcClient)
-            return;
-        const nextMuted = !this.isMicMutedSubject.value;
-        this.pcClient.enableMic(!nextMuted);
-        this.isMicMutedSubject.next(nextMuted);
-        if (nextMuted)
-            this.isUserSpeakingSubject.next(false);
+        const current = this.isMicMutedSubject.value;
+        this.dailyClient.setMuted(!current);
     }
     startDurationTimer() {
-        const tick = () => {
+        const updateDuration = () => {
             if (this.callStartTime > 0) {
                 const elapsed = Math.floor((Date.now() - this.callStartTime) / 1000);
-                const m = Math.floor(elapsed / 60);
-                const s = elapsed % 60;
-                this.durationSubject.next(`${m}:${String(s).padStart(2, '0')}`);
+                const minutes = Math.floor(elapsed / 60);
+                const seconds = elapsed % 60;
+                this.durationSubject.next(`${minutes}:${String(seconds).padStart(2, '0')}`);
             }
         };
-        tick();
-        this.durationInterval = setInterval(tick, 1000);
+        updateDuration();
+        this.durationInterval = setInterval(updateDuration, 1000);
     }
     stopDurationTimer() {
         if (this.durationInterval) {
@@ -1085,7 +1446,7 @@ class VoiceAgentService {
         }
     }
 }
-VoiceAgentService.ɵprov = i0.ɵɵdefineInjectable({ factory: function VoiceAgentService_Factory() { return new VoiceAgentService(i0.ɵɵinject(AudioAnalyzerService), i0.ɵɵinject(PlatformTokenRefreshService), i0.ɵɵinject(i0.NgZone), i0.ɵɵinject(i0.PLATFORM_ID)); }, token: VoiceAgentService, providedIn: "root" });
+VoiceAgentService.ɵprov = i0.ɵɵdefineInjectable({ factory: function VoiceAgentService_Factory() { return new VoiceAgentService(i0.ɵɵinject(AudioAnalyzerService), i0.ɵɵinject(WebSocketVoiceClientService), i0.ɵɵinject(DailyVoiceClientService), i0.ɵɵinject(PlatformTokenRefreshService), i0.ɵɵinject(i0.PLATFORM_ID)); }, token: VoiceAgentService, providedIn: "root" });
 VoiceAgentService.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root',
@@ -1093,8 +1454,9 @@ VoiceAgentService.decorators = [
 ];
 VoiceAgentService.ctorParameters = () => [
     { type: AudioAnalyzerService },
+    { type: WebSocketVoiceClientService },
+    { type: DailyVoiceClientService },
     { type: PlatformTokenRefreshService },
-    { type: NgZone },
     { type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }
 ];
 
@@ -1125,15 +1487,12 @@ class VoiceAgentModalComponent {
         this.isMicMuted = false;
         this.isUserSpeaking = false;
         this.audioLevels = [];
+        this.isSpeaking = false;
+        /** Track whether call has transitioned out of initial connected state. */
+        this.hasLeftConnectedOnce = false;
         this.subscriptions = [];
         this.isConnecting = false;
     }
-    /** True while the bot is speaking — drives avatar pulse animation and voice visualizer. */
-    get isBotTalking() { return this.callState === 'talking'; }
-    /** True while the user is actively speaking — drives waveform active color. */
-    get isUserActive() { return this.callState === 'listening' && this.isUserSpeaking && !this.isMicMuted; }
-    /** True during the brief processing pause between user speech and bot response. */
-    get isProcessing() { return this.callState === 'connected' && this.statusText === 'Processing...'; }
     ngOnInit() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         // When opened via Overlay, config is provided by injection
@@ -1154,8 +1513,16 @@ class VoiceAgentModalComponent {
             this.agentAvatar = this.injectedConfig.agentAvatar;
             this.usersApiUrl = (_h = this.injectedConfig.usersApiUrl) !== null && _h !== void 0 ? _h : this.usersApiUrl;
         }
+        // Subscribe to observables
         this.subscriptions.push(this.voiceAgentService.callState$.subscribe(state => {
             this.callState = state;
+            this.isSpeaking = state === 'talking';
+            if (state === 'listening' || state === 'talking') {
+                this.hasLeftConnectedOnce = true;
+            }
+            if (state === 'idle' || state === 'ended') {
+                this.hasLeftConnectedOnce = false;
+            }
         }));
         this.subscriptions.push(this.voiceAgentService.statusText$.subscribe(text => {
             this.statusText = text;
@@ -1220,16 +1587,18 @@ class VoiceAgentModalComponent {
         const maxHeight = 4 + envelope * 38;
         return minHeight + (n / 100) * (maxHeight - minHeight);
     }
-    /** Status label for active call — driven by callState + service statusText. */
+    /** Status label for active call. */
     get statusLabel() {
-        switch (this.callState) {
-            case 'connecting': return 'Connecting...';
-            case 'talking': return 'Talking...';
-            case 'listening': return 'Listening...';
-            // 'connected' covers: initial connect, between turns (Listening / Processing)
-            case 'connected': return this.statusText || 'Connected';
-            default: return this.statusText || '';
+        if (this.callState === 'connecting')
+            return this.statusText || 'Connecting...';
+        if (this.callState === 'talking')
+            return 'Talking...';
+        if (this.callState === 'listening')
+            return 'Listening';
+        if (this.callState === 'connected') {
+            return this.hasLeftConnectedOnce ? 'Talking...' : 'Connected';
         }
+        return this.statusText || '';
     }
     /** Call Again: reset to idle then start a new call. */
     callAgain() {
@@ -1254,8 +1623,8 @@ class VoiceAgentModalComponent {
 VoiceAgentModalComponent.decorators = [
     { type: Component, args: [{
                 selector: 'hivegpt-voice-agent-modal',
-                template: "<div class=\"voice-agent-modal-overlay\" (click)=\"endCall()\">\n  <div\n    class=\"voice-container voice-agent-modal\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <!-- Header -->\n    <div class=\"header\">\n      <div class=\"header-left\">\n        <div class=\"header-icon\">\n          <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M12 1C8.13 1 5 4.13 5 8V14C5 17.87 8.13 21 12 21C15.87 21 19 17.87 19 14V8C19 4.13 15.87 1 12 1Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M12 23C10.34 23 9 21.66 9 20H15C15 21.66 13.66 23 12 23Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </div>\n        <span class=\"header-title\">Voice</span>\n      </div>\n      <button\n        class=\"close-button\"\n        (click)=\"endCall()\"\n        type=\"button\"\n        aria-label=\"Close\"\n      >\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M18 6L6 18M6 6L18 18\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n      </button>\n    </div>\n\n    <!-- Avatar Section with glow -->\n    <div class=\"avatar-section\">\n      <div class=\"avatar-glow\" [class.glow-talking]=\"isBotTalking\" [class.glow-listening]=\"callState === 'listening'\"></div>\n\n      <!-- Particle ring \u2014 visible while bot is talking -->\n      <div *ngIf=\"isBotTalking\" class=\"particles-container\">\n        <span *ngFor=\"let i of [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]\"\n              class=\"particle\"\n              [style.--i]=\"i\"\n              [style.animationDelay]=\"(i * 0.15) + 's'\">\n        </span>\n      </div>\n\n      <div class=\"avatar-wrapper\" [class.speaking]=\"isBotTalking\" [class.listening]=\"callState === 'listening'\">\n        <img class=\"avatar-image\" [src]=\"displayAvatarUrl\" alt=\"Nia\" />\n      </div>\n    </div>\n\n    <!-- Agent Info: Nia + Collaboration Manager AI Agent Specialist -->\n    <div class=\"agent-info\">\n      <div class=\"agent-name\">\n        Nia\n        <span class=\"ai-badge\">AI</span>\n      </div>\n      <p class=\"agent-role\">COP30 AI Agent </p>\n    </div>\n\n    <!-- Start Call (when idle only) -->\n    <div *ngIf=\"callState === 'idle'\" class=\"start-call-section\">\n      <p *ngIf=\"statusText === 'Connection failed'\" class=\"error-message\">\n        {{ statusText }}\n      </p>\n      <button\n        class=\"start-call-button\"\n        type=\"button\"\n        [disabled]=\"isConnecting\"\n        (click)=\"startCall()\"\n      >\n        <span *ngIf=\"isConnecting\">Connecting...</span>\n        <span *ngIf=\"!isConnecting && statusText === 'Connection failed'\"\n          >Retry</span\n        >\n        <span *ngIf=\"!isConnecting && statusText !== 'Connection failed'\"\n          >Start Call</span\n        >\n      </button>\n    </div>\n\n    <!-- Call Ended: status + Call Again / Back to Chat -->\n    <div *ngIf=\"callState === 'ended'\" class=\"call-ended-section\">\n      <p class=\"call-ended-status\">\n        <span class=\"status-text\">Call Ended</span>\n        <span class=\"status-timer\">{{ duration }}</span>\n      </p>\n      <div class=\"call-ended-controls\">\n        <button\n          class=\"action-btn\"\n          type=\"button\"\n          (click)=\"callAgain()\"\n          title=\"Call Again\"\n        >\n          <svg\n            width=\"18\"\n            height=\"18\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\" />\n            <path d=\"M3 3v5h5\" />\n          </svg>\n          Call Again\n        </button>\n        <button\n          class=\"action-btn\"\n          type=\"button\"\n          (click)=\"backToChat()\"\n          title=\"Back to Chat\"\n        >\n          <svg\n            width=\"18\"\n            height=\"18\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\" />\n          </svg>\n          Back to Chat\n        </button>\n      </div>\n    </div>\n\n    <!-- Status (when connecting or in-call: Talking... / Listening / Connected + timer) -->\n    <div\n      class=\"status-indicator status-inline\"\n      *ngIf=\"callState !== 'idle' && callState !== 'ended'\"\n    >\n      <div *ngIf=\"callState === 'connecting'\" class=\"status-connecting\">\n        <svg\n          class=\"spinner\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"12\"\n            cy=\"12\"\n            r=\"10\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-dasharray=\"31.416\"\n            stroke-dashoffset=\"31.416\"\n          >\n            <animate\n              attributeName=\"stroke-dasharray\"\n              dur=\"2s\"\n              values=\"0 31.416;15.708 15.708;0 31.416;0 31.416\"\n              repeatCount=\"indefinite\"\n            />\n            <animate\n              attributeName=\"stroke-dashoffset\"\n              dur=\"2s\"\n              values=\"0;-15.708;-31.416;-31.416\"\n              repeatCount=\"indefinite\"\n            />\n          </circle>\n        </svg>\n        <span class=\"status-text\">{{ statusText }}</span>\n      </div>\n      <div\n        *ngIf=\"callState !== 'connecting'\"\n        class=\"status-connected status-inline-row\"\n      >\n        <span class=\"status-text\" [class.status-talking]=\"isBotTalking\" [class.status-listening]=\"callState === 'listening'\" [class.status-processing]=\"isProcessing\">\n          {{ statusLabel }}\n        </span>\n\n        <!-- Animated bars \u2014 visible while bot is talking -->\n        <div *ngIf=\"isBotTalking\" class=\"voice-visualizer\">\n          <div class=\"vbar\"></div>\n          <div class=\"vbar\"></div>\n          <div class=\"vbar\"></div>\n          <div class=\"vbar\"></div>\n        </div>\n\n        <!-- Bouncing dots \u2014 visible during processing pause -->\n        <div *ngIf=\"isProcessing\" class=\"processing-dots\">\n          <span></span><span></span><span></span>\n        </div>\n\n        <span class=\"status-timer\">{{ duration }}</span>\n      </div>\n    </div>\n\n    <!-- Waveform: always visible during an active call, active (coloured) when user speaks -->\n    <div\n      *ngIf=\"callState === 'connected' || callState === 'listening' || callState === 'talking'\"\n      class=\"waveform-container\"\n    >\n      <div class=\"waveform-bars\">\n        <div\n          *ngFor=\"let level of audioLevels; let i = index\"\n          class=\"waveform-bar\"\n          [class.active]=\"isUserActive\"\n          [style.height.px]=\"getWaveformHeight(level, i)\"\n        ></div>\n      </div>\n    </div>\n\n    <!-- Call Controls (when connected) -->\n    <div\n      class=\"controls\"\n      *ngIf=\"\n        callState === 'connected' ||\n        callState === 'listening' ||\n        callState === 'talking'\n      \"\n    >\n      <div\n        style=\"\n          display: flex;\n          align-items: center;\n          gap: 2px;\n          flex-direction: column;\n        \"\n      >\n        <button\n          class=\"control-btn mic-btn\"\n          [class.muted]=\"isMicMuted\"\n          (click)=\"toggleMic()\"\n          type=\"button\"\n          [title]=\"isMicMuted ? 'Unmute' : 'Mute'\"\n        >\n          <!-- Microphone icon (unmuted) -->\n          <svg\n            *ngIf=\"!isMicMuted\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"-5 0 32 32\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"currentColor\"\n          >\n            <g transform=\"translate(-105, -307)\">\n              <path\n                d=\"M111,314 C111,311.238 113.239,309 116,309 C118.761,309 121,311.238 121,314 L121,324 C121,326.762 118.761,329 116,329 C113.239,329 111,326.762 111,324 L111,314 L111,314 Z M116,331 C119.866,331 123,327.866 123,324 L123,314 C123,310.134 119.866,307 116,307 C112.134,307 109,310.134 109,314 L109,324 C109,327.866 112.134,331 116,331 L116,331 Z M127,326 L125,326 C124.089,330.007 120.282,333 116,333 C111.718,333 107.911,330.007 107,326 L105,326 C105.883,330.799 110.063,334.51 115,334.955 L115,337 L114,337 C113.448,337 113,337.448 113,338 C113,338.553 113.448,339 114,339 L118,339 C118.552,339 119,338.553 119,338 C119,337.448 118.552,337 118,337 L117,337 L117,334.955 C121.937,334.51 126.117,330.799 127,326 L127,326 Z\"\n              />\n            </g>\n          </svg>\n          <!-- Microphone icon (muted) -->\n          <svg\n            *ngIf=\"isMicMuted\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"-5 0 32 32\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"currentColor\"\n          >\n            <g transform=\"translate(-105, -307)\">\n              <path\n                d=\"M111,314 C111,311.238 113.239,309 116,309 C118.761,309 121,311.238 121,314 L121,324 C121,326.762 118.761,329 116,329 C113.239,329 111,326.762 111,324 L111,314 L111,314 Z M116,331 C119.866,331 123,327.866 123,324 L123,314 C123,310.134 119.866,307 116,307 C112.134,307 109,310.134 109,314 L109,324 C109,327.866 112.134,331 116,331 L116,331 Z M127,326 L125,326 C124.089,330.007 120.282,333 116,333 C111.718,333 107.911,330.007 107,326 L105,326 C105.883,330.799 110.063,334.51 115,334.955 L115,337 L114,337 C113.448,337 113,337.448 113,338 C113,338.553 113.448,339 114,339 L118,339 C118.552,339 119,338.553 119,338 C119,337.448 118.552,337 118,337 L117,337 L117,334.955 C121.937,334.51 126.117,330.799 127,326 L127,326 Z\"\n              />\n            </g>\n            <path\n              d=\"M2 2 L30 30\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n        <span class=\"control-label\">Mute</span>\n      </div>\n\n      <div\n        style=\"\n          display: flex;\n          align-items: center;\n          gap: 2px;\n          flex-direction: column;\n        \"\n      >\n        <button\n          class=\"control-btn end-call-btn\"\n          (click)=\"hangUp()\"\n          type=\"button\"\n          title=\"End Call\"\n        >\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M18 6L6 18M6 6L18 18\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n        <span class=\"control-label\">End Call</span>\n      </div>\n    </div>\n  </div>\n</div>\n",
-                styles: [":host{display:block}.voice-agent-modal-overlay{align-items:flex-end;backdrop-filter:blur(4px);background:rgba(0,0,0,.5);bottom:0;display:flex;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;justify-content:flex-end;left:0;padding:24px;position:fixed;right:0;top:0;z-index:99999}.voice-container.voice-agent-modal{align-items:center;animation:modalEnter .3s ease-out;background:#fff;border-radius:30px;box-shadow:0 10px 40px rgba(0,0,0,.1);display:flex;flex-direction:column;max-width:440px;min-height:600px;padding:30px;position:relative;text-align:center;width:100%}@keyframes modalEnter{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.header{justify-content:space-between;margin-bottom:5px;width:100%}.header,.header-left{align-items:center;display:flex}.header-left{gap:8px}.header-icon{align-items:center;background:#0f172a;border-radius:50%;color:#fff;display:flex;height:28px;justify-content:center;width:28px}.header-title{color:#0f172a;font-size:18px;font-weight:500}.close-button{align-items:center;background:none;border:none;color:#0f172a;cursor:pointer;display:flex;justify-content:center;padding:8px;transition:color .2s}.close-button:hover{color:#475569}.avatar-section{margin-bottom:24px;position:relative}.avatar-wrapper{align-items:center;background:#0ea5a4;background:linear-gradient(135deg,#ccfbf1,#0ea5a4);border-radius:50%;display:flex;height:180px;justify-content:center;padding:6px;position:relative;width:180px}.avatar-image{-o-object-fit:cover;border:4px solid #fff;border-radius:50%;height:100%;object-fit:cover;width:100%}.avatar-glow{background:radial-gradient(circle,rgba(14,165,164,.2) 0,transparent 70%);height:240px;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .4s ease;width:240px;z-index:-1}.avatar-glow.glow-talking{animation:glowPulse 1.5s ease-in-out infinite;background:radial-gradient(circle,rgba(14,165,164,.35) 0,transparent 65%);height:280px;width:280px}.avatar-glow.glow-listening{background:radial-gradient(circle,rgba(99,102,241,.25) 0,transparent 65%)}@keyframes glowPulse{0%,to{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}.avatar-wrapper.speaking{animation:avatarPulse 1.4s ease-in-out infinite}.avatar-wrapper.listening{animation:avatarListenPulse 1.8s ease-in-out infinite}@keyframes avatarPulse{0%,to{box-shadow:0 0 0 0 rgba(14,165,164,.5)}50%{box-shadow:0 0 0 18px rgba(14,165,164,0)}}@keyframes avatarListenPulse{0%,to{box-shadow:0 0 0 0 rgba(99,102,241,.4)}50%{box-shadow:0 0 0 14px rgba(99,102,241,0)}}.particles-container{height:0;left:50%;pointer-events:none;position:absolute;top:50%;width:0;z-index:2}.particle{animation:particleOrbit 2.4s ease-in-out infinite;animation-delay:var(--delay,0s);background:#0ea5a4;border-radius:50%;height:7px;opacity:0;position:absolute;transform-origin:0 0;width:7px}@keyframes particleOrbit{0%{opacity:0;transform:rotate(calc(var(--i, 0)*22.5deg)) translateY(-108px) scale(.4)}25%{opacity:.9}75%{opacity:.9}to{opacity:0;transform:rotate(calc(var(--i, 0)*22.5deg + 45deg)) translateY(-108px) scale(.4)}}.agent-info{margin-bottom:40px}.agent-name{align-items:center;color:#0f172a;display:flex;font-size:24px;font-weight:700;gap:8px;justify-content:center;margin-bottom:8px}.ai-badge{background:#0ea5a4;border-radius:6px;color:#fff;font-size:10px;font-weight:700;padding:2px 6px}.agent-role{color:#0f172a;font-size:16px;font-weight:500;margin:0}.start-call-section{align-items:center;display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.error-message{color:#dc2626;font-size:14px;margin:0}.start-call-button{background:#0ea5a4;border:none;border-radius:12px;color:#fff;cursor:pointer;font-size:16px;font-weight:600;padding:14px 32px;transition:background .2s}.start-call-button:hover:not(:disabled){background:#0d9488}.start-call-button:disabled{cursor:not-allowed!important;opacity:.7}.status-indicator{justify-content:center;margin-bottom:10px}.status-connecting,.status-indicator{align-items:center;display:flex;gap:12px}.spinner{animation:spin 1s linear infinite;color:#0ea5a4}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.status-text{color:#0f172a;font-size:16px;font-weight:400;transition:color .25s ease}.status-text.status-talking{color:#0ea5a4;font-weight:500}.status-text.status-listening{color:#6366f1;font-weight:500}.status-text.status-processing{color:#94a3b8}.status-timer{color:#0f172a;font-size:16px;font-weight:500}.voice-visualizer{align-items:center;display:flex;gap:3px;height:18px}.vbar{animation:vbarBounce 1s ease-in-out infinite;background:#0ea5a4;border-radius:2px;height:6px;width:3px}.vbar:first-child{animation-delay:0s}.vbar:nth-child(2){animation-delay:.15s}.vbar:nth-child(3){animation-delay:.3s}.vbar:nth-child(4){animation-delay:.45s}@keyframes vbarBounce{0%,to{height:4px;opacity:.5}50%{height:16px;opacity:1}}.processing-dots{align-items:center;display:flex;gap:4px}.processing-dots span{animation:dotFade 1.2s ease-in-out infinite;background:#94a3b8;border-radius:50%;display:inline-block;height:5px;width:5px}.processing-dots span:first-child{animation-delay:0s}.processing-dots span:nth-child(2){animation-delay:.2s}.processing-dots span:nth-child(3){animation-delay:.4s}@keyframes dotFade{0%,80%,to{opacity:.4;transform:scale(.8)}40%{opacity:1;transform:scale(1.2)}}.status-connected{align-items:center;display:flex;flex-direction:column;gap:4px}.status-inline .status-inline-row{align-items:center;flex-direction:row;gap:8px}.call-ended-section{align-items:center;display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.call-ended-status{align-items:center;color:#0f172a;display:flex;font-size:16px;gap:8px;justify-content:center;margin:0}.call-ended-status .status-text{font-weight:400}.call-ended-status .status-timer{font-weight:500}.call-ended-controls{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:center}.action-btn{align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:24px;color:#0f172a;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:8px;padding:12px 24px;transition:background .2s ease}.action-btn:hover{background:#f8fafc}.waveform-container{margin-bottom:10px;padding:0 8px}.waveform-bars,.waveform-container{align-items:center;display:flex;height:56px;justify-content:center;width:100%}.waveform-bars{gap:2px}.waveform-bar{background:#cbd5e1;border-radius:99px;flex:0 0 2px;min-height:2px;transition:height .1s ease-out;width:2px}.waveform-bar.active{background:linear-gradient(180deg,#0ea5a4,#0d9488);box-shadow:0 0 4px rgba(14,165,164,.5)}.controls{gap:24px;width:100%}.control-btn,.controls{align-items:center;display:flex;justify-content:center}.control-btn{border:none;border-radius:50%;cursor:pointer;flex-direction:column;gap:4px;height:60px;transition:transform .2s ease;width:60px}.control-btn:hover{transform:scale(1.05)}.control-btn:active{transform:scale(.95)}.control-label{color:#0f172a;font-size:12px;font-weight:500}.mic-btn{background:#e2e8f0}.mic-btn,.mic-btn .control-label{color:#475569}.mic-btn.muted{background:#e2e8f0;color:#475569}.end-call-btn{background:#ef4444;color:#fff}.end-call-btn .control-label{color:#fff}.end-call-btn:hover{background:#dc2626}"]
+                template: "<div class=\"voice-agent-modal-overlay\" (click)=\"endCall()\">\n  <div\n    class=\"voice-container voice-agent-modal\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <!-- Header -->\n    <div class=\"header\">\n      <div class=\"header-left\">\n        <div class=\"header-icon\">\n          <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M12 1C8.13 1 5 4.13 5 8V14C5 17.87 8.13 21 12 21C15.87 21 19 17.87 19 14V8C19 4.13 15.87 1 12 1Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M12 23C10.34 23 9 21.66 9 20H15C15 21.66 13.66 23 12 23Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </div>\n        <span class=\"header-title\">Voice</span>\n      </div>\n      <button\n        class=\"close-button\"\n        (click)=\"endCall()\"\n        type=\"button\"\n        aria-label=\"Close\"\n      >\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M18 6L6 18M6 6L18 18\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n      </button>\n    </div>\n\n    <!-- Avatar Section with glow -->\n    <div class=\"avatar-section\">\n      <div class=\"avatar-glow\"></div>\n      <div class=\"avatar-wrapper\" [class.speaking]=\"isSpeaking\">\n        <img class=\"avatar-image\" [src]=\"displayAvatarUrl\" alt=\"Nia\" />\n      </div>\n    </div>\n\n    <!-- Agent Info: Nia + Collaboration Manager AI Agent Specialist -->\n    <div class=\"agent-info\">\n      <div class=\"agent-name\">\n        Nia\n        <span class=\"ai-badge\">AI</span>\n      </div>\n      <p class=\"agent-role\">COP30 AI Agent </p>\n    </div>\n\n    <!-- Start Call (when idle only) -->\n    <div *ngIf=\"callState === 'idle'\" class=\"start-call-section\">\n      <p *ngIf=\"statusText === 'Connection failed'\" class=\"error-message\">\n        {{ statusText }}\n      </p>\n      <button\n        class=\"start-call-button\"\n        type=\"button\"\n        [disabled]=\"isConnecting\"\n        (click)=\"startCall()\"\n      >\n        <span *ngIf=\"isConnecting\">Connecting...</span>\n        <span *ngIf=\"!isConnecting && statusText === 'Connection failed'\"\n          >Retry</span\n        >\n        <span *ngIf=\"!isConnecting && statusText !== 'Connection failed'\"\n          >Start Call</span\n        >\n      </button>\n    </div>\n\n    <!-- Call Ended: status + Call Again / Back to Chat -->\n    <div *ngIf=\"callState === 'ended'\" class=\"call-ended-section\">\n      <p class=\"call-ended-status\">\n        <span class=\"status-text\">Call Ended</span>\n        <span class=\"status-timer\">{{ duration }}</span>\n      </p>\n      <div class=\"call-ended-controls\">\n        <button\n          class=\"action-btn\"\n          type=\"button\"\n          (click)=\"callAgain()\"\n          title=\"Call Again\"\n        >\n          <svg\n            width=\"18\"\n            height=\"18\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\" />\n            <path d=\"M3 3v5h5\" />\n          </svg>\n          Call Again\n        </button>\n        <button\n          class=\"action-btn\"\n          type=\"button\"\n          (click)=\"backToChat()\"\n          title=\"Back to Chat\"\n        >\n          <svg\n            width=\"18\"\n            height=\"18\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\" />\n          </svg>\n          Back to Chat\n        </button>\n      </div>\n    </div>\n\n    <!-- Status (when connecting or in-call: Talking... / Listening / Connected + timer) -->\n    <div\n      class=\"status-indicator status-inline\"\n      *ngIf=\"callState !== 'idle' && callState !== 'ended'\"\n    >\n      <div *ngIf=\"callState === 'connecting'\" class=\"status-connecting\">\n        <svg\n          class=\"spinner\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"12\"\n            cy=\"12\"\n            r=\"10\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-dasharray=\"31.416\"\n            stroke-dashoffset=\"31.416\"\n          >\n            <animate\n              attributeName=\"stroke-dasharray\"\n              dur=\"2s\"\n              values=\"0 31.416;15.708 15.708;0 31.416;0 31.416\"\n              repeatCount=\"indefinite\"\n            />\n            <animate\n              attributeName=\"stroke-dashoffset\"\n              dur=\"2s\"\n              values=\"0;-15.708;-31.416;-31.416\"\n              repeatCount=\"indefinite\"\n            />\n          </circle>\n        </svg>\n        <span class=\"status-text\">{{ statusText }}</span>\n      </div>\n      <div\n        *ngIf=\"callState !== 'connecting'\"\n        class=\"status-connected status-inline-row\"\n      >\n        <span class=\"status-text\">{{ statusLabel }}</span>\n        <span class=\"status-timer\">{{ duration }}</span>\n      </div>\n    </div>\n\n    <!-- Waveform -->\n    <div\n      *ngIf=\"callState === 'listening'\"\n      class=\"waveform-container\"\n    >\n      <div class=\"waveform-bars\">\n        <div\n          *ngFor=\"let level of audioLevels; let i = index\"\n          class=\"waveform-bar\"\n          [class.active]=\"isUserSpeaking\"\n          [style.height.px]=\"getWaveformHeight(level, i)\"\n        ></div>\n      </div>\n    </div>\n\n    <!-- Call Controls (when connected) -->\n    <div\n      class=\"controls\"\n      *ngIf=\"\n        callState === 'connected' ||\n        callState === 'listening' ||\n        callState === 'talking'\n      \"\n    >\n      <div\n        style=\"\n          display: flex;\n          align-items: center;\n          gap: 2px;\n          flex-direction: column;\n        \"\n      >\n        <button\n          class=\"control-btn mic-btn\"\n          [class.muted]=\"isMicMuted\"\n          (click)=\"toggleMic()\"\n          type=\"button\"\n          [title]=\"isMicMuted ? 'Unmute' : 'Mute'\"\n        >\n          <!-- Microphone icon (unmuted) -->\n          <svg\n            *ngIf=\"!isMicMuted\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"-5 0 32 32\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"currentColor\"\n          >\n            <g transform=\"translate(-105, -307)\">\n              <path\n                d=\"M111,314 C111,311.238 113.239,309 116,309 C118.761,309 121,311.238 121,314 L121,324 C121,326.762 118.761,329 116,329 C113.239,329 111,326.762 111,324 L111,314 L111,314 Z M116,331 C119.866,331 123,327.866 123,324 L123,314 C123,310.134 119.866,307 116,307 C112.134,307 109,310.134 109,314 L109,324 C109,327.866 112.134,331 116,331 L116,331 Z M127,326 L125,326 C124.089,330.007 120.282,333 116,333 C111.718,333 107.911,330.007 107,326 L105,326 C105.883,330.799 110.063,334.51 115,334.955 L115,337 L114,337 C113.448,337 113,337.448 113,338 C113,338.553 113.448,339 114,339 L118,339 C118.552,339 119,338.553 119,338 C119,337.448 118.552,337 118,337 L117,337 L117,334.955 C121.937,334.51 126.117,330.799 127,326 L127,326 Z\"\n              />\n            </g>\n          </svg>\n          <!-- Microphone icon (muted) -->\n          <svg\n            *ngIf=\"isMicMuted\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"-5 0 32 32\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"currentColor\"\n          >\n            <g transform=\"translate(-105, -307)\">\n              <path\n                d=\"M111,314 C111,311.238 113.239,309 116,309 C118.761,309 121,311.238 121,314 L121,324 C121,326.762 118.761,329 116,329 C113.239,329 111,326.762 111,324 L111,314 L111,314 Z M116,331 C119.866,331 123,327.866 123,324 L123,314 C123,310.134 119.866,307 116,307 C112.134,307 109,310.134 109,314 L109,324 C109,327.866 112.134,331 116,331 L116,331 Z M127,326 L125,326 C124.089,330.007 120.282,333 116,333 C111.718,333 107.911,330.007 107,326 L105,326 C105.883,330.799 110.063,334.51 115,334.955 L115,337 L114,337 C113.448,337 113,337.448 113,338 C113,338.553 113.448,339 114,339 L118,339 C118.552,339 119,338.553 119,338 C119,337.448 118.552,337 118,337 L117,337 L117,334.955 C121.937,334.51 126.117,330.799 127,326 L127,326 Z\"\n              />\n            </g>\n            <path\n              d=\"M2 2 L30 30\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n        <span class=\"control-label\">Mute</span>\n      </div>\n\n      <div\n        style=\"\n          display: flex;\n          align-items: center;\n          gap: 2px;\n          flex-direction: column;\n        \"\n      >\n        <button\n          class=\"control-btn end-call-btn\"\n          (click)=\"hangUp()\"\n          type=\"button\"\n          title=\"End Call\"\n        >\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M18 6L6 18M6 6L18 18\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n        <span class=\"control-label\">End Call</span>\n      </div>\n    </div>\n  </div>\n</div>\n",
+                styles: [":host{display:block}.voice-agent-modal-overlay{align-items:flex-end;backdrop-filter:blur(4px);background:rgba(0,0,0,.5);bottom:0;display:flex;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;justify-content:flex-end;left:0;padding:24px;position:fixed;right:0;top:0;z-index:99999}.voice-container.voice-agent-modal{align-items:center;animation:modalEnter .3s ease-out;background:#fff;border-radius:30px;box-shadow:0 10px 40px rgba(0,0,0,.1);display:flex;flex-direction:column;max-width:440px;min-height:600px;padding:30px;position:relative;text-align:center;width:100%}@keyframes modalEnter{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.header{justify-content:space-between;margin-bottom:5px;width:100%}.header,.header-left{align-items:center;display:flex}.header-left{gap:8px}.header-icon{align-items:center;background:#0f172a;border-radius:50%;color:#fff;display:flex;height:28px;justify-content:center;width:28px}.header-title{color:#0f172a;font-size:18px;font-weight:500}.close-button{align-items:center;background:none;border:none;color:#0f172a;cursor:pointer;display:flex;justify-content:center;padding:8px;transition:color .2s}.close-button:hover{color:#475569}.avatar-section{margin-bottom:24px;position:relative}.avatar-wrapper{align-items:center;background:#0ea5a4;background:linear-gradient(135deg,#ccfbf1,#0ea5a4);border-radius:50%;display:flex;height:180px;justify-content:center;padding:6px;position:relative;width:180px}.avatar-image{-o-object-fit:cover;border:4px solid #fff;border-radius:50%;height:100%;object-fit:cover;width:100%}.avatar-glow{background:radial-gradient(circle,rgba(14,165,164,.2) 0,transparent 70%);height:240px;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:240px;z-index:-1}.avatar-wrapper.speaking{animation:avatarPulse 2s ease-in-out infinite}@keyframes avatarPulse{0%,to{box-shadow:0 0 0 0 rgba(14,165,164,.4)}50%{box-shadow:0 0 0 15px rgba(14,165,164,0)}}.agent-info{margin-bottom:40px}.agent-name{align-items:center;color:#0f172a;display:flex;font-size:24px;font-weight:700;gap:8px;justify-content:center;margin-bottom:8px}.ai-badge{background:#0ea5a4;border-radius:6px;color:#fff;font-size:10px;font-weight:700;padding:2px 6px}.agent-role{color:#0f172a;font-size:16px;font-weight:500;margin:0}.start-call-section{align-items:center;display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.error-message{color:#dc2626;font-size:14px;margin:0}.start-call-button{background:#0ea5a4;border:none;border-radius:12px;color:#fff;cursor:pointer;font-size:16px;font-weight:600;padding:14px 32px;transition:background .2s}.start-call-button:hover:not(:disabled){background:#0d9488}.start-call-button:disabled{cursor:not-allowed!important;opacity:.7}.status-indicator{justify-content:center;margin-bottom:10px}.status-connecting,.status-indicator{align-items:center;display:flex;gap:12px}.spinner{animation:spin 1s linear infinite;color:#0ea5a4}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.status-text{font-weight:400}.status-text,.status-timer{color:#0f172a;font-size:16px}.status-timer{font-weight:500}.status-connected{align-items:center;display:flex;flex-direction:column;gap:4px}.status-inline .status-inline-row{align-items:center;flex-direction:row;gap:8px}.call-ended-section{align-items:center;display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.call-ended-status{align-items:center;color:#0f172a;display:flex;font-size:16px;gap:8px;justify-content:center;margin:0}.call-ended-status .status-text{font-weight:400}.call-ended-status .status-timer{font-weight:500}.call-ended-controls{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:center}.action-btn{align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:24px;color:#0f172a;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:8px;padding:12px 24px;transition:background .2s ease}.action-btn:hover{background:#f8fafc}.waveform-container{margin-bottom:10px;padding:0 8px}.waveform-bars,.waveform-container{align-items:center;display:flex;height:56px;justify-content:center;width:100%}.waveform-bars{gap:2px}.waveform-bar{background:#cbd5e1;border-radius:99px;flex:0 0 2px;min-height:2px;transition:height .1s ease-out;width:2px}.waveform-bar.active{background:linear-gradient(180deg,#0ea5a4,#0d9488);box-shadow:0 0 4px rgba(14,165,164,.5)}.controls{gap:24px;width:100%}.control-btn,.controls{align-items:center;display:flex;justify-content:center}.control-btn{border:none;border-radius:50%;cursor:pointer;flex-direction:column;gap:4px;height:60px;transition:transform .2s ease;width:60px}.control-btn:hover{transform:scale(1.05)}.control-btn:active{transform:scale(.95)}.control-label{color:#0f172a;font-size:12px;font-weight:500}.mic-btn{background:#e2e8f0}.mic-btn,.mic-btn .control-label{color:#475569}.mic-btn.muted{background:#e2e8f0;color:#475569}.end-call-btn{background:#ef4444;color:#fff}.end-call-btn .control-label{color:#fff}.end-call-btn:hover{background:#dc2626}"]
             },] }
 ];
 VoiceAgentModalComponent.ctorParameters = () => [
@@ -5126,8 +5495,8 @@ ChatBotComponent.propDecorators = {
 };
 
 /**
- * Voice agent module. Uses @pipecat-ai/client-js + @pipecat-ai/websocket-transport
- * (peer dependencies) for WebSocket transport, RTVI protocol, and audio.
+ * Voice agent module. Uses native WebSocket + Daily.js only.
+ * Does NOT use Socket.IO or ngx-socket-io.
  */
 class VoiceAgentModule {
 }
@@ -5142,6 +5511,8 @@ VoiceAgentModule.decorators = [
                 providers: [
                     VoiceAgentService,
                     AudioAnalyzerService,
+                    WebSocketVoiceClientService,
+                    DailyVoiceClientService
                 ],
                 exports: [
                     VoiceAgentModalComponent
@@ -5412,5 +5783,5 @@ HiveGptModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AudioAnalyzerService, ChatBotComponent, ChatDrawerComponent, HIVEGPT_AUTH_STORAGE_KEY, HiveGptModule, PlatformTokenRefreshService, VOICE_MODAL_CLOSE_CALLBACK, VOICE_MODAL_CONFIG, VoiceAgentModalComponent, VoiceAgentModule, VoiceAgentService, eClassificationType, hiveGptAuthStorageKeyFactory, BotsService as ɵa, SocketService as ɵb, ConversationService as ɵc, NotificationSocket as ɵd, TranslationService as ɵe, VideoPlayerComponent as ɵf, SafeHtmlPipe as ɵg, BotHtmlEditorComponent as ɵh };
+export { AudioAnalyzerService, ChatBotComponent, ChatDrawerComponent, HIVEGPT_AUTH_STORAGE_KEY, HiveGptModule, PlatformTokenRefreshService, VOICE_MODAL_CLOSE_CALLBACK, VOICE_MODAL_CONFIG, VoiceAgentModalComponent, VoiceAgentModule, VoiceAgentService, eClassificationType, hiveGptAuthStorageKeyFactory, BotsService as ɵa, SocketService as ɵb, ConversationService as ɵc, NotificationSocket as ɵd, TranslationService as ɵe, WebSocketVoiceClientService as ɵf, DailyVoiceClientService as ɵg, VideoPlayerComponent as ɵh, SafeHtmlPipe as ɵi, BotHtmlEditorComponent as ɵj };
 //# sourceMappingURL=hivegpt-hiveai-angular.js.map