Solve the problem of not clearing the messages on the right side when deleting the current conversation.

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img alt="demo" src="./demos/demo.png?v=1">
+  <img alt="demo" src="./demos/demo.gif?v=1">
 </p>
 
 [English](./README.md) | [中文](./docs/zh/README.md)
@@ -9,6 +9,15 @@
 A ChatGPT web client that supports multiple users, multiple database connections for persistent data storage, supports i18n. Provides Docker images and quick deployment scripts.
 
 ## 📢Updates
+<details open>
+<summary><strong>2023-03-10</strong></summary>
+
+Add 2 environment variables to control the typewriter effect:
+
+- `NUXT_PUBLIC_TYPEWRITER=true` to enable/disable the typewriter effect
+- `NUXT_PUBLIC_TYPEWRITER_DELAY=50` to set the delay time for each character in milliseconds.
+
+</details>
 
 <details open>
 <summary><strong>2023-03-04</strong></summary>
@@ -19,22 +28,22 @@ A ChatGPT web client that supports multiple users, multiple database connections
 
 </details>
 
-<details open>
+<details>
 
 <summary><strong>2023-02-24</strong></summary>
 Version 2 is a major update that separates the backend functionality as an independent project, hosted at [chatgpt-ui-server](https://github.com/WongSaang/chatgpt-ui-server). 
 
 If you still wish to use the old version, please visit the [v1 branch](https://github.com/WongSaang/chatgpt-ui/tree/v1).
 
-Version 2 introduces the following new features:
+</details>
+
+## Version 2 introduces the following new features:
 
 - 😉 Separation of the frontend and backend, with the backend now using the Python-based Django framework.
 - 😘 User authentication, supporting multiple users.
 - 😀 Ability to store data in an external database (defaulting to Sqlite).
 - 😎 Session persistence, allowing the API to answer questions based on your context.
 
-</details>
-
 ## 🚀 One-click deployment <a name="one-click-depolyment"></a>
 
 Note: This script has only been tested on Ubuntu Server 22.04 LTS.
@@ -73,6 +82,9 @@ services:
     image: wongsaang/chatgpt-ui-client:latest
     environment:
       - SERVER_DOMAIN=http://backend-web-server
+      - NUXT_PUBLIC_APP_NAME='ChatGPT UI' # App name
+      - NUXT_PUBLIC_TYPEWRITER=true # Enable typewriter effect, default is false
+      - NUXT_PUBLIC_TYPEWRITER_DELAY=100 # Typewriter effect delay time, default is 50ms
     depends_on:
       - backend-web-server
     ports:

components/MsgContent.vue

@@ -1,34 +1,36 @@
 <script setup>
-import { marked } from "marked"
 import hljs from "highlight.js"
+import MarkdownIt from 'markdown-it'
 import copy from 'copy-to-clipboard'
 
-// Part of the code comes from this project https://github.com/arronhunt/highlightjs-copy, thanks to the author's contribution
 
-hljs.addPlugin({
-  'after:highlightElement': ({ el, result, text }) => {
-    let header = el.parentElement.querySelector(".hljs-code-header");
-    if (header) {
-      header.remove();
+const md = new MarkdownIt({
+  linkify: true,
+  highlight(code, lang) {
+    const language = hljs.getLanguage(lang) ? lang : 'plaintext'
+    return `<pre class="hljs-code-container my-3"><div class="hljs-code-header d-flex align-center justify-space-between bg-grey-darken-3 pa-1"><span class="pl-2 text-caption">${language}</span><button class="hljs-copy-button" data-copied="false">Copy</button></div><code class="hljs language-${language}">${hljs.highlight(code, { language: language, ignoreIllegals: true }).value}</code></pre>`
+  },
+})
+
+const props = defineProps(['content'])
+
+const contentHtml = ref('')
+
+const contentElm = ref(null)
+
+watchEffect(() => {
+  contentHtml.value = props.content ? md.render(props.content) : ''
+})
+
+const bindCopyCodeToButtons = () => {
+  if (!contentElm.value) {
+    return
   }
-
-    header = Object.assign(document.createElement("div"), {
-      className: "hljs-code-header d-flex align-center justify-space-between bg-grey-darken-3 pa-1",
-      innerHTML: `<div class="pl-2 text-caption">${result.language}</div>`
-    });
-
-    let copyButton = Object.assign(document.createElement("button"), {
-      innerHTML: "Copy",
-      className: "hljs-copy-button",
-    });
-    copyButton.dataset.copied = false;
-
-    header.append(copyButton);
-    //
-    el.parentElement.classList.add("d-flex","flex-column", "my-3");
-    el.parentElement.prepend(header);
+  contentElm.value.querySelectorAll('.hljs-code-container').forEach((codeContainer) => {
+    const copyButton = codeContainer.querySelector('.hljs-copy-button');
+    const codeBody = codeContainer.querySelector('code');
     copyButton.onclick = function () {
-      copy(text);
+      copy(codeBody.textContent ?? '');
 
       copyButton.innerHTML = "Copied!";
       copyButton.dataset.copied = 'true';
@@ -38,39 +40,15 @@ hljs.addPlugin({
         copyButton.dataset.copied = 'false';
       }, 2000);
     };
-  }
-});
-
-marked.setOptions({
-  // highlight: function (code, lang) {
-  //   const language = hljs.getLanguage(lang) ? lang : 'plaintext'
-  //   return hljs.highlight(code, { language }).value
-  // },
-  langPrefix: 'hljs language-', // highlight.js css class prefix
-})
-
-const props = defineProps(['content'])
-
-const contentHtml = ref('')
-
-const contentElm = ref(null)
-
-const highlightCode = () => {
-  if (!contentElm.value) {
-    return
-  }
-  contentElm.value.querySelectorAll('pre code').forEach((block) => {
-    hljs.highlightElement(block)
   })
 }
 
-watchEffect(() => {
-  contentHtml.value = props.content ? marked(props.content) : ''
-  if (props.content && props.content.endsWith('```')) {
-    nextTick(() => {
-      highlightCode()
-    })
-  }
+onMounted(() => {
+  bindCopyCodeToButtons()
+})
+
+onUpdated(() => {
+  bindCopyCodeToButtons()
 })
 
 </script>
@@ -79,13 +57,17 @@ watchEffect(() => {
   <div
       ref="contentElm"
       v-html="contentHtml"
-      class="chat-msg-content text-justify"
+      class="chat-msg-content"
   ></div>
 </template>
 
 <style>
 .chat-msg-content ol {
-  list-style-position: inside;
+  padding-left: 2em;
+}
+.hljs-code-container {
+  border-radius: 3px;
+  overflow: hidden;
 }
 .hljs-copy-button{
   width:2rem;height:2rem;text-indent:-9999px;color:#fff;

docker-compose.yml

@@ -4,6 +4,9 @@ services:
     image: wongsaang/chatgpt-ui-client:latest
     environment:
       - SERVER_DOMAIN=http://backend-web-server
+      - NUXT_PUBLIC_APP_NAME='ChatGPT UI'
+      - NUXT_PUBLIC_TYPEWRITER=true
+      - NUXT_PUBLIC_TYPEWRITER_DELAY=100
     depends_on:
       - backend-web-server
     ports:

docs/zh/README.md

@@ -1,14 +1,23 @@
 <p align="center">
-  <img alt="demo" src="./demos/demo.png?v=1">
+  <img alt="demo" src="../../demos/demo.gif?v=1">
 </p>
 
-[English](./README.md) | [中文](./docs/zh/README.md)
+[English](../../README.md) | [中文](./docs/zh/README.md)
 
 # ChatGPT UI
 
 ChatGPT Web 客户端，支持多用户，支持 Mysql、PostgreSQL 等多种数据库连接进行数据持久化存储，支持多语言。提供 Docker 镜像和快速部署脚本。
 
 ## 📢 更新
+<details open>
+<summary><strong>2023-03-10</strong></summary>
+
+增加 2 个环境变量来控制打字机效果, 详见下方 docker-compose 配置的环境变量说明
+
+- `NUXT_PUBLIC_TYPEWRITER` 是否开启打字机效果
+- `NUXT_PUBLIC_TYPEWRITER_DELAY` 每个字的延迟时间，单位：毫秒
+
+</details>
 
 <details open>
 <summary><strong>2023-03-04</strong></summary>
@@ -19,7 +28,7 @@ ChatGPT Web 客户端，支持多用户，支持 Mysql、PostgreSQL 等多种数
 
 </details>
 
-<details open>
+<details>
 
 <summary><strong>2023-02-24</strong></summary>
 V2 是一个重要的更新，将后端功能分离为一个独立的项目，托管在 [chatgpt-ui-server](https://github.com/WongSaang/chatgpt-ui-server), 该项目使用基于 Python 的 Django 框架。 
@@ -72,6 +81,9 @@ services:
     image: wongsaang/chatgpt-ui-client:latest
     environment:
       - SERVER_DOMAIN=http://backend-web-server
+      - NUXT_PUBLIC_APP_NAME='ChatGPT UI' # App 名称，默认为 ChatGPT UI
+      - NUXT_PUBLIC_TYPEWRITER=true # 是否启用打字机效果，默认关闭
+      - NUXT_PUBLIC_TYPEWRITER_DELAY=100 # 打字机效果的延迟时间，默认 50毫秒
     depends_on:
       - backend-web-server
     ports:

layouts/default.vue

@@ -1,6 +1,4 @@
 <script setup>
-import {useConversions} from "../composables/states";
-import {getConversions} from "../utils/helper";
 import {useDisplay} from "vuetify";
 
 const { $i18n } = useNuxtApp()
@@ -25,6 +23,7 @@ const setLang = (lang) => {
 }
 
 const conversations = useConversions()
+const currentConversation = useConversion()
 
 const editingConversation = ref(null)
 const deletingConversationIndex = ref(null)
@@ -54,6 +53,9 @@ const deleteConversation = async (index) => {
   })
   deletingConversationIndex.value = null
   if (!error.value) {
+    if (conversations.value[index].id === currentConversation.value.id) {
+      createNewConversion()
+    }
     conversations.value.splice(index, 1)
   }
 }
@@ -162,7 +164,7 @@ onNuxtReady(async () => {
                         icon="edit"
                         size="small"
                         variant="text"
-                        @click="editConversation(cIdx)"
+                        @click.stop="editConversation(cIdx)"
                     >
                     </v-btn>
                     <v-btn
@@ -170,7 +172,7 @@ onNuxtReady(async () => {
                         size="small"
                         variant="text"
                         :loading="deletingConversationIndex === cIdx"
-                        @click="deleteConversation(cIdx)"
+                        @click.stop="deleteConversation(cIdx)"
                     >
                     </v-btn>
                   </div>

nuxt.config.ts

@@ -11,7 +11,9 @@ export default defineNuxtConfig({
     },
     runtimeConfig: {
         public: {
-            appName: appName
+            appName: appName,
+            typewriter: false,
+            typewriterDelay: 50,
         }
     },
     build: {

package.json

@@ -18,7 +18,7 @@
     "copy-to-clipboard": "^3.3.3",
     "highlight.js": "^11.7.0",
     "is-mobile": "^3.1.1",
-    "marked": "^4.2.12",
+    "markdown-it": "^13.0.1",
     "nanoid": "^4.0.1",
     "vuetify": "^3.0.6"
   },

pages/index.vue

@@ -24,6 +24,7 @@ const processMessageQueue = () => {
   }
   isProcessingQueue = true
   const nextMessage = messageQueue.shift()
+  if (runtimeConfig.public.typewriter) {
     let wordIndex = 0;
     const intervalId = setInterval(() => {
       currentConversation.value.messages[currentConversation.value.messages.length - 1].message += nextMessage[wordIndex]
@@ -33,7 +34,12 @@ const processMessageQueue = () => {
         isProcessingQueue = false
         processMessageQueue()
       }
-  }, 50)
+    }, runtimeConfig.public.typewriterDelay)
+  } else {
+    currentConversation.value.messages[currentConversation.value.messages.length - 1].message += nextMessage
+    isProcessingQueue = false
+    processMessageQueue()
+  }
 }
 
 let ctrl

yarn.lock

@@ -2005,6 +2005,11 @@ entities@^2.0.0:
   resolved "https://registry.npmmirror.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
+entities@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
+  integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
+
 errno@^0.1.3:
   version "0.1.8"
   resolved "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
@@ -2801,6 +2806,13 @@ lilconfig@^2.0.3:
   resolved "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4"
   integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==
 
+linkify-it@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmmirror.com/linkify-it/-/linkify-it-4.0.1.tgz#01f1d5e508190d06669982ba31a7d9f56a5751ec"
+  integrity sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==
+  dependencies:
+    uc.micro "^1.0.1"
+
 listhen@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/listhen/-/listhen-1.0.2.tgz#3332af0cf77dd914e12d125c70a9c6aed9537033"
@@ -2950,10 +2962,16 @@ make-dir@^3.1.0, make-dir@~3.1.0:
   dependencies:
     semver "^6.0.0"
 
-marked@^4.2.12:
-  version "4.2.12"
-  resolved "https://registry.npmmirror.com/marked/-/marked-4.2.12.tgz#d69a64e21d71b06250da995dcd065c11083bebb5"
-  integrity sha512-yr8hSKa3Fv4D3jdZmtMMPghgVt6TWbk86WQaWhDloQjRSQhMMYCAro7jP7VDJrjjdV8pxVxMssXS8B8Y5DZ5aw==
+markdown-it@^13.0.1:
+  version "13.0.1"
+  resolved "https://registry.npmmirror.com/markdown-it/-/markdown-it-13.0.1.tgz#c6ecc431cacf1a5da531423fc6a42807814af430"
+  integrity sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==
+  dependencies:
+    argparse "^2.0.1"
+    entities "~3.0.1"
+    linkify-it "^4.0.1"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
 
 material-design-icons-iconfont@^6.7.0:
   version "6.7.0"
@@ -2965,6 +2983,11 @@ mdn-data@2.0.14:
   resolved "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
   integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
 
+mdurl@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+  integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
+
 memory-fs@^0.5.0:
   version "0.5.0"
   resolved "https://registry.npmmirror.com/memory-fs/-/memory-fs-0.5.0.tgz#324c01288b88652966d161db77838720845a8e3c"
@@ -4266,6 +4289,11 @@ type-fest@^3.0.0:
   resolved "https://registry.npmmirror.com/type-fest/-/type-fest-3.5.7.tgz#1ee9efc9a172f4002c40b896689928a7bba537f2"
   integrity sha512-6J4bYzb4sdkcLBty4XW7F18VPI66M4boXNE+CY40532oq2OJe6AVMB5NmjOp6skt/jw5mRjz/hLRpuglz0U+FA==
 
+uc.micro@^1.0.1, uc.micro@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.npmmirror.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
+  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
+
 ufo@^1.0.0, ufo@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/ufo/-/ufo-1.0.1.tgz#64ed43b530706bda2e4892f911f568cf4cf67d29"