@vanira/sdk-react-native 0.0.2

package/src/ui/abstraction/interfaces.ts

@@ -0,0 +1,12 @@
+export interface IChatAdapter {
+    sendMessage(text: string, agentId: string, prospectId: string, chatId: string | null, onResponse: (response: any) => void, onStream?: (text: string) => void, onChatIdUpdate?: (newId: string) => void, widgetId?: string, pkKey?: string): Promise<void>;
+    sendFile?(file: File): Promise<void>;
+    likeDislike?(messageId: string, action: 'like' | 'dislike'): Promise<void>;
+}
+
+export interface IWidgetProvider {
+    create_call(): Promise<void>;
+    end_call(): void;
+    ui_renderer(root: ShadowRoot): void;
+    initialize(config: any): Promise<void>;
+}

package/src/ui/adapters/VaniraChatAdapter.ts

@@ -0,0 +1,42 @@
+import { IChatAdapter } from '../abstraction/interfaces';
+import { ChatService } from '../../api/services/ChatService';
+
+export class VaniraChatAdapter implements IChatAdapter {
+    async sendMessage(
+        text: string,
+        agentId: string,
+        prospectId: string,
+        chatId: string | null,
+        onResponse: (response: any) => void,
+        onStream?: (text: string) => void,
+        onChatIdUpdate?: (newId: string, newConversationId?: string) => void,
+        widgetId?: string,
+        pkKey?: string
+    ): Promise<void> {
+        return ChatService.sendChatMessage(
+            agentId,
+            prospectId,
+            text,
+            chatId,
+            (stream) => {
+                if (onStream) onStream(stream);
+            },
+            onResponse,
+            (newId, newConversationId) => {
+                if (onChatIdUpdate && newId) onChatIdUpdate(newId, newConversationId || undefined);
+            },
+            widgetId,
+            pkKey
+        );
+    }
+
+    async sendFile(file: File): Promise<void> {
+        console.warn("sendFile not implemented for VaniraChatAdapter yet - Incompatible function adapted", file);
+        throw new Error("Method not implemented.");
+    }
+
+    async likeDislike(messageId: string, action: 'like' | 'dislike'): Promise<void> {
+        console.warn("likeDislike not implemented for VaniraChatAdapter yet - Incompatible function adapted", messageId, action);
+        // Implement API call here when available
+    }
+}

package/src/ui/components/AvatarView.ts

@@ -0,0 +1,81 @@
+
+export class AvatarView {
+    private element: HTMLDivElement;
+    private videoElement: HTMLVideoElement;
+    private placeholderContainer: HTMLDivElement;
+
+    constructor(avatarUrl?: string | null) {
+        this.element = document.createElement('div');
+        this.element.className = 'avatar-container';
+        this.element.style.position = 'relative';
+        this.element.style.width = '100%';
+        this.element.style.height = '100%';
+        this.element.style.background = '#ffffff'; // White card background
+        this.element.style.borderRadius = '16px';
+        this.element.style.overflow = 'hidden';
+
+        // 1. Placeholder Container (Centered Circle)
+        this.placeholderContainer = document.createElement('div');
+        this.placeholderContainer.style.width = '100%';
+        this.placeholderContainer.style.height = '100%';
+        this.placeholderContainer.style.display = 'flex';
+        this.placeholderContainer.style.alignItems = 'center';
+        this.placeholderContainer.style.justifyContent = 'center';
+
+        // Determine Avatar Source
+        // Use provided URL or fallback to default video
+        const sourceUrl = avatarUrl || "https://www.simli.com/jenna.mp4";
+        const isVideo = sourceUrl.endsWith('.mp4') || sourceUrl.endsWith('.webm');
+
+        let mediaElement: HTMLElement;
+
+        if (isVideo) {
+            const vid = document.createElement('video');
+            vid.src = sourceUrl;
+            vid.muted = true;
+            vid.loop = true;
+            vid.autoplay = true;
+            vid.playsInline = true;
+            mediaElement = vid;
+        } else {
+            const img = document.createElement('img');
+            img.src = sourceUrl;
+            mediaElement = img;
+        }
+
+        // Apply Circle Styles
+        mediaElement.style.width = '140px';
+        mediaElement.style.height = '140px';
+        mediaElement.style.borderRadius = '50%';
+        mediaElement.style.objectFit = 'cover';
+        mediaElement.style.backgroundColor = '#f3f4f6';
+
+        this.placeholderContainer.appendChild(mediaElement);
+        this.element.appendChild(this.placeholderContainer);
+
+        // 2. Video Element
+        this.videoElement = document.createElement('video');
+        this.videoElement.className = 'avatar-video';
+        this.videoElement.autoplay = true;
+        this.videoElement.playsInline = true;
+        this.videoElement.muted = true; // Often required for autoplay
+        this.videoElement.style.display = 'none';
+
+        this.element.appendChild(this.videoElement);
+
+        // Initial State - NO DEFAULT ICON per user request
+        // this.setPlaceholder(this.currentGender as any);
+    }
+
+    public getElement(): HTMLDivElement {
+        return this.element;
+    }
+
+    public setStream(stream: MediaStream) {
+        this.videoElement.srcObject = stream;
+        this.videoElement.style.display = 'block';
+        this.placeholderContainer.style.display = 'none';
+    }
+
+
+}

