fix: missing icon of search result

feat: use search result message as single list

api/server/routes/search.js

@@ -42,7 +42,7 @@ router.get('/', async function (req, res) {
         },
         true
       )
-    ).hits.map((message) => {
+    ).hits.map(message => {
       const { _formatted, ...rest } = message;
       return {
         ...rest,
@@ -64,7 +64,9 @@ router.get('/', async function (req, res) {
         message.conversationId = cleanUpPrimaryKeyValue(message.conversationId);
       }
       if (result.convoMap[message.conversationId] && !message.error) {
-        message = { ...message, title: result.convoMap[message.conversationId].title };
+        const convo = result.convoMap[message.conversationId];
+        const { title, chatGptLabel, model } = convo;
+        message = { ...message, ...{ title, chatGptLabel, model } };
         activeMessages.push(message);
       }
     }
@@ -91,12 +93,12 @@ router.get('/clear', async function (req, res) {
 
 router.get('/test', async function (req, res) {
   const { q } = req.query;
-  const messages = (
-    await Message.meiliSearch(q, { attributesToHighlight: ['text'] }, true)
-  ).hits.map((message) => {
+  const messages = (await Message.meiliSearch(q, { attributesToHighlight: ['text'] }, true)).hits.map(
+    message => {
       const { _formatted, ...rest } = message;
       return { ...rest, searchResult: true, text: _formatted.text };
-  });
+    }
+  );
   res.send(messages);
 });
 

client/src/components/Messages/Message.jsx

@@ -25,7 +25,17 @@ export default function Message({
   const setLatestMessage = useSetRecoilState(store.latestMessage);
   const { model, chatGptLabel, promptPrefix } = conversation;
   const [abortScroll, setAbort] = useState(false);
-  const { sender, text, searchResult, isCreatedByUser, error, submitting } = message;
+  const {
+    sender,
+    text,
+    searchResult,
+    isCreatedByUser,
+    error,
+    submitting,
+    model: messageModel,
+    chatGptLabel: messageChatGptLabel,
+    searchResult: isSearchResult
+  } = message;
   const textEditor = useRef(null);
   const last = !message?.children?.length;
   const edit = message.messageId == currentEditId;
@@ -70,9 +80,9 @@ export default function Message({
   const icon = getIconOfModel({
     sender,
     isCreatedByUser,
-    model,
+    model: isSearchResult ? messageModel : model,
     searchResult,
-    chatGptLabel,
+    chatGptLabel: isSearchResult ? messageChatGptLabel : chatGptLabel,
     promptPrefix,
     error
   });

client/src/components/Messages/MultiMessage.jsx

@@ -6,7 +6,8 @@ export default function MultiMessage({
   messagesTree,
   scrollToBottom,
   currentEditId,
-  setCurrentEditId
+  setCurrentEditId,
+  isSearchView
 }) {
   const [siblingIdx, setSiblingIdx] = useState(0);
 
@@ -30,6 +31,26 @@ export default function MultiMessage({
   }
 
   const message = messagesTree[messagesTree.length - siblingIdx - 1];
+  if (isSearchView)
+    return (
+      <>
+        {messagesTree
+          ? messagesTree.map(message => (
+              <Message
+                key={message.messageId}
+                conversation={conversation}
+                message={message}
+                scrollToBottom={scrollToBottom}
+                currentEditId={currentEditId}
+                setCurrentEditId={null}
+                siblingIdx={1}
+                siblingCount={1}
+                setSiblingIdx={null}
+              />
+            ))
+          : null}
+      </>
+    );
   return (
     <Message
       key={message.messageId}

client/src/components/Messages/index.jsx

@@ -107,6 +107,7 @@ export default function Messages({ isSearchView = false }) {
                 scrollToBottom={scrollToBottom}
                 currentEditId={currentEditId}
                 setCurrentEditId={setCurrentEditId}
+                isSearchView={isSearchView}
               />
               <CSSTransition
                 in={showScrollButton}

client/src/utils/buildTree.js

@@ -9,6 +9,9 @@ export default function buildTree(messages, groupAll = false) {
   let messageMap = {};
   let rootMessages = [];
 
+  if (groupAll) {
+    return messages.map((m, idx) => ({ ...m, bg: idx % 2 === 0 ? even : odd }));
+  }
   if (!groupAll) {
     // Traverse the messages array and store each element in messageMap.
     messages.forEach(message => {
@@ -22,18 +25,18 @@ export default function buildTree(messages, groupAll = false) {
     return rootMessages;
   }
 
-  // Group all messages into one tree
-  let parentId = null;
-  messages.forEach((message, i) => {
-    messageMap[message.messageId] = { ...message, bg: i % 2 === 0 ? even : odd, children: [] };
-    const currentMessage = messageMap[message.messageId];
-    const parentMessage = messageMap[parentId];
-    if (parentMessage) parentMessage.children.push(currentMessage);
-    else rootMessages.push(currentMessage);
-    parentId = message.messageId;
-  });
+  // // Group all messages into one tree
+  // let parentId = null;
+  // messages.forEach((message, i) => {
+  //   messageMap[message.messageId] = { ...message, bg: i % 2 === 0 ? even : odd, children: [] };
+  //   const currentMessage = messageMap[message.messageId];
+  //   const parentMessage = messageMap[parentId];
+  //   if (parentMessage) parentMessage.children.push(currentMessage);
+  //   else rootMessages.push(currentMessage);
+  //   parentId = message.messageId;
+  // });
 
-  return rootMessages;
+  // return rootMessages;
 
   // Group all messages by conversation, doesn't look great
   // Traverse the messages array and store each element in messageMap.

client/src/utils/index.js

@@ -38,40 +38,55 @@ export const languages = [
   'pascal'
 ];
 
-export const getIconOfModel = ({ size=30, sender, isCreatedByUser, searchResult, model, chatGptLabel, error, ...props }) => {
-  // 'ai' is used as 'model' is not accurate for search results
-  let ai = searchResult ? sender : model;
+export const getIconOfModel = ({
+  size = 30,
+  sender,
+  isCreatedByUser,
+  searchResult,
+  model,
+  chatGptLabel,
+  error,
+  ...props
+}) => {
   const { button } = props;
   const bgColors = {
-    chatgpt: `rgb(16, 163, 127${ button ? ', 0.75' : ''})`,
-    chatgptBrowser: `rgb(25, 207, 207${ button ? ', 0.75' : ''})`,
+    chatgpt: `rgb(16, 163, 127${button ? ', 0.75' : ''})`,
+    chatgptBrowser: `rgb(25, 207, 207${button ? ', 0.75' : ''})`,
     bingai: 'transparent',
     sydney: 'radial-gradient(circle at 90% 110%, #F0F0FA, #D0E0F9)',
-    chatgptCustom: `rgb(0, 163, 255${ button ? ', 0.75' : ''})`,
+    chatgptCustom: `rgb(0, 163, 255${button ? ', 0.75' : ''})`
   };
 
   if (isCreatedByUser)
     return (
       <div
-        title='User'
-        style={{ background: 'radial-gradient(circle at 90% 110%, rgb(1 43 128), rgb(17, 139, 161))', color: 'white', fontSize: 12, width: size, height: size }}
+        title="User"
+        style={{
+          background: 'radial-gradient(circle at 90% 110%, rgb(1 43 128), rgb(17, 139, 161))',
+          color: 'white',
+          fontSize: 12,
+          width: size,
+          height: size
+        }}
         className={`relative flex items-center justify-center rounded-sm text-white ` + props?.className}
       >
         User
       </div>
-    )
+    );
   else if (!isCreatedByUser) {
     // TODO: use model from convo, rather than submit
     // const { model, chatGptLabel, promptPrefix } = convo;
-    let background = bgColors[ai];
-    const isBing = ai === 'bingai' || ai === 'sydney';
+    let background = bgColors[model];
+    const isBing = model === 'bingai' || model === 'sydney';
 
     return (
       <div
-        title={chatGptLabel || ai}
-        style={
-          { background: background || 'radial-gradient(circle at 90% 110%, #F0F0FA, #D0E0F9)', width: size, height: size }
-        }
+        title={chatGptLabel || model}
+        style={{
+          background: background || 'radial-gradient(circle at 90% 110%, #F0F0FA, #D0E0F9)',
+          width: size,
+          height: size
+        }}
         className={`relative flex items-center justify-center rounded-sm text-white ` + props?.className}
       >
         {isBing ? <BingIcon size={size * 0.7} /> : <GPTIcon size={size * 0.7} />}
@@ -85,11 +100,17 @@ export const getIconOfModel = ({ size=30, sender, isCreatedByUser, searchResult,
   } else
     return (
       <div
-        title='User'
-        style={{ background: 'radial-gradient(circle at 90% 110%, rgb(1 43 128), rgb(17, 139, 161))', color: 'white', fontSize: 12, width: size, height: size }}
+        title="User"
+        style={{
+          background: 'radial-gradient(circle at 90% 110%, rgb(1 43 128), rgb(17, 139, 161))',
+          color: 'white',
+          fontSize: 12,
+          width: size,
+          height: size
+        }}
         className={`relative flex items-center justify-center rounded-sm p-1 text-white ` + props?.className}
       >
         {chatGptLabel}
       </div>
-    )
-}
+    );
+};