@twoimpulse/langbox-voice-widget 0.1.1 → 0.1.2-dev.0

package/dist/worklets/audio-worklet-processor.js

@@ -1,27 +1,27 @@
-class PCMProcessor extends AudioWorkletProcessor {
-  constructor() {
-    super();
-  }
-
-  process(inputs, outputs, parameters) {
-    const input = inputs[0];
-    if (input.length > 0) {
-      const float32Buffer = input[0];
-      const int16Buffer = this.convertFloat32ToInt16(float32Buffer);
-      this.port.postMessage(int16Buffer);
-    }
-    return true;
-  }
-
-  convertFloat32ToInt16(float32Array) {
-    const int16Array = new Int16Array(float32Array.length);
-    for (let i = 0; i < float32Array.length; i++) {
-      let val = Math.floor(float32Array[i] * 0x7fff);
-      val = Math.max(-0x8000, Math.min(0x7fff, val));
-      int16Array[i] = val;
-    }
-    return int16Array;
-  }
-}
-
-registerProcessor("audio-worklet-processor", PCMProcessor);
+class PCMProcessor extends AudioWorkletProcessor {
+  constructor() {
+    super();
+  }
+
+  process(inputs, outputs, parameters) {
+    const input = inputs[0];
+    if (input.length > 0) {
+      const float32Buffer = input[0];
+      const int16Buffer = this.convertFloat32ToInt16(float32Buffer);
+      this.port.postMessage(int16Buffer);
+    }
+    return true;
+  }
+
+  convertFloat32ToInt16(float32Array) {
+    const int16Array = new Int16Array(float32Array.length);
+    for (let i = 0; i < float32Array.length; i++) {
+      let val = Math.floor(float32Array[i] * 0x7fff);
+      val = Math.max(-0x8000, Math.min(0x7fff, val));
+      int16Array[i] = val;
+    }
+    return int16Array;
+  }
+}
+
+registerProcessor("audio-worklet-processor", PCMProcessor);

package/dist/worklets/playback-worklet.js

@@ -1,36 +1,36 @@
-class PlaybackWorklet extends AudioWorkletProcessor {
-  constructor() {
-    super();
-    this.port.onmessage = this.handleMessage.bind(this);
-    this.buffer = [];
-  }
-
-  handleMessage(event) {
-    if (event.data === null) {
-      this.buffer = [];
-      return;
-    }
-    this.buffer.push(...event.data);
-  }
-
-  process(inputs, outputs, parameters) {
-    const output = outputs[0];
-    const channel = output[0];
-
-    if (this.buffer.length > channel.length) {
-      const toProcess = this.buffer.splice(0, channel.length);
-      channel.set(toProcess.map((v) => v / 32768));
-    } else {
-      channel.set(this.buffer.map((v) => v / 32768));
-      this.buffer = [];
-    }
-
-    if (this.buffer.length === 0) {
-      this.port.postMessage({ empty: true });
-    }
-
-    return true;
-  }
-}
-
-registerProcessor("playback-worklet", PlaybackWorklet);
+class PlaybackWorklet extends AudioWorkletProcessor {
+  constructor() {
+    super();
+    this.port.onmessage = this.handleMessage.bind(this);
+    this.buffer = [];
+  }
+
+  handleMessage(event) {
+    if (event.data === null) {
+      this.buffer = [];
+      return;
+    }
+    this.buffer.push(...event.data);
+  }
+
+  process(inputs, outputs, parameters) {
+    const output = outputs[0];
+    const channel = output[0];
+
+    if (this.buffer.length > channel.length) {
+      const toProcess = this.buffer.splice(0, channel.length);
+      channel.set(toProcess.map((v) => v / 32768));
+    } else {
+      channel.set(this.buffer.map((v) => v / 32768));
+      this.buffer = [];
+    }
+
+    if (this.buffer.length === 0) {
+      this.port.postMessage({ empty: true });
+    }
+
+    return true;
+  }
+}
+
+registerProcessor("playback-worklet", PlaybackWorklet);

package/package.json

