humanbehavior-js 0.4.13 → 0.4.14

package/src/wizard/core/install-wizard.ts

@@ -10,7 +10,7 @@ import * as path from 'path';
 
 export interface FrameworkInfo {
   name: string;
-  type: 'react' | 'vue' | 'angular' | 'svelte' | 'nextjs' | 'nuxt' | 'remix' | 'vanilla' | 'node' | 'auto';
+  type: 'react' | 'vue' | 'angular' | 'svelte' | 'nextjs' | 'nuxt' | 'remix' | 'vanilla' | 'astro' | 'gatsby' | 'node' | 'auto';
   bundler?: 'vite' | 'webpack' | 'esbuild' | 'rollup';
   packageManager?: 'npm' | 'yarn' | 'pnpm';
   hasTypeScript?: boolean;
@@ -162,6 +162,22 @@ export class AutoInstallationWizard {
         hasRouter: !!dependencies['svelte-routing'] || !!dependencies['@sveltejs/kit'],
         projectRoot: this.projectRoot
       };
+    } else if (dependencies.astro) {
+      framework = {
+        name: 'astro',
+        type: 'astro',
+        hasTypeScript: !!dependencies.typescript || !!dependencies['@astrojs/ts-plugin'],
+        hasRouter: true,
+        projectRoot: this.projectRoot
+      };
+    } else if (dependencies.gatsby) {
+      framework = {
+        name: 'gatsby',
+        type: 'gatsby',
+        hasTypeScript: !!dependencies.typescript || !!dependencies['@types/react'],
+        hasRouter: true,
+        projectRoot: this.projectRoot
+      };
     }
 
     // Detect bundler
