react-native-srschat 0.1.7 → 0.1.9

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,323 +0,0 @@
-import React from 'react';
-import {
-  SafeAreaView,
-  Text,
-  StyleSheet,
-  View,
-  TextInput,
-  ScrollView,
-  KeyboardAvoidingView,
-  Platform,
-  TouchableOpacity,
-  RefreshControl,
-} from 'react-native';
-import { Ionicons as Icon } from '@expo/vector-icons';
-
-interface ChatProps {
-  onSendMessage: (
-    message: string,
-    onStream?: (chunk: string) => void
-  ) => Promise<string>;
-  placeholder?: string;
-  theme?: {
-    primaryColor?: string;
-    backgroundColor?: string;
-    textColor?: string;
-    inputBackgroundColor?: string;
-  };
-}
-
-const defaultTheme = {
-  primaryColor: '#007AFF',
-  backgroundColor: '#FFFFFF',
-  textColor: '#000000',
-  inputBackgroundColor: '#FFFFFF',
-};
-
-export const Chat: React.FC<ChatProps> = ({
-  onSendMessage,
-  placeholder = 'Type your message here...',
-  theme = defaultTheme,
-}) => {
-  const [message, setMessage] = React.useState('');
-  const [messages, setMessages] = React.useState<Array<{
-    text: string;
-    isUser: boolean;
-    timestamp: string;
-  }>>([]);
-  const [refreshing, setRefreshing] = React.useState(false);
-
-  const onRefresh = React.useCallback(async () => {
-    setRefreshing(true);
-    try {
-      const response = await onSendMessage("Hi, I'm refreshing the chat!");
-      const currentTime = new Date().toLocaleTimeString([], { 
-        hour: 'numeric',
-        minute: '2-digit',
-        hour12: true 
-      });
-      setMessages(prev => [...prev, { 
-        text: response, 
-        isUser: false,
-        timestamp: currentTime
-      }]);
-    } catch (error) {
-      console.error('Error refreshing chat:', error);
-    } finally {
-      setRefreshing(false);
-    }
-  }, [onSendMessage]);
-
-  const handleSend = async () => {
-    if (!message.trim()) return;
-    
-    const userMessage = message;
-    setMessage('');
-    const currentTime = new Date().toLocaleTimeString([], { 
-      hour: 'numeric',
-      minute: '2-digit',
-      hour12: true 
-    });
-    
-    setMessages(prev => [...prev, { 
-      text: userMessage, 
-      isUser: true,
-      timestamp: currentTime
-    }]);
-    
-    try {
-      // Create bot message placeholder before streaming
-      setMessages(prev => [...prev, {
-        text: '',
-        isUser: false,
-        timestamp: currentTime
-      }]);
-
-      const response = await onSendMessage(
-        userMessage,
-        (chunk) => {
-          setMessages(prev => {
-            const newMessages = [...prev];
-            const lastMessage = newMessages[newMessages.length - 1];
-            if (lastMessage && !lastMessage.isUser) {
-              lastMessage.text += chunk;
-            }
-            return newMessages;
-          });
-        }
-      );
-
-      // Only update if final response is different from streamed content
-      setMessages(prev => {
-        const newMessages = [...prev];
-        const lastMessage = newMessages[newMessages.length - 1];
-        if (lastMessage && !lastMessage.isUser && lastMessage.text !== response) {
-          lastMessage.text = response;
-        }
-        return newMessages;
-      });
-    } catch (error) {
-      console.error('Error sending message:', error);
-    }
-  };
-
-  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={[styles.container, { backgroundColor: theme.backgroundColor }]}>
-      <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 || defaultTheme.primaryColor}
-              colors={[theme.primaryColor || defaultTheme.primaryColor]}
-              progressBackgroundColor="#ffffff"
-            />
-          }
-        >
-          {messages.map((msg, i) => (
-            <View key={i} style={styles.messageWrapper}>
-              <View style={[getMessageStyle(msg.isUser), styles.messageShadow]}>
-                <Text style={getTextStyle(msg.isUser)}>
-                  {msg.text}
-                </Text>
-              </View>
-              <Text style={[
-                styles.timestamp,
-                msg.isUser ? styles.timestampRight : styles.timestampLeft
-              ]}>
-                {msg.timestamp}
-              </Text>
-            </View>
-          ))}
-        </ScrollView>
-
-        <View style={styles.inputWrapper}>
-          <View style={styles.inputContainer}>
-            <TextInput
-              style={styles.input}
-              value={message}
-              onChangeText={setMessage}
-              placeholder={placeholder}
-              placeholderTextColor="#999"
-              multiline
-            />
-          </View>
-          <View style={styles.inputButtonsContainer}>
-            <TouchableOpacity style={styles.inputButton}>
-              <Icon name="add" size={28} color="#8E8E93" />
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.inputButton}>
-              <Icon name="refresh-outline" size={28} color="#8E8E93" />
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.inputButton}>
-              <Icon name="mic-outline" size={28} color="#8E8E93" />
-            </TouchableOpacity>
-            <TouchableOpacity 
-              style={[
-                styles.sendButton,
-                !message.trim() && styles.disabledButton
-              ]} 
-              onPress={handleSend}
-              disabled={!message.trim()}
-            >
-              <Icon 
-                name="paper-plane-outline"
-                size={28} 
-                color={message.trim() ? theme.primaryColor : '#8E8E93'}
-              />
-            </TouchableOpacity>
-          </View>
-        </View>
-      </KeyboardAvoidingView>
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#FFFFFF',
-  },
-  content: {
-    flex: 1,
-  },
-  messagesContainer: {
-    flex: 1,
-  },
-  messagesContent: {
-    padding: 16,
-    paddingBottom: 32,
-  },
-  messageWrapper: {
-    marginBottom: 16,
-  },
-  timestamp: {
-    fontSize: 12,
-    color: '#8E8E93',
-    marginTop: 4,
-    paddingHorizontal: 4,
-  },
-  timestampRight: {
-    textAlign: 'right',
-  },
-  timestampLeft: {
-    textAlign: 'left',
-  },
-  messageBubble: {
-    maxWidth: '70%',
-    padding: 12,
-    paddingHorizontal: 16,
-    borderRadius: 20,
-    backgroundColor: '#FFFFFF',
-  },
-  messageShadow: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 1,
-    },
-    shadowOpacity: 0.08,
-    shadowRadius: 2,
-    elevation: 2,
-  },
-  userMessage: {
-    alignSelf: 'flex-end',
-    backgroundColor: '#007AFF',
-  },
-  botMessage: {
-    alignSelf: 'flex-start',
-    backgroundColor: '#F2F2F7',
-  },
-  messageText: {
-    fontSize: 16,
-    lineHeight: 22,
-  },
-  inputWrapper: {
-    backgroundColor: '#FFFFFF',
-    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,
-    maxHeight: 100,
-    color: '#000000',
-  },
-  inputButtonsContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 8,
-    marginTop: 4,
-  },
-  inputButton: {
-    padding: 6,
-    marginHorizontal: 4,
-  },
-  sendButton: {
-    padding: 6,
-    marginLeft: 'auto',
-  },
-  disabledButton: {
-    opacity: 0.7,
-  },
-});