onairos 2.2.0 → 2.2.1

package/src/components/DataRequest.js

@@ -1,16 +1,16 @@
 import React, { useState, useEffect } from 'react';
 
-// Platform connectors with correct icons
-const platformConnectors = [
-  { name: 'YouTube', icon: '📺', color: 'bg-red-500', connector: 'youtube' },
-  { name: 'LinkedIn', icon: '💼', color: 'bg-blue-700', connector: 'linkedin' },
-  { name: 'Reddit', icon: '🔥', color: 'bg-orange-500', connector: 'reddit' },
-  { name: 'Pinterest', icon: '📌', color: 'bg-red-600', connector: 'pinterest' },
-  { name: 'Instagram', icon: '📷', color: 'bg-pink-500', connector: 'instagram' },
-  { name: 'GitHub', icon: '⚡', color: 'bg-gray-800', connector: 'github' },
-  { name: 'Facebook', icon: '👥', color: 'bg-blue-600', connector: 'facebook' },
-  { name: 'Gmail', icon: '✉️', color: 'bg-red-400', connector: 'gmail' }
-];
+// Remove the platform connectors - these should be handled in onboarding
+// const platformConnectors = [
+//   { name: 'YouTube', icon: '📺', color: 'bg-red-500', connector: 'youtube' },
+//   { name: 'LinkedIn', icon: '💼', color: 'bg-blue-700', connector: 'linkedin' },
+//   { name: 'Reddit', icon: '🔥', color: 'bg-orange-500', connector: 'reddit' },
+//   { name: 'Pinterest', icon: '📌', color: 'bg-red-600', connector: 'pinterest' },
+//   { name: 'Instagram', icon: '📷', color: 'bg-pink-500', connector: 'instagram' },
+//   { name: 'GitHub', icon: '⚡', color: 'bg-gray-800', connector: 'github' },
+//   { name: 'Facebook', icon: '👥', color: 'bg-blue-600', connector: 'facebook' },
+//   { name: 'Gmail', icon: '✉️', color: 'bg-red-400', connector: 'gmail' }
+// ];
 
 const dataTypes = [
   { 
@@ -37,7 +37,7 @@ const dataTypes = [
     description: 'User preferences, interests, settings and personal choices', 
     icon: '⚙️',
     required: false,
-    tooltip: 'Your likes, interests, content preferences, and behavioral patterns. Helps create a more personalized experience.',
+    tooltip: 'Your stated preferences and interests from connected platforms. Helps customize your experience.',
     privacyLink: 'https://onairos.uk/privacy#preferences-data'
   }
 ];
@@ -86,23 +86,24 @@ export default function DataRequest({
     preferences: false
   });
   
-  const [connectorStates, setConnectorStates] = useState({});
+  // Remove connector states - not needed for data request
+  // const [connectorStates, setConnectorStates] = useState({});
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isLoadingApi, setIsLoadingApi] = useState(false);
   const [apiResponse, setApiResponse] = useState(null);
   const [apiError, setApiError] = useState(null);
 
-  // Initialize connector states based on connected accounts
-  useEffect(() => {
-    const initialStates = {};
-    platformConnectors.forEach(platform => {
-      initialStates[platform.name] = {
-        connected: connectedAccounts[platform.name] || false,
-        selected: false
-      };
-    });
-    setConnectorStates(initialStates);
-  }, [connectedAccounts]);
+  // Remove connector initialization - not needed
+  // useEffect(() => {
+  //   const initialStates = {};
+  //   platformConnectors.forEach(platform => {
+  //     initialStates[platform.name] = {
+  //       connected: connectedAccounts[platform.name] || false,
+  //       selected: false
+  //     };
+  //   });
+  //   setConnectorStates(initialStates);
+  // }, [connectedAccounts]);
 
   const handleDataToggle = (dataId) => {
     // Don't allow toggling required items
@@ -115,15 +116,7 @@ export default function DataRequest({
     }));
   };
 
