Fix issue #6940: [Bug]: Incorrect Provider Name on Advanced Setting Toggle

frontend/__tests__/components/modals/settings/model-selector.test.tsx

@@ -133,4 +133,30 @@ describe("ModelSelector", () => {
     expect(screen.getByLabelText("LLM Provider")).toHaveValue("Azure");
     expect(screen.getByLabelText("LLM Model")).toHaveValue("ada");
   });
+
+  it("should handle Mistral AI provider selection correctly", async () => {
+    const mistralModels = {
+      mistral: {
+        separator: "/",
+        models: ["mistral-tiny", "mistral-small", "mistral-medium"],
+      },
+    };
+
+    const user = userEvent.setup();
+    render(<ModelSelector models={mistralModels} />);
+
+    const providerSelector = screen.getByLabelText("LLM Provider");
+    await user.click(providerSelector);
+
+    // Select Mistral AI (display name)
+    const mistralOption = screen.getByText("Mistral AI");
+    await user.click(mistralOption);
+
+    // Verify model dropdown is enabled and shows correct models
+    const modelSelector = screen.getByLabelText("LLM Model");
+    expect(modelSelector).not.toBeDisabled();
+
+    await user.click(modelSelector);
+    expect(screen.getByText("mistral-tiny")).toBeInTheDocument();
+  });
 });

frontend/src/components/shared/modals/settings/model-selector.tsx

@@ -6,7 +6,7 @@ import {
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { I18nKey } from "#/i18n/declaration";
-import { mapProvider } from "#/utils/map-provider";
+import { mapProvider, MAP_PROVIDER } from "#/utils/map-provider";
 import { VERIFIED_MODELS, VERIFIED_PROVIDERS } from "#/utils/verified-models";
 import { extractModelAndProvider } from "#/utils/extract-model-and-provider";
 
@@ -39,11 +39,16 @@ export function ModelSelector({
   }, [currentModel]);
 
   const handleChangeProvider = (provider: string) => {
-    setSelectedProvider(provider);
+    // Find the actual provider key from MAP_PROVIDER if a display name was provided
+    const providerKey = Object.entries(MAP_PROVIDER).find(
+      ([_, displayName]) => displayName === provider
+    )?.[0] || provider;
+
+    setSelectedProvider(providerKey);
     setSelectedModel(null);
 
-    const separator = models[provider]?.separator || "";
-    setLitellmId(provider + separator);
+    const separator = models[providerKey]?.separator || "";
+    setLitellmId(providerKey + separator);
   };
 
   const handleChangeModel = (model: string) => {