package/src/ui/components/ChatWindow.ts

@@ -0,0 +1,263 @@
+
+import { icons } from '../styles';
+import { cleanLatexText } from '../utils';
+
+export interface ChatMessage {
+    role: 'user' | 'assistant';
+    content: string;
+}
+
+export class ChatWindow {
+    private element: HTMLDivElement;
+    private messageContainer: HTMLDivElement;
+    private inputArea: HTMLDivElement;
+    private input: HTMLInputElement;
+    private sendBtn: HTMLButtonElement;
+    private typingIndicator: HTMLDivElement | null = null;
+    private resolveBar: HTMLDivElement | null = null;
+
+    constructor(
+        private onSend: (message: string) => void
+    ) {
+        this.element = document.createElement('div');
+        this.element.style.display = 'flex';
+        this.element.style.flexDirection = 'column';
+        this.element.style.flex = '1';
+        this.element.style.overflow = 'hidden';
+        this.element.style.minHeight = '0'; // Crucial for nested flex scrolling
+
+        // Messages Area
+        this.messageContainer = document.createElement('div');
+        this.messageContainer.className = 'chat-messages';
+
+        // Input Area
+        this.inputArea = document.createElement('div');
+        this.inputArea.className = 'chat-input-area';
+
+        this.input = document.createElement('input');
+        this.input.className = 'chat-input';
+        this.input.placeholder = 'Type a message...';
+        this.input.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') this.handleSend();
+        });
+
+        this.sendBtn = document.createElement('button');
+        this.sendBtn.className = 'chat-send-btn';
+        this.sendBtn.innerHTML = icons.send;
+        this.sendBtn.onclick = () => this.handleSend();
+
+        this.inputArea.appendChild(this.input);
+        this.inputArea.appendChild(this.sendBtn);
+
+        // Branding Area
+        const brandingArea = document.createElement('div');
+        brandingArea.className = 'branding-footer';
+        brandingArea.innerHTML = `Technology Powered by <b>Vanira AI</b>`;
+
+        this.element.appendChild(this.messageContainer);
+        this.element.appendChild(this.inputArea);
+        this.element.appendChild(brandingArea);
+    }
+
+    public getElement(): HTMLDivElement {
+        return this.element;
+    }
+
+    private formatTime(date: Date = new Date()): string {
+        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    }
+
+    public addMessage(role: 'user' | 'assistant', content: string, timestamp?: number) {
+        const wrapper = document.createElement('div');
+        wrapper.style.cssText = `
+            display: flex;
+            flex-direction: column;
+            align-items: ${role === 'user' ? 'flex-end' : 'flex-start'};
+            margin-bottom: 2px;
+        `;
+
+        const msgDiv = document.createElement('div');
+        msgDiv.className = `chat-message ${role}`;
+        msgDiv.textContent = cleanLatexText(content);
+        wrapper.appendChild(msgDiv);
+
+        const ts = document.createElement('span');
+        ts.style.cssText = `
+            font-size: 10px;
+            color: #9ca3af;
+            margin: 2px 4px 6px;
+            display: block;
+        `;
+        ts.textContent = this.formatTime(timestamp ? new Date(timestamp) : undefined);
+        wrapper.appendChild(ts);
+
+        this.messageContainer.appendChild(wrapper);
+        this.scrollToBottom();
+    }
+
+    public updateLastAssistantMessage(content: string) {
+        // The last child is the wrapper div; the message is its first child
+        const lastWrapper = this.messageContainer.lastElementChild as HTMLElement;
+        if (lastWrapper) {
+            const lastMsg = lastWrapper.querySelector('.chat-message.assistant') as HTMLElement;
+            if (lastMsg) {
+                lastMsg.textContent = cleanLatexText(content);
+                this.scrollToBottom();
+                return;
+            }
+        }
+        this.addMessage('assistant', content);
+    }
+
+    public addButtons(buttons: Array<{ title: string; payload: string }>) {
+        const buttonsContainer = document.createElement('div');
+        buttonsContainer.className = 'chat-buttons-container';
+        buttonsContainer.style.display = 'flex';
+        buttonsContainer.style.flexWrap = 'wrap';
+        buttonsContainer.style.gap = '8px';
+        buttonsContainer.style.marginTop = '8px';
+        buttonsContainer.style.marginBottom = '12px';
+        buttonsContainer.style.justifyContent = 'flex-start';
+
+        buttons.forEach(btn => {
+            const buttonEl = document.createElement('button');
+            buttonEl.className = 'chat-suggestion-chip';
+            buttonEl.textContent = btn.title;
+            // Basic styles if CSS class not defined
+            buttonEl.style.padding = '6px 12px';
+            buttonEl.style.borderRadius = '16px';
+            buttonEl.style.border = '1px solid #e5e7eb';
+            buttonEl.style.backgroundColor = 'white';
+            buttonEl.style.fontSize = '12px';
+            buttonEl.style.color = '#4b5563';
+            buttonEl.style.cursor = 'pointer';
+            buttonEl.style.transition = 'all 0.2s';
+
+            buttonEl.onmouseenter = () => {
+                buttonEl.style.backgroundColor = '#f3f4f6';
+                buttonEl.style.borderColor = '#d1d5db';
+            };
+            buttonEl.onmouseleave = () => {
+                buttonEl.style.backgroundColor = 'white';
+                buttonEl.style.borderColor = '#e5e7eb';
+            };
+
+            buttonEl.onclick = () => {
+                this.handleSend(btn.payload);
+            };
+
+            buttonsContainer.appendChild(buttonEl);
+        });
+
+        // Append to the last message if probable? Or just append.
+        // Usually buttons belong to the last assistant message.
+        // For simplicity, append to container.
+        this.messageContainer.appendChild(buttonsContainer);
+        this.scrollToBottom();
+    }
+
+    private handleSend(overrideText?: string) {
+        const text = overrideText || this.input.value.trim();
+        if (!text) return;
+
+        this.onSend(text);
+        if (!overrideText) {
+            this.input.value = '';
+        }
+    }
+
+    public setTyping(isTyping: boolean) {
+        if (this.typingIndicator) {
+            this.typingIndicator.remove();
+            this.typingIndicator = null;
+        }
+
+        if (isTyping) {
+            this.typingIndicator = document.createElement('div');
+            this.typingIndicator.className = 'typing-indicator';
+
+            // 3 dots
+            for (let i = 0; i < 3; i++) {
+                const dot = document.createElement('div');
+                dot.className = 'typing-dot';
+                this.typingIndicator.appendChild(dot);
+            }
+
+            this.messageContainer.appendChild(this.typingIndicator);
+            this.scrollToBottom();
+        }
+    }
+
+    /**
+     * Inject a "Voice call ended" card into the message list.
+     * @param durationMs  call duration in milliseconds
+     * @param timestamp   unix ms when the call started (for ordering across restore)
+     */
+    public addCallRecord(durationMs: number, timestamp: number = Date.now()) {
+        const mins = Math.floor(durationMs / 60000);
+        const secs = Math.floor((durationMs % 60000) / 1000);
+        const label = mins > 0 ? `${mins}m ${secs}s` : `${secs}s`;
+
+        const card = document.createElement('div');
+        card.dataset.callTimestamp = String(timestamp);
+        card.style.cssText = `
+            display: flex; justify-content: center;
+            margin: 10px 16px;
+        `;
+
+        card.innerHTML = `
+            <div style="
+                display: flex; align-items: center; gap: 8px;
+                background: #f3f4f6; border: 1px solid #e5e7eb;
+                border-radius: 12px; padding: 8px 14px;
+                font-size: 12px; color: #6b7280;
+                max-width: 210px; width: fit-content;
+            ">
+                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="2" y="9" width="4" height="12" rx="2"/>
+                    <rect x="9" y="5" width="4" height="16" rx="2"/>
+                    <rect x="16" y="2" width="4" height="20" rx="2"/>
+                </svg>
+                <span>
+                    <span style="font-weight:500; color:#374151;">Voice call ended</span>
+                    <span style="margin-left:6px; color:#9ca3af;">·</span>
+                    <span style="margin-left:6px;">${label}</span>
+                </span>
+            </div>
+        `;
+
+        this.messageContainer.appendChild(card);
+        this.scrollToBottom();
+    }
+
+    public clearMessages() {
+        this.messageContainer.innerHTML = '';
+    }
+
+    public setResolveCallback(onResolve: () => void) {
+        if (this.resolveBar) {
+            this.resolveBar.remove();
+        }
+
+        this.resolveBar = document.createElement('div');
+        this.resolveBar.className = 'chat-resolve-bar';
+
+        const link = document.createElement('button');
+        link.className = 'chat-resolve-link';
+        link.textContent = 'Mark as resolved, start new';
+        link.onclick = () => {
+            if (confirm('Are you sure you want to mark this conversation as resolved and start fresh?')) {
+                onResolve();
+            }
+        };
+
+        this.resolveBar.appendChild(link);
+
+        // Insert resolveBar right above inputArea
+        this.element.insertBefore(this.resolveBar, this.inputArea);
+    }
+
+    private scrollToBottom() {
+        this.messageContainer.scrollTop = this.messageContainer.scrollHeight;
+    }
+}

