Merge pull request #29 from Yidadaa/bugfix-0325

v1.2 bug fix, ui improvement and access control by code

README.md

@@ -17,6 +17,15 @@ One-Click to deploy your own ChatGPT web UI.
 
 </div>
 
+## 重要说明 Attention
+本项目的演示地址所用的 OpenAI 账户的免费额度将于 2023-04-01 过期，届时将无法通过演示地址在线体验。
+
+如果你想贡献出自己的 API Key，可以通过作者主页的邮箱发送给作者，并标注过期时间，在此提前感谢！
+
+The free trial of the OpenAI account used by the demo will expire on April 1, 2023, and the demo will not be available at that time. 
+
+If you would like to contribute your API key, you can email it to the author and indicate the expiration date of the API key. Thank you in advance!
+
 ## 主要功能
 
 - 在 1 分钟内使用 Vercel **免费一键部署**
@@ -49,12 +58,93 @@ One-Click to deploy your own ChatGPT web UI.
    [![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&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web);
 3. Enjoy :)
 
+## 保持更新 Keep Updated
+
+如果你按照上述步骤一键部署了自己的项目，可能会发现总是提示“存在更新”的问题，这是由于 Vercel 会默认为你创建一个新项目而不是 fork 本项目，这会导致无法正确地检测更新。
+推荐你按照下列步骤重新部署：
+
+- 删除掉原先的 repo；
+- fork 本项目；
+- 前往 vercel 控制台，删除掉原先的 project，然后新建 project，选择你刚刚 fork 出来的项目重新进行部署即可；
+- 在重新部署的过程中，请手动添加名为 `OPENAI_API_KEY` 的环境变量，并填入你的 api key 作为值。
+
+本项目会持续更新，如果你想让代码库总是保持更新，可以查看 [Github 的文档](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork) 了解如何让 fork 的项目与上游代码同步，建议定期进行同步操作以获得新功能。
+
+你可以 star/watch 本项目或者 follow 作者来及时获得新功能更新通知。
+
+If you have deployed your own project with just one click following the steps above, you may encounter the issue of "Updates Available" constantly showing up. This is because Vercel will create a new project for you by default instead of forking this project, resulting in the inability to detect updates correctly.
+
+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.
+
+This project will be continuously maintained. If you want to keep the code repository up to date, 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. It is recommended to perform synchronization operations regularly.
+
+You can star or watch this project or follow author to get release notifictions in time.
+
+## 访问控制 Access Control
+
+本项目提供有限的权限控制功能，请在环境变量页增加名为 `CODE` 的环境变量，值为用英文逗号分隔的自定义控制码：
+
+```
+code1,code2,code3
+```
+
+增加或修改该环境变量后，请重新部署项目使改动生效。
+
+This project provides limited access control. Please add an environment variable named `CODE` on the environment variables page. The value should be a custom control code separated by comma like this:
+
+```
+code1,code2,code3
+```
+
+After adding or modifying this environment variable, please redeploy the project for the changes to take effect.
+
 ## 开发 Development
 
 点击下方按钮，开始二次开发：
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
 
+在开始写代码之前，需要在项目根目录新建一个 `.env.local` 文件，里面填入环境变量：
+
+Before starting development, you must create a new `.env.local` file at project root, and place your api key into it:
+
+```
+OPENAI_API_KEY=<your api key here>
+```
+
+### 本地开发 Local Development
+> 如果你是中国大陆用户，不建议在本地进行开发，除非你能够独立解决 OpenAI API 本地代理问题。
+
+1. 安装 nodejs 和 yarn，具体细节请询问 ChatGPT；
+2. 执行 `yarn install && yarn dev` 即可。
+
+### 本地部署 Local Deployment
+请直接询问 ChatGPT，使用下列 Prompt：
+```
+如何使用 pm2 和 yarn 部署 nextjs 项目到 ubuntu 服务器上，项目编译命令为 yarn build，启动命令为 yarn start，启动时需要设置环境变量为 OPENAI_API_KEY，端口为 3000，使用 ngnix 做反向代理
+```
+
+Please ask ChatGPT with prompt:
+```
+how to deploy nextjs project with pm2 and yarn on my ubuntu server, the build command is `yarn build`, the start command is `yarn start`, the project must start with env var named `OPENAI_API_KEY`, the port is 3000, use ngnix
+```
+
+### Docker Deployment
+请直接询问 ChatGPT，使用下列 Prompt：
+```
+如何使用 docker 部署 nextjs 项目到 ubuntu 服务器上，项目编译命令为 yarn build，启动命令为 yarn start，启动时需要设置环境变量为 OPENAI_API_KEY，端口为 3000，使用 ngnix 做反向代理
+```
+
+Please ask ChatGPT with prompt:
+```
+how to deploy nextjs project with docker on my ubuntu server, the build command is `yarn build`, the start command is `yarn start`, the project must start with env var named `OPENAI_API_KEY`, the port is 3000, use ngnix
+```
+
 ## 截图 Screenshots
 
 ![设置 Settings](./static/settings.png)

app/api/access.ts

