react-native-srschat 0.1.45 → 0.1.47

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/window.js

@@ -15,17 +15,23 @@ import { ProgressCircle } from '../components/progressCircle';
 
 export const ChatWindow = ({ panHandlers }) => {
   const { handleSend, messages, input, setInput, ghostMessage, handleButtonClick,
-    onProductCardClick, onAddToCartClick, uiConfig, ghostCard, typingIndicator
+    onProductCardClick, onAddToCartClick, uiConfig, ghostCard, typingIndicator, feedbackOpen, setFeedbackOpen
    } = useContext(AppContext);
 
   const scrollViewRef = useRef(null);
   const fadeAnim = useRef(new Animated.Value(0.6)).current;
+  const [messageCount, setMessageCount] = useState(0);
+
 
   useEffect(() => {
     if (scrollViewRef.current) {
-      setTimeout(() => {
-        scrollViewRef.current.scrollToEnd({ animated: false });
+      const timeoutId = setTimeout(() => {
+        if (scrollViewRef.current) {
+          scrollViewRef.current.scrollToEnd({ animated: false });
+        }
       }, 100);
+
+      return () => clearTimeout(timeoutId);
     }
   }, []);  
 
@@ -57,19 +63,45 @@ export const ChatWindow = ({ panHandlers }) => {
         ref={scrollViewRef}
         contentContainerStyle={styles.messagesContent}
         enableOnAndroid
+        enableOnIOS
         contentInsetAdjustmentBehavior="never"
         automaticallyAdjustContentInsets={false}
         contentInset={{ bottom: 0 }}
         keyboardShouldPersistTaps="handled"
         showsVerticalScrollIndicator={false}
-        extraScrollHeight={0}
-        onContentSizeChange={() => {
-          scrollViewRef.current?.scrollToEnd({ animated: true });
+        extraScrollHeight={200}
+        onContentSizeChange={(contentWidth, contentHeight) => {
+          const currentLength = messages.length;
+          // console.log("currentLength", currentLength);
+          // console.log("messageCount", messageCount);
+          if (currentLength > messageCount) {
+            // console.log("scrolling to end");
+            scrollViewRef.current?.scrollToEnd({ animated: true });
+            
+            setMessageCount(currentLength);
+          } else if (currentLength == messageCount) {
+            // Check if *any* value in the feedbackOpen object is true
+            const isAnyFeedbackOpen = Object.values(feedbackOpen).some(isOpen => isOpen === true);
+
+            if (isAnyFeedbackOpen) {
+              // console.log("A feedback input is open, not scrolling to end.");
+              // Do nothing, prevent scrolling
+            } else {
+              // console.log("No feedback open, scrolling to end.");
+              if (typingIndicator) {
+              scrollViewRef.current?.scrollToEnd({ animated: true });
+              }
+            }
+            // You might still want to update messageCount regardless
+            setMessageCount(currentLength); // Decide if this should be inside the else or outside the if/else
+
+          } else if (currentLength < messageCount) {
+            setMessageCount(currentLength);
+          }
         }}
         keyboardDismissMode="none"
         bounces={false}
         enableResetScrollToCoords={false}
-        extraHeight={0}
         keyboardOpeningTime={0}
       >
         {messages.map((msg, i) => (
@@ -98,7 +130,7 @@ export const ChatWindow = ({ panHandlers }) => {
             {msg.products && msg.products.length > 0 &&
               msg.products.map((prod, index) => (
                 <View key={index} style={styles.productCardWrapper}>
-                  <ProductCard prod={prod} />
+                  <ProductCard prod={prod} messageId={msg.message_id} />
                 </View>
             ))}
             
@@ -167,6 +199,7 @@ const styles = StyleSheet.create({
   messagesContent: {
     padding: 16,
     justifyContent: 'flex-end',
+    paddingBottom: 300,
   },
   messageWrapper: {
     marginBottom: 0,

package/src/utils/storage.ts

@@ -16,6 +16,7 @@ export interface ChatState {
   messages: ChatMessage[];
   showIcon: boolean;
   toggleChat: boolean;
+  showModal?: string;
 }
 
 // Module-level singleton to cache chat states by token
@@ -35,7 +36,8 @@ export const defaultState: ChatState = {
     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?"
   }],
   showIcon: true,
-  toggleChat: false
+  toggleChat: false,
+  showModal: "Icon"
 };
 
 /**