@uselingu/react-native-sdk 0.1.0

package/src/components/LinguChat.tsx

@@ -0,0 +1,309 @@
+/**
+ * LinguChat Component
+ * Full-page chat interface with back navigation
+ * Now with theme support and improved styling
+ */
+
+import React, { useState, useEffect, useRef } from 'react';
+import {
+   View,
+   TouchableOpacity,
+   StyleSheet,
+   Animated,
+   SafeAreaView,
+   Text,
+} from 'react-native';
+import { NativeChatUI } from './NativeChatUI';
+import { LinguProvider, useLinguContext } from '../context';
+import { useTheme } from '../theme';
+import { scaleIn, pulse } from '../utils/animations';
+import type { LinguConfig, ChatPosition } from '../types';
+
+export interface LinguChatProps extends LinguConfig {
+   onBackPress?: () => void;
+   showBackButton?: boolean;
+   position?: ChatPosition; // UI preference for FAB position
+}
+
+interface LinguChatInnerProps {
+   onBackPress?: () => void;
+   showBackButton?: boolean;
+   autoOpen?: boolean;
+   position?: ChatPosition;
+}
+
+/**
+ * Internal component that uses context
+ */
+const LinguChatInner: React.FC<LinguChatInnerProps> = (props) => {
+   const { theme } = useTheme();
+   const [isOpen, setIsOpen] = useState(props.autoOpen || false);
+   const [hasUnread, setHasUnread] = useState(false);
+   const scaleAnim = useRef(new Animated.Value(0)).current;
+   const badgePulse = useRef(new Animated.Value(1)).current;
+
+   const {
+      messages,
+      isLoading,
+      config,
+      sendMessage,
+      startSession,
+      endSession,
+      isSessionActive,
+   } = useLinguContext();
+
+   // Entrance animation for FAB
+   useEffect(() => {
+      scaleIn(scaleAnim).start();
+   }, []);
+
+   // Pulse animation for unread badge
+   useEffect(() => {
+      if (hasUnread) {
+         pulse(badgePulse).start();
+      } else {
+         badgePulse.setValue(1);
+      }
+   }, [hasUnread]);
+
+   // Auto-open if configured
+   useEffect(() => {
+      if (props.autoOpen && !isSessionActive) {
+         handleOpen();
+      }
+   }, [props.autoOpen]);
+
+   // Mark unread when new message arrives and chat is closed
+   useEffect(() => {
+      if (!isOpen && messages.length > 0) {
+         const lastMessage = messages[messages.length - 1];
+         if (lastMessage.sender === 'bot') {
+            setHasUnread(true);
+         }
+      }
+   }, [messages, isOpen]);
+
+   const handleOpen = async () => {
+      setIsOpen(true);
+      setHasUnread(false);
+
+      if (!isSessionActive) {
+         await startSession();
+      }
+   };
+
+   const handleClose = async () => {
+      setIsOpen(false);
+      await endSession();
+      props.onBackPress?.();
+   };
+
+   const handleSendMessage = async (text: string) => {
+      await sendMessage(text);
+   };
+
+   const getPositionStyle = (position: ChatPosition = 'bottom-right') => {
+      const base = { position: 'absolute' as const };
+      switch (position) {
+         case 'bottom-right':
+            return { ...base, bottom: 20, right: 20 };
+         case 'bottom-left':
+            return { ...base, bottom: 20, left: 20 };
+         case 'top-right':
+            return { ...base, top: 20, right: 20 };
+         case 'top-left':
+            return { ...base, top: 20, left: 20 };
+         default:
+            return { ...base, bottom: 20, right: 20 };
+      }
+   };
+
+   const primaryColor = theme.colors.primary;
+   const position = props.position || config?.widgetPosition || 'bottom-right';
+   const showBackButton = props.showBackButton ?? true;
+
+   // Full-page chat view
+   if (isOpen) {
+      return (
+         <View style={styles.fullScreenOverlay}>
+            <SafeAreaView
+               style={[
+                  styles.fullPageContainer,
+                  { backgroundColor: theme.colors.background },
+               ]}
+            >
+               {/* Header with back button */}
+               {showBackButton && (
+                  <View
+                     style={[
+                        styles.header,
+                        {
+                           backgroundColor: primaryColor,
+                           paddingHorizontal: theme.spacing.lg,
+                           paddingVertical: theme.spacing.md,
+                        },
+                        theme.shadows.md,
+                     ]}
+                  >
+                     <TouchableOpacity
+                        style={styles.backButton}
+                        onPress={handleClose}
+                        activeOpacity={0.7}
+                     >
+                        <Text style={styles.backButtonText}>←</Text>
+                     </TouchableOpacity>
+                     <Text
+                        style={[
+                           styles.headerTitle,
+                           {
+                              fontSize: theme.typography.fontSizes.lg,
+                              fontWeight: theme.typography.fontWeights.semibold,
+                           },
+                        ]}
+                     >
+                        {config?.brandName || 'Lingu Chat'}
+                     </Text>
+                     <View style={styles.headerSpacer} />
+                  </View>
+               )}
+
+               {/* Native Chat UI */}
+               <NativeChatUI
+                  config={config}
+                  messages={messages}
+                  isLoading={isLoading}
+                  onSendMessage={handleSendMessage}
+               />
+            </SafeAreaView>
+         </View>
+      );
+   }
+
+   // Floating action button
+   return (
+      <View style={[styles.fabContainer, getPositionStyle(position)]} pointerEvents="box-none">
+         <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
+            <TouchableOpacity
+               style={[
+                  styles.fab,
+                  {
+                     backgroundColor: primaryColor,
+                     width: 60,
+                     height: 60,
+                     borderRadius: 30,
+                  },
+                  theme.shadows.lg,
+               ]}
+               onPress={handleOpen}
+               activeOpacity={0.8}
+            >
+               {hasUnread && (
+                  <Animated.View
+                     style={[
+                        styles.badge,
+                        {
+                           backgroundColor: theme.colors.badge,
+                           transform: [{ scale: badgePulse }],
+                        },
+                     ]}
+                  />
+               )}
+               <View style={styles.icon}>
+                  {/* Chat icon */}
+                  <View style={styles.iconBubble} />
+               </View>
+            </TouchableOpacity>
+         </Animated.View>
+      </View>
+   );
+};
+
+/**
+ * LinguChat - Main exported component
+ * Wraps everything in LinguProvider for standalone state management
+ */
+export const LinguChat: React.FC<LinguChatProps> = ({
+   onBackPress,
+   showBackButton,
+   autoOpen,
+   position,
+   ...linguConfig
+}) => {
+   return (
+      <LinguProvider {...linguConfig} autoOpen={autoOpen}>
+         <LinguChatInner
+            onBackPress={onBackPress}
+            showBackButton={showBackButton}
+            autoOpen={autoOpen}
+            position={position}
+         />
+      </LinguProvider>
+   );
+};
+
+const styles = StyleSheet.create({
+   fullScreenOverlay: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 10000,
+   },
+   fullPageContainer: {
+      flex: 1,
+   },
+   header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+   },
+   backButton: {
+      width: 40,
+      height: 40,
+      justifyContent: 'center',
+      alignItems: 'center',
+   },
+   backButtonText: {
+      fontSize: 28,
+      color: '#fff',
+      fontWeight: '600',
+   },
+   headerTitle: {
+      color: '#fff',
+      flex: 1,
+      textAlign: 'center',
+   },
+   headerSpacer: {
+      width: 40,
+   },
+   fabContainer: {
+      zIndex: 9999,
+   },
+   fab: {
+      justifyContent: 'center',
+      alignItems: 'center',
+   },
+   badge: {
+      position: 'absolute',
+      top: 8,
+      right: 8,
+      width: 12,
+      height: 12,
+      borderRadius: 6,
+      borderWidth: 2,
+      borderColor: '#fff',
+   },
+   icon: {
+      width: 30,
+      height: 30,
+      justifyContent: 'center',
+      alignItems: 'center',
+   },
+   iconBubble: {
+      width: 24,
+      height: 20,
+      backgroundColor: '#fff',
+      borderRadius: 12,
+   },
+});

