@vanira/sdk-react-native 0.0.2

package/src/core/httpResponse.ts

@@ -0,0 +1,22 @@
+/**
+ * Parse fetch Response body as JSON with a clear error when the worker returns plain text.
+ */
+export async function readResponseJson<T extends Record<string, unknown> = Record<string, unknown>>(
+    response: Response,
+    context: string,
+): Promise<T> {
+    const text = await response.text();
+    const trimmed = text.trim();
+
+    if (!trimmed) {
+        throw new Error(`${context}: empty response body (HTTP ${response.status})`);
+    }
+
+    try {
+        return JSON.parse(trimmed) as T;
+    } catch {
+        throw new Error(
+            `${context}: expected JSON but got (HTTP ${response.status}): ${trimmed.slice(0, 240)}`,
+        );
+    }
+}

package/src/core/iceServers.ts

@@ -0,0 +1,18 @@
+/**
+ * Default STUN/TURN ICE servers for WebRTC peer connections.
+ * Shared with vanira-sdk/flutter-sdk (see _kDefaultIceServers in vanira_session.dart).
+ */
+export const DEFAULT_ICE_SERVERS: RTCIceServer[] = [
+    { urls: 'stun:stun.l.google.com:19302' },
+    { urls: 'stun:stun1.l.google.com:19302' },
+    { urls: 'stun:global.relay.metered.ca:80' }, // works on Jio (port 80)
+    {
+        urls: [
+            'turns:global.relay.metered.ca:443?transport=tcp',
+            'turn:global.relay.metered.ca:443?transport=tcp',
+            'turn:global.relay.metered.ca:80?transport=tcp',
+        ],
+        username: 'fa97658be3343d21da3b65e6',
+        credential: 'HXHDoqeHbvZrmCuf',
+    },
+];

package/src/core/toolCallNormalize.ts

@@ -0,0 +1,80 @@
+/**
+ * Normalize client_tool_call payloads from the worker.
+ * Server may nest under tool_call, send arguments as JSON string, or use clientFields.
+ */
+
+export {
+  TOOL_NAME_TO_PRESET_ID,
+  resolvePresetId,
+  isVaniraPresetId,
+} from '../presets/registry';
+import {resolvePresetId} from '../presets/registry';
+
+export function unwrapToolCallData(raw: unknown): Record<string, unknown> {
+    if (!raw || typeof raw !== 'object') {
+        return {};
+    }
+    let data = (raw as { data?: Record<string, unknown> }).data ?? (raw as Record<string, unknown>);
+    const nested = data.tool_call;
+    if (nested && typeof nested === 'object') {
+        data = nested as Record<string, unknown>;
+    }
+    return data;
+}
+
+export function parseToolArguments(rawArgs: unknown): Record<string, unknown> {
+    if (typeof rawArgs === 'string') {
+        try {
+            const parsed = JSON.parse(rawArgs) as unknown;
+            if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+                return parsed as Record<string, unknown>;
+            }
+        } catch {
+            return {};
+        }
+        return {};
+    }
+    if (rawArgs && typeof rawArgs === 'object' && !Array.isArray(rawArgs)) {
+        return rawArgs as Record<string, unknown>;
+    }
+    return {};
+}
+
+export function normalizeToolCallFields(raw: unknown): {
+    name: string;
+    arguments: Record<string, unknown>;
+    tool_call_id: string;
+    execution_mode: string;
+    client_fields: Record<string, unknown>;
+} {
+    const data = unwrapToolCallData(raw);
+    const args = parseToolArguments(data.arguments ?? data.args);
+    const clientFields = (data.client_fields ?? data.clientFields ?? {}) as Record<string, unknown>;
+    const name = String(
+        data.name ??
+            data.tool_name ??
+            data.ref_code ??
+            (data.function && typeof data.function === 'object'
+                ? String((data.function as Record<string, unknown>).name ?? '')
+                : ''),
+    );
+
+    const presetFromFields = clientFields.preset_id;
+    const resolvedPresetId = resolvePresetId(
+        clientFields as Record<string, unknown>,
+        args,
+        name,
+    );
+
+    const mergedClientFields = resolvedPresetId
+        ? { ...clientFields, preset_id: resolvedPresetId }
+        : clientFields;
+
+    return {
+        name,
+        arguments: args,
+        tool_call_id: String(data.tool_call_id ?? data.call_id ?? ''),
+        execution_mode: String(data.execution_mode ?? 'fire_and_forget'),
+        client_fields: mergedClientFields,
+    };
+}

