@sippet-ai/operator-widget 0.0.12 → 0.0.13

package/README.md

@@ -121,16 +121,15 @@ Known event names:
 - Speaker selection uses `setSinkId` when supported by the browser; some browsers require a user gesture.
 - Queue entries are refreshed on realtime socket events and when the queue tab is opened (no polling loop).
 
-## Using `@sippet-ai/sdk-js` directly
+## Using `@sippet-ai/sdk-js/client` directly
 
 If you need RPC calls outside the widget, use the SDK client directly:
 
 ```ts
-import { createClient } from '@sippet-ai/sdk-js';
+import { listCalls } from '@sippet-ai/sdk-js/client';
 
-const client = createClient({ apiKey: 'YOUR_PUBLISHABLE_API_KEY' });
-
-const calls = await client.listCalls({
+const calls = await listCalls({
+  headers: { 'x-api-key': 'YOUR_PUBLISHABLE_API_KEY' },
   fields: ['id', 'callUuid', 'status'],
 });
 ```

package/custom-elements.json

@@ -614,6 +614,28 @@
               "default": "false",
               "attribute": "isMuted"
             },
+            {
+              "kind": "method",
+              "name": "participantRoleLabel",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "role",
+                  "type": {
+                    "text": "ActiveCallParticipant['role']"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "participants",
+              "type": {
+                "text": "ActiveCallParticipant[]"
+              },
+              "default": "[]",
+              "attribute": "participants"
+            },
             {
               "kind": "method",
               "name": "playDtmfTone",
@@ -697,6 +719,15 @@
               "fieldName": "isMuted",
               "propName": "ismuted"
             },
+            {
+              "name": "participants",
+              "type": {
+                "text": "ActiveCallParticipant[]"
+              },
+              "default": "[]",
+              "fieldName": "participants",
+              "propName": "participants"
+            },
             {
               "name": "sipStatus",
               "type": {
@@ -1033,8 +1064,7 @@
       "declarations": [
         {
           "kind": "variable",
-          "name": "aor",
-          "default": "`sip:${this.sipUser}@${this.sipUrl}`"
+          "name": "memberUuid"
         },
         {
           "kind": "class",
@@ -1054,6 +1084,15 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "activeCallUuid",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
             {
               "kind": "field",
               "name": "activeTab",
@@ -1092,6 +1131,11 @@
               "default": "''",
               "attribute": "api-origin"
             },
+            {
+              "kind": "field",
+              "name": "applySipSessionState",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "applySpeakerSelection",
@@ -1140,6 +1184,15 @@
                 "text": "callNumber(phoneNumber: string) => void"
               }
             },
+            {
+              "kind": "field",
+              "name": "callParticipants",
+              "type": {
+                "text": "RealtimeParticipantRow[]"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
             {
               "kind": "field",
               "name": "callSeconds",
@@ -1285,6 +1338,21 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "generateCallUuid",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getActiveParticipantCards",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ActiveCallParticipant[]"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "getRpcConfig",
@@ -1356,6 +1424,16 @@
               "name": "handlePageHide",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "handleParticipantJoinedEvent",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleParticipantLeftEvent",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "handleQueueEntryEvent",
@@ -1490,6 +1568,19 @@
               "name": "isSipCredentialExpiringSoon",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "loadActiveCallParticipants",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "callUuid",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "loadContacts",
@@ -1532,6 +1623,24 @@
                 "text": "openPanel(tab: VoipTab = 'phone') => void"
               }
             },
+            {
+              "kind": "method",
+              "name": "parseParticipantPayload",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "RealtimeParticipantPayload | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "rawPayload",
+                  "type": {
+                    "text": "unknown"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "parseSipExpiry",
@@ -1545,6 +1654,45 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "payloadCallId",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "payload",
+                  "type": {
+                    "text": "RealtimeParticipantPayload"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "payloadCallUuid",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "payload",
+                  "type": {
+                    "text": "RealtimeParticipantPayload"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "payloadMemberUuid",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "payload",
+                  "type": {
+                    "text": "RealtimeParticipantPayload"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "permissionStream",
@@ -1595,6 +1743,22 @@
               "default": "[]",
               "attribute": "queuedCalls"
             },
+            {
+              "kind": "field",
+              "name": "queueParticipantJoinedRef",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "queueParticipantLeftRef",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "queueSocket",
@@ -1637,6 +1801,19 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "removeParticipantFromPayload",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "payload",
+                  "type": {
+                    "text": "RealtimeParticipantPayload"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "requestMediaPermission",
@@ -1670,6 +1847,19 @@
               "name": "resolveSipUserId",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "roleLabel",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "role",
+                  "type": {
+                    "text": "CallParticipantRole"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "scheduleSipCredentialRefresh",
@@ -1751,23 +1941,6 @@
                 }
               ]
             },
-            {
-              "kind": "field",
-              "name": "simpleUser",
-              "type": {
-                "text": "Web.SimpleUser | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "sipConfigKey",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "''"
-            },
             {
               "kind": "field",
               "name": "sipCredentialExpiresAt",
@@ -1801,12 +1974,29 @@
               "default": "'supersecurepass'",
               "attribute": "sipPassword"
             },
+            {
+              "kind": "field",
+              "name": "sipPhase",
+              "type": {
+                "text": "SipSessionState['phase']"
+              },
+              "privacy": "private",
+              "default": "'idle'"
+            },
             {
               "kind": "field",
               "name": "sipServer",
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "sipSessionUnsubscribe",
+              "type": {
+                "text": "() => void | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "sipStatus",
@@ -1880,6 +2070,19 @@
               "name": "stopWidgetLockHeartbeat",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "syncActiveCall",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "roomId",
+                  "type": {
+                    "text": "string | null"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "syncWidgetLock",
@@ -1937,6 +2140,19 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "upsertParticipantFromPayload",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "payload",
+                  "type": {
+                    "text": "RealtimeParticipantPayload"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "userEmail",

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import type { CallState, SipStatus } from './voip-widget.types.js';
+import type { ActiveCallParticipant, CallState, SipStatus } from './voip-widget.types.js';
 declare const TwLitElement: typeof LitElement;
 export declare class SippetAIVoipWidgetPhoneTab extends TwLitElement {
     dialNumber: string;
@@ -8,8 +8,10 @@ export declare class SippetAIVoipWidgetPhoneTab extends TwLitElement {
     callSeconds: number;
     isMuted: boolean;
     isHeld: boolean;
+    participants: ActiveCallParticipant[];
     updated(): void;
     private emit;
+    private participantRoleLabel;
     private playDtmfTone;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -18,6 +18,7 @@ export class SippetAIVoipWidgetPhoneTab extends TwLitElement {
         this.callSeconds = 0;
         this.isMuted = false;
         this.isHeld = false;
+        this.participants = [];
     }
     updated() {
         createIcons({ icons: { PhoneCall, PhoneOff, Mic, MicOff, Repeat, Pause }, root: this.renderRoot });
@@ -25,6 +26,13 @@ export class SippetAIVoipWidgetPhoneTab extends TwLitElement {
     emit(name, detail) {
         this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
     }
+    participantRoleLabel(role) {
+        if (role === 'ai')
+            return 'AI Agent';
+        if (role === 'operator')
+            return 'Operator';
+        return 'Caller';
+    }
     playDtmfTone(digit) {
         const frequencies = {
             '1': [697, 1209],
@@ -68,14 +76,16 @@ export class SippetAIVoipWidgetPhoneTab extends TwLitElement {
         }, 140);
     }
     render() {
-        const isActive = this.callState === 'active' || this.callState === 'held';
-        const isOutgoing = this.callState === 'outgoing';
+        const isActive = this.callState === 'active' ||
+            this.callState === 'held' ||
+            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');
+        const participantCards = this.participants;
         return html `
       ${isActive
             ? html `
@@ -84,6 +94,47 @@ export class SippetAIVoipWidgetPhoneTab extends TwLitElement {
                 Active call
               </div>
               <div class="text-lg font-semibold text-slate-900">${minutes}:${seconds}</div>
+              <div class="mt-3 rounded-xl border border-slate-200 bg-slate-50 p-2">
+                <div class="flex items-center justify-between text-[10px] font-semibold uppercase tracking-wide text-slate-700">
+                  <span>Participants</span>
+                  <span>${participantCards.length}</span>
+                </div>
+                ${participantCards.length === 0
+                ? html `
+                      <div class="mt-2 rounded-lg border border-dashed border-slate-300 px-2 py-3 text-center text-xs text-slate-500">
+                        No participants yet.
+                      </div>
+                    `
+                : html `
+                      <div class="mt-2 grid grid-cols-2 gap-2">
+                        ${participantCards.map(participant => html `
+                            <div
+                              class=${`rounded-lg border bg-white px-2 py-2 ${participant.isLocal
+                    ? 'border-emerald-300 bg-emerald-50'
+                    : 'border-slate-200'}`}
+                            >
+                              <div
+                                class="flex items-center justify-between text-[10px] uppercase tracking-wide text-slate-600"
+                              >
+                                <span>${this.participantRoleLabel(participant.role)}</span>
+                                <span
+                                  class=${`rounded-full px-1.5 py-0.5 text-[9px] font-semibold ${participant.status === 'joining'
+                    ? 'bg-amber-100 text-amber-700'
+                    : 'bg-emerald-100 text-emerald-700'}`}
+                                >
+                                  ${participant.status === 'joining'
+                    ? 'Joining'
+                    : 'Live'}
+                                </span>
+                              </div>
+                              <div class="mt-1 truncate text-xs font-semibold text-slate-900">
+                                ${participant.name}
+                              </div>
+                            </div>
+                          `)}
+                      </div>
+                    `}
+              </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"
@@ -141,25 +192,13 @@ export class SippetAIVoipWidgetPhoneTab extends TwLitElement {
           `)}
       </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>
-                `}
+            <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>
           `}
     `;
     }
@@ -182,6 +221,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], SippetAIVoipWidgetPhoneTab.prototype, "isHeld", void 0);
+__decorate([
+    property({ type: Array })
+], SippetAIVoipWidgetPhoneTab.prototype, "participants", 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.d.ts

@@ -43,6 +43,7 @@ export declare class SippetAIVoipWidget extends TwLitElement {
     private callSeconds;
     private isMuted;
     private isHeld;
+    private sipPhase;
     private dragOffsetX;
     private dragOffsetY;
     private dragX;
@@ -53,15 +54,18 @@ export declare class SippetAIVoipWidget extends TwLitElement {
     private selectedSpeakerId;
     private hasMediaPermission;
     private widgetLocked;
+    private activeCallUuid;
+    private callParticipants;
     private remoteAudio?;
-    private simpleUser?;
-    private sipConfigKey;
+    private sipSessionUnsubscribe?;
     private callTimer?;
     private permissionStream?;
     private queueSocket?;
     private queueChannel?;
     private queueChannelUpdateRef?;
     private queueChannelDeleteRef?;
+    private queueParticipantJoinedRef?;
+    private queueParticipantLeftRef?;
     private sessionSipCredentialsIssued;
     private sipCredentialExpiresAt?;
     private sipCredentialRefreshTimer?;
@@ -83,6 +87,8 @@ export declare class SippetAIVoipWidget extends TwLitElement {
     private handleWidgetStorage;
     private handleVisibilityChange;
     private handlePageHide;
+    private applySipSessionState;
+    private syncActiveCall;
     private configureSdkEndpoints;
     private getRpcConfig;
     private clearSipCredentialRefresh;
@@ -112,6 +118,7 @@ export declare class SippetAIVoipWidget extends TwLitElement {
     private handleDrag;
     private handleEndDrag;
     private resolveDialTarget;
+    private generateCallUuid;
     private handleCall;
     private handleHangup;
     private handleAccept;
@@ -121,6 +128,17 @@ export declare class SippetAIVoipWidget extends TwLitElement {
     private handleTransfer;
     private emitCallState;
     private setCallState;
+    private roleLabel;
+    private getActiveParticipantCards;
+    private parseParticipantPayload;
+    private payloadCallUuid;
+    private payloadCallId;
+    private payloadMemberUuid;
+    private upsertParticipantFromPayload;
+    private removeParticipantFromPayload;
+    private handleParticipantJoinedEvent;
+    private handleParticipantLeftEvent;
+    private loadActiveCallParticipants;
     private startCallTimer;
     private stopCallTimer;
     private stopPermissionStream;