Merge pull request #812 from Yidadaa/bugfix-0415

refactor: remove protocol env vars

.github/ISSUE_TEMPLATE/反馈问题.md

@@ -7,6 +7,11 @@ assignees: ''
 
 ---
 
+**反馈须知**
+> 请在下方中括号内输入 x 来表示你已经知晓相关内容。
+- [ ] 我确认已经在 [常见问题](https://github.com/Yidadaa/ChatGPT-Next-Web/blob/main/docs/faq-cn.md) 中搜索了此次反馈的问题，没有找到解答；
+- [ ] 我确认已经在 [Issues](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) 列表（包括已经 Close 的）中搜索了此次反馈的问题，没有找到解答。
+
 **描述问题**
 请在此描述你遇到了什么问题。
 

.github/workflows/docker.yml

@@ -43,7 +43,7 @@ jobs:
         uses: docker/build-push-action@v4
         with:
           context: .
-          platforms: linux/amd64
+          platforms: linux/amd64,linux/arm64
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

.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

Dockerfile

@@ -17,7 +17,6 @@ RUN apk update && apk add --no-cache git
 
 ENV OPENAI_API_KEY=""
 ENV CODE=""
-ARG DOCKER=true
 
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
@@ -46,7 +45,7 @@ CMD if [ -n "$PROXY_URL" ]; then \
         host=$(echo $PROXY_URL | cut -d/ -f3 | cut -d: -f1); \
         port=$(echo $PROXY_URL | cut -d: -f3); \
         conf=/etc/proxychains.conf; \
-        echo "strict_chain" >> $conf; \
+        echo "strict_chain" > $conf; \
         echo "proxy_dns" >> $conf; \
         echo "remote_dns_subnet 224" >> $conf; \
         echo "tcp_read_time_out 15000" >> $conf; \

README.md

@@ -3,11 +3,15 @@
 
 <h1 align="center">ChatGPT Next Web</h1>
 
+English / [简体中文](./README_CN.md)
+
 One-Click to deploy well-designed ChatGPT web UI on Vercel.
 
 一键免费部署你的私人 ChatGPT 网页应用。
 
-[演示 Demo](https://chat-gpt-next-web.vercel.app/) / [反馈 Issues](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [Join Discord](https://discord.gg/zrhvHCr79N) / [QQ 群](https://user-images.githubusercontent.com/16968934/228190818-7dd00845-e9b9-4363-97e5-44c507ac76da.jpeg) / [打赏开发者](https://user-images.githubusercontent.com/16968934/227772541-5bcd52d8-61b7-488c-a203-0330d8006e2b.jpg) / [Buy Me a Coffee](https://www.buymeacoffee.com/yidadaa)
+[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/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)
 
@@ -20,8 +24,9 @@ One-Click to deploy well-designed ChatGPT web UI on Vercel.
 ## Features
 
 - **Deploy for free with one-click** on Vercel in under 1 minute
+- Privacy first, all data stored locally in the browser
 - Responsive design, dark mode and PWA
-- Fast first screen loading speed (~100kb)
+- Fast first screen loading speed (~100kb), support streaming response
 - Awesome prompts powered by [awesome-chatgpt-prompts-zh](https://github.com/PlexPt/awesome-chatgpt-prompts-zh) and [awesome-chatgpt-prompts](https://github.com/f/awesome-chatgpt-prompts)
 - Automatically compresses chat history to support long conversations while also saving your tokens
 - One-click export all chat history with full Markdown support
@@ -44,7 +49,8 @@ One-Click to deploy well-designed ChatGPT web UI on Vercel.
 
 - 在 1 分钟内使用 Vercel **免费一键部署**
 - 精心设计的 UI，响应式设计，支持深色模式，支持 PWA
-- 极快的首屏加载速度（~100kb）
+- 极快的首屏加载速度（~100kb），支持流式响应
+- 隐私安全，所有数据保存在用户浏览器本地
 - 海量的内置 prompt 列表，来自[中文](https://github.com/PlexPt/awesome-chatgpt-prompts-zh)和[英文](https://github.com/f/awesome-chatgpt-prompts)
 - 自动压缩上下文聊天记录，在节省 Token 的同时支持超长对话
 - 一键导出聊天记录，完整的 Markdown 支持
@@ -74,7 +80,9 @@ One-Click to deploy well-designed ChatGPT web UI on Vercel.
 
 ## FAQ
 
-[简体中文 > 常见问题](./docs/faq-cn.md) | [English > FAQ](./docs/faq.en.md)
+[简体中文 > 常见问题](./docs/faq-cn.md)
+
+[English > FAQ](./docs/faq-en.md)
 
 ## Keep Updated
 
@@ -84,12 +92,19 @@ If you have deployed your own project with just one click following the steps ab
 
 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.
+- Delete the original repository;
+- Use the fork button in the upper right corner of the page to fork this project;
+- Choose and deploy in Vercel again, [please see the detailed tutorial](./docs/vercel-cn.md).
 
-This project will be continuously updated, and after forking the project, the upstream code will be automatically synchronized every day without additional operations.
+### 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)
+
+![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.
 
@@ -121,18 +136,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#开发)
@@ -200,6 +209,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)
@@ -209,6 +220,7 @@ 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)
 
 ### Contributor
 

README_CN.md

@@ -38,12 +38,19 @@
 如果你按照上述步骤一键部署了自己的项目，可能会发现总是提示“存在更新”的问题，这是由于 Vercel 会默认为你创建一个新项目而不是 fork 本项目，这会导致无法正确地检测更新。
 推荐你按照下列步骤重新部署：
 
-- 删除掉原先的 repo；
-- fork 本项目；
-- 前往 vercel 控制台，删除掉原先的 project，然后新建 project，选择你刚刚 fork 出来的项目重新进行部署即可；
-- 在重新部署的过程中，请手动添加名为 `OPENAI_API_KEY` 的环境变量，并填入你的 api key 作为值。
+- 删除掉原先的仓库；
+- 使用页面右上角的 fork 按钮，fork 本项目；
+- 在 Vercel 重新选择并部署，[请查看详细教程](./docs/vercel-cn.md#如何新建项目)。
 
-本项目会持续更新，当你 Fork 项目之后，默认会每天自动同步上游代码，无需额外操作。
+### 打开自动更新
+
+当你 fork 项目之后，由于 Github 的限制，需要手动去你 fork 后的项目的 Actions 页面启用 Workflows，并启用 Upstream Sync Action，启用之后即可开启每小时定时自动更新：
+
+![自动更新](./docs/images/enable-actions.jpg)
+
+![启用自动更新](./docs/images/enable-actions-sync.jpg)
+
+### 手动更新代码
 
 如果你想让手动立即更新，可以查看 [Github 的文档](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork) 了解如何让 fork 的项目与上游代码同步。
 
@@ -79,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。
 
 ## 开发
 
@@ -131,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
 ```
 
@@ -147,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)
+> 见英文版。
 
 ### 贡献者
 

app/api/access.ts

@@ -1,17 +0,0 @@
-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();
-export const IS_IN_DOCKER = process.env.DOCKER;

app/api/chat-stream/route.ts

@@ -40,7 +40,7 @@ async function createStream(req: NextRequest) {
 
       const parser = createParser(onParse);
       for await (const chunk of res.body as any) {
-        parser.feed(decoder.decode(chunk));
+        parser.feed(decoder.decode(chunk, { stream: true }));
       }
     },
   });

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}`,

app/api/config/route.ts

@@ -0,0 +1,21 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import { getServerSideConfig } from "../../config/server";
+
+const serverConfig = getServerSideConfig();
+
+// Danger! Don not write any secret value here!
+// 警告！不要在这里写入任何敏感信息！
+const DANGER_CONFIG = {
+  needCode: serverConfig.needCode,
+};
+
+declare global {
+  type DangerConfig = typeof DANGER_CONFIG;
+}
+
+export async function POST(req: NextRequest) {
+  return NextResponse.json({
+    needCode: serverConfig.needCode,
+  });
+}

app/api/openai/typing.ts

@@ -4,4 +4,4 @@ import type {
 } from "openai";
 
 export type ChatRequest = CreateChatCompletionRequest;
-export type ChatReponse = CreateChatCompletionResponse;
+export type ChatResponse = CreateChatCompletionResponse;

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;

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,11 @@ 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 {
   Message,
   SubmitKey,
@@ -22,6 +28,7 @@ import {
   ROLES,
   createMessage,
   useAccessStore,
+  Theme,
 } from "../store";
 
 import {
@@ -31,6 +38,7 @@ import {
   isMobileScreen,
   selectOrCopy,
   autoGrowTextArea,
+  getCSSVar,
 } from "../utils";
 
 import dynamic from "next/dynamic";
@@ -60,7 +68,11 @@ export function Avatar(props: { role: Message["role"] }) {
   const config = useChatStore((state) => state.config);
 
   if (props.role !== "user") {
-    return <BotIcon className={styles["user-avtar"]} />;
+    return (
+      <div className="no-dark">
+        <BotIcon className={styles["user-avtar"]} />
+      </div>
+    );
   }
 
   return (
@@ -316,22 +328,78 @@ function useScrollToBottom() {
   // for auto-scroll
   const scrollRef = useRef<HTMLDivElement>(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();
+
+  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));
+  }
+
+  return (
+    <div className={chatStyle["chat-input-actions"]}>
+      {!props.hitBottom && (
+        <div
+          className={`${chatStyle["chat-input-action"]} clickable`}
+          onClick={props.scrollToBottom}
+        >
+          <BottomIcon />
+        </div>
+      )}
+      {props.hitBottom && (
+        <div
+          className={`${chatStyle["chat-input-action"]} clickable`}
+          onClick={props.showPromptModal}
+        >
+          <BrainIcon />
+        </div>
+      )}
+
+      <div
+        className={`${chatStyle["chat-input-action"]} clickable`}
+        onClick={nextTheme}
+      >
+        {theme === Theme.Auto ? (
+          <AutoIcon />
+        ) : theme === Theme.Light ? (
+          <LightIcon />
+        ) : theme === Theme.Dark ? (
+          <DarkIcon />
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
 export function Chat(props: {
   showSideBar?: () => void;
   sideBarShowing?: boolean;
@@ -350,7 +418,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 +443,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 +467,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;
 
@@ -533,6 +590,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 +610,7 @@ export function Chat(props: {
         <div className={styles["window-header-title"]}>
           <div
             className={`${styles["window-header-main-title"]} ${styles["chat-body-title"]}`}
-            onClickCapture={() => {
-              const newTopic = prompt(Locale.Chat.Rename, session.topic);
-              if (newTopic && newTopic !== session.topic) {
-                chatStore.updateCurrentSession(
-                  (session) => (session.topic = newTopic!),
-                );
-              }
-            }}
+            onClickCapture={renameSession}
           >
             {session.topic}
           </div>
@@ -572,12 +629,9 @@ export function Chat(props: {
           </div>
           <div className={styles["window-action-button"]}>
             <IconButton
-              icon={<BrainIcon />}
+              icon={<RenameIcon />}
               bordered
-              title={Locale.Chat.Actions.CompressedHistory}
-              onClick={() => {
-                setShowPromptModal(true);
-              }}
+              onClick={renameSession}
             />
           </div>
           <div className={styles["window-action-button"]}>
@@ -672,22 +726,20 @@ export function Chat(props: {
                         </div>
                       </div>
                     )}
-                  {(message.preview || message.content.length === 0) &&
-                  !isUser ? (
-                    <LoadingIcon />
-                  ) : (
-                    <div
-                      className="markdown-body"
-                      style={{ fontSize: `${fontSize}px` }}
-                      onContextMenu={(e) => onRightClick(e, message)}
-                      onDoubleClickCapture={() => {
-                        if (!isMobileScreen()) return;
-                        setUserInput(message.content);
-                      }}
-                    >
-                      <Markdown content={message.content} />
-                    </div>
-                  )}
+                  <Markdown
+                    content={message.content}
+                    loading={
+                      (message.preview || message.content.length === 0) &&
+                      !isUser
+                    }
+                    onContextMenu={(e) => onRightClick(e, message)}
+                    onDoubleClickCapture={() => {
+                      if (!isMobileScreen()) return;
+                      setUserInput(message.content);
+                    }}
+                    fontSize={fontSize}
+                    parentRef={scrollRef}
+                  />
                 </div>
                 {!isUser && !message.preview && (
                   <div className={styles["chat-message-actions"]}>
@@ -704,6 +756,12 @@ export function Chat(props: {
 
       <div className={styles["chat-input-panel"]}>
         <PromptHints prompts={promptHints} onPromptSelect={onPromptSelect} />
+
+        <ChatActions
+          showPromptModal={() => setShowPromptModal(true)}
+          scrollToBottom={scrollToBottom}
+          hitBottom={hitBottom}
+        />
         <div className={styles["chat-input-panel-inner"]}>
           <textarea
             ref={inputRef}

app/components/home.module.scss

@@ -36,6 +36,7 @@
     max-height: var(--full-height);
 
     border-radius: 0;
+    border: 0;
   }
 }
 
@@ -230,6 +231,7 @@
   flex: 1;
   overflow: auto;
   padding: 20px;
+  padding-bottom: 40px;
   position: relative;
 }
 
@@ -354,11 +356,16 @@
 }
 
 .chat-input-panel {
+  position: relative;
   width: 100%;
   padding: 20px;
-  padding-top: 5px;
+  padding-top: 10px;
   box-sizing: border-box;
   flex-direction: column;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  border-top: var(--border-in-light);
+  box-shadow: var(--card-shadow);
 }
 
 @mixin single-line {

app/components/home.tsx

@@ -2,13 +2,7 @@
 
 require("../polyfill");
 
-import {
-  useState,
-  useEffect,
-  useRef,
-  useCallback,
-  MouseEventHandler,
-} from "react";
+import { useState, useEffect, useRef } from "react";
 
 import { IconButton } from "./button";
 import styles from "./home.module.scss";
@@ -23,14 +17,13 @@ import LoadingIcon from "../icons/three-dots.svg";
 import CloseIcon from "../icons/close.svg";
 
 import { useChatStore } from "../store";
-import { isMobileScreen } from "../utils";
+import { getCSSVar, isMobileScreen } from "../utils";
 import Locale from "../locales";
 import { Chat } from "./chat";
 
 import dynamic from "next/dynamic";
 import { REPO_URL } from "../constant";
 import { ErrorBoundary } from "./error";
-import { useDebounce } from "use-debounce";
 
 export function Loading(props: { noLogo?: boolean }) {
   return (
@@ -73,9 +66,7 @@ function useSwitchTheme() {
       metaDescriptionDark?.setAttribute("content", "#151515");
       metaDescriptionLight?.setAttribute("content", "#fafafa");
     } else {
-      const themeColor = getComputedStyle(document.body)
-        .getPropertyValue("--theme-color")
-        .trim();
+      const themeColor = getCSSVar("--themeColor");
       metaDescriptionDark?.setAttribute("content", themeColor);
       metaDescriptionLight?.setAttribute("content", themeColor);
     }

app/components/markdown.tsx

@@ -8,6 +8,8 @@ import RehypeHighlight from "rehype-highlight";
 import { useRef, useState, RefObject, useEffect } from "react";
 import { copyToClipboard } from "../utils";
 
+import LoadingIcon from "../icons/three-dots.svg";
+
 export function PreCode(props: { children: any }) {
   const ref = useRef<HTMLPreElement>(null);
 
@@ -27,49 +29,78 @@ export function PreCode(props: { children: any }) {
   );
 }
 
-const useLazyLoad = (ref: RefObject<Element>): boolean => {
-  const [isIntersecting, setIntersecting] = useState<boolean>(false);
+export function Markdown(
+  props: {
+    content: string;
+    loading?: boolean;
+    fontSize?: number;
+    parentRef: RefObject<HTMLDivElement>;
+  } & React.DOMAttributes<HTMLDivElement>,
+) {
+  const mdRef = useRef<HTMLDivElement>(null);
+
+  const parent = props.parentRef.current;
+  const md = mdRef.current;
+  const rendered = useRef(true); // disable lazy loading for bad ux
+  const [counter, setCounter] = useState(0);
 
   useEffect(() => {
-    const observer = new IntersectionObserver(([entry]) => {
-      if (entry.isIntersecting) {
-        setIntersecting(true);
-        observer.disconnect();
+    // to triggr rerender
+    setCounter(counter + 1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.loading]);
+
+  const inView =
+    rendered.current ||
+    (() => {
+      if (parent && md) {
+        const parentBounds = parent.getBoundingClientRect();
+        const mdBounds = md.getBoundingClientRect();
+        const isInRange = (x: number) =>
+          x <= parentBounds.bottom && x >= parentBounds.top;
+        const inView = isInRange(mdBounds.top) || isInRange(mdBounds.bottom);
+
+        if (inView) {
+          rendered.current = true;
+        }
+
+        return inView;
       }
-    });
+    })();
 
-    if (ref.current) {
-      observer.observe(ref.current);
-    }
+  const shouldLoading = props.loading || !inView;
 
-    return () => {
-      observer.disconnect();
-    };
-  }, [ref]);
-
-  return isIntersecting;
-};
-
-export function Markdown(props: { content: string }) {
   return (
-    <ReactMarkdown
-      remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
-      rehypePlugins={[
-        RehypeKatex,
-        [
-          RehypeHighlight,
-          {
-            detect: false,
-            ignoreMissing: true,
-          },
-        ],
-      ]}
-      components={{
-        pre: PreCode,
-      }}
-      linkTarget={"_blank"}
+    <div
+      className="markdown-body"
+      style={{ fontSize: `${props.fontSize ?? 14}px` }}
+      ref={mdRef}
+      onContextMenu={props.onContextMenu}
+      onDoubleClickCapture={props.onDoubleClickCapture}
     >
-      {props.content}
-    </ReactMarkdown>
+      {shouldLoading ? (
+        <LoadingIcon />
+      ) : (
+        <ReactMarkdown
+          remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
+          rehypePlugins={[
+            RehypeKatex,
+            [
+              RehypeHighlight,
+              {
+                detect: false,
+                ignoreMissing: true,
+              },
+            ],
+          ]}
+          components={{
+            pre: PreCode,
+          }}
+          linkTarget={"_blank"}
+        >
+          {props.content}
+        </ReactMarkdown>
+      )}
+    </div>
   );
 }

app/components/settings.tsx

@@ -26,7 +26,7 @@ import {
 import { Avatar } from "./chat";
 
 import Locale, { AllLangs, changeLang, getLang } from "../locales";
-import { getCurrentVersion, getEmojiUrl } from "../utils";
+import { getEmojiUrl } from "../utils";
 import Link from "next/link";
 import { UPDATE_URL } from "../constant";
 import { SearchService, usePromptStore } from "../store/prompt";
@@ -88,13 +88,13 @@ export function Settings(props: { closeSettings: () => void }) {
 
   const updateStore = useUpdateStore();
   const [checkingUpdate, setCheckingUpdate] = useState(false);
-  const currentId = getCurrentVersion();
-  const remoteId = updateStore.remoteId;
-  const hasNewVersion = currentId !== remoteId;
+  const currentVersion = updateStore.version;
+  const remoteId = updateStore.remoteVersion;
+  const hasNewVersion = currentVersion !== remoteId;
 
   function checkUpdate(force = false) {
     setCheckingUpdate(true);
-    updateStore.getLatestCommitId(force).then(() => {
+    updateStore.getLatestVersion(force).then(() => {
       setCheckingUpdate(false);
     });
   }
@@ -224,7 +224,7 @@ export function Settings(props: { closeSettings: () => void }) {
           </SettingItem>
 
           <SettingItem
-            title={Locale.Settings.Update.Version(currentId)}
+            title={Locale.Settings.Update.Version(currentVersion ?? "unknown")}
             subTitle={
               checkingUpdate
                 ? Locale.Settings.Update.IsChecking

app/config/build.ts

@@ -0,0 +1,27 @@
+const COMMIT_ID: string = (() => {
+  try {
+    const childProcess = require("child_process");
+    return (
+      childProcess
+        // .execSync("git describe --tags --abbrev=0")
+        .execSync("git rev-parse --short HEAD")
+        .toString()
+        .trim()
+    );
+  } catch (e) {
+    console.error("[Build Config] No git or not from git repo.");
+    return "unknown";
+  }
+})();
+
+export const getBuildConfig = () => {
+  if (typeof process === "undefined") {
+    throw Error(
+      "[Server Config] you are importing a nodejs-only module outside of nodejs",
+    );
+  }
+
+  return {
+    commitId: COMMIT_ID,
+  };
+};

app/config/server.ts

@@ -0,0 +1,42 @@
+import md5 from "spark-md5";
+
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      OPENAI_API_KEY?: string;
+      CODE?: string;
+      PROXY_URL?: string;
+      VERCEL?: string;
+    }
+  }
+}
+
+const ACCESS_CODES = (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 getServerSideConfig = () => {
+  if (typeof process === "undefined") {
+    throw Error(
+      "[Server Config] you are importing a nodejs-only module outside of nodejs",
+    );
+  }
+
+  return {
+    apiKey: process.env.OPENAI_API_KEY,
+    code: process.env.CODE,
+    codes: ACCESS_CODES,
+    needCode: ACCESS_CODES.size > 0,
+    proxyUrl: process.env.PROXY_URL,
+    isVercel: !!process.env.VERCEL,
+  };
+};

app/constant.ts

@@ -5,3 +5,4 @@ export const ISSUE_URL = `https://github.com/${OWNER}/${REPO}/issues`;
 export const UPDATE_URL = `${REPO_URL}#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`;
+export const RUNTIME_CONFIG_DOM = "danger-runtime-config";

app/global.d.ts

@@ -0,0 +1,11 @@
+declare module "*.jpg";
+declare module "*.png";
+declare module "*.woff2";
+declare module "*.woff";
+declare module "*.ttf";
+declare module "*.scss" {
+  const content: Record<string, string>;
+  export default content;
+}
+
+declare module "*.svg";

app/icons/auto.svg

@@ -0,0 +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; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(5.666666666666666 5.333333333333333)  rotate(0 2.333750009536743 2.6666666666666665)" d="M0 5.33667L0.73 3.66667 M4.6675 5.33667L3.9375 3.66667 M0.729167 3.67L2.32917 0L3.93917 3.67 M0.729167 3.66667L3.93917 3.66667 " /><path  id="路径 5" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(1.3333333333333333 1.3333333333333333)  rotate(0 6.533316666666666 2.6666666666666665)" d="M13.07,5.33C12.45,2.29 9.76,0 6.53,0C3.31,0 0.62,2.29 0,5.33L2,4.67 " /><path  id="路径 6" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(1.3333333333333333 9.333333333333332)  rotate(0 6.533316666666666 2.6666666666666665)" d="M0,0C0.62,3.04 3.31,5.33 6.53,5.33C9.76,5.33 12.45,3.04 13.07,0L11.33,0.67 " /></g></g></svg>

app/icons/bottom.svg

@@ -0,0 +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(8.002766666666666 2)  rotate(0 0 4.649916666666667)" d="M0,9.3L0,0 " /><path  id="路径 2" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(4 7.333333333333333)  rotate(0 4 2)" d="M8,0L4,4L0,0 " /><path  id="路径 3" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(4 14)  rotate(0 4 0)" d="M8,0L0,0 " /></g></g></svg>

app/icons/dark.svg

@@ -0,0 +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(1.3333333333333333 1.333333333333485)  rotate(0 6.666666666666666 6.666666666666666)" d="M6.67,0L4.91,1.76L1.76,1.76L1.76,4.91L0,6.67L1.76,8.42L1.76,11.58L4.91,11.58L6.67,13.33L8.42,11.58L11.58,11.58L11.58,8.42L13.33,6.67L11.58,4.91L11.58,1.76L8.42,1.76L6.67,0Z " /><path  id="路径 2" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(5.666666666666666 5.44771525016904)  rotate(0 2.4732087011352872 2.442809041582063)" d="M4,0.55C2.17,-0.78 0,0.55 0,1.89C1.67,1.89 3.33,2.22 3.33,4.89C4.67,4.89 5.83,1.89 4,0.55Z " /></g></g></svg>

app/icons/light.svg

@@ -0,0 +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(4.340166666666667 4.21550000000002)  rotate(0 3.6666666666666665 3.666666666666666)" d="M0,3.67C0,5.69 1.64,7.33 3.67,7.33C5.69,7.33 7.33,5.69 7.33,3.67C7.33,1.64 5.69,0 3.67,0C1.64,0 0,1.64 0,3.67Z " /><path  id="路径 2" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(12.166666666666666 12.1719333333333)  rotate(0 0.4100499999999994 0.41240499999999997)" d="M0.82,0.82L0,0 " /><path  id="路径 3" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(3.0068366666666666 3.0654333333332033)  rotate(0 0.3411483333333332 0.34309999999999974)" d="M0.68,0.69L0,0 " /><path  id="路径 4" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(8 1.2155666666667457)  rotate(0 0 0.5)" d="M0,1L0,0 " /><path  id="路径 5" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(13.333266666666667 8.21550000000002)  rotate(0 0.6666666666666666 0)" d="M1.33,0L0,0 " /><path  id="路径 6" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(12.5108 3.065499999999929)  rotate(0 0.41123333333333295 0.41123333333333295)" d="M0,0.82L0.82,0 " /><path id="路径 7" fill-rule="evenodd" style="fill:#333333" transform="translate(5.673499999999999 5.5488333333332776)  rotate(0 1.1666666666666665 2.333333333333333)" opacity="1" d="M2.33,0C1.04,0 0,1.04 0,2.33C0,3.62 1.04,4.67 2.33,4.67L2.33,0Z " /><path  id="路径 8" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(1.3333966666666666 7.8821666666667625)  rotate(0 0.6666666666666666 0)" d="M0,0L1.33,0 " /><path  id="路径 9" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(3.348133333333333 12.3125)  rotate(0 0.3421333333333335 0.3421266666666665)" d="M0,0.68L0.68,0 " /><path  id="路径 10" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(8 13.548763333333454)  rotate(0 0 0.6666666666666666)" d="M0,1.33L0,0 " /></g></g></svg>

app/icons/rename.svg

@@ -0,0 +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(1.774903333333333 1.3006199999999999)  rotate(0 6.599664999999999 6.599656666666666)" d="M2.83,13.2L13.2,2.83L10.37,0L0,10.37L0,13.2L2.83,13.2Z " /><path  id="路径 2" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(9.317366666666667 4.129066666666667)  rotate(0 1.4142166666666658 1.4142166666666665)" d="M0,0L2.83,2.83 " /></g></g></svg>

app/layout.tsx

@@ -2,19 +2,9 @@
 import "./styles/globals.scss";
 import "./styles/markdown.scss";
 import "./styles/highlight.scss";
-import process from "child_process";
-import { ACCESS_CODES, IS_IN_DOCKER } from "./api/access";
+import { getBuildConfig } from "./config/build";
 
-let COMMIT_ID: string | undefined;
-try {
-  COMMIT_ID = process
-    // .execSync("git describe --tags --abbrev=0")
-    .execSync("git rev-parse --short HEAD")
-    .toString()
-    .trim();
-} catch (e) {
-  console.error("No git or not from git repo.");
-}
+const buildConfig = getBuildConfig();
 
 export const metadata = {
   title: "ChatGPT Next Web",
@@ -26,21 +16,6 @@ export const metadata = {
   themeColor: "#fafafa",
 };
 
-function Meta() {
-  const metas = {
-    version: COMMIT_ID ?? "unknown",
-    access: ACCESS_CODES.size > 0 || IS_IN_DOCKER ? "enabled" : "disabled",
-  };
-
-  return (
-    <>
-      {Object.entries(metas).map(([k, v]) => (
-        <meta name={k} content={v} key={k} />
-      ))}
-    </>
-  );
-}
-
 export default function RootLayout({
   children,
 }: {
@@ -58,7 +33,7 @@ export default function RootLayout({
           content="#151515"
           media="(prefers-color-scheme: dark)"
         />
-        <Meta />
+        <meta name="version" content={buildConfig.commitId} />
         <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>

app/locales/cn.ts

@@ -72,6 +72,8 @@ const cn = {
         tw: "繁體中文",
         es: "Español",
         it: "Italiano",
+        tr: "Türkçe",
+        jp: "日本語",
       },
     },
     Avatar: "头像",

app/locales/en.ts

@@ -75,6 +75,8 @@ const en: LocaleType = {
         tw: "繁體中文",
         es: "Español",
         it: "Italiano",
+        tr: "Türkçe",
+        jp: "日本語",
       },
     },
     Avatar: "Avatar",

app/locales/es.ts

@@ -75,6 +75,8 @@ const es: LocaleType = {
         tw: "繁體中文",
         es: "Español",
         it: "Italiano",
+        tr: "Türkçe",
+        jp: "日本語",
       },
     },
     Avatar: "Avatar",

app/locales/index.ts

@@ -3,10 +3,12 @@ import EN from "./en";
 import TW from "./tw";
 import ES from "./es";
 import IT from "./it";
+import TR from "./tr";
+import JP from "./jp";
 
 export type { LocaleType } from "./cn";
 
-export const AllLangs = ["en", "cn", "tw", "es", "it"] as const;
+export const AllLangs = ["en", "cn", "tw", "es", "it", "tr", "jp"] as const;
 type Lang = (typeof AllLangs)[number];
 
 const LANG_KEY = "lang";
@@ -50,6 +52,10 @@ export function getLang(): Lang {
     return "es";
   } else if (lang.includes("it")) {
     return "it";
+  } else if (lang.includes("tr")) {
+    return "tr";
+  } else if (lang.includes("jp")) {
+    return "jp";
   } else {
     return "en";
   }
@@ -60,4 +66,6 @@ export function changeLang(lang: Lang) {
   location.reload();
 }
 
-export default { en: EN, cn: CN, tw: TW, es: ES, it: IT }[getLang()];
+export default { en: EN, cn: CN, tw: TW, es: ES, it: IT, tr: TR, jp: JP }[
+  getLang()
+];

app/locales/it.ts

@@ -75,6 +75,8 @@ const it: LocaleType = {
         tw: "繁體中文",
         es: "Español",
         it: "Italiano",
+        tr: "Türkçe",
+        jp: "日本語",
       },
     },
     Avatar: "Avatar",

app/locales/jp.ts

@@ -0,0 +1,182 @@
+import { SubmitKey } from "../store/app";
+
+const jp = {
+  WIP: "この機能は開発中です……",
+  Error: {
+    Unauthorized:
+      "現在は未承認状態です。左下の設定ボタンをクリックし、アクセスパスワードを入力してください。",
+  },
+  ChatItem: {
+    ChatItemCount: (count: number) => `${count} 通のチャット`,
+  },
+  Chat: {
+    SubTitle: (count: number) => `ChatGPTとの ${count} 通のチャット`,
+    Actions: {
+      ChatList: "メッセージリストを表示",
+      CompressedHistory: "圧縮された履歴プロンプトを表示",
+      Export: "チャット履歴をエクスポート",
+      Copy: "コピー",
+      Stop: "停止",
+      Retry: "リトライ",
+    },
+    Rename: "チャットの名前を変更",
+    Typing: "入力中…",
+    Input: (submitKey: string) => {
+      var inputHints = `${submitKey} で送信`;
+      if (submitKey === String(SubmitKey.Enter)) {
+        inputHints += "，Shift + Enter で改行";
+      }
+      return inputHints + "，/ で自動補完をトリガー";
+    },
+    Send: "送信",
+  },
+  Export: {
+    Title: "チャット履歴をMarkdown形式でエクスポート",
+    Copy: "すべてコピー",
+    Download: "ファイルをダウンロード",
+    MessageFromYou: "あなたからのメッセージ",
+    MessageFromChatGPT: "ChatGPTからのメッセージ",
+  },
+  Memory: {
+    Title: "履歴メモリ",
+    EmptyContent: "まだ記憶されていません",
+    Send: "メモリを送信",
+    Copy: "メモリをコピー",
+    Reset: "チャットをリセット",
+    ResetConfirm:
+      "リセット後、現在のチャット履歴と過去のメモリがクリアされます。リセットしてもよろしいですか？",
+  },
+  Home: {
+    NewChat: "新しいチャット",
+    DeleteChat: "選択したチャットを削除してもよろしいですか？",
+    DeleteToast: "チャットが削除されました",
+    Revert: "元に戻す",
+  },
+  Settings: {
+    Title: "設定",
+    SubTitle: "設定オプション",
+    Actions: {
+      ClearAll: "すべてのデータをクリア",
+      ResetAll: "すべてのオプションをリセット",
+      Close: "閉じる",
+      ConfirmResetAll: {
+        Confirm: "すべての設定をリセットしてもよろしいですか？",
+      },
+      ConfirmClearAll: {
+        Confirm: "すべてのチャットをリセットしてもよろしいですか？",
+      },
+    },
+    Lang: {
+      Name: "Language",
+      Options: {
+        cn: "简体中文",
+        en: "English",
+        tw: "繁體中文",
+        es: "Español",
+        it: "Italiano",
+        tr: "Türkçe",
+        jp: "日本語",
+      },
+    },
+    Avatar: "アバター",
+    FontSize: {
+      Title: "フォントサイズ",
+      SubTitle: "チャット内容のフォントサイズ",
+    },
+
+    Update: {
+      Version: (x: string) => `現在のバージョン：${x}`,
+      IsLatest: "最新バージョンです",
+      CheckUpdate: "アップデートを確認",
+      IsChecking: "アップデートを確認しています...",
+      FoundUpdate: (x: string) => `新しいバージョンが見つかりました：${x}`,
+      GoToUpdate: "更新する",
+    },
+    SendKey: "送信キー",
+    Theme: "テーマ",
+    TightBorder: "ボーダーレスモード",
+    SendPreviewBubble: "プレビューバブルの送信",
+    Prompt: {
+      Disable: {
+        Title: "プロンプトの自動補完を無効にする",
+        SubTitle:
+          "入力フィールドの先頭に / を入力すると、自動補完がトリガーされます。",
+      },
+      List: "カスタムプロンプトリスト",
+      ListCount: (builtin: number, custom: number) =>
+        `組み込み ${builtin} 件、ユーザー定義 ${custom} 件`,
+      Edit: "編集",
+    },
+    HistoryCount: {
+      Title: "履歴メッセージ数を添付",
+      SubTitle: "リクエストごとに添付する履歴メッセージ数",
+    },
+    CompressThreshold: {
+      Title: "履歴メッセージの長さ圧縮しきい値",
+      SubTitle:
+        "圧縮されていない履歴メッセージがこの値を超えた場合、圧縮が行われます。",
+    },
+    Token: {
+      Title: "APIキー",
+      SubTitle: "自分のキーを使用してパスワードアクセス制限を迂回する",
+      Placeholder: "OpenAI APIキー",
+    },
+    Usage: {
+      Title: "残高照会",
+      SubTitle(used: any, total: any) {
+        return `今月は $${used} を使用しました。総額は $${total} です。`;
+      },
+      IsChecking: "確認中...",
+      Check: "再確認",
+      NoAccess: "APIキーまたはアクセスパスワードを入力して残高を表示",
+    },
+    AccessCode: {
+      Title: "アクセスパスワード",
+      SubTitle: "暗号化アクセスが有効になっています",
+      Placeholder: "アクセスパスワードを入力してください",
+    },
+    Model: "モデル (model)",
+    Temperature: {
+      Title: "ランダム性 (temperature)",
+      SubTitle:
+        "値が大きいほど、回答がランダムになります。1以上の値には文字化けが含まれる可能性があります。",
+    },
+    MaxTokens: {
+      Title: "シングルレスポンス制限 (max_tokens)",
+      SubTitle: "1回のインタラクションで使用される最大トークン数",
+    },
+    PresencePenlty: {
+      Title: "トピックの新鮮度 (presence_penalty)",
+      SubTitle: "値が大きいほど、新しいトピックへの展開が可能になります。",
+    },
+  },
+  Store: {
+    DefaultTopic: "新しいチャット",
+    BotHello: "何かお手伝いできることはありますか",
+    Error: "エラーが発生しました。しばらくしてからやり直してください。",
+    Prompt: {
+      History: (content: string) =>
+        "これは、AI とユーザの過去のチャットを要約した前提となるストーリーです：" +
+        content,
+      Topic:
+        "4～5文字でこの文章の簡潔な主題を返してください。説明、句読点、感嘆詞、余分なテキストは無しで。もし主題がない場合は、「おしゃべり」を返してください",
+      Summarize:
+        "あなたとユーザの会話を簡潔にまとめて、後続のコンテキストプロンプトとして使ってください。200字以内に抑えてください。",
+    },
+    ConfirmClearAll:
+      "すべてのチャット、設定データをクリアしてもよろしいですか？",
+  },
+  Copy: {
+    Success: "クリップボードに書き込みました",
+    Failed: "コピーに失敗しました。クリップボード許可を与えてください。",
+  },
+  Context: {
+    Toast: (x: any) => `前置コンテキストが ${x} 件設定されました`,
+    Edit: "前置コンテキストと履歴メモリ",
+    Add: "新規追加",
+  },
+};
+
+export type LocaleType = typeof jp;
+
+export default jp;

app/locales/tr.ts

@@ -0,0 +1,181 @@
+import { SubmitKey } from "../store/app";
+import type { LocaleType } from "./index";
+
+const tr: LocaleType = {
+  WIP: "Çalışma devam ediyor...",
+  Error: {
+    Unauthorized:
+      "Yetkisiz erişim, lütfen erişim kodunu ayarlar sayfasından giriniz.",
+  },
+  ChatItem: {
+    ChatItemCount: (count: number) => `${count} mesaj`,
+  },
+  Chat: {
+    SubTitle: (count: number) => `ChatGPT tarafından ${count} mesaj`,
+    Actions: {
+      ChatList: "Sohbet Listesine Git",
+      CompressedHistory: "Sıkıştırılmış Geçmiş Bellek Komutu",
+      Export: "Tüm Mesajları Markdown Olarak Dışa Aktar",
+      Copy: "Kopyala",
+      Stop: "Durdur",
+      Retry: "Tekrar Dene",
+    },
+    Rename: "Sohbeti Yeniden Adlandır",
+    Typing: "Yazıyor…",
+    Input: (submitKey: string) => {
+      var inputHints = `Göndermek için ${submitKey}`;
+      if (submitKey === String(SubmitKey.Enter)) {
+        inputHints += ", kaydırmak için Shift + Enter";
+      }
+      return inputHints + ", komutları aramak için / (eğik çizgi)";
+    },
+    Send: "Gönder",
+  },
+  Export: {
+    Title: "Tüm Mesajlar",
+    Copy: "Tümünü Kopyala",
+    Download: "İndir",
+    MessageFromYou: "Sizin Mesajınız",
+    MessageFromChatGPT: "ChatGPT'nin Mesajı",
+  },
+  Memory: {
+    Title: "Bellek Komutları",
+    EmptyContent: "Henüz değil.",
+    Send: "Belleği Gönder",
+    Copy: "Belleği Kopyala",
+    Reset: "Oturumu Sıfırla",
+    ResetConfirm:
+      "Sıfırlama, geçerli görüşme geçmişini ve geçmiş belleği siler. Sıfırlamak istediğinizden emin misiniz?",
+  },
+  Home: {
+    NewChat: "Yeni Sohbet",
+    DeleteChat: "Seçili sohbeti silmeyi onaylıyor musunuz?",
+    DeleteToast: "Sohbet Silindi",
+    Revert: "Geri Al",
+  },
+  Settings: {
+    Title: "Ayarlar",
+    SubTitle: "Tüm Ayarlar",
+    Actions: {
+      ClearAll: "Tüm Verileri Temizle",
+      ResetAll: "Tüm Ayarları Sıfırla",
+      Close: "Kapat",
+      ConfirmResetAll: {
+        Confirm: "Tüm ayarları sıfırlamak istediğinizden emin misiniz?",
+      },
+      ConfirmClearAll: {
+        Confirm: "Tüm sohbeti sıfırlamak istediğinizden emin misiniz?",
+      },
+    },
+    Lang: {
+      Name: "Language", // ATTENTION: if you wanna add a new translation, please do not translate this value, leave it as `Language`
+      Options: {
+        cn: "简体中文",
+        en: "English",
+        tw: "繁體中文",
+        es: "Español",
+        it: "Italiano",
+        tr: "Türkçe",
+        jp: "日本語",
+      },
+    },
+    Avatar: "Avatar",
+    FontSize: {
+      Title: "Yazı Boyutu",
+      SubTitle: "Sohbet içeriğinin yazı boyutunu ayarlayın",
+    },
+    Update: {
+      Version: (x: string) => `Sürüm: ${x}`,
+      IsLatest: "En son sürüm",
+      CheckUpdate: "Güncellemeyi Kontrol Et",
+      IsChecking: "Güncelleme kontrol ediliyor...",
+      FoundUpdate: (x: string) => `Yeni sürüm bulundu: ${x}`,
+      GoToUpdate: "Güncelle",
+    },
+    SendKey: "Gönder Tuşu",
+    Theme: "Tema",
+    TightBorder: "Tam Ekran",
+    SendPreviewBubble: "Mesaj Önizleme Balonu",
+    Prompt: {
+      Disable: {
+        Title: "Otomatik tamamlamayı devre dışı bırak",
+        SubTitle: "Otomatik tamamlamayı kullanmak için / (eğik çizgi) girin",
+      },
+      List: "Komut Listesi",
+      ListCount: (builtin: number, custom: number) =>
+        `${builtin} yerleşik, ${custom} kullanıcı tanımlı`,
+      Edit: "Düzenle",
+    },
+    HistoryCount: {
+      Title: "Ekli Mesaj Sayısı",
+      SubTitle: "İstek başına ekli gönderilen mesaj sayısı",
+    },
+    CompressThreshold: {
+      Title: "Geçmiş Sıkıştırma Eşiği",
+      SubTitle:
+        "Sıkıştırılmamış mesajların uzunluğu bu değeri aşarsa sıkıştırılır",
+    },
+    Token: {
+      Title: "API Anahtarı",
+      SubTitle: "Erişim kodu sınırını yoksaymak için anahtarınızı kullanın",
+      Placeholder: "OpenAI API Anahtarı",
+    },
+    Usage: {
+      Title: "Hesap Bakiyesi",
+      SubTitle(used: any, total: any) {
+        return `Bu ay kullanılan $${used}, abonelik $${total}`;
+      },
+      IsChecking: "Kontrol ediliyor...",
+      Check: "Tekrar Kontrol Et",
+      NoAccess: "Bakiyeyi kontrol etmek için API anahtarını girin",
+    },
+    AccessCode: {
+      Title: "Erişim Kodu",
+      SubTitle: "Erişim kontrolü etkinleştirme",
+      Placeholder: "Erişim Kodu Gerekiyor",
+    },
+    Model: "Model",
+    Temperature: {
+      Title: "Gerçeklik",
+      SubTitle:
+        "Daha büyük bir değer girildiğinde gerçeklik oranı düşer ve daha rastgele çıktılar üretir",
+    },
+    MaxTokens: {
+      Title: "Maksimum Belirteç",
+      SubTitle:
+        "Girdi belirteçlerinin ve oluşturulan belirteçlerin maksimum uzunluğu",
+    },
+    PresencePenlty: {
+      Title: "Varlık Cezası",
+      SubTitle:
+        "Daha büyük bir değer, yeni konular hakkında konuşma olasılığını artırır",
+    },
+  },
+  Store: {
+    DefaultTopic: "Yeni Konuşma",
+    BotHello: "Merhaba! Size bugün nasıl yardımcı olabilirim?",
+    Error: "Bir şeyler yanlış gitti. Lütfen daha sonra tekrar deneyiniz.",
+    Prompt: {
+      History: (content: string) =>
+        "Bu, yapay zeka ile kullanıcı arasındaki sohbet geçmişinin bir özetidir: " +
+        content,
+      Topic:
+        "Lütfen herhangi bir giriş, noktalama işareti, tırnak işareti, nokta, sembol veya ek metin olmadan konuşmamızı özetleyen dört ila beş kelimelik bir başlık oluşturun. Çevreleyen tırnak işaretlerini kaldırın.",
+      Summarize:
+        "Gelecekteki bağlam için bir bilgi istemi olarak kullanmak üzere tartışmamızı en fazla 200 kelimeyle özetleyin.",
+    },
+    ConfirmClearAll:
+      "Tüm sohbet ve ayar verilerini temizlemeyi onaylıyor musunuz?",
+  },
+  Copy: {
+    Success: "Panoya kopyalandı",
+    Failed: "Kopyalama başarısız oldu, lütfen panoya erişim izni verin",
+  },
+  Context: {
+    Toast: (x: any) => `${x} bağlamsal bellek komutu`,
+    Edit: "Bağlamsal ve Bellek Komutları",
+    Add: "Yeni Ekle",
+  },
+};
+
+export default tr;

app/locales/tw.ts

@@ -73,6 +73,8 @@ const tw: LocaleType = {
         tw: "繁體中文",
         es: "Español",
         it: "Italiano",
+        tr: "Türkçe",
+        jp: "日本語",
       },
     },
     Avatar: "大頭貼",
@@ -150,9 +152,9 @@ const tw: LocaleType = {
     Prompt: {
       History: (content: string) =>
         "這是 AI 與用戶的歷史聊天總結，作為前情提要：" + content,
-      Topic: "直接返回這句話的簡要主題，無須解釋，若無主題，請直接返回「閒聊」",
+      Topic: "Summarise the conversation in a short and concise eye-catching title that instantly conveys the main topic. Use as few words as possible. Use the language used in the enquiry, e.g. use English for English enquiry, use zh-hant for traditional chinese enquiry. Don't use quotation marks at the beginning and the end.",
       Summarize:
-        "簡要總結一下你和用戶的對話，作為後續的上下文提示 prompt，且字數控制在 200 字以內",
+        "Summarise the conversation in at most 250 tokens for continuing the conversation in future. Use the language used in the conversation, e.g. use English for English conversation, use zh-hant for traditional chinese conversation.",
     },
     ConfirmClearAll: "確認清除所有對話、設定數據？",
   },

app/page.tsx

@@ -2,11 +2,15 @@ import { Analytics } from "@vercel/analytics/react";
 
 import { Home } from "./components/home";
 
-export default function App() {
+import { getServerSideConfig } from "./config/server";
+
+const serverConfig = getServerSideConfig();
+
+export default async function App() {
   return (
     <>
       <Home />
-      <Analytics />
+      {serverConfig?.isVercel && <Analytics />}
     </>
   );
 }

app/requests.ts

@@ -1,4 +1,4 @@
-import type { ChatRequest, ChatReponse } from "./api/openai/typing";
+import type { ChatRequest, ChatResponse } from "./api/openai/typing";
 import { Message, ModelConfig, useAccessStore, useChatStore } from "./store";
 import { showToast } from "./components/ui-lib";
 
@@ -67,7 +67,7 @@ export async function requestChat(messages: Message[]) {
   const res = await requestOpenaiClient("v1/chat/completions")(req);
 
   try {
-    const response = (await res.json()) as ChatReponse;
+    const response = (await res.json()) as ChatResponse;
     return response;
   } catch (error) {
     console.error("[Request Chat] ", error, res.body);
@@ -171,10 +171,15 @@ export async function requestChatStream(
         const resTimeoutId = setTimeout(() => finish(), TIME_OUT_MS);
         const content = await reader?.read();
         clearTimeout(resTimeoutId);
-        const text = decoder.decode(content?.value);
+      
+        if (!content || !content.value) {
+          break;
+        }
+      
+        const text = decoder.decode(content.value, { stream: true });
         responseText += text;
 
-        const done = !content || content.done;
+        const done = content.done;
         options?.onMessage(responseText, false);
 
         if (done) {
@@ -184,8 +189,8 @@ export async function requestChatStream(
 
       finish();
     } else if (res.status === 401) {
-      console.error("Anauthorized");
-      options?.onError(new Error("Anauthorized"), res.status);
+      console.error("Unauthorized");
+      options?.onError(new Error("Unauthorized"), res.status);
     } else {
       console.error("Stream Error", res.body);
       options?.onError(new Error("Stream Error"), res.status);

app/store/access.ts

@@ -1,26 +1,33 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
-import { queryMeta } from "../utils";
 
 export interface AccessControlStore {
   accessCode: string;
   token: string;
 
+  needCode: boolean;
+
   updateToken: (_: string) => void;
   updateCode: (_: string) => void;
   enabledAccessControl: () => boolean;
   isAuthorized: () => boolean;
+  fetch: () => void;
 }
 
 export const ACCESS_KEY = "access-control";
 
+let fetchState = 0; // 0 not fetch, 1 fetching, 2 done
+
 export const useAccessStore = create<AccessControlStore>()(
   persist(
     (set, get) => ({
       token: "",
       accessCode: "",
+      needCode: true,
       enabledAccessControl() {
-        return queryMeta("access") === "enabled";
+        get().fetch();
+
+        return get().needCode;
       },
       updateCode(code: string) {
         set((state) => ({ accessCode: code }));
@@ -29,7 +36,29 @@ export const useAccessStore = create<AccessControlStore>()(
         set((state) => ({ token }));
       },
       isAuthorized() {
-        return !!get().token || !!get().accessCode;
+        // has token or has code or disabled access control
+        return (
+          !!get().token || !!get().accessCode || !get().enabledAccessControl()
+        );
+      },
+      fetch() {
+        if (fetchState > 0) return;
+        fetchState = 1;
+        fetch("/api/config", {
+          method: "post",
+          body: null,
+        })
+          .then((res) => res.json())
+          .then((res: DangerConfig) => {
+            console.log("[Config] got config from server", res);
+            set(() => ({ ...res }));
+          })
+          .catch(() => {
+            console.error("[Config] failed to fetch config");
+          })
+          .finally(() => {
+            fetchState = 2;
+          });
       },
     }),
     {

app/store/update.ts

@@ -1,28 +1,46 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { FETCH_COMMIT_URL, FETCH_TAG_URL } from "../constant";
-import { getCurrentVersion } from "../utils";
 
 export interface UpdateStore {
   lastUpdate: number;
-  remoteId: string;
+  remoteVersion: string;
 
-  getLatestCommitId: (force: boolean) => Promise<string>;
+  version: string;
+  getLatestVersion: (force: boolean) => Promise<string>;
 }
 
 export const UPDATE_KEY = "chat-update";
 
+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;
+}
+
 export const useUpdateStore = create<UpdateStore>()(
   persist(
     (set, get) => ({
       lastUpdate: 0,
-      remoteId: "",
+      remoteVersion: "",
+
+      version: "unknown",
+
+      async getLatestVersion(force = false) {
+        set(() => ({ version: queryMeta("version") }));
 
-      async getLatestCommitId(force = false) {
         const overTenMins = Date.now() - get().lastUpdate > 10 * 60 * 1000;
         const shouldFetch = force || overTenMins;
         if (!shouldFetch) {
-          return getCurrentVersion();
+          return get().version ?? "unknown";
         }
 
         try {
@@ -32,13 +50,13 @@ export const useUpdateStore = create<UpdateStore>()(
           const remoteId = (data[0].sha as string).substring(0, 7);
           set(() => ({
             lastUpdate: Date.now(),
-            remoteId,
+            remoteVersion: remoteId,
           }));
           console.log("[Got Upstream] ", remoteId);
           return remoteId;
         } catch (error) {
           console.error("[Fetch Upstream Commit Id]", error);
-          return getCurrentVersion();
+          return get().version ?? "";
         }
       },
     }),

app/styles/globals.scss

@@ -1,4 +1,6 @@
 @mixin light {
+  --theme: light;
+
   /* color */
   --white: white;
   --black: rgb(48, 48, 48);
@@ -18,6 +20,8 @@
 }
 
 @mixin dark {
+  --theme: dark;
+
   /* color */
   --white: rgb(30, 30, 30);
   --black: rgb(187, 187, 187);
@@ -31,6 +35,10 @@
   --border-in-light: 1px solid rgba(255, 255, 255, 0.192);
 
   --theme-color: var(--gray);
+
+  div:not(.no-dark) > svg {
+    filter: invert(0.5);
+  }
 }
 
 .light {
@@ -282,10 +290,6 @@ pre {
 .clickable {
   cursor: pointer;
 
-  div:not(.no-dark) > svg {
-    filter: invert(0.5);
-  }
-
   &:hover {
     filter: brightness(0.9);
   }

app/utils.ts

@@ -69,31 +69,6 @@ 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 getCurrentVersion() {
-  if (currentId) {
-    return currentId;
-  }
-
-  currentId = queryMeta("version");
-
-  return currentId;
-}
-
 export function getEmojiUrl(unified: string, style: EmojiStyle) {
   return `https://cdn.staticfile.org/emoji-datasource-apple/14.0.0/img/${style}/64/${unified}.png`;
 }
@@ -145,3 +120,7 @@ export function autoGrowTextArea(dom: HTMLTextAreaElement) {
 
   return rows;
 }
+
+export function getCSSVar(varName: string) {
+  return getComputedStyle(document.body).getPropertyValue(varName).trim();
+}

docs/faq-cn.md

@@ -1,13 +1,13 @@
 # 常见问题
 
-> We are sorry that there is currently no English version of the FAQ. English users can use translation tools to access this document. We look forward to receiving your PR for an English version of the documentation.
-
 ## 如何快速获得帮助？
 1. 询问ChatGPT / Bing / 百度 / Google等。
 2. 询问网友。请提供问题的背景信息和碰到问题的详细描述。高质量的提问容易获得有用的答案。
 
 # 部署相关问题
 
+各种部署方式详细教程参考：https://rptzik3toh.feishu.cn/docx/XtrdduHwXoSCGIxeFLlcEPsdn8b  
+
 ## 为什么 Docker 部署版本一直提示更新
 Docker 版本相当于稳定版，latest Docker 总是与 latest release version 一致，目前我们的发版频率是一到两天发一次，所以 Docker 版本会总是落后最新的提交一到两天，这在预期内。
 
@@ -53,6 +53,18 @@ keepalive_timeout 300;  # 设定keep-alive超时时间为65秒
 - 到服务器的路由通吗？
 - 域名正确解析了吗？
 
+## 什么是代理，如何使用？
+由于OpenAI的IP限制，中国和其他一些国家/地区无法直接连接OpenAI API，需要通过代理。你可以使用代理服务器（正向代理），或者已经设置好的OpenAI API反向代理。
+- 正向代理例子：科学上网梯子。docker部署的情况下，设置环境变量HTTP_PROXY为你的代理地址（例如：10.10.10.10:8002）。
+- 反向代理例子：可以用别人搭建的代理地址，或者通过Cloudflare免费设置。设置项目环境变量BASE_URL为你的代理地址。
+
+## 国内服务器可以部署吗？
+可以但需要解决的问题：
+- 需要代理才能连接github和openAI等网站；
+- 国内服务器要设置域名解析的话需要备案；
+- 国内政策限制代理访问外网/ChatGPT相关应用，可能被封。
+
+
 # 使用相关问题
 
 ## 为什么会一直提示“出错了，稍后重试吧”
@@ -71,17 +83,6 @@ keepalive_timeout 300;  # 设定keep-alive超时时间为65秒
 ## 使用时提示"You exceeded your current quota, ..."
 API KEY有问题。余额不足。
 
-## 什么是代理，如何使用？
-由于OpenAI的IP限制，中国和其他一些国家/地区无法直接连接OpenAI API，需要通过代理。你可以使用代理服务器（正向代理），或者已经设置好的OpenAI API反向代理。
-- 正向代理例子：科学上网梯子。docker部署的情况下，设置环境变量HTTP_PROXY为你的代理地址（http://地址:端口）。
-- 反向代理例子：可以用别人搭建的代理地址，或者通过Cloudflare免费设置。设置项目环境变量BASE_URL为你的代理地址。
-
-## 国内服务器可以部署吗？
-可以但需要解决的问题：
-- 需要代理才能连接github和openAI等网站；
-- 国内服务器要设置域名解析的话需要备案；
-- 国内政策限制代理访问外网/ChatGPT相关应用，可能被封。
-
 # 网络服务相关问题
 ## Cloudflare是什么？
 Cloudflare（CF）是一个提供CDN，域名管理，静态页面托管，边缘计算函数部署等的网络服务供应商。常见的用途：购买和/或托管你的域名（解析、动态域名等），给你的服务器套上CDN（可以隐藏ip免被墙），部署网站（CF Pages）。CF免费提供大多数服务。
@@ -100,6 +101,17 @@ Vercel 是一个全球化的云平台，旨在帮助开发人员更快地构建
 - 国内服务器供应商：阿里云，腾讯等；
 国内服务器事项：解析域名需要备案；国内服务器带宽较贵；访问国外网站（Github, openAI等）需要代理。
 
+## 什么情况下服务器要备案？
+在中国大陆经营的网站按监管要求需要备案。实际操作中，服务器位于国内且有域名解析的情况下，服务器供应商会执行监管的备案要求，否则会关停服务。通常的规则如下：
+|服务器位置|域名供应商|是否需要备案|
+|---|---|---|
+|国内|国内|是|
+|国内|国外|是|
+|国外|国外|否|
+|国外|国内|通常否|
+
+换服务器供应商后需要转备案。
+
 # OpenAI相关问题
 ## 如何注册OpenAI账号？
 去chat.openai.com注册。你需要：
@@ -121,8 +133,9 @@ OpenAI只接受指定地区的信用卡（中国信用卡无法使用）。一
 3. 网上找人代充
 
 ## 如何使用GPT-4的API访问？
-（4月6日更新）GPT-4的API访问需要单独申请。到以下地址填写你的信息进入申请队列waitlist（准备好你的OpenAI组织ID）：https://openai.com/waitlist/gpt-4-api
+- GPT-4的API访问需要单独申请。到以下地址填写你的信息进入申请队列waitlist（准备好你的OpenAI组织ID）：https://openai.com/waitlist/gpt-4-api
 之后等待邮件消息。
+- 开通 ChatGPT Plus 不代表有 GPT-4 权限，两者毫无关系。
 
 ## 如何使用 Azure OpenAI 接口
 请参考：[#371](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/371)
@@ -136,3 +149,17 @@ OpenAI只接受指定地区的信用卡（中国信用卡无法使用）。一
 - 通过上述两个方法就可以定位到你的 token 被快速消耗的原因：
   - 如果 openai 消费记录异常，但是 docker 日志没有问题，那么说明是 api key 泄露；
   - 如果 docker 日志发现大量 got access code 爆破记录，那么就是密码被爆破了。
+ 
+## API是怎么计费的？
+OpenAI网站计费说明：https://openai.com/pricing#language-models  
+OpenAI根据token数收费，1000个token通常可代表750个英文单词，或500个汉字。输入（Prompt）和输出（Completion）分别统计费用。  
+|模型|用户输入（Prompt）计费|模型输出（Completion）计费|每次交互最大token数|
+|----|----|----|----|
+|gpt-3.5|$0.002 / 1千tokens|$0.002 / 1千tokens|4096|
+|gpt-4|$0.03 / 1千tokens|$0.06 / 1千tokens|8192|
+|gpt-4-32K|$0.06 / 1千tokens|$0.12 / 1千tokens|32768|
+
+## gpt-3.5-turbo和gpt3.5-turbo-0301(或者gpt3.5-turbo-mmdd)模型有什么区别?
+官方文档说明：https://platform.openai.com/docs/models/gpt-3-5  
+- gpt-3.5-turbo是最新的模型，会不断得到更新。
+- gpt-3.5-turbo-0301是3月1日定格的模型快照，不会变化，预期3个月后被新快照替代。

docs/vercel-cn.md

@@ -0,0 +1,39 @@
+# Vercel 的使用说明
+
+## 如何新建项目
+当你从 Github fork 本项目之后，需要重新在 Vercel 创建一个全新的 Vercel 项目来重新部署，你需要按照下列步骤进行。
+
+![vercel-create-1](./images/vercel/vercel-create-1.jpg)
+1. 进入 Vercel 控制台首页；
+2. 点击 Add New；
+3. 选择 Project。
+
+![vercel-create-2](./images/vercel/vercel-create-2.jpg)
+1. 在 Import Git Repository 处，搜索 chatgpt-next-web；
+2. 选中新 fork 的项目，点击 Import。
+
+![vercel-create-3](./images/vercel/vercel-create-3.jpg)
+1. 在项目配置页，点开 Environmane Variables 开始配置环境变量；
+2. 依次新增名为 OPENAI_API_KEY 和 CODE 的环境变量；
+3. 填入环境变量对应的值；
+4. 点击 Add 确认增加环境变量；
+5. 请确保你添加了 OPENAI_API_KEY，否则无法使用；
+6. 点击 Deploy，创建完成，耐心等待 5 分钟左右部署完成。
+
+## 如何增加自定义域名
+[TODO]
+
+## 如何更改环境变量
+![vercel-env-edit](./images/vercel/vercel-env-edit.jpg)
+1. 进去 Vercel 项目内部控制台，点击顶部的 Settings 按钮；
+2. 点击左侧的 Environment Variables；
+3. 点击已有条目的右侧按钮；
+4. 选择 Edit 进行编辑，然后保存即可。
+
+⚠️️ 注意：每次修改完环境变量，你都需要[重新部署项目](#如何重新部署)来让改动生效！
+
+## 如何重新部署
+![vercel-redeploy](./images/vercel/vercel-redeploy.jpg)
+1. 进入 Vercel 项目内部控制台，点击顶部的 Deployments 按钮；
+2. 选择列表最顶部一条的右侧按钮；
+3. 点击 Redeploy 即可重新部署。

middleware.ts

@@ -1,21 +1,23 @@
 import { NextRequest, NextResponse } from "next/server";
-import { ACCESS_CODES } from "./app/api/access";
+import { getServerSideConfig } from "./app/config/server";
 import md5 from "spark-md5";
 
 export const config = {
   matcher: ["/api/openai", "/api/chat-stream"],
 };
 
+const serverConfig = getServerSideConfig();
+
 export function middleware(req: NextRequest) {
   const accessCode = req.headers.get("access-code");
   const token = req.headers.get("token");
   const hashedCode = md5.hash(accessCode ?? "").trim();
 
-  console.log("[Auth] allowed hashed codes: ", [...ACCESS_CODES]);
+  console.log("[Auth] allowed hashed codes: ", [...serverConfig.codes]);
   console.log("[Auth] got access code:", accessCode);
   console.log("[Auth] hashed access code:", hashedCode);
 
-  if (ACCESS_CODES.size > 0 && !ACCESS_CODES.has(hashedCode) && !token) {
+  if (serverConfig.needCode && !serverConfig.codes.has(hashedCode) && !token) {
     return NextResponse.json(
       {
         error: true,
@@ -30,7 +32,7 @@ export function middleware(req: NextRequest) {
 
   // inject api key
   if (!token) {
-    const apiKey = process.env.OPENAI_API_KEY;
+    const apiKey = serverConfig.apiKey;
     if (apiKey) {
       console.log("[Auth] set system token");
       req.headers.set("token", apiKey);

next.config.js

@@ -8,14 +8,11 @@ const nextConfig = {
     config.module.rules.push({
       test: /\.svg$/,
       use: ["@svgr/webpack"],
-    }); // 针对 SVG 的处理规则
+    });
 
     return config;
-  }
+  },
+  output: "standalone",
 };
 
-if (process.env.DOCKER) {
-  nextConfig.output = 'standalone'
-}
-
 module.exports = nextConfig;