@sippet-ai/operator-widget 0.0.12

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export * from './voip-widget/index.js';

package/dist/components/index.js

@@ -0,0 +1 @@
+export * from './voip-widget/index.js';

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

@@ -0,0 +1,18 @@
+import { SippetAIVoipWidget } from './voip-widget.js';
+export type * from './voip-widget.js';
+declare global {
+    /**
+     * adds component custom elements to the global HTML element map
+     * no other changes need to be made here
+     */
+    interface HTMLElementTagNameMap {
+        'sippetai-voip-widget': SippetAIVoipWidget;
+    }
+    /**
+     * adds component custom events to the global JS event map
+     * add new custom events here
+     */
+    interface GlobalEventHandlersEventMap {
+        'custom-event': CustomEvent;
+    }
+}

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

@@ -0,0 +1,4 @@
+import { SippetAIVoipWidget } from './voip-widget.js';
+if (!customElements.get('sippetai-voip-widget')) {
+    customElements.define('sippetai-voip-widget', SippetAIVoipWidget);
+}

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

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

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

@@ -0,0 +1,45 @@
+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 SippetAIVoipWidgetContactsTab extends TwLitElement {
+    constructor() {
+        super(...arguments);
+        this.contacts = [];
+    }
+    emit(name, detail) {
+        this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+    }
+    render() {
+        return html `
+      <div class="flex flex-col gap-2">
+        ${this.contacts.map((contact) => 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">${contact.name}</div>
+                <div class="text-[11px] text-slate-900">${contact.number}</div>
+              </div>
+              <button
+                class="rounded-xl voip-primary px-3 py-1 text-xs font-semibold transition-shadow"
+                @click=${() => this.emit('voip-contact-call', { number: contact.number })}
+              >
+                Call
+              </button>
+            </div>
+          `)}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Array })
+], SippetAIVoipWidgetContactsTab.prototype, "contacts", void 0);
+if (!customElements.get('sippetai-voip-widget-contacts-tab')) {
+    customElements.define('sippetai-voip-widget-contacts-tab', SippetAIVoipWidgetContactsTab);
+}

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

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+import type { HistoryEntry } from './voip-widget.types.js';
+declare const TwLitElement: typeof LitElement;
+export declare class SippetAIVoipWidgetHistoryTab extends TwLitElement {
+    history: HistoryEntry[];
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sippetai-voip-widget-history-tab': SippetAIVoipWidgetHistoryTab;
+    }
+}
+export {};

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

@@ -0,0 +1,43 @@
+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 SippetAIVoipWidgetHistoryTab extends TwLitElement {
+    constructor() {
+        super(...arguments);
+        this.history = [];
+    }
+    render() {
+        const history = Array.isArray(this.history) ? this.history : [];
+        return html `
+      <div class="flex flex-col gap-2">
+        ${history.map((entry) => 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">${entry.name}</div>
+                <div class="text-[11px] text-slate-900">${entry.number}</div>
+              </div>
+              <div class="flex items-center gap-2 text-[10px] uppercase tracking-wide text-slate-900">
+                <span>${entry.time}</span>
+                <span class="rounded-full bg-slate-900 px-2 py-0.5 text-[9px] font-semibold text-white">
+                  ${entry.type}
+                </span>
+              </div>
+            </div>
+          `)}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Array })
+], SippetAIVoipWidgetHistoryTab.prototype, "history", void 0);
+if (!customElements.get('sippetai-voip-widget-history-tab')) {
+    customElements.define('sippetai-voip-widget-history-tab', SippetAIVoipWidgetHistoryTab);
+}

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

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+declare const TwLitElement: typeof LitElement;
+export declare class SippetAIVoipWidgetLauncher extends TwLitElement {
+    open: boolean;
+    queueCount: number;
+    incomingCall: boolean;
+    incomingFromQueue: boolean;
+    incomingCallerName: string;
+    updated(): void;
+    private emit;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sippetai-voip-widget-launcher': SippetAIVoipWidgetLauncher;
+    }
+}
+export {};

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

