voxnix 1.0.0

package/README.md

@@ -0,0 +1,109 @@
+# Voxnix Plugin
+
+A self-contained Voice Widget Plugin running inside an iframe, built with React, Vite, and Tailwind CSS.
+
+## Overview
+
+This widget is designed to be embedded within a parent application (e.g., `wrapper-main`). All WebRTC logic (Yeastar, Flashphoner, Sip.js) runs inside the widget's memory. The parent application only needs to send configuration and credentials via `postMessage`.
+
+## Installation
+
+```bash
+npm install voxnix
+# or
+yarn add voxnix
+```
+
+## Usage
+
+### 1. Embedding the Widget
+
+Embed the widget using an iframe in your React parent application. The communication protocol uses `window.postMessage`.
+
+```jsx
+import React, { useEffect, useRef } from 'react';
+
+const ParentApp = () => {
+  const widgetRef = useRef(null);
+
+  useEffect(() => {
+    const handleMessage = (event) => {
+      // 1. Wait for widget_ready event
+      if (event.data?.type === 'widget_ready') {
+        // 2. Send configuration to initialize the widget
+        widgetRef.current.contentWindow.postMessage({
+          type: 'init_config',
+          payload: {
+             tenantName: "Infomedia",
+             platform: "sipjs", // Options: "yeastar", "flashphoner", "sipjs"
+             pabxConfig: {
+               auth: {
+                 username: "YOUR_USERNAME",
+                 password: "YOUR_PASSWORD",
+                 host: "YOUR_PABX_HOST"
+               }
+             }
+          }
+        }, '*'); // Replace '*' with target origin in production for security
+      }
+
+      // Handle call events from widget to parent
+      if (event.data?.type === 'sync_incoming_call') {
+        console.log('Incoming call notification');
+      }
+      if (event.data?.type === 'sync_call_answered') {
+        console.log('Call answered');
+      }
+      if (event.data?.type === 'sync_call_ended') {
+        console.log('Call ended');
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  return (
+    <iframe
+      src="http://localhost:5173" // Or your deployed widget URL
+      ref={widgetRef}
+      style={{ width: '400px', height: '600px', border: 'none', borderRadius: '8px' }}
+      allow="microphone; camera"
+    />
+  );
+};
+
+export default ParentApp;
+```
+
+## Supported Voice Platforms
+
+- **Sip.js**
+- **Yeastar**
+- **Flashphoner**
+
+## Message Events Protocol
+
+### Parent -> Widget
+- `init_config`: Sent from parent to widget. Contains credentials (`tenantName`, `platform`, `pabxConfig: { auth: { username, password, host } }`).
+
+### Widget -> Parent
+- `widget_ready`: Emitted when the React lifecycle of the widget is mounted, requesting `init_config` from the parent.
+- `sync_incoming_call`: Emitted to the parent when there is an incoming call (for desktop/native notifications).
+- `sync_call_answered`: Emitted when the call is answered.
+- `sync_call_ended`: Emitted when the call ends.
+
+## Development
+
+To start the widget locally:
+
+```bash
+yarn install
+yarn dev
+```
+
+To build for production:
+
+```bash
+yarn build
+```