@hivegpt/hiveai-angular 0.0.397 → 0.0.400

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common/http'), require('@angular/core'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), 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/common'), require('@angular/material/icon'), require('@angular/material/sidenav'), require('ngx-quill')) :
-    typeof define === 'function' && define.amd ? define('@hivegpt/hiveai-angular', ['exports', '@angular/common/http', '@angular/core', '@angular/platform-browser', 'rxjs', 'rxjs/operators', 'ngx-socket-io', '@angular/forms', 'microsoft-cognitiveservices-speech-sdk', 'marked', '@pipecat-ai/client-js', '@pipecat-ai/websocket-transport', '@angular/common', '@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.common.http, global.ng.core, global.ng.platformBrowser, global.rxjs, global.rxjs.operators, global.ngxSocketIo, global.ng.forms, global.SpeechSDK, global.marked, global.clientJs, global.websocketTransport, global.ng.common, global.ng.material.icon, global.ng.material.sidenav, global.ngxQuill));
-})(this, (function (exports, i1, i0, platformBrowser, rxjs, operators, ngxSocketIo, forms, SpeechSDK, marked, clientJs, websocketTransport, common, 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('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/common'), 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', 'ngx-socket-io', '@angular/forms', 'microsoft-cognitiveservices-speech-sdk', 'marked', '@pipecat-ai/client-js', '@pipecat-ai/websocket-transport', '@angular/common', '@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.ngxSocketIo, global.ng.forms, global.SpeechSDK, global.marked, global.clientJs, global.websocketTransport, global.ng.common, global.ng.material.icon, global.ng.material.sidenav, global.ngxQuill));
+})(this, (function (exports, overlay, portal, i1, i0, platformBrowser, rxjs, operators, ngxSocketIo, forms, SpeechSDK, marked, clientJs, websocketTransport, common, icon, sidenav, ngxQuill) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -1388,9 +1388,148 @@
         { type: AudioAnalyzerService }
     ]; };
 
+    var VOICE_MODAL_CONFIG = new i0.InjectionToken('VOICE_MODAL_CONFIG');
+    var VOICE_MODAL_CLOSE_CALLBACK = new i0.InjectionToken('VOICE_MODAL_CLOSE_CALLBACK');
+
+    var VoiceAgentModalComponent = /** @class */ (function () {
+        function VoiceAgentModalComponent(voiceAgentService, audioAnalyzer, injector) {
+            this.voiceAgentService = voiceAgentService;
+            this.audioAnalyzer = audioAnalyzer;
+            this.injector = injector;
+            this.close = new i0.EventEmitter();
+            this.agentName = 'AI Assistant';
+            this.agentRole = 'AI Agent Specialist';
+            this.injectedConfig = null;
+            this.onCloseCallback = null;
+            this.callState = 'idle';
+            this.statusText = '';
+            this.duration = '00:00';
+            this.isMicMuted = false;
+            this.isUserSpeaking = false;
+            this.audioLevels = [];
+            this.isSpeaking = false;
+            this.subscriptions = [];
+            this.isConnecting = false;
+        }
+        VoiceAgentModalComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var _a, _b;
+            // When opened via Overlay, config is provided by injection
+            this.injectedConfig = this.injector.get(VOICE_MODAL_CONFIG, null);
+            this.onCloseCallback = this.injector.get(VOICE_MODAL_CLOSE_CALLBACK, null);
+            if (this.injectedConfig) {
+                this.apiUrl = this.injectedConfig.apiUrl;
+                this.token = this.injectedConfig.token;
+                this.botId = this.injectedConfig.botId;
+                this.conversationId = this.injectedConfig.conversationId;
+                this.agentName = (_a = this.injectedConfig.agentName) !== null && _a !== void 0 ? _a : this.agentName;
+                this.agentRole = (_b = this.injectedConfig.agentRole) !== null && _b !== void 0 ? _b : this.agentRole;
+                this.agentAvatar = this.injectedConfig.agentAvatar;
+            }
+            // Subscribe to observables
+            this.subscriptions.push(this.voiceAgentService.callState$.subscribe(function (state) {
+                _this.callState = state;
+                _this.isSpeaking = state === 'talking';
+            }));
+            this.subscriptions.push(this.voiceAgentService.statusText$.subscribe(function (text) {
+                _this.statusText = text;
+            }));
+            this.subscriptions.push(this.voiceAgentService.duration$.subscribe(function (duration) {
+                _this.duration = duration;
+            }));
+            this.subscriptions.push(this.voiceAgentService.isMicMuted$.subscribe(function (muted) {
+                _this.isMicMuted = muted;
+            }));
+            this.subscriptions.push(this.voiceAgentService.isUserSpeaking$.subscribe(function (speaking) {
+                _this.isUserSpeaking = speaking;
+            }));
+            this.subscriptions.push(this.voiceAgentService.audioLevels$.subscribe(function (levels) {
+                _this.audioLevels = levels;
+            }));
+            // Modal opens in idle state; user clicks "Start Call" to connect (no auto-connect).
+            this.voiceAgentService.resetToIdle();
+        };
+        VoiceAgentModalComponent.prototype.ngOnDestroy = function () {
+            this.subscriptions.forEach(function (sub) { return sub.unsubscribe(); });
+            this.disconnect();
+        };
+        VoiceAgentModalComponent.prototype.startCall = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var error_1;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            if (this.isConnecting || (this.callState !== 'idle' && this.callState !== 'ended'))
+                                return [2 /*return*/];
+                            this.isConnecting = true;
+                            _c.label = 1;
+                        case 1:
+                            _c.trys.push([1, 3, 4, 5]);
+                            return [4 /*yield*/, this.voiceAgentService.connect(this.apiUrl, this.token, this.botId, this.conversationId)];
+                        case 2:
+                            _c.sent();
+                            return [3 /*break*/, 5];
+                        case 3:
+                            error_1 = _c.sent();
+                            console.error('Failed to connect voice agent:', error_1);
+                            return [3 /*break*/, 5];
+                        case 4:
+                            this.isConnecting = false;
+                            return [7 /*endfinally*/];
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        VoiceAgentModalComponent.prototype.disconnect = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0: return [4 /*yield*/, this.voiceAgentService.disconnect()];
+                        case 1:
+                            _c.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        VoiceAgentModalComponent.prototype.toggleMic = function () {
+            this.voiceAgentService.toggleMic();
+        };
+        VoiceAgentModalComponent.prototype.endCall = function () {
+            var _a;
+            this.disconnect();
+            (_a = this.onCloseCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.close.emit();
+        };
+        return VoiceAgentModalComponent;
+    }());
+    VoiceAgentModalComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'hivegpt-voice-agent-modal',
+                    template: "<div class=\"voice-agent-modal-overlay\" (click)=\"endCall()\">\n  <div class=\"voice-agent-modal\" (click)=\"$event.stopPropagation()\">\n    <!-- Header -->\n    <div class=\"modal-header\">\n      <div class=\"header-left\">\n        <div class=\"voice-icon\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path 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\" fill=\"currentColor\"/>\n            <path d=\"M12 23C10.34 23 9 21.66 9 20H15C15 21.66 13.66 23 12 23Z\" fill=\"currentColor\"/>\n          </svg>\n        </div>\n        <span class=\"voice-label\">Voice</span>\n      </div>\n      <button class=\"close-button\" (click)=\"endCall()\" type=\"button\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n    </div>\n\n    <!-- Agent Avatar -->\n    <div class=\"agent-avatar-container\">\n      <div class=\"agent-avatar\" [class.speaking]=\"isSpeaking\">\n        <img *ngIf=\"agentAvatar\" [src]=\"agentAvatar\" [alt]=\"agentName\" />\n        <div *ngIf=\"!agentAvatar\" class=\"avatar-placeholder\">\n          {{ agentName.charAt(0) }}\n        </div>\n      </div>\n    </div>\n\n    <!-- Agent Info -->\n    <div class=\"agent-info\">\n      <div class=\"agent-name-row\">\n        <h2 class=\"agent-name\">{{ agentName }}</h2>\n        <span class=\"ai-badge\">AI</span>\n      </div>\n      <p class=\"agent-role\">{{ agentRole }}</p>\n    </div>\n\n    <!-- Start Call / Retry (when idle or ended) -->\n    <div *ngIf=\"callState === 'idle' || callState === 'ended'\" class=\"start-call-section\">\n      <p *ngIf=\"statusText === 'Connection failed'\" class=\"error-message\">{{ statusText }}</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'\">Retry</span>\n        <span *ngIf=\"!isConnecting && statusText !== 'Connection failed'\">Start Call</span>\n      </button>\n    </div>\n\n    <!-- Status (when connecting or connected) -->\n    <div class=\"status-section\" *ngIf=\"callState !== 'idle' && callState !== 'ended'\">\n      <div *ngIf=\"callState === 'connecting'\" class=\"connecting-spinner\">\n        <svg class=\"spinner\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-dasharray=\"31.416\" stroke-dashoffset=\"31.416\">\n            <animate attributeName=\"stroke-dasharray\" dur=\"2s\" values=\"0 31.416;15.708 15.708;0 31.416;0 31.416\" repeatCount=\"indefinite\"/>\n            <animate attributeName=\"stroke-dashoffset\" dur=\"2s\" values=\"0;-15.708;-31.416;-31.416\" repeatCount=\"indefinite\"/>\n          </circle>\n        </svg>\n        <span class=\"status-text\">{{ statusText }}</span>\n      </div>\n      <div *ngIf=\"callState !== 'connecting'\" class=\"status-connected\">\n        <span class=\"status-text\">{{ statusText || 'Connected' }}</span>\n        <span class=\"duration\">{{ duration }}</span>\n      </div>\n    </div>\n\n    <!-- Waveform Visualization -->\n    <div *ngIf=\"callState === 'connected' || callState === 'listening' || callState === 'talking'\" class=\"waveform-container\">\n      <div class=\"waveform-bars\">\n        <div\n          *ngFor=\"let level of audioLevels; let i = index\"\n          class=\"waveform-bar\"\n          [style.height.%]=\"level || 10\"\n          [style.animation-delay.ms]=\"i * 20\"\n        ></div>\n      </div>\n    </div>\n\n    <!-- Call Controls (only when connected) -->\n    <div class=\"call-controls\" *ngIf=\"callState === 'connected' || callState === 'listening' || callState === 'talking'\">\n      <button\n        class=\"control-button mute-button\"\n        [class.muted]=\"isMicMuted\"\n        (click)=\"toggleMic()\"\n        type=\"button\"\n        [title]=\"isMicMuted ? 'Unmute' : 'Mute'\"\n      >\n        <svg *ngIf=\"!isMicMuted\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path 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\" fill=\"currentColor\"/>\n          <path d=\"M12 23C10.34 23 9 21.66 9 20H15C15 21.66 13.66 23 12 23Z\" fill=\"currentColor\"/>\n        </svg>\n        <svg *ngIf=\"isMicMuted\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path 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\" fill=\"currentColor\"/>\n          <path d=\"M12 23C10.34 23 9 21.66 9 20H15C15 21.66 13.66 23 12 23Z\" fill=\"currentColor\"/>\n          <path d=\"M3 3L21 21M9 9L15 15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n        </svg>\n        <span class=\"control-label\">Mute</span>\n      </button>\n\n      <button\n        class=\"control-button end-call-button\"\n        (click)=\"endCall()\"\n        type=\"button\"\n        title=\"End Call\"\n      >\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n        </svg>\n        <span class=\"control-label\">End Call</span>\n      </button>\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;justify-content:flex-end;left:0;padding:24px;position:fixed;right:0;top:0;z-index:99999}.voice-agent-modal{animation:modalEnter .3s ease-out;background:#fff;border-radius:24px;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:calc(100vh - 48px);max-width:480px;overflow-y:auto;padding:32px;width:90%}@keyframes modalEnter{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{justify-content:space-between;margin-bottom:24px}.header-left,.modal-header{align-items:center;display:flex}.header-left{gap:8px}.voice-icon{align-items:center;color:#17235b;display:flex;height:32px;justify-content:center;width:32px}.voice-label{color:#333;font-size:16px;font-weight:600}.close-button{align-items:center;background:none;border:none;color:#666;cursor:pointer;display:flex;justify-content:center;padding:8px;transition:color .2s}.close-button:hover{color:#000}.agent-avatar-container{display:flex;justify-content:center;margin-bottom:24px}.agent-avatar{border:3px solid #e0f2fe;border-radius:50%;height:120px;overflow:hidden;position:relative;transition:all .3s ease;width:120px}.agent-avatar.speaking{animation:speakingGlow 1.5s ease-in-out infinite;border-color:#0ea5e9;box-shadow:0 0 20px rgba(14,165,233,.4)}.agent-avatar img{-o-object-fit:cover;height:100%;object-fit:cover;width:100%}.avatar-placeholder{align-items:center;background:linear-gradient(135deg,#0ea5e9,#06b6d4);color:#fff;display:flex;font-size:48px;font-weight:600;height:100%;justify-content:center;width:100%}@keyframes speakingGlow{0%,to{box-shadow:0 0 20px rgba(14,165,233,.4)}50%{box-shadow:0 0 30px rgba(14,165,233,.6)}}.agent-info{margin-bottom:24px;text-align:center}.agent-name-row{align-items:center;display:flex;gap:12px;justify-content:center;margin-bottom:8px}.agent-name{color:#1f2937;font-size:28px;font-weight:700;margin:0}.ai-badge{background:#0ea5e9;border-radius:12px;color:#fff;font-size:12px;font-weight:600;padding:4px 12px}.agent-role{color:#6b7280;font-size:14px;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:#0ea5e9;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:#0284c7}.start-call-button:disabled{cursor:not-allowed;opacity:.7}.status-section{flex-direction:column;margin-bottom:24px}.connecting-spinner,.status-section{align-items:center;display:flex;gap:12px}.spinner{animation:spin 1s linear infinite;color:#0ea5e9}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.status-connected{align-items:center;display:flex;flex-direction:column;gap:8px}.status-text{color:#4b5563;font-size:16px;font-weight:500}.duration{color:#9ca3af;font-family:monospace;font-size:14px}.waveform-container{margin-bottom:32px;width:100%}.waveform-bars{align-items:center;display:flex;gap:4px;height:60px;justify-content:center}.waveform-bar{animation:waveformPulse 1s ease-in-out infinite;background:linear-gradient(0deg,#0ea5e9,#06b6d4);border-radius:2px;min-height:10%;transition:height .1s ease;width:4px}@keyframes waveformPulse{0%,to{opacity:.6}50%{opacity:1}}.call-controls{gap:24px}.call-controls,.control-button{display:flex;justify-content:center}.control-button{align-items:center;border:none;border-radius:50%;cursor:pointer;flex-direction:column;gap:8px;height:80px;padding:16px;transition:all .2s;width:80px}.mute-button{background:#f3f4f6;color:#4b5563}.mute-button:hover{background:#e5e7eb}.mute-button.muted{background:#fee2e2;color:#dc2626}.end-call-button{background:#ef4444;color:#fff}.end-call-button:hover{background:#dc2626}.control-label{font-size:12px;font-weight:500;margin-top:4px}"]
+                },] }
+    ];
+    VoiceAgentModalComponent.ctorParameters = function () { return [
+        { type: VoiceAgentService },
+        { type: AudioAnalyzerService },
+        { type: i0.Injector }
+    ]; };
+    VoiceAgentModalComponent.propDecorators = {
+        close: [{ type: i0.Output }],
+        apiUrl: [{ type: i0.Input }],
+        token: [{ type: i0.Input }],
+        botId: [{ type: i0.Input }],
+        conversationId: [{ type: i0.Input }],
+        agentName: [{ type: i0.Input }],
+        agentRole: [{ type: i0.Input }],
+        agentAvatar: [{ type: i0.Input }]
+    };
+
     var ChatDrawerComponent = /** @class */ (function () {
         function ChatDrawerComponent(fb, botService, cdr, http, sanitizer, elementRef, renderer, socketService, conversationService, // private platform: Platform
-        translationService, voiceAgentService) {
+        translationService, voiceAgentService, overlay, viewContainerRef, injector) {
             var _this = this;
             this.fb = fb;
             this.botService = botService;
@@ -1403,6 +1542,9 @@
             this.conversationService = conversationService;
             this.translationService = translationService;
             this.voiceAgentService = voiceAgentService;
+            this.overlay = overlay;
+            this.viewContainerRef = viewContainerRef;
+            this.injector = injector;
             this.bodyOverflowClass = 'body-overflow-hidden';
             this.isCollapsedTrue = false;
             this.copilotName = 'HiveXGPT';
@@ -1415,8 +1557,6 @@
             this.scheduleMeeting = new i0.EventEmitter();
             this.refreshToken = new i0.EventEmitter();
             this.openSupport = new i0.EventEmitter();
-            /** Emitted when the user clicks the voice agent button; parent should show the voice modal with this config. */
-            this.requestOpenVoiceModal = new i0.EventEmitter();
             this.autogenKey = 'Autogen_eDJTtEU-NB0RtIpzq1w';
             this.addToMyAgendaAction = 'add_to_my_agenda';
             this.myUpcomingSessionAction = 'my_upcomming_session';
@@ -1446,6 +1586,7 @@
             this.authorizationToken = '';
             this.region = 'westeurope'; // Set your Azure region here
             this.isVoiceModalOpen = false;
+            this.voiceModalOverlayRef = null;
             this.voiceTranscriptSubscriptions = [];
             this.domainAuthorityValue = 'prod-lite';
             this.isChatingWithAi = false;
@@ -1507,6 +1648,8 @@
             this.currentSourcesList = [];
             this.isShowEditorButton = true;
             this.isDrawerOpen = true;
+            /** Used by the voice modal when opened from this drawer. */
+            this.voiceModalConversationId = '';
             this.chatMain = new i0.ElementRef(null);
             // if (this.platform.IOS) {
             //   this.isIOSDevice = true;
@@ -3111,21 +3254,54 @@
             }); // returns current time in 'shortTime' format
         };
         ChatDrawerComponent.prototype.openVoiceModal = function () {
-            var _a, _b, _c, _d, _e;
-            var conversationId = (_a = this.conversationKey) !== null && _a !== void 0 ? _a : this.conversationService.getKey(this.botId, false);
-            this.requestOpenVoiceModal.emit({
-                apiUrl: (_c = (_b = this.environment) === null || _b === void 0 ? void 0 : _b.BASE_URL) !== null && _c !== void 0 ? _c : '',
-                token: (_d = this.s27Token) !== null && _d !== void 0 ? _d : '',
-                botId: (_e = this.botId) !== null && _e !== void 0 ? _e : '',
-                conversationId: conversationId !== null && conversationId !== void 0 ? conversationId : '',
+            var _this = this;
+            var _a, _b, _c, _d, _e, _f;
+            var conversationId = (_b = (_a = this.conversationKey) !== null && _a !== void 0 ? _a : this.conversationService.getKey(this.botId, false)) !== null && _b !== void 0 ? _b : '';
+            this.voiceModalConversationId = conversationId;
+            this.setupVoiceTranscripts();
+            // Close existing overlay if any
+            if (this.voiceModalOverlayRef) {
+                this.voiceModalOverlayRef.detach();
+                this.voiceModalOverlayRef.dispose();
+                this.voiceModalOverlayRef = null;
+            }
+            var config = {
+                apiUrl: (_d = (_c = this.environment) === null || _c === void 0 ? void 0 : _c.BASE_URL) !== null && _d !== void 0 ? _d : '',
+                token: (_e = this.s27Token) !== null && _e !== void 0 ? _e : '',
+                botId: (_f = this.botId) !== null && _f !== void 0 ? _f : '',
+                conversationId: conversationId,
                 agentName: this.botName || 'AI Assistant',
                 agentRole: this.botSkills || 'AI Agent Specialist',
                 agentAvatar: this.botIcon,
+            };
+            var closeCallback = function () {
+                if (_this.voiceModalOverlayRef) {
+                    _this.voiceModalOverlayRef.detach();
+                    _this.voiceModalOverlayRef.dispose();
+                    _this.voiceModalOverlayRef = null;
+                }
+                _this.closeVoiceModal();
+            };
+            var injector = i0.Injector.create([
+                { provide: VOICE_MODAL_CONFIG, useValue: config },
+                { provide: VOICE_MODAL_CLOSE_CALLBACK, useValue: closeCallback },
+            ], this.injector);
+            var overlayRef = this.overlay.create({
+                hasBackdrop: false,
+                scrollStrategy: this.overlay.scrollStrategies.block(),
+                positionStrategy: this.overlay.position().global().bottom('0').right('0').left('0').top('0'),
             });
-            this.setupVoiceTranscripts();
+            var portal$1 = new portal.ComponentPortal(VoiceAgentModalComponent, this.viewContainerRef, injector);
+            overlayRef.attach(portal$1);
+            this.voiceModalOverlayRef = overlayRef;
             this.cdr.markForCheck();
         };
         ChatDrawerComponent.prototype.closeVoiceModal = function () {
+            if (this.voiceModalOverlayRef) {
+                this.voiceModalOverlayRef.detach();
+                this.voiceModalOverlayRef.dispose();
+                this.voiceModalOverlayRef = null;
+            }
             this.isVoiceModalOpen = false;
             this.voiceAgentService.disconnect();
             this.cdr.markForCheck();
@@ -3195,7 +3371,10 @@
         { type: SocketService },
         { type: ConversationService },
         { type: TranslationService },
-        { type: VoiceAgentService }
+        { type: VoiceAgentService },
+        { type: overlay.Overlay },
+        { type: i0.ViewContainerRef },
+        { type: i0.Injector }
     ]; };
     ChatDrawerComponent.propDecorators = {
         chatMain: [{ type: i0.ViewChild, args: ['chatMain',] }],
@@ -3255,40 +3434,26 @@
         connectWithUser: [{ type: i0.Output }],
         scheduleMeeting: [{ type: i0.Output }],
         refreshToken: [{ type: i0.Output }],
-        openSupport: [{ type: i0.Output }],
-        requestOpenVoiceModal: [{ type: i0.Output }]
+        openSupport: [{ type: i0.Output }]
     };
 
     var ChatBotComponent = /** @class */ (function () {
         function ChatBotComponent() {
             this.visible = false;
-            this.isVoiceModalOpen = false;
-            this.voiceModalConfig = null;
         }
         ChatBotComponent.prototype.toggle = function () {
             this.visible = !this.visible;
         };
-        ChatBotComponent.prototype.onOpenVoiceModal = function (config) {
-            this.voiceModalConfig = config;
-            this.isVoiceModalOpen = true;
-        };
-        ChatBotComponent.prototype.onVoiceModalClose = function () {
-            var _a;
-            this.isVoiceModalOpen = false;
-            this.voiceModalConfig = null;
-            (_a = this.chatDrawerRef) === null || _a === void 0 ? void 0 : _a.closeVoiceModal();
-        };
         return ChatBotComponent;
     }());
     ChatBotComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'hivegpt-chatbot',
-                    template: "<button mat-icon-button class=\"chat-button\" color=\"primary\" (click)=\"toggle()\">\n  <mat-icon>chat</mat-icon>\n</button>\n\n<!-- Voice modal rendered here so it's not clipped by the chat drawer -->\n<hivegpt-voice-agent-modal\n  *ngIf=\"isVoiceModalOpen && voiceModalConfig\"\n  [apiUrl]=\"voiceModalConfig.apiUrl\"\n  [token]=\"voiceModalConfig.token\"\n  [botId]=\"voiceModalConfig.botId\"\n  [conversationId]=\"voiceModalConfig.conversationId\"\n  [agentName]=\"voiceModalConfig.agentName\"\n  [agentRole]=\"voiceModalConfig.agentRole\"\n  [agentAvatar]=\"voiceModalConfig.agentAvatar\"\n  (close)=\"onVoiceModalClose()\"\n></hivegpt-voice-agent-modal>\n\n<ng-container *ngIf=\"visible\">\n  <hivegpt-chat-drawer-package\n  (requestOpenVoiceModal)=\"onOpenVoiceModal($event)\"\n  [apiKey]=\"apiKey\"\n  [bgBubbleAi]=\"bgBubbleAi\"\n  [bgBubbleUser]=\"bgBubbleUser\"\n  [bgGradient]=\"bgGradient\"\n  [botName]=\"botName\"\n  [closeButtonbgColor]=\"closeButtonbgColor\"\n  [closeButtonColor]=\"closeButtonColor\"\n  [credentials]=\"credentials\"\n  [dateTextColor]=\"dateTextColor\"\n  [dateTimeColor]=\"dateTimeColor\"\n  [eventId]=\"eventId\"\n  [eventName]=\"eventName\"\n  [formFieldBgColor]=\"formFieldBgColor\"\n  [formFieldTextColor]=\"formFieldTextColor\"\n  [fullView]=\"fullView\"\n  [greeting]=\"greeting\"\n  [gradientColors]=\"gradientColors\"\n  [messageTextColorAi]=\"messageTextColorAi\"\n  [messageTextColorUser]=\"messageTextColorUser\"\n  [sendButtonColor]=\"sendButtonColor\"\n  [sendButtonTextColor]=\"sendButtonTextColor\"\n  [showClose]=\"showClose\"\n  [thumbsDownMessages]=\"thumbsDownMessages\"\n  [thumbsUpMessage]=\"thumbsUpMessage\"\n  [unknownResponses]=\"unknownResponses\"\n  [useOpenAi]=\"useOpenAi\"\n  [userId]=\"userId\"\n  [botId]=\"botId\"\n  [s27Token]=\"s27Token\"\n  [workspaceToken]=\"workspaceToken\"\n  [isDev]=\"isDev\"\n  >\n  </hivegpt-chat-drawer-package>\n</ng-container>\n",
+                    template: "<button mat-icon-button class=\"chat-button\" color=\"primary\" (click)=\"toggle()\">\n  <mat-icon>chat</mat-icon>\n</button>\n\n<ng-container *ngIf=\"visible\">\n  <hivegpt-chat-drawer-package\n  [apiKey]=\"apiKey\"\n  [bgBubbleAi]=\"bgBubbleAi\"\n  [bgBubbleUser]=\"bgBubbleUser\"\n  [bgGradient]=\"bgGradient\"\n  [botName]=\"botName\"\n  [closeButtonbgColor]=\"closeButtonbgColor\"\n  [closeButtonColor]=\"closeButtonColor\"\n  [credentials]=\"credentials\"\n  [dateTextColor]=\"dateTextColor\"\n  [dateTimeColor]=\"dateTimeColor\"\n  [eventId]=\"eventId\"\n  [eventName]=\"eventName\"\n  [formFieldBgColor]=\"formFieldBgColor\"\n  [formFieldTextColor]=\"formFieldTextColor\"\n  [fullView]=\"fullView\"\n  [greeting]=\"greeting\"\n  [gradientColors]=\"gradientColors\"\n  [messageTextColorAi]=\"messageTextColorAi\"\n  [messageTextColorUser]=\"messageTextColorUser\"\n  [sendButtonColor]=\"sendButtonColor\"\n  [sendButtonTextColor]=\"sendButtonTextColor\"\n  [showClose]=\"showClose\"\n  [thumbsDownMessages]=\"thumbsDownMessages\"\n  [thumbsUpMessage]=\"thumbsUpMessage\"\n  [unknownResponses]=\"unknownResponses\"\n  [useOpenAi]=\"useOpenAi\"\n  [userId]=\"userId\"\n  [botId]=\"botId\"\n  [s27Token]=\"s27Token\"\n  [workspaceToken]=\"workspaceToken\"\n  [isDev]=\"isDev\"\n  >\n  </hivegpt-chat-drawer-package>\n</ng-container>\n",
                     styles: ["::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{background:#e5ccbc}.spinner{align-items:center;display:flex;gap:2px;justify-content:center}.spinner>div{animation:bouncedelay 1.4s ease-in-out infinite;animation-fill-mode:both;background-color:#173330;border-radius:100%;display:inline-block;height:5px;width:5px}.spinner .bounce1{animation-delay:-.32s}.spinner .bounce2{animation-delay:-.16s}@keyframes bouncedelay{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}.chat-button{align-items:center;background:#17235b;border:#17235b;border-radius:50%;bottom:20px;color:#fff;display:inline-flex;font-size:24px;height:50px;justify-content:center;position:fixed;right:20px;width:50px}"]
                 },] }
     ];
     ChatBotComponent.propDecorators = {
-        chatDrawerRef: [{ type: i0.ViewChild, args: [ChatDrawerComponent,] }],
         userId: [{ type: i0.Input }],
         apiKey: [{ type: i0.Input }],
         botName: [{ type: i0.Input }],
@@ -3325,123 +3490,6 @@
         isDev: [{ type: i0.Input }]
     };
 
