react-native-srschat 0.1.12 → 0.1.14

package/src/layout/chatWindow.js

@@ -1,82 +1,87 @@
-import React, { useState, useCallback, useContext } from 'react';
-import { SafeAreaView, Text, StyleSheet, View, TextInput, ScrollView, KeyboardAvoidingView, 
-    Platform, TouchableOpacity, RefreshControl, } from 'react-native';
+import React, { useState, useEffect, useContext, useRef } from 'react';
+import {
+  Text,
+  StyleSheet,
+  View,
+  TextInput,
+  TouchableOpacity,
+  Platform,
+  KeyboardAvoidingView,
+  Keyboard
+} from 'react-native';
 import { Header } from '../components/header';
 import { AppContext } from '../contexts/AppContext';
-import { Testing } from '../components/testing';
 import Ionicons from 'react-native-vector-icons/Ionicons';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import { Testing } from '../components/testing';
 
 const theme = {
   primaryColor: '#003764',
   backgroundColor: '#f6f6f6',
   textColor: '#000000',
-  inputBackgroundColor: '#f6f6f6',
+  inputBackgroundColor: '#FFFFFF',
 };
 
 export const ChatWindow = ({ onProductCardClick, onAddToCartClick }) => {
-  const { handleSend, messages, setMessages, onSendMessage, input, setInput } = useContext(AppContext)
-  
-  const [refreshing, setRefreshing] = useState(false);
+  const { handleSend, messages, input, setInput } = useContext(AppContext);
+  const scrollViewRef = useRef(null);
 
-  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);
+  useEffect(() => {
+    if (scrollViewRef.current) {
+      setTimeout(() => {
+        scrollViewRef.current.scrollToEnd({ animated: false });
+      }, 100);
     }
-  }, []);
-
-  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 /> 
+    <View style={styles.container}>
+      <Header />
 
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        style={styles.content}
-        keyboardVerticalOffset={Platform.OS === 'ios' ? 60 : 0}
+      {/* Messages area */}
+      <KeyboardAwareScrollView
+        ref={scrollViewRef}
+        contentContainerStyle={styles.messagesContent}
+        enableOnAndroid
+        contentInsetAdjustmentBehavior="never"
+        automaticallyAdjustContentInsets={false}
+        contentInset={{ bottom: 0 }}
+        keyboardShouldPersistTaps="always"
+        showsVerticalScrollIndicator={false}
+        extraScrollHeight={0}
+        onContentSizeChange={() => {
+          scrollViewRef.current?.scrollToEnd({ animated: true });
+        }}
       >
-        <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>
+        {messages.map((msg, i) => (
+          <View key={i} style={styles.messageWrapper}>
+            <View
+              style={[
+                styles.messageBubble,
+                msg.type === 'user' ? styles.userMessage : styles.aiMessage,
+              ]}
+            >
+              <Text
+                style={[
+                  styles.messageText,
+                  { color: msg.type === 'user' ? '#fff' : theme.textColor },
+                ]}
+              >
+                {msg.text}
+              </Text>
             </View>
-          ))}
-        </ScrollView>
-        
-        <Testing          
-          onProductCardClick={onProductCardClick} 
-          onAddToCartClick={onAddToCartClick} 
-        />
+          </View>
+        ))}
+      </KeyboardAwareScrollView>
+
+      <Testing          
+        onProductCardClick={onProductCardClick} 
+        onAddToCartClick={onAddToCartClick} 
+      />
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        keyboardVerticalOffset={Platform.OS === 'ios' ? 80 : 60}
+      >
         <View style={styles.inputWrapper}>
           <View style={styles.inputContainer}>
             <TextInput
@@ -91,61 +96,55 @@ export const ChatWindow = ({ onProductCardClick, onAddToCartClick }) => {
               <Ionicons name="mic-outline" size={24} color="#8E8E93" />
             </TouchableOpacity>
             <TouchableOpacity
-              style={[styles.sendButton, !input.trim() && styles.disabledButton]}
+              style={[
+                styles.sendButton,
+                !input.trim() && styles.disabledButton,
+              ]}
               onPress={handleSend}
               disabled={!input.trim()}
             >
-              <Ionicons name="paper-plane-outline" size={24} color={input.trim() ? theme.primaryColor : '#8E8E93'} />
+              <Ionicons
+                name="paper-plane-outline"
+                size={24}
+                color={input.trim() ? theme.primaryColor : '#8E8E93'}
+              />
             </TouchableOpacity>
           </View>
         </View>
       </KeyboardAvoidingView>
-      </View>
-    </SafeAreaView>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#FFFFFF',
-  },
-  chatWindow: {
-    zIndex: 1,
-    flex: 1,
-    marginTop: 40,
+    backgroundColor: theme.backgroundColor,
+    position: 'absolute',
+    zIndex: 1000,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 100,
+    pointerEvents: 'box-none',
     borderTopWidth: 1,
     borderTopColor: '#DDD',
     borderTopLeftRadius: 16,
-    borderTopRightRadius: 16, 
-    overflow: 'hidden', 
-    backgroundColor: theme.backgroundColor,
-  },
-  content: {
-    flex: 1,
-  },
-  messagesContainer: {
-    flex: 1,
+    borderTopRightRadius: 16,
+    overflow: 'hidden',
   },
   messagesContent: {
     padding: 16,
-    paddingBottom: 32,
+    justifyContent: 'flex-end'
   },
   messageWrapper: {
-    marginBottom: 16,
+    marginBottom: 0,
   },
   messageBubble: {
     maxWidth: '90%',
     padding: 12,
     paddingHorizontal: 16,
-    borderRadius: 20,
-  },
-  messageShadow: {
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.08,
-    shadowRadius: 2,
-    elevation: 2,
+    borderRadius: 12,
   },
   userMessage: {
     alignSelf: 'flex-end',
@@ -153,7 +152,8 @@ const styles = StyleSheet.create({
   },
   aiMessage: {
     alignSelf: 'flex-start',
-    backgroundColor: '#F2F2F7',
+    backgroundColor: '#FFFFFF',
+    width: '90%',
   },
   messageText: {
     fontSize: 16,
@@ -161,10 +161,11 @@ const styles = StyleSheet.create({
   },
   inputWrapper: {
     backgroundColor: '#f6f6f6',
-    paddingHorizontal: 8,
-    paddingVertical: 8,
+    paddingHorizontal: 6,
+    paddingVertical: 6,
     borderTopWidth: 1,
     borderTopColor: 'rgba(0, 0, 0, 0.1)',
+    paddingBottom: 25,
   },
   inputContainer: {
     flexDirection: 'row',
@@ -190,6 +191,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     color: '#000000',
   },
+  inputButton: {
+    padding: 6,
+  },
   sendButton: {
     padding: 6,
     marginLeft: 'auto',
@@ -198,3 +202,10 @@ const styles = StyleSheet.create({
     opacity: 0.7,
   },
 });
+
+/* 
+<Testing          
+  onProductCardClick={onProductCardClick} 
+  onAddToCartClick={onAddToCartClick} 
+/>
+  */

package/src/layout/layout.js

@@ -9,14 +9,19 @@ export const Layout = ({ onProductCardClick, onAddToCartClick }) => {
     const { showModal } = useContext(AppContext);
   
     return (
-      <View style={styles.container}>
+      <View style={styles.container} pointerEvents="box-none">
         {showModal === "Icon" ? <ChatIcon /> : <ChatWindow onProductCardClick={onProductCardClick} onAddToCartClick={onAddToCartClick}/>}
       </View>
     );
 };
   
 const styles = StyleSheet.create({
-    container: {
-      flex: 1
-    }
+  container: {
+    flex: 1,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
 });