feat: fully multipath and resubmit

2025-12-17 08:50:15 +01:00 · 2023-03-13 21:44:30 +08:00 · 2023-03-13 21:44:30 +08:00 · a4d5f6a3f2
commit a4d5f6a3f2
parent 4a39965b22
5 changed files with 197 additions and 89 deletions
--- a/api/server/routes/convos.js
+++ b/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({
--- a/client/src/components/Main/TextChat.jsx
+++ b/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'
        };
      }

--- a/client/src/components/Messages/Message.jsx
+++ b/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();

@ -37,11 +79,18 @@ export default function Message({
      scrollToBottom();
    }
  }, [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 className="markdown prose dark:prose-invert light w-full break-words border-none focus:outline-none" 
-                    contentEditable={true} ref={textEditor} suppressContentEditableWarning={true}>
+    <>
+      <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="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}
+      />
+    </>
  );
 }
--- a/client/src/components/Messages/SiblingSwitch.jsx
+++ b/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;
+}
--- a/client/src/components/Messages/index.jsx
+++ b/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;
@ -21,6 +23,29 @@ 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: []};
+
+      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' });
@ -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}