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 0607950c2..3b6308be9 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ One-Click to deploy well-designed ChatGPT web UI on Vercel. [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/231095592-330adc52-0337-4c13-8452-938ec169e367.jpeg) / [打赏开发者](https://user-images.githubusercontent.com/16968934/227772541-5bcd52d8-61b7-488c-a203-0330d8006e2b.jpg) +[演示](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) @@ -35,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) @@ -59,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) @@ -97,6 +101,7 @@ We recommend that you follow the steps below to re-deploy: - Choose and deploy in Vercel again, [please see the detailed tutorial](./docs/vercel-cn.md). ### 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) @@ -104,6 +109,7 @@ After forking the project, due to the limitations imposed by Github, you need to ![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. You can star or watch this project or follow author to get release notifictions in time. @@ -134,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#开发) @@ -213,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) @@ -222,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 db08ee445..d2d64aa00 100644 --- a/README_CN.md +++ b/README_CN.md @@ -43,6 +43,7 @@ - 在 Vercel 重新选择并部署，[请查看详细教程](./docs/vercel-cn.md#如何新建项目)。 ### 打开自动更新 + 当你 fork 项目之后，由于 Github 的限制，需要手动去你 fork 后的项目的 Actions 页面启用 Workflows，并启用 Upstream Sync Action，启用之后即可开启每小时定时自动更新： ![自动更新](./docs/images/enable-actions.jpg) @@ -85,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。 ## 开发 @@ -137,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 ``` @@ -153,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 842eeacaf..53ab18ed6 100644 --- a/app/api/common.ts +++ b/app/api/common.ts @@ -9,9 +9,16 @@ export async function requestOpenai(req: NextRequest) { const apiKey = req.headers.get("token"); const openaiPath = req.headers.get("path"); - console.log("[Proxy] ", openaiPath); + let baseUrl = BASE_URL; - return fetch(`${PROTOCOL}://${BASE_URL}/${openaiPath}`, { + if (!baseUrl.startsWith("http")) { + baseUrl = `${PROTOCOL}://${baseUrl}`; + } + + console.log("[Proxy] ", openaiPath); + console.log("[Base Url]", baseUrl); + + 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 33ac3ac57..3c66627f6 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 ReturnIcon from "../icons/return.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; @@ -350,7 +430,7 @@ 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) => { @@ -375,16 +455,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( @@ -409,7 +479,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; @@ -467,21 +536,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); @@ -533,6 +625,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; @@ -546,14 +645,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}
@@ -572,12 +664,9 @@ export function Chat(props: {
} + icon={} bordered - title={Locale.Chat.Actions.CompressedHistory} - onClick={() => { - setShowPromptModal(true); - }} + onClick={renameSession} />
@@ -656,12 +745,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 && (
@@ -704,6 +799,12 @@ export function Chat(props: {
+ + setShowPromptModal(true)} + scrollToBottom={scrollToBottom} + hitBottom={hitBottom} + />