srs-heritage-chatbot 1.0.0

package/src/components/email.js

@@ -0,0 +1,467 @@
+import React, { useState, useContext, useRef, useEffect } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  ActivityIndicator,
+  StyleSheet,
+  Platform,
+  findNodeHandle
+} from "react-native";
+import Ionicons from "react-native-vector-icons/Ionicons";
+import { AppContext } from "../contexts/AppContext";
+import { Header } from "./header";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+
+export const EmailForm = ({ panHandlers }) => {
+  const { data, BASE_URL, setShowModal, formatChatHistory, conversationStartTime, sessionId, theme } = useContext(AppContext);
+  const API_PREFIX = "https://";
+  const [subject, setSubject] = useState("");
+  const [message, setMessage] = useState("");
+  const [userEmail, setUserEmail] = useState(data?.user_email || ""); // Sender's email
+  const [branchEmail, setBranchEmail] = useState((data?.branch_email) || ""); // Recipient's email
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false);
+  const [isComposing, setIsComposing] = useState(false);
+
+  // Refs for the scroll view and inputs
+  const scrollViewRef = useRef(null);
+  const subjectInputRef = useRef(null);
+  const messageInputRef = useRef(null);
+  const emailInputRef = useRef(null);
+
+  // Industry-standard email validation following RFC 5322 guidelines
+  const validateEmailFormat = (email) => {
+    // More comprehensive regex that handles most valid email formats
+    // This regex covers:
+    // - Alphanumeric characters, dots, hyphens, underscores, plus signs
+    // - Quoted strings in local part
+    // - IP addresses in domain part
+    // - International domain names
+    const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+    
+    // Length validation (RFC 5321 limits)
+    const MAX_EMAIL_LENGTH = 254;
+    const MAX_LOCAL_LENGTH = 64;
+    const MAX_DOMAIN_LENGTH = 253;
+    
+    if (email.length > MAX_EMAIL_LENGTH) {
+      return false;
+    }
+    
+    const [localPart, domainPart] = email.split('@');
+    
+    if (!localPart || !domainPart) {
+      return false;
+    }
+    
+    if (localPart.length > MAX_LOCAL_LENGTH || domainPart.length > MAX_DOMAIN_LENGTH) {
+      return false;
+    }
+    
+    return emailRegex.test(email);
+  };
+
+  const validateEmailDomain = (email) => {
+    const domainPart = email.split('@')[1];
+    if (!domainPart) return false;
+    
+    // Common domain validation checks
+    const commonIssues = [
+      // Missing or invalid TLD
+      /\.(com|org|net|edu|gov|mil|int|co|io|ly|me|tv|info|biz|name|mobi|travel|museum|aero|coop|pro|ac|ad|ae|af|ag|ai|al|am|an|ao|aq|ar|as|at|au|aw|ax|az|ba|bb|bd|be|bf|bg|bh|bi|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gg|gh|gi|gl|gm|gn|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|im|in|io|iq|ir|is|it|je|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|me|mg|mh|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|mv|mw|mx|my|mz|na|nc|ne|nf|ng|ni|nl|no|np|nr|nu|nz|om|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|ps|pt|pw|py|qa|re|ro|rs|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tl|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$/i,
+    ];
+    
+    // Check for valid TLD
+    const hasValidTLD = commonIssues[0].test(domainPart);
+    
+    // Check for common typos in popular domains
+    const commonDomainTypos = {
+      'gmial.com': 'gmail.com',
+      'gmail.co': 'gmail.com',
+      'gmai.com': 'gmail.com',
+      'yahooo.com': 'yahoo.com',
+      'yaho.com': 'yahoo.com',
+      'hotmial.com': 'hotmail.com',
+      'hotmai.com': 'hotmail.com',
+      'outlok.com': 'outlook.com',
+      'outloo.com': 'outlook.com'
+    };
+    
+    const suggestion = commonDomainTypos[domainPart.toLowerCase()];
+    
+    return {
+      isValid: hasValidTLD && !suggestion,
+      suggestion: suggestion
+    };
+  };
+
+  const validateEmail = (email) => {
+    if (!email) {
+      return "Email address is required";
+    }
+    
+    // Trim whitespace
+    email = email.trim();
+    
+    // Basic format validation
+    if (!validateEmailFormat(email)) {
+      return "Please enter a valid email address";
+    }
+    
+    // Domain validation with suggestions
+    const domainValidation = validateEmailDomain(email);
+    if (!domainValidation.isValid) {
+      if (domainValidation.suggestion) {
+        return `Did you mean ${email.split('@')[0]}@${domainValidation.suggestion}?`;
+      }
+      return "Please enter a valid email address";
+    }
+    
+    // Additional checks for common formatting errors
+    const commonFormatIssues = [
+      { pattern: /\.\./, message: "Email address cannot contain consecutive dots" },
+      { pattern: /^\./, message: "Email address cannot start with a dot" },
+      { pattern: /\.$/, message: "Email address cannot end with a dot" },
+      { pattern: /@\./, message: "Invalid format after @ symbol" },
+      { pattern: /\.@/, message: "Invalid format before @ symbol" },
+      { pattern: /\s/, message: "Email address cannot contain spaces" },
+      { pattern: /@.*@/, message: "Email address can only contain one @ symbol" }
+    ];
+    
+    for (const issue of commonFormatIssues) {
+      if (issue.pattern.test(email)) {
+        return issue.message;
+      }
+    }
+    
+    return "";
+  };
+
+  const buildEmailRequestPayload = (chatHistory) => ({
+    chat_history: chatHistory,
+    conversation_start_time: conversationStartTime ?? null,
+    customer_name: data?.customer_name ?? null,
+    user_id: data?.user_id ?? null,
+    session_id: data?.session_id ?? data?.session ?? sessionId ?? null,
+    branch_email: branchEmail ?? "",
+  });
+
+  const handleComposeEmail = async () => {
+    setIsComposing(true);
+    setError("");
+
+    try {
+      const chatHistory = formatChatHistory().map(({ variant_type, ...rest }) => rest);
+
+      const payload = {
+        chat_history: chatHistory,
+        conversation_start_time: conversationStartTime || null,
+        customer_name: data?.customer_name || null,
+        user_id: data?.user_id || null,
+        session_id: data?.session_id || data?.session || sessionId || null,
+        user_email: data?.user_email || "",
+        branch_email: data?.branch_email || ""
+      };
+
+      console.log("Email composition request payload:", payload);
+
+      const response = await fetch(`${API_PREFIX}${BASE_URL}/compose-email`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const responseData = await response.json();
+
+      const textToType = responseData.message;
+      let currentText = "";
+      const typingSpeed = 10;
+
+      for (let i = 0; i < textToType.length; i++) {
+        await new Promise(resolve => setTimeout(resolve, typingSpeed));
+        currentText += textToType[i];
+        setMessage(currentText);
+      }
+
+      setSubject(responseData.subject || "");
+      setUserEmail(responseData.user_email || userEmail || "");
+      // Don't overwrite branch email if response doesn't have it
+      if (responseData.branch_email) {
+        setBranchEmail(responseData.branch_email);
+      }
+
+    } catch (error) {
+      setError(
+        error.message ||
+        "Failed to compose email"
+      );
+    } finally {
+      setIsComposing(false);
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (!userEmail || !subject || !message) {
+      setError("Please fill in all fields");
+      return;
+    }
+
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(userEmail)) {
+      setError("Please enter a valid email address");
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      const chatHistory = formatChatHistory().map(({ variant_type, ...rest }) => rest);
+      console.log("Sending email with chat history:", chatHistory);
+
+      const response = await fetch(`https://${BASE_URL}/send-email`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          user_email: userEmail,
+          subject,
+          message,
+          chat_history: chatHistory,
+          conversation_start_time: conversationStartTime,
+          customer_name: data?.customer_name,
+          branch_email: branchEmail || data?.branch_email || ""
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      setSuccess(true);
+      setTimeout(() => {
+        setSuccess(false);
+        setShowModal("ChatWindow");
+      }, 2000);
+    } catch (error) {
+      setError(
+        error.message ||
+        "Failed to send email",
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <Header />
+      <KeyboardAwareScrollView
+        ref={scrollViewRef}
+        style={styles.content}
+        contentContainerStyle={{ flexGrow: 1, paddingBottom: 50 }}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={true}
+        enableOnAndroid={true}
+        extraScrollHeight={40}
+        keyboardDismissMode="interactive"
+        bounces={false}
+      >
+        <View style={styles.topBar}>
+          <TouchableOpacity onPress={() => setShowModal("ChatWindow")} style={styles.backButton}>
+            <Ionicons name="arrow-back" size={20} color="#000" />
+          </TouchableOpacity>
+          <Text style={styles.topBarTitle}>Contact Us</Text>
+        </View>
+
+        <Text style={styles.infoText}>
+          Press "Draft My Email" to generate an email based on your chat conversation. You can review and modify before sending.
+        </Text>
+
+        <TouchableOpacity style={[styles.composeButton, { backgroundColor: theme.primaryColor }]} onPress={handleComposeEmail} disabled={isComposing}>
+          {isComposing ? (
+            <ActivityIndicator size="small" color="#FFFFFF" />
+          ) : (
+            <Text style={styles.buttonText}>Draft My Email</Text>
+          )}
+        </TouchableOpacity>
+
+        <TextInput
+          style={styles.input}
+          value={branchEmail}
+          editable={false}
+          placeholder="Branch Email"
+          placeholderTextColor="#999"
+        />
+        <TextInput
+          ref={emailInputRef}
+          style={styles.input}
+          value={userEmail}
+          onChangeText={(text) => {
+            setUserEmail(text);
+            const emailValidationError = validateEmail(text);
+            if (emailValidationError) {
+              setError(emailValidationError);
+              setSuccess(false);
+            } else if (error === "Please enter a valid email address" || error === "Email address is required") {
+              setError("");
+            }
+          }}
+          placeholder="Your Email"
+          placeholderTextColor="#999"
+          onFocus={() =>
+            scrollViewRef.current?.scrollToFocusedInput(
+              findNodeHandle(emailInputRef.current)
+            )
+          }
+          keyboardType="email-address"
+          autoCapitalize="none"
+        />
+        <TextInput
+          ref={subjectInputRef}
+          style={styles.input}
+          value={subject}
+          onChangeText={(text) => {
+            setSubject(text);
+            if (error && !validateEmail(userEmail) && !message) {
+              setError("");
+            } else if (error === "Please fill in all fields" && text && message) {
+              setError("");
+            }
+          }}
+          placeholder="Subject"
+          placeholderTextColor="#999"
+          onFocus={() =>
+            scrollViewRef.current?.scrollToFocusedInput(
+              findNodeHandle(subjectInputRef.current)
+            )
+          }
+        />
+        <TextInput
+          ref={messageInputRef}
+          style={styles.textArea}
+          value={message}
+          onChangeText={(text) => {
+            setMessage(text);
+            if (error && !validateEmail(userEmail) && !subject) {
+              setError("");
+            } else if (error === "Please fill in all fields" && text && subject) {
+              setError("");
+            }
+          }}
+          placeholder="Message"
+          placeholderTextColor="#999"
+          multiline
+          onFocus={() =>
+            scrollViewRef.current?.scrollToFocusedInput(
+              findNodeHandle(messageInputRef.current)
+            )
+          }
+        />
+
+        {error ? <Text style={styles.errorText}>{error}</Text> : null}
+        {success ? <Text style={styles.successText}>Email sent successfully!</Text> : null}
+
+        <TouchableOpacity style={[styles.sendButton, { backgroundColor: theme.primaryColor }]} onPress={handleSubmit} disabled={isLoading}>
+          {isLoading ? <ActivityIndicator size="small" color="#FFFFFF" /> : <Text style={styles.buttonText}>Send Email</Text>}
+        </TouchableOpacity>
+      </KeyboardAwareScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    padding: 20,
+    paddingTop: 5,
+    flex: 1,
+  },
+  topBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 10,
+    marginTop: 10,
+  },
+  backButton: {
+    padding: 8,
+    borderRadius: 20,
+    backgroundColor: "#FFF",
+  },
+  topBarTitle: {
+    fontSize: 18,
+    fontWeight: "500",
+    marginLeft: 12,
+    color: "#000",
+  },
+  infoText: {
+    textAlign: "left",
+    color: "#666",
+    fontSize: 15,
+    lineHeight: 22,
+    marginBottom: 20,
+  },
+  input: {
+    backgroundColor: "white",
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 16,
+    borderWidth: 1,
+    borderColor: "#e0e0e0",
+    marginBottom: 10,
+    color: "#000",
+  },
+  textArea: {
+    backgroundColor: "white",
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 16,
+    borderWidth: 1,
+    borderColor: "#e0e0e0",
+    marginBottom: 10,
+    height: 180,
+    textAlignVertical: "top",
+    color: "#000",
+  },
+  composeButton: {
+    borderRadius: 5,
+    padding: 12,
+    alignItems: "center",
+    marginBottom: 20,
+  },
+  sendButton: {
+    borderRadius: 5,
+    padding: 12,
+    alignItems: "center",
+    marginTop: 20,
+  },
+  buttonText: {
+    color: "#FFF",
+    fontSize: 16,
+    fontWeight: "500",
+  },
+  errorText: {
+    color: "red",
+    fontSize: 14,
+    textAlign: "center",
+    marginTop: 10,
+  },
+  successText: {
+    color: "green",
+    fontSize: 14,
+    textAlign: "center",
+    marginTop: 10,
+  },
+});
+
+export default EmailForm;

package/src/components/feedback.js

@@ -0,0 +1,114 @@
+import React, { useContext } from "react";
+import { View, Text, TouchableOpacity, TextInput, StyleSheet } from "react-native";
+import Ionicons from "react-native-vector-icons/Ionicons";
+import { AppContext } from "../contexts/AppContext";
+import Feather from "react-native-vector-icons/Feather";
+
+export const Feedback = ({ message, messageId }) => {
+  const { handleFeedback, feedback, handleWrittenFeedback, feedbackOpen, setFeedbackOpen, writeFeedback,
+    setWriteFeedback, switchFeedbackOpen } = useContext(AppContext);
+
+  return (
+    <View style={styles.container}>
+
+      {/* Feedback Icons */}
+      <View style={styles.iconContainer}>
+        {/* Thumbs Up Button */}
+        <TouchableOpacity onPress={() => handleFeedback(1, messageId)}>
+          <Feather
+            name="thumbs-up"
+            size={18}
+            color={feedback[messageId] === 1 ? "#367CB6" : "#808080"}
+            style={styles.icon}
+          />
+        </TouchableOpacity>
+
+        {/* Thumbs Down Button */}
+        <TouchableOpacity onPress={() => handleFeedback(-1, messageId)}>
+          <Feather
+            name="thumbs-down"
+            size={18}
+            color={feedback[messageId] === -1 ? "#367CB6" : "#808080"}
+            style={styles.icon}
+          />
+        </TouchableOpacity>
+      </View>
+
+      {/* Feedback Input */}
+      {feedbackOpen[messageId] == true && (
+        <View style={styles.feedbackSection}>
+          <TextInput
+            multiline
+            numberOfLines={3}
+            placeholder="Enter your feedback..."
+            style={styles.textInput}
+            value={writeFeedback}
+            onChangeText={setWriteFeedback}
+          />
+
+          {/* Buttons */}
+          <View style={styles.buttonContainer}>
+            <TouchableOpacity
+              style={styles.button}
+              onPress={() => switchFeedbackOpen(false, messageId, true)}
+            >
+              <Text style={styles.buttonText}>Close</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={styles.button}
+              onPress={() => handleWrittenFeedback(messageId)}
+            >
+              <Text style={styles.buttonText}>Send</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 0,
+    marginBottom: 5
+  },
+  iconContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: 'flex-end'
+  },
+  icon: {
+    marginRight: 10,
+  },
+  feedbackSection: {
+    marginTop: 10,
+  },
+  textInput: {
+    width: "100%",
+    borderWidth: 1,
+    borderColor: "#808080",
+    borderRadius: 5,
+    padding: 10,
+    fontSize: 14,
+    color: "#161616",
+    backgroundColor: "#fff",
+  },
+  buttonContainer: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    marginTop: 5,
+  },
+  button: {
+    backgroundColor: "#367CB6",
+    paddingVertical: 8,
+    paddingHorizontal: 15,
+    borderRadius: 5,
+    marginLeft: 10,
+  },
+  buttonText: {
+    color: "white",
+    fontSize: 14,
+    textTransform: "none",
+  },
+});

package/src/components/header.js

@@ -0,0 +1,119 @@
+import React, { useContext } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
+import { AppContext } from '../contexts/AppContext';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import CloudinaryImage from '../utils/cloudinary';
+// import { PoseidonLogo } from './PoseidonLogo';
+
+export const Header = () => {
+  const { showModal, setShowModal, setMessages, defaultMessage, handleClearState, uiConfig, theme, brandLogo } = useContext(AppContext);
+
+  const handleClick = () => {
+    if ((uiConfig.showIcon ?? true) !== true) {
+      setShowModal("Off");
+    } else {
+      setShowModal("Icon");
+    }
+    
+    if (typeof uiConfig.setToggleChat === 'function') {
+      uiConfig.setToggleChat(false);
+    }
+  };
+
+  return (
+    <View style={[styles.header, { backgroundColor: theme.primaryColor }]}>
+      {/* Logo on the left */}
+      <View style={styles.section}>
+        {/* <PoseidonLogo width={150} height={35} color="white" /> */}
+        {/* <Image source={require('../assets/heritage.png')} style={[styles.logo, { tintColor: "white" }]}  /> */}
+        {/* <SvgCssUri
+          uri="https://media.heritageplus.com/image/upload/v1743632330/MobileApp/posiden.svg"
+          width={150}
+          height={35}
+        /> */}
+        <CloudinaryImage cldImg={brandLogo} imageStyle={{ width: 150, height: 35 }} />
+      </View>
+
+      {/* Title in the center */}
+      {/* <View style={[styles.section, styles.titleContainer]}>
+        <View style={styles.titleWrapper}>
+          <Text style={styles.title}>
+            Poseidon
+          </Text>
+          <Text style={styles.betaText}><Ionicons name="sparkles-outline" size={10} color="#007AFF" />beta</Text>
+        </View>
+      </View> */}
+
+      {/* Close button on the right */}
+      <View style={styles.iconsSection}>
+        {showModal !== "Form" && showModal !== "Email" &&
+          <>
+          <TouchableOpacity onPress={() => setShowModal("Email")}>
+            <Ionicons name="mail" size={24} color={theme.textColorSecondary} />
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => handleClearState()}>
+            <Ionicons name="trash" size={22} color={theme.textColorSecondary} />
+          </TouchableOpacity>
+          </>
+        }
+        <TouchableOpacity onPress={() => handleClick()}>
+          <Ionicons name="close" size={26} color={theme.textColorSecondary} />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#437D3D',
+    padding: 16,
+    paddingTop: 60,
+    borderBottomWidth: 1,
+    borderBottomColor: '#ddd',
+    justifyContent: 'space-between'
+  },
+  section: {
+    flex: 1,
+    alignItems: 'flex-start'
+  },
+  iconsSection: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    marginRight: 10,
+    gap: 8,
+  },
+  logo: {
+    width: 110,
+    height: 40,
+    marginLeft: 10,
+    resizeMode: 'contain'
+  },
+  titleContainer: {
+    flex: 2, // Slightly larger space for the title
+    marginTop: 13,
+  },
+  titleWrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: 300,
+    color: '#404040',
+    textAlign: 'center',
+    flexDirection: 'row',
+  },
+  betaText: {
+    fontSize: 12,
+    color: '#404040',
+    position: 'absolute',
+    top: -10,
+    right: -35,
+  },
+});