test: output

* Update index.ts

* Update index.vue

* Update index.ts

.dockerignore

@@ -4,3 +4,4 @@ node_modules
 Dockerfile
 .*
 */.*
+!.env

.env

@@ -1,7 +1,10 @@
 # Glob API URL
 VITE_GLOB_API_URL=/api
 
-VITE_APP_API_BASE_URL=http://localhost:3002/
+VITE_APP_API_BASE_URL=http://127.0.0.1:3002/
 
 # Whether long replies are supported, which may result in higher API fees
 VITE_GLOB_OPEN_LONG_REPLY=false
+
+# When you want to use PWA
+VITE_GLOB_APP_PWA=false

.vscode/launch.json

@@ -0,0 +1,25 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Web App",
+      "url": "http://localhost:1002",
+      "webRoot": "${workspaceFolder}"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch Service Server",
+      "runtimeExecutable": "${workspaceFolder}/service/node_modules/.bin/esno",
+      "skipFiles": ["<node_internals>/**"],
+      "program": "${workspaceFolder}/service/src/index.ts",
+      "outFiles": ["${workspaceFolder}/service/**/*.js"],
+      "envFile": "${workspaceFolder}/service/.env"
+    }
+  ]
+}

.vscode/settings.json

@@ -37,6 +37,7 @@
     "linkify",
     "logprobs",
     "mdhljs",
+    "mila",
     "nodata",
     "OPENAI",
     "pinia",

CHANGELOG.md

