- verbeteringen client

- Enkel nog probleem met vertaling van de ProgressTracker constanten

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

@@ -53,10 +53,34 @@
 </template>
 
 <script>
-import { useTranslationClient, useConstantsTranslation } from '../js/composables/useTranslation.js';
+import { useComponentTranslations } from '../js/services/LanguageProvider.js';
 
 export default {
     name: 'ProgressTracker',
+    setup() {
+        // Define original English texts (base language for developers)
+        const originalTexts = {
+            error: 'Error while processing',
+            completed: 'Processing completed',
+            processing: 'Processing...'
+        };
+        
+        // Gebruik component translations
+        const { translations, isLoading, error, currentLanguage } = useComponentTranslations(
+            'progress_tracker', 
+            originalTexts
+        );
+
+        console.log('Translations:', translations);
+        console.log('Current language:', currentLanguage);
+        
+        return {
+            statusTexts: translations,
+            translationLoading: isLoading,
+            translationError: error,
+            currentLanguage
+        };
+    },
     props: {
         taskId: {
             type: String,
@@ -76,99 +100,56 @@ export default {
             connecting: true,
             error: null,
             progressLines: [],
-            eventSource: null,
-            // Vertaalde status teksten
-            translatedStatusTexts: {
-                error: 'Error while processing',
-                completed: 'Processing completed',
-                processing: 'Processing...'
-            },
-            currentLanguage: 'nl'
+            eventSource: null
         };
     },
     computed: {
         isProcessing() {
             return !this.isCompleted && !this.hasError && !this.connecting;
         },
-        // Computed properties voor vertaalde status teksten
+        // Computed properties voor vertaalde status teksten uit provider
         errorText() {
-            return this.translatedStatusTexts.error;
+            return this.statusTexts.error;
         },
         completedText() {
-            return this.translatedStatusTexts.completed;
+            return this.statusTexts.completed;
         },
         processingText() {
-            return this.translatedStatusTexts.processing;
+            return this.statusTexts.processing;
         }
     },
+    created() {
+        // Create named handler for language changes
+        this.languageChangeHandler = (event) => {
+            if (event.detail && event.detail.language) {
+                console.log('ProgressTracker: Received language change event:', event.detail.language);
+                // The LanguageProvider will automatically handle the translation update
+                // We just need to ensure the component is aware of the change
+                this.handleLanguageChange(event);
+            }
+        };
+
+        // Listen for language changes
+        document.addEventListener('language-changed', this.languageChangeHandler);
+    },
     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
+        // Remove language change event 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;
+        handleLanguageChange(event) {
+            if (event.detail && event.detail.language) {
+                console.log(`ProgressTracker: Language changed to ${event.detail.language}`);
+                // The LanguageProvider automatically updates translations through reactive system
+                // Force component update to ensure UI reflects the new translations
+                this.$forceUpdate();
             }
         },
 
@@ -205,7 +186,7 @@ export default {
 
             } catch (error) {
                 console.error('Failed to create EventSource:', error);
-                this.error = 'Kan geen verbinding maken met de voortgangsstream.';
+                this.error = 'Unable to connect to the server SSE stream.';
                 this.connecting = false;
             }
         },
@@ -343,7 +324,7 @@ export default {
                 });
             } catch (error) {
                 console.error('Error parsing specialist error data:', error);
-                this.error = 'Er is een onbekende fout opgetreden.';
+                this.error = 'An unknown error occurred while processing your request.';
                 this.isCompleted = true;
                 this.hasError = true;
                 this.connecting = false;
@@ -351,7 +332,7 @@ export default {
 
                 // Emit generic error
                 this.$emit('specialist-error', {
-                    message: 'Er is een onbekende fout opgetreden.',
+                    message: 'An unknown error occurred while processing your request.',
                     originalError: 'Failed to parse error data',
                     taskId: this.taskId
                 });
@@ -360,7 +341,7 @@ export default {
 
         handleError(event) {
             console.error('SSE Error event:', event);
-            this.error = 'Er is een fout opgetreden bij het verwerken van updates.';
+            this.error = 'An unknown error occurred while connecting to the server. Please try again later.';
             this.connecting = false;
 
             // Try to parse error data