react-native-srschat 0.1.5 → 0.1.8

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,
+  },
+});

package/src/layout/chatWindow.js

@@ -0,0 +1,200 @@
+import React, { useState, useCallback, useContext } 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 { Header } from '../components/header';
+import { AppContext } from '../contexts/AppContext';
+import { Testing } from '../components/testing';
+
+const theme = {
+  primaryColor: '#003764',
+  backgroundColor: '#f6f6f6',
+  textColor: '#000000',
+  inputBackgroundColor: '#f6f6f6',
+};
+
+export const ChatWindow = ({ onProductCardClick, onAddToCartClick }) => {
+  const { handleSend, messages, setMessages, onSendMessage, input, setInput } = useContext(AppContext)
+  
+  const [refreshing, setRefreshing] = useState(false);
+
+  const onRefresh = useCallback(async () => {
+    setRefreshing(true);
+    try {
+      const response = await onSendMessage("Hi, I'm refreshing the chat!");
+      setMessages((prev) => [...prev, { text: response, isUser: false }]);
+    } catch (error) {
+      console.error('Error refreshing chat:', error);
+    } finally {
+      setRefreshing(false);
+    }
+  }, []);
+
+  const getMessageStyle = (type) => [
+    styles.messageBubble,
+    type === "user" ? styles.userMessage : styles.aiMessage,
+    { backgroundColor: type === "user" ? theme.primaryColor : '#E8E8E8' },
+  ];
+
+  const getTextStyle = (type) => [
+    styles.messageText,
+    { color: type === "user" ? '#fff' : theme.textColor },
+  ];
+
+  return (
+    <SafeAreaView style={[styles.container, { backgroundColor: theme.backgroundColor }]}>
+      <View style={styles.chatWindow}>
+      <Header /> 
+
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.content}
+        keyboardVerticalOffset={Platform.OS === 'ios' ? 60 : 0}
+      >
+        <ScrollView
+          style={styles.messagesContainer}
+          contentContainerStyle={styles.messagesContent}
+          refreshControl={
+            <RefreshControl
+              refreshing={refreshing}
+              onRefresh={onRefresh}
+              tintColor={theme.primaryColor}
+              colors={[theme.primaryColor]}
+              progressBackgroundColor="#ffffff"
+            />
+          }
+        >
+          {messages.map((msg, i) => (
+            <View key={i} style={styles.messageWrapper}>
+              <View style={[getMessageStyle(msg.type), styles.messageShadow]}>
+                <Text style={getTextStyle(msg.type)}>{msg.text}</Text>
+              </View>
+            </View>
+          ))}
+        </ScrollView>
+        
+        <Testing          
+          onProductCardClick={onProductCardClick} 
+          onAddToCartClick={onAddToCartClick} 
+        />
+        <View style={styles.inputWrapper}>
+          <View style={styles.inputContainer}>
+            <TextInput
+              style={styles.input}
+              value={input}
+              onChangeText={setInput}
+              placeholder="Ask a question..."
+              placeholderTextColor="#999"
+              multiline
+            />
+            <TouchableOpacity style={styles.inputButton}>
+              <Icon name="mic-outline" size={24} color="#8E8E93" />
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[styles.sendButton, !input.trim() && styles.disabledButton]}
+              onPress={handleSend}
+              disabled={!input.trim()}
+            >
+              <Icon name="paper-plane-outline" size={24} color={input.trim() ? theme.primaryColor : '#8E8E93'} />
+            </TouchableOpacity>
+          </View>
+        </View>
+      </KeyboardAvoidingView>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+  },
+  chatWindow: {
+    zIndex: 1,
+    flex: 1,
+    marginTop: 40,
+    borderTopWidth: 1,
+    borderTopColor: '#DDD',
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16, 
+    overflow: 'hidden', 
+    backgroundColor: theme.backgroundColor,
+  },
+  content: {
+    flex: 1,
+  },
+  messagesContainer: {
+    flex: 1,
+  },
+  messagesContent: {
+    padding: 16,
+    paddingBottom: 32,
+  },
+  messageWrapper: {
+    marginBottom: 16,
+  },
+  messageBubble: {
+    maxWidth: '90%',
+    padding: 12,
+    paddingHorizontal: 16,
+    borderRadius: 20,
+  },
+  messageShadow: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.08,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  userMessage: {
+    alignSelf: 'flex-end',
+    backgroundColor: theme.primaryColor,
+  },
+  aiMessage: {
+    alignSelf: 'flex-start',
+    backgroundColor: '#F2F2F7',
+  },
+  messageText: {
+    fontSize: 16,
+    lineHeight: 22,
+  },
+  inputWrapper: {
+    backgroundColor: '#f6f6f6',
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    borderTopWidth: 1,
+    borderTopColor: 'rgba(0, 0, 0, 0.1)',
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 16,
+    margin: 8,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  input: {
+    flex: 1,
+    fontSize: 16,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    color: '#000000',
+  },
+  sendButton: {
+    padding: 6,
+    marginLeft: 'auto',
+  },
+  disabledButton: {
+    opacity: 0.7,
+  },
+});

package/src/layout/layout.js

