chore: v2.10.6

fix: highlight.js 控制台兼容性警告
feat: session 返回接口方式做显示判断
2025-07-23 22:34:44 +00:00 · 2023-03-17 10:01:35 +08:00 · 2023-03-17 09:49:43 +08:00 · 2023-03-17 09:36:12 +08:00 · 2023-03-17 09:25:16 +08:00 · 2023-03-17 09:21:25 +08:00
114 changed files with 7954 additions and 1146 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,6 +1,6 @@
+**/node_modules
+*/node_modules
 node_modules
 Dockerfile
-.git
-.husky
-.github
-.vscode
+.*
+*/.*
--- a/.env
+++ b/.env
@@ -3,5 +3,5 @@ VITE_GLOB_API_URL=/api

 VITE_APP_API_BASE_URL=http://localhost:3002/

-# Glob API Timeout (ms)
-VITE_GLOB_API_TIMEOUT=100000
+# Whether long replies are supported, which may result in higher API fees
+VITE_GLOB_OPEN_LONG_REPLY=false
--- a/.github/workflows/build_docker.yml
+++ b/.github/workflows/build_docker.yml
@@ -3,6 +3,8 @@ name: build_docker
 on:
  push:
    branches: [main]
+  release:
+    types: [created] # 表示在创建新的 Release 时触发

 jobs:
  build_docker:
@@ -11,11 +13,11 @@ jobs:
    steps:
      - name: Checkout
        uses: actions/checkout@v3
-      - name: Docker meta
-        id: meta
-        uses: docker/metadata-action@v4
-        with:
-          images: chenzhaoyu94/chatgpt-web
+
+      - run: |
+          echo "本次构建的版本为：${GITHUB_REF_NAME} (但是这个变量目前上下文中无法获取到)"
+          echo 本次构建的版本为：${{ github.ref_name }}
+          env

      - name: Set up QEMU
        uses: docker/setup-qemu-action@v2
@@ -32,6 +34,8 @@ jobs:
        with:
          context: .
          push: true
-          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}
          platforms: linux/amd64,linux/arm64
