onairos 2.3.0 → 2.3.1

package/llm.txt

@@ -13,6 +13,7 @@
 4. **API Integration**: Supports both test/live modes with automatic endpoint switching
 5. **PIN-based Encryption**: All models encrypted with user PIN + server key
 6. **Responsive Design**: Tailwind CSS with mobile-first approach
+7. **API Key Initialization**: Developer API key setup for authentication and environment configuration
 
 ## Mobile Browser Compatibility ✅
 **WORKS PERFECTLY**: React components, API calls, touch interactions, responsive design, state management
@@ -42,7 +43,7 @@
 - **Training Routes**: `api2.onairos.uk/mobile-training/clean` (regular) or `/enoch` (advanced)
 
 ## Data Flow
-1. **Email Authentication** → 2. **OAuth Connections** → 3. **PIN Setup** → 4. **Data Request**
+1. **API Key Initialization** → 2. **Email Authentication** → 3. **OAuth Connections** → 4. **PIN Setup** → 5. **Data Request**
 
 **Backend Format**:
 ```json
@@ -57,7 +58,27 @@
 }
 ```
 
+## API Key Setup ✅
+**CRITICAL**: Must initialize API key before using any Onairos components
+
+```javascript
+import { initializeApiKey } from '@onairos/react-native';
+
+// Initialize with developer key
+await initializeApiKey({
+  apiKey: 'dev_your_32_char_key_here',
+  environment: 'production', // or 'development'
+  enableLogging: true
+});
+```
+
+**Configuration Options**:
+- `apiKey`: Your 32-character developer key (format: `dev_your_32_char_key_here`)
+- `environment`: `'production'` or `'development'` mode
+- `enableLogging`: Boolean for debug logging
+
 ## Key Components
+- **initializeApiKey**: API key setup function (must be called first)
 - **OnairosButton**: Main entry point with props (testMode, autoFetch, requestData)
 - **UniversalOnboarding**: OAuth connector management with mobile detection
 - **DataRequest**: Data type selection with visual checkmarks
@@ -81,8 +102,25 @@
 ✅ Enhanced OAuth URL parsing for all 9 platforms
 ✅ Added mobile browser compatibility documentation
 ✅ Fixed OAuth popup blocking on mobile devices
+✅ Added API key initialization system for developer authentication
+✅ Implemented environment-specific configuration (production/development)
+✅ Added comprehensive logging system for debugging
+✅ Fixed TypeScript declaration file resolution issue in package.json exports
 
 ## Usage Pattern
+**Step 1: Initialize API Key (Required)**
+```javascript
+import { initializeApiKey } from '@onairos/react-native';
+
+// Must be called before using any components
+await initializeApiKey({
+  apiKey: 'dev_your_32_char_key_here',
+  environment: 'production',
+  enableLogging: true
+});
+```
+
+**Step 2: Use Onairos Components**
 ```javascript
 import { OnairosButton } from 'onairos';
 
@@ -100,14 +138,47 @@ import { OnairosButton } from 'onairos';
 ```
 
 ## Critical Success Factors
-1. **Cross-Platform**: Same React code works in desktop browsers, mobile browsers, and React Native
-2. **OAuth Reliability**: Auto-detects environment and uses appropriate OAuth flow
-3. **API Consistency**: All endpoints use `api2.onairos.uk` with proper authentication
-4. **Mobile UX**: Touch-friendly UI with proper viewport handling
-5. **Error Handling**: Comprehensive error states and user guidance
+1. **API Key Setup**: Must call `initializeApiKey()` before using any components
+2. **Cross-Platform**: Same React code works in desktop browsers, mobile browsers, and React Native
+3. **OAuth Reliability**: Auto-detects environment and uses appropriate OAuth flow
+4. **API Consistency**: All endpoints use `api2.onairos.uk` with proper authentication
+5. **Mobile UX**: Touch-friendly UI with proper viewport handling
+6. **Error Handling**: Comprehensive error states and user guidance
+
+## TypeScript Support ✅
+**Full TypeScript Support**: Complete type definitions provided in `onairos.d.ts`
+
+**Usage with TypeScript**:
+```typescript
+import { OnairosButton } from 'onairos';
+import type { OnairosProps } from 'onairos';
+
+// Component usage with full type safety
+const MyComponent: React.FC = () => {
+  return (
+    <OnairosButton
+      requestData={{
+        basic: { type: "basic", reward: "10 tokens" },
+        personality: { type: "personality", reward: "25 tokens" }, 
+        preferences: { type: "preferences", reward: "15 tokens" }
+      }}
+      webpageName="MyApp"
+      testMode={false}
+      autoFetch={true}
+      onComplete={(result) => console.log(result)}
+    />
+  );
+};
+```
+
+**Common TypeScript Issues & Solutions**:
+- **"Could not find declaration file"**: Fixed in v2.1.5 by adding `types` field to package.json exports
+- **Import errors**: Always import from `'onairos'` (not specific paths)
+- **Type inference**: All components have full TypeScript support with IntelliSense
 
 ## Build & Development
 - **Build**: `npm run build` (creates dist/ folder)
 - **Test Files**: Multiple test HTML files for different scenarios
 - **Entry Points**: `src/index.js` (main), `src/onairos.native.jsx` (React Native)
