Add 2 environment variables to control the typewriter effect:

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:

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:

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()
+  if (runtimeConfig.public.typewriter) {
+    let wordIndex = 0;
+    const intervalId = setInterval(() => {
+      currentConversation.value.messages[currentConversation.value.messages.length - 1].message += nextMessage[wordIndex]
+      wordIndex++
+      if (wordIndex === nextMessage.length) {
+        clearInterval(intervalId)
+        isProcessingQueue = false
+        processMessageQueue()
+      }
+    }, runtimeConfig.public.typewriterDelay)
+  } else {
     currentConversation.value.messages[currentConversation.value.messages.length - 1].message += nextMessage
     isProcessingQueue = false
     processMessageQueue()
-  // let wordIndex = 0;
+  }
-  // const intervalId = setInterval(() => {
-  //   currentConversation.value.messages[currentConversation.value.messages.length - 1].message += nextMessage[wordIndex]
-  //   wordIndex++
-  //   if (wordIndex === nextMessage.length) {
-  //     clearInterval(intervalId)
-  //     isProcessingQueue = false
-  //     processMessageQueue()
-  //   }
-  // }, 50)
 }
 
 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"