Merge pull request #347 from Chanzhaoyu/refactor

chore: version 2.9.3
2025-07-23 05:53:42 +00:00 · 2023-03-06 20:44:43 +08:00 · 2023-03-06 20:41:42 +08:00 · 2023-03-06 20:34:29 +08:00 · 2023-03-06 19:27:14 +08:00 · 2023-03-06 19:25:40 +08:00
67 changed files with 2507 additions and 855 deletions
--- a/.env
+++ b/.env
@@ -2,6 +2,3 @@
 VITE_GLOB_API_URL=/api

 VITE_APP_API_BASE_URL=http://localhost:3002/
-
-# Glob API Timeout (ms)
-VITE_GLOB_API_TIMEOUT=100000
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -29,8 +29,14 @@
    "dockerhub",
    "esno",
    "GPTAPI",
+    "highlightjs",
+    "hljs",
    "iconify",
+    "katex",
+    "katexmath",
+    "linkify",
    "logprobs",
+    "mdhljs",
    "nodata",
    "OPENAI",
    "pinia",
@@ -38,11 +44,21 @@
    "rushstack",
    "Sider",
    "tailwindcss",
+    "traptitech",
    "tsup",
    "Typecheck",
    "unplugin",
    "VITE",
    "vueuse",
    "Zhao"
