srs-heritage-chatbot 1.0.0

package/src/hooks/Stream.js

@@ -0,0 +1,655 @@
+import React, { useState, useEffect, useRef, useContext } from 'react';
+import { AppContext } from '../contexts/AppContext';
+
+export function useWebSocketMessage() {
+  const {
+    setIsComplete,
+    startStreaming,
+    setMessages,
+    messages,
+    setGhostMessage,
+    data,
+    setTypingIndicator,
+    setStartStreaming,
+    lastUserMessage,
+    stopActivated,
+    sessionId,
+    setGhostCard,
+    BASE_URL,
+    setStopActivated,
+    setLastMessageId,
+    conversationStartTime,
+  } = useContext(AppContext);
+
+  const wsProtocol = 'wss://';
+  //const wsProtocol = 'ws://';
+  const wsUrl = BASE_URL.replace(/^http(s)?:\/\//, '');
+  const ENDPOINT = '/send/event';
+
+  const payload = {
+    customer_code: data.customer_code,
+    branch_code: data.branch_code, // "NBPISLA"
+    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: data.branch_details,
+    /* 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,
+    session_id: data.session_id || data.session || sessionId,
+    conversation_start_time: conversationStartTime,
+    // /* customer_name: "Cristin Connerney",
+    user_UUID: data.user_id || 'mobile_user_unspecified',
+    device: 'mobile',
+    window_location: 'mobile',
+  };
+
+  const wsRef = useRef(null);
+
+  useEffect(() => {
+    if (startStreaming) {
+      console.log(payload, BASE_URL);
+      const socketUrl = `${wsProtocol}${wsUrl}${ENDPOINT}`;
+      console.log(socketUrl);
+
+      const ws = new WebSocket(socketUrl);
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        console.log('WebSocket connection established.');
+        ws.send(JSON.stringify(payload));
+      };
+
+      ws.onmessage = event => {
+        const response = JSON.parse(event.data);
+
+        if (response.type !== 'chunk') {
+          console.log(JSON.stringify(response, null, 2));
+        }
+        switch (response.type) {
+          case 'middle_message':
+            const middleMessage = {
+              type: 'middle',
+              text: response.message,
+              products: [],
+              product_cards: 'False',
+            };
+            setMessages([...messages, middleMessage]);
+            break;
+          case 'message':
+            if (
+              response.product_cards == 'False' ||
+              response.product_cards == false
+            ) {
+              setGhostMessage(false);
+              setTypingIndicator(false);
+            } else {
+              setGhostMessage(false);
+              setGhostCard(true);
+            }
+            const newMessage = {
+              type: 'ai',
+              message_id: response.message_id || '',
+              text: response.message,
+              feedback: 'True',
+              products: [],
+              product_cards: response.product_cards || 'False',
+              resource: response?.resource_details?.[0]?.link ?? '',
+              resource_type: response?.resource_details?.[0]?.type ?? '',
+            };
+            setMessages(prevMessages => [...prevMessages, newMessage]);
+            setLastMessageId(response.message_id);
+            break;
+          case 'chunk':
+            const newContent = response.chunk;
+            const newMessageId = response.message_id;
+
+            setMessages(prevMessages => {
+              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,
+                  {
+                    type: 'ai',
+                    text: newContent,
+                    message_id: newMessageId,
+                    feedback: 'True',
+                  },
+                ];
+              }
+            });
+            setGhostMessage(false);
+            if (newMessageId) {
+              setLastMessageId(newMessageId);
+            }
+            break;
+          case 'product_cards':
+            console.log(
+              '\n\n\n\nthis is for my own sanity: ',
+              response.products[0],
+              '\n\n\n\n',
+            );
+            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,
+                                  min_pack_qty: value.min_pack_qty ?? 0,
+                                };
+                                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 || '',
+                        sku: prod.product_details.sku || '',
+                      }
+                    : {},
+                }));
+
+                const updatedLastMessage = {
+                  ...prevMessages[lastMessageIndex],
+                  products: expandedProducts,
+                  product_cards: 'True',
+                };
+
+                return [
+                  ...prevMessages.slice(0, lastMessageIndex),
+                  updatedLastMessage,
+                ];
+              }
+
+              return prevMessages;
+            });
+
+            setGhostMessage(false);
+            setTypingIndicator(false);
+            setGhostCard(false);
+            break;
+          case 'product_document':
+            setMessages(prevMessages => {
+              const lastMessageIndex = prevMessages.length - 1;
+              if (
+                prevMessages[lastMessageIndex] &&
+                prevMessages[lastMessageIndex].type === 'ai'
+              ) {
+                const updatedLastMessage = {
+                  ...prevMessages[lastMessageIndex],
+                  resource: response?.resource_details?.[0]?.link ?? '',
+                  resource_type: response?.resource_details?.[0]?.type ?? '',
+                };
+                return [
+                  ...prevMessages.slice(0, lastMessageIndex),
+                  updatedLastMessage,
+                ];
+              }
+            });
+            setGhostMessage(false);
+            setTypingIndicator(false);
+            setGhostCard(false);
+            break;
+          case 'suggested_questions':
+            setMessages(prevMessages => {
+              const lastMessageIndex = prevMessages.length - 1;
+              if (
+                prevMessages[lastMessageIndex] &&
+                prevMessages[lastMessageIndex].type === 'ai'
+              ) {
+                const updatedLastMessage = {
+                  ...prevMessages[lastMessageIndex],
+                  suggested_questions: true,
+                  questions: response.suggested_questions,
+                };
+                return [
+                  ...prevMessages.slice(0, lastMessageIndex),
+                  updatedLastMessage,
+                ];
+              }
+            });
+            break;
+          case 'setComplete':
+            setTypingIndicator(false);
+            setStartStreaming(false);
+            setGhostCard(false);
+            break;
+        }
+      };
+
+      ws.onerror = error => {
+        setStartStreaming(false);
+        setGhostMessage(false);
+        setTypingIndicator(false);
+        setGhostCard(false);
+      };
+
+      ws.onclose = event => {
+        console.log('WebSocket connection closed:', event.reason);
+        setStartStreaming(false);
+        setGhostMessage(false);
+        setTypingIndicator(false);
+        setGhostCard(false);
+      };
+
+      return () => {
+        ws.close();
+      };
+    }
+  }, [startStreaming]);
+
+  useEffect(() => {
+    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+      wsRef.current.close();
+      setStartStreaming(false);
+      setGhostMessage(false);
+      setGhostCard(false);
+      setTypingIndicator(false);
+      setStopActivated(false);
+    }
+  }, [stopActivated, setStartStreaming]);
+}
+
+// import React, { useState, useEffect, useRef, useContext } from 'react';
+// import { AppContext } from '../contexts/AppContext';
+//
+// export function useWebSocketMessage() {
+//   const {
+//     setIsComplete,
+//     startStreaming,
+//     setMessages,
+//     messages,
+//     setGhostMessage,
+//     data,
+//     setTypingIndicator,
+//     setStartStreaming,
+//     lastUserMessage,
+//     stopActivated,
+//     sessionId,
+//     setGhostCard,
+//     BASE_URL,
+//     setStopActivated,
+//     setLastMessageId,
+//     conversationStartTime,
+//   } = useContext(AppContext);
+//
+//   const wsProtocol = 'wss://';
+//   const wsUrl = BASE_URL.replace(/^http(s)?:\/\//, '');
+//   const ENDPOINT = '/send/event';
+//
+//   const payload = {
+//     customer_code: data.customer_code,
+//     branch_code: data.branch_code,
+//     branch_full_name: data.branch_full_name,
+//     customer_token: data.customer_token,
+//     active_ship_to_information: {
+//       shipToId: data.active_ship_to,
+//     },
+//     branch_details: data.branch_details,
+//     user_query: lastUserMessage,
+//     session_id: data.session_id || data.session || sessionId,
+//     conversation_start_time: conversationStartTime,
+//     user_UUID: data.user_id || 'mobile_user_unspecified',
+//     device: 'mobile',
+//     window_location: 'mobile',
+//   };
+//
+//   const wsRef = useRef(null);
+//
+//   useEffect(() => {
+//     if (startStreaming) {
+//       console.log(payload, BASE_URL);
+//       const socketUrl = `${wsProtocol}${wsUrl}${ENDPOINT}`;
+//       console.log(socketUrl);
+//
+//       const ws = new WebSocket(socketUrl);
+//       wsRef.current = ws;
+//
+//       ws.onopen = () => {
+//         console.log('WebSocket connection established.');
+//         ws.send(JSON.stringify(payload));
+//       };
+//
+//       ws.onmessage = event => {
+//         const response = JSON.parse(event.data);
+//
+//         if (response.type !== 'chunk') {
+//           console.log(JSON.stringify(response, null, 2));
+//         }
+//         switch (response.type) {
+//           case 'middle_message':
+//             const middleMessage = {
+//               type: 'middle',
+//               text: response.message,
+//               products: [],
+//               product_cards: 'False',
+//             };
+//             setMessages(prevMessages => [...prevMessages, middleMessage]);
+//             break;
+//           case 'message':
+//             if (
+//               response.product_cards == 'False' ||
+//               response.product_cards == false
+//             ) {
+//               setGhostMessage(false);
+//               setTypingIndicator(false);
+//             } else {
+//               setGhostMessage(false);
+//               setGhostCard(true);
+//             }
+//             const newMessage = {
+//               type: 'ai',
+//               message_id: response.message_id || '',
+//               text: response.message,
+//               feedback: 'True',
+//               products: [],
+//               product_cards: response.product_cards || 'False',
+//               resource: response?.resource_details?.[0]?.link ?? '',
+//               resource_type: response?.resource_details?.[0]?.type ?? '',
+//             };
+//             setMessages(prevMessages => [...prevMessages, newMessage]);
+//             setLastMessageId(response.message_id);
+//             break;
+//           case 'chunk':
+//             const newContent = response.chunk;
+//             const newMessageId = response.message_id;
+//
+//             setMessages(prevMessages => {
+//               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,
+//                   {
+//                     type: 'ai',
+//                     text: newContent,
+//                     message_id: newMessageId,
+//                     feedback: 'True',
+//                   },
+//                 ];
+//               }
+//             });
+//             setGhostMessage(false);
+//             if (newMessageId) {
+//               setLastMessageId(newMessageId);
+//             }
+//             break;
+//           case 'product_cards':
+//             console.log('🛒 PRODUCT_CARDS RECEIVED:', response);
+//             setMessages(prevMessages => {
+//               console.log(
+//                 '📦 Current messages array length:',
+//                 prevMessages.length,
+//               );
+//               const lastMessageIndex = prevMessages.length - 1;
+//
+//               if (lastMessageIndex < 0) {
+//                 console.warn('⚠️ No messages exist yet!');
+//                 return prevMessages;
+//               }
+//
+//               const lastMessage = prevMessages[lastMessageIndex];
+//               console.log('📝 Last message:', {
+//                 type: lastMessage?.type,
+//                 message_id: lastMessage?.message_id,
+//                 has_products: !!lastMessage?.products,
+//                 text_preview: lastMessage?.text?.substring(0, 50),
+//               });
+//
+//               if (lastMessage && lastMessage.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,
+//                                   min_pack_qty: value.min_pack_qty ?? 0,
+//                                 };
+//                                 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 || '',
+//                         sku: prod.product_details.sku || '',
+//                       }
+//                     : {},
+//                 }));
+//
+//                 console.log(
+//                   '✅ Merging',
+//                   expandedProducts.length,
+//                   'products into last message',
+//                 );
+//
+//                 const updatedLastMessage = {
+//                   ...lastMessage,
+//                   products: expandedProducts,
+//                   product_cards: 'True',
+//                 };
+//
+//                 const newMessages = [
+//                   ...prevMessages.slice(0, lastMessageIndex),
+//                   updatedLastMessage,
+//                 ];
+//
+//                 console.log(
+//                   '🎯 Updated message now has products:',
+//                   updatedLastMessage.products.length,
+//                 );
+//                 return newMessages;
+//               }
+//
+//               console.warn("⚠️ Last message is not AI type or doesn't exist");
+//               return prevMessages;
+//             });
+//
+//             setGhostMessage(false);
+//             setTypingIndicator(false);
+//             setGhostCard(false);
+//             break;
+//           case 'product_document':
+//             setMessages(prevMessages => {
+//               const lastMessageIndex = prevMessages.length - 1;
+//               if (
+//                 prevMessages[lastMessageIndex] &&
+//                 prevMessages[lastMessageIndex].type === 'ai'
+//               ) {
+//                 const updatedLastMessage = {
+//                   ...prevMessages[lastMessageIndex],
+//                   resource: response?.resource_details?.[0]?.link ?? '',
+//                   resource_type: response?.resource_details?.[0]?.type ?? '',
+//                 };
+//                 return [
+//                   ...prevMessages.slice(0, lastMessageIndex),
+//                   updatedLastMessage,
+//                 ];
+//               }
+//               // FIX: Always return prevMessages if condition not met
+//               return prevMessages;
+//             });
+//             setGhostMessage(false);
+//             setTypingIndicator(false);
+//             setGhostCard(false);
+//             break;
+//           case 'suggested_questions':
+//             setMessages(prevMessages => {
+//               const lastMessageIndex = prevMessages.length - 1;
+//               if (
+//                 prevMessages[lastMessageIndex] &&
+//                 prevMessages[lastMessageIndex].type === 'ai'
+//               ) {
+//                 const updatedLastMessage = {
+//                   ...prevMessages[lastMessageIndex],
+//                   suggested_questions: true,
+//                   questions: response.suggested_questions,
+//                 };
+//                 return [
+//                   ...prevMessages.slice(0, lastMessageIndex),
+//                   updatedLastMessage,
+//                 ];
+//               }
+//               // FIX: Always return prevMessages if condition not met
+//               return prevMessages;
+//             });
+//             break;
+//           case 'setComplete':
+//             setTypingIndicator(false);
+//             setStartStreaming(false);
+//             setGhostCard(false);
+//             break;
+//         }
+//       };
+//
+//       ws.onerror = error => {
+//         setStartStreaming(false);
+//         setGhostMessage(false);
+//         setTypingIndicator(false);
+//         setGhostCard(false);
+//       };
+//
+//       ws.onclose = event => {
+//         console.log('WebSocket connection closed:', event.reason);
+//         setStartStreaming(false);
+//         setGhostMessage(false);
+//         setTypingIndicator(false);
+//         setGhostCard(false);
+//       };
+//
+//       return () => {
+//         ws.close();
+//       };
+//     }
+//   }, [startStreaming]);
+//
+//   useEffect(() => {
+//     if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+//       wsRef.current.close();
+//       setStartStreaming(false);
+//       setGhostMessage(false);
+//       setGhostCard(false);
+//       setTypingIndicator(false);
+//       setStopActivated(false);
+//     }
+//   }, [stopActivated, setStartStreaming]);
+// }

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];
+}