@uselingu/react-native-sdk 0.1.0

package/src/index.ts

@@ -0,0 +1,43 @@
+/**
+ * Lingu React Native SDK
+ * Standalone AI chat SDK with native UI and theme support
+ */
+
+// Main components
+export { LinguChat } from './components/LinguChat';
+export { NativeChatUI } from './components/NativeChatUI';
+export { LinguWebView } from './components/LinguWebView';
+export { MessageBubble } from './components/MessageBubble';
+export { TypingIndicator } from './components/TypingIndicator';
+
+// Context and state management
+export { LinguProvider, useLinguContext } from './context';
+
+// Theme system
+export { ThemeProvider, useTheme, createTheme } from './theme';
+export type { Theme, ThemeColors } from './theme';
+
+// Hooks
+export { useLinguChat } from './hooks/useLinguChat';
+
+// Services
+export { LinguAPI } from './services/LinguAPI';
+export { SessionManager } from './services/SessionManager';
+export { StorageManager } from './services/StorageManager';
+
+// Utils
+export * from './utils';
+
+// Types
+export type {
+   LinguConfig,
+   ChatPosition,
+   ThemeMode,
+   Message,
+   MessageSender,
+   WidgetConfig,
+   SessionData,
+   ApiResponse,
+   ChatResponse,
+   SessionResponse,
+} from './types';

package/src/services/LinguAPI.ts

