diff --git a/client/src/data-provider/data-service.ts b/client/src/data-provider/data-service.ts index adb9cca9f6..b71479affc 100644 --- a/client/src/data-provider/data-service.ts +++ b/client/src/data-provider/data-service.ts @@ -2,10 +2,6 @@ import * as t from './types'; import request from './request'; import * as endpoints from './endpoints'; -export function postAICompletion(payload: t.TAICompletionRequest) { - return request.post(endpoints.getAICompletion(), payload); -} - export function getConversations(pageNumber: string): Promise { return request.get(endpoints.getConversations(pageNumber)); } diff --git a/client/src/data-provider/endpoints.ts b/client/src/data-provider/endpoints.ts index 72f2ac608b..d67417fc30 100644 --- a/client/src/data-provider/endpoints.ts +++ b/client/src/data-provider/endpoints.ts @@ -1,6 +1,3 @@ -export const openAiModels = () => { - return `/api/open-ai-models`; -}; export const getModels = () => { return `/api/models`; diff --git a/client/src/data-provider/react-query-service.ts b/client/src/data-provider/react-query-service.ts index a0080b3b73..bdd523c46e 100644 --- a/client/src/data-provider/react-query-service.ts +++ b/client/src/data-provider/react-query-service.ts @@ -57,6 +57,23 @@ export const useGetConversationByIdQuery = ( ); } +//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< diff --git a/client/src/data-provider/types.ts b/client/src/data-provider/types.ts index 82324be8fd..3f3708801e 100644 --- a/client/src/data-provider/types.ts +++ b/client/src/data-provider/types.ts @@ -1,9 +1,9 @@ export type TMessage = { messageId: string, conversationId: string, - conversationSignature: string | null, + // conversationSignature: string | null, clientId: string, - invocationId: string, + // invocationId: string, parentMessageId: string, sender: string, text: string, @@ -11,12 +11,12 @@ export type TMessage = { error: boolean, createdAt: string, updatedAt: string, - searchResult: string[], - submitting: boolean, - children?: any[] | undefined, - bgColor?: string, - model?: string, - cancelled?: boolean + // searchResult: string[], + // submitting: boolean, + // children?: any[] | undefined, + // bgColor?: string, + // model?: string, + // cancelled?: boolean }; export type TMessageTreeNode = {} 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/routes/ChatRQTemp.jsx b/client/src/routes/ChatRQTemp.jsx deleted file mode 100644 index f2a88c2483..0000000000 --- a/client/src/routes/ChatRQTemp.jsx +++ /dev/null @@ -1,79 +0,0 @@ -import React, { useEffect } from 'react'; -import { useNavigate, useParams } from 'react-router-dom'; -import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; - -import Landing from '../components/ui/Landing'; -import Messages from '../components/Messages'; -import TextChat from '../components/Input'; - -import store from '~/store'; -import { useGetMessagesByConvoId, useGetConversationByIdQuery } from '~/data-provider'; - -export default function Chat() { - const searchQuery = useRecoilValue(store.searchQuery); - const [conversation, setConversation] = useRecoilState(store.conversation); - const setMessages = useSetRecoilState(store.messages); - const messagesTree = useRecoilValue(store.messagesTree); - const { newConversation } = store.useConversation(); - const { conversationId } = useParams(); - const navigate = useNavigate(); - - //disabled by default, we only enable it when messagesTree is null - const messagesQuery = useGetMessagesByConvoId(conversation?.conversationId, { enabled: false }); - - const conversationQuery = useGetConversationByIdQuery( - conversation?.conversationId, { - enabled: !!conversation?.conversationId && - conversation?.conversationId !== 'search' && - conversation?.conversationId !== 'new' - }); - - // when conversation changed or conversationId (in url) changed - useEffect(() => { - if (conversation === null) { - // no current conversation, we need to do something - if (conversationId === 'new') { - // create new - newConversation(); - } else if (conversationQuery.data) { - // fetch it from server - setConversation(conversationQuery.data); - setMessages(null); - } else if (conversationQuery.isError) { - console.error('failed to fetch the conversation'); - console.error(conversationQuery.error); - newConversation(); - } else { - navigate(`/chat/new`); - } - } else if (conversation?.conversationId === 'search') { - // jump to search page - navigate(`/search/${searchQuery}`); - } else if (conversation?.conversationId !== conversationId) { - // conversationId (in url) should always follow conversation?.conversationId, unless conversation is null - navigate(`/chat/${conversation?.conversationId}`); - } - }, [conversation, conversationId, newConversation, navigate, searchQuery, setMessages, conversationQuery]); - - // when messagesTree is null (<=> messages is null) - // we need to fetch message list from server - useEffect(() => { - if (messagesTree === null) { - messagesQuery.refetch(conversation?.conversationId); - } - }, [conversation?.conversationId, messagesQuery, messagesTree]); - - // if not a conversation - if (conversation?.conversationId === 'search') return null; - // if conversationId not match - if (conversation?.conversationId !== conversationId) return null; - // if conversationId is null - if (!conversationId) return null; - - return ( - <> - {conversationId === 'new' && !messagesTree?.length ? : } - - - ); -}