-    var VoiceAgentModalComponent = /** @class */ (function () {
-        function VoiceAgentModalComponent(voiceAgentService, audioAnalyzer) {
-            this.voiceAgentService = voiceAgentService;
-            this.audioAnalyzer = audioAnalyzer;
-            this.close = new i0.EventEmitter();
-            this.agentName = 'AI Assistant';
-            this.agentRole = 'AI Agent Specialist';
-            this.callState = 'idle';
-            this.statusText = '';
-            this.duration = '00:00';
-            this.isMicMuted = false;
-            this.isUserSpeaking = false;
-            this.audioLevels = [];
-            this.isSpeaking = false;
-            this.subscriptions = [];
-            this.isConnecting = false;
-        }
-        VoiceAgentModalComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            // Subscribe to observables
-            this.subscriptions.push(this.voiceAgentService.callState$.subscribe(function (state) {
-                _this.callState = state;
-                _this.isSpeaking = state === 'talking';
-            }));
-            this.subscriptions.push(this.voiceAgentService.statusText$.subscribe(function (text) {
-                _this.statusText = text;
-            }));
-            this.subscriptions.push(this.voiceAgentService.duration$.subscribe(function (duration) {
-                _this.duration = duration;
-            }));
-            this.subscriptions.push(this.voiceAgentService.isMicMuted$.subscribe(function (muted) {
-                _this.isMicMuted = muted;
-            }));
-            this.subscriptions.push(this.voiceAgentService.isUserSpeaking$.subscribe(function (speaking) {
-                _this.isUserSpeaking = speaking;
-            }));
-            this.subscriptions.push(this.voiceAgentService.audioLevels$.subscribe(function (levels) {
-                _this.audioLevels = levels;
-            }));
-            // Modal opens in idle state; user clicks "Start Call" to connect (no auto-connect).
-            this.voiceAgentService.resetToIdle();
-        };
-        VoiceAgentModalComponent.prototype.ngOnDestroy = function () {
-            this.subscriptions.forEach(function (sub) { return sub.unsubscribe(); });
-            this.disconnect();
-        };
-        VoiceAgentModalComponent.prototype.startCall = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var error_1;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (this.isConnecting || (this.callState !== 'idle' && this.callState !== 'ended'))
-                                return [2 /*return*/];
-                            this.isConnecting = true;
-                            _a.label = 1;
-                        case 1:
-                            _a.trys.push([1, 3, 4, 5]);
-                            return [4 /*yield*/, this.voiceAgentService.connect(this.apiUrl, this.token, this.botId, this.conversationId)];
-                        case 2:
-                            _a.sent();
-                            return [3 /*break*/, 5];
-                        case 3:
-                            error_1 = _a.sent();
-                            console.error('Failed to connect voice agent:', error_1);
-                            return [3 /*break*/, 5];
-                        case 4:
-                            this.isConnecting = false;
-                            return [7 /*endfinally*/];
-                        case 5: return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        VoiceAgentModalComponent.prototype.disconnect = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.voiceAgentService.disconnect()];
-                        case 1:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        VoiceAgentModalComponent.prototype.toggleMic = function () {
-            this.voiceAgentService.toggleMic();
-        };
-        VoiceAgentModalComponent.prototype.endCall = function () {
-            this.disconnect();
-            this.close.emit();
-        };
-        return VoiceAgentModalComponent;
-    }());
-    VoiceAgentModalComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'hivegpt-voice-agent-modal',
-                    template: "<div class=\"voice-agent-modal-overlay\" (click)=\"endCall()\">\n  <div class=\"voice-agent-modal\" (click)=\"$event.stopPropagation()\">\n    <!-- Header -->\n    <div class=\"modal-header\">\n      <div class=\"header-left\">\n        <div class=\"voice-icon\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path 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\" fill=\"currentColor\"/>\n            <path d=\"M12 23C10.34 23 9 21.66 9 20H15C15 21.66 13.66 23 12 23Z\" fill=\"currentColor\"/>\n          </svg>\n        </div>\n        <span class=\"voice-label\">Voice</span>\n      </div>\n      <button class=\"close-button\" (click)=\"endCall()\" type=\"button\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n    </div>\n\n    <!-- Agent Avatar -->\n    <div class=\"agent-avatar-container\">\n      <div class=\"agent-avatar\" [class.speaking]=\"isSpeaking\">\n        <img *ngIf=\"agentAvatar\" [src]=\"agentAvatar\" [alt]=\"agentName\" />\n        <div *ngIf=\"!agentAvatar\" class=\"avatar-placeholder\">\n          {{ agentName.charAt(0) }}\n        </div>\n      </div>\n    </div>\n\n    <!-- Agent Info -->\n    <div class=\"agent-info\">\n      <div class=\"agent-name-row\">\n        <h2 class=\"agent-name\">{{ agentName }}</h2>\n        <span class=\"ai-badge\">AI</span>\n      </div>\n      <p class=\"agent-role\">{{ agentRole }}</p>\n    </div>\n\n    <!-- Start Call / Retry (when idle or ended) -->\n    <div *ngIf=\"callState === 'idle' || callState === 'ended'\" class=\"start-call-section\">\n      <p *ngIf=\"statusText === 'Connection failed'\" class=\"error-message\">{{ statusText }}</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'\">Retry</span>\n        <span *ngIf=\"!isConnecting && statusText !== 'Connection failed'\">Start Call</span>\n      </button>\n    </div>\n\n    <!-- Status (when connecting or connected) -->\n    <div class=\"status-section\" *ngIf=\"callState !== 'idle' && callState !== 'ended'\">\n      <div *ngIf=\"callState === 'connecting'\" class=\"connecting-spinner\">\n        <svg class=\"spinner\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-dasharray=\"31.416\" stroke-dashoffset=\"31.416\">\n            <animate attributeName=\"stroke-dasharray\" dur=\"2s\" values=\"0 31.416;15.708 15.708;0 31.416;0 31.416\" repeatCount=\"indefinite\"/>\n            <animate attributeName=\"stroke-dashoffset\" dur=\"2s\" values=\"0;-15.708;-31.416;-31.416\" repeatCount=\"indefinite\"/>\n          </circle>\n        </svg>\n        <span class=\"status-text\">{{ statusText }}</span>\n      </div>\n      <div *ngIf=\"callState !== 'connecting'\" class=\"status-connected\">\n        <span class=\"status-text\">{{ statusText || 'Connected' }}</span>\n        <span class=\"duration\">{{ duration }}</span>\n      </div>\n    </div>\n\n    <!-- Waveform Visualization -->\n    <div *ngIf=\"callState === 'connected' || callState === 'listening' || callState === 'talking'\" class=\"waveform-container\">\n      <div class=\"waveform-bars\">\n        <div\n          *ngFor=\"let level of audioLevels; let i = index\"\n          class=\"waveform-bar\"\n          [style.height.%]=\"level || 10\"\n          [style.animation-delay.ms]=\"i * 20\"\n        ></div>\n      </div>\n    </div>\n\n    <!-- Call Controls (only when connected) -->\n    <div class=\"call-controls\" *ngIf=\"callState === 'connected' || callState === 'listening' || callState === 'talking'\">\n      <button\n        class=\"control-button mute-button\"\n        [class.muted]=\"isMicMuted\"\n        (click)=\"toggleMic()\"\n        type=\"button\"\n        [title]=\"isMicMuted ? 'Unmute' : 'Mute'\"\n      >\n        <svg *ngIf=\"!isMicMuted\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path 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\" fill=\"currentColor\"/>\n          <path d=\"M12 23C10.34 23 9 21.66 9 20H15C15 21.66 13.66 23 12 23Z\" fill=\"currentColor\"/>\n        </svg>\n        <svg *ngIf=\"isMicMuted\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path 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\" fill=\"currentColor\"/>\n          <path d=\"M12 23C10.34 23 9 21.66 9 20H15C15 21.66 13.66 23 12 23Z\" fill=\"currentColor\"/>\n          <path d=\"M3 3L21 21M9 9L15 15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n        </svg>\n        <span class=\"control-label\">Mute</span>\n      </button>\n\n      <button\n        class=\"control-button end-call-button\"\n        (click)=\"endCall()\"\n        type=\"button\"\n        title=\"End Call\"\n      >\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n        </svg>\n        <span class=\"control-label\">End Call</span>\n      </button>\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;justify-content:flex-end;left:0;padding:24px;position:fixed;right:0;top:0;z-index:99999}.voice-agent-modal{animation:modalEnter .3s ease-out;background:#fff;border-radius:24px;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:calc(100vh - 48px);max-width:480px;overflow-y:auto;padding:32px;width:90%}@keyframes modalEnter{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{justify-content:space-between;margin-bottom:24px}.header-left,.modal-header{align-items:center;display:flex}.header-left{gap:8px}.voice-icon{align-items:center;color:#17235b;display:flex;height:32px;justify-content:center;width:32px}.voice-label{color:#333;font-size:16px;font-weight:600}.close-button{align-items:center;background:none;border:none;color:#666;cursor:pointer;display:flex;justify-content:center;padding:8px;transition:color .2s}.close-button:hover{color:#000}.agent-avatar-container{display:flex;justify-content:center;margin-bottom:24px}.agent-avatar{border:3px solid #e0f2fe;border-radius:50%;height:120px;overflow:hidden;position:relative;transition:all .3s ease;width:120px}.agent-avatar.speaking{animation:speakingGlow 1.5s ease-in-out infinite;border-color:#0ea5e9;box-shadow:0 0 20px rgba(14,165,233,.4)}.agent-avatar img{-o-object-fit:cover;height:100%;object-fit:cover;width:100%}.avatar-placeholder{align-items:center;background:linear-gradient(135deg,#0ea5e9,#06b6d4);color:#fff;display:flex;font-size:48px;font-weight:600;height:100%;justify-content:center;width:100%}@keyframes speakingGlow{0%,to{box-shadow:0 0 20px rgba(14,165,233,.4)}50%{box-shadow:0 0 30px rgba(14,165,233,.6)}}.agent-info{margin-bottom:24px;text-align:center}.agent-name-row{align-items:center;display:flex;gap:12px;justify-content:center;margin-bottom:8px}.agent-name{color:#1f2937;font-size:28px;font-weight:700;margin:0}.ai-badge{background:#0ea5e9;border-radius:12px;color:#fff;font-size:12px;font-weight:600;padding:4px 12px}.agent-role{color:#6b7280;font-size:14px;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:#0ea5e9;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:#0284c7}.start-call-button:disabled{cursor:not-allowed;opacity:.7}.status-section{flex-direction:column;margin-bottom:24px}.connecting-spinner,.status-section{align-items:center;display:flex;gap:12px}.spinner{animation:spin 1s linear infinite;color:#0ea5e9}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.status-connected{align-items:center;display:flex;flex-direction:column;gap:8px}.status-text{color:#4b5563;font-size:16px;font-weight:500}.duration{color:#9ca3af;font-family:monospace;font-size:14px}.waveform-container{margin-bottom:32px;width:100%}.waveform-bars{align-items:center;display:flex;gap:4px;height:60px;justify-content:center}.waveform-bar{animation:waveformPulse 1s ease-in-out infinite;background:linear-gradient(0deg,#0ea5e9,#06b6d4);border-radius:2px;min-height:10%;transition:height .1s ease;width:4px}@keyframes waveformPulse{0%,to{opacity:.6}50%{opacity:1}}.call-controls{gap:24px}.call-controls,.control-button{display:flex;justify-content:center}.control-button{align-items:center;border:none;border-radius:50%;cursor:pointer;flex-direction:column;gap:8px;height:80px;padding:16px;transition:all .2s;width:80px}.mute-button{background:#f3f4f6;color:#4b5563}.mute-button:hover{background:#e5e7eb}.mute-button.muted{background:#fee2e2;color:#dc2626}.end-call-button{background:#ef4444;color:#fff}.end-call-button:hover{background:#dc2626}.control-label{font-size:12px;font-weight:500;margin-top:4px}"]
-                },] }
-    ];
-    VoiceAgentModalComponent.ctorParameters = function () { return [
-        { type: VoiceAgentService },
-        { type: AudioAnalyzerService }
-    ]; };
-    VoiceAgentModalComponent.propDecorators = {
-        close: [{ type: i0.Output }],
-        apiUrl: [{ type: i0.Input }],
-        token: [{ type: i0.Input }],
-        botId: [{ type: i0.Input }],
-        conversationId: [{ type: i0.Input }],
-        agentName: [{ type: i0.Input }],
-        agentRole: [{ type: i0.Input }],
-        agentAvatar: [{ type: i0.Input }]
-    };
-
     var VoiceAgentModule = /** @class */ (function () {
         function VoiceAgentModule() {
         }
@@ -3728,7 +3776,7 @@
     HiveGptModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [ChatBotComponent, ChatDrawerComponent, VideoPlayerComponent, SafeHtmlPipe, BotHtmlEditorComponent],
-                    imports: [common.CommonModule, icon.MatIconModule, sidenav.MatSidenavModule, forms.FormsModule, forms.ReactiveFormsModule, ngxQuill.QuillModule, VoiceAgentModule],
+                    imports: [common.CommonModule, overlay.OverlayModule, icon.MatIconModule, sidenav.MatSidenavModule, forms.FormsModule, forms.ReactiveFormsModule, ngxQuill.QuillModule, VoiceAgentModule],
                     exports: [ChatBotComponent, ChatDrawerComponent, VideoPlayerComponent]
                 },] }
     ];
@@ -3745,6 +3793,8 @@
     exports.ChatBotComponent = ChatBotComponent;
     exports.ChatDrawerComponent = ChatDrawerComponent;
     exports.HiveGptModule = HiveGptModule;
+    exports.VOICE_MODAL_CLOSE_CALLBACK = VOICE_MODAL_CLOSE_CALLBACK;
+    exports.VOICE_MODAL_CONFIG = VOICE_MODAL_CONFIG;
     exports.VoiceAgentModalComponent = VoiceAgentModalComponent;
     exports.VoiceAgentModule = VoiceAgentModule;
     exports.VoiceAgentService = VoiceAgentService;