初始化

.eslintignore

@@ -0,0 +1 @@
+public/serviceWorker.js

.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "extends": "next/core-web-vitals",
+  "plugins": ["prettier"]
+}

.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+dev
+
+public/prompts.json
+
+.vscode
+.idea

.gitpod.yml

@@ -0,0 +1,11 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+  - init: yarn install && yarn run dev
+    command: yarn run dev
+
+

.lintstagedrc.json

@@ -0,0 +1,6 @@
+{
+  "./app/**/*.{js,ts,jsx,tsx,json,html,css,md}": [
+    "eslint --fix",
+    "prettier --write"
+  ]
+}

.prettierrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: false,
+  trailingComma: 'all',
+  bracketSpacing: true,
+  arrowParens: 'always',
+};

CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+flynn.zhang@foxmail.com.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

Dockerfile

@@ -0,0 +1,59 @@
+FROM node:18-alpine AS base
+
+FROM base AS deps
+
+RUN apk add --no-cache libc6-compat
+
+WORKDIR /app
+
+COPY package.json yarn.lock ./
+
+RUN yarn config set registry 'https://registry.npmmirror.com/'
+RUN yarn install
+
+FROM base AS builder
+
+RUN apk update && apk add --no-cache git
+
+ENV OPENAI_API_KEY=""
+ENV CODE=""
+
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+RUN yarn build
+
+FROM base AS runner
+WORKDIR /app
+
+RUN apk add proxychains-ng
+
+ENV PROXY_URL=""
+ENV OPENAI_API_KEY=""
+ENV CODE=""
+
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+COPY --from=builder /app/.next/server ./.next/server
+
+EXPOSE 3000
+
+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

LICENSE

@@ -0,0 +1,75 @@
+版权所有（c）<2023><Zhang Yifei>
+
+反996许可证版本1.0
+
+在符合下列条件的情况下，
+特此免费向任何得到本授权作品的副本（包括源代码、文件和/或相关内容，以下统称为“授权作品”
+）的个人和法人实体授权：被授权个人或法人实体有权以任何目的处置授权作品，包括但不限于使
+用、复制，修改，衍生利用、散布，发布和再许可：
+
+
+1.	个人或法人实体必须在许可作品的每个再散布或衍生副本上包含以上版权声明和本许可证，不
+    得自行修改。
+2.	个人或法人实体必须严格遵守与个人实际所在地或个人出生地或归化地、或法人实体注册地或
+    经营地（以较严格者为准）的司法管辖区所有适用的与劳动和就业相关法律、法规、规则和
+    标准。如果该司法管辖区没有此类法律、法规、规章和标准或其法律、法规、规章和标准不可
+    执行，则个人或法人实体必须遵守国际劳工标准的核心公约。
+3.	个人或法人不得以任何方式诱导或强迫其全职或兼职员工或其独立承包人以口头或书面形式同
+    意直接或间接限制、削弱或放弃其所拥有的，受相关与劳动和就业有关的法律、法规、规则和
+    标准保护的权利或补救措施，无论该等书面或口头协议是否被该司法管辖区的法律所承认，该
+    等个人或法人实体也不得以任何方法限制其雇员或独立承包人向版权持有人或监督许可证合规
+    情况的有关当局报告或投诉上述违反许可证的行为的权利。
+
+该授权作品是"按原样"提供，不做任何明示或暗示的保证，包括但不限于对适销性、特定用途适用
+性和非侵权性的保证。在任何情况下，无论是在合同诉讼、侵权诉讼或其他诉讼中，版权持有人均
+不承担因本软件或本软件的使用或其他交易而产生、引起或与之相关的任何索赔、损害或其他责任。
+
+
+------------------------- ENGLISH ------------------------------
+
+
+Copyright (c) <2023> <Zhang Yifei>
+
+Anti 996 License Version 1.0 (Draft)
+
+Permission is hereby granted to any individual or legal entity obtaining a copy
+of this licensed work (including the source code, documentation and/or related
+items, hereinafter collectively referred to as the "licensed work"), free of
+charge, to deal with the licensed work for any purpose, including without
+limitation, the rights to use, reproduce, modify, prepare derivative works of,
+publish, distribute and sublicense the licensed work, subject to the following
+conditions:
+
+1.  The individual or the legal entity must conspicuously display, without
+    modification, this License on each redistributed or derivative copy of the
+    Licensed Work.
+
+2.  The individual or the legal entity must strictly comply with all applicable
+    laws, regulations, rules and standards of the jurisdiction relating to
+    labor and employment where the individual is physically located or where
+    the individual was born or naturalized; or where the legal entity is
+    registered or is operating (whichever is stricter). In case that the
+    jurisdiction has no such laws, regulations, rules and standards or its
+    laws, regulations, rules and standards are unenforceable, the individual
+    or the legal entity are required to comply with Core International Labor
+    Standards.
+
+3.  The individual or the legal entity shall not induce or force its
+    employee(s), whether full-time or part-time, or its independent
+    contractor(s), in any methods, to agree in oral or written form,
+    to directly or indirectly restrict, weaken or relinquish his or
+    her rights or remedies under such laws, regulations, rules and
+    standards relating to labor and employment as mentioned above,
+    no matter whether such written or oral agreement are enforceable
+    under the laws of the said jurisdiction, nor shall such individual
+    or the legal entity limit, in any methods, the rights of its employee(s)
+    or independent contractor(s) from reporting or complaining to the copyright
+    holder or relevant authorities monitoring the compliance of the license
+    about its violation(s) of the said license.
+
+THE LICENSED WORK IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE COPYRIGHT
+HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN ANY WAY CONNECTION
+WITH THE LICENSED WORK OR THE USE OR OTHER DEALINGS IN THE LICENSED WORK.

README.md

