@hivegpt/hiveai-angular 0.0.583 → 0.0.585

package/bundles/hivegpt-hiveai-angular.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/common/http'), require('@angular/core'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('ngx-socket-io'), require('@angular/forms'), require('microsoft-cognitiveservices-speech-sdk'), require('marked'), require('@angular/material/icon'), require('@angular/material/sidenav'), require('ngx-quill')) :
-    typeof define === 'function' && define.amd ? define('@hivegpt/hiveai-angular', ['exports', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/common/http', '@angular/core', '@angular/platform-browser', 'rxjs', 'rxjs/operators', '@angular/common', 'ngx-socket-io', '@angular/forms', 'microsoft-cognitiveservices-speech-sdk', 'marked', '@angular/material/icon', '@angular/material/sidenav', 'ngx-quill'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.hivegpt = global.hivegpt || {}, global.hivegpt["hiveai-angular"] = {}), global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.common.http, global.ng.core, global.ng.platformBrowser, global.rxjs, global.rxjs.operators, global.ng.common, global.ngxSocketIo, global.ng.forms, global.SpeechSDK, global.marked, global.ng.material.icon, global.ng.material.sidenav, global.ngxQuill));
-})(this, (function (exports, overlay, portal, i1, i0, platformBrowser, rxjs, operators, common, ngxSocketIo, forms, SpeechSDK, marked, icon, sidenav, ngxQuill) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/common/http'), require('@angular/core'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('ngx-socket-io'), require('@angular/forms'), require('microsoft-cognitiveservices-speech-sdk'), require('marked'), require('@pipecat-ai/client-js'), require('@pipecat-ai/websocket-transport'), require('@angular/material/icon'), require('@angular/material/sidenav'), require('ngx-quill')) :
+    typeof define === 'function' && define.amd ? define('@hivegpt/hiveai-angular', ['exports', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/common/http', '@angular/core', '@angular/platform-browser', 'rxjs', 'rxjs/operators', '@angular/common', 'ngx-socket-io', '@angular/forms', 'microsoft-cognitiveservices-speech-sdk', 'marked', '@pipecat-ai/client-js', '@pipecat-ai/websocket-transport', '@angular/material/icon', '@angular/material/sidenav', 'ngx-quill'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.hivegpt = global.hivegpt || {}, global.hivegpt["hiveai-angular"] = {}), global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.common.http, global.ng.core, global.ng.platformBrowser, global.rxjs, global.rxjs.operators, global.ng.common, global.ngxSocketIo, global.ng.forms, global.SpeechSDK, global.marked, global.clientJs, global.websocketTransport, global.ng.material.icon, global.ng.material.sidenav, global.ngxQuill));
+})(this, (function (exports, overlay, portal, i1, i0, platformBrowser, rxjs, operators, common, ngxSocketIo, forms, SpeechSDK, marked, clientJs, websocketTransport, icon, sidenav, ngxQuill) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -1339,237 +1339,24 @@
     ];
 
     /**
-     * Native WebSocket client for voice session (signaling, transcripts, speaking hints).
-     * CRITICAL: Uses native WebSocket only. NO Socket.IO, NO ngx-socket-io.
+     * Voice agent orchestrator using the official PipecatClient SDK.
      *
-     * Connects to `ws_url` from `POST {baseUrl}/ai/ask-voice-socket`.
-     * Parses JSON messages for transcripts and optional assistant/user speaking flags.
-     */
-    var WebSocketVoiceClientService = /** @class */ (function () {
-        function WebSocketVoiceClientService(ngZone) {
-            this.ngZone = ngZone;
-            this.ws = null;
-            /** True when {@link disconnect} initiated the close (not counted as remote close). */
-            this.closeInitiatedByClient = false;
-            this.openedSubject = new rxjs.Subject();
-            this.remoteCloseSubject = new rxjs.Subject();
-            this.userTranscriptSubject = new rxjs.Subject();
-            this.botTranscriptSubject = new rxjs.Subject();
-            this.assistantSpeakingSubject = new rxjs.Subject();
-            this.serverUserSpeakingSubject = new rxjs.Subject();
-            this.audioChunkSubject = new rxjs.Subject();
-            /** Fires once each time the WebSocket reaches OPEN. */
-            this.opened$ = this.openedSubject.asObservable();
-            /** Fires when the socket closes without a client-initiated {@link disconnect}. */
-            this.remoteClose$ = this.remoteCloseSubject.asObservable();
-            this.userTranscript$ = this.userTranscriptSubject.asObservable();
-            this.botTranscript$ = this.botTranscriptSubject.asObservable();
-            /** Assistant/bot speaking, when the server sends explicit events (see {@link handleJsonMessage}). */
-            this.assistantSpeaking$ = this.assistantSpeakingSubject.asObservable();
-            /** User speaking from server-side VAD, if provided. */
-            this.serverUserSpeaking$ = this.serverUserSpeakingSubject.asObservable();
-            /** Binary audio frames from server (when backend streams bot audio over WS). */
-            this.audioChunk$ = this.audioChunkSubject.asObservable();
-        }
-        WebSocketVoiceClientService.prototype.connect = function (wsUrl) {
-            var _this = this;
-            var _a;
-            if (((_a = this.ws) === null || _a === void 0 ? void 0 : _a.readyState) === WebSocket.OPEN) {
-                return;
-            }
-            if (this.ws) {
-                this.closeInitiatedByClient = true;
-                this.ws.close();
-            }
-            try {
-                var socket_1 = new WebSocket(wsUrl);
-                this.ws = socket_1;
-                socket_1.onopen = function () {
-                    if (_this.ws !== socket_1)
-                        return;
-                    _this.ngZone.run(function () { return _this.openedSubject.next(); });
-                };
-                socket_1.onmessage = function (event) {
-                    if (_this.ws !== socket_1)
-                        return;
-                    void _this.handleIncomingMessage(event.data);
-                };
-                socket_1.onerror = function () {
-                    _this.ngZone.run(function () {
-                        if (_this.ws === socket_1 && socket_1.readyState !== WebSocket.CLOSED) {
-                            socket_1.close();
-                        }
-                    });
-                };
-                socket_1.onclose = function () {
-                    if (_this.ws === socket_1) {
-                        _this.ws = null;
-                    }
-                    var client = _this.closeInitiatedByClient;
-                    _this.closeInitiatedByClient = false;
-                    if (!client) {
-                        _this.ngZone.run(function () { return _this.remoteCloseSubject.next(); });
-                    }
-                };
-            }
-            catch (err) {
-                console.error('WebSocketVoiceClient: connect failed', err);
-                this.ws = null;
-                throw err;
-            }
-        };
-        WebSocketVoiceClientService.prototype.handleIncomingMessage = function (payload) {
-            return __awaiter(this, void 0, void 0, function () {
-                var ab;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            if (typeof payload === 'string') {
-                                this.handleJsonString(payload);
-                                return [2 /*return*/];
-                            }
-                            if (payload instanceof ArrayBuffer) {
-                                this.handleBinaryMessage(payload);
-                                return [2 /*return*/];
-                            }
-                            if (!(payload instanceof Blob)) return [3 /*break*/, 2];
-                            return [4 /*yield*/, payload.arrayBuffer()];
-                        case 1:
-                            ab = _b.sent();
-                            this.handleBinaryMessage(ab);
-                            _b.label = 2;
-                        case 2: return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        WebSocketVoiceClientService.prototype.handleJsonString = function (jsonText) {
-            var _this = this;
-            try {
-                var msg_1 = JSON.parse(jsonText);
-                this.ngZone.run(function () { return _this.handleJsonMessage(msg_1); });
-            }
-            catch (_a) {
-                // Ignore non-JSON
-            }
-        };
-        WebSocketVoiceClientService.prototype.handleBinaryMessage = function (buffer) {
-            var _this = this;
-            // Some backends wrap JSON events inside binary WS frames.
-            var maybeText = this.tryDecodeUtf8(buffer);
-            if (maybeText !== null) {
-                this.handleJsonString(maybeText);
-                return;
-            }
-            // Otherwise treat binary as streamed assistant audio.
-            this.ngZone.run(function () { return _this.audioChunkSubject.next(buffer); });
-        };
-        WebSocketVoiceClientService.prototype.tryDecodeUtf8 = function (buffer) {
-            try {
-                var text = new TextDecoder('utf-8', { fatal: true }).decode(buffer);
-                var trimmed = text.trim();
-                if (!trimmed || (trimmed[0] !== '{' && trimmed[0] !== '[')) {
-                    return null;
-                }
-                return trimmed;
-            }
-            catch (_a) {
-                return null;
-            }
-        };
-        WebSocketVoiceClientService.prototype.handleJsonMessage = function (msg) {
-            var type = msg.type;
-            var typeStr = typeof type === 'string' ? type : '';
-            if (typeStr === 'session_ready' || typeStr === 'connected' || typeStr === 'voice_session_started') {
-                return;
-            }
-            if (typeStr === 'assistant_speaking' ||
-                typeStr === 'bot_speaking') {
-                if (msg.active === true || msg.speaking === true) {
-                    this.assistantSpeakingSubject.next(true);
-                }
-                else if (msg.active === false || msg.speaking === false) {
-                    this.assistantSpeakingSubject.next(false);
-                }
-                return;
-            }
-            if (typeStr === 'user_speaking') {
-                if (msg.active === true || msg.speaking === true) {
-                    this.serverUserSpeakingSubject.next(true);
-                }
-                else if (msg.active === false || msg.speaking === false) {
-                    this.serverUserSpeakingSubject.next(false);
-                }
-                return;
-            }
-            if (typeStr === 'input_audio_buffer.speech_started') {
-                this.serverUserSpeakingSubject.next(true);
-                return;
-            }
-            if (typeStr === 'input_audio_buffer.speech_stopped') {
-                this.serverUserSpeakingSubject.next(false);
-                return;
-            }
-            if (typeStr === 'response.audio.delta') {
-                this.assistantSpeakingSubject.next(true);
-                return;
-            }
-            if (typeStr === 'response.audio.done' ||
-                typeStr === 'response.output_audio.done') {
-                this.assistantSpeakingSubject.next(false);
-                return;
-            }
-            if (typeStr === 'user_transcript' && typeof msg.text === 'string') {
-                this.userTranscriptSubject.next({
-                    text: msg.text,
-                    final: msg.final === true,
-                });
-                return;
-            }
-            if (typeStr === 'bot_transcript' && typeof msg.text === 'string') {
-                this.botTranscriptSubject.next(msg.text);
-            }
-        };
-        WebSocketVoiceClientService.prototype.disconnect = function () {
-            if (!this.ws) {
-                return;
-            }
-            this.closeInitiatedByClient = true;
-            this.ws.close();
-        };
-        Object.defineProperty(WebSocketVoiceClientService.prototype, "isConnected", {
-            get: function () {
-                var _a;
-                return ((_a = this.ws) === null || _a === void 0 ? void 0 : _a.readyState) === WebSocket.OPEN;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return WebSocketVoiceClientService;
-    }());
-    WebSocketVoiceClientService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function WebSocketVoiceClientService_Factory() { return new WebSocketVoiceClientService(i0__namespace.ɵɵinject(i0__namespace.NgZone)); }, token: WebSocketVoiceClientService, providedIn: "root" });
-    WebSocketVoiceClientService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root',
-                },] }
-    ];
-    WebSocketVoiceClientService.ctorParameters = function () { return [
-        { type: i0.NgZone }
-    ]; };
-
-    /**
-     * Voice agent orchestrator: single WebSocket (`ws_url` from POST /ai/ask-voice-socket)
-     * for session events, transcripts, and optional speaking hints; local mic for capture
-     * and waveform only (no Daily/WebRTC room).
+     * 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.
      */
     var VoiceAgentService = /** @class */ (function () {
-        function VoiceAgentService(audioAnalyzer, wsClient, platformTokenRefresh, 
+        function VoiceAgentService(audioAnalyzer, platformTokenRefresh, ngZone, 
         /** `Object` not `object` — ngc metadata collection rejects the `object` type in DI params. */
         platformId) {
             var _this = this;
             this.audioAnalyzer = audioAnalyzer;
-            this.wsClient = wsClient;
             this.platformTokenRefresh = platformTokenRefresh;
+            this.ngZone = ngZone;
             this.platformId = platformId;
             this.callStateSubject = new rxjs.BehaviorSubject('idle');
             this.statusTextSubject = new rxjs.BehaviorSubject('');
@@ -1581,11 +1368,8 @@
             this.botTranscriptSubject = new rxjs.Subject();
             this.callStartTime = 0;
             this.durationInterval = null;
-            this.localMicStream = null;
-            this.remoteAudioContext = null;
-            this.pendingRemoteAudio = [];
-            this.remoteAudioPlaying = false;
-            this.endCall$ = new rxjs.Subject();
+            this.pcClient = null;
+            this.botAudioElement = null;
             this.subscriptions = new rxjs.Subscription();
             this.destroy$ = new rxjs.Subject();
             this.callState$ = this.callStateSubject.asObservable();
@@ -1597,123 +1381,134 @@
             this.userTranscript$ = this.userTranscriptSubject.asObservable();
             this.botTranscript$ = this.botTranscriptSubject.asObservable();
             this.subscriptions.add(this.audioAnalyzer.audioLevels$.subscribe(function (levels) { return _this.audioLevelsSubject.next(levels); }));
-            this.subscriptions.add(this.wsClient.remoteClose$
-                .pipe(operators.takeUntil(this.destroy$))
-                .subscribe(function () { return void _this.handleRemoteClose(); }));
-            this.subscriptions.add(this.wsClient.audioChunk$
-                .pipe(operators.takeUntil(this.destroy$))
-                .subscribe(function (chunk) { return _this.enqueueRemoteAudio(chunk); }));
         }
         VoiceAgentService.prototype.ngOnDestroy = function () {
             this.destroy$.next();
             this.subscriptions.unsubscribe();
-            this.disconnect();
+            void this.disconnect();
         };
-        /** Reset to idle state (e.g. when modal opens so user can click Start Call). */
+        /** Reset to idle (e.g. when modal re-opens so user can click Start Call). */
         VoiceAgentService.prototype.resetToIdle = function () {
             if (this.callStateSubject.value === 'idle')
                 return;
-            this.endCall$.next();
-            this.stopDurationTimer();
-            this.callStartTime = 0;
-            this.audioAnalyzer.stop();
-            this.stopLocalMic();
-            this.resetRemoteAudioPlayback();
-            this.wsClient.disconnect();
+            void this.disconnect();
             this.callStateSubject.next('idle');
             this.statusTextSubject.next('');
             this.durationSubject.next('0:00');
         };
         VoiceAgentService.prototype.connect = function (apiUrl, token, botId, conversationId, apiKey, eventToken, eventId, eventUrl, domainAuthority, usersApiUrl) {
             return __awaiter(this, void 0, void 0, function () {
-                var accessToken, ensured, e_1, baseUrl, postUrl, headers, res, json, wsUrl, untilCallEnds$, error_1;
+                var accessToken, ensured, e_1, baseUrl, pcClient, requestHeaders, error_1;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
                             if (this.callStateSubject.value !== 'idle') {
-                                console.warn('Call already in progress');
+                                console.warn('[HiveGpt Voice] Call already in progress');
                                 return [2 /*return*/];
                             }
-                            _b.label = 1;
+                            _d.label = 1;
                         case 1:
-                            _b.trys.push([1, 8, , 10]);
+                            _d.trys.push([1, 8, , 10]);
                             this.callStateSubject.next('connecting');
                             this.statusTextSubject.next('Connecting...');
                             accessToken = token;
                             if (!(usersApiUrl && common.isPlatformBrowser(this.platformId))) return [3 /*break*/, 5];
-                            _b.label = 2;
+                            _d.label = 2;
                         case 2:
-                            _b.trys.push([2, 4, , 5]);
+                            _d.trys.push([2, 4, , 5]);
                             return [4 /*yield*/, this.platformTokenRefresh
                                     .ensureValidAccessToken(token, usersApiUrl)
                                     .pipe(operators.take(1))
                                     .toPromise()];
                         case 3:
-                            ensured = _b.sent();
-                            if (ensured === null || ensured === void 0 ? void 0 : ensured.accessToken) {
+                            ensured = _d.sent();
+                            if (ensured === null || ensured === void 0 ? void 0 : ensured.accessToken)
                                 accessToken = ensured.accessToken;
-                            }
                             return [3 /*break*/, 5];
                         case 4:
-                            e_1 = _b.sent();
-                            console.warn('[HiveGpt Voice] Token refresh before connect failed', e_1);
+                            e_1 = _d.sent();
+                            console.warn('[HiveGpt Voice] Token refresh failed', e_1);
                             return [3 /*break*/, 5];
                         case 5:
                             baseUrl = apiUrl.replace(/\/$/, '');
-                            postUrl = baseUrl + "/ai/ask-voice-socket";
-                            headers = {
-                                'Content-Type': 'application/json',
-                                Authorization: "Bearer " + accessToken,
-                                'x-api-key': apiKey,
-                                'hive-bot-id': botId,
-                                'domain-authority': domainAuthority,
-                                eventUrl: eventUrl,
-                                eventId: eventId,
-                                eventToken: eventToken,
-                                'ngrok-skip-browser-warning': 'true',
-                            };
-                            return [4 /*yield*/, fetch(postUrl, {
-                                    method: 'POST',
-                                    headers: headers,
-                                    body: JSON.stringify({
+                            pcClient = new clientJs.PipecatClient({
+                                transport: new websocketTransport.WebSocketTransport(),
+                                enableMic: true,
+                                enableCam: false,
+                                callbacks: {
+                                    onConnected: function () { return _this.ngZone.run(function () { return _this.onPipecatConnected(); }); },
+                                    onDisconnected: function () { return _this.ngZone.run(function () { return _this.onPipecatDisconnected(); }); },
+                                    onBotReady: function () { return _this.ngZone.run(function () { return _this.onBotReady(); }); },
+                                    onUserTranscript: function (data) { return _this.ngZone.run(function () { return _this.userTranscriptSubject.next({ text: data.text, final: !!data.final }); }); },
+                                    onBotTranscript: function (data) { return _this.ngZone.run(function () { return _this.botTranscriptSubject.next(data.text); }); },
+                                    onError: function (err) {
+                                        _this.ngZone.run(function () {
+                                            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(clientJs.RTVIEvent.TrackStarted, function (track, participant) {
+                                if (!(participant === null || participant === void 0 ? void 0 : participant.local) && track.kind === 'audio') {
+                                    _this.ngZone.run(function () { return _this.setupBotAudioTrack(track); });
+                                }
+                            });
+                            // Speaking state comes straight from RTVI events
+                            pcClient.on(clientJs.RTVIEvent.BotStartedSpeaking, function () { return _this.ngZone.run(function () { return _this.onBotStartedSpeaking(); }); });
+                            pcClient.on(clientJs.RTVIEvent.BotStoppedSpeaking, function () { return _this.ngZone.run(function () { return _this.onBotStoppedSpeaking(); }); });
+                            pcClient.on(clientJs.RTVIEvent.UserStartedSpeaking, function () { return _this.ngZone.run(function () {
+                                _this.isUserSpeakingSubject.next(true);
+                                _this.callStateSubject.next('listening');
+                                _this.statusTextSubject.next('Listening...');
+                            }); });
+                            pcClient.on(clientJs.RTVIEvent.UserStoppedSpeaking, function () { return _this.ngZone.run(function () {
+                                _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)
+                            return [4 /*yield*/, pcClient.initDevices()];
+                        case 6:
+                            // Acquire mic (triggers browser permission prompt)
+                            _d.sent();
+                            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
+                            return [4 /*yield*/, pcClient.startBotAndConnect({
+                                    endpoint: baseUrl + "/ai/ask-voice-socket",
+                                    headers: requestHeaders,
+                                    requestData: {
                                         bot_id: botId,
                                         conversation_id: conversationId,
                                         voice: 'alloy',
-                                    }),
+                                    },
                                 })];
-                        case 6:
-                            res = _b.sent();
-                            if (!res.ok) {
-                                throw new Error("HTTP " + res.status);
-                            }
-                            return [4 /*yield*/, res.json()];
                         case 7:
-                            json = _b.sent();
-                            wsUrl = (typeof (json === null || json === void 0 ? void 0 : json.ws_url) === 'string' && json.ws_url) ||
-                                (typeof (json === null || json === void 0 ? void 0 : json.rn_ws_url) === 'string' && json.rn_ws_url);
-                            if (!wsUrl) {
-                                throw new Error('No ws_url in response');
-                            }
-                            untilCallEnds$ = rxjs.merge(this.destroy$, this.endCall$);
-                            this.subscriptions.add(this.wsClient.userTranscript$
-                                .pipe(operators.takeUntil(untilCallEnds$))
-                                .subscribe(function (t) { return _this.userTranscriptSubject.next(t); }));
-                            this.subscriptions.add(this.wsClient.botTranscript$
-                                .pipe(operators.takeUntil(untilCallEnds$))
-                                .subscribe(function (t) { return _this.botTranscriptSubject.next(t); }));
-                            this.subscriptions.add(this.wsClient.opened$
-                                .pipe(operators.takeUntil(untilCallEnds$), operators.take(1))
-                                .subscribe(function () { return void _this.onWebsocketOpened(); }));
-                            this.wsClient.connect(wsUrl);
+                            // POST to /ai/ask-voice-socket → receives { ws_url } → WebSocketTransport connects
+                            _d.sent();
                             return [3 /*break*/, 10];
                         case 8:
-                            error_1 = _b.sent();
-                            console.error('Error connecting voice agent:', error_1);
+                            error_1 = _d.sent();
+                            console.error('[HiveGpt Voice] connect failed', error_1);
                             this.callStateSubject.next('ended');
-                            return [4 /*yield*/, this.disconnect()];
+                            return [4 /*yield*/, this.cleanupPipecatClient()];
                         case 9:
-                            _b.sent();
+                            _d.sent();
                             this.statusTextSubject.next('Connection failed');
                             throw error_1;
                         case 10: return [2 /*return*/];
@@ -1721,249 +1516,143 @@
                 });
             });
         };
-        VoiceAgentService.prototype.onWebsocketOpened = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var err_1;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            if (this.callStateSubject.value !== 'connecting') {
-                                return [2 /*return*/];
-                            }
-                            _b.label = 1;
-                        case 1:
-                            _b.trys.push([1, 3, , 5]);
-                            return [4 /*yield*/, this.startLocalMic()];
-                        case 2:
-                            _b.sent();
-                            this.statusTextSubject.next('Connected');
-                            this.callStateSubject.next('connected');
-                            this.wireSpeakingState();
-                            return [3 /*break*/, 5];
-                        case 3:
-                            err_1 = _b.sent();
-                            console.error('[HiveGpt Voice] Mic or session setup failed', err_1);
-                            this.callStateSubject.next('ended');
-                            this.statusTextSubject.next('Microphone unavailable');
-                            return [4 /*yield*/, this.disconnect()];
-                        case 4:
-                            _b.sent();
-                            return [3 /*break*/, 5];
-                        case 5: return [2 /*return*/];
-                    }
-                });
-            });
+        VoiceAgentService.prototype.onPipecatConnected = function () {
+            // 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();
         };
-        VoiceAgentService.prototype.wireSpeakingState = function () {
-            var _this = this;
-            var untilCallEnds$ = rxjs.merge(this.destroy$, this.endCall$);
-            var transcriptDrivenAssistant$ = this.wsClient.botTranscript$.pipe(operators.switchMap(function () { return rxjs.concat(rxjs.of(true), rxjs.timer(800).pipe(operators.map(function () { return false; }))); }), operators.distinctUntilChanged());
-            var assistantTalking$ = rxjs.merge(this.wsClient.assistantSpeaking$, transcriptDrivenAssistant$).pipe(operators.distinctUntilChanged(), operators.startWith(false));
-            var userTalking$ = rxjs.combineLatest([
-                this.audioAnalyzer.isUserSpeaking$,
-                this.wsClient.serverUserSpeaking$.pipe(operators.startWith(false)),
-            ]).pipe(operators.map(function (_b) {
-                var _c = __read(_b, 2), local = _c[0], server = _c[1];
-                return local || server;
-            }), operators.distinctUntilChanged(), operators.startWith(false));
-            this.subscriptions.add(rxjs.combineLatest([assistantTalking$, userTalking$])
-                .pipe(operators.takeUntil(untilCallEnds$))
-                .subscribe(function (_b) {
-                var _c = __read(_b, 2), bot = _c[0], user = _c[1];
-                var current = _this.callStateSubject.value;
-                if (user) {
-                    _this.isUserSpeakingSubject.next(true);
-                    _this.callStateSubject.next('listening');
-                }
-                else {
-                    _this.isUserSpeakingSubject.next(false);
-                }
-                if (user) {
-                    return;
-                }
-                if (bot) {
-                    if (_this.callStartTime === 0) {
-                        _this.callStartTime = Date.now();
-                        _this.startDurationTimer();
-                    }
-                    _this.callStateSubject.next('talking');
+        VoiceAgentService.prototype.onPipecatDisconnected = function () {
+            this.stopDurationTimer();
+            this.callStartTime = 0;
+            this.audioAnalyzer.stop();
+            this.stopBotAudio();
+            this.callStateSubject.next('ended');
+            this.statusTextSubject.next('Call Ended');
+        };
+        VoiceAgentService.prototype.onBotReady = function () {
+            var _a, _b, _c;
+            // Retry track wiring in case tracks weren't ready at onConnected.
+            this.startLocalMicAnalyzer();
+            var 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...');
+        };
+        VoiceAgentService.prototype.startLocalMicAnalyzer = function () {
+            var _a, _b, _c;
+            var 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]));
+            }
+        };
+        VoiceAgentService.prototype.onBotStartedSpeaking = function () {
+            this.callStateSubject.next('talking');
+            this.statusTextSubject.next('Talking...');
+            // Mark user as no longer speaking when bot takes the turn.
+            this.isUserSpeakingSubject.next(false);
+        };
+        VoiceAgentService.prototype.onBotStoppedSpeaking = function () {
+            if (this.callStateSubject.value === 'talking') {
+                this.callStateSubject.next('connected');
+                this.statusTextSubject.next('Listening...');
+            }
+        };
+        VoiceAgentService.prototype.setupBotAudioTrack = function (track) {
+            var _a;
+            if (!this.botAudioElement) {
+                this.botAudioElement = new Audio();
+                this.botAudioElement.autoplay = true;
+            }
+            var 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(function (err) { return console.warn('[HiveGpt Voice] Bot audio play blocked', err); });
+        };
+        VoiceAgentService.prototype.stopBotAudio = function () {
+            var _a;
+            if (this.botAudioElement) {
+                try {
+                    this.botAudioElement.pause();
+                    (_a = this.botAudioElement.srcObject) === null || _a === void 0 ? void 0 : _a.getAudioTracks().forEach(function (t) { return t.stop(); });
+                    this.botAudioElement.srcObject = null;
                 }
-                else if (current === 'talking' || current === 'listening') {
-                    _this.callStateSubject.next('connected');
+                catch (_b) {
+                    // ignore
                 }
-            }));
+                this.botAudioElement = null;
+            }
         };
-        VoiceAgentService.prototype.startLocalMic = function () {
+        VoiceAgentService.prototype.disconnect = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var stream, track;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
-                            this.stopLocalMic();
-                            return [4 /*yield*/, navigator.mediaDevices.getUserMedia({ audio: true })];
+                            this.stopDurationTimer();
+                            this.callStartTime = 0;
+                            this.audioAnalyzer.stop();
+                            this.stopBotAudio();
+                            return [4 /*yield*/, this.cleanupPipecatClient()];
                         case 1:
-                            stream = _b.sent();
-                            track = stream.getAudioTracks()[0];
-                            if (!track) {
-                                stream.getTracks().forEach(function (t) { return t.stop(); });
-                                throw new Error('No audio track');
-                            }
-                            this.localMicStream = stream;
-                            this.isMicMutedSubject.next(!track.enabled);
-                            this.audioAnalyzer.start(stream);
+                            _d.sent();
+                            this.callStateSubject.next('ended');
+                            this.statusTextSubject.next('Call Ended');
                             return [2 /*return*/];
                     }
                 });
             });
         };
-        VoiceAgentService.prototype.stopLocalMic = function () {
-            if (this.localMicStream) {
-                this.localMicStream.getTracks().forEach(function (t) { return t.stop(); });
-                this.localMicStream = null;
-            }
-        };
-        VoiceAgentService.prototype.enqueueRemoteAudio = function (chunk) {
-            this.pendingRemoteAudio.push(chunk.slice(0));
-            if (!this.remoteAudioPlaying) {
-                void this.playRemoteAudioQueue();
-            }
-        };
-        VoiceAgentService.prototype.playRemoteAudioQueue = function () {
+        VoiceAgentService.prototype.cleanupPipecatClient = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var context, chunk, decoded, _a_1;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                var _a_1;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
-                            this.remoteAudioPlaying = true;
-                            context = this.getOrCreateRemoteAudioContext();
-                            _b.label = 1;
+                            if (!this.pcClient) return [3 /*break*/, 5];
+                            _d.label = 1;
                         case 1:
-                            if (!(this.pendingRemoteAudio.length > 0)) return [3 /*break*/, 7];
-                            chunk = this.pendingRemoteAudio.shift();
-                            if (!chunk)
-                                return [3 /*break*/, 1];
-                            _b.label = 2;
+                            _d.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this.pcClient.disconnect()];
                         case 2:
-                            _b.trys.push([2, 5, , 6]);
-                            return [4 /*yield*/, this.decodeAudioChunk(context, chunk)];
+                            _d.sent();
+                            return [3 /*break*/, 4];
                         case 3:
-                            decoded = _b.sent();
-                            this.assistantAudioStarted();
-                            return [4 /*yield*/, this.playDecodedBuffer(context, decoded)];
+                            _a_1 = _d.sent();
+                            return [3 /*break*/, 4];
                         case 4:
-                            _b.sent();
-                            return [3 /*break*/, 6];
-                        case 5:
-                            _a_1 = _b.sent();
-                            return [3 /*break*/, 6];
-                        case 6: return [3 /*break*/, 1];
-                        case 7:
-                            this.remoteAudioPlaying = false;
-                            this.assistantAudioStopped();
-                            return [2 /*return*/];
+                            this.pcClient = null;
+                            _d.label = 5;
+                        case 5: return [2 /*return*/];
                     }
                 });
             });
         };
