Compare commits
30 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
24c203f8d4 | ||
|
|
cbcbdda4c0 | ||
|
|
a2fcd31f24 | ||
|
|
07b92d4ede | ||
|
|
ed4ff67760 | ||
|
|
9c4644c969 | ||
|
|
dd91c2a4e0 | ||
|
|
7e8e15a628 | ||
|
|
076c56d1d9 | ||
|
|
133a24e25f | ||
|
|
73a67b8f64 | ||
|
|
222b3eaa4c | ||
|
|
c4baccdc48 | ||
|
|
7021a08ecf | ||
|
|
e88b9bef13 | ||
|
|
c17cc16c0e | ||
|
|
d7d037618f | ||
|
|
01edad7717 | ||
|
|
eff787a2b7 | ||
|
|
8616526136 | ||
|
|
32e3963390 | ||
|
|
7d52e6dd1e | ||
|
|
ba41015df8 | ||
|
|
f084460d1c | ||
|
|
a4ef23d603 | ||
|
|
d3daa654a7 | ||
|
|
9576edf26f | ||
|
|
5b74ac9cc6 | ||
|
|
444e2ec2e8 | ||
|
|
60b7874f65 |
@@ -1,6 +1,6 @@
|
||||
**/node_modules
|
||||
*/node_modules
|
||||
node_modules
|
||||
Dockerfile
|
||||
.git
|
||||
.husky
|
||||
.github
|
||||
.vscode
|
||||
.*
|
||||
*/.*
|
||||
|
||||
3
.env
3
.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
|
||||
|
||||
3
.gitignore
vendored
3
.gitignore
vendored
@@ -27,3 +27,6 @@ coverage
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# Environment variables files
|
||||
/service/.env
|
||||
|
||||
61
CHANGELOG.md
61
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`
|
||||
|
||||
14
Dockerfile
14
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"]
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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 部署
|
||||
|
||||
[](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` 文件夹内的文件复制到你网站服务的根目录下
|
||||
|
||||
|
||||
@@ -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: chatgpt/nginx
|
||||
image: nginx:alpine
|
||||
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
|
||||
|
||||
@@ -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;"]
|
||||
@@ -3,9 +3,9 @@ server {
|
||||
server_name localhost;
|
||||
charset utf-8;
|
||||
error_page 500 502 503 504 /50x.html;
|
||||
location = / {
|
||||
root /usr/share/nginx/html;
|
||||
index index.html index.htm;
|
||||
location / {
|
||||
root /usr/share/nginx/html;
|
||||
try_files $uri /index.html;
|
||||
}
|
||||
|
||||
location /api {
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
### docker-compose 部署教程
|
||||
- 将打包好的前端文件放到 `nginx/html` 目录下
|
||||
- ```shell
|
||||
# 打包启动
|
||||
docker-compose build
|
||||
# 启动
|
||||
docker-compose up -d
|
||||
```
|
||||
- ```shell
|
||||
|
||||
@@ -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": {
|
||||
|
||||
1852
pnpm-lock.yaml
generated
1852
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
BIN
public/pwa-192x192.png
Normal file
BIN
public/pwa-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
public/pwa-512x512.png
Normal file
BIN
public/pwa-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
@@ -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=
|
||||
|
||||
@@ -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",
|
||||
|
||||
8
service/pnpm-lock.yaml
generated
8
service/pnpm-lock.yaml
generated
@@ -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:
|
||||
resolution: {integrity: sha512-Bjh7Y15QIsZ+SkQvbbZGymv1PGxkZ7X1vwqAwvyqaMMhbipU4kxht/GL62VCxhoUCXPwxTfScbFeNFtNldgqaw==}
|
||||
/chatgpt/5.0.9:
|
||||
resolution: {integrity: sha512-H0MMegLKcYyYh3LeFO4ubIdJSiSAl4rRjTeXf3KjHfGXDM7QZ1EkiTH9RuIoaNzOm8rJTn4QEhrwBbOIpbalxw==}
|
||||
engines: {node: '>=14'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
|
||||
@@ -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: {
|
||||
model: 'gpt-3.5-turbo',
|
||||
},
|
||||
completionParams: { model },
|
||||
debug: false,
|
||||
}
|
||||
|
||||
@@ -86,8 +87,8 @@ async function chatReplyProcess(
|
||||
lastContext?: { conversationId?: string; parentMessageId?: string },
|
||||
process?: (chat: ChatMessage) => void,
|
||||
) {
|
||||
if (!message)
|
||||
return sendResponse({ type: 'Fail', message: 'Message is empty' })
|
||||
// if (!message)
|
||||
// return sendResponse({ type: 'Fail', message: 'Message is empty' })
|
||||
|
||||
try {
|
||||
let options: SendMessageOptions = { timeoutMs }
|
||||
|
||||
@@ -11,8 +11,8 @@ const userInfo = computed(() => userStore.userInfo)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center">
|
||||
<div class="w-10 h-10 overflow-hidden rounded-full">
|
||||
<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"
|
||||
@@ -25,11 +25,11 @@ const userInfo = computed(() => userStore.userInfo)
|
||||
<NAvatar size="large" round :src="defaultAvatar" />
|
||||
</template>
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<h2 class="font-bold text-md">
|
||||
<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">
|
||||
<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"
|
||||
|
||||
@@ -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?',
|
||||
|
||||
@@ -27,6 +27,9 @@ export default {
|
||||
exportImageConfirm: '是否将会话保存为图片?',
|
||||
exportSuccess: '保存成功',
|
||||
exportFailed: '保存失败',
|
||||
usingContext: '上下文模式',
|
||||
turnOnContext: '当前模式下, 发送消息会携带之前的聊天记录',
|
||||
turnOffContext: '当前模式下, 发送消息不会携带之前的聊天记录',
|
||||
deleteMessage: '删除消息',
|
||||
deleteMessageConfirm: '是否删除此消息?',
|
||||
deleteHistoryConfirm: '确定删除此记录?',
|
||||
|
||||
@@ -27,6 +27,9 @@ export default {
|
||||
exportImageConfirm: '是否將對話儲存為圖片?',
|
||||
exportSuccess: '儲存成功',
|
||||
exportFailed: '儲存失敗',
|
||||
usingContext: '上下文模式',
|
||||
turnOnContext: '在當前模式下, 發送訊息會攜帶之前的聊天記錄。',
|
||||
turnOffContext: '在當前模式下, 發送訊息不會攜帶之前的聊天記錄。',
|
||||
deleteMessage: '刪除訊息',
|
||||
deleteMessageConfirm: '是否刪除此訊息?',
|
||||
deleteHistoryConfirm: '確定刪除此紀錄?',
|
||||
|
||||
@@ -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()
|
||||
}
|
||||
},
|
||||
|
||||
@@ -6,4 +6,5 @@ body,
|
||||
|
||||
body {
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
78
src/views/chat/components/Header/index.vue
Normal file
78
src/views/chat/components/Header/index.vue
Normal file
@@ -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>
|
||||
@@ -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 },
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
}
|
||||
|
||||
21
src/views/chat/hooks/useUsingContext.ts
Normal file
21
src/views/chat/hooks/useUsingContext.ts
Normal file
@@ -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,
|
||||
}
|
||||
}
|
||||
@@ -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>({
|
||||
prompt: message,
|
||||
options,
|
||||
signal: controller.signal,
|
||||
onDownloadProgress: ({ event }) => {
|
||||
const xhr = event.target
|
||||
const { responseText } = xhr
|
||||
// Always process the final line
|
||||
const lastIndex = responseText.lastIndexOf('\n')
|
||||
let chunk = responseText
|
||||
if (lastIndex !== -1)
|
||||
chunk = responseText.substring(lastIndex)
|
||||
try {
|
||||
const data = JSON.parse(chunk)
|
||||
updateChat(
|
||||
+uuid,
|
||||
dataSources.value.length - 1,
|
||||
{
|
||||
dateTime: new Date().toLocaleString(),
|
||||
text: data.text ?? '',
|
||||
inversion: false,
|
||||
error: false,
|
||||
loading: false,
|
||||
conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
|
||||
requestOptions: { prompt: message, options: { ...options } },
|
||||
},
|
||||
)
|
||||
scrollToBottom()
|
||||
}
|
||||
catch (error) {
|
||||
let lastText = ''
|
||||
const fetchChatAPIOnce = async () => {
|
||||
await fetchChatAPIProcess<Chat.ConversationResponse>({
|
||||
prompt: message,
|
||||
options,
|
||||
signal: controller.signal,
|
||||
onDownloadProgress: ({ event }) => {
|
||||
const xhr = event.target
|
||||
const { responseText } = xhr
|
||||
// Always process the final line
|
||||
const lastIndex = responseText.lastIndexOf('\n')
|
||||
let chunk = responseText
|
||||
if (lastIndex !== -1)
|
||||
chunk = responseText.substring(lastIndex)
|
||||
try {
|
||||
const data = JSON.parse(chunk)
|
||||
updateChat(
|
||||
+uuid,
|
||||
dataSources.value.length - 1,
|
||||
{
|
||||
dateTime: new Date().toLocaleString(),
|
||||
text: lastText + data.text ?? '',
|
||||
inversion: false,
|
||||
error: false,
|
||||
loading: false,
|
||||
conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
|
||||
requestOptions: { prompt: message, options: { ...options } },
|
||||
},
|
||||
)
|
||||
|
||||
if (openLongReply && data.detail.choices[0].finish_reason === 'length') {
|
||||
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>({
|
||||
prompt: message,
|
||||
options,
|
||||
signal: controller.signal,
|
||||
onDownloadProgress: ({ event }) => {
|
||||
const xhr = event.target
|
||||
const { responseText } = xhr
|
||||
// Always process the final line
|
||||
const lastIndex = responseText.lastIndexOf('\n')
|
||||
let chunk = responseText
|
||||
if (lastIndex !== -1)
|
||||
chunk = responseText.substring(lastIndex)
|
||||
try {
|
||||
const data = JSON.parse(chunk)
|
||||
updateChat(
|
||||
+uuid,
|
||||
index,
|
||||
{
|
||||
dateTime: new Date().toLocaleString(),
|
||||
text: data.text ?? '',
|
||||
inversion: false,
|
||||
error: false,
|
||||
loading: false,
|
||||
conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
|
||||
requestOptions: { prompt: message, ...options },
|
||||
},
|
||||
)
|
||||
}
|
||||
catch (error) {
|
||||
//
|
||||
}
|
||||
},
|
||||
})
|
||||
let lastText = ''
|
||||
const fetchChatAPIOnce = async () => {
|
||||
await fetchChatAPIProcess<Chat.ConversationResponse>({
|
||||
prompt: message,
|
||||
options,
|
||||
signal: controller.signal,
|
||||
onDownloadProgress: ({ event }) => {
|
||||
const xhr = event.target
|
||||
const { responseText } = xhr
|
||||
// Always process the final line
|
||||
const lastIndex = responseText.lastIndexOf('\n')
|
||||
let chunk = responseText
|
||||
if (lastIndex !== -1)
|
||||
chunk = responseText.substring(lastIndex)
|
||||
try {
|
||||
const data = JSON.parse(chunk)
|
||||
updateChat(
|
||||
+uuid,
|
||||
index,
|
||||
{
|
||||
dateTime: new Date().toLocaleString(),
|
||||
text: lastText + data.text ?? '',
|
||||
inversion: false,
|
||||
error: false,
|
||||
loading: false,
|
||||
conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
|
||||
requestOptions: { prompt: message, ...options },
|
||||
},
|
||||
)
|
||||
|
||||
if (openLongReply && data.detail.choices[0].finish_reason === 'length') {
|
||||
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"
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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>
|
||||
@@ -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" />
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user