embedia/src/frameworks/adapters/WebComponentAdapter.js

Zero-configuration AI chatbot integration CLI - direct file copy with embedded API keys

const fs = require('fs-extra');
const path = require('path');
const chalk = require('chalk');

/**
 * Web Component Adapter
 * Handles integration of universal web components into any project
 */
class WebComponentAdapter {
  constructor() {
    this.name = 'WebComponent';
    this.version = '1.0.0';
  }

  /**
   * Integrate web component files into the project
   * @param {Object} files - Generated web component files
   * @returns {Object} Integration result
   */
  async integrate(files) {
    const result = {
      success: false,
      files: [],
      errors: [],
      instructions: []
    };

    try {
      const projectPath = process.cwd();
      const outputDir = path.join(projectPath, 'embedia-chatbot');

      // Create output directory
      await fs.ensureDir(outputDir);

      // Write main web component file
      const mainFile = path.join(outputDir, 'embedia-chatbot.js');
      await fs.writeFile(mainFile, files.component);
      result.files.push('embedia-chatbot/embedia-chatbot.js');

      // Write HTML example
      const htmlFile = path.join(outputDir, 'example.html');
      await fs.writeFile(htmlFile, files.html);
      result.files.push('embedia-chatbot/example.html');

      // Write additional CSS if provided
      if (files.styles) {
        const stylesFile = path.join(outputDir, 'embedia-chatbot.css');
        await fs.writeFile(stylesFile, files.styles);
        result.files.push('embedia-chatbot/embedia-chatbot.css');
      }

      // Write README
      const readmeFile = path.join(outputDir, 'README.md');
      await fs.writeFile(readmeFile, files.readme);
      result.files.push('embedia-chatbot/README.md');

      // Write configuration file
      const configFile = path.join(outputDir, 'config.json');
      await fs.writeFile(configFile, JSON.stringify(files.config, null, 2));
      result.files.push('embedia-chatbot/config.json');

      // Write framework examples
      if (files.examples) {
        const examplesDir = path.join(outputDir, 'examples');
        await fs.ensureDir(examplesDir);

        for (const [filename, content] of Object.entries(files.examples)) {
          const exampleFile = path.join(examplesDir, filename);
          await fs.writeFile(exampleFile, content);
          result.files.push(`embedia-chatbot/examples/${filename}`);
        }
      }

      // Generate integration instructions
      result.instructions = this.generateInstructions(files.config);
      result.success = true;

    } catch (error) {
      result.errors.push({
        type: 'file_write',
        message: `Failed to write web component files: ${error.message}`,
        suggestion: 'Check file permissions and available disk space'
      });
    }

    return result;
  }

  /**
   * Generate integration instructions based on project type
   */
  generateInstructions(config) {
    const instructions = [
      'Web component has been generated successfully!',
      '',
      '🚀 Quick Start:',
      '1. Include the script in your HTML:',
      '   <script src="./embedia-chatbot/embedia-chatbot.js"></script>',
      '',
      '2. Add the chatbot element anywhere in your HTML:',
      `   <embedia-chatbot bot-id="${config.botId}"></embedia-chatbot>`,
      '',
      '📋 Framework Integration:',
      '• React: Import the script and use <embedia-chatbot> as a regular element',
      '• Vue: Import the script and use <embedia-chatbot> in your templates',
      '• Angular: Add CUSTOM_ELEMENTS_SCHEMA to your module',
      '• WordPress: Add the script to your theme and use the element',
      '',
      '🔧 Customization:',
      '• Edit embedia-chatbot/config.json for bot configuration',
      '• Use attributes like theme="dark" or position="bottom-left"',
      '• See embedia-chatbot/README.md for full documentation',
      '',
      '📂 Files Created:',
      '• embedia-chatbot.js - Main web component',
      '• example.html - Basic usage example',
      '• README.md - Complete documentation',
      '• examples/ - Framework-specific examples'
    ];

    return instructions;
  }

  /**
   * Check if this adapter can handle the current project
   */
  canHandle(projectAnalysis) {
    // Web components work with any project type
    return true;
  }

  /**
   * Get adapter-specific requirements
   */
  getRequirements() {
    return {
      dependencies: [], // No additional dependencies needed
      files: ['embedia-chatbot.js'],
      instructions: [
        'Include the web component script in your HTML',
        'Use <embedia-chatbot> element where you want the chat'
      ]
    };
  }
}

module.exports = WebComponentAdapter;