@@ -0,0 +1,214 @@
+/**
+ * Lingu API Client
+ * Handles all communication with the Lingu backend API
+ * Now with comprehensive logging
+ */
+
+import axios, { AxiosInstance, AxiosError } from 'axios';
+import type {
+   WidgetConfig,
+   ChatResponse,
+   ApiResponse,
+} from '../types';
+
+const LOG_PREFIX = '[LinguAPI]';
+
+export class LinguAPI {
+   private client: AxiosInstance;
+   private apiKey: string;
+   private sessionId: string | null = null;
+
+   constructor(apiKey: string, baseURL: string = 'https://api.uselingu.app/api') {
+      console.log(`${LOG_PREFIX} Initializing API client:`, {
+         baseURL,
+         apiKeyPrefix: apiKey.substring(0, 20) + '...',
+      });
+
+      this.apiKey = apiKey;
+      this.client = axios.create({
+         baseURL,
+         headers: {
+            'Content-Type': 'application/json',
+         },
+         timeout: 30000, // 30 seconds
+      });
+
+      // Add request interceptor for logging
+      this.client.interceptors.request.use(
+         (config) => {
+            console.log(`${LOG_PREFIX} → Request:`, {
+               method: config.method?.toUpperCase(),
+               url: config.url,
+               hasData: !!config.data,
+            });
+            return config;
+         },
+         (error) => {
+            console.error(`${LOG_PREFIX} ❌ Request setup failed:`, error);
+            return Promise.reject(error);
+         }
+      );
+
+      // Add response interceptor for error handling and logging
+      this.client.interceptors.response.use(
+         (response) => {
+            console.log(`${LOG_PREFIX} ← Response:`, {
+               status: response.status,
+               url: response.config.url,
+               dataSize: JSON.stringify(response.data).length,
+            });
+            return response;
+         },
+         (error: AxiosError) => {
+            if (error.response) {
+               console.error(`${LOG_PREFIX} ❌ HTTP Error:`, {
+                  status: error.response.status,
+                  statusText: error.response.statusText,
+                  url: error.config?.url,
+                  data: error.response.data,
+               });
+            } else if (error.request) {
+               console.error(`${LOG_PREFIX} ❌ Network Error:`, {
+                  message: error.message,
+                  url: error.config?.url,
+                  baseURL: error.config?.baseURL,
+               });
+            } else {
+               console.error(`${LOG_PREFIX} ❌ Request Error:`, error.message);
+            }
+            return Promise.reject(error);
+         }
+      );
+
+      console.log(`${LOG_PREFIX} ✅ API client initialized successfully`);
+   }
+
+   /**
+    * Get widget configuration from the API
+    */
+   async getConfig(): Promise<WidgetConfig> {
+      console.log(`${LOG_PREFIX} Fetching widget configuration...`);
+
+      try {
+         const startTime = Date.now();
+         const response = await this.client.get<ApiResponse<WidgetConfig>>(
+            '/chatbot-settings/widget/config',
+            {
+               headers: { 'X-API-Key': this.apiKey },
+            }
+         );
+         const duration = Date.now() - startTime;
+
+         console.log(`${LOG_PREFIX} ✅ Config loaded in ${duration}ms:`, {
+            theme: response.data.data.theme,
+            primaryColor: response.data.data.primaryColor,
+            brandName: response.data.data.brandName,
+         });
+
+         return response.data.data;
+      } catch (error) {
+         console.error(`${LOG_PREFIX} ❌ Failed to get config:`, error);
+         throw new Error('Failed to load widget configuration');
+      }
+   }
+
+   /**
+    * Start a new chat session
+    * Note: Backend manages sessions automatically, we just generate a client-side ID
+    */
+   async startSession(): Promise<string> {
+      console.log(`${LOG_PREFIX} Starting new chat session (client-side)...`);
+
+      try {
+         // Generate a unique session ID client-side
+         const sessionId = `session_${Date.now()}_${Math.random().toString(36).substring(7)}`;
+         this.sessionId = sessionId;
+
+         console.log(`${LOG_PREFIX} ✅ Session created:`, sessionId);
+
+         return this.sessionId;
+      } catch (error) {
+         console.error(`${LOG_PREFIX} ❌ Failed to start session:`, error);
+         throw new Error('Failed to start chat session');
+      }
+   }
+
+   /**
+    * Send a message to the AI
+    */
+   async sendMessage(message: string, sessionId: string): Promise<string> {
+      console.log(`${LOG_PREFIX} Sending message:`, {
+         sessionId,
+         messageLength: message.length,
+         preview: message.substring(0, 50) + (message.length > 50 ? '...' : ''),
+      });
+
+      try {
+         const startTime = Date.now();
+         const response = await this.client.post<ApiResponse<ChatResponse>>(
+            '/chat/widget',
+            {
+               apiKey: this.apiKey,
+               message,
+               sessionId,
+            }
+         );
+         const duration = Date.now() - startTime;
+
+         const aiResponse = response.data.data.message;
+         console.log(`${LOG_PREFIX} ✅ AI response received in ${duration}ms:`, {
+            responseLength: aiResponse.length,
+            preview: aiResponse.substring(0, 50) + (aiResponse.length > 50 ? '...' : ''),
+         });
+
+         return aiResponse;
+      } catch (error) {
+         console.error(`${LOG_PREFIX} ❌ Failed to send message:`, error);
+         throw new Error('Failed to send message');
+      }
+   }
+
+   /**
+    * End the current chat session
+    * Note: Backend doesn't have explicit session end, sessions timeout automatically
+    */
+   async endSession(sessionId: string): Promise<void> {
+      console.log(`${LOG_PREFIX} Ending session (client-side only):`, sessionId);
+
+      try {
+         this.sessionId = null;
+         console.log(`${LOG_PREFIX} ✅ Session ended successfully`);
+      } catch (error) {
+         console.error(`${LOG_PREFIX} ⚠️ Failed to end session:`, error);
+         // Don't throw - session will timeout anyway
+      }
+   }
+
+   /**
+    * Send heartbeat to keep session alive
+    */
+   async sendHeartbeat(sessionId: string): Promise<void> {
+      console.log(`${LOG_PREFIX} Sending heartbeat for session:`, sessionId);
+
+      try {
+         // Send special heartbeat message
+         await this.client.post('/chat/widget', {
+            apiKey: this.apiKey,
+            message: '__HEARTBEAT__',
+            sessionId,
+         });
+         console.log(`${LOG_PREFIX} ✅ Heartbeat sent successfully`);
+      } catch (error) {
+         console.error(`${LOG_PREFIX} ⚠️ Heartbeat failed (will retry):`, error);
+         // Don't throw - will retry on next heartbeat
+      }
+   }
+
+   /**
+    * Get the current session ID
+    */
+   getSessionId(): string | null {
+      console.log(`${LOG_PREFIX} Current session ID:`, this.sessionId || 'none');
+      return this.sessionId;
+   }
+}

package/src/services/SessionManager.ts

