@sippet-ai/operator-widget 0.0.12

package/dist/components/voip-widget/voip-widget.js

@@ -0,0 +1,1329 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+// @ts-nocheck
+import { html, LitElement } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { UserAgent, Web } from 'sip.js';
+import { TW } from '../../lib/tailwindMixin.js';
+import { acceptCallQueueEntry, buildCSRFHeaders, DEFAULT_BASE_URL, initSocket, joinEventsChannel, issueOperatorSipAccess, listCallQueueEntries, listCalls, listContacts, setOperatorStatus, whoAmI, } from '@sippet-ai/sdk-js';
+import './voip-widget-launcher.js';
+import './voip-widget-panel.js';
+import './voip-widget-phone-tab.js';
+import './voip-widget-queue-tab.js';
+import './voip-widget-contacts-tab.js';
+import './voip-widget-history-tab.js';
+import './voip-widget-settings-tab.js';
+const TwLitElement = TW(LitElement);
+const SESSION_SIP_TTL_MS = 9 * 60 * 60 * 1000;
+const SESSION_SIP_REFRESH_BUFFER_MS = 10 * 60 * 1000;
+const WIDGET_LOCK_KEY = 'sippetai_operator_widget_lock';
+const WIDGET_LOCK_HEARTBEAT_MS = 2000;
+const WIDGET_LOCK_STALE_MS = 8000;
+/**
+ * A VoIP widget web component allowing real-time telephony for Sippet AI integrations
+ *
+ * @tag sippetai-voip-widget
+ * @since 0.0.1
+ * @status experimental
+ *
+ **/
+export class SippetAIVoipWidget extends TwLitElement {
+    constructor() {
+        super(...arguments);
+        this.apiKey = '';
+        this.sessionAuth = false;
+        this.apiOrigin = '';
+        this.sipUrl = 'sip.sippet.ai';
+        this.sipUser = 'test-sip';
+        this.sipUserId = '';
+        this.sipPassword = 'supersecurepass';
+        this.sipWebSocketUrl = 'wss://sip.sippet.ai:7443';
+        this.userName = 'Agent';
+        this.userEmail = 'agent@example.com';
+        this.availability = 'logged_out';
+        this.queueCount = 0;
+        this.incomingCall = false;
+        this.incomingCallerName = 'Colleague';
+        this.incomingFromQueue = false;
+        this.contacts = [];
+        this.history = [];
+        this.queuedCalls = [];
+        this.open = false;
+        this.activeTab = 'phone';
+        this.dialNumber = '';
+        this.callState = 'idle';
+        this.sipStatus = 'idle';
+        this.callSeconds = 0;
+        this.isMuted = false;
+        this.isHeld = false;
+        this.dragOffsetX = 0;
+        this.dragOffsetY = 0;
+        this.dragX = 0;
+        this.dragY = 0;
+        this.audioInputs = [];
+        this.audioOutputs = [];
+        this.selectedMicId = '';
+        this.selectedSpeakerId = '';
+        this.hasMediaPermission = false;
+        this.widgetLocked = false;
+        this.sipConfigKey = '';
+        this.sessionSipCredentialsIssued = false;
+        this.widgetTabId = '';
+        this.handleWidgetStorage = (event) => {
+            if (event.key !== WIDGET_LOCK_KEY)
+                return;
+            this.syncWidgetLock();
+        };
+        this.handleVisibilityChange = () => {
+            if (document.visibilityState === 'visible') {
+                this.syncWidgetLock();
+            }
+        };
+        this.handlePageHide = () => {
+            this.releaseWidgetLock();
+        };
+        this.handleDeviceChange = () => {
+            void this.refreshDevices();
+        };
+        this.handleQueueEntryEvent = () => {
+            if (this.widgetLocked)
+                return;
+            void this.loadQueueEntries();
+        };
+    }
+    get sipServer() {
+        if (this.sipWebSocketUrl)
+            return this.sipWebSocketUrl;
+        if (!this.sipUrl)
+            return '';
+        return `wss://${this.sipUrl}/ws`;
+    }
+    ensureTabId() {
+        if (this.widgetTabId)
+            return;
+        if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+            this.widgetTabId = crypto.randomUUID();
+        }
+        else {
+            this.widgetTabId = `tab-${Math.random().toString(36).slice(2)}`;
+        }
+    }
+    readWidgetLock() {
+        try {
+            const raw = window.localStorage.getItem(WIDGET_LOCK_KEY);
+            if (!raw)
+                return null;
+            const parsed = JSON.parse(raw);
+            if (!parsed || typeof parsed !== 'object')
+                return null;
+            const id = parsed.id;
+            const updatedAt = parsed.updatedAt ?? parsed.updated_at;
+            if (typeof id !== 'string' || typeof updatedAt !== 'number')
+                return null;
+            return { id, updatedAt };
+        }
+        catch {
+            return null;
+        }
+    }
+    writeWidgetLock() {
+        this.ensureTabId();
+        try {
+            window.localStorage.setItem(WIDGET_LOCK_KEY, JSON.stringify({ id: this.widgetTabId, updatedAt: Date.now() }));
+        }
+        catch {
+            // Ignore storage failures.
+        }
+    }
+    releaseWidgetLock() {
+        try {
+            const lock = this.readWidgetLock();
+            if (!lock || lock.id !== this.widgetTabId)
+                return;
+            window.localStorage.removeItem(WIDGET_LOCK_KEY);
+        }
+        catch {
+            // Ignore storage failures.
+        }
+    }
+    startWidgetLockHeartbeat() {
+        if (this.widgetLockHeartbeat)
+            return;
+        this.widgetLockHeartbeat = window.setInterval(() => {
+            const lock = this.readWidgetLock();
+            if (!lock || lock.id !== this.widgetTabId) {
+                this.stopWidgetLockHeartbeat();
+                this.setWidgetLocked(true);
+                return;
+            }
+            this.writeWidgetLock();
+        }, WIDGET_LOCK_HEARTBEAT_MS);
+    }
+    stopWidgetLockHeartbeat() {
+        if (!this.widgetLockHeartbeat)
+            return;
+        window.clearInterval(this.widgetLockHeartbeat);
+        this.widgetLockHeartbeat = undefined;
+    }
+    setWidgetLocked(locked) {
+        if (this.widgetLocked === locked)
+            return;
+        this.widgetLocked = locked;
+        if (locked) {
+            void this.teardownSip();
+            this.teardownQueueChannel();
+        }
+        else {
+            void this.refreshSessionSipCredentials(true);
+            void this.setupSip();
+            this.initQueueChannel();
+        }
+    }
+    syncWidgetLock() {
+        if (typeof window === 'undefined' || !window.localStorage)
+            return;
+        this.ensureTabId();
+        const now = Date.now();
+        const lock = this.readWidgetLock();
+        if (!lock || now - lock.updatedAt > WIDGET_LOCK_STALE_MS) {
+            this.writeWidgetLock();
+            this.startWidgetLockHeartbeat();
+            this.setWidgetLocked(false);
+            return;
+        }
+        if (lock.id === this.widgetTabId) {
+            this.startWidgetLockHeartbeat();
+            this.setWidgetLocked(false);
+            return;
+        }
+        this.stopWidgetLockHeartbeat();
+        this.setWidgetLocked(true);
+    }
+    initWidgetLock() {
+        if (typeof window === 'undefined')
+            return;
+        this.syncWidgetLock();
+        if (!this.widgetLockPoller) {
+            this.widgetLockPoller = window.setInterval(() => {
+                this.syncWidgetLock();
+            }, WIDGET_LOCK_HEARTBEAT_MS);
+        }
+        window.addEventListener('storage', this.handleWidgetStorage);
+        window.addEventListener('visibilitychange', this.handleVisibilityChange);
+        window.addEventListener('pagehide', this.handlePageHide);
+    }
+    teardownWidgetLock() {
+        this.stopWidgetLockHeartbeat();
+        if (this.widgetLockPoller) {
+            window.clearInterval(this.widgetLockPoller);
+            this.widgetLockPoller = undefined;
+        }
+        window.removeEventListener('storage', this.handleWidgetStorage);
+        window.removeEventListener('visibilitychange', this.handleVisibilityChange);
+        window.removeEventListener('pagehide', this.handlePageHide);
+        this.releaseWidgetLock();
+    }
+    configureSdkEndpoints() {
+        if (!this.apiOrigin)
+            return;
+        if (typeof globalThis === 'undefined')
+            return;
+        const configHolder = globalThis;
+        configHolder.SippetAiSdkConfig = {
+            ...configHolder.SippetAiSdkConfig,
+            rpcRunEndpoint: `${this.apiOrigin}/rpc/run`,
+            rpcValidateEndpoint: `${this.apiOrigin}/rpc/validate`,
+        };
+    }
+    getRpcConfig() {
+        if (this.sessionAuth) {
+            this.configureSdkEndpoints();
+            return {
+                headers: buildCSRFHeaders(),
+                fetchOptions: { credentials: 'include' },
+            };
+        }
+        if (!this.apiKey)
+            return null;
+        return { headers: { 'x-api-key': this.apiKey } };
+    }
+    clearSipCredentialRefresh() {
+        if (!this.sipCredentialRefreshTimer)
+            return;
+        window.clearTimeout(this.sipCredentialRefreshTimer);
+        this.sipCredentialRefreshTimer = undefined;
+    }
+    scheduleSipCredentialRefresh(expiresAtMs) {
+        this.clearSipCredentialRefresh();
+        const now = Date.now();
+        const fallbackExpiry = now + SESSION_SIP_TTL_MS;
+        const expiry = expiresAtMs ?? fallbackExpiry;
+        const remaining = Math.max(0, expiry - now);
+        const refreshIn = Math.max(remaining - SESSION_SIP_REFRESH_BUFFER_MS, 60000);
+        this.sipCredentialRefreshTimer = window.setTimeout(() => {
+            void this.refreshSessionSipCredentials(true);
+        }, refreshIn);
+    }
+    parseSipExpiry(value) {
+        if (!value)
+            return null;
+        if (typeof value === 'number') {
+            return value < 1_000_000_000_000 ? value * 1000 : value;
+        }
+        if (typeof value === 'string') {
+            const parsed = Date.parse(value);
+            return Number.isNaN(parsed) ? null : parsed;
+        }
+        return null;
+    }
+    isSipCredentialExpiringSoon() {
+        if (!this.sipCredentialExpiresAt)
+            return true;
+        return (this.sipCredentialExpiresAt - Date.now() <=
+            SESSION_SIP_REFRESH_BUFFER_MS);
+    }
+    async refreshSessionSipCredentials(force = false) {
+        if (!this.sessionAuth)
+            return;
+        if (this.widgetLocked)
+            return;
+        if (this.sipCredentialPromise)
+            return this.sipCredentialPromise;
+        if (!force && this.sessionSipCredentialsIssued && !this.isSipCredentialExpiringSoon()) {
+            return;
+        }
+        const config = this.getRpcConfig();
+        if (!config)
+            return;
+        this.sipCredentialPromise = (async () => {
+            const result = await issueOperatorSipAccess({
+                input: {},
+                ...config,
+            });
+            if (!result.success) {
+                console.warn('SippetAIVoipWidget: failed to issue session SIP credentials.');
+                return;
+            }
+            const data = result.data;
+            const sip = data?.sip ??
+                data?.sipCredentials ??
+                data?.sip_credentials ??
+                data?.credentials ??
+                data;
+            if (!sip) {
+                console.warn('SippetAIVoipWidget: missing SIP credentials.');
+                return;
+            }
+            if (sip.username)
+                this.sipUser = sip.username;
+            if (sip.password)
+                this.sipPassword = sip.password;
+            if (sip.domain)
+                this.sipUrl = sip.domain;
+            if (sip.server)
+                this.sipWebSocketUrl = sip.server;
+            const expiresAt = this.parseSipExpiry(sip.expiresAt ??
+                sip.expires_at ??
+                data?.expiresAt ??
+                data?.expires_at) ??
+                Date.now() + SESSION_SIP_TTL_MS;
+            this.sipCredentialExpiresAt = expiresAt;
+            this.sessionSipCredentialsIssued = Boolean(sip.username && sip.password);
+            this.scheduleSipCredentialRefresh(expiresAt);
+        })().finally(() => {
+            this.sipCredentialPromise = undefined;
+        });
+        return this.sipCredentialPromise;
+    }
+    openPanel(tab = 'phone') {
+        this.open = true;
+        this.activeTab = tab;
+    }
+    async callNumber(phoneNumber) {
+        this.openPanel('phone');
+        this.dialNumber = phoneNumber;
+        return this.handleCall();
+    }
+    async answerCall() {
+        this.openPanel('phone');
+        return this.handleAccept();
+    }
+    async declineCall() {
+        this.openPanel('phone');
+        return this.handleDecline();
+    }
+    async toggleHold() {
+        this.openPanel('phone');
+        return this.handleHold();
+    }
+    transferTo(queue) {
+        this.openPanel('phone');
+        this.dialNumber = queue;
+        this.handleTransfer();
+    }
+    async refreshDevices() {
+        if (!navigator.mediaDevices?.enumerateDevices)
+            return;
+        try {
+            const devices = await navigator.mediaDevices.enumerateDevices();
+            const hasLabels = devices.some(device => device.label);
+            this.hasMediaPermission = hasLabels;
+            const audioInputs = devices
+                .filter(device => device.kind === 'audioinput')
+                .map((device, index) => ({
+                id: device.deviceId,
+                label: device.label || `Microphone ${index + 1}`,
+            }));
+            const audioOutputs = devices
+                .filter(device => device.kind === 'audiooutput')
+                .map((device, index) => ({
+                id: device.deviceId,
+                label: device.label || `Speaker ${index + 1}`,
+            }));
+            this.audioInputs = audioInputs;
+            this.audioOutputs = audioOutputs;
+            if (!this.selectedMicId && audioInputs[0]) {
+                this.selectedMicId = audioInputs[0].id;
+            }
+            if (!this.selectedSpeakerId && audioOutputs[0]) {
+                this.selectedSpeakerId = audioOutputs[0].id;
+            }
+        }
+        catch (error) {
+            // Ignore device enumeration errors.
+        }
+    }
+    async requestMediaPermission() {
+        if (!navigator.mediaDevices?.getUserMedia)
+            return;
+        try {
+            this.permissionStream = await navigator.mediaDevices.getUserMedia({
+                audio: true,
+                video: false,
+            });
+            await this.refreshDevices();
+            this.stopPermissionStream();
+        }
+        catch (error) {
+            // Ignore permission errors; labels may remain hidden.
+        }
+    }
+    async applySpeakerSelection() {
+        if (!this.remoteAudio)
+            return;
+        const element = this.remoteAudio;
+        if (!element.setSinkId || !this.selectedSpeakerId)
+            return;
+        try {
+            await element.setSinkId(this.selectedSpeakerId);
+        }
+        catch (error) {
+            // Some browsers restrict setSinkId without user gesture.
+        }
+    }
+    async setupSip() {
+        if (!this.remoteAudio)
+            return;
+        if (this.widgetLocked)
+            return;
+        if (this.sessionAuth) {
+            await this.refreshSessionSipCredentials();
+            if (!this.sessionSipCredentialsIssued)
+                return;
+        }
+        if (!this.sipUrl || !this.sipUser || !this.sipPassword)
+            return;
+        const server = this.sipServer;
+        if (!server)
+            return;
+        const aor = `sip:${this.sipUser}@${this.sipUrl}`;
+        const configKey = `${server}|${aor}|${this.sipPassword}|${this.userName}|${this.selectedMicId}`;
+        if (this.simpleUser && this.sipConfigKey === configKey)
+            return;
+        await this.teardownSip();
+        this.sipConfigKey = configKey;
+        this.sipStatus = 'connecting';
+        const uri = UserAgent.makeURI(aor);
+        const audioConstraint = this.selectedMicId
+            ? { deviceId: { exact: this.selectedMicId } }
+            : true;
+        const options = {
+            aor,
+            media: {
+                constraints: {
+                    audio: audioConstraint,
+                    video: false,
+                },
+                remote: { audio: this.remoteAudio },
+            },
+            delegate: {
+                onCallReceived: () => {
+                    this.incomingCall = true;
+                    this.incomingFromQueue = false;
+                    this.setCallState('incoming');
+                },
+                onCallCreated: () => {
+                    this.setCallState('outgoing');
+                },
+                onCallAnswered: () => {
+                    this.incomingCall = false;
+                    this.setCallState('active');
+                    this.open = true;
+                },
+                onCallHangup: () => {
+                    this.incomingCall = false;
+                    this.setCallState('idle');
+                },
+                onCallHold: (held) => {
+                    this.isHeld = held;
+                    this.setCallState(held ? 'held' : 'active');
+                },
+                onServerConnect: () => {
+                    this.sipStatus = 'connected';
+                },
+                onServerDisconnect: () => {
+                    this.sipStatus = 'idle';
+                },
+            },
+            userAgentOptions: {
+                authorizationUsername: this.sipUser,
+                authorizationPassword: this.sipPassword,
+                displayName: this.userName,
+                uri: uri ?? undefined,
+            },
+        };
+        this.simpleUser = new Web.SimpleUser(server, options);
+        try {
+            await this.simpleUser.connect();
+            await this.simpleUser.register();
+            this.sipStatus = 'connected';
+        }
+        catch (error) {
+            this.sipStatus = 'error';
+        }
+    }
+    async teardownSip() {
+        if (!this.simpleUser)
+            return;
+        try {
+            await this.simpleUser.unregister();
+            await this.simpleUser.disconnect();
+        }
+        catch (error) {
+            // Best-effort cleanup.
+        }
+        this.simpleUser = undefined;
+    }
+    firstUpdated() {
+        this.configureSdkEndpoints();
+        this.initWidgetLock();
+        void this.refreshSessionSipCredentials();
+        void this.refreshDevices();
+        void this.setupSip();
+        void this.loadContacts();
+        void this.loadQueueEntries();
+        this.initQueueChannel();
+        if (navigator.mediaDevices) {
+            navigator.mediaDevices.addEventListener('devicechange', this.handleDeviceChange);
+        }
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('apiOrigin')) {
+            this.configureSdkEndpoints();
+            if (this.sessionAuth) {
+                void this.refreshSessionSipCredentials(true);
+            }
+            this.resetQueueChannel();
+        }
+        if (changedProperties.has('sessionAuth')) {
+            this.sessionSipCredentialsIssued = false;
+            this.sipCredentialExpiresAt = undefined;
+            this.clearSipCredentialRefresh();
+            if (this.sessionAuth) {
+                void this.refreshSessionSipCredentials(true);
+            }
+            this.resetQueueChannel();
+        }
+        if (changedProperties.has('sipUrl') ||
+            changedProperties.has('sipUser') ||
+            changedProperties.has('sipPassword') ||
+            changedProperties.has('sipWebSocketUrl') ||
+            changedProperties.has('userName') ||
+            changedProperties.has('selectedMicId') ||
+            changedProperties.has('sessionAuth')) {
+            void this.setupSip();
+        }
+        if (changedProperties.has('selectedSpeakerId')) {
+            void this.applySpeakerSelection();
+        }
+        if (changedProperties.has('callState')) {
+            if (this.callState === 'active' || this.callState === 'held') {
+                this.startCallTimer();
+            }
+            else if (this.callState === 'idle') {
+                this.stopCallTimer();
+            }
+        }
+        if (changedProperties.has('open')) {
+            if (!this.open) {
+                this.activeTab = 'phone';
+                this.stopPermissionStream();
+            }
+        }
+        if (changedProperties.has('apiKey') || changedProperties.has('sessionAuth')) {
+            void this.loadContacts();
+            if (this.activeTab === 'history') {
+                void this.loadHistory();
+            }
+            void this.loadQueueEntries();
+            this.resetQueueChannel();
+        }
+        if (changedProperties.has('contacts') && this.history.length > 0) {
+            this.history = this.history.map(entry => ({
+                ...entry,
+                name: this.resolveHistoryName(entry.number),
+            }));
+        }
+    }
+    disconnectedCallback() {
+        void this.teardownSip();
+        this.stopCallTimer();
+        this.stopPermissionStream();
+        this.teardownQueueChannel();
+        this.clearSipCredentialRefresh();
+        this.teardownWidgetLock();
+        if (navigator.mediaDevices) {
+            navigator.mediaDevices.removeEventListener('devicechange', this.handleDeviceChange);
+        }
+        super.disconnectedCallback();
+    }
+    handleToggleOpen() {
+        this.open = !this.open;
+        if (this.open) {
+            void this.requestMediaPermission();
+        }
+    }
+    handleSelectTab(tab) {
+        this.activeTab = tab;
+        if (tab === 'history') {
+            void this.loadHistory();
+        }
+        if (tab === 'queue') {
+            void this.loadQueueEntries();
+        }
+    }
+    handleShowSettings() {
+        this.activeTab = 'settings';
+    }
+    handleStartDrag(event) {
+        this.dragOffsetX = event.clientX - this.dragX;
+        this.dragOffsetY = event.clientY - this.dragY;
+    }
+    handleDrag(event) {
+        if (!this.open)
+            return;
+        if (event.buttons === 0)
+            return;
+        this.dragX = event.clientX - this.dragOffsetX;
+        this.dragY = event.clientY - this.dragOffsetY;
+    }
+    handleEndDrag(event) {
+        void event;
+    }
+    resolveDialTarget() {
+        if (!this.dialNumber)
+            return '';
+        if (this.dialNumber.startsWith('sip:'))
+            return this.dialNumber;
+        if (this.dialNumber.includes('@'))
+            return `sip:${this.dialNumber}`;
+        return `sip:${this.dialNumber}@${this.sipUrl}`;
+    }
+    async handleCall() {
+        if (!this.simpleUser)
+            return;
+        const target = this.resolveDialTarget();
+        if (!target)
+            return;
+        try {
+            await this.simpleUser.call(target, {
+                sessionDescriptionHandlerOptions: {
+                    constraints: { audio: true, video: false },
+                },
+            });
+            this.setCallState('active');
+        }
+        catch (error) {
+            this.setCallState('idle');
+        }
+    }
+    async handleHangup() {
+        if (!this.simpleUser)
+            return;
+        try {
+            await this.simpleUser.hangup();
+        }
+        catch (error) {
+            // Best-effort hangup.
+        }
+        this.setCallState('idle');
+    }
+    async handleAccept() {
+        if (!this.simpleUser)
+            return;
+        try {
+            await this.simpleUser.answer();
+            this.incomingCall = false;
+            this.setCallState('active');
+            this.open = true;
+        }
+        catch (error) {
+            // Best-effort.
+        }
+    }
+    async handleHold() {
+        if (!this.simpleUser)
+            return;
+        try {
+            if (this.callState === 'incoming') {
+                await this.simpleUser.answer();
+                this.setCallState('active');
+            }
+            if (this.isHeld) {
+                await this.simpleUser.unhold();
+                this.isHeld = false;
+                this.setCallState('active');
+            }
+            else {
+                await this.simpleUser.hold();
+                this.isHeld = true;
+                this.setCallState('held');
+            }
+        }
+        catch (error) {
+            // Best-effort.
+        }
+    }
+    async handleDecline() {
+        if (!this.simpleUser)
+            return;
+        try {
+            await this.simpleUser.decline();
+        }
+        catch (error) {
+            // Best-effort.
+        }
+        this.incomingCall = false;
+        this.setCallState('idle');
+    }
+    handleMuteToggle() {
+        if (!this.simpleUser)
+            return;
+        if (this.isMuted) {
+            this.simpleUser.unmute();
+            this.isMuted = false;
+        }
+        else {
+            this.simpleUser.mute();
+            this.isMuted = true;
+        }
+    }
+    handleTransfer() {
+        this.dispatchEvent(new CustomEvent('voip-transfer', {
+            detail: { number: this.dialNumber },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    emitCallState(state) {
+        this.dispatchEvent(new CustomEvent('voip-call-state', {
+            detail: { state },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    setCallState(state) {
+        this.callState = state;
+        this.emitCallState(state);
+        if (state === 'idle') {
+            this.callSeconds = 0;
+            this.isHeld = false;
+            this.isMuted = false;
+        }
+    }
+    startCallTimer() {
+        if (this.callTimer)
+            return;
+        this.callTimer = window.setInterval(() => {
+            this.callSeconds += 1;
+        }, 1000);
+    }
+    stopCallTimer() {
+        if (!this.callTimer)
+            return;
+        window.clearInterval(this.callTimer);
+        this.callTimer = undefined;
+    }
+    stopPermissionStream() {
+        if (!this.permissionStream)
+            return;
+        this.permissionStream.getTracks().forEach(track => track.stop());
+        this.permissionStream = undefined;
+    }
+    async loadContacts() {
+        const config = this.getRpcConfig();
+        if (!config) {
+            console.warn('SippetAIVoipWidget: api-key or session-auth is required to load contacts.');
+            this.contacts = [];
+            return;
+        }
+        const result = await listContacts({
+            fields: ['id', 'fullName', 'phoneE164'],
+            ...config,
+        });
+        if (!result.success) {
+            this.contacts = [];
+            return;
+        }
+        this.contacts = result.data
+            .filter(contact => Boolean(contact.phoneE164))
+            .map(contact => ({
+            name: contact.fullName || contact.phoneE164 || 'Unknown',
+            number: contact.phoneE164 ?? '',
+        }));
+    }
+    resolveHistoryName(number) {
+        if (!number)
+            return 'Unknown';
+        const match = this.contacts.find(contact => contact.number === number);
+        return match?.name ?? number;
+    }
+    formatHistoryTime(value) {
+        if (!value)
+            return 'Unknown';
+        const date = new Date(value);
+        if (Number.isNaN(date.getTime()))
+            return 'Unknown';
+        const now = new Date();
+        const isToday = date.toDateString() === now.toDateString();
+        if (isToday) {
+            return date.toLocaleTimeString([], {
+                hour: '2-digit',
+                minute: '2-digit',
+            });
+        }
+        return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
+    }
+    async loadHistory() {
+        const config = this.getRpcConfig();
+        if (!config) {
+            console.warn('SippetAIVoipWidget: api-key or session-auth is required to load call history.');
+            this.history = [];
+            return;
+        }
+        const result = await listCalls({
+            fields: ['direction', 'fromNumber', 'toNumber', 'startedAt', 'status'],
+            ...config,
+            sort: '-startedAt',
+            page: { limit: 20 },
+        });
+        if (!result.success) {
+            this.history = [];
+            return;
+        }
+        const data = Array.isArray(result.data)
+            ? result.data
+            : (result.data?.results ?? []);
+        this.history = data.map(call => {
+            const number = call.direction === 'inbound' ? call.fromNumber : call.toNumber;
+            return {
+                name: this.resolveHistoryName(number),
+                number: number ?? '',
+                time: this.formatHistoryTime(call.startedAt ?? null),
+                type: call.direction === 'inbound' ? 'in' : 'out',
+            };
+        });
+    }
+    initQueueChannel() {
+        if (this.widgetLocked)
+            return;
+        if (this.queueChannel)
+            return;
+        if (!this.apiKey && !this.sessionAuth)
+            return;
+        const baseUrl = this.apiOrigin || DEFAULT_BASE_URL;
+        try {
+            this.queueSocket = initSocket({
+                publishableKey: this.apiKey || undefined,
+                baseUrl,
+            });
+            const channel = joinEventsChannel({}, this.queueSocket);
+            this.queueChannel = channel;
+            this.queueChannelUpdateRef = channel.on('call_queue_entry_updated', this.handleQueueEntryEvent);
+            this.queueChannelDeleteRef = channel.on('call_queue_entry_deleted', this.handleQueueEntryEvent);
+        }
+        catch (error) {
+            console.warn('SippetAIVoipWidget: failed to join events channel.');
+        }
+    }
+    teardownQueueChannel() {
+        if (this.queueChannel) {
+            if (this.queueChannelUpdateRef !== undefined) {
+                this.queueChannel.off('call_queue_entry_updated', this.queueChannelUpdateRef);
+            }
+            if (this.queueChannelDeleteRef !== undefined) {
+                this.queueChannel.off('call_queue_entry_deleted', this.queueChannelDeleteRef);
+            }
+            this.queueChannel.leave();
+        }
+        this.queueChannel = undefined;
+        this.queueChannelUpdateRef = undefined;
+        this.queueChannelDeleteRef = undefined;
+        if (this.queueSocket) {
+            this.queueSocket.disconnect();
+            this.queueSocket = undefined;
+        }
+    }
+    resetQueueChannel() {
+        this.teardownQueueChannel();
+        this.initQueueChannel();
+    }
+    formatQueueWaitTime(value) {
+        if (!value)
+            return '0:00';
+        const startedAt = new Date(value);
+        if (Number.isNaN(startedAt.getTime()))
+            return '0:00';
+        const seconds = Math.max(0, Math.floor((Date.now() - startedAt.getTime()) / 1000));
+        const minutes = Math.floor(seconds / 60);
+        const remainingSeconds = seconds % 60;
+        return `${minutes}:${String(remainingSeconds).padStart(2, '0')}`;
+    }
+    async loadQueueEntries() {
+        const config = this.getRpcConfig();
+        if (!config) {
+            console.warn('SippetAIVoipWidget: api-key or session-auth is required to load queue entries.');
+            this.queuedCalls = [];
+            this.queueCount = 0;
+            return;
+        }
+        const result = await listCallQueueEntries({
+            fields: [
+                'id',
+                'callerIdName',
+                'callerIdNumber',
+                'waitStartedAt',
+                'state',
+            ],
+            filter: { state: { eq: 'waiting' } },
+            sort: 'waitStartedAt',
+            page: { limit: 20 },
+            ...config,
+        });
+        if (!result.success) {
+            this.queuedCalls = [];
+            this.queueCount = 0;
+            return;
+        }
+        const data = Array.isArray(result.data)
+            ? result.data
+            : (result.data?.results ?? []);
+        this.queuedCalls = data.map(entry => ({
+            id: entry.id,
+            name: entry.callerIdName || entry.callerIdNumber || 'Unknown caller',
+            time: this.formatQueueWaitTime(entry.waitStartedAt ?? null),
+        }));
+        this.queueCount = this.queuedCalls.length;
+    }
+    async acceptQueueEntry(entryId) {
+        const config = this.getRpcConfig();
+        if (!config)
+            return;
+        if (!this.sipUser) {
+            console.warn('SippetAIVoipWidget: sipUser is required to accept queue entries.');
+            return;
+        }
+        const result = await acceptCallQueueEntry({
+            identity: entryId,
+            input: {
+                operatorName: this.sipUser,
+            },
+            ...config,
+        });
+        if (!result.success) {
+            console.warn('SippetAIVoipWidget: failed to accept queue entry.');
+            return;
+        }
+        void this.loadQueueEntries();
+    }
+    async resolveSipUserId() {
+        if (this.sipUserId)
+            return this.sipUserId;
+        if (!this.sessionAuth)
+            return undefined;
+        const config = this.getRpcConfig();
+        if (!config)
+            return undefined;
+        const result = await whoAmI({
+            fields: ['id', { sipUser: ['id', 'sipUsername'] }],
+            ...config,
+        });
+        if (!result.success) {
+            return undefined;
+        }
+        const sipUser = result.data?.sipUser;
+        if (sipUser?.id) {
+            this.sipUserId = sipUser.id;
+        }
+        if (!this.sipUser && sipUser?.sipUsername) {
+            this.sipUser = sipUser.sipUsername;
+        }
+        return this.sipUserId || undefined;
+    }
+    async updateOperatorStatus(value) {
+        const config = this.getRpcConfig();
+        if (!config)
+            return;
+        const sipUserId = await this.resolveSipUserId();
+        if (!sipUserId)
+            return;
+        if (!['available', 'on_break', 'logged_out'].includes(value))
+            return;
+        const result = await setOperatorStatus({
+            input: {
+                sipUserId,
+                status: value,
+                source: 'widget',
+            },
+            ...config,
+        });
+        if (!result.success) {
+            console.warn('SippetAIVoipWidget: failed to update operator status.');
+        }
+    }
+    render() {
+        const widgetStyle = this.open
+            ? `transform: translate(${this.dragX}px, ${this.dragY}px);`
+            : '';
+        const widgetClass = 'fixed bottom-6 right-6 z-50 font-sans';
+        const contentClass = this.widgetLocked
+            ? 'pointer-events-none opacity-50'
+            : '';
+        const lockOverlay = this.widgetLocked
+            ? html `
+          <div
+            class="absolute inset-0 z-50 flex items-center justify-center"
+            title="Use the widget opened in the first tab."
+          >
+            <div
+              class="rounded-xl bg-slate-900/80 px-3 py-2 text-xs font-semibold text-white shadow"
+            >
+              Widget active in another tab
+            </div>
+          </div>
+        `
+            : null;
+        return html `
+      <div class=${widgetClass} style=${widgetStyle}>
+        <div class=${contentClass}>
+          ${this.open
+            ? null
+            : html `
+                <sippetai-voip-widget-launcher
+                  .open=${this.open}
+                  .queueCount=${this.queueCount}
+                  .incomingCall=${this.incomingCall}
+                  .incomingFromQueue=${this.incomingFromQueue}
+                  .incomingCallerName=${this.incomingCallerName}
+                  @voip-toggle=${this.handleToggleOpen}
+                  @voip-accept=${this.handleAccept}
+                  @voip-hold=${this.handleHold}
+                  @voip-decline=${this.handleDecline}
+                ></sippetai-voip-widget-launcher>
+              `}
+          ${this.open
+            ? html `
+                <div class="mt-3">
+                  <sippetai-voip-widget-panel
+                    .userName=${this.userName}
+                    .availability=${this.availability}
+                    .activeTab=${this.activeTab}
+                    .incomingCall=${this.incomingCall}
+                    .incomingFromQueue=${this.incomingFromQueue}
+                    .incomingCallerName=${this.incomingCallerName}
+                    @voip-close=${this.handleToggleOpen}
+                    @voip-settings=${this.handleShowSettings}
+                    @voip-tab=${(event) => this.handleSelectTab(event.detail.tab)}
+                    @voip-availability=${(event) => {
+                this.availability = event.detail.value;
+                void this.updateOperatorStatus(event.detail.value);
+            }}
+                    @voip-accept=${this.handleAccept}
+                    @voip-hold=${this.handleHold}
+                    @voip-decline=${this.handleDecline}
+                    @voip-drag-start=${(event) => {
+                const { x, y } = event.detail;
+                this.handleStartDrag(new PointerEvent('pointerdown', {
+                    clientX: x,
+                    clientY: y,
+                }));
+            }}
+                    @voip-drag-move=${(event) => {
+                const { x, y, buttons } = event.detail;
+                this.handleDrag(new PointerEvent('pointermove', {
+                    clientX: x,
+                    clientY: y,
+                    buttons,
+                }));
+            }}
+                    @voip-drag-end=${() => {
+                this.handleEndDrag(new PointerEvent('pointerup'));
+            }}
+                  >
+                    ${this.activeTab === 'phone'
+                ? html `
+                          ${this.incomingCall
+                    ? html `
+                                <div
+                                  class="flex h-full flex-col items-center justify-center gap-4 rounded-2xl bg-slate-900 px-4 py-6 text-center text-white"
+                                >
+                                  <div
+                                    class="text-xs font-semibold uppercase tracking-wide text-white"
+                                  >
+                                    Incoming call
+                                    ${this.incomingFromQueue ? '(queue)' : ''}
+                                  </div>
+                                  <div class="text-lg font-semibold text-white">
+                                    ${this.incomingCallerName}
+                                  </div>
+                                  <div
+                                    class="flex flex-wrap justify-center gap-2"
+                                  >
+                                    <button
+                                      class="inline-flex items-center gap-2 rounded-xl bg-emerald-600 px-4 py-2 text-xs font-semibold text-white"
+                                      @click=${this.handleAccept}
+                                    >
+                                      Accept
+                                    </button>
+                                    <button
+                                      class="inline-flex items-center gap-2 rounded-xl bg-amber-400 px-4 py-2 text-xs font-semibold text-slate-900"
+                                      @click=${this.handleHold}
+                                    >
+                                      Hold
+                                    </button>
+                                    <button
+                                      class="inline-flex items-center gap-2 rounded-xl bg-red-600 px-4 py-2 text-xs font-semibold text-white"
+                                      @click=${this.handleDecline}
+                                    >
+                                      Decline
+                                    </button>
+                                  </div>
+                                </div>
+                              `
+                    : html `
+                                <sippetai-voip-widget-phone-tab
+                                  .dialNumber=${this.dialNumber}
+                                  .sipStatus=${this.sipStatus}
+                                  .callState=${this.callState}
+                                  .callSeconds=${this.callSeconds}
+                                  .isMuted=${this.isMuted}
+                                  .isHeld=${this.isHeld}
+                                  @voip-dial-change=${(event) => {
+                        this.dialNumber = event.detail.value;
+                    }}
+                                  @voip-dial-digit=${(event) => {
+                        this.dialNumber = `${this.dialNumber}${event.detail.digit}`;
+                    }}
+                                  @voip-call=${this.handleCall}
+                                  @voip-hangup=${this.handleHangup}
+                                  @voip-hold=${this.handleHold}
+                                  @voip-mute=${this.handleMuteToggle}
+                                  @voip-transfer=${this.handleTransfer}
+                                ></sippetai-voip-widget-phone-tab>
+                              `}
+                        `
+                : null}
+                    ${this.activeTab === 'queue'
+                ? html `
+                          <sippetai-voip-widget-queue-tab
+                            .queuedCalls=${this.queuedCalls}
+                            @voip-queue-pickup=${(event) => {
+                    const entryId = event.detail?.id;
+                    if (entryId) {
+                        void this.acceptQueueEntry(entryId);
+                    }
+                }}
+                          ></sippetai-voip-widget-queue-tab>
+                        `
+                : null}
+                    ${this.activeTab === 'contacts'
+                ? html `
+                          <sippetai-voip-widget-contacts-tab
+                            .contacts=${this.contacts}
+                            @voip-contact-call=${(event) => {
+                    this.openPanel('phone');
+                    this.dialNumber = event.detail.number;
+                    void this.handleCall();
+                }}
+                          ></sippetai-voip-widget-contacts-tab>
+                        `
+                : null}
+                    ${this.activeTab === 'history'
+                ? html `
+                          <sippetai-voip-widget-history-tab
+                            .history=${this.history}
+                          ></sippetai-voip-widget-history-tab>
+                        `
+                : null}
+                    ${this.activeTab === 'settings'
+                ? html `
+                          <sippetai-voip-widget-settings-tab
+                            .userEmail=${this.userEmail}
+                            .audioInputs=${this.audioInputs}
+                            .audioOutputs=${this.audioOutputs}
+                            .selectedMicId=${this.selectedMicId}
+                            .selectedSpeakerId=${this.selectedSpeakerId}
+                            .hasMediaPermission=${this.hasMediaPermission}
+                            .sipStatus=${this.sipStatus}
+                            @voip-email-change=${(event) => {
+                    this.userEmail = event.detail.value;
+                }}
+                            @voip-mic-change=${(event) => {
+                    this.selectedMicId = event.detail.value;
+                }}
+                            @voip-speaker-change=${(event) => {
+                    this.selectedSpeakerId = event.detail.value;
+                }}
+                            @voip-request-permission=${() => {
+                    void this.requestMediaPermission();
+                }}
+                          ></sippetai-voip-widget-settings-tab>
+                        `
+                : null}
+                  </sippetai-voip-widget-panel>
+                </div>
+              `
+            : null}
+        </div>
+        ${lockOverlay}
+      </div>
+      <audio class="hidden" autoplay></audio>
+    `;
+    }
+}
+__decorate([
+    property({ type: String, attribute: 'api-key' })
+], SippetAIVoipWidget.prototype, "apiKey", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'session-auth' })
+], SippetAIVoipWidget.prototype, "sessionAuth", void 0);
+__decorate([
+    property({ type: String, attribute: 'api-origin' })
+], SippetAIVoipWidget.prototype, "apiOrigin", void 0);
+__decorate([
+    property({ type: String })
+], SippetAIVoipWidget.prototype, "sipUrl", void 0);
+__decorate([
+    property({ type: String })
+], SippetAIVoipWidget.prototype, "sipUser", void 0);
+__decorate([
+    property({ type: String, attribute: 'sip-user-id' })
+], SippetAIVoipWidget.prototype, "sipUserId", void 0);
+__decorate([
+    property({ type: String })
+], SippetAIVoipWidget.prototype, "sipPassword", void 0);
+__decorate([
+    property({ type: String })
+], SippetAIVoipWidget.prototype, "sipWebSocketUrl", void 0);
+__decorate([
+    property({ type: String })
+], SippetAIVoipWidget.prototype, "userName", void 0);
+__decorate([
+    property({ type: String })
+], SippetAIVoipWidget.prototype, "userEmail", void 0);
+__decorate([
+    property({ type: String })
+], SippetAIVoipWidget.prototype, "availability", void 0);
+__decorate([
+    property({ type: Number })
+], SippetAIVoipWidget.prototype, "queueCount", void 0);
+__decorate([
+    property({ type: Boolean })
+], SippetAIVoipWidget.prototype, "incomingCall", void 0);
+__decorate([
+    property({ type: String })
+], SippetAIVoipWidget.prototype, "incomingCallerName", void 0);
+__decorate([
+    property({ type: Boolean })
+], SippetAIVoipWidget.prototype, "incomingFromQueue", void 0);
+__decorate([
+    property({ type: Array })
+], SippetAIVoipWidget.prototype, "contacts", void 0);
+__decorate([
+    property({ type: Array })
+], SippetAIVoipWidget.prototype, "history", void 0);
+__decorate([
+    property({ type: Array })
+], SippetAIVoipWidget.prototype, "queuedCalls", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SippetAIVoipWidget.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], SippetAIVoipWidget.prototype, "activeTab", void 0);
+__decorate([
+    state()
+], SippetAIVoipWidget.prototype, "dialNumber", void 0);
+__decorate([
+    state()
+], SippetAIVoipWidget.prototype, "callState", void 0);
+__decorate([
+    state()
+], SippetAIVoipWidget.prototype, "sipStatus", void 0);
+__decorate([
+    state()
+], SippetAIVoipWidget.prototype, "callSeconds", void 0);
+__decorate([
+    state()
+], SippetAIVoipWidget.prototype, "isMuted", void 0);
+__decorate([
+    state()
+], SippetAIVoipWidget.prototype, "isHeld", void 0);
+__decorate([
+    state()
+], SippetAIVoipWidget.prototype, "dragOffsetX", void 0);
+__decorate([
+    state()
+], SippetAIVoipWidget.prototype, "dragOffsetY", void 0);
+__decorate([
+    state()
+], SippetAIVoipWidget.prototype, "dragX", void 0);
+__decorate([
+    state()
+], SippetAIVoipWidget.prototype, "dragY", void 0);
+__decorate([
+    state()
+], SippetAIVoipWidget.prototype, "audioInputs", void 0);
+__decorate([
+    state()
+], SippetAIVoipWidget.prototype, "audioOutputs", void 0);
+__decorate([
+    state()
+], SippetAIVoipWidget.prototype, "selectedMicId", void 0);
+__decorate([
+    state()
+], SippetAIVoipWidget.prototype, "selectedSpeakerId", void 0);
+__decorate([
+    state()
+], SippetAIVoipWidget.prototype, "hasMediaPermission", void 0);
+__decorate([
+    state()
+], SippetAIVoipWidget.prototype, "widgetLocked", void 0);
+__decorate([
+    query('audio')
+], SippetAIVoipWidget.prototype, "remoteAudio", void 0);
+export default SippetAIVoipWidget;