From dd1f74da72ff44d58e992e6f67f6c5cd4fa7ebab Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Mon, 13 Mar 2023 05:20:35 +0800
Subject: [PATCH 01/47] replace all created to timestamps: true in db

---
 api/models/Conversation.js | 10 +++-------
 api/models/CustomGpt.js    |  6 +-----
 api/models/Message.js      | 11 ++++++-----
 api/models/Prompt.js       |  6 +-----
 4 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/api/models/Conversation.js b/api/models/Conversation.js
index 1ff778e957..0ae336641c 100644
--- a/api/models/Conversation.js
+++ b/api/models/Conversation.js
@@ -38,11 +38,7 @@ const convoSchema = mongoose.Schema({
   },
   suggestions: [{ type: String }],
   messages: [{ type: mongoose.Schema.Types.ObjectId, ref: 'Message' }],
-  created: {
-    type: Date,
-    default: Date.now
-  }
-});
+}, { timestamps: true });
 
 const Conversation =
   mongoose.models.Conversation || mongoose.model('Conversation', convoSchema);
@@ -85,14 +81,14 @@ module.exports = {
       return { message: 'Error updating conversation' };
     }
   },
-  // getConvos: async () => await Conversation.find({}).sort({ created: -1 }).exec(),
+  // getConvos: async () => await Conversation.find({}).sort({ createdAt: -1 }).exec(),
   getConvos: async (pageNumber = 1, pageSize = 12) => {
     try {
       const skip = (pageNumber - 1) * pageSize;
       // const limit = pageNumber * pageSize;
 
       const conversations = await Conversation.find({})
-        .sort({ created: -1 })
+        .sort({ createdAt: -1 })
         .skip(skip)
         // .limit(limit)
         .limit(pageSize)
diff --git a/api/models/CustomGpt.js b/api/models/CustomGpt.js
index 33bb75b124..1f02bdc4db 100644
--- a/api/models/CustomGpt.js
+++ b/api/models/CustomGpt.js
@@ -12,11 +12,7 @@ const customGptSchema = mongoose.Schema({
     type: String,
     required: true
   },
-  created: {
-    type: Date,
-    default: Date.now
-  }
-});
+}, { timestamps: true });
 
 const CustomGpt = mongoose.models.CustomGpt || mongoose.model('CustomGpt', customGptSchema);
 
diff --git a/api/models/Message.js b/api/models/Message.js
index e6657c060a..b2017c2698 100644
--- a/api/models/Message.js
+++ b/api/models/Message.js
@@ -32,11 +32,12 @@ const messageSchema = mongoose.Schema({
     type: String,
     required: true
   },
-  created: {
-    type: Date,
-    default: Date.now
+  isCreatedByUser: {
+    type: Boolean,
+    required: true,
+    default: false
   }
-});
+}, { timestamps: true });
 
 const Message = mongoose.models.Message || mongoose.model('Message', messageSchema);
 
@@ -58,7 +59,7 @@ module.exports = {
   },
   getMessages: async (filter) => {
     try {
-      return await Message.find(filter).exec()
+      return await Message.find(filter).sort({createdAt: 1}).exec()
     } catch (error) {
       console.error(error);
       return { message: 'Error getting messages' };
diff --git a/api/models/Prompt.js b/api/models/Prompt.js
index 612278d038..f122d5af40 100644
--- a/api/models/Prompt.js
+++ b/api/models/Prompt.js
@@ -12,11 +12,7 @@ const promptSchema = mongoose.Schema({
   category: {
     type: String,
   },
-  created: {
-    type: Date,
-    default: Date.now
-  }
-});
+}, { timestamps: true });
 
 const Prompt = mongoose.models.Prompt || mongoose.model('Prompt', promptSchema);
 

From b9975ac283c1bb82a253118fe53b920d8019b2ed Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Mon, 13 Mar 2023 05:21:30 +0800
Subject: [PATCH 02/47] fix: missing setSubmission

---
 client/src/components/Nav/ClearConvos.jsx | 1 +
 client/src/components/Nav/MobileNav.jsx   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/client/src/components/Nav/ClearConvos.jsx b/client/src/components/Nav/ClearConvos.jsx
index 9df2e9344e..c9a9b379ba 100644
--- a/client/src/components/Nav/ClearConvos.jsx
+++ b/client/src/components/Nav/ClearConvos.jsx
@@ -5,6 +5,7 @@ import manualSWR from '~/utils/fetchers';
 import { useDispatch } from 'react-redux';
 import { setNewConvo, removeAll } from '~/store/convoSlice';
 import { setMessages } from '~/store/messageSlice';
