eveAI/nginx/frontend_src/js/chat-client.js

// CSS imports
import '../css/chat-client.css';
import '../../../eveai_chat_client/static/assets/css/chat.css';
import '../../../eveai_chat_client/static/assets/css/chat-components.css';
import '../../../eveai_chat_client/static/assets/css/chat-input.css';
import '../../../eveai_chat_client/static/assets/css/chat-message.css';
import '../../../eveai_chat_client/static/assets/css/form.css';
import '../../../eveai_chat_client/static/assets/css/form-message.css';
import '../../../eveai_chat_client/static/assets/css/language-selector.css';

// Dependencies
import { createApp, version } from 'vue';
import { marked } from 'marked';
import { FormField } from '../../../eveai_chat_client/static/assets/js/components/FormField.js';

// Vue en andere bibliotheken beschikbaar maken
window.Vue = { createApp, version };
window.marked = marked;

// Debug: Check Vue build type
console.log('🔍 [DEBUG] Vue object:', window.Vue);
console.log('🔍 [DEBUG] Vue.createApp:', typeof window.Vue.createApp);
console.log('🔍 [DEBUG] Vue.version:', window.Vue.version);

// Support tools
import '../../../eveai_chat_client/static/assets/js/iconManager.js';
import '../../../eveai_chat_client/static/assets/js/translation.js';

// Gebruik barrel export voor componenten
import * as Components from '../../../eveai_chat_client/static/assets/js/components/index.js';

// Maak Components globaal beschikbaar voor debugging
window.Components = Components;
console.log('Components loaded:', Object.keys(Components));

// Import specifieke componenten
import { LanguageSelector } from '../../../eveai_chat_client/static/assets/js/components/LanguageSelector.js';
import { ChatApp } from '../../../eveai_chat_client/static/assets/js/ChatApp.js';

// Globale Vue error tracking
window.addEventListener('error', function(event) {
  console.error('🚨 [Global Error]', event.error);
});

// Wacht tot DOM geladen is
document.addEventListener('DOMContentLoaded', function() {
  console.log('🔍 [DEBUG] DOM content loaded, initializing application...');

  // Controleer of chatConfig is ingesteld
  if (!window.chatConfig) {
    console.error('chatConfig is niet beschikbaar');
    window.chatConfig = {};
  }

  // Vul de sidebar explanation in
  fillSidebarExplanation();

  // Initialiseer language selector
  initializeLanguageSelector();

  // Initialiseer chat app (simpel)
  initializeChatApp();
});

/**
 * Vul de sidebar explanation in
 */
function fillSidebarExplanation() {
  const sidebarElement = document.getElementById('sidebar-explanation');
  if (sidebarElement && window.chatConfig.explanation) {
    if (typeof window.marked === 'function') {
      sidebarElement.innerHTML = window.marked(window.chatConfig.explanation);
    } else if (window.marked && typeof window.marked.parse === 'function') {
      sidebarElement.innerHTML = window.marked.parse(window.chatConfig.explanation.replace(/\[\[(.*?)\]\]/g, '<strong>$1</strong>'));
    } else {
      sidebarElement.innerHTML = window.chatConfig.explanation;
    }
  }
}

/**
 * Initialiseert de language selector
 */
function initializeLanguageSelector() {
  console.log('🔍 [DEBUG] Start initializeLanguageSelector');

  const container = document.getElementById('language-selector-container');
  console.log('🔍 [DEBUG] Container element:', container);

  if (!container) {
    console.error('#language-selector-container niet gevonden');
    return;
  }

  try {
    // Maak props voor de component
    const props = {
      initialLanguage: window.chatConfig.language || 'nl',
      supportedLanguageDetails: window.chatConfig.supportedLanguageDetails || {},
      allowedLanguages: window.chatConfig.allowedLanguages || ['nl', 'en', 'fr', 'de']
    };

    console.log('🔍 [DEBUG] Props voor LanguageSelector:', JSON.stringify(props, null, 2));

    // Mount de component direct - BELANGRIJK: we gebruiken window.Vue als dat beschikbaar is
    // Dit is nodig voor compatibiliteit met oude code
    const app = window.Vue && typeof window.Vue.createApp === 'function' 
        ? window.Vue.createApp(LanguageSelector, props)
        : createApp(LanguageSelector, props);

    // Registreer error handler
    app.config.errorHandler = (err, vm, info) => {
      console.error('🚨 [Vue Error]', err);
      console.error('Component:', vm);
      console.error('Error Info:', info);
    };

    try {
        // Mount de component 
        const mountedApp = app.mount(container);
        console.log('🔍 [DEBUG] LanguageSelector instantie gemount:', mountedApp);
    } catch (mountError) {
        console.error('🚨 [ERROR] Fout bij mounten van LanguageSelector met Vue:', mountError);
        console.log('🔍 [DEBUG] Probeer alternatieve direct DOM rendering...');

        // Probeer de legacy renderComponent methode als Vue mounting mislukt
        if (typeof LanguageSelector.renderComponent === 'function') {
            console.log('🔍 [DEBUG] LanguageSelector.renderComponent gevonden, directe rendering uitvoeren');
            try {
                LanguageSelector.renderComponent(container, props);
                console.log('🔍 [DEBUG] LanguageSelector direct gerenderd via renderComponent');
            } catch (renderError) {
                console.error('🚨 [ERROR] Ook alternatieve rendering gefaald:', renderError);
            }
        } else {
            console.error('🚨 [ERROR] Geen renderComponent methode beschikbaar op LanguageSelector');

            // Noodoplossing: Handmatige DOM manipulatie
            container.innerHTML = `
                <div class="language-selector">
                    <label for="language-select">Taal / Language:</label>
                    <div class="select-wrapper">
                        <select id="language-select" class="language-select">
                            <option value="nl" selected>🇳🇱 Nederlands</option>
                            <option value="en">🇬🇧 English</option>
                        </select>
                    </div>
                </div>
            `;

            // Event listener voor de fallback oplossing
            const selectElement = container.querySelector('#language-select');
            if (selectElement) {
                selectElement.addEventListener('change', (e) => {
                    const newLanguage = e.target.value;
                    console.log(`Taal gewijzigd naar ${newLanguage} (via fallback)`);

                    // Update chatConfig
                    if (window.chatConfig) {
                        window.chatConfig.language = newLanguage;
                    }

                    // Stuur event voor andere componenten
                    const globalEvent = new CustomEvent('language-changed', {
                        detail: { language: newLanguage }
                    });
                    document.dispatchEvent(globalEvent);

                    // Sla voorkeur op
                    localStorage.setItem('preferredLanguage', newLanguage);
                });
            }
        }
    }

    // Language change event listener
    document.addEventListener('vue:language-changed', function(event) {
      const newLanguage = event.detail.language;
      console.log(`Taal gewijzigd naar ${newLanguage}`);

      // Update chatConfig
      if (window.chatConfig) {
        window.chatConfig.language = newLanguage;
      }

      // Stuur event voor andere componenten
      const globalEvent = new CustomEvent('language-changed', {
        detail: { language: newLanguage }
      });
      document.dispatchEvent(globalEvent);

      // Sla voorkeur op
      localStorage.setItem('preferredLanguage', newLanguage);
    });

    console.log('🔍 [DEBUG] Language selector setup voltooid');
  } catch (error) {
    console.error('🚨 [CRITICAL ERROR] Bij initialiseren language selector:', error);
    console.error('Stack trace:', error.stack);
  }
}

/**
 * Initialiseert de chat app (Vue component)
 */