@@ -1,3 +1,39 @@
+## v2.10.8
+
+`2023-03-23`
+
+如遇问题，请删除 `node_modules` 重新安装依赖。
+
+## Feature
+- 显示回复消息原文的选项 [[yilozt](https://github.com/Chanzhaoyu/chatgpt-web/pull/672)]
+- 添加单 `IP` 每小时请求限制。环境变量： `MAX_REQUEST_PER_HOUR` [[zhuxindong ](https://github.com/Chanzhaoyu/chatgpt-web/pull/718)]
+- 前端添加角色设定，仅 `API` 方式可见 [[quzard](https://github.com/Chanzhaoyu/chatgpt-web/pull/768)]
+- `OPENAI_API_MODEL` 变量现在对 `ChatGPTUnofficialProxyAPI` 也生效，注意：`Token` 和 `API` 的模型命名不一致，不能直接填入 `gpt-3.5` 或者 `gpt-4` [[hncboy](https://github.com/Chanzhaoyu/chatgpt-web/pull/632)]
+- 添加繁体中文 `Prompts` [[PeterDaveHello](https://github.com/Chanzhaoyu/chatgpt-web/pull/796)]
+
+## Enhancement
+- 重置回答时滚动定位至该回答 [[shunyue1320](https://github.com/Chanzhaoyu/chatgpt-web/pull/781)]
+- 当 `API` 是 `gpt-4` 时增加可用的 `Max Tokens` [[simonwu53](https://github.com/Chanzhaoyu/chatgpt-web/pull/729)]
+- 判断和忽略回复字符 [[liut](https://github.com/Chanzhaoyu/chatgpt-web/pull/474)]
+- 切换会话时，自动聚焦输入框 [[JS-an](https://github.com/Chanzhaoyu/chatgpt-web/pull/735)]
+- 渲染的链接新窗口打开
+- 查询余额可选 `API_BASE_URL` 代理地址
+- `config` 接口添加验证防止被无限制调用
+- `PWA` 默认不开启，现在需手动修改 `.env` 文件 `VITE_GLOB_APP_PWA` 变量
+- 当网络连接时，刷新页面，`500` 错误页自动跳转到主页
+
+## BugFix
+- `scrollToBottom` 调回 `scrollToBottomIfAtBottom` [[shunyue1320](https://github.com/Chanzhaoyu/chatgpt-web/pull/771)]
+- 重置异常的 `loading` 会话
+
+## Common
+- 创建 `start.cmd` 在 `windows` 下也可以运行 [vulgatecnn](https://github.com/Chanzhaoyu/chatgpt-web/pull/656)]
+- 添加 `visual-studio-code` 中调试配置 [[ChandlerVer5](https://github.com/Chanzhaoyu/chatgpt-web/pull/296)]
+- 修复文档中 `docker` 端口为本地 [[kilvn](https://github.com/Chanzhaoyu/chatgpt-web/pull/802)]
+## Other
+- 依赖更新
+
+
 ## v2.10.7
 
 `2023-03-17`

README.en.md

@@ -185,10 +185,10 @@ pnpm dev
 docker build -t chatgpt-web .
 
 # foreground operation
-docker run --name chatgpt-web --rm -it -p 3002:3002 --env OPENAI_API_KEY=your_api_key chatgpt-web
+docker run --name chatgpt-web --rm -it -p 127.0.0.1:3002:3002 --env OPENAI_API_KEY=your_api_key chatgpt-web
 
 # background operation
-docker run --name chatgpt-web -d -p 3002:3002 --env OPENAI_API_KEY=your_api_key chatgpt-web
+docker run --name chatgpt-web -d -p 127.0.0.1:3002:3002 --env OPENAI_API_KEY=your_api_key chatgpt-web
 
 # running address
 http://localhost:3002/
@@ -205,7 +205,7 @@ services:
   app:
     image: chenzhaoyu94/chatgpt-web # always use latest, pull the tag image again when updating
     ports:
-      - 3002:3002
+      - 127.0.0.1:3002:3002
     environment:
       # one of two
       OPENAI_API_KEY: xxxxxx
@@ -304,6 +304,10 @@ Q: Why doesn't the frontend have a typewriter effect?
 
 A: One possible reason is that after Nginx reverse proxying, buffering is turned on, and Nginx will try to buffer a certain amount of data from the backend before sending it to the browser. Please try adding `proxy_buffering off;` after the reverse proxy parameter and then reloading Nginx. Other web server configurations are similar.
 
+Q: The content returned is incomplete?
+
+A: There is a length limit for the content returned by the API each time. You can modify the `VITE_GLOB_OPEN_LONG_REPLY` field in the `.env` file under the root directory, set it to `true`, and rebuild the front-end to enable the long reply feature, which can return the full content. It should be noted that using this feature may bring more API usage fees.
+
 ## Contributing
 
 Please read the [Contributing Guidelines](./CONTRIBUTING.en.md) before contributing.

README.md

@@ -56,7 +56,7 @@
 1. 你应该首先使用 `API` 方式
 2. 使用 `API` 时，如果网络不通，那是国内被墙了，你需要自建代理，绝对不要使用别人的公开代理，那是危险的。
 3. 使用 `accessToken` 方式时反向代理将向第三方暴露您的访问令牌，这样做应该不会产生任何不良影响，但在使用这种方法之前请考虑风险。
-4. 使用 `accessToken` 时，不管你是国内还是国外的机器，都会使用代理。默认代理为 [acheong08](https://github.com/acheong08) 大佬的 `https://bypass.duti.tech/api/conversation`，这不是后门也不是监听，除非你有能力自己翻过 `CF` 验证，用前请知悉。[社区代理](https://github.com/transitive-bullshit/chatgpt-api#reverse-proxy)（注意：只有这两个是推荐，其他第三方来源，请自行甄别）
+4. 使用 `accessToken` 时，不管你是国内还是国外的机器，都会使用代理。默认代理为 [acheong08](https://github.com/acheong08) 大佬的 `https://bypass.churchless.tech/api/conversation`，这不是后门也不是监听，除非你有能力自己翻过 `CF` 验证，用前请知悉。[社区代理](https://github.com/transitive-bullshit/chatgpt-api#reverse-proxy)（注意：只有这两个是推荐，其他第三方来源，请自行甄别）
 5. 把项目发布到公共网络时，你应该设置 `AUTH_SECRET_KEY` 变量添加你的密码访问权限，你也应该修改 `index.html` 中的 `title`，防止被关键词搜索到。
 
 切换方式：
@@ -165,11 +165,12 @@ pnpm dev
 `ACCESS_TOKEN` 可用：
 
 - `OPENAI_ACCESS_TOKEN`  和 `OPENAI_API_KEY` 二选一，同时存在时，`OPENAI_API_KEY` 优先
-- `API_REVERSE_PROXY` 设置反向代理，可选，默认：`https://bypass.duti.tech/api/conversation`，[社区](https://github.com/transitive-bullshit/chatgpt-api#reverse-proxy)（注意：只有这两个是推荐，其他第三方来源，请自行甄别）
+- `API_REVERSE_PROXY` 设置反向代理，可选，默认：`https://bypass.churchless.tech/api/conversation`，[社区](https://github.com/transitive-bullshit/chatgpt-api#reverse-proxy)（注意：只有这两个是推荐，其他第三方来源，请自行甄别）
 
 通用：
 
 - `AUTH_SECRET_KEY` 访问权限密钥，可选
+- `MAX_REQUEST_PER_HOUR` 每小时最大请求次数，可选，默认无限
 - `TIMEOUT_MS` 超时，单位毫秒，可选
 - `SOCKS_PROXY_HOST` 和 `SOCKS_PROXY_PORT` 一起时生效，可选
 - `SOCKS_PROXY_PORT` 和 `SOCKS_PROXY_HOST` 一起时生效，可选
@@ -190,10 +191,10 @@ pnpm dev
 docker build -t chatgpt-web .
 
 # 前台运行
-docker run --name chatgpt-web --rm -it -p 3002:3002 --env OPENAI_API_KEY=your_api_key chatgpt-web
+docker run --name chatgpt-web --rm -it -p 127.0.0.1:3002:3002 --env OPENAI_API_KEY=your_api_key chatgpt-web
 
 # 后台运行
-docker run --name chatgpt-web -d -p 3002:3002 --env OPENAI_API_KEY=your_api_key chatgpt-web
+docker run --name chatgpt-web -d -p 127.0.0.1:3002:3002 --env OPENAI_API_KEY=your_api_key chatgpt-web
 
 # 运行地址
 http://localhost:3002/
@@ -210,7 +211,7 @@ services:
   app:
     image: chenzhaoyu94/chatgpt-web # 总是使用 latest ,更新时重新 pull 该 tag 镜像即可
     ports:
-      - 3002:3002
+      - 127.0.0.1:3002:3002
     environment:
       # 二选一
       OPENAI_API_KEY: sk-xxx
@@ -218,12 +219,15 @@ services:
       OPENAI_ACCESS_TOKEN: xxx
       # API接口地址，可选，设置 OPENAI_API_KEY 时可用
       OPENAI_API_BASE_URL: xxx
-      # API模型，可选，设置 OPENAI_API_KEY 时可用
+      # API模型，可选，设置 OPENAI_API_KEY 时可用，https://platform.openai.com/docs/models
+      # gpt-4, gpt-4-0314, gpt-4-32k, gpt-4-32k-0314, gpt-3.5-turbo, gpt-3.5-turbo-0301, text-davinci-003, text-davinci-002, code-davinci-002
       OPENAI_API_MODEL: xxx
       # 反向代理，可选
       API_REVERSE_PROXY: xxx
       # 访问权限密钥，可选
       AUTH_SECRET_KEY: xxx
+      # 每小时最大请求次数，可选，默认无限
+      MAX_REQUEST_PER_HOUR: 0
       # 超时，单位毫秒，可选
       TIMEOUT_MS: 60000
       # Socks代理，可选，和 SOCKS_PROXY_PORT 一起时生效
@@ -245,6 +249,7 @@ services:
 | --------------------- | ---------------------- | -------------------------------------------------------------------------------------------------- |
 | `PORT`                | 必填                   | 默认 `3002`
 | `AUTH_SECRET_KEY`          | 可选                   | 访问权限密钥                                        |
+| `MAX_REQUEST_PER_HOUR`          | 可选                   | 每小时最大请求次数，可选，默认无限                                        |
 | `TIMEOUT_MS`          | 可选                   | 超时时间，单位毫秒                                                                             |
 | `OPENAI_API_KEY`      | `OpenAI API` 二选一    | 使用 `OpenAI API` 所需的 `apiKey` [(获取 apiKey)](https://platform.openai.com/overview)            |
 | `OPENAI_ACCESS_TOKEN` | `Web API` 二选一       | 使用 `Web API` 所需的 `accessToken` [(获取 accessToken)](https://chat.openai.com/api/auth/session) |

docker-compose/docker-compose.yml

@@ -18,6 +18,8 @@ services:
       API_REVERSE_PROXY: xxx
       # 访问权限密钥，可选
       AUTH_SECRET_KEY: xxx
+      # 每小时最大请求次数，可选，默认无限
+      MAX_REQUEST_PER_HOUR: 0
       # 超时，单位毫秒，可选
       TIMEOUT_MS: 60000
       # Socks代理，可选，和 SOCKS_PROXY_PORT 一起时生效

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chatgpt-web",
-  "version": "2.10.7",
+  "version": "2.10.8",
   "private": false,
   "description": "ChatGPT Web",
   "author": "ChenZhaoYu <chenzhaoyu1994@gmail.com>",
@@ -43,6 +43,7 @@
     "@types/crypto-js": "^4.1.1",
     "@types/katex": "^0.16.0",
     "@types/markdown-it": "^12.2.3",
+    "@types/markdown-it-link-attributes": "^3.0.1",
     "@types/node": "^18.14.6",
     "@vitejs/plugin-vue": "^4.0.0",
     "autoprefixer": "^10.4.13",
@@ -52,6 +53,7 @@
     "husky": "^8.0.3",
     "less": "^4.1.3",
     "lint-staged": "^13.1.2",
+    "markdown-it-link-attributes": "^4.0.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.21",
     "rimraf": "^4.2.0",

pnpm-lock.yaml

@@ -9,6 +9,7 @@ specifiers:
   '@types/crypto-js': ^4.1.1
   '@types/katex': ^0.16.0
   '@types/markdown-it': ^12.2.3
+  '@types/markdown-it-link-attributes': ^3.0.1
   '@types/node': ^18.14.6
   '@vitejs/plugin-vue': ^4.0.0
   '@vueuse/core': ^9.13.0
@@ -23,6 +24,7 @@ specifiers:
   less: ^4.1.3
   lint-staged: ^13.1.2
   markdown-it: ^13.0.1
+  markdown-it-link-attributes: ^4.0.1
   naive-ui: ^2.34.3
   npm-run-all: ^4.1.5
   pinia: ^2.0.33
@@ -58,6 +60,7 @@ devDependencies:
   '@types/crypto-js': 4.1.1
   '@types/katex': 0.16.0
   '@types/markdown-it': 12.2.3
+  '@types/markdown-it-link-attributes': 3.0.1
   '@types/node': 18.14.6
   '@vitejs/plugin-vue': 4.0.0_vite@4.2.0+vue@3.2.47
   autoprefixer: 10.4.13_postcss@8.4.21
@@ -67,6 +70,7 @@ devDependencies:
   husky: 8.0.3
   less: 4.1.3
   lint-staged: 13.1.2
+  markdown-it-link-attributes: 4.0.1
   npm-run-all: 4.1.5
   postcss: 8.4.21
   rimraf: 4.3.0
@@ -2065,6 +2069,12 @@ packages:
     resolution: {integrity: sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==}
     dev: false
 
+  /@types/markdown-it-link-attributes/3.0.1:
+    resolution: {integrity: sha512-K8RnNb1q8j7rDOJbMF7AnlhCC/45BjrQ8z3WZWOrvkBIl8u9RXvmBdG/hfpnmK1JhhEZcmFEKWt+ilW1Mly+2Q==}
+    dependencies:
+      '@types/markdown-it': 12.2.3
+    dev: true
+
   /@types/markdown-it/12.2.3:
     resolution: {integrity: sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==}
     dependencies:
@@ -4848,6 +4858,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /markdown-it-link-attributes/4.0.1:
+    resolution: {integrity: sha512-pg5OK0jPLg62H4k7M9mRJLT61gUp9nvG0XveKYHMOOluASo9OEF13WlXrpAp2aj35LbedAy3QOCgQCw0tkLKAQ==}
+    dev: true
+
   /markdown-it/13.0.1:
     resolution: {integrity: sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==}
     hasBin: true

service/.env.example

@@ -16,6 +16,9 @@ API_REVERSE_PROXY=
 # timeout
 TIMEOUT_MS=100000
 
+# Rate Limit
+MAX_REQUEST_PER_HOUR=
+
 # Secret key
 AUTH_SECRET_KEY=
 
@@ -27,3 +30,4 @@ SOCKS_PROXY_PORT=
 
 # HTTPS PROXY
 HTTPS_PROXY=
+

service/package.json

@@ -16,7 +16,7 @@
   "scripts": {
     "start": "esno ./src/index.ts",
     "dev": "esno watch ./src/index.ts",
-    "prod": "esno ./build/index.js",
+    "prod": "node ./build/index.mjs",
     "build": "pnpm clean && tsup",
     "clean": "rimraf build",
     "lint": "eslint .",
@@ -25,10 +25,11 @@
   },
   "dependencies": {
     "axios": "^1.3.4",
-    "chatgpt": "^5.0.10",
+    "chatgpt": "^5.1.2",
     "dotenv": "^16.0.3",
     "esno": "^0.16.3",
     "express": "^4.18.2",
+    "express-rate-limit": "^6.7.0",
     "https-proxy-agent": "^5.0.1",
     "isomorphic-fetch": "^3.0.0",
     "node-fetch": "^3.3.0",

service/pnpm-lock.yaml

@@ -5,11 +5,12 @@ specifiers:
   '@types/express': ^4.17.17
   '@types/node': ^18.14.6
   axios: ^1.3.4
-  chatgpt: ^5.0.10
+  chatgpt: ^5.1.2
   dotenv: ^16.0.3
   eslint: ^8.35.0
   esno: ^0.16.3
   express: ^4.18.2
+  express-rate-limit: ^6.7.0
   https-proxy-agent: ^5.0.1
   isomorphic-fetch: ^3.0.0
   node-fetch: ^3.3.0
@@ -20,10 +21,11 @@ specifiers:
 
 dependencies:
   axios: 1.3.4
-  chatgpt: 5.0.10
+  chatgpt: 5.1.2
   dotenv: 16.0.3
   esno: 0.16.3
   express: 4.18.2
+  express-rate-limit: 6.7.0_express@4.18.2
   https-proxy-agent: 5.0.1
   isomorphic-fetch: 3.0.0
   node-fetch: 3.3.0
@@ -154,8 +156,8 @@ packages:
       chalk: 2.4.2
       js-tokens: 4.0.0
 
-  /@dqbd/tiktoken/0.4.0:
+  /@dqbd/tiktoken/1.0.2:
-    resolution: {integrity: sha512-iaHgmwKAOqowBFZKxelyszoeGLoNw62eOULcmyme1aA1Ymr3JgYl0V7jwpuUm7fksalycZajx3loFn9TRUaviw==}
+    resolution: {integrity: sha512-AjGTBRWsMoVmVeN55NLyupyM8TNamOUBl6tj5t/leLDVup3CFGO9tVagNL1jf3GyZLkWZSTmYVbPQ/M2LEcNzw==}
     dev: false
 
   /@esbuild-kit/cjs-loader/2.4.2:
@@ -920,12 +922,12 @@ packages:
     resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
     dev: true
 
-  /chatgpt/5.0.10:
+  /chatgpt/5.1.2:
-    resolution: {integrity: sha512-R3vtPlhCapFLkDXED0Cnt1DBcOZAXygr0M5U5kbSI0Fwm4uDQmc7qoIOnr17rd8eaa0JO/UDOevJdEWvd079qA==}
+    resolution: {integrity: sha512-b/NnDQHDOpouK+gmhUCKcKuvnKEh+DotwXlP6Qgw1mqmkcfVl9Wt3/3noT8jbGJpMEpFOfzexXn5Rehpea1N0w==}
     engines: {node: '>=14'}
     hasBin: true
     dependencies:
-      '@dqbd/tiktoken': 0.4.0
+      '@dqbd/tiktoken': 1.0.2
       cac: 6.7.14
       conf: 11.0.1
       eventsource-parser: 0.0.5
@@ -1740,6 +1742,15 @@ packages:
       strip-final-newline: 2.0.0
     dev: true
 
+  /express-rate-limit/6.7.0_express@4.18.2:
+    resolution: {integrity: sha512-vhwIdRoqcYB/72TK3tRZI+0ttS8Ytrk24GfmsxDXK9o9IhHNO5bXRiXQSExPQ4GbaE5tvIS7j1SGrxsuWs+sGA==}
+    engines: {node: '>= 12.9.0'}
+    peerDependencies:
+      express: ^4 || ^5
+    dependencies:
+      express: 4.18.2
+    dev: false
+
   /express/4.18.2:
     resolution: {integrity: sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==}
     engines: {node: '>= 0.10.0'}

service/src/chatgpt/index.ts

@@ -3,12 +3,17 @@ import 'isomorphic-fetch'
 import type { ChatGPTAPIOptions, ChatMessage, SendMessageOptions } from 'chatgpt'
 import { ChatGPTAPI, ChatGPTUnofficialProxyAPI } from 'chatgpt'
 import { SocksProxyAgent } from 'socks-proxy-agent'
-import { HttpsProxyAgent } from 'https-proxy-agent'
+import httpsProxyAgent from 'https-proxy-agent'
 import fetch from 'node-fetch'
 import axios from 'axios'
 import { sendResponse } from '../utils'
 import { isNotEmptyString } from '../utils/is'
 import type { ApiModel, ChatContext, ChatGPTUnofficialProxyAPIOptions, ModelConfig } from '../types'
+import type { RequestOptions } from './types'
+
+const { HttpsProxyAgent } = httpsProxyAgent
+
+dotenv.config()
 
 const ErrorCodeMessage: Record<string, string> = {
   401: '[OpenAI] 提供错误的API密钥 | Incorrect API key provided',
@@ -19,13 +24,11 @@ const ErrorCodeMessage: Record<string, string> = {
   500: '[OpenAI] 服务器繁忙，请稍后再试 | Internal Server Error',
 }
 
-dotenv.config()
-
 const timeoutMs: number = !isNaN(+process.env.TIMEOUT_MS) ? +process.env.TIMEOUT_MS : 30 * 1000
 
 let apiModel: ApiModel
 
-if (!process.env.OPENAI_API_KEY && !process.env.OPENAI_ACCESS_TOKEN)
+if (!isNotEmptyString(process.env.OPENAI_API_KEY) && !isNotEmptyString(process.env.OPENAI_ACCESS_TOKEN))
   throw new Error('Missing OPENAI_API_KEY or OPENAI_ACCESS_TOKEN environment variable')
 
 let api: ChatGPTAPI | ChatGPTUnofficialProxyAPI
@@ -33,7 +36,8 @@ let api: ChatGPTAPI | ChatGPTUnofficialProxyAPI
 (async () => {
   // More Info: https://github.com/transitive-bullshit/chatgpt-api
 
-  if (process.env.OPENAI_API_KEY) {
+  if (isNotEmptyString(process.env.OPENAI_API_KEY)) {
+    const OPENAI_API_BASE_URL = process.env.OPENAI_API_BASE_URL
     const OPENAI_API_MODEL = process.env.OPENAI_API_MODEL
     const model = isNotEmptyString(OPENAI_API_MODEL) ? OPENAI_API_MODEL : 'gpt-3.5-turbo'
 
@@ -43,8 +47,21 @@ let api: ChatGPTAPI | ChatGPTUnofficialProxyAPI
       debug: true,
     }
 
-    if (isNotEmptyString(process.env.OPENAI_API_BASE_URL))
+    // increase max token limit if use gpt-4
-      options.apiBaseUrl = process.env.OPENAI_API_BASE_URL
+    if (model.toLowerCase().includes('gpt-4')) {
+      // if use 32k model
+      if (model.toLowerCase().includes('32k')) {
+        options.maxModelTokens = 32768
+        options.maxResponseTokens = 8192
+      }
+      else {
+        options.maxModelTokens = 8192
+        options.maxResponseTokens = 2048
+      }
+    }
+
+    if (isNotEmptyString(OPENAI_API_BASE_URL))
+      options.apiBaseUrl = `${OPENAI_API_BASE_URL}/v1`
 
     setupProxy(options)
 
@@ -52,10 +69,13 @@ let api: ChatGPTAPI | ChatGPTUnofficialProxyAPI
     apiModel = 'ChatGPTAPI'
   }
   else {
+    const OPENAI_API_MODEL = process.env.OPENAI_API_MODEL
     const options: ChatGPTUnofficialProxyAPIOptions = {
       accessToken: process.env.OPENAI_ACCESS_TOKEN,
       debug: true,
     }
+    if (isNotEmptyString(OPENAI_API_MODEL))
+      options.model = OPENAI_API_MODEL
 
     if (isNotEmptyString(process.env.API_REVERSE_PROXY))
       options.apiReverseProxyUrl = process.env.API_REVERSE_PROXY
@@ -67,17 +87,19 @@ let api: ChatGPTAPI | ChatGPTUnofficialProxyAPI
   }
 })()
 
-async function chatReplyProcess(
+async function chatReplyProcess(options: RequestOptions) {
-  message: string,
+  const { message, lastContext, process, systemMessage } = options
-  lastContext?: { conversationId?: string; parentMessageId?: string },
-  process?: (chat: ChatMessage) => void,
-) {
   try {
     let options: SendMessageOptions = { timeoutMs }
 
-    if (lastContext) {
+    if (apiModel === 'ChatGPTAPI') {
+      if (isNotEmptyString(systemMessage))
+        options.systemMessage = systemMessage
+    }
+
+    if (lastContext != null) {
       if (apiModel === 'ChatGPTAPI')
-        options = { parentMessageId: lastContext.parentMessageId }
+        options.parentMessageId = lastContext.parentMessageId
       else
         options = { ...lastContext }
     }
@@ -102,15 +124,18 @@ async function chatReplyProcess(
 
 async function fetchBalance() {
   const OPENAI_API_KEY = process.env.OPENAI_API_KEY
+  const OPENAI_API_BASE_URL = process.env.OPENAI_API_BASE_URL
+
   if (!isNotEmptyString(OPENAI_API_KEY))
     return Promise.resolve('-')
 
+  const API_BASE_URL = isNotEmptyString(OPENAI_API_BASE_URL)
+    ? OPENAI_API_BASE_URL
+    : 'https://api.openai.com'
+
   try {
-    const headers = {
+    const headers = { 'Content-Type': 'application/json', 'Authorization': `Bearer ${OPENAI_API_KEY}` }
-      'Content-Type': 'application/json',
+    const response = await axios.get(`${API_BASE_URL}/dashboard/billing/credit_grants`, { headers })
-      'Authorization': `Bearer ${OPENAI_API_KEY}`,
-    }
-    const response = await axios.get('https://api.openai.com/dashboard/billing/credit_grants', { headers })
     const balance = response.data.total_available ?? 0
     return Promise.resolve(balance.toFixed(3))
   }

service/src/chatgpt/types.ts

@@ -0,0 +1,8 @@
+import type { ChatMessage } from 'chatgpt'
+
+export interface RequestOptions {
+  message: string
+  lastContext?: { conversationId?: string; parentMessageId?: string }
+  process?: (chat: ChatMessage) => void
+  systemMessage?: string
+}

service/src/index.ts

@@ -1,7 +1,9 @@
 import express from 'express'
-import type { ChatContext, ChatMessage } from './chatgpt'
+import type { RequestProps } from './types'
+import type { ChatMessage } from './chatgpt'
 import { chatConfig, chatReplyProcess, currentModel } from './chatgpt'
 import { auth } from './middleware/auth'
+import { limiter } from './middleware/limiter'
 import { isNotEmptyString } from './utils/is'
 
 const app = express()
@@ -17,15 +19,29 @@ app.all('*', (_, res, next) => {
   next()
 })
 
-router.post('/chat-process', auth, async (req, res) => {
+router.post('/chat-process', [auth, limiter], async (req, res) => {
   res.setHeader('Content-type', 'application/octet-stream')
 
   try {
-    const { prompt, options = {} } = req.body as { prompt: string; options?: ChatContext }
+    const { prompt, options = {}, systemMessage } = req.body as RequestProps
     let firstChunk = true
-    await chatReplyProcess(prompt, options, (chat: ChatMessage) => {
+    let chatLength = 0
-      res.write(firstChunk ? JSON.stringify(chat) : `\n${JSON.stringify(chat)}`)
+    let newChatLength = 0
-      firstChunk = false
+    await chatReplyProcess({
+      message: prompt,
+      lastContext: options,
+      process: (chat: ChatMessage) => {
+        if (firstChunk) {
+          res.write(`${JSON.stringify(chat)}t1h1i4s5i1s4a1s9i1l9l8y1s0plit`)
+          firstChunk = false
+        }
+        else if (chatLength !== chat.text.length) {
+          newChatLength = chat.text.length
+          res.write(chat.text.substring(chatLength, newChatLength))
+          chatLength = newChatLength
+        }
+      },
+      systemMessage,
     })
   }
   catch (error) {
@@ -36,7 +52,7 @@ router.post('/chat-process', auth, async (req, res) => {
   }
 })
 
-router.post('/config', async (req, res) => {
+router.post('/config', auth, async (req, res) => {
   try {
     const response = await chatConfig()
     res.send(response)
@@ -69,11 +85,12 @@ router.post('/verify', async (req, res) => {
     res.send({ status: 'Success', message: 'Verify successfully', data: null })
   }
   catch (error) {
-    res.send({ status: 'Fail', message: error.message, data: null })
+    res.send({ status: 'Fail', message: error.messagen, data: null })
   }
 })
 
 app.use('', router)
 app.use('/api', router)
+app.set('trust proxy', 1)
 
 app.listen(3002, () => globalThis.console.log('Server is running on port 3002'))

service/src/middleware/limiter.ts

@@ -0,0 +1,19 @@
+import { rateLimit } from 'express-rate-limit'
+import { isNotEmptyString } from '../utils/is'
+
+const MAX_REQUEST_PER_HOUR = process.env.MAX_REQUEST_PER_HOUR
+
+const maxCount = (isNotEmptyString(MAX_REQUEST_PER_HOUR) && !isNaN(Number(MAX_REQUEST_PER_HOUR)))
+  ? parseInt(MAX_REQUEST_PER_HOUR)
+  : 0 // 0 means unlimited
+
+const limiter = rateLimit({
+  windowMs: 60 * 60 * 1000, // Maximum number of accesses within an hour
+  max: maxCount,
+  statusCode: 200, // 200 means success，but the message is 'Too many request from this IP in 1 hour'
+  message: async (req, res) => {
+    res.send({ status: 'Fail', message: 'Too many request from this IP in 1 hour', data: null })
+  },
+})
+
+export { limiter }

service/src/types.ts

@@ -1,5 +1,11 @@
 import type { FetchFn } from 'chatgpt'
 
+export interface RequestProps {
+  prompt: string
+  options?: ChatContext
+  systemMessage: string
+}
+
 export interface ChatContext {
   conversationId?: string
   parentMessageId?: string

service/tsup.config.ts

@@ -4,7 +4,7 @@ export default defineConfig({
   entry: ['src/index.ts'],
   outDir: 'build',
   target: 'es2020',
-  format: ['cjs'],
+  format: ['esm'],
   splitting: false,
   sourcemap: true,
   minify: false,

src/api/index.ts

@@ -1,5 +1,6 @@
 import type { AxiosProgressEvent, GenericAbortSignal } from 'axios'
 import { post } from '@/utils/request'
+import { useSettingStore } from '@/store'
 
 export function fetchChatAPI<T = any>(
   prompt: string,
@@ -26,9 +27,11 @@ export function fetchChatAPIProcess<T = any>(
     signal?: GenericAbortSignal
     onDownloadProgress?: (progressEvent: AxiosProgressEvent) => void },
 ) {
+  const settingStore = useSettingStore()
+
   return post<T>({
     url: '/chat-process',
-    data: { prompt: params.prompt, options: params.options },
+    data: { prompt: params.prompt, options: params.options, systemMessage: settingStore.systemMessage },
     signal: params.signal,
     onDownloadProgress: params.onDownloadProgress,
   })

src/assets/recommend.json

@@ -1,14 +1,14 @@
 [
-  {
-    "key": "chatgpt-prompt-collection",
-    "desc": "Nothing1024收集整理的prompts",
-    "downloadUrl": "https://raw.githubusercontent.com/Nothing1024/chatgpt-prompt-collection/main/awesome-chatgpt-prompts-zh.json",
-    "url": "https://github.com/Nothing1024/chatgpt-prompt-collection"
-  },
   {
     "key": "awesome-chatgpt-prompts-zh",
     "desc": "ChatGPT 中文调教指南",
     "downloadUrl": "https://raw.githubusercontent.com/PlexPt/awesome-chatgpt-prompts-zh/main/prompts-zh.json",
     "url": "https://github.com/PlexPt/awesome-chatgpt-prompts-zh"
+  },
+  {
+    "key": "awesome-chatgpt-prompts-zh-TW",
+    "desc": "ChatGPT 中文調教指南 (透過 OpenAI / OpenCC 協助，從簡體中文轉換為繁體中文的版本)",
+    "downloadUrl": "https://raw.githubusercontent.com/PlexPt/awesome-chatgpt-prompts-zh/main/prompts-zh-TW.json",
+    "url": "https://github.com/PlexPt/awesome-chatgpt-prompts-zh"
   }
 ]

src/components/common/PromptStore/index.vue

@@ -1,7 +1,7 @@
 <script setup lang='ts'>
 import type { DataTableColumns } from 'naive-ui'
 import { computed, h, ref, watch } from 'vue'
-import { NButton, NCard, NDataTable, NDivider, NInput, NLayoutContent, NList, NListItem, NModal, NPopconfirm, NSpace, NTabPane, NTabs, NThing, useMessage } from 'naive-ui'
+import { NButton, NCard, NDataTable, NDivider, NInput, NList, NListItem, NModal, NPopconfirm, NSpace, NTabPane, NTabs, NThing, useMessage } from 'naive-ui'
 import PromptRecommend from '../../../assets/recommend.json'
 import { SvgIcon } from '..'
 import { usePromptStore } from '@/store'
@@ -147,7 +147,7 @@ const clearPromptTemplate = () => {
   message.success(t('common.clearSuccess'))
 }
 
-const importPromptTemplate = () => {
+const importPromptTemplate = (from = 'online') => {
   try {
     const jsonData = JSON.parse(tempPromptValue.value)
     let key = ''
@@ -168,7 +168,7 @@ const importPromptTemplate = () => {
     }
 
     for (const i of jsonData) {
-      if (!('key' in i) || !('value' in i))
+      if (!(key in i) || !(value in i))
         throw new Error(t('store.importError'))
       let safe = true
       for (const j of promptList.value) {
@@ -191,6 +191,8 @@ const importPromptTemplate = () => {
   catch {
     message.error('JSON 格式错误，请检查 JSON 格式')
   }
+  if (from === 'local')
+    showModal.value = !showModal.value
 }
 
 // 模板导出
@@ -408,17 +410,12 @@ const dataSource = computed(() => {
             </NButton>
           </div>
           <NDivider />
-          <NLayoutContent
+          <div class="max-h-[360px] overflow-y-auto space-y-4">
-            style="height: 360px"
-            content-style="background: none;"
-            :native-scrollbar="false"
-          >
             <NCard
               v-for="info in promptRecommendList"
               :key="info.key" :title="info.key"
-              style="margin: 5px;"
-              embedded
               :bordered="true"
+              embedded
             >
               <p
                 class="overflow-hidden text-ellipsis whitespace-nowrap"
@@ -442,7 +439,7 @@ const dataSource = computed(() => {
                 </div>
               </template>
             </NCard>
-          </NLayoutContent>
+          </div>
         </NTabPane>
       </NTabs>
     </div>
@@ -474,7 +471,7 @@ const dataSource = computed(() => {
         block
         type="primary"
         :disabled="inputStatus"
-        @click="() => { importPromptTemplate() }"
+        @click="() => { importPromptTemplate('local') }"
       >
         {{ t('common.import') }}
       </NButton>

src/components/common/Setting/Advanced.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { NButton, NInput, useMessage } from 'naive-ui'
+import { useSettingStore } from '@/store'
+import type { SettingsState } from '@/store/modules/settings/helper'
+import { t } from '@/locales'
+
+const settingStore = useSettingStore()
+
+const ms = useMessage()
+
+const systemMessage = ref(settingStore.systemMessage ?? '')
+
+function updateSettings(options: Partial<SettingsState>) {
+  settingStore.updateSetting(options)
+  ms.success(t('common.success'))
+}
+
+function handleReset() {
+  settingStore.resetSetting()
+  ms.success(t('common.success'))
+  window.location.reload()
+}
+</script>
+
+<template>
+  <div class="p-4 space-y-5 min-h-[200px]">
+    <div class="space-y-6">
+      <div class="flex items-center space-x-4">
+        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.role') }}</span>
+        <div class="flex-1">
+          <NInput v-model:value="systemMessage" placeholder="" />
+        </div>
+        <NButton size="tiny" text type="primary" @click="updateSettings({ systemMessage })">
+          {{ $t('common.save') }}
+        </NButton>
+      </div>
+      <div class="flex items-center space-x-4">
+        <span class="flex-shrink-0 w-[100px]">&nbsp;</span>
+        <NButton size="small" @click="handleReset">
+          {{ $t('common.reset') }}
+        </NButton>
+      </div>
+    </div>
+  </div>
+</template>

src/components/common/Setting/General.vue

@@ -150,7 +150,6 @@ function handleImportButtonClick(): void {
           {{ $t('common.save') }}
         </NButton>
       </div>
-
       <div
         class="flex items-center space-x-4"
         :class="isMobile && 'items-start'"

src/components/common/Setting/index.vue

@@ -2,13 +2,11 @@
 import { computed, ref } from 'vue'
 import { NModal, NTabPane, NTabs } from 'naive-ui'
 import General from './General.vue'
+import Advanced from './Advanced.vue'
 import About from './About.vue'
+import { useAuthStore } from '@/store'
 import { SvgIcon } from '@/components/common'
 
-const props = defineProps<Props>()
-
-const emit = defineEmits<Emit>()
-
 interface Props {
   visible: boolean
 }
@@ -17,6 +15,14 @@ interface Emit {
   (e: 'update:visible', visible: boolean): void
 }
 
+const props = defineProps<Props>()
+
+const emit = defineEmits<Emit>()
+
+const authStore = useAuthStore()
+
+const isChatGPTAPI = computed<boolean>(() => !!authStore.isChatGPTAPI)
+
 const active = ref('General')
 
 const show = computed({
@@ -42,6 +48,15 @@ const show = computed({
             <General />
           </div>
         </NTabPane>
+        <NTabPane v-if="isChatGPTAPI" name="Advanced" tab="Advanced">
+          <template #tab>
+            <SvgIcon class="text-lg" icon="ri:equalizer-line" />
+            <span class="ml-2">{{ $t('setting.advanced') }}</span>
+          </template>
+          <div class="min-h-[100px]">
+            <Advanced />
+          </div>
+        </NTabPane>
         <NTabPane name="Config" tab="Config">
           <template #tab>
             <SvgIcon class="text-lg" icon="ri:list-settings-line" />

src/locales/en-US.ts

@@ -28,6 +28,7 @@ export default {
     unauthorizedTips: 'Unauthorized, please verify first.',
   },
   chat: {
+    newChatButton: 'New Chat',
     placeholder: 'Ask me anything...(Shift + Enter = line break)',
     placeholderMobile: 'Ask me anything...',
     copy: 'Copy',
@@ -46,14 +47,18 @@ export default {
     deleteMessageConfirm: 'Are you sure to delete this message?',
     deleteHistoryConfirm: 'Are you sure to clear this history?',
     clearHistoryConfirm: 'Are you sure to clear chat history?',
+    preview: 'Preview',
+    showRawText: 'Show as raw text',
   },
   setting: {
     setting: 'Setting',
     general: 'General',
+    advanced: 'Advanced',
     config: 'Config',
     avatarLink: 'Avatar Link',
     name: 'Name',
     description: 'Description',
+    role: 'Role',
     resetUserInfo: 'Reset UserInfo',
     chatHistory: 'ChatHistory',
     theme: 'Theme',
@@ -66,6 +71,7 @@ export default {
     balance: 'API Balance',
   },
   store: {
+    siderButton: 'Prompt Store',
     local: 'Local',
     online: 'Online',
     title: 'Title',

src/locales/zh-CN.ts

@@ -28,6 +28,7 @@ export default {
     unauthorizedTips: '未经授权，请先进行验证。',
   },
   chat: {
+    newChatButton: '新建聊天',
     placeholder: '来说点什么吧...（Shift + Enter = 换行）',
     placeholderMobile: '来说点什么...',
     copy: '复制',
@@ -46,14 +47,18 @@ export default {
     deleteMessageConfirm: '是否删除此消息?',
     deleteHistoryConfirm: '确定删除此记录?',
     clearHistoryConfirm: '确定清空聊天记录?',
+    preview: '预览',
+    showRawText: '显示原文',
   },
   setting: {
     setting: '设置',
     general: '总览',
+    advanced: '高级',
     config: '配置',
     avatarLink: '头像链接',
     name: '名称',
     description: '描述',
+    role: '角色设定',
     resetUserInfo: '重置用户信息',
     chatHistory: '聊天记录',
     theme: '主题',
@@ -66,6 +71,7 @@ export default {
     balance: 'API余额',
   },
   store: {
+    siderButton: '提示词商店',
     local: '本地',
     online: '在线',
     title: '标题',

src/locales/zh-TW.ts

@@ -28,6 +28,7 @@ export default {
     unauthorizedTips: '未經授權，請先進行驗證。',
   },
   chat: {
+    newChatButton: '新建對話',
     placeholder: '來說點什麼...（Shift + Enter = 換行）',
     placeholderMobile: '來說點什麼...',
     copy: '複製',
@@ -46,14 +47,18 @@ export default {
     deleteMessageConfirm: '是否刪除此訊息?',
     deleteHistoryConfirm: '確定刪除此紀錄?',
     clearHistoryConfirm: '確定清除紀錄?',
+    preview: '預覽',
+    showRawText: '顯示原文',
   },
   setting: {
     setting: '設定',
     general: '總覽',
+    advanced: '高級',
     config: '設定',
     avatarLink: '頭貼連結',
     name: '名稱',
     description: '描述',
+    role: '角色設定',
     resetUserInfo: '重設使用者資訊',
     chatHistory: '紀錄',
     theme: '主題',
@@ -66,6 +71,7 @@ export default {
     balance: 'API余額',
   },
   store: {
+    siderButton: '提示詞商店',
     local: '本機',
     online: '線上',
     title: '標題',

src/router/permission.ts

@@ -9,7 +9,10 @@ export function setupPageGuard(router: Router) {
         const data = await authStore.getSession()
         if (String(data.auth) === 'false' && authStore.token)
           authStore.removeToken()
-        next()
+        if (to.path === '/500')
+          next({ name: 'Root' })
+        else
+          next()
       }
       catch (error) {
         if (to.path !== '/500')

src/store/modules/index.ts

@@ -2,4 +2,5 @@ export * from './app'
 export * from './chat'
 export * from './user'
 export * from './prompt'
+export * from './settings'
 export * from './auth'

src/store/modules/settings/helper.ts

@@ -0,0 +1,27 @@
+import { ss } from '@/utils/storage'
+
+const LOCAL_NAME = 'settingsStorage'
+
+export interface SettingsState {
+  systemMessage: string
+}
+
+export function defaultSetting(): SettingsState {
+  const currentDate = new Date().toISOString().split('T')[0]
+  return {
+    systemMessage: `You are ChatGPT, a large language model trained by OpenAI. Answer as concisely as possible.\nKnowledge cutoff: 2021-09-01\nCurrent date: ${currentDate}`,
+  }
+}
+
+export function getLocalState(): SettingsState {
+  const localSetting: SettingsState | undefined = ss.get(LOCAL_NAME)
+  return { ...defaultSetting(), ...localSetting }
+}
+
+export function setLocalState(setting: SettingsState): void {
+  ss.set(LOCAL_NAME, setting)
+}
+
+export function removeLocalState() {
+  ss.remove(LOCAL_NAME)
+}

src/store/modules/settings/index.ts

@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia'
+import type { SettingsState } from './helper'
+import { defaultSetting, getLocalState, removeLocalState, setLocalState } from './helper'
+
+export const useSettingStore = defineStore('setting-store', {
+  state: (): SettingsState => getLocalState(),
+  actions: {
+    updateSetting(settings: Partial<SettingsState>) {
+      this.$state = { ...this.$state, ...settings }
+      this.recordState()
+    },
+
+    resetSetting() {
+      this.$state = defaultSetting()
+      removeLocalState()
+    },
+
+    recordState() {
+      setLocalState(this.$state)
+    },
+  },
+})

src/typings/env.d.ts

@@ -2,6 +2,7 @@
 
 interface ImportMetaEnv {
 	readonly VITE_GLOB_API_URL: string;
-	readonly VITE_GLOB_API_TIMEOUT: string;
 	readonly VITE_APP_API_BASE_URL: string;
+	readonly VITE_GLOB_OPEN_LONG_REPLY: string;
+	readonly VITE_GLOB_APP_PWA: string;
 }

src/utils/functions/debounce.ts

@@ -0,0 +1,18 @@
+type CallbackFunc<T extends unknown[]> = (...args: T) => void
+
+export function debounce<T extends unknown[]>(
+  func: CallbackFunc<T>,
+  wait: number,
+): (...args: T) => void {
+  let timeoutId: ReturnType<typeof setTimeout> | undefined
+
+  return (...args: T) => {
+    const later = () => {
+      clearTimeout(timeoutId)
+      func(...args)
+    }
+
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(later, wait)
+  }
+}

src/views/chat/components/Message/Text.vue

@@ -2,6 +2,7 @@
 import { computed, ref } from 'vue'
 import MarkdownIt from 'markdown-it'
 import mdKatex from '@traptitech/markdown-it-katex'
+import mila from 'markdown-it-link-attributes'
 import hljs from 'highlight.js'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { t } from '@/locales'
@@ -11,6 +12,7 @@ interface Props {
   error?: boolean
   text?: string
   loading?: boolean
+  asRawText?: boolean
 }
 
 const props = defineProps<Props>()
@@ -31,6 +33,7 @@ const mdi = new MarkdownIt({
   },
 })
 
+mdi.use(mila, { attrs: { target: '_blank', rel: 'noopener' } })
 mdi.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' })
 
 const wrapClass = computed(() => {
@@ -41,13 +44,14 @@ const wrapClass = computed(() => {
     isMobile.value ? 'p-2' : 'px-3 py-2',
     props.inversion ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]',
     props.inversion ? 'dark:bg-[#a1dc95]' : 'dark:bg-[#1e1e20]',
+    props.inversion ? 'message-request' : 'message-reply',
     { 'text-red-500': props.error },
   ]
 })
 
 const text = computed(() => {
   const value = props.text ?? ''
-  if (!props.inversion)
+  if (!props.asRawText)
     return mdi.render(value)
   return value
 })
@@ -66,7 +70,10 @@ defineExpose({ textRef })
     </template>
     <template v-else>
       <div ref="textRef" class="leading-relaxed break-words">
-        <div v-if="!inversion" class="markdown-body" v-html="text" />
+        <div v-if="!inversion">
+          <div v-if="!asRawText" class="markdown-body" v-html="text" />
+          <div v-else class="whitespace-pre-wrap" v-text="text" />
+        </div>
         <div v-else class="whitespace-pre-wrap" v-text="text" />
       </div>
     </template>

src/views/chat/components/Message/index.vue

@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { NDropdown } from 'naive-ui'
 import AvatarComponent from './Avatar.vue'
 import TextComponent from './Text.vue'
@@ -7,6 +7,7 @@ import { SvgIcon } from '@/components/common'
 import { copyText } from '@/utils/format'
 import { useIconRender } from '@/hooks/useIconRender'
 import { t } from '@/locales'
+import { useBasicLayout } from '@/hooks/useBasicLayout'
 
 interface Props {
   dateTime?: string
@@ -25,40 +26,66 @@ const props = defineProps<Props>()
 
 const emit = defineEmits<Emit>()
 
+const { isMobile } = useBasicLayout()
+
 const { iconRender } = useIconRender()
 
 const textRef = ref<HTMLElement>()
 
-const options = [
+const asRawText = ref(props.inversion)
-  {
-    label: t('chat.copy'),
-    key: 'copyText',
-    icon: iconRender({ icon: 'ri:file-copy-2-line' }),
-  },
-  {
-    label: t('common.delete'),
-    key: 'delete',
-    icon: iconRender({ icon: 'ri:delete-bin-line' }),
-  },
-]
 
-function handleSelect(key: 'copyRaw' | 'copyText' | 'delete') {
+const messageRef = ref<HTMLElement>()
+
+const options = computed(() => {
+  const common = [
+    {
+      label: t('chat.copy'),
+      key: 'copyText',
+      icon: iconRender({ icon: 'ri:file-copy-2-line' }),
+    },
+    {
+      label: t('common.delete'),
+      key: 'delete',
+      icon: iconRender({ icon: 'ri:delete-bin-line' }),
+    },
+  ]
+
+  if (!props.inversion) {
+    common.unshift({
+      label: asRawText.value ? t('chat.preview') : t('chat.showRawText'),
+      key: 'toggleRenderType',
+      icon: iconRender({ icon: asRawText.value ? 'ic:outline-code-off' : 'ic:outline-code' }),
+    })
+  }
+
+  return common
+})
+
+function handleSelect(key: 'copyText' | 'delete' | 'toggleRenderType') {
   switch (key) {
     case 'copyText':
       copyText({ text: props.text ?? '' })
       return
+    case 'toggleRenderType':
+      asRawText.value = !asRawText.value
+      return
     case 'delete':
       emit('delete')
   }
 }
 
 function handleRegenerate() {
+  messageRef.value?.scrollIntoView()
   emit('regenerate')
 }
 </script>
 
 <template>
-  <div class="flex w-full mb-6 overflow-hidden" :class="[{ 'flex-row-reverse': inversion }]">
+  <div
+    ref="messageRef"
+    class="flex w-full mb-6 overflow-hidden"
+    :class="[{ 'flex-row-reverse': inversion }]"
+  >
     <div
       class="flex items-center justify-center flex-shrink-0 h-8 overflow-hidden rounded-full basis-8"
       :class="[inversion ? 'ml-2' : 'mr-2']"
@@ -79,6 +106,7 @@ function handleRegenerate() {
           :error="error"
           :text="text"
           :loading="loading"
+          :as-raw-text="asRawText"
         />
         <div class="flex flex-col">
           <button
@@ -88,7 +116,12 @@ function handleRegenerate() {
           >
             <SvgIcon icon="ri:restart-line" />
           </button>
-          <NDropdown :placement="!inversion ? 'right' : 'left'" :options="options" @select="handleSelect">
+          <NDropdown
+            :trigger="isMobile ? 'click' : 'hover'"
+            :placement="!inversion ? 'right' : 'left'"
+            :options="options"
+            @select="handleSelect"
+          >
             <button class="transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-200">
               <SvgIcon icon="ri:more-2-fill" />
             </button>

src/views/chat/components/Message/style.less

@@ -45,20 +45,29 @@
 			align-items: center;
 			color: #b3b3b3;
 
-			&__copy{
+			&__copy {
 				cursor: pointer;
 				margin-left: 0.5rem;
 				user-select: none;
+
 				&:hover {
 					color: #65a665;
 				}
 			}
 		}
 	}
+
 }
 
 html.dark {
 
+	.message-reply {
+		.whitespace-pre-wrap {
+			white-space: pre-wrap;
+			color: var(--n-text-color);
+		}
+	}
+
 	.highlight pre,
 	pre {
 		background-color: #282c34;

src/views/chat/hooks/useScroll.ts

@@ -28,7 +28,7 @@ export function useScroll(): ScrollReturn {
   const scrollToBottomIfAtBottom = async () => {
     await nextTick()
     if (scrollRef.value) {
-      const threshold = 50 // 阈值，表示滚动条到底部的距离阈值
+      const threshold = 100 // 阈值，表示滚动条到底部的距离阈值
       const distanceToBottom = scrollRef.value.scrollHeight - scrollRef.value.scrollTop - scrollRef.value.clientHeight
       if (distanceToBottom <= threshold)
         scrollRef.value.scrollTop = scrollRef.value.scrollHeight

src/views/chat/index.vue

@@ -1,4 +1,5 @@
 <script setup lang='ts'>
+import type { Ref } from 'vue'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { storeToRefs } from 'pinia'
@@ -30,7 +31,7 @@ useCopyCode()
 
 const { isMobile } = useBasicLayout()
 const { addChat, updateChat, updateChatSome, getChatByUuidAndIndex } = useChat()
-const { scrollRef, scrollToBottom } = useScroll()
+const { scrollRef, scrollToBottom, scrollToBottomIfAtBottom } = useScroll()
 const { usingContext, toggleUsingContext } = useUsingContext()
 
 const { uuid } = route.params as { uuid: string }
@@ -40,12 +41,20 @@ const conversationList = computed(() => dataSources.value.filter(item => (!item.
 
 const prompt = ref<string>('')
 const loading = ref<boolean>(false)
+const inputRef = ref<Ref | null>(null)
 
 // 添加PromptStore
 const promptStore = usePromptStore()
+
 // 使用storeToRefs，保证store修改后，联想部分能够重新渲染
 const { promptList: promptTemplate } = storeToRefs<any>(promptStore)
 
+// 未知原因刷新页面，loading 状态不会重置，手动重置
+dataSources.value.forEach((item, index) => {
+  if (item.loading)
+    updateChatSome(+uuid, index, { loading: false })
+})
+
 function handleSubmit() {
   onConversation()
 }
@@ -98,7 +107,9 @@ async function onConversation() {
   scrollToBottom()
 
   try {
-    let lastText = ''
+    const magicSplit = 't1h1i4s5i1s4a1s9i1l9l8y1s0plit'
+    let renderText = ''
+    let firstTime = true
     const fetchChatAPIOnce = async () => {
       await fetchChatAPIProcess<Chat.ConversationResponse>({
         prompt: message,
@@ -108,42 +119,49 @@ async function onConversation() {
           const xhr = event.target
           const { responseText } = xhr
           // Always process the final line
-          const lastIndex = responseText.lastIndexOf('\n')
-          let chunk = responseText
-          if (lastIndex !== -1)
-            chunk = responseText.substring(lastIndex)
-          try {
-            const data = JSON.parse(chunk)
-            updateChat(
-              +uuid,
-              dataSources.value.length - 1,
-              {
-                dateTime: new Date().toLocaleString(),
-                text: lastText + data.text ?? '',
-                inversion: false,
-                error: false,
-                loading: false,
-                conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
-                requestOptions: { prompt: message, options: { ...options } },
-              },
-            )
 
-            if (openLongReply && data.detail.choices[0].finish_reason === 'length') {
+          const splitIndexBegin = responseText.search(magicSplit)
-              options.parentMessageId = data.id
+          if (splitIndexBegin !== -1) {
-              lastText = data.text
+            const splitIndexEnd = splitIndexBegin + magicSplit.length
-              message = ''
+
-              return fetchChatAPIOnce()
+            const firstChunk = responseText.substring(0, splitIndexBegin)
+            const deltaText = responseText.substring(splitIndexEnd)
+            try {
+              const data = JSON.parse(firstChunk)
+              if (firstTime) {
+                firstTime = false
+                renderText = data.text ?? ''
+              }
+              else {
+                renderText = deltaText ?? ''
+              }
+              updateChat(
+                +uuid,
+                dataSources.value.length - 1,
+                {
+                  dateTime: new Date().toLocaleString(),
+                  text: renderText,
+                  inversion: false,
+                  error: false,
+                  loading: false,
+                  conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
+                  requestOptions: { prompt: message, ...options },
+                },
+              )
+
+              if (openLongReply && data.detail.choices[0].finish_reason === 'length') {
+                options.parentMessageId = data.id
+                message = ''
+                return fetchChatAPIOnce()
+              }
+            }
+            catch (error) {
+              //
             }
-
-            scrollToBottom()
-          }
-          catch (error) {
-          //
           }
         },
       })
     }
-
     await fetchChatAPIOnce()
   }
   catch (error: any) {
@@ -157,7 +175,7 @@ async function onConversation() {
           loading: false,
         },
       )
-      scrollToBottom()
+      scrollToBottomIfAtBottom()
       return
     }
 
@@ -189,7 +207,7 @@ async function onConversation() {
         requestOptions: { prompt: message, options: { ...options } },
       },
     )
-    scrollToBottom()
+    scrollToBottomIfAtBottom()
   }
   finally {
     loading.value = false
@@ -228,7 +246,9 @@ async function onRegenerate(index: number) {
   )
 
   try {
-    let lastText = ''
+    const magicSplit = 't1h1i4s5i1s4a1s9i1l9l8y1s0plit'
+    let renderText = ''
+    let firstTime = true
     const fetchChatAPIOnce = async () => {
       await fetchChatAPIProcess<Chat.ConversationResponse>({
         prompt: message,
@@ -238,35 +258,45 @@ async function onRegenerate(index: number) {
           const xhr = event.target
           const { responseText } = xhr
           // Always process the final line
-          const lastIndex = responseText.lastIndexOf('\n')
-          let chunk = responseText
-          if (lastIndex !== -1)
-            chunk = responseText.substring(lastIndex)
-          try {
-            const data = JSON.parse(chunk)
-            updateChat(
-              +uuid,
-              index,
-              {
-                dateTime: new Date().toLocaleString(),
-                text: lastText + data.text ?? '',
-                inversion: false,
-                error: false,
-                loading: false,
-                conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
-                requestOptions: { prompt: message, ...options },
-              },
-            )
 
-            if (openLongReply && data.detail.choices[0].finish_reason === 'length') {
+          const splitIndexBegin = responseText.search(magicSplit)
-              options.parentMessageId = data.id
+          if (splitIndexBegin !== -1) {
-              lastText = data.text
+            const splitIndexEnd = splitIndexBegin + magicSplit.length
-              message = ''
+
-              return fetchChatAPIOnce()
+            const firstChunk = responseText.substring(0, splitIndexBegin)
+            const deltaText = responseText.substring(splitIndexEnd)
+            try {
+              const data = JSON.parse(firstChunk)
+              if (firstTime) {
+                firstTime = false
+                renderText = data.text ?? ''
+              }
+              else {
+                renderText = deltaText ?? ''
+              }
+              updateChat(
+                +uuid,
+                index,
+                {
+                  dateTime: new Date().toLocaleString(),
+                  text: renderText,
+                  inversion: false,
+                  error: false,
+                  loading: false,
+                  conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
+                  requestOptions: { prompt: message, ...options },
+                },
+              )
+
+              if (openLongReply && data.detail.choices[0].finish_reason === 'length') {
+                options.parentMessageId = data.id
+                message = ''
+                return fetchChatAPIOnce()
+              }
+            }
+            catch (error) {
+              //
             }
-          }
-          catch (error) {
-            //
           }
         },
       })
@@ -445,6 +475,8 @@ const footerClass = computed(() => {
 
 onMounted(() => {
   scrollToBottom()
+  if (inputRef.value && !isMobile.value)
+    inputRef.value?.focus()
 })
 
 onUnmounted(() => {
@@ -456,20 +488,13 @@ onUnmounted(() => {
 <template>
   <div class="flex flex-col w-full h-full">
     <HeaderComponent
-      v-if="isMobile"
+      v-if="isMobile" :using-context="usingContext" @export="handleExport"
-      :using-context="usingContext"
-      @export="handleExport"
       @toggle-using-context="toggleUsingContext"
     />
     <main class="flex-1 overflow-hidden">
-      <div
+      <div id="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto">
-        id="scrollRef"
-        ref="scrollRef"
-        class="h-full overflow-hidden overflow-y-auto"
-      >
         <div
-          id="image-wrapper"
+          id="image-wrapper" class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
-          class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
           :class="[isMobile ? 'p-2' : 'p-4']"
         >
           <template v-if="!dataSources.length">
@@ -481,14 +506,8 @@ onUnmounted(() => {
           <template v-else>
             <div>
               <Message
-                v-for="(item, index) of dataSources"
+                v-for="(item, index) of dataSources" :key="index" :date-time="item.dateTime" :text="item.text"
-                :key="index"
+                :inversion="item.inversion" :error="item.error" :loading="item.loading" @regenerate="onRegenerate(index)"
-                :date-time="item.dateTime"
-                :text="item.text"
-                :inversion="item.inversion"
-                :error="item.error"
-                :loading="item.loading"
-                @regenerate="onRegenerate(index)"
                 @delete="handleDelete(index)"
               />
               <div class="sticky bottom-0 left-0 flex justify-center">
@@ -525,14 +544,9 @@ onUnmounted(() => {
           <NAutoComplete v-model:value="prompt" :options="searchOptions" :render-label="renderOption">
             <template #default="{ handleInput, handleBlur, handleFocus }">
               <NInput
-                v-model:value="prompt"
+                ref="inputRef" v-model:value="prompt" type="textarea" :placeholder="placeholder"
-                type="textarea"
+                :autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }" @input="handleInput" @focus="handleFocus"
-                :placeholder="placeholder"
+                @blur="handleBlur" @keypress="handleEnter"
-                :autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }"
-                @input="handleInput"
-                @focus="handleFocus"
-                @blur="handleBlur"
-                @keypress="handleEnter"
               />
             </template>
           </NAutoComplete>

src/views/chat/layout/sider/List.vue

@@ -4,6 +4,7 @@ import { NInput, NPopconfirm, NScrollbar } from 'naive-ui'
 import { SvgIcon } from '@/components/common'
 import { useAppStore, useChatStore } from '@/store'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
+import { debounce } from '@/utils/functions/debounce'
 
 const { isMobile } = useBasicLayout()
 
@@ -32,8 +33,12 @@ function handleEdit({ uuid }: Chat.History, isEdit: boolean, event?: MouseEvent)
 function handleDelete(index: number, event?: MouseEvent | TouchEvent) {
   event?.stopPropagation()
   chatStore.deleteHistory(index)
+  if (isMobile.value)
+    appStore.setSiderCollapsed(true)
 }
 
+const handleDeleteDebounce = debounce(handleDelete, 600)
+
 function handleEnter({ uuid }: Chat.History, isEdit: boolean, event: KeyboardEvent) {
   event?.stopPropagation()
   if (event.key === 'Enter')
@@ -67,8 +72,7 @@ function isActive(uuid: number) {
             <div class="relative flex-1 overflow-hidden break-all text-ellipsis whitespace-nowrap">
               <NInput
                 v-if="item.isEdit"
-                v-model:value="item.title"
+                v-model:value="item.title" size="tiny"
-                size="tiny"
                 @keypress="handleEnter(item, false, $event)"
               />
               <span v-else>{{ item.title }}</span>
@@ -83,7 +87,7 @@ function isActive(uuid: number) {
                 <button class="p-1">
                   <SvgIcon icon="ri:edit-line" @click="handleEdit(item, true, $event)" />
                 </button>
-                <NPopconfirm placement="bottom" @positive-click="handleDelete(index, $event)">
+                <NPopconfirm placement="bottom" @positive-click="handleDeleteDebounce(index, $event)">
                   <template #trigger>
                     <button class="p-1">
                       <SvgIcon icon="ri:delete-bin-line" />

src/views/chat/layout/sider/index.vue

@@ -18,6 +18,8 @@ const collapsed = computed(() => appStore.siderCollapsed)
 
 function handleAdd() {
   chatStore.addHistory({ title: 'New Chat', uuid: Date.now(), isEdit: false })
+  if (isMobile.value)
+    appStore.setSiderCollapsed(true)
 }
 
 function handleUpdateCollapsed() {
@@ -71,7 +73,7 @@ watch(
       <main class="flex flex-col flex-1 min-h-0">
         <div class="p-4">
           <NButton dashed block @click="handleAdd">
-            New chat
+            {{ $t('chat.newChatButton') }}
           </NButton>
         </div>
         <div class="flex-1 min-h-0 pb-4 overflow-hidden">
@@ -79,7 +81,7 @@ watch(
         </div>
         <div class="p-4">
           <NButton block @click="show = true">
-            Prompt Store
+            {{ $t('store.siderButton') }}
           </NButton>
         </div>
       </main>

start.cmd

@@ -0,0 +1,9 @@
+cd ./service
+start pnpm start > service.log &
+echo "Start service complete!"
+
+
+cd ..
+echo "" > front.log
+start pnpm dev > front.log &
+echo "Start front complete!"

vite.config.ts

@@ -1,8 +1,26 @@
 import path from 'path'
+import type { PluginOption } from 'vite'
 import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { VitePWA } from 'vite-plugin-pwa'
 
+function setupPlugins(env: ImportMetaEnv): PluginOption[] {
+  return [
+    vue(),
+    env.VITE_GLOB_APP_PWA === 'true' && VitePWA({
+      injectRegister: 'auto',
+      manifest: {
+        name: 'chatGPT',
+        short_name: 'chatGPT',
+        icons: [
+          { src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
+          { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' },
+        ],
+      },
+    }),
+  ]
+}
+
 export default defineConfig((env) => {
   const viteEnv = loadEnv(env.mode, process.cwd()) as unknown as ImportMetaEnv
 
@@ -12,20 +30,7 @@ export default defineConfig((env) => {
         '@': path.resolve(process.cwd(), 'src'),
       },
     },
-    plugins: [
+    plugins: setupPlugins(viteEnv),
-      vue(),
-      VitePWA({
-        injectRegister: 'auto',
-        manifest: {
-          name: 'chatGPT',
-          short_name: 'chatGPT',
-          icons: [
-            { src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
-            { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' },
-          ],
-        },
-      }),
-    ],
     server: {
       host: '0.0.0.0',
       port: 1002,