- verbeteringen client

- Invoer van een 'constanten' cache op niveau van useTranslation.js, om in de ProgressTracker de boodschappen in de juiste taal te zetten.

eveai_chat_client/static/assets/js/composables/useTranslation.js

@@ -167,6 +167,94 @@ export function useTranslation() {
     };
 }
 
+// Global cache for constants - shared across all component instances
+const CONSTANTS_CACHE = {
+    currentLanguage: null,
+    translations: {}
+};
+
+/**
+ * Composable for translating application constants with global caching
+ * This ensures all component instances share the same cached translations
+ */
+export function useConstantsTranslation() {
+    const { translateSafe } = useTranslation();
+
+    /**
+     * Translate constants with global caching
+     * @param {Object} constants - Object with key-value pairs of constants to translate
+     * @param {string} targetLang - Target language code
+     * @param {Object} options - Translation options
+     * @returns {Promise<Object>} Object with translated constants
+     */
+    const translateConstants = async (constants, targetLang, options = {}) => {
+        console.log('useConstantsTranslation: translateConstants called', { targetLang, currentCached: CONSTANTS_CACHE.currentLanguage });
+        
+        // Check if we already have translations for this language
+        if (CONSTANTS_CACHE.currentLanguage === targetLang && CONSTANTS_CACHE.translations) {
+            console.log('useConstantsTranslation: Using cached translations for', targetLang);
+            return { ...CONSTANTS_CACHE.translations };
+        }
+
+        console.log('useConstantsTranslation: Translating constants to', targetLang);
+
+        try {
+            const translated = {};
+            
+            // Translate each constant
+            for (const [key, originalText] of Object.entries(constants)) {
+                translated[key] = await translateSafe(originalText, targetLang, {
+                    context: 'constants',
+                    fallbackText: originalText,
+                    ...options
+                });
+            }
+
+            // Update global cache
+            CONSTANTS_CACHE.currentLanguage = targetLang;
+            CONSTANTS_CACHE.translations = translated;
+
+            console.log('useConstantsTranslation: Successfully translated and cached constants');
+            return translated;
+        } catch (error) {
+            console.error('useConstantsTranslation: Error translating constants:', error);
+            // Return original constants as fallback
+            return { ...constants };
+        }
+    };
+
+    /**
+     * Get cached translations for current language
+     * @returns {Object|null} Cached translations or null if not available
+     */
+    const getCachedTranslations = () => {
+        return CONSTANTS_CACHE.currentLanguage ? { ...CONSTANTS_CACHE.translations } : null;
+    };
+
+    /**
+     * Clear the constants cache (useful for testing or language reset)
+     */
+    const clearCache = () => {
+        CONSTANTS_CACHE.currentLanguage = null;
+        CONSTANTS_CACHE.translations = {};
+        console.log('useConstantsTranslation: Cache cleared');
+    };
+
+    /**
+     * Get current cached language
+     */
+    const getCachedLanguage = () => {
+        return CONSTANTS_CACHE.currentLanguage;
+    };
+
+    return {
+        translateConstants,
+        getCachedTranslations,
+        clearCache,
+        getCachedLanguage
+    };
+}
+
 /**
  * Simplified composable for basic translation needs
  * Use this when you only need simple text translation

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

@@ -243,6 +243,7 @@ export default {
             if (eventData.answer) {
                 console.log('Updating message content with answer:', eventData.answer);
                 this.message.content = eventData.answer;
+                this.message.originalContent = eventData.answer;
             } else {
                 console.error('No answer in specialist-complete event data');
             }

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

@@ -145,7 +145,15 @@ export default {
                 const firstMessage = this.messages[0];
                 
                 // Controleer of we een originele inhoud hebben om te vertalen
-                if (firstMessage.originalContent) {
+                if (firstMessage.content) {
+
+                    if (!firstMessage.originalContent) {
+                        firstMessage.originalContent = firstMessage.content;
+                    }
+
+                    console.log('Originele inhoud van eerste AI bericht:', firstMessage.originalContent);
+                    console.log('Content eerste AI bericht:', firstMessage.content);
+
                     console.log('Vertaling van eerste AI bericht naar:', event.detail.language);
                     
                     try {

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

@@ -22,9 +22,9 @@
                 <span v-else-if="isCompleted" class="status-icon completed progress-icon">✓</span>
                 
                 <!-- Status tekst -->
-                <span v-if="error">Fout bij verwerking</span>
-                <span v-else-if="isCompleted">Verwerking voltooid</span>
-                <span v-else>Bezig met redeneren...</span>
+                <span v-if="error">{{ errorText }}</span>
+                <span v-else-if="isCompleted">{{ completedText }}</span>
+                <span v-else>{{ processingText }}</span>
             </div>
             <div class="progress-toggle">
                 {{ isExpanded ? '▼' : '◄' }}
@@ -53,6 +53,8 @@
 </template>
 
 <script>
+import { useTranslationClient, useConstantsTranslation } from '../js/composables/useTranslation.js';
+
 export default {
     name: 'ProgressTracker',
     props: {
@@ -74,21 +76,102 @@ export default {
             connecting: true,
             error: null,
             progressLines: [],
-            eventSource: null
+            eventSource: null,
+            // Vertaalde status teksten
+            translatedStatusTexts: {
+                error: 'Error while processing',
+                completed: 'Processing completed',
+                processing: 'Processing...'
+            },
+            currentLanguage: 'nl'
         };
     },
     computed: {
         isProcessing() {
             return !this.isCompleted && !this.hasError && !this.connecting;
+        },
+        // Computed properties voor vertaalde status teksten
+        errorText() {
+            return this.translatedStatusTexts.error;
+        },
+        completedText() {
+            return this.translatedStatusTexts.completed;
+        },
+        processingText() {
+            return this.translatedStatusTexts.processing;
         }
     },
     mounted() {
         this.connectToProgressStream();
+        
+        // Setup translation composables
+        const { translateSafe } = useTranslationClient();
+        const { translateConstants, getCachedTranslations, getCachedLanguage } = useConstantsTranslation();
+        this.translateSafe = translateSafe;
+        this.translateConstants = translateConstants;
+        this.getCachedTranslations = getCachedTranslations;
+        this.getCachedLanguage = getCachedLanguage;
+        
+        // Check if we already have cached translations and apply them
+        const cachedTranslations = this.getCachedTranslations();
+        if (cachedTranslations) {
+            console.log('ProgressTracker: Applying cached translations on mount');
+            this.translatedStatusTexts = { ...cachedTranslations };
+            this.currentLanguage = this.getCachedLanguage();
+        }
+        
+        // Luister naar taalwijzigingen
+        this.languageChangeHandler = (event) => {
+            if (event.detail && event.detail.language) {
+                this.handleLanguageChange(event.detail.language);
+            }
+        };
+        document.addEventListener('language-changed', this.languageChangeHandler);
     },
     beforeUnmount() {
         this.disconnectEventSource();
+        
+        // Cleanup language change listener
+        if (this.languageChangeHandler) {
+            document.removeEventListener('language-changed', this.languageChangeHandler);
+        }
     },
     methods: {
+        async handleLanguageChange(newLanguage) {
+            console.log('ProgressTracker: Language change to', newLanguage);
+            
+            // Skip if same language
+            if (this.currentLanguage === newLanguage) {
+                return;
+            }
+            
+            this.currentLanguage = newLanguage;
+            
+            // Define the original Dutch constants
+            const originalTexts = {
+                error: 'Fout bij verwerking',
+                completed: 'Verwerking voltooid',
+                processing: 'Bezig met redeneren...'
+            };
+            
+            try {
+                // Use global constants translation with caching
+                const translatedTexts = await this.translateConstants(originalTexts, newLanguage, {
+                    context: 'progress_tracker',
+                    apiPrefix: this.apiPrefix
+                });
+                
+                // Update component state with translated texts
+                this.translatedStatusTexts = translatedTexts;
+                
+                console.log('ProgressTracker: Successfully updated status texts for', newLanguage);
+            } catch (error) {
+                console.error('ProgressTracker: Error translating status texts:', error);
+                // Fallback to original Dutch texts
+                this.translatedStatusTexts = originalTexts;
+            }
+        },
+
         connectToProgressStream() {
             if (!this.taskId) {
                 console.error('Geen task ID beschikbaar voor progress tracking');