Merge pull request #88 from wtlyu/feat-clean-after-regenerate-pr

Feat clean after regenerate pr

.gitignore

@@ -33,6 +33,7 @@ client/public/main.js.LICENSE.txt
 # Deployed apps should consider commenting these lines out:
 # see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
 node_modules/
+meili_data/
 api/node_modules/
 client/node_modules/
 bower_components/

README.md

@@ -8,6 +8,18 @@ https://user-images.githubusercontent.com/110412045/223754183-8b7f45ce-6517-4bd5
 
 ## Updates
 <details open>
+<summary><strong>2023-03-16</strong></summary>
+
+
+
+[Latest release (v0.0.4)](https://github.com/danny-avila/chatgpt-clone/releases/tag/v0.0.4) includes Resubmitting messages & Branching messages, which mirrors official ChatGPT feature of editing a sent message, that then branches the conversation into separate message paths (works only with ChatGPT)
+
+Full details and [example here](https://github.com/danny-avila/chatgpt-clone/releases/tag/v0.0.4). Message search is on the docket
+
+</details>
+
+<details>
+<details>
 <summary><strong>2023-03-12</strong></summary>
 
 
@@ -22,8 +34,6 @@ Many improvements across the board, the biggest is being able to start conversat
 
 Adding support for conversation search is next! Thank you [mysticaltech](https://github.com/mysticaltech) for bringing up a method I can use for this.
 </details>
-
-<details>
 <details>
 <summary><strong>2023-03-09</strong></summary>
 Released v.0.0.2
@@ -84,6 +94,7 @@ Currently, this project is only functional with the `text-davinci-003` model.
     - [Docker](#docker)
     - [Access Tokens](#access-tokens)
     - [Proxy](#proxy)
+    - [User System](#user-system)
     - [Updating](#updating)
   - [Use Cases](#use-cases)
   - [Origin](#origin)
@@ -111,12 +122,12 @@ Here are my recently completed and planned features:
 - [x] Server convo pagination (limit fetch and load more with 'show more' button)
 - [x] Config file for easy startup (docker compose)
 - [x] Mobile styling (thanks to [wtlyu](https://github.com/wtlyu))
-- [ ] Bing AI Styling (for suggested responses, convo end, etc.) - **In progress**
+- [x] Resubmit/edit sent messages (thanks to [wtlyu](https://github.com/wtlyu))
+- [ ] Message Search
+- [ ] Custom params for ChatGPT API (temp, top_p, presence_penalty)
+- [ ] Bing AI Styling (params, suggested responses, convo end, etc.) - **In progress**
 - [ ] Add warning before clearing convos
 - [ ] Build test suite for CI/CD
-- [ ] Conversation Search (by title)
-- [ ] Resubmit/edit sent messages
-- [ ] Semantic Search Option (requires more tokens)
 - [ ] Prompt Templates/Search
 - [ ] Refactor/clean up code (tech debt)
 - [ ] Optional use of local storage for credentials
@@ -169,16 +180,7 @@ By default, only local machine can access this server. To share within network o
 ### Docker
 
 - **Provide** all credentials, (API keys, access tokens, and Mongo Connection String) in [docker-compose.yml](docker-compose.yml) under api service
-- **Build images** in both /api/ and /client/ directories (will eventually share through docker hub)
-    - `api/`
-    ```bash
-    docker build -t node-api .
-    ```
-    - `client/`
-    ```bash
-    docker build -t react-client .
-    ```
-- **Run** `docker-compose build` in project root dir and then `docker-compose up` to start the app
+- **Run** `docker-compose up` to start the app
 
 ### Access Tokens
 
@@ -235,6 +237,36 @@ set in docker-compose.yml file, under services - api - environment
 
 </details>
 
+### User System
+
+By default, there is no user system enabled, so anyone can access your server.
+
+**This project is not designed to provide a complete and full-featured user system.** It's not high priority task and might never be provided.
+
+[wtlyu](https://github.com/wtlyu) provide a sample user system structure, that you can implement your own user system. It's simple and not a ready-for-use edition. 
+
+(If you want to implement your user system, open this ↓)
+
+<details>
+<summary><strong>Implement your own user system </strong></summary>
+
+To enable the user system, set `ENABLE_USER_SYSTEM=1` in your `.env` file.
+
+The sample structure is simple. It provide three basic endpoint:
+
+1. `/auth/login` will redirect to your own login url. In the sample code, it's `/auth/your_login_page`.
+2. `/auth/logout` will redirect to your own logout url. In the sample code, it's `/auth/your_login_page/logout`.
+3. `/api/me` will return the userinfo: `{ username, display }`.
+   1. `username` will be used in db, used to distinguish between users.
+   2. `display` will be displayed in UI.
+
+The only one thing that drive user system work is `req.session.user`. Once it's set, the client will be trusted. Set to `null` if logout.
+
+Please refer to `/api/server/routes/authYoutLogin.js` file. It's very clear and simple to tell you how to implement your user system.
+
+</details>
+
+
 ### Updating
 - As the project is still a work-in-progress, you should pull the latest and run the steps over. Reset your browser cache/clear site data.
 

api/.env.example

@@ -20,3 +20,10 @@ MONGO_URI="mongodb://127.0.0.1:27017/chatgpt-clone"
 OPENAI_KEY=
 CHATGPT_TOKEN=
 BING_TOKEN=
+
+# User System
+
+# global enable/disable the sample user system.
+# this is not a ready to use user system.
+# dont't use it, unless you can write your own code.
+ENABLE_USER_SYSTEM=

api/app/chatgpt-browser.js

@@ -10,7 +10,7 @@ const clientOptions = {
   proxy: process.env.PROXY || null,
 };
 
-const browserClient = async ({ text, onProgress, convo }) => {
+const browserClient = async ({ text, onProgress, convo, abortController }) => {
   const { ChatGPTBrowserClient } = await import('@waylaidwanderer/chatgpt-api');
 
   const store = {
@@ -18,7 +18,7 @@ const browserClient = async ({ text, onProgress, convo }) => {
   };
 
   const client = new ChatGPTBrowserClient(clientOptions, store);
-  let options = { onProgress };
+  let options = { onProgress, abortController };
 
   if (!!convo.parentMessageId && !!convo.conversationId) {
     options = { ...options, ...convo };

api/app/chatgpt-client.js

@@ -9,14 +9,14 @@ const clientOptions = {
   debug: false
 };
 
-const askClient = async ({ text, onProgress, convo }) => {
+const askClient = async ({ text, onProgress, convo, abortController }) => {
   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 };
+  let options = { onProgress, abortController };
 
   if (!!convo.parentMessageId && !!convo.conversationId) {
     options = { ...options, ...convo };

api/app/chatgpt-custom.js

@@ -9,7 +9,7 @@ const clientOptions = {
   debug: false
 };
 
-const customClient = async ({ text, onProgress, convo, promptPrefix, chatGptLabel }) => {
+const customClient = async ({ text, onProgress, convo, promptPrefix, chatGptLabel, abortController }) => {
   const ChatGPTClient = (await import('@waylaidwanderer/chatgpt-api')).default;
   const store = {
     store: new KeyvFile({ filename: './data/cache.json' })
@@ -23,7 +23,7 @@ const customClient = async ({ text, onProgress, convo, promptPrefix, chatGptLabe
 
   const client = new ChatGPTClient(process.env.OPENAI_KEY, clientOptions, store);
 
-  let options = { onProgress };
+  let options = { onProgress, abortController };
   if (!!convo.parentMessageId && !!convo.conversationId) {
     options = { ...options, ...convo };
   }

api/app/titleConvo.js

@@ -34,11 +34,14 @@ const titleConvo = async ({ model, text, response }) => {
           },
           {
             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(
+            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 nor the language. 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: `
           }
-        ]
+        ],
+        temperature: 0,
+        presence_penalty: 0,
+        frequency_penalty: 0,
       },
       { proxy: proxyEnvToAxiosProxy(process.env.PROXY || null) }
     );

api/models/Conversation.js

@@ -43,6 +43,9 @@ const convoSchema = mongoose.Schema(
       type: String,
       required: true
     },
+    user: {
+      type: String
+    },
     suggestions: [{ type: String }],
     messages: [{ type: mongoose.Schema.Types.ObjectId, ref: 'Message' }]
   },
@@ -52,9 +55,9 @@ const convoSchema = mongoose.Schema(
 const Conversation =
   mongoose.models.Conversation || mongoose.model('Conversation', convoSchema);
 
-const getConvo = async (conversationId) => {
+const getConvo = async (user, conversationId) => {
   try {
-    return await Conversation.findOne({ conversationId }).exec();
+    return await Conversation.findOne({ user, conversationId }).exec();
   } catch (error) {
     console.log(error);
     return { message: 'Error getting single conversation' };
@@ -62,12 +65,13 @@ const getConvo = async (conversationId) => {
 };
 
 module.exports = {
-  saveConvo: async ({ conversationId, newConversationId, title, ...convo }) => {
+  saveConvo: async (user, { conversationId, newConversationId, title, ...convo }) => {
     try {
       const messages = await getMessages({ conversationId });
       const update = { ...convo, messages };
       if (title) {
         update.title = title;
+        update.user = user
       }
       if (newConversationId) {
         update.conversationId = newConversationId;
@@ -82,7 +86,7 @@ module.exports = {
       }
 
       return await Conversation.findOneAndUpdate(
-        { conversationId },
+        { conversationId: conversationId, user },
         { $set: update },
         { new: true, upsert: true }
       ).exec();
@@ -91,9 +95,9 @@ module.exports = {
       return { message: 'Error saving conversation' };
     }
   },
-  updateConvo: async ({ conversationId, ...update }) => {
+  updateConvo: async (user, { conversationId, ...update }) => {
     try {
-      return await Conversation.findOneAndUpdate({ conversationId }, update, {
+      return await Conversation.findOneAndUpdate({ conversationId: conversationId, user }, update, {
         new: true
       }).exec();
     } catch (error) {
@@ -101,12 +105,11 @@ module.exports = {
       return { message: 'Error updating conversation' };
     }
   },
-  // getConvos: async () => await Conversation.find({}).sort({ createdAt: -1 }).exec(),
-  getConvosByPage: async (pageNumber = 1, pageSize = 12) => {
+  getConvosByPage: async (user, pageNumber = 1, pageSize = 12) => {
     try {
-      const totalConvos = (await Conversation.countDocuments()) || 1;
+      const totalConvos = (await Conversation.countDocuments({ user })) || 1;
       const totalPages = Math.ceil(totalConvos / pageSize);
-      const convos = await Conversation.find()
+      const convos = await Conversation.find({ user })
         .sort({ createdAt: -1, created: -1 })
         .skip((pageNumber - 1) * pageSize)
         .limit(pageSize)
@@ -119,17 +122,17 @@ module.exports = {
     }
   },
   getConvo,
-  getConvoTitle: async (conversationId) => {
+  getConvoTitle: async (user, conversationId) => {
     try {
-      const convo = await getConvo(conversationId);
+      const convo = await getConvo(user, conversationId);
       return convo.title;
     } catch (error) {
       console.log(error);
       return { message: 'Error getting conversation title' };
     }
   },
-  deleteConvos: async (filter) => {
-    let deleteCount = await Conversation.deleteMany(filter).exec();
+  deleteConvos: async (user, filter) => {
+    let deleteCount = await Conversation.deleteMany({...filter, user}).exec();
     deleteCount.messages = await deleteMessages(filter);
     return deleteCount;
   },

api/models/CustomGpt.js

@@ -12,16 +12,20 @@ const customGptSchema = mongoose.Schema({
     type: String,
     required: true
   },
+  user: {
+    type: String
+  },
 }, { timestamps: true });
 
 const CustomGpt = mongoose.models.CustomGpt || mongoose.model('CustomGpt', customGptSchema);
 
-const createCustomGpt = async ({ chatGptLabel, promptPrefix, value }) => {
+const createCustomGpt = async ({ chatGptLabel, promptPrefix, value, user }) => {
   try {
     await CustomGpt.create({
       chatGptLabel,
       promptPrefix,
-      value
+      value,
+      user
     });
     return { chatGptLabel, promptPrefix, value };
   } catch (error) {
@@ -31,22 +35,22 @@ const createCustomGpt = async ({ chatGptLabel, promptPrefix, value }) => {
 };
 
 module.exports = {
-  getCustomGpts: async (filter) => {
+  getCustomGpts: async (user, filter) => {
     try {
-      return await CustomGpt.find(filter).exec();
+      return await CustomGpt.find({ ...filter, user }).exec();
     } catch (error) {
       console.error(error);
       return { customGpt: 'Error getting customGpts' };
     }
   },
-  updateCustomGpt: async ({ value, ...update }) => {
+  updateCustomGpt: async (user, { value, ...update }) => {
     try {
-      const customGpt = await CustomGpt.findOne({ value }).exec();
+      const customGpt = await CustomGpt.findOne({ value, user }).exec();
 
       if (!customGpt) {
-        return await createCustomGpt({ value, ...update });
+        return await createCustomGpt({ value, ...update, user });
       } else {
-        return await CustomGpt.findOneAndUpdate({ value }, update, {
+        return await CustomGpt.findOneAndUpdate({ value, user }, update, {
           new: true,
           upsert: true
         }).exec();
@@ -56,9 +60,9 @@ module.exports = {
       return { message: 'Error updating customGpt' };
     }
   },
-  updateByLabel: async ({ prevLabel, ...update }) => {
+  updateByLabel: async (user, { prevLabel, ...update }) => {
     try {
-      return await CustomGpt.findOneAndUpdate({ chatGptLabel: prevLabel }, update, {
+      return await CustomGpt.findOneAndUpdate({ chatGptLabel: prevLabel, user }, update, {
         new: true,
         upsert: true
       }).exec();
@@ -67,9 +71,9 @@ module.exports = {
       return { message: 'Error updating customGpt' };
     }
   },
-  deleteCustomGpts: async (filter) => {
+  deleteCustomGpts: async (user, filter) => {
     try {
-      return await CustomGpt.deleteMany(filter).exec();
+      return await CustomGpt.deleteMany({ ...filter, user }).exec();
     } catch (error) {
       console.error(error);
       return { customGpt: 'Error deleting customGpts' };

api/package-lock.json

@@ -12,9 +12,11 @@
         "@keyv/mongo": "^2.1.8",
         "@vscode/vscode-languagedetection": "^1.0.22",
         "@waylaidwanderer/chatgpt-api": "^1.28.2",
+        "axios": "^1.3.4",
         "cors": "^2.8.5",
         "dotenv": "^16.0.3",
         "express": "^4.18.2",
+        "express-session": "^1.17.3",
         "keyv": "^4.5.2",
         "keyv-file": "^0.2.0",
         "lodash": "^4.17.21",
@@ -1776,11 +1778,13 @@
       }
     },
     "node_modules/axios": {
-      "version": "0.26.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
-      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
+      "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
       "dependencies": {
-        "follow-redirects": "^1.14.8"
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
       }
     },
     "node_modules/balanced-match": {
@@ -2452,6 +2456,45 @@
         "node": ">= 0.10.0"
       }
     },
+    "node_modules/express-session": {
+      "version": "1.17.3",
+      "resolved": "https://registry.npmjs.org/express-session/-/express-session-1.17.3.tgz",
+      "integrity": "sha512-4+otWXlShYlG1Ma+2Jnn+xgKUZTMJ5QD3YvfilX3AcocOAbIkVylSWEklzALe/+Pu4qV6TYBj5GwOBFfdKqLBw==",
+      "dependencies": {
+        "cookie": "0.4.2",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "~2.0.0",
+        "on-headers": "~1.0.2",
+        "parseurl": "~1.3.3",
+        "safe-buffer": "5.2.1",
+        "uid-safe": "~2.1.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/express-session/node_modules/cookie": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express-session/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/express-session/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
     "node_modules/express/node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -3507,6 +3550,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/onetime": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
@@ -3530,6 +3581,14 @@
         "form-data": "^4.0.0"
       }
     },
+    "node_modules/openai/node_modules/axios": {
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
+      "dependencies": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
     "node_modules/ora": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/ora/-/ora-6.1.2.tgz",
@@ -3738,6 +3797,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/pstree.remy": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
@@ -3771,6 +3835,14 @@
       "resolved": "https://registry.npmjs.org/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz",
       "integrity": "sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg=="
     },
+    "node_modules/random-bytes": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz",
+      "integrity": "sha512-iv7LhNVO047HzYR3InF6pUcUsPQiHTM1Qal51DcGSuZFBil1aBBWG5eHPNek7bvILMaYJ/8RU1e8w1AMdHmLQQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -4353,6 +4425,17 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/uid-safe": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.5.tgz",
+      "integrity": "sha512-KPHm4VL5dDXKz01UuEd88Df+KzynaohSL9fBh096KWAxSKZQDI2uBrVqtvRM4rwrIrRRKsdLNML/lnaaVSRioA==",
+      "dependencies": {
+        "random-bytes": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/undefsafe": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
@@ -6152,11 +6235,13 @@
       }
     },
     "axios": {
-      "version": "0.26.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
-      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
+      "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
       "requires": {
-        "follow-redirects": "^1.14.8"
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
       }
     },
     "balanced-match": {
@@ -6628,6 +6713,41 @@
         }
       }
     },
+    "express-session": {
+      "version": "1.17.3",
+      "resolved": "https://registry.npmjs.org/express-session/-/express-session-1.17.3.tgz",
+      "integrity": "sha512-4+otWXlShYlG1Ma+2Jnn+xgKUZTMJ5QD3YvfilX3AcocOAbIkVylSWEklzALe/+Pu4qV6TYBj5GwOBFfdKqLBw==",
+      "requires": {
+        "cookie": "0.4.2",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "~2.0.0",
+        "on-headers": "~1.0.2",
+        "parseurl": "~1.3.3",
+        "safe-buffer": "5.2.1",
+        "uid-safe": "~2.1.5"
+      },
+      "dependencies": {
+        "cookie": {
+          "version": "0.4.2",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+          "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA=="
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        }
+      }
+    },
     "external-editor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
@@ -7397,6 +7517,11 @@
         "ee-first": "1.1.1"
       }
     },
+    "on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA=="
+    },
     "onetime": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
@@ -7412,6 +7537,16 @@
       "requires": {
         "axios": "^0.26.0",
         "form-data": "^4.0.0"
+      },
+      "dependencies": {
+        "axios": {
+          "version": "0.26.1",
+          "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
+          "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
+          "requires": {
+            "follow-redirects": "^1.14.8"
+          }
+        }
       }
     },
     "ora": {
@@ -7569,6 +7704,11 @@
         "ipaddr.js": "1.9.1"
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "pstree.remy": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
@@ -7593,6 +7733,11 @@
       "resolved": "https://registry.npmjs.org/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz",
       "integrity": "sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg=="
     },
+    "random-bytes": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz",
+      "integrity": "sha512-iv7LhNVO047HzYR3InF6pUcUsPQiHTM1Qal51DcGSuZFBil1aBBWG5eHPNek7bvILMaYJ/8RU1e8w1AMdHmLQQ=="
+    },
     "range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -8033,6 +8178,14 @@
         "mime-types": "~2.1.24"
       }
     },
+    "uid-safe": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.5.tgz",
+      "integrity": "sha512-KPHm4VL5dDXKz01UuEd88Df+KzynaohSL9fBh096KWAxSKZQDI2uBrVqtvRM4rwrIrRRKsdLNML/lnaaVSRioA==",
+      "requires": {
+        "random-bytes": "~1.0.0"
+      }
+    },
     "undefsafe": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",

api/package.json

@@ -22,9 +22,12 @@
     "@keyv/mongo": "^2.1.8",
     "@vscode/vscode-languagedetection": "^1.0.22",
     "@waylaidwanderer/chatgpt-api": "^1.28.2",
+    "axios": "^1.3.4",
     "cors": "^2.8.5",
+    "crypto": "^1.0.1",
     "dotenv": "^16.0.3",
     "express": "^4.18.2",
+    "express-session": "^1.17.3",
     "keyv": "^4.5.2",
     "keyv-file": "^0.2.0",
     "lodash": "^4.17.21",

api/server/index.js

@@ -1,4 +1,5 @@
 const express = require('express');
+const session = require('express-session')
 const dbConnect = require('../models/dbConnect');
 const { migrateDb } = require('../models');
 const path = require('path');
@@ -7,6 +8,7 @@ const routes = require('./routes');
 const app = express();
 const port = process.env.PORT || 3080;
 const host = process.env.HOST || 'localhost'
+const userSystemEnabled = process.env.ENABLE_USER_SYSTEM || false
 const projectPath = path.join(__dirname, '..', '..', 'client');
 dbConnect().then(() => {
   console.log('Connected to MongoDB');
@@ -16,17 +18,46 @@ dbConnect().then(() => {
 app.use(cors());
 app.use(express.json());
 app.use(express.static(path.join(projectPath, 'public')));
+app.set('trust proxy', 1) // trust first proxy
+app.use(session({
+  secret: 'chatgpt-clone-random-secrect',
+  resave: false,
+  saveUninitialized: true,
+}))
 
-app.get('/', function (req, res) {
+app.get('/', routes.authenticatedOrRedirect, function (req, res) {
   console.log(path.join(projectPath, 'public', 'index.html'));
   res.sendFile(path.join(projectPath, 'public', 'index.html'));
 });
 
-app.use('/api/ask', routes.ask);
-app.use('/api/messages', routes.messages);
-app.use('/api/convos', routes.convos);
-app.use('/api/customGpts', routes.customGpts);
-app.use('/api/prompts', routes.prompts);
+app.get('/api/me', function (req, res) {
+  if (userSystemEnabled) {
+    const user = req?.session?.user
+    
+    if (user) 
+      res.send(JSON.stringify({username: user?.username, display: user?.display}));
+    else
+      res.send(JSON.stringify(null));
+  } else {
+    res.send(JSON.stringify({username: 'anonymous_user', display: 'Anonymous User'})); 
+  }
+});
+
+app.use('/api/ask', routes.authenticatedOr401, routes.ask);
+app.use('/api/messages', routes.authenticatedOr401, routes.messages);
+app.use('/api/convos', routes.authenticatedOr401, routes.convos);
+app.use('/api/customGpts', routes.authenticatedOr401, routes.customGpts);
+app.use('/api/prompts', routes.authenticatedOr401, routes.prompts);
+app.use('/auth', routes.auth);
+
+
+app.get('/api/models', function (req, res) {
+  const hasOpenAI = !!process.env.OPENAI_KEY;
+  const hasChatGpt = !!process.env.CHATGPT_TOKEN;
+  const hasBing = !!process.env.BING_TOKEN;
+
+  res.send(JSON.stringify({ hasOpenAI, hasChatGpt, hasBing }));
+});
 
 app.listen(port, host,  () => {
   if (host=='0.0.0.0')

api/server/routes/ask.js

@@ -12,7 +12,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, overrideParentMessageId=null, parentMessageId, conversationId: oldConversationId, ...convo } = req.body;
   if (text.length === 0) {
     return handleError(res, { text: 'Prompt empty or too short' });
   }
@@ -36,51 +36,22 @@ router.post('/', async (req, res) => {
     ...convo
   });
 
-  await saveMessage(userMessage);
-  await saveConvo({ ...userMessage, model, ...convo });
+  if (!overrideParentMessageId) {
+    await saveMessage(userMessage);
+    await saveConvo(req?.session?.user?.username, { ...userMessage, model, ...convo });
+  }
 
   return await ask({
     userMessage,
     model,
     convo,
     preSendRequest: true,
+    overrideParentMessageId,
     req,
     res
   });
 });
 
-router.post('/regenerate', async (req, res) => {
-  const { model } = 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' });
-});
-
 const ask = async ({
   userMessage,
   overrideParentMessageId = null,
@@ -119,6 +90,14 @@ const ask = async ({
 
   try {
     const progressCallback = createOnProgress();
+
+    const abortController = new AbortController();
+    res.on('close', () => {
+      console.log('The client has disconnected.');
+      // 执行其他操作
+      abortController.abort();
+    })
+
     let gptResponse = await client({
       text,
       onProgress: progressCallback.call(null, model, { res, text }),
@@ -127,7 +106,8 @@ const ask = async ({
         conversationId,
         ...convo
       },
-      ...convo
+      ...convo,
+      abortController
     });
 
     console.log('CLIENT RESPONSE', gptResponse);
@@ -136,10 +116,10 @@ const ask = async ({
       gptResponse.text = gptResponse.response;
       // gptResponse.id = gptResponse.messageId;
       gptResponse.parentMessageId = overrideParentMessageId || userMessageId;
-      userMessage.conversationId = conversationId
-        ? conversationId
-        : gptResponse.conversationId;
-      await saveMessage(userMessage);
+      // userMessage.conversationId = conversationId
+      //   ? conversationId
+      //   : gptResponse.conversationId;
+      // await saveMessage(userMessage);
       delete gptResponse.response;
     }
 
@@ -176,9 +156,9 @@ const ask = async ({
     gptResponse.parentMessageId = overrideParentMessageId || userMessageId;
 
     await saveMessage(gptResponse);
-    await saveConvo(gptResponse);
+    await saveConvo(req?.session?.user?.username, gptResponse);
     sendMessage(res, {
-      title: await getConvoTitle(conversationId),
+      title: await getConvoTitle(req?.session?.user?.username, conversationId),
       final: true,
       requestMessage: userMessage,
       responseMessage: gptResponse
@@ -188,10 +168,13 @@ const ask = async ({
     if (userParentMessageId == '00000000-0000-0000-0000-000000000000') {
       const title = await titleConvo({ model, text, response: gptResponse });
 
-      await saveConvo({
-        conversationId,
-        title
-      });
+      await saveConvo(
+        req?.session?.user?.username,
+        {
+          conversationId,
+          title
+        }
+      );
     }
   } catch (error) {
     console.log(error);

api/server/routes/askBing.js

@@ -9,6 +9,7 @@ router.post('/', async (req, res) => {
   const {
     model,
     text,
+    overrideParentMessageId=null,
     parentMessageId,
     conversationId: oldConversationId,
     ...convo
@@ -37,8 +38,10 @@ router.post('/', async (req, res) => {
     ...convo
   });
 
-  await saveMessage(userMessage);
-  await saveConvo({ ...userMessage, model, ...convo });
+  if (!overrideParentMessageId) {
+    await saveMessage(userMessage);
+    await saveConvo(req?.session?.user?.username, { ...userMessage, model, ...convo });
+  }
 
   return await ask({
     isNewConversation,
@@ -46,6 +49,7 @@ router.post('/', async (req, res) => {
     model,
     convo,
     preSendRequest: true,
+    overrideParentMessageId,
     req,
     res
   });
@@ -80,6 +84,14 @@ const ask = async ({
 
   try {
     const progressCallback = createOnProgress();
+
+    const abortController = new AbortController();
+    res.on('close', () => {
+      console.log('The client has disconnected.');
+      // 执行其他操作
+      abortController.abort();
+    })
+
     let response = await askBing({
       text,
       onProgress: progressCallback.call(null, model, {
@@ -91,32 +103,36 @@ const ask = async ({
         ...convo,
         parentMessageId: userParentMessageId,
         conversationId
-      }
+      },
+      abortController
     });
 
     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 = response.conversationId || conversationId;
     userMessage.invocationId = response.invocationId;
-    await saveMessage(userMessage);
+    if (!overrideParentMessageId)
+      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
-      });
+      await saveConvo(
+        req?.session?.user?.username,
+        {
+          conversationId: conversationId,
+          newConversationId: userMessage.conversationId
+        }
+      );
     conversationId = userMessage.conversationId;
 
-    response.text = response.response;
-    delete response.response;
+    response.text = response.response || response.details.spokenText || '**Bing refused to answer.**';
+    // delete response.response;
     // response.id = response.details.messageId;
     response.suggestions =
       response.details.suggestedResponses &&
@@ -130,9 +146,10 @@ const ask = async ({
 
     response.text = await handleText(response, true);
     await saveMessage(response);
-    await saveConvo({ ...response, model, chatGptLabel: null, promptPrefix: null, ...convo });
+    await saveConvo(req?.session?.user?.username, { ...response, model, chatGptLabel: null, promptPrefix: null, ...convo });
+
     sendMessage(res, {
-      title: await getConvoTitle(conversationId),
+      title: await getConvoTitle(req?.session?.user?.username, conversationId),
       final: true,
       requestMessage: userMessage,
       responseMessage: response
@@ -142,10 +159,13 @@ const ask = async ({
     if (userParentMessageId == '00000000-0000-0000-0000-000000000000') {
       const title = await titleConvo({ model, text, response });
 
-      await saveConvo({
-        conversationId,
-        title
-      });
+      await saveConvo(
+        req?.session?.user?.username,
+        {
+          conversationId,
+          title
+        }
+      );
     }
   } catch (error) {
     console.log(error);

api/server/routes/askSydney.js

@@ -9,6 +9,7 @@ router.post('/', async (req, res) => {
   const {
     model,
     text,
+    overrideParentMessageId=null,
     parentMessageId,
     conversationId: oldConversationId,
     ...convo
@@ -37,8 +38,10 @@ router.post('/', async (req, res) => {
     ...convo
   });
 
-  await saveMessage(userMessage);
-  await saveConvo({ ...userMessage, model, ...convo });
+  if (!overrideParentMessageId) {
+    await saveMessage(userMessage);
+    await saveConvo(req?.session?.user?.username, { ...userMessage, model, ...convo });
+  }
 
   return await ask({
     isNewConversation,
@@ -46,6 +49,7 @@ router.post('/', async (req, res) => {
     model,
     convo,
     preSendRequest: true,
+    overrideParentMessageId,
     req,
     res
   });
@@ -80,6 +84,14 @@ const ask = async ({
 
   try {
     const progressCallback = createOnProgress();
+
+    const abortController = new AbortController();
+    res.on('close', () => {
+      console.log('The client has disconnected.');
+      // 执行其他操作
+      abortController.abort();
+    })
+
     let response = await askSydney({
       text,
       onProgress: progressCallback.call(null, model, {
@@ -91,7 +103,8 @@ const ask = async ({
         parentMessageId: userParentMessageId,
         conversationId,
         ...convo
-      }
+      },
+      abortController
     });
 
     console.log('SYDNEY RESPONSE', response);
@@ -102,7 +115,8 @@ const ask = async ({
     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);
+    if (!overrideParentMessageId)
+      await saveMessage(userMessage);
 
     // Save sydney response
     // response.id = response.messageId;
@@ -111,8 +125,8 @@ const ask = async ({
     response.conversationSignature = convo.conversationSignature
       ? convo.conversationSignature
       : crypto.randomUUID();
-    response.text = response.response;
-    delete response.response;
+    response.text = response.response || response.details.spokenText || '**Bing refused to answer.**';
+    // delete response.response;
     response.suggestions =
       response.details.suggestedResponses &&
       response.details.suggestedResponses.map((s) => s.text);
@@ -125,25 +139,30 @@ const ask = async ({
 
     // Save user message
     userMessage.conversationId = response.conversationId || conversationId;
-    await saveMessage(userMessage);
+    if (!overrideParentMessageId)
+      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
-      });
+      await saveConvo(
+        req?.session?.user?.username,
+        {
+          conversationId: conversationId,
+          newConversationId: userMessage.conversationId
+        }
+      );
     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 });
+    await saveConvo(req?.session?.user?.username, { ...response, model, chatGptLabel: null, promptPrefix: null, ...convo });
+    
     sendMessage(res, {
-      title: await getConvoTitle(conversationId),
+      title: await getConvoTitle(req?.session?.user?.username, conversationId),
       final: true,
       requestMessage: userMessage,
       responseMessage: response
@@ -153,10 +172,13 @@ const ask = async ({
     if (userParentMessageId == '00000000-0000-0000-0000-000000000000') {
       const title = await titleConvo({ model, text, response });
 
-      await saveConvo({
-        conversationId,
-        title
-      });
+      await saveConvo(
+        req?.session?.user?.username,
+        {
+          conversationId,
+          title
+        }
+      );
     }
   } catch (error) {
     console.log(error);

api/server/routes/auth.js

@@ -0,0 +1,46 @@
+const express = require('express');
+const router = express.Router();
+const authYourLogin = require('./authYourLogin');
+const userSystemEnabled = process.env.ENABLE_USER_SYSTEM || false
+
+router.get('/login', function (req, res) {
+  if (userSystemEnabled)
+    res.redirect('/auth/your_login_page')
+  else
+    res.redirect('/')  
+})
+  
+router.get('/logout', function (req, res) {
+  // clear the session
+  req.session.user = null
+
+  req.session.save(function (error) {
+    if (userSystemEnabled)
+      res.redirect('/auth/your_login_page/logout')
+    else
+      res.redirect('/') 
+  })  
+})
+
+const authenticatedOr401 = (req, res, next) => {
+  if (userSystemEnabled) {
+    const user = req?.session?.user;
+
+    if (user) next();
+    else res.status(401).end();
+  } else next();
+}
+
+const authenticatedOrRedirect = (req, res, next) => {
+  if (userSystemEnabled) {
+    const user = req?.session?.user;
+
+    if (user) next();
+    else res.redirect('/auth/login').end();
+  } else next();
+}
+
+if (userSystemEnabled)
+  router.use('/your_login_page', authYourLogin);
+
+module.exports = { router, authenticatedOr401, authenticatedOrRedirect };

api/server/routes/authYourLogin.js

@@ -0,0 +1,40 @@
+const express = require('express');
+const router = express.Router();
+
+// WARNING!
+// THIS IS NOT A READY TO USE USER SYSTEM
+// PLEASE IMPLEMENT YOUR OWN USER SYSTEM
+
+const userSystemEnabled = process.env.ENABLE_USER_SYSTEM || false
+
+// Logout
+router.get('/logout', (req, res) => {
+  // Do anything you want
+  console.warn('logout not implemented!')
+
+  // finish
+  res.redirect('/')
+});
+  
+// Login
+router.get('/', async (req, res) => {
+  // Do anything you want
+  console.warn('login not implemented! Automatic passed as sample user')
+
+  // save the user info into session
+  // username will be used in db
+  // display will be used in UI
+  req.session.user = {
+    username: 'sample_user',
+    display: 'Sample User',
+  }
+
+  req.session.save(function (error) {
+    if (error) {    
+        console.log(error);
+        res.send(`<h1>Login Failed. An error occurred. Please see the server logs for details.</h1>`);
+    } else res.redirect('/')
+  })
+});
+
+module.exports = router;

api/server/routes/convos.js

@@ -1,10 +1,39 @@
 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));
+  res.status(200).send(await getConvosByPage(req?.session?.user?.username, pageNumber));
+});
+
+router.post('/gen_title', async (req, res) => {
+  const { conversationId } = req.body.arg;
+
+  const convo = await getConvo(req?.session?.user?.username, conversationId)
+  const firstMessage = (await getMessages({ conversationId }))[0]
+  const secondMessage = (await getMessages({ conversationId }))[1]
+
+  const title = convo.jailbreakConversationId
+    ? await getConvoTitle(req?.session?.user?.username, conversationId)
+    : await titleConvo({
+        model: convo?.model,
+        message: firstMessage?.text,
+        response: JSON.stringify(secondMessage?.text || '')
+      });
+
+  await saveConvo(
+    req?.session?.user?.username,
+    {
+      conversationId,
+      title
+    }
+  )
+
+  res.status(200).send(title);
 });
 
 router.post('/clear', async (req, res) => {
@@ -15,7 +44,7 @@ router.post('/clear', async (req, res) => {
   }
 
   try {
-    const dbResponse = await deleteConvos(filter);
+    const dbResponse = await deleteConvos(req?.session?.user?.username, filter);
     res.status(201).send(dbResponse);
   } catch (error) {
     console.error(error);
@@ -27,7 +56,7 @@ router.post('/update', async (req, res) => {
   const update = req.body.arg;
 
   try {
-    const dbResponse = await updateConvo(update);
+    const dbResponse = await updateConvo(req?.session?.user?.username, update);
     res.status(201).send(dbResponse);
   } catch (error) {
     console.error(error);

api/server/routes/customGpts.js

@@ -8,7 +8,7 @@ const {
 } = require('../../models');
 
 router.get('/', async (req, res) => {
-  const models = (await getCustomGpts()).map((model) => {
+  const models = (await getCustomGpts(req?.session?.user?.username)).map((model) => {
     model = model.toObject();
     model._id = model._id.toString();
     return model;
@@ -20,8 +20,8 @@ router.post('/delete', async (req, res) => {
   const { arg } = req.body;
 
   try {
-    await deleteCustomGpts(arg);
-    const models = (await getCustomGpts()).map((model) => {
+    await deleteCustomGpts(req?.session?.user?.username, arg);
+    const models = (await getCustomGpts(req?.session?.user?.username)).map((model) => {
       model = model.toObject();
       model._id = model._id.toString();
       return model;
@@ -56,7 +56,7 @@ router.post('/', async (req, res) => {
   }
 
   try {
-    const dbResponse = await setter(update);
+    const dbResponse = await setter(req?.session?.user?.username, update);
     res.status(201).send(dbResponse);
   } catch (error) {
     console.error(error);

api/server/routes/handlers.js

@@ -1,8 +1,6 @@
 const _ = require('lodash');
-const sanitizeHtml = require('sanitize-html');
 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`);
@@ -28,14 +26,6 @@ const createOnProgress = () => {
       tokens = tokens.replace(/^\n/, '');
     }
 
-    // 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) {
       tokens = citeText(tokens, true);
     }
@@ -54,7 +44,7 @@ const createOnProgress = () => {
 
 const handleText = async (response, bing = false) => {
   let { text } = response;
-  text = await detectCode(text);
+  // text = await detectCode(text);
   response.text = text;
 
   if (bing) {
@@ -66,14 +56,6 @@ const handleText = async (response, bing = false) => {
     text += links?.length > 0 ? `\n<small>${links}</small>` : '';
   }
 
-  // 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;
 };
 

api/server/routes/index.js

@@ -3,5 +3,6 @@ const messages = require('./messages');
 const convos = require('./convos');
 const customGpts = require('./customGpts');
 const prompts = require('./prompts');
+const { router: auth, authenticatedOr401, authenticatedOrRedirect } = require('./auth');
 
-module.exports = { ask, messages, convos, customGpts, prompts };
+module.exports = { ask, messages, convos, customGpts, prompts, auth, authenticatedOr401, authenticatedOrRedirect };

client/public/index.html

@@ -2,6 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
+    <meta name="theme-color" content="#343541">
     <title>ChatGPT Clone</title>
     <link
       rel="shortcut icon"

client/src/App.jsx

@@ -5,34 +5,67 @@ import TextChat from './components/Main/TextChat';
 import Nav from './components/Nav';
 import MobileNav from './components/Nav/MobileNav';
 import useDocumentTitle from '~/hooks/useDocumentTitle';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
+import { setUser } from './store/userReducer';
+import axios from 'axios';
 
 const App = () => {
+  const dispatch = useDispatch();
+  
   const { messages, messageTree } = useSelector((state) => state.messages);
+  const { user } = useSelector((state) => state.user);
   const { title } = useSelector((state) => state.convo);
   const { conversationId } = useSelector((state) => state.convo);
   const [ navVisible, setNavVisible ]= useState(false)
   useDocumentTitle(title);
 
-  return (
-    <div className="flex h-screen">
-      <Nav navVisible={navVisible} setNavVisible={setNavVisible} />
-      <div className="flex h-full w-full flex-1 flex-col bg-gray-50 md:pl-[260px]">
-        <div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden bg-white dark:bg-gray-800">
-          <MobileNav setNavVisible={setNavVisible} />
-          {messages.length === 0 ? (
-            <Landing title={title} />
-          ) : (
-            <Messages
-              messages={messages}
-              messageTree={messageTree}
-            />
-          )}
-          <TextChat messages={messages} />
+  useEffect(() => {
+    axios.get('/api/me', {
+      timeout: 1000,
+      withCredentials: true
+    }).then((res) => {
+      return res.data
+    }).then((user) => {
+      if (user)
+        dispatch(setUser(user))
+      else {
+        console.log('Not login!')
+        window.location.href = "/auth/login";
+      }
+    }).catch((error) => {
+      console.error(error)
+      console.log('Not login!')
+      window.location.href = "/auth/login";
+    })
+    // setUser
+  }, [])
+
+  if (user)
+    return (
+      <div className="flex h-screen">
+        <Nav navVisible={navVisible} setNavVisible={setNavVisible} />
+        <div className="flex h-full w-full flex-1 flex-col bg-gray-50 md:pl-[260px]">
+          <div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden bg-white dark:bg-gray-800">
+            <MobileNav setNavVisible={setNavVisible} />
+            {messages.length === 0 ? (
+              <Landing title={title} />
+            ) : (
+              <Messages
+                messages={messages}
+                messageTree={messageTree}
+              />
+            )}
+            <TextChat messages={messages} />
+          </div>
         </div>
       </div>
-    </div>
-  );
+    );
+  else
+    return (
+      <div className="flex h-screen">
+        
+      </div>
+    )
 };
 
 export default App;

client/src/components/Conversations/Conversation.jsx

@@ -58,7 +58,8 @@ export default function Conversation({
           jailbreakConversationId,
           conversationSignature,
           clientId,
-          invocationId
+          invocationId,
+          latestMessage: null
         })
       );
     } else {
@@ -69,7 +70,8 @@ export default function Conversation({
           jailbreakConversationId: null,
           conversationSignature: null,
           clientId: null,
-          invocationId: null
+          invocationId: null,
+          latestMessage: null
         })
       );
     }

client/src/components/Main/Footer.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 export default function Footer() {
   return (
-    <div className="px-3 pt-2 pb-3 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6">
+    <div className="hidden md:block px-3 pt-2 pb-1 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-4">
       <a
         href="https://github.com/danny-avila/chatgpt-clone"
         target="_blank"

client/src/components/Main/Landing.jsx

@@ -26,9 +26,9 @@ export default function Landing({ title }) {
   };
 
   return (
-    <div className="flex h-full flex-col items-center overflow-y-auto text-sm dark:bg-gray-800">
+    <div className="flex pt-10 md:pt-0 h-full flex-col items-center overflow-y-auto text-sm dark:bg-gray-800">
       <div className="w-full px-6 text-gray-800 dark:text-gray-100 md:flex md:max-w-2xl md:flex-col lg:max-w-3xl">
-        <h1 className="mt-6 ml-auto mr-auto mb-10 flex items-center justify-center gap-2 text-center text-4xl font-semibold sm:mt-[20vh] sm:mb-16">
+        <h1 className="mt-6 ml-auto mr-auto mb-10 flex items-center justify-center gap-2 text-center text-4xl font-semibold md:mt-[20vh] sm:mb-16">
           ChatGPT Clone
         </h1>
         <div className="items-start gap-3.5 text-center md:flex">

client/src/components/Main/SubmitButton.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-export default function SubmitButton({ submitMessage }) {
-  const { isSubmitting, disabled } = useSelector((state) => state.submit);
+export default function SubmitButton({ submitMessage, disabled }) {
+  const { isSubmitting } = useSelector((state) => state.submit);
+  const { error, latestMessage } = useSelector((state) => state.convo);
+
   const clickHandler = (e) => {
     e.preventDefault();
     submitMessage();
@@ -10,9 +12,12 @@ export default function SubmitButton({ submitMessage }) {
 
   if (isSubmitting) {
     return (
-      <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>
+      <button
+        className="absolute bottom-0 right-1 h-[100%] w-[30px] 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:right-2"
+        disabled
+      >
         <div className="text-2xl">
-          <span >·</span>
+          <span>·</span>
           <span className="blink">·</span>
           <span className="blink2">·</span>
         </div>
@@ -23,28 +28,30 @@ export default function SubmitButton({ submitMessage }) {
     <button
       onClick={clickHandler}
       disabled={disabled}
-      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"
+      className="group absolute bottom-0 right-0 flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
     >
-      <svg
-        stroke="currentColor"
-        fill="none"
-        strokeWidth="2"
-        viewBox="0 0 24 24"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className="mr-1 h-4 w-4"
-        height="1em"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <line
-          x1="22"
-          y1="2"
-          x2="11"
-          y2="13"
-        />
-        <polygon points="22 2 15 22 11 13 2 9 22 2" />
-      </svg>
+      <div className="m-1 mr-0 rounded-md p-2 pt-[10px] pb-[10px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
+        <svg
+          stroke="currentColor"
+          fill="none"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="mr-1 h-4 w-4 "
+          height="1em"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <line
+            x1="22"
+            y1="2"
+            x2="11"
+            y2="13"
+          />
+          <polygon points="22 2 15 22 11 13 2 9 22 2" />
+        </svg>
+      </div>
     </button>
   );
 }

client/src/components/Main/TextChat.jsx

@@ -7,33 +7,103 @@ import Footer from './Footer';
 import TextareaAutosize from 'react-textarea-autosize';
 import createPayload from '~/utils/createPayload';
 import resetConvo from '~/utils/resetConvo';
+import RegenerateIcon from '../svg/RegenerateIcon';
+import StopGeneratingIcon from '../svg/StopGeneratingIcon';
 import { useSelector, useDispatch } from 'react-redux';
-import { setConversation, setNewConvo, 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';
+import { useMessageHandler } from '../../utils/handleSubmit';
 
 export default function TextChat({ messages }) {
   const [errorMessage, setErrorMessage] = useState('');
-  const inputRef = useRef(null)
+  const inputRef = useRef(null);
   const isComposing = useRef(false);
   const dispatch = useDispatch();
+  const { user } = useSelector((state) => state.user);
   const convo = useSelector((state) => state.convo);
   const { initial } = useSelector((state) => state.models);
   const { isSubmitting, stopStream, submission, disabled, model, chatGptLabel, promptPrefix } =
     useSelector((state) => state.submit);
   const { text } = useSelector((state) => state.text);
-  const { error } = convo;
+  const { error, latestMessage } = convo;
+  const { ask, regenerate, stopGenerating } = useMessageHandler();
+
+  const isNotAppendable = latestMessage?.cancelled || latestMessage?.error;
 
   // 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;
+    const { messages, _currentMsg, message, sender, isRegenerate } = currentState;
 
-    dispatch(setMessages([...messages, currentMsg, { sender, text: data, parentMessageId: currentMsg?.messageId, messageId: currentMsg?.messageId + '_', submitting: true }]));
+    if (isRegenerate)
+      dispatch(
+        setMessages([
+          ...messages,
+          {
+            sender,
+            text: data,
+            parentMessageId: message?.overrideParentMessageId,
+            messageId: message?.overrideParentMessageId + '_',
+            submitting: true
+          }
+        ])
+      );
+    else
+      dispatch(
+        setMessages([
+          ...messages,
+          currentMsg,
+          {
+            sender,
+            text: data,
+            parentMessageId: currentMsg?.messageId,
+            messageId: currentMsg?.messageId + '_',
+            submitting: true
+          }
+        ])
+      );
+  };
+
+  const cancelHandler = (data, currentState, currentMsg) => {
+    const { messages, _currentMsg, message, sender, isRegenerate } = currentState;
+
+    if (isRegenerate)
+      dispatch(
+        setMessages([
+          ...messages,
+          {
+            sender,
+            text: data,
+            parentMessageId: message?.overrideParentMessageId,
+            messageId: message?.overrideParentMessageId + '_',
+            cancelled: true
+          }
+        ])
+      );
+    else
+      dispatch(
+        setMessages([
+          ...messages,
+          currentMsg,
+          {
+            sender,
+            text: data,
+            parentMessageId: currentMsg?.messageId,
+            messageId: currentMsg?.messageId + '_',
+            cancelled: true
+          }
+        ])
+      );
   };
 
   const createdHandler = (data, currentState, currentMsg) => {
@@ -41,6 +111,7 @@ export default function TextChat({ messages }) {
     dispatch(
       setConversation({
         conversationId,
+        latestMessage: null
       })
     );
   };
@@ -48,15 +119,16 @@ export default function TextChat({ messages }) {
   const convoHandler = (data, currentState, currentMsg) => {
     const { requestMessage, responseMessage } = data;
     const { conversationId } = requestMessage;
-    const { messages, _currentMsg, message, isCustomModel, sender } =
+    const { messages, _currentMsg, message, isCustomModel, sender, isRegenerate } =
       currentState;
     const { model, chatGptLabel, promptPrefix } = message;
-    dispatch(
-      setMessages([...messages, requestMessage, responseMessage,])
-    );
+    if (isRegenerate) dispatch(setMessages([...messages, responseMessage]));
+    else dispatch(setMessages([...messages, requestMessage, responseMessage]));
+    dispatch(setSubmitState(false));
 
     const isBing = model === 'bingai' || model === 'sydney';
 
+    // refresh title
     if (requestMessage.parentMessageId == '00000000-0000-0000-0000-000000000000') {
       setTimeout(() => {
         dispatch(refreshConversation());
@@ -81,15 +153,15 @@ export default function TextChat({ messages }) {
           clientId: null,
           invocationId: null,
           chatGptLabel: model === isCustomModel ? chatGptLabel : null,
-          promptPrefix: model === isCustomModel ? promptPrefix : null
+          promptPrefix: model === isCustomModel ? promptPrefix : null,
+          latestMessage: null
         })
       );
-    } else if (
-      model === 'bingai'
-    ) {
+    } else if (model === 'bingai') {
       console.log('Bing data:', data);
       const { title } = data;
-      const { conversationSignature, clientId, conversationId, invocationId } = responseMessage;
+      const { conversationSignature, clientId, conversationId, invocationId } =
+        responseMessage;
       dispatch(
         setConversation({
           title,
@@ -97,7 +169,8 @@ export default function TextChat({ messages }) {
           conversationSignature,
           clientId,
           conversationId,
-          invocationId
+          invocationId,
+          latestMessage: null
         })
       );
     } else if (model === 'sydney') {
@@ -118,12 +191,11 @@ export default function TextChat({ messages }) {
           conversationSignature,
           clientId,
           conversationId,
-          invocationId
+          invocationId,
+          latestMessage: null
         })
       );
     }
-
-    dispatch(setSubmitState(false));
   };
 
   const errorHandler = (data, currentState, currentMsg) => {
@@ -132,7 +204,7 @@ export default function TextChat({ messages }) {
     const errorResponse = {
       ...data,
       error: true,
-      parentMessageId: currentMsg?.messageId,
+      parentMessageId: currentMsg?.messageId
     };
     setErrorMessage(data?.text);
     dispatch(setSubmitState(false));
@@ -141,51 +213,8 @@ export default function TextChat({ messages }) {
     dispatch(setError(true));
     return;
   };
-
   const submitMessage = () => {
-    if (error) {
-      dispatch(setError(false));
-    }
-
-    if (!!isSubmitting || text.trim() === '') {
-      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 sender = model === 'chatgptCustom' ? chatGptLabel : model;
-    let parentMessageId = convo.parentMessageId || '00000000-0000-0000-0000-000000000000';
-    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([...currentMessages, currentMsg, initialResponse]));
-    dispatch(setText(''));
-
-    const submission = {
-      convo,
-      isCustomModel,
-      message: { 
-        ...currentMsg,
-        model,
-        chatGptLabel,
-        promptPrefix,
-      },
-      messages: currentMessages,
-      currentMsg,
-      initialResponse,
-      sender,
-    };
-    console.log('User Input:', message);
-    dispatch(setSubmission(submission));
+    ask({ text });
   };
 
   useEffect(() => {
@@ -195,7 +224,10 @@ export default function TextChat({ messages }) {
     }
 
     const currentState = submission;
-    let currentMsg = currentState.currentMsg;
+
+    let currentMsg = { ...currentState.message };
+    let latestResponseText = '';
+
     const { server, payload } = createPayload(submission);
     const onMessage = (e) => {
       if (stopStream) {
@@ -204,19 +236,20 @@ export default function TextChat({ messages }) {
 
       const data = JSON.parse(e.data);
 
-      // if (data.message) {
-      //   messageHandler(text, currentState);
-      // }
-
       if (data.final) {
         convoHandler(data, currentState, currentMsg);
         console.log('final', data);
-      } if (data.created) {
+      }
+      if (data.created) {
         currentMsg = data.message;
         createdHandler(data, currentState, currentMsg);
       } else {
         let text = data.text || data.response;
+        if (data.initial) {
+          console.log(data);
+        }
         if (data.message) {
+          latestResponseText = text;
           messageHandler(text, currentState, currentMsg);
         }
         // console.log('dataStream', data);
@@ -234,6 +267,10 @@ export default function TextChat({ messages }) {
 
     events.onmessage = onMessage;
 
+    events.oncancel = (e) => {
+      cancelHandler(latestResponseText, currentState, currentMsg);
+    };
+
     events.onerror = function (e) {
       console.log('error in opening conn.');
       events.close();
@@ -247,18 +284,30 @@ export default function TextChat({ messages }) {
 
     return () => {
       events.removeEventListener('message', onMessage);
+      const isCancelled = events.readyState <= 1;
       events.close();
+      if (isCancelled) {
+        const e = new Event('cancel');
+        events.dispatchEvent(e);
+      }
     };
   }, [submission]);
 
+  const handleRegenerate = () => {
+    if (latestMessage && !latestMessage?.isCreatedByUser) regenerate(latestMessage);
+  };
+
+  const handleStopGenerating = () => {
+    stopGenerating();
+  };
+
   const handleKeyDown = (e) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
     }
 
     if (e.key === 'Enter' && !e.shiftKey) {
-      if (!isComposing.current)
-        submitMessage();
+      if (!isComposing.current) submitMessage();
     }
   };
 
@@ -271,21 +320,21 @@ export default function TextChat({ messages }) {
       return;
     }
   };
-  
+
   const handleCompositionStart = (e) => {
-    isComposing.current = true
-  }
+    isComposing.current = true;
+  };
 
   const handleCompositionEnd = (e) => {
     isComposing.current = false;
-  }
+  };
 
   const changeHandler = (e) => {
     const { value } = e.target;
 
-    if (isSubmitting && (value === '' || value === '\n')) {
-      return;
-    }
+    // if (isSubmitting && (value === '' || value === '\n')) {
+    //   return;
+    // }
     dispatch(setText(value));
   };
 
@@ -295,44 +344,65 @@ export default function TextChat({ messages }) {
   };
 
   return (
-    <div className="md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient absolute bottom-0 left-0 w-full border-t bg-white dark:border-white/20 dark:bg-gray-800 md:border-t-0 md:border-transparent md:!bg-transparent md:dark:border-transparent">
-      <form className="stretch mx-2 flex flex-row gap-3 pt-2 last:mb-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
+    <div className="input-panel md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient fixed bottom-0 left-0 w-full border-t bg-white py-2 dark:border-white/20 dark:bg-gray-800 md:absolute md:border-t-0 md:border-transparent md:bg-transparent md:dark:border-transparent md:dark:bg-transparent">
+      <form className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:pt-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
         <div className="relative flex h-full flex-1 md:flex-col">
-          <div className="ml-1 mt-1.5 flex justify-center gap-0 md:m-auto md:mb-2 md:w-full md:gap-2" />
-          {error ? (
-            <Regenerate
-              submitMessage={submitMessage}
-              tryAgain={tryAgain}
-              errorMessage={errorMessage}
+          <span className="order-last ml-1 flex justify-center gap-0 md:order-none md:m-auto md:mb-2 md:w-full md:gap-2">
+            {isSubmitting ? (
+              <button
+                onClick={handleStopGenerating}
+                className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
+                type="button"
+              >
+                <StopGeneratingIcon />
+                <span className="hidden md:block">Stop generating</span>
+              </button>
+            ) : latestMessage && !latestMessage?.isCreatedByUser ? (
+              <button
+                onClick={handleRegenerate}
+                className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
+                type="button"
+              >
+                <RegenerateIcon />
+                <span className="hidden md:block">Regenerate response</span>
+              </button>
+            ) : null}
+          </span>
+          <div
+            className={`relative flex flex-grow flex-col rounded-md border border-black/10 ${
+              disabled ? 'bg-gray-100' : 'bg-white'
+            } py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 ${
+              disabled ? 'dark:bg-gray-900' : 'dark:bg-gray-700'
+            } dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4`}
+          >
+            <ModelMenu />
+            <TextareaAutosize
+              tabIndex="0"
+              autoFocus
+              ref={inputRef}
+              // style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
+              rows="1"
+              value={disabled || isNotAppendable ? '' : text}
+              onKeyUp={handleKeyUp}
+              onKeyDown={handleKeyDown}
+              onChange={changeHandler}
+              onCompositionStart={handleCompositionStart}
+              onCompositionEnd={handleCompositionEnd}
+              placeholder={
+                disabled
+                  ? 'Choose another model or customize GPT again'
+                  : isNotAppendable
+                  ? 'Edit your message or Regenerate.'
+                  : ''
+              }
+              disabled={disabled || isNotAppendable}
+              className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-12 pr-8 leading-6 placeholder:text-sm focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
             />
-          ) : (
-            <div
-              className={`relative flex w-full flex-grow flex-col rounded-md border border-black/10 ${
-                disabled ? 'bg-gray-100' : 'bg-white'
-              } py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 ${
-                disabled ? 'dark:bg-gray-900' : 'dark:bg-gray-700'
-              } dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4`}
-            >
-              <ModelMenu />
-              <TextareaAutosize
-                tabIndex="0"
-                autoFocus
-                ref={inputRef}
-                // style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
-                rows="1"
-                value={text}
-                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"
-              />
-              <SubmitButton submitMessage={submitMessage} />
-            </div>
-          )}
+            <SubmitButton
+              submitMessage={submitMessage}
+              disabled={disabled || isNotAppendable}
+            />
+          </div>
         </div>
       </form>
       <Footer />

client/src/components/Messages/Message.jsx

@@ -4,12 +4,9 @@ import MultiMessage from './MultiMessage';
 import { useSelector, useDispatch } from 'react-redux';
 import HoverButtons from './HoverButtons';
 import SiblingSwitch from './SiblingSwitch';
-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';
+import { setConversation, setLatestMessage } from '../../store/convoSlice';
 import { getIconOfModel } from '../../utils';
+import { useMessageHandler } from '../../utils/handleSubmit';
 
 export default function Message({
   message,
@@ -28,14 +25,14 @@ export default function Message({
   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 edit = message.messageId == currentEditId;
+  const { ask } = useMessageHandler();
   const dispatch = useDispatch();
 
   // const notUser = !isCreatedByUser; // sender.toLowerCase() !== 'user';
-  const blinker = submitting && isSubmitting && last && !isCreatedByUser;
+  // const blinker = submitting && isSubmitting && last && !isCreatedByUser;
+  const blinker = submitting && isSubmitting;
   const generateCursor = useCallback(() => {
     if (!blinker) {
       return '';
@@ -48,11 +45,15 @@ export default function Message({
     if (blinker && !abortScroll) {
       scrollToBottom();
     }
-  }, [isSubmitting, text, blinker, scrollToBottom, abortScroll]);
+  }, [isSubmitting, blinker, text, scrollToBottom]);
 
   useEffect(() => {
-    if (last) dispatch(setConversation({ parentMessageId: message?.messageId }));
-  }, [last]);
+    if (last) {
+      // TODO: stop using conversation.parentMessageId and remove it.
+      dispatch(setConversation({ parentMessageId: message?.messageId }));
+      dispatch(setLatestMessage({ ...message }));
+    }
+  }, [last, message]);
 
   const enterEdit = (cancel) => setCurrentEditId(cancel ? -1 : message.messageId);
 
@@ -87,55 +88,11 @@ export default function Message({
   const resubmitMessage = () => {
     const text = textEditor.current.innerText;
 
-    if (convoError) {
-      dispatch(setError(false));
-    }
-
-    if (!!isSubmitting || text.trim() === '') {
-      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 = {
-      sender: 'User',
-      text: text.trim(),
-      current: true,
-      isCreatedByUser: true,
+    ask({
+      text,
       parentMessageId: message?.parentMessageId,
-      conversationId: message?.conversationId,
-      messageId: fakeMessageId
-    };
-    const sender = model === 'chatgptCustom' ? chatGptLabel : model;
-
-    const initialResponse = {
-      sender,
-      text: '',
-      parentMessageId: fakeMessageId,
-      submitting: true
-    };
-
-    dispatch(setSubmitState(true));
-    dispatch(setMessages([...messages, currentMsg, initialResponse]));
-    dispatch(setText(''));
-
-    const submission = {
-      isCustomModel,
-      message: {
-        ...currentMsg,
-        model,
-        chatGptLabel,
-        promptPrefix
-      },
-      messages: messages,
-      currentMsg,
-      initialResponse,
-      sender
-    };
-    console.log('User Input:', currentMsg?.text);
-    // handleSubmit(submission);
-    dispatch(setSubmission(submission));
+      conversationId: message?.conversationId
+    });
 
     setSiblingIdx(siblingCount - 1);
     enterEdit(true);

client/src/components/Messages/MultiMessage.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Message from './Message';
 
 export default function MultiMessage({
@@ -14,6 +14,11 @@ export default function MultiMessage({
     setSiblingIdx(messageList?.length - value - 1);
   };
 
+  useEffect(() => {
+    // reset siblingIdx when changes, mostly a new message is submitting.
+    setSiblingIdx(0);
+  }, [messageList?.length])
+
   // if (!messageList?.length) return null;
   if (!(messageList && messageList.length)) {
     return null;

client/src/components/Messages/index.jsx

@@ -1,40 +1,49 @@
-import React, { useEffect, useState, useRef, useMemo } from 'react';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 import Spinner from '../svg/Spinner';
 import { CSSTransition } from 'react-transition-group';
 import ScrollToBottom from './ScrollToBottom';
 import MultiMessage from './MultiMessage';
 import { useSelector } from 'react-redux';
 
-const Messages = ({ messages, messageTree }) => {
+export default function Messages({ messages, messageTree }) {
   const [currentEditId, setCurrentEditId] = useState(-1);
   const { conversationId } = useSelector((state) => state.convo);
+  const { model, customModel, chatGptLabel } = useSelector((state) => state.submit);
+  const { models } = useSelector((state) => state.models);
   const [showScrollButton, setShowScrollButton] = useState(false);
   const scrollableRef = useRef(null);
   const messagesEndRef = useRef(null);
 
+  const modelName = models.find((element) => element.model == model)?.name;
+
   useEffect(() => {
     const timeoutId = setTimeout(() => {
-      const scrollable = scrollableRef.current;
-      const hasScrollbar = scrollable.scrollHeight > scrollable.clientHeight;
+      const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
+      const diff = Math.abs(scrollHeight - scrollTop);
+      const percent = Math.abs(clientHeight - diff ) / clientHeight;
+      const hasScrollbar = scrollHeight > clientHeight && percent > 0.2;
       setShowScrollButton(hasScrollbar);
     }, 650);
 
+    // Add a listener on the window object
+    window.addEventListener('scroll', handleScroll);
+
     return () => {
       clearTimeout(timeoutId);
+      window.removeEventListener('scroll', handleScroll);
     };
   }, [messages]);
 
-  const scrollToBottom = () => {
+  const scrollToBottom = useCallback(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
     setShowScrollButton(false);
-  };
+  }, [messagesEndRef]);
 
   const handleScroll = () => {
     const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
     const diff = Math.abs(scrollHeight - scrollTop);
-    const bottom =
-      diff === clientHeight || (diff <= clientHeight + 25 && diff >= clientHeight - 25);
-    if (bottom) {
+    const percent = Math.abs(clientHeight - diff ) / clientHeight;
+    if (percent <= 0.2) {
       setShowScrollButton(false);
     } else {
       setShowScrollButton(true);
@@ -54,13 +63,16 @@ const Messages = ({ messages, messageTree }) => {
 
   return (
     <div
-      className="flex-1 overflow-y-auto "
+      className="flex-1 overflow-y-auto pt-10 md:pt-0"
       ref={scrollableRef}
       onScroll={debouncedHandleScroll}
     >
       {/* <div className="flex-1 overflow-hidden"> */}
       <div className="dark:gpt-dark-gray h-full">
         <div className="dark:gpt-dark-gray flex h-full flex-col items-center text-sm">
+          <div className="flex w-full items-center justify-center gap-1 border-b border-black/10 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-900/50 dark:bg-gray-700 dark:text-gray-300">
+            Model: {modelName} {customModel ? `(${customModel})` : null}
+          </div>
           {messageTree.length === 0 ? (
             <Spinner />
           ) : (
@@ -93,6 +105,4 @@ const Messages = ({ messages, messageTree }) => {
       {/* </div> */}
     </div>
   );
-};
-
-export default React.memo(Messages);
+}

client/src/components/Models/ModelItem.jsx

@@ -28,7 +28,7 @@ export default function ModelItem({ modelName, value, model, onSelect, id, chatG
     dispatch(setModels(fetchedModels));
   });
 
-  const icon = getIconOfModel({ size: 16, sender: modelName, isCreatedByUser: false, model, chatGptLabel, promptPrefix, error: false, className: "mr-2" });
+  const icon = getIconOfModel({ size: 20, sender: modelName, isCreatedByUser: false, model, chatGptLabel, promptPrefix, error: false, className: "mr-2" });
 
   if (value === 'chatgptCustom') {
     return (
@@ -43,9 +43,9 @@ export default function ModelItem({ modelName, value, model, onSelect, id, chatG
         </DropdownMenuRadioItem>
       </DialogTrigger>
     );
-  }
+  } 
 
-  if (initial[value]) {
+  if (initial[value])
     return (
       <DropdownMenuRadioItem
         value={value}
@@ -56,8 +56,8 @@ export default function ModelItem({ modelName, value, model, onSelect, id, chatG
         {value === 'chatgpt' && <sup>$</sup>}
       </DropdownMenuRadioItem>
     );
-  }
 
+  
   const handleMouseOver = () => {
     setIsHovering(true);
   };
@@ -143,7 +143,7 @@ export default function ModelItem({ modelName, value, model, onSelect, id, chatG
           onKeyDown={handleKeyDown}
         />
       ) : (
-        <div className="w-3/4 overflow-hidden">{modelInput}</div>
+        <div className=" overflow-hidden">{modelInput}</div>
       )}
 
       {value === 'chatgpt' && <sup>$</sup>}

client/src/components/Models/ModelMenu.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 import { useSelector, useDispatch } from 'react-redux';
 import {
   setSubmission,
@@ -11,12 +12,11 @@ import { setNewConvo } from '~/store/convoSlice';
 import ModelDialog from './ModelDialog';
 import MenuItems from './MenuItems';
 import { swr } from '~/utils/fetchers';
-import { setModels } from '~/store/modelSlice';
+import { setModels, setInitial } 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';
+import { getIconOfModel } from '../../utils';
 
 import {
   DropdownMenu,
@@ -33,12 +33,13 @@ export default function ModelMenu() {
   const dispatch = useDispatch();
   const [modelSave, setModelSave] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
-  const { model, customModel } = useSelector((state) => state.submit);
+  const { model, customModel, promptPrefix, chatGptLabel } = useSelector((state) => state.submit);
   const { models, modelMap, initial } = useSelector((state) => state.models);
   const { data, isLoading, mutate } = swr(`/api/customGpts`, (res) => {
     const fetchedModels = res.map((modelItem) => ({
       ...modelItem,
-      name: modelItem.chatGptLabel
+      name: modelItem.chatGptLabel,
+      model: 'chatgptCustom'
     }));
 
     dispatch(setModels(fetchedModels));
@@ -61,10 +62,47 @@ export default function ModelMenu() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    axios.get('/api/models', {
+      timeout: 1000,
+      withCredentials: true
+    }).then((res) => {
+      return res.data
+    }).then((data) => {
+      const initial = {chatgpt: data?.hasOpenAI, chatgptCustom: data?.hasOpenAI, bingai: data?.hasBing, sydney: data?.hasBing, chatgptBrowser: data?.hasChatGpt}
+      dispatch(setInitial(initial))
+      // TODO, auto reset default model
+      if (data?.hasOpenAI) {
+        dispatch(setModel('chatgpt'));
+        dispatch(setDisabled(false));
+        dispatch(setCustomModel(null));
+        dispatch(setCustomGpt({ chatGptLabel: null, promptPrefix: null }));
+      } else if (data?.hasBing) {
+        dispatch(setModel('bingai'));
+        dispatch(setDisabled(false));
+        dispatch(setCustomModel(null));
+        dispatch(setCustomGpt({ chatGptLabel: null, promptPrefix: null }));
+      } else if (data?.hasChatGpt) {
+        dispatch(setModel('chatgptBrowser'));
+        dispatch(setDisabled(false));
+        dispatch(setCustomModel(null));
+        dispatch(setCustomGpt({ chatGptLabel: null, promptPrefix: null }));
+      } else {
+        dispatch(setDisabled(true));
+      }
+    }).catch((error) => {
+      console.error(error)
+      console.log('Not login!')
+      window.location.href = "/auth/login";
+    })
+  }, [])
+
   useEffect(() => {
     localStorage.setItem('model', JSON.stringify(model));
   }, [model]);
 
+  const filteredModels = models.filter(({model, _id }) => initial[model] );
+
   const onChange = (value) => {
     if (!value) {
       return;
@@ -138,7 +176,7 @@ export default function ModelMenu() {
 
   const isBing = model === 'bingai' || model === 'sydney';
   const colorProps = model === 'chatgpt' ? chatgptColorProps : defaultColorProps;
-  const icon = isBing ? <BingIcon button={true} /> : <GPTIcon button={true} />;
+  const icon = getIconOfModel({ size: 32, sender: chatGptLabel || model, isCreatedByUser: false, model, chatGptLabel, promptPrefix, error: false, button: true});
 
   return (
     <Dialog onOpenChange={onOpenChange}>
@@ -150,9 +188,9 @@ export default function ModelMenu() {
           <Button
             variant="outline"
             // style={{backgroundColor: 'rgb(16, 163, 127)'}}
-            className={`absolute bottom-0.5 rounded-md border-0 p-1 pl-2 outline-none ${colorProps.join(
+            className={`absolute top-[0.25px] items-center mb-0 rounded-md border-0 p-1 ml-1 md:ml-0 outline-none ${colorProps.join(
               ' '
-            )} focus:ring-0 focus:ring-offset-0 disabled:bottom-0.5 dark:data-[state=open]:bg-opacity-50 md:bottom-1 md:left-2 md:pl-1 md:disabled:bottom-1`}
+            )} focus:ring-0 focus:ring-offset-0 disabled:top-[0.25px] dark:data-[state=open]:bg-opacity-50 md:top-1 md:left-1 md:pl-1 md:disabled:top-1`}
           >
             {icon}
           </Button>
@@ -165,10 +203,12 @@ export default function ModelMenu() {
             onValueChange={onChange}
             className="overflow-y-auto"
           >
-            <MenuItems
-              models={models}
-              onSelect={onChange}
-            />
+            {filteredModels.length?
+              <MenuItems
+                models={filteredModels}
+                onSelect={onChange}
+              />:<DropdownMenuLabel className="dark:text-gray-300">No model available.</DropdownMenuLabel>
+            }
           </DropdownMenuRadioGroup>
         </DropdownMenuContent>
       </DropdownMenu>

client/src/components/Nav/Logout.jsx

@@ -0,0 +1,23 @@
+import React, { useState, useContext } from 'react';
+import { useSelector } from 'react-redux';
+import LogOutIcon from '../svg/LogOutIcon';
+
+
+export default function Logout() {
+  const { user } = useSelector((state) => state.user);
+  
+  const clickHandler = () => {
+    window.location.href = "/auth/logout";
+  };
+
+  return (
+    <a
+      className="flex cursor-pointer items-center gap-3 rounded-md py-3 px-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
+      onClick={clickHandler}
+    >
+      <LogOutIcon />
+      {user?.display || user?.username || 'USER'}
+      <small>Log out</small>
+    </a>
+  );
+}

client/src/components/Nav/MobileNav.jsx

@@ -23,7 +23,7 @@ export default function MobileNav({ setNavVisible }) {
   }
 
   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">
+    <div className="fixed top-0 left-0 right-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
         type="button"
         className="-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-2 focus:ring-inset focus:ring-white dark:hover:text-white"

client/src/components/Nav/NavLinks.jsx

@@ -3,16 +3,18 @@ import NavLink from './NavLink';
 import LogOutIcon from '../svg/LogOutIcon';
 import ClearConvos from './ClearConvos';
 import DarkMode from './DarkMode';
+import Logout from './Logout';
 
 export default function NavLinks() {
   return (
     <>
       <ClearConvos />
       <DarkMode />
-      <NavLink
+      <Logout />
+      {/* <NavLink
         svg={LogOutIcon}
         text="Log out"
-      />
+      /> */}
     </>
   );
 }

client/src/components/svg/StopGeneratingIcon.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default function StopGeneratingIcon() {
+  return (
+    <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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
+  );
+}

client/src/mobile.css

@@ -46,6 +46,18 @@
 }
 
 @media (max-width: 767px) {
+  .input-panel-button {
+    border: 0;
+  }
+
+  .input-panel-button svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .input-panel {
+  }
+
   .nav-close-button {
     display: block;
     position: absolute;

client/src/store/convoSlice.js

@@ -15,6 +15,7 @@ const initialState = {
   pageNumber: 1,
   pages: 1,
   refreshConvoHint: 0,
+  latestMessage: null,
   convos: [],
 };
 
@@ -52,6 +53,7 @@ const currentSlice = createSlice({
       state.chatGptLabel = null;
       state.promptPrefix = null;
       state.convosLoading = false;
+      state.latestMessage = null;
     },
     setConvos: (state, action) => {
       state.convos = action.payload.sort(
@@ -66,11 +68,14 @@ const currentSlice = createSlice({
     },
     removeAll: (state) => {
       state.convos = [];
-    }
+    },
+    setLatestMessage: (state, action) => {
+      state.latestMessage = action.payload;
+    },
   }
 });
 
-export const { refreshConversation, setConversation, setPages, setConvos, setNewConvo, setError, increasePage, decreasePage, setPage, removeConvo, removeAll } =
+export const { refreshConversation, setConversation, setPages, setConvos, setNewConvo, setError, increasePage, decreasePage, setPage, removeConvo, removeAll, setLatestMessage } =
   currentSlice.actions;
 
 export default currentSlice.reducer;

client/src/store/index.js

@@ -5,6 +5,7 @@ import messageReducer from './messageSlice.js'
 import modelReducer from './modelSlice.js'
 import submitReducer from './submitSlice.js'
 import textReducer from './textSlice.js'
+import userReducer from './userReducer.js'
 
 export const store = configureStore({
   reducer: {
@@ -13,6 +14,7 @@ export const store = configureStore({
     models: modelReducer,
     text: textReducer,
     submit: submitReducer,
+    user: userReducer,
   },
   devTools: true,
 });

client/src/store/modelSlice.js

@@ -34,7 +34,7 @@ const initialState = {
     },
   ],
   modelMap: {},
-  initial: { chatgpt: true, chatgptCustom: true, bingai: true, sydney: true, chatgptBrowser: true }
+  initial: { chatgpt: false, chatgptCustom: false, bingai: false, sydney: false, chatgptBrowser: false }
   // initial: { chatgpt: true, chatgptCustom: true, bingai: true, }
 };
 
@@ -56,10 +56,13 @@ const currentSlice = createSlice({
       });
 
       state.modelMap = modelMap;
+    },
+    setInitial: (state, action) => {
+      state.initial = action.payload;
     }
   }
 });
 
-export const { setModels } = currentSlice.actions;
+export const { setModels, setInitial } = currentSlice.actions;
 
 export default currentSlice.reducer;

client/src/store/submitSlice.js

@@ -4,7 +4,7 @@ const initialState = {
   isSubmitting: false,
   submission: {},
   stopStream: false,
-  disabled: false,
+  disabled: true,
   model: 'chatgpt',
   promptPrefix: null,
   chatGptLabel: null,

client/src/store/userReducer.js

@@ -0,0 +1,19 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  user: null,
+};
+
+const currentSlice = createSlice({
+  name: 'user',
+  initialState,
+  reducers: {
+    setUser: (state, action) => {
+      state.user = action.payload;
+    },
+  }
+});
+
+export const { setUser } = currentSlice.actions;
+
+export default currentSlice.reducer;

client/src/utils/fetchers.js

@@ -3,10 +3,10 @@ import axios from 'axios';
 import useSWR from 'swr';
 import useSWRMutation from 'swr/mutation';
 
-const fetcher = (url) => fetch(url).then((res) => res.json());
+const fetcher = (url) => fetch(url, {credentials: 'include'}).then((res) => res.json());
 
 const postRequest = async (url, { arg }) => {
-  return await axios.post(url, { arg });
+  return await axios.post(url, { withCredentials: true, arg });
 };
 
 export const swr = (path, successCallback, options) => {

client/src/utils/handleSubmit.js

@@ -1,5 +1,91 @@
 import { SSE } from './sse';
-// const newLineRegex = /^\n+/;
+import resetConvo from './resetConvo';
+import { useSelector, useDispatch } from 'react-redux';
+import { setNewConvo } from '~/store/convoSlice';
+import { setMessages } from '~/store/messageSlice';
+import { setSubmitState, setSubmission } from '~/store/submitSlice';
+import { setText } from '~/store/textSlice';
+import { setError } from '~/store/convoSlice';
+
+const useMessageHandler = () => {
+  const dispatch = useDispatch();
+  const convo = useSelector((state) => state.convo);
+  const { initial } = useSelector((state) => state.models);
+  const { messages } = useSelector((state) => state.messages);
+  const { model, chatGptLabel, promptPrefix, isSubmitting } = useSelector((state) => state.submit);
+  const { text } = useSelector((state) => state.text);
+  const { latestMessage, error } = convo;
+
+  const ask = ({ text, parentMessageId=null, conversationId=null, messageId=null}, { isRegenerate=false }={}) => {
+    if (error) {
+      dispatch(setError(false));
+    }
+
+    if (!!isSubmitting || text === '') {
+      return;
+    }
+    
+    // this is not a real messageId, it is used as placeholder before real messageId returned
+    text = text.trim();
+    const fakeMessageId = crypto.randomUUID();
+    const isCustomModel = model === 'chatgptCustom' || !initial[model];
+    const sender = model === 'chatgptCustom' ? chatGptLabel : model;
+    parentMessageId = parentMessageId || latestMessage?.messageId || '00000000-0000-0000-0000-000000000000';
+    let currentMessages = messages;
+    if (resetConvo(currentMessages, sender)) {
+      parentMessageId = '00000000-0000-0000-0000-000000000000';
+      conversationId = null;
+      dispatch(setNewConvo());
+      currentMessages = [];
+    }
+    const currentMsg = { sender: 'User', text, current: true, isCreatedByUser: true, parentMessageId, conversationId, messageId: fakeMessageId };
+    const initialResponse = { sender, text: '', parentMessageId: isRegenerate?messageId:fakeMessageId, messageId: (isRegenerate?messageId:fakeMessageId) + '_', submitting: true };
+
+    const submission = {
+      convo,
+      isCustomModel,
+      message: { 
+        ...currentMsg,
+        model,
+        chatGptLabel,
+        promptPrefix,
+        overrideParentMessageId: isRegenerate?messageId:null
+      },
+      messages: currentMessages,
+      isRegenerate,
+      initialResponse,
+      sender,
+    };
+
+    console.log('User Input:', text);
+
+    if (isRegenerate) {
+      dispatch(setMessages([...currentMessages, initialResponse]));
+    } else {
+      dispatch(setMessages([...currentMessages, currentMsg, initialResponse]));
+      dispatch(setText(''));  
+    }
+    dispatch(setSubmitState(true));
+    dispatch(setSubmission(submission));
+  }
+
+  const regenerate = ({ parentMessageId }) => {
+    const parentMessage = messages?.find(element => element.messageId == parentMessageId);
+
+    if (parentMessage && parentMessage.isCreatedByUser)
+      ask({ ...parentMessage }, { isRegenerate: true })
+    else
+      console.error('Failed to regenerate the message: parentMessage not found or not created by user.', message);
+  }
+
+  const stopGenerating = () => {
+    dispatch(setSubmission({}));
+  }
+
+  return { ask, regenerate, stopGenerating }
+}
+
+export { useMessageHandler };
 
 export default function handleSubmit({
   model,

client/src/utils/index.js

@@ -47,20 +47,21 @@ export const wrapperRegex = {
 };
 
 export const getIconOfModel = ({ size=30, sender, isCreatedByUser, model, chatGptLabel, error, ...props }) => {
+  const { button } = props;
   const bgColors = {
-    chatgpt: 'rgb(16, 163, 127)',
-    chatgptBrowser: 'rgb(25, 207, 207)',
+    chatgpt: `rgb(16, 163, 127${ button ? ', 0.75' : ''})`,
+    chatgptBrowser: `rgb(25, 207, 207${ button ? ', 0.75' : ''})`,
     bingai: 'transparent',
     sydney: 'radial-gradient(circle at 90% 110%, #F0F0FA, #D0E0F9)',
-    chatgptCustom: 'rgb(0, 163, 255)',
+    chatgptCustom: `rgb(0, 163, 255${ button ? ', 0.75' : ''})`,
   };
 
   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}
+        style={{ background: 'radial-gradient(circle at 90% 110%, rgb(1 43 128), rgb(17, 139, 161))', color: 'white', fontSize: 12, width: size, height: size }}
+        className={`relative flex items-center justify-center rounded-sm text-white ` + props?.className}
       >
         User
       </div>
@@ -75,11 +76,11 @@ export const getIconOfModel = ({ size=30, sender, isCreatedByUser, model, chatGp
       <div
         title={chatGptLabel || model}
         style={
-          { background } || { background: 'radial-gradient(circle at 90% 110%, #F0F0FA, #D0E0F9)' }
+          { background: background || 'radial-gradient(circle at 90% 110%, #F0F0FA, #D0E0F9)', width: size, height: size }
         }
-        className={`relative flex h-[${size}px] w-[${size}px] items-center justify-center rounded-sm p-1 text-white ` + props?.className}
+        className={`relative flex items-center justify-center rounded-sm text-white ` + props?.className}
       >
-        {isBing ? <BingIcon size={size} /> : <GPTIcon size={size} />}
+        {isBing ? <BingIcon size={size * 0.7} /> : <GPTIcon size={size * 0.7} />}
         {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">
             !
@@ -91,8 +92,8 @@ export const getIconOfModel = ({ size=30, sender, isCreatedByUser, model, chatGp
     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}
+        style={{ background: 'radial-gradient(circle at 90% 110%, rgb(1 43 128), rgb(17, 139, 161))', color: 'white', fontSize: 12, width: size, height: size }}
+        className={`relative flex items-center justify-center rounded-sm p-1 text-white ` + props?.className}
       >
         {chatGptLabel}
       </div>