@uselingu/react-native-sdk 0.1.0

package/lib/module/components/NativeChatUI.js

@@ -0,0 +1,184 @@
+/**
+ * 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';
+const LOG_PREFIX = '[NativeChatUI]';
+export const NativeChatUI = ({
+  config,
+  messages,
+  isLoading,
+  onSendMessage
+}) => {
+  const {
+    theme
+  } = useTheme();
+  const [inputText, setInputText] = useState('');
+  const flatListRef = useRef(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(() => {
+        var _flatListRef$current;
+        (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 || _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
+  }) => {
+    return /*#__PURE__*/React.createElement(MessageBubble, {
+      message: item,
+      showTimestamp: false
+    });
+  };
+  const renderEmpty = () => /*#__PURE__*/React.createElement(View, {
+    style: styles.emptyContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.greetingText, {
+      color: theme.colors.gray500,
+      fontSize: theme.typography.fontSizes.base
+    }]
+  }, (config === null || config === void 0 ? void 0 : config.greetingMessage) || 'Hello! How can I help you today?'));
+  const renderFooter = () => {
+    if (isLoading) {
+      return /*#__PURE__*/React.createElement(TypingIndicator, null);
+    }
+    return null;
+  };
+  const charCount = inputText.length;
+  const maxChars = 5000;
+  const showCharCount = charCount > maxChars * 0.8;
+  return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
+    style: [styles.container, {
+      backgroundColor: theme.colors.background
+    }],
+    behavior: Platform.OS === 'ios' ? 'padding' : undefined,
+    keyboardVerticalOffset: Platform.OS === 'ios' ? 90 : 0
+  }, /*#__PURE__*/React.createElement(FlatList, {
+    ref: flatListRef,
+    data: messages,
+    renderItem: renderMessage,
+    keyExtractor: item => item.id,
+    contentContainerStyle: [styles.messagesList, {
+      padding: theme.spacing.lg
+    }],
+    ListEmptyComponent: renderEmpty,
+    ListFooterComponent: renderFooter,
+    showsVerticalScrollIndicator: false
+  }), /*#__PURE__*/React.createElement(View, {
+    style: [styles.inputContainer, {
+      backgroundColor: theme.colors.background,
+      borderTopColor: theme.colors.inputBorder,
+      padding: theme.spacing.lg
+    }]
+  }, /*#__PURE__*/React.createElement(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: true,
+    maxLength: maxChars,
+    onSubmitEditing: handleSend,
+    returnKeyType: "send",
+    blurOnSubmit: false
+  }), /*#__PURE__*/React.createElement(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
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.sendButtonText, {
+      fontSize: theme.typography.fontSizes.base,
+      fontWeight: theme.typography.fontWeights.semibold
+    }]
+  }, "Send"))), showCharCount && /*#__PURE__*/React.createElement(View, {
+    style: [styles.charCountContainer, {
+      paddingHorizontal: theme.spacing.lg
+    }]
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.charCount, {
+      color: charCount >= maxChars ? theme.colors.errorText : theme.colors.gray500,
+      fontSize: theme.typography.fontSizes.xs
+    }]
+  }, charCount, "/", maxChars)));
+};
+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'
+  }
+});
+//# sourceMappingURL=NativeChatUI.js.map

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

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

package/lib/module/components/TypingIndicator.js

@@ -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 = () => {
+  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 /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      backgroundColor: theme.colors.botBubble
+    }]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.dotsContainer
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.dot, {
+      backgroundColor: theme.colors.gray400
+    }, {
+      transform: [{
+        translateY: dot1
+      }]
+    }]
+  }), /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.dot, {
+      backgroundColor: theme.colors.gray400
+    }, {
+      transform: [{
+        translateY: dot2
+      }]
+    }]
+  }), /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.dot, {
+      backgroundColor: theme.colors.gray400
+    }, {
+      transform: [{
+        translateY: dot3
+      }]
+    }]
+  })));
+};
+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
+  }
+});
+//# sourceMappingURL=TypingIndicator.js.map

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

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

package/lib/module/context/LinguProvider.js