@@ -192,11 +208,18 @@ export class AutoInstallationWizard {
    */
   protected async installPackage(): Promise<void> {
     const { execSync } = await import('child_process');
-    const command = this.framework?.packageManager === 'yarn' 
+    
+    // Build base command
+    let command = this.framework?.packageManager === 'yarn' 
       ? 'yarn add humanbehavior-js'
       : this.framework?.packageManager === 'pnpm'
       ? 'pnpm add humanbehavior-js'
       : 'npm install humanbehavior-js';
+    
+    // Add legacy peer deps flag for npm to handle dependency conflicts
+    if (this.framework?.packageManager !== 'yarn' && this.framework?.packageManager !== 'pnpm') {
+      command += ' --legacy-peer-deps';
+    }
 
     try {
       execSync(command, { cwd: this.projectRoot, stdio: 'inherit' });
@@ -221,6 +244,12 @@ export class AutoInstallationWizard {
       case 'nuxt':
         modifications.push(...await this.generateNuxtModifications());
         break;
+      case 'astro':
+        modifications.push(...await this.generateAstroModifications());
+        break;
+      case 'gatsby':
+        modifications.push(...await this.generateGatsbyModifications());
+        break;
       case 'remix':
         modifications.push(...await this.generateRemixModifications());
         break;
@@ -342,6 +371,91 @@ export function Providers({ children }: { children: React.ReactNode }) {
     return modifications;
   }
 
+  /**
+   * Generate Astro-specific modifications
+   */
+  private async generateAstroModifications(): Promise<CodeModification[]> {
+    const modifications: CodeModification[] = [];
+
+    // Create Astro component for HumanBehavior
+    const astroComponentPath = path.join(this.projectRoot, 'src', 'components', 'HumanBehavior.astro');
+    const astroComponentContent = `---
+// This component will only run on the client side
+---
+
+<script>
+  import { HumanBehaviorTracker } from 'humanbehavior-js';
+  
+  // Get API key from environment variable
+  const apiKey = import.meta.env.PUBLIC_HUMANBEHAVIOR_API_KEY;
+  
+  console.log('HumanBehavior: API key found:', apiKey ? 'Yes' : 'No');
+  
+  if (apiKey) {
+    try {
+      const tracker = HumanBehaviorTracker.init(apiKey);
+      console.log('HumanBehavior: Tracker initialized successfully');
+      
+      // Test event to verify tracking is working
+      setTimeout(() => {
+        tracker.customEvent('astro_page_view', {
+          page: window.location.pathname,
+          framework: 'astro'
+        }).then(() => {
+          console.log('HumanBehavior: Test event sent successfully');
+        }).catch((error) => {
+          console.error('HumanBehavior: Failed to send test event:', error);
+        });
+      }, 1000);
+      
+    } catch (error) {
+      console.error('HumanBehavior: Failed to initialize tracker:', error);
+    }
+  } else {
+    console.error('HumanBehavior: No API key found');
+  }
+</script>`;
+
+    modifications.push({
+      filePath: astroComponentPath,
+      action: 'create',
+      content: astroComponentContent,
+      description: 'Created Astro component for HumanBehavior SDK'
+    });
+
+    // Find and update layout file
+    const layoutFiles = [
+      path.join(this.projectRoot, 'src', 'layouts', 'Layout.astro'),
+      path.join(this.projectRoot, 'src', 'layouts', 'layout.astro'),
+      path.join(this.projectRoot, 'src', 'layouts', 'BaseLayout.astro')
+    ];
+
+    let layoutFile = null;
+    for (const file of layoutFiles) {
+      if (fs.existsSync(file)) {
+        layoutFile = file;
+        break;
+      }
+    }
+
+    if (layoutFile) {
+      const content = fs.readFileSync(layoutFile, 'utf8');
+      const modifiedContent = this.injectAstroLayout(content);
+      
+      modifications.push({
+        filePath: layoutFile,
+        action: 'modify',
+        content: modifiedContent,
+        description: 'Added HumanBehavior component to Astro layout'
+      });
+    }
+
+    // Add environment variable
+    modifications.push(this.createEnvironmentModification(this.framework!));
+
+    return modifications;
+  }
+
   /**
    * Generate Nuxt-specific modifications
    */
@@ -588,6 +702,55 @@ export default defineNuxtPlugin(() => {
     return modifications;
   }
 
+  /**
+   * Generate Gatsby-specific modifications
+   */
+  private async generateGatsbyModifications(): Promise<CodeModification[]> {
+    const modifications: CodeModification[] = [];
+    
+    // Modify or create gatsby-browser.js for Gatsby
+    const gatsbyBrowserFile = path.join(this.projectRoot, 'gatsby-browser.js');
+    
+    if (fs.existsSync(gatsbyBrowserFile)) {
+      const content = fs.readFileSync(gatsbyBrowserFile, 'utf8');
+      const modifiedContent = this.injectGatsbyBrowser(content);
+      
+      modifications.push({
+        filePath: gatsbyBrowserFile,
+        action: 'modify',
+        content: modifiedContent,
+        description: 'Added HumanBehavior initialization to Gatsby browser'
+      });
+    } else {
+      // Create gatsby-browser.js if it doesn't exist
+      modifications.push({
+        filePath: gatsbyBrowserFile,
+        action: 'create',
+        content: `import { HumanBehaviorTracker } from 'humanbehavior-js';
+
+export const onClientEntry = () => {
+  console.log('Gatsby browser entry point loaded');
+  const apiKey = process.env.GATSBY_HUMANBEHAVIOR_API_KEY;
+  console.log('API Key found:', apiKey ? 'Yes' : 'No');
+  if (apiKey) {
+    const tracker = HumanBehaviorTracker.init(apiKey);
+    console.log('HumanBehavior SDK initialized for Gatsby');
+  } else {
+    console.log('No API key found in environment variables');
+  }
+};`,
+        description: 'Created gatsby-browser.js with HumanBehavior initialization'
+      });
+    }
+
+    // Create or append to environment file
+    modifications.push(this.createEnvironmentModification(this.framework!));
+
+    return modifications;
+  }
+
+
+
   /**
    * Apply modifications to the codebase
    */
@@ -1012,6 +1175,40 @@ if (typeof window !== 'undefined') {
     );
   }
 
+  /**
+   * Inject Astro layout with HumanBehavior component
+   */
+  private injectAstroLayout(content: string): string {
+    // Check if HumanBehavior component is already imported
+    if (content.includes('HumanBehavior') || content.includes('humanbehavior-js')) {
+      return content; // Already has HumanBehavior
+    }
+
+    // Add import inside frontmatter if not present
+    let modifiedContent = content;
+    if (!content.includes('import HumanBehavior')) {
+      const importStatement = 'import HumanBehavior from \'../components/HumanBehavior.astro\';';
+      const frontmatterEndIndex = content.indexOf('---', 3);
+      if (frontmatterEndIndex !== -1) {
+        // Insert import inside frontmatter, before the closing ---
+        modifiedContent = content.slice(0, frontmatterEndIndex) + '\n' + importStatement + '\n' + content.slice(frontmatterEndIndex);
+      } else {
+        // No frontmatter, add at the very beginning
+        modifiedContent = '---\n' + importStatement + '\n---\n\n' + content;
+      }
+    }
+
+    // Find the closing </body> tag and add HumanBehavior component before it
+    const bodyCloseIndex = modifiedContent.lastIndexOf('</body>');
+    if (bodyCloseIndex === -1) {
+      // No body tag found, append to end
+      return modifiedContent + '\n\n<HumanBehavior />';
+    }
+
+    // Add component before closing body tag
+    return modifiedContent.slice(0, bodyCloseIndex) + '  <HumanBehavior />\n' + modifiedContent.slice(bodyCloseIndex);
+  }
+
   private injectNuxtConfig(content: string): string {
     if (content.includes('humanBehaviorApiKey')) {
       return content;
@@ -1029,6 +1226,60 @@ if (typeof window !== 'undefined') {
     );
   }
 
+  private injectGatsbyLayout(content: string): string {
+    if (content.includes('HumanBehavior')) {
+      return content;
+    }
+
+    const importStatement = `import HumanBehavior from './HumanBehavior';`;
+    const componentUsage = `<HumanBehavior apiKey={process.env.GATSBY_HUMANBEHAVIOR_API_KEY || ''} />`;
+
+    // Add import at the top
+    let modifiedContent = content.replace(
+      /import.*from.*['"]\./,
+      `${importStatement}\n$&`
+    );
+
+    // Add component before closing body tag
+    modifiedContent = modifiedContent.replace(
+      /(\s*<\/body>)/,
+      `\n      ${componentUsage}\n$1`
+    );
+
+    return modifiedContent;
+  }
+
+  private injectGatsbyBrowser(content: string): string {
+    if (content.includes('HumanBehaviorTracker')) {
+      return content;
+    }
+
+    const importStatement = `import { HumanBehaviorTracker } from 'humanbehavior-js';`;
+    const initCode = `
+// Initialize HumanBehavior SDK
+export const onClientEntry = () => {
+  console.log('Gatsby browser entry point loaded');
+  const apiKey = process.env.GATSBY_HUMANBEHAVIOR_API_KEY;
+  console.log('API Key found:', apiKey ? 'Yes' : 'No');
+  if (apiKey) {
+    const tracker = HumanBehaviorTracker.init(apiKey);
+    console.log('HumanBehavior SDK initialized for Gatsby');
+  } else {
+    console.log('No API key found in environment variables');
+  }
+};`;
+
+    // If the file already has content, add the import and init code
+    if (content.trim()) {
+      return `${importStatement}${initCode}\n\n${content}`;
+    } else {
+      // If file is empty, just return the new content
+      return `${importStatement}${initCode}`;
+    }
+  }
+
+
+
   /**
    * Helper method to find the best environment file for a framework
    */
@@ -1052,16 +1303,18 @@ if (typeof window !== 'undefined') {
       
       // Framework-specific mappings
       const envVarNames = {
-        react: 'HUMANBEHAVIOR_API_KEY',
-        nextjs: 'NEXT_PUBLIC_HUMANBEHAVIOR_API_KEY',
-        vue: 'VITE_HUMANBEHAVIOR_API_KEY',
-        svelte: 'PUBLIC_HUMANBEHAVIOR_API_KEY',
-        angular: 'HUMANBEHAVIOR_API_KEY',
-        nuxt: 'NUXT_PUBLIC_HUMANBEHAVIOR_API_KEY',
-        remix: 'HUMANBEHAVIOR_API_KEY',
-        vanilla: 'HUMANBEHAVIOR_API_KEY',
-        node: 'HUMANBEHAVIOR_API_KEY',
-        auto: 'HUMANBEHAVIOR_API_KEY'
+              react: 'HUMANBEHAVIOR_API_KEY',
+      nextjs: 'NEXT_PUBLIC_HUMANBEHAVIOR_API_KEY',
+      vue: 'VITE_HUMANBEHAVIOR_API_KEY',
+      svelte: 'PUBLIC_HUMANBEHAVIOR_API_KEY',
+      angular: 'HUMANBEHAVIOR_API_KEY',
+      nuxt: 'NUXT_PUBLIC_HUMANBEHAVIOR_API_KEY',
+      remix: 'HUMANBEHAVIOR_API_KEY',
+      vanilla: 'HUMANBEHAVIOR_API_KEY',
+      astro: 'PUBLIC_HUMANBEHAVIOR_API_KEY',
+      gatsby: 'GATSBY_HUMANBEHAVIOR_API_KEY',
+      node: 'HUMANBEHAVIOR_API_KEY',
+      auto: 'HUMANBEHAVIOR_API_KEY'
       };
       
       return envVarNames[framework.type] || 'HUMANBEHAVIOR_API_KEY';
@@ -1087,6 +1340,8 @@ if (typeof window !== 'undefined') {
       nuxt: '.env',
       remix: '.env.local',
       vanilla: '.env',
+      astro: '.env',
+      gatsby: '.env.development',
       node: '.env',
       auto: '.env'
     };
@@ -1104,6 +1359,9 @@ if (typeof window !== 'undefined') {
   private createEnvironmentModification(framework: FrameworkInfo): CodeModification {
     const { filePath, envVarName } = this.findBestEnvFile(framework);
 
+    // Clean the API key to prevent formatting issues
+    const cleanApiKey = this.apiKey.trim();
+
     if (fs.existsSync(filePath)) {
       // Check if the variable already exists
       const content = fs.readFileSync(filePath, 'utf8');
@@ -1120,7 +1378,7 @@ if (typeof window !== 'undefined') {
         return {
           filePath,
           action: 'append',
-          content: `\n${envVarName}=${this.apiKey}`,
+          content: `\n${envVarName}=${cleanApiKey}`,
           description: `Added API key to existing ${path.basename(filePath)}`
         };
       }
@@ -1129,7 +1387,7 @@ if (typeof window !== 'undefined') {
       return {
         filePath,
         action: 'create',
-        content: `${envVarName}=${this.apiKey}`,
+        content: `${envVarName}=${cleanApiKey}`,
         description: `Created ${path.basename(filePath)} with API key`
       };
     }

package/src/wizard/services/centralized-ai-service.ts

@@ -15,7 +15,7 @@ import { AICodeAnalysis } from '../ai/ai-install-wizard';
 
 export interface FrameworkInfo {
   name: string;
-  type: 'react' | 'vue' | 'angular' | 'svelte' | 'nextjs' | 'nuxt' | 'remix' | 'vanilla' | 'node';
+  type: 'react' | 'vue' | 'angular' | 'svelte' | 'nextjs' | 'nuxt' | 'remix' | 'vanilla' | 'astro' | 'node';
   bundler?: 'vite' | 'webpack' | 'esbuild' | 'rollup';
   packageManager?: 'npm' | 'yarn' | 'pnpm';
   hasTypeScript?: boolean;

package/src/wizard/services/remote-ai-service.ts

@@ -8,7 +8,7 @@ import { AICodeAnalysis } from '../ai/ai-install-wizard';
 
 export interface FrameworkInfo {
   name: string;
-  type: 'react' | 'vue' | 'angular' | 'svelte' | 'nextjs' | 'nuxt' | 'remix' | 'vanilla' | 'node';
+  type: 'react' | 'vue' | 'angular' | 'svelte' | 'nextjs' | 'nuxt' | 'remix' | 'vanilla' | 'astro' | 'gatsby' | 'node';
   bundler?: 'vite' | 'webpack' | 'esbuild' | 'rollup';
   packageManager?: 'npm' | 'yarn' | 'pnpm';
   hasTypeScript?: boolean;
@@ -125,6 +125,9 @@ export class RemoteAIService {
     } else if (patterns.includes('next') || patterns.includes('nextjs') || patterns.includes('next/link') || patterns.includes('next/image') || patterns.includes('next/navigation') || patterns.includes('next/router') || patterns.includes('getserverSideProps') || patterns.includes('getstaticProps') || patterns.includes('getstaticPaths') || patterns.includes('app/layout') || patterns.includes('app/page') || patterns.includes('pages/')) {
       framework = { name: 'nextjs', type: 'nextjs' };
       confidence = 0.95;
+    } else if (patterns.includes('gatsby') || patterns.includes('gatsby-browser') || patterns.includes('gatsby-ssr') || patterns.includes('gatsby-node') || patterns.includes('gatsby-config') || patterns.includes('useStaticQuery') || patterns.includes('graphql')) {
+      framework = { name: 'gatsby', type: 'gatsby' };
+      confidence = 0.95;
     } else if (patterns.includes('react')) {
       framework = { name: 'react', type: 'react' };
       confidence = 0.9;
@@ -137,11 +140,14 @@ export class RemoteAIService {
     } else if (patterns.includes('svelte')) {
       framework = { name: 'svelte', type: 'svelte' };
       confidence = 0.9;
+    } else if (patterns.includes('astro')) {
+      framework = { name: 'astro', type: 'astro' };
+      confidence = 0.9;
     }
     
     // Integration strategy
     let integrationStrategy: 'provider' | 'plugin' | 'module' | 'script' | 'standalone' = 'script';
-    if (framework.type === 'react' || framework.type === 'nextjs') {
+    if (framework.type === 'react' || framework.type === 'nextjs' || framework.type === 'gatsby') {
       integrationStrategy = 'provider';
     } else if (framework.type === 'vue') {
       integrationStrategy = 'plugin';

package/tsconfig.json

@@ -18,7 +18,7 @@
         "forceConsistentCasingInFileNames": true,
         "lib": ["dom", "dom.iterable", "esnext"]
     },
-    "include": ["src/**/*.ts", "src/**/*.tsx"],
+    "include": ["src/**/*.ts", "src/**/*.tsx", "src/types/**/*.d.ts"],
      
     "exclude": ["node_modules", "dist", "test-website"]
 }