- 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/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');