@@ -0,0 +1,263 @@
+<div align="center">
+<img src="./docs/images/icon.svg" alt="icon"/>
+
+<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://chatgpt.nextweb.fun/) / [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://chatgpt.nextweb.fun/) / [反馈](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [QQ 群](https://user-images.githubusercontent.com/16968934/234462588-e8eff256-f5ca-46ef-8f5f-d7db6d28735a.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)
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
+
+![cover](./docs/images/cover.png)
+
+</div>
+
+## 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), support streaming response
+- New in v2: create, share and debug your chat tools with prompt templates (mask)
+- 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
+- I18n supported
+
+## Roadmap
+
+- [x] System Prompt: pin a user defined prompt as system prompt [#138](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/138)
+- [x] User Prompt: user can edit and save custom prompts to prompt list
+- [x] Prompt Template: create a new chat with pre-defined in-context prompts [#993](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/993)
+- [ ] Share as image, share to ShareGPT
+- [ ] Desktop App with tauri
+- [ ] Self-host Model: support llama, alpaca, ChatGLM, BELLE etc.
+- [ ] Plugins: support network search, calculator, any other apis etc. [#165](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/165)
+
+### Not in Plan
+
+- User login, accounts, cloud sync
+- UI text customize
+
+## What's New
+
+- 🚀 v2.0 is released, now you can create prompt templates, turn your ideas into reality! Read this: [ChatGPT Prompt Engineering Tips: Zero, One and Few Shot Prompting](https://www.allabtai.com/prompt-engineering-tips-zero-one-and-few-shot-prompting/).
+
+## 主要功能
+
+- 在 1 分钟内使用 Vercel **免费一键部署**
+- 精心设计的 UI，响应式设计，支持深色模式，支持 PWA
+- 极快的首屏加载速度（~100kb），支持流式响应
+- 隐私安全，所有数据保存在用户浏览器本地
+- 预制角色功能（面具），方便地创建、分享和调试你的个性化对话
+- 海量的内置 prompt 列表，来自[中文](https://github.com/PlexPt/awesome-chatgpt-prompts-zh)和[英文](https://github.com/f/awesome-chatgpt-prompts)
+- 自动压缩上下文聊天记录，在节省 Token 的同时支持超长对话
+- 一键导出聊天记录，完整的 Markdown 支持
+- 拥有自己的域名？好上加好，绑定后即可在任何地方**无障碍**快速访问
+
+## 开发计划
+
+- [x] 为每个对话设置系统 Prompt [#138](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/138)
+- [x] 允许用户自行编辑内置 Prompt 列表
+- [x] 预制角色：使用预制角色快速定制新对话 [#993](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/993)
+- [ ] 分享为图片，分享到 ShareGPT
+- [ ] 使用 tauri 打包桌面应用
+- [ ] 支持自部署的大语言模型
+- [ ] 插件机制，支持联网搜索、计算器、调用其他平台 api [#165](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/165)
+
+### 不会开发的功能
+
+- 界面文字自定义
+- 用户登录、账号管理、消息云同步
+
+## 最新动态
+
+- 🚀 v2.0 已经发布，现在你可以使用面具功能快速创建预制对话了！ 了解更多： [ChatGPT 提示词高阶技能：零次、一次和少样本提示](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/138)。
+
+## Get Started
+
+> [简体中文 > 如何开始使用](./README_CN.md#开始使用)
+
+1. Get [OpenAI API Key](https://platform.openai.com/account/api-keys);
+2. Click
+   [![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), remember that `CODE` is your page password;
+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.
+
+We recommend that you follow the steps below to re-deploy:
+
+- 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).
+
+### Enable Automatic Updates
+
+> If you encounter a failure of Upstream Sync execution, please manually sync fork once.
+
+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.
+
+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:
+
+```
+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)
+
+Your openai api key.
+
+### `CODE` (optional)
+
+Access passsword, separated by comma.
+
+### `BASE_URL` (optional)
+
+> Default: `https://api.openai.com`
+
+> Examples: `http://your-openai-proxy.com`
+
+Override openai api request base url.
+
+### `OPENAI_ORG_ID` (optional)
+
+Specify OpenAI organization ID.
+
+### `HIDE_USER_API_KEY` (optional)
+
+> Default: Empty
+
+If you do not want users to input their own API key, set this environment variable to 1.
+
+## 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)
+
+Before starting development, you must create a new `.env.local` file at project root, and place your api key into it:
+
+```
+OPENAI_API_KEY=<your api key here>
+```
+
+### Local Development
+
+```shell
+# 1. install nodejs and yarn first
+# 2. config local env vars in `.env.local`
+# 3. run
+yarn install
+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="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
+
+```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
+
+> 仅列出捐赠金额 >= 100RMB 的用户。
+
+[@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)
+[@Corwin006](https://github.com/Corwin006)
+[@yankunsong](https://github.com/yankunsong)
+[@ypwhs](https://github.com/ypwhs)
+[@fxxxchao](https://github.com/fxxxchao)
+[@hotic](https://github.com/hotic)
+[@WingCH](https://github.com/WingCH)
+[@jtung4](https://github.com/jtung4)
+
+### Contributor
+
+[Contributors](https://github.com/Yidadaa/ChatGPT-Next-Web/graphs/contributors)
+
+## LICENSE
+
+[Anti 996 License](https://github.com/kattgu7/Anti-996-License/blob/master/LICENSE_CN_EN)

README_CN.md

@@ -0,0 +1,171 @@
+<div align="center">
+<img src="./docs/images/icon.svg" alt="预览"/>
+
+<h1 align="center">ChatGPT Next Web</h1>
+
+一键免费部署你的私人 ChatGPT 网页应用。
+
+[演示 Demo](https://chat-gpt-next-web.vercel.app/) / [反馈 Issues](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [加入 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) / [Donate](#捐赠-donate-usdt)
+
+[![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)
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
+
+![主界面](./docs/images/cover.png)
+
+</div>
+
+## 开始使用
+
+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 和[页面访问密码](#配置页面访问密码) CODE；
+3. 部署完毕后，即可开始使用；
+4. （可选）[绑定自定义域名](https://vercel.com/docs/concepts/projects/domains/add-a-domain)：Vercel 分配的域名 DNS 在某些区域被污染了，绑定自定义域名即可直连。
+
+## 保持更新
+
+如果你按照上述步骤一键部署了自己的项目，可能会发现总是提示“存在更新”的问题，这是由于 Vercel 会默认为你创建一个新项目而不是 fork 本项目，这会导致无法正确地检测更新。
+推荐你按照下列步骤重新部署：
+
+- 删除掉原先的仓库；
+- 使用页面右上角的 fork 按钮，fork 本项目；
+- 在 Vercel 重新选择并部署，[请查看详细教程](./docs/vercel-cn.md#如何新建项目)。
+
+### 打开自动更新
+
+> 如果你遇到了 Upstream Sync 执行错误，请手动 Sync 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 的项目与上游代码同步。
+
+你可以 star/watch 本项目或者 follow 作者来及时获得新功能更新通知。
+
+## 配置页面访问密码
+
+> 配置密码后，用户需要在设置页手动填写访问码才可以正常聊天，否则会通过消息提示未授权状态。
+
+> **警告**：请务必将密码的位数设置得足够长，最好 7 位以上，否则[会被爆破](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/518)。
+
+本项目提供有限的权限控制功能，请在 Vercel 项目控制面板的环境变量页增加名为 `CODE` 的环境变量，值为用英文逗号分隔的自定义密码：
+
+```
+code1,code2,code3
+```
+
+增加或修改该环境变量后，请**重新部署**项目使改动生效。
+
+## 环境变量
+
+> 本项目大多数配置项都通过环境变量来设置。
+
+### `OPENAI_API_KEY` （必填项）
+
+OpanAI 密钥，你在 openai 账户页面申请的 api key。
+
+### `CODE` （可选）
+
+访问密码，可选，可以使用逗号隔开多个密码。
+
+**警告**：如果不填写此项，则任何人都可以直接使用你部署后的网站，可能会导致你的 token 被急速消耗完毕，建议填写此选项。
+
+### `BASE_URL` （可选）
+
+> Default: `https://api.openai.com`
+
+> Examples: `http://your-openai-proxy.com`
+
+OpenAI 接口代理 URL，如果你手动配置了 openai 接口代理，请填写此选项。
+
+> 如果遇到 ssl 证书问题，请将 `BASE_URL` 的协议设置为 http。
+
+### `OPENAI_ORG_ID` （可选）
+
+指定 OpenAI 中的组织 ID。
+
+### `HIDE_USER_API_KEY` （可选）
+
+如果你不想让用户自行填入 API Key，将此环境变量设置为 1 即可。
+
+## 开发
+
+> 强烈不建议在本地进行开发或者部署，由于一些技术原因，很难在本地配置好 OpenAI API 代理，除非你能保证可以直连 OpenAI 服务器。
+
+点击下方按钮，开始二次开发：
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
+
+在开始写���码之前，需要在项目根目录新建一个 `.env.local` 文件，里面填入环境变量：
+
+```
+OPENAI_API_KEY=<your api key here>
+```
+
+### 本地开发
+
+1. 安装 nodejs 18 和 yarn，具体细节请询问 ChatGPT；
+2. 执行 `yarn install && yarn dev` 即可。⚠️ 注意：此命令仅用于本地开发，不要用于部署！
+3. 如果你想本地部署，请使用 `yarn install && yarn start` 命令，你可以配合 pm2 来守护进程，防止被杀死，详情询问 ChatGPT。
+
+## 部署
+
+### 容器部署 （推荐）
+
+> Docker 版本需要在 20 及其以上，否则会提示找不到镜像。
+
+> ⚠️ 注意：docker 版本在大多数时间都会落后最新的版本 1 到 2 天，所以部署后会持续出现“存在更新”的提示，属于正常现象。
+
+```shell
+docker pull 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="页面访问密码" \
+   --net=host \
+   -e PROXY_URL="http://127.0.0.1:7890" \
+   yidadaa/chatgpt-next-web
+```
+
+如果你需要指定其他环境变量，请自行在上述命令中增加 `-e 环境变量=环境变量值` 来指定。
+
+### 本地部署
+
+在控制台运行下方命令：
+
+```shell
+bash <(curl -s https://raw.githubusercontent.com/Yidadaa/ChatGPT-Next-Web/main/scripts/setup.sh)
+```
+
+⚠️ 注意：如果你安装过程中遇到了问题，请使用 docker 部署。
+
+## 鸣谢
+
+### 捐赠者
+
+> 见英文版。
+
+### 贡献者
+
+[见项目贡献者列表](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/auth.ts

@@ -0,0 +1,71 @@
+import { NextRequest } from "next/server";
+import { getServerSideConfig } from "../config/server";
+import md5 from "spark-md5";
+import { ACCESS_CODE_PREFIX } from "../constant";
+
+const serverConfig = getServerSideConfig();
+
+function getIP(req: NextRequest) {
+  let ip = req.ip ?? req.headers.get("x-real-ip");
+  const forwardedFor = req.headers.get("x-forwarded-for");
+
+  if (!ip && forwardedFor) {
+    ip = forwardedFor.split(",").at(0) ?? "";
+  }
+
+  return ip;
+}
+
+function parseApiKey(bearToken: string) {
+  const token = bearToken.trim().replaceAll("Bearer ", "").trim();
+  const isOpenAiKey = !token.startsWith(ACCESS_CODE_PREFIX);
+
+  return {
+    accessCode: isOpenAiKey ? "" : token.slice(ACCESS_CODE_PREFIX.length),
+    apiKey: isOpenAiKey ? token : "",
+  };
+}
+
+export function auth(req: NextRequest) {
+  const authToken = req.headers.get("Authorization") ?? "";
+
+  // check if it is openai api key or user token
+  const { accessCode, apiKey: token } = parseApiKey(authToken);
+
+  const hashedCode = md5.hash(accessCode ?? "").trim();
+
+  console.log("[Auth] allowed hashed codes: ", [...serverConfig.codes]);
+  console.log("[Auth] got access code:", accessCode);
+  console.log("[Auth] hashed access code:", hashedCode);
+  console.log("[User IP] ", getIP(req));
+  console.log("[Time] ", new Date().toLocaleString());
+
+  if (serverConfig.needCode && !serverConfig.codes.has(hashedCode) && !token) {
+    return {
+      error: true,
+      needAccessCode: true,
+      msg: "Please go settings page and fill your access code.",
+    };
+  }
+
+  // if user does not provide an api key, inject system api key
+  if (!token) {
+    const apiKey = serverConfig.apiKey;
+    if (apiKey) {
+      console.log("[Auth] use system api key");
+      req.headers.set("Authorization", `Bearer ${apiKey}`);
+    } else {
+      console.log("[Auth] admin did not provide an api key");
+      return {
+        error: true,
+        msg: "Empty Api Key",
+      };
+    }
+  } else {
+    console.log("[Auth] use user api key");
+  }
+
+  return {
+    error: false,
+  };
+}

app/api/common.ts

@@ -0,0 +1,44 @@
+import { NextRequest } from "next/server";
+
+const OPENAI_URL = "api.openai.com";
+const DEFAULT_PROTOCOL = "https";
+const PROTOCOL = process.env.PROTOCOL ?? DEFAULT_PROTOCOL;
+const BASE_URL = process.env.BASE_URL ?? OPENAI_URL;
+
+export async function requestOpenai(req: NextRequest) {
+  const authValue = req.headers.get("Authorization") ?? "";
+  const openaiPath = `${req.nextUrl.pathname}${req.nextUrl.search}`.replaceAll(
+    "/api/openai/",
+    "",
+  );
+
+  let baseUrl = BASE_URL;
+
+  if (!baseUrl.startsWith("http")) {
+    baseUrl = `${PROTOCOL}://${baseUrl}`;
+  }
+
+  console.log("[Proxy] ", openaiPath);
+  console.log("[Base Url]", baseUrl);
+
+  if (process.env.OPENAI_ORG_ID) {
+    console.log("[Org ID]", process.env.OPENAI_ORG_ID);
+  }
+
+  if (!authValue || !authValue.startsWith("Bearer sk-")) {
+    console.error("[OpenAI Request] invlid api key provided", authValue);
+  }
+
+  return fetch(`${baseUrl}/${openaiPath}`, {
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: authValue,
+      ...(process.env.OPENAI_ORG_ID && {
+        "OpenAI-Organization": process.env.OPENAI_ORG_ID,
+      }),
+    },
+    cache: "no-store",
+    method: req.method,
+    body: req.body,
+  });
+}

app/api/config/route.ts

@@ -0,0 +1,25 @@
+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,
+  hideUserApiKey: serverConfig.hideUserApiKey,
+};
+
+declare global {
+  type DangerConfig = typeof DANGER_CONFIG;
+}
+
+async function handle() {
+  return NextResponse.json(DANGER_CONFIG);
+}
+
+export const GET = handle;
+export const POST = handle;
+
+export const runtime = "edge";

app/api/lemur/route.ts

@@ -0,0 +1,70 @@
+import { createParser } from "eventsource-parser";
+import { NextRequest } from "next/server";
+
+async function createStream(req: NextRequest) {
+  const encoder = new TextEncoder();
+  const decoder = new TextDecoder();
+
+  const res = await fetch(
+    "http://lemurchat.anfans.cn/api/chat/conversation-trial",
+    {
+      headers: {
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+      body: req.body,
+    },
+  );
+
+  const stream = new ReadableStream({
+    async start(controller) {
+      function onParse(event: any) {
+        if (event.type === "event") {
+          const data = event.data;
+          if (event.id == "1") {
+            let text1 = data.slice(data.indexOf("content"));
+            const text = text1.slice(12, text1.indexOf("index") - 6);
+            const queue = encoder.encode(text);
+            controller.enqueue(queue);
+            return;
+          }
+          // https://beta.openai.com/docs/api-reference/completions/create#completions/create-stream
+          try {
+            const json = JSON.parse(data);
+            // console.log(data.indexOf("content"))
+            if (data.indexOf("content") == -1) {
+              controller.close();
+              return;
+            }
+            // console.log(event.data)
+            const text = JSON.parse(json.data.slice(5)).choices[0].delta
+              .content;
+            const queue = encoder.encode(text);
+            controller.enqueue(queue);
+          } catch (e) {
+            controller.error(e);
+          }
+        }
+      }
+
+      const parser = createParser(onParse);
+      for await (const chunk of res.body as any) {
+        parser.feed(decoder.decode(chunk));
+      }
+    },
+  });
+  return stream;
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const stream = await createStream(req);
+    return new Response(stream);
+  } catch (error) {
+    console.error("[Chat Stream]", error);
+  }
+}
+
+export const config = {
+  runtime: "edge",
+};

app/api/newbing/route.ts

@@ -0,0 +1,81 @@
+import { BingChat, ChatMessage } from "../../bing-chat/index";
+
+export async function POST(req: Request) {
+  try {
+    let cookies = process.env.COOKIES;
+    const api = new BingChat({
+      cookie: cookies,
+    });
+    let chat: ChatMessage = {
+      id: "",
+      text: "",
+      author: "bot",
+      conversationId: "",
+      clientId: "",
+      conversationSignature: "",
+    };
+    const res: any = await bingAiMessageSendWrapper(
+      api,
+      await req.json(),
+      chat,
+    );
+    // const res = await api.sendMessage(await req.json(), {
+    //   // print the partial response as the AI is "typing"
+    //   onProgress: (partialResponse) => {
+    //     console.log(partialResponse.text);
+    //   },
+    //   variant: "Precise",
+    // });
+    // console.log(res['text'])
+    return new Response(res["text"]);
+  } catch (e) {
+    console.error("[NewBing] ", e);
+    return new Response(JSON.stringify(e));
+  }
+}
+
+/**
+ * @param { import("bing-chat").BingChat } client
+ * @param { string } message
+ * @param { import("bing-chat").ChatMessage } [session]
+ * @returns { Promise<import("bing-chat").ChatMessage> }
+ */
+function bingAiMessageSendWrapper(
+  client: BingChat,
+  message: string,
+  session: ChatMessage,
+) {
+  const TIMEOUT_THRESHOLD = 120 * 1000;
+  return new Promise((resolve, reject) => {
+    let response = {
+      text: "",
+    };
+    let responseText = "";
+    let temp = {
+      time: new Date().valueOf(),
+      response: response,
+    };
+    const verifyIfResponseChangedInterval = setInterval(() => {
+      if (new Date().valueOf() - temp.time > TIMEOUT_THRESHOLD) {
+        clearInterval(verifyIfResponseChangedInterval);
+        temp.response.text = responseText;
+        resolve(temp.response);
+      }
+    }, 500);
+    client
+      .sendMessage(message, {
+        ...session,
+        onProgress: (partialResponse) => {
+          temp.response = partialResponse;
+          responseText += partialResponse.text;
+          temp.time = new Date().valueOf();
+        },
+      })
+      .then((response) => {
+        resolve(response);
+      })
+      .catch((error) => {
+        reject(error);
+      });
+  });
+}

app/api/openai-image/route.ts

@@ -0,0 +1,38 @@
+import { OpenAIApi, Configuration } from "openai";
+import { ChatImageRequest } from "../openai-image/typing";
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "../auth";
+
+export async function POST(req: NextRequest) {
+  const authResult = auth(req);
+  if (authResult.error) {
+    return NextResponse.json(authResult, {
+      status: 401,
+    });
+  }
+  try {
+    let apiKey = process.env.OPENAI_API_KEY;
+
+    const userApiKey = req.headers.get("token");
+    if (userApiKey) {
+      apiKey = userApiKey;
+      console.log("user api key:" + apiKey);
+    }
+
+    const openai = new OpenAIApi(
+      new Configuration({
+        apiKey,
+      }),
+    );
+
+    const requestBody = (await req.json()) as ChatImageRequest;
+    const response = await openai.createImage({
+      ...requestBody,
+    });
+    console.log("[Chat-image]" + response.data.data[0].url);
+    return new Response(JSON.stringify(response.data));
+  } catch (e) {
+    console.error("[Chat-image] ", e);
+    return new Response(JSON.stringify(e));
+  }
+}

app/api/openai-image/typing.ts

@@ -0,0 +1,6 @@
+import type { CreateImageRequest, ImagesResponse } from "openai";
+
+export type ChatImageRequest = CreateImageRequest;
+export type ChatImagesResponse = ImagesResponse;
+
+export type Updater<T> = (updater: (value: T) => void) => void;

app/api/openai/[...path]/route.ts

@@ -0,0 +1,101 @@
+import { createParser } from "eventsource-parser";
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "../../auth";
+import { requestOpenai } from "../../common";
+
+async function createStream(res: Response) {
+  const encoder = new TextEncoder();
+  const decoder = new TextDecoder();
+
+  const stream = new ReadableStream({
+    async start(controller) {
+      function onParse(event: any) {
+        if (event.type === "event") {
+          const data = event.data;
+          // https://beta.openai.com/docs/api-reference/completions/create#completions/create-stream
+          if (data === "[DONE]") {
+            controller.close();
+            return;
+          }
+          try {
+            const json = JSON.parse(data);
+            const text = json.choices[0].delta.content;
+            const queue = encoder.encode(text);
+            controller.enqueue(queue);
+          } catch (e) {
+            controller.error(e);
+          }
+        }
+      }
+
+      const parser = createParser(onParse);
+      for await (const chunk of res.body as any) {
+        parser.feed(decoder.decode(chunk, { stream: true }));
+      }
+    },
+  });
+  return stream;
+}
+
+function formatResponse(msg: any) {
+  const jsonMsg = ["```json\n", JSON.stringify(msg, null, "  "), "\n```"].join(
+    "",
+  );
+  return new Response(jsonMsg);
+}
+
+async function handle(
+  req: NextRequest,
+  { params }: { params: { path: string[] } },
+) {
+  console.log("[OpenAI Route] params ", params);
+
+  const authResult = auth(req);
+  if (authResult.error) {
+    return NextResponse.json(authResult, {
+      status: 401,
+    });
+  }
+
+  try {
+    const api = await requestOpenai(req);
+
+    const contentType = api.headers.get("Content-Type") ?? "";
+
+    // streaming response
+    if (contentType.includes("stream")) {
+      const stream = await createStream(api);
+      const res = new Response(stream);
+      res.headers.set("Content-Type", contentType);
+      return res;
+    }
+
+    // try to parse error msg
+    try {
+      const mayBeErrorBody = await api.json();
+      if (mayBeErrorBody.error) {
+        console.error("[OpenAI Response] ", mayBeErrorBody);
+        return formatResponse(mayBeErrorBody);
+      } else {
+        const res = new Response(JSON.stringify(mayBeErrorBody));
+        res.headers.set("Content-Type", "application/json");
+        res.headers.set("Cache-Control", "no-cache");
+        return res;
+      }
+    } catch (e) {
+      console.error("[OpenAI Parse] ", e);
+      return formatResponse({
+        msg: "invalid response from openai server",
+        error: e,
+      });
+    }
+  } catch (e) {
+    console.error("[OpenAI] ", e);
+    return formatResponse(e);
+  }
+}
+
+export const GET = handle;
+export const POST = handle;
+
+export const runtime = "edge";

app/api/openai/typing.ts

@@ -0,0 +1,9 @@
+import type {
+  CreateChatCompletionRequest,
+  CreateChatCompletionResponse,
+} from "openai";
+
+export type ChatRequest = CreateChatCompletionRequest;
+export type ChatResponse = CreateChatCompletionResponse;
+
+export type Updater<T> = (updater: (value: T) => void) => void;

app/api/wanjuan/route.ts

@@ -0,0 +1,31 @@
+export async function POST(req: Request) {
+  try {
+    let body = { message: await req.json() };
+
+    console.log(JSON.stringify(body));
+    let res = "";
+    await fetch("http://47.94.237.159:8080/v1/wanjuan", {
+      method: "POST",
+      body: JSON.stringify(body),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        // console.log(data)
+        if (data["statusInfo"]["code"] == 0) {
+          // console.log("123123")
+          res = data["data"]["msgContent"];
+        } else {
+          res = data["statusInfo"]["message"];
+        }
+      })
+      .catch((err) => {
+        console.error("[WanJuan] ", err);
+        res = "出错了请重试！";
+      });
+    // console.log("12312"+res);
+    return new Response(res);
+  } catch (e) {
+    console.error("[WanJuan] ", e);
+    return new Response(JSON.stringify(e));
+  }
+}

app/bing-chat/index.d.ts

@@ -0,0 +1,274 @@
+type Author = "user" | "bot";
+type SendMessageOptions = {
+  conversationId?: string;
+  clientId?: string;
+  conversationSignature?: string;
+  invocationId?: string;
+  messageType?: string;
+  variant?: string;
+  locale?: string;
+  market?: string;
+  region?: string;
+  location?: {
+    lat: number | string;
+    lng: number | string;
+    re?: string;
+  };
+  onProgress?: (partialResponse: ChatMessage) => void;
+};
+interface ChatMessage {
+  id: string;
+  text: string;
+  author: Author;
+  conversationId: string;
+  clientId: string;
+  conversationSignature: string;
+  conversationExpiryTime?: string;
+  invocationId?: string;
+  messageType?: string;
+  variant?: string;
+  detail?: ChatMessageFull | ChatMessagePartial;
+}
+interface ConversationResult {
+  conversationId: string;
+  clientId: string;
+  conversationSignature: string;
+  result: APIResult;
+}
+interface APIResult {
+  value: string;
+  message: null;
+}
+interface ChatUpdate {
+  type: 1;
+  target: string;
+  arguments: ChatUpdateArgument[];
+}
+interface ChatUpdateArgument {
+  messages: ChatMessagePartial[];
+  requestId: string;
+  result: null;
+}
+interface ChatMessagePartial {
+  text: string;
+  author: Author;
+  createdAt: string;
+  timestamp: string;
+  messageId: string;
+  offense: string;
+  adaptiveCards: AdaptiveCard[];
+  sourceAttributions: any[];
+  feedback: ChatMessageFeedback;
+  contentOrigin: string;
+  privacy?: null;
+  messageType?: string;
+}
+interface AdaptiveCard {
+  type: string;
+  version: string;
+  body: AdaptiveCardBody[];
+}
+interface AdaptiveCardBody {
+  type: string;
+  text: string;
+  wrap: boolean;
+}
+interface ChatMessageFeedback {
+  tag: null;
+  updatedOn: null;
+  type: string;
+}
+interface ChatUpdateCompleteResponse {
+  type: 2;
+  invocationId: string;
+  item: ChatResponseItem;
+}
+interface ChatResponseItem {
+  messages: ChatMessageFull[];
+  firstNewMessageIndex: number;
+  suggestedResponses: null;
+  conversationId: string;
+  requestId: string;
+  conversationExpiryTime: string;
+  telemetry: Telemetry;
+  result: ChatRequestResult;
+}
+interface ChatMessageFull {
+  text: string;
+  author: Author;
+  from?: ChatMessageFrom;
+  createdAt: string;
+  timestamp: string;
+  locale?: string;
+  market?: string;
+  region?: string;
+  location?: string;
+  locationHints?: LocationHint[];
+  messageId: string;
+  requestId: string;
+  offense: string;
+  feedback: ChatMessageFeedback;
+  contentOrigin: string;
+  privacy?: null;
+  inputMethod?: string;
+  adaptiveCards?: AdaptiveCard[];
+  sourceAttributions?: any[];
+  suggestedResponses?: SuggestedResponse[];
+  messageType?: string;
+}
+interface ChatMessageFrom {
+  id: string;
+  name: null;
+}
+interface LocationHint {
+  country: string;
+  countryConfidence: number;
+  state: string;
+  city: string;
+  cityConfidence: number;
+  zipCode: string;
+  timeZoneOffset: number;
+  dma: number;
+  sourceType: number;
+  center: Coords;
+  regionType: number;
+}
+interface Coords {
+  latitude: number;
+  longitude: number;
+  height: null;
+}
+interface SuggestedResponse {
+  text: string;
+  messageId: string;
+  messageType: string;
+  contentOrigin: string;
+  author?: Author;
+  createdAt?: string;
+  timestamp?: string;
+  offense?: string;
+  feedback?: ChatMessageFeedback;
+  privacy?: null;
+}
+interface ChatRequestResult {
+  value: string;
+  serviceVersion: string;
+}
+interface Telemetry {
+  metrics?: null;
+  startTime: string;
+}
+interface ChatRequest {
+  arguments: ChatRequestArgument[];
+  invocationId: string;
+  target: string;
+  type: number;
+}
+interface ChatRequestArgument {
+  source: string;
+  optionsSets: string[];
+  allowedMessageTypes: string[];
+  sliceIds: any[];
+  traceId: string;
+  isStartOfSession: boolean;
+  message: ChatRequestMessage;
+  conversationSignature: string;
+  participant: Participant;
+  conversationId: string;
+  previousMessages: PreviousMessage[];
+}
+interface ChatRequestMessage {
+  locale: string;
+  market: string;
+  region?: string;
+  location?: string;
+  locationHints?: LocationHintChatRequestMessage[];
+  timestamp: string;
+  author: Author;
+  inputMethod: string;
+  text: string;
+  messageType: string;
+}
+interface LocationHintChatRequestMessage {
+  country: string;
+  state: string;
+  city: string;
+  zipcode: string;
+  timezoneoffset: number;
+  dma: number;
+  countryConfidence: number;
+  cityConfidence: number;
+  Center: Center;
+  RegionType: number;
+  SourceType: number;
+}
+interface Center {
+  Latitude: number;
+  Longitude: number;
+}
+interface Participant {
+  id: string;
+}
+interface PreviousMessage {
+  text: string;
+  author: Author;
+  adaptiveCards: any[];
+  suggestedResponses: SuggestedResponse[];
+  messageId: string;
+  messageType: string;
+}
+
+declare class BingChat {
+  protected _cookie: string;
+  protected _debug: boolean;
+  constructor(opts: {
+    cookie: string | undefined;
+    /** @defaultValue `false` **/
+    debug?: boolean;
+  });
+  /**
+   * Sends a message to Bing Chat, waits for the response to resolve, and returns
+   * the response.
+   *
+   * If you want to receive a stream of partial responses, use `opts.onProgress`.
+   *
+   * @param message - The prompt message to send
+   * @param opts.conversationId - Optional ID of a conversation to continue (defaults to a random UUID)
+   * @param opts.onProgress - Optional callback which will be invoked every time the partial response is updated
+   *
+   * @returns The response from Bing Chat
+   */
+  sendMessage(text: string, opts?: SendMessageOptions): Promise<ChatMessage>;
+  createConversation(): Promise<ConversationResult>;
+}
+
+export {
+  APIResult,
+  AdaptiveCard,
+  AdaptiveCardBody,
+  Author,
+  BingChat,
+  Center,
+  ChatMessage,
+  ChatMessageFeedback,
+  ChatMessageFrom,
+  ChatMessageFull,
+  ChatMessagePartial,
+  ChatRequest,
+  ChatRequestArgument,
+  ChatRequestMessage,
+  ChatRequestResult,
+  ChatResponseItem,
+  ChatUpdate,
+  ChatUpdateArgument,
+  ChatUpdateCompleteResponse,
+  ConversationResult,
+  Coords,
+  LocationHint,
+  LocationHintChatRequestMessage,
+  Participant,
+  PreviousMessage,
+  SendMessageOptions,
+  SuggestedResponse,
+  Telemetry,
+};

app/bing-chat/index.js

@@ -0,0 +1,284 @@
+// src/bing-chat.ts
+import crypto from "node:crypto";
+import WebSocket from "ws";
+
+// src/fetch.ts
+var fetch = globalThis.fetch;
+if (typeof fetch !== "function") {
+  throw new Error("Invalid environment: global fetch not defined");
+}
+
+// src/bing-chat.ts
+var terminalChar = "";
+var BingChat = class {
+  constructor(opts) {
+    const { cookie, debug = false } = opts;
+    this._cookie = cookie;
+    this._debug = !!debug;
+    if (!this._cookie) {
+      throw new Error("Bing cookie is required");
+    }
+  }
+  /**
+   * Sends a message to Bing Chat, waits for the response to resolve, and returns
+   * the response.
+   *
+   * If you want to receive a stream of partial responses, use `opts.onProgress`.
+   *
+   * @param message - The prompt message to send
+   * @param opts.conversationId - Optional ID of a conversation to continue (defaults to a random UUID)
+   * @param opts.onProgress - Optional callback which will be invoked every time the partial response is updated
+   *
+   * @returns The response from Bing Chat
+   */
+  async sendMessage(text, opts = {}) {
+    const {
+      invocationId = "1",
+      onProgress,
+      locale = "en-US",
+      market = "en-US",
+      region = "US",
+      location,
+      messageType = "Chat",
+      variant = "Balanced",
+    } = opts;
+    let { conversationId, clientId, conversationSignature } = opts;
+    const isStartOfSession = !(
+      conversationId &&
+      clientId &&
+      conversationSignature
+    );
+    if (isStartOfSession) {
+      const conversation = await this.createConversation();
+      conversationId = conversation.conversationId;
+      clientId = conversation.clientId;
+      conversationSignature = conversation.conversationSignature;
+    }
+    const result = {
+      author: "bot",
+      id: crypto.randomUUID(),
+      conversationId,
+      clientId,
+      conversationSignature,
+      invocationId: `${parseInt(invocationId, 10) + 1}`,
+      text: "",
+    };
+    const responseP = new Promise(async (resolve, reject) => {
+      const chatWebsocketUrl = "wss://sydney.bing.com/sydney/ChatHub";
+      const ws = new WebSocket(chatWebsocketUrl, {
+        perMessageDeflate: false,
+        headers: {
+          "accept-language": "en-US,en;q=0.9",
+          "cache-control": "no-cache",
+          pragma: "no-cache",
+        },
+      });
+      let isFulfilled = false;
+      function cleanup() {
+        ws.close();
+        ws.removeAllListeners();
+      }
+      ws.on("error", (error) => {
+        console.warn("WebSocket error:", error);
+        cleanup();
+        if (!isFulfilled) {
+          isFulfilled = true;
+          reject(new Error(`WebSocket error: ${error.toString()}`));
+        }
+      });
+      ws.on("close", () => {});
+      ws.on("open", () => {
+        ws.send(`{"protocol":"json","version":1}${terminalChar}`);
+      });
+      let stage = 0;
+      ws.on("message", (data) => {
+        var _a, _b;
+        const objects = data.toString().split(terminalChar);
+        const messages = objects
+          .map((object) => {
+            try {
+              return JSON.parse(object);
+            } catch (error) {
+              return object;
+            }
+          })
+          .filter(Boolean);
+        if (!messages.length) {
+          return;
+        }
+        if (stage === 0) {
+          ws.send(`{"type":6}${terminalChar}`);
+          const traceId = crypto.randomBytes(16).toString("hex");
+          const locationStr = location
+            ? `lat:${location.lat};long:${location.lng};re=${
+                location.re || "1000m"
+              };`
+            : void 0;
+          const optionsSets = [
+            "nlu_direct_response_filter",
+            "deepleo",
+            "enable_debug_commands",
+            "disable_emoji_spoken_text",
+            "responsible_ai_policy_235",
+            "enablemm",
+            "trffovrd",
+            "h3toppfp3",
+            "forcerep",
+            "cpcttl1d",
+            "dv3sugg",
+          ];
+          if (variant == "Balanced") {
+            optionsSets.push("galileo");
+            optionsSets.push("glprompt");
+          } else if (variant == "Creative") {
+            optionsSets.push("h3imaginative");
+            optionsSets.push("gencontentv3");
+          } else if (variant == "Precise") {
+            optionsSets.push("h3precise");
+          }
+          const params = {
+            arguments: [
+              {
+                source: "cib",
+                optionsSets,
+                allowedMessageTypes: [
+                  "Chat",
+                  "InternalSearchQuery",
+                  "InternalSearchResult",
+                  "InternalLoaderMessage",
+                  "RenderCardRequest",
+                  "AdsQuery",
+                  "SemanticSerp",
+                ],
+                sliceIds: [],
+                traceId,
+                isStartOfSession,
+                message: {
+                  locale,
+                  market,
+                  region,
+                  location: locationStr,
+                  author: "user",
+                  inputMethod: "Keyboard",
+                  messageType,
+                  text,
+                },
+                conversationSignature,
+                participant: { id: clientId },
+                conversationId,
+              },
+            ],
+            invocationId,
+            target: "chat",
+            type: 4,
+          };
+          if (this._debug) {
+            console.log(chatWebsocketUrl, JSON.stringify(params, null, 2));
+          }
+          ws.send(`${JSON.stringify(params)}${terminalChar}`);
+          ++stage;
+          return;
+        }
+        for (const message of messages) {
+          if (message.type === 1) {
+            const update = message;
+            const msg =
+              (_a = update.arguments[0].messages) == null ? void 0 : _a[0];
+            if (!msg) continue;
+            if (!msg.messageType) {
+              result.author = msg.author;
+              result.text = msg.text;
+              result.detail = msg;
+              onProgress == null ? void 0 : onProgress(result);
+            }
+          } else if (message.type === 2) {
+            const response = message;
+            if (this._debug) {
+              console.log("RESPONSE", JSON.stringify(response, null, 2));
+            }
+            const validMessages =
+              (_b = response.item.messages) == null
+                ? void 0
+                : _b.filter((m) => !m.messageType);
+            const lastMessage =
+              validMessages == null
+                ? void 0
+                : validMessages[
+                    (validMessages == null ? void 0 : validMessages.length) - 1
+                  ];
+            if (lastMessage) {
+              result.conversationId = response.item.conversationId;
+              result.conversationExpiryTime =
+                response.item.conversationExpiryTime;
+              result.author = lastMessage.author;
+              result.text = lastMessage.text;
+              result.detail = lastMessage;
+              if (!isFulfilled) {
+                isFulfilled = true;
+                resolve(result);
+              }
+            }
+          } else if (message.type === 3) {
+            if (!isFulfilled) {
+              isFulfilled = true;
+              resolve(result);
+            }
+            cleanup();
+            return;
+          } else {
+          }
+        }
+      });
+    });
+    return responseP;
+  }
+  async createConversation() {
+    const requestId = crypto.randomUUID();
+    const cookie = this._cookie.includes(";")
+      ? this._cookie
+      : `_U=${this._cookie}`;
+    return fetch("https://www.bing.com/turing/conversation/create", {
+      headers: {
+        accept: "application/json",
+        "accept-language": "en-US,en;q=0.9",
+        "content-type": "application/json",
+        "sec-ch-ua":
+          '"Not_A Brand";v="99", "Microsoft Edge";v="109", "Chromium";v="109"',
+        "sec-ch-ua-arch": '"x86"',
+        "sec-ch-ua-bitness": '"64"',
+        "sec-ch-ua-full-version": '"109.0.1518.78"',
+        "sec-ch-ua-full-version-list":
+          '"Not_A Brand";v="99.0.0.0", "Microsoft Edge";v="109.0.1518.78", "Chromium";v="109.0.5414.120"',
+        "sec-ch-ua-mobile": "?0",
+        "sec-ch-ua-model": "",
+        "sec-ch-ua-platform": '"macOS"',
+        "sec-ch-ua-platform-version": '"12.6.0"',
+        "sec-fetch-dest": "empty",
+        "sec-fetch-mode": "cors",
+        "sec-fetch-site": "same-origin",
+        "x-edge-shopping-flag": "1",
+        "x-ms-client-request-id": requestId,
+        "x-ms-useragent":
+          "azsdk-js-api-client-factory/1.0.0-beta.1 core-rest-pipeline/1.10.0 OS/MacIntel",
+        "x-forwarded-for": "1.1.1.1",
+        cookie,
+      },
+      referrer: "https://www.bing.com/search",
+      referrerPolicy: "origin-when-cross-origin",
+      body: null,
+      method: "GET",
+      mode: "cors",
+      credentials: "include",
+    }).then((res) => {
+      if (res.ok) {
+        return res.json();
+      } else {
+        throw new Error(
+          `unexpected HTTP error createConversation ${res.status}: ${res.statusText}`,
+        );
+      }
+    });
+  }
+};
+export { BingChat };
+//# sourceMappingURL=index.js.map

app/bing-chat/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/bing-chat.ts","../src/fetch.ts"],"sourcesContent":["import crypto from 'node:crypto'\n\nimport WebSocket from 'ws'\n\nimport * as types from './types'\nimport { fetch } from './fetch'\n\nconst terminalChar = '\u001e'\n\nexport class BingChat {\n  protected _cookie: string\n  protected _debug: boolean\n\n  constructor(opts: {\n    cookie: string\n\n    /** @defaultValue `false` **/\n    debug?: boolean\n  }) {\n    const { cookie, debug = false } = opts\n\n    this._cookie = cookie\n    this._debug = !!debug\n\n    if (!this._cookie) {\n      throw new Error('Bing cookie is required')\n    }\n  }\n\n  /**\n   * Sends a message to Bing Chat, waits for the response to resolve, and returns\n   * the response.\n   *\n   * If you want to receive a stream of partial responses, use `opts.onProgress`.\n   *\n   * @param message - The prompt message to send\n   * @param opts.conversationId - Optional ID of a conversation to continue (defaults to a random UUID)\n   * @param opts.onProgress - Optional callback which will be invoked every time the partial response is updated\n   *\n   * @returns The response from Bing Chat\n   */\n  async sendMessage(\n    text: string,\n    opts: types.SendMessageOptions = {}\n  ): Promise<types.ChatMessage> {\n    const {\n      invocationId = '1',\n      onProgress,\n      locale = 'en-US',\n      market = 'en-US',\n      region = 'US',\n      location,\n      messageType = 'Chat',\n      variant = 'Balanced'\n    } = opts\n\n    let { conversationId, clientId, conversationSignature } = opts\n    const isStartOfSession = !(\n      conversationId &&\n      clientId &&\n      conversationSignature\n    )\n\n    if (isStartOfSession) {\n      const conversation = await this.createConversation()\n      conversationId = conversation.conversationId\n      clientId = conversation.clientId\n      conversationSignature = conversation.conversationSignature\n    }\n\n    const result: types.ChatMessage = {\n      author: 'bot',\n      id: crypto.randomUUID(),\n      conversationId,\n      clientId,\n      conversationSignature,\n      invocationId: `${parseInt(invocationId, 10) + 1}`,\n      text: ''\n    }\n\n    const responseP = new Promise<types.ChatMessage>(\n      async (resolve, reject) => {\n        const chatWebsocketUrl = 'wss://sydney.bing.com/sydney/ChatHub'\n        const ws = new WebSocket(chatWebsocketUrl, {\n          perMessageDeflate: false,\n          headers: {\n            'accept-language': 'en-US,en;q=0.9',\n            'cache-control': 'no-cache',\n            pragma: 'no-cache'\n          }\n        })\n\n        let isFulfilled = false\n\n        function cleanup() {\n          ws.close()\n          ws.removeAllListeners()\n        }\n\n        ws.on('error', (error) => {\n          console.warn('WebSocket error:', error)\n          cleanup()\n          if (!isFulfilled) {\n            isFulfilled = true\n            reject(new Error(`WebSocket error: ${error.toString()}`))\n          }\n        })\n        ws.on('close', () => {\n          // TODO\n        })\n\n        ws.on('open', () => {\n          ws.send(`{\"protocol\":\"json\",\"version\":1}${terminalChar}`)\n        })\n        let stage = 0\n\n        ws.on('message', (data) => {\n          const objects = data.toString().split(terminalChar)\n\n          const messages = objects\n            .map((object) => {\n              try {\n                return JSON.parse(object)\n              } catch (error) {\n                return object\n              }\n            })\n            .filter(Boolean)\n\n          if (!messages.length) {\n            return\n          }\n\n          if (stage === 0) {\n            ws.send(`{\"type\":6}${terminalChar}`)\n\n            const traceId = crypto.randomBytes(16).toString('hex')\n\n            // example location: 'lat:47.639557;long:-122.128159;re=1000m;'\n            const locationStr = location\n              ? `lat:${location.lat};long:${location.lng};re=${\n                  location.re || '1000m'\n                };`\n              : undefined\n\n            // Sets the correct options for the variant of the model\n            const optionsSets = [\n              'nlu_direct_response_filter',\n              'deepleo',\n              'enable_debug_commands',\n              'disable_emoji_spoken_text',\n              'responsible_ai_policy_235',\n              'enablemm'\n            ]\n            if (variant == 'Balanced') {\n              optionsSets.push('galileo')\n            } else {\n              optionsSets.push('clgalileo')\n              if (variant == 'Creative') {\n                optionsSets.push('h3imaginative')\n              } else if (variant == 'Precise') {\n                optionsSets.push('h3precise')\n              }\n            }\n            const params = {\n              arguments: [\n                {\n                  source: 'cib',\n                  optionsSets,\n                  allowedMessageTypes: [\n                    'Chat',\n                    'InternalSearchQuery',\n                    'InternalSearchResult',\n                    'InternalLoaderMessage',\n                    'RenderCardRequest',\n                    'AdsQuery',\n                    'SemanticSerp'\n                  ],\n                  sliceIds: [],\n                  traceId,\n                  isStartOfSession,\n                  message: {\n                    locale,\n                    market,\n                    region,\n                    location: locationStr,\n                    author: 'user',\n                    inputMethod: 'Keyboard',\n                    messageType,\n                    text\n                  },\n                  conversationSignature,\n                  participant: { id: clientId },\n                  conversationId\n                }\n              ],\n              invocationId,\n              target: 'chat',\n              type: 4\n            }\n\n            if (this._debug) {\n              console.log(chatWebsocketUrl, JSON.stringify(params, null, 2))\n            }\n\n            ws.send(`${JSON.stringify(params)}${terminalChar}`)\n\n            ++stage\n            return\n          }\n\n          for (const message of messages) {\n            // console.log(JSON.stringify(message, null, 2))\n\n            if (message.type === 1) {\n              const update = message as types.ChatUpdate\n              const msg = update.arguments[0].messages?.[0]\n\n              if (!msg) continue\n\n              // console.log('RESPONSE0', JSON.stringify(update, null, 2))\n\n              if (!msg.messageType) {\n                result.author = msg.author\n                result.text = msg.text\n                result.detail = msg\n\n                onProgress?.(result)\n              }\n            } else if (message.type === 2) {\n              const response = message as types.ChatUpdateCompleteResponse\n              if (this._debug) {\n                console.log('RESPONSE', JSON.stringify(response, null, 2))\n              }\n              const validMessages = response.item.messages?.filter(\n                (m) => !m.messageType\n              )\n              const lastMessage = validMessages?.[validMessages?.length - 1]\n\n              if (lastMessage) {\n                result.conversationId = response.item.conversationId\n                result.conversationExpiryTime =\n                  response.item.conversationExpiryTime\n\n                result.author = lastMessage.author\n                result.text = lastMessage.text\n                result.detail = lastMessage\n\n                if (!isFulfilled) {\n                  isFulfilled = true\n                  resolve(result)\n                }\n              }\n            } else if (message.type === 3) {\n              if (!isFulfilled) {\n                isFulfilled = true\n                resolve(result)\n              }\n\n              cleanup()\n              return\n            } else {\n              // TODO: handle other message types\n              // these may be for displaying \"adaptive cards\"\n              // console.warn('unexpected message type', message.type, message)\n            }\n          }\n        })\n      }\n    )\n\n    return responseP\n  }\n\n  async createConversation(): Promise<types.ConversationResult> {\n    const requestId = crypto.randomUUID()\n\n    const cookie = this._cookie.includes(';')\n      ? this._cookie\n      : `_U=${this._cookie}`\n\n    return fetch('https://www.bing.com/turing/conversation/create', {\n      headers: {\n        accept: 'application/json',\n        'accept-language': 'en-US,en;q=0.9',\n        'content-type': 'application/json',\n        'sec-ch-ua':\n          '\"Not_A Brand\";v=\"99\", \"Microsoft Edge\";v=\"109\", \"Chromium\";v=\"109\"',\n        'sec-ch-ua-arch': '\"x86\"',\n        'sec-ch-ua-bitness': '\"64\"',\n        'sec-ch-ua-full-version': '\"109.0.1518.78\"',\n        'sec-ch-ua-full-version-list':\n          '\"Not_A Brand\";v=\"99.0.0.0\", \"Microsoft Edge\";v=\"109.0.1518.78\", \"Chromium\";v=\"109.0.5414.120\"',\n        'sec-ch-ua-mobile': '?0',\n        'sec-ch-ua-model': '',\n        'sec-ch-ua-platform': '\"macOS\"',\n        'sec-ch-ua-platform-version': '\"12.6.0\"',\n        'sec-fetch-dest': 'empty',\n        'sec-fetch-mode': 'cors',\n        'sec-fetch-site': 'same-origin',\n        'x-edge-shopping-flag': '1',\n        'x-ms-client-request-id': requestId,\n        'x-ms-useragent':\n          'azsdk-js-api-client-factory/1.0.0-beta.1 core-rest-pipeline/1.10.0 OS/MacIntel',\n        cookie\n      },\n      referrer: 'https://www.bing.com/search',\n      referrerPolicy: 'origin-when-cross-origin',\n      body: null,\n      method: 'GET',\n      mode: 'cors',\n      credentials: 'include'\n    }).then((res) => {\n      if (res.ok) {\n        return res.json()\n      } else {\n        throw new Error(\n          `unexpected HTTP error createConversation ${res.status}: ${res.statusText}`\n        )\n      }\n    })\n  }\n}\n","/// <reference lib=\"dom\" />\n\nconst fetch = globalThis.fetch\n\nif (typeof fetch !== 'function') {\n  throw new Error('Invalid environment: global fetch not defined')\n}\n\nexport { fetch }\n"],"mappings":";AAAA,OAAO,YAAY;AAEnB,OAAO,eAAe;;;ACAtB,IAAM,QAAQ,WAAW;AAEzB,IAAI,OAAO,UAAU,YAAY;AAC/B,QAAM,IAAI,MAAM,+CAA+C;AACjE;;;ADCA,IAAM,eAAe;AAEd,IAAM,WAAN,MAAe;AAAA,EAIpB,YAAY,MAKT;AACD,UAAM,EAAE,QAAQ,QAAQ,MAAM,IAAI;AAElC,SAAK,UAAU;AACf,SAAK,SAAS,CAAC,CAAC;AAEhB,QAAI,CAAC,KAAK,SAAS;AACjB,YAAM,IAAI,MAAM,yBAAyB;AAAA,IAC3C;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcA,MAAM,YACJ,MACA,OAAiC,CAAC,GACN;AAC5B,UAAM;AAAA,MACJ,eAAe;AAAA,MACf;AAAA,MACA,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT;AAAA,MACA,cAAc;AAAA,MACd,UAAU;AAAA,IACZ,IAAI;AAEJ,QAAI,EAAE,gBAAgB,UAAU,sBAAsB,IAAI;AAC1D,UAAM,mBAAmB,EACvB,kBACA,YACA;AAGF,QAAI,kBAAkB;AACpB,YAAM,eAAe,MAAM,KAAK,mBAAmB;AACnD,uBAAiB,aAAa;AAC9B,iBAAW,aAAa;AACxB,8BAAwB,aAAa;AAAA,IACvC;AAEA,UAAM,SAA4B;AAAA,MAChC,QAAQ;AAAA,MACR,IAAI,OAAO,WAAW;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc,GAAG,SAAS,cAAc,EAAE,IAAI;AAAA,MAC9C,MAAM;AAAA,IACR;AAEA,UAAM,YAAY,IAAI;AAAA,MACpB,OAAO,SAAS,WAAW;AACzB,cAAM,mBAAmB;AACzB,cAAM,KAAK,IAAI,UAAU,kBAAkB;AAAA,UACzC,mBAAmB;AAAA,UACnB,SAAS;AAAA,YACP,mBAAmB;AAAA,YACnB,iBAAiB;AAAA,YACjB,QAAQ;AAAA,UACV;AAAA,QACF,CAAC;AAED,YAAI,cAAc;AAElB,iBAAS,UAAU;AACjB,aAAG,MAAM;AACT,aAAG,mBAAmB;AAAA,QACxB;AAEA,WAAG,GAAG,SAAS,CAAC,UAAU;AACxB,kBAAQ,KAAK,oBAAoB,KAAK;AACtC,kBAAQ;AACR,cAAI,CAAC,aAAa;AAChB,0BAAc;AACd,mBAAO,IAAI,MAAM,oBAAoB,MAAM,SAAS,GAAG,CAAC;AAAA,UAC1D;AAAA,QACF,CAAC;AACD,WAAG,GAAG,SAAS,MAAM;AAAA,QAErB,CAAC;AAED,WAAG,GAAG,QAAQ,MAAM;AAClB,aAAG,KAAK,kCAAkC,cAAc;AAAA,QAC1D,CAAC;AACD,YAAI,QAAQ;AAEZ,WAAG,GAAG,WAAW,CAAC,SAAS;AApHnC;AAqHU,gBAAM,UAAU,KAAK,SAAS,EAAE,MAAM,YAAY;AAElD,gBAAM,WAAW,QACd,IAAI,CAAC,WAAW;AACf,gBAAI;AACF,qBAAO,KAAK,MAAM,MAAM;AAAA,YAC1B,SAAS,OAAP;AACA,qBAAO;AAAA,YACT;AAAA,UACF,CAAC,EACA,OAAO,OAAO;AAEjB,cAAI,CAAC,SAAS,QAAQ;AACpB;AAAA,UACF;AAEA,cAAI,UAAU,GAAG;AACf,eAAG,KAAK,aAAa,cAAc;AAEnC,kBAAM,UAAU,OAAO,YAAY,EAAE,EAAE,SAAS,KAAK;AAGrD,kBAAM,cAAc,WAChB,OAAO,SAAS,YAAY,SAAS,UACnC,SAAS,MAAM,aAEjB;AAGJ,kBAAM,cAAc;AAAA,cAClB;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF;AACA,gBAAI,WAAW,YAAY;AACzB,0BAAY,KAAK,SAAS;AAAA,YAC5B,OAAO;AACL,0BAAY,KAAK,WAAW;AAC5B,kBAAI,WAAW,YAAY;AACzB,4BAAY,KAAK,eAAe;AAAA,cAClC,WAAW,WAAW,WAAW;AAC/B,4BAAY,KAAK,WAAW;AAAA,cAC9B;AAAA,YACF;AACA,kBAAM,SAAS;AAAA,cACb,WAAW;AAAA,gBACT;AAAA,kBACE,QAAQ;AAAA,kBACR;AAAA,kBACA,qBAAqB;AAAA,oBACnB;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,kBACF;AAAA,kBACA,UAAU,CAAC;AAAA,kBACX;AAAA,kBACA;AAAA,kBACA,SAAS;AAAA,oBACP;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA,UAAU;AAAA,oBACV,QAAQ;AAAA,oBACR,aAAa;AAAA,oBACb;AAAA,oBACA;AAAA,kBACF;AAAA,kBACA;AAAA,kBACA,aAAa,EAAE,IAAI,SAAS;AAAA,kBAC5B;AAAA,gBACF;AAAA,cACF;AAAA,cACA;AAAA,cACA,QAAQ;AAAA,cACR,MAAM;AAAA,YACR;AAEA,gBAAI,KAAK,QAAQ;AACf,sBAAQ,IAAI,kBAAkB,KAAK,UAAU,QAAQ,MAAM,CAAC,CAAC;AAAA,YAC/D;AAEA,eAAG,KAAK,GAAG,KAAK,UAAU,MAAM,IAAI,cAAc;AAElD,cAAE;AACF;AAAA,UACF;AAEA,qBAAW,WAAW,UAAU;AAG9B,gBAAI,QAAQ,SAAS,GAAG;AACtB,oBAAM,SAAS;AACf,oBAAM,OAAM,YAAO,UAAU,CAAC,EAAE,aAApB,mBAA+B;AAE3C,kBAAI,CAAC;AAAK;AAIV,kBAAI,CAAC,IAAI,aAAa;AACpB,uBAAO,SAAS,IAAI;AACpB,uBAAO,OAAO,IAAI;AAClB,uBAAO,SAAS;AAEhB,yDAAa;AAAA,cACf;AAAA,YACF,WAAW,QAAQ,SAAS,GAAG;AAC7B,oBAAM,WAAW;AACjB,kBAAI,KAAK,QAAQ;AACf,wBAAQ,IAAI,YAAY,KAAK,UAAU,UAAU,MAAM,CAAC,CAAC;AAAA,cAC3D;AACA,oBAAM,iBAAgB,cAAS,KAAK,aAAd,mBAAwB;AAAA,gBAC5C,CAAC,MAAM,CAAC,EAAE;AAAA;AAEZ,oBAAM,cAAc,gDAAgB,+CAAe,UAAS;AAE5D,kBAAI,aAAa;AACf,uBAAO,iBAAiB,SAAS,KAAK;AACtC,uBAAO,yBACL,SAAS,KAAK;AAEhB,uBAAO,SAAS,YAAY;AAC5B,uBAAO,OAAO,YAAY;AAC1B,uBAAO,SAAS;AAEhB,oBAAI,CAAC,aAAa;AAChB,gCAAc;AACd,0BAAQ,MAAM;AAAA,gBAChB;AAAA,cACF;AAAA,YACF,WAAW,QAAQ,SAAS,GAAG;AAC7B,kBAAI,CAAC,aAAa;AAChB,8BAAc;AACd,wBAAQ,MAAM;AAAA,cAChB;AAEA,sBAAQ;AACR;AAAA,YACF,OAAO;AAAA,YAIP;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,MAAM,qBAAwD;AAC5D,UAAM,YAAY,OAAO,WAAW;AAEpC,UAAM,SAAS,KAAK,QAAQ,SAAS,GAAG,IACpC,KAAK,UACL,MAAM,KAAK;AAEf,WAAO,MAAM,mDAAmD;AAAA,MAC9D,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,mBAAmB;AAAA,QACnB,gBAAgB;AAAA,QAChB,aACE;AAAA,QACF,kBAAkB;AAAA,QAClB,qBAAqB;AAAA,QACrB,0BAA0B;AAAA,QAC1B,+BACE;AAAA,QACF,oBAAoB;AAAA,QACpB,mBAAmB;AAAA,QACnB,sBAAsB;AAAA,QACtB,8BAA8B;AAAA,QAC9B,kBAAkB;AAAA,QAClB,kBAAkB;AAAA,QAClB,kBAAkB;AAAA,QAClB,wBAAwB;AAAA,QACxB,0BAA0B;AAAA,QAC1B,kBACE;AAAA,QACF;AAAA,MACF;AAAA,MACA,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,aAAa;AAAA,IACf,CAAC,EAAE,KAAK,CAAC,QAAQ;AACf,UAAI,IAAI,IAAI;AACV,eAAO,IAAI,KAAK;AAAA,MAClB,OAAO;AACL,cAAM,IAAI;AAAA,UACR,4CAA4C,IAAI,WAAW,IAAI;AAAA,QACjE;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AACF;","names":[]}

app/components/button.module.scss

@@ -0,0 +1,64 @@
+.icon-button {
+  background-color: var(--white);
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+
+  cursor: pointer;
+  transition: all 0.3s ease;
+  overflow: hidden;
+  user-select: none;
+  outline: none;
+  border: none;
+  color: var(--black);
+
+  &[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &.primary {
+    background-color: var(--primary);
+    color: white;
+
+    path {
+      fill: white !important;
+    }
+  }
+}
+
+.shadow {
+  box-shadow: var(--card-shadow);
+}
+
+.border {
+  border: var(--border-in-light);
+}
+
+.icon-button:hover {
+  border-color: var(--primary);
+}
+
+.icon-button-icon {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@media only screen and (max-width: 600px) {
+  .icon-button {
+    padding: 16px;
+  }
+}
+
+.icon-button-text {
+  margin-left: 5px;
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

app/components/button.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+
+import styles from "./button.module.scss";
+
+export function IconButton(props: {
+  onClick?: () => void;
+  icon?: JSX.Element;
+  type?: "primary" | "danger";
+  text?: string;
+  bordered?: boolean;
+  shadow?: boolean;
+  className?: string;
+  title?: string;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      className={
+        styles["icon-button"] +
+        ` ${props.bordered && styles.border} ${props.shadow && styles.shadow} ${
+          props.className ?? ""
+        } clickable ${styles[props.type ?? ""]}`
+      }
+      onClick={props.onClick}
+      title={props.title}
+      disabled={props.disabled}
+      role="button"
+    >
+      {props.icon && (
+        <div
+          className={
+            styles["icon-button-icon"] +
+            ` ${props.type === "primary" && "no-dark"}`
+          }
+        >
+          {props.icon}
+        </div>
+      )}
+
+      {props.text && (
+        <div className={styles["icon-button-text"]}>{props.text}</div>
+      )}
+    </button>
+  );
+}

app/components/chat-list.tsx

@@ -0,0 +1,147 @@
+import DeleteIcon from "../icons/delete.svg";
+import BotIcon from "../icons/bot.svg";
+
+import styles from "./home.module.scss";
+import {
+  DragDropContext,
+  Droppable,
+  Draggable,
+  OnDragEndResponder,
+} from "@hello-pangea/dnd";
+
+import { useChatStore } from "../store";
+
+import Locale from "../locales";
+import { Link, useNavigate } from "react-router-dom";
+import { Path } from "../constant";
+import { MaskAvatar } from "./mask";
+import { Mask } from "../store/mask";
+
+export function ChatItem(props: {
+  onClick?: () => void;
+  onDelete?: () => void;
+  title: string;
+  count: number;
+  time: string;
+  selected: boolean;
+  id: number;
+  index: number;
+  narrow?: boolean;
+  mask: Mask;
+}) {
+  return (
+    <Draggable draggableId={`${props.id}`} index={props.index}>
+      {(provided) => (
+        <div
+          className={`${styles["chat-item"]} ${
+            props.selected && styles["chat-item-selected"]
+          }`}
+          onClick={props.onClick}
+          ref={provided.innerRef}
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+          title={`${props.title}\n${Locale.ChatItem.ChatItemCount(
+            props.count,
+          )}`}
+        >
+          {props.narrow ? (
+            <div className={styles["chat-item-narrow"]}>
+              <div className={styles["chat-item-avatar"] + " no-dark"}>
+                <MaskAvatar mask={props.mask} />
+              </div>
+              <div className={styles["chat-item-narrow-count"]}>
+                {props.count}
+              </div>
+            </div>
+          ) : (
+            <>
+              <div className={styles["chat-item-title"]}>{props.title}</div>
+              <div className={styles["chat-item-info"]}>
+                <div className={styles["chat-item-count"]}>
+                  {Locale.ChatItem.ChatItemCount(props.count)}
+                </div>
+                <div className={styles["chat-item-date"]}>
+                  {new Date(props.time).toLocaleString()}
+                </div>
+              </div>
+            </>
+          )}
+
+          <div
+            className={styles["chat-item-delete"]}
+            onClickCapture={props.onDelete}
+          >
+            <DeleteIcon />
+          </div>
+        </div>
+      )}
+    </Draggable>
+  );
+}
+
+export function ChatList(props: { narrow?: boolean }) {
+  const [sessions, selectedIndex, selectSession, moveSession] = useChatStore(
+    (state) => [
+      state.sessions,
+      state.currentSessionIndex,
+      state.selectSession,
+      state.moveSession,
+    ],
+  );
+  const chatStore = useChatStore();
+  const navigate = useNavigate();
+
+  const onDragEnd: OnDragEndResponder = (result) => {
+    const { destination, source } = result;
+    if (!destination) {
+      return;
+    }
+
+    if (
+      destination.droppableId === source.droppableId &&
+      destination.index === source.index
+    ) {
+      return;
+    }
+
+    moveSession(source.index, destination.index);
+  };
+
+  return (
+    <DragDropContext onDragEnd={onDragEnd}>
+      <Droppable droppableId="chat-list">
+        {(provided) => (
+          <div
+            className={styles["chat-list"]}
+            ref={provided.innerRef}
+            {...provided.droppableProps}
+          >
+            {sessions.map((item, i) => (
+              <ChatItem
+                title={item.topic}
+                time={new Date(item.lastUpdate).toLocaleString()}
+                count={item.messages.length}
+                key={item.id}
+                id={item.id}
+                index={i}
+                selected={i === selectedIndex}
+                onClick={() => {
+                  navigate(Path.Chat);
+                  selectSession(i);
+                }}
+                onDelete={() => {
+                  if (!props.narrow || confirm(Locale.Home.DeleteChat)) {
+                    chatStore.deleteSession(i);
+                  }
+                }}
+                narrow={props.narrow}
+                mask={item.mask}
+              />
+            ))}
+            {provided.placeholder}
+          </div>
+        )}
+      </Droppable>
+    </DragDropContext>
+  );
+}

app/components/chat.module.scss

@@ -0,0 +1,109 @@
+@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;
+  z-index: 999;
+  display: flex;
+  justify-content: center;
+  width: calc(100% - 40px);
+
+  .prompt-toast-inner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    background-color: var(--white);
+    color: var(--black);
+
+    border: var(--border-in-light);
+    box-shadow: var(--card-shadow);
+    padding: 10px 20px;
+    border-radius: 100px;
+
+    animation: slide-in-from-top ease 0.3s;
+
+    .prompt-toast-content {
+      margin-left: 10px;
+    }
+  }
+}
+
+.section-title {
+  font-size: 12px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .section-title-action {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.context-prompt {
+  .context-prompt-row {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin-bottom: 10px;
+
+    .context-role {
+      margin-right: 10px;
+    }
+
+    .context-content {
+      flex: 1;
+      max-width: 100%;
+      text-align: left;
+    }
+
+    .context-delete-button {
+      margin-left: 10px;
+    }
+  }
+
+  .context-prompt-button {
+    flex: 1;
+  }
+}
+
+.memory-prompt {
+  margin: 20px 0;
+
+  .memory-prompt-content {
+    background-color: var(--white);
+    color: var(--black);
+    border: var(--border-in-light);
+    border-radius: 10px;
+    padding: 10px;
+    font-size: 12px;
+    user-select: text;
+  }
+}

app/components/chat.tsx

@@ -0,0 +1,825 @@
+import { useDebouncedCallback } from "use-debounce";
+import { 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";
+import DownloadIcon from "../icons/download.svg";
+import LoadingIcon from "../icons/three-dots.svg";
+import PromptIcon from "../icons/prompt.svg";
+import MaskIcon from "../icons/mask.svg";
+import MaxIcon from "../icons/max.svg";
+import MinIcon from "../icons/min.svg";
+import ResetIcon from "../icons/reload.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 StopIcon from "../icons/pause.svg";
+
+import {
+  Message,
+  SubmitKey,
+  useChatStore,
+  BOT_HELLO,
+  ROLES,
+  createMessage,
+  useAccessStore,
+  Theme,
+  useAppConfig,
+  ModelConfig,
+  DEFAULT_TOPIC,
+} from "../store";
+
+import {
+  copyToClipboard,
+  downloadAs,
+  selectOrCopy,
+  autoGrowTextArea,
+  useMobileScreen,
+} from "../utils";
+
+import dynamic from "next/dynamic";
+
+import { ControllerPool } from "../requests";
+import { Prompt, usePromptStore } from "../store/prompt";
+import Locale from "../locales";
+
+import { IconButton } from "./button";
+import styles from "./home.module.scss";
+import chatStyle from "./chat.module.scss";
+
+import { ListItem, Modal, showModal } from "./ui-lib";
+import { useLocation, useNavigate } from "react-router-dom";
+import { Path } from "../constant";
+import { Avatar } from "./emoji";
+import { MaskAvatar, MaskConfig } from "./mask";
+import {
+  DEFAULT_MASK_AVATAR,
+  DEFAULT_MASK_ID,
+  useMaskStore,
+} from "../store/mask";
+
+const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
+  loading: () => <LoadingIcon />,
+});
+
+function exportMessages(messages: Message[], topic: string) {
+  const mdText =
+    `# ${topic}\n\n` +
+    messages
+      .map((m) => {
+        return m.role === "user"
+          ? `## ${Locale.Export.MessageFromYou}:\n${m.content}`
+          : `## ${Locale.Export.MessageFromChatGPT}:\n${m.content.trim()}`;
+      })
+      .join("\n\n");
+  const filename = `${topic}.md`;
+
+  showModal({
+    title: Locale.Export.Title,
+    children: (
+      <div className="markdown-body">
+        <pre className={styles["export-content"]}>{mdText}</pre>
+      </div>
+    ),
+    actions: [
+      <IconButton
+        key="copy"
+        icon={<CopyIcon />}
+        bordered
+        text={Locale.Export.Copy}
+        onClick={() => copyToClipboard(mdText)}
+      />,
+      <IconButton
+        key="download"
+        icon={<DownloadIcon />}
+        bordered
+        text={Locale.Export.Download}
+        onClick={() => downloadAs(mdText, filename)}
+      />,
+    ],
+  });
+}
+
+export function SessionConfigModel(props: { onClose: () => void }) {
+  const chatStore = useChatStore();
+  const session = chatStore.currentSession();
+  const maskStore = useMaskStore();
+  const navigate = useNavigate();
+
+  return (
+    <div className="modal-mask">
+      <Modal
+        title={Locale.Context.Edit}
+        onClose={() => props.onClose()}
+        actions={[
+          <IconButton
+            key="reset"
+            icon={<ResetIcon />}
+            bordered
+            text={Locale.Chat.Config.Reset}
+            onClick={() =>
+              confirm(Locale.Memory.ResetConfirm) && chatStore.resetSession()
+            }
+          />,
+          <IconButton
+            key="copy"
+            icon={<CopyIcon />}
+            bordered
+            text={Locale.Chat.Config.SaveAs}
+            onClick={() => {
+              navigate(Path.Masks);
+              setTimeout(() => {
+                maskStore.create(session.mask);
+              }, 500);
+            }}
+          />,
+        ]}
+      >
+        <MaskConfig
+          mask={session.mask}
+          updateMask={(updater) => {
+            const mask = { ...session.mask };
+            updater(mask);
+            chatStore.updateCurrentSession((session) => (session.mask = mask));
+          }}
+          extraListItems={
+            session.mask.modelConfig.sendMemory ? (
+              <ListItem
+                title={`${Locale.Memory.Title} (${session.lastSummarizeIndex} of ${session.messages.length})`}
+                subTitle={session.memoryPrompt || Locale.Memory.EmptyContent}
+              ></ListItem>
+            ) : (
+              <></>
+            )
+          }
+        ></MaskConfig>
+      </Modal>
+    </div>
+  );
+}
+
+function PromptToast(props: {
+  showToast?: boolean;
+  showModal?: boolean;
+  setShowModal: (_: boolean) => void;
+}) {
+  const chatStore = useChatStore();
+  const session = chatStore.currentSession();
+  const context = session.mask.context;
+
+  return (
+    <div className={chatStyle["prompt-toast"]} key="prompt-toast">
+      {props.showToast && (
+        <div
+          className={chatStyle["prompt-toast-inner"] + " clickable"}
+          role="button"
+          onClick={() => props.setShowModal(true)}
+        >
+          <BrainIcon />
+          <span className={chatStyle["prompt-toast-content"]}>
+            {Locale.Context.Toast(context.length)}
+          </span>
+        </div>
+      )}
+      {props.showModal && (
+        <SessionConfigModel onClose={() => props.setShowModal(false)} />
+      )}
+    </div>
+  );
+}
+
+function useSubmitHandler() {
+  const config = useAppConfig();
+  const submitKey = config.submitKey;
+
+  const shouldSubmit = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key !== "Enter") return false;
+    if (e.key === "Enter" && e.nativeEvent.isComposing) return false;
+    return (
+      (config.submitKey === SubmitKey.AltEnter && e.altKey) ||
+      (config.submitKey === SubmitKey.CtrlEnter && e.ctrlKey) ||
+      (config.submitKey === SubmitKey.ShiftEnter && e.shiftKey) ||
+      (config.submitKey === SubmitKey.MetaEnter && e.metaKey) ||
+      (config.submitKey === SubmitKey.Enter &&
+        !e.altKey &&
+        !e.ctrlKey &&
+        !e.shiftKey &&
+        !e.metaKey)
+    );
+  };
+
+  return {
+    submitKey,
+    shouldSubmit,
+  };
+}
+
+export function PromptHints(props: {
+  prompts: Prompt[];
+  onPromptSelect: (prompt: Prompt) => void;
+}) {
+  const noPrompts = props.prompts.length === 0;
+  const [selectIndex, setSelectIndex] = useState(0);
+  const selectedRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setSelectIndex(0);
+  }, [props.prompts.length]);
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (noPrompts) return;
+
+      // arrow up / down to select prompt
+      const changeIndex = (delta: number) => {
+        e.stopPropagation();
+        e.preventDefault();
+        const nextIndex = Math.max(
+          0,
+          Math.min(props.prompts.length - 1, selectIndex + delta),
+        );
+        setSelectIndex(nextIndex);
+        selectedRef.current?.scrollIntoView({
+          block: "center",
+        });
+      };
+
+      if (e.key === "ArrowUp") {
+        changeIndex(1);
+      } else if (e.key === "ArrowDown") {
+        changeIndex(-1);
+      } else if (e.key === "Enter") {
+        const selectedPrompt = props.prompts.at(selectIndex);
+        if (selectedPrompt) {
+          props.onPromptSelect(selectedPrompt);
+        }
+      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+
+    return () => window.removeEventListener("keydown", onKeyDown);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [noPrompts, selectIndex]);
+
+  if (noPrompts) return null;
+  return (
+    <div className={styles["prompt-hints"]}>
+      {props.prompts.map((prompt, i) => (
+        <div
+          ref={i === selectIndex ? selectedRef : null}
+          className={
+            styles["prompt-hint"] +
+            ` ${i === selectIndex ? styles["prompt-hint-selected"] : ""}`
+          }
+          key={prompt.title + i.toString()}
+          onClick={() => props.onPromptSelect(prompt)}
+          onMouseEnter={() => setSelectIndex(i)}
+        >
+          <div className={styles["hint-title"]}>{prompt.title}</div>
+          <div className={styles["hint-content"]}>{prompt.content}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+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(() => {
+    autoScroll && scrollToBottom();
+  });
+
+  return {
+    scrollRef,
+    autoScroll,
+    setAutoScroll,
+    scrollToBottom,
+  };
+}
+
+export function ChatActions(props: {
+  showPromptModal: () => void;
+  scrollToBottom: () => void;
+  showPromptHints: () => void;
+  hitBottom: boolean;
+}) {
+  const config = useAppConfig();
+  const navigate = useNavigate();
+
+  // switch themes
+  const theme = 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];
+    config.update((config) => (config.theme = nextTheme));
+  }
+
+  // stop all responses
+  const couldStop = ControllerPool.hasPending();
+  const stopAll = () => ControllerPool.stopAll();
+
+  return (
+    <div className={chatStyle["chat-input-actions"]}>
+      {couldStop && (
+        <div
+          className={`${chatStyle["chat-input-action"]} clickable`}
+          onClick={stopAll}
+        >
+          <StopIcon />
+        </div>
+      )}
+      {!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
+        className={`${chatStyle["chat-input-action"]} clickable`}
+        onClick={props.showPromptHints}
+      >
+        <PromptIcon />
+      </div>
+
+      <div
+        className={`${chatStyle["chat-input-action"]} clickable`}
+        onClick={() => {
+          navigate(Path.Masks);
+        }}
+      >
+        <MaskIcon />
+      </div>
+    </div>
+  );
+}
+
+export function Chat() {
+  type RenderMessage = Message & { preview?: boolean };
+
+  const chatStore = useChatStore();
+  const [session, sessionIndex] = useChatStore((state) => [
+    state.currentSession(),
+    state.currentSessionIndex,
+  ]);
+  const config = useAppConfig();
+  const fontSize = config.fontSize;
+
+  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, scrollToBottom } = useScrollToBottom();
+  const [hitBottom, setHitBottom] = useState(true);
+  const isMobileScreen = useMobileScreen();
+  const navigate = useNavigate();
+
+  const onChatBodyScroll = (e: HTMLElement) => {
+    const isTouchBottom = e.scrollTop + e.clientHeight >= e.scrollHeight - 100;
+    setHitBottom(isTouchBottom);
+  };
+
+  // prompt hints
+  const promptStore = usePromptStore();
+  const [promptHints, setPromptHints] = useState<Prompt[]>([]);
+  const onSearch = useDebouncedCallback(
+    (text: string) => {
+      setPromptHints(promptStore.search(text));
+    },
+    100,
+    { leading: true, trailing: true },
+  );
+
+  const onPromptSelect = (prompt: Prompt) => {
+    setPromptHints([]);
+    inputRef.current?.focus();
+    setTimeout(() => setUserInput(prompt.content), 60);
+  };
+
+  // auto grow input
+  const [inputRows, setInputRows] = useState(2);
+  const measure = useDebouncedCallback(
+    () => {
+      const rows = inputRef.current ? autoGrowTextArea(inputRef.current) : 1;
+      const inputRows = Math.min(
+        20,
+        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) => {
+    setUserInput(text);
+    const n = text.trim().length;
+
+    // clear search results
+    if (n === 0) {
+      setPromptHints([]);
+    } else if (!config.disablePromptHint && n < SEARCH_TEXT_LIMIT) {
+      // check if need to trigger auto completion
+      if (text.startsWith("/")) {
+        let searchText = text.slice(1);
+        onSearch(searchText);
+      }
+    }
+  };
+
+  // submit user input
+  const onUserSubmit = () => {
+    if (userInput.trim() === "") return;
+    setIsLoading(true);
+    chatStore.onUserInput(userInput).then(() => setIsLoading(false));
+    setBeforeInput(userInput);
+    setUserInput("");
+    setPromptHints([]);
+    if (!isMobileScreen) inputRef.current?.focus();
+    setAutoScroll(true);
+  };
+
+  // stop response
+  const onUserStop = (messageId: number) => {
+    ControllerPool.stop(sessionIndex, messageId);
+  };
+
+  // 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();
+    }
+  };
+  const onRightClick = (e: any, message: Message) => {
+    // auto fill user input
+    if (message.role === "user") {
+      setUserInput(message.content);
+    }
+
+    // copy to clipboard
+    if (selectOrCopy(e.currentTarget, message.content)) {
+      e.preventDefault();
+    }
+  };
+
+  const findLastUserIndex = (messageId: number) => {
+    // find last user input message and resend
+    let lastUserMessageIndex: number | null = null;
+    for (let i = 0; i < session.messages.length; i += 1) {
+      const message = session.messages[i];
+      if (message.id === messageId) {
+        break;
+      }
+      if (message.role === "user") {
+        lastUserMessageIndex = i;
+      }
+    }
+
+    return lastUserMessageIndex;
+  };
+
+  const deleteMessage = (userIndex: number) => {
+    chatStore.updateCurrentSession((session) =>
+      session.messages.splice(userIndex, 2),
+    );
+  };
+
+  const onDelete = (botMessageId: number) => {
+    const userIndex = findLastUserIndex(botMessageId);
+    if (userIndex === null) return;
+    deleteMessage(userIndex);
+  };
+
+  const onResend = (botMessageId: number) => {
+    // find last user input message and resend
+    const userIndex = findLastUserIndex(botMessageId);
+    if (userIndex === null) return;
+
+    setIsLoading(true);
+    const content = session.messages[userIndex].content;
+    deleteMessage(userIndex);
+    chatStore.onUserInput(content).then(() => setIsLoading(false));
+    inputRef.current?.focus();
+  };
+
+  const context: RenderMessage[] = session.mask.context.slice();
+
+  const accessStore = useAccessStore();
+
+  if (
+    context.length === 0 &&
+    session.messages.at(0)?.content !== BOT_HELLO.content
+  ) {
+    const copiedHello = Object.assign({}, BOT_HELLO);
+    if (!accessStore.isAuthorized()) {
+      copiedHello.content = Locale.Error.Unauthorized;
+    }
+    context.push(copiedHello);
+  }
+
+  // preview messages
+  const messages = context
+    .concat(session.messages as RenderMessage[])
+    .concat(
+      isLoading
+        ? [
+            {
+              ...createMessage({
+                role: "assistant",
+                content: "……",
+              }),
+              preview: true,
+            },
+          ]
+        : [],
+    )
+    .concat(
+      userInput.length > 0 && config.sendPreviewBubble
+        ? [
+            {
+              ...createMessage({
+                role: "user",
+                content: userInput,
+              }),
+              preview: true,
+            },
+          ]
+        : [],
+    );
+
+  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!));
+    }
+  };
+
+  const location = useLocation();
+  const isChat = location.pathname === Path.Chat;
+  const autoFocus = !isMobileScreen || isChat; // only focus in chat page
+
+  return (
+    <div className={styles.chat} key={session.id}>
+      <div className="window-header">
+        <div className="window-header-title">
+          <div
+            className={`window-header-main-title " ${styles["chat-body-title"]}`}
+            onClickCapture={renameSession}
+          >
+            {!session.topic ? DEFAULT_TOPIC : session.topic}
+          </div>
+          <div className="window-header-sub-title">
+            {Locale.Chat.SubTitle(session.messages.length)}
+          </div>
+        </div>
+        <div className="window-actions">
+          <div className={"window-action-button" + " " + styles.mobile}>
+            <IconButton
+              icon={<ReturnIcon />}
+              bordered
+              title={Locale.Chat.Actions.ChatList}
+              onClick={() => navigate(Path.Home)}
+            />
+          </div>
+          <div className="window-action-button">
+            <IconButton
+              icon={<RenameIcon />}
+              bordered
+              onClick={renameSession}
+            />
+          </div>
+          <div className="window-action-button">
+            <IconButton
+              icon={<ExportIcon />}
+              bordered
+              title={Locale.Chat.Actions.Export}
+              onClick={() => {
+                exportMessages(
+                  session.messages.filter((msg) => !msg.isError),
+                  session.topic,
+                );
+              }}
+            />
+          </div>
+          {!isMobileScreen && (
+            <div className="window-action-button">
+              <IconButton
+                icon={config.tightBorder ? <MinIcon /> : <MaxIcon />}
+                bordered
+                onClick={() => {
+                  config.update(
+                    (config) => (config.tightBorder = !config.tightBorder),
+                  );
+                }}
+              />
+            </div>
+          )}
+        </div>
+
+        <PromptToast
+          showToast={!hitBottom}
+          showModal={showPromptModal}
+          setShowModal={setShowPromptModal}
+        />
+      </div>
+
+      <div
+        className={styles["chat-body"]}
+        ref={scrollRef}
+        onScroll={(e) => onChatBodyScroll(e.currentTarget)}
+        onMouseDown={() => inputRef.current?.blur()}
+        onWheel={(e) => setAutoScroll(hitBottom && e.deltaY > 0)}
+        onTouchStart={() => {
+          inputRef.current?.blur();
+          setAutoScroll(false);
+        }}
+      >
+        {messages.map((message, i) => {
+          const isUser = message.role === "user";
+          const showActions =
+            !isUser &&
+            i > 0 &&
+            !(message.preview || message.content.length === 0);
+          const showTyping = message.preview || message.streaming;
+
+          return (
+            <div
+              key={i}
+              className={
+                isUser ? styles["chat-message-user"] : styles["chat-message"]
+              }
+            >
+              <div className={styles["chat-message-container"]}>
+                <div className={styles["chat-message-avatar"]}>
+                  {message.role === "user" ? (
+                    <Avatar avatar={config.avatar} />
+                  ) : (
+                    <MaskAvatar mask={session.mask} />
+                  )}
+                </div>
+                {showTyping && (
+                  <div className={styles["chat-message-status"]}>
+                    {Locale.Chat.Typing}
+                  </div>
+                )}
+                <div className={styles["chat-message-item"]}>
+                  {showActions && (
+                    <div className={styles["chat-message-top-actions"]}>
+                      {message.streaming ? (
+                        <div
+                          className={styles["chat-message-top-action"]}
+                          onClick={() => onUserStop(message.id ?? i)}
+                        >
+                          {Locale.Chat.Actions.Stop}
+                        </div>
+                      ) : (
+                        <>
+                          <div
+                            className={styles["chat-message-top-action"]}
+                            onClick={() => onDelete(message.id ?? i)}
+                          >
+                            {Locale.Chat.Actions.Delete}
+                          </div>
+                          <div
+                            className={styles["chat-message-top-action"]}
+                            onClick={() => onResend(message.id ?? i)}
+                          >
+                            {Locale.Chat.Actions.Retry}
+                          </div>
+                        </>
+                      )}
+
+                      <div
+                        className={styles["chat-message-top-action"]}
+                        onClick={() => copyToClipboard(message.content)}
+                      >
+                        {Locale.Chat.Actions.Copy}
+                      </div>
+                    </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}
+                    defaultShow={i >= messages.length - 10}
+                  />
+                </div>
+                {!isUser && !message.preview && (
+                  <div className={styles["chat-message-actions"]}>
+                    <div className={styles["chat-message-action-date"]}>
+                      {message.date.toLocaleString()}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className={styles["chat-input-panel"]}>
+        <PromptHints prompts={promptHints} onPromptSelect={onPromptSelect} />
+
+        <ChatActions
+          showPromptModal={() => setShowPromptModal(true)}
+          scrollToBottom={scrollToBottom}
+          hitBottom={hitBottom}
+          showPromptHints={() => {
+            inputRef.current?.focus();
+            onSearch("");
+          }}
+        />
+        <div className={styles["chat-input-panel-inner"]}>
+          <textarea
+            ref={inputRef}
+            className={styles["chat-input"]}
+            placeholder={Locale.Chat.Input(submitKey)}
+            onInput={(e) => onInput(e.currentTarget.value)}
+            value={userInput}
+            onKeyDown={onInputKeyDown}
+            onFocus={() => setAutoScroll(true)}
+            onBlur={() => setAutoScroll(false)}
+            rows={inputRows}
+            autoFocus={autoFocus}
+          />
+          <IconButton
+            icon={<SendWhiteIcon />}
+            text={Locale.Chat.Send}
+            className={styles["chat-input-send"]}
+            type="primary"
+            onClick={onUserSubmit}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

app/components/emoji.tsx

@@ -0,0 +1,59 @@
+import EmojiPicker, {
+  Emoji,
+  EmojiStyle,
+  Theme as EmojiTheme,
+} from "emoji-picker-react";
+
+import { ModelType } from "../store";
+
+import BotIcon from "../icons/bot.svg";
+import BlackBotIcon from "../icons/black-bot.svg";
+
+export function getEmojiUrl(unified: string, style: EmojiStyle) {
+  return `https://cdn.staticfile.org/emoji-datasource-apple/14.0.0/img/${style}/64/${unified}.png`;
+}
+
+export function AvatarPicker(props: {
+  onEmojiClick: (emojiId: string) => void;
+}) {
+  return (
+    <EmojiPicker
+      lazyLoadEmojis
+      theme={EmojiTheme.AUTO}
+      getEmojiUrl={getEmojiUrl}
+      onEmojiClick={(e) => {
+        props.onEmojiClick(e.unified);
+      }}
+    />
+  );
+}
+
+export function Avatar(props: { model?: ModelType; avatar?: string }) {
+  if (props.model) {
+    return (
+      <div className="no-dark">
+        {props.model?.startsWith("gpt-4") ? (
+          <BlackBotIcon className="user-avatar" />
+        ) : (
+          <BotIcon className="user-avatar" />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="user-avatar">
+      {props.avatar && <EmojiAvatar avatar={props.avatar} />}
+    </div>
+  );
+}
+
+export function EmojiAvatar(props: { avatar: string; size?: number }) {
+  return (
+    <Emoji
+      unified={props.avatar}
+      size={props.size ?? 18}
+      getEmojiUrl={getEmojiUrl}
+    />
+  );
+}

app/components/error.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { IconButton } from "./button";
+import GithubIcon from "../icons/github.svg";
+import ResetIcon from "../icons/reload.svg";
+import { ISSUE_URL } from "../constant";
+import Locale from "../locales";
+import { downloadAs } from "../utils";
+
+interface IErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  info: React.ErrorInfo | null;
+}
+
+export class ErrorBoundary extends React.Component<any, IErrorBoundaryState> {
+  constructor(props: any) {
+    super(props);
+    this.state = { hasError: false, error: null, info: null };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    // Update state with error details
+    this.setState({ hasError: true, error, info });
+  }
+
+  clearAndSaveData() {
+    try {
+      downloadAs(
+        JSON.stringify(localStorage),
+        "chatgpt-next-web-snapshot.json",
+      );
+    } finally {
+      localStorage.clear();
+      location.reload();
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // Render error message
+      return (
+        <div className="error">
+          <h2>Oops, something went wrong!</h2>
+          <pre>
+            <code>{this.state.error?.toString()}</code>
+            <code>{this.state.info?.componentStack}</code>
+          </pre>
+
+          <div style={{ display: "flex", justifyContent: "space-between" }}>
+            <a href={ISSUE_URL} className="report">
+              <IconButton
+                text="Report This Error"
+                icon={<GithubIcon />}
+                bordered
+              />
+            </a>
+            <IconButton
+              icon={<ResetIcon />}
+              text="Clear All Data"
+              onClick={() =>
+                confirm(Locale.Settings.Actions.ConfirmClearAll) &&
+                this.clearAndSaveData()
+              }
+              bordered
+            />
+          </div>
+        </div>
+      );
+    }
+    // if no error occurred, render children
+    return this.props.children;
+  }
+}

app/components/home.module.scss

@@ -0,0 +1,572 @@
+@mixin container {
+  background-color: var(--white);
+  border: var(--border-in-light);
+  border-radius: 20px;
+  box-shadow: var(--shadow);
+  color: var(--black);
+  background-color: var(--white);
+  min-width: 600px;
+  min-height: 480px;
+  max-width: 1200px;
+
+  display: flex;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  width: var(--window-width);
+  height: var(--window-height);
+}
+
+.container {
+  @include container();
+}
+
+@media only screen and (min-width: 600px) {
+  .tight-container {
+    --window-width: 100vw;
+    --window-height: var(--full-height);
+    --window-content-width: calc(100% - var(--sidebar-width));
+
+    @include container();
+
+    max-width: 100vw;
+    max-height: var(--full-height);
+
+    border-radius: 0;
+    border: 0;
+  }
+}
+
+.sidebar {
+  top: 0;
+  width: var(--sidebar-width);
+  box-sizing: border-box;
+  padding: 20px;
+  background-color: var(--second);
+  display: flex;
+  flex-direction: column;
+  box-shadow: inset -2px 0px 2px 0px rgb(0, 0, 0, 0.05);
+  position: relative;
+  transition: width ease 0.05s;
+
+  .sidebar-header-bar {
+    display: flex;
+    margin-bottom: 20px;
+
+    .sidebar-bar-button {
+      flex-grow: 1;
+
+      &:not(:last-child) {
+        margin-right: 10px;
+      }
+    }
+  }
+}
+
+.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 {
+  width: var(--window-content-width);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.mobile {
+  display: none;
+}
+
+@media only screen and (max-width: 600px) {
+  .container {
+    min-height: unset;
+    min-width: unset;
+    max-height: unset;
+    min-width: unset;
+    border: 0;
+    border-radius: 0;
+  }
+
+  .sidebar {
+    position: absolute;
+    left: -100%;
+    z-index: 1000;
+    height: var(--full-height);
+    transition: all ease 0.3s;
+    box-shadow: none;
+  }
+
+  .sidebar-show {
+    left: 0;
+  }
+
+  .mobile {
+    display: block;
+  }
+}
+
+.sidebar-header {
+  position: relative;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.sidebar-logo {
+  position: absolute;
+  right: 0;
+  bottom: 18px;
+}
+
+.sidebar-title {
+  font-size: 20px;
+  font-weight: bold;
+  animation: slide-in ease 0.3s;
+}
+
+.sidebar-sub-title {
+  font-size: 12px;
+  font-weight: 400px;
+  animation: slide-in ease 0.3s;
+}
+
+.sidebar-body {
+  flex: 1;
+  overflow: auto;
+  overflow-x: hidden;
+}
+
+.chat-item {
+  padding: 10px 14px;
+  background-color: var(--white);
+  border-radius: 10px;
+  margin-bottom: 10px;
+  box-shadow: var(--card-shadow);
+  transition: background-color 0.3s ease;
+  cursor: pointer;
+  user-select: none;
+  border: 2px solid transparent;
+  position: relative;
+}
+
+.chat-item:hover {
+  background-color: var(--hover-color);
+}
+
+.chat-item-selected {
+  border-color: var(--primary);
+}
+
+.chat-item-title {
+  font-size: 14px;
+  font-weight: bolder;
+  display: block;
+  width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  animation: slide-in ease 0.3s;
+}
+
+.chat-item-delete {
+  position: absolute;
+  top: 10px;
+  right: -20px;
+  transition: all ease 0.3s;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.chat-item:hover > .chat-item-delete {
+  opacity: 0.5;
+  right: 10px;
+}
+
+.chat-item:hover > .chat-item-delete:hover {
+  opacity: 1;
+}
+
+.chat-item-info {
+  display: flex;
+  justify-content: space-between;
+  color: rgb(166, 166, 166);
+  font-size: 12px;
+  margin-top: 8px;
+  animation: slide-in ease 0.3s;
+}
+
+.chat-item-count,
+.chat-item-date {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.narrow-sidebar {
+  .sidebar-title,
+  .sidebar-sub-title {
+    display: none;
+  }
+  .sidebar-logo {
+    position: relative;
+    display: flex;
+    justify-content: center;
+  }
+
+  .sidebar-header-bar {
+    flex-direction: column;
+
+    .sidebar-bar-button {
+      &:not(:last-child) {
+        margin-right: 0;
+        margin-bottom: 10px;
+      }
+    }
+  }
+
+  .chat-item {
+    padding: 0;
+    min-height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all ease 0.3s;
+    overflow: hidden;
+
+    &:hover {
+      .chat-item-narrow {
+        transform: scale(0.7) translateX(-50%);
+      }
+    }
+  }
+
+  .chat-item-narrow {
+    line-height: 0;
+    font-weight: lighter;
+    color: var(--black);
+    transform: translateX(0);
+    transition: all ease 0.3s;
+    padding: 4px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .chat-item-avatar {
+      display: flex;
+      justify-content: center;
+      opacity: 0.2;
+      position: absolute;
+      transform: scale(4);
+    }
+
+    .chat-item-narrow-count {
+      font-size: 24px;
+      font-weight: bolder;
+      text-align: center;
+      color: var(--primary);
+      opacity: 0.6;
+    }
+  }
+
+  .chat-item-delete {
+    top: 15px;
+  }
+
+  .chat-item:hover > .chat-item-delete {
+    opacity: 0.5;
+    right: 5px;
+  }
+
+  .sidebar-tail {
+    flex-direction: column-reverse;
+    align-items: center;
+
+    .sidebar-actions {
+      flex-direction: column-reverse;
+      align-items: center;
+
+      .sidebar-action {
+        margin-right: 0;
+        margin-top: 15px;
+      }
+    }
+  }
+}
+
+.sidebar-tail {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 20px;
+}
+
+.sidebar-actions {
+  display: inline-flex;
+}
+
+.sidebar-action:not(:last-child) {
+  margin-right: 15px;
+}
+
+.chat {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+}
+
+.chat-body {
+  flex: 1;
+  overflow: auto;
+  padding: 20px;
+  padding-bottom: 40px;
+  position: relative;
+}
+
+.chat-body-title {
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.chat-message {
+  display: flex;
+  flex-direction: row;
+
+  &:last-child {
+    animation: slide-in ease 0.3s;
+  }
+}
+
+.chat-message-user {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.chat-message-container {
+  max-width: var(--message-max-width);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  &:hover {
+    .chat-message-top-actions {
+      opacity: 1;
+      right: 10px;
+      pointer-events: all;
+    }
+  }
+}
+
+.chat-message-user > .chat-message-container {
+  align-items: flex-end;
+}
+
+.chat-message-avatar {
+  margin-top: 20px;
+}
+
+.chat-message-status {
+  font-size: 12px;
+  color: #aaa;
+  line-height: 1.5;
+  margin-top: 5px;
+}
+
+.chat-message-item {
+  box-sizing: border-box;
+  max-width: 100%;
+  margin-top: 10px;
+  border-radius: 10px;
+  background-color: rgba(0, 0, 0, 0.05);
+  padding: 10px;
+  font-size: 14px;
+  user-select: text;
+  word-break: break-word;
+  border: var(--border-in-light);
+  position: relative;
+}
+
+.chat-message-top-actions {
+  font-size: 12px;
+  position: absolute;
+  right: 20px;
+  top: -26px;
+  left: 100px;
+  transition: all ease 0.3s;
+  opacity: 0;
+  pointer-events: none;
+
+  display: flex;
+  flex-direction: row-reverse;
+
+  .chat-message-top-action {
+    opacity: 0.5;
+    color: var(--black);
+    white-space: nowrap;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:not(:first-child) {
+      margin-right: 10px;
+    }
+  }
+}
+
+.chat-message-user > .chat-message-container > .chat-message-item {
+  background-color: var(--second);
+}
+
+.chat-message-actions {
+  display: flex;
+  flex-direction: row-reverse;
+  width: 100%;
+  padding-top: 5px;
+  box-sizing: border-box;
+  font-size: 12px;
+}
+
+.chat-message-action-date {
+  color: #aaa;
+}
+
+.chat-input-panel {
+  position: relative;
+  width: 100%;
+  padding: 20px;
+  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 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.prompt-hints {
+  min-height: 20px;
+  width: 100%;
+  max-height: 50vh;
+  overflow: auto;
+  display: flex;
+  flex-direction: column-reverse;
+
+  background-color: var(--white);
+  border: var(--border-in-light);
+  border-radius: 10px;
+  margin-bottom: 10px;
+  box-shadow: var(--shadow);
+
+  .prompt-hint {
+    color: var(--black);
+    padding: 6px 10px;
+    animation: slide-in ease 0.3s;
+    cursor: pointer;
+    transition: all ease 0.3s;
+    border: transparent 1px solid;
+    margin: 4px;
+    border-radius: 8px;
+
+    &:not(:last-child) {
+      margin-top: 0;
+    }
+
+    .hint-title {
+      font-size: 12px;
+      font-weight: bolder;
+
+      @include single-line();
+    }
+    .hint-content {
+      font-size: 12px;
+
+      @include single-line();
+    }
+
+    &-selected,
+    &:hover {
+      border-color: var(--primary);
+    }
+  }
+}
+
+.chat-input-panel-inner {
+  display: flex;
+  flex: 1;
+}
+
+.chat-input {
+  height: 100%;
+  width: 100%;
+  border-radius: 10px;
+  border: var(--border-in-light);
+  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03);
+  background-color: var(--white);
+  color: var(--black);
+  font-family: inherit;
+  padding: 10px 90px 10px 14px;
+  resize: none;
+  outline: none;
+}
+
+.chat-input:focus {
+  border: 1px solid var(--primary);
+}
+
+.chat-input-send {
+  background-color: var(--primary);
+  color: white;
+
+  position: absolute;
+  right: 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 {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}

app/components/home.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+require("../polyfill");
+
+import { useState, useEffect } from "react";
+
+import styles from "./home.module.scss";
+
+import BotIcon from "../icons/bot.svg";
+import LoadingIcon from "../icons/three-dots.svg";
+
+import { getCSSVar, useMobileScreen } from "../utils";
+
+import dynamic from "next/dynamic";
+import { Path, SlotID } from "../constant";
+import { ErrorBoundary } from "./error";
+
+import {
+  HashRouter as Router,
+  Routes,
+  Route,
+  useLocation,
+} from "react-router-dom";
+import { SideBar } from "./sidebar";
+import { useAppConfig } from "../store/config";
+
+export function Loading(props: { noLogo?: boolean }) {
+  return (
+    <div className={styles["loading-content"] + " no-dark"}>
+      {!props.noLogo && <BotIcon />}
+      <LoadingIcon />
+    </div>
+  );
+}
+
+const Settings = dynamic(async () => (await import("./settings")).Settings, {
+  loading: () => <Loading noLogo />,
+});
+
+const Chat = dynamic(async () => (await import("./chat")).Chat, {
+  loading: () => <Loading noLogo />,
+});
+
+const NewChat = dynamic(async () => (await import("./new-chat")).NewChat, {
+  loading: () => <Loading noLogo />,
+});
+
+const MaskPage = dynamic(async () => (await import("./mask")).MaskPage, {
+  loading: () => <Loading noLogo />,
+});
+
+export function useSwitchTheme() {
+  const config = useAppConfig();
+
+  useEffect(() => {
+    document.body.classList.remove("light");
+    document.body.classList.remove("dark");
+
+    if (config.theme === "dark") {
+      document.body.classList.add("dark");
+    } else if (config.theme === "light") {
+      document.body.classList.add("light");
+    }
+
+    const metaDescriptionDark = document.querySelector(
+      'meta[name="theme-color"][media]',
+    );
+    const metaDescriptionLight = document.querySelector(
+      'meta[name="theme-color"]:not([media])',
+    );
+
+    if (config.theme === "auto") {
+      metaDescriptionDark?.setAttribute("content", "#151515");
+      metaDescriptionLight?.setAttribute("content", "#fafafa");
+    } else {
+      const themeColor = getCSSVar("--themeColor");
+      metaDescriptionDark?.setAttribute("content", themeColor);
+      metaDescriptionLight?.setAttribute("content", themeColor);
+    }
+  }, [config.theme]);
+}
+
+const useHasHydrated = () => {
+  const [hasHydrated, setHasHydrated] = useState<boolean>(false);
+
+  useEffect(() => {
+    setHasHydrated(true);
+  }, []);
+
+  return hasHydrated;
+};
+
+function Screen() {
+  const config = useAppConfig();
+  const location = useLocation();
+  const isHome = location.pathname === Path.Home;
+  const isMobileScreen = useMobileScreen();
+
+  return (
+    <div
+      className={
+        styles.container +
+        ` ${
+          config.tightBorder && !isMobileScreen
+            ? styles["tight-container"]
+            : styles.container
+        }`
+      }
+    >
+      <SideBar className={isHome ? styles["sidebar-show"] : ""} />
+
+      <div className={styles["window-content"]} id={SlotID.AppBody}>
+        <Routes>
+          <Route path={Path.Home} element={<Chat />} />
+          <Route path={Path.NewChat} element={<NewChat />} />
+          <Route path={Path.Masks} element={<MaskPage />} />
+          <Route path={Path.Chat} element={<Chat />} />
+          <Route path={Path.Settings} element={<Settings />} />
+        </Routes>
+      </div>
+    </div>
+  );
+}
+
+export function Home() {
+  useSwitchTheme();
+
+  if (!useHasHydrated()) {
+    return <Loading />;
+  }
+
+  return (
+    <ErrorBoundary>
+      <Router>
+        <Screen />
+      </Router>
+    </ErrorBoundary>
+  );
+}

app/components/input-range.module.scss

@@ -0,0 +1,7 @@
+.input-range {
+  border: var(--border-in-light);
+  border-radius: 10px;
+  padding: 5px 15px 5px 10px;
+  font-size: 12px;
+  display: flex;
+}

app/components/input-range.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import styles from "./input-range.module.scss";
+
+interface InputRangeProps {
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  title?: string;
+  value: number | string;
+  className?: string;
+  min: string;
+  max: string;
+  step: string;
+}
+
+export function InputRange({
+  onChange,
+  title,
+  value,
+  className,
+  min,
+  max,
+  step,
+}: InputRangeProps) {
+  return (
+    <div className={styles["input-range"] + ` ${className ?? ""}`}>
+      {title || value}
+      <input
+        type="range"
+        title={title}
+        value={value}
+        min={min}
+        max={max}
+        step={step}
+        onChange={onChange}
+      ></input>
+    </div>
+  );
+}

app/components/markdown.tsx

@@ -0,0 +1,123 @@
+import ReactMarkdown from "react-markdown";
+import "katex/dist/katex.min.css";
+import RemarkMath from "remark-math";
+import RemarkBreaks from "remark-breaks";
+import RehypeKatex from "rehype-katex";
+import RemarkGfm from "remark-gfm";
+import RehypeHighlight from "rehype-highlight";
+import { useRef, useState, RefObject, useEffect } from "react";
+import { copyToClipboard } from "../utils";
+
+import LoadingIcon from "../icons/three-dots.svg";
+import React from "react";
+
+export function PreCode(props: { children: any }) {
+  const ref = useRef<HTMLPreElement>(null);
+
+  return (
+    <pre ref={ref}>
+      <span
+        className="copy-code-button"
+        onClick={() => {
+          if (ref.current) {
+            const code = ref.current.innerText;
+            copyToClipboard(code);
+          }
+        }}
+      ></span>
+      {props.children}
+    </pre>
+  );
+}
+
+function _MarkDownContent(props: { content: string }) {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
+      rehypePlugins={[
+        RehypeKatex,
+        [
+          RehypeHighlight,
+          {
+            detect: false,
+            ignoreMissing: true,
+          },
+        ],
+      ]}
+      components={{
+        pre: PreCode,
+        a: (aProps) => {
+          const href = aProps.href || "";
+          const isInternal = /^\/#/i.test(href);
+          const target = isInternal ? "_self" : aProps.target ?? "_blank";
+          return <a {...aProps} target={target} />;
+        },
+      }}
+    >
+      {props.content}
+    </ReactMarkdown>
+  );
+}
+
+export const MarkdownContent = React.memo(_MarkDownContent);
+
+export function Markdown(
+  props: {
+    content: string;
+    loading?: boolean;
+    fontSize?: number;
+    parentRef: RefObject<HTMLDivElement>;
+    defaultShow?: boolean;
+  } & React.DOMAttributes<HTMLDivElement>,
+) {
+  const mdRef = useRef<HTMLDivElement>(null);
+  const renderedHeight = useRef(0);
+  const inView = useRef(!!props.defaultShow);
+
+  const parent = props.parentRef.current;
+  const md = mdRef.current;
+
+  const checkInView = () => {
+    if (parent && md) {
+      const parentBounds = parent.getBoundingClientRect();
+      const twoScreenHeight = Math.max(500, parentBounds.height * 2);
+      const mdBounds = md.getBoundingClientRect();
+      const isInRange = (x: number) =>
+        x <= parentBounds.bottom + twoScreenHeight &&
+        x >= parentBounds.top - twoScreenHeight;
+      inView.current = isInRange(mdBounds.top) || isInRange(mdBounds.bottom);
+    }
+
+    if (inView.current && md) {
+      renderedHeight.current = Math.max(
+        renderedHeight.current,
+        md.getBoundingClientRect().height,
+      );
+    }
+  };
+
+  checkInView();
+
+  return (
+    <div
+      className="markdown-body"
+      style={{
+        fontSize: `${props.fontSize ?? 14}px`,
+        height:
+          !inView.current && renderedHeight.current > 0
+            ? renderedHeight.current
+            : "auto",
+      }}
+      ref={mdRef}
+      onContextMenu={props.onContextMenu}
+      onDoubleClickCapture={props.onDoubleClickCapture}
+    >
+      {inView.current &&
+        (props.loading ? (
+          <LoadingIcon />
+        ) : (
+          <MarkdownContent content={props.content} />
+        ))}
+    </div>
+  );
+}

app/components/mask.module.scss

@@ -0,0 +1,108 @@
+@import "../styles/animation.scss";
+.mask-page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .mask-page-body {
+    padding: 20px;
+    overflow-y: auto;
+
+    .mask-filter {
+      width: 100%;
+      max-width: 100%;
+      margin-bottom: 20px;
+      animation: slide-in ease 0.3s;
+      height: 40px;
+
+      display: flex;
+
+      .search-bar {
+        flex-grow: 1;
+        max-width: 100%;
+        min-width: 0;
+      }
+
+      .mask-filter-lang {
+        height: 100%;
+        margin-left: 10px;
+      }
+
+      .mask-create {
+        height: 100%;
+        margin-left: 10px;
+        box-sizing: border-box;
+        min-width: 80px;
+      }
+    }
+
+    .mask-item {
+      display: flex;
+      justify-content: space-between;
+      padding: 20px;
+      border: var(--border-in-light);
+      animation: slide-in ease 0.3s;
+
+      &:not(:last-child) {
+        border-bottom: 0;
+      }
+
+      &:first-child {
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+      }
+
+      &:last-child {
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+      }
+
+      .mask-header {
+        display: flex;
+        align-items: center;
+
+        .mask-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 10px;
+        }
+
+        .mask-title {
+          .mask-name {
+            font-size: 14px;
+            font-weight: bold;
+          }
+          .mask-info {
+            font-size: 12px;
+          }
+        }
+      }
+
+      .mask-actions {
+        display: flex;
+        flex-wrap: nowrap;
+        transition: all ease 0.3s;
+      }
+
+      @media screen and (max-width: 600px) {
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 10px;
+        border-radius: 10px;
+        margin-bottom: 20px;
+        box-shadow: var(--card-shadow);
+
+        &:not(:last-child) {
+          border-bottom: var(--border-in-light);
+        }
+
+        .mask-actions {
+          width: 100%;
+          justify-content: space-between;
+          padding-top: 10px;
+        }
+      }
+    }
+  }
+}

app/components/mask.tsx

@@ -0,0 +1,420 @@
+import { IconButton } from "./button";
+import { ErrorBoundary } from "./error";
+
+import styles from "./mask.module.scss";
+
+import DownloadIcon from "../icons/download.svg";
+import UploadIcon from "../icons/upload.svg";
+import EditIcon from "../icons/edit.svg";
+import AddIcon from "../icons/add.svg";
+import CloseIcon from "../icons/close.svg";
+import DeleteIcon from "../icons/delete.svg";
+import EyeIcon from "../icons/eye.svg";
+import CopyIcon from "../icons/copy.svg";
+
+import { DEFAULT_MASK_AVATAR, Mask, useMaskStore } from "../store/mask";
+import { Message, ModelConfig, ROLES, useChatStore } from "../store";
+import { Input, List, ListItem, Modal, Popover, showToast } from "./ui-lib";
+import { Avatar, AvatarPicker } from "./emoji";
+import Locale, { AllLangs, Lang } from "../locales";
+import { useNavigate } from "react-router-dom";
+
+import chatStyle from "./chat.module.scss";
+import { useEffect, useState } from "react";
+import { downloadAs, readFromFile } from "../utils";
+import { Updater } from "../api/openai/typing";
+import { ModelConfigList } from "./model-config";
+import { FileName, Path } from "../constant";
+import { BUILTIN_MASK_STORE } from "../masks";
+
+export function MaskAvatar(props: { mask: Mask }) {
+  return props.mask.avatar !== DEFAULT_MASK_AVATAR ? (
+    <Avatar avatar={props.mask.avatar} />
+  ) : (
+    <Avatar model={props.mask.modelConfig.model} />
+  );
+}
+
+export function MaskConfig(props: {
+  mask: Mask;
+  updateMask: Updater<Mask>;
+  extraListItems?: JSX.Element;
+  readonly?: boolean;
+}) {
+  const [showPicker, setShowPicker] = useState(false);
+
+  const updateConfig = (updater: (config: ModelConfig) => void) => {
+    if (props.readonly) return;
+
+    const config = { ...props.mask.modelConfig };
+    updater(config);
+    props.updateMask((mask) => (mask.modelConfig = config));
+  };
+
+  return (
+    <>
+      <ContextPrompts
+        context={props.mask.context}
+        updateContext={(updater) => {
+          const context = props.mask.context.slice();
+          updater(context);
+          props.updateMask((mask) => (mask.context = context));
+        }}
+      />
+
+      <List>
+        <ListItem title={Locale.Mask.Config.Avatar}>
+          <Popover
+            content={
+              <AvatarPicker
+                onEmojiClick={(emoji) => {
+                  props.updateMask((mask) => (mask.avatar = emoji));
+                  setShowPicker(false);
+                }}
+              ></AvatarPicker>
+            }
+            open={showPicker}
+            onClose={() => setShowPicker(false)}
+          >
+            <div
+              onClick={() => setShowPicker(true)}
+              style={{ cursor: "pointer" }}
+            >
+              <MaskAvatar mask={props.mask} />
+            </div>
+          </Popover>
+        </ListItem>
+        <ListItem title={Locale.Mask.Config.Name}>
+          <input
+            type="text"
+            value={props.mask.name}
+            onInput={(e) =>
+              props.updateMask((mask) => (mask.name = e.currentTarget.value))
+            }
+          ></input>
+        </ListItem>
+      </List>
+
+      <List>
+        <ModelConfigList
+          modelConfig={{ ...props.mask.modelConfig }}
+          updateConfig={updateConfig}
+        />
+        {props.extraListItems}
+      </List>
+    </>
+  );
+}
+
+export function ContextPrompts(props: {
+  context: Message[];
+  updateContext: (updater: (context: Message[]) => void) => void;
+}) {
+  const context = props.context;
+
+  const addContextPrompt = (prompt: Message) => {
+    props.updateContext((context) => context.push(prompt));
+  };
+
+  const removeContextPrompt = (i: number) => {
+    props.updateContext((context) => context.splice(i, 1));
+  };
+
+  const updateContextPrompt = (i: number, prompt: Message) => {
+    props.updateContext((context) => (context[i] = prompt));
+  };
+
+  return (
+    <>
+      <div className={chatStyle["context-prompt"]} style={{ marginBottom: 20 }}>
+        {context.map((c, i) => (
+          <div className={chatStyle["context-prompt-row"]} key={i}>
+            <select
+              value={c.role}
+              className={chatStyle["context-role"]}
+              onChange={(e) =>
+                updateContextPrompt(i, {
+                  ...c,
+                  role: e.target.value as any,
+                })
+              }
+            >
+              {ROLES.map((r) => (
+                <option key={r} value={r}>
+                  {r}
+                </option>
+              ))}
+            </select>
+            <Input
+              value={c.content}
+              type="text"
+              className={chatStyle["context-content"]}
+              rows={1}
+              onInput={(e) =>
+                updateContextPrompt(i, {
+                  ...c,
+                  content: e.currentTarget.value as any,
+                })
+              }
+            />
+            <IconButton
+              icon={<DeleteIcon />}
+              className={chatStyle["context-delete-button"]}
+              onClick={() => removeContextPrompt(i)}
+              bordered
+            />
+          </div>
+        ))}
+
+        <div className={chatStyle["context-prompt-row"]}>
+          <IconButton
+            icon={<AddIcon />}
+            text={Locale.Context.Add}
+            bordered
+            className={chatStyle["context-prompt-button"]}
+            onClick={() =>
+              addContextPrompt({
+                role: "system",
+                content: "",
+                date: "",
+              })
+            }
+          />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export function MaskPage() {
+  const navigate = useNavigate();
+
+  const maskStore = useMaskStore();
+  const chatStore = useChatStore();
+
+  const [filterLang, setFilterLang] = useState<Lang>();
+
+  const allMasks = maskStore
+    .getAll()
+    .filter((m) => !filterLang || m.lang === filterLang);
+
+  const [searchMasks, setSearchMasks] = useState<Mask[]>([]);
+  const [searchText, setSearchText] = useState("");
+  const masks = searchText.length > 0 ? searchMasks : allMasks;
+
+  // simple search, will refactor later
+  const onSearch = (text: string) => {
+    setSearchText(text);
+    if (text.length > 0) {
+      const result = allMasks.filter((m) => m.name.includes(text));
+      setSearchMasks(result);
+    } else {
+      setSearchMasks(allMasks);
+    }
+  };
+
+  const [editingMaskId, setEditingMaskId] = useState<number | undefined>();
+  const editingMask =
+    maskStore.get(editingMaskId) ?? BUILTIN_MASK_STORE.get(editingMaskId);
+  const closeMaskModal = () => setEditingMaskId(undefined);
+
+  const downloadAll = () => {
+    downloadAs(JSON.stringify(masks), FileName.Masks);
+  };
+
+  const importFromFile = () => {
+    readFromFile().then((content) => {
+      try {
+        const importMasks = JSON.parse(content);
+        if (Array.isArray(importMasks)) {
+          for (const mask of importMasks) {
+            if (mask.name) {
+              maskStore.create(mask);
+            }
+          }
+        }
+      } catch {}
+    });
+  };
+
+  return (
+    <ErrorBoundary>
+      <div className={styles["mask-page"]}>
+        <div className="window-header">
+          <div className="window-header-title">
+            <div className="window-header-main-title">
+              {Locale.Mask.Page.Title}
+            </div>
+            <div className="window-header-submai-title">
+              {Locale.Mask.Page.SubTitle(allMasks.length)}
+            </div>
+          </div>
+
+          <div className="window-actions">
+            <div className="window-action-button">
+              <IconButton
+                icon={<DownloadIcon />}
+                bordered
+                onClick={downloadAll}
+              />
+            </div>
+            <div className="window-action-button">
+              <IconButton
+                icon={<UploadIcon />}
+                bordered
+                onClick={() => importFromFile()}
+              />
+            </div>
+            <div className="window-action-button">
+              <IconButton
+                icon={<CloseIcon />}
+                bordered
+                onClick={() => navigate(-1)}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className={styles["mask-page-body"]}>
+          <div className={styles["mask-filter"]}>
+            <input
+              type="text"
+              className={styles["search-bar"]}
+              placeholder={Locale.Mask.Page.Search}
+              autoFocus
+              onInput={(e) => onSearch(e.currentTarget.value)}
+            />
+            <select
+              className={styles["mask-filter-lang"]}
+              value={filterLang ?? Locale.Settings.Lang.All}
+              onChange={(e) => {
+                const value = e.currentTarget.value;
+                if (value === Locale.Settings.Lang.All) {
+                  setFilterLang(undefined);
+                } else {
+                  setFilterLang(value as Lang);
+                }
+              }}
+            >
+              <option key="all" value={Locale.Settings.Lang.All}>
+                {Locale.Settings.Lang.All}
+              </option>
+              {AllLangs.map((lang) => (
+                <option value={lang} key={lang}>
+                  {Locale.Settings.Lang.Options[lang]}
+                </option>
+              ))}
+            </select>
+
+            <IconButton
+              className={styles["mask-create"]}
+              icon={<AddIcon />}
+              text={Locale.Mask.Page.Create}
+              bordered
+              onClick={() => {
+                const createdMask = maskStore.create();
+                setEditingMaskId(createdMask.id);
+              }}
+            />
+          </div>
+
+          <div>
+            {masks.map((m) => (
+              <div className={styles["mask-item"]} key={m.id}>
+                <div className={styles["mask-header"]}>
+                  <div className={styles["mask-icon"]}>
+                    <MaskAvatar mask={m} />
+                  </div>
+                  <div className={styles["mask-title"]}>
+                    <div className={styles["mask-name"]}>{m.name}</div>
+                    <div className={styles["mask-info"] + " one-line"}>
+                      {`${Locale.Mask.Item.Info(m.context.length)} / ${
+                        Locale.Settings.Lang.Options[m.lang]
+                      } / ${m.modelConfig.model}`}
+                    </div>
+                  </div>
+                </div>
+                <div className={styles["mask-actions"]}>
+                  <IconButton
+                    icon={<AddIcon />}
+                    text={Locale.Mask.Item.Chat}
+                    onClick={() => {
+                      chatStore.newSession(m);
+                      navigate(Path.Chat);
+                    }}
+                  />
+                  {m.builtin ? (
+                    <IconButton
+                      icon={<EyeIcon />}
+                      text={Locale.Mask.Item.View}
+                      onClick={() => setEditingMaskId(m.id)}
+                    />
+                  ) : (
+                    <IconButton
+                      icon={<EditIcon />}
+                      text={Locale.Mask.Item.Edit}
+                      onClick={() => setEditingMaskId(m.id)}
+                    />
+                  )}
+                  {!m.builtin && (
+                    <IconButton
+                      icon={<DeleteIcon />}
+                      text={Locale.Mask.Item.Delete}
+                      onClick={() => {
+                        if (confirm(Locale.Mask.Item.DeleteConfirm)) {
+                          maskStore.delete(m.id);
+                        }
+                      }}
+                    />
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {editingMask && (
+        <div className="modal-mask">
+          <Modal
+            title={Locale.Mask.EditModal.Title(editingMask?.builtin)}
+            onClose={closeMaskModal}
+            actions={[
+              <IconButton
+                icon={<DownloadIcon />}
+                text={Locale.Mask.EditModal.Download}
+                key="export"
+                bordered
+                onClick={() =>
+                  downloadAs(
+                    JSON.stringify(editingMask),
+                    `${editingMask.name}.json`,
+                  )
+                }
+              />,
+              <IconButton
+                key="copy"
+                icon={<CopyIcon />}
+                bordered
+                text={Locale.Mask.EditModal.Clone}
+                onClick={() => {
+                  navigate(Path.Masks);
+                  maskStore.create(editingMask);
+                  setEditingMaskId(undefined);
+                }}
+              />,
+            ]}
+          >
+            <MaskConfig
+              mask={editingMask}
+              updateMask={(updater) =>
+                maskStore.update(editingMaskId!, updater)
+              }
+              readonly={editingMask.builtin}
+            />
+          </Modal>
+        </div>
+      )}
+    </ErrorBoundary>
+  );
+}

app/components/model-config.tsx

@@ -0,0 +1,141 @@
+import styles from "./settings.module.scss";
+import { ALL_MODELS, ModalConfigValidator, ModelConfig } from "../store";
+
+import Locale from "../locales";
+import { InputRange } from "./input-range";
+import { List, ListItem } from "./ui-lib";
+
+export function ModelConfigList(props: {
+  modelConfig: ModelConfig;
+  updateConfig: (updater: (config: ModelConfig) => void) => void;
+}) {
+  return (
+    <>
+      <ListItem title={Locale.Settings.Model}>
+        <select
+          value={props.modelConfig.model}
+          onChange={(e) => {
+            props.updateConfig(
+              (config) =>
+                (config.model = ModalConfigValidator.model(
+                  e.currentTarget.value,
+                )),
+            );
+          }}
+        >
+          {ALL_MODELS.map((v) => (
+            <option value={v.name} key={v.name} disabled={!v.available}>
+              {v.name}
+            </option>
+          ))}
+        </select>
+      </ListItem>
+      <ListItem
+        title={Locale.Settings.Temperature.Title}
+        subTitle={Locale.Settings.Temperature.SubTitle}
+      >
+        <InputRange
+          value={props.modelConfig.temperature?.toFixed(1)}
+          min="0"
+          max="1" // lets limit it to 0-1
+          step="0.1"
+          onChange={(e) => {
+            props.updateConfig(
+              (config) =>
+                (config.temperature = ModalConfigValidator.temperature(
+                  e.currentTarget.valueAsNumber,
+                )),
+            );
+          }}
+        ></InputRange>
+      </ListItem>
+      <ListItem
+        title={Locale.Settings.MaxTokens.Title}
+        subTitle={Locale.Settings.MaxTokens.SubTitle}
+      >
+        <input
+          type="number"
+          min={100}
+          max={32000}
+          value={props.modelConfig.max_tokens}
+          onChange={(e) =>
+            props.updateConfig(
+              (config) =>
+                (config.max_tokens = ModalConfigValidator.max_tokens(
+                  e.currentTarget.valueAsNumber,
+                )),
+            )
+          }
+        ></input>
+      </ListItem>
+      <ListItem
+        title={Locale.Settings.PresencePenlty.Title}
+        subTitle={Locale.Settings.PresencePenlty.SubTitle}
+      >
+        <InputRange
+          value={props.modelConfig.presence_penalty?.toFixed(1)}
+          min="-2"
+          max="2"
+          step="0.1"
+          onChange={(e) => {
+            props.updateConfig(
+              (config) =>
+                (config.presence_penalty =
+                  ModalConfigValidator.presence_penalty(
+                    e.currentTarget.valueAsNumber,
+                  )),
+            );
+          }}
+        ></InputRange>
+      </ListItem>
+
+      <ListItem
+        title={Locale.Settings.HistoryCount.Title}
+        subTitle={Locale.Settings.HistoryCount.SubTitle}
+      >
+        <InputRange
+          title={props.modelConfig.historyMessageCount.toString()}
+          value={props.modelConfig.historyMessageCount}
+          min="0"
+          max="32"
+          step="1"
+          onChange={(e) =>
+            props.updateConfig(
+              (config) => (config.historyMessageCount = e.target.valueAsNumber),
+            )
+          }
+        ></InputRange>
+      </ListItem>
+
+      <ListItem
+        title={Locale.Settings.CompressThreshold.Title}
+        subTitle={Locale.Settings.CompressThreshold.SubTitle}
+      >
+        <input
+          type="number"
+          min={500}
+          max={4000}
+          value={props.modelConfig.compressMessageLengthThreshold}
+          onChange={(e) =>
+            props.updateConfig(
+              (config) =>
+                (config.compressMessageLengthThreshold =
+                  e.currentTarget.valueAsNumber),
+            )
+          }
+        ></input>
+      </ListItem>
+      <ListItem title={Locale.Memory.Title} subTitle={Locale.Memory.Send}>
+        <input
+          type="checkbox"
+          checked={props.modelConfig.sendMemory}
+          onChange={(e) =>
+            props.updateConfig(
+              (config) => (config.sendMemory = e.currentTarget.checked),
+            )
+          }
+        ></input>
+      </ListItem>
+    </>
+  );
+}

app/components/new-chat.module.scss

@@ -0,0 +1,115 @@
+@import "../styles/animation.scss";
+
+.new-chat {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  .mask-header {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    animation: slide-in-from-top ease 0.3s;
+  }
+
+  .mask-cards {
+    display: flex;
+    margin-top: 5vh;
+    margin-bottom: 20px;
+    animation: slide-in ease 0.3s;
+
+    .mask-card {
+      padding: 20px 10px;
+      border: var(--border-in-light);
+      box-shadow: var(--card-shadow);
+      border-radius: 14px;
+      background-color: var(--white);
+      transform: scale(1);
+
+      &:first-child {
+        transform: rotate(-15deg) translateY(5px);
+      }
+
+      &:last-child {
+        transform: rotate(15deg) translateY(5px);
+      }
+    }
+  }
+
+  .title {
+    font-size: 32px;
+    font-weight: bolder;
+    margin-bottom: 1vh;
+    animation: slide-in ease 0.35s;
+  }
+
+  .sub-title {
+    animation: slide-in ease 0.4s;
+  }
+
+  .actions {
+    margin-top: 5vh;
+    margin-bottom: 5vh;
+    animation: slide-in ease 0.45s;
+    display: flex;
+    justify-content: center;
+
+    .more {
+      font-size: 12px;
+      margin-left: 10px;
+    }
+  }
+
+  .masks {
+    flex-grow: 1;
+    width: 100%;
+    overflow: hidden;
+    align-items: center;
+    padding-top: 20px;
+
+    animation: slide-in ease 0.5s;
+
+    .mask-row {
+      margin-bottom: 10px;
+      display: flex;
+      justify-content: center;
+
+      @for $i from 1 to 10 {
+        &:nth-child(#{$i * 2}) {
+          margin-left: 50px;
+        }
+      }
+
+      .mask {
+        display: flex;
+        align-items: center;
+        padding: 10px 14px;
+        border: var(--border-in-light);
+        box-shadow: var(--card-shadow);
+        background-color: var(--white);
+        border-radius: 10px;
+        margin-right: 10px;
+        max-width: 8em;
+        transform: scale(1);
+        cursor: pointer;
+        transition: all ease 0.3s;
+
+        &:hover {
+          transform: translateY(-5px) scale(1.1);
+          z-index: 999;
+          border-color: var(--primary);
+        }
+
+        .mask-name {
+          margin-left: 10px;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}

app/components/new-chat.tsx

@@ -0,0 +1,185 @@
+import { useEffect, useRef, useState } from "react";
+import { Path, SlotID } from "../constant";
+import { IconButton } from "./button";
+import { EmojiAvatar } from "./emoji";
+import styles from "./new-chat.module.scss";
+
+import LeftIcon from "../icons/left.svg";
+import LightningIcon from "../icons/lightning.svg";
+import EyeIcon from "../icons/eye.svg";
+
+import { useLocation, useNavigate } from "react-router-dom";
+import { Mask, useMaskStore } from "../store/mask";
+import Locale from "../locales";
+import { useAppConfig, useChatStore } from "../store";
+import { MaskAvatar } from "./mask";
+
+function getIntersectionArea(aRect: DOMRect, bRect: DOMRect) {
+  const xmin = Math.max(aRect.x, bRect.x);
+  const xmax = Math.min(aRect.x + aRect.width, bRect.x + bRect.width);
+  const ymin = Math.max(aRect.y, bRect.y);
+  const ymax = Math.min(aRect.y + aRect.height, bRect.y + bRect.height);
+  const width = xmax - xmin;
+  const height = ymax - ymin;
+  const intersectionArea = width < 0 || height < 0 ? 0 : width * height;
+  return intersectionArea;
+}
+
+function MaskItem(props: { mask: Mask; onClick?: () => void }) {
+  const domRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const changeOpacity = () => {
+      const dom = domRef.current;
+      const parent = document.getElementById(SlotID.AppBody);
+      if (!parent || !dom) return;
+
+      const domRect = dom.getBoundingClientRect();
+      const parentRect = parent.getBoundingClientRect();
+      const intersectionArea = getIntersectionArea(domRect, parentRect);
+      const domArea = domRect.width * domRect.height;
+      const ratio = intersectionArea / domArea;
+      const opacity = ratio > 0.9 ? 1 : 0.4;
+      dom.style.opacity = opacity.toString();
+    };
+
+    setTimeout(changeOpacity, 30);
+
+    window.addEventListener("resize", changeOpacity);
+
+    return () => window.removeEventListener("resize", changeOpacity);
+  }, [domRef]);
+
+  return (
+    <div className={styles["mask"]} ref={domRef} onClick={props.onClick}>
+      <MaskAvatar mask={props.mask} />
+      <div className={styles["mask-name"] + " one-line"}>{props.mask.name}</div>
+    </div>
+  );
+}
+
+function useMaskGroup(masks: Mask[]) {
+  const [groups, setGroups] = useState<Mask[][]>([]);
+
+  useEffect(() => {
+    const appBody = document.getElementById(SlotID.AppBody);
+    if (!appBody || masks.length === 0) return;
+
+    const rect = appBody.getBoundingClientRect();
+    const maxWidth = rect.width;
+    const maxHeight = rect.height * 0.6;
+    const maskItemWidth = 120;
+    const maskItemHeight = 50;
+
+    const randomMask = () => masks[Math.floor(Math.random() * masks.length)];
+    let maskIndex = 0;
+    const nextMask = () => masks[maskIndex++ % masks.length];
+
+    const rows = Math.ceil(maxHeight / maskItemHeight);
+    const cols = Math.ceil(maxWidth / maskItemWidth);
+
+    const newGroups = new Array(rows)
+      .fill(0)
+      .map((_, _i) =>
+        new Array(cols)
+          .fill(0)
+          .map((_, j) => (j < 1 || j > cols - 2 ? randomMask() : nextMask())),
+      );
+
+    setGroups(newGroups);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return groups;
+}
+
+export function NewChat() {
+  const chatStore = useChatStore();
+  const maskStore = useMaskStore();
+
+  const masks = maskStore.getAll();
+  const groups = useMaskGroup(masks);
+
+  const navigate = useNavigate();
+  const config = useAppConfig();
+
+  const { state } = useLocation();
+
+  const startChat = (mask?: Mask) => {
+    chatStore.newSession(mask);
+    navigate(Path.Chat);
+  };
+
+  return (
+    <div className={styles["new-chat"]}>
+      <div className={styles["mask-header"]}>
+        <IconButton
+          icon={<LeftIcon />}
+          text={Locale.NewChat.Return}
+          onClick={() => navigate(Path.Home)}
+        ></IconButton>
+        {!state?.fromHome && (
+          <IconButton
+            text={Locale.NewChat.NotShow}
+            onClick={() => {
+              if (confirm(Locale.NewChat.ConfirmNoShow)) {
+                startChat();
+                config.update(
+                  (config) => (config.dontShowMaskSplashScreen = true),
+                );
+              }
+            }}
+          ></IconButton>
+        )}
+      </div>
+      <div className={styles["mask-cards"]}>
+        <div className={styles["mask-card"]}>
+          <EmojiAvatar avatar="1f606" size={24} />
+        </div>
+        <div className={styles["mask-card"]}>
+          <EmojiAvatar avatar="1f916" size={24} />
+        </div>
+        <div className={styles["mask-card"]}>
+          <EmojiAvatar avatar="1f479" size={24} />
+        </div>
+      </div>
+
+      <div className={styles["title"]}>{Locale.NewChat.Title}</div>
+      <div className={styles["sub-title"]}>{Locale.NewChat.SubTitle}</div>
+
+      <div className={styles["actions"]}>
+        <IconButton
+          text={Locale.NewChat.Skip}
+          onClick={() => startChat()}
+          icon={<LightningIcon />}
+          type="primary"
+          shadow
+        />
+
+        <IconButton
+          className={styles["more"]}
+          text={Locale.NewChat.More}
+          onClick={() => navigate(Path.Masks)}
+          icon={<EyeIcon />}
+          bordered
+          shadow
+        />
+      </div>
+
+      <div className={styles["masks"]}>
+        {groups.map((masks, i) => (
+          <div key={i} className={styles["mask-row"]}>
+            {masks.map((mask, index) => (
+              <MaskItem
+                key={index}
+                mask={mask}
+                onClick={() => startChat(mask)}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

app/components/settings.module.scss

@@ -0,0 +1,77 @@
+.settings {
+  padding: 20px;
+  overflow: auto;
+}
+
+.avatar {
+  cursor: pointer;
+}
+
+.edit-prompt-modal {
+  display: flex;
+  flex-direction: column;
+
+  .edit-prompt-title {
+    max-width: unset;
+    margin-bottom: 20px;
+    text-align: left;
+  }
+  .edit-prompt-content {
+    max-width: unset;
+  }
+}
+
+.user-prompt-modal {
+  min-height: 40vh;
+
+  .user-prompt-search {
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 10px;
+    background-color: var(--gray);
+  }
+
+  .user-prompt-list {
+    border: var(--border-in-light);
+    border-radius: 10px;
+
+    .user-prompt-item {
+      display: flex;
+      justify-content: space-between;
+      padding: 10px;
+
+      &:not(:last-child) {
+        border-bottom: var(--border-in-light);
+      }
+
+      .user-prompt-header {
+        max-width: calc(100% - 100px);
+
+        .user-prompt-title {
+          font-size: 14px;
+          line-height: 2;
+          font-weight: bold;
+        }
+        .user-prompt-content {
+          font-size: 12px;
+        }
+      }
+
+      .user-prompt-buttons {
+        display: flex;
+        align-items: center;
+
+        .user-prompt-button {
+          height: 100%;
+
+          &:not(:last-child) {
+            margin-right: 5px;
+          }
+        }
+      }
+    }
+  }
+
+  .user-prompt-actions {
+  }
+}

app/components/settings.tsx

@@ -0,0 +1,606 @@
+import { useState, useEffect, useMemo, HTMLProps, useRef } from "react";
+
+import styles from "./settings.module.scss";
+
+import ResetIcon from "../icons/reload.svg";
+import AddIcon from "../icons/add.svg";
+import CloseIcon from "../icons/close.svg";
+import CopyIcon from "../icons/copy.svg";
+import ClearIcon from "../icons/clear.svg";
+import EditIcon from "../icons/edit.svg";
+import EyeIcon from "../icons/eye.svg";
+import { Input, List, ListItem, Modal, PasswordInput, Popover } from "./ui-lib";
+import { ModelConfigList } from "./model-config";
+
+import { IconButton } from "./button";
+import {
+  SubmitKey,
+  useChatStore,
+  Theme,
+  useUpdateStore,
+  useAccessStore,
+  useAppConfig,
+  ALL_BOT,
+  ModalConfigValidator,
+} from "../store";
+
+import Locale, { AllLangs, changeLang, getLang } from "../locales";
+import { copyToClipboard } from "../utils";
+import Link from "next/link";
+import { Path, UPDATE_URL } from "../constant";
+import { Prompt, SearchService, usePromptStore } from "../store/prompt";
+import { ErrorBoundary } from "./error";
+import { InputRange } from "./input-range";
+import { useNavigate } from "react-router-dom";
+import { Avatar, AvatarPicker } from "./emoji";
+
+function EditPromptModal(props: { id: number; onClose: () => void }) {
+  const promptStore = usePromptStore();
+  const prompt = promptStore.get(props.id);
+
+  return prompt ? (
+    <div className="modal-mask">
+      <Modal
+        title={Locale.Settings.Prompt.EditModal.Title}
+        onClose={props.onClose}
+        actions={[
+          <IconButton
+            key=""
+            onClick={props.onClose}
+            text={Locale.UI.Confirm}
+            bordered
+          />,
+        ]}
+      >
+        <div className={styles["edit-prompt-modal"]}>
+          <input
+            type="text"
+            value={prompt.title}
+            readOnly={!prompt.isUser}
+            className={styles["edit-prompt-title"]}
+            onInput={(e) =>
+              promptStore.update(
+                props.id,
+                (prompt) => (prompt.title = e.currentTarget.value),
+              )
+            }
+          ></input>
+          <Input
+            value={prompt.content}
+            readOnly={!prompt.isUser}
+            className={styles["edit-prompt-content"]}
+            rows={10}
+            onInput={(e) =>
+              promptStore.update(
+                props.id,
+                (prompt) => (prompt.content = e.currentTarget.value),
+              )
+            }
+          ></Input>
+        </div>
+      </Modal>
+    </div>
+  ) : null;
+}
+
+function UserPromptModal(props: { onClose?: () => void }) {
+  const promptStore = usePromptStore();
+  const userPrompts = promptStore.getUserPrompts();
+  const builtinPrompts = SearchService.builtinPrompts;
+  const allPrompts = userPrompts.concat(builtinPrompts);
+  const [searchInput, setSearchInput] = useState("");
+  const [searchPrompts, setSearchPrompts] = useState<Prompt[]>([]);
+  const prompts = searchInput.length > 0 ? searchPrompts : allPrompts;
+
+  const [editingPromptId, setEditingPromptId] = useState<number>();
+
+  useEffect(() => {
+    if (searchInput.length > 0) {
+      const searchResult = SearchService.search(searchInput);
+      setSearchPrompts(searchResult);
+    } else {
+      setSearchPrompts([]);
+    }
+  }, [searchInput]);
+
+  return (
+    <div className="modal-mask">
+      <Modal
+        title={Locale.Settings.Prompt.Modal.Title}
+        onClose={() => props.onClose?.()}
+        actions={[
+          <IconButton
+            key="add"
+            onClick={() =>
+              promptStore.add({
+                title: "Empty Prompt",
+                content: "Empty Prompt Content",
+              })
+            }
+            icon={<AddIcon />}
+            bordered
+            text={Locale.Settings.Prompt.Modal.Add}
+          />,
+        ]}
+      >
+        <div className={styles["user-prompt-modal"]}>
+          <input
+            type="text"
+            className={styles["user-prompt-search"]}
+            placeholder={Locale.Settings.Prompt.Modal.Search}
+            value={searchInput}
+            onInput={(e) => setSearchInput(e.currentTarget.value)}
+          ></input>
+
+          <div className={styles["user-prompt-list"]}>
+            {prompts.map((v, _) => (
+              <div className={styles["user-prompt-item"]} key={v.id ?? v.title}>
+                <div className={styles["user-prompt-header"]}>
+                  <div className={styles["user-prompt-title"]}>{v.title}</div>
+                  <div className={styles["user-prompt-content"] + " one-line"}>
+                    {v.content}
+                  </div>
+                </div>
+
+                <div className={styles["user-prompt-buttons"]}>
+                  {v.isUser && (
+                    <IconButton
+                      icon={<ClearIcon />}
+                      className={styles["user-prompt-button"]}
+                      onClick={() => promptStore.remove(v.id!)}
+                    />
+                  )}
+                  {v.isUser ? (
+                    <IconButton
+                      icon={<EditIcon />}
+                      className={styles["user-prompt-button"]}
+                      onClick={() => setEditingPromptId(v.id)}
+                    />
+                  ) : (
+                    <IconButton
+                      icon={<EyeIcon />}
+                      className={styles["user-prompt-button"]}
+                      onClick={() => setEditingPromptId(v.id)}
+                    />
+                  )}
+                  <IconButton
+                    icon={<CopyIcon />}
+                    className={styles["user-prompt-button"]}
+                    onClick={() => copyToClipboard(v.content)}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </Modal>
+
+      {editingPromptId !== undefined && (
+        <EditPromptModal
+          id={editingPromptId!}
+          onClose={() => setEditingPromptId(undefined)}
+        />
+      )}
+    </div>
+  );
+}
+
+function formatVersionDate(t: string) {
+  const d = new Date(+t);
+  const year = d.getUTCFullYear();
+  const month = d.getUTCMonth() + 1;
+  const day = d.getUTCDate();
+
+  return [
+    year.toString(),
+    month.toString().padStart(2, "0"),
+    day.toString().padStart(2, "0"),
+  ].join("");
+}
+
+export function Settings() {
+  const navigate = useNavigate();
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+  const config = useAppConfig();
+  const updateConfig = config.update;
+  const resetConfig = config.reset;
+  const chatStore = useChatStore();
+
+  const updateStore = useUpdateStore();
+  const [checkingUpdate, setCheckingUpdate] = useState(false);
+  const currentVersion = formatVersionDate(updateStore.version);
+  const remoteId = formatVersionDate(updateStore.remoteVersion);
+  const hasNewVersion = currentVersion !== remoteId;
+
+  function checkUpdate(force = false) {
+    setCheckingUpdate(true);
+    updateStore.getLatestVersion(force).then(() => {
+      setCheckingUpdate(false);
+    });
+
+    console.log(
+      "[Update] local version ",
+      new Date(+updateStore.version).toLocaleString(),
+    );
+    console.log(
+      "[Update] remote version ",
+      new Date(+updateStore.remoteVersion).toLocaleString(),
+    );
+  }
+
+  const usage = {
+    used: updateStore.used,
+    subscription: updateStore.subscription,
+  };
+  const [loadingUsage, setLoadingUsage] = useState(false);
+  function checkUsage(force = false) {
+    setLoadingUsage(true);
+    updateStore.updateUsage(force).finally(() => {
+      setLoadingUsage(false);
+    });
+  }
+
+  const accessStore = useAccessStore();
+  const enabledAccessControl = useMemo(
+    () => accessStore.enabledAccessControl(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const promptStore = usePromptStore();
+  const builtinCount = SearchService.count.builtin;
+  const customCount = promptStore.getUserPrompts().length ?? 0;
+  const [shouldShowPromptModal, setShowPromptModal] = useState(false);
+
+  const showUsage = accessStore.isAuthorized();
+  useEffect(() => {
+    // checks per minutes
+    checkUpdate();
+    showUsage && checkUsage();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    const keydownEvent = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        navigate(Path.Home);
+      }
+    };
+    document.addEventListener("keydown", keydownEvent);
+    return () => {
+      document.removeEventListener("keydown", keydownEvent);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <ErrorBoundary>
+      <div className="window-header">
+        <div className="window-header-title">
+          <div className="window-header-main-title">
+            {Locale.Settings.Title}
+          </div>
+          <div className="window-header-sub-title">
+            {Locale.Settings.SubTitle}
+          </div>
+        </div>
+        <div className="window-actions">
+          <div className="window-action-button">
+            <IconButton
+              icon={<ClearIcon />}
+              onClick={() => {
+                if (confirm(Locale.Settings.Actions.ConfirmClearAll)) {
+                  chatStore.clearAllData();
+                }
+              }}
+              bordered
+              title={Locale.Settings.Actions.ClearAll}
+            />
+          </div>
+          <div className="window-action-button">
+            <IconButton
+              icon={<ResetIcon />}
+              onClick={() => {
+                if (confirm(Locale.Settings.Actions.ConfirmResetAll)) {
+                  resetConfig();
+                }
+              }}
+              bordered
+              title={Locale.Settings.Actions.ResetAll}
+            />
+          </div>
+          <div className="window-action-button">
+            <IconButton
+              icon={<CloseIcon />}
+              onClick={() => navigate(Path.Home)}
+              bordered
+              title={Locale.Settings.Actions.Close}
+            />
+          </div>
+        </div>
+      </div>
+      <div className={styles["settings"]}>
+        <List>
+          <ListItem title={Locale.Settings.Avatar}>
+            <Popover
+              onClose={() => setShowEmojiPicker(false)}
+              content={
+                <AvatarPicker
+                  onEmojiClick={(avatar: string) => {
+                    updateConfig((config) => (config.avatar = avatar));
+                    setShowEmojiPicker(false);
+                  }}
+                />
+              }
+              open={showEmojiPicker}
+            >
+              <div
+                className={styles.avatar}
+                onClick={() => setShowEmojiPicker(true)}
+              >
+                <Avatar avatar={config.avatar} />
+              </div>
+            </Popover>
+          </ListItem>
+
+          {/* <ListItem
+            title={Locale.Settings.Update.Version(currentVersion ?? "unknown")}
+            subTitle={
+              checkingUpdate
+                ? Locale.Settings.Update.IsChecking
+                : hasNewVersion
+                ? Locale.Settings.Update.FoundUpdate(remoteId ?? "ERROR")
+                : Locale.Settings.Update.IsLatest
+            }
+          >
+            {checkingUpdate ? (
+              <div />
+            ) : hasNewVersion ? (
+              <Link href={UPDATE_URL} target="_blank" className="link">
+                {Locale.Settings.Update.GoToUpdate}
+              </Link>
+            ) : (
+              <IconButton
+                icon={<ResetIcon></ResetIcon>}
+                text={Locale.Settings.Update.CheckUpdate}
+                onClick={() => checkUpdate(true)}
+              />
+            )}
+          </ListItem> */}
+
+          <ListItem title={Locale.Settings.SendKey}>
+            <select
+              value={config.submitKey}
+              onChange={(e) => {
+                updateConfig(
+                  (config) =>
+                    (config.submitKey = e.target.value as any as SubmitKey),
+                );
+              }}
+            >
+              {Object.values(SubmitKey).map((v) => (
+                <option value={v} key={v}>
+                  {v}
+                </option>
+              ))}
+            </select>
+          </ListItem>
+
+          <ListItem title={Locale.Settings.Theme}>
+            <select
+              value={config.theme}
+              onChange={(e) => {
+                updateConfig(
+                  (config) => (config.theme = e.target.value as any as Theme),
+                );
+              }}
+            >
+              {Object.values(Theme).map((v) => (
+                <option value={v} key={v}>
+                  {v}
+                </option>
+              ))}
+            </select>
+          </ListItem>
+
+          <ListItem title={Locale.Settings.Lang.Name}>
+            <select
+              value={getLang()}
+              onChange={(e) => {
+                changeLang(e.target.value as any);
+              }}
+            >
+              {AllLangs.map((lang) => (
+                <option value={lang} key={lang}>
+                  {Locale.Settings.Lang.Options[lang]}
+                </option>
+              ))}
+            </select>
+          </ListItem>
+
+          <ListItem
+            title={Locale.Settings.FontSize.Title}
+            subTitle={Locale.Settings.FontSize.SubTitle}
+          >
+            <InputRange
+              title={`${config.fontSize ?? 14}px`}
+              value={config.fontSize}
+              min="12"
+              max="18"
+              step="1"
+              onChange={(e) =>
+                updateConfig(
+                  (config) =>
+                    (config.fontSize = Number.parseInt(e.currentTarget.value)),
+                )
+              }
+            ></InputRange>
+          </ListItem>
+
+          <ListItem
+            title={Locale.Settings.SendPreviewBubble.Title}
+            subTitle={Locale.Settings.SendPreviewBubble.SubTitle}
+          >
+            <input
+              type="checkbox"
+              checked={config.sendPreviewBubble}
+              onChange={(e) =>
+                updateConfig(
+                  (config) =>
+                    (config.sendPreviewBubble = e.currentTarget.checked),
+                )
+              }
+            ></input>
+          </ListItem>
+
+          <ListItem
+            title={Locale.Settings.Mask.Title}
+            subTitle={Locale.Settings.Mask.SubTitle}
+          >
+            <input
+              type="checkbox"
+              checked={!config.dontShowMaskSplashScreen}
+              onChange={(e) =>
+                updateConfig(
+                  (config) =>
+                    (config.dontShowMaskSplashScreen =
+                      !e.currentTarget.checked),
+                )
+              }
+            ></input>
+          </ListItem>
+        </List>
+
+        <List>
+          {enabledAccessControl ? (
+            <ListItem
+              title={Locale.Settings.AccessCode.Title}
+              subTitle={Locale.Settings.AccessCode.SubTitle}
+            >
+              <PasswordInput
+                value={accessStore.accessCode}
+                type="text"
+                placeholder={Locale.Settings.AccessCode.Placeholder}
+                onChange={(e) => {
+                  accessStore.updateCode(e.currentTarget.value);
+                }}
+              />
+            </ListItem>
+          ) : (
+            <></>
+          )}
+
+          {!accessStore.hideUserApiKey ? (
+            <ListItem
+              title={Locale.Settings.Token.Title}
+              subTitle={Locale.Settings.Token.SubTitle}
+            >
+              <PasswordInput
+                value={accessStore.token}
+                type="text"
+                placeholder={Locale.Settings.Token.Placeholder}
+                onChange={(e) => {
+                  accessStore.updateToken(e.currentTarget.value);
+                }}
+              />
+            </ListItem>
+          ) : null}
+
+          <ListItem
+            title={Locale.Settings.Usage.Title}
+            subTitle={
+              showUsage
+                ? loadingUsage
+                  ? Locale.Settings.Usage.IsChecking
+                  : Locale.Settings.Usage.SubTitle(
+                      usage?.used ?? "[?]",
+                      usage?.subscription ?? "[?]",
+                    )
+                : Locale.Settings.Usage.NoAccess
+            }
+          >
+            {!showUsage || loadingUsage ? (
+              <div />
+            ) : (
+              <IconButton
+                icon={<ResetIcon></ResetIcon>}
+                text={Locale.Settings.Usage.Check}
+                onClick={() => checkUsage(true)}
+              />
+            )}
+          </ListItem>
+        </List>
+
+        <List>
+          <ListItem
+            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>
+          </ListItem>
+
+          <ListItem
+            title={Locale.Settings.Prompt.List}
+            subTitle={Locale.Settings.Prompt.ListCount(
+              builtinCount,
+              customCount,
+            )}
+          >
+            <IconButton
+              icon={<EditIcon />}
+              text={Locale.Settings.Prompt.Edit}
+              onClick={() => setShowPromptModal(true)}
+            />
+          </ListItem>
+        </List>
+
+        <List>
+          <ListItem title={Locale.Settings.Bot}>
+            <select
+              value={config.bot}
+              onChange={(e) => {
+                updateConfig(
+                  (config) =>
+                    (config.bot = ModalConfigValidator.bot(
+                      e.currentTarget.value,
+                    )),
+                );
+                chatStore.clearAll();
+              }}
+            >
+              {ALL_BOT.map((v) => (
+                <option value={v.name} key={v.name} disabled={!v.available}>
+                  {v.name}
+                </option>
+              ))}
+            </select>
+          </ListItem>
+        </List>
+
+        <List>
+          <ModelConfigList
+            modelConfig={config.modelConfig}
+            updateConfig={(upater) => {
+              const modelConfig = { ...config.modelConfig };
+              upater(modelConfig);
+              config.update((config) => (config.modelConfig = modelConfig));
+            }}
+          />
+        </List>
+
+        {shouldShowPromptModal && (
+          <UserPromptModal onClose={() => setShowPromptModal(false)} />
+        )}
+      </div>
+    </ErrorBoundary>
+  );
+}

app/components/sidebar.tsx

@@ -0,0 +1,182 @@
+import { useEffect, useRef } from "react";
+
+import styles from "./home.module.scss";
+
+import { IconButton } from "./button";
+import SettingsIcon from "../icons/settings.svg";
+import GithubIcon from "../icons/github.svg";
+import ChatGptIcon from "../icons/chatgpt.svg";
+import AddIcon from "../icons/add.svg";
+import CloseIcon from "../icons/close.svg";
+import MaskIcon from "../icons/mask.svg";
+import PluginIcon from "../icons/plugin.svg";
+
+import Locale from "../locales";
+
+import { useAppConfig, useChatStore } from "../store";
+
+import {
+  MAX_SIDEBAR_WIDTH,
+  MIN_SIDEBAR_WIDTH,
+  NARROW_SIDEBAR_WIDTH,
+  Path,
+  REPO_URL,
+} from "../constant";
+
+import { Link, useNavigate } from "react-router-dom";
+import { useMobileScreen } from "../utils";
+import dynamic from "next/dynamic";
+import { showToast } from "./ui-lib";
+
+const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, {
+  loading: () => null,
+});
+
+function useDragSideBar() {
+  const limit = (x: number) => Math.min(MAX_SIDEBAR_WIDTH, x);
+
+  const config = useAppConfig();
+  const startX = useRef(0);
+  const startDragWidth = useRef(config.sidebarWidth ?? 300);
+  const lastUpdateTime = useRef(Date.now());
+
+  const handleMouseMove = useRef((e: MouseEvent) => {
+    if (Date.now() < lastUpdateTime.current + 50) {
+      return;
+    }
+    lastUpdateTime.current = Date.now();
+    const d = e.clientX - startX.current;
+    const nextWidth = limit(startDragWidth.current + d);
+    config.update((config) => (config.sidebarWidth = nextWidth));
+  });
+
+  const handleMouseUp = useRef(() => {
+    startDragWidth.current = 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);
+  };
+  const isMobileScreen = useMobileScreen();
+  const shouldNarrow =
+    !isMobileScreen && config.sidebarWidth < MIN_SIDEBAR_WIDTH;
+
+  useEffect(() => {
+    const barWidth = shouldNarrow
+      ? NARROW_SIDEBAR_WIDTH
+      : limit(config.sidebarWidth ?? 300);
+    const sideBarWidth = isMobileScreen ? "100vw" : `${barWidth}px`;
+    document.documentElement.style.setProperty("--sidebar-width", sideBarWidth);
+  }, [config.sidebarWidth, isMobileScreen, shouldNarrow]);
+
+  return {
+    onDragMouseDown,
+    shouldNarrow,
+  };
+}
+
+export function SideBar(props: { className?: string }) {
+  const chatStore = useChatStore();
+
+  // drag side bar
+  const { onDragMouseDown, shouldNarrow } = useDragSideBar();
+  const navigate = useNavigate();
+
+  const config = useAppConfig();
+
+  return (
+    <div
+      className={`${styles.sidebar} ${props.className} ${
+        shouldNarrow && styles["narrow-sidebar"]
+      }`}
+    >
+      <div className={styles["sidebar-header"]}>
+        <div className={styles["sidebar-title"]}>
+          ChatGPT Next【{config.bot}】
+        </div>
+        <div className={styles["sidebar-sub-title"]}>必应暂不支持上下文</div>
+        <div className={styles["sidebar-logo"] + " no-dark"}>
+          <ChatGptIcon />
+        </div>
+      </div>
+
+      <div className={styles["sidebar-header-bar"]}>
+        <IconButton
+          icon={<MaskIcon />}
+          text={shouldNarrow ? undefined : Locale.Mask.Name}
+          className={styles["sidebar-bar-button"]}
+          onClick={() => navigate(Path.NewChat, { state: { fromHome: true } })}
+          shadow
+        />
+        <IconButton
+          icon={<PluginIcon />}
+          text={shouldNarrow ? undefined : Locale.Plugin.Name}
+          className={styles["sidebar-bar-button"]}
+          onClick={() => showToast(Locale.WIP)}
+          shadow
+        />
+      </div>
+
+      <div
+        className={styles["sidebar-body"]}
+        onClick={(e) => {
+          if (e.target === e.currentTarget) {
+            navigate(Path.Home);
+          }
+        }}
+      >
+        <ChatList narrow={shouldNarrow} />
+      </div>
+
+      <div className={styles["sidebar-tail"]}>
+        <div className={styles["sidebar-actions"]}>
+          <div className={styles["sidebar-action"] + " " + styles.mobile}>
+            <IconButton
+              icon={<CloseIcon />}
+              onClick={() => {
+                if (confirm(Locale.Home.DeleteChat)) {
+                  chatStore.deleteSession(chatStore.currentSessionIndex);
+                }
+              }}
+            />
+          </div>
+          <div className={styles["sidebar-action"]}>
+            <Link to={Path.Settings}>
+              <IconButton icon={<SettingsIcon />} shadow />
+            </Link>
+          </div>
+          <div className={styles["sidebar-action"]}>
+            <a target="_blank">
+              <IconButton icon={<GithubIcon />} shadow />
+            </a>
+          </div>
+        </div>
+        <div>
+          <IconButton
+            icon={<AddIcon />}
+            text={shouldNarrow ? undefined : Locale.Home.NewChat}
+            onClick={() => {
+              if (config.dontShowMaskSplashScreen) {
+                chatStore.newSession();
+                navigate(Path.Chat);
+              } else {
+                navigate(Path.NewChat);
+              }
+            }}
+            shadow
+          />
+        </div>
+      </div>
+
+      <div
+        className={styles["sidebar-drag"]}
+        onMouseDown={(e) => onDragMouseDown(e as any)}
+      ></div>
+    </div>
+  );
+}

app/components/ui-lib.module.scss

@@ -0,0 +1,203 @@
+@import "../styles/animation.scss";
+
+.card {
+  background-color: var(--white);
+  border-radius: 10px;
+  box-shadow: var(--card-shadow);
+  padding: 10px;
+}
+
+.popover {
+  position: relative;
+  z-index: 2;
+}
+
+.popover-content {
+  position: absolute;
+  animation: slide-in 0.3s ease;
+  right: 0;
+  top: calc(100% + 10px);
+}
+
+.popover-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+.list-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 40px;
+  border-bottom: var(--border-in-light);
+  padding: 10px 20px;
+  animation: slide-in ease 0.6s;
+
+  .list-header {
+    display: flex;
+    align-items: center;
+
+    .list-icon {
+      margin-right: 10px;
+    }
+
+    .list-item-title {
+      font-size: 14px;
+      font-weight: bolder;
+    }
+
+    .list-item-sub-title {
+      font-size: 12px;
+      font-weight: normal;
+    }
+  }
+}
+
+.list {
+  border: var(--border-in-light);
+  border-radius: 10px;
+  box-shadow: var(--card-shadow);
+  margin-bottom: 20px;
+  animation: slide-in ease 0.3s;
+}
+
+.list .list-item:last-child {
+  border: 0;
+}
+
+.modal-container {
+  box-shadow: var(--card-shadow);
+  background-color: var(--white);
+  border-radius: 12px;
+  width: 60vw;
+  animation: slide-in ease 0.3s;
+
+  --modal-padding: 20px;
+
+  .modal-header {
+    padding: var(--modal-padding);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: var(--border-in-light);
+
+    .modal-title {
+      font-weight: bolder;
+      font-size: 16px;
+    }
+
+    .modal-close-btn {
+      cursor: pointer;
+
+      &:hover {
+        filter: brightness(1.2);
+      }
+    }
+  }
+
+  .modal-content {
+    max-height: 40vh;
+    padding: var(--modal-padding);
+    overflow: auto;
+  }
+
+  .modal-footer {
+    padding: var(--modal-padding);
+    display: flex;
+    justify-content: flex-end;
+    border-top: var(--border-in-light);
+    box-shadow: var(--shadow);
+
+    .modal-actions {
+      display: flex;
+      align-items: center;
+
+      .modal-action {
+        &:not(:last-child) {
+          margin-right: 20px;
+        }
+      }
+    }
+  }
+}
+
+.show {
+  opacity: 1;
+  transition: all ease 0.3s;
+  transform: translateY(0);
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  animation: slide-in ease 0.6s;
+  z-index: 99999;
+}
+
+.hide {
+  opacity: 0;
+  transition: all ease 0.3s;
+  transform: translateY(20px);
+}
+
+.toast-container {
+  position: fixed;
+  bottom: 5vh;
+  left: 0;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+
+  .toast-content {
+    max-width: 80vw;
+    word-break: break-all;
+    font-size: 14px;
+    background-color: var(--white);
+    box-shadow: var(--card-shadow);
+    border: var(--border-in-light);
+    color: var(--black);
+    padding: 10px 20px;
+    border-radius: 50px;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    pointer-events: all;
+
+    .toast-action {
+      padding-left: 20px;
+      color: var(--primary);
+      opacity: 0.8;
+      border: 0;
+      background: none;
+      cursor: pointer;
+      font-family: inherit;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.input {
+  border: var(--border-in-light);
+  border-radius: 10px;
+  padding: 10px;
+  font-family: inherit;
+  background-color: var(--white);
+  color: var(--black);
+  resize: none;
+  min-width: 50px;
+}
+
+@media only screen and (max-width: 600px) {
+  .modal-container {
+    width: 90vw;
+
+    .modal-content {
+      max-height: 50vh;
+    }
+  }
+}

app/components/ui-lib.tsx

@@ -0,0 +1,246 @@
+import styles from "./ui-lib.module.scss";
+import LoadingIcon from "../icons/three-dots.svg";
+import CloseIcon from "../icons/close.svg";
+import EyeIcon from "../icons/eye.svg";
+import EyeOffIcon from "../icons/eye-off.svg";
+
+import { createRoot } from "react-dom/client";
+import React, { HTMLProps, useEffect, useState } from "react";
+import { IconButton } from "./button";
+
+export function Popover(props: {
+  children: JSX.Element;
+  content: JSX.Element;
+  open?: boolean;
+  onClose?: () => void;
+}) {
+  return (
+    <div className={styles.popover}>
+      {props.children}
+      {props.open && (
+        <div className={styles["popover-content"]}>
+          <div className={styles["popover-mask"]} onClick={props.onClose}></div>
+          {props.content}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function Card(props: { children: JSX.Element[]; className?: string }) {
+  return (
+    <div className={styles.card + " " + props.className}>{props.children}</div>
+  );
+}
+
+export function ListItem(props: {
+  title: string;
+  subTitle?: string;
+  children?: JSX.Element | JSX.Element[];
+  icon?: JSX.Element;
+  className?: string;
+}) {
+  return (
+    <div className={styles["list-item"] + ` ${props.className}`}>
+      <div className={styles["list-header"]}>
+        {props.icon && <div className={styles["list-icon"]}>{props.icon}</div>}
+        <div className={styles["list-item-title"]}>
+          <div>{props.title}</div>
+          {props.subTitle && (
+            <div className={styles["list-item-sub-title"]}>
+              {props.subTitle}
+            </div>
+          )}
+        </div>
+      </div>
+      {props.children}
+    </div>
+  );
+}
+
+export function List(props: {
+  children:
+    | Array<JSX.Element | null | undefined>
+    | JSX.Element
+    | null
+    | undefined;
+}) {
+  return <div className={styles.list}>{props.children}</div>;
+}
+
+export function Loading() {
+  return (
+    <div
+      style={{
+        height: "100vh",
+        width: "100vw",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <LoadingIcon />
+    </div>
+  );
+}
+
+interface ModalProps {
+  title: string;
+  children?: JSX.Element | JSX.Element[];
+  actions?: JSX.Element[];
+  onClose?: () => void;
+}
+export function Modal(props: ModalProps) {
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        props.onClose?.();
+      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className={styles["modal-container"]}>
+      <div className={styles["modal-header"]}>
+        <div className={styles["modal-title"]}>{props.title}</div>
+
+        <div className={styles["modal-close-btn"]} onClick={props.onClose}>
+          <CloseIcon />
+        </div>
+      </div>
+
+      <div className={styles["modal-content"]}>{props.children}</div>
+
+      <div className={styles["modal-footer"]}>
+        <div className={styles["modal-actions"]}>
+          {props.actions?.map((action, i) => (
+            <div key={i} className={styles["modal-action"]}>
+              {action}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function showModal(props: ModalProps) {
+  const div = document.createElement("div");
+  div.className = "modal-mask";
+  document.body.appendChild(div);
+
+  const root = createRoot(div);
+  const closeModal = () => {
+    props.onClose?.();
+    root.unmount();
+    div.remove();
+  };
+
+  div.onclick = (e) => {
+    if (e.target === div) {
+      closeModal();
+    }
+  };
+
+  root.render(<Modal {...props} onClose={closeModal}></Modal>);
+}
+
+export type ToastProps = {
+  content: string;
+  action?: {
+    text: string;
+    onClick: () => void;
+  };
+  onClose?: () => void;
+};
+
+export function Toast(props: ToastProps) {
+  return (
+    <div className={styles["toast-container"]}>
+      <div className={styles["toast-content"]}>
+        <span>{props.content}</span>
+        {props.action && (
+          <button
+            onClick={() => {
+              props.action?.onClick?.();
+              props.onClose?.();
+            }}
+            className={styles["toast-action"]}
+          >
+            {props.action.text}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function showToast(
+  content: string,
+  action?: ToastProps["action"],
+  delay = 3000,
+) {
+  const div = document.createElement("div");
+  div.className = styles.show;
+  document.body.appendChild(div);
+
+  const root = createRoot(div);
+  const close = () => {
+    div.classList.add(styles.hide);
+
+    setTimeout(() => {
+      root.unmount();
+      div.remove();
+    }, 300);
+  };
+
+  setTimeout(() => {
+    close();
+  }, delay);
+
+  root.render(<Toast content={content} action={action} onClose={close} />);
+}
+
+export type InputProps = React.HTMLProps<HTMLTextAreaElement> & {
+  autoHeight?: boolean;
+  rows?: number;
+};
+
+export function Input(props: InputProps) {
+  return (
+    <textarea
+      {...props}
+      className={`${styles["input"]} ${props.className}`}
+    ></textarea>
+  );
+}
+
+export function PasswordInput(props: HTMLProps<HTMLInputElement>) {
+  const [visible, setVisible] = useState(false);
+
+  function changeVisibility() {
+    setVisible(!visible);
+  }
+
+  return (
+    <div className={"password-input-container"}>
+      <IconButton
+        icon={visible ? <EyeIcon /> : <EyeOffIcon />}
+        onClick={changeVisibility}
+        className={"password-eye"}
+      />
+      <input
+        {...props}
+        type={visible ? "text" : "password"}
+        className={"password-input"}
+      />
+    </div>
+  );
+}

app/config/build.ts

@@ -0,0 +1,24 @@
+const COMMIT_ID: string = (() => {
+  try {
+    const childProcess = require("child_process");
+    return childProcess
+      .execSync('git log -1 --format="%at000" --date=unix')
+      .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,44 @@
+import md5 from "spark-md5";
+
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      OPENAI_API_KEY?: string;
+      CODE?: string;
+      PROXY_URL?: string;
+      VERCEL?: string;
+      HIDE_USER_API_KEY?: string; // disable user's api key input
+    }
+  }
+}
+
+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,
+    hideUserApiKey: !!process.env.HIDE_USER_API_KEY,
+  };
+};

app/constant.ts

@@ -0,0 +1,40 @@
+export const OWNER = "Yidadaa";
+export const REPO = "ChatGPT-Next-Web";
+export const REPO_URL = `https://github.com/${OWNER}/${REPO}`;
+export const ISSUE_URL = `https://github.com/${OWNER}/${REPO}/issues`;
+export const UPDATE_URL = `${REPO_URL}#keep-updated`;
+export const 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";
+
+export enum Path {
+  Home = "/",
+  Chat = "/chat",
+  Settings = "/settings",
+  NewChat = "/new-chat",
+  Masks = "/masks",
+}
+
+export enum SlotID {
+  AppBody = "app-body",
+}
+
+export enum FileName {
+  Masks = "masks.json",
+  Prompts = "prompts.json",
+}
+
+export enum StoreKey {
+  Chat = "chat-next-web-store",
+  Access = "access-control",
+  Config = "app-config",
+  Mask = "mask-store",
+  Prompt = "prompt-store",
+  Update = "chat-update",
+}
+
+export const MAX_SIDEBAR_WIDTH = 500;
+export const MIN_SIDEBAR_WIDTH = 230;
+export const NARROW_SIDEBAR_WIDTH = 100;
+
+export const ACCESS_CODE_PREFIX = "ak-";

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";