onairos 2.0.1 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onairos",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "dependencies": {
     "@anthropic-ai/sdk": "^0.24.3",
     "@google/generative-ai": "^0.15.0",
@@ -95,7 +95,12 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native": ">=0.69.0",
-    "tailwindcss": "^3.3.5"
+    "tailwindcss": "^3.3.5",
+    "ajv": "^8.12.0",
+    "@anthropic-ai/sdk": "^0.24.3",
+    "@google/generative-ai": "^0.15.0",
+    "@pinecone-database/pinecone": "^2.2.2",
+    "openai": "^4.52.7"
   },
   "description": "The Onairos Library is a collection of functions that enable Applications to connect and communicate data with Onairos Identities via User Authorization. Integration for developers is designed to be seamless, simple and effective for all applications",
   "main": "dist/onairos.bundle.js",

package/src/iframe/DataRequestPage.jsx

@@ -1,18 +1,18 @@
 import React, { useState, useEffect, useRef } from 'react';
 import UniversalOnboarding from '../components/UniversalOnboarding.js';
 import IndividualConnection from './components/IndividualConnection';
+import onairosLogo from './icons/onairos_logo.png';
 
 /**
  * DataRequestPage Component
  * Displays different data requests and handles user interactions
  */
-const DataRequestPage = ({ requestData = {}, dataRequester = 'App', proofMode = false, domain = '' }) => {
+const DataRequestPage = ({ requestData = {}, dataRequester = 'App', proofMode = false, domain = '', appIcon = '' }) => {
   const [loading, setLoading] = useState(true);
   const [activeModels, setActiveModels] = useState([]);
   const [granted, setGranted] = useState(0);
   const [allowSubmit, setAllowSubmit] = useState(false);
-  const [avatar, setAvatar] = useState(false);
-  const [traits, setTraits] = useState(false);
+  const [userConnections, setUserConnections] = useState(['instagram', 'youtube', 'email']);
   const [selectedRequests, setSelectedRequests] = useState({});
   const selectedConnections = useRef([]);
   const userSub = useRef(null);
@@ -36,7 +36,7 @@ const DataRequestPage = ({ requestData = {}, dataRequester = 'App', proofMode =
         await new Promise(resolve => setTimeout(resolve, 1000));
         
         // Sample active models - this would come from your backend
-        setActiveModels(['Personality']);
+        setActiveModels(['Profile', 'User Memories']);
         setLoading(false);
       } catch (error) {
         console.error('Error loading data:', error);
@@ -151,90 +151,128 @@ const DataRequestPage = ({ requestData = {}, dataRequester = 'App', proofMode =
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-100">
       {loading ? (
         <div className="flex items-center justify-center min-h-screen">
           <div className="animate-spin h-8 w-8 border-2 border-blue-600 rounded-full border-t-transparent"></div>
         </div>
-      ) : (activeModels.length === 0 ? (
+      ) : activeModels.length === 0 ? (
         <UniversalOnboarding appIcon="https://onairos.sirv.com/Images/OnairosBlack.png" appName={dataRequester}/>
       ) : (
-        <div className="max-w-md mx-auto p-4 space-y-2">
-          <header className="border space-y-4 bg-white p-4 rounded-lg outline-2 outline-black/10 shadow-sm">
-            <h1 className="text-lg font-bold text-black">Data Requests from {dataRequester}</h1>
+        <div className="max-w-md mx-auto p-6 space-y-4">
+          <header className="bg-white p-6 rounded-xl shadow-md">
+            <div className="flex items-center justify-between mb-6">
+              <div className="flex items-center space-x-2">
+                <img src={onairosLogo} alt="Onairos Logo" className="w-8 h-8" />
+                <div className="text-gray-400 mx-2">→</div>
+                {appIcon ? (
+                  <img src={appIcon} alt={`${dataRequester} Logo`} className="w-8 h-8 rounded-full" />
+                ) : (
+                  <div className="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center">
+                    <span className="text-gray-600 text-xs font-bold">{dataRequester.charAt(0)}</span>
+                  </div>
+                )}
+              </div>
+              <h2 className="text-lg font-bold text-gray-800">{dataRequester}</h2>
+            </div>
+            
+            <h1 className="text-xl font-bold text-gray-800 mb-4">Data Access Request</h1>
+            <p className="text-gray-600 mb-6">Select the data you want to share with {dataRequester}</p>
+            
             <div className="flex items-center justify-between gap-4">
               <button
                 onClick={rejectDataRequest}
-                className="border w-full border-2 border-black/10 hover:bg-gray-50 text-black font-medium py-2 px-4 rounded"
+                className="border w-full border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-3 px-4 rounded-lg transition-colors"
               >
-                Reject All
+                Decline
               </button>
               <button
                 disabled={!allowSubmit}
                 onClick={sendDataRequest}
-                className="w-full bg-black hover:bg-black/90 text-white font-medium py-2 px-4 rounded"
+                className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
               >
-                Confirm ({granted})
+                Approve {granted > 0 && `(${granted})`}
               </button>
             </div>
           </header>
 
-          <div className="space-y-2">
-            {activeModels.length === 0 ? (
-              <div className="flex flex-col items-center justify-center p-8 space-y-4 rounded-lg bg-white border-2 border-black/10">
-                <img src="https://onairos.sirv.com/Images/OnairosBlack.png" alt="Logo" className="w-20 h-20" />
-                <p className="text-center text-sm text-black/70">
-                  Please connect{" "}
-                  <a href="https://onairos.uk/connections" className="text-black font-medium hover:underline">
-                    Onairos
-                  </a>{" "}
-                  Personality to send {dataRequester} your data
-                </p>
-              </div>
-            ) : (
-              Object.keys(requestData)
-                .sort((a, b) => {
-                  const aIsActive = activeModels.includes(requestData[a].type)
-                  const bIsActive = activeModels.includes(requestData[b].type)
-
-                  if (requestData[a].type === "Avatar") return 1
-                  if (requestData[b].type === "Avatar") return -1
-                  if (requestData[b].type === "Traits") return 1
-                  if (requestData[a].type === "Traits") return -1
-                  if (aIsActive && !bIsActive) return -1
-                  if (bIsActive && !aIsActive) return 1
-                  return 0
-                })
-                .map((key, index) => {
-                  const product = requestData[key]
-                  const active =
-                    product.type === "Personality"
-                      ? activeModels.includes(product.type)
-                      : product.type === "Avatar"
-                        ? avatar
-                        : product.type === "Traits"
-                          ? traits
-                          : false
+          <div className="space-y-3">
+            {/* Only show Profile and User Memories */}
+            {['Profile', 'User Memories'].map((dataType, index) => {
+              const key = dataType.toLowerCase().replace(' ', '_');
+              const product = {
+                type: dataType,
+                descriptions: dataType === 'Profile' ? 
+                  'Basic profile information and preferences' : 
+                  'Your personal context and memory data',
+                reward: dataType === 'Profile' ? 
+                  'Personalized experience' : 
+                  'Contextual understanding of your preferences'
+              };
+              
+              return (
+                <IndividualConnection
+                  key={key}
+                  active={true}
+                  title={product.type}
+                  id={product}
+                  number={index}
+                  descriptions={product.descriptions}
+                  rewards={product.reward}
+                  size={key}
+                  changeGranted={changeGranted}
+                  onSelectionChange={(isSelected) =>
+                    handleConnectionSelection(dataRequester, key, index, product.type, product.reward, isSelected)
+                  }
+                />
+              );
+            })}
+            
+            {/* User Connections Section */}
+            <div className="bg-white p-4 rounded-xl shadow-sm mt-4">
+              <h3 className="text-sm font-semibold text-gray-700 mb-3">Your Connected Services</h3>
+              <div className="flex items-center space-x-3">
+                {userConnections.map((connection, index) => {
+                  const getConnectionIcon = (type) => {
+                    switch(type) {
+                      case 'instagram':
+                        return (
+                          <div className="w-10 h-10 rounded-full bg-gradient-to-tr from-purple-500 via-pink-500 to-yellow-500 flex items-center justify-center">
+                            <span className="text-white text-xs">IG</span>
+                          </div>
+                        );
+                      case 'youtube':
+                        return (
+                          <div className="w-10 h-10 rounded-full bg-red-600 flex items-center justify-center">
+                            <span className="text-white text-xs">YT</span>
+                          </div>
+                        );
+                      case 'email':
+                        return (
+                          <div className="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
+                            <span className="text-white text-xs">@</span>
+                          </div>
+                        );
+                      default:
+                        return (
+                          <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
+                            <span className="text-gray-600 text-xs">{type.charAt(0).toUpperCase()}</span>
+                          </div>
+                        );
+                    }
+                  };
+                  
                   return (
-                    <IndividualConnection
-                      key={key}
-                      active={active}
-                      title={product.type}
-                      id={product}
-                      number={index}
-                      descriptions={product.descriptions}
-                      rewards={product.reward}
-                      size={key}
-                      changeGranted={changeGranted}
-                      onSelectionChange={(isSelected) =>
-                        handleConnectionSelection(dataRequester, key, index, product.type, product.reward, isSelected)
-                      }
-                    />
-                  )
-                })
-            )}
+                    <div key={index} className="flex flex-col items-center">
+                      {getConnectionIcon(connection)}
+                      <span className="text-xs text-gray-600 mt-1">{connection}</span>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
           </div>
-        </div>)
+        </div>
       )}
     </div>
   );

package/src/iframe/components/Box.jsx

@@ -1,17 +1,11 @@
 import React from 'react';
-import Sentiment from '../icons/Sentiment.png';
-import Avatar from '../icons/Avatar.png';
-import Avatar2 from '../icons/Avatar2.png';
-import Trait from '../icons/Trait.png';
-import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
 
 /**
  * Box Component
- * Displays a checkbox item for data access requests with appropriate icons
+ * Displays a checkbox item for data access requests
  */
 const Box = (props) => {
-  const selectShortlistedApplicant = (e) => {
+  const handleChange = (e) => {
     const checked = e.target.checked;
     console.log(`Checkbox ${props.title} is now: ${checked ? 'checked' : 'unchecked'}`);
     if (checked) {
@@ -21,46 +15,39 @@ const Box = (props) => {
       props.setSelected(false);
       props.changeGranted(-1);
     }
-  };
-
-  const Insight = (props.title === "Avatar") ? 'Avatar' : (props.title === "Traits") ? 'Personality Traits' : 'Persona';
-
-  const getIcon = () => {
-    switch (props.title) {
-      case "Traits":
-        return <img src={Trait || "/placeholder.svg"} alt="Traits" className="w-5 h-5" />;
-      case "Avatar":
-        return <img src={Avatar2 || "/placeholder.svg"} alt="Avatar" className="w-5 h-5" />;
-      default:
-        return <img src={Sentiment || "/placeholder.svg"} alt="Interest" className="w-5 h-5" />;
-    }
+    
+    props.onSelectionChange(checked);
   };
 
   return (
-    <div className="space-y-4">
-      <div className="flex items-start space-x-3">
-        <Checkbox
-          id={`request-${props.number}`}
-          disabled={!props.active}
-          onCheckedChange={(checked) => {
-            selectShortlistedApplicant({ target: { checked } });
-            props.onSelectionChange(checked);
-          }}
-          className={`h-5 w-5 ${!props.active ? "cursor-not-allowed" : ""}`}
-        />
-        <Label
-          htmlFor={`request-${props.number}`}
-          className="flex items-center space-x-3 text-sm font-medium text-black peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-        >
-          <div className="p-1 bg-gray-50 rounded-md">{getIcon()}</div>
-          <span>Access your {props.title}</span>
-        </Label>
-      </div>
-
+    <div className="relative inline-flex items-center">
+      <input
+        type="checkbox"
+        id={`request-${props.number}`}
+        disabled={!props.active}
+        onChange={handleChange}
+        className={`
+          appearance-none w-5 h-5 border rounded
+          ${!props.active ? 'border-gray-300 bg-gray-100 cursor-not-allowed' : 'border-blue-500 cursor-pointer'}
+          checked:bg-blue-600 checked:border-blue-600
+          focus:outline-none focus:ring-2 focus:ring-blue-500/30
+          transition-colors
+        `}
+      />
+      <svg 
+        className="absolute left-0.5 top-0.5 w-4 h-4 text-white pointer-events-none opacity-0 peer-checked:opacity-100"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
+      </svg>
+      
       {!props.active && (
-        <p className="text-xs text-red-600 font-medium ml-8">
-          Please create your Personality model to access this Grant Request
-        </p>
+        <span className="ml-2 text-xs text-red-500 font-medium">
+          Not available
+        </span>
       )}
     </div>
   );

package/src/iframe/components/IndividualConnection.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import Box from './Box';
-import { Card } from "@/components/ui/card";
 
 /**
  * IndividualConnection Component
@@ -14,41 +13,75 @@ function IndividualConnection(props) {
     props.onSelectionChange(isSelected);
   };
 
-  // The insight type based on title
-  const Insight = (props.title === "Avatar") ? 'Avatar' : (props.title === "Traits") ? 'Personality Traits' : 'Persona';
+  // Get icon based on data type
+  const getDataTypeIcon = () => {
+    switch(props.title) {
+      case "Profile":
+        return (
+          <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-blue-600" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
+            </svg>
+          </div>
+        );
+      case "User Memories":
+        return (
+          <div className="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-purple-600" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z" />
+            </svg>
+          </div>
+        );
+      default:
+        return (
+          <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-gray-600" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
+            </svg>
+          </div>
+        );
+    }
+  };
 
   return (
-    <Card className="overflow-hidden outline-2 outline-black/10 bg-white shadow-sm hover:shadow-md transition-all">
-      <div className="p-4 space-y-2">
-        <div className="flex items-start justify-between">
-          <Box
-            active={props.active}
-            onSelectionChange={handleSelectionChange}
-            changeGranted={props.changeGranted}
-            setSelected={setSelected}
-            number={props.number + 1}
-            type={"Test"}
-            title={props.title}
-          />
-        </div>
-
-        {props.descriptions && props.title !== "Avatar" && (
-          <div className="space-y-2 border-t pt-3">
-            <div className="flex flex-col space-y-1">
-              <span className="text-xs font-semibold text-black/70">Intent</span>
-              <span className="text-sm text-black">{props.descriptions}</span>
+    <div className="bg-white rounded-xl shadow-sm hover:shadow-md transition-all overflow-hidden">
+      <div className="p-5">
+        <div className="flex items-start space-x-4">
+          {getDataTypeIcon()}
+          <div className="flex-1">
+            <div className="flex items-center justify-between">
+              <h3 className="font-medium text-gray-800">{props.title}</h3>
+              <Box
+                active={props.active}
+                onSelectionChange={handleSelectionChange}
+                changeGranted={props.changeGranted}
+                setSelected={setSelected}
+                number={props.number + 1}
+                type={"Test"}
+                title={props.title}
+              />
             </div>
+            
+            {props.descriptions && (
+              <div className="mt-2">
+                <p className="text-sm text-gray-600">{props.descriptions}</p>
+              </div>
+            )}
           </div>
-        )}
-
+        </div>
+        
         {props.rewards && (
-          <div className="flex flex-col space-y-1 border-t pt-3">
-            <span className="text-xs font-semibold text-black/70">Rewards</span>
-            <span className="text-sm text-black">{props.rewards}</span>
+          <div className="mt-3 pt-3 border-t border-gray-100">
+            <div className="flex items-center">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-yellow-500 mr-2" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z" clipRule="evenodd" />
+              </svg>
+              <span className="text-xs text-gray-500">Benefit: <span className="text-gray-700">{props.rewards}</span></span>
+            </div>
           </div>
         )}
       </div>
-    </Card>
+    </div>
   );
 }
 

package/src/iframe/dataRequestHandler.js

@@ -38,7 +38,7 @@ function getPopupUrl() {
  * Creates popup content dynamically as fallback
  */
 function createDynamicPopupContent(data) {
-  const { requestData = [], webpageName = 'App', userData = {}, autoFetch = true } = data;
+  const { requestData = [], webpageName = 'App', userData = {}, autoFetch = true, appIcon = null } = data;
   
   const defaultDataTypes = [
     { id: 'email', name: 'Email Address', description: 'Your email for account identification', icon: '📧' },
@@ -74,6 +74,12 @@ function createDynamicPopupContent(data) {
         <div class="max-w-md mx-auto bg-white rounded-lg shadow-lg">
             <div class="p-6">
                 <div class="text-center mb-6">
+                    <div class="flex items-center justify-center space-x-2 mb-4">
+                        <img src="https://onairos.sirv.com/Images/OnairosBlack.png" alt="Onairos Logo" class="w-8 h-8">
+                        <div class="text-gray-400 mx-2">→</div>
+                        ${appIcon ? `<img src="${appIcon}" alt="${webpageName} Logo" class="w-8 h-8 rounded-full">` : 
+                          `<div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center"><span class="text-gray-600 text-xs font-bold">${webpageName.charAt(0)}</span></div>`}
+                    </div>
                     <h2 class="text-2xl font-bold text-gray-900 mb-2">Data Request</h2>
                     <p class="text-gray-600">${webpageName} is requesting access to your data</p>
                 </div>