Spaces:

gdhdp
/

nova1

Configuration error

App Files Files Community

gdhdp commited on Sep 2, 2023

Commit

31abd2c

•

1 Parent(s): dc27afd

Upload 89 files

Browse files

This view is limited to 50 files because it contains too many changes. See raw diff

Files changed (50) hide show

.eslintignore +1 -0
.eslintrc.json +4 -0
.github/workflows/docker.yml +52 -0
.github/workflows/sync.yml +16 -0
.gitignore +39 -0
.gitpod.yml +11 -0
.husky/pre-commit +4 -0
.lintstagedrc.json +6 -0
.prettierrc.js +10 -0
.vscode/settings.json +4 -0
404.html +1632 -0
Dockerfile +40 -0
LICENSE +75 -0
README.md +204 -0
README.txt +22 -0
app/api/access.ts +17 -0
app/api/chat-stream/route.ts +52 -0
app/api/common.ts +22 -0
app/api/openai/route.ts +28 -0
app/api/openai/typing.ts +7 -0
app/components/button.module.scss +60 -0
app/components/button.tsx +28 -0
app/components/home.module.scss +456 -0
app/components/home.tsx +707 -0
app/components/markdown.tsx +42 -0
app/components/settings.module.scss +20 -0
app/components/settings.tsx +486 -0
app/components/ui-lib.module.scss +160 -0
app/components/ui-lib.tsx +142 -0
app/components/window.scss +35 -0
app/constant.ts +6 -0
app/icons/add.svg +23 -0
app/icons/bot.svg +28 -0
app/icons/brain.svg +25 -0
app/icons/chat.svg +27 -0
app/icons/chatgpt.svg +16 -0
app/icons/clear.svg +1 -0
app/icons/close.svg +21 -0
app/icons/copy.svg +1 -0
app/icons/delete.svg +12 -0
app/icons/download.svg +1 -0
app/icons/edit.svg +1 -0
app/icons/export.svg +1 -0
app/icons/github.svg +29 -0
app/icons/menu.svg +25 -0
app/icons/reload.svg +24 -0
app/icons/send-white.svg +21 -0
app/icons/settings.svg +21 -0
app/icons/three-dots.svg +33 -0
app/icons/user.svg +34 -0

.eslintignore ADDED Viewed

	@@ -0,0 +1 @@


1	+ public/serviceWorker.js

.eslintrc.json ADDED Viewed

	@@ -0,0 +1,4 @@

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

.github/workflows/docker.yml ADDED Viewed

	@@ -0,0 +1,52 @@

+name: Publish Docker image
+on:
+  workflow_dispatch:
+  release:
+    types: [published]
+jobs:
+  push_to_registry:
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-latest
+    steps:
+      -
+        name: Check out the repo
+        uses: actions/checkout@v3
+      -
+        name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      -
+        name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: yidadaa/chatgpt-next-web
+          tags: |
+            type=raw,value=latest
+            type=semver,pattern={{version}}
+      -
+        name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+      -
+        name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      -
+        name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          platforms: linux/amd64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.github/workflows/sync.yml ADDED Viewed

	@@ -0,0 +1,16 @@

+# .github/workflows/sync.yml
+name: Sync Fork
+on:
+    schedule:
+        - cron: "0 8 * * *" # 每天0点触发
+jobs:
+    repo-sync:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: TG908/fork-sync@v1.1
+              with:
+                  github_token: ${{ secrets.GITHUB_TOKEN }} # 这个 token action 会默认配置, 这里只需这样写就行
+                  owner: Yidadaa # fork 上游项目 owner
+                  head: main # fork 上游项目需要同步的分支
+                  base: main # 需要同步到本项目的目标分支

.gitignore ADDED Viewed

	@@ -0,0 +1,39 @@

+# 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

.gitpod.yml ADDED Viewed

	@@ -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

.husky/pre-commit ADDED Viewed

	@@ -0,0 +1,4 @@

+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+npx lint-staged

.lintstagedrc.json ADDED Viewed

	@@ -0,0 +1,6 @@

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

.prettierrc.js ADDED Viewed

	@@ -0,0 +1,10 @@

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

.vscode/settings.json ADDED Viewed

	@@ -0,0 +1,4 @@