@@ -0,0 +1,16 @@
+import md5 from "spark-md5";
+
+export function getAccessCodes(): Set<string> {
+  const code = process.env.CODE;
+
+  try {
+    const codes = (code?.split(",") ?? [])
+      .filter((v) => !!v)
+      .map((v) => md5.hash(v.trim()));
+    return new Set(codes);
+  } catch (e) {
+    return new Set();
+  }
+}
+
+export const ACCESS_CODES = getAccessCodes();

app/components/home.module.scss

@@ -237,6 +237,14 @@
   flex-direction: column;
   align-items: flex-start;
   animation: slide-in ease 0.3s;
+
+  &:hover {
+    .chat-message-top-actions {
+      opacity: 1;
+      right: 10px;
+      pointer-events: all;
+    }
+  }
 }
 
 .chat-message-user > .chat-message-container {
@@ -276,6 +284,34 @@
   user-select: text;
   word-break: break-word;
   border: var(--border-in-light);
+  position: relative;
+}
+
+.chat-message-top-actions {
+  font-size: 12px;
+  position: absolute;
+  right: 20px;
+  top: -26px;
+  transition: all ease 0.3s;
+  opacity: 0;
+  pointer-events: none;
+
+  display: flex;
+  flex-direction: row-reverse;
+
+  .chat-message-top-action {
+    opacity: 0.5;
+    color: var(--black);
+    cursor: pointer;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:not(:first-child) {
+      margin-right: 10px;
+    }
+  }
 }
 
 .chat-message-user > .chat-message-container > .chat-message-item {
@@ -288,10 +324,10 @@
   width: 100%;
   padding-top: 5px;
   box-sizing: border-box;
+  font-size: 12px;
 }
 
 .chat-message-action-date {
-  font-size: 12px;
   color: #aaa;
 }
 

app/components/home.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useLayoutEffect } from "react";
 
 import { IconButton } from "./button";
 import styles from "./home.module.scss";
@@ -21,11 +21,12 @@ import CopyIcon from "../icons/copy.svg";
 import DownloadIcon from "../icons/download.svg";
 
 import { Message, SubmitKey, useChatStore, ChatSession } from "../store";
-import { showModal } from "./ui-lib";
+import { showModal, showToast } from "./ui-lib";
 import { copyToClipboard, downloadAs, isIOS, selectOrCopy } from "../utils";
 import Locale from "../locales";
 
 import dynamic from "next/dynamic";
