react-native-srschat 0.1.46 → 0.1.48

package/src/contexts/AppContext.js

@@ -29,10 +29,10 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
 
   // Default Messages
   const defaultMessage = [
-    {type: "ai", text: "Hi there 👋 I’m Poseidon, your Heritage Pool+ AI Agent. I can help you during your online visit with Product and Account information. How can I help you today?"}
+    {type: "ai", text: "Hi there 👋 I'm your Heritage Pool+ AI Assistant. I'm here to help you with Product and Account information during your online visit. I'm still learning and growing - the more we interact and the more feedback you share, the better I can assist you. How can I help you today?"}
   ]
   const maintenanceMessage = [
-    { type: "ai", text: "Hi there 👋 I'm Poseidon, your Heritage Pool+ AI Agent. I'm currently undergoing maintenance to improve my services. Thank you for your patience and understanding!",},
+    { type: "ai", text: "Hi there 👋 I'm your Heritage Pool+ AI Agent. I'm currently undergoing maintenance to improve my services. Thank you for your patience and understanding!",},
   ];
 
 
@@ -78,7 +78,12 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
         if (uiConfig.toggleChat === false){
           setShowModal("Icon");
         }else{
-          setShowModal("ChatWindow");
+          if (uiConfig.showWelcome === true || cachedState.showWelcome === true){
+            // console.log("showWelcome", uiConfig.showWelcome, cachedState.showWelcome)
+            setShowModal("Welcome");
+          }else{
+            setShowModal("ChatWindow");
+          }
         }
 
 
@@ -88,7 +93,7 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
     };
     
     init();
-  }, [customerToken, uiConfig.toggleChat]);
+  }, [customerToken, uiConfig.toggleChat, uiConfig.showWelcome]);
 
   // Persist state changes
   useEffect(() => {
@@ -103,7 +108,8 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
         disclaimer,
         startStreaming,
         messages,
-        showModal
+        showModal,
+        showWelcome: uiConfig.showWelcome
       };
       
       await updateChat(customerToken, currentState);
@@ -119,7 +125,8 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
     disclaimer,
     startStreaming,
     messages,
-    showModal
+    showModal,
+    uiConfig.showWelcome
   ]);
 
   useEffect(() => {

package/src/hooks/Stream.js

@@ -163,6 +163,7 @@ export function useWebSocketMessage() {
                                                     is_on_sale: value.is_on_sale ?? false,
                                                     quantity_available: value.quantity_available ?? 0,
                                                     discounts: value.discounts ?? null,
+                                                    min_pack_qty: value.min_pack_qty ?? 0,
                                                 };
                                                 return acc;
                                             }, {})

package/src/layout/ex.js

