@sippet-ai/operator-widget 0.0.12

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

@@ -0,0 +1,187 @@
+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;
+};
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { createIcons, Mic, MicOff, PhoneCall, PhoneOff, Repeat, Pause } from 'lucide';
+import { TW } from '../../lib/tailwindMixin.js';
+const TwLitElement = TW(LitElement);
+export class SippetAIVoipWidgetPhoneTab extends TwLitElement {
+    constructor() {
+        super(...arguments);
+        this.dialNumber = '';
+        this.sipStatus = 'idle';
+        this.callState = 'idle';
+        this.callSeconds = 0;
+        this.isMuted = false;
+        this.isHeld = false;
+    }
+    updated() {
+        createIcons({ icons: { PhoneCall, PhoneOff, Mic, MicOff, Repeat, Pause }, root: this.renderRoot });
+    }
+    emit(name, detail) {
+        this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+    }
+    playDtmfTone(digit) {
+        const frequencies = {
+            '1': [697, 1209],
+            '2': [697, 1336],
+            '3': [697, 1477],
+            '4': [770, 1209],
+            '5': [770, 1336],
+            '6': [770, 1477],
+            '7': [852, 1209],
+            '8': [852, 1336],
+            '9': [852, 1477],
+            '*': [941, 1209],
+            '0': [941, 1336],
+            '#': [941, 1477],
+        };
+        const tone = frequencies[digit];
+        if (!tone)
+            return;
+        const AudioContextCtor = window.AudioContext || window.webkitAudioContext;
+        if (!AudioContextCtor)
+            return;
+        const context = new AudioContextCtor();
+        const gain = context.createGain();
+        gain.gain.value = 0.08;
+        const osc1 = context.createOscillator();
+        const osc2 = context.createOscillator();
+        osc1.frequency.value = tone[0];
+        osc2.frequency.value = tone[1];
+        osc1.type = 'sine';
+        osc2.type = 'sine';
+        osc1.connect(gain);
+        osc2.connect(gain);
+        gain.connect(context.destination);
+        osc1.start();
+        osc2.start();
+        window.setTimeout(() => {
+            osc1.stop();
+            osc2.stop();
+            gain.disconnect();
+            context.close();
+        }, 140);
+    }
+    render() {
+        const isActive = this.callState === 'active' || this.callState === 'held';
+        const isOutgoing = this.callState === 'outgoing';
+        const minutes = Math.floor(this.callSeconds / 60)
+            .toString()
+            .padStart(2, '0');
+        const seconds = Math.floor(this.callSeconds % 60)
+            .toString()
+            .padStart(2, '0');
+        return html `
+      ${isActive
+            ? html `
+            <div class="mt-4 rounded-2xl border border-slate-200 bg-white p-3">
+              <div class="text-xs font-semibold uppercase tracking-wide text-slate-900">
+                Active call
+              </div>
+              <div class="text-lg font-semibold text-slate-900">${minutes}:${seconds}</div>
+              <div class="mt-3 grid grid-cols-2 gap-2">
+                <button
+                  class="inline-flex items-center justify-center gap-2 rounded-xl voip-primary py-2 text-xs font-semibold transition-shadow"
+                  @click=${() => this.emit('voip-hold')}
+                >
+                  <i data-lucide="pause" class="h-4 w-4"></i>
+                  ${this.isHeld ? 'Resume' : 'Hold'}
+                </button>
+                <button
+                  class="inline-flex items-center justify-center gap-2 rounded-xl voip-primary py-2 text-xs font-semibold transition-shadow"
+                  @click=${() => this.emit('voip-mute')}
+                >
+                  <i data-lucide=${this.isMuted ? 'mic-off' : 'mic'} class="h-4 w-4"></i>
+                  ${this.isMuted ? 'Unmute' : 'Mute'}
+                </button>
+                <button
+                  class="inline-flex items-center justify-center gap-2 rounded-xl bg-slate-200 py-2 text-xs font-semibold text-slate-900"
+                  @click=${() => this.emit('voip-transfer')}
+                >
+                  <i data-lucide="repeat" class="h-4 w-4"></i>
+                  Transfer
+                </button>
+                <button
+                  class="inline-flex items-center justify-center gap-2 rounded-xl bg-red-700 py-2 text-xs font-semibold text-white"
+                  @click=${() => this.emit('voip-hangup')}
+                >
+                  <i data-lucide="phone-off" class="h-4 w-4"></i>
+                  Hang up
+                </button>
+              </div>
+            </div>
+          `
+            : html `
+            <input
+              class="mt-1 w-full rounded-2xl border border-slate-200 bg-white px-3 py-2 text-center text-sm text-slate-900"
+              type="text"
+              placeholder="Enter number"
+              .value=${this.dialNumber}
+              @input=${(event) => this.emit('voip-dial-change', {
+                value: event.target.value,
+            })}
+            />
+
+            <div class="mt-3 grid grid-cols-3 gap-2">
+              ${['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'].map((digit) => html `
+            <button
+              class="rounded-2xl border border-slate-200 bg-white py-3 text-sm font-semibold text-slate-900"
+              @click=${() => {
+                this.playDtmfTone(digit);
+                this.emit('voip-dial-digit', { digit });
+            }}
+            >
+              ${digit}
+            </button>
+          `)}
+      </div>
+
+            ${isOutgoing
+                ? html `
+                  <button
+                    class="mt-4 inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-red-700 py-2 text-sm font-semibold text-white"
+                    @click=${() => this.emit('voip-hangup')}
+                  >
+                    <i data-lucide="phone-off" class="h-4 w-4"></i>
+                    Cancel
+                  </button>
+                `
+                : html `
+                  <button
+                    class="mt-4 inline-flex w-full items-center justify-center gap-2 rounded-2xl voip-primary py-2 text-sm font-semibold transition-shadow"
+                    @click=${() => this.emit('voip-call')}
+                  >
+                    <i data-lucide="phone-call" class="h-4 w-4"></i>
+                    Call
+                  </button>
+                `}
+          `}
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], SippetAIVoipWidgetPhoneTab.prototype, "dialNumber", void 0);
+__decorate([
+    property({ type: String })
+], SippetAIVoipWidgetPhoneTab.prototype, "sipStatus", void 0);
+__decorate([
+    property({ type: String })
+], SippetAIVoipWidgetPhoneTab.prototype, "callState", void 0);
+__decorate([
+    property({ type: Number })
+], SippetAIVoipWidgetPhoneTab.prototype, "callSeconds", void 0);
+__decorate([
+    property({ type: Boolean })
+], SippetAIVoipWidgetPhoneTab.prototype, "isMuted", void 0);
+__decorate([
+    property({ type: Boolean })
+], SippetAIVoipWidgetPhoneTab.prototype, "isHeld", void 0);
+if (!customElements.get('sippetai-voip-widget-phone-tab')) {
+    customElements.define('sippetai-voip-widget-phone-tab', SippetAIVoipWidgetPhoneTab);
+}

package/dist/components/voip-widget/voip-widget-queue-tab.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+import type { QueuedCall } from './voip-widget.types.js';
+declare const TwLitElement: typeof LitElement;
+export declare class SippetAIVoipWidgetQueueTab extends TwLitElement {
+    queuedCalls: QueuedCall[];
+    private emit;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sippetai-voip-widget-queue-tab': SippetAIVoipWidgetQueueTab;
+    }
+}
+export {};

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

@@ -0,0 +1,49 @@
+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;
+};
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { TW } from '../../lib/tailwindMixin.js';
+const TwLitElement = TW(LitElement);
+export class SippetAIVoipWidgetQueueTab extends TwLitElement {
+    constructor() {
+        super(...arguments);
+        this.queuedCalls = [];
+    }
+    emit(name, detail) {
+        this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+    }
+    render() {
+        const queuedCalls = Array.isArray(this.queuedCalls) ? this.queuedCalls : [];
+        if (queuedCalls.length === 0) {
+            return html `<div class="py-6 text-center text-xs text-slate-900">No one is waiting.</div>`;
+        }
+        return html `
+      <div class="flex flex-col gap-2">
+        ${queuedCalls.map((call) => html `
+            <div class="flex items-center justify-between gap-3 rounded-2xl bg-white px-3 py-2">
+              <div>
+                <div class="text-xs font-semibold text-slate-900">${call.name}</div>
+                <div class="text-[11px] text-slate-900">Waiting ${call.time}</div>
+              </div>
+              <button
+                class="rounded-xl voip-primary px-3 py-1 text-xs font-semibold transition-shadow"
+                @click=${() => this.emit('voip-queue-pickup', { id: call.id })}
+              >
+                Pick up
+              </button>
+            </div>
+          `)}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Array })
+], SippetAIVoipWidgetQueueTab.prototype, "queuedCalls", void 0);
+if (!customElements.get('sippetai-voip-widget-queue-tab')) {
+    customElements.define('sippetai-voip-widget-queue-tab', SippetAIVoipWidgetQueueTab);
+}