package/src/core/voice-client.js

@@ -0,0 +1,236 @@
+/**
+ * WebRTC Client - Pure HTTP Signaling (No WebSocket)
+ * Embedded version for the widget
+ */
+export class VoiceClient {
+    constructor(config) {
+        if (!config.serverUrl) throw new Error("serverUrl is required");
+        if (!config.agentId) throw new Error("agentId is required");
+
+        this.serverUrl = config.serverUrl.replace(/\/$/, '');
+        this.agentId = config.agentId;
+        this.callId = config.callId || this.generateCallId();
+
+        // Callbacks
+        this.onConnected = config.onConnected || (() => { });
+        this.onDisconnected = config.onDisconnected || (() => { });
+        this.onError = config.onError || (e => console.error('[WebRTC]', e));
+        this.onTranscription = config.onTranscription || (() => { });
+
+        // State
+        this.pc = null;
+        this.dataChannel = null;
+        this.audioElement = null;
+        this.connected = false;
+    }
+
+    async connect() {
+        console.log('🔵 [WebRTC] Starting connection...');
+
+        try {
+            // 1. Create RTCPeerConnection
+            this.pc = new RTCPeerConnection({
+                iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
+            });
+
+            this.pc.addTransceiver('video', { direction: 'recvonly' });
+
+            // 2. Get microphone
+            let stream;
+            try {
+                stream = await navigator.mediaDevices.getUserMedia({
+                    audio: {
+                        echoCancellation: true,
+                        noiseSuppression: true,
+                        autoGainControl: true,
+                        sampleRate: { ideal: 16000 },
+                        channelCount: 1
+                    }
+                });
+            } catch (err) {
+                console.error('🎤 [WebRTC] Microphone access failed:', err);
+                if (
+                    err.name === 'NotAllowedError' || 
+                    err.name === 'PermissionDeniedError' || 
+                    err.message?.includes('Permission denied')
+                ) {
+                    const ua = navigator.userAgent;
+                    const isIOS = /iPad|iPhone|iPod/.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+                    let customMsg = "Microphone access denied. Please allow microphone access in your browser settings.";
+                    
+                    if (isIOS) {
+                        if (ua.includes('CriOS')) {
+                            customMsg = "Microphone access blocked. Please enable it in iOS Settings > Chrome > Microphone, then reload the page.";
+                        } else if (ua.includes('FxiOS')) {
+                            customMsg = "Microphone access blocked. Please enable it in iOS Settings > Firefox > Microphone, then reload the page.";
+                        } else {
+                            customMsg = "Microphone access blocked. Please enable it in iOS Settings > Safari > Microphone (or tap 'aA' > Website Settings > Allow Microphone).";
+                        }
+                    }
+                    const newErr = new Error(customMsg);
+                    newErr.name = err.name;
+                    throw newErr;
+                }
+                throw err;
+            }
+            console.log('🎤 [WebRTC] Microphone access granted');
+
+            // 3. Add audio track
+            stream.getTracks().forEach(track => {
+                this.pc.addTrack(track, stream);
+            });
+
+            // 4. Create DataChannel
+            this.dataChannel = this.pc.createDataChannel('control');
+            this.dataChannel.onopen = () => console.log('📡 [WebRTC] DataChannel opened');
+            this.dataChannel.onmessage = (e) => this.handleControlEvent(JSON.parse(e.data));
+            this.dataChannel.onerror = (e) => console.error('❌ [WebRTC] DataChannel error:', e);
+
+            // 5. Handle incoming tracks
+            this.pc.ontrack = (event) => {
+                const track = event.track;
+                const stream = event.streams[0];
+                console.log(`📥 [WebRTC] Received ${track.kind} track`);
+
+                if (track.kind === 'audio') {
+                    console.log('🔊 [WebRTC] Setting up audio playback');
+                    this.audioElement = new Audio();
+                    this.audioElement.srcObject = stream;
+                    this.audioElement.play().catch(e => console.warn('Audio autoplay blocked:', e));
+
+                    this.audioElement.onended = () => {
+                        this.sendEvent('playedStream');
+                    };
+                }
+            };
+
+            // 6. Connection state monitoring
+            this.pc.onconnectionstatechange = () => {
+                console.log('🔄 [WebRTC] State:', this.pc.connectionState);
+                if (this.pc.connectionState === 'connected') {
+                    this.connected = true;
+                    this.onConnected();
+                } else if (this.pc.connectionState === 'failed' ||
+                    this.pc.connectionState === 'disconnected' ||
+                    this.pc.connectionState === 'closed') {
+                    this.connected = false;
+                    this.onDisconnected();
+                }
+            };
+
+            // 7. Create offer
+            const offer = await this.pc.createOffer();
+            await this.pc.setLocalDescription(offer);
+            console.log('📝 [WebRTC] Created offer, waiting for ICE gathering...');
+
+            // 8. Wait for ICE gathering
+            await this.waitForIceGathering();
+            console.log('🧊 [WebRTC] ICE gathering complete');
+
+            // 9. Send offer via HTTP
+            console.log('📤 [WebRTC] Sending offer via HTTP...');
+            const response = await fetch(`${this.serverUrl}/webrtc?agent=${this.agentId}_${this.callId}`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    offer: this.pc.localDescription,
+                    agentId: this.agentId,
+                    callId: this.callId
+                })
+            });
+
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.error || `HTTP ${response.status}`);
+            }
+
+            const { answer } = await response.json();
+            console.log('📥 [WebRTC] Received answer from server');
+
+            // 10. Set remote description
+            await this.pc.setRemoteDescription(answer);
+            console.log('✅ [WebRTC] Connection established!');
+
+        } catch (error) {
+            console.error('❌ [WebRTC] Connection failed:', error);
+            this.onError(error.message || error);
+            throw error;
+        }
+    }
+
+    waitForIceGathering() {
+        return new Promise((resolve) => {
+            if (this.pc.iceGatheringState === 'complete') {
+                resolve();
+            } else {
+                const checkState = () => {
+                    if (this.pc.iceGatheringState === 'complete') {
+                        this.pc.removeEventListener('icegatheringstatechange', checkState);
+                        resolve();
+                    }
+                };
+                this.pc.addEventListener('icegatheringstatechange', checkState);
+
+                setTimeout(() => {
+                    this.pc.removeEventListener('icegatheringstatechange', checkState);
+                    console.warn('⚠️ [WebRTC] ICE gathering timeout, proceeding anyway');
+                    resolve();
+                }, 5000);
+            }
+        });
+    }
+
+    sendEvent(event, data = {}) {
+        if (this.dataChannel?.readyState === 'open') {
+            this.dataChannel.send(JSON.stringify({ event, ...data }));
+        }
+    }
+
+    handleControlEvent(msg) {
+        switch (msg.event) {
+            case 'clearAudio':
+                console.log('🛑 [WebRTC] Interrupt: stopping audio');
+                if (this.audioElement) {
+                    this.audioElement.pause();
+                    this.audioElement.currentTime = 0;
+                }
+                break;
+
+            case 'transcription':
+                console.log('📝 [WebRTC] Transcription:', msg.text);
+                this.onTranscription(msg.text, msg.isFinal);
+                break;
+
+            case 'mark':
+                console.log('🏷️ [WebRTC] Mark:', msg.name);
+                break;
+
+            default:
+                console.log('ℹ️ [WebRTC] Unknown event:', msg.event);
+        }
+    }
+
+    disconnect() {
+        console.log('🔴 [WebRTC] Disconnecting...');
+
+        if (this.audioElement) {
+            this.audioElement.pause();
+            this.audioElement.srcObject = null;
+        }
+
+        if (this.dataChannel) {
+            this.dataChannel.close();
+        }
+
+        if (this.pc) {
+            this.pc.close();
+        }
+
+        this.connected = false;
+        this.onDisconnected();
+    }
+
+    generateCallId() {
+        return 'web_' + Date.now() + '_' + Math.random().toString(36).substr(2, 8);
+    }
+}

