react-native-srschat 0.1.13 → 0.1.15

package/src/components/email.js

@@ -0,0 +1,210 @@
+import React, { useState, useContext } from "react";
+import { View, Text, TextInput, TouchableOpacity, ActivityIndicator, Alert, StyleSheet, ScrollView } from "react-native";
+import Ionicons from "react-native-vector-icons/Ionicons";
+import axios from "axios";
+import { AppContext } from "../contexts/AppContext";
+import { Header } from "./header";
+
+export const EmailForm = ({ panHandlers }) => {
+  const { BASE_URL, setShowModal, messages, formatChatHistory, conversationStartTime } = useContext(AppContext);
+  const [subject, setSubject] = useState("");
+  const [message, setMessage] = useState("");
+  const [userEmail, setUserEmail] = useState("");
+  const [branchEmail, setBranchEmail] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false);
+  const [isComposing, setIsComposing] = useState(false);
+
+  const handleComposeEmail = async () => {
+    setIsComposing(true);
+    setError("");
+
+    try {
+      const chatHistory = formatChatHistory();
+      const payload = {
+        chat_history: chatHistory,
+        conversation_start_time: conversationStartTime,
+        customer_name: '',
+        branch_email: "",
+      };
+
+      const response = await axios.post(`https://${BASE_URL}/compose-email`, payload);
+      setMessage(response.data.message);
+      setSubject(response.data.subject || "");
+    } catch (error) {
+      setError(error.response?.data?.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();
+      await axios.post(`https://${BASE_URL}/send-email`, {
+        user_email: 'cristin@instalily.ai',
+        subject,
+        message,
+        chat_history: chatHistory,
+        conversation_start_time: conversationStartTime,
+        customer_name: '',
+        branch_email: "",
+      });
+
+      setSuccess(true);
+      setTimeout(() => {
+        setSuccess(false);
+        setShowModal("ChatWindow");
+      }, 2000);
+    } catch (error) {
+      setError(error.response?.data?.message || "Failed to send email");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+    return (
+      <View style={styles.container}>
+        <View {...panHandlers}>
+            <Header />
+        </View>
+        <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>
+        <ScrollView 
+            style={styles.content}
+            contentContainerStyle={{ paddingBottom: 100 }} // Add padding to bottom
+            keyboardShouldPersistTaps="handled"
+            showsVerticalScrollIndicator={true}
+            >
+                
+            <Text style={styles.infoText}>
+            Our AI assistant can help draft a professional email based on your chat conversation. The email will capture your main points and maintain a conversational tone. You can review and modify before sending.
+            </Text>
+
+            <TouchableOpacity style={styles.composeButton} 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" />
+            <TextInput style={styles.input} value={userEmail} onChangeText={setUserEmail} placeholder="Your Email" />
+            <TextInput style={styles.input} value={subject} onChangeText={setSubject} placeholder="Subject" />
+            <TextInput style={styles.textArea} value={message} onChangeText={setMessage} placeholder="Message" multiline />
+
+            {error ? <Text style={styles.errorText}>{error}</Text> : null}
+            {success ? <Text style={styles.successText}>Email sent successfully!</Text> : null}
+
+            <TouchableOpacity style={styles.sendButton} onPress={handleSubmit} disabled={isLoading}>
+            {isLoading ? <ActivityIndicator size="small" color="#FFFFFF" /> : <Text style={styles.buttonText}>Send Email</Text>}
+            </TouchableOpacity>
+        </ScrollView>
+      </View>
+    );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    padding: 20,
+    paddingTop: 5,
+    paddingBottom: 40,
+    marginBottom: 40
+  },
+  topBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    marginTop: 10
+  },
+  backButton: {
+    padding: 8,
+    borderRadius: 20,
+    backgroundColor: '#FFF',
+  },
+  topBarTitle: {
+    fontSize: 18,
+    fontWeight: 'medium',
+    marginLeft: 12,
+  },
+  infoText: {
+    textAlign: "left",
+    color: "#666",
+    fontSize: 15,
+    lineHeight: 22,
+    marginBottom: 20,
+  },
+  input: {
+    backgroundColor: "#f5f5f5",
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 16,
+    borderWidth: 1,
+    borderColor: "#e0e0e0",
+    marginBottom: 10,
+  },
+  textArea: {
+    backgroundColor: "#f5f5f5",
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 16,
+    borderWidth: 1,
+    borderColor: "#e0e0e0",
+    marginBottom: 10,
+    height: 180,
+    textAlignVertical: "top",
+  },
+  composeButton: {
+    backgroundColor: "#367CB6",
+    borderRadius: 5,
+    padding: 12,
+    alignItems: "center",
+    marginBottom: 20,
+  },
+  sendButton: {
+    backgroundColor: "#367CB6",
+    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,
+  },
+});

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

