onairos 2.1.1 → 2.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onairos",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "dependencies": {
     "@react-oauth/google": "^0.12.1",
     "@telegram-apps/sdk-react": "^2.0.25",

package/src/components/DataRequest.js

@@ -3,29 +3,22 @@ import React, { useState } from 'react';
 const dataTypes = [
   { 
     id: 'basic', 
-    name: 'Basic Information', 
-    description: 'Name, email, and essential account details', 
+    name: 'Basic Info', 
+    description: 'Essential profile information and account details', 
     icon: '👤',
-    required: true // Cannot be deselected
-  },
-  { 
-    id: 'memories', 
-    name: 'Memories', 
-    description: 'Preferences and interests', 
-    icon: '🧠',
     required: false
   },
   { 
-    id: 'social', 
-    name: 'Social Activity', 
-    description: 'Posts, likes, and social interactions', 
-    icon: '📱',
+    id: 'personality', 
+    name: 'Personality', 
+    description: 'Personality traits, behavioral patterns and insights', 
+    icon: '🧠',
     required: false
   },
   { 
     id: 'preferences', 
     name: 'Preferences', 
-    description: 'Settings and customization choices', 
+    description: 'User preferences, settings and choices', 
     icon: '⚙️',
     required: false
   }
@@ -35,12 +28,12 @@ export default function DataRequest({
   onComplete, 
   userEmail, 
   appName = 'App', 
-  autoFetch = true 
+  autoFetch = false,
+  testMode = false 
 }) {
   const [selectedData, setSelectedData] = useState({
-    basic: true, // Always selected by default
-    memories: false,
-    social: false,
+    basic: false, // User can choose
+    personality: false,
     preferences: false
   });
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -49,9 +42,6 @@ export default function DataRequest({
   const [apiError, setApiError] = useState(null);
 
   const handleDataToggle = (dataId) => {
-    // Don't allow toggling basic information (it's required)
-    if (dataId === 'basic') return;
-    
     setSelectedData(prev => ({
       ...prev,
       [dataId]: !prev[dataId]
@@ -83,39 +73,84 @@ export default function DataRequest({
       // Create a unique user hash for this request
       const userHash = generateUserHash(userEmail);
       
-      // Prepare the request with selected data types
-      const requestData = {
+      // Get selected data types
+      const approvedData = Object.entries(selectedData)
+        .filter(([key, value]) => value)
+        .map(([key]) => key);
+
+      // Determine API endpoint based on test mode
+      const apiEndpoint = testMode 
+        ? 'https://api2.onairos.uk/inferenceTest'
+        : 'https://api2.onairos.uk/inference';
+      
+      // Prepare the base result
+      const baseResult = {
         userHash,
         appName,
-        requestedData: Object.entries(selectedData)
-          .filter(([key, value]) => value)
-          .map(([key]) => key),
+        approvedData,
+        apiUrl: apiEndpoint,
+        testMode,
         timestamp: new Date().toISOString()
       };
 
-      // In a real implementation, you would make an API call here
       if (autoFetch) {
-        // Simulate API call
-        await new Promise(resolve => setTimeout(resolve, 2000));
-        
-        // Mock response data
-        const mockData = {
-          success: true,
-          userHash,
-          data: {
-            basic: selectedData.basic ? { name: "John Doe", email: userEmail } : null,
-            memories: selectedData.memories ? { interests: ["technology", "travel"], preferences: ["dark mode", "notifications"] } : null,
-            social: selectedData.social ? { posts: 45, likes: 230, connections: 156 } : null,
-            preferences: selectedData.preferences ? { theme: "dark", language: "en", notifications: true } : null
+        // Auto mode true: make API request and return results
+        try {
+          const response = await fetch(apiEndpoint, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              approvedData,
+              userEmail,
+              appName,
+              testMode,
+              timestamp: new Date().toISOString()
+            })
+          });
+
+          if (!response.ok) {
+            throw new Error(`API call failed with status: ${response.status}`);
+          }
+
+          const apiData = await response.json();
+          
+          // Format response according to test mode requirements
+          let formattedData = apiData;
+          if (testMode && apiData) {
+            formattedData = {
+              InferenceResult: {
+                output: apiData.croppedInference || apiData.output || apiData.inference,
+                traits: apiData.traitResult || apiData.traits || apiData.personalityData
+              }
+            };
           }
+          
+          setApiResponse(formattedData);
+          return {
+            ...baseResult,
+            apiResponse: formattedData,
+            success: true
+          };
+        } catch (error) {
+          setApiError(error.message);
+          return {
+            ...baseResult,
+            apiError: error.message,
+            success: false
+          };
+        }
+      } else {
+        // Auto mode false (default): return API endpoint URL for manual calling
+        return {
+          ...baseResult,
+          success: true,
+          message: 'Data request approved. Use the provided API URL to fetch user data.'
         };
-        
-        setApiResponse(mockData);
       }
-      
-      return requestData;
     } catch (error) {
-      setApiError(`Failed to fetch data: ${error.message}`);
+      setApiError(`Failed to process request: ${error.message}`);
       return null;
     } finally {
       setIsLoadingApi(false);
@@ -127,17 +162,10 @@ export default function DataRequest({
     setIsSubmitting(true);
     
     try {
-      const requestData = await fetchUserData();
+      const result = await fetchUserData();
       
-      if (requestData) {
-        onComplete({
-          selectedData,
-          requestData,
-          apiResponse,
-          userEmail,
-          appName,
-          timestamp: new Date().toISOString()
-        });
+      if (result) {
+        onComplete(result);
       }
     } catch (error) {
       setApiError(`Submission failed: ${error.message}`);

package/src/iframe/dataRequestHandler.js

@@ -38,12 +38,12 @@ function getPopupUrl() {
  * Creates popup content dynamically as fallback
  */
 function createDynamicPopupContent(data) {
-  const { requestData = [], webpageName = 'App', userData = {}, autoFetch = true, appIcon = null } = data;
+  const { requestData = [], webpageName = 'App', userData = {}, autoFetch = false, testMode = false, appIcon = null } = data;
   
   const defaultDataTypes = [
-    { id: 'profile', name: 'Profile Information', description: 'Basic profile data and preferences', icon: '👤' },
-    { id: 'personality', name: 'Personality data', description: 'Personality traits and Insights', icon: '📊' },
-    { id: 'preferences', name: 'User Preferences', description: 'Preferences and choices', icon: '⚙️' }
+    { id: 'basic', name: 'Basic Info', description: 'Essential profile information and account details', icon: '👤' },
+    { id: 'personality', name: 'Personality', description: 'Personality traits, behavioral patterns and insights', icon: '🧠' },
+    { id: 'preferences', name: 'Preferences', description: 'User preferences, settings and choices', icon: '⚙️' }
   ];
 
   const dataTypes = Array.isArray(requestData) && requestData.length > 0
@@ -82,27 +82,44 @@ function createDynamicPopupContent(data) {
                     <p class="text-gray-600">${webpageName} is requesting access to your data</p>
                 </div>
                 
-                <div class="space-y-3 mb-6" id="dataTypes">
+                <div class="space-y-4 mb-6" id="dataTypes">
                     ${dataTypes.map(type => `
-                        <label class="flex items-center p-3 border rounded-lg cursor-pointer hover:bg-gray-50">
-                            <input type="checkbox" class="mr-3" data-id="${type.id}">
-                            <div class="flex-1">
-                                <div class="flex items-center">
-                                    <span class="text-xl mr-2">${type.icon}</span>
-                                    <span class="font-medium">${type.name}</span>
+                        <label class="group relative flex items-start p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:border-blue-300 hover:bg-blue-50 transition-all duration-200 shadow-sm hover:shadow-md">
+                            <div class="flex items-center h-5">
+                                <input type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 focus:ring-2" data-id="${type.id}">
+                            </div>
+                            <div class="ml-4 flex-1">
+                                <div class="flex items-center mb-2">
+                                    <span class="text-2xl mr-3 group-hover:scale-110 transition-transform duration-200">${type.icon}</span>
+                                    <span class="font-semibold text-gray-900 text-lg">${type.name}</span>
                                 </div>
-                                <p class="text-sm text-gray-600 mt-1">${type.description}</p>
+                                <p class="text-sm text-gray-600 leading-relaxed">${type.description}</p>
+                            </div>
+                            <div class="absolute top-4 right-4 w-6 h-6 border-2 border-gray-300 rounded-md group-hover:border-blue-400 transition-colors duration-200 bg-white">
+                                <svg class="w-4 h-4 text-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+                                </svg>
                             </div>
                         </label>
                     `).join('')}
                 </div>
                 
-                <div class="flex space-x-3">
-                    <button id="rejectBtn" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
-                        Reject
+                <div class="flex space-x-4">
+                    <button id="rejectBtn" class="flex-1 px-6 py-3 border-2 border-gray-300 rounded-xl text-gray-700 font-semibold hover:bg-gray-50 hover:border-gray-400 transition-all duration-200 focus:ring-2 focus:ring-gray-300">
+                        <span class="flex items-center justify-center">
+                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                            </svg>
+                            Decline
+                        </span>
                     </button>
-                    <button id="approveBtn" class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
-                        Approve
+                    <button id="approveBtn" class="flex-1 px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl font-semibold hover:from-blue-700 hover:to-blue-800 transition-all duration-200 shadow-lg hover:shadow-xl focus:ring-2 focus:ring-blue-500">
+                        <span class="flex items-center justify-center">
+                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                            </svg>
+                            Allow Access
+                        </span>
                     </button>
                 </div>
                 
@@ -118,18 +135,25 @@ function createDynamicPopupContent(data) {
         const checkboxes = document.querySelectorAll('input[type="checkbox"]');
         
         const autoFetch = ${autoFetch};
+        const testMode = ${testMode};
         const userEmail = '${userData.email || ''}';
         const appName = '${webpageName}';
         
+        // Determine API endpoint based on test mode
+        const apiEndpoint = testMode 
+            ? 'https://api2.onairos.uk/inferenceTest'
+            : 'https://api2.onairos.uk/inference';
+        
         async function makeApiCall(approvedData) {
-            const response = await fetch('https://api2.onairos.uk/inferenceTest', {
+            const response = await fetch(apiEndpoint, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({
                     approvedData,
                     userEmail,
                     appName,
-                    timestamp: new Date().toISOString()
+                    timestamp: new Date().toISOString(),
+                    testMode: testMode
                 })
             });
             
@@ -137,7 +161,19 @@ function createDynamicPopupContent(data) {
                 throw new Error(\`API call failed with status: \${response.status}\`);
             }
             
-            return await response.json();
+            const data = await response.json();
+            
+            // Format response according to test mode requirements
+            if (testMode && data) {
+                return {
+                    InferenceResult: {
+                        output: data.croppedInference || data.output || data.inference,
+                        traits: data.traitResult || data.traits || data.personalityData
+                    }
+                };
+            }
+            
+            return data;
         }
         
         approveBtn.addEventListener('click', async () => {
@@ -159,27 +195,39 @@ function createDynamicPopupContent(data) {
                 approved: approved,
                 timestamp: new Date().toISOString(),
                 userEmail: userEmail,
-                appName: appName
+                appName: appName,
+                testMode: testMode
             };
             
             let finalResult = baseResult;
             
             if (autoFetch) {
+                // Auto mode true: make API request and return results
                 try {
                     status.textContent = 'Making API call...';
                     const apiData = await makeApiCall(approved);
                     finalResult = {
                         ...baseResult,
                         apiResponse: apiData,
-                        apiUrl: 'https://api2.onairos.uk/inferenceTest'
+                        apiUrl: apiEndpoint,
+                        success: true
                     };
                 } catch (error) {
                     finalResult = {
                         ...baseResult,
                         apiError: error.message,
-                        apiUrl: 'https://api2.onairos.uk/inferenceTest'
+                        apiUrl: apiEndpoint,
+                        success: false
                     };
                 }
+            } else {
+                // Auto mode false (default): return API endpoint URL for manual calling
+                finalResult = {
+                    ...baseResult,
+                    apiUrl: apiEndpoint,
+                    success: true,
+                    message: 'Data request approved. Use the provided API URL to fetch user data.'
+                };
             }
             
             window.opener.postMessage(finalResult, '*');
@@ -397,18 +445,36 @@ export function listenForPopupMessages(callback, options = {}) {
 /**
  * Make API call with user's approved data
  * @param {Array} approvedData - Array of approved data types
- * @param {string} apiUrl - API endpoint URL
+ * @param {Object} options - API call options
+ * @param {string} options.apiUrl - API endpoint URL
+ * @param {boolean} options.testMode - Whether to use test mode
+ * @param {string} options.userEmail - User email
+ * @param {string} options.appName - App name
  * @returns {Promise} Promise resolving to API response
  */
-async function makeApiCall(approvedData, apiUrl = 'https://api2.onairos.uk/inferenceTest') {
+async function makeApiCall(approvedData, options = {}) {
+  const { 
+    apiUrl = 'https://api2.onairos.uk/inference', 
+    testMode = false, 
+    userEmail = '', 
+    appName = 'App' 
+  } = options;
+
   try {
-    const response = await fetch(apiUrl, {
+    const endpoint = testMode 
+      ? 'https://api2.onairos.uk/inferenceTest'
+      : apiUrl;
+
+    const response = await fetch(endpoint, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({
         approvedData,
+        userEmail,
+        appName,
+        testMode,
         timestamp: new Date().toISOString()
       })
     });
@@ -418,6 +484,17 @@ async function makeApiCall(approvedData, apiUrl = 'https://api2.onairos.uk/infer
     }
 
     const data = await response.json();
+    
+    // Format response according to test mode requirements
+    if (testMode && data) {
+      return {
+        InferenceResult: {
+          output: data.croppedInference || data.output || data.inference,
+          traits: data.traitResult || data.traits || data.personalityData
+        }
+      };
+    }
+    
     return data;
   } catch (error) {
     console.error('API call error:', error);

package/src/mobile/MobileDataRequestPage.jsx

@@ -61,10 +61,17 @@ const MobileDataRequestPage = ({
       return;
     }
     
+    // Determine API endpoint based on test mode (default to live)
+    const testMode = false; // Can be made configurable
+    const apiEndpoint = testMode 
+      ? 'https://api2.onairos.uk/inferenceTest'
+      : 'https://api2.onairos.uk/inference';
+    
     // Create API response with the updated URL
     const apiResponse = {
       success: true,
-      apiUrl: "https://api2.onairos.uk/inferenceTest",
+      apiUrl: apiEndpoint,
+      testMode: testMode,
       approvedRequests: selectedConnections.current
     };
     

package/src/onairosButton.jsx

@@ -9,7 +9,8 @@ export function OnairosButton({
   webpageName, 
   inferenceData = null, 
   onComplete = null, 
-  autoFetch = true,
+  autoFetch = false,
+  testMode = false,
   proofMode = false, 
   textLayout = 'below', 
   textColor = 'white',
@@ -146,7 +147,7 @@ export function OnairosButton({
         return (
           <EmailAuth 
             onSuccess={handleEmailAuthSuccess}
-            testMode={true} // Set to false in production
+            testMode={testMode} // Use the testMode prop from initialization
           />
         );
       
@@ -176,6 +177,7 @@ export function OnairosButton({
             requestData={requestData}
             appName={webpageName}
             autoFetch={autoFetch}
+            testMode={testMode}
             appIcon={appIcon}
           />
         );