-  const handleConnectorToggle = (platformName) => {
-    setConnectorStates(prev => ({
-      ...prev,
-      [platformName]: {
-        ...prev[platformName],
-        selected: !prev[platformName]?.selected
-      }
-    }));
-  };
+  // handleConnectorToggle removed - connectors are handled in onboarding
 
   const handleRowClick = (dataId) => {
     const dataType = dataTypes.find(dt => dt.id === dataId);
@@ -155,9 +148,9 @@ export default function DataRequest({
         .map(([key]) => key);
 
       // Get selected connectors
-      const selectedConnectors = Object.entries(connectorStates)
-        .filter(([platform, state]) => state.selected && state.connected)
-        .map(([platform]) => platform);
+      // const selectedConnectors = Object.entries(connectorStates)
+      //   .filter(([platform, state]) => state.selected && state.connected)
+      //   .map(([platform]) => platform);
 
       const mapDataTypesToConfirmations = (approvedData) => {
         const confirmations = [];
@@ -189,7 +182,7 @@ export default function DataRequest({
         userHash,
         appName,
         approvedData,
-        selectedConnectors,
+        // selectedConnectors, // Removed as connectors are handled in onboarding
         apiUrl: apiEndpoint,
         testMode,
         timestamp: new Date().toISOString()
@@ -201,7 +194,7 @@ export default function DataRequest({
           
           const requestBody = testMode ? {
             approvedData,
-            selectedConnectors,
+            // selectedConnectors, // Removed as connectors are handled in onboarding
             userEmail,
             appName,
             testMode,
@@ -211,7 +204,7 @@ export default function DataRequest({
               storage: "local",
               appId: appName,
               confirmations: confirmations,
-              connectors: selectedConnectors,
+              // connectors: selectedConnectors, // Removed as connectors are handled in onboarding
               EncryptedUserPin: "pending_pin_integration",
               account: userEmail,
               proofMode: false,
@@ -297,8 +290,8 @@ export default function DataRequest({
   };
 
   const selectedCount = Object.values(selectedData).filter(Boolean).length;
-  const selectedConnectorCount = Object.values(connectorStates).filter(state => state.selected).length;
-  const connectedCount = Object.values(connectorStates).filter(state => state.connected).length;
+  // const selectedConnectorCount = Object.values(connectorStates).filter(state => state.selected).length; // Removed as connectors are handled in onboarding
+  // const connectedCount = Object.values(connectorStates).filter(state => state.connected).length; // Removed as connectors are handled in onboarding
 
   return (
     <div className="w-full max-w-md mx-auto bg-white rounded-lg shadow-xl overflow-hidden" style={{ maxHeight: '90vh', height: 'auto' }}>
@@ -378,65 +371,10 @@ export default function DataRequest({
           </div>
         </div>
 
-        {/* Platform Connectors */}
-        <div className="mb-6">
-          <h3 className="text-md font-semibold text-gray-900 mb-3">Data Connectors</h3>
-          <p className="text-xs text-gray-600 mb-3">Select connected platforms to include their data</p>
-          
-          <div className="grid grid-cols-2 gap-2">
-            {platformConnectors.map((platform) => {
-              const connectorState = connectorStates[platform.name];
-              const isConnected = connectorState?.connected || false;
-              const isSelected = connectorState?.selected || false;
-              
-              return (
-                <div 
-                  key={platform.name}
-                  className={`p-2 border rounded-lg transition-all duration-200 cursor-pointer ${
-                    !isConnected ? 'opacity-50 cursor-not-allowed border-gray-200 bg-gray-50' :
-                    isSelected ? 'border-green-400 bg-green-50' : 
-                    'border-gray-200 bg-white hover:border-gray-300'
-                  }`}
-                  onClick={() => isConnected && handleConnectorToggle(platform.name)}
-                >
-                  <div className={`w-6 h-6 rounded ${platform.color} flex items-center justify-center text-white text-sm mb-2 mx-auto relative`}>
-                    {platform.icon}
-                    
-                    {/* Connection Status Indicator */}
-                    {isConnected && isSelected && (
-                      <div className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full flex items-center justify-center">
-                        <svg className="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20">
-                          <path fillRule="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" clipRule="evenodd" />
-                        </svg>
-                      </div>
-                    )}
-                  </div>
-                  
-                  <div className="text-center">
-                    <h4 className="font-medium text-gray-900 text-xs">{platform.name}</h4>
-                    <p className={`text-xs ${
-                      isConnected ? (isSelected ? 'text-green-600' : 'text-blue-600') : 'text-gray-400'
-                    }`}>
-                      {!isConnected ? 'Not connected' : 
-                       isSelected ? 'Selected' : 'Tap to select'}
-                    </p>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-          
-          {connectedCount === 0 && (
-            <p className="text-xs text-yellow-600 mt-2 text-center">
-              ⚠️ No platforms connected. Connect platforms in onboarding to select data sources.
-            </p>
-          )}
-        </div>
-
         {/* Selection Summary */}
         <div className="mb-3 sm:mb-4 p-2 sm:p-3 bg-green-50 border border-green-200 rounded-lg">
           <p className="text-green-800 text-xs sm:text-sm">
-            ✅ {selectedCount} data type{selectedCount > 1 ? 's' : ''} and {selectedConnectorCount} connector{selectedConnectorCount > 1 ? 's' : ''} selected
+            ✅ {selectedCount} data type{selectedCount > 1 ? 's' : ''} selected
           </p>
         </div>
 

package/src/overlay/CheckBox.jsx

@@ -8,46 +8,106 @@ function Box({
   setSelected,
   number,
   type,
-  title}) {
+  title
+}) {
   const [isChecked, setIsChecked] = useState(false);
 
   const handleCheckboxChange = (newState) => {
     setIsChecked(newState);
-    console.log("This data request is active :", active)
-    console.log("With new Checked state now being: ", newState)
+    console.log("This data request is active:", active);
+    console.log("With new Checked state now being:", newState);
+    
     // Update the counter
     if (newState) {
       changeGranted(1);
     } else {
       changeGranted(-1);
     }
-    // onSelectionChange(type);
+    
+    // Call parent callback if provided
+    if (onSelectionChange) {
+      onSelectionChange(newState);
+    }
   };
 
-return (
-  <div className="group">
-    <div
-      
-    >
-      <input
-        // disabled={!active}
-        type="checkbox"
-        checked={isChecked}
-        onChange={(e) => {
-          // setIsChecked(e.target.checked);
-
-          handleCheckboxChange(e.target.checked);
-        }}
-      />
+  return (
+    <div className="group">
+      <div className="relative">
+        {/* Custom styled checkbox with clear visual feedback */}
+        <label className="flex items-center cursor-pointer">
+          <div className="relative">
+            <input
+              type="checkbox"
+              checked={isChecked}
+              disabled={!active}
+              onChange={(e) => handleCheckboxChange(e.target.checked)}
+              className="sr-only" // Hide default checkbox
+            />
+            
+            {/* Custom checkbox appearance */}
+            <div className={`
+              w-6 h-6 border-2 rounded-md flex items-center justify-center transition-all duration-200
+              ${!active 
+                ? 'border-gray-300 bg-gray-100 cursor-not-allowed opacity-50' 
+                : isChecked 
+                  ? 'border-green-500 bg-green-500 shadow-md transform scale-105' 
+                  : 'border-gray-400 bg-white hover:border-green-400 hover:bg-green-50'
+              }
+            `}>
+              {/* Checkmark icon */}
+              {isChecked && (
+                <svg 
+                  className="w-4 h-4 text-white animate-pulse" 
+                  fill="currentColor" 
+                  viewBox="0 0 20 20"
+                >
+                  <path 
+                    fillRule="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" 
+                    clipRule="evenodd" 
+                  />
+                </svg>
+              )}
+            </div>
+          </div>
+          
+          {/* Selection status text */}
+          <span className={`ml-3 text-sm font-medium transition-colors duration-200 ${
+            !active 
+              ? 'text-gray-400' 
+              : isChecked 
+                ? 'text-green-600 font-semibold' 
+                : 'text-gray-700'
+          }`}>
+            {!active 
+              ? 'Not available' 
+              : isChecked 
+                ? '✓ Selected' 
+                : 'Click to select'
+            }
+          </span>
+        </label>
+        
+        {/* Selection indicator badge */}
+        {isChecked && active && (
+          <div className="absolute -top-2 -right-2 w-4 h-4 bg-green-500 rounded-full flex items-center justify-center animate-bounce">
+            <svg className="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20">
+              <path fillRule="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" clipRule="evenodd" />
+            </svg>
+          </div>
+        )}
+      </div>
     </div>
-  </div>
-      );
+  );
 }
 
 Box.propTypes = {
   active: PropTypes.bool.isRequired,
-  onSelectionChange: PropTypes.func.isRequired,
-  disabled: PropTypes.bool,
+  onSelectionChange: PropTypes.func,
+  changeGranted: PropTypes.func.isRequired,
+  setSelected: PropTypes.func,
+  number: PropTypes.number,
+  type: PropTypes.string,
   title: PropTypes.string.isRequired
 };
 

package/src/overlay/IndividualConnection.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 export default function IndividualConnection({
@@ -13,35 +13,165 @@ export default function IndividualConnection({
   onCheckboxChange,
 }) {
   return (
-    <div className="bg-white rounded-lg p-4 shadow border border-gray-200">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center space-x-4">
-          <div className="group">
+    <div className={`relative p-4 sm:p-6 rounded-lg overflow-hidden mb-4 transition-all duration-300 border-2 ${
+      !active 
+        ? 'bg-gray-50 border-gray-200 opacity-60' 
+        : isChecked 
+          ? 'bg-green-50 border-green-400 shadow-lg transform scale-[1.02] ring-2 ring-green-200' 
+          : 'bg-white border-gray-300 hover:border-blue-300 hover:shadow-md'
+    }`}>
+      
+      {/* Selection Status Indicator */}
+      {isChecked && active && (
+        <div className="absolute top-2 right-2 w-8 h-8 bg-green-500 rounded-full flex items-center justify-center animate-pulse shadow-lg">
+          <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
+            <path fillRule="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" clipRule="evenodd" />
+          </svg>
+        </div>
+      )}
+
+      <div className="relative">
+        {/* Header with title and status */}
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center space-x-4">
+            {/* Data type icon */}
+            <div className={`w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all duration-300 ${
+              !active 
+                ? 'bg-gray-200 text-gray-400' 
+                : isChecked 
+                  ? 'bg-green-500 text-white shadow-lg' 
+                  : 'bg-blue-500 text-white'
+            }`}>
+              {title === "Avatar" ? "👤" : 
+               title === "Traits" ? "🧠" : 
+               title === "Personality" ? "🎭" : "📊"}
+            </div>
+            
             <div>
+              <h3 className={`text-xl font-bold ${
+                !active ? 'text-gray-400' : isChecked ? 'text-green-700' : 'text-gray-800'
+              }`}>
+                {title === "Avatar" ? 'Avatar' : 
+                 title === "Traits" ? 'Personality Traits' : 
+                 title === "Personality" ? 'Personality Model' :
+                 title}
+              </h3>
+              
+              {/* Status badge */}
+              <div className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold ${
+                !active 
+                  ? 'bg-red-100 text-red-700' 
+                  : isChecked 
+                    ? 'bg-green-100 text-green-700' 
+                    : 'bg-blue-100 text-blue-700'
+              }`}>
+                {!active ? '❌ Not Available' : isChecked ? '✅ SELECTED' : '⏳ Available'}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Enhanced Checkbox */}
+        <div className="flex items-center justify-center mb-4">
+          <label className="flex items-center cursor-pointer">
+            <div className="relative">
               <input
-                disabled={!active}
                 type="checkbox"
                 checked={isChecked}
+                disabled={!active}
                 onChange={(e) => onCheckboxChange(e.target.checked)}
+                className="sr-only" // Hide default checkbox
               />
+              
+              {/* Custom checkbox appearance */}
+              <div className={`
+                w-8 h-8 border-3 rounded-lg flex items-center justify-center transition-all duration-200
+                ${!active 
+                  ? 'border-gray-300 bg-gray-100 cursor-not-allowed opacity-50' 
+                  : isChecked 
+                    ? 'border-green-500 bg-green-500 shadow-xl transform scale-110' 
+                    : 'border-gray-400 bg-white hover:border-green-400 hover:bg-green-50 hover:scale-105'
+                }
+              `}>
+                {/* Checkmark icon */}
+                {isChecked && (
+                  <svg 
+                    className="w-6 h-6 text-white animate-bounce" 
+                    fill="currentColor" 
+                    viewBox="0 0 20 20"
+                  >
+                    <path 
+                      fillRule="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" 
+                      clipRule="evenodd" 
+                    />
+                  </svg>
+                )}
+              </div>
             </div>
-          </div>
+            
+            {/* Selection status text */}
+            <span className={`ml-4 text-lg font-bold transition-colors duration-200 ${
+              !active 
+                ? 'text-gray-400' 
+                : isChecked 
+                  ? 'text-green-600' 
+                  : 'text-gray-700'
+            }`}>
+              {!active 
+                ? 'Not available' 
+                : isChecked 
+                  ? '✓ SELECTED FOR SHARING' 
+                  : 'Click to select'
+              }
+            </span>
+          </label>
         </div>
 
-        <div className="flex items-center">
-          {/* Optional icons or additional UI elements */}
+        {/* Status message for disabled items */}
+        <div className="flex items-center justify-center mb-4">
+          {!active && (
+            <div className="flex items-center space-x-2 text-sm text-red-700 bg-red-100 px-4 py-3 rounded-lg border-2 border-red-300">
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+              </svg>
+              <span className="font-bold">
+                {`No ${title} data available to share`}
+              </span>
+            </div>
+          )}
+          
+          {isChecked && active && (
+            <div className="flex items-center space-x-2 text-sm text-green-700 bg-green-100 px-4 py-3 rounded-lg border-2 border-green-300 animate-pulse">
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+              </svg>
+              <span className="font-bold">
+                THIS DATA WILL BE SHARED
+              </span>
+            </div>
+          )}
         </div>
 
+        {/* Description and rewards with enhanced styling */}
         {descriptions && title !== "Avatar" && (
-          <p className="text-sm font-medium text-gray-900 dark:text-gray-300">
-            Intent: {descriptions}
-          </p>
+          <div className="mb-3 p-3 bg-blue-50 rounded-lg border border-blue-200">
+            <p className={`text-sm font-semibold ${
+              !active ? 'text-gray-400' : 'text-blue-800'
+            }`}>
+              <span className="text-blue-600">🎯 Intent:</span> {descriptions}
+            </p>
+          </div>
         )}
 
         {rewards && (
-          <p className="text-sm font-medium text-gray-900 dark:text-gray-300">
-            Rewards: {rewards}
-          </p>
+          <div className="mb-3 p-3 bg-yellow-50 rounded-lg border border-yellow-200">
+            <p className={`text-sm font-semibold ${
+              !active ? 'text-gray-400' : 'text-yellow-800'
+            }`}>
+              <span className="text-yellow-600">🎁 Rewards:</span> {rewards}
+            </p>
+          </div>
         )}
       </div>
     </div>