react-native-srschat 0.1.83 → 0.1.85

package/src/layout/window.js

@@ -1,6 +1,17 @@
 import React, { useState, useEffect, useContext, useRef } from 'react';
-import { Text, StyleSheet, View, TextInput, TouchableOpacity, Platform, KeyboardAvoidingView,
-  Keyboard, Animated, Linking, Button } from 'react-native';
+import {
+  Text,
+  StyleSheet,
+  View,
+  TextInput,
+  TouchableOpacity,
+  Platform,
+  KeyboardAvoidingView,
+  Keyboard,
+  Animated,
+  Linking,
+  Button,
+} from 'react-native';
 import { Header } from '../components/header';
 import { AppContext } from '../contexts/AppContext';
 import Ionicons from 'react-native-vector-icons/Ionicons';
@@ -8,21 +19,33 @@ 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 { ProductCard } from '../components/productCard';
 import Markdown from 'react-native-markdown-display';
 import { Feedback } from '../components/feedback';
 import { ProgressCircle } from '../components/progressCircle';
 
 export const ChatWindow = ({ panHandlers }) => {
-  const { handleSend, messages, input, setInput, ghostMessage, handleButtonClick,
-    onProductCardClick, onAddToCartClick, uiConfig, ghostCard, typingIndicator, feedbackOpen, setFeedbackOpen, theme
-   } = useContext(AppContext);
+  const {
+    handleSend,
+    messages,
+    input,
+    setInput,
+    ghostMessage,
+    handleButtonClick,
+    onProductCardClick,
+    onAddToCartClick,
+    uiConfig,
+    ghostCard,
+    typingIndicator,
+    feedbackOpen,
+    setFeedbackOpen,
+    theme,
+  } = useContext(AppContext);
 
   const scrollViewRef = useRef(null);
   const fadeAnim = useRef(new Animated.Value(0.6)).current;
   const [messageCount, setMessageCount] = useState(messages.length);
 
-
   useEffect(() => {
     if (scrollViewRef.current) {
       const timeoutId = setTimeout(() => {
@@ -33,22 +56,46 @@ export const ChatWindow = ({ panHandlers }) => {
 
       return () => clearTimeout(timeoutId);
     }
-  }, []);  
+  }, []);
 
   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 }),
-        ])
+          Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration: 500,
+            useNativeDriver: false,
+          }),
+          Animated.timing(fadeAnim, {
+            toValue: 0.6,
+            duration: 500,
+            useNativeDriver: false,
+          }),
+        ]),
       ).start();
     }
   }, [ghostMessage]);
+  // useEffect(() => {
+  //   if (messages.length === 0) {
+  //     return;
+  //   }
+  //   console.log('=== CHATWINDOW DEBUG ===');
+  //   console.log('Total messages:', messages.length);
+  //   messages.forEach((msg, idx) => {
+  //     if (msg.products && msg.products.length > 0) {
+  //       console.log('  ✅ PRODUCTS FOUND IN MESSAGE', idx);
+  //       console.log('  Products:', msg.products.length, 'items');
+  //       msg.products.forEach((prod, pIdx) => {
+  //         console.log(`    Product ${pIdx}:`, prod);
+  //       });
+  //     }
+  //   });
+  // }, [messages]);
 
-  useWebSocketMessage()
+  useWebSocketMessage();
 
