react-native-srschat 0.1.13 → 0.1.15

package/src/layout/disclaimer.js

@@ -0,0 +1,187 @@
+import React, { useContext } from "react";
+import { View, Text, ScrollView, StyleSheet, TouchableOpacity } from "react-native";
+import { AppContext } from "../contexts/AppContext";
+import Feather from "react-native-vector-icons/Feather";
+import { Header } from '../components/header';
+import { Testing } from "../components/testing";
+
+export const Disclaimer = ({ panHandlers }) => {
+  const { setShowModal, confirmDisclaimer, uiConfig, onAddToCartClick, onProductCardClick } = useContext(AppContext);
+
+  const sections = [
+    {
+      title: "General Information",
+      details: "The AI agent is an automated system powered by Instalily. It is designed to provide information and assistance based on HeritagePool+ Suppliers and documentation in product brand manuals. While we strive to provide accurate information through the AI agent, we cannot guarantee the accuracy, completeness, or up-to-date nature of the information provided. We recommend that you use responses as a starting point and verify the information in the linked public documentation sources.",
+      icon: "file-text"
+    },
+    {
+      title: "User Responsibility",
+      details: "Users of the AI agent bear sole responsibility for their interactions and reliance on the information provided. It is important to exercise caution and use your discretion while interpreting and acting upon the agent's responses. We cannot be held liable for any actions, losses, or damages resulting from the use of the agent.",
+      icon: "thumbs-up"
+    },
+    {
+      title: "Data Privacy and Security",
+      details: "We prioritize the privacy and security of our users' information. Be aware that agent conversations are recorded and stored for later review and quality monitoring by SRS Distribution and its contractors, including by SRS’ content team to improve results. While SRS and the vendor retain logs of these conversations, this data is not used to train their AI models.",
+      icon: "lock"
+    }
+  ];
+
+  return (
+      <View style={styles.container}>
+        <View {...panHandlers}>
+            <Header />
+        </View>
+        <ScrollView contentContainerStyle={styles.scrollContainer}>
+          <View style={styles.header}>
+            <Text style={styles.welcomeTitle}>Welcome to your AI Agent</Text>
+            <View style={styles.betaTag}>
+              <Text style={styles.betaText}>BETA</Text>
+            </View>
+          </View>
+
+          <Text style={styles.disclaimerText}>
+            The following disclaimer is intended to inform users of the limitations and usage guidelines of the AI agent.
+          </Text>
+          <Text style={styles.disclaimerText}>
+            Please read this disclaimer carefully before engaging with the agent.
+          </Text>
+
+          {sections.map((section, index) => (
+            <Paragraph key={index} title={section.title} details={section.details} icon={section.icon} />
+          ))}
+
+          <Text style={styles.disclaimerText}>
+            Do not share any sensitive or personal information in your conversations.
+          </Text>
+          <Text style={styles.disclaimerText}>
+            By using our AI agent, you indicate your acceptance and understanding of the above disclaimer. If you do not agree with any part of this disclaimer, we recommend refraining from using the agent. For further assistance or inquiries, please contact <Text style={styles.boldText}>srs@instalily.ai</Text>.
+          </Text>
+        </ScrollView>
+        {uiConfig.testButtons && 
+            <Testing onProductCardClick={onProductCardClick} onAddToCartClick={onAddToCartClick} />
+        }
+        <View style={styles.confirmArea}>
+            <TouchableOpacity style={styles.button} onPress={confirmDisclaimer}>
+                <Text style={styles.buttonText}>Confirm</Text>
+            </TouchableOpacity>
+            <Text style={styles.confirmText}>
+                By clicking the "Confirm" button above, you understand and confirm that your use of Heritage Pool+ AI Agent is subject to our current Terms of Service and Privacy Policy, and you confirm your understanding of the above.
+            </Text>
+        </View>
+      </View>
+  );
+};
+
+const Paragraph = ({ title, details, icon }) => {
+  return (
+    <View style={styles.sectionContainer}>
+      <View style={styles.iconContainer}>
+        <Feather name={icon} size={18} color="#1976d2" />
+      </View>
+      <View style={styles.textContainer}>
+        <Text style={styles.sectionTitle}>{title}</Text>
+        <Text style={styles.sectionDetails}>{details}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollContainer: {
+    paddingBottom: 20,
+    padding: 20,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 10,
+  },
+  welcomeTitle: {
+    fontSize: 18,
+    fontWeight: "500",
+    color: "#161616",
+  },
+  betaTag: {
+    backgroundColor: "#f6921e",
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    marginLeft: 10,
+  },
+  betaText: {
+    color: "#ffffff",
+    fontSize: 11,
+    fontWeight: "500",
+  },
+  disclaimerText: {
+    fontSize: 13,
+    color: "#505050",
+    lineHeight: 18,
+    marginBottom: 8,
+  },
+  boldText: {
+    fontWeight: "bold",
+  },
+  sectionContainer: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    backgroundColor: "#fff",
+    padding: 12,
+    marginBottom: 10,
+    borderRadius: 10,
+    elevation: 1,
+  },
+  iconContainer: {
+    backgroundColor: "#bbdefb",
+    borderRadius: 10,
+    padding: 10,
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 10,
+  },
+  textContainer: {
+    flex: 1,
+  },
+  sectionTitle: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: "#161616",
+    marginBottom: 3,
+  },
+  sectionDetails: {
+    fontSize: 12,
+    color: "#505050",
+    lineHeight: 18,
+  },
+  confirmArea: {
+    alignItems: "center",
+    padding: 20,
+    backgroundColor: '#f6f6f6',
+    borderTopWidth: 1,
+    borderTopColor: 'rgba(0, 0, 0, 0.1)',
+    paddingBottom: 25,
+  },
+  button: {
+    backgroundColor: "#367CB6",
+    width: "100%",
+    paddingVertical: 12,
+    borderRadius: 5,
+    alignItems: "center",
+    marginBottom: 10,
+  },
+  buttonText: {
+    color: "#FFFFFF",
+    fontSize: 16,
+    fontWeight: "500",
+  },
+  confirmText: {
+    fontSize: 11,
+    color: "gray",
+    lineHeight: 16,
+    paddingHorizontal: 10,
+  },
+});
+

