@uselingu/react-native-sdk 0.1.0

package/src/components/NativeChatUI.tsx

@@ -0,0 +1,247 @@
+/**
+ * Native Chat UI Component
+ * Pure React Native implementation without WebView
+ * Now with theme support and enhanced styling
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+import {
+   View,
+   Text,
+   TextInput,
+   TouchableOpacity,
+   FlatList,
+   StyleSheet,
+   KeyboardAvoidingView,
+   Platform,
+} from 'react-native';
+import { useTheme } from '../theme';
+import { MessageBubble } from './MessageBubble';
+import { TypingIndicator } from './TypingIndicator';
+import type { Message, WidgetConfig } from '../types';
+
+const LOG_PREFIX = '[NativeChatUI]';
+
+interface NativeChatUIProps {
+   config: WidgetConfig | null;
+   messages: Message[];
+   isLoading: boolean;
+   onSendMessage: (message: string) => void;
+}
+
+export const NativeChatUI: React.FC<NativeChatUIProps> = ({
+   config,
+   messages,
+   isLoading,
+   onSendMessage,
+}) => {
+   const { theme } = useTheme();
+   const [inputText, setInputText] = useState('');
+   const flatListRef = useRef<FlatList>(null);
+
+   console.log(`${LOG_PREFIX} Rendering with ${messages.length} messages`);
+
+   // Auto-scroll to bottom when new messages arrive
+   useEffect(() => {
+      if (messages.length > 0 && flatListRef.current) {
+         setTimeout(() => {
+            flatListRef.current?.scrollToEnd({ animated: true });
+         }, 100);
+      }
+   }, [messages]);
+
+   const handleSend = () => {
+      if (inputText.trim()) {
+         console.log(`${LOG_PREFIX} Sending message:`, inputText);
+         onSendMessage(inputText.trim());
+         setInputText('');
+      }
+   };
+
+   const renderMessage = ({ item }: { item: Message }) => {
+      return <MessageBubble message={item} showTimestamp={false} />;
+   };
+
+   const renderEmpty = () => (
+      <View style={styles.emptyContainer}>
+         <Text
+            style={[
+               styles.greetingText,
+               {
+                  color: theme.colors.gray500,
+                  fontSize: theme.typography.fontSizes.base,
+               },
+            ]}
+         >
+            {config?.greetingMessage || 'Hello! How can I help you today?'}
+         </Text>
+      </View>
+   );
+
+   const renderFooter = () => {
+      if (isLoading) {
+         return <TypingIndicator />;
+      }
+      return null;
+   };
+
+   const charCount = inputText.length;
+   const maxChars = 5000;
+   const showCharCount = charCount > maxChars * 0.8;
+
+   return (
+      <KeyboardAvoidingView
+         style={[styles.container, { backgroundColor: theme.colors.background }]}
+         behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+         keyboardVerticalOffset={Platform.OS === 'ios' ? 90 : 0}
+      >
+         {/* Messages List */}
+         <FlatList
+            ref={flatListRef}
+            data={messages}
+            renderItem={renderMessage}
+            keyExtractor={(item) => item.id}
+            contentContainerStyle={[
+               styles.messagesList,
+               { padding: theme.spacing.lg },
+            ]}
+            ListEmptyComponent={renderEmpty}
+            ListFooterComponent={renderFooter}
+            showsVerticalScrollIndicator={false}
+         />
+
+         {/* Input Area */}
+         <View
+            style={[
+               styles.inputContainer,
+               {
+                  backgroundColor: theme.colors.background,
+                  borderTopColor: theme.colors.inputBorder,
+                  padding: theme.spacing.lg,
+               },
+            ]}
+         >
+            <TextInput
+               style={[
+                  styles.input,
+                  {
+                     backgroundColor: theme.colors.inputBackground,
+                     borderColor: theme.colors.inputBorder,
+                     color: theme.colors.inputText,
+                     fontSize: theme.typography.fontSizes.base,
+                     borderRadius: theme.borderRadius.xl,
+                     paddingHorizontal: theme.spacing.lg,
+                     paddingVertical: theme.spacing.sm + 2,
+                     marginRight: theme.spacing.sm,
+                  },
+               ]}
+               value={inputText}
+               onChangeText={setInputText}
+               placeholder="Type a message..."
+               placeholderTextColor={theme.colors.gray400}
+               multiline
+               maxLength={maxChars}
+               onSubmitEditing={handleSend}
+               returnKeyType="send"
+               blurOnSubmit={false}
+            />
+            <TouchableOpacity
+               style={[
+                  styles.sendButton,
+                  {
+                     backgroundColor: theme.colors.primary,
+                     borderRadius: theme.borderRadius.xl,
+                     paddingHorizontal: theme.spacing.lg,
+                     paddingVertical: theme.spacing.sm + 2,
+                  },
+                  !inputText.trim() && styles.sendButtonDisabled,
+               ]}
+               onPress={handleSend}
+               disabled={!inputText.trim() || isLoading}
+            >
+               <Text
+                  style={[
+                     styles.sendButtonText,
+                     {
+                        fontSize: theme.typography.fontSizes.base,
+                        fontWeight: theme.typography.fontWeights.semibold,
+                     },
+                  ]}
+               >
+                  Send
+               </Text>
+            </TouchableOpacity>
+         </View>
+
+         {/* Character count */}
+         {showCharCount && (
+            <View
+               style={[
+                  styles.charCountContainer,
+                  { paddingHorizontal: theme.spacing.lg },
+               ]}
+            >
+               <Text
+                  style={[
+                     styles.charCount,
+                     {
+                        color: charCount >= maxChars ? theme.colors.errorText : theme.colors.gray500,
+                        fontSize: theme.typography.fontSizes.xs,
+                     },
+                  ]}
+               >
+                  {charCount}/{maxChars}
+               </Text>
+            </View>
+         )}
+      </KeyboardAvoidingView>
+   );
+};
+
+const styles = StyleSheet.create({
+   container: {
+      flex: 1,
+   },
+   messagesList: {
+      flexGrow: 1,
+   },
+   emptyContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: 32,
+   },
+   greetingText: {
+      textAlign: 'center',
+   },
+   inputContainer: {
+      flexDirection: 'row',
+      borderTopWidth: 1,
+      alignItems: 'flex-end',
+   },
+   input: {
+      flex: 1,
+      minHeight: 40,
+      maxHeight: 100,
+      borderWidth: 1,
+   },
+   sendButton: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      minWidth: 70,
+   },
+   sendButtonDisabled: {
+      opacity: 0.5,
+   },
+   sendButtonText: {
+      color: '#ffffff',
+   },
+   charCountContainer: {
+      position: 'absolute',
+      bottom: 70,
+      right: 0,
+   },
+   charCount: {
+      textAlign: 'right',
+   },
+});

package/src/components/TypingIndicator.tsx

@@ -0,0 +1,84 @@
+/**
+ * Typing Indicator Component
+ * Animated dots to show bot is typing
+ */
+
+import React, { useEffect, useRef } from 'react';
+import { View, Animated, StyleSheet } from 'react-native';
+import { useTheme } from '../theme';
+import { typingDotAnimation } from '../utils/animations';
+
+export const TypingIndicator: React.FC = () => {
+   const { theme } = useTheme();
+
+   const dot1 = useRef(new Animated.Value(0)).current;
+   const dot2 = useRef(new Animated.Value(0)).current;
+   const dot3 = useRef(new Animated.Value(0)).current;
+
+   useEffect(() => {
+      // Start animations with staggered delays
+      const anim1 = typingDotAnimation(dot1, 0);
+      const anim2 = typingDotAnimation(dot2, 150);
+      const anim3 = typingDotAnimation(dot3, 300);
+
+      anim1.start();
+      anim2.start();
+      anim3.start();
+
+      return () => {
+         anim1.stop();
+         anim2.stop();
+         anim3.stop();
+      };
+   }, []);
+
+   return (
+      <View style={[styles.container, { backgroundColor: theme.colors.botBubble }]}>
+         <View style={styles.dotsContainer}>
+            <Animated.View
+               style={[
+                  styles.dot,
+                  { backgroundColor: theme.colors.gray400 },
+                  { transform: [{ translateY: dot1 }] },
+               ]}
+            />
+            <Animated.View
+               style={[
+                  styles.dot,
+                  { backgroundColor: theme.colors.gray400 },
+                  { transform: [{ translateY: dot2 }] },
+               ]}
+            />
+            <Animated.View
+               style={[
+                  styles.dot,
+                  { backgroundColor: theme.colors.gray400 },
+                  { transform: [{ translateY: dot3 }] },
+               ]}
+            />
+         </View>
+      </View>
+   );
+};
+
+const styles = StyleSheet.create({
+   container: {
+      maxWidth: '75%',
+      padding: 12,
+      borderRadius: 16,
+      borderBottomLeftRadius: 4,
+      marginBottom: 12,
+   },
+   dotsContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: 20,
+   },
+   dot: {
+      width: 8,
+      height: 8,
+      borderRadius: 4,
+      marginHorizontal: 3,
+   },
+});