@@ -0,0 +1,100 @@
+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, Phone, PhoneCall, PhoneOff, Pause } from 'lucide';
+import { TW } from '../../lib/tailwindMixin.js';
+const TwLitElement = TW(LitElement);
+export class SippetAIVoipWidgetLauncher extends TwLitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.queueCount = 0;
+        this.incomingCall = false;
+        this.incomingFromQueue = false;
+        this.incomingCallerName = 'Colleague';
+    }
+    updated() {
+        createIcons({ icons: { Phone, PhoneCall, PhoneOff, Pause }, root: this.renderRoot });
+    }
+    emit(name, detail) {
+        this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+    }
+    render() {
+        const showBadge = !this.open && this.queueCount > 0;
+        const showClosedIncoming = !this.open && this.incomingCall && !this.incomingFromQueue;
+        return html `
+      <div class="relative flex flex-col items-end gap-3">
+        <button
+          class="relative grid h-14 w-14 place-items-center rounded-2xl voip-primary transition-shadow"
+          @click=${() => this.emit('voip-toggle')}
+        >
+          <i data-lucide="phone" class="h-5 w-5"></i>
+          ${showBadge
+            ? html `
+                <span
+                  class="absolute -right-1 -top-1 rounded-full border-2 border-slate-900 bg-red-600 px-1.5 text-[10px] font-semibold text-white"
+                >
+                  ${this.queueCount}
+                </span>
+              `
+            : null}
+        </button>
+
+        ${showClosedIncoming
+            ? html `
+              <div class="w-60 rounded-2xl border border-slate-200 bg-white p-3 shadow-xl">
+                <div class="text-sm font-semibold text-slate-900">Incoming call</div>
+                <div class="text-xs text-slate-900">${this.incomingCallerName}</div>
+                <div class="mt-2 flex flex-wrap gap-2">
+                  <button
+                    class="inline-flex items-center gap-1 rounded-xl bg-emerald-600 px-3 py-1 text-xs font-semibold text-white"
+                    @click=${() => this.emit('voip-accept')}
+                  >
+                    <i data-lucide="phone-call" class="h-3 w-3"></i>
+                    Accept
+                  </button>
+                  <button
+                    class="inline-flex items-center gap-1 rounded-xl bg-amber-400 px-3 py-1 text-xs font-semibold text-slate-900"
+                    @click=${() => this.emit('voip-hold')}
+                  >
+                    <i data-lucide="pause" class="h-3 w-3"></i>
+                    Hold
+                  </button>
+                  <button
+                    class="inline-flex items-center gap-1 rounded-xl bg-red-600 px-3 py-1 text-xs font-semibold text-white"
+                    @click=${() => this.emit('voip-decline')}
+                  >
+                    <i data-lucide="phone-off" class="h-3 w-3"></i>
+                    Decline
+                  </button>
+                </div>
+              </div>
+            `
+            : null}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], SippetAIVoipWidgetLauncher.prototype, "open", void 0);
+__decorate([
+    property({ type: Number })
+], SippetAIVoipWidgetLauncher.prototype, "queueCount", void 0);
+__decorate([
+    property({ type: Boolean })
+], SippetAIVoipWidgetLauncher.prototype, "incomingCall", void 0);
+__decorate([
+    property({ type: Boolean })
+], SippetAIVoipWidgetLauncher.prototype, "incomingFromQueue", void 0);
+__decorate([
+    property({ type: String })
+], SippetAIVoipWidgetLauncher.prototype, "incomingCallerName", void 0);
+if (!customElements.get('sippetai-voip-widget-launcher')) {
+    customElements.define('sippetai-voip-widget-launcher', SippetAIVoipWidgetLauncher);
+}

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+import type { VoipTab } from './voip-widget.types.js';
+declare const TwLitElement: typeof LitElement;
+export declare class SippetAIVoipWidgetPanel extends TwLitElement {
+    userName: string;
+    availability: string;
+    activeTab: VoipTab;
+    incomingCall: boolean;
+    incomingFromQueue: boolean;
+    incomingCallerName: string;
+    private showAvailability;
+    updated(): void;
+    private emit;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sippetai-voip-widget-panel': SippetAIVoipWidgetPanel;
+    }
+}
+export {};

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

@@ -0,0 +1,193 @@
+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, state } from 'lit/decorators.js';
+import { createIcons, Clock, ListOrdered, Phone, Settings, Users, X, } from 'lucide';
+import { TW } from '../../lib/tailwindMixin.js';
+const TwLitElement = TW(LitElement);
+export class SippetAIVoipWidgetPanel extends TwLitElement {
+    constructor() {
+        super(...arguments);
+        this.userName = 'Agent Parker';
+        this.availability = 'available';
+        this.activeTab = 'phone';
+        this.incomingCall = false;
+        this.incomingFromQueue = false;
+        this.incomingCallerName = 'Colleague';
+        this.showAvailability = false;
+    }
+    updated() {
+        createIcons({
+            icons: { Phone, ListOrdered, Users, Clock, Settings, X },
+            root: this.renderRoot,
+        });
+    }
+    emit(name, detail) {
+        this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+    }
+    render() {
+        const initials = this.userName
+            .split(' ')
+            .map(part => part[0])
+            .join('')
+            .slice(0, 2)
+            .toUpperCase();
+        const statusColor = this.availability === 'available'
+            ? 'bg-emerald-500'
+            : this.availability === 'on_break'
+                ? 'bg-amber-400'
+                : 'bg-red-500';
+        return html `
+      <div
+        class="flex h-[480px] w-80 flex-col overflow-hidden rounded-3xl bg-slate-50 shadow-2xl"
+      >
+        <div
+          class="flex cursor-grab items-center justify-between gap-3 bg-gradient-to-br from-amber-100 via-orange-50 to-sky-100 px-4 py-4"
+          @pointerdown=${(event) => this.emit('voip-drag-start', {
+            x: event.clientX,
+            y: event.clientY,
+            id: event.pointerId,
+        })}
+          @pointermove=${(event) => this.emit('voip-drag-move', {
+            x: event.clientX,
+            y: event.clientY,
+            buttons: event.buttons,
+        })}
+          @pointerup=${(event) => this.emit('voip-drag-end', { id: event.pointerId })}
+        >
+          <div class="relative flex items-center gap-3">
+            <button
+              class="relative grid h-11 w-11 place-items-center rounded-2xl bg-slate-900 text-xs font-semibold text-white"
+              @click=${() => {
+            this.showAvailability = !this.showAvailability;
+        }}
+              aria-label="Open profile menu"
+            >
+              ${initials || 'AG'}
+              <span
+                class=${`absolute -right-1 -top-1 h-4 w-4 rounded-full border-2 border-white shadow ${statusColor}`}
+              ></span>
+            </button>
+            <span class="text-sm font-semibold text-slate-900"
+              >${this.userName}</span
+            >
+            ${this.showAvailability
+            ? html `
+                  <div
+                    class="absolute left-0 top-12 z-10 w-44 rounded-2xl border border-slate-200 bg-white p-2 shadow-lg"
+                  >
+                    <div class="px-2 py-1 text-xs font-semibold text-slate-900">
+                      ${this.userName}
+                    </div>
+                    <div class="mt-1 grid gap-1">
+                      ${[
+                {
+                    label: 'Available',
+                    value: 'available',
+                    color: 'bg-emerald-500',
+                },
+                {
+                    label: 'On break',
+                    value: 'on_break',
+                    color: 'bg-amber-400',
+                },
+                {
+                    label: 'Logged out',
+                    value: 'logged_out',
+                    color: 'bg-red-500',
+                },
+            ].map(option => html `
+                          <button
+                            class=${`flex items-center justify-between rounded-lg px-2 py-1 text-xs ${this.availability === option.value
+                ? 'voip-primary text-white'
+                : 'text-slate-900 hover:bg-slate-100'}`}
+                            @click=${() => {
+                this.emit('voip-availability', {
+                    value: option.value,
+                });
+                this.showAvailability = false;
+            }}
+                          >
+                            <span>${option.label}</span>
+                            <span
+                              class=${`h-2 w-2 rounded-full ${option.color}`}
+                            ></span>
+                          </button>
+                        `)}
+                    </div>
+                  </div>
+                `
+            : null}
+        </div>
+        <div class="flex items-center gap-2">
+            <button
+              class="grid h-8 w-8 place-items-center rounded-lg bg-slate-200 text-slate-900"
+              @click=${() => this.emit('voip-settings')}
+            >
+              <i data-lucide="settings" class="h-4 w-4"></i>
+            </button>
+            <button
+              class="grid h-8 w-8 place-items-center rounded-lg bg-slate-200 text-slate-900"
+              @click=${() => this.emit('voip-close')}
+            >
+              <i data-lucide="x" class="h-4 w-4"></i>
+            </button>
+          </div>
+        </div>
+
+        <div
+          class="grid grid-cols-4 border-b border-slate-200 bg-white text-xs"
+        >
+          ${[
+            { tab: 'phone', label: 'Phone', icon: 'phone' },
+            { tab: 'queue', label: 'Queue', icon: 'list-ordered' },
+            { tab: 'contacts', label: 'Contacts', icon: 'users' },
+            { tab: 'history', label: 'History', icon: 'clock' },
+        ].map(({ tab, label, icon }) => html `
+              <button
+                class=${`flex flex-col items-center gap-1 px-2 py-2 text-[10px] font-semibold uppercase tracking-wide ${this.activeTab === tab
+            ? 'voip-primary text-white'
+            : 'text-slate-900'}`}
+                @click=${() => this.emit('voip-tab', { tab })}
+              >
+                <i data-lucide=${icon} class="h-4 w-4"></i>
+                ${label}
+              </button>
+            `)}
+        </div>
+
+        <div class="flex-1 overflow-y-auto bg-slate-50 px-4 py-4">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], SippetAIVoipWidgetPanel.prototype, "userName", void 0);
+__decorate([
+    property({ type: String })
+], SippetAIVoipWidgetPanel.prototype, "availability", void 0);
+__decorate([
+    property({ type: String })
+], SippetAIVoipWidgetPanel.prototype, "activeTab", void 0);
+__decorate([
+    property({ type: Boolean })
+], SippetAIVoipWidgetPanel.prototype, "incomingCall", void 0);
+__decorate([
+    property({ type: Boolean })
+], SippetAIVoipWidgetPanel.prototype, "incomingFromQueue", void 0);
+__decorate([
+    property({ type: String })
+], SippetAIVoipWidgetPanel.prototype, "incomingCallerName", void 0);
+__decorate([
+    state()
+], SippetAIVoipWidgetPanel.prototype, "showAvailability", void 0);
+if (!customElements.get('sippetai-voip-widget-panel')) {
+    customElements.define('sippetai-voip-widget-panel', SippetAIVoipWidgetPanel);
+}

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+import type { CallState, SipStatus } from './voip-widget.types.js';
+declare const TwLitElement: typeof LitElement;
+export declare class SippetAIVoipWidgetPhoneTab extends TwLitElement {
+    dialNumber: string;
+    sipStatus: SipStatus;
+    callState: CallState;
+    callSeconds: number;
+    isMuted: boolean;
+    isHeld: boolean;
+    updated(): void;
+    private emit;
+    private playDtmfTone;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sippetai-voip-widget-phone-tab': SippetAIVoipWidgetPhoneTab;
+    }
+}
+export {};