diff --git a/.github/workflows/sync.yml b/.github/workflows/sync.yml index 52feae50e..15d324074 100644 --- a/.github/workflows/sync.yml +++ b/.github/workflows/sync.yml @@ -31,3 +31,10 @@ jobs: # Set test_mode true to run tests instead of the true action!! test_mode: false + + - name: Sync check + if: failure() + run: | + echo "::error::由于权限不足，导致同步失败（这是预期的行为），请前往仓库首页手动执行[Sync fork]。" + echo "::error::Due to insufficient permissions, synchronization failed (as expected). Please go to the repository homepage and manually perform [Sync fork]." + exit 1 diff --git a/README.md b/README.md index b2d1e48ce..3b6308be9 100644 --- a/README.md +++ b/README.md @@ -3,11 +3,15 @@

ChatGPT Next Web

+English / [简体中文](./README_CN.md) + One-Click to deploy well-designed ChatGPT web UI on Vercel. 一键免费部署你的私人 ChatGPT 网页应用。 -[演示 Demo](https://chat-gpt-next-web.vercel.app/) / [反馈 Issues](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [Join Discord](https://discord.gg/zrhvHCr79N) / [QQ 群](https://user-images.githubusercontent.com/16968934/231095592-330adc52-0337-4c13-8452-938ec169e367.jpeg) / [打赏开发者](https://user-images.githubusercontent.com/16968934/227772541-5bcd52d8-61b7-488c-a203-0330d8006e2b.jpg) / [Buy Me a Coffee](https://www.buymeacoffee.com/yidadaa) +[Demo](https://chat-gpt-next-web.vercel.app/) / [Issues](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [Join Discord](https://discord.gg/zrhvHCr79N) / [Buy Me a Coffee](https://www.buymeacoffee.com/yidadaa) + +[演示](https://chat-gpt-next-web.vercel.app/) / [反馈](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [QQ 群](https://user-images.githubusercontent.com/16968934/231789746-41f34d05-6ef9-43f3-a1d1-ff109d4c3c14.jpg) / [打赏开发者](https://user-images.githubusercontent.com/16968934/227772541-5bcd52d8-61b7-488c-a203-0330d8006e2b.jpg) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web) @@ -22,7 +26,7 @@ One-Click to deploy well-designed ChatGPT web UI on Vercel. - **Deploy for free with one-click** on Vercel in under 1 minute - Privacy first, all data stored locally in the browser - Responsive design, dark mode and PWA -- Fast first screen loading speed (~100kb) +- Fast first screen loading speed (~100kb), support streaming response - Awesome prompts powered by [awesome-chatgpt-prompts-zh](https://github.com/PlexPt/awesome-chatgpt-prompts-zh) and [awesome-chatgpt-prompts](https://github.com/f/awesome-chatgpt-prompts) - Automatically compresses chat history to support long conversations while also saving your tokens - One-click export all chat history with full Markdown support @@ -31,7 +35,9 @@ One-Click to deploy well-designed ChatGPT web UI on Vercel. ## Roadmap - [x] System Prompt: pin a user defined prompt as system prompt [#138](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/138) -- [ ] User Prompt: user can edit and save custom prompts to prompt list +- [x] User Prompt: user can edit and save custom prompts to prompt list +- [ ] Prompt Template: create a new chat with pre-defined in-context prompts +- [ ] Share as image, share to ShareGPT - [ ] Desktop App with tauri - [ ] Self-host Model: support llama, alpaca, ChatGLM, BELLE etc. - [ ] Plugins: support network search, caculator, any other apis etc. [#165](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/165) @@ -45,7 +51,7 @@ One-Click to deploy well-designed ChatGPT web UI on Vercel. - 在 1 分钟内使用 Vercel **免费一键部署** - 精心设计的 UI，响应式设计，支持深色模式，支持 PWA -- 极快的首屏加载速度（~100kb） +- 极快的首屏加载速度（~100kb），支持流式响应 - 隐私安全，所有数据保存在用户浏览器本地 - 海量的内置 prompt 列表，来自[中文](https://github.com/PlexPt/awesome-chatgpt-prompts-zh)和[英文](https://github.com/f/awesome-chatgpt-prompts) - 自动压缩上下文聊天记录，在节省 Token 的同时支持超长对话 @@ -55,7 +61,9 @@ One-Click to deploy well-designed ChatGPT web UI on Vercel. ## 开发计划 - [x] 为每个对话设置系统 Prompt [#138](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/138) -- [ ] 允许用户自行编辑内置 Prompt 列表 +- [x] 允许用户自行编辑内置 Prompt 列表 +- [ ] 提示词模板：使用预制上下文快速定制新对话 +- [ ] 分享为图片，分享到 ShareGPT - [ ] 使用 tauri 打包桌面应用 - [ ] 支持自部署的大语言模型 - [ ] 插件机制，支持联网搜索、计算器、调用其他平台 api [#165](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/165) @@ -76,7 +84,9 @@ One-Click to deploy well-designed ChatGPT web UI on Vercel. ## FAQ -[简体中文 > 常见问题](./docs/faq-cn.md) | [English > FAQ](./docs/faq.en.md) +[简体中文 > 常见问题](./docs/faq-cn.md) + +[English > FAQ](./docs/faq-en.md) ## Keep Updated @@ -86,12 +96,19 @@ If you have deployed your own project with just one click following the steps ab We recommend that you follow the steps below to re-deploy: -- Delete the original repo; -- Fork this project; -- Go to the Vercel dashboard, delete the original project, then create a new project and select the project you just forked to redeploy; -- Please manually add an environment variable named `OPENAI_API_KEY` and enter your API key as the value during the redeploy process. +- Delete the original repository; +- Use the fork button in the upper right corner of the page to fork this project; +- Choose and deploy in Vercel again, [please see the detailed tutorial](./docs/vercel-cn.md). -This project will be continuously updated, and after forking the project, the upstream code will be automatically synchronized every day without additional operations. +### Enable Automatic Updates + +After forking the project, due to the limitations imposed by Github, you need to manually enable Workflows and Upstream Sync Action on the Actions page of the forked project. Once enabled, automatic updates will be scheduled every hour: + +![Automatic Updates](./docs/images/enable-actions.jpg) + +![Enable Automatic Updates](./docs/images/enable-actions-sync.jpg) + +### Manually Updating Code If you want to update instantly, you can check out the [Github documentation](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork) to learn how to synchronize a forked project with upstream code. @@ -123,18 +140,12 @@ Access passsword, separated by comma. ### `BASE_URL` (optional) -> Default: `api.openai.com` +> Default: `https://api.openai.com` + +> Examples: `http://your-openai-proxy.com` Override openai api request base url. -### `PROTOCOL` (optional) - -> Default: `https` - -> Values: `http` | `https` - -Override openai api request protocol. - ## Development > [简体中文 > 如何进行二次开发](./README_CN.md#开发) @@ -202,6 +213,8 @@ bash <(curl -s https://raw.githubusercontent.com/Yidadaa/ChatGPT-Next-Web/main/s ### Sponsor +> 仅列出捐赠金额 >= 100RMB 的用户。 + [@mushan0x0](https://github.com/mushan0x0) [@ClarenceDan](https://github.com/ClarenceDan) [@zhangjia](https://github.com/zhangjia) @@ -211,6 +224,10 @@ bash <(curl -s https://raw.githubusercontent.com/Yidadaa/ChatGPT-Next-Web/main/s [@webees](https://github.com/webees) [@chazzhou](https://github.com/chazzhou) [@hauy](https://github.com/hauy) +[@Corwin006](https://github.com/Corwin006) +[@yankunsong](https://github.com/yankunsong) +[@ypwhs](https://github.com/ypwhs) +[@fxxxchao](https://github.com/fxxxchao) ### Contributor diff --git a/README_CN.md b/README_CN.md index 0833ae1ac..d2d64aa00 100644 --- a/README_CN.md +++ b/README_CN.md @@ -38,12 +38,19 @@ 如果你按照上述步骤一键部署了自己的项目，可能会发现总是提示“存在更新”的问题，这是由于 Vercel 会默认为你创建一个新项目而不是 fork 本项目，这会导致无法正确地检测更新。 推荐你按照下列步骤重新部署： -- 删除掉原先的 repo； -- fork 本项目； -- 前往 vercel 控制台，删除掉原先的 project，然后新建 project，选择你刚刚 fork 出来的项目重新进行部署即可； -- 在重新部署的过程中，请手动添加名为 `OPENAI_API_KEY` 的环境变量，并填入你的 api key 作为值。 +- 删除掉原先的仓库； +- 使用页面右上角的 fork 按钮，fork 本项目； +- 在 Vercel 重新选择并部署，[请查看详细教程](./docs/vercel-cn.md#如何新建项目)。 -本项目会持续更新，当你 Fork 项目之后，默认会每天自动同步上游代码，无需额外操作。 +### 打开自动更新 + +当你 fork 项目之后，由于 Github 的限制，需要手动去你 fork 后的项目的 Actions 页面启用 Workflows，并启用 Upstream Sync Action，启用之后即可开启每小时定时自动更新： + +![自动更新](./docs/images/enable-actions.jpg) + +![启用自动更新](./docs/images/enable-actions-sync.jpg) + +### 手动更新代码 如果你想让手动立即更新，可以查看 [Github 的文档](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork) 了解如何让 fork 的项目与上游代码同步。 @@ -79,17 +86,13 @@ OpanAI 密钥，你在 openai 账户页面申请的 api key。 ### `BASE_URL` （可选） -> Default: `api.openai.com` +> Default: `https://api.openai.com` + +> Examples: `http://your-openai-proxy.com` OpenAI 接口代理 URL，如果你手动配置了 openai 接口代理，请填写此选项。 -### `PROTOCOL` （可选） - -> Default: `https` - -> Values: `http` | `https` - -OpenAI 代理接口协议，如果遇到 ssl 证书问题，请尝试通过此选项设置为 http。 +> 如果遇到 ssl 证书问题，请将 `BASE_URL` 的协议设置为 http。 ## 开发 @@ -131,7 +134,8 @@ docker run -d -p 3000:3000 \ docker run -d -p 3000:3000 \ -e OPENAI_API_KEY="sk-xxxx" \ -e CODE="页面访问密码" \ - -e PROXY_URL="http://localhost:7890" \ + --net=host \ + -e PROXY_URL="http://127.0.0.1:7890" \ yidadaa/chatgpt-next-web ``` @@ -147,12 +151,7 @@ bash <(curl -s https://raw.githubusercontent.com/Yidadaa/ChatGPT-Next-Web/main/s ### 捐赠者 -> 仅列出了部分大额打赏，小额打赏（< 100RMB）人数太多，在此不再列出，敬请谅解。 - -[@mushan0x0](https://github.com/mushan0x0) -[@ClarenceDan](https://github.com/ClarenceDan) -[@zhangjia](https://github.com/zhangjia) -[@hoochanlon](https://github.com/hoochanlon) +> 见英文版。 ### 贡献者 diff --git a/app/api/common.ts b/app/api/common.ts index abee6fd71..02aa6f8fe 100644 --- a/app/api/common.ts +++ b/app/api/common.ts @@ -9,10 +9,17 @@ export async function requestOpenai(req: NextRequest) { const apiKey = req.headers.get("token"); const openaiPath = req.headers.get("path"); + let baseUrl = BASE_URL; + + if (!baseUrl.startsWith("http")) { + baseUrl = `${PROTOCOL}://${baseUrl}`; + } + console.log("[Proxy] ", openaiPath); console.log("[apiKey] ", apiKey); + console.log("[Base Url]", baseUrl); - return fetch(`${PROTOCOL}://${BASE_URL}/${openaiPath}`, { + return fetch(`${baseUrl}/${openaiPath}`, { headers: { "Content-Type": "application/json", Authorization: `Bearer ${apiKey}`, diff --git a/app/api/openai/route.ts b/app/api/openai/route.ts index 261c20a85..0ac94bdd5 100644 --- a/app/api/openai/route.ts +++ b/app/api/openai/route.ts @@ -17,7 +17,7 @@ async function makeRequest(req: NextRequest) { }, { status: 500, - }, + } ); } } @@ -29,3 +29,7 @@ export async function POST(req: NextRequest) { export async function GET(req: NextRequest) { return makeRequest(req); } + +export const config = { + runtime: "edge", +}; diff --git a/app/components/chat.module.scss b/app/components/chat.module.scss index f57e6c100..7cd2889f7 100644 --- a/app/components/chat.module.scss +++ b/app/components/chat.module.scss @@ -1,5 +1,29 @@ @import "../styles/animation.scss"; +.chat-input-actions { + display: flex; + flex-wrap: wrap; + + .chat-input-action { + display: inline-flex; + border-radius: 20px; + font-size: 12px; + background-color: var(--white); + color: var(--black); + border: var(--border-in-light); + padding: 4px 10px; + animation: slide-in ease 0.3s; + box-shadow: var(--card-shadow); + transition: all ease 0.3s; + margin-bottom: 10px; + align-items: center; + + &:not(:last-child) { + margin-right: 5px; + } + } +} + .prompt-toast { position: absolute; bottom: -50px; diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 42a089a5f..f61e5e4ed 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -3,6 +3,7 @@ import { memo, useState, useRef, useEffect, useLayoutEffect } from "react"; import SendWhiteIcon from "../icons/send-white.svg"; import BrainIcon from "../icons/brain.svg"; +import RenameIcon from "../icons/rename.svg"; import ExportIcon from "../icons/share.svg"; import MenuIcon from "../icons/menu.svg"; import CopyIcon from "../icons/copy.svg"; @@ -14,6 +15,12 @@ import DeleteIcon from "../icons/delete.svg"; import MaxIcon from "../icons/max.svg"; import MinIcon from "../icons/min.svg"; +import LightIcon from "../icons/light.svg"; +import DarkIcon from "../icons/dark.svg"; +import AutoIcon from "../icons/auto.svg"; +import BottomIcon from "../icons/bottom.svg"; +import StopIcon from "../icons/pause.svg"; + import { Message, SubmitKey, @@ -22,6 +29,7 @@ import { ROLES, createMessage, useAccessStore, + Theme, } from "../store"; import { @@ -60,7 +68,11 @@ export function Avatar(props: { role: Message["role"] }) { const config = useChatStore((state) => state.config); if (props.role !== "user") { - return ; + return ( +
+ +
+ ); } return ( @@ -316,22 +328,90 @@ function useScrollToBottom() { // for auto-scroll const scrollRef = useRef(null); const [autoScroll, setAutoScroll] = useState(true); + const scrollToBottom = () => { + const dom = scrollRef.current; + if (dom) { + setTimeout(() => (dom.scrollTop = dom.scrollHeight), 1); + } + }; // auto scroll useLayoutEffect(() => { - const dom = scrollRef.current; - if (dom && autoScroll) { - setTimeout(() => (dom.scrollTop = dom.scrollHeight), 1); - } + autoScroll && scrollToBottom(); }); return { scrollRef, autoScroll, setAutoScroll, + scrollToBottom, }; } +export function ChatActions(props: { + showPromptModal: () => void; + scrollToBottom: () => void; + hitBottom: boolean; +}) { + const chatStore = useChatStore(); + + // switch themes + const theme = chatStore.config.theme; + function nextTheme() { + const themes = [Theme.Auto, Theme.Light, Theme.Dark]; + const themeIndex = themes.indexOf(theme); + const nextIndex = (themeIndex + 1) % themes.length; + const nextTheme = themes[nextIndex]; + chatStore.updateConfig((config) => (config.theme = nextTheme)); + } + + // stop all responses + const couldStop = ControllerPool.hasPending(); + const stopAll = () => ControllerPool.stopAll(); + + return ( +
+ {couldStop && ( +
+ +
+ )} + {!props.hitBottom && ( +
+ +
+ )} + {props.hitBottom && ( +
+ +
+ )} + +
+ {theme === Theme.Auto ? ( + + ) : theme === Theme.Light ? ( + + ) : theme === Theme.Dark ? ( + + ) : null} +
+
+ ); +} + export function Chat(props: { showSideBar?: () => void; sideBarShowing?: boolean; @@ -357,11 +437,10 @@ export function Chat(props: { const [beforeInput, setBeforeInput] = useState(""); const [isLoading, setIsLoading] = useState(false); const { submitKey, shouldSubmit } = useSubmitHandler(); - const { scrollRef, setAutoScroll } = useScrollToBottom(); + const { scrollRef, setAutoScroll, scrollToBottom } = useScrollToBottom(); const [hitBottom, setHitBottom] = useState(false); const onChatBodyScroll = (e: HTMLElement) => { - setAutoScroll(false); const isTouchBottom = e.scrollTop + e.clientHeight >= e.scrollHeight - 20; setHitBottom(isTouchBottom); }; @@ -383,16 +462,6 @@ export function Chat(props: { inputRef.current?.focus(); }; - const scrollInput = () => { - const dom = inputRef.current; - if (!dom) return; - const paddingBottomNum: number = parseInt( - window.getComputedStyle(dom).paddingBottom, - 10, - ); - dom.scrollTop = dom.scrollHeight - dom.offsetHeight + paddingBottomNum; - }; - // auto grow input const [inputRows, setInputRows] = useState(2); const measure = useDebouncedCallback( @@ -417,7 +486,6 @@ export function Chat(props: { // only search prompts when user input is short const SEARCH_TEXT_LIMIT = 30; const onInput = (text: string) => { - scrollInput(); setUserInput(text); const n = text.trim().length; @@ -475,21 +543,44 @@ export function Chat(props: { } }; - const onResend = (botIndex: number) => { + const findLastUesrIndex = (messageId: number) => { // find last user input message and resend - for (let i = botIndex; i >= 0; i -= 1) { - if (messages[i].role === "user") { - setIsLoading(true); - chatStore - .onUserInput(messages[i].content) - .then(() => setIsLoading(false)); - chatStore.updateCurrentSession((session) => - session.messages.splice(i, 2), - ); - inputRef.current?.focus(); - return; + let lastUserMessageIndex: number | null = null; + for (let i = 0; i < session.messages.length; i += 1) { + const message = session.messages[i]; + if (message.id === messageId) { + break; + } + if (message.role === "user") { + lastUserMessageIndex = i; } } + + return lastUserMessageIndex; + }; + + const deleteMessage = (userIndex: number) => { + chatStore.updateCurrentSession((session) => + session.messages.splice(userIndex, 2), + ); + }; + + const onDelete = (botMessageId: number) => { + const userIndex = findLastUesrIndex(botMessageId); + if (userIndex === null) return; + deleteMessage(userIndex); + }; + + const onResend = (botMessageId: number) => { + // find last user input message and resend + const userIndex = findLastUesrIndex(botMessageId); + if (userIndex === null) return; + + setIsLoading(true); + const content = session.messages[userIndex].content; + deleteMessage(userIndex); + chatStore.onUserInput(content).then(() => setIsLoading(false)); + inputRef.current?.focus(); }; const config = useChatStore((state) => state.config); @@ -541,6 +632,13 @@ export function Chat(props: { const [showPromptModal, setShowPromptModal] = useState(false); + const renameSession = () => { + const newTopic = prompt(Locale.Chat.Rename, session.topic); + if (newTopic && newTopic !== session.topic) { + chatStore.updateCurrentSession((session) => (session.topic = newTopic!)); + } + }; + // Auto focus useEffect(() => { if (props.sideBarShowing && isMobileScreen()) return; @@ -554,14 +652,7 @@ export function Chat(props: {
{ - const newTopic = prompt(Locale.Chat.Rename, session.topic); - if (newTopic && newTopic !== session.topic) { - chatStore.updateCurrentSession( - (session) => (session.topic = newTopic!), - ); - } - }} + onClickCapture={renameSession} > {session.topic}
@@ -578,6 +669,7 @@ export function Chat(props: { onClick={props?.showSideBar} />
+ {!isMobileScreen() && (
)} + +
+ } + bordered + onClick={renameSession} + /> +
+
} @@ -678,12 +779,20 @@ export function Chat(props: { {Locale.Chat.Actions.Stop}
) : ( -
onResend(i)} - > - {Locale.Chat.Actions.Retry} -
+ <> +
onDelete(message.id ?? i)} + > + {Locale.Chat.Actions.Delete} +
+
onResend(message.id ?? i)} + > + {Locale.Chat.Actions.Retry} +
+ )}
)} - {(message.preview || message.content.length === 0) && - !isUser ? ( - - ) : ( -
onRightClick(e, message)} - onDoubleClickCapture={() => { - if (!isMobileScreen()) return; - setUserInput(message.content); - }} - > - -
- )} + onRightClick(e, message)} + onDoubleClickCapture={() => { + if (!isMobileScreen()) return; + setUserInput(message.content); + }} + fontSize={fontSize} + parentRef={scrollRef} + /> {!isUser && !message.preview && (
@@ -726,6 +833,12 @@ export function Chat(props: {
+ + setShowPromptModal(true)} + scrollToBottom={scrollToBottom} + hitBottom={hitBottom} + />