Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-02-09 02:54:23 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: Encrypt & Expire User Provided Keys, feat: Rate Limiting (#874)

Browse source 
* docs: make_your_own.md formatting fix for mkdocs

* feat: add express-mongo-sanitize
feat: add login/registration rate limiting

* chore: remove unnecessary console log

* wip: remove token handling from localStorage to encrypted DB solution

* refactor: minor change to UserService

* fix mongo query and add keys route to server

* fix backend controllers and simplify schema/crud

* refactor: rename token to key to separate from access/refresh tokens, setTokenDialog -> setKeyDialog

* refactor(schemas): TEndpointOption token -> key

* refactor(api): use new encrypted key retrieval system

* fix(SetKeyDialog): fix key prop error

* fix(abortMiddleware): pass random UUID if messageId is not generated yet for proper error display on frontend

* fix(getUserKey): wrong prop passed in arg, adds error handling

* fix: prevent message without conversationId from saving to DB, prevents branching on the frontend to a new top-level branch

* refactor: change wording of multiple display messages

* refactor(checkExpiry -> checkUserKeyExpiry): move to UserService file

* fix: type imports from common

* refactor(SubmitButton): convert to TS

* refactor(key.ts): change localStorage map key name

* refactor: add new custom tailwind classes to better match openAI colors

* chore: remove unnecessary warning and catch ScreenShot error

* refactor: move userKey frontend logic to hooks and remove use of localStorage and instead query the DB

* refactor: invalidate correct query key, memoize userKey hook, conditionally render SetKeyDialog to avoid unnecessary calls, refactor SubmitButton props and useEffect for showing 'provide key first'

* fix(SetKeyDialog): use enum-like object for expiry values
feat(Dropdown): add optionsClassName to dynamically change dropdown options container classes

* fix: handle edge case where user had provided a key but the server changes to env variable for keys

* refactor(OpenAI/titleConvo): move titling to client to retain authorized credentials in message lifecycle for titling

* fix(azure): handle user_provided keys correctly for azure

* feat: send user Id to OpenAI to differentiate users in completion requests

* refactor(OpenAI/titleConvo): adding tokens helps minimize LLM from using the language in title response

* feat: add delete endpoint for keys

* chore: remove throttling of title

* feat: add 'Data controls' to Settings, add 'Revoke' keys feature in Key Dialog and Data controls

* refactor: reorganize PluginsClient files in langchain format

* feat: use langchain for titling convos

* chore: cleanup titling convo, with fallback to original method, escape braces, use only snippet for language detection

* refactor: move helper functions to appropriate langchain folders for reusability

* fix: userProvidesKey handling for gptPlugins

* fix: frontend handling of plugins key

* chore: cleanup logging and ts-ignore SSE

* fix: forwardRef misuse in DangerButton

* fix(GoogleConfig/FileUpload): localize errors and simplify validation with zod

* fix: cleanup google logging and fix user provided key handling

* chore: remove titling from google

* chore: removing logging from browser endpoint

* wip: fix menu flicker

* feat: useLocalStorage hook

* feat: add Tooltip for UI

* refactor(EndpointMenu): utilize Tooltip and useLocalStorage, remove old 'New Chat' slide-over

* fix(e2e): use testId for endpoint menu trigger

* chore: final touches to EndpointMenu before future refactor to declutter component

* refactor(localization): change select endpoint to open menu and add translations

* chore: add final prop to error message response

* ci: minor edits to facilitate testing

* ci: new e2e test which tests for new key setting/revoking features
This commit is contained in:
Danny Avila 2023-09-06 10:46:27 -04:00 • committed by GitHub
parent 64f1557852
commit 4ca43fb53d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
122 changed files with 1933 additions and 966 deletions
Download patch file Download diff file Expand all files Collapse all files

20
client/src/components/Input/EndpointMenu/EndpointItem.tsx
View file

@ -3,7 +3,7 @@ import { useRecoilValue } from 'recoil';
import { Settings } from 'lucide-react';
import { DropdownMenuRadioItem } from '~/components';
import { getIcon } from '~/components/Endpoints';
import { SetTokenDialog } from '../SetTokenDialog';
import { SetKeyDialog } from '../SetKeyDialog';
import { useLocalize } from '~/hooks';
import store from '~/store';
@ -18,7 +18,7 @@ export default function ModelItem({
value: string;
isSelected: boolean;
}) {
const [setTokenDialogOpen, setSetTokenDialogOpen] = useState(false);
const [isDialogOpen, setDialogOpen] = useState(false);
const endpointsConfig = useRecoilValue(store.endpointsConfig);
const icon = getIcon({
@ -29,7 +29,7 @@ export default function ModelItem({
message: false,
});
const isUserProvided = endpointsConfig?.[endpoint]?.userProvide;
const userProvidesKey = endpointsConfig?.[endpoint]?.userProvide;
const localize = useLocalize();
// regular model
@ -52,7 +52,7 @@ export default function ModelItem({
</span>
)}
<div className="flex w-4 flex-1" />
{isUserProvided ? (
{userProvidesKey ? (
<button
className={cn(
'invisible m-0 mr-1 flex-initial rounded-md p-0 text-xs font-medium text-gray-400 hover:text-gray-700 group-hover:visible dark:font-normal dark:text-gray-400 dark:hover:text-gray-200',
@ -60,19 +60,17 @@ export default function ModelItem({
)}
onClick={(e) => {
e.preventDefault();
setSetTokenDialogOpen(true);
setDialogOpen(true);
}}
>
<Settings className="mr-1 inline-block w-[16px] items-center stroke-1" />
{localize('com_endpoint_config_token')}
{localize('com_endpoint_config_key')}
</button>
) : null}
</DropdownMenuRadioItem>
<SetTokenDialog
open={setTokenDialogOpen}
onOpenChange={setSetTokenDialogOpen}
endpoint={endpoint}
/>
{userProvidesKey && (
<SetKeyDialog open={isDialogOpen} onOpenChange={setDialogOpen} endpoint={endpoint} />
)}
</>
);
}

274
client/src/components/Input/EndpointMenu/EndpointMenu.jsx
View file

@ -17,20 +17,24 @@ import {
DropdownMenuTrigger,
Dialog,
DialogTrigger,
TooltipProvider,
Tooltip,
TooltipTrigger,
TooltipContent,
} from '~/components/ui/';
import DialogTemplate from '~/components/ui/DialogTemplate';
import { cn, cleanupPreset, getDefaultConversation } from '~/utils';
import { useLocalize } from '~/hooks';
import { useLocalize, useLocalStorage } from '~/hooks';
import store from '~/store';
export default function NewConversationMenu() {
const localize = useLocalize();
const [menuOpen, setMenuOpen] = useState(false);
const [showPresets, setShowPresets] = useState(true);
const [showEndpoints, setShowEndpoints] = useState(true);
const [presetModelVisible, setPresetModelVisible] = useState(false);
const [preset, setPreset] = useState(false);
const [conversation, setConversation] = useRecoilState(store.conversation) || {};
const [conversation, setConversation] = useRecoilState(store.conversation) ?? {};
const [messages, setMessages] = useRecoilState(store.messages);
const availableEndpoints = useRecoilValue(store.availableEndpoints);
const endpointsConfig = useRecoilValue(store.endpointsConfig);
@ -71,24 +75,17 @@ export default function NewConversationMenu() {
}
}, [availableEndpoints]);
// save selected model to localStorage
// save states to localStorage
const [newUser, setNewUser] = useLocalStorage('newUser', true);
const [lastModel, setLastModel] = useLocalStorage('lastSelectedModel', {});
const setLastConvo = useLocalStorage('lastConversationSetup', {})[1];
const [lastBingSettings, setLastBingSettings] = useLocalStorage('lastBingSettings', {});
useEffect(() => {
if (endpoint) {
const lastSelectedModel = JSON.parse(localStorage.getItem('lastSelectedModel')) || {};
localStorage.setItem(
'lastSelectedModel',
JSON.stringify({ ...lastSelectedModel, [endpoint]: conversation.model }),
);
localStorage.setItem('lastConversationSetup', JSON.stringify(conversation));
}
if (endpoint === 'bingAI') {
const lastBingSettings = JSON.parse(localStorage.getItem('lastBingSettings')) || {};
if (endpoint && endpoint !== 'bingAI') {
setLastModel({ ...lastModel, [endpoint]: conversation?.model }), setLastConvo(conversation);
} else if (endpoint === 'bingAI') {
const { jailbreak, toneStyle } = conversation;
localStorage.setItem(
'lastBingSettings',
JSON.stringify({ ...lastBingSettings, jailbreak, toneStyle }),
);
setLastBingSettings({ ...lastBingSettings, jailbreak, toneStyle });
}
}, [conversation]);
@ -150,124 +147,131 @@ export default function NewConversationMenu() {
button: true,
});
const localize = useLocalize();
const onOpenChange = (open) => {
setMenuOpen(open);
if (newUser) {
setNewUser(false);
}
};
return (
<Dialog className="z-[100]">
<DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
<DropdownMenuTrigger asChild>
<Button
id="new-conversation-menu"
data-testid="new-conversation-menu"
variant="outline"
className={
'group relative mb-[-12px] ml-1 mt-[-8px] items-center rounded-md border-0 p-1 outline-none focus:ring-0 focus:ring-offset-0 dark:data-[state=open]:bg-opacity-50 md:left-1 md:ml-0 md:ml-[-12px] md:pl-1'
}
>
{icon}
<span className="max-w-0 overflow-hidden whitespace-nowrap px-0 text-slate-600 transition-all group-data-[state=open]:max-w-[80px] group-data-[state=open]:px-2 dark:text-slate-300">
{localize('com_endpoint_new_topic')}
</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
className="z-[100] w-[375px] dark:bg-gray-900 md:w-96"
onCloseAutoFocus={(event) => event.preventDefault()}
>
<DropdownMenuLabel
className="cursor-pointer dark:text-gray-300"
onClick={() => setShowEndpoints((prev) => !prev)}
>
{showEndpoints ? localize('com_endpoint_hide') : localize('com_endpoint_show')}{' '}
{localize('com_endpoint')}
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup
value={endpoint}
onValueChange={onSelectEndpoint}
className="flex flex-col gap-1 overflow-y-auto"
>
{showEndpoints &&
(availableEndpoints.length ? (
<EndpointItems
selectedEndpoint={endpoint}
endpoints={availableEndpoints}
onSelect={onSelectEndpoint}
/>
) : (
<DropdownMenuLabel className="dark:text-gray-300">
{localize('com_endpoint_not_available')}
</DropdownMenuLabel>
))}
</DropdownMenuRadioGroup>
<div className="mt-2 w-full" />
<DropdownMenuLabel className="flex items-center dark:text-gray-300">
<span
className="mr-auto cursor-pointer "
onClick={() => setShowPresets((prev) => !prev)}
>
{showPresets ? localize('com_endpoint_hide') : localize('com_endpoint_show')}{' '}
{localize('com_endpoint_presets')}
</span>
<FileUpload onFileSelected={onFileSelected} />
<Dialog>
<DialogTrigger asChild>
<label
htmlFor="file-upload"
className="mr-1 flex h-[32px] h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
<TooltipProvider delayDuration={300}>
<Tooltip>
<Dialog className="z-[100]">
<DropdownMenu open={menuOpen} onOpenChange={onOpenChange}>
<TooltipTrigger asChild>
<DropdownMenuTrigger asChild>
<Button
id="new-conversation-menu"
data-testid="new-conversation-menu"
variant="outline"
className={
'group relative mb-[-12px] ml-1 mt-[-8px] items-center rounded-md border-0 p-1 outline-none focus:ring-0 focus:ring-offset-0 dark:data-[state=open]:bg-opacity-50 md:left-1 md:ml-0 md:ml-[-12px] md:pl-1'
}
>
{/* <Button
type="button"
className="h-auto bg-transparent px-2 py-1 text-xs font-medium font-normal text-red-700 hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-red-400 dark:hover:bg-gray-800 dark:hover:text-red-400"
> */}
<Trash2 className="mr-1 flex w-[22px] items-center stroke-1" />
{localize('com_ui_clear')} {localize('com_ui_all')}
{/* </Button> */}
</label>
</DialogTrigger>
<DialogTemplate
title={`${localize('com_ui_clear')} ${localize('com_endpoint_presets')}`}
description={localize('com_endpoint_presets_clear_warning')}
selection={{
selectHandler: clearAllPresets,
selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
selectText: localize('com_ui_clear'),
}}
className="max-w-[500px]"
/>
</Dialog>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup
onValueChange={onSelectPreset}
className={cn(
'overflow-y-auto overflow-x-hidden',
showEndpoints ? 'max-h-[210px]' : 'max-h-[315px]',
)}
>
{showPresets &&
(presets.length ? (
<PresetItems
presets={presets}
onSelect={onSelectPreset}
onChangePreset={onChangePreset}
onDeletePreset={onDeletePreset}
/>
) : (
<DropdownMenuLabel className="dark:text-gray-300">
{localize('com_endpoint_no_presets')}
</DropdownMenuLabel>
))}
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
<EditPresetDialog
open={presetModelVisible}
onOpenChange={setPresetModelVisible}
preset={preset}
/>
</Dialog>
{icon}
</Button>
</DropdownMenuTrigger>
</TooltipTrigger>
<TooltipContent forceMount={newUser} sideOffset={5}>
{localize('com_endpoint_open_menu')}
</TooltipContent>
<DropdownMenuContent
className="z-[100] w-[375px] dark:bg-gray-900 md:w-96"
onCloseAutoFocus={(event) => event.preventDefault()}
side="top"
>
<DropdownMenuLabel
className="cursor-pointer dark:text-gray-300"
onClick={() => setShowEndpoints((prev) => !prev)}
>
{showEndpoints ? localize('com_endpoint_hide') : localize('com_endpoint_show')}{' '}
{localize('com_endpoint')}
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup
value={endpoint}
onValueChange={onSelectEndpoint}
className="flex flex-col gap-1 overflow-y-auto"
>
{showEndpoints &&
(availableEndpoints.length ? (
<EndpointItems
selectedEndpoint={endpoint}
endpoints={availableEndpoints}
onSelect={onSelectEndpoint}
/>
) : (
<DropdownMenuLabel className="dark:text-gray-300">
{localize('com_endpoint_not_available')}
</DropdownMenuLabel>
))}
</DropdownMenuRadioGroup>
<div className="mt-2 w-full" />
<DropdownMenuLabel className="flex items-center dark:text-gray-300">
<span
className="mr-auto cursor-pointer "
onClick={() => setShowPresets((prev) => !prev)}
>
{showPresets ? localize('com_endpoint_hide') : localize('com_endpoint_show')}{' '}
{localize('com_endpoint_presets')}
</span>
<FileUpload onFileSelected={onFileSelected} />
<Dialog>
<DialogTrigger asChild>
<label
htmlFor="file-upload"
className="mr-1 flex h-[32px] h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
>
<Trash2 className="mr-1 flex w-[22px] items-center stroke-1" />
{localize('com_ui_clear')} {localize('com_ui_all')}
</label>
</DialogTrigger>
<DialogTemplate
title={`${localize('com_ui_clear')} ${localize('com_endpoint_presets')}`}
description={localize('com_endpoint_presets_clear_warning')}
selection={{
selectHandler: clearAllPresets,
selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
selectText: localize('com_ui_clear'),
}}
className="max-w-[500px]"
/>
</Dialog>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup
onValueChange={onSelectPreset}
className={cn(
'overflow-y-auto overflow-x-hidden',
showEndpoints ? 'max-h-[210px]' : 'max-h-[315px]',
)}
>
{showPresets &&
(presets.length ? (
<PresetItems
presets={presets}
onSelect={onSelectPreset}
onChangePreset={onChangePreset}
onDeletePreset={onDeletePreset}
/>
) : (
<DropdownMenuLabel className="dark:text-gray-300">
{localize('com_endpoint_no_presets')}
</DropdownMenuLabel>
))}
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
<EditPresetDialog
open={presetModelVisible}
onOpenChange={setPresetModelVisible}
preset={preset}
/>
</Dialog>
</Tooltip>
</TooltipProvider>
);
}

17
client/src/components/Input/EndpointMenu/FileUpload.tsx
View file

@ -51,6 +51,15 @@ const FileUpload: React.FC<FileUploadProps> = ({
reader.readAsText(file);
};
let statusText: string;
if (!status) {
statusText = text ?? localize('com_endpoint_import');
} else if (status === 'success') {
statusText = successText ?? localize('com_ui_upload_success');
} else {
statusText = invalidText ?? localize('com_ui_upload_invalid');
}
return (
<label
htmlFor={`file-upload-${id}`}
@ -60,13 +69,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
)}
>
<FileUp className="mr-1 flex w-[22px] items-center stroke-1" />
<span className="flex text-xs ">
{!status
? text || localize('com_endpoint_import')
: status === localize('com_ui_succes')
? successText
: invalidText}
</span>
<span className="flex text-xs ">{statusText}</span>
<input
id={`file-upload-${id}`}
value=""

35
client/src/components/Input/SetKeyDialog/GoogleConfig.tsx Normal file
View file

@ -0,0 +1,35 @@
import React from 'react';
import { object, string } from 'zod';
import type { TConfigProps } from '~/common';
import FileUpload from '../EndpointMenu/FileUpload';
import { useLocalize } from '~/hooks';
const CredentialsSchema = object({
client_email: string().email().min(3),
project_id: string().min(3),
private_key: string().min(601),
});
const validateCredentials = (credentials: Record<string, unknown>) => {
const result = CredentialsSchema.safeParse(credentials);
return result.success;
};
const GoogleConfig = ({ setUserKey }: Pick<TConfigProps, 'setUserKey'>) => {
const localize = useLocalize();
return (
<FileUpload
id="googleKey"
className="w-full"
text={localize('com_endpoint_config_key_import_json_key')}
successText={localize('com_endpoint_config_key_import_json_key_success')}
invalidText={localize('com_endpoint_config_key_import_json_key_invalid')}
validator={validateCredentials}
onFileSelected={(data) => {
setUserKey(JSON.stringify(data));
}}
/>
);
};
export default GoogleConfig;

24
client/src/components/Input/SetTokenDialog/HelpText.tsx → client/src/components/Input/SetKeyDialog/HelpText.tsx
View file

@ -6,7 +6,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
const textMap = {
bingAI: (
<small className="break-all text-gray-600">
{localize('com_endpoint_config_token_get_edge_key')}{' '}
{localize('com_endpoint_config_key_get_edge_key')}{' '}
<a
target="_blank"
href="https://www.bing.com"
@ -16,21 +16,21 @@ function HelpText({ endpoint }: { endpoint: string }) {
https://www.bing.com
</a>
{'. '}
{localize('com_endpoint_config_token_get_edge_key_dev_tool')}{' '}
{localize('com_endpoint_config_key_get_edge_key_dev_tool')}{' '}
<a
target="_blank"
href="https://github.com/waylaidwanderer/node-chatgpt-api/issues/378#issuecomment-1559868368"
rel="noreferrer"
className="text-blue-600 underline"
>
{localize('com_endpoint_config_token_edge_instructions')}
{localize('com_endpoint_config_key_edge_instructions')}
</a>{' '}
{localize('com_endpoint_config_token_edge_full_token_string')}
{localize('com_endpoint_config_key_edge_full_token_string')}
</small>
),
chatGPTBrowser: (
<small className="break-all text-gray-600">
{localize('com_endpoint_config_token_chatgpt')}{' '}
{localize('com_endpoint_config_key_chatgpt')}{' '}
<a
target="_blank"
href="https://chat.openai.com"
@ -40,7 +40,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
https://chat.openai.com
</a>
{', '}
{localize('com_endpoint_config_token_chatgpt_then_visit')}{' '}
{localize('com_endpoint_config_key_chatgpt_then_visit')}{' '}
<a
target="_blank"
href="https://chat.openai.com/api/auth/session"
@ -50,31 +50,31 @@ function HelpText({ endpoint }: { endpoint: string }) {
https://chat.openai.com/api/auth/session
</a>
{'. '}
{localize('com_endpoint_config_token_chatgpt_copy_token')}
{localize('com_endpoint_config_key_chatgpt_copy_token')}
</small>
),
google: (
<small className="break-all text-gray-600">
{localize('com_endpoint_config_token_google_need_to')}{' '}
{localize('com_endpoint_config_key_google_need_to')}{' '}
<a
target="_blank"
href="https://console.cloud.google.com/vertex-ai"
rel="noreferrer"
className="text-blue-600 underline"
>
{localize('com_endpoint_config_token_google_vertex_ai')}
{localize('com_endpoint_config_key_google_vertex_ai')}
</a>{' '}
{localize('com_endpoint_config_token_google_vertex_api')}{' '}
{localize('com_endpoint_config_key_google_vertex_api')}{' '}
<a
target="_blank"
href="https://console.cloud.google.com/projectselector/iam-admin/serviceaccounts/create?walkthrough_id=iam--create-service-account#step_index=1"
rel="noreferrer"
className="text-blue-600 underline"
>
{localize('com_endpoint_config_token_google_service_account')}
{localize('com_endpoint_config_key_google_service_account')}
</a>
{'. '}
{localize('com_endpoint_config_token_google_vertex_api_role')}
{localize('com_endpoint_config_key_google_vertex_api_role')}
</small>
),
};

5
client/src/components/Input/SetTokenDialog/InputWithLabel.tsx → client/src/components/Input/SetKeyDialog/InputWithLabel.tsx
View file

@ -21,9 +21,10 @@ const InputWithLabel: FC<InputWithLabelProps> = ({ value, onChange, label, id })
<Input
id={id}
value={value || ''}
data-testid={`input-${id}`}
value={value ?? ''}
onChange={onChange}
placeholder={`${localize('com_ui_enter')} ${label}`}
placeholder={`${localize('com_endpoint_config_value')} ${label}`}
className={cn(
defaultTextPropsLabel,
'flex h-10 max-h-10 w-full resize-none px-3 py-2',

58
client/src/components/Input/SetTokenDialog/OpenAIConfig.tsx → client/src/components/Input/SetKeyDialog/OpenAIConfig.tsx
View file

@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
// import * as Checkbox from '@radix-ui/react-checkbox';
// import { CheckIcon } from '@radix-ui/react-icons';
import InputWithLabel from './InputWithLabel';
import store from '~/store';
import type { TConfigProps } from '~/common';
function isJson(str: string) {
try {
@ -15,56 +15,48 @@ function isJson(str: string) {
return true;
}
type OpenAIConfigProps = {
token: string;
setToken: React.Dispatch<React.SetStateAction<string>>;
endpoint: string;
};
const OpenAIConfig = ({ token, setToken, endpoint }: OpenAIConfigProps) => {
const OpenAIConfig = ({ userKey, setUserKey, endpoint }: TConfigProps) => {
const [showPanel, setShowPanel] = useState(endpoint === 'azureOpenAI');
const { getToken } = store.useToken(endpoint);
useEffect(() => {
const oldToken = getToken();
if (isJson(token)) {
if (isJson(userKey)) {
setShowPanel(true);
}
setToken(oldToken ?? '');
setUserKey('');
}, []);
useEffect(() => {
if (!showPanel && isJson(token)) {
setToken('');
if (!showPanel && isJson(userKey)) {
setUserKey('');
}
}, [showPanel]);
function getAzure(name: string) {
if (isJson(token)) {
const newToken = JSON.parse(token);
return newToken[name];
if (isJson(userKey)) {
const newKey = JSON.parse(userKey);
return newKey[name];
} else {
return '';
}
}
function setAzure(name: string, value: number | string | boolean) {
let newToken = {};
if (isJson(token)) {
newToken = JSON.parse(token);
let newKey = {};
if (isJson(userKey)) {
newKey = JSON.parse(userKey);
}
newToken[name] = value;
newKey[name] = value;
setToken(JSON.stringify(newToken));
setUserKey(JSON.stringify(newKey));
}
return (
<>
{!showPanel ? (
<>
<InputWithLabel
id={'chatGPTLabel'}
value={token || ''}
onChange={(e: { target: { value: string } }) => setToken(e.target.value || '')}
id={endpoint}
value={userKey ?? ''}
onChange={(e: { target: { value: string } }) => setUserKey(e.target.value ?? '')}
label={'OpenAI API Key'}
/>
</>
@ -72,36 +64,36 @@ const OpenAIConfig = ({ token, setToken, endpoint }: OpenAIConfigProps) => {
<>
<InputWithLabel
id={'instanceNameLabel'}
value={getAzure('azureOpenAIApiInstanceName') || ''}
value={getAzure('azureOpenAIApiInstanceName') ?? ''}
onChange={(e: { target: { value: string } }) =>
setAzure('azureOpenAIApiInstanceName', e.target.value || '')
setAzure('azureOpenAIApiInstanceName', e.target.value ?? '')
}
label={'Azure OpenAI Instance Name'}
/>
<InputWithLabel
id={'deploymentNameLabel'}
value={getAzure('azureOpenAIApiDeploymentName') || ''}
value={getAzure('azureOpenAIApiDeploymentName') ?? ''}
onChange={(e: { target: { value: string } }) =>
setAzure('azureOpenAIApiDeploymentName', e.target.value || '')
setAzure('azureOpenAIApiDeploymentName', e.target.value ?? '')
}
label={'Azure OpenAI Deployment Name'}
/>
<InputWithLabel
id={'versionLabel'}
value={getAzure('azureOpenAIApiVersion') || ''}
value={getAzure('azureOpenAIApiVersion') ?? ''}
onChange={(e: { target: { value: string } }) =>
setAzure('azureOpenAIApiVersion', e.target.value || '')
setAzure('azureOpenAIApiVersion', e.target.value ?? '')
}
label={'Azure OpenAI API Version'}
/>
<InputWithLabel
id={'apiKeyLabel'}
value={getAzure('azureOpenAIApiKey') || ''}
value={getAzure('azureOpenAIApiKey') ?? ''}
onChange={(e: { target: { value: string } }) =>
setAzure('azureOpenAIApiKey', e.target.value || '')
setAzure('azureOpenAIApiKey', e.target.value ?? '')
}
label={'Azure OpenAI API Key'}
/>

18
client/src/components/Input/SetKeyDialog/OtherConfig.tsx Normal file
View file

@ -0,0 +1,18 @@
import React from 'react';
import InputWithLabel from './InputWithLabel';
import type { TConfigProps } from '~/common';
import { useLocalize } from '~/hooks';
const OtherConfig = ({ userKey, setUserKey, endpoint }: TConfigProps) => {
const localize = useLocalize();
return (
<InputWithLabel
id={endpoint}
value={userKey ?? ''}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setUserKey(e.target.value ?? '')}
label={localize('com_endpoint_config_key_name')}
/>
);
};
export default OtherConfig;

103
client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx Normal file
View file

@ -0,0 +1,103 @@
import React, { useState } from 'react';
import type { TDialogProps } from '~/common';
import { Dialog, Dropdown } from '~/components/ui';
import DialogTemplate from '~/components/ui/DialogTemplate';
import { RevokeKeysButton } from '~/components/Nav';
import { cn, defaultTextProps, removeFocusOutlines, alternateName } from '~/utils';
import { useUserKey, useLocalize } from '~/hooks';
import GoogleConfig from './GoogleConfig';
import OpenAIConfig from './OpenAIConfig';
import OtherConfig from './OtherConfig';
import HelpText from './HelpText';
const endpointComponents = {
google: GoogleConfig,
openAI: OpenAIConfig,
azureOpenAI: OpenAIConfig,
gptPlugins: OpenAIConfig,
default: OtherConfig,
};
const EXPIRY = {
THIRTY_MINUTES: { display: 'in 30 minutes', value: 30 * 60 * 1000 },
TWO_HOURS: { display: 'in 2 hours', value: 2 * 60 * 60 * 1000 },
TWELVE_HOURS: { display: 'in 12 hours', value: 12 * 60 * 60 * 1000 },
ONE_DAY: { display: 'in 1 day', value: 24 * 60 * 60 * 1000 },
ONE_WEEK: { display: 'in 7 days', value: 7 * 24 * 60 * 60 * 1000 },
ONE_MONTH: { display: 'in 30 days', value: 30 * 24 * 60 * 60 * 1000 },
};
const SetKeyDialog = ({
open,
onOpenChange,
endpoint,
}: Pick<TDialogProps, 'open' | 'onOpenChange'> & {
endpoint: string;
}) => {
const [userKey, setUserKey] = useState('');
const [expiresAtLabel, setExpiresAtLabel] = useState(EXPIRY.TWELVE_HOURS.display);
const { getExpiry, saveUserKey } = useUserKey(endpoint);
const localize = useLocalize();
const expirationOptions = Object.values(EXPIRY);
const handleExpirationChange = (label: string) => {
setExpiresAtLabel(label);
};
const submit = () => {
const selectedOption = expirationOptions.find((option) => option.display === expiresAtLabel);
const expiresAt = Date.now() + (selectedOption ? selectedOption.value : 0);
saveUserKey(userKey, expiresAt);
onOpenChange(false);
setUserKey('');
};
const EndpointComponent = endpointComponents[endpoint] ?? endpointComponents['default'];
const expiryTime = getExpiry();
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogTemplate
title={`${localize('com_endpoint_config_key_for')} ${alternateName[endpoint] ?? endpoint}`}
className="w-full max-w-[650px] sm:w-3/4 md:w-3/4 lg:w-3/4"
main={
<div className="grid w-full items-center gap-2">
<small className="text-red-600">
{`${localize('com_endpoint_config_key_encryption')} ${
!expiryTime
? localize('com_endpoint_config_key_expiry')
: `${new Date(expiryTime).toLocaleString()}`
}`}
</small>
<Dropdown
label="Expires "
value={expiresAtLabel}
onChange={handleExpirationChange}
options={expirationOptions.map((option) => option.display)}
className={cn(
defaultTextProps,
'flex h-full w-full resize-none',
removeFocusOutlines,
)}
optionsClassName="max-h-72"
containerClassName="flex w-1/2 md:w-1/3 resize-none z-[51]"
/>
<EndpointComponent userKey={userKey} setUserKey={setUserKey} endpoint={endpoint} />
<HelpText endpoint={endpoint} />
</div>
}
selection={{
selectHandler: submit,
selectClasses: 'bg-green-600 hover:bg-green-700 dark:hover:bg-green-800 text-white',
selectText: localize('com_ui_submit'),
}}
leftButtons={
<RevokeKeysButton endpoint={endpoint} showText={false} disabled={!expiryTime} />
}
/>
</Dialog>
);
};
export default SetKeyDialog;

1
client/src/components/Input/SetKeyDialog/index.ts Normal file
View file

@ -0,0 +1 @@
export { default as SetKeyDialog } from './SetKeyDialog';

52
client/src/components/Input/SetTokenDialog/GoogleConfig.tsx
View file

@ -1,52 +0,0 @@
import React from 'react';
import FileUpload from '../EndpointMenu/FileUpload';
import { useLocalize } from '~/hooks';
const GoogleConfig = ({ setToken }: { setToken: React.Dispatch<React.SetStateAction<string>> }) => {
const localize = useLocalize();
return (
<FileUpload
id="googleKey"
className="w-full"
text={localize('com_endpoint_config_token_import_json_key')}
successText={localize('com_endpoint_config_token_import_json_key_succesful')}
invalidText={localize('com_endpoint_config_token_import_json_key_invalid')}
validator={(credentials) => {
if (!credentials) {
return false;
}
if (
!credentials.client_email ||
typeof credentials.client_email !== 'string' ||
credentials.client_email.length <= 2
) {
return false;
}
if (
!credentials.project_id ||
typeof credentials.project_id !== 'string' ||
credentials.project_id.length <= 2
) {
return false;
}
if (
!credentials.private_key ||
typeof credentials.private_key !== 'string' ||
credentials.private_key.length <= 600
) {
return false;
}
return true;
}}
onFileSelected={(data) => {
setToken(JSON.stringify(data));
}}
/>
);
};
export default GoogleConfig;

22
client/src/components/Input/SetTokenDialog/OtherConfig.tsx
View file

@ -1,22 +0,0 @@
import React from 'react';
import InputWithLabel from './InputWithLabel';
import { useLocalize } from '~/hooks';
type ConfigProps = {
token: string;
setToken: React.Dispatch<React.SetStateAction<string>>;
};
const OtherConfig = ({ token, setToken }: ConfigProps) => {
const localize = useLocalize();
return (
<InputWithLabel
id={'chatGPTLabel'}
value={token || ''}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setToken(e.target.value || '')}
label={localize('com_endpoint_config_token_name')}
/>
);
};
export default OtherConfig;

56
client/src/components/Input/SetTokenDialog/SetTokenDialog.tsx
View file

@ -1,56 +0,0 @@
import React, { useState } from 'react';
import HelpText from './HelpText';
import GoogleConfig from './GoogleConfig';
import OpenAIConfig from './OpenAIConfig';
import OtherConfig from './OtherConfig';
import { Dialog } from '~/components/ui';
import DialogTemplate from '~/components/ui/DialogTemplate';
import { alternateName } from '~/utils';
import store from '~/store';
import { useLocalize } from '~/hooks';
const SetTokenDialog = ({ open, onOpenChange, endpoint }) => {
const localize = useLocalize();
const [token, setToken] = useState('');
const { saveToken } = store.useToken(endpoint);
const submit = () => {
saveToken(token);
onOpenChange(false);
};
const endpointComponents = {
google: GoogleConfig,
openAI: OpenAIConfig,
azureOpenAI: OpenAIConfig,
gptPlugins: OpenAIConfig,
default: OtherConfig,
};
const EndpointComponent = endpointComponents[endpoint] || endpointComponents['default'];
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogTemplate
title={`${localize('com_endpoint_config_token_for')} ${
alternateName[endpoint] ?? endpoint
}`}
className="w-full max-w-[650px] sm:w-3/4 md:w-3/4 lg:w-3/4"
main={
<div className="grid w-full items-center gap-2">
<EndpointComponent token={token} setToken={setToken} endpoint={endpoint} />
<small className="text-red-600">{localize('com_endpoint_config_token_server')}</small>
<HelpText endpoint={endpoint} />
</div>
}
selection={{
selectHandler: submit,
selectClasses: 'bg-green-600 hover:bg-green-700 dark:hover:bg-green-800 text-white',
selectText: localize('com_ui_submit'),
}}
/>
</Dialog>
);
};
export default SetTokenDialog;

1
client/src/components/Input/SetTokenDialog/index.ts
View file

@ -1 +0,0 @@
export { default as SetTokenDialog } from './SetTokenDialog';

61
client/src/components/Input/SubmitButton.jsx → client/src/components/Input/SubmitButton.tsx
View file

@ -1,33 +1,43 @@
import React, { useState } from 'react';
import React, { useState, useEffect, useCallback } from 'react';
import { StopGeneratingIcon } from '~/components';
import { Settings } from 'lucide-react';
import { SetTokenDialog } from './SetTokenDialog';
import store from '~/store';
import { useLocalize } from '~/hooks';
import { SetKeyDialog } from './SetKeyDialog';
import { useUserKey, useLocalize } from '~/hooks';
export default function SubmitButton({
endpoint,
conversation,
submitMessage,
handleStopGenerating,
disabled,
isSubmitting,
endpointsConfig,
userProvidesKey,
}) {
const [setTokenDialogOpen, setSetTokenDialogOpen] = useState(false);
const { getToken } = store.useToken(endpoint);
const isTokenProvided = endpointsConfig?.[endpoint]?.userProvide ? !!getToken() : true;
const endpointsToHideSetTokens = new Set(['openAI', 'azureOpenAI', 'bingAI']);
const { endpoint } = conversation;
const [isDialogOpen, setDialogOpen] = useState(false);
const { checkExpiry } = useUserKey(endpoint);
const [isKeyProvided, setKeyProvided] = useState(userProvidesKey ? checkExpiry() : true);
const isKeyActive = checkExpiry();
const localize = useLocalize();
const clickHandler = (e) => {
e.preventDefault();
submitMessage();
};
useEffect(() => {
if (userProvidesKey) {
setKeyProvided(isKeyActive);
} else {
setKeyProvided(true);
}
}, [checkExpiry, endpoint, userProvidesKey, isKeyActive]);
const setToken = () => {
setSetTokenDialogOpen(true);
};
const clickHandler = useCallback(
(e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
submitMessage();
},
[submitMessage],
);
const setKey = useCallback(() => {
setDialogOpen(true);
}, []);
if (isSubmitting) {
return (
@ -41,26 +51,24 @@ export default function SubmitButton({
</div>
</button>
);
} else if (!isTokenProvided && !endpointsToHideSetTokens.has(endpoint)) {
} else if (!isKeyProvided) {
return (
<>
<button
onClick={setToken}
onClick={setKey}
type="button"
className="group absolute bottom-0 right-0 z-[101] flex h-[100%] w-auto items-center justify-center bg-transparent pr-1 text-gray-500"
>
<div className="flex items-center justify-center rounded-md text-xs group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
<div className="m-0 mr-0 flex items-center justify-center rounded-md p-2 sm:p-2">
<Settings className="mr-1 inline-block h-auto w-[18px]" />
{localize('com_endpoint_config_token_name_placeholder')}
{localize('com_endpoint_config_key_name_placeholder')}
</div>
</div>
</button>
<SetTokenDialog
open={setTokenDialogOpen}
onOpenChange={setSetTokenDialogOpen}
endpoint={endpoint}
/>
{userProvidesKey && (
<SetKeyDialog open={isDialogOpen} onOpenChange={setDialogOpen} endpoint={endpoint} />
)}
</>
);
} else {
@ -68,6 +76,7 @@ export default function SubmitButton({
<button
onClick={clickHandler}
disabled={disabled}
data-testid="submit-button"
className="group absolute bottom-0 right-0 z-[101] flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
>
<div className="m-1 mr-0 rounded-md pb-[9px] pl-[9.5px] pr-[7px] pt-[11px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">

4
client/src/components/Input/TextChat.jsx
View file

@ -169,12 +169,12 @@ export default function TextChat({ isSearchView = false }) {
className="m-0 flex h-auto max-h-52 flex-1 resize-none overflow-auto border-0 bg-transparent p-0 pl-2 pr-12 leading-6 placeholder:text-sm placeholder:text-gray-600 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder:text-gray-500 md:pl-2"
/>
<SubmitButton
conversation={conversation}
submitMessage={submitMessage}
handleStopGenerating={handleStopGenerating}
disabled={disabled || isNotAppendable}
isSubmitting={isSubmitting}
endpointsConfig={endpointsConfig}
endpoint={conversation?.endpoint}
userProvidesKey={endpointsConfig?.[conversation.endpoint]?.userProvide}
/>
</div>
</div>