cuoral-ionic 0.0.1

package/src/cuoral.ts

@@ -0,0 +1,208 @@
+import { CuoralBridge } from './bridge';
+import { CuoralRecorder } from './plugin';
+import { CuoralMessageType } from './types';
+import { CuoralModal } from './modal';
+import { Capacitor } from '@capacitor/core';
+
+export interface CuoralOptions {
+  publicKey: string;
+  email?: string;
+  firstName?: string;
+  lastName?: string;
+  debug?: boolean;
+  widgetBaseUrl?: string; // Allow custom widget URL
+  showFloatingButton?: boolean; // Show floating chat button (default: true)
+  useModal?: boolean; // Use modal display mode (default: true)
+}
+
+/**
+ * Main Cuoral class - simple API for users
+ */
+export class Cuoral {
+  private bridge: CuoralBridge;
+  private recorder: CuoralRecorder;
+  private modal?: CuoralModal;
+  private options: CuoralOptions;
+  private static readonly PRODUCTION_WIDGET_URL = 'https://js.cuoral.com/mobile.html';
+  private static readonly DEV_WIDGET_URL = 'assets/mobile.html';
+
+  constructor(options: CuoralOptions) {
+    this.options = {
+      showFloatingButton: true,
+      useModal: true,
+      ...options
+    };
+    
+    // Determine widget base URL
+    const baseUrl = options.widgetBaseUrl || Cuoral.PRODUCTION_WIDGET_URL;
+    const params = new URLSearchParams({
+      auto_start: 'true',
+      key: options.publicKey,
+      _t: Date.now().toString(),
+    });
+    
+    if (options.email) params.set('email', options.email);
+    if (options.firstName) params.set('first_name', options.firstName);
+    if (options.lastName) params.set('last_name', options.lastName);
+    
+    const widgetUrl = `${baseUrl}?${params.toString()}`;
+    
+    // Initialize modal if enabled
+    if (this.options.useModal) {
+      this.modal = new CuoralModal(widgetUrl, this.options.showFloatingButton);
+    }
+    
+    // Initialize bridge and recorder
+    this.bridge = new CuoralBridge({
+      widgetUrl,
+      debug: options.debug || false
+    });
+    
+    this.recorder = new CuoralRecorder();
+    
+    // Setup automatic message handlers
+    this.setupMessageHandlers();
+  }
+
+  /**
+   * Initialize Cuoral
+   */
+  public initialize(): void {
+    this.bridge.initialize();
+    
+    // Initialize modal if enabled
+    if (this.modal) {
+      this.modal.initialize();
+    }
+  }
+
+  /**
+   * Open the widget modal
+   */
+  public openModal(): void {
+    if (this.modal) {
+      this.modal.open();
+    }
+  }
+
+  /**
+   * Close the widget modal
+   */
+  public closeModal(): void {
+    if (this.modal) {
+      this.modal.close();
+    }
+  }
+
+  /**
+   * Check if modal is open
+   */
+  public isModalOpen(): boolean {
+    return this.modal?.isModalOpen() || false;
+  }
+
+  /**
+   * Get the widget URL for iframe embedding
+   */
+  public getWidgetUrl(): string {
+    const baseUrl = this.options.widgetBaseUrl || Cuoral.PRODUCTION_WIDGET_URL;
+    const params = new URLSearchParams({
+      auto_start: 'true',
+      key: this.options.publicKey,
+      _t: Date.now().toString(),
+    });
+    
+    if (this.options.email) params.set('email', this.options.email);
+    if (this.options.firstName) params.set('first_name', this.options.firstName);
+    if (this.options.lastName) params.set('last_name', this.options.lastName);
+    
+    return `${baseUrl}?${params.toString()}`;
+  }
+
+  /**
+   * Clean up resources
+   */
+  public destroy(): void {
+    this.bridge.destroy();
+    
+    // Destroy modal if exists
+    if (this.modal) {
+      this.modal.destroy();
+    }
+  }
+
+  /**
+   * Setup automatic message handlers
+   */
+  private setupMessageHandlers(): void {
+    // Handle start recording requests from widget
+    this.bridge.on(CuoralMessageType.START_RECORDING, async () => {
+      const success = await this.recorder.startRecording();
+      if (!success) {
+        // Error already handled by recorder
+      }
+    });
+
+    // Handle stop recording requests from widget
+    this.bridge.on(CuoralMessageType.STOP_RECORDING, async () => {
+      const result = await this.recorder.stopRecording();
+      
+      if (result) {
+        // Convert file path to web-accessible URL
+        const capacitorUrl = result.filePath ? Capacitor.convertFileSrc(result.filePath) : '';
+        
+        try {
+          // Fetch the video blob from the capacitor URL
+          const response = await fetch(capacitorUrl);
+          const videoBlob = await response.blob();
+          
+          // Convert blob to base64 data URL so it can be serialized and transferred cross-origin
+          const reader = new FileReader();
+          reader.onloadend = () => {
+            const base64data = reader.result as string;
+            
+            // Send the base64 data via bridge to CDN widget
+            this.bridge.sendToWidget({
+              type: CuoralMessageType.RECORDING_STOPPED,
+              payload: {
+                videoData: base64data,
+                videoType: 'video/mp4',
+                originalPath: result.filePath,
+                duration: result.duration,
+                timestamp: Date.now()
+              }
+            });
+          };
+          
+          reader.onerror = (error) => {
+            console.error('[Cuoral] Error reading blob:', error);
+            this.bridge.sendToWidget({
+              type: CuoralMessageType.RECORDING_STOPPED,
+              payload: {
+                error: 'Failed to process recording',
+                duration: result.duration,
+                timestamp: Date.now()
+              }
+            });
+          };
+          
+          // Start reading the blob as data URL
+          reader.readAsDataURL(videoBlob);
+          
+        } catch (error) {
+          console.error('[Cuoral] Error processing video file:', error);
+          this.bridge.sendToWidget({
+            type: CuoralMessageType.RECORDING_STOPPED,
+            payload: {
+              error: 'Failed to process recording',
+              duration: result.duration,
+              timestamp: Date.now()
+            }
+          });
+        }
+      } else {
+        console.error('[Cuoral] No result from stopRecording');
+      }
+    });
+  }
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './plugin';
+export * from './bridge';
+export * from './types';
+export * from './cuoral';
+export * from './modal';

package/src/modal.ts

@@ -0,0 +1,257 @@
+/**
+ * Cuoral Modal Manager
+ * Handles full-screen modal display with floating button
+ */
+export class CuoralModal {
+  private modalElement?: HTMLDivElement;
+  private iframeElement?: HTMLIFrameElement;
+  private floatingButton?: HTMLDivElement;
+  private isOpen = false;
+  private widgetUrl: string;
+  private showFloatingButton: boolean;
+
+  constructor(widgetUrl: string, showFloatingButton = true) {
+    this.widgetUrl = widgetUrl;
+    this.showFloatingButton = showFloatingButton;
+  }
+
+  /**
+   * Initialize the modal and floating button
+   */
+  public initialize(): void {
+    if (this.showFloatingButton) {
+      this.createFloatingButton();
+    }
+    this.createModal();
+  }
+
+  /**
+   * Create floating chat button
+   */
+  private createFloatingButton(): void {
+    this.floatingButton = document.createElement('div');
+    this.floatingButton.id = 'cuoral-floating-button';
+    this.floatingButton.innerHTML = `
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2ZM20 16H6L4 18V4H20V16Z" fill="white"/>
+      </svg>
+    `;
+    
+    // Styles
+    Object.assign(this.floatingButton.style, {
+      position: 'fixed',
+      bottom: '20px',
+      right: '20px',
+      width: '56px',
+      height: '56px',
+      borderRadius: '50%',
+      backgroundColor: '#007AFF',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+      boxShadow: '0 4px 12px rgba(0, 122, 255, 0.4)',
+      zIndex: '999999',
+      transition: 'transform 0.2s, box-shadow 0.2s'
+    });
+
+    // Hover effect
+    this.floatingButton.addEventListener('mouseenter', () => {
+      if (this.floatingButton) {
+        this.floatingButton.style.transform = 'scale(1.1)';
+        this.floatingButton.style.boxShadow = '0 6px 16px rgba(0, 122, 255, 0.5)';
+      }
+    });
+
+    this.floatingButton.addEventListener('mouseleave', () => {
+      if (this.floatingButton) {
+        this.floatingButton.style.transform = 'scale(1)';
+        this.floatingButton.style.boxShadow = '0 4px 12px rgba(0, 122, 255, 0.4)';
+      }
+    });
+
+    // Click to open modal
+    this.floatingButton.addEventListener('click', () => {
+      this.open();
+    });
+
+    document.body.appendChild(this.floatingButton);
+  }
+
+  /**
+   * Create modal structure
+   */
+  private createModal(): void {
+    // Modal container
+    this.modalElement = document.createElement('div');
+    this.modalElement.id = 'cuoral-modal';
+    
+    Object.assign(this.modalElement.style, {
+      position: 'fixed',
+      top: '0',
+      left: '0',
+      width: '100%',
+      height: '100%',
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      display: 'none',
+      alignItems: 'center',
+      justifyContent: 'center',
+      zIndex: '1000000',
+      opacity: '0',
+      transition: 'opacity 0.3s ease',
+      padding: '60px 0'
+    });
+
+    // Modal content (with margin)
+    const modalContent = document.createElement('div');
+    Object.assign(modalContent.style, {
+      width: '100%',
+      height: '100%',
+      maxWidth: '100%',
+      maxHeight: '100%',
+      position: 'relative',
+      backgroundColor: 'transparent',
+      display: 'flex',
+      flexDirection: 'column',
+      borderRadius: '12px',
+      overflow: 'hidden'
+    });
+
+    // Close button
+    const closeButton = document.createElement('div');
+    closeButton.innerHTML = `
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M18 6L6 18M6 6L18 18" stroke="white" stroke-width="2" stroke-linecap="round"/>
+      </svg>
+    `;
+    
+    Object.assign(closeButton.style, {
+      position: 'absolute',
+      top: '20px',
+      right: '20px',
+      width: '40px',
+      height: '40px',
+      borderRadius: '50%',
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+      zIndex: '1000001',
+      transition: 'background-color 0.2s'
+    });
+
+    closeButton.addEventListener('mouseenter', () => {
+      closeButton.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
+    });
+
+    closeButton.addEventListener('mouseleave', () => {
+      closeButton.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
+    });
+
+    closeButton.addEventListener('click', () => {
+      this.close();
+    });
+
+    // Iframe
+    this.iframeElement = document.createElement('iframe');
+    this.iframeElement.id = 'cuoral-widget-iframe';
+    this.iframeElement.src = this.widgetUrl;
+    
+    Object.assign(this.iframeElement.style, {
+      width: '100%',
+      height: '100%',
+      border: 'none',
+      backgroundColor: 'white'
+    });
+
+    modalContent.appendChild(closeButton);
+    modalContent.appendChild(this.iframeElement);
+    this.modalElement.appendChild(modalContent);
+
+    // Close on backdrop click
+    this.modalElement.addEventListener('click', (e) => {
+      if (e.target === this.modalElement) {
+        this.close();
+      }
+    });
+
+    document.body.appendChild(this.modalElement);
+  }
+
+  /**
+   * Open the modal
+   */
+  public open(): void {
+    if (this.isOpen || !this.modalElement) return;
+    
+    this.isOpen = true;
+    this.modalElement.style.display = 'flex';
+    
+    // Trigger animation
+    setTimeout(() => {
+      if (this.modalElement) {
+        this.modalElement.style.opacity = '1';
+      }
+    }, 10);
+
+    // Hide floating button when modal is open
+    if (this.floatingButton) {
+      this.floatingButton.style.display = 'none';
+    }
+
+    // Prevent body scroll
+    document.body.style.overflow = 'hidden';
+  }
+
+  /**
+   * Close the modal
+   */
+  public close(): void {
+    if (!this.isOpen || !this.modalElement) return;
+    
+    this.isOpen = false;
+    this.modalElement.style.opacity = '0';
+    
+    setTimeout(() => {
+      if (this.modalElement) {
+        this.modalElement.style.display = 'none';
+      }
+      
+      // Show floating button again
+      if (this.floatingButton) {
+        this.floatingButton.style.display = 'flex';
+      }
+      
+      // Restore body scroll
+      document.body.style.overflow = '';
+    }, 300);
+  }
+
+  /**
+   * Check if modal is open
+   */
+  public isModalOpen(): boolean {
+    return this.isOpen;
+  }
+
+  /**
+   * Destroy modal and floating button
+   */
+  public destroy(): void {
+    if (this.modalElement) {
+      this.modalElement.remove();
+    }
+    if (this.floatingButton) {
+      this.floatingButton.remove();
+    }
+    document.body.style.overflow = '';
+  }
+
+  /**
+   * Get iframe element for communication
+   */
+  public getIframe(): HTMLIFrameElement | undefined {
+    return this.iframeElement;
+  }
+}

package/src/plugin.ts

@@ -0,0 +1,190 @@
+import { registerPlugin } from '@capacitor/core';
+import {
+  CuoralMessageType,
+  RecordingOptions,
+  RecordingState,
+  ScreenshotOptions,
+  ScreenshotData,
+} from './types';
+
+/**
+ * Capacitor Plugin Interface
+ */
+export interface CuoralPluginInterface {
+  /**
+   * Start screen recording
+   */
+  startRecording(options?: RecordingOptions): Promise<{ success: boolean }>;
+
+  /**
+   * Stop screen recording
+   */
+  stopRecording(): Promise<{ success: boolean; filePath?: string; duration?: number }>;
+
+  /**
+   * Get recording state
+   */
+  getRecordingState(): Promise<RecordingState>;
+
+  /**
+   * Take screenshot
+   */
+  takeScreenshot(options?: ScreenshotOptions): Promise<ScreenshotData>;
+
+  /**
+   * Check if recording is supported
+   */
+  isRecordingSupported(): Promise<{ supported: boolean }>;
+
+  /**
+   * Request recording permissions
+   */
+  requestPermissions(): Promise<{ granted: boolean }>;
+}
+
+/**
+ * Register the Capacitor plugin
+ */
+const CuoralPlugin = registerPlugin<CuoralPluginInterface>('CuoralPlugin', {
+  web: () => import('./web').then(m => new m.CuoralPluginWeb()),
+});
+
+export { CuoralPlugin };
+
+/**
+ * High-level API for easier integration
+ */
+export class CuoralRecorder {
+  private isRecording: boolean = false;
+  private recordingStartTime?: number;
+
+  /**
+   * Start recording with automatic permission handling
+   */
+  async startRecording(options?: RecordingOptions): Promise<boolean> {
+    try {
+      // Check if already recording
+      if (this.isRecording) {
+        console.warn('[Cuoral] Already recording');
+        return false;
+      }
+
+      // Check support
+      const { supported } = await CuoralPlugin.isRecordingSupported();
+      if (!supported) {
+        throw new Error('Screen recording is not supported on this device');
+      }
+
+      // Request permissions
+      const { granted } = await CuoralPlugin.requestPermissions();
+      if (!granted) {
+        throw new Error('Recording permissions not granted');
+      }
+
+      // Start recording
+      const result = await CuoralPlugin.startRecording(options);
+      if (result.success) {
+        this.isRecording = true;
+        this.recordingStartTime = Date.now();
+        
+        // Post message to widget
+        this.postMessage({
+          type: CuoralMessageType.RECORDING_STARTED,
+          payload: { timestamp: this.recordingStartTime },
+        });
+      }
+
+      return result.success;
+    } catch (error) {
+      console.error('[Cuoral] Failed to start recording:', error);
+      this.postMessage({
+        type: CuoralMessageType.RECORDING_ERROR,
+        payload: { error: (error as Error).message },
+      });
+      return false;
+    }
+  }
+
+  /**
+   * Stop recording
+   */
+  async stopRecording(): Promise<{ filePath?: string; duration?: number } | null> {
+    try {
+      if (!this.isRecording) {
+        console.warn('[Cuoral] Not recording');
+        return null;
+      }
+
+      const result = await CuoralPlugin.stopRecording();
+      if (result.success) {
+        this.isRecording = false;
+        const duration = this.recordingStartTime 
+          ? Math.floor((Date.now() - this.recordingStartTime) / 1000)
+          : 0;
+
+        // Post message to widget
+        this.postMessage({
+          type: CuoralMessageType.RECORDING_STOPPED,
+          payload: {
+            filePath: result.filePath,
+            duration: result.duration || duration,
+          },
+        });
+
+        return {
+          filePath: result.filePath,
+          duration: result.duration || duration,
+        };
+      }
+
+      return null;
+    } catch (error) {
+      console.error('[Cuoral] Failed to stop recording:', error);
+      this.postMessage({
+        type: CuoralMessageType.RECORDING_ERROR,
+        payload: { error: (error as Error).message },
+      });
+      return null;
+    }
+  }
+
+  /**
+   * Take screenshot
+   */
+  async takeScreenshot(options?: ScreenshotOptions): Promise<ScreenshotData | null> {
+    try {
+      const screenshot = await CuoralPlugin.takeScreenshot(options);
+      
+      // Post message to widget
+      this.postMessage({
+        type: CuoralMessageType.SCREENSHOT_TAKEN,
+        payload: screenshot,
+      });
+
+      return screenshot;
+    } catch (error) {
+      console.error('[Cuoral] Failed to take screenshot:', error);
+      this.postMessage({
+        type: CuoralMessageType.SCREENSHOT_ERROR,
+        payload: { error: (error as Error).message },
+      });
+      return null;
+    }
+  }
+
+  /**
+   * Get current recording state
+   */
+  async getState(): Promise<RecordingState> {
+    return await CuoralPlugin.getRecordingState();
+  }
+
+  /**
+   * Post message to WebView
+   */
+  private postMessage(message: any): void {
+    if (typeof window !== 'undefined' && window.postMessage) {
+      window.postMessage(message, '*');
+    }
+  }
+}