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

@@ -39,6 +39,7 @@
 <script>
 import ChatMessage from './ChatMessage.vue';
 import TypingIndicator from './TypingIndicator.vue';
+import { useTranslationClient } from '../js/composables/useTranslation.js';
 
 export default {
     name: 'MessageHistory',
@@ -46,6 +47,13 @@ export default {
         'chat-message': ChatMessage,
         'typing-indicator': TypingIndicator
     },
+    setup() {
+        const { translateSafe } = useTranslationClient();
+        
+        return {
+            translateSafe
+        };
+    },
     props: {
         messages: {
             type: Array,
@@ -141,30 +149,24 @@ export default {
                     console.log('Vertaling van eerste AI bericht naar:', event.detail.language);
                     
                     try {
-                        // Controleer of TranslationClient beschikbaar is
-                        if (!window.TranslationClient || typeof window.TranslationClient.translate !== 'function') {
-                            console.error('TranslationClient.translate is niet beschikbaar');
-                            return;
-                        }
-
-                        // Gebruik TranslationClient
-                        const response = await window.TranslationClient.translate(
+                        // Gebruik moderne translateSafe composable
+                        const translatedText = await this.translateSafe(
                             firstMessage.originalContent,
                             event.detail.language,
-                            null, // source_lang (auto-detect)
-                            'chat_message', // context
-                            this.apiPrefix // API prefix voor tenant routing
+                            {
+                                context: 'chat_message',
+                                apiPrefix: this.apiPrefix,
+                                fallbackText: firstMessage.originalContent
+                            }
                         );
 
-                        if (response.success) {
-                            // Update de inhoud van het bericht
-                            firstMessage.content = response.translated_text;
-                            console.log('Eerste bericht succesvol vertaald');
-                        } else {
-                            console.error('Vertaling mislukt:', response.error);
-                        }
+                        // Update de inhoud van het bericht
+                        firstMessage.content = translatedText;
+                        console.log('Eerste bericht succesvol vertaald');
                     } catch (error) {
                         console.error('Fout bij vertalen eerste bericht:', error);
+                        // Fallback naar originele inhoud
+                        firstMessage.content = firstMessage.originalContent;
                     }
                 }
             }