mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-17 08:50:15 +01:00
refactor: Encrypt & Expire User Provided Keys, feat: Rate Limiting (#874)
* 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:
parent
64f1557852
commit
4ca43fb53d
122 changed files with 1933 additions and 966 deletions
103
client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx
Normal file
103
client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx
Normal 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;
|
||||
Loading…
Add table
Add a link
Reference in a new issue