- iconManager MaterialIconManager.js zijn nu 'unified' in 1 component, en samen met translation utilities omgezet naar een meer moderne Vue composable

- De sidebar is nu eveneens omgezet naar een Vue component.

eveai_chat_client/static/assets/vue-components/ChatMessage.vue

@@ -115,6 +115,7 @@
 // Import benodigde componenten
 import DynamicForm from './DynamicForm.vue';
 import ProgressTracker from './ProgressTracker.vue';
+import { useIconManager } from '../js/composables/useIconManager.js';
 
 export default {
     name: 'ChatMessage',
@@ -122,6 +123,14 @@ export default {
         'dynamic-form': DynamicForm,
         'progress-tracker': ProgressTracker
     },
+    setup(props) {
+        const { watchIcon } = useIconManager();
+        
+        // Watch message.formData.icon for automatic icon loading
+        watchIcon(() => props.message.formData?.icon);
+        
+        return {};
+    },
     props: {
         message: {
             type: Object,
@@ -146,11 +155,8 @@ export default {
         };
     },
     created() {
-        // Zorg ervoor dat het icoon geladen wordt als iconManager beschikbaar is
-        if (window.iconManager && this.message.formData && this.message.formData.icon) {
-            window.iconManager.loadIcon(this.message.formData.icon);
-        }
-
+        // Icon loading is now handled automatically by useIconManager composable
+        
         // Sla de originele inhoud op voor het eerste bericht als we in een conversatie zitten met slechts één bericht
         if (this.message.sender === 'ai' && !this.message.originalContent) {
             this.message.originalContent = this.message.content;
@@ -174,16 +180,6 @@ export default {
             return this.message.formValues && Object.keys(this.message.formValues).length > 0;
         }
     },
-    watch: {
-        'message.formData.icon': {
-            handler(newIcon) {
-                if (newIcon && window.iconManager) {
-                    window.iconManager.loadIcon(newIcon);
-                }
-            },
-            immediate: true
-        }
-    },
     methods: {
         async handleLanguageChange(event) {
             // Controleer of dit het eerste bericht is in een gesprek met maar één bericht