- 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/ChatInput.vue

@@ -62,15 +62,26 @@
 <script>
 // Importeer de benodigde componenten
 import DynamicForm from './DynamicForm.vue';
-import { IconManagerMixin } from '../js/iconManager.js';
+import { useIconManager } from '../js/composables/useIconManager.js';
+import { useTranslationClient } from '../js/composables/useTranslation.js';
 
 export default {
     name: 'ChatInput',
     components: {
         'dynamic-form': DynamicForm
     },
-    // Gebruik de IconManagerMixin om automatisch iconen te laden
-    mixins: [IconManagerMixin],
+    setup(props) {
+        const { watchIcon } = useIconManager();
+        const { translateSafe, isTranslating: isTranslatingText } = useTranslationClient();
+        
+        // Watch formData.icon for automatic icon loading
+        watchIcon(() => props.formData?.icon);
+        
+        return {
+            translateSafe,
+            isTranslatingText
+        };
+    },
     props: {
         currentMessage: {
             type: String,
@@ -139,14 +150,6 @@ export default {
         }
     },
     watch: {
-        'formData.icon': {
-            handler(newIcon) {
-                if (newIcon && window.iconManager) {
-                    window.iconManager.ensureIconsLoaded({}, [newIcon]);
-                }
-            },
-            immediate: true
-        },
         formData: {
             handler(newFormData, oldFormData) {
                 console.log('ChatInput formData changed:', newFormData);
@@ -186,7 +189,7 @@ export default {
         }
     },
     created() {
-        // Als er een formData.icon is, wordt deze automatisch geladen via IconManagerMixin
+        // Als er een formData.icon is, wordt deze automatisch geladen via useIconManager composable
         // Geen expliciete window.iconManager calls meer nodig
 
         // Maak een benoemde handler voor betere cleanup
@@ -234,30 +237,21 @@ export default {
             const originalText = this.placeholder;
 
             try {
-                // Controleer of TranslationClient beschikbaar is
-                if (!window.TranslationClient || typeof window.TranslationClient.translate !== 'function') {
-                    console.error('TranslationClient.translate is niet beschikbaar voor placeholder');
-                    return;
-                }
-
-                // Gebruik TranslationClient zonder UI indicator
+                // Gebruik moderne translateSafe composable
                 const apiPrefix = window.chatConfig?.apiPrefix || '';
-                const response = await window.TranslationClient.translate(
-                    originalText,
-                    language,
-                    null, // source_lang (auto-detect)
-                    'chat_input_placeholder', // context
-                    apiPrefix // API prefix voor tenant routing
-                );
+                const translatedText = await this.translateSafe(originalText, language, {
+                    context: 'chat_input_placeholder',
+                    apiPrefix,
+                    fallbackText: originalText
+                });
 
-                if (response.success) {
-                    // Update de placeholder
-                    this.translatedPlaceholder = response.translated_text;
-                } else {
-                    console.error('Vertaling placeholder mislukt:', response.error);
-                }
+                // Update de placeholder
+                this.translatedPlaceholder = translatedText;
+                console.log('Placeholder succesvol vertaald naar:', language);
             } catch (error) {
                 console.error('Fout bij vertalen placeholder:', error);
+                // Fallback naar originele tekst
+                this.translatedPlaceholder = originalText;
             } finally {
                 // Reset de vertaling vlag
                 this.isTranslating = false;