onairos 2.0.4 → 2.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onairos",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "dependencies": {
     "@anthropic-ai/sdk": "^0.24.3",
     "@google/generative-ai": "^0.15.0",

package/src/components/UniversalOnboarding.jsx

@@ -1,43 +1,160 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+
+const platforms = [
+  { name: 'YouTube', icon: '📺', color: 'bg-red-500' },
+  { name: 'Reddit', icon: '🔥', color: 'bg-orange-500' },
+  { name: 'Instagram', icon: '📷', color: 'bg-pink-500' },
+  { name: 'Pinterest', icon: '📌', color: 'bg-red-600' },
+  { name: 'TikTok', icon: '🎵', color: 'bg-black' },
+  { name: 'Twitter', icon: '🐦', color: 'bg-blue-500' },
+  { name: 'LinkedIn', icon: '💼', color: 'bg-blue-700' },
+  { name: 'Facebook', icon: '👥', color: 'bg-blue-600' }
+];
 
 /**
  * UniversalOnboarding Component
  * Displays an onboarding screen for applications requesting Onairos data
  */
-const UniversalOnboarding = ({ appIcon, appName }) => {
+export default function UniversalOnboarding({ onComplete, appIcon, appName = 'App' }) {
+  const [connectedAccounts, setConnectedAccounts] = useState({});
+  const [isConnecting, setIsConnecting] = useState(false);
+
+  const handleToggle = async (platformName) => {
+    if (isConnecting) return;
+    
+    setIsConnecting(true);
+    
+    // Simulate connection delay
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    
+    setConnectedAccounts(prev => ({
+      ...prev,
+      [platformName]: !prev[platformName]
+    }));
+    
+    setIsConnecting(false);
+  };
+
+  const handleContinue = () => {
+    const connected = Object.entries(connectedAccounts)
+      .filter(([platform, isConnected]) => isConnected)
+      .map(([platform]) => platform);
+    
+    onComplete({
+      connectedAccounts: connected,
+      totalConnections: connected.length
+    });
+  };
+
+  const connectedCount = Object.values(connectedAccounts).filter(Boolean).length;
+
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen p-4">
-      <div className="max-w-md w-full bg-white rounded-lg shadow-md p-6 space-y-6">
-        {appIcon && (
-          <div className="flex justify-center">
-            <img src={appIcon} alt={`${appName} icon`} className="w-20 h-20" />
+    <div className="max-w-md mx-auto bg-white p-6 min-h-[500px]">
+      {/* Header with App Logo and Arrow to Onairos */}
+      <div className="flex items-center justify-center mb-6">
+        <div className="flex items-center space-x-3">
+          <img 
+            src={appIcon || "https://onairos.sirv.com/Images/OnairosBlack.png"} 
+            alt={appName} 
+            className="w-10 h-10 rounded-lg"
+          />
+          <div className="flex items-center text-gray-400">
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+            </svg>
           </div>
-        )}
-        
-        <div className="text-center space-y-2">
-          <h1 className="text-xl font-bold text-black">Connect with {appName}</h1>
-          <p className="text-sm text-gray-600">
-            To share your data with {appName}, you need to create an Onairos Personality model first.
-          </p>
-        </div>
-        
-        <div className="border-t border-gray-200 pt-4">
-          <a 
-            href="https://onairos.uk/connections" 
-            target="_blank"
-            rel="noopener noreferrer"
-            className="block w-full bg-black text-white rounded-md py-2 text-center font-medium hover:bg-black/90 transition-colors"
-          >
-            Create Personality Model
-          </a>
+          <img 
+            src="https://onairos.sirv.com/Images/OnairosBlack.png" 
+            alt="Onairos" 
+            className="w-10 h-10 rounded-lg"
+          />
         </div>
-        
-        <p className="text-xs text-center text-gray-500">
-          Your data will be securely shared with {appName} only after your explicit consent.
+      </div>
+
+      <div className="text-center mb-6">
+        <h2 className="text-xl font-bold text-gray-900 mb-2">Connect Your Accounts</h2>
+        <p className="text-gray-600 text-sm">
+          Choose which accounts to connect for a personalized experience
+        </p>
+      </div>
+
+      {/* Privacy Notice */}
+      <div className="mb-6 p-3 bg-blue-50 border border-blue-200 rounded-lg">
+        <p className="text-blue-800 text-sm">
+          🔒 Your data is never shared with anyone. It's only used to train your personal model and is stored securely.
         </p>
       </div>
+
+      {/* Platform List - Vertical Layout with Toggles */}
+      <div className="space-y-3 mb-6">
+        {platforms.map((platform) => {
+          const isConnected = connectedAccounts[platform.name] || false;
+          
+          return (
+            <div 
+              key={platform.name}
+              className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50 transition-colors"
+            >
+              <div className="flex items-center space-x-3">
+                <div className={`w-10 h-10 rounded-lg ${platform.color} flex items-center justify-center text-white text-lg`}>
+                  {platform.icon}
+                </div>
+                <div>
+                  <h3 className="font-medium text-gray-900">{platform.name}</h3>
+                  <p className="text-sm text-gray-500">
+                    {isConnected ? 'Connected' : 'Not connected'}
+                  </p>
+                </div>
+              </div>
+              
+              {/* Toggle Switch */}
+              <button
+                onClick={() => handleToggle(platform.name)}
+                disabled={isConnecting}
+                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
+                  isConnected ? 'bg-blue-600' : 'bg-gray-200'
+                } ${isConnecting ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+              >
+                <span
+                  className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                    isConnected ? 'translate-x-6' : 'translate-x-1'
+                  }`}
+                />
+              </button>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Connection Status */}
+      {connectedCount > 0 && (
+        <div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg">
+          <p className="text-green-800 text-sm">
+            ✅ {connectedCount} account{connectedCount > 1 ? 's' : ''} connected
+          </p>
+        </div>
+      )}
+
+      {/* Continue Button */}
+      <button
+        onClick={handleContinue}
+        disabled={connectedCount === 0}
+        className={`w-full py-3 px-4 rounded-lg font-semibold transition-colors ${
+          connectedCount > 0
+            ? 'bg-blue-600 text-white hover:bg-blue-700'
+            : 'bg-gray-300 text-gray-500 cursor-not-allowed'
+        }`}
+      >
+        Continue {connectedCount > 0 ? `with ${connectedCount} account${connectedCount > 1 ? 's' : ''}` : ''}
+      </button>
+
+      {/* Skip Option */}
+      <button
+        onClick={() => onComplete({ connectedAccounts: [], totalConnections: 0 })}
+        className="w-full mt-2 py-2 text-gray-500 hover:text-gray-700 text-sm"
+      >
+        Skip for now
+      </button>
     </div>
   );
-};
-
-export default UniversalOnboarding;
+}

package/src/onairosButton.jsx

@@ -1,15 +1,8 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { rsaEncrypt } from './RSA.jsx';
+import React, { useEffect, useState } from 'react';
 import EmailAuth from './components/EmailAuth.js';
 import UniversalOnboarding from './components/UniversalOnboarding.js';
 import PinSetup from './components/PinSetup.js';
 import DataRequest from './components/DataRequest.js';
-import { 
-  openDataRequestPopup, 
-  closeDataRequestPopup, 
-  sendDataToPopup, 
-  listenForPopupMessages 
-} from './iframe/dataRequestHandler.js';
 
 export function OnairosButton({
   requestData, 
@@ -25,16 +18,13 @@ export function OnairosButton({
   loginReturn = null,
   loginType = 'signIn',
   visualType = 'full',
-  appIcon = null, // App icon URL to display in the data request screen
+  appIcon = null,
 }) {
 
   const [showOverlay, setShowOverlay] = useState(false);
   const [currentFlow, setCurrentFlow] = useState('email'); // 'email' | 'onboarding' | 'pin' | 'dataRequest'
   const [userData, setUserData] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
-  const [popupWindow, setPopupWindow] = useState(null);
-  const messageCleanup = useRef(null);
 
   // Check for existing user session
   useEffect(() => {
@@ -62,84 +52,15 @@ export function OnairosButton({
     checkExistingSession();
   }, []);
 
-  // Cleanup popup and message listeners on unmount
-  useEffect(() => {
-    return () => {
-      if (popupWindow) {
-        closeDataRequestPopup(popupWindow);
-      }
-      if (messageCleanup.current) {
-        messageCleanup.current();
-      }
-    };
-  }, [popupWindow]);
-
   const openTerminal = async () => {
     try {
       console.log('🔥 openTerminal called');
-      
-      // If user has completed all steps, open popup directly for data request
-      if (userData?.onboardingComplete && userData?.pinCreated) {
-        openDataRequestDirectly();
-      } else {
-        // Otherwise show the overlay for onboarding flow
-        setShowOverlay(true);
-      }
+      setShowOverlay(true);
     } catch (error) {
       console.error('Error in openTerminal:', error);
     }
   };
 
-  const openDataRequestDirectly = () => {
-    try {
-      // Open popup for data request
-      const popup = openDataRequestPopup({
-        requestData,
-        webpageName,
-        userData,
-        autoFetch,
-        proofMode,
-        appIcon // Pass the app icon to the data request popup
-      });
-
-      if (popup) {
-        setPopupWindow(popup);
-        
-        // Set up message listener for popup communication
-        const cleanup = listenForPopupMessages(
-          handlePopupMessage,
-          {
-            autoFetch,
-            onApiResponse: handleApiResponse
-          }
-        );
-        messageCleanup.current = cleanup;
-      }
-    } catch (error) {
-      console.error('Error opening data request popup:', error);
-      setError('Failed to open data request popup');
-    }
-  };
-
-  const handlePopupMessage = (data) => {
-    console.log('🔥 OnairosButton received popup message:', data);
-    
-    if (data.type === 'dataRequestComplete') {
-      handleDataRequestComplete(data);
-    } else if (data.type === 'popupClosed') {
-      setPopupWindow(null);
-      if (messageCleanup.current) {
-        messageCleanup.current();
-        messageCleanup.current = null;
-      }
-    }
-  };
-
-  const handleApiResponse = (apiResponse) => {
-    console.log('🔥 API Response received:', apiResponse);
-    // Additional handling for API response if needed
-  };
-
   const handleCloseOverlay = () => {
     setShowOverlay(false);
     setError(null);
@@ -187,11 +108,8 @@ export function OnairosButton({
     setUserData(updatedUserData);
     localStorage.setItem('onairosUser', JSON.stringify(updatedUserData));
     
-    // Close overlay and open popup for data request
-    setShowOverlay(false);
-    setTimeout(() => {
-      openDataRequestDirectly();
-    }, 300);
+    // Move to data request flow within the same overlay
+    setCurrentFlow('dataRequest');
   };
 
   const handleDataRequestComplete = (requestResult) => {
@@ -205,11 +123,8 @@ export function OnairosButton({
     setUserData(updatedUserData);
     localStorage.setItem('onairosUser', JSON.stringify(updatedUserData));
 
-    // Close popup
-    if (popupWindow) {
-      closeDataRequestPopup(popupWindow);
-      setPopupWindow(null);
-    }
+    // Close overlay
+    setShowOverlay(false);
 
     // Call onComplete callback if provided
     console.log('🔥 Calling onComplete callback with:', requestResult);
@@ -239,7 +154,7 @@ export function OnairosButton({
         return (
           <UniversalOnboarding 
             onComplete={handleOnboardingComplete}
-            appIcon="https://onairos.sirv.com/Images/OnairosBlack.png"
+            appIcon={appIcon || "https://onairos.sirv.com/Images/OnairosBlack.png"}
             appName={webpageName}
           />
         );
@@ -260,6 +175,7 @@ export function OnairosButton({
             requestData={requestData}
             appName={webpageName}
             autoFetch={autoFetch}
+            appIcon={appIcon}
           />
         );
       
@@ -300,60 +216,60 @@ export function OnairosButton({
       case 'signOut':
         return 'Sign Out of Onairos';
       default:
-        return 'Sign In with Onairos';
-    }
-  };
-
-  return (
-    <>
-      <button
-        className={buttonClass}
-        onClick={openTerminal}
-        style={buttonStyle}
-      >
-        {(visualType === 'full' || visualType === 'icon') && (
-          <img
-            src={login ? "https://onairos.sirv.com/Images/OnairosWhite.png" : "https://onairos.sirv.com/Images/OnairosBlack.png"}
-            alt="Onairos Logo"
-            style={logoStyle}
-          />
-        )}
-        {visualType !== 'icon' && (
-          <span className={`${textColor === 'black' ? 'text-black' : 'text-white'} ${visualType === 'icon' ? 'sr-only' : ''} ${textLayout === 'right' ? 'ml-2' : textLayout === 'left' ? 'mr-2' : ''}`}>
-            {getText()}
-          </span>
-        )}
-      </button>
-
-      {/* Modal Overlay */}
-      {showOverlay && (
-        <div 
-          className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-          onClick={handleBackdropClick}
-        >
-          <div 
-            className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 max-h-[90vh] overflow-hidden relative"
-            onClick={(e) => e.stopPropagation()}
-          >
-            {/* Close button */}
-            <button
-              onClick={handleCloseOverlay}
-              className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 z-10"
-            >
-              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-
-            {/* Content */}
-            <div className="overflow-y-auto max-h-[90vh]">
-              {renderCurrentFlow()}
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
-
+        return 'Sign In with Onairos';
+    }
+  };
+
+  return (
+    <>
+      <button
+        className={buttonClass}
+        onClick={openTerminal}
+        style={buttonStyle}
+      >
+        {(visualType === 'full' || visualType === 'icon') && (
+          <img
+            src={login ? "https://onairos.sirv.com/Images/OnairosWhite.png" : "https://onairos.sirv.com/Images/OnairosBlack.png"}
+            alt="Onairos Logo"
+            style={logoStyle}
+          />
+        )}
+        {visualType !== 'icon' && (
+          <span className={`${textColor === 'black' ? 'text-black' : 'text-white'} ${visualType === 'icon' ? 'sr-only' : ''} ${textLayout === 'right' ? 'ml-2' : textLayout === 'left' ? 'mr-2' : ''}`}>
+            {getText()}
+          </span>
+        )}
+      </button>
+
+      {/* Full-Screen Overlay (Plaid/SendPay Style) */}
+      {showOverlay && (
+        <div 
+          className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+          onClick={handleBackdropClick}
+        >
+          <div 
+            className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 max-h-[90vh] overflow-hidden relative"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Close button */}
+            <button
+              onClick={handleCloseOverlay}
+              className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 z-10"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+
+            {/* Content */}
+            <div className="overflow-y-auto max-h-[90vh]">
+              {renderCurrentFlow()}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
 export default OnairosButton;