react-native-srschat 0.1.13 → 0.1.15

package/src/contexts/AppContext.js

@@ -1,80 +1,265 @@
-import React, {createContext, useContext, useState, useEffect } from "react";
+import React, {createContext, useContext, useState, useEffect, useMemo } from "react";
+import uuid from 'react-native-uuid';
+import axios from "axios";
+import useAsyncStorage from '../hooks/useAsyncStorage';
 
 export const AppContext = createContext();
 
-export const AppProvider = ({ children }) => {
+export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConfig = {}, children }) => {
 
-  const [showModal, setShowModal] = useState("Icon");
+  const theme = {
+    userMessage: '#003764',
+    botMessage: '#003764',
+    backgroundColor: '#f6f6f6',
+    textColor: '#161616',
+    textColorSecondary: '#FFFFFF',
+    inlineButtonColor: '#dbd4c8'
+  };
+  
+  // Backend URLs
+  const BASE_URL = "srs-external-agent-backend-586731320826.us-central1.run.app";
+  const LOGGING_URL = "srs-external-agent-logging-ve7hwyltsq-uc.a.run.app";
+  const API_PREFIX = "https://";
+
+  // Default Messages
+  const defaultMessage = [
+    {type: "ai", text: "Hi there 👋 I’m Poseidon, your Heritage Pool+ AI Agent. I can help you during your online visit with Product and Account information. How can I help you today?"}
+  ]
 
+  const maintenanceMessage = [
+    { type: "ai", text: "Hi there 👋 I’m Poseidon, your Heritage Pool+ AI Agent. I'm currently undergoing maintenance to improve my services. Thank you for your patience and understanding!",},
+  ];
+
+  // Base Variables
+  const [showModal, setShowModal] = useState("Icon");
   const [input, setInput] = useState('');
-  const [messages, setMessages] = useState([
-    {type: "ai", text: "Hi there 👋 I’m Poseidon, your Heritage Pool+ AI Agent. I can help you during your online visit with Product and Account information. How can I help you today?"},
-    {type: "user", text: "Do you carry Hayward super pumps?"},
-    {type: "ai", text: "Could you provide more details on the specific model or horsepower you are interested in for the Hayward Super Pump? We have various models with different features, such as variable speed settings and different horsepower ratings. Alternatively, I can offer you some recommendations right away to help you decide."},
-  ]);
+  const [messages, setMessages] = useState(defaultMessage);
+  const [conversationStartTime, setConversationStartTime] = useState(null);
+  const [lastUserMessage, setLastUserMessage] = useState("");
+  const [lastMessageId, setLastMessageId] = useState("");
+  const [sessionId, setSessionId] = useState(null);
 
-  const handleSend = async () => {
-    if (!input.trim()) return;
+  useEffect(() => {
+    const newSessionId = uuid.v4();  // Generate UUID v4
+    setSessionId(newSessionId);
+  }, []);
 
-    const userMessage = input;
-    setInput('');
+  useEffect(() => {
+    if (showModal == "Off") {
+      setShowModal("Icon")
+    }
+  }, [uiConfig.showIcon]);
 
-    // Add user message to the list
-    setMessages((prev) => [...prev, { type: "user", text: userMessage }]);
+  // Message UI
+  const [typingIndicator, setTypingIndicator] = useState(false);
+  const [ghostMessage, setGhostMessage] = useState(false);
+  const [ghostCard, setGhostCard] = useState(false);
+  const [stopActivated, setStopActivated] = useState(false);
+  const [disclaimer, setDisclaimer] = useState(false);
+  const [startStreaming, setStartStreaming] = useState(false);
 
-    try {
-      // Add placeholder for AI message
-      setMessages((prev) => [...prev, { type: "ai", text: '' }]);
-
-      // Simulate response with streaming
-      const response = await onSendMessage(userMessage, (chunk) => {
-        setMessages((prev) => {
-          const newMessages = [...prev];
-          const lastMessage = newMessages[newMessages.length - 1];
-          if (lastMessage && lastMessage.type === "ai") {
-            lastMessage.text += chunk;
-          }
-          return newMessages;
-        });
-      });
+  const stopGenerating = () => {
+    setTypingIndicator(false);
+    setStopActivated(true);
+  };
+
+  function handleSend(input) {
+    if (maintenance) {
+      setMessages([ ...messages, { type: "user", text: input },
+        { type: "ai", text: "The chat is currently unavailable, please come back later!",},]);
+      return;
+    }
+    if (input.trim() !== "") {
+      if (messages.length <= 1) {
+        const startTime = new Date().toISOString();
+        setConversationStartTime(startTime);
+      }
+
+      // Initiate streaming
+      setShowModal("ChatWindow");
+      setLastUserMessage(input);
+      setMessages([...messages, { type: "user", text: input }]);
+      setTypingIndicator(true);
+      setGhostMessage(true);
+      setStartStreaming(true);
+      setInput("")
+    }
+  }
 
-      // Finalize AI response
-      setMessages((prev) => {
-        const newMessages = [...prev];
-        const lastMessage = newMessages[newMessages.length - 1];
-        if (lastMessage && lastMessage.type === "ai" && lastMessage.text !== response) {
-          lastMessage.text = response;
+  // After form submission
+  function setNextMessage(name) {
+    setMessages((prevMessages) => {
+      const updatedMessages = prevMessages.map((message, index) => {
+        if (index === prevMessages.length - 1 && message.form) {
+          return { ...message, form: false };
         }
-        return newMessages;
+        return message;
       });
+
+      const nextMessage = {
+        type: "ai",
+        text: [`Nice to meet you ${name}. How can I help you today?`],
+      };
+      return [...updatedMessages, nextMessage];
+    });
+  }
+
+  // Confirm Disclaimer
+  async function confirmDisclaimer() {
+    setDisclaimer(true);
+    if (!maintenance) {
+      setShowModal("Welcome");
+      setMessages(defaultMessage);
+    } else {
+      setShowModal("ChatWindow");
+      setMessages(maintenanceMessage);
+    }
+    try {
+      const response = await axios.post(
+        API_PREFIX + LOGGING_URL + "/log-disclaimer",
+        { email: "cristin@instalily.ai" },
+      );
     } catch (error) {
-      console.error('Error sending message:', error);
+      console.error("Error in Log disclaimer:", error);
+    }
+  }
+
+  function handleButtonClick(buttonText) {
+    handleSend(buttonText);
+  }
+
+  const [maintenance, setMaintenance] = useState(false);
+
+  const handleClearState = async () => {
+    if (!maintenance) {
+      setShowModal("Welcome");
+    }
+    if (messages.length > 1) {
+      if (maintenance) {
+        setMessages(maintenanceMessage);
+      } else {
+        setMessages(defaultMessage);
+      }
+      const newSessionId = uuid.v4();
+      setSessionId(newSessionId);
+      setTypingIndicator(false);
+      setGhostMessage(false);
+      /* try {
+        const response = await axios.post(API_PREFIX + BASE_URL + "/clear", {
+          customer_code: data.customer_code,
+          session_id: data.session_id,
+          message_id: lastMessageId,
+          user_UUID: data.user_UUID,
+        });
+        console.log(response);
+      } catch (error) {
+        console.error("Error in Clear:", error);
+      } */
     }
   };
 
-  const onSendMessage = async (message, onStream) => {
-    try {
-      if (onStream) {
-        const words = `You said: ${message}`.split(' ');
-        for (const word of words) {
-          await new Promise((resolve) => setTimeout(resolve, 100));
-          onStream(word + ' ');
-        }
-        return `You said: ${message}`;
+  const [feedback, setFeedback] = useState({});
+
+  async function handleFeedback(feedbackValue, messageId) {
+    switchFeedbackOpen(true, messageId, true);
+    setFeedback((prevFeedback) => {
+      const updatedFeedback = { ...prevFeedback };
+
+      if (!updatedFeedback[messageId]) {
+        updatedFeedback[messageId] = 0;
       }
 
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      return `You said: ${message}`;
+      updatedFeedback[messageId] = feedbackValue;
+
+      return updatedFeedback;
+    });
+    try {
+      const response = await axios.post(
+        API_PREFIX + LOGGING_URL + "/feedback",
+        {
+          message_id: messageId,
+          feedback: feedbackValue,
+        },
+      );
+      //console.log(response)
     } catch (error) {
-      console.error('Error handling message:', error);
-      return 'Error processing message';
+      console.error("Error in feedback post:", error);
     }
-  };
+  }
 
+  const [feedbackOpen, setFeedbackOpen] = useState({});
+  const [writeFeedback, setWriteFeedback] = useState("");
+  const [writeAnswer, setWriteAnswer] = useState("");
+
+  // Written Feedback ----------------------------
+
+  function switchFeedbackOpen(newVal, messageId, resetvalue) {
+    console.log(newVal,feedbackOpen[messageId], messageId, resetvalue)
+    console.log(feedbackOpen)
+    if (newVal != feedbackOpen[messageId]) {
+      setWriteFeedback("");
+      setWriteAnswer("");
+    }
+    if (resetvalue) {
+      setWriteFeedback("");
+      setWriteAnswer("");
+    }
+    if (feedbackOpen[messageId] == "done") {
+      return;
+    }
+    setFeedbackOpen((prevFeedback) => {
+      const updatedFeedback = { ...prevFeedback };
+      updatedFeedback[messageId] = newVal;
+      return updatedFeedback;
+    });
+    console.log(feedbackOpen)
+  }
+
+  async function handleWrittenFeedback(messageId) {
+    if (writeFeedback.trim() !== "" || writeAnswer.trim() !== "") {
+      //console.log(messageId, writeFeedback)
+      switchFeedbackOpen(-1, messageId, true);
+      try {
+        const response = await axios.post(
+          API_PREFIX + LOGGING_URL + "/feedback-message",
+          {
+            message_id: messageId,
+            feedback_message: writeFeedback,
+            correct_answer: writeAnswer,
+          },
+        );
+        //console.log(response)
+      } catch (error) {
+        console.error("Error in feedback_message:", error);
+      }
+    }
+  }
+
+  const formatChatHistory = () => {
+    // Skip the first message (index 0) which is the welcome message
+    return messages.slice(1).map((message) => {
+      if (Array.isArray(message.text)) {
+        return {
+          type: message.type,
+          content: message.text.join("\n"),
+        };
+      }
+      return {
+        type: message.type,
+        content: message.text,
+      };
+    });
+  };
 
   return (
     <AppContext.Provider
-      value={{ showModal, setShowModal, messages, setMessages, handleSend, onSendMessage, input, setInput
+      value={{ showModal, setShowModal, messages, setMessages, handleSend, input, setInput, defaultMessage, typingIndicator, setTypingIndicator,
+        handleClearState, theme, handleButtonClick, conversationStartTime, setConversationStartTime, lastUserMessage, setLastUserMessage, 
+        ghostMessage, setGhostMessage, ghostCard, setGhostCard, stopActivated, setStopActivated, disclaimer, setDisclaimer,
+        startStreaming, setStartStreaming, maintenance, setMaintenance, feedback, setFeedback, handleFeedback, feedbackOpen, setFeedbackOpen, 
+        writeFeedback, setWriteFeedback, writeAnswer, setWriteAnswer, BASE_URL, lastMessageId, setLastMessageId, 
+        onProductCardClick, onAddToCartClick, data, sessionId, setSessionId, handleWrittenFeedback, switchFeedbackOpen, confirmDisclaimer,
+        formatChatHistory, uiConfig
       }}
     >
       {children}

package/src/hooks/{Stream.js → stream.js}

@@ -2,26 +2,70 @@ import React, { useState, useEffect, useRef, useContext } from 'react';
 import { AppContext } from "../contexts/AppContext";
 
 export function useWebSocketMessage() {
-    const { setIsComplete, startStreaming, setMessages, messages, setGhostMessage, isMobile,
-        setTypingIndicator, setStartStreaming, lastUserMessage, stopActivated, custEmail, custName, data,
-        setGhostCard, BASE_URL, setStopActivated, setLastMessageId } = useContext(AppContext);
+    const { setIsComplete, startStreaming, setMessages, messages, setGhostMessage,data,
+        setTypingIndicator, setStartStreaming, lastUserMessage, stopActivated,sessionId,
+        setGhostCard, BASE_URL, setStopActivated, setLastMessageId, conversationStartTime } = useContext(AppContext);
     
-    const wsProtocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+    const wsProtocol = 'wss://'
     const wsUrl = BASE_URL.replace(/^http(s)?:\/\//, '');
     const ENDPOINT = '/send/event';
 
     const payload = {
-        ...data,
+        "customer_code": data.customer_code,
+        "branch_code": "NBPISLA" /* data.branch_code */,
+        "branch_full_name": data.branch_full_name,
+        "customer_token": data.customer_token, 
+        active_ship_to_information: { 
+            shipToId: data.active_ship_to,
+            "customerId": 0,
+            "customerCode": "HPTA",
+            "shipToSequenceId": 1,
+            "customerShipToName": "HERITAGE PLUS TEST ACCOUNT",
+            "addressLine1": "7440 STATE HIGHWAY 121",
+            "addressLine2": "",
+            "addressLine3": "",
+            "city": "MCKINNEY",
+            "state": "TX",
+            "zipCode": "750702196",
+            "phone": "2144914149",
+            "fax": "      ",
+            "orderAckEmail": "",
+            "customerPORequiredInd": "N",
+            "termsCode": "NET30",
+            "shipVia": "",
+            "salesPerson": "AS201585",
+            "salesPersonName": "",
+            "salesPersonCellPhone": "405-226-5844",
+            "salesPersonEmail": "Aaron.Spitz@heritagepsg.com",
+            "insideSalesPerson": "",
+            "secondarySalesPersonName": "",
+            "secondarySalesPersonEmail": null
+        },
+        branch_details: {
+            "active_branch_business_hours": "8:00 AM - 4:30 PM",
+            "active_branch_email": "OrdersHarrisburg@bel-aqua.com",
+            "active_branch_location": "Elizabethtown,PA",
+            "active_branch_name": "BEL-AQUA HARRISBURG",
+            "active_branch_phone": "(717)-689-3314",
+            "active_brand_name": "BEL-AQUA"
+        },
         user_query: lastUserMessage, 
-        customer_name: data.customer_name
+        session_id: String(sessionId),
+        conversation_start_time: conversationStartTime,
+        customer_name: "Cristin Connerney",
+        device: "mobile",
+        user_UUID: "cristin.connerney@srsdistribution.com",
+        window_location: "mobile"
     };
     
     const wsRef = useRef(null);
 
     useEffect(() => {
         if (startStreaming) {
-            console.log(payload)
+            console.log(payload, BASE_URL)
             const socketUrl = `${wsProtocol}${wsUrl}${ENDPOINT}`;
+            console.log(socketUrl)
+
             const ws = new WebSocket(socketUrl);
             wsRef.current = ws;
 
@@ -32,9 +76,11 @@ export function useWebSocketMessage() {
 
             ws.onmessage = (event) => {
                 const response = JSON.parse(event.data);
-                console.log(response)
+                if (response.type != "chunk") {
+                    console.log(response)
+                }
                 switch (response.type) {
-                    case 'middle_message':
+                    /* case 'middle_message':
                         const middleMessage = {
                             type: "middle",
                             text: response.message,
@@ -42,7 +88,7 @@ export function useWebSocketMessage() {
                             product_cards: "False",
                           }
                         setMessages([...messages, middleMessage])
-                        break;
+                        break; */
                     case 'message':
                         if (response.product_cards == "False" || response.product_cards == false ) {
                             setGhostMessage(false);
@@ -54,7 +100,7 @@ export function useWebSocketMessage() {
                         const newMessage = {
                             type: "ai",
                             message_id: response.message_id || '',
-                            text: [response.message],
+                            text: response.message,
                             feedback: "True",
                             products: [],
                             product_cards: response.product_cards || "False",
@@ -67,51 +113,94 @@ export function useWebSocketMessage() {
                     case 'chunk':
                         const newContent = response.chunk; 
                         const newMessageId = response.message_id;
+                    
                         setMessages(prevMessages => {
-                            const lastMessageIndex = prevMessages.length - 1;
-                            if (prevMessages[lastMessageIndex] && prevMessages[lastMessageIndex].type === "ai") {
-                                const updatedLastMessage = {
-                                    ...prevMessages[lastMessageIndex],
-                                    text: [prevMessages[lastMessageIndex].text[0] + newContent],
-                                    message_id: newMessageId || prevMessages[lastMessageIndex].message_id,
-                                    feedback: "True"
-                                };
+                            if (prevMessages.length > 0 && prevMessages[prevMessages.length - 1].type === "ai") {
+                                return prevMessages.map((message, index) => 
+                                    index === prevMessages.length - 1
+                                    ? { 
+                                        ...message,
+                                        text: message.text + newContent,
+                                        message_id: newMessageId || message.message_id,
+                                        feedback: "True"
+                                    }
+                                    : message
+                                );
+                            } else {
                                 return [
-                                    ...prevMessages.slice(0, lastMessageIndex),
-                                    updatedLastMessage
+                                    ...prevMessages, 
+                                    { 
+                                        type: "ai", 
+                                        text: newContent,
+                                        message_id: newMessageId,
+                                        feedback: "True"
+                                    }
                                 ];
-                            } else {
-                                setGhostMessage(false);
-                                return [...prevMessages, { 
-                                    type: "ai", 
-                                    text: [newContent],
-                                    message_id: newMessageId,
-                                    feedback: "True"
-                                }];
                             }
                         });
+                        setGhostMessage(false);
                         if (newMessageId) {
                             setLastMessageId(newMessageId);
                         }
-                        break;
+                        break;                        
                     case 'product_cards':
                         setMessages(prevMessages => {
                             const lastMessageIndex = prevMessages.length - 1;
+                    
                             if (prevMessages[lastMessageIndex] && prevMessages[lastMessageIndex].type === "ai") {
+                                const expandedProducts = response.products.map(prod => ({
+                                    part_number: prod.part_number || "",
+                                    inventory_info: prod.inventory_info ? {
+                                        default_uom: prod.inventory_info.default_uom || "",
+                                        is_valid: prod.inventory_info.is_valid || false,
+                                        info_by_uom: prod.inventory_info.info_by_uom
+                                            ? Object.keys(prod.inventory_info.info_by_uom).reduce((acc, key) => {
+                                                const value = prod.inventory_info.info_by_uom[key] || {};
+                                                acc[key] = {
+                                                    gross_price: value.gross_price ?? 0,
+                                                    net_price: value.net_price ?? 0,
+                                                    is_on_sale: value.is_on_sale ?? false,
+                                                    quantity_available: value.quantity_available ?? 0,
+                                                    discounts: value.discounts ?? null,
+                                                };
+                                                return acc;
+                                            }, {})
+                                            : {}
+                                    } : {},
+                                    product_details: prod.product_details ? {
+                                        brand: prod.product_details.brand || "",
+                                        flow: prod.product_details.flow || "",
+                                        heritage_link: prod.product_details.heritage_link || "",
+                                        image_url: prod.product_details.image_url || "",
+                                        is_pump: prod.product_details.is_pump || "",
+                                        manufacturer_id: prod.product_details.manufacturer_id || "",
+                                        mfg_number: prod.product_details.mfg_number || "",
+                                        part_number: prod.product_details.part_number || "",
+                                        product_description: prod.product_details.product_description || "",
+                                        product_name: prod.product_details.product_name || "",
+                                        type: prod.product_details.type || "",
+                                        vertical: prod.product_details.vertical || ""
+                                    } : {}
+                                }));
+
                                 const updatedLastMessage = {
                                     ...prevMessages[lastMessageIndex],
-                                    products: response.products || [],
+                                    products: expandedProducts,
                                     product_cards: "True"
                                 };
+                    
                                 return [
                                     ...prevMessages.slice(0, lastMessageIndex),
                                     updatedLastMessage
                                 ];
-                            } 
+                            }
+                    
+                            return prevMessages;
                         });
+                    
                         setGhostMessage(false);
-                        setTypingIndicator(false)
-                        setGhostCard(false)
+                        setTypingIndicator(false);
+                        setGhostCard(false);
                         break;
                     case 'product_document':
                         setMessages(prevMessages => {
@@ -133,11 +222,6 @@ export function useWebSocketMessage() {
                         setGhostCard(false)
                         break;
                     case 'suggested_questions':
-                        /* const questions = {
-                            type: "questions",
-                            message_id: response.message_id || '',
-                            suggested_questions: response.suggested_questions || [],                      
-                        }; */
                         setMessages(prevMessages => {
                             const lastMessageIndex = prevMessages.length - 1;
                             if (prevMessages[lastMessageIndex] && prevMessages[lastMessageIndex].type === "ai") {
@@ -152,10 +236,8 @@ export function useWebSocketMessage() {
                                 ];
                             } 
                         });
-                        //setMessages((prevMessages) => [...prevMessages, questions]);
                         break;
                     case 'setComplete':
-                        setIsComplete(true);
                         setTypingIndicator(false);
                         setStartStreaming(false)
                         setGhostCard(false)

package/src/hooks/useAsyncStorage.js

@@ -0,0 +1,33 @@
+import { useState, useEffect } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+export default function useAsyncStorage(key, defaultValue) {
+  const [value, setValue] = useState(defaultValue);
+
+  useEffect(() => {
+    const loadValue = async () => {
+      try {
+        const storedValue = await AsyncStorage.getItem(key);
+        if (storedValue !== null) {
+          setValue(JSON.parse(storedValue));
+        }
+      } catch (error) {
+        console.error(`Error loading data for key "${key}":`, error);
+      }
+    };
+
+    loadValue();
+  }, [key]);
+
+  const setValueInAsyncStorage = async (newValue) => {
+    try {
+      const result = typeof newValue === 'function' ? newValue(value) : newValue;
+      setValue(result);
+      await AsyncStorage.setItem(key, JSON.stringify(result));
+    } catch (error) {
+      console.error(`Error saving data for key "${key}":`, error);
+    }
+  };
+
+  return [value, setValueInAsyncStorage];
+}

package/src/index.js

@@ -3,11 +3,11 @@ import { View, StyleSheet } from 'react-native';
 import { AppProvider } from './contexts/AppContext';
 import { Layout } from './layout/layout';
 
-export const Chat = ({ data, onProductCardClick, onAddToCartClick }) => {
+export const Chat = ({ data, onProductCardClick, onAddToCartClick, uiConfig }) => {
   return (
-    <AppProvider>
+    <AppProvider data={data} onProductCardClick={onProductCardClick} onAddToCartClick={onAddToCartClick} uiConfig={uiConfig}>
       <View style={styles.container} pointerEvents='box-none'>
-        <Layout onProductCardClick={onProductCardClick} onAddToCartClick={onAddToCartClick} />
+        <Layout/>
       </View>
     </AppProvider>
   );
@@ -23,4 +23,8 @@ const styles = StyleSheet.create({
     bottom: 0,
     zIndex: 1000, 
   },
+  text: {
+    fontFamily: "Helvetica Neue" || "sans-serif",
+    fontSize: 16,
+  },
 });