react-native-srschat 0.1.7 → 0.1.8

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,UAAU,SAAS;IACjB,aAAa,EAAE,CACb,OAAO,EAAE,MAAM,EACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,KAC/B,OAAO,CAAC,MAAM,CAAC,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE;QACN,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,oBAAoB,CAAC,EAAE,MAAM,CAAC;KAC/B,CAAC;CACH;AASD,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA+KpC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.js"],"names":[],"mappings":"AAOO;;;;sBAON;kBAd4C,OAAO"}

package/lib/typescript/layout/chatIcon.d.ts

@@ -0,0 +1,3 @@
+export function ChatIcon(): React.JSX.Element;
+import React from 'react';
+//# sourceMappingURL=chatIcon.d.ts.map

package/lib/typescript/layout/chatIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatIcon.d.ts","sourceRoot":"","sources":["../../../src/layout/chatIcon.js"],"names":[],"mappings":"AAKO,8CAUN;kBAfiC,OAAO"}

package/lib/typescript/layout/chatWindow.d.ts

@@ -0,0 +1,6 @@
+export function ChatWindow({ onProductCardClick, onAddToCartClick }: {
+    onProductCardClick: any;
+    onAddToCartClick: any;
+}): React.JSX.Element;
+import React from 'react';
+//# sourceMappingURL=chatWindow.d.ts.map

package/lib/typescript/layout/chatWindow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatWindow.d.ts","sourceRoot":"","sources":["../../../src/layout/chatWindow.js"],"names":[],"mappings":"AAeO;;;sBA0FN;kBAzGwD,OAAO"}

package/lib/typescript/layout/layout.d.ts

@@ -0,0 +1,6 @@
+export function Layout({ onProductCardClick, onAddToCartClick }: {
+    onProductCardClick: any;
+    onAddToCartClick: any;
+}): React.JSX.Element;
+import React from 'react';
+//# sourceMappingURL=layout.d.ts.map

package/lib/typescript/layout/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/layout/layout.js"],"names":[],"mappings":"AAQO;;;sBAQN;kBAhBwD,OAAO"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-srschat",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "private": false,
   "description": "A modern, sophisticated chat interface for React Native",
   "main": "lib/commonjs/index",

package/src/components/header.js

@@ -0,0 +1,89 @@
+import React, { useContext } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
+import { Ionicons as Icon } from '@expo/vector-icons';
+import { AppContext } from '../contexts/AppContext';
+
+export const Header = () => {
+  const { setShowModal } = useContext(AppContext);
+
+  return (
+    <View style={styles.header}>
+      {/* Logo on the left */}
+      <View style={styles.section}>
+        <Image source={require('../assets/heritage.png')} style={styles.logo} />
+      </View>
+
+      {/* Title in the center */}
+      <View style={[styles.section, styles.titleContainer]}>
+        <View style={styles.titleWrapper}>
+          <Text style={styles.title}>
+            Poseidon 
+          </Text>
+          <Text style={styles.betaText}><Icon style={styles.icon} name="sparkles-outline" size={10} color="#007AFF" />beta</Text>
+        </View>
+      </View>
+
+      {/* Close button on the right */}
+      <View style={styles.iconsSection}>
+        <TouchableOpacity onPress={() => setShowModal("Icon")}>
+          <Icon name="trash" size={24} color="gray" />
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => setShowModal("Icon")}>
+          <Icon name="chevron-down" size={24} color="gray" />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#f6f6f6',
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#ddd',
+  },
+  section: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  iconsSection: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end'
+  },
+  logo: {
+    width: 100,
+    height: 40,
+    resizeMode: 'contain',
+  },
+  icon: {
+    paddingLeft: 2,
+    paddingRight: 2
+  },
+  titleContainer: {
+    flex: 2, // Slightly larger space for the title
+  },
+  titleWrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'medium',
+    color: '#000',
+    textAlign: 'center',
+    flexDirection: 'row',
+  },
+  betaText: {
+    fontSize: 12,
+    color: 'gray',
+    position: 'absolute',
+    top: -10,
+    right: -35,
+  },
+});

package/src/components/testing.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { View, Button, StyleSheet } from 'react-native';
+
+export const Testing = ({ onProductCardClick, onAddToCartClick }) => {
+
+  const product = {
+    "part_number": "AEQO177",
+    "inventory_info": {
+      "default_uom": "EA",
+      "is_valid": true,
+      "info_by_uom": {
+        "EA": {
+          "gross_price": 7.83,
+          "net_price": 7.83,
+          "is_on_sale": false,
+          "quantity_available": 0,
+          "discounts": null
+        }
+      }
+    },
+    "product_details": {
+      "product_name": "Aladdin Hayward SPX1600S SuperPump Lid Gasket | O-177-2",
+      "part_number": "AEQO177",
+      "manufacturer_id": "O-177-2",
+      "heritage_link": "https://www.heritagepoolplus.com/aeqo177-aladdin-o-ring-o-177-o-177-2-o-177-2",
+      "image_url": "https://media.heritageplus.com/image/upload/v1668157956/image/AEQO177_0.jpg"
+    }
+  }
+
+  return (
+    <View style={styles.container}>
+      <Button title="Product Card Click" onPress={() => onProductCardClick(product)} />
+      <Button title="Add to Cart" onPress={() => onAddToCartClick(product)} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    marginVertical: 10,
+    paddingHorizontal: 16,
+    borderTopWidth: 1,
+    borderTopColor: '#DDD',
+  },
+});

