Duplicate from hf4all/bingo

Co-authored-by: hf4all <[email protected]>

.dockerignore

@@ -0,0 +1,35 @@
+# 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*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.editorconfig

@@ -0,0 +1,36 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+# Use 4 spaces for the Python files
+[*.py]
+indent_size = 4
+max_line_length = 80
+
+# The JSON files contain newlines inconsistently
+[*.json]
+insert_final_newline = ignore
+
+# Minified JavaScript files shouldn't be changed
+[**.min.js]
+indent_style = ignore
+insert_final_newline = ignore
+
+# Makefiles always use tabs for indentation
+[Makefile]
+indent_style = tab
+
+# Batch files use tabs for indentation
+[*.bat]
+indent_style = tab
+
+[*.md]
+trim_trailing_whitespace = false
+

.env.example

@@ -0,0 +1,4 @@
+# 此配置全局生效，当用户没有配置用户信息时，此配置会做为默认配置，以下为示例配置，请根据实际情况修改。更多详情请参考 README.md
+
+# 文档地址 https://github.com/weaigc/bingo/blob/main/README.md#%E5%A6%82%E4%BD%95%E8%8E%B7%E5%8F%96-bing_header
+BING_HEADER=

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

.github/workflows/docker.yml

@@ -0,0 +1,28 @@
+name: Build Docker Image
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  github:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+
+      - name: Login to github registry
+        uses: actions-hub/docker/login@master
+        env:
+          DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
+          DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Build :latest
+        if: success()
+        run: docker build -t weaigc/bingo:latest .
+
+      - name: Push to docker hub :latest
+        if: success()
+        uses: actions-hub/docker@master
+        with:
+          args: push weaigc/bingo:latest

.github/workflows/huggingface.yml

@@ -0,0 +1,24 @@
+name: Sync to Hugging Face hub
+on:
+  workflow_run:
+    workflows: ["Build Docker Image"]
+    types:
+      - completed
+
+  # to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  sync-to-hub:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          lfs: true
+      - name: Push to hub
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+          HF_USERNAME: hf4all
+          SPACE_NAME: bingo
+        run: git push https://$HF_USERNAME:[email protected]/spaces/$HF_USERNAME/$SPACE_NAME main -f

.gitignore

@@ -0,0 +1,35 @@
+# 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*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Dockerfile

@@ -0,0 +1,36 @@
+FROM node:18
+
+
+ARG DEBIAN_FRONTEND=noninteractive
+
+ENV BING_HEADER ""
+
+# Set home to the user's home directory
+ENV HOME=/home/user \
+	PATH=/home/user/.local/bin:$PATH
+
+# Set up a new user named "user" with user ID 1000
+RUN useradd -o -u 1000 user && mkdir -p $HOME/app && chown -R user $HOME
+
+# Switch to the "user" user
+USER user
+
+# Set the working directory to the user's home directory
+WORKDIR $HOME/app
+
+# Install app dependencies
+# A wildcard is used to ensure both package.json AND package-lock.json are copied
+# where available (npm@5+)
+COPY --chown=user package*.json $HOME/app/
+
+RUN npm install
+
+# Copy the current directory contents into the container at $HOME/app setting the owner to the user
+COPY --chown=user . $HOME/app/
+
+RUN npm run build
+
+ENV PORT 7860
+EXPOSE 7860
+
+CMD npm start

LICENSE