+          tags: |
+            ${{ secrets.DOCKERHUB_USERNAME }}/chatgpt-web:${{ github.ref_name }}
+            ${{ secrets.DOCKERHUB_USERNAME }}/chatgpt-web:latest
--- a/.gitignore
+++ b/.gitignore
@@ -27,3 +27,6 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+# Environment variables files
+/service/.env
--- 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,300 @@
+## v2.10.6
+
+`2023-03-17`
+
+## Feature
+- 显示 `API` 余额 [[pzcn](https://github.com/Chanzhaoyu/chatgpt-web/pull/582)]
+
+## Enhancement
+- 美化滚动条样式和 `UI` 保持一致 [[haydenull](https://github.com/Chanzhaoyu/chatgpt-web/pull/617)]
+- 优化移动端 `Prompt` 样式 [[CornerSkyless](https://github.com/Chanzhaoyu/chatgpt-web/pull/608)]
+- 上下文开关改为全局开关，现在记录在本地缓存中
+- 配置信息按接口类型显示
+
+## Perf
+- 优化函数方法 [[kirklin](https://github.com/Chanzhaoyu/chatgpt-web/pull/583)]
+- 字符错误 [[pdsuwwz](https://github.com/Chanzhaoyu/chatgpt-web/pull/585)]
+- 文档描述错误 [[lizhongyuan3](https://github.com/Chanzhaoyu/chatgpt-web/pull/636)]
+
+## BugFix
+- 修复 `Prompt` 导入、导出兼容性错误
+- 修复 `highlight.js` 控制台兼容性警告
+
+## Other
+- 依赖更新
+
+## v2.10.5
+
+`2023-03-13`
+
+更新依赖，`access_token` 默认代理为 [acheong08](https://github.com/acheong08) 的 `https://bypass.duti.tech/api/conversation`
+
+## Feature
+- `Prompt` 商店在线导入可以导入两种 `recommend.json`里提到的模板 [simonwu53](https://github.com/Chanzhaoyu/chatgpt-web/pull/521)
+- 支持 `HTTPS_PROXY` [whatwewant](https://github.com/Chanzhaoyu/chatgpt-web/pull/308)
+- `Prompt` 添加查询筛选
+
+## Enhancement
+- 调整输入框最大行数 [yi-ge](https://github.com/Chanzhaoyu/chatgpt-web/pull/502)
+- 优化 `docker` 打包 [whatwewant](https://github.com/Chanzhaoyu/chatgpt-web/pull/520)
+- `Prompt` 添加翻译和优化布局
+- 「繁体中文」补全和审阅 [PeterDaveHello](https://github.com/Chanzhaoyu/chatgpt-web/pull/542)
+- 语言选择调整为下路框形式
+- 权限输入框类型调整为密码形式
+
+## BugFix
+- `JSON` 导入检查 [Nothing1024](https://github.com/Chanzhaoyu/chatgpt-web/pull/523)
+- 修复 `AUTH_SECRET_KEY` 模式下跨域异常并添加对 `node.js 19` 版本的支持 [yi-ge](https://github.com/Chanzhaoyu/chatgpt-web/pull/499)
+- 确定清空上下文时不应该重置会话标题
+
+## Other
+- 调整文档
+- 更新依赖
+
+## v2.10.4
+
+`2023-03-11`
+
+## Feature
+- 感谢 [Nothing1024](https://github.com/Chanzhaoyu/chatgpt-web/pull/268) 添加 `Prompt` 模板和 `Prompt` 商店支持
+
+## Enhancement
+- 设置添加关闭按钮[#495]
+
+## Demo
+
+![Prompt](https://camo.githubusercontent.com/6a51af751eb29238cb7ef4f8fbd89f63db837562f97f33273095424e62dc9194/68747470733a2f2f73312e6c6f63696d672e636f6d2f323032332f30332f30342f333036326665633163613562632e676966)
+
+## v2.10.3
+
+`2023-03-10`
+
+> 声明：除 `ChatGPTUnofficialProxyAPI` 使用的非官方代理外，本项目代码包括上游引用包均开源在 `GitHub`，如果你觉得本项目有监控后门或有问题导致你的账号、API被封，那我很抱歉。我可能`BUG`写的多，但我不缺德。此次主要为前端界面调整，周末愉快。
+
+## Feature
+- 支持长回复 [[yi-ge](https://github.com/Chanzhaoyu/chatgpt-web/pull/450)][[详情](https://github.com/Chanzhaoyu/chatgpt-web/pull/450)]
+- 支持 `PWA` [[chenxch](https://github.com/Chanzhaoyu/chatgpt-web/pull/452)]
+
+## Enhancement
+- 调整移动端按钮和优化布局
+- 调整 `iOS` 上安全距离
+- 简化 `docker-compose` 部署 [[cloudGrin](https://github.com/Chanzhaoyu/chatgpt-web/pull/466)]
+
+## BugFix
+- 修复清空会话侧边栏标题不会重置的问题 [[RyanXinOne](https://github.com/Chanzhaoyu/chatgpt-web/pull/453)]
+- 修复设置文字过长时导致的设置按钮消失的问题
+
+## Other
+- 更新依赖
+
+## v2.10.2
+
+`2023-03-09`
+
+衔接 `2.10.1` 版本[详情](https://github.com/Chanzhaoyu/chatgpt-web/releases/tag/v2.10.1)
+
+## Enhancement
+- 移动端下输入框获得焦点时左侧按钮隐藏
+
+## BugFix
+- 修复 `2.10.1` 中添加 `OPENAI_API_MODEL` 变量的判断错误，会导致默认模型指定失效，抱歉
+- 回退 `2.10.1` 中前端变量影响 `Docker` 打包
+
+## v2.10.1
+
+`2023-03-09`
+
+注意：删除了 `.env` 文件改用 `.env.example` 代替，如果是手动部署的同学现在需要手动创建 `.env` 文件并从 `.env.example` 中复制需要的变量，并且 `.env` 文件现在会在 `Git` 提交中被忽略，原因如下：
+
+- 在项目中添加 `.env` 从一开始就是个错误的示范
+- 如果是 `Fork` 项目进行修改测试总是会被 `Git` 修改提示给打扰
+- 感谢 [yi-ge](https://github.com/Chanzhaoyu/chatgpt-web/pull/395) 的提醒和修改
+
+
+这两天开始，官方已经开始对第三方代理进行了拉闸， `accessToken` 即将或已经开始可能会不可使用。异常 `API` 使用也开始封号，封号缘由不明，如果出现使用 `API` 提示错误，请查看后端控制台信息，或留意邮箱。
+
+## Feature
+- 感谢 [CornerSkyless](https://github.com/Chanzhaoyu/chatgpt-web/pull/393) 添加是否发送上下文开关功能
+
+## Enhancement
+- 感谢 [nagaame](https://github.com/Chanzhaoyu/chatgpt-web/pull/415) 优化`docker`打包镜像文件过大的问题
+- 感谢 [xieccc](https://github.com/Chanzhaoyu/chatgpt-web/pull/404) 新增 `API` 模型配置变量 `OPENAI_API_MODEL`
+- 感谢 [acongee](https://github.com/Chanzhaoyu/chatgpt-web/pull/394) 优化输出时滚动条问题
+
+## BugFix
+- 感谢 [CornerSkyless](https://github.com/Chanzhaoyu/chatgpt-web/pull/392) 修复导出图片会丢失头像的问题
+- 修复深色模式导出图片的样式问题
+
+
+## v2.10.0
+
+`2023-03-07`
+
+- 老规矩，手动部署的同学需要删除 `node_modules` 安装包重新安装降低出错概率，其他部署不受影响，但是可能会有缓存问题。
+- 虽然说了更新放缓，但是 `issues` 不看， `PR` 不改我睡不着，我的邮箱从每天早上`8`点到凌晨`12`永远在滴滴滴，所以求求各位，超时的`issues`自己关闭下哈，我真的需要缓冲一下。
+- 演示图片请看最后
+
+## Feature
+- 添加权限功能，用法：`service/.env` 中的 `AUTH_SECRET_KEY` 变量添加密码
+- 感谢 [PeterDaveHello](https://github.com/Chanzhaoyu/chatgpt-web/pull/348) 添加「繁体中文」翻译
+- 感谢 [GermMC](https://github.com/Chanzhaoyu/chatgpt-web/pull/369) 添加聊天记录导入、导出、清空的功能
+- 感谢 [CornerSkyless](https://github.com/Chanzhaoyu/chatgpt-web/pull/374) 添加会话保存为本地图片的功能
+
+
+## Enhancement
+- 感谢 [CornerSkyless](https://github.com/Chanzhaoyu/chatgpt-web/pull/363) 添加 `ctrl+enter`  发送消息
+- 现在新消息只有在结束了之后才滚动到底部，而不是之前的强制性
+- 优化部分代码
+
+## BugFix
+-	转义状态码前端显示，防止直接暴露 `key`（我可能需要更多的状态码补充）
+
+## Other
+- 更新依赖到最新
+
+## 演示
+> 不是界面最新效果，有美化改动
+
+权限
+
+![权限](https://user-images.githubusercontent.com/24789441/223438518-80d58d42-e344-4e39-b87c-251ff73925ed.png)
+
+聊天记录导出
+
+![聊天记录导出](https://user-images.githubusercontent.com/57023771/223372153-6d8e9ec1-d82c-42af-b4bd-232e50504a25.gif)
+
+保存图片到本地
+
+![保存图片到本地](https://user-images.githubusercontent.com/13901424/223423555-b69b95ef-8bcf-4951-a7c9-98aff2677e18.gif)
+
+## 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`
+
+### BugFix
+- 修复 `API` 版本不是 `Markdown` 时，普通 `HTML` 代码会被渲染的问题 [#146]
+
+## v2.8.0
+
+`2023-02-27`
+
+- 感谢 [puppywang](https://github.com/Chanzhaoyu/chatgpt-web/commit/628187f5c3348bda0d0518f90699a86525d19018) 修复了 `2.7.0` 版本中关于流输出数据的问题（使用 `nginx` 需要自行配置 `octet-stream` 相关内容）
+
+- 关于为什么使用 `octet-stream` 而不是 `sse`，是因为更好的兼容之前的模式。
+
+- 建议更新到此版本获得比较完整的体验
+
+### Enhancement
+- 优化了部份代码和类型提示
+- 输入框添加换行提示
+- 移动端输入框现在回车为换行，而不是直接提交
+- 移动端双击标题返回顶部，箭头返回底部
+
+### BugFix
+- 流输出数据下的问题[#122]
+- 修复了 `API Key` 下部份代码不换行的问题
+- 修复移动端深色模式部份样式问题[#123][#126]
+- 修复主题模式图标不一致的问题[#126]
+
+## v2.7.3
+
+`2023-02-25`
+
+### Feature
+- 适配系统深色模式 [#118](https://github.com/Chanzhaoyu/chatgpt-web/issues/103)
+### BugFix
+- 修复用户消息能被渲染为 `HTML` 问题 [#117](https://github.com/Chanzhaoyu/chatgpt-web/issues/117)
+
+## v2.7.2
+
+`2023-02-24`
+### Enhancement
+- 消息使用 [github-markdown-css](https://www.npmjs.com/package/github-markdown-css) 进行美化，现在支持全语法
+- 移除测试无用函数
+
 ## v2.7.1

 `2023-02-23`
--- 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/50
+++ b/50
@@ -1,20 +1,56 @@
 # build front-end
-FROM node:lts-alpine AS builder
+FROM node:lts-alpine AS frontend
+
+RUN npm install pnpm -g

-COPY ./ /app
 WORKDIR /app

-RUN npm install pnpm -g && pnpm install && pnpm run build
+COPY ./package.json /app
+
+COPY ./pnpm-lock.yaml /app
+
+RUN pnpm install
+
+COPY . /app
+
+RUN pnpm run build
+
+# build backend
+FROM node:lts-alpine as backend
+
+RUN npm install pnpm -g
+
+WORKDIR /app
+
+COPY /service/package.json /app
+
+COPY /service/pnpm-lock.yaml /app
+
+RUN pnpm install
+
+COPY /service /app
+
+RUN pnpm build

 # service
 FROM node:lts-alpine

-COPY /service /app
-COPY --from=builder /app/dist /app/public
+RUN npm install pnpm -g

 WORKDIR /app
-RUN npm install pnpm -g && pnpm install
+
+COPY /service/package.json /app
+
+COPY /service/pnpm-lock.yaml /app
+
+RUN pnpm install --production && rm -rf /root/.npm /root/.pnpm-store /usr/local/share/.cache /tmp/*
+
+COPY /service /app
+
+COPY --from=frontend /app/dist /app/public
+
+COPY --from=backend /app/build /app/build

 EXPOSE 3002

-CMD ["pnpm", "run", "start"]
+CMD ["pnpm", "run", "prod"]
--- a/README.en.md
+++ b/README.en.md
@@ -0,0 +1,333 @@
+# 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.example` file and copy the contents 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
+
+[✓] Access rights control
+
+[✓] Data import and export
+
+[✓] Save message to local image
+
+[✓] 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
+- `OPENAI_API_MODEL` optional, available when `OPENAI_API_KEY` is set
+- `API_REVERSE_PROXY` optional, available when `OPENAI_ACCESS_TOKEN` is set [Reference](#introduction)
+- `AUTH_SECRET_KEY` Access Password，optional
+- `TIMEOUT_MS` timeout, in milliseconds, optional
+- `SOCKS_PROXY_HOST` optional, effective with SOCKS_PROXY_PORT
+- `SOCKS_PROXY_PORT` optional, effective with SOCKS_PROXY_HOST
+- `HTTPS_PROXY` optional, support http，https, socks5
+- `ALL_PROXY` optional, support http，https, socks5
+
+![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
+      # api model, optional, available when OPENAI_API_KEY is set
+      OPENAI_API_MODEL: xxxx
+      # reverse proxy, optional
+      API_REVERSE_PROXY: xxx
+      # access password，optional
+      AUTH_SECRET_KEY: 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
+      # HTTPS Proxy，optional, support http, https, socks5
+      HTTPS_PROXY: http://xxx:7890
+```
+The `OPENAI_API_BASE_URL` is optional and only used when setting the `OPENAI_API_KEY`.
+The `OPENAI_API_MODEL` 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`                                                                                   |
+| `AUTH_SECRET_KEY`         | Optional | access password                                                                          |
+| `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.                                                        |
+| `OPENAI_API_MODEL`  | Optional, only for `OpenAI API` |  API model.                                                        |
+| `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.                 |
+| `HTTPS_PROXY`   | Optional | HTTPS Proxy.                 |
+| `ALL_PROXY`   | Optional | ALL Proxy.                 |
+
+> 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. Refer to the root directory `.env.example` file content to create `.env` file, modify `VITE_GLOB_API_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/cover.png)
-![cover2](./docs/cover2.png)
+> 声明：此项目只发布于 Github，基于 MIT 协议，免费且作为开源学习使用。并且不会有任何形式的卖号、付费服务、讨论群、讨论组等行为。谨防受骗。
+
+![cover](./docs/c1.png)
+![cover2](./docs/c2.png)

 - [ChatGPT Web](#chatgpt-web)
 	- [介绍](#介绍)
@@ -18,6 +24,7 @@
 	- [测试环境运行](#测试环境运行)
 		- [后端服务](#后端服务)
 		- [前端网页](#前端网页)
+	- [环境变量](#环境变量)
 	- [打包](#打包)
 		- [使用 Docker](#使用-docker)
 			- [Docker 参数示例](#docker-参数示例)
@@ -30,35 +37,40 @@
 			- [前端网页](#前端网页-1)
 	- [常见问题](#常见问题)
 	- [参与贡献](#参与贡献)
+	- [赞助](#赞助)
 	- [License](#license)
 ## 介绍

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

-|  方式   | 免费？  | 可靠性  | 质量 |
-|  ----  | ----  | ----  | ----  |
-| `ChatGPTAPI(GPT-3)`  | 否 | 	可靠 | 较笨 |
-| `ChatGPTUnofficialProxyAPI(网页 accessToken)`  | 	是 |  不可靠 | 聪明 |
-
-***Note:*** 网页 `accessToken` 存在大约 8 小时，而且国内地区网络问题更推荐使用 `GPT-3` 的方式
+| 方式                                          | 免费？ | 可靠性     | 质量 |
+| --------------------------------------------- | ------ | ---------- | ---- |
+| `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`，非常轻量级，但依赖于第三方服务器，并且有速率限制）

+警告：
+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)（注意：只有这两个是推荐，其他第三方来源，请自行甄别）
+5. 把项目发布到公共网络时，你应该设置 `AUTH_SECRET_KEY` 变量添加你的密码访问权限，你也应该修改 `index.html` 中的 `title`，防止被关键词搜索到。
+
 切换方式：
-1. 进入 `service/.env` 文件
+1. 进入 `service/.env.example` 文件，复制内容到 `service/.env` 文件
 2. 使用 `OpenAI API Key` 请填写 `OPENAI_API_KEY` 字段 [(获取 apiKey)](https://platform.openai.com/overview)
 3. 使用 `Web API` 请填写 `OPENAI_ACCESS_TOKEN` 字段 [(获取 accessToken)](https://chat.openai.com/api/auth/session)
 4. 同时存在时以 `OpenAI API Key` 优先

-反向代理：
+环境变量：

-`ChatGPTUnofficialProxyAPI`时可用 [详情](https://github.com/transitive-bullshit/chatgpt-api#reverse-proxy)
+全部参数变量请查看或[这里](#环境变量)

-```shell
-# service/.env
-API_REVERSE_PROXY=
+```
+/service/.env.example
 ```

 ## 待实现路线
@@ -68,9 +80,15 @@ API_REVERSE_PROXY=

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

-[✗] 界面多语言
+[✓] 访问权限控制

-[✗] 界面主题
+[✓] 数据导入、导出
+
+[✓] 保存消息到本地图片
+
+[✓] 界面多语言
+
+[✓] 界面主题

 [✗] More...

@@ -78,7 +96,7 @@ API_REVERSE_PROXY=

 ### Node

-`node` 需要 `^16 || ^18` 版本（`node >= 14` 需要安装 [fetch polyfill](https://github.com/developit/unfetch#usage-as-a-polyfill)），使用 [nvm](https://github.com/nvm-sh/nvm) 可管理本地多个 `node` 版本
+`node` 需要 `^16 || ^18 || ^19` 版本（`node >= 14` 需要安装 [fetch polyfill](https://github.com/developit/unfetch#usage-as-a-polyfill)），使用 [nvm](https://github.com/nvm-sh/nvm) 可管理本地多个 `node` 版本

 ```shell
 node -v
@@ -136,17 +154,34 @@ pnpm start
 pnpm dev
 ```

+## 环境变量
+
+`API` 可用：
+
+- `OPENAI_API_KEY` 和 `OPENAI_ACCESS_TOKEN` 二选一
+- `OPENAI_API_MODEL`  设置模型，可选，默认：`gpt-3.5-turbo`
+- `OPENAI_API_BASE_URL` 设置接口地址，可选，默认：`https://api.openai.com`
+
+`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)（注意：只有这两个是推荐，其他第三方来源，请自行甄别）
+
+通用：
+
+- `AUTH_SECRET_KEY` 访问权限密钥，可选
+- `TIMEOUT_MS` 超时，单位毫秒，可选
+- `SOCKS_PROXY_HOST` 和 `SOCKS_PROXY_PORT` 一起时生效，可选
+- `SOCKS_PROXY_PORT` 和 `SOCKS_PROXY_HOST` 一起时生效，可选
+- `HTTPS_PROXY` 支持 `http`，`https`, `socks5`，可选
+- `ALL_PROXY` 支持 `http`，`https`, `socks5`，可选
+
 ## 打包

 ### 使用 Docker

 #### Docker 参数示例

- `OPENAI_API_KEY` 二选一
- `OPENAI_ACCESS_TOKEN`  二选一，同时存在时，`OPENAI_API_KEY` 优先
- `API_REVERSE_PROXY` 可选，设置 `OPENAI_ACCESS_TOKEN` 时可用 [参考](#介绍)
- `TIMEOUT_MS` 超时，单位毫秒，可选
-
 ![docker](./docs/docker.png)

 #### Docker build & Run
@@ -173,33 +208,53 @@ version: '3'

 services:
  app:
-    image: chenzhaoyu94/chatgpt-web:main
+    image: chenzhaoyu94/chatgpt-web # 总是使用 latest ,更新时重新 pull 该 tag 镜像即可
    ports:
      - 3002:3002
    environment:
      # 二选一
-      OPENAI_API_KEY: xxxxxx
+      OPENAI_API_KEY: sk-xxx
      # 二选一
-      OPENAI_ACCESS_TOKEN: xxxxxx
+      OPENAI_ACCESS_TOKEN: xxx
+      # API接口地址，可选，设置 OPENAI_API_KEY 时可用
+      OPENAI_API_BASE_URL: xxx
+      # API模型，可选，设置 OPENAI_API_KEY 时可用
+      OPENAI_API_MODEL: xxx
      # 反向代理，可选
      API_REVERSE_PROXY: xxx
+      # 访问权限密钥，可选
+      AUTH_SECRET_KEY: xxx
      # 超时，单位毫秒，可选
      TIMEOUT_MS: 60000
+      # Socks代理，可选，和 SOCKS_PROXY_PORT 一起时生效
+      SOCKS_PROXY_HOST: xxx
+      # Socks代理端口，可选，和 SOCKS_PROXY_HOST 一起时生效
+      SOCKS_PROXY_PORT: xxx
+      # HTTPS 代理，可选，支持 http，https，socks5
+      HTTPS_PROXY: http://xxx:7890
 ```
-
+- `OPENAI_API_BASE_URL`  可选，设置 `OPENAI_API_KEY` 时可用
+- `OPENAI_API_MODEL`  可选，设置 `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`
+| `AUTH_SECRET_KEY`          | 可选                   | 访问权限密钥                                        |
+| `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`接口地址  |
+| `OPENAI_API_MODEL`   | 可选，`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代理端口    |
+| `HTTPS_PROXY`   | 可选 | HTTPS 代理，支持 http，https, socks5    |
+| `ALL_PROXY`   | 可选 | 所有代理 代理，支持 http，https, socks5    |

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

@@ -224,7 +279,7 @@ PS: 不进行打包，直接在服务器上运行 `pnpm start` 也可

 #### 前端网页

-1、修改根目录下 `.env` 内 `VITE_APP_API_BASE_URL` 为你的实际后端接口地址
+1、修改根目录下 `.env` 文件中的 `VITE_GLOB_API_URL` 为你的实际后端接口地址

 2、根目录下运行以下命令，然后将 `dist` 文件夹内的文件复制到你网站服务的根目录下

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

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

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

 贡献之前请先阅读 [贡献指南](./CONTRIBUTING.md)
@@ -257,5 +316,20 @@ A: `vscode` 请安装项目推荐插件，或手动安装 `Eslint` 插件。
  <img src="https://contrib.rocks/image?repo=Chanzhaoyu/chatgpt-web" />
 </a>

+## 赞助
+
+如果你觉得这个项目对你有帮助，并且情况允许的话，可以给我一点点支持，总之非常感谢支持～
+
+<div style="display: flex; gap: 20px;">
+	<div style="text-align: center">
+		<img style="max-width: 100%" src="./docs/wechat.png" alt="微信" />
+		<p>WeChat Pay</p>
+	</div>
+	<div style="text-align: center">
+		<img style="max-width: 100%" src="./docs/alipay.png" alt="支付宝" />
+		<p>Alipay</p>
+	</div>
+</div>
+
 ## License
 MIT © [ChenZhaoYu](./license)
--- a/config/proxy.ts
+++ b/config/proxy.ts
@@ -6,9 +6,9 @@ export function createViteProxy(isOpenProxy: boolean, viteEnv: ImportMetaEnv) {

  const proxy: Record<string, string | ProxyOptions> = {
    '/api': {
-      target: viteEnv.VITE_GLOB_API_URL,
+      target: viteEnv.VITE_APP_API_BASE_URL,
      changeOrigin: true,
-      rewrite: path => path.replace(/^\/api/, ''),
+      rewrite: path => path.replace('/api/', '/'),
    },
  }

--- a/docker-compose/docker-compose.yml
+++ b/docker-compose/docker-compose.yml
@@ -0,0 +1,39 @@
+version: '3'
+
+services:
+  app:
+    image: chenzhaoyu94/chatgpt-web # 总是使用latest,更新时重新pull该tag镜像即可
+    ports:
+      - 3002:3002
+    environment:
+      # 二选一
+      OPENAI_API_KEY: sk-xxx
+      # 二选一
+      OPENAI_ACCESS_TOKEN: xxx
+      # API接口地址，可选，设置 OPENAI_API_KEY 时可用
+      OPENAI_API_BASE_URL: xxx
+      # API模型，可选，设置 OPENAI_API_KEY 时可用
+      OPENAI_API_MODEL: xxx
+      # 反向代理，可选
+      API_REVERSE_PROXY: xxx
+      # 访问权限密钥，可选
+      AUTH_SECRET_KEY: xxx
+      # 超时，单位毫秒，可选
+      TIMEOUT_MS: 60000
+      # Socks代理，可选，和 SOCKS_PROXY_PORT 一起时生效
+      SOCKS_PROXY_HOST: xxx
+      # Socks代理端口，可选，和 SOCKS_PROXY_HOST 一起时生效
+      SOCKS_PROXY_PORT: xxx
+      # HTTPS_PROXY 代理，可选
+      HTTPS_PROXY: http://xxx:7890
+  nginx:
+    image: nginx:alpine
+    ports:
+      - '80:80'
+    expose:
+      - '80'
+    volumes:
+      - ./nginx/html:/usr/share/nginx/html
+      - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf
+    links:
+      - app
--- 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;
+   		try_files $uri /index.html;
+	}
+
+	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,14 @@
+### docker-compose 部署教程
+- 将打包好的前端文件放到 `nginx/html` 目录下
+- ```shell
+  # 启动
+  docker-compose up -d
+  ```
+- ```shell
+  # 查看运行状态
+  docker ps
+  ```
+- ```shell
+  # 结束运行
+  docker-compose down
+  ```
--- a/docs/alipay.png
+++ b/docs/alipay.png
--- a/docs/c1-2.8.0.png
+++ b/docs/c1-2.8.0.png
--- a/docs/c1-2.9.0.png
+++ b/docs/c1-2.9.0.png
--- a/docs/c1.png
+++ b/docs/c1.png
--- a/docs/c2-2.8.0.png
+++ b/docs/c2-2.8.0.png
--- a/docs/c2-2.9.0.png
+++ b/docs/c2-2.9.0.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/docs/wechat.png
+++ b/docs/wechat.png
--- a/index.html
+++ b/index.html
@@ -1,15 +1,16 @@
 <!DOCTYPE html>
 <html lang="zh-cmn-Hans">
-
 <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>
 </head>

-<body>
+<body class="dark:bg-black">
 	<div id="app">
 		<style>
 			.loading-wrap {
@@ -61,6 +62,12 @@
 					transform: translateX(100%);
 				}
 			}
+
+			@media (prefers-color-scheme: dark) {
+				body {
+					background: #121212;
+				}
+			}
 		</style>
 		<div class="loading-wrap">
 			<div class="balls">
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "chatgpt-web",
-  "version": "2.7.1",
+  "version": "2.10.6",
  "private": false,
  "description": "ChatGPT Web",
  "author": "ChenZhaoYu <chenzhaoyu1994@gmail.com>",
@@ -23,38 +23,43 @@
    "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",
+    "html2canvas": "^1.4.1",
+    "katex": "^0.16.4",
+    "markdown-it": "^13.0.1",
    "naive-ui": "^2.34.3",
-    "pinia": "^2.0.30",
+    "pinia": "^2.0.33",
    "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.2.0",
+    "vite-plugin-pwa": "^0.14.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/public/pwa-192x192.png
+++ b/public/pwa-192x192.png
--- a/public/pwa-512x512.png
+++ b/public/pwa-512x512.png
--- a/service/.env
+++ b/service/.env
@@ -1,11 +0,0 @@
-# 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=
-
-# Reverse Proxy
-API_REVERSE_PROXY=
-
-# timeout
-TIMEOUT_MS=60000
--- a/service/.env.example
+++ b/service/.env.example
@@ -0,0 +1,29 @@
+# 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=
+
+# OpenAI API Base URL - https://api.openai.com
+OPENAI_API_BASE_URL=
+
+# OpenAI API Model - https://platform.openai.com/docs/models
+OPENAI_API_MODEL=
+
+# Reverse Proxy
+API_REVERSE_PROXY=
+
+# timeout
+TIMEOUT_MS=100000
+
+# Secret key
+AUTH_SECRET_KEY=
+
+# Socks Proxy Host
+SOCKS_PROXY_HOST=
+
+# Socks Proxy Port
+SOCKS_PROXY_PORT=
+
+# HTTPS PROXY
+HTTPS_PROXY=
--- a/service/package.json
+++ b/service/package.json
@@ -11,7 +11,7 @@
    "express"
  ],
  "engines": {
-    "node": "^16 || ^18"
+    "node": "^16 || ^18 || ^19"
  },
  "scripts": {
    "start": "esno ./src/index.ts",
@@ -24,18 +24,22 @@
    "common:cleanup": "rimraf node_modules && rimraf pnpm-lock.yaml"
  },
  "dependencies": {
-    "chatgpt": "^4.7.2",
+    "axios": "^1.3.4",
+    "chatgpt": "^5.1.1",
    "dotenv": "^16.0.3",
    "esno": "^0.16.3",
    "express": "^4.18.2",
-    "isomorphic-fetch": "^3.0.0"
+    "https-proxy-agent": "^5.0.1",
+    "isomorphic-fetch": "^3.0.0",
+    "node-fetch": "^3.3.0",
+    "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.ts
+++ b/service/src/chatgpt.ts
@@ -1,110 +0,0 @@
-import * as dotenv from 'dotenv'
-import 'isomorphic-fetch'
-import type { ChatGPTAPI, ChatMessage, SendMessageOptions } from 'chatgpt'
-import { ChatGPTUnofficialProxyAPI } from 'chatgpt'
-import { sendResponse } from './utils'
-
-dotenv.config()
-
-let apiModel: 'ChatGPTAPI' | 'ChatGPTUnofficialProxyAPI' | undefined
-
-interface ChatContext {
-  conversationId?: string
-  parentMessageId?: string
-}
-
-const timeoutMs: number = !isNaN(+process.env.TIMEOUT_MS) ? +process.env.TIMEOUT_MS : 30 * 1000
-
-if (!process.env.OPENAI_API_KEY && !process.env.OPENAI_ACCESS_TOKEN)
-  throw new Error('Missing OPENAI_API_KEY or OPENAI_ACCESS_TOKEN environment variable')
-
-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
-  const { ChatGPTAPI } = await import('chatgpt')
-
-  if (process.env.OPENAI_API_KEY) {
-    api = new ChatGPTAPI({ apiKey: process.env.OPENAI_API_KEY })
-    apiModel = 'ChatGPTAPI'
-  }
-  else {
-    let options = {}
-
-    if (process.env.API_REVERSE_PROXY)
-      options = { apiReverseProxyUrl: process.env.API_REVERSE_PROXY }
-
-    api = new ChatGPTUnofficialProxyAPI({
-      accessToken: process.env.OPENAI_ACCESS_TOKEN,
-      ...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 },
-  process?: (chat: ChatMessage) => void,
-) {
-  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,
-      onProgress: (partialResponse) => {
-        process?.(partialResponse)
-      },
-    })
-
-    return sendResponse({ type: 'Success', data: response })
-  }
-  catch (error: any) {
-    return sendResponse({ type: 'Fail', message: error.message })
-  }
-}
-
-async function chatConfig() {
-  return sendResponse({
-    type: 'Success',
-    data: {
-      apiModel,
-      reverseProxy: process.env.API_REVERSE_PROXY,
-      timeoutMs,
-    },
-  })
-}
-
-export type { ChatContext, ChatMessage }
-
-export { chatReply, chatReplyProcess, chatConfig }
--- a/service/src/chatgpt/index.ts
+++ b/service/src/chatgpt/index.ts
@@ -0,0 +1,164 @@
+import * as dotenv from 'dotenv'
+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 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'
+
+const ErrorCodeMessage: Record<string, string> = {
+  401: '[OpenAI] 提供错误的API密钥 | Incorrect API key provided',
+  403: '[OpenAI] 服务器拒绝访问，请稍后再试 | Server refused to access, please try again later',
+  502: '[OpenAI] 错误的网关 |  Bad Gateway',
+  503: '[OpenAI] 服务器繁忙，请稍后再试 | Server is busy, please try again later',
+  504: '[OpenAI] 网关超时 | Gateway Time-out',
+  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)
+  throw new Error('Missing OPENAI_API_KEY or OPENAI_ACCESS_TOKEN environment variable')
+
+let api: ChatGPTAPI | ChatGPTUnofficialProxyAPI
+
+(async () => {
+  // More Info: https://github.com/transitive-bullshit/chatgpt-api
+
+  if (process.env.OPENAI_API_KEY) {
+    const OPENAI_API_MODEL = process.env.OPENAI_API_MODEL
+    const model = isNotEmptyString(OPENAI_API_MODEL) ? OPENAI_API_MODEL : 'gpt-3.5-turbo'
+
+    const options: ChatGPTAPIOptions = {
+      apiKey: process.env.OPENAI_API_KEY,
+      completionParams: { model },
+      debug: true,
+    }
+
+    if (isNotEmptyString(process.env.OPENAI_API_BASE_URL))
+      options.apiBaseUrl = process.env.OPENAI_API_BASE_URL
+
+    setupProxy(options)
+
+    api = new ChatGPTAPI({ ...options })
+    apiModel = 'ChatGPTAPI'
+  }
+  else {
+    const options: ChatGPTUnofficialProxyAPIOptions = {
+      accessToken: process.env.OPENAI_ACCESS_TOKEN,
+      debug: true,
+    }
+
+    if (isNotEmptyString(process.env.API_REVERSE_PROXY))
+      options.apiReverseProxyUrl = process.env.API_REVERSE_PROXY
+
+    setupProxy(options)
+
+    api = new ChatGPTUnofficialProxyAPI({ ...options })
+    apiModel = 'ChatGPTUnofficialProxyAPI'
+  }
+})()
+
+async function chatReplyProcess(
+  message: string,
+  lastContext?: { conversationId?: string; parentMessageId?: string },
+  process?: (chat: ChatMessage) => void,
+) {
+  try {
+    let options: SendMessageOptions = { timeoutMs }
+
+    if (lastContext) {
+      if (apiModel === 'ChatGPTAPI')
+        options = { parentMessageId: lastContext.parentMessageId }
+      else
+        options = { ...lastContext }
+    }
+
+    const response = await api.sendMessage(message, {
+      ...options,
+      onProgress: (partialResponse) => {
+        process?.(partialResponse)
+      },
+    })
+
+    return sendResponse({ type: 'Success', data: response })
+  }
+  catch (error: any) {
+    const code = error.statusCode
+    global.console.log(error)
+    if (Reflect.has(ErrorCodeMessage, code))
+      return sendResponse({ type: 'Fail', message: ErrorCodeMessage[code] })
+    return sendResponse({ type: 'Fail', message: error.message ?? 'Please check the back-end console' })
+  }
+}
+
+async function fetchBalance() {
+  const OPENAI_API_KEY = process.env.OPENAI_API_KEY
+  if (!isNotEmptyString(OPENAI_API_KEY))
+    return Promise.resolve('-')
+
+  try {
+    const headers = {
+      'Content-Type': 'application/json',
+      '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))
+  }
+  catch {
+    return Promise.resolve('-')
+  }
+}
+
+async function chatConfig() {
+  const balance = await fetchBalance()
+  const reverseProxy = process.env.API_REVERSE_PROXY ?? '-'
+  const httpsProxy = (process.env.HTTPS_PROXY || process.env.ALL_PROXY) ?? '-'
+  const socksProxy = (process.env.SOCKS_PROXY_HOST && process.env.SOCKS_PROXY_PORT)
+    ? (`${process.env.SOCKS_PROXY_HOST}:${process.env.SOCKS_PROXY_PORT}`)
+    : '-'
+  return sendResponse<ModelConfig>({
+    type: 'Success',
+    data: { apiModel, reverseProxy, timeoutMs, socksProxy, httpsProxy, balance },
+  })
+}
+
+function setupProxy(options: ChatGPTAPIOptions | ChatGPTUnofficialProxyAPIOptions) {
+  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 })
+    }
+  }
+  else {
+    if (process.env.HTTPS_PROXY || process.env.ALL_PROXY) {
+      const httpsProxy = process.env.HTTPS_PROXY || process.env.ALL_PROXY
+      if (httpsProxy) {
+        const agent = new HttpsProxyAgent(httpsProxy)
+        options.fetch = (url, options) => {
+          return fetch(url, { agent, ...options })
+        }
+      }
+    }
+  }
+}
+
+function currentModel(): ApiModel {
+  return apiModel
+}
+
+export type { ChatContext, ChatMessage }
+
+export { chatReplyProcess, chatConfig, currentModel }
--- a/service/src/index.ts
+++ b/service/src/index.ts
@@ -1,6 +1,8 @@
 import express from 'express'
 import type { ChatContext, ChatMessage } from './chatgpt'
-import { chatConfig, chatReply, chatReplyProcess } from './chatgpt'
+import { chatConfig, chatReplyProcess, currentModel } from './chatgpt'
+import { auth } from './middleware/auth'
+import { isNotEmptyString } from './utils/is'

 const app = express()
 const router = express.Router()
@@ -10,30 +12,20 @@ app.use(express.json())

 app.all('*', (_, res, next) => {
  res.header('Access-Control-Allow-Origin', '*')
-  res.header('Access-Control-Allow-Headers', 'Content-Type')
+  res.header('Access-Control-Allow-Headers', 'authorization, Content-Type')
  res.header('Access-Control-Allow-Methods', '*')
  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) => {
+router.post('/chat-process', auth, async (req, res) => {
  res.setHeader('Content-type', 'application/octet-stream')

  try {
    const { prompt, options = {} } = req.body as { prompt: string; options?: ChatContext }
+    let firstChunk = true
    await chatReplyProcess(prompt, options, (chat: ChatMessage) => {
-      res.write(JSON.stringify(chat))
+      res.write(firstChunk ? JSON.stringify(chat) : `\n${JSON.stringify(chat)}`)
+      firstChunk = false
    })
  }
  catch (error) {
@@ -54,6 +46,33 @@ router.post('/config', async (req, res) => {
  }
 })

+router.post('/session', async (req, res) => {
+  try {
+    const AUTH_SECRET_KEY = process.env.AUTH_SECRET_KEY
+    const hasAuth = isNotEmptyString(AUTH_SECRET_KEY)
+    res.send({ status: 'Success', message: '', data: { auth: hasAuth, model: currentModel() } })
+  }
+  catch (error) {
+    res.send({ status: 'Fail', message: error.message, data: null })
+  }
+})
+
+router.post('/verify', async (req, res) => {
+  try {
+    const { token } = req.body as { token: string }
+    if (!token)
+      throw new Error('Secret key is empty')
+
+    if (process.env.AUTH_SECRET_KEY !== token)
+      throw new Error('密钥无效 | Secret key is invalid')
+
+    res.send({ status: 'Success', message: 'Verify successfully', data: null })
+  }
+  catch (error) {
+    res.send({ status: 'Fail', message: error.message, data: null })
+  }
+})
+
 app.use('', router)
 app.use('/api', router)

--- a/service/src/middleware/auth.ts
+++ b/service/src/middleware/auth.ts
@@ -0,0 +1,21 @@
+import { isNotEmptyString } from '../utils/is'
+
+const auth = async (req, res, next) => {
+  const AUTH_SECRET_KEY = process.env.AUTH_SECRET_KEY
+  if (isNotEmptyString(AUTH_SECRET_KEY)) {
+    try {
+      const Authorization = req.header('Authorization')
+      if (!Authorization || Authorization.replace('Bearer ', '').trim() !== AUTH_SECRET_KEY.trim())
+        throw new Error('Error: 无访问权限 | No access rights')
+      next()
+    }
+    catch (error) {
+      res.send({ status: 'Unauthorized', message: error.message ?? 'Please authenticate.', data: null })
+    }
+  }
+  else {
+    next()
+  }
+}
+
+export { auth }
--- a/service/src/types.ts
+++ b/service/src/types.ts
@@ -0,0 +1,26 @@
+import type { FetchFn } from 'chatgpt'
+
+export interface ChatContext {
+  conversationId?: string
+  parentMessageId?: string
+}
+
+export interface ChatGPTUnofficialProxyAPIOptions {
+  accessToken: string
+  apiReverseProxyUrl?: string
+  model?: string
+  debug?: boolean
+  headers?: Record<string, string>
+  fetch?: FetchFn
+}
+
+export interface ModelConfig {
+  apiModel?: ApiModel
+  reverseProxy?: string
+  timeoutMs?: number
+  socksProxy?: string
+  httpsProxy?: string
+  balance?: string
+}
+
+export type ApiModel = 'ChatGPTAPI' | 'ChatGPTUnofficialProxyAPI' | undefined
--- a/service/src/utils/index.ts
+++ b/service/src/utils/index.ts
@@ -1,10 +1,10 @@
-interface SendResponseOptions {
+interface SendResponseOptions<T = any> {
  type: 'Success' | 'Fail'
  message?: string
-  data?: any
+  data?: T
 }

-export function sendResponse(options: SendResponseOptions) {
+export function sendResponse<T>(options: SendResponseOptions<T>) {
  if (options.type === 'Success') {
    return Promise.resolve({
      message: options.message ?? null,
--- a/service/src/utils/is.ts
+++ b/service/src/utils/is.ts
@@ -0,0 +1,19 @@
+export function isNumber<T extends number>(value: T | unknown): value is number {
+  return Object.prototype.toString.call(value) === '[object Number]'
+}
+
+export function isString<T extends string>(value: T | unknown): value is string {
+  return Object.prototype.toString.call(value) === '[object String]'
+}
+
+export function isNotEmptyString(value: any): boolean {
+  return typeof value === 'string' && value.length > 0
+}
+
+export function isBoolean<T extends boolean>(value: T | unknown): value is boolean {
+  return Object.prototype.toString.call(value) === '[object Boolean]'
+}
+
+export function isFunction<T extends (...args: any[]) => any | void | never>(value: T | unknown): value is T {
+  return Object.prototype.toString.call(value) === '[object Function]'
+}
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,20 @@
 <script setup lang="ts">
 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>
-  <NConfigProvider class="h-full">
+  <NConfigProvider
+    class="h-full"
+    :theme="theme"
+    :theme-overrides="themeOverrides"
+    :locale="language"
+  >
    <NaiveProvider>
      <RouterView />
    </NaiveProvider>
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -13,7 +13,12 @@ export function fetchChatAPI<T = any>(
  })
 }

-/**  实验性质的函数，用于处理聊天过程中的中间结果 */
+export function fetchChatConfig<T = any>() {
+  return post<T>({
+    url: '/config',
+  })
+}
+
 export function fetchChatAPIProcess<T = any>(
  params: {
    prompt: string
@@ -29,8 +34,15 @@ export function fetchChatAPIProcess<T = any>(
  })
 }

-export function fetchChatConfig<T = any>() {
+export function fetchSession<T>() {
  return post<T>({
-    url: '/config',
+    url: '/session',
+  })
+}
+
+export function fetchVerify<T>(token: string) {
+  return post<T>({
+    url: '/verify',
+    data: { token },
  })
 }
--- a/src/assets/recommend.json
+++ b/src/assets/recommend.json
@@ -0,0 +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"
+  }
+]
--- a/src/components/business/index.ts
+++ b/src/components/business/index.ts
@@ -1 +0,0 @@
-export { }
--- a/src/components/common/HoverButton/Button.vue
+++ b/src/components/common/HoverButton/Button.vue
@@ -12,7 +12,7 @@ function handleClick() {

 <template>
  <button
-    class="flex items-center justify-center w-10 h-10 transition rounded-full hover:bg-neutral-100"
+    class="flex items-center justify-center w-10 h-10 transition rounded-full hover:bg-neutral-100 dark:hover:bg-[#414755]"
    @click="handleClick"
  >
    <slot />
--- a/src/components/common/PromptStore/index.vue
+++ b/src/components/common/PromptStore/index.vue
@@ -0,0 +1,483 @@
+<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 PromptRecommend from '../../../assets/recommend.json'
+import { SvgIcon } from '..'
+import { usePromptStore } from '@/store'
+import { useBasicLayout } from '@/hooks/useBasicLayout'
+import { t } from '@/locales'
+
+interface DataProps {
+  renderKey: string
+  renderValue: string
+  key: string
+  value: string
+}
+
+interface Props {
+  visible: boolean
+}
+
+interface Emit {
+  (e: 'update:visible', visible: boolean): void
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<Emit>()
+
+const message = useMessage()
+
+const show = computed({
+  get: () => props.visible,
+  set: (visible: boolean) => emit('update:visible', visible),
+})
+
+const showModal = ref(false)
+
+const importLoading = ref(false)
+const exportLoading = ref(false)
+
+const searchValue = ref<string>('')
+
+// 移动端自适应相关
+const { isMobile } = useBasicLayout()
+
+const promptStore = usePromptStore()
+
+// Prompt在线导入推荐List,根据部署者喜好进行修改(assets/recommend.json)
+const promptRecommendList = PromptRecommend
+const promptList = ref<any>(promptStore.promptList)
+
+// 用于添加修改的临时prompt参数
+const tempPromptKey = ref('')
+const tempPromptValue = ref('')
+
+// Modal模式，根据不同模式渲染不同的Modal内容
+const modalMode = ref('')
+
+// 这个是为了后期的修改Prompt内容考虑，因为要针对无uuid的list进行修改，且考虑到不能出现标题和内容的冲突，所以就需要一个临时item来记录一下
+const tempModifiedItem = ref<any>({})
+
+// 添加修改导入都使用一个Modal, 临时修改内容占用tempPromptKey,切换状态前先将内容都清楚
+const changeShowModal = (mode: 'add' | 'modify' | 'local_import', selected = { key: '', value: '' }) => {
+  if (mode === 'add') {
+    tempPromptKey.value = ''
+    tempPromptValue.value = ''
+  }
+  else if (mode === 'modify') {
+    tempModifiedItem.value = { ...selected }
+    tempPromptKey.value = selected.key
+    tempPromptValue.value = selected.value
+  }
+  else if (mode === 'local_import') {
+    tempPromptKey.value = 'local_import'
+    tempPromptValue.value = ''
+  }
+  showModal.value = !showModal.value
+  modalMode.value = mode
+}
+
+// 在线导入相关
+const downloadURL = ref('')
+const downloadDisabled = computed(() => downloadURL.value.trim().length < 1)
+const setDownloadURL = (url: string) => {
+  downloadURL.value = url
+}
+
+// 控制 input 按钮
+const inputStatus = computed (() => tempPromptKey.value.trim().length < 1 || tempPromptValue.value.trim().length < 1)
+
+// Prompt模板相关操作
+const addPromptTemplate = () => {
+  for (const i of promptList.value) {
+    if (i.key === tempPromptKey.value) {
+      message.error(t('store.addRepeatTitleTips'))
+      return
+    }
+    if (i.value === tempPromptValue.value) {
+      message.error(t('store.addRepeatContentTips', { msg: tempPromptKey.value }))
+      return
+    }
+  }
+  promptList.value.unshift({ key: tempPromptKey.value, value: tempPromptValue.value } as never)
+  message.success(t('common.addSuccess'))
+  changeShowModal('add')
+}
+
+const modifyPromptTemplate = () => {
+  let index = 0
+
+  // 通过临时索引把待修改项摘出来
+  for (const i of promptList.value) {
+    if (i.key === tempModifiedItem.value.key && i.value === tempModifiedItem.value.value)
+      break
+    index = index + 1
+  }
+
+  const tempList = promptList.value.filter((_: any, i: number) => i !== index)
+
+  // 搜索有冲突的部分
+  for (const i of tempList) {
+    if (i.key === tempPromptKey.value) {
+      message.error(t('store.editRepeatTitleTips'))
+      return
+    }
+    if (i.value === tempPromptValue.value) {
+      message.error(t('store.editRepeatContentTips', { msg: i.key }))
+      return
+    }
+  }
+
+  promptList.value = [{ key: tempPromptKey.value, value: tempPromptValue.value }, ...tempList] as never
+  message.success(t('common.editSuccess'))
+  changeShowModal('modify')
+}
+
+const deletePromptTemplate = (row: { key: string; value: string }) => {
+  promptList.value = [
+    ...promptList.value.filter((item: { key: string; value: string }) => item.key !== row.key),
+  ] as never
+  message.success(t('common.deleteSuccess'))
+}
+
+const clearPromptTemplate = () => {
+  promptList.value = []
+  message.success(t('common.clearSuccess'))
+}
+
+const importPromptTemplate = () => {
+  try {
+    const jsonData = JSON.parse(tempPromptValue.value)
+    let key = ''
+    let value = ''
+    // 可以扩展加入更多模板字典的key
+    if ('key' in jsonData[0]) {
+      key = 'key'
+      value = 'value'
+    }
+    else if ('act' in jsonData[0]) {
+      key = 'act'
+      value = 'prompt'
+    }
+    else {
+      // 不支持的字典的key防止导入 以免破坏prompt商店打开
+      message.warning('prompt key not supported.')
+      throw new Error('prompt key not supported.')
+    }
+
+    for (const i of jsonData) {
+      if (!('key' in i) || !('value' in i))
+        throw new Error(t('store.importError'))
+      let safe = true
+      for (const j of promptList.value) {
+        if (j.key === i[key]) {
+          message.warning(t('store.importRepeatTitle', { msg: i[key] }))
+          safe = false
+          break
+        }
+        if (j.value === i[value]) {
+          message.warning(t('store.importRepeatContent', { msg: i[key] }))
+          safe = false
+          break
+        }
+      }
+      if (safe)
+        promptList.value.unshift({ key: i[key], value: i[value] } as never)
+    }
+    message.success(t('common.importSuccess'))
+  }
+  catch {
+    message.error('JSON 格式错误，请检查 JSON 格式')
+  }
+}
+
+// 模板导出
+const exportPromptTemplate = () => {
+  exportLoading.value = true
+  const jsonDataStr = JSON.stringify(promptList.value)
+  const blob = new Blob([jsonDataStr], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = 'ChatGPTPromptTemplate.json'
+  link.click()
+  URL.revokeObjectURL(url)
+  exportLoading.value = false
+}
+
+// 模板在线导入
+const downloadPromptTemplate = async () => {
+  try {
+    importLoading.value = true
+    const response = await fetch(downloadURL.value)
+    const jsonData = await response.json()
+    if ('key' in jsonData[0] && 'value' in jsonData[0])
+      tempPromptValue.value = JSON.stringify(jsonData)
+    if ('act' in jsonData[0] && 'prompt' in jsonData[0]) {
+      const newJsonData = jsonData.map((item: { act: string; prompt: string }) => {
+        return {
+          key: item.act,
+          value: item.prompt,
+        }
+      })
+      tempPromptValue.value = JSON.stringify(newJsonData)
+    }
+    importPromptTemplate()
+    downloadURL.value = ''
+  }
+  catch {
+    message.error(t('store.downloadError'))
+    downloadURL.value = ''
+  }
+  finally {
+    importLoading.value = false
+  }
+}
+
+// 移动端自适应相关
+const renderTemplate = () => {
+  const [keyLimit, valueLimit] = isMobile.value ? [10, 30] : [15, 50]
+
+  return promptList.value.map((item: { key: string; value: string }) => {
+    return {
+      renderKey: item.key.length <= keyLimit ? item.key : `${item.key.substring(0, keyLimit)}...`,
+      renderValue: item.value.length <= valueLimit ? item.value : `${item.value.substring(0, valueLimit)}...`,
+      key: item.key,
+      value: item.value,
+    }
+  })
+}
+
+const pagination = computed(() => {
+  const [pageSize, pageSlot] = isMobile.value ? [6, 5] : [7, 15]
+  return {
+    pageSize, pageSlot,
+  }
+})
+
+// table相关
+const createColumns = (): DataTableColumns<DataProps> => {
+  return [
+    {
+      title: t('store.title'),
+      key: 'renderKey',
+    },
+    {
+      title: t('store.description'),
+      key: 'renderValue',
+    },
+    {
+      title: t('common.action'),
+      key: 'actions',
+      width: 100,
+      align: 'center',
+      render(row) {
+        return h('div', { class: 'flex items-center flex-col gap-2' }, {
+          default: () => [h(
+            NButton,
+            {
+              tertiary: true,
+              size: 'small',
+              type: 'info',
+              onClick: () => changeShowModal('modify', row),
+            },
+            { default: () => t('common.edit') },
+          ),
+          h(
+            NButton,
+            {
+              tertiary: true,
+              size: 'small',
+              type: 'error',
+              onClick: () => deletePromptTemplate(row),
+            },
+            { default: () => t('common.delete') },
+          ),
+          ],
+        })
+      },
+    },
+  ]
+}
+
+const columns = createColumns()
+
+watch(
+  () => promptList,
+  () => {
+    promptStore.updatePromptList(promptList.value)
+  },
+  { deep: true },
+)
+
+const dataSource = computed(() => {
+  const data = renderTemplate()
+  const value = searchValue.value
+  if (value && value !== '') {
+    return data.filter((item: DataProps) => {
+      return item.renderKey.includes(value) || item.renderValue.includes(value)
+    })
+  }
+  return data
+})
+</script>
+
+<template>
+  <NModal v-model:show="show" style="width: 90%; max-width: 900px;" preset="card">
+    <div class="space-y-4">
+      <NTabs type="segment">
+        <NTabPane name="local" :tab="$t('store.local')">
+          <div
+            class="flex gap-3 mb-4"
+            :class="[isMobile ? 'flex-col' : 'flex-row justify-between']"
+          >
+            <div class="flex items-center space-x-4">
+              <NButton
+                type="primary"
+                size="small"
+                @click="changeShowModal('add')"
+              >
+                {{ $t('common.add') }}
+              </NButton>
+              <NButton
+                size="small"
+                @click="changeShowModal('local_import')"
+              >
+                {{ $t('common.import') }}
+              </NButton>
+              <NButton
+                size="small"
+                :loading="exportLoading"
+                @click="exportPromptTemplate()"
+              >
+                {{ $t('common.export') }}
+              </NButton>
+              <NPopconfirm @positive-click="clearPromptTemplate">
+                <template #trigger>
+                  <NButton size="small">
+                    {{ $t('common.clear') }}
+                  </NButton>
+                </template>
+                {{ $t('store.clearStoreConfirm') }}
+              </NPopconfirm>
+            </div>
+            <div class="flex items-center">
+              <NInput v-model:value="searchValue" style="width: 100%" />
+            </div>
+          </div>
+          <NDataTable
+            v-if="!isMobile"
+            :max-height="400"
+            :columns="columns"
+            :data="dataSource"
+            :pagination="pagination"
+            :bordered="false"
+          />
+          <NList v-if="isMobile" style="max-height: 400px; overflow-y: auto;">
+            <NListItem v-for="(item, index) of dataSource" :key="index">
+              <NThing :title="item.renderKey" :description="item.renderValue" />
+              <template #suffix>
+                <div class="flex flex-col items-center gap-2">
+                  <NButton tertiary size="small" type="info" @click="changeShowModal('modify', item)">
+                    {{ t('common.edit') }}
+                  </NButton>
+                  <NButton tertiary size="small" type="error" @click="deletePromptTemplate(item)">
+                    {{ t('common.delete') }}
+                  </NButton>
+                </div>
+              </template>
+            </NListItem>
+          </NList>
+        </NTabPane>
+        <NTabPane name="download" :tab="$t('store.online')">
+          <p class="mb-4">
+            {{ $t('store.onlineImportWarning') }}
+          </p>
+          <div class="flex items-center gap-4">
+            <NInput v-model:value="downloadURL" placeholder="" />
+            <NButton
+              strong
+              secondary
+              :disabled="downloadDisabled"
+              :loading="importLoading"
+              @click="downloadPromptTemplate()"
+            >
+              {{ $t('common.download') }}
+            </NButton>
+          </div>
+          <NDivider />
+          <NLayoutContent
+            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"
+            >
+              <p
+                class="overflow-hidden text-ellipsis whitespace-nowrap"
+                :title="info.desc"
+              >
+                {{ info.desc }}
+              </p>
+              <template #footer>
+                <div class="flex items-center justify-end space-x-4">
+                  <NButton text>
+                    <a
+                      :href="info.url"
+                      target="_blank"
+                    >
+                      <SvgIcon class="text-xl" icon="ri:link" />
+                    </a>
+                  </NButton>
+                  <NButton text @click="setDownloadURL(info.downloadUrl) ">
+                    <SvgIcon class="text-xl" icon="ri:add-fill" />
+                  </NButton>
+                </div>
+              </template>
+            </NCard>
+          </NLayoutContent>
+        </NTabPane>
+      </NTabs>
+    </div>
+  </NModal>
+
+  <NModal v-model:show="showModal" style="width: 90%; max-width: 600px;" preset="card">
+    <NSpace v-if="modalMode === 'add' || modalMode === 'modify'" vertical>
+      {{ t('store.title') }}
+      <NInput v-model:value="tempPromptKey" />
+      {{ t('store.description') }}
+      <NInput v-model:value="tempPromptValue" type="textarea" />
+      <NButton
+        block
+        type="primary"
+        :disabled="inputStatus"
+        @click="() => { modalMode === 'add' ? addPromptTemplate() : modifyPromptTemplate() }"
+      >
+        {{ t('common.confirm') }}
+      </NButton>
+    </NSpace>
+    <NSpace v-if="modalMode === 'local_import'" vertical>
+      <NInput
+        v-model:value="tempPromptValue"
+        :placeholder="t('store.importPlaceholder')"
+        :autosize="{ minRows: 3, maxRows: 15 }"
+        type="textarea"
+      />
+      <NButton
+        block
+        type="primary"
+        :disabled="inputStatus"
+        @click="() => { importPromptTemplate() }"
+      >
+        {{ t('common.import') }}
+      </NButton>
+    </NSpace>
+  </NModal>
+</template>
--- a/src/components/common/Setting/About.vue
+++ b/src/components/common/Setting/About.vue
@@ -0,0 +1,75 @@
+<script setup lang='ts'>
+import { computed, onMounted, ref } from 'vue'
+import { NSpin } from 'naive-ui'
+import { fetchChatConfig } from '@/api'
+import pkg from '@/../package.json'
+import { useAuthStore } from '@/store'
+
+interface ConfigState {
+  timeoutMs?: number
+  reverseProxy?: string
+  apiModel?: string
+  socksProxy?: string
+  httpsProxy?: string
+  balance?: string
+}
+
+const authStore = useAuthStore()
+
+const loading = ref(false)
+
+const config = ref<ConfigState>()
+
+const isChatGPTAPI = computed<boolean>(() => !!authStore.isChatGPTAPI)
+
+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 v-if="isChatGPTAPI">
+        {{ $t("setting.balance") }}：{{ config?.balance ?? '-' }}
+      </p>
+      <p v-if="!isChatGPTAPI">
+        {{ $t("setting.reverseProxy") }}：{{ config?.reverseProxy ?? '-' }}
+      </p>
+      <p>{{ $t("setting.timeout") }}：{{ config?.timeoutMs ?? '-' }}</p>
+      <p>{{ $t("setting.socks") }}：{{ config?.socksProxy ?? '-' }}</p>
+      <p>{{ $t("setting.httpsProxy") }}：{{ config?.httpsProxy ?? '-' }}</p>
+    </div>
+  </NSpin>
+</template>
--- a/src/components/common/Setting/General.vue
+++ b/src/components/common/Setting/General.vue
@@ -0,0 +1,224 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { NButton, NInput, NPopconfirm, NSelect, 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 { getCurrentDate } from '@/utils/functions'
+import { useBasicLayout } from '@/hooks/useBasicLayout'
+import { t } from '@/locales'
+
+const appStore = useAppStore()
+const userStore = useUserStore()
+
+const { isMobile } = useBasicLayout()
+
+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: '繁體中文', key: 'zh-TW', value: 'zh-TW' },
+  { 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'))
+  window.location.reload()
+}
+
+function exportData(): void {
+  const date = getCurrentDate()
+  const data: string = localStorage.getItem('chatStorage') || '{}'
+  const jsonString: string = JSON.stringify(JSON.parse(data), null, 2)
+  const blob: Blob = new Blob([jsonString], { type: 'application/json' })
+  const url: string = URL.createObjectURL(blob)
+  const link: HTMLAnchorElement = document.createElement('a')
+  link.href = url
+  link.download = `chat-store_${date}.json`
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+
+function importData(event: Event): void {
+  const target = event.target as HTMLInputElement
+  if (!target || !target.files)
+    return
+
+  const file: File = target.files[0]
+  if (!file)
+    return
+
+  const reader: FileReader = new FileReader()
+  reader.onload = () => {
+    try {
+      const data = JSON.parse(reader.result as string)
+      localStorage.setItem('chatStorage', JSON.stringify(data))
+      ms.success(t('common.success'))
+      location.reload()
+    }
+    catch (error) {
+      ms.error(t('common.invalidFileFormat'))
+    }
+  }
+  reader.readAsText(file)
+}
+
+function clearData(): void {
+  localStorage.removeItem('chatStorage')
+  location.reload()
+}
+
+function handleImportButtonClick(): void {
+  const fileInput = document.getElementById('fileInput') as HTMLElement
+  if (fileInput)
+    fileInput.click()
+}
+</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"
+        :class="isMobile && 'items-start'"
+      >
+        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.chatHistory') }}</span>
+
+        <div class="flex flex-wrap items-center gap-4">
+          <NButton size="small" @click="exportData">
+            <template #icon>
+              <SvgIcon icon="ri:download-2-fill" />
+            </template>
+            {{ $t('common.export') }}
+          </NButton>
+
+          <input id="fileInput" type="file" style="display:none" @change="importData">
+          <NButton size="small" @click="handleImportButtonClick">
+            <template #icon>
+              <SvgIcon icon="ri:upload-2-fill" />
+            </template>
+            {{ $t('common.import') }}
+          </NButton>
+
+          <NPopconfirm placement="bottom" @positive-click="clearData">
+            <template #trigger>
+              <NButton size="small">
+                <template #icon>
+                  <SvgIcon icon="ri:close-circle-line" />
+                </template>
+                {{ $t('common.clear') }}
+              </NButton>
+            </template>
+            {{ $t('chat.clearHistoryConfirm') }}
+          </NPopconfirm>
+        </div>
+      </div>
+      <div class="flex items-center space-x-4">
+        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.theme') }}</span>
+        <div class="flex flex-wrap items-center gap-4">
+          <template v-for="item of themeOptions" :key="item.key">
+            <NButton
+              size="small"
+              :type="item.key === theme ? 'primary' : undefined"
+              @click="appStore.setTheme(item.key)"
+            >
+              <template #icon>
+                <SvgIcon :icon="item.icon" />
+              </template>
+            </NButton>
+          </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 flex-wrap items-center gap-4">
+          <NSelect
+            style="width: 140px"
+            :value="language"
+            :options="languageOptions"
+            @update-value="value => appStore.setLanguage(value)"
+          />
+        </div>
+      </div>
+      <div class="flex items-center space-x-4">
+        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.resetUserInfo') }}</span>
+        <NButton size="small" @click="handleReset">
+          {{ $t('common.reset') }}
+        </NButton>
+      </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 { 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,15 +17,7 @@ interface Emit {
  (e: 'update:visible', visible: boolean): void
 }

-interface ConfigState {
-  timeoutMs?: number
-  reverseProxy?: string
-  apiModel?: string
-}
-
-const props = defineProps<Props>()
-
-const emit = defineEmits<Emit>()
+const active = ref('General')

 const show = computed({
  get() {
@@ -30,46 +27,29 @@ const show = computed({
    emit('update:visible', visible)
  },
 })
-
-const config = ref<ConfigState>()
-
-async function fetchConfig() {
-  try {
-    const { data } = await fetchChatConfig<ConfigState>()
-    config.value = data
-  }
-  catch (error) {
-    // ...
-  }
-}
-
-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>
-          ，免费并且协议为 MIT，其他来源均为盗版，使用时请注意。如果你觉得此项目对你有帮助，请帮我点个 Star，谢谢！
-        </p>
-        <hr>
-        <p>API方式：{{ config?.apiModel ?? '-' }}</p>
-        <p>反向代理：{{ config?.reverseProxy ?? '-' }}</p>
-        <p>超时时间：{{ config?.timeoutMs ?? '-' }}</p>
-      </div>
-    </NCard>
+  <NModal v-model:show="show" :auto-focus="false" preset="card" style="width: 95%; max-width: 640px">
+    <div>
+      <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 />
+          </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>
+    </div>
  </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">
+  <div class="flex items-center overflow-hidden">
+    <div class="w-10 h-10 overflow-hidden rounded-full shrink-0">
+      <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
+    <div class="flex-1 min-w-0 ml-2">
+      <h2 class="overflow-hidden font-bold text-md text-ellipsis whitespace-nowrap">
+        {{ userInfo.name ?? 'ChenZhaoYu' }}
      </h2>
-      <p class="text-xs text-gray-500">
-        <GithubSite />
+      <p class="overflow-hidden text-xs text-gray-500 text-ellipsis whitespace-nowrap">
+        <span
+          v-if="isString(userInfo.description) && userInfo.description !== ''"
+          v-html="userInfo.description"
+        />
      </p>
    </div>
  </div>
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -3,5 +3,6 @@ import NaiveProvider from './NaiveProvider/index.vue'
 import SvgIcon from './SvgIcon/index.vue'
 import UserAvatar from './UserAvatar/index.vue'
 import Setting from './Setting/index.vue'
+import PromptStore from './PromptStore/index.vue'

-export { HoverButton, NaiveProvider, SvgIcon, UserAvatar, Setting }
+export { HoverButton, NaiveProvider, SvgIcon, UserAvatar, Setting, PromptStore }
--- a/src/components/custom/GithubSite.vue
+++ b/src/components/custom/GithubSite.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="text-center text-neutral-500">
-    <span>❤️ Star on</span>
+  <div class="text-neutral-400">
+    <span>Star on</span>
    <a href="https://github.com/Chanzhaoyu/chatgpt-bot" target="_blank" class="text-blue-500">
      GitHub
    </a>
--- 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/functions/includeCode'
-
-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,27 @@
+import { computed } from 'vue'
+import { enUS, zhCN, zhTW } 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
+      case 'zh-TW':
+        setLocale('zh-TW')
+        return zhTW
+      default:
+        setLocale('zh-CN')
+        return enUS
+    }
+  })
+
+  return { language }
+}
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -0,0 +1,43 @@
+import type { GlobalThemeOverrides } from 'naive-ui'
+import { computed, watch } from 'vue'
+import { darkTheme, useOsTheme } from 'naive-ui'
+import { useAppStore } from '@/store'
+
+export function useTheme() {
+  const appStore = useAppStore()
+
+  const OsTheme = useOsTheme()
+
+  const isDark = computed(() => {
+    if (appStore.theme === 'auto')
+      return OsTheme.value === 'dark'
+    else
+      return appStore.theme === 'dark'
+  })
+
+  const theme = computed(() => {
+    return isDark.value ? darkTheme : undefined
+  })
+
+  const themeOverrides = computed<GlobalThemeOverrides>(() => {
+    if (isDark.value) {
+      return {
+        common: {},
+      }
+    }
+    return {}
+  })
+
+  watch(
+    () => isDark.value,
+    (dark) => {
+      if (dark)
+        document.documentElement.classList.add('dark')
+      else
+        document.documentElement.classList.remove('dark')
+    },
+    { immediate: true },
+  )
+
+  return { theme, themeOverrides }
+}
--- a/src/icons/403.vue
+++ b/src/icons/403.vue
--- a/src/icons/404.svg
+++ b/src/icons/404.svg
--- a/src/icons/500.vue
+++ b/src/icons/500.vue
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@@ -0,0 +1,85 @@
+export default {
+  common: {
+    add: 'Add',
+    addSuccess: 'Add Success',
+    edit: 'Edit',
+    editSuccess: 'Edit Success',
+    delete: 'Delete',
+    deleteSuccess: 'Delete Success',
+    save: 'Save',
+    saveSuccess: 'Save Success',
+    reset: 'Reset',
+    action: 'Action',
+    export: 'Export',
+    exportSuccess: 'Export Success',
+    import: 'Import',
+    importSuccess: 'Import Success',
+    clear: 'Clear',
+    clearSuccess: 'Clear Success',
+    yes: 'Yes',
+    no: 'No',
+    confirm: 'Confirm',
+    download: 'Download',
+    noData: 'No Data',
+    wrong: 'Something went wrong, please try again later.',
+    success: 'Success',
+    failed: 'Failed',
+    verify: 'Verify',
+    unauthorizedTips: 'Unauthorized, please verify first.',
+  },
+  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?',
+    exportImage: 'Export Image',
+    exportImageConfirm: 'Are you sure to export this chat to png?',
+    exportSuccess: 'Export Success',
+    exportFailed: 'Export Failed',
+    usingContext: 'Context Mode',
+    turnOnContext: 'In the current mode, sending messages will carry previous chat records.',
+    turnOffContext: 'In the current mode, sending messages will not carry previous chat records.',
+    deleteMessage: 'Delete Message',
+    deleteMessageConfirm: 'Are you sure to delete this message?',
+    deleteHistoryConfirm: 'Are you sure to clear this history?',
+    clearHistoryConfirm: 'Are you sure to clear chat history?',
+  },
+  setting: {
+    setting: 'Setting',
+    general: 'General',
+    config: 'Config',
+    avatarLink: 'Avatar Link',
+    name: 'Name',
+    description: 'Description',
+    resetUserInfo: 'Reset UserInfo',
+    chatHistory: 'ChatHistory',
+    theme: 'Theme',
+    language: 'Language',
+    api: 'API',
+    reverseProxy: 'Reverse Proxy',
+    timeout: 'Timeout',
+    socks: 'Socks',
+    httpsProxy: 'HTTPS Proxy',
+    balance: 'API Balance',
+  },
+  store: {
+    local: 'Local',
+    online: 'Online',
+    title: 'Title',
+    description: 'Description',
+    clearStoreConfirm: 'Whether to clear the data?',
+    importPlaceholder: 'Please paste the JSON data here',
+    addRepeatTitleTips: 'Title duplicate, please re-enter',
+    addRepeatContentTips: 'Content duplicate: {msg}, please re-enter',
+    editRepeatTitleTips: 'Title conflict, please revise',
+    editRepeatContentTips: 'Content conflict {msg} , please re-modify',
+    importError: 'Key value mismatch',
+    importRepeatTitle: 'Title repeatedly skipped: {msg}',
+    importRepeatContent: 'Content is repeatedly skipped: {msg}',
+    onlineImportWarning: 'Note: Please check the JSON file source!',
+    downloadError: 'Please check the network status and JSON file validity',
+  },
+}
--- 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 enUS from './en-US'
+import zhCN from './zh-CN'
+import zhTW from './zh-TW'
+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': enUS,
+    'zh-CN': zhCN,
+    'zh-TW': zhTW,
+  },
+})
+
+export const t = i18n.global.t
+
+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,85 @@
+export default {
+  common: {
+    add: '添加',
+    addSuccess: '添加成功',
+    edit: '编辑',
+    editSuccess: '编辑成功',
+    delete: '删除',
+    deleteSuccess: '删除成功',
+    save: '保存',
+    saveSuccess: '保存成功',
+    reset: '重置',
+    action: '操作',
+    export: '导出',
+    exportSuccess: '导出成功',
+    import: '导入',
+    importSuccess: '导入成功',
+    clear: '清空',
+    clearSuccess: '清空成功',
+    yes: '是',
+    no: '否',
+    confirm: '确定',
+    download: '下载',
+    noData: '暂无数据',
+    wrong: '好像出错了，请稍后再试。',
+    success: '操作成功',
+    failed: '操作失败',
+    verify: '验证',
+    unauthorizedTips: '未经授权，请先进行验证。',
+  },
+  chat: {
+    placeholder: '来说点什么吧...（Shift + Enter = 换行）',
+    placeholderMobile: '来说点什么...',
+    copy: '复制',
+    copied: '复制成功',
+    copyCode: '复制代码',
+    clearChat: '清空会话',
+    clearChatConfirm: '是否清空会话?',
+    exportImage: '保存会话到图片',
+    exportImageConfirm: '是否将会话保存为图片?',
+    exportSuccess: '保存成功',
+    exportFailed: '保存失败',
+    usingContext: '上下文模式',
+    turnOnContext: '当前模式下, 发送消息会携带之前的聊天记录',
+    turnOffContext: '当前模式下, 发送消息不会携带之前的聊天记录',
+    deleteMessage: '删除消息',
+    deleteMessageConfirm: '是否删除此消息?',
+    deleteHistoryConfirm: '确定删除此记录?',
+    clearHistoryConfirm: '确定清空聊天记录?',
+  },
+  setting: {
+    setting: '设置',
+    general: '总览',
+    config: '配置',
+    avatarLink: '头像链接',
+    name: '名称',
+    description: '描述',
+    resetUserInfo: '重置用户信息',
+    chatHistory: '聊天记录',
+    theme: '主题',
+    language: '语言',
+    api: 'API',
+    reverseProxy: '反向代理',
+    timeout: '超时',
+    socks: 'Socks',
+    httpsProxy: 'HTTPS Proxy',
+    balance: 'API余额',
+  },
+  store: {
+    local: '本地',
+    online: '在线',
+    title: '标题',
+    description: '描述',
+    clearStoreConfirm: '是否清空数据？',
+    importPlaceholder: '请粘贴 JSON 数据到此处',
+    addRepeatTitleTips: '标题重复，请重新输入',
+    addRepeatContentTips: '内容重复：{msg}，请重新输入',
+    editRepeatTitleTips: '标题冲突，请重新修改',
+    editRepeatContentTips: '内容冲突{msg} ，请重新修改',
+    importError: '键值不匹配',
+    importRepeatTitle: '标题重复跳过：{msg}',
+    importRepeatContent: '内容重复跳过：{msg}',
+    onlineImportWarning: '注意：请检查 JSON 文件来源！',
+    downloadError: '请检查网络状态与 JSON 文件有效性',
+  },
+}
--- a/src/locales/zh-TW.ts
+++ b/src/locales/zh-TW.ts
@@ -0,0 +1,85 @@
+export default {
+  common: {
+    add: '新增',
+    addSuccess: '新增成功',
+    edit: '編輯',
+    editSuccess: '編輯成功',
+    delete: '刪除',
+    deleteSuccess: '刪除成功',
+    save: '儲存',
+    saveSuccess: '儲存成功',
+    reset: '重設',
+    action: '操作',
+    export: '匯出',
+    exportSuccess: '匯出成功',
+    import: '匯入',
+    importSuccess: '匯入成功',
+    clear: '清除',
+    clearSuccess: '清除成功',
+    yes: '是',
+    no: '否',
+    confirm: '確認',
+    download: '下載',
+    noData: '目前無資料',
+    wrong: '發生錯誤，請稍後再試。',
+    success: '操作成功',
+    failed: '操作失敗',
+    verify: '驗證',
+    unauthorizedTips: '未經授權，請先進行驗證。',
+  },
+  chat: {
+    placeholder: '來說點什麼...（Shift + Enter = 換行）',
+    placeholderMobile: '來說點什麼...',
+    copy: '複製',
+    copied: '複製成功',
+    copyCode: '複製代碼',
+    clearChat: '清除對話',
+    clearChatConfirm: '是否清空對話?',
+    exportImage: '儲存對話為圖片',
+    exportImageConfirm: '是否將對話儲存為圖片?',
+    exportSuccess: '儲存成功',
+    exportFailed: '儲存失敗',
+    usingContext: '上下文模式',
+    turnOnContext: '啟用上下文模式，在此模式下，發送訊息會包含之前的聊天記錄。',
+    turnOffContext: '關閉上下文模式，在此模式下，發送訊息不會包含之前的聊天記錄。',
+    deleteMessage: '刪除訊息',
+    deleteMessageConfirm: '是否刪除此訊息?',
+    deleteHistoryConfirm: '確定刪除此紀錄?',
+    clearHistoryConfirm: '確定清除紀錄?',
+  },
+  setting: {
+    setting: '設定',
+    general: '總覽',
+    config: '設定',
+    avatarLink: '頭貼連結',
+    name: '名稱',
+    description: '描述',
+    resetUserInfo: '重設使用者資訊',
+    chatHistory: '紀錄',
+    theme: '主題',
+    language: '語言',
+    api: 'API',
+    reverseProxy: '反向代理',
+    timeout: '逾時',
+    socks: 'Socks',
+    httpsProxy: 'HTTPS Proxy',
+    balance: 'API余額',
+  },
+  store: {
+    local: '本機',
+    online: '線上',
+    title: '標題',
+    description: '描述',
+    clearStoreConfirm: '是否清除資料？',
+    importPlaceholder: '請將 JSON 資料貼在此處',
+    addRepeatTitleTips: '標題重複，請重新輸入',
+    addRepeatContentTips: '內容重複：{msg}，請重新輸入',
+    editRepeatTitleTips: '標題衝突，請重新修改',
+    editRepeatContentTips: '內容衝突{msg} ，請重新修改',
+    importError: '鍵值不符合',
+    importRepeatTitle: '因標題重複跳過：{msg}',
+    importRepeatContent: '因內容重複跳過：{msg}',
+    onlineImportWarning: '注意：請檢查 JSON 檔案來源！',
+    downloadError: '請檢查網路狀態與 JSON 檔案有效性',
+  },
+}
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,17 +1,19 @@
 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, setupScrollbarStyle } from './plugins'
+import { setupStore } from './store'
+import { setupRouter } from './router'

 async function bootstrap() {
  const app = createApp(App)
  setupAssets()

+  setupScrollbarStyle()
+
  setupStore(app)

-  setupDirectives(app)
+  setupI18n(app)

  await setupRouter(app)

--- a/src/plugins/assets.ts
+++ b/src/plugins/assets.ts
@@ -1,5 +1,8 @@
-import 'highlight.js/styles/xcode.css'
-import '@/styles/global.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'

 /** Tailwind's Preflight Style Override */
 function naiveStyleOverride() {
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@@ -1,3 +1,4 @@
 import setupAssets from './assets'
+import setupScrollbarStyle from './scrollbarStyle'

-export { setupAssets }
+export { setupAssets, setupScrollbarStyle }
--- a/src/plugins/scrollbarStyle.ts
+++ b/src/plugins/scrollbarStyle.ts
@@ -0,0 +1,28 @@
+import { darkTheme, lightTheme } from 'naive-ui'
+
+const setupScrollbarStyle = () => {
+  const style = document.createElement('style')
+  const styleContent = `
+    ::-webkit-scrollbar {
+      background-color: transparent;
+      width: ${lightTheme.Scrollbar.common?.scrollbarWidth};
+    }
+    ::-webkit-scrollbar-thumb {
+      background-color: ${lightTheme.Scrollbar.common?.scrollbarColor};
+      border-radius: ${lightTheme.Scrollbar.common?.scrollbarBorderRadius};
+    }
+    html.dark ::-webkit-scrollbar {
+      background-color: transparent;
+      width: ${darkTheme.Scrollbar.common?.scrollbarWidth};
+    }
+    html.dark ::-webkit-scrollbar-thumb {
+      background-color: ${darkTheme.Scrollbar.common?.scrollbarColor};
+      border-radius: ${darkTheme.Scrollbar.common?.scrollbarBorderRadius};
+    }
+  `
+
+  style.innerHTML = styleContent
+  document.head.appendChild(style)
+}
+
+export default setupScrollbarStyle
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,7 @@
 import type { App } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
 import { createRouter, createWebHashHistory } from 'vue-router'
+import { setupPageGuard } from './permission'
 import { ChatLayout } from '@/views/chat/layout'

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

 export const router = createRouter({
@@ -25,6 +44,8 @@ export const router = createRouter({
  scrollBehavior: () => ({ left: 0, top: 0 }),
 })

+setupPageGuard(router)
+
 export async function setupRouter(app: App) {
  app.use(router)
  await router.isReady()
--- a/src/router/permission.ts
+++ b/src/router/permission.ts
@@ -0,0 +1,25 @@
+import type { Router } from 'vue-router'
+import { useAuthStoreWithout } from '@/store/modules/auth'
+
+export function setupPageGuard(router: Router) {
+  router.beforeEach(async (to, from, next) => {
+    const authStore = useAuthStoreWithout()
+    if (!authStore.session) {
+      try {
+        const data = await authStore.getSession()
+        if (String(data.auth) === 'false' && authStore.token)
+          authStore.removeToken()
+        next()
+      }
+      catch (error) {
+        if (to.path !== '/500')
+          next({ name: '500' })
+        else
+          next()
+      }
+    }
+    else {
+      next()
+    }
+  })
+}
--- 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
@@ -2,19 +2,25 @@ import { ss } from '@/utils/storage'

 const LOCAL_NAME = 'appSetting'

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

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

-export function getLocalSetting() {
+export function getLocalSetting(): AppState {
  const localSetting: AppState | undefined = ss.get(LOCAL_NAME)
-  return localSetting ?? defaultSetting()
+  return { ...defaultSetting(), ...localSetting }
 }

-export function setLocalSetting(setting: AppState) {
+export function setLocalSetting(setting: AppState): void {
  ss.set(LOCAL_NAME, setting)
 }
--- a/src/store/modules/app/index.ts
+++ b/src/store/modules/app/index.ts
@@ -1,13 +1,34 @@
 import { defineStore } from 'pinia'
-import type { AppState } 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(),
  actions: {
    setSiderCollapsed(collapsed: boolean) {
      this.siderCollapsed = collapsed
+      this.recordState()
+    },
+
+    setTheme(theme: Theme) {
+      this.theme = theme
+      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/auth/helper.ts
+++ b/src/store/modules/auth/helper.ts
@@ -0,0 +1,15 @@
+import { ss } from '@/utils/storage'
+
+const LOCAL_NAME = 'SECRET_TOKEN'
+
+export function getToken() {
+  return ss.get(LOCAL_NAME)
+}
+
+export function setToken(token: string) {
+  return ss.set(LOCAL_NAME, token)
+}
+
+export function removeToken() {
+  return ss.remove(LOCAL_NAME)
+}
--- a/src/store/modules/auth/index.ts
+++ b/src/store/modules/auth/index.ts
@@ -0,0 +1,54 @@
+import { defineStore } from 'pinia'
+import { getToken, removeToken, setToken } from './helper'
+import { store } from '@/store'
+import { fetchSession } from '@/api'
+
+interface SessionResponse {
+  auth: boolean
+  model: 'ChatGPTAPI' | 'ChatGPTUnofficialProxyAPI'
+}
+
+export interface AuthState {
+  token: string | undefined
+  session: SessionResponse | null
+}
+
+export const useAuthStore = defineStore('auth-store', {
+  state: (): AuthState => ({
+    token: getToken(),
+    session: null,
+  }),
+
+  getters: {
+    isChatGPTAPI(state): boolean {
+      return state.session?.model === 'ChatGPTAPI'
+    },
+  },
+
+  actions: {
+    async getSession() {
+      try {
+        const { data } = await fetchSession<SessionResponse>()
+        this.session = { ...data }
+        return Promise.resolve(data)
+      }
+      catch (error) {
+        return Promise.reject(error)
+      }
+    },
+
+    setToken(token: string) {
+      this.token = token
+      setToken(token)
+    },
+
+    removeToken() {
+      this.token = undefined
+      removeToken()
+    },
+  },
+})
+
+export function useAuthStoreWithout() {
+  return useAuthStore(store)
+}
--- a/src/store/modules/chat/helper.ts
+++ b/src/store/modules/chat/helper.ts
@@ -3,8 +3,13 @@ import { ss } from '@/utils/storage'
 const LOCAL_NAME = 'chatStorage'

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

 export function getLocalState(): Chat.ChatState {
--- a/src/store/modules/chat/index.ts
+++ b/src/store/modules/chat/index.ts
@@ -6,6 +6,13 @@ export const useChatStore = defineStore('chat-store', {
  state: (): Chat.ChatState => getLocalState(),

  getters: {
+    getChatHistoryByCurrentActive(state: Chat.ChatState) {
+      const index = state.history.findIndex(item => item.uuid === state.active)
+      if (index !== -1)
+        return state.history[index]
+      return null
+    },
+
    getChatByUuid(state: Chat.ChatState) {
      return (uuid?: number) => {
        if (uuid)
@@ -16,6 +23,11 @@ export const useChatStore = defineStore('chat-store', {
  },

  actions: {
+    setUsingContext(context: boolean) {
+      this.usingContext = context
+      this.recordState()
+    },
+
    addHistory(history: Chat.History, chatData: Chat.Chat[] = []) {
      this.history.unshift(history)
      this.chat.unshift({ uuid: history.uuid, data: chatData })
@@ -68,6 +80,18 @@ export const useChatStore = defineStore('chat-store', {
      return await this.reloadRoute(uuid)
    },

+    getChatByUuidAndIndex(uuid: number, index: number) {
+      if (!uuid || uuid === 0) {
+        if (this.chat.length)
+          return this.chat[0].data[index]
+        return null
+      }
+      const chatIndex = this.chat.findIndex(item => item.uuid === uuid)
+      if (chatIndex !== -1)
+        return this.chat[chatIndex].data[index]
+      return null
+    },
+
    addChatByUuid(uuid: number, chat: Chat.Chat) {
      if (!uuid || uuid === 0) {
        if (this.history.length === 0) {
@@ -110,6 +134,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,5 @@
 export * from './app'
 export * from './chat'
+export * from './user'
+export * from './prompt'
+export * from './auth'
--- a/src/store/modules/prompt/helper.ts
+++ b/src/store/modules/prompt/helper.ts
@@ -0,0 +1,18 @@
+import { ss } from '@/utils/storage'
+
+const LOCAL_NAME = 'promptStore'
+
+export type PromptList = []
+
+export interface PromptStore {
+  promptList: PromptList
+}
+
+export function getLocalPromptList(): PromptStore {
+  const promptStore: PromptStore | undefined = ss.get(LOCAL_NAME)
+  return promptStore ?? { promptList: [] }
+}
+
+export function setLocalPromptList(promptStore: PromptStore): void {
+  ss.set(LOCAL_NAME, promptStore)
+}
--- a/src/store/modules/prompt/index.ts
+++ b/src/store/modules/prompt/index.ts
@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+import type { PromptStore } from './helper'
+import { getLocalPromptList, setLocalPromptList } from './helper'
+
+export const usePromptStore = defineStore('prompt-store', {
+  state: (): PromptStore => getLocalPromptList(),
+
+  actions: {
+    updatePromptList(promptList: []) {
+      this.$patch({ promptList })
+      setLocalPromptList({ promptList })
+    },
+    getPromptList() {
+      return this.$state
+    },
+  },
+})
--- 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
@@ -0,0 +1,10 @@
+html,
+body,
+#app {
+	height: 100%;
+}
+
+body {
+	padding-bottom: constant(safe-area-inset-bottom);
+	padding-bottom: env(safe-area-inset-bottom);
+}
--- a/src/styles/lib/github-markdown.less
+++ b/src/styles/lib/github-markdown.less
--- 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/styles/lib/tailwind.css
+++ b/src/styles/lib/tailwind.css
@@ -1,9 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
-
-html,
-body,
-#app {
-	height: 100%;
-}
--- a/src/typings/chat.d.ts
+++ b/src/typings/chat.d.ts
@@ -18,6 +18,7 @@ declare namespace Chat {

 	interface ChatState {
 		active: number | null
+		usingContext: boolean;
 		history: History[]
 		chat: { uuid: number; data: Chat[] }[]
 	}
--- a/src/utils/format/index.ts
+++ b/src/utils/format/index.ts
@@ -0,0 +1,44 @@
+/**
+ * 转义 HTML 字符
+ * @param source
+ */
+export function encodeHTML(source: string) {
+  return source
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .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/functions/includeCode.ts
+++ b/src/utils/functions/includeCode.ts
@@ -1,6 +0,0 @@
-function includeCode(text: string | null | undefined) {
-  const regexp = /^(?:\s{4}|\t).+/gm
-  return !!(text?.includes(' = ') || text?.match(regexp))
-}
-
-export default includeCode
--- a/src/utils/functions/index.ts
+++ b/src/utils/functions/index.ts
@@ -0,0 +1,7 @@
+export function getCurrentDate() {
+  const date = new Date()
+  const day = date.getDate()
+  const month = date.getMonth() + 1
+  const year = date.getFullYear()
+  return `${year}-${month}-${day}`
+}
--- a/src/utils/request/axios.ts
+++ b/src/utils/request/axios.ts
@@ -1,12 +1,15 @@
 import axios, { type AxiosResponse } from 'axios'
+import { useAuthStore } from '@/store'

 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(
  (config) => {
+    const token = useAuthStore().token
+    if (token)
+      config.headers.Authorization = `Bearer ${token}`
    return config
  },
  (error) => {
--- a/src/utils/request/index.ts
+++ b/src/utils/request/index.ts
@@ -1,5 +1,6 @@
 import type { AxiosProgressEvent, AxiosResponse, GenericAbortSignal } from 'axios'
 import request from './axios'
+import { useAuthStore } from '@/store'

 export interface HttpOption {
  url: string
@@ -22,9 +23,16 @@ function http<T = any>(
  { url, data, method, headers, onDownloadProgress, signal, beforeRequest, afterRequest }: HttpOption,
 ) {
  const successHandler = (res: AxiosResponse<Response<T>>) => {
+    const authStore = useAuthStore()
+
    if (res.data.status === 'Success' || typeof res.data === 'string')
      return res.data

+    if (res.data.status === 'Unauthorized') {
+      authStore.removeToken()
+      window.location.reload()
+    }
+
    return Promise.reject(res.data)
  }

--- a/src/views/chat/components/Header/index.vue
+++ b/src/views/chat/components/Header/index.vue
@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { computed, nextTick } from 'vue'
+import { HoverButton, SvgIcon } from '@/components/common'
+import { useAppStore, useChatStore } from '@/store'
+
+interface Props {
+  usingContext: boolean
+}
+
+interface Emit {
+  (ev: 'export'): void
+  (ev: 'toggleUsingContext'): void
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<Emit>()
+
+const appStore = useAppStore()
+const chatStore = useChatStore()
+
+const collapsed = computed(() => appStore.siderCollapsed)
+const currentChatHistory = computed(() => chatStore.getChatHistoryByCurrentActive)
+
+function handleUpdateCollapsed() {
+  appStore.setSiderCollapsed(!collapsed.value)
+}
+
+function onScrollToTop() {
+  const scrollRef = document.querySelector('#scrollRef')
+  if (scrollRef)
+    nextTick(() => scrollRef.scrollTop = 0)
+}
+
+function handleExport() {
+  emit('export')
+}
+
+function toggleUsingContext() {
+  emit('toggleUsingContext')
+}
+</script>
+
+<template>
+  <header
+    class="sticky top-0 left-0 right-0 z-30 border-b dark:border-neutral-800 bg-white/80 dark:bg-black/20 backdrop-blur"
+  >
+    <div class="relative flex items-center justify-between min-w-0 overflow-hidden h-14">
+      <div class="flex items-center">
+        <button
+          class="flex items-center justify-center w-11 h-11"
+          @click="handleUpdateCollapsed"
+        >
+          <SvgIcon v-if="collapsed" class="text-2xl" icon="ri:align-justify" />
+          <SvgIcon v-else class="text-2xl" icon="ri:align-right" />
+        </button>
+      </div>
+      <h1
+        class="flex-1 px-4 pr-6 overflow-hidden cursor-pointer select-none text-ellipsis whitespace-nowrap"
+        @dblclick="onScrollToTop"
+      >
+        {{ currentChatHistory?.title ?? '' }}
+      </h1>
+      <div class="flex items-center space-x-2">
+        <HoverButton @click="toggleUsingContext">
+          <span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
+            <SvgIcon icon="ri:chat-history-line" />
+          </span>
+        </HoverButton>
+        <HoverButton @click="handleExport">
+          <span class="text-xl text-[#4f555e] dark:text-white">
+            <SvgIcon icon="ri:download-2-line" />
+          </span>
+        </HoverButton>
+      </div>
+    </div>
+  </header>
+</template>
--- a/src/views/chat/components/Message/Avatar.vue
+++ b/src/views/chat/components/Message/Avatar.vue
@@ -1,16 +1,28 @@
 <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]">
+  <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" />
+      <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>
  </span>
 </template>
--- a/src/views/chat/components/Message/Text.vue
+++ b/src/views/chat/components/Message/Text.vue
@@ -1,7 +1,10 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
-import { marked } from 'marked'
-import includeCode from '@/utils/functions/includeCode'
+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 { t } from '@/locales'

 interface Props {
  inversion?: boolean
@@ -12,52 +15,64 @@ interface Props {

 const props = defineProps<Props>()

+const { isMobile } = useBasicLayout()
+
+const textRef = ref<HTMLElement>()
+
+const mdi = new MarkdownIt({
+  linkify: true,
+  highlight(code, language) {
+    const validLang = !!(language && hljs.getLanguage(language))
+    if (validLang) {
+      const lang = language ?? ''
+      return highlightBlock(hljs.highlight(code, { language: lang }).value, lang)
+    }
+    return highlightBlock(hljs.highlightAuto(code).value, '')
+  },
+})
+
+mdi.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' })
+
 const wrapClass = computed(() => {
  return [
    'text-wrap',
-    'p-3',
    'min-w-[20px]',
    'rounded-md',
+    isMobile.value ? 'p-2' : 'px-3 py-2',
    props.inversion ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]',
+    props.inversion ? 'dark:bg-[#a1dc95]' : 'dark:bg-[#1e1e20]',
    { 'text-red-500': props.error },
  ]
 })

 const text = computed(() => {
-  if (props.text) {
-    if (!includeCode(props.text))
-      return marked.parse(props.text)
-    return props.text
-  }
-  return ''
+  const value = props.text ?? ''
+  if (!props.inversion)
+    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>
-  <div :class="wrapClass">
+  <div class="text-black" :class="wrapClass">
    <template v-if="loading">
-      <span class="w-[5px] h-[20px] block animate-blink" />
+      <span class="dark:text-white w-[4px] h-[20px] block animate-blink" />
    </template>
    <template v-else>
-      <code v-if="includeCode(text)" v-highlight class="leading-relaxed" v-text="text" />
-      <div v-else class="leading-relaxed break-all" v-html="text" />
+      <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>
    </template>
  </div>
 </template>

 <style lang="less">
-.text-wrap{
-  img{
-    max-width: 100%;
-    vertical-align: middle;
-  }
-  a {
-    color: #2d5cf6
-  }
-}
-
-.hljs {
-  background-color: #fff0 !important;
-  white-space: break-spaces;
-}
+@import url(./style.less);
 </style>
--- 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 Avatar from './Avatar.vue'
-import Text from './Text.vue'
+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
@@ -13,16 +18,38 @@ interface Props {

 interface Emit {
  (ev: 'regenerate'): void
-  (ev: 'copy'): void
  (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() {
@@ -31,19 +58,23 @@ function handleRegenerate() {
 </script>

 <template>
-  <div class="flex w-full mb-6" :class="[{ 'flex-row-reverse': inversion }]">
+  <div class="flex w-full mb-6 overflow-hidden" :class="[{ 'flex-row-reverse': inversion }]">
    <div
-      class="flex items-center justify-center rounded-full overflow-hidden w-[32px] h-[32px]"
-      :class="[inversion ? 'ml-3' : 'mr-3']"
+      class="flex items-center justify-center flex-shrink-0 h-8 overflow-hidden rounded-full basis-8"
+      :class="[inversion ? 'ml-2' : 'mr-2']"
    >
-      <Avatar :image="inversion" />
+      <AvatarComponent :image="inversion" />
    </div>
-    <div class="flex flex-col flex-1 text-sm" :class="[inversion ? 'items-end' : 'items-start']">
-      <span class="text-xs text-[#b4bbc4]">
+    <div class="overflow-hidden text-sm " :class="[inversion ? 'items-end' : 'items-start']">
+      <p class="text-xs text-[#b4bbc4]" :class="[inversion ? 'text-right' : 'text-left']">
        {{ dateTime }}
-      </span>
-      <div class="flex items-end gap-2 mt-2" :class="[inversion ? 'flex-row-reverse' : 'flex-row']">
-        <Text
+      </p>
+      <div
+        class="flex items-end gap-1 mt-2"
+        :class="[inversion ? 'flex-row-reverse' : 'flex-row']"
+      >
+        <TextComponent
+          ref="textRef"
          :inversion="inversion"
          :error="error"
          :text="text"
@@ -52,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"
+            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"
-            @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
@@ -0,0 +1,66 @@
+.markdown-body {
+	background-color: transparent;
+	font-size: 14px;
+
+	p {
+		white-space: pre-wrap;
+	}
+
+	ol {
+		list-style-type: decimal;
+	}
+
+	ul {
+		list-style-type: disc;
+	}
+
+	pre code,
+	pre tt {
+		line-height: 1.65;
+	}
+
+	.highlight pre,
+	pre {
+		background-color: #fff;
+	}
+
+	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/Show More
+++ b/Show More
Author	SHA1	Message	Date
ChenZhaoYu	71c5a88c01	chore: v2.10.6	2023-03-17 10:01:35 +08:00
ChenZhaoYu	a8e9a24ca7	fix: highlight.js 控制台兼容性警告	2023-03-17 09:49:43 +08:00
ChenZhaoYu	95724845cf	feat: session 返回接口方式做显示判断	2023-03-17 09:36:12 +08:00
ChenZhaoYu	c5552893d7	chore: update deps and lint fix	2023-03-17 09:25:16 +08:00
pzcn	e46d3685a0	feat: show api balance (#582 ) * feat: show api balance * Update index.ts * 保留小数点后五位 * perf: 判断优化 --------- Co-authored-by: Redon <790348264@qq.com>	2023-03-17 09:21:25 +08:00
ChenZhaoYu	116ed7b0bf	docs: 移除 docker-compose.yml 省略	2023-03-17 08:59:49 +08:00
ChenZhaoYu	2ad7567548	perf: 优化部份判断	2023-03-17 08:57:27 +08:00
ChenZhaoYu	b3cfe7a976	perf: 记录上下文设定保存到本地	2023-03-17 08:40:45 +08:00
Kirk Lin	0b13846861	chore: extract proxy setup code into reusable function (#583 )	2023-03-17 08:26:16 +08:00
CornerSkyless	951e9d8d39	perf: 优化移动端 prompt 商店样式 (#608 ) * feat: 修改移动端 prompt 商店样式 * add: 修改移动端 prompt 商店样式 * perf: 清理代码 --------- Co-authored-by: ChenZhaoYu <790348264@qq.com>	2023-03-17 08:14:31 +08:00
碎花爱洋裙	1411c45811	fix: typo (#636 )	2023-03-17 08:04:11 +08:00
Hayden Chen	c797ff5cb3	fix: 🐛 fix scroll bar style (#617 )	2023-03-16 11:51:07 +08:00
Wisdom	25692f8371	fix: inverted parameter for before each function (#585 )	2023-03-15 08:46:11 +08:00
ChenZhaoYu	3a1466bace	fix: 修复导入、导出错误	2023-03-14 08:28:43 +08:00
ChenZhaoYu	cf788b190a	chore: v2.10.5	2023-03-13 10:00:56 +08:00
Eason	6cd16826fd	chore: optimize dockerfile to speed up building and reduce docker image size (#520 )	2023-03-13 09:03:17 +08:00
ChenZhaoYu	b288cd612e	chore: docs change	2023-03-13 08:58:30 +08:00
ChenZhaoYu	efc9e81e83	fix: 清空上下文时不应该重置会话标题	2023-03-13 08:49:21 +08:00
ChenZhaoYu	db502e1412	feat: 权限输入框改为密码类型	2023-03-13 08:48:44 +08:00
ChenZhaoYu	41ddc6a8e1	chore: docs change	2023-03-13 08:44:53 +08:00
ChenZhaoYu	0481726608	feat: 修改 Prompt Store 移动端样式	2023-03-13 08:24:13 +08:00
ChenZhaoYu	73bf8c01a9	feat: 语言设定改为下拉框选择	2023-03-13 08:21:02 +08:00
Peter Dave Hello	8a0cb90ccc	feat: improve zh-TW locale, translate new strings (#542 )	2023-03-13 08:11:22 +08:00
ChenZhaoYu	f4be5b985a	chore: update deps	2023-03-12 21:10:40 +08:00
ChenZhaoYu	0a9f9b618b	feat: 调整界面	2023-03-12 21:08:32 +08:00
ChenZhaoYu	af76b89fd4	feat: 仓库查询筛选	2023-03-12 20:57:21 +08:00
ChenZhaoYu	de6632d631	feat: 仓库添加翻译	2023-03-12 20:49:10 +08:00
吴杉(Shan Wu)	7bebee202e	fix: Prompt商店在线导入可以导入两种recommend.json里提到的模板 (#516 ) (#521 ) * fix(PromptStore): import prompt template using different dict keys * chore(PromptStore): clear url field after downloading	2023-03-12 19:42:56 +08:00
Eason	bc5e835f78	feat: support linux command line proxy standard (#308 ) * feat: support linux command line proxy standard with env HTTPS_PROXY and ALL_PROXY * chore: update docs for linux command linux proxy standard	2023-03-12 19:38:59 +08:00
Yige	a4cfd0c380	fix: 修改最大行数与官方保持一致 (#502 ) * chore: rename environment variables files * docs: update README.md about .env file * feat: support long reply * chore: upgrade chatgpt package and set long reply to false default * chore: set long reply to false default * fix: change maxRows to 8 * feat: mobile max row --------- Co-authored-by: ChenZhaoYu <790348264@qq.com>	2023-03-12 19:29:04 +08:00
Yige	86d720ecee	fix: cors in auth_secret_key model (#499 )	2023-03-12 18:47:44 +08:00
Peter Dave Hello	379bbcdd14	feat: Improve zh-TW locale (#511 )	2023-03-12 09:52:42 +08:00
Nothing1024	84a19aafc2	fix: 更新JSON导入检查 (#523 )	2023-03-12 09:49:45 +08:00
ChenZhaoYu	cf03b65a4d	chore: cover	2023-03-11 16:51:10 +08:00
ChenZhaoYu	461d70a696	chore: 2.10.4	2023-03-11 16:31:55 +08:00
ChenZhaoYu	6b8ba6302a	chore: format	2023-03-11 16:27:55 +08:00
ChenZhaoYu	c0a1b5606e	feat: 设置添加关闭按钮	2023-03-11 16:16:35 +08:00
Nothing1024	00ade41a76	feat: 添加 Prompt 模板和 Prompt 商店支持 (#268 ) * feat: 添加Prompt模板和Prompt商店支持 * feat: well done --------- Co-authored-by: Redon <790348264@qq.com>	2023-03-11 16:09:52 +08:00
ChenZhaoYu	514ab7e9e4	chore: change docs	2023-03-11 10:50:58 +08:00
ChenZhaoYu	24c203f8d4	chore: v2.10.3	2023-03-10 14:48:42 +08:00
cloudGrin	cbcbdda4c0	chore: 简化docker-compose部署 (#466 )	2023-03-10 14:33:36 +08:00
ChenZhaoYu	a2fcd31f24	perf: use hooks	2023-03-10 14:30:02 +08:00
ChenZhaoYu	07b92d4ede	fix: 文字过长时头像被挤压	2023-03-10 14:20:56 +08:00
ChenZhaoYu	ed4ff67760	feat: 移动端按钮调整到顶部	2023-03-10 14:05:59 +08:00
ChenZhaoYu	9c4644c969	feat: iOS 安全距离	2023-03-10 14:04:50 +08:00
Xc	dd91c2a4e0	feat: support pwa (#452 ) * feat: support pwa * feat: support pwa	2023-03-10 13:25:30 +08:00
RyanzeX	7e8e15a628	fix: reset history title on clear (#453 )	2023-03-10 13:24:36 +08:00
Yige	076c56d1d9	feat: 支持长回复 (#450 ) * chore: rename environment variables files * docs: update README.md about .env file * feat: support long reply * chore: upgrade chatgpt package and set long reply to false default * chore: set long reply to false default	2023-03-10 13:23:22 +08:00
ChenZhaoYu	133a24e25f	chore: update chatgpt	2023-03-10 13:11:36 +08:00
ChenZhaoYu	73a67b8f64	chore: 2.10.2_2	2023-03-10 00:47:56 +08:00
ChenZhaoYu	222b3eaa4c	feat: 移动端下按钮收缩	2023-03-10 00:46:09 +08:00
ChenZhaoYu	c4baccdc48	chore: v2.10.2_1	2023-03-10 00:03:19 +08:00
ChenZhaoYu	7021a08ecf	chore: reset scrollToBottom	2023-03-10 00:02:02 +08:00
ChenZhaoYu	e88b9bef13	chore: reset .env	2023-03-09 23:57:47 +08:00
ChenZhaoYu	c17cc16c0e	chore: 异常打印和调整日志	2023-03-09 22:58:06 +08:00
ChenZhaoYu	d7d037618f	chore: version 2.10.2	2023-03-09 22:49:15 +08:00
ChenZhaoYu	01edad7717	fix: 修复默认模型判断错误	2023-03-09 22:45:43 +08:00
ChenZhaoYu	eff787a2b7	chore: 移除两种报错	2023-03-09 20:16:18 +08:00
ChenZhaoYu	8616526136	fix: typo	2023-03-09 19:41:27 +08:00
ChenZhaoYu	32e3963390	chore: v2.10.1	2023-03-09 19:25:19 +08:00
ChenZhaoYu	7d52e6dd1e	feat: model typo	2023-03-09 19:13:18 +08:00
ChenZhaoYu	ba41015df8	Merge branch 'feature'	2023-03-09 19:02:22 +08:00
ChenZhaoYu	f084460d1c	fix: 深色模式导出图片的样式问题	2023-03-09 18:57:46 +08:00
Yige	a4ef23d603	chore: rename environment variables files (#395 ) * chore: rename environment variables files * docs: update README.md about .env file	2023-03-09 18:41:33 +08:00
xieccc	d3daa654a7	feat: 新增API模型配置项 (#404 ) * chore: 更新文档 * Improve zh-TW locale (#379) * fix: 移动端样式 * feat: typo * fix: 调整滚动回原样 * feat: 新增API模型配置项 --------- Co-authored-by: ChenZhaoYu <790348264@qq.com> Co-authored-by: Peter Dave Hello <hsu@peterdavehello.org>	2023-03-09 18:38:30 +08:00
acongee	9576edf26f	feat: 优化打字机模式显示新内容的逻辑 (#394 ) * 添加为打字机模式优化的滚动至底部函数 * feat: 优化打字机模式始终显示最新内容的逻辑 * feat: 内容输出结束时也根据滚动条位置判断是否滚动至底部	2023-03-09 18:15:13 +08:00
CornerSkyless	5b74ac9cc6	fix: 修复导出图片会丢失头像的问题 (#392 )	2023-03-09 17:59:26 +08:00
CornerSkyless	444e2ec2e8	feat: 增加了一个可以是否要发送历史上下文的开关 (#393 ) * chore: 更新文档 * Improve zh-TW locale (#379) * fix: 移动端样式 * feat: typo * fix: 调整滚动回原样 * feat: 支持切换是否要发送前文信息 * style: 修复 lint --------- Co-authored-by: ChenZhaoYu <790348264@qq.com> Co-authored-by: Peter Dave Hello <hsu@peterdavehello.org>	2023-03-09 17:56:11 +08:00
壳壳中的宇宙	60b7874f65	优化docker打包镜像文件过大的问题 (#415 ) * chore: 更新文档 * Improve zh-TW locale (#379) * fix: 移动端样式 * feat: typo * fix: 调整滚动回原样 * ⚡优化docker打包镜像文件过大 --------- Co-authored-by: ChenZhaoYu <790348264@qq.com> Co-authored-by: Peter Dave Hello <hsu@peterdavehello.org>	2023-03-09 17:52:39 +08:00
ChenZhaoYu	07cac12dac	fix: 调整滚动回原样	2023-03-08 10:38:50 +08:00
ChenZhaoYu	4f3bfd1d4a	feat: typo	2023-03-08 08:43:54 +08:00
ChenZhaoYu	451a456f58	fix: 移动端样式	2023-03-08 08:38:16 +08:00
Peter Dave Hello	5fe1e20e4a	Improve zh-TW locale (#379 )	2023-03-08 08:29:30 +08:00
ChenZhaoYu	54381ed2e2	chore: 更新文档	2023-03-07 22:23:44 +08:00
Redon	ffd4da91cf	chore: version 2.10.0 * feat: 权限验证功能 * chore: v2.10.0 * feat: 500 服务异常页面 * feat: 只有结束才会滚动到底部 * chore: 修改 CHANGELOG * chore: 不存在时输出默认报错	2023-03-07 22:12:15 +08:00
CornerSkyless	a2ffa3cb3a	feat: 增加保存会话为图片的功能 (#374 ) * feat: 增加保存会话为图片的功能 * feat: 异常处理和增加导出动画 --------- Co-authored-by: ChenZhaoYu <790348264@qq.com>	2023-03-07 21:13:41 +08:00
Peter Dave Hello	ecc2afd164	feat: 添加繁体中文翻译 (#348 ) * feat: Add Traditional Chinese language UI locale * chore: 添加新翻译 --------- Co-authored-by: ChenZhaoYu <790348264@qq.com>	2023-03-07 18:44:27 +08:00
Nine9	45cbfbf002	feat: 增加聊天记录导入导出清空的功能 (#369 ) * feat: 增加聊天记录导入导出功能 * feat: 添加日期和图标 * perf: 移除触发事件改为 reload --------- Co-authored-by: Nine9 <germmc99@gmail.com> Co-authored-by: ChenZhaoYu <790348264@qq.com>	2023-03-07 18:26:55 +08:00
CornerSkyless	a689406b28	feat: 判断小窗模式 ctrl+enter 发送消息 (#363 )	2023-03-07 17:54:22 +08:00
Redon	2ff82b1249	Merge pull request #370 from Chanzhaoyu/feature feat: 转义状态码	2023-03-07 17:01:15 +08:00
ChenZhaoYu	8e1b4edc91	feat: 转义状态码	2023-03-07 16:59:47 +08:00
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
Redon	21fb4f817c	fix: HTML 渲染异常 (#152 ) * fix: 修复 `API` 版本 HTML 会被渲染的问题[#146] * chore: version 2.8.1	2023-02-27 19:25:15 +08:00
二丫讲梵	2c509c329f	feat: 调整镜像构建的tag,让最新代码指向latest,让每次版本指向日期 (#144 ) * feat: 调整镜像构建的tag,让最新代码指向latest,让每次版本指向日期 * feat: 触发时机为main分支push或者relases的create,镜像的tag为分支名或tag名 * fix: 修复变量引用方式 * fix: 修复变量引用方式 * fix: 使用github.ref_name 取触发action的来源	2023-02-27 19:24:46 +08:00
ChenZhaoYu	4769c31d09	fix: white space	2023-02-27 13:01:42 +08:00
Redon	89712aada7	chore: version 2.8.0 (#140 ) * fix: 用户输入换行符号被忽略的问题[#137] * feat: 输入框添加换行提示，移动端`Enter` 判定换行而不是提交[#135] * feat: 调整标签 * chore: version 2.8.0	2023-02-27 11:14:32 +08:00
ChenZhaoYu	3e9db49aad	fix: code white-space	2023-02-26 20:24:49 +08:00
ChenZhaoYu	2dcd292dd4	chore: 移除关于不可靠的结论	2023-02-26 11:35:21 +08:00
Redon	90f6989445	feat: 移动端功能优化 (#132 ) * feat: 移动端双击返回顶部 * feat: 深色模式下的底色 * feat: 移动端标题返回顶部和返回底部	2023-02-26 10:07:02 +08:00
Redon	1406292405	fix: 修复部份 `bug` (#131 ) * fix: 主题模式图标不一致的问题[#125] * fix: 修复样式问题[#123][#126] * perf: 优化代码和添加类型	2023-02-25 22:44:25 +08:00
puppywang	628187f5c3	feat: add proxy support and fix streaming mode (#122 )	2023-02-25 17:13:19 +08:00
Redon	cc91e95eed	chore: version 2.7.3 (#120 ) * fix: 用户输入也被渲染的问题 (#117) * fix: 用户输入不转换 * feat: 基础深色模式适配 * feat: 主题模式跟随系统 * feat: 深色适配补漏 * chore: version 2.7.3	2023-02-25 00:19:13 +08:00
ChenZhaoYu	abbdcf9c51	chore: 更新封面	2023-02-24 16:45:25 +08:00
Redon	b6fd9ae766	feat: v2.7.2 消息样式美化和优化代码 (#111 ) * perf: 优化代码 * feat: 美化消息，支持 markdown 全语法 * chore: version 2.7.2	2023-02-24 15:03:49 +08:00
Redon	1e2f893ef6	chore: version 2.7.1 (#99 ) * feat: 调整流输出为实验性质 * feat: 取消回答按钮 * feat: 更新版本查看 * feat: 单消息复制和删除功能 * feat: 消除警告 * feat: 优化删除功能 * chore: version 2.7.1	2023-02-23 12:44:28 +08:00