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

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

/**
 * Preview Modal Component
 * Handles knowledge item preview functionality
 */

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

  /**
   * Shows the preview modal with knowledge item content
   * @param {Object} knowledgeItem - The knowledge item to preview
   */
  show(knowledgeItem) {
    const modal = this.widget.querySelector('#bm-previewModal');
    if (!modal) return;

    // Set the content
    const contentElement = modal.querySelector('#bm-preview-content');
    if (contentElement) {
      contentElement.textContent = knowledgeItem.content || '';
    }

    // 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 preview modal
   */
  hide() {
    const modal = this.widget.querySelector('#bm-previewModal');
    if (!modal) return;

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

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

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

    // 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();
      }
    });
  }

  /**
   * Renders the preview modal HTML structure
   * @returns {string} Modal HTML
   */
  render() {
    return `
      <!-- Knowledge Item Preview Modal -->
      <div class="bm-modal" id="bm-previewModal" style="display: none;">
        <div class="bm-modal-content">
          <div class="bm-modal-header">
            <div class="besper-h3">Knowledge Item Preview</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">Content</label>
              <textarea id="bm-preview-content" class="bm-form-input" rows="10" readonly></textarea>
            </div>
          </div>
          <div class="bm-modal-footer">
            <button class="bm-btn bm-btn-secondary">Close</button>
          </div>
        </div>
      </div>
    `;
  }
}