@@ -0,0 +1,21 @@
+MIT License Copyright (c) 2023 weaigc
+
+Permission is hereby granted, free
+of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice
+(including the next paragraph) shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE 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 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,195 @@
+---
+title: bingo
+emoji: 📉
+colorFrom: red
+colorTo: red
+sdk: docker
+pinned: true
+license: mit
+duplicated_from: hf4all/bingo
+---
+
+<div align="center">
+
+# Bingo 
+
+Bingo，一个让你呼吸顺畅 New Bing。
+
+高度还原 New Bing 网页版的主要操作，国内可用，兼容绝大多数微软 Bing AI 的功能，可自行部署使用。
+
+![Github stars](https://badgen.net/github/stars/weaigc/bingo?icon=github&label=stars)
+![Gthub issues](https://img.shields.io/github/issues/weaigc/bingo)
+[![docker build](https://github.com/weaigc/bingo/actions/workflows/docker.yml/badge.svg)](https://hub.docker.com/repository/docker/weaigc/bingo/)
+[![docker hub](https://badgen.net/docker/size/weaigc/bingo?icon=docker&label=image%20size)](https://hub.docker.com/repository/docker/weaigc/bingo/)
+[![MIT License](https://img.shields.io/badge/license-MIT-97c50f)](https://github.com/weaigc/bingo/blob/main/license)
+
+</div>
+
+## 演示站点
+
+https://bing.github1s.tk
+
+
+
+[![img](./docs/images/demo.png)](https://bing.github1s.tk)
+
+## 功能和特点
+
+- 完全基于 Next.js 重写，高度还原 New Bing Web 版 UI，使用体验和 Bing AI 基本一致。
+- 支持 Docker 构建，方便快捷地部署和访问。
+- Cookie 可全局配置，全局共享。
+- 支持持续语音对话
+
+## RoadMap
+
+ - [x] 支持 wss 转发
+ - [x] 支持一键部署
+ - [x] 优化移动端展示
+ - [x] 支持画图
+ - [x] 支持语音输入(支持语音指令，目前仅支持 PC 版 Edge 及 Chrome 浏览器)
+ - [x] 支持语音输出(需要手动开启)
+ - [x] 支持图片输入
+ - [x] 支持自定义域名
+ - [ ] 支持历史记录
+ - [ ] 适配深色模式
+ - [ ] 支持内置提示词
+ - [ ] 支持离线访问
+ - [ ] 国际化翻译
+
+## 一键部署
+你也可以一键部署自己的 New Bing AI 到 🤗 HuggingFace 。
+
+### 部署到 Huggingface
+1. 点击此图标
+[![Deploy to HuggingFace](https://img.shields.io/badge/%E7%82%B9%E5%87%BB%E9%83%A8%E7%BD%B2-%F0%9F%A4%97-fff)](https://huggingface.co/login?next=%2Fspaces%2Fhf4all%2Fbingo%3Fduplicate%3Dtrue%26visibility%3Dpublic)，配置可以不改。
+
+2. 部署署完成后，点击“设置” 》“站点域名”，点一下，复制一下 HF 域名信息，然后分享给别人即可。
+
+> Huggingface 不支持绑定自己的域名，不过我们可以使用曲线救国的方式来达到这个目的
+> 1. 方式二，借助 Cloudflare Workers [部署Cloudflare Workers](#使用Cloudflare-Workers自定义域名)
+> 2. 方式一，借助 Github Pages 及 iframe [如何绑定域名](https://github.com/weaigc/bingo/issues/4)
+
+### 使用Cloudflare Workers自定义域名
+
+> 核心代码 [worker.js](./cloudflare/worker.js)
+
+- [注册 Cloudflare 账号](https://dash.cloudflare.com/sign-up)
+
+- 添加一个新的网站，需要你有自己的域名并且将域名`Name Server`托管给 Cloudflare 才行（更多信息可自行 Google)
+
+- 通过左侧菜单进入「Workers」，并点击「Create a Worker」。
+
+- 创建 Worker 服务，复制 [worker.js](./cloudflare/worker.js) 全部代码，粘贴至创建的服务中，根据注释进行改动，保存并部署。
+
+- 触发器 中自定义访问域名。
+
+### 部署其它平台
+<details>
+<summary>
+由于其他平台目前遭到 New Bing 封杀，会遇到很多问题，不再做推荐，有需要的可以自行查看
+</summary>
+
+#### 部署到 Netlify
+[![Deploy to Netlify Button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/weaigc/bingo)
+
+#### 部署到 Vercel
+如果你是 Vercel 付费用户，可以点以下链接一键部署到 Vercel。免费版本有[接口超时限制](https://vercel.com/docs/concepts/limits/overview)，不推荐使用
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?demo-title=bingo&demo-description=bingo&demo-url=https%3A%2F%2Fbing.github1s.tk%2F&project-name=bingo&repository-name=bingo&repository-url=https%3A%2F%2Fgithub.com%2Fweaigc%2Fbingo&from=templates&skippable-integrations=1&env=BING_HEADER&envDescription=%E5%A6%82%E6%9E%9C%E4%B8%8D%E7%9F%A5%E9%81%93%E6%80%8E%E4%B9%88%E9%85%8D%E7%BD%AE%E8%AF%B7%E7%82%B9%E5%8F%B3%E4%BE%A7Learn+More&envLink=https%3A%2F%2Fgithub.com%2Fweaigc%2Fbingo%2Fblob%2Fmain%2F.env.example)
+
+#### 部署到 Render
+
+[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/weaigc/bingo)
+</details>
+
+## 环境和依赖
+
+- Node.js >= 18
+- Bing AI 的[身份信息](#如何获取-BING_HEADER))
+
+## 安装和使用
+
+* 使用 Node 启动
+
+```bash
+git clone https://github.com/weaigc/bingo.git
+npm i # 推荐使用 pnpm i
+npm run build
+npm run start
+```
+
+* 使用 Docker 启动
+```bash
+docker pull weaigc/bingo
+docker run --rm -it -p 7860:7860 weaigc/bingo
+# 或者
+docker run --rm -it -e BING_HEADER=xxxx -p 7860:7860 weaigc/bingo
+```
+
+## 如何获取 BING_HEADER
+> 配置了 BING_HEADER 意味着你将自己的账号共享给所有���用此服务的人，如果不需要免登录画图的功能，不建议设置此变量
+
+打开 https://www.bing.com 并登录，然后访问 https://www.bing.com/turing/captcha/challenge，通过人机校验，然后
+
+![BING HEADER](./docs/images/curl.png)
+
+> 复制出来的内容应该如下所示。确认格式无误后，打开 https://effulgent-bubblegum-e2f5df.netlify.app/#dialog=%22settings%22 ，粘贴进去，点击“转成 BING_HEADER 并复制”，然后从剪切板粘贴即可得到。（你也可以先在网页上进行验证）
+
+以下是格式参考，需要注意的是，网页端保存的格式是以`curl`开头, 而服务端配置的 `BING_HEADER` 是 `base64` 格式，两者不能互通。
+<details>
+<summary>正常格式/网页端保存的格式(格式仅供参考)</summary>
+
+```
+curl 'https://www.bing.com/turing/captcha/challenge' \
+  -H 'authority: www.bing.com' \
+  -H 'accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7' \
+  -H 'accept-language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6' \
+  -H 'cache-control: max-age=0' \
+  -H 'cookie: MicrosoftApplicationsTelemetryDeviceId=3399c004-fd0e-48ec-bb92-d82a27b2bbd4; _EDGE_V=1; SRCHD=AF=NOFORM; SRCHUID=V=2&GUID=29EBDDA4E6674329ACCF1A0A423C3E98&dmnchg=1; _UR=QS=0&TQS=0; _HPVN=CS=eyJQbiI6eyJDbiI6MSwiU3QiOjAsIlFzIjowLCJQcm9kIjoiUCJ9LCJTYyI6eyJDbiI6MSwiU3QiOjAsIlFzIjowLCJQcm9kIjoiSCJ9LCJReiI6eyJDbiI6MSwiU3QiOjAsIlFzIjowLCJQcm9kIjoiVCJ9LCJBcCI6dHJ1ZSwiTXV0ZSI6dHJ1ZSwiTGFkIjoiMjAyMy0wNy0yNVQwMDowMDowMFoiLCJJb3RkIjowLCJHd2IiOjAsIkRmdCI6bnVsbCwiTXZzIjowLCJGbHQiOjAsIkltcCI6Mn0=; _RwBf=ilt=1&ihpd=1&ispd=0&rc=0&rb=0&gb=0&rg=200&pc=0&mtu=0&rbb=0&g=0&cid=&clo=0&v=1&l=2023-07-25T07:00:00.0000000Z&lft=0001-01-01T00:00:00.0000000&aof=0&o=2&p=&c=&t=0&s=0001-01-01T00:00:00.0000000+00:00&ts=2023-07-25T11:00:31.7111548+00:00&rwred=0&wls=&lka=0&lkt=0&TH=&dci=0; ANON=A=0043C6590EA808ED6E395059FFFFFFFF&E=1c8b&W=1; NAP=V=1.9&E=1c31&C=DnaMSbDN_4efZ_xXqBF3Daorjr53kYqYoaP8YHsupjmiXnysX7a37A&W=1; PPLState=1; KievRPSSecAuth=FABSBBRaTOJILtFsMkpLVWSG6AN6C/svRwNmAAAEgAAACMGUA7EGVSjGEAQBGHtNsc5sNL7unmJsfPJ2t6imfo4BeUJlAia3IpMTtMUy4PU/C5QAzRI5pODtsIee0+blgllXt/5IiWwGjwmdhivsFM597pRPkjARPfwsPhNLPNbJrCPNPHdje4Is78MnCADXw6/NBq2FL8V2/byw2fH6IuAMD2MvN/VvqpEa9ZxiDjZtENj4HEj0mO2SgzjfyEhVAkjvznJqU2rw/Q2tHmX94NAM2kzlzKF/hWPhCCUmu8IHLvCnHDS6mSptvJDDP/sp3ovtzOXkP1mlM/Xju5ftesUvccVEQGffXORa1dE5hEMbKIiKXz1tDdduSXE19g9/+mRMAjaQhpwhI8XmilCTx1adb1Ll5qK+VjC9GNfEZzcbsGBPVaOl+anG8rEMq+Xnhjo7J+NqTNolavHgcuV8kJsCeJZIged33UA8eOZeFo+wAECMguxMoSqgpGH+sthqynvD/FJD6r/tiU2N3uqVq8NE8V37asrN6T14Z0FGBJOe6ET1+PGApm3s11OY9/xhFEB9T5BEPUGEbvRcLcW2ncFQX0EU+xweiPqo1Q1hNUg/dCtSI+lZ7c2H8XheePZavZ0TJQ8oNCSAuKiTqJmI0fVGpwbXwfaADkEipuawz3fIuMJBNgMU0OtA7Hm59v2fGLIBuvi6YeKS6GgVk3BIPf+P/eKahwozrxQZaFnoHTSqMkvct7xCP4atBROfXKf5Ww0CcFKp+2WX9BIskTOo2jjk6bAyyYJ+ElUB1fgLKNk5m/YSMc9iYCLIBMIGN8F0Yvy3tZ7cvh7Ue5Klo98US/I+nW1G7ZJMHRgUO8h8lpneHqEMegKd8gynO4VF7RpCjJkunDmW0Ta+RkXAP619pg0dqHMFkoOgknN78oBbGTV6fJUKotv+vi61kLhAeXZGWoHGCRXh2wUC6YgfPgKA6ESRNHtFn7E5B3HHpLc5rVMDSNhKZYfdhupV4Ezf6+5DhMcZLZhi0kk+ivDiN1gdHlVtSN55xpvf+c+XZDzR0uhgcvgy0LAbmzgk6y4WbYH+LQsMpzNNj+aC72vMiWovWrKh9jY4MYCmdgxsS/skPtLdp18muiEIRXTbZQGUmhxFpJAIbBIsCscMpzL0BgeujxUwM5wr79Sd9r4xwbgSMwmBlBfUHRVBdNyg8feepeJbCS63nD6eHOuLqMRsPIio3w/ki/EAa92UUEiZeavLsMUD/y/qAvWUdzdP5Y+C/TM+CMGS/kGL4LEdY/28MQeTvU1qv1X21kQt2aiaj3pPVL36hAzxbcLgqcMo9oymDRy87kdCXW/+g4oKLtMh6fm/G6W6Y/B01JlxohyyvueHQIG557uzkEkTJ3FnOVODSKBKpb3WZ65rExfV71zSZa25F3GmpaIG6HiYrX2YYhQAkIE9pKEQBHbnwHuwNDGottZTXZw=; WLS=C=9df3f9d8518fae19&N=wen; WLID=pGY8HgWCu4p5XYCOk2oa0+DBdftkMUfmNIn8XtSjSTKsgv/Il7GUlYs0Jpjf/E12jZMgV7x44Dy3fXOgjjUoJx7Y/ClLrLhsk20THksJJoI=; _EDGE_S=F=1&SID=17CF6EE006426448213C7DB907436588&mkt=zh-CN; MUID=225621093D8A6C27301632413C0E6D08; MUIDB=225621093D8A6C27301632413C0E6D08; SUID=A; SNRHOP=I=&TS=; _U=nGyzKQruEsDwLiu65fZFIG6e12hf2lwTJmroW__k8joUJIKmG3OIjayXKGW9dCVR3sNhF76mEVxyW6yjUGPodOfjtSa3s3J_DxMOrEK1BqXCOBI9bC66spAIASV7prsYFlVAJz73jVNENp_tBubLHJy6EbT0BKRe4AjrYkH-9uMnmCKB8Zmyg; _SS=SID=17CF6EE006426448213C7DB907436588&R=0&RB=0&GB=0&RG=200&RP=0&PC=U531; SRCHS=PC=U531; USRLOC=HS=1&ELOC=LAT=22.501529693603516|LON=113.9263687133789|N=%E5%8D%97%E5%B1%B1%E5%8C%BA%EF%BC%8C%E5%B9%BF%E4%B8%9C%E7%9C%81|ELT=2|&CLOC=LAT=22.50153029046461|LON=113.92637070632928|A=733.4464586120832|TS=230726151034|SRC=W; SRCHUSR=DOB=20230725&T=1690384908000&POEX=W; ipv6=hit=1690388509974&t=6; SRCHHPGUSR=HV=1690384945&SRCHLANG=zh-Hans&PV=15.0.0&BRW=MW&BRH=MT&CW=410&CH=794&SCW=410&SCH=794&DPR=1.5&UTC=480&DM=0&WTS=63825879627&PRVCW=410&PRVCH=794&PR=1.5; cct=AjWIBYOoVP-Afq6gWwtx80If6yHn6iBuEVHA1XHdAKpny6Y_CVyi_MSyM94VyMWnjdYkkccVtm3czoIAtXUGQA; GC=AjWIBYOoVP-Afq6gWwtx80If6yHn6iBuEVHA1XHdAKpR3Y_D9Ytcks4Ht6XhadXk75dvhzP4YOUS0UmoEyqyxw' \
+  -H 'dnt: 1' \
+  -H 'sec-ch-ua: "Chromium";v="116", "Not)A;Brand";v="24", "Microsoft Edge";v="116"' \
+  -H 'sec-ch-ua-arch: "x86"' \
+  -H 'sec-ch-ua-bitness: "64"' \
+  -H 'sec-ch-ua-full-version: "116.0.1938.29"' \
+  -H 'sec-ch-ua-full-version-list: "Chromium";v="116.0.5845.42", "Not)A;Brand";v="24.0.0.0", "Microsoft Edge";v="116.0.1938.29"' \
+  -H 'sec-ch-ua-mobile: ?0' \
+  -H 'sec-ch-ua-model: ""' \
+  -H 'sec-ch-ua-platform: "Windows"' \
+  -H 'sec-ch-ua-platform-version: "15.0.0"' \
+  -H 'sec-fetch-dest: document' \
+  -H 'sec-fetch-mode: navigate' \
+  -H 'sec-fetch-site: none' \
+  -H 'sec-fetch-user: ?1' \
+  -H 'sec-ms-gec: B3F47AD4A283CAB374C0451C46AAFD147C6A4DACAFF6A1C13F34B2C72B024494' \
+  -H 'sec-ms-gec-version: 1-116.0.1938.29' \
+  -H 'upgrade-insecure-requests: 1' \
+  -H 'user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36 Edg/116.0.0.0' \
+  -H 'x-client-data: eyIxIjoiMiIsIjEwIjoiXCJTMGg3R05HOTF2aDQ1TUZSUnZ5NHN2akRmMWdlaVJKenNxNlA3aU1WbnF3PVwiIiwiMiI6IjEiLCIzIjoiMSIsIjQiOiIyMTU4ODQ5NTM4MjY4OTM5NTA3IiwiNSI6IlwiSm9GUWpPTDk3OS9MbkRRZnlCd2N1M2FsOUN3eTZTQmdaMGNYMXBtOWVMZz1cIiIsIjYiOiJiZXRhIiwiNyI6IjE4MDM4ODYyNjQzNSIsIjkiOiJkZXNrdG9wIn0=' \
+  -H 'x-edge-shopping-flag: 1' \
+  --compressed
+```
+</details>
+
+<details>
+<summary>转成base64之后的格式(BING_HEADER只能使用 base64 之后的格式)</summary>
+
+```
+Y3VybCAnaHR0cHM6Ly93d3cuYmluZy5jb20vdHVyaW5nL2NvbnZlcnNhdGlvbi9jcmVhdGUnIFwgICAtSCAnYXV0aG9yaXR5OiB3d3cuYmluZy5jb20nIFwgICAtSCAnYWNjZXB0OiB0ZXh0L2h0bWwsYXBwbGljYXRpb24veGh0bWwreG1sLGFwcGxpY2F0aW9uL3htbDtxPTAuOSxpbWFnZS93ZWJwLGltYWdlL2FwbmcsKi8qO3E9MC44LGFwcGxpY2F0aW9uL3NpZ25lZC1leGNoYW5nZTt2PWIzO3E9MC43JyBcICAgLUggJ2FjY2VwdC1sYW5ndWFnZTogemgtQ04semg7cT0wLjksZW47cT0wLjgsZW4tR0I7cT0wLjcsZW4tVVM7cT0wLjYnIFwgICAtSCAnY2FjaGUtY29udHJvbDogbWF4LWFnZT0wJyBcICAgLUggJ2Nvb2tpZTogTWljcm9zb2Z0QXBwbGljYXRpb25zVGVsZW1ldHJ5RGV2aWNlSWQ9MzM5OWMwMDQtZmQwZS00OGVjLWJiOTItZDgyYTI3YjJiYmQ0OyBfRURHRV9WPTE7IFNSQ0hEPUFGPU5PRk9STTsgU1JDSFVJRD1WPTImR1VJRD0yOUVCRERBNEU2Njc0MzI5QUNDRjFBMEE0MjNDM0U5OCZkbW5jaGc9MTsgX1VSPVFTPTAmVFFTPTA7IF9IUFZOPUNTPWV5SlFiaUk2ZXlKRGJpSTZNU3dpVTNRaU9qQXNJbEZ6SWpvd0xDSlFjbTlrSWpvaVVDSjlMQ0pUWXlJNmV5SkRiaUk2TVN3aVUzUWlPakFzSWxGeklqb3dMQ0pRY205a0lqb2lTQ0o5TENKUmVpSTZleUpEYmlJNk1Td2lVM1FpT2pBc0lsRnpJam93TENKUWNtOWtJam9pVkNKOUxDSkJjQ0k2ZEhKMVpTd2lUWFYwWlNJNmRISjFaU3dpVEdGa0lqb2lNakF5TXkwd055MHlOVlF3TURvd01Eb3dNRm9pTENKSmIzUmtJam93TENKSGQySWlPakFzSWtSbWRDSTZiblZzYkN3aVRYWnpJam93TENKR2JIUWlPakFzSWtsdGNDSTZNbjA9OyBfUndCZj1pbHQ9MSZpaHBkPTEmaXNwZD0wJnJjPTAmcmI9MCZnYj0wJnJnPTIwMCZwYz0wJm10dT0wJnJiYj0wJmc9MCZjaWQ9JmNsbz0wJnY9MSZsPTIwMjMtMDctMjVUMDc6MDA6MDAuMDAwMDAwMFombGZ0PTAwMDEtMDEtMDFUMDA6MDA6MDAuMDAwMDAwMCZhb2Y9MCZvPTImcD0mYz0mdD0wJnM9MDAwMS0wMS0wMVQwMDowMDowMC4wMDAwMDAwKzAwOjAwJnRzPTIwMjMtMDctMjVUMTE6MDA6MzEuNzExMTU0OCswMDowMCZyd3JlZD0wJndscz0mbGthPTAmbGt0PTAmVEg9JmRjaT0wOyBBTk9OPUE9MDA0M0M2NTkwRUE4MDhFRDZFMzk1MDU5RkZGRkZGRkYmRT0xYzhiJlc9MTsgTkFQPVY9MS45JkU9MWMzMSZDPURuYU1TYkROXzRlZlpfeFhxQkYzRGFvcmpyNTNrWXFZb2FQOFlIc3Vwam1pWG55c1g3YTM3QSZXPTE7IFBQTFN0YXRlPTE7IEtpZXZSUFNTZWNBdXRoPUZBQlNCQlJhVE9KSUx0RnNNa3BMVldTRzZBTjZDL3N2UndObUFBQUVnQUFBQ01HVUE3RUdWU2pHRUFRQkdIdE5zYzVzTkw3dW5tSnNmUEoydDZpbWZvNEJlVUpsQWlhM0lwTVR0TVV5NFBVL0M1UUF6Ukk1cE9EdHNJZWUwK2JsZ2xsWHQvNUlpV3dHandtZGhpdnNGTTU5N3BSUGtqQVJQZndzUGhOTFBOYkpyQ1BOUEhkamU0SXM3OE1uQ0FEWHc2L05CcTJGTDhWMi9ieXcyZkg2SXVBTUQyTXZOL1Z2cXBFYTlaeGlEalp0RU5qNEhFajBtTzJTZ3pqZnlFaFZBa2p2em5KcVUycncvUTJ0SG1YOTROQU0ya3psektGL2hXUGhDQ1VtdThJSEx2Q25IRFM2bVNwdHZKRERQL3NwM292dHpPWGtQMW1sTS9YanU1ZnRlc1V2Y2NWRVFHZmZYT1JhMWRFNWhFTWJLSWlLWHoxdERkZHVTWEUxOWc5LyttUk1BamFRaHB3aEk4WG1pbENUeDFhZGIxTGw1cUsrVmpDOUdOZkVaemNic0dCUFZhT2wrYW5HOHJFTXErWG5oam83SitOcVROb2xhdkhnY3VWOGtKc0NlSlpJZ2VkMzNVQThlT1plRm8rd0FFQ01ndXhNb1NxZ3BHSCtzdGhxeW52RC9GSkQ2ci90aVUyTjN1cVZxOE5FOFYzN2Fzck42VDE0WjBGR0JKT2U2RVQxK1BHQXBtM3MxMU9ZOS94aEZFQjlUNUJFUFVHRWJ2UmNMY1cybmNGUVgwRVUreHdlaVBxbzFRMWhOVWcvZEN0U0krbFo3YzJIOFhoZWVQWmF2WjBUSlE4b05DU0F1S2lUcUptSTBmVkdwd2JYd2ZhQURrRWlwdWF3ejNmSXVNSkJOZ01VME90QTdIbTU5djJmR0xJQnV2aTZZZUtTNkdnVmszQklQZitQL2VLYWh3b3pyeFFaYUZub0hUU3FNa3ZjdDd4Q1A0YXRCUk9mWEtmNVd3MENjRktwKzJXWDlCSXNrVE9vMmpqazZiQXl5WUorRWxVQjFmZ0xLTms1bS9ZU01jOWlZQ0xJQk1JR044RjBZdnkzdFo3Y3ZoN1VlNUtsbzk4VVMvSStuVzFHN1pKTUhSZ1VPOGg4bHBuZUhxRU1lZ0tkOGd5bk80VkY3UnBDakprdW5EbVcwVGErUmtYQVA2MTlwZzBkcUhNRmtvT2drbk43OG9CYkdUVjZmSlVLb3R2K3ZpNjFrTGhBZVhaR1dvSEdDUlhoMndVQzZZZ2ZQZ0tBNkVTUk5IdEZuN0U1QjNISHBMYzVyVk1EU05oS1pZZmRodXBWNEV6ZjYrNURoTWNaTFpoaTBraytpdkRpTjFnZEhsVnRTTjU1eHB2ZitjK1haRHpSMHVoZ2N2Z3kwTEFibXpnazZ5NFdiWUgrTFFzTXB6Tk5qK2FDNzJ2TWlXb3ZXcktoOWpZNE1ZQ21kZ3hzUy9za1B0TGRwMThtdWlFSVJYVGJaUUdVbWh4RnBKQUliQklzQ3NjTXB6TDBCZ2V1anhVd001d3I3OVNkOXI0eHdiZ1NNd21CbEJmVUhSVkJkTnlnOGZlZXBlSmJDUzYzbkQ2ZUhPdUxxTVJzUElpbzN3L2tpL0VBYTkyVVVFaVplYXZMc01VRC95L3FBdldVZHpkUDVZK0MvVE0rQ01HUy9rR0w0TEVkWS8yOE1RZVR2VTFxdjFYMjFrUXQyYWlhajNwUFZMMzZoQXp4YmNMZ3FjTW85b3ltRFJ5ODdrZENYVy8rZzRvS0x0TWg2Zm0vRzZXNlkvQjAxSmx4b2h5eXZ1ZUhRSUc1NTd1emtFa1RKM0ZuT1ZPRFNLQktwYjNXWjY1ckV4ZlY3MXpTWmEyNUYzR21wYUlHNkhpWXJYMllZaFFBa0lFOXBLRVFCSGJud0h1d05ER290dFpUWFp3PTsgV0xTPUM9OWRmM2Y5ZDg1MThmYWUxOSZOPXdlbjsgV0xJRD1wR1k4SGdXQ3U0cDVYWUNPazJvYTArREJkZnRrTVVmbU5JbjhYdFNqU1RLc2d2L0lsN0dVbFlzMEpwamYvRTEyalpNZ1Y3eDQ0RHkzZlhPZ2pqVW9KeDdZL0NsTHJMaHNrMjBUSGtzSkpvST07IF9FREdFX1M9Rj0xJlNJRD0xN0NGNkVFMDA2NDI2NDQ4MjEzQzdEQjkwNzQzNjU4OCZta3Q9emgtQ047IE1VSUQ9MjI1NjIxMDkzRDhBNkMyNzMwMTYzMjQxM0MwRTZEMDg7IE1VSURCPTIyNTYyMTA5M0Q4QTZDMjczMDE2MzI0MTNDMEU2RDA4OyBTVUlEPUE7IFNOUkhPUD1JPSZUUz07IF9VPW5HeXpLUXJ1RXNEd0xpdTY1ZlpGSUc2ZTEyaGYybHdUSm1yb1dfX2s4am9VSklLbUczT0lqYXlYS0dXOWRDVlIzc05oRjc2bUVWeHlXNnlqVUdQb2RPZmp0U2EzczNKX0R4TU9yRUsxQnFYQ09CSTliQzY2c3BBSUFTVjdwcnNZRmxWQUp6NzNqVk5FTnBfdEJ1YkxISnk2RWJUMEJLUmU0QWpyWWtILTl1TW5tQ0tCOFpteWc7IF9TUz1TSUQ9MTdDRjZFRTAwNjQyNjQ0ODIxM0M3REI5MDc0MzY1ODgmUj0wJlJCPTAmR0I9MCZSRz0yMDAmUlA9MCZQQz1VNTMxOyBTUkNIUz1QQz1VNTMxOyBVU1JMT0M9SFM9MSZFTE9DPUxBVD0yMi41MDE1Mjk2OTM2MDM1MTZ8TE9OPTExMy45MjYzNjg3MTMzNzg5fE49JUU1JThEJTk3JUU1JUIxJUIxJUU1JThDJUJBJUVGJUJDJThDJUU1JUI5JUJGJUU0JUI4JTlDJUU3JTlDJTgxfEVMVD0yfCZDTE9DPUxBVD0yMi41MDE1MzAyOTA0NjQ2MXxMT049MTEzLjkyNjM3MDcwNjMyOTI4fEE9NzMzLjQ0NjQ1ODYxMjA4MzJ8VFM9MjMwNzI2MTUxMDM0fFNSQz1XOyBTUkNIVVNSPURPQj0yMDIzMDcyNSZUPTE2OTAzODQ5MDgwMDAmUE9FWD1XOyBpcHY2PWhpdD0xNjkwMzg4NTA5OTc0JnQ9NjsgU1JDSEhQR1VTUj1IVj0xNjkwMzg0OTQ1JlNSQ0hMQU5HPXpoLUhhbnMmUFY9MTUuMC4wJkJSVz1NVyZCUkg9TVQmQ1c9NDEwJkNIPTc5NCZTQ1c9NDEwJlNDSD03OTQmRFBSPTEuNSZVVEM9NDgwJkRNPTAmV1RTPTYzODI1ODc5NjI3JlBSVkNXPTQxMCZQUlZDSD03OTQmUFI9MS41OyBjY3Q9QWpXSUJZT29WUC1BZnE2Z1d3dHg4MElmNnlIbjZpQnVFVkhBMVhIZEFLcG55NllfQ1Z5aV9NU3lNOTRWeU1XbmpkWWtrY2NWdG0zY3pvSUF0WFVHUUE7IEdDPUFqV0lCWU9vVlAtQWZxNmdXd3R4ODBJZjZ5SG42aUJ1RVZIQTFYSGRBS3BSM1lfRDlZdGNrczRIdDZYaGFkWGs3NWR2aHpQNFlPVVMwVW1vRXlxeXh3JyBcICAgLUggJ2RudDogMScgXCAgIC1IICdzZWMtY2gtdWE6ICJDaHJvbWl1bSI7dj0iMTE2IiwgIk5vdClBO0JyYW5kIjt2PSIyNCIsICJNaWNyb3NvZnQgRWRnZSI7dj0iMTE2IicgXCAgIC1IICdzZWMtY2gtdWEtYXJjaDogIng4NiInIFwgICAtSCAnc2VjLWNoLXVhLWJpdG5lc3M6ICI2NCInIFwgICAtSCAnc2VjLWNoLXVhLWZ1bGwtdmVyc2lvbjogIjExNi4wLjE5MzguMjkiJyBcICAgLUggJ3NlYy1jaC11YS1mdWxsLXZlcnNpb24tbGlzdDogIkNocm9taXVtIjt2PSIxMTYuMC41ODQ1LjQyIiwgIk5vdClBO0JyYW5kIjt2PSIyNC4wLjAuMCIsICJNaWNyb3NvZnQgRWRnZSI7dj0iMTE2LjAuMTkzOC4yOSInIFwgICAtSCAnc2VjLWNoLXVhLW1vYmlsZTogPzAnIFwgICAtSCAnc2VjLWNoLXVhLW1vZGVsOiAiIicgXCAgIC1IICdzZWMtY2gtdWEtcGxhdGZvcm06ICJXaW5kb3dzIicgXCAgIC1IICdzZWMtY2gtdWEtcGxhdGZvcm0tdmVyc2lvbjogIjE1LjAuMCInIFwgICAtSCAnc2VjLWZldGNoLWRlc3Q6IGRvY3VtZW50JyBcICAgLUggJ3NlYy1mZXRjaC1tb2RlOiBuYXZpZ2F0ZScgXCAgIC1IICdzZWMtZmV0Y2gtc2l0ZTogbm9uZScgXCAgIC1IICdzZWMtZmV0Y2gtdXNlcjogPzEnIFwgICAtSCAnc2VjLW1zLWdlYzogQjNGNDdBRDRBMjgzQ0FCMzc0QzA0NTFDNDZBQUZEMTQ3QzZBNERBQ0FGRjZBMUMxM0YzNEIyQzcyQjAyNDQ5NCcgXCAgIC1IICdzZWMtbXMtZ2VjLXZlcnNpb246IDEtMTE2LjAuMTkzOC4yOScgXCAgIC1IICd1cGdyYWRlLWluc2VjdXJlLXJlcXVlc3RzOiAxJyBcICAgLUggJ3VzZXItYWdlbnQ6IE1vemlsbGEvNS4wIChXaW5kb3dzIE5UIDEwLjA7IFdpbjY0OyB4NjQpIEFwcGxlV2ViS2l0LzUzNy4zNiAoS0hUTUwsIGxpa2UgR2Vja28pIENocm9tZS8xMTYuMC4wLjAgU2FmYXJpLzUzNy4zNiBFZGcvMTE2LjAuMC4wJyBcICAgLUggJ3gtY2xpZW50LWRhdGE6IGV5SXhJam9pTWlJc0lqRXdJam9pWENKVE1HZzNSMDVIT1RGMmFEUTFUVVpTVW5aNU5ITjJha1JtTVdkbGFWSktlbk54TmxBM2FVMVdibkYzUFZ3aUlpd2lNaUk2SWpFaUxDSXpJam9pTVNJc0lqUWlPaUl5TVRVNE9EUTVOVE00TWpZNE9UTTVOVEEzSWl3aU5TSTZJbHdpU205R1VXcFBURGszT1M5TWJrUlJabmxDZDJOMU0yRnNPVU4zZVRaVFFtZGFNR05ZTVhCdE9XVk1aejFjSWlJc0lqWWlPaUppWlhSaElpd2lOeUk2SWpFNE1ETTRPRFl5TmpRek5TSXNJamtpT2lKa1pYTnJkRzl3SW4wPScgXCAgIC1IICd4LWVkZ2Utc2hvcHBpbmctZmxhZzogMScgXCAgIC0tY29tcHJlc3NlZA==
+```
+</details>
+
+
+## 鸣谢
+ - 感谢 [EdgeGPT](https://github.com/acheong08/EdgeGPT) 提供的代理 API 的方法。
+ - 感谢 [Vercel AI](https://github.com/vercel-labs/ai-chatbot) 提供的基础脚手架和 [ChatHub](https://github.com/chathub-dev/chathub) [go-proxy-bingai](https://github.com/adams549659584/go-proxy-bingai) 提供的部分代码。 
+
+
+## 答疑及交流
+
+<image src="./docs/images/wechat.png" width=240 />
+
+## License
+
+MIT © [LICENSE](https://github.com/weaigc/bingo/blob/main/LICENSE).
+
+

cloudflare/worker.js

@@ -0,0 +1,18 @@
+const TRAGET_HOST='hf4all-bingo.hf.space' // 请将此域名改成你自己的，域名信息在设置》站点域名查看。
+
+export default {
+  async fetch(request) {
+    const uri = new URL(request.url);
+    if (uri.protocol === 'http:') {
+      uri.protocol = 'https:';
+      return new Response('', {
+        status: 301,
+        headers: {
+          location: uri.toString(),
+        },
+      })
+    }
+    uri.host = TRAGET_HOST
+    return fetch(new Request(uri.toString(), request));
+  },
+};

next.config.js

@@ -0,0 +1,38 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // output: 'export',
+  // assetPrefix: '.',
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+      config.resolve = {
+        ...config.resolve,
+        fallback: {
+          'bufferutil': false,
+          'utf-8-validate': false,
+          http: false,
+          https: false,
+          stream: false,
+          // fixes proxy-agent dependencies
+          net: false,
+          dns: false,
+          tls: false,
+          assert: false,
+          // fixes next-i18next dependencies
+          path: false,
+          fs: false,
+          // fixes mapbox dependencies
+          events: false,
+          // fixes sentry dependencies
+          process: false
+        }
+      };
+    }
+    config.module.exprContextCritical = false;
+
+    return config;
+  },
+}
+
+module.exports = (...args) => {
+  return nextConfig
+}

package.json

@@ -0,0 +1,92 @@
+{
+  "name": "bingo",
+  "version": "0.2.1",
+  "private": true,
+  "scripts": {
+    "dev": "cross-env DEBUG=bingo next dev --hostname 0.0.0.0",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@headlessui/react": "^1.7.15",
+    "@radix-ui/react-alert-dialog": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-select": "^1.2.2",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.6",
+    "autoprefixer": "10.4.14",
+    "cheerio": "^1.0.0-rc.12",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "debug": "^4.3.4",
+    "dotenv": "^16.3.1",
+    "eslint": "8.44.0",
+    "eslint-config-next": "13.4.9",
+    "form-data": "^4.0.0",
+    "http-proxy-middleware": "^2.0.6",
+    "https-proxy-agent": "^7.0.1",
+    "i18next": "^22.5.0",
+    "i18next-browser-languagedetector": "^7.0.2",
+    "idb-keyval": "^6.2.1",
+    "immer": "^9.0.19",
+    "inter-ui": "^3.19.3",
+    "jotai": "^2.2.1",
+    "jotai-immer": "^0.2.0",
+    "jotai-location": "^0.5.1",
+    "js-base64": "^3.7.5",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "nanoid": "^4.0.2",
+    "next": "13.4.9",
+    "next-auth": "^4.22.3",
+    "next-themes": "^0.2.1",
+    "postcss": "8.4.25",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-hot-toast": "^2.4.1",
+    "react-intersection-observer": "^9.5.2",
+    "react-markdown": "^8.0.7",
+    "react-syntax-highlighter": "^15.5.0",
+    "react-textarea-autosize": "^8.5.0",
+    "react-viewport-list": "^7.1.1",
+    "rehype-highlight": "^6.0.0",
+    "rehype-stringify": "^9.0.3",
+    "remark": "^14.0.3",
+    "remark-breaks": "^3.0.3",
+    "remark-gfm": "^3.0.1",
+    "remark-math": "^5.1.1",
+    "remark-parse": "^10.0.2",
+    "remark-rehype": "^10.1.0",
+    "remark-supersub": "^1.0.0",
+    "tailwind-merge": "^1.14.0",
+    "tailwind-scrollbar": "^3.0.4",
+    "tailwindcss": "3.3.2",
+    "typescript": "5.1.6",
+    "undici": "^5.22.1",
+    "websocket-as-promised": "^2.0.1",
+    "ws": "^8.13.0"
+  },
+  "devDependencies": {
+    "@headlessui/tailwindcss": "^0.1.3",
+    "@types/debug": "^4.1.8",
+    "@types/dom-speech-recognition": "^0.0.1",
+    "@types/lodash-es": "^4.17.7",
+    "@types/md5": "^2.3.2",
+    "@types/node": "20.4.2",
+    "@types/react": "18.2.14",
+    "@types/react-color": "^3.0.6",
+    "@types/react-copy-to-clipboard": "^5.0.4",
+    "@types/react-dom": "18.2.7",
+    "@types/react-scroll-to-bottom": "^4.2.0",
+    "@types/react-syntax-highlighter": "^15.5.6",
+    "@types/ws": "^8.5.5",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
+    "cross-env": "^7.0.3",
+    "sass": "^1.62.1"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

render.yaml

@@ -0,0 +1,12 @@
+services:
+- type: web
+  name: bingo
+  env: docker
+  autoDeploy: true
+  healthCheckPath: /api/healthz
+  plan: free
+  envVars:
+  - key: BING_HEADER
+    value:
+  - key: PORT
+    value: 10000

src/app/globals.scss

@@ -0,0 +1,1669 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --cib-color-foreground-accent-primary: #75306C;
+  --cib-color-foreground-accent-secondary: #692B61;
+  --cib-color-foreground-accent-tertiary: #5E2656;
+  --cib-color-foreground-accent-disabled: rgba(117, 48, 108, 0.3);
+  --cib-color-foreground-on-accent-primary: #FFFFFF;
+  --cib-color-foreground-on-accent-secondary: #FFF4F4;
+  --cib-color-foreground-on-accent-tertiary: #FFF4F4;
+  --cib-color-foreground-on-accent-disabled: rgba(255, 244, 244, 0.3);
+  --cib-color-foreground-neutral-primary: #111111;
+  --cib-color-foreground-neutral-secondary: #666666;
+  --cib-color-foreground-neutral-tertiary: #919191;
+  --cib-color-foreground-neutral-disabled: rgba(17, 17, 17, 0.4);
+  --cib-color-foreground-on-accent-strong-primary: #FFFFFF;
+  --cib-color-foreground-on-accent-strong-secondary: #FFFFFF;
+  --cib-color-foreground-on-accent-strong-disabled: rgba(255, 255, 255, 0.3);
+  --cib-color-foreground-system-attention-primary: #106EBE;
+  --cib-color-foreground-system-attribution-primary: #006621;
+  --cib-color-foreground-system-caution-primary: #9D5D00;
+  --cib-color-foreground-system-critical-primary: #C42B1C;
+  --cib-color-foreground-system-link-primary: #4007A2;
+  --cib-color-foreground-system-neutral-primary: rgba(0, 0, 0, 0.45);
+  --cib-color-foreground-system-success-primary: #0F7B0F;
+  --cib-color-fill-accent-primary: rgba(255, 255, 255, 0.7);
+  --cib-color-fill-accent-secondary: #FFF4F4;
+  --cib-color-fill-accent-tertiary: #FBE2E2;
+  --cib-color-fill-accent-disabled: rgba(255, 255, 255, 0.3);
+  --cib-color-fill-accent-alt-primary: #F6D0D0;
+  --cib-color-fill-accent-alt-secondary: #FFF4F4;
+  --cib-color-fill-accent-alt-tertiary: #FFF4F4;
+  --cib-color-fill-accent-alt-disabled: rgba(246, 208, 208, 0.3);
+  --cib-color-fill-accent-gradient-primary: linear-gradient(130deg, #914887 20%, #8B257E 77.5%);
+  --cib-color-fill-accent-gradient-secondary: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
+    linear-gradient(130deg, #914887 20%, #8B257E 77.5%);
+  --cib-color-fill-accent-gradient-tertiary: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
+    linear-gradient(130deg, #914887 20%, #8B257E 77.5%);
+  --cib-color-fill-accent-gradient-quaternary: linear-gradient(90deg, rgb(238, 237, 243) 0%, 0.77381%, rgb(239, 238, 244) 1.54762%, 6.72619%, rgb(239, 236, 243) 11.9048%, 12.381%, rgb(240, 237, 244) 12.8571%, 27.9167%, rgb(242, 236, 244) 42.9762%, 51.9048%, rgb(239, 236, 243) 60.8333%, 61.9643%, rgb(238, 235, 246) 63.0952%, 66.7262%, rgb(235, 234, 249) 70.3571%, 73.2738%, rgb(232, 232, 248) 76.1905%, 77.1429%, rgb(230, 231, 248) 78.0952%, 79.9405%, rgb(228, 229, 249) 81.7857%, 84.1667%, rgb(227, 228, 248) 86.5476%, 87.0238%, rgb(226, 227, 248) 87.5%, 89.3452%, rgb(224, 224, 252) 91.1905%, 95.5952%, rgb(220, 223, 252) 100%);
+  --cib-color-fill-accent-strong-primary: #742F6B;
+  --cib-color-fill-accent-strong-secondary: #692B61;
+  --cib-color-fill-accent-strong-tertiary: #5E2656;
+  --cib-color-fill-accent-strong-disabled: rgba(116, 47, 107, 0.3);
+  --cib-color-fill-neutral-primary: #FFFFFF;
+  --cib-color-fill-neutral-secondary: #F9F9F9;
+  --cib-color-fill-neutral-tertiary: #F3F3F3;
+  --cib-color-fill-neutral-quaternary: transparent;
+  --cib-color-fill-neutral-disabled: rgba(255, 255, 255, 0.3);
+  --cib-color-fill-neutral-transparent: transparent;
+  --cib-color-fill-neutral-alt-primary: transparent;
+  --cib-color-fill-neutral-alt-secondary: rgba(0, 0, 0, 0.06);
+  --cib-color-fill-neutral-alt-tertiary: rgba(0, 0, 0, 0.09);
+  --cib-color-fill-neutral-alt-quaternary: rgba(0, 0, 0, 0.12);
+  --cib-color-fill-neutral-alt-disabled: transparent;
+  --cib-color-fill-neutral-alt-transparent: transparent;
+  --cib-color-fill-neutral-strong-primary: #444444;
+  --cib-color-fill-neutral-strong-secondary: #666666;
+  --cib-color-fill-neutral-strong-tertriary: #767676;
+  --cib-color-fill-neutral-strong-disabled: rgba(68, 68, 68, 0.3);
+  --cib-color-fill-subtle-primary: transparent;
+  --cib-color-fill-subtle-secondary: rgba(0, 0, 0, 0.06);
+  --cib-color-fill-subtle-tertiary: rgba(0, 0, 0, 0.1);
+  --cib-color-fill-subtle-quaternary: rgba(0, 0, 0, 0.2);
+  --cib-color-fill-subtle-disabled: transparent;
+  --cib-color-fill-subtle-transparent: transparent;
+  --cib-color-fill-subtle-alt-primary: rgba(0, 0, 0, 0.06);
+  --cib-color-fill-subtle-alt-secondary: rgba(0, 0, 0, 0.1);
+  --cib-color-fill-subtle-alt-tertiary: rgba(0, 0, 0, 0.2);
+  --cib-color-fill-accent-gradient-balanced-primary: linear-gradient(130deg, #2870EA 20%, #1B4AEF 77.5%);
+  --cib-color-fill-accent-gradient-balanced-secondary: linear-gradient(130deg, #2870EA 20%, #1B4AEF 77.5%),
+    linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
+  --cib-color-fill-accent-gradient-balanced-tertiary: linear-gradient(130deg, #2870EA 20%, #1B4AEF 77.5%),
+    linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
+  --cib-color-fill-accent-gradient-balanced-quaternary: linear-gradient(90deg, rgb(239, 242, 247) 0%, 7.60286%, rgb(237, 240, 249) 15.2057%, 20.7513%, rgb(235, 239, 248) 26.297%, 27.6386%, rgb(235, 239, 248) 28.9803%, 38.2826%, rgb(231, 237, 249) 47.585%, 48.1216%, rgb(230, 236, 250) 48.6583%, 53.1306%, rgb(228, 236, 249) 57.6029%, 61.5385%, rgb(227, 234, 250) 65.4741%, 68.7835%, rgb(222, 234, 250) 72.093%, 75.7603%, rgb(219, 230, 248) 79.4275%, 82.8265%, rgb(216, 229, 248) 86.2254%, 87.8354%, rgb(213, 228, 249) 89.4454%, 91.8605%, rgb(210, 226, 249) 94.2755%, 95.4383%, rgb(209, 225, 248) 96.6011%, 98.3005%, rgb(208, 224, 247) 100%);
+  --cib-color-fill-accent-gradient-creative-primary: linear-gradient(130deg, #914887 20%, #8B257E 77.5%);
+  --cib-color-fill-accent-gradient-creative-secondary: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
+    linear-gradient(130deg, #914887 20%, #8B257E 77.5%);
+  --cib-color-fill-accent-gradient-creative-tertiary: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
+    linear-gradient(130deg, #914887 20%, #8B257E 77.5%);
+  --cib-color-fill-accent-gradient-creative-quaternary: linear-gradient(90deg, rgb(238, 237, 243) 0%, 0.77381%, rgb(239, 238, 244) 1.54762%, 6.72619%, rgb(239, 236, 243) 11.9048%, 12.381%, rgb(240, 237, 244) 12.8571%, 27.9167%, rgb(242, 236, 244) 42.9762%, 51.9048%, rgb(239, 236, 243) 60.8333%, 61.9643%, rgb(238, 235, 246) 63.0952%, 66.7262%, rgb(235, 234, 249) 70.3571%, 73.2738%, rgb(232, 232, 248) 76.1905%, 77.1429%, rgb(230, 231, 248) 78.0952%, 79.9405%, rgb(228, 229, 249) 81.7857%, 84.1667%, rgb(227, 228, 248) 86.5476%, 87.0238%, rgb(226, 227, 248) 87.5%, 89.3452%, rgb(224, 224, 252) 91.1905%, 95.5952%, rgb(220, 223, 252) 100%);
+  --cib-color-fill-accent-gradient-precise-primary: linear-gradient(130deg, #006880 20%, #005366 77.5%);
+  --cib-color-fill-accent-gradient-precise-secondary: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
+    linear-gradient(130deg, #006880 20%, #005366 77.5%);
+  --cib-color-fill-accent-gradient-precise-tertiary: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
+    linear-gradient(130deg, #006880 20%, #005366 77.5%);
+  --cib-color-fill-accent-gradient-precise-quaternary: linear-gradient(90deg, rgb(236, 242, 245) 0%, 1.3089%, rgb(234, 243, 245) 2.6178%, 17.4084%, rgb(232, 241, 242) 32.199%, 36.2565%, rgb(229, 241, 242) 40.3141%, 45.0262%, rgb(227, 240, 242) 49.7382%, 51.8325%, rgb(226, 239, 245) 53.9267%, 57.199%, rgb(224, 239, 245) 60.4712%, 62.9581%, rgb(220, 237, 245) 65.445%, 66.2304%, rgb(220, 237, 245) 67.0157%, 68.0628%, rgb(218, 236, 244) 69.1099%, 75.1309%, rgb(214, 233, 240) 81.1518%, 82.5916%, rgb(211, 231, 240) 84.0314%, 84.4241%, rgb(212, 231, 239) 84.8168%, 86.911%, rgb(210, 230, 239) 89.0052%, 94.5026%, rgb(207, 227, 236) 100%);
+  --cib-color-background-surface-app-primary: #FFFFFF;
+  --cib-color-background-surface-card-primary: rgba(255, 255, 255, 0.7);
+  --cib-color-background-surface-card-secondary: rgba(255, 255, 255, 0.4);
+  --cib-color-background-surface-card-tertiary: #FFFFFF;
+  --cib-color-background-surface-card-disabled: rgba(255, 255, 255, 0.4);
+  --cib-color-background-surface-smoke-primary: rgba(0, 0, 0, 0.5);
+  --cib-color-background-surface-solid-base: #F5F5F5;
+  --cib-color-background-surface-solid-secondary: #EEEEEE;
+  --cib-color-background-surface-solid-tertiary: #F9F9F9;
+  --cib-color-background-surface-solid-quaternary: #FFFFFF;
+  --cib-color-background-system-attention-primary: rgba(255, 255, 255, 0.5);
+  --cib-color-background-system-attention-strong: #106EBE;
+  --cib-color-background-system-success-primary: #DFF6DD;
+  --cib-color-background-system-success-strong: #0F7B0F;
+  --cib-color-background-system-caution-primary: #FFF4CE;
+  --cib-color-background-system-caution-strong: #9D5D00;
+  --cib-color-background-system-critical-primary: #FDE7E9;
+  --cib-color-background-system-critical-strong: #C42B1C;
+  --cib-color-stroke-accent-primary: #742F6B;
+  --cib-color-stroke-accent-secondary: #75306C;
+  --cib-color-stroke-accent-tertiary: #75306C;
+  --cib-color-stroke-accent-disabled: rgba(116, 47, 107, 0.3);
+  --cib-color-stroke-neutral-primary: rgba(0, 0, 0, 0.1);
+  --cib-color-stroke-neutral-secondary: rgba(0, 0, 0, 0.2);
+  --cib-color-stroke-neutral-tertiary: transparent;
+  --cib-color-stroke-neutral-alt-primary: rgba(0, 0, 0, 0.3);
+  --cib-color-stroke-surface-card-primary: transparent;
+  --cib-color-stroke-surface-card-solid: transparent;
+  --cib-color-stroke-surface-divider-primary: rgba(0, 0, 0, 0.1);
+  --cib-color-stroke-focus-outer: #111111;
+  --cib-color-stroke-focus-inner: #111111;
+  --cib-color-stroke-system-attention-primary: #106EBE;
+  --cib-color-stroke-system-success-primary: #0F7B0F;
+  --cib-color-stroke-system-caution-primary: #9D5D00;
+  --cib-color-stroke-system-critical-primary: #C42B1C;
+  --cib-color-stroke-system-neutral-primary: rgba(0, 0, 0, 0.45);
+  --cib-color-syntax-background-surface: rgba(0, 0, 0, 0.03);
+  --cib-color-syntax-background-green: #1B4721;
+  --cib-color-syntax-background-red: #78191B;
+  --cib-color-syntax-blue: #005CC5;
+  --cib-color-syntax-blue-strong: #032F62;
+  --cib-color-syntax-gold: #735C0F;
+  --cib-color-syntax-gray: #6A737D;
+  --cib-color-syntax-gray-strong: #24292E;
+  --cib-color-syntax-green: #22863A;
+  --cib-color-syntax-orange: #E36209;
+  --cib-color-syntax-purple: #6F42C1;
+  --cib-color-syntax-red: #D73A49;
+  --cib-color-syntax-red-strong: #B31D28;
+  --cib-action-bar-search-border-radius: 24px;
+  --cib-copy-host-border-radius: 8px;
+  --cib-copy-button-border-radius: 6px;
+  --cib-feedback-host-border-radius: 8px;
+  --cib-feedback-menu-border-radius: 8px;
+  --cib-feedback-menu-before-border-radius: 9px;
+  --cib-feedback-button-border-radius: 6px;
+  --cib-flyout-host-border-radius: 6px;
+  --cib-message-ac-container-border-radius: 3px;
+  --cib-modal-before-border-radius: 13px;
+  --cib-side-panel-aad-msa-redirect-border-radius: 9px;
+  --cib-thread-host-border-radius: 6px;
+  --cib-thread-host-preview-border-radius: 8px;
+  --cib-thread-name-border-radius: 3px;
+  --cib-tooltip-host-before-border-radius: 5px;
+  --cib-welcome-container-preview-button-border-radius: 3px;
+  --cib-color-icon-red-cancel: #c80000;
+  --cib-color-icon-green-confirm: #13a10e;
+  --cib-image-background: url(https://bing.vcanbb.top/cdx/bg.jpg);
+  --cib-shadow-card: 0px 0.3px 0.9px rgba(0, 0, 0, 0.12),
+    0px 1.6px 3.6px rgba(0, 0, 0, 0.16);
+  --cib-shadow-card-raised: 0px 0.6px 1.8px rgba(0, 0, 0, 0.12),
+    0px 3.2px 7.2px rgba(0, 0, 0, 0.16);
+  --cib-shadow-dialog: 0px 4.8px 14.4px rgba(0, 0, 0, 0.18),
+    0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
+  --cib-shadow-flyout: 0px 1.2px 3.6px rgba(0, 0, 0, 0.16),
+    0px 6.4px 14.4px rgba(0, 0, 0, 0.2);
+  --cib-shadow-layer: 0px 0.15px 0.45px rgba(0, 0, 0, 0.12),
+    0px 0.8px 1.8px rgba(0, 0, 0, 0.16);
+  --cib-shadow-panel: 0px 14px 28px rgba(0, 0, 0, 0.24),
+    0px 0px 8px rgba(0, 0, 0, 0.2);
+  --cib-shadow-tooltip: 0px 1.2px 3.6px rgba(0, 0, 0, 0.16),
+    0px 6.4px 14.4px rgba(0, 0, 0, 0.2);
+  --cib-shadow-elevation-1: 0px 0.075px 0.225px rgba(0, 0, 0, 0.12),
+    0px 0.4px 0.9px rgba(0, 0, 0, 0.16);
+  --cib-shadow-elevation-2: 0px 0.15px 0.45px rgba(0, 0, 0, 0.12),
+    0px 0.8px 1.8px rgba(0, 0, 0, 0.16);
+  --cib-shadow-elevation-4: 0px 0.3px 0.9px rgba(0, 0, 0, 0.12),
+    0px 1.6px 3.6px rgba(0, 0, 0, 0.16);
+  --cib-shadow-elevation-8: 0px 0.6px 1.8px rgba(0, 0, 0, 0.12),
+    0px 3.2px 7.2px rgba(0, 0, 0, 0.16);
+  --cib-shadow-elevation-16: 0px 1.2px 3.6px rgba(0, 0, 0, 0.16),
+    0px 6.4px 14.4px rgba(0, 0, 0, 0.2);
+  --cib-shadow-elevation-28: 0px 14px 28px rgba(0, 0, 0, 0.24),
+    0px 0px 8px rgba(0, 0, 0, 0.2);
+  --cib-shadow-elevation-64: 0px 4.8px 14.4px rgba(0, 0, 0, 0.18),
+    0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
+  --cib-border-radius-none: 0;
+  --cib-border-radius-small: 2px;
+  --cib-border-radius-medium: 4px;
+  --cib-border-radius-large: 8px;
+  --cib-border-radius-extra-large: 12px;
+  --cib-border-radius-circular: 10000px;
+  --cib-font-text: -apple-system,
+    Roboto,
+    SegoeUI,
+    'Segoe UI',
+    'Helvetica Neue',
+    Helvetica,
+    'Microsoft YaHei',
+    'Meiryo UI',
+    Meiryo,
+    Arial Unicode MS,
+    sans-serif;
+  --cib-font-icons: 'Fluent Icons';
+  --cib-type-caption2-font-size: 10px;
+  --cib-type-caption2-line-height: 14px;
+  --cib-type-caption2-font-weight: 400;
+  --cib-type-caption2-font-variation-settings: unset;
+  --cib-type-caption2-strong-font-size: 10px;
+  --cib-type-caption2-strong-line-height: 14px;
+  --cib-type-caption2-strong-font-weight: 600;
+  --cib-type-caption2-strong-font-variation-settings: unset;
+  --cib-type-caption1-font-size: 12px;
+  --cib-type-caption1-line-height: 16px;
+  --cib-type-caption1-font-weight: 400;
+  --cib-type-caption1-font-variation-settings: unset;
+  --cib-type-caption1-strong-font-size: 12px;
+  --cib-type-caption1-strong-line-height: 16px;
+  --cib-type-caption1-strong-font-weight: 600;
+  --cib-type-caption1-strong-font-variation-settings: unset;
+  --cib-type-caption1-stronger-font-size: 12px;
+  --cib-type-caption1-stronger-line-height: 16px;
+  --cib-type-caption1-stronger-font-weight: 700;
+  --cib-type-caption1-stronger-font-variation-settings: unset;
+  --cib-type-body1-font-size: 14px;
+  --cib-type-body1-line-height: 20px;
+  --cib-type-body1-font-weight: 400;
+  --cib-type-body1-font-variation-settings: unset;
+  --cib-type-body1-strong-font-size: 14px;
+  --cib-type-body1-strong-line-height: 20px;
+  --cib-type-body1-strong-font-weight: 500;
+  --cib-type-body1-strong-font-variation-settings: unset;
+  --cib-type-body1-stronger-font-size: 14px;
+  --cib-type-body1-stronger-line-height: 20px;
+  --cib-type-body1-stronger-font-weight: 600;
+  --cib-type-body1-stronger-font-variation-settings: unset;
+  --cib-type-body2-font-size: 16px;
+  --cib-type-body2-line-height: 24px;
+  --cib-type-body2-font-weight: 400;
+  --cib-type-body2-font-variation-settings: unset;
+  --cib-type-subtitle2-font-size: 16px;
+  --cib-type-subtitle2-line-height: 24px;
+  --cib-type-subtitle2-font-weight: 500;
+  --cib-type-subtitle2-font-variation-settings: unset;
+  --cib-type-subtitle2-stronger-font-size: 16px;
+  --cib-type-subtitle2-stronger-line-height: 24px;
+  --cib-type-subtitle2-stronger-font-weight: 600;
+  --cib-type-subtitle2-stronger-font-variation-settings: unset;
+  --cib-type-subtitle1-font-size: 20px;
+  --cib-type-subtitle1-line-height: 26px;
+  --cib-type-subtitle1-font-weight: 500;
+  --cib-type-subtitle1-font-variation-settings: unset;
+  --cib-type-subtitle1-stronger-font-size: 20px;
+  --cib-type-subtitle1-stronger-line-height: 26px;
+  --cib-type-subtitle1-stronger-font-weight: 600;
+  --cib-type-subtitle1-stronger-font-variation-settings: unset;
+  --cib-type-message-font-size: 18px;
+  --cib-type-message-line-height: 24px;
+  --cib-type-message-font-weight: 400;
+  --cib-type-message-font-variation-settings: unset;
+  --cib-type-message-strong-font-size: 18px;
+  --cib-type-message-strong-line-height: 24px;
+  --cib-type-message-strong-font-weight: 600;
+  --cib-type-message-strong-font-variation-settings: unset;
+  --cib-type-title3-font-size: 24px;
+  --cib-type-title3-line-height: 32px;
+  --cib-type-title3-font-weight: 600;
+  --cib-type-title3-font-variation-settings: unset;
+  --cib-type-title2-font-size: 28px;
+  --cib-type-title2-line-height: 36px;
+  --cib-type-title2-font-weight: 600;
+  --cib-type-title2-font-variation-settings: unset;
+  --cib-type-title1-font-size: 32px;
+  --cib-type-title1-line-height: 40px;
+  --cib-type-title1-font-weight: 600;
+  --cib-type-title1-font-variation-settings: unset;
+  --cib-type-large-title-font-size: 40px;
+  --cib-type-large-title-line-height: 52px;
+  --cib-type-large-title-font-weight: 600;
+  --cib-type-large-title-font-variation-settings: unset;
+  --cib-type-display-font-size: 68px;
+  --cib-type-display-line-height: 92px;
+  --cib-type-display-font-weight: 600;
+  --cib-type-display-font-variation-settings: unset;
+  --cib-motion-duration-faster: 83ms;
+  --cib-motion-duration-fast: 187ms;
+  --cib-motion-duration-normal: 333ms;
+  --cib-motion-duration-slow: 500ms;
+  --cib-motion-duration-slower: 667ms;
+  --cib-motion-duration-slowest: 1000ms;
+  --cib-motion-duration-faster-number: 83;
+  --cib-motion-duration-fast-number: 187;
+  --cib-motion-duration-normal-number: 333;
+  --cib-motion-duration-slow-number: 500;
+  --cib-motion-duration-slower-number: 667;
+  --cib-motion-duration-slowest-number: 1000;
+  --cib-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
+  --cib-motion-easing-in: cubic-bezier(0, 0, 0, 1);
+  --cib-motion-easing-out: cubic-bezier(1, 0, 1, 1);
+  --cib-motion-easing-strong: cubic-bezier(0.13, 1.62, 0, 0.92);
+  --cib-motion-easing-direct: cubic-bezier(0.55, 0.55, 0, 1);
+  --cib-motion-easing-transition: cubic-bezier(0.75, 0, 0.25, 1);
+  --button-compose-collapsed-width: 48px;
+  --button-compose-expanded-width: 116px;
+  font-family: var(--cib-font-text);
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: light !important;
+  }
+}
+
+body {
+  background: var(--cib-color-fill-accent-gradient-creative-quaternary);
+}
+
+.bg-background {
+  background: var(--cib-color-background-surface-app-primary);
+}
+
+main {
+  margin: 0 auto;
+  position: relative;
+  width: calc(100% - var(--side-panel-width));
+}
+
+:root {
+  --side-panel-width: 280px;
+}
+
+@media (max-width: 767px) {
+  :root {
+    --side-panel-width: 16px;
+  }
+}
+
+.chat-container,
+.suggestion-items {
+  max-width: 1120px;
+  margin: 0 auto;
+}
+
+.welcome-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  height: 100%;
+  gap: 24px;
+  justify-content: center;
+}
+
+.welcome-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  background: transparent;
+  border: none;
+  font-family: var(--cib-font-text);
+}
+
+.item-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  min-height: 52px;
+  color: var(--cib-color-foreground-neutral-primary);
+  font-family: var(--cib-font-text);
+  font-size: var(--cib-type-message-strong-font-size);
+  line-height: var(--cib-type-message-strong-line-height);
+  font-weight: var(--cib-type-message-strong-font-weight);
+  font-variation-settings: var(--cib-type-message-strong-font-variation-settings);
+}
+
+.item-content {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  position: relative;
+  height: 100%;
+  background: var(--cib-color-background-surface-card-primary);
+  border-radius: var(--cib-border-radius-medium);
+  text-align: start;
+  outline: transparent solid 1px;
+  box-sizing: border-box;
+  padding: 20px;
+  cursor: pointer;
+}
+
+.item-content::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  z-index: -1;
+  opacity: 0;
+  background: var(--cib-color-background-surface-card-primary);
+  border-radius: var(--cib-border-radius-medium);
+  transition-property: opacity;
+  transition-duration: var(--cib-motion-duration-fast);
+  transition-timing-function: var(--cib-motion-easing-transition);
+  box-shadow: var(--cib-shadow-card);
+}
+
+.item-content:hover::before {
+  opacity: 1;
+}
+
+.item-body {
+  color: var(--cib-color-foreground-neutral-primary);
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--cib-font-text);
+  font-size: var(--cib-type-body2-font-size);
+  line-height: var(--cib-type-body2-line-height);
+  font-weight: var(--cib-type-body2-font-weight);
+  font-variation-settings: var(--cib-type-body2-font-variation-settings);
+}
+
+.fieldset {
+  margin: 48px auto;
+  padding: 0px;
+  border: none;
+  width: 310px;
+  transition-property: opacity;
+  transition-duration: var(--cib-motion-duration-fast);
+  transition-timing-function: var(--cib-motion-easing-transition);
+}
+
+.legend {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.caption-2-strong {
+  font-size: var(--cib-type-caption2-strong-font-size);
+  line-height: var(--cib-type-caption2-strong-line-height);
+  font-weight: var(--cib-type-caption2-strong-font-weight);
+  font-variation-settings: var(--cib-type-caption2-strong-font-variation-settings);
+}
+
+.label-modifier {
+  display: block;
+  margin-bottom: -2px;
+}
+
+.options-list-container {
+  padding: 3px;
+  margin: 16px 0px;
+  border-radius: var(--cib-border-radius-large);
+  background: var(--cib-color-background-surface-card-primary);
+  box-shadow: var(--cib-shadow-card);
+}
+
+.options {
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+  padding: 0px;
+  margin: 0px;
+  list-style: none;
+}
+
+.option {
+  display: inline-block;
+  min-width: 96px;
+  height: 42px;
+  padding: 0px;
+  outline: transparent solid 1px;
+  border-radius: var(--cib-border-radius-medium);
+}
+
+.option button {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 0px 8px;
+  border: none;
+  border-radius: var(--cib-border-radius-medium);
+  background: transparent;
+  cursor: pointer;
+  font-family: var(--cib-font-text);
+}
+
+.option button.selected {
+  color: var(--cib-color-foreground-on-accent-primary);
+  background: var(--cib-color-fill-accent-gradient-primary);
+}
+
+.text-message {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  max-width: min(768px, 100%);
+  margin-inline-end: 80px;
+  width: fit-content;
+  opacity: 1;
+  z-index: 10;
+  outline: transparent solid 1px;
+  box-shadow: var(--cib-shadow-card);
+  border-radius: var(--cib-border-radius-extra-large);
+  background: var(--cib-color-background-surface-card-primary);
+}
+
+.text-message {
+  &.user {
+    align-items: flex-end;
+    align-self: flex-end;
+    margin-inline-end: unset;
+    margin-inline-start: 80px;
+    z-index: 10;
+    background: var(--cib-color-fill-accent-gradient-primary);
+    box-shadow: var(--cib-shadow-elevation-4);
+    color: var(--cib-color-foreground-on-accent-primary);
+  }
+
+  &.bot {
+    a {
+      color: var(--cib-color-foreground-system-link-primary);
+    }
+  }
+
+  &.user {
+    img {
+      max-width: 300px;
+      max-height: 300px;
+      object-fit: contain;
+    }
+  }
+
+  a {
+    position: relative;
+    text-decoration: none;
+  }
+}
+
+
+.text-message-content {
+  display: flex;
+  flex-direction: column;
+  padding: 10px 16px 4px 16px;
+  user-select: text;
+  word-break: break-word;
+  min-height: var(--cib-type-body2-line-height);
+  font-size: var(--cib-type-body2-font-size);
+  line-height: var(--cib-type-body2-line-height);
+  font-weight: var(--cib-type-body2-font-weight);
+  font-variation-settings: var(--cib-type-body2-font-variation-settings);
+  overflow: hidden;
+
+  h1 {
+    font-size: var(--cib-type-title2-font-size);
+    line-height: var(--cib-type-title2-line-height);
+    font-weight: var(--cib-type-title2-font-weight);
+    font-variation-settings: var(--cib-type-title2-font-variation-settings);
+  }
+
+  p,
+  h1,
+  h2,
+  h3,
+  h4 {
+    padding: 0px;
+    user-select: text;
+    word-break: break-word;
+    display: block;
+  }
+
+  pre {
+    display: block;
+  }
+
+  ol,
+  menu {
+    list-style: decimal;
+    margin: 0;
+    padding: 0;
+    padding-inline-start: 24px;
+  }
+
+  ul,
+  ol {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding-inline-start: 24px;
+  }
+
+  ul {
+    list-style: disc;
+  }
+
+  >*:nth-child(n+2) {
+    margin-top: 12px;
+  }
+
+  .codeblock {
+    border-radius: var(--cib-border-radius-large);
+    overflow: hidden;
+  }
+
+  blockquote>p>img {
+    max-width: 50%;
+    float: left;
+  }
+}
+
+table,
+ul,
+ol,
+p {
+  padding-bottom: 12px;
+}
+
+.text-message-footer {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  justify-content: space-between;
+
+  border-top: 1px solid var(--cib-color-stroke-neutral-primary);
+  padding: 0px;
+  align-items: self-start;
+}
+
+.learn-more-root {
+  display: flex;
+  flex-direction: row;
+  row-gap: 8px;
+  padding: 0px 16px;
+  margin: 9px 0px;
+  overflow: hidden;
+}
+
+@media (max-width: 600px) {
+  .learn-more-root {
+    flex-wrap: wrap;
+  }
+}
+
+.learn-more {
+  position: relative;
+  align-self: flex-start;
+  min-width: fit-content;
+  top: 2px;
+  inset-inline-start: 1px;
+  margin-inline-end: 8px;
+  font-size: var(--cib-type-body1-stronger-font-size);
+  line-height: var(--cib-type-body1-stronger-line-height);
+  font-weight: var(--cib-type-body1-stronger-font-weight);
+  font-variation-settings: var(--cib-type-body1-stronger-font-variation-settings);
+}
+
+.attribution-container {
+  display: flex;
+  flex-direction: row;
+  row-gap: 6px;
+}
+
+.attribution-items {
+  display: flex;
+  flex-flow: wrap;
+  row-gap: 6px;
+}
+
+.attribution-item {
+  cursor: pointer;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: max-content;
+  height: 24px;
+  border-radius: var(--cib-border-radius-medium);
+  box-sizing: border-box;
+  padding: 0px 8px;
+  margin-inline-end: 6px;
+  color: var(--cib-color-foreground-accent-primary);
+  background: var(--cib-color-fill-accent-alt-primary);
+  font-family: var(--cib-font-text);
+  font-size: var(--cib-type-body1-strong-font-size);
+  line-height: var(--cib-type-body1-strong-line-height);
+  font-weight: var(--cib-type-body1-strong-font-weight);
+  font-variation-settings: var(--cib-type-body1-strong-font-variation-settings);
+}
+
+.turn-counter {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+  margin-inline-start: 12px;
+  grid-area: 1 / 2 / 2 / 3;
+  margin: 9px 14px;
+
+  .text {
+    display: flex;
+    gap: 3px;
+    font-size: var(--cib-type-body1-stronger-font-size);
+    line-height: var(--cib-type-body1-stronger-line-height);
+    font-weight: var(--cib-type-body1-stronger-font-weight);
+    font-variation-settings: var(--cib-type-body1-stronger-font-variation-settings);
+  }
+
+  .indicator {
+    width: 12px;
+    height: 12px;
+    border-radius: var(--cib-border-radius-circular);
+    background: rgb(44, 130, 71);
+  }
+}
+
+button {
+  &:focus {
+    outline: none !important;
+  }
+}
+
+@media (max-width: 600px) {
+  .turn-counter {
+    inset-inline-end: 0px;
+  }
+}
+
+@media (max-width: 767px) {
+  .suggestion-items {
+    display: contents;
+  }
+}
+
+.suggestion-items {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-flow: wrap;
+  gap: 8px 8px;
+  order: 1;
+  padding-inline-end: 2px;
+  overflow: hidden;
+}
+
+.suggestion-container {
+  height: 30px;
+  min-width: max-content;
+  overflow: hidden;
+  box-sizing: border-box;
+  padding: 0px 12px;
+  margin: 1px;
+  cursor: pointer;
+  border: 1px solid var(--cib-color-stroke-accent-primary);
+  color: var(--cib-color-foreground-accent-primary);
+  background: var(--cib-color-fill-accent-primary);
+  border-radius: var(--cib-border-radius-large);
+  font-family: var(--cib-font-text);
+  font-size: var(--cib-type-body1-strong-font-size);
+  line-height: var(--cib-type-body1-strong-line-height);
+  font-weight: var(--cib-type-body1-strong-font-weight);
+  font-variation-settings: var(--cib-type-body1-strong-font-variation-settings);
+
+  &:hover,
+  &:focus {
+    background: var(--cib-color-fill-accent-secondary);
+    border-color: var(--cib-color-stroke-accent-secondary);
+    color: var(--cib-color-foreground-accent-secondary);
+  }
+}
+
+.typing-control-item {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  justify-content: center;
+  background: var(--cib-color-fill-accent-secondary);
+  border-radius: var(--cib-border-radius-large);
+  height: 40px;
+  box-sizing: border-box;
+  padding: 0px 8px;
+  color: var(--cib-color-foreground-accent-primary);
+  fill: var(--cib-color-foreground-accent-primary);
+  border: 1px solid var(--cib-color-stroke-accent-primary);
+  font-family: var(--cib-font-text);
+  font-size: var(--cib-type-subtitle2-font-size);
+  line-height: var(--cib-type-subtitle2-line-height);
+  font-weight: var(--cib-type-subtitle2-font-weight);
+  font-variation-settings: var(--cib-type-subtitle2-font-variation-settings);
+
+  &>.stop {
+    gap: 2px;
+    padding: 0px 12px;
+  }
+}
+
+.notification-container {
+  align-items: flex-end;
+  justify-content: center;
+  width: 100%;
+  transition-property: transform, max-width, min-width;
+  transition-duration: var(--cib-motion-duration-slowest);
+  transition-timing-function: var(--cib-motion-easing-transition);
+
+  .bottom-notifications {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin: 60px 0px 0px;
+  }
+
+  .inline-type {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    width: 100%;
+    max-width: 1120px;
+    color: var(--cib-color-foreground-neutral-primary);
+    font-size: var(--cib-type-body2-font-size);
+    line-height: var(--cib-type-body2-line-height);
+    font-weight: var(--cib-type-body2-font-weight);
+    font-variation-settings: var(--cib-type-body2-font-variation-settings);
+
+    &.with-decorative-line {
+      &::before {
+        margin-inline-end: 1vw;
+      }
+
+      &::before,
+      &::after {
+        content: "";
+        flex: 1 1 0%;
+        border-bottom: 1px solid var(--cib-color-stroke-neutral-primary);
+      }
+    }
+
+    .text-container {
+      max-width: 80%;
+      padding: 0px 10px;
+      align-items: center;
+    }
+
+    .title {
+      position: relative;
+      color: var(--cib-color-foreground-neutral-primary);
+
+      a {
+        color: var(--cib-color-foreground-system-link-primary);
+      }
+    }
+  }
+}
+
+@media (max-width: 767px) {
+  .inline-type {
+    margin-bottom: unset;
+  }
+}
+
+.action-bar {
+  position: fixed;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  min-height: 90px;
+  bottom: 0;
+  box-sizing: border-box;
+  z-index: 100;
+  width: 100%;
+  left: 0;
+  transition-property: transform, max-width, min-width;
+  transition-duration: var(--cib-motion-duration-slowest);
+  transition-timing-function: var(--cib-motion-easing-transition);
+}
+
+.action-root {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  width: calc(100% - var(--side-panel-width));
+  height: auto;
+  max-width: 1120px;
+  min-height: 90px;
+  transition-property: width, max-width;
+  transition-duration: var(--cib-motion-duration-slowest);
+  transition-timing-function: var(--cib-motion-easing-transition);
+}
+
+.root[visual-search] .main-container {
+  padding-inline-end: 84px;
+}
+
+.main-container {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  justify-content: space-between;
+  align-items: flex-start;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 48px;
+  box-sizing: border-box;
+  padding-block: 13px 11px;
+  padding-inline: 16px;
+  z-index: 1;
+  background: var(--cib-color-background-surface-solid-quaternary);
+  border-radius: var(--cib-action-bar-search-border-radius);
+  outline: transparent solid 1px;
+  cursor: text;
+  transition-property: min-height, height, width, transform, border-radius, box-shadow;
+  transition-duration: var(--cib-motion-duration-fast);
+  transition-timing-function: var(--cib-motion-easing-in);
+  transition-delay: var(--cib-motion-duration-faster);
+  box-shadow: var(--cib-shadow-card);
+
+  img {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  textarea {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+  }
+
+  &:hover,
+  &.active {
+    min-height: 90px;
+    border-radius: var(--cib-border-radius-extra-large);
+
+    .bottom-bar {
+      opacity: 1;
+    }
+
+    textarea {
+      white-space: pre-wrap;
+    }
+  }
+
+  .main-bar {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    gap: 16px;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    &>*:nth-child(n+5) {
+      display: none;
+    }
+  }
+
+  .message-input {
+    max-height: 50vh;
+    overflow-y: auto;
+  }
+}
+
+.body-1 {
+  font-size: var(--cib-type-body1-font-size);
+  line-height: var(--cib-type-body1-line-height);
+  font-weight: var(--cib-type-body1-font-weight);
+  font-variation-settings: var(--cib-type-body1-font-variation-settings);
+}
+
+.body-2 {
+  font-size: var(--cib-type-body2-font-size);
+  line-height: var(--cib-type-body2-line-height);
+  font-weight: var(--cib-type-body2-font-weight);
+  font-variation-settings: var(--cib-type-body2-font-variation-settings);
+}
+
+.outside-left-container {
+  position: relative;
+  align-self: flex-end;
+  height: 48px;
+  bottom: 42px;
+  margin: 0px;
+  padding: 0px;
+  transition-property: opacity;
+  transition-duration: var(--cib-motion-duration-slow);
+  transition-delay: var(--cib-motion-duration-normal);
+  transition-timing-function: var(--cib-motion-easing-transition);
+
+  .button-compose-wrapper {
+    transition-property: opacity, transform;
+    transition-duration: var(--cib-motion-duration-fast);
+    transition-timing-function: var(--cib-motion-easing-in);
+  }
+
+  .button-compose {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    height: 48px;
+    width: var(--button-compose-expanded-width);
+    font-family: var(--cib-font-text);
+    border-radius: var(--cib-border-radius-circular);
+    color: var(--cib-color-foreground-on-accent-primary);
+    fill: var(--cib-color-foreground-on-accent-primary);
+    background: transparent;
+    border: none;
+    outline: transparent solid 1px;
+    margin: 0px;
+    padding: 0px;
+    overflow: hidden;
+    transition-property: width, opacity;
+    transition-duration: var(--cib-motion-duration-normal);
+    transition-timing-function: var(--cib-motion-easing-in);
+
+    &:not([disabled]) {
+      pointer-events: auto;
+      cursor: pointer;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-radius: var(--cib-border-radius-circular);
+      background: var(--cib-color-fill-accent-gradient-primary);
+      box-shadow: var(--cib-shadow-elevation-4);
+      transition-property: transform;
+      transition-duration: var(--cib-motion-duration-fast);
+      transition-timing-function: var(--cib-motion-easing-in);
+    }
+  }
+
+  &.collapsed .button-compose {
+    width: var(--button-compose-collapsed-width);
+  }
+
+  &:hover .button-compose {
+    width: var(--button-compose-expanded-width);
+  }
+
+  @media (max-width: 600px) {
+    .button-compose {
+      width: var(--button-compose-collapsed-width) !important;
+    }
+  }
+
+  .button-compose-content {
+    position: relative;
+    display: grid;
+    grid-template-columns: 48px auto;
+    align-items: center;
+    height: 48px;
+  }
+
+  .button-compose-text {
+    min-width: max-content;
+    margin-inline-end: 20px;
+    transition-property: opacity;
+    transition-duration: var(--cib-motion-duration-fast);
+    transition-timing-function: var(--cib-motion-easing-in);
+  }
+
+}
+
+.visual-search-container {
+  position: relative;
+
+  .visual-search {
+    position: absolute;
+    bottom: 42px;
+    width: 380px;
+    inset-inline-end: -50px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 4px 4px 12px;
+    padding-block-end: 4px;
+
+
+    will-change: transform;
+    border-radius: var(--cib-flyout-host-border-radius);
+    box-shadow: var(--cib-shadow-elevation-28);
+    background-color: var(--cib-color-background-surface-solid-tertiary);
+    transition-duration: var(--cib-motion-duration-fast);
+    transition-delay: var(--cib-motion-duration-normal);
+    transition-timing-function: var(--cib-motion-easing-in);
+    font-size: var(--cib-type-body1-font-size);
+    line-height: var(--cib-type-body1-line-height);
+    font-weight: var(--cib-type-body1-font-weight);
+    font-variation-settings: var(--cib-type-body1-font-variation-settings);
+
+    .header {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 10px 12px 6px;
+    }
+
+    &.none {
+      display: none;
+    }
+
+
+    h4 {
+      margin: 0px;
+      color: var(--cib-color-foreground-neutral-primary);
+      font-size: var(--cib-type-subtitle2-stronger-font-size);
+      line-height: var(--cib-type-subtitle2-stronger-line-height);
+      font-weight: var(--cib-type-subtitle2-stronger-font-weight);
+      font-variation-settings: var(--cib-type-subtitle2-stronger-font-variation-settings);
+    }
+
+    .paste {
+      position: relative;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 10px 12px;
+
+      img {
+        position: absolute;
+        top: 20px;
+        inset-inline-start: 24px;
+      }
+
+    }
+
+    .paste-input {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      height: 40px;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 10px 16px;
+      padding-inline-start: 44px;
+      margin: 0px;
+      border: 1px solid var(--cib-color-stroke-surface-card-primary);
+      border-radius: var(--cib-border-radius-extra-large);
+      box-shadow: var(--cib-shadow-elevation-4);
+      color: var(--cib-color-foreground-neutral-primary);
+      background: var(--cib-color-fill-neutral-primary);
+      font-size: var(--cib-type-body1-font-size);
+      line-height: var(--cib-type-body1-line-height);
+      font-weight: var(--cib-type-body1-font-weight);
+      font-variation-settings: var(--cib-type-body1-font-variation-settings);
+
+      &:focus {
+        outline: 1px solid var(--cib-color-stroke-accent-primary);
+      }
+    }
+
+    .buttons {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 0px 12px;
+
+      button {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        position: relative;
+        cursor: pointer;
+        gap: 12px;
+        height: 40px;
+        width: 100%;
+        box-sizing: border-box;
+        padding: 10px 12px;
+        margin: 0px;
+        border: none;
+        border-radius: var(--cib-border-radius-medium);
+        cursor: pointer;
+        background: transparent;
+        color: var(--cib-color-foreground-neutral-primary);
+        font-size: var(--cib-type-body1-font-size);
+        line-height: var(--cib-type-body1-line-height);
+        font-weight: var(--cib-type-body1-font-weight);
+        font-variation-settings: var(--cib-type-body1-font-variation-settings);
+
+        &:hover {
+          background: var(--cib-color-fill-subtle-secondary);
+        }
+      }
+    }
+
+    .fileinput {
+      opacity: 0;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset-inline-end: 50px;
+      top: 100%;
+      inset-inline-start: var(--arrow-start-offset);
+      border-top-width: 10px;
+      border-right: 10px solid transparent;
+      border-left: 10px solid transparent;
+      border-top-style: solid;
+      border-image: initial;
+      border-bottom: none;
+      border-top-color: var(--cib-color-background-surface-solid-tertiary);
+      filter: drop-shadow(0 1px 0 var(--cib-color-stroke-neutral-primary));
+      transition-property: inset-inline-start;
+      transition-duration: var(--cib-motion-duration-fast);
+      transition-timing-function: var(--cib-motion-easing-in);
+    }
+  }
+
+  .webvideo-container {
+    position: relative;
+  }
+
+  .webvideo {
+    display: block;
+    background-color: rgb(0, 0, 0);
+    width: 100%;
+    height: auto;
+  }
+
+  .webcanvas {
+    display: none
+  }
+
+  .cambtn {
+    cursor: pointer;
+    width: min-content;
+    height: 46px;
+    padding: 8px;
+    margin: auto;
+  }
+
+  .cam-btn-circle-large {
+    width: 30px;
+    height: 30px;
+    border-radius: var(--cib-border-radius-circular);
+    background: var(--cib-color-fill-accent-gradient-primary);
+    opacity: 0.4;
+  }
+
+  .cam-btn-circle-small {
+    width: 20px;
+    height: 20px;
+    border-radius: var(--cib-border-radius-circular);
+    background: var(--cib-color-fill-accent-gradient-primary);
+    opacity: 1;
+    position: relative;
+    top: -25px;
+    inset-inline-start: 5px;
+  }
+
+  .normal-content,
+  .cam-content {
+    width: 100%;
+    display: none;
+  }
+
+  .normal .normal-content {
+    display: block;
+  }
+
+  .camera-mode .cam-content {
+    display: block;
+  }
+}
+
+.spinner:before {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  inset-inline-start: 50%;
+  width: 20px;
+  height: 20px;
+  margin-top: -10px;
+  margin-inline-start: -10px;
+  border-radius: 50%;
+  border-top: 2px solid var(--cib-color-fill-accent-gradient-primary);
+  border-inline-end: 2px solid transparent;
+  animation: spinner 0.6s linear infinite;
+}
+
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes borealisBar {
+  0% {
+    inset-inline-start: 0%;
+    inset-inline-end: 100%;
+    width: 0%;
+  }
+
+  35% {
+    inset-inline-start: 0%;
+    inset-inline-end: 50%;
+    width: 50%;
+  }
+
+  65% {
+    inset-inline-end: 0%;
+    inset-inline-start: 50%;
+    width: 50%;
+  }
+
+  100% {
+    inset-inline-start: 100%;
+    inset-inline-end: 0%;
+    width: 0%;
+  }
+}
+
+.attachment-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-block: 16px;
+  overflow: hidden;
+
+  .file-item {
+    display: flex;
+    flex-direction: row;
+    height: 48px;
+    border-radius: var(--cib-border-radius-medium);
+    overflow: hidden;
+    cursor: default;
+    opacity: 1;
+    animation-name: file-item-enter;
+    animation-fill-mode: both;
+    animation-delay: var(--cib-motion-duration-fast);
+    animation-duration: var(--cib-motion-duration-normal);
+    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+    background: var(--cib-color-background-surface-app-primary);
+    border: 1px solid var(--cib-color-stroke-neutral-primary);
+    position: relative;
+  }
+
+  .thumbnail {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 48px;
+    width: 48px;
+
+    img {
+      height: 48px;
+      width: 48px;
+      object-fit: cover;
+      object-position: center center;
+      -webkit-user-drag: none;
+      overflow-clip-margin: content-box;
+      overflow: clip;
+    }
+  }
+
+  .dismiss {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    border: none;
+    margin: 0px;
+    padding: 0px;
+    background-color: transparent;
+    cursor: pointer;
+    fill: var(--cib-color-foreground-neutral-primary);
+
+    &.no-file {
+      background-color: var(--cib-color-background-surface-solid-tertiary);
+    }
+  }
+
+  .error {
+    height: 48px;
+    width: 48px;
+    background-color: var(--cib-color-fill-accent-secondary);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .loading {
+    width: 100%;
+    position: absolute;
+    height: 3px;
+    bottom: -1px;
+  }
+
+  .bar {
+    top: 0;
+    inset-inline-end: 100%;
+    bottom: 0;
+    inset-inline-start: 0;
+    width: 0;
+    position: absolute;
+    background: var(--cib-color-fill-accent-gradient-primary);
+    animation: borealisBar 2s linear infinite;
+  }
+}
+
+.bottom-bar {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: 36px;
+  bottom: 4px;
+  inset-inline: 0px;
+  box-sizing: border-box;
+  padding-block: 0px;
+  padding-inline: 16px 8px;
+  opacity: 0;
+  transition-property: opacity;
+  transition-duration: var(--cib-motion-duration-faster);
+  transition-delay: var(--cib-motion-duration-faster);
+  transition-timing-function: var(--cib-motion-easing-transition);
+
+  .letter-counter {
+    color: var(--cib-color-foreground-neutral-secondary);
+  }
+}
+
+.fade {
+  position: fixed;
+  left: 0;
+  height: 104px;
+  width: 100%;
+  z-index: -1;
+  overflow: hidden;
+  clip-path: inset(0px);
+  pointer-events: none;
+
+  &.bottom {
+    display: block;
+    bottom: 0px;
+    height: 140px;
+    -webkit-mask-image: linear-gradient(transparent calc(100% - 140px), black calc(100% - 118px));
+    mask-image: linear-gradient(transparent calc(100% - 140px), black calc(100% - 118px));
+  }
+
+  .background {
+    height: 100%;
+    transition-property: transform;
+    transition-duration: var(--cib-motion-duration-slowest);
+    transition-timing-function: var(--cib-motion-easing-transition);
+    background: var(--cib-color-fill-accent-gradient-quaternary);
+  }
+}
+
+@media (max-width: 600px) {
+  .action-root {
+    align-items: flex-end;
+    justify-content: flex-end;
+    min-height: unset;
+  }
+
+  .main-container {
+    width: calc(100% - 60px);
+
+    button[type="submit"] {
+      display: none;
+    }
+
+    &:hover,
+    &.active {
+      width: 100%;
+      transition-delay: 167ms;
+    }
+  }
+
+  .outside-left-container {
+    position: absolute;
+    bottom: 0px;
+    inset-inline-start: 0px;
+  }
+}
+
+.chat-history {
+  &-header {
+    position: relative;
+
+    &::after {
+      position: absolute;
+      content: "";
+      inset-block-end: 0px;
+      inset-inline: 16px;
+      border-block-end: 1px solid var(--cib-color-stroke-neutral-primary);
+    }
+  }
+
+  &-main {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow: hidden;
+  }
+
+  .scroller {
+    position: relative;
+    box-sizing: border-box;
+    padding: 16px;
+    max-block-size: max(324px, 60%);
+  }
+
+  .surface {
+    display: flex;
+    flex-direction: column;
+    max-block-size: 100%;
+    border-radius: var(--cib-border-radius-large);
+    background: var(--cib-color-background-surface-card-secondary);
+    box-shadow: var(--cib-shadow-card);
+  }
+
+  .threads {
+    display: flex;
+    flex-direction: column;
+    padding: 4px;
+    overflow: hidden;
+    max-block-size: calc(100% - 44px);
+    box-sizing: border-box;
+  }
+
+  .thread {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    inline-size: 100%;
+    align-items: center;
+    position: relative;
+    border-radius: var(--cib-comp-thread-host-border-radius);
+    cursor: pointer;
+    padding-block: 9px;
+    padding-inline: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+
+    &:hover {
+      background: var(--cib-color-background-surface-card-primary);
+      box-shadow: var(--cib-shadow-elevation-1);
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        inline-size: 3px;
+        block-size: 100%;
+        inset-inline-start: 0px;
+        border-start-start-radius: var(--cib-comp-thread-host-border-radius);
+        border-end-start-radius: var(--cib-comp-thread-host-border-radius);
+        background: var(--cib-color-fill-accent-gradient-creative-primary);
+      }
+      .time {
+        display: none;
+      }
+    }
+    &:not(:hover) {
+      .controls {
+        display: none;
+      }
+    }
+
+    &>* {
+      width: 100%;
+    }
+
+    &::nth-child(n+1)::before {
+      position: absolute;
+      content: "";
+      inset-block-start: 0px;
+      inset-inline: 16px;
+      border-block-start: 1px solid var(--cib-color-fill-subtle-secondary);
+    }
+  }
+
+  .primary-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+
+    &>button {
+      position: absolute;
+      inset: 0px;
+    }
+
+    button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border: none;
+      margin: 0px;
+      padding: 0px;
+    }
+
+    &>* {
+      flex-grow: 0;
+      flex-shrink: 0;
+    }
+  }
+
+  .controls {
+    display: flex;
+    align-items: center;
+  }
+
+  .description {
+    -webkit-mask-image: linear-gradient(to right, var(--cib-color-background-surface-app-primary) 90%, transparent);
+  }
+
+  .name {
+    display: flex;
+    align-items: center;
+    max-inline-size: 100%;
+    padding-block: calc((26px - var(--cib-type-body1-line-height)) / 2);
+    margin: 0px;
+    white-space: nowrap;
+    overflow: hidden;
+    border-radius: var(--cib-comp-thread-name-border-radius);
+    font-family: var(--cib-font-text);
+    font-size: var(--cib-type-body1-font-size);
+    line-height: var(--cib-type-body1-line-height);
+    font-weight: var(--cib-type-body1-font-weight);
+  }
+
+  .time {
+    display: flex;
+    align-items: center;
+    text-align: right;
+    margin: 0px;
+    flex-shrink: 0;
+    padding-inline-end: 6px;
+    color: var(--cib-color-foreground-neutral-secondary);
+    font-size: var(--cib-type-caption2-font-size);
+    line-height: var(--cib-type-caption2-line-height);
+    font-weight: var(--cib-type-caption2-font-weight);
+    font-variation-settings: var(--cib-type-caption2-font-variation-settings);
+  }
+
+  .icon-button {
+    display: none;
+    position: relative;
+    flex-shrink: 0;
+    inline-size: 26px;
+    aspect-ratio: 1 / 1;
+    border-radius: var(--cib-border-radius-medium);
+    fill: var(--cib-color-foreground-neutral-primary);
+    &:hover {
+      background: var(--cib-color-fill-subtle-secondary);
+      cursor: pointer;
+    }
+  }
+}

src/app/layout.tsx

@@ -0,0 +1,47 @@
+import { Metadata } from 'next'
+import { Toaster } from 'react-hot-toast'
+import { TailwindIndicator } from '@/components/tailwind-indicator'
+import { Providers } from '@/components/providers'
+import { Header } from '@/components/header'
+
+import '@/app/globals.scss'
+
+
+export const metadata: Metadata = {
+  title: {
+    default: 'Bing AI Chatbot',
+    template: `%s - Bing AI Chatbot`
+  },
+  description: 'Bing AI Chatbot Web App.',
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: 'white' },
+    { media: '(prefers-color-scheme: dark)', color: 'dark' }
+  ],
+  icons: {
+    icon: '/favicon.ico',
+    shortcut: '../assets/images/logo.svg',
+    apple: '../assets/images/logo.svg'
+  }
+}
+
+interface RootLayoutProps {
+  children: React.ReactNode
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <html lang="zh-CN" suppressHydrationWarning>
+      <body>
+        <Toaster />
+        <Providers attribute="class" defaultTheme="system" enableSystem>
+          <div className="flex flex-col min-h-screen">
+            {/* @ts-ignore */}
+            <Header />
+            <main className="flex flex-col flex-1">{children}</main>
+          </div>
+          <TailwindIndicator />
+        </Providers>
+      </body>
+    </html>
+  )
+}

src/app/loading.css

@@ -0,0 +1,68 @@
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  display: none;
+}
+
+::-webkit-scrollbar-button:start:decrement,
+::-webkit-scrollbar-button:end:increment {
+  height: 30px;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-track-piece {
+  background-color: #3b3b3b;
+  -webkit-border-radius: 16px;
+}
+
+::-webkit-scrollbar-thumb:vertical {
+  height: 50px;
+  background-color: #666;
+  border: 1px solid #eee;
+  -webkit-border-radius: 6px;
+}
+
+/* loading start */
+.loading-spinner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  opacity: 1;
+  transition: opacity .8s ease-out;
+}
+
+.loading-spinner.hidden {
+  opacity: 0;
+}
+
+.loading-spinner>div {
+  width: 30px;
+  height: 30px;
+  background: linear-gradient(90deg, #2870EA 10.79%, #1B4AEF 87.08%);
+
+  border-radius: 100%;
+  display: inline-block;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.loading-spinner .bounce1 {
+  animation-delay: -0.32s;
+}
+
+.loading-spinner .bounce2 {
+  animation-delay: -0.16s;
+}
+
+@keyframes sk-bouncedelay {
+
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+
+  40% {
+    transform: scale(1.0);
+  }
+}

src/app/page.tsx

@@ -0,0 +1,15 @@
+import dynamic from 'next/dynamic'
+
+const DynamicComponentWithNoSSR = dynamic(
+  () => import('../components/chat'),
+  { ssr: false }
+)
+
+export default function IndexPage() {
+  return (
+    <>
+      <div className="loading-spinner" />
+      <DynamicComponentWithNoSSR />
+    </>
+  )
+}

src/components/button-scroll-to-bottom.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+import { useAtBottom } from '@/lib/hooks/use-at-bottom'
+import { Button, type ButtonProps } from '@/components/ui/button'
+import { IconArrowDown } from '@/components/ui/icons'
+
+export function ButtonScrollToBottom({ className, ...props }: ButtonProps) {
+  const isAtBottom = useAtBottom()
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      className={cn(
+        'fixed right-4 bottom-24 z-50 bg-background transition-opacity duration-300 sm:right-20',
+        isAtBottom ? 'opacity-0' : 'opacity-100',
+        className
+      )}
+      onClick={() =>
+        window.scrollTo({
+          top: document.body.offsetHeight,
+          behavior: 'smooth'
+        })
+      }
+      {...props}
+    >
+      <IconArrowDown />
+      <span className="sr-only">Scroll to bottom</span>
+    </Button>
+  )
+}

src/components/chat-attachments.tsx

@@ -0,0 +1,37 @@
+import Image from 'next/image'
+import ClearIcon from '@/assets/images/clear.svg'
+import RefreshIcon from '@/assets/images/refresh.svg'
+import { FileItem } from '@/lib/bots/bing/types'
+import { cn } from '@/lib/utils'
+import { useBing } from '@/lib/hooks/use-bing'
+
+type ChatAttachmentsProps = Pick<ReturnType<typeof useBing>, 'attachmentList' | 'setAttachmentList' | 'uploadImage'>
+
+export function ChatAttachments({ attachmentList = [], setAttachmentList, uploadImage }: ChatAttachmentsProps) {
+  return attachmentList.length ? (
+    <div className="attachment-list">
+      {attachmentList.map(file => (
+        <div className="file-item" key={file.url}>
+          {file.status === 'loading' && (
+            <div className="loading">
+              <div className="bar" />
+            </div>)
+          }
+          {file.status !== 'error' && (
+            <div className="thumbnail">
+              <img draggable="false" src={file.url} />
+            </div>)
+          }
+          {file.status === 'error' && (
+            <div className="error">
+              <Image alt="refresh" src={RefreshIcon} width={18} onClick={() => uploadImage(file.url)} />
+            </div>
+          )}
+          <button className={cn('dismiss', { 'no-file': file.status === 'error' })} type="button">
+            <Image alt="clear" src={ClearIcon} width={16} onClick={() => setAttachmentList([])} />
+          </button>
+        </div>
+      ))}
+    </div>
+  ) : null
+}

src/components/chat-header.tsx

@@ -0,0 +1,12 @@
+import LogoIcon from '@/assets/images/logo.svg'
+import Image from 'next/image'
+
+export function ChatHeader() {
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <Image alt="logo" src={LogoIcon} width={60}/>
+      <div className="mt-8 text-4xl font-bold">欢迎使用新必应</div>
+      <div className="mt-4 mb-8 text-lg">由 AI 支持的网页版 Copilot</div>
+    </div>
+  )
+}

src/components/chat-history.tsx

@@ -0,0 +1,48 @@
+import { IconEdit, IconTrash, IconMore, IconDownload } from "./ui/icons"
+
+export function ChatHistory() {
+  return (
+    <div className="chat-history fixed top-18 right-4">
+      <div className="chat-history-header text-sm font-semibold text-left w-[280px] px-4 py-6">
+        历史记录
+      </div>
+      <div className="chat-history-main">
+        <div className="scroller">
+          <div className="surface">
+            <div className="threads">
+              <div className="thread">
+                <div className="primary-row">
+                  <button type="button" aria-label="加载聊天">
+
+                  </button>
+                  <div className="description">
+                    <h3 className="name">无标题的聊天</h3>
+                  </div>
+                  <h4 className="time">上午1:42</h4>
+                  <div className="controls">
+
+                    <button className="edit icon-button" type="button" aria-label="重命名">
+                      <IconEdit />
+                    </button>
+
+                    <button className="delete icon-button" type="button" aria-label="删除">
+                      <IconTrash />
+                    </button>
+
+                    <button className="more icon-button" type="button" aria-haspopup="true" aria-expanded="false" aria-label="更多">
+                      <IconMore />
+                    </button>
+
+                    <button className="export icon-button" type="button" aria-label="导出">
+                      <IconDownload />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/chat-image.tsx

@@ -0,0 +1,170 @@
+import {
+  useEffect,
+  useState,
+  useCallback,
+  ChangeEvent,
+  ClipboardEvent,
+  MouseEventHandler,
+  FormEvent,
+  useRef
+} from "react"
+import Image from 'next/image'
+import PasteIcon from '@/assets/images/paste.svg'
+import UploadIcon from '@/assets/images/upload.svg'
+import CameraIcon from '@/assets/images/camera.svg'
+import { useBing } from '@/lib/hooks/use-bing'
+import { cn } from '@/lib/utils'
+
+interface ChatImageProps extends Pick<ReturnType<typeof useBing>, 'uploadImage'> {}
+
+const preventDefault: MouseEventHandler<HTMLDivElement> = (event) => {
+  event.nativeEvent.stopImmediatePropagation()
+}
+
+const toBase64 = (file: File): Promise<string> => new Promise((resolve, reject) => {
+  const reader = new FileReader()
+  reader.readAsDataURL(file)
+  reader.onload = () => resolve(reader.result as string)
+  reader.onerror = reject
+})
+
+export function ChatImage({ children, uploadImage }: React.PropsWithChildren<ChatImageProps>) {
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const mediaStream = useRef<MediaStream>()
+  const [panel, setPanel] = useState('none')
+
+  const upload = useCallback((url: string) => {
+    if (url) {
+      uploadImage(url)
+    }
+    setPanel('none')
+  }, [panel])
+
+  const onUpload = useCallback(async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      const fileDataUrl = await toBase64(file)
+      if (fileDataUrl) {
+        upload(fileDataUrl)
+      }
+    }
+  }, [])
+
+  const onPaste = useCallback((event: ClipboardEvent<HTMLInputElement>) => {
+    const pasteUrl = event.clipboardData.getData('text') ?? ''
+    upload(pasteUrl)
+  }, [])
+
+  const onEnter = useCallback((event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    event.stopPropagation()
+    // @ts-ignore
+    const inputUrl = event.target.elements.image.value
+    if (inputUrl) {
+      upload(inputUrl)
+    }
+  }, [])
+
+  const openVideo: MouseEventHandler<HTMLButtonElement> = async (event) => {
+    event.stopPropagation()
+    setPanel('camera-mode')
+  }
+
+  const onCapture = () => {
+    if (canvasRef.current && videoRef.current) {
+      const canvas = canvasRef.current
+      canvas.width = videoRef.current!.videoWidth
+      canvas.height = videoRef.current!.videoHeight
+      canvas.getContext('2d')?.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height)
+      const cameraUrl = canvas.toDataURL('image/jpeg')
+      upload(cameraUrl)
+    }
+  }
+
+  useEffect(() => {
+    const handleBlur = () => {
+      if (panel !== 'none') {
+        setPanel('none')
+      }
+    }
+    document.addEventListener('click', handleBlur)
+    return () => {
+      document.removeEventListener('click', handleBlur)
+    }
+  }, [panel])
+
+  useEffect(() => {
+    if (panel === 'camera-mode') {
+      navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+      .then(videoStream => {
+        mediaStream.current = videoStream
+        if (videoRef.current) {
+          videoRef.current.srcObject = videoStream
+        }
+      })
+    } else {
+      if (mediaStream.current) {
+        mediaStream.current.getTracks().forEach(function(track) {
+          track.stop()
+        })
+        mediaStream.current = undefined
+      }
+    }
+  }, [panel])
+
+  return (
+    <div className="visual-search-container">
+      <div onClick={() => panel === 'none' ? setPanel('normal') : setPanel('none')}>{children}</div>
+      <div className={cn('visual-search', panel)} onClick={preventDefault}>
+        <div className="normal-content">
+          <div className="header">
+            <h4>添加图像</h4>
+          </div>
+          <div className="paste">
+            <Image alt="paste" src={PasteIcon} width={24} />
+            <form onSubmitCapture={onEnter}>
+              <input
+                className="paste-input"
+                id="sb_imgpst"
+                type="text"
+                name="image"
+                placeholder="粘贴图像 URL"
+                aria-label="粘贴图像 URL"
+                onPaste={onPaste}
+                onClickCapture={(e) => e.stopPropagation()}
+              />
+            </form>
+          </div>
+          <div className="buttons">
+            <button type="button" aria-label="从此设备上传">
+              <input
+                id="vs_fileinput"
+                className="fileinput"
+                type="file"
+                accept="image/gif, image/jpeg, image/png, image/webp"
+                onChange={onUpload}
+              />
+              <Image alt="uplaod" src={UploadIcon} width={20} />
+              从此设备上传
+            </button>
+            <button type="button" aria-label="拍照" onClick={openVideo}>
+              <Image alt="camera" src={CameraIcon} width={20} />
+              拍照
+            </button>
+          </div>
+        </div>
+        {panel === 'camera-mode' && <div className="cam-content">
+          <div className="webvideo-container">
+            <video className="webvideo" autoPlay muted playsInline ref={videoRef} />
+            <canvas className="webcanvas" ref={canvasRef} />
+          </div>
+          <div className="cambtn" role="button" aria-label="拍照" onClick={onCapture}>
+            <div className="cam-btn-circle-large"></div>
+            <div className="cam-btn-circle-small"></div>
+          </div>
+        </div>}
+      </div>
+    </div>
+  )
+}

src/components/chat-list.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import { Separator } from '@/components/ui/separator'
+import { ChatMessage } from '@/components/chat-message'
+import { ChatMessageModel } from '@/lib/bots/bing/types'
+
+export interface ChatList {
+  messages: ChatMessageModel[]
+}
+
+export function ChatList({ messages }: ChatList) {
+  if (!messages.length) {
+    return null
+  }
+
+  return (
+    <div className="chat-container relative flex flex-col">
+      {messages.map((message, index) => (
+        <React.Fragment key={index}>
+          <ChatMessage message={message} />
+          {index < messages.length - 1 && (
+            <Separator className="my-2" />
+          )}
+        </React.Fragment>
+      ))}
+    </div>
+  )
+}