@sippet-ai/operator-widget 0.0.12

package/LICENSE

@@ -0,0 +1,2 @@
+COPYRIGHT (c) 2026 SIPPET TECHNOLOGIES VCC
+ALL RIGHTS RESERVED

package/README.md

@@ -0,0 +1,136 @@
+# Sippet AI Operator Widget
+
+A web component (with React wrappers) for embedding Sippet AI telephony controls in any app.
+It provides a floating softphone UI, SIP/WebRTC call controls, queue handling, and light helpers
+built on `@sippet-ai/sdk-js`.
+
+## What it does
+
+- Renders a floating VoIP widget with phone, queue, contacts, history, and settings tabs.
+- Connects to SIP and WebRTC (mic/speaker selection and permissions).
+- Listens to queue entries and call history.
+- Exposes a small JS API (`sippet`) to trigger calls and query queues/history.
+
+## Install
+
+```bash
+npm install @sippet-ai/operator-widget
+```
+
+`@sippet-ai/sdk-js` is a dependency of the widget, so it will be installed automatically.
+
+## Quick start (Web Component)
+
+```html
+<script type="module">
+  import '@sippet-ai/operator-widget';
+</script>
+
+<sippetai-voip-widget
+  api-key="YOUR_PUBLISHABLE_API_KEY"
+  sip-url="sip.sippet.ai"
+  sip-user="1001"
+  sip-password="1234"
+  sip-web-socket-url="wss://sip.sippet.ai:7443"
+  user-name="Agent"
+  user-email="agent@example.com"
+></sippetai-voip-widget>
+```
+
+The widget renders a launcher button at the bottom-right of the page. Clicking it opens the panel.
+
+## React usage
+
+```tsx
+import { SippetAIVoipWidget } from '@sippet-ai/operator-widget/react';
+
+export function SupportWidget() {
+  return (
+    <SippetAIVoipWidget
+      apiKey="YOUR_PUBLISHABLE_API_KEY"
+      sipUrl="sip.sippet.ai"
+      sipUser="1001"
+      sipPassword="1234"
+      sipWebSocketUrl="wss://sip.sippet.ai:7443"
+      userName="Agent"
+      userEmail="agent@example.com"
+    />
+  );
+}
+```
+
+## Configuration
+
+- `api-key` (attribute) / `apiKey` (property). Required for contacts, history, queue polling, and realtime events.
+- `api-origin` (attribute) / `apiOrigin` (property). Optional override for a self-hosted or local API origin.
+- `sip-url`, `sip-user`, `sip-password`, `sip-web-socket-url`. Required for SIP calling.
+- `user-name`, `user-email`. Displayed in the widget.
+
+## Methods & events
+
+Methods are available on the DOM element instance via the `sippet` helper.
+
+```ts
+import { sippet } from '@sippet-ai/operator-widget';
+
+sippet.setApiKey('YOUR_PUBLISHABLE_API_KEY');
+sippet.setApiOrigin('https://api.sippet.ai');
+
+await sippet.call('+15551234567');
+await sippet.answer();
+await sippet.decline();
+await sippet.hold();
+
+const queue = await sippet.getQueue();
+const activeCalls = await sippet.getActiveCalls();
+const callDetails = await sippet.callDetails('CALL_UUID');
+```
+
+If the widget element already has `api-key`, you can omit `sippet.setApiKey`.
+
+## Realtime events
+
+```ts
+import { initSocket, joinEventsChannel } from '@sippet-ai/operator-widget';
+
+initSocket({ publishableKey: 'YOUR_PUBLISHABLE_API_KEY' });
+
+const channel = joinEventsChannel();
+
+channel.on('incoming_call', payload => {
+  console.log('incoming_call', payload);
+});
+```
+
+Known event names:
+
+- `incoming_call`
+- `call_answered`
+- `call_ended`
+- `operator_status_change`
+- `call_queue_entry_updated`
+- `call_queue_entry_deleted`
+- `call_participant_joined`
+- `call_participant_left`
+- `call_transcript_delta`
+- `call_transcript_completed`
+
+## Permissions and runtime behavior
+
+- Microphone access is required for calling; the widget prompts for audio permissions when opened.
+- 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
+
+If you need RPC calls outside the widget, use the SDK client directly:
+
+```ts
+import { createClient } from '@sippet-ai/sdk-js';
+
+const client = createClient({ apiKey: 'YOUR_PUBLISHABLE_API_KEY' });
+
+const calls = await client.listCalls({
+  fields: ['id', 'callUuid', 'status'],
+});
+```

