LibreChat/e2e/specs/popup.spec.ts

17 lines
643 B
TypeScript
Raw Normal View History

Added Settings Modal (#342) * Improve UI with style changes and add Settings button - Improved the UI of the `Input` and `Message` components. - Added a `Settings` button to the `NavLinks` component. - Introduced a `Settings` component to handle user settings. - Refactored the `Dialog` component for consistency. * Revert not needed changes * Updated style.css to only work for select * feat: Remove Dark Mode component and add theme selection feature This commit removes the Dark Mode component from the navigation bar and replaces it with a theme selection dropdown menu in the Settings dialog. The implementation of the theme selection feature includes a function that allows the user to set the theme based on the system, light, or dark mode. * Add auto theme setting to Settings component. This commit adds a new state variable to keep track of whether the auto theme is enabled or not. It also registers an event listener to update the theme based on system preference changes. The event listener is removed when the component is unmounted. * Improve user experience by allowing customized themes - Create `selectedOption` state to track user-selected theme - Remove unused `isAutoTheme` state variable * feat(Nav): Add SVG icon to settings gear This commit adds an SVG icon to the settings gear in the Navigation component's Settings file. The new SVG icon replaces the previous GearIcon component. * refactor(ui): Update overlay background color This commit updates the background color of the overlay in the AlertDialog and Dialog components by changing the classes applied to the elements. The new color is a transition from `bg-black/50 backdrop-blur-sm` to `bg-gray-500/90 dark:bg-gray-800/90`. This change improves the readability of the dialog boxes. * Refactor ThemeContext to include system theme and fix bug in Settings The ThemeContext now includes a "system" theme and ClearConvos no longer relies on the "selected option" state to update the theme. The bug is now fixed if the system theme changes. * Refactor DialogTemplate styles and color scheme Adjusted the color scheme of the DialogTemplate component to dark mode, updated the background color to gray-900 and removed unnecessary classes. * Refactor: Change button logic to require confirmation before clearing convos This commit refactors the code by adding a confirmation dialog to prompt for a user's confirmation before clearing all conversations in the Settings.jsx file. The change ensures the user is aware of the irreversible action before initiating the clearConvos function. Additionally, the commit updates the clear chat button's class name and changes the button's onClick logic to call the confirmClearConvos function instead of directly invoking the clearConvos method. * Refactor component name to reflect functionality change. - Changed component name from ClearConvos to Settings to support potential future use cases. * Refactor conversation clearing functionality in `Settings.jsx` This commit optimizes the conversation clearing functionality in the `Settings.jsx` component by removing the `confirmClearConvos` function and directly calling the `clearConvos` function on confirmation. This change will simplify the code and improve the user experience. * Refactor Input component UI styles Simplify Input component styles by simplifying the gradient background, removing border color styles, and updating button styles. * feat: Add e2e test for Settings modal This commit adds an e2e test to verify whether the Settings modal is displayed on the landing page. It uses a headless browser to navigate to the page and interacts with it to verify if the dialog and its components are visible. * test: Add Navigation and Settings tests Add Navigation and Settings tests to verify that the navigation bar and Settings button are visible and that the Settings modal displays the expected content. The settings modal verification includes checking whether the modal is visible, if the modal title, tab list, clear conversation button and theme are present, and if the theme option can be selected to change the mode. * Quick fix * feat(navbar): Add confirmation before clearing conversations Adding confirmation modal to prevent accidentally clearing conversations. Before, once you clicked on the "Clear" button it immediately clears all conversations. With this change, if you click on "Clear" the first time, it will change the text to "Confirm Clear" and if you click it again, it will clear all conversations. * Add click functionality to the navigation bar and improve UI design The code introduced click functionality to the nav bar and improved the user interface. It also used the new theme select feature to change the theme to dark. * test: Add test for dark mode theme change Refactor the test for Navigation suite to check for the 'dark' class in the HTML element when the 'dark' theme is selected in the modal. This ensures that the dark mode theme change works correctly, and improves test coverage. * Improve navigation test clarity This commit improves code clarity and adds more detailed test assertions to the navigation suite. New assert statements are added to check whether the modal theme selection changes the theme and that the HTML element receives the 'dark' class. A new function `changeMode` was introduced to avoid code repetition. A short description was added to the commit message to adhere to best practices. * Improve navigation test clarity This commit improves code clarity and adds more detailed test assertions to the navigation suite. New assert statements are added to check whether the modal theme selection changes the theme and that the HTML element receives the 'dark' class. A new function `changeMode` was introduced to avoid code repetition. A short description was added to the commit message to adhere to best practices. * Hotfix * Removed repetation * Refactor: Change text-gray-400 to text-white/50 to make tailwind more cleaner * style: Update CSS classes to improve the conversation UI - Update Conversation component to improve UX - Changed styling for group hover effect using shades of gray - Improved color contrast of the Message component for easy readability - Replaced class names in buildTree.js with a new class name - Added a new color theme (gray-1000) in tailwind.config to replace an old background color. * Refactor EndpointItem, EndpointItems, and NewConversationMenu for better user experience - The `EndpointItem` component now accepts an `isSelected` prop instead of `onSelect` to better reflect its usage in `EndpointItems` and `NewConversationMenu`. - `EndpointItems` component now has a `selectedEndpoint` prop to highlight the selected item in the list. - `NewConversationMenu` now has a gap between the endpoint options to improve user experience. * Added error messages * refactor: Improve endpoint menu highlighting and error handling In the UI, when the user selects an endpoint, the active class is now properly set. In the error handling function, `isJson` is now a private function called by `getError`, which provides better parsing of error messages, and returns more succinct messages upon encountering specific errors. Finally, a new end-to-end test has been added to check if the active class is properly set on selecting an endpoint in the new conversation menu. * test: Add Conversation and Change Path of Auth JSON In the Landing spec, test the functionality to create conversations and check that the number of items has increased. In the Popup spec, change the path of the Auth JSON used by the context. * Fixed logo issues * Make everything not rounded * Added time --------- Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com>
2023-06-02 10:02:35 +05:30
import { expect, test } from '@playwright/test';
test.describe('Endpoints Presets suite', () => {
test('Endpoints Suite', async ({ page }) => {
Added Settings Modal (#342) * Improve UI with style changes and add Settings button - Improved the UI of the `Input` and `Message` components. - Added a `Settings` button to the `NavLinks` component. - Introduced a `Settings` component to handle user settings. - Refactored the `Dialog` component for consistency. * Revert not needed changes * Updated style.css to only work for select * feat: Remove Dark Mode component and add theme selection feature This commit removes the Dark Mode component from the navigation bar and replaces it with a theme selection dropdown menu in the Settings dialog. The implementation of the theme selection feature includes a function that allows the user to set the theme based on the system, light, or dark mode. * Add auto theme setting to Settings component. This commit adds a new state variable to keep track of whether the auto theme is enabled or not. It also registers an event listener to update the theme based on system preference changes. The event listener is removed when the component is unmounted. * Improve user experience by allowing customized themes - Create `selectedOption` state to track user-selected theme - Remove unused `isAutoTheme` state variable * feat(Nav): Add SVG icon to settings gear This commit adds an SVG icon to the settings gear in the Navigation component's Settings file. The new SVG icon replaces the previous GearIcon component. * refactor(ui): Update overlay background color This commit updates the background color of the overlay in the AlertDialog and Dialog components by changing the classes applied to the elements. The new color is a transition from `bg-black/50 backdrop-blur-sm` to `bg-gray-500/90 dark:bg-gray-800/90`. This change improves the readability of the dialog boxes. * Refactor ThemeContext to include system theme and fix bug in Settings The ThemeContext now includes a "system" theme and ClearConvos no longer relies on the "selected option" state to update the theme. The bug is now fixed if the system theme changes. * Refactor DialogTemplate styles and color scheme Adjusted the color scheme of the DialogTemplate component to dark mode, updated the background color to gray-900 and removed unnecessary classes. * Refactor: Change button logic to require confirmation before clearing convos This commit refactors the code by adding a confirmation dialog to prompt for a user's confirmation before clearing all conversations in the Settings.jsx file. The change ensures the user is aware of the irreversible action before initiating the clearConvos function. Additionally, the commit updates the clear chat button's class name and changes the button's onClick logic to call the confirmClearConvos function instead of directly invoking the clearConvos method. * Refactor component name to reflect functionality change. - Changed component name from ClearConvos to Settings to support potential future use cases. * Refactor conversation clearing functionality in `Settings.jsx` This commit optimizes the conversation clearing functionality in the `Settings.jsx` component by removing the `confirmClearConvos` function and directly calling the `clearConvos` function on confirmation. This change will simplify the code and improve the user experience. * Refactor Input component UI styles Simplify Input component styles by simplifying the gradient background, removing border color styles, and updating button styles. * feat: Add e2e test for Settings modal This commit adds an e2e test to verify whether the Settings modal is displayed on the landing page. It uses a headless browser to navigate to the page and interacts with it to verify if the dialog and its components are visible. * test: Add Navigation and Settings tests Add Navigation and Settings tests to verify that the navigation bar and Settings button are visible and that the Settings modal displays the expected content. The settings modal verification includes checking whether the modal is visible, if the modal title, tab list, clear conversation button and theme are present, and if the theme option can be selected to change the mode. * Quick fix * feat(navbar): Add confirmation before clearing conversations Adding confirmation modal to prevent accidentally clearing conversations. Before, once you clicked on the "Clear" button it immediately clears all conversations. With this change, if you click on "Clear" the first time, it will change the text to "Confirm Clear" and if you click it again, it will clear all conversations. * Add click functionality to the navigation bar and improve UI design The code introduced click functionality to the nav bar and improved the user interface. It also used the new theme select feature to change the theme to dark. * test: Add test for dark mode theme change Refactor the test for Navigation suite to check for the 'dark' class in the HTML element when the 'dark' theme is selected in the modal. This ensures that the dark mode theme change works correctly, and improves test coverage. * Improve navigation test clarity This commit improves code clarity and adds more detailed test assertions to the navigation suite. New assert statements are added to check whether the modal theme selection changes the theme and that the HTML element receives the 'dark' class. A new function `changeMode` was introduced to avoid code repetition. A short description was added to the commit message to adhere to best practices. * Improve navigation test clarity This commit improves code clarity and adds more detailed test assertions to the navigation suite. New assert statements are added to check whether the modal theme selection changes the theme and that the HTML element receives the 'dark' class. A new function `changeMode` was introduced to avoid code repetition. A short description was added to the commit message to adhere to best practices. * Hotfix * Removed repetation * Refactor: Change text-gray-400 to text-white/50 to make tailwind more cleaner * style: Update CSS classes to improve the conversation UI - Update Conversation component to improve UX - Changed styling for group hover effect using shades of gray - Improved color contrast of the Message component for easy readability - Replaced class names in buildTree.js with a new class name - Added a new color theme (gray-1000) in tailwind.config to replace an old background color. * Refactor EndpointItem, EndpointItems, and NewConversationMenu for better user experience - The `EndpointItem` component now accepts an `isSelected` prop instead of `onSelect` to better reflect its usage in `EndpointItems` and `NewConversationMenu`. - `EndpointItems` component now has a `selectedEndpoint` prop to highlight the selected item in the list. - `NewConversationMenu` now has a gap between the endpoint options to improve user experience. * Added error messages * refactor: Improve endpoint menu highlighting and error handling In the UI, when the user selects an endpoint, the active class is now properly set. In the error handling function, `isJson` is now a private function called by `getError`, which provides better parsing of error messages, and returns more succinct messages upon encountering specific errors. Finally, a new end-to-end test has been added to check if the active class is properly set on selecting an endpoint in the new conversation menu. * test: Add Conversation and Change Path of Auth JSON In the Landing spec, test the functionality to create conversations and check that the number of items has increased. In the Popup spec, change the path of the Auth JSON used by the context. * Fixed logo issues * Make everything not rounded * Added time --------- Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com>
2023-06-02 10:02:35 +05:30
await page.goto('http://localhost:3080/');
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
2023-09-06 10:46:27 -04:00
await page.getByTestId('new-conversation-menu').click();
Added Settings Modal (#342) * Improve UI with style changes and add Settings button - Improved the UI of the `Input` and `Message` components. - Added a `Settings` button to the `NavLinks` component. - Introduced a `Settings` component to handle user settings. - Refactored the `Dialog` component for consistency. * Revert not needed changes * Updated style.css to only work for select * feat: Remove Dark Mode component and add theme selection feature This commit removes the Dark Mode component from the navigation bar and replaces it with a theme selection dropdown menu in the Settings dialog. The implementation of the theme selection feature includes a function that allows the user to set the theme based on the system, light, or dark mode. * Add auto theme setting to Settings component. This commit adds a new state variable to keep track of whether the auto theme is enabled or not. It also registers an event listener to update the theme based on system preference changes. The event listener is removed when the component is unmounted. * Improve user experience by allowing customized themes - Create `selectedOption` state to track user-selected theme - Remove unused `isAutoTheme` state variable * feat(Nav): Add SVG icon to settings gear This commit adds an SVG icon to the settings gear in the Navigation component's Settings file. The new SVG icon replaces the previous GearIcon component. * refactor(ui): Update overlay background color This commit updates the background color of the overlay in the AlertDialog and Dialog components by changing the classes applied to the elements. The new color is a transition from `bg-black/50 backdrop-blur-sm` to `bg-gray-500/90 dark:bg-gray-800/90`. This change improves the readability of the dialog boxes. * Refactor ThemeContext to include system theme and fix bug in Settings The ThemeContext now includes a "system" theme and ClearConvos no longer relies on the "selected option" state to update the theme. The bug is now fixed if the system theme changes. * Refactor DialogTemplate styles and color scheme Adjusted the color scheme of the DialogTemplate component to dark mode, updated the background color to gray-900 and removed unnecessary classes. * Refactor: Change button logic to require confirmation before clearing convos This commit refactors the code by adding a confirmation dialog to prompt for a user's confirmation before clearing all conversations in the Settings.jsx file. The change ensures the user is aware of the irreversible action before initiating the clearConvos function. Additionally, the commit updates the clear chat button's class name and changes the button's onClick logic to call the confirmClearConvos function instead of directly invoking the clearConvos method. * Refactor component name to reflect functionality change. - Changed component name from ClearConvos to Settings to support potential future use cases. * Refactor conversation clearing functionality in `Settings.jsx` This commit optimizes the conversation clearing functionality in the `Settings.jsx` component by removing the `confirmClearConvos` function and directly calling the `clearConvos` function on confirmation. This change will simplify the code and improve the user experience. * Refactor Input component UI styles Simplify Input component styles by simplifying the gradient background, removing border color styles, and updating button styles. * feat: Add e2e test for Settings modal This commit adds an e2e test to verify whether the Settings modal is displayed on the landing page. It uses a headless browser to navigate to the page and interacts with it to verify if the dialog and its components are visible. * test: Add Navigation and Settings tests Add Navigation and Settings tests to verify that the navigation bar and Settings button are visible and that the Settings modal displays the expected content. The settings modal verification includes checking whether the modal is visible, if the modal title, tab list, clear conversation button and theme are present, and if the theme option can be selected to change the mode. * Quick fix * feat(navbar): Add confirmation before clearing conversations Adding confirmation modal to prevent accidentally clearing conversations. Before, once you clicked on the "Clear" button it immediately clears all conversations. With this change, if you click on "Clear" the first time, it will change the text to "Confirm Clear" and if you click it again, it will clear all conversations. * Add click functionality to the navigation bar and improve UI design The code introduced click functionality to the nav bar and improved the user interface. It also used the new theme select feature to change the theme to dark. * test: Add test for dark mode theme change Refactor the test for Navigation suite to check for the 'dark' class in the HTML element when the 'dark' theme is selected in the modal. This ensures that the dark mode theme change works correctly, and improves test coverage. * Improve navigation test clarity This commit improves code clarity and adds more detailed test assertions to the navigation suite. New assert statements are added to check whether the modal theme selection changes the theme and that the HTML element receives the 'dark' class. A new function `changeMode` was introduced to avoid code repetition. A short description was added to the commit message to adhere to best practices. * Improve navigation test clarity This commit improves code clarity and adds more detailed test assertions to the navigation suite. New assert statements are added to check whether the modal theme selection changes the theme and that the HTML element receives the 'dark' class. A new function `changeMode` was introduced to avoid code repetition. A short description was added to the commit message to adhere to best practices. * Hotfix * Removed repetation * Refactor: Change text-gray-400 to text-white/50 to make tailwind more cleaner * style: Update CSS classes to improve the conversation UI - Update Conversation component to improve UX - Changed styling for group hover effect using shades of gray - Improved color contrast of the Message component for easy readability - Replaced class names in buildTree.js with a new class name - Added a new color theme (gray-1000) in tailwind.config to replace an old background color. * Refactor EndpointItem, EndpointItems, and NewConversationMenu for better user experience - The `EndpointItem` component now accepts an `isSelected` prop instead of `onSelect` to better reflect its usage in `EndpointItems` and `NewConversationMenu`. - `EndpointItems` component now has a `selectedEndpoint` prop to highlight the selected item in the list. - `NewConversationMenu` now has a gap between the endpoint options to improve user experience. * Added error messages * refactor: Improve endpoint menu highlighting and error handling In the UI, when the user selects an endpoint, the active class is now properly set. In the error handling function, `isJson` is now a private function called by `getError`, which provides better parsing of error messages, and returns more succinct messages upon encountering specific errors. Finally, a new end-to-end test has been added to check if the active class is properly set on selecting an endpoint in the new conversation menu. * test: Add Conversation and Change Path of Auth JSON In the Landing spec, test the functionality to create conversations and check that the number of items has increased. In the Popup spec, change the path of the Auth JSON used by the context. * Fixed logo issues * Make everything not rounded * Added time --------- Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com>
2023-06-02 10:02:35 +05:30
refactor: Client Classes & Azure OpenAI as a separate Endpoint (#532) * refactor: start new client classes, test localAi support * feat: create base class, extend chatgpt from base * refactor(BaseClient.js): change userId parameter to user refactor(BaseClient.js): change userId parameter to user feat(OpenAIClient.js): add sendMessage method refactor(OpenAIClient.js): change getConversation method to use user parameter instead of userId refactor(OpenAIClient.js): change saveMessageToDatabase method to use user parameter instead of userId refactor(OpenAIClient.js): change buildPrompt method to use messages parameter instead of orderedMessages feat(index.js): export client classes refactor(askGPTPlugins.js): use req.body.token or process.env.OPENAI_API_KEY as OpenAI API key refactor(index.js): comment out askOpenAI route feat(index.js): add openAI route feat(openAI.js): add new route for OpenAI API requests with support for progress updates and aborting requests. * refactor(BaseClient.js): use optional chaining operator to access messageId property refactor(OpenAIClient.js): use orderedMessages instead of messages to build prompt refactor(OpenAIClient.js): use optional chaining operator to access messageId property refactor(fetch-polyfill.js): remove fetch polyfill refactor(openAI.js): comment out debug option in clientOptions * refactor: update import statements and remove unused imports in several files feat: add getAzureCredentials function to azureUtils module docs: update comments in azureUtils module * refactor(utils): rename migrateConversations to migrateDataToFirstUser for clarity and consistency * feat(chatgpt-client.js): add getAzureCredentials function to retrieve Azure credentials feat(chatgpt-client.js): use getAzureCredentials function to generate reverseProxyUrl feat(OpenAIClient.js): add isChatCompletion property to determine if chat completion model is used feat(OpenAIClient.js): add saveOptions parameter to sendMessage and buildPrompt methods feat(OpenAIClient.js): modify buildPrompt method to handle chat completion model feat(openAI.js): modify endpointOption to include modelOptions instead of individual options refactor(OpenAIClient.js): modify getDelta property to use isChatCompletion property instead of isChatGptModel property refactor(OpenAIClient.js): modify sendMessage method to use saveOptions parameter instead of modelOptions parameter refactor(OpenAIClient.js): modify buildPrompt method to use saveOptions parameter instead of modelOptions parameter refactor(OpenAIClient.js): modify ask method to include endpointOption parameter * chore: delete draft file * refactor(OpenAIClient.js): extract sendCompletion method from sendMessage method for reusability * refactor(BaseClient.js): move sendMessage method to BaseClient class feat(OpenAIClient.js): inherit from BaseClient class and implement necessary methods and properties for OpenAIClient class. * refactor(BaseClient.js): rename getBuildPromptOptions to getBuildMessagesOptions feat(BaseClient.js): add buildMessages method to BaseClient class fix(ChatGPTClient.js): use message.text instead of message.message refactor(ChatGPTClient.js): rename buildPromptBody to buildMessagesBody refactor(ChatGPTClient.js): remove console.debug statement and add debug log for prompt variable refactor(OpenAIClient.js): move setOptions method to the bottom of the class feat(OpenAIClient.js): add support for cl100k_base encoding feat(OpenAIClient.js): add support for unofficial chat GPT models feat(OpenAIClient.js): add support for custom modelOptions feat(OpenAIClient.js): add caching for tokenizers feat(OpenAIClient.js): add freeAndInitializeEncoder method to free and reinitialize tokenizers refactor(OpenAIClient.js): rename getBuildPromptOptions to getBuildMessagesOptions refactor(OpenAIClient.js): rename buildPrompt to buildMessages refactor(OpenAIClient.js): remove endpointOption from ask function arguments in openAI.js * refactor(ChatGPTClient.js, OpenAIClient.js): improve code readability and consistency - In ChatGPTClient.js, update the roleLabel and messageString variables to handle cases where the message object does not have an isCreatedByUser property or a role property with a value of 'user'. - In OpenAIClient.js, rename the freeAndInitializeEncoder method to freeAndResetEncoder to better reflect its functionality. Also, update the method calls to reflect the new name. Additionally, update the getTokenCount method to handle errors by calling the freeAndResetEncoder method instead of the now-renamed freeAndInitializeEncoder method. * refactor(OpenAIClient.js): extract instructions object to a separate variable and add it to payload after formatted messages fix(OpenAIClient.js): handle cases where progressMessage.choices is undefined or empty * refactor(BaseClient.js): extract addInstructions method from sendMessage method feat(OpenAIClient.js): add maxTokensMap object to map maximum tokens for each model refactor(OpenAIClient.js): use addInstructions method in buildMessages method instead of manually building the payload list * refactor(OpenAIClient.js): remove unnecessary condition for modelOptions.model property in buildMessages method * feat(BaseClient.js): add support for token count tracking and context strategy feat(OpenAIClient.js): add support for token count tracking and context strategy feat(Message.js): add tokenCount field to Message schema and updateMessage function * refactor(BaseClient.js): add support for refining messages based on token limit feat(OpenAIClient.js): add support for context refinement strategy refactor(OpenAIClient.js): use context refinement strategy in message sending refactor(server/index.js): improve code readability by breaking long lines * refactor(BaseClient.js): change `remainingContext` to `remainingContextTokens` for clarity feat(BaseClient.js): add `refinePrompt` and `refinePromptTemplate` to handle message refinement feat(BaseClient.js): add `refineMessages` method to refine messages feat(BaseClient.js): add `handleContextStrategy` method to handle context strategy feat(OpenAIClient.js): add `abortController` to `buildPrompt` method options refactor(OpenAIClient.js): change `payload` and `tokenCountMap` to let variables in `handleContextStrategy` method refactor(BaseClient.js): change `remainingContext` to `remainingContextTokens` in `handleContextStrategy` method for consistency refactor(BaseClient.js): change `remainingContext` to `remainingContextTokens` in `getMessagesWithinTokenLimit` method for consistency refactor(BaseClient.js): change `remainingContext` to `remainingContext * chore(openAI.js): comment out contextStrategy option in clientOptions * chore(openAI.js): comment out debug option in clientOptions object * test: BaseClient tests in progress * test: Complete OpenAIClient & BaseClient tests * fix(OpenAIClient.js): remove unnecessary whitespace fix(OpenAIClient.js): remove unused variables and comments fix(OpenAIClient.test.js): combine getTokenCount and freeAndResetEncoder tests * chore(.eslintrc.js): add rule for maximum of 1 empty line feat(ask/openAI.js): add abortMessage utility function fix(ask/openAI.js): handle error and abort message if partial text is less than 2 characters feat(utils/index.js): export abortMessage utility function * test: complete additional tests * feat: Azure OpenAI as a separate endpoint * chore: remove extraneous console logs * fix(azureOpenAI): use chatCompletion endpoint * chore(initializeClient.js): delete initializeClient.js file chore(askOpenAI.js): delete old OpenAI route handler chore(handlers.js): remove trailing whitespace in thought variable assignment * chore(chatgpt-client.js): remove unused chatgpt-client.js file refactor(index.js): remove askClient import and export from index.js * chore(chatgpt-client.tokens.js): update test script for memory usage and encoding performance The test script in `chatgpt-client.tokens.js` has been updated to measure the memory usage and encoding performance of the client. The script now includes information about the initial memory usage, peak memory usage, final memory usage, and memory usage after a timeout. It also provides insights into the number of encoding requests that can be processed per second. The script has been modified to use the `OpenAIClient` class instead of the `ChatGPTClient` class. Additionally, the number of iterations for the encoding loop has been reduced to 10,000. A timeout function has been added to simulate a delay of 15 seconds. After the timeout, the memory usage is measured again. The script now handles uncaught exceptions and logs any errors that occur, except for errors related to failed fetch requests. Note: This is a test script and should not be used in production * feat(FakeClient.js): add a new class `FakeClient` that extends `BaseClient` and implements methods for a fake client feat(FakeClient.js): implement the `setOptions` method to handle options for the fake client feat(FakeClient.js): implement the `initializeFakeClient` function to initialize a fake client with options and fake messages fix(OpenAIClient.js): remove duplicate `maxTokensMap` import and use the one from utils feat(BaseClient): return promptTokens and completionTokens * refactor(gptPlugins): refactor ChatAgent to PluginsClient, which extends OpenAIClient * refactor: client paths * chore(jest.config.js): remove jest.config.js file * fix(PluginController.js): update file path to manifest.json feat(gptPlugins.js): add support for aborting messages refactor(ask/index.js): rename askGPTPlugins to gptPlugins for consistency * fix(BaseClient.js): fix spacing in generateTextStream function signature refactor(BaseClient.js): remove unnecessary push to currentMessages in generateUserMessage function refactor(BaseClient.js): remove unnecessary push to currentMessages in handleStartMethods function refactor(PluginsClient.js): remove unused variables and date formatting in constructor refactor(PluginsClient.js): simplify mapping of pastMessages in getCompletionPayload function * refactor(GoogleClient): GoogleClient now extends BaseClient * chore(.env.example): add AZURE_OPENAI_MODELS variable fix(api/routes/ask/gptPlugins.js): enable Azure integration if PLUGINS_USE_AZURE is true fix(api/routes/endpoints.js): getOpenAIModels function now accepts options, use AZURE_OPENAI_MODELS if PLUGINS_USE_AZURE is true fix(client/components/Endpoints/OpenAI/Settings.jsx): remove console.log statement docs(features/azure.md): add documentation for Azure OpenAI integration and environment variables * fix(e2e:popup): includes the icon + endpoint names in role, name property
2023-07-03 16:51:12 -04:00
// includes the icon + endpoint names in obj property
ci: add e2e workflow, optimize client code for testing (#771) * refactor(e2e): fix tests with latest changes, convert to TS, use test Ids * chore(EndpointMenu.jsx): add data-testid attribute to new-conversation-menu button * refactor(EndpointItem): add data-testid attr., convert to TS * refactor(e2e): remove unnecessary awaits and convert to TS * chore(playwright.config.local.ts): add absolute path to server index.js file chore(playwright.config.local.ts): add dotenv configuration chore(playwright.config.local.ts): change webServer command to use absolute path chore(playwright.config.local.ts): add NODE_ENV and process.env to webServer env chore(playwright.config.local.ts): remove unused import chore(login.spec.js): delete login.spec.js file * chore(.gitignore): add 'my.secrets' to the list of ignored files fix(Registration.tsx): add 'data-testid' attribute to the error message div fix(Registration.spec.tsx): comment out test case that calls 'registerUser.mutate' * chore(ConvoIcon.tsx): add data-testid attribute to svg element chore(messages.spec.ts): refactor conversation navigation logic * chore(playwright.config.ts): add support for absolute path to server index.js file feat(playwright.config.ts): add support for dotenv configuration feat(playwright.config.ts): set NODE_ENV to 'production' in webServer environment variables * chore(workflows): comment out push event and specify paths for pull_request event in backend-review.yml chore(workflows): comment out push event and specify paths for pull_request event in frontend-review.yml * chore(install.js): add check to skip install script in CI environment * chore: complete playwright workflow * chore(Landing.tsx): add data-testid attribute to landing title element chore(authenticate.ts): update selector to wait for landing title element by test id instead of text content * chore(playwright.yml): add step to upload screenshot artifact on failure fix(authenticate.ts): capture screenshot before waiting for landing title and increase timeout due to GH Actions load time * chore(playwright.yml): rename artifact name from 'screenshot' to 'login-screenshot' feat(LoginForm.tsx): add data-testid attribute to login button fix(authenticate.ts): change screenshot name to 'login-screenshot.png' and conditionally take screenshot only in CI environment * chore(playwright.yml): add CI environment variable and set it to true * chore(playwright.yml): update Playwright installation command chore(playwright.config.ts): update storageState path to use process.cwd() * fix(playwright.yml): update node version to 18 in setup-node action fix(playwright.yml): update actions/cache to v3 in Cache Node.js modules step fix(playwright.yml): update actions/cache to v3 in Cache Playwright installations step fix(authenticate.ts): change login button click to press 'Enter' on password input * chore(playwright.yml): update E2E_USER_EMAIL and E2E_USER_PASSWORD values for testing purposes chore(authenticate.ts): add console.dir to log user object for debugging * chore(playwright.yml): add step to upload storageState artifact The storageState artifact is now uploaded as part of the workflow. This artifact contains the state of the storage used during the end-to-end tests. It will be retained for 2 days. * chore(playwright.yml): comment out upload screenshot step chore(playwright.config.ts): change NODE_ENV to development chore(authenticate.ts): comment out screenshot related code * chore(playwright.config.ts): add SESSION_EXPIRY environment variable with value 86400000 * chore(playwright.yml): update environment variables in Playwright workflow fix(General.tsx): add data-testid attributes to clear conversations buttons test(messages.spec.ts): add setup and teardown steps for clearing conversations before and after tests * fix(messages.spec.ts): fix clearing conversations before and after message tests feat(messages.spec.ts): add beforeEach and afterEach hooks to create and close new page for each test * chore: remove storageStage upload artifact
2023-08-08 11:17:15 -04:00
const endpointItem = page.getByRole('menuitemradio', { name: 'ChatGPT OpenAI' });
Added Settings Modal (#342) * Improve UI with style changes and add Settings button - Improved the UI of the `Input` and `Message` components. - Added a `Settings` button to the `NavLinks` component. - Introduced a `Settings` component to handle user settings. - Refactored the `Dialog` component for consistency. * Revert not needed changes * Updated style.css to only work for select * feat: Remove Dark Mode component and add theme selection feature This commit removes the Dark Mode component from the navigation bar and replaces it with a theme selection dropdown menu in the Settings dialog. The implementation of the theme selection feature includes a function that allows the user to set the theme based on the system, light, or dark mode. * Add auto theme setting to Settings component. This commit adds a new state variable to keep track of whether the auto theme is enabled or not. It also registers an event listener to update the theme based on system preference changes. The event listener is removed when the component is unmounted. * Improve user experience by allowing customized themes - Create `selectedOption` state to track user-selected theme - Remove unused `isAutoTheme` state variable * feat(Nav): Add SVG icon to settings gear This commit adds an SVG icon to the settings gear in the Navigation component's Settings file. The new SVG icon replaces the previous GearIcon component. * refactor(ui): Update overlay background color This commit updates the background color of the overlay in the AlertDialog and Dialog components by changing the classes applied to the elements. The new color is a transition from `bg-black/50 backdrop-blur-sm` to `bg-gray-500/90 dark:bg-gray-800/90`. This change improves the readability of the dialog boxes. * Refactor ThemeContext to include system theme and fix bug in Settings The ThemeContext now includes a "system" theme and ClearConvos no longer relies on the "selected option" state to update the theme. The bug is now fixed if the system theme changes. * Refactor DialogTemplate styles and color scheme Adjusted the color scheme of the DialogTemplate component to dark mode, updated the background color to gray-900 and removed unnecessary classes. * Refactor: Change button logic to require confirmation before clearing convos This commit refactors the code by adding a confirmation dialog to prompt for a user's confirmation before clearing all conversations in the Settings.jsx file. The change ensures the user is aware of the irreversible action before initiating the clearConvos function. Additionally, the commit updates the clear chat button's class name and changes the button's onClick logic to call the confirmClearConvos function instead of directly invoking the clearConvos method. * Refactor component name to reflect functionality change. - Changed component name from ClearConvos to Settings to support potential future use cases. * Refactor conversation clearing functionality in `Settings.jsx` This commit optimizes the conversation clearing functionality in the `Settings.jsx` component by removing the `confirmClearConvos` function and directly calling the `clearConvos` function on confirmation. This change will simplify the code and improve the user experience. * Refactor Input component UI styles Simplify Input component styles by simplifying the gradient background, removing border color styles, and updating button styles. * feat: Add e2e test for Settings modal This commit adds an e2e test to verify whether the Settings modal is displayed on the landing page. It uses a headless browser to navigate to the page and interacts with it to verify if the dialog and its components are visible. * test: Add Navigation and Settings tests Add Navigation and Settings tests to verify that the navigation bar and Settings button are visible and that the Settings modal displays the expected content. The settings modal verification includes checking whether the modal is visible, if the modal title, tab list, clear conversation button and theme are present, and if the theme option can be selected to change the mode. * Quick fix * feat(navbar): Add confirmation before clearing conversations Adding confirmation modal to prevent accidentally clearing conversations. Before, once you clicked on the "Clear" button it immediately clears all conversations. With this change, if you click on "Clear" the first time, it will change the text to "Confirm Clear" and if you click it again, it will clear all conversations. * Add click functionality to the navigation bar and improve UI design The code introduced click functionality to the nav bar and improved the user interface. It also used the new theme select feature to change the theme to dark. * test: Add test for dark mode theme change Refactor the test for Navigation suite to check for the 'dark' class in the HTML element when the 'dark' theme is selected in the modal. This ensures that the dark mode theme change works correctly, and improves test coverage. * Improve navigation test clarity This commit improves code clarity and adds more detailed test assertions to the navigation suite. New assert statements are added to check whether the modal theme selection changes the theme and that the HTML element receives the 'dark' class. A new function `changeMode` was introduced to avoid code repetition. A short description was added to the commit message to adhere to best practices. * Improve navigation test clarity This commit improves code clarity and adds more detailed test assertions to the navigation suite. New assert statements are added to check whether the modal theme selection changes the theme and that the HTML element receives the 'dark' class. A new function `changeMode` was introduced to avoid code repetition. A short description was added to the commit message to adhere to best practices. * Hotfix * Removed repetation * Refactor: Change text-gray-400 to text-white/50 to make tailwind more cleaner * style: Update CSS classes to improve the conversation UI - Update Conversation component to improve UX - Changed styling for group hover effect using shades of gray - Improved color contrast of the Message component for easy readability - Replaced class names in buildTree.js with a new class name - Added a new color theme (gray-1000) in tailwind.config to replace an old background color. * Refactor EndpointItem, EndpointItems, and NewConversationMenu for better user experience - The `EndpointItem` component now accepts an `isSelected` prop instead of `onSelect` to better reflect its usage in `EndpointItems` and `NewConversationMenu`. - `EndpointItems` component now has a `selectedEndpoint` prop to highlight the selected item in the list. - `NewConversationMenu` now has a gap between the endpoint options to improve user experience. * Added error messages * refactor: Improve endpoint menu highlighting and error handling In the UI, when the user selects an endpoint, the active class is now properly set. In the error handling function, `isJson` is now a private function called by `getError`, which provides better parsing of error messages, and returns more succinct messages upon encountering specific errors. Finally, a new end-to-end test has been added to check if the active class is properly set on selecting an endpoint in the new conversation menu. * test: Add Conversation and Change Path of Auth JSON In the Landing spec, test the functionality to create conversations and check that the number of items has increased. In the Popup spec, change the path of the Auth JSON used by the context. * Fixed logo issues * Make everything not rounded * Added time --------- Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com>
2023-06-02 10:02:35 +05:30
await endpointItem.click();
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
2023-09-06 10:46:27 -04:00
await page.getByTestId('new-conversation-menu').click();
Added Settings Modal (#342) * Improve UI with style changes and add Settings button - Improved the UI of the `Input` and `Message` components. - Added a `Settings` button to the `NavLinks` component. - Introduced a `Settings` component to handle user settings. - Refactored the `Dialog` component for consistency. * Revert not needed changes * Updated style.css to only work for select * feat: Remove Dark Mode component and add theme selection feature This commit removes the Dark Mode component from the navigation bar and replaces it with a theme selection dropdown menu in the Settings dialog. The implementation of the theme selection feature includes a function that allows the user to set the theme based on the system, light, or dark mode. * Add auto theme setting to Settings component. This commit adds a new state variable to keep track of whether the auto theme is enabled or not. It also registers an event listener to update the theme based on system preference changes. The event listener is removed when the component is unmounted. * Improve user experience by allowing customized themes - Create `selectedOption` state to track user-selected theme - Remove unused `isAutoTheme` state variable * feat(Nav): Add SVG icon to settings gear This commit adds an SVG icon to the settings gear in the Navigation component's Settings file. The new SVG icon replaces the previous GearIcon component. * refactor(ui): Update overlay background color This commit updates the background color of the overlay in the AlertDialog and Dialog components by changing the classes applied to the elements. The new color is a transition from `bg-black/50 backdrop-blur-sm` to `bg-gray-500/90 dark:bg-gray-800/90`. This change improves the readability of the dialog boxes. * Refactor ThemeContext to include system theme and fix bug in Settings The ThemeContext now includes a "system" theme and ClearConvos no longer relies on the "selected option" state to update the theme. The bug is now fixed if the system theme changes. * Refactor DialogTemplate styles and color scheme Adjusted the color scheme of the DialogTemplate component to dark mode, updated the background color to gray-900 and removed unnecessary classes. * Refactor: Change button logic to require confirmation before clearing convos This commit refactors the code by adding a confirmation dialog to prompt for a user's confirmation before clearing all conversations in the Settings.jsx file. The change ensures the user is aware of the irreversible action before initiating the clearConvos function. Additionally, the commit updates the clear chat button's class name and changes the button's onClick logic to call the confirmClearConvos function instead of directly invoking the clearConvos method. * Refactor component name to reflect functionality change. - Changed component name from ClearConvos to Settings to support potential future use cases. * Refactor conversation clearing functionality in `Settings.jsx` This commit optimizes the conversation clearing functionality in the `Settings.jsx` component by removing the `confirmClearConvos` function and directly calling the `clearConvos` function on confirmation. This change will simplify the code and improve the user experience. * Refactor Input component UI styles Simplify Input component styles by simplifying the gradient background, removing border color styles, and updating button styles. * feat: Add e2e test for Settings modal This commit adds an e2e test to verify whether the Settings modal is displayed on the landing page. It uses a headless browser to navigate to the page and interacts with it to verify if the dialog and its components are visible. * test: Add Navigation and Settings tests Add Navigation and Settings tests to verify that the navigation bar and Settings button are visible and that the Settings modal displays the expected content. The settings modal verification includes checking whether the modal is visible, if the modal title, tab list, clear conversation button and theme are present, and if the theme option can be selected to change the mode. * Quick fix * feat(navbar): Add confirmation before clearing conversations Adding confirmation modal to prevent accidentally clearing conversations. Before, once you clicked on the "Clear" button it immediately clears all conversations. With this change, if you click on "Clear" the first time, it will change the text to "Confirm Clear" and if you click it again, it will clear all conversations. * Add click functionality to the navigation bar and improve UI design The code introduced click functionality to the nav bar and improved the user interface. It also used the new theme select feature to change the theme to dark. * test: Add test for dark mode theme change Refactor the test for Navigation suite to check for the 'dark' class in the HTML element when the 'dark' theme is selected in the modal. This ensures that the dark mode theme change works correctly, and improves test coverage. * Improve navigation test clarity This commit improves code clarity and adds more detailed test assertions to the navigation suite. New assert statements are added to check whether the modal theme selection changes the theme and that the HTML element receives the 'dark' class. A new function `changeMode` was introduced to avoid code repetition. A short description was added to the commit message to adhere to best practices. * Improve navigation test clarity This commit improves code clarity and adds more detailed test assertions to the navigation suite. New assert statements are added to check whether the modal theme selection changes the theme and that the HTML element receives the 'dark' class. A new function `changeMode` was introduced to avoid code repetition. A short description was added to the commit message to adhere to best practices. * Hotfix * Removed repetation * Refactor: Change text-gray-400 to text-white/50 to make tailwind more cleaner * style: Update CSS classes to improve the conversation UI - Update Conversation component to improve UX - Changed styling for group hover effect using shades of gray - Improved color contrast of the Message component for easy readability - Replaced class names in buildTree.js with a new class name - Added a new color theme (gray-1000) in tailwind.config to replace an old background color. * Refactor EndpointItem, EndpointItems, and NewConversationMenu for better user experience - The `EndpointItem` component now accepts an `isSelected` prop instead of `onSelect` to better reflect its usage in `EndpointItems` and `NewConversationMenu`. - `EndpointItems` component now has a `selectedEndpoint` prop to highlight the selected item in the list. - `NewConversationMenu` now has a gap between the endpoint options to improve user experience. * Added error messages * refactor: Improve endpoint menu highlighting and error handling In the UI, when the user selects an endpoint, the active class is now properly set. In the error handling function, `isJson` is now a private function called by `getError`, which provides better parsing of error messages, and returns more succinct messages upon encountering specific errors. Finally, a new end-to-end test has been added to check if the active class is properly set on selecting an endpoint in the new conversation menu. * test: Add Conversation and Change Path of Auth JSON In the Landing spec, test the functionality to create conversations and check that the number of items has increased. In the Popup spec, change the path of the Auth JSON used by the context. * Fixed logo issues * Make everything not rounded * Added time --------- Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com>
2023-06-02 10:02:35 +05:30
// Check if the active class is set on the selected endpoint
expect(await endpointItem.getAttribute('class')).toContain('active');
});
});