From 173b8ce2da00c18958dd3ff166f641256eae2ef4 Mon Sep 17 00:00:00 2001 From: Anirudh <70373803+techwithanirudh@users.noreply.github.com> Date: Sat, 5 Aug 2023 19:54:56 +0530 Subject: [PATCH 1/2] feat: Add SearchBar component to Nav (#760) * feat: Add SearchBar component to Nav This commit adds the SearchBar component to the navigation bar in order to enable search functionality. Now users can easily search for specific items within the navigation. * Refactor Nav and SearchBar components The commit refactors the Nav component by moving the SearchBar component within the Nav component. This change ensures that the SearchBar is rendered only when the isSearchEnabled condition is true. In addition, the commit also modifies the styling of the SearchBar component by adding rounded corners and border to enhance the visual appearance. * Update gitignore * C Refactor search bar styles This commit refactors the styles of the search bar component in the Nav component. The border color and hover background color have been modified to improve the visual appearance. * Fix margin * Rename Logout.jsx to Logout.tsx and update import statements accordingly. Replace the use of Recoil and store with useLocalize hook for localization. Update the usage of localize function by removing the lang parameter. --- .gitignore | 1 + .../components/Nav/{Logout.jsx => Logout.tsx} | 11 ++++------- client/src/components/Nav/Nav.tsx | 6 ++++-- client/src/components/Nav/NavLinks.jsx | 18 ++---------------- client/src/components/Nav/NewChat.jsx | 2 +- client/src/components/Nav/SearchBar.jsx | 2 +- 6 files changed, 13 insertions(+), 27 deletions(-) rename client/src/components/Nav/{Logout.jsx => Logout.tsx} (61%) diff --git a/.gitignore b/.gitignore index 711c8b0cc3..cedb6ac0ad 100644 --- a/.gitignore +++ b/.gitignore @@ -71,6 +71,7 @@ junit.xml # meilisearch meilisearch +meilisearch.exe data.ms/* auth.json diff --git a/client/src/components/Nav/Logout.jsx b/client/src/components/Nav/Logout.tsx similarity index 61% rename from client/src/components/Nav/Logout.jsx rename to client/src/components/Nav/Logout.tsx index f0e8e4751d..7d97e5a003 100644 --- a/client/src/components/Nav/Logout.jsx +++ b/client/src/components/Nav/Logout.tsx @@ -1,13 +1,11 @@ import { forwardRef } from 'react'; import { LogOutIcon } from '../svg'; import { useAuthContext } from '~/hooks/AuthContext'; -import { useRecoilValue } from 'recoil'; -import store from '~/store'; -import { localize } from '~/localization/Translation'; +import { useLocalize } from '~/hooks'; const Logout = forwardRef(() => { - const { user, logout } = useAuthContext(); - const lang = useRecoilValue(store.lang); + const { logout } = useAuthContext(); + const localize = useLocalize(); const handleLogout = () => { logout(); @@ -20,8 +18,7 @@ const Logout = forwardRef(() => { onClick={handleLogout} > - {user?.username || localize(lang, 'com_nav_user')} - {localize(lang, 'com_nav_log_out')} + {localize('com_nav_log_out')} ); }); diff --git a/client/src/components/Nav/Nav.tsx b/client/src/components/Nav/Nav.tsx index 97cd37e792..00c7eab91c 100644 --- a/client/src/components/Nav/Nav.tsx +++ b/client/src/components/Nav/Nav.tsx @@ -7,6 +7,7 @@ import { import { useCallback, useEffect, useRef, useState } from 'react'; import { useRecoilValue, useSetRecoilState } from 'recoil'; import NewChat from './NewChat'; +import SearchBar from './SearchBar'; import NavLinks from './NavLinks'; import { Panel, Spinner } from '~/components'; import { Conversations, Pages } from '../Conversations'; @@ -166,7 +167,7 @@ export default function Nav({ navVisible, setNavVisible }) {
diff --git a/client/src/components/Nav/NavLinks.jsx b/client/src/components/Nav/NavLinks.jsx index 6d5bd81332..bdb15ea9e1 100644 --- a/client/src/components/Nav/NavLinks.jsx +++ b/client/src/components/Nav/NavLinks.jsx @@ -2,20 +2,19 @@ import { Download } from 'lucide-react'; import { useRecoilValue } from 'recoil'; import { Fragment, useState } from 'react'; import { Menu, Transition } from '@headlessui/react'; -import SearchBar from './SearchBar'; import ClearConvos from './ClearConvos'; import Settings from './Settings'; import NavLink from './NavLink'; import Logout from './Logout'; import { ExportModel } from './ExportConversation'; -import { LinkIcon, DotsIcon, GearIcon, TrashIcon } from '~/components'; +import { LinkIcon, DotsIcon, GearIcon } from '~/components'; import { localize } from '~/localization/Translation'; import { useAuthContext } from '~/hooks/AuthContext'; import { cn } from '~/utils/'; import store from '~/store'; -export default function NavLinks({ clearSearch, isSearchEnabled }) { +export default function NavLinks() { const [showExports, setShowExports] = useState(false); const [showClearConvos, setShowClearConvos] = useState(false); const [showSettings, setShowSettings] = useState(false); @@ -76,11 +75,6 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) { leaveTo="transform opacity-0 scale-95" > - {isSearchEnabled && ( - - - - )}
- - } - text={localize(lang, 'com_nav_clear_conversation')} - clickHandler={() => setShowClearConvos(true)} - /> - { return (
{} Date: Sat, 5 Aug 2023 12:10:36 -0400 Subject: [PATCH 2/2] refactor(types): use zod for better type safety, style(Messages): new scroll behavior, style(Buttons): match ChatGPT (#761) * feat: add zod schemas for better type safety * refactor(useSetOptions): remove 'as Type' in favor of zod schema * fix: descendant console error, change

tag to

tag for content in PluginTooltip component * style(MessagesView): instant/snappier scroll behavior matching official site * fix(Messages): add null check for scrollableRef before accessing its properties in handleScroll and useEffect * fix(messageSchema.js): change type of invocationId from string to number fix(schemas.ts): make authenticated property in tPluginSchema optional fix(schemas.ts): make isButton property in tPluginSchema optional fix(schemas.ts): make messages property in tConversationSchema optional and change its type to array of strings fix(schemas.ts): make systemMessage property in tConversationSchema nullable and optional fix(schemas.ts): make modelLabel property in tConversationSchema nullable and optional fix(schemas.ts): make chatGptLabel property in tConversationSchema nullable and optional fix(schemas.ts): make promptPrefix property in tConversationSchema nullable and optional fix(schemas.ts): make context property in tConversationSchema nullable and optional fix(schemas.ts): make jailbreakConversationId property in tConversationSchema nullable and optional fix(schemas.ts): make conversationSignature property in tConversationSchema nullable and optional fix(schemas.ts): make clientId property * refactor(types): replace main types with zod schemas and inferred types * refactor(types/schemas): use schemas for better type safety of main types * style(ModelSelect/Buttons): remove shadow and transition * style(ModelSelect): button changes to closer match OpenAI * style(ModelSelect): remove green rings which flicker * style(scrollToBottom): add two separate scrolling functions * fix(OptionsBar.tsx): handle onFocus and onBlur events to update opacityClass fix(Messages/index.jsx): increase debounce time for scrollIntoView function --- api/models/schema/messageSchema.js | 2 +- .../Endpoints/EndpointOptionsDialog.tsx | 13 +- .../Endpoints/SaveAsPresetDialog.tsx | 4 +- .../Endpoints/Settings/Examples.tsx | 4 +- .../Input/ModelSelect/Anthropic.tsx | 2 +- .../components/Input/ModelSelect/BingAI.tsx | 6 +- .../components/Input/ModelSelect/ChatGPT.tsx | 2 +- .../components/Input/ModelSelect/Google.tsx | 2 +- .../components/Input/ModelSelect/OpenAI.tsx | 2 +- .../components/Input/ModelSelect/Plugins.tsx | 16 +-- client/src/components/Input/OptionsBar.tsx | 21 ++- client/src/components/Messages/index.jsx | 21 ++- .../Plugins/Store/PluginStoreDialog.tsx | 13 +- .../Plugins/Store/PluginTooltip.tsx | 4 +- client/src/components/ui/Dropdown.jsx | 2 +- .../src/components/ui/MultiSelectDropDown.tsx | 2 +- client/src/components/ui/SelectDropDown.tsx | 2 +- client/src/components/ui/Tabs.tsx | 6 +- client/src/hooks/usePresetOptions.ts | 100 ++++++------- client/src/hooks/useSetOptions.ts | 78 +++++----- client/src/utils/cleanupPreset.ts | 6 +- client/src/utils/index.ts | 2 +- e2e/setup/authenticate.ts | 4 + package-lock.json | 6 +- packages/data-provider/package.json | 5 +- packages/data-provider/src/createPayload.ts | 5 +- packages/data-provider/src/data-service.ts | 15 +- .../data-provider/src/react-query-service.ts | 45 +++--- packages/data-provider/src/schemas.ts | 121 ++++++++++++++++ packages/data-provider/src/types.ts | 135 +----------------- 30 files changed, 329 insertions(+), 317 deletions(-) create mode 100644 packages/data-provider/src/schemas.ts diff --git a/api/models/schema/messageSchema.js b/api/models/schema/messageSchema.js index 6c0c1490a8..792b2d545a 100644 --- a/api/models/schema/messageSchema.js +++ b/api/models/schema/messageSchema.js @@ -25,7 +25,7 @@ const messageSchema = mongoose.Schema( type: String, }, invocationId: { - type: String, + type: Number, }, parentMessageId: { type: String, diff --git a/client/src/components/Endpoints/EndpointOptionsDialog.tsx b/client/src/components/Endpoints/EndpointOptionsDialog.tsx index 79050829e9..ff3efc51a7 100644 --- a/client/src/components/Endpoints/EndpointOptionsDialog.tsx +++ b/client/src/components/Endpoints/EndpointOptionsDialog.tsx @@ -1,7 +1,7 @@ import exportFromJSON from 'export-from-json'; import { useEffect, useState } from 'react'; import { useRecoilValue, useRecoilState } from 'recoil'; -import { EditPresetProps, SetOption, TPreset } from 'librechat-data-provider'; +import { EditPresetProps, SetOption, tPresetSchema } from 'librechat-data-provider'; import { Dialog, DialogButton } from '~/components/ui'; import DialogTemplate from '~/components/ui/DialogTemplate'; import SaveAsPresetDialog from './SaveAsPresetDialog'; @@ -21,12 +21,11 @@ const EndpointOptionsDialog = ({ open, onOpenChange, preset: _preset, title }: E const setOption: SetOption = (param) => (newValue) => { const update = {}; update[param] = newValue; - setPreset( - (prevState) => - ({ - ...prevState, - ...update, - } as TPreset), + setPreset((prevState) => + tPresetSchema.parse({ + ...prevState, + ...update, + }), ); }; diff --git a/client/src/components/Endpoints/SaveAsPresetDialog.tsx b/client/src/components/Endpoints/SaveAsPresetDialog.tsx index b9b81fb846..cd9f535f4e 100644 --- a/client/src/components/Endpoints/SaveAsPresetDialog.tsx +++ b/client/src/components/Endpoints/SaveAsPresetDialog.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import { useRecoilValue } from 'recoil'; -import { useCreatePresetMutation, EditPresetProps, TPreset } from 'librechat-data-provider'; +import { useCreatePresetMutation, EditPresetProps } from 'librechat-data-provider'; import { Dialog, Input, Label } from '~/components/ui/'; import DialogTemplate from '~/components/ui/DialogTemplate'; import { cn, defaultTextPropsLabel, removeFocusOutlines, cleanupPreset } from '~/utils/'; @@ -20,7 +20,7 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }: EditPresetProps) => title, }, endpointsConfig, - }) as TPreset; + }); createPresetMutation.mutate(_preset); }; diff --git a/client/src/components/Endpoints/Settings/Examples.tsx b/client/src/components/Endpoints/Settings/Examples.tsx index fd737bfd56..ee697f75be 100644 --- a/client/src/components/Endpoints/Settings/Examples.tsx +++ b/client/src/components/Endpoints/Settings/Examples.tsx @@ -68,14 +68,14 @@ function Examples({ readonly, examples, setExample, addExample, removeExample }: