fixup: wont show fullscreen icon on mobile

fix: many UI bugs and resizable side bar

.github/workflows/sync.yml

@@ -5,7 +5,7 @@ permissions:
 
 on:
   schedule:
-    - cron: "0 */6 * * *" # every 6 hours
+    - cron: "0 * * * *" # every hour
   workflow_dispatch:
 
 jobs:

Dockerfile

@@ -8,6 +8,7 @@ WORKDIR /app
 
 COPY package.json yarn.lock ./
 
+RUN yarn config set registry 'https://registry.npm.taobao.org'
 RUN yarn install
 
 FROM base AS builder
@@ -27,6 +28,9 @@ RUN yarn build
 FROM base AS runner
 WORKDIR /app
 
+RUN apk add proxychains-ng
+
+ENV PROXY_URL=""
 ENV OPENAI_API_KEY=""
 ENV CODE=""
 
@@ -37,4 +41,20 @@ COPY --from=builder /app/.next/server ./.next/server
 
 EXPOSE 3000
 
-CMD ["node","server.js"]
+CMD if [ -n "$PROXY_URL" ]; then \
+        protocol=$(echo $PROXY_URL | cut -d: -f1); \
+        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 "proxy_dns" >> $conf; \
+        echo "remote_dns_subnet 224" >> $conf; \
+        echo "tcp_read_time_out 15000" >> $conf; \
+        echo "tcp_connect_time_out 8000" >> $conf; \
+        echo "[ProxyList]" >> $conf; \
+        echo "$protocol $host $port" >> $conf; \
+        cat /etc/proxychains.conf; \
+        proxychains -f $conf node server.js; \
+    else \
+        node server.js; \
+    fi

README.md