-  const openLink = (url) => {
+  const openLink = url => {
     Linking.openURL(url);
   };
 
@@ -72,27 +119,23 @@ export const ChatWindow = ({ panHandlers }) => {
         extraScrollHeight={200}
         onContentSizeChange={(contentWidth, contentHeight) => {
           const currentLength = messages.length;
- 
+
           if (currentLength > messageCount) {
             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);
+            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
-
+            setMessageCount(currentLength);
           } else if (currentLength < messageCount) {
             setMessageCount(currentLength);
           }
@@ -100,102 +143,196 @@ export const ChatWindow = ({ panHandlers }) => {
         keyboardDismissMode="none"
         bounces={false}
         enableResetScrollToCoords={false}
-        keyboardOpeningTime={0}
-      >
-        {messages.map((msg, i) => (
-          
-          <View key={msg.id || msg.message_id || i} style={styles.messageWrapper}>
-            {msg.type !== "middle" && (
-                <View style={[ styles.messageBubble, msg.type === "user" ? [styles.userMessage, { backgroundColor: theme.userMessage }] : styles.aiMessage,]}>
-
-                  <Markdown style={{ body: { color: msg.type === "user" ? "#ffffff" : "#161616",fontSize: 16, lineHeight: 22, includeFontPadding: false, textAlignVertical: 'center' }}}> 
-                    {typeof msg.text === 'string' ? msg.text : String(msg.text || '')}
+        keyboardOpeningTime={0}>
+        {messages.map((msg, i) => {
+          // Add inline debug logging during render
+          const hasProducts = msg.products && msg.products.length > 0;
 
+          return (
+            <View
+              key={msg.id || msg.message_id || i}
+              style={styles.messageWrapper}>
+              {msg.type !== 'middle' && msg.text && (
+                <View
+                  style={[
+                    styles.messageBubble,
+                    msg.type === 'user'
+                      ? [
+                          styles.userMessage,
+                          { backgroundColor: theme.userMessage },
+                        ]
+                      : styles.aiMessage,
+                  ]}>
+                  <Markdown
+                    style={{
+                      body: {
+                        color: msg.type === 'user' ? '#ffffff' : '#161616',
+                        fontSize: 16,
+                        lineHeight: 22,
+                        includeFontPadding: false,
+                        textAlignVertical: 'center',
+                      },
+                    }}>
+                    {typeof msg.text === 'string'
+                      ? msg.text
+                      : String(msg.text || '')}
                   </Markdown>
-                  {(msg.type == 'ai' && i != 0 && msg.message_id ) && 
-                    <Feedback message={msg} messageId={msg.message_id}/>
-                  }
+                  {msg.type == 'ai' && i != 0 && msg.message_id && (
+                    <Feedback message={msg} messageId={msg.message_id} />
+                  )}
                 </View>
-            )}
-
-            {msg.type == "middle" && (
-              <View style={[styles.middleMessageBubble, styles.middleMessage]}>
-                <Text style={{marginRight: 10, marginTop: 10}} allowFontScaling={false}>
-                  <Ionicons name="sparkles-outline" size={16} color="#161616"/>
-                </Text>
-                <View style={styles.middleMessageText}>
+              )}
 
-                  <Markdown style={{ body: { color: msg.type === "user" ? "#ffffff" : "#161616",fontSize: 16, lineHeight: 22, includeFontPadding: false, textAlignVertical: 'center' }}}> 
-                  {typeof msg.text === 'string' ? msg.text : String(msg.text || '')}
-
-                  </Markdown>
+              {msg.type == 'middle' && (
+                <View
+                  style={[styles.middleMessageBubble, styles.middleMessage]}>
+                  <Text
+                    style={{ marginRight: 10, marginTop: 10 }}
+                    allowFontScaling={false}>
+                    <Ionicons
+                      name="sparkles-outline"
+                      size={16}
+                      color="#161616"
+                    />
+                  </Text>
+                  <View style={styles.middleMessageText}>
+                    <Markdown
+                      style={{
+                        body: {
+                          color: msg.type === 'user' ? '#ffffff' : '#161616',
+                          fontSize: 16,
+                          lineHeight: 22,
+                          includeFontPadding: false,
+                          textAlignVertical: 'center',
+                        },
+                      }}>
+                      {typeof msg.text === 'string'
+                        ? msg.text
+                        : String(msg.text || '')}
+                    </Markdown>
+                  </View>
                 </View>
-              </View>
-            )}
+              )}
 
-            {msg.products && msg.products.length > 0 &&
-              msg.products.map((prod, index) => (
-                <View key={index} style={styles.productCardWrapper}>
-                  <ProductCard prod={prod} messageId={msg.message_id} />
+              {hasProducts && (
+                <View>
+                  {msg.products.map((prod, index) => {
+                    return (
+                      <View key={index} style={styles.productCardWrapper}>
+                        <ProductCard prod={prod} messageId={msg.message_id} />
+                      </View>
+                    );
+                  })}
                 </View>
-            ))}
-            
-            {msg.resource && msg.resource.length > 0 && msg.resource_type == "video" &&
-              <TouchableOpacity style={styles.resourceButton} onPress={() => openLink(msg.resource)}>
-                <Text style={styles.resourceText}>Watch Video</Text>
-                <Ionicons name="link" size={20} color="white" style={styles.icon} />
-              </TouchableOpacity>
-            }
+              )}
 
-            {msg.suggested_questions && Array.isArray(msg.questions) && msg.questions.length > 0 && 
-              msg.questions.map((question, index) => (
-                <TouchableOpacity
-                  key={index}
-                  style={[styles.suggestedQuestionButton, { borderColor: theme.primaryColor }]}
-                  onPress={() => handleButtonClick(question)}
-                >
-                  <Text style={[styles.suggestedQuestionText, { color: theme.primaryColor }]}>{question}</Text>
-                </TouchableOpacity>
-            ))}
+              {msg.resource &&
+                msg.resource.length > 0 &&
+                msg.resource_type == 'video' && (
+                  <TouchableOpacity
+                    style={styles.resourceButton}
+                    onPress={() => openLink(msg.resource)}>
+                    <Text style={styles.resourceText}>Watch Video</Text>
+                    <Ionicons
+                      name="link"
+                      size={20}
+                      color="white"
+                      style={styles.icon}
+                    />
+                  </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>
-            )}
+              {msg.suggested_questions &&
+                Array.isArray(msg.questions) &&
+                msg.questions.length > 0 &&
+                msg.questions.map((question, index) => (
+                  <TouchableOpacity
+                    key={index}
+                    style={[
+                      styles.suggestedQuestionButton,
+                      { borderColor: theme.primaryColor },
+                    ]}
+                    onPress={() => handleButtonClick(question)}>
+                    <Text
+                      style={[
+                        styles.suggestedQuestionText,
+                        { color: theme.primaryColor },
+                      ]}>
+                      {question}
+                    </Text>
+                  </TouchableOpacity>
+                ))}
 
-            {ghostCard && i === messages.length - 1 && (
-              <View style={styles.ghostCardContainer}>
-                <View style={styles.ghostSquare} />
-                <View style={styles.ghostBarsContainer}>
-                  <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 }]} />
+              {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>
-            )}
+              )}
 
-          </View>
-        ))}
+              {ghostCard && i === messages.length - 1 && (
+                <View style={styles.ghostCardContainer}>
+                  <View style={styles.ghostSquare} />
+                  <View style={styles.ghostBarsContainer}>
+                    <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>
+              )}
+            </View>
+          );
+        })}
       </KeyboardAwareScrollView>
 
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         keyboardVerticalOffset={Platform.OS === 'ios' ? 10 : 0}
-        style={{ width: '100%' }}
-      >
-        {uiConfig.testButtons && 
-          <Testing          
-            onProductCardClick={onProductCardClick} 
-            onAddToCartClick={onAddToCartClick} 
+        style={{ width: '100%' }}>
+        {uiConfig.testButtons && (
+          <Testing
+            onProductCardClick={onProductCardClick}
+            onAddToCartClick={onAddToCartClick}
           />
-        }
-        {!typingIndicator ? 
-          <ChatInput/> :
-          <ProgressCircle />
-        }
+        )}
+        {!typingIndicator ? <ChatInput /> : <ProgressCircle />}
       </KeyboardAvoidingView>
     </View>
   );
