Merge pull request ChatGPTNextWeb#2193 from Yidadaa/bugfix-0629

feat: improve ux & auto updater

Author: Yidadaa

README_CN.md

@@ -121,7 +121,7 @@ BASE_URL=https://chatgpt1.nextweb.fun/api/proxy
 
 1. 安装 nodejs 18 和 yarn，具体细节请询问 ChatGPT；
 2. 执行 `yarn install && yarn dev` 即可。⚠️ 注意：此命令仅用于本地开发，不要用于部署！
-3. 如果你想本地部署，请使用 `yarn install && yarn start` 命令，你可以配合 pm2 来守护进程，防止被杀死，详情询问 ChatGPT。
+3. 如果你想本地部署，请使用 `yarn install && yarn build && yarn start` 命令，你可以配合 pm2 来守护进程，防止被杀死，详情询问 ChatGPT。
 
 ## 部署
 

app/components/chat.module.scss

@@ -239,6 +239,19 @@
   &:last-child {
     animation: slide-in ease 0.3s;
   }
+
+  &:hover {
+    .chat-message-actions {
+      opacity: 1;
+      transform: translateY(0px);
+      max-width: 100%;
+      height: 40px;
+    }
+
+    .chat-message-action-date {
+      opacity: 0.2;
+    }
+  }
 }
 
 .chat-message-user {
@@ -305,45 +318,40 @@
   position: relative;
   transition: all ease 0.3s;
 
-  &:hover {
-    .chat-message-actions {
-      opacity: 1;
-      transform: translateY(0px);
-      max-width: 100%;
-      height: 40px;
-
-      .chat-message-action-date {
-        opacity: 0.3;
-      }
-    }
-  }
-
   .chat-message-actions {
     display: flex;
     box-sizing: border-box;
     font-size: 12px;
     align-items: flex-end;
     justify-content: space-between;
-    transition: all ease 0.1s;
-    transform: translateY(10px);
+    transition: all ease 0.3s 0.15s;
+    transform: translateX(-5px) scale(0.9) translateY(30px);
     opacity: 0;
     height: 0;
     max-width: 0;
+    position: absolute;
+    left: 0;
+    z-index: 2;
 
     .chat-input-actions {
       display: flex;
       flex-wrap: nowrap;
     }
   }
+}
 
-  .chat-message-action-date {
-    white-space: nowrap;
-    transition: all ease 0.6s;
-    color: var(--black);
-    opacity: 0;
-    text-align: right;
-    margin-left: 20px;
-  }
+.chat-message-action-date {
+  font-size: 12px;
+  opacity: 0.2;
+  white-space: nowrap;
+  transition: all ease 0.6s;
+  color: var(--black);
+  text-align: right;
+  width: 100%;
+  box-sizing: border-box;
+  padding-right: 10px;
+  pointer-events: none;
+  z-index: 1;
 }
 
 .chat-message-user > .chat-message-container > .chat-message-item {

app/components/chat.tsx

@@ -992,13 +992,15 @@ export function Chat() {
                             </>
                           )}
                         </div>
-
-                        <div className={styles["chat-message-action-date"]}>
-                          {message.date.toLocaleString()}
-                        </div>
                       </div>
                     )}
                   </div>
+
+                  {showActions && (
+                    <div className={styles["chat-message-action-date"]}>
+                      {message.date.toLocaleString()}
+                    </div>
+                  )}
                 </div>
               </div>
               {shouldShowClearContextDivider && <ClearContextDivider />}

app/components/settings.tsx

@@ -40,7 +40,7 @@ import Locale, {
 } from "../locales";
 import { copyToClipboard } from "../utils";
 import Link from "next/link";
-import { Path, UPDATE_URL } from "../constant";
+import { Path, RELEASE_URL, UPDATE_URL } from "../constant";
 import { Prompt, SearchService, usePromptStore } from "../store/prompt";
 import { ErrorBoundary } from "./error";
 import { InputRange } from "./input-range";
@@ -310,19 +310,6 @@ function SyncItems() {
   );
 }
 
