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

eveai_chat_client/static/assets/js/components/ChatMessage.js

@@ -1,35 +1,62 @@
-// Voeg stylesheets toe voor formulier en chat berichten weergave
-const addStylesheets = () => {
-    // Formulier stylesheet
-    if (!document.querySelector('link[href*="form-message.css"]')) {
-        const formLink = document.createElement('link');
-        formLink.rel = 'stylesheet';
-        formLink.href = '/static/assets/css/form-message.css';
-        document.head.appendChild(formLink);
-    }
+// Import benodigde componenten
+import { DynamicForm } from './DynamicForm.js';
+import { ProgressTracker } from './ProgressTracker.js';
 
-    // Chat bericht stylesheet
-    if (!document.querySelector('link[href*="chat-message.css"]')) {
-        const chatLink = document.createElement('link');
-        chatLink.rel = 'stylesheet';
-        chatLink.href = '/static/assets/css/chat-message.css';
-        document.head.appendChild(chatLink);
-    }
-
-    // Material Icons font stylesheet
-    if (!document.querySelector('link[href*="Material+Symbols+Outlined"]')) {
-        const iconLink = document.createElement('link');
-        iconLink.rel = 'stylesheet';
-        iconLink.href = 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0';
-        document.head.appendChild(iconLink);
-    }
-};
-
-// Laad de stylesheets
-addStylesheets();
+// CSS en Material Icons worden nu geladen via de hoofdbundel en scripts.html
+// We hoeven hier niets dynamisch te laden
 
 export const ChatMessage = {
     name: 'ChatMessage',
+    // Static method for direct rendering
+    renderComponent(container, props, app) {
+        console.log('🔍 [DEBUG] ChatMessage.renderComponent() aangeroepen');
+        console.log('🔍 [DEBUG] ChatMessage container:', container);
+        console.log('🔍 [DEBUG] ChatMessage props:', props);
+
+        if (!container) {
+            console.error('Container element niet gevonden voor ChatMessage');
+            return null;
+        }
+
+        console.log('🔍 [DEBUG] ChatMessage 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 ChatMessage component en de props
+                console.log('🔍 [DEBUG] Nieuwe Vue app aanmaken met ChatMessage component');
+                app = window.Vue.createApp(ChatMessage, props);
+                console.log('🔍 [DEBUG] Nieuwe app aangemaakt:', app);
+            }
+
+            // Nu kunnen we de app mounten
+            console.log('🔍 [DEBUG] App.mount aanroepen op container');
+            const instance = app.mount(container);
+            console.log('🔍 [DEBUG] ChatMessage component succesvol gemount');
+            return instance;
+        } catch (error) {
+            console.error('🚨 [ERROR] Fout bij mounten ChatMessage component:', error);
+            console.error('Error stack:', error.stack);
+            return null;
+        }
+    },
+    components: {
+        'dynamic-form': DynamicForm,
+        'progress-tracker': ProgressTracker
+    },
     props: {
         message: {
             type: Object,