From 0edfa0483e7271b82ff6a7b7f25a0d3ec0f75eb7 Mon Sep 17 00:00:00 2001
From: Danny Avila <messagedaniel@protonmail.com>
Date: Fri, 26 Jan 2024 09:27:20 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=B9=20Clean=20Up=20OpenAI=20Config=20a?=
 =?UTF-8?q?nd=20Show=20'Set=20Azure=20Key'=20for=20Plugins=20(#1649)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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
---
 .../Endpoints/gptPlugins/initializeClient.js  |  2 +-
 .../Input/SetKeyDialog/OpenAIConfig.tsx       | 32 +++----------------
 .../Input/SetKeyDialog/SetKeyDialog.tsx       |  9 +++++-
 3 files changed, 14 insertions(+), 29 deletions(-)

diff --git a/api/server/services/Endpoints/gptPlugins/initializeClient.js b/api/server/services/Endpoints/gptPlugins/initializeClient.js
index 54ea822e49..cf15c66723 100644
--- a/api/server/services/Endpoints/gptPlugins/initializeClient.js
+++ b/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;
   }
diff --git a/client/src/components/Input/SetKeyDialog/OpenAIConfig.tsx b/client/src/components/Input/SetKeyDialog/OpenAIConfig.tsx
index 6b3f949df3..a72d88dbd9 100644
--- a/client/src/components/Input/SetKeyDialog/OpenAIConfig.tsx
+++ b/client/src/components/Input/SetKeyDialog/OpenAIConfig.tsx
@@ -1,15 +1,12 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import React, { useEffect, useState } from 'react';
-// 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 { useEffect, useState } from 'react';
+import { EModelEndpoint } from 'librechat-data-provider';
 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>
-      )} */}
     </>
   );
 };
diff --git a/client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx b/client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx
index ab259fc58c..90013b735a 100644
--- a/client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx
+++ b/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>