@@ -217,12 +354,12 @@ const styles = StyleSheet.create({
     padding: 6,
     paddingHorizontal: 16,
     borderRadius: 12,
-    marginBottom: 5
+    marginBottom: 5,
   },
   userMessage: {
     alignSelf: 'flex-end',
-    backgroundColor: "#437D3D", 
-    color: "#ffffff",
+    backgroundColor: '#437D3D',
+    color: '#ffffff',
     borderTopRightRadius: 0,
   },
   aiMessage: {
@@ -234,26 +371,26 @@ const styles = StyleSheet.create({
     marginTop: 5,
   },
   suggestedQuestionButton: {
-    backgroundColor: "white",
+    backgroundColor: 'white',
     borderWidth: 1,
-    borderColor: "#437D3D",
+    borderColor: '#437D3D',
     borderRadius: 18,
     paddingVertical: 10,
     paddingHorizontal: 16,
     marginBottom: 7,
-    alignSelf: "flex-start",
+    alignSelf: 'flex-start',
   },
   suggestedQuestionText: {
-    color: "#437D3D",
+    color: '#437D3D',
     fontSize: 13,
-    textAlign: "left",
+    textAlign: 'left',
     includeFontPadding: false,
-    textAlignVertical: "center",
+    textAlignVertical: 'center',
   },
   ghostMessageContainer: {
     alignSelf: 'flex-start',
     width: '100%',
-    backgroundColor: "#FFFFFF",
+    backgroundColor: '#FFFFFF',
     borderRadius: 10,
     borderTopLeftRadius: 0,
     padding: 14,
@@ -262,76 +399,78 @@ const styles = StyleSheet.create({
   ghostBar: {
     height: 20,
     borderRadius: 10,
-    backgroundColor: "#ebebeb",
+    backgroundColor: '#ebebeb',
     marginVertical: 3,
   },
   ghostBarShort: {
-    width: "50%",
+    width: '50%',
   },
   ghostBarMedium: {
-    width: "75%",
+    width: '75%',
   },
   ghostBarLong: {
-    width: "100%",
+    width: '100%',
   },
   ghostCardContainer: {
-    flexDirection: "row", // Arrange elements in a row
-    alignItems: "center", // Vertically align items
-    width: "100%",
-    backgroundColor: "#FFFFFF",
+    flexDirection: 'row', // Arrange elements in a row
+    alignItems: 'center', // Vertically align items
+    width: '100%',
+    backgroundColor: '#FFFFFF',
     borderRadius: 10,
     borderTopLeftRadius: 0,
     padding: 14,
     marginVertical: 5,
   },
   ghostSquare: {
-    width: "25%", // Takes up 25% of the container
+    width: '25%', // Takes up 25% of the container
     aspectRatio: 1, // Makes it a square
-    backgroundColor: "#ebebeb", // Adjust color if needed
+    backgroundColor: '#ebebeb', // Adjust color if needed
     borderRadius: 8,
   },
   ghostBarsContainer: {
-    width: "75%", // Takes up 75% of the container
+    width: '75%', // Takes up 75% of the container
     paddingLeft: 10, // Adds some spacing from the square
   },
   resourceButton: {
-    flexDirection: 'row', 
-    alignItems: 'center', 
-    backgroundColor: '#367CB6', 
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#367CB6',
     paddingVertical: 10,
     paddingHorizontal: 15,
     marginBottom: 5,
     borderRadius: 5,
-    alignSelf: 'flex-start', 
+    alignSelf: 'flex-start',
   },
   resourceText: {
-      color: 'white', 
-      fontSize: 16,
-      marginRight: 8, 
-      includeFontPadding: false,
-      textAlignVertical: "center",
+    color: 'white',
+    fontSize: 16,
+    marginRight: 8,
+    includeFontPadding: false,
+    textAlignVertical: 'center',
   },
-  middleMessageBubble:{
+  middleMessageBubble: {
     padding: 6,
     paddingHorizontal: 16,
     borderRadius: 12,
     marginBottom: 5,
     flexDirection: 'row',
-    alignItems: 'flex-start'
+    alignItems: 'flex-start',
   },
-  middleMessage:{
-    color: '#161616', 
+  middleMessage: {
+    color: '#161616',
     alignSelf: 'flex-start',
     backgroundColor: '#e7decd', //'#e0f4fc',
     width: '100%',
   },
   middleMessageText: {
     flex: 1,
-    flexShrink: 1
-  }
+    flexShrink: 1,
+  },
 });
 
-{/* <Testing          
-  onProductCardClick={onProductCardClick} 
-  onAddToCartClick={onAddToCartClick} 
-/> */}
+{
+  /* <Testing
+  onProductCardClick={onProductCardClick}
+  onAddToCartClick={onAddToCartClick}
+/> */
+}