feat: support search-style-url

fix: url can be null in conversationId and query
fix: get conversation api should handle not found.

client/src/routes/Chat.jsx

@@ -8,11 +8,9 @@ import TextChat from '../components/Input';
 
 import store from '~/store';
 import manualSWR from '~/utils/fetchers';
-// import TextChat from './components/Main/TextChat';
-
-// {/* <TextChat messages={messages} /> */}
 
 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);
@@ -28,18 +26,23 @@ export default function Chat() {
   useEffect(() => {
     if (conversation === null) {
       // no current conversation, we need to do something
-      if (conversationId == 'new') {
+      if (conversationId === 'new') {
         // create new
         newConversation();
-      } else {
+      } else if (conversationId) {
         // fetch it from server
         conversationTrigger().then(setConversation);
         setMessages(null);
-        console.log('NEED TO FETCH DATA');
+      } else {
+        navigate(`/chat/new`);
       }
-    } else if (conversation?.conversationId !== conversationId)
+    } 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]);
 
   // when messagesTree is null (<=> messages is null)
@@ -50,7 +53,12 @@ export default function Chat() {
     }
   }, [conversation?.conversationId]);
 
+  // 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 (
     <>

client/src/routes/Search.jsx

@@ -0,0 +1,50 @@
+import React, { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useRecoilState, useRecoilValue } from 'recoil';
+
+import Messages from '../components/Messages';
+import TextChat from '../components/Input';
+
+import store from '~/store';
+
+export default function Search() {
+  const [searchQuery, setSearchQuery] = useRecoilState(store.searchQuery);
+  const conversation = useRecoilValue(store.conversation);
+  const { searchPlaceholderConversation } = store.useConversation();
+  const { query } = useParams();
+  const navigate = useNavigate();
+
+  // when conversation changed or conversationId (in url) changed
+  useEffect(() => {
+    if (conversation === null) {
+      // no current conversation, we need to do something
+      if (query) {
+        // create new
+        searchPlaceholderConversation();
+        setSearchQuery(query);
+      } else {
+        navigate(`/chat/new`);
+      }
+    } else if (conversation?.conversationId === 'search') {
+      // jump to search page
+      if (searchQuery !== query) navigate(`/search/${searchQuery}`);
+    } else {
+      // conversationId (in url) should always follow conversation?.conversationId, unless conversation is null
+      navigate(`/chat/${conversation?.conversationId}`);
+    }
+  }, [conversation, query, searchQuery]);
+
+  // if not a search
+  if (conversation?.conversationId !== 'search') return null;
+  // if query not match
+  if (searchQuery !== query) return null;
+  // if query is null
+  if (!query) return null;
+
+  return (
+    <>
+      <Messages isSearchView={true} />
+      <TextChat isSearchView={true} />
+    </>
+  );
+}