@@ -0,0 +1,131 @@
+/**
+ * Session Manager
+ * Handles session lifecycle, heartbeat, and cleanup
+ */
+
+import { LinguAPI } from './LinguAPI';
+
+export class SessionManager {
+   private api: LinguAPI;
+   private sessionId: string | null = null;
+   private heartbeatInterval: NodeJS.Timeout | null = null;
+   private heartbeatIntervalMs: number = 30000; // 30 seconds
+
+   private onSessionStart?: (sessionId: string) => void;
+   private onSessionEnd?: (sessionId: string) => void;
+
+   constructor(
+      api: LinguAPI,
+      callbacks?: {
+         onSessionStart?: (sessionId: string) => void;
+         onSessionEnd?: (sessionId: string) => void;
+      }
+   ) {
+      this.api = api;
+      this.onSessionStart = callbacks?.onSessionStart;
+      this.onSessionEnd = callbacks?.onSessionEnd;
+   }
+
+   /**
+    * Start a new session
+    */
+   async start(): Promise<string> {
+      try {
+         // End existing session if any
+         if (this.sessionId) {
+            await this.end();
+         }
+
+         // Start new session
+         this.sessionId = await this.api.startSession();
+
+         // Start heartbeat
+         this.startHeartbeat();
+
+         // Notify callback
+         this.onSessionStart?.(this.sessionId);
+
+         return this.sessionId;
+      } catch (error) {
+         console.error('[SessionManager] Failed to start session:', error);
+         throw error;
+      }
+   }
+
+   /**
+    * End the current session
+    */
+   async end(): Promise<void> {
+      if (!this.sessionId) return;
+
+      try {
+         // Stop heartbeat
+         this.stopHeartbeat();
+
+         // End session on server
+         await this.api.endSession(this.sessionId);
+
+         // Notify callback
+         this.onSessionEnd?.(this.sessionId);
+
+         this.sessionId = null;
+      } catch (error) {
+         console.error('[SessionManager] Failed to end session:', error);
+         // Still clear local session
+         this.sessionId = null;
+      }
+   }
+
+   /**
+    * Start sending heartbeats to keep session alive
+    */
+   private startHeartbeat(): void {
+      if (this.heartbeatInterval) {
+         clearInterval(this.heartbeatInterval);
+      }
+
+      this.heartbeatInterval = setInterval(() => {
+         if (this.sessionId) {
+            this.api.sendHeartbeat(this.sessionId).catch((error) => {
+               console.error('[SessionManager] Heartbeat failed:', error);
+            });
+         }
+      }, this.heartbeatIntervalMs);
+   }
+
+   /**
+    * Stop sending heartbeats
+    */
+   private stopHeartbeat(): void {
+      if (this.heartbeatInterval) {
+         clearInterval(this.heartbeatInterval);
+         this.heartbeatInterval = null;
+      }
+   }
+
+   /**
+    * Get the current session ID
+    */
+   getSessionId(): string | null {
+      return this.sessionId;
+   }
+
+   /**
+    * Check if a session is active
+    */
+   isActive(): boolean {
+      return this.sessionId !== null;
+   }
+
+   /**
+    * Cleanup on unmount
+    */
+   cleanup(): void {
+      this.stopHeartbeat();
+      if (this.sessionId) {
+         // Fire and forget - don't wait for response
+         this.api.endSession(this.sessionId).catch(() => { });
+         this.sessionId = null;
+      }
+   }
+}

package/src/services/StorageManager.ts