package/src/components/LinguWebView.tsx

@@ -0,0 +1,216 @@
+/**
+ * LinguWebView Component
+ * Wraps the existing web widget in a WebView with native bridge
+ * Now with comprehensive logging and message display
+ */
+
+import React, { useRef, useEffect } from 'react';
+import { WebView, WebViewMessageEvent } from 'react-native-webview';
+import { StyleSheet } from 'react-native';
+import type { Message, WidgetConfig } from '../types';
+
+const LOG_PREFIX = '[LinguWebView]';
+
+interface LinguWebViewProps {
+  config: WidgetConfig | null;
+  messages: Message[];
+  onSendMessage: (message: string) => void;
+  onClose: () => void;
+}
+
+export const LinguWebView: React.FC<LinguWebViewProps> = ({
+  config,
+  messages,
+  onSendMessage,
+  onClose,
+}) => {
+  const webViewRef = useRef<WebView>(null);
+
+  console.log(`${LOG_PREFIX} Rendering with ${messages.length} messages`);
+
+  // Inject messages into WebView when they change
+  useEffect(() => {
+    if (webViewRef.current && messages.length > 0) {
+      console.log(`${LOG_PREFIX} Injecting ${messages.length} messages into WebView`);
+      const script = `
+        (function() {
+          const messagesContainer = document.getElementById('messages');
+          if (messagesContainer) {
+            messagesContainer.innerHTML = ${JSON.stringify(
+        messages
+          .map(
+            (msg) => `
+                <div style="margin-bottom: 12px; display: flex; justify-content: ${msg.sender === 'user' ? 'flex-end' : 'flex-start'
+              };">
+                  <div style="
+                    max-width: 70%;
+                    padding: 12px;
+                    border-radius: 12px;
+                    background: ${msg.sender === 'user' ? '#4ade80' : '#f3f4f6'};
+                    color: ${msg.sender === 'user' ? 'white' : 'black'};
+                  ">
+                    ${msg.text}
+                  </div>
+                </div>
+              `
+          )
+          .join('')
+      )};
+            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+            console.log('Messages updated in WebView');
+          }
+        })();
+        true;
+      `;
+      webViewRef.current.injectJavaScript(script);
+    }
+  }, [messages]);
+
+  // Handle messages from WebView
+  const handleMessage = (event: WebViewMessageEvent) => {
+    try {
+      const data = JSON.parse(event.nativeEvent.data);
+      console.log(`${LOG_PREFIX} Received message from WebView:`, data.type);
+
+      switch (data.type) {
+        case 'SEND_MESSAGE':
+          console.log(`${LOG_PREFIX} User sent message:`, data.payload.message);
+          onSendMessage(data.payload.message);
+          break;
+        case 'CLOSE_CHAT':
+          console.log(`${LOG_PREFIX} User closed chat`);
+          onClose();
+          break;
+        case 'WEBVIEW_LOG':
+          console.log(`${LOG_PREFIX} WebView log:`, data.payload);
+          break;
+        default:
+          console.log(`${LOG_PREFIX} Unknown message type:`, data.type);
+      }
+    } catch (error) {
+      console.error(`${LOG_PREFIX} Failed to parse message:`, error);
+    }
+  };
+
+  // Generate HTML for the widget
+  const generateHTML = () => {
+    const configJSON = JSON.stringify(config || {});
+    console.log(`${LOG_PREFIX} Generating HTML with config:`, config?.brandName);
+
+    return `
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+          <style>
+            * {
+              margin: 0;
+              padding: 0;
+              box-sizing: border-box;
+            }
+            body {
+              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+              overflow: hidden;
+            }
+            #widget-container {
+              width: 100vw;
+              height: 100vh;
+              display: flex;
+              flex-direction: column;
+            }
+            #messages {
+              flex: 1;
+              overflow-y: auto;
+              padding: 16px;
+              background: white;
+            }
+            #input-container {
+              padding: 16px;
+              border-top: 1px solid #e5e7eb;
+              background: white;
+            }
+            #message-input {
+              width: 100%;
+              padding: 12px;
+              border: 1px solid #d1d5db;
+              border-radius: 8px;
+              font-size: 16px;
+            }
+          </style>
+        </head>
+        <body>
+          <div id="widget-container">
+            <div id="messages">
+              <div style="text-align: center; color: #9ca3af; padding: 20px;">
+                ${config?.greetingMessage || 'Start chatting...'}
+              </div>
+            </div>
+            <div id="input-container">
+              <input 
+                type="text" 
+                id="message-input"
+                placeholder="Type a message..."
+              />
+            </div>
+          </div>
+          
+          <script>
+            console.log('WebView initialized');
+            
+            // Configuration from native
+            window.linguConfig = ${configJSON};
+            
+            // Bridge to React Native
+            window.sendToNative = function(type, payload) {
+              console.log('Sending to native:', type, payload);
+              window.ReactNativeWebView.postMessage(JSON.stringify({
+                type: type,
+                payload: payload
+              }));
+            };
+            
+            // Log to native
+            window.logToNative = function(message) {
+              window.sendToNative('WEBVIEW_LOG', message);
+            };
+            
+            // Handle input
+            const input = document.getElementById('message-input');
+            input.addEventListener('keypress', function(e) {
+              if (e.key === 'Enter' && input.value.trim()) {
+                console.log('User pressed enter:', input.value);
+                window.sendToNative('SEND_MESSAGE', { message: input.value });
+                input.value = '';
+              }
+            });
+            
+            console.log('Event listeners attached');
+            window.logToNative('WebView ready');
+          </script>
+        </body>
+      </html>
+    `;
+  };
+
+  return (
+    <WebView
+      ref={webViewRef}
+      source={{ html: generateHTML() }}
+      style={styles.webview}
+      onMessage={handleMessage}
+      javaScriptEnabled
+      domStorageEnabled
+      startInLoadingState
+      scalesPageToFit
+      onLoad={() => console.log(`${LOG_PREFIX} WebView loaded`)}
+      onError={(error) => console.error(`${LOG_PREFIX} WebView error:`, error)}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  webview: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+});

