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

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,7 +28,7 @@ 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). 
@@ -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

@@ -63,7 +63,7 @@ onUpdated(() => {
 
 <style>
 .chat-msg-content ol {
-  list-style-position: inside;
+  padding-left: 2em;
 }
 .hljs-code-container {
   border-radius: 3px;

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

@@ -9,6 +9,15 @@
 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: {

pages/index.vue

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

yarn.lock

@@ -2973,11 +2973,6 @@ markdown-it@^13.0.1:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
-marked@^4.2.12:
-  version "4.2.12"
-  resolved "https://registry.npmmirror.com/marked/-/marked-4.2.12.tgz#d69a64e21d71b06250da995dcd065c11083bebb5"
-  integrity sha512-yr8hSKa3Fv4D3jdZmtMMPghgVt6TWbk86WQaWhDloQjRSQhMMYCAro7jP7VDJrjjdV8pxVxMssXS8B8Y5DZ5aw==
-
 material-design-icons-iconfont@^6.7.0:
   version "6.7.0"
   resolved "https://registry.npmmirror.com/material-design-icons-iconfont/-/material-design-icons-iconfont-6.7.0.tgz#55cf0f3d7e4c76e032855b7e810b6e30535eff3c"