react-native-srschat 0.1.83 → 0.1.85

package/src/components/welcomeButton.js

@@ -8,7 +8,7 @@ const landscapeQuestions = [
   { text: 'Do you have part # RBLESPLXME2 in stock?' },
   { text: 'How do I install the seal on B82456?' },
   { text: 'Where can I find my POs?' },
-  { text: '¿Puedes ayudarme en español?' }
+  { text: '¿Puedes ayudarme en español?' },
 ];
 
 const poolQuestions = [
@@ -16,7 +16,7 @@ const poolQuestions = [
   { text: 'Do you have part # JNDDEV48 in stock?' },
   { text: 'Do you carry Hayward super pumps?' },
   { text: 'Which grid assembly goes with the Hayward DE4820 filter?' },
-  { text: '¿Puedes ayudarme en español?' }
+  { text: '¿Puedes ayudarme en español?' },
 ];
 
 const ButtonComponent = () => {
@@ -29,10 +29,11 @@ const ButtonComponent = () => {
       {suggestedQuestions.map((item, index) => (
         <TouchableOpacity
           key={index}
-          style={[styles.button, { borderColor: theme.primaryColor }]}
-          onPress={() => handleButtonClick(item.text)}
-        >
-          <Text style={[styles.buttonText, { color: theme.primaryColor }]}>{item.text}</Text>
+          style={[styles.button, { borderColor: '#004687' }]}
+          onPress={() => handleButtonClick(item.text)}>
+          <Text style={[styles.buttonText, { color: '#004687' }]}>
+            {item.text}
+          </Text>
         </TouchableOpacity>
       ))}
     </View>
@@ -40,11 +41,10 @@ const ButtonComponent = () => {
 };
 
 const styles = StyleSheet.create({
-  buttonContainer: {
-  },
+  buttonContainer: {},
   button: {
     backgroundColor: 'white',
-    borderColor: '#437D3D',
+    borderColor: '#004687',
     borderWidth: 1,
     borderRadius: 18,
     paddingVertical: 12,
@@ -52,7 +52,7 @@ const styles = StyleSheet.create({
     marginBottom: 16,
   },
   buttonText: {
-    color: '#437D3D',
+    color: '#004687',
     fontSize: 13,
     fontWeight: '400',
   },

package/src/contexts/AppContext.js

@@ -1,14 +1,29 @@
-import React, {createContext, useContext, useState, useEffect, useMemo } from "react";
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useMemo,
+} from 'react';
 import uuid from 'react-native-uuid';
 // import useAsyncStorage from '../hooks/useAsyncStorage';
 import { loadChat, updateChat, defaultState } from '../utils/storage';
 
 export const AppContext = createContext();
 
-export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConfig = {}, children }) => {
+export const AppProvider = ({
+  data,
+  onProductCardClick,
+  onAddToCartClick,
+  uiConfig = {},
+  children,
+}) => {
   // Brand-driven configuration
-  const version = (data?.brand_version === 'pool' || data?.brand_version === 'landscape') ? data.brand_version : 'landscape';
-  const API_PREFIX = "https://";
+  const version =
+    data?.brand_version === 'pool' || data?.brand_version === 'landscape'
+      ? data.brand_version
+      : 'landscape';
+  const API_PREFIX = 'https://';
 
   const BRAND_CONFIG = (() => {
     const isStage = data?.env === 'stage';
@@ -22,7 +37,8 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
         baseHost: isStage
           ? 'pool-stage-external-agent-adk-586731320826.us-east1.run.app'
           : 'pool-prod-external-agent-adk-586731320826.us-east1.run.app',
-        loggingHost: 'srs-external-agent-logging-586731320826.us-central1.run.app',
+        loggingHost:
+          'srs-external-agent-logging-586731320826.us-central1.run.app',
       },
       landscape: {
         primaryColor: '#437D3D',
@@ -32,7 +48,8 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
         baseHost: isStage
           ? 'landscape-stage-external-agent-adk-586731320826.us-east1.run.app'
           : 'landscape-prod-external-agent-adk-586731320826.us-east1.run.app',
-        loggingHost: 'srs-external-agent-landscape-logging-586731320826.us-central1.run.app',
+        loggingHost:
+          'srs-external-agent-landscape-logging-586731320826.us-central1.run.app',
       },
     }[version];
   })();
@@ -57,24 +74,28 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
 
   // Default Messages
   const defaultMessage = [
-    {type: "ai", text: "Hi there 👋 I'm your Heritage Pool+ AI Assistant. I'm here to help you with Product and Account information during your online visit. I'm still learning and growing - the more we interact and the more feedback you share, the better I can assist you. How can I help you today?"}
-  ]
+    {
+      type: 'ai',
+      text: `Hi there 👋 I'm your ${brandLogo} AI Assistant. I'm here to help you with Product and Account information during your online visit. I'm still learning and growing - the more we interact and the more feedback you share, the better I can assist you. How can I help you today?`,
+    },
+  ];
   const maintenanceMessage = [
-    { type: "ai", text: "Hi there 👋 I'm your Heritage Pool+ AI Agent. I'm currently undergoing maintenance to improve my services. Thank you for your patience and understanding!",},
+    {
+      type: 'ai',
+      text: "Hi there 👋 I'm your Heritage+ AI Agent. I'm currently undergoing maintenance to improve my services. Thank you for your patience and understanding!",
+    },
   ];
 
-
   // user data variables
   const customerToken = data.customer_token;
 
-
   // Base Variables
-  const [showModal, setShowModal] = useState("Icon");
+  const [showModal, setShowModal] = useState('Icon');
   const [input, setInput] = useState('');
   const [messages, setMessages] = useState(defaultState.messages);
   const [conversationStartTime, setConversationStartTime] = useState(null);
-  const [lastUserMessage, setLastUserMessage] = useState("");
-  const [lastMessageId, setLastMessageId] = useState("");
+  const [lastUserMessage, setLastUserMessage] = useState('');
+  const [lastMessageId, setLastMessageId] = useState('');
   const [sessionId, setSessionId] = useState(null);
   const [isListening, setIsListening] = useState(false);
 
@@ -89,11 +110,11 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
   // Load persisted state on mount
   useEffect(() => {
     if (!customerToken) return;
-    
+
     const init = async () => {
       try {
         const cachedState = await loadChat(customerToken);
-        
+
         // Update all stateful values
         setTypingIndicator(cachedState.typingIndicator);
         setGhostMessage(cachedState.ghostMessage);
@@ -104,34 +125,36 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
         setMessages(cachedState.messages);
         // setShowModal(cachedState.showModal);
 
-        if (uiConfig.toggleChat === false){
-          setShowModal("Icon");
-        }else{
-          if (!disclaimer){
-            setShowModal("Form")
-          }else{
-            if ((uiConfig.showWelcome === true || cachedState.showWelcome === true) && (messages.length <2)){
+        if (uiConfig.toggleChat === false) {
+          setShowModal('Icon');
+        } else {
+          if (!disclaimer) {
+            setShowModal('Form');
+          } else {
+            if (
+              (uiConfig.showWelcome === true ||
+                cachedState.showWelcome === true) &&
+              messages.length < 2
+            ) {
               // console.log("showWelcome", uiConfig.showWelcome, cachedState.showWelcome)
-              setShowModal("Welcome");
-            }else{
-              setShowModal("ChatWindow");
+              setShowModal('Welcome');
+            } else {
+              setShowModal('ChatWindow');
             }
           }
         }
-
-
       } catch (error) {
         console.error('Error loading chat state:', error);
       }
     };
-    
+
     init();
   }, [customerToken, uiConfig.toggleChat, uiConfig.showWelcome]);
 
   // Persist state changes
   useEffect(() => {
     if (!customerToken) return;
-    
+
     const persistState = async () => {
       const currentState = {
         typingIndicator,
@@ -142,12 +165,12 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
         startStreaming,
         messages,
         showModal,
-        showWelcome: uiConfig.showWelcome
+        showWelcome: uiConfig.showWelcome,
       };
-      
+
       await updateChat(customerToken, currentState);
     };
-    
+
     persistState();
   }, [
     customerToken,
@@ -159,12 +182,12 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
     startStreaming,
     messages,
     showModal,
-    uiConfig.showWelcome
+    uiConfig.showWelcome,
   ]);
 
   useEffect(() => {
-    if (showModal == "Off") {
-      setShowModal("Icon")
+    if (showModal == 'Off') {
+      setShowModal('Icon');
     }
   }, [uiConfig.showIcon]);
 
@@ -175,20 +198,27 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
 
   function handleSend(input) {
     if (maintenance) {
-      setMessages([ ...messages, { type: "user", text: input },
-        { type: "ai", text: "The chat is currently unavailable, please come back later!",},]);
+      setMessages([
+        ...messages,
+        { type: 'user', text: input },
+        {
+          type: 'ai',
+          text: 'The chat is currently unavailable, please come back later!',
+        },
+      ]);
       return;
     }
-    
+
     // Ensure input is a string and not empty
-    const userInput = typeof input === 'string' ? input.trim() : String(input || '').trim();
-    
-    if (userInput !== "") {
+    const userInput =
+      typeof input === 'string' ? input.trim() : String(input || '').trim();
+
+    if (userInput !== '') {
       // Ensure sessionId exists before starting a conversation
       if (!sessionId) {
         const newSessionId = uuid.v4();
         setSessionId(newSessionId);
-        console.log("[AppContext] Generated new sessionId:", newSessionId);
+        console.log('[AppContext] Generated new sessionId:', newSessionId);
       }
       if (messages.length <= 1) {
         const startTime = new Date().toISOString();
@@ -196,26 +226,26 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
       }
 
       // Create user message object with immutable text
-      const userMessage = { 
-        type: "user", 
+      const userMessage = {
+        type: 'user',
         text: userInput,
-        session_id : data.session_id || data.session || sessionId,
+        session_id: data.session_id || data.session || sessionId,
       };
 
       // Initiate streaming
-      setShowModal("ChatWindow");
+      setShowModal('ChatWindow');
       setLastUserMessage(userInput);
       setMessages([...messages, userMessage]);
       setTypingIndicator(true);
       setGhostMessage(true);
       setStartStreaming(true);
-      setInput("")
+      setInput('');
     }
   }
 
   // After form submission
   function setNextMessage(name) {
-    setMessages((prevMessages) => {
+    setMessages(prevMessages => {
       const updatedMessages = prevMessages.map((message, index) => {
         if (index === prevMessages.length - 1 && message.form) {
           return { ...message, form: false };
@@ -224,7 +254,7 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
       });
 
       const nextMessage = {
-        type: "ai",
+        type: 'ai',
         text: [`Nice to meet you ${name}. How can I help you today?`],
       };
       return [...updatedMessages, nextMessage];
@@ -235,28 +265,28 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
   async function confirmDisclaimer() {
     setDisclaimer(true);
     if (!maintenance) {
-      setShowModal("Welcome");
+      setShowModal('Welcome');
       setMessages(defaultMessage);
     } else {
-      setShowModal("ChatWindow");
+      setShowModal('ChatWindow');
       setMessages(maintenanceMessage);
     }
     try {
       const response = await fetch(
-        API_PREFIX + LOGGING_URL + "/log-disclaimer",
+        API_PREFIX + LOGGING_URL + '/log-disclaimer',
         {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
           },
           body: JSON.stringify({ email: data.user_email }),
-        }
+        },
       );
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
     } catch (error) {
-      console.error("Error in Log disclaimer:", error);
+      console.error('Error in Log disclaimer:', error);
     }
   }
 
@@ -268,21 +298,21 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
 
   const handleClearState = async () => {
     if (!maintenance) {
-      setShowModal("Welcome");
+      setShowModal('Welcome');
     }
     if (messages.length > 1) {
       const newState = {
         ...defaultState,
         messages: maintenance ? maintenanceMessage : defaultMessage,
-        showModal: maintenance ? "ChatWindow" : "Welcome"
+        showModal: maintenance ? 'ChatWindow' : 'Welcome',
       };
-      
+
       // Update all state variables
       setMessages(newState.messages);
       setTypingIndicator(false);
       setGhostMessage(false);
       setShowModal(newState.showModal);
-      
+
       // Generate new session
       const newSessionId = uuid.v4();
       setSessionId(newSessionId);
@@ -298,7 +328,7 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
 
   async function handleFeedback(feedbackValue, messageId) {
     switchFeedbackOpen(true, messageId, true);
-    setFeedback((prevFeedback) => {
+    setFeedback(prevFeedback => {
       const updatedFeedback = { ...prevFeedback };
 
       if (!updatedFeedback[messageId]) {
@@ -310,63 +340,60 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
       return updatedFeedback;
     });
     try {
-      const response = await fetch(
-        API_PREFIX + LOGGING_URL + "/feedback",
-        {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            message_id: messageId,
-            feedback: feedbackValue,
-          }),
-        }
-      );
+      const response = await fetch(API_PREFIX + LOGGING_URL + '/feedback', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          message_id: messageId,
+          feedback: feedbackValue,
+        }),
+      });
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
       //console.log(response)
     } catch (error) {
-      console.error("Error in feedback post:", error);
+      console.error('Error in feedback post:', error);
     }
   }
 
   const [feedbackOpen, setFeedbackOpen] = useState({});
-  const [writeFeedback, setWriteFeedback] = useState("");
-  const [writeAnswer, setWriteAnswer] = 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)
+    console.log(newVal, feedbackOpen[messageId], messageId, resetvalue);
+    console.log(feedbackOpen);
     if (newVal != feedbackOpen[messageId]) {
-      setWriteFeedback("");
-      setWriteAnswer("");
+      setWriteFeedback('');
+      setWriteAnswer('');
     }
     if (resetvalue) {
-      setWriteFeedback("");
-      setWriteAnswer("");
+      setWriteFeedback('');
+      setWriteAnswer('');
     }
-    if (feedbackOpen[messageId] == "done") {
+    if (feedbackOpen[messageId] == 'done') {
       return;
     }
-    setFeedbackOpen((prevFeedback) => {
+    setFeedbackOpen(prevFeedback => {
       const updatedFeedback = { ...prevFeedback };
       updatedFeedback[messageId] = newVal;
       return updatedFeedback;
     });
-    console.log(feedbackOpen)
+    console.log(feedbackOpen);
   }
 
   async function handleWrittenFeedback(messageId) {
-    if (writeFeedback.trim() !== "" || writeAnswer.trim() !== "") {
+    if (writeFeedback.trim() !== '' || writeAnswer.trim() !== '') {
       //console.log(messageId, writeFeedback)
       switchFeedbackOpen(-1, messageId, true);
       try {
         const response = await fetch(
-          API_PREFIX + LOGGING_URL + "/feedback-message",
+          API_PREFIX + LOGGING_URL + '/feedback-message',
           {
             method: 'POST',
             headers: {
@@ -377,25 +404,25 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
               feedback_message: writeFeedback,
               correct_answer: writeAnswer,
             }),
-          }
+          },
         );
         if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
         }
         //console.log(response)
       } catch (error) {
-        console.error("Error in feedback_message:", 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) => {
+    return messages.slice(1).map(message => {
       if (Array.isArray(message.text)) {
         return {
           type: message.type,
-          content: message.text.join("\n"),
+          content: message.text.join('\n'),
         };
       }
       return {
@@ -404,22 +431,22 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
       };
     });
   };
-  
+
   function handleVoiceSend(audio, transcription) {
     //setReadAloud(true)
-    handleSend(transcription)
+    handleSend(transcription);
   }
 
   // Wrapper function for onAddToCartClick to add middle message
-  const handleAddToCartWithMessage = (cartData) => {
+  const handleAddToCartWithMessage = cartData => {
     // Add middle message indicating item is being added to cart
-    setMessages((prevMessages) => [
+    setMessages(prevMessages => [
       ...prevMessages,
       {
-        type: "middle",
+        type: 'middle',
         text: `${cartData.quantity} ${cartData.selectedUom} of item ${cartData.product.product_details.product_name} added to cart`,
         products: [],
-        product_cards: "False",
+        product_cards: 'False',
       },
     ]);
 
@@ -431,15 +458,67 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
 
   return (
     <AppContext.Provider
-      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: handleAddToCartWithMessage, data, sessionId, setSessionId, handleWrittenFeedback, switchFeedbackOpen, confirmDisclaimer,
-        formatChatHistory, uiConfig, handleVoiceSend, TRACK_CLICK_URL, ADD_TO_CART_URL, isListening, setIsListening, brandLogo, brandCloudName
-      }}
-    >
+      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: handleAddToCartWithMessage,
+        data,
+        sessionId,
+        setSessionId,
+        handleWrittenFeedback,
+        switchFeedbackOpen,
+        confirmDisclaimer,
+        formatChatHistory,
+        uiConfig,
+        handleVoiceSend,
+        TRACK_CLICK_URL,
+        ADD_TO_CART_URL,
+        isListening,
+        setIsListening,
+        brandLogo,
+        brandCloudName,
+        version,
+      }}>
       {children}
     </AppContext.Provider>
   );