Skip to content

Commit 956aa6c

Browse files
authored
refactor: Settings/Presets UI Restructure, convert many files to TS (danny-avila#740)
* progress on settings refactor * fix(helpers.js): replace fs.rmdirSync with fs.rm to delete node_modules directory recursively fix(packages.js): delete package-lock.json if it exists before running the script * feat(CrossIcon.tsx): add CrossIcon component * wip: refactor Options for modularity into higher order components, OptionsBar > ModelSelect/Settings * refactor: import more from utils/index, including cardStyle used by model select/settings * refactor(AnthropicOptions): refactor to new format, OpenAI: reduce format to name of endpoint * refactor(AnthropicSettings): refactor to new format, match defaults to API docs * fix: google and anthropic defaults * refactor(conversation/submission atoms): add typing, remove unused code * chore(types.ts): add missing type definitions for TMessages, TMessagesAtom, TConversationAtom, and ModelSelectProps feat(types.ts): make endpoint property nullable in TSubmission, TEndpointOption, TConversation, and TPreset types * refactor(ChatGPT): refactor to new format, add omit settings logic * refactor(EndpointSettings/BingAI): new dir structure and format BingAI options/settings to new * fix: update useUpdateTokenCountMutation to accept an object with a 'text' property instead of a string * fix(endpoints): ensure expected behaviors for preset dialogs * chore(index.ts): add defaultTextProps to utils/index.ts for use in settings components * chore(index.ts): add optionText to utils/index.ts for use in settings components * wip: refactor google settings * wip: progress with Google refactor, needs AdditionalButtons handling and global state setters * refactor(OptionsBar.tsx): The setOption function has been refactored to use the useSetOptions custom hook for setting conversation options. * chore(Anthropic.tsx, BingAI.tsx, Google.tsx, OpenAI.tsx): adjust height of container div in Settings component; chore(Examples.tsx): adjust height in Examples component * refactor(Google): complete google refactor feat(client): add new component PopoverButtons for displaying popover buttons in EndpointPopover feat(data-provider): add types for PopoverButton and EndpointOptionsPopoverProps * fix(OptionsBar.tsx): add useEffect hook to handle opacity class based on messagesTree and advancedMode fix(style.css): rename class from 'openAIOptions-simple-container' to 'options-bar' and update references * refactor(Plugins/OptionsBar): complete refactor of Plugins Select options, consolidate logic from TextChat to OptionsBar * fix(Plugins.tsx): filter lastSelectedTools to remove any tools that are not in the current tools list fix(useSetOptions.ts): remove unnecessary empty line * feat(useSetOptions.ts): add setAgentOption function to update agentOptions in conversation state feat(types.ts): add setAgentOption function to UseSetOptions type * refactor(Settings/Plugins): refactor to new format, refactor(OptionHover): use same component for all endpoints * refactor(OptionHover.tsx): refactor types object to use nested objects for openAI and gptPlugins feat(OptionHover.tsx): add openAI object with specific properties for openAI configuration * refactor(AgentSettings): new format, feat(types.ts): add TAgentOptions type for defining agent options in a conversation * feat(PopoverButtons.tsx): add support for GPT plugin settings button feat(Plugins.tsx): create PluginsView component for displaying plugin settings feat(optionSettings.ts): add showAgentSettings atom for controlling agent settings visibility * feat(client): add support for PluginsSettings in Input/Settings component fix(client): change import path for PluginsSettings in Input/Settings component * refactor(Settings/Plugins): complete refactor, store: refactor to TS, refactor: import defaultTextPropsLabel from utils * feat(EndpointSettings, AgentSettings, Anthropic, Google, types.ts): Add support for Recoil state management and useRecoilValue hook; Pass models from endpointsConfig to various components; Add TModels type and update ModelSelectProps type. fix(AgentSettings, Anthropic, Google, GoogleView, Plugins, OpenAI, Settings.tsx): Change import statements for ModelSelectProps from librechat-data-provider; Add models as a parameter to various components; Add models prop to PluginsView, Settings, and other components. * refactor(EditPresetDialog.jsx): update import statements for Examples and AgentSettings components feat(Settings/index.ts): add export statements for Examples and AgentSettings components * chore(package.json): update eslint-plugin-import to version 2.28.0 * fix(eslint): dependency cycle rule is now working * fix: dependency cycle errors and type errors * refactor(EditPresetDialog.jsx): update import path for DialogTemplate component refactor(NewConversationMenu/index.jsx): update import path for DialogTemplate component refactor(ExportModel.jsx): update import path for DialogTemplate component * refactor: rename NewConversationMenu to EndpointMenu * style: mobile and desktop optimizations * chore: eslint changes * chore(eslintrc.js): update eslint configuration to use 'prettier' plugin chore(postcss.config.cjs): update postcss configuration to use single quotes for require statements fix(helpers.js): fix fs.rmSync function call to delete node_modules directory recursively feat(update.js): add support for skipping git commands with '-g' flag * chore(ModelSelect.tsx): add support for azureOpenAI option component chore(Settings.tsx): add support for azureOpenAI option component chore(package.json): add rebuild:package-lock and update:branch scripts * fix(OptionHover.tsx): fix accessing nested properties in types object feat(OptionHover.tsx): add check for existence of text before rendering HoverCardContent * chore(style.css): update transition duration for options-bar from 0.3s to 0.25s * fix(ScrollToBottom.jsx): fix z-index value for scroll button * style: improve dialogs * fix(Nav.jsx): adjust width and max-width of nav component * chore(Nav.jsx): update max-width class for nav component in different screen sizes chore(Dialog.tsx): update class for DialogFooter component to use flex-row layout * fix(client): fix node_module resolution with path mapping * fix(AdjustToneButton.jsx): add z-index to adjust tone button for proper layering fix(TextChat.jsx): change onClick function to use arrow function to avoid immediate execution fix(mobile.css): update z-index for nav and nav-mask for proper layering chore(package.json): rename update:branch script to reinstall for clarity and consistency * fix(OptionsBar/Settings): add null checks for conversation in BingAI.tsx, ChatGPT.tsx, Plugins.tsx, Settings.tsx * style(TextChat/OptionsBar): match official site styles, setup regen/continue/stop buttons div * chore: Import and apply removeFocusOutlines utility across various components, and rename removeButtonOutline to removeFocusOutlines chore(Settings): Remove unused import and conditionally return null if conversation is falsy * feat(hooks): add useLocalize hook The useLocalize hook is added to the hooks/index.ts file. This hook allows for localization of phrases using the localize function from the ~/localization/Translation module. The hook uses the lang value from the store to determine the current language and returns a function that takes a phraseKey and optional values array as arguments and returns the localized phrase. * refactor(OptionHover.tsx): Update text keys for OptionHover component, use new hook: useLocalize * refactor(useDocumentTitle.ts): refactor to TS * fix(typescript): type issues and update typescript linting deps * refactor: Update ThemeContext and useOnClickOutside to TypeScript chore(useDidMountEffect.js): Remove useDidMountEffect hook * feat: GenerationButtons for stop/continue/regen, remove AdjustToneButton in favor of alternate advanced mode/Settings in OptionsBar * fix(EndpointOptionsPopover.tsx): change switchToSimpleMode function name to closePopover fix(GenerationButtons.tsx): change advancedMode prop name to showPopover fix(OptionsBar.tsx): change advancedMode state name to showPopover feat(OptionsBar.tsx): add logic to show/hide popover based on showPopover state fix(types.ts): change switchToSimpleMode function name to closePopover * chore: remove template button * chore(GenerationButtons.tsx): adjust positioning of the div element chore(Plugins.tsx): adjust width of the MultiSelectDropDown component chore(OptionsBar.tsx): adjust padding of the button element * refactor(EditPresetDialog): use new modular higher order components * chore(newoptionsbar.html): delete unused file newoptionsbar.html * refactor(EditPresetDialog): convert to TS * chore(babel.config.cjs): update babel configuration, linting * chore(EditPresetDialog.tsx): update className for DialogTemplate to include pb-0 chore(EndpointOptionsDialog.jsx): update className for DialogTemplate to include pb-0 chore(PopoverButtons.tsx): add buttonClass prop to PopoverButtons component chore(DialogTemplate.tsx): update className for the footer div to include h-auto chore(Dropdown.jsx): remove id prop from Dropdown component chore(mobile.css): update transition duration for .nav class from 0.2s to 0.15s * refactor(EditPresetDialog.tsx): simplify localization usage with hook * chore(EditPresetDialog.tsx): update containerClassName to include z-index value * fix(endpoints.ts): change type of endpointsConfig atom to TEndpointsConfig refactor(cleanupPreset.ts): convert to TS fix(index.ts): export cleanupPreset utility function fix(types.ts): add missing properties to TPreset type * refactor(EndpointOptionsDialog): convert to TS * fix(EditPresetDialog.tsx): - import cleanupPreset from index - add null check before submitting preset - add null check before exporting preset refactor(SaveAsPresetDialog.tsx): convert to TS fix(usePresetOptions.ts): import cleanupPreset from index fix(types.ts): - make title prop optional in EditPresetProps - change preset prop in CleanupPreset to be partial * chore: reorganize imports in App, EndpointMenu, Messages, and ExportModel components feat(ScreenshotContext.jsx): add ScreenshotContext to hooks/index chore(index.ts): export ThemeContext, ScreenshotContext, ApiErrorBoundaryContext hooks, cleanupPreset, and getIcon functions from utils * wip: add headerClassName for dialog template * chore(EndpointOptionsDialog.tsx): remove unused headerClassName prop chore(EndpointOptionsDialog.tsx): adjust height of main container in mobile and desktop view * fix(react-query-service.ts): change return type of useGetEndpointsQuery to QueryObserverResult<t.TEndpointsConfig> * refactor: imports from index and refactor to TS * refactor: refactor all svg components to TS * refactor: refactor all UI components to TS, remove unused component * fix(SelectDropDown.tsx): remove file extension from import statement for CheckMark component * fix: SaveAsPresetDialog typing issue * fix(OptionsBar): close popover when an endpoint with no settings is selected * chore(ChatGPT.tsx): update width of model select dropdown to 60px refactor(types.ts): decouple ModelSelectProps from SettingsProps * fix(popover Settings): space taken from the options menu for each endpoint * fix:'Set token first' element alignment, add padding to endpointmenu icon in mobile * style: match official site header * refactor(EndpointOptionsDialog): make functionality explicitly saving current convos as presets * fix(useLocalize.ts): change values parameter from an array to rest parameters * refactor(EndpointSettings): Utilize useLocalize hook for all endpoint settings * fix(Popover): correct spacing/center and remove focus outlines for close button * chore: employ use of cn (clsx) in Popover styles * chore(EditPresetDialog.tsx): update className to add padding bottom chore(EndpointOptionsDialog.tsx): update className to add padding bottom * style(EndpointMenu, TextChat): add better styling at diff. breakpoints * refactor(EndpointSettings): consolidate container style to higher order component * refactor(EditPresetDialog.tsx): pass custom style to Settings from here * style: setting dialogs improved in all views * style(EndpointMenu): improve UX for mobile * style(PresetDialog): increase height so scrollbar isn't triggered * chore(EditPresetDialog.tsx): update className to include xl height for DialogTemplate chore(InputNumber.tsx): update className to include max height for InputNumber component * fix: light mode styling * fix(OptionsBar/ScrollToBottom/Popover): quick fix to rework in future: hide scrollToBottom when Popover is open * style: remove bg-gradient around textarea in mobile view * chore(ThemeContext.tsx): refactor ThemeContext to use default context value, also fixes type issue * chore(EditPresetDialog.tsx): adjust grid layout in EditPresetDialog component * style(TextChat): make gradient more opaque/smoother * fix(TextChat.jsx): fix background gradient color based on theme and system preference * test(layout-test-utils.tsx): add mock implementation for window.matchMedia in test setup feat(layout-test-utils.tsx): add authConfig prop to AuthContextProvider in renderWithProvidersWrapper function chore(tsconfig.json): include test directory in tsconfig include section * chore(jest.config.cjs): update test file paths in jest configuration chore(Login.spec.tsx): update test file path in import statement chore(LoginForm.spec.tsx): update test file path in import statement chore(Registration.spec.tsx): update test file path in import statement chore(PluginAuthForm.spec.tsx): update test file path in import statement chore(PluginStoreDialog.spec.tsx): update test file path in import statement chore(layout-test-utils.tsx): move matchMedia mock to separate file chore(tsconfig.json): add path mapping for test files in client directory * test: add import for 'test/matchMedia.mock' in test files The changes in this commit add an import statement for 'test/matchMedia.mock' in multiple test files. This import is necessary for mocking the behavior of the matchMedia function during testing. * style(ClearConvosDialog): remove borders from button and modal, uniform button size * fix(AgentSettings.tsx): overlapping issue * fix(PresetDialogs): improve spacing of top row and dialog content * style(Settings): 2nd column will now dynamically adjust better across all screen sizes * style(ModelSelect): improve styling for mobile/desktop, add hover shadow feat(ModelSelect/Plugins): hide ModelSelect when screen is small * refactor(RowButton, buildTree): convert to TS * style(ModelSelect): add transition effect to shadows on hover
1 parent fb99e5a commit 956aa6c

File tree

203 files changed

+5058
-4323
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

203 files changed

+5058
-4323
lines changed

.eslintrc.js

+17-2
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ module.exports = {
4242
ignoreComments: true,
4343
},
4444
],
45-
'import/no-cycle': 'error',
4645
'linebreak-style': 0,
4746
curly: ['error', 'all'],
4847
semi: ['error', 'always'],
@@ -53,6 +52,8 @@ module.exports = {
5352
// "arrow-parens": [2, "as-needed", { requireForBlockBody: true }],
5453
// 'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
5554
'no-console': 'off',
55+
'import/no-cycle': 'error',
56+
'import/no-self-import': 'error',
5657
'import/extensions': 'off',
5758
'no-promise-executor-return': 'off',
5859
'no-param-reassign': 'off',
@@ -100,7 +101,7 @@ module.exports = {
100101
},
101102
},
102103
{
103-
files: '**/*.+(ts)',
104+
files: ['**/*.ts', '**/*.tsx'],
104105
parser: '@typescript-eslint/parser',
105106
parserOptions: {
106107
project: './client/tsconfig.json',
@@ -110,6 +111,9 @@ module.exports = {
110111
'plugin:@typescript-eslint/eslint-recommended',
111112
'plugin:@typescript-eslint/recommended',
112113
],
114+
rules: {
115+
'@typescript-eslint/no-explicit-any': 'error',
116+
},
113117
},
114118
{
115119
files: './packages/data-provider/**/*.ts',
@@ -132,5 +136,16 @@ module.exports = {
132136
fragment: 'Fragment', // Fragment to use (may be a property of <pragma>), default to "Fragment"
133137
version: 'detect', // React version. "detect" automatically picks the version you have installed.
134138
},
139+
'import/parsers': {
140+
'@typescript-eslint/parser': ['.ts', '.tsx'],
141+
},
142+
'import/resolver': {
143+
typescript: {
144+
project: ['./client/tsconfig.json'],
145+
},
146+
node: {
147+
project: ['./client/tsconfig.json'],
148+
},
149+
},
135150
},
136151
};