@@ -0,0 +1,38 @@
+/**
+ * Lingu SDK Context Provider
+ * Provides standalone state management for the SDK
+ * Completely isolated from host application state
+ */
+
+import React, { createContext, useContext } from 'react';
+import { useLinguChat } from '../hooks/useLinguChat';
+import { ThemeProvider } from '../theme';
+const LinguContext = /*#__PURE__*/createContext(undefined);
+/**
+ * LinguProvider - Wraps the SDK with standalone state management
+ * This ensures the SDK state is completely isolated from the host app
+ */
+export const LinguProvider = ({
+  children,
+  ...linguConfig
+}) => {
+  const chatState = useLinguChat(linguConfig);
+  return /*#__PURE__*/React.createElement(LinguContext.Provider, {
+    value: chatState
+  }, /*#__PURE__*/React.createElement(ThemeProvider, {
+    config: chatState.config
+  }, children));
+};
+
+/**
+ * Hook to access Lingu SDK context
+ * Must be used within a LinguProvider
+ */
+export const useLinguContext = () => {
+  const context = useContext(LinguContext);
+  if (context === undefined) {
+    throw new Error('useLinguContext must be used within a LinguProvider');
+  }
+  return context;
+};
+//# sourceMappingURL=LinguProvider.js.map

package/lib/module/context/LinguProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createContext","useContext","useLinguChat","ThemeProvider","LinguContext","undefined","LinguProvider","children","linguConfig","chatState","createElement","Provider","value","config","useLinguContext","context","Error"],"sources":["LinguProvider.tsx"],"sourcesContent":["/**\n * Lingu SDK Context Provider\n * Provides standalone state management for the SDK\n * Completely isolated from host application state\n */\n\nimport React, { createContext, useContext, ReactNode } from 'react';\nimport { useLinguChat } from '../hooks/useLinguChat';\nimport { ThemeProvider } from '../theme';\nimport type { Message, WidgetConfig, LinguConfig } from '../types';\n\ninterface LinguContextValue {\n   messages: Message[];\n   isLoading: boolean;\n   config: WidgetConfig | null;\n   sendMessage: (text: string) => Promise<void>;\n   startSession: () => Promise<void>;\n   endSession: () => Promise<void>;\n   isSessionActive: boolean;\n   clearHistory: () => Promise<void>;\n}\n\nconst LinguContext = createContext<LinguContextValue | undefined>(undefined);\n\ninterface LinguProviderProps extends LinguConfig {\n   children: ReactNode;\n}\n\n/**\n * LinguProvider - Wraps the SDK with standalone state management\n * This ensures the SDK state is completely isolated from the host app\n */\nexport const LinguProvider: React.FC<LinguProviderProps> = ({ children, ...linguConfig }) => {\n   const chatState = useLinguChat(linguConfig);\n\n   return (\n      <LinguContext.Provider value={chatState}>\n         <ThemeProvider config={chatState.config}>{children}</ThemeProvider>\n      </LinguContext.Provider>\n   );\n};\n\n/**\n * Hook to access Lingu SDK context\n * Must be used within a LinguProvider\n */\nexport const useLinguContext = (): LinguContextValue => {\n   const context = useContext(LinguContext);\n   if (context === undefined) {\n      throw new Error('useLinguContext must be used within a LinguProvider');\n   }\n   return context;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,UAAU,QAAmB,OAAO;AACnE,SAASC,YAAY,QAAQ,uBAAuB;AACpD,SAASC,aAAa,QAAQ,UAAU;AAcxC,MAAMC,YAAY,gBAAGJ,aAAa,CAAgCK,SAAS,CAAC;AAM5E;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAA2C,GAAGA,CAAC;EAAEC,QAAQ;EAAE,GAAGC;AAAY,CAAC,KAAK;EAC1F,MAAMC,SAAS,GAAGP,YAAY,CAACM,WAAW,CAAC;EAE3C,oBACGT,KAAA,CAAAW,aAAA,CAACN,YAAY,CAACO,QAAQ;IAACC,KAAK,EAAEH;EAAU,gBACrCV,KAAA,CAAAW,aAAA,CAACP,aAAa;IAACU,MAAM,EAAEJ,SAAS,CAACI;EAAO,GAAEN,QAAwB,CAC9C,CAAC;AAE9B,CAAC;;AAED;AACA;AACA;AACA;AACA,OAAO,MAAMO,eAAe,GAAGA,CAAA,KAAyB;EACrD,MAAMC,OAAO,GAAGd,UAAU,CAACG,YAAY,CAAC;EACxC,IAAIW,OAAO,KAAKV,SAAS,EAAE;IACxB,MAAM,IAAIW,KAAK,CAAC,qDAAqD,CAAC;EACzE;EACA,OAAOD,OAAO;AACjB,CAAC","ignoreList":[]}

package/lib/module/context/index.js

@@ -0,0 +1,6 @@
+/**
+ * Context exports
+ */
+
+export * from './LinguProvider';
+//# sourceMappingURL=index.js.map

package/lib/module/context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["/**\n * Context exports\n */\n\nexport * from './LinguProvider';\n"],"mappings":"AAAA;AACA;AACA;;AAEA,cAAc,iBAAiB","ignoreList":[]}

