- verbeteringen client
- Enkel nog probleem met vertaling van de ProgressTracker constanten
This commit is contained in:
Josako
@@ -8,7 +8,7 @@ import { ref, computed, onMounted } from 'vue';
|
||||
*/
|
||||
export function useTranslation() {
|
||||
const isTranslationReady = ref(false);
|
||||
const currentLanguage = ref('nl');
|
||||
const currentLanguage = ref('en');
|
||||
const isTranslating = ref(false);
|
||||
const lastError = ref(null);
|
||||
|
||||
@@ -139,7 +139,7 @@ export function useTranslation() {
|
||||
* Get current language from chatConfig or fallback
|
||||
*/
|
||||
const getCurrentLanguage = () => {
|
||||
return window.chatConfig?.language || currentLanguage.value || 'nl';
|
||||
return window.chatConfig?.language || currentLanguage.value || 'en';
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -215,6 +215,8 @@ export function useConstantsTranslation() {
|
||||
CONSTANTS_CACHE.translations = translated;
|
||||
|
||||
console.log('useConstantsTranslation: Successfully translated and cached constants');
|
||||
console.log('useConstantsTranslation: Current language:', CONSTANTS_CACHE.currentLanguage);
|
||||
console.log('useConstantsTranslation: Cached translations:', CONSTANTS_CACHE.translations);
|
||||
return translated;
|
||||
} catch (error) {
|
||||
console.error('useConstantsTranslation: Error translating constants:', error);
|
||||
|
||||
@@ -1,238 +0,0 @@
|
||||
// eveai_chat_client/static/assets/js/composables/useTranslation.js
|
||||
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
|
||||
/**
|
||||
* Vue 3 Composable for translation management
|
||||
* Provides modern alternative to window.TranslationClient
|
||||
*/
|
||||
export function useTranslation() {
|
||||
const isTranslationReady = ref(false);
|
||||
const currentLanguage = ref('nl');
|
||||
const isTranslating = ref(false);
|
||||
const lastError = ref(null);
|
||||
|
||||
// Check if translation system is available with retry mechanism
|
||||
const checkTranslationReady = () => {
|
||||
if (window.TranslationClient && typeof window.TranslationClient.translate === 'function') {
|
||||
isTranslationReady.value = true;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// Initial check
|
||||
if (checkTranslationReady()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Retry mechanism - wait for TranslationClient to become available
|
||||
let retryCount = 0;
|
||||
const maxRetries = 10;
|
||||
const retryInterval = 100; // 100ms
|
||||
|
||||
const retryCheck = () => {
|
||||
if (checkTranslationReady()) {
|
||||
return; // Success!
|
||||
}
|
||||
|
||||
retryCount++;
|
||||
if (retryCount < maxRetries) {
|
||||
setTimeout(retryCheck, retryInterval);
|
||||
} else {
|
||||
console.warn('TranslationClient is not available after retries');
|
||||
isTranslationReady.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Start retry process
|
||||
setTimeout(retryCheck, retryInterval);
|
||||
});
|
||||
|
||||
/**
|
||||
* Translate text to target language
|
||||
* @param {string} text - Text to translate
|
||||
* @param {string} targetLang - Target language code
|
||||
* @param {string|null} sourceLang - Source language code (optional)
|
||||
* @param {string|null} context - Translation context (optional)
|
||||
* @param {string} apiPrefix - API prefix for tenant routing
|
||||
* @returns {Promise<object>} Translation result
|
||||
*/
|
||||
const translate = async (text, targetLang, sourceLang = null, context = null, apiPrefix = '') => {
|
||||
if (!isTranslationReady.value || !window.TranslationClient) {
|
||||
const error = new Error('Translation system not ready');
|
||||
lastError.value = error;
|
||||
throw error;
|
||||
}
|
||||
|
||||
if (!text || !text.trim()) {
|
||||
const error = new Error('No text provided for translation');
|
||||
lastError.value = error;
|
||||
throw error;
|
||||
}
|
||||
|
||||
isTranslating.value = true;
|
||||
lastError.value = null;
|
||||
|
||||
try {
|
||||
const result = await window.TranslationClient.translate(
|
||||
text,
|
||||
targetLang,
|
||||
sourceLang,
|
||||
context,
|
||||
apiPrefix
|
||||
);
|
||||
|
||||
// Update current language if translation was successful
|
||||
if (result.success) {
|
||||
currentLanguage.value = targetLang;
|
||||
}
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('Translation error in composable:', error);
|
||||
lastError.value = error;
|
||||
throw error;
|
||||
} finally {
|
||||
isTranslating.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Translate text with automatic error handling and loading state
|
||||
* @param {string} text - Text to translate
|
||||
* @param {string} targetLang - Target language code
|
||||
* @param {Object} options - Translation options
|
||||
* @returns {Promise<string|null>} Translated text or null on error
|
||||
*/
|
||||
const translateSafe = async (text, targetLang, options = {}) => {
|
||||
const {
|
||||
sourceLang = null,
|
||||
context = null,
|
||||
apiPrefix = '',
|
||||
fallbackText = text
|
||||
} = options;
|
||||
|
||||
try {
|
||||
const result = await translate(text, targetLang, sourceLang, context, apiPrefix);
|
||||
return result.success ? result.translated_text : fallbackText;
|
||||
} catch (error) {
|
||||
console.warn('Safe translation failed, using fallback:', error.message);
|
||||
return fallbackText;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Batch translate multiple texts
|
||||
* @param {Array<string>} texts - Array of texts to translate
|
||||
* @param {string} targetLang - Target language code
|
||||
* @param {Object} options - Translation options
|
||||
* @returns {Promise<Array<string>>} Array of translated texts
|
||||
*/
|
||||
const translateBatch = async (texts, targetLang, options = {}) => {
|
||||
const results = await Promise.allSettled(
|
||||
texts.map(text => translateSafe(text, targetLang, options))
|
||||
);
|
||||
|
||||
return results.map((result, index) =>
|
||||
result.status === 'fulfilled' ? result.value : texts[index]
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Get current language from chatConfig or fallback
|
||||
*/
|
||||
const getCurrentLanguage = () => {
|
||||
return window.chatConfig?.language || currentLanguage.value;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get API prefix from chatConfig or fallback
|
||||
*/
|
||||
const getApiPrefix = () => {
|
||||
return window.chatConfig?.apiPrefix || '';
|
||||
};
|
||||
|
||||
return {
|
||||
// State
|
||||
isTranslationReady,
|
||||
currentLanguage: computed(() => getCurrentLanguage()),
|
||||
isTranslating,
|
||||
lastError,
|
||||
|
||||
// Methods
|
||||
translate,
|
||||
translateSafe,
|
||||
translateBatch,
|
||||
|
||||
// Utilities
|
||||
getCurrentLanguage,
|
||||
getApiPrefix
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Simplified composable for basic translation needs
|
||||
* Use this when you only need simple text translation
|
||||
*/
|
||||
export function useTranslationClient() {
|
||||
const { translate, translateSafe, isTranslationReady, isTranslating, lastError } = useTranslation();
|
||||
|
||||
return {
|
||||
translate,
|
||||
translateSafe,
|
||||
isTranslationReady,
|
||||
isTranslating,
|
||||
lastError
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Composable for reactive text translation
|
||||
* Automatically translates text when language changes
|
||||
*/
|
||||
export function useReactiveTranslation(text, options = {}) {
|
||||
const { translateSafe, currentLanguage } = useTranslation();
|
||||
const translatedText = ref(text);
|
||||
const isLoading = ref(false);
|
||||
|
||||
const {
|
||||
context = null,
|
||||
sourceLang = null,
|
||||
autoTranslate = true
|
||||
} = options;
|
||||
|
||||
// Watch for language changes and auto-translate
|
||||
if (autoTranslate) {
|
||||
// We'll implement this when we have proper reactivity setup
|
||||
// For now, provide manual translation method
|
||||
}
|
||||
|
||||
const updateTranslation = async (newLanguage = null) => {
|
||||
const targetLang = newLanguage || currentLanguage.value;
|
||||
|
||||
if (!text || targetLang === sourceLang) {
|
||||
translatedText.value = text;
|
||||
return;
|
||||
}
|
||||
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const result = await translateSafe(text, targetLang, {
|
||||
sourceLang,
|
||||
context,
|
||||
apiPrefix: window.chatConfig?.apiPrefix || ''
|
||||
});
|
||||
translatedText.value = result;
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
translatedText,
|
||||
isLoading,
|
||||
updateTranslation
|
||||
};
|
||||
}
|
||||
181
eveai_chat_client/static/assets/js/services/LanguageProvider.js
Normal file
181
eveai_chat_client/static/assets/js/services/LanguageProvider.js
Normal file
@@ -0,0 +1,181 @@
|
||||
// LanguageProvider.js - Central language management system
|
||||
import { ref, reactive, computed, provide, inject } from 'vue';
|
||||
import { useConstantsTranslation } from '../composables/useTranslation.js';
|
||||
|
||||
// Injection key for type safety
|
||||
export const LANGUAGE_PROVIDER_KEY = Symbol('LanguageProvider');
|
||||
|
||||
/**
|
||||
* Language Provider Service
|
||||
* Central management of language state and translations
|
||||
*/
|
||||
export function createLanguageProvider(initialLanguage = 'en', apiPrefix = '') {
|
||||
// Reactive state
|
||||
const currentLanguage = ref(initialLanguage);
|
||||
const isTranslating = ref(false);
|
||||
const translationError = ref(null);
|
||||
|
||||
// Translation composable
|
||||
const { translateConstants, getCachedTranslations, clearCache } = useConstantsTranslation();
|
||||
|
||||
// Component-specific translations cache
|
||||
const componentTranslations = reactive({});
|
||||
|
||||
/**
|
||||
* Register a component for translations with component-specific caching
|
||||
*/
|
||||
const registerComponent = (componentName, originalTexts) => {
|
||||
console.log(`LanguageProvider: Registering component ${componentName} with language ${currentLanguage.value}`);
|
||||
|
||||
if (!componentTranslations[componentName]) {
|
||||
componentTranslations[componentName] = reactive({
|
||||
original: originalTexts,
|
||||
translated: { ...originalTexts }, // Start with original English texts
|
||||
isLoading: false,
|
||||
error: null
|
||||
});
|
||||
|
||||
// Force initial translation if current language is not English
|
||||
if (currentLanguage.value !== 'en') {
|
||||
console.log(`LanguageProvider: Component ${componentName} needs initial translation to ${currentLanguage.value}`);
|
||||
translateComponentTexts(componentName, currentLanguage.value);
|
||||
}
|
||||
}
|
||||
|
||||
return componentTranslations[componentName];
|
||||
};
|
||||
|
||||
/**
|
||||
* Translate texts for a specific component
|
||||
*/
|
||||
const translateComponentTexts = async (componentName, targetLanguage) => {
|
||||
const component = componentTranslations[componentName];
|
||||
if (!component) {
|
||||
console.warn(`LanguageProvider: Component ${componentName} not found for translation`);
|
||||
return;
|
||||
}
|
||||
|
||||
component.isLoading = true;
|
||||
component.error = null;
|
||||
|
||||
try {
|
||||
if (targetLanguage === 'en') {
|
||||
// For English, use original texts (no translation needed)
|
||||
component.translated = { ...component.original };
|
||||
console.log(`LanguageProvider: Using original English texts for ${componentName}`);
|
||||
} else {
|
||||
// For other languages, translate from English
|
||||
console.log(`LanguageProvider: Translating ${componentName} from English to ${targetLanguage}`);
|
||||
const translatedTexts = await translateConstants(
|
||||
component.original,
|
||||
targetLanguage,
|
||||
{
|
||||
context: componentName,
|
||||
apiPrefix
|
||||
}
|
||||
);
|
||||
component.translated = translatedTexts;
|
||||
console.log(`LanguageProvider: Successfully translated ${componentName} to ${targetLanguage}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`LanguageProvider: Translation error for ${componentName}:`, error);
|
||||
component.error = error;
|
||||
// Fallback to original English texts
|
||||
component.translated = { ...component.original };
|
||||
} finally {
|
||||
component.isLoading = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Update language for all registered components
|
||||
*/
|
||||
const setLanguage = async (newLanguage) => {
|
||||
if (currentLanguage.value === newLanguage) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('LanguageProvider: Setting language to', newLanguage);
|
||||
currentLanguage.value = newLanguage;
|
||||
isTranslating.value = true;
|
||||
translationError.value = null;
|
||||
|
||||
try {
|
||||
// Update all registered components
|
||||
const translationPromises = Object.keys(componentTranslations).map(componentName =>
|
||||
translateComponentTexts(componentName, newLanguage)
|
||||
);
|
||||
|
||||
await Promise.all(translationPromises);
|
||||
console.log(`LanguageProvider: Successfully updated all components to ${newLanguage}`);
|
||||
} catch (error) {
|
||||
console.error('LanguageProvider: Error setting language:', error);
|
||||
translationError.value = error;
|
||||
} finally {
|
||||
isTranslating.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Get translations voor een specifieke component
|
||||
*/
|
||||
const getComponentTranslations = (componentName) => {
|
||||
return componentTranslations[componentName] || null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Clear alle caches
|
||||
*/
|
||||
const clearAllCaches = () => {
|
||||
clearCache();
|
||||
Object.keys(componentTranslations).forEach(key => {
|
||||
delete componentTranslations[key];
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
// State
|
||||
currentLanguage: computed(() => currentLanguage.value),
|
||||
isTranslating: computed(() => isTranslating.value),
|
||||
translationError: computed(() => translationError.value),
|
||||
|
||||
// Methods
|
||||
registerComponent,
|
||||
setLanguage,
|
||||
getComponentTranslations,
|
||||
clearAllCaches,
|
||||
|
||||
// Computed
|
||||
componentTranslations: computed(() => componentTranslations)
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Composable voor het gebruiken van de Language Provider
|
||||
*/
|
||||
export function useLanguageProvider() {
|
||||
const provider = inject(LANGUAGE_PROVIDER_KEY);
|
||||
|
||||
if (!provider) {
|
||||
throw new Error('useLanguageProvider must be used within a LanguageProvider');
|
||||
}
|
||||
|
||||
return provider;
|
||||
}
|
||||
|
||||
/**
|
||||
* Composable voor component-specifieke vertalingen
|
||||
*/
|
||||
export function useComponentTranslations(componentName, originalTexts) {
|
||||
const provider = useLanguageProvider();
|
||||
|
||||
// Registreer component bij eerste gebruik
|
||||
const translations = provider.registerComponent(componentName, originalTexts);
|
||||
|
||||
return {
|
||||
translations: computed(() => translations.translated),
|
||||
isLoading: computed(() => translations.isLoading),
|
||||
error: computed(() => translations.error),
|
||||
currentLanguage: provider.currentLanguage
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user