From 7827b40f1798b65d84d3f59d351d35d55784e89a Mon Sep 17 00:00:00 2001 From: Yifei Zhang Date: Thu, 30 Mar 2023 15:25:38 +0000 Subject: [PATCH 1/7] fix: #185 input and select align center --- app/styles/globals.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/styles/globals.scss b/app/styles/globals.scss index b4b25b5c..d63c7d11 100644 --- a/app/styles/globals.scss +++ b/app/styles/globals.scss @@ -87,7 +87,7 @@ body { align-items: center; user-select: none; font-family: "Noto Sans SC", "SF Pro SC", "SF Pro Text", "SF Pro Icons", - "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; @media only screen and (max-width: 600px) { background-color: var(--second); @@ -119,6 +119,11 @@ select { cursor: pointer; background-color: var(--white); color: var(--black); + text-align: center; +} + +input { + text-align: center; } input[type="checkbox"] { From 7599ae385be260c10a3e6b784c22484b636c8576 Mon Sep 17 00:00:00 2001 From: Yifei Zhang Date: Thu, 30 Mar 2023 15:42:54 +0000 Subject: [PATCH 2/7] fix: #244 better scroll ux --- app/components/home.tsx | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/app/components/home.tsx b/app/components/home.tsx index da65b1d6..6af3af13 100644 --- a/app/components/home.tsx +++ b/app/components/home.tsx @@ -102,7 +102,7 @@ export function ChatList() { state.currentSessionIndex, state.selectSession, state.removeSession, - ] + ], ); return ( @@ -196,7 +196,7 @@ export function Chat(props: { setPromptHints(promptStore.search(text)); }, 100, - { leading: true, trailing: true } + { leading: true, trailing: true }, ); const onPromptSelect = (prompt: Prompt) => { @@ -210,7 +210,7 @@ export function Chat(props: { if (!dom) return; const paddingBottomNum: number = parseInt( window.getComputedStyle(dom).paddingBottom, - 10 + 10, ); dom.scrollTop = dom.scrollHeight - dom.offsetHeight + paddingBottomNum; }; @@ -300,7 +300,7 @@ export function Chat(props: { preview: true, }, ] - : [] + : [], ) .concat( userInput.length > 0 @@ -312,14 +312,24 @@ export function Chat(props: { preview: true, }, ] - : [] + : [], ); // auto scroll useLayoutEffect(() => { setTimeout(() => { const dom = latestMessageRef.current; - if (dom && !isIOS() && autoScroll) { + const inputDom = inputRef.current; + + // only scroll when input overlaped message body + let shouldScroll = true; + if (dom && inputDom) { + const domRect = dom.getBoundingClientRect(); + const inputRect = inputDom.getBoundingClientRect(); + shouldScroll = domRect.top > inputRect.top; + } + + if (dom && autoScroll && shouldScroll) { dom.scrollIntoView({ block: "end", }); @@ -340,7 +350,7 @@ export function Chat(props: { const newTopic = prompt(Locale.Chat.Rename, session.topic); if (newTopic && newTopic !== session.topic) { chatStore.updateCurrentSession( - (session) => (session.topic = newTopic!) + (session) => (session.topic = newTopic!), ); } }} @@ -586,7 +596,7 @@ export function Home() { state.newSession, state.currentSessionIndex, state.removeSession, - ] + ], ); const loading = !useHasHydrated(); const [showSideBar, setShowSideBar] = useState(true); From bf50ebac945ea31113dadb7ac9118929897dc4ef Mon Sep 17 00:00:00 2001 From: Yifei Zhang Date: Thu, 30 Mar 2023 15:50:08 +0000 Subject: [PATCH 3/7] fix: #229 disable light code theme --- app/styles/prism.scss | 30 ------------------------------ 1 file changed, 30 deletions(-) diff --git a/app/styles/prism.scss b/app/styles/prism.scss index 0d011ce0..65ee8b5f 100644 --- a/app/styles/prism.scss +++ b/app/styles/prism.scss @@ -120,33 +120,3 @@ cursor: help; } } - -@mixin light { - .markdown-body pre { - filter: invert(1) hue-rotate(90deg) brightness(1.3); - } -} - -@mixin dark { - .markdown-body pre { - filter: none; - } -} - -:root { - @include light(); -} - -.light { - @include light(); -} - -.dark { - @include dark(); -} - -@media (prefers-color-scheme: dark) { - :root { - @include dark(); - } -} From 1b140a1ed33f2fa35dbd4551563a29cb6aa9d155 Mon Sep 17 00:00:00 2001 From: Yifei Zhang Date: Thu, 30 Mar 2023 16:20:47 +0000 Subject: [PATCH 4/7] fix: tight border on mobile style --- app/components/home.module.scss | 6 +++--- app/components/home.tsx | 12 ++++++++++-- app/components/settings.tsx | 24 +++++++++++------------- app/styles/globals.scss | 7 ++++--- app/utils.ts | 4 ++++ 5 files changed, 32 insertions(+), 21 deletions(-) diff --git a/app/components/home.module.scss b/app/components/home.module.scss index 87231fee..cef1662b 100644 --- a/app/components/home.module.scss +++ b/app/components/home.module.scss @@ -26,13 +26,13 @@ @media only screen and (min-width: 600px) { .tight-container { --window-width: 100vw; - --window-height: 100vh; + --window-height: var(--full-height); --window-content-width: calc(100% - var(--sidebar-width)); @include container(); max-width: 100vw; - max-height: 100vh; + max-height: var(--full-height); border-radius: 0; } @@ -74,7 +74,7 @@ position: absolute; left: -100%; z-index: 999; - height: 100vh; + height: var(--full-height); transition: all ease 0.3s; box-shadow: none; } diff --git a/app/components/home.tsx b/app/components/home.tsx index 6af3af13..5494bdce 100644 --- a/app/components/home.tsx +++ b/app/components/home.tsx @@ -23,7 +23,13 @@ import DownloadIcon from "../icons/download.svg"; import { Message, SubmitKey, useChatStore, ChatSession } from "../store"; import { showModal, showToast } from "./ui-lib"; -import { copyToClipboard, downloadAs, isIOS, selectOrCopy } from "../utils"; +import { + copyToClipboard, + downloadAs, + isIOS, + isMobileScreen, + selectOrCopy, +} from "../utils"; import Locale from "../locales"; import dynamic from "next/dynamic"; @@ -614,7 +620,9 @@ export function Home() { return (
void }) { > -
- - - updateConfig( - (config) => (config.tightBorder = e.currentTarget.checked), - ) - } - > - -
+ + + updateConfig( + (config) => (config.tightBorder = e.currentTarget.checked), + ) + } + > + Date: Thu, 30 Mar 2023 16:46:17 +0000 Subject: [PATCH 5/7] feat: use tag as version number --- app/components/settings.tsx | 4 ++-- app/constant.ts | 1 + app/layout.tsx | 8 ++++---- app/store/update.ts | 20 ++++++++++---------- app/utils.ts | 2 +- 5 files changed, 18 insertions(+), 17 deletions(-) diff --git a/app/components/settings.tsx b/app/components/settings.tsx index a426afcd..703f5ab7 100644 --- a/app/components/settings.tsx +++ b/app/components/settings.tsx @@ -23,7 +23,7 @@ import { import { Avatar, PromptHints } from "./home"; import Locale, { AllLangs, changeLang, getLang } from "../locales"; -import { getCurrentCommitId } from "../utils"; +import { getCurrentVersion } from "../utils"; import Link from "next/link"; import { UPDATE_URL } from "../constant"; import { SearchService, usePromptStore } from "../store/prompt"; @@ -60,7 +60,7 @@ export function Settings(props: { closeSettings: () => void }) { const updateStore = useUpdateStore(); const [checkingUpdate, setCheckingUpdate] = useState(false); - const currentId = getCurrentCommitId(); + const currentId = getCurrentVersion(); const remoteId = updateStore.remoteId; const hasNewVersion = currentId !== remoteId; diff --git a/app/constant.ts b/app/constant.ts index 818ef1fb..fff77607 100644 --- a/app/constant.ts +++ b/app/constant.ts @@ -3,3 +3,4 @@ export const REPO = "ChatGPT-Next-Web"; export const REPO_URL = `https://github.com/${OWNER}/${REPO}`; export const UPDATE_URL = `${REPO_URL}#%E4%BF%9D%E6%8C%81%E6%9B%B4%E6%96%B0-keep-updated`; export const FETCH_COMMIT_URL = `https://api.github.com/repos/${OWNER}/${REPO}/commits?per_page=1`; +export const FETCH_TAG_URL = `https://api.github.com/repos/${OWNER}/${REPO}/tags?per_page=1`; diff --git a/app/layout.tsx b/app/layout.tsx index 3a414046..cc8e45de 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -8,11 +8,11 @@ import { ACCESS_CODES, IS_IN_DOCKER } from "./api/access"; let COMMIT_ID: string | undefined; try { COMMIT_ID = process - .execSync("git rev-parse --short HEAD") + .execSync("git describe --tags --abbrev=0") .toString() .trim(); } catch (e) { - console.error("No git or not from git repo.") + console.error("No git or not from git repo."); } export const metadata = { @@ -22,13 +22,13 @@ export const metadata = { title: "ChatGPT Next Web", statusBarStyle: "black-translucent", }, - themeColor: "#fafafa" + themeColor: "#fafafa", }; function Meta() { const metas = { version: COMMIT_ID ?? "unknown", - access: (ACCESS_CODES.size > 0 || IS_IN_DOCKER) ? "enabled" : "disabled", + access: ACCESS_CODES.size > 0 || IS_IN_DOCKER ? "enabled" : "disabled", }; return ( diff --git a/app/store/update.ts b/app/store/update.ts index 118ea3ce..69f6cfee 100644 --- a/app/store/update.ts +++ b/app/store/update.ts @@ -1,7 +1,7 @@ import { create } from "zustand"; import { persist } from "zustand/middleware"; -import { FETCH_COMMIT_URL } from "../constant"; -import { getCurrentCommitId } from "../utils"; +import { FETCH_COMMIT_URL, FETCH_TAG_URL } from "../constant"; +import { getCurrentVersion } from "../utils"; export interface UpdateStore { lastUpdate: number; @@ -19,15 +19,15 @@ export const useUpdateStore = create()( remoteId: "", async getLatestCommitId(force = false) { - const overOneHour = Date.now() - get().lastUpdate > 3600 * 1000; - const shouldFetch = force || overOneHour; + const overTenMins = Date.now() - get().lastUpdate > 10 * 60 * 1000; + const shouldFetch = force || overTenMins; if (!shouldFetch) { - return getCurrentCommitId(); + return getCurrentVersion(); } try { - const data = await (await fetch(FETCH_COMMIT_URL)).json(); - const sha = data[0].sha as string; + const data = await (await fetch(FETCH_TAG_URL)).json(); + const sha = data[0].name as string; const remoteId = sha.substring(0, 7); set(() => ({ lastUpdate: Date.now(), @@ -37,13 +37,13 @@ export const useUpdateStore = create()( return remoteId; } catch (error) { console.error("[Fetch Upstream Commit Id]", error); - return getCurrentCommitId(); + return getCurrentVersion(); } }, }), { name: UPDATE_KEY, version: 1, - } - ) + }, + ), ); diff --git a/app/utils.ts b/app/utils.ts index 1ff7a064..64120df4 100644 --- a/app/utils.ts +++ b/app/utils.ts @@ -76,7 +76,7 @@ export function queryMeta(key: string, defaultValue?: string): string { } let currentId: string; -export function getCurrentCommitId() { +export function getCurrentVersion() { if (currentId) { return currentId; } From 802ea20ec4bc4c5cd2acb3a5de2ac4c6a1096694 Mon Sep 17 00:00:00 2001 From: Yifei Zhang Date: Thu, 30 Mar 2023 17:04:32 +0000 Subject: [PATCH 6/7] fix: auto scroll on enter --- app/components/home.tsx | 4 +--- app/store/update.ts | 3 +-- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/app/components/home.tsx b/app/components/home.tsx index 5494bdce..ab9554e5 100644 --- a/app/components/home.tsx +++ b/app/components/home.tsx @@ -290,9 +290,7 @@ export function Chat(props: { // for auto-scroll const latestMessageRef = useRef(null); - - // wont scroll while hovering messages - const [autoScroll, setAutoScroll] = useState(false); + const [autoScroll, setAutoScroll] = useState(true); // preview messages const messages = (session.messages as RenderMessage[]) diff --git a/app/store/update.ts b/app/store/update.ts index 69f6cfee..0699369d 100644 --- a/app/store/update.ts +++ b/app/store/update.ts @@ -27,8 +27,7 @@ export const useUpdateStore = create()( try { const data = await (await fetch(FETCH_TAG_URL)).json(); - const sha = data[0].name as string; - const remoteId = sha.substring(0, 7); + const remoteId = data[0].name as string; set(() => ({ lastUpdate: Date.now(), remoteId, From b3fdf3efecadf015d04ab4fb8a2f60d58bd4d444 Mon Sep 17 00:00:00 2001 From: Yifei Zhang Date: Thu, 30 Mar 2023 17:08:50 +0000 Subject: [PATCH 7/7] fix: #182 prompt cannot be selected --- app/components/home.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/home.tsx b/app/components/home.tsx index ab9554e5..2f09aa27 100644 --- a/app/components/home.tsx +++ b/app/components/home.tsx @@ -489,7 +489,7 @@ export function Chat(props: { onFocus={() => setAutoScroll(true)} onBlur={() => { setAutoScroll(false); - setTimeout(() => setPromptHints([]), 100); + setTimeout(() => setPromptHints([]), 500); }} autoFocus={!props?.sideBarShowing} />