@@ -4,7 +4,15 @@ import { AppContext } from '../contexts/AppContext';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 
 export const Header = () => {
-  const { setShowModal } = useContext(AppContext);
+  const { showModal, setShowModal, setMessages, defaultMessage, handleClearState, uiConfig } = useContext(AppContext);
+
+  const handleClick = () => {
+    if ((uiConfig.showIcon ?? true) !== true) {
+      setShowModal("Off");
+    } else {
+      setShowModal("Icon");
+    }
+  };
 
   return (
     <View style={styles.header}>
@@ -17,18 +25,25 @@ export const Header = () => {
       <View style={[styles.section, styles.titleContainer]}>
         <View style={styles.titleWrapper}>
           <Text style={styles.title}>
-            Poseidon 
+            Poseidon
           </Text>
-          <Text style={styles.betaText}><Ionicons style={styles.icon} name="sparkles-outline" size={10} color="#007AFF" />beta</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}>
-        <TouchableOpacity onPress={() => setShowModal("Icon")}>
-          <Ionicons name="trash" size={24} color="gray" />
-        </TouchableOpacity>
-        <TouchableOpacity onPress={() => setShowModal("Icon")}>
+        {showModal !== "Form" && showModal !== "Email" &&
+          <>
+          <TouchableOpacity onPress={() => setShowModal("Email")}>
+            <Ionicons name="mail" size={24} color="gray" />
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => handleClearState()}>
+            <Ionicons name="trash" size={24} color="gray" />
+          </TouchableOpacity>
+          </>
+        }
+        <TouchableOpacity onPress={() => handleClick()}>
           <Ionicons name="chevron-down" size={24} color="gray" />
         </TouchableOpacity>
       </View>
@@ -54,34 +69,34 @@ const styles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'flex-end'
+    justifyContent: 'flex-end',
+    marginRight: 10,
+    gap: 4,
   },
   logo: {
-    width: 100,
+    width: 110,
     height: 40,
+    marginLeft: 10,
     resizeMode: 'contain',
   },
-  icon: {
-    paddingLeft: 2,
-    paddingRight: 2
-  },
   titleContainer: {
     flex: 2, // Slightly larger space for the title
+    marginTop: 13,
   },
   titleWrapper: {
     alignItems: 'center',
     justifyContent: 'center',
   },
   title: {
-    fontSize: 20,
-    fontWeight: 'medium',
-    color: '#000',
+    fontSize: 22,
+    fontWeight: 300,
+    color: '#404040',
     textAlign: 'center',
     flexDirection: 'row',
   },
   betaText: {
     fontSize: 12,
-    color: 'gray',
+    color: '#404040',
     position: 'absolute',
     top: -10,
     right: -35,

package/src/components/input.js

@@ -0,0 +1,95 @@
+import React, { useState, useEffect, useContext, useRef } from 'react';
+import {
+  Text,
+  StyleSheet,
+  View,
+  TextInput,
+  TouchableOpacity,
+  Platform,
+  KeyboardAvoidingView,
+  Keyboard
+} from 'react-native';
+import { Header } from '../components/header';
+import { AppContext } from '../contexts/AppContext';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+export const ChatInput = ({ onProductCardClick, onAddToCartClick }) => {
+  const { handleSend, input, setInput, showModal } = useContext(AppContext);
+
+  return (
+    <>
+    <Text style={styles.textBeta}>Beta version. Poseidon is learning!</Text>
+    <View style={styles.inputWrapper}>
+        <View style={styles.inputContainer}>
+        <TextInput
+            style={styles.input}
+            value={input}
+            onChangeText={setInput}
+            placeholder="Ask a question..."
+            placeholderTextColor="#999"
+            multiline
+        />
+        <TouchableOpacity style={styles.inputButton}>
+            <Ionicons name="mic-outline" size={24} color="#8E8E93" />
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.sendButton} onPress={() => handleSend(input)} >
+            <Ionicons name="paper-plane-outline" size={24} color='#8E8E93' />
+        </TouchableOpacity>
+        </View>
+    </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  inputWrapper: {
+    backgroundColor: '#f6f6f6',
+    paddingHorizontal: 6,
+    paddingVertical: 6,
+    borderTopWidth: 1,
+    borderTopColor: 'rgba(0, 0, 0, 0.1)',
+    paddingBottom: 25,
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 16,
+    margin: 8,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  input: {
+    flex: 1,
+    fontSize: 16,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    color: '#000000',
+  },
+  inputButton: {
+    padding: 6,
+  },
+  sendButton: {
+    padding: 6,
+    marginLeft: 'auto',
+  },
+  disabledButton: {
+    opacity: 0.7,
+  },
+  textBeta: {
+    textAlign: 'center', 
+    fontSize: 11,
+    color: '#808080',
+    fontWeight: '400',
+    marginTop: 5,
+    marginBottom: 2
+  },
+});