chore: v2.10.3

* feat: support pwa

* feat: support pwa

.dockerignore

@@ -1,6 +1,6 @@
+**/node_modules
+*/node_modules
 node_modules
 Dockerfile
-.git
+.*
-.husky
+*/.*
-.github
-.vscode

.env

@@ -2,3 +2,6 @@
 VITE_GLOB_API_URL=/api
 
 VITE_APP_API_BASE_URL=http://localhost:3002/
+
+# Whether long replies are supported, which may result in higher API fees
+VITE_GLOB_OPEN_LONG_REPLY=false

.gitignore

@@ -27,3 +27,6 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+# Environment variables files
+/service/.env

CHANGELOG.md

@@ -1,3 +1,64 @@
+## 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`

Dockerfile

@@ -4,7 +4,11 @@ FROM node:lts-alpine AS builder
 COPY ./ /app
 WORKDIR /app
 
-RUN npm install pnpm -g && pnpm install && pnpm run build
+RUN apk add --no-cache git \
+    && npm install pnpm -g \
+    && pnpm install \
+    && pnpm run build \
+    && rm -rf /root/.npm /root/.pnpm-store /usr/local/share/.cache /tmp/*
 
 # service
 FROM node:lts-alpine
@@ -13,8 +17,12 @@ COPY /service /app
 COPY --from=builder /app/dist /app/public
 
 WORKDIR /app
-RUN npm install pnpm -g && pnpm install
+RUN apk add --no-cache git \
+    && npm install pnpm -g \
+    && pnpm install --only=production \
+    && rm -rf /root/.npm /root/.pnpm-store /usr/local/share/.cache /tmp/*
+
 
 EXPOSE 3002
 
-CMD ["pnpm", "run", "start"]
+CMD ["pnpm", "run", "start"]

README.en.md

@@ -55,7 +55,7 @@ Comparison:
 [Details](https://github.com/Chanzhaoyu/chatgpt-web/issues/138)
 
 Switching Methods:
-1. Go to the `service/.env` file.
+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.
@@ -168,6 +168,7 @@ pnpm dev
 - `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
@@ -210,6 +211,8 @@ services:
       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
@@ -222,6 +225,7 @@ services:
       SOCKS_PROXY_PORT: xxxx
 ```
 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
 
@@ -237,6 +241,7 @@ The `OPENAI_API_BASE_URL` is optional and only used when setting the `OPENAI_API
 | `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.                 |
@@ -266,7 +271,7 @@ PS: You can also run `pnpm start` directly on the server without packaging.
 
 #### Frontend webpage
 
-1. Modify `VITE_APP_API_BASE_URL` in `.env` at the root directory to your actual backend interface address.
+1. Refer to the root directory `.env.example` file content to create `.env` file, modify `VITE_APP_API_BASE_URL` in `.env` at the root directory to your actual backend interface address.
 2. Run the following command in the root directory and then copy the files in the `dist` folder to the root directory of your website service.
 
 [Reference information](https://cn.vitejs.dev/guide/static-deploy.html#building-the-app)

README.md

@@ -54,7 +54,7 @@
 [查看详情](https://github.com/Chanzhaoyu/chatgpt-web/issues/138)
 
 切换方式：
-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` 优先
@@ -166,6 +166,7 @@ pnpm dev
 - `OPENAI_API_KEY` 二选一
 - `OPENAI_ACCESS_TOKEN`  二选一，同时存在时，`OPENAI_API_KEY` 优先
 - `OPENAI_API_BASE_URL`  可选，设置 `OPENAI_API_KEY` 时可用
+- `OPENAI_API_MODEL`  可选，设置 `OPENAI_API_KEY` 时可用
 - `API_REVERSE_PROXY` 可选，设置 `OPENAI_ACCESS_TOKEN` 时可用 [参考](#介绍)
 - `AUTH_SECRET_KEY` 访问权限密钥，可选
 - `TIMEOUT_MS` 超时，单位毫秒，可选
@@ -208,6 +209,8 @@ services:
       OPENAI_ACCESS_TOKEN: xxxxxx
       # API接口地址，可选，设置 OPENAI_API_KEY 时可用
       OPENAI_API_BASE_URL: xxxx
+      # API模型，可选，设置 OPENAI_API_KEY 时可用
+      OPENAI_API_MODEL: xxxx
       # 反向代理，可选
       API_REVERSE_PROXY: xxx
       # 访问权限密钥，可选
@@ -220,6 +223,7 @@ services:
       SOCKS_PROXY_PORT: xxxx
 ```
 - `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)
@@ -234,6 +238,7 @@ services:
 | `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代理端口    |
@@ -261,7 +266,7 @@ PS: 不进行打包，直接在服务器上运行 `pnpm start` 也可
 
 #### 前端网页
 
-1、修改根目录下 `.env` 内 `VITE_APP_API_BASE_URL` 为你的实际后端接口地址
+1、修改根目录下 `.env` 文件中的 `VITE_APP_API_BASE_URL` 为你的实际后端接口地址
 
 2、根目录下运行以下命令，然后将 `dist` 文件夹内的文件复制到你网站服务的根目录下
 

docker-compose/docker-compose.yml

@@ -12,6 +12,8 @@ services:
       OPENAI_ACCESS_TOKEN: xxxxxx
       # API接口地址，可选，设置 OPENAI_API_KEY 时可用
       OPENAI_API_BASE_URL: xxxx
+      # API模型，可选，设置 OPENAI_API_KEY 时可用
+      OPENAI_API_MODEL: xxxx
       # 反向代理，可选
       API_REVERSE_PROXY: xxx
       # 访问权限密钥，可选
@@ -23,13 +25,13 @@ services:
       # Socks代理端口，可选，和 SOCKS_PROXY_HOST 一起时生效
       SOCKS_PROXY_PORT: xxxx
   nginx:
-    build: nginx
+    image: nginx:alpine
-    image: chatgpt/nginx
     ports:
       - '80:80'
     expose:
       - '80'
     volumes:
-      - ./nginx/html/:/etc/nginx/html/
+      - ./nginx/html:/usr/share/nginx/html
+      - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf
     links:
       - app

docker-compose/nginx/Dockerfile

@@ -1,10 +0,0 @@
-FROM hub.c.163.com/library/nginx
-
-MAINTAINER jo "tionsin@live.com"
-
-RUN rm -rf /etc/nginx/conf.d/default.conf
-COPY ./nginx.conf /etc/nginx/conf.d/default.conf
-COPY ./html/ /usr/share/nginx/html/
-EXPOSE 80
-
-CMD ["nginx", "-g", "daemon off;"]

docker-compose/nginx/nginx.conf

@@ -3,9 +3,9 @@ server {
 	server_name  localhost;
 	charset utf-8;
 	error_page   500 502 503 504  /50x.html;
-	location = / {
+	location / {
-			root   /usr/share/nginx/html;
+			root /usr/share/nginx/html;
-			index  index.html index.htm;
+   		try_files $uri /index.html;
 	}
 
 	location /api {

docker-compose/readme.md

@@ -1,8 +1,7 @@
 ### docker-compose 部署教程
 - 将打包好的前端文件放到 `nginx/html` 目录下
 - ```shell
-  # 打包启动
+  # 启动
-  docker-compose build
   docker-compose up -d
   ```
 - ```shell

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chatgpt-web",
-  "version": "2.10.0",
+  "version": "2.10.3",
   "private": false,
   "description": "ChatGPT Web",
   "author": "ChenZhaoYu <chenzhaoyu1994@gmail.com>",
@@ -58,6 +58,7 @@
     "tailwindcss": "^3.2.7",
     "typescript": "~4.9.5",
     "vite": "^4.1.4",
+    "vite-plugin-pwa": "^0.14.4",
     "vue-tsc": "^1.2.0"
   },
   "lint-staged": {

service/.env.example

@@ -7,6 +7,9 @@ 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=
 

service/package.json

@@ -24,7 +24,7 @@
     "common:cleanup": "rimraf node_modules && rimraf pnpm-lock.yaml"
   },
   "dependencies": {
-    "chatgpt": "^5.0.8",
+    "chatgpt": "^5.0.9",
     "dotenv": "^16.0.3",
     "esno": "^0.16.3",
     "express": "^4.18.2",

service/pnpm-lock.yaml

@@ -4,7 +4,7 @@ specifiers:
   '@antfu/eslint-config': ^0.35.3
   '@types/express': ^4.17.17
   '@types/node': ^18.14.6
-  chatgpt: ^5.0.8
+  chatgpt: ^5.0.9
   dotenv: ^16.0.3
   eslint: ^8.35.0
   esno: ^0.16.3
@@ -17,7 +17,7 @@ specifiers:
   typescript: ^4.9.5
 
 dependencies:
-  chatgpt: 5.0.8
+  chatgpt: 5.0.9
   dotenv: 16.0.3
   esno: 0.16.3
   express: 4.18.2
@@ -902,8 +902,8 @@ packages:
     resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
     dev: true
 
-  /chatgpt/5.0.8:
+  /chatgpt/5.0.9:
-    resolution: {integrity: sha512-Bjh7Y15QIsZ+SkQvbbZGymv1PGxkZ7X1vwqAwvyqaMMhbipU4kxht/GL62VCxhoUCXPwxTfScbFeNFtNldgqaw==}
+    resolution: {integrity: sha512-H0MMegLKcYyYh3LeFO4ubIdJSiSAl4rRjTeXf3KjHfGXDM7QZ1EkiTH9RuIoaNzOm8rJTn4QEhrwBbOIpbalxw==}
     engines: {node: '>=14'}
     hasBin: true
     dependencies:

service/src/chatgpt/index.ts

@@ -8,10 +8,8 @@ import { sendResponse } from '../utils'
 import type { ApiModel, ChatContext, ChatGPTUnofficialProxyAPIOptions, ModelConfig } from '../types'
 
 const ErrorCodeMessage: Record<string, string> = {
-  400: '[OpenAI] 模型的最大上下文长度是4096个令牌，请减少信息的长度。| This model\'s maximum context length is 4096 tokens.',
   401: '[OpenAI] 提供错误的API密钥 | Incorrect API key provided',
   403: '[OpenAI] 服务器拒绝访问，请稍后再试 | Server refused to access, please try again later',
-  429: '[OpenAI] 服务器限流，请稍后再试 | Server was limited, please try again later',
   502: '[OpenAI] 错误的网关 |  Bad Gateway',
   503: '[OpenAI] 服务器繁忙，请稍后再试 | Server is busy, please try again later',
   504: '[OpenAI] 网关超时 | Gateway Time-out',
@@ -33,11 +31,14 @@ let api: ChatGPTAPI | ChatGPTUnofficialProxyAPI
   // 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 = (typeof OPENAI_API_MODEL === 'string' && OPENAI_API_MODEL.length > 0)
+      ? OPENAI_API_MODEL
+      : 'gpt-3.5-turbo'
+
     const options: ChatGPTAPIOptions = {
       apiKey: process.env.OPENAI_API_KEY,
-      completionParams: {
+      completionParams: { model },
-        model: 'gpt-3.5-turbo',
-      },
       debug: false,
     }
 
@@ -86,8 +87,8 @@ async function chatReplyProcess(
   lastContext?: { conversationId?: string; parentMessageId?: string },
   process?: (chat: ChatMessage) => void,
 ) {
-  if (!message)
+  // if (!message)
-    return sendResponse({ type: 'Fail', message: 'Message is empty' })
+  //   return sendResponse({ type: 'Fail', message: 'Message is empty' })
 
   try {
     let options: SendMessageOptions = { timeoutMs }

src/components/common/UserAvatar/index.vue

@@ -11,8 +11,8 @@ const userInfo = computed(() => userStore.userInfo)
 </script>
 
 <template>
-  <div class="flex items-center">
+  <div class="flex items-center overflow-hidden">
-    <div class="w-10 h-10 overflow-hidden rounded-full">
+    <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"
@@ -25,11 +25,11 @@ const userInfo = computed(() => userStore.userInfo)
         <NAvatar size="large" round :src="defaultAvatar" />
       </template>
     </div>
-    <div class="ml-2">
+    <div class="flex-1 min-w-0 ml-2">
-      <h2 class="font-bold text-md">
+      <h2 class="overflow-hidden font-bold text-md text-ellipsis whitespace-nowrap">
         {{ userInfo.name ?? 'ChenZhaoYu' }}
       </h2>
-      <p class="text-xs text-gray-500">
+      <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"

src/locales/en-US.ts

@@ -27,6 +27,9 @@ export default {
     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?',

src/locales/zh-CN.ts

@@ -27,6 +27,9 @@ export default {
     exportImageConfirm: '是否将会话保存为图片?',
     exportSuccess: '保存成功',
     exportFailed: '保存失败',
+    usingContext: '上下文模式',
+    turnOnContext: '当前模式下, 发送消息会携带之前的聊天记录',
+    turnOffContext: '当前模式下, 发送消息不会携带之前的聊天记录',
     deleteMessage: '删除消息',
     deleteMessageConfirm: '是否删除此消息?',
     deleteHistoryConfirm: '确定删除此记录?',

src/locales/zh-TW.ts

@@ -27,6 +27,9 @@ export default {
     exportImageConfirm: '是否將對話儲存為圖片?',
     exportSuccess: '儲存成功',
     exportFailed: '儲存失敗',
+    usingContext: '上下文模式',
+    turnOnContext: '在當前模式下, 發送訊息會攜帶之前的聊天記錄。',
+    turnOffContext: '在當前模式下, 發送訊息不會攜帶之前的聊天記錄。',
     deleteMessage: '刪除訊息',
     deleteMessageConfirm: '是否刪除此訊息?',
     deleteHistoryConfirm: '確定刪除此紀錄?',

src/store/modules/chat/index.ts

@@ -165,6 +165,7 @@ export const useChatStore = defineStore('chat-store', {
       if (!uuid || uuid === 0) {
         if (this.chat.length) {
           this.chat[0].data = []
+          this.history[0].title = 'New Chat'
           this.recordState()
         }
         return
@@ -173,6 +174,7 @@ export const useChatStore = defineStore('chat-store', {
       const index = this.chat.findIndex(item => item.uuid === uuid)
       if (index !== -1) {
         this.chat[index].data = []
+        this.history[index].title = 'New Chat'
         this.recordState()
       }
     },

src/styles/global.less

@@ -6,4 +6,5 @@ body,
 
 body {
 	padding-bottom: constant(safe-area-inset-bottom);
+	padding-bottom: env(safe-area-inset-bottom);
 }

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>

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

@@ -38,7 +38,7 @@ const wrapClass = computed(() => {
     'text-wrap',
     'min-w-[20px]',
     'rounded-md',
-    isMobile.value ? 'p-2' : 'p-3',
+    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 },

src/views/chat/hooks/useScroll.ts

@@ -7,6 +7,7 @@ interface ScrollReturn {
   scrollRef: Ref<ScrollElement>
   scrollToBottom: () => Promise<void>
   scrollToTop: () => Promise<void>
+  scrollToBottomIfAtBottom: () => Promise<void>
 }
 
 export function useScroll(): ScrollReturn {
@@ -24,9 +25,20 @@ export function useScroll(): ScrollReturn {
       scrollRef.value.scrollTop = 0
   }
 
+  const scrollToBottomIfAtBottom = async () => {
+    await nextTick()
+    if (scrollRef.value) {
+      const threshold = 50 // 阈值，表示滚动条到底部的距离阈值
+      const distanceToBottom = scrollRef.value.scrollHeight - scrollRef.value.scrollTop - scrollRef.value.clientHeight
+      if (distanceToBottom <= threshold)
+        scrollRef.value.scrollTop = scrollRef.value.scrollHeight
+    }
+  }
+
   return {
     scrollRef,
     scrollToBottom,
     scrollToTop,
+    scrollToBottomIfAtBottom,
   }
 }

src/views/chat/hooks/useUsingContext.ts

@@ -0,0 +1,21 @@
+import { ref } from 'vue'
+import { useMessage } from 'naive-ui'
+import { t } from '@/locales'
+
+export function useUsingContext() {
+  const ms = useMessage()
+  const usingContext = ref<boolean>(true)
+
+  function toggleUsingContext() {
+    usingContext.value = !usingContext.value
+    if (usingContext.value)
+      ms.success(t('chat.turnOnContext'))
+    else
+      ms.warning(t('chat.turnOffContext'))
+  }
+
+  return {
+    usingContext,
+    toggleUsingContext,
+  }
+}

src/views/chat/index.vue

@@ -7,6 +7,8 @@ import { Message } from './components'
 import { useScroll } from './hooks/useScroll'
 import { useChat } from './hooks/useChat'
 import { useCopyCode } from './hooks/useCopyCode'
+import { useUsingContext } from './hooks/useUsingContext'
+import HeaderComponent from './components/Header/index.vue'
 import { HoverButton, SvgIcon } from '@/components/common'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { useChatStore } from '@/store'
@@ -15,6 +17,8 @@ import { t } from '@/locales'
 
 let controller = new AbortController()
 
+const openLongReply = import.meta.env.VITE_GLOB_OPEN_LONG_REPLY === 'true'
+
 const route = useRoute()
 const dialog = useDialog()
 const ms = useMessage()
@@ -22,9 +26,11 @@ const ms = useMessage()
 const chatStore = useChatStore()
 
 useCopyCode()
+
 const { isMobile } = useBasicLayout()
 const { addChat, updateChat, updateChatSome, getChatByUuidAndIndex } = useChat()
 const { scrollRef, scrollToBottom } = useScroll()
+const { usingContext, toggleUsingContext } = useUsingContext()
 
 const { uuid } = route.params as { uuid: string }
 
@@ -39,7 +45,7 @@ function handleSubmit() {
 }
 
 async function onConversation() {
-  const message = prompt.value
+  let message = prompt.value
 
   if (loading.value)
     return
@@ -68,7 +74,7 @@ async function onConversation() {
   let options: Chat.ConversationRequest = {}
   const lastContext = conversationList.value[conversationList.value.length - 1]?.conversationOptions
 
-  if (lastContext)
+  if (lastContext && usingContext.value)
     options = { ...lastContext }
 
   addChat(
@@ -86,41 +92,53 @@ async function onConversation() {
   scrollToBottom()
 
   try {
-    await fetchChatAPIProcess<Chat.ConversationResponse>({
+    let lastText = ''
-      prompt: message,
+    const fetchChatAPIOnce = async () => {
-      options,
+      await fetchChatAPIProcess<Chat.ConversationResponse>({
-      signal: controller.signal,
+        prompt: message,
-      onDownloadProgress: ({ event }) => {
+        options,
-        const xhr = event.target
+        signal: controller.signal,
-        const { responseText } = xhr
+        onDownloadProgress: ({ event }) => {
-        // Always process the final line
+          const xhr = event.target
-        const lastIndex = responseText.lastIndexOf('\n')
+          const { responseText } = xhr
-        let chunk = responseText
+          // Always process the final line
-        if (lastIndex !== -1)
+          const lastIndex = responseText.lastIndexOf('\n')
-          chunk = responseText.substring(lastIndex)
+          let chunk = responseText
-        try {
+          if (lastIndex !== -1)
-          const data = JSON.parse(chunk)
+            chunk = responseText.substring(lastIndex)
-          updateChat(
+          try {
-            +uuid,
+            const data = JSON.parse(chunk)
-            dataSources.value.length - 1,
+            updateChat(
-            {
+              +uuid,
-              dateTime: new Date().toLocaleString(),
+              dataSources.value.length - 1,
-              text: data.text ?? '',
+              {
-              inversion: false,
+                dateTime: new Date().toLocaleString(),
-              error: false,
+                text: lastText + data.text ?? '',
-              loading: false,
+                inversion: false,
-              conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
+                error: false,
-              requestOptions: { prompt: message, options: { ...options } },
+                loading: false,
-            },
+                conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
-          )
+                requestOptions: { prompt: message, options: { ...options } },
-          scrollToBottom()
+              },
-        }
+            )
-        catch (error) {
+
+            if (openLongReply && data.detail.choices[0].finish_reason === 'length') {
+              options.parentMessageId = data.id
+              lastText = data.text
+              message = ''
+              return fetchChatAPIOnce()
+            }
+
+            scrollToBottom()
+          }
+          catch (error) {
           //
-        }
+          }
-      },
+        },
-    })
+      })
-    scrollToBottom()
+    }
+
+    await fetchChatAPIOnce()
   }
   catch (error: any) {
     const errorMessage = error?.message ?? t('common.wrong')
@@ -180,7 +198,7 @@ async function onRegenerate(index: number) {
 
   const { requestOptions } = dataSources.value[index]
 
-  const message = requestOptions?.prompt ?? ''
+  let message = requestOptions?.prompt ?? ''
 
   let options: Chat.ConversationRequest = {}
 
@@ -204,39 +222,50 @@ async function onRegenerate(index: number) {
   )
 
   try {
-    await fetchChatAPIProcess<Chat.ConversationResponse>({
+    let lastText = ''
-      prompt: message,
+    const fetchChatAPIOnce = async () => {
-      options,
+      await fetchChatAPIProcess<Chat.ConversationResponse>({
-      signal: controller.signal,
+        prompt: message,
-      onDownloadProgress: ({ event }) => {
+        options,
-        const xhr = event.target
+        signal: controller.signal,
-        const { responseText } = xhr
+        onDownloadProgress: ({ event }) => {
-        // Always process the final line
+          const xhr = event.target
-        const lastIndex = responseText.lastIndexOf('\n')
+          const { responseText } = xhr
-        let chunk = responseText
+          // Always process the final line
-        if (lastIndex !== -1)
+          const lastIndex = responseText.lastIndexOf('\n')
-          chunk = responseText.substring(lastIndex)
+          let chunk = responseText
-        try {
+          if (lastIndex !== -1)
-          const data = JSON.parse(chunk)
+            chunk = responseText.substring(lastIndex)
-          updateChat(
+          try {
-            +uuid,
+            const data = JSON.parse(chunk)
-            index,
+            updateChat(
-            {
+              +uuid,
-              dateTime: new Date().toLocaleString(),
+              index,
-              text: data.text ?? '',
+              {
-              inversion: false,
+                dateTime: new Date().toLocaleString(),
-              error: false,
+                text: lastText + data.text ?? '',
-              loading: false,
+                inversion: false,
-              conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
+                error: false,
-              requestOptions: { prompt: message, ...options },
+                loading: false,
-            },
+                conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
-          )
+                requestOptions: { prompt: message, ...options },
-        }
+              },
-        catch (error) {
+            )
-          //
+
-        }
+            if (openLongReply && data.detail.choices[0].finish_reason === 'length') {
-      },
+              options.parentMessageId = data.id
-    })
+              lastText = data.text
+              message = ''
+              return fetchChatAPIOnce()
+            }
+          }
+          catch (error) {
+            //
+          }
+        },
+      })
+    }
+    await fetchChatAPIOnce()
   }
   catch (error: any) {
     if (error.message === 'canceled') {
@@ -284,7 +313,9 @@ function handleExport() {
       try {
         d.loading = true
         const ele = document.getElementById('image-wrapper')
-        const canvas = await html2canvas(ele as HTMLDivElement)
+        const canvas = await html2canvas(ele as HTMLDivElement, {
+          useCORS: true,
+        })
         const imgUrl = canvas.toDataURL('image/png')
         const tempLink = document.createElement('a')
         tempLink.style.display = 'none'
@@ -373,16 +404,10 @@ const buttonDisabled = computed(() => {
   return loading.value || !prompt.value || prompt.value.trim() === ''
 })
 
-const wrapClass = computed(() => {
-  if (isMobile.value)
-    return ['pt-14']
-  return []
-})
-
 const footerClass = computed(() => {
   let classes = ['p-4']
   if (isMobile.value)
-    classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-4', 'overflow-hidden']
+    classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-3', 'overflow-hidden']
   return classes
 })
 
@@ -397,14 +422,24 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="flex flex-col w-full h-full" :class="wrapClass">
+  <div class="flex flex-col w-full h-full">
+    <HeaderComponent
+      v-if="isMobile"
+      :using-context="usingContext"
+      @export="handleExport"
+      @toggle-using-context="toggleUsingContext"
+    />
     <main class="flex-1 overflow-hidden">
       <div
         id="scrollRef"
         ref="scrollRef"
         class="h-full overflow-hidden overflow-y-auto"
       >
-        <div id="image-wrapper" class="w-full max-w-screen-xl m-auto" :class="[isMobile ? 'p-2' : 'p-4']">
+        <div
+          id="image-wrapper"
+          class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
+          :class="[isMobile ? 'p-2' : 'p-4']"
+        >
           <template v-if="!dataSources.length">
             <div class="flex items-center justify-center mt-4 text-center text-neutral-300">
               <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
@@ -445,11 +480,16 @@ onUnmounted(() => {
               <SvgIcon icon="ri:delete-bin-line" />
             </span>
           </HoverButton>
-          <HoverButton @click="handleExport">
+          <HoverButton v-if="!isMobile" @click="handleExport">
             <span class="text-xl text-[#4f555e] dark:text-white">
               <SvgIcon icon="ri:download-2-line" />
             </span>
           </HoverButton>
+          <HoverButton v-if="!isMobile" @click="toggleUsingContext">
+            <span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
+              <SvgIcon icon="ri:chat-history-line" />
+            </span>
+          </HoverButton>
           <NInput
             v-model:value="prompt"
             type="textarea"

src/views/chat/layout/Layout.vue

@@ -3,7 +3,6 @@ import { computed } from 'vue'
 import { NLayout, NLayoutContent } from 'naive-ui'
 import { useRouter } from 'vue-router'
 import Sider from './sider/index.vue'
-import Header from './header/index.vue'
 import Permission from './Permission.vue'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { useAppStore, useAuthStore, useChatStore } from '@/store'
@@ -40,7 +39,6 @@ const getContainerClass = computed(() => {
     <div class="h-full overflow-hidden" :class="getMobileClass">
       <NLayout class="z-40 transition" :class="getContainerClass" has-sider>
         <Sider />
-        <Header v-if="isMobile" />
         <NLayoutContent class="h-full">
           <RouterView v-slot="{ Component, route }">
             <component :is="Component" :key="route.fullPath" />

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

@@ -1,55 +0,0 @@
-<script lang="ts" setup>
-import { computed, nextTick } from 'vue'
-import { SvgIcon } from '@/components/common'
-import { useAppStore, useChatStore } from '@/store'
-
-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 onScrollToBottom() {
-  const scrollRef = document.querySelector('#scrollRef')
-  if (scrollRef)
-    nextTick(() => scrollRef.scrollTop = scrollRef.scrollHeight)
-}
-</script>
-
-<template>
-  <header
-    class="fixed 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 h-14">
-      <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>
-      <h1
-        class="flex-1 px-4 overflow-hidden text-center cursor-pointer select-none text-ellipsis whitespace-nowrap"
-        @dblclick="onScrollToTop"
-      >
-        {{ currentChatHistory?.title ?? '' }}
-      </h1>
-      <button
-        class="flex items-center justify-center w-11 h-11"
-        @click="onScrollToBottom"
-      >
-        <SvgIcon class="text-2xl" icon="ri:arrow-down-s-line" />
-      </button>
-    </div>
-  </header>
-</template>

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

@@ -9,8 +9,9 @@ const show = ref(false)
 
 <template>
   <footer class="flex items-center justify-between min-w-0 p-4 overflow-hidden border-t dark:border-neutral-800">
-    <UserAvatar />
+    <div class="flex-1 flex-shrink-0 overflow-hidden">
-
+      <UserAvatar />
+    </div>
     <HoverButton :tooltip="$t('setting.setting')" @click="show = true">
       <span class="text-xl text-[#4f555e] dark:text-white">
         <SvgIcon icon="ri:settings-4-line" />

vite.config.ts

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