@vanira/sdk-react-native 0.0.2

package/src/cdn.ts

@@ -0,0 +1,68 @@
+import { VaniraWidget } from './ui/VaniraWidget';
+import { VaniraAI } from './core/VaniraAI';
+import { WebRTCClient } from './core/WebRTCClient';
+
+// ─── Register Custom Element ─────────────────────────────────────────────────
+if (!customElements.get('vanira-convai')) {
+    customElements.define('vanira-convai', VaniraWidget);
+}
+
+// ─── Global window exports ───────────────────────────────────────────────────
+if (typeof window !== 'undefined') {
+    // Legacy widget registration
+    (window as any).VaniraConvAI = VaniraWidget;
+    // New SDK class — integrators can do: const client = new window.VaniraAI({ agentId: '...' })
+    (window as any).VaniraAI = VaniraAI;
+    // Low-level WebRTC client — for direct call management + uploadMedia()
+    (window as any).WebRTCClient = WebRTCClient;
+}
+
+// ─── Auto-inject Widget via script attributes ────────────────────────────────
+const currentScript = document.currentScript;
+if (currentScript) {
+    const widgetId = currentScript.getAttribute('data-widget-id') || currentScript.getAttribute('widget-id');
+    const agentId = currentScript.getAttribute('data-agent-id') || currentScript.getAttribute('agent-id');
+
+    if (widgetId || agentId) {
+        const position = currentScript.getAttribute('data-position') || 'bottom-right';
+        const primaryColor = currentScript.getAttribute('data-primary-color') || currentScript.getAttribute('primary-color') || '#000000';
+        const secondaryColor = currentScript.getAttribute('data-secondary-color') || currentScript.getAttribute('secondary-color');
+        const gradient = currentScript.getAttribute('data-gradient') || currentScript.getAttribute('gradient');
+        const serverUrl = currentScript.getAttribute('data-server-url') || currentScript.getAttribute('server-url');
+        const pkKey = currentScript.getAttribute('data-pk-key') || currentScript.getAttribute('pk-key');
+
+        const widget = document.createElement('vanira-convai');
+        if (widgetId) widget.setAttribute('widget-id', widgetId);
+        if (agentId) widget.setAttribute('agent-id', agentId);
+        if (pkKey) widget.setAttribute('pk-key', pkKey);
+        widget.setAttribute('position', position);
+        widget.setAttribute('primary-color', primaryColor);
+        if (secondaryColor) widget.setAttribute('secondary-color', secondaryColor);
+        if (gradient) widget.setAttribute('gradient', gradient);
+        if (serverUrl) widget.setAttribute('server-url', serverUrl);
+
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => document.body.appendChild(widget));
+        } else {
+            document.body.appendChild(widget);
+        }
+
+        // ─── Listen for vaniraai:tool_call events from the widget ──────────────
+        // Integrators can attach their own handlers:
+        // document.querySelector('vanira-convai').addEventListener('vaniraai:tool_call', (e) => { ... })
+        // But also expose a default global handler slot for convenience.
+        widget.addEventListener('vaniraai:tool_call', (e: Event) => {
+            const toolCall = (e as CustomEvent).detail;
+            console.log('[VaniraAI Widget] Tool call received by host page:', toolCall.name, toolCall.arguments);
+            // If integrator registered a global handler, call it
+            if (typeof (window as any).__vaniraai_tool_handler === 'function') {
+                (window as any).__vaniraai_tool_handler(toolCall, {
+                    sendResult: (result: any) => {
+                        // Future: wire back to widget vaniraClient
+                        console.log('[VaniraAI] sendResult called:', result);
+                    }
+                });
+            }
+        });
+    }
+}

package/src/core/CallSessionStore.ts

@@ -0,0 +1,137 @@
+/**
+ * Persists the latest call session per agent so "Continue" resumes context.
+ * Uses the runtime StorageAdapter (MMKV / AsyncStorage / in-memory).
+ */
+
+import type { StorageAdapter } from '../adapters/storage/StorageAdapter';
+
+export interface StoredCallSession {
+    callId: string;
+    prospectId?: string;
+    updatedAt: number;
+}
+
+const LEGACY_CALL_KEY = 'vanira_latest_call_id';
+const LEGACY_PROSPECT_KEY = 'vanira_prospect_id';
+
+function agentCallKey(agentId: string): string {
+    return `vanira_latest_call_id_${agentId}`;
+}
+
+function agentProspectKey(agentId: string): string {
+    return `vanira_prospect_id_${agentId}`;
+}
+
+function agentMetaKey(agentId: string): string {
+    return `vanira_call_meta_${agentId}`;
+}
+
+function safeGet(storage: StorageAdapter, key: string): string | null {
+    try {
+        return storage.getItem(key);
+    } catch {
+        return null;
+    }
+}
+
+/** Load the newest stored call session for an agent (continue / resume). */
+export function loadContinueSession(
+    storage: StorageAdapter,
+    agentId: string,
+): StoredCallSession | null {
+    if (!agentId) {
+        return null;
+    }
+
+    const candidates: StoredCallSession[] = [];
+
+    const metaRaw = safeGet(storage, agentMetaKey(agentId));
+    if (metaRaw) {
+        try {
+            const meta = JSON.parse(metaRaw) as StoredCallSession;
+            if (meta?.callId) {
+                candidates.push({
+                    callId: meta.callId,
+                    prospectId: meta.prospectId,
+                    updatedAt: meta.updatedAt || 0,
+                });
+            }
+        } catch {
+            /* ignore corrupt meta */
+        }
+    }
+
+    const pushCandidate = (
+        callId: string | null,
+        prospectId: string | null | undefined,
+        updatedAt: number,
+    ) => {
+        if (!callId) {
+            return;
+        }
+        candidates.push({
+            callId,
+            prospectId: prospectId || undefined,
+            updatedAt,
+        });
+    };
+
+    const agentProspect = safeGet(storage, agentProspectKey(agentId));
+    const legacyProspect = safeGet(storage, LEGACY_PROSPECT_KEY);
+
+    pushCandidate(
+        safeGet(storage, agentCallKey(agentId)),
+        agentProspect || legacyProspect,
+        2,
+    );
+    pushCandidate(
+        safeGet(storage, LEGACY_CALL_KEY),
+        legacyProspect,
+        0,
+    );
+
+    if (!candidates.length) {
+        return null;
+    }
+
+    candidates.sort((a, b) => b.updatedAt - a.updatedAt);
+    return candidates[0];
+}
+
+/** Persist call + prospect IDs after POST /calls/create succeeds. */
+export function saveCallSession(
+    storage: StorageAdapter,
+    agentId: string,
+    callId: string,
+    prospectId?: string,
+): void {
+    if (!agentId || !callId) {
+        return;
+    }
+
+    const meta: StoredCallSession = {
+        callId,
+        prospectId,
+        updatedAt: Date.now(),
+    };
+
+    try {
+        storage.setItem(agentMetaKey(agentId), JSON.stringify(meta));
+        storage.setItem(agentCallKey(agentId), callId);
+        storage.setItem(LEGACY_CALL_KEY, callId);
+
+        if (prospectId) {
+            storage.setItem(agentProspectKey(agentId), prospectId);
+            storage.setItem(LEGACY_PROSPECT_KEY, prospectId);
+        }
+    } catch (e) {
+        console.warn('[CallSessionStore] Failed to persist call session:', e);
+    }
+}
+
+export function hasContinueSession(
+    storage: StorageAdapter,
+    agentId: string,
+): boolean {
+    return !!loadContinueSession(storage, agentId)?.callId;
+}

package/src/core/DraggableController.ts

@@ -0,0 +1,83 @@
+
+export class DraggableController {
+    private isDragging = false;
+    private startX = 0;
+    private startY = 0;
+    private initialX = 0;
+    private initialY = 0;
+    private dragThreshold = 5;
+
+    constructor(
+        private target: HTMLElement,
+        private onDrag: (x: number, y: number) => void,
+        private onDragEnd: () => void
+    ) {
+        this.init();
+    }
+
+    private init() {
+        this.target.addEventListener('mousedown', (e) => this.onMouseDown(e as MouseEvent));
+        this.target.addEventListener('touchstart', (e) => this.onTouchStart(e as TouchEvent), { passive: false });
+        
+        window.addEventListener('mousemove', (e) => this.onMouseMove(e as MouseEvent));
+        window.addEventListener('touchmove', (e) => this.onTouchMove(e as TouchEvent), { passive: false });
+        
+        window.addEventListener('mouseup', () => this.onMouseUp());
+        window.addEventListener('touchend', () => this.onMouseUp());
+    }
+
+    private onMouseDown(e: MouseEvent) {
+        this.startDrag(e.clientX, e.clientY);
+    }
+
+    private onTouchStart(e: TouchEvent) {
+        const touch = e.touches[0];
+        if (touch) this.startDrag(touch.clientX, touch.clientY);
+    }
+
+    private startDrag(x: number, y: number) {
+        this.startX = x;
+        this.startY = y;
+        this.isDragging = false;
+        
+        const rect = this.target.getBoundingClientRect();
+        this.initialX = rect.left;
+        this.initialY = rect.top;
+    }
+
+    private onMouseMove(e: MouseEvent) {
+        this.moveDrag(e.clientX, e.clientY);
+    }
+
+    private onTouchMove(e: TouchEvent) {
+        const touch = e.touches[0];
+        if (touch) {
+            if (e.cancelable) e.preventDefault();
+            this.moveDrag(touch.clientX, touch.clientY);
+        }
+    }
+
+    private moveDrag(x: number, y: number) {
+        if (this.startX === 0) return;
+
+        const dx = x - this.startX;
+        const dy = y - this.startY;
+
+        if (!this.isDragging && (Math.abs(dx) > this.dragThreshold || Math.abs(dy) > this.dragThreshold)) {
+            this.isDragging = true;
+        }
+
+        if (this.isDragging) {
+            this.onDrag(this.initialX + dx, this.initialY + dy);
+        }
+    }
+
+    private onMouseUp() {
+        if (this.isDragging) {
+            this.onDragEnd();
+        }
+        this.isDragging = false;
+        this.startX = 0;
+        this.startY = 0;
+    }
+}

package/src/core/SessionManager.ts

@@ -0,0 +1,322 @@
+/**
+ * SessionManager
+ * ==============
+ * Manages per-tab widget sessions using:
+ *  - sessionStorage → tab_id  (unique per browser tab, survives refresh, gone on tab close)
+ *  - localStorage   → session data (prospect_id, chat_id, messages — persists across refreshes)
+ *  - BroadcastChannel → real-time cross-tab communication
+ *  - Heartbeat → detect dead tabs (no heartbeat for 15s → tab considered gone)
+ *
+ * Key behaviours:
+ *  1. Each tab gets a unique tab_id.
+ *  2. Only one tab is "active" at a time (owns the session).
+ *  3. When a second tab loads the widget, it detects the conflict and fires onTabConflict().
+ *  4. Chat messages, prospect_id and chat_id are persisted so a page refresh restores the session.
+ *  5. Tab closure is detected via heartbeat expiry — the next tab to init auto-claims.
+ */
+
+export interface StoredMessage {
+    role: 'user' | 'assistant';
+    content: string;
+    timestamp: number;
+}
+
+export interface SessionData {
+    tabId: string;
+    prospectId: string;
+    chatId: string | null;
+    conversationId: string | null;
+    messages: StoredMessage[];
+    lastActive: number; // unix ms — heartbeat timestamp
+}
+
+export type SessionEvent =
+    | 'tab_conflict'      // another tab already owns the session
+    | 'session_claimed'   // this tab successfully claimed the session
+    | 'session_restored'  // existing session loaded (prospect/chatId/messages recovered)
+    | 'tab_took_over'     // a different tab stole the session from this one
+    | 'session_cleared';  // session was explicitly cleared
+
+export class SessionManager {
+    private tabId: string;
+    private sessionKey: string;
+    private channelName: string;
+
+    private channel: BroadcastChannel | null = null;
+    private heartbeatTimer: ReturnType<typeof setInterval> | null = null;
+    private listeners: Map<SessionEvent, Set<Function>> = new Map();
+
+    /** How often (ms) the active tab broadcasts its heartbeat */
+    private static readonly HEARTBEAT_INTERVAL_MS = 5_000;
+    /** How old (ms) a heartbeat must be before we consider the tab dead */
+    private static readonly HEARTBEAT_TIMEOUT_MS = 15_000;
+
+    constructor(widgetId: string) {
+        const safeId = widgetId.replace(/[^a-z0-9_-]/gi, '_');
+        this.sessionKey = `vaniraai_session_${safeId}`;
+        this.channelName = `vaniraai_channel_${safeId}`;
+        this.tabId = this._getOrCreateTabId();
+
+        this._setupChannel();
+    }
+
+    // ─── Public API ──────────────────────────────────────────────────────────
+
+    /** Returns this tab's unique ID (stable across same-tab page refreshes). */
+    getTabId(): string {
+        return this.tabId;
+    }
+
+    /**
+     * Try to claim the session for this tab.
+     * Returns true  → session claimed (or restored after stale prior tab).
+     * Returns false → another live tab already owns the session.
+     */
+    claimSession(): boolean {
+        const existing = this._loadSession();
+
+        if (existing) {
+            const age = Date.now() - existing.lastActive;
+            const isOwnTab = existing.tabId === this.tabId;
+            const isStaletab = age > SessionManager.HEARTBEAT_TIMEOUT_MS;
+
+            if (isOwnTab) {
+                // This tab already owned the session (e.g. page refresh)
+                this._startHeartbeat();
+                this._emit('session_restored');
+                return true;
+            }
+
+            if (!isStaletab) {
+                // A live different tab owns the session → conflict
+                this._emit('tab_conflict');
+                return false;
+            }
+            // Stale tab — safe to take over
+        }
+
+        // No session or stale session → claim it
+        const draft: SessionData = existing
+            ? { ...existing, tabId: this.tabId, lastActive: Date.now() }
+            : { tabId: this.tabId, prospectId: '', chatId: null, conversationId: null, messages: [], lastActive: Date.now() };
+
+        this._saveSession(draft);
+        this._startHeartbeat();
+
+        // Notify other tabs (if any) that this tab took over
+        this._broadcast({ type: 'took_over', tabId: this.tabId });
+
+        const hadPrior = !!(existing?.prospectId);
+        this._emit(hadPrior ? 'session_restored' : 'session_claimed');
+        return true;
+    }
+
+    /**
+     * Force-claim the session even if another tab owns it.
+     * Call this when the user explicitly clicks "Use here" in the conflict UI.
+     */
+    forceClaimSession(): void {
+        const existing = this._loadSession();
+        const draft: SessionData = existing
+            ? { ...existing, tabId: this.tabId, lastActive: Date.now() }
+            : { tabId: this.tabId, prospectId: '', chatId: null, conversationId: null, messages: [], lastActive: Date.now() };
+
+        this._saveSession(draft);
+        this._startHeartbeat();
+        this._broadcast({ type: 'took_over', tabId: this.tabId });
+        this._emit('session_claimed');
+    }
+
+    /** Save / update the prospect and chat IDs for this session. */
+    saveIds(prospectId: string, chatId: string | null, conversationId?: string | null): void {
+        const session = this._loadSession() ?? this._blankSession();
+        this._saveSession({ ...session, prospectId, chatId, conversationId: conversationId ?? session.conversationId ?? null, tabId: this.tabId, lastActive: Date.now() });
+    }
+
+    /** Append a message to the persisted history. */
+    pushMessage(role: 'user' | 'assistant', content: string): void {
+        const session = this._loadSession() ?? this._blankSession();
+        session.messages.push({ role, content, timestamp: Date.now() });
+
+        // Keep last 100 messages to avoid bloating localStorage
+        if (session.messages.length > 100) {
+            session.messages = session.messages.slice(-100);
+        }
+
+        this._saveSession({ ...session, tabId: this.tabId, lastActive: Date.now() });
+    }
+
+    /** Update the content of the last assistant message (streaming). */
+    updateLastAssistantMessage(content: string): void {
+        const session = this._loadSession() ?? this._blankSession();
+        const msgs = session.messages;
+
+        // Find the last assistant message that is a placeholder (empty) or the last one
+        let found = false;
+        for (let i = msgs.length - 1; i >= 0; i--) {
+            if (msgs[i].role === 'assistant' && msgs[i].content === '') {
+                // Update the placeholder we pushed before streaming started
+                msgs[i].content = content;
+                found = true;
+                break;
+            }
+        }
+
+        if (!found) {
+            // Fallback: update the very last assistant message (older approach)
+            for (let i = msgs.length - 1; i >= 0; i--) {
+                if (msgs[i].role === 'assistant') {
+                    msgs[i].content = content;
+                    found = true;
+                    break;
+                }
+            }
+        }
+
+        if (!found) {
+            // No assistant message at all — just append
+            msgs.push({ role: 'assistant', content, timestamp: Date.now() });
+        }
+
+        this._saveSession({ ...session, tabId: this.tabId, lastActive: Date.now() });
+    }
+
+    /** Returns the currently persisted session data (null if none). */
+    getSession(): SessionData | null {
+        return this._loadSession();
+    }
+
+    /** Clears ALL session data (prospect_id, chat_id, messages). */
+    clearSession(): void {
+        localStorage.removeItem(this.sessionKey);
+        this._broadcast({ type: 'session_cleared', tabId: this.tabId });
+        this._emit('session_cleared');
+    }
+
+    /** Clears chat-specific session data (chatId, conversationId, messages) but keeps the prospectId. */
+    clearChatKeepProspect(): void {
+        const session = this._loadSession();
+        if (session) {
+            this._saveSession({
+                ...session,
+                chatId: null,
+                conversationId: null,
+                messages: [],
+                lastActive: Date.now()
+            });
+        }
+    }
+
+    /** Stop the heartbeat and release resources. Call on widget destroy. */
+    destroy(): void {
+        this._stopHeartbeat();
+        if (this.channel) {
+            this.channel.close();
+            this.channel = null;
+        }
+    }
+
+    // ─── Event Emitter ───────────────────────────────────────────────────────
+
+    on(event: SessionEvent, cb: Function): this {
+        if (!this.listeners.has(event)) this.listeners.set(event, new Set());
+        this.listeners.get(event)!.add(cb);
+        return this;
+    }
+
+    off(event: SessionEvent, cb: Function): this {
+        this.listeners.get(event)?.delete(cb);
+        return this;
+    }
+
+    // ─── Private ─────────────────────────────────────────────────────────────
+
+    private _getOrCreateTabId(): string {
+        let id = sessionStorage.getItem('vaniraai_tab_id');
+        if (!id) {
+            id = `tab_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+            sessionStorage.setItem('vaniraai_tab_id', id);
+        }
+        return id;
+    }
+
+    private _setupChannel(): void {
+        if (typeof BroadcastChannel === 'undefined') return; // SSR / old browsers
+
+        this.channel = new BroadcastChannel(this.channelName);
+        this.channel.onmessage = (ev) => {
+            const msg = ev.data as { type: string; tabId: string };
+
+            if (msg.tabId === this.tabId) return; // Ignore own messages
+
+            if (msg.type === 'took_over') {
+                // Another tab stole the session from us
+                this._stopHeartbeat();
+                this._emit('tab_took_over');
+            }
+
+            if (msg.type === 'heartbeat') {
+                // Another tab is alive — if that tab isn't us, we're in conflict
+                // (handled at claimSession time, not runtime)
+            }
+
+            if (msg.type === 'session_cleared') {
+                this._emit('session_cleared');
+            }
+        };
+    }
+
+    private _broadcast(data: object): void {
+        this.channel?.postMessage(data);
+    }
+
+    private _startHeartbeat(): void {
+        this._stopHeartbeat();
+        this.heartbeatTimer = setInterval(() => {
+            const session = this._loadSession();
+            if (session && session.tabId === this.tabId) {
+                this._saveSession({ ...session, lastActive: Date.now() });
+                this._broadcast({ type: 'heartbeat', tabId: this.tabId });
+            }
+        }, SessionManager.HEARTBEAT_INTERVAL_MS);
+    }
+
+    private _stopHeartbeat(): void {
+        if (this.heartbeatTimer !== null) {
+            clearInterval(this.heartbeatTimer);
+            this.heartbeatTimer = null;
+        }
+    }
+
+    private _loadSession(): SessionData | null {
+        try {
+            const raw = localStorage.getItem(this.sessionKey);
+            return raw ? (JSON.parse(raw) as SessionData) : null;
+        } catch {
+            return null;
+        }
+    }
+
+    private _saveSession(data: SessionData): void {
+        try {
+            localStorage.setItem(this.sessionKey, JSON.stringify(data));
+        } catch (e) {
+            console.warn('[VaniraAI] SessionManager: failed to save session', e);
+        }
+    }
+
+    private _blankSession(): SessionData {
+        return {
+            tabId: this.tabId,
+            prospectId: '',
+            chatId: null,
+            conversationId: null,
+            messages: [],
+            lastActive: Date.now(),
+        };
+    }
+
+    private _emit(event: SessionEvent): void {
+        this.listeners.get(event)?.forEach(cb => cb());
+    }
+}