- 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 -->

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,

eveai_chat_client/static/assets/js/components/DynamicForm.js

@@ -1,5 +1,26 @@
 export const DynamicForm = {
     name: 'DynamicForm',
+    // Static method for direct rendering
+    renderComponent(container, props, app) {
+        console.log('🔍 [DEBUG] DynamicForm.renderComponent() aangeroepen');
+
+        if (!container) {
+            console.error('Container element niet gevonden voor DynamicForm');
+            return null;
+        }
+
+        console.log('🔍 [DEBUG] DynamicForm container gevonden, Vue app aanmaken');
+
+        try {
+            // Maak een nieuwe Vue app instantie met dit component
+            const instance = app.mount(container);
+            console.log('🔍 [DEBUG] DynamicForm component succesvol gemount');
+            return instance;
+        } catch (error) {
+            console.error('🚨 [ERROR] Fout bij mounten DynamicForm component:', error);
+            return null;
+        }
+    },
     created() {
         // Zorg ervoor dat het icoon geladen wordt als iconManager beschikbaar is
         if (window.iconManager && this.formData && this.formData.icon) {

eveai_chat_client/static/assets/js/components/FormField.js

@@ -1,5 +1,26 @@
 export const FormField = {
     name: 'FormField',
+    // Static method for direct rendering
+    renderComponent(container, props, app) {
+        console.log('🔍 [DEBUG] FormField.renderComponent() aangeroepen');
+
+        if (!container) {
+            console.error('Container element niet gevonden voor FormField');
+            return null;
+        }
+
+        console.log('🔍 [DEBUG] FormField container gevonden, Vue app aanmaken');
+
+        try {
+            // Maak een nieuwe Vue app instantie met dit component
+            const instance = app.mount(container);
+            console.log('🔍 [DEBUG] FormField component succesvol gemount');
+            return instance;
+        } catch (error) {
+            console.error('🚨 [ERROR] Fout bij mounten FormField component:', error);
+            return null;
+        }
+    },
     props: {
         field: {
             type: Object,

eveai_chat_client/static/assets/js/components/FormMessage.js

@@ -2,6 +2,52 @@
 
 export const FormMessage = {
     name: 'FormMessage',
+    // Static method for direct rendering
+    renderComponent(container, props, app) {
+        console.log('🔍 [DEBUG] FormMessage.renderComponent() aangeroepen');
+        console.log('🔍 [DEBUG] FormMessage container:', container);
+        console.log('🔍 [DEBUG] FormMessage props:', props);
+
+        if (!container) {
+            console.error('Container element niet gevonden voor FormMessage');
+            return null;
+        }
+
+        console.log('🔍 [DEBUG] FormMessage 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 FormMessage component en de props
+                console.log('🔍 [DEBUG] Nieuwe Vue app aanmaken met FormMessage component');
+                app = window.Vue.createApp(FormMessage, 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] FormMessage component succesvol gemount');
+            return instance;
+        } catch (error) {
+            console.error('🚨 [ERROR] Fout bij mounten FormMessage component:', error);
+            console.error('Error stack:', error.stack);
+            return null;
+        }
+    },
     props: {
         formData: {
             type: Object,

eveai_chat_client/static/assets/js/components/LanguageSelector.js

@@ -1,4 +1,3 @@
-
 export const LanguageSelector = {
     name: 'LanguageSelector',
     props: {
@@ -6,6 +5,10 @@ export const LanguageSelector = {
             type: String,
             default: 'nl'
         },
+        currentLanguage: {
+            type: String,
+            default: null
+        },
         supportedLanguageDetails: {
             type: Object,
             default: () => ({})
@@ -13,22 +16,44 @@ export const LanguageSelector = {
         allowedLanguages: {
             type: Array,
             default: () => ['nl', 'en', 'fr', 'de']
-        }
+        },
     },
-    computed: {
-        availableLanguages() {
-            // Maak een array van taalobjecten op basis van de toegestane talen
-            // en de ondersteunde taaldetails
-            const languages = [];
+    data() {
+        const startLanguage = this.currentLanguage || this.initialLanguage;
+        return {
+            selectedLanguage: startLanguage,
+            internalCurrentLanguage: startLanguage
+        };
+    },
+    mounted() {
+        // console.log('🔍 [DEBUG] LanguageSelector mounted');
+        // console.log('🔍 [DEBUG] Props:', {
+        //     initialLanguage: this.initialLanguage,
+        //     currentLanguage: this.currentLanguage,
+        //     supportedLanguageDetails: this.supportedLanguageDetails,
+        //     allowedLanguages: this.allowedLanguages
+        // });
 
-            // Als er geen toegestane talen zijn of de lijst is leeg, gebruik een standaardlijst
-            const languagesToUse = (this.allowedLanguages && this.allowedLanguages.length > 0) 
-                ? this.allowedLanguages 
+        // Render the component
+        this.renderComponent();
+
+        // Emit initial language
+        this.$emit('language-changed', this.selectedLanguage);
+
+        // DOM event
+        const event = new CustomEvent('vue:language-changed', {
+            detail: { language: this.selectedLanguage }
+        });
+        document.dispatchEvent(event);
+    },
+    methods: {
+        getAvailableLanguages() {
+            const languages = [];
+            const languagesToUse = (this.allowedLanguages && this.allowedLanguages.length > 0)
+                ? this.allowedLanguages
                 : ['nl', 'en', 'fr', 'de'];
 
-            // Loop door alle ondersteunde taaldetails
             if (this.supportedLanguageDetails && Object.keys(this.supportedLanguageDetails).length > 0) {
-                // Vind talen die overeenkomen met toegestane taalcodes
                 for (const [langName, langDetails] of Object.entries(this.supportedLanguageDetails)) {
                     const isoCode = langDetails['iso 639-1'];
                     if (languagesToUse.includes(isoCode)) {
@@ -40,7 +65,6 @@ export const LanguageSelector = {
                     }
                 }
             } else {
-                // Fallback als er geen taaldetails beschikbaar zijn
                 const defaultLanguages = {
                     'nl': { name: 'Nederlands', flag: '🇳🇱' },
                     'en': { name: 'English', flag: '🇬🇧' },
@@ -52,67 +76,87 @@ export const LanguageSelector = {
                     if (defaultLanguages[code]) {
                         languages.push({
                             code: code,
-                            name: defaultLanguages[code].code,
+                            name: defaultLanguages[code].name,
                             flag: defaultLanguages[code].flag
                         });
                     }
                 });
             }
 
-            console.log('LanguageSelector: availableLanguages computed:', languages);
             return languages;
-        }
-    },
-    emits: ['language-changed'],
-    data() {
-        return {
-            selectedLanguage: this.initialLanguage,
-            currentLanguage: this.initialLanguage
-        };
-    },
-    mounted() {
-        console.log('LanguageSelector mounted with:', {
-            initialLanguage: this.initialLanguage,
-            selectedLanguage: this.selectedLanguage,
-            availableLanguages: this.availableLanguages
-        });
+        },
 
-        // Stuur het language-changed event uit met de initiële taal
-        console.log(`LanguageSelector: Emitting language-changed event for initial language ${this.initialLanguage}`);
-        this.$emit('language-changed', this.initialLanguage);
-    },
-    methods: {
         changeLanguage(languageCode) {
-            console.log(`LanguageSelector: changeLanguage called with ${languageCode}, current: ${this.currentLanguage}`);
+            console.log(`LanguageSelector: changeLanguage called with ${languageCode}`);
 
-            if (this.currentLanguage !== languageCode) {
-                console.log(`LanguageSelector: Emitting language-changed event for ${languageCode}`);
-                this.currentLanguage = languageCode;
+            if (this.internalCurrentLanguage !== languageCode) {
+                this.internalCurrentLanguage = languageCode;
+                this.selectedLanguage = languageCode;
+
+                // Vue component emit
                 this.$emit('language-changed', languageCode);
-            } else {
-                console.log(`LanguageSelector: No change needed, already ${languageCode}`);
+
+                // DOM event
+                const event = new CustomEvent('vue:language-changed', {
+                    detail: { language: languageCode }
+                });
+                document.dispatchEvent(event);
+            }
+        },
+
+            renderComponent() {
+                // We gaan direct de container manipuleren
+                const container = document.getElementById('language-selector-container');
+                if (!container) {
+                    console.error('Container niet gevonden voor LanguageSelector');
+                    return;
+                }
+
+                const availableLanguages = this.getAvailableLanguages();
+                // console.log('🔍 [DEBUG] Available languages:', availableLanguages);
+
+                const optionsHtml = availableLanguages.map(lang =>
+                    `<option value="${lang.code}" ${lang.code === this.selectedLanguage ? 'selected' : ''}>${lang.flag} ${lang.name}</option>`
+                ).join('');
+
+                container.innerHTML = `
+                    <div class="language-selector">
+                        <label for="language-select">Taal / Language:</label>
+                        <div class="select-wrapper">
+                            <select id="language-select" class="language-select">
+                                ${optionsHtml}
+                            </select>
+                        </div>
+                    </div>
+                `;
+
+                // Add event listener
+                const selectElement = container.querySelector('#language-select');
+                if (selectElement) {
+                    selectElement.addEventListener('change', (e) => {
+                        this.changeLanguage(e.target.value);
+                    });
+                }
+
+                // console.log('🔍 [DEBUG] Component rendered successfully');
             }
-        }
     },
+
+    // Stap 1: Ondersteun zowel template-based rendering als manual rendering
+    // Door beide methoden te ondersteunen, werkt het component in beide scenario's
     template: `
         <div class="language-selector">
             <label for="language-select">Taal / Language:</label>
             <div class="select-wrapper">
-                <select 
-                    id="language-select" 
-                    v-model="selectedLanguage" 
-                    @change="changeLanguage(selectedLanguage); currentLanguage = selectedLanguage"
-                    class="language-select"
-                >
-                    <option 
-                        v-for="lang in availableLanguages" 
-                        :key="lang.code" 
-                        :value="lang.code"
-                    >
-                        {{ lang.flag }} {{ lang.name }}
-                    </option>
+                <select id="language-select" class="language-select" v-model="selectedLanguage" @change="changeLanguage(selectedLanguage)">
+                    <option v-for="lang in getAvailableLanguages()" :key="lang.code" :value="lang.code">{{ lang.flag }} {{ lang.name }}</option>
                 </select>
             </div>
         </div>
-    `
+    `,
+
+    // Minimale render functie als fallback
+    render() {
+        return document.createElement('div');
+    }
 };

eveai_chat_client/static/assets/js/components/MessageHistory.js

@@ -1,5 +1,15 @@
-export const MessageHistory = {
+    // Import afhankelijke componenten
+    import { ChatMessage } from './ChatMessage.js';
+    import { TypingIndicator } from './TypingIndicator.js';
+    import { ProgressTracker } from './ProgressTracker.js';
+
+    export const MessageHistory = {
     name: 'MessageHistory',
+    components: {
+        'chat-message': ChatMessage,
+        'typing-indicator': TypingIndicator,
+        'progress-tracker': ProgressTracker
+    },
     props: {
         messages: {
             type: Array,
@@ -13,10 +23,10 @@ export const MessageHistory = {
         isSubmittingForm: {
             type: Boolean,
             default: false
-            },
-            apiPrefix: {
-                type: String,
-                default: ''
+        },
+        apiPrefix: {
+            type: String,
+            default: ''
         },
         autoScroll: {
             type: Boolean,
@@ -216,5 +226,27 @@ export const MessageHistory = {
                 <typing-indicator v-if="isTyping"></typing-indicator>
             </div>
         </div>
-    `,
+    `
+};
+
+// Statische renderComponent methode voor het MessageHistory object
+MessageHistory.renderComponent = function(container, props, app) {
+    console.log('🔍 [DEBUG] MessageHistory.renderComponent() aangeroepen als statische methode');
+
+    if (!container) {
+        console.error('Container element niet gevonden voor MessageHistory');
+        return null;
+    }
+
+    console.log('🔍 [DEBUG] MessageHistory container gevonden, Vue app aanmaken');
+
+    try {
+        // Maak een nieuwe Vue app instantie met dit component
+        const instance = app.mount(container);
+        console.log('🔍 [DEBUG] MessageHistory component succesvol gemount');
+        return instance;
+    } catch (error) {
+        console.error('🚨 [ERROR] Fout bij mounten MessageHistory component:', error);
+        return null;
+    }
 };

eveai_chat_client/static/assets/js/components/ProgressTracker.js

@@ -308,4 +308,26 @@ export const ProgressTracker = {
             </div>
         </div>
     `
+};
+
+// Voeg de renderComponent toe als statische methode op het ProgressTracker object
+ProgressTracker.renderComponent = function(container, props, app) {
+    console.log('🔍 [DEBUG] ProgressTracker.renderComponent() aangeroepen');
+
+    if (!container) {
+        console.error('Container element niet gevonden voor ProgressTracker');
+        return null;
+    }
+
+    console.log('🔍 [DEBUG] ProgressTracker container gevonden, Vue app aanmaken');
+
+    try {
+        // Maak een nieuwe Vue app instantie met dit component
+        const instance = app.mount(container);
+        console.log('🔍 [DEBUG] ProgressTracker component succesvol gemount');
+        return instance;
+    } catch (error) {
+        console.error('🚨 [ERROR] Fout bij mounten ProgressTracker component:', error);
+        return null;
+    }
 };

eveai_chat_client/static/assets/js/components/TypingIndicator.js

@@ -1,10 +1,46 @@
 export const TypingIndicator = {
     name: 'TypingIndicator',
+    props: {
+        showText: {
+            type: Boolean,
+            default: false
+        },
+        text: {
+            type: String,
+            default: 'Bezig met typen...'
+        }
+    },
+    methods: {
+        // Andere methoden kunnen hier staan
+    },
     template: `
         <div class="typing-indicator">
             <div class="typing-dot"></div>
             <div class="typing-dot"></div>
             <div class="typing-dot"></div>
+            <div v-if="showText" class="typing-text">{{ text }}</div>
         </div>
     `
+};
+
+// Voeg statische renderComponent methode toe aan het TypingIndicator object
+TypingIndicator.renderComponent = function(container, props, app) {
+    console.log('🔍 [DEBUG] TypingIndicator.renderComponent() aangeroepen als statische methode');
+
+    if (!container) {
+        console.error('Container element niet gevonden voor TypingIndicator');
+        return null;
+    }
+
+    console.log('🔍 [DEBUG] TypingIndicator container gevonden, Vue app aanmaken');
+
+    try {
+        // Maak een nieuwe Vue app instantie met dit component
+        const instance = app.mount(container);
+        console.log('🔍 [DEBUG] TypingIndicator component succesvol gemount');
+        return instance;
+    } catch (error) {
+        console.error('🚨 [ERROR] Fout bij mounten TypingIndicator component:', error);
+        return null;
+    }
 };

eveai_chat_client/static/assets/js/components/index.js

@@ -0,0 +1,34 @@
+// Component barrel export file
+// Dit bestand maakt het eenvoudiger om alle componenten in één keer te importeren
+
+// Importeer eerst alle componenten lokaal
+import { TypingIndicator } from './TypingIndicator.js';
+import { FormField } from './FormField.js';
+import { DynamicForm } from './DynamicForm.js';
+import { ChatMessage } from './ChatMessage.js';
+import { MessageHistory } from './MessageHistory.js';
+import { ProgressTracker } from './ProgressTracker.js';
+import { LanguageSelector } from './LanguageSelector.js';
+import { ChatInput } from './ChatInput.js';
+
+// Exporteer componenten individueel
+export { TypingIndicator };
+export { FormField };
+export { DynamicForm };
+export { ChatMessage };
+export { MessageHistory };
+export { ProgressTracker };
+export { LanguageSelector };
+export { ChatInput };
+
+// Debug logging voor index.js
+console.log('🔍 [DEBUG] Components index.js geladen, exporteert:', {
+    TypingIndicator: typeof TypingIndicator,
+    ChatMessage: typeof ChatMessage,
+    MessageHistory: typeof MessageHistory,
+    ChatInput: typeof ChatInput
+});
+
+// Nu kunnen componenten op verschillende manieren worden geïmporteerd:
+// 1. import { FormField, ChatMessage } from './components';
+// 2. import { ChatInput } from './components/ChatInput.js';