srs-heritage-chatbot 1.0.0

package/src/layout/window.js

@@ -0,0 +1,476 @@
+import React, { useState, useEffect, useContext, useRef } from 'react';
+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';
+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';
+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 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(() => {
+        if (scrollViewRef.current) {
+          scrollViewRef.current.scrollToEnd({ animated: false });
+        }
+      }, 100);
+
+      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,
+          }),
+        ]),
+      ).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();
+
+  const openLink = url => {
+    Linking.openURL(url);
+  };
+
+  return (
+    <View style={styles.container}>
+      <View>
+        <Header />
+      </View>
+
+      {/* Messages area */}
+      <KeyboardAwareScrollView
+        ref={scrollViewRef}
+        contentContainerStyle={styles.messagesContent}
+        enableOnAndroid
+        enableOnIOS
+        contentInsetAdjustmentBehavior="never"
+        automaticallyAdjustContentInsets={false}
+        contentInset={{ bottom: 0 }}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+        extraScrollHeight={200}
+        onContentSizeChange={(contentWidth, contentHeight) => {
+          const currentLength = messages.length;
+
+          if (currentLength > messageCount) {
+            scrollViewRef.current?.scrollToEnd({ animated: true });
+            setMessageCount(currentLength);
+          } else if (currentLength == messageCount) {
+            const isAnyFeedbackOpen = Object.values(feedbackOpen).some(
+              isOpen => isOpen === true,
+            );
+
+            if (isAnyFeedbackOpen) {
+              // Do nothing, prevent scrolling
+            } else {
+              if (typingIndicator) {
+                scrollViewRef.current?.scrollToEnd({ animated: true });
+              }
+            }
+            setMessageCount(currentLength);
+          } else if (currentLength < messageCount) {
+            setMessageCount(currentLength);
+          }
+        }}
+        keyboardDismissMode="none"
+        bounces={false}
+        enableResetScrollToCoords={false}
+        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} />
+                  )}
+                </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>
+                  </View>
+                </View>
+              )}
+
+              {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>
+                ))}
+
+              {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>
+              )}
+
+              {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}
+          />
+        )}
+        {!typingIndicator ? <ChatInput /> : <ProgressCircle />}
+      </KeyboardAvoidingView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  messagesContent: {
+    padding: 16,
+    justifyContent: 'flex-end',
+    paddingBottom: 300,
+  },
+  messageWrapper: {
+    marginBottom: 0,
+  },
+  messageBubble: {
+    padding: 6,
+    paddingHorizontal: 16,
+    borderRadius: 12,
+    marginBottom: 5,
+  },
+  userMessage: {
+    alignSelf: 'flex-end',
+    backgroundColor: '#437D3D',
+    color: '#ffffff',
+    borderTopRightRadius: 0,
+  },
+  aiMessage: {
+    alignSelf: 'flex-start',
+    backgroundColor: '#FFFFFF',
+    width: '100%',
+  },
+  productCardWrapper: {
+    marginTop: 5,
+  },
+  suggestedQuestionButton: {
+    backgroundColor: 'white',
+    borderWidth: 1,
+    borderColor: '#437D3D',
+    borderRadius: 18,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    marginBottom: 7,
+    alignSelf: 'flex-start',
+  },
+  suggestedQuestionText: {
+    color: '#437D3D',
+    fontSize: 13,
+    textAlign: 'left',
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+  },
+  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%',
+  },
+  ghostCardContainer: {
+    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
+    aspectRatio: 1, // Makes it a square
+    backgroundColor: '#ebebeb', // Adjust color if needed
+    borderRadius: 8,
+  },
+  ghostBarsContainer: {
+    width: '75%', // Takes up 75% of the container
+    paddingLeft: 10, // Adds some spacing from the square
+  },
+  resourceButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#367CB6',
+    paddingVertical: 10,
+    paddingHorizontal: 15,
+    marginBottom: 5,
+    borderRadius: 5,
+    alignSelf: 'flex-start',
+  },
+  resourceText: {
+    color: 'white',
+    fontSize: 16,
+    marginRight: 8,
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+  },
+  middleMessageBubble: {
+    padding: 6,
+    paddingHorizontal: 16,
+    borderRadius: 12,
+    marginBottom: 5,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  middleMessage: {
+    color: '#161616',
+    alignSelf: 'flex-start',
+    backgroundColor: '#e7decd', //'#e0f4fc',
+    width: '100%',
+  },
+  middleMessageText: {
+    flex: 1,
+    flexShrink: 1,
+  },
+});
+
+{
+  /* <Testing
+  onProductCardClick={onProductCardClick}
+  onAddToCartClick={onAddToCartClick}
+/> */
+}