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 <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

View file

@ -4,6 +4,7 @@ import {
SetOption,
SetExample,
TPlugin,
tConversationSchema,
} from 'librechat-data-provider';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import usePresetOptions from './usePresetOptions';
@ -23,12 +24,11 @@ const useSetOptions: UseSetOptions = (preset = false) => {
const setOption: SetOption = (param) => (newValue) => {
const update = {};
update[param] = newValue;
setConversation(
(prevState) =>
({
...prevState,
...update,
} as TConversation),
setConversation((prevState) =>
tConversationSchema.parse({
...prevState,
...update,
}),
);
};
@ -39,12 +39,11 @@ const useSetOptions: UseSetOptions = (preset = false) => {
currentExample[type] = { content: newValue };
current[i] = currentExample;
update['examples'] = current;
setConversation(
(prevState) =>
({
...prevState,
...update,
} as TConversation),
setConversation((prevState) =>
tConversationSchema.parse({
...prevState,
...update,
}),
);
};
@ -53,12 +52,11 @@ const useSetOptions: UseSetOptions = (preset = false) => {
const current = conversation?.examples?.slice() || [];
current.push({ input: { content: '' }, output: { content: '' } });
update['examples'] = current;
setConversation(
(prevState) =>
({
...prevState,
...update,
} as TConversation),
setConversation((prevState) =>
tConversationSchema.parse({
...prevState,
...update,
}),
);
};
@ -67,23 +65,21 @@ const useSetOptions: UseSetOptions = (preset = false) => {
const current = conversation?.examples?.slice() || [];
if (current.length <= 1) {
update['examples'] = [{ input: { content: '' }, output: { content: '' } }];
setConversation(
(prevState) =>
({
...prevState,
...update,
} as TConversation),
setConversation((prevState) =>
tConversationSchema.parse({
...prevState,
...update,
}),
);
return;
}
current.pop();
update['examples'] = current;
setConversation(
(prevState) =>
({
...prevState,
...update,
} as TConversation),
setConversation((prevState) =>
tConversationSchema.parse({
...prevState,
...update,
}),
);
};
@ -101,12 +97,11 @@ const useSetOptions: UseSetOptions = (preset = false) => {
const convo = JSON.parse(editableConvo);
const { agentOptions } = convo;
agentOptions[param] = newValue;
setConversation(
(prevState) =>
({
...prevState,
agentOptions,
} as TConversation),
setConversation((prevState) =>
tConversationSchema.parse({
...prevState,
agentOptions,
}),
);
};
@ -128,12 +123,11 @@ const useSetOptions: UseSetOptions = (preset = false) => {
}
localStorage.setItem('lastSelectedTools', JSON.stringify(update['tools']));
setConversation(
(prevState) =>
({
...prevState,
...update,
} as TConversation),
setConversation((prevState) =>
tConversationSchema.parse({
...prevState,
...update,
}),
);
};