package/src/core/webrtcSignaling.ts

@@ -0,0 +1,72 @@
+/** ICE server entry from POST /calls/create */
+export type CreateCallIceServer = {
+    urls: string | string[];
+    username?: string | null;
+    credential?: string | null;
+};
+
+export type CreateCallResponse = {
+    call_id?: string;
+    prospect_id?: string;
+    worker_url?: string;
+    ice_servers?: CreateCallIceServer[];
+    status?: string;
+};
+
+/**
+ * Derive ICE trickle URL from worker_url — same host + query, path /webrtc/ice.
+ *
+ * API returns:  https://host/webrtc?agent_id=...&token=...
+ * ICE trickle:   https://host/webrtc/ice?agent_id=...&token=...
+ *
+ * Uses string replace first (Hermes-safe), then URL() fallback — matches web SDK.
+ */
+export function getIceTrickleUrl(workerUrl: string, agentId?: string, callId?: string): string {
+    // Primary path: Vanira worker_url always uses /webrtc?query
+    if (workerUrl.includes('/webrtc?')) {
+        return workerUrl.replace('/webrtc?', '/webrtc/ice?');
+    }
+    if (workerUrl.includes('/webrtc/ice')) {
+        return workerUrl;
+    }
+
+    try {
+        const url = new URL(workerUrl);
+        if (url.pathname.endsWith('/webrtc')) {
+            url.pathname = `${url.pathname}/ice`;
+        } else {
+            url.pathname = '/webrtc/ice';
+        }
+        return url.toString();
+    } catch {
+        const origin = workerUrl.replace(/\/webrtc.*$/, '').replace(/\/$/, '');
+        if (agentId && callId) {
+            return `${origin}/webrtc/ice?agent_id=${agentId}&call_id=${callId}`;
+        }
+        throw new Error(`[VaniraSDK] Invalid worker_url for ICE trickle: ${workerUrl}`);
+    }
+}
+
+/** True when url is the SDP endpoint — must never be polled with GET. */
+export function isWorkerSdpUrl(url: string): boolean {
+    return url.includes('/webrtc?') && !url.includes('/webrtc/ice');
+}
+
+/** Map /calls/create ice_servers → RTCPeerConnection config. */
+export function mapIceServersFromCreate(
+    servers: CreateCallIceServer[] | undefined,
+): RTCIceServer[] {
+    if (!servers?.length) {
+        throw new Error(
+            '[VaniraAI] createCall response missing ice_servers — call cannot proceed',
+        );
+    }
+
+    return servers.map((server) => ({
+        urls: server.urls,
+        ...(server.username ? { username: server.username } : {}),
+        ...(server.credential ? { credential: server.credential } : {}),
+    }));
+}
+
+export const ICE_TRICKLE_POLL_MS = 150;

