diff --git a/client/src/components/Endpoints/SaveAsPresetDialog.jsx b/client/src/components/Endpoints/SaveAsPresetDialog.jsx
index e06e9ad807..9fd51153e9 100644
--- a/client/src/components/Endpoints/SaveAsPresetDialog.jsx
+++ b/client/src/components/Endpoints/SaveAsPresetDialog.jsx
@@ -1,19 +1,18 @@
-import React, { useEffect, useState } from 'react';
-import { useSetRecoilState, useRecoilValue } from 'recoil';
-import axios from 'axios';
+import { useEffect, useState } from 'react';
+import { useRecoilValue } from 'recoil';
import DialogTemplate from '../ui/DialogTemplate';
import { Dialog } from '../ui/Dialog.tsx';
import { Input } from '../ui/Input.tsx';
import { Label } from '../ui/Label.tsx';
import { cn } from '~/utils/';
import cleanupPreset from '~/utils/cleanupPreset';
-
+import { useCreatePresetMutation } from '~/data-provider';
import store from '~/store';
const SaveAsPresetDialog = ({ open, onOpenChange, preset }) => {
const [title, setTitle] = useState(preset?.title || 'My Preset');
- const setPresets = useSetRecoilState(store.presets);
const endpointsFilter = useRecoilValue(store.endpointsFilter);
+ const createPresetMutation = useCreatePresetMutation();
const defaultTextProps =
'rounded-md border border-gray-300 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.10)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-400 dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0';
@@ -26,15 +25,7 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }) => {
},
endpointsFilter
});
-
- axios({
- method: 'post',
- url: '/api/presets',
- data: _preset,
- withCredentials: true
- }).then(res => {
- setPresets(res?.data);
- });
+ createPresetMutation.mutate(_preset);
};
useEffect(() => {
diff --git a/client/src/components/Input/BingAIOptions/index.jsx b/client/src/components/Input/BingAIOptions/index.jsx
index b552977ef2..a5efc1ce02 100644
--- a/client/src/components/Input/BingAIOptions/index.jsx
+++ b/client/src/components/Input/BingAIOptions/index.jsx
@@ -1,10 +1,10 @@
-import React, { useState, useEffect } from 'react';
-import { useRecoilValue, useRecoilState } from 'recoil';
+import { useState } from 'react';
+import { useRecoilState } from 'recoil';
import { cn } from '~/utils';
import { Button } from '../../ui/Button.tsx';
import { Settings2 } from 'lucide-react';
import { Tabs, TabsList, TabsTrigger } from '../../ui/Tabs.tsx';
-import SelectDropdown from '../../ui/SelectDropDown';
+import SelectDropDown from '../../ui/SelectDropDown';
import Settings from '../../Endpoints/BingAI/Settings.jsx';
import EndpointOptionsPopover from '../../Endpoints/EndpointOptionsPopover';
import SaveAsPresetDialog from '../../Endpoints/SaveAsPresetDialog';
@@ -18,25 +18,12 @@ function BingAIOptions() {
const { endpoint, conversationId } = conversation;
const { toneStyle, context, systemMessage, jailbreak } = conversation;
- // useEffect(() => {
- // if (endpoint !== 'bingAI') return;
-
- // const mustInAdvancedMode = context !== null || systemMessage !== null;
-
- // if (mustInAdvancedMode && !advancedMode) setAdvancedMode(true);
- // }, [conversation, advancedMode]);
-
if (endpoint !== 'bingAI') return null;
if (conversationId !== 'new') return null;
const triggerAdvancedMode = () => setAdvancedMode(prev => !prev);
const switchToSimpleMode = () => {
- // setConversation(prevState => ({
- // ...prevState,
- // context: null,
- // systemMessage: null
- // }));
setAdvancedMode(false);
};
@@ -68,7 +55,7 @@ function BingAIOptions() {
(!advancedMode ? ' show' : '')
}
>
-
setOption('jailbreak')(value === 'Sydney')}
diff --git a/client/src/components/Input/ChatGPTOptions/index.jsx b/client/src/components/Input/ChatGPTOptions/index.jsx
index 23befa36b9..e0f89f15b6 100644
--- a/client/src/components/Input/ChatGPTOptions/index.jsx
+++ b/client/src/components/Input/ChatGPTOptions/index.jsx
@@ -1,6 +1,6 @@
import React, { useEffect } from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
-import SelectDropdown from '../../ui/SelectDropDown.jsx';
+import SelectDropDown from '../../ui/SelectDropDown';
import { cn } from '~/utils/';
import store from '~/store';
@@ -12,21 +12,11 @@ function ChatGPTOptions() {
const endpointsConfig = useRecoilValue(store.endpointsConfig);
- // useEffect(() => {
- // if (endpoint !== 'chatGPTBrowser') return;
- // }, [conversation]);
-
if (endpoint !== 'chatGPTBrowser') return null;
if (conversationId !== 'new') return null;
const models = endpointsConfig?.['chatGPTBrowser']?.['availableModels'] || [];
- // const modelMap = new Map([
- // ['Default (GPT-3.5)', 'text-davinci-002-render-sha'],
- // ['Legacy (GPT-3.5)', 'text-davinci-002-render-paid'],
- // ['GPT-4', 'gpt-4']
- // ]);
-
const setOption = param => newValue => {
let update = {};
update[param] = newValue;
@@ -41,7 +31,7 @@ function ChatGPTOptions() {
return (
-
({getPresetTitle()})
-
- {/*
{
- console.log(res);
- setPresets(res.data);
- });
+ const deletePresetsMutation = useDeletePresetMutation();
+ const createPresetMutation = useCreatePresetMutation();
const importPreset = jsonData => {
- handleFileSelected(jsonData).then(setPresets);
+ createPresetMutation.mutate({...jsonData}, {
+ onSuccess: (data) => {
+ setPresets(data);
+ },
+ onError: (error) => {
+ console.error('Error uploading the preset:', error);
+ }
+ })
};
// update the default model when availableModels changes
@@ -65,7 +65,6 @@ export default function NewConversationMenu() {
setMenuOpen(false);
if (!newEndpoint) return;
- // else if (newEndpoint === endpoint) return;
else {
newConversation({}, { endpoint: newEndpoint });
}
@@ -75,7 +74,6 @@ export default function NewConversationMenu() {
const onSelectPreset = newPreset => {
setMenuOpen(false);
if (!newPreset) return;
- // else if (newEndpoint === endpoint) return;
else {
newConversation({}, newPreset);
}
@@ -86,8 +84,12 @@ export default function NewConversationMenu() {
setPreset(preset);
};
- const clearPreset = () => {
- clearPresetsTrigger({});
+ const clearAllPresets = () => {
+ deletePresetsMutation.mutate({arg: {}});
+ };
+
+ const onDeletePreset = preset => {
+ deletePresetsMutation.mutate({arg: preset});
};
const icon = getIcon({
@@ -99,9 +101,7 @@ export default function NewConversationMenu() {
});
return (
-
+
{icon}
@@ -150,7 +149,6 @@ export default function NewConversationMenu() {
Clear All
@@ -159,7 +157,7 @@ export default function NewConversationMenu() {
title="Clear presets"
description="Are you sure you want to clear all presets? This is irreversible."
selection={{
- selectHandler: clearPreset,
+ selectHandler: clearAllPresets,
selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
selectText: 'Clear'
}}
@@ -176,7 +174,7 @@ export default function NewConversationMenu() {
presets={presets}
onSelect={onSelectPreset}
onChangePreset={onChangePreset}
- onDeletePreset={clearPresetsTrigger}
+ onDeletePreset={onDeletePreset}
/>
) : (
No preset yet.
diff --git a/client/src/components/Input/OpenAIOptions/index.jsx b/client/src/components/Input/OpenAIOptions/index.jsx
index ddf3071254..1167abe356 100644
--- a/client/src/components/Input/OpenAIOptions/index.jsx
+++ b/client/src/components/Input/OpenAIOptions/index.jsx
@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import { useState } from 'react';
import { Settings2 } from 'lucide-react';
import { useRecoilState, useRecoilValue } from 'recoil';
-import SelectDropdown from '../../ui/SelectDropDown';
+import SelectDropDown from '../../ui/SelectDropDown';
import EndpointOptionsPopover from '../../Endpoints/EndpointOptionsPopover';
import SaveAsPresetDialog from '../../Endpoints/SaveAsPresetDialog';
import { Button } from '../../ui/Button.tsx';
@@ -21,20 +21,6 @@ function OpenAIOptions() {
const endpointsConfig = useRecoilValue(store.endpointsConfig);
- // useEffect(() => {
- // if (endpoint !== 'openAI') return;
-
- // const mustInAdvancedMode =
- // chatGptLabel !== null ||
- // promptPrefix !== null ||
- // temperature !== 1 ||
- // top_p !== 1 ||
- // presence_penalty !== 0 ||
- // frequency_penalty !== 0;
-
- // if (mustInAdvancedMode && !advancedMode) setAdvancedMode(true);
- // }, [conversation, advancedMode]);
-
if (endpoint !== 'openAI') return null;
if (conversationId !== 'new') return null;
@@ -43,15 +29,6 @@ function OpenAIOptions() {
const triggerAdvancedMode = () => setAdvancedMode(prev => !prev);
const switchToSimpleMode = () => {
- // setConversation(prevState => ({
- // ...prevState,
- // chatGptLabel: null,
- // promptPrefix: null,
- // temperature: 1,
- // top_p: 1,
- // presence_penalty: 0,
- // frequency_penalty: 0
- // }));
setAdvancedMode(false);
};
@@ -79,17 +56,7 @@ function OpenAIOptions() {
(!advancedMode ? ' show' : '')
}
>
- {/* {
if (blinker && !abortScroll) {
@@ -99,10 +98,9 @@ export default function Message({
const clickSearchResult = async () => {
if (!searchResult) return;
- const convoResponse = await fetchById('convos', message.conversationId);
- const convo = convoResponse.data;
-
- switchToConversation(convo);
+ getConversationQuery.refetch(message.conversationId).then((response) => {
+ switchToConversation(response.data);
+ });
};
return (
diff --git a/client/src/components/Nav/ClearConvos.jsx b/client/src/components/Nav/ClearConvos.jsx
index 3cf6291c48..1236631d9f 100644
--- a/client/src/components/Nav/ClearConvos.jsx
+++ b/client/src/components/Nav/ClearConvos.jsx
@@ -1,27 +1,27 @@
-import React from 'react';
+import { useEffect } from 'react';
import store from '~/store';
import TrashIcon from '../svg/TrashIcon';
-import { useSWRConfig } from 'swr';
-import manualSWR from '~/utils/fetchers';
import { Dialog, DialogTrigger } from '../ui/Dialog.tsx';
import DialogTemplate from '../ui/DialogTemplate';
+import { useClearConversationsMutation } from '~/data-provider';
export default function ClearConvos() {
const { newConversation } = store.useConversation();
const { refreshConversations } = store.useConversations();
- const { mutate } = useSWRConfig();
-
- const { trigger } = manualSWR(`/api/convos/clear`, 'post', () => {
- newConversation();
- refreshConversations();
- mutate(`/api/convos`);
- });
+ const clearConvosMutation = useClearConversationsMutation();
const clickHandler = () => {
console.log('Clearing conversations...');
- trigger({});
+ clearConvosMutation.mutate();
};
+ useEffect(() => {
+ if (clearConvosMutation.isSuccess) {
+ newConversation();
+ refreshConversations();
+ }
+ }, [clearConvosMutation.isSuccess]);
+
return (
diff --git a/client/src/components/Nav/NavLinks.jsx b/client/src/components/Nav/NavLinks.jsx
index 33f0e453c7..fd5249e868 100644
--- a/client/src/components/Nav/NavLinks.jsx
+++ b/client/src/components/Nav/NavLinks.jsx
@@ -1,17 +1,14 @@
-import React from 'react';
import SearchBar from './SearchBar';
import ClearConvos from './ClearConvos';
import DarkMode from './DarkMode';
import Logout from './Logout';
import ExportConversation from './ExportConversation';
-export default function NavLinks({ fetch, onSearchSuccess, clearSearch, isSearchEnabled }) {
+export default function NavLinks({ clearSearch, isSearchEnabled }) {
return (
<>
{!!isSearchEnabled && (
{
);
diff --git a/client/src/components/Nav/index.jsx b/client/src/components/Nav/index.jsx
index aa6a7895e1..b63cf11e7e 100644
--- a/client/src/components/Nav/index.jsx
+++ b/client/src/components/Nav/index.jsx
@@ -1,13 +1,12 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import _ from 'lodash';
+import { useState, useEffect, useRef } from 'react';
import NewChat from './NewChat';
import Spinner from '../svg/Spinner';
import Pages from '../Conversations/Pages';
import Conversations from '../Conversations';
import NavLinks from './NavLinks';
-import { searchFetcher, swr } from '~/utils/fetchers';
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useGetConversationsQuery, useSearchQuery } from '~/data-provider';
+import useDebounce from '~/hooks/useDebounce';
import store from '~/store';
export default function Nav({ navVisible, setNavVisible }) {
@@ -16,12 +15,14 @@ export default function Nav({ navVisible, setNavVisible }) {
const containerRef = useRef(null);
const scrollPositionRef = useRef(null);
- // const dispatch = useDispatch();
const [conversations, setConversations] = useState([]);
// current page
const [pageNumber, setPageNumber] = useState(1);
// total pages
const [pages, setPages] = useState(1);
+
+ // data provider
+ const getConversationsQuery = useGetConversationsQuery(pageNumber);
// search
const searchQuery = useRecoilValue(store.searchQuery);
@@ -33,29 +34,18 @@ export default function Nav({ navVisible, setNavVisible }) {
const conversation = useRecoilValue(store.conversation);
const { conversationId } = conversation || {};
const setSearchResultMessages = useSetRecoilState(store.searchResultMessages);
-
- // refreshConversationsHint is used for other components to ask refresh of Nav
const refreshConversationsHint = useRecoilValue(store.refreshConversationsHint);
-
const { refreshConversations } = store.useConversations();
const [isFetching, setIsFetching] = useState(false);
- const onSuccess = (data, searchFetch = false) => {
- if (isSearching) {
- return;
- }
-
- let { conversations, pages } = data;
- if (pageNumber > pages) {
- setPageNumber(pages);
- } else {
- if (!searchFetch)
- conversations = conversations.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
- setConversations(conversations);
- setPages(pages);
- }
- };
+ const debouncedSearchTerm = useDebounce(searchQuery, 750);
+ const searchQueryFn = useSearchQuery(debouncedSearchTerm, pageNumber, {
+ enabled: !!debouncedSearchTerm &&
+ debouncedSearchTerm.length > 0 &&
+ isSearchEnabled &&
+ isSearching,
+ });
const onSearchSuccess = (data, expectedPage) => {
const res = data;
@@ -63,21 +53,21 @@ export default function Nav({ navVisible, setNavVisible }) {
if (expectedPage) {
setPageNumber(expectedPage);
}
- setPageNumber(res.pageNumber);
setPages(res.pages);
setIsFetching(false);
searchPlaceholderConversation();
setSearchResultMessages(res.messages);
};
- // TODO: dont need this
- const fetch = useCallback(
- _.partialRight(
- searchFetcher.bind(null, () => setIsFetching(true)),
- onSearchSuccess
- ),
- [setIsFetching]
- );
+ useEffect(() => {
+ //we use isInitialLoading here instead of isLoading because query is disabled by default
+ if (searchQueryFn.isInitialLoading) {
+ setIsFetching(true);
+ }
+ else if (searchQueryFn.data) {
+ onSearchSuccess(searchQueryFn.data);
+ }
+ }, [searchQueryFn.data, searchQueryFn.isInitialLoading])
const clearSearch = () => {
setPageNumber(1);
@@ -85,38 +75,39 @@ export default function Nav({ navVisible, setNavVisible }) {
if (conversationId == 'search') {
newConversation();
}
- // dispatch(setDisabled(false));
};
- const { data, isLoading, mutate } = swr(`/api/convos?pageNumber=${pageNumber}`, onSuccess, {
- revalidateOnMount: false
- });
-
const nextPage = async () => {
moveToTop();
-
- if (!isSearching) {
- setPageNumber(prev => prev + 1);
- await mutate();
- } else {
- await fetch(searchQuery, +pageNumber + 1);
- }
+ setPageNumber(pageNumber + 1);
};
const previousPage = async () => {
moveToTop();
-
- if (!isSearching) {
- setPageNumber(prev => prev - 1);
- await mutate();
- } else {
- await fetch(searchQuery, +pageNumber - 1);
- }
+ setPageNumber(pageNumber - 1);
};
+ useEffect(() => {
+ if (getConversationsQuery.data) {
+ if (isSearching) {
+ return;
+ }
+ let { conversations, pages } = getConversationsQuery.data;
+ if (pageNumber > pages) {
+ setPageNumber(pages);
+ } else {
+ if (!isSearching) {
+ conversations = conversations.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+ }
+ setConversations(conversations);
+ setPages(pages);
+ }
+ }
+ }, [getConversationsQuery.isSuccess, getConversationsQuery.data, isSearching, pageNumber]);
+
useEffect(() => {
if (!isSearching) {
- mutate();
+ getConversationsQuery.refetch();
}
}, [pageNumber, conversationId, refreshConversationsHint]);
@@ -127,31 +118,17 @@ export default function Nav({ navVisible, setNavVisible }) {
}
};
- const moveTo = () => {
- const container = containerRef.current;
-
- if (container && scrollPositionRef.current !== null) {
- const { scrollHeight, clientHeight } = container;
- const maxScrollTop = scrollHeight - clientHeight;
-
- container.scrollTop = Math.min(maxScrollTop, scrollPositionRef.current);
- }
- };
const toggleNavVisible = () => {
setNavVisible(prev => !prev);
};
- // useEffect(() => {
- // moveTo();
- // }, [data]);
-
useEffect(() => {
setNavVisible(false);
- }, [conversationId]);
+ }, [conversationId, setNavVisible]);
const containerClasses =
- isLoading && pageNumber === 1
+ getConversationsQuery.isLoading && pageNumber === 1
? 'flex flex-col gap-2 text-gray-100 text-sm h-full justify-center items-center'
: 'flex flex-col gap-2 text-gray-100 text-sm';
@@ -176,8 +153,7 @@ export default function Nav({ navVisible, setNavVisible }) {
ref={containerRef}
>
- {/* {(isLoading && pageNumber === 1) ? ( */}
- {(isLoading && pageNumber === 1) || isFetching ? (
+ {(getConversationsQuery.isLoading && pageNumber === 1) || isFetching ? (
{
+ return request.get(endpoints.conversations(pageNumber));
+}
+
+export function deleteConversation(payload: t.TDeleteConversationRequest) {
+ //todo: this should be a DELETE request
+ return request.post(endpoints.deleteConversation(), {arg: payload});
+}
+
+export function clearAllConversations(): Promise {
+ return request.post(endpoints.deleteConversation(), {arg: {}});
+}
+
+export function getMessagesByConvoId(id: string): Promise {
+ return request.get(endpoints.messages(id));
+}
+
+export function getConversationById(id: string): Promise {
+ return request.get(endpoints.conversationById(id));
+}
+
+export function updateConversation(
+ payload: t.TUpdateConversationRequest
+): Promise {
+ return request.post(endpoints.updateConversation(), {arg: payload});
+}
+
+export function getPresets(): Promise {
+ return request.get(endpoints.presets());
+}
+
+export function createPreset(payload: t.TPreset): Promise {
+ return request.post(endpoints.presets(), payload);
+}
+
+export function updatePreset(payload: t.TPreset): Promise {
+ return request.post(endpoints.presets(), payload);
+}
+
+export function deletePreset(arg: t.TPreset | {}): Promise {
+ return request.post(endpoints.deletePreset(), arg);
+}
+
+export function getSearchEnabled(): Promise {
+ return request.get(endpoints.searchEnabled());
+}
+
+export function getUser(): Promise {
+ return request.get(endpoints.user());
+}
+
+export const searchConversations = async(q: string, pageNumber: string): Promise => {
+ return request.get(endpoints.search(q, pageNumber));
+}
+
+export const getAIEndpoints = () => {
+ return request.get(endpoints.aiEndpoints());
+}
+
+export const updateTokenCount = (text: string) => {
+ return request.post(endpoints.tokenizer(), {arg: {text}});
+}
\ No newline at end of file
diff --git a/client/src/data-provider/headers-helpers.ts b/client/src/data-provider/headers-helpers.ts
new file mode 100644
index 0000000000..195f7c7912
--- /dev/null
+++ b/client/src/data-provider/headers-helpers.ts
@@ -0,0 +1,9 @@
+import axios from 'axios';
+
+export function setAcceptLanguageHeader(value: string): void {
+ axios.defaults.headers.common['Accept-Language'] = value;
+}
+
+export function setTokenHeader(token: string) {
+ axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
+}
diff --git a/client/src/data-provider/index.ts b/client/src/data-provider/index.ts
new file mode 100644
index 0000000000..ea66903770
--- /dev/null
+++ b/client/src/data-provider/index.ts
@@ -0,0 +1,7 @@
+export * from './data-service';
+// export * from './endpoints';
+export * from './request';
+export * from './types';
+export * from './react-query-service';
+export * from './headers-helpers';
+// export * from './events';
\ No newline at end of file
diff --git a/client/src/data-provider/react-query-service.ts b/client/src/data-provider/react-query-service.ts
new file mode 100644
index 0000000000..c85660214c
--- /dev/null
+++ b/client/src/data-provider/react-query-service.ts
@@ -0,0 +1,224 @@
+import {
+ UseQueryOptions,
+ useQuery,
+ useMutation,
+ useQueryClient,
+ UseMutationResult,
+ QueryObserverResult,
+} from "@tanstack/react-query";
+import * as t from "./types";
+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",
+}
+
+export const useGetUserQuery = (): QueryObserverResult => {
+ return useQuery([QueryKeys.user], () => dataService.getUser(), {
+ refetchOnWindowFocus: false,
+ refetchOnReconnect: false,
+ refetchOnMount: false,
+ });
+};
+
+export const useGetMessagesByConvoId = (
+ id: string,
+ config?: UseQueryOptions
+): QueryObserverResult => {
+ return useQuery([QueryKeys.messages, id], () =>
+ dataService.getMessagesByConvoId(id),
+ {
+ refetchOnWindowFocus: false,
+ refetchOnReconnect: false,
+ refetchOnMount: false,
+ ...config,
+ }
+ );
+};
+
+export const useGetConversationByIdQuery = (
+ id: string,
+ config?: UseQueryOptions
+ ): QueryObserverResult => {
+ return useQuery([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,
+ callback: (data: t.TConversation) => void
+): UseMutationResult => {
+ const queryClient = useQueryClient();
+ return useMutation(() => dataService.getConversationById(id),
+ {
+ onSuccess: (res: t.TConversation) => {
+ callback(res);
+ queryClient.invalidateQueries([QueryKeys.conversation, id]);
+ },
+ }
+ );
+};
+
+export const useUpdateConversationMutation = (
+ id: string
+): UseMutationResult => {
+ 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 => {
+ 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 => {
+ const queryClient = useQueryClient();
+ return useMutation(() => dataService.clearAllConversations(), {
+ onSuccess: () => {
+ queryClient.invalidateQueries([QueryKeys.allConversations]);
+ },
+ });
+};
+
+export const useGetConversationsQuery = (pageNumber: string): QueryObserverResult => {
+ return useQuery([QueryKeys.allConversations, pageNumber], () =>
+ dataService.getConversations(pageNumber), {
+ refetchOnReconnect: false,
+ refetchOnMount: false,
+ }
+ );
+}
+
+export const useGetSearchEnabledQuery = (config?: UseQueryOptions): QueryObserverResult => {
+ return useQuery([QueryKeys.searchEnabled], () =>
+ dataService.getSearchEnabled(), {
+ refetchOnWindowFocus: false,
+ refetchOnReconnect: false,
+ refetchOnMount: false,
+ ...config,
+ }
+ );
+}
+
+export const useGetEndpointsQuery = (): QueryObserverResult => {
+ return useQuery([QueryKeys.endpoints], () =>
+ dataService.getAIEndpoints(), {
+ refetchOnWindowFocus: false,
+ refetchOnReconnect: false,
+ refetchOnMount: false,
+ }
+ );
+}
+
+export const useCreatePresetMutation = (): UseMutationResult => {
+ const queryClient = useQueryClient();
+ return useMutation(
+ (payload: t.TPreset) =>
+ dataService.createPreset(payload),
+ {
+ onSuccess: () => {
+ queryClient.invalidateQueries([QueryKeys.presets]);
+ },
+ }
+ );
+};
+
+export const useUpdatePresetMutation = (): UseMutationResult => {
+ const queryClient = useQueryClient();
+ return useMutation(
+ (payload: t.TPreset) =>
+ dataService.updatePreset(payload),
+ {
+ onSuccess: () => {
+ queryClient.invalidateQueries([QueryKeys.presets]);
+ },
+ }
+ );
+};
+
+export const useGetPresetsQuery = (): QueryObserverResult => {
+ return useQuery([QueryKeys.presets], () => dataService.getPresets(), {
+ refetchOnWindowFocus: false,
+ refetchOnReconnect: false,
+ refetchOnMount: false,
+ });
+};
+
+export const useDeletePresetMutation = (): UseMutationResult => {
+ const queryClient = useQueryClient();
+ return useMutation(
+ (payload: t.TPreset | {}) =>
+ dataService.deletePreset(payload),
+ {
+ onSuccess: () => {
+ queryClient.invalidateQueries([QueryKeys.presets]);
+ },
+ }
+ );
+}
+
+export const useSearchQuery = (
+ searchQuery: string,
+ pageNumber: string,
+ config?: UseQueryOptions
+ ): QueryObserverResult => {
+ return useQuery([QueryKeys.searchResults, pageNumber, searchQuery], () =>
+ dataService.searchConversations(searchQuery, pageNumber), {
+ refetchOnWindowFocus: false,
+ refetchOnReconnect: false,
+ refetchOnMount: false,
+ ...config
+ }
+ );
+}
+
+export const useUpdateTokenCountMutation = (): UseMutationResult => {
+ const queryClient = useQueryClient();
+ return useMutation(
+ (text: string) =>
+ dataService.updateTokenCount(text),
+ {
+ onSuccess: () => {
+ queryClient.invalidateQueries([QueryKeys.tokenCount]);
+ },
+ }
+ );
+}
\ No newline at end of file
diff --git a/client/src/data-provider/request.ts b/client/src/data-provider/request.ts
new file mode 100644
index 0000000000..d79562ab34
--- /dev/null
+++ b/client/src/data-provider/request.ts
@@ -0,0 +1,62 @@
+import axios, { AxiosRequestConfig } from "axios";
+
+async function _get(url: string, options?: AxiosRequestConfig): Promise {
+ const response = await axios.get(url, { withCredentials: true, ...options});
+ return response.data;
+}
+
+async function _post(url: string, data?: any) {
+ const response = await axios.post(url, JSON.stringify(data), {
+ headers: { "Content-Type": "application/json" },
+ });
+ return response.data;
+}
+
+async function _postMultiPart(
+ url: string,
+ formData: FormData,
+ options?: AxiosRequestConfig
+) {
+ const response = await axios.post(url, formData, {
+ ...options,
+ headers: { "Content-Type": "multipart/form-data" },
+ });
+ return response.data;
+}
+
+async function _put(url: string, data?: any) {
+ const response = await axios.put(url, JSON.stringify(data), {
+ headers: { "Content-Type": "application/json" },
+ });
+ return response.data;
+}
+
+async function _delete(url: string): Promise {
+ const response = await axios.delete(url);
+ return response.data;
+}
+
+async function _deleteWithOptions(
+ url: string,
+ options?: AxiosRequestConfig
+): Promise {
+ const response = await axios.delete(url, {...options});
+ return response.data;
+}
+
+async function _patch(url: string, data?: any) {
+ const response = await axios.patch(url, JSON.stringify(data), {
+ headers: { "Content-Type": "application/json" },
+ });
+ return response.data;
+}
+
+export default {
+ get: _get,
+ post: _post,
+ postMultiPart: _postMultiPart,
+ put: _put,
+ delete: _delete,
+ deleteWithOptions: _deleteWithOptions,
+ patch: _patch,
+};
diff --git a/client/src/utils/sse.mjs b/client/src/data-provider/sse.mjs
similarity index 100%
rename from client/src/utils/sse.mjs
rename to client/src/data-provider/sse.mjs
diff --git a/client/src/data-provider/types.ts b/client/src/data-provider/types.ts
new file mode 100644
index 0000000000..b3206fce64
--- /dev/null
+++ b/client/src/data-provider/types.ts
@@ -0,0 +1,163 @@
+export type TMessage = {
+ messageId: string,
+ conversationId: string,
+ clientId: string,
+ parentMessageId: string,
+ sender: string,
+ text: string,
+ isCreatedByUser: boolean,
+ error: boolean,
+ createdAt: string,
+ updatedAt: string,
+};
+
+export type TSubmission = {
+ clientId?: string;
+ context?: string;
+ conversationId?: string;
+ conversationSignature?: string;
+ current: boolean;
+ endpoint: EModelEndpoint;
+ invocationId: number;
+ isCreatedByUser: boolean;
+ jailbreak: boolean;
+ jailbreakConversationId?: string;
+ messageId: string;
+ overrideParentMessageId?: string | boolean;
+ parentMessageId?: string;
+ sender: string;
+ systemMessage?: string;
+ text: string;
+ toneStyle?: string;
+ model?: string;
+ promptPrefix?: string;
+ temperature?: number;
+ top_p?: number;
+ presence_penalty?: number;
+ frequence_penalty?: number;
+}
+
+
+export enum EModelEndpoint {
+ azureOpenAI = 'azureOpenAI',
+ openAI = 'openAI',
+ bingAI = 'bingAI',
+ chatGPT = 'chatGPT',
+ chatGPTBrowser = 'chatGPTBrowser'
+}
+
+export type TConversation = {
+ conversationId: string;
+ title: string;
+ user?: string;
+ endpoint: EModelEndpoint;
+ suggestions?: string[];
+ messages?: TMessage[];
+ createdAt: string;
+ updatedAt: string;
+ // for azureOpenAI, openAI only
+ chatGptLabel?: string;
+ model?: string;
+ promptPrefix?: string;
+ temperature?: number;
+ top_p?: number;
+ presence_penalty?: number;
+ // for bingAI only
+ jailbreak?: boolean;
+ jailbreakConversationId?: string;
+ conversationSignature?: string;
+ parentMessageId?: string;
+ clientId?: string;
+ invocationId?: string;
+ toneStyle?: string;
+}
+
+export type TPreset = {
+ title: string,
+ endpoint: EModelEndpoint,
+ conversationSignature?: string,
+ createdAt?: string,
+ updatedAt?: string,
+ presetId?: string,
+ user?: string,
+ // for azureOpenAI, openAI only
+ chatGptLabel?: string,
+ frequence_penalty?: number,
+ model?: string,
+ presence_penalty?: number,
+ promptPrefix?: string,
+ temperature?: number,
+ top_p?: number,
+ //for BingAI
+ clientId?: string,
+ invocationId?: number,
+ jailbreak?: boolean,
+ jailbreakPresetId?: string,
+ presetSignature?: string,
+ toneStyle?: string,
+}
+
+export type TUser = {
+ username: string,
+ display: string
+};
+
+export type TGetConversationsResponse = {
+ conversations: TConversation[],
+ pageNumber: string,
+ pageSize: string | number,
+ pages: string | number
+};
+
+export type TUpdateConversationRequest = {
+ conversationId: string,
+ title: string,
+};
+
+export type TUpdateConversationResponse = {
+ data: TConversation
+};
+
+export type TDeleteConversationRequest = {
+ conversationId?: string,
+ source?: string
+}
+
+export type TDeleteConversationResponse = {
+ acknowledged: boolean,
+ deletedCount: number,
+ messages: {
+ acknowledged: boolean,
+ deletedCount: number
+ }
+};
+
+export type TSearchResults = {
+ conversations: TConversation[],
+ messages: TMessage[],
+ pageNumber: string,
+ pageSize: string | number,
+ pages: string | number
+ filter: {}
+};
+
+export type TEndpoints = {
+ azureOpenAI: boolean,
+ bingAI: boolean,
+ ChatGptBrowser: {
+ availableModels: []
+ }
+ OpenAI: {
+ availableModels: []
+ }
+};
+
+export type TUpdateTokenCountResponse = {
+ count: number,
+};
+
+export type TMessageTreeNode = {}
+
+export type TSearchMessage = {}
+
+export type TSearchMessageTreeNode = {}
\ No newline at end of file
diff --git a/client/src/hooks/useDebounce.js b/client/src/hooks/useDebounce.js
new file mode 100644
index 0000000000..910395fce6
--- /dev/null
+++ b/client/src/hooks/useDebounce.js
@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react';
+
+function useDebounce(value, delay) {
+ const [debouncedValue, setDebouncedValue] = useState(value);
+
+ useEffect(
+ () => {
+ const handler = setTimeout(() => {
+ setDebouncedValue(value);
+ }, delay);
+
+ return () => {
+ clearTimeout(handler);
+ };
+ },
+ [value, delay]
+ );
+
+ return debouncedValue;
+}
+
+export default useDebounce;
\ No newline at end of file
diff --git a/client/src/main.jsx b/client/src/main.jsx
index 8738dcf27f..b27ce94477 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -1,9 +1,6 @@
-import React from 'react';
import { createRoot } from 'react-dom/client';
-// import { Provider } from 'react-redux';
-// import { store } from './src/store';
import { RecoilRoot } from 'recoil';
-
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ThemeProvider } from './hooks/ThemeContext';
import App from './App';
import './style.css';
@@ -12,10 +9,14 @@ import './mobile.css';
const container = document.getElementById('root');
const root = createRoot(container);
+const queryClient = new QueryClient();
+
root.render(
-
-
-
-
+
+
+
+
+
+
);
diff --git a/client/src/routes/Chat.jsx b/client/src/routes/Chat.jsx
index 3feab50a0f..88202b8221 100644
--- a/client/src/routes/Chat.jsx
+++ b/client/src/routes/Chat.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
@@ -7,7 +7,7 @@ import Messages from '../components/Messages';
import TextChat from '../components/Input';
import store from '~/store';
-import manualSWR from '~/utils/fetchers';
+import { useGetMessagesByConvoId, useGetConversationByIdMutation } from '~/data-provider';
export default function Chat() {
const searchQuery = useRecoilValue(store.searchQuery);
@@ -18,9 +18,9 @@ export default function Chat() {
const { conversationId } = useParams();
const navigate = useNavigate();
- const { trigger: messagesTrigger } = manualSWR(`/api/messages/${conversation?.conversationId}`, 'get');
-
- const { trigger: conversationTrigger } = manualSWR(`/api/convos/${conversationId}`, 'get');
+ //disabled by default, we only enable it when messagesTree is null
+ const messagesQuery = useGetMessagesByConvoId(conversationId, { enabled: false });
+ const getConversationMutation = useGetConversationByIdMutation(conversationId, setConversation);
// when conversation changed or conversationId (in url) changed
useEffect(() => {
@@ -31,13 +31,7 @@ export default function Chat() {
newConversation();
} else if (conversationId) {
// fetch it from server
- conversationTrigger()
- .then(setConversation)
- .catch(error => {
- console.error('failed to fetch the conversation');
- console.error(error);
- newConversation();
- });
+ getConversationMutation.mutate();
setMessages(null);
} else {
navigate(`/chat/new`);
@@ -51,13 +45,30 @@ export default function Chat() {
}
}, [conversation, conversationId]);
- // when messagesTree is null (<=> messages is null)
- // we need to fetch message list from server
useEffect(() => {
- if (messagesTree === null) {
- messagesTrigger().then(setMessages);
+ if(getConversationMutation.isError) {
+ console.error('failed to fetch the conversation');
+ console.error(getConversationMutation.error);
+ newConversation();
}
- }, [conversation?.conversationId]);
+ }, [getConversationMutation.isError, newConversation]);
+
+
+ useEffect(() => {
+ if (messagesTree === null && conversation?.conversationId) {
+ messagesQuery.refetch(conversation?.conversationId);
+ }
+ }, [conversation?.conversationId, messagesQuery, messagesTree]);
+
+ useEffect(() => {
+ if (messagesQuery.data) {
+ setMessages(messagesQuery.data);
+ } else if(messagesQuery.isError) {
+ console.error('failed to fetch the messages');
+ console.error(messagesQuery.error);
+ setMessages(null);
+ }
+ }, [messagesQuery.data, messagesQuery.isError, setMessages]);
// if not a conversation
if (conversation?.conversationId === 'search') return null;
diff --git a/client/src/utils/fetchers.js b/client/src/utils/fetchers.js
deleted file mode 100644
index a3a693b8fe..0000000000
--- a/client/src/utils/fetchers.js
+++ /dev/null
@@ -1,96 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import axios from 'axios';
-import useSWR from 'swr';
-import useSWRMutation from 'swr/mutation';
-
-const fetcher = url => fetch(url, { credentials: 'include' }).then(res => res.json());
-const axiosFetcher = async (url, params) => {
- console.log(params, 'params');
- return axios.get(url, params);
-};
-
-export const postRequest = async (url, { arg }) => {
- return await axios({
- method: 'post',
- url: url,
- withCredentials: true,
- data: { arg }
- });
-};
-
-export const axiosPost = async ({ url, arg, callback }) => {
- try {
- const response = await axios.post(url, { arg }, { withCredentials: true });
- callback(response.data);
- } catch (error) {
- console.error('An error occurred while making the axios post request:', error);
- }
-};
-
-export const searchFetcher = async (pre, q, pageNumber, callback) => {
- pre();
- const { data } = await axios.get(`/api/search?q=${q}&pageNumber=${pageNumber}`);
- console.log('search data', data);
- callback(data);
-};
-
-export const fetchById = async (path, conversationId) => {
- return await axios.get(`/api/${path}/${conversationId}`);
- // console.log(`fetch ${path} data`, data);
- // callback(data);
-};
-
-export const swr = (path, successCallback, options) => {
- const _options = { ...options };
-
- if (successCallback) {
- _options.onSuccess = successCallback;
- }
-
- return useSWR(path, fetcher, _options);
-};
-
-export default function manualSWR(path, type, successCallback) {
- const options = {};
-
- if (successCallback) {
- options.onSuccess = successCallback;
- }
- const fetchFunction = type === 'get' ? fetcher : postRequest;
- return useSWRMutation(path, fetchFunction, options);
-}
-
-export function useManualSWR({ path, params, type, onSuccess }) {
- const options = {};
-
- if (onSuccess) {
- options.onSuccess = onSuccess;
- }
-
- console.log(params, 'params');
-
- const fetchFunction = type === 'get' ? _.partialRight(axiosFetcher, params) : postRequest;
- return useSWRMutation(path, fetchFunction, options);
-}
-
-export const handleFileSelected = async jsonData => {
- try {
- const response = await axios({
- url: '/api/presets',
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- withCredentials: true,
- data: JSON.stringify(jsonData)
- });
-
- // if (!response.ok) {
- // throw new Error(`Error: ${response.statusText}`);
- // }
- console.log(response);
- return response.data;
- } catch (error) {
- console.error('Error uploading the preset:', error);
- }
-};