-- **Responsive**: Tailwind CSS with `sm:`, `md:`, `lg:` breakpoints throughout 
+- **Responsive**: Tailwind CSS with `sm:`, `md:`, `lg:` breakpoints throughout
+- **TypeScript**: Full type definitions with proper package.json exports configuration 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onairos",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "dependencies": {
     "@react-oauth/google": "^0.12.1",
     "@telegram-apps/sdk-react": "^2.0.25",
@@ -108,11 +108,13 @@
   "laravel": "dist/onairos.laravel.js",
   "exports": {
     ".": {
+      "types": "./onairos.d.ts",
       "import": "./dist/onairos.esm.js",
       "require": "./dist/onairos.bundle.js",
       "browser": "./dist/onairos.bundle.js"
     },
     "./laravel": {
+      "types": "./onairos.d.ts",
       "import": "./dist/onairos.laravel.js",
       "require": "./dist/onairos.laravel.js"
     },

package/webpack.config.js

@@ -1,197 +1,197 @@
-const path = require('path');
-const TerserPlugin = require('terser-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-
-const baseConfig = {
-  externals: {
-    react: {
-      commonjs: 'react',
-      commonjs2: 'react',
-      amd: 'React',
-      root: 'React'
-    },
-    'react-dom': {
-      commonjs: 'react-dom',
-      commonjs2: 'react-dom',
-      amd: 'ReactDOM',
-      root: 'ReactDOM'
-    },
-    'ajv': 'ajv',
-    'ajv/dist/runtime/validation_error': 'ajv/dist/runtime/validation_error',
-    'ajv/dist/runtime/equal': 'ajv/dist/runtime/equal',
-    'ajv/dist/runtime/ucs2length': 'ajv/dist/runtime/ucs2length',
-    'ajv/dist/runtime/uri': 'ajv/dist/runtime/uri',
-    '@anthropic-ai/sdk': '@anthropic-ai/sdk',
-    '@google/generative-ai': '@google/generative-ai',
-    '@pinecone-database/pinecone': '@pinecone-database/pinecone',
-    'openai': 'openai'
-  },
-  optimization: {
-    minimize: true,
-    minimizer: [
-      new TerserPlugin({
-        terserOptions: {
-          compress: {
-            dead_code: true,
-          },
-          mangle: true,
-          output: {
-            comments: false,
-          },
-        },
-        extractComments: false,
-      }),
-    ],
-  },
-  devtool: process.env.NODE_ENV === 'production' ? false : 'source-map',
-  module: {
-    rules: [
-      {
-        test: /\.jsx?$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ['@babel/preset-env', '@babel/preset-react']
-          }
-        }
-      },
-      {
-        test: /\.(png|jpg|gif|svg)$/i,
-        type: 'asset/resource',
-        generator: {
-          filename: 'static/[hash][ext][query]'
-        }
-      }
-    ]
-  },
-  resolve: {
-    extensions: ['.js', '.jsx', '.mjs'],
-    alias: {
-      '@': path.resolve(__dirname, 'src'),
-    },
-    fallback: {
-      "crypto": require.resolve("crypto-browserify"),
-      "stream": require.resolve("stream-browserify"),
-      "assert": require.resolve("assert"),
-      "http": require.resolve("stream-http"),
-      "https": require.resolve("https-browserify"),
-      "os": require.resolve("os-browserify/browser"),
-      "url": require.resolve("url"),
-      "zlib": require.resolve("browserify-zlib"),
-      "path": require.resolve("path-browserify"),
-      "vm": require.resolve("vm-browserify"),
-      "fs": false,
-      "net": false,
-      "tls": false,
-      "child_process": false
-    }
-  }
-};
-
-// ES Module specific externals configuration
-const esmExternals = {
-  react: 'react',
-  'react-dom': 'react-dom',
-  'ajv': 'ajv',
-  'ajv/dist/runtime/validation_error': 'ajv/dist/runtime/validation_error',
-  'ajv/dist/runtime/equal': 'ajv/dist/runtime/equal',
-  'ajv/dist/runtime/ucs2length': 'ajv/dist/runtime/ucs2length',
-  'ajv/dist/runtime/uri': 'ajv/dist/runtime/uri',
-  '@anthropic-ai/sdk': '@anthropic-ai/sdk',
-  '@google/generative-ai': '@google/generative-ai',
-  '@pinecone-database/pinecone': '@pinecone-database/pinecone',
-  'openai': 'openai'
-};
-
-module.exports = [
-  // UMD build for browsers
-  {
-    ...baseConfig,
-    entry: {
-      onairos: path.resolve(__dirname, 'src', 'onairos.jsx'),
-      iframe: path.resolve(__dirname, 'src', 'iframe', 'data_request_page.js')
-    },
-    output: {
-      path: path.resolve(__dirname, 'dist'),
-      filename: (pathData) => {
-        return pathData.chunk.name === 'onairos' ? 'onairos.bundle.js' : '[name].bundle.js';
-      },
-      libraryTarget: 'umd',
-      library: 'Onairos',
-      globalObject: 'this',
-      umdNamedDefine: true,
-      publicPath: 'auto',
-    },
-    plugins: [
-      new HtmlWebpackPlugin({
-        template: path.resolve(__dirname, 'src', 'iframe', 'data_request_iframe.html'),
-        filename: 'data_request_iframe.html',
-        chunks: ['iframe'],
-        inject: true
-      }),
-      new CopyWebpackPlugin({
-        patterns: [
-          {
-            from: path.resolve(__dirname, 'public', 'data_request_popup.html'),
-            to: path.resolve(__dirname, 'dist', 'data_request_popup.html')
-          },
-          {
-            from: path.resolve(__dirname, 'public', 'oauth-callback.html'),
-            to: path.resolve(__dirname, 'dist', 'oauth-callback.html')
-          }
-        ]
-      })
-    ]
-  },
-
-  // Laravel-specific build
-  {
-    ...baseConfig,
-    entry: {
-      'onairos-laravel': path.resolve(__dirname, 'src', 'laravel', 'blade-helpers.js')
-    },
-    output: {
-      path: path.resolve(__dirname, 'dist'),
-      filename: '[name].js',
-      libraryTarget: 'umd',
-      library: 'OnairosLaravel',
-      globalObject: 'this',
-      umdNamedDefine: true,
-    },
-    externals: {
-      // Laravel build shouldn't externalize React since blade-helpers.js doesn't use React
-      'ajv': 'ajv',
-      'ajv/dist/runtime/validation_error': 'ajv/dist/runtime/validation_error',
-      'ajv/dist/runtime/equal': 'ajv/dist/runtime/equal',
-      'ajv/dist/runtime/ucs2length': 'ajv/dist/runtime/ucs2length',
-      'ajv/dist/runtime/uri': 'ajv/dist/runtime/uri',
-      '@anthropic-ai/sdk': '@anthropic-ai/sdk',
-      '@google/generative-ai': '@google/generative-ai',
-      '@pinecone-database/pinecone': '@pinecone-database/pinecone',
-      'openai': 'openai'
-    }
-  },
-
-  // ES Module build
-  {
-    ...baseConfig,
-    entry: path.resolve(__dirname, 'src', 'onairos.jsx'),
-    externals: esmExternals,
-    experiments: {
-      outputModule: true,
-    },
-    output: {
-      path: path.resolve(__dirname, 'dist'),
-      filename: 'onairos.esm.js',
-      library: {
-        type: 'module'
-      },
-      environment: {
-        module: true
-      }
-    },
-    target: 'es2020'
-  }
+const path = require('path');
+const TerserPlugin = require('terser-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const baseConfig = {
+  externals: {
+    react: {
+      commonjs: 'react',
+      commonjs2: 'react',
+      amd: 'React',
+      root: 'React'
+    },
+    'react-dom': {
+      commonjs: 'react-dom',
+      commonjs2: 'react-dom',
+      amd: 'ReactDOM',
+      root: 'ReactDOM'
+    },
+    'ajv': 'ajv',
+    'ajv/dist/runtime/validation_error': 'ajv/dist/runtime/validation_error',
+    'ajv/dist/runtime/equal': 'ajv/dist/runtime/equal',
+    'ajv/dist/runtime/ucs2length': 'ajv/dist/runtime/ucs2length',
+    'ajv/dist/runtime/uri': 'ajv/dist/runtime/uri',
+    '@anthropic-ai/sdk': '@anthropic-ai/sdk',
+    '@google/generative-ai': '@google/generative-ai',
+    '@pinecone-database/pinecone': '@pinecone-database/pinecone',
+    'openai': 'openai'
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          compress: {
+            dead_code: true,
+          },
+          mangle: true,
+          output: {
+            comments: false,
+          },
+        },
+        extractComments: false,
+      }),
+    ],
+  },
+  devtool: process.env.NODE_ENV === 'production' ? false : 'source-map',
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react']
+          }
+        }
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/i,
+        type: 'asset/resource',
+        generator: {
+          filename: 'static/[hash][ext][query]'
+        }
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['.js', '.jsx', '.mjs'],
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+    fallback: {
+      "crypto": require.resolve("crypto-browserify"),
+      "stream": require.resolve("stream-browserify"),
+      "assert": require.resolve("assert"),
+      "http": require.resolve("stream-http"),
+      "https": require.resolve("https-browserify"),
+      "os": require.resolve("os-browserify/browser"),
+      "url": require.resolve("url"),
+      "zlib": require.resolve("browserify-zlib"),
+      "path": require.resolve("path-browserify"),
+      "vm": require.resolve("vm-browserify"),
+      "fs": false,
+      "net": false,
+      "tls": false,
+      "child_process": false
+    }
+  }
+};
+
+// ES Module specific externals configuration
+const esmExternals = {
+  react: 'react',
+  'react-dom': 'react-dom',
+  'ajv': 'ajv',
+  'ajv/dist/runtime/validation_error': 'ajv/dist/runtime/validation_error',
+  'ajv/dist/runtime/equal': 'ajv/dist/runtime/equal',
+  'ajv/dist/runtime/ucs2length': 'ajv/dist/runtime/ucs2length',
+  'ajv/dist/runtime/uri': 'ajv/dist/runtime/uri',
+  '@anthropic-ai/sdk': '@anthropic-ai/sdk',
+  '@google/generative-ai': '@google/generative-ai',
+  '@pinecone-database/pinecone': '@pinecone-database/pinecone',
+  'openai': 'openai'
+};
+
+module.exports = [
+  // UMD build for browsers
+  {
+    ...baseConfig,
+    entry: {
+      onairos: path.resolve(__dirname, 'src', 'onairos.jsx'),
+      iframe: path.resolve(__dirname, 'src', 'iframe', 'data_request_page.js')
+    },
+    output: {
+      path: path.resolve(__dirname, 'dist'),
+      filename: (pathData) => {
+        return pathData.chunk.name === 'onairos' ? 'onairos.bundle.js' : '[name].bundle.js';
+      },
+      libraryTarget: 'umd',
+      library: 'Onairos',
+      globalObject: 'this',
+      umdNamedDefine: true,
+      publicPath: 'auto',
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: path.resolve(__dirname, 'src', 'iframe', 'data_request_iframe.html'),
+        filename: 'data_request_iframe.html',
+        chunks: ['iframe'],
+        inject: true
+      }),
+      new CopyWebpackPlugin({
+        patterns: [
+          {
+            from: path.resolve(__dirname, 'public', 'data_request_popup.html'),
+            to: path.resolve(__dirname, 'dist', 'data_request_popup.html')
+          },
+          {
+            from: path.resolve(__dirname, 'public', 'oauth-callback.html'),
+            to: path.resolve(__dirname, 'dist', 'oauth-callback.html')
+          }
+        ]
+      })
+    ]
+  },
+
+  // Laravel-specific build
+  {
+    ...baseConfig,
+    entry: {
+      'onairos-laravel': path.resolve(__dirname, 'src', 'laravel', 'blade-helpers.js')
+    },
+    output: {
+      path: path.resolve(__dirname, 'dist'),
+      filename: '[name].js',
+      libraryTarget: 'umd',
+      library: 'OnairosLaravel',
+      globalObject: 'this',
+      umdNamedDefine: true,
+    },
+    externals: {
+      // Laravel build shouldn't externalize React since blade-helpers.js doesn't use React
+      'ajv': 'ajv',
+      'ajv/dist/runtime/validation_error': 'ajv/dist/runtime/validation_error',
+      'ajv/dist/runtime/equal': 'ajv/dist/runtime/equal',
+      'ajv/dist/runtime/ucs2length': 'ajv/dist/runtime/ucs2length',
+      'ajv/dist/runtime/uri': 'ajv/dist/runtime/uri',
+      '@anthropic-ai/sdk': '@anthropic-ai/sdk',
+      '@google/generative-ai': '@google/generative-ai',
+      '@pinecone-database/pinecone': '@pinecone-database/pinecone',
+      'openai': 'openai'
+    }
+  },
+
+  // ES Module build
+  {
+    ...baseConfig,
+    entry: path.resolve(__dirname, 'src', 'onairos.jsx'),
+    externals: esmExternals,
+    experiments: {
+      outputModule: true,
+    },
+    output: {
+      path: path.resolve(__dirname, 'dist'),
+      filename: 'onairos.esm.js',
+      library: {
+        type: 'module'
+      },
+      environment: {
+        module: true
+      }
+    },
+    target: 'es2020'
+  }
 ];