package/src/index.js

@@ -0,0 +1,34 @@
+import { ConvAIWidget } from './ui/widget.js';
+
+// Auto-detect settings from the script tag
+const currentScript = document.currentScript;
+const agentId = currentScript?.getAttribute('data-agent-id');
+const position = currentScript?.getAttribute('data-position') || 'bottom-right';
+const primaryColor = currentScript?.getAttribute('data-primary-color') || '#000000';
+const serverUrl = currentScript?.getAttribute('data-server-url') || 'https://api.vanira.io';
+
+// Define the custom element
+if (!customElements.get('vanira-convai')) {
+  customElements.define('vanira-convai', ConvAIWidget);
+}
+
+// Auto-inject if script tag has data-agent-id (Zero-Code path)
+if (agentId) {
+  const widget = document.createElement('vanira-convai');
+  widget.setAttribute('agent-id', agentId);
+  widget.setAttribute('position', position);
+  widget.setAttribute('primary-color', primaryColor);
+  widget.setAttribute('server-url', serverUrl);
+  
+  // Wait for DOM to be ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+      document.body.appendChild(widget);
+    });
+  } else {
+    document.body.appendChild(widget);
+  }
+}
+
+// Export for advanced users who want manual placement
+window.VaniraConvAI = ConvAIWidget;

package/src/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @vanira/sdk-react-native — React Native entry point.
+ * Web SDK lives in vanira-sdk/ (unchanged).
+ */
+export * from './platforms/react-native';
+export * from './presets';

package/src/platforms/browser.ts

@@ -0,0 +1,67 @@
+/**
+ * @vanira/sdk — Browser entry point
+ *
+ * Usage:
+ *   import { createBrowserClient, VaniraAI, WebRTCClient } from '@vanira/sdk/browser'
+ *
+ * This entry point:
+ *   - Exports factory functions (createBrowserClient, createBrowserAI) that
+ *     pre-wire all browser adapters via browserRuntime.
+ *   - Re-exports core classes and adapter classes for manual wiring.
+ *   - Does NOT include widget / custom-element / DOM bootstrapping code
+ *     (that lives in cdn.ts and ui/).
+ */
+
+// ── Runtime factory functions (recommended) ───────────────────────────────────
+export {
+    createBrowserClient,
+    createBrowserAI,
+    browserRuntime,
+    browserCapabilities,
+} from '../runtime/browserRuntime';
+
+// ── Core session classes ──────────────────────────────────────────────────────
+export { WebRTCClient } from '../core/WebRTCClient';
+export { VaniraAI } from '../core/VaniraAI';
+export { SessionManager } from '../core/SessionManager';
+
+// ── Browser adapter implementations (available for manual wiring if needed) ──
+export { BrowserAudioAdapter } from '../adapters/browser/BrowserAudioAdapter';
+export { BrowserMediaAdapter } from '../adapters/browser/BrowserMediaAdapter';
+export { BrowserPeerAdapter } from '../adapters/browser/BrowserPeerAdapter';
+export { BrowserDataChannelAdapter } from '../adapters/browser/BrowserDataChannelAdapter';
+
+// ── Services ──────────────────────────────────────────────────────────────────
+export { ConfigService } from '../api/services/ConfigService';
+export { ChatService } from '../api/services/ChatService';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+export type {
+    WebRTCClientConfig,
+    ControlEvent,
+    WidgetConfig,
+    WidgetMode,
+    Agent,
+} from '../types';
+export type {
+    VaniraAIConfig,
+    VaniraAIStatus,
+    ClientToolCall,
+    TranscriptionEvent,
+} from '../core/VaniraAI';
+export type {
+    AudioAdapter,
+    MediaAdapter,
+    AudioPlayerHandle,
+    MediaAudioConstraints,
+} from '../adapters/interfaces';
+export type {
+    PeerConnectionAdapter,
+    DataChannelAdapter,
+    PeerConnectionConfig,
+    DataChannelController,
+} from '../adapters/PeerConnectionAdapter';
+export type {
+    VaniraRuntime,
+    RuntimeCapabilities,
+} from '../runtime/types';

package/src/platforms/react-native.ts

