{
+ onClickCapture={() => {
const newTopic = prompt(Locale.Chat.Rename, session.topic);
if (newTopic && newTopic !== session.topic) {
chatStore.updateCurrentSession(
@@ -527,7 +527,7 @@ export function Chat(props: {}) {
}
+ icon={}
bordered
title={Locale.Chat.Actions.ChatList}
onClick={() => {
diff --git a/app/components/home.tsx b/app/components/home.tsx
index 5a3db1318..e4d6a2045 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -95,6 +95,7 @@ function _Home() {
state.removeSession,
],
);
+ const chatStore = useChatStore();
const loading = !useHasHydrated();
const [sidebarCollapse, setSideBarCollapse] = useChatStore((state) => [
state.sidebarCollapse,
@@ -211,11 +212,7 @@ function _Home() {
>
}
- onClick={() => {
- if (confirm(Locale.Home.DeleteChat)) {
- removeSession(currentIndex);
- }
- }}
+ onClick={chatStore.deleteSession}
/>
diff --git a/app/components/input-range.module.scss b/app/components/input-range.module.scss
new file mode 100644
index 000000000..5a555a457
--- /dev/null
+++ b/app/components/input-range.module.scss
@@ -0,0 +1,7 @@
+.input-range {
+ border: var(--border-in-light);
+ border-radius: 10px;
+ padding: 5px 15px 5px 10px;
+ font-size: 12px;
+ display: flex;
+}
diff --git a/app/components/input-range.tsx b/app/components/input-range.tsx
new file mode 100644
index 000000000..a8ee9532b
--- /dev/null
+++ b/app/components/input-range.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import styles from "./input-range.module.scss";
+
+interface InputRangeProps {
+ onChange: React.ChangeEventHandler
;
+ title?: string;
+ value: number | string;
+ className?: string;
+ min: string;
+ max: string;
+ step: string;
+}
+
+export function InputRange({
+ onChange,
+ title,
+ value,
+ className,
+ min,
+ max,
+ step,
+}: InputRangeProps) {
+ return (
+
+ {title || value}
+
+
+ );
+}
diff --git a/app/components/settings.tsx b/app/components/settings.tsx
index a14f6473d..ed1c28ee5 100644
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -32,6 +32,7 @@ import { UPDATE_URL } from "../constant";
import { SearchService, usePromptStore } from "../store/prompt";
import { requestUsage } from "../requests";
import { ErrorBoundary } from "./error";
+import { InputRange } from "./input-range";
function SettingItem(props: {
title: string;
@@ -274,8 +275,7 @@ export function Settings(props: { closeSettings: () => void }) {
title={Locale.Settings.FontSize.Title}
subTitle={Locale.Settings.FontSize.SubTitle}
>
- void }) {
(config.fontSize = Number.parseInt(e.currentTarget.value)),
)
}
- >
+ >
@@ -407,8 +407,7 @@ export function Settings(props: { closeSettings: () => void }) {
title={Locale.Settings.HistoryCount.Title}
subTitle={Locale.Settings.HistoryCount.SubTitle}
>
- void }) {
(config.historyMessageCount = e.target.valueAsNumber),
)
}
- >
+ >
void }) {
title={Locale.Settings.Temperature.Title}
subTitle={Locale.Settings.Temperature.SubTitle}
>
- void }) {
)),
);
}}
- >
+ >
void }) {
title={Locale.Settings.PresencePenlty.Title}
subTitle={Locale.Settings.PresencePenlty.SubTitle}
>
- void }) {
)),
);
}}
- >
+ >
diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss
index 10163e993..83eb614f7 100644
--- a/app/components/ui-lib.module.scss
+++ b/app/components/ui-lib.module.scss
@@ -135,9 +135,25 @@
box-shadow: var(--card-shadow);
border: var(--border-in-light);
color: var(--black);
- padding: 10px 30px;
+ padding: 10px 20px;
border-radius: 50px;
margin-bottom: 20px;
+ display: flex;
+ align-items: center;
+
+ .toast-action {
+ padding-left: 20px;
+ color: var(--primary);
+ opacity: 0.8;
+ border: 0;
+ background: none;
+ cursor: pointer;
+ font-family: inherit;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
}
}
@@ -149,6 +165,7 @@
background-color: var(--white);
color: var(--black);
resize: none;
+ min-width: 50px;
}
@media only screen and (max-width: 600px) {
diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index 6761e7f97..a72aa868f 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -110,17 +110,37 @@ export function showModal(props: ModalProps) {
root.render(
);
}
-export type ToastProps = { content: string };
+export type ToastProps = {
+ content: string;
+ action?: {
+ text: string;
+ onClick: () => void;
+ };
+};
export function Toast(props: ToastProps) {
return (
-
{props.content}
+
+ {props.content}
+ {props.action && (
+
+ )}
+
);
}
-export function showToast(content: string, delay = 3000) {
+export function showToast(
+ content: string,
+ action?: ToastProps["action"],
+ delay = 3000,
+) {
const div = document.createElement("div");
div.className = styles.show;
document.body.appendChild(div);
@@ -139,7 +159,7 @@ export function showToast(content: string, delay = 3000) {
close();
}, delay);
- root.render(
);
+ root.render(
);
}
export type InputProps = React.HTMLProps
& {
diff --git a/app/icons/return.svg b/app/icons/return.svg
new file mode 100644
index 000000000..eba5e78f9
--- /dev/null
+++ b/app/icons/return.svg
@@ -0,0 +1,21 @@
+
\ No newline at end of file
diff --git a/app/locales/cn.ts b/app/locales/cn.ts
index 033e1c2cf..e21272a12 100644
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -47,6 +47,8 @@ const cn = {
Home: {
NewChat: "新的聊天",
DeleteChat: "确认删除选中的对话？",
+ DeleteToast: "已删除会话",
+ Revert: "撤销",
},
Settings: {
Title: "设置",
diff --git a/app/locales/en.ts b/app/locales/en.ts
index aefc2e57c..61d20b60f 100644
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -50,6 +50,8 @@ const en: LocaleType = {
Home: {
NewChat: "New Chat",
DeleteChat: "Confirm to delete the selected conversation?",
+ DeleteToast: "Chat Deleted",
+ Revert: "Revert",
},
Settings: {
Title: "Settings",
diff --git a/app/locales/es.ts b/app/locales/es.ts
index 6997d5f6d..5a83cb55c 100644
--- a/app/locales/es.ts
+++ b/app/locales/es.ts
@@ -50,6 +50,8 @@ const es: LocaleType = {
Home: {
NewChat: "Nuevo chat",
DeleteChat: "¿Confirmar eliminación de la conversación seleccionada?",
+ DeleteToast: "Chat Deleted",
+ Revert: "Revert",
},
Settings: {
Title: "Configuración",
diff --git a/app/locales/it.ts b/app/locales/it.ts
index 95e6747ba..7108090eb 100644
--- a/app/locales/it.ts
+++ b/app/locales/it.ts
@@ -50,6 +50,8 @@ const it: LocaleType = {
Home: {
NewChat: "Nuova Chat",
DeleteChat: "Confermare la cancellazione della conversazione selezionata?",
+ DeleteToast: "Chat Deleted",
+ Revert: "Revert",
},
Settings: {
Title: "Impostazioni",
diff --git a/app/locales/tw.ts b/app/locales/tw.ts
index 4340fe2c8..ff1794b55 100644
--- a/app/locales/tw.ts
+++ b/app/locales/tw.ts
@@ -48,6 +48,8 @@ const tw: LocaleType = {
Home: {
NewChat: "新的對話",
DeleteChat: "確定要刪除選取的對話嗎？",
+ DeleteToast: "已刪除對話",
+ Revert: "撤銷",
},
Settings: {
Title: "設定",
diff --git a/app/requests.ts b/app/requests.ts
index 724f0d013..5ca5e217a 100644
--- a/app/requests.ts
+++ b/app/requests.ts
@@ -50,11 +50,10 @@ function getHeaders() {
export function requestOpenaiClient(path: string) {
return (body: any, method = "POST") =>
- fetch("/api/openai", {
+ fetch("/api/openai?_vercel_no_cache=1", {
method,
headers: {
"Content-Type": "application/json",
- "Cache-Control": "no-cache",
path,
...getHeaders(),
},
@@ -81,7 +80,7 @@ export async function requestUsage() {
.getDate()
.toString()
.padStart(2, "0")}`;
- const ONE_DAY = 24 * 60 * 60 * 1000;
+ const ONE_DAY = 2 * 24 * 60 * 60 * 1000;
const now = new Date(Date.now() + ONE_DAY);
const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
const startDate = formatDate(startOfMonth);
diff --git a/app/store/app.ts b/app/store/app.ts
index 92c8f865d..e6e391162 100644
--- a/app/store/app.ts
+++ b/app/store/app.ts
@@ -7,9 +7,10 @@ import {
requestChatStream,
requestWithPrompt,
} from "../requests";
-import { trimTopic } from "../utils";
+import { isMobileScreen, trimTopic } from "../utils";
import Locale from "../locales";
+import { showToast } from "../components/ui-lib";
if (!Array.prototype.at) {
require("array.prototype.at/auto");
@@ -208,6 +209,7 @@ interface ChatStore {
moveSession: (from: number, to: number) => void;
selectSession: (index: number) => void;
newSession: () => void;
+ deleteSession: () => void;
currentSession: () => ChatSession;
onNewMessage: (message: Message) => void;
onUserInput: (content: string) => Promise;
@@ -329,6 +331,26 @@ export const useChatStore = create()(
}));
},
+ deleteSession() {
+ const deletedSession = get().currentSession();
+ const index = get().currentSessionIndex;
+ const isLastSession = get().sessions.length === 1;
+ if (!isMobileScreen() || confirm(Locale.Home.DeleteChat)) {
+ get().removeSession(index);
+ }
+ showToast(Locale.Home.DeleteToast, {
+ text: Locale.Home.Revert,
+ onClick() {
+ set((state) => ({
+ sessions: state.sessions
+ .slice(0, index)
+ .concat([deletedSession])
+ .concat(state.sessions.slice(index + Number(isLastSession))),
+ }));
+ },
+ });
+ },
+
currentSession() {
let index = get().currentSessionIndex;
const sessions = get().sessions;
diff --git a/app/styles/globals.scss b/app/styles/globals.scss
index f6d118810..2b4b11fbf 100644
--- a/app/styles/globals.scss
+++ b/app/styles/globals.scss
@@ -161,19 +161,11 @@ input[type="checkbox"]:checked::after {
input[type="range"] {
appearance: none;
- border: var(--border-in-light);
- border-radius: 10px;
- padding: 5px 15px 5px 10px;
background-color: var(--white);
color: var(--black);
-
- &::before {
- content: attr(value);
- font-size: 12px;
- }
}
-input[type="range"]::-webkit-slider-thumb {
+@mixin thumb() {
appearance: none;
height: 8px;
width: 20px;
@@ -182,11 +174,36 @@ input[type="range"]::-webkit-slider-thumb {
cursor: pointer;
transition: all ease 0.3s;
margin-left: 5px;
+ border: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+ @include thumb();
+}
+
+input[type="range"]::-moz-range-thumb {
+ @include thumb();
+}
+
+input[type="range"]::-ms-thumb {
+ @include thumb();
+}
+
+@mixin thumbHover() {
+ transform: scaleY(1.2);
+ width: 24px;
}
input[type="range"]::-webkit-slider-thumb:hover {
- transform: scaleY(1.2);
- width: 24px;
+ @include thumbHover();
+}
+
+input[type="range"]::-moz-range-thumb:hover {
+ @include thumbHover();
+}
+
+input[type="range"]::-ms-thumb:hover {
+ @include thumbHover();
}
input[type="number"],
diff --git a/app/utils.ts b/app/utils.ts
index 68dcb968b..bb44e072d 100644
--- a/app/utils.ts
+++ b/app/utils.ts
@@ -7,11 +7,9 @@ export function trimTopic(topic: string) {
}
export async function copyToClipboard(text: string) {
- if (navigator.clipboard) {
- navigator.clipboard.writeText(text).catch((err) => {
- console.error("Failed to copy: ", err);
- });
- } else {
+ try {
+ await navigator.clipboard.writeText(text);
+ } catch (error) {
const textArea = document.createElement("textarea");
textArea.value = text;
document.body.appendChild(textArea);
@@ -19,11 +17,11 @@ export async function copyToClipboard(text: string) {
textArea.select();
try {
document.execCommand("copy");
- console.log("Text copied to clipboard");
- } catch (err) {
- console.error("Failed to copy: ", err);
+ } catch (error) {
+ showToast(Locale.Copy.Failed);
}
- document.body.removeChild(textArea);
+ } finally {
+ showToast(Locale.Copy.Success);
}
}
diff --git a/docs/faq-cn.md b/docs/faq-cn.md
index 2b7b45871..88293b9c6 100644
--- a/docs/faq-cn.md
+++ b/docs/faq-cn.md
@@ -1,7 +1,21 @@
# 常见问题
+
> We are sorry that there is currently no English version of the FAQ. English users can use translation tools to access this document. We look forward to receiving your PR for an English version of the documentation.
-
+## 如何快速获得帮助？
+1. 询问ChatGPT / Bing / 百度 / Google等。
+2. 询问网友。请提供问题的背景信息和碰到问题的详细描述。高质量的提问容易获得有用的答案。
+
+# 部署相关问题
+
+## 为什么 Docker 部署版本一直提示更新
+Docker 版本相当于稳定版，latest Docker 总是与 latest release version 一致，目前我们的发版频率是一到两天发一次，所以 Docker 版本会总是落后最新的提交一到两天，这在预期内。
+
+## 如何部署在Vercel上
+1. 注册Github账号，fork该项目
+2. 注册Vercel（需手机验证，可以用中国号码），连接你的Github账户
+3. Vercel上新建项目，选择你在Github fork的项目，按需填写环境变量，开始部署。部署之后，你可以在有梯子的条件下，通过vercel提供的域名访问你的项目。
+4. 如果需要在国内无墙访问：在你的域名管理网站，添加一条域名的CNAME记录，指向cname.vercel-dns.com。之后在Vercel上设置你的域名访问。
## 如何修改 Vercel 环境变量
- 进入 vercel 的控制台页面；
@@ -9,8 +23,11 @@
- 点击页面头部的 Settings 选项；
- 找到侧边栏的 Environment Variables 选项；
- 修改对应的值即可。
-
-
+
+## 环境变量CODE是什么？必须设置吗？
+这是你自定义的访问密码，你可以选择：
+1. 不设置，删除该环境变量即可。谨慎：此时任何人可以访问你的项目。
+2. 部署项目时，设置环境变量CODE（支持多个密码逗号分隔）。设置访问密码后，用户需要在设置界面输入访问密码才可以使用。参见[相关说明](https://github.com/Yidadaa/ChatGPT-Next-Web/blob/main/README_CN.md#%E9%85%8D%E7%BD%AE%E9%A1%B5%E9%9D%A2%E8%AE%BF%E9%97%AE%E5%AF%86%E7%A0%81)
## 为什么我部署的版本没有流式响应
> 相关讨论：[#386](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/386)
@@ -28,7 +45,15 @@ keepalive_timeout 300; # 设定keep-alive超时时间为65秒
如果你是在 netlify 部署，此问题依然等待解决，请耐心等待。
-
+## 我部署好了，但是无法访问
+请检查排除以下问题：
+- 服务启动了吗？
+- 端口正确映射了吗？
+- 防火墙开放端口了吗？
+- 到服务器的路由通吗？
+- 域名正确解析了吗？
+
+# 使用相关问题
## 为什么会一直提示“出错了，稍后重试吧”
原因可能有很多，请依次排查：
@@ -37,16 +62,77 @@ keepalive_timeout 300; # 设定keep-alive超时时间为65秒
- 请检查 api key 是否可用；
- 如果经历了上述步骤依旧无法确定问题，请在 issue 区提交一个新 issue，并附上 vercel 的 runtime log 或者 docker 运行时的 log。
-
-
-## 为什么 Docker 部署版本一直提示更新
-Docker 版本相当于稳定版，latest Docker 总是与 latest release version 一致，目前我们的发版频率是一到两天发一次，所以 Docker 版本会总是落后最新的提交一到两天，这在预期内。
-
-
-
-
## 为什么 ChatGPT 的回复会乱码
设置界面 - 模型设置项中，有一项为 `temperature`，如果此值大于 1，那么就有可能造成回复乱码，将其调回 1 以内即可。
+## 使用时提示“现在是未授权状态，请在设置页输入访问密码”？
+项目通过环境变量CODE设置了访问密码。第一次使用时，需要到设置中，输入访问码才可以使用。
+
+## 使用时提示"You exceeded your current quota, ..."
+API KEY有问题。余额不足。
+
+## 什么是代理，如何使用？
+由于OpenAI的IP限制，中国和其他一些国家/地区无法直接连接OpenAI API，需要通过代理。你可以使用代理服务器（正向代理），或者已经设置好的OpenAI API反向代理。
+- 正向代理例子：科学上网梯子。docker部署的情况下，设置环境变量HTTP_PROXY为你的代理地址（http://地址:端口）。
+- 反向代理例子：可以用别人搭建的代理地址，或者通过Cloudflare免费设置。设置项目环境变量BASE_URL为你的代理地址。
+
+## 国内服务器可以部署吗？
+可以但需要解决的问题：
+- 需要代理才能连接github和openAI等网站；
+- 国内服务器要设置域名解析的话需要备案；
+- 国内政策限制代理访问外网/ChatGPT相关应用，可能被封。
+
+# 网络服务相关问题
+## Cloudflare是什么？
+Cloudflare（CF）是一个提供CDN，域名管理，静态页面托管，边缘计算函数部署等的网络服务供应商。常见的用途：购买和/或托管你的域名（解析、动态域名等），给你的服务器套上CDN（可以隐藏ip免被墙），部署网站（CF Pages）。CF免费提供大多数服务。
+
+## Vercel是什么？
+Vercel 是一个全球化的云平台，旨在帮助开发人员更快地构建和部署现代 Web 应用程序。本项目以及许多Web应用可以一键免费部署在Vercel上。无需懂代码，无需懂linux，无需服务器，无需付费，无需设置OpenAI API代理。缺点是需要绑定域名才可以在国内无墙访问。
+
+## 如何获得一个域名？
+1. 自己去域名供应商处注册，国外有Namesilo（支持支付宝）, Cloudflare等等，国内有万网等等；
+2. 免费的域名供应商：eu.org(二级域名)等；
+3. 问朋友要一个免费的二级域名。
+
+## 如何获得一台服务器
+- 国外服务器供应商举例：亚马逊云，谷歌云，Vultr，Bandwagon，Hostdare，等等；
+国外服务器事项：服务器线路影响国内访问速度，推荐CN2 GIA和CN2线路的服务器。若服务器在国内访问困难（丢包严重等），可以尝试套CDN（Cloudflare等供应商）。
+- 国内服务器供应商：阿里云，腾讯等；
+国内服务器事项：解析域名需要备案；国内服务器带宽较贵；访问国外网站（Github, openAI等）需要代理。
+
+# OpenAI相关问题
+## 如何注册OpenAI账号？
+去chat.openai.com注册。你需要：
+- 一个良好的梯子（OpenAI支持地区原生IP地址）
+- 一个支持的邮箱（例如Gmail或者公司/学校邮箱，非Outlook或qq邮箱）
+- 接收短信认证的方式（例如SMS-activate网站）
+
+## 怎么开通OpenAI API? 怎么查询API余额？
+官网地址（需梯子）：https://platform.openai.com/account/usage
+有网友搭建了无需梯子的余额查询代理，请询问网友获取。请鉴别来源是否可靠，以免API Key泄露。
+
+## 我新注册的OpenAI账号怎么没有API余额？
+（4月6日更新）新注册账号通常会在24小时后显示API余额。当前新注册账号赠送5美元余额。
+
+## 如何给OpenAI API充值？
+OpenAI只接受指定地区的信用卡（中国信用卡无法使用）。一些途径举例：
+1. Depay虚拟信用卡
+2. 申请国外信用卡
+3. 网上找人代充
+
+## 如何使用GPT-4的API访问？
+（4月6日更新）GPT-4的API访问需要单独申请。到以下地址填写你的信息进入申请队列waitlist（准备好你的OpenAI组织ID）：https://openai.com/waitlist/gpt-4-api
+之后等待邮件消息。
+
## 如何使用 Azure OpenAI 接口
-请参考：[#371](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/371)
\ No newline at end of file
+请参考：[#371](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/371)
+
+## 为什么我的 Token 消耗得这么快？
+> 相关讨论：[#518](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/518)
+- 如果你有 GPT 4 的权限，并且日常在使用 GPT 4 api，那么由于 GPT 4 价格是 GPT 3.5 的 15 倍左右，你的账单金额会急速膨胀；
+- 如果你在使用 GPT 3.5，并且使用频率并不高，仍然发现自己的账单金额在飞快增加，那么请马上按照以下步骤排查：
+ - 去 openai 官网查看你的 api key 消费记录，如果你的 token 每小时都有消费，并且每次都消耗了上万 token，那你的 key 一定是泄露了，请立即删除重新生成。**不要在乱七八糟的网站上查余额。**
+ - 如果你的密码设置很短，比如 5 位以内的字母，那么爆破成本是非常低的，建议你搜索一下 docker 的日志记录，确认是否有人大量尝试了密码组合，关键字：got access code
+- 通过上述两个方法就可以定位到你的 token 被快速消耗的原因：
+ - 如果 openai 消费记录异常，但是 docker 日志没有问题，那么说明是 api key 泄露；
+ - 如果 docker 日志发现大量 got access code 爆破记录，那么就是密码被爆破了。