package/src/components/MessageBubble.tsx

@@ -0,0 +1,120 @@
+/**
+ * Message Bubble Component
+ * Displays a single message with animations and styling
+ */
+
+import React, { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+import { useTheme } from '../theme';
+import { formatRelativeTime } from '../utils/formatters';
+import { messageEntrance } from '../utils/animations';
+import type { Message } from '../types';
+
+interface MessageBubbleProps {
+   message: Message;
+   showTimestamp?: boolean;
+}
+
+export const MessageBubble: React.FC<MessageBubbleProps> = ({
+   message,
+   showTimestamp = false,
+}) => {
+   const { theme } = useTheme();
+   const isUser = message.sender === 'user';
+
+   // Animation values
+   const translateY = useRef(new Animated.Value(20)).current;
+   const opacity = useRef(new Animated.Value(0)).current;
+
+   useEffect(() => {
+      // Animate message entrance
+      messageEntrance(translateY, opacity, theme.animations.normal).start();
+   }, []);
+
+   const bubbleStyle = isUser
+      ? {
+         backgroundColor: theme.colors.userBubble,
+      }
+      : {
+         backgroundColor: theme.colors.botBubble,
+         ...theme.shadows.sm,
+      };
+
+   const textStyle = {
+      color: isUser ? theme.colors.userText : theme.colors.botText,
+   };
+
+   return (
+      <Animated.View
+         style={[
+            styles.container,
+            isUser ? styles.userContainer : styles.botContainer,
+            {
+               opacity,
+               transform: [{ translateY }],
+            },
+         ]}
+      >
+         <View
+            style={[
+               styles.bubble,
+               bubbleStyle,
+               {
+                  borderRadius: theme.borderRadius.lg,
+                  borderBottomRightRadius: isUser ? theme.borderRadius.sm : theme.borderRadius.lg,
+                  borderBottomLeftRadius: isUser ? theme.borderRadius.lg : theme.borderRadius.sm,
+                  paddingHorizontal: theme.spacing.md,
+                  paddingVertical: theme.spacing.sm + 2,
+               },
+            ]}
+         >
+            <Text
+               style={[
+                  styles.text,
+                  textStyle,
+                  {
+                     fontSize: theme.typography.fontSizes.base,
+                     lineHeight: theme.typography.fontSizes.base * theme.typography.lineHeights.normal,
+                  },
+               ]}
+            >
+               {message.text}
+            </Text>
+            {showTimestamp && (
+               <Text
+                  style={[
+                     styles.timestamp,
+                     {
+                        color: isUser ? theme.colors.gray100 : theme.colors.gray500,
+                        fontSize: theme.typography.fontSizes.xs,
+                        marginTop: theme.spacing.xs,
+                     },
+                  ]}
+               >
+                  {formatRelativeTime(message.timestamp)}
+               </Text>
+            )}
+         </View>
+      </Animated.View>
+   );
+};
+
+const styles = StyleSheet.create({
+   container: {
+      marginBottom: 12,
+      flexDirection: 'row',
+   },
+   userContainer: {
+      justifyContent: 'flex-end',
+   },
+   botContainer: {
+      justifyContent: 'flex-start',
+   },
+   bubble: {
+      maxWidth: '75%',
+   },
+   text: {},
+   timestamp: {
+      fontSize: 11,
+   },
+});