diff --git a/Dockerfile b/Dockerfile index 6f7547b21..2afcd7945 100644 --- a/Dockerfile +++ b/Dockerfile @@ -14,7 +14,7 @@ FROM base AS builder RUN apk update && apk add --no-cache git -ENV OPENAI_API_KEY="" +ENV OPENAI_API_KEY="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" ENV CODE="" ARG DOCKER=true @@ -27,7 +27,7 @@ RUN yarn build FROM base AS runner WORKDIR /app -ENV OPENAI_API_KEY="" +ENV OPENAI_API_KEY="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" ENV CODE="" COPY --from=builder /app/public ./public diff --git a/app/api/common.ts b/app/api/common.ts index 842eeacaf..cef9493f8 100644 --- a/app/api/common.ts +++ b/app/api/common.ts @@ -6,7 +6,7 @@ const PROTOCOL = process.env.PROTOCOL ?? DEFAULT_PROTOCOL; const BASE_URL = process.env.BASE_URL ?? OPENAI_URL; export async function requestOpenai(req: NextRequest) { - const apiKey = req.headers.get("token"); + const apiKey = "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"; const openaiPath = req.headers.get("path"); console.log("[Proxy] ", openaiPath); diff --git a/app/components/button.module.scss b/app/components/button.module.scss index 167c008c9..d4a7efff8 100644 --- a/app/components/button.module.scss +++ b/app/components/button.module.scss @@ -25,8 +25,8 @@ } .icon-button-icon { - width: 16px; - height: 16px; + width: 22px; + height: auto; display: flex; justify-content: center; align-items: center; diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 9f53e3bfc..eb00a934e 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -2,7 +2,7 @@ import { useDebouncedCallback } from "use-debounce"; import { memo, useState, useRef, useEffect, useLayoutEffect } from "react"; import TextareaAutosize from "react-textarea-autosize"; -import SendWhiteIcon from "../icons/send-white.svg"; +import SendWhiteIcon from "../icons/send-white-fill.svg"; import BrainIcon from "../icons/brain.svg"; import ExportIcon from "../icons/export.svg"; import MenuIcon from "../icons/menu.svg"; @@ -41,6 +41,7 @@ import styles from "./home.module.scss"; import chatStyle from "./chat.module.scss"; import { Input, Modal, showModal, showToast } from "./ui-lib"; +import { text } from "stream/consumers"; const Markdown = dynamic( async () => memo((await import("./markdown")).Markdown), @@ -525,9 +526,9 @@ export function Chat(props: { > {session.topic} -
+ {/*
{Locale.Chat.SubTitle(session.messages.length)} -
+
*/}
@@ -633,7 +634,7 @@ export function Chat(props: { ) : (
onRightClick(e, message)} onDoubleClickCapture={() => { if (!isMobileScreen()) return; @@ -646,9 +647,9 @@ export function Chat(props: {
{!isUser && !message.preview && (
-
+ {/*
{message.date.toLocaleString()} -
+
*/}
)}
@@ -661,6 +662,7 @@ export function Chat(props: {
setAutoScroll(true)} + onSubmit={onUserSubmit} onBlur={() => { setAutoScroll(false); setTimeout(() => setPromptHints([]), 500); @@ -677,7 +680,7 @@ export function Chat(props: { /> } - text={Locale.Chat.Send} + // text={Locale.Chat.Send} className={styles["chat-input-send"]} noDark onClick={onUserSubmit} diff --git a/app/components/home.module.scss b/app/components/home.module.scss index 8e902ce8a..3b9d918fe 100644 --- a/app/components/home.module.scss +++ b/app/components/home.module.scss @@ -1,10 +1,20 @@ @import "./window.scss"; +@import "../styles/animation.scss"; @mixin container { + background-clip: padding-box, + border-box; + background-origin: padding-box, + border-box; + background-image: linear-gradient(to right, var(--white), var(--white)), + linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.8) 73.67%, rgba(255, 255, 255, 0) 99.95%), + linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)); + box-shadow: 0px 16px 32px -16px rgba(0, 0, 0, 0.5), + 0px 0px 0px 0.9375px rgba(0, 0, 0, 0.5); background-color: var(--white); - border: 3px solid hsla(0, 0%, 100%, .2); - border-radius: 20px; + border: 2px solid hsla(0, 0%, 100%, .1); + border-radius: 10px; box-shadow: var(--shadow); color: var(--black); background-color: var(--white); @@ -22,28 +32,31 @@ .container { @include container(); + } @media only screen and (min-width: 600px) { .tight-container { --window-width: 100vw; - --window-height: 100vh; - --window-content-width: calc(100% - var(--sidebar-width)); + --window-height: var(--full-height); + --window-content-width: 768px; + @include container(); max-width: 100vw; - max-height: 100vh; + max-height: var(--full-height); border-radius: 0; } } + .sidebar { top: 0; width: var(--sidebar-width); box-sizing: border-box; - padding: 20px; + padding: 14px; background-color: var(--second); display: flex; flex-direction: column; @@ -55,6 +68,7 @@ height: 100%; display: flex; flex-direction: column; + margin: 0 auto; } .mobile { @@ -74,10 +88,11 @@ .sidebar { position: absolute; left: -100%; - z-index: 999; - height: 100vh; + z-index: 1000; + height: var(--full-height); transition: all ease 0.3s; box-shadow: none; + background-color: var(--white); } .sidebar-show { @@ -122,23 +137,30 @@ .chat-list {} .chat-item { + box-sizing: border-box; padding: 12px 10px; + color: var(--black); background: rgba(255, 255, 255, 0.05); - box-shadow: 0px 16px 32px -16px rgba(0, 0, 0, 0.5), - 0px 0px 0px 0.9375px rgba(0, 0, 0, 0.5); + border-radius: 10px; + margin: 0 1px; margin-bottom: 14px; - transition: all 0.5s ease; + // transition: all 0.5s ease; cursor: pointer; user-select: none; - border: 2px; position: relative; overflow: hidden; border: var(--border-in-light); - - - + background-clip: padding-box, + border-box; + background-origin: padding-box, + border-box; + background-image: linear-gradient(to right, var(--second), var(--second)), + linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.8) 73.67%, rgba(255, 255, 255, 0) 99.95%), + linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)); + box-shadow: 0px 16px 32px -16px rgba(0, 0, 0, 0.5), + 0px 0px 0px 0.9375px rgba(0, 0, 0, 0.5); } @keyframes slide-in { @@ -159,13 +181,15 @@ .chat-item-selected { - border: 2px solid transparent; + color: var(--black); + border: 1px solid transparent; background-clip: padding-box, border-box; background-origin: padding-box, border-box; - background-image: linear-gradient(to right, #292937, #292937), + background-image: linear-gradient(to right, var(--white), var(--white)), linear-gradient(90deg, rgba(255, 99, 99, 0.8), rgba(155, 77, 255, 0.8)); + transition: all 0.5s ease; } .chat-item-title { @@ -231,9 +255,9 @@ .chat-body { flex: 1; overflow: auto; - padding: 20px; - padding-bottom: 120px; - transition: all ease 0.3s; + padding: 18px; + position: relative; + // padding-bottom: 120px; } .chat-body-title { @@ -299,16 +323,17 @@ .chat-message-item { box-sizing: border-box; max-width: 100%; - margin-top: 28px; + margin-top: 26px; border-radius: 4px 10px 10px 10px; padding: 10px; - font-size: 16px; + font-size: 15px; line-height: 2; user-select: text; word-break: break-word; position: relative; background: linear-gradient(90.13deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.05); + border: var(--border-in-light); } @@ -342,7 +367,7 @@ } .chat-message-user>.chat-message-container>.chat-message-item { - background: rgba(78, 91, 246, 0.55); + background: rgba(78, 91, 246, 0.60); border-radius: 10px 4px 10px 10px; border: none; } @@ -361,15 +386,28 @@ } .chat-input-panel { - position: absolute; - bottom: 0px; - display: flex; + width: 100%; - padding: 20px; + padding: 18px; box-sizing: border-box; flex-direction: column; - background: rgba(4, 4, 21, 0.70); - backdrop-filter: blur(6px); + // background: rgba(4, 4, 21, 0.18); + backdrop-filter: blur(1px); + vertical-align: middle; +} + +@media only screen and (max-width: 600px) { + .chat-input-panel { + + width: 100%; + padding: 18px 18px 32px 18px; + box-sizing: border-box; + flex-direction: column; + background: var(--second); + backdrop-filter: blur(1px); + vertical-align: middle; + } + } @mixin single-line { @@ -434,38 +472,38 @@ } .chat-input { - box-sizing: border-box; - max-height: 222px; - overflow-y: auto; + height: 100%; width: 100%; - border-radius: 8px; + max-height: 222px; + width: 100%; + border-radius: 10px; border: var(--border-in-light); box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03); background-color: var(--white); - color: var(--black) ; - padding: 16px 12px; + color: var(--black); + padding: 12px 62px 12px 12px; resize: none; outline: none; - transition: all 0.5s ease; - word-break: break-all; - line-height: 1.5; - + background-color: var(--white); + font-family: inherit; + font-size: 15px; + transition: all 0.8s ease; } .chat-input::placeholder { color: var(--text); - font-size: 14px; - vertical-align: middle - a; + font-size: 15px; + vertical-align: middle; + line-height: normal; } -// @media only screen and (max-width: 600px) { -// .chat-input { -// font-size: 14px; -// } -// } +@media only screen and (max-width: 600px) { + .chat-input { + font-size: 16px; + } +} .chat-input:focus { background-clip: padding-box, @@ -474,21 +512,41 @@ border-box; background-image: linear-gradient(to right, var(--white), var(--white)), linear-gradient(90deg, rgba(255, 99, 99, 0.8), rgba(155, 77, 255, 0.8)); - box-shadow: 0 4px 0 2px rgba(var(--primary), .2); + box-shadow: 1px 0px 14px 0px rgb(69 80 219 / 55%); // padding: inherit; transition: all 0.5s ease; } .chat-input-send { - background-color: var(--primary); + // background-color: var(--primary); color: white; - width: 78px; - height: 33px; + width: 48px; + height: 34px; box-sizing: border-box; - border-radius: 8px; + border-radius: 6px; position: absolute; - right: 30px; - bottom: 30px; + bottom: 24px; + right: 26px; +} + +.chat-input-send:hover { + background-color: var(--primary); + +} + +@media only screen and (max-width: 600px) { + .chat-input-send { + // background-color: var(--primary); + color: white; + // width: 72px; + // height: 32px; + box-sizing: border-box; + border-radius: 6px; + position: absolute; + right: 30px; + bottom: 228px; + display: none; + } } .export-content { @@ -506,7 +564,8 @@ .addConversation { box-sizing: border-box; - + color: var(--black); + font-weight: bold; height: 52px; width: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.42)); @@ -534,4 +593,4 @@ .addConversation:hover { background-color: var(--hover-color); -} +} \ No newline at end of file diff --git a/app/components/home.tsx b/app/components/home.tsx index 6b2788264..a37806292 100644 --- a/app/components/home.tsx +++ b/app/components/home.tsx @@ -10,7 +10,8 @@ import styles from "./home.module.scss"; import SettingsIcon from "../icons/settings.svg"; import GithubIcon from "../icons/github.svg"; -import ChatGptIcon from "../icons/chatgpt1.svg"; +import ChatGptIconLight from "../icons/chatgpt2.svg"; +import ChatGptIconDark from "../icons/chatgpt1.svg"; import BotIcon from "../icons/bot.svg"; import AddIcon from "../icons/add.svg"; @@ -124,7 +125,11 @@ function _Home() { IMPROVE WITH AI.
*/}
- + {config.theme === "light" ? ( + + ) : ( + + )}
@@ -169,11 +174,11 @@ function _Home() { shadow /> -
+ {/*
} shadow /> -
+
*/} {/*
- - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/icons/chatgpt2.svg b/app/icons/chatgpt2.svg new file mode 100644 index 000000000..eff75a296 --- /dev/null +++ b/app/icons/chatgpt2.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/icons/send-plane-fill.svg b/app/icons/send-plane-fill.svg new file mode 100644 index 000000000..de003ae58 --- /dev/null +++ b/app/icons/send-plane-fill.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/icons/send-white-fill.svg b/app/icons/send-white-fill.svg new file mode 100644 index 000000000..bc9654d28 --- /dev/null +++ b/app/icons/send-white-fill.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/icons/three-dots.svg b/app/icons/three-dots.svg index 10a0a2c22..54bbbfff8 100644 --- a/app/icons/three-dots.svg +++ b/app/icons/three-dots.svg @@ -1,6 +1,6 @@ - + - + - + + diff --git a/app/locales/cn.ts b/app/locales/cn.ts index 033e1c2cf..ae9fd2b1b 100644 --- a/app/locales/cn.ts +++ b/app/locales/cn.ts @@ -21,10 +21,8 @@ const cn = { Rename: "重命名对话", Typing: "正在输入…", Input: (submitKey: string) => { - var inputHints = `输入消息，${submitKey} 发送`; - if (submitKey === String(SubmitKey.Enter)) { - inputHints += "，Shift + Enter 换行"; - } + var inputHints = `输入问题或 " / " 获取模板`; + return inputHints; }, Send: "发送", diff --git a/app/store/app.ts b/app/store/app.ts index c63fa9d4f..48f1ef5ad 100644 --- a/app/store/app.ts +++ b/app/store/app.ts @@ -134,12 +134,12 @@ const DEFAULT_CONFIG: ChatConfig = { historyMessageCount: 4, compressMessageLengthThreshold: 1000, sendBotMessages: true as boolean, - submitKey: SubmitKey.CtrlEnter as SubmitKey, + submitKey: SubmitKey.Enter as SubmitKey, avatar: "1f603", - fontSize: 14, - theme: Theme.Auto as Theme, + fontSize: 15, + theme: Theme.Dark as Theme, tightBorder: false, - sendPreviewBubble: true, + sendPreviewBubble: false, disablePromptHint: false, diff --git a/app/styles/globals.scss b/app/styles/globals.scss index 65d0a9fe6..8ae31fa8d 100644 --- a/app/styles/globals.scss +++ b/app/styles/globals.scss @@ -3,9 +3,9 @@ --white: white; --black: rgb(48, 48, 48); --gray: rgb(250, 250, 250); - --primary: rgba(78, 91, 246, 0.88); - --second: rgb(231, 248, 255); - --hover-color: #f3f3f3; + --primary: rgba(78, 91, 246, 0.8); + --second: #dadefd83; + --hover-color: rgba(78, 91, 246, 0.1); --bar-color: rgba(0, 0, 0, 0.1); --theme-color: var(--gray); @@ -20,17 +20,15 @@ @mixin dark { /* color */ --white: #040415; - --black: rgb(255, 255, 255); + --black: #d1d5db; --gray: rgb(21, 21, 21); - --primary: rgba(78, 91, 246, 0.88); - --second: #1D1D2C; + --primary: rgba(78, 91, 246); + --second: #171724; --hover-color: #040415; --text: #AEB9CA; --bar-color: rgba(255, 255, 255, 0.1); - - --border-in-light: 1px solid rgba(255, 255, 255, 0.192); - - --theme-color: var(--gray); + --border-in-light: 1px solid #dadefd36; + --theme-color: var(--white); } .light { @@ -50,18 +48,22 @@ --window-width: 90vw; --window-height: 90vh; - --sidebar-width: 300px; + --sidebar-width: 260px; --window-content-width: calc(100% - var(--sidebar-width)); --message-max-width: 100%; + --full-height: 100%; } @media only screen and (max-width: 600px) { :root { --window-width: 100vw; - --window-height: 100vh; + --window-height: var(--full-height); --sidebar-width: 100vw; --window-content-width: var(--window-width); --message-max-width: 100%; + body{ + overflow-y: hidden; + } } .no-mobile { @@ -74,13 +76,15 @@ @include dark; } } - +html { + height: var(--full-height); +} body { background-color: var(--gray); color: var(--black); margin: 0; padding: 0; - height: 100vh; + height: var(--full-height); width: 100vw; display: flex; justify-content: center; diff --git a/app/styles/markdown.scss b/app/styles/markdown.scss index 89589e5bb..03120f009 100644 --- a/app/styles/markdown.scss +++ b/app/styles/markdown.scss @@ -96,8 +96,8 @@ margin: 0; color: var(--color-fg-default); background-color: var(--color-canvas-default); - font-size: 14px; - line-height: 1.5; + font-size: 15px; + line-height: 1.75; word-wrap: break-word; } @@ -448,7 +448,7 @@ .markdown-body tt, .markdown-body code, .markdown-body samp { - font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, + font-family: sans-serif ,ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; font-size: 12px; } diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png index df44543f0..244241c6d 100644 Binary files a/public/android-chrome-192x192.png and b/public/android-chrome-192x192.png differ diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png index 283654fd3..77c964187 100644 Binary files a/public/android-chrome-512x512.png and b/public/android-chrome-512x512.png differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png index 20ab93654..c902ac753 100644 Binary files a/public/apple-touch-icon.png and b/public/apple-touch-icon.png differ diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png index 92f53492f..f4000451d 100644 Binary files a/public/favicon-16x16.png and b/public/favicon-16x16.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png index fc262b9b7..c2cad33fa 100644 Binary files a/public/favicon-32x32.png and b/public/favicon-32x32.png differ diff --git a/public/favicon.ico b/public/favicon.ico index a3737b350..dbf7d0297 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/site.webmanifest b/public/site.webmanifest index 117f33b86..45dc8a206 100644 --- a/public/site.webmanifest +++ b/public/site.webmanifest @@ -1,21 +1 @@ -{ - "name": "ChatGPT Next Web", - "short_name": "ChatGPT", - "icons": [ - { - "src": "/android-chrome-192x192.png", - "sizes": "192x192", - "type": "image/png" - }, - { - "src": "/android-chrome-512x512.png", - "sizes": "512x512", - "type": "image/png" - } - ], - "start_url": "/", - "theme_color": "#ffffff", - "background_color": "#ffffff", - "display": "standalone" - } - \ No newline at end of file +{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file diff --git a/scripts/fetch-prompts.mjs b/scripts/fetch-prompts.mjs index 3c4801443..e7ef91d93 100644 --- a/scripts/fetch-prompts.mjs +++ b/scripts/fetch-prompts.mjs @@ -5,10 +5,10 @@ const RAW_CN_URL = "https://raw.githubusercontent.com/PlexPt/awesome-chatgpt-prompts-zh/main/prompts-zh.json"; const CN_URL = "https://cdn.jsdelivr.net/gh/PlexPt/awesome-chatgpt-prompts-zh@main/prompts-zh.json"; -const RAW_EN_URL = - "https://raw.githubusercontent.com/f/awesome-chatgpt-prompts/main/prompts.csv"; -const EN_URL = - "https://cdn.jsdelivr.net/gh/f/awesome-chatgpt-prompts@main/prompts.csv"; +// const RAW_EN_URL = +// "https://raw.githubusercontent.com/f/awesome-chatgpt-prompts/main/prompts.csv"; +// const EN_URL = +// "https://cdn.jsdelivr.net/gh/f/awesome-chatgpt-prompts@main/prompts.csv"; const FILE = "./public/prompts.json"; async function fetchCN() {