besper-frontend-site-dev-main/src/components/management/modals/WebsiteModal.js

Professional B-esper Frontend Site - Site-wide integration toolkit for full website bot deployment

/**
 * Website Modal Component
 * Handles website addition and management functionality
 */

export class WebsiteModal {
  constructor(widget, apiCall, credentials) {
    this.widget = widget;
    this.apiCall = apiCall;
    this.credentials = credentials;
  }

  /**
   * Shows the website modal
   */
  show() {
    const modal = this.widget.querySelector('#bm-websiteModal');
    if (!modal) return;

    // Clear previous input
    const urlInput = modal.querySelector('#bm-website-url');
    if (urlInput) {
      urlInput.value = '';
    }

    // Show modal
    modal.style.display = 'flex';
    modal.style.opacity = '0';
    modal.style.transition = 'opacity 0.3s ease';

    setTimeout(() => {
      modal.style.opacity = '1';
    }, 10);
  }

  /**
   * Hides the website modal
   */
  hide() {
    const modal = this.widget.querySelector('#bm-websiteModal');
    if (!modal) return;

    modal.style.opacity = '0';
    setTimeout(() => {
      modal.style.display = 'none';
    }, 300);
  }

  /**
   * Adds a website to the bot's knowledge base
   * @param {string} url - The website URL to add
   */
  async addWebsite(url) {
    if (!url || !url.trim()) {
      console.error('Please enter a valid URL');
      return;
    }

    try {
      const response = await this.apiCall(
        '/management/add_website',
        'POST',
        {
          url: url.trim(),
          bot_id: this.credentials.botId,
        },
        this.credentials.managementId,
        this.credentials.managementSecret
      );

      if (response.success) {
        console.log(
          'Website added successfully! Processing may take a few minutes.'
        );
        this.hide();
        // Refresh websites list if callback provided
        if (this.onWebsiteAdded) {
          this.onWebsiteAdded();
        }
      } else {
        console.error(
          'Failed to add website: ' + (response.error || 'Unknown error')
        );
      }
    } catch (error) {
      console.error('Error adding website:', error);
      console.error('Failed to add website. Please try again.');
    }
  }

  /**
   * Sets up event listeners for the website modal
   */
  setupEventListeners() {
    const modal = this.widget.querySelector('#bm-websiteModal');
    if (!modal) return;

    // Close button
    const closeBtn = modal.querySelector('.bm-modal-close');
    const cancelBtn = modal.querySelector('.bm-btn-secondary');
    closeBtn?.addEventListener('click', () => this.hide());
    cancelBtn?.addEventListener('click', () => this.hide());

    // Add website button
    const addBtn = modal.querySelector('.bm-btn-primary');
    addBtn?.addEventListener('click', () => {
      const urlInput = modal.querySelector('#bm-website-url');
      if (urlInput) {
        this.addWebsite(urlInput.value);
      }
    });

    // Enter key to add
    const urlInput = modal.querySelector('#bm-website-url');
    urlInput?.addEventListener('keypress', e => {
      if (e.key === 'Enter') {
        this.addWebsite(urlInput.value);
      }
    });

    // Click outside to close
    modal.addEventListener('click', e => {
      if (e.target === modal) {
        this.hide();
      }
    });

    // Escape key to close
    document.addEventListener('keydown', e => {
      if (e.key === 'Escape' && modal.style.display === 'flex') {
        this.hide();
      }
    });
  }

  /**
   * Sets callback for when a website is successfully added
   * @param {Function} callback - Callback function to execute
   */
  setOnWebsiteAdded(callback) {
    this.onWebsiteAdded = callback;
  }

  /**
   * Renders the website modal HTML structure
   * @returns {string} Modal HTML
   */
  render() {
    return `
      <!-- Add Website Modal -->
      <div class="bm-modal" id="bm-websiteModal" style="display: none;">
        <div class="bm-modal-content">
          <div class="bm-modal-header">
            <div class="besper-h3">Add Website</div>
            <button class="bm-modal-close" aria-label="Close">&times;</button>
          </div>
          <div class="bm-modal-body">
            <div class="bm-form-group">
              <label class="bm-form-label" for="bm-website-url">Website URL</label>
              <input 
                type="url" 
                id="bm-website-url" 
                class="bm-form-input" 
                placeholder="https://example.com"
                required
              />
              <small class="bm-form-help">
                Enter the URL of the website you want to add to your bot's knowledge base.
                The entire website will be crawled and processed.
              </small>
            </div>
          </div>
          <div class="bm-modal-footer">
            <button class="bm-btn bm-btn-secondary">Cancel</button>
            <button class="bm-btn bm-btn-primary">Add Website</button>
          </div>
        </div>
      </div>
    `;
  }
}