package/dist/components/voip-widget/voip-widget-settings-tab.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+import type { MediaDeviceOption, SipStatus } from './voip-widget.types.js';
+declare const TwLitElement: typeof LitElement;
+export declare class SippetAIVoipWidgetSettingsTab extends TwLitElement {
+    userEmail: string;
+    audioInputs: MediaDeviceOption[];
+    audioOutputs: MediaDeviceOption[];
+    selectedMicId: string;
+    selectedSpeakerId: string;
+    hasMediaPermission: boolean;
+    sipStatus: SipStatus;
+    updated(): void;
+    private emit;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sippetai-voip-widget-settings-tab': SippetAIVoipWidgetSettingsTab;
+    }
+}
+export {};

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

@@ -0,0 +1,135 @@
+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;
+};
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { createIcons, Mic, Speaker } from 'lucide';
+import { TW } from '../../lib/tailwindMixin.js';
+const TwLitElement = TW(LitElement);
+export class SippetAIVoipWidgetSettingsTab extends TwLitElement {
+    constructor() {
+        super(...arguments);
+        this.userEmail = '';
+        this.audioInputs = [];
+        this.audioOutputs = [];
+        this.selectedMicId = '';
+        this.selectedSpeakerId = '';
+        this.hasMediaPermission = false;
+        this.sipStatus = 'idle';
+    }
+    updated() {
+        createIcons({ icons: { Mic, Speaker }, root: this.renderRoot });
+    }
+    emit(name, detail) {
+        this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+    }
+    render() {
+        return html `
+      <div class="grid gap-3">
+        <div
+          class="rounded-2xl border border-slate-200 bg-white px-3 py-2 flex items-center gap-2"
+        >
+          <div
+            class="text-[10px] font-semibold uppercase tracking-wide text-slate-900"
+          >
+            SIP
+          </div>
+          <div
+            class="flex items-center gap-2 text-xs font-semibold text-slate-900"
+          >
+            <span
+              class=${`rounded-full px-2 py-0.5 text-[10px] font-semibold ${this.sipStatus === 'connected'
+            ? 'bg-emerald-100 text-emerald-700'
+            : this.sipStatus === 'error'
+                ? 'bg-red-100 text-red-700'
+                : 'bg-slate-200 text-slate-900'}`}
+            >
+              ${this.sipStatus}
+            </span>
+          </div>
+        </div>
+        <label class="grid gap-1 text-xs text-slate-900">
+          <span class="font-semibold text-slate-900">Email</span>
+          <input
+            class="w-full rounded-2xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900"
+            type="email"
+            .value=${this.userEmail}
+            @input=${(event) => this.emit('voip-email-change', {
+            value: event.target.value,
+        })}
+          />
+        </label>
+
+        ${this.hasMediaPermission
+            ? html ``
+            : html `
+              <button
+                class="rounded-2xl border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-900"
+                @click=${() => this.emit('voip-request-permission')}
+              >
+                Enable device labels
+              </button>
+            `}
+
+        <label class="grid gap-1 text-xs text-slate-900">
+          <span class="flex items-center gap-2 font-semibold text-slate-900">
+            <i data-lucide="mic" class="h-4 w-4"></i>
+            Microphone
+          </span>
+          <select
+            class="w-full rounded-2xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900"
+            .value=${this.selectedMicId}
+            @change=${(event) => this.emit('voip-mic-change', {
+            value: event.target.value,
+        })}
+          >
+            ${this.audioInputs.map(device => html `<option value=${device.id}>${device.label}</option>`)}
+          </select>
+        </label>
+
+        <label class="grid gap-1 text-xs text-slate-900">
+          <span class="flex items-center gap-2 font-semibold text-slate-900">
+            <i data-lucide="speaker" class="h-4 w-4"></i>
+            Speaker
+          </span>
+          <select
+            class="w-full rounded-2xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900"
+            .value=${this.selectedSpeakerId}
+            @change=${(event) => this.emit('voip-speaker-change', {
+            value: event.target.value,
+        })}
+          >
+            ${this.audioOutputs.map(device => html `<option value=${device.id}>${device.label}</option>`)}
+          </select>
+        </label>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], SippetAIVoipWidgetSettingsTab.prototype, "userEmail", void 0);
+__decorate([
+    property({ type: Array })
+], SippetAIVoipWidgetSettingsTab.prototype, "audioInputs", void 0);
+__decorate([
+    property({ type: Array })
+], SippetAIVoipWidgetSettingsTab.prototype, "audioOutputs", void 0);
+__decorate([
+    property({ type: String })
+], SippetAIVoipWidgetSettingsTab.prototype, "selectedMicId", void 0);
+__decorate([
+    property({ type: String })
+], SippetAIVoipWidgetSettingsTab.prototype, "selectedSpeakerId", void 0);
+__decorate([
+    property({ type: Boolean })
+], SippetAIVoipWidgetSettingsTab.prototype, "hasMediaPermission", void 0);
+__decorate([
+    property({ type: String })
+], SippetAIVoipWidgetSettingsTab.prototype, "sipStatus", void 0);
+if (!customElements.get('sippetai-voip-widget-settings-tab')) {
+    customElements.define('sippetai-voip-widget-settings-tab', SippetAIVoipWidgetSettingsTab);
+}

package/dist/components/voip-widget/voip-widget.d.ts

@@ -0,0 +1,142 @@
+import { LitElement } from 'lit';
+import type { Contact, HistoryEntry, QueuedCall, VoipTab } from './voip-widget.types.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';
+declare const TwLitElement: typeof LitElement;
+/**
+ * A VoIP widget web component allowing real-time telephony for Sippet AI integrations
+ *
+ * @tag sippetai-voip-widget
+ * @since 0.0.1
+ * @status experimental
+ *
+ **/
+export declare class SippetAIVoipWidget extends TwLitElement {
+    apiKey: string;
+    sessionAuth: boolean;
+    apiOrigin: string;
+    sipUrl: string;
+    sipUser: string;
+    sipUserId: string;
+    sipPassword: string;
+    sipWebSocketUrl: string;
+    userName: string;
+    userEmail: string;
+    availability: string;
+    queueCount: number;
+    incomingCall: boolean;
+    incomingCallerName: string;
+    incomingFromQueue: boolean;
+    contacts: Contact[];
+    history: HistoryEntry[];
+    queuedCalls: QueuedCall[];
+    open: boolean;
+    activeTab: VoipTab;
+    private dialNumber;
+    private callState;
+    private sipStatus;
+    private callSeconds;
+    private isMuted;
+    private isHeld;
+    private dragOffsetX;
+    private dragOffsetY;
+    private dragX;
+    private dragY;
+    private audioInputs;
+    private audioOutputs;
+    private selectedMicId;
+    private selectedSpeakerId;
+    private hasMediaPermission;
+    private widgetLocked;
+    private remoteAudio?;
+    private simpleUser?;
+    private sipConfigKey;
+    private callTimer?;
+    private permissionStream?;
+    private queueSocket?;
+    private queueChannel?;
+    private queueChannelUpdateRef?;
+    private queueChannelDeleteRef?;
+    private sessionSipCredentialsIssued;
+    private sipCredentialExpiresAt?;
+    private sipCredentialRefreshTimer?;
+    private sipCredentialPromise?;
+    private widgetLockHeartbeat?;
+    private widgetLockPoller?;
+    private widgetTabId;
+    private get sipServer();
+    private ensureTabId;
+    private readWidgetLock;
+    private writeWidgetLock;
+    private releaseWidgetLock;
+    private startWidgetLockHeartbeat;
+    private stopWidgetLockHeartbeat;
+    private setWidgetLocked;
+    private syncWidgetLock;
+    private initWidgetLock;
+    private teardownWidgetLock;
+    private handleWidgetStorage;
+    private handleVisibilityChange;
+    private handlePageHide;
+    private configureSdkEndpoints;
+    private getRpcConfig;
+    private clearSipCredentialRefresh;
+    private scheduleSipCredentialRefresh;
+    private parseSipExpiry;
+    private isSipCredentialExpiringSoon;
+    private refreshSessionSipCredentials;
+    openPanel(tab?: VoipTab): void;
+    callNumber(phoneNumber: string): Promise<void>;
+    answerCall(): Promise<void>;
+    declineCall(): Promise<void>;
+    toggleHold(): Promise<void>;
+    transferTo(queue: string): void;
+    private refreshDevices;
+    private requestMediaPermission;
+    private applySpeakerSelection;
+    private setupSip;
+    private teardownSip;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private handleDeviceChange;
+    private handleToggleOpen;
+    private handleSelectTab;
+    private handleShowSettings;
+    private handleStartDrag;
+    private handleDrag;
+    private handleEndDrag;
+    private resolveDialTarget;
+    private handleCall;
+    private handleHangup;
+    private handleAccept;
+    private handleHold;
+    private handleDecline;
+    private handleMuteToggle;
+    private handleTransfer;
+    private emitCallState;
+    private setCallState;
+    private startCallTimer;
+    private stopCallTimer;
+    private stopPermissionStream;
+    private loadContacts;
+    private resolveHistoryName;
+    private formatHistoryTime;
+    private loadHistory;
+    private initQueueChannel;
+    private teardownQueueChannel;
+    private resetQueueChannel;
+    private handleQueueEntryEvent;
+    private formatQueueWaitTime;
+    private loadQueueEntries;
+    private acceptQueueEntry;
+    private resolveSipUserId;
+    private updateOperatorStatus;
+    render(): import("lit").TemplateResult<1>;
+}
+export default SippetAIVoipWidget;