@@ -1,251 +1,252 @@
-import React, { useState, useEffect, useContext, useRef } from 'react';
-import { Text, StyleSheet, View, TextInput, TouchableOpacity, Platform, KeyboardAvoidingView,
-  Keyboard, Animated, PanResponder, Pressable } from 'react-native';
-import { Header } from '../components/header';
-import { AppContext } from '../contexts/AppContext';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
-import { Testing } from '../components/testing';
-import { ChatInput } from '../components/input';
-import { useWebSocketMessage } from '../hooks/Stream';
-import { ProductCard } from '../components/productCard'
-import Markdown from 'react-native-markdown-display';
-
-export const ChatWindow = () => {
-  const { handleSend, messages, input, setInput, ghostMessage, handleButtonClick, setShowModal } = useContext(AppContext);
-
-  const scrollViewRef = useRef(null);
-  const fadeAnim = useRef(new Animated.Value(0.6)).current;
-  const panY = useRef(new Animated.Value(0)).current;
-  const isDragging = useRef(false);
-
-  useEffect(() => {
-    if (scrollViewRef.current) {
-      setTimeout(() => {
-        scrollViewRef.current.scrollToEnd({ animated: false });
-      }, 100);
-    }
-  }, []);  
-
-  useEffect(() => {
-    if (ghostMessage) {
-      Animated.loop(
-        Animated.sequence([
-          Animated.timing(fadeAnim, { toValue: 1, duration: 500, useNativeDriver: false }),
-          Animated.timing(fadeAnim, { toValue: 0.6, duration: 500, useNativeDriver: false }),
-        ])
-      ).start();
-    }
-  }, [ghostMessage]);
-
-  useWebSocketMessage()
-
-  const headerPanResponder = PanResponder.create({
-    onStartShouldSetPanResponder: () => true,
-    onMoveShouldSetPanResponder: () => true,
-    onPanResponderGrant: () => {
-      isDragging.current = true;
-    },
-    onPanResponderMove: (evt, gestureState) => {
-      if (isDragging.current && gestureState.dy > 0) { // Downward swipe
-        panY.setValue(gestureState.dy);
-      }
-    },
-    onPanResponderRelease: (evt, gestureState) => {
-      if (gestureState.dy > 100) { // Swiped down enough
-        handleClick()
-      } else {
-        Animated.spring(panY, { toValue: 0, useNativeDriver: false }).start();
-      }
-      isDragging.current = false;
-    },
-  });
-
-  const handleClick = () => {
-    if ((uiConfig.showIcon ?? true) !== true) {
-      setShowModal("Off");
-    } else {
-      setShowModal("Icon");
-    }
-  };
+// import React, { useState, useEffect, useContext, useRef } from 'react';
+// import { Text, StyleSheet, View, TextInput, TouchableOpacity, Platform, KeyboardAvoidingView,
+//   Keyboard, Animated, PanResponder, Pressable } from 'react-native';
+// import { Header } from '../components/header';
+// import { AppContext } from '../contexts/AppContext';
+// import Ionicons from 'react-native-vector-icons/Ionicons';
+// import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+// import { Testing } from '../components/testing';
+// import { ChatInput } from '../components/input';
+// import { useWebSocketMessage } from '../hooks/Stream';
+// import { ProductCard } from '../components/productCard'
+// import Markdown from 'react-native-markdown-display';
+
+// export const ChatWindow = () => {
+//   const { handleSend, messages, input, setInput, ghostMessage, handleButtonClick, setShowModal } = useContext(AppContext);
+
+//   const scrollViewRef = useRef(null);
+//   const fadeAnim = useRef(new Animated.Value(0.6)).current;
+//   const panY = useRef(new Animated.Value(0)).current;
+//   const isDragging = useRef(false);
+
+//   useEffect(() => {
+//     if (scrollViewRef.current) {
+//       setTimeout(() => {
+//         scrollViewRef.current.scrollToEnd({ animated: false });
+//       }, 100);
+//     }
+//   }, []);  
+
+//   useEffect(() => {
+//     if (ghostMessage) {
+//       Animated.loop(
+//         Animated.sequence([
+//           Animated.timing(fadeAnim, { toValue: 1, duration: 500, useNativeDriver: false }),
+//           Animated.timing(fadeAnim, { toValue: 0.6, duration: 500, useNativeDriver: false }),
+//         ])
+//       ).start();
+//     }
+//   }, [ghostMessage]);
+
+//   useWebSocketMessage()
+
+//   const headerPanResponder = PanResponder.create({
+//     onStartShouldSetPanResponder: () => true,
+//     onMoveShouldSetPanResponder: () => true,
+//     onPanResponderGrant: () => {
+//       isDragging.current = true;
+//     },
+//     onPanResponderMove: (evt, gestureState) => {
+//       if (isDragging.current && gestureState.dy > 0) { // Downward swipe
+//         panY.setValue(gestureState.dy);
+//       }
+//     },
+//     onPanResponderRelease: (evt, gestureState) => {
+//       if (gestureState.dy > 100) { // Swiped down enough
+//         handleClick()
+//       } else {
+//         Animated.spring(panY, { toValue: 0, useNativeDriver: false }).start();
+//       }
+//       isDragging.current = false;
+//     },
+//   });
+
+//   const handleClick = () => {
+//     if ((uiConfig.showIcon ?? true) !== true) {
+//       setShowModal("Off");
+//     } else {
+//       setShowModal("Icon");
+//     }
+//   };
   
-  return (
-    <View style={styles.overlay}>
-      {/* Click outside chat to close */}
-      <Pressable style={styles.outsideTouchable} onPress={() => handleClick()} />
-
-      <Animated.View style={[styles.container, { transform: [{ translateY: panY }] }]}>
-        {/* Header - Only this section triggers drag-to-close */}
-        <View style={styles.headerContainer} {...headerPanResponder.panHandlers}>
-          <Header />
-        </View>
-
-      {/* Messages area */}
-      <KeyboardAwareScrollView
-        ref={scrollViewRef}
-        contentContainerStyle={styles.messagesContent}
-        enableOnAndroid
-        contentInsetAdjustmentBehavior="never"
-        automaticallyAdjustContentInsets={false}
-        contentInset={{ bottom: 0 }}
-        keyboardShouldPersistTaps="always"
-        showsVerticalScrollIndicator={false}
-        extraScrollHeight={0}
-        onContentSizeChange={() => {
-          scrollViewRef.current?.scrollToEnd({ animated: true });
-        }}
-      >
-        {messages.map((msg, i) => (
+//   return (
+//     <View style={styles.overlay}>
+//       {/* Click outside chat to close */}
+//       <Pressable style={styles.outsideTouchable} onPress={() => handleClick()} />
+
+//       <Animated.View style={[styles.container, { transform: [{ translateY: panY }] }]}>
+//         {/* Header - Only this section triggers drag-to-close */}
+//         <View style={styles.headerContainer} {...headerPanResponder.panHandlers}>
+//           <Header />
+//         </View>
+
+//       {/* Messages area */}
+//       <KeyboardAwareScrollView
+//         ref={scrollViewRef}
+//         contentContainerStyle={styles.messagesContent}
+//         enableOnAndroid
+//         contentInsetAdjustmentBehavior="never"
+//         automaticallyAdjustContentInsets={false}
+//         contentInset={{ bottom: 0 }}
+//         keyboardShouldPersistTaps="always"
+//         showsVerticalScrollIndicator={false}
+//         extraScrollHeight={0}
+//         onContentSizeChange={() => {
+//           scrollViewRef.current?.scrollToEnd({ animated: true });
+//         }}
+//       >
+//         {messages.map((msg, i) => (
           
-          <View key={i} style={styles.messageWrapper}>
-            {msg.type !== "middle" && (
-                <View style={[ styles.messageBubble, msg.type === "user" ? styles.userMessage : styles.aiMessage,]}>
-                  <Markdown style={{ body: { color: msg.type === "user" ? "#ffffff" : "#161616",fontSize: 16, lineHeight: 22 }}}> 
-                    {msg.text}
-                  </Markdown>
-                </View>
-            )}
-
-            {msg.products && msg.products.length > 0 &&
-              msg.products.map((prod, index) => (
-                <View key={index} style={styles.productCardWrapper}>
-                  <ProductCard prod={prod} />
-                </View>
-            ))}
-
-            {msg.suggested_questions && Array.isArray(msg.questions) && msg.questions.map((question, index) => (
-                <TouchableOpacity key={index} style={styles.suggestedQuestionButton}
-                  onPress={() => handleButtonClick(question)}>
-                  <Text style={styles.suggestedQuestionText}>{question}</Text>
-                </TouchableOpacity>
-            ))}
-
-            {ghostMessage && i === messages.length - 1 && (
-              <View style={styles.ghostMessageContainer}>
-                <Animated.View style={[styles.ghostBar, styles.ghostBarShort, { opacity: fadeAnim }]} />
-                <Animated.View style={[styles.ghostBar, styles.ghostBarLong, { opacity: fadeAnim }]} />
-                <Animated.View style={[styles.ghostBar, styles.ghostBarMedium, { opacity: fadeAnim }]} />
-              </View>
-            )}
-          </View>
-        ))}
-      </KeyboardAwareScrollView>
-
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        keyboardVerticalOffset={Platform.OS === 'ios' ? 120 : 60}
-      >
-        <ChatInput/>
-      </KeyboardAvoidingView>
-      </Animated.View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  overlay: {
-    flex: 1,
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-    justifyContent: 'flex-end',
-  },
-  outsideTouchable: {
-    flex: 1, // Takes up the space above the chat, allows clicking to close
-  },
-  container: {
-    flex: 1,
-    backgroundColor: '#f6f6f6',
-    position: 'absolute',
-    zIndex: 1000,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    top: 140,
-    pointerEvents: 'box-none',
-    borderTopWidth: 1,
-    borderTopColor: '#DDD',
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    overflow: 'hidden',
-  },
-  headerContainer: {
-    alignItems: "center",
-    backgroundColor: "#f6f6f6",
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-  },
-  messagesContent: {
-    padding: 16,
-    justifyContent: 'flex-end',
-  },
-  messageWrapper: {
-    marginBottom: 0,
-  },
-  messageBubble: {
-    padding: 6,
-    paddingHorizontal: 16,
-    borderRadius: 12,
-    marginBottom: 5
-  },
-  userMessage: {
-    alignSelf: 'flex-end',
-    backgroundColor: "#003764", 
-    color: "#ffffff"
-  },
-  aiMessage: {
-    alignSelf: 'flex-start',
-    backgroundColor: '#FFFFFF',
-    width: '100%',
-  },
-  productCardWrapper: {
-    marginTop: 5,
-  },
-  suggestedQuestionButton: {
-    backgroundColor: "white",
-    borderWidth: 1,
-    borderColor: "#004687",
-    borderRadius: 18,
-    paddingVertical: 10,
-    paddingHorizontal: 16,
-    marginBottom: 7,
-    alignSelf: "flex-start",
-  },
-  suggestedQuestionText: {
-    color: "#004687",
-    fontSize: 13,
-    textAlign: "left",
-  },
-  ghostMessageContainer: {
-    alignSelf: 'flex-start',
-    width: '100%',
-    backgroundColor: "#FFFFFF",
-    borderRadius: 10,
-    borderTopLeftRadius: 0,
-    padding: 14,
-    marginVertical: 5,
-  },
-  ghostBar: {
-    height: 20,
-    borderRadius: 10,
-    backgroundColor: "#ebebeb",
-    marginVertical: 3,
-  },
-  ghostBarShort: {
-    width: "50%",
-  },
-  ghostBarMedium: {
-    width: "75%",
-  },
-  ghostBarLong: {
-    width: "100%",
-  },
-});
-
-{/* <Testing          
-  onProductCardClick={onProductCardClick} 
-  onAddToCartClick={onAddToCartClick} 
-/> */}
+//           <View key={i} style={styles.messageWrapper}>
+//             {msg.type !== "middle" && (
+//                 <View style={[ styles.messageBubble, msg.type === "user" ? styles.userMessage : styles.aiMessage,]}>
+//                   <Markdown style={{ body: { color: msg.type === "user" ? "#ffffff" : "#161616",fontSize: 16, lineHeight: 22 }}}> 
+//                     {msg.text}
+//                   </Markdown>
+//                 </View>
+//             )}
+
+//             {msg.products && msg.products.length > 0 &&
+//               msg.products.map((prod, index) => (
+//                 <View key={index} style={styles.productCardWrapper}>
+//                   <ProductCard prod={prod} />
+//                 </View>
+//             ))}
+
+//             {msg.suggested_questions && Array.isArray(msg.questions) && msg.questions.map((question, index) => (
+//                 <TouchableOpacity key={index} style={styles.suggestedQuestionButton}
+//                   onPress={() => handleButtonClick(question)}>
+//                   <Text style={styles.suggestedQuestionText}>{question}</Text>
+//                 </TouchableOpacity>
+//             ))}
+
+//             {ghostMessage && i === messages.length - 1 && (
+//               <View style={styles.ghostMessageContainer}>
+//                 <Animated.View style={[styles.ghostBar, styles.ghostBarShort, { opacity: fadeAnim }]} />
+//                 <Animated.View style={[styles.ghostBar, styles.ghostBarLong, { opacity: fadeAnim }]} />
+//                 <Animated.View style={[styles.ghostBar, styles.ghostBarMedium, { opacity: fadeAnim }]} />
+//               </View>
+//             )}
+//           </View>
+//         ))}
+
+//       <KeyboardAvoidingView
+//         behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+//         keyboardVerticalOffset={Platform.OS === 'ios' ? 120 : 60}
+//       >
+//         <ChatInput/>
+//       </KeyboardAvoidingView>
+//       </KeyboardAwareScrollView>
+
+//       </Animated.View>
+//     </View>
+//   );
+// };
+
+// const styles = StyleSheet.create({
+//   overlay: {
+//     flex: 1,
+//     position: 'absolute',
+//     left: 0,
+//     right: 0,
+//     top: 0,
+//     bottom: 0,
+//     backgroundColor: 'rgba(0, 0, 0, 0.3)',
+//     justifyContent: 'flex-end',
+//   },
+//   outsideTouchable: {
+//     flex: 1, // Takes up the space above the chat, allows clicking to close
+//   },
+//   container: {
+//     flex: 1,
+//     backgroundColor: '#f6f6f6',
+//     position: 'absolute',
+//     zIndex: 1000,
+//     left: 0,
+//     right: 0,
+//     bottom: 0,
+//     top: 140,
+//     pointerEvents: 'box-none',
+//     borderTopWidth: 1,
+//     borderTopColor: '#DDD',
+//     borderTopLeftRadius: 16,
+//     borderTopRightRadius: 16,
+//     overflow: 'hidden',
+//   },
+//   headerContainer: {
+//     alignItems: "center",
+//     backgroundColor: "#f6f6f6",
+//     borderTopLeftRadius: 16,
+//     borderTopRightRadius: 16,
+//   },
+//   messagesContent: {
+//     padding: 16,
+//     justifyContent: 'flex-end',
+//   },
+//   messageWrapper: {
+//     marginBottom: 0,
+//   },
+//   messageBubble: {
+//     padding: 6,
+//     paddingHorizontal: 16,
+//     borderRadius: 12,
+//     marginBottom: 5
+//   },
+//   userMessage: {
+//     alignSelf: 'flex-end',
+//     backgroundColor: "#003764", 
+//     color: "#ffffff"
+//   },
+//   aiMessage: {
+//     alignSelf: 'flex-start',
+//     backgroundColor: '#FFFFFF',
+//     width: '100%',
+//   },
+//   productCardWrapper: {
+//     marginTop: 5,
+//   },
+//   suggestedQuestionButton: {
+//     backgroundColor: "white",
+//     borderWidth: 1,
+//     borderColor: "#004687",
+//     borderRadius: 18,
+//     paddingVertical: 10,
+//     paddingHorizontal: 16,
+//     marginBottom: 7,
+//     alignSelf: "flex-start",
+//   },
+//   suggestedQuestionText: {
+//     color: "#004687",
+//     fontSize: 13,
+//     textAlign: "left",
+//   },
+//   ghostMessageContainer: {
+//     alignSelf: 'flex-start',
+//     width: '100%',
+//     backgroundColor: "#FFFFFF",
+//     borderRadius: 10,
+//     borderTopLeftRadius: 0,
+//     padding: 14,
+//     marginVertical: 5,
+//   },
+//   ghostBar: {
+//     height: 20,
+//     borderRadius: 10,
+//     backgroundColor: "#ebebeb",
+//     marginVertical: 3,
+//   },
+//   ghostBarShort: {
+//     width: "50%",
+//   },
+//   ghostBarMedium: {
+//     width: "75%",
+//   },
+//   ghostBarLong: {
+//     width: "100%",
+//   },
+// });
+
+// {/* <Testing          
+//   onProductCardClick={onProductCardClick} 
+//   onAddToCartClick={onAddToCartClick} 
+// /> */}