package/src/layout/ex.js

@@ -0,0 +1,251 @@
+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) => (
+          
+          <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} 
+/> */}

package/src/layout/icon.js

@@ -0,0 +1,96 @@
+import React, { useContext } from 'react';
+import { TouchableOpacity, View, StyleSheet, Text } from 'react-native';
+import { AppContext } from '../contexts/AppContext';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+export const ChatIcon = () => {
+  const { setShowModal, messages, maintenance, disclaimer, uiConfig } = useContext(AppContext);
+
+  // Determine position from uiConfig or default
+  const iconPosition = {
+    bottom: uiConfig?.iconPosition?.bottom ?? 80,
+    right: uiConfig?.iconPosition?.right ?? 20,
+  };
+
+  // Determine icon type (bubble or tab)
+  const iconType = uiConfig?.iconType ?? 'bubble';
+
+  const handleClick = () => {
+    if (!disclaimer) {
+      setShowModal("Form");
+    } else {
+      if (messages.length > 1 || maintenance) {
+        setShowModal("ChatWindow");
+      } else {
+        setShowModal("Welcome");
+      }
+    }
+  };
+
+  // Different styles for bubble and tab
+  const containerStyle =
+    iconType === 'tab'
+      ? [styles.tabContainer, iconPosition]
+      : [styles.bubbleContainer, iconPosition];
+
+  return (
+    <TouchableOpacity style={containerStyle} onPress={handleClick} activeOpacity={0.7}>
+      <View style={styles.iconContent}>
+        <Ionicons name="chatbubble-ellipses" size={28} color="white" />
+        {iconType === 'tab' && (
+          <Text style={styles.tabText}>Chat with Heritage</Text>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  // Bubble Style
+  bubbleContainer: {
+    position: 'absolute',
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: '#FFA500',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 10,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 3,
+    elevation: 5,
+  },
+
+  // Tab Style
+  tabContainer: {
+    position: 'absolute',
+    width: 130,
+    height: 50,
+    borderTopLeftRadius: 25,
+    borderBottomLeftRadius: 25,
+    backgroundColor: '#367CB6',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 15,
+    justifyContent: 'flex-start',
+    zIndex: 10,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 3,
+    elevation: 5,
+  },
+  iconContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+
+  tabText: {
+    color: 'white',
+    fontSize: 14,
+    fontWeight: '500',
+    marginLeft: 8,
+  },
+});

package/src/layout/layout.js

@@ -1,27 +1,154 @@
-import React, { useState, useCallback, useContext } from 'react';
-import { SafeAreaView, Text, StyleSheet, View, TextInput, ScrollView, KeyboardAvoidingView, 
-  Platform, TouchableOpacity, RefreshControl, } from 'react-native';
-import { ChatWindow } from './chatWindow';
+import React, { useRef, useState, useContext, useEffect } from 'react';
+import { View, Animated, PanResponder, Pressable, StyleSheet } from 'react-native';
 import { AppContext } from '../contexts/AppContext';
-import { ChatIcon } from './chatIcon';
 
-export const Layout = ({ onProductCardClick, onAddToCartClick }) => {
-    const { showModal } = useContext(AppContext);
+// Pages
+import { ChatWindow } from './window';
+import { ChatIcon } from './icon';
+import { Welcome } from './welcome'
+import { Disclaimer } from './disclaimer';
+import { EmailForm } from '../components/email';
+
+export const Layout = () => {
+    const { showModal, setShowModal, uiConfig, disclaimer, maintenance, messages } = useContext(AppContext);
+
+    const panY = useRef(new Animated.Value(0)).current;
+    const isDragging = useRef(false);
+
+    const handleClick = () => {
+      if ((uiConfig.showIcon ?? true) !== true) {
+        setShowModal("Off");
+      } else {
+        setShowModal("Icon");
+      }
+    };  
   
+    const panResponder = PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        isDragging.current = true;
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        if (isDragging.current && gestureState.dy >= 0) {
+          panY.setValue(gestureState.dy);
+        }
+      },
+      onPanResponderRelease: (evt, gestureState) => {
+        if (gestureState.dy > 120) {
+          // Close if dragged far enough
+          Animated.timing(panY, {
+            toValue: 600, // Off-screen
+            duration: 200,
+            useNativeDriver: false,
+          }).start(() => {
+            handleClick();
+            panY.setValue(0); // Reset for next time
+          });
+        } else {
+          // Snap back to full height
+          Animated.spring(panY, {
+            toValue: 0,
+            friction: 6,
+            tension: 80,
+            useNativeDriver: false,
+          }).start();
+        }
+        isDragging.current = false;
+      },
+    });
+
+    // uiConfig.showIcon, uiConfig.toggleChat
+
+    useEffect(() => {
+      if (!disclaimer) {
+        setShowModal("Form");
+      } else {
+        if (messages.length > 1 || maintenance) {
+          setShowModal("ChatWindow");
+        }
+        else {
+          setShowModal("Welcome")
+        }
+      }
+    }, [uiConfig.toggleChat]);
+      
     return (
-      <View style={styles.container} pointerEvents="box-none">
-        {showModal === "Icon" ? <ChatIcon /> : <ChatWindow onProductCardClick={onProductCardClick} onAddToCartClick={onAddToCartClick}/>}
+      <View style={styles.layout} pointerEvents="box-none">
+        {showModal === "Icon" && (uiConfig.showIcon ?? true) && (
+          <ChatIcon />
+        )}
+        {showModal === "ChatWindow" && (
+          <>
+            <Pressable style={styles.outsideTouchable} onPress={() => handleClick()} />
+            <Animated.View style={[styles.container, { transform: [{ translateY: panY }] }]}>
+              <ChatWindow panHandlers={panResponder.panHandlers} />
+            </Animated.View>
+          </>
+        )}
+        {showModal === "Welcome" && (
+          <>
+          <Pressable style={styles.outsideTouchable} onPress={() => handleClick()} />
+          <Animated.View style={[styles.container, { transform: [{ translateY: panY }] }]}>
+            <Welcome panHandlers={panResponder.panHandlers} />
+          </Animated.View>
+          </>
+        )}
+        {showModal === "Form" &&
+          <>
+          <Pressable style={styles.outsideTouchable} onPress={() => handleClick()} />
+          <Animated.View style={[styles.container, { transform: [{ translateY: panY }] }]}>
+            <Disclaimer panHandlers={panResponder.panHandlers} />
+          </Animated.View>
+          </>
+        }
+        {showModal === "Email" &&
+          <>
+          <Pressable style={styles.outsideTouchable} onPress={() => handleClick()} />
+          <Animated.View style={[styles.container, { transform: [{ translateY: panY }] }]}>
+            <EmailForm panHandlers={panResponder.panHandlers} />
+          </Animated.View>
+          </>
+        }
       </View>
     );
 };
   
 const styles = StyleSheet.create({
-  container: {
+  layout: {
     flex: 1,
     position: 'absolute',
     top: 0,
     left: 0,
     right: 0,
     bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    justifyContent: 'flex-end',
+  },
+  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',
+  },
+  outsideTouchable: {
+    flex: 1, 
   },
+  dragHandle: {
+    height: 20,
+    width: '100%',
+    backgroundColor: '#DDD',
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  }
 });