+import { REPO_URL } from "../constant";
 
 export function Loading(props: { noLogo?: boolean }) {
   return (
@@ -129,7 +130,10 @@ function useSubmitHandler() {
       (config.submitKey === SubmitKey.AltEnter && e.altKey) ||
       (config.submitKey === SubmitKey.CtrlEnter && e.ctrlKey) ||
       (config.submitKey === SubmitKey.ShiftEnter && e.shiftKey) ||
-      config.submitKey === SubmitKey.Enter
+      (config.submitKey === SubmitKey.Enter &&
+        !e.altKey &&
+        !e.ctrlKey &&
+        !e.shiftKey)
     );
   };
 
@@ -162,6 +166,8 @@ export function Chat(props: { showSideBar?: () => void }) {
   };
   const latestMessageRef = useRef<HTMLDivElement>(null);
 
+  const [hoveringMessage, setHoveringMessage] = useState(false);
+
   const messages = (session.messages as RenderMessage[])
     .concat(
       isLoading
@@ -188,14 +194,16 @@ export function Chat(props: { showSideBar?: () => void }) {
         : []
     );
 
-  useEffect(() => {
-    const dom = latestMessageRef.current;
-    if (dom && !isIOS()) {
-      dom.scrollIntoView({
-        behavior: "smooth",
-        block: "end",
-      });
-    }
+  useLayoutEffect(() => {
+    setTimeout(() => {
+      const dom = latestMessageRef.current;
+      if (dom && !isIOS() && !hoveringMessage) {
+        dom.scrollIntoView({
+          behavior: "smooth",
+          block: "end",
+        });
+      }
+    }, 500);
   });
 
   return (
@@ -244,7 +252,15 @@ export function Chat(props: { showSideBar?: () => void }) {
         </div>
       </div>
 
-      <div className={styles["chat-body"]}>
+      <div
+        className={styles["chat-body"]}
+        onMouseOver={() => {
+          setHoveringMessage(true);
+        }}
+        onMouseOut={() => {
+          setHoveringMessage(false);
+        }}
+      >
         {messages.map((message, i) => {
           const isUser = message.role === "user";
 
@@ -265,6 +281,25 @@ export function Chat(props: { showSideBar?: () => void }) {
                   </div>
                 )}
                 <div className={styles["chat-message-item"]}>
+                  {!isUser && (
+                    <div className={styles["chat-message-top-actions"]}>
+                      {message.streaming && (
+                        <div
+                          className={styles["chat-message-top-action"]}
+                          onClick={() => showToast(Locale.WIP)}
+                        >
+                          {Locale.Chat.Actions.Stop}
+                        </div>
+                      )}
+
+                      <div
+                        className={styles["chat-message-top-action"]}
+                        onClick={() => copyToClipboard(message.content)}
+                      >
+                        {Locale.Chat.Actions.Copy}
+                      </div>
+                    </div>
+                  )}
                   {(message.preview || message.content.length === 0) &&
                   !isUser ? (
                     <LoadingIcon />
@@ -292,9 +327,9 @@ export function Chat(props: { showSideBar?: () => void }) {
             </div>
           );
         })}
-        <span ref={latestMessageRef} style={{ opacity: 0 }}>
+        <div ref={latestMessageRef} style={{ opacity: 0, height: "2em" }}>
           -
-        </span>
+        </div>
       </div>
 
       <div className={styles["chat-input-panel"]}>
@@ -463,10 +498,7 @@ export function Home() {
               />
             </div>
             <div className={styles["sidebar-action"]}>
-              <a
-                href="https://github.com/Yidadaa/ChatGPT-Next-Web"
-                target="_blank"
-              >
+              <a href={REPO_URL} target="_blank">
                 <IconButton icon={<GithubIcon />} />
               </a>
             </div>

app/components/markdown.tsx

@@ -2,13 +2,19 @@ import ReactMarkdown from "react-markdown";
 import "katex/dist/katex.min.css";
 import RemarkMath from "remark-math";
 import RehypeKatex from "rehype-katex";
-import RemarkGfm from 'remark-gfm'
-import RehypePrsim from 'rehype-prism-plus'
+import RemarkGfm from "remark-gfm";
+import RehypePrsim from "rehype-prism-plus";
 
 export function Markdown(props: { content: string }) {
-    return (
-        <ReactMarkdown remarkPlugins={[RemarkMath, RemarkGfm]} rehypePlugins={[RehypeKatex, RehypePrsim]}>
-            {props.content}
-        </ReactMarkdown>
-    );
-}
+  return (
+    <ReactMarkdown
+      remarkPlugins={[RemarkMath, RemarkGfm]}
+      rehypePlugins={[
+        RehypeKatex,
+        [RehypePrsim, { ignoreMissing: true }],
+      ]}
+    >
+      {props.content}
+    </ReactMarkdown>
+  );
+}

app/components/settings.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect, useRef, useMemo } from "react";
 
 import EmojiPicker, { Theme as EmojiTheme } from "emoji-picker-react";
 
@@ -11,10 +11,20 @@ import ClearIcon from "../icons/clear.svg";
 import { List, ListItem, Popover } from "./ui-lib";
 
 import { IconButton } from "./button";
-import { SubmitKey, useChatStore, Theme, ALL_MODELS } from "../store";
+import {
+  SubmitKey,
+  useChatStore,
+  Theme,
+  ALL_MODELS,
+  useUpdateStore,
+  useAccessStore,
+} from "../store";
 import { Avatar } from "./home";
 
 import Locale, { changeLang, getLang } from "../locales";
+import { getCurrentCommitId } from "../utils";
+import Link from "next/link";
+import { UPDATE_URL } from "../constant";
 
 function SettingItem(props: {
   title: string;
@@ -29,7 +39,7 @@ function SettingItem(props: {
           <div className={styles["settings-sub-title"]}>{props.subTitle}</div>
         )}
       </div>
-      <div>{props.children}</div>
+      {props.children}
     </ListItem>
   );
 }
@@ -45,6 +55,29 @@ export function Settings(props: { closeSettings: () => void }) {
     ]
   );
 
+  const updateStore = useUpdateStore();
+  const [checkingUpdate, setCheckingUpdate] = useState(false);
+  const currentId = getCurrentCommitId();
+  const remoteId = updateStore.remoteId;
+  const hasNewVersion = currentId !== remoteId;
+
+  function checkUpdate(force = false) {
+    setCheckingUpdate(true);
+    updateStore.getLatestCommitId(force).then(() => {
+      setCheckingUpdate(false);
+    });
+  }
+
+  useEffect(() => {
+    checkUpdate();
+  }, []);
+
+  const accessStore = useAccessStore();
+  const enabledAccessControl = useMemo(
+    () => accessStore.enabledAccessControl(),
+    []
+  );
+
   return (
     <>
       <div className={styles["window-header"]}>
@@ -109,6 +142,31 @@ export function Settings(props: { closeSettings: () => void }) {
             </Popover>
           </SettingItem>
 
+          <SettingItem
+            title={Locale.Settings.Update.Version(currentId)}
+            subTitle={
+              checkingUpdate
+                ? Locale.Settings.Update.IsChecking
+                : hasNewVersion
+                ? Locale.Settings.Update.FoundUpdate(remoteId ?? "ERROR")
+                : Locale.Settings.Update.IsLatest
+            }
+          >
+            {checkingUpdate ? (
+              <div />
+            ) : hasNewVersion ? (
+              <Link href={UPDATE_URL} target="_blank" className="link">
+                {Locale.Settings.Update.GoToUpdate}
+              </Link>
+            ) : (
+              <IconButton
+                icon={<ResetIcon></ResetIcon>}
+                text={Locale.Settings.Update.CheckUpdate}
+                onClick={() => checkUpdate(true)}
+              />
+            )}
+          </SettingItem>
+
           <SettingItem title={Locale.Settings.SendKey}>
             <select
               value={config.submitKey}
@@ -181,6 +239,24 @@ export function Settings(props: { closeSettings: () => void }) {
           </div>
         </List>
         <List>
+          {enabledAccessControl ? (
+            <SettingItem
+              title={Locale.Settings.AccessCode.Title}
+              subTitle={Locale.Settings.AccessCode.SubTitle}
+            >
+              <input
+                value={accessStore.accessCode}
+                type="text"
+                placeholder={Locale.Settings.AccessCode.Placeholder}
+                onChange={(e) => {
+                  accessStore.updateCode(e.currentTarget.value);
+                }}
+              ></input>
+            </SettingItem>
+          ) : (
+            <></>
+          )}
+
           <SettingItem
             title={Locale.Settings.HistoryCount.Title}
             subTitle={Locale.Settings.HistoryCount.SubTitle}

app/constant.ts

@@ -0,0 +1,5 @@
+export const OWNER = "Yidadaa";
+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`;

app/icons/export.svg

@@ -1,24 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16"
-  height="16" viewBox="0 0 16 16" fill="none">
-  <defs>
-    <rect id="path_0" x="0" y="0" width="16" height="16" />
-  </defs>
-  <g opacity="1" transform="translate(0 0)  rotate(0 8 8)">
-    <mask id="bg-mask-0" fill="white">
-      <use xlink:href="#path_0"></use>
-    </mask>
-    <g mask="url(#bg-mask-0)">
-      <path id="路径 1"
-        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
-        transform="translate(2 9)  rotate(0 6 2.6666666666666665)"
-        d="M12,0C12,2 10.67,5.33 6,5.33C1.33,5.33 0,2 0,0 " />
-      <path id="路径 2"
-        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
-        transform="translate(8.0026 1.7001966666666668)  rotate(0 0 4.649918333333334)"
-        d="M0,0L0,9.3 " />
-      <path id="路径 3"
-        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
-        transform="translate(4 1.6666666666666665)  rotate(0 4 2)" d="M0,4L4,0L8,4 " />
-    </g>
-  </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="none"><defs><rect id="path_0" x="0" y="0" width="16" height="16" /></defs><g opacity="1" transform="translate(0 0)  rotate(0 8 8)"><mask id="bg-mask-0" fill="white"><use xlink:href="#path_0"></use></mask><g mask="url(#bg-mask-0)" ><path  id="路径 1" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(1.2400716519614834 2.3333321805983163)  rotate(0 6.785117896431597 4.552683909700841)" d="M12.27,9.11C13.36,8.34 13.83,6.94 13.43,5.67C13.02,4.39 11.78,3.69 10.44,3.69L9.67,3.69C9.16,1.72 7.5,0.27 5.47,0.03C3.45,-0.2 1.5,0.84 0.56,2.64C-0.38,4.45 -0.11,6.64 1.23,8.17 " /><path  id="路径 2" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(8 7.666666666666666)  rotate(0 0.00140000000000029 3)" d="M0,6L0,0 " /><path  id="路径 3" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(5.8786 11.5454)  rotate(0 2.1213333333333333 1.0606666666666662)" d="M4.24,0L2.12,2.12L0,0 " /></g></g></svg>

app/layout.tsx

@@ -1,12 +1,35 @@
+/* eslint-disable @next/next/no-page-custom-font */
 import "./styles/globals.scss";
 import "./styles/markdown.scss";
 import "./styles/prism.scss";
+import process from "child_process";
+import { ACCESS_CODES } from "./api/access";
+
+const COMMIT_ID = process
+  .execSync("git rev-parse --short HEAD")
+  .toString()
+  .trim();
 
 export const metadata = {
   title: "ChatGPT Next Web",
   description: "Your personal ChatGPT Chat Bot.",
 };
 
+function Meta() {
+  const metas = {
+    version: COMMIT_ID,
+    access: ACCESS_CODES.size > 0 ? "enabled" : "disabled",
+  };
+
+  return (
+    <>
+      {Object.entries(metas).map(([k, v]) => (
+        <meta name={k} content={v} key={k} />
+      ))}
+    </>
+  );
+}
+
 export default function RootLayout({
   children,
 }: {
@@ -19,7 +42,14 @@ export default function RootLayout({
           name="viewport"
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
         />
+        <Meta />
         <link rel="manifest" href="/site.webmanifest"></link>
+        <link rel="preconnect" href="https://fonts.googleapis.com"></link>
+        <link rel="preconnect" href="https://fonts.gstatic.com"></link>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700;900&display=swap"
+          rel="stylesheet"
+        ></link>
       </head>
       <body>{children}</body>
     </html>

app/locales/cn.ts

@@ -1,4 +1,8 @@
 const cn = {
+  WIP: "该功能仍在开发中……",
+  Error: {
+    Unauthorized: "现在是未授权状态，请在设置页填写授权码。",
+  },
   ChatItem: {
     ChatItemCount: (count: number) => `${count} 条对话`,
   },
@@ -8,6 +12,8 @@ const cn = {
       ChatList: "查看消息列表",
       CompressedHistory: "查看压缩后的历史 Prompt",
       Export: "导出聊天记录",
+      Copy: "复制",
+      Stop: "停止",
     },
     Typing: "正在输入…",
     Input: (submitKey: string) => `输入消息，${submitKey} 发送`,
@@ -43,6 +49,14 @@ const cn = {
       },
     },
     Avatar: "头像",
+    Update: {
+      Version: (x: string) => `当前版本：${x}`,
+      IsLatest: "已是最新版本",
+      CheckUpdate: "检查更新",
+      IsChecking: "正在检查更新...",
+      FoundUpdate: (x: string) => `发现新版本：${x}`,
+      GoToUpdate: "前往更新",
+    },
     SendKey: "发送键",
     Theme: "主题",
     TightBorder: "紧凑边框",
@@ -54,6 +68,11 @@ const cn = {
       Title: "历史消息长度压缩阈值",
       SubTitle: "当未压缩的历史消息超过该值时，将进行压缩",
     },
+    AccessCode: {
+      Title: "访问码",
+      SubTitle: "现在是受控访问状态",
+      Placeholder: "请输入访问码",
+    },
     Model: "模型 (model)",
     Temperature: {
       Title: "随机性 (temperature)",

app/locales/en.ts

@@ -1,6 +1,11 @@
 import type { LocaleType } from "./index";
 
 const en: LocaleType = {
+  WIP: "WIP...",
+  Error: {
+    Unauthorized:
+      "Unauthorized access, please enter access code in settings page.",
+  },
   ChatItem: {
     ChatItemCount: (count: number) => `${count} messages`,
   },
@@ -10,6 +15,8 @@ const en: LocaleType = {
       ChatList: "Go To Chat List",
       CompressedHistory: "Compressed History Memory Prompt",
       Export: "Export All Messages as Markdown",
+      Copy: "Copy",
+      Stop: "Stop",
     },
     Typing: "Typing…",
     Input: (submitKey: string) =>
@@ -46,6 +53,14 @@ const en: LocaleType = {
       },
     },
     Avatar: "Avatar",
+    Update: {
+      Version: (x: string) => `Version: ${x}`,
+      IsLatest: "Latest version",
+      CheckUpdate: "Check Update",
+      IsChecking: "Checking update...",
+      FoundUpdate: (x: string) => `Found new version: ${x}`,
+      GoToUpdate: "Update",
+    },
     SendKey: "Send Key",
     Theme: "Theme",
     TightBorder: "Tight Border",
@@ -58,6 +73,11 @@ const en: LocaleType = {
       SubTitle:
         "Will compress if uncompressed messages length exceeds the value",
     },
+    AccessCode: {
+      Title: "Access Code",
+      SubTitle: "Access control enabled",
+      Placeholder: "Need Access Code",
+    },
     Model: "Model",
     Temperature: {
       Title: "Temperature",

app/requests.ts

@@ -1,5 +1,6 @@
 import type { ChatRequest, ChatReponse } from "./api/chat/typing";
-import { filterConfig, isValidModel, Message, ModelConfig } from "./store";
+import { filterConfig, Message, ModelConfig, useAccessStore } from "./store";
+import Locale from "./locales";
 
 const TIME_OUT_MS = 30000;
 
@@ -26,6 +27,17 @@ const makeRequestParam = (
   };
 };
 
+function getHeaders() {
+  const accessStore = useAccessStore.getState();
+  let headers: Record<string, string> = {};
+
+  if (accessStore.enabledAccessControl()) {
+    headers["access-code"] = accessStore.accessCode;
+  }
+
+  return headers;
+}
+
 export async function requestChat(messages: Message[]) {
   const req: ChatRequest = makeRequestParam(messages, { filterBot: true });
 
@@ -33,6 +45,7 @@ export async function requestChat(messages: Message[]) {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
+      ...getHeaders(),
     },
     body: JSON.stringify(req),
   });
@@ -69,6 +82,7 @@ export async function requestChatStream(
       method: "POST",
       headers: {
         "Content-Type": "application/json",
+        ...getHeaders(),
       },
       body: JSON.stringify(req),
       signal: controller.signal,
@@ -82,6 +96,8 @@ export async function requestChatStream(
       controller.abort();
     };
 
+    console.log(res);
+
     if (res.ok) {
       const reader = res.body?.getReader();
       const decoder = new TextDecoder();
@@ -102,14 +118,18 @@ export async function requestChatStream(
         }
       }
 
+      finish();
+    } else if (res.status === 401) {
+      console.error("Anauthorized");
+      responseText = Locale.Error.Unauthorized;
       finish();
     } else {
       console.error("Stream Error");
       options?.onError(new Error("Stream Error"));
     }
   } catch (err) {
-    console.error("NetWork Error");
-    options?.onError(new Error("NetWork Error"));
+    console.error("NetWork Error", err);
+    options?.onError(err as Error);
   }
 }
 

app/store/access.ts

@@ -0,0 +1,30 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { queryMeta } from "../utils";
+
+export interface AccessControlStore {
+  accessCode: string;
+
+  updateCode: (_: string) => void;
+  enabledAccessControl: () => boolean;
+}
+
+export const ACCESS_KEY = "access-control";
+
+export const useAccessStore = create<AccessControlStore>()(
+  persist(
+    (set, get) => ({
+      accessCode: "",
+      enabledAccessControl() {
+        return queryMeta("access") === "enabled";
+      },
+      updateCode(code: string) {
+        set((state) => ({ accessCode: code }));
+      },
+    }),
+    {
+      name: ACCESS_KEY,
+      version: 1,
+    }
+  )
+);

app/store/app.ts

@@ -2,10 +2,10 @@ import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
 import { type ChatCompletionResponseMessage } from "openai";
-import { requestChatStream, requestWithPrompt } from "./requests";
-import { trimTopic } from "./utils";
+import { requestChatStream, requestWithPrompt } from "../requests";
+import { trimTopic } from "../utils";
 
-import Locale from "./locales";
+import Locale from "../locales";
 
 export type Message = ChatCompletionResponseMessage & {
   date: string;
@@ -308,6 +308,7 @@ export const useChatStore = create<ChatStore>()(
           onMessage(content, done) {
             if (done) {
               botMessage.streaming = false;
+              botMessage.content = content;
               get().onNewMessage(botMessage);
             } else {
               botMessage.content = content;

app/store/index.ts

@@ -0,0 +1,3 @@
+export * from "./app";
+export * from "./update";
+export * from "./access";

app/store/update.ts

@@ -0,0 +1,49 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { FETCH_COMMIT_URL } from "../constant";
+import { getCurrentCommitId } from "../utils";
+
+export interface UpdateStore {
+  lastUpdate: number;
+  remoteId: string;
+
+  getLatestCommitId: (force: boolean) => Promise<string>;
+}
+
+export const UPDATE_KEY = "chat-update";
+
+export const useUpdateStore = create<UpdateStore>()(
+  persist(
+    (set, get) => ({
+      lastUpdate: 0,
+      remoteId: "",
+
+      async getLatestCommitId(force = false) {
+        const overOneHour = Date.now() - get().lastUpdate > 3600 * 1000;
+        const shouldFetch = force || overOneHour;
+        if (!shouldFetch) {
+          return getCurrentCommitId();
+        }
+
+        try {
+          const data = await (await fetch(FETCH_COMMIT_URL)).json();
+          const sha = data[0].sha as string;
+          const remoteId = sha.substring(0, 7);
+          set(() => ({
+            lastUpdate: Date.now(),
+            remoteId,
+          }));
+          console.log("[Got Upstream] ", remoteId);
+          return remoteId;
+        } catch (error) {
+          console.error("[Fetch Upstream Commit Id]", error);
+          return getCurrentCommitId();
+        }
+      },
+    }),
+    {
+      name: UPDATE_KEY,
+      version: 1,
+    }
+  )
+);

app/styles/globals.scss

@@ -83,6 +83,8 @@ body {
   justify-content: center;
   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;
 }
 
 ::-webkit-scrollbar {
@@ -165,7 +167,8 @@ input[type="range"]::-webkit-slider-thumb:hover {
   width: 24px;
 }
 
-input[type="number"] {
+input[type="number"],
+input[type="text"] {
   appearance: none;
   border-radius: 10px;
   border: var(--border-in-light);
@@ -174,6 +177,7 @@ input[type="number"] {
   background: var(--white);
   color: var(--black);
   padding: 0 10px;
+  max-width: 50%;
 }
 
 div.math {
@@ -192,3 +196,13 @@ div.math {
   align-items: center;
   justify-content: center;
 }
+
+.link {
+  font-size: 12px;
+  color: var(--primary);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

app/styles/markdown.scss

@@ -96,8 +96,6 @@
   margin: 0;
   color: var(--color-fg-default);
   background-color: var(--color-canvas-default);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
-    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   font-size: 14px;
   line-height: 1.5;
   word-wrap: break-word;
@@ -319,7 +317,7 @@
   cursor: pointer;
 }
 
-.markdown-body details:not([open])>*:not(summary) {
+.markdown-body details:not([open]) > *:not(summary) {
   display: none !important;
 }
 
@@ -489,11 +487,11 @@
   content: "";
 }
 
-.markdown-body>*:first-child {
+.markdown-body > *:first-child {
   margin-top: 0 !important;
 }
 
-.markdown-body>*:last-child {
+.markdown-body > *:last-child {
   margin-bottom: 0 !important;
 }
 
@@ -529,11 +527,11 @@
   margin-bottom: 16px;
 }
 
-.markdown-body blockquote> :first-child {
+.markdown-body blockquote > :first-child {
   margin-top: 0;
 }
 
-.markdown-body blockquote> :last-child {
+.markdown-body blockquote > :last-child {
   margin-bottom: 0;
 }
 
@@ -632,7 +630,7 @@
   list-style-type: decimal;
 }
 
-.markdown-body div>ol:not([type]) {
+.markdown-body div > ol:not([type]) {
   list-style-type: decimal;
 }
 
@@ -644,11 +642,11 @@
   margin-bottom: 0;
 }
 
-.markdown-body li>p {
+.markdown-body li > p {
   margin-top: 16px;
 }
 
-.markdown-body li+li {
+.markdown-body li + li {
   margin-top: 0.25em;
 }
 
@@ -711,7 +709,7 @@
   overflow: hidden;
 }
 
-.markdown-body span.frame>span {
+.markdown-body span.frame > span {
   display: block;
   float: left;
   width: auto;
@@ -739,7 +737,7 @@
   clear: both;
 }
 
-.markdown-body span.align-center>span {
+.markdown-body span.align-center > span {
   display: block;
   margin: 13px auto 0;
   overflow: hidden;
@@ -757,7 +755,7 @@
   clear: both;
 }
 
-.markdown-body span.align-right>span {
+.markdown-body span.align-right > span {
   display: block;
   margin: 13px 0 0;
   overflow: hidden;
@@ -787,7 +785,7 @@
   overflow: hidden;
 }
 
-.markdown-body span.float-right>span {
+.markdown-body span.float-right > span {
   display: block;
   margin: 13px auto 0;
   overflow: hidden;
@@ -821,7 +819,7 @@
   font-size: 100%;
 }
 
-.markdown-body pre>code {
+.markdown-body pre > code {
   padding: 0;
   margin: 0;
   word-break: normal;
@@ -1085,7 +1083,7 @@
   cursor: pointer;
 }
 
-.markdown-body .task-list-item+.task-list-item {
+.markdown-body .task-list-item + .task-list-item {
   margin-top: 4px;
 }
 
@@ -1107,7 +1105,9 @@
 }
 
 .markdown-body .contains-task-list:hover .task-list-item-convert-container,
-.markdown-body .contains-task-list:focus-within .task-list-item-convert-container {
+.markdown-body
+  .contains-task-list:focus-within
+  .task-list-item-convert-container {
   display: block;
   width: auto;
   height: 24px;
@@ -1117,4 +1117,4 @@
 
 .markdown-body ::-webkit-calendar-picker-indicator {
   filter: invert(50%);
-}
+}

app/styles/prism.scss

@@ -1,9 +1,10 @@
-code[class*="language-"],
-pre[class*="language-"] {
+.markdown-body {
+  code[class*="language-"],
+  pre[class*="language-"] {
     color: #f8f8f2;
     background: none;
     text-shadow: 0 1px rgba(0, 0, 0, 0.3);
-    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
     text-align: left;
     white-space: pre;
     word-spacing: normal;
@@ -17,131 +18,130 @@ pre[class*="language-"] {
     -moz-hyphens: none;
     -ms-hyphens: none;
     hyphens: none;
-}
+  }
 
-/* Code blocks */
-pre[class*="language-"] {
+  /* Code blocks */
+  pre[class*="language-"] {
     padding: 1em;
-    margin: .5em 0;
+    margin: 0.5em 0;
     overflow: auto;
     border-radius: 0.3em;
-}
+  }
 
-:not(pre)>code[class*="language-"],
-pre[class*="language-"] {
+  :not(pre) > code[class*="language-"],
+  pre[class*="language-"] {
     background: #282a36;
-}
+  }
 
-/* Inline code */
-:not(pre)>code[class*="language-"] {
-    padding: .1em;
-    border-radius: .3em;
+  /* Inline code */
+  :not(pre) > code[class*="language-"] {
+    padding: 0.1em;
+    border-radius: 0.3em;
     white-space: normal;
-}
+  }
 
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
     color: #6272a4;
-}
+  }
 
-.token.punctuation {
+  .token.punctuation {
     color: #f8f8f2;
-}
+  }
 
-.namespace {
-    opacity: .7;
-}
+  .namespace {
+    opacity: 0.7;
+  }
 
-.token.property,
-.token.tag,
-.token.constant,
-.token.symbol,
-.token.deleted {
+  .token.property,
+  .token.tag,
+  .token.constant,
+  .token.symbol,
+  .token.deleted {
     color: #ff79c6;
-}
+  }
 
-.token.boolean,
-.token.number {
+  .token.boolean,
+  .token.number {
     color: #bd93f9;
-}
+  }
 
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
     color: #50fa7b;
-}
+  }
 
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string,
-.token.variable {
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string,
+  .token.variable {
     color: #f8f8f2;
-}
+  }
 
-.token.atrule,
-.token.attr-value,
-.token.function,
-.token.class-name {
+  .token.atrule,
+  .token.attr-value,
+  .token.function,
+  .token.class-name {
     color: #f1fa8c;
-}
+  }
 
-.token.keyword {
+  .token.keyword {
     color: #8be9fd;
-}
+  }
 
-.token.regex,
-.token.important {
+  .token.regex,
+  .token.important {
     color: #ffb86c;
-}
+  }
 
-.token.important,
-.token.bold {
+  .token.important,
+  .token.bold {
     font-weight: bold;
-}
+  }
 
-.token.italic {
+  .token.italic {
     font-style: italic;
-}
+  }
 
-.token.entity {
+  .token.entity {
     cursor: help;
+  }
 }
 
 @mixin light {
-    .markdown-body pre {
-        filter: invert(1) hue-rotate(50deg) brightness(1.3);
-    }
+  .markdown-body pre[class*="language-"] {
+    filter: invert(1) hue-rotate(50deg) brightness(1.3);
+  }
 }
 
 @mixin dark {
-    .markdown-body pre {
-        filter: none;
-    }
+  .markdown-body pre[class*="language-"] {
+    filter: none;
+  }
 }
 
-
 :root {
-    @include light();
+  @include light();
 }
 
 .light {
-    @include light();
+  @include light();
 }
 
 .dark {
-    @include dark();
+  @include dark();
 }
 
-
 @media (prefers-color-scheme: dark) {
-    :root {
-        @include dark();
-    }
-}
+  :root {
+    @include dark();
+  }
+}

app/utils.ts

@@ -56,3 +56,28 @@ export function selectOrCopy(el: HTMLElement, content: string) {
 
   return true;
 }
+
+export function queryMeta(key: string, defaultValue?: string): string {
+  let ret: string;
+  if (document) {
+    const meta = document.head.querySelector(
+      `meta[name='${key}']`
+    ) as HTMLMetaElement;
+    ret = meta?.content ?? "";
+  } else {
+    ret = defaultValue ?? "";
+  }
+
+  return ret;
+}
+
+let currentId: string;
+export function getCurrentCommitId() {
+  if (currentId) {
+    return currentId;
+  }
+
+  currentId = queryMeta("version");
+
+  return currentId;
+}

middleware.ts

@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from "next/server";
+import { ACCESS_CODES } from "./app/api/access";
+import md5 from "spark-md5";
+
+export const config = {
+  matcher: ["/api/chat", "/api/chat-stream"],
+};
+
+export function middleware(req: NextRequest, res: NextResponse) {
+  const accessCode = req.headers.get("access-code");
+  const hashedCode = md5.hash(accessCode ?? "").trim();
+
+  console.log("[Auth] allowed hashed codes: ", [...ACCESS_CODES]);
+  console.log("[Auth] got access code:", accessCode);
+  console.log("[Auth] hashed access code:", hashedCode);
+
+  if (ACCESS_CODES.size > 0 && !ACCESS_CODES.has(hashedCode)) {
+    return NextResponse.json(
+      {
+        needAccessCode: true,
+        hint: "Please go settings page and fill your access code.",
+      },
+      {
+        status: 401,
+      }
+    );
+  }
+
+  return NextResponse.next();
+}

next.config.js

@@ -11,7 +11,7 @@ const nextConfig = {
     }); // 针对 SVG 的处理规则
 
     return config;
-  },
+  }
 };
 
 module.exports = nextConfig;

package.json

@@ -1,11 +1,9 @@
 {
   "name": "chatgpt-next-web",
-  "version": "0.1.0",
-  "private": true,
+  "version": "1.1",
+  "private": false,
   "scripts": {
     "dev": "next dev",
-    "local:dev": "./dev/proxychains.exe -f ./scripts/proxychains.conf yarn dev",
-    "local:start": "./dev/proxychains.exe -f ./scripts/proxychains.conf yarn start",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -16,7 +14,9 @@
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@types/react-katex": "^3.0.0",
+    "@types/spark-md5": "^3.0.2",
     "@vercel/analytics": "^0.1.11",
+    "cross-env": "^7.0.3",
     "emoji-picker-react": "^4.4.7",
     "eslint": "8.35.0",
     "eslint-config-next": "13.2.3",
@@ -31,6 +31,7 @@
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
     "sass": "^1.59.2",
+    "spark-md5": "^3.0.2",
     "typescript": "4.9.5",
     "zustand": "^4.3.6"
   }

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES2015",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,

yarn.lock

@@ -1390,6 +1390,11 @@
   resolved "https://registry.npmmirror.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
+"@types/spark-md5@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/spark-md5/-/spark-md5-3.0.2.tgz#da2e8a778a20335fc4f40b6471c4b0d86b70da55"
+  integrity sha512-82E/lVRaqelV9qmRzzJ1PKTpyrpnT7mwdneKNJB9hUtypZDMggloDfFUCIqRRx3lYRxteCwXSq9c+W71Vf0QnQ==
+
 "@types/unist@*", "@types/unist@^2.0.0":
   version "2.0.6"
   resolved "https://registry.npmmirror.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
@@ -1817,7 +1822,14 @@ cosmiconfig@^7.0.1:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+cross-env@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
+  integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
+cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -4257,6 +4269,11 @@ space-separated-tokens@^2.0.0:
   resolved "https://registry.npmmirror.com/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz#1ecd9d2350a3844572c3f4a312bceb018348859f"
   integrity sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==
 
+spark-md5@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/spark-md5/-/spark-md5-3.0.2.tgz#7952c4a30784347abcee73268e473b9c0167e3fc"
+  integrity sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==
+
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.npmmirror.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"