-function formatVersionDate(t: string) {
-  const d = new Date(+t);
-  const year = d.getUTCFullYear();
-  const month = d.getUTCMonth() + 1;
-  const day = d.getUTCDate();
-
-  return [
-    year.toString(),
-    month.toString().padStart(2, "0"),
-    day.toString().padStart(2, "0"),
-  ].join("");
-}
-
 export function Settings() {
   const navigate = useNavigate();
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
@@ -332,24 +319,19 @@ export function Settings() {
 
   const updateStore = useUpdateStore();
   const [checkingUpdate, setCheckingUpdate] = useState(false);
-  const currentVersion = formatVersionDate(updateStore.version);
-  const remoteId = formatVersionDate(updateStore.remoteVersion);
+  const currentVersion = updateStore.formatVersion(updateStore.version);
+  const remoteId = updateStore.formatVersion(updateStore.remoteVersion);
   const hasNewVersion = currentVersion !== remoteId;
+  const updateUrl = getClientConfig()?.isApp ? RELEASE_URL : UPDATE_URL;
 
   function checkUpdate(force = false) {
     setCheckingUpdate(true);
     updateStore.getLatestVersion(force).then(() => {
       setCheckingUpdate(false);
     });
 
-    console.log(
-      "[Update] local version ",
-      new Date(+updateStore.version).toLocaleString(),
-    );
-    console.log(
-      "[Update] remote version ",
-      new Date(+updateStore.remoteVersion).toLocaleString(),
-    );
+    console.log("[Update] local version ", updateStore.version);
+    console.log("[Update] remote version ", updateStore.remoteVersion);
   }
 
   const usage = {
@@ -460,7 +442,7 @@ export function Settings() {
             {checkingUpdate ? (
               <LoadingIcon />
             ) : hasNewVersion ? (
-              <Link href={UPDATE_URL} target="_blank" className="link">
+              <Link href={updateUrl} target="_blank" className="link">
                 {Locale.Settings.Update.GoToUpdate}
               </Link>
             ) : (

app/config/build.ts

@@ -1,27 +1,43 @@
+import tauriConfig from "../../src-tauri/tauri.conf.json";
+
 export const getBuildConfig = () => {
   if (typeof process === "undefined") {
     throw Error(
       "[Server Config] you are importing a nodejs-only module outside of nodejs",
     );
   }
 
-  const COMMIT_ID: string = (() => {
+  const buildMode = process.env.BUILD_MODE ?? "standalone";
+  const isApp = !!process.env.BUILD_APP;
+  const version = tauriConfig.package.version;
+
+  const commitInfo = (() => {
     try {
       const childProcess = require("child_process");
-      return childProcess
+      const commitDate: string = childProcess
         .execSync('git log -1 --format="%at000" --date=unix')
         .toString()
         .trim();
+      const commitHash: string = childProcess
+        .execSync('git log --pretty=format:"%H" -n 1')
+        .toString()
+        .trim();
+
+      return { commitDate, commitHash };
     } catch (e) {
       console.error("[Build Config] No git or not from git repo.");
-      return "unknown";
+      return {
+        commitDate: "unknown",
+        commitHash: "unknown",
+      };
     }
   })();
 
   return {
-    commitId: COMMIT_ID,
-    buildMode: process.env.BUILD_MODE ?? "standalone",
-    isApp: !!process.env.BUILD_APP,
+    version,
+    ...commitInfo,
+    buildMode,
+    isApp,
   };
 };
 

app/constant.ts

@@ -3,6 +3,7 @@ export const REPO = "ChatGPT-Next-Web";
 export const REPO_URL = `https://github.com/${OWNER}/${REPO}`;
 export const ISSUE_URL = `https://github.com/${OWNER}/${REPO}/issues`;
 export const UPDATE_URL = `${REPO_URL}#keep-updated`;
+export const RELEASE_URL = `${REPO_URL}/releases`;
 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`;
 export const RUNTIME_CONFIG_DOM = "danger-runtime-config";

app/store/update.ts

@@ -1,48 +1,96 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
-import { FETCH_COMMIT_URL, StoreKey } from "../constant";
+import { FETCH_COMMIT_URL, FETCH_TAG_URL, StoreKey } from "../constant";
 import { api } from "../client/api";
 import { getClientConfig } from "../config/client";
 
 export interface UpdateStore {
+  versionType: "date" | "tag";
   lastUpdate: number;
+  version: string;
   remoteVersion: string;
 
   used?: number;
   subscription?: number;
   lastUpdateUsage: number;
 
-  version: string;
   getLatestVersion: (force?: boolean) => Promise<void>;
   updateUsage: (force?: boolean) => Promise<void>;
+
+  formatVersion: (version: string) => string;
 }
 
 const ONE_MINUTE = 60 * 1000;
 
+function formatVersionDate(t: string) {
+  const d = new Date(+t);
+  const year = d.getUTCFullYear();
+  const month = d.getUTCMonth() + 1;
+  const day = d.getUTCDate();
+
+  return [
+    year.toString(),
+    month.toString().padStart(2, "0"),
+    day.toString().padStart(2, "0"),
+  ].join("");
+}
+
+async function getVersion(type: "date" | "tag") {
+  if (type === "date") {
+    const data = (await (await fetch(FETCH_COMMIT_URL)).json()) as {
+      commit: {
+        author: { name: string; date: string };
+      };
+      sha: string;
+    }[];
+    const remoteCommitTime = data[0].commit.author.date;
+    const remoteId = new Date(remoteCommitTime).getTime().toString();
+    return remoteId;
+  } else if (type === "tag") {
+    const data = (await (await fetch(FETCH_TAG_URL)).json()) as {
+      commit: { sha: string; url: string };
+      name: string;
+    }[];
+    return data.at(0)?.name;
+  }
+}
+
 export const useUpdateStore = create<UpdateStore>()(
   persist(
     (set, get) => ({
+      versionType: "tag",
       lastUpdate: 0,
+      version: "unknown",
       remoteVersion: "",
 
       lastUpdateUsage: 0,
 
-      version: "unknown",
+      formatVersion(version: string) {
+        if (get().versionType === "date") {
+          version = formatVersionDate(version);
+        }
+        return version;
+      },
 
       async getLatestVersion(force = false) {
-        set(() => ({ version: getClientConfig()?.commitId ?? "unknown" }));
+        const versionType = get().versionType;
+        let version =
+          versionType === "date"
+            ? getClientConfig()?.commitDate
+            : getClientConfig()?.version;
+
+        set(() => ({ version }));
 
-        const overTenMins = Date.now() - get().lastUpdate > 10 * ONE_MINUTE;
-        if (!force && !overTenMins) return;
+        const shouldCheck =
+          Date.now() - get().lastUpdate > 24 * 60 * ONE_MINUTE;
+        if (!force && !shouldCheck) return;
 
         set(() => ({
           lastUpdate: Date.now(),
         }));
 
         try {
-          const data = await (await fetch(FETCH_COMMIT_URL)).json();
-          const remoteCommitTime = data[0].commit.committer.date;
-          const remoteId = new Date(remoteCommitTime).getTime().toString();
+          const remoteId = await getVersion(versionType);
           set(() => ({
             remoteVersion: remoteId,
           }));

docs/faq-cn.md

@@ -105,6 +105,23 @@ keepalive_timeout 300;  # 设定keep-alive超时时间为65秒
 
 API KEY 有问题。余额不足。
 
+## 使用时遇到 "Error: Loading CSS chunk xxx failed..."
+
+为了减少首屏白屏时间，默认启用了分块编译，技术原理见下：
+
+- https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading
+- https://stackoverflow.com/questions/55993890/how-can-i-disable-chunkcode-splitting-with-webpack4
+- https://github.com/vercel/next.js/issues/38507
+- https://stackoverflow.com/questions/55993890/how-can-i-disable-chunkcode-splitting-with-webpack4
+
+然而 NextJS 的兼容性比较差，在比较老的浏览器上会导致此报错，可以在编译时关闭分块编译。
+
+对于 Vercel 平台，在环境变量中增加 `DISABLE_CHUNK=1`，然后重新部署即可；
+对于自行编译部署的项目，在构建时使用 `DISABLE_CHUNK=1 yarn build` 构建即可；
+对于 Docker 用户，由于 Docker 打包时已经构建完毕，所以暂不支持关闭此特性。
+
+注意，关闭此特性后，用户会在第一次访问网站时加载所有资源，如果用户网络状况较差，可能会引起较长时间的白屏，从而影响用户使用体验，所以自行考虑。
+
 # 网络服务相关问题
 
 ## Cloudflare 是什么？