-        VoiceAgentService.prototype.getOrCreateRemoteAudioContext = function () {
-            if (!this.remoteAudioContext || this.remoteAudioContext.state === 'closed') {
-                this.remoteAudioContext = new AudioContext();
-            }
-            if (this.remoteAudioContext.state === 'suspended') {
-                void this.remoteAudioContext.resume();
-            }
-            return this.remoteAudioContext;
-        };
-        VoiceAgentService.prototype.decodeAudioChunk = function (context, chunk) {
-            return new Promise(function (resolve, reject) {
-                context.decodeAudioData(chunk.slice(0), resolve, reject);
-            });
-        };
-        VoiceAgentService.prototype.playDecodedBuffer = function (context, buffer) {
-            return new Promise(function (resolve) {
-                var source = context.createBufferSource();
-                source.buffer = buffer;
-                source.connect(context.destination);
-                source.onended = function () { return resolve(); };
-                source.start();
-            });
-        };
-        VoiceAgentService.prototype.assistantAudioStarted = function () {
-            if (this.callStartTime === 0) {
-                this.callStartTime = Date.now();
-                this.startDurationTimer();
-            }
-            this.callStateSubject.next('talking');
-        };
-        VoiceAgentService.prototype.assistantAudioStopped = function () {
-            if (this.callStateSubject.value === 'talking') {
-                this.callStateSubject.next('connected');
-            }
-        };
-        VoiceAgentService.prototype.resetRemoteAudioPlayback = function () {
-            this.pendingRemoteAudio = [];
-            this.remoteAudioPlaying = false;
-            if (this.remoteAudioContext && this.remoteAudioContext.state !== 'closed') {
-                this.remoteAudioContext.close().catch(function () { });
-            }
-            this.remoteAudioContext = null;
-        };
-        VoiceAgentService.prototype.handleRemoteClose = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var state;
-                return __generator(this, function (_b) {
-                    state = this.callStateSubject.value;
-                    if (state === 'idle' || state === 'ended')
-                        return [2 /*return*/];
-                    this.endCall$.next();
-                    this.stopDurationTimer();
-                    this.callStartTime = 0;
-                    this.audioAnalyzer.stop();
-                    this.stopLocalMic();
-                    this.resetRemoteAudioPlayback();
-                    this.callStateSubject.next('ended');
-                    this.statusTextSubject.next('Connection lost');
-                    return [2 /*return*/];
-                });
-            });
-        };
-        VoiceAgentService.prototype.disconnect = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    this.endCall$.next();
-                    this.stopDurationTimer();
-                    this.callStartTime = 0;
-                    this.audioAnalyzer.stop();
-                    this.stopLocalMic();
-                    this.resetRemoteAudioPlayback();
-                    this.wsClient.disconnect();
-                    this.callStateSubject.next('ended');
-                    this.statusTextSubject.next('Call Ended');
-                    return [2 /*return*/];
-                });
-            });
-        };
         VoiceAgentService.prototype.toggleMic = function () {
-            var _a;
+            if (!this.pcClient)
+                return;
             var nextMuted = !this.isMicMutedSubject.value;
-            var track = (_a = this.localMicStream) === null || _a === void 0 ? void 0 : _a.getAudioTracks()[0];
-            if (track) {
-                track.enabled = !nextMuted;
-            }
+            this.pcClient.enableMic(!nextMuted);
             this.isMicMutedSubject.next(nextMuted);
+            if (nextMuted)
+                this.isUserSpeakingSubject.next(false);
         };
         VoiceAgentService.prototype.startDurationTimer = function () {
             var _this = this;
-            var updateDuration = function () {
+            var tick = function () {
                 if (_this.callStartTime > 0) {
                     var elapsed = Math.floor((Date.now() - _this.callStartTime) / 1000);
-                    var minutes = Math.floor(elapsed / 60);
-                    var seconds = elapsed % 60;
-                    _this.durationSubject.next(minutes + ":" + String(seconds).padStart(2, '0'));
+                    var m = Math.floor(elapsed / 60);
+                    var s = elapsed % 60;
+                    _this.durationSubject.next(m + ":" + String(s).padStart(2, '0'));
                 }
             };
-            updateDuration();
-            this.durationInterval = setInterval(updateDuration, 1000);
+            tick();
+            this.durationInterval = setInterval(tick, 1000);
         };
         VoiceAgentService.prototype.stopDurationTimer = function () {
             if (this.durationInterval) {
@@ -1973,7 +1662,7 @@
         };
         return VoiceAgentService;
     }());
