feat: fully multipath and resubmit

api/server/routes/convos.js

@@ -22,7 +22,7 @@ router.post('/gen_title', async (req, res) => {
     : await titleConvo({
         model: convo?.model,
         message: firstMessage?.text,
-        // response: JSON.stringify(secondMessage?.text || '')
+        response: JSON.stringify(secondMessage?.text || '')
       });
 
   await saveConvo({

client/src/components/Main/TextChat.jsx

@@ -34,7 +34,7 @@ export default function TextChat({ messages }) {
   const messageHandler = (data, currentState, currentMsg) => {
     const { messages, _currentMsg, message, sender } = currentState;
 
-    dispatch(setMessages([...messages, currentMsg, { sender, text: data }]));
+    dispatch(setMessages([...messages, currentMsg, { sender, text: data, parentMessageId: currentMsg?.messageId, messageId: currentMsg?.messageId + '_' }]));
   };
 
   const createdHandler = (data, currentState, currentMsg) => {
@@ -152,11 +152,13 @@ export default function TextChat({ messages }) {
       return;
     }
 
+    // this is not a real messageId, it is used as placeholder before real messageId returned
+    const fakeMessageId = crypto.randomUUID();
     const isCustomModel = model === 'chatgptCustom' || !initial[model];
     const message = text.trim();
-    const currentMsg = { sender: 'User', text: message, current: true, isCreatedByUser: true };
+    const currentMsg = { sender: 'User', text: message, current: true, isCreatedByUser: true, parentMessageId: convo.parentMessageId || '00000000-0000-0000-0000-000000000000', messageId: fakeMessageId };
     const sender = model === 'chatgptCustom' ? chatGptLabel : model;
-    const initialResponse = { sender, text: '' };
+    const initialResponse = { sender, text: '', parentMessageId: fakeMessageId };
 
     dispatch(setSubmitState(true));
     dispatch(setMessages([...messages, currentMsg, initialResponse]));
@@ -166,9 +168,7 @@ export default function TextChat({ messages }) {
       convo,
       isCustomModel,
       message: { 
-        sender: 'User',
-        text: message, 
-        isCreatedByUser: true,
+        ...currentMsg,
         model,
         chatGptLabel,
         promptPrefix,
@@ -193,7 +193,7 @@ export default function TextChat({ messages }) {
         payload = {
           ...payload,
           conversationId: convo.conversationId,
-          parentMessageId: convo.parentMessageId
+          parentMessageId: convo.parentMessageId || '00000000-0000-0000-0000-000000000000'
         };
       }
 

client/src/components/Messages/Message.jsx

@@ -4,20 +4,59 @@ import { useSelector, useDispatch } from 'react-redux';
 import GPTIcon from '../svg/GPTIcon';
 import BingIcon from '../svg/BingIcon';
 import HoverButtons from './HoverButtons';
+import SiblingSwitch from './SiblingSwitch';
 import Spinner from '../svg/Spinner';
 import { setError } from '~/store/convoSlice';
 import { setMessages } from '~/store/messageSlice';
 import { setSubmitState, setSubmission } from '~/store/submitSlice';
 import { setText } from '~/store/textSlice';
+import { setConversation } from '../../store/convoSlice';
+
+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,
-  last = false,
   scrollToBottom,
-  edit,
-  currentEditIdx,
-  enterEdit
+  currentEditId,
+  setCurrentEditId,
+  siblingIdx,
+  siblingCount,
+  setSiblingIdx
 }) {
   const { isSubmitting, model, chatGptLabel, promptPrefix } = useSelector((state) => state.submit);
   const [abortScroll, setAbort] = useState(false);
@@ -26,6 +65,9 @@ export default function Message({
   const convo = useSelector((state) => state.convo);
   const { initial } = useSelector((state) => state.models);
   const { error: convoError } = convo;
+  const last = !message?.children?.length
+
+  const edit = message.messageId == currentEditId;
 
   const dispatch = useDispatch();
 
@@ -38,10 +80,17 @@ export default function Message({
     }
   }, [isSubmitting, text, blinker, scrollToBottom, abortScroll]);
 
+  useEffect(() => {
+    if (last)
+      dispatch(setConversation({parentMessageId: message?.messageId}))
+  }, [last, ])
+
   if (sender === '') {
     return <Spinner />;
   }
 
+  const enterEdit = (cancel) => setCurrentEditId(cancel?-1:message.messageId)
+
   const handleWheel = () => {
     if (blinker) {
       setAbort(true);
@@ -105,97 +154,109 @@ export default function Message({
       return;
     }
 
+    // this is not a real messageId, it is used as placeholder before real messageId returned
+    const fakeMessageId = crypto.randomUUID();
     const isCustomModel = model === 'chatgptCustom' || !initial[model];
-    const currentMsg = { ...message, sender: 'User', text: text.trim(), current: true, isCreatedByUser: true };
-    console.log(model)
+    const currentMsg = { ...message, sender: 'User', text: text.trim(), current: true, isCreatedByUser: true, messageId: fakeMessageId };
     const sender = model === 'chatgptCustom' ? chatGptLabel : model;
 
-    const initialResponse = { sender, text: '' };
+    const initialResponse = { sender, text: '', parentMessageId: fakeMessageId };
 
     dispatch(setSubmitState(true));
-    dispatch(setMessages([...messages.slice(0, currentEditIdx), currentMsg, initialResponse]));
+    dispatch(setMessages([...messages, currentMsg, initialResponse]));
     dispatch(setText(''));
 
     const submission = {
       isCustomModel,
       message: { 
-        ...message, 
-        text: text.trim(),
+        ...currentMsg, 
         model,
         chatGptLabel,
         promptPrefix,
       },
-      messages: messages.slice(0, currentEditIdx),
+      messages: messages,
       currentMsg,
       initialResponse,
       sender,
     };
-    console.log('User Input:', message);
+    console.log('User Input:', currentMsg?.text);
     // handleSubmit(submission);
     dispatch(setSubmission(submission));
 
+    setSiblingIdx(siblingCount - 1)
     enterEdit(true);
   };
 
   return (
-    <div
-      {...props}
-      onWheel={handleWheel}
-    >
-      <div className="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">
-        <strong className="relative flex 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>
-          ) : (
-            icon
-          )}
-        </strong>
-        <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
-          <div className="flex flex-grow flex-col gap-3">
-            {error ? (
-              <div className="flex flex min-h-[20px] flex-col flex-grow items-start gap-4 gap-2 whitespace-pre-wrap text-red-500">
-                <div className="rounded-md border border-red-500 bg-red-500/10 py-2 px-3 text-sm text-gray-600 dark:text-gray-100">
-                  {text}
-                </div>
-              </div>
-            ) : 
-              edit ? (
-                <div className="flex min-h-[20px] flex-col flex-grow items-start gap-4 whitespace-pre-wrap">
-                  {/* <div className={`${blinker ? 'result-streaming' : ''} markdown prose dark:prose-invert light w-full break-words`}> */}
+    <>
+      <div
+        {...props}
+        onWheel={handleWheel}
+      >
+        <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="markdown prose dark:prose-invert light w-full break-words border-none focus:outline-none" 
-                    contentEditable={true} ref={textEditor} suppressContentEditableWarning={true}>
+          <div className="relative flex 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>
+            ) : (
+              icon
+            )}
+            <SiblingSwitch siblingIdx={siblingIdx} siblingCount={siblingCount} setSiblingIdx={setSiblingIdx} />
+          </div>
+          <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
+            <div className="flex flex-grow flex-col gap-3">
+              {error ? (
+                <div className="flex flex min-h-[20px] flex-col flex-grow items-start gap-4 gap-2 whitespace-pre-wrap text-red-500">
+                  <div className="rounded-md border border-red-500 bg-red-500/10 py-2 px-3 text-sm text-gray-600 dark:text-gray-100">
                     {text}
                   </div>
-                  <div className="text-center mt-2 flex w-full justify-center">
-                    <button
-                      className="btn relative btn-primary mr-2"
-                      disabled={isSubmitting}
-                      onClick={resubmitMessage}
-                    >
-                      Save & Submit
-                    </button>
-                    <button
-                      className="btn relative btn-neutral"
-                      onClick={() => enterEdit(true)}
-                    >
-                      Cancel
-                    </button>
-                  </div>
                 </div>
-              ) : (
-                <div className="flex min-h-[20px] flex-col flex-grow items-start gap-4 whitespace-pre-wrap">
-                  {/* <div className={`${blinker ? 'result-streaming' : ''} markdown prose dark:prose-invert light w-full break-words`}> */}
-                  <div className="markdown prose dark:prose-invert light w-full break-words">
-                    {!isCreatedByUser ? wrapText(text) : text}
-                    {blinker && <span className="result-streaming">█</span>}
+              ) : 
+                edit ? (
+                  <div className="flex min-h-[20px] flex-col flex-grow items-start gap-4 whitespace-pre-wrap">
+                    {/* <div className={`${blinker ? 'result-streaming' : ''} markdown prose dark:prose-invert light w-full break-words`}> */}
+                    
+                    <div className="markdown prose dark:prose-invert light w-full break-words border-none focus:outline-none" 
+                      contentEditable={true} ref={textEditor} suppressContentEditableWarning={true}>
+                      {text}
+                    </div>
+                    <div className="text-center mt-2 flex w-full justify-center">
+                      <button
+                        className="btn relative btn-primary mr-2"
+                        disabled={isSubmitting}
+                        onClick={resubmitMessage}
+                      >
+                        Save & Submit
+                      </button>
+                      <button
+                        className="btn relative btn-neutral"
+                        onClick={() => enterEdit(true)}
+                      >
+                        Cancel
+                      </button>
+                    </div>
                   </div>
-                </div>
-              )}
+                ) : (
+                  <div className="flex min-h-[20px] flex-col flex-grow items-start gap-4 whitespace-pre-wrap">
+                    {/* <div className={`${blinker ? 'result-streaming' : ''} markdown prose dark:prose-invert light w-full break-words`}> */}
+                    <div className="markdown prose dark:prose-invert light w-full break-words">
+                      {!isCreatedByUser ? wrapText(text) : text}
+                      {blinker && <span className="result-streaming">█</span>}
+                    </div>
+                  </div>
+                )}
+            </div>
+              <HoverButtons user={!error && isCreatedByUser && !edit} onClick={() => enterEdit()}/>
           </div>
-            <HoverButtons user={!error && isCreatedByUser && !edit} onClick={() => enterEdit()}/>
         </div>
       </div>
-    </div>
+      <MultiMessage
+          messageList={message.children}
+          messages={messages}
+          scrollToBottom={scrollToBottom}
+          currentEditId={currentEditId}
+          setCurrentEditId={setCurrentEditId}
+      />
+    </>
   );
 }

client/src/components/Messages/SiblingSwitch.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+export default function SiblingSwitch({ 
+    siblingIdx,
+    siblingCount,
+    setSiblingIdx
+}) {
+  const previous = () => {
+    setSiblingIdx(siblingIdx - 1);
+  }
+
+  const next = () => {
+    setSiblingIdx(siblingIdx + 1);
+  }
+  return siblingCount > 1 ? (
+    <div className="text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible">
+      <button className="dark:text-white disabled:text-gray-300 dark:disabled:text-gray-400" onClick={previous} disabled={siblingIdx==0}>
+        <svg stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="15 18 9 12 15 6"></polyline></svg>
+      </button>
+      <span className="flex-grow flex-shrink-0">{siblingIdx + 1}/{siblingCount}</span>
+      <button className="dark:text-white disabled:text-gray-300 dark:disabled:text-gray-400" onClick={next} disabled={siblingIdx==siblingCount-1}>
+        <svg stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="9 18 15 12 9 6"></polyline></svg>
+      </button>
+    </div>
+  ):null;
+}

client/src/components/Messages/index.jsx

@@ -1,15 +1,17 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useMemo } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import ScrollToBottom from './ScrollToBottom';
-import Message from './Message';
+import { MultiMessage } from './Message';
+import Conversation from '../Conversations/Conversation';
+import { useSelector } from 'react-redux';
 
 const Messages = ({ messages }) => {
-  const [currentEditIdx, setCurrentEditIdx] = useState(-1)
+  const [currentEditId, setCurrentEditId] = useState(-1)
+  const { conversationId } = useSelector((state) => state.convo);
   const [showScrollButton, setShowScrollButton] = useState(false);
   const scrollableRef = useRef(null);
   const messagesEndRef = useRef(null);
 
-
   useEffect(() => {
     const timeoutId = setTimeout(() => {
       const scrollable = scrollableRef.current;
@@ -22,6 +24,29 @@ const Messages = ({ messages }) => {
     };
   }, [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: []};
+
+      if (message.parentMessageId === "00000000-0000-0000-0000-000000000000") {
+        rootMessages.push(messageMap[message.messageId]);
+      } else {
+        const parentMessage = messageMap[message.parentMessageId];
+        if (parentMessage) {
+          parentMessage.children.push(messageMap[message.messageId]);
+        }
+      }
+    });
+  
+    return rootMessages;
+  }
+
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
     setShowScrollButton(false);
@@ -59,18 +84,14 @@ const Messages = ({ messages }) => {
       {/* <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">
-          {messages.map((message, i) => (
-            <Message
-              key={i}
-              message={message}
-              messages={messages}
-              last={i === messages.length - 1}
-              scrollToBottom={i === messages.length - 1 ? scrollToBottom : null}
-              edit={i===currentEditIdx}
-              currentEditIdx={currentEditIdx}
-              enterEdit={(cancel) => setCurrentEditIdx(cancel?-1:i)}
-            />
-          ))}
+          <MultiMessage
+            key={conversationId} // avoid internal state mixture
+            messageList={messageTree}
+            messages={messages}
+            scrollToBottom={scrollToBottom}
+            currentEditId={currentEditId}
+            setCurrentEditId={setCurrentEditId}
+          />
           <CSSTransition
             in={showScrollButton}
             timeout={400}