@@ -0,0 +1,23 @@
+import React, { useState, useCallback, useContext } 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 { ChatWindow } from './chatWindow';
+import { AppContext } from '../contexts/AppContext';
+import { ChatIcon } from './chatIcon';
+
+export const Layout = ({ onProductCardClick, onAddToCartClick }) => {
+    const { showModal } = useContext(AppContext);
+  
+    return (
+      <View style={styles.container}>
+        {showModal === "Icon" ? <ChatIcon /> : <ChatWindow onProductCardClick={onProductCardClick} onAddToCartClick={onAddToCartClick}/>}
+      </View>
+    );
+};
+  
+const styles = StyleSheet.create({
+    container: {
+      flex: 1
+    }
+});

package/src/index.tsx

@@ -1,194 +0,0 @@
-import React from 'react';
-import {
-  SafeAreaView,
-  Text,
-  StyleSheet,
-  View,
-  TextInput,
-  ScrollView,
-  KeyboardAvoidingView,
-  Platform,
-  Button,
-} from 'react-native';
-
-interface ChatProps {
-  onSendMessage: (message: string) => Promise<string>;
-  placeholder?: string;
-  theme?: {
-    primaryColor?: string;
-    backgroundColor?: string;
-    textColor?: string;
-  };
-}
-
-const defaultTheme = {
-  primaryColor: '#007AFF',
-  backgroundColor: '#FFFFFF',
-  textColor: '#000000',
-};
-
-export const Chat: React.FC<ChatProps> = ({
-  onSendMessage,
-  theme = defaultTheme,
-}) => {
-  const [message, setMessage] = React.useState('');
-  const [messages, setMessages] = React.useState<Array<{text: string; isUser: boolean}>>([]);
-
-  const handleSend = async () => {
-    if (!message.trim()) return;
-    
-    const userMessage = message;
-    setMessage('');
-    setMessages(prev => [...prev, { text: userMessage, isUser: true }]);
-    
-    try {
-      const response = await onSendMessage(userMessage);
-      setMessages(prev => [...prev, { text: response, isUser: false }]);
-    } catch (error) {
-      console.error('Error sending message:', error);
-    }
-  };
-
-  const containerStyle = [
-    styles.container,
-    {
-      backgroundColor: theme.backgroundColor,
-    },
-  ];
-
-  const getMessageStyle = (fromUser: boolean) => [
-    styles.messageBubble,
-    fromUser ? styles.userMessage : styles.botMessage,
-    { backgroundColor: fromUser ? theme.primaryColor : '#E8E8E8' },
-  ];
-
-  const getTextStyle = (fromUser: boolean) => [
-    styles.messageText,
-    { color: fromUser ? '#fff' : theme.textColor },
-  ];
-
-  return (
-    <SafeAreaView style={containerStyle} testID="chat-container">
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        style={styles.content}
-      >
-        <ScrollView style={styles.messagesContainer}>
-          {messages.map((msg, i) => (
-            <View
-              key={i}
-              style={getMessageStyle(msg.isUser)}
-            >
-              <Text style={getTextStyle(msg.isUser)}>
-                {msg.text}
-              </Text>
-            </View>
-          ))}
-        </ScrollView>
-        <View style={styles.inputContainer}>
-          <TextInput
-            style={[styles.input, { color: theme.textColor }]}
-            value={message}
-            onChangeText={setMessage}
-            placeholder="Type a message..."
-            placeholderTextColor="#999"
-          />
-          <Button
-            title="Send"
-            onPress={handleSend}
-            color={theme.primaryColor}
-          />
-        </View>
-      </KeyboardAvoidingView>
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#FFFFFF',
-  },
-  content: {
-    flex: 1,
-    backgroundColor: '#F8F9FA',
-  },
-  messagesContainer: {
-    flex: 1,
-    padding: 20,
-    paddingTop: 30,
-  },
-  messageBubble: {
-    maxWidth: '85%',
-    padding: 16,
-    borderRadius: 20,
-    marginBottom: 16,
-    backgroundColor: '#FFFFFF',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.05,
-    shadowRadius: 8,
-    elevation: 3,
-  },
-  userMessage: {
-    alignSelf: 'flex-end',
-    backgroundColor: '#FFFFFF',
-    borderWidth: 1,
-    borderColor: 'rgba(0, 0, 0, 0.04)',
-  },
-  botMessage: {
-    alignSelf: 'flex-start',
-    backgroundColor: '#FFFFFF',
-    borderWidth: 1,
-    borderColor: 'rgba(0, 0, 0, 0.04)',
-  },
-  messageText: {
-    fontSize: 15,
-    lineHeight: 22,
-    fontWeight: '400',
-    color: '#2C2C2E',
-    letterSpacing: 0.2,
-  },
-  inputContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    backgroundColor: '#FFFFFF',
-    borderTopWidth: 1,
-    borderTopColor: 'rgba(0, 0, 0, 0.06)',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: -8,
-    },
-    shadowOpacity: 0.04,
-    shadowRadius: 12,
-    elevation: 8,
-    marginTop: 'auto',
-  },
-  input: {
-    flex: 1,
-    backgroundColor: '#F8F9FA',
-    borderRadius: 16,
-    borderWidth: 1,
-    borderColor: 'rgba(0, 0, 0, 0.06)',
-    paddingHorizontal: 20,
-    paddingVertical: 12,
-    marginRight: 12,
-    fontSize: 15,
-    maxHeight: 120,
-    color: '#2C2C2E',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 1,
-    },
-    shadowOpacity: 0.04,
-    shadowRadius: 4,
-    elevation: 2,
-  },
-});