package/src/layout/icon.js

@@ -20,7 +20,8 @@ export const ChatIcon = () => {
     if (!disclaimer) {
       setShowModal("Form");
     } else {
-      if (messages.length > 1 || maintenance) {
+      if ((messages.length > 1 || maintenance) && !uiConfig.showWelcome) {
+        // console.log("UI Config", uiConfig.showWelcome)
         setShowModal("ChatWindow");
       } else {
         setShowModal("Welcome");

package/src/layout/welcome.js

@@ -8,7 +8,7 @@ import ButtonComponent from '../components/welcomeButton';
 import CloudinaryImage from '../utils/cloudinary';
 
 export const Welcome = ({ panHandlers }) => {
-  const { setShowModal, uiConfig, onProductCardClick, onAddToCartClick } = useContext(AppContext);
+  const { setShowModal, uiConfig, onProductCardClick, onAddToCartClick, data } = useContext(AppContext);
 
   const handleClick = () => {
     if ((uiConfig.showIcon ?? true) !== true) {
@@ -41,18 +41,18 @@ export const Welcome = ({ panHandlers }) => {
           </View>
           
           <View style={styles.blueContainer}>
-            <Text style={styles.welcomeHeader}>Hi 👋</Text>
+            <Text style={styles.welcomeHeader}>Hi {data?.customer_name || ""} 👋</Text>
             <Text style={styles.welcomeBody2}>
-              I'm Poseidon, your Heritage Pool+ AI Agent. I can help you during your online visit with Product and Account information.
+              I’m your Heritage Pool+ AI Agent. I can help you during your online visit with Product and Account information.
             </Text>
             <WelcomeInput />
-            <Text style={styles.textBeta}>Beta version. Poseidon is learning!</Text>
+            <Text style={styles.textBeta}>Beta version. AI Assistant is still learning!</Text>
           </View>
         </View>
 
         {/* Bottom section */}
         <ScrollView style={styles.bottomContainer}>
-          <Text style={styles.welcomeBody}>Suggested Capabilities...</Text>
+          <Text style={styles.welcomeBody}>Suggested Questions...</Text>
           <ButtonComponent />
         </ScrollView>
       </View>