srs-heritage-chatbot 1.0.0

package/src/contexts/AppContext.js

@@ -0,0 +1,678 @@
+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,
+}) => {
+  // Brand-driven configuration
+  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';
+    return {
+      pool: {
+        primaryColor: '#004687',
+        userMessageColor: '#003764',
+        cloudName: 'heritageplus',
+        // Pool assets live under mobileapp/ in heritageplus cloud
+        logoId: 'mobileapp/logos/HPSG_HPlus_Logo_White',
+        baseHost: isStage
+          ? 'pool-stage-external-agent-adk-586731320826.us-east1.run.app'
+          : 'pool-prod-external-agent-adk-586731320826.us-east1.run.app',
+        // baseHost: isStage
+        //   ? '0.0.0.0:8080'
+        //   : 'pool-prod-external-agent-adk-586731320826.us-east1.run.app',
+        loggingHost:
+          'srs-external-agent-logging-586731320826.us-central1.run.app',
+      },
+      landscape: {
+        primaryColor: '#437D3D',
+        userMessageColor: '#437D3D',
+        cloudName: 'mktg',
+        logoId: 'logos/HLSG_Logo_Lockup_Color',
+        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',
+      },
+    }[version];
+  })();
+
+  const BASE_URL = BRAND_CONFIG.baseHost;
+  const LOGGING_URL = BRAND_CONFIG.loggingHost;
+  const TRACK_CLICK_URL = `${API_PREFIX}${LOGGING_URL}/track-click`;
+  const ADD_TO_CART_URL = `${API_PREFIX}${LOGGING_URL}/add-to-cart`;
+
+  const theme = {
+    userMessage: BRAND_CONFIG.userMessageColor,
+    botMessage: BRAND_CONFIG.userMessageColor,
+    backgroundColor: '#f6f6f6',
+    textColor: '#161616',
+    textColorSecondary: '#FFFFFF',
+    inlineButtonColor: '#dbd4c8',
+    primaryColor: BRAND_CONFIG.primaryColor,
+  };
+
+  const brandLogo = BRAND_CONFIG.logoId;
+  const brandCloudName = BRAND_CONFIG.cloudName;
+
+  // Default Messages
+  const defaultMessage = [
+    {
+      type: 'ai',
+      text: `Hi there 👋 I'm your ${
+        version === 'pool' ? 'HeritagePool+' : 'Heritage+'
+      } 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+ 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 [input, setInput] = useState('');
+  const [messages, setMessages] = useState(defaultState.messages);
+  const [conversationStartTime, setConversationStartTime] = useState(null);
+  const [lastUserMessage, setLastUserMessage] = useState('');
+  const [lastMessageId, setLastMessageId] = useState('');
+  const [sessionId, setSessionId] = useState(null);
+  const [isListening, setIsListening] = useState(false);
+
+  // 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);
+
+  // 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);
+        setGhostCard(cachedState.ghostCard);
+        setStopActivated(cachedState.stopActivated);
+        setDisclaimer(cachedState.disclaimer);
+        setStartStreaming(cachedState.startStreaming);
+        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
+            ) {
+              // console.log("showWelcome", uiConfig.showWelcome, cachedState.showWelcome)
+              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,
+        ghostMessage,
+        ghostCard,
+        stopActivated,
+        disclaimer,
+        startStreaming,
+        messages,
+        showModal,
+        showWelcome: uiConfig.showWelcome,
+      };
+
+      await updateChat(customerToken, currentState);
+    };
+
+    persistState();
+  }, [
+    customerToken,
+    typingIndicator,
+    ghostMessage,
+    ghostCard,
+    stopActivated,
+    disclaimer,
+    startStreaming,
+    messages,
+    showModal,
+    uiConfig.showWelcome,
+  ]);
+
+  useEffect(() => {
+    if (showModal == 'Off') {
+      setShowModal('Icon');
+    }
+  }, [uiConfig.showIcon]);
+
+  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;
+    }
+
+    // Ensure input is a string and not empty
+    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);
+      }
+      if (messages.length <= 1) {
+        const startTime = new Date().toISOString();
+        setConversationStartTime(startTime);
+      }
+
+      // Create user message object with immutable text
+      const userMessage = {
+        type: 'user',
+        text: userInput,
+        session_id: data.session_id || data.session || sessionId,
+      };
+
+      // Initiate streaming
+      setShowModal('ChatWindow');
+      setLastUserMessage(userInput);
+      setMessages([...messages, userMessage]);
+      setTypingIndicator(true);
+      setGhostMessage(true);
+      setStartStreaming(true);
+      setInput('');
+    }
+  }
+
+  // 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 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 fetch(
+        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);
+    }
+  }
+
+  function handleButtonClick(buttonText) {
+    handleSend(buttonText);
+  }
+
+  const [maintenance, setMaintenance] = useState(false);
+
+  const handleClearState = async () => {
+    if (!maintenance) {
+      setShowModal('Welcome');
+    }
+    if (messages.length > 1) {
+      const newState = {
+        ...defaultState,
+        messages: maintenance ? maintenanceMessage : defaultMessage,
+        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);
+
+      // Clear persisted state
+      if (customerToken) {
+        await updateChat(customerToken, newState);
+      }
+    }
+  };
+
+  const [feedback, setFeedback] = useState({});
+
+  async function handleFeedback(feedbackValue, messageId) {
+    switchFeedbackOpen(true, messageId, true);
+    setFeedback(prevFeedback => {
+      const updatedFeedback = { ...prevFeedback };
+
+      if (!updatedFeedback[messageId]) {
+        updatedFeedback[messageId] = 0;
+      }
+
+      updatedFeedback[messageId] = feedbackValue;
+
+      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,
+        }),
+      });
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      //console.log(response)
+    } catch (error) {
+      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 fetch(
+          API_PREFIX + LOGGING_URL + '/feedback-message',
+          {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              message_id: messageId,
+              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);
+      }
+    }
+  }
+
+  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,
+      };
+    });
+  };
+
+  function handleVoiceSend(audio, transcription) {
+    //setReadAloud(true)
+    handleSend(transcription);
+  }
+
+  // Wrapper function for onAddToCartClick to add middle message
+  const handleAddToCartWithMessage = cartData => {
+    // Add middle message indicating item is being added to cart
+    setMessages(prevMessages => [
+      ...prevMessages,
+      {
+        type: 'middle',
+        text: `${cartData.quantity} ${cartData.selectedUom} of item ${cartData.product.product_details.product_name} added to cart`,
+        products: [],
+        product_cards: 'False',
+      },
+    ]);
+
+    // Call the original onAddToCartClick function
+    if (onAddToCartClick) {
+      onAddToCartClick(cartData);
+    }
+  };
+
+  // translations from web: port to mobile in an effort to standardize experiences
+  const translations = {
+    en: {
+      greeting: 'Hi',
+      aiAssistantIntro:
+        "I'm your Heritage Pool+ AI Assistant. I can help you during your online visit with Product and Account information.",
+      askAway: 'Ask away...',
+      betaDisclaimer: 'Beta version. AI Assistant is still learning!',
+      helpCategories: 'Here are some areas I can help you with:',
+      suggestedQuestions: 'Suggested Questions...',
+      languageToggle: 'Ayuda en Español',
+      products: 'Products',
+      orders: 'Orders',
+      invoices: 'Invoices',
+      branchInfo: 'Branch Information',
+      hiMessage:
+        "Hi, I'm your Heritage Pool+ AI Assistant. How can I help you?",
+      hiMessageMobile:
+        "Hi, I'm your Heritage Pool+ AI Assistant! How can I help you?",
+      defaultMessage:
+        "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?",
+      nameMessage:
+        "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?",
+      nextMessage: 'Nice to meet you {name}. How can I help you today?',
+      maintenanceMessage:
+        "Hi there 👋 I'm your Heritage Pool+ AI Assistant. I'm currently undergoing maintenance to improve my services. Thank you for your patience and understanding!",
+      followUpQuestions: {
+        products: [
+          'Do you have part # JNDDEV48 in stock?',
+          'Which grid assembly goes with the Hayward DE4820 filter?',
+          "What's the max flow rate for the Tristar VS 950?",
+          "What's the difference between the Jandy VS FloPro 2.7 HP and the Jandy VS PlusHP 2.7 HP?",
+        ],
+        branchInfo: [
+          'What are the hours of my current branch?',
+          'How can I contact my branch?',
+          'Branches near me.',
+        ],
+        orders: [
+          "Where can I find my PO's?",
+          'How do I change my shipping method?',
+          'How do I place my early buys?',
+          'Can I pick up my open order?',
+          'I need to edit a recently placed order.',
+        ],
+        invoices: [
+          'How do I pay for invoices?',
+          'How do I print past invoices?',
+          'What is my current account balance?',
+          'How many unpaid invoices do I have?',
+          'How do I change my payment on file?',
+        ],
+      },
+      loadingTips: [
+        'Use 👍👎 next to each response to help us improve the AI Assistant',
+        '🗑️ Clear the chat history after each conversation for continued accurate responses',
+      ],
+      addToCart: 'Add to Cart',
+    },
+    es: {
+      greeting: 'Hola',
+      aiAssistantIntro:
+        'Soy tu Asistente de IA de Heritage Pool+. Puedo ayudarte durante tu visita en línea con información de productos y cuentas.',
+      askAway: 'Pregunta lo que quieras...',
+      betaDisclaimer: 'Versión beta. ¡Asistente de IA sigue aprendiendo!',
+      helpCategories: 'Estas son algunas áreas en las que puedo ayudarte:',
+      suggestedQuestions: 'Preguntas Sugeridas...',
+      languageToggle: 'Assistance in English',
+      products: 'Productos',
+      orders: 'Pedidos',
+      invoices: 'Facturas',
+      branchInfo: 'Información de Sucursal',
+      hiMessage:
+        'Hola, soy tu Asistente de IA de Heritage Pool+. ¿Cómo puedo ayudarte?',
+      hiMessageMobile:
+        '¡Hola, soy tu Asistente de IA de Heritage Pool+! ¿Cómo puedo ayudarte?',
+      defaultMessage:
+        'Hola 👋 Soy tu Asistente de IA de Heritage Pool+. Estoy aquí para ayudarte con información de productos y cuentas durante tu visita en línea. Sigo aprendiendo y creciendo - mientras más interactuemos y más comentarios compartas, mejor podré asistirte. ¿Cómo puedo ayudarte hoy?',
+      nameMessage:
+        'Hola 👋 Soy tu Asistente de IA de Heritage Pool+. Estoy aquí para ayudarte con información de productos y cuentas durante tu visita en línea. Sigo aprendiendo y creciendo - mientras más interactuemos y más comentarios compartas, mejor podré asistirte. ¿Cómo puedo ayudarte hoy?',
+      nextMessage: 'Mucho gusto en conocerte {name}. ¿Cómo puedo ayudarte hoy?',
+      maintenanceMessage:
+        'Hola 👋 Soy tu Asistente de IA de Heritage Pool+. Actualmente estoy en mantenimiento para mejorar mis servicios. ¡Gracias por tu paciencia y comprensión!',
+      followUpQuestions: {
+        products: [
+          '¿Tienen la pieza # JNDDEV48 en existencia?',
+          '¿Qué ensamble de rejilla corresponde al filtro Hayward DE4820?',
+          '¿Cuál es el caudal máximo del Tristar VS 950?',
+          '¿Cuál es la diferencia entre el Jandy VS FloPro de 2.7 HP y el Jandy VS PlusHP de 2.7 HP?',
+        ],
+        branchInfo: [
+          '¿Cuáles son los horarios de mi sucursal actual?',
+          '¿Cómo puedo contactar a mi sucursal?',
+          'Sucursales cerca de mí.',
+        ],
+        orders: [
+          '¿Dónde puedo encontrar mis órdenes de compra?',
+          '¿Cómo cambio mi método de envío?',
+          '¿Cómo realizo mis compras anticipadas?',
+          '¿Puedo recoger mi pedido abierto?',
+          'Necesito editar un pedido recién realizado.',
+        ],
+        invoices: [
+          '¿Cómo pago las facturas?',
+          '¿Cómo imprimo facturas anteriores?',
+          '¿Cuál es el saldo actual de mi cuenta?',
+          '¿Cuántas facturas sin pagar tengo?',
+          '¿Cómo cambio mi método de pago registrado?',
+        ],
+      },
+      loadingTips: [
+        'Usa 👍👎 junto a cada respuesta para ayudarnos a mejorar el Asistente de IA',
+        '🗑️ Borra el historial de chat después de cada conversación para mantener respuestas precisas',
+      ],
+      addToCart: 'Agregar al Carrito',
+    },
+  };
+
+  const [isSpanish, setIsSpanish] = useState('isSpanish', false);
+  const getCurrentTranslations = () => translations[isSpanish ? 'es' : 'en'];
+
+  const toggleLanguage = () => {
+    const newLanguage = !isSpanish;
+    setIsSpanish(newLanguage);
+
+    // Update messages when language changes
+    const currentTranslations = translations[newLanguage ? 'es' : 'en'];
+
+    if (maintenance) {
+      setMessages([
+        {
+          type: 'ai',
+          text: [currentTranslations.maintenanceMessage],
+        },
+      ]);
+    } else {
+      setMessages([
+        {
+          type: 'ai',
+          text: [currentTranslations.defaultMessage],
+        },
+      ]);
+    }
+  };
+
+  return (
+    <AppContext.Provider
+      value={{
+        isSpanish,
+        getCurrentTranslations,
+        toggleLanguage,
+        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>
+  );
+};