@vanira/sdk-react-native 0.0.2

package/src/ui/components/FloatingWelcomeChips.ts

@@ -0,0 +1,137 @@
+
+export interface WelcomeChip {
+    title: string;
+    payload?: string;
+}
+
+export class FloatingWelcomeChips {
+    private element: HTMLElement;
+    private chips: WelcomeChip[] = [];
+
+    constructor(
+        private onChipClick: (text: string) => void
+    ) {
+        this.element = document.createElement('div');
+        this.element.className = 'welcome-chips-container';
+    }
+
+    public setChips(chips: WelcomeChip[]) {
+        this.chips = chips;
+        this.render();
+    }
+
+    public getElement(): HTMLElement {
+        return this.element;
+    }
+
+    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;
+        });
+
+        // Offset from FAB
+        if (this.element.style.bottom) {
+            this.element.style.bottom = (parseInt(this.element.style.bottom) + 76) + 'px';
+        } else if (this.element.style.top) {
+            this.element.style.top = (parseInt(this.element.style.top) + 76) + 'px';
+        }
+
+        this.element.style.position = 'fixed';
+        this.element.style.zIndex = '2147483646';
+        this.element.style.alignItems = this.element.style.left ? 'flex-start' : 'flex-end';
+    }
+
+    public updateCoordinates(x: number, y: number, isBottom: boolean = true) {
+        this.element.style.left = `${x}px`;
+        if (isBottom) {
+            // Position ABOVE the fab (fab is around 60px)
+            this.element.style.top = 'auto';
+            this.element.style.bottom = `${window.innerHeight - y + 16}px`;
+        } else {
+            // Position BELOW the fab
+            this.element.style.bottom = 'auto';
+            this.element.style.top = `${y + 76}px`;
+        }
+        this.element.style.right = 'auto';
+    }
+
+    private render() {
+        this.element.innerHTML = '';
+
+        this.chips.forEach((chip, index) => {
+            const btn = document.createElement('button');
+            btn.className = 'welcome-chip-btn';
+            btn.textContent = chip.title;
+            btn.onclick = (e) => {
+                e.stopPropagation();
+                this.onChipClick(chip.title); // Send title as text
+            };
+            // Add staggered delay
+            btn.style.animationDelay = `${index * 0.1}s`;
+            this.element.appendChild(btn);
+        });
+    }
+
+    public static get styles() {
+        return `
+            .welcome-chips-container {
+                position: fixed;
+                z-index: 9998;
+                display: flex;
+                flex-direction: column; /* Stack vertically */
+                align-items: flex-end; /* Align to right (usually) */
+                gap: 12px;
+                pointer-events: none; /* Container passes clicks */
+                /* Max width to prevent huge buttons */
+                max-width: 300px;
+            }
+
+            /* Adjust alignment based on position */
+            /* We might need to know if it's left or right to align flex-start or flex-end 
+               For now, defaulting to flex-end (right) which matches most widgets.
+               TODO: Pass alignment if needed.
+            */
+
+            .welcome-chip-btn {
+                background: white;
+                color: #4f46e5; /* Secondary/Primary color - hardcoded or use var */
+                color: var(--primary);
+                border: 1px solid transparent;
+                padding: 10px 18px;
+                border-radius: 20px;
+                font-family: inherit;
+                font-size: 14px;
+                font-weight: 500;
+                cursor: pointer;
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+                transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
+                pointer-events: auto;
+                opacity: 0;
+                margin-bottom: 4px; /* Tiny spacing */
+                
+                /* Animation */
+                animation: slideUpFade 0.4s ease-out forwards;
+            }
+
+            .welcome-chip-btn:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+                background: #f8fafc;
+            }
+
+            @keyframes slideUpFade {
+                from {
+                    opacity: 0;
+                    transform: translateY(20px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+        `;
+    }
+}

package/src/ui/components/Panel.ts

@@ -0,0 +1,120 @@
+
+import { icons } from '../styles';
+
+export class Panel {
+    private element: HTMLDivElement;
+    private header: HTMLDivElement;
+    private titleElement: HTMLHeadingElement;
+    private contentArea: HTMLDivElement;
+    private maximizeBtn: HTMLButtonElement;
+    private closeBtn: HTMLButtonElement;
+
+    private isMaximized = false;
+
+    constructor(
+        private onClose: () => void,
+        private title: string = 'Assistant'
+    ) {
+        this.element = document.createElement('div');
+        this.element.className = 'widget-panel hidden';
+
+        // Header
+        this.header = document.createElement('div');
+        this.header.className = 'widget-header';
+
+        this.titleElement = document.createElement('h3');
+        this.titleElement.className = 'widget-title';
+        this.titleElement.textContent = this.title;
+        this.header.appendChild(this.titleElement);
+
+        const controls = document.createElement('div');
+        controls.style.display = 'flex';
+        controls.style.alignItems = 'center';
+        controls.style.gap = '8px';
+        controls.style.marginLeft = 'auto';
+
+
+
+        this.maximizeBtn = document.createElement('button');
+        this.maximizeBtn.className = 'close-btn maximize-btn';
+        this.maximizeBtn.innerHTML = icons.maximize2;
+        this.maximizeBtn.onclick = () => this.toggleMaximize();
+
+        this.closeBtn = document.createElement('button');
+        this.closeBtn.className = 'close-btn';
+        this.closeBtn.innerHTML = icons.close;
+        this.closeBtn.onclick = this.onClose;
+
+        controls.appendChild(this.maximizeBtn);
+        controls.appendChild(this.closeBtn);
+
+        this.header.appendChild(controls);
+
+        // Content Area
+        this.contentArea = document.createElement('div');
+        this.contentArea.className = 'widget-body';
+        this.contentArea.style.flex = '1';
+        this.contentArea.style.display = 'flex';
+        this.contentArea.style.flexDirection = 'column';
+        this.contentArea.style.overflow = 'hidden';
+        this.contentArea.style.padding = '0'; // Let children handle padding if needed
+
+        this.element.appendChild(this.header);
+        this.element.appendChild(this.contentArea);
+    }
+
+    public getElement(): HTMLDivElement {
+        return this.element;
+    }
+
+    public setContent(content: HTMLElement) {
+        this.contentArea.innerHTML = '';
+        this.contentArea.appendChild(content);
+    }
+
+    public addToContent(element: HTMLElement) {
+        this.contentArea.appendChild(element);
+    }
+
+    public setTitle(title: string) {
+        this.titleElement.textContent = title;
+    }
+
+    public open(position: { bottom?: string, right?: string, top?: string, left?: string }) {
+        this.element.classList.remove('hidden');
+        this.updatePosition(position);
+    }
+
+    public updatePosition(position: { bottom?: string, right?: string, top?: string, left?: string }) {
+        // Reset positioning first to avoid conflicts (e.g. top vs bottom)
+        this.element.style.top = 'auto';
+        this.element.style.bottom = 'auto';
+        this.element.style.left = 'auto';
+        this.element.style.right = 'auto';
+        
+        Object.assign(this.element.style, position);
+        this.element.style.position = 'fixed';
+        this.element.style.zIndex = '2147483647';
+    }
+
+    public close() {
+        this.element.classList.add('hidden');
+    }
+
+    public toggleMaximize() {
+        this.isMaximized = !this.isMaximized;
+        if (this.isMaximized) {
+            this.element.classList.add('maximized');
+            this.maximizeBtn.innerHTML = icons.minimize2;
+        } else {
+            this.element.classList.remove('maximized');
+            this.maximizeBtn.innerHTML = icons.maximize2;
+        }
+    }
+
+    public static get styles() {
+        return `
+      /* Panel Styles handled in widget.css.ts mostly, specific overrides here */
+    `;
+    }
+}

package/src/ui/components/VoiceOrb.ts

@@ -0,0 +1,79 @@
+import { icons } from '../styles';
+
+export class VoiceOrb {
+    private element: HTMLDivElement;
+    private showSessionSelector = false;
+
+    constructor(private onClick: (behavior: 'continue' | 'new') => void) {
+        this.element = document.createElement('div');
+        this.element.className = 'voice-mode-container';
+
+        // Check if there is an active saved call session in sessionStorage or localStorage
+        const hasSavedSession = typeof window !== 'undefined' && 
+            !!((window.sessionStorage.getItem('vanira_prospect_id') || window.localStorage.getItem('vanira_prospect_id')) &&
+              (window.sessionStorage.getItem('vanira_latest_call_id') || window.localStorage.getItem('vanira_latest_call_id')));
+
+        this.render(hasSavedSession);
+    }
+
+    private render(hasSavedSession: boolean) {
+        this.element.innerHTML = `
+            <div class="central-orb-container">
+                <div class="central-orb idle">
+                    ${icons.voice_orb}
+                </div>
+                <div class="central-orb-glow"></div>
+            </div>
+            <div class="voice-status-text">Tap to speak</div>
+            <div class="voice-status-subtext">Start a conversation</div>
+            
+            <div class="session-selector-container" style="display: none; opacity: 0; transition: opacity 0.3s ease;">
+                <div class="session-option" data-behavior="continue">
+                    <span class="session-title">Continue Discussion</span>
+                    <span class="session-desc">Resume last session</span>
+                </div>
+                <div class="session-option" data-behavior="new">
+                    <span class="session-title">New Inquiry</span>
+                    <span class="session-desc">Begin a new session</span>
+                </div>
+            </div>
+        `;
+
+        const orbContainer = this.element.querySelector('.central-orb-container') as HTMLElement;
+        const selectorContainer = this.element.querySelector('.session-selector-container') as HTMLElement;
+        const statusText = this.element.querySelector('.voice-status-text') as HTMLElement;
+        const subtext = this.element.querySelector('.voice-status-subtext') as HTMLElement;
+
+        if (orbContainer) {
+            orbContainer.onclick = () => {
+                if (hasSavedSession && !this.showSessionSelector) {
+                    this.showSessionSelector = true;
+                    if (statusText) statusText.textContent = 'Select option to begin';
+                    if (subtext) subtext.textContent = 'Choose inquiry type';
+                    if (selectorContainer) {
+                        selectorContainer.style.display = 'flex';
+                        // Trigger reflow
+                        selectorContainer.offsetHeight;
+                        selectorContainer.style.opacity = '1';
+                    }
+                } else {
+                    this.onClick('continue');
+                }
+            };
+        }
+
+        // Setup session behavior interactive selectors
+        const options = this.element.querySelectorAll('.session-option');
+        options.forEach(opt => {
+            opt.addEventListener('click', (e) => {
+                e.stopPropagation(); // Prevent launching call when clicking selection tabs
+                const behavior = opt.getAttribute('data-behavior') as 'continue' | 'new';
+                this.onClick(behavior);
+            });
+        });
+    }
+
+    public getElement(): HTMLDivElement {
+        return this.element;
+    }
+}