@onairos/react-native 3.0.22 → 3.0.25

package/lib/typescript/constants/index.d.ts

@@ -48,5 +48,6 @@ export declare const PIN_REQUIREMENTS: {
 export declare const DEEP_LINK_CONFIG: {
     scheme: string;
     host: string;
+    redirectUri: string;
 };
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/constants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/constants/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;CAkBlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAyBpD,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;CAczB,CAAC;AAEF,eAAO,MAAM,YAAY;;;CAGxB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;CAG5B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/constants/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;CAkBlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAyBpD,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;CAczB,CAAC;AAEF,eAAO,MAAM,YAAY;;;CAGxB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAC"}

package/lib/typescript/services/platformAuthService.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Checks if a native SDK is available for the given platform
+ */
+export declare const hasNativeSDK: (platform: string) => boolean;
+/**
+ * Gets the auth endpoint URL for a platform
+ */
+export declare const getAuthEndpoint: (platform: string) => string;
+/**
+ * Gets the color associated with a platform
+ */
+export declare const getPlatformColor: (platform: string) => string;
+/**
+ * Initiates the OAuth flow for a platform using Onairos proxy
+ * @param platform The platform to authenticate with
+ * @param userEmail The authenticated user's email (not random username)
+ * @returns A Promise that resolves to the OAuth URL to open in a WebView
+ */
+export declare const initiateOAuth: (platform: string, userEmail: string) => Promise<string | null>;
+/**
+ * Initiates the native SDK authentication flow for a platform
+ * @param platform The platform to authenticate with
+ * @returns A Promise that resolves to the authentication result
+ */
+export declare const initiateNativeAuth: (platform: string) => Promise<boolean>;
+/**
+ * Handles the OAuth callback
+ * @param url The callback URL
+ * @returns The authorization code extracted from the URL
+ */
+export declare const handleOAuthCallback: (url: string) => string | null;
+/**
+ * Checks if a URL is an OAuth callback
+ * @param url The URL to check
+ * @returns True if the URL is an OAuth callback
+ */
+export declare const isOAuthCallback: (url: string) => boolean;
+/**
+ * Detects if OAuth flow has completed successfully based on URL patterns
+ * @param url The current URL in the WebView
+ * @param platform The platform being authenticated
+ * @returns True if the OAuth flow has completed successfully
+ */
+export declare const isOAuthSuccess: (url: string, platform: string) => boolean;
+//# sourceMappingURL=platformAuthService.d.ts.map

package/lib/typescript/services/platformAuthService.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"platformAuthService.d.ts","sourceRoot":"","sources":["../../../src/services/platformAuthService.ts"],"names":[],"mappings":"AAwCA;;GAEG;AACH,eAAO,MAAM,YAAY,aAAc,MAAM,KAAG,OAG/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,aAAc,MAAM,KAAG,MAGlD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,aAAc,MAAM,KAAG,MAGnD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,aAAoB,MAAM,aAAa,MAAM,KAAG,QAAQ,MAAM,GAAG,IAAI,CAmE9F,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,aAAoB,MAAM,KAAG,QAAQ,OAAO,CAS1E,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,QAAS,MAAM,KAAG,MAAM,GAAG,IAgB1D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,QAAS,MAAM,KAAG,OAS7C,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,QAAS,MAAM,YAAY,MAAM,KAAG,OAwC9D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onairos/react-native",
-  "version": "3.0.22",
+  "version": "3.0.25",
   "description": "Onairos React Native SDK for social media authentication and AI model training",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -64,6 +64,7 @@
   },
   "dependencies": {
     "@react-native-community/netinfo": "^9.0.0",
+    "@react-native-google-signin/google-signin": "^14.0.1",
     "axios": "^1.6.2",
     "react-native-crypto-js": "^1.0.0",
     "react-native-device-info": "^10.8.0",

package/src/components/OnairosButton.tsx

@@ -15,7 +15,6 @@ import { COLORS } from '../constants';
 import type { OnairosButtonProps } from '../types';
 import { hasCredentials, getCredentials, deleteCredentials as clearCredentials } from '../utils/secureStorage';
 import { onairosApi } from '../api';
-import { Portal } from '../utils/Portal';
 
 export interface OnairosButtonRef {
   trigger: () => Promise<void>;
@@ -304,9 +303,8 @@ export const OnairosButton = forwardRef<OnairosButtonRef, OnairosButtonProps>(({
         />
       )}
       
-      {/* Overlay rendered through Portal to ensure it appears at root level */}
+      {/* Overlay rendered directly without Portal */}
       {showOverlay && storedCredentials && (
-        <Portal>
           <Overlay
             data={requestData || {}}
             username={storedCredentials.username}
@@ -315,7 +313,6 @@ export const OnairosButton = forwardRef<OnairosButtonRef, OnairosButtonProps>(({
             appName={AppName}
             darkMode={darkMode}
           />
-        </Portal>
       )}
     </>
   );

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',
   },
 });