package/src/ui/components/FloatingButton.ts

@@ -0,0 +1,163 @@
+
+import { icons } from '../styles';
+
+export class FloatingButton {
+    private element: HTMLButtonElement;
+    private iconContainer: HTMLElement;
+
+    private posX = 0;
+    private posY = 0;
+    private isDragging = false;
+    private startX = 0;
+    private startY = 0;
+    private currentX = 0;
+    private currentY = 0;
+    private hasMoved = false;
+
+    constructor(
+        private onClick: () => void,
+        private onMove?: (x: number, y: number) => void,
+        private onMoveEnd?: (x: number, y: number) => void,
+        initialIcon: string = icons.chat
+    ) {
+        this.element = document.createElement('button');
+        this.element.className = 'widget-fab';
+        
+        this.element.onpointerdown = this.dragStart.bind(this);
+        
+        this.iconContainer = document.createElement('div');
+        this.iconContainer.style.cssText = 'display:flex; align-items:center; justify-content:center; width:100%; height:100%;';
+        this.iconContainer.innerHTML = initialIcon;
+
+        this.element.appendChild(this.iconContainer);
+    }
+
+    private dragStart(e: PointerEvent) {
+        if (e.button !== 0) return; // Only left click
+        
+        const rect = this.element.getBoundingClientRect();
+        this.isDragging = true;
+        this.hasMoved = false;
+        this.startX = e.clientX;
+        this.startY = e.clientY;
+        this.currentX = rect.left;
+        this.currentY = rect.top;
+        
+        this.element.setPointerCapture(e.pointerId);
+        this.element.style.transition = 'none';
+        this.element.style.cursor = 'grabbing';
+
+        const onPointerMove = (moveEvent: PointerEvent) => {
+            if (!this.isDragging) return;
+            
+            const dx = moveEvent.clientX - this.startX;
+            const dy = moveEvent.clientY - this.startY;
+
+            if (Math.abs(dx) > 5 || Math.abs(dy) > 5) {
+                this.hasMoved = true;
+            }
+
+            if (this.hasMoved) {
+                this.posX = this.currentX + dx;
+                this.posY = this.currentY + dy;
+
+                // Clamp to viewport
+                this.posX = Math.max(0, Math.min(this.posX, window.innerWidth - this.element.offsetWidth));
+                this.posY = Math.max(0, Math.min(this.posY, window.innerHeight - this.element.offsetHeight));
+
+                this.element.style.left = `${this.posX}px`;
+                this.element.style.top = `${this.posY}px`;
+                this.element.style.right = 'auto';
+                this.element.style.bottom = 'auto';
+
+                this.onMove?.(this.posX, this.posY);
+            }
+        };
+
+        const onPointerUp = (upEvent: PointerEvent) => {
+            this.isDragging = false;
+            if (this.element.hasPointerCapture(upEvent.pointerId)) {
+                this.element.releasePointerCapture(upEvent.pointerId);
+            }
+            this.element.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
+            this.element.style.cursor = 'pointer';
+
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+
+            if (!this.hasMoved) {
+                this.onClick();
+            } else {
+                this.onMoveEnd?.(this.posX, this.posY);
+            }
+        };
+
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+    }
+
+    public getElement(): HTMLButtonElement {
+        return this.element;
+    }
+
+    public setIcon(iconHtml: string) {
+        this.iconContainer.innerHTML = iconHtml;
+    }
+
+    public setPosition(positionStyle: string) {
+        this.element.style.cssText = ''; // Clear previous
+        const styles = positionStyle.split(';').filter(s => s.trim());
+        styles.forEach(s => {
+            const [prop, val] = s.split(':').map(str => str.trim());
+            if (prop && val) (this.element.style as any)[prop] = val;
+        });
+        this.element.style.position = 'fixed';
+        this.element.style.zIndex = '2147483647';
+    }
+
+    public updateCoordinates(x: number, y: number) {
+        this.element.style.left = `${x}px`;
+        this.element.style.top = `${y}px`;
+        this.element.style.right = 'auto';
+        this.element.style.bottom = 'auto';
+    }
+
+    public static get styles() {
+        return `
+      .widget-fab {
+        position: fixed;
+        z-index: 9999;
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: var(--shadow);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        animation: fadeInScale 0.4s ease-out;
+        touch-action: none;
+        padding: 0;
+        margin: 0;
+      }
+
+      .widget-fab:hover {
+        transform: scale(1.05);
+        box-shadow: var(--shadow-lg);
+      }
+
+      .widget-fab:active {
+        transform: scale(0.95);
+      }
+
+      .widget-fab svg {
+        width: 26px;
+        height: 26px;
+        color: white;
+      }
+    `;
+    }
+}