Fixed Bug 78603 - After editing the name of a single provider, the model is not selected automatically

ChromiumBasedEditors/plugins/ai-agent/src/components/dropdown-item/index.tsx

@@ -114,12 +114,10 @@ const DropDownItem = ({
             submenuRef.current.style.position = "fixed";
             // submenuRef.current.style.top = `${itemRect.top}px`;
 
-            console.log(viewportWidth, itemRect.left);
-
             if (side === "left") {
               // Position to the left of the item
               submenuRef.current.style.left = "unset";
-              submenuRef.current.style.right = `${itemRect.width - 30}px`;
+              submenuRef.current.style.right = `${itemRect.width - 20}px`;
             }
           }
         }, 0);

ChromiumBasedEditors/plugins/ai-agent/src/pages/settings/sub-components/providers/EditProviderDialog.tsx

@@ -8,9 +8,12 @@ import { Button } from "@/components/button";
 import { FieldContainer } from "@/components/field-container";
 import { ComboBox } from "@/components/combo-box";
 import { Input } from "@/components/input";
+import { Loader } from "@/components/loader";
 
 import useProviders from "@/store/useProviders";
 
+import { provider as providerInstance } from "@/providers";
+
 import {
   dialogMainContainerStyles,
   dialogContentContainerStyles,
@@ -25,7 +28,8 @@ type EditProviderDialogProps = {
 const EditProviderDialog = ({ name, onClose }: EditProviderDialogProps) => {
   const { t } = useTranslation();
 
-  const { providers, editProvider } = useProviders();
+  const { providers, editProvider, currentProvider, setCurrentProvider } =
+    useProviders();
 
   const [provider, setProvider] = React.useState<TProvider>(() => {
     const provider = providers.find((p) => p.name === name);
@@ -53,6 +57,13 @@ const EditProviderDialog = ({ name, onClose }: EditProviderDialogProps) => {
     url: "",
     name: "",
   });
+  const [isRequestRunning, setIsRequestRunning] = React.useState(false);
+  const isRequestRunningRef = React.useRef(isRequestRunning);
+
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const [buttonWidth, setButtonWidth] = React.useState<number | undefined>(
+    undefined
+  );
 
   React.useEffect(() => {
     const provider = providers.find((p) => p.name === name);
@@ -103,19 +114,30 @@ const EditProviderDialog = ({ name, onClose }: EditProviderDialogProps) => {
     !!error.name;
 
   const onSubmitAction = React.useCallback(async () => {
-    if (isDisabled) return;
+    if (isRequestRunningRef.current || isDisabled) return;
+    isRequestRunningRef.current = true;
+    setIsRequestRunning(true);
 
-    const result = await editProvider(
+    const updatedProviderInfo = {
-      {
+      type: provider!.type,
-        type: provider!.type,
+      name: value.name,
-        name: value.name,
+      key: value.key,
-        key: value.key,
+      baseUrl: value.url,
-        baseUrl: value.url,
+    };
-      },
+
-      provider.name
+    const result = await editProvider(updatedProviderInfo, provider.name);
-    );
 
     if (typeof result === "boolean" && result) {
+      // Check if the edited provider is the current provider
+      if (currentProvider?.name === provider.name) {
+        // Update current provider with new info
+        const updatedProvider = {
+          ...provider,
+          ...updatedProviderInfo,
+        };
+        setCurrentProvider(updatedProvider);
+        providerInstance.setCurrentProvider(updatedProvider);
+      }
       onClose();
     } else if (result) {
       setError((prev) => ({
@@ -123,7 +145,24 @@ const EditProviderDialog = ({ name, onClose }: EditProviderDialogProps) => {
         [result.field]: result.message,
       }));
     }
-  }, [isDisabled, editProvider, provider, value, onClose]);
+    isRequestRunningRef.current = false;
+    setIsRequestRunning(false);
+  }, [
+    isDisabled,
+    editProvider,
+    provider,
+    value,
+    onClose,
+    currentProvider,
+    setCurrentProvider,
+  ]);
+
+  React.useEffect(() => {
+    if (buttonRef.current && buttonWidth === undefined) {
+      const width = buttonRef.current.offsetWidth + 1;
+      setButtonWidth(width);
+    }
+  }, [buttonWidth]);
 
   React.useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -189,8 +228,17 @@ const EditProviderDialog = ({ name, onClose }: EditProviderDialogProps) => {
             <Button variant="default" onClick={onClose}>
               {t("Cancel")}
             </Button>
-            <Button onClick={onSubmitAction} disabled={isDisabled}>
+            <Button
-              {t("Save")}
+              ref={buttonRef}
+              onClick={onSubmitAction}
+              disabled={isDisabled || isRequestRunning}
+              style={buttonWidth ? { width: `${buttonWidth}px` } : undefined}
+            >
+              {isRequestRunning ? (
+                <Loader className="border-[var(--text-contrast-background)] border-r-transparent" />
+              ) : (
+                t("Save")
+              )}
             </Button>
           </div>
         </div>

ChromiumBasedEditors/plugins/ai-agent/src/providers/openai/index.ts

@@ -329,7 +329,8 @@ class OpenAIProvider
             ? "GPT-5.1"
             : model.id.toUpperCase(),
         provider: "openai" as const,
-      }));
+      }))
+      .reverse();
   };
 }