LibreChat/packages/data-provider/src/react-query-service.ts
Danny Avila 317cdd3f77
feat: Vision Support + New UI (#1203)
* feat: add timer duration to showToast, show toast for preset selection

* refactor: replace old /chat/ route with /c/. e2e tests will fail here

* refactor: move typedefs to root of /api/ and add a few to assistant types in TS

* refactor: reorganize data-provider imports, fix dependency cycle, strategize new plan to separate react dependent packages

* feat: add dataService for uploading images

* feat(data-provider): add mutation keys

* feat: file resizing and upload

* WIP: initial API image handling

* fix: catch JSON.parse of localStorage tools

* chore: experimental: use module-alias for absolute imports

* refactor: change temp_file_id strategy

* fix: updating files state by using Map and defining react query callbacks in a way that keeps them during component unmount, initial delete handling

* feat: properly handle file deletion

* refactor: unexpose complete filepath and resize from server for higher fidelity

* fix: make sure resized height, width is saved, catch bad requests

* refactor: use absolute imports

* fix: prevent setOptions from being called more than once for OpenAIClient, made note to fix for PluginsClient

* refactor: import supportsFiles and models vars from schemas

* fix: correctly replace temp file id

* refactor(BaseClient): use absolute imports, pass message 'opts' to buildMessages method, count tokens for nested objects/arrays

* feat: add validateVisionModel to determine if model has vision capabilities

* chore(checkBalance): update jsdoc

* feat: formatVisionMessage: change message content format dependent on role and image_urls passed

* refactor: add usage to File schema, make create and updateFile, correctly set and remove TTL

* feat: working vision support
TODO: file size, type, amount validations, making sure they are styled right, and making sure you can add images from the clipboard/dragging

* feat: clipboard support for uploading images

* feat: handle files on drop to screen, refactor top level view code to Presentation component so the useDragHelpers hook  has ChatContext

* fix(Images): replace uploaded images in place

* feat: add filepath validation to protect sensitive files

* fix: ensure correct file_ids are push and not the Map key values

* fix(ToastContext): type issue

* feat: add basic file validation

* fix(useDragHelpers): correct context issue with `files` dependency

* refactor: consolidate setErrors logic to setError

* feat: add dialog Image overlay on image click

* fix: close endpoints menu on click

* chore: set detail to auto, make note for configuration

* fix: react warning (button desc. of button)

* refactor: optimize filepath handling, pass file_ids to images for easier re-use

* refactor: optimize image file handling, allow re-using files in regen, pass more file metadata in messages

* feat: lazy loading images including use of upload preview

* fix: SetKeyDialog closing, stopPropagation on Dialog content click

* style(EndpointMenuItem): tighten up the style, fix dark theme showing in lightmode, make menu more ux friendly

* style: change maxheight of all settings textareas to 138px from 300px

* style: better styling for textarea and enclosing buttons

* refactor(PresetItems): swap back edit and delete icons

* feat: make textarea placeholder dynamic to endpoint

* style: show user hover buttons only on hover when message is streaming

* fix: ordered list not going past 9, fix css

* feat: add User/AI labels; style: hide loading spinner

* feat: add back custom footer, change original footer text

* feat: dynamic landing icons based on endpoint

* chore: comment out assistants route

* fix: autoScroll to newest on /c/ view

* fix: Export Conversation on new UI

* style: match message style of official more closely

* ci: fix api jest unit tests, comment out e2e tests for now as they will fail until addressed

* feat: more file validation and use blob in preview field, not filepath, to fix temp deletion

* feat: filefilter for multer

* feat: better AI labels based on custom name, model, and endpoint instead of  `ChatGPT`
2023-11-21 20:12:48 -05:00

494 lines
13 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';
import request from './request';
import { QueryKeys } from './keys';
export const useAbortRequestWithMessage = (): UseMutationResult<
void,
Error,
{ endpoint: string; abortKey: string; message: string }
> => {
const queryClient = useQueryClient();
return useMutation(
({ endpoint, abortKey, message }) =>
dataService.abortRequestWithMessage(endpoint, abortKey, message),
{
onSuccess: () => {
queryClient.invalidateQueries([QueryKeys.balance]);
},
},
);
};
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 = <TData = s.TMessage[]>(
id: string,
config?: UseQueryOptions<s.TMessage[], unknown, TData>,
): QueryObserverResult<TData> => {
return useQuery<s.TMessage[], unknown, TData>(
[QueryKeys.messages, id],
() => dataService.getMessagesByConvoId(id),
{
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
...config,
},
);
};
export const useGetUserBalance = (
config?: UseQueryOptions<string>,
): QueryObserverResult<string> => {
return useQuery<string>([QueryKeys.balance], () => dataService.getUserBalance(), {
refetchOnWindowFocus: true,
refetchOnReconnect: true,
refetchOnMount: true,
...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,
},
);
};
/* like above, but first try the convos query data */
export const useGetConvoIdQuery = (
id: string,
config?: UseQueryOptions<s.TConversation>,
): QueryObserverResult<s.TConversation> => {
const queryClient = useQueryClient();
return useQuery<s.TConversation>(
[QueryKeys.conversation, id],
() => {
const defaultQuery = () => dataService.getConversationById(id);
const convosQueryKey = [QueryKeys.allConversations, { pageNumber: '1', active: true }];
const convosQuery = queryClient.getQueryData<t.TGetConversationsResponse>(convosQueryKey);
if (!convosQuery) {
return defaultQuery();
}
const convo = convosQuery.conversations?.find((c) => c.conversationId === id);
if (convo) {
return convo;
}
return defaultQuery();
},
{
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 useUpdateMessageMutation = (
id: string,
): UseMutationResult<unknown, unknown, t.TUpdateMessageRequest, unknown> => {
const queryClient = useQueryClient();
return useMutation((payload: t.TUpdateMessageRequest) => dataService.updateMessage(payload), {
onSuccess: () => {
queryClient.invalidateQueries([QueryKeys.messages, id]);
},
});
};
export const useUpdateUserKeysMutation = (): UseMutationResult<
t.TUser,
unknown,
t.TUpdateUserKeyRequest,
unknown
> => {
const queryClient = useQueryClient();
return useMutation((payload: t.TUpdateUserKeyRequest) => dataService.updateUserKey(payload), {
onSuccess: () => {
queryClient.invalidateQueries([QueryKeys.name]);
},
});
};
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 useRevokeUserKeyMutation = (name: string): UseMutationResult<unknown> => {
const queryClient = useQueryClient();
return useMutation(() => dataService.revokeUserKey(name), {
onSuccess: () => {
queryClient.invalidateQueries([QueryKeys.name]);
},
});
};
export const useRevokeAllUserKeysMutation = (): UseMutationResult<unknown> => {
const queryClient = useQueryClient();
return useMutation(() => dataService.revokeAllUserKeys(), {
onSuccess: () => {
queryClient.invalidateQueries([QueryKeys.name]);
},
});
};
export const useGetConversationsQuery = (
pageNumber: string,
config?: UseQueryOptions<t.TGetConversationsResponse>,
): QueryObserverResult<t.TGetConversationsResponse> => {
return useQuery<t.TGetConversationsResponse>(
[QueryKeys.allConversations, { pageNumber, active: true }],
() => 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 = <TData = t.TEndpointsConfig>(
config?: UseQueryOptions<t.TEndpointsConfig, unknown, TData>,
): QueryObserverResult<TData> => {
return useQuery<t.TEndpointsConfig, unknown, TData>(
[QueryKeys.endpoints],
() => dataService.getAIEndpoints(),
{
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
...config,
},
);
};
export const useGetModelsQuery = (
config?: UseQueryOptions<t.TModelsConfig>,
): QueryObserverResult<t.TModelsConfig> => {
return useQuery<t.TModelsConfig>([QueryKeys.models], () => dataService.getModels(), {
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
...config,
});
};
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]);
},
onMutate: () => {
queryClient.invalidateQueries([QueryKeys.models]);
},
});
};
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
> => {
const queryClient = useQueryClient();
return useMutation(() => request.refreshToken(), {
onMutate: () => {
queryClient.invalidateQueries([QueryKeys.models]);
},
});
};
export const useUserKeyQuery = (
name: string,
config?: UseQueryOptions<t.TCheckUserKeyResponse>,
): QueryObserverResult<t.TCheckUserKeyResponse> => {
return useQuery<t.TCheckUserKeyResponse>(
[QueryKeys.name, name],
() => {
if (!name) {
return Promise.resolve({ expiresAt: '' });
}
return dataService.userKeyQuery(name);
},
{
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: false,
retry: false,
...config,
},
);
};
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,
},
);
};