Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-20 10:20:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

refactor(types): use zod for better type safety, style(Messages): new scroll behavior, style(Buttons): match ChatGPT (#761)

Browse source 
* feat: add zod schemas for better type safety

* refactor(useSetOptions): remove 'as Type' in favor of zod schema

* fix: descendant console error, change <p> tag to <div> 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
This commit is contained in:
Danny Avila 2023-08-05 12:10:36 -04:00 • committed by GitHub
parent 173b8ce2da
commit 5828200197
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 329 additions and 317 deletions
Download patch file Download diff file Expand all files Collapse all files

21
client/src/components/Messages/index.jsx
View file

@ -28,6 +28,9 @@ export default function Messages({ isSearchView = false }) {
const { screenshotTargetRef } = useScreenshot();
const handleScroll = () => {
if (!scrollableRef.current) {
return;
}
const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
const diff = Math.abs(scrollHeight - scrollTop);
const percent = Math.abs(clientHeight - diff) / clientHeight;
@ -40,6 +43,9 @@ export default function Messages({ isSearchView = false }) {
useEffect(() => {
const timeoutId = setTimeout(() => {
if (!scrollableRef.current) {
return;
}
const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
const diff = Math.abs(scrollHeight - scrollTop);
const percent = Math.abs(clientHeight - diff) / clientHeight;
@ -58,6 +64,19 @@ export default function Messages({ isSearchView = false }) {
// eslint-disable-next-line react-hooks/exhaustive-deps
const scrollToBottom = useCallback(
throttle(
() => {
messagesEndRef.current?.scrollIntoView({ behavior: 'instant' });
setShowScrollButton(false);
},
450,
{ leading: true },
),
[messagesEndRef],
);
// eslint-disable-next-line react-hooks/exhaustive-deps
const scrollToBottomSmooth = useCallback(
throttle(
() => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
@ -77,7 +96,7 @@ export default function Messages({ isSearchView = false }) {
const scrollHandler = (e) => {
e.preventDefault();
scrollToBottom();
scrollToBottomSmooth();
};
return (