@hivegpt/hiveai-angular 0.0.404 → 0.0.405

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1410,6 +1410,8 @@
1410
1410
  this.agentRole = 'AI Agent Specialist';
1411
1411
  this.injectedConfig = null;
1412
1412
  this.onCloseCallback = null;
1413
+ /** Default bot avatar (Nia). Use agentAvatar when provided. */
1414
+ this.defaultAvatarUrl = 'https://www.jotform.com/uploads/mehmetkarakasli/form_files/1564593667676a8e85f23758.86945537_icon.png';
1413
1415
  this.callState = 'idle';
1414
1416
  this.statusText = '';
1415
1417
  this.duration = '00:00';
@@ -1420,6 +1422,13 @@
1420
1422
  this.subscriptions = [];
1421
1423
  this.isConnecting = false;
1422
1424
  }
1425
+ Object.defineProperty(VoiceAgentModalComponent.prototype, "displayAvatarUrl", {
1426
+ get: function () {
1427
+ return this.agentAvatar || this.defaultAvatarUrl;
1428
+ },
1429
+ enumerable: false,
1430
+ configurable: true
1431
+ });
1423
1432
  VoiceAgentModalComponent.prototype.ngOnInit = function () {
1424
1433
  var _this = this;
1425
1434
  var _a, _b, _c, _d, _e, _f;
@@ -1509,6 +1518,11 @@
1509
1518
  VoiceAgentModalComponent.prototype.toggleMic = function () {
1510
1519
  this.voiceAgentService.toggleMic();
1511
1520
  };
1521
+ /** Map audio level (0–100) to waveform bar height in px (3–20). */
1522
+ VoiceAgentModalComponent.prototype.getWaveformHeight = function (level) {
1523
+ var n = Math.min(100, Math.max(0, level !== null && level !== void 0 ? level : 0));
1524
+ return 3 + (n / 100) * 17;
1525
+ };
1512
1526
  VoiceAgentModalComponent.prototype.endCall = function () {
1513
1527
  var _a;
1514
1528
  this.disconnect();
@@ -1520,8 +1534,8 @@
1520
1534
  VoiceAgentModalComponent.decorators = [
1521
1535
  { type: i0.Component, args: [{
1522
1536
  selector: 'hivegpt-voice-agent-modal',
1523
- 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",
1524
- 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:99999999999!important}.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}"]
1537
+ template: "<div class=\"voice-agent-modal-overlay\" (click)=\"endCall()\">\n <div class=\"voice-container voice-agent-modal\" (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div class=\"header\">\n <div class=\"header-left\">\n <div class=\"header-icon\">\n <svg width=\"16\" height=\"16\" 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=\"header-title\">Voice</span>\n </div>\n <button class=\"close-button\" (click)=\"endCall()\" type=\"button\" aria-label=\"Close\">\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 <!-- 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\n class=\"avatar-image\"\n [src]=\"displayAvatarUrl\"\n alt=\"Nia\"\n />\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\">Collaboration Manager AI Agent Specialist</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-indicator\" *ngIf=\"callState !== 'idle' && callState !== 'ended'\">\n <div *ngIf=\"callState === 'connecting'\" class=\"status-connecting\">\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=\"status-timer\">{{ duration }}</span>\n </div>\n </div>\n\n <!-- Waveform -->\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.px]=\"getWaveformHeight(level)\"\n ></div>\n </div>\n </div>\n\n <!-- Call Controls (when connected) -->\n <div class=\"controls\" *ngIf=\"callState === 'connected' || callState === 'listening' || callState === 'talking'\">\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 <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 <button class=\"control-btn end-call-btn\" (click)=\"endCall()\" type=\"button\" title=\"End Call\">\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",
1538
+ styles: [":host{display:block}.voice-agent-modal-overlay{align-items:center;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:center;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;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}.waveform-container{margin-bottom:10px;padding:0 20px}.waveform-bars,.waveform-container{align-items:center;display:flex;gap:3px;height:60px;justify-content:center}.waveform-bar{background:linear-gradient(180deg,#94a3b8,#64748b);border-radius:2px;box-shadow:0 0 3px rgba(100,116,139,.2);max-height:20px;min-height:3px;transition:height .15s ease-in-out;width:3px}.waveform-bar:nth-child(2n){background:linear-gradient(180deg,#cbd5e1,#94a3b8)}.waveform-bar:nth-child(3n){background:linear-gradient(180deg,#64748b,#475569)}.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}"]
1525
1539
  },] }
1526
1540
  ];
1527
1541
  VoiceAgentModalComponent.ctorParameters = function () { return [