-  ]
+  ],
+  "i18n-ally.enabledParsers": [
+    "ts"
+  ],
+  "i18n-ally.sortKeys": true,
+  "i18n-ally.keepFulfilled": true,
+  "i18n-ally.localesPaths": [
+    "src/locales"
+  ],
+  "i18n-ally.keystyle": "nested"
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,86 @@
+## v2.9.3
+
+`2023-03-06`
+
+## Enhancement
+- 感谢 [ChandlerVer5](https://github.com/Chanzhaoyu/chatgpt-web/pull/305) 使用 `markdown-it` 替换 `marked`，解决代码块闪烁的问题
+- 感谢 [shansing](https://github.com/Chanzhaoyu/chatgpt-web/pull/277) 改善文档
+- 感谢 [nalf3in](https://github.com/Chanzhaoyu/chatgpt-web/pull/293) 添加英文翻译
+
+## BugFix
+- 感谢[sepcnt ](https://github.com/Chanzhaoyu/chatgpt-web/pull/279) 修复切换记录时编辑状态未关闭的问题
+- 修复复制代码的兼容性报错问题
+- 修复部分优化小问题
+
+## v2.9.2
+
+`2023-03-04`
+
+手动部署的同学，务必删除根目录和`service`中的`node_modules`重新安装依赖，降低出现问题的概率，自动部署的不需要做改动。
+
+### Feature
+- 感谢 [hyln9](https://github.com/Chanzhaoyu/chatgpt-web/pull/247) 添加对渲染 `LaTex` 数学公式的支持
+- 感谢 [ottocsb](https://github.com/Chanzhaoyu/chatgpt-web/pull/227) 添加支持 `webAPP` (苹果添加到主页书签访问)支持
+- 添加 `OPENAI_API_BASE_URL` 可选环境变量[#249]
+## Enhancement
+- 优化在高分屏上主题内容的最大宽度[#257]
+- 现在文字按单词截断[#215][#225]
+### BugFix
+- 修复动态生成时代码块不能被复制的问题[#251][#260]
+- 修复 `iOS` 移动端输入框不会被键盘顶起的问题[#256]
+- 修复控制台渲染警告
+## Other
+- 更新依赖至最新
+- 修改 `README` 内容
+
+## v2.9.1
+
+`2023-03-02`
+
+### Feature
+- 代码块添加当前代码语言显示和复制功能[#197][#196]
+- 完善多语言，现在可以切换中英文显示
+
+## Enhancement
+- 由[Zo3i](https://github.com/Chanzhaoyu/chatgpt-web/pull/187) 完善 `docker-compose` 部署文档
+
+### BugFix
+- 由 [ottocsb](https://github.com/Chanzhaoyu/chatgpt-web/pull/200) 修复头像修改不同步的问题
+## Other
+- 更新依赖至最新
+- 修改 `README` 内容
+## v2.9.0
+
+`2023-03-02`
+
+### Feature
+- 现在能复制带格式的消息文本
+- 新设计的设定页面，可以自定义姓名、描述、头像（链接方式）
+- 新增`403`和`404`页面以便扩展
+
+## Enhancement
+- 更新 `chatgpt` 使 `ChatGPTAPI` 支持 `gpt-3.5-turbo-0301`（默认）
+- 取消了前端超时限制设定
+
+## v2.8.3
+
+`2023-03-01`
+
+### Feature
+- 消息已输出内容不会因为中断而消失[#167]
+- 添加复制消息按钮[#133]
+
+### Other
+- `README` 添加声明内容
+
+## v2.8.2
+
+`2023-02-28`
+### Enhancement
+- 代码主题调整为 `One Dark - light|dark` 适配深色模式
+### BugFix
+- 修复普通文本代码渲染和深色模式下的问题[#139][#154]
+
 ## v2.8.1

 `2023-02-27`
--- a/CONTRIBUTING.en.md
+++ b/CONTRIBUTING.en.md
@@ -0,0 +1,49 @@
+# Contribution Guide
+Thank you for your valuable time. Your contributions will make this project better! Before submitting a contribution, please take some time to read the getting started guide below.
+
+## Semantic Versioning
+This project follows semantic versioning. We release patch versions for important bug fixes, minor versions for new features or non-important changes, and major versions for significant and incompatible changes.
+
+Each major change will be recorded in the `changelog`.
+
+## Submitting Pull Request
+1. Fork [this repository](https://github.com/Chanzhaoyu/chatgpt-web) and create a branch from `main`. For new feature implementations, submit a pull request to the `feature` branch. For other changes, submit to the `main` branch.
+2. Install the `pnpm` tool using `npm install pnpm -g`.
+3. Install the `Eslint` plugin for `VSCode`, or enable `eslint` functionality for other editors such as `WebStorm`.
+4. Execute `pnpm bootstrap` in the root directory.
+5. Execute `pnpm install` in the `/service/` directory.
+6. Make changes to the codebase. If applicable, ensure that appropriate testing has been done.
+7. Execute `pnpm lint:fix` in the root directory to perform a code formatting check.
+8. Execute `pnpm type-check` in the root directory to perform a type check.
+9. Submit a git commit, following the [Commit Guidelines](#commit-guidelines).
+10. Submit a `pull request`. If there is a corresponding `issue`, please link it using the [linking-a-pull-request-to-an-issue keyword](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword).
+
+## Commit Guidelines
+
+Commit messages should follow the [conventional-changelog standard](https://www.conventionalcommits.org/en/v1.0.0/):
+
+```bash
+<type>[optional scope]: <description>
+
+[optional body]
+
+[optional footer]
+```
+
+### Commit Types
+
+The following is a list of commit types:
+
+- feat: New feature or functionality
+- fix: Bug fix
+- docs: Documentation update
+- style: Code style or component style update
+- refactor: Code refactoring, no new features or bug fixes introduced
+- perf: Performance optimization
+- test: Unit test
+- chore: Other commits that do not modify src or test files
+
+
+## License
+
+[MIT](./license)
--- a/README.en.md
+++ b/README.en.md
@@ -0,0 +1,312 @@
+# ChatGPT Web
+
+<div style="font-size: 1.5rem;">
+  <a href="./README.md">中文</a> |
+  <a href="./README.en.md">English</a>
+</div>
+</br>
+
+> Disclaimer: This project is only released on GitHub, under the MIT License, free and for open-source learning purposes. There will be no account selling, paid services, discussion groups, or forums. Beware of fraud.
+
+![cover](./docs/c1.png)
+![cover2](./docs/c2.png)
+
+- [ChatGPT Web](#chatgpt-web)
+	- [Introduction](#introduction)
+	- [Roadmap](#roadmap)
+	- [Prerequisites](#prerequisites)
+		- [Node](#node)
+		- [PNPM](#pnpm)
+		- [Fill in the Keys](#fill-in-the-keys)
+	- [Install Dependencies](#install-dependencies)
+		- [Backend](#backend)
+		- [Frontend](#frontend)
+	- [Run in Test Environment](#run-in-test-environment)
+		- [Backend Service](#backend-service)
+		- [Frontend Webpage](#frontend-webpage)
+	- [Packaging](#packaging)
+		- [Using Docker](#using-docker)
+			- [Docker Parameter Example](#docker-parameter-example)
+			- [Docker Build \& Run](#docker-build--run)
+			- [Docker Compose](#docker-compose)
+		- [Deployment with Railway](#deployment-with-railway)
+			- [Railway Environment Variables](#railway-environment-variables)
+		- [Manual packaging](#manual-packaging)
+			- [Backend service](#backend-service-1)
+			- [Frontend webpage](#frontend-webpage-1)
+	- [Frequently Asked Questions](#frequently-asked-questions)
+	- [Contributing](#contributing)
+	- [Sponsorship](#sponsorship)
+	- [License](#license)
+
+## Introduction
+
+Supports dual models, provides two unofficial `ChatGPT API` methods:
+
+| Method                                        | Free?  | Reliability | Quality |
+| --------------------------------------------- | ------ | ----------- | ------- |
+| `ChatGPTAPI(gpt-3.5-turbo-0301)`                           | No     | Reliable    | Relatively clumsy |
+| `ChatGPTUnofficialProxyAPI(Web accessToken)` | Yes    | Relatively unreliable | Smart |
+
+Comparison:
+1. `ChatGPTAPI` uses `gpt-3.5-turbo-0301` to simulate `ChatGPT` through the official `OpenAI` completion `API` (the most reliable method, but it is not free and does not use models specifically tuned for chat).
+2. `ChatGPTUnofficialProxyAPI` accesses `ChatGPT`'s backend `API` via an unofficial proxy server to bypass `Cloudflare` (uses the real `ChatGPT`, is very lightweight, but depends on third-party servers and has rate limits).
+
+[Details](https://github.com/Chanzhaoyu/chatgpt-web/issues/138)
+
+Switching Methods:
+1. Go to the `service/.env` file.
+2. For `OpenAI API Key`, fill in the `OPENAI_API_KEY` field [(Get apiKey)](https://platform.openai.com/overview).
+3. For `Web API`, fill in the `OPENAI_ACCESS_TOKEN` field [(Get accessToken)](https://chat.openai.com/api/auth/session).
+4. When both are present, `OpenAI API Key` takes precedence.
+
+Reverse Proxy:
+
+Available when using `ChatGPTUnofficialProxyAPI`.[Details](https://github.com/transitive-bullshit/chatgpt-api#reverse-proxy)
+
+```shell
+# service/.env
+API_REVERSE_PROXY=
+```
+
+Environment Variables:
+
+For all parameter variables, check [here](#docker-parameter-example) or see:
+
+```
+/service/.env
+```
+
+## Roadmap
+[✓] Dual models
+
+[✓] Multiple session storage and context logic
+
+[✓] Formatting and beautifying code-like message types
+
+[✓] Multilingual interface
+
+[✓] Interface themes
+
+[✗] More...
+
+## Prerequisites
+
+### Node
+
+`node` requires version `^16 || ^18` (`node >= 14` requires installation of [fetch polyfill](https://github.com/developit/unfetch#usage-as-a-polyfill)), and multiple local `node` versions can be managed using [nvm](https://github.com/nvm-sh/nvm).
+
+```shell
+node -v
+```
+
+### PNPM
+If you have not installed `pnpm` before:
+```shell
+npm install pnpm -g
+```
+
+### Fill in the Keys
+
+Get `Openai Api Key` or `accessToken` and fill in the local environment variables [jump](#introduction)
+
+```
+# service/.env file
+
+# OpenAI API Key - https://platform.openai.com/overview
+OPENAI_API_KEY=
+
+# change this to an `accessToken` extracted from the ChatGPT site's `https://chat.openai.com/api/auth/session` response
+OPENAI_ACCESS_TOKEN=
+```
+
+## Install Dependencies
+
+> To make it easier for `backend developers` to understand, we did not use the front-end `workspace` mode, but stored it in different folders. If you only need to do secondary development of the front-end page, delete the `service` folder.
+
+### Backend
+
+Enter the `/service` folder and run the following command
+
+```shell
+pnpm install
+```
+
+### Frontend
+Run the following command in the root directory
+```shell
+pnpm bootstrap
+```
+
+## Run in Test Environment
+### Backend Service
+
+Enter the `/service` folder and run the following command
+
+```shell
+pnpm start
+```
+
+### Frontend Webpage
+Run the following command in the root directory
+```shell
+pnpm dev
+```
+
+## Packaging
+
+### Using Docker
+
+#### Docker Parameter Example
+
+- `OPENAI_API_KEY` one of two
+- `OPENAI_ACCESS_TOKEN` one of two, `OPENAI_API_KEY` takes precedence when both are present
+- `OPENAI_API_BASE_URL` optional, available when `OPENAI_API_KEY` is set
+- `API_REVERSE_PROXY` optional, available when `OPENAI_ACCESS_TOKEN` is set [Reference](#introduction)
+- `TIMEOUT_MS` timeout, in milliseconds, optional
+- `SOCKS_PROXY_HOST` optional, effective with SOCKS_PROXY_PORT
+- `SOCKS_PROXY_PORT` optional, effective with SOCKS_PROXY_HOST
+
+![docker](./docs/docker.png)
+
+#### Docker Build & Run
+
+```bash
+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
+
+# background operation
+docker run --name chatgpt-web -d -p 3002:3002 --env OPENAI_API_KEY=your_api_key chatgpt-web
+
+# running address
+http://localhost:3002/
+```
+
+#### Docker Compose
+
+[Hub Address](https://hub.docker.com/repository/docker/chenzhaoyu94/chatgpt-web/general)
+
+```yml
+version: '3'
+
+services:
+  app:
+    image: chenzhaoyu94/chatgpt-web # always use latest, pull the tag image again when updating
+    ports:
+      - 3002:3002
+    environment:
+      # one of two
+      OPENAI_API_KEY: xxxxxx
+      # one of two
+      OPENAI_ACCESS_TOKEN: xxxxxx
+      # api interface url, optional, available when OPENAI_API_KEY is set
+      OPENAI_API_BASE_URL: xxxx
+      # reverse proxy, optional
+      API_REVERSE_PROXY: xxx
+      # timeout, in milliseconds, optional
+      TIMEOUT_MS: 60000
+      # socks proxy, optional, effective with SOCKS_PROXY_PORT
+      SOCKS_PROXY_HOST: xxxx
+      # socks proxy port, optional, effective with SOCKS_PROXY_HOST
+      SOCKS_PROXY_PORT: xxxx
+```
+The `OPENAI_API_BASE_URL` is optional and only used when setting the `OPENAI_API_KEY`.
+
+### Deployment with Railway
+
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template/yytmgc)
+
+#### Railway Environment Variables
+
+| Environment Variable | Required | Description                                                                                       |
+| -------------------- | -------- | ------------------------------------------------------------------------------------------------- |
+| `PORT`               | Required | Default: `3002`                                                                                   |
+| `TIMEOUT_MS`         | Optional | Timeout in milliseconds.                                                                          |
+| `OPENAI_API_KEY`     | Optional | Required for `OpenAI API`. `apiKey` can be obtained from [here](https://platform.openai.com/overview). |
+| `OPENAI_ACCESS_TOKEN`| Optional | Required for `Web API`. `accessToken` can be obtained from [here](https://chat.openai.com/api/auth/session).|
+| `OPENAI_API_BASE_URL`  | Optional, only for `OpenAI API` |  API endpoint.                                                        |
+| `API_REVERSE_PROXY`  | Optional, only for `Web API` | Reverse proxy address for `Web API`. [Details](https://github.com/transitive-bullshit/chatgpt-api#reverse-proxy) |
+| `SOCKS_PROXY_HOST`   | Optional, effective with `SOCKS_PROXY_PORT` | Socks proxy.                      |
+| `SOCKS_PROXY_PORT`   | Optional, effective with `SOCKS_PROXY_HOST` | Socks proxy port.                 |
+
+> Note: Changing environment variables in Railway will cause re-deployment.
+
+### Manual packaging
+
+#### Backend service
+
+> If you don't need the `node` interface of this project, you can skip the following steps.
+
+Copy the `service` folder to a server that has a `node` service environment.
+
+```shell
+# Install
+pnpm install
+
+# Build
+pnpm build
+
+# Run
+pnpm prod
+```
+
+PS: You can also run `pnpm start` directly on the server without packaging.
+
+#### Frontend webpage
+
+1. Modify `VITE_APP_API_BASE_URL` in `.env` at the root directory to your actual backend interface address.
+2. Run the following command in the root directory and then copy the files in the `dist` folder to the root directory of your website service.
+
+[Reference information](https://cn.vitejs.dev/guide/static-deploy.html#building-the-app)
+
+```shell
+pnpm build
+```
+
+## Frequently Asked Questions
+
+Q: Why does Git always report an error when committing?
+
+A: Because there is submission information verification, please follow the [Commit Guidelines](./CONTRIBUTING.en.md).
+
+Q: Where to change the request interface if only the frontend page is used?
+
+A: The `VITE_GLOB_API_URL` field in the `.env` file at the root directory.
+
+Q: All red when saving the file?
+
+A: For `vscode`, please install the recommended plug-in of the project or manually install the `Eslint` plug-in.
+
+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.
+
+## Contributing
+
+Please read the [Contributing Guidelines](./CONTRIBUTING.en.md) before contributing.
+
+Thanks to all the contributors!
+
+<a href="https://github.com/Chanzhaoyu/chatgpt-web/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=Chanzhaoyu/chatgpt-web" />
+</a>
+
+## Sponsorship
+
+If you find this project helpful and circumstances permit, you can give me a little support. Thank you very much for your support~
+
+<div style="display: flex; gap: 20px;">
+	<div style="text-align: center">
+		<img style="max-width: 100%" src="./docs/wechat.png" alt="WeChat" />
+		<p>WeChat Pay</p>
+	</div>
+	<div style="text-align: center">
+		<img style="max-width: 100%" src="./docs/alipay.png" alt="Alipay" />
+		<p>Alipay</p>
+	</div>
+</div>
+
+## License
+MIT © [ChenZhaoYu](./license)
--- a/README.md
+++ b/README.md
@@ -1,9 +1,15 @@
 # ChatGPT Web

-> 使用 `express` 和 `vue3` 搭建的支持 `ChatGPT` 双模型演示网页
+<div style="font-size: 1.5rem;">
+  <a href="./README.md">中文</a> |
+  <a href="./README.en.md">English</a>
+</div>
+</br>

-![cover](./docs/c1-2.8.0.png)
-![cover2](./docs/c2-2.8.0.png)
+> 声明：此项目只发布于 Github，基于 MIT 协议，免费且作为开源学习使用。并且不会有任何形式的卖号、付费服务、讨论群、讨论组等行为。谨防受骗。
+
+![cover](./docs/c1.png)
+![cover2](./docs/c2.png)

 - [ChatGPT Web](#chatgpt-web)
 	- [介绍](#介绍)
@@ -36,13 +42,13 @@

 支持双模型，提供了两种非官方 `ChatGPT API` 方法

-|  方式   | 免费？  | 可靠性  | 质量 |
-|  ----  | ----  | ----  | ----  |
-| `ChatGPTAPI(GPT-3)`  | 否 | 	可靠 | 较笨 |
-| `ChatGPTUnofficialProxyAPI(网页 accessToken)`  | 	是 |  相对不可靠 | 聪明 |
+| 方式                                          | 免费？ | 可靠性     | 质量 |
+| --------------------------------------------- | ------ | ---------- | ---- |
+| `ChatGPTAPI(gpt-3.5-turbo-0301)`                           | 否     | 可靠       | 相对较笨 |
+| `ChatGPTUnofficialProxyAPI(网页 accessToken)` | 是     | 相对不可靠 | 聪明 |

 对比：
-1. `ChatGPTAPI` 使用 `text-davinci-003` 通过官方`OpenAI`补全`API`模拟`ChatGPT`（最稳健的方法，但它不是免费的，并且没有使用针对聊天进行微调的模型）
+1. `ChatGPTAPI` 使用 `gpt-3.5-turbo-0301` 通过官方`OpenAI`补全`API`模拟`ChatGPT`（最稳健的方法，但它不是免费的，并且没有使用针对聊天进行微调的模型）
 2. `ChatGPTUnofficialProxyAPI` 使用非官方代理服务器访问 `ChatGPT` 的后端`API`，绕过`Cloudflare`（使用真实的的`ChatGPT`，非常轻量级，但依赖于第三方服务器，并且有速率限制）

 [查看详情](https://github.com/Chanzhaoyu/chatgpt-web/issues/138)
@@ -55,13 +61,21 @@

 反向代理：

-`ChatGPTUnofficialProxyAPI`时可用 [详情](https://github.com/transitive-bullshit/chatgpt-api#reverse-proxy)
+`ChatGPTUnofficialProxyAPI`时可用，[详情](https://github.com/transitive-bullshit/chatgpt-api#reverse-proxy)

 ```shell
 # service/.env
 API_REVERSE_PROXY=
 ```

+环境变量：
+
+全部参数变量请查看或[这里](#docker-参数示例)
+
+```
+/service/.env
+```
+
 ## 待实现路线
 [✓] 双模型

@@ -69,9 +83,9 @@ API_REVERSE_PROXY=

 [✓] 对代码等消息类型的格式化美化处理

-[✗] 界面多语言
+[✓] 界面多语言

-[✗] 界面主题
+[✓] 界面主题

 [✗] More...

@@ -145,8 +159,11 @@ pnpm dev

 - `OPENAI_API_KEY` 二选一
 - `OPENAI_ACCESS_TOKEN`  二选一，同时存在时，`OPENAI_API_KEY` 优先
+- `OPENAI_API_BASE_URL`  可选，设置 `OPENAI_API_KEY` 时可用
 - `API_REVERSE_PROXY` 可选，设置 `OPENAI_ACCESS_TOKEN` 时可用 [参考](#介绍)
 - `TIMEOUT_MS` 超时，单位毫秒，可选
+- `SOCKS_PROXY_HOST` 可选，和 SOCKS_PROXY_PORT 一起时生效
+- `SOCKS_PROXY_PORT` 可选，和 SOCKS_PROXY_HOST 一起时生效

 ![docker](./docs/docker.png)

@@ -174,7 +191,7 @@ version: '3'

 services:
  app:
-    image: chenzhaoyu94/chatgpt-web  # 总是使用latest,更新时重新pull该tag镜像即可
+    image: chenzhaoyu94/chatgpt-web # 总是使用 latest ,更新时重新 pull 该 tag 镜像即可
    ports:
      - 3002:3002
    environment:
@@ -182,25 +199,34 @@ services:
      OPENAI_API_KEY: xxxxxx
      # 二选一
      OPENAI_ACCESS_TOKEN: xxxxxx
+      # API接口地址，可选，设置 OPENAI_API_KEY 时可用
+      OPENAI_API_BASE_URL: xxxx
      # 反向代理，可选
      API_REVERSE_PROXY: xxx
      # 超时，单位毫秒，可选
      TIMEOUT_MS: 60000
+      # Socks代理，可选，和 SOCKS_PROXY_PORT 一起时生效
+      SOCKS_PROXY_HOST: xxxx
+      # Socks代理端口，可选，和 SOCKS_PROXY_HOST 一起时生效
+      SOCKS_PROXY_PORT: xxxx
 ```
-
+- `OPENAI_API_BASE_URL`  可选，设置 `OPENAI_API_KEY` 时可用
 ###  使用 Railway 部署

 [![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template/yytmgc)

 #### Railway 环境变量

-| 环境变量名称                | 必填 | 备注                    |
-| --------------------------- | ---- | ----------------------- |
-| `PORT` | 必填    | 默认 `3002`  |
-| `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)   |
-| `API_REVERSE_PROXY` | 可选，`Web API` 时可用    | `Web API` 反向代理地址 [详情](https://github.com/transitive-bullshit/chatgpt-api#reverse-proxy)   |
+| 环境变量名称          | 必填                   | 备注                                                                                               |
+| --------------------- | ---------------------- | -------------------------------------------------------------------------------------------------- |
+| `PORT`                | 必填                   | 默认 `3002`                                                                                        |
+| `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) |
+| `OPENAI_API_BASE_URL`   | 可选，`OpenAI API` 时可用 |  `API`接口地址  |
+| `API_REVERSE_PROXY`   | 可选，`Web API` 时可用 | `Web API` 反向代理地址 [详情](https://github.com/transitive-bullshit/chatgpt-api#reverse-proxy)    |
+| `SOCKS_PROXY_HOST`   | 可选，和 `SOCKS_PROXY_PORT` 一起时生效 | Socks代理    |
+| `SOCKS_PROXY_PORT`   | 可选，和 `SOCKS_PROXY_HOST` 一起时生效 | Socks代理端口    |

 > 注意: `Railway` 修改环境变量会重新 `Deploy`

@@ -248,6 +274,10 @@ Q: 文件保存时全部爆红?

 A: `vscode` 请安装项目推荐插件，或手动安装 `Eslint` 插件。

+Q: 前端没有打字机效果？
+
+A: 一种可能原因是经过 Nginx 反向代理，开启了 buffer，则 Nginx 会尝试从后端缓冲一定大小的数据再发送给浏览器。请尝试在反代参数后添加 `proxy_buffering off;`，然后重载 Nginx。其他 web server 配置同理。
+
 ## 参与贡献

 贡献之前请先阅读 [贡献指南](./CONTRIBUTING.md)
--- a/docker-compose/docker-compose.yml
+++ b/docker-compose/docker-compose.yml
@@ -0,0 +1,33 @@
+version: '3'
+
+services:
+  app:
+    image: chenzhaoyu94/chatgpt-web # 总是使用latest,更新时重新pull该tag镜像即可
+    ports:
+      - 3002:3002
+    environment:
+      # 二选一
+      OPENAI_API_KEY: xxxx
+      # 二选一
+      OPENAI_ACCESS_TOKEN: xxxxxx
+      # API接口地址，可选，设置 OPENAI_API_KEY 时可用
+      OPENAI_API_BASE_URL: xxxx
+      # 反向代理，可选
+      API_REVERSE_PROXY: xxx
+      # 超时，单位毫秒，可选
+      TIMEOUT_MS: 60000
+      # Socks代理，可选，和 SOCKS_PROXY_PORT 一起时生效
+      SOCKS_PROXY_HOST: xxxx
+      # Socks代理端口，可选，和 SOCKS_PROXY_HOST 一起时生效
+      SOCKS_PROXY_PORT: xxxx
+  nginx:
+    build: nginx
+    image: chatgpt/nginx
+    ports:
+      - '80:80'
+    expose:
+      - '80'
+    volumes:
+      - ./nginx/html/:/etc/nginx/html/
+    links:
+      - app
--- a/docker-compose/nginx/Dockerfile
+++ b/docker-compose/nginx/Dockerfile
@@ -0,0 +1,10 @@
+FROM hub.c.163.com/library/nginx
+
+MAINTAINER jo "tionsin@live.com"
+
+RUN rm -rf /etc/nginx/conf.d/default.conf
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf
+COPY ./html/ /usr/share/nginx/html/
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
--- a/docker-compose/nginx/nginx.conf
+++ b/docker-compose/nginx/nginx.conf
@@ -0,0 +1,20 @@
+server {
+	listen 80;
+	server_name  localhost;
+	charset utf-8;
+	error_page   500 502 503 504  /50x.html;
+	location = / {
+			root   /usr/share/nginx/html;
+			index  index.html index.htm;
+	}
+
+	location /api {
+			proxy_set_header   X-Real-IP $remote_addr; #转发用户IP
+			proxy_pass http://app:3002;
+	}
+
+	proxy_set_header Host $host;
+	proxy_set_header X-Real-IP $remote_addr;
+	proxy_set_header REMOTE-HOST $remote_addr;
+	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+}
--- a/docker-compose/readme.md
+++ b/docker-compose/readme.md
@@ -0,0 +1,15 @@
+### docker-compose 部署教程
+- 将打包好的前端文件放到 `nginx/html` 目录下
+- ```shell
+  # 打包启动
+  docker-compose build
+  docker-compose up -d
+  ```
+- ```shell
+  # 查看运行状态
+  docker ps
+  ```
+- ```shell
+  # 结束运行
+  docker-compose down
+  ```
--- a/docs/c1.png
+++ b/docs/c1.png
--- a/docs/c2.png
+++ b/docs/c2.png
--- a/docs/cover.png
+++ b/docs/cover.png
--- a/docs/cover2.png
+++ b/docs/cover2.png
--- a/index.html
+++ b/index.html
@@ -3,6 +3,8 @@
 <head>
 	<meta charset="UTF-8">
 	<link rel="icon" type="image/svg+xml" href="/favicon.svg">
+	<meta content="yes" name="apple-mobile-web-app-capable"/>
+	<link rel="apple-touch-icon" href="/favicon.ico">
 	<meta name="viewport"
 		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
 	<title>ChatGPT Web</title>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "chatgpt-web",
-  "version": "2.8.1",
+  "version": "2.9.3",
  "private": false,
  "description": "ChatGPT Web",
  "author": "ChenZhaoYu <chenzhaoyu1994@gmail.com>",
@@ -23,38 +23,41 @@
    "common:prepare": "husky install"
  },
  "dependencies": {
+    "@traptitech/markdown-it-katex": "^3.6.0",
    "@vueuse/core": "^9.13.0",
    "highlight.js": "^11.7.0",
-    "marked": "^4.2.12",
+    "katex": "^0.16.4",
+    "markdown-it": "^13.0.1",
    "naive-ui": "^2.34.3",
-    "pinia": "^2.0.30",
+    "pinia": "^2.0.32",
    "vue": "^3.2.47",
+    "vue-i18n": "^9.2.2",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
-    "@antfu/eslint-config": "^0.35.2",
+    "@antfu/eslint-config": "^0.35.3",
    "@commitlint/cli": "^17.4.4",
    "@commitlint/config-conventional": "^17.4.4",
    "@iconify/vue": "^4.1.0",
    "@types/crypto-js": "^4.1.1",
-    "@types/marked": "^4.0.8",
-    "@types/node": "^18.14.0",
-    "@types/web-bluetooth": "^0.0.16",
+    "@types/katex": "^0.16.0",
+    "@types/markdown-it": "^12.2.3",
+    "@types/node": "^18.14.6",
    "@vitejs/plugin-vue": "^4.0.0",
    "autoprefixer": "^10.4.13",
-    "axios": "^1.3.3",
+    "axios": "^1.3.4",
    "crypto-js": "^4.1.1",
-    "eslint": "^8.34.0",
+    "eslint": "^8.35.0",
    "husky": "^8.0.3",
    "less": "^4.1.3",
    "lint-staged": "^13.1.2",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.21",
-    "rimraf": "^4.1.2",
+    "rimraf": "^4.2.0",
    "tailwindcss": "^3.2.7",
    "typescript": "~4.9.5",
-    "vite": "^4.1.2",
-    "vue-tsc": "^1.1.4"
+    "vite": "^4.1.4",
+    "vue-tsc": "^1.2.0"
  },
  "lint-staged": {
    "*.{ts,tsx,vue}": [
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/service/.env
+++ b/service/.env
@@ -4,8 +4,17 @@ OPENAI_API_KEY=
 # change this to an `accessToken` extracted from the ChatGPT site's `https://chat.openai.com/api/auth/session` response
 OPENAI_ACCESS_TOKEN=

+# OpenAI API Base URL - https://api.openai.com
+OPENAI_API_BASE_URL=
+
 # Reverse Proxy
 API_REVERSE_PROXY=

 # timeout
-TIMEOUT_MS=60000
+TIMEOUT_MS=100000
+
+# Socks Proxy Host
+SOCKS_PROXY_HOST=
+
+# Socks Proxy Port
+SOCKS_PROXY_PORT=
--- a/service/package.json
+++ b/service/package.json
@@ -24,7 +24,7 @@
    "common:cleanup": "rimraf node_modules && rimraf pnpm-lock.yaml"
  },
  "dependencies": {
-    "chatgpt": "^4.7.2",
+    "chatgpt": "^5.0.7",
    "dotenv": "^16.0.3",
    "esno": "^0.16.3",
    "express": "^4.18.2",
@@ -33,11 +33,11 @@
    "socks-proxy-agent": "^7.0.0"
  },
  "devDependencies": {
-    "@antfu/eslint-config": "^0.35.2",
+    "@antfu/eslint-config": "^0.35.3",
    "@types/express": "^4.17.17",
-    "@types/node": "^18.14.0",
-    "eslint": "^8.34.0",
-    "rimraf": "^4.1.2",
+    "@types/node": "^18.14.6",
+    "eslint": "^8.35.0",
+    "rimraf": "^4.3.0",
    "tsup": "^6.6.3",
    "typescript": "^4.9.5"
  }
--- a/service/pnpm-lock.yaml
+++ b/service/pnpm-lock.yaml
--- a/service/src/chatgpt/index.ts
+++ b/service/src/chatgpt/index.ts
@@ -1,11 +1,11 @@
 import * as dotenv from 'dotenv'
 import 'isomorphic-fetch'
-import type { ChatMessage, SendMessageOptions } from 'chatgpt'
+import type { ChatGPTAPIOptions, ChatMessage, SendMessageOptions } from 'chatgpt'
 import { ChatGPTAPI, ChatGPTUnofficialProxyAPI } from 'chatgpt'
 import { SocksProxyAgent } from 'socks-proxy-agent'
 import fetch from 'node-fetch'
-import { sendResponse } from './utils'
-import type { ApiModel, ChatContext, ChatGPTAPIOptions, ChatGPTUnofficialProxyAPIOptions, ModelConfig } from './types'
+import { sendResponse } from '../utils'
+import type { ApiModel, ChatContext, ChatGPTUnofficialProxyAPIOptions, ModelConfig } from '../types'

 dotenv.config()

@@ -18,16 +18,31 @@ if (!process.env.OPENAI_API_KEY && !process.env.OPENAI_ACCESS_TOKEN)

 let api: ChatGPTAPI | ChatGPTUnofficialProxyAPI

-// To use ESM in CommonJS, you can use a dynamic import
 (async () => {
  // More Info: https://github.com/transitive-bullshit/chatgpt-api

  if (process.env.OPENAI_API_KEY) {
    const options: ChatGPTAPIOptions = {
      apiKey: process.env.OPENAI_API_KEY,
+      completionParams: {
+        model: 'gpt-3.5-turbo',
+      },
      debug: false,
    }

+    if (process.env.OPENAI_API_BASE_URL && process.env.OPENAI_API_BASE_URL.trim().length > 0)
+      options.apiBaseUrl = process.env.OPENAI_API_BASE_URL
+
+    if (process.env.SOCKS_PROXY_HOST && process.env.SOCKS_PROXY_PORT) {
+      const agent = new SocksProxyAgent({
+        hostname: process.env.SOCKS_PROXY_HOST,
+        port: process.env.SOCKS_PROXY_PORT,
+      })
+      options.fetch = (url, options) => {
+        return fetch(url, { agent, ...options })
+      }
+    }
+
    api = new ChatGPTAPI({ ...options })
    apiModel = 'ChatGPTAPI'
  }
@@ -50,36 +65,11 @@ let api: ChatGPTAPI | ChatGPTUnofficialProxyAPI
    if (process.env.API_REVERSE_PROXY)
      options.apiReverseProxyUrl = process.env.API_REVERSE_PROXY

-    api = new ChatGPTUnofficialProxyAPI({
-      accessToken: process.env.OPENAI_ACCESS_TOKEN,
-      ...options,
-    })
+    api = new ChatGPTUnofficialProxyAPI({ ...options })
    apiModel = 'ChatGPTUnofficialProxyAPI'
  }
 })()

-async function chatReply(
-  message: string,
-  lastContext?: { conversationId?: string; parentMessageId?: string },
-) {
-  if (!message)
-    return sendResponse({ type: 'Fail', message: 'Message is empty' })
-
-  try {
-    let options: SendMessageOptions = { timeoutMs }
-
-    if (lastContext)
-      options = { ...lastContext }
-
-    const response = await api.sendMessage(message, { ...options })
-
-    return sendResponse({ type: 'Success', data: response })
-  }
-  catch (error: any) {
-    return sendResponse({ type: 'Fail', message: error.message })
-  }
-}
-
 async function chatReplyProcess(
  message: string,
  lastContext?: { conversationId?: string; parentMessageId?: string },
@@ -91,8 +81,12 @@ async function chatReplyProcess(
  try {
    let options: SendMessageOptions = { timeoutMs }

-    if (lastContext)
-      options = { ...lastContext }
+    if (lastContext) {
+      if (apiModel === 'ChatGPTAPI')
+        options = { parentMessageId: lastContext.parentMessageId }
+      else
+        options = { ...lastContext }
+    }

    const response = await api.sendMessage(message, {
      ...options,
@@ -104,6 +98,7 @@ async function chatReplyProcess(
    return sendResponse({ type: 'Success', data: response })
  }
  catch (error: any) {
+    global.console.error(error)
    return sendResponse({ type: 'Fail', message: error.message })
  }
 }
@@ -122,4 +117,4 @@ async function chatConfig() {

 export type { ChatContext, ChatMessage }

-export { chatReply, chatReplyProcess, chatConfig }
+export { chatReplyProcess, chatConfig }
--- a/service/src/index.ts
+++ b/service/src/index.ts
@@ -1,6 +1,6 @@
 import express from 'express'
 import type { ChatContext, ChatMessage } from './chatgpt'
-import { chatConfig, chatReply, chatReplyProcess } from './chatgpt'
+import { chatConfig, chatReplyProcess } from './chatgpt'

 const app = express()
 const router = express.Router()
@@ -15,17 +15,6 @@ app.all('*', (_, res, next) => {
  next()
 })

-router.post('/chat', async (req, res) => {
-  try {
-    const { prompt, options = {} } = req.body as { prompt: string; options?: ChatContext }
-    const response = await chatReply(prompt, options)
-    res.send(response)
-  }
-  catch (error) {
-    res.send(error)
-  }
-})
-
 router.post('/chat-process', async (req, res) => {
  res.setHeader('Content-type', 'application/octet-stream')

--- a/service/src/types.ts
+++ b/service/src/types.ts
@@ -1,16 +1,10 @@
-import type { FetchFn, openai } from 'chatgpt'
+import type { FetchFn } from 'chatgpt'

 export interface ChatContext {
  conversationId?: string
  parentMessageId?: string
 }

-export interface ChatGPTAPIOptions {
-  apiKey: string
-  debug?: boolean
-  completionParams?: Partial<openai.CompletionParams>
-}
-
 export interface ChatGPTUnofficialProxyAPIOptions {
  accessToken: string
  apiReverseProxyUrl?: string
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,8 +2,10 @@
 import { NConfigProvider } from 'naive-ui'
 import { NaiveProvider } from '@/components/common'
 import { useTheme } from '@/hooks/useTheme'
+import { useLanguage } from '@/hooks/useLanguage'

 const { theme, themeOverrides } = useTheme()
+const { language } = useLanguage()
 </script>

 <template>
@@ -11,6 +13,7 @@ const { theme, themeOverrides } = useTheme()
    class="h-full"
    :theme="theme"
    :theme-overrides="themeOverrides"
+    :locale="language"
  >
    <NaiveProvider>
      <RouterView />
--- a/src/components/business/index.ts
+++ b/src/components/business/index.ts
@@ -1 +0,0 @@
-export { }
--- a/src/components/common/Setting/About.vue
+++ b/src/components/common/Setting/About.vue
@@ -0,0 +1,62 @@
+<script setup lang='ts'>
+import { onMounted, ref } from 'vue'
+import { NSpin } from 'naive-ui'
+import { fetchChatConfig } from '@/api'
+import pkg from '@/../package.json'
+
+interface ConfigState {
+  timeoutMs?: number
+  reverseProxy?: string
+  apiModel?: string
+  socksProxy?: string
+}
+
+const loading = ref(false)
+
+const config = ref<ConfigState>()
+
+async function fetchConfig() {
+  try {
+    loading.value = true
+    const { data } = await fetchChatConfig<ConfigState>()
+    config.value = data
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchConfig()
+})
+</script>
+
+<template>
+  <NSpin :show="loading">
+    <div class="p-4 space-y-4">
+      <h2 class="text-xl font-bold">
+        Version - {{ pkg.version }}
+      </h2>
+      <div class="p-2 space-y-2 rounded-md bg-neutral-100 dark:bg-neutral-700">
+        <p>
+          此项目开源于
+          <a
+            class="text-blue-600 dark:text-blue-500"
+            href="https://github.com/Chanzhaoyu/chatgpt-web"
+            target="_blank"
+          >
+            Github
+          </a>
+          ，免费且基于 MIT 协议，没有任何形式的付费行为！
+        </p>
+        <p>
+          如果你觉得此项目对你有帮助，请在 Github 帮我点个 Star 或者给予一点赞助，谢谢！
+        </p>
+      </div>
+      <p>{{ $t("setting.api") }}：{{ config?.apiModel ?? '-' }}</p>
+      <p>{{ $t("setting.reverseProxy") }}：{{ config?.reverseProxy ?? '-' }}</p>
+      <p>{{ $t("setting.timeout") }}：{{ config?.timeoutMs ?? '-' }}</p>
+      <p>{{ $t("setting.socks") }}：{{ config?.socksProxy ?? '-' }}</p>
+    </div>
+  </NSpin>
+</template>
--- a/src/components/common/Setting/General.vue
+++ b/src/components/common/Setting/General.vue
@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { NButton, NInput, useMessage } from 'naive-ui'
+import type { Language, Theme } from '@/store/modules/app/helper'
+import { SvgIcon } from '@/components/common'
+import { useAppStore, useUserStore } from '@/store'
+import type { UserInfo } from '@/store/modules/user/helper'
+import { t } from '@/locales'
+
+interface Emit {
+  (event: 'update'): void
+}
+
+const emit = defineEmits<Emit>()
+
+const appStore = useAppStore()
+const userStore = useUserStore()
+
+const ms = useMessage()
+
+const theme = computed(() => appStore.theme)
+
+const userInfo = computed(() => userStore.userInfo)
+
+const avatar = ref(userInfo.value.avatar ?? '')
+
+const name = ref(userInfo.value.name ?? '')
+
+const description = ref(userInfo.value.description ?? '')
+
+const language = computed({
+  get() {
+    return appStore.language
+  },
+  set(value: Language) {
+    appStore.setLanguage(value)
+  },
+})
+
+const themeOptions: { label: string; key: Theme; icon: string }[] = [
+  {
+    label: 'Auto',
+    key: 'auto',
+    icon: 'ri:contrast-line',
+  },
+  {
+    label: 'Light',
+    key: 'light',
+    icon: 'ri:sun-foggy-line',
+  },
+  {
+    label: 'Dark',
+    key: 'dark',
+    icon: 'ri:moon-foggy-line',
+  },
+]
+
+const languageOptions: { label: string; key: Language; value: Language }[] = [
+  { label: '中文', key: 'zh-CN', value: 'zh-CN' },
+  { label: 'English', key: 'en-US', value: 'en-US' },
+]
+
+function updateUserInfo(options: Partial<UserInfo>) {
+  userStore.updateUserInfo(options)
+  ms.success(t('common.success'))
+}
+
+function handleReset() {
+  userStore.resetUserInfo()
+  ms.success(t('common.success'))
+  emit('update')
+}
+</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.avatarLink') }}</span>
+        <div class="flex-1">
+          <NInput v-model:value="avatar" placeholder="" />
+        </div>
+        <NButton size="tiny" text type="primary" @click="updateUserInfo({ avatar })">
+          {{ $t('common.save') }}
+        </NButton>
+      </div>
+      <div class="flex items-center space-x-4">
+        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.name') }}</span>
+        <div class="w-[200px]">
+          <NInput v-model:value="name" placeholder="" />
+        </div>
+        <NButton size="tiny" text type="primary" @click="updateUserInfo({ name })">
+          {{ $t('common.save') }}
+        </NButton>
+      </div>
+      <div class="flex items-center space-x-4">
+        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.description') }}</span>
+        <div class="flex-1">
+          <NInput v-model:value="description" placeholder="" />
+        </div>
+        <NButton size="tiny" text type="primary" @click="updateUserInfo({ description })">
+          {{ $t('common.save') }}
+        </NButton>
+      </div>
+      <div class="flex items-center space-x-4">
+        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.resetUserInfo') }}</span>
+        <NButton text type="primary" @click="handleReset">
+          {{ $t('common.reset') }}
+        </NButton>
+      </div>
+      <div class="flex items-center space-x-4">
+        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.theme') }}</span>
+        <div class="flex items-center space-x-4">
+          <template v-for="item of themeOptions" :key="item.key">
+            <a
+              class="flex items-center justify-center h-8 px-4 border rounded-md cursor-pointer dark:border-neutral-700"
+              :class="item.key === theme && ['bg-[#4ca85e]', 'border-[#4ca85e]', 'text-white']"
+              @click="appStore.setTheme(item.key)"
+            >
+              <span class="text-xl">
+                <SvgIcon :icon="item.icon" />
+              </span>
+            </a>
+          </template>
+        </div>
+      </div>
+      <div class="flex items-center space-x-4">
+        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.language') }}</span>
+        <div class="flex items-center space-x-4">
+          <template v-for="item of languageOptions" :key="item.key">
+            <a
+              class="flex items-center justify-center h-8 px-4 border rounded-md cursor-pointer dark:border-neutral-700"
+              :class="item.key === language && ['bg-[#4ca85e]', 'border-[#4ca85e]', 'text-white']"
+              @click="appStore.setLanguage(item.key)"
+            >
+              <span class="text-sm">
+                {{ item.label }}
+              </span>
+            </a>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
--- a/src/components/common/Setting/index.vue
+++ b/src/components/common/Setting/index.vue
@@ -1,8 +1,13 @@
 <script setup lang='ts'>
-import { computed, ref, watch } from 'vue'
-import { NCard, NModal } from 'naive-ui'
-import pkg from '../../../../package.json'
-import { fetchChatConfig } from '@/api'
+import { computed, ref } from 'vue'
+import { NCard, NModal, NTabPane, NTabs } from 'naive-ui'
+import General from './General.vue'
+import About from './About.vue'
+import { SvgIcon } from '@/components/common'
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<Emit>()

 interface Props {
  visible: boolean
@@ -12,16 +17,9 @@ interface Emit {
  (e: 'update:visible', visible: boolean): void
 }

-interface ConfigState {
-  timeoutMs?: number
-  reverseProxy?: string
-  apiModel?: string
-  socksProxy?: string
-}
+const active = ref('General')

-const props = defineProps<Props>()
-
-const emit = defineEmits<Emit>()
+const reload = ref(false)

 const show = computed({
  get() {
@@ -32,46 +30,35 @@ const show = computed({
  },
 })

-const config = ref<ConfigState>()
-
-async function fetchConfig() {
-  try {
-    const { data } = await fetchChatConfig<ConfigState>()
-    config.value = data
-  }
-  catch (error) {
-    // ...
-  }
+function handleReload() {
+  reload.value = true
+  setTimeout(() => {
+    reload.value = false
+  }, 0)
 }
-
-watch(
-  () => props.visible,
-  (val) => {
-    if (val)
-      fetchConfig()
-  },
-)
 </script>

 <template>
-  <NModal v-model:show="show" style="width: 80%; max-width: 460px;">
-    <NCard>
-      <div class="space-y-4">
-        <h2 class="text-xl font-bold text-center">
-          Version - {{ pkg.version }}
-        </h2>
-        <hr>
-        <p>
-          此项目开源于
-          <a class="text-blue-600" href="https://github.com/Chanzhaoyu/chatgpt-web" target="_blank">Github</a>
-          如果你觉得此项目对你有帮助，请帮我点个 Star，谢谢！
-        </p>
-        <hr>
-        <p>API方式：{{ config?.apiModel ?? '-' }}</p>
-        <p>反向代理：{{ config?.reverseProxy ?? '-' }}</p>
-        <p>超时时间：{{ config?.timeoutMs ?? '-' }}</p>
-        <p>Socks代理：{{ config?.socksProxy ?? '-' }}</p>
-      </div>
+  <NModal v-model:show="show" :auto-focus="false">
+    <NCard role="dialog" aria-modal="true" :bordered="false" style="width: 100%; max-width: 640px">
+      <NTabs v-model:value="active" type="line" animated>
+        <NTabPane name="General" tab="General">
+          <template #tab>
+            <SvgIcon class="text-lg" icon="ri:file-user-line" />
+            <span class="ml-2">{{ $t('setting.general') }}</span>
+          </template>
+          <div class="min-h-[100px]">
+            <General v-if="!reload" @update="handleReload" />
+          </div>
+        </NTabPane>
+        <NTabPane name="Config" tab="Config">
+          <template #tab>
+            <SvgIcon class="text-lg" icon="ri:list-settings-line" />
+            <span class="ml-2">{{ $t('setting.config') }}</span>
+          </template>
+          <About />
+        </NTabPane>
+      </NTabs>
    </NCard>
  </NModal>
 </template>
--- a/src/components/common/UserAvatar/index.vue
+++ b/src/components/common/UserAvatar/index.vue
@@ -1,18 +1,39 @@
 <script setup lang='ts'>
-import { GithubSite } from '@/components/custom'
+import { computed } from 'vue'
+import { NAvatar } from 'naive-ui'
+import { useUserStore } from '@/store'
+import defaultAvatar from '@/assets/avatar.jpg'
+import { isString } from '@/utils/is'
+
+const userStore = useUserStore()
+
+const userInfo = computed(() => userStore.userInfo)
 </script>

 <template>
  <div class="flex items-center">
    <div class="w-10 h-10 overflow-hidden rounded-full">
-      <img class="object-cover" src="@/assets/avatar.jpg" alt="avatar">
+      <template v-if="isString(userInfo.avatar) && userInfo.avatar.length > 0">
+        <NAvatar
+          size="large"
+          round
+          :src="userInfo.avatar"
+          :fallback-src="defaultAvatar"
+        />
+      </template>
+      <template v-else>
+        <NAvatar size="large" round :src="defaultAvatar" />
+      </template>
    </div>
    <div class="ml-2">
      <h2 class="font-bold text-md">
-        ChenZhaoYu
+        {{ userInfo.name ?? 'ChenZhaoYu' }}
      </h2>
      <p class="text-xs text-gray-500">
-        <GithubSite />
+        <span
+          v-if="isString(userInfo.description) && userInfo.description !== ''"
+          v-html="userInfo.description"
+        />
      </p>
    </div>
  </div>
--- a/src/directives/highlight.ts
+++ b/src/directives/highlight.ts
@@ -1,23 +0,0 @@
-import type { App, Directive } from 'vue'
-import hljs from 'highlight.js'
-import { includeCode } from '@/utils/format'
-
-hljs.configure({ ignoreUnescapedHTML: true })
-
-function highlightCode(el: HTMLElement) {
-  if (includeCode(el.textContent))
-    hljs.highlightBlock(el)
-}
-
-export default function setupHighlightDirective(app: App) {
-  const highLightDirective: Directive<HTMLElement> = {
-    mounted(el: HTMLElement) {
-      highlightCode(el)
-    },
-    updated(el: HTMLElement) {
-      highlightCode(el)
-    },
-  }
-
-  app.directive('highlight', highLightDirective)
-}
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@@ -1,6 +0,0 @@
-import type { App } from 'vue'
-import setupHighlightDirective from './highlight'
-
-export function setupDirectives(app: App) {
-  setupHighlightDirective(app)
-}
--- a/src/hooks/useIconRender.ts
+++ b/src/hooks/useIconRender.ts
@@ -0,0 +1,36 @@
+import { h } from 'vue'
+import { SvgIcon } from '@/components/common'
+
+export const useIconRender = () => {
+  interface IconConfig {
+    icon?: string
+    color?: string
+    fontSize?: number
+  }
+
+  interface IconStyle {
+    color?: string
+    fontSize?: string
+  }
+
+  const iconRender = (config: IconConfig) => {
+    const { color, fontSize, icon } = config
+
+    const style: IconStyle = {}
+
+    if (color)
+      style.color = color
+
+    if (fontSize)
+      style.fontSize = `${fontSize}px`
+
+    if (!icon)
+      window.console.warn('iconRender: icon is required')
+
+    return () => h(SvgIcon, { icon, style })
+  }
+
+  return {
+    iconRender,
+  }
+}
--- a/src/hooks/useLanguage.ts
+++ b/src/hooks/useLanguage.ts
@@ -0,0 +1,24 @@
+import { computed } from 'vue'
+import { enUS, zhCN } from 'naive-ui'
+import { useAppStore } from '@/store'
+import { setLocale } from '@/locales'
+
+export function useLanguage() {
+  const appStore = useAppStore()
+
+  const language = computed(() => {
+    switch (appStore.language) {
+      case 'en-US':
+        setLocale('en-US')
+        return enUS
+      case 'zh-CN':
+        setLocale('zh-CN')
+        return zhCN
+      default:
+        setLocale('zh-CN')
+        return enUS
+    }
+  })
+
+  return { language }
+}
--- a/src/icons/403.svg
+++ b/src/icons/403.svg
--- a/src/icons/404.svg
+++ b/src/icons/404.svg
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@@ -0,0 +1,41 @@
+export default {
+  common: {
+    delete: 'Delete',
+    save: 'Save',
+    reset: 'Reset',
+    yes: 'Yes',
+    no: 'No',
+    noData: 'No Data',
+    wrong: 'Something went wrong, please try again later.',
+    success: 'Success',
+    failed: 'Failed',
+  },
+  chat: {
+    placeholder: 'Ask me anything...(Shift + Enter = line break)',
+    placeholderMobile: 'Ask me anything...',
+    copy: 'Copy',
+    copied: 'Copied',
+    copyCode: 'Copy Code',
+    clearChat: 'Clear Chat',
+    clearChatConfirm: 'Are you sure to clear this chat?',
+    deleteMessage: 'Delete Message',
+    deleteMessageConfirm: 'Are you sure to delete this message?',
+    deleteHistoryConfirm: 'Are you sure to clear this history?',
+  },
+  setting: {
+    setting: 'Setting',
+    general: 'General',
+    config: 'Config',
+    avatarLink: 'Avatar Link',
+    name: 'Name',
+    description: 'Description',
+    resetUserInfo: 'Reset UserInfo',
+    theme: 'Theme',
+    language: 'Language',
+    api: 'API',
+    reverseProxy: 'Reverse Proxy',
+    timeout: 'Timeout',
+    socks: 'Socks',
+  },
+
+}
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@@ -0,0 +1,34 @@
+import type { App } from 'vue'
+import { createI18n } from 'vue-i18n'
+import en from './en-US'
+import cn from './zh-CN'
+import { useAppStoreWithOut } from '@/store/modules/app'
+import type { Language } from '@/store/modules/app/helper'
+
+const appStore = useAppStoreWithOut()
+
+const defaultLocale = appStore.language || 'zh-CN'
+
+const i18n = createI18n({
+  locale: defaultLocale,
+  fallbackLocale: 'en-US',
+  allowComposition: true,
+  messages: {
+    'en-US': en,
+    'zh-CN': cn,
+  },
+})
+
+export function t(key: string) {
+  return i18n.global.t(key)
+}
+
+export function setLocale(locale: Language) {
+  i18n.global.locale = locale
+}
+
+export function setupI18n(app: App) {
+  app.use(i18n)
+}
+
+export default i18n
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -0,0 +1,41 @@
+export default {
+  common: {
+    delete: '删除',
+    save: '保存',
+    reset: '重置',
+    yes: '是',
+    no: '否',
+    noData: '暂无数据',
+    wrong: '好像出错了，请稍后再试。',
+    success: '操作成功',
+    failed: '操作失败',
+  },
+  chat: {
+    placeholder: '来说点什么...（Shift + Enter = 换行）',
+    placeholderMobile: '来说点什么...',
+    copy: '复制',
+    copied: '复制成功',
+    copyCode: '复制代码',
+    clearChat: '清空会话',
+    clearChatConfirm: '是否清空会话?',
+    deleteMessage: '删除消息',
+    deleteMessageConfirm: '是否删除此消息?',
+    deleteHistoryConfirm: '确定删除此记录?',
+  },
+  setting: {
+    setting: '设置',
+    general: '总览',
+    config: '配置',
+    avatarLink: '头像链接',
+    name: '名称',
+    description: '描述',
+    resetUserInfo: '重置用户信息',
+    theme: '主题',
+    language: '语言',
+    api: 'API',
+    reverseProxy: '反向代理',
+    timeout: '超时',
+    socks: 'Socks',
+  },
+
+}
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,9 +1,9 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import { setupDirectives } from './directives'
-import { setupAssets } from '@/plugins'
-import { setupStore } from '@/store'
-import { setupRouter } from '@/router'
+import { setupI18n } from './locales'
+import { setupAssets } from './plugins'
+import { setupStore } from './store'
+import { setupRouter } from './router'

 async function bootstrap() {
  const app = createApp(App)
@@ -11,7 +11,7 @@ async function bootstrap() {

  setupStore(app)

-  setupDirectives(app)
+  setupI18n(app)

  await setupRouter(app)

--- a/src/plugins/assets.ts
+++ b/src/plugins/assets.ts
@@ -1,5 +1,6 @@
-import 'highlight.js/styles/xcode.css'
+import 'katex/dist/katex.min.css'
 import '@/styles/lib/tailwind.css'
+import '@/styles/lib/highlight.less'
 import '@/styles/lib/github-markdown.less'
 import '@/styles/global.less'

--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -17,6 +17,24 @@ const routes: RouteRecordRaw[] = [
      },
    ],
  },
+
+  {
+    path: '/403',
+    name: '403',
+    component: () => import('@/views/exception/403/index.vue'),
+  },
+
+  {
+    path: '/404',
+    name: '404',
+    component: () => import('@/views/exception/404/index.vue'),
+  },
+
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'notFound',
+    redirect: '/404',
+  },
 ]

 export const router = createRouter({
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,8 +1,9 @@
 import type { App } from 'vue'
 import { createPinia } from 'pinia'

+export const store = createPinia()
+
 export function setupStore(app: App) {
-  const store = createPinia()
  app.use(store)
 }

--- a/src/store/modules/app/helper.ts
+++ b/src/store/modules/app/helper.ts
@@ -4,13 +4,16 @@ const LOCAL_NAME = 'appSetting'

 export type Theme = 'light' | 'dark' | 'auto'

+export type Language = 'zh-CN' | 'en-US'
+
 export interface AppState {
  siderCollapsed: boolean
  theme: Theme
+  language: Language
 }

 export function defaultSetting(): AppState {
-  return { siderCollapsed: false, theme: 'light' }
+  return { siderCollapsed: false, theme: 'light', language: 'zh-CN' }
 }

 export function getLocalSetting(): AppState {
--- a/src/store/modules/app/index.ts
+++ b/src/store/modules/app/index.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
-import type { AppState, Theme } from './helper'
+import type { AppState, Language, Theme } from './helper'
 import { getLocalSetting, setLocalSetting } from './helper'
+import { store } from '@/store'

 export const useAppStore = defineStore('app-store', {
  state: (): AppState => getLocalSetting(),
@@ -15,8 +16,19 @@ export const useAppStore = defineStore('app-store', {
      this.recordState()
    },

+    setLanguage(language: Language) {
+      if (this.language !== language) {
+        this.language = language
+        this.recordState()
+      }
+    },
+
    recordState() {
      setLocalSetting(this.$state)
    },
  },
 })
+
+export function useAppStoreWithOut() {
+  return useAppStore(store)
+}
--- a/src/store/modules/chat/helper.ts
+++ b/src/store/modules/chat/helper.ts
@@ -3,7 +3,7 @@ import { ss } from '@/utils/storage'
 const LOCAL_NAME = 'chatStorage'

 export function defaultState(): Chat.ChatState {
-  const uuid = Date.now()
+  const uuid = 1002
  return { active: uuid, history: [{ uuid, title: 'New Chat', isEdit: false }], chat: [{ uuid, data: [] }] }
 }

--- a/src/store/modules/chat/index.ts
+++ b/src/store/modules/chat/index.ts
@@ -129,6 +129,22 @@ export const useChatStore = defineStore('chat-store', {
      }
    },

+    updateChatSomeByUuid(uuid: number, index: number, chat: Partial<Chat.Chat>) {
+      if (!uuid || uuid === 0) {
+        if (this.chat.length) {
+          this.chat[0].data[index] = { ...this.chat[0].data[index], ...chat }
+          this.recordState()
+        }
+        return
+      }
+
+      const chatIndex = this.chat.findIndex(item => item.uuid === uuid)
+      if (chatIndex !== -1) {
+        this.chat[chatIndex].data[index] = { ...this.chat[chatIndex].data[index], ...chat }
+        this.recordState()
+      }
+    },
+
    deleteChatByUuid(uuid: number, index: number) {
      if (!uuid || uuid === 0) {
        if (this.chat.length) {
--- a/src/store/modules/index.ts
+++ b/src/store/modules/index.ts
@@ -1,2 +1,3 @@
 export * from './app'
 export * from './chat'
+export * from './user'
--- a/src/store/modules/user/helper.ts
+++ b/src/store/modules/user/helper.ts
@@ -0,0 +1,32 @@
+import { ss } from '@/utils/storage'
+
+const LOCAL_NAME = 'userStorage'
+
+export interface UserInfo {
+  avatar: string
+  name: string
+  description: string
+}
+
+export interface UserState {
+  userInfo: UserInfo
+}
+
+export function defaultSetting(): UserState {
+  return {
+    userInfo: {
+      avatar: 'https://raw.githubusercontent.com/Chanzhaoyu/chatgpt-web/main/src/assets/avatar.jpg',
+      name: 'ChenZhaoYu',
+      description: 'Star on <a href="https://github.com/Chanzhaoyu/chatgpt-bot" class="text-blue-500" target="_blank" >Github</a>',
+    },
+  }
+}
+
+export function getLocalState(): UserState {
+  const localSetting: UserState | undefined = ss.get(LOCAL_NAME)
+  return { ...defaultSetting(), ...localSetting }
+}
+
+export function setLocalState(setting: UserState): void {
+  ss.set(LOCAL_NAME, setting)
+}
--- a/src/store/modules/user/index.ts
+++ b/src/store/modules/user/index.ts
@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia'
+import type { UserInfo, UserState } from './helper'
+import { defaultSetting, getLocalState, setLocalState } from './helper'
+
+export const useUserStore = defineStore('user-store', {
+  state: (): UserState => getLocalState(),
+  actions: {
+    updateUserInfo(userInfo: Partial<UserInfo>) {
+      this.userInfo = { ...this.userInfo, ...userInfo }
+      this.recordState()
+    },
+
+    resetUserInfo() {
+      this.userInfo = { ...defaultSetting().userInfo }
+      this.recordState()
+    },
+
+    recordState() {
+      setLocalState(this.$state)
+    },
+  },
+})
--- a/src/styles/global.less
+++ b/src/styles/global.less
@@ -3,3 +3,7 @@ body,
 #app {
 	height: 100%;
 }
+
+body {
+	padding-bottom: constant(safe-area-inset-bottom);
+}
--- a/src/styles/lib/highlight.less
+++ b/src/styles/lib/highlight.less
@@ -0,0 +1,203 @@
+html.dark {
+	pre code.hljs {
+		display: block;
+		overflow-x: auto;
+		padding: 1em
+	}
+
+	code.hljs {
+		padding: 3px 5px
+	}
+
+	.hljs {
+		color: #abb2bf;
+		background: #282c34
+	}
+
+	.hljs-keyword,
+	.hljs-operator,
+	.hljs-pattern-match {
+		color: #f92672
+	}
+
+	.hljs-function,
+	.hljs-pattern-match .hljs-constructor {
+		color: #61aeee
+	}
+
+	.hljs-function .hljs-params {
+		color: #a6e22e
+	}
+
+	.hljs-function .hljs-params .hljs-typing {
+		color: #fd971f
+	}
+
+	.hljs-module-access .hljs-module {
+		color: #7e57c2
+	}
+
+	.hljs-constructor {
+		color: #e2b93d
+	}
+
+	.hljs-constructor .hljs-string {
+		color: #9ccc65
+	}
+
+	.hljs-comment,
+	.hljs-quote {
+		color: #b18eb1;
+		font-style: italic
+	}
+
+	.hljs-doctag,
+	.hljs-formula {
+		color: #c678dd
+	}
+
+	.hljs-deletion,
+	.hljs-name,
+	.hljs-section,
+	.hljs-selector-tag,
+	.hljs-subst {
+		color: #e06c75
+	}
+
+	.hljs-literal {
+		color: #56b6c2
+	}
+
+	.hljs-addition,
+	.hljs-attribute,
+	.hljs-meta .hljs-string,
+	.hljs-regexp,
+	.hljs-string {
+		color: #98c379
+	}
+
+	.hljs-built_in,
+	.hljs-class .hljs-title,
+	.hljs-title.class_ {
+		color: #e6c07b
+	}
+
+	.hljs-attr,
+	.hljs-number,
+	.hljs-selector-attr,
+	.hljs-selector-class,
+	.hljs-selector-pseudo,
+	.hljs-template-variable,
+	.hljs-type,
+	.hljs-variable {
+		color: #d19a66
+	}
+
+	.hljs-bullet,
+	.hljs-link,
+	.hljs-meta,
+	.hljs-selector-id,
+	.hljs-symbol,
+	.hljs-title {
+		color: #61aeee
+	}
+
+	.hljs-emphasis {
+		font-style: italic
+	}
+
+	.hljs-strong {
+		font-weight: 700
+	}
+
+	.hljs-link {
+		text-decoration: underline
+	}
+}
+
+html {
+	pre code.hljs {
+		display: block;
+		overflow-x: auto;
+		padding: 1em
+	}
+
+	code.hljs {
+		padding: 3px 5px
+	}
+
+	.hljs {
+		color: #383a42;
+		background: #fafafa
+	}
+
+	.hljs-comment,
+	.hljs-quote {
+		color: #a0a1a7;
+		font-style: italic
+	}
+
+	.hljs-doctag,
+	.hljs-formula,
+	.hljs-keyword {
+		color: #a626a4
+	}
+
+	.hljs-deletion,
+	.hljs-name,
+	.hljs-section,
+	.hljs-selector-tag,
+	.hljs-subst {
+		color: #e45649
+	}
+
+	.hljs-literal {
+		color: #0184bb
+	}
+
+	.hljs-addition,
+	.hljs-attribute,
+	.hljs-meta .hljs-string,
+	.hljs-regexp,
+	.hljs-string {
+		color: #50a14f
+	}
+
+	.hljs-attr,
+	.hljs-number,
+	.hljs-selector-attr,
+	.hljs-selector-class,
+	.hljs-selector-pseudo,
+	.hljs-template-variable,
+	.hljs-type,
+	.hljs-variable {
+		color: #986801
+	}
+
+	.hljs-bullet,
+	.hljs-link,
+	.hljs-meta,
+	.hljs-selector-id,
+	.hljs-symbol,
+	.hljs-title {
+		color: #4078f2
+	}
+
+	.hljs-built_in,
+	.hljs-class .hljs-title,
+	.hljs-title.class_ {
+		color: #c18401
+	}
+
+	.hljs-emphasis {
+		font-style: italic
+	}
+
+	.hljs-strong {
+		font-weight: 700
+	}
+
+	.hljs-link {
+		text-decoration: underline
+	}
+}
--- a/src/utils/format/index.ts
+++ b/src/utils/format/index.ts
@@ -1,4 +1,7 @@
-// 转义 HTML 字符
+/**
+ * 转义 HTML 字符
+ * @param source
+ */
 export function encodeHTML(source: string) {
  return source
    .replace(/&/g, '&amp;')
@@ -8,8 +11,34 @@ export function encodeHTML(source: string) {
    .replace(/'/g, '&#39;')
 }

-// 判断是否为代码块
+/**
+ * 判断是否为代码块
+ * @param text
+ */
 export function includeCode(text: string | null | undefined) {
  const regexp = /^(?:\s{4}|\t).+/gm
  return !!(text?.includes(' = ') || text?.match(regexp))
 }
+
+/**
+ * 复制文本
+ * @param options
+ */
+export function copyText(options: { text: string; origin?: boolean }) {
+  const props = { origin: true, ...options }
+
+  let input: HTMLInputElement | HTMLTextAreaElement
+
+  if (props.origin)
+    input = document.createElement('textarea')
+  else
+    input = document.createElement('input')
+
+  input.setAttribute('readonly', 'readonly')
+  input.value = props.text
+  document.body.appendChild(input)
+  input.select()
+  if (document.execCommand('copy'))
+    document.execCommand('copy')
+  document.body.removeChild(input)
+}
--- a/src/utils/request/axios.ts
+++ b/src/utils/request/axios.ts
@@ -2,7 +2,6 @@ import axios, { type AxiosResponse } from 'axios'

 const service = axios.create({
  baseURL: import.meta.env.VITE_GLOB_API_URL,
-  timeout: !isNaN(+import.meta.env.VITE_GLOB_API_TIMEOUT) ? Number(import.meta.env.VITE_GLOB_API_TIMEOUT) : 60 * 1000,
 })

 service.interceptors.request.use(
--- a/src/views/chat/components/Message/Avatar.vue
+++ b/src/views/chat/components/Message/Avatar.vue
@@ -1,14 +1,26 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
+import { NAvatar } from 'naive-ui'
+import { useUserStore } from '@/store'
+import { isString } from '@/utils/is'
+import defaultAvatar from '@/assets/avatar.jpg'
+
 interface Props {
  image?: boolean
 }
-
 defineProps<Props>()
+
+const userStore = useUserStore()
+
+const avatar = computed(() => userStore.userInfo.avatar)
 </script>

 <template>
-  <img v-if="image" src="@/assets/avatar.jpg" class="object-cover w-full h-full " alt="avatar">
-  <span v-else class="text-[27px] dark:text-white">
+  <template v-if="image">
+    <NAvatar v-if="isString(avatar) && avatar.length > 0" :src="avatar" :fallback-src="defaultAvatar" />
+    <NAvatar v-else round :src="defaultAvatar" />
+  </template>
+  <span v-else class="text-[28px] dark:text-white">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" width="1em" height="1em">
      <path d="M29.71,13.09A8.09,8.09,0,0,0,20.34,2.68a8.08,8.08,0,0,0-13.7,2.9A8.08,8.08,0,0,0,2.3,18.9,8,8,0,0,0,3,25.45a8.08,8.08,0,0,0,8.69,3.87,8,8,0,0,0,6,2.68,8.09,8.09,0,0,0,7.7-5.61,8,8,0,0,0,5.33-3.86A8.09,8.09,0,0,0,29.71,13.09Zm-12,16.82a6,6,0,0,1-3.84-1.39l.19-.11,6.37-3.68a1,1,0,0,0,.53-.91v-9l2.69,1.56a.08.08,0,0,1,.05.07v7.44A6,6,0,0,1,17.68,29.91ZM4.8,24.41a6,6,0,0,1-.71-4l.19.11,6.37,3.68a1,1,0,0,0,1,0l7.79-4.49V22.8a.09.09,0,0,1,0,.08L13,26.6A6,6,0,0,1,4.8,24.41ZM3.12,10.53A6,6,0,0,1,6.28,7.9v7.57a1,1,0,0,0,.51.9l7.75,4.47L11.85,22.4a.14.14,0,0,1-.09,0L5.32,18.68a6,6,0,0,1-2.2-8.18Zm22.13,5.14-7.78-4.52L20.16,9.6a.08.08,0,0,1,.09,0l6.44,3.72a6,6,0,0,1-.9,10.81V16.56A1.06,1.06,0,0,0,25.25,15.67Zm2.68-4-.19-.12-6.36-3.7a1,1,0,0,0-1.05,0l-7.78,4.49V9.2a.09.09,0,0,1,0-.09L19,5.4a6,6,0,0,1,8.91,6.21ZM11.08,17.15,8.38,15.6a.14.14,0,0,1-.05-.08V8.1a6,6,0,0,1,9.84-4.61L18,3.6,11.61,7.28a1,1,0,0,0-.53.91ZM12.54,14,16,12l3.47,2v4L16,20l-3.47-2Z" fill="currentColor" />
    </svg>
--- a/src/views/chat/components/Message/Text.vue
+++ b/src/views/chat/components/Message/Text.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
-import { marked } from 'marked'
+import { computed, ref } from 'vue'
+import MarkdownIt from 'markdown-it'
+import mdKatex from '@traptitech/markdown-it-katex'
 import hljs from 'highlight.js'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
-import { encodeHTML } from '@/utils/format'
+import { t } from '@/locales'

 interface Props {
  inversion?: boolean
@@ -16,19 +17,21 @@ const props = defineProps<Props>()

 const { isMobile } = useBasicLayout()

-const renderer = new marked.Renderer()
+const textRef = ref<HTMLElement>()

-renderer.html = (html) => {
-  return `<p>${encodeHTML(html)}</p>`
-}
+const mdi = new MarkdownIt({
+  linkify: true,
+  highlight(code, language) {
+    const validLang = !!(language && hljs.getLanguage(language))
+    if (validLang) {
+      const lang = language ?? ''
+      return highlightBlock(hljs.highlight(lang, code, true).value, lang)
+    }
+    return highlightBlock(hljs.highlightAuto(code).value, '')
+  },
+})

-renderer.code = (code, language) => {
-  const validLang = !!(language && hljs.getLanguage(language))
-  const highlighted = validLang ? hljs.highlight(language, code).value : code
-  return `<pre><code class="hljs ${language}">${highlighted}</code></pre>`
-}
-
-marked.setOptions({ renderer })
+mdi.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' })

 const wrapClass = computed(() => {
  return [
@@ -45,9 +48,15 @@ const wrapClass = computed(() => {
 const text = computed(() => {
  const value = props.text ?? ''
  if (!props.inversion)
-    return marked(value)
+    return mdi.render(value)
  return value
 })
+
+function highlightBlock(str: string, lang?: string) {
+  return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">${t('chat.copyCode')}</span></div><code class="hljs code-block-body ${lang}">${str}</code></pre>`
+}
+
+defineExpose({ textRef })
 </script>

 <template>
@@ -56,7 +65,7 @@ const text = computed(() => {
      <span class="dark:text-white w-[4px] h-[20px] block animate-blink" />
    </template>
    <template v-else>
-      <div class="leading-relaxed break-all">
+      <div ref="textRef" class="leading-relaxed break-words">
        <div v-if="!inversion" class="markdown-body" v-html="text" />
        <div v-else class="whitespace-pre-wrap" v-text="text" />
      </div>
--- a/src/views/chat/components/Message/index.vue
+++ b/src/views/chat/components/Message/index.vue
@@ -1,7 +1,12 @@
 <script setup lang='ts'>
+import { ref } from 'vue'
+import { NDropdown } from 'naive-ui'
 import AvatarComponent from './Avatar.vue'
 import TextComponent from './Text.vue'
 import { SvgIcon } from '@/components/common'
+import { copyText } from '@/utils/format'
+import { useIconRender } from '@/hooks/useIconRender'
+import { t } from '@/locales'

 interface Props {
  dateTime?: string
@@ -16,12 +21,35 @@ interface Emit {
  (ev: 'delete'): void
 }

-defineProps<Props>()
+const props = defineProps<Props>()

 const emit = defineEmits<Emit>()

-function handleDelete() {
-  emit('delete')
+const { iconRender } = useIconRender()
+
+const textRef = ref<HTMLElement>()
+
+const options = [
+  {
+    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') {
+  switch (key) {
+    case 'copyText':
+      copyText({ text: props.text ?? '' })
+      return
+    case 'delete':
+      emit('delete')
+  }
 }

 function handleRegenerate() {
@@ -42,10 +70,11 @@ function handleRegenerate() {
        {{ dateTime }}
      </p>
      <div
-        class="flex items-end gap-2 mt-2"
+        class="flex items-end gap-1 mt-2"
        :class="[inversion ? 'flex-row-reverse' : 'flex-row']"
      >
        <TextComponent
+          ref="textRef"
          :inversion="inversion"
          :error="error"
          :text="text"
@@ -54,17 +83,16 @@ function handleRegenerate() {
        <div class="flex flex-col">
          <button
            v-if="!inversion"
-            class="mb-2 transition text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"
+            class="mb-2 transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-300"
            @click="handleRegenerate"
          >
            <SvgIcon icon="ri:restart-line" />
          </button>
-          <button
-            class="mb-1 transition text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"
-            @click="handleDelete"
-          >
-            <SvgIcon icon="ri:delete-bin-6-line" />
-          </button>
+          <NDropdown :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>
+          </NDropdown>
        </div>
      </div>
    </div>
--- a/src/views/chat/components/Message/style.less
+++ b/src/views/chat/components/Message/style.less
@@ -2,7 +2,7 @@
 	background-color: transparent;
 	font-size: 14px;

-	p{
+	p {
 		white-space: pre-wrap;
 	}

@@ -23,13 +23,44 @@
 	pre {
 		background-color: #fff;
 	}
-}

-.dark{
-	.markdown-body{
-		.highlight pre,
-		pre {
-			background-color: #18181c;
+	code.hljs {
+		padding: 0;
+	}
+
+	.code-block {
+		&-wrapper {
+			position: relative;
+			padding-top: 24px;
+		}
+
+		&-header {
+			position: absolute;
+			top: 5px;
+			right: 0;
+			width: 100%;
+			padding: 0 1rem;
+			display: flex;
+			justify-content: flex-end;
+			align-items: center;
+			color: #b3b3b3;
+
+			&__copy{
+				cursor: pointer;
+				margin-left: 0.5rem;
+				user-select: none;
+				&:hover {
+					color: #65a665;
+				}
+			}
 		}
 	}
 }
+
+html.dark {
+
+	.highlight pre,
+	pre {
+		background-color: #282c34;
+	}
+}
--- a/src/views/chat/hooks/useChat.ts
+++ b/src/views/chat/hooks/useChat.ts
@@ -3,6 +3,10 @@ import { useChatStore } from '@/store'
 export function useChat() {
  const chatStore = useChatStore()

+  const getChatByUuidAndIndex = (uuid: number, index: number) => {
+    return chatStore.getChatByUuidAndIndex(uuid, index)
+  }
+
  const addChat = (uuid: number, chat: Chat.Chat) => {
    chatStore.addChatByUuid(uuid, chat)
  }
@@ -11,8 +15,14 @@ export function useChat() {
    chatStore.updateChatByUuid(uuid, index, chat)
  }

+  const updateChatSome = (uuid: number, index: number, chat: Partial<Chat.Chat>) => {
+    chatStore.updateChatSomeByUuid(uuid, index, chat)
+  }
+
  return {
    addChat,
    updateChat,
+    updateChatSome,
+    getChatByUuidAndIndex,
  }
 }
--- a/src/views/chat/hooks/useCopyCode.ts
+++ b/src/views/chat/hooks/useCopyCode.ts
@@ -0,0 +1,24 @@
+import { onMounted, onUpdated } from 'vue'
+import { copyText } from '@/utils/format'
+
+export function useCopyCode() {
+  function copyCodeBlock() {
+    const codeBlockWrapper = document.querySelectorAll('.code-block-wrapper')
+    codeBlockWrapper.forEach((wrapper) => {
+      const copyBtn = wrapper.querySelector('.code-block-header__copy')
+      const codeBlock = wrapper.querySelector('.code-block-body')
+      if (copyBtn && codeBlock) {
+        copyBtn.addEventListener('click', () => {
+          if (navigator.clipboard?.writeText)
+            navigator.clipboard.writeText(codeBlock.textContent ?? '')
+          else
+            copyText({ text: codeBlock.textContent ?? '', origin: true })
+        })
+      }
+    })
+  }
+
+  onMounted(() => copyCodeBlock())
+
+  onUpdated(() => copyCodeBlock())
+}
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -1,25 +1,27 @@
 <script setup lang='ts'>
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { NButton, NInput, useDialog, useMessage } from 'naive-ui'
+import { NButton, NInput, useDialog } from 'naive-ui'
 import { Message } from './components'
 import { useScroll } from './hooks/useScroll'
 import { useChat } from './hooks/useChat'
+import { useCopyCode } from './hooks/useCopyCode'
 import { HoverButton, SvgIcon } from '@/components/common'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { useChatStore } from '@/store'
 import { fetchChatAPIProcess } from '@/api'
+import { t } from '@/locales'

 let controller = new AbortController()

 const route = useRoute()
 const dialog = useDialog()
-const ms = useMessage()

 const chatStore = useChatStore()

+useCopyCode()
 const { isMobile } = useBasicLayout()
-const { addChat, updateChat } = useChat()
+const { addChat, updateChat, updateChatSome, getChatByUuidAndIndex } = useChat()
 const { scrollRef, scrollToBottom } = useScroll()

 const { uuid } = route.params as { uuid: string }
@@ -71,7 +73,7 @@ async function onConversation() {
    +uuid,
    {
      dateTime: new Date().toLocaleString(),
-      text: 'Aha, Thinking...',
+      text: '',
      loading: true,
      inversion: false,
      error: false,
@@ -118,10 +120,34 @@ async function onConversation() {
    })
  }
  catch (error: any) {
-    let errorMessage = error?.message ?? 'Something went wrong, please try again later.'
+    const errorMessage = error?.message ?? t('common.wrong')

-    if (error.message === 'canceled')
-      errorMessage = 'Request canceled. Please try again.'
+    if (error.message === 'canceled') {
+      updateChatSome(
+        +uuid,
+        dataSources.value.length - 1,
+        {
+          loading: false,
+        },
+      )
+      scrollToBottom()
+      return
+    }
+
+    const currentChat = getChatByUuidAndIndex(+uuid, dataSources.value.length - 1)
+
+    if (currentChat?.text && currentChat.text !== '') {
+      updateChatSome(
+        +uuid,
+        dataSources.value.length - 1,
+        {
+          text: `${currentChat.text}\n[${errorMessage}]`,
+          error: false,
+          loading: false,
+        },
+      )
+      return
+    }

    updateChat(
      +uuid,
@@ -165,7 +191,7 @@ async function onRegenerate(index: number) {
    index,
    {
      dateTime: new Date().toLocaleString(),
-      text: 'Aha, Let me think again...',
+      text: '',
      inversion: false,
      error: false,
      loading: true,
@@ -210,10 +236,18 @@ async function onRegenerate(index: number) {
    })
  }
  catch (error: any) {
-    let errorMessage = error?.message ?? 'Something went wrong, please try again later.'
+    if (error.message === 'canceled') {
+      updateChatSome(
+        +uuid,
+        index,
+        {
+          loading: false,
+        },
+      )
+      return
+    }

-    if (error.message === 'canceled')
-      errorMessage = 'Request canceled. Please try again.'
+    const errorMessage = error?.message ?? t('common.wrong')

    updateChat(
      +uuid,
@@ -239,13 +273,12 @@ function handleDelete(index: number) {
    return

  dialog.warning({
-    title: 'Delete Message',
-    content: 'Are you sure to delete this message?',
-    positiveText: 'Yes',
-    negativeText: 'No',
+    title: t('chat.deleteMessage'),
+    content: t('chat.deleteMessageConfirm'),
+    positiveText: t('common.yes'),
+    negativeText: t('common.no'),
    onPositiveClick: () => {
      chatStore.deleteChatByUuid(+uuid, index)
-      ms.success('Message deleted successfully.')
    },
  })
 }
@@ -255,10 +288,10 @@ function handleClear() {
    return

  dialog.warning({
-    title: 'Clear Chat',
-    content: 'Are you sure to clear this chat?',
-    positiveText: 'Yes',
-    negativeText: 'No',
+    title: t('chat.clearChat'),
+    content: t('chat.clearChatConfirm'),
+    positiveText: t('common.yes'),
+    negativeText: t('common.no'),
    onPositiveClick: () => {
      chatStore.clearChatByUuid(+uuid)
    },
@@ -283,8 +316,8 @@ function handleStop() {

 const placeholder = computed(() => {
  if (isMobile.value)
-    return 'Ask me anything...'
-  return 'Ask me anything... (Shift + Enter = line break)'
+    return t('chat.placeholderMobile')
+  return t('chat.placeholder')
 })

 const buttonDisabled = computed(() => {
@@ -293,15 +326,14 @@ const buttonDisabled = computed(() => {

 const wrapClass = computed(() => {
  if (isMobile.value)
-    return ['pt-14', 'pb-16']
-
+    return ['pt-14']
  return []
 })

 const footerClass = computed(() => {
  let classes = ['p-4']
  if (isMobile.value)
-    classes = ['p-2', 'pr-4', 'fixed', 'bottom-4', 'left-0', 'right-0', 'z-30', 'h-14', 'overflow-hidden']
+    classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-4', 'overflow-hidden']
  return classes
 })

@@ -316,7 +348,7 @@ onUnmounted(() => {
 </script>

 <template>
-  <div class="flex flex-col h-full" :class="wrapClass">
+  <div class="flex flex-col w-full h-full" :class="wrapClass">
    <main class="flex-1 overflow-hidden">
      <div
        id="scrollRef"
@@ -324,58 +356,62 @@ onUnmounted(() => {
        class="h-full overflow-hidden overflow-y-auto"
        :class="[isMobile ? 'p-2' : 'p-4']"
      >
-        <template v-if="!dataSources.length">
-          <div class="flex items-center justify-center mt-4 text-center text-neutral-300">
-            <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
-            <span>Aha~</span>
-          </div>
-        </template>
-        <template v-else>
-          <div>
-            <Message
-              v-for="(item, index) of dataSources"
-              :key="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="flex justify-center">
-              <NButton v-if="loading" ghost @click="handleStop">
-                <template #icon>
-                  <SvgIcon icon="ri:stop-circle-line" />
-                </template>
-                Stop Responding
-              </NButton>
+        <div class="w-full max-w-screen-xl m-auto">
+          <template v-if="!dataSources.length">
+            <div class="flex items-center justify-center mt-4 text-center text-neutral-300">
+              <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
+              <span>Aha~</span>
            </div>
-          </div>
-        </template>
+          </template>
+          <template v-else>
+            <div>
+              <Message
+                v-for="(item, index) of dataSources"
+                :key="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">
+                <NButton v-if="loading" type="warning" @click="handleStop">
+                  <template #icon>
+                    <SvgIcon icon="ri:stop-circle-line" />
+                  </template>
+                  Stop Responding
+                </NButton>
+              </div>
+            </div>
+          </template>
+        </div>
      </div>
    </main>
    <footer :class="footerClass">
-      <div class="flex items-center justify-between space-x-2">
-        <HoverButton @click="handleClear">
-          <span class="text-xl text-[#4f555e] dark:text-white">
-            <SvgIcon icon="ri:delete-bin-line" />
-          </span>
-        </HoverButton>
-        <NInput
-          v-model:value="prompt"
-          type="textarea"
-          :autosize="{ minRows: 1, maxRows: 2 }"
-          :placeholder="placeholder"
-          @keypress="handleEnter"
-        />
-        <NButton type="primary" :disabled="buttonDisabled" @click="handleSubmit">
-          <template #icon>
-            <span class="dark:text-black">
-              <SvgIcon icon="ri:send-plane-fill" />
+      <div class="w-full max-w-screen-xl m-auto">
+        <div class="flex items-center justify-between space-x-2">
+          <HoverButton @click="handleClear">
+            <span class="text-xl text-[#4f555e] dark:text-white">
+              <SvgIcon icon="ri:delete-bin-line" />
            </span>
-          </template>
-        </NButton>
+          </HoverButton>
+          <NInput
+            v-model:value="prompt"
+            type="textarea"
+            :autosize="{ minRows: 1, maxRows: 2 }"
+            :placeholder="placeholder"
+            @keypress="handleEnter"
+          />
+          <NButton type="primary" :disabled="buttonDisabled" @click="handleSubmit">
+            <template #icon>
+              <span class="dark:text-black">
+                <SvgIcon icon="ri:send-plane-fill" />
+              </span>
+            </template>
+          </NButton>
+        </div>
      </div>
    </footer>
  </div>
--- a/src/views/chat/layout/sider/Footer.vue
+++ b/src/views/chat/layout/sider/Footer.vue
@@ -1,64 +1,22 @@
 <script setup lang='ts'>
-import { computed, h, ref } from 'vue'
-import { NDropdown } from 'naive-ui'
-import { HoverButton, Setting, SvgIcon, UserAvatar } from '@/components/common'
-import { useAppStore } from '@/store'
+import { defineAsyncComponent, ref } from 'vue'
+import { HoverButton, SvgIcon, UserAvatar } from '@/components/common'

-const appStore = useAppStore()
+const Setting = defineAsyncComponent(() => import('@/components/common/Setting/index.vue'))

 const show = ref(false)
-
-const theme = computed(() => appStore.theme)
-
-const options = [
-  {
-    label: 'Dark',
-    key: 'dark',
-    icon: renderIcon('ri:moon-foggy-line'),
-  },
-  {
-    label: 'Light',
-    key: 'light',
-    icon: renderIcon('ri:sun-foggy-line'),
-  },
-  {
-    label: 'Auto',
-    key: 'auto',
-    icon: renderIcon('ri:contrast-line'),
-  },
-]
-
-function renderIcon(icon: string) {
-  return () => {
-    return h(SvgIcon, { icon })
-  }
-}
-
-function handleThemeChange(key: 'light' | 'dark' | 'auto') {
-  appStore.setTheme(key)
-}
 </script>

 <template>
  <footer class="flex items-center justify-between min-w-0 p-4 overflow-hidden border-t dark:border-neutral-800">
    <UserAvatar />

-    <NDropdown :options="options" placement="top" trigger="click" @select="handleThemeChange">
-      <HoverButton>
-        <span class="text-xl text-[#4f555e] dark:text-white">
-          <SvgIcon v-if="theme === 'dark'" icon="ri:moon-foggy-line" />
-          <SvgIcon v-if="theme === 'light'" icon="ri:sun-foggy-line" />
-          <SvgIcon v-if="theme === 'auto'" icon="ri:contrast-line" />
-        </span>
-      </HoverButton>
-    </NDropdown>
-
-    <HoverButton tooltip="Setting" @click="show = true">
+    <HoverButton :tooltip="$t('setting.setting')" @click="show = true">
      <span class="text-xl text-[#4f555e] dark:text-white">
        <SvgIcon icon="ri:settings-4-line" />
      </span>
    </HoverButton>

-    <Setting v-model:visible="show" />
+    <Setting v-if="show" v-model:visible="show" />
  </footer>
 </template>
--- a/src/views/chat/layout/sider/List.vue
+++ b/src/views/chat/layout/sider/List.vue
@@ -16,6 +16,8 @@ async function handleSelect({ uuid }: Chat.History) {
  if (isActive(uuid))
    return

+  if (chatStore.active)
+    chatStore.updateHistory(chatStore.active, { isEdit: false })
  await chatStore.setActive(uuid)

  if (isMobile.value)
@@ -49,7 +51,7 @@ function isActive(uuid: number) {
      <template v-if="!dataSources.length">
        <div class="flex flex-col items-center mt-4 text-center text-neutral-300">
          <SvgIcon icon="ri:inbox-line" class="mb-2 text-3xl" />
-          <span>No history</span>
+          <span>{{ $t('common.noData') }}</span>
        </div>
      </template>
      <template v-else>
@@ -87,7 +89,7 @@ function isActive(uuid: number) {
                      <SvgIcon icon="ri:delete-bin-line" />
                    </button>
                  </template>
-                  Are you sure to clear this history?
+                  {{ $t('chat.deleteHistoryConfirm') }}
                </NPopconfirm>
              </template>
            </div>
--- a/src/views/chat/layout/sider/index.vue
+++ b/src/views/chat/layout/sider/index.vue
@@ -32,6 +32,15 @@ const getMobileClass = computed<CSSProperties>(() => {
  return {}
 })

+const mobileSafeArea = computed(() => {
+  if (isMobile.value) {
+    return {
+      paddingBottom: 'env(safe-area-inset-bottom)',
+    }
+  }
+  return {}
+})
+
 watch(
  isMobile,
  (val) => {
@@ -56,7 +65,7 @@ watch(
    :style="getMobileClass"
    @update-collapsed="handleUpdateCollapsed"
  >
-    <div class="flex flex-col h-full">
+    <div class="flex flex-col h-full" :style="mobileSafeArea">
      <main class="flex flex-col flex-1 min-h-0">
        <div class="p-4">
          <NButton dashed block @click="handleAdd">
--- a/src/views/exception/403/index.vue
+++ b/src/views/exception/403/index.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { NButton } from 'naive-ui'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+function goHome() {
+  router.push('/')
+}
+</script>
+
+<template>
+  <div class="flex h-full">
+    <div class="px-4 m-auto space-y-4 text-center max-[400px]">
+      <h1 class="text-4xl text-slate-800 dark:text-neutral-200">
+        No permission
+      </h1>
+      <p class="text-base text-slate-500 dark:text-neutral-400">
+        The page you're trying access has restricted access.
+        Please refer to your system administrator
+      </p>
+      <div class="flex items-center justify-center text-center">
+        <div class="w-[300px]">
+          <div class="w-[300px]">
+            <img src="../../../icons/403.svg" alt="404">
+          </div>
+        </div>
+      </div>
+      <NButton type="primary" @click="goHome">
+        Go to Home
+      </NButton>
+    </div>
+  </div>
+</template>
--- a/src/views/exception/404/index.vue
+++ b/src/views/exception/404/index.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { NButton } from 'naive-ui'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+function goHome() {
+  router.push('/')
+}
+</script>
+
+<template>
+  <div class="flex h-full">
+    <div class="px-4 m-auto space-y-4 text-center max-[400px]">
+      <h1 class="text-4xl text-slate-800 dark:text-neutral-200">
+        Sorry, page not found!
+      </h1>
+      <p class="text-base text-slate-500 dark:text-neutral-400">
+        Sorry, we couldn’t find the page you’re looking for. Perhaps you’ve mistyped the URL? Be sure to check your spelling.
+      </p>
+      <div class="flex items-center justify-center text-center">
+        <div class="w-[300px]">
+          <img src="../../../icons/404.svg" alt="404">
+        </div>
+      </div>
+      <NButton type="primary" @click="goHome">
+        Go to Home
+      </NButton>
+    </div>
+  </div>
+</template>
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,11 +13,11 @@
    "noUnusedLocals": true,
    "strictNullChecks": true,
    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
    "paths": {
      "@/*": ["./src/*"]
    },
-    // @vueuse/core 不能通过 vue-tsc 检查，所以这里需要忽略，以后将移除
-    "types": ["vite/client", "node", "naive-ui/volar", "web-bluetooth"]
+    "types": ["vite/client", "node", "naive-ui/volar"]
  },
  "exclude": ["node_modules", "dist", "service"]
 }
Author	SHA1	Message	Date
Redon	dea74e242e	Merge pull request #347 from Chanzhaoyu/refactor chore: version 2.9.3	2023-03-06 20:44:43 +08:00
ChenZhaoYu	162f561523	chore: version 2.9.3	2023-03-06 20:41:42 +08:00
ChenZhaoYu	50e672e79b	fix: 调整部分问题	2023-03-06 20:34:29 +08:00
Redon	c8fa086565	Merge pull request #305 from ChandlerVer5/refactor-markdown refactor(markdown): 💡 使用 markdown-it 替换 marked，获得更好的体验	2023-03-06 19:27:14 +08:00
ChenZhaoYu	cd91cb1afd	feat: 调整代码	2023-03-06 19:25:40 +08:00
ChandlerVer5	e6db6a58f0	fix: 🐛 修复黑夜模式下的kaTex展示问题	2023-03-05 19:07:07 +08:00
ChandlerVer5	ab08df9823	refactor: 💡 使用 markdown-it-highlightjs 进行高亮	2023-03-05 13:58:45 +08:00
ChandlerVer5	8619ac4667	refactor: 💡 使用 markdown-it 替换 marked，获得更好的体验 ✅ Closes: #290 #283	2023-03-05 12:47:53 +08:00
Redon	de34d97529	Merge pull request #279 from sepcnt/patch-1 Update List.vue	2023-03-05 08:59:22 +08:00
Redon	0cdacfdb2f	Merge pull request #293 from nalf3in/main chore: added English translation for the docs	2023-03-05 08:57:30 +08:00
nalf3in	976713490a	chore: added English translation for the docs	2023-03-04 12:48:42 -05:00
Sepcnt	002a57704f	Update List.vue	2023-03-04 20:53:38 +08:00
Redon	9dd3655b81	Merge pull request #277 from shansing/patch-1 chore: 更新文档常见问题	2023-03-04 20:07:49 +08:00
Shansing	d1de182451	chore: 更新文档常见问题	2023-03-04 19:24:56 +08:00
ChenZhaoYu	dee84e9307	fix: iOS安全距离和输入溢出[#266 ]	2023-03-04 15:46:28 +08:00
Redon	0fdf75eba0	chore: version 2.9.2 (#261 ) * feat: 添加 OPENAI_API_BASE_URL 可选参数[#249] * fix: 生成的代码块不能复制的问题[#251][#260] * perf: 限制高分屏上的宽度[#257] * perf: 文字按单词换行[#215][#225] * perf: highlight.js 新语法警告 * fix: 移动端输入框不会被键盘弹起[#256] * chore: 更新文档 * chore: version 2.9.2	2023-03-04 09:34:28 +08:00
Yule Hou	2293969070	feat: add latex rendering (#247 ) * feat: add latex rendering * perf: 提升 css 引入路径 --------- Co-authored-by: ChenZhaoYu <790348264@qq.com>	2023-03-04 08:22:50 +08:00
api man	f7f87e266f	feat: 支持webAPP(苹果添加到主页书签访问) (#227 ) * feat: 应用自定义头像 * feat: 头像添加缺省判断 * feat: 头像缺省和响应式 * feat: 支持webAPP(苹果添加到主页书签访问) --------- Co-authored-by: wangqy <wangqy@inketang.com> Co-authored-by: ChenZhaoYu <790348264@qq.com>	2023-03-04 08:10:01 +08:00
ChenZhaoYu	f95af40ab8	chore: 更新文档	2023-03-03 11:59:16 +08:00
InterestingDarkness	20d6135658	Add support for SOCKS proxy in ChatGPTAPI fetch (#214 )	2023-03-03 10:43:27 +08:00
Redon	f19998d59b	feat: version 2.9.1 (#207 ) * feat: i18n * chore: format * feat: 补充遗漏翻译 * chore: update deps * feat: 复制代码块[#196][#197] * chore: version 2.9.1	2023-03-02 21:27:20 +08:00
张琪灵	21cf1bdd9e	新增docker-compose部署 (#187 ) * feat docker-compose deploy * feat docker-compose deploy	2023-03-02 18:07:54 +08:00
api man	f234aebaec	feat: 应用自定义头像 (#200 ) * feat: 应用自定义头像 * feat: 头像添加缺省判断 --------- Co-authored-by: wangqy <wangqy@inketang.com>	2023-03-02 18:07:37 +08:00
Redon	32ebbec8ad	feat: 增加带格式的复制 (#182 ) * feat: 增加带格式的复制 * feat: 移除前端超时设定 * chore: update deps * feat: 添加权限页面 * feat: 设定页面优化 * feat: 更新 chatgpt 以支持 `gpt-3.5-turbo-0301` * chore: version 2.9.0	2023-03-02 12:59:20 +08:00
Redon	42e320fe35	chore: version 2.8.3 (#175 ) * feat: 保留已存在的内容直到手动操作 * feat: 支持复制文本 * chore: version 2.8.3	2023-03-01 13:20:31 +08:00
Redon	94e23bb916	chore: version 2.8.2 (#159 ) * fix: 修复普通文本代码渲染和深色模式下的问题[#139][#154] * chore: version 2.8.2	2023-02-28 10:00:53 +08:00