srs-heritage-chatbot 1.0.0

package/src/components/input.js

@@ -0,0 +1,133 @@
+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 Ionicons from 'react-native-vector-icons/Ionicons';
+import { VoiceButton } from './voice';
+
+export const ChatInput = ({ onProductCardClick, onAddToCartClick }) => {
+  const { handleSend, input, setInput, showModal, data, isListening } = useContext(AppContext);
+  const inputRef = useRef(null);
+  
+  const handleKeyPress = ({ nativeEvent }) => {
+    if (nativeEvent.key === 'return' && !nativeEvent.shiftKey) {
+      nativeEvent.preventDefault && nativeEvent.preventDefault();
+      handleSend(input);
+      return;
+    }
+  };
+
+  const onSubmitEditing = () => {
+    if (input.trim()) {
+      handleSend(input);
+    }
+  };
+
+  return (
+    <>
+    <Text style={styles.textBeta} allowFontScaling={false}>Beta version. AI Assistant is still learning!</Text>
+    <View style={styles.inputWrapper}>
+        <View style={styles.inputContainer}>
+        <TextInput
+            ref={inputRef}
+            style={styles.input}
+            value={input}
+            onChangeText={setInput}
+            placeholder={isListening && !input ? "Listening..." : "Ask a question..."}
+            placeholderTextColor="#999"
+            editable={!isListening}
+            caretHidden={isListening}
+            showSoftInputOnFocus={!isListening}
+            multiline={false}
+            returnKeyType="send"
+            enablesReturnKeyAutomatically={true}
+            onKeyPress={handleKeyPress}
+            onSubmitEditing={onSubmitEditing}
+            selection={undefined}
+            blurOnSubmit={false}
+        />
+        <VoiceButton setInput={(text) => {
+          setInput(text);
+          if (!isListening && inputRef.current) {
+            if (Platform.OS === 'android') {
+              setTimeout(() => {
+                if (inputRef.current) {
+                  inputRef.current.setSelection(text.length, text.length);
+                }
+              }, 10);
+            } else {
+              inputRef.current.setSelection(text.length, text.length);
+            }
+          }
+        }}/>
+        <TouchableOpacity style={styles.sendButton} onPress={() => handleSend(input)} >
+            <Ionicons name="paper-plane-outline" size={24} color='#8E8E93' />
+        </TouchableOpacity>
+        </View>
+    </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  inputWrapper: {
+    backgroundColor: '#f6f6f6',
+    paddingHorizontal: 6,
+    paddingVertical: 6,
+    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',
+  },
+  inputButton: {
+    padding: 6,
+  },
+  sendButton: {
+    padding: 6,
+    marginLeft: 'auto',
+  },
+  disabledButton: {
+    opacity: 0.7,
+  },
+  textBeta: {
+    textAlign: 'center', 
+    fontSize: 11,
+    color: '#808080',
+    fontWeight: '400',
+    marginTop: 5,
+    marginBottom: 2,
+    textBreakStrategy: "simple",
+    lineHeight: 16,
+  },
+});