api/server/routes/ask/anthropic.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,10 @@ router.post('/', requireJwtAuth, async (req, res) => {
3232
token: req.body?.token ?? null,
3333
modelOptions: {
3434
model: req.body?.model ?? 'claude-1',
35-
temperature: req.body?.temperature ?? 0.7,
35+
temperature: req.body?.temperature ?? 1,
3636
maxOutputTokens: req.body?.maxOutputTokens ?? 1024,
3737
topP: req.body?.topP ?? 0.7,
38-
topK: req.body?.topK ?? 40,
38+
topK: req.body?.topK ?? 5,
3939
},
4040
};
4141

api/server/routes/endpoints.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,10 @@ router.get('/', async function (req, res) {
158158
}
159159
: false;
160160
const bingAI = process.env.BINGAI_TOKEN
161-
? { userProvide: process.env.BINGAI_TOKEN == 'user_provided' }
161+
? {
162+
availableModels: ['BingAI', 'Sydney'],
163+
userProvide: process.env.BINGAI_TOKEN == 'user_provided',
164+
}
162165
: false;
163166
const chatGPTBrowser = process.env.CHATGPT_TOKEN
164167
? {

api/server/routes/tokenizer.js

+1-4
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,9 @@ const requireJwtAuth = require('../../middleware/requireJwtAuth');
99
router.post('/', requireJwtAuth, async (req, res) => {
1010
try {
1111
const { arg } = req.body;
12-
13-
// console.log('context:', arg, req.body);
14-
// console.log(typeof req.body === 'object' ? { ...req.body, ...req.query } : req.query);
1512
const model = await load(registry[models['gpt-3.5-turbo']]);
1613
const encoder = new Tiktoken(model.bpe_ranks, model.special_tokens, model.pat_str);
17-
const tokens = encoder.encode(arg.text);
14+
const tokens = encoder.encode(arg?.text ?? arg);
1815
encoder.free();
1916
res.send({ count: tokens.length });
2017
} catch (e) {

client/babel.config.cjs

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
module.exports = {
22
presets: [
3-
["@babel/preset-env", { "targets": { "node": "current" } }], //compiling ES2015+ syntax
4-
['@babel/preset-react', {runtime: 'automatic'}],
5-
"@babel/preset-typescript"
3+
['@babel/preset-env', { 'targets': { 'node': 'current' } }], //compiling ES2015+ syntax
4+
['@babel/preset-react', { runtime: 'automatic' }],
5+
'@babel/preset-typescript',
66
],
77
/*
88
Babel's code transformations are enabled by applying plugins (or presets) to your configuration file.
99
*/
1010
plugins: [
11-
"@babel/plugin-transform-runtime",
11+
'@babel/plugin-transform-runtime',
1212
'babel-plugin-transform-import-meta',
1313
'babel-plugin-transform-vite-meta-env',
1414
'babel-plugin-replace-ts-export-assignment',
1515
[
16-
"babel-plugin-root-import",
16+
'babel-plugin-root-import',
1717
{
18-
"rootPathPrefix": "~/",
19-
"rootPathSuffix": "./src"
20-
}
21-
]
22-
]
23-
}
18+
'rootPathPrefix': '~/',
19+
'rootPathSuffix': './src',
20+
},
21+
],
22+
],
23+
};

client/jest.config.cjs

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ module.exports = {
2626
'\\.(css)$': 'identity-obj-proxy',
2727
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
2828
'jest-file-loader',
29-
'layout-test-utils': '<rootDir>/test/layout-test-utils',
29+
'^test/(.*)$': '<rootDir>/test/$1',
3030
'^~/(.*)$': '<rootDir>/src/$1',
3131
},
3232
restoreMocks: true,

client/postcss.config.cjs

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
module.exports = {
22
plugins: [
3-
require("postcss-import"),
4-
require("postcss-preset-env"),
5-
require("tailwindcss"),
6-
require("autoprefixer"),
7-
]
3+
require('postcss-import'),
4+
require('postcss-preset-env'),
5+
require('tailwindcss'),
6+
require('autoprefixer'),
7+
],
88
};

client/src/App.jsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1+
import { RecoilRoot } from 'recoil';
12
import { RouterProvider } from 'react-router-dom';
2-
import { ScreenshotProvider } from './utils/screenshotContext.jsx';
33
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
4-
import { RecoilRoot } from 'recoil';
54
import { QueryClient, QueryClientProvider, QueryCache } from '@tanstack/react-query';
6-
import { ThemeProvider } from './hooks/ThemeContext';
7-
import { useApiErrorBoundary } from './hooks/ApiErrorBoundaryContext';
5+
import { ScreenshotProvider, ThemeProvider, useApiErrorBoundary } from './hooks';
86
import { router } from './routes';
97

108
const App = () => {

client/src/components/Auth/__tests__/Login.spec.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { render, waitFor } from 'layout-test-utils';
1+
import { render, waitFor } from 'test/layout-test-utils';
22
import userEvent from '@testing-library/user-event';
33
import Login from '../Login';
44
import * as mockDataProvider from 'librechat-data-provider';

client/src/components/Auth/__tests__/LoginForm.spec.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { render } from 'layout-test-utils';
1+
import { render } from 'test/layout-test-utils';
22
import userEvent from '@testing-library/user-event';
33
import Login from '../LoginForm';
44

client/src/components/Auth/__tests__/Registration.spec.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { render, waitFor } from 'layout-test-utils';
1+
import { render, waitFor } from 'test/layout-test-utils';
22
import userEvent from '@testing-library/user-event';
33
import Registration from '../Registration';
44
import * as mockDataProvider from 'librechat-data-provider';

client/src/components/Endpoints/Anthropic/OptionHover.jsx

-24
This file was deleted.

0 commit comments

Comments
 (0)