package/src/context/LinguProvider.tsx

@@ -0,0 +1,53 @@
+/**
+ * Lingu SDK Context Provider
+ * Provides standalone state management for the SDK
+ * Completely isolated from host application state
+ */
+
+import React, { createContext, useContext, ReactNode } from 'react';
+import { useLinguChat } from '../hooks/useLinguChat';
+import { ThemeProvider } from '../theme';
+import type { Message, WidgetConfig, LinguConfig } from '../types';
+
+interface LinguContextValue {
+   messages: Message[];
+   isLoading: boolean;
+   config: WidgetConfig | null;
+   sendMessage: (text: string) => Promise<void>;
+   startSession: () => Promise<void>;
+   endSession: () => Promise<void>;
+   isSessionActive: boolean;
+   clearHistory: () => Promise<void>;
+}
+
+const LinguContext = createContext<LinguContextValue | undefined>(undefined);
+
+interface LinguProviderProps extends LinguConfig {
+   children: ReactNode;
+}
+
+/**
+ * LinguProvider - Wraps the SDK with standalone state management
+ * This ensures the SDK state is completely isolated from the host app
+ */
+export const LinguProvider: React.FC<LinguProviderProps> = ({ children, ...linguConfig }) => {
+   const chatState = useLinguChat(linguConfig);
+
+   return (
+      <LinguContext.Provider value={chatState}>
+         <ThemeProvider config={chatState.config}>{children}</ThemeProvider>
+      </LinguContext.Provider>
+   );
+};
+
+/**
+ * Hook to access Lingu SDK context
+ * Must be used within a LinguProvider
+ */
+export const useLinguContext = (): LinguContextValue => {
+   const context = useContext(LinguContext);
+   if (context === undefined) {
+      throw new Error('useLinguContext must be used within a LinguProvider');
+   }
+   return context;
+};

package/src/context/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Context exports
+ */
+
+export * from './LinguProvider';

package/src/hooks/useLinguChat.ts

@@ -0,0 +1,314 @@
+/**
+ * Custom hook for managing Lingu chat state and operations
+ * Now with message persistence and comprehensive logging
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { LinguAPI } from '../services/LinguAPI';
+import { SessionManager } from '../services/SessionManager';
+import { StorageManager } from '../services/StorageManager';
+import type { Message, WidgetConfig, LinguConfig } from '../types';
+
+const LOG_PREFIX = '[useLinguChat]';
+
+interface UseLinguChatReturn {
+   messages: Message[];
+   isLoading: boolean;
+   config: WidgetConfig | null;
+   sendMessage: (text: string) => Promise<void>;
+   startSession: () => Promise<void>;
+   endSession: () => Promise<void>;
+   isSessionActive: boolean;
+   clearHistory: () => Promise<void>;
+}
+
+export const useLinguChat = (linguConfig: LinguConfig): UseLinguChatReturn => {
+   console.log(`${LOG_PREFIX} Initializing hook with config:`, {
+      apiKey: linguConfig.apiKey?.substring(0, 20) + '...',
+      baseURL: linguConfig.baseURL,
+      autoOpen: linguConfig.autoOpen,
+   });
+
+   const [messages, setMessages] = useState<Message[]>([]);
+   const [isLoading, setIsLoading] = useState(false);
+   const [config, setConfig] = useState<WidgetConfig | null>(null);
+   const [isSessionActive, setIsSessionActive] = useState(false);
+
+   const apiRef = useRef<LinguAPI | null>(null);
+   const sessionManagerRef = useRef<SessionManager | null>(null);
+   const currentSessionIdRef = useRef<string | null>(null);
+
+   // Initialize API client and session manager
+   useEffect(() => {
+      console.log(`${LOG_PREFIX} Setting up API client and session manager`);
+
+      const baseURL = linguConfig.baseURL || 'https://api.uselingu.app/api';
+      console.log(`${LOG_PREFIX} API Base URL:`, baseURL);
+
+      const api = new LinguAPI(linguConfig.apiKey, baseURL);
+      apiRef.current = api;
+
+      const sessionManager = new SessionManager(api, {
+         onSessionStart: async (sessionId) => {
+            console.log(`${LOG_PREFIX} ✅ Session started:`, sessionId);
+            currentSessionIdRef.current = sessionId;
+            setIsSessionActive(true);
+
+            // Save session ID
+            await StorageManager.saveCurrentSessionId(sessionId);
+            console.log(`${LOG_PREFIX} Session ID saved to storage`);
+
+            // Try to load previous messages for this session
+            const savedMessages = await StorageManager.loadMessages(sessionId);
+            if (savedMessages.length > 0) {
+               console.log(`${LOG_PREFIX} Loaded ${savedMessages.length} messages from storage`);
+               setMessages(savedMessages);
+            } else {
+               console.log(`${LOG_PREFIX} No previous messages found for this session`);
+            }
+
+            linguConfig.onSessionStart?.(sessionId);
+         },
+         onSessionEnd: async (sessionId) => {
+            console.log(`${LOG_PREFIX} Session ending:`, sessionId);
+
+            // Save messages before ending
+            if (messages.length > 0) {
+               console.log(`${LOG_PREFIX} Saving ${messages.length} messages before session end`);
+               await StorageManager.saveMessages(sessionId, messages);
+            }
+
+            currentSessionIdRef.current = null;
+            setIsSessionActive(false);
+            console.log(`${LOG_PREFIX} ✅ Session ended successfully`);
+            linguConfig.onSessionEnd?.(sessionId);
+         },
+      });
+      sessionManagerRef.current = sessionManager;
+
+      // Load widget configuration
+      console.log(`${LOG_PREFIX} Fetching widget configuration...`);
+      api
+         .getConfig()
+         .then((fetchedConfig) => {
+            console.log(`${LOG_PREFIX} ✅ Widget config loaded:`, {
+               theme: fetchedConfig.theme,
+               primaryColor: fetchedConfig.primaryColor,
+               brandName: fetchedConfig.brandName,
+               greetingMessage: fetchedConfig.greetingMessage?.substring(0, 50),
+            });
+            setConfig(fetchedConfig);
+         })
+         .catch((error) => {
+            console.error(`${LOG_PREFIX} ❌ Failed to load config:`, error);
+         });
+
+      // Try to restore previous session
+      console.log(`${LOG_PREFIX} Attempting to restore previous session...`);
+      restorePreviousSession();
+
+      // Cleanup on unmount
+      return () => {
+         console.log(`${LOG_PREFIX} Component unmounting, cleaning up...`);
+         // Save messages before cleanup
+         if (currentSessionIdRef.current && messages.length > 0) {
+            console.log(`${LOG_PREFIX} Saving messages on unmount`);
+            StorageManager.saveMessages(currentSessionIdRef.current, messages);
+         }
+         sessionManagerRef.current?.cleanup();
+         console.log(`${LOG_PREFIX} Cleanup complete`);
+      };
+   }, [linguConfig.apiKey, linguConfig.baseURL]);
+
+   // Save messages whenever they change
+   useEffect(() => {
+      if (currentSessionIdRef.current && messages.length > 0) {
+         console.log(`${LOG_PREFIX} Auto-saving ${messages.length} messages`);
+         StorageManager.saveMessages(currentSessionIdRef.current, messages);
+      }
+   }, [messages]);
+
+   /**
+    * Try to restore previous session
+    */
+   const restorePreviousSession = async () => {
+      try {
+         const previousSessionId = await StorageManager.getCurrentSessionId();
+         if (previousSessionId) {
+            console.log(`${LOG_PREFIX} Found previous session:`, previousSessionId);
+            const savedMessages = await StorageManager.loadMessages(previousSessionId);
+            if (savedMessages.length > 0) {
+               console.log(`${LOG_PREFIX} ✅ Restored ${savedMessages.length} messages from previous session`);
+               setMessages(savedMessages);
+               currentSessionIdRef.current = previousSessionId;
+            } else {
+               console.log(`${LOG_PREFIX} Previous session had no messages`);
+            }
+         } else {
+            console.log(`${LOG_PREFIX} No previous session found`);
+         }
+      } catch (error) {
+         console.error(`${LOG_PREFIX} ❌ Failed to restore previous session:`, error);
+      }
+   };
+
+   /**
+    * Start a new chat session
+    */
+   const startSession = useCallback(async () => {
+      if (!sessionManagerRef.current) {
+         console.error(`${LOG_PREFIX} ❌ Session manager not initialized`);
+         return;
+      }
+
+      try {
+         console.log(`${LOG_PREFIX} Starting new session...`);
+         await sessionManagerRef.current.start();
+
+         // Add greeting message if configured and no previous messages
+         if (config?.greetingMessage && messages.length === 0) {
+            console.log(`${LOG_PREFIX} Adding greeting message`);
+            const greetingMsg: Message = {
+               id: `greeting-${Date.now()}`,
+               text: config.greetingMessage,
+               sender: 'bot',
+               timestamp: new Date(),
+            };
+            setMessages([greetingMsg]);
+         }
+      } catch (error) {
+         console.error(`${LOG_PREFIX} ❌ Failed to start session:`, error);
+      }
+   }, [config, messages.length]);
+
+   /**
+    * End the current chat session
+    */
+   const endSession = useCallback(async () => {
+      if (!sessionManagerRef.current) {
+         console.error(`${LOG_PREFIX} ❌ Session manager not initialized`);
+         return;
+      }
+
+      try {
+         console.log(`${LOG_PREFIX} Ending session...`);
+         await sessionManagerRef.current.end();
+         // Don't clear messages - they're saved in storage
+         console.log(`${LOG_PREFIX} ✅ Session ended, messages preserved`);
+      } catch (error) {
+         console.error(`${LOG_PREFIX} ❌ Failed to end session:`, error);
+      }
+   }, []);
+
+   /**
+    * Clear chat history
+    */
+   const clearHistory = useCallback(async () => {
+      console.log(`${LOG_PREFIX} Clearing chat history...`);
+      if (currentSessionIdRef.current) {
+         await StorageManager.clearMessages(currentSessionIdRef.current);
+         console.log(`${LOG_PREFIX} ✅ Storage cleared for session:`, currentSessionIdRef.current);
+      }
+      setMessages([]);
+      console.log(`${LOG_PREFIX} ✅ Messages cleared from state`);
+   }, []);
+
+   /**
+    * Send a message to the AI
+    */
+   const sendMessage = useCallback(
+      async (text: string) => {
+         if (!apiRef.current || !sessionManagerRef.current) {
+            console.error(`${LOG_PREFIX} ❌ API or session manager not initialized`);
+            return;
+         }
+
+         const sessionId = sessionManagerRef.current.getSessionId();
+         if (!sessionId) {
+            console.error(`${LOG_PREFIX} ❌ No active session`);
+            return;
+         }
+
+         console.log(`${LOG_PREFIX} Sending message:`, {
+            sessionId,
+            messageLength: text.length,
+            preview: text.substring(0, 50),
+         });
+
+         // Add user message
+         const userMessage: Message = {
+            id: `user-${Date.now()}`,
+            text,
+            sender: 'user',
+            timestamp: new Date(),
+         };
+         setMessages((prev) => {
+            console.log(`${LOG_PREFIX} Adding user message to state (total: ${prev.length + 1})`);
+            return [...prev, userMessage];
+         });
+         linguConfig.onMessageSent?.(text);
+
+         // Send to API
+         setIsLoading(true);
+         console.log(`${LOG_PREFIX} Waiting for AI response...`);
+         try {
+            const startTime = Date.now();
+            const response = await apiRef.current.sendMessage(text, sessionId);
+            const duration = Date.now() - startTime;
+
+            console.log(`${LOG_PREFIX} ✅ Received AI response in ${duration}ms:`, {
+               responseLength: response.length,
+               preview: response.substring(0, 50),
+            });
+
+            // Add bot response
+            const botMessage: Message = {
+               id: `bot-${Date.now()}`,
+               text: response,
+               sender: 'bot',
+               timestamp: new Date(),
+            };
+            setMessages((prev) => {
+               console.log(`${LOG_PREFIX} Adding bot message to state (total: ${prev.length + 1})`);
+               return [...prev, botMessage];
+            });
+            linguConfig.onMessageReceived?.(response);
+         } catch (error) {
+            console.error(`${LOG_PREFIX} ❌ Failed to send message:`, error);
+
+            // Add error message
+            const errorMessage: Message = {
+               id: `error-${Date.now()}`,
+               text: 'Sorry, I encountered an error. Please try again.',
+               sender: 'bot',
+               timestamp: new Date(),
+            };
+            setMessages((prev) => [...prev, errorMessage]);
+            console.log(`${LOG_PREFIX} Added error message to state`);
+         } finally {
+            setIsLoading(false);
+            console.log(`${LOG_PREFIX} Message send complete`);
+         }
+      },
+      [linguConfig]
+   );
+
+   console.log(`${LOG_PREFIX} Current state:`, {
+      messagesCount: messages.length,
+      isLoading,
+      hasConfig: !!config,
+      isSessionActive,
+      currentSessionId: currentSessionIdRef.current,
+   });
+
+   return {
+      messages,
+      isLoading,
+      config,
+      sendMessage,
+      startSession,
+      endSession,
+      isSessionActive,
+      clearHistory,
+   };
+};