chore: re-organize message modules, fix icon size, convo reset properly rebuilds Tree

.gitignore

@@ -47,7 +47,6 @@ bower_components/
 .env
 cache.json
 api/data/
-.eslintrc.js
 owner.yml
 archive
 .vscode/settings.json

client/src/App.jsx

@@ -8,7 +8,7 @@ import useDocumentTitle from '~/hooks/useDocumentTitle';
 import { useSelector } from 'react-redux';
 
 const App = () => {
-  const { messages } = useSelector((state) => state.messages);
+  const { messages, messageTree } = useSelector((state) => state.messages);
   const { title } = useSelector((state) => state.convo);
   const { conversationId } = useSelector((state) => state.convo);
   const [ navVisible, setNavVisible ]= useState(false)
@@ -25,6 +25,7 @@ const App = () => {
           ) : (
             <Messages
               messages={messages}
+              messageTree={messageTree}
             />
           )}
           <TextChat messages={messages} />

client/src/components/Main/TextChat.jsx

@@ -157,15 +157,17 @@ export default function TextChat({ messages }) {
     const message = text.trim();
     const sender = model === 'chatgptCustom' ? chatGptLabel : model;
     let parentMessageId = convo.parentMessageId || '00000000-0000-0000-0000-000000000000';
-    if (resetConvo(messages, sender)) {
+    let currentMessages = messages;
+    if (resetConvo(currentMessages, sender)) {
       parentMessageId = '00000000-0000-0000-0000-000000000000';
       dispatch(setNewConvo());
+      currentMessages = [];
     }
     const currentMsg = { sender: 'User', text: message, current: true, isCreatedByUser: true, parentMessageId , messageId: fakeMessageId };
     const initialResponse = { sender, text: '', parentMessageId: fakeMessageId, submitting: true };
 
     dispatch(setSubmitState(true));
-    dispatch(setMessages([...messages, currentMsg, initialResponse]));
+    dispatch(setMessages([...currentMessages, currentMsg, initialResponse]));
     dispatch(setText(''));
 
     const submission = {
@@ -177,7 +179,7 @@ export default function TextChat({ messages }) {
         chatGptLabel,
         promptPrefix,
       },
-      messages,
+      messages: currentMessages,
       currentMsg,
       initialResponse,
       sender,

client/src/components/Messages/Message.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import TextWrapper from './TextWrapper';
+import MultiMessage from './MultiMessage';
 import { useSelector, useDispatch } from 'react-redux';
 import HoverButtons from './HoverButtons';
 import SiblingSwitch from './SiblingSwitch';
@@ -11,42 +12,6 @@ import { setText } from '~/store/textSlice';
 import { setConversation } from '../../store/convoSlice';
 import { getIconOfModel } from '../../utils';
 
-const MultiMessage = ({
-  messageList,
-  messages,
-  scrollToBottom,
-  currentEditId,
-  setCurrentEditId
-}) => {
-  const [siblingIdx, setSiblingIdx] = useState(0)
-
-  const setSiblingIdxRev = (value) => {
-    setSiblingIdx(messageList?.length - value - 1)
-  }
-
-  if (!messageList?.length) return null;
-
-  if (siblingIdx >= messageList?.length) {
-    setSiblingIdx(0)
-    return null
-  }
-
-  return <Message
-          key={messageList[messageList.length - siblingIdx - 1].messageId}
-          message={messageList[messageList.length - siblingIdx - 1]}
-          messages={messages}
-          scrollToBottom={scrollToBottom}
-          currentEditId={currentEditId}
-          setCurrentEditId={setCurrentEditId}
-
-          siblingIdx={messageList.length - siblingIdx - 1}
-          siblingCount={messageList.length}
-          setSiblingIdx={setSiblingIdxRev}
-        />
-}
-
-export { MultiMessage };
-
 export default function Message({
   message,
   messages,
@@ -84,9 +49,9 @@ export default function Message({
       dispatch(setConversation({parentMessageId: message?.messageId}))
   }, [last, ])
 
-  if (sender === '') {
-    return <Spinner />;
-  }
+  // if (sender === '') {
+  //   return <Spinner />;
+  // }
 
   const enterEdit = (cancel) => setCurrentEditId(cancel?-1:message.messageId)
 
@@ -167,7 +132,7 @@ export default function Message({
       >
         <div className="relative m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
 
-          <div className="relative flex w-[30px] flex-col items-end text-right text-xs md:text-sm">
+          <div className="relative flex h-[30px] w-[30px] flex-col items-end text-right text-xs md:text-sm">
             {typeof icon === 'string' && icon.match(/[^\u0000-\u007F]+/) ? (
               <span className=" direction-rtl w-40 overflow-x-scroll">{icon}</span>
             ) : (

client/src/components/Messages/MultiMessage.jsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import Message from './Message';
+
+export default function MultiMessage({
+  messageList,
+  messages,
+  scrollToBottom,
+  currentEditId,
+  setCurrentEditId
+}) {
+  const [siblingIdx, setSiblingIdx] = useState(0);
+
+  const setSiblingIdxRev = (value) => {
+    setSiblingIdx(messageList?.length - value - 1);
+  };
+
+  // if (!messageList?.length) return null;
+  if (!(messageList && messageList.length)) {
+    return null;
+  }
+
+  if (siblingIdx >= messageList?.length) {
+    setSiblingIdx(0);
+    return null;
+  }
+
+  return (
+    <Message
+      key={messageList[messageList.length - siblingIdx - 1].messageId}
+      message={messageList[messageList.length - siblingIdx - 1]}
+      messages={messages}
+      scrollToBottom={scrollToBottom}
+      currentEditId={currentEditId}
+      setCurrentEditId={setCurrentEditId}
+      siblingIdx={messageList.length - siblingIdx - 1}
+      siblingCount={messageList.length}
+      setSiblingIdx={setSiblingIdxRev}
+    />
+  );
+}

client/src/components/Messages/index.jsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useState, useRef, useMemo } from 'react';
+import Spinner from '../svg/Spinner';
 import { CSSTransition } from 'react-transition-group';
 import ScrollToBottom from './ScrollToBottom';
-import { MultiMessage } from './Message';
-import Conversation from '../Conversations/Conversation';
+import MultiMessage from './MultiMessage';
+import buildTree from '~/utils/buildTree';
 import { useSelector } from 'react-redux';
 
-const Messages = ({ messages }) => {
-  const [currentEditId, setCurrentEditId] = useState(-1)
+const Messages = ({ messages, messageTree }) => {
+  const [currentEditId, setCurrentEditId] = useState(-1);
   const { conversationId } = useSelector((state) => state.convo);
   const [showScrollButton, setShowScrollButton] = useState(false);
   const scrollableRef = useRef(null);
@@ -23,26 +24,6 @@ const Messages = ({ messages }) => {
       clearTimeout(timeoutId);
     };
   }, [messages]);
-  
-  const messageTree = useMemo(() => buildTree(messages), [messages, ]);
-
-  function buildTree(messages) {
-    let messageMap = {};
-    let rootMessages = [];
-  
-    // Traverse the messages array and store each element in messageMap.
-    messages.forEach(message => {
-      messageMap[message.messageId] = {...message, children: []};
-
-      const parentMessage = messageMap[message.parentMessageId];
-      if (parentMessage)
-        parentMessage.children.push(messageMap[message.messageId]);
-      else 
-        rootMessages.push(messageMap[message.messageId]);
-    });
-  
-    return rootMessages;
-  }
 
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -79,28 +60,33 @@ const Messages = ({ messages }) => {
       onScroll={debouncedHandleScroll}
     >
       {/* <div className="flex-1 overflow-hidden"> */}
-      <div className="h-full dark:gpt-dark-gray">
-        <div className="flex h-full flex-col items-center text-sm dark:gpt-dark-gray">
-          <MultiMessage
-            key={conversationId} // avoid internal state mixture
-            messageList={messageTree}
-            messages={messages}
-            scrollToBottom={scrollToBottom}
-            currentEditId={currentEditId}
-            setCurrentEditId={setCurrentEditId}
-          />
-          <CSSTransition
-            in={showScrollButton}
-            timeout={400}
-            classNames="scroll-down"
-            unmountOnExit={false}
-            // appear
-          >
-            {() => showScrollButton && <ScrollToBottom scrollHandler={scrollHandler} />}
-          </CSSTransition>
-
+      <div className="dark:gpt-dark-gray h-full">
+        <div className="dark:gpt-dark-gray flex h-full flex-col items-center text-sm">
+          {messageTree.length === 0 ? (
+            <Spinner />
+          ) : (
+            <>
+              <MultiMessage
+                key={conversationId} // avoid internal state mixture
+                messageList={messageTree}
+                messages={messages}
+                scrollToBottom={scrollToBottom}
+                currentEditId={currentEditId}
+                setCurrentEditId={setCurrentEditId}
+              />
+              <CSSTransition
+                in={showScrollButton}
+                timeout={400}
+                classNames="scroll-down"
+                unmountOnExit={false}
+                // appear
+              >
+                {() => showScrollButton && <ScrollToBottom scrollHandler={scrollHandler} />}
+              </CSSTransition>
+            </>
+          )}
           <div
-            className="group h-32 w-full flex-shrink-0 dark:border-gray-900/50 dark:gpt-dark-gray md:h-48"
+            className="dark:gpt-dark-gray group h-32 w-full flex-shrink-0 dark:border-gray-900/50 md:h-48"
             ref={messagesEndRef}
           />
         </div>

client/src/store/messageSlice.js

@@ -1,7 +1,9 @@
 import { createSlice } from '@reduxjs/toolkit';
+import buildTree from '~/utils/buildTree';
 
 const initialState = {
   messages: [],
+  messageTree: []
 };
 
 const currentSlice = createSlice({
@@ -10,6 +12,7 @@ const currentSlice = createSlice({
   reducers: {
     setMessages: (state, action) => {
       state.messages = action.payload;
+      state.messageTree = buildTree(action.payload);
     },
     setEmptyMessage: (state) => {
       state.messages = [

client/src/utils/buildTree.js

@@ -0,0 +1,17 @@
+export default function buildTree(messages) {
+  let messageMap = {};
+  let rootMessages = [];
+
+  // Traverse the messages array and store each element in messageMap.
+  messages.forEach(message => {
+    messageMap[message.messageId] = {...message, children: []};
+
+    const parentMessage = messageMap[message.parentMessageId];
+    if (parentMessage)
+      parentMessage.children.push(messageMap[message.messageId]);
+    else 
+      rootMessages.push(messageMap[message.messageId]);
+  });
+
+  return rootMessages;
+}