@@ -1,50 +1,50 @@
-{
-  "name": "@twoimpulse/langbox-voice-widget",
-  "version": "0.1.1",
-  "type": "module",
-  "description": "Embeddable voice agent widget for Langbox",
-  "main": "dist/langbox-widget.js",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc --noEmit && vite build",
-    "preview": "vite preview",
-    "lint": "eslint src/",
-    "lint:fix": "eslint src/ --fix",
-    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
-    "typecheck": "tsc --noEmit"
-  },
-  "keywords": [
-    "langbox",
-    "voice-agent",
-    "widget",
-    "embeddable",
-    "web-component"
-  ],
-  "author": "TwoImpulse",
-  "license": "MIT",
-  "devDependencies": {
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.49.0",
-    "@typescript-eslint/parser": "^8.49.0",
-    "@vitejs/plugin-react": "^4.4.1",
-    "eslint": "^9.39.1",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "prettier": "^3.5.3",
-    "sass": "^1.87.0",
-    "terser": "^5.44.1",
-    "typescript": "^5.9.3",
-    "vite": "^6.3.4",
-    "vite-plugin-css-injected-by-js": "^3.5.2"
-  },
-  "dependencies": {
-    "openai": "^4.77.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
-  }
-}
+{
+  "name": "@twoimpulse/langbox-voice-widget",
+  "version": "0.1.2-dev.0",
+  "type": "module",
+  "description": "Embeddable voice agent widget for Langbox",
+  "main": "dist/langbox-widget.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "langbox",
+    "voice-agent",
+    "widget",
+    "embeddable",
+    "web-component"
+  ],
+  "author": "TwoImpulse",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.49.0",
+    "@typescript-eslint/parser": "^8.49.0",
+    "@vitejs/plugin-react": "^4.4.1",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "prettier": "^3.5.3",
+    "sass": "^1.87.0",
+    "terser": "^5.44.1",
+    "typescript": "^5.9.3",
+    "vite": "^6.3.4",
+    "vite-plugin-css-injected-by-js": "^3.5.2"
+  },
+  "dependencies": {
+    "openai": "^4.77.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  }
+}

package/README.md

