@onairos/react-native 3.0.39 → 3.0.42

package/src/components/TrainingModal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   View,
   Text,
@@ -10,8 +10,10 @@ import {
   Animated,
   TouchableWithoutFeedback,
   SafeAreaView,
+  Image,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
+import { io, Socket } from 'socket.io-client';
 import { COLORS } from '../constants';
 import type { TrainingModalProps } from '../types';
 
@@ -26,7 +28,170 @@ export const TrainingModal: React.FC<TrainingModalProps> = ({
   modelKey,
   username,
 }) => {
-  const progressPercentage = Math.round(progress * 100);
+  // Socket and training state
+  const socketRef = useRef<Socket | null>(null);
+  const [socketConnected, setSocketConnected] = useState(false);
+  const [trainingStatus, setTrainingStatus] = useState('Initializing...');
+  const [hasError, setHasError] = useState(false);
+  const [isTrainingComplete, setIsTrainingComplete] = useState(false);
+  const [userTraits, setUserTraits] = useState<any>(null);
+  const [inferenceResults, setInferenceResults] = useState<any>(null);
+  const [internalProgress, setInternalProgress] = useState(0);
+  
+  // Use internal progress if available, otherwise fall back to prop progress
+  const currentProgress = internalProgress > 0 ? internalProgress / 100 : progress;
+  const progressPercentage = Math.round(currentProgress * 100);
+  
+  // Mock user data for now - in real implementation this would come from props
+  const userToken = 'mock-token'; // TODO: Get from actual auth
+  const userInfo = {
+    username: username || 'mobile_user',
+    email: null,
+    id: null,
+    name: username || 'mobile_user'
+  };
+
+  // Start Enoch training via API
+  const startEnochTraining = async (socketId: string) => {
+    try {
+      setTrainingStatus('Starting training...');
+      setInternalProgress(10);
+      
+      if (!userToken) {
+        throw new Error('No authentication token available');
+      }
+      
+      console.log('🚀 Starting Enoch training with socketId:', socketId);
+      
+      // Prepare user data for training
+      const trainingData = {
+        socketId,
+        username: userInfo?.username || userInfo?.name || username || 'mobile_user',
+        email: userInfo?.email || null,
+        modelKey: modelKey || null,
+        userId: userInfo?.id || null
+      };
+      
+      console.log('📤 Sending training data:', trainingData);
+      
+      // For now, simulate the API call since we don't have real tokens
+      // TODO: Uncomment when real authentication is available
+      /*
+      const response = await fetch('https://api2.onairos.uk/enoch/trainModel/mobile', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${userToken}`
+        },
+        body: JSON.stringify(trainingData)
+      });
+      
+      const result = await response.json();
+      
+      if (result.success) {
+        console.log('🚀 Training Started:', result.message);
+        setTrainingStatus('Training model...');
+        setInternalProgress(20);
+      } else {
+        console.error('Training start failed:', result.error);
+        setTrainingStatus(`Error: ${result.error}`);
+        setHasError(true);
+      }
+      */
+      
+      // Simulate successful training start
+      console.log('🚀 Training Started (simulated)');
+      setTrainingStatus('Training model...');
+      setInternalProgress(20);
+      
+    } catch (error) {
+      console.error('Training start error:', error);
+      setTrainingStatus(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      setHasError(true);
+    }
+  };
+  
+  // Setup socket connection and training
+  useEffect(() => {
+    if (!visible || !userInfo) return;
+    
+    console.log('Setting up socket connection for training...');
+    console.log('🧑‍💻 User info available:', userInfo);
+    
+    // For now, simulate the socket connection since we don't have real auth
+    // TODO: Uncomment when real authentication is available
+    /*
+    // Initialize socket connection
+    socketRef.current = io('https://api2.onairos.uk', {
+      transports: ['websocket'],
+      autoConnect: false
+    });
+    
+    // Socket event listeners
+    socketRef.current.on('connect', () => {
+      console.log('✅ Socket connected for training');
+      setSocketConnected(true);
+      const socketId = socketRef.current?.id;
+      if (socketId) {
+        startEnochTraining(socketId);
+      }
+    });
+    
+    socketRef.current.on('disconnect', () => {
+      console.log('❌ Socket disconnected');
+      setSocketConnected(false);
+    });
+    
+    socketRef.current.on('trainingCompleted', (data) => {
+      console.log('✅ Training Complete:', data);
+      setTrainingStatus('Running test inference...');
+      setInternalProgress(60);
+    });
+    
+    socketRef.current.on('inferenceCompleted', (data) => {
+      console.log('🧠 Inference Complete:', data);
+      setTrainingStatus('Uploading to S3...');
+      setInternalProgress(80);
+      setUserTraits(data.traits);
+      setInferenceResults(data.inferenceResults);
+    });
+    
+    socketRef.current.on('modelStandby', (data) => {
+      console.log('🎉 All Complete:', data);
+      setIsTrainingComplete(true);
+      setTrainingStatus('Complete!');
+      setInternalProgress(100);
+    });
+    
+    socketRef.current.on('trainingUpdate', (data) => {
+      if (data.error) {
+        console.error('Training update error:', data.error);
+        setTrainingStatus(`Error: ${data.error}`);
+        setHasError(true);
+      } else if (data.progress) {
+        setInternalProgress(data.progress);
+        setTrainingStatus(data.status || 'Training in progress...');
+      }
+    });
+    
+    // Connect to socket
+    socketRef.current.connect();
+    */
+    
+    // Simulate socket connection and training for now
+    console.log('🔌 Simulating socket connection...');
+    setSocketConnected(true);
+    startEnochTraining('simulated-socket-id');
+    
+    // Cleanup function
+    return () => {
+      if (socketRef.current) {
+        console.log('🔌 Disconnecting training socket...');
+        socketRef.current.disconnect();
+        socketRef.current = null;
+      }
+    };
+  }, [visible, userInfo]);
 
   return (
     <Modal
@@ -46,14 +211,20 @@ export const TrainingModal: React.FC<TrainingModalProps> = ({
               
               <SafeAreaView style={styles.container}>
                 <View style={styles.content}>
-                  <View style={styles.onairosLogo}>
-                    <Text style={styles.onairosLogoText}>O</Text>
-                  </View>
+                  <Image 
+                    source={require('../assets/images/onairos_logo.png')} 
+                    style={styles.onairosLogo}
+                    resizeMode="contain"
+                  />
                   
                   <Text style={styles.title}>Training Your AI</Text>
                   <Text style={styles.subtitle}>
                     Creating your personalized model
                   </Text>
+                  
+                  <Text style={styles.statusText}>
+                    {trainingStatus}
+                  </Text>
 
                   <View style={styles.progressContainer}>
                     <View style={styles.progressBar}>
@@ -71,8 +242,17 @@ export const TrainingModal: React.FC<TrainingModalProps> = ({
 
                   <View style={styles.loadingContainer}>
                     <ActivityIndicator size="small" color={COLORS.primary} />
-                    <Text style={styles.loadingText}>Processing your data...</Text>
+                    <Text style={styles.loadingText}>
+                      {socketConnected ? 'Processing your data...' : 'Connecting to training server...'}
+                    </Text>
                   </View>
+                  
+                  {hasError && (
+                    <View style={styles.errorContainer}>
+                      <Icon name="error-outline" size={24} color="#FF6B6B" />
+                      <Text style={styles.errorText}>Training encountered an error</Text>
+                    </View>
+                  )}
 
                   <View style={styles.footer}>
                     <TouchableOpacity
@@ -82,7 +262,7 @@ export const TrainingModal: React.FC<TrainingModalProps> = ({
                       <Text style={styles.cancelButtonText}>Cancel</Text>
                     </TouchableOpacity>
                     
-                    {progress >= 1 && (
+                    {(currentProgress >= 1 || isTrainingComplete) && (
                       <TouchableOpacity
                         style={styles.completeButton}
                         onPress={onComplete}
@@ -153,6 +333,11 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     marginBottom: 32,
   },
+  statusText: {
+    fontSize: 14,
+    color: COLORS.text.secondary,
+    marginBottom: 24,
+  },
   progressContainer: {
     width: '100%',
     marginBottom: 16,
@@ -224,14 +409,15 @@ const styles = StyleSheet.create({
   onairosLogo: {
     width: 48,
     height: 48,
-    borderRadius: 24,
-    backgroundColor: COLORS.primary,
-    justifyContent: 'center',
+  },
+  errorContainer: {
+    flexDirection: 'row',
     alignItems: 'center',
+    marginBottom: 24,
   },
-  onairosLogoText: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: '#fff',
+  errorText: {
+    fontSize: 14,
+    color: '#FF6B6B',
+    marginLeft: 8,
   },
 });

package/src/components/UniversalOnboarding.tsx

@@ -15,6 +15,7 @@ import {
   Image,
   Switch,
   Linking,
+  Alert,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { PlatformList } from './PlatformList';
@@ -23,7 +24,7 @@ import { TrainingModal } from './TrainingModal';
 import { OAuthWebView } from './onboarding/OAuthWebView';
 import { useConnections } from '../hooks/useConnections';
 import { COLORS, DEEP_LINK_CONFIG } from '../constants';
-import { initiateOAuth, initiateNativeAuth, hasNativeSDK, isOAuthCallback } from '../services/platformAuthService';
+import { initiateOAuth, initiateNativeAuth, hasNativeSDK, isOAuthCallback, testApiConnectivity } from '../services/platformAuthService';
 import type { UniversalOnboardingProps, ConnectionStatus } from '../types';
 
 const { height, width } = Dimensions.get('window');
@@ -161,15 +162,27 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
       // Attempt to connect platform
       try {
         setIsConnectingPlatform(true);
-        console.log(`Initiating connection for ${platformId}`);
+        console.log(`🔌 Initiating connection for ${platformId}`);
+        
+        // Test API connectivity first
+        console.log('🔍 Testing API connectivity...');
+        const connectivityTest = await testApiConnectivity();
+        
+        if (!connectivityTest.success) {
+          console.error('❌ API connectivity test failed:', connectivityTest.error);
+          Alert.alert('Network Error', `${connectivityTest.error}\n\nPlease check your internet connection and try again.`);
+          return;
+        }
+        
+        console.log('✅ API connectivity confirmed');
         
         // Check if platform has a native SDK
         if (hasNativeSDK(platformId)) {
-          console.log(`Using native SDK for ${platformId}`);
+          console.log(`📱 Using native SDK for ${platformId}`);
           // Use native SDK for authentication
           const success = await initiateNativeAuth(platformId);
           if (success) {
-            console.log(`Native authentication successful for ${platformId}`);
+            console.log(`✅ Native authentication successful for ${platformId}`);
             // Update platform toggle state
             setPlatformToggles(prev => ({
               ...prev,
@@ -183,26 +196,28 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
             }));
           }
         } else {
-          console.log(`Initiating OAuth flow for ${platformId}`);
+          console.log(`🌐 Initiating OAuth flow for ${platformId}`);
           // Use OAuth flow through proxy server
           const oauthUrl = await initiateOAuth(platformId, username, AppName);
           if (oauthUrl) {
-            console.log(`Received OAuth URL for ${platformId}: ${oauthUrl}`);
+            console.log(`✅ Received OAuth URL for ${platformId}:`, oauthUrl);
             setCurrentPlatform(platformId);
             setOauthUrl(oauthUrl);
             setStep('oauth');
           } else {
-            console.error(`No OAuth URL returned for ${platformId}`);
+            console.error(`❌ No OAuth URL returned for ${platformId}`);
+            Alert.alert('Error', 'Failed to get authorization URL for this platform. Please try again.');
           }
         }
       } catch (error) {
-        console.error(`Error connecting ${platformId}:`, error);
+        console.error(`❌ Error connecting ${platformId}:`, error);
+        Alert.alert('Connection Error', `Failed to connect to ${platformId}: ${error instanceof Error ? error.message : 'Unknown error'}`);
       } finally {
         setIsConnectingPlatform(false);
       }
     } else {
       // Disconnect platform
-      console.log(`Disconnecting ${platformId}`);
+      console.log(`🔌 Disconnecting ${platformId}`);
       setPlatformToggles(prev => ({
         ...prev,
         [platformId]: false
@@ -215,7 +230,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
         return newConnections;
       });
     }
-  }, [platformToggles, username]);
+  }, [platformToggles, username, AppName]);
 
   /**
    * Handles OAuth callback URLs

package/src/components/onboarding/OAuthWebView.tsx

@@ -36,7 +36,13 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
   const webViewRef = useRef<WebView>(null);
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   
-  console.log('Opening OAuth WebView with URL:', url);
+  console.log('🌐 Opening OAuth WebView with URL:', url);
+  console.log('🔗 Platform:', platform);
+  console.log('📱 URL Components:', {
+    protocol: url.split('://')[0],
+    domain: url.split('://')[1]?.split('/')[0],
+    path: url.split('://')[1]?.split('/').slice(1).join('/'),
+  });
 
   // Set up timeout for OAuth flow
   React.useEffect(() => {
@@ -157,10 +163,50 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
 
   const handleError = (syntheticEvent: any) => {
     const { nativeEvent } = syntheticEvent;
-    console.error('WebView error:', nativeEvent);
+    console.error('🚨 WebView error details:', {
+      description: nativeEvent.description,
+      code: nativeEvent.code,
+      domain: nativeEvent.domain,
+      url: nativeEvent.url,
+      canGoBack: nativeEvent.canGoBack,
+      canGoForward: nativeEvent.canGoForward,
+      loading: nativeEvent.loading,
+      target: nativeEvent.target,
+      title: nativeEvent.title,
+    });
+    
+    // Check for specific NSURLErrorDomain codes
+    let errorMessage = 'Failed to load OAuth page.';
+    
+    if (nativeEvent.domain === 'NSURLErrorDomain') {
+      switch (nativeEvent.code) {
+        case -1009: // NSURLErrorNotConnectedToInternet
+          errorMessage = 'No internet connection. Please check your network and try again.';
+          break;
+        case -1003: // NSURLErrorCannotFindHost
+          errorMessage = 'Cannot reach authentication server. Please check your internet connection.';
+          break;
+        case -1001: // NSURLErrorTimedOut
+          errorMessage = 'Connection timed out. Please try again.';
+          break;
+        case -1200: // NSURLErrorSecureConnectionFailed
+          errorMessage = 'Secure connection failed. Please try again.';
+          break;
+        case -1022: // NSURLErrorAppTransportSecurityRequiresSecureConnection
+          errorMessage = 'App Transport Security error. Connection must be secure.';
+          break;
+        case -1004: // NSURLErrorCannotConnectToHost
+          errorMessage = 'Cannot connect to authentication server. Please try again later.';
+          break;
+        default:
+          errorMessage = `Network error (${nativeEvent.code}): ${nativeEvent.description || 'Please check your connection and try again.'}`;
+      }
+    }
+    
+    console.error('🔴 OAuth WebView Error:', errorMessage);
     
     if (retryCount < 2) {
-      console.log(`Retrying OAuth load (attempt ${retryCount + 1})`);
+      console.log(`🔄 Retrying OAuth load (attempt ${retryCount + 1}/2)`);
       setRetryCount(prev => prev + 1);
       setIsLoading(true);
       setError(null);
@@ -170,9 +216,9 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
         if (webViewRef.current) {
           webViewRef.current.reload();
         }
-      }, 2000);
+      }, 3000);
     } else {
-      setError('Failed to load OAuth page. Please try again or use the browser option.');
+      setError(errorMessage);
       setIsLoading(false);
     }
   };

package/src/services/platformAuthService.ts

@@ -72,17 +72,26 @@ export const getPlatformColor = (platform: string): string => {
  */
 export const initiateOAuth = async (platform: string, username: string, appName?: string): Promise<string | null> => {
   try {
+    console.log('🚀 Initiating OAuth for platform:', platform);
+    console.log('👤 Username:', username);
+    console.log('📱 App name:', appName);
+    
     // Check if the platform is supported
     if (!PLATFORM_AUTH_CONFIG[platform]) {
+      console.error('❌ Unsupported platform:', platform);
       throw new Error(`Unsupported platform: ${platform}`);
     }
 
     // Check if platform has a native SDK
     if (PLATFORM_AUTH_CONFIG[platform].hasNativeSDK) {
+      console.log('📱 Platform uses native SDK, returning null');
       // Return null to indicate that we should use the native SDK
       return null;
     }
 
+    console.log('🌐 Platform uses OAuth WebView flow');
+    console.log('🔗 Auth endpoint:', PLATFORM_AUTH_CONFIG[platform].authEndpoint);
+
     // Handle Instagram with specific API format
     if (platform === 'instagram') {
       const state = 'djksbfds';
@@ -93,6 +102,8 @@ export const initiateOAuth = async (platform: string, username: string, appName?
         },
       };
 
+      console.log('📤 Sending Instagram OAuth request:', jsonData);
+
       const response = await fetch('https://api2.onairos.uk/instagram/authorize', {
         method: 'POST',
         headers: {
@@ -101,12 +112,24 @@ export const initiateOAuth = async (platform: string, username: string, appName?
         body: JSON.stringify(jsonData),
       });
 
+      console.log('📡 Instagram OAuth response status:', response.status);
+      console.log('📡 Instagram OAuth response headers:', response.headers);
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        console.error('❌ Instagram OAuth API error:', errorText);
+        throw new Error(`Instagram OAuth API error: ${response.status} - ${errorText}`);
+      }
+
       const responseData = await response.json();
+      console.log('📥 Instagram OAuth response data:', responseData);
       
       if (responseData.instagramURL) {
+        console.log('✅ Instagram OAuth URL received:', responseData.instagramURL);
         return responseData.instagramURL;
       }
       
+      console.error('❌ No Instagram URL found in response');
       throw new Error('No Instagram URL found in response');
     }
 
@@ -119,6 +142,8 @@ export const initiateOAuth = async (platform: string, username: string, appName?
       },
     };
 
+    console.log(`📤 Sending ${platform} OAuth request:`, jsonData);
+
     // Make the request to get the OAuth URL
     const response = await fetch(PLATFORM_AUTH_CONFIG[platform].authEndpoint, {
       method: 'POST',
@@ -128,8 +153,18 @@ export const initiateOAuth = async (platform: string, username: string, appName?
       body: JSON.stringify(jsonData),
     });
 
+    console.log(`📡 ${platform} OAuth response status:`, response.status);
+    console.log(`📡 ${platform} OAuth response headers:`, response.headers);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error(`❌ ${platform} OAuth API error:`, errorText);
+      throw new Error(`${platform} OAuth API error: ${response.status} - ${errorText}`);
+    }
+
     // Parse the response
     const data = await response.json();
+    console.log(`📥 ${platform} OAuth response data:`, data);
     
     // Check if the response contains the OAuth URL based on platform
     switch (platform) {
@@ -249,3 +284,32 @@ export const isOAuthCallback = (url: string): boolean => {
   // Check if the URL starts with our redirect URI
   return url.startsWith('onairosanime://auth/');
 };
+
+/**
+ * Test connectivity to the Onairos API server
+ */
+export const testApiConnectivity = async (): Promise<{ success: boolean; error?: string }> => {
+  try {
+    console.log('🔍 Testing connectivity to Onairos API...');
+    
+    const response = await fetch('https://api2.onairos.uk/health', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    
+    console.log('🌐 API connectivity test response:', response.status);
+    
+    if (response.ok) {
+      console.log('✅ API server is reachable');
+      return { success: true };
+    } else {
+      console.log('⚠️ API server responded with error:', response.status);
+      return { success: false, error: `API server error: ${response.status}` };
+    }
+  } catch (error) {
+    console.error('❌ API connectivity test failed:', error);
+    return { success: false, error: error instanceof Error ? error.message : 'Unknown error' };
+  }
+};