@@ -7,7 +7,7 @@ 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)
+[演示 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)
 
 [![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)
 
@@ -50,7 +50,8 @@ One-Click to deploy well-designed ChatGPT web UI on Vercel.
 - 一键导出聊天记录，完整的 Markdown 支持
 - 拥有自己的域名？好上加好，绑定后即可在任何地方**无障碍**快速访问
 
-## 开发计划 
+## 开发计划
+
 - [x] 为每个对话设置系统 Prompt [#138](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/138)
 - [ ] 允许用户自行编辑内置 Prompt 列表
 - [ ] 使用 tauri 打包桌面应用
@@ -58,11 +59,12 @@ One-Click to deploy well-designed ChatGPT web UI on Vercel.
 - [ ] 插件机制，支持联网搜索、计算器、调用其他平台 api [#165](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/165)
 
 ### 不会开发的功能
+
 - 界面文字自定义
 - 用户登录、账号管理、消息云同步
 
-
 ## Get Started
+
 > [简体中文 > 如何开始使用](./README_CN.md#开始使用)
 
 1. Get [OpenAI API Key](https://platform.openai.com/account/api-keys);
@@ -71,9 +73,11 @@ One-Click to deploy well-designed ChatGPT web UI on Vercel.
 3. Enjoy :)
 
 ## FAQ
+
 [简体中文 > 常见问题](./docs/faq-cn.md) | [English > FAQ](./docs/faq.en.md)
 
 ## Keep Updated
+
 > [简体中文 > 如何保持代码更新](./README_CN.md#保持更新)
 
 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.
@@ -87,11 +91,12 @@ We recommend that you follow the steps below to re-deploy:
 
 This project will be continuously updated, and after forking the project, the upstream code will be automatically synchronized every day without additional operations.
 
-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. 
+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.
 
 You can star or watch this project or follow author to get release notifictions in time.
 
 ## Access Password
+
 > [简体中文 > 如何增加访问密码](./README_CN.md#配置页面访问密码)
 
 This project provides limited access control. Please add an environment variable named `CODE` on the vercel environment variables page. The value should be passwords separated by comma like this:
@@ -103,6 +108,7 @@ code1,code2,code3
 After adding or modifying this environment variable, please redeploy the project for the changes to take effect.
 
 ## Environment Variables
+
 > [简体中文 > 如何配置 api key、访问密码、接口代理](./README_CN.md#环境变量)
 
 ### `OPENAI_API_KEY` (required)
@@ -128,6 +134,7 @@ Override openai api request base url.
 Override openai api request protocol.
 
 ## Development
+
 > [简体中文 > 如何进行二次开发](./README_CN.md#开发)
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
@@ -149,13 +156,28 @@ yarn dev
 ```
 
 ## Deployment
+
 > [简体中文 > 如何部署到私人服务器](./README_CN.md#部署)
+
 ### Docker (Recommended)
 
 ```shell
 docker pull yidadaa/chatgpt-next-web
 
-docker run -d -p 3000:3000 -e OPENAI_API_KEY="" -e CODE="" yidadaa/chatgpt-next-web
+docker run -d -p 3000:3000 \
+   -e OPENAI_API_KEY="sk-xxxx" \
+   -e CODE="your-password" \
+   yidadaa/chatgpt-next-web
+```
+
+You can start service behind a proxy:
+
+```shell
+docker run -d -p 3000:3000 \
+   -e OPENAI_API_KEY="sk-xxxx" \
+   -e CODE="your-password" \
+   -e PROXY_URL="http://localhost:7890" \
+   yidadaa/chatgpt-next-web
 ```
 
 ### Shell
@@ -163,20 +185,30 @@ docker run -d -p 3000:3000 -e OPENAI_API_KEY="" -e CODE="" yidadaa/chatgpt-next-
 ```shell
 bash <(curl -s https://raw.githubusercontent.com/Yidadaa/ChatGPT-Next-Web/main/scripts/setup.sh)
 ```
+
 ## Screenshots
 
 ![Settings](./docs/images/settings.png)
 
 ![More](./docs/images/more.png)
 
+## Donation
+
+[Buy Me a Coffee](https://www.buymeacoffee.com/yidadaa)
 
 ## Special Thanks
+
 ### Sponsor
 
 [@mushan0x0](https://github.com/mushan0x0)
 [@ClarenceDan](https://github.com/ClarenceDan)
 [@zhangjia](https://github.com/zhangjia)
 [@hoochanlon](https://github.com/hoochanlon)
+[@relativequantum](https://github.com/relativequantum)
+[@desenmeng](https://github.com/desenmeng)
+[@webees](https://github.com/webees)
+[@chazzhou](https://github.com/chazzhou)
+[@hauy](https://github.com/hauy)
 
 ### Contributor
 

README_CN.md

@@ -11,7 +11,7 @@
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
 
-![主界面](./static/cover.png)
+![主界面](./docs/images/cover.png)
 
 </div>
 
@@ -29,7 +29,7 @@
 
 1. 准备好你的 [OpenAI API Key](https://platform.openai.com/account/api-keys);
 2. 点击右侧按钮开始部署：
-   [![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)，直接使用 Github 账号登录即可，记得在环境变量页填入 API Key；
+   [![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)，直接使用 Github 账号登录即可，记得在环境变量页填入 API Key 和[页面访问密码](#配置页面访问密码) CODE；
 3. 部署完毕后，即可开始使用；
 4. （可选）[绑定自定义域名](https://vercel.com/docs/concepts/projects/domains/add-a-domain)：Vercel 分配的域名 DNS 在某些区域被污染了，绑定自定义域名即可直连。
 
@@ -53,6 +53,8 @@
 
 > 配置密码后，用户需要在设置页手动填写访问码才可以正常聊天，否则会通过消息提示未授权状态。
 
+> **警告**：请务必将密码的位数设置得足够长，最好 7 位以上，否则[会被爆破](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/518)。
+
 本项目提供有限的权限控制功能，请在 Vercel 项目控制面板的环境变量页增加名为 `CODE` 的环境变量，值为用英文逗号分隔的自定义密码：
 
 ```
@@ -62,6 +64,7 @@ code1,code2,code3
 增加或修改该环境变量后，请**重新部署**项目使改动生效。
 
 ## 环境变量
+
 > 本项目大多数配置项都通过环境变量来设置。
 
 ### `OPENAI_API_KEY` （必填项）
@@ -108,25 +111,42 @@ OPENAI_API_KEY=<your api key here>
 2. 执行 `yarn install && yarn dev` 即可。
 
 ## 部署
+
 ### 容器部署 （推荐）
+
 > 注意：docker 版本在大多数时间都会落后最新的版本 1 到 2 天，所以部署后会持续出现“存在更新”的提示，属于正常现象。
 
 ```shell
 docker pull yidadaa/chatgpt-next-web
 
-docker run -d -p 3000:3000 -e OPENAI_API_KEY="" -e CODE="" yidadaa/chatgpt-next-web
+docker run -d -p 3000:3000 \
+   -e OPENAI_API_KEY="sk-xxxx" \
+   -e CODE="页面访问密码" \
+   yidadaa/chatgpt-next-web
+```
+
+你也可以指定 proxy：
+
+```shell
+docker run -d -p 3000:3000 \
+   -e OPENAI_API_KEY="sk-xxxx" \
+   -e CODE="页面访问密码" \
+   -e PROXY_URL="http://localhost:7890" \
+   yidadaa/chatgpt-next-web
 ```
 
 ### 本地部署
+
 在控制台运行下方命令：
 
 ```shell
 bash <(curl -s https://raw.githubusercontent.com/Yidadaa/ChatGPT-Next-Web/main/scripts/setup.sh)
 ```
 
-
 ## 鸣谢
+
 ### 捐赠者
+
 > 仅列出了部分大额打赏，小额打赏（< 100RMB）人数太多，在此不再列出，敬请谅解。
 
 [@mushan0x0](https://github.com/mushan0x0)
@@ -139,6 +159,7 @@ bash <(curl -s https://raw.githubusercontent.com/Yidadaa/ChatGPT-Next-Web/main/s
 [见项目贡献者列表](https://github.com/Yidadaa/ChatGPT-Next-Web/graphs/contributors)
 
 ## 开源协议
+
 > 反对 996，从我开始。
 
 [Anti 996 License](https://github.com/kattgu7/Anti-996-License/blob/master/LICENSE_CN_EN)

app/api/openai/route.ts

@@ -17,7 +17,7 @@ async function makeRequest(req: NextRequest) {
       },
       {
         status: 500,
-      }
+      },
     );
   }
 }

app/components/button.module.scss

@@ -49,4 +49,7 @@
 .icon-button-text {
   margin-left: 5px;
   font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

app/components/chat-list.tsx

@@ -96,7 +96,7 @@ export function ChatList() {
                 index={i}
                 selected={i === selectedIndex}
                 onClick={() => selectSession(i)}
-                onDelete={chatStore.deleteSession}
+                onDelete={() => chatStore.deleteSession(i)}
               />
             ))}
             {provided.placeholder}

app/components/chat.tsx

@@ -1,9 +1,9 @@
-import { useDebouncedCallback } from "use-debounce";
+import { useDebounce, useDebouncedCallback } from "use-debounce";
 import { memo, useState, useRef, useEffect, useLayoutEffect } from "react";
 
 import SendWhiteIcon from "../icons/send-white.svg";
 import BrainIcon from "../icons/brain.svg";
-import ExportIcon from "../icons/export.svg";
+import ExportIcon from "../icons/share.svg";
 import ReturnIcon from "../icons/return.svg";
 import CopyIcon from "../icons/copy.svg";
 import DownloadIcon from "../icons/download.svg";
@@ -11,6 +11,8 @@ import LoadingIcon from "../icons/three-dots.svg";
 import BotIcon from "../icons/bot.svg";
 import AddIcon from "../icons/add.svg";
 import DeleteIcon from "../icons/delete.svg";
+import MaxIcon from "../icons/max.svg";
+import MinIcon from "../icons/min.svg";
 
 import {
   Message,
@@ -19,6 +21,7 @@ import {
   BOT_HELLO,
   ROLES,
   createMessage,
+  useAccessStore,
 } from "../store";
 
 import {
@@ -27,6 +30,7 @@ import {
   getEmojiUrl,
   isMobileScreen,
   selectOrCopy,
+  autoGrowTextArea,
 } from "../utils";
 
 import dynamic from "next/dynamic";
@@ -39,7 +43,7 @@ import { IconButton } from "./button";
 import styles from "./home.module.scss";
 import chatStyle from "./chat.module.scss";
 
-import { Input, Modal, showModal, showToast } from "./ui-lib";
+import { Input, Modal, showModal } from "./ui-lib";
 
 const Markdown = dynamic(
   async () => memo((await import("./markdown")).Markdown),
@@ -343,6 +347,7 @@ export function Chat(props: {
 
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [userInput, setUserInput] = useState("");
+  const [beforeInput, setBeforeInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const { submitKey, shouldSubmit } = useSubmitHandler();
   const { scrollRef, setAutoScroll } = useScrollToBottom();
@@ -380,6 +385,27 @@ export function Chat(props: {
     dom.scrollTop = dom.scrollHeight - dom.offsetHeight + paddingBottomNum;
   };
 
+  // auto grow input
+  const [inputRows, setInputRows] = useState(2);
+  const measure = useDebouncedCallback(
+    () => {
+      const rows = inputRef.current ? autoGrowTextArea(inputRef.current) : 1;
+      const inputRows = Math.min(
+        5,
+        Math.max(2 + Number(!isMobileScreen()), rows),
+      );
+      setInputRows(inputRows);
+    },
+    100,
+    {
+      leading: true,
+      trailing: true,
+    },
+  );
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(measure, [userInput]);
+
   // only search prompts when user input is short
   const SEARCH_TEXT_LIMIT = 30;
   const onInput = (text: string) => {
@@ -394,9 +420,6 @@ export function Chat(props: {
       // check if need to trigger auto completion
       if (text.startsWith("/")) {
         let searchText = text.slice(1);
-        if (searchText.length === 0) {
-          searchText = " ";
-        }
         onSearch(searchText);
       }
     }
@@ -407,6 +430,7 @@ export function Chat(props: {
     if (userInput.length <= 0) return;
     setIsLoading(true);
     chatStore.onUserInput(userInput).then(() => setIsLoading(false));
+    setBeforeInput(userInput);
     setUserInput("");
     setPromptHints([]);
     if (!isMobileScreen()) inputRef.current?.focus();
@@ -420,6 +444,12 @@ export function Chat(props: {
 
   // check if should send message
   const onInputKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    // if ArrowUp and no userInput
+    if (e.key === "ArrowUp" && userInput.length <= 0) {
+      setUserInput(beforeInput);
+      e.preventDefault();
+      return;
+    }
     if (shouldSubmit(e)) {
       onUserSubmit();
       e.preventDefault();
@@ -458,11 +488,17 @@ export function Chat(props: {
 
   const context: RenderMessage[] = session.context.slice();
 
+  const accessStore = useAccessStore();
+
   if (
     context.length === 0 &&
     session.messages.at(0)?.content !== BOT_HELLO.content
   ) {
-    context.push(BOT_HELLO);
+    const copiedHello = Object.assign({}, BOT_HELLO);
+    if (!accessStore.isAuthorized()) {
+      copiedHello.content = Locale.Error.Unauthorized;
+    }
+    context.push(copiedHello);
   }
 
   // preview messages
@@ -557,6 +593,19 @@ export function Chat(props: {
               }}
             />
           </div>
+          {!isMobileScreen() && (
+            <div className={styles["window-action-button"]}>
+              <IconButton
+                icon={chatStore.config.tightBorder ? <MinIcon /> : <MaxIcon />}
+                bordered
+                onClick={() => {
+                  chatStore.updateConfig(
+                    (config) => (config.tightBorder = !config.tightBorder),
+                  );
+                }}
+              />
+            </div>
+          )}
         </div>
 
         <PromptToast
@@ -660,7 +709,6 @@ export function Chat(props: {
             ref={inputRef}
             className={styles["chat-input"]}
             placeholder={Locale.Chat.Input(submitKey)}
-            rows={2}
             onInput={(e) => onInput(e.currentTarget.value)}
             value={userInput}
             onKeyDown={onInputKeyDown}
@@ -670,6 +718,7 @@ export function Chat(props: {
               setTimeout(() => setPromptHints([]), 500);
             }}
             autoFocus={!props?.sideBarShowing}
+            rows={inputRows}
           />
           <IconButton
             icon={<SendWhiteIcon />}

app/components/home.module.scss

@@ -10,7 +10,7 @@
   background-color: var(--white);
   min-width: 600px;
   min-height: 480px;
-  max-width: 900px;
+  max-width: 1200px;
 
   display: flex;
   overflow: hidden;
@@ -48,6 +48,27 @@
   display: flex;
   flex-direction: column;
   box-shadow: inset -2px 0px 2px 0px rgb(0, 0, 0, 0.05);
+  position: relative;
+  transition: width ease 0.1s;
+}
+
+.sidebar-drag {
+  $width: 10px;
+
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: $width;
+  background-color: var(--black);
+  cursor: ew-resize;
+  opacity: 0;
+  transition: all ease 0.3s;
+
+  &:hover,
+  &:active {
+    opacity: 0.2;
+  }
 }
 
 .window-content {
@@ -177,10 +198,11 @@
   margin-top: 8px;
 }
 
-.chat-item-count {
-}
-
+.chat-item-count,
 .chat-item-date {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .sidebar-tail {
@@ -406,17 +428,11 @@
   background-color: var(--white);
   color: var(--black);
   font-family: inherit;
-  padding: 10px 14px 50px;
+  padding: 10px 90px 10px 14px;
   resize: none;
   outline: none;
 }
 
-@media only screen and (max-width: 600px) {
-  .chat-input {
-    font-size: 16px;
-  }
-}
-
 .chat-input:focus {
   border: 1px solid var(--primary);
 }
@@ -427,11 +443,22 @@
 
   position: absolute;
   right: 30px;
-  bottom: 30px;
+  bottom: 32px;
+}
+
+@media only screen and (max-width: 600px) {
+  .chat-input {
+    font-size: 16px;
+  }
+
+  .chat-input-send {
+    bottom: 30px;
+  }
 }
 
 .export-content {
   white-space: break-spaces;
+  padding: 10px !important;
 }
 
 .loading-content {

app/components/home.tsx

@@ -2,7 +2,13 @@
 
 require("../polyfill");
 
-import { useState, useEffect } from "react";
+import {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  MouseEventHandler,
+} from "react";
 
 import { IconButton } from "./button";
 import styles from "./home.module.scss";
@@ -24,6 +30,7 @@ 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 (
@@ -75,6 +82,53 @@ function useSwitchTheme() {
   }, [config.theme]);
 }
 
+function useDragSideBar() {
+  const limit = (x: number) => Math.min(500, Math.max(220, x));
+
+  const chatStore = useChatStore();
+  const startX = useRef(0);
+  const startDragWidth = useRef(chatStore.config.sidebarWidth ?? 300);
+  const lastUpdateTime = useRef(Date.now());
+
+  const handleMouseMove = useRef((e: MouseEvent) => {
+    if (Date.now() < lastUpdateTime.current + 100) {
+      return;
+    }
+    lastUpdateTime.current = Date.now();
+    const d = e.clientX - startX.current;
+    const nextWidth = limit(startDragWidth.current + d);
+    chatStore.updateConfig((config) => (config.sidebarWidth = nextWidth));
+  });
+
+  const handleMouseUp = useRef(() => {
+    startDragWidth.current = chatStore.config.sidebarWidth ?? 300;
+    window.removeEventListener("mousemove", handleMouseMove.current);
+    window.removeEventListener("mouseup", handleMouseUp.current);
+  });
+
+  const onDragMouseDown = (e: MouseEvent) => {
+    startX.current = e.clientX;
+
+    window.addEventListener("mousemove", handleMouseMove.current);
+    window.addEventListener("mouseup", handleMouseUp.current);
+  };
+
+  useEffect(() => {
+    if (isMobileScreen()) {
+      return;
+    }
+
+    document.documentElement.style.setProperty(
+      "--sidebar-width",
+      `${limit(chatStore.config.sidebarWidth ?? 300)}px`,
+    );
+  }, [chatStore.config.sidebarWidth]);
+
+  return {
+    onDragMouseDown,
+  };
+}
+
 const useHasHydrated = () => {
   const [hasHydrated, setHasHydrated] = useState<boolean>(false);
 
@@ -101,6 +155,9 @@ function _Home() {
   const [openSettings, setOpenSettings] = useState(false);
   const config = useChatStore((state) => state.config);
 
+  // drag side bar
+  const { onDragMouseDown } = useDragSideBar();
+
   useSwitchTheme();
 
   if (loading) {
@@ -174,6 +231,11 @@ function _Home() {
             />
           </div>
         </div>
+
+        <div
+          className={styles["sidebar-drag"]}
+          onMouseDown={(e) => onDragMouseDown(e as any)}
+        ></div>
       </div>
 
       <div className={styles["window-content"]}>

app/components/markdown.tsx

@@ -67,7 +67,7 @@ export function Markdown(props: { content: string }) {
       components={{
         pre: PreCode,
       }}
-      linkTarget={'_blank'}
+      linkTarget={"_blank"}
     >
       {props.content}
     </ReactMarkdown>

app/components/settings.module.scss

@@ -19,11 +19,16 @@
   cursor: pointer;
 }
 
-.password-input {
+.password-input-container {
+  max-width: 50%;
   display: flex;
   justify-content: flex-end;
 
   .password-eye {
     margin-right: 4px;
   }
+
+  .password-input {
+    min-width: 80%;
+  }
 }

app/components/settings.tsx

@@ -60,13 +60,17 @@ function PasswordInput(props: HTMLProps<HTMLInputElement>) {
   }
 
   return (
-    <div className={styles["password-input"]}>
+    <div className={styles["password-input-container"]}>
       <IconButton
         icon={visible ? <EyeIcon /> : <EyeOffIcon />}
         onClick={changeVisibility}
         className={styles["password-eye"]}
       />
-      <input {...props} type={visible ? "text" : "password"} />
+      <input
+        {...props}
+        type={visible ? "text" : "password"}
+        className={styles["password-input"]}
+      />
     </div>
   );
 }
@@ -120,14 +124,26 @@ export function Settings(props: { closeSettings: () => void }) {
   const builtinCount = SearchService.count.builtin;
   const customCount = promptStore.prompts.size ?? 0;
 
-  const showUsage = !!accessStore.token || !!accessStore.accessCode;
-
+  const showUsage = accessStore.isAuthorized();
   useEffect(() => {
     checkUpdate();
     showUsage && checkUsage();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    const keydownEvent = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        props.closeSettings();
+      }
+    };
+    document.addEventListener("keydown", keydownEvent);
+    return () => {
+      document.removeEventListener("keydown", keydownEvent);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <ErrorBoundary>
       <div className={styles["window-header"]}>
@@ -143,7 +159,14 @@ export function Settings(props: { closeSettings: () => void }) {
           <div className={styles["window-action-button"]}>
             <IconButton
               icon={<ClearIcon />}
-              onClick={clearSessions}
+              onClick={() => {
+                const confirmed = window.confirm(
+                  `${Locale.Settings.Actions.ConfirmClearAll.Confirm}`,
+                );
+                if (confirmed) {
+                  clearSessions();
+                }
+              }}
               bordered
               title={Locale.Settings.Actions.ClearAll}
             />
@@ -151,7 +174,14 @@ export function Settings(props: { closeSettings: () => void }) {
           <div className={styles["window-action-button"]}>
             <IconButton
               icon={<ResetIcon />}
-              onClick={resetConfig}
+              onClick={() => {
+                const confirmed = window.confirm(
+                  `${Locale.Settings.Actions.ConfirmResetAll.Confirm}`,
+                );
+                if (confirmed) {
+                  resetConfig();
+                }
+              }}
               bordered
               title={Locale.Settings.Actions.ResetAll}
             />
@@ -315,37 +345,7 @@ export function Settings(props: { closeSettings: () => void }) {
             ></input>
           </SettingItem>
         </List>
-        <List>
-          <SettingItem
-            title={Locale.Settings.Prompt.Disable.Title}
-            subTitle={Locale.Settings.Prompt.Disable.SubTitle}
-          >
-            <input
-              type="checkbox"
-              checked={config.disablePromptHint}
-              onChange={(e) =>
-                updateConfig(
-                  (config) =>
-                    (config.disablePromptHint = e.currentTarget.checked),
-                )
-              }
-            ></input>
-          </SettingItem>
 
-          <SettingItem
-            title={Locale.Settings.Prompt.List}
-            subTitle={Locale.Settings.Prompt.ListCount(
-              builtinCount,
-              customCount,
-            )}
-          >
-            <IconButton
-              icon={<EditIcon />}
-              text={Locale.Settings.Prompt.Edit}
-              onClick={() => showToast(Locale.WIP)}
-            />
-          </SettingItem>
-        </List>
         <List>
           {enabledAccessControl ? (
             <SettingItem
@@ -442,6 +442,38 @@ export function Settings(props: { closeSettings: () => void }) {
           </SettingItem>
         </List>
 
+        <List>
+          <SettingItem
+            title={Locale.Settings.Prompt.Disable.Title}
+            subTitle={Locale.Settings.Prompt.Disable.SubTitle}
+          >
+            <input
+              type="checkbox"
+              checked={config.disablePromptHint}
+              onChange={(e) =>
+                updateConfig(
+                  (config) =>
+                    (config.disablePromptHint = e.currentTarget.checked),
+                )
+              }
+            ></input>
+          </SettingItem>
+
+          <SettingItem
+            title={Locale.Settings.Prompt.List}
+            subTitle={Locale.Settings.Prompt.ListCount(
+              builtinCount,
+              customCount,
+            )}
+          >
+            <IconButton
+              icon={<EditIcon />}
+              text={Locale.Settings.Prompt.Edit}
+              onClick={() => showToast(Locale.WIP)}
+            />
+          </SettingItem>
+        </List>
+
         <List>
           <SettingItem title={Locale.Settings.Model}>
             <select

app/components/ui-lib.module.scss

@@ -9,6 +9,7 @@
 
 .popover {
   position: relative;
+  z-index: 2;
 }
 
 .popover-content {
@@ -126,6 +127,7 @@
   width: 100vw;
   display: flex;
   justify-content: center;
+  pointer-events: none;
 
   .toast-content {
     max-width: 80vw;
@@ -140,6 +142,7 @@
     margin-bottom: 20px;
     display: flex;
     align-items: center;
+    pointer-events: all;
 
     .toast-action {
       padding-left: 20px;

app/icons/max.svg

@@ -0,0 +1,41 @@
+<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 2)  rotate(0 1.6666666666666665 1.6499166666666665)"
+        d="M0,0L3.33,3.3 " />
+      <path id="路径 2"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(2 10.666666666666666)  rotate(0 1.6666666666666665 1.6499166666666671)"
+        d="M0,3.3L3.33,0 " />
+      <path id="路径 3"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(10.700199999999999 10.666666666666666)  rotate(0 1.6499166666666671 1.6499166666666671)"
+        d="M3.3,3.3L0,0 " />
+      <path id="路径 4"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(10.666666666666666 2)  rotate(0 1.6499166666666671 1.6499166666666665)"
+        d="M3.3,0L0,3.3 " />
+      <path id="路径 5"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(11 2)  rotate(0 1.5 1.5)" d="M0,0L3,0L3,3 " />
+      <path id="路径 6"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(11 11)  rotate(0 1.5 1.5)" d="M3,0L3,3L0,3 " />
+      <path id="路径 7"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(2 11)  rotate(0 1.5 1.5)" d="M3,3L0,3L0,0 " />
+      <path id="路径 8"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(2 2)  rotate(0 1.5 1.5)" d="M0,3L0,0L3,0 " />
+    </g>
+  </g>
+</svg>

app/icons/min.svg

@@ -0,0 +1,45 @@
+<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 2)  rotate(0 1.6666666666666665 1.6499166666666665)"
+        d="M0,0L3.33,3.3 " />
+      <path id="路径 2"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(2 10.666666666666666)  rotate(0 1.6666666666666665 1.6499166666666671)"
+        d="M0,3.3L3.33,0 " />
+      <path id="路径 3"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(10.700199999999999 10.666666666666666)  rotate(0 1.6499166666666671 1.6499166666666671)"
+        d="M3.3,3.3L0,0 " />
+      <path id="路径 4"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(10.666666666666666 2)  rotate(0 1.6499166666666671 1.6499166666666665)"
+        d="M3.3,0L0,3.3 " />
+      <path id="路径 5"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(10.666666666666666 2.333333333333333)  rotate(0 1.5 1.5)"
+        d="M0,0L0,3L3,3 " />
+      <path id="路径 6"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(2.333333333333333 2.333333333333333)  rotate(0 1.5 1.5)"
+        d="M3,0L3,3L0,3 " />
+      <path id="路径 7"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(2.333333333333333 10.666666666666666)  rotate(0 1.5 1.5)"
+        d="M3,3L3,0L0,0 " />
+      <path id="路径 8"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(10.666666666666666 10.666666666666666)  rotate(0 1.4832500000000004 1.5)"
+        d="M0,3L0,0L2.97,0 " />
+    </g>
+  </g>
+</svg>

app/icons/share.svg

@@ -0,0 +1,17 @@
+<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 1.3333333333333333)  rotate(0 6.333333333333333 6.5)"
+        d="M6.67,3.67C1.67,3.67 0,7.33 0,13C0,13 2,8 6.67,8L6.67,11.67L12.67,6L6.67,0L6.67,3.67Z " />
+    </g>
+  </g>
+</svg>

app/locales/cn.ts

@@ -3,7 +3,7 @@ import { SubmitKey } from "../store/app";
 const cn = {
   WIP: "该功能仍在开发中……",
   Error: {
-    Unauthorized: "现在是未授权状态，请在设置页输入访问密码。",
+    Unauthorized: "现在是未授权状态，请点击左下角设置按钮输入访问密码。",
   },
   ChatItem: {
     ChatItemCount: (count: number) => `${count} 条对话`,
@@ -21,11 +21,11 @@ const cn = {
     Rename: "重命名对话",
     Typing: "正在输入…",
     Input: (submitKey: string) => {
-      var inputHints = `输入消息，${submitKey} 发送`;
+      var inputHints = `${submitKey} 发送`;
       if (submitKey === String(SubmitKey.Enter)) {
         inputHints += "，Shift + Enter 换行";
       }
-      return inputHints;
+      return inputHints + "，/ 触发补全";
     },
     Send: "发送",
   },
@@ -57,6 +57,12 @@ const cn = {
       ClearAll: "清除所有数据",
       ResetAll: "重置所有选项",
       Close: "关闭",
+      ConfirmResetAll: {
+        Confirm: "Are you sure you want to reset all configurations?",
+      },
+      ConfirmClearAll: {
+        Confirm: "Are you sure you want to reset all chat?",
+      },
     },
     Lang: {
       Name: "Language",
@@ -84,7 +90,7 @@ const cn = {
     },
     SendKey: "发送键",
     Theme: "主题",
-    TightBorder: "紧凑边框",
+    TightBorder: "无边框模式",
     SendPreviewBubble: "发送预览气泡",
     Prompt: {
       Disable: {
@@ -120,13 +126,13 @@ const cn = {
     },
     AccessCode: {
       Title: "访问密码",
-      SubTitle: "现在是未授权访问状态",
+      SubTitle: "已开启加密访问",
       Placeholder: "请输入访问密码",
     },
     Model: "模型 (model)",
     Temperature: {
       Title: "随机性 (temperature)",
-      SubTitle: "值越大，回复越随机",
+      SubTitle: "值越大，回复越随机，大于 1 的值可能会导致乱码",
     },
     MaxTokens: {
       Title: "单次回复限制 (max_tokens)",

app/locales/en.ts

@@ -23,11 +23,11 @@ const en: LocaleType = {
     Rename: "Rename Chat",
     Typing: "Typing…",
     Input: (submitKey: string) => {
-      var inputHints = `Type something and press ${submitKey} to send`;
+      var inputHints = `${submitKey} to send`;
       if (submitKey === String(SubmitKey.Enter)) {
-        inputHints += ", press Shift + Enter to newline";
+        inputHints += ", Shift + Enter to wrap";
       }
-      return inputHints;
+      return inputHints + ", / to search prompts";
     },
     Send: "Send",
   },
@@ -60,6 +60,12 @@ const en: LocaleType = {
       ClearAll: "Clear All Data",
       ResetAll: "Reset All Settings",
       Close: "Close",
+      ConfirmResetAll: {
+        Confirm: "Are you sure you want to reset all configurations?",
+      },
+      ConfirmClearAll: {
+        Confirm: "Are you sure you want to reset all chat?",
+      },
     },
     Lang: {
       Name: "Language", // ATTENTION: if you wanna add a new translation, please do not translate this value, leave it as `Language`

app/locales/es.ts

@@ -60,6 +60,12 @@ const es: LocaleType = {
       ClearAll: "Borrar todos los datos",
       ResetAll: "Restablecer todas las configuraciones",
       Close: "Cerrar",
+      ConfirmResetAll: {
+        Confirm: "Are you sure you want to reset all configurations?",
+      },
+      ConfirmClearAll: {
+        Confirm: "Are you sure you want to reset all chat?",
+      },
     },
     Lang: {
       Name: "Language",

app/locales/it.ts

@@ -60,6 +60,12 @@ const it: LocaleType = {
       ClearAll: "Cancella tutti i dati",
       ResetAll: "Resetta tutte le impostazioni",
       Close: "Chiudi",
+      ConfirmResetAll: {
+        Confirm: "Sei sicuro vuoi cancellare tutte le impostazioni?",
+      },
+      ConfirmClearAll: {
+        Confirm: "Sei sicuro vuoi cancellare tutte le chat?",
+      },
     },
     Lang: {
       Name: "Lingue",

app/locales/tw.ts

@@ -58,6 +58,12 @@ const tw: LocaleType = {
       ClearAll: "清除所有數據",
       ResetAll: "重置所有設定",
       Close: "關閉",
+      ConfirmResetAll: {
+        Confirm: "Are you sure you want to reset all configurations?",
+      },
+      ConfirmClearAll: {
+        Confirm: "Are you sure you want to reset all chat?",
+      },
     },
     Lang: {
       Name: "Language",

app/requests.ts

@@ -9,7 +9,7 @@ const makeRequestParam = (
   options?: {
     filterBot?: boolean;
     stream?: boolean;
-  }
+  },
 ): ChatRequest => {
   let sendMessages = messages.map((v) => ({
     role: v.role,
@@ -20,7 +20,11 @@ const makeRequestParam = (
     sendMessages = sendMessages.filter((m) => m.role !== "assistant");
   }
 
-  const modelConfig = useChatStore.getState().config.modelConfig;
+  const modelConfig = { ...useChatStore.getState().config.modelConfig };
+
+  // @yidadaa: wont send max_tokens, because it is nonsense for Muggles
+  // @ts-expect-error
+  delete modelConfig.max_tokens;
 
   return {
     messages: sendMessages,
@@ -84,7 +88,7 @@ export async function requestUsage() {
 
   const [used, subs] = await Promise.all([
     requestOpenaiClient(
-      `dashboard/billing/usage?start_date=${startDate}&end_date=${endDate}`
+      `dashboard/billing/usage?start_date=${startDate}&end_date=${endDate}`,
     )(null, "GET"),
     requestOpenaiClient("dashboard/billing/subscription")(null, "GET"),
   ]);
@@ -124,7 +128,7 @@ export async function requestChatStream(
     onMessage: (message: string, done: boolean) => void;
     onError: (error: Error, statusCode?: number) => void;
     onController?: (controller: AbortController) => void;
-  }
+  },
 ) {
   const req = makeRequestParam(messages, {
     stream: true,
@@ -213,7 +217,7 @@ export const ControllerPool = {
   addController(
     sessionIndex: number,
     messageId: number,
-    controller: AbortController
+    controller: AbortController,
   ) {
     const key = this.key(sessionIndex, messageId);
     this.controllers[key] = controller;

app/store/access.ts

@@ -9,6 +9,7 @@ export interface AccessControlStore {
   updateToken: (_: string) => void;
   updateCode: (_: string) => void;
   enabledAccessControl: () => boolean;
+  isAuthorized: () => boolean;
 }
 
 export const ACCESS_KEY = "access-control";
@@ -27,10 +28,13 @@ export const useAccessStore = create<AccessControlStore>()(
       updateToken(token: string) {
         set((state) => ({ token }));
       },
+      isAuthorized() {
+        return !!get().token || !!get().accessCode;
+      },
     }),
     {
       name: ACCESS_KEY,
       version: 1,
-    }
-  )
+    },
+  ),
 );

app/store/app.ts

@@ -53,6 +53,7 @@ export interface ChatConfig {
   theme: Theme;
   tightBorder: boolean;
   sendPreviewBubble: boolean;
+  sidebarWidth: number;
 
   disablePromptHint: boolean;
 
@@ -141,6 +142,7 @@ const DEFAULT_CONFIG: ChatConfig = {
   theme: Theme.Auto as Theme,
   tightBorder: false,
   sendPreviewBubble: true,
+  sidebarWidth: 300,
 
   disablePromptHint: false,
 
@@ -205,7 +207,7 @@ interface ChatStore {
   moveSession: (from: number, to: number) => void;
   selectSession: (index: number) => void;
   newSession: () => void;
-  deleteSession: () => void;
+  deleteSession: (index?: number) => void;
   currentSession: () => ChatSession;
   onNewMessage: (message: Message) => void;
   onUserInput: (content: string) => Promise<void>;
@@ -326,24 +328,31 @@ export const useChatStore = create<ChatStore>()(
         }));
       },
 
-      deleteSession() {
+      deleteSession(i?: number) {
         const deletedSession = get().currentSession();
-        const index = get().currentSessionIndex;
+        const index = i ?? get().currentSessionIndex;
         const isLastSession = get().sessions.length === 1;
         if (!isMobileScreen() || confirm(Locale.Home.DeleteChat)) {
           get().removeSession(index);
+
+          showToast(
+            Locale.Home.DeleteToast,
+            {
+              text: Locale.Home.Revert,
+              onClick() {
+                set((state) => ({
+                  sessions: state.sessions
+                    .slice(0, index)
+                    .concat([deletedSession])
+                    .concat(
+                      state.sessions.slice(index + Number(isLastSession)),
+                    ),
+                }));
+              },
+            },
+            5000,
+          );
         }
-        showToast(Locale.Home.DeleteToast, {
-          text: Locale.Home.Revert,
-          onClick() {
-            set((state) => ({
-              sessions: state.sessions
-                .slice(0, index)
-                .concat([deletedSession])
-                .concat(state.sessions.slice(index + Number(isLastSession))),
-            }));
-          },
-        });
       },
 
       currentSession() {

app/store/prompt.ts

@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import Fuse from "fuse.js";
+import { getLang } from "../locales";
 
 export interface Prompt {
   id?: number;
@@ -25,11 +26,13 @@ export const SearchService = {
   count: {
     builtin: 0,
   },
+  allBuiltInPrompts: [] as Prompt[],
 
   init(prompts: Prompt[]) {
     if (this.ready) {
       return;
     }
+    this.allBuiltInPrompts = prompts;
     this.engine.setCollection(prompts);
     this.ready = true;
   },
@@ -78,6 +81,11 @@ export const usePromptStore = create<PromptStore>()(
       },
 
       search(text) {
+        if (text.length === 0) {
+          // return all prompts
+          const userPrompts = get().prompts?.values?.() ?? [];
+          return SearchService.allBuiltInPrompts.concat([...userPrompts]);
+        }
         return SearchService.search(text) as Prompt[];
       },
     }),
@@ -92,7 +100,11 @@ export const usePromptStore = create<PromptStore>()(
         fetch(PROMPT_URL)
           .then((res) => res.json())
           .then((res) => {
-            const builtinPrompts = [res.en, res.cn]
+            let fetchPrompts = [res.en, res.cn];
+            if (getLang() === "cn") {
+              fetchPrompts = fetchPrompts.reverse();
+            }
+            const builtinPrompts = fetchPrompts
               .map((promptList: PromptList) => {
                 return promptList.map(
                   ([title, content]) =>

app/utils.ts

@@ -51,6 +51,12 @@ export function isMobileScreen() {
   return window.innerWidth <= 600;
 }
 
+export function isFirefox() {
+  return (
+    typeof navigator !== "undefined" && /firefox/i.test(navigator.userAgent)
+  );
+}
+
 export function selectOrCopy(el: HTMLElement, content: string) {
   const currentSelection = window.getSelection();
 
@@ -91,3 +97,51 @@ export function getCurrentVersion() {
 export function getEmojiUrl(unified: string, style: EmojiStyle) {
   return `https://cdn.staticfile.org/emoji-datasource-apple/14.0.0/img/${style}/64/${unified}.png`;
 }
+
+function getDomContentWidth(dom: HTMLElement) {
+  const style = window.getComputedStyle(dom);
+  const paddingWidth =
+    parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+  const width = dom.clientWidth - paddingWidth;
+  return width;
+}
+
+function getOrCreateMeasureDom(id: string, init?: (dom: HTMLElement) => void) {
+  let dom = document.getElementById(id);
+
+  if (!dom) {
+    dom = document.createElement("span");
+    dom.style.position = "absolute";
+    dom.style.wordBreak = "break-word";
+    dom.style.fontSize = "14px";
+    dom.style.transform = "translateY(-200vh)";
+    dom.style.pointerEvents = "none";
+    dom.style.opacity = "0";
+    dom.id = id;
+    document.body.appendChild(dom);
+    init?.(dom);
+  }
+
+  return dom!;
+}
+
+export function autoGrowTextArea(dom: HTMLTextAreaElement) {
+  const measureDom = getOrCreateMeasureDom("__measure");
+  const singleLineDom = getOrCreateMeasureDom("__single_measure", (dom) => {
+    dom.innerText = "TEXT_FOR_MEASURE";
+  });
+
+  const width = getDomContentWidth(dom);
+  measureDom.style.width = width + "px";
+  measureDom.innerHTML = dom.value.trim().length > 0 ? dom.value : "1";
+
+  const lineWrapCount = Math.max(0, dom.value.split("\n").length - 1);
+  const height = parseFloat(window.getComputedStyle(measureDom).height);
+  const singleLineHeight = parseFloat(
+    window.getComputedStyle(singleLineDom).height,
+  );
+
+  const rows = Math.round(height / singleLineHeight) + lineWrapCount;
+
+  return rows;
+}

scripts/fetch-prompts.mjs

@@ -1,14 +1,13 @@
 import fetch from "node-fetch";
 import fs from "fs/promises";
 
-const RAW_CN_URL =
-  "https://raw.githubusercontent.com/PlexPt/awesome-chatgpt-prompts-zh/main/prompts-zh.json";
-const CN_URL =
-  "https://cdn.jsdelivr.net/gh/PlexPt/awesome-chatgpt-prompts-zh@main/prompts-zh.json";
-const RAW_EN_URL =
-  "https://raw.githubusercontent.com/f/awesome-chatgpt-prompts/main/prompts.csv";
-const EN_URL =
-  "https://cdn.jsdelivr.net/gh/f/awesome-chatgpt-prompts@main/prompts.csv";
+const RAW_FILE_URL = "https://raw.githubusercontent.com/";
+const MIRRORF_FILE_URL = "https://raw.fgit.ml/";
+
+const RAW_CN_URL = "PlexPt/awesome-chatgpt-prompts-zh/main/prompts-zh.json";
+const CN_URL = MIRRORF_FILE_URL + RAW_CN_URL;
+const RAW_EN_URL = "f/awesome-chatgpt-prompts/main/prompts.csv";
+const EN_URL = MIRRORF_FILE_URL + RAW_EN_URL;
 const FILE = "./public/prompts.json";
 
 async function fetchCN() {

tsconfig.json

@@ -23,6 +23,6 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "app/calcTextareaHeight.ts"],
   "exclude": ["node_modules"]
 }

vercel.json

@@ -0,0 +1,5 @@
+{
+    "github": {
+        "silent": true
+    }
+}