@@ -1,331 +0,0 @@
-# Langbox Voice Widget
-
-An embeddable voice agent widget that allows you to integrate Langbox AI voice agents into any website.
-
-## Technology Stack Decision
-
-### Why Vite + React instead of Angular?
-
-This widget intentionally uses **Vite + React** instead of Angular (which powers the main Langbox platform). Here's why:
-
-#### 1. Bundle Size
-
-| Framework | Minimum Bundle Size |
-|-----------|-------------------|
-| Angular   | ~130KB+ (gzipped) |
-| React     | ~45KB (gzipped)   |
-| This Widget | ~30KB (gzipped) |
-
-For an embeddable widget that will be loaded on third-party websites, every kilobyte matters. A smaller bundle means:
-- Faster initial load times
-- Lower bandwidth consumption
-- Better user experience, especially on slower connections
-
-#### 2. Loading Performance
-
-Angular requires bootstrapping an entire application framework, which adds significant overhead:
-- Zone.js for change detection
-- Dependency injection system
-- Module compilation
-
-React with a simple component tree loads almost instantly, making the widget feel more responsive.
-
-#### 3. Web Components Compatibility
-
-This widget uses the **Web Components** standard (Custom Elements) to ensure:
-- Framework-agnostic integration
-- Shadow DOM isolation (styles don't leak or conflict)
-- Works with any website regardless of their tech stack
-
-While Angular does support building Web Components via Angular Elements, the resulting bundle is significantly larger.
-
-#### 4. Third-Party Integration
-
-Websites that embed this widget may already be using:
-- React
-- Vue
-- Angular
-- Vanilla JavaScript
-- jQuery
-- Or any other framework
-
-A lightweight, self-contained widget avoids:
-- Version conflicts
-- Framework interference
-- CSS style pollution (thanks to Shadow DOM)
-
-#### 5. Development Speed
-
-Vite offers:
-- Instant hot module replacement (HMR)
-- Fast cold starts
-- Optimized production builds
-- Simple configuration
-
-This makes iteration and development significantly faster compared to the Angular CLI.
-
-## Usage
-
-### Embedding the Widget
-
-Add the following code to your HTML page:
-
-```html
-<langbox-agent agent-id="your-agent-id"></langbox-agent>
-<script src="https://langbox-widget.surge.sh/langbox-widget.js" async></script>
-```
-
-### Configuration Options
-
-| Attribute | Required | Description |
-|-----------|----------|-------------|
-| `agent-id` | Yes | The unique identifier of your Langbox voice agent |
-| `api-url` | No | Custom API URL (defaults to `https://api.langbox.ai`) |
-
-### Example
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <title>My Website</title>
-</head>
-<body>
-  <h1>Welcome to my website</h1>
-
-  <!-- Langbox Voice Widget -->
-  <langbox-agent agent-id="agent_abc123xyz"></langbox-agent>
-  <script src="https://langbox-widget.surge.sh/langbox-widget.js" async></script>
-</body>
-</html>
-```
-
-## Development
-
-### Prerequisites
-
-- Node.js 18+
-- npm or yarn
-
-### Setup
-
-```bash
-# Install dependencies
-npm install
-
-# Start development server
-npm run dev
-
-# Build for production
-npm run build
-```
-
-### Project Structure
-
-```
-langbox-widget/
-├── src/
-│   ├── index.jsx              # Web Component entry point
-│   ├── components/
-│   │   └── VoiceAgentWidget.jsx   # Main widget component
-│   └── styles/
-│       └── widget.scss        # Widget styles
-├── dist/                      # Production build output
-├── index.html                 # Development demo page
-├── vite.config.js            # Vite configuration
-└── package.json
-```
-
-## Deployment
-
-This section explains how to deploy the widget to a CDN so that customers can embed it on their websites using a simple script tag, similar to how ElevenLabs provides their widget.
-
-### Build for Production
-
-First, build the widget for production:
-
-```bash
-npm run build
-```
-
-This generates `dist/langbox-widget.js` - a single, minified JavaScript file containing the entire widget (including styles, which are injected via JS).
-
-### Publishing to CDN
-
-#### Option 1: NPM + unpkg (Recommended for Open Source)
-
-This is the simplest approach and how ElevenLabs distributes their widget.
-
-1. **Configure npm for publishing** (first time only):
-   ```bash
-   npm login
-   ```
-
-2. **Publish to npm**:
-   ```bash
-   # For first publication
-   npm publish --access public
-
-   # For updates
-   npm version patch  # or minor/major
-   npm publish
-   ```
-
-3. **Access via unpkg CDN**:
-   ```
-   https://unpkg.com/@langbox/voice-widget/dist/langbox-widget.js
-   ```
-
-   For a specific version:
-   ```
-   https://unpkg.com/@langbox/voice-widget@0.1.0/dist/langbox-widget.js
-   ```
-
-   For the latest version (with cache):
-   ```
-   https://unpkg.com/@langbox/voice-widget@latest/dist/langbox-widget.js
-   ```
-
-4. **Customers embed with**:
-   ```html
-   <langbox-agent agent-id="their-agent-id"></langbox-agent>
-   <script src="https://unpkg.com/@langbox/voice-widget" async></script>
-   ```
-
-#### Option 2: jsDelivr CDN
-
-jsDelivr automatically mirrors npm packages and provides better global CDN coverage:
-
-```
-https://cdn.jsdelivr.net/npm/@langbox/voice-widget/dist/langbox-widget.js
-```
-
-Benefits:
-- Automatic minification
-- Better caching
-- Multi-CDN infrastructure
-- China network support
-
-#### Option 3: Surge.sh (Current Setup)
-
-Surge.sh provides free static hosting with a simple CLI:
-
-1. **Install Surge CLI** (first time only):
-   ```bash
-   npm install -g surge
-   ```
-
-2. **Build and deploy**:
-   ```bash
-   npm run build
-   cd dist
-   surge . langbox-widget.surge.sh
-   ```
-
-3. **Customers embed with**:
-   ```html
-   <langbox-agent agent-id="their-agent-id"></langbox-agent>
-   <script src="https://langbox-widget.surge.sh/langbox-widget.js" async></script>
-   ```
-
-Benefits:
-- Free hosting
-- Simple CLI deployment
-- Automatic SSL
-- No configuration needed
-
-#### Option 4: Azure Blob Storage + CDN
-
-1. **Create storage account and container**:
-   ```bash
-   az storage account create --name langboxcdn --resource-group langbox
-   az storage container create --name widget --account-name langboxcdn --public-access blob
-   ```
-
-2. **Upload the widget**:
-   ```bash
-   az storage blob upload \
-     --account-name langboxcdn \
-     --container-name widget \
-     --name langbox-widget.js \
-     --file dist/langbox-widget.js \
-     --content-type "application/javascript"
-   ```
-
-3. **Enable Azure CDN** on the storage account.
-
-### Versioning Strategy
-
-For production use, we recommend:
-
-1. **Use semantic versioning**: `major.minor.patch`
-2. **Provide a "latest" endpoint** for customers who want auto-updates
-3. **Provide versioned endpoints** for customers who want stability
-
-Example URL structure:
-```
-https://cdn.langbox.ai/widget/v1/langbox-widget.js      # Latest v1.x.x
-https://cdn.langbox.ai/widget/v1.0.0/langbox-widget.js  # Specific version
-https://cdn.langbox.ai/widget/latest/langbox-widget.js  # Always latest
-```
-
-### CI/CD Pipeline
-
-Automate deployments with GitHub Actions:
-
-```yaml
-# .github/workflows/deploy.yml
-name: Deploy Widget
-
-on:
-  release:
-    types: [published]
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '18'
-          registry-url: 'https://registry.npmjs.org'
-
-      - run: npm ci
-      - run: npm run build
-
-      - run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-```
-
-### Testing the Deployment
-
-After deployment, test the widget on a sample HTML page:
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Widget Test</title>
-</head>
-<body>
-  <h1>Testing Langbox Widget</h1>
-
-  <langbox-agent agent-id="test-agent-id"></langbox-agent>
-  <script src="YOUR_CDN_URL/langbox-widget.js" async></script>
-
-  <script>
-    // Verify the custom element is registered
-    customElements.whenDefined('langbox-agent').then(() => {
-      console.log('Langbox widget loaded successfully!');
-    });
-  </script>
-</body>
-</html>
-```
-
-## License
-
-MIT