feat: i18n full support, responsive UI, multi-model AI config, and bug fixes

Major Features: - Internationalization (i18n) with auto-detection for ES/EN/PT - Mobile-first responsive design for Studio and Experience - Multi-model AI configuration (llama3.2:3b, qwen3.5:9b, gpt-oss:latest) - Course language configuration (auto-detect or fixed per course) Backend Changes: - shared/common: ModelType enum for intelligent model selection - LMS: log_ai_usage function migration (fix chat tutor 500 error) - LMS/CMS: course language config fields (language_setting, fixed_language) - LMS: /courses/{id}/language-config endpoint for language detection Frontend Changes: - Experience: Enhanced i18n with browser language detection - Experience: Audio recording with HTTPS check and error handling - Studio: Memory game with unique pair IDs and debug logging - Studio: Expanded translations (250+ keys for ES, EN, PT) - Both: Language selector in headers (mobile responsive) Documentation: - AI_MODELS_CONFIG.md: Multi-model configuration guide - RESPONSIVIDAD_GUIA.md: Mobile-first design patterns - I18N_RESPONSIVIDAD_IMPLEMENTACION.md: Implementation details - DEBUG_AUDIO_RECORDING.md: Audio troubleshooting guide - DEBUG_MEMORY_GAME.md: Memory game debugging steps Bug Fixes: - Fix chat tutor 500 error (missing log_ai_usage function) - Fix audio recording (HTTPS check, browser compatibility) - Fix memory game pair IDs (unique ID generation) - Fix HotspotBlock TypeScript errors Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
2026-03-23 12:24:22 -03:00
parent 0598fc4865
commit 2ff06ee7ae
26 changed files with 2993 additions and 124 deletions
@@ -0,0 +1,108 @@
+"use client";
+
+import { useEffect, useState, useCallback } from 'react';
+import { useTranslation } from '@/context/I18nContext';
+
+interface CourseLanguageConfig {
+    language_setting: 'auto' | 'fixed';
+    fixed_language: string | null;
+}
+
+/**
+ * Hook para manejar el idioma específico de un curso
+ * 
+ * - Si el curso está en modo 'auto', usa el idioma del usuario
+ * - Si el curso está en modo 'fixed', usa el idioma fijo del curso
+ * 
+ * @param courseId - ID del curso actual
+ * @returns El idioma que debe usarse para este curso
+ */
+export function useCourseLanguage(courseId: string | null) {
+    const { language: userLanguage } = useTranslation();
+    const [courseLanguage, setCourseLanguage] = useState<string>(userLanguage);
+    const [isLoading, setIsLoading] = useState(true);
+    const [config, setConfig] = useState<CourseLanguageConfig | null>(null);
+
+    // Función para cargar la configuración de idioma del curso
+    const loadCourseLanguageConfig = useCallback(async () => {
+        if (!courseId) {
+            setCourseLanguage(userLanguage);
+            setIsLoading(false);
+            return;
+        }
+
+        try {
+            // Importar dinámicamente para evitar circular dependencies
+            const { lmsApi } = await import('@/lib/api');
+            
+            const response = await lmsApi.get(`/courses/${courseId}/language-config`);
+            const data = response.data;
+            
+            setConfig(data);
+            
+            // Determinar qué idioma usar
+            if (data.language_setting === 'fixed' && data.fixed_language) {
+                setCourseLanguage(data.fixed_language);
+            } else {
+                // Modo 'auto' o sin configuración: usar idioma del usuario
+                setCourseLanguage(userLanguage);
+            }
+        } catch (error) {
+            console.error('Error loading course language config:', error);
+            // Fallback: usar idioma del usuario
+            setCourseLanguage(userLanguage);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [courseId, userLanguage]);
+
+    // Cargar configuración cuando cambia el courseId
+    useEffect(() => {
+        loadCourseLanguageConfig();
+    }, [loadCourseLanguageConfig]);
+
+    // Función para verificar si el curso usa idioma fijo
+    const isFixedLanguage = useCallback(() => {
+        return config?.language_setting === 'fixed';
+    }, [config]);
+
+    // Función para obtener el idioma actual (curso o usuario)
+    const getCurrentLanguage = useCallback(() => {
+        return courseLanguage;
+    }, [courseLanguage]);
+
+    return {
+        courseLanguage,
+        isFixedLanguage,
+        getCurrentLanguage,
+        isLoading,
+        refreshConfig: loadCourseLanguageConfig,
+    };
+}
+
+/**
+ * Hook para cambiar el idioma del usuario (solo funciona si el curso está en modo 'auto')
+ * 
+ * @param courseId - ID del curso actual
+ */
+export function useCourseLanguageSwitcher(courseId: string | null) {
+    const { setLanguage, language } = useTranslation();
+    const { isFixedLanguage } = useCourseLanguage(courseId);
+
+    const canChangeLanguage = !isFixedLanguage();
+
+    const changeLanguage = (newLanguage: string) => {
+        if (canChangeLanguage) {
+            setLanguage(newLanguage);
+        } else {
+            console.warn('Cannot change language: course has fixed language setting');
+        }
+    };
+
+    return {
+        currentLanguage: language,
+        canChangeLanguage,
+        changeLanguage,
+        isFixed: isFixedLanguage(),
+    };
+}