package/src/contexts/AppContext.js

@@ -0,0 +1,83 @@
+import React, {createContext, useContext, useState, useEffect } from "react";
+
+export const AppContext = createContext();
+
+export const AppProvider = ({ children }) => {
+
+  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 handleSend = async () => {
+    if (!input.trim()) return;
+
+    const userMessage = input;
+    setInput('');
+
+    // Add user message to the list
+    setMessages((prev) => [...prev, { type: "user", text: userMessage }]);
+
+    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;
+        });
+      });
+
+      // 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;
+        }
+        return newMessages;
+      });
+    } catch (error) {
+      console.error('Error sending message:', 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}`;
+      }
+
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      return `You said: ${message}`;
+    } catch (error) {
+      console.error('Error handling message:', error);
+      return 'Error processing message';
+    }
+  };
+
+
+  return (
+    <AppContext.Provider
+      value={{ showModal, setShowModal, messages, setMessages, handleSend, onSendMessage, input, setInput
+      }}
+    >
+      {children}
+    </AppContext.Provider>
+  );
+};

package/src/hooks/Stream.js

@@ -0,0 +1,198 @@
+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 wsProtocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+    const wsUrl = BASE_URL.replace(/^http(s)?:\/\//, '');
+    const ENDPOINT = '/send/event';
+
+    const payload = {
+        ...data,
+        user_query: lastUserMessage, 
+        customer_name: data.customer_name
+    };
+    
+    const wsRef = useRef(null);
+
+    useEffect(() => {
+        if (startStreaming) {
+            console.log(payload)
+            const socketUrl = `${wsProtocol}${wsUrl}${ENDPOINT}`;
+            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);
+                console.log(response)
+                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 => {
+                            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"
+                                };
+                                return [
+                                    ...prevMessages.slice(0, lastMessageIndex),
+                                    updatedLastMessage
+                                ];
+                            } else {
+                                setGhostMessage(false);
+                                return [...prevMessages, { 
+                                    type: "ai", 
+                                    text: [newContent],
+                                    message_id: newMessageId,
+                                    feedback: "True"
+                                }];
+                            }
+                        });
+                        if (newMessageId) {
+                            setLastMessageId(newMessageId);
+                        }
+                        break;
+                    case 'product_cards':
+                        setMessages(prevMessages => {
+                            const lastMessageIndex = prevMessages.length - 1;
+                            if (prevMessages[lastMessageIndex] && prevMessages[lastMessageIndex].type === "ai") {
+                                const updatedLastMessage = {
+                                    ...prevMessages[lastMessageIndex],
+                                    products: response.products || [],
+                                    product_cards: "True"
+                                };
+                                return [
+                                    ...prevMessages.slice(0, lastMessageIndex),
+                                    updatedLastMessage
+                                ];
+                            } 
+                        });
+                        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':
+                        /* 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") {
+                                const updatedLastMessage = {
+                                    ...prevMessages[lastMessageIndex],
+                                    suggested_questions: true,
+                                    questions: response.suggested_questions 
+                                };
+                                return [
+                                    ...prevMessages.slice(0, lastMessageIndex),
+                                    updatedLastMessage
+                                ];
+                            } 
+                        });
+                        //setMessages((prevMessages) => [...prevMessages, questions]);
+                        break;
+                    case 'setComplete':
+                        setIsComplete(true);
+                        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/index.js

@@ -0,0 +1,18 @@
+import React, { useState, useCallback } from 'react';
+import { SafeAreaView, Text, StyleSheet, View, TextInput, ScrollView, KeyboardAvoidingView, 
+  Platform, TouchableOpacity, RefreshControl, } from 'react-native';
+import { Ionicons as Icon } from '@expo/vector-icons';
+import { AppProvider } from './contexts/AppContext';
+import { Layout } from './layout/layout'
+
+export const Chat = ({data, onProductCardClick, onAddToCartClick }) => {
+
+  return (
+    <AppProvider>
+      <Layout onProductCardClick={onProductCardClick} onAddToCartClick={onAddToCartClick}/>
+    </AppProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+});

package/src/layout/chatIcon.js

@@ -0,0 +1,38 @@
+import React, { useContext } from 'react';
+import { TouchableOpacity, View, StyleSheet } from 'react-native';
+import { Ionicons as Icon } from '@expo/vector-icons';
+import { AppContext } from '../contexts/AppContext';
+
+export const ChatIcon = () => {
+  const { setShowModal } = useContext(AppContext);
+
+  return (
+    <TouchableOpacity style={styles.iconContainer} onPress={() => setShowModal("ChatWindow")}>
+      <View style={styles.icon}>
+        <Icon name="chatbubble-ellipses" size={28} color="white" />
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  iconContainer: {
+    position: 'absolute',
+    bottom: 80,
+    right: 20,
+    zIndex: 10,
+  },
+  icon: {
+    backgroundColor: '#FFA500', 
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 3,
+    elevation: 5,
+  },
+});