-    VoiceAgentService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function VoiceAgentService_Factory() { return new VoiceAgentService(i0__namespace.ɵɵinject(AudioAnalyzerService), i0__namespace.ɵɵinject(WebSocketVoiceClientService), i0__namespace.ɵɵinject(PlatformTokenRefreshService), i0__namespace.ɵɵinject(i0__namespace.PLATFORM_ID)); }, token: VoiceAgentService, providedIn: "root" });
+    VoiceAgentService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function VoiceAgentService_Factory() { return new VoiceAgentService(i0__namespace.ɵɵinject(AudioAnalyzerService), i0__namespace.ɵɵinject(PlatformTokenRefreshService), i0__namespace.ɵɵinject(i0__namespace.NgZone), i0__namespace.ɵɵinject(i0__namespace.PLATFORM_ID)); }, token: VoiceAgentService, providedIn: "root" });
     VoiceAgentService.decorators = [
         { type: i0.Injectable, args: [{
                     providedIn: 'root',
@@ -1981,8 +1670,8 @@
     ];
     VoiceAgentService.ctorParameters = function () { return [
         { type: AudioAnalyzerService },
-        { type: WebSocketVoiceClientService },
         { type: PlatformTokenRefreshService },
+        { type: i0.NgZone },
         { type: Object, decorators: [{ type: i0.Inject, args: [i0.PLATFORM_ID,] }] }
     ]; };
 
@@ -2013,12 +1702,27 @@
             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;
         }
+        Object.defineProperty(VoiceAgentModalComponent.prototype, "isBotTalking", {
+            /** True while the bot is speaking — drives avatar pulse animation and voice visualizer. */
+            get: function () { return this.callState === 'talking'; },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(VoiceAgentModalComponent.prototype, "isUserActive", {
+            /** True while the user is actively speaking — drives waveform active color. */
+            get: function () { return this.callState === 'listening' && this.isUserSpeaking && !this.isMicMuted; },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(VoiceAgentModalComponent.prototype, "isProcessing", {
+            /** True during the brief processing pause between user speech and bot response. */
+            get: function () { return this.callState === 'connected' && this.statusText === 'Processing...'; },
+            enumerable: false,
+            configurable: true
+        });
         VoiceAgentModalComponent.prototype.ngOnInit = function () {
             var _this = this;
             var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -2040,16 +1744,8 @@
                 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(function (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(function (text) {
                 _this.statusText = text;
@@ -2134,18 +1830,16 @@
             return minHeight + (n / 100) * (maxHeight - minHeight);
         };
         Object.defineProperty(VoiceAgentModalComponent.prototype, "statusLabel", {
-            /** Status label for active call. */
+            /** Status label for active call — driven by callState + service statusText. */
             get: function () {
-                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';
+                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 || '';
                 }
-                return this.statusText || '';
             },
             enumerable: false,
             configurable: true
@@ -2174,8 +1868,8 @@
     VoiceAgentModalComponent.decorators = [
         { type: i0.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\"></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}"]
+                    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}"]
                 },] }
     ];
     VoiceAgentModalComponent.ctorParameters = function () { return [
@@ -6163,8 +5857,8 @@
     };
 
     /**
-     * Voice agent module. Uses native WebSocket for the voice session.
-     * Does NOT use Socket.IO or ngx-socket-io.
+     * Voice agent module. Uses @pipecat-ai/client-js + @pipecat-ai/websocket-transport
+     * (peer dependencies) for WebSocket transport, RTVI protocol, and audio.
      */
     var VoiceAgentModule = /** @class */ (function () {
         function VoiceAgentModule() {
@@ -6182,7 +5876,6 @@
                     providers: [
                         VoiceAgentService,
                         AudioAnalyzerService,
-                        WebSocketVoiceClientService
                     ],
                     exports: [
                         VoiceAgentModalComponent
@@ -6483,10 +6176,9 @@
     exports["ɵc"] = ConversationService;
     exports["ɵd"] = NotificationSocket;
     exports["ɵe"] = TranslationService;
-    exports["ɵf"] = WebSocketVoiceClientService;
-    exports["ɵg"] = VideoPlayerComponent;
-    exports["ɵh"] = SafeHtmlPipe;
-    exports["ɵi"] = BotHtmlEditorComponent;
+    exports["ɵf"] = VideoPlayerComponent;
+    exports["ɵg"] = SafeHtmlPipe;
+    exports["ɵh"] = BotHtmlEditorComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });