@vanira/sdk-react-native 0.0.2

package/src/ui/utils.ts

@@ -0,0 +1,37 @@
+/**
+ * Clean up LaTeX mathematical formatting from a string into a clean, human-readable plain text.
+ */
+export function cleanLatexText(text: string): string {
+    if (!text) return '';
+    return text
+        // 1. Fractions: \frac{a}{b} -> a/b
+        .replace(/\\frac\{([^}]+)\}\{([^}]+)\}/g, '$1/$2')
+        // 2. Square roots: \sqrt{a} -> √a
+        .replace(/\\sqrt\{([^}]+)\}/g, '√$1')
+        .replace(/\\sqrt(?![a-zA-Z])/g, '√')
+        .replace(/\bsqrt\b/gi, '√')
+        // 3. Delimiters: \left and \right
+        .replace(/\\left(?![a-zA-Z])/g, '')
+        .replace(/\\right(?![a-zA-Z])/g, '')
+        // 4. Text block: \text{abc} -> abc
+        .replace(/\\text\{([^}]+)\}/g, '$1')
+        .replace(/\\text\{([^}]+)$/g, '$1') // in case of missing closing brace like \text{ (cannot be simplified further)
+        .replace(/\\text(?![a-zA-Z])/g, '') // remove any dangling \text
+        // 5. Common math symbols
+        .replace(/\\times(?![a-zA-Z])/g, '×')
+        .replace(/\\div(?![a-zA-Z])/g, '÷')
+        .replace(/\\pm(?![a-zA-Z])/g, '±')
+        .replace(/\\ge(q)?(?![a-zA-Z])/g, '≥')
+        .replace(/\\le(q)?(?![a-zA-Z])/g, '≤')
+        .replace(/\\ne(q)?(?![a-zA-Z])/g, '≠')
+        .replace(/\\approx(?![a-zA-Z])/g, '≈')
+        .replace(/\\cdot(?![a-zA-Z])/g, '·')
+        .replace(/\\degree(?![a-zA-Z])/g, '°')
+        .replace(/\\pi(?![a-zA-Z])/g, 'π')
+        .replace(/\\theta(?![a-zA-Z])/g, 'θ')
+        .replace(/\\infty(?![a-zA-Z])/g, '∞')
+        // Strip any remaining curly braces from LaTeX commands
+        .replace(/[{}]/g, '')
+        // Clean up double/multiple spaces to a single space
+        .replace(/  +/g, ' ');
+}

package/src/ui/views/AbstractChatView.ts

@@ -0,0 +1,93 @@
+import { ChatWindow, VoiceOverlay } from '../components';
+import { icons } from '../styles';
+
+export abstract class AbstractChatView {
+    protected element: HTMLDivElement;
+    protected chatWindow!: ChatWindow;
+    protected overlay!: VoiceOverlay;
+    protected voiceTrigger!: HTMLButtonElement;
+
+    constructor(
+        protected onSendMessage: (msg: string) => void,
+        protected onStartCall: () => void,
+        protected onHangup: () => void,
+        protected primaryColor: string = '#000000',
+        protected secondaryColor: string = '#111111',
+        protected onCallEnded?: (durationMs: number, startedAt: number) => void
+    ) {
+        this.element = document.createElement('div');
+        this.element.style.flex = '1'; // Fill parent (widget-body)
+        this.element.style.display = 'flex';
+        this.element.style.flexDirection = 'column';
+        this.element.style.minHeight = '0'; // Crucial for flex scrolling
+        this.element.style.position = 'relative'; // Added from VoiceView
+
+        // Child classes will append specific elements (Avatar, etc)
+        // Then call setupChat()
+    }
+
+    protected setupChat() {
+        this.chatWindow = new ChatWindow((msg) => this.onSendMessage(msg));
+        const chatEl = this.chatWindow.getElement();
+        chatEl.style.flex = '1';
+        this.element.appendChild(chatEl);
+
+        this.injectVoiceTrigger();
+
+        this.overlay = new VoiceOverlay(() => this.onHangup(), this.primaryColor, this.secondaryColor, this.onCallEnded);
+        this.element.appendChild(this.overlay.getElement());
+    }
+
+    protected injectVoiceTrigger() {
+        const triggerBtn = document.createElement('button');
+        this.voiceTrigger = triggerBtn;
+        triggerBtn.className = 'voice-btn-simple';
+        triggerBtn.innerHTML = `<div class="voice-btn-icon">${icons.audioLines}</div>`;
+        triggerBtn.onclick = () => this.onStartCall();
+
+        // Synchronous injection since ChatWindow is already constructed
+        const inputArea = this.chatWindow.getElement().querySelector('.chat-input-area');
+
+        if (inputArea) {
+            inputArea.insertBefore(this.voiceTrigger, inputArea.firstChild);
+        } else {
+            console.warn('VaniraSDK: Failed to inject voice trigger', { inputArea });
+        }
+    }
+
+    public getElement(): HTMLDivElement {
+        return this.element;
+    }
+
+    public getChatWindow(): ChatWindow {
+        return this.chatWindow;
+    }
+
+    public setCallActive(active: boolean) {
+        if (active) {
+            this.overlay.show();
+            // User Request: Hide Chat Welcome & Chat Box during interaction
+            if (this.chatWindow) {
+                this.chatWindow.getElement().style.display = 'none';
+            }
+        } else {
+            this.overlay.hide();
+            // Restore functionality on hangup
+            if (this.chatWindow) {
+                this.chatWindow.getElement().style.display = 'flex';
+            }
+        }
+    }
+
+    public setStatus(status: 'connecting' | 'connected' | 'disconnected' | 'error', errorMsg?: string) {
+        this.overlay.setStatus(status, errorMsg);
+    }
+
+    public setTranscription(text: string, isFinal: boolean) {
+        this.overlay.setTranscription(text, isFinal);
+    }
+
+    public setVideoTrack(track: MediaStreamTrack) {
+        this.overlay.setVideoTrack(track);
+    }
+}

package/src/ui/views/AbstractVoiceView.ts

@@ -0,0 +1,57 @@
+import { VoiceOverlay } from '../components';
+
+export abstract class AbstractVoiceView {
+    protected element: HTMLDivElement;
+    protected overlay!: VoiceOverlay;
+    protected onStartCall: (behavior?: 'continue' | 'new') => void;
+    protected onHangup: () => void;
+    protected primaryColor: string;
+    protected secondaryColor: string;
+    protected onCallEnded?: (durationMs: number, startedAt: number) => void;
+
+    constructor(
+        onStartCall: (behavior?: 'continue' | 'new') => void,
+        onHangup: () => void,
+        primaryColor: string = '#000000',
+        secondaryColor: string = '#111111',
+        onCallEnded?: (durationMs: number, startedAt: number) => void
+    ) {
+        this.onStartCall = onStartCall;
+        this.onHangup = onHangup;
+        this.primaryColor = primaryColor;
+        this.secondaryColor = secondaryColor;
+        this.onCallEnded = onCallEnded;
+        this.element = document.createElement('div');
+        this.element.style.height = '100%';
+        this.element.style.position = 'relative';
+
+        // Child classes implement specific init
+        // BUT calling initOverlay here is common
+    }
+
+    protected initOverlay() {
+        this.overlay = new VoiceOverlay(() => this.onHangup(), this.primaryColor, this.secondaryColor, this.onCallEnded);
+        this.element.appendChild(this.overlay.getElement());
+    }
+
+    public getElement(): HTMLDivElement {
+        return this.element;
+    }
+
+    public setCallActive(active: boolean) {
+        if (active) this.overlay.show();
+        else this.overlay.hide();
+    }
+
+    public setStatus(status: 'connecting' | 'connected' | 'disconnected' | 'error', errorMsg?: string) {
+        this.overlay.setStatus(status, errorMsg);
+    }
+
+    public setTranscription(text: string, isFinal: boolean) {
+        this.overlay.setTranscription(text, isFinal);
+    }
+
+    public setVideoTrack(track: MediaStreamTrack) {
+        this.overlay.setVideoTrack(track);
+    }
+}

package/src/ui/views/AvatarOnlyView.ts

@@ -0,0 +1,78 @@
+import { AvatarView } from '../components';
+import { icons } from '../styles';
+import { AbstractVoiceView } from './AbstractVoiceView';
+
+export class AvatarOnlyView extends AbstractVoiceView {
+    private avatarView: AvatarView;
+    private startCallBtn: HTMLButtonElement;
+    private controlsContainer: HTMLDivElement;
+
+    constructor(
+        onStartCall: () => void,
+        onHangup: () => void,
+        primaryColor: string = '#000000',
+        secondaryColor: string = '#111111',
+        onCallEnded?: (durationMs: number, startedAt: number) => void
+    ) {
+        super(onStartCall, onHangup, primaryColor, secondaryColor, onCallEnded);
+
+        // Ensure flex layout
+        this.element.style.display = 'flex';
+        this.element.style.flexDirection = 'column';
+
+        // 1. Avatar View (Idle State matching Overlay Card)
+        this.avatarView = new AvatarView();
+        const avatarEl = this.avatarView.getElement();
+        // Match VoiceOverlay VideoContainer styles
+        avatarEl.style.width = '100%';
+        avatarEl.style.maxWidth = '300px';
+        avatarEl.style.aspectRatio = '1/1';
+        avatarEl.style.borderRadius = '16px';
+        avatarEl.style.overflow = 'hidden';
+        avatarEl.style.margin = 'auto'; // Center vertically and horizontally
+        avatarEl.style.position = 'relative'; // Ensure proper stacking
+
+        this.element.appendChild(avatarEl);
+
+        // 2. Start Call Controls
+        this.controlsContainer = document.createElement('div');
+        this.controlsContainer.className = 'widget-body';
+        this.controlsContainer.style.position = 'absolute';
+        this.controlsContainer.style.bottom = '20px';
+        this.controlsContainer.style.width = '100%';
+        this.controlsContainer.style.zIndex = '10';
+
+        const controls = document.createElement('div');
+        controls.className = 'controls';
+
+        this.startCallBtn = document.createElement('button');
+        this.startCallBtn.className = 'control-btn primary';
+        this.startCallBtn.innerHTML = `${icons.phone} <span>Start Call</span>`;
+        this.startCallBtn.onclick = () => this.onStartCall();
+
+        controls.appendChild(this.startCallBtn);
+        this.controlsContainer.appendChild(controls);
+        this.element.appendChild(this.controlsContainer);
+
+        // 3. Overlay
+        this.initOverlay();
+        this.overlay.setMode('avatar');
+        // REVERTED Full Screen: this.overlay.setFullScreen(true);
+    }
+
+    public getAvatarView(): AvatarView {
+        return this.avatarView;
+    }
+
+    public override setCallActive(active: boolean) {
+        if (active) {
+            this.overlay.setMode('avatar');
+        }
+        super.setCallActive(active);
+        if (active) {
+            this.controlsContainer.style.display = 'none';
+        } else {
+            this.controlsContainer.style.display = 'block';
+        }
+    }
+}

package/src/ui/views/ChatAvatarView.ts

@@ -0,0 +1,66 @@
+import { AbstractChatView } from './AbstractChatView';
+import { icons } from '../styles';
+
+export class ChatAvatarView extends AbstractChatView {
+
+    constructor(
+        onSendMessage: (msg: string) => void,
+        onStartCall: () => void,
+        onHangup: () => void,
+        primaryColor: string = '#000000',
+        secondaryColor: string = '#111111',
+        onCallEnded?: (durationMs: number, startedAt: number) => void
+    ) {
+        super(onSendMessage, onStartCall, onHangup, primaryColor, secondaryColor, onCallEnded);
+        // No top AvatarView anymore! Just standard chat setup.
+        this.setupChat();
+        this.overlay.setMode('avatar');
+    }
+
+    // Override to inject the unique Circular Video Button
+    protected override injectVoiceTrigger() {
+        const triggerBtn = document.createElement('button');
+        this.voiceTrigger = triggerBtn;
+        triggerBtn.className = 'voice-btn-simple';
+        // Custom styling for Avatar Mode
+        triggerBtn.style.overflow = 'hidden'; // Clip video
+        triggerBtn.style.padding = '0';
+        triggerBtn.style.border = '1.5px solid #e5e7eb'; // Clean border
+
+        // Video Loop (Simli Jenna or equiv)
+        triggerBtn.innerHTML = `
+            <video 
+                src="https://www.simli.com/jenna.mp4" 
+                autoplay loop muted pip="false" playsinline 
+                style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
+            </video>
+            <div style="position: absolute; bottom: -2px; right: -2px; background: white; border-radius: 50%; padding: 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.1);">
+                ${icons.audioLines.replace('width="24"', 'width="12"').replace('height="24"', 'height="12"')}
+            </div>
+        `;
+
+        // Ensure small icon style if replacement didn't work (regex safely)
+        const iconDiv = triggerBtn.querySelector('div');
+        if (iconDiv) {
+            const svg = iconDiv.querySelector('svg');
+            if (svg) {
+                svg.style.width = '12px';
+                svg.style.height = '12px';
+            }
+        }
+
+        triggerBtn.onclick = () => this.onStartCall();
+
+        // Synchronous injection
+        const inputArea = this.chatWindow.getElement().querySelector('.chat-input-area');
+        const sendBtn = inputArea?.querySelector('.chat-send-btn');
+
+        if (inputArea && sendBtn) {
+            inputArea.insertBefore(this.voiceTrigger, sendBtn);
+        } else {
+            console.warn('VaniraSDK: Failed to inject voice trigger', { inputArea, sendBtn });
+        }
+    }
+
+    // No getAvatarView method anymore. VaniraInternalProvider should check for capability or cast.
+}

package/src/ui/views/ChatOnlyView.ts

@@ -0,0 +1,28 @@
+import { ChatWindow } from '../components';
+
+export class ChatOnlyView {
+    private element: HTMLDivElement;
+    private chatWindow: ChatWindow;
+
+    constructor(
+        private onSendMessage: (msg: string) => void
+    ) {
+        this.element = document.createElement('div');
+        this.element.style.flex = '1';
+        this.element.style.width = '100%';
+        this.element.style.minHeight = '0'; // Crucial for flex scrolling
+        this.element.style.display = 'flex';
+        this.element.style.flexDirection = 'column';
+
+        this.chatWindow = new ChatWindow((msg) => this.onSendMessage(msg));
+        this.element.appendChild(this.chatWindow.getElement());
+    }
+
+    public getElement(): HTMLDivElement {
+        return this.element;
+    }
+
+    public getChatWindow(): ChatWindow {
+        return this.chatWindow;
+    }
+}

package/src/ui/views/ChatVoiceView.ts

@@ -0,0 +1,15 @@
+import { AbstractChatView } from './AbstractChatView';
+
+export class ChatVoiceView extends AbstractChatView {
+    constructor(
+        onSendMessage: (msg: string) => void,
+        onStartCall: () => void,
+        onHangup: () => void,
+        primaryColor: string = '#000000',
+        secondaryColor: string = '#111111',
+        onCallEnded?: (durationMs: number, startedAt: number) => void
+    ) {
+        super(onSendMessage, onStartCall, onHangup, primaryColor, secondaryColor, onCallEnded);
+        this.setupChat();
+    }
+}

package/src/ui/views/VoiceOnlyView.ts

@@ -0,0 +1,25 @@
+import { VoiceOrb } from '../components';
+import { AbstractVoiceView } from './AbstractVoiceView';
+
+export class VoiceOnlyView extends AbstractVoiceView {
+    private voiceOrb: VoiceOrb;
+
+    constructor(
+        onStartCall: (behavior?: 'continue' | 'new') => void,
+        onHangup: () => void,
+        primaryColor: string = '#000000',
+        secondaryColor: string = '#111111',
+        onCallEnded?: (durationMs: number, startedAt: number) => void
+    ) {
+        super(onStartCall, onHangup, primaryColor, secondaryColor, onCallEnded);
+
+        this.element.style.background = '#f9fafb';
+
+        this.voiceOrb = new VoiceOrb((behavior) => {
+            this.onStartCall(behavior);
+        });
+        this.element.appendChild(this.voiceOrb.getElement());
+
+        this.initOverlay();
+    }
+}

package/src/ui/views/index.ts

@@ -0,0 +1,5 @@
+export * from './VoiceOnlyView';
+export * from './ChatOnlyView';
+export * from './ChatVoiceView';
+export * from './AvatarOnlyView';
+export * from './ChatAvatarView';