@@ -0,0 +1,105 @@
+/**
+ * @vanira/sdk-react-native — React Native entry point
+ *
+ * Usage:
+ *   import { createReactNativeClient, VaniraAI } from '@vanira/sdk-react-native'
+ *
+ * Prerequisites in the React Native project:
+ *   npm install react-native-webrtc permission-handler
+ *   # iOS: pod install
+ *   # Add NSMicrophoneUsageDescription to Info.plist
+ *   # Add RECORD_AUDIO permission to AndroidManifest.xml
+ *   # Call registerGlobals() from react-native-webrtc at app entry:
+ *   #   import { registerGlobals } from 'react-native-webrtc';
+ *   #   registerGlobals();
+ *
+ * Platform differences vs browser:
+ *   - supportsAudioEndedEvent: false — audio routes via native stack, no onended.
+ *     playedStream is sent ~1.8s after final transcription (not on mark events).
+ *   - supportsDom: false — no document/window APIs.
+ *   - supportsHtmlAudio: false — no Audio element.
+ *   - supportsCustomElements: false — no customElements.define().
+ *   - supportsLocalStorage: false — use AsyncStorage instead.
+ *   - callType: 'web', runtimeName: 'react-native' in /calls/create body.
+ *
+ * Legacy names:
+ *   createVaniraClient / createVaniraAI still exported for backward compat.
+ */
+
+// ── Runtime factory functions (recommended) ───────────────────────────────────
+export {
+    createReactNativeClient,
+    createReactNativeAI,
+    reactNativeRuntime,
+    reactNativeCapabilities,
+} from '../runtime/reactNativeRuntime';
+
+// ── Core session classes ──────────────────────────────────────────────────────
+export { WebRTCClient } from '../core/WebRTCClient';
+export { VaniraAI } from '../core/VaniraAI';
+export {
+    hasContinueSession,
+    loadContinueSession,
+    saveCallSession,
+} from '../core/CallSessionStore';
+export type { StoredCallSession } from '../core/CallSessionStore';
+export { createSyncStorageAdapter } from '../adapters/storage/createSyncStorageAdapter';
+export type { SyncStorageBackend } from '../adapters/storage/createSyncStorageAdapter';
+
+// ── RN adapter implementations ────────────────────────────────────────────────
+export { RNAudioAdapter } from '../adapters/react-native/RNAudioAdapter';
+export { RNMediaAdapter } from '../adapters/react-native/RNMediaAdapter';
+export { RNPeerAdapter } from '../adapters/react-native/RNPeerAdapter';
+export { RNDataChannelAdapter } from '../adapters/react-native/RNDataChannelAdapter';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+export type {
+    WebRTCClientConfig,
+    ControlEvent,
+} from '../types';
+export type {
+    VaniraAIConfig,
+    VaniraAIStatus,
+    ClientToolCall,
+    TranscriptionEvent,
+} from '../core/VaniraAI';
+export type {
+    AudioAdapter,
+    MediaAdapter,
+    AudioPlayerHandle,
+    MediaAudioConstraints,
+} from '../adapters/interfaces';
+export type {
+    PeerConnectionAdapter,
+    DataChannelAdapter,
+    PeerConnectionConfig,
+    DataChannelController,
+} from '../adapters/PeerConnectionAdapter';
+export type {
+    VaniraRuntime,
+    RuntimeCapabilities,
+} from '../runtime/types';
+
+// ── Backward-compatible legacy factories ─────────────────────────────────────
+//
+// These names existed before the runtime layer was introduced.
+// They now delegate to createReactNativeClient / createReactNativeAI.
+// Prefer the new names for new code.
+
+import { createReactNativeClient, createReactNativeAI } from '../runtime/reactNativeRuntime';
+import type { WebRTCClientConfig } from '../types';
+import type { VaniraAIConfig } from '../core/VaniraAI';
+import { WebRTCClient } from '../core/WebRTCClient';
+import { VaniraAI } from '../core/VaniraAI';
+
+/** @deprecated Use createReactNativeClient() instead */
+export function createVaniraClient(
+    config: Omit<WebRTCClientConfig, 'audioAdapter' | 'mediaAdapter' | 'peerAdapter' | 'dataChannelAdapter'>
+): WebRTCClient {
+    return createReactNativeClient(config);
+}
+
+/** @deprecated Use createReactNativeAI() instead */
+export function createVaniraAI(config: VaniraAIConfig): VaniraAI {
+    return createReactNativeAI(config);
+}