LibreChat/packages/data-provider/src/react-query-service.ts
Danny Avila 5828200197
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
2023-08-05 12:10:36 -04:00

363 lines
9.5 KiB
TypeScript

import {
UseQueryOptions,
useQuery,
useMutation,
useQueryClient,
UseMutationResult,
QueryObserverResult,
} from '@tanstack/react-query';
import * as t from './types';
import * as s from './schemas';
import * as dataService from './data-service';
export enum QueryKeys {
messages = 'messsages',
allConversations = 'allConversations',
conversation = 'conversation',
searchEnabled = 'searchEnabled',
user = 'user',
endpoints = 'endpoints',
presets = 'presets',
searchResults = 'searchResults',
tokenCount = 'tokenCount',
availablePlugins = 'availablePlugins',
startupConfig = 'startupConfig',
}
export const useAbortRequestWithMessage = (): UseMutationResult<
void,
Error,
{ endpoint: string; abortKey: string; message: string }
> => {
return useMutation(({ endpoint, abortKey, message }) =>
dataService.abortRequestWithMessage(endpoint, abortKey, message),
);
};
export const useGetUserQuery = (
config?: UseQueryOptions<t.TUser>,
): QueryObserverResult<t.TUser> => {
return useQuery<t.TUser>([QueryKeys.user], () => dataService.getUser(), {
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
retry: false,
...config,
});
};
export const useGetMessagesByConvoId = (
id: string,
config?: UseQueryOptions<s.TMessage[]>,
): QueryObserverResult<s.TMessage[]> => {
return useQuery<s.TMessage[]>(
[QueryKeys.messages, id],
() => dataService.getMessagesByConvoId(id),
{
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
...config,
},
);
};
export const useGetConversationByIdQuery = (
id: string,
config?: UseQueryOptions<s.TConversation>,
): QueryObserverResult<s.TConversation> => {
return useQuery<s.TConversation>(
[QueryKeys.conversation, id],
() => dataService.getConversationById(id),
{
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
...config,
},
);
};
//This isn't ideal because its just a query and we're using mutation, but it was the only way
//to make it work with how the Chat component is structured
export const useGetConversationByIdMutation = (id: string): UseMutationResult<s.TConversation> => {
const queryClient = useQueryClient();
return useMutation(() => dataService.getConversationById(id), {
// onSuccess: (res: s.TConversation) => {
onSuccess: () => {
queryClient.invalidateQueries([QueryKeys.conversation, id]);
},
});
};
export const useUpdateConversationMutation = (
id: string,
): UseMutationResult<
t.TUpdateConversationResponse,
unknown,
t.TUpdateConversationRequest,
unknown
> => {
const queryClient = useQueryClient();
return useMutation(
(payload: t.TUpdateConversationRequest) => dataService.updateConversation(payload),
{
onSuccess: () => {
queryClient.invalidateQueries([QueryKeys.conversation, id]);
queryClient.invalidateQueries([QueryKeys.allConversations]);
},
},
);
};
export const useDeleteConversationMutation = (
id?: string,
): UseMutationResult<
t.TDeleteConversationResponse,
unknown,
t.TDeleteConversationRequest,
unknown
> => {
const queryClient = useQueryClient();
return useMutation(
(payload: t.TDeleteConversationRequest) => dataService.deleteConversation(payload),
{
onSuccess: () => {
queryClient.invalidateQueries([QueryKeys.conversation, id]);
queryClient.invalidateQueries([QueryKeys.allConversations]);
},
},
);
};
export const useClearConversationsMutation = (): UseMutationResult<unknown> => {
const queryClient = useQueryClient();
return useMutation(() => dataService.clearAllConversations(), {
onSuccess: () => {
queryClient.invalidateQueries([QueryKeys.allConversations]);
},
});
};
export const useGetConversationsQuery = (
pageNumber: string,
config?: UseQueryOptions<t.TGetConversationsResponse>,
): QueryObserverResult<t.TGetConversationsResponse> => {
return useQuery<t.TGetConversationsResponse>(
[QueryKeys.allConversations, pageNumber],
() => dataService.getConversations(pageNumber),
{
refetchOnReconnect: false,
refetchOnMount: false,
retry: 1,
...config,
},
);
};
export const useGetSearchEnabledQuery = (
config?: UseQueryOptions<boolean>,
): QueryObserverResult<boolean> => {
return useQuery<boolean>([QueryKeys.searchEnabled], () => dataService.getSearchEnabled(), {
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
...config,
});
};
export const useGetEndpointsQuery = (): QueryObserverResult<t.TEndpointsConfig> => {
return useQuery([QueryKeys.endpoints], () => dataService.getAIEndpoints(), {
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
});
};
export const useCreatePresetMutation = (): UseMutationResult<
s.TPreset[],
unknown,
s.TPreset,
unknown
> => {
const queryClient = useQueryClient();
return useMutation((payload: s.TPreset) => dataService.createPreset(payload), {
onSuccess: () => {
queryClient.invalidateQueries([QueryKeys.presets]);
},
});
};
export const useUpdatePresetMutation = (): UseMutationResult<
s.TPreset[],
unknown,
s.TPreset,
unknown
> => {
const queryClient = useQueryClient();
return useMutation((payload: s.TPreset) => dataService.updatePreset(payload), {
onSuccess: () => {
queryClient.invalidateQueries([QueryKeys.presets]);
},
});
};
export const useGetPresetsQuery = (
config?: UseQueryOptions<s.TPreset[]>,
): QueryObserverResult<s.TPreset[], unknown> => {
return useQuery<s.TPreset[]>([QueryKeys.presets], () => dataService.getPresets(), {
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
...config,
});
};
export const useDeletePresetMutation = (): UseMutationResult<
s.TPreset[],
unknown,
s.TPreset | object,
unknown
> => {
const queryClient = useQueryClient();
return useMutation((payload: s.TPreset | object) => dataService.deletePreset(payload), {
onSuccess: () => {
queryClient.invalidateQueries([QueryKeys.presets]);
},
});
};
export const useSearchQuery = (
searchQuery: string,
pageNumber: string,
config?: UseQueryOptions<t.TSearchResults>,
): QueryObserverResult<t.TSearchResults> => {
return useQuery<t.TSearchResults>(
[QueryKeys.searchResults, pageNumber, searchQuery],
() => dataService.searchConversations(searchQuery, pageNumber),
{
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
...config,
},
);
};
export const useUpdateTokenCountMutation = (): UseMutationResult<
t.TUpdateTokenCountResponse,
unknown,
{ text: string },
unknown
> => {
const queryClient = useQueryClient();
return useMutation(({ text }: { text: string }) => dataService.updateTokenCount(text), {
onSuccess: () => {
queryClient.invalidateQueries([QueryKeys.tokenCount]);
},
});
};
export const useLoginUserMutation = (): UseMutationResult<
t.TLoginResponse,
unknown,
t.TLoginUser,
unknown
> => {
const queryClient = useQueryClient();
return useMutation((payload: t.TLoginUser) => dataService.login(payload), {
onSuccess: () => {
queryClient.invalidateQueries([QueryKeys.user]);
},
});
};
export const useRegisterUserMutation = (): UseMutationResult<
unknown,
unknown,
t.TRegisterUser,
unknown
> => {
const queryClient = useQueryClient();
return useMutation((payload: t.TRegisterUser) => dataService.register(payload), {
onSuccess: () => {
queryClient.invalidateQueries([QueryKeys.user]);
},
});
};
export const useLogoutUserMutation = (): UseMutationResult<unknown> => {
const queryClient = useQueryClient();
return useMutation(() => dataService.logout(), {
onSuccess: () => {
queryClient.invalidateQueries([QueryKeys.user]);
},
});
};
export const useRefreshTokenMutation = (): UseMutationResult<
t.TRefreshTokenResponse,
unknown,
unknown,
unknown
> => {
return useMutation(() => dataService.refreshToken(), {});
};
export const useRequestPasswordResetMutation = (): UseMutationResult<
t.TRequestPasswordResetResponse,
unknown,
t.TRequestPasswordReset,
unknown
> => {
return useMutation((payload: t.TRequestPasswordReset) =>
dataService.requestPasswordReset(payload),
);
};
export const useResetPasswordMutation = (): UseMutationResult<
unknown,
unknown,
t.TResetPassword,
unknown
> => {
return useMutation((payload: t.TResetPassword) => dataService.resetPassword(payload));
};
export const useAvailablePluginsQuery = (): QueryObserverResult<s.TPlugin[]> => {
return useQuery<s.TPlugin[]>(
[QueryKeys.availablePlugins],
() => dataService.getAvailablePlugins(),
{
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
},
);
};
export const useUpdateUserPluginsMutation = (): UseMutationResult<
t.TUser,
unknown,
t.TUpdateUserPlugins,
unknown
> => {
const queryClient = useQueryClient();
return useMutation((payload: t.TUpdateUserPlugins) => dataService.updateUserPlugins(payload), {
onSuccess: () => {
queryClient.invalidateQueries([QueryKeys.user]);
},
});
};
export const useGetStartupConfig = (): QueryObserverResult<t.TStartupConfig> => {
return useQuery<t.TStartupConfig>(
[QueryKeys.startupConfig],
() => dataService.getStartupConfig(),
{
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
},
);
};