🧹 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
This commit is contained in:
Danny Avila 2024-01-26 09:27:20 -05:00 committed by GitHub
parent fcbaa74e4a
commit 0edfa0483e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 14 additions and 29 deletions

View file

@ -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>
)} */}
</>
);
};

View file

@ -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>