feat: support resubmit.

TODO: basic implementation. should add multi-path record in future.

feat: add deleteMessahesSince
feat: saveMessage will do createOrSave
feat: reorginazed submission

api/models/Message.js

@@ -42,21 +42,32 @@ const messageSchema = mongoose.Schema({
 const Message = mongoose.models.Message || mongoose.model('Message', messageSchema);
 
 module.exports = {
-  saveMessage: async ({ id, conversationId, parentMessageId, sender, text }) => {
+  saveMessage: async ({ id, conversationId, parentMessageId, sender, text, isCreatedByUser=false }) => {
     try {
-      await Message.create({
+      await Message.findOneAndUpdate({ id }, {
-        id,
         conversationId,
         parentMessageId,
         sender,
-        text
+        text,
-      });
+        isCreatedByUser
-      return { id, conversationId, parentMessageId, sender, text };
+      }, { upsert: true, new: true });
+      return { id, conversationId, parentMessageId, sender, text, isCreatedByUser };
     } catch (error) {
       console.error(error);
       return { message: 'Error saving message' };
     }
   },
+  deleteMessagesSince: async ({ id, conversationId }) => {
+    try {
+      message = await Message.findOne({ id }).exec()
+
+      if (message) 
+        return await Message.find({ conversationId }).deleteMany({ createdAt: { $gt: message.createdAt } }).exec();
+    } catch (error) {
+      console.error(error);
+      return { message: 'Error deleting messages' };
+    }
+  },
   getMessages: async (filter) => {
     try {
       return await Message.find(filter).sort({createdAt: 1}).exec()

api/models/index.js

@@ -1,9 +1,10 @@
-const { saveMessage, deleteMessages } = require('./Message');
+const { saveMessage, deleteMessagesSince, deleteMessages } = require('./Message');
 const { getCustomGpts, updateCustomGpt, updateByLabel, deleteCustomGpts } = require('./CustomGpt');
 const { getConvoTitle, getConvo, saveConvo } = require('./Conversation');
 
 module.exports = {
   saveMessage,
+  deleteMessagesSince,
   deleteMessages,
   getConvoTitle,
   getConvo,

api/server/routes/ask.js

@@ -10,20 +10,20 @@ const {
   customClient,
   detectCode
 } = require('../../app/');
-const { getConvo, saveMessage, deleteMessages, saveConvo } = require('../../models');
+const { getConvo, saveMessage, deleteMessagesSince, deleteMessages, saveConvo } = require('../../models');
 const { handleError, sendMessage } = require('./handlers');
 
 router.use('/bing', askBing);
 router.use('/sydney', askSydney);
 
 router.post('/', async (req, res) => {
-  let { model, text, parentMessageId, conversationId, chatGptLabel, promptPrefix } = req.body;
+  let { id, model, text, parentMessageId, conversationId, chatGptLabel, promptPrefix } = req.body;
   if (text.length === 0) {
     return handleError(res, 'Prompt empty or too short');
   }
 
-  const userMessageId = crypto.randomUUID();
+  const userMessageId = id || crypto.randomUUID();
-  let userMessage = { id: userMessageId, sender: 'User', text };
+  let userMessage = { id: userMessageId, sender: 'User', text, parentMessageId, conversationId, isCreatedByUser: true };
 
   console.log('ask log', {
     model,
@@ -53,6 +53,12 @@ router.post('/', async (req, res) => {
     }
   }
 
+  if (id) {
+    // existing conversation
+    await saveMessage(userMessage);
+    await deleteMessagesSince(userMessage);
+  } else {}
+
   res.writeHead(200, {
     Connection: 'keep-alive',
     'Content-Type': 'text/event-stream',

api/server/routes/askBing.js

@@ -2,21 +2,27 @@ const express = require('express');
 const crypto = require('crypto');
 const router = express.Router();
 const { titleConvo, getCitations, citeText, askBing } = require('../../app/');
-const { saveMessage, deleteMessages, saveConvo } = require('../../models');
+const { saveMessage, deleteMessages, deleteMessagesSince, saveConvo } = require('../../models');
 const { handleError, sendMessage } = require('./handlers');
 const citationRegex = /\[\^\d+?\^]/g;
 
 router.post('/', async (req, res) => {
-  const { model, text, ...convo } = req.body;
+  const { id, model, text, ...convo } = req.body;
   if (text.length === 0) {
     return handleError(res, 'Prompt empty or too short');
   }
 
-  const userMessageId = crypto.randomUUID();
+  const userMessageId = id || crypto.randomUUID();
-  let userMessage = { id: userMessageId, sender: 'User', text };
+  let userMessage = { id: userMessageId, sender: 'User', text, isCreatedByUser: true };
 
   console.log('ask log', { model, ...userMessage, ...convo });
 
+  if (id) {
+    // existing conversation
+    await saveMessage(userMessage);
+    await deleteMessagesSince(userMessage);
+  } else {}
+  
   res.writeHead(200, {
     Connection: 'keep-alive',
     'Content-Type': 'text/event-stream',

api/server/routes/askSydney.js

@@ -2,21 +2,27 @@ const express = require('express');
 const crypto = require('crypto');
 const router = express.Router();
 const { titleConvo, getCitations, citeText, askSydney } = require('../../app/');
-const { saveMessage, deleteMessages, saveConvo, getConvoTitle } = require('../../models');
+const { saveMessage, deleteMessages, saveConvo, deleteMessagesSince, getConvoTitle } = require('../../models');
 const { handleError, sendMessage } = require('./handlers');
 const citationRegex = /\[\^\d+?\^]/g;
 
 router.post('/', async (req, res) => {
-  const { model, text, ...convo } = req.body;
+  const { id, model, text, ...convo } = req.body;
   if (text.length === 0) {
     return handleError(res, 'Prompt empty or too short');
   }
 
-  const userMessageId = crypto.randomUUID();
+  const userMessageId = id || crypto.randomUUID();
-  let userMessage = { id: userMessageId, sender: 'User', text };
+  let userMessage = { id: userMessageId, sender: 'User', text, isCreatedByUser: true };
 
   console.log('ask log', { model, ...userMessage, ...convo });
 
+  if (id) {
+    // existing conversation
+    await saveMessage(userMessage);
+    await deleteMessagesSince(userMessage);
+  } else {}
+  
   res.writeHead(200, {
     Connection: 'keep-alive',
     'Content-Type': 'text/event-stream',

client/src/components/Main/TextChat.jsx

@@ -29,13 +29,14 @@ export default function TextChat({ messages }) {
   }, [convo?.conversationId, ])
 
   const messageHandler = (data, currentState) => {
-    const { messages, currentMsg, sender } = currentState;
+    const { messages, currentMsg, message, sender } = currentState;
     dispatch(setMessages([...messages, currentMsg, { sender, text: data }]));
   };
 
   const convoHandler = (data, currentState) => {
-    const { messages, currentMsg, sender, isCustomModel, model, chatGptLabel, promptPrefix } =
+    const { messages, currentMsg, message, isCustomModel, sender } =
       currentState;
+    const { model, chatGptLabel, promptPrefix } = message;
     dispatch(
       setMessages([...messages, currentMsg, { sender, text: data.text || data.response }])
     );
@@ -111,7 +112,7 @@ export default function TextChat({ messages }) {
     setErrorMessage(event.data);
     dispatch(setSubmitState(false));
     dispatch(setMessages([...messages.slice(0, -2), currentMsg, errorResponse]));
-    dispatch(setText(message));
+    dispatch(setText(message?.text));
     dispatch(setError(true));
     return;
   };
@@ -127,7 +128,7 @@ export default function TextChat({ messages }) {
 
     const isCustomModel = model === 'chatgptCustom' || !initial[model];
     const message = text.trim();
-    const currentMsg = { sender: 'User', text: message, current: true };
+    const currentMsg = { sender: 'User', text: message, current: true, isCreatedByUser: true };
     const sender = model === 'chatgptCustom' ? chatGptLabel : model;
     const initialResponse = { sender, text: '' };
 
@@ -136,36 +137,41 @@ export default function TextChat({ messages }) {
     dispatch(setText(''));
 
     const submission = {
-      model,
-      text: message,
-      convo,
-      chatGptLabel,
-      promptPrefix,
       isCustomModel,
-      message,
+      message: { 
+        sender: 'User',
+        text: message, 
+        isCreatedByUser: true,
+        model,
+        chatGptLabel,
+        promptPrefix,
+      },
       messages,
       currentMsg,
+      initialResponse,
       sender,
-      initialResponse
     };
     console.log('User Input:', message);
     // handleSubmit(submission);
     dispatch(setSubmission(submission));
   };
 
-  const createPayload = ({ model, text, convo, chatGptLabel, promptPrefix }) => {
+  const createPayload = ({ convo, message }) => {
     const endpoint = `/api/ask`;
-    let payload = { model, text, chatGptLabel, promptPrefix };
+    let payload = { ...message };
-    if (convo.conversationId && convo.parentMessageId) {
+    const { model } = message
-      payload = {
+
-        ...payload,
+    if (!payload.conversationId)
-        conversationId: convo.conversationId,
+      if (convo?.conversationId && convo?.parentMessageId) {
-        parentMessageId: convo.parentMessageId
+        payload = {
-      };
+          ...payload,
-    }
+          conversationId: convo.conversationId,
+          parentMessageId: convo.parentMessageId
+        };
+      }
 
     const isBing = model === 'bingai' || model === 'sydney';
-    if (isBing && convo.conversationId) {
+    if (isBing && convo?.conversationId) {
       payload = {
         ...payload,
         jailbreakConversationId: convo.jailbreakConversationId,

client/src/components/Messages/HoverButtons.jsx

@@ -2,11 +2,11 @@ import React from 'react';
 // import Clipboard from '../svg/Clipboard';
 import EditIcon from '../svg/EditIcon';
 
-export default function HoverButtons({ user }) {
+export default function HoverButtons({ user, onClick }) {
   return (
     <div className="visible mt-2 flex justify-center gap-3 self-end text-gray-400 md:gap-4 lg:absolute lg:top-0 lg:right-0 lg:mt-0 lg:translate-x-full lg:gap-1 lg:self-center lg:pl-2">
       {user && (
-        <button className="rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible">
+        <button className="rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible" onClick={onClick}>
           {/* <button className="rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400"> */}
           <EditIcon />
         </button>

client/src/components/Messages/Message.jsx

@@ -1,22 +1,36 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import TextWrapper from './TextWrapper';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import GPTIcon from '../svg/GPTIcon';
 import BingIcon from '../svg/BingIcon';
 import HoverButtons from './HoverButtons';
 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';
 
 export default function Message({
-  sender,
+  message,
-  text,
+  messages,
   last = false,
-  error = false,
+  scrollToBottom,
-  scrollToBottom
+  edit,
+  currentEditIdx,
+  enterEdit
 }) {
-  const { isSubmitting } = useSelector((state) => state.submit);
+  const { isSubmitting, model, chatGptLabel, promptPrefix } = useSelector((state) => state.submit);
   const [abortScroll, setAbort] = useState(false);
-  const notUser = sender.toLowerCase() !== 'user';
+  const { sender, text, isCreatedByUser, error } = message
-  const blinker = isSubmitting && last && notUser;
+  const textEditor = useRef(null)
+  const convo = useSelector((state) => state.convo);
+  const { initial } = useSelector((state) => state.models);
+  const { error: convoError } = convo;
+
+  const dispatch = useDispatch();
+
+  // const notUser = !isCreatedByUser; // sender.toLowerCase() !== 'user';
+  const blinker = isSubmitting && last && !isCreatedByUser;
 
   useEffect(() => {
     if (blinker && !abortScroll) {
@@ -53,12 +67,12 @@ export default function Message({
   let icon = `${sender}:`;
   let backgroundColor = bgColors[sender];
 
-  if (notUser) {
+  if (!isCreatedByUser) {
     props.className =
       'w-full border-b border-black/10 bg-gray-50 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-[#444654]';
   }
 
-  if ((notUser && backgroundColor) || isBing) {
+  if ((!isCreatedByUser && backgroundColor) || isBing) {
     icon = (
       <div
         style={
@@ -80,6 +94,49 @@ export default function Message({
 
   const wrapText = (text) => <TextWrapper text={text} />;
 
+  const resubmitMessage = () => {
+    const text = textEditor.current.innerHTML
+
+    if (convoError) {
+      dispatch(setError(false));
+    }
+
+    if (!!isSubmitting || text.trim() === '') {
+      return;
+    }
+
+    const isCustomModel = model === 'chatgptCustom' || !initial[model];
+    const currentMsg = { ...message, sender: 'User', text: text.trim(), current: true, isCreatedByUser: true };
+    console.log(model)
+    const sender = model === 'chatgptCustom' ? chatGptLabel : model;
+
+    const initialResponse = { sender, text: '' };
+
+    dispatch(setSubmitState(true));
+    dispatch(setMessages([...messages.slice(0, currentEditIdx), currentMsg, initialResponse]));
+    dispatch(setText(''));
+
+    const submission = {
+      isCustomModel,
+      message: { 
+        ...message, 
+        text: text.trim(),
+        model,
+        chatGptLabel,
+        promptPrefix,
+      },
+      messages: messages.slice(0, currentEditIdx),
+      currentMsg,
+      initialResponse,
+      sender,
+    };
+    console.log('User Input:', message);
+    // handleSubmit(submission);
+    dispatch(setSubmission(submission));
+
+    enterEdit(true);
+  };
+
   return (
     <div
       {...props}
@@ -96,22 +153,47 @@ export default function Message({
         <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-row flex-col items-start gap-4 gap-2 whitespace-pre-wrap text-red-500">
+              <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>
-            ) : (
+            ) : 
-              <div className="flex min-h-[20px] flex-col items-start gap-4 whitespace-pre-wrap">
+              edit ? (
-                {/* <div className={`${blinker ? 'result-streaming' : ''} markdown prose dark:prose-invert light w-full break-words`}> */}
+                <div className="flex min-h-[20px] flex-col flex-grow items-start gap-4 whitespace-pre-wrap">
-                <div className="markdown prose dark:prose-invert light w-full break-words">
+                  {/* <div className={`${blinker ? 'result-streaming' : ''} markdown prose dark:prose-invert light w-full break-words`}> */}
-                  {notUser ? wrapText(text) : text}
+                  
-                  {blinker && <span className="result-streaming">█</span>}
+                  <div className="markdown prose dark:prose-invert light w-full break-words border-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={!notUser} />
+            <HoverButtons user={!error && isCreatedByUser} onClick={() => enterEdit()}/>
         </div>
       </div>
     </div>

client/src/components/Messages/index.jsx

@@ -4,10 +4,12 @@ import ScrollToBottom from './ScrollToBottom';
 import Message from './Message';
 
 const Messages = ({ messages }) => {
+  const [currentEditIdx, setCurrentEditIdx] = useState(-1)
   const [showScrollButton, setShowScrollButton] = useState(false);
   const scrollableRef = useRef(null);
   const messagesEndRef = useRef(null);
 
+
   useEffect(() => {
     const timeoutId = setTimeout(() => {
       const scrollable = scrollableRef.current;
@@ -60,11 +62,13 @@ const Messages = ({ messages }) => {
           {messages.map((message, i) => (
             <Message
               key={i}
-              sender={message.sender}
+              message={message}
-              text={message.text}
+              messages={messages}
               last={i === messages.length - 1}
-              error={message.error ? true : false}
               scrollToBottom={i === messages.length - 1 ? scrollToBottom : null}
+              edit={i===currentEditIdx}
+              currentEditIdx={currentEditIdx}
+              enterEdit={(cancel) => setCurrentEditIdx(cancel?-1:i)}
             />
           ))}
           <CSSTransition

client/src/store/convoSlice.js

@@ -48,7 +48,7 @@ const currentSlice = createSlice({
         return !state.convos.some((c) => c.conversationId === convo.conversationId);
       });
       state.convos = [...state.convos, ...newConvos].sort(
-        (a, b) => new Date(b.created) - new Date(a.created)
+        (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
       );
     },
     removeConvo: (state, action) => {