@uselingu/react-native-sdk 0.1.0

package/lib/module/components/LinguChat.js

@@ -0,0 +1,277 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * 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';
+/**
+ * Internal component that uses context
+ */
+const LinguChatInner = props => {
+  var _props$showBackButton;
+  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 () => {
+    var _props$onBackPress;
+    setIsOpen(false);
+    await endSession();
+    (_props$onBackPress = props.onBackPress) === null || _props$onBackPress === void 0 || _props$onBackPress.call(props);
+  };
+  const handleSendMessage = async text => {
+    await sendMessage(text);
+  };
+  const getPositionStyle = (position = 'bottom-right') => {
+    const base = {
+      position: 'absolute'
+    };
+    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 === null || config === void 0 ? void 0 : config.widgetPosition) || 'bottom-right';
+  const showBackButton = (_props$showBackButton = props.showBackButton) !== null && _props$showBackButton !== void 0 ? _props$showBackButton : true;
+
+  // Full-page chat view
+  if (isOpen) {
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.fullScreenOverlay
+    }, /*#__PURE__*/React.createElement(SafeAreaView, {
+      style: [styles.fullPageContainer, {
+        backgroundColor: theme.colors.background
+      }]
+    }, showBackButton && /*#__PURE__*/React.createElement(View, {
+      style: [styles.header, {
+        backgroundColor: primaryColor,
+        paddingHorizontal: theme.spacing.lg,
+        paddingVertical: theme.spacing.md
+      }, theme.shadows.md]
+    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: styles.backButton,
+      onPress: handleClose,
+      activeOpacity: 0.7
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.backButtonText
+    }, "\u2190")), /*#__PURE__*/React.createElement(Text, {
+      style: [styles.headerTitle, {
+        fontSize: theme.typography.fontSizes.lg,
+        fontWeight: theme.typography.fontWeights.semibold
+      }]
+    }, (config === null || config === void 0 ? void 0 : config.brandName) || 'Lingu Chat'), /*#__PURE__*/React.createElement(View, {
+      style: styles.headerSpacer
+    })), /*#__PURE__*/React.createElement(NativeChatUI, {
+      config: config,
+      messages: messages,
+      isLoading: isLoading,
+      onSendMessage: handleSendMessage
+    })));
+  }
+
+  // Floating action button
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.fabContainer, getPositionStyle(position)],
+    pointerEvents: "box-none"
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: {
+      transform: [{
+        scale: scaleAnim
+      }]
+    }
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: [styles.fab, {
+      backgroundColor: primaryColor,
+      width: 60,
+      height: 60,
+      borderRadius: 30
+    }, theme.shadows.lg],
+    onPress: handleOpen,
+    activeOpacity: 0.8
+  }, hasUnread && /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.badge, {
+      backgroundColor: theme.colors.badge,
+      transform: [{
+        scale: badgePulse
+      }]
+    }]
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.icon
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.iconBubble
+  })))));
+};
+
+/**
+ * LinguChat - Main exported component
+ * Wraps everything in LinguProvider for standalone state management
+ */
+export const LinguChat = ({
+  onBackPress,
+  showBackButton,
+  autoOpen,
+  position,
+  ...linguConfig
+}) => {
+  return /*#__PURE__*/React.createElement(LinguProvider, _extends({}, linguConfig, {
+    autoOpen: autoOpen
+  }), /*#__PURE__*/React.createElement(LinguChatInner, {
+    onBackPress: onBackPress,
+    showBackButton: showBackButton,
+    autoOpen: autoOpen,
+    position: position
+  }));
+};
+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
+  }
+});
+//# sourceMappingURL=LinguChat.js.map

package/lib/module/components/LinguChat.js.map

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

package/lib/module/components/LinguWebView.js

@@ -0,0 +1,195 @@
+/**
+ * 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 } from 'react-native-webview';
+import { StyleSheet } from 'react-native';
+const LOG_PREFIX = '[LinguWebView]';
+export const LinguWebView = ({
+  config,
+  messages,
+  onSendMessage,
+  onClose
+}) => {
+  const webViewRef = useRef(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 => {
+    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 === null || config === void 0 ? void 0 : 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 === null || config === void 0 ? void 0 : 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 /*#__PURE__*/React.createElement(WebView, {
+    ref: webViewRef,
+    source: {
+      html: generateHTML()
+    },
+    style: styles.webview,
+    onMessage: handleMessage,
+    javaScriptEnabled: true,
+    domStorageEnabled: true,
+    startInLoadingState: true,
+    scalesPageToFit: true,
+    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'
+  }
+});
+//# sourceMappingURL=LinguWebView.js.map

package/lib/module/components/LinguWebView.js.map

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

package/lib/module/components/MessageBubble.js

@@ -0,0 +1,83 @@
+/**
+ * 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';
+export const MessageBubble = ({
+  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 /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.container, isUser ? styles.userContainer : styles.botContainer, {
+      opacity,
+      transform: [{
+        translateY
+      }]
+    }]
+  }, /*#__PURE__*/React.createElement(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
+    }]
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.text, textStyle, {
+      fontSize: theme.typography.fontSizes.base,
+      lineHeight: theme.typography.fontSizes.base * theme.typography.lineHeights.normal
+    }]
+  }, message.text), showTimestamp && /*#__PURE__*/React.createElement(Text, {
+    style: [styles.timestamp, {
+      color: isUser ? theme.colors.gray100 : theme.colors.gray500,
+      fontSize: theme.typography.fontSizes.xs,
+      marginTop: theme.spacing.xs
+    }]
+  }, formatRelativeTime(message.timestamp))));
+};
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 12,
+    flexDirection: 'row'
+  },
+  userContainer: {
+    justifyContent: 'flex-end'
+  },
+  botContainer: {
+    justifyContent: 'flex-start'
+  },
+  bubble: {
+    maxWidth: '75%'
+  },
+  text: {},
+  timestamp: {
+    fontSize: 11
+  }
+});
+//# sourceMappingURL=MessageBubble.js.map

package/lib/module/components/MessageBubble.js.map

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