🧹 Clean Up OpenAI Config and Show 'Set Azure Key' for Plugins (#1649)

* refactor(gptPlugins): prevent edge case where exact word `azure` could be found in azure api Key detection when not an azure key

* refactor(SetKeyDialog): cleanup OpenAI config, show \'set azure key\' when `PLUGINS_USE_AZURE` env var is enabled

api/server/services/Endpoints/gptPlugins/initializeClient.js

@@ -60,7 +60,7 @@ const initializeClient = async ({ req, res, endpointOption }) => {
 
   let apiKey = isUserProvided ? userKey : credentials[endpoint];
 
-  if (useAzure || (apiKey && apiKey.includes('azure') && !clientOptions.azure)) {
+  if (useAzure || (apiKey && apiKey.includes('{"azure') && !clientOptions.azure)) {
     clientOptions.azure = isUserProvided ? JSON.parse(userKey) : getAzureCredentials();
     apiKey = clientOptions.azure.azureOpenAIApiKey;
   }

client/src/components/Input/SetKeyDialog/OpenAIConfig.tsx

@@ -1,15 +1,12 @@
-/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useState } from 'react';
-import React, { useEffect, useState } from 'react';
+import { EModelEndpoint } from 'librechat-data-provider';
-// TODO: Temporarily remove checkbox until Plugins solution for Azure is figured out
-// import * as Checkbox from '@radix-ui/react-checkbox';
-// import { CheckIcon } from '@radix-ui/react-icons';
 import { useMultipleKeys } from '~/hooks/Input';
 import InputWithLabel from './InputWithLabel';
 import type { TConfigProps } from '~/common';
 import { isJson } from '~/utils/json';
 
 const OpenAIConfig = ({ userKey, setUserKey, endpoint }: TConfigProps) => {
-  const [showPanel, setShowPanel] = useState(endpoint === 'azureOpenAI');
+  const [showPanel, setShowPanel] = useState(endpoint === EModelEndpoint.azureOpenAI);
   const { getMultiKey: getAzure, setMultiKey: setAzure } = useMultipleKeys(setUserKey);
 
   useEffect(() => {
@@ -17,12 +14,14 @@ const OpenAIConfig = ({ userKey, setUserKey, endpoint }: TConfigProps) => {
       setShowPanel(true);
     }
     setUserKey('');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
     if (!showPanel && isJson(userKey)) {
       setUserKey('');
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showPanel]);
 
   return (
@@ -75,27 +74,6 @@ const OpenAIConfig = ({ userKey, setUserKey, endpoint }: TConfigProps) => {
           />
         </>
       )}
-      {/* { endpoint === 'gptPlugins' && (
-        <div className="flex items-center">
-          <Checkbox.Root
-            className="flex h-[20px] w-[20px] appearance-none items-center justify-center rounded-[4px] bg-gray-100 text-white outline-none hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-900"
-            id="azureOpenAI"
-            checked={showPanel}
-            onCheckedChange={() => setShowPanel(!showPanel)}
-          >
-            <Checkbox.Indicator className="flex h-[20px] w-[20px] items-center justify-center rounded-[3.5px] bg-green-600">
-              <CheckIcon />
-            </Checkbox.Indicator>
-          </Checkbox.Root>
-
-          <label
-            className="pl-[8px] text-[15px] leading-none dark:text-white"
-            htmlFor="azureOpenAI"
-          >
-          Use Azure OpenAI.
-          </label>
-        </div>
-      )} */}
     </>
   );
 };

client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 import { EModelEndpoint, alternateName } from 'librechat-data-provider';
+import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import type { TDialogProps } from '~/common';
 import DialogTemplate from '~/components/ui/DialogTemplate';
 import { RevokeKeysButton } from '~/components/Nav';
@@ -54,6 +55,7 @@ const SetKeyDialog = ({
   });
 
   const [userKey, setUserKey] = useState('');
+  const { data: endpointsConfig } = useGetEndpointsQuery();
   const [expiresAtLabel, setExpiresAtLabel] = useState(EXPIRY.TWELVE_HOURS.display);
   const { getExpiry, saveUserKey } = useUserKey(endpoint);
   const { showToast } = useToastContext();
@@ -105,6 +107,7 @@ const SetKeyDialog = ({
   const EndpointComponent =
     endpointComponents[endpointType ?? endpoint] ?? endpointComponents['default'];
   const expiryTime = getExpiry();
+  const config = endpointsConfig?.[endpoint];
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -131,7 +134,11 @@ const SetKeyDialog = ({
               <EndpointComponent
                 userKey={userKey}
                 setUserKey={setUserKey}
-                endpoint={endpoint}
+                endpoint={
+                  endpoint === EModelEndpoint.gptPlugins && config?.azure
+                    ? EModelEndpoint.azureOpenAI
+                    : endpoint
+                }
                 userProvideURL={userProvideURL}
               />
             </FormProvider>