+{
+  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

404.html ADDED Viewed

	@@ -0,0 +1,1632 @@

+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS 404页面- vfaner.com</title>
+<style>
+@import url("https://fonts.googleapis.com/css?family=Lato|Russo+One");
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+}
+body {
+  padding: 0;
+  margin: 0;
+}
+.container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+.container-star {
+  background-image: linear-gradient(to bottom, #292256 0%, #8446cf 70%, #a871d6 100%);
+}
+.container-star:after {
+  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(15, 10, 38, 0.2) 100%);
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+.star-1 {
+  position: absolute;
+  border-radius: 50%;
+  background-color: #ffffff;
+  -webkit-animation: twinkle 5s infinite ease-in-out;
+          animation: twinkle 5s infinite ease-in-out;
+}
+.star-1:after {
+  height: 100%;
+  width: 100%;
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+  content: "";
+  position: absolute;
+  background-color: #fff;
+  border-radius: 50%;
+}
+.star-1:before {
+  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);
+  position: absolute;
+  border-radius: 50%;
+  content: "";
+  top: -20%;
+  left: -50%;
+}
+.star-1:nth-of-type(1) {
+  top: 78vh;
+  left: 44vw;
+  width: 9px;
+  height: 3px;
+  -webkit-animation-delay: 4s;
+          animation-delay: 4s;
+}
+.star-1:nth-of-type(1):before {
+  width: 18px;
+  height: 18px;
+  top: -250%;
+}
+.star-1:nth-of-type(2) {
+  top: 94vh;
+  left: 67vw;
+  width: 6px;
+  height: 2px;
+  -webkit-animation-delay: 3s;
+          animation-delay: 3s;
+}
+.star-1:nth-of-type(2):before {
+  width: 12px;
+  height: 12px;
+  top: -250%;
+}
+.star-1:nth-of-type(3) {
+  top: 41vh;
+  left: 66vw;
+  width: 6px;
+  height: 2px;
+  -webkit-animation-delay: 1s;
+          animation-delay: 1s;
+}
+.star-1:nth-of-type(3):before {
+  width: 12px;
+  height: 12px;
+  top: -250%;
+}
+.star-1:nth-of-type(4) {
+  top: 72vh;
+  left: 77vw;
+  width: 9px;
+  height: 3px;
+  -webkit-animation-delay: 3s;
+          animation-delay: 3s;
+}
+.star-1:nth-of-type(4):before {
+  width: 18px;
+  height: 18px;
+  top: -250%;
+}
+.star-1:nth-of-type(5) {
+  top: 14vh;
+  left: 68vw;
+  width: 9px;
+  height: 3px;
+  -webkit-animation-delay: 4s;
+          animation-delay: 4s;
+}
+.star-1:nth-of-type(5):before {
+  width: 18px;
+  height: 18px;
+  top: -250%;
+}
+.star-1:nth-of-type(6) {
+  top: 26vh;
+  left: 79vw;
+  width: 6px;
+  height: 2px;
+  -webkit-animation-delay: 4s;
+          animation-delay: 4s;
+}
+.star-1:nth-of-type(6):before {
+  width: 12px;
+  height: 12px;
+  top: -250%;
+}
+.star-1:nth-of-type(7) {
+  top: 28vh;
+  left: 84vw;
+  width: 9px;
+  height: 3px;
+  -webkit-animation-delay: 1s;
+          animation-delay: 1s;
+}
+.star-1:nth-of-type(7):before {
+  width: 18px;
+  height: 18px;
+  top: -250%;
+}
+.star-1:nth-of-type(8) {
+  top: 42vh;
+  left: 28vw;
+  width: 4px;
+  height: 1.3333333333px;
+  -webkit-animation-delay: 3s;
+          animation-delay: 3s;
+}
+.star-1:nth-of-type(8):before {
+  width: 8px;
+  height: 8px;
+  top: -250%;
+}
+.star-1:nth-of-type(9) {
+  top: 7vh;
+  left: 99vw;
+  width: 7px;
+  height: 2.3333333333px;
+  -webkit-animation-delay: 1s;
+          animation-delay: 1s;
+}
+.star-1:nth-of-type(9):before {
+  width: 14px;
+  height: 14px;
+  top: -250%;
+}
+.star-1:nth-of-type(10) {
+  top: 97vh;
+  left: 76vw;
+  width: 4px;
+  height: 1.3333333333px;
+  -webkit-animation-delay: 2s;
+          animation-delay: 2s;
+}
+.star-1:nth-of-type(10):before {
+  width: 8px;
+  height: 8px;
+  top: -250%;
+}
+.star-1:nth-of-type(11) {
+  top: 76vh;
+  left: 89vw;
+  width: 9px;
+  height: 3px;
+  -webkit-animation-delay: 4s;
+          animation-delay: 4s;
+}
+.star-1:nth-of-type(11):before {
+  width: 18px;
+  height: 18px;
+  top: -250%;
+}
+.star-1:nth-of-type(12) {
+  top: 16vh;
+  left: 92vw;
+  width: 8px;
+  height: 2.6666666667px;
+  -webkit-animation-delay: 1s;
+          animation-delay: 1s;
+}
+.star-1:nth-of-type(12):before {
+  width: 16px;
+  height: 16px;
+  top: -250%;
+}
+.star-1:nth-of-type(13) {
+  top: 78vh;
+  left: 33vw;
+  width: 6px;
+  height: 2px;
+  -webkit-animation-delay: 4s;
+          animation-delay: 4s;
+}
+.star-1:nth-of-type(13):before {
+  width: 12px;
+  height: 12px;
+  top: -250%;
+}
+.star-1:nth-of-type(14) {
+  top: 12vh;
+  left: 67vw;
+  width: 7px;
+  height: 2.3333333333px;
+  -webkit-animation-delay: 5s;
+          animation-delay: 5s;
+}
+.star-1:nth-of-type(14):before {
+  width: 14px;
+  height: 14px;
+  top: -250%;
+}
+.star-1:nth-of-type(15) {
+  top: 64vh;
+  left: 51vw;
+  width: 4px;
+  height: 1.3333333333px;
+  -webkit-animation-delay: 4s;
+          animation-delay: 4s;
+}
+.star-1:nth-of-type(15):before {
+  width: 8px;
+  height: 8px;
+  top: -250%;
+}
+.star-1:nth-of-type(16) {
+  top: 71vh;
+  left: 95vw;
+  width: 4px;
+  height: 1.3333333333px;
+  -webkit-animation-delay: 4s;
+          animation-delay: 4s;
+}
+.star-1:nth-of-type(16):before {
+  width: 8px;
+  height: 8px;
+  top: -250%;
+}
+.star-1:nth-of-type(17) {
+  top: 56vh;
+  left: 31vw;
+  width: 7px;
+  height: 2.3333333333px;
+  -webkit-animation-delay: 2s;
+          animation-delay: 2s;
+}
+.star-1:nth-of-type(17):before {
+  width: 14px;
+  height: 14px;
+  top: -250%;
+}
+.star-1:nth-of-type(18) {
+  top: 33vh;
+  left: 80vw;
+  width: 6px;
+  height: 2px;
+  -webkit-animation-delay: 5s;
+          animation-delay: 5s;
+}
+.star-1:nth-of-type(18):before {
+  width: 12px;
+  height: 12px;
+  top: -250%;
+}
+.star-1:nth-of-type(19) {
+  top: 30vh;
+  left: 14vw;
+  width: 8px;
+  height: 2.6666666667px;
+  -webkit-animation-delay: 5s;
+          animation-delay: 5s;
+}
+.star-1:nth-of-type(19):before {
+  width: 16px;
+  height: 16px;
+  top: -250%;
+}
+.star-1:nth-of-type(20) {
+  top: 53vh;
+  left: 43vw;
+  width: 6px;
+  height: 2px;
+  -webkit-animation-delay: 3s;
+          animation-delay: 3s;
+}
+.star-1:nth-of-type(20):before {
+  width: 12px;
+  height: 12px;
+  top: -250%;
+}
+.star-1:nth-of-type(21) {
+  top: 32vh;
+  left: 9vw;
+  width: 7px;
+  height: 2.3333333333px;
+  -webkit-animation-delay: 2s;
+          animation-delay: 2s;
+}
+.star-1:nth-of-type(21):before {
+  width: 14px;
+  height: 14px;
+  top: -250%;
+}
+.star-1:nth-of-type(22) {
+  top: 97vh;
+  left: 9vw;
+  width: 5px;
+  height: 1.6666666667px;
+  -webkit-animation-delay: 2s;
+          animation-delay: 2s;
+}
+.star-1:nth-of-type(22):before {
+  width: 10px;
+  height: 10px;
+  top: -250%;
+}
+.star-1:nth-of-type(23) {
+  top: 62vh;
+  left: 6vw;
+  width: 5px;
+  height: 1.6666666667px;
+  -webkit-animation-delay: 4s;
+          animation-delay: 4s;
+}
+.star-1:nth-of-type(23):before {
+  width: 10px;
+  height: 10px;
+  top: -250%;
+}
+.star-1:nth-of-type(24) {
+  top: 57vh;
+  left: 13vw;
+  width: 9px;
+  height: 3px;
+  -webkit-animation-delay: 3s;
+          animation-delay: 3s;
+}
+.star-1:nth-of-type(24):before {
+  width: 18px;
+  height: 18px;
+  top: -250%;
+}
+.star-1:nth-of-type(25) {
+  top: 52vh;
+  left: 60vw;
+  width: 4px;
+  height: 1.3333333333px;
+  -webkit-animation-delay: 5s;
+          animation-delay: 5s;
+}
+.star-1:nth-of-type(25):before {
+  width: 8px;
+  height: 8px;
+  top: -250%;
+}
+.star-1:nth-of-type(26) {
+  top: 5vh;
+  left: 84vw;
+  width: 5px;
+  height: 1.6666666667px;
+  -webkit-animation-delay: 1s;
+          animation-delay: 1s;
+}
+.star-1:nth-of-type(26):before {
+  width: 10px;
+  height: 10px;
+  top: -250%;
+}
+.star-1:nth-of-type(27) {
+  top: 26vh;
+  left: 23vw;
+  width: 8px;
+  height: 2.6666666667px;
+  -webkit-animation-delay: 5s;
+          animation-delay: 5s;
+}
+.star-1:nth-of-type(27):before {
+  width: 16px;
+  height: 16px;
+  top: -250%;
+}
+.star-1:nth-of-type(28) {
+  top: 34vh;
+  left: 3vw;
+  width: 4px;
+  height: 1.3333333333px;
+  -webkit-animation-delay: 4s;
+          animation-delay: 4s;
+}
+.star-1:nth-of-type(28):before {
+  width: 8px;
+  height: 8px;
+  top: -250%;
+}
+.star-1:nth-of-type(29) {
+  top: 40vh;
+  left: 58vw;
+  width: 6px;
+  height: 2px;
+  -webkit-animation-delay: 4s;
+          animation-delay: 4s;
+}
+.star-1:nth-of-type(29):before {
+  width: 12px;
+  height: 12px;
+  top: -250%;
+}
+.star-1:nth-of-type(30) {
+  top: 17vh;
+  left: 55vw;
+  width: 5px;
+  height: 1.6666666667px;
+  -webkit-animation-delay: 5s;
+          animation-delay: 5s;
+}
+.star-1:nth-of-type(30):before {
+  width: 10px;
+  height: 10px;
+  top: -250%;
+}
+.star-2 {
+  position: absolute;
+  border-radius: 50%;
+  background-color: #ffffff;
+  -webkit-animation: twinkle 5s infinite ease-in-out;
+          animation: twinkle 5s infinite ease-in-out;
+}
+.star-2:nth-of-type(31) {
+  top: 70vh;
+  left: 96vw;
+  width: 2px;
+  height: 2px;
+  -webkit-animation-delay: 2s;
+          animation-delay: 2s;
+}
+.star-2:nth-of-type(31):before {
+  width: 4px;
+  height: 4px;
+  top: -250%;
+}
+.star-2:nth-of-type(32) {
+  top: 88vh;
+  left: 57vw;
+  width: 3px;
+  height: 3px;
+  -webkit-animation-delay: 4s;
+          animation-delay: 4s;
+}
+.star-2:nth-of-type(32):before {
+  width: 6px;
+  height: 6px;
+  top: -250%;
+}
+.star-2:nth-of-type(33) {
+  top: 59vh;
+  left: 48vw;
+  width: 3px;
+  height: 3px;
+  -webkit-animation-delay: 2s;
+          animation-delay: 2s;
+}
+.star-2:nth-of-type(33):before {
+  width: 6px;
+  height: 6px;
+  top: -250%;
+}
+.star-2:nth-of-type(34) {
+  top: 2vh;
+  left: 83vw;
+  width: 2px;
+  height: 2px;
+  -webkit-animation-delay: 2s;
+          animation-delay: 2s;
+}
+.star-2:nth-of-type(34):before {
+  width: 4px;
+  height: 4px;
+  top: -250%;
+}
+.star-2:nth-of-type(35) {
+  top: 8vh;
+  left: 75vw;
+  width: 4px;
+  height: 4px;
+  -webkit-animation-delay: 3s;
+          animation-delay: 3s;
+}
+.star-2:nth-of-type(35):before {
+  width: 8px;
+  height: 8px;
+  top: -250%;
+}
+.star-2:nth-of-type(36) {
+  top: 78vh;
+  left: 8vw;
+  width: 3px;
+  height: 3px;
+  -webkit-animation-delay: 1s;
+          animation-delay: 1s;
+}
+.star-2:nth-of-type(36):before {
+  width: 6px;
+  height: 6px;
+  top: -250%;
+}
+.star-2:nth-of-type(37) {
+  top: 72vh;
+  left: 98vw;
+  width: 2px;
+  height: 2px;
+  -webkit-animation-delay: 2s;
+          animation-delay: 2s;
+}
+.star-2:nth-of-type(37):before {
+  width: 4px;
+  height: 4px;
+  top: -250%;
+}
+.star-2:nth-of-type(38) {
+  top: 34vh;
+  left: 41vw;
+  width: 3px;
+  height: 3px;
+  -webkit-animation-delay: 5s;
+          animation-delay: 5s;
+}
+.star-2:nth-of-type(38):before {
+  width: 6px;
+  height: 6px;
+  top: -250%;
+}
+.star-2:nth-of-type(39) {
+  top: 13vh;
+  left: 5vw;
+  width: 4px;
+  height: 4px;
+  -webkit-animation-delay: 2s;
+          animation-delay: 2s;
+}
+.star-2:nth-of-type(39):before {
+  width: 8px;
+  height: 8px;
+  top: -250%;
+}
+.star-2:nth-of-type(40) {
+  top: 5vh;
+  left: 86vw;
+  width: 2px;
+  height: 2px;
+  -webkit-animation-delay: 4s;
+          animation-delay: 4s;
+}
+.star-2:nth-of-type(40):before {
+  width: 4px;
+  height: 4px;
+  top: -250%;
+}
+.star-2:nth-of-type(41) {
+  top: 7vh;
+  left: 62vw;
+  width: 3px;
+  height: 3px;
+  -webkit-animation-delay: 2s;
+          animation-delay: 2s;
+}
+.star-2:nth-of-type(41):before {
+  width: 6px;
+  height: 6px;
+  top: -250%;
+}
+.star-2:nth-of-type(42) {
+  top: 36vh;
+  left: 44vw;
+  width: 2px;
+  height: 2px;
+  -webkit-animation-delay: 2s;
+          animation-delay: 2s;
+}
+.star-2:nth-of-type(42):before {
+  width: 4px;
+  height: 4px;
+  top: -250%;
+}
+.star-2:nth-of-type(43) {
+  top: 74vh;
+  left: 47vw;
+  width: 3px;
+  height: 3px;
+  -webkit-animation-delay: 1s;
+          animation-delay: 1s;
+}
+.star-2:nth-of-type(43):before {
+  width: 6px;
+  height: 6px;
+  top: -250%;
+}
+.star-2:nth-of-type(44) {
+  top: 72vh;
+  left: 86vw;
+  width: 2px;
+  height: 2px;
+  -webkit-animation-delay: 4s;
+          animation-delay: 4s;
+}
+.star-2:nth-of-type(44):before {
+  width: 4px;
+  height: 4px;
+  top: -250%;
+}
+.star-2:nth-of-type(45) {
+  top: 26vh;
+  left: 40vw;
+  width: 4px;
+  height: 4px;
+  -webkit-animation-delay: 2s;
+          animation-delay: 2s;
+}
+.star-2:nth-of-type(45):before {
+  width: 8px;
+  height: 8px;
+  top: -250%;
+}
+.star-2:nth-of-type(46) {
+  top: 41vh;
+  left: 39vw;
+  width: 3px;
+  height: 3px;
+  -webkit-animation-delay: 2s;
+          animation-delay: 2s;
+}
+.star-2:nth-of-type(46):before {
+  width: 6px;
+  height: 6px;
+  top: -250%;
+}
+.star-2:nth-of-type(47) {
+  top: 16vh;
+  left: 36vw;
+  width: 4px;
+  height: 4px;
+  -webkit-animation-delay: 4s;
+          animation-delay: 4s;
+}
+.star-2:nth-of-type(47):before {
+  width: 8px;
+  height: 8px;
+  top: -250%;
+}
+.star-2:nth-of-type(48) {
+  top: 96vh;
+  left: 37vw;
+  width: 4px;
+  height: 4px;
+  -webkit-animation-delay: 3s;
+          animation-delay: 3s;
+}
+.star-2:nth-of-type(48):before {
+  width: 8px;
+  height: 8px;
+  top: -250%;
+}
+.star-2:nth-of-type(49) {
+  top: 18vh;
+  left: 8vw;
+  width: 4px;
+  height: 4px;
+  -webkit-animation-delay: 1s;
+          animation-delay: 1s;
+}
+.star-2:nth-of-type(49):before {
+  width: 8px;
+  height: 8px;
+  top: -250%;
+}
+.star-2:nth-of-type(50) {
+  top: 56vh;
+  left: 31vw;
+  width: 4px;
+  height: 4px;
+  -webkit-animation-delay: 4s;
+          animation-delay: 4s;
+}
+.star-2:nth-of-type(50):before {
+  width: 8px;
+  height: 8px;
+  top: -250%;
+}
+.star-2:nth-of-type(51) {
+  top: 24vh;
+  left: 69vw;
+  width: 3px;
+  height: 3px;
+  -webkit-animation-delay: 3s;
+          animation-delay: 3s;
+}
+.star-2:nth-of-type(51):before {
+  width: 6px;
+  height: 6px;
+  top: -250%;
+}
+.star-2:nth-of-type(52) {
+  top: 52vh;
+  left: 17vw;
+  width: 3px;
+  height: 3px;
+  -webkit-animation-delay: 3s;
+          animation-delay: 3s;
+}
+.star-2:nth-of-type(52):before {
+  width: 6px;
+  height: 6px;
+  top: -250%;
+}
+.star-2:nth-of-type(53) {
+  top: 35vh;
+  left: 59vw;
+  width: 2px;
+  height: 2px;
+  -webkit-animation-delay: 3s;
+          animation-delay: 3s;
+}
+.star-2:nth-of-type(53):before {
+  width: 4px;
+  height: 4px;
+  top: -250%;
+}
+.star-2:nth-of-type(54) {
+  top: 46vh;
+  left: 73vw;
+  width: 4px;
+  height: 4px;
+  -webkit-animation-delay: 2s;
+          animation-delay: 2s;
+}
+.star-2:nth-of-type(54):before {
+  width: 8px;
+  height: 8px;
+  top: -250%;
+}
+.star-2:nth-of-type(55) {
+  top: 38vh;
+  left: 35vw;
+  width: 4px;
+  height: 4px;
+  -webkit-animation-delay: 1s;
+          animation-delay: 1s;
+}
+.star-2:nth-of-type(55):before {
+  width: 8px;
+  height: 8px;
+  top: -250%;
+}
+.star-2:nth-of-type(56) {
+  top: 34vh;
+  left: 66vw;
+  width: 3px;
+  height: 3px;
+  -webkit-animation-delay: 2s;
+          animation-delay: 2s;
+}
+.star-2:nth-of-type(56):before {
+  width: 6px;
+  height: 6px;
+  top: -250%;
+}
+.star-2:nth-of-type(57) {
+  top: 80vh;
+  left: 76vw;
+  width: 3px;
+  height: 3px;
+  -webkit-animation-delay: 5s;
+          animation-delay: 5s;
+}
+.star-2:nth-of-type(57):before {
+  width: 6px;
+  height: 6px;
+  top: -250%;
+}
+.star-2:nth-of-type(58) {
+  top: 45vh;
+  left: 49vw;
+  width: 2px;
+  height: 2px;
+  -webkit-animation-delay: 3s;
+          animation-delay: 3s;
+}
+.star-2:nth-of-type(58):before {
+  width: 4px;
+  height: 4px;
+  top: -250%;
+}
+.star-2:nth-of-type(59) {
+  top: 8vh;
+  left: 4vw;
+  width: 4px;
+  height: 4px;
+  -webkit-animation-delay: 1s;
+          animation-delay: 1s;
+}
+.star-2:nth-of-type(59):before {
+  width: 8px;
+  height: 8px;
+  top: -250%;
+}
+.star-2:nth-of-type(60) {
+  top: 71vh;
+  left: 93vw;
+  width: 2px;
+  height: 2px;
+  -webkit-animation-delay: 3s;
+          animation-delay: 3s;
+}
+.star-2:nth-of-type(60):before {
+  width: 4px;
+  height: 4px;
+  top: -250%;
+}
+.container-title {
+  width: 600px;
+  height: 450px;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  position: absolute;
+  color: white;
+  line-height: 1;
+  font-weight: 700;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  display: flex;
+}
+.title > * {
+  display: inline-block;
+  font-size: 200px;
+}
+.number {
+  text-shadow: 20px 20px 20px rgba(0, 0, 0, 0.2);
+  padding: 0 0.2em;
+  font-family: 'Russo One', sans-serif;
+}
+.subtitle {
+  font-size: 25px;
+  margin-top: 1.5em;
+  font-family: "Lato", sans-serif;
+  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
+}
+button {
+  font-size: 22px;
+  margin-top: 1.5em;
+  padding: 0.5em 1em;
+  letter-spacing: 1px;
+  font-family: "Lato", sans-serif;
+  color: white;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  z-index: 999;
+  border: 2px solid white;
+  border-radius: 5px;
+  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
+  transition: opacity 0.2s ease;
+}
+button:hover {
+  opacity: 0.7;
+}
+button:focus {
+  outline: 0;
+}
+.moon {
+  position: relative;
+  border-radius: 50%;
+  width: 160px;
+  height: 160px;
+  z-index: 2;
+  background-color: #fff;
+  box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 70px #fff, 0 0 80px #fff, 0 0 100px #ff1177;
+  -webkit-animation: rotate 5s ease-in-out infinite;
+          animation: rotate 5s ease-in-out infinite;
+}
+.moon .face {
+  top: 60%;
+  left: 47%;
+  position: absolute;
+}
+.moon .face .mouth {
+  border-top-left-radius: 50%;
+  border-bottom-right-radius: 50%;
+  border-top-right-radius: 50%;
+  background-color: #5c3191;
+  width: 25px;
+  height: 25px;
+  position: absolute;
+  -webkit-animation: snore 5s ease-in-out infinite;
+          animation: snore 5s ease-in-out infinite;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+  box-shadow: inset -4px -4px 4px rgba(0, 0, 0, 0.3);
+}
+.moon .face .eyes {
+  position: absolute;
+  top: -30px;
+  left: -30px;
+}
+.moon .face .eyes .eye-left,
+.moon .face .eyes .eye-right {
+  border: 4px solid #5c3191;
+  width: 30px;
+  height: 15px;
+  border-bottom-left-radius: 100px;
+  border-bottom-right-radius: 100px;
+  border-top: 0;
+  position: absolute;
+}
+.moon .face .eyes .eye-left:before, .moon .face .eyes .eye-left:after,
+.moon .face .eyes .eye-right:before,
+.moon .face .eyes .eye-right:after {
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+  width: 4px;
+  height: 4px;
+  background-color: #5c3191;
+  top: -2px;
+  left: -4px;
+}
+.moon .face .eyes .eye-left:after,
+.moon .face .eyes .eye-right:after {
+  left: auto;
+  right: -4px;
+}
+.moon .face .eyes .eye-right {
+  left: 50px;
+}
+.container-bird {
+  -webkit-perspective: 2000px;
+          perspective: 2000px;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.bird {
+  position: absolute;
+  z-index: 1000;
+  left: 50%;
+  top: 50%;
+  height: 40px;
+  width: 50px;
+  -webkit-transform: translate3d(-100vw, 0, 0) rotateY(90deg);
+          transform: translate3d(-100vw, 0, 0) rotateY(90deg);
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+}
+.bird-container {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  -webkit-transform: translate3d(50px, 30px, -300px);
+          transform: translate3d(50px, 30px, -300px);
+}
+.wing {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 3px;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  -webkit-transform-origin: center bottom;
+          transform-origin: center bottom;
+  z-index: 300;
+}
+.wing-left {
+  background: linear-gradient(to bottom, #a58dc4 0%, #7979a8 100%);
+  -webkit-transform: translate3d(0, 0, 0) rotateX(-30deg);
+          transform: translate3d(0, 0, 0) rotateX(-30deg);
+  -webkit-animation: wingLeft 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
+          animation: wingLeft 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
+}
+.wing-right {
+  background: linear-gradient(to bottom, #d9d3e2 0%, #b8a5d1 100%);
+  -webkit-transform: translate3d(0, 0, 0) rotateX(-30deg);
+          transform: translate3d(0, 0, 0) rotateX(-30deg);
+  -webkit-animation: wingRight 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
+          animation: wingRight 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
+}
+.wing-right-top,
+.wing-left-top {
+  border-right: 25px solid transparent;
+  border-left: 25px solid transparent;
+  top: -20px;
+  width: 100%;
+  position: absolute;
+  -webkit-transform-origin: 100% 100%;
+          transform-origin: 100% 100%;
+}
+.wing-right-top {
+  border-bottom: 20px solid #b8a5d1;
+  -webkit-transform: translate3d(0, 0, 0) rotateX(60deg);
+          transform: translate3d(0, 0, 0) rotateX(60deg);
+  -webkit-animation: wingRightTop 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
+          animation: wingRightTop 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
+}
+.wing-left-top {
+  border-bottom: 20px solid #7979a8;
+  -webkit-transform: translate3d(0, 0, 0) rotateX(-60deg);
+          transform: translate3d(0, 0, 0) rotateX(-60deg);
+  -webkit-animation: wingLeftTop 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
+          animation: wingLeftTop 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
+}
+.bird-anim:nth-child(1) {
+  -webkit-animation: bird1 30s linear infinite forwards;
+          animation: bird1 30s linear infinite forwards;
+}
+.bird-anim:nth-child(2) {
+  -webkit-animation: bird2 30s linear infinite forwards;
+          animation: bird2 30s linear infinite forwards;
+  -webkit-animation-delay: 3s;
+          animation-delay: 3s;
+  z-index: -1;
+}
+.bird-anim:nth-child(3) {
+  -webkit-animation: bird3 30s linear infinite forwards;
+          animation: bird3 30s linear infinite forwards;
+  -webkit-animation-delay: 5s;
+          animation-delay: 5s;
+}
+.bird-anim:nth-child(4) {
+  -webkit-animation: bird4 30s linear infinite forwards;
+          animation: bird4 30s linear infinite forwards;
+  -webkit-animation-delay: 7s;
+          animation-delay: 7s;
+}
+.bird-anim:nth-child(5) {
+  -webkit-animation: bird5 30s linear infinite forwards;
+          animation: bird5 30s linear infinite forwards;
+  -webkit-animation-delay: 14s;
+          animation-delay: 14s;
+}
+.bird-anim:nth-child(6) {
+  -webkit-animation: bird6 30s linear infinite forwards;
+          animation: bird6 30s linear infinite forwards;
+  -webkit-animation-delay: 10s;
+          animation-delay: 10s;
+  z-index: -1;
+}
+@-webkit-keyframes rotate {
+  0%, 100% {
+    -webkit-transform: rotate(-8deg);
+            transform: rotate(-8deg);
+  }
+  50% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+}
+@keyframes rotate {
+  0%, 100% {
+    -webkit-transform: rotate(-8deg);
+            transform: rotate(-8deg);
+  }
+  50% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+}
+@-webkit-keyframes snore {
+  0%, 100% {
+    -webkit-transform: scale(1) rotate(30deg);
+            transform: scale(1) rotate(30deg);
+  }
+  50% {
+    -webkit-transform: scale(0.5) rotate(30deg);
+            transform: scale(0.5) rotate(30deg);
+    border-bottom-left-radius: 50%;
+  }
+}
+@keyframes snore {
+  0%, 100% {
+    -webkit-transform: scale(1) rotate(30deg);
+            transform: scale(1) rotate(30deg);
+  }
+  50% {
+    -webkit-transform: scale(0.5) rotate(30deg);
+            transform: scale(0.5) rotate(30deg);
+    border-bottom-left-radius: 50%;
+  }
+}
+@-webkit-keyframes twinkle {
+  0%, 100% {
+    opacity: 0.7;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+@keyframes twinkle {
+  0%, 100% {
+    opacity: 0.7;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+@-webkit-keyframes wingLeft {
+  0%, 100% {
+    -webkit-transform: translate3d(0, 0, 0) rotateX(-50deg);
+            transform: translate3d(0, 0, 0) rotateX(-50deg);
+  }
+  50% {
+    -webkit-transform: translate3d(0, -20px, 0) rotateX(-130deg);
+            transform: translate3d(0, -20px, 0) rotateX(-130deg);
+    background: linear-gradient(to bottom, #d9d3e2 0%, #b8a5d1 100%);
+  }
+}
+@keyframes wingLeft {
+  0%, 100% {
+    -webkit-transform: translate3d(0, 0, 0) rotateX(-50deg);
+            transform: translate3d(0, 0, 0) rotateX(-50deg);
+  }
+  50% {
+    -webkit-transform: translate3d(0, -20px, 0) rotateX(-130deg);
+            transform: translate3d(0, -20px, 0) rotateX(-130deg);
+    background: linear-gradient(to bottom, #d9d3e2 0%, #b8a5d1 100%);
+  }
+}
+@-webkit-keyframes wingLeftTop {
+  0%, 100% {
+    -webkit-transform: translate3d(0, 0, 0) rotateX(-10deg);
+            transform: translate3d(0, 0, 0) rotateX(-10deg);
+  }
+  50% {
+    -webkit-transform: translate3d(0px, 0px, 0) rotateX(-40deg);
+            transform: translate3d(0px, 0px, 0) rotateX(-40deg);
+    border-bottom: 20px solid #b8a5d1;
+  }
+}
+@keyframes wingLeftTop {
+  0%, 100% {
+    -webkit-transform: translate3d(0, 0, 0) rotateX(-10deg);
+            transform: translate3d(0, 0, 0) rotateX(-10deg);
+  }
+  50% {
+    -webkit-transform: translate3d(0px, 0px, 0) rotateX(-40deg);
+            transform: translate3d(0px, 0px, 0) rotateX(-40deg);
+    border-bottom: 20px solid #b8a5d1;
+  }
+}
+@-webkit-keyframes wingRight {
+  0%, 100% {
+    -webkit-transform: translate3d(0, 0, 0) rotateX(50deg);
+            transform: translate3d(0, 0, 0) rotateX(50deg);
+  }
+  50% {
+    -webkit-transform: translate3d(0, -20px, 0) rotateX(130deg);
+            transform: translate3d(0, -20px, 0) rotateX(130deg);
+    background: linear-gradient(to bottom, #a58dc4 0%, #7979a8 100%);
+  }
+}
+@keyframes wingRight {
+  0%, 100% {
+    -webkit-transform: translate3d(0, 0, 0) rotateX(50deg);
+            transform: translate3d(0, 0, 0) rotateX(50deg);
+  }
+  50% {
+    -webkit-transform: translate3d(0, -20px, 0) rotateX(130deg);
+            transform: translate3d(0, -20px, 0) rotateX(130deg);
+    background: linear-gradient(to bottom, #a58dc4 0%, #7979a8 100%);
+  }
+}
+@-webkit-keyframes wingRightTop {
+  0%, 100% {
+    -webkit-transform: translate3d(0, 0, 0) rotateX(10deg);
+            transform: translate3d(0, 0, 0) rotateX(10deg);
+  }
+  50% {
+    -webkit-transform: translate3d(0px, 0px, 0px) rotateX(40deg);
+            transform: translate3d(0px, 0px, 0px) rotateX(40deg);
+    border-bottom: 20px solid #7979a8;
+  }
+}
+@keyframes wingRightTop {
+  0%, 100% {
+    -webkit-transform: translate3d(0, 0, 0) rotateX(10deg);
+            transform: translate3d(0, 0, 0) rotateX(10deg);
+  }
+  50% {
+    -webkit-transform: translate3d(0px, 0px, 0px) rotateX(40deg);
+            transform: translate3d(0px, 0px, 0px) rotateX(40deg);
+    border-bottom: 20px solid #7979a8;
+  }
+}
+@-webkit-keyframes bird1 {
+  0% {
+    -webkit-transform: translate3d(-120vw, -20px, -1000px) rotateY(-40deg) rotateX(0deg);
+            transform: translate3d(-120vw, -20px, -1000px) rotateY(-40deg) rotateX(0deg);
+  }
+  100% {
+    -webkit-transform: translate3d(100vw, -40vh, 1000px) rotateY(-40deg) rotateX(0deg);
+            transform: translate3d(100vw, -40vh, 1000px) rotateY(-40deg) rotateX(0deg);
+  }
+}
+@keyframes bird1 {
+  0% {
+    -webkit-transform: translate3d(-120vw, -20px, -1000px) rotateY(-40deg) rotateX(0deg);
+            transform: translate3d(-120vw, -20px, -1000px) rotateY(-40deg) rotateX(0deg);
+  }
+  100% {
+    -webkit-transform: translate3d(100vw, -40vh, 1000px) rotateY(-40deg) rotateX(0deg);
+            transform: translate3d(100vw, -40vh, 1000px) rotateY(-40deg) rotateX(0deg);
+  }
+}
+@-webkit-keyframes bird2 {
+  0%,
+	15% {
+    -webkit-transform: translate3d(100vw, -300px, -1000px) rotateY(10deg) rotateX(0deg);
+            transform: translate3d(100vw, -300px, -1000px) rotateY(10deg) rotateX(0deg);
+  }
+  100% {
+    -webkit-transform: translate3d(-100vw, -20px, -1000px) rotateY(10deg) rotateX(0deg);
+            transform: translate3d(-100vw, -20px, -1000px) rotateY(10deg) rotateX(0deg);
+  }
+}
+@keyframes bird2 {
+  0%,
+	15% {
+    -webkit-transform: translate3d(100vw, -300px, -1000px) rotateY(10deg) rotateX(0deg);
+            transform: translate3d(100vw, -300px, -1000px) rotateY(10deg) rotateX(0deg);
+  }
+  100% {
+    -webkit-transform: translate3d(-100vw, -20px, -1000px) rotateY(10deg) rotateX(0deg);
+            transform: translate3d(-100vw, -20px, -1000px) rotateY(10deg) rotateX(0deg);
+  }
+}
+@-webkit-keyframes bird3 {
+  0% {
+    -webkit-transform: translate3d(100vw, -50vh, 100px) rotateY(-5deg) rotateX(-20deg);
+            transform: translate3d(100vw, -50vh, 100px) rotateY(-5deg) rotateX(-20deg);
+  }
+  100% {
+    -webkit-transform: translate3d(-100vw, -10vh, 100px) rotateY(-5deg) rotateX(-20deg);
+            transform: translate3d(-100vw, -10vh, 100px) rotateY(-5deg) rotateX(-20deg);
+  }
+}
+@keyframes bird3 {
+  0% {
+    -webkit-transform: translate3d(100vw, -50vh, 100px) rotateY(-5deg) rotateX(-20deg);
+            transform: translate3d(100vw, -50vh, 100px) rotateY(-5deg) rotateX(-20deg);
+  }
+  100% {
+    -webkit-transform: translate3d(-100vw, -10vh, 100px) rotateY(-5deg) rotateX(-20deg);
+            transform: translate3d(-100vw, -10vh, 100px) rotateY(-5deg) rotateX(-20deg);
+  }
+}
+@-webkit-keyframes bird4 {
+  0% {
+    -webkit-transform: translate3d(100vw, 30vh, 200px) rotateY(-5deg) rotateX(10deg);
+            transform: translate3d(100vw, 30vh, 200px) rotateY(-5deg) rotateX(10deg);
+  }
+  100% {
+    -webkit-transform: translate3d(-100vw, -30vh, 200px) rotateY(-5deg) rotateX(10deg);
+            transform: translate3d(-100vw, -30vh, 200px) rotateY(-5deg) rotateX(10deg);
+  }
+}
+@keyframes bird4 {
+  0% {
+    -webkit-transform: translate3d(100vw, 30vh, 200px) rotateY(-5deg) rotateX(10deg);
+            transform: translate3d(100vw, 30vh, 200px) rotateY(-5deg) rotateX(10deg);
+  }
+  100% {
+    -webkit-transform: translate3d(-100vw, -30vh, 200px) rotateY(-5deg) rotateX(10deg);
+            transform: translate3d(-100vw, -30vh, 200px) rotateY(-5deg) rotateX(10deg);
+  }
+}
+@-webkit-keyframes bird5 {
+  0%,
+	5% {
+    -webkit-transform: translate3d(100vw, 30vh, 400px) rotateY(-15deg) rotateX(-10deg);
+            transform: translate3d(100vw, 30vh, 400px) rotateY(-15deg) rotateX(-10deg);
+  }
+  100% {
+    -webkit-transform: translate3d(-100vw, 10vh, 400px) rotateY(-15deg) rotateX(-10deg);
+            transform: translate3d(-100vw, 10vh, 400px) rotateY(-15deg) rotateX(-10deg);
+  }
+}
+@keyframes bird5 {
+  0%,
+	5% {
+    -webkit-transform: translate3d(100vw, 30vh, 400px) rotateY(-15deg) rotateX(-10deg);
+            transform: translate3d(100vw, 30vh, 400px) rotateY(-15deg) rotateX(-10deg);
+  }
+  100% {
+    -webkit-transform: translate3d(-100vw, 10vh, 400px) rotateY(-15deg) rotateX(-10deg);
+            transform: translate3d(-100vw, 10vh, 400px) rotateY(-15deg) rotateX(-10deg);
+  }
+}
+@-webkit-keyframes bird6 {
+  0%, 10% {
+    -webkit-transform: translate3d(-100vw, 20vh, -500px) rotateY(15deg) rotateX(10deg);
+            transform: translate3d(-100vw, 20vh, -500px) rotateY(15deg) rotateX(10deg);
+  }
+  100% {
+    -webkit-transform: translate3d(100vw, 40vh, -800px) rotateY(5deg) rotateX(10deg);
+            transform: translate3d(100vw, 40vh, -800px) rotateY(5deg) rotateX(10deg);
+  }
+}
+@keyframes bird6 {
+  0%, 10% {
+    -webkit-transform: translate3d(-100vw, 20vh, -500px) rotateY(15deg) rotateX(10deg);
+            transform: translate3d(-100vw, 20vh, -500px) rotateY(15deg) rotateX(10deg);
+  }
+  100% {
+    -webkit-transform: translate3d(100vw, 40vh, -800px) rotateY(5deg) rotateX(10deg);
+            transform: translate3d(100vw, 40vh, -800px) rotateY(5deg) rotateX(10deg);
+  }
+}
+@media screen and (max-width: 580px) {
+  .container-404 {
+    width: 100%;
+  }
+  .number {
+    font-size: 100px;
+  }
+  .subtitle {
+    font-size: 20px;
+    padding: 0 1em;
+  }
+  .moon {
+    width: 100px;
+    height: 100px;
+  }
+  .face {
+    -webkit-transform: scale(0.7);
+            transform: scale(0.7);
+  }
+}
+</style>
+</head>
+<body>
+<div class="container container-star">
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-1"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+  <div class="star-2"></div>
+</div>
+<div class="container container-bird">
+  <div class="bird bird-anim">
+    <div class="bird-container">
+      <div class="wing wing-left">
+        <div class="wing-left-top"></div>
+      </div>
+      <div class="wing wing-right">
+        <div class="wing-right-top"></div>
+      </div>
+    </div>
+  </div>
+  <div class="bird bird-anim">
+    <div class="bird-container">
+      <div class="wing wing-left">
+        <div class="wing-left-top"></div>
+      </div>
+      <div class="wing wing-right">
+        <div class="wing-right-top"></div>
+      </div>
+    </div>
+  </div>
+  <div class="bird bird-anim">
+    <div class="bird-container">
+      <div class="wing wing-left">
+        <div class="wing-left-top"></div>
+      </div>
+      <div class="wing wing-right">
+        <div class="wing-right-top"></div>
+      </div>
+    </div>
+  </div>
+  <div class="bird bird-anim">
+    <div class="bird-container">
+      <div class="wing wing-left">
+        <div class="wing-left-top"></div>
+      </div>
+      <div class="wing wing-right">
+        <div class="wing-right-top"></div>
+      </div>
+    </div>
+  </div>
+  <div class="bird bird-anim">
+    <div class="bird-container">
+      <div class="wing wing-left">
+        <div class="wing-left-top"></div>
+      </div>
+      <div class="wing wing-right">
+        <div class="wing-right-top"></div>
+      </div>
+    </div>
+  </div>
+  <div class="bird bird-anim">
+    <div class="bird-container">
+      <div class="wing wing-left">
+        <div class="wing-left-top"></div>
+      </div>
+      <div class="wing wing-right">
+        <div class="wing-right-top"></div>
+      </div>
+    </div>
+  </div>
+  <div class="container-title">
+    <div class="title">
+      <div class="number">4</div>
+      <div class="moon">
+        <div class="face">
+          <div class="mouth"></div>
+          <div class="eyes">
+            <div class="eye-left"></div>
+            <div class="eye-right"></div>
+          </div>
+        </div>
+      </div>
+      <div class="number">4</div>
+    </div>
+    <div class="subtitle">哎呀。看来你拐错弯了。</div>
+     <a href="https://www.xiaomaw.cn/"><button>返回</button></a>
+  </div>
+  <div style="display:none">
+  <script type="text/javascript">
+var t=10;
+setInterval("refer()",500);
+function refer(){
+ if(t==0){
+ location.href="https://www.xiaomaw.cn/";
+ }
+ document.getElementById('show').innerHTML=""+t+"";
+ t--;
+}
+</script>
+<span id="show"></span>
+</div>
+</div>
+</body>
+</html>

Dockerfile ADDED Viewed

	@@ -0,0 +1,40 @@

+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 install
+FROM base AS builder
+RUN apk update && apk add --no-cache git
+ENV OPENAI_API_KEY=""
+ENV CODE=""
+ARG DOCKER=true
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN yarn build
+FROM base AS runner
+WORKDIR /app
+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 ["node","server.js"]

LICENSE ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -0,0 +1,204 @@

+<div align="center">
+<img src="./static/icon.svg" alt="预览"/>
+<h1 align="center">ChatGPT Next Web</h1>
+一键免费部署你的私人 ChatGPT 网页应用。
+One-Click to deploy your own ChatGPT web UI.
+[演示 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)
+![主界面](./static/cover.png)
+</div>
+## 主要功能
+- 在 1 分钟内使用 Vercel **免费一键部署**
+- 精心设计的 UI，响应式设计，支持深色模式
+- 极快的首屏加载速度（~85kb）
+- 海量的内置 prompt 列表，来自[中文](https://github.com/PlexPt/awesome-chatgpt-prompts-zh)和[英文](https://github.com/f/awesome-chatgpt-prompts)
+- 自动压缩上下文聊天记录，在节省 Token 的同时支持超长对话
+- 一键导出聊天记录，完整的 Markdown 支持
+- 拥有自己的域名？好上加好，绑定后即可在任何地方**无障碍**快速访问
+## Features
+- **Deploy for free with one-click** on Vercel in under 1 minute
+- Responsive design, and dark mode
+- Fast first screen loading speed (~85kb)
+- 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
+## 开发计划 Roadmap
+- System Prompt: pin a user defined prompt as system prompt 为每个对话设置系统 Prompt [#138](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/138)
+- User Prompt: user can edit and save custom prompts to prompt list 允许用户自行编辑内置 Prompt 列表
+- Self-host Model: support llama, alpaca, ChatGLM, BELLE etc. 支持自部署的大语言模型
+- Plugins: support network search, caculator, any other apis etc. 插件机制，支持联网搜索、计算器、调用其他平台 api [#165](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/165)
+### 不会开发的功能 Not in Plan
+- User login, accounts, cloud sync 用户登陆、账号管理、消息云同步
+- UI text customize 界面文字自定义
+## 开始使用
+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；
+3. 部署完毕后，即可开始使用；
+4. （可选）[绑定自定义域名](https://vercel.com/docs/concepts/projects/domains/add-a-domain)：Vercel 分配的域名 DNS 在某些区域被污染了，绑定自定义域名即可直连。
+## Get Started
+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);
+3. Enjoy :)
+## 保持更新 Keep Updated
+如果你按照上述步骤一键部署了自己的项目，可能会发现总是提示“存在更新”的问题，这是由于 Vercel 会默认为你创建一个新项目而不是 fork 本项目，这会导致无法正确地检测更新。
+推荐你按照下列步骤重新部署：
+- 删除掉原先的 repo；
+- fork 本项目；
+- 前往 vercel 控制台，删除掉原先的 project，然后新建 project，选择你刚刚 fork 出来的项目重新进行部署即可；
+- 在重新部署的过程中，请手动添加名为 `OPENAI_API_KEY` 的环境变量，并填入你的 api key 作为值。
+本项目会持续更新，如果你想让代码库总是保持更新，可以查看 [Github 的文档](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork) 了解如何让 fork 的项目与上游代码同步，建议定期进行同步操作以获得新功能。
+你可以 star/watch 本项目或者 follow 作者来及时获得新功能更新通知。
+If you have deployed your own project with just one click following the steps above, you may encounter the issue of "Updates Available" constantly showing up. This is because Vercel will create a new project for you by default instead of forking this project, resulting in the inability to detect updates correctly.
+We recommend that you follow the steps below to re-deploy:
+- Delete the original repo;
+- Fork this project;
+- Go to the Vercel dashboard, delete the original project, then create a new project and select the project you just forked to redeploy;
+- Please manually add an environment variable named `OPENAI_API_KEY` and enter your API key as the value during the redeploy process.
+This project will be continuously maintained. If you want to keep the code repository up to date, you can check out the [Github documentation](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork) to learn how to synchronize a forked project with upstream code. It is recommended to perform synchronization operations regularly.
+You can star or watch this project or follow author to get release notifictions in time.
+## 配置密码 Password
+本项目提供有限的权限控制功能，请在 Vercel 项目控制面板的环境变量页增加名为 `CODE` 的环境变量，值为用英文逗号分隔的自定义密码：
+```
+code1,code2,code3
+```
+增加或修改该环境变量后，请**重新部署**项目使改动生效。
+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
+### `OPENAI_API_KEY` (required)
+OpanAI 密钥。
+Your openai api key.
+### `CODE` (optional)
+访问密码，可选，可以使用逗号隔开多个密码。
+Access passsword, separated by comma.
+### `BASE_URL` (optional)
+> Default: `api.openai.com`
+OpenAI 接口代理 URL。
+Override openai api request base url.
+### `PROTOCOL` (optional)
+> Default: `https`
+> Values: `http` | `https`
+OpenAI 接口协议。
+Override openai api request protocol.
+## 开发 Development
+点击下方按钮，开始二次开发：
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
+在开始写代码之前，需要在项目根目录新建一个 `.env.local` 文件，里面填入环境变量：
+Before starting development, you must create a new `.env.local` file at project root, and place your api key into it:
+```
+OPENAI_API_KEY=<your api key here>
+```
+### 本地开发 Local Development
+> 如果你是中国大陆用户，不建议在本地进行开发，除非你能够独立解决 OpenAI API 本地代理问题。
+1. 安装 nodejs 和 yarn，具体细节请询问 ChatGPT；
+2. 执行 `yarn install && yarn dev` 即可。
+### 本地部署 Local Deployment
+```shell
+bash <(curl -s https://raw.githubusercontent.com/Yidadaa/ChatGPT-Next-Web/main/scripts/setup.sh)
+```
+### 容器部署 Docker Deployment
+```shell
+docker pull yidadaa/chatgpt-next-web
+docker run -d -p 3000:3000 -e OPENAI_API_KEY="" -e CODE="" yidadaa/chatgpt-next-web
+```
+## 截图 Screenshots
+![设置 Settings](./static/settings.png)
+![更多展示 More](./static/more.png)
+## 捐赠 Donate USDT
+> BNB Smart Chain (BEP 20)
+```
+0x67cD02c7EB62641De576a1fA3EdB32eA0c3ffD89
+```
+## 鸣谢 Special Thanks
+### 捐赠者 Sponsor
+[@mushan0x0](https://github.com/mushan0x0)
+[@ClarenceDan](https://github.com/ClarenceDan)
+[@zhangjia](https://github.com/zhangjia)
+[@hoochanlon](https://github.com/hoochanlon)
+### 贡献者 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.txt ADDED Viewed

	@@ -0,0 +1,22 @@

+免责声明：
+本站所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。
+附: 二○○二年一月一日《计算机软件保护条例》第十七条规定：为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬！鉴于此，也希望大家按此说明研究软件！
+注：本站所有资源均来自网络转载，版权归原作者和公司所有，如果有侵犯到您的权益，请第一时间联系邮箱： 770973008@qq.com 我们将配合处理！
+----------------------------------------------------
+版权声明：
+一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享，着力为用户提供优资资源。
+二、本站提供的所有下载文件均为网络共享资源，请于下载后的24小时内删除。如需体验更多乐趣，还请支持正版。
+三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的，请编辑邮件并加以说明发送到站长邮箱。站长会进行审查之后，情况属实的会在三个工作日内为您删除。
+----------------------------------------------------
+小马博客：https://www.xiaomaw.cn

app/api/access.ts ADDED Viewed

	@@ -0,0 +1,17 @@

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

app/api/chat-stream/route.ts ADDED Viewed

	@@ -0,0 +1,52 @@

+import { createParser } from "eventsource-parser";
+import { NextRequest } from "next/server";
+import { requestOpenai } from "../common";
+async function createStream(req: NextRequest) {
+  const encoder = new TextEncoder();
+  const decoder = new TextDecoder();
+  const res = await requestOpenai(req);
+  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));
+      }
+    },
+  });
+  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/common.ts ADDED Viewed

	@@ -0,0 +1,22 @@

+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 apiKey = req.headers.get("token");
+  const openaiPath = req.headers.get("path");
+  console.log("[Proxy] ", openaiPath);
+  return fetch(`${PROTOCOL}://${BASE_URL}/${openaiPath}`, {
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${apiKey}`,
+    },
+    method: req.method,
+    body: req.body,
+  });
+}

app/api/openai/route.ts ADDED Viewed

	@@ -0,0 +1,28 @@

+import { NextRequest, NextResponse } from "next/server";
+import { requestOpenai } from "../common";
+async function makeRequest(req: NextRequest) {
+  try {
+    const res = await requestOpenai(req);
+    return new Response(res.body);
+  } catch (e) {
+    console.error("[OpenAI] ", req.body, e);
+    return NextResponse.json(
+      {
+        error: true,
+        msg: JSON.stringify(e),
+      },
+      {
+        status: 500,
+      },
+    );
+  }
+}
+export async function POST(req: NextRequest) {
+  return makeRequest(req);
+}
+export async function GET(req: NextRequest) {
+  return makeRequest(req);
+}

app/api/openai/typing.ts ADDED Viewed

	@@ -0,0 +1,7 @@

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

app/components/button.module.scss ADDED Viewed

	@@ -0,0 +1,60 @@

+.icon-button {
+  background-color: var(--white);
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  box-shadow: var(--card-shadow);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  overflow: hidden;
+  user-select: none;
+}
+.border {
+  border: var(--border-in-light);
+}
+.icon-button:hover {
+  filter: brightness(0.9);
+  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;
+  }
+}
+@mixin dark-button {
+  div:not(:global(.no-dark))>.icon-button-icon {
+    filter: invert(0.5);
+  }
+  .icon-button:hover {
+    filter: brightness(1.2);
+  }
+}
+:global(.dark) {
+  @include dark-button;
+}
+@media (prefers-color-scheme: dark) {
+  @include dark-button;
+}
+.icon-button-text {
+  margin-left: 5px;
+  font-size: 12px;
+}

app/components/button.tsx ADDED Viewed

	@@ -0,0 +1,28 @@

+import * as React from "react";
+import styles from "./button.module.scss";
+export function IconButton(props: {
+  onClick?: () => void;
+  icon: JSX.Element;
+  text?: string;
+  bordered?: boolean;
+  className?: string;
+  title?: string;
+}) {
+  return (
+    <div
+      className={
+        styles["icon-button"] +
+        ` ${props.bordered && styles.border} ${props.className ?? ""}`
+      }
+      onClick={props.onClick}
+      title={props.title}
+    >
+      <div className={styles["icon-button-icon"]}>{props.icon}</div>
+      {props.text && (
+        <div className={styles["icon-button-text"]}>{props.text}</div>
+      )}
+    </div>
+  );
+}

app/components/home.module.scss ADDED Viewed

	@@ -0,0 +1,456 @@

+@import "./window.scss";
+@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: 900px;
+  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;
+  }
+}
+.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);
+}
+.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: 999;
+    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;
+}
+.sidebar-sub-title {
+  font-size: 12px;
+  font-weight: 400px;
+}
+.sidebar-body {
+  flex: 1;
+  overflow: auto;
+}
+.chat-list {
+}
+.chat-item {
+  padding: 10px 14px;
+  background-color: var(--white);
+  border-radius: 10px;
+  margin-bottom: 10px;
+  box-shadow: var(--card-shadow);
+  transition: all 0.3s ease;
+  cursor: pointer;
+  user-select: none;
+  border: 2px solid transparent;
+  position: relative;
+  overflow: hidden;
+}
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}
+.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;
+}
+.chat-item-delete {
+  position: absolute;
+  top: 10px;
+  right: -20px;
+  transition: all ease 0.3s;
+  opacity: 0;
+}
+.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;
+}
+.chat-item-count {
+}
+.chat-item-date {
+}
+.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;
+  margin-bottom: 100px;
+}
+.chat-body-title {
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+.chat-message {
+  display: flex;
+  flex-direction: row;
+}
+.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;
+  animation: slide-in ease 0.3s;
+  &: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;
+}
+.user-avtar {
+  height: 30px;
+  width: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--border-in-light);
+  box-shadow: var(--card-shadow);
+  border-radius: 10px;
+}
+.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: absolute;
+  bottom: 0px;
+  display: flex;
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  flex-direction: column;
+}
+@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 14px 50px;
+  resize: none;
+  outline: none;
+}
+@media only screen and (max-width: 600px) {
+  .chat-input {
+    font-size: 16px;
+  }
+}
+.chat-input:focus {
+  border: 1px solid var(--primary);
+}
+.chat-input-send {
+  background-color: var(--primary);
+  color: white;
+  position: absolute;
+  right: 30px;
+  bottom: 30px;
+}
+.export-content {
+  white-space: break-spaces;
+}
+.loading-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}

app/components/home.tsx ADDED Viewed

	@@ -0,0 +1,707 @@

+"use client";
+import { useState, useRef, useEffect, useLayoutEffect } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { IconButton } from "./button";
+import styles from "./home.module.scss";
+import SettingsIcon from "../icons/settings.svg";
+import GithubIcon from "../icons/github.svg";
+import ChatGptIcon from "../icons/chatgpt.svg";
+import SendWhiteIcon from "../icons/send-white.svg";
+import BrainIcon from "../icons/brain.svg";
+import ExportIcon from "../icons/export.svg";
+import BotIcon from "../icons/bot.svg";
+import AddIcon from "../icons/add.svg";
+import DeleteIcon from "../icons/delete.svg";
+import LoadingIcon from "../icons/three-dots.svg";
+import MenuIcon from "../icons/menu.svg";
+import CloseIcon from "../icons/close.svg";
+import CopyIcon from "../icons/copy.svg";
+import DownloadIcon from "../icons/download.svg";
+import { Message, SubmitKey, useChatStore, ChatSession } from "../store";
+import { showModal, showToast } from "./ui-lib";
+import {
+  copyToClipboard,
+  downloadAs,
+  isIOS,
+  isMobileScreen,
+  selectOrCopy,
+} from "../utils";
+import Locale from "../locales";
+import dynamic from "next/dynamic";
+import { REPO_URL } from "../constant";
+import { ControllerPool } from "../requests";
+import { Prompt, usePromptStore } from "../store/prompt";
+export function Loading(props: { noLogo?: boolean }) {
+  return (
+    <div className={styles["loading-content"]}>
+      {!props.noLogo && <BotIcon />}
+      <LoadingIcon />
+    </div>
+  );
+}
+const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
+  loading: () => <LoadingIcon />,
+});
+const Settings = dynamic(async () => (await import("./settings")).Settings, {
+  loading: () => <Loading noLogo />,
+});
+const Emoji = dynamic(async () => (await import("emoji-picker-react")).Emoji, {
+  loading: () => <LoadingIcon />,
+});
+export function Avatar(props: { role: Message["role"] }) {
+  const config = useChatStore((state) => state.config);
+  if (props.role === "assistant") {
+    return <BotIcon className={styles["user-avtar"]} />;
+  }
+  return (
+    <div className={styles["user-avtar"]}>
+      <Emoji unified={config.avatar} size={18} />
+    </div>
+  );
+}
+export function ChatItem(props: {
+  onClick?: () => void;
+  onDelete?: () => void;
+  title: string;
+  count: number;
+  time: string;
+  selected: boolean;
+}) {
+  return (
+    <div
+      className={`${styles["chat-item"]} ${
+        props.selected && styles["chat-item-selected"]
+      }`}
+      onClick={props.onClick}
+    >
+      <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"]}>{props.time}</div>
+      </div>
+      <div className={styles["chat-item-delete"]} onClick={props.onDelete}>
+        <DeleteIcon />
+      </div>
+    </div>
+  );
+}
+export function ChatList() {
+  const [sessions, selectedIndex, selectSession, removeSession] = useChatStore(
+    (state) => [
+      state.sessions,
+      state.currentSessionIndex,
+      state.selectSession,
+      state.removeSession,
+    ],
+  );
+  return (
+    <div className={styles["chat-list"]}>
+      {sessions.map((item, i) => (
+        <ChatItem
+          title={item.topic}
+          time={item.lastUpdate}
+          count={item.messages.length}
+          key={i}
+          selected={i === selectedIndex}
+          onClick={() => selectSession(i)}
+          onDelete={() => removeSession(i)}
+        />
+      ))}
+    </div>
+  );
+}
+function useSubmitHandler() {
+  const config = useChatStore((state) => state.config);
+  const submitKey = config.submitKey;
+  const shouldSubmit = (e: KeyboardEvent) => {
+    if (e.key !== "Enter") 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;
+}) {
+  if (props.prompts.length === 0) return null;
+  return (
+    <div className={styles["prompt-hints"]}>
+      {props.prompts.map((prompt, i) => (
+        <div
+          className={styles["prompt-hint"]}
+          key={prompt.title + i.toString()}
+          onClick={() => props.onPromptSelect(prompt)}
+        >
+          <div className={styles["hint-title"]}>{prompt.title}</div>
+          <div className={styles["hint-content"]}>{prompt.content}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+export function Chat(props: {
+  showSideBar?: () => void;
+  sideBarShowing?: boolean;
+}) {
+  type RenderMessage = Message & { preview?: boolean };
+  const chatStore = useChatStore();
+  const [session, sessionIndex] = useChatStore((state) => [
+    state.currentSession(),
+    state.currentSessionIndex,
+  ]);
+  const fontSize = useChatStore((state) => state.config.fontSize);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [userInput, setUserInput] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const { submitKey, shouldSubmit } = useSubmitHandler();
+  // 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) => {
+    setUserInput(prompt.content);
+    setPromptHints([]);
+    inputRef.current?.focus();
+  };
+  const scrollInput = () => {
+    const dom = inputRef.current;
+    if (!dom) return;
+    const paddingBottomNum: number = parseInt(
+      window.getComputedStyle(dom).paddingBottom,
+      10,
+    );
+    dom.scrollTop = dom.scrollHeight - dom.offsetHeight + paddingBottomNum;
+  };
+  // only search prompts when user input is short
+  const SEARCH_TEXT_LIMIT = 30;
+  const onInput = (text: string) => {
+    scrollInput();
+    setUserInput(text);
+    const n = text.trim().length;
+    // clear search results
+    if (n === 0) {
+      setPromptHints([]);
+    } else if (!chatStore.config.disablePromptHint && n < SEARCH_TEXT_LIMIT) {
+      // check if need to trigger auto completion
+      if (text.startsWith("/") && text.length > 1) {
+        onSearch(text.slice(1));
+      }
+    }
+  };
+  // submit user input
+  const onUserSubmit = () => {
+    if (userInput.length <= 0) return;
+    setIsLoading(true);
+    chatStore.onUserInput(userInput).then(() => setIsLoading(false));
+    setUserInput("");
+    setPromptHints([]);
+    inputRef.current?.focus();
+  };
+  // stop response
+  const onUserStop = (messageIndex: number) => {
+    console.log(ControllerPool, sessionIndex, messageIndex);
+    ControllerPool.stop(sessionIndex, messageIndex);
+  };
+  // check if should send message
+  const onInputKeyDown = (e: KeyboardEvent) => {
+    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 onResend = (botIndex: number) => {
+    // find last user input message and resend
+    for (let i = botIndex; i >= 0; i -= 1) {
+      if (messages[i].role === "user") {
+        setIsLoading(true);
+        chatStore
+          .onUserInput(messages[i].content)
+          .then(() => setIsLoading(false));
+        inputRef.current?.focus();
+        return;
+      }
+    }
+  };
+  // for auto-scroll
+  const latestMessageRef = useRef<HTMLDivElement>(null);
+  const [autoScroll, setAutoScroll] = useState(true);
+  // preview messages
+  const messages = (session.messages as RenderMessage[])
+    .concat(
+      isLoading
+        ? [
+            {
+              role: "assistant",
+              content: "……",
+              date: new Date().toLocaleString(),
+              preview: true,
+            },
+          ]
+        : [],
+    )
+    .concat(
+      userInput.length > 0
+        ? [
+            {
+              role: "user",
+              content: userInput,
+              date: new Date().toLocaleString(),
+              preview: true,
+            },
+          ]
+        : [],
+    );
+  // auto scroll
+  useLayoutEffect(() => {
+    setTimeout(() => {
+      const dom = latestMessageRef.current;
+      const inputDom = inputRef.current;
+      // only scroll when input overlaped message body
+      let shouldScroll = true;
+      if (dom && inputDom) {
+        const domRect = dom.getBoundingClientRect();
+        const inputRect = inputDom.getBoundingClientRect();
+        shouldScroll = domRect.top > inputRect.top;
+      }
+      if (dom && autoScroll && shouldScroll) {
+        dom.scrollIntoView({
+          block: "end",
+        });
+      }
+    }, 500);
+  });
+  return (
+    <div className={styles.chat} key={session.id}>
+      <div className={styles["window-header"]}>
+        <div
+          className={styles["window-header-title"]}
+          onClick={props?.showSideBar}
+        >
+          <div
+            className={`${styles["window-header-main-title"]} ${styles["chat-body-title"]}`}
+            onClick={() => {
+              const newTopic = prompt(Locale.Chat.Rename, session.topic);
+              if (newTopic && newTopic !== session.topic) {
+                chatStore.updateCurrentSession(
+                  (session) => (session.topic = newTopic!),
+                );
+              }
+            }}
+          >
+            {session.topic}
+          </div>
+          <div className={styles["window-header-sub-title"]}>
+            {Locale.Chat.SubTitle(session.messages.length)}
+          </div>
+        </div>
+        <div className={styles["window-actions"]}>
+          <div className={styles["window-action-button"] + " " + styles.mobile}>
+            <IconButton
+              icon={<MenuIcon />}
+              bordered
+              title={Locale.Chat.Actions.ChatList}
+              onClick={props?.showSideBar}
+            />
+          </div>
+          <div className={styles["window-action-button"]}>
+            <IconButton
+              icon={<BrainIcon />}
+              bordered
+              title={Locale.Chat.Actions.CompressedHistory}
+              onClick={() => {
+                showMemoryPrompt(session);
+              }}
+            />
+          </div>
+          <div className={styles["window-action-button"]}>
+            <IconButton
+              icon={<ExportIcon />}
+              bordered
+              title={Locale.Chat.Actions.Export}
+              onClick={() => {
+                exportMessages(session.messages, session.topic);
+              }}
+            />
+          </div>
+        </div>
+      </div>
+      <div className={styles["chat-body"]}>
+        {messages.map((message, i) => {
+          const isUser = message.role === "user";
+          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"]}>
+                  <Avatar role={message.role} />
+                </div>
+                {(message.preview || message.streaming) && (
+                  <div className={styles["chat-message-status"]}>
+                    {Locale.Chat.Typing}
+                  </div>
+                )}
+                <div className={styles["chat-message-item"]}>
+                  {!isUser &&
+                    !(message.preview || message.content.length === 0) && (
+                      <div className={styles["chat-message-top-actions"]}>
+                        {message.streaming ? (
+                          <div
+                            className={styles["chat-message-top-action"]}
+                            onClick={() => onUserStop(i)}
+                          >
+                            {Locale.Chat.Actions.Stop}
+                          </div>
+                        ) : (
+                          <div
+                            className={styles["chat-message-top-action"]}
+                            onClick={() => onResend(i)}
+                          >
+                            {Locale.Chat.Actions.Retry}
+                          </div>
+                        )}
+                        <div
+                          className={styles["chat-message-top-action"]}
+                          onClick={() => copyToClipboard(message.content)}
+                        >
+                          {Locale.Chat.Actions.Copy}
+                        </div>
+                      </div>
+                    )}
+                  {(message.preview || message.content.length === 0) &&
+                  !isUser ? (
+                    <LoadingIcon />
+                  ) : (
+                    <div
+                      className="markdown-body"
+                      style={{ fontSize: `${fontSize}px` }}
+                      onContextMenu={(e) => onRightClick(e, message)}
+                      onDoubleClickCapture={() => setUserInput(message.content)}
+                    >
+                      <Markdown content={message.content} />
+                    </div>
+                  )}
+                </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 ref={latestMessageRef} style={{ opacity: 0, height: "4em" }}>
+          -
+        </div>
+      </div>
+      <div className={styles["chat-input-panel"]}>
+        <PromptHints prompts={promptHints} onPromptSelect={onPromptSelect} />
+        <div className={styles["chat-input-panel-inner"]}>
+          <textarea
+            ref={inputRef}
+            className={styles["chat-input"]}
+            placeholder={Locale.Chat.Input(submitKey)}
+            rows={4}
+            onInput={(e) => onInput(e.currentTarget.value)}
+            value={userInput}
+            onKeyDown={(e) => onInputKeyDown(e as any)}
+            onFocus={() => setAutoScroll(true)}
+            onBlur={() => {
+              setAutoScroll(false);
+              setTimeout(() => setPromptHints([]), 500);
+            }}
+            autoFocus={!props?.sideBarShowing}
+          />
+          <IconButton
+            icon={<SendWhiteIcon />}
+            text={Locale.Chat.Send}
+            className={styles["chat-input-send"] + " no-dark"}
+            onClick={onUserSubmit}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+function useSwitchTheme() {
+  const config = useChatStore((state) => state.config);
+  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 themeColor = getComputedStyle(document.body)
+      .getPropertyValue("--theme-color")
+      .trim();
+    const metaDescription = document.querySelector('meta[name="theme-color"]');
+    metaDescription?.setAttribute("content", themeColor);
+  }, [config.theme]);
+}
+function exportMessages(messages: Message[], topic: string) {
+  const mdText =
+    `# ${topic}\n\n` +
+    messages
+      .map((m) => {
+        return m.role === "user" ? `## ${m.content}` : 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)}
+      />,
+    ],
+  });
+}
+function showMemoryPrompt(session: ChatSession) {
+  showModal({
+    title: `${Locale.Memory.Title} (${session.lastSummarizeIndex} of ${session.messages.length})`,
+    children: (
+      <div className="markdown-body">
+        <pre className={styles["export-content"]}>
+          {session.memoryPrompt || Locale.Memory.EmptyContent}
+        </pre>
+      </div>
+    ),
+    actions: [
+      <IconButton
+        key="copy"
+        icon={<CopyIcon />}
+        bordered
+        text={Locale.Memory.Copy}
+        onClick={() => copyToClipboard(session.memoryPrompt)}
+      />,
+    ],
+  });
+}
+const useHasHydrated = () => {
+  const [hasHydrated, setHasHydrated] = useState<boolean>(false);
+  useEffect(() => {
+    setHasHydrated(true);
+  }, []);
+  return hasHydrated;
+};
+export function Home() {
+  const [createNewSession, currentIndex, removeSession] = useChatStore(
+    (state) => [
+      state.newSession,
+      state.currentSessionIndex,
+      state.removeSession,
+    ],
+  );
+  const loading = !useHasHydrated();
+  const [showSideBar, setShowSideBar] = useState(true);
+  // setting
+  const [openSettings, setOpenSettings] = useState(false);
+  const config = useChatStore((state) => state.config);
+  useSwitchTheme();
+  if (loading) {
+    return <Loading />;
+  }
+  return (
+    <div
+      className={`${
+        config.tightBorder && !isMobileScreen()
+          ? styles["tight-container"]
+          : styles.container
+      }`}
+    >
+      <div
+        className={styles.sidebar + ` ${showSideBar && styles["sidebar-show"]}`}
+      >
+        <div className={styles["sidebar-header"]}>
+          <div className={styles["sidebar-title"]}>ChatGPT Next</div>
+          <div className={styles["sidebar-sub-title"]}>
+            Build your own AI assistant.
+          </div>
+          <div className={styles["sidebar-logo"]}>
+            <ChatGptIcon />
+          </div>
+        </div>
+        <div
+          className={styles["sidebar-body"]}
+          onClick={() => {
+            setOpenSettings(false);
+            setShowSideBar(false);
+          }}
+        >
+          <ChatList />
+        </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)) {
+                    removeSession(currentIndex);
+                  }
+                }}
+              />
+            </div>
+            <div className={styles["sidebar-action"]}>
+              <IconButton
+                icon={<SettingsIcon />}
+                onClick={() => {
+                  setOpenSettings(true);
+                  setShowSideBar(false);
+                }}
+              />
+            </div>
+            <div className={styles["sidebar-action"]}>
+              <a href={REPO_URL} target="_blank">
+                <IconButton icon={<GithubIcon />} />
+              </a>
+            </div>
+          </div>
+          <div>
+            <IconButton
+              icon={<AddIcon />}
+              text={Locale.Home.NewChat}
+              onClick={() => {
+                createNewSession();
+                setShowSideBar(false);
+              }}
+            />
+          </div>
+        </div>
+      </div>
+      <div className={styles["window-content"]}>
+        {openSettings ? (
+          <Settings
+            closeSettings={() => {
+              setOpenSettings(false);
+              setShowSideBar(true);
+            }}
+          />
+        ) : (
+          <Chat
+            key="chat"
+            showSideBar={() => setShowSideBar(true)}
+            sideBarShowing={showSideBar}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

app/components/markdown.tsx ADDED Viewed

	@@ -0,0 +1,42 @@

+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 RehypePrsim from "rehype-prism-plus";
+import { useRef } from "react";
+import { copyToClipboard } from "../utils";
+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>
+  );
+}
+export function Markdown(props: { content: string }) {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
+      rehypePlugins={[RehypeKatex, [RehypePrsim, { ignoreMissing: true }]]}
+      components={{
+        pre: PreCode,
+      }}
+    >
+      {props.content}
+    </ReactMarkdown>
+  );
+}

app/components/settings.module.scss ADDED Viewed

	@@ -0,0 +1,20 @@

+@import "./window.scss";
+.settings {
+  padding: 20px;
+  overflow: auto;
+}
+.settings-title {
+  font-size: 14px;
+  font-weight: bolder;
+}
+.settings-sub-title {
+  font-size: 12px;
+  font-weight: normal;
+}
+.avatar {
+  cursor: pointer;
+}

app/components/settings.tsx ADDED Viewed

	@@ -0,0 +1,486 @@

+import { useState, useEffect, useRef, useMemo } from "react";
+import EmojiPicker, { Theme as EmojiTheme } from "emoji-picker-react";
+import styles from "./settings.module.scss";
+import ResetIcon from "../icons/reload.svg";
+import CloseIcon from "../icons/close.svg";
+import ClearIcon from "../icons/clear.svg";
+import EditIcon from "../icons/edit.svg";
+import { List, ListItem, Popover, showToast } from "./ui-lib";
+import { IconButton } from "./button";
+import {
+  SubmitKey,
+  useChatStore,
+  Theme,
+  ALL_MODELS,
+  useUpdateStore,
+  useAccessStore,
+} from "../store";
+import { Avatar, PromptHints } from "./home";
+import Locale, { AllLangs, changeLang, getLang } from "../locales";
+import { getCurrentVersion } from "../utils";
+import Link from "next/link";
+import { UPDATE_URL } from "../constant";
+import { SearchService, usePromptStore } from "../store/prompt";
+import { requestUsage } from "../requests";
+function SettingItem(props: {
+  title: string;
+  subTitle?: string;
+  children: JSX.Element;
+}) {
+  return (
+    <ListItem>
+      <div className={styles["settings-title"]}>
+        <div>{props.title}</div>
+        {props.subTitle && (
+          <div className={styles["settings-sub-title"]}>{props.subTitle}</div>
+        )}
+      </div>
+      {props.children}
+    </ListItem>
+  );
+}
+export function Settings(props: { closeSettings: () => void }) {
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+  const [config, updateConfig, resetConfig, clearAllData] = useChatStore(
+    (state) => [
+      state.config,
+      state.updateConfig,
+      state.resetConfig,
+      state.clearAllData,
+    ],
+  );
+  const updateStore = useUpdateStore();
+  const [checkingUpdate, setCheckingUpdate] = useState(false);
+  const currentId = getCurrentVersion();
+  const remoteId = updateStore.remoteId;
+  const hasNewVersion = currentId !== remoteId;
+  function checkUpdate(force = false) {
+    setCheckingUpdate(true);
+    updateStore.getLatestCommitId(force).then(() => {
+      setCheckingUpdate(false);
+    });
+  }
+  const [usage, setUsage] = useState<{
+    granted?: number;
+    used?: number;
+  }>();
+  const [loadingUsage, setLoadingUsage] = useState(false);
+  function checkUsage() {
+    setLoadingUsage(true);
+    requestUsage()
+      .then((res) =>
+        setUsage({
+          granted: res?.total_granted,
+          used: res?.total_used,
+        }),
+      )
+      .finally(() => {
+        setLoadingUsage(false);
+      });
+  }
+  useEffect(() => {
+    checkUpdate();
+    checkUsage();
+  }, []);
+  const accessStore = useAccessStore();
+  const enabledAccessControl = useMemo(
+    () => accessStore.enabledAccessControl(),
+    [],
+  );
+  const promptStore = usePromptStore();
+  const builtinCount = SearchService.count.builtin;
+  const customCount = promptStore.prompts.size ?? 0;
+  return (
+    <>
+      <div className={styles["window-header"]}>
+        <div className={styles["window-header-title"]}>
+          <div className={styles["window-header-main-title"]}>
+            {Locale.Settings.Title}
+          </div>
+          <div className={styles["window-header-sub-title"]}>
+            {Locale.Settings.SubTitle}
+          </div>
+        </div>
+        <div className={styles["window-actions"]}>
+          <div className={styles["window-action-button"]}>
+            <IconButton
+              icon={<ClearIcon />}
+              onClick={clearAllData}
+              bordered
+              title={Locale.Settings.Actions.ClearAll}
+            />
+          </div>
+          <div className={styles["window-action-button"]}>
+            <IconButton
+              icon={<ResetIcon />}
+              onClick={resetConfig}
+              bordered
+              title={Locale.Settings.Actions.ResetAll}
+            />
+          </div>
+          <div className={styles["window-action-button"]}>
+            <IconButton
+              icon={<CloseIcon />}
+              onClick={props.closeSettings}
+              bordered
+              title={Locale.Settings.Actions.Close}
+            />
+          </div>
+        </div>
+      </div>
+      <div className={styles["settings"]}>
+        <List>
+          <SettingItem title={Locale.Settings.Avatar}>
+            <Popover
+              onClose={() => setShowEmojiPicker(false)}
+              content={
+                <EmojiPicker
+                  lazyLoadEmojis
+                  theme={EmojiTheme.AUTO}
+                  onEmojiClick={(e) => {
+                    updateConfig((config) => (config.avatar = e.unified));
+                    setShowEmojiPicker(false);
+                  }}
+                />
+              }
+              open={showEmojiPicker}
+            >
+              <div
+                className={styles.avatar}
+                onClick={() => setShowEmojiPicker(true)}
+              >
+                <Avatar role="user" />
+              </div>
+            </Popover>
+          </SettingItem>
+          <SettingItem
+            title={Locale.Settings.Update.Version(currentId)}
+            subTitle={
+              checkingUpdate
+                ? Locale.Settings.Update.IsChecking
+                : hasNewVersion
+                ? Locale.Settings.Update.FoundUpdate(remoteId ?? "ERROR")
+                : Locale.Settings.Update.IsLatest
+            }
+          >
+            {checkingUpdate ? (
+              <div />
+            ) : hasNewVersion ? (
+              <Link href={UPDATE_URL} target="_blank" className="link">
+                {Locale.Settings.Update.GoToUpdate}
+              </Link>
+            ) : (
+              <IconButton
+                icon={<ResetIcon></ResetIcon>}
+                text={Locale.Settings.Update.CheckUpdate}
+                onClick={() => checkUpdate(true)}
+              />
+            )}
+          </SettingItem>
+          <SettingItem title={Locale.Settings.SendKey}>
+            <select
+              value={config.submitKey}
+              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>
+          </SettingItem>
+          <ListItem>
+            <div className={styles["settings-title"]}>
+              {Locale.Settings.Theme}
+            </div>
+            <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>
+          <SettingItem 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>
+          </SettingItem>
+          <SettingItem
+            title={Locale.Settings.FontSize.Title}
+            subTitle={Locale.Settings.FontSize.SubTitle}
+          >
+            <input
+              type="range"
+              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)),
+                )
+              }
+            ></input>
+          </SettingItem>
+          <SettingItem title={Locale.Settings.TightBorder}>
+            <input
+              type="checkbox"
+              checked={config.tightBorder}
+              onChange={(e) =>
+                updateConfig(
+                  (config) => (config.tightBorder = e.currentTarget.checked),
+                )
+              }
+            ></input>
+          </SettingItem>
+        </List>
+        <List>
+          <SettingItem
+            title={Locale.Settings.Prompt.Disable.Title}
+            subTitle={Locale.Settings.Prompt.Disable.SubTitle}
+          >
+            <input
+              type="checkbox"
+              checked={config.disablePromptHint}
+              onChange={(e) =>
+                updateConfig(
+                  (config) =>
+                    (config.disablePromptHint = e.currentTarget.checked),
+                )
+              }
+            ></input>
+          </SettingItem>
+          <SettingItem
+            title={Locale.Settings.Prompt.List}
+            subTitle={Locale.Settings.Prompt.ListCount(
+              builtinCount,
+              customCount,
+            )}
+          >
+            <IconButton
+              icon={<EditIcon />}
+              text={Locale.Settings.Prompt.Edit}
+              onClick={() => showToast(Locale.WIP)}
+            />
+          </SettingItem>
+        </List>
+        <List>
+          {enabledAccessControl ? (
+            <SettingItem
+              title={Locale.Settings.AccessCode.Title}
+              subTitle={Locale.Settings.AccessCode.SubTitle}
+            >
+              <input
+                value={accessStore.accessCode}
+                type="text"
+                placeholder={Locale.Settings.AccessCode.Placeholder}
+                onChange={(e) => {
+                  accessStore.updateCode(e.currentTarget.value);
+                }}
+              ></input>
+            </SettingItem>
+          ) : (
+            <></>
+          )}
+          <SettingItem
+            title={Locale.Settings.Token.Title}
+            subTitle={Locale.Settings.Token.SubTitle}
+          >
+            <input
+              value={accessStore.token}
+              type="text"
+              placeholder={Locale.Settings.Token.Placeholder}
+              onChange={(e) => {
+                accessStore.updateToken(e.currentTarget.value);
+              }}
+            ></input>
+          </SettingItem>
+          <SettingItem
+            title={Locale.Settings.Usage.Title}
+            subTitle={
+              loadingUsage
+                ? Locale.Settings.Usage.IsChecking
+                : Locale.Settings.Usage.SubTitle(
+                    usage?.granted ?? "[?]",
+                    usage?.used ?? "[?]",
+                  )
+            }
+          >
+            {loadingUsage ? (
+              <div />
+            ) : (
+              <IconButton
+                icon={<ResetIcon></ResetIcon>}
+                text={Locale.Settings.Usage.Check}
+                onClick={checkUsage}
+              />
+            )}
+          </SettingItem>
+          <SettingItem
+            title={Locale.Settings.HistoryCount.Title}
+            subTitle={Locale.Settings.HistoryCount.SubTitle}
+          >
+            <input
+              type="range"
+              title={config.historyMessageCount.toString()}
+              value={config.historyMessageCount}
+              min="0"
+              max="25"
+              step="2"
+              onChange={(e) =>
+                updateConfig(
+                  (config) =>
+                    (config.historyMessageCount = e.target.valueAsNumber),
+                )
+              }
+            ></input>
+          </SettingItem>
+          <SettingItem
+            title={Locale.Settings.CompressThreshold.Title}
+            subTitle={Locale.Settings.CompressThreshold.SubTitle}
+          >
+            <input
+              type="number"
+              min={500}
+              max={4000}
+              value={config.compressMessageLengthThreshold}
+              onChange={(e) =>
+                updateConfig(
+                  (config) =>
+                    (config.compressMessageLengthThreshold =
+                      e.currentTarget.valueAsNumber),
+                )
+              }
+            ></input>
+          </SettingItem>
+        </List>
+        <List>
+          <SettingItem title={Locale.Settings.Model}>
+            <select
+              value={config.modelConfig.model}
+              onChange={(e) => {
+                updateConfig(
+                  (config) =>
+                    (config.modelConfig.model = e.currentTarget.value),
+                );
+              }}
+            >
+              {ALL_MODELS.map((v) => (
+                <option value={v.name} key={v.name} disabled={!v.available}>
+                  {v.name}
+                </option>
+              ))}
+            </select>
+          </SettingItem>
+          <SettingItem
+            title={Locale.Settings.Temperature.Title}
+            subTitle={Locale.Settings.Temperature.SubTitle}
+          >
+            <input
+              type="range"
+              value={config.modelConfig.temperature.toFixed(1)}
+              min="0"
+              max="2"
+              step="0.1"
+              onChange={(e) => {
+                updateConfig(
+                  (config) =>
+                    (config.modelConfig.temperature =
+                      e.currentTarget.valueAsNumber),
+                );
+              }}
+            ></input>
+          </SettingItem>
+          <SettingItem
+            title={Locale.Settings.MaxTokens.Title}
+            subTitle={Locale.Settings.MaxTokens.SubTitle}
+          >
+            <input
+              type="number"
+              min={100}
+              max={4096}
+              value={config.modelConfig.max_tokens}
+              onChange={(e) =>
+                updateConfig(
+                  (config) =>
+                    (config.modelConfig.max_tokens =
+                      e.currentTarget.valueAsNumber),
+                )
+              }
+            ></input>
+          </SettingItem>
+          <SettingItem
+            title={Locale.Settings.PresencePenlty.Title}
+            subTitle={Locale.Settings.PresencePenlty.SubTitle}
+          >
+            <input
+              type="range"
+              value={config.modelConfig.presence_penalty.toFixed(1)}
+              min="-2"
+              max="2"
+              step="0.5"
+              onChange={(e) => {
+                updateConfig(
+                  (config) =>
+                    (config.modelConfig.presence_penalty =
+                      e.currentTarget.valueAsNumber),
+                );
+              }}
+            ></input>
+          </SettingItem>
+        </List>
+      </div>
+    </>
+  );
+}

app/components/ui-lib.module.scss ADDED Viewed

	@@ -0,0 +1,160 @@

+.card {
+  background-color: var(--white);
+  border-radius: 10px;
+  box-shadow: var(--card-shadow);
+  padding: 10px;
+}
+.popover {
+  position: relative;
+}
+.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;
+}
+@keyframes slide-in {
+  from {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.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 {
+  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: 50vw;
+  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;
+    .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: 0;
+  left: 0;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  .toast-content {
+    font-size: 14px;
+    background-color: var(--white);
+    box-shadow: var(--card-shadow);
+    border: var(--border-in-light);
+    color: var(--black);
+    padding: 10px 30px;
+    border-radius: 50px;
+    margin-bottom: 20px;
+  }
+}
+@media only screen and (max-width: 600px) {
+  .modal-container {
+    width: 90vw;
+    .modal-content {
+      max-height: 50vh;
+    }
+  }
+}

app/components/ui-lib.tsx ADDED Viewed

	@@ -0,0 +1,142 @@

+import styles from "./ui-lib.module.scss";
+import LoadingIcon from "../icons/three-dots.svg";
+import CloseIcon from "../icons/close.svg";
+import { createRoot } from "react-dom/client";
+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: { children: JSX.Element[] }) {
+  if (props.children.length > 2) {
+    throw Error("Only Support Two Children");
+  }
+  return <div className={styles["list-item"]}>{props.children}</div>;
+}
+export function List(props: { children: JSX.Element[] | JSX.Element }) {
+  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;
+  actions?: JSX.Element[];
+  onClose?: () => void;
+}
+export function Modal(props: ModalProps) {
+  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 };
+export function Toast(props: ToastProps) {
+  return (
+    <div className={styles["toast-container"]}>
+      <div className={styles["toast-content"]}>{props.content}</div>
+    </div>
+  );
+}
+export function showToast(content: string, 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} />);
+}

app/components/window.scss ADDED Viewed

	@@ -0,0 +1,35 @@

+.window-header {
+  padding: 14px 20px;
+  border-bottom: rgba(0, 0, 0, 0.1) 1px solid;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.window-header-title {
+  max-width: calc(100% - 100px);
+  .window-header-main-title {
+    font-size: 20px;
+    font-weight: bolder;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+    max-width: 50vw;
+  }
+  .window-header-sub-title {
+    font-size: 14px;
+    margin-top: 5px;
+  }
+}
+.window-actions {
+  display: inline-flex;
+}
+.window-action-button {
+  margin-left: 10px;
+}

app/constant.ts ADDED Viewed

	@@ -0,0 +1,6 @@

+export const OWNER = "Yidadaa";
+export const REPO = "ChatGPT-Next-Web";
+export const REPO_URL = `https://github.com/${OWNER}/${REPO}`;
+export const UPDATE_URL = `${REPO_URL}#%E4%BF%9D%E6%8C%81%E6%9B%B4%E6%96%B0-keep-updated`;
+export const FETCH_COMMIT_URL = `https://api.github.com/repos/${OWNER}/${REPO}/commits?per_page=1`;
+export const FETCH_TAG_URL = `https://api.github.com/repos/${OWNER}/${REPO}/tags?per_page=1`;