|
import { useState, useEffect } from 'react'; |
|
import { useAuthContext } from '~/hooks/AuthContext'; |
|
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, |
|
useGetConversationByIdMutation, |
|
useGetStartupConfig, |
|
} from '@librechat/data-provider'; |
|
|
|
export default function Chat() { |
|
const { isAuthenticated } = useAuthContext(); |
|
const [shouldNavigate, setShouldNavigate] = useState(true); |
|
const searchQuery = useRecoilValue(store.searchQuery); |
|
const [conversation, setConversation] = useRecoilState(store.conversation); |
|
const setMessages = useSetRecoilState(store.messages); |
|
const messagesTree = useRecoilValue(store.messagesTree); |
|
const isSubmitting = useRecoilValue(store.isSubmitting); |
|
const { newConversation } = store.useConversation(); |
|
const { conversationId } = useParams(); |
|
const navigate = useNavigate(); |
|
|
|
|
|
const messagesQuery = useGetMessagesByConvoId(conversationId, { enabled: false }); |
|
const getConversationMutation = useGetConversationByIdMutation(conversationId); |
|
const { data: config } = useGetStartupConfig(); |
|
|
|
useEffect(() => { |
|
let timeout = setTimeout(() => { |
|
if (!isAuthenticated) { |
|
navigate('/login', { replace: true }); |
|
} |
|
}, 300); |
|
|
|
return () => { |
|
clearTimeout(timeout); |
|
}; |
|
}, [isAuthenticated, navigate]); |
|
|
|
useEffect(() => { |
|
if (!isSubmitting && !shouldNavigate) { |
|
setShouldNavigate(true); |
|
} |
|
}, [shouldNavigate, isSubmitting]); |
|
|
|
|
|
useEffect(() => { |
|
|
|
if (conversation === null && conversationId === 'new') { |
|
newConversation(); |
|
setShouldNavigate(true); |
|
} |
|
|
|
else if (conversation === null && conversationId) { |
|
getConversationMutation.mutate(conversationId, { |
|
onSuccess: (data) => { |
|
console.log('Conversation fetched successfully'); |
|
setConversation(data); |
|
setShouldNavigate(true); |
|
}, |
|
onError: (error) => { |
|
console.error('Failed to fetch the conversation'); |
|
console.error(error); |
|
navigate('/chat/new'); |
|
newConversation(); |
|
setShouldNavigate(true); |
|
}, |
|
}); |
|
setMessages(null); |
|
} |
|
|
|
else if (conversation === null) { |
|
navigate('/chat/new'); |
|
setShouldNavigate(true); |
|
} |
|
|
|
else if (conversation?.conversationId === 'search') { |
|
navigate(`/search/${searchQuery}`); |
|
setShouldNavigate(true); |
|
} |
|
|
|
else if (conversation?.conversationId !== conversationId && isSubmitting) { |
|
setShouldNavigate(false); |
|
} |
|
|
|
else if (conversation?.conversationId !== conversationId) { |
|
if (shouldNavigate) { |
|
navigate(`/chat/${conversation?.conversationId}`); |
|
} else { |
|
setShouldNavigate(true); |
|
} |
|
} |
|
document.title = conversation?.title || config?.appTitle || 'Chat'; |
|
}, [conversation, conversationId, config]); |
|
|
|
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 (!isAuthenticated) { |
|
return null; |
|
} |
|
|
|
|
|
if (conversation?.conversationId === 'search') { |
|
return null; |
|
} |
|
|
|
if (conversation?.conversationId !== conversationId && !conversation) { |
|
return null; |
|
} |
|
|
|
if (!conversationId) { |
|
return null; |
|
} |
|
|
|
if (conversationId && !messagesTree) { |
|
return ( |
|
<> |
|
<Messages /> |
|
<TextChat /> |
|
</> |
|
); |
|
} |
|
|
|
return ( |
|
<> |
|
{conversationId === 'new' && !messagesTree?.length ? <Landing /> : <Messages />} |
|
<TextChat /> |
|
</> |
|
); |
|
} |
|
|