@@ -0,0 +1,111 @@
+/**
+ * Storage Manager
+ * Handles message persistence using AsyncStorage
+ */
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import type { Message } from '../types';
+
+const STORAGE_KEY_PREFIX = '@lingu_chat_';
+const MAX_STORED_MESSAGES = 100; // Limit stored messages per session
+
+export class StorageManager {
+   /**
+    * Save messages for a session
+    */
+   static async saveMessages(sessionId: string, messages: Message[]): Promise<void> {
+      try {
+         const key = `${STORAGE_KEY_PREFIX}${sessionId}`;
+         // Keep only the last MAX_STORED_MESSAGES
+         const messagesToStore = messages.slice(-MAX_STORED_MESSAGES);
+         await AsyncStorage.setItem(key, JSON.stringify(messagesToStore));
+      } catch (error) {
+         console.error('[StorageManager] Failed to save messages:', error);
+      }
+   }
+
+   /**
+    * Load messages for a session
+    */
+   static async loadMessages(sessionId: string): Promise<Message[]> {
+      try {
+         const key = `${STORAGE_KEY_PREFIX}${sessionId}`;
+         const data = await AsyncStorage.getItem(key);
+         if (data) {
+            const messages = JSON.parse(data);
+            // Convert timestamp strings back to Date objects
+            return messages.map((msg: any) => ({
+               ...msg,
+               timestamp: new Date(msg.timestamp),
+            }));
+         }
+         return [];
+      } catch (error) {
+         console.error('[StorageManager] Failed to load messages:', error);
+         return [];
+      }
+   }
+
+   /**
+    * Clear messages for a session
+    */
+   static async clearMessages(sessionId: string): Promise<void> {
+      try {
+         const key = `${STORAGE_KEY_PREFIX}${sessionId}`;
+         await AsyncStorage.removeItem(key);
+      } catch (error) {
+         console.error('[StorageManager] Failed to clear messages:', error);
+      }
+   }
+
+   /**
+    * Get all stored session IDs
+    */
+   static async getAllSessionIds(): Promise<string[]> {
+      try {
+         const keys = await AsyncStorage.getAllKeys();
+         return keys
+            .filter((key) => key.startsWith(STORAGE_KEY_PREFIX))
+            .map((key) => key.replace(STORAGE_KEY_PREFIX, ''));
+      } catch (error) {
+         console.error('[StorageManager] Failed to get session IDs:', error);
+         return [];
+      }
+   }
+
+   /**
+    * Save current session ID
+    */
+   static async saveCurrentSessionId(sessionId: string): Promise<void> {
+      try {
+         await AsyncStorage.setItem(`${STORAGE_KEY_PREFIX}current`, sessionId);
+      } catch (error) {
+         console.error('[StorageManager] Failed to save current session ID:', error);
+      }
+   }
+
+   /**
+    * Get current session ID
+    */
+   static async getCurrentSessionId(): Promise<string | null> {
+      try {
+         return await AsyncStorage.getItem(`${STORAGE_KEY_PREFIX}current`);
+      } catch (error) {
+         console.error('[StorageManager] Failed to get current session ID:', error);
+         return null;
+      }
+   }
+
+   /**
+    * Clear all chat data
+    */
+   static async clearAll(): Promise<void> {
+      try {
+         const keys = await AsyncStorage.getAllKeys();
+         const chatKeys = keys.filter((key) => key.startsWith(STORAGE_KEY_PREFIX));
+         await AsyncStorage.multiRemove(chatKeys);
+      } catch (error) {
+         console.error('[StorageManager] Failed to clear all data:', error);
+      }
+   }
+}

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,58 @@
+/**
+ * Theme Provider
+ * Provides theme context to all child components
+ * Theme is derived from backend widget configuration
+ */
+
+import React, { createContext, useContext, useMemo, ReactNode } from 'react';
+import { createTheme, Theme } from './theme';
+import type { WidgetConfig } from '../types';
+
+interface ThemeContextValue {
+   theme: Theme;
+   config: WidgetConfig | null;
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+interface ThemeProviderProps {
+   config: WidgetConfig | null;
+   children: ReactNode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ config, children }) => {
+   const theme = useMemo(() => {
+      if (!config) {
+         // Return default theme if config not loaded yet
+         return createTheme();
+      }
+
+      return createTheme(
+         config.primaryColor,
+         config.backgroundColor,
+         config.textColor,
+         config.theme === 'dark' ? 'dark' : 'light'
+      );
+   }, [config]);
+
+   const value = useMemo(
+      () => ({
+         theme,
+         config,
+      }),
+      [theme, config]
+   );
+
+   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+};
+
+/**
+ * Hook to access theme context
+ */
+export const useTheme = (): ThemeContextValue => {
+   const context = useContext(ThemeContext);
+   if (context === undefined) {
+      throw new Error('useTheme must be used within a ThemeProvider');
+   }
+   return context;
+};

package/src/theme/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Theme exports
+ */
+
+export * from './theme';
+export * from './ThemeProvider';