onairos 2.1.13 → 2.2.1

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>

package/src/overlay/IndividualConnectionNew.jsx

@@ -11,20 +11,76 @@ function IndividualConnection(props) {
                  'Persona';
 
   return (
-    <div className={`relative p-4 sm:p-6 rounded-sm overflow-hidden mb-8 ${
-      isDisabled ? 'bg-gray-100' : 'bg-indigo-200'
+    <div className={`relative p-4 sm:p-6 rounded-lg overflow-hidden mb-4 transition-all duration-300 border-2 ${
+      isDisabled 
+        ? 'bg-gray-50 border-gray-200 opacity-60' 
+        : selected 
+          ? 'bg-green-50 border-green-400 shadow-lg transform scale-[1.02]' 
+          : 'bg-white border-gray-300 hover:border-blue-300 hover:shadow-md'
     }`}>
+      
+      {/* Selection Status Indicator */}
+      {selected && !isDisabled && (
+        <div className="absolute top-2 right-2 w-6 h-6 bg-green-500 rounded-full flex items-center justify-center animate-pulse">
+          <svg className="w-4 h-4 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">
-        <div className="flex-center">
+        {/* Header with title and status */}
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center space-x-3">
+            {/* Data type icon */}
+            <div className={`w-10 h-10 rounded-full flex items-center justify-center text-xl ${
+              isDisabled 
+                ? 'bg-gray-200 text-gray-400' 
+                : selected 
+                  ? 'bg-green-500 text-white' 
+                  : 'bg-blue-500 text-white'
+            }`}>
+              {props.title === "Avatar" ? "👤" : 
+               props.title === "Traits" ? "🧠" : 
+               props.title === "Personality" ? "🎭" : "📊"}
+            </div>
+            
+            <div>
+              <h3 className={`text-lg font-semibold ${
+                isDisabled ? 'text-gray-400' : selected ? 'text-green-700' : 'text-gray-800'
+              }`}>
+                {Insight}
+              </h3>
+              
+              {/* Status badge */}
+              <div className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
+                isDisabled 
+                  ? 'bg-red-100 text-red-600' 
+                  : selected 
+                    ? 'bg-green-100 text-green-700' 
+                    : 'bg-blue-100 text-blue-700'
+              }`}>
+                {isDisabled ? '❌ Not Available' : selected ? '✅ Selected' : '⏳ Available'}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Checkbox with enhanced styling */}
+        <div className="flex items-center justify-center mb-4">
           <Box
             active={props.active}
             onSelectionChange={(isSelected) => {
               setSelected(isSelected);
-              props.onSelectionChange(isSelected);
-              if (isSelected) {
-                props.changeGranted(1);
-              } else {
-                props.changeGranted(-1);
+              if (props.onSelectionChange) {
+                props.onSelectionChange(isSelected);
+              }
+              if (props.changeGranted) {
+                if (isSelected) {
+                  props.changeGranted(1);
+                } else {
+                  props.changeGranted(-1);
+                }
               }
             }}
             disabled={isDisabled}
@@ -32,31 +88,54 @@ function IndividualConnection(props) {
             number={props.number + 1}
             type="Test"
             title={props.title}
+            changeGranted={props.changeGranted}
           />
         </div>
 
-        <div className="flex items-center mt-2">
+        {/* Status message for disabled items */}
+        <div className="flex items-center justify-center mb-3">
           {isDisabled && (
-            <span className="text-sm text-red-500 font-medium">
-              {`No ${props.title} data available to share`}
-            </span>
+            <div className="flex items-center space-x-2 text-sm text-red-600 bg-red-50 px-3 py-2 rounded-lg border border-red-200">
+              <svg className="w-4 h-4" 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-medium">
+                {`No ${props.title} data available to share`}
+              </span>
+            </div>
+          )}
+          
+          {selected && !isDisabled && (
+            <div className="flex items-center space-x-2 text-sm text-green-600 bg-green-50 px-3 py-2 rounded-lg border border-green-200">
+              <svg className="w-4 h-4" 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-medium">
+                This data will be shared
+              </span>
+            </div>
           )}
         </div>
 
+        {/* Description and rewards */}
         {props.descriptions && props.title !== "Avatar" && (
-          <p className={`text-sm font-medium ${
-            isDisabled ? 'text-gray-500' : 'text-gray-900'
-          } dark:text-gray-300`}>
-            Intent: {props.descriptions}
-          </p>
+          <div className="mb-2">
+            <p className={`text-sm font-medium ${
+              isDisabled ? 'text-gray-400' : 'text-gray-700'
+            }`}>
+              <span className="text-blue-600 font-semibold">Intent:</span> {props.descriptions}
+            </p>
+          </div>
         )}
 
         {props.rewards && (
-          <p className={`text-sm font-medium ${
-            isDisabled ? 'text-gray-500' : 'text-gray-900'
-          } dark:text-gray-300`}>
-            Rewards: {props.rewards}
-          </p>
+          <div className="mb-2">
+            <p className={`text-sm font-medium ${
+              isDisabled ? 'text-gray-400' : 'text-gray-700'
+            }`}>
+              <span className="text-green-600 font-semibold">Rewards:</span> {props.rewards}
+            </p>
+          </div>
         )}
       </div>
     </div>

package/test-enhanced-data-request.html

@@ -0,0 +1,271 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Enhanced Data Request Test - Onairos v2.2.0</title>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+            margin: 0;
+            padding: 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+        }
+        .demo-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 16px;
+            padding: 20px;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+        }
+        .feature-badge {
+            display: inline-block;
+            padding: 4px 8px;
+            background: #10b981;
+            color: white;
+            font-size: 10px;
+            border-radius: 12px;
+            margin: 2px;
+        }
+        .version-banner {
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            color: white;
+            text-align: center;
+            padding: 15px;
+            border-radius: 12px;
+            margin-bottom: 20px;
+        }
+        .demo-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+            align-items: start;
+        }
+        .features-list {
+            background: #f8fafc;
+            padding: 20px;
+            border-radius: 12px;
+            border: 2px solid #e2e8f0;
+        }
+        @media (max-width: 768px) {
+            .demo-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="demo-container">
+        <div class="version-banner">
+            <h1 class="text-2xl font-bold mb-2">🎉 Onairos SDK v2.2.0 - Enhanced Data Request</h1>
+            <p class="opacity-90">Complete overhaul of the DataRequest component with platform connectors and enhanced UX</p>
+        </div>
+
+        <div class="demo-grid">
+            <!-- Live Demo -->
+            <div>
+                <h2 class="text-xl font-bold mb-4 text-center">📊 Live Demo</h2>
+                <div id="data-request-demo" class="flex justify-center"></div>
+            </div>
+
+            <!-- Features Overview -->
+            <div class="features-list">
+                <h3 class="text-lg font-bold mb-4">✨ New Features Implemented</h3>
+                
+                <div class="mb-4">
+                    <h4 class="font-semibold text-green-700 mb-2">🔌 Platform Connectors</h4>
+                    <div class="text-sm text-gray-700 mb-2">
+                        ✅ Correct icons (📺 YouTube, 💼 LinkedIn, 🔥 Reddit, etc.)<br>
+                        ✅ Visual connection status (connected/not connected)<br>
+                        ✅ Selection feedback (green checkmark when selected)<br>
+                        ✅ Click to select/deselect connected platforms
+                    </div>
+                </div>
+
+                <div class="mb-4">
+                    <h4 class="font-semibold text-blue-700 mb-2">🔒 Auto-Selected Basic Profile</h4>
+                    <div class="text-sm text-gray-700 mb-2">
+                        ✅ Basic Info is automatically selected<br>
+                        ✅ Cannot be deselected (grayed out)<br>
+                        ✅ Marked as "Required" with visual indicator<br>
+                        ✅ Essential for all data requests
+                    </div>
+                </div>
+
+                <div class="mb-4">
+                    <h4 class="font-semibold text-purple-700 mb-2">💡 Enhanced Tooltips</h4>
+                    <div class="text-sm text-gray-700 mb-2">
+                        ✅ Underlined titles with hover tooltips<br>
+                        ✅ Detailed explanations for each data type<br>
+                        ✅ Privacy links for transparency<br>
+                        ✅ "Learn more about privacy →" links
+                    </div>
+                </div>
+
+                <div class="mb-4">
+                    <h4 class="font-semibold text-orange-700 mb-2">🎨 Visual Feedback</h4>
+                    <div class="text-sm text-gray-700 mb-2">
+                        ✅ Green borders for selected connectors<br>
+                        ✅ Checkmarks for selected platforms<br>
+                        ✅ Status messages ("Selected", "Tap to select")<br>
+                        ✅ Warning when no platforms connected
+                    </div>
+                </div>
+
+                <div class="mb-4">
+                    <h4 class="font-semibold text-indigo-700 mb-2">🔄 Smart Flow Integration</h4>
+                    <div class="text-sm text-gray-700">
+                        ✅ Receives connected accounts from onboarding<br>
+                        ✅ Shows only platforms connected in previous steps<br>
+                        ✅ Passes selection to backend for processing<br>
+                        ✅ Enhanced data request payload
+                    </div>
+                </div>
+
+                <div class="mt-6 p-3 bg-blue-50 border border-blue-200 rounded-lg">
+                    <p class="text-blue-800 text-sm font-medium">
+                        💡 Hover over underlined titles in the demo to see tooltips!
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Usage Instructions -->
+        <div class="mt-8 p-4 bg-gray-50 border border-gray-200 rounded-lg">
+            <h3 class="font-bold mb-3">📋 What to Test</h3>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+                <div>
+                    <h4 class="font-semibold text-gray-900 mb-2">Data Types Section:</h4>
+                    <ul class="list-disc list-inside space-y-1 text-gray-700">
+                        <li>Hover over underlined titles to see tooltips</li>
+                        <li>Notice "Basic Info" is auto-selected and grayed out</li>
+                        <li>Toggle "Personality" and "Preferences"</li>
+                        <li>Click privacy links in tooltips</li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-semibold text-gray-900 mb-2">Data Connectors Section:</h4>
+                    <ul class="list-disc list-inside space-y-1 text-gray-700">
+                        <li>Click connected platforms to select them</li>
+                        <li>See visual feedback (green borders, checkmarks)</li>
+                        <li>Notice disabled state for unconnected platforms</li>
+                        <li>Check selection count in summary</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Load the enhanced Onairos SDK -->
+    <script src="./dist/onairos.bundle.js"></script>
+    
+    <script>
+        // Simulate connected accounts for demo
+        const mockConnectedAccounts = {
+            'YouTube': true,
+            'LinkedIn': true,
+            'Reddit': true,
+            'Instagram': false,
+            'Pinterest': false,
+            'GitHub': false,
+            'Facebook': false,
+            'Gmail': true
+        };
+
+        if (typeof window.Onairos !== 'undefined' && window.Onairos.OnairosButton) {
+            console.log('🎯 Onairos SDK v2.2.0 loaded successfully');
+            
+            // Access DataRequest component directly for testing
+            // In real usage, this would be accessed through the OnairosButton flow
+            
+            // For this demo, we'll simulate the full OnairosButton with skipToDataRequest
+            const { OnairosButton, initializeApiKey } = window.Onairos;
+            
+            function handleComplete(result) {
+                console.log('✅ Data request completed:', result);
+                
+                const summary = [
+                    `Data types: ${result.approvedData?.join(', ') || 'None'}`,
+                    `Connectors: ${result.selectedConnectors?.join(', ') || 'None'}`,
+                    `Total selections: ${(result.approvedData?.length || 0) + (result.selectedConnectors?.length || 0)}`
+                ];
+                
+                alert(`Data Request Completed!\n\n${summary.join('\n')}\n\nCheck console for full details.`);
+            }
+            
+            // Initialize SDK
+            initializeApiKey({
+                apiKey: 'onairos_web_sdk_live_key_2024',
+                environment: 'development',
+                enableLogging: true
+            }).then(() => {
+                console.log('🔧 SDK initialized');
+                
+                // For demo purposes, we'll create a custom component that shows DataRequest directly
+                const DataRequestDemo = () => {
+                    // Mock user data with connected accounts
+                    const mockUserData = {
+                        email: 'demo@onairos.uk',
+                        connectedAccounts: mockConnectedAccounts,
+                        verified: true
+                    };
+                    
+                    // Get DataRequest component (we'll need to import it directly)
+                    // For now, let's use the OnairosButton but force it to show DataRequest
+                    return React.createElement('div', {
+                        className: 'bg-white p-4 rounded-lg shadow-lg',
+                        style: { minHeight: '500px' }
+                    }, [
+                        React.createElement('div', {
+                            key: 'header',
+                            className: 'text-center mb-4'
+                        }, [
+                            React.createElement('h3', {
+                                key: 'title',
+                                className: 'font-bold text-gray-900'
+                            }, 'Enhanced DataRequest Component'),
+                            React.createElement('p', {
+                                key: 'subtitle', 
+                                className: 'text-sm text-gray-600'
+                            }, 'Simulated with connected platforms: YouTube, LinkedIn, Reddit, Gmail')
+                        ]),
+                        React.createElement('div', {
+                            key: 'notice',
+                            className: 'p-3 bg-blue-50 border border-blue-200 rounded-lg text-center'
+                        }, [
+                            React.createElement('p', {
+                                key: 'text',
+                                className: 'text-blue-800 text-sm'
+                            }, '🚧 Direct DataRequest demo would require component extraction.'),
+                            React.createElement('p', {
+                                key: 'instruction',
+                                className: 'text-blue-700 text-xs mt-1'
+                            }, 'Use the full OnairosButton flow to see the enhanced DataRequest in action.')
+                        ])
+                    ]);
+                };
+
+                ReactDOM.render(React.createElement(DataRequestDemo), document.getElementById('data-request-demo'));
+                
+                console.log('🚀 Enhanced DataRequest demo ready');
+                console.log('📊 Mock connected accounts:', mockConnectedAccounts);
+                
+            }).catch(error => {
+                console.error('❌ SDK initialization failed:', error);
+                document.getElementById('data-request-demo').innerHTML = 
+                    `<div class="text-red-600 text-center p-4">SDK initialization failed: ${error.message}</div>`;
+            });
+            
+        } else {
+            console.error('❌ Onairos SDK not found');
+            document.getElementById('data-request-demo').innerHTML = 
+                '<div class="text-red-600 text-center p-4">Onairos SDK not found</div>';
+        }
+    </script>
+</body>
+</html>