feat: support search-style-url

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

client/src/components/Input/index.jsx

@@ -13,7 +13,7 @@ import { useMessageHandler } from '../../utils/handleSubmit';
 
 import store from '~/store';
 
-export default function TextChat() {
+export default function TextChat({ isSearchView = false }) {
   const inputRef = useRef(null);
   const isComposing = useRef(false);
 
@@ -36,7 +36,7 @@ export default function TextChat() {
 
   // auto focus to input, when enter a conversation.
   useEffect(() => {
-    inputRef.current?.focus();
+    if (conversation?.conversationId !== 'search') inputRef.current?.focus();
     setText('');
   }, [conversation?.conversationId]);
 
@@ -108,7 +108,6 @@ export default function TextChat() {
     setText(value);
   };
 
-  const isSearchView = messages?.[0]?.searchResult === true;
   const getPlaceholderText = () => {
     if (isSearchView) {
       return 'Click a message title to open its conversation.';

client/src/components/Messages/index.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef, useCallback } from 'react';
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 import Spinner from '../svg/Spinner';
 import { throttle } from 'lodash';
 import { CSSTransition } from 'react-transition-group';
@@ -8,18 +8,25 @@ import MultiMessage from './MultiMessage';
 
 import store from '~/store';
 
-export default function Messages() {
+export default function Messages({ isSearchView = false }) {
   const [currentEditId, setCurrentEditId] = useState(-1);
-  const messagesTree = useRecoilValue(store.messagesTree);
-  const conversation = useRecoilValue(store.conversation) || {};
-  const { conversationId, model, chatGptLabel } = conversation;
-  const models = useRecoilValue(store.models) || [];
   const [showScrollButton, setShowScrollButton] = useState(false);
   const scrollableRef = useRef(null);
   const messagesEndRef = useRef(null);
 
+  const messagesTree = useRecoilValue(store.messagesTree);
+  const searchResultMessagesTree = useRecoilValue(store.searchResultMessagesTree);
+
+  const _messagesTree = isSearchView ? searchResultMessagesTree : messagesTree;
+
+  const conversation = useRecoilValue(store.conversation) || {};
+  const { conversationId, model, chatGptLabel } = conversation;
+
+  const models = useRecoilValue(store.models) || [];
   const modelName = models.find(element => element.model == model)?.name;
 
+  const searchQuery = useRecoilValue(store.searchQuery);
+
   useEffect(() => {
     const timeoutId = setTimeout(() => {
       const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
@@ -36,7 +43,7 @@ export default function Messages() {
       clearTimeout(timeoutId);
       window.removeEventListener('scroll', handleScroll);
     };
-  }, [messagesTree]);
+  }, [_messagesTree]);
 
   const scrollToBottom = useCallback(
     throttle(
@@ -81,16 +88,18 @@ export default function Messages() {
       <div className="dark:gpt-dark-gray h-full">
         <div className="dark:gpt-dark-gray flex h-full flex-col items-center text-sm">
           <div className="flex w-full items-center justify-center gap-1 border-b border-black/10 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-900/50 dark:bg-gray-700 dark:text-gray-300">
-            Model: {modelName} {chatGptLabel ? `(${chatGptLabel})` : null}
+            {isSearchView
+              ? `Search: ${searchQuery}`
+              : `Model: ${modelName} ${chatGptLabel ? `(${chatGptLabel})` : ''}`}
           </div>
-          {messagesTree === null ? (
+          {_messagesTree === null ? (
             <Spinner />
           ) : (
             <>
               <MultiMessage
                 key={conversationId} // avoid internal state mixture
                 conversation={conversation}
-                messagesTree={messagesTree}
+                messagesTree={_messagesTree}
                 scrollToBottom={scrollToBottom}
                 currentEditId={currentEditId}
                 setCurrentEditId={setCurrentEditId}

client/src/components/Nav/SearchBar.jsx

@@ -1,27 +1,31 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { debounce } from 'lodash';
 import { Search } from 'lucide-react';
-import { useSetRecoilState } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import store from '~/store';
 
 export default function SearchBar({ fetch, clearSearch }) {
   // const dispatch = useDispatch();
   const [inputValue, setInputValue] = useState('');
-  const setSearchQuery = useSetRecoilState(store.searchQuery);
+  const [searchQuery, setSearchQuery] = useRecoilState(store.searchQuery);
 
   // const [inputValue, setInputValue] = useState('');
 
   const debouncedChangeHandler = useCallback(
     debounce(q => {
       setSearchQuery(q);
-      if (q.length > 0) {
-        fetch(q, 1);
-      }
     }, 750),
     [setSearchQuery]
   );
 
+  useEffect(() => {
+    if (searchQuery.length > 0) {
+      fetch(searchQuery, 1);
+      setInputValue(searchQuery);
+    }
+  }, [searchQuery]);
+
   const handleKeyUp = e => {
     const { value } = e.target;
     if (e.keyCode === 8 && value === '') {

client/src/components/Nav/index.jsx

@@ -27,12 +27,12 @@ export default function Nav({ navVisible, setNavVisible }) {
   const searchQuery = useRecoilValue(store.searchQuery);
   const isSearchEnabled = useRecoilValue(store.isSearchEnabled);
   const isSearching = useRecoilValue(store.isSearching);
-  const { newConversation } = store.useConversation();
+  const { newConversation, searchPlaceholderConversation } = store.useConversation();
 
   // current conversation
   const conversation = useRecoilValue(store.conversation);
   const { conversationId } = conversation || {};
-  const setMessages = useSetRecoilState(store.messages);
+  const setSearchResultMessages = useSetRecoilState(store.searchResultMessages);
 
   // refreshConversationsHint is used for other components to ask refresh of Nav
   const refreshConversationsHint = useRecoilValue(store.refreshConversationsHint);
@@ -66,10 +66,8 @@ export default function Nav({ navVisible, setNavVisible }) {
     setPageNumber(res.pageNumber);
     setPages(res.pages);
     setIsFetching(false);
-    if (res.messages?.length > 0) {
-      setMessages(res.messages);
-      // dispatch(setDisabled(true));
-    }
+    searchPlaceholderConversation();
+    setSearchResultMessages(res.messages);
   };
 
   // TODO: dont need this