+import { setSubmission } from '~/store/submitSlice';
 
 export default function ClearConvos() {
   const dispatch = useDispatch();
diff --git a/client/src/components/Nav/MobileNav.jsx b/client/src/components/Nav/MobileNav.jsx
index 2a5123560d..e4107e9ac6 100644
--- a/client/src/components/Nav/MobileNav.jsx
+++ b/client/src/components/Nav/MobileNav.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { setNewConvo } from '~/store/convoSlice';
 import { setMessages } from '~/store/messageSlice';
+import { setSubmission } from '~/store/submitSlice';
 import { setText } from '~/store/textSlice';
 
 export default function MobileNav({ setNavVisible }) {

From bdfc895800b27a9713118861d2892969c3c7b805 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Mon, 13 Mar 2023 05:26:17 +0800
Subject: [PATCH 03/47] 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                         |  23 +++-
 api/models/index.js                           |   3 +-
 api/server/routes/ask.js                      |  14 +-
 api/server/routes/askBing.js                  |  14 +-
 api/server/routes/askSydney.js                |  14 +-
 client/src/components/Main/TextChat.jsx       |  48 ++++---
 .../src/components/Messages/HoverButtons.jsx  |   4 +-
 client/src/components/Messages/Message.jsx    | 124 +++++++++++++++---
 client/src/components/Messages/index.jsx      |  10 +-
 client/src/store/convoSlice.js                |   2 +-
 10 files changed, 189 insertions(+), 67 deletions(-)

diff --git a/api/models/Message.js b/api/models/Message.js
index b2017c2698..0e091e416c 100644
--- a/api/models/Message.js
+++ b/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({
-        id,
+      await Message.findOneAndUpdate({ id }, {
         conversationId,
         parentMessageId,
         sender,
-        text
-      });
-      return { id, conversationId, parentMessageId, sender, text };
+        text,
+        isCreatedByUser
+      }, { 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()
diff --git a/api/models/index.js b/api/models/index.js
index 8af5a1aa9c..4ed1285bbf 100644
--- a/api/models/index.js
+++ b/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,
diff --git a/api/server/routes/ask.js b/api/server/routes/ask.js
index 1f18082dd4..9296f895d6 100644
--- a/api/server/routes/ask.js
+++ b/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();
-  let userMessage = { id: userMessageId, sender: 'User', text };
+  const userMessageId = id || crypto.randomUUID();
+  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',
diff --git a/api/server/routes/askBing.js b/api/server/routes/askBing.js
index 76c39f6804..1e670b6d41 100644
--- a/api/server/routes/askBing.js
+++ b/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();
-  let userMessage = { id: userMessageId, sender: 'User', text };
+  const userMessageId = id || crypto.randomUUID();
+  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',
diff --git a/api/server/routes/askSydney.js b/api/server/routes/askSydney.js
index 219f9b2437..8bc4b8c54f 100644
--- a/api/server/routes/askSydney.js
+++ b/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();
-  let userMessage = { id: userMessageId, sender: 'User', text };
+  const userMessageId = id || crypto.randomUUID();
+  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',
diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index 12efc7c123..e73becc743 100644
--- a/client/src/components/Main/TextChat.jsx
+++ b/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 };
-    if (convo.conversationId && convo.parentMessageId) {
-      payload = {
-        ...payload,
-        conversationId: convo.conversationId,
-        parentMessageId: convo.parentMessageId
-      };
-    }
+    let payload = { ...message };
+    const { model } = message
+
+    if (!payload.conversationId)
+      if (convo?.conversationId && 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,
diff --git a/client/src/components/Messages/HoverButtons.jsx b/client/src/components/Messages/HoverButtons.jsx
index 860023ed2f..35c5f14821 100644
--- a/client/src/components/Messages/HoverButtons.jsx
+++ b/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>
diff --git a/client/src/components/Messages/Message.jsx b/client/src/components/Messages/Message.jsx
index 37f7a5c63b..257ae3e3d1 100644
--- a/client/src/components/Messages/Message.jsx
+++ b/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,
-  text,
+  message,
+  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 blinker = isSubmitting && last && notUser;
+  const { sender, text, isCreatedByUser, error } = message
+  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">
-                {/* <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">
-                  {notUser ? 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" 
+                    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>
diff --git a/client/src/components/Messages/index.jsx b/client/src/components/Messages/index.jsx
index c6457d6c62..7d9bd69d44 100644
--- a/client/src/components/Messages/index.jsx
+++ b/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}
-              text={message.text}
+              message={message}
+              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
diff --git a/client/src/store/convoSlice.js b/client/src/store/convoSlice.js
index 2560a29298..4e55fa2b94 100644
--- a/client/src/store/convoSlice.js
+++ b/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) => {

From 6d51ec3e3761a065dc7d45c6ea7f982f5d5ed783 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Mon, 13 Mar 2023 05:42:49 +0800
Subject: [PATCH 04/47] feat: auto hide edit button when edit is enabled.

---
 client/src/components/Messages/Message.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Messages/Message.jsx b/client/src/components/Messages/Message.jsx
index 257ae3e3d1..6b313961f0 100644
--- a/client/src/components/Messages/Message.jsx
+++ b/client/src/components/Messages/Message.jsx
@@ -193,7 +193,7 @@ export default function Message({
                 </div>
               )}
           </div>
-            <HoverButtons user={!error && isCreatedByUser} onClick={() => enterEdit()}/>
+            <HoverButtons user={!error && isCreatedByUser && !edit} onClick={() => enterEdit()}/>
         </div>
       </div>
     </div>

From be71140dd49404fb68f5f005e4f999f47de1b328 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Mon, 13 Mar 2023 10:20:07 +0800
Subject: [PATCH 05/47] fix: new message should append to the exist one

---
 client/src/components/Main/TextChat.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index e73becc743..bd127a34d2 100644
--- a/client/src/components/Main/TextChat.jsx
+++ b/client/src/components/Main/TextChat.jsx
@@ -137,6 +137,7 @@ export default function TextChat({ messages }) {
     dispatch(setText(''));
 
     const submission = {
+      convo,
       isCustomModel,
       message: { 
         sender: 'User',
@@ -202,6 +203,7 @@ export default function TextChat({ messages }) {
 
       const data = JSON.parse(e.data);
       let text = data.text || data.response;
+      console.log(data)
       if (data.message) {
         messageHandler(text, currentState);
       }

From 0ed8a40a41ecb31d9a2bcfd4bec4f8df9e875c9a Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Mon, 13 Mar 2023 12:35:55 +0800
Subject: [PATCH 06/47] feat: merge all message.id into message.messageId feat:
 the first message will have a parentMessageId as
 00000000-0000-0000-0000-000000000000 (in order not to create new convo when
 resubmit) feat: ask will return the userMessage as well, to send back the
 messageId

TODO: comment out the title generation.
TODO: bing version need to be test

fix: never use the same messageId
fix: never delete exist messages
fix: connect response.parentMessageId to the userMessage.messageId
fix: set default convo title as new Chat
---
 api/models/Conversation.js              |  2 +-
 api/models/Message.js                   | 12 ++---
 api/server/routes/ask.js                | 58 ++++++++++++---------
 api/server/routes/askBing.js            | 69 ++++++++++++++++---------
 api/server/routes/askSydney.js          | 61 +++++++++++++++-------
 client/src/components/Main/TextChat.jsx | 40 ++++++++++----
 client/src/store/messageSlice.js        |  2 +-
 7 files changed, 159 insertions(+), 85 deletions(-)

diff --git a/api/models/Conversation.js b/api/models/Conversation.js
index 0ae336641c..c8daf78c4a 100644
--- a/api/models/Conversation.js
+++ b/api/models/Conversation.js
@@ -13,7 +13,7 @@ const convoSchema = mongoose.Schema({
   },
   title: {
     type: String,
-    default: 'New conversation'
+    default: 'New Chat'
   },
   jailbreakConversationId: {
     type: String
diff --git a/api/models/Message.js b/api/models/Message.js
index 0e091e416c..db1746924b 100644
--- a/api/models/Message.js
+++ b/api/models/Message.js
@@ -1,7 +1,7 @@
 const mongoose = require('mongoose');
 
 const messageSchema = mongoose.Schema({
-  id: {
+  messageId: {
     type: String,
     unique: true,
     required: true
@@ -42,24 +42,24 @@ const messageSchema = mongoose.Schema({
 const Message = mongoose.models.Message || mongoose.model('Message', messageSchema);
 
 module.exports = {
-  saveMessage: async ({ id, conversationId, parentMessageId, sender, text, isCreatedByUser=false }) => {
+  saveMessage: async ({ messageId, conversationId, parentMessageId, sender, text, isCreatedByUser=false }) => {
     try {
-      await Message.findOneAndUpdate({ id }, {
+      await Message.findOneAndUpdate({ messageId }, {
         conversationId,
         parentMessageId,
         sender,
         text,
         isCreatedByUser
       }, { upsert: true, new: true });
-      return { id, conversationId, parentMessageId, sender, text, isCreatedByUser };
+      return { messageId, conversationId, parentMessageId, sender, text, isCreatedByUser };
     } catch (error) {
       console.error(error);
       return { message: 'Error saving message' };
     }
   },
-  deleteMessagesSince: async ({ id, conversationId }) => {
+  deleteMessagesSince: async ({ messageId, conversationId }) => {
     try {
-      message = await Message.findOne({ id }).exec()
+      message = await Message.findOne({ messageId }).exec()
 
       if (message) 
         return await Message.find({ conversationId }).deleteMany({ createdAt: { $gt: message.createdAt } }).exec();
diff --git a/api/server/routes/ask.js b/api/server/routes/ask.js
index 9296f895d6..ea43392551 100644
--- a/api/server/routes/ask.js
+++ b/api/server/routes/ask.js
@@ -17,18 +17,26 @@ router.use('/bing', askBing);
 router.use('/sydney', askSydney);
 
 router.post('/', async (req, res) => {
-  let { id, model, text, parentMessageId, conversationId, chatGptLabel, promptPrefix } = req.body;
+  let { model, text, parentMessageId, conversationId, chatGptLabel, promptPrefix } = req.body;
   if (text.length === 0) {
     return handleError(res, 'Prompt empty or too short');
   }
 
-  const userMessageId = id || crypto.randomUUID();
-  let userMessage = { id: userMessageId, sender: 'User', text, parentMessageId, conversationId, isCreatedByUser: true };
+  const userMessageId = crypto.randomUUID();
+  const userParentMessageId = parentMessageId || '00000000-0000-0000-0000-000000000000'
+  let userMessage = {
+     messageId: userMessageId, 
+     sender: 'User', 
+     text, 
+     parentMessageId: userParentMessageId,
+     conversationId, 
+     isCreatedByUser: true 
+  };
 
   console.log('ask log', {
     model,
     ...userMessage,
-    parentMessageId,
+    parentMessageId: userParentMessageId,
     conversationId,
     chatGptLabel,
     promptPrefix
@@ -53,11 +61,11 @@ router.post('/', async (req, res) => {
     }
   }
 
-  if (id) {
-    // existing conversation
-    await saveMessage(userMessage);
-    await deleteMessagesSince(userMessage);
-  } else {}
+  // if (messageId) {
+  //   // existing conversation
+  //   await saveMessage(userMessage);
+  //   await deleteMessagesSince(userMessage);
+  // } else {}
 
   res.writeHead(200, {
     Connection: 'keep-alive',
@@ -72,7 +80,6 @@ router.post('/', async (req, res) => {
     let tokens = '';
     const progressCallback = async (partial) => {
       if (i === 0 && typeof partial === 'object') {
-        userMessage.parentMessageId = parentMessageId ? parentMessageId : partial.id;
         userMessage.conversationId = conversationId ? conversationId : partial.conversationId;
         await saveMessage(userMessage);
         sendMessage(res, { ...partial, initial: true });
@@ -101,7 +108,7 @@ router.post('/', async (req, res) => {
       text,
       progressCallback,
       convo: {
-        parentMessageId,
+        parentMessageId: userParentMessageId,
         conversationId
       },
       chatGptLabel,
@@ -112,9 +119,8 @@ router.post('/', async (req, res) => {
 
     if (!gptResponse.parentMessageId) {
       gptResponse.text = gptResponse.response;
-      gptResponse.id = gptResponse.messageId;
-      gptResponse.parentMessageId = gptResponse.messageId;
-      userMessage.parentMessageId = parentMessageId ? parentMessageId : gptResponse.messageId;
+      // gptResponse.id = gptResponse.messageId;
+      gptResponse.parentMessageId = userMessage.messageId;
       userMessage.conversationId = conversationId
         ? conversationId
         : gptResponse.conversationId;
@@ -130,15 +136,15 @@ router.post('/', async (req, res) => {
       return handleError(res, 'Prompt empty or too short');
     }
 
-    if (!parentMessageId) {
-      gptResponse.title = await titleConvo({
-        model,
-        message: text,
-        response: JSON.stringify(gptResponse.text)
-      });
-    }
+    // if (!parentMessageId) {
+    //   gptResponse.title = await titleConvo({
+    //     model,
+    //     message: text,
+    //     response: JSON.stringify(gptResponse.text)
+    //   });
+    // }
     gptResponse.sender = model === 'chatgptCustom' ? chatGptLabel : model;
-    gptResponse.final = true;
+    // gptResponse.final = true;
     gptResponse.text = await detectCode(gptResponse.text);
 
     if (chatGptLabel?.length > 0 && model === 'chatgptCustom') {
@@ -151,11 +157,15 @@ router.post('/', async (req, res) => {
 
     await saveMessage(gptResponse);
     await saveConvo(gptResponse);
-    sendMessage(res, gptResponse);
+    sendMessage(res, {
+      final: true, 
+      requestMessage: userMessage, 
+      responseMessage: gptResponse
+    });
     res.end();
   } catch (error) {
     console.log(error);
-    await deleteMessages({ id: userMessageId });
+    await deleteMessages({ messageId: userMessageId });
     handleError(res, error.message);
   }
 });
diff --git a/api/server/routes/askBing.js b/api/server/routes/askBing.js
index 1e670b6d41..08c086597d 100644
--- a/api/server/routes/askBing.js
+++ b/api/server/routes/askBing.js
@@ -7,22 +7,36 @@ const { handleError, sendMessage } = require('./handlers');
 const citationRegex = /\[\^\d+?\^]/g;
 
 router.post('/', async (req, res) => {
-  const { id, model, text, ...convo } = req.body;
+  const { model, text, parentMessageId, conversationId, ...convo } = req.body;
   if (text.length === 0) {
     return handleError(res, 'Prompt empty or too short');
   }
 
-  const userMessageId = id || crypto.randomUUID();
-  let userMessage = { id: userMessageId, sender: 'User', text, isCreatedByUser: true };
+  const userMessageId = messageId;
+  const userParentMessageId = parentMessageId || '00000000-0000-0000-0000-000000000000'
+  let userMessage = {
+    messageId: userMessageId, 
+    sender: 'User', 
+    text, 
+    parentMessageId: userParentMessageId,
+    conversationId, 
+    isCreatedByUser: true 
+ };
 
-  console.log('ask log', { model, ...userMessage, ...convo });
+ console.log('ask log', {
+    model,
+    ...userMessage,
+    parentMessageId: userParentMessageId,
+    conversationId,
+    ...convo
+  });
+
+  // if (messageId) {
+  //   // existing conversation
+  //   await saveMessage(userMessage);
+  //   await deleteMessagesSince(userMessage);
+  // } else {}
 
-  if (id) {
-    // existing conversation
-    await saveMessage(userMessage);
-    await deleteMessagesSince(userMessage);
-  } else {}
-  
   res.writeHead(200, {
     Connection: 'keep-alive',
     'Content-Type': 'text/event-stream',
@@ -43,7 +57,11 @@ router.post('/', async (req, res) => {
     let response = await askBing({
       text,
       progressCallback,
-      convo
+      convo: {
+        parentMessageId: userParentMessageId,
+        conversationId,
+        ...convo
+      },
     });
 
     console.log('BING RESPONSE');
@@ -52,26 +70,27 @@ router.post('/', async (req, res) => {
 
     userMessage.conversationSignature =
       convo.conversationSignature || response.conversationSignature;
-    userMessage.conversationId = convo.conversationId || response.conversationId;
+    userMessage.conversationId = conversationId || response.conversationId;
     userMessage.invocationId = response.invocationId;
     await saveMessage(userMessage);
 
-    if (!convo.conversationSignature) {
-      response.title = await titleConvo({
-        model,
-        message: text,
-        response: JSON.stringify(response.response)
-      });
-    }
+    // if (!convo.conversationSignature) {
+    //   response.title = await titleConvo({
+    //     model,
+    //     message: text,
+    //     response: JSON.stringify(response.response)
+    //   });
+    // }
 
     response.text = response.response;
     delete response.response;
-    response.id = response.details.messageId;
+    // response.id = response.details.messageId;
     response.suggestions =
       response.details.suggestedResponses &&
       response.details.suggestedResponses.map((s) => s.text);
     response.sender = model;
-    response.final = true;
+    response.parentMessageId = gptResponse.parentMessageId || userMessage.messageId
+    // response.final = true;
 
     const links = getCitations(response);
     response.text =
@@ -80,11 +99,15 @@ router.post('/', async (req, res) => {
 
     await saveMessage(response);
     await saveConvo(response);
-    sendMessage(res, response);
+    sendMessage(res, {
+      final: true, 
+      requestMessage: userMessage, 
+      responseMessage: gptResponse
+    });
     res.end();
   } catch (error) {
     console.log(error);
-    await deleteMessages({ id: userMessageId });
+    await deleteMessages({ messageId: userMessageId });
     handleError(res, error.message);
   }
 });
diff --git a/api/server/routes/askSydney.js b/api/server/routes/askSydney.js
index 8bc4b8c54f..27284ec526 100644
--- a/api/server/routes/askSydney.js
+++ b/api/server/routes/askSydney.js
@@ -7,22 +7,37 @@ const { handleError, sendMessage } = require('./handlers');
 const citationRegex = /\[\^\d+?\^]/g;
 
 router.post('/', async (req, res) => {
-  const { id, model, text, ...convo } = req.body;
+  const { model, text, parentMessageId, conversationId, ...convo } = req.body;
   if (text.length === 0) {
     return handleError(res, 'Prompt empty or too short');
   }
 
-  const userMessageId = id || crypto.randomUUID();
-  let userMessage = { id: userMessageId, sender: 'User', text, isCreatedByUser: true };
+  const userMessageId = messageId;
+  const userParentMessageId = parentMessageId || '00000000-0000-0000-0000-000000000000'
+  let userMessage = {
+    messageId: userMessageId, 
+    sender: 'User', 
+    text, 
+    parentMessageId: userParentMessageId,
+    conversationId, 
+    isCreatedByUser: true 
+ };
 
-  console.log('ask log', { model, ...userMessage, ...convo });
 
-  if (id) {
-    // existing conversation
-    await saveMessage(userMessage);
-    await deleteMessagesSince(userMessage);
-  } else {}
-  
+ console.log('ask log', {
+    model,
+    ...userMessage,
+    parentMessageId: userParentMessageId,
+    conversationId,
+    ...convo
+  });
+
+  // if (messageId) {
+  //   // existing conversation
+  //   await saveMessage(userMessage);
+  //   await deleteMessagesSince(userMessage);
+  // } else {}
+
   res.writeHead(200, {
     Connection: 'keep-alive',
     'Content-Type': 'text/event-stream',
@@ -43,7 +58,11 @@ router.post('/', async (req, res) => {
     let response = await askSydney({
       text,
       progressCallback,
-      convo
+      convo: {
+        parentMessageId: userParentMessageId,
+        conversationId,
+        ...convo
+      },
     });
 
     console.log('SYDNEY RESPONSE');
@@ -52,19 +71,19 @@ router.post('/', async (req, res) => {
     const hasCitations = response.response.match(citationRegex)?.length > 0;
 
     // Save sydney response
-    response.id = response.messageId;
+    // response.id = response.messageId;
     // response.parentMessageId = convo.parentMessageId ? convo.parentMessageId : response.messageId;
     response.parentMessageId = response.messageId;
     response.invocationId = convo.invocationId ? convo.invocationId + 1 : 1;
     response.title = convo.jailbreakConversationId
-      ? await getConvoTitle(convo.conversationId)
+      ? await getConvoTitle(conversationId)
       : await titleConvo({
           model,
           message: text,
           response: JSON.stringify(response.response)
         });
-    response.conversationId = convo.conversationId
-      ? convo.conversationId
+    response.conversationId = conversationId
+      ? conversationId
       : crypto.randomUUID();
     response.conversationSignature = convo.conversationSignature
       ? convo.conversationSignature
@@ -75,7 +94,8 @@ router.post('/', async (req, res) => {
       response.details.suggestedResponses &&
       response.details.suggestedResponses.map((s) => s.text);
     response.sender = model;
-    response.final = true;
+    response.parentMessageId = gptResponse.parentMessageId || userMessage.messageId
+    // response.final = true;
 
     const links = getCitations(response);
     response.text =
@@ -84,17 +104,20 @@ router.post('/', async (req, res) => {
 
     // Save user message
     userMessage.conversationId = response.conversationId;
-    userMessage.parentMessageId = response.parentMessageId;
     await saveMessage(userMessage);
 
     // Save sydney response & convo, then send
     await saveMessage(response);
     await saveConvo(response);
-    sendMessage(res, response);
+    sendMessage(res, {
+      final: true, 
+      requestMessage: userMessage, 
+      responseMessage: gptResponse
+    });
     res.end();
   } catch (error) {
     console.log(error);
-    await deleteMessages({ id: userMessageId });
+    await deleteMessages({ messageId: userMessageId });
     handleError(res, error.message);
   }
 });
diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index bd127a34d2..460d6954f3 100644
--- a/client/src/components/Main/TextChat.jsx
+++ b/client/src/components/Main/TextChat.jsx
@@ -34,22 +34,36 @@ export default function TextChat({ messages }) {
   };
 
   const convoHandler = (data, currentState) => {
+    const { requestMessage, responseMessage } = data;
     const { messages, currentMsg, message, isCustomModel, sender } =
       currentState;
     const { model, chatGptLabel, promptPrefix } = message;
     dispatch(
-      setMessages([...messages, currentMsg, { sender, text: data.text || data.response }])
+      setMessages([...messages, 
+        { 
+          ...requestMessage, 
+          // messageId: data?.parentMessageId,  
+        }, 
+        { 
+          ...responseMessage,
+          // sender, 
+          // text: data.text || data.response, 
+        }
+      ])
     );
 
     const isBing = model === 'bingai' || model === 'sydney';
 
+    // if (!message.messageId)
+
     if (!isBing && convo.conversationId === null && convo.parentMessageId === null) {
-      const { title, conversationId, id } = data;
+      const { title } = data;
+      const { conversationId, messageId } = responseMessage;
       dispatch(
         setConversation({
           title,
           conversationId,
-          parentMessageId: id,
+          parentMessageId: messageId,
           jailbreakConversationId: null,
           conversationSignature: null,
           clientId: null,
@@ -64,7 +78,8 @@ export default function TextChat({ messages }) {
       convo.invocationId === null
     ) {
       console.log('Bing data:', data);
-      const { title, conversationSignature, clientId, conversationId, invocationId } = data;
+      const { title } = data;
+      const { conversationSignature, clientId, conversationId, invocationId } = responseMessage;
       dispatch(
         setConversation({
           title,
@@ -76,15 +91,15 @@ export default function TextChat({ messages }) {
         })
       );
     } else if (model === 'sydney') {
+      const { title } = data;
       const {
-        title,
         jailbreakConversationId,
         parentMessageId,
         conversationSignature,
         clientId,
         conversationId,
         invocationId
-      } = data;
+      } = responseMessage;
       dispatch(
         setConversation({
           title,
@@ -202,16 +217,19 @@ export default function TextChat({ messages }) {
       }
 
       const data = JSON.parse(e.data);
-      let text = data.text || data.response;
-      console.log(data)
-      if (data.message) {
-        messageHandler(text, currentState);
-      }
+
+      // if (data.message) {
+      //   messageHandler(text, currentState);
+      // }
 
       if (data.final) {
         convoHandler(data, currentState);
         console.log('final', data);
       } else {
+        let text = data.text || data.response;
+        if (data.message) {
+          messageHandler(text, currentState);
+        }
         // console.log('dataStream', data);
       }
     };
diff --git a/client/src/store/messageSlice.js b/client/src/store/messageSlice.js
index c93f70048e..137c329822 100644
--- a/client/src/store/messageSlice.js
+++ b/client/src/store/messageSlice.js
@@ -14,7 +14,7 @@ const currentSlice = createSlice({
     setEmptyMessage: (state) => {
       state.messages = [
         {
-          id: '1',
+          messageId: '1',
           conversationId: '1',
           parentMessageId: '1',
           sender: '',

From 5a409ccfa62041c154b0e5735d59b117b8d3dfeb Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Mon, 13 Mar 2023 12:36:00 +0800
Subject: [PATCH 07/47] fix: don't resubmit html label fix: hide the resubmit
 editor border

---
 client/src/components/Messages/Message.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Messages/Message.jsx b/client/src/components/Messages/Message.jsx
index 6b313961f0..2d6df0360e 100644
--- a/client/src/components/Messages/Message.jsx
+++ b/client/src/components/Messages/Message.jsx
@@ -95,7 +95,7 @@ export default function Message({
   const wrapText = (text) => <TextWrapper text={text} />;
 
   const resubmitMessage = () => {
-    const text = textEditor.current.innerHTML
+    const text = textEditor.current.innerText
 
     if (convoError) {
       dispatch(setError(false));
@@ -163,7 +163,7 @@ export default function Message({
                 <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" 
+                  <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>

From 8773878be2c72c733f763b59c324c4e7480d1565 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Mon, 13 Mar 2023 13:11:53 +0800
Subject: [PATCH 08/47] feat: create conversation at the beginning then return
 the userMessage

---
 api/server/routes/ask.js                      | 18 ++++++-------
 api/server/routes/askBing.js                  | 18 ++++++-------
 api/server/routes/askSydney.js                | 18 ++++++-------
 .../components/Conversations/Conversation.jsx |  9 ++++---
 client/src/components/Conversations/index.jsx |  1 +
 client/src/components/Main/TextChat.jsx       | 26 ++++++++++++++-----
 6 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/api/server/routes/ask.js b/api/server/routes/ask.js
index ea43392551..9be3fe7014 100644
--- a/api/server/routes/ask.js
+++ b/api/server/routes/ask.js
@@ -17,11 +17,13 @@ router.use('/bing', askBing);
 router.use('/sydney', askSydney);
 
 router.post('/', async (req, res) => {
-  let { model, text, parentMessageId, conversationId, chatGptLabel, promptPrefix } = req.body;
+  let { model, text, parentMessageId, conversationId: oldConversationId , chatGptLabel, promptPrefix } = req.body;
   if (text.length === 0) {
     return handleError(res, 'Prompt empty or too short');
   }
 
+  const conversationId = oldConversationId || crypto.randomUUID();
+
   const userMessageId = crypto.randomUUID();
   const userParentMessageId = parentMessageId || '00000000-0000-0000-0000-000000000000'
   let userMessage = {
@@ -36,8 +38,6 @@ router.post('/', async (req, res) => {
   console.log('ask log', {
     model,
     ...userMessage,
-    parentMessageId: userParentMessageId,
-    conversationId,
     chatGptLabel,
     promptPrefix
   });
@@ -61,12 +61,6 @@ router.post('/', async (req, res) => {
     }
   }
 
-  // if (messageId) {
-  //   // existing conversation
-  //   await saveMessage(userMessage);
-  //   await deleteMessagesSince(userMessage);
-  // } else {}
-
   res.writeHead(200, {
     Connection: 'keep-alive',
     'Content-Type': 'text/event-stream',
@@ -75,6 +69,10 @@ router.post('/', async (req, res) => {
     'X-Accel-Buffering': 'no'
   });
 
+  await saveMessage(userMessage);
+  await saveConvo({ ...userMessage, model, chatGptLabel, promptPrefix });
+  sendMessage(res, { message: userMessage, created: true });
+
   try {
     let i = 0;
     let tokens = '';
@@ -165,7 +163,7 @@ router.post('/', async (req, res) => {
     res.end();
   } catch (error) {
     console.log(error);
-    await deleteMessages({ messageId: userMessageId });
+    // await deleteMessages({ messageId: userMessageId });
     handleError(res, error.message);
   }
 });
diff --git a/api/server/routes/askBing.js b/api/server/routes/askBing.js
index 08c086597d..cffb669ba8 100644
--- a/api/server/routes/askBing.js
+++ b/api/server/routes/askBing.js
@@ -7,10 +7,12 @@ const { handleError, sendMessage } = require('./handlers');
 const citationRegex = /\[\^\d+?\^]/g;
 
 router.post('/', async (req, res) => {
-  const { model, text, parentMessageId, conversationId, ...convo } = req.body;
+  const { model, text, parentMessageId, conversationId: oldConversationId, ...convo } = req.body;
   if (text.length === 0) {
     return handleError(res, 'Prompt empty or too short');
   }
+  
+  const conversationId = oldConversationId || crypto.randomUUID();
 
   const userMessageId = messageId;
   const userParentMessageId = parentMessageId || '00000000-0000-0000-0000-000000000000'
@@ -26,17 +28,9 @@ router.post('/', async (req, res) => {
  console.log('ask log', {
     model,
     ...userMessage,
-    parentMessageId: userParentMessageId,
-    conversationId,
     ...convo
   });
 
-  // if (messageId) {
-  //   // existing conversation
-  //   await saveMessage(userMessage);
-  //   await deleteMessagesSince(userMessage);
-  // } else {}
-
   res.writeHead(200, {
     Connection: 'keep-alive',
     'Content-Type': 'text/event-stream',
@@ -45,6 +39,10 @@ router.post('/', async (req, res) => {
     'X-Accel-Buffering': 'no'
   });
 
+  await saveMessage(userMessage);
+  await saveConvo({ ...userMessage, model, chatGptLabel, promptPrefix });
+  sendMessage(res, { message: userMessage, created: true });
+
   try {
     let tokens = '';
     const progressCallback = async (partial) => {
@@ -107,7 +105,7 @@ router.post('/', async (req, res) => {
     res.end();
   } catch (error) {
     console.log(error);
-    await deleteMessages({ messageId: userMessageId });
+    // await deleteMessages({ messageId: userMessageId });
     handleError(res, error.message);
   }
 });
diff --git a/api/server/routes/askSydney.js b/api/server/routes/askSydney.js
index 27284ec526..a4f1b2b866 100644
--- a/api/server/routes/askSydney.js
+++ b/api/server/routes/askSydney.js
@@ -7,10 +7,12 @@ const { handleError, sendMessage } = require('./handlers');
 const citationRegex = /\[\^\d+?\^]/g;
 
 router.post('/', async (req, res) => {
-  const { model, text, parentMessageId, conversationId, ...convo } = req.body;
+  const { model, text, parentMessageId, conversationId: oldConversationId, ...convo } = req.body;
   if (text.length === 0) {
     return handleError(res, 'Prompt empty or too short');
   }
+  
+  const conversationId = oldConversationId || crypto.randomUUID();
 
   const userMessageId = messageId;
   const userParentMessageId = parentMessageId || '00000000-0000-0000-0000-000000000000'
@@ -27,17 +29,9 @@ router.post('/', async (req, res) => {
  console.log('ask log', {
     model,
     ...userMessage,
-    parentMessageId: userParentMessageId,
-    conversationId,
     ...convo
   });
 
-  // if (messageId) {
-  //   // existing conversation
-  //   await saveMessage(userMessage);
-  //   await deleteMessagesSince(userMessage);
-  // } else {}
-
   res.writeHead(200, {
     Connection: 'keep-alive',
     'Content-Type': 'text/event-stream',
@@ -46,6 +40,10 @@ router.post('/', async (req, res) => {
     'X-Accel-Buffering': 'no'
   });
 
+  await saveMessage(userMessage);
+  await saveConvo({ ...userMessage, model, chatGptLabel, promptPrefix });
+  sendMessage(res, { message: userMessage, created: true });
+
   try {
     let tokens = '';
     const progressCallback = async (partial) => {
@@ -117,7 +115,7 @@ router.post('/', async (req, res) => {
     res.end();
   } catch (error) {
     console.log(error);
-    await deleteMessages({ messageId: userMessageId });
+    // await deleteMessages({ messageId: userMessageId });
     handleError(res, error.message);
   }
 });
diff --git a/client/src/components/Conversations/Conversation.jsx b/client/src/components/Conversations/Conversation.jsx
index 34e384f624..30df587da9 100644
--- a/client/src/components/Conversations/Conversation.jsx
+++ b/client/src/components/Conversations/Conversation.jsx
@@ -11,6 +11,7 @@ import ConvoIcon from '../svg/ConvoIcon';
 
 export default function Conversation({
   id,
+  model,
   parentMessageId,
   conversationId,
   title = 'New conversation',
@@ -76,12 +77,12 @@ export default function Conversation({
     if (chatGptLabel) {
       dispatch(setModel('chatgptCustom'));
     } else {
-      dispatch(setModel(data[1].sender));
+      dispatch(setModel(model));
     }
 
-    if (modelMap[data[1].sender.toLowerCase()]) {
-      console.log('sender', data[1].sender);
-      dispatch(setCustomModel(data[1].sender.toLowerCase()));
+    if (modelMap[model.toLowerCase()]) {
+      console.log('sender', model);
+      dispatch(setCustomModel(model.toLowerCase()));
     } else {
       dispatch(setCustomModel(null));
     }
diff --git a/client/src/components/Conversations/index.jsx b/client/src/components/Conversations/index.jsx
index 6fcac5e27f..d3ab1ffd0b 100644
--- a/client/src/components/Conversations/index.jsx
+++ b/client/src/components/Conversations/index.jsx
@@ -26,6 +26,7 @@ export default function Conversations({ conversations, conversationId, showMore
             <Conversation
               key={convo.conversationId}
               id={convo.conversationId}
+              model={convo.model}
               parentMessageId={convo.parentMessageId}
               title={convo.title}
               conversationId={conversationId}
diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index 460d6954f3..69f4b65898 100644
--- a/client/src/components/Main/TextChat.jsx
+++ b/client/src/components/Main/TextChat.jsx
@@ -28,14 +28,24 @@ export default function TextChat({ messages }) {
     inputRef.current?.focus();
   }, [convo?.conversationId, ])
 
-  const messageHandler = (data, currentState) => {
-    const { messages, currentMsg, message, sender } = currentState;
+  const messageHandler = (data, currentState, currentMsg) => {
+    const { messages, _currentMsg, message, sender } = currentState;
+
     dispatch(setMessages([...messages, currentMsg, { sender, text: data }]));
   };
 
-  const convoHandler = (data, currentState) => {
+  const createdHandler = (data, currentState, currentMsg) => {
+    const { conversationId } = currentMsg;
+    dispatch(
+      setConversation({
+        conversationId,
+      })
+    );
+  };
+
+  const convoHandler = (data, currentState, currentMsg) => {
     const { requestMessage, responseMessage } = data;
-    const { messages, currentMsg, message, isCustomModel, sender } =
+    const { messages, _currentMsg, message, isCustomModel, sender } =
       currentState;
     const { model, chatGptLabel, promptPrefix } = message;
     dispatch(
@@ -210,6 +220,7 @@ export default function TextChat({ messages }) {
     }
 
     const currentState = submission;
+    let currentMsg = currentState.currentMsg;
     const { server, payload } = createPayload(submission);
     const onMessage = (e) => {
       if (stopStream) {
@@ -223,12 +234,15 @@ export default function TextChat({ messages }) {
       // }
 
       if (data.final) {
-        convoHandler(data, currentState);
+        convoHandler(data, currentState, currentMsg);
         console.log('final', data);
+      } if (data.created) {
+        currentMsg = data.message;
+        createdHandler(data, currentState, currentMsg);
       } else {
         let text = data.text || data.response;
         if (data.message) {
-          messageHandler(text, currentState);
+          messageHandler(text, currentState, currentMsg);
         }
         // console.log('dataStream', data);
       }

From 9f8e9cb091022a1e11bceb86ec0fd93e1fe58f26 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Mon, 13 Mar 2023 14:04:47 +0800
Subject: [PATCH 09/47] feat: gen title by sperate api call feat:

fix: rename of convo should based on real request.
---
 api/server/routes/ask.js                      |  3 ++-
 api/server/routes/askBing.js                  |  5 ++--
 api/server/routes/askSydney.js                |  5 ++--
 api/server/routes/convos.js                   | 26 ++++++++++++++++++
 .../components/Conversations/Conversation.jsx | 11 +++++---
 client/src/components/Main/TextChat.jsx       | 27 ++++++++++---------
 client/src/components/Nav/index.jsx           |  5 ++--
 client/src/store/convoSlice.js                | 11 ++++----
 8 files changed, 65 insertions(+), 28 deletions(-)

diff --git a/api/server/routes/ask.js b/api/server/routes/ask.js
index 9be3fe7014..d21f8be263 100644
--- a/api/server/routes/ask.js
+++ b/api/server/routes/ask.js
@@ -10,7 +10,7 @@ const {
   customClient,
   detectCode
 } = require('../../app/');
-const { getConvo, saveMessage, deleteMessagesSince, deleteMessages, saveConvo } = require('../../models');
+const { getConvo, saveMessage, getConvoTitle, saveConvo } = require('../../models');
 const { handleError, sendMessage } = require('./handlers');
 
 router.use('/bing', askBing);
@@ -156,6 +156,7 @@ router.post('/', async (req, res) => {
     await saveMessage(gptResponse);
     await saveConvo(gptResponse);
     sendMessage(res, {
+      title: await getConvoTitle(conversationId),
       final: true, 
       requestMessage: userMessage, 
       responseMessage: gptResponse
diff --git a/api/server/routes/askBing.js b/api/server/routes/askBing.js
index cffb669ba8..f2722bb248 100644
--- a/api/server/routes/askBing.js
+++ b/api/server/routes/askBing.js
@@ -2,7 +2,7 @@ const express = require('express');
 const crypto = require('crypto');
 const router = express.Router();
 const { titleConvo, getCitations, citeText, askBing } = require('../../app/');
-const { saveMessage, deleteMessages, deleteMessagesSince, saveConvo } = require('../../models');
+const { saveMessage, getConvoTitle, saveConvo } = require('../../models');
 const { handleError, sendMessage } = require('./handlers');
 const citationRegex = /\[\^\d+?\^]/g;
 
@@ -11,7 +11,7 @@ router.post('/', async (req, res) => {
   if (text.length === 0) {
     return handleError(res, 'Prompt empty or too short');
   }
-  
+
   const conversationId = oldConversationId || crypto.randomUUID();
 
   const userMessageId = messageId;
@@ -98,6 +98,7 @@ router.post('/', async (req, res) => {
     await saveMessage(response);
     await saveConvo(response);
     sendMessage(res, {
+      title: await getConvoTitle(conversationId),
       final: true, 
       requestMessage: userMessage, 
       responseMessage: gptResponse
diff --git a/api/server/routes/askSydney.js b/api/server/routes/askSydney.js
index a4f1b2b866..a90dd39555 100644
--- a/api/server/routes/askSydney.js
+++ b/api/server/routes/askSydney.js
@@ -2,7 +2,7 @@ const express = require('express');
 const crypto = require('crypto');
 const router = express.Router();
 const { titleConvo, getCitations, citeText, askSydney } = require('../../app/');
-const { saveMessage, deleteMessages, saveConvo, deleteMessagesSince, getConvoTitle } = require('../../models');
+const { saveMessage, saveConvo, getConvoTitle } = require('../../models');
 const { handleError, sendMessage } = require('./handlers');
 const citationRegex = /\[\^\d+?\^]/g;
 
@@ -11,7 +11,7 @@ router.post('/', async (req, res) => {
   if (text.length === 0) {
     return handleError(res, 'Prompt empty or too short');
   }
-  
+
   const conversationId = oldConversationId || crypto.randomUUID();
 
   const userMessageId = messageId;
@@ -108,6 +108,7 @@ router.post('/', async (req, res) => {
     await saveMessage(response);
     await saveConvo(response);
     sendMessage(res, {
+      title: await getConvoTitle(conversationId),
       final: true, 
       requestMessage: userMessage, 
       responseMessage: gptResponse
diff --git a/api/server/routes/convos.js b/api/server/routes/convos.js
index 4b9320873f..a82242db4a 100644
--- a/api/server/routes/convos.js
+++ b/api/server/routes/convos.js
@@ -1,12 +1,38 @@
 const express = require('express');
 const router = express.Router();
+const { titleConvo } = require('../../app/');
+const { getConvo, saveConvo, getConvoTitle } = require('../../models');
 const { getConvos, deleteConvos, updateConvo } = require('../../models/Conversation');
+const { getMessages } = require('../../models/Message');
 
 router.get('/', async (req, res) => {
   const pageNumber = req.query.pageNumber || 1;
   res.status(200).send(await getConvos(pageNumber));
 });
 
+router.post('/gen_title', async (req, res) => {
+  const { conversationId } = req.body.arg;
+
+  const convo = await getConvo(conversationId)
+  const firstMessage = (await getMessages({ conversationId }))[0]
+  const secondMessage = (await getMessages({ conversationId }))[1]
+
+  const title = convo.jailbreakConversationId
+    ? await getConvoTitle(conversationId)
+    : await titleConvo({
+        model: convo?.model,
+        message: firstMessage?.text,
+        response: JSON.stringify(secondMessage?.text || '')
+      });
+
+  await saveConvo({
+    conversationId,
+    title
+  })
+
+  res.status(200).send(title);
+});
+
 router.post('/clear', async (req, res) => {
   let filter = {};
   const { conversationId } = req.body.arg;
diff --git a/client/src/components/Conversations/Conversation.jsx b/client/src/components/Conversations/Conversation.jsx
index 30df587da9..4d90ecb2cc 100644
--- a/client/src/components/Conversations/Conversation.jsx
+++ b/client/src/components/Conversations/Conversation.jsx
@@ -8,13 +8,14 @@ import { setMessages, setEmptyMessage } from '~/store/messageSlice';
 import { setText } from '~/store/textSlice';
 import manualSWR from '~/utils/fetchers';
 import ConvoIcon from '../svg/ConvoIcon';
+import { refreshConversation } from '../../store/convoSlice';
 
 export default function Conversation({
   id,
   model,
   parentMessageId,
   conversationId,
-  title = 'New conversation',
+  title,
   chatGptLabel = null,
   promptPrefix = null,
   bingData,
@@ -95,6 +96,7 @@ export default function Conversation({
 
   const renameHandler = (e) => {
     e.preventDefault();
+    setTitleInput(title);
     setRenaming(true);
     setTimeout(() => {
       inputRef.current.focus();
@@ -112,7 +114,10 @@ export default function Conversation({
     if (titleInput === title) {
       return;
     }
-    rename.trigger({ conversationId, title: titleInput });
+    rename.trigger({ conversationId, title: titleInput })
+      .then(() => {
+        dispatch(refreshConversation())
+      });
   };
 
   const handleKeyDown = (e) => {
@@ -149,7 +154,7 @@ export default function Conversation({
             onKeyDown={handleKeyDown}
           />
         ) : (
-          titleInput
+          title
         )}
       </div>
       {conversationId === id ? (
diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index 69f4b65898..b541c9a51f 100644
--- a/client/src/components/Main/TextChat.jsx
+++ b/client/src/components/Main/TextChat.jsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { SSE } from '~/utils/sse';
+import axios from 'axios';
 import SubmitButton from './SubmitButton';
 import Regenerate from './Regenerate';
 import ModelMenu from '../Models/ModelMenu';
@@ -7,10 +8,11 @@ import Footer from './Footer';
 import TextareaAutosize from 'react-textarea-autosize';
 import handleSubmit from '~/utils/handleSubmit';
 import { useSelector, useDispatch } from 'react-redux';
-import { setConversation, setError } from '~/store/convoSlice';
+import { setConversation, setError, refreshConversation } from '~/store/convoSlice';
 import { setMessages } from '~/store/messageSlice';
 import { setSubmitState, setSubmission } from '~/store/submitSlice';
 import { setText } from '~/store/textSlice';
+import manualSWR from '~/utils/fetchers';
 
 export default function TextChat({ messages }) {
   const [errorMessage, setErrorMessage] = useState('');
@@ -22,6 +24,7 @@ export default function TextChat({ messages }) {
     useSelector((state) => state.submit);
   const { text } = useSelector((state) => state.text);
   const { error } = convo;
+  const genTitle = manualSWR(`/api/convos/gen_title`, 'post');
 
   // auto focus to input, when enter a conversation.
   useEffect(() => {
@@ -45,26 +48,24 @@ export default function TextChat({ messages }) {
 
   const convoHandler = (data, currentState, currentMsg) => {
     const { requestMessage, responseMessage } = data;
+    const { conversationId } = currentMsg;
     const { messages, _currentMsg, message, isCustomModel, sender } =
       currentState;
     const { model, chatGptLabel, promptPrefix } = message;
     dispatch(
-      setMessages([...messages, 
-        { 
-          ...requestMessage, 
-          // messageId: data?.parentMessageId,  
-        }, 
-        { 
-          ...responseMessage,
-          // sender, 
-          // text: data.text || data.response, 
-        }
-      ])
+      setMessages([...messages, requestMessage, responseMessage,])
     );
 
     const isBing = model === 'bingai' || model === 'sydney';
 
-    // if (!message.messageId)
+    if (requestMessage.parentMessageId == '00000000-0000-0000-0000-000000000000') {
+      genTitle.trigger({ conversationId }).then((ret) => {
+        const title = ret?.data
+
+        if (title)
+          dispatch(refreshConversation());
+      })
+    }
 
     if (!isBing && convo.conversationId === null && convo.parentMessageId === null) {
       const { title } = data;
diff --git a/client/src/components/Nav/index.jsx b/client/src/components/Nav/index.jsx
index 7d548429d9..3029686cf8 100644
--- a/client/src/components/Nav/index.jsx
+++ b/client/src/components/Nav/index.jsx
@@ -11,7 +11,7 @@ import { incrementPage, setConvos } from '~/store/convoSlice';
 export default function Nav({ navVisible, setNavVisible }) {
   const dispatch = useDispatch();
   const [isHovering, setIsHovering] = useState(false);
-  const { conversationId, convos, pageNumber } = useSelector((state) => state.convo);
+  const { conversationId, convos, pageNumber, refreshConvoHint } = useSelector((state) => state.convo);
   const onSuccess = (data) => {
     dispatch(setConvos(data));
   };
@@ -20,6 +20,7 @@ export default function Nav({ navVisible, setNavVisible }) {
     `/api/convos?pageNumber=${pageNumber}`,
     onSuccess
   );
+
   const containerRef = useRef(null);
   const scrollPositionRef = useRef(null);
 
@@ -35,7 +36,7 @@ export default function Nav({ navVisible, setNavVisible }) {
     }
   };
 
-  useDidMountEffect(() => mutate(), [conversationId]);
+  useDidMountEffect(() => mutate(), [conversationId, refreshConvoHint]);
 
   useEffect(() => {
     const container = containerRef.current;
diff --git a/client/src/store/convoSlice.js b/client/src/store/convoSlice.js
index 4e55fa2b94..258de84e70 100644
--- a/client/src/store/convoSlice.js
+++ b/client/src/store/convoSlice.js
@@ -13,6 +13,7 @@ const initialState = {
   promptPrefix: null,
   convosLoading: false,
   pageNumber: 1,
+  refreshConvoHint: 0,
   convos: []
 };
 
@@ -20,6 +21,9 @@ const currentSlice = createSlice({
   name: 'convo',
   initialState,
   reducers: {
+    refreshConversation: (state, action) => {
+      state.refreshConvoHint = state.refreshConvoHint + 1;
+    },
     setConversation: (state, action) => {
       return { ...state, ...action.payload };
     },
@@ -44,10 +48,7 @@ const currentSlice = createSlice({
       state.pageNumber = 1;
     },
     setConvos: (state, action) => {
-      const newConvos = action.payload.filter((convo) => {
-        return !state.convos.some((c) => c.conversationId === convo.conversationId);
-      });
-      state.convos = [...state.convos, ...newConvos].sort(
+      state.convos = action.payload.sort(
         (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
       );
     },
@@ -60,7 +61,7 @@ const currentSlice = createSlice({
   }
 });
 
-export const { setConversation, setConvos, setNewConvo, setError, incrementPage, removeConvo, removeAll } =
+export const { refreshConversation, setConversation, setConvos, setNewConvo, setError, incrementPage, removeConvo, removeAll } =
   currentSlice.actions;
 
 export default currentSlice.reducer;

From 0e98cb4206d99807e0f2185069a18286b380226e Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Mon, 13 Mar 2023 14:05:08 +0800
Subject: [PATCH 10/47] fix: in mobile view, resubmit edit button should always
 visible

---
 client/src/components/Messages/HoverButtons.jsx | 2 +-
 client/src/mobile.css                           | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Messages/HoverButtons.jsx b/client/src/components/Messages/HoverButtons.jsx
index 35c5f14821..f24027118e 100644
--- a/client/src/components/Messages/HoverButtons.jsx
+++ b/client/src/components/Messages/HoverButtons.jsx
@@ -6,7 +6,7 @@ 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" onClick={onClick}>
+        <button className="resubmit-edit-button 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>
diff --git a/client/src/mobile.css b/client/src/mobile.css
index 78fff342c5..e0e3988410 100644
--- a/client/src/mobile.css
+++ b/client/src/mobile.css
@@ -30,6 +30,10 @@
         margin-left: 20px;
     }
 
+    .resubmit-edit-button {
+        display: block;
+    }
+
     .nav {
         position: fixed;
         z-index: 999;

From 90dc171b34ed27ac43283c902cd07f5f5b0b2b40 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Mon, 13 Mar 2023 14:08:42 +0800
Subject: [PATCH 11/47] test: generate of title shouldn't be mislead by answer

---
 api/server/routes/convos.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/server/routes/convos.js b/api/server/routes/convos.js
index a82242db4a..5862919f17 100644
--- 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({

From 4a39965b22d1ab0feab0baf74e274ee60dfcd460 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Mon, 13 Mar 2023 15:55:18 +0800
Subject: [PATCH 12/47] fix: add proxy to titleConvo

---
 api/app/titleConvo.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/api/app/titleConvo.js b/api/app/titleConvo.js
index e0461eabaf..52e35b841a 100644
--- a/api/app/titleConvo.js
+++ b/api/app/titleConvo.js
@@ -1,5 +1,21 @@
 const { Configuration, OpenAIApi } = require('openai');
 
+const proxyEnvToAxiosProxy = (proxyString) => {
+  if (!proxyString) return null;
+
+  const regex = /^([^:]+):\/\/(?:([^:@]*):?([^:@]*)@)?([^:]+)(?::(\d+))?/;
+  const [, protocol, username, password, host, port] = proxyString.match(regex);
+  const proxyConfig = {
+    protocol,
+    host,
+    port: port ? parseInt(port) : undefined,
+    auth: username && password ? { username, password } : undefined
+  };
+  
+  return proxyConfig
+}
+console.log(proxyEnvToAxiosProxy(process.env.PROXY || null))
+
 const titleConvo = async ({ message, response, model }) => {
   const configuration = new Configuration({
     apiKey: process.env.OPENAI_KEY
@@ -15,7 +31,7 @@ const titleConvo = async ({ message, response, model }) => {
       },
       { role: 'user', content: `In 5 words or less, summarize the conversation below with a title in title case using the language the user writes in. Don't refer to the participants of the conversation by name. Do not include punctuation or quotation marks. Your response should be in title case, exclusively containing the title. Conversation:\n\nUser: "${message}"\n\n${model}: "${response}"\n\nTitle: ` },
     ]
-  });
+  }, { proxy: proxyEnvToAxiosProxy(process.env.PROXY || null) });
 
   //eslint-disable-next-line
   return completion.data.choices[0].message.content.replace(/["\.]/g, '');

From a4d5f6a3f2dcc78478129f1f9368b1e4ce982e1c Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Mon, 13 Mar 2023 21:44:30 +0800
Subject: [PATCH 13/47] feat: fully multipath and resubmit

---
 api/server/routes/convos.js                   |   2 +-
 client/src/components/Main/TextChat.jsx       |  14 +-
 client/src/components/Messages/Message.jsx    | 191 ++++++++++++------
 .../src/components/Messages/SiblingSwitch.jsx |  26 +++
 client/src/components/Messages/index.jsx      |  53 +++--
 5 files changed, 197 insertions(+), 89 deletions(-)
 create mode 100644 client/src/components/Messages/SiblingSwitch.jsx

diff --git a/api/server/routes/convos.js b/api/server/routes/convos.js
index 5862919f17..a82242db4a 100644
--- 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({
diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index b541c9a51f..d1a4ed511b 100644
--- 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'
         };
       }
 
diff --git a/client/src/components/Messages/Message.jsx b/client/src/components/Messages/Message.jsx
index 2d6df0360e..1eff8c7d98 100644
--- 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}
+      />
+    </>
   );
 }
diff --git a/client/src/components/Messages/SiblingSwitch.jsx b/client/src/components/Messages/SiblingSwitch.jsx
new file mode 100644
index 0000000000..b5586d6a8c
--- /dev/null
+++ 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;
+}
diff --git a/client/src/components/Messages/index.jsx b/client/src/components/Messages/index.jsx
index 7d9bd69d44..5d191e61cf 100644
--- 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}

From 953f8469580c04fd38f381a591cd3bb22502954f Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Mon, 13 Mar 2023 22:20:50 +0800
Subject: [PATCH 14/47] fix: loading and send button, mobile style feat:
 sibling switch, mobile style fix: only the real submitting message will blink
 feat: drop the text version username, use a similar square. (or it will mass
 up the sibling switch)

---
 client/src/components/Main/SubmitButton.jsx     |  4 ++--
 client/src/components/Main/TextChat.jsx         |  4 ++--
 client/src/components/Messages/Message.jsx      | 17 +++++++++++++----
 .../src/components/Messages/SiblingSwitch.jsx   |  2 +-
 client/src/mobile.css                           |  8 ++++++++
 5 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Main/SubmitButton.jsx b/client/src/components/Main/SubmitButton.jsx
index 802d1a88c3..ed570f5c76 100644
--- a/client/src/components/Main/SubmitButton.jsx
+++ b/client/src/components/Main/SubmitButton.jsx
@@ -10,7 +10,7 @@ export default function SubmitButton({ submitMessage }) {
 
   if (isSubmitting) {
     return (
-      <button className="absolute bottom-1.5 right-1 rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:bottom-0.5 disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:bottom-2.5 md:right-2 md:disabled:bottom-1">
+      <button className="absolute bottom-0 h-[50px] w-[30px] right-1 rounded-md p-1 text-gray-500 hover:bg-gray-100disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:right-2" disabled>
         <div className="text-2xl">
           <span >·</span>
           <span className="blink">·</span>
@@ -23,7 +23,7 @@ export default function SubmitButton({ submitMessage }) {
     <button
       onClick={clickHandler}
       disabled={disabled}
-      className="absolute bottom-1.5 right-1 rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:bottom-2.5 md:right-2"
+      className="absolute bottom-0 flex justify-center items-center h-[50px] w-[50px] right-0 rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent"
     >
       <svg
         stroke="currentColor"
diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index d1a4ed511b..1fb3b06d68 100644
--- 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, parentMessageId: currentMsg?.messageId, messageId: currentMsg?.messageId + '_' }]));
+    dispatch(setMessages([...messages, currentMsg, { sender, text: data, parentMessageId: currentMsg?.messageId, messageId: currentMsg?.messageId + '_', submitting: true }]));
   };
 
   const createdHandler = (data, currentState, currentMsg) => {
@@ -158,7 +158,7 @@ export default function TextChat({ messages }) {
     const message = text.trim();
     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: '', parentMessageId: fakeMessageId };
+    const initialResponse = { sender, text: '', parentMessageId: fakeMessageId, submitting: true };
 
     dispatch(setSubmitState(true));
     dispatch(setMessages([...messages, currentMsg, initialResponse]));
diff --git a/client/src/components/Messages/Message.jsx b/client/src/components/Messages/Message.jsx
index 1eff8c7d98..4f8a266891 100644
--- a/client/src/components/Messages/Message.jsx
+++ b/client/src/components/Messages/Message.jsx
@@ -60,7 +60,7 @@ export default function Message({
 }) {
   const { isSubmitting, model, chatGptLabel, promptPrefix } = useSelector((state) => state.submit);
   const [abortScroll, setAbort] = useState(false);
-  const { sender, text, isCreatedByUser, error } = message
+  const { sender, text, isCreatedByUser, error, submitting } = message
   const textEditor = useRef(null)
   const convo = useSelector((state) => state.convo);
   const { initial } = useSelector((state) => state.models);
@@ -72,7 +72,7 @@ export default function Message({
   const dispatch = useDispatch();
 
   // const notUser = !isCreatedByUser; // sender.toLowerCase() !== 'user';
-  const blinker = isSubmitting && last && !isCreatedByUser;
+  const blinker = submitting && isSubmitting && last && !isCreatedByUser;
 
   useEffect(() => {
     if (blinker && !abortScroll) {
@@ -113,7 +113,16 @@ export default function Message({
 
   const isBing = sender === 'bingai' || sender === 'sydney';
 
-  let icon = `${sender}:`;
+  let icon = (
+    <div
+      style={{ background: 'radial-gradient(circle at 90% 110%, rgb(1 43 128), rgb(17, 139, 161))', color: 'white', fontSize: 12 }}
+      className="relative flex h-[30px] w-[30px] items-center justify-center rounded-sm p-1 text-white"
+    >
+      User
+    </div>
+  );
+    //`${sender}:`;
+
   let backgroundColor = bgColors[sender];
 
   if (!isCreatedByUser) {
@@ -160,7 +169,7 @@ export default function Message({
     const currentMsg = { ...message, sender: 'User', text: text.trim(), current: true, isCreatedByUser: true, messageId: fakeMessageId };
     const sender = model === 'chatgptCustom' ? chatGptLabel : model;
 
-    const initialResponse = { sender, text: '', parentMessageId: fakeMessageId };
+    const initialResponse = { sender, text: '', parentMessageId: fakeMessageId, submitting: true };
 
     dispatch(setSubmitState(true));
     dispatch(setMessages([...messages, currentMsg, initialResponse]));
diff --git a/client/src/components/Messages/SiblingSwitch.jsx b/client/src/components/Messages/SiblingSwitch.jsx
index b5586d6a8c..2d746210b1 100644
--- a/client/src/components/Messages/SiblingSwitch.jsx
+++ b/client/src/components/Messages/SiblingSwitch.jsx
@@ -13,7 +13,7 @@ export default function SiblingSwitch({
     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">
+    <div className="sibling-switch 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>
diff --git a/client/src/mobile.css b/client/src/mobile.css
index e0e3988410..471f207f67 100644
--- a/client/src/mobile.css
+++ b/client/src/mobile.css
@@ -22,6 +22,14 @@
 }
 
 @media (max-width: 767px) {
+    .sibling-switch {
+        left: 114px;
+        top: unset;
+        bottom: 6px;
+        visibility: visible;
+        z-index: 2;
+    }
+
     .nav-close-button {
         display: block;
         position: absolute;

From 2afbc5883f80caea33faf4529e8a1866bf78d637 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Mon, 13 Mar 2023 22:53:29 +0800
Subject: [PATCH 15/47] fix: use onCompositionStart and onCompositionEnd to
 aviod enter submit when using input method.

---
 client/src/components/Main/TextChat.jsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index 1fb3b06d68..50b80b3b74 100644
--- a/client/src/components/Main/TextChat.jsx
+++ b/client/src/components/Main/TextChat.jsx
@@ -17,6 +17,7 @@ import manualSWR from '~/utils/fetchers';
 export default function TextChat({ messages }) {
   const [errorMessage, setErrorMessage] = useState('');
   const inputRef = useRef(null)
+  const isComposing = useRef(false);
   const dispatch = useDispatch();
   const convo = useSelector((state) => state.convo);
   const { initial } = useSelector((state) => state.models);
@@ -278,6 +279,11 @@ export default function TextChat({ messages }) {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
     }
+
+    if (e.key === 'Enter' && !e.shiftKey) {
+      if (!isComposing.current)
+        submitMessage();
+    }
   };
 
   const handleKeyUp = (e) => {
@@ -288,11 +294,15 @@ export default function TextChat({ messages }) {
     if (isSubmitting) {
       return;
     }
-
-    if (e.key === 'Enter' && !e.shiftKey) {
-      submitMessage();
-    }
   };
+  
+  const handleCompositionStart = (e) => {
+    isComposing.current = true
+  }
+
+  const handleCompositionEnd = (e) => {
+    isComposing.current = false;
+  }
 
   const changeHandler = (e) => {
     const { value } = e.target;
@@ -337,6 +347,8 @@ export default function TextChat({ messages }) {
                 onKeyUp={handleKeyUp}
                 onKeyDown={handleKeyDown}
                 onChange={changeHandler}
+                onCompositionStart={handleCompositionStart}
+                onCompositionEnd={handleCompositionEnd}
                 placeholder={disabled ? 'Choose another model or customize GPT again' : ''}
                 disabled={disabled}
                 className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-9 pr-8 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"

From 953c5fc9703f4f65681430f212e3151cbeba41bd Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Mon, 13 Mar 2023 23:54:57 +0800
Subject: [PATCH 16/47] fix: w<1024px, will overflow.

---
 client/src/mobile.css | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/client/src/mobile.css b/client/src/mobile.css
index 471f207f67..321663129c 100644
--- a/client/src/mobile.css
+++ b/client/src/mobile.css
@@ -21,15 +21,22 @@
     display: none;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 1024px) {
     .sibling-switch {
         left: 114px;
         top: unset;
-        bottom: 6px;
+        bottom: 4px;
         visibility: visible;
         z-index: 2;
     }
 
+    .resubmit-edit-button {
+        display: block;
+        visibility: visible;
+    }
+}
+
+@media (max-width: 767px) {
     .nav-close-button {
         display: block;
         position: absolute;
@@ -38,10 +45,6 @@
         margin-left: 20px;
     }
 
-    .resubmit-edit-button {
-        display: block;
-    }
-
     .nav {
         position: fixed;
         z-index: 999;

From d9e5464b3be97309342014cef0a6b3f4a23f2c87 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Tue, 14 Mar 2023 00:11:56 +0800
Subject: [PATCH 17/47] fix: cleanup debug msg

---
 api/app/titleConvo.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/api/app/titleConvo.js b/api/app/titleConvo.js
index 52e35b841a..88e8c75074 100644
--- a/api/app/titleConvo.js
+++ b/api/app/titleConvo.js
@@ -14,7 +14,6 @@ const proxyEnvToAxiosProxy = (proxyString) => {
   
   return proxyConfig
 }
-console.log(proxyEnvToAxiosProxy(process.env.PROXY || null))
 
 const titleConvo = async ({ message, response, model }) => {
   const configuration = new Configuration({

From 0fa19bb6ad4558173ed102d36855747513ef4dcf Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Tue, 14 Mar 2023 03:38:47 +0800
Subject: [PATCH 18/47] feat: save error message into database.

---
 api/models/Message.js                      | 11 ++++++++---
 api/server/routes/ask.js                   |  8 ++++++++
 api/server/routes/askBing.js               |  4 ++++
 api/server/routes/askSydney.js             |  4 ++++
 client/src/components/Main/TextChat.jsx    | 12 +++++++-----
 client/src/components/Messages/Message.jsx |  8 ++++++--
 6 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/api/models/Message.js b/api/models/Message.js
index db1746924b..9e281a9f16 100644
--- a/api/models/Message.js
+++ b/api/models/Message.js
@@ -36,20 +36,25 @@ const messageSchema = mongoose.Schema({
     type: Boolean,
     required: true,
     default: false
-  }
+  },
+  error: {
+    type: Boolean,
+    default: false
+  },
 }, { timestamps: true });
 
 const Message = mongoose.models.Message || mongoose.model('Message', messageSchema);
 
 module.exports = {
-  saveMessage: async ({ messageId, conversationId, parentMessageId, sender, text, isCreatedByUser=false }) => {
+  saveMessage: async ({ messageId, conversationId, parentMessageId, sender, text, isCreatedByUser=false, error }) => {
     try {
       await Message.findOneAndUpdate({ messageId }, {
         conversationId,
         parentMessageId,
         sender,
         text,
-        isCreatedByUser
+        isCreatedByUser,
+        error
       }, { upsert: true, new: true });
       return { messageId, conversationId, parentMessageId, sender, text, isCreatedByUser };
     } catch (error) {
diff --git a/api/server/routes/ask.js b/api/server/routes/ask.js
index d21f8be263..d644af1624 100644
--- a/api/server/routes/ask.js
+++ b/api/server/routes/ask.js
@@ -131,6 +131,10 @@ router.post('/', async (req, res) => {
       gptResponse.text.toLowerCase().includes('no response') ||
       gptResponse.text.toLowerCase().includes('no answer')
     ) {
+      await saveMessage({ 
+        messageId: crypto.randomUUID(), sender: model, 
+        conversationId, parentMessageId: userMessageId,
+        error: true, text: 'Prompt empty or too short'});
       return handleError(res, 'Prompt empty or too short');
     }
 
@@ -165,6 +169,10 @@ router.post('/', async (req, res) => {
   } catch (error) {
     console.log(error);
     // await deleteMessages({ messageId: userMessageId });
+    await saveMessage({ 
+      messageId: crypto.randomUUID(), sender: model, 
+      conversationId, parentMessageId: userMessageId,
+      error: true, text: error.message});
     handleError(res, error.message);
   }
 });
diff --git a/api/server/routes/askBing.js b/api/server/routes/askBing.js
index f2722bb248..7b5ca44185 100644
--- a/api/server/routes/askBing.js
+++ b/api/server/routes/askBing.js
@@ -107,6 +107,10 @@ router.post('/', async (req, res) => {
   } catch (error) {
     console.log(error);
     // await deleteMessages({ messageId: userMessageId });
+    await saveMessage({ 
+      messageId: crypto.randomUUID(), sender: model, 
+      conversationId, parentMessageId: userMessageId,
+      error: true, text: error.message});
     handleError(res, error.message);
   }
 });
diff --git a/api/server/routes/askSydney.js b/api/server/routes/askSydney.js
index a90dd39555..cdf571fbfe 100644
--- a/api/server/routes/askSydney.js
+++ b/api/server/routes/askSydney.js
@@ -117,6 +117,10 @@ router.post('/', async (req, res) => {
   } catch (error) {
     console.log(error);
     // await deleteMessages({ messageId: userMessageId });
+    await saveMessage({ 
+      messageId: crypto.randomUUID(), sender: model, 
+      conversationId, parentMessageId: userMessageId,
+      error: true, text: error.message});
     handleError(res, error.message);
   }
 });
diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index 50b80b3b74..fe2c7b08eb 100644
--- a/client/src/components/Main/TextChat.jsx
+++ b/client/src/components/Main/TextChat.jsx
@@ -128,13 +128,14 @@ export default function TextChat({ messages }) {
     dispatch(setSubmitState(false));
   };
 
-  const errorHandler = (event, currentState) => {
-    const { initialResponse, messages, currentMsg, message } = currentState;
+  const errorHandler = (event, currentState, currentMsg) => {
+    const { initialResponse, messages, _currentMsg, message } = currentState;
     console.log('Error:', event);
     const errorResponse = {
       ...initialResponse,
-      text: `An error occurred. Please try again in a few moments.\n\nError message: ${event.data}`,
-      error: true
+      text: `${event.data}`,
+      error: true,
+      parentMessageId: currentMsg?.messageId,
     };
     setErrorMessage(event.data);
     dispatch(setSubmitState(false));
@@ -264,7 +265,7 @@ export default function TextChat({ messages }) {
     events.onerror = function (e) {
       console.log('error in opening conn.');
       events.close();
-      errorHandler(e, currentState);
+      errorHandler(e, currentState, currentMsg);
     };
 
     events.stream();
@@ -306,6 +307,7 @@ export default function TextChat({ messages }) {
 
   const changeHandler = (e) => {
     const { value } = e.target;
+    console.log(value)
     if (isSubmitting && (value === '' || value === '\n')) {
       return;
     }
diff --git a/client/src/components/Messages/Message.jsx b/client/src/components/Messages/Message.jsx
index 4f8a266891..3d5c576059 100644
--- a/client/src/components/Messages/Message.jsx
+++ b/client/src/components/Messages/Message.jsx
@@ -166,7 +166,11 @@ export default function Message({
     // 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, messageId: fakeMessageId };
+    const currentMsg = { 
+      sender: 'User', text: text.trim(), current: true, isCreatedByUser: true, 
+      parentMessageId: message?.parentMessageId, 
+      conversationId: message?.conversationId, 
+      messageId: fakeMessageId };
     const sender = model === 'chatgptCustom' ? chatGptLabel : model;
 
     const initialResponse = { sender, text: '', parentMessageId: fakeMessageId, submitting: true };
@@ -217,7 +221,7 @@ export default function Message({
               {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}
+                    {`An error occurred. Please try again in a few moments.\n\nError message: ${text}`}
                   </div>
                 </div>
               ) : 

From 4fd05e15b4b6350382c76f2b84d58b342efa8fdf Mon Sep 17 00:00:00 2001
From: Daniel Avila <messagedaniel@protonmail.com>
Date: Mon, 13 Mar 2023 21:59:25 -0400
Subject: [PATCH 19/47] fix: migrate old schema to new

---
 api/models/Conversation.js     | 135 ++++++++++++++++++++++++---------
 api/models/Message.js          |   2 +-
 api/models/index.js            |   3 +-
 api/server/index.js            |   6 +-
 api/server/routes/askBing.js   |   2 +-
 api/server/routes/askSydney.js |   2 +-
 6 files changed, 108 insertions(+), 42 deletions(-)

diff --git a/api/models/Conversation.js b/api/models/Conversation.js
index c8daf78c4a..1c994fdc38 100644
--- a/api/models/Conversation.js
+++ b/api/models/Conversation.js
@@ -1,44 +1,48 @@
 const mongoose = require('mongoose');
+const crypto = require('crypto');
 const { getMessages, deleteMessages } = require('./Message');
 
-const convoSchema = mongoose.Schema({
-  conversationId: {
-    type: String,
-    unique: true,
-    required: true
+const convoSchema = mongoose.Schema(
+  {
+    conversationId: {
+      type: String,
+      unique: true,
+      required: true
+    },
+    parentMessageId: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      default: 'New Chat'
+    },
+    jailbreakConversationId: {
+      type: String
+    },
+    conversationSignature: {
+      type: String
+    },
+    clientId: {
+      type: String
+    },
+    invocationId: {
+      type: String
+    },
+    chatGptLabel: {
+      type: String
+    },
+    promptPrefix: {
+      type: String
+    },
+    model: {
+      type: String
+    },
+    suggestions: [{ type: String }],
+    messages: [{ type: mongoose.Schema.Types.ObjectId, ref: 'Message' }]
   },
-  parentMessageId: {
-    type: String,
-    required: true
-  },
-  title: {
-    type: String,
-    default: 'New Chat'
-  },
-  jailbreakConversationId: {
-    type: String
-  },
-  conversationSignature: {
-    type: String
-  },
-  clientId: {
-    type: String
-  },
-  invocationId: {
-    type: String
-  },
-  chatGptLabel: {
-    type: String
-  },
-  promptPrefix: {
-    type: String
-  },
-  model: {
-    type: String
-  },
-  suggestions: [{ type: String }],
-  messages: [{ type: mongoose.Schema.Types.ObjectId, ref: 'Message' }],
-}, { timestamps: true });
+  { timestamps: true }
+);
 
 const Conversation =
   mongoose.models.Conversation || mongoose.model('Conversation', convoSchema);
@@ -114,5 +118,62 @@ module.exports = {
     let deleteCount = await Conversation.deleteMany(filter).exec();
     deleteCount.messages = await deleteMessages(filter);
     return deleteCount;
+  },
+  migrateDb: async () => {
+    try {
+      const conversations = await Conversation.find({ model: null }).exec();
+
+      if (!conversations || conversations.length === 0)
+        return { message: 'No conversations to migrate' };
+
+      for (let convo of conversations) {
+        const messages = await getMessages({
+          conversationId: convo.conversationId,
+          messageId: { $exists: false }
+        });
+
+        const promises = [];
+        let model;
+        let oldId;
+        messages.forEach((message, i) => {
+          const msgObj = message.toObject();
+          const newId = msgObj.id;
+          if (i === 0) {
+            message.parentMessageId = '00000000-0000-0000-0000-000000000000';
+            oldId = newId;
+          } else {
+            message.parentMessageId = oldId;
+            oldId = newId;
+          }
+          
+          message.messageId = newId;
+          message.createdAt = message.created;
+          if (message.sender.toLowerCase() !== 'user' && !model) {
+            model = message.sender.toLowerCase();
+          }
+
+          if (message.sender.toLowerCase() === 'user') {
+            message.isCreatedByUser = true;
+          }
+          promises.push(message.save());
+        });
+        await Promise.all(promises);
+
+        await Conversation.findOneAndUpdate(
+          { conversationId: convo.conversationId },
+          { model, createdAt: convo.created },
+          { new: true }
+        ).exec();
+      }
+
+      try {
+        await mongoose.connection.db.collection('messages').dropIndex('id_1');
+      } catch (error) {
+        console.log("Index doesn't exist or already dropped");
+      }
+    } catch (error) {
+      console.log(error);
+      return { message: 'Error migrating conversations' };
+    }
   }
 };
diff --git a/api/models/Message.js b/api/models/Message.js
index 9e281a9f16..90165acb86 100644
--- a/api/models/Message.js
+++ b/api/models/Message.js
@@ -64,7 +64,7 @@ module.exports = {
   },
   deleteMessagesSince: async ({ messageId, conversationId }) => {
     try {
-      message = await Message.findOne({ messageId }).exec()
+      const message = await Message.findOne({ messageId }).exec()
 
       if (message) 
         return await Message.find({ conversationId }).deleteMany({ createdAt: { $gt: message.createdAt } }).exec();
diff --git a/api/models/index.js b/api/models/index.js
index 4ed1285bbf..cd75b9c6a3 100644
--- a/api/models/index.js
+++ b/api/models/index.js
@@ -1,6 +1,6 @@
 const { saveMessage, deleteMessagesSince, deleteMessages } = require('./Message');
 const { getCustomGpts, updateCustomGpt, updateByLabel, deleteCustomGpts } = require('./CustomGpt');
-const { getConvoTitle, getConvo, saveConvo } = require('./Conversation');
+const { getConvoTitle, getConvo, saveConvo, migrateDb } = require('./Conversation');
 
 module.exports = {
   saveMessage,
@@ -9,6 +9,7 @@ module.exports = {
   getConvoTitle,
   getConvo,
   saveConvo,
+  migrateDb,
   getCustomGpts,
   updateCustomGpt,
   updateByLabel,
diff --git a/api/server/index.js b/api/server/index.js
index b380932531..bda88b14f4 100644
--- a/api/server/index.js
+++ b/api/server/index.js
@@ -1,5 +1,6 @@
 const express = require('express');
 const dbConnect = require('../models/dbConnect');
+const { migrateDb } = require('../models');
 const path = require('path');
 const cors = require('cors');
 const routes = require('./routes');
@@ -7,7 +8,10 @@ const app = express();
 const port = process.env.PORT || 3080;
 const host = process.env.HOST || 'localhost'
 const projectPath = path.join(__dirname, '..', '..', 'client');
-dbConnect().then(() => console.log('Connected to MongoDB'));
+dbConnect().then(() => {
+  console.log('Connected to MongoDB');
+  migrateDb();
+});
 
 app.use(cors());
 app.use(express.json());
diff --git a/api/server/routes/askBing.js b/api/server/routes/askBing.js
index 7b5ca44185..8c8238917a 100644
--- a/api/server/routes/askBing.js
+++ b/api/server/routes/askBing.js
@@ -14,7 +14,7 @@ router.post('/', async (req, res) => {
 
   const conversationId = oldConversationId || crypto.randomUUID();
 
-  const userMessageId = messageId;
+  const userMessageId = crypto.randomUUID();
   const userParentMessageId = parentMessageId || '00000000-0000-0000-0000-000000000000'
   let userMessage = {
     messageId: userMessageId, 
diff --git a/api/server/routes/askSydney.js b/api/server/routes/askSydney.js
index cdf571fbfe..8738b625d0 100644
--- a/api/server/routes/askSydney.js
+++ b/api/server/routes/askSydney.js
@@ -14,7 +14,7 @@ router.post('/', async (req, res) => {
 
   const conversationId = oldConversationId || crypto.randomUUID();
 
-  const userMessageId = messageId;
+  const userMessageId = crypto.randomUUID();
   const userParentMessageId = parentMessageId || '00000000-0000-0000-0000-000000000000'
   let userMessage = {
     messageId: userMessageId, 

From 3e7ce67609d64da85f147836b8567e37aced3df3 Mon Sep 17 00:00:00 2001
From: Daniel Avila <messagedaniel@protonmail.com>
Date: Mon, 13 Mar 2023 22:00:13 -0400
Subject: [PATCH 20/47] fix: migrate old schema to new

---
 client/src/components/Conversations/Conversation.jsx |  1 +
 client/src/components/Messages/index.jsx             |  2 ++
 client/src/components/Models/ModelMenu.jsx           | 10 +++++++---
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Conversations/Conversation.jsx b/client/src/components/Conversations/Conversation.jsx
index 4d90ecb2cc..cc41d62daf 100644
--- a/client/src/components/Conversations/Conversation.jsx
+++ b/client/src/components/Conversations/Conversation.jsx
@@ -74,6 +74,7 @@ export default function Conversation({
       );
     }
     const data = await trigger();
+    console.log('data', data);
 
     if (chatGptLabel) {
       dispatch(setModel('chatgptCustom'));
diff --git a/client/src/components/Messages/index.jsx b/client/src/components/Messages/index.jsx
index 5d191e61cf..f9452d2d23 100644
--- a/client/src/components/Messages/index.jsx
+++ b/client/src/components/Messages/index.jsx
@@ -26,6 +26,8 @@ const Messages = ({ messages }) => {
   
   const messageTree = useMemo(() => buildTree(messages), [messages, ]);
 
+  console.log('messageTree', messageTree);
+
   function buildTree(messages) {
     let messageMap = {};
     let rootMessages = [];
diff --git a/client/src/components/Models/ModelMenu.jsx b/client/src/components/Models/ModelMenu.jsx
index 6e796cd567..64d8a427b1 100644
--- a/client/src/components/Models/ModelMenu.jsx
+++ b/client/src/components/Models/ModelMenu.jsx
@@ -44,9 +44,13 @@ export default function ModelMenu() {
 
   useEffect(() => {
     mutate();
-    const lastSelected = JSON.parse(localStorage.getItem('model'));
-    if (lastSelected && lastSelected !== 'chatgptCustom' && initial[lastSelected]) {
-      dispatch(setModel(lastSelected));
+    try {
+      const lastSelected = JSON.parse(localStorage.getItem('model'));
+      if (lastSelected && lastSelected !== 'chatgptCustom' && initial[lastSelected]) {
+        dispatch(setModel(lastSelected));
+      }
+    } catch (err) {
+      console.log(err);
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

From 27515cb00aeb244682a6bbbc99b89c0f185d54c4 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Tue, 14 Mar 2023 11:42:35 +0800
Subject: [PATCH 21/47] fix: generate title by backend

---
 api/server/routes/ask.js                      | 20 +++++++++++-------
 api/server/routes/askBing.js                  | 21 ++++++++++++-------
 api/server/routes/askSydney.js                | 20 +++++++++++-------
 .../components/Conversations/Conversation.jsx |  1 -
 client/src/components/Main/TextChat.jsx       |  2 +-
 client/src/components/Messages/index.jsx      |  2 --
 6 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/api/server/routes/ask.js b/api/server/routes/ask.js
index d644af1624..ea246fb46d 100644
--- a/api/server/routes/ask.js
+++ b/api/server/routes/ask.js
@@ -138,13 +138,6 @@ router.post('/', async (req, res) => {
       return handleError(res, 'Prompt empty or too short');
     }
 
-    // if (!parentMessageId) {
-    //   gptResponse.title = await titleConvo({
-    //     model,
-    //     message: text,
-    //     response: JSON.stringify(gptResponse.text)
-    //   });
-    // }
     gptResponse.sender = model === 'chatgptCustom' ? chatGptLabel : model;
     // gptResponse.final = true;
     gptResponse.text = await detectCode(gptResponse.text);
@@ -166,6 +159,19 @@ router.post('/', async (req, res) => {
       responseMessage: gptResponse
     });
     res.end();
+
+    if (parentMessageId == '00000000-0000-0000-0000-000000000000') {
+      const title = await titleConvo({
+        model,
+        message: text,
+        response: JSON.stringify(gptResponse?.text)
+      });
+
+      await saveConvo({
+        conversationId,
+        title
+      })
+    }
   } catch (error) {
     console.log(error);
     // await deleteMessages({ messageId: userMessageId });
diff --git a/api/server/routes/askBing.js b/api/server/routes/askBing.js
index 8c8238917a..975046986c 100644
--- a/api/server/routes/askBing.js
+++ b/api/server/routes/askBing.js
@@ -72,14 +72,6 @@ router.post('/', async (req, res) => {
     userMessage.invocationId = response.invocationId;
     await saveMessage(userMessage);
 
-    // if (!convo.conversationSignature) {
-    //   response.title = await titleConvo({
-    //     model,
-    //     message: text,
-    //     response: JSON.stringify(response.response)
-    //   });
-    // }
-
     response.text = response.response;
     delete response.response;
     // response.id = response.details.messageId;
@@ -104,6 +96,19 @@ router.post('/', async (req, res) => {
       responseMessage: gptResponse
     });
     res.end();
+
+    if (parentMessageId == '00000000-0000-0000-0000-000000000000') {
+      const title = await titleConvo({
+        model,
+        message: text,
+        response: JSON.stringify(gptResponse?.text)
+      });
+
+      await saveConvo({
+        conversationId,
+        title
+      })
+    }
   } catch (error) {
     console.log(error);
     // await deleteMessages({ messageId: userMessageId });
diff --git a/api/server/routes/askSydney.js b/api/server/routes/askSydney.js
index 8738b625d0..a31c42e3f0 100644
--- a/api/server/routes/askSydney.js
+++ b/api/server/routes/askSydney.js
@@ -73,13 +73,6 @@ router.post('/', async (req, res) => {
     // response.parentMessageId = convo.parentMessageId ? convo.parentMessageId : response.messageId;
     response.parentMessageId = response.messageId;
     response.invocationId = convo.invocationId ? convo.invocationId + 1 : 1;
-    response.title = convo.jailbreakConversationId
-      ? await getConvoTitle(conversationId)
-      : await titleConvo({
-          model,
-          message: text,
-          response: JSON.stringify(response.response)
-        });
     response.conversationId = conversationId
       ? conversationId
       : crypto.randomUUID();
@@ -114,6 +107,19 @@ router.post('/', async (req, res) => {
       responseMessage: gptResponse
     });
     res.end();
+
+    if (parentMessageId == '00000000-0000-0000-0000-000000000000') {
+      const title = await titleConvo({
+        model,
+        message: text,
+        response: JSON.stringify(gptResponse?.text)
+      });
+
+      await saveConvo({
+        conversationId,
+        title
+      })
+    }
   } catch (error) {
     console.log(error);
     // await deleteMessages({ messageId: userMessageId });
diff --git a/client/src/components/Conversations/Conversation.jsx b/client/src/components/Conversations/Conversation.jsx
index cc41d62daf..4d90ecb2cc 100644
--- a/client/src/components/Conversations/Conversation.jsx
+++ b/client/src/components/Conversations/Conversation.jsx
@@ -74,7 +74,6 @@ export default function Conversation({
       );
     }
     const data = await trigger();
-    console.log('data', data);
 
     if (chatGptLabel) {
       dispatch(setModel('chatgptCustom'));
diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index fe2c7b08eb..710b10f7c2 100644
--- a/client/src/components/Main/TextChat.jsx
+++ b/client/src/components/Main/TextChat.jsx
@@ -307,7 +307,7 @@ export default function TextChat({ messages }) {
 
   const changeHandler = (e) => {
     const { value } = e.target;
-    console.log(value)
+
     if (isSubmitting && (value === '' || value === '\n')) {
       return;
     }
diff --git a/client/src/components/Messages/index.jsx b/client/src/components/Messages/index.jsx
index f9452d2d23..5d191e61cf 100644
--- a/client/src/components/Messages/index.jsx
+++ b/client/src/components/Messages/index.jsx
@@ -26,8 +26,6 @@ const Messages = ({ messages }) => {
   
   const messageTree = useMemo(() => buildTree(messages), [messages, ]);
 
-  console.log('messageTree', messageTree);
-
   function buildTree(messages) {
     let messageMap = {};
     let rootMessages = [];

From 716849854329da473215f1e41b6c94cf33b17e78 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Wed, 15 Mar 2023 00:47:17 +0800
Subject: [PATCH 22/47] fix: jailbreakConversationId=false response will be
 saved jailbreakConversationId='false' in database.

---
 api/app/bingai.js          | 6 ++++--
 api/models/Conversation.js | 2 ++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/api/app/bingai.js b/api/app/bingai.js
index d1175c0bfc..2ccbc2b356 100644
--- a/api/app/bingai.js
+++ b/api/app/bingai.js
@@ -22,8 +22,10 @@ const askBing = async ({ text, progressCallback, convo }) => {
     options = { ...options, ...convo };
   }
 
-  const res = await bingAIClient.sendMessage(text, options
-  );
+  if (options?.jailbreakConversationId == 'false')
+    options.jailbreakConversationId = false
+
+  const res = await bingAIClient.sendMessage(text, options);
 
   return res;
 
diff --git a/api/models/Conversation.js b/api/models/Conversation.js
index 1c994fdc38..d2ead788d2 100644
--- a/api/models/Conversation.js
+++ b/api/models/Conversation.js
@@ -64,6 +64,8 @@ module.exports = {
       if (title) {
         update.title = title;
       }
+      if (!update.jailbreakConversationId)
+        update.jailbreakConversationId = null
 
       return await Conversation.findOneAndUpdate(
         { conversationId },

From d73375958b559e1b5fbda536a809872580342064 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Wed, 15 Mar 2023 00:50:27 +0800
Subject: [PATCH 23/47] feat: return error as a error message, not only text

---
 api/server/routes/ask.js                | 13 +++++++------
 api/server/routes/askBing.js            | 11 ++++++-----
 api/server/routes/askSydney.js          | 11 ++++++-----
 api/server/routes/handlers.js           |  4 ++--
 client/src/components/Main/TextChat.jsx | 16 +++++++++-------
 5 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/api/server/routes/ask.js b/api/server/routes/ask.js
index ea246fb46d..794f6367b1 100644
--- a/api/server/routes/ask.js
+++ b/api/server/routes/ask.js
@@ -19,7 +19,7 @@ router.use('/sydney', askSydney);
 router.post('/', async (req, res) => {
   let { model, text, parentMessageId, conversationId: oldConversationId , chatGptLabel, promptPrefix } = req.body;
   if (text.length === 0) {
-    return handleError(res, 'Prompt empty or too short');
+    return handleError(res, { text: 'Prompt empty or too short' });
   }
 
   const conversationId = oldConversationId || crypto.randomUUID();
@@ -135,7 +135,7 @@ router.post('/', async (req, res) => {
         messageId: crypto.randomUUID(), sender: model, 
         conversationId, parentMessageId: userMessageId,
         error: true, text: 'Prompt empty or too short'});
-      return handleError(res, 'Prompt empty or too short');
+      return handleError(res, { text: 'Prompt empty or too short' });
     }
 
     gptResponse.sender = model === 'chatgptCustom' ? chatGptLabel : model;
@@ -175,11 +175,12 @@ router.post('/', async (req, res) => {
   } catch (error) {
     console.log(error);
     // await deleteMessages({ messageId: userMessageId });
-    await saveMessage({ 
+    const errorMessage = { 
       messageId: crypto.randomUUID(), sender: model, 
-      conversationId, parentMessageId: userMessageId,
-      error: true, text: error.message});
-    handleError(res, error.message);
+      conversationId, parentMessageId: overrideParentMessageId || userMessageId,
+      error: true, text: error.message}
+    await saveMessage(errorMessage);
+    handleError(res, errorMessage);
   }
 });
 
diff --git a/api/server/routes/askBing.js b/api/server/routes/askBing.js
index 975046986c..885741d08c 100644
--- a/api/server/routes/askBing.js
+++ b/api/server/routes/askBing.js
@@ -9,7 +9,7 @@ const citationRegex = /\[\^\d+?\^]/g;
 router.post('/', async (req, res) => {
   const { model, text, parentMessageId, conversationId: oldConversationId, ...convo } = req.body;
   if (text.length === 0) {
-    return handleError(res, 'Prompt empty or too short');
+    return handleError(res, { text: 'Prompt empty or too short' });
   }
 
   const conversationId = oldConversationId || crypto.randomUUID();
@@ -112,11 +112,12 @@ router.post('/', async (req, res) => {
   } catch (error) {
     console.log(error);
     // await deleteMessages({ messageId: userMessageId });
-    await saveMessage({ 
+    const errorMessage = { 
       messageId: crypto.randomUUID(), sender: model, 
-      conversationId, parentMessageId: userMessageId,
-      error: true, text: error.message});
-    handleError(res, error.message);
+      conversationId, parentMessageId: overrideParentMessageId || userMessageId,
+      error: true, text: error.message}
+    await saveMessage(errorMessage);
+    handleError(res, errorMessage);
   }
 });
 
diff --git a/api/server/routes/askSydney.js b/api/server/routes/askSydney.js
index a31c42e3f0..5a63f97004 100644
--- a/api/server/routes/askSydney.js
+++ b/api/server/routes/askSydney.js
@@ -9,7 +9,7 @@ const citationRegex = /\[\^\d+?\^]/g;
 router.post('/', async (req, res) => {
   const { model, text, parentMessageId, conversationId: oldConversationId, ...convo } = req.body;
   if (text.length === 0) {
-    return handleError(res, 'Prompt empty or too short');
+    return handleError(res, { text: 'Prompt empty or too short' });
   }
 
   const conversationId = oldConversationId || crypto.randomUUID();
@@ -123,11 +123,12 @@ router.post('/', async (req, res) => {
   } catch (error) {
     console.log(error);
     // await deleteMessages({ messageId: userMessageId });
-    await saveMessage({ 
+    const errorMessage = { 
       messageId: crypto.randomUUID(), sender: model, 
-      conversationId, parentMessageId: userMessageId,
-      error: true, text: error.message});
-    handleError(res, error.message);
+      conversationId, parentMessageId: overrideParentMessageId || userMessageId,
+      error: true, text: error.message}
+    await saveMessage(errorMessage);
+    handleError(res, errorMessage);
   }
 });
 
diff --git a/api/server/routes/handlers.js b/api/server/routes/handlers.js
index edd64e6184..e727cacfa3 100644
--- a/api/server/routes/handlers.js
+++ b/api/server/routes/handlers.js
@@ -1,5 +1,5 @@
-const handleError = (res, errorMessage) => {
-  res.status(500).write(`event: error\ndata: ${errorMessage}`);
+const handleError = (res, message) => {
+  res.write(`event: error\ndata: ${JSON.stringify(message)}\n\n`);
   res.end();
 };
 
diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index 710b10f7c2..0045718617 100644
--- a/client/src/components/Main/TextChat.jsx
+++ b/client/src/components/Main/TextChat.jsx
@@ -128,18 +128,17 @@ export default function TextChat({ messages }) {
     dispatch(setSubmitState(false));
   };
 
-  const errorHandler = (event, currentState, currentMsg) => {
+  const errorHandler = (data, currentState, currentMsg) => {
     const { initialResponse, messages, _currentMsg, message } = currentState;
-    console.log('Error:', event);
+    console.log('Error:', data);
     const errorResponse = {
-      ...initialResponse,
-      text: `${event.data}`,
+      ...data,
       error: true,
       parentMessageId: currentMsg?.messageId,
     };
-    setErrorMessage(event.data);
+    setErrorMessage(data?.text);
     dispatch(setSubmitState(false));
-    dispatch(setMessages([...messages.slice(0, -2), currentMsg, errorResponse]));
+    dispatch(setMessages([...messages, currentMsg, errorResponse]));
     dispatch(setText(message?.text));
     dispatch(setError(true));
     return;
@@ -265,7 +264,10 @@ export default function TextChat({ messages }) {
     events.onerror = function (e) {
       console.log('error in opening conn.');
       events.close();
-      errorHandler(e, currentState, currentMsg);
+
+      const data = JSON.parse(e.data);
+
+      errorHandler(data, currentState, currentMsg);
     };
 
     events.stream();

From 8b00805d24bc1f6ee155b3666dd6be5e4f0b990e Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Wed, 15 Mar 2023 00:53:15 +0800
Subject: [PATCH 24/47] fix: dont send gen_title twice

---
 api/server/routes/ask.js                |  2 ++
 api/server/routes/askBing.js            |  2 ++
 api/server/routes/askSydney.js          |  2 ++
 api/server/routes/convos.js             | 31 ++++++++++++++-----------
 client/src/components/Main/TextChat.jsx | 10 ++++----
 5 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/api/server/routes/ask.js b/api/server/routes/ask.js
index 794f6367b1..73b85b8012 100644
--- a/api/server/routes/ask.js
+++ b/api/server/routes/ask.js
@@ -167,6 +167,8 @@ router.post('/', async (req, res) => {
         response: JSON.stringify(gptResponse?.text)
       });
 
+      console.log('CONVERSATION TITLE', title);
+
       await saveConvo({
         conversationId,
         title
diff --git a/api/server/routes/askBing.js b/api/server/routes/askBing.js
index 885741d08c..ffe8f2ae6d 100644
--- a/api/server/routes/askBing.js
+++ b/api/server/routes/askBing.js
@@ -104,6 +104,8 @@ router.post('/', async (req, res) => {
         response: JSON.stringify(gptResponse?.text)
       });
 
+      console.log('CONVERSATION TITLE', title);
+      
       await saveConvo({
         conversationId,
         title
diff --git a/api/server/routes/askSydney.js b/api/server/routes/askSydney.js
index 5a63f97004..20f6c302b3 100644
--- a/api/server/routes/askSydney.js
+++ b/api/server/routes/askSydney.js
@@ -115,6 +115,8 @@ router.post('/', async (req, res) => {
         response: JSON.stringify(gptResponse?.text)
       });
 
+      console.log('CONVERSATION TITLE', title);
+      
       await saveConvo({
         conversationId,
         title
diff --git a/api/server/routes/convos.js b/api/server/routes/convos.js
index a82242db4a..bfe3bc2d56 100644
--- a/api/server/routes/convos.js
+++ b/api/server/routes/convos.js
@@ -17,20 +17,23 @@ router.post('/gen_title', async (req, res) => {
   const firstMessage = (await getMessages({ conversationId }))[0]
   const secondMessage = (await getMessages({ conversationId }))[1]
 
-  const title = convo.jailbreakConversationId
-    ? await getConvoTitle(conversationId)
-    : await titleConvo({
-        model: convo?.model,
-        message: firstMessage?.text,
-        response: JSON.stringify(secondMessage?.text || '')
-      });
-
-  await saveConvo({
-    conversationId,
-    title
-  })
-
-  res.status(200).send(title);
+  // if (convo.title == 'New Chat') {
+  //   const title = await titleConvo({
+  //                   model: convo?.model,
+  //                   message: firstMessage?.text,
+  //                   response: JSON.stringify(secondMessage?.text || '')
+  //                 });
+  
+  //   console.log('CONVERSATION TITLE', title);
+  
+  //   await saveConvo({
+  //     conversationId,
+  //     title
+  //   })
+  
+  //   res.status(200).send(title);
+  // } else 
+  return res.status(200).send(convo.title);
 });
 
 router.post('/clear', async (req, res) => {
diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index 0045718617..8ed3576661 100644
--- a/client/src/components/Main/TextChat.jsx
+++ b/client/src/components/Main/TextChat.jsx
@@ -60,12 +60,14 @@ export default function TextChat({ messages }) {
     const isBing = model === 'bingai' || model === 'sydney';
 
     if (requestMessage.parentMessageId == '00000000-0000-0000-0000-000000000000') {
-      genTitle.trigger({ conversationId }).then((ret) => {
-        const title = ret?.data
+      setTimeout(() => {
+        dispatch(refreshConversation());
+      }, 2000);
 
-        if (title)
+      // in case it takes too long.
+      setTimeout(() => {
           dispatch(refreshConversation());
-      })
+      }, 5000);
     }
 
     if (!isBing && convo.conversationId === null && convo.parentMessageId === null) {

From 644f3f716fe0d2451e814f10afe0b0374862aafc Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Wed, 15 Mar 2023 00:54:50 +0800
Subject: [PATCH 25/47] feat: re-orginazed three ask api. To provide ability to
 reproduce message. feat: bing and sydney come to work again, [need more test]

---
 api/models/Conversation.js              |   5 +-
 api/server/routes/ask.js                | 137 ++++++++++++++++++------
 api/server/routes/askBing.js            |  60 ++++++++---
 api/server/routes/askSydney.js          |  69 +++++++++---
 client/src/components/Main/TextChat.jsx |   8 +-
 5 files changed, 209 insertions(+), 70 deletions(-)

diff --git a/api/models/Conversation.js b/api/models/Conversation.js
index d2ead788d2..a32bc3e7a4 100644
--- a/api/models/Conversation.js
+++ b/api/models/Conversation.js
@@ -57,13 +57,16 @@ const getConvo = async (conversationId) => {
 };
 
 module.exports = {
-  saveConvo: async ({ conversationId, title, ...convo }) => {
+  saveConvo: async ({ conversationId, newConversationId, title, ...convo }) => {
     try {
       const messages = await getMessages({ conversationId });
       const update = { ...convo, messages };
       if (title) {
         update.title = title;
       }
+      if (newConversationId) {
+        update.conversationId = newConversationId;
+      }
       if (!update.jailbreakConversationId)
         update.jailbreakConversationId = null
 
diff --git a/api/server/routes/ask.js b/api/server/routes/ask.js
index 73b85b8012..d12ee17b4e 100644
--- a/api/server/routes/ask.js
+++ b/api/server/routes/ask.js
@@ -12,12 +12,13 @@ const {
 } = require('../../app/');
 const { getConvo, saveMessage, getConvoTitle, saveConvo } = require('../../models');
 const { handleError, sendMessage } = require('./handlers');
+const { getMessages } = require('../../models/Message');
 
 router.use('/bing', askBing);
 router.use('/sydney', askSydney);
 
 router.post('/', async (req, res) => {
-  let { model, text, parentMessageId, conversationId: oldConversationId , chatGptLabel, promptPrefix } = req.body;
+  let { model, text, parentMessageId, conversationId: oldConversationId , ...convo } = req.body;
   if (text.length === 0) {
     return handleError(res, { text: 'Prompt empty or too short' });
   }
@@ -27,21 +28,94 @@ router.post('/', async (req, res) => {
   const userMessageId = crypto.randomUUID();
   const userParentMessageId = parentMessageId || '00000000-0000-0000-0000-000000000000'
   let userMessage = {
-     messageId: userMessageId, 
-     sender: 'User', 
-     text, 
-     parentMessageId: userParentMessageId,
-     conversationId, 
-     isCreatedByUser: true 
+    messageId: userMessageId, 
+    sender: 'User', 
+    text, 
+    parentMessageId: userParentMessageId,
+    conversationId, 
+    isCreatedByUser: true 
   };
 
   console.log('ask log', {
     model,
     ...userMessage,
-    chatGptLabel,
-    promptPrefix
+    ...convo
   });
 
+  // if (model === 'chatgptCustom' && !chatGptLabel && conversationId) {
+  //   const convo = await getConvo({ conversationId });
+  //   if (convo) {
+  //     console.log('found convo for custom gpt', { convo })
+  //     chatGptLabel = convo.chatGptLabel;
+  //     promptPrefix = convo.promptPrefix;
+  //   }
+  // }
+
+  await saveMessage(userMessage);
+  await saveConvo({ ...userMessage, model, ...convo });
+
+  return await ask({
+    userMessage, 
+    model,
+    convo,
+    preSendRequest: true,
+    req, res 
+  });
+})
+
+router.post('/regenerate', async (req, res) => {
+  const { parentMessageId, model, chatGptLabel, promptPrefix } = req.body;
+
+  const oldUserMessage = await getMessages({ messageId: req.body })
+
+  if (oldUserMessage) {
+    const convo = await getConvo(userMessage?.conversationId)
+
+    const userMessageId = crypto.randomUUID();
+
+    let userMessage = {
+      ...userMessage,
+      messageId: userMessageId, 
+    };
+
+    console.log('ask log for regeneration', {
+      model,
+      ...userMessage,
+      ...convo
+    });
+
+    return await ask({
+      userMessage, 
+      model,
+      convo,
+      preSendRequest: false,
+      req, res 
+    });
+  } else 
+    return handleError(res, { text: 'Parent message not found' });
+
+  // if (model === 'chatgptCustom' && !chatGptLabel && conversationId) {
+  //   const convo = await getConvo({ conversationId });
+  //   if (convo) {
+  //     console.log('found convo for custom gpt', { convo })
+  //     chatGptLabel = convo.chatGptLabel;
+  //     promptPrefix = convo.promptPrefix;
+  //   }
+  // }
+
+  // await saveConvo({ ...userMessage, model, chatGptLabel, promptPrefix });
+});
+
+const ask = async ({ 
+  userMessage, 
+  overrideParentMessageId = null,
+  model,
+  convo,
+  preSendRequest = true,
+  req, res 
+}) => {
+  let { sender, text, parentMessageId: userParentMessageId, conversationId, messageId: userMessageId } = userMessage;
+
   let client;
 
   if (model === 'chatgpt') {
@@ -52,15 +126,6 @@ router.post('/', async (req, res) => {
     client = browserClient;
   }
 
-  if (model === 'chatgptCustom' && !chatGptLabel && conversationId) {
-    const convo = await getConvo({ conversationId });
-    if (convo) {
-      console.log('found convo for custom gpt', { convo })
-      chatGptLabel = convo.chatGptLabel;
-      promptPrefix = convo.promptPrefix;
-    }
-  }
-
   res.writeHead(200, {
     Connection: 'keep-alive',
     'Content-Type': 'text/event-stream',
@@ -69,9 +134,8 @@ router.post('/', async (req, res) => {
     'X-Accel-Buffering': 'no'
   });
 
-  await saveMessage(userMessage);
-  await saveConvo({ ...userMessage, model, chatGptLabel, promptPrefix });
-  sendMessage(res, { message: userMessage, created: true });
+  if (preSendRequest)
+    sendMessage(res, { message: userMessage, created: true });
 
   try {
     let i = 0;
@@ -80,12 +144,12 @@ router.post('/', async (req, res) => {
       if (i === 0 && typeof partial === 'object') {
         userMessage.conversationId = conversationId ? conversationId : partial.conversationId;
         await saveMessage(userMessage);
-        sendMessage(res, { ...partial, initial: true });
+        sendMessage(res, { ...partial, parentMessageId: overrideParentMessageId || userMessageId, initial: true });
         i++;
       }
 
       if (typeof partial === 'object') {
-        sendMessage(res, { ...partial, message: true });
+        sendMessage(res, { ...partial, parentMessageId: overrideParentMessageId || userMessageId, message: true });
       } else {
         tokens += partial === text ? '' : partial;
         if (tokens.match(/^\n/)) {
@@ -107,10 +171,10 @@ router.post('/', async (req, res) => {
       progressCallback,
       convo: {
         parentMessageId: userParentMessageId,
-        conversationId
+        conversationId,
+        ...convo
       },
-      chatGptLabel,
-      promptPrefix
+      ...convo
     });
 
     console.log('CLIENT RESPONSE', gptResponse);
@@ -118,7 +182,7 @@ router.post('/', async (req, res) => {
     if (!gptResponse.parentMessageId) {
       gptResponse.text = gptResponse.response;
       // gptResponse.id = gptResponse.messageId;
-      gptResponse.parentMessageId = userMessage.messageId;
+      gptResponse.parentMessageId = overrideParentMessageId || userMessageId;
       userMessage.conversationId = conversationId
         ? conversationId
         : gptResponse.conversationId;
@@ -133,23 +197,26 @@ router.post('/', async (req, res) => {
     ) {
       await saveMessage({ 
         messageId: crypto.randomUUID(), sender: model, 
-        conversationId, parentMessageId: userMessageId,
+        conversationId, parentMessageId: overrideParentMessageId || userMessageId,
         error: true, text: 'Prompt empty or too short'});
       return handleError(res, { text: 'Prompt empty or too short' });
     }
 
-    gptResponse.sender = model === 'chatgptCustom' ? chatGptLabel : model;
+    gptResponse.sender = model === 'chatgptCustom' ? convo.chatGptLabel : model;
     // gptResponse.final = true;
     gptResponse.text = await detectCode(gptResponse.text);
 
-    if (chatGptLabel?.length > 0 && model === 'chatgptCustom') {
-      gptResponse.chatGptLabel = chatGptLabel;
+    if (convo.chatGptLabel?.length > 0 && model === 'chatgptCustom') {
+      gptResponse.chatGptLabel = convo.chatGptLabel;
     }
 
-    if (promptPrefix?.length > 0 && model === 'chatgptCustom') {
-      gptResponse.promptPrefix = promptPrefix;
+    if (convo.promptPrefix?.length > 0 && model === 'chatgptCustom') {
+      gptResponse.promptPrefix = convo.promptPrefix;
     }
 
+    // override the parentMessageId, for the regeneration.
+    gptResponse.parentMessageId = overrideParentMessageId || userMessageId
+
     await saveMessage(gptResponse);
     await saveConvo(gptResponse);
     sendMessage(res, {
@@ -160,7 +227,7 @@ router.post('/', async (req, res) => {
     });
     res.end();
 
-    if (parentMessageId == '00000000-0000-0000-0000-000000000000') {
+    if (userParentMessageId == '00000000-0000-0000-0000-000000000000') {
       const title = await titleConvo({
         model,
         message: text,
@@ -184,6 +251,6 @@ router.post('/', async (req, res) => {
     await saveMessage(errorMessage);
     handleError(res, errorMessage);
   }
-});
+};
 
 module.exports = router;
diff --git a/api/server/routes/askBing.js b/api/server/routes/askBing.js
index ffe8f2ae6d..1871e96f40 100644
--- a/api/server/routes/askBing.js
+++ b/api/server/routes/askBing.js
@@ -13,6 +13,7 @@ router.post('/', async (req, res) => {
   }
 
   const conversationId = oldConversationId || crypto.randomUUID();
+  const isNewConversation = !oldConversationId
 
   const userMessageId = crypto.randomUUID();
   const userParentMessageId = parentMessageId || '00000000-0000-0000-0000-000000000000'
@@ -31,6 +32,30 @@ router.post('/', async (req, res) => {
     ...convo
   });
 
+  await saveMessage(userMessage);
+  await saveConvo({ ...userMessage, model, ...convo });
+
+  return await ask({
+    isNewConversation,
+    userMessage, 
+    model,
+    convo,
+    preSendRequest: true,
+    req, res 
+  });
+})
+
+const ask = async ({ 
+  isNewConversation,
+  overrideParentMessageId = null,
+  userMessage, 
+  model,
+  convo,
+  preSendRequest = true,
+  req, res 
+}) => {
+  let { sender, text, parentMessageId: userParentMessageId, conversationId, messageId: userMessageId } = userMessage;
+
   res.writeHead(200, {
     Connection: 'keep-alive',
     'Content-Type': 'text/event-stream',
@@ -39,9 +64,8 @@ router.post('/', async (req, res) => {
     'X-Accel-Buffering': 'no'
   });
 
-  await saveMessage(userMessage);
-  await saveConvo({ ...userMessage, model, chatGptLabel, promptPrefix });
-  sendMessage(res, { message: userMessage, created: true });
+  if (preSendRequest)
+    sendMessage(res, { message: userMessage, created: true });
 
   try {
     let tokens = '';
@@ -49,28 +73,36 @@ router.post('/', async (req, res) => {
       tokens += partial === text ? '' : partial;
       // tokens = appendCode(tokens);
       tokens = citeText(tokens, true);
-      sendMessage(res, { text: tokens, message: true });
+      sendMessage(res, { text: tokens, message: true, parentMessageId: overrideParentMessageId || userMessageId });
     };
 
     let response = await askBing({
       text,
       progressCallback,
       convo: {
+        ...convo,
         parentMessageId: userParentMessageId,
         conversationId,
-        ...convo
       },
     });
 
-    console.log('BING RESPONSE');
+    console.log('BING RESPONSE', response);
     // console.dir(response, { depth: null });
     const hasCitations = response.response.match(citationRegex)?.length > 0;
 
     userMessage.conversationSignature =
       convo.conversationSignature || response.conversationSignature;
-    userMessage.conversationId = conversationId || response.conversationId;
+    userMessage.conversationId = response.conversationId || conversationId;
     userMessage.invocationId = response.invocationId;
     await saveMessage(userMessage);
+    
+    // Bing API will not use our conversationId at the first time,
+    // so change the placeholder conversationId to the real one.
+    // Attition: the api will also create new conversationId while using invalid userMessage.parentMessageId,
+    // but in this situation, don't change the conversationId, but create new convo.
+    if (conversationId != userMessage.conversationId && isNewConversation) 
+      await saveConvo({ conversationId: conversationId, newConversationId: userMessage.conversationId });
+    conversationId = userMessage.conversationId;
 
     response.text = response.response;
     delete response.response;
@@ -79,29 +111,31 @@ router.post('/', async (req, res) => {
       response.details.suggestedResponses &&
       response.details.suggestedResponses.map((s) => s.text);
     response.sender = model;
-    response.parentMessageId = gptResponse.parentMessageId || userMessage.messageId
     // response.final = true;
 
+    // override the parentMessageId, for the regeneration.
+    response.parentMessageId = overrideParentMessageId || response.parentMessageId || userMessageId;
+
     const links = getCitations(response);
     response.text =
       citeText(response) +
       (links?.length > 0 && hasCitations ? `\n<small>${links}</small>` : '');
 
     await saveMessage(response);
-    await saveConvo(response);
+    await saveConvo({...response, model, ...convo});
     sendMessage(res, {
       title: await getConvoTitle(conversationId),
       final: true, 
       requestMessage: userMessage, 
-      responseMessage: gptResponse
+      responseMessage: response
     });
     res.end();
 
-    if (parentMessageId == '00000000-0000-0000-0000-000000000000') {
+    if (userParentMessageId == '00000000-0000-0000-0000-000000000000') {
       const title = await titleConvo({
         model,
         message: text,
-        response: JSON.stringify(gptResponse?.text)
+        response: JSON.stringify(response?.text)
       });
 
       console.log('CONVERSATION TITLE', title);
@@ -121,6 +155,6 @@ router.post('/', async (req, res) => {
     await saveMessage(errorMessage);
     handleError(res, errorMessage);
   }
-});
+};
 
 module.exports = router;
diff --git a/api/server/routes/askSydney.js b/api/server/routes/askSydney.js
index 20f6c302b3..3a663184b6 100644
--- a/api/server/routes/askSydney.js
+++ b/api/server/routes/askSydney.js
@@ -13,6 +13,7 @@ router.post('/', async (req, res) => {
   }
 
   const conversationId = oldConversationId || crypto.randomUUID();
+  const isNewConversation = !oldConversationId
 
   const userMessageId = crypto.randomUUID();
   const userParentMessageId = parentMessageId || '00000000-0000-0000-0000-000000000000'
@@ -25,13 +26,36 @@ router.post('/', async (req, res) => {
     isCreatedByUser: true 
  };
 
-
  console.log('ask log', {
     model,
     ...userMessage,
     ...convo
   });
 
+  await saveMessage(userMessage);
+  await saveConvo({ ...userMessage, model, ...convo });
+
+  return await ask({
+    isNewConversation,
+    userMessage, 
+    model,
+    convo,
+    preSendRequest: true,
+    req, res 
+  });
+})
+
+const ask = async ({ 
+  isNewConversation,
+  overrideParentMessageId = null,
+  userMessage, 
+  model,
+  convo,
+  preSendRequest = true,
+  req, res 
+}) => {
+  let { sender, text, parentMessageId: userParentMessageId, conversationId, messageId: userMessageId } = userMessage;
+
   res.writeHead(200, {
     Connection: 'keep-alive',
     'Content-Type': 'text/event-stream',
@@ -40,9 +64,8 @@ router.post('/', async (req, res) => {
     'X-Accel-Buffering': 'no'
   });
 
-  await saveMessage(userMessage);
-  await saveConvo({ ...userMessage, model, chatGptLabel, promptPrefix });
-  sendMessage(res, { message: userMessage, created: true });
+  if (preSendRequest)
+    sendMessage(res, { message: userMessage, created: true });
 
   try {
     let tokens = '';
@@ -50,7 +73,7 @@ router.post('/', async (req, res) => {
       tokens += partial === text ? '' : partial;
       // tokens = appendCode(tokens);
       tokens = citeText(tokens, true);
-      sendMessage(res, { text: tokens, message: true });
+      sendMessage(res, { text: tokens, message: true, parentMessageId: overrideParentMessageId || userMessageId });
     };
 
     let response = await askSydney({
@@ -63,15 +86,19 @@ router.post('/', async (req, res) => {
       },
     });
 
-    console.log('SYDNEY RESPONSE');
-    console.log(response.response);
+    console.log('SYDNEY RESPONSE', response);
     // console.dir(response, { depth: null });
     const hasCitations = response.response.match(citationRegex)?.length > 0;
 
+    userMessage.conversationSignature =
+      convo.conversationSignature || response.conversationSignature;
+    userMessage.conversationId = response.conversationId || conversationId;
+    userMessage.invocationId = response.invocationId;
+    // Unlike gpt and bing, Sydney will never accept our given userMessage.messageId, it will generate its own one.
+    await saveMessage(userMessage);
+    
     // Save sydney response
     // response.id = response.messageId;
-    // response.parentMessageId = convo.parentMessageId ? convo.parentMessageId : response.messageId;
-    response.parentMessageId = response.messageId;
     response.invocationId = convo.invocationId ? convo.invocationId + 1 : 1;
     response.conversationId = conversationId
       ? conversationId
@@ -85,34 +112,44 @@ router.post('/', async (req, res) => {
       response.details.suggestedResponses &&
       response.details.suggestedResponses.map((s) => s.text);
     response.sender = model;
-    response.parentMessageId = gptResponse.parentMessageId || userMessage.messageId
     // response.final = true;
 
+    // override the parentMessageId, for the regeneration.
+    response.parentMessageId = overrideParentMessageId || response.parentMessageId || userMessageId;
+
     const links = getCitations(response);
     response.text =
       citeText(response) +
       (links?.length > 0 && hasCitations ? `\n<small>${links}</small>` : '');
 
     // Save user message
-    userMessage.conversationId = response.conversationId;
+    userMessage.conversationId = response.conversationId || conversationId;
     await saveMessage(userMessage);
 
+    // Bing API will not use our conversationId at the first time,
+    // so change the placeholder conversationId to the real one.
+    // Attition: the api will also create new conversationId while using invalid userMessage.parentMessageId,
+    // but in this situation, don't change the conversationId, but create new convo.
+    if (conversationId != userMessage.conversationId && isNewConversation) 
+      await saveConvo({ conversationId: conversationId, newConversationId: userMessage.conversationId });
+    conversationId = userMessage.conversationId;
+
     // Save sydney response & convo, then send
     await saveMessage(response);
-    await saveConvo(response);
+    await saveConvo({...response, model, ...convo});
     sendMessage(res, {
       title: await getConvoTitle(conversationId),
       final: true, 
       requestMessage: userMessage, 
-      responseMessage: gptResponse
+      responseMessage: response
     });
     res.end();
 
-    if (parentMessageId == '00000000-0000-0000-0000-000000000000') {
+    if (userParentMessageId == '00000000-0000-0000-0000-000000000000') {
       const title = await titleConvo({
         model,
         message: text,
-        response: JSON.stringify(gptResponse?.text)
+        response: JSON.stringify(response?.text)
       });
 
       console.log('CONVERSATION TITLE', title);
@@ -132,6 +169,6 @@ router.post('/', async (req, res) => {
     await saveMessage(errorMessage);
     handleError(res, errorMessage);
   }
-});
+};
 
 module.exports = router;
diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index 8ed3576661..8f1276fce6 100644
--- a/client/src/components/Main/TextChat.jsx
+++ b/client/src/components/Main/TextChat.jsx
@@ -49,7 +49,7 @@ export default function TextChat({ messages }) {
 
   const convoHandler = (data, currentState, currentMsg) => {
     const { requestMessage, responseMessage } = data;
-    const { conversationId } = currentMsg;
+    const { conversationId } = requestMessage;
     const { messages, _currentMsg, message, isCustomModel, sender } =
       currentState;
     const { model, chatGptLabel, promptPrefix } = message;
@@ -66,7 +66,7 @@ export default function TextChat({ messages }) {
 
       // in case it takes too long.
       setTimeout(() => {
-          dispatch(refreshConversation());
+        dispatch(refreshConversation());
       }, 5000);
     }
 
@@ -87,9 +87,7 @@ export default function TextChat({ messages }) {
         })
       );
     } else if (
-      model === 'bingai' &&
-      convo.conversationId === null &&
-      convo.invocationId === null
+      model === 'bingai'
     ) {
       console.log('Bing data:', data);
       const { title } = data;

From 88824322108fdd0952caaca4a42d1729e2fc6e4e Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Wed, 15 Mar 2023 02:33:08 +0800
Subject: [PATCH 26/47] fix: hide the edit button when bingai

---
 .../src/components/Messages/HoverButtons.jsx  | 20 ++++++++++++-------
 client/src/components/Messages/Message.jsx    |  2 +-
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Messages/HoverButtons.jsx b/client/src/components/Messages/HoverButtons.jsx
index f24027118e..34f5fe00b3 100644
--- a/client/src/components/Messages/HoverButtons.jsx
+++ b/client/src/components/Messages/HoverButtons.jsx
@@ -2,15 +2,21 @@ import React from 'react';
 // import Clipboard from '../svg/Clipboard';
 import EditIcon from '../svg/EditIcon';
 
-export default function HoverButtons({ user, onClick }) {
+export default function HoverButtons({ visible, onClick, model }) {
+  const isBing = model === 'bingai' || model === 'sydney';
+  const enabled = !isBing;
+
   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="resubmit-edit-button 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>
-      )}
+      {(visible&&enabled)?(
+        <>
+          <button className="resubmit-edit-button 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>
+        </>
+      ):null}
       {/* <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">
           <Clipboard />
         </button> */}
diff --git a/client/src/components/Messages/Message.jsx b/client/src/components/Messages/Message.jsx
index 3d5c576059..ac74285be0 100644
--- a/client/src/components/Messages/Message.jsx
+++ b/client/src/components/Messages/Message.jsx
@@ -259,7 +259,7 @@ export default function Message({
                   </div>
                 )}
             </div>
-              <HoverButtons user={!error && isCreatedByUser && !edit} onClick={() => enterEdit()}/>
+              <HoverButtons model={model} visible={!error && isCreatedByUser && !edit} onClick={() => enterEdit()}/>
           </div>
         </div>
       </div>

From 71fc86b9a6f5e2250f5ca557a9f793c6c1879716 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Wed, 15 Mar 2023 02:43:21 +0800
Subject: [PATCH 27/47] fix: buildTree should store parent-not-exist message as
 root. rather than dropping them.

---
 client/src/components/Messages/index.jsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Messages/index.jsx b/client/src/components/Messages/index.jsx
index 5d191e61cf..85c671d691 100644
--- a/client/src/components/Messages/index.jsx
+++ b/client/src/components/Messages/index.jsx
@@ -34,14 +34,11 @@ const Messages = ({ messages }) => {
     messages.forEach(message => {
       messageMap[message.messageId] = {...message, children: []};
 
-      if (message.parentMessageId === "00000000-0000-0000-0000-000000000000") {
+      const parentMessage = messageMap[message.parentMessageId];
+      if (parentMessage)
+        parentMessage.children.push(messageMap[message.messageId]);
+      else 
         rootMessages.push(messageMap[message.messageId]);
-      } else {
-        const parentMessage = messageMap[message.parentMessageId];
-        if (parentMessage) {
-          parentMessage.children.push(messageMap[message.messageId]);
-        }
-      }
     });
   
     return rootMessages;

From 9a17e94f8fd70c617b33e2ecd5af13b47636ca8c Mon Sep 17 00:00:00 2001
From: Danny Avila <messagedaniel@protonmail.com>
Date: Tue, 14 Mar 2023 14:51:26 -0400
Subject: [PATCH 28/47] fix: refactor migration and sort old convos correctly

---
 api/models/Conversation.js | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/api/models/Conversation.js b/api/models/Conversation.js
index a32bc3e7a4..c3b23d85fb 100644
--- a/api/models/Conversation.js
+++ b/api/models/Conversation.js
@@ -97,7 +97,7 @@ module.exports = {
       // const limit = pageNumber * pageSize;
 
       const conversations = await Conversation.find({})
-        .sort({ createdAt: -1 })
+        .sort({ createdAt: -1, created: -1 })
         .skip(skip)
         // .limit(limit)
         .limit(pageSize)
@@ -129,7 +129,7 @@ module.exports = {
       const conversations = await Conversation.find({ model: null }).exec();
 
       if (!conversations || conversations.length === 0)
-        return { message: 'No conversations to migrate' };
+        return { message: '[Migrate] No conversations to migrate' };
 
       for (let convo of conversations) {
         const messages = await getMessages({
@@ -137,22 +137,20 @@ module.exports = {
           messageId: { $exists: false }
         });
 
-        const promises = [];
         let model;
         let oldId;
+        const promises = [];
         messages.forEach((message, i) => {
           const msgObj = message.toObject();
           const newId = msgObj.id;
           if (i === 0) {
             message.parentMessageId = '00000000-0000-0000-0000-000000000000';
-            oldId = newId;
           } else {
             message.parentMessageId = oldId;
-            oldId = newId;
           }
           
+          oldId = newId;
           message.messageId = newId;
-          message.createdAt = message.created;
           if (message.sender.toLowerCase() !== 'user' && !model) {
             model = message.sender.toLowerCase();
           }
@@ -166,7 +164,7 @@ module.exports = {
 
         await Conversation.findOneAndUpdate(
           { conversationId: convo.conversationId },
-          { model, createdAt: convo.created },
+          { model },
           { new: true }
         ).exec();
       }
@@ -174,11 +172,11 @@ module.exports = {
       try {
         await mongoose.connection.db.collection('messages').dropIndex('id_1');
       } catch (error) {
-        console.log("Index doesn't exist or already dropped");
+        console.log("[Migrate] Index doesn't exist or already dropped");
       }
     } catch (error) {
       console.log(error);
-      return { message: 'Error migrating conversations' };
+      return { message: '[Migrate] Error migrating conversations' };
     }
   }
 };

From 2e20b28c4dd5ec6a1bcf40cf992944e2e091ae75 Mon Sep 17 00:00:00 2001
From: Danny Avila <messagedaniel@protonmail.com>
Date: Tue, 14 Mar 2023 15:42:59 -0400
Subject: [PATCH 29/47] chore: refactor progressCB to one place, fix sydney,
 and sanitize html

---
 api/app/bingai.js              |   7 +-
 api/app/chatgpt-browser.js     |   7 +-
 api/app/chatgpt-client.js      |   7 +-
 api/app/sydney.js              |   6 +-
 api/package-lock.json          |   1 +
 api/package.json               |   1 +
 api/server/routes/ask.js       |  33 +---
 api/server/routes/askBing.js   |  13 +-
 api/server/routes/askSydney.js |  13 +-
 api/server/routes/handlers.js  |  34 +++-
 package-lock.json              | 293 +++++++++++++++++++++++++++++++++
 package.json                   |   5 +
 12 files changed, 351 insertions(+), 69 deletions(-)
 create mode 100644 package-lock.json
 create mode 100644 package.json

diff --git a/api/app/bingai.js b/api/app/bingai.js
index 2ccbc2b356..dcf150d1cf 100644
--- a/api/app/bingai.js
+++ b/api/app/bingai.js
@@ -1,7 +1,7 @@
 require('dotenv').config();
 const { KeyvFile } = require('keyv-file');
 
-const askBing = async ({ text, progressCallback, convo }) => {
+const askBing = async ({ text, onProgress, convo }) => {
   const { BingAIClient } = (await import('@waylaidwanderer/chatgpt-api'));
 
   const bingAIClient = new BingAIClient({
@@ -14,10 +14,7 @@ const askBing = async ({ text, progressCallback, convo }) => {
     proxy: process.env.PROXY || null,
   });
 
-  let options = {
-    onProgress: async (partialRes) => await progressCallback(partialRes),
-  };
-
+  let options = { onProgress };
   if (convo) {
     options = { ...options, ...convo };
   }
diff --git a/api/app/chatgpt-browser.js b/api/app/chatgpt-browser.js
index 8a3c903641..a5bea22729 100644
--- a/api/app/chatgpt-browser.js
+++ b/api/app/chatgpt-browser.js
@@ -10,7 +10,7 @@ const clientOptions = {
   proxy: process.env.PROXY || null,
 };
 
-const browserClient = async ({ text, progressCallback, convo }) => {
+const browserClient = async ({ text, onProgress, convo }) => {
   const { ChatGPTBrowserClient } = await import('@waylaidwanderer/chatgpt-api');
 
   const store = {
@@ -18,10 +18,7 @@ const browserClient = async ({ text, progressCallback, convo }) => {
   };
 
   const client = new ChatGPTBrowserClient(clientOptions, store);
-
-  let options = {
-    onProgress: async (partialRes) => await progressCallback(partialRes)
-  };
+  let options = { onProgress };
 
   if (!!convo.parentMessageId && !!convo.conversationId) {
     options = { ...options, ...convo };
diff --git a/api/app/chatgpt-client.js b/api/app/chatgpt-client.js
index afd31e0a81..350d1210ce 100644
--- a/api/app/chatgpt-client.js
+++ b/api/app/chatgpt-client.js
@@ -9,17 +9,14 @@ const clientOptions = {
   debug: false
 };
 
-const askClient = async ({ text, progressCallback, convo }) => {
+const askClient = async ({ text, onProgress, convo }) => {
   const ChatGPTClient = (await import('@waylaidwanderer/chatgpt-api')).default;
   const store = {
     store: new KeyvFile({ filename: './data/cache.json' })
   };
 
   const client = new ChatGPTClient(process.env.OPENAI_KEY, clientOptions, store);
-
-  let options = {
-    onProgress: async (partialRes) => await progressCallback(partialRes)
-  };
+  let options = { onProgress };
 
   if (!!convo.parentMessageId && !!convo.conversationId) {
     options = { ...options, ...convo };
diff --git a/api/app/sydney.js b/api/app/sydney.js
index fe47c74f57..3466f71c17 100644
--- a/api/app/sydney.js
+++ b/api/app/sydney.js
@@ -1,7 +1,7 @@
 require('dotenv').config();
 const { KeyvFile } = require('keyv-file');
 
-const askSydney = async ({ text, progressCallback, convo }) => {
+const askSydney = async ({ text, onProgress, convo }) => {
   const { BingAIClient } = (await import('@waylaidwanderer/chatgpt-api'));
 
   const sydneyClient = new BingAIClient({
@@ -15,10 +15,10 @@ const askSydney = async ({ text, progressCallback, convo }) => {
 
   let options = {
     jailbreakConversationId: true,
-    onProgress: async (partialRes) => await progressCallback(partialRes),
+    onProgress,
   };
 
-  if (convo.parentMessageId) {
+  if (convo.jailbreakConversationId) {
     options = { ...options, jailbreakConversationId: convo.jailbreakConversationId, parentMessageId: convo.parentMessageId };
   }
 
diff --git a/api/package-lock.json b/api/package-lock.json
index 911fda953e..daa36e69e4 100644
--- a/api/package-lock.json
+++ b/api/package-lock.json
@@ -17,6 +17,7 @@
         "express": "^4.18.2",
         "keyv": "^4.5.2",
         "keyv-file": "^0.2.0",
+        "lodash": "^4.17.21",
         "mongoose": "^6.9.0",
         "openai": "^3.1.0"
       },
diff --git a/api/package.json b/api/package.json
index 28bd6769d3..6dcf344ea0 100644
--- a/api/package.json
+++ b/api/package.json
@@ -27,6 +27,7 @@
     "express": "^4.18.2",
     "keyv": "^4.5.2",
     "keyv-file": "^0.2.0",
+    "lodash": "^4.17.21",
     "mongoose": "^6.9.0",
     "openai": "^3.1.0"
   },
diff --git a/api/server/routes/ask.js b/api/server/routes/ask.js
index d12ee17b4e..5f94d7d4c3 100644
--- a/api/server/routes/ask.js
+++ b/api/server/routes/ask.js
@@ -11,7 +11,7 @@ const {
   detectCode
 } = require('../../app/');
 const { getConvo, saveMessage, getConvoTitle, saveConvo } = require('../../models');
-const { handleError, sendMessage } = require('./handlers');
+const { handleError, sendMessage, createOnProgress } = require('./handlers');
 const { getMessages } = require('../../models/Message');
 
 router.use('/bing', askBing);
@@ -138,37 +138,10 @@ const ask = async ({
     sendMessage(res, { message: userMessage, created: true });
 
   try {
-    let i = 0;
-    let tokens = '';
-    const progressCallback = async (partial) => {
-      if (i === 0 && typeof partial === 'object') {
-        userMessage.conversationId = conversationId ? conversationId : partial.conversationId;
-        await saveMessage(userMessage);
-        sendMessage(res, { ...partial, parentMessageId: overrideParentMessageId || userMessageId, initial: true });
-        i++;
-      }
-
-      if (typeof partial === 'object') {
-        sendMessage(res, { ...partial, parentMessageId: overrideParentMessageId || userMessageId, message: true });
-      } else {
-        tokens += partial === text ? '' : partial;
-        if (tokens.match(/^\n/)) {
-          tokens = tokens.replace(/^\n/, '');
-        }
-
-        if (tokens.includes('[DONE]')) {
-          tokens = tokens.replace('[DONE]', '');
-        }
-
-        // tokens = await detectCode(tokens);
-        sendMessage(res, { text: tokens, message: true, initial: i === 0 ? true : false });
-        i++;
-      }
-    };
-
+    const progressCallback = createOnProgress();
     let gptResponse = await client({
       text,
-      progressCallback,
+      onProgress: progressCallback.call(null, model, {res, text }),
       convo: {
         parentMessageId: userParentMessageId,
         conversationId,
diff --git a/api/server/routes/askBing.js b/api/server/routes/askBing.js
index 1871e96f40..add804a43e 100644
--- a/api/server/routes/askBing.js
+++ b/api/server/routes/askBing.js
@@ -3,7 +3,7 @@ const crypto = require('crypto');
 const router = express.Router();
 const { titleConvo, getCitations, citeText, askBing } = require('../../app/');
 const { saveMessage, getConvoTitle, saveConvo } = require('../../models');
-const { handleError, sendMessage } = require('./handlers');
+const { handleError, sendMessage, createOnProgress } = require('./handlers');
 const citationRegex = /\[\^\d+?\^]/g;
 
 router.post('/', async (req, res) => {
@@ -68,17 +68,10 @@ const ask = async ({
     sendMessage(res, { message: userMessage, created: true });
 
   try {
-    let tokens = '';
-    const progressCallback = async (partial) => {
-      tokens += partial === text ? '' : partial;
-      // tokens = appendCode(tokens);
-      tokens = citeText(tokens, true);
-      sendMessage(res, { text: tokens, message: true, parentMessageId: overrideParentMessageId || userMessageId });
-    };
-
+    const progressCallback = createOnProgress();
     let response = await askBing({
       text,
-      progressCallback,
+      onProgress: progressCallback.call(null, model, {res, text, parentMessageId: overrideParentMessageId || userMessageId }),
       convo: {
         ...convo,
         parentMessageId: userParentMessageId,
diff --git a/api/server/routes/askSydney.js b/api/server/routes/askSydney.js
index 3a663184b6..1f04ad4166 100644
--- a/api/server/routes/askSydney.js
+++ b/api/server/routes/askSydney.js
@@ -3,7 +3,7 @@ const crypto = require('crypto');
 const router = express.Router();
 const { titleConvo, getCitations, citeText, askSydney } = require('../../app/');
 const { saveMessage, saveConvo, getConvoTitle } = require('../../models');
-const { handleError, sendMessage } = require('./handlers');
+const { handleError, sendMessage, createOnProgress } = require('./handlers');
 const citationRegex = /\[\^\d+?\^]/g;
 
 router.post('/', async (req, res) => {
@@ -68,17 +68,10 @@ const ask = async ({
     sendMessage(res, { message: userMessage, created: true });
 
   try {
-    let tokens = '';
-    const progressCallback = async (partial) => {
-      tokens += partial === text ? '' : partial;
-      // tokens = appendCode(tokens);
-      tokens = citeText(tokens, true);
-      sendMessage(res, { text: tokens, message: true, parentMessageId: overrideParentMessageId || userMessageId });
-    };
-
+    const progressCallback = createOnProgress();
     let response = await askSydney({
       text,
-      progressCallback,
+      onProgress: progressCallback.call(null, model, {res, text, parentMessageId: overrideParentMessageId || userMessageId }),
       convo: {
         parentMessageId: userParentMessageId,
         conversationId,
diff --git a/api/server/routes/handlers.js b/api/server/routes/handlers.js
index e727cacfa3..7672ef41a5 100644
--- a/api/server/routes/handlers.js
+++ b/api/server/routes/handlers.js
@@ -1,3 +1,7 @@
+const { citeText } = require('../../app/');
+const _ = require('lodash');
+const sanitizeHtml = require('sanitize-html');
+
 const handleError = (res, message) => {
   res.write(`event: error\ndata: ${JSON.stringify(message)}\n\n`);
   res.end();
@@ -10,4 +14,32 @@ const sendMessage = (res, message) => {
   res.write(`event: message\ndata: ${JSON.stringify(message)}\n\n`);
 };
 
-module.exports = { handleError, sendMessage };
+const createOnProgress = () => {
+  let i = 0;
+  let tokens = '';
+
+  const progressCallback = async (partial, { res, text, bing = false, ...rest }) => {
+    tokens += partial === text ? '' : partial;
+    tokens = tokens.trim();
+    tokens = tokens.replaceAll('[DONE]', '');
+    if (tokens.includes('```')) {
+      tokens = sanitizeHtml(tokens);
+    }
+
+    if (bing) {
+      tokens = citeText(tokens, true);
+    }
+
+    sendMessage(res, { text: tokens, message: true, initial: i === 0, ...rest });
+    i++;
+  };
+
+  const onProgress = (model, opts) => {
+    const bingModels = new Set(['bingai', 'sydney']);
+    return _.partialRight(progressCallback, { ...opts, bing: bingModels.has(model) });
+  };
+
+  return onProgress;
+};
+
+module.exports = { handleError, sendMessage, createOnProgress };
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000000..bd60daac40
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,293 @@
+{
+  "name": "chatgpt-clone",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "sanitize-html": "^2.10.0"
+      }
+    },
+    "node_modules/deepmerge": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.0.tgz",
+      "integrity": "sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
+      "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/entities": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
+      "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.1.tgz",
+      "integrity": "sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "entities": "^4.3.0"
+      }
+    },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/parse-srcset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q=="
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
+    "node_modules/postcss": {
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/sanitize-html": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.10.0.tgz",
+      "integrity": "sha512-JqdovUd81dG4k87vZt6uA6YhDfWkUGruUu/aPmXLxXi45gZExnt9Bnw/qeQU8oGf82vPyaE0vO4aH0PbobB9JQ==",
+      "dependencies": {
+        "deepmerge": "^4.2.2",
+        "escape-string-regexp": "^4.0.0",
+        "htmlparser2": "^8.0.0",
+        "is-plain-object": "^5.0.0",
+        "parse-srcset": "^1.0.2",
+        "postcss": "^8.3.11"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    }
+  },
+  "dependencies": {
+    "deepmerge": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.0.tgz",
+      "integrity": "sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og=="
+    },
+    "dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "requires": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      }
+    },
+    "domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
+    },
+    "domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "requires": {
+        "domelementtype": "^2.3.0"
+      }
+    },
+    "domutils": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
+      "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
+      "requires": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.1"
+      }
+    },
+    "entities": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
+      "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA=="
+    },
+    "escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+    },
+    "htmlparser2": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.1.tgz",
+      "integrity": "sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==",
+      "requires": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "entities": "^4.3.0"
+      }
+    },
+    "is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="
+    },
+    "nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+    },
+    "parse-srcset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q=="
+    },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
+    "postcss": {
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "requires": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "sanitize-html": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.10.0.tgz",
+      "integrity": "sha512-JqdovUd81dG4k87vZt6uA6YhDfWkUGruUu/aPmXLxXi45gZExnt9Bnw/qeQU8oGf82vPyaE0vO4aH0PbobB9JQ==",
+      "requires": {
+        "deepmerge": "^4.2.2",
+        "escape-string-regexp": "^4.0.0",
+        "htmlparser2": "^8.0.0",
+        "is-plain-object": "^5.0.0",
+        "parse-srcset": "^1.0.2",
+        "postcss": "^8.3.11"
+      }
+    },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000000..4da6b6e8c4
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "sanitize-html": "^2.10.0"
+  }
+}

From 8289558d94b613ff58645dc74ca5f85b333979c9 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Wed, 15 Mar 2023 04:05:14 +0800
Subject: [PATCH 30/47] feat: pagination in nav

---
 api/models/Conversation.js                    | 14 +++----
 api/server/routes/convos.js                   |  4 +-
 client/src/components/Conversations/index.jsx | 35 ++++++++++------
 client/src/components/Nav/MobileNav.jsx       |  6 +--
 client/src/components/Nav/index.jsx           | 41 ++++++++++++++-----
 client/src/store/convoSlice.js                | 19 ++++++---
 client/src/style.css                          |  3 ++
 client/src/utils/fetchers.js                  |  8 ++--
 8 files changed, 84 insertions(+), 46 deletions(-)

diff --git a/api/models/Conversation.js b/api/models/Conversation.js
index a32bc3e7a4..6e3c646c64 100644
--- a/api/models/Conversation.js
+++ b/api/models/Conversation.js
@@ -91,19 +91,17 @@ module.exports = {
     }
   },
   // getConvos: async () => await Conversation.find({}).sort({ createdAt: -1 }).exec(),
-  getConvos: async (pageNumber = 1, pageSize = 12) => {
+  getConvosByPage: async (pageNumber = 1, pageSize = 12) => {
     try {
-      const skip = (pageNumber - 1) * pageSize;
-      // const limit = pageNumber * pageSize;
-
-      const conversations = await Conversation.find({})
+      const totalConvos = await Conversation.countDocuments();
+      const totalPages = Math.ceil(totalConvos / pageSize);
+      const convos = await Conversation.find()
         .sort({ createdAt: -1 })
-        .skip(skip)
-        // .limit(limit)
+        .skip((pageNumber - 1) * pageSize)
         .limit(pageSize)
         .exec();
 
-      return conversations;
+      return { conversations: convos, pages: totalPages, pageNumber, pageSize };
     } catch (error) {
       console.log(error);
       return { message: 'Error getting conversations' };
diff --git a/api/server/routes/convos.js b/api/server/routes/convos.js
index bfe3bc2d56..9a5f71cee3 100644
--- a/api/server/routes/convos.js
+++ b/api/server/routes/convos.js
@@ -2,12 +2,12 @@ const express = require('express');
 const router = express.Router();
 const { titleConvo } = require('../../app/');
 const { getConvo, saveConvo, getConvoTitle } = require('../../models');
-const { getConvos, deleteConvos, updateConvo } = require('../../models/Conversation');
+const { getConvosByPage, deleteConvos, updateConvo } = require('../../models/Conversation');
 const { getMessages } = require('../../models/Message');
 
 router.get('/', async (req, res) => {
   const pageNumber = req.query.pageNumber || 1;
-  res.status(200).send(await getConvos(pageNumber));
+  res.status(200).send(await getConvosByPage(pageNumber));
 });
 
 router.post('/gen_title', async (req, res) => {
diff --git a/client/src/components/Conversations/index.jsx b/client/src/components/Conversations/index.jsx
index d3ab1ffd0b..4142cb8ed1 100644
--- a/client/src/components/Conversations/index.jsx
+++ b/client/src/components/Conversations/index.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import Conversation from './Conversation';
 
-export default function Conversations({ conversations, conversationId, showMore }) {
-  const clickHandler = async (e) => {
+export default function Conversations({ conversations, conversationId, pageNumber, pages, nextPage, previousPage, moveToTop }) {
+  const clickHandler = (func) => async (e) => {
     e.preventDefault();
-    await showMore();
+    await func();
   };
 
   return (
@@ -33,18 +33,29 @@ export default function Conversations({ conversations, conversationId, showMore
               chatGptLabel={convo.chatGptLabel}
               promptPrefix={convo.promptPrefix}
               bingData={bingData}
-              retainView={showMore.bind(null, false)}
+              retainView={moveToTop}
             />
           );
         })}
-      {conversations?.length >= 12 && (
-        <button
-          onClick={clickHandler}
-          className="btn btn-dark btn-small m-auto mb-2 flex justify-center gap-2"
-        >
-          Show more
-        </button>
-      )}
+        <div className="m-auto mt-4 mb-2 flex justify-center items-center gap-2">
+          <button
+            onClick={clickHandler(previousPage)}
+            className={"flex btn btn-small transition bg-transition dark:text-white disabled:text-gray-300 dark:disabled:text-gray-400 m-auto gap-2 hover:bg-gray-800" + (pageNumber<=1?" hidden-visibility":"")}
+            disabled={pageNumber<=1}
+          >
+            &lt;&lt;
+          </button>
+          <span className="flex-none text-gray-400">
+            {pageNumber} / {pages}
+          </span>
+          <button
+            onClick={clickHandler(nextPage)}
+            className={"flex btn btn-small transition bg-transition dark:text-white disabled:text-gray-300 dark:disabled:text-gray-400 m-auto gap-2 hover:bg-gray-800" + (pageNumber>=pages?" hidden-visibility":"")}
+            disabled={pageNumber>=pages}
+          >
+            &gt;&gt;
+          </button>
+        </div>
     </>
   );
 }
diff --git a/client/src/components/Nav/MobileNav.jsx b/client/src/components/Nav/MobileNav.jsx
index e4107e9ac6..0c846524fc 100644
--- a/client/src/components/Nav/MobileNav.jsx
+++ b/client/src/components/Nav/MobileNav.jsx
@@ -7,7 +7,7 @@ import { setText } from '~/store/textSlice';
 
 export default function MobileNav({ setNavVisible }) {
   const dispatch = useDispatch();
-  const { conversationId, convos } = useSelector((state) => state.convo);
+  const { conversationId, convos, title } = useSelector((state) => state.convo);
 
   const toggleNavVisible = () => {
     setNavVisible((prev) => {
@@ -22,8 +22,6 @@ export default function MobileNav({ setNavVisible }) {
     dispatch(setSubmission({}));
   }
 
-  const title = convos?.find(element => element?.conversationId == conversationId)?.title || 'New Chat';
-
   return (
     <div className="sticky top-0 z-10 flex items-center border-b border-white/20 bg-gray-800 pl-1 pt-1 text-gray-200 sm:pl-3 md:hidden">
       <button
@@ -64,7 +62,7 @@ export default function MobileNav({ setNavVisible }) {
           />
         </svg>
       </button>
-      <h1 className="flex-1 text-center text-base font-normal">{title}</h1>
+      <h1 className="flex-1 text-center text-base font-normal">{title || 'New Chat'}</h1>
       <button
         type="button"
         className="px-3"
diff --git a/client/src/components/Nav/index.jsx b/client/src/components/Nav/index.jsx
index 3029686cf8..ea95559cd8 100644
--- a/client/src/components/Nav/index.jsx
+++ b/client/src/components/Nav/index.jsx
@@ -6,37 +6,53 @@ import NavLinks from './NavLinks';
 import useDidMountEffect from '~/hooks/useDidMountEffect';
 import { swr } from '~/utils/fetchers';
 import { useDispatch, useSelector } from 'react-redux';
-import { incrementPage, setConvos } from '~/store/convoSlice';
+import { increasePage, decreasePage, setPage, setConvos, setPages } from '~/store/convoSlice';
 
 export default function Nav({ navVisible, setNavVisible }) {
   const dispatch = useDispatch();
   const [isHovering, setIsHovering] = useState(false);
-  const { conversationId, convos, pageNumber, refreshConvoHint } = useSelector((state) => state.convo);
+  const { conversationId, convos, pages, pageNumber, refreshConvoHint } = useSelector((state) => state.convo);
   const onSuccess = (data) => {
-    dispatch(setConvos(data));
+    const { conversations, pages } = data;
+
+    if (pageNumber > pages)
+      dispatch(setPage(pages));
+    else 
+      dispatch(setConvos(conversations));
+    dispatch(setPages(pages));
   };
 
   const { data, isLoading, mutate } = swr(
     `/api/convos?pageNumber=${pageNumber}`,
-    onSuccess
+    onSuccess,
+    {revalidateOnMount: false}
   );
 
   const containerRef = useRef(null);
   const scrollPositionRef = useRef(null);
 
-  const showMore = async (increment = true) => {
+  const moveToTop = () => {
     const container = containerRef.current;
     if (container) {
       scrollPositionRef.current = container.scrollTop;
     }
+  }
 
-    if (increment) {
-      dispatch(incrementPage());
-      await mutate();
-    }
+  const nextPage = async () => {
+    moveToTop()
+
+    dispatch(increasePage());
+    await mutate();
   };
 
-  useDidMountEffect(() => mutate(), [conversationId, refreshConvoHint]);
+  const previousPage = async () => {
+    moveToTop()
+    
+    dispatch(decreasePage());
+    await mutate();
+  };
+
+  useEffect(() => {mutate()}, [pageNumber, conversationId, refreshConvoHint]);
 
   useEffect(() => {
     const container = containerRef.current;
@@ -86,8 +102,11 @@ export default function Nav({ navVisible, setNavVisible }) {
                     <Conversations
                       conversations={convos}
                       conversationId={conversationId}
-                      showMore={showMore}
+                      nextPage={nextPage}
+                      previousPage={previousPage}
+                      moveToTop={moveToTop}
                       pageNumber={pageNumber}
+                      pages={pages}
                     />
                   )}
                 </div>
diff --git a/client/src/store/convoSlice.js b/client/src/store/convoSlice.js
index 258de84e70..c862a8e1e7 100644
--- a/client/src/store/convoSlice.js
+++ b/client/src/store/convoSlice.js
@@ -13,8 +13,9 @@ const initialState = {
   promptPrefix: null,
   convosLoading: false,
   pageNumber: 1,
+  pages: 1,
   refreshConvoHint: 0,
-  convos: []
+  convos: [],
 };
 
 const currentSlice = createSlice({
@@ -30,12 +31,18 @@ const currentSlice = createSlice({
     setError: (state, action) => {
       state.error = action.payload;
     },
-    incrementPage: (state) => {
+    increasePage: (state) => {
       state.pageNumber = state.pageNumber + 1;
     },
+    decreasePage: (state) => {
+      state.pageNumber = state.pageNumber - 1;
+    },
+    setPage: (state, action) => {
+      state.pageNumber = action.payload;
+    },
     setNewConvo: (state) => {
       state.error = false;
-      state.title = 'New Chat';
+      state.title = 'ChatGPT Clone';
       state.conversationId = null;
       state.parentMessageId = null;
       state.jailbreakConversationId = null;
@@ -45,13 +52,15 @@ const currentSlice = createSlice({
       state.chatGptLabel = null;
       state.promptPrefix = null;
       state.convosLoading = false;
-      state.pageNumber = 1;
     },
     setConvos: (state, action) => {
       state.convos = action.payload.sort(
         (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
       );
     },
+    setPages: (state, action) => {
+      state.pages = action.payload;
+    },
     removeConvo: (state, action) => {
       state.convos = state.convos.filter((convo) => convo.conversationId !== action.payload);
     },
@@ -61,7 +70,7 @@ const currentSlice = createSlice({
   }
 });
 
-export const { refreshConversation, setConversation, setConvos, setNewConvo, setError, incrementPage, removeConvo, removeAll } =
+export const { refreshConversation, setConversation, setPages, setConvos, setNewConvo, setError, increasePage, decreasePage, setPage, removeConvo, removeAll } =
   currentSlice.actions;
 
 export default currentSlice.reducer;
diff --git a/client/src/style.css b/client/src/style.css
index 6b17c388e2..c4a03408b7 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -1876,3 +1876,6 @@ button.scroll-convo {
   background-color:hsla(0,0%,100%,.4)
  }
 }
+.hidden-visibility {
+  visibility: hidden;
+}
\ No newline at end of file
diff --git a/client/src/utils/fetchers.js b/client/src/utils/fetchers.js
index 9faa211d4e..d9cfa54116 100644
--- a/client/src/utils/fetchers.js
+++ b/client/src/utils/fetchers.js
@@ -9,14 +9,14 @@ const postRequest = async (url, { arg }) => {
   return await axios.post(url, { arg });
 };
 
-export const swr = (path, successCallback) => {
-  const options = {};
+export const swr = (path, successCallback, options) => {
+  const _options = {...options};
 
   if (successCallback) {
-    options.onSuccess = successCallback;
+    _options.onSuccess = successCallback;
   }
 
-  return useSWR(path, fetcher, options);
+  return useSWR(path, fetcher, _options);
 }
 
 export default function manualSWR(path, type, successCallback) {

From d0ef0f84c85ff16201c45863eaed5edd490c6246 Mon Sep 17 00:00:00 2001
From: Danny Avila <messagedaniel@protonmail.com>
Date: Tue, 14 Mar 2023 16:05:46 -0400
Subject: [PATCH 31/47] chore: delegate text handling to one place, html
 sanitization in progress

---
 api/server/routes/ask.js       |  7 ++++---
 api/server/routes/askBing.js   |  3 ++-
 api/server/routes/askSydney.js |  3 ++-
 api/server/routes/handlers.js  | 24 +++++++++++++++++++-----
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/api/server/routes/ask.js b/api/server/routes/ask.js
index 5f94d7d4c3..8d20b808dc 100644
--- a/api/server/routes/ask.js
+++ b/api/server/routes/ask.js
@@ -8,10 +8,10 @@ const {
   askClient,
   browserClient,
   customClient,
-  detectCode
+  // detectCode
 } = require('../../app/');
 const { getConvo, saveMessage, getConvoTitle, saveConvo } = require('../../models');
-const { handleError, sendMessage, createOnProgress } = require('./handlers');
+const { handleError, sendMessage, createOnProgress, handleText } = require('./handlers');
 const { getMessages } = require('../../models/Message');
 
 router.use('/bing', askBing);
@@ -177,7 +177,8 @@ const ask = async ({
 
     gptResponse.sender = model === 'chatgptCustom' ? convo.chatGptLabel : model;
     // gptResponse.final = true;
-    gptResponse.text = await detectCode(gptResponse.text);
+    // gptResponse.text = await detectCode(gptResponse.text);
+    gptResponse.text = await handleText(gptResponse.text);
 
     if (convo.chatGptLabel?.length > 0 && model === 'chatgptCustom') {
       gptResponse.chatGptLabel = convo.chatGptLabel;
diff --git a/api/server/routes/askBing.js b/api/server/routes/askBing.js
index add804a43e..5bb8abd4f0 100644
--- a/api/server/routes/askBing.js
+++ b/api/server/routes/askBing.js
@@ -3,7 +3,7 @@ const crypto = require('crypto');
 const router = express.Router();
 const { titleConvo, getCitations, citeText, askBing } = require('../../app/');
 const { saveMessage, getConvoTitle, saveConvo } = require('../../models');
-const { handleError, sendMessage, createOnProgress } = require('./handlers');
+const { handleError, sendMessage, createOnProgress, handleText } = require('./handlers');
 const citationRegex = /\[\^\d+?\^]/g;
 
 router.post('/', async (req, res) => {
@@ -113,6 +113,7 @@ const ask = async ({
     response.text =
       citeText(response) +
       (links?.length > 0 && hasCitations ? `\n<small>${links}</small>` : '');
+    response.text = await handleText(response.text);
 
     await saveMessage(response);
     await saveConvo({...response, model, ...convo});
diff --git a/api/server/routes/askSydney.js b/api/server/routes/askSydney.js
index 1f04ad4166..a0a3bd32df 100644
--- a/api/server/routes/askSydney.js
+++ b/api/server/routes/askSydney.js
@@ -3,7 +3,7 @@ const crypto = require('crypto');
 const router = express.Router();
 const { titleConvo, getCitations, citeText, askSydney } = require('../../app/');
 const { saveMessage, saveConvo, getConvoTitle } = require('../../models');
-const { handleError, sendMessage, createOnProgress } = require('./handlers');
+const { handleError, sendMessage, createOnProgress, handleText } = require('./handlers');
 const citationRegex = /\[\^\d+?\^]/g;
 
 router.post('/', async (req, res) => {
@@ -114,6 +114,7 @@ const ask = async ({
     response.text =
       citeText(response) +
       (links?.length > 0 && hasCitations ? `\n<small>${links}</small>` : '');
+    response.text = await handleText(response.text);
 
     // Save user message
     userMessage.conversationId = response.conversationId || conversationId;
diff --git a/api/server/routes/handlers.js b/api/server/routes/handlers.js
index 7672ef41a5..d3e613bccc 100644
--- a/api/server/routes/handlers.js
+++ b/api/server/routes/handlers.js
@@ -1,4 +1,4 @@
-const { citeText } = require('../../app/');
+const { citeText, detectCode } = require('../../app/');
 const _ = require('lodash');
 const sanitizeHtml = require('sanitize-html');
 
@@ -20,11 +20,14 @@ const createOnProgress = () => {
 
   const progressCallback = async (partial, { res, text, bing = false, ...rest }) => {
     tokens += partial === text ? '' : partial;
-    tokens = tokens.trim();
     tokens = tokens.replaceAll('[DONE]', '');
-    if (tokens.includes('```')) {
-      tokens = sanitizeHtml(tokens);
+
+    if (tokens.match(/^\n/)) {
+      tokens = tokens.replace(/^\n/, '');
     }
+    // if (tokens.includes('```')) {
+    //   tokens = sanitizeHtml(tokens);
+    // }
 
     if (bing) {
       tokens = citeText(tokens, true);
@@ -42,4 +45,15 @@ const createOnProgress = () => {
   return onProgress;
 };
 
-module.exports = { handleError, sendMessage, createOnProgress };
\ No newline at end of file
+const handleText = async (input) => {
+  let text = input;
+  text = await detectCode(text);
+  // if (text.includes('```')) {
+  //   text = sanitizeHtml(text);
+  //   text = text.replaceAll(') =&gt;', ') =>');
+  // }
+
+  return text;
+};
+
+module.exports = { handleError, sendMessage, createOnProgress, handleText };
\ No newline at end of file

From 626a8fbd8e048b16d0bca80bc9ac5f44cf304f63 Mon Sep 17 00:00:00 2001
From: Daniel Avila <messagedaniel@protonmail.com>
Date: Tue, 14 Mar 2023 18:53:46 -0400
Subject: [PATCH 32/47] fix: if db is empty, will never show new convos until
 refresh

---
 api/models/Conversation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/models/Conversation.js b/api/models/Conversation.js
index 622744d27a..c4151198cd 100644
--- a/api/models/Conversation.js
+++ b/api/models/Conversation.js
@@ -93,7 +93,7 @@ module.exports = {
   // getConvos: async () => await Conversation.find({}).sort({ createdAt: -1 }).exec(),
   getConvosByPage: async (pageNumber = 1, pageSize = 12) => {
     try {
-      const totalConvos = await Conversation.countDocuments();
+      const totalConvos = (await Conversation.countDocuments()) || 1;
       const totalPages = Math.ceil(totalConvos / pageSize);
       const convos = await Conversation.find()
         .sort({ createdAt: -1, created: -1 })

From 6192c2964ed48adea4e95c8d580692e42b3fd8fd Mon Sep 17 00:00:00 2001
From: Daniel Avila <messagedaniel@protonmail.com>
Date: Tue, 14 Mar 2023 20:14:38 -0400
Subject: [PATCH 33/47] fix: validation to avoid saving customGpt params to
 non-custom models

---
 api/models/Conversation.js | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/api/models/Conversation.js b/api/models/Conversation.js
index c4151198cd..45834379e8 100644
--- a/api/models/Conversation.js
+++ b/api/models/Conversation.js
@@ -18,10 +18,12 @@ const convoSchema = mongoose.Schema(
       default: 'New Chat'
     },
     jailbreakConversationId: {
-      type: String
+      type: String,
+      default: null
     },
     conversationSignature: {
-      type: String
+      type: String,
+      default: null
     },
     clientId: {
       type: String
@@ -30,13 +32,16 @@ const convoSchema = mongoose.Schema(
       type: String
     },
     chatGptLabel: {
-      type: String
+      type: String,
+      default: null
     },
     promptPrefix: {
-      type: String
+      type: String,
+      default: null
     },
     model: {
-      type: String
+      type: String,
+      required: true
     },
     suggestions: [{ type: String }],
     messages: [{ type: mongoose.Schema.Types.ObjectId, ref: 'Message' }]
@@ -67,8 +72,14 @@ module.exports = {
       if (newConversationId) {
         update.conversationId = newConversationId;
       }
-      if (!update.jailbreakConversationId)
-        update.jailbreakConversationId = null
+      if (!update.jailbreakConversationId) {
+        update.jailbreakConversationId = null;
+      }
+      if (update.model !== 'chatgptCustom' && update.chatGptLabel && update.promptPrefix) {
+        console.log('Validation error: resetting chatgptCustom fields', update);
+        update.chatGptLabel = null;
+        update.promptPrefix = null;
+      }
 
       return await Conversation.findOneAndUpdate(
         { conversationId },
@@ -146,7 +157,7 @@ module.exports = {
           } else {
             message.parentMessageId = oldId;
           }
-          
+
           oldId = newId;
           message.messageId = newId;
           if (message.sender.toLowerCase() !== 'user' && !model) {

From 6e32f71565ba9449e64593bd684c8d3d60fb108a Mon Sep 17 00:00:00 2001
From: Daniel Avila <messagedaniel@protonmail.com>
Date: Tue, 14 Mar 2023 20:15:06 -0400
Subject: [PATCH 34/47] fix: adjust custom client for new progress CB

---
 api/app/chatgpt-custom.js |  7 ++-----
 api/app/chatgpt.js        | 38 --------------------------------------
 2 files changed, 2 insertions(+), 43 deletions(-)
 delete mode 100644 api/app/chatgpt.js

diff --git a/api/app/chatgpt-custom.js b/api/app/chatgpt-custom.js
index 9eabb80ccd..e7a0ee0503 100644
--- a/api/app/chatgpt-custom.js
+++ b/api/app/chatgpt-custom.js
@@ -9,7 +9,7 @@ const clientOptions = {
   debug: false
 };
 
-const customClient = async ({ text, progressCallback, convo, promptPrefix, chatGptLabel }) => {
+const customClient = async ({ text, onProgress, convo, promptPrefix, chatGptLabel }) => {
   const ChatGPTClient = (await import('@waylaidwanderer/chatgpt-api')).default;
   const store = {
     store: new KeyvFile({ filename: './data/cache.json' })
@@ -23,10 +23,7 @@ const customClient = async ({ text, progressCallback, convo, promptPrefix, chatG
 
   const client = new ChatGPTClient(process.env.OPENAI_KEY, clientOptions, store);
 
-  let options = {
-    onProgress: async (partialRes) => await progressCallback(partialRes)
-  };
-
+  let options = { onProgress };
   if (!!convo.parentMessageId && !!convo.conversationId) {
     options = { ...options, ...convo };
   }
diff --git a/api/app/chatgpt.js b/api/app/chatgpt.js
deleted file mode 100644
index 18edcfca83..0000000000
--- a/api/app/chatgpt.js
+++ /dev/null
@@ -1,38 +0,0 @@
-require('dotenv').config();
-const Keyv = require('keyv');
-const { Configuration, OpenAIApi } = require('openai');
-const messageStore = new Keyv(process.env.MONGODB_URI, { namespace: 'chatgpt' });
-
-const ask = async (question, progressCallback, convo) => {
-  const { ChatGPTAPI } = await import('chatgpt');
-  const api = new ChatGPTAPI({ apiKey: process.env.OPENAI_KEY, messageStore });
-  let options = {
-    onProgress: async (partialRes) => {
-      if (partialRes.text.length > 0) {
-        await progressCallback(partialRes);
-      }
-    }
-  };
-
-  if (!!convo.parentMessageId && !!convo.conversationId) {
-    options = { ...options, ...convo };
-  }
-
-  const res = await api.sendMessage(question, options);
-  return res;
-};
-
-const titleConvo = async (message, response, model) => {
-  const configuration = new Configuration({
-    apiKey: process.env.OPENAI_KEY
-  });
-  const openai = new OpenAIApi(configuration);
-  const completion = await openai.createCompletion({
-    model: 'text-davinci-002',
-    prompt: `Write a short title in title case, ideally in 5 words or less, and do not refer to the user or ${model}, that summarizes this conversation:\nUser:"${message}"\n${model}:"${response}"\nTitle: `
-  });
-
-  return completion.data.choices[0].text.replace(/\n/g, '');
-};
-
-module.exports = { ask, titleConvo };

From 796d8031e8d2c82fa18de6ec8de1cd94c2ed0128 Mon Sep 17 00:00:00 2001
From: Daniel Avila <messagedaniel@protonmail.com>
Date: Tue, 14 Mar 2023 20:21:41 -0400
Subject: [PATCH 35/47] fix: ensure custom params are not passed to non custom
 models

---
 api/package-lock.json                         | 274 +++++++++++++++++-
 api/package.json                              |   3 +-
 api/server/routes/ask.js                      |  92 +++---
 api/server/routes/askBing.js                  |  94 +++---
 api/server/routes/askSydney.js                |  96 +++---
 client/package-lock.json                      |  12 +-
 .../components/Conversations/Conversation.jsx |  16 +-
 client/src/components/Models/ModelMenu.jsx    |   6 +-
 client/src/components/Nav/index.jsx           |  56 ++--
 client/src/store/submitSlice.js               |   5 +-
 10 files changed, 503 insertions(+), 151 deletions(-)

diff --git a/api/package-lock.json b/api/package-lock.json
index daa36e69e4..f934f00b8d 100644
--- a/api/package-lock.json
+++ b/api/package-lock.json
@@ -19,7 +19,8 @@
         "keyv-file": "^0.2.0",
         "lodash": "^4.17.21",
         "mongoose": "^6.9.0",
-        "openai": "^3.1.0"
+        "openai": "^3.1.0",
+        "sanitize-html": "^2.10.0"
       },
       "devDependencies": {
         "nodemon": "^2.0.20",
@@ -2211,6 +2212,14 @@
         }
       }
     },
+    "node_modules/deepmerge": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.0.tgz",
+      "integrity": "sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/defaults": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
@@ -2247,6 +2256,57 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
+      "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/dotenv": {
       "version": "16.0.3",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
@@ -2278,6 +2338,17 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/entities": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
+      "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -2751,6 +2822,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/htmlparser2": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.1.tgz",
+      "integrity": "sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "entities": "^4.3.0"
+      }
+    },
     "node_modules/http-errors": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@@ -2958,6 +3047,14 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-stream": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -3273,6 +3370,17 @@
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
     },
+    "node_modules/nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -3469,6 +3577,11 @@
         "p-defer": "^3.0.0"
       }
     },
+    "node_modules/parse-srcset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q=="
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -3577,6 +3690,29 @@
       "resolved": "https://registry.npmjs.org/pino-std-serializers/-/pino-std-serializers-6.1.0.tgz",
       "integrity": "sha512-KO0m2f1HkrPe9S0ldjx7za9BJjeHqBku5Ch8JyxETxT8dEFGz1PwgrHaOQupVYitpzbFSYm7nnljxD8dik2c+g=="
     },
+    "node_modules/postcss": {
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
     "node_modules/process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -3796,6 +3932,30 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "node_modules/sanitize-html": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.10.0.tgz",
+      "integrity": "sha512-JqdovUd81dG4k87vZt6uA6YhDfWkUGruUu/aPmXLxXi45gZExnt9Bnw/qeQU8oGf82vPyaE0vO4aH0PbobB9JQ==",
+      "dependencies": {
+        "deepmerge": "^4.2.2",
+        "escape-string-regexp": "^4.0.0",
+        "htmlparser2": "^8.0.0",
+        "is-plain-object": "^5.0.0",
+        "parse-srcset": "^1.0.2",
+        "postcss": "^8.3.11"
+      }
+    },
+    "node_modules/sanitize-html/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/saslprep": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/saslprep/-/saslprep-1.0.3.tgz",
@@ -3985,6 +4145,14 @@
         "atomic-sleep": "^1.0.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/sparse-bitfield": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz",
@@ -6275,6 +6443,11 @@
         "ms": "2.1.2"
       }
     },
+    "deepmerge": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.0.tgz",
+      "integrity": "sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og=="
+    },
     "defaults": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
@@ -6298,6 +6471,39 @@
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
       "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="
     },
+    "dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "requires": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      }
+    },
+    "domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
+    },
+    "domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "requires": {
+        "domelementtype": "^2.3.0"
+      }
+    },
+    "domutils": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
+      "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
+      "requires": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.1"
+      }
+    },
     "dotenv": {
       "version": "16.0.3",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
@@ -6323,6 +6529,11 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="
     },
+    "entities": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
+      "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA=="
+    },
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -6687,6 +6898,17 @@
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
     },
+    "htmlparser2": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.1.tgz",
+      "integrity": "sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==",
+      "requires": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "entities": "^4.3.0"
+      }
+    },
     "http-errors": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@@ -6826,6 +7048,11 @@
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true
     },
+    "is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="
+    },
     "is-stream": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -7074,6 +7301,11 @@
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
     },
+    "nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+    },
     "negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -7217,6 +7449,11 @@
         "p-defer": "^3.0.0"
       }
     },
+    "parse-srcset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q=="
+    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -7303,6 +7540,16 @@
       "resolved": "https://registry.npmjs.org/pino-std-serializers/-/pino-std-serializers-6.1.0.tgz",
       "integrity": "sha512-KO0m2f1HkrPe9S0ldjx7za9BJjeHqBku5Ch8JyxETxT8dEFGz1PwgrHaOQupVYitpzbFSYm7nnljxD8dik2c+g=="
     },
+    "postcss": {
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "requires": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      }
+    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -7458,6 +7705,26 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "sanitize-html": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.10.0.tgz",
+      "integrity": "sha512-JqdovUd81dG4k87vZt6uA6YhDfWkUGruUu/aPmXLxXi45gZExnt9Bnw/qeQU8oGf82vPyaE0vO4aH0PbobB9JQ==",
+      "requires": {
+        "deepmerge": "^4.2.2",
+        "escape-string-regexp": "^4.0.0",
+        "htmlparser2": "^8.0.0",
+        "is-plain-object": "^5.0.0",
+        "parse-srcset": "^1.0.2",
+        "postcss": "^8.3.11"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        }
+      }
+    },
     "saslprep": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/saslprep/-/saslprep-1.0.3.tgz",
@@ -7615,6 +7882,11 @@
         "atomic-sleep": "^1.0.0"
       }
     },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+    },
     "sparse-bitfield": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz",
diff --git a/api/package.json b/api/package.json
index 6dcf344ea0..561908fad3 100644
--- a/api/package.json
+++ b/api/package.json
@@ -29,7 +29,8 @@
     "keyv-file": "^0.2.0",
     "lodash": "^4.17.21",
     "mongoose": "^6.9.0",
-    "openai": "^3.1.0"
+    "openai": "^3.1.0",
+    "sanitize-html": "^2.10.0"
   },
   "devDependencies": {
     "nodemon": "^2.0.20",
diff --git a/api/server/routes/ask.js b/api/server/routes/ask.js
index 8d20b808dc..265672db8b 100644
--- a/api/server/routes/ask.js
+++ b/api/server/routes/ask.js
@@ -7,7 +7,7 @@ const {
   titleConvo,
   askClient,
   browserClient,
-  customClient,
+  customClient
   // detectCode
 } = require('../../app/');
 const { getConvo, saveMessage, getConvoTitle, saveConvo } = require('../../models');
@@ -18,7 +18,7 @@ router.use('/bing', askBing);
 router.use('/sydney', askSydney);
 
 router.post('/', async (req, res) => {
-  let { model, text, parentMessageId, conversationId: oldConversationId , ...convo } = req.body;
+  let { model, text, parentMessageId, conversationId: oldConversationId, ...convo } = req.body;
   if (text.length === 0) {
     return handleError(res, { text: 'Prompt empty or too short' });
   }
@@ -26,14 +26,14 @@ router.post('/', async (req, res) => {
   const conversationId = oldConversationId || crypto.randomUUID();
 
   const userMessageId = crypto.randomUUID();
-  const userParentMessageId = parentMessageId || '00000000-0000-0000-0000-000000000000'
+  const userParentMessageId = parentMessageId || '00000000-0000-0000-0000-000000000000';
   let userMessage = {
-    messageId: userMessageId, 
-    sender: 'User', 
-    text, 
+    messageId: userMessageId,
+    sender: 'User',
+    text,
     parentMessageId: userParentMessageId,
-    conversationId, 
-    isCreatedByUser: true 
+    conversationId,
+    isCreatedByUser: true
   };
 
   console.log('ask log', {
@@ -55,27 +55,28 @@ router.post('/', async (req, res) => {
   await saveConvo({ ...userMessage, model, ...convo });
 
   return await ask({
-    userMessage, 
+    userMessage,
     model,
     convo,
     preSendRequest: true,
-    req, res 
+    req,
+    res
   });
-})
+});
 
 router.post('/regenerate', async (req, res) => {
-  const { parentMessageId, model, chatGptLabel, promptPrefix } = req.body;
+  const { model } = req.body;
 
-  const oldUserMessage = await getMessages({ messageId: req.body })
+  const oldUserMessage = await getMessages({ messageId: req.body });
 
   if (oldUserMessage) {
-    const convo = await getConvo(userMessage?.conversationId)
+    const convo = await getConvo(userMessage?.conversationId);
 
     const userMessageId = crypto.randomUUID();
 
     let userMessage = {
       ...userMessage,
-      messageId: userMessageId, 
+      messageId: userMessageId
     };
 
     console.log('ask log for regeneration', {
@@ -85,14 +86,14 @@ router.post('/regenerate', async (req, res) => {
     });
 
     return await ask({
-      userMessage, 
+      userMessage,
       model,
       convo,
       preSendRequest: false,
-      req, res 
+      req,
+      res
     });
-  } else 
-    return handleError(res, { text: 'Parent message not found' });
+  } else return handleError(res, { text: 'Parent message not found' });
 
   // if (model === 'chatgptCustom' && !chatGptLabel && conversationId) {
   //   const convo = await getConvo({ conversationId });
@@ -106,15 +107,21 @@ router.post('/regenerate', async (req, res) => {
   // await saveConvo({ ...userMessage, model, chatGptLabel, promptPrefix });
 });
 
-const ask = async ({ 
-  userMessage, 
+const ask = async ({
+  userMessage,
   overrideParentMessageId = null,
   model,
   convo,
   preSendRequest = true,
-  req, res 
+  req,
+  res
 }) => {
-  let { sender, text, parentMessageId: userParentMessageId, conversationId, messageId: userMessageId } = userMessage;
+  let {
+    text,
+    parentMessageId: userParentMessageId,
+    conversationId,
+    messageId: userMessageId
+  } = userMessage;
 
   let client;
 
@@ -134,14 +141,13 @@ const ask = async ({
     'X-Accel-Buffering': 'no'
   });
 
-  if (preSendRequest)
-    sendMessage(res, { message: userMessage, created: true });
+  if (preSendRequest) sendMessage(res, { message: userMessage, created: true });
 
   try {
     const progressCallback = createOnProgress();
     let gptResponse = await client({
       text,
-      onProgress: progressCallback.call(null, model, {res, text }),
+      onProgress: progressCallback.call(null, model, { res, text }),
       convo: {
         parentMessageId: userParentMessageId,
         conversationId,
@@ -168,16 +174,20 @@ const ask = async ({
       gptResponse.text.toLowerCase().includes('no response') ||
       gptResponse.text.toLowerCase().includes('no answer')
     ) {
-      await saveMessage({ 
-        messageId: crypto.randomUUID(), sender: model, 
-        conversationId, parentMessageId: overrideParentMessageId || userMessageId,
-        error: true, text: 'Prompt empty or too short'});
+      await saveMessage({
+        messageId: crypto.randomUUID(),
+        sender: model,
+        conversationId,
+        parentMessageId: overrideParentMessageId || userMessageId,
+        error: true,
+        text: 'Prompt empty or too short'
+      });
       return handleError(res, { text: 'Prompt empty or too short' });
     }
 
     gptResponse.sender = model === 'chatgptCustom' ? convo.chatGptLabel : model;
+    gptResponse.model = model;
     // gptResponse.final = true;
-    // gptResponse.text = await detectCode(gptResponse.text);
     gptResponse.text = await handleText(gptResponse.text);
 
     if (convo.chatGptLabel?.length > 0 && model === 'chatgptCustom') {
@@ -189,14 +199,14 @@ const ask = async ({
     }
 
     // override the parentMessageId, for the regeneration.
-    gptResponse.parentMessageId = overrideParentMessageId || userMessageId
+    gptResponse.parentMessageId = overrideParentMessageId || userMessageId;
 
     await saveMessage(gptResponse);
     await saveConvo(gptResponse);
     sendMessage(res, {
       title: await getConvoTitle(conversationId),
-      final: true, 
-      requestMessage: userMessage, 
+      final: true,
+      requestMessage: userMessage,
       responseMessage: gptResponse
     });
     res.end();
@@ -213,15 +223,19 @@ const ask = async ({
       await saveConvo({
         conversationId,
         title
-      })
+      });
     }
   } catch (error) {
     console.log(error);
     // await deleteMessages({ messageId: userMessageId });
-    const errorMessage = { 
-      messageId: crypto.randomUUID(), sender: model, 
-      conversationId, parentMessageId: overrideParentMessageId || userMessageId,
-      error: true, text: error.message}
+    const errorMessage = {
+      messageId: crypto.randomUUID(),
+      sender: model,
+      conversationId,
+      parentMessageId: overrideParentMessageId || userMessageId,
+      error: true,
+      text: error.message
+    };
     await saveMessage(errorMessage);
     handleError(res, errorMessage);
   }
diff --git a/api/server/routes/askBing.js b/api/server/routes/askBing.js
index 5bb8abd4f0..066b64faec 100644
--- a/api/server/routes/askBing.js
+++ b/api/server/routes/askBing.js
@@ -7,26 +7,32 @@ const { handleError, sendMessage, createOnProgress, handleText } = require('./ha
 const citationRegex = /\[\^\d+?\^]/g;
 
 router.post('/', async (req, res) => {
-  const { model, text, parentMessageId, conversationId: oldConversationId, ...convo } = req.body;
+  const {
+    model,
+    text,
+    parentMessageId,
+    conversationId: oldConversationId,
+    ...convo
+  } = req.body;
   if (text.length === 0) {
     return handleError(res, { text: 'Prompt empty or too short' });
   }
 
   const conversationId = oldConversationId || crypto.randomUUID();
-  const isNewConversation = !oldConversationId
+  const isNewConversation = !oldConversationId;
 
   const userMessageId = crypto.randomUUID();
-  const userParentMessageId = parentMessageId || '00000000-0000-0000-0000-000000000000'
+  const userParentMessageId = parentMessageId || '00000000-0000-0000-0000-000000000000';
   let userMessage = {
-    messageId: userMessageId, 
-    sender: 'User', 
-    text, 
+    messageId: userMessageId,
+    sender: 'User',
+    text,
     parentMessageId: userParentMessageId,
-    conversationId, 
-    isCreatedByUser: true 
- };
+    conversationId,
+    isCreatedByUser: true
+  };
 
- console.log('ask log', {
+  console.log('ask log', {
     model,
     ...userMessage,
     ...convo
@@ -37,24 +43,31 @@ router.post('/', async (req, res) => {
 
   return await ask({
     isNewConversation,
-    userMessage, 
+    userMessage,
     model,
     convo,
     preSendRequest: true,
-    req, res 
+    req,
+    res
   });
-})
+});
 
-const ask = async ({ 
+const ask = async ({
   isNewConversation,
   overrideParentMessageId = null,
-  userMessage, 
+  userMessage,
   model,
   convo,
   preSendRequest = true,
-  req, res 
+  req,
+  res
 }) => {
-  let { sender, text, parentMessageId: userParentMessageId, conversationId, messageId: userMessageId } = userMessage;
+  let {
+    text,
+    parentMessageId: userParentMessageId,
+    conversationId,
+    messageId: userMessageId
+  } = userMessage;
 
   res.writeHead(200, {
     Connection: 'keep-alive',
@@ -64,19 +77,22 @@ const ask = async ({
     'X-Accel-Buffering': 'no'
   });
 
-  if (preSendRequest)
-    sendMessage(res, { message: userMessage, created: true });
+  if (preSendRequest) sendMessage(res, { message: userMessage, created: true });
 
   try {
     const progressCallback = createOnProgress();
     let response = await askBing({
       text,
-      onProgress: progressCallback.call(null, model, {res, text, parentMessageId: overrideParentMessageId || userMessageId }),
+      onProgress: progressCallback.call(null, model, {
+        res,
+        text,
+        parentMessageId: overrideParentMessageId || userMessageId
+      }),
       convo: {
         ...convo,
         parentMessageId: userParentMessageId,
-        conversationId,
-      },
+        conversationId
+      }
     });
 
     console.log('BING RESPONSE', response);
@@ -88,13 +104,16 @@ const ask = async ({
     userMessage.conversationId = response.conversationId || conversationId;
     userMessage.invocationId = response.invocationId;
     await saveMessage(userMessage);
-    
+
     // Bing API will not use our conversationId at the first time,
     // so change the placeholder conversationId to the real one.
     // Attition: the api will also create new conversationId while using invalid userMessage.parentMessageId,
     // but in this situation, don't change the conversationId, but create new convo.
-    if (conversationId != userMessage.conversationId && isNewConversation) 
-      await saveConvo({ conversationId: conversationId, newConversationId: userMessage.conversationId });
+    if (conversationId != userMessage.conversationId && isNewConversation)
+      await saveConvo({
+        conversationId: conversationId,
+        newConversationId: userMessage.conversationId
+      });
     conversationId = userMessage.conversationId;
 
     response.text = response.response;
@@ -107,7 +126,8 @@ const ask = async ({
     // response.final = true;
 
     // override the parentMessageId, for the regeneration.
-    response.parentMessageId = overrideParentMessageId || response.parentMessageId || userMessageId;
+    response.parentMessageId =
+      overrideParentMessageId || response.parentMessageId || userMessageId;
 
     const links = getCitations(response);
     response.text =
@@ -116,11 +136,11 @@ const ask = async ({
     response.text = await handleText(response.text);
 
     await saveMessage(response);
-    await saveConvo({...response, model, ...convo});
+    await saveConvo({ ...response, model, chatGptLabel: null, promptPrefix: null, ...convo });
     sendMessage(res, {
       title: await getConvoTitle(conversationId),
-      final: true, 
-      requestMessage: userMessage, 
+      final: true,
+      requestMessage: userMessage,
       responseMessage: response
     });
     res.end();
@@ -133,19 +153,23 @@ const ask = async ({
       });
 
       console.log('CONVERSATION TITLE', title);
-      
+
       await saveConvo({
         conversationId,
         title
-      })
+      });
     }
   } catch (error) {
     console.log(error);
     // await deleteMessages({ messageId: userMessageId });
-    const errorMessage = { 
-      messageId: crypto.randomUUID(), sender: model, 
-      conversationId, parentMessageId: overrideParentMessageId || userMessageId,
-      error: true, text: error.message}
+    const errorMessage = {
+      messageId: crypto.randomUUID(),
+      sender: model,
+      conversationId,
+      parentMessageId: overrideParentMessageId || userMessageId,
+      error: true,
+      text: error.message
+    };
     await saveMessage(errorMessage);
     handleError(res, errorMessage);
   }
diff --git a/api/server/routes/askSydney.js b/api/server/routes/askSydney.js
index a0a3bd32df..03e3479be4 100644
--- a/api/server/routes/askSydney.js
+++ b/api/server/routes/askSydney.js
@@ -7,26 +7,32 @@ const { handleError, sendMessage, createOnProgress, handleText } = require('./ha
 const citationRegex = /\[\^\d+?\^]/g;
 
 router.post('/', async (req, res) => {
-  const { model, text, parentMessageId, conversationId: oldConversationId, ...convo } = req.body;
+  const {
+    model,
+    text,
+    parentMessageId,
+    conversationId: oldConversationId,
+    ...convo
+  } = req.body;
   if (text.length === 0) {
     return handleError(res, { text: 'Prompt empty or too short' });
   }
 
   const conversationId = oldConversationId || crypto.randomUUID();
-  const isNewConversation = !oldConversationId
+  const isNewConversation = !oldConversationId;
 
   const userMessageId = crypto.randomUUID();
-  const userParentMessageId = parentMessageId || '00000000-0000-0000-0000-000000000000'
+  const userParentMessageId = parentMessageId || '00000000-0000-0000-0000-000000000000';
   let userMessage = {
-    messageId: userMessageId, 
-    sender: 'User', 
-    text, 
+    messageId: userMessageId,
+    sender: 'User',
+    text,
     parentMessageId: userParentMessageId,
-    conversationId, 
-    isCreatedByUser: true 
- };
+    conversationId,
+    isCreatedByUser: true
+  };
 
- console.log('ask log', {
+  console.log('ask log', {
     model,
     ...userMessage,
     ...convo
@@ -37,24 +43,31 @@ router.post('/', async (req, res) => {
 
   return await ask({
     isNewConversation,
-    userMessage, 
+    userMessage,
     model,
     convo,
     preSendRequest: true,
-    req, res 
+    req,
+    res
   });
-})
+});
 
-const ask = async ({ 
+const ask = async ({
   isNewConversation,
   overrideParentMessageId = null,
-  userMessage, 
+  userMessage,
   model,
   convo,
   preSendRequest = true,
-  req, res 
+  req,
+  res
 }) => {
-  let { sender, text, parentMessageId: userParentMessageId, conversationId, messageId: userMessageId } = userMessage;
+  let {
+    text,
+    parentMessageId: userParentMessageId,
+    conversationId,
+    messageId: userMessageId
+  } = userMessage;
 
   res.writeHead(200, {
     Connection: 'keep-alive',
@@ -64,19 +77,22 @@ const ask = async ({
     'X-Accel-Buffering': 'no'
   });
 
-  if (preSendRequest)
-    sendMessage(res, { message: userMessage, created: true });
+  if (preSendRequest) sendMessage(res, { message: userMessage, created: true });
 
   try {
     const progressCallback = createOnProgress();
     let response = await askSydney({
       text,
-      onProgress: progressCallback.call(null, model, {res, text, parentMessageId: overrideParentMessageId || userMessageId }),
+      onProgress: progressCallback.call(null, model, {
+        res,
+        text,
+        parentMessageId: overrideParentMessageId || userMessageId
+      }),
       convo: {
         parentMessageId: userParentMessageId,
         conversationId,
         ...convo
-      },
+      }
     });
 
     console.log('SYDNEY RESPONSE', response);
@@ -89,13 +105,11 @@ const ask = async ({
     userMessage.invocationId = response.invocationId;
     // Unlike gpt and bing, Sydney will never accept our given userMessage.messageId, it will generate its own one.
     await saveMessage(userMessage);
-    
+
     // Save sydney response
     // response.id = response.messageId;
     response.invocationId = convo.invocationId ? convo.invocationId + 1 : 1;
-    response.conversationId = conversationId
-      ? conversationId
-      : crypto.randomUUID();
+    response.conversationId = conversationId ? conversationId : crypto.randomUUID();
     response.conversationSignature = convo.conversationSignature
       ? convo.conversationSignature
       : crypto.randomUUID();
@@ -108,7 +122,8 @@ const ask = async ({
     // response.final = true;
 
     // override the parentMessageId, for the regeneration.
-    response.parentMessageId = overrideParentMessageId || response.parentMessageId || userMessageId;
+    response.parentMessageId =
+      overrideParentMessageId || response.parentMessageId || userMessageId;
 
     const links = getCitations(response);
     response.text =
@@ -124,17 +139,20 @@ const ask = async ({
     // so change the placeholder conversationId to the real one.
     // Attition: the api will also create new conversationId while using invalid userMessage.parentMessageId,
     // but in this situation, don't change the conversationId, but create new convo.
-    if (conversationId != userMessage.conversationId && isNewConversation) 
-      await saveConvo({ conversationId: conversationId, newConversationId: userMessage.conversationId });
+    if (conversationId != userMessage.conversationId && isNewConversation)
+      await saveConvo({
+        conversationId: conversationId,
+        newConversationId: userMessage.conversationId
+      });
     conversationId = userMessage.conversationId;
 
     // Save sydney response & convo, then send
     await saveMessage(response);
-    await saveConvo({...response, model, ...convo});
+    await saveConvo({ ...response, model, chatGptLabel: null, promptPrefix: null, ...convo });
     sendMessage(res, {
       title: await getConvoTitle(conversationId),
-      final: true, 
-      requestMessage: userMessage, 
+      final: true,
+      requestMessage: userMessage,
       responseMessage: response
     });
     res.end();
@@ -147,19 +165,23 @@ const ask = async ({
       });
 
       console.log('CONVERSATION TITLE', title);
-      
+
       await saveConvo({
         conversationId,
         title
-      })
+      });
     }
   } catch (error) {
     console.log(error);
     // await deleteMessages({ messageId: userMessageId });
-    const errorMessage = { 
-      messageId: crypto.randomUUID(), sender: model, 
-      conversationId, parentMessageId: overrideParentMessageId || userMessageId,
-      error: true, text: error.message}
+    const errorMessage = {
+      messageId: crypto.randomUUID(),
+      sender: model,
+      conversationId,
+      parentMessageId: overrideParentMessageId || userMessageId,
+      error: true,
+      text: error.message
+    };
     await saveMessage(errorMessage);
     handleError(res, errorMessage);
   }
diff --git a/client/package-lock.json b/client/package-lock.json
index fbfcb2b345..d5e3024751 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -11125,9 +11125,9 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.75.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.75.0.tgz",
-      "integrity": "sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==",
+      "version": "5.76.1",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.76.1.tgz",
+      "integrity": "sha512-4+YIK4Abzv8172/SGqObnUjaIHjLEuUasz9EwQj/9xmPPkYJy2Mh03Q/lJfSD3YLzbxy5FeTq5Uw0323Oh6SJQ==",
       "dev": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
@@ -19431,9 +19431,9 @@
       }
     },
     "webpack": {
-      "version": "5.75.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.75.0.tgz",
-      "integrity": "sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==",
+      "version": "5.76.1",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.76.1.tgz",
+      "integrity": "sha512-4+YIK4Abzv8172/SGqObnUjaIHjLEuUasz9EwQj/9xmPPkYJy2Mh03Q/lJfSD3YLzbxy5FeTq5Uw0323Oh6SJQ==",
       "dev": true,
       "requires": {
         "@types/eslint-scope": "^3.7.3",
diff --git a/client/src/components/Conversations/Conversation.jsx b/client/src/components/Conversations/Conversation.jsx
index 4d90ecb2cc..b89f9c8623 100644
--- a/client/src/components/Conversations/Conversation.jsx
+++ b/client/src/components/Conversations/Conversation.jsx
@@ -42,6 +42,8 @@ export default function Conversation({
     dispatch(setEmptyMessage());
 
     const convo = { title, error: false, conversationId: id, chatGptLabel, promptPrefix };
+    // debugging
+    console.log(model, chatGptLabel, promptPrefix);
 
     if (bingData) {
       const {
@@ -77,17 +79,19 @@ export default function Conversation({
 
     if (chatGptLabel) {
       dispatch(setModel('chatgptCustom'));
+      dispatch(setCustomModel(chatGptLabel.toLowerCase()));
     } else {
       dispatch(setModel(model));
-    }
-
-    if (modelMap[model.toLowerCase()]) {
-      console.log('sender', model);
-      dispatch(setCustomModel(model.toLowerCase()));
-    } else {
       dispatch(setCustomModel(null));
     }
 
+    // if (modelMap[chatGptLabel.toLowerCase()]) {
+    //   console.log('custom model', chatGptLabel);
+    //   dispatch(setCustomModel(chatGptLabel.toLowerCase()));
+    // } else {
+    //   dispatch(setCustomModel(null));
+    // }
+
     dispatch(setMessages(data));
     dispatch(setCustomGpt(convo));
     dispatch(setText(''));
diff --git a/client/src/components/Models/ModelMenu.jsx b/client/src/components/Models/ModelMenu.jsx
index 64d8a427b1..05bafc676b 100644
--- a/client/src/components/Models/ModelMenu.jsx
+++ b/client/src/components/Models/ModelMenu.jsx
@@ -46,7 +46,10 @@ export default function ModelMenu() {
     mutate();
     try {
       const lastSelected = JSON.parse(localStorage.getItem('model'));
-      if (lastSelected && lastSelected !== 'chatgptCustom' && initial[lastSelected]) {
+
+      if (lastSelected === 'chatgptCustom') {
+        return;
+      } else if (initial[lastSelected]) {
         dispatch(setModel(lastSelected));
       }
     } catch (err) {
@@ -72,6 +75,7 @@ export default function ModelMenu() {
       dispatch(setModel(value));
       dispatch(setDisabled(false));
       dispatch(setCustomModel(null));
+      dispatch(setCustomGpt({ chatGptLabel: null, promptPrefix: null }));
     } else if (!initial[value]) {
       const chatGptLabel = modelMap[value]?.chatGptLabel;
       const promptPrefix = modelMap[value]?.promptPrefix;
diff --git a/client/src/components/Nav/index.jsx b/client/src/components/Nav/index.jsx
index ea95559cd8..9c02a5e1ea 100644
--- a/client/src/components/Nav/index.jsx
+++ b/client/src/components/Nav/index.jsx
@@ -11,22 +11,23 @@ import { increasePage, decreasePage, setPage, setConvos, setPages } from '~/stor
 export default function Nav({ navVisible, setNavVisible }) {
   const dispatch = useDispatch();
   const [isHovering, setIsHovering] = useState(false);
-  const { conversationId, convos, pages, pageNumber, refreshConvoHint } = useSelector((state) => state.convo);
+  const { conversationId, convos, pages, pageNumber, refreshConvoHint } = useSelector(
+    (state) => state.convo
+  );
   const onSuccess = (data) => {
     const { conversations, pages } = data;
 
-    if (pageNumber > pages)
+    if (pageNumber > pages) {
       dispatch(setPage(pages));
-    else 
+    } else {
       dispatch(setConvos(conversations));
-    dispatch(setPages(pages));
+      dispatch(setPages(pages));
+    }
   };
 
-  const { data, isLoading, mutate } = swr(
-    `/api/convos?pageNumber=${pageNumber}`,
-    onSuccess,
-    {revalidateOnMount: false}
-  );
+  const { data, isLoading, mutate } = swr(`/api/convos?pageNumber=${pageNumber}`, onSuccess, {
+    revalidateOnMount: false
+  });
 
   const containerRef = useRef(null);
   const scrollPositionRef = useRef(null);
@@ -36,23 +37,25 @@ export default function Nav({ navVisible, setNavVisible }) {
     if (container) {
       scrollPositionRef.current = container.scrollTop;
     }
-  }
+  };
 
   const nextPage = async () => {
-    moveToTop()
+    moveToTop();
 
     dispatch(increasePage());
     await mutate();
   };
 
   const previousPage = async () => {
-    moveToTop()
-    
+    moveToTop();
+
     dispatch(decreasePage());
     await mutate();
   };
 
-  useEffect(() => {mutate()}, [pageNumber, conversationId, refreshConvoHint]);
+  useEffect(() => {
+    mutate();
+  }, [pageNumber, conversationId, refreshConvoHint]);
 
   useEffect(() => {
     const container = containerRef.current;
@@ -66,14 +69,14 @@ export default function Nav({ navVisible, setNavVisible }) {
   }, [data]);
 
   useEffect(() => {
-    setNavVisible(false)
-  }, [conversationId, ])
+    setNavVisible(false);
+  }, [conversationId]);
 
   const toggleNavVisible = () => {
     setNavVisible((prev) => {
-      return !prev
-    })
-  }
+      return !prev;
+    });
+  };
 
   const containerClasses =
     isLoading && pageNumber === 1
@@ -82,7 +85,12 @@ export default function Nav({ navVisible, setNavVisible }) {
 
   return (
     <>
-      <div className={"dark nav bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col" + (navVisible?' active':'')}>
+      <div
+        className={
+          'nav dark bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col' +
+          (navVisible ? ' active' : '')
+        }
+      >
         <div className="flex h-full min-h-0 flex-col ">
           <div className="scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20">
             <nav className="flex h-full flex-1 flex-col space-y-1 p-2">
@@ -117,7 +125,7 @@ export default function Nav({ navVisible, setNavVisible }) {
         </div>
         <button
           type="button"
-          className="nav-close-button -ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-white hover:text-white text-white"
+          className="nav-close-button -ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md text-white hover:text-gray-900 hover:text-white focus:outline-none focus:ring-white"
           onClick={toggleNavVisible}
         >
           <span className="sr-only">Open sidebar</span>
@@ -148,8 +156,10 @@ export default function Nav({ navVisible, setNavVisible }) {
           </svg>
         </button>
       </div>
-      <div className={"nav-mask" + (navVisible?' active':'')} onClick={toggleNavVisible}>
-      </div>
+      <div
+        className={'nav-mask' + (navVisible ? ' active' : '')}
+        onClick={toggleNavVisible}
+      ></div>
     </>
   );
 }
diff --git a/client/src/store/submitSlice.js b/client/src/store/submitSlice.js
index a1b4afee34..a965c29335 100644
--- a/client/src/store/submitSlice.js
+++ b/client/src/store/submitSlice.js
@@ -6,8 +6,8 @@ const initialState = {
   stopStream: false,
   disabled: false,
   model: 'chatgpt',
-  promptPrefix: '',
-  chatGptLabel: '',
+  promptPrefix: null,
+  chatGptLabel: null,
   customModel: null,
 };
 
@@ -34,6 +34,7 @@ const currentSlice = createSlice({
       state.model = action.payload;
     },
     setCustomGpt: (state, action) => {
+      console.log('setCustomGpt', action.payload);
       state.promptPrefix = action.payload.promptPrefix;
       state.chatGptLabel = action.payload.chatGptLabel;
     },

From 918f2fecb6d469bd54fda73b60adc782ad6612db Mon Sep 17 00:00:00 2001
From: Daniel Avila <messagedaniel@protonmail.com>
Date: Tue, 14 Mar 2023 21:25:02 -0400
Subject: [PATCH 36/47] fix: convo resets on model change

---
 client/src/components/Main/TextChat.jsx    | 44 ++++------------------
 client/src/components/Models/ModelMenu.jsx |  7 ++--
 client/src/utils/createPayload.js          | 31 +++++++++++++++
 client/src/utils/resetConvo.js             | 22 +++++++++++
 4 files changed, 64 insertions(+), 40 deletions(-)
 create mode 100644 client/src/utils/createPayload.js
 create mode 100644 client/src/utils/resetConvo.js

diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index 8f1276fce6..c4fd6a8f23 100644
--- a/client/src/components/Main/TextChat.jsx
+++ b/client/src/components/Main/TextChat.jsx
@@ -1,18 +1,17 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { SSE } from '~/utils/sse';
-import axios from 'axios';
 import SubmitButton from './SubmitButton';
 import Regenerate from './Regenerate';
 import ModelMenu from '../Models/ModelMenu';
 import Footer from './Footer';
 import TextareaAutosize from 'react-textarea-autosize';
-import handleSubmit from '~/utils/handleSubmit';
+import createPayload from '~/utils/createPayload';
+import resetConvo from '~/utils/resetConvo';
 import { useSelector, useDispatch } from 'react-redux';
 import { setConversation, setError, refreshConversation } from '~/store/convoSlice';
 import { setMessages } from '~/store/messageSlice';
 import { setSubmitState, setSubmission } from '~/store/submitSlice';
 import { setText } from '~/store/textSlice';
-import manualSWR from '~/utils/fetchers';
 
 export default function TextChat({ messages }) {
   const [errorMessage, setErrorMessage] = useState('');
@@ -25,7 +24,6 @@ export default function TextChat({ messages }) {
     useSelector((state) => state.submit);
   const { text } = useSelector((state) => state.text);
   const { error } = convo;
-  const genTitle = manualSWR(`/api/convos/gen_title`, 'post');
 
   // auto focus to input, when enter a conversation.
   useEffect(() => {
@@ -157,8 +155,12 @@ export default function TextChat({ messages }) {
     const fakeMessageId = crypto.randomUUID();
     const isCustomModel = model === 'chatgptCustom' || !initial[model];
     const message = text.trim();
-    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;
+    let parentMessageId = convo.parentMessageId || '00000000-0000-0000-0000-000000000000';
+    if (resetConvo(messages, sender)) {
+      parentMessageId = '00000000-0000-0000-0000-000000000000';
+    }
+    const currentMsg = { sender: 'User', text: message, current: true, isCreatedByUser: true, parentMessageId , messageId: fakeMessageId };
     const initialResponse = { sender, text: '', parentMessageId: fakeMessageId, submitting: true };
 
     dispatch(setSubmitState(true));
@@ -184,38 +186,6 @@ export default function TextChat({ messages }) {
     dispatch(setSubmission(submission));
   };
 
-  const createPayload = ({ convo, message }) => {
-    const endpoint = `/api/ask`;
-    let payload = { ...message };
-    const { model } = message
-
-    if (!payload.conversationId)
-      if (convo?.conversationId && convo?.parentMessageId) {
-        payload = {
-          ...payload,
-          conversationId: convo.conversationId,
-          parentMessageId: convo.parentMessageId || '00000000-0000-0000-0000-000000000000'
-        };
-      }
-
-    const isBing = model === 'bingai' || model === 'sydney';
-    if (isBing && convo?.conversationId) {
-      payload = {
-        ...payload,
-        jailbreakConversationId: convo.jailbreakConversationId,
-        conversationId: convo.conversationId,
-        conversationSignature: convo.conversationSignature,
-        clientId: convo.clientId,
-        invocationId: convo.invocationId
-      };
-    }
-
-    let server = endpoint;
-    server = model === 'bingai' ? server + '/bing' : server;
-    server = model === 'sydney' ? server + '/sydney' : server;
-    return { server, payload };
-  };
-
   useEffect(() => {
     if (Object.keys(submission).length === 0) {
       return;
diff --git a/client/src/components/Models/ModelMenu.jsx b/client/src/components/Models/ModelMenu.jsx
index 05bafc676b..7fc819209d 100644
--- a/client/src/components/Models/ModelMenu.jsx
+++ b/client/src/components/Models/ModelMenu.jsx
@@ -64,6 +64,9 @@ export default function ModelMenu() {
   }, [model]);
 
   const onChange = (value, custom = false) => {
+    // Set new conversation
+    dispatch(setNewConvo());
+    dispatch(setSubmission({}));
     // if (custom) {
     //   mutate();
     // }
@@ -89,9 +92,7 @@ export default function ModelMenu() {
       dispatch(setCustomModel(null));
     }
 
-    // Set new conversation
-    dispatch(setNewConvo());
-    dispatch(setSubmission({}));
+
   };
 
   const onOpenChange = (open) => {
diff --git a/client/src/utils/createPayload.js b/client/src/utils/createPayload.js
new file mode 100644
index 0000000000..fd195e43e1
--- /dev/null
+++ b/client/src/utils/createPayload.js
@@ -0,0 +1,31 @@
+export default function createPayload({ convo, message }) {
+  const endpoint = `/api/ask`;
+  let payload = { ...message };
+  const { model } = message;
+
+  if (!payload.conversationId)
+    if (convo?.conversationId && convo?.parentMessageId) {
+      payload = {
+        ...payload,
+        conversationId: convo.conversationId,
+        parentMessageId: convo.parentMessageId || '00000000-0000-0000-0000-000000000000'
+      };
+    }
+
+  const isBing = model === 'bingai' || model === 'sydney';
+  if (isBing && convo?.conversationId) {
+    payload = {
+      ...payload,
+      jailbreakConversationId: convo.jailbreakConversationId,
+      conversationId: convo.conversationId,
+      conversationSignature: convo.conversationSignature,
+      clientId: convo.clientId,
+      invocationId: convo.invocationId
+    };
+  }
+
+  let server = endpoint;
+  server = model === 'bingai' ? server + '/bing' : server;
+  server = model === 'sydney' ? server + '/sydney' : server;
+  return { server, payload };
+};
diff --git a/client/src/utils/resetConvo.js b/client/src/utils/resetConvo.js
new file mode 100644
index 0000000000..8ce01fda57
--- /dev/null
+++ b/client/src/utils/resetConvo.js
@@ -0,0 +1,22 @@
+export default function resetConvo(messages, sender) {
+  if (messages.length === 0) {
+    return false;
+  }
+  let modelMessages = messages.filter((message) => !message.isCreatedByUser);
+  let lastModel = modelMessages[modelMessages.length - 1].sender;
+  if (lastModel !== sender) {
+    console.log(
+      'Model change! Reseting convo. Original messages: ',
+      messages,
+      'filtered messages: ',
+      modelMessages,
+      'last model: ',
+      lastModel,
+      'sender: ',
+      sender
+    );
+    return true;
+  }
+
+  return false;
+}

From 4e91437049797fe6cde60732741391f1a050f6c9 Mon Sep 17 00:00:00 2001
From: Daniel Avila <messagedaniel@protonmail.com>
Date: Tue, 14 Mar 2023 21:32:25 -0400
Subject: [PATCH 37/47] fix: convo resets, sets new Convo

---
 client/src/components/Main/TextChat.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index c4fd6a8f23..3671833ef0 100644
--- a/client/src/components/Main/TextChat.jsx
+++ b/client/src/components/Main/TextChat.jsx
@@ -8,7 +8,7 @@ import TextareaAutosize from 'react-textarea-autosize';
 import createPayload from '~/utils/createPayload';
 import resetConvo from '~/utils/resetConvo';
 import { useSelector, useDispatch } from 'react-redux';
-import { setConversation, setError, refreshConversation } from '~/store/convoSlice';
+import { setConversation, setNewConvo, setError, refreshConversation } from '~/store/convoSlice';
 import { setMessages } from '~/store/messageSlice';
 import { setSubmitState, setSubmission } from '~/store/submitSlice';
 import { setText } from '~/store/textSlice';
@@ -159,6 +159,7 @@ export default function TextChat({ messages }) {
     let parentMessageId = convo.parentMessageId || '00000000-0000-0000-0000-000000000000';
     if (resetConvo(messages, sender)) {
       parentMessageId = '00000000-0000-0000-0000-000000000000';
+      dispatch(setNewConvo());
     }
     const currentMsg = { sender: 'User', text: message, current: true, isCreatedByUser: true, parentMessageId , messageId: fakeMessageId };
     const initialResponse = { sender, text: '', parentMessageId: fakeMessageId, submitting: true };

From 54aa9debb4bad5484b4d53600e4a4a31b5084758 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Wed, 15 Mar 2023 13:38:01 +0800
Subject: [PATCH 38/47] fix: don't reset new convo if model not change fix:
 change model will clear all messages.

---
 client/src/components/Models/ModelMenu.jsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Models/ModelMenu.jsx b/client/src/components/Models/ModelMenu.jsx
index 7fc819209d..4e47ccbb1b 100644
--- a/client/src/components/Models/ModelMenu.jsx
+++ b/client/src/components/Models/ModelMenu.jsx
@@ -12,6 +12,8 @@ import ModelDialog from './ModelDialog';
 import MenuItems from './MenuItems';
 import { swr } from '~/utils/fetchers';
 import { setModels } from '~/store/modelSlice';
+import { setMessages } from '~/store/messageSlice';
+import { setText } from '~/store/textSlice';
 import GPTIcon from '../svg/GPTIcon';
 import BingIcon from '../svg/BingIcon';
 import { Button } from '../ui/Button.tsx';
@@ -64,16 +66,13 @@ export default function ModelMenu() {
   }, [model]);
 
   const onChange = (value, custom = false) => {
-    // Set new conversation
-    dispatch(setNewConvo());
-    dispatch(setSubmission({}));
-    // if (custom) {
-    //   mutate();
-    // }
     if (!value) {
       return;
+    } else if (value === model) {
+      return;
     } else if (value === 'chatgptCustom') {
       // dispatch(setMessages([]));
+      return;
     } else if (initial[value]) {
       dispatch(setModel(value));
       dispatch(setDisabled(false));
@@ -92,7 +91,11 @@ export default function ModelMenu() {
       dispatch(setCustomModel(null));
     }
 
-
+    // Set new conversation
+    dispatch(setText(''));
+    dispatch(setMessages([]));
+    dispatch(setNewConvo());
+    dispatch(setSubmission({}));
   };
 
   const onOpenChange = (open) => {

From 5d0b849930921a8cad297c3ac435672d71a0490a Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Wed, 15 Mar 2023 14:21:08 +0800
Subject: [PATCH 39/47] feat: show icon within model select menu fix: use icon
 for gptCustom

---
 .../components/Conversations/Conversation.jsx |  2 -
 client/src/components/Messages/Message.jsx    | 51 ++---------------
 client/src/components/Models/MenuItems.jsx    |  3 +
 client/src/components/Models/ModelItem.jsx    | 10 +++-
 client/src/components/svg/BingIcon.jsx        |  6 +-
 client/src/components/svg/GPTIcon.jsx         |  7 +--
 client/src/utils/index.js                     | 57 +++++++++++++++++++
 7 files changed, 80 insertions(+), 56 deletions(-)

diff --git a/client/src/components/Conversations/Conversation.jsx b/client/src/components/Conversations/Conversation.jsx
index b89f9c8623..9e5c3dce6d 100644
--- a/client/src/components/Conversations/Conversation.jsx
+++ b/client/src/components/Conversations/Conversation.jsx
@@ -42,8 +42,6 @@ export default function Conversation({
     dispatch(setEmptyMessage());
 
     const convo = { title, error: false, conversationId: id, chatGptLabel, promptPrefix };
-    // debugging
-    console.log(model, chatGptLabel, promptPrefix);
 
     if (bingData) {
       const {
diff --git a/client/src/components/Messages/Message.jsx b/client/src/components/Messages/Message.jsx
index ac74285be0..cfda8e524f 100644
--- a/client/src/components/Messages/Message.jsx
+++ b/client/src/components/Messages/Message.jsx
@@ -1,8 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import TextWrapper from './TextWrapper';
 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';
@@ -11,6 +9,7 @@ import { setMessages } from '~/store/messageSlice';
 import { setSubmitState, setSubmission } from '~/store/submitSlice';
 import { setText } from '~/store/textSlice';
 import { setConversation } from '../../store/convoSlice';
+import { getIconOfModel } from '../../utils';
 
 const MultiMessage = ({
   messageList,
@@ -103,52 +102,12 @@ export default function Message({
     className:
       'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 bg-white dark:text-gray-100 group dark:bg-gray-800'
   };
-
-  const bgColors = {
-    chatgpt: 'rgb(16, 163, 127)',
-    chatgptBrowser: 'rgb(25, 207, 207)',
-    bingai: '',
-    sydney: ''
-  };
-
-  const isBing = sender === 'bingai' || sender === 'sydney';
-
-  let icon = (
-    <div
-      style={{ background: 'radial-gradient(circle at 90% 110%, rgb(1 43 128), rgb(17, 139, 161))', color: 'white', fontSize: 12 }}
-      className="relative flex h-[30px] w-[30px] items-center justify-center rounded-sm p-1 text-white"
-    >
-      User
-    </div>
-  );
-    //`${sender}:`;
-
-  let backgroundColor = bgColors[sender];
-
-  if (!isCreatedByUser) {
+  
+  const icon = getIconOfModel({ sender, isCreatedByUser, model, chatGptLabel, promptPrefix, error });
+  
+  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 ((!isCreatedByUser && backgroundColor) || isBing) {
-    icon = (
-      <div
-        style={
-          isBing
-            ? { background: 'radial-gradient(circle at 90% 110%, #F0F0FA, #D0E0F9)' }
-            : { backgroundColor }
-        }
-        className="relative flex h-[30px] w-[30px] items-center justify-center rounded-sm p-1 text-white"
-      >
-        {isBing ? <BingIcon /> : <GPTIcon />}
-        {error && (
-          <span className="absolute right-0 top-[20px] -mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white">
-            !
-          </span>
-        )}
-      </div>
-    );
-  }
 
   const wrapText = (text) => <TextWrapper text={text} />;
 
diff --git a/client/src/components/Models/MenuItems.jsx b/client/src/components/Models/MenuItems.jsx
index a119bee381..23e54633cd 100644
--- a/client/src/components/Models/MenuItems.jsx
+++ b/client/src/components/Models/MenuItems.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import ModelItem from './ModelItem';
 
 export default function MenuItems({ models, onSelect }) {
+  console.log(models)
   return (
     <>
       {models.map((modelItem) => (
@@ -11,6 +12,8 @@ export default function MenuItems({ models, onSelect }) {
           modelName={modelItem.name}
           value={modelItem.value}
           onSelect={onSelect}
+          chatGptLabel={modelItem.chatGptLabel}
+          promptPrefix={modelItem.promptPrefix}
         />
       ))}
     </>
diff --git a/client/src/components/Models/ModelItem.jsx b/client/src/components/Models/ModelItem.jsx
index c3df204351..e6153e8002 100644
--- a/client/src/components/Models/ModelItem.jsx
+++ b/client/src/components/Models/ModelItem.jsx
@@ -7,8 +7,9 @@ import { DialogTrigger } from '../ui/Dialog.tsx';
 import RenameButton from '../Conversations/RenameButton';
 import TrashIcon from '../svg/TrashIcon';
 import manualSWR from '~/utils/fetchers';
+import { getIconOfModel } from '../../utils';
 
-export default function ModelItem({ modelName, value, onSelect, id }) {
+export default function ModelItem({ modelName, value, onSelect, id, chatGptLabel, promptPrefix }) {
   const dispatch = useDispatch();
   const { customModel } = useSelector((state) => state.submit);
   const { initial } = useSelector((state) => state.models);
@@ -27,6 +28,8 @@ export default function ModelItem({ modelName, value, onSelect, id }) {
     dispatch(setModels(fetchedModels));
   });
 
+  const icon = getIconOfModel({ size: 16, sender: modelName, isCreatedByUser: false, model: value, chatGptLabel, promptPrefix, error: false, className: "mr-2" });
+
   if (value === 'chatgptCustom') {
     return (
       <DialogTrigger className="w-full">
@@ -34,6 +37,7 @@ export default function ModelItem({ modelName, value, onSelect, id }) {
           value={value}
           className="dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
         >
+          {icon}
           {modelName}
           <sup>$</sup>
         </DropdownMenuRadioItem>
@@ -47,6 +51,7 @@ export default function ModelItem({ modelName, value, onSelect, id }) {
         value={value}
         className="dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
       >
+        {icon}
         {modelName}
         {value === 'chatgpt' && <sup>$</sup>}
       </DropdownMenuRadioItem>
@@ -122,6 +127,9 @@ export default function ModelItem({ modelName, value, onSelect, id }) {
           <Circle className="h-2 w-2 fill-current" />
         </span>
       )}
+
+      {icon}
+
       {renaming === true ? (
         <input
           ref={inputRef}
diff --git a/client/src/components/svg/BingIcon.jsx b/client/src/components/svg/BingIcon.jsx
index 6da92e462e..6dd9c346fe 100644
--- a/client/src/components/svg/BingIcon.jsx
+++ b/client/src/components/svg/BingIcon.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 
-export default function BingIcon() {
+export default function BingIcon({ size=25 }) {
   return (
     <svg
-      width="25"
-      height="25"
+      width={size}
+      height={size}
       viewBox="0 0 56 56"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/svg/GPTIcon.jsx b/client/src/components/svg/GPTIcon.jsx
index c7057934b2..c204c23946 100644
--- a/client/src/components/svg/GPTIcon.jsx
+++ b/client/src/components/svg/GPTIcon.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
-export default function GPTIcon({ button = false, menu = false }) {
+export default function GPTIcon({ button = false, menu = false, size=25 }) {
   let unit = '41';
-  let height = unit;
-  let width = unit;
+  let height = size;
+  let width = size;
   let boxSize = '6';
   if (button) {
     // unit = '45';
@@ -20,7 +20,6 @@ export default function GPTIcon({ button = false, menu = false }) {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       strokeWidth="1.5"
-      className={`h-${boxSize} w-${boxSize}`}
     >
       <path
         d="M37.5324 16.8707C37.9808 15.5241 38.1363 14.0974 37.9886 12.6859C37.8409 11.2744 37.3934 9.91076 36.676 8.68622C35.6126 6.83404 33.9882 5.3676 32.0373 4.4985C30.0864 3.62941 27.9098 3.40259 25.8215 3.85078C24.8796 2.7893 23.7219 1.94125 22.4257 1.36341C21.1295 0.785575 19.7249 0.491269 18.3058 0.500197C16.1708 0.495044 14.0893 1.16803 12.3614 2.42214C10.6335 3.67624 9.34853 5.44666 8.6917 7.47815C7.30085 7.76286 5.98686 8.3414 4.8377 9.17505C3.68854 10.0087 2.73073 11.0782 2.02839 12.312C0.956464 14.1591 0.498905 16.2988 0.721698 18.4228C0.944492 20.5467 1.83612 22.5449 3.268 24.1293C2.81966 25.4759 2.66413 26.9026 2.81182 28.3141C2.95951 29.7256 3.40701 31.0892 4.12437 32.3138C5.18791 34.1659 6.8123 35.6322 8.76321 36.5013C10.7141 37.3704 12.8907 37.5973 14.9789 37.1492C15.9208 38.2107 17.0786 39.0587 18.3747 39.6366C19.6709 40.2144 21.0755 40.5087 22.4946 40.4998C24.6307 40.5054 26.7133 39.8321 28.4418 38.5772C30.1704 37.3223 31.4556 35.5506 32.1119 33.5179C33.5027 33.2332 34.8167 32.6547 35.9659 31.821C37.115 30.9874 38.0728 29.9178 38.7752 28.684C39.8458 26.8371 40.3023 24.6979 40.0789 22.5748C39.8556 20.4517 38.9639 18.4544 37.5324 16.8707ZM22.4978 37.8849C20.7443 37.8874 19.0459 37.2733 17.6994 36.1501C17.7601 36.117 17.8666 36.0586 17.936 36.0161L25.9004 31.4156C26.1003 31.3019 26.2663 31.137 26.3813 30.9378C26.4964 30.7386 26.5563 30.5124 26.5549 30.2825V19.0542L29.9213 20.998C29.9389 21.0068 29.9541 21.0198 29.9656 21.0359C29.977 21.052 29.9842 21.0707 29.9867 21.0902V30.3889C29.9842 32.375 29.1946 34.2791 27.7909 35.6841C26.3872 37.0892 24.4838 37.8806 22.4978 37.8849ZM6.39227 31.0064C5.51397 29.4888 5.19742 27.7107 5.49804 25.9832C5.55718 26.0187 5.66048 26.0818 5.73461 26.1244L13.699 30.7248C13.8975 30.8408 14.1233 30.902 14.3532 30.902C14.583 30.902 14.8088 30.8408 15.0073 30.7248L24.731 25.1103V28.9979C24.7321 29.0177 24.7283 29.0376 24.7199 29.0556C24.7115 29.0736 24.6988 29.0893 24.6829 29.1012L16.6317 33.7497C14.9096 34.7416 12.8643 35.0097 10.9447 34.4954C9.02506 33.9811 7.38785 32.7263 6.39227 31.0064ZM4.29707 13.6194C5.17156 12.0998 6.55279 10.9364 8.19885 10.3327C8.19885 10.4013 8.19491 10.5228 8.19491 10.6071V19.808C8.19351 20.0378 8.25334 20.2638 8.36823 20.4629C8.48312 20.6619 8.64893 20.8267 8.84863 20.9404L18.5723 26.5542L15.206 28.4979C15.1894 28.5089 15.1703 28.5155 15.1505 28.5173C15.1307 28.5191 15.1107 28.516 15.0924 28.5082L7.04046 23.8557C5.32135 22.8601 4.06716 21.2235 3.55289 19.3046C3.03862 17.3858 3.30624 15.3413 4.29707 13.6194ZM31.955 20.0556L22.2312 14.4411L25.5976 12.4981C25.6142 12.4872 25.6333 12.4805 25.6531 12.4787C25.6729 12.4769 25.6928 12.4801 25.7111 12.4879L33.7631 17.1364C34.9967 17.849 36.0017 18.8982 36.6606 20.1613C37.3194 21.4244 37.6047 22.849 37.4832 24.2684C37.3617 25.6878 36.8382 27.0432 35.9743 28.1759C35.1103 29.3086 33.9415 30.1717 32.6047 30.6641C32.6047 30.5947 32.6047 30.4733 32.6047 30.3889V21.188C32.6066 20.9586 32.5474 20.7328 32.4332 20.5338C32.319 20.3348 32.154 20.1698 31.955 20.0556ZM35.3055 15.0128C35.2464 14.9765 35.1431 14.9142 35.069 14.8717L27.1045 10.2712C26.906 10.1554 26.6803 10.0943 26.4504 10.0943C26.2206 10.0943 25.9948 10.1554 25.7963 10.2712L16.0726 15.8858V11.9982C16.0715 11.9783 16.0753 11.9585 16.0837 11.9405C16.0921 11.9225 16.1048 11.9068 16.1207 11.8949L24.1719 7.25025C25.4053 6.53903 26.8158 6.19376 28.2383 6.25482C29.6608 6.31589 31.0364 6.78077 32.2044 7.59508C33.3723 8.40939 34.2842 9.53945 34.8334 10.8531C35.3826 12.1667 35.5464 13.6095 35.3055 15.0128ZM14.2424 21.9419L10.8752 19.9981C10.8576 19.9893 10.8423 19.9763 10.8309 19.9602C10.8195 19.9441 10.8122 19.9254 10.8098 19.9058V10.6071C10.8107 9.18295 11.2173 7.78848 11.9819 6.58696C12.7466 5.38544 13.8377 4.42659 15.1275 3.82264C16.4173 3.21869 17.8524 2.99464 19.2649 3.1767C20.6775 3.35876 22.0089 3.93941 23.1034 4.85067C23.0427 4.88379 22.937 4.94215 22.8668 4.98473L14.9024 9.58517C14.7025 9.69878 14.5366 9.86356 14.4215 10.0626C14.3065 10.2616 14.2466 10.4877 14.2479 10.7175L14.2424 21.9419ZM16.071 17.9991L20.4018 15.4978L24.7325 17.9975V22.9985L20.4018 25.4983L16.071 22.9985V17.9991Z"
diff --git a/client/src/utils/index.js b/client/src/utils/index.js
index 67428a7e94..4231b0c441 100644
--- a/client/src/utils/index.js
+++ b/client/src/utils/index.js
@@ -1,5 +1,8 @@
 import { clsx } from 'clsx';
+import React from 'react';
 import { twMerge } from 'tailwind-merge';
+import GPTIcon from '../components/svg/GPTIcon';
+import BingIcon from '../components/svg/BingIcon';
 
 export function cn(...inputs) {
   return twMerge(clsx(inputs));
@@ -42,3 +45,57 @@ export const wrapperRegex = {
   languageMatch: /^```(\w+)/,
   newLineMatch: /^```(\n+)/
 };
+
+export const getIconOfModel = ({ size=30, sender, isCreatedByUser, model, chatGptLabel, error, ...props }) => {
+  const bgColors = {
+    chatgpt: 'rgb(16, 163, 127)',
+    chatgptBrowser: 'rgb(25, 207, 207)',
+    bingai: 'transparent',
+    sydney: 'radial-gradient(circle at 90% 110%, #F0F0FA, #D0E0F9)',
+    chatgptCustom: 'rgb(0, 163, 255)',
+  };
+
+  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 }}
+        className={`relative flex h-[${size}px] w-[${size}px] items-center justify-center rounded-sm p-1 text-white ` + props?.className}
+      >
+        User
+      </div>
+    )
+  else if (!isCreatedByUser) {
+    // TODO: use model from convo, rather than submit
+    // const { model, chatGptLabel, promptPrefix } = convo;
+    console.log(model, chatGptLabel)
+    let background = bgColors[model];
+    const isBing = model === 'bingai' || model === 'sydney';
+  
+    return (
+      <div
+        title={chatGptLabel || model}
+        style={
+          { background } || { background: 'radial-gradient(circle at 90% 110%, #F0F0FA, #D0E0F9)' }
+        }
+        className={`relative flex h-[${size}px] w-[${size}px] items-center justify-center rounded-sm p-1 text-white ` + props?.className}
+      >
+        {isBing ? <BingIcon size={size} /> : <GPTIcon size={size} />}
+        {error && (
+          <span className="absolute right-0 top-[20px] -mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white">
+            !
+          </span>
+        )}
+      </div>
+    );
+  } 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 }}
+        className={`relative flex h-[${size}px] w-[${size}px] items-center justify-center rounded-sm p-1 text-white ` + props?.className}
+      >
+        {chatGptLabel}
+      </div>
+    )
+}

From 45ca0a8713904694cd5378d9e07347c3bcab6a48 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Wed, 15 Mar 2023 14:42:39 +0800
Subject: [PATCH 40/47] fix: gptCustom icon should show as same in model and
 message

---
 client/src/components/Models/MenuItems.jsx |  2 +-
 client/src/components/Models/ModelItem.jsx |  4 ++--
 client/src/store/modelSlice.js             | 18 ++++++++++++------
 client/src/utils/index.js                  |  1 -
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Models/MenuItems.jsx b/client/src/components/Models/MenuItems.jsx
index 23e54633cd..d0a277ea9e 100644
--- a/client/src/components/Models/MenuItems.jsx
+++ b/client/src/components/Models/MenuItems.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import ModelItem from './ModelItem';
 
 export default function MenuItems({ models, onSelect }) {
-  console.log(models)
   return (
     <>
       {models.map((modelItem) => (
@@ -11,6 +10,7 @@ export default function MenuItems({ models, onSelect }) {
           id={modelItem._id}
           modelName={modelItem.name}
           value={modelItem.value}
+          model={modelItem.model || 'chatgptCustom'}
           onSelect={onSelect}
           chatGptLabel={modelItem.chatGptLabel}
           promptPrefix={modelItem.promptPrefix}
diff --git a/client/src/components/Models/ModelItem.jsx b/client/src/components/Models/ModelItem.jsx
index e6153e8002..163c4206fd 100644
--- a/client/src/components/Models/ModelItem.jsx
+++ b/client/src/components/Models/ModelItem.jsx
@@ -9,7 +9,7 @@ import TrashIcon from '../svg/TrashIcon';
 import manualSWR from '~/utils/fetchers';
 import { getIconOfModel } from '../../utils';
 
-export default function ModelItem({ modelName, value, onSelect, id, chatGptLabel, promptPrefix }) {
+export default function ModelItem({ modelName, value, model, onSelect, id, chatGptLabel, promptPrefix }) {
   const dispatch = useDispatch();
   const { customModel } = useSelector((state) => state.submit);
   const { initial } = useSelector((state) => state.models);
@@ -28,7 +28,7 @@ export default function ModelItem({ modelName, value, onSelect, id, chatGptLabel
     dispatch(setModels(fetchedModels));
   });
 
-  const icon = getIconOfModel({ size: 16, sender: modelName, isCreatedByUser: false, model: value, chatGptLabel, promptPrefix, error: false, className: "mr-2" });
+  const icon = getIconOfModel({ size: 16, sender: modelName, isCreatedByUser: false, model, chatGptLabel, promptPrefix, error: false, className: "mr-2" });
 
   if (value === 'chatgptCustom') {
     return (
diff --git a/client/src/store/modelSlice.js b/client/src/store/modelSlice.js
index bc34673bfc..7caefdc548 100644
--- a/client/src/store/modelSlice.js
+++ b/client/src/store/modelSlice.js
@@ -5,27 +5,32 @@ const initialState = {
     {
       _id: '0',
       name: 'ChatGPT',
-      value: 'chatgpt'
+      value: 'chatgpt',
+      model: 'chatgpt'
     },
     {
       _id: '1',
       name: 'CustomGPT',
-      value: 'chatgptCustom'
+      value: 'chatgptCustom',
+      model: 'chatgptCustom'
     },
     {
       _id: '2',
       name: 'BingAI',
-      value: 'bingai'
+      value: 'bingai',
+      model: 'bingai'
     },
     {
       _id: '3',
       name: 'Sydney',
-      value: 'sydney'
+      value: 'sydney',
+      model: 'sydney'
     },
     {
       _id: '4',
       name: 'ChatGPT',
-      value: 'chatgptBrowser'
+      value: 'chatgptBrowser',
+      model: 'chatgptBrowser'
     },
   ],
   modelMap: {},
@@ -45,7 +50,8 @@ const currentSlice = createSlice({
       models.slice(initialState.models.length).forEach((modelItem) => {
         modelMap[modelItem.value] = {
           chatGptLabel: modelItem.chatGptLabel,
-          promptPrefix: modelItem.promptPrefix
+          promptPrefix: modelItem.promptPrefix,
+          model: 'chatgptCustom'
         };
       });
 
diff --git a/client/src/utils/index.js b/client/src/utils/index.js
index 4231b0c441..a48f2ff3c8 100644
--- a/client/src/utils/index.js
+++ b/client/src/utils/index.js
@@ -68,7 +68,6 @@ export const getIconOfModel = ({ size=30, sender, isCreatedByUser, model, chatGp
   else if (!isCreatedByUser) {
     // TODO: use model from convo, rather than submit
     // const { model, chatGptLabel, promptPrefix } = convo;
-    console.log(model, chatGptLabel)
     let background = bgColors[model];
     const isBing = model === 'bingai' || model === 'sydney';
   

From 96ca7835172c6c0d38ef81bc62b10f5f3bb0a3cf Mon Sep 17 00:00:00 2001
From: Danny Avila <messagedaniel@protonmail.com>
Date: Wed, 15 Mar 2023 10:42:45 -0400
Subject: [PATCH 41/47] chore: re-organize message modules, fix icon size,
 convo reset properly rebuilds Tree

---
 .gitignore                                    |  1 -
 client/src/App.jsx                            |  3 +-
 client/src/components/Main/TextChat.jsx       |  8 +-
 client/src/components/Messages/Message.jsx    | 45 ++---------
 .../src/components/Messages/MultiMessage.jsx  | 40 ++++++++++
 client/src/components/Messages/index.jsx      | 76 ++++++++-----------
 client/src/store/messageSlice.js              |  3 +
 client/src/utils/buildTree.js                 | 17 +++++
 8 files changed, 103 insertions(+), 90 deletions(-)
 create mode 100644 client/src/components/Messages/MultiMessage.jsx
 create mode 100644 client/src/utils/buildTree.js

diff --git a/.gitignore b/.gitignore
index fa70c3c4c4..e201974879 100644
--- a/.gitignore
+++ b/.gitignore
@@ -47,7 +47,6 @@ bower_components/
 .env
 cache.json
 api/data/
-.eslintrc.js
 owner.yml
 archive
 .vscode/settings.json
diff --git a/client/src/App.jsx b/client/src/App.jsx
index 9bab1f5939..5f1446fd0b 100644
--- a/client/src/App.jsx
+++ b/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} />
diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index 3671833ef0..e0363cd8b1 100644
--- a/client/src/components/Main/TextChat.jsx
+++ b/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,
diff --git a/client/src/components/Messages/Message.jsx b/client/src/components/Messages/Message.jsx
index cfda8e524f..af60fc1a9a 100644
--- a/client/src/components/Messages/Message.jsx
+++ b/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>
             ) : (
diff --git a/client/src/components/Messages/MultiMessage.jsx b/client/src/components/Messages/MultiMessage.jsx
new file mode 100644
index 0000000000..24ab761eb6
--- /dev/null
+++ b/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}
+    />
+  );
+}
diff --git a/client/src/components/Messages/index.jsx b/client/src/components/Messages/index.jsx
index 85c671d691..eaf0a0cb6d 100644
--- a/client/src/components/Messages/index.jsx
+++ b/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>
diff --git a/client/src/store/messageSlice.js b/client/src/store/messageSlice.js
index 137c329822..955d0c98f8 100644
--- a/client/src/store/messageSlice.js
+++ b/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 = [
diff --git a/client/src/utils/buildTree.js b/client/src/utils/buildTree.js
new file mode 100644
index 0000000000..a030509bca
--- /dev/null
+++ b/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;
+}
\ No newline at end of file

From 2fd50c99b83978ce6420aadc01cdbfe84bd0ba2c Mon Sep 17 00:00:00 2001
From: Danny Avila <messagedaniel@protonmail.com>
Date: Wed, 15 Mar 2023 12:47:30 -0400
Subject: [PATCH 42/47] fix: debounce title request and handle error with
 default title

---
 api/app/titleConvo.js                    | 39 +++++++++++++--------
 api/server/routes/ask.js                 | 44 +++++-------------------
 api/server/routes/askBing.js             | 18 +++++-----
 api/server/routes/askSydney.js           | 18 +++++-----
 api/server/routes/convos.js              | 29 ----------------
 api/server/routes/handlers.js            | 21 +++++++++--
 client/src/components/Messages/index.jsx |  1 -
 7 files changed, 70 insertions(+), 100 deletions(-)

diff --git a/api/app/titleConvo.js b/api/app/titleConvo.js
index 88e8c75074..344af6f893 100644
--- a/api/app/titleConvo.js
+++ b/api/app/titleConvo.js
@@ -1,4 +1,5 @@
 const { Configuration, OpenAIApi } = require('openai');
+const _ = require('lodash');
 
 const proxyEnvToAxiosProxy = (proxyString) => {
   if (!proxyString) return null;
@@ -11,29 +12,37 @@ const proxyEnvToAxiosProxy = (proxyString) => {
     port: port ? parseInt(port) : undefined,
     auth: username && password ? { username, password } : undefined
   };
-  
-  return proxyConfig
-}
+
+  return proxyConfig;
+};
 
 const titleConvo = async ({ message, response, model }) => {
   const configuration = new Configuration({
     apiKey: process.env.OPENAI_KEY
   });
   const openai = new OpenAIApi(configuration);
-  const completion = await openai.createChatCompletion({
-    model: 'gpt-3.5-turbo',
-    messages: [
-      {
-        role: 'system',
-        content:
-          'You are a title-generator with one job: giving a conversation, detect the language and titling the conversation provided by a user in title case, using the same language.'
-      },
-      { role: 'user', content: `In 5 words or less, summarize the conversation below with a title in title case using the language the user writes in. Don't refer to the participants of the conversation by name. Do not include punctuation or quotation marks. Your response should be in title case, exclusively containing the title. Conversation:\n\nUser: "${message}"\n\n${model}: "${response}"\n\nTitle: ` },
-    ]
-  }, { proxy: proxyEnvToAxiosProxy(process.env.PROXY || null) });
+  const completion = await openai.createChatCompletion(
+    {
+      model: 'gpt-3.5-turbo',
+      messages: [
+        {
+          role: 'system',
+          content:
+            'You are a title-generator with one job: giving a conversation, detect the language and titling the conversation provided by a user in title case, using the same language.'
+        },
+        {
+          role: 'user',
+          content: `In 5 words or less, summarize the conversation below with a title in title case using the language the user writes in. Don't refer to the participants of the conversation by name. Do not include punctuation or quotation marks. Your response should be in title case, exclusively containing the title. Conversation:\n\nUser: "${message}"\n\n${model}: "${response}"\n\nTitle: `
+        }
+      ]
+    },
+    { proxy: proxyEnvToAxiosProxy(process.env.PROXY || null) }
+  );
 
   //eslint-disable-next-line
   return completion.data.choices[0].message.content.replace(/["\.]/g, '');
 };
 
-module.exports = titleConvo;
+const debouncedTitleConvo = _.debounce(titleConvo, 500);
+
+module.exports = debouncedTitleConvo;
diff --git a/api/server/routes/ask.js b/api/server/routes/ask.js
index 265672db8b..1d497c86b8 100644
--- a/api/server/routes/ask.js
+++ b/api/server/routes/ask.js
@@ -3,15 +3,15 @@ const crypto = require('crypto');
 const router = express.Router();
 const askBing = require('./askBing');
 const askSydney = require('./askSydney');
-const {
-  titleConvo,
-  askClient,
-  browserClient,
-  customClient
-  // detectCode
-} = require('../../app/');
+const { askClient, browserClient, customClient } = require('../../app/');
 const { getConvo, saveMessage, getConvoTitle, saveConvo } = require('../../models');
-const { handleError, sendMessage, createOnProgress, handleText } = require('./handlers');
+const {
+  handleError,
+  sendMessage,
+  createOnProgress,
+  genTitle,
+  handleText
+} = require('./handlers');
 const { getMessages } = require('../../models/Message');
 
 router.use('/bing', askBing);
@@ -42,15 +42,6 @@ router.post('/', async (req, res) => {
     ...convo
   });
 
-  // if (model === 'chatgptCustom' && !chatGptLabel && conversationId) {
-  //   const convo = await getConvo({ conversationId });
-  //   if (convo) {
-  //     console.log('found convo for custom gpt', { convo })
-  //     chatGptLabel = convo.chatGptLabel;
-  //     promptPrefix = convo.promptPrefix;
-  //   }
-  // }
-
   await saveMessage(userMessage);
   await saveConvo({ ...userMessage, model, ...convo });
 
@@ -94,17 +85,6 @@ router.post('/regenerate', async (req, res) => {
       res
     });
   } else return handleError(res, { text: 'Parent message not found' });
-
-  // if (model === 'chatgptCustom' && !chatGptLabel && conversationId) {
-  //   const convo = await getConvo({ conversationId });
-  //   if (convo) {
-  //     console.log('found convo for custom gpt', { convo })
-  //     chatGptLabel = convo.chatGptLabel;
-  //     promptPrefix = convo.promptPrefix;
-  //   }
-  // }
-
-  // await saveConvo({ ...userMessage, model, chatGptLabel, promptPrefix });
 });
 
 const ask = async ({
@@ -212,13 +192,7 @@ const ask = async ({
     res.end();
 
     if (userParentMessageId == '00000000-0000-0000-0000-000000000000') {
-      const title = await titleConvo({
-        model,
-        message: text,
-        response: JSON.stringify(gptResponse?.text)
-      });
-
-      console.log('CONVERSATION TITLE', title);
+      const title = await genTitle({ model, text, response: gptResponse });
 
       await saveConvo({
         conversationId,
diff --git a/api/server/routes/askBing.js b/api/server/routes/askBing.js
index 066b64faec..681332ec37 100644
--- a/api/server/routes/askBing.js
+++ b/api/server/routes/askBing.js
@@ -1,9 +1,15 @@
 const express = require('express');
 const crypto = require('crypto');
 const router = express.Router();
-const { titleConvo, getCitations, citeText, askBing } = require('../../app/');
+const { getCitations, citeText, askBing } = require('../../app/');
 const { saveMessage, getConvoTitle, saveConvo } = require('../../models');
-const { handleError, sendMessage, createOnProgress, handleText } = require('./handlers');
+const {
+  handleError,
+  sendMessage,
+  createOnProgress,
+  genTitle,
+  handleText
+} = require('./handlers');
 const citationRegex = /\[\^\d+?\^]/g;
 
 router.post('/', async (req, res) => {
@@ -146,13 +152,7 @@ const ask = async ({
     res.end();
 
     if (userParentMessageId == '00000000-0000-0000-0000-000000000000') {
-      const title = await titleConvo({
-        model,
-        message: text,
-        response: JSON.stringify(response?.text)
-      });
-
-      console.log('CONVERSATION TITLE', title);
+      const title = await genTitle({ model, text, response });
 
       await saveConvo({
         conversationId,
diff --git a/api/server/routes/askSydney.js b/api/server/routes/askSydney.js
index 03e3479be4..40aa967bcc 100644
--- a/api/server/routes/askSydney.js
+++ b/api/server/routes/askSydney.js
@@ -1,9 +1,15 @@
 const express = require('express');
 const crypto = require('crypto');
 const router = express.Router();
-const { titleConvo, getCitations, citeText, askSydney } = require('../../app/');
+const { getCitations, citeText, askSydney } = require('../../app/');
 const { saveMessage, saveConvo, getConvoTitle } = require('../../models');
-const { handleError, sendMessage, createOnProgress, handleText } = require('./handlers');
+const {
+  handleError,
+  sendMessage,
+  createOnProgress,
+  genTitle,
+  handleText
+} = require('./handlers');
 const citationRegex = /\[\^\d+?\^]/g;
 
 router.post('/', async (req, res) => {
@@ -158,13 +164,7 @@ const ask = async ({
     res.end();
 
     if (userParentMessageId == '00000000-0000-0000-0000-000000000000') {
-      const title = await titleConvo({
-        model,
-        message: text,
-        response: JSON.stringify(response?.text)
-      });
-
-      console.log('CONVERSATION TITLE', title);
+      const title = await genTitle({ model, text, response });
 
       await saveConvo({
         conversationId,
diff --git a/api/server/routes/convos.js b/api/server/routes/convos.js
index 9a5f71cee3..99fb824708 100644
--- a/api/server/routes/convos.js
+++ b/api/server/routes/convos.js
@@ -1,41 +1,12 @@
 const express = require('express');
 const router = express.Router();
-const { titleConvo } = require('../../app/');
-const { getConvo, saveConvo, getConvoTitle } = require('../../models');
 const { getConvosByPage, deleteConvos, updateConvo } = require('../../models/Conversation');
-const { getMessages } = require('../../models/Message');
 
 router.get('/', async (req, res) => {
   const pageNumber = req.query.pageNumber || 1;
   res.status(200).send(await getConvosByPage(pageNumber));
 });
 
-router.post('/gen_title', async (req, res) => {
-  const { conversationId } = req.body.arg;
-
-  const convo = await getConvo(conversationId)
-  const firstMessage = (await getMessages({ conversationId }))[0]
-  const secondMessage = (await getMessages({ conversationId }))[1]
-
-  // if (convo.title == 'New Chat') {
-  //   const title = await titleConvo({
-  //                   model: convo?.model,
-  //                   message: firstMessage?.text,
-  //                   response: JSON.stringify(secondMessage?.text || '')
-  //                 });
-  
-  //   console.log('CONVERSATION TITLE', title);
-  
-  //   await saveConvo({
-  //     conversationId,
-  //     title
-  //   })
-  
-  //   res.status(200).send(title);
-  // } else 
-  return res.status(200).send(convo.title);
-});
-
 router.post('/clear', async (req, res) => {
   let filter = {};
   const { conversationId } = req.body.arg;
diff --git a/api/server/routes/handlers.js b/api/server/routes/handlers.js
index d3e613bccc..7c6d6ce315 100644
--- a/api/server/routes/handlers.js
+++ b/api/server/routes/handlers.js
@@ -1,4 +1,4 @@
-const { citeText, detectCode } = require('../../app/');
+const { titleConvo, citeText, detectCode } = require('../../app/');
 const _ = require('lodash');
 const sanitizeHtml = require('sanitize-html');
 
@@ -14,6 +14,23 @@ const sendMessage = (res, message) => {
   res.write(`event: message\ndata: ${JSON.stringify(message)}\n\n`);
 };
 
+const genTitle = async ({ model, text, response }) => {
+  let title = 'New Chat';
+  try {
+    title = await titleConvo({
+      model,
+      message: text,
+      response: JSON.stringify(response?.text)
+    });
+  } catch (e) {
+    console.error(e);
+    console.log('There was an issue generating title, see error above');
+  }
+
+  console.log('CONVERSATION TITLE', title);
+  return title;
+};
+
 const createOnProgress = () => {
   let i = 0;
   let tokens = '';
@@ -56,4 +73,4 @@ const handleText = async (input) => {
   return text;
 };
 
-module.exports = { handleError, sendMessage, createOnProgress, handleText };
\ No newline at end of file
+module.exports = { handleError, sendMessage, createOnProgress, genTitle, handleText };
diff --git a/client/src/components/Messages/index.jsx b/client/src/components/Messages/index.jsx
index eaf0a0cb6d..d9b5b2a80b 100644
--- a/client/src/components/Messages/index.jsx
+++ b/client/src/components/Messages/index.jsx
@@ -3,7 +3,6 @@ import Spinner from '../svg/Spinner';
 import { CSSTransition } from 'react-transition-group';
 import ScrollToBottom from './ScrollToBottom';
 import MultiMessage from './MultiMessage';
-import buildTree from '~/utils/buildTree';
 import { useSelector } from 'react-redux';
 
 const Messages = ({ messages, messageTree }) => {

From a8aad30fc8f4d6bc75347cf7898f91946d1a9aab Mon Sep 17 00:00:00 2001
From: Danny Avila <messagedaniel@protonmail.com>
Date: Wed, 15 Mar 2023 14:36:17 -0400
Subject: [PATCH 43/47] chore: memoized Messages component, will require custom
 equality check

---
 api/server/routes/handlers.js            | 21 +++++++++++++++------
 client/src/components/Messages/index.jsx |  2 +-
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/api/server/routes/handlers.js b/api/server/routes/handlers.js
index 7c6d6ce315..e3bd72583f 100644
--- a/api/server/routes/handlers.js
+++ b/api/server/routes/handlers.js
@@ -1,6 +1,7 @@
-const { titleConvo, citeText, detectCode } = require('../../app/');
 const _ = require('lodash');
 const sanitizeHtml = require('sanitize-html');
+const { titleConvo, citeText, detectCode } = require('../../app/');
+const htmlTagRegex = /(<\/?\s*[a-zA-Z]*\s*(?:\s+[a-zA-Z]+\s*=\s*(?:"[^"]*"|'[^']*'))*\s*(?:\/?)>|<\s*[a-zA-Z]+\s*(?:\s+[a-zA-Z]+\s*=\s*(?:"[^"]*"|'[^']*'))*\s*(?:\/?>|<\/?>))/g;
 
 const handleError = (res, message) => {
   res.write(`event: error\ndata: ${JSON.stringify(message)}\n\n`);
@@ -42,8 +43,13 @@ const createOnProgress = () => {
     if (tokens.match(/^\n/)) {
       tokens = tokens.replace(/^\n/, '');
     }
-    // if (tokens.includes('```')) {
-    //   tokens = sanitizeHtml(tokens);
+
+    // const htmlTags = tokens.match(htmlTagRegex);
+    // if (tokens.includes('```') && htmlTags && htmlTags.length > 0) {
+    //   htmlTags.forEach((tag) => {
+    //     const sanitizedTag = sanitizeHtml(tag);
+    //     tokens = tokens.replaceAll(tag, sanitizedTag);
+    //   });
     // }
 
     if (bing) {
@@ -65,9 +71,12 @@ const createOnProgress = () => {
 const handleText = async (input) => {
   let text = input;
   text = await detectCode(text);
-  // if (text.includes('```')) {
-  //   text = sanitizeHtml(text);
-  //   text = text.replaceAll(') =&gt;', ') =>');
+  // const htmlTags = text.match(htmlTagRegex);
+  // if (text.includes('```') && htmlTags && htmlTags.length > 0) {
+  //   htmlTags.forEach((tag) => {
+  //     const sanitizedTag = sanitizeHtml(tag);
+  //     text = text.replaceAll(tag, sanitizedTag);
+  //   });
   // }
 
   return text;
diff --git a/client/src/components/Messages/index.jsx b/client/src/components/Messages/index.jsx
index d9b5b2a80b..611a0231d3 100644
--- a/client/src/components/Messages/index.jsx
+++ b/client/src/components/Messages/index.jsx
@@ -95,4 +95,4 @@ const Messages = ({ messages, messageTree }) => {
   );
 };
 
-export default Messages;
+export default React.memo(Messages);

From a0c94715ce99321441d0276e8733ca372d03ea42 Mon Sep 17 00:00:00 2001
From: Danny Avila <messagedaniel@protonmail.com>
Date: Wed, 15 Mar 2023 15:21:04 -0400
Subject: [PATCH 44/47] chore: refactor titleConvo

---
 api/app/titleConvo.js          | 63 ++++++++++++++++++++--------------
 api/server/routes/ask.js       | 12 ++-----
 api/server/routes/askBing.js   | 12 ++-----
 api/server/routes/askSydney.js | 12 ++-----
 api/server/routes/handlers.js  | 19 +---------
 5 files changed, 47 insertions(+), 71 deletions(-)

diff --git a/api/app/titleConvo.js b/api/app/titleConvo.js
index 344af6f893..e37fcb3b0c 100644
--- a/api/app/titleConvo.js
+++ b/api/app/titleConvo.js
@@ -16,33 +16,44 @@ const proxyEnvToAxiosProxy = (proxyString) => {
   return proxyConfig;
 };
 
-const titleConvo = async ({ message, response, model }) => {
-  const configuration = new Configuration({
-    apiKey: process.env.OPENAI_KEY
-  });
-  const openai = new OpenAIApi(configuration);
-  const completion = await openai.createChatCompletion(
-    {
-      model: 'gpt-3.5-turbo',
-      messages: [
-        {
-          role: 'system',
-          content:
-            'You are a title-generator with one job: giving a conversation, detect the language and titling the conversation provided by a user in title case, using the same language.'
-        },
-        {
-          role: 'user',
-          content: `In 5 words or less, summarize the conversation below with a title in title case using the language the user writes in. Don't refer to the participants of the conversation by name. Do not include punctuation or quotation marks. Your response should be in title case, exclusively containing the title. Conversation:\n\nUser: "${message}"\n\n${model}: "${response}"\n\nTitle: `
-        }
-      ]
-    },
-    { proxy: proxyEnvToAxiosProxy(process.env.PROXY || null) }
-  );
+const titleConvo = async ({ model, text, response }) => {
+  let title = 'New Chat';
+  try {
+    const configuration = new Configuration({
+      apiKey: process.env.OPENAI_KEY
+    });
+    const openai = new OpenAIApi(configuration);
+    const completion = await openai.createChatCompletion(
+      {
+        model: 'gpt-3.5-turbo',
+        messages: [
+          {
+            role: 'system',
+            content:
+              'You are a title-generator with one job: giving a conversation, detect the language and titling the conversation provided by a user in title case, using the same language.'
+          },
+          {
+            role: 'user',
+            content: `In 5 words or less, summarize the conversation below with a title in title case using the language the user writes in. Don't refer to the participants of the conversation by name. Do not include punctuation or quotation marks. Your response should be in title case, exclusively containing the title. Conversation:\n\nUser: "${text}"\n\n${model}: "${JSON.stringify(
+              response?.text
+            )}"\n\nTitle: `
+          }
+        ]
+      },
+      { proxy: proxyEnvToAxiosProxy(process.env.PROXY || null) }
+    );
 
-  //eslint-disable-next-line
-  return completion.data.choices[0].message.content.replace(/["\.]/g, '');
+    //eslint-disable-next-line
+    title = completion.data.choices[0].message.content.replace(/["\.]/g, '');
+  } catch (e) {
+    console.error(e);
+    console.log('There was an issue generating title, see error above');
+  }
+
+  console.log('CONVERSATION TITLE', title);
+  return title;
 };
 
-const debouncedTitleConvo = _.debounce(titleConvo, 500);
+const throttledTitleConvo = _.throttle(titleConvo, 1000);
 
-module.exports = debouncedTitleConvo;
+module.exports = throttledTitleConvo;
diff --git a/api/server/routes/ask.js b/api/server/routes/ask.js
index 1d497c86b8..69c180c8a7 100644
--- a/api/server/routes/ask.js
+++ b/api/server/routes/ask.js
@@ -3,15 +3,9 @@ const crypto = require('crypto');
 const router = express.Router();
 const askBing = require('./askBing');
 const askSydney = require('./askSydney');
-const { askClient, browserClient, customClient } = require('../../app/');
+const { titleConvo, askClient, browserClient, customClient } = require('../../app/');
 const { getConvo, saveMessage, getConvoTitle, saveConvo } = require('../../models');
-const {
-  handleError,
-  sendMessage,
-  createOnProgress,
-  genTitle,
-  handleText
-} = require('./handlers');
+const { handleError, sendMessage, createOnProgress, handleText } = require('./handlers');
 const { getMessages } = require('../../models/Message');
 
 router.use('/bing', askBing);
@@ -192,7 +186,7 @@ const ask = async ({
     res.end();
 
     if (userParentMessageId == '00000000-0000-0000-0000-000000000000') {
-      const title = await genTitle({ model, text, response: gptResponse });
+      const title = await titleConvo({ model, text, response: gptResponse });
 
       await saveConvo({
         conversationId,
diff --git a/api/server/routes/askBing.js b/api/server/routes/askBing.js
index 681332ec37..aa052c31d7 100644
--- a/api/server/routes/askBing.js
+++ b/api/server/routes/askBing.js
@@ -1,15 +1,9 @@
 const express = require('express');
 const crypto = require('crypto');
 const router = express.Router();
-const { getCitations, citeText, askBing } = require('../../app/');
+const { titleConvo, getCitations, citeText, askBing } = require('../../app/');
 const { saveMessage, getConvoTitle, saveConvo } = require('../../models');
-const {
-  handleError,
-  sendMessage,
-  createOnProgress,
-  genTitle,
-  handleText
-} = require('./handlers');
+const { handleError, sendMessage, createOnProgress, handleText } = require('./handlers');
 const citationRegex = /\[\^\d+?\^]/g;
 
 router.post('/', async (req, res) => {
@@ -152,7 +146,7 @@ const ask = async ({
     res.end();
 
     if (userParentMessageId == '00000000-0000-0000-0000-000000000000') {
-      const title = await genTitle({ model, text, response });
+      const title = await titleConvo({ model, text, response });
 
       await saveConvo({
         conversationId,
diff --git a/api/server/routes/askSydney.js b/api/server/routes/askSydney.js
index 40aa967bcc..7fecc2a450 100644
--- a/api/server/routes/askSydney.js
+++ b/api/server/routes/askSydney.js
@@ -1,15 +1,9 @@
 const express = require('express');
 const crypto = require('crypto');
 const router = express.Router();
-const { getCitations, citeText, askSydney } = require('../../app/');
+const { titleConvo, getCitations, citeText, askSydney } = require('../../app/');
 const { saveMessage, saveConvo, getConvoTitle } = require('../../models');
-const {
-  handleError,
-  sendMessage,
-  createOnProgress,
-  genTitle,
-  handleText
-} = require('./handlers');
+const { handleError, sendMessage, createOnProgress, handleText } = require('./handlers');
 const citationRegex = /\[\^\d+?\^]/g;
 
 router.post('/', async (req, res) => {
@@ -164,7 +158,7 @@ const ask = async ({
     res.end();
 
     if (userParentMessageId == '00000000-0000-0000-0000-000000000000') {
-      const title = await genTitle({ model, text, response });
+      const title = await titleConvo({ model, text, response });
 
       await saveConvo({
         conversationId,
diff --git a/api/server/routes/handlers.js b/api/server/routes/handlers.js
index e3bd72583f..31213f3080 100644
--- a/api/server/routes/handlers.js
+++ b/api/server/routes/handlers.js
@@ -15,23 +15,6 @@ const sendMessage = (res, message) => {
   res.write(`event: message\ndata: ${JSON.stringify(message)}\n\n`);
 };
 
-const genTitle = async ({ model, text, response }) => {
-  let title = 'New Chat';
-  try {
-    title = await titleConvo({
-      model,
-      message: text,
-      response: JSON.stringify(response?.text)
-    });
-  } catch (e) {
-    console.error(e);
-    console.log('There was an issue generating title, see error above');
-  }
-
-  console.log('CONVERSATION TITLE', title);
-  return title;
-};
-
 const createOnProgress = () => {
   let i = 0;
   let tokens = '';
@@ -82,4 +65,4 @@ const handleText = async (input) => {
   return text;
 };
 
-module.exports = { handleError, sendMessage, createOnProgress, genTitle, handleText };
+module.exports = { handleError, sendMessage, createOnProgress, handleText };

From 84b104e65fad1dfa328787ff03eeba554e680022 Mon Sep 17 00:00:00 2001
From: Danny Avila <messagedaniel@protonmail.com>
Date: Wed, 15 Mar 2023 15:44:48 -0400
Subject: [PATCH 45/47] chore: delegate response text parsing to one location

---
 api/server/routes/ask.js                      |  2 +-
 api/server/routes/askBing.js                  | 10 ++--------
 api/server/routes/askSydney.js                | 11 ++--------
 api/server/routes/handlers.js                 | 20 +++++++++++++++----
 .../src/components/Messages/TextWrapper.jsx   |  2 +-
 5 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/api/server/routes/ask.js b/api/server/routes/ask.js
index 69c180c8a7..ad2a7178c2 100644
--- a/api/server/routes/ask.js
+++ b/api/server/routes/ask.js
@@ -162,7 +162,7 @@ const ask = async ({
     gptResponse.sender = model === 'chatgptCustom' ? convo.chatGptLabel : model;
     gptResponse.model = model;
     // gptResponse.final = true;
-    gptResponse.text = await handleText(gptResponse.text);
+    gptResponse.text = await handleText(gptResponse);
 
     if (convo.chatGptLabel?.length > 0 && model === 'chatgptCustom') {
       gptResponse.chatGptLabel = convo.chatGptLabel;
diff --git a/api/server/routes/askBing.js b/api/server/routes/askBing.js
index aa052c31d7..cfbac77185 100644
--- a/api/server/routes/askBing.js
+++ b/api/server/routes/askBing.js
@@ -1,10 +1,9 @@
 const express = require('express');
 const crypto = require('crypto');
 const router = express.Router();
-const { titleConvo, getCitations, citeText, askBing } = require('../../app/');
+const { titleConvo, askBing } = require('../../app/');
 const { saveMessage, getConvoTitle, saveConvo } = require('../../models');
 const { handleError, sendMessage, createOnProgress, handleText } = require('./handlers');
-const citationRegex = /\[\^\d+?\^]/g;
 
 router.post('/', async (req, res) => {
   const {
@@ -129,12 +128,7 @@ const ask = async ({
     response.parentMessageId =
       overrideParentMessageId || response.parentMessageId || userMessageId;
 
-    const links = getCitations(response);
-    response.text =
-      citeText(response) +
-      (links?.length > 0 && hasCitations ? `\n<small>${links}</small>` : '');
-    response.text = await handleText(response.text);
-
+    response.text = await handleText(response, true);
     await saveMessage(response);
     await saveConvo({ ...response, model, chatGptLabel: null, promptPrefix: null, ...convo });
     sendMessage(res, {
diff --git a/api/server/routes/askSydney.js b/api/server/routes/askSydney.js
index 7fecc2a450..00f287fa7b 100644
--- a/api/server/routes/askSydney.js
+++ b/api/server/routes/askSydney.js
@@ -1,10 +1,9 @@
 const express = require('express');
 const crypto = require('crypto');
 const router = express.Router();
-const { titleConvo, getCitations, citeText, askSydney } = require('../../app/');
+const { titleConvo, askSydney } = require('../../app/');
 const { saveMessage, saveConvo, getConvoTitle } = require('../../models');
 const { handleError, sendMessage, createOnProgress, handleText } = require('./handlers');
-const citationRegex = /\[\^\d+?\^]/g;
 
 router.post('/', async (req, res) => {
   const {
@@ -97,7 +96,6 @@ const ask = async ({
 
     console.log('SYDNEY RESPONSE', response);
     // console.dir(response, { depth: null });
-    const hasCitations = response.response.match(citationRegex)?.length > 0;
 
     userMessage.conversationSignature =
       convo.conversationSignature || response.conversationSignature;
@@ -125,12 +123,6 @@ const ask = async ({
     response.parentMessageId =
       overrideParentMessageId || response.parentMessageId || userMessageId;
 
-    const links = getCitations(response);
-    response.text =
-      citeText(response) +
-      (links?.length > 0 && hasCitations ? `\n<small>${links}</small>` : '');
-    response.text = await handleText(response.text);
-
     // Save user message
     userMessage.conversationId = response.conversationId || conversationId;
     await saveMessage(userMessage);
@@ -146,6 +138,7 @@ const ask = async ({
       });
     conversationId = userMessage.conversationId;
 
+    response.text = await handleText(response, true);
     // Save sydney response & convo, then send
     await saveMessage(response);
     await saveConvo({ ...response, model, chatGptLabel: null, promptPrefix: null, ...convo });
diff --git a/api/server/routes/handlers.js b/api/server/routes/handlers.js
index 31213f3080..3ba4e81243 100644
--- a/api/server/routes/handlers.js
+++ b/api/server/routes/handlers.js
@@ -1,7 +1,8 @@
 const _ = require('lodash');
 const sanitizeHtml = require('sanitize-html');
-const { titleConvo, citeText, detectCode } = require('../../app/');
-const htmlTagRegex = /(<\/?\s*[a-zA-Z]*\s*(?:\s+[a-zA-Z]+\s*=\s*(?:"[^"]*"|'[^']*'))*\s*(?:\/?)>|<\s*[a-zA-Z]+\s*(?:\s+[a-zA-Z]+\s*=\s*(?:"[^"]*"|'[^']*'))*\s*(?:\/?>|<\/?>))/g;
+const citationRegex = /\[\^\d+?\^]/g;
+const { getCitations, citeText, detectCode } = require('../../app/');
+// const htmlTagRegex = /(<\/?\s*[a-zA-Z]*\s*(?:\s+[a-zA-Z]+\s*=\s*(?:"[^"]*"|'[^']*'))*\s*(?:\/?)>|<\s*[a-zA-Z]+\s*(?:\s+[a-zA-Z]+\s*=\s*(?:"[^"]*"|'[^']*'))*\s*(?:\/?>|<\/?>))/g;
 
 const handleError = (res, message) => {
   res.write(`event: error\ndata: ${JSON.stringify(message)}\n\n`);
@@ -51,9 +52,20 @@ const createOnProgress = () => {
   return onProgress;
 };
 
-const handleText = async (input) => {
-  let text = input;
+const handleText = async (response, bing = false) => {
+  let { text } = response;
   text = await detectCode(text);
+  response.text = text;
+
+  if (bing) {
+    // const hasCitations = response.response.match(citationRegex)?.length > 0;
+    const links = getCitations(response);
+    if (response.text.match(citationRegex)?.length > 0) {
+      text = citeText(response);
+    }
+    text += links?.length > 0 ? `\n<small>${links}</small>` : '';
+  }
+
   // const htmlTags = text.match(htmlTagRegex);
   // if (text.includes('```') && htmlTags && htmlTags.length > 0) {
   //   htmlTags.forEach((tag) => {
diff --git a/client/src/components/Messages/TextWrapper.jsx b/client/src/components/Messages/TextWrapper.jsx
index af38b56a5c..5719ee876b 100644
--- a/client/src/components/Messages/TextWrapper.jsx
+++ b/client/src/components/Messages/TextWrapper.jsx
@@ -142,7 +142,7 @@ export default function TextWrapper({ text }) {
     // map over the parts and wrap any text between tildes with <code> tags
     const parts = text.split(markupRegex);
     const codeParts = inLineWrap(parts);
-    return <>{codeParts}</>; // return the wrapped text
+    return <Markdown options={mdOptions}>{codeParts}</Markdown>; // return the wrapped text
   } else {
     return <Markdown options={mdOptions}>{text}</Markdown>;
   }

From 8c6340aed05b87784e43f9ae13c8b55efcf9dbba Mon Sep 17 00:00:00 2001
From: Danny Avila <messagedaniel@protonmail.com>
Date: Wed, 15 Mar 2023 16:38:01 -0400
Subject: [PATCH 46/47] chore: refactor cursor blink, debugging

---
 client/src/components/Messages/Message.jsx    | 179 +++++++++++-------
 .../src/components/Messages/TextWrapper.jsx   |  19 +-
 client/src/style.css                          |   1 -
 3 files changed, 121 insertions(+), 78 deletions(-)

diff --git a/client/src/components/Messages/Message.jsx b/client/src/components/Messages/Message.jsx
index af60fc1a9a..622b907454 100644
--- a/client/src/components/Messages/Message.jsx
+++ b/client/src/components/Messages/Message.jsx
@@ -1,10 +1,9 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import TextWrapper from './TextWrapper';
 import MultiMessage from './MultiMessage';
 import { useSelector, useDispatch } from 'react-redux';
 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';
@@ -22,21 +21,28 @@ export default function Message({
   siblingCount,
   setSiblingIdx
 }) {
-  const { isSubmitting, model, chatGptLabel, promptPrefix } = useSelector((state) => state.submit);
+  const { isSubmitting, model, chatGptLabel, promptPrefix } = useSelector(
+    (state) => state.submit
+  );
   const [abortScroll, setAbort] = useState(false);
-  const { sender, text, isCreatedByUser, error, submitting } = message
-  const textEditor = useRef(null)
+  const { sender, text, isCreatedByUser, error, submitting } = message;
+  const textEditor = useRef(null);
   const convo = useSelector((state) => state.convo);
   const { initial } = useSelector((state) => state.models);
   const { error: convoError } = convo;
-  const last = !message?.children?.length
-
+  const last = !message?.children?.length;
   const edit = message.messageId == currentEditId;
-
   const dispatch = useDispatch();
 
   // const notUser = !isCreatedByUser; // sender.toLowerCase() !== 'user';
   const blinker = submitting && isSubmitting && last && !isCreatedByUser;
+  const generateCursor = useCallback(() => {
+    if (!blinker) {
+      return '';
+    }
+
+    return <span className="result-streaming">█</span>;
+  }, [blinker]);
 
   useEffect(() => {
     if (blinker && !abortScroll) {
@@ -45,15 +51,10 @@ export default function Message({
   }, [isSubmitting, text, blinker, scrollToBottom, abortScroll]);
 
   useEffect(() => {
-    if (last)
-      dispatch(setConversation({parentMessageId: message?.messageId}))
-  }, [last, ])
+    if (last) dispatch(setConversation({ parentMessageId: message?.messageId }));
+  }, [last]);
 
-  // if (sender === '') {
-  //   return <Spinner />;
-  // }
-
-  const enterEdit = (cancel) => setCurrentEditId(cancel?-1:message.messageId)
+  const enterEdit = (cancel) => setCurrentEditId(cancel ? -1 : message.messageId);
 
   const handleWheel = () => {
     if (blinker) {
@@ -67,17 +68,24 @@ export default function Message({
     className:
       'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 bg-white dark:text-gray-100 group dark:bg-gray-800'
   };
-  
-  const icon = getIconOfModel({ sender, isCreatedByUser, model, chatGptLabel, promptPrefix, error });
-  
+
+  const icon = getIconOfModel({
+    sender,
+    isCreatedByUser,
+    model,
+    chatGptLabel,
+    promptPrefix,
+    error
+  });
+
   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]';
 
-  const wrapText = (text) => <TextWrapper text={text} />;
+  // const wrapText = (text) => <TextWrapper text={text} generateCursor={generateCursor}/>;
 
   const resubmitMessage = () => {
-    const text = textEditor.current.innerText
+    const text = textEditor.current.innerText;
 
     if (convoError) {
       dispatch(setError(false));
@@ -90,14 +98,23 @@ export default function Message({
     // 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 = { 
-      sender: 'User', text: text.trim(), current: true, isCreatedByUser: true, 
-      parentMessageId: message?.parentMessageId, 
-      conversationId: message?.conversationId, 
-      messageId: fakeMessageId };
+    const currentMsg = {
+      sender: 'User',
+      text: text.trim(),
+      current: true,
+      isCreatedByUser: true,
+      parentMessageId: message?.parentMessageId,
+      conversationId: message?.conversationId,
+      messageId: fakeMessageId
+    };
     const sender = model === 'chatgptCustom' ? chatGptLabel : model;
 
-    const initialResponse = { sender, text: '', parentMessageId: fakeMessageId, submitting: true };
+    const initialResponse = {
+      sender,
+      text: '',
+      parentMessageId: fakeMessageId,
+      submitting: true
+    };
 
     dispatch(setSubmitState(true));
     dispatch(setMessages([...messages, currentMsg, initialResponse]));
@@ -105,22 +122,22 @@ export default function Message({
 
     const submission = {
       isCustomModel,
-      message: { 
-        ...currentMsg, 
+      message: {
+        ...currentMsg,
         model,
         chatGptLabel,
-        promptPrefix,
+        promptPrefix
       },
       messages: messages,
       currentMsg,
       initialResponse,
-      sender,
+      sender
     };
     console.log('User Input:', currentMsg?.text);
     // handleSubmit(submission);
     dispatch(setSubmission(submission));
 
-    setSiblingIdx(siblingCount - 1)
+    setSiblingIdx(siblingCount - 1);
     enterEdit(true);
   };
 
@@ -131,68 +148,84 @@ export default function Message({
         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 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>
             ) : (
               icon
             )}
-            <SiblingSwitch siblingIdx={siblingIdx} siblingCount={siblingCount} setSiblingIdx={setSiblingIdx} />
+            <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="flex flex min-h-[20px] flex-grow flex-col 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">
                     {`An error occurred. Please try again in a few moments.\n\nError message: ${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}>
-                      {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>
+              ) : edit ? (
+                <div className="flex min-h-[20px] flex-grow flex-col 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="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 className="mt-2 flex w-full justify-center text-center">
+                    <button
+                      className="btn btn-primary relative mr-2"
+                      disabled={isSubmitting}
+                      onClick={resubmitMessage}
+                    >
+                      Save & Submit
+                    </button>
+                    <button
+                      className="btn btn-neutral relative"
+                      onClick={() => enterEdit(true)}
+                    >
+                      Cancel
+                    </button>
                   </div>
-                )}
+                </div>
+              ) : (
+                <div className="flex min-h-[20px] flex-grow flex-col 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 ? (
+                      <TextWrapper
+                        text={text}
+                        generateCursor={generateCursor}
+                      />
+                    ) : (
+                      text
+                    )}
+                  </div>
+                </div>
+              )}
             </div>
-              <HoverButtons model={model} visible={!error && isCreatedByUser && !edit} onClick={() => enterEdit()}/>
+            <HoverButtons
+              model={model}
+              visible={!error && isCreatedByUser && !edit}
+              onClick={() => enterEdit()}
+            />
           </div>
         </div>
       </div>
       <MultiMessage
-          messageList={message.children}
-          messages={messages}
-          scrollToBottom={scrollToBottom}
-          currentEditId={currentEditId}
-          setCurrentEditId={setCurrentEditId}
+        messageList={message.children}
+        messages={messages}
+        scrollToBottom={scrollToBottom}
+        currentEditId={currentEditId}
+        setCurrentEditId={setCurrentEditId}
       />
     </>
   );
diff --git a/client/src/components/Messages/TextWrapper.jsx b/client/src/components/Messages/TextWrapper.jsx
index 5719ee876b..75766bca0c 100644
--- a/client/src/components/Messages/TextWrapper.jsx
+++ b/client/src/components/Messages/TextWrapper.jsx
@@ -46,8 +46,9 @@ const inLineWrap = (parts) => {
   });
 };
 
-export default function TextWrapper({ text }) {
+export default function TextWrapper({ text, generateCursor }) {
   let embedTest = false;
+  let result = null;
 
   // to match unenclosed code blocks
   if (text.match(/```/g)?.length === 1) {
@@ -137,13 +138,23 @@ export default function TextWrapper({ text }) {
       }
     });
 
-    return <>{codeParts}</>; // return the wrapped text
+    // return <>{codeParts}</>; // return the wrapped text
+    result = <>{codeParts}</>;
   } else if (text.match(markupRegex)) {
     // map over the parts and wrap any text between tildes with <code> tags
     const parts = text.split(markupRegex);
     const codeParts = inLineWrap(parts);
-    return <Markdown options={mdOptions}>{codeParts}</Markdown>; // return the wrapped text
+    // return <>{codeParts}</>; // return the wrapped text
+    result = <>{codeParts}</>;
   } else {
-    return <Markdown options={mdOptions}>{text}</Markdown>;
+    // return <Markdown options={mdOptions}>{text}</Markdown>;
+    result = <Markdown options={mdOptions}>{text}</Markdown>;
   }
+
+  return (
+    <>
+    {result}
+    {(<>{generateCursor()}</>)}
+    </>
+  );
 }
diff --git a/client/src/style.css b/client/src/style.css
index c4a03408b7..30fae19b40 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -1251,7 +1251,6 @@ html {
   vertical-align: baseline;
 }
 
-
 /* .result-streaming>:not(ol):not(ul):not(pre):last-child:after,
 .result-streaming>ol:last-child li:last-child:after,
 .result-streaming>pre:last-child code:after,

From d052d221dc3c102979f9df017d7cc78e193c0998 Mon Sep 17 00:00:00 2001
From: Daniel Avila <messagedaniel@protonmail.com>
Date: Wed, 15 Mar 2023 18:05:34 -0400
Subject: [PATCH 47/47] chore: switch focus to textarea when custom model
 change (still need to figure out reg model change)

---
 client/src/components/Main/TextChat.jsx        |  4 ++--
 client/src/components/Messages/TextWrapper.jsx |  2 +-
 client/src/components/Models/ModelMenu.jsx     | 11 ++++-------
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index e0363cd8b1..0de24e7f52 100644
--- a/client/src/components/Main/TextChat.jsx
+++ b/client/src/components/Main/TextChat.jsx
@@ -28,7 +28,7 @@ export default function TextChat({ messages }) {
   // auto focus to input, when enter a conversation.
   useEffect(() => {
     inputRef.current?.focus();
-  }, [convo?.conversationId, ])
+  }, [convo?.conversationId,])
 
   const messageHandler = (data, currentState, currentMsg) => {
     const { messages, _currentMsg, message, sender } = currentState;
@@ -185,11 +185,11 @@ export default function TextChat({ messages }) {
       sender,
     };
     console.log('User Input:', message);
-    // handleSubmit(submission);
     dispatch(setSubmission(submission));
   };
 
   useEffect(() => {
+    inputRef.current?.focus();
     if (Object.keys(submission).length === 0) {
       return;
     }
diff --git a/client/src/components/Messages/TextWrapper.jsx b/client/src/components/Messages/TextWrapper.jsx
index 75766bca0c..3cfd0a1b37 100644
--- a/client/src/components/Messages/TextWrapper.jsx
+++ b/client/src/components/Messages/TextWrapper.jsx
@@ -154,7 +154,7 @@ export default function TextWrapper({ text, generateCursor }) {
   return (
     <>
     {result}
-    {(<>{generateCursor()}</>)}
+    {generateCursor()}
     </>
   );
 }
diff --git a/client/src/components/Models/ModelMenu.jsx b/client/src/components/Models/ModelMenu.jsx
index 4e47ccbb1b..3e3333a7cc 100644
--- a/client/src/components/Models/ModelMenu.jsx
+++ b/client/src/components/Models/ModelMenu.jsx
@@ -65,14 +65,13 @@ export default function ModelMenu() {
     localStorage.setItem('model', JSON.stringify(model));
   }, [model]);
 
-  const onChange = (value, custom = false) => {
+  const onChange = (value) => {
     if (!value) {
       return;
     } else if (value === model) {
       return;
     } else if (value === 'chatgptCustom') {
-      // dispatch(setMessages([]));
-      return;
+      // return;
     } else if (initial[value]) {
       dispatch(setModel(value));
       dispatch(setDisabled(false));
@@ -84,9 +83,7 @@ export default function ModelMenu() {
       dispatch(setCustomGpt({ chatGptLabel, promptPrefix }));
       dispatch(setModel('chatgptCustom'));
       dispatch(setCustomModel(value));
-      // if (custom) {
-      //   setMenuOpen((prevOpen) => !prevOpen);
-      // }
+      setMenuOpen(false);
     } else if (!modelMap[value]) {
       dispatch(setCustomModel(null));
     }
@@ -160,7 +157,7 @@ export default function ModelMenu() {
             {icon}
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-56 dark:bg-gray-700">
+        <DropdownMenuContent className="w-56 dark:bg-gray-700" onCloseAutoFocus={(event) => event.preventDefault()}>
           <DropdownMenuLabel className="dark:text-gray-300">Select a Model</DropdownMenuLabel>
           <DropdownMenuSeparator />
           <DropdownMenuRadioGroup