package/cdn/loader.js

@@ -0,0 +1,146 @@
+
+let observer;
+let components = {
+  "sippetai-voip-widget-launcher": {
+    "importPath": "../dist/components/voip-widget/voip-widget-launcher.js",
+    "dependencies": []
+  },
+  "sippetai-voip-widget-panel": {
+    "importPath": "../dist/components/voip-widget/voip-widget-panel.js",
+    "dependencies": []
+  },
+  "sippetai-voip-widget-phone-tab": {
+    "importPath": "../dist/components/voip-widget/voip-widget-phone-tab.js",
+    "dependencies": []
+  },
+  "sippetai-voip-widget-queue-tab": {
+    "importPath": "../dist/components/voip-widget/voip-widget-queue-tab.js",
+    "dependencies": []
+  },
+  "sippetai-voip-widget-contacts-tab": {
+    "importPath": "../dist/components/voip-widget/voip-widget-contacts-tab.js",
+    "dependencies": []
+  },
+  "sippetai-voip-widget-history-tab": {
+    "importPath": "../dist/components/voip-widget/voip-widget-history-tab.js",
+    "dependencies": []
+  },
+  "sippetai-voip-widget-settings-tab": {
+    "importPath": "../dist/components/voip-widget/voip-widget-settings-tab.js",
+    "dependencies": []
+  },
+  "sippetai-voip-widget": {
+    "importPath": "../dist/components/voip-widget/voip-widget.js",
+    "dependencies": []
+  }
+};
+const eagerLoad = [];
+
+/** Update the lazy-loader configuration at runtime */
+export async function updateConfig(config) {
+  if (config.components) {
+    components = { ...components, ...config.components };
+  }
+
+  if(config.prefix || config.suffix) {
+    components = getScopedComponents(config.prefix, config.suffix);
+  }
+
+  if (config.rootElement) {
+    if (observer) {
+      observer.disconnect();
+    }
+    start(config.rootElement);
+  }
+
+  if (config.eagerLoad) {
+    await Promise.allSettled(eagerLoad?.map((tagName) => register(tagName)));
+  }
+}
+
+function getScopedComponents(prefix = "", suffix = "") {
+  const scopedComponents = {};
+  for (const [key, value] of Object.entries(components)) {
+    const newKey = prefix + key + suffix;
+    scopedComponents[newKey] = value;
+  }
+
+  return scopedComponents;
+}
+
+/** Load any undefined custom elements and load the components in the list */
+async function load(root) {
+  const rootTagName = root instanceof Element ? root.tagName.toLowerCase() : "";
+  const tags = [...root.querySelectorAll(":not(:defined)")]?.map((el) =>
+    el.tagName.toLowerCase()
+  ) || [];
+  if (rootTagName.includes("-") && !customElements.get(rootTagName)) {
+    tags.push(rootTagName);
+  }
+  const tagsToRegister = [...new Set(tags)];
+  await Promise.allSettled(tagsToRegister?.map((tagName) => register(tagName)));
+}
+
+/** Register the component and any dependencies */
+function register(tagName) {
+  const component = components[tagName];
+
+  if (customElements.get(tagName)) {
+    
+    cleanUp(component, tagName);
+    return Promise.resolve();
+  }
+
+  if (!component) {
+    
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve, reject) => {
+    import(component.importPath)
+      .then(() => {
+        
+        cleanUp(component, tagName);
+        resolve();
+      })
+      .catch(() => {
+        console.error(`Unable to load <${tagName}> from ${component.importPath}`);
+        reject();
+      });
+  });
+}
+
+/** Remove the component from the list of components to load */
+function cleanUp(component, tagName) {
+  delete components[tagName];
+  component.dependencies?.forEach((dependency) => {
+    delete components[dependency];
+  });
+
+  if (!Object.keys(component).length) {
+    observer.disconnect();
+  }
+}
+
+/** Initialize the loader */
+async function start(root = document.body) {
+  
+  // Eager load any components that are not defined in the Custom Elements Manifest
+  await Promise.allSettled(eagerLoad?.map((tagName) => register(tagName)));
+
+  // Watch for any new elements that are added to the DOM
+  observer = new MutationObserver((mutations) => {
+    for (const { addedNodes } of mutations) {
+      for (const node of addedNodes) {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          load(node);
+        }
+      }
+    }
+  });
+  
+  load(root);
+  observer.observe(root, { subtree: true, childList: true });
+}
+
+start();