function initializeChatApp() {
  console.log('🔍 [DEBUG] Start initializeChatApp');

  const container = document.querySelector('.chat-container');
  console.log('🔍 [DEBUG] Chat container element:', container);

  if (!container) {
    console.error('.chat-container niet gevonden');
    return;
  }

  try {
    // Controleer of componenten beschikbaar zijn en log debug informatie
    console.log('🔍 [DEBUG] ChatApp component beschikbaar:', ChatApp);
    console.log('🔍 [DEBUG] Geïmporteerde componenten:', Object.keys(Components));
    console.log('🔍 [DEBUG] MessageHistory component:', Components.MessageHistory);
    console.log('🔍 [DEBUG] ChatInput component:', Components.ChatInput);

    // Geen workarounds voor Popper nodig

    // Controleer of renderComponent methoden beschikbaar zijn
    console.log('🔍 [DEBUG] MessageHistory.renderComponent beschikbaar:', 
      typeof Components.MessageHistory.renderComponent === 'function');
    console.log('🔍 [DEBUG] ChatInput.renderComponent beschikbaar:', 
      typeof Components.ChatInput.renderComponent === 'function');

    if (!ChatApp) {
      throw new Error('ChatApp component niet gevonden');
    }

    // Extra verificatie dat alle sub-componenten beschikbaar zijn
    if (!Components.MessageHistory || !Components.ChatInput || 
        !Components.TypingIndicator || !Components.ChatMessage) {
      console.warn('⚠️ [WARN] Niet alle benodigde sub-componenten zijn geladen!');
    }

    // Maak props voor de component
    const props = {
      apiPrefix: window.chatConfig.apiPrefix || '',
      conversationId: window.chatConfig.conversationId || 'default',
      userId: window.chatConfig.userId || null,
      userName: window.chatConfig.userName || '',
      initialLanguage: window.chatConfig.language || 'nl',
      supportedLanguageDetails: window.chatConfig.supportedLanguageDetails || {},
      allowedLanguages: window.chatConfig.allowedLanguages || ['nl', 'en', 'fr', 'de']
    };

    console.log('🔍 [DEBUG] Alle componenten registreren voor ChatApp...');

    console.log('🔍 [DEBUG] Props voor ChatApp:', JSON.stringify(props, null, 2));

    // Mount de component met alle nodige componenten
    const app = createApp(ChatApp, props);

    // Registreer alle componenten globaal
    Object.entries(Components).forEach(([name, component]) => {
      console.log(`🔍 [DEBUG] Registreer component globaal: ${name}`);
      app.component(name, component);
    });

    // Registreer error handler
    app.config.errorHandler = (err, vm, info) => {
      console.error('🚨 [Vue Error in ChatApp]', err);
      console.error('Component:', vm);
      console.error('Error Info:', info);
    };

    // Log app object voor debugging
    console.log('🔍 [DEBUG] ChatApp Vue app object:', app);
    console.log('🔍 [DEBUG] App.mount functie:', typeof app.mount);

    // Mount de component
    const mountedApp = app.mount(container);
    console.log('🔍 [DEBUG] ChatApp gemount, instance:', mountedApp);

    // Bewaar referentie globaal voor debugging
    window.__chatApp = mountedApp;

    // Bewaar een referentie naar de Vue instantie voor gebruik door andere componenten
    window.__vueApp = app;
    console.log('🔍 [DEBUG] Vue app instance globaal beschikbaar als window.__vueApp');

    // Log belangrijke methods van de gemounte component
    console.log('🔍 [DEBUG] Belangrijke ChatApp methods beschikbaar:', {
      renderComponent: typeof mountedApp.renderComponent === 'function',
      initializeChat: typeof mountedApp.initializeChat === 'function'
    });
  } catch (error) {
    console.error('🚨 [CRITICAL ERROR] Bij initialiseren chat app:', error);
    console.error('Stack trace:', error.stack);

    // Fallback naar placeholder
    container.innerHTML = '<div>Fout bij het initialiseren van de chat applicatie</div>';
  }
}

console.log('Chat client modules geladen en gebundeld met moderne ES module structuur.');