feat: Implement Default Preset Selection for Conversations 📌 (#1275)

* fix: type issues with icons

* refactor: use react query for presets, show toasts on preset crud, refactor mutations, remove presetsQuery from Root (breaking change)

* refactor: change preset titling

* refactor: update preset schemas and methods for necessary new properties `order` and `defaultPreset`

* feat: add `defaultPreset` Recoil value

* refactor(getPresetTitle): make logic cleaner and more concise

* feat: complete UI portion of defaultPreset feature, with animations added to preset items

* chore: remove console.logs()

* feat: complete default preset handling

* refactor: remove user sensitive values on logout

* fix: allow endpoint selection without default preset overwriting
This commit is contained in:
Danny Avila 2023-12-06 14:00:15 -05:00 committed by GitHub
parent fdb65366d7
commit ca64efec1b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 681 additions and 270 deletions

View file

@ -1,10 +1,6 @@
import axios from 'axios';
import filenamify from 'filenamify';
import { useSetRecoilState } from 'recoil';
import exportFromJSON from 'export-from-json';
import { useRecoilState } from 'recoil';
import { useGetEndpointsQuery } from 'librechat-data-provider';
import type { TEditPresetProps } from '~/common';
import { cn, defaultTextProps, removeFocusOutlines, cleanupPreset, mapEndpoints } from '~/utils';
import { cn, defaultTextProps, removeFocusOutlines, mapEndpoints } from '~/utils';
import { Input, Label, Dropdown, Dialog, DialogClose, DialogButton } from '~/components/';
import PopoverButtons from '~/components/Endpoints/PopoverButtons';
import DialogTemplate from '~/components/ui/DialogTemplate';
@ -13,42 +9,21 @@ import { EndpointSettings } from '~/components/Endpoints';
import { useChatContext } from '~/Providers';
import store from '~/store';
const EditPresetDialog = ({ open, onOpenChange, title }: Omit<TEditPresetProps, 'preset'>) => {
const EditPresetDialog = ({
exportPreset,
submitPreset,
}: {
exportPreset: () => void;
submitPreset: () => void;
}) => {
const localize = useLocalize();
const { preset } = useChatContext();
const { setOption } = useSetIndexOptions(preset);
const [presetModalVisible, setPresetModalVisible] = useRecoilState(store.presetModalVisible);
// TODO: use React Query for presets data
const setPresets = useSetRecoilState(store.presets);
const { data: availableEndpoints = [] } = useGetEndpointsQuery({
select: mapEndpoints,
});
const { setOption } = useSetIndexOptions(preset);
const localize = useLocalize();
const submitPreset = () => {
if (!preset) {
return;
}
axios({
method: 'post',
url: '/api/presets',
data: cleanupPreset({ preset }),
withCredentials: true,
}).then((res) => {
setPresets(res?.data);
});
};
const exportPreset = () => {
if (!preset) {
return;
}
const fileName = filenamify(preset?.title || 'preset');
exportFromJSON({
data: cleanupPreset({ preset }),
fileName,
exportType: exportFromJSON.types.json,
});
};
const { endpoint } = preset || {};
if (!endpoint) {
@ -56,9 +31,9 @@ const EditPresetDialog = ({ open, onOpenChange, title }: Omit<TEditPresetProps,
}
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<Dialog open={presetModalVisible} onOpenChange={setPresetModalVisible}>
<DialogTemplate
title={`${title || localize('com_ui_edit') + ' ' + localize('com_endpoint_preset')} - ${
title={`${localize('com_ui_edit') + ' ' + localize('com_endpoint_preset')} - ${
preset?.title
}`}
className="h-full max-w-full overflow-y-auto pb-4 sm:w-[680px] sm:pb-0 md:h-[720px] md:w-[750px] md:overflow-y-hidden lg:w-[950px] xl:h-[720px]"