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

eveai_chat_client/static/assets/js/components/ChatInput.js

@@ -1,35 +1,89 @@
 // static/js/components/ChatInput.js
 
-    // Importeer de IconManager (als module systeem wordt gebruikt)
-    // Anders moet je ervoor zorgen dat MaterialIconManager.js eerder wordt geladen
-    // en iconManager beschikbaar is via window.iconManager
+    // Importeer de benodigde componenten
+    import { DynamicForm } from './DynamicForm.js';
+    import { IconManagerMixin } from '../iconManager.js';
 
-// Voeg stylesheet toe voor ChatInput-specifieke stijlen
-const addStylesheet = () => {
-    if (!document.querySelector('link[href*="chat-input.css"]')) {
-        const link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = '/static/assets/css/chat-input.css';
-        document.head.appendChild(link);
-    }
-};
-
-// Laad de stylesheet
-addStylesheet();
+// CSS wordt nu geladen via de main bundle in chat-client.js
+// We hoeven hier niets dynamisch te laden
 
 export const ChatInput = {
     name: 'ChatInput',
     components: {
-        'dynamic-form': window.DynamicForm
+        'dynamic-form': DynamicForm
     },
-    created() {
-        // Als module systeem wordt gebruikt:
-        // import { iconManager } from './MaterialIconManager.js';
-        // Anders gebruiken we window.iconManager als het beschikbaar is:
-        if (window.iconManager && this.formData && this.formData.icon) {
-            window.iconManager.ensureIconsLoaded({}, [this.formData.icon]);
+    // Static method for direct rendering
+    renderComponent(container, props, app) {
+        console.log('🔍 [DEBUG] ChatInput.renderComponent() aangeroepen');
+        console.log('🔍 [DEBUG] ChatInput container:', container);
+        console.log('🔍 [DEBUG] ChatInput props:', props);
+        console.log('🔍 [DEBUG] ChatInput app:', app);
+
+        if (!container) {
+            console.error('Container element niet gevonden voor ChatInput');
+            return null;
         }
 
+        // Controleer de globale dependencies
+        console.log('🔍 [DEBUG] Global dependencies check:');
+        console.log('- window.Vue:', typeof window.Vue);
+        if (window.Vue) {
+            console.log('- window.Vue.createApp:', typeof window.Vue.createApp);
+            console.log('- window.Vue.version:', window.Vue.version);
+        }
+
+        console.log('🔍 [DEBUG] ChatInput container gevonden, Vue app aan het initialiseren');
+
+        try {
+            // We controleren het app object
+            if (!app) {
+                console.error('🚨 [ERROR] Geen Vue app object ontvangen');
+                return null;
+            }
+
+            // Check of we een correcte Vue app hebben of we moeten er een maken
+            if (typeof app.mount !== 'function') {
+                console.log('🔍 [DEBUG] Ontvangen app heeft geen mount functie, dit is mogelijk een config object');
+                // Controleer of window.Vue beschikbaar is
+                if (!window.Vue || typeof window.Vue.createApp !== 'function') {
+                    console.error('🚨 [ERROR] window.Vue.createApp is niet beschikbaar');
+                    return null;
+                }
+
+                // Maak een nieuwe Vue app met het ChatInput component en de props
+                console.log('🔍 [DEBUG] Nieuwe Vue app aanmaken met ChatInput component');
+                try {
+                    app = window.Vue.createApp(ChatInput, props);
+                    console.log('🔍 [DEBUG] Nieuwe app aangemaakt:', app);
+                } catch (createError) {
+                    console.error('🚨 [ERROR] Fout bij aanmaken Vue app:', createError);
+                    // Probeer een alternatieve aanpak zonder importreferenties
+                    console.log('🔍 [DEBUG] Alternatieve aanpak proberen...');
+                    const componentCopy = JSON.parse(JSON.stringify(ChatInput));
+                    app = window.Vue.createApp(componentCopy, props);
+                }
+            }
+
+            // Stel een fallback DOM in voor het geval mounten mislukt
+            container.innerHTML = `<div class="chat-input-loading">Chat input laden...</div>`;
+
+            // Nu kunnen we de app mounten
+            console.log('🔍 [DEBUG] App.mount aanroepen op container');
+            const instance = app.mount(container);
+            console.log('🔍 [DEBUG] ChatInput component succesvol gemount, instance:', instance);
+            return instance;
+        } catch (error) {
+            console.error('🚨 [ERROR] Fout bij mounten ChatInput component:', error);
+            console.error('Error stack:', error.stack);
+            return null;
+        }
+    },
+    // Gebruik de IconManagerMixin om automatisch iconen te laden
+    mixins: [IconManagerMixin],
+    created() {
+        // Als er een formData.icon is, wordt deze automatisch geladen via IconManagerMixin
+        // Geen expliciete window.iconManager calls meer nodig
+
         // Maak een benoemde handler voor betere cleanup
         this.languageChangeHandler = (event) => {
             if (event.detail && event.detail.language) {
@@ -342,10 +396,7 @@ export const ChatInput = {
     },
     template: `
         <div class="chat-input-container">
-            <!-- Dynamisch toevoegen van Material Symbols Outlined voor iconen -->
-            <div v-if="formData && formData.icon" class="material-icons-container">
-                <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
-            </div>
+            <!-- Material Icons worden nu globaal geladen in scripts.html -->
             <!-- Dynamisch formulier container -->
             <div v-if="formData" class="dynamic-form-container">
                 <!-- De titel wordt in DynamicForm weergegeven en niet hier om dubbele titels te voorkomen -->