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

.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,37 @@
+FROM node:18
+
+
+ARG DEBIAN_FRONTEND=noninteractive
+
+ENV BING_UA Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.0.0
+ENV BING_COOKIE ""
+
+# Set up a new user named "user" with user ID 1000
+RUN useradd -o -u 1000 user
+
+# Switch to the "user" user
+USER user
+
+# Set home to the user's home directory
+ENV HOME=/home/user \
+	PATH=/home/user/.local/bin:$PATH
+
+# 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 -- --port $PORT

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,149 @@
+---
+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 的功能，可自行部署使用。
+
+[![MIT License](https://img.shields.io/badge/license-MIT-97c50f)](https://github.com/weaigc/bingo/blob/main/license)
+
+
+</div>
+
+## 演示站点
+
+ * 站点一：https://bing.github1s.tk （推荐）
+ * 站点二：https://effulgent-bubblegum-e2f5df.netlify.app （此站点部署到 Netlify 上，使用过程中可能需要认证）
+ * 站点三：https://bingo-beta-seven.vercel.app/ （此站点部署在 Vercel 上，由于[免费版本限制](https://vercel.com/docs/concepts/limits/overview)，功能不一定正常，仅供参考）
+
+
+[![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] 支持语音输出(需要手动开启)
+ - [ ] 适配深色模式
+ - [ ] 支持内置提示词
+ - [ ] 支持图片输入
+ - [ ] 支持离线访问
+ - [ ] 国际化翻译
+
+## 一键部署
+你也可以一键部署自己的 New Bing AI 到 🤗 HuggingFace 。
+
+### 部署到 Huggingface
+[![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)
+
+> Huggingface 不支持绑定自己的域名，不过我们可以使用曲线救国的方式来达到这个目的
+1. 方式一，借助 Github Pages 及 iframe [如何绑定域名](https://github.com/weaigc/bingo/issues/4)
+2. 方式二，Cloudflare Workers 
+
+### 其它平台
+由于其他平台目前遭到 new bing 封杀，会遇到更多问题，不再做推荐，建议直接使用上面的方式。
+#### 部署到 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)
+
+
+## 环境和依赖
+
+- 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
+git clone https://github.com/weaigc/bingo.git
+docker build . -t bingo
+docker run --rm -it -e BING_HEADER=xxxx -p 7860:7860 bingo
+```
+
+## 如何获取 BING_HEADER
+打开 https://www.bing.com 并登录，然后访问 https://www.bing.com/turing/conversation/create
+
+![BING HEADER](./docs/images/curl.png)
+
+
+> 复制出来的内容应该如下所示。确认格式无误后，打开 https://effulgent-bubblegum-e2f5df.netlify.app/#dialog=%22settings%22 ，粘贴进去，点击“转成 BING_HEADER 并复制”，然后从剪切板粘贴即可得到。（你也可以先在网页上进行验证）
+```
+curl 'https://www.bing.com/turing/conversation/create' \
+  -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
+```
+
+
+## 鸣谢
+ - 感谢 [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) 提供的部分代码。
+
+## License
+
+MIT © [LICENSE](https://github.com/weaigc/bingo/blob/main/LICENSE).
+
+

next.config.js

@@ -0,0 +1,36 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // output: 'export',
+  // assetPrefix: '.',
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+      config.resolve = {
+        ...config.resolve,
+        fallback: {
+          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,91 @@
+{
+  "name": "bingo",
+  "version": "0.1.0",
+  "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",
+    "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,1130 @@
+@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);
+    }
+  }
+
+  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,
+  pre {
+    padding: 0px;
+    user-select: text;
+    word-break: break-word;
+    display: inline-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);
+  }
+}
+
+@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;
+  overflow-y: auto;
+  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);
+  }
+
+}
+
+.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;
+  }
+}

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-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-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>
+  )
+}

src/components/chat-message.tsx

@@ -0,0 +1,93 @@
+import remarkGfm from 'remark-gfm'
+import remarkMath from 'remark-math'
+import supersub from 'remark-supersub'
+import remarkBreaks from 'remark-breaks'
+import { cn } from '@/lib/utils'
+import { CodeBlock } from '@/components/ui/codeblock'
+import { MemoizedReactMarkdown } from '@/components/markdown'
+import { LearnMore } from './learn-more'
+import { ChatMessageModel } from '@/lib/bots/bing/types'
+import { useEffect } from 'react'
+import { TurnCounter } from './turn-counter'
+
+export interface ChatMessageProps {
+  message: ChatMessageModel
+}
+
+export function ChatMessage({ message, ...props }: ChatMessageProps) {
+  useEffect(() => {
+    if (document.body.scrollHeight - window.innerHeight - window.scrollY - 200 < 0) {
+      window.scrollBy(0, 200)
+    }
+  }, [message.text])
+
+  return message.text ? (
+    <div
+      className={cn('text-message', message.author)}
+      {...props}
+    >
+      <div className="text-message-content">
+        <MemoizedReactMarkdown
+          linkTarget="_blank"
+          className="prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0"
+          remarkPlugins={[remarkGfm, remarkMath, supersub, remarkBreaks]}
+          components={{
+            img(obj) {
+              try {
+                const uri = new URL(obj.src!)
+                const w = uri.searchParams.get('w')
+                const h = uri.searchParams.get('h')
+                if (w && h) {
+                  uri.searchParams.delete('w')
+                  uri.searchParams.delete('h')
+                  return <a style={{ float: 'left', maxWidth: '50%' }} href={uri.toString()} target="_blank" rel="noopener noreferrer"><img src={obj.src} alt={obj.alt} width={w!} height={h!}/></a>
+                }
+              } catch (e) {
+              }
+              return <img src={obj.src} alt={obj.alt} title={obj.title} />
+            },
+            p({ children }) {
+              return <p className="mb-2">{children}</p>
+            },
+            code({ node, inline, className, children, ...props }) {
+              if (children.length) {
+                if (children[0] == '▍') {
+                  return (
+                    <span className="mt-1 animate-pulse cursor-default">▍</span>
+                  )
+                }
+
+                children[0] = (children[0] as string).replace('`▍`', '▍')
+              }
+
+              const match = /language-(\w+)/.exec(className || '')
+
+              if (inline) {
+                return (
+                  <code className={className} {...props}>
+                    {children}
+                  </code>
+                )
+              }
+
+              return (
+                <CodeBlock
+                  key={Math.random()}
+                  language={(match && match[1]) || ''}
+                  value={String(children).replace(/\n$/, '')}
+                  {...props}
+                />
+              )
+            }
+          }}
+        >
+          {message.text}
+        </MemoizedReactMarkdown>
+      </div>
+      <div className="text-message-footer">
+        {message.author === 'bot' && <LearnMore sourceAttributions={message.sourceAttributions} />}
+        {message.author === 'bot' && <TurnCounter throttling={message.throttling} />}
+      </div>
+    </div>
+  ) : null
+}

src/components/chat-notification.tsx

@@ -0,0 +1,77 @@
+import { useEffect } from 'react'
+import Image from 'next/image'
+
+import IconWarning from '@/assets/images/warning.svg'
+import { ChatError, ErrorCode, ChatMessageModel } from '@/lib/bots/bing/types'
+import { ExternalLink } from './external-link'
+import { useBing } from '@/lib/hooks/use-bing'
+
+export interface ChatNotificationProps extends Pick<ReturnType<typeof useBing>, 'bot'> {
+  message?: ChatMessageModel
+}
+
+function getAction(error: ChatError, reset: () => void) {
+  if (error.code === ErrorCode.THROTTLE_LIMIT) {
+    reset()
+    return (
+      <div>
+        你已达到每日最大发送消息次数，请<a href={`#dialog="settings"`}>更换账号</a>或隔一天后重试
+      </div>
+    )
+  }
+  if (error.code === ErrorCode.BING_FORBIDDEN) {
+    return (
+      <ExternalLink href="https://bing.com/new">
+        你的账号已在黑名单，请尝试更换账号及申请解封
+      </ExternalLink>
+    )
+  }
+  if (error.code === ErrorCode.CONVERSATION_LIMIT) {
+    return (
+      <div>
+        当前话题已中止，请点
+        <a href={`#dialog="reset"`}>重新开始</a>
+        开启新的对话
+      </div>
+    )
+  }
+  if (error.code === ErrorCode.BING_CAPTCHA) {
+    return (
+      <ExternalLink href="https://www.bing.com/turing/captcha/challenge">
+        点击通过人机验证
+      </ExternalLink>
+    )
+  }
+  if (error.code === ErrorCode.BING_UNAUTHORIZED) {
+    reset()
+    return (
+      <a href={`#dialog="settings"`}>没有获取到身份信息或身份信息失效，点此重新设置</a>
+    )
+  }
+  return error.message
+}
+
+export function ChatNotification({ message, bot }: ChatNotificationProps) {
+  useEffect(() => {
+    window.scrollBy(0, 2000)
+  }, [message])
+
+  if (!message?.error) return
+
+  return (
+    <div
+      className="notification-container"
+    >
+      <div className="bottom-notifications">
+        <div className="inline-type with-decorative-line">
+          <div className="text-container mt-1">
+            <div className="title inline-flex items-start">
+              <Image alt="error" src={IconWarning} width={20} className="mr-1 mt-1" />
+              {getAction(message.error, () => bot.resetConversation())}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/chat-panel.tsx

@@ -0,0 +1,142 @@
+'use client'
+
+import * as React from 'react'
+import Image from 'next/image'
+import Textarea from 'react-textarea-autosize'
+import { useAtomValue } from 'jotai'
+import { useEnterSubmit } from '@/lib/hooks/use-enter-submit'
+import { cn } from '@/lib/utils'
+
+import BrushIcon from '@/assets/images/brush.svg'
+import ChatIcon from '@/assets/images/chat.svg'
+import VisualSearchIcon from '@/assets/images/visual-search.svg'
+import SendIcon from '@/assets/images/send.svg'
+import PinIcon from '@/assets/images/pin.svg'
+import PinFillIcon from '@/assets/images/pin-fill.svg'
+
+import { useBing } from '@/lib/hooks/use-bing'
+import { voiceListenAtom } from '@/state'
+import Voice from './voice'
+
+export interface ChatPanelProps
+  extends Pick<
+    ReturnType<typeof useBing>,
+    | 'generating'
+    | 'input'
+    | 'setInput'
+    | 'sendMessage'
+    | 'resetConversation'
+    | 'isSpeaking'
+  > {
+  id?: string
+  className?: string
+}
+
+export function ChatPanel({
+  isSpeaking,
+  generating,
+  input,
+  setInput,
+  className,
+  sendMessage,
+  resetConversation
+}: ChatPanelProps) {
+  const inputRef = React.useRef<HTMLTextAreaElement>(null)
+  const {formRef, onKeyDown} = useEnterSubmit()
+  const [focused, setFocused] = React.useState(false)
+  const [active, setActive] = React.useState(false)
+  const [pin, setPin] = React.useState(false)
+  const [tid, setTid] = React.useState<any>()
+  const voiceListening = useAtomValue(voiceListenAtom)
+
+  const setBlur = React.useCallback(() => {
+    clearTimeout(tid)
+    setActive(false)
+    const _tid = setTimeout(() => setFocused(false), 2000);
+    setTid(_tid)
+  }, [tid])
+
+  const setFocus = React.useCallback(() => {
+    setFocused(true)
+    setActive(true)
+    clearTimeout(tid)
+    inputRef.current?.focus()
+  }, [tid])
+
+  React.useEffect(() => {
+    if (input) {
+      setFocus()
+    }
+  }, [input])
+
+  return (
+    <form
+      className={cn('chat-panel', className)}
+      onSubmit={async e => {
+        e.preventDefault()
+        if (generating) {
+          return;
+        }
+        if (!input?.trim()) {
+          return
+        }
+        setInput('')
+        setPin(false)
+        await sendMessage(input)
+      }}
+      ref={formRef}
+    >
+      <div className="action-bar pb-4">
+        <div className={cn('action-root', { focus: active || pin })} speech-state="hidden" visual-search="" drop-target="">
+          <div className="fade bottom">
+            <div className="background"></div>
+          </div>
+          <div className={cn('outside-left-container', { collapsed: focused })}>
+            <div className="button-compose-wrapper">
+              <button className="body-2 button-compose" type="button" aria-label="新主题" onClick={resetConversation}>
+                <div className="button-compose-content">
+                  <Image className="pl-2" alt="brush" src={BrushIcon} width={40} />
+                  <div className="button-compose-text">新主题</div>
+                </div>
+              </button>
+            </div>
+          </div>
+          <div
+            className={cn('main-container', { active: active || pin })}
+            style={{ minHeight: pin ? '360px' : undefined }}
+            onClickCapture={setFocus}
+            onBlurCapture={setBlur}
+          >
+            <div className="main-bar">
+              <Image alt="chat" src={ChatIcon} width={20} color="blue" />
+              <Textarea
+                ref={inputRef}
+                tabIndex={0}
+                onKeyDown={onKeyDown}
+                rows={1}
+                value={input}
+                onChange={e => setInput(e.target.value.slice(0, 4000))}
+                placeholder={voiceListening ? '持续对话中...对话完成说“发送”即可' : 'Shift + Enter 换行'}
+                spellCheck={false}
+                className="message-input min-h-[24px] -mx-1 w-full text-base resize-none bg-transparent focus-within:outline-none"
+              />
+              <Image alt="visual-search" src={VisualSearchIcon} width={20} />
+              <Voice setInput={setInput} sendMessage={sendMessage} isSpeaking={isSpeaking} input={input} />
+              <button type="submit">
+                <Image alt="send" src={SendIcon} width={20} style={{ marginTop: '2px' }} />
+              </button>
+            </div>
+            <div className="body-1 bottom-bar">
+              <div className="letter-counter"><span>{input.length}</span>/4000</div>
+              <button onClick={() => {
+                setPin(!pin)
+              }} className="pr-2">
+               <Image alt="pin" src={pin ? PinFillIcon : PinIcon} width={20} />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  )
+}

src/components/chat-scroll-anchor.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import * as React from 'react'
+import { useInView } from 'react-intersection-observer'
+
+import { useAtBottom } from '@/lib/hooks/use-at-bottom'
+
+interface ChatScrollAnchorProps {
+  trackVisibility?: boolean
+}
+
+export function ChatScrollAnchor({ trackVisibility }: ChatScrollAnchorProps) {
+  const isAtBottom = useAtBottom()
+  const { ref, entry, inView } = useInView({
+    trackVisibility,
+    delay: 100,
+    rootMargin: '0px 0px -150px 0px'
+  })
+
+  React.useEffect(() => {
+    if (isAtBottom && trackVisibility && !inView) {
+      entry?.target.scrollIntoView({
+        block: 'start'
+      })
+    }
+  }, [inView, entry, isAtBottom, trackVisibility])
+
+  return <div ref={ref} className="h-px w-full" />
+}

src/components/chat-suggestions.tsx

@@ -0,0 +1,45 @@
+import React, { useMemo } from 'react'
+import Image from 'next/image'
+import HelpIcon from '@/assets/images/help.svg'
+import { SuggestedResponse } from '@/lib/bots/bing/types'
+import { useBing } from '@/lib/hooks/use-bing'
+import { atom, useAtom } from 'jotai'
+
+type Suggestions = SuggestedResponse[]
+const helpSuggestions = ['为什么不回应某些主题', '告诉我更多关于必应的资迅', '必应如何使用 AI?'].map((text) => ({ text }))
+const suggestionsAtom = atom<Suggestions>([])
+
+type ChatSuggestionsProps = React.ComponentProps<'div'> & Pick<ReturnType<typeof useBing>, 'setInput'> & { suggestions?: Suggestions }
+
+export function ChatSuggestions({ setInput, suggestions = [] }: ChatSuggestionsProps) {
+  const [currentSuggestions, setSuggestions] = useAtom(suggestionsAtom)
+  const toggleSuggestions = (() => {
+    if (currentSuggestions === helpSuggestions) {
+      setSuggestions(suggestions)
+    } else {
+      setSuggestions(helpSuggestions)
+    }
+  })
+
+  useMemo(() => {
+    setSuggestions(suggestions)
+    window.scrollBy(0, 2000)
+  }, [suggestions.length])
+
+  return currentSuggestions?.length ? (
+    <div className="py-6">
+      <div className="suggestion-items">
+        <button className="rai-button" type="button" aria-label="这是什么?" onClick={toggleSuggestions}>
+          <Image alt="help" src={HelpIcon} width={24} />
+        </button>
+        {
+          currentSuggestions.map(suggestion => (
+            <button key={suggestion.text} className="body-1-strong suggestion-container" type="button" onClick={() => setInput(suggestion.text)}>
+              {suggestion.text}
+            </button>
+          ))
+        }
+      </div>
+    </div>
+  ) : null
+}

src/components/chat.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useAtom } from 'jotai'
+import Image from 'next/image'
+import { cn } from '@/lib/utils'
+import { ChatList } from '@/components/chat-list'
+import { ChatPanel } from '@/components/chat-panel'
+import { WelcomeScreen } from '@/components/welcome-screen'
+import { ChatScrollAnchor } from '@/components/chat-scroll-anchor'
+import { ToneSelector } from './tone-selector'
+import { ChatHeader } from './chat-header'
+import { ChatSuggestions } from './chat-suggestions'
+import { bingConversationStyleAtom } from '@/state'
+import { ButtonScrollToBottom } from '@/components/button-scroll-to-bottom'
+import StopIcon from '@/assets/images/stop.svg'
+import { useBing } from '@/lib/hooks/use-bing'
+import { ChatMessageModel } from '@/lib/bots/bing/types'
+import { ChatNotification } from './chat-notification'
+import { Settings } from './settings'
+
+export type ChatProps = React.ComponentProps<'div'> & { initialMessages?: ChatMessageModel[] }
+
+export default function Chat({ className }: ChatProps) {
+
+  const [bingStyle, setBingStyle] = useAtom(bingConversationStyleAtom)
+  const { messages, sendMessage, resetConversation, stopGenerating, setInput, bot,input, generating, isSpeaking } = useBing()
+
+  useEffect(() => {
+    window.scrollTo({
+      top: document.body.offsetHeight,
+      behavior: 'smooth'
+    })
+  }, [])
+
+  return (
+    <div className="flex flex-1 flex-col">
+      <Settings />
+      <div className={cn('flex-1 pb-16', className)}>
+        <ChatHeader />
+        <WelcomeScreen setInput={setInput} />
+        <ToneSelector type={bingStyle} onChange={setBingStyle} />
+        {messages.length ? (
+          <>
+            <ChatList messages={messages} />
+            <ChatScrollAnchor trackVisibility={generating} />
+            <ChatNotification message={messages.at(-1)} bot={bot} />
+            <ChatSuggestions setInput={setInput} suggestions={messages.at(-1)?.suggestedResponses} />
+
+            {generating ? (
+              <div className="flex h-10 items-center justify-center my-4">
+                <button
+                  onClick={stopGenerating}
+                  className="typing-control-item stop"
+                >
+                  <Image alt="stop" src={StopIcon} width={24} className="mr-1" />
+                  <span>停止响应</span>
+                </button>
+              </div>
+            ) : null}
+          </>
+        ) : null}
+      </div>
+      <ChatPanel
+        className="pt-24 z-10"
+        isSpeaking={isSpeaking}
+        generating={generating}
+        sendMessage={sendMessage}
+        input={input}
+        setInput={setInput}
+        resetConversation={resetConversation}
+      />
+      <ButtonScrollToBottom />
+    </div>
+  )
+}

src/components/external-link.tsx

@@ -0,0 +1,30 @@
+export function ExternalLink({
+  href,
+  children
+}: {
+  href: string
+  children: React.ReactNode
+}) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      className="inline-flex flex-1 justify-center gap-1 underline"
+    >
+      <span>{children}</span>
+      <svg
+        aria-hidden="true"
+        height="7"
+        viewBox="0 0 6 6"
+        width="7"
+        className="opacity-70"
+      >
+        <path
+          d="M1.25215 5.54731L0.622742 4.9179L3.78169 1.75597H1.3834L1.38936 0.890915H5.27615V4.78069H4.40513L4.41109 2.38538L1.25215 5.54731Z"
+          fill="currentColor"
+        ></path>
+      </svg>
+    </a>
+  )
+}

src/components/header.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { UserMenu } from './user-menu'
+
+export async function Header() {
+  return (
+    <header className="sticky top-0 z-50 flex items-center justify-between w-full h-16 px-4 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
+      <div className="flex items-center justify-end space-x-2 w-full">
+        <UserMenu />
+      </div>
+    </header>
+  )
+}

src/components/learn-more.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { SourceAttribution } from '@/lib/bots/bing/types'
+
+export interface LearnMoreProps {
+  sourceAttributions?: SourceAttribution[]
+}
+
+export function LearnMore({ sourceAttributions }: LearnMoreProps) {
+  if (!sourceAttributions?.length) {
+    return null
+  }
+
+  return (
+    <div className="learn-more-root" role="list" aria-label="了解详细信息:">
+      <div className="learn-more">了解详细信息:</div>
+      <div className="attribution-container">
+        <div className="attribution-items">
+          {sourceAttributions.map((attribution, index) => {
+            const { providerDisplayName, seeMoreUrl } = attribution
+            const { host } = new URL(seeMoreUrl)
+            return (
+              <a
+                key={index}
+                className="attribution-item"
+                target="_blank"
+                role="listitem"
+                href={seeMoreUrl}
+                title={providerDisplayName}
+                tabIndex={index}
+              >
+                {index + 1}. {host}
+              </a>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/markdown.tsx

@@ -0,0 +1,9 @@
+import { FC, memo } from 'react'
+import ReactMarkdown, { Options } from 'react-markdown'
+
+export const MemoizedReactMarkdown: FC<Options> = memo(
+  ReactMarkdown,
+  (prevProps, nextProps) =>
+    prevProps.children === nextProps.children &&
+    prevProps.className === nextProps.className
+)

src/components/providers.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import * as React from 'react'
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import { ThemeProviderProps } from 'next-themes/dist/types'
+
+import { TooltipProvider } from '@/components/ui/tooltip'
+
+export function Providers({ children, ...props }: ThemeProviderProps) {
+  return (
+    <NextThemesProvider {...props}>
+      <TooltipProvider>{children}</TooltipProvider>
+    </NextThemesProvider>
+  )
+}