- Eerste stap in het opnieuw laten werken van de chat client...

2025-07-18 16:07:13 +02:00
parent f3a243698c
commit 11b1d548bd
20 changed files with 1201 additions and 352 deletions
--- a/frontend_src/js/chat-client.js
+++ b/frontend_src/js/chat-client.js
@@ -0,0 +1,72 @@
+// Chat Client JavaScript modules
+// Modern gebundelde versie met ES modules
+
+// CSS imports - zorg dat deze bestanden bestaan en correct worden gebundeld door Parcel
+import '../css/chat-client.css';
+// CSS imports uit eveai_chat_client
+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 } from 'vue';
+import { marked } from 'marked';
+
+// Maak fundamentele libraries globaal beschikbaar
+window.Vue = { createApp };
+window.marked = marked;
+
+// Support tools
+import iconManager, { IconManagerMixin } from '../../../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));
+
+// Main chat application - moet als laatste worden geladen
+import { ChatApp } from '../../../eveai_chat_client/static/assets/js/ChatApp.js';
+
+// Wacht tot het document volledig is geladen voordat we Vue initialiseren
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('Initializing Chat Application');
+
+    // Check of #app element bestaat
+    const appElement = document.getElementById('app');
+    if (!appElement) {
+        console.error('DOM element #app not found. Cannot initialize Vue application.');
+        return;
+    }
+
+    console.log('DOM element #app exists:', appElement);
+
+    try {
+        // Maak de Vue applicatie aan
+        const app = createApp(ChatApp);
+
+        // Registreer alle componenten globaal
+        for (const [name, component] of Object.entries(Components)) {
+            app.component(name, component);
+        }
+
+        // Voeg de IconManagerMixin toe voor alle componenten
+        app.mixin(IconManagerMixin);
+
+        // Mount de applicatie op #app
+        const mountedApp = app.mount('#app');
+
+        // Bewaar een referentie naar de app voor debugging
+        window.__vueApp = app;
+
+        console.log('Vue app mounted successfully');
+    } catch (error) {
+        console.error('Error initializing Vue application:', error);
+    }
+});