@onairos/react-native 3.0.24 → 3.0.26

package/src/components/TrainingModal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   View,
   Text,
@@ -10,6 +10,9 @@ import {
   Animated,
   TouchableWithoutFeedback,
   SafeAreaView,
+  TextInput,
+  KeyboardAvoidingView,
+  Platform,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { COLORS } from '../constants';
@@ -17,6 +20,18 @@ import type { TrainingModalProps } from '../types';
 
 const { width, height } = Dimensions.get('window');
 
+// Dynamic training messages that appear during the process
+const TRAINING_MESSAGES = [
+  "Loading your data...",
+  "Analyzing your digital footprint...", 
+  "Your mind is very unique...",
+  "Creating your AI persona...",
+  "Building neural pathways...",
+  "Finalizing your digital twin...",
+  "Almost ready...",
+  "Training complete!"
+];
+
 export const TrainingModal: React.FC<TrainingModalProps> = ({
   visible,
   progress,
@@ -26,8 +41,47 @@ export const TrainingModal: React.FC<TrainingModalProps> = ({
   modelKey,
   username,
 }) => {
+  const [email, setEmail] = useState<string>('');
+  const [showEmailInput, setShowEmailInput] = useState<boolean>(false);
+  const [currentMessage, setCurrentMessage] = useState<string>(TRAINING_MESSAGES[0]);
+  const [messageIndex, setMessageIndex] = useState<number>(0);
+
   const progressPercentage = Math.round(progress * 100);
 
+  // Update training message based on progress
+  useEffect(() => {
+    if (progress > 0) {
+      const newIndex = Math.min(
+        Math.floor(progress * TRAINING_MESSAGES.length),
+        TRAINING_MESSAGES.length - 1
+      );
+      
+      if (newIndex !== messageIndex) {
+        setMessageIndex(newIndex);
+        setCurrentMessage(TRAINING_MESSAGES[newIndex]);
+      }
+    }
+  }, [progress, messageIndex]);
+
+  // Show email input when training is complete
+  useEffect(() => {
+    if (progress >= 1 && !showEmailInput) {
+      setShowEmailInput(true);
+    }
+  }, [progress, showEmailInput]);
+
+  const handleEmailSubmit = () => {
+    if (email.trim() && onComplete) {
+      // Pass email data to the completion handler
+      onComplete();
+    }
+  };
+
+  const isValidEmail = (email: string): boolean => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
   return (
     <Modal
       visible={visible}
@@ -36,65 +90,119 @@ export const TrainingModal: React.FC<TrainingModalProps> = ({
       statusBarTranslucent
       onRequestClose={onCancel}
     >
-      <TouchableWithoutFeedback>
-        <View style={styles.modalOverlay}>
-          <TouchableWithoutFeedback>
-            <View style={styles.bottomSheet}>
-              <View style={styles.handleContainer}>
-                <View style={styles.handle} />
-              </View>
-              
-              <SafeAreaView style={styles.container}>
-                <View style={styles.content}>
-                  <Icon name="auto_awesome" size={48} color={COLORS.primary} />
-                  
-                  <Text style={styles.title}>Training Your AI Model</Text>
-                  <Text style={styles.subtitle}>
-                    We're analyzing your social media data to create your personalized AI model
-                  </Text>
-
-                  <View style={styles.progressContainer}>
-                    <View style={styles.progressBar}>
-                      <View
-                        style={[
-                          styles.progressFill,
-                          { width: `${progressPercentage}%` },
-                        ]}
-                      />
-                    </View>
-                    <Text style={styles.progressText}>{progressPercentage}%</Text>
-                  </View>
+      <KeyboardAvoidingView 
+        style={styles.modalOverlay}
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      >
+        <TouchableWithoutFeedback>
+          <View style={styles.modalOverlay}>
+            <TouchableWithoutFeedback>
+              <View style={styles.bottomSheet}>
+                <View style={styles.handleContainer}>
+                  <View style={styles.handle} />
+                </View>
+                
+                <SafeAreaView style={styles.container}>
+                  <View style={styles.content}>
+                    {!showEmailInput ? (
+                      <>
+                        {/* Training in progress */}
+                        <Icon name="auto_awesome" size={48} color={COLORS.primary} />
+                        
+                        <Text style={styles.title}>Training Your AI Model</Text>
+                        <Text style={styles.subtitle}>
+                          We're analyzing your social media data to create your personalized AI model
+                        </Text>
 
-                  <Text style={styles.etaText}>Estimated time remaining: {eta}</Text>
+                        <View style={styles.progressContainer}>
+                          <View style={styles.progressBar}>
+                            <Animated.View
+                              style={[
+                                styles.progressFill,
+                                { width: `${progressPercentage}%` },
+                              ]}
+                            />
+                          </View>
+                          <Text style={styles.progressText}>{progressPercentage}%</Text>
+                        </View>
 
-                  <View style={styles.loadingContainer}>
-                    <ActivityIndicator size="small" color={COLORS.primary} />
-                    <Text style={styles.loadingText}>Processing your data...</Text>
-                  </View>
+                        <Text style={styles.etaText}>Estimated time remaining: {eta}</Text>
 
-                  <View style={styles.footer}>
-                    <TouchableOpacity
-                      style={styles.cancelButton}
-                      onPress={onCancel}
-                    >
-                      <Text style={styles.cancelButtonText}>Cancel</Text>
-                    </TouchableOpacity>
-                    
-                    {progress >= 1 && (
-                      <TouchableOpacity
-                        style={styles.completeButton}
-                        onPress={onComplete}
-                      >
-                        <Text style={styles.completeButtonText}>Complete</Text>
-                      </TouchableOpacity>
+                        <View style={styles.loadingContainer}>
+                          <ActivityIndicator size="small" color={COLORS.primary} />
+                          <Text style={styles.loadingText}>{currentMessage}</Text>
+                        </View>
+
+                        <View style={styles.footer}>
+                          <TouchableOpacity
+                            style={styles.cancelButton}
+                            onPress={onCancel}
+                          >
+                            <Text style={styles.cancelButtonText}>Cancel</Text>
+                          </TouchableOpacity>
+                        </View>
+                      </>
+                    ) : (
+                      <>
+                        {/* Training complete - Email input */}
+                        <Icon name="check_circle" size={48} color="#4CAF50" />
+                        
+                        <Text style={styles.title}>Training Complete!</Text>
+                        <Text style={styles.subtitle}>
+                          Your AI model is ready. Enter your email to receive your account details and access your digital twin.
+                        </Text>
+
+                        <View style={styles.emailContainer}>
+                          <Text style={styles.emailLabel}>Email Address</Text>
+                          <TextInput
+                            style={styles.emailInput}
+                            placeholder="Enter your email address"
+                            placeholderTextColor="#999"
+                            value={email}
+                            onChangeText={setEmail}
+                            keyboardType="email-address"
+                            autoCapitalize="none"
+                            autoCorrect={false}
+                            autoComplete="email"
+                          />
+                          <Text style={styles.emailHint}>
+                            We'll send you login credentials and access to your AI persona
+                          </Text>
+                        </View>
+
+                        <View style={styles.footer}>
+                          <TouchableOpacity
+                            style={styles.cancelButton}
+                            onPress={onCancel}
+                          >
+                            <Text style={styles.cancelButtonText}>Cancel</Text>
+                          </TouchableOpacity>
+                          
+                          <TouchableOpacity
+                            style={[
+                              styles.completeButton,
+                              !isValidEmail(email) && styles.completeButtonDisabled
+                            ]}
+                            onPress={handleEmailSubmit}
+                            disabled={!isValidEmail(email)}
+                          >
+                            <Text style={[
+                              styles.completeButtonText,
+                              !isValidEmail(email) && styles.completeButtonTextDisabled
+                            ]}>
+                              Complete Setup
+                            </Text>
+                          </TouchableOpacity>
+                        </View>
+                      </>
                     )}
                   </View>
-                </View>
-              </SafeAreaView>
-            </View>
-          </TouchableWithoutFeedback>
-        </View>
-      </TouchableWithoutFeedback>
+                </SafeAreaView>
+              </View>
+            </TouchableWithoutFeedback>
+          </View>
+        </TouchableWithoutFeedback>
+      </KeyboardAvoidingView>
     </Modal>
   );
 };
@@ -109,7 +217,7 @@ const styles = StyleSheet.create({
   bottomSheet: {
     backgroundColor: '#fff',
     width: width,
-    height: height * 0.6,
+    height: height * 0.7,
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
     overflow: 'hidden',
@@ -150,6 +258,7 @@ const styles = StyleSheet.create({
     color: COLORS.text.secondary,
     textAlign: 'center',
     marginBottom: 32,
+    lineHeight: 22,
   },
   progressContainer: {
     width: '100%',
@@ -183,9 +292,37 @@ const styles = StyleSheet.create({
     marginBottom: 32,
   },
   loadingText: {
+    fontSize: 16,
+    color: COLORS.text.primary,
+    marginLeft: 12,
+    fontWeight: '500',
+  },
+  emailContainer: {
+    width: '100%',
+    marginBottom: 32,
+  },
+  emailLabel: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: COLORS.text.primary,
+    marginBottom: 8,
+  },
+  emailInput: {
+    width: '100%',
+    height: 48,
+    borderWidth: 1,
+    borderColor: '#E0E0E0',
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    fontSize: 16,
+    color: COLORS.text.primary,
+    backgroundColor: '#F8F8F8',
+  },
+  emailHint: {
     fontSize: 14,
     color: COLORS.text.secondary,
-    marginLeft: 8,
+    marginTop: 8,
+    textAlign: 'center',
   },
   footer: {
     flexDirection: 'row',
@@ -210,13 +347,17 @@ const styles = StyleSheet.create({
     paddingVertical: 16,
     paddingHorizontal: 32,
     borderRadius: 16,
-    backgroundColor: '#fff',
-    borderWidth: 1,
-    borderColor: '#000',
+    backgroundColor: '#000',
+  },
+  completeButtonDisabled: {
+    backgroundColor: '#E0E0E0',
   },
   completeButtonText: {
     fontSize: 16,
     fontWeight: '600',
-    color: '#000',
+    color: '#fff',
+  },
+  completeButtonTextDisabled: {
+    color: '#999',
   },
 });