fix(i18n): use resolved UI language for Visual Explain AI analysis in auto mode (#1026)

When the app language is set to Auto, map i18n.resolvedLanguage (including regional codes such as pt-BR and zh-CN) to the existing SUPPORTED_LANGUAGES label, falling back to English when it is missing or unsupported. Explicit language selection is unchanged.

Fixes #894

Co-authored-by: princecherry9905 <230962627+princecherry9905@users.noreply.github.com>

Author: princecherry9905

src/components/modals/visual-explain/ExplainAiAnalysis.tsx

@@ -11,8 +11,9 @@ interface ExplainAiAnalysisProps {
 }
 
 export function ExplainAiAnalysis({ plan }: ExplainAiAnalysisProps) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const { settings } = useSettings();
+  const resolvedLanguage = i18n.resolvedLanguage ?? i18n.language;
   const [analysis, setAnalysis] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -41,7 +42,7 @@ export function ExplainAiAnalysis({ plan }: ExplainAiAnalysisProps) {
           provider: settings.aiProvider,
           model: settings.aiModel || "",
           query: queryWithPlan,
-          language: getAiExplanationLanguage(settings.language),
+          language: getAiExplanationLanguage(settings.language, resolvedLanguage),
         },
       });
       setAnalysis(result);
@@ -50,7 +51,7 @@ export function ExplainAiAnalysis({ plan }: ExplainAiAnalysisProps) {
     } finally {
       setIsLoading(false);
     }
-  }, [plan, settings.aiProvider, settings.aiModel, settings.language, t]);
+  }, [plan, settings.aiProvider, settings.aiModel, settings.language, resolvedLanguage, t]);
 
   useEffect(() => {
     if (plan.raw_output) {

src/i18n/language.ts

@@ -1,10 +1,27 @@
 import { SUPPORTED_LANGUAGES, type AppLanguage } from "./config";
 
-export function getAiExplanationLanguage(language: AppLanguage): string {
+function findSupportedLanguageLabel(locale?: string): string | undefined {
+  if (!locale) return undefined;
+  const wanted = locale.replace("_", "-").toLowerCase();
+  const exact = SUPPORTED_LANGUAGES.find(
+    ({ id }) => id.toLowerCase() === wanted,
+  );
+  if (exact) return exact.label;
+  const base = wanted.split("-")[0];
+  return SUPPORTED_LANGUAGES.find(({ id }) => {
+    const supported = id.toLowerCase();
+    return supported === base || supported.startsWith(`${base}-`);
+  })?.label;
+}
+
+export function getAiExplanationLanguage(
+  language: AppLanguage,
+  resolvedLanguage?: string,
+): string {
   const fallBackLanguage = "English";
 
   if (language === "auto") {
-    return fallBackLanguage;
+    return findSupportedLanguageLabel(resolvedLanguage) ?? fallBackLanguage;
   }
 
   const supportedLanguage = SUPPORTED_LANGUAGES.find(

tests/i18n/language.test.ts

@@ -0,0 +1,39 @@
+import { describe, it, expect } from "vitest";
+import { getAiExplanationLanguage } from "../../src/i18n/language";
+import { SUPPORTED_LANGUAGES } from "../../src/i18n/config";
+
+describe("language", () => {
+  describe("getAiExplanationLanguage", () => {
+    it("uses the resolved language in auto mode", () => {
+      expect(getAiExplanationLanguage("auto", "it")).toBe("Italiano");
+    });
+
+    it("maps supported regional locales in auto mode", () => {
+      expect(getAiExplanationLanguage("auto", "pt-BR")).toBe("Português (Brasil)");
+      expect(getAiExplanationLanguage("auto", "zh-CN")).toBe("中文");
+      expect(getAiExplanationLanguage("auto", "it-CH")).toBe("Italiano");
+    });
+
+    it("is case- and separator-insensitive", () => {
+      expect(getAiExplanationLanguage("auto", "PT_br")).toBe("Português (Brasil)");
+    });
+
+    it("falls back to English for unsupported resolved languages", () => {
+      expect(getAiExplanationLanguage("auto", "nl")).toBe("English");
+      expect(getAiExplanationLanguage("auto", "sv-SE")).toBe("English");
+    });
+
+    it("falls back to English when the resolved language is missing", () => {
+      expect(getAiExplanationLanguage("auto")).toBe("English");
+      expect(getAiExplanationLanguage("auto", undefined)).toBe("English");
+      expect(getAiExplanationLanguage("auto", "")).toBe("English");
+    });
+
+    it("keeps explicitly selected languages unchanged", () => {
+      for (const { id, label } of SUPPORTED_LANGUAGES) {
+        expect(getAiExplanationLanguage(id)).toBe(label);
+      }
+      expect(getAiExplanationLanguage("it", "de")).toBe("Italiano");
+    });
+  });
+});