package/lib/module/hooks/useLinguChat.js

@@ -0,0 +1,288 @@
+/**
+ * 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';
+const LOG_PREFIX = '[useLinguChat]';
+export const useLinguChat = linguConfig => {
+  var _linguConfig$apiKey;
+  console.log(`${LOG_PREFIX} Initializing hook with config:`, {
+    apiKey: ((_linguConfig$apiKey = linguConfig.apiKey) === null || _linguConfig$apiKey === void 0 ? void 0 : _linguConfig$apiKey.substring(0, 20)) + '...',
+    baseURL: linguConfig.baseURL,
+    autoOpen: linguConfig.autoOpen
+  });
+  const [messages, setMessages] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [config, setConfig] = useState(null);
+  const [isSessionActive, setIsSessionActive] = useState(false);
+  const apiRef = useRef(null);
+  const sessionManagerRef = useRef(null);
+  const currentSessionIdRef = useRef(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 => {
+        var _linguConfig$onSessio;
+        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$onSessio = linguConfig.onSessionStart) === null || _linguConfig$onSessio === void 0 || _linguConfig$onSessio.call(linguConfig, sessionId);
+      },
+      onSessionEnd: async sessionId => {
+        var _linguConfig$onSessio2;
+        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$onSessio2 = linguConfig.onSessionEnd) === null || _linguConfig$onSessio2 === void 0 || _linguConfig$onSessio2.call(linguConfig, sessionId);
+      }
+    });
+    sessionManagerRef.current = sessionManager;
+
+    // Load widget configuration
+    console.log(`${LOG_PREFIX} Fetching widget configuration...`);
+    api.getConfig().then(fetchedConfig => {
+      var _fetchedConfig$greeti;
+      console.log(`${LOG_PREFIX} ✅ Widget config loaded:`, {
+        theme: fetchedConfig.theme,
+        primaryColor: fetchedConfig.primaryColor,
+        brandName: fetchedConfig.brandName,
+        greetingMessage: (_fetchedConfig$greeti = fetchedConfig.greetingMessage) === null || _fetchedConfig$greeti === void 0 ? void 0 : _fetchedConfig$greeti.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 () => {
+      var _sessionManagerRef$cu;
+      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$cu = sessionManagerRef.current) === null || _sessionManagerRef$cu === void 0 || _sessionManagerRef$cu.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 !== null && config !== void 0 && config.greetingMessage && messages.length === 0) {
+        console.log(`${LOG_PREFIX} Adding greeting message`);
+        const greetingMsg = {
+          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 => {
+    var _linguConfig$onMessag;
+    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 = {
+      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$onMessag = linguConfig.onMessageSent) === null || _linguConfig$onMessag === void 0 || _linguConfig$onMessag.call(linguConfig, text);
+
+    // Send to API
+    setIsLoading(true);
+    console.log(`${LOG_PREFIX} Waiting for AI response...`);
+    try {
+      var _linguConfig$onMessag2;
+      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 = {
+        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$onMessag2 = linguConfig.onMessageReceived) === null || _linguConfig$onMessag2 === void 0 || _linguConfig$onMessag2.call(linguConfig, response);
+    } catch (error) {
+      console.error(`${LOG_PREFIX} ❌ Failed to send message:`, error);
+
+      // Add error message
+      const errorMessage = {
+        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
+  };
+};
+//# sourceMappingURL=useLinguChat.js.map