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

e2e/.env.test.example

@@ -0,0 +1,9 @@
+# Test database. You can use your actual MONGO_URI if you don't mind it potentially including test data.
+MONGO_URI=mongodb://127.0.0.1:27017/chatgpt-jest
+
+# Credential encryption/decryption for testing
+CREDS_KEY=c3301ad2f69681295e022fb135e92787afb6ecfeaa012a10f8bb4ddf6b669e6d
+CREDS_IV=cd02538f4be2fa37aba9420b5924389f
+
+# For testing the ChatAgent
+OPENAI_API_KEY=your-api-key

e2e/specs/keys.spec.ts

@@ -0,0 +1,86 @@
+import { expect, test } from '@playwright/test';
+import type { Page } from '@playwright/test';
+
+const enterTestKey = async (page: Page, endpoint: string) => {
+  await page.getByTestId('new-conversation-menu').click();
+  await page.getByTestId(`endpoint-item-${endpoint}`).hover({ force: true });
+  await page.getByRole('button', { name: 'Set API Key' }).click();
+  await page.getByTestId(`input-${endpoint}`).fill('test');
+  await page.getByRole('button', { name: 'Submit' }).click();
+  await page.getByTestId(`endpoint-item-${endpoint}`).click();
+};
+
+test.describe('Key suite', () => {
+  // npx playwright test --config=e2e/playwright.config.local.ts --headed e2e/specs/keys.spec.ts
+  test('Test Setting and Revoking Keys', async ({ page }) => {
+    await page.goto('http://localhost:3080/');
+    const endpoint = 'chatGPTBrowser';
+
+    const newTopicButton = page.getByTestId('new-conversation-menu');
+    await newTopicButton.click();
+
+    const endpointItem = page.getByTestId(`endpoint-item-${endpoint}`);
+    await endpointItem.click();
+
+    let setKeyButton = page.getByRole('button', { name: 'Set API key first' });
+
+    expect(setKeyButton.count()).toBeTruthy();
+
+    await enterTestKey(page, endpoint);
+
+    const submitButton = page.getByTestId('submit-button');
+
+    expect(submitButton.count()).toBeTruthy();
+
+    await newTopicButton.click();
+
+    await endpointItem.hover({ force: true });
+
+    await page.getByRole('button', { name: 'Set API Key' }).click();
+    await page.getByRole('button', { name: 'Revoke' }).click();
+    await page.getByRole('button', { name: 'Confirm Action' }).click();
+    await page
+      .locator('div')
+      .filter({ hasText: /^Revoke$/ })
+      .nth(1)
+      .click();
+    await page.getByRole('button', { name: 'Cancel' }).click();
+    setKeyButton = page.getByRole('button', { name: 'Set API key first' });
+    expect(setKeyButton.count()).toBeTruthy();
+  });
+
+  test('Test Setting and Revoking Keys from Settings', async ({ page }) => {
+    await page.goto('http://localhost:3080/');
+    const endpoint = 'bingAI';
+
+    const newTopicButton = page.getByTestId('new-conversation-menu');
+    await newTopicButton.click();
+
+    const endpointItem = page.getByTestId(`endpoint-item-${endpoint}`);
+    await endpointItem.click();
+
+    let setKeyButton = page.getByRole('button', { name: 'Set API key first' });
+
+    expect(setKeyButton.count()).toBeTruthy();
+
+    await enterTestKey(page, endpoint);
+
+    const submitButton = page.getByTestId('submit-button');
+
+    expect(submitButton.count()).toBeTruthy();
+
+    await page.getByRole('button', { name: 'test' }).click();
+    await page.getByText('Settings').click();
+    await page.getByRole('tab', { name: 'Data controls' }).click();
+    await page.getByRole('button', { name: 'Revoke' }).click();
+    await page.getByRole('button', { name: 'Confirm Action' }).click();
+
+    const revokeButton = page.getByRole('button', { name: 'Revoke' });
+    expect(revokeButton.count()).toBeTruthy();
+
+    await page.getByRole('button', { name: 'Close' }).click();
+
+    setKeyButton = page.getByRole('button', { name: 'Set API key first' });
+    expect(setKeyButton.count()).toBeTruthy();
+  });
+});

e2e/specs/popup.spec.ts

@@ -3,13 +3,13 @@ import { expect, test } from '@playwright/test';
 test.describe('Endpoints Presets suite', () => {
   test('Endpoints Suite', async ({ page }) => {
     await page.goto('http://localhost:3080/');
-    await page.getByRole('button', { name: 'New Topic' }).click();
+    await page.getByTestId('new-conversation-menu').click();
 
     // includes the icon + endpoint names in obj property
     const endpointItem = page.getByRole('menuitemradio', { name: 'ChatGPT OpenAI' });
     await endpointItem.click();
 
-    await page.getByRole('button', { name: 'New Topic' }).click();
+    await page.getByTestId('new-conversation-menu').click();
     // Check if the active class is set on the selected endpoint
     expect(await endpointItem.getAttribute('class')).toContain('active');
   });