refactor: init switching to nextjs router

.env.template

@@ -1,20 +1,21 @@
+
 # Your openai api key. (required)
 OPENAI_API_KEY=sk-xxxx
 
 # Access password, separated by comma. (optional)
 CODE=your-password
 
-# You can start service behind a proxy. (optional)
+# You can start service behind a proxy
 PROXY_URL=http://localhost:7890
 
 # (optional)
 # Default: Empty
-# Google Gemini Pro API key, set if you want to use Google Gemini Pro API.
+# Googel Gemini Pro API key, set if you want to use Google Gemini Pro API.
 GOOGLE_API_KEY=
 
 # (optional)
 # Default: https://generativelanguage.googleapis.com/
-# Google Gemini Pro API url without pathname, set if you want to customize Google Gemini Pro API url.
+# Googel Gemini Pro API url without pathname, set if you want to customize Google Gemini Pro API url.
 GOOGLE_URL=
 
 # Override openai api request base url. (optional)
@@ -46,15 +47,6 @@ ENABLE_BALANCE_QUERY=
 # If you want to disable parse settings from url, set this value to 1.
 DISABLE_FAST_LINK=
 
-# (optional)
-# Default: Empty
-# To control custom models, use + to add a custom model, use - to hide a model, use name=displayName to customize model name, separated by comma.
-CUSTOM_MODELS=
-
-# (optional)
-# Default: Empty
-# Change default model
-DEFAULT_MODEL=
 
 # anthropic claude Api Key.(optional)
 ANTHROPIC_API_KEY=
@@ -62,6 +54,8 @@ ANTHROPIC_API_KEY=
 ### anthropic claude Api version. (optional)
 ANTHROPIC_API_VERSION=
 
+
+
 ### anthropic claude Api url (optional)
 ANTHROPIC_URL=
 

.eslintrc.json

@@ -1,4 +1,12 @@
 {
   "extends": "next/core-web-vitals",
-  "plugins": ["prettier"]
+  "plugins": [
+    "prettier"
+  ],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "legacyDecorators": true
+    }
+  },
+  "ignorePatterns": ["globals.css"]
 }

.github/ISSUE_TEMPLATE/1_bug_report.yml

@@ -1,80 +0,0 @@
-name: '🐛 Bug Report'
-description: 'Report an bug'
-title: '[Bug] '
-labels: ['bug']
-body:
-  - type: dropdown
-    attributes:
-      label: '📦 Deployment Method'
-      multiple: true
-      options:
-        - 'Official installation package'
-        - 'Vercel'
-        - 'Zeabur'
-        - 'Sealos'
-        - 'Netlify'
-        - 'Docker'
-        - 'Other'
-    validations:
-      required: true
-  - type: input
-    attributes:
-      label: '📌 Version'
-    validations:
-      required: true
-  
-  - type: dropdown
-    attributes:
-      label: '💻 Operating System'
-      multiple: true
-      options:
-        - 'Windows'
-        - 'macOS'
-        - 'Ubuntu'
-        - 'Other Linux'
-        - 'iOS'
-        - 'iPad OS'
-        - 'Android'
-        - 'Other'
-    validations:
-      required: true
-  - type: input
-    attributes:
-      label: '📌 System Version'
-    validations:
-      required: true
-  - type: dropdown
-    attributes:
-      label: '🌐 Browser'
-      multiple: true
-      options:
-        - 'Chrome'
-        - 'Edge'
-        - 'Safari'
-        - 'Firefox'
-        - 'Other'
-    validations:
-      required: true
-  - type: input
-    attributes:
-      label: '📌 Browser Version'
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: '🐛 Bug Description'
-      description: A clear and concise description of the bug, if the above option is `Other`, please also explain in detail.
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: '📷 Recurrence Steps'
-      description: A clear and concise description of how to recurrence.
-  - type: textarea
-    attributes:
-      label: '🚦 Expected Behavior'
-      description: A clear and concise description of what you expected to happen.
-  - type: textarea
-    attributes:
-      label: '📝 Additional Information'
-      description: If your problem needs further explanation, or if the issue you're seeing cannot be reproduced in a gist, please add more information here.

.github/ISSUE_TEMPLATE/1_bug_report_cn.yml

@@ -1,80 +0,0 @@
-name: '🐛 反馈缺陷'
-description: '反馈一个问题/缺陷'
-title: '[Bug] '
-labels: ['bug']
-body:
-  - type: dropdown
-    attributes:
-      label: '📦 部署方式'
-      multiple: true
-      options:
-        - '官方安装包'
-        - 'Vercel'
-        - 'Zeabur'
-        - 'Sealos'
-        - 'Netlify'
-        - 'Docker'
-        - 'Other'
-    validations:
-      required: true
-  - type: input
-    attributes:
-      label: '📌 软件版本'
-    validations:
-      required: true
-
-  - type: dropdown
-    attributes:
-      label: '💻 系统环境'
-      multiple: true
-      options:
-        - 'Windows'
-        - 'macOS'
-        - 'Ubuntu'
-        - 'Other Linux'
-        - 'iOS'
-        - 'iPad OS'
-        - 'Android'
-        - 'Other'
-    validations:
-      required: true
-  - type: input
-    attributes:
-      label: '📌 系统版本'
-    validations:
-      required: true
-  - type: dropdown
-    attributes:
-      label: '🌐 浏览器'
-      multiple: true
-      options:
-        - 'Chrome'
-        - 'Edge'
-        - 'Safari'
-        - 'Firefox'
-        - 'Other'
-    validations:
-      required: true
-  - type: input
-    attributes:
-      label: '📌 浏览器版本'
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: '🐛 问题描述'
-      description: 请提供一个清晰且简洁的问题描述，若上述选项为`Other`，也请详细说明。
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: '📷 复现步骤'
-      description: 请提供一个清晰且简洁的描述，说明如何复现问题。
-  - type: textarea
-    attributes:
-      label: '🚦 期望结果'
-      description: 请提供一个清晰且简洁的描述，说明您期望发生什么。
-  - type: textarea
-    attributes:
-      label: '📝 补充信息'
-      description: 如果您的问题需要进一步说明，或者您遇到的问题无法在一个简单的示例中复现，请在这里添加更多信息。

.github/ISSUE_TEMPLATE/2_feature_request.yml

@@ -1,21 +0,0 @@
-name: '🌠 Feature Request'
-description: 'Suggest an idea'
-title: '[Feature Request] '
-labels: ['enhancement']
-body:
-  - type: textarea
-    attributes:
-      label: '🥰 Feature Description'
-      description: Please add a clear and concise description of the problem you are seeking to solve with this feature request.
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: '🧐 Proposed Solution'
-      description: Describe the solution you'd like in a clear and concise manner.
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: '📝 Additional Information'
-      description: Add any other context about the problem here.

.github/ISSUE_TEMPLATE/2_feature_request_cn.yml

@@ -1,21 +0,0 @@
-name: '🌠 功能需求'
-description: '提出需求或建议'
-title: '[Feature Request] '
-labels: ['enhancement']
-body:
-  - type: textarea
-    attributes:
-      label: '🥰 需求描述'
-      description: 请添加一个清晰且简洁的问题描述，阐述您希望通过这个功能需求解决的问题。
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: '🧐 解决方案'
-      description: 请清晰且简洁地描述您想要的解决方案。
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: '📝 补充信息'
-      description: 在这里添加关于问题的任何其他背景信息。

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,146 @@
+name: Bug report
+description: Create a report to help us improve
+title: "[Bug] "
+labels: ["bug"]
+
+body:
+  - type: markdown
+    attributes:
+      value: "## Describe the bug"
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: "Bug Description"
+      description: "A clear and concise description of what the bug is."
+      placeholder: "Explain the bug..."
+    validations:
+      required: true
+
+  - type: markdown
+    attributes:
+      value: "## To Reproduce"
+  - type: textarea
+    id: steps-to-reproduce
+    attributes:
+      label: "Steps to Reproduce"
+      description: "Steps to reproduce the behavior:"
+      placeholder: |
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+    validations:
+      required: true
+
+  - type: markdown
+    attributes:
+      value: "## Expected behavior"
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: "Expected Behavior"
+      description: "A clear and concise description of what you expected to happen."
+      placeholder: "Describe what you expected to happen..."
+    validations:
+      required: true
+
+  - type: markdown
+    attributes:
+      value: "## Screenshots"
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: "Screenshots"
+      description: "If applicable, add screenshots to help explain your problem."
+      placeholder: "Paste your screenshots here or write 'N/A' if not applicable..."
+    validations:
+      required: false
+
+  - type: markdown
+    attributes:
+      value: "## Deployment"
+  - type: checkboxes
+    id: deployment
+    attributes:
+      label: "Deployment Method"
+      description: "Please select the deployment method you are using."
+      options:
+        - label: "Docker"
+        - label: "Vercel"
+        - label: "Server"
+
+  - type: markdown
+    attributes:
+      value: "## Desktop (please complete the following information):"
+  - type: input
+    id: desktop-os
+    attributes:
+      label: "Desktop OS"
+      description: "Your desktop operating system."
+      placeholder: "e.g., Windows 10"
+    validations:
+      required: false
+  - type: input
+    id: desktop-browser
+    attributes:
+      label: "Desktop Browser"
+      description: "Your desktop browser."
+      placeholder: "e.g., Chrome, Safari"
+    validations:
+      required: false
+  - type: input
+    id: desktop-version
+    attributes:
+      label: "Desktop Browser Version"
+      description: "Version of your desktop browser."
+      placeholder: "e.g., 89.0"
+    validations:
+      required: false
+
+  - type: markdown
+    attributes:
+      value: "## Smartphone (please complete the following information):"
+  - type: input
+    id: smartphone-device
+    attributes:
+      label: "Smartphone Device"
+      description: "Your smartphone device."
+      placeholder: "e.g., iPhone X"
+    validations:
+      required: false
+  - type: input
+    id: smartphone-os
+    attributes:
+      label: "Smartphone OS"
+      description: "Your smartphone operating system."
+      placeholder: "e.g., iOS 14.4"
+    validations:
+      required: false
+  - type: input
+    id: smartphone-browser
+    attributes:
+      label: "Smartphone Browser"
+      description: "Your smartphone browser."
+      placeholder: "e.g., Safari"
+    validations:
+      required: false
+  - type: input
+    id: smartphone-version
+    attributes:
+      label: "Smartphone Browser Version"
+      description: "Version of your smartphone browser."
+      placeholder: "e.g., 14"
+    validations:
+      required: false
+
+  - type: markdown
+    attributes:
+      value: "## Additional Logs"
+  - type: textarea
+    id: additional-logs
+    attributes:
+      label: "Additional Logs"
+      description: "Add any logs about the problem here."
+      placeholder: "Paste any relevant logs here..."
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,53 @@
+name: Feature request
+description: Suggest an idea for this project
+title: "[Feature Request]: "
+labels: ["enhancement"]
+
+body:
+  - type: markdown
+    attributes:
+      value: "## Is your feature request related to a problem? Please describe."
+  - type: textarea
+    id: problem-description
+    attributes:
+      label: Problem Description
+      description: "A clear and concise description of what the problem is. Example: I'm always frustrated when [...]"
+      placeholder: "Explain the problem you are facing..."
+    validations:
+      required: true
+
+  - type: markdown
+    attributes:
+      value: "## Describe the solution you'd like"
+  - type: textarea
+    id: desired-solution
+    attributes:
+      label: Solution Description
+      description: A clear and concise description of what you want to happen.
+      placeholder: "Describe the solution you'd like..."
+    validations:
+      required: true
+
+  - type: markdown
+    attributes:
+      value: "## Describe alternatives you've considered"
+  - type: textarea
+    id: alternatives-considered
+    attributes:
+      label: Alternatives Considered
+      description: A clear and concise description of any alternative solutions or features you've considered.
+      placeholder: "Describe any alternative solutions or features you've considered..."
+    validations:
+      required: false
+
+  - type: markdown
+    attributes:
+      value: "## Additional context"
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional Context
+      description: Add any other context or screenshots about the feature request here.
+      placeholder: "Add any other context or screenshots about the feature request here..."
+    validations:
+      required: false

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,28 +0,0 @@
-#### 💻 变更类型 | Change Type
-
-<!-- For change type, change [ ] to [x]. -->
-
-- [ ] feat    <!-- 引入新功能 | Introduce new features -->
-- [ ] fix    <!-- 修复 Bug | Fix a bug -->
-- [ ] refactor    <!-- 重构代码（既不修复 Bug 也不添加新功能） | Refactor code that neither fixes a bug nor adds a feature -->
-- [ ] perf    <!-- 提升性能的代码变更 | A code change that improves performance -->
-- [ ] style    <!-- 添加或更新不影响代码含义的样式文件 | Add or update style files that do not affect the meaning of the code -->
-- [ ] test    <!-- 添加缺失的测试或纠正现有的测试 | Adding missing tests or correcting existing tests -->
-- [ ] docs    <!-- 仅文档更新 | Documentation only changes -->
-- [ ] ci    <!-- 修改持续集成配置文件和脚本 | Changes to our CI configuration files and scripts -->
-- [ ] chore    <!-- 其他不修改 src 或 test 文件的变更 | Other changes that don’t modify src or test files -->
-- [ ] build    <!-- 进行架构变更 | Make architectural changes -->
-
-#### 🔀 变更说明 | Description of Change
-
-<!-- 
-感谢您的 Pull Request ，请提供此 Pull Request 的变更说明
-Thank you for your Pull Request. Please provide a description above.
--->
-
-#### 📝 补充信息 | Additional Information
-
-<!-- 
-请添加与此 Pull Request 相关的补充信息
-Add any other context about the Pull Request here.
--->

.gitignore

@@ -43,4 +43,4 @@ dev
 .env
 
 *.key
-*.key.pub
+*.key.pub

Dockerfile

@@ -43,7 +43,7 @@ COPY --from=builder /app/.next/server ./.next/server
 EXPOSE 3000
 
 CMD if [ -n "$PROXY_URL" ]; then \
-    export HOSTNAME="0.0.0.0"; \
+    export HOSTNAME="127.0.0.1"; \
     protocol=$(echo $PROXY_URL | cut -d: -f1); \
     host=$(echo $PROXY_URL | cut -d/ -f3 | cut -d: -f1); \
     port=$(echo $PROXY_URL | cut -d: -f3); \

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023-2024 Zhang Yifei
+Copyright (c) 2023 Zhang Yifei
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,8 +1,5 @@
 <div align="center">
-
-<a href='#企业版'>
-  <img src="./docs/images/ent.svg" alt="icon"/>
-</a>
+<img src="./docs/images/head-cover.png" alt="icon"/>
 
 <h1 align="center">NextChat (ChatGPT Next Web)</h1>
 
@@ -17,49 +14,27 @@ One-Click to get a well-designed cross-platform ChatGPT web UI, with GPT3, GPT4
 [![MacOS][MacOS-image]][download-url]
 [![Linux][Linux-image]][download-url]
 
-[Web App](https://app.nextchat.dev/) / [Desktop App](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) / [Discord](https://discord.gg/YCkeafCafC) / [Enterprise Edition](#enterprise-edition) / [Twitter](https://twitter.com/NextChatDev)
+[Web App](https://app.nextchat.dev/) / [Desktop App](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) / [Discord](https://discord.gg/YCkeafCafC) / [Twitter](https://twitter.com/NextChatDev)
 
-[网页版](https://app.nextchat.dev/) / [客户端](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) / [企业版](#%E4%BC%81%E4%B8%9A%E7%89%88) / [反馈](https://github.com/Yidadaa/ChatGPT-Next-Web/issues)
+[网页版](https://app.nextchat.dev/) / [客户端](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) / [反馈](https://github.com/Yidadaa/ChatGPT-Next-Web/issues)
 
-[web-url]: https://app.nextchat.dev/
+[web-url]: https://chatgpt.nextweb.fun
 [download-url]: https://github.com/Yidadaa/ChatGPT-Next-Web/releases
 [Web-image]: https://img.shields.io/badge/Web-PWA-orange?logo=microsoftedge
 [Windows-image]: https://img.shields.io/badge/-Windows-blue?logo=windows
 [MacOS-image]: https://img.shields.io/badge/-MacOS-black?logo=apple
 [Linux-image]: https://img.shields.io/badge/-Linux-333?logo=ubuntu
 
-[<img src="https://vercel.com/button" alt="Deploy on Zeabur" height="30">](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FChatGPTNextWeb%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=nextchat&repository-name=NextChat) [<img src="https://zeabur.com/button.svg" alt="Deploy on Zeabur" height="30">](https://zeabur.com/templates/ZBUEFA)  [<img src="https://gitpod.io/button/open-in-gitpod.svg" alt="Open in Gitpod" height="30">](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FChatGPTNextWeb%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=nextchat&repository-name=NextChat)
+
+[![Deploy on Zeabur](https://zeabur.com/button.svg)](https://zeabur.com/templates/ZBUEFA)
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
+
+![cover](./docs/images/cover.png)
 
 </div>
 
-## Enterprise Edition
-
-Meeting Your Company's Privatization and Customization Deployment Requirements:
-- **Brand Customization**: Tailored VI/UI to seamlessly align with your corporate brand image.
-- **Resource Integration**: Unified configuration and management of dozens of AI resources by company administrators, ready for use by team members.
-- **Permission Control**: Clearly defined member permissions, resource permissions, and knowledge base permissions, all controlled via a corporate-grade Admin Panel.
-- **Knowledge Integration**: Combining your internal knowledge base with AI capabilities, making it more relevant to your company's specific business needs compared to general AI.
-- **Security Auditing**: Automatically intercept sensitive inquiries and trace all historical conversation records, ensuring AI adherence to corporate information security standards.
-- **Private Deployment**: Enterprise-level private deployment supporting various mainstream private cloud solutions, ensuring data security and privacy protection.
-- **Continuous Updates**: Ongoing updates and upgrades in cutting-edge capabilities like multimodal AI, ensuring consistent innovation and advancement.
-
-For enterprise inquiries, please contact: **business@nextchat.dev**
-
-## 企业版
-
-满足企业用户私有化部署和个性化定制需求：
-- **品牌定制**：企业量身定制 VI/UI，与企业品牌形象无缝契合
-- **资源集成**：由企业管理人员统一配置和管理数十种 AI 资源，团队成员开箱即用
-- **权限管理**：成员权限、资源权限、知识库权限层级分明，企业级 Admin Panel 统一控制
-- **知识接入**：企业内部知识库与 AI 能力相结合，比通用 AI 更贴近企业自身业务需求
-- **安全审计**：自动拦截敏感提问，支持追溯全部历史对话记录，让 AI 也能遵循企业信息安全规范
-- **私有部署**：企业级私有部署，支持各类主流私有云部署，确保数据安全和隐私保护
-- **持续更新**：提供多模态、智能体等前沿能力持续更新升级服务，常用常新、持续先进
-
-企业版咨询: **business@nextchat.dev**
-
-<img width="300" src="https://github.com/user-attachments/assets/3daeb7b6-ab63-4542-9141-2e4a12c80601">
-
 ## Features
 
 - **Deploy for free with one-click** on Vercel in under 1 minute
@@ -74,12 +49,6 @@ For enterprise inquiries, please contact: **business@nextchat.dev**
 - Automatically compresses chat history to support long conversations while also saving your tokens
 - I18n: English, 简体中文, 繁体中文, 日本語, Français, Español, Italiano, Türkçe, Deutsch, Tiếng Việt, Русский, Čeština, 한국어, Indonesia
 
-<div align="center">
-   
-![主界面](./docs/images/cover.png)
-
-</div>
-
 ## Roadmap
 
 - [x] System Prompt: pin a user defined prompt as system prompt [#138](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/138)
@@ -211,7 +180,7 @@ Specify OpenAI organization ID.
 
 ### `AZURE_URL` (optional)
 
-> Example: https://{azure-resource-url}/openai
+> Example: https://{azure-resource-url}/openai/deployments/{deploy-name}
 
 Azure deploy url.
 
@@ -243,34 +212,6 @@ anthropic claude Api version.
 
 anthropic claude Api Url.
 
-### `BAIDU_API_KEY` (optional)
-
-Baidu Api Key.
-
-### `BAIDU_SECRET_KEY` (optional)
-
-Baidu Secret Key.
-
-### `BAIDU_URL` (optional)
-
-Baidu Api Url.
-
-### `BYTEDANCE_API_KEY` (optional)
-
-ByteDance Api Key.
-
-### `BYTEDANCE_URL` (optional)
-
-ByteDance Api Url.
-
-### `ALIBABA_API_KEY` (optional)
-
-Alibaba Cloud Api Key.
-
-### `ALIBABA_URL` (optional)
-
-Alibaba Cloud Api Url.
-
 ### `HIDE_USER_API_KEY` (optional)
 
 > Default: Empty
@@ -304,28 +245,13 @@ To control custom models, use `+` to add a custom model, use `-` to hide a model
 
 User `-all` to disable all default models, `+all` to enable all default models.
 
-For Azure: use `modelName@azure=deploymentName` to customize model name and deployment name.
-> Example: `+gpt-3.5-turbo@azure=gpt35` will show option `gpt35(Azure)` in model list.
-> If you only can use Azure model, `-all,+gpt-3.5-turbo@azure=gpt35` will `gpt35(Azure)` the only option in model list.
-
-For ByteDance: use `modelName@bytedance=deploymentName` to customize model name and deployment name.
-> Example: `+Doubao-lite-4k@bytedance=ep-xxxxx-xxx` will show option `Doubao-lite-4k(ByteDance)` in model list.
-
-### `DEFAULT_MODEL` （optional）
-
-Change default model
-
-### `WHITE_WEBDEV_ENDPOINTS` (optional)
+### `WHITE_WEBDEV_ENDPOINTS` (可选)
 
 You can use this option if you want to increase the number of webdav service addresses you are allowed to access, as required by the format：
 - Each address must be a complete endpoint 
 > `https://xxxx/yyy`
 - Multiple addresses are connected by ', '
 
-### `DEFAULT_INPUT_TEMPLATE` (optional)
-
-Customize the default template used to initialize the User Input Preprocessing configuration item in Settings.
-
 ## Requirements
 
 NodeJS >= 18, Docker >= 20

README_CN.md

@@ -1,34 +1,22 @@
 <div align="center">
-
-<a href='#企业版'>
-  <img src="./docs/images/ent.svg" alt="icon"/>
-</a>
+<img src="./docs/images/icon.svg" alt="预览"/>
 
 <h1 align="center">NextChat</h1>
 
 一键免费部署你的私人 ChatGPT 网页应用，支持 GPT3, GPT4 & Gemini Pro 模型。
 
-[企业版](#%E4%BC%81%E4%B8%9A%E7%89%88) /[演示 Demo](https://chat-gpt-next-web.vercel.app/) / [反馈 Issues](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [加入 Discord](https://discord.gg/zrhvHCr79N)
+[演示 Demo](https://chat-gpt-next-web.vercel.app/) / [反馈 Issues](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [加入 Discord](https://discord.gg/zrhvHCr79N)
 
-[<img src="https://vercel.com/button" alt="Deploy on Zeabur" height="30">](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FChatGPTNextWeb%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=nextchat&repository-name=NextChat) [<img src="https://zeabur.com/button.svg" alt="Deploy on Zeabur" height="30">](https://zeabur.com/templates/ZBUEFA)  [<img src="https://gitpod.io/button/open-in-gitpod.svg" alt="Open in Gitpod" height="30">](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web)
+
+[![Deploy on Zeabur](https://zeabur.com/button.svg)](https://zeabur.com/templates/ZBUEFA)
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
+
+![主界面](./docs/images/cover.png)
 
 </div>
 
-## 企业版
-
-满足您公司私有化部署和定制需求
-- **品牌定制**：企业量身定制 VI/UI，与企业品牌形象无缝契合
-- **资源集成**：由企业管理人员统一配置和管理数十种 AI 资源，团队成员开箱即用
-- **权限管理**：成员权限、资源权限、知识库权限层级分明，企业级 Admin Panel 统一控制
-- **知识接入**：企业内部知识库与 AI 能力相结合，比通用 AI 更贴近企业自身业务需求
-- **安全审计**：自动拦截敏感提问，支持追溯全部历史对话记录，让 AI 也能遵循企业信息安全规范
-- **私有部署**：企业级私有部署，支持各类主流私有云部署，确保数据安全和隐私保护
-- **持续更新**：提供多模态、智能体等前沿能力持续更新升级服务，常用常新、持续先进
-
-企业版咨询: **business@nextchat.dev**
-
-<img width="300" src="https://github.com/user-attachments/assets/3daeb7b6-ab63-4542-9141-2e4a12c80601">
-
 ## 开始使用
 
 1. 准备好你的 [OpenAI API Key](https://platform.openai.com/account/api-keys);
@@ -37,12 +25,6 @@
 3. 部署完毕后，即可开始使用；
 4. （可选）[绑定自定义域名](https://vercel.com/docs/concepts/projects/domains/add-a-domain)：Vercel 分配的域名 DNS 在某些区域被污染了，绑定自定义域名即可直连。
 
-<div align="center">
-   
-![主界面](./docs/images/cover.png)
-
-</div>
-
 ## 保持更新
 
 如果你按照上述步骤一键部署了自己的项目，可能会发现总是提示“存在更新”的问题，这是由于 Vercel 会默认为你创建一个新项目而不是 fork 本项目，这会导致无法正确地检测更新。
@@ -112,7 +94,7 @@ OpenAI 接口代理 URL，如果你手动配置了 openai 接口代理，请填
 
 ### `AZURE_URL` （可选）
 
-> 形如：https://{azure-resource-url}/openai
+> 形如：https://{azure-resource-url}/openai/deployments/{deploy-name}
 
 Azure 部署地址。
 
@@ -124,54 +106,26 @@ Azure 密钥。
 
 Azure Api 版本，你可以在这里找到：[Azure 文档](https://learn.microsoft.com/en-us/azure/ai-services/openai/reference#chat-completions)。
 
-### `GOOGLE_API_KEY` (可选)
+### `GOOGLE_API_KEY` (optional)
 
 Google Gemini Pro 密钥.
 
-### `GOOGLE_URL` (可选)
+### `GOOGLE_URL` (optional)
 
 Google Gemini Pro Api Url.
 
-### `ANTHROPIC_API_KEY` (可选)
+### `ANTHROPIC_API_KEY` (optional)
 
 anthropic claude Api Key.
 
-### `ANTHROPIC_API_VERSION` (可选)
+### `ANTHROPIC_API_VERSION` (optional)
 
 anthropic claude Api version.
 
-### `ANTHROPIC_URL` (可选)
+### `ANTHROPIC_URL` (optional)
 
 anthropic claude Api Url.
 
-### `BAIDU_API_KEY` (可选)
-
-Baidu Api Key.
-
-### `BAIDU_SECRET_KEY` (可选)
-
-Baidu Secret Key.
-
-### `BAIDU_URL` (可选)
-
-Baidu Api Url.
-
-### `BYTEDANCE_API_KEY` (可选)
-
-ByteDance Api Key.
-
-### `BYTEDANCE_URL` (可选)
-
-ByteDance Api Url.
-
-### `ALIBABA_API_KEY` (可选)
-
-阿里云（千问）Api Key.
-
-### `ALIBABA_URL` (可选)
-
-阿里云（千问）Api Url.
-
 ### `HIDE_USER_API_KEY` （可选）
 
 如果你不想让用户自行填入 API Key，将此环境变量设置为 1 即可。
@@ -202,22 +156,6 @@ ByteDance Api Url.
 
 用来控制模型列表，使用 `+` 增加一个模型，使用 `-` 来隐藏一个模型，使用 `模型名=展示名` 来自定义模型的展示名，用英文逗号隔开。
 
-在Azure的模式下，支持使用`modelName@azure=deploymentName`的方式配置模型名称和部署名称(deploy-name)
-> 示例：`+gpt-3.5-turbo@azure=gpt35`这个配置会在模型列表显示一个`gpt35(Azure)`的选项。
-> 如果你只能使用Azure模式，那么设置 `-all,+gpt-3.5-turbo@azure=gpt35` 则可以让对话的默认使用 `gpt35(Azure)`
-
-在ByteDance的模式下，支持使用`modelName@bytedance=deploymentName`的方式配置模型名称和部署名称(deploy-name)
-> 示例: `+Doubao-lite-4k@bytedance=ep-xxxxx-xxx`这个配置会在模型列表显示一个`Doubao-lite-4k(ByteDance)`的选项
-
-
-### `DEFAULT_MODEL` （可选）
-
-更改默认模型
-
-### `DEFAULT_INPUT_TEMPLATE` （可选）
-
-自定义默认的 template，用于初始化『设置』中的『用户输入预处理』配置项
-
 ## 开发
 
 点击下方按钮，开始二次开发：

README_JA.md

@@ -1,310 +0,0 @@
-<div align="center">
-<img src="./docs/images/ent.svg" alt="プレビュー"/>
-
-<h1 align="center">NextChat</h1>
-
-ワンクリックで無料であなた専用の ChatGPT ウェブアプリをデプロイ。GPT3、GPT4 & Gemini Pro モデルをサポート。
-
-[企業版](#企業版) / [デモ](https://chat-gpt-next-web.vercel.app/) / [フィードバック](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [Discordに参加](https://discord.gg/zrhvHCr79N)
-
-[<img src="https://vercel.com/button" alt="Zeaburでデプロイ" height="30">](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FChatGPTNextWeb%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=nextchat&repository-name=NextChat) [<img src="https://zeabur.com/button.svg" alt="Zeaburでデプロイ" height="30">](https://zeabur.com/templates/ZBUEFA)  [<img src="https://gitpod.io/button/open-in-gitpod.svg" alt="Gitpodで開く" height="30">](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
-
-
-</div>
-
-## 企業版
-
-あなたの会社のプライベートデプロイとカスタマイズのニーズに応える
-- **ブランドカスタマイズ**：企業向けに特別に設計された VI/UI、企業ブランドイメージとシームレスにマッチ
-- **リソース統合**：企業管理者が数十種類のAIリソースを統一管理、チームメンバーはすぐに使用可能
-- **権限管理**：メンバーの権限、リソースの権限、ナレッジベースの権限を明確にし、企業レベルのAdmin Panelで統一管理
-- **知識の統合**：企業内部のナレッジベースとAI機能を結びつけ、汎用AIよりも企業自身の業務ニーズに近づける
-- **セキュリティ監査**：機密質問を自動的にブロックし、すべての履歴対話を追跡可能にし、AIも企業の情報セキュリティ基準に従わせる
-- **プライベートデプロイ**：企業レベルのプライベートデプロイ、主要なプライベートクラウドデプロイをサポートし、データのセキュリティとプライバシーを保護
-- **継続的な更新**：マルチモーダル、エージェントなどの最先端機能を継続的に更新し、常に最新であり続ける
-
-企業版のお問い合わせ: **business@nextchat.dev**
-
-
-## 始めに
-
-1. [OpenAI API Key](https://platform.openai.com/account/api-keys)を準備する;
-2. 右側のボタンをクリックしてデプロイを開始：
-   [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&env=GOOGLE_API_KEY&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web) 、GitHubアカウントで直接ログインし、環境変数ページにAPI Keyと[ページアクセスパスワード](#設定ページアクセスパスワード) CODEを入力してください;
-3. デプロイが完了したら、すぐに使用を開始できます;
-4. （オプション）[カスタムドメインをバインド](https://vercel.com/docs/concepts/projects/domains/add-a-domain)：Vercelが割り当てたドメインDNSは一部の地域で汚染されているため、カスタムドメインをバインドすると直接接続できます。
-
-<div align="center">
-   
-![メインインターフェース](./docs/images/cover.png)
-
-</div>
-
-
-## 更新を維持する
-
-もし上記の手順に従ってワンクリックでプロジェクトをデプロイした場合、「更新があります」というメッセージが常に表示されることがあります。これは、Vercel がデフォルトで新しいプロジェクトを作成するためで、本プロジェクトを fork していないことが原因です。そのため、正しく更新を検出できません。
-
-以下の手順に従って再デプロイすることをお勧めします：
-
-- 元のリポジトリを削除する
-- ページ右上の fork ボタンを使って、本プロジェクトを fork する
-- Vercel で再度選択してデプロイする、[詳細な手順はこちらを参照してください](./docs/vercel-ja.md)。
-
-
-### 自動更新を開く
-
-> Upstream Sync の実行エラーが発生した場合は、手動で Sync Fork してください！
-
-プロジェクトを fork した後、GitHub の制限により、fork 後のプロジェクトの Actions ページで Workflows を手動で有効にし、Upstream Sync Action を有効にする必要があります。有効化後、毎時の定期自動更新が可能になります：
-
-![自動更新](./docs/images/enable-actions.jpg)
-
-![自動更新を有効にする](./docs/images/enable-actions-sync.jpg)
-
-
-### 手動でコードを更新する
-
-手動で即座に更新したい場合は、[GitHub のドキュメント](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork)を参照して、fork したプロジェクトを上流のコードと同期する方法を確認してください。
-
-このプロジェクトをスターまたはウォッチしたり、作者をフォローすることで、新機能の更新通知をすぐに受け取ることができます。
-
-
-
-## ページアクセスパスワードを設定する
-
-> パスワードを設定すると、ユーザーは設定ページでアクセスコードを手動で入力しない限り、通常のチャットができず、未承認の状態であることを示すメッセージが表示されます。
-
-> **警告**：パスワードの桁数は十分に長く設定してください。7桁以上が望ましいです。さもないと、[ブルートフォース攻撃を受ける可能性があります](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/518)。
-
-このプロジェクトは限られた権限管理機能を提供しています。Vercel プロジェクトのコントロールパネルで、環境変数ページに `CODE` という名前の環境変数を追加し、値をカンマで区切ったカスタムパスワードに設定してください：
-
-```
-code1,code2,code3
-```
-
-この環境変数を追加または変更した後、**プロジェクトを再デプロイ**して変更を有効にしてください。
-
-
-## 環境変数
-
-> 本プロジェクトのほとんどの設定は環境変数で行います。チュートリアル：[Vercel の環境変数を変更する方法](./docs/vercel-ja.md)。
-
-### `OPENAI_API_KEY` （必須）
-
-OpenAI の API キー。OpenAI アカウントページで申請したキーをカンマで区切って複数設定できます。これにより、ランダムにキーが選択されます。
-
-### `CODE` （オプション）
-
-アクセスパスワード。カンマで区切って複数設定可能。
-
-**警告**：この項目を設定しないと、誰でもデプロイしたウェブサイトを利用でき、トークンが急速に消耗する可能性があるため、設定をお勧めします。
-
-### `BASE_URL` （オプション）
-
-> デフォルト: `https://api.openai.com`
-
-> 例: `http://your-openai-proxy.com`
-
-OpenAI API のプロキシ URL。手動で OpenAI API のプロキシを設定している場合はこのオプションを設定してください。
-
-> SSL 証明書の問題がある場合は、`BASE_URL` のプロトコルを http に設定してください。
-
-### `OPENAI_ORG_ID` （オプション）
-
-OpenAI の組織 ID を指定します。
-
-### `AZURE_URL` （オプション）
-
-> 形式: https://{azure-resource-url}/openai/deployments/{deploy-name}
-> `CUSTOM_MODELS` で `displayName` 形式で {deploy-name} を設定した場合、`AZURE_URL` から {deploy-name} を省略できます。
-
-Azure のデプロイ URL。
-
-### `AZURE_API_KEY` （オプション）
-
-Azure の API キー。
-
-### `AZURE_API_VERSION` （オプション）
-
-Azure API バージョン。[Azure ドキュメント](https://learn.microsoft.com/en-us/azure/ai-services/openai/reference#chat-completions)で確認できます。
-
-### `GOOGLE_API_KEY` (オプション)
-
-Google Gemini Pro API キー。
-
-### `GOOGLE_URL` (オプション)
-
-Google Gemini Pro API の URL。
-
-### `ANTHROPIC_API_KEY` (オプション)
-
-Anthropic Claude API キー。
-
-### `ANTHROPIC_API_VERSION` (オプション)
-
-Anthropic Claude API バージョン。
-
-### `ANTHROPIC_URL` (オプション)
-
-Anthropic Claude API の URL。
-
-### `BAIDU_API_KEY` (オプション)
-
-Baidu API キー。
-
-### `BAIDU_SECRET_KEY` (オプション)
-
-Baidu シークレットキー。
-
-### `BAIDU_URL` (オプション)
-
-Baidu API の URL。
-
-### `BYTEDANCE_API_KEY` (オプション)
-
-ByteDance API キー。
-
-### `BYTEDANCE_URL` (オプション)
-
-ByteDance API の URL。
-
-### `ALIBABA_API_KEY` (オプション)
-
-アリババ（千问）API キー。
-
-### `ALIBABA_URL` (オプション)
-
-アリババ（千问）API の URL。
-
-### `HIDE_USER_API_KEY` （オプション）
-
-ユーザーが API キーを入力できないようにしたい場合は、この環境変数を 1 に設定します。
-
-### `DISABLE_GPT4` （オプション）
-
-ユーザーが GPT-4 を使用できないようにしたい場合は、この環境変数を 1 に設定します。
-
-### `ENABLE_BALANCE_QUERY` （オプション）
-
-バランスクエリ機能を有効にしたい場合は、この環境変数を 1 に設定します。
-
-### `DISABLE_FAST_LINK` （オプション）
-
-リンクからのプリセット設定解析を無効にしたい場合は、この環境変数を 1 に設定します。
-
-### `WHITE_WEBDEV_ENDPOINTS` (オプション)
-
-アクセス許可を与える WebDAV サービスのアドレスを追加したい場合、このオプションを使用します。フォーマット要件：
-- 各アドレスは完全なエンドポイントでなければなりません。
-> `https://xxxx/xxx`
-- 複数のアドレスは `,` で接続します。
-
-### `CUSTOM_MODELS` （オプション）
-
-> 例：`+qwen-7b-chat,+glm-6b,-gpt-3.5-turbo,gpt-4-1106-preview=gpt-4-turbo` は `qwen-7b-chat` と `glm-6b` をモデルリストに追加し、`gpt-3.5-turbo` を削除し、`gpt-4-1106-preview` のモデル名を `gpt-4-turbo` として表示します。
-> すべてのモデルを無効にし、特定のモデルを有効にしたい場合は、`-all,+gpt-3.5-turbo` を使用します。これは `gpt-3.5-turbo` のみを有効にすることを意味します。
-
-モデルリストを管理します。`+` でモデルを追加し、`-` でモデルを非表示にし、`モデル名=表示名` でモデルの表示名をカスタマイズし、カンマで区切ります。
-
-Azure モードでは、`modelName@azure=deploymentName` 形式でモデル名とデプロイ名（deploy-name）を設定できます。
-> 例：`+gpt-3.5-turbo@azure=gpt35` この設定でモデルリストに `gpt35(Azure)` のオプションが表示されます。
-
-ByteDance モードでは、`modelName@bytedance=deploymentName` 形式でモデル名とデプロイ名（deploy-name）を設定できます。
-> 例: `+Doubao-lite-4k@bytedance=ep-xxxxx-xxx` この設定でモデルリストに `Doubao-lite-4k(ByteDance)` のオプションが表示されます。
-
-### `DEFAULT_MODEL` （オプション）
-
-デフォルトのモデルを変更します。
-
-### `DEFAULT_INPUT_TEMPLATE` （オプション）
-
-『設定』の『ユーザー入力前処理』の初期設定に使用するテンプレートをカスタマイズします。
-
-
-## 開発
-
-下のボタンをクリックして二次開発を開始してください：
-
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
-
-コードを書く前に、プロジェクトのルートディレクトリに `.env.local` ファイルを新規作成し、環境変数を記入します：
-
-```
-OPENAI_API_KEY=<your api key here>
-```
-
-
-### ローカル開発
-
-1. Node.js 18 と Yarn をインストールします。具体的な方法は ChatGPT にお尋ねください。
-2. `yarn install && yarn dev` を実行します。⚠️ 注意：このコマンドはローカル開発用であり、デプロイには使用しないでください。
-3. ローカルでデプロイしたい場合は、`yarn install && yarn build && yarn start` コマンドを使用してください。プロセスを守るために pm2 を使用することもできます。詳細は ChatGPT にお尋ねください。
-
-
-## デプロイ
-
-### コンテナデプロイ（推奨）
-
-> Docker バージョンは 20 以上が必要です。それ以下だとイメージが見つからないというエラーが出ます。
-
-> ⚠️ 注意：Docker バージョンは最新バージョンより 1～2 日遅れることが多いため、デプロイ後に「更新があります」の通知が出続けることがありますが、正常です。
-
-```shell
-docker pull yidadaa/chatgpt-next-web
-
-docker run -d -p 3000:3000 \
-   -e OPENAI_API_KEY=sk-xxxx \
-   -e CODE=ページアクセスパスワード \
-   yidadaa/chatgpt-next-web
-```
-
-プロキシを指定することもできます：
-
-```shell
-docker run -d -p 3000:3000 \
-   -e OPENAI_API_KEY=sk-xxxx \
-   -e CODE=ページアクセスパスワード \
-   --net=host \
-   -e PROXY_URL=http://127.0.0.1:7890 \
-   yidadaa/chatgpt-next-web
-```
-
-ローカルプロキシがアカウントとパスワードを必要とする場合は、以下を使用できます：
-
-```shell
--e PROXY_URL="http://127.0.0.1:7890 user password"
-```
-
-他の環境変数を指定する必要がある場合は、上記のコマンドに `-e 環境変数=環境変数値` を追加して指定してください。
-
-
-### ローカルデプロイ
-
-コンソールで以下のコマンドを実行します：
-
-```shell
-bash <(curl -s https://raw.githubusercontent.com/Yidadaa/ChatGPT-Next-Web/main/scripts/setup.sh)
-```
-
-⚠️ 注意：インストール中に問題が発生した場合は、Docker を使用してデプロイしてください。
-
-
-## 謝辞
-
-### 寄付者
-
-> 英語版をご覧ください。
-
-### 貢献者
-
-[プロジェクトの貢献者リストはこちら](https://github.com/Yidadaa/ChatGPT-Next-Web/graphs/contributors)
-
-### 関連プロジェクト
-
-- [one-api](https://github.com/songquanpeng/one-api): 一つのプラットフォームで大規模モデルのクォータ管理を提供し、市場に出回っているすべての主要な大規模言語モデルをサポートします。
-
-
-## オープンソースライセンス
-
-[MIT](https://opensource.org/license/mit/)

app/(app)/chat/layout.tsx

@@ -0,0 +1,102 @@
+"use client";
+import {
+  DEFAULT_SIDEBAR_WIDTH,
+  MAX_SIDEBAR_WIDTH,
+  MIN_SIDEBAR_WIDTH,
+  Path,
+} from "@/app/constant";
+import useDrag from "@/app/hooks/useDrag";
+import useMobileScreen from "@/app/hooks/useMobileScreen";
+import { updateGlobalCSSVars } from "@/app/utils/client";
+import { useRef, useState } from "react";
+import { useAppConfig } from "@/app/store/config";
+import React from "react";
+import { AuthPage } from "@/app/components/auth";
+import { SideBar } from "@/app/containers/Sidebar";
+import Screen from "@/app/components/Screen";
+import { useSwitchTheme } from "@/app/hooks/useSwitchTheme";
+import Chat from "@/app/containers/Chat/ChatPanel";
+export default function Layout({ children }: { children: React.ReactNode }) {
+  const [showPanel, setShowPanel] = useState(false);
+  const [externalProps, setExternalProps] = useState({});
+  const config = useAppConfig();
+  useSwitchTheme();
+  const isMobileScreen = useMobileScreen();
+
+  const startDragWidth = useRef(config.sidebarWidth ?? DEFAULT_SIDEBAR_WIDTH);
+  // drag side bar
+  const { onDragStart } = useDrag({
+    customToggle: () => {
+      config.update((config) => {
+        config.sidebarWidth = DEFAULT_SIDEBAR_WIDTH;
+      });
+    },
+    customDragMove: (nextWidth: number) => {
+      const { menuWidth } = updateGlobalCSSVars(nextWidth);
+
+      document.documentElement.style.setProperty(
+        "--menu-width",
+        `${menuWidth}px`,
+      );
+      config.update((config) => {
+        config.sidebarWidth = nextWidth;
+      });
+    },
+    customLimit: (x: number) =>
+      Math.max(
+        MIN_SIDEBAR_WIDTH,
+        Math.min(MAX_SIDEBAR_WIDTH, startDragWidth.current + x),
+      ),
+  });
+  return (
+    <div
+      className={`
+      w-[100%] relative bg-center
+      max-md:h-[100%]
+      md:flex md:my-2.5
+    `}
+    >
+      <div
+        className={`
+        flex flex-col px-6 
+        h-[100%] 
+        max-md:w-[100%] max-md:px-4 max-md:pb-4 max-md:flex-1
+        md:relative md:basis-sidebar  md:pb-6  md:rounded-md md:bg-menu
+      `}
+      >
+        {children}
+      </div>
+      {!isMobileScreen && (
+        <div
+          className={`group/menu-dragger cursor-col-resize w-[0.25rem]  flex items-center justify-center`}
+          onPointerDown={(e) => {
+            startDragWidth.current = config.sidebarWidth;
+            onDragStart(e as any);
+          }}
+        >
+          <div className="w-[2px] opacity-0 group-hover/menu-dragger:opacity-100 bg-menu-dragger h-[100%] rounded-[2px]">
+            &nbsp;
+          </div>
+        </div>
+      )}
+      <div
+        className={`
+      md:flex-1 md:h-[100%] md:w-page
+      max-md:transition-all max-md:duration-300 max-md:absolute max-md:top-0 max-md:max-h-[100vh] max-md:w-[100%] ${
+        showPanel ? "max-md:left-0" : "max-md:left-[101%]"
+      } max-md:z-10
+    `}
+      >
+        {/* <PanelComponent
+        {...props}
+        {...externalProps}
+        setShowPanel={setShowPanel}
+        setExternalProps={setExternalProps}
+        showPanel={showPanel}
+      /> */}
+        {/* {children} */}
+        <Chat></Chat>
+      </div>
+    </div>
+  );
+}

app/(app)/chat/page.tsx

@@ -0,0 +1,137 @@
+"use client";
+import {
+  DragDropContext,
+  Droppable,
+  OnDragEndResponder,
+} from "@hello-pangea/dnd";
+
+import { useAppConfig, useChatStore } from "@/app/store";
+
+import Locale from "@/app/locales";
+// import { useLocation, useNavigate } from "react-router-dom";
+import { useRouter, usePathname } from "next/navigation";
+
+import AddIcon from "@/app/icons/addIcon.svg";
+import NextChatTitle from "@/app/icons/nextchatTitle.svg";
+
+import Modal from "@/app/components/Modal";
+import SessionItem from "@/app/containers/Chat/components/SessionItem";
+
+export default function Page() {
+  const [sessions, selectedIndex, selectSession, moveSession] = useChatStore(
+    (state) => [
+      state.sessions,
+      state.currentSessionIndex,
+      state.selectSession,
+      state.moveSession,
+    ],
+  );
+  const config = useAppConfig();
+
+  const { isMobileScreen } = config;
+
+  const chatStore = useChatStore();
+
+  const pathname = usePathname();
+  const onDragEnd: OnDragEndResponder = (result) => {
+    const { destination, source } = result;
+    if (!destination) {
+      return;
+    }
+
+    if (
+      destination.droppableId === source.droppableId &&
+      destination.index === source.index
+    ) {
+      return;
+    }
+    moveSession(source.index, destination.index);
+  };
+
+  return (
+    <div
+      className={`
+      h-[100%] flex flex-col
+      md:px-0
+    `}
+    >
+      <div data-tauri-drag-region>
+        <div
+          className={`
+            flex items-center justify-between
+            py-6 max-md:box-content max-md:h-0
+            md:py-7
+          `}
+          data-tauri-drag-region
+        >
+          <div className="">
+            <NextChatTitle />
+          </div>
+          <div
+            className="cursor-pointer "
+            onClick={() => {
+              // if (config.dontShowMaskSplashScreen) {
+              //   chatStore.newSession();
+              //   navigate(Path.Chat);
+              // } else {
+              //   navigate(Path.NewChat);
+              // }
+            }}
+          >
+            <AddIcon />
+          </div>
+        </div>
+        <div
+          className={`pb-3 text-sm sm:text-sm-mobile text-text-chat-header-subtitle`}
+        >
+          Build your own AI assistant.
+        </div>
+      </div>
+
+      <div className={`flex-1 overflow-y-auto max-md:pb-chat-panel-mobile `}>
+        <DragDropContext onDragEnd={onDragEnd}>
+          <Droppable droppableId="chat-list">
+            {(provided) => (
+              <div
+                ref={provided.innerRef}
+                {...provided.droppableProps}
+                className={`w-[100%]`}
+              >
+                {sessions.map((item, i) => (
+                  <SessionItem
+                    title={item.topic}
+                    time={new Date(item.lastUpdate).toLocaleString()}
+                    count={item.messages.length}
+                    key={item.id}
+                    id={item.id}
+                    index={i}
+                    selected={i === selectedIndex}
+                    onClick={() => {
+                      // navigate(Path.Chat);
+                      // selectSession(i);
+                    }}
+                    onDelete={async () => {
+                      if (
+                        await Modal.warn({
+                          okText: Locale.ChatItem.DeleteOkBtn,
+                          cancelText: Locale.ChatItem.DeleteCancelBtn,
+                          title: Locale.ChatItem.DeleteTitle,
+                          content: Locale.ChatItem.DeleteContent,
+                        })
+                      ) {
+                        chatStore.deleteSession(i);
+                      }
+                    }}
+                    mask={item.mask}
+                    isMobileScreen={isMobileScreen}
+                  />
+                ))}
+                {provided.placeholder}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
+      </div>
+    </div>
+  );
+}

app/(app)/layout.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import React from "react";
+import { AuthPage } from "@/app/components/auth";
+import { SideBar } from "@/app/containers/Sidebar";
+import Screen from "@/app/components/Screen";
+
+export interface MenuWrapperInspectProps {
+  setExternalProps?: (v: Record<string, any>) => void;
+  setShowPanel?: (v: boolean) => void;
+  showPanel?: boolean;
+  [k: string]: any;
+}
+
+export default function AppLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <Screen noAuth={<AuthPage />} sidebar={<SideBar />}>
+      {children}
+    </Screen>
+  );
+}

app/(app)/settings/layout.tsx

@@ -0,0 +1,4 @@
+import React from "react";
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

app/(app)/settings/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <></>;
+}

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

@@ -1,155 +0,0 @@
-import { getServerSideConfig } from "@/app/config/server";
-import {
-  Alibaba,
-  ALIBABA_BASE_URL,
-  ApiPath,
-  ModelProvider,
-  ServiceProvider,
-} from "@/app/constant";
-import { prettyObject } from "@/app/utils/format";
-import { NextRequest, NextResponse } from "next/server";
-import { auth } from "@/app/api/auth";
-import { isModelAvailableInServer } from "@/app/utils/model";
-import type { RequestPayload } from "@/app/client/platforms/openai";
-
-const serverConfig = getServerSideConfig();
-
-async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  console.log("[Alibaba Route] params ", params);
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-
-  const authResult = auth(req, ModelProvider.Qwen);
-  if (authResult.error) {
-    return NextResponse.json(authResult, {
-      status: 401,
-    });
-  }
-
-  try {
-    const response = await request(req);
-    return response;
-  } catch (e) {
-    console.error("[Alibaba] ", e);
-    return NextResponse.json(prettyObject(e));
-  }
-}
-
-export const GET = handle;
-export const POST = handle;
-
-export const runtime = "edge";
-export const preferredRegion = [
-  "arn1",
-  "bom1",
-  "cdg1",
-  "cle1",
-  "cpt1",
-  "dub1",
-  "fra1",
-  "gru1",
-  "hnd1",
-  "iad1",
-  "icn1",
-  "kix1",
-  "lhr1",
-  "pdx1",
-  "sfo1",
-  "sin1",
-  "syd1",
-];
-
-async function request(req: NextRequest) {
-  const controller = new AbortController();
-
-  // alibaba use base url or just remove the path
-  let path = `${req.nextUrl.pathname}`.replaceAll(ApiPath.Alibaba, "");
-
-  let baseUrl = serverConfig.alibabaUrl || ALIBABA_BASE_URL;
-
-  if (!baseUrl.startsWith("http")) {
-    baseUrl = `https://${baseUrl}`;
-  }
-
-  if (baseUrl.endsWith("/")) {
-    baseUrl = baseUrl.slice(0, -1);
-  }
-
-  console.log("[Proxy] ", path);
-  console.log("[Base Url]", baseUrl);
-
-  const timeoutId = setTimeout(
-    () => {
-      controller.abort();
-    },
-    10 * 60 * 1000,
-  );
-
-  const fetchUrl = `${baseUrl}${path}`;
-  const fetchOptions: RequestInit = {
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: req.headers.get("Authorization") ?? "",
-      "X-DashScope-SSE": req.headers.get("X-DashScope-SSE") ?? "disable",
-    },
-    method: req.method,
-    body: req.body,
-    redirect: "manual",
-    // @ts-ignore
-    duplex: "half",
-    signal: controller.signal,
-  };
-
-  // #1815 try to refuse some request to some models
-  if (serverConfig.customModels && req.body) {
-    try {
-      const clonedBody = await req.text();
-      fetchOptions.body = clonedBody;
-
-      const jsonBody = JSON.parse(clonedBody) as { model?: string };
-
-      // not undefined and is false
-      if (
-        isModelAvailableInServer(
-          serverConfig.customModels,
-          jsonBody?.model as string,
-          ServiceProvider.Alibaba as string,
-        )
-      ) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: `you are not allowed to use ${jsonBody?.model} model`,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-    } catch (e) {
-      console.error(`[Alibaba] filter`, e);
-    }
-  }
-  try {
-    const res = await fetch(fetchUrl, fetchOptions);
-
-    // to prevent browser prompt for credentials
-    const newHeaders = new Headers(res.headers);
-    newHeaders.delete("www-authenticate");
-    // to disable nginx buffering
-    newHeaders.set("X-Accel-Buffering", "no");
-
-    return new Response(res.body, {
-      status: res.status,
-      statusText: res.statusText,
-      headers: newHeaders,
-    });
-  } finally {
-    clearTimeout(timeoutId);
-  }
-}

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

@@ -4,14 +4,12 @@ import {
   Anthropic,
   ApiPath,
   DEFAULT_MODELS,
-  ServiceProvider,
   ModelProvider,
 } from "@/app/constant";
 import { prettyObject } from "@/app/utils/format";
 import { NextRequest, NextResponse } from "next/server";
 import { auth } from "../../auth";
-import { isModelAvailableInServer } from "@/app/utils/model";
-import { cloudflareAIGatewayUrl } from "@/app/utils/cloudflare";
+import { collectModelTable } from "@/app/utils/model";
 
 const ALLOWD_PATH = new Set([Anthropic.ChatPath, Anthropic.ChatPath1]);
 
@@ -115,8 +113,7 @@ async function request(req: NextRequest) {
     10 * 60 * 1000,
   );
 
-  // try rebuild url, when using cloudflare ai gateway in server
-  const fetchUrl = cloudflareAIGatewayUrl(`${baseUrl}${path}`);
+  const fetchUrl = `${baseUrl}${path}`;
 
   const fetchOptions: RequestInit = {
     headers: {
@@ -139,19 +136,17 @@ async function request(req: NextRequest) {
   // #1815 try to refuse some request to some models
   if (serverConfig.customModels && req.body) {
     try {
+      const modelTable = collectModelTable(
+        DEFAULT_MODELS,
+        serverConfig.customModels,
+      );
       const clonedBody = await req.text();
       fetchOptions.body = clonedBody;
 
       const jsonBody = JSON.parse(clonedBody) as { model?: string };
 
       // not undefined and is false
-      if (
-        isModelAvailableInServer(
-          serverConfig.customModels,
-          jsonBody?.model as string,
-          ServiceProvider.Anthropic as string,
-        )
-      ) {
+      if (modelTable[jsonBody?.model ?? ""].available === false) {
         return NextResponse.json(
           {
             error: true,
@@ -166,17 +161,17 @@ async function request(req: NextRequest) {
       console.error(`[Anthropic] filter`, e);
     }
   }
-  // console.log("[Anthropic request]", fetchOptions.headers, req.method);
+  console.log("[Anthropic request]", fetchOptions.headers, req.method);
   try {
     const res = await fetch(fetchUrl, fetchOptions);
 
-    // console.log(
-    //   "[Anthropic response]",
-    //   res.status,
-    //   "   ",
-    //   res.headers,
-    //   res.url,
-    // );
+    console.log(
+      "[Anthropic response]",
+      res.status,
+      "   ",
+      res.headers,
+      res.url,
+    );
     // to prevent browser prompt for credentials
     const newHeaders = new Headers(res.headers);
     newHeaders.delete("www-authenticate");

app/api/auth.ts

@@ -73,18 +73,9 @@ export function auth(req: NextRequest, modelProvider: ModelProvider) {
       case ModelProvider.Claude:
         systemApiKey = serverConfig.anthropicApiKey;
         break;
-      case ModelProvider.Doubao:
-        systemApiKey = serverConfig.bytedanceApiKey;
-        break;
-      case ModelProvider.Ernie:
-        systemApiKey = serverConfig.baiduApiKey;
-        break;
-      case ModelProvider.Qwen:
-        systemApiKey = serverConfig.alibabaApiKey;
-        break;
       case ModelProvider.GPT:
       default:
-        if (req.nextUrl.pathname.includes("azure/deployments")) {
+        if (serverConfig.isAzure) {
           systemApiKey = serverConfig.azureApiKey;
         } else {
           systemApiKey = serverConfig.apiKey;

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

@@ -1,57 +0,0 @@
-import { getServerSideConfig } from "@/app/config/server";
-import { ModelProvider } from "@/app/constant";
-import { prettyObject } from "@/app/utils/format";
-import { NextRequest, NextResponse } from "next/server";
-import { auth } from "../../auth";
-import { requestOpenai } from "../../common";
-
-async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  console.log("[Azure Route] params ", params);
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-
-  const subpath = params.path.join("/");
-
-  const authResult = auth(req, ModelProvider.GPT);
-  if (authResult.error) {
-    return NextResponse.json(authResult, {
-      status: 401,
-    });
-  }
-
-  try {
-    return await requestOpenai(req);
-  } catch (e) {
-    console.error("[Azure] ", e);
-    return NextResponse.json(prettyObject(e));
-  }
-}
-
-export const GET = handle;
-export const POST = handle;
-
-export const runtime = "edge";
-export const preferredRegion = [
-  "arn1",
-  "bom1",
-  "cdg1",
-  "cle1",
-  "cpt1",
-  "dub1",
-  "fra1",
-  "gru1",
-  "hnd1",
-  "iad1",
-  "icn1",
-  "kix1",
-  "lhr1",
-  "pdx1",
-  "sfo1",
-  "sin1",
-  "syd1",
-];

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

@@ -1,169 +0,0 @@
-import { getServerSideConfig } from "@/app/config/server";
-import {
-  BAIDU_BASE_URL,
-  ApiPath,
-  ModelProvider,
-  BAIDU_OATUH_URL,
-  ServiceProvider,
-} from "@/app/constant";
-import { prettyObject } from "@/app/utils/format";
-import { NextRequest, NextResponse } from "next/server";
-import { auth } from "@/app/api/auth";
-import { isModelAvailableInServer } from "@/app/utils/model";
-import { getAccessToken } from "@/app/utils/baidu";
-
-const serverConfig = getServerSideConfig();
-
-async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  console.log("[Baidu Route] params ", params);
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-
-  const authResult = auth(req, ModelProvider.Ernie);
-  if (authResult.error) {
-    return NextResponse.json(authResult, {
-      status: 401,
-    });
-  }
-
-  if (!serverConfig.baiduApiKey || !serverConfig.baiduSecretKey) {
-    return NextResponse.json(
-      {
-        error: true,
-        message: `missing BAIDU_API_KEY or BAIDU_SECRET_KEY in server env vars`,
-      },
-      {
-        status: 401,
-      },
-    );
-  }
-
-  try {
-    const response = await request(req);
-    return response;
-  } catch (e) {
-    console.error("[Baidu] ", e);
-    return NextResponse.json(prettyObject(e));
-  }
-}
-
-export const GET = handle;
-export const POST = handle;
-
-export const runtime = "edge";
-export const preferredRegion = [
-  "arn1",
-  "bom1",
-  "cdg1",
-  "cle1",
-  "cpt1",
-  "dub1",
-  "fra1",
-  "gru1",
-  "hnd1",
-  "iad1",
-  "icn1",
-  "kix1",
-  "lhr1",
-  "pdx1",
-  "sfo1",
-  "sin1",
-  "syd1",
-];
-
-async function request(req: NextRequest) {
-  const controller = new AbortController();
-
-  let path = `${req.nextUrl.pathname}`.replaceAll(ApiPath.Baidu, "");
-
-  let baseUrl = serverConfig.baiduUrl || BAIDU_BASE_URL;
-
-  if (!baseUrl.startsWith("http")) {
-    baseUrl = `https://${baseUrl}`;
-  }
-
-  if (baseUrl.endsWith("/")) {
-    baseUrl = baseUrl.slice(0, -1);
-  }
-
-  console.log("[Proxy] ", path);
-  console.log("[Base Url]", baseUrl);
-
-  const timeoutId = setTimeout(
-    () => {
-      controller.abort();
-    },
-    10 * 60 * 1000,
-  );
-
-  const { access_token } = await getAccessToken(
-    serverConfig.baiduApiKey as string,
-    serverConfig.baiduSecretKey as string,
-  );
-  const fetchUrl = `${baseUrl}${path}?access_token=${access_token}`;
-
-  const fetchOptions: RequestInit = {
-    headers: {
-      "Content-Type": "application/json",
-    },
-    method: req.method,
-    body: req.body,
-    redirect: "manual",
-    // @ts-ignore
-    duplex: "half",
-    signal: controller.signal,
-  };
-
-  // #1815 try to refuse some request to some models
-  if (serverConfig.customModels && req.body) {
-    try {
-      const clonedBody = await req.text();
-      fetchOptions.body = clonedBody;
-
-      const jsonBody = JSON.parse(clonedBody) as { model?: string };
-
-      // not undefined and is false
-      if (
-        isModelAvailableInServer(
-          serverConfig.customModels,
-          jsonBody?.model as string,
-          ServiceProvider.Baidu as string,
-        )
-      ) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: `you are not allowed to use ${jsonBody?.model} model`,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-    } catch (e) {
-      console.error(`[Baidu] filter`, e);
-    }
-  }
-  try {
-    const res = await fetch(fetchUrl, fetchOptions);
-
-    // to prevent browser prompt for credentials
-    const newHeaders = new Headers(res.headers);
-    newHeaders.delete("www-authenticate");
-    // to disable nginx buffering
-    newHeaders.set("X-Accel-Buffering", "no");
-
-    return new Response(res.body, {
-      status: res.status,
-      statusText: res.statusText,
-      headers: newHeaders,
-    });
-  } finally {
-    clearTimeout(timeoutId);
-  }
-}

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

@@ -1,153 +0,0 @@
-import { getServerSideConfig } from "@/app/config/server";
-import {
-  BYTEDANCE_BASE_URL,
-  ApiPath,
-  ModelProvider,
-  ServiceProvider,
-} from "@/app/constant";
-import { prettyObject } from "@/app/utils/format";
-import { NextRequest, NextResponse } from "next/server";
-import { auth } from "@/app/api/auth";
-import { isModelAvailableInServer } from "@/app/utils/model";
-
-const serverConfig = getServerSideConfig();
-
-async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  console.log("[ByteDance Route] params ", params);
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-
-  const authResult = auth(req, ModelProvider.Doubao);
-  if (authResult.error) {
-    return NextResponse.json(authResult, {
-      status: 401,
-    });
-  }
-
-  try {
-    const response = await request(req);
-    return response;
-  } catch (e) {
-    console.error("[ByteDance] ", e);
-    return NextResponse.json(prettyObject(e));
-  }
-}
-
-export const GET = handle;
-export const POST = handle;
-
-export const runtime = "edge";
-export const preferredRegion = [
-  "arn1",
-  "bom1",
-  "cdg1",
-  "cle1",
-  "cpt1",
-  "dub1",
-  "fra1",
-  "gru1",
-  "hnd1",
-  "iad1",
-  "icn1",
-  "kix1",
-  "lhr1",
-  "pdx1",
-  "sfo1",
-  "sin1",
-  "syd1",
-];
-
-async function request(req: NextRequest) {
-  const controller = new AbortController();
-
-  let path = `${req.nextUrl.pathname}`.replaceAll(ApiPath.ByteDance, "");
-
-  let baseUrl = serverConfig.bytedanceUrl || BYTEDANCE_BASE_URL;
-
-  if (!baseUrl.startsWith("http")) {
-    baseUrl = `https://${baseUrl}`;
-  }
-
-  if (baseUrl.endsWith("/")) {
-    baseUrl = baseUrl.slice(0, -1);
-  }
-
-  console.log("[Proxy] ", path);
-  console.log("[Base Url]", baseUrl);
-
-  const timeoutId = setTimeout(
-    () => {
-      controller.abort();
-    },
-    10 * 60 * 1000,
-  );
-
-  const fetchUrl = `${baseUrl}${path}`;
-
-  const fetchOptions: RequestInit = {
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: req.headers.get("Authorization") ?? "",
-    },
-    method: req.method,
-    body: req.body,
-    redirect: "manual",
-    // @ts-ignore
-    duplex: "half",
-    signal: controller.signal,
-  };
-
-  // #1815 try to refuse some request to some models
-  if (serverConfig.customModels && req.body) {
-    try {
-      const clonedBody = await req.text();
-      fetchOptions.body = clonedBody;
-
-      const jsonBody = JSON.parse(clonedBody) as { model?: string };
-
-      // not undefined and is false
-      if (
-        isModelAvailableInServer(
-          serverConfig.customModels,
-          jsonBody?.model as string,
-          ServiceProvider.ByteDance as string,
-        )
-      ) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: `you are not allowed to use ${jsonBody?.model} model`,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-    } catch (e) {
-      console.error(`[ByteDance] filter`, e);
-    }
-  }
-
-  try {
-    const res = await fetch(fetchUrl, fetchOptions);
-
-    // to prevent browser prompt for credentials
-    const newHeaders = new Headers(res.headers);
-    newHeaders.delete("www-authenticate");
-    // to disable nginx buffering
-    newHeaders.set("X-Accel-Buffering", "no");
-
-    return new Response(res.body, {
-      status: res.status,
-      statusText: res.statusText,
-      headers: newHeaders,
-    });
-  } finally {
-    clearTimeout(timeoutId);
-  }
-}

app/api/common.ts

@@ -1,24 +1,17 @@
 import { NextRequest, NextResponse } from "next/server";
 import { getServerSideConfig } from "../config/server";
-import {
-  DEFAULT_MODELS,
-  OPENAI_BASE_URL,
-  GEMINI_BASE_URL,
-  ServiceProvider,
-} from "../constant";
-import { isModelAvailableInServer } from "../utils/model";
-import { cloudflareAIGatewayUrl } from "../utils/cloudflare";
+import { DEFAULT_MODELS, OPENAI_BASE_URL, GEMINI_BASE_URL } from "../constant";
+import { collectModelTable } from "../utils/model";
+import { makeAzurePath } from "../azure";
 
 const serverConfig = getServerSideConfig();
 
 export async function requestOpenai(req: NextRequest) {
   const controller = new AbortController();
 
-  const isAzure = req.nextUrl.pathname.includes("azure/deployments");
-
   var authValue,
     authHeaderName = "";
-  if (isAzure) {
+  if (serverConfig.isAzure) {
     authValue =
       req.headers
         .get("Authorization")
@@ -38,7 +31,7 @@ export async function requestOpenai(req: NextRequest) {
   );
 
   let baseUrl =
-    (isAzure ? serverConfig.azureUrl : serverConfig.baseUrl) || OPENAI_BASE_URL;
+    serverConfig.azureUrl || serverConfig.baseUrl || OPENAI_BASE_URL;
 
   if (!baseUrl.startsWith("http")) {
     baseUrl = `https://${baseUrl}`;
@@ -58,46 +51,17 @@ export async function requestOpenai(req: NextRequest) {
     10 * 60 * 1000,
   );
 
-  if (isAzure) {
-    const azureApiVersion =
-      req?.nextUrl?.searchParams?.get("api-version") ||
-      serverConfig.azureApiVersion;
-    baseUrl = baseUrl.split("/deployments").shift() as string;
-    path = `${req.nextUrl.pathname.replaceAll(
-      "/api/azure/",
-      "",
-    )}?api-version=${azureApiVersion}`;
-
-    // Forward compatibility:
-    // if display_name(deployment_name) not set, and '{deploy-id}' in AZURE_URL
-    // then using default '{deploy-id}'
-    if (serverConfig.customModels && serverConfig.azureUrl) {
-      const modelName = path.split("/")[1];
-      let realDeployName = "";
-      serverConfig.customModels
-        .split(",")
-        .filter((v) => !!v && !v.startsWith("-") && v.includes(modelName))
-        .forEach((m) => {
-          const [fullName, displayName] = m.split("=");
-          const [_, providerName] = fullName.split("@");
-          if (providerName === "azure" && !displayName) {
-            const [_, deployId] = (serverConfig?.azureUrl ?? "").split(
-              "deployments/",
-            );
-            if (deployId) {
-              realDeployName = deployId;
-            }
-          }
-        });
-      if (realDeployName) {
-        console.log("[Replace with DeployId", realDeployName);
-        path = path.replaceAll(modelName, realDeployName);
-      }
+  if (serverConfig.isAzure) {
+    if (!serverConfig.azureApiVersion) {
+      return NextResponse.json({
+        error: true,
+        message: `missing AZURE_API_VERSION in server env vars`,
+      });
     }
+    path = makeAzurePath(path, serverConfig.azureApiVersion);
   }
 
-  const fetchUrl = cloudflareAIGatewayUrl(`${baseUrl}/${path}`);
-  console.log("fetchUrl", fetchUrl);
+  const fetchUrl = `${baseUrl}/${path}`;
   const fetchOptions: RequestInit = {
     headers: {
       "Content-Type": "application/json",
@@ -119,24 +83,17 @@ export async function requestOpenai(req: NextRequest) {
   // #1815 try to refuse gpt4 request
   if (serverConfig.customModels && req.body) {
     try {
+      const modelTable = collectModelTable(
+        DEFAULT_MODELS,
+        serverConfig.customModels,
+      );
       const clonedBody = await req.text();
       fetchOptions.body = clonedBody;
 
       const jsonBody = JSON.parse(clonedBody) as { model?: string };
 
       // not undefined and is false
-      if (
-        isModelAvailableInServer(
-          serverConfig.customModels,
-          jsonBody?.model as string,
-          ServiceProvider.OpenAI as string,
-        ) ||
-        isModelAvailableInServer(
-          serverConfig.customModels,
-          jsonBody?.model as string,
-          ServiceProvider.Azure as string,
-        )
-      ) {
+      if (modelTable[jsonBody?.model ?? ""].available === false) {
         return NextResponse.json(
           {
             error: true,
@@ -155,16 +112,16 @@ export async function requestOpenai(req: NextRequest) {
   try {
     const res = await fetch(fetchUrl, fetchOptions);
 
-    // Extract the OpenAI-Organization header from the response
-    const openaiOrganizationHeader = res.headers.get("OpenAI-Organization");
+  // Extract the OpenAI-Organization header from the response
+  const openaiOrganizationHeader = res.headers.get("OpenAI-Organization");
 
-    // Check if serverConfig.openaiOrgId is defined and not an empty string
-    if (serverConfig.openaiOrgId && serverConfig.openaiOrgId.trim() !== "") {
-      // If openaiOrganizationHeader is present, log it; otherwise, log that the header is not present
-      console.log("[Org ID]", openaiOrganizationHeader);
-    } else {
-      console.log("[Org ID] is not set up.");
-    }
+  // Check if serverConfig.openaiOrgId is defined and not an empty string
+  if (serverConfig.openaiOrgId && serverConfig.openaiOrgId.trim() !== "") {
+    // If openaiOrganizationHeader is present, log it; otherwise, log that the header is not present
+    console.log("[Org ID]", openaiOrganizationHeader);
+  } else {
+    console.log("[Org ID] is not set up.");
+  }
 
     // to prevent browser prompt for credentials
     const newHeaders = new Headers(res.headers);
@@ -172,6 +129,7 @@ export async function requestOpenai(req: NextRequest) {
     // to disable nginx buffering
     newHeaders.set("X-Accel-Buffering", "no");
 
+
     // Conditionally delete the OpenAI-Organization header from the response if [Org ID] is undefined or empty (not setup in ENV)
     // Also, this is to prevent the header from being sent to the client
     if (!serverConfig.openaiOrgId || serverConfig.openaiOrgId.trim() === "") {
@@ -184,6 +142,7 @@ export async function requestOpenai(req: NextRequest) {
     // The browser will try to decode the response with brotli and fail
     newHeaders.delete("content-encoding");
 
+
     return new Response(res.body, {
       status: res.status,
       statusText: res.statusText,

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

@@ -1,15 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import { auth } from "../../auth";
 import { getServerSideConfig } from "@/app/config/server";
-import {
-  ApiPath,
-  GEMINI_BASE_URL,
-  Google,
-  ModelProvider,
-} from "@/app/constant";
-import { prettyObject } from "@/app/utils/format";
-
-const serverConfig = getServerSideConfig();
+import { GEMINI_BASE_URL, Google, ModelProvider } from "@/app/constant";
 
 async function handle(
   req: NextRequest,
@@ -21,63 +13,11 @@ async function handle(
     return NextResponse.json({ body: "OK" }, { status: 200 });
   }
 
-  const authResult = auth(req, ModelProvider.GeminiPro);
-  if (authResult.error) {
-    return NextResponse.json(authResult, {
-      status: 401,
-    });
-  }
-
-  const bearToken = req.headers.get("Authorization") ?? "";
-  const token = bearToken.trim().replaceAll("Bearer ", "").trim();
-
-  const apiKey = token ? token : serverConfig.googleApiKey;
-
-  if (!apiKey) {
-    return NextResponse.json(
-      {
-        error: true,
-        message: `missing GOOGLE_API_KEY in server env vars`,
-      },
-      {
-        status: 401,
-      },
-    );
-  }
-  try {
-    const response = await request(req, apiKey);
-    return response;
-  } catch (e) {
-    console.error("[Google] ", e);
-    return NextResponse.json(prettyObject(e));
-  }
-}
-
-export const GET = handle;
-export const POST = handle;
-
-export const runtime = "edge";
-export const preferredRegion = [
-  "bom1",
-  "cle1",
-  "cpt1",
-  "gru1",
-  "hnd1",
-  "iad1",
-  "icn1",
-  "kix1",
-  "pdx1",
-  "sfo1",
-  "sin1",
-  "syd1",
-];
-
-async function request(req: NextRequest, apiKey: string) {
   const controller = new AbortController();
 
-  let baseUrl = serverConfig.googleUrl || GEMINI_BASE_URL;
+  const serverConfig = getServerSideConfig();
 
-  let path = `${req.nextUrl.pathname}`.replaceAll(ApiPath.Google, "");
+  let baseUrl = serverConfig.googleUrl || GEMINI_BASE_URL;
 
   if (!baseUrl.startsWith("http")) {
     baseUrl = `https://${baseUrl}`;
@@ -87,6 +27,8 @@ async function request(req: NextRequest, apiKey: string) {
     baseUrl = baseUrl.slice(0, -1);
   }
 
+  let path = `${req.nextUrl.pathname}`.replaceAll("/api/google/", "");
+
   console.log("[Proxy] ", path);
   console.log("[Base Url]", baseUrl);
 
@@ -96,11 +38,32 @@ async function request(req: NextRequest, apiKey: string) {
     },
     10 * 60 * 1000,
   );
-  const fetchUrl = `${baseUrl}${path}?key=${apiKey}${
-    req?.nextUrl?.searchParams?.get("alt") === "sse" ? "&alt=sse" : ""
-  }`;
 
-  console.log("[Fetch Url] ", fetchUrl);
+  const authResult = auth(req, ModelProvider.GeminiPro);
+  if (authResult.error) {
+    return NextResponse.json(authResult, {
+      status: 401,
+    });
+  }
+
+  const bearToken = req.headers.get("Authorization") ?? "";
+  const token = bearToken.trim().replaceAll("Bearer ", "").trim();
+
+  const key = token ? token : serverConfig.googleApiKey;
+
+  if (!key) {
+    return NextResponse.json(
+      {
+        error: true,
+        message: `missing GOOGLE_API_KEY in server env vars`,
+      },
+      {
+        status: 401,
+      },
+    );
+  }
+
+  const fetchUrl = `${baseUrl}/${path}?key=${key}`;
   const fetchOptions: RequestInit = {
     headers: {
       "Content-Type": "application/json",
@@ -132,3 +95,22 @@ async function request(req: NextRequest, apiKey: string) {
     clearTimeout(timeoutId);
   }
 }
+
+export const GET = handle;
+export const POST = handle;
+
+export const runtime = "edge";
+export const preferredRegion = [
+  "bom1",
+  "cle1",
+  "cpt1",
+  "gru1",
+  "hnd1",
+  "iad1",
+  "icn1",
+  "kix1",
+  "pdx1",
+  "sfo1",
+  "sin1",
+  "syd1",
+];

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

@@ -1,22 +1,14 @@
 import { NextRequest, NextResponse } from "next/server";
-import { STORAGE_KEY, internalAllowedWebDavEndpoints } from "../../../constant";
+import { STORAGE_KEY, internalWhiteWebDavEndpoints } from "../../../constant";
 import { getServerSideConfig } from "@/app/config/server";
 
 const config = getServerSideConfig();
 
-const mergedAllowedWebDavEndpoints = [
-  ...internalAllowedWebDavEndpoints,
-  ...config.allowedWebDevEndpoints,
+const mergedWhiteWebDavEndpoints = [
+  ...internalWhiteWebDavEndpoints,
+  ...config.whiteWebDevEndpoints,
 ].filter((domain) => Boolean(domain.trim()));
 
-const normalizeUrl = (url: string) => {
-  try {
-    return new URL(url);
-  } catch (err) {
-    return null;
-  }
-};
-
 async function handle(
   req: NextRequest,
   { params }: { params: { path: string[] } },
@@ -32,15 +24,7 @@ async function handle(
 
   // Validate the endpoint to prevent potential SSRF attacks
   if (
-    !endpoint ||
-    !mergedAllowedWebDavEndpoints.some((allowedEndpoint) => {
-      const normalizedAllowedEndpoint = normalizeUrl(allowedEndpoint);
-      const normalizedEndpoint = normalizeUrl(endpoint as string);
-
-      return normalizedEndpoint &&
-        normalizedEndpoint.hostname === normalizedAllowedEndpoint?.hostname &&
-        normalizedEndpoint.pathname.startsWith(normalizedAllowedEndpoint.pathname);
-    })
+    !mergedWhiteWebDavEndpoints.some((white) => endpoint?.startsWith(white))
   ) {
     return NextResponse.json(
       {

app/azure.ts

@@ -0,0 +1,9 @@
+export function makeAzurePath(path: string, apiVersion: string) {
+  // should omit /v1 prefix
+  path = path.replaceAll("v1/", "");
+
+  // should add api-key to query string
+  path += `${path.includes("?") ? "&" : "?"}api-version=${apiVersion}`;
+
+  return path;
+}

app/client/api.ts

@@ -9,10 +9,6 @@ import { ChatMessage, ModelType, useAccessStore, useChatStore } from "../store";
 import { ChatGPTApi } from "./platforms/openai";
 import { GeminiProApi } from "./platforms/google";
 import { ClaudeApi } from "./platforms/anthropic";
-import { ErnieApi } from "./platforms/baidu";
-import { DoubaoApi } from "./platforms/bytedance";
-import { QwenApi } from "./platforms/alibaba";
-
 export const ROLES = ["system", "user", "assistant"] as const;
 export type MessageRole = (typeof ROLES)[number];
 
@@ -34,7 +30,6 @@ export interface RequestMessage {
 
 export interface LLMConfig {
   model: string;
-  providerName?: string;
   temperature?: number;
   top_p?: number;
   stream?: boolean;
@@ -59,7 +54,6 @@ export interface LLMUsage {
 
 export interface LLMModel {
   name: string;
-  displayName?: string;
   available: boolean;
   provider: LLMModelProvider;
 }
@@ -108,15 +102,6 @@ export class ClientApi {
       case ModelProvider.Claude:
         this.llm = new ClaudeApi();
         break;
-      case ModelProvider.Ernie:
-        this.llm = new ErnieApi();
-        break;
-      case ModelProvider.Doubao:
-        this.llm = new DoubaoApi();
-        break;
-      case ModelProvider.Qwen:
-        this.llm = new QwenApi();
-        break;
       default:
         this.llm = new ChatGPTApi();
     }
@@ -170,100 +155,37 @@ export class ClientApi {
 
 export function getHeaders() {
   const accessStore = useAccessStore.getState();
-  const chatStore = useChatStore.getState();
   const headers: Record<string, string> = {
     "Content-Type": "application/json",
     Accept: "application/json",
   };
-
+  const modelConfig = useChatStore.getState().currentSession().mask.modelConfig;
+  const isGoogle = modelConfig.model.startsWith("gemini");
+  const isAzure = accessStore.provider === ServiceProvider.Azure;
+  const authHeader = isAzure ? "api-key" : "Authorization";
+  const apiKey = isGoogle
+    ? accessStore.googleApiKey
+    : isAzure
+    ? accessStore.azureApiKey
+    : accessStore.openaiApiKey;
   const clientConfig = getClientConfig();
+  const makeBearer = (s: string) => `${isAzure ? "" : "Bearer "}${s.trim()}`;
+  const validString = (x: string) => x && x.length > 0;
 
-  function getConfig() {
-    const modelConfig = chatStore.currentSession().mask.modelConfig;
-    const isGoogle = modelConfig.providerName == ServiceProvider.Google;
-    const isAzure = modelConfig.providerName === ServiceProvider.Azure;
-    const isAnthropic = modelConfig.providerName === ServiceProvider.Anthropic;
-    const isBaidu = modelConfig.providerName == ServiceProvider.Baidu;
-    const isByteDance = modelConfig.providerName === ServiceProvider.ByteDance;
-    const isAlibaba = modelConfig.providerName === ServiceProvider.Alibaba;
-    const isEnabledAccessControl = accessStore.enabledAccessControl();
-    const apiKey = isGoogle
-      ? accessStore.googleApiKey
-      : isAzure
-      ? accessStore.azureApiKey
-      : isAnthropic
-      ? accessStore.anthropicApiKey
-      : isByteDance
-      ? accessStore.bytedanceApiKey
-      : isAlibaba
-      ? accessStore.alibabaApiKey
-      : accessStore.openaiApiKey;
-    return {
-      isGoogle,
-      isAzure,
-      isAnthropic,
-      isBaidu,
-      isByteDance,
-      isAlibaba,
-      apiKey,
-      isEnabledAccessControl,
-    };
-  }
-
-  function getAuthHeader(): string {
-    return isAzure ? "api-key" : isAnthropic ? "x-api-key" : "Authorization";
-  }
-
-  function getBearerToken(apiKey: string, noBearer: boolean = false): string {
-    return validString(apiKey)
-      ? `${noBearer ? "" : "Bearer "}${apiKey.trim()}`
-      : "";
-  }
-
-  function validString(x: string): boolean {
-    return x?.length > 0;
-  }
-  const {
-    isGoogle,
-    isAzure,
-    isAnthropic,
-    isBaidu,
-    apiKey,
-    isEnabledAccessControl,
-  } = getConfig();
   // when using google api in app, not set auth header
-  if (isGoogle && clientConfig?.isApp) return headers;
-  // when using baidu api in app, not set auth header
-  if (isBaidu && clientConfig?.isApp) return headers;
-
-  const authHeader = getAuthHeader();
-
-  const bearerToken = getBearerToken(apiKey, isAzure || isAnthropic);
-
-  if (bearerToken) {
-    headers[authHeader] = bearerToken;
-  } else if (isEnabledAccessControl && validString(accessStore.accessCode)) {
-    headers["Authorization"] = getBearerToken(
-      ACCESS_CODE_PREFIX + accessStore.accessCode,
-    );
+  if (!(isGoogle && clientConfig?.isApp)) {
+    // use user's api key first
+    if (validString(apiKey)) {
+      headers[authHeader] = makeBearer(apiKey);
+    } else if (
+      accessStore.enabledAccessControl() &&
+      validString(accessStore.accessCode)
+    ) {
+      headers[authHeader] = makeBearer(
+        ACCESS_CODE_PREFIX + accessStore.accessCode,
+      );
+    }
   }
 
   return headers;
 }
-
-export function getClientApi(provider: ServiceProvider): ClientApi {
-  switch (provider) {
-    case ServiceProvider.Google:
-      return new ClientApi(ModelProvider.GeminiPro);
-    case ServiceProvider.Anthropic:
-      return new ClientApi(ModelProvider.Claude);
-    case ServiceProvider.Baidu:
-      return new ClientApi(ModelProvider.Ernie);
-    case ServiceProvider.ByteDance:
-      return new ClientApi(ModelProvider.Doubao);
-    case ServiceProvider.Alibaba:
-      return new ClientApi(ModelProvider.Qwen);
-    default:
-      return new ClientApi(ModelProvider.GPT);
-  }
-}

app/client/platforms/alibaba.ts

@@ -1,268 +0,0 @@
-"use client";
-import {
-  ApiPath,
-  Alibaba,
-  ALIBABA_BASE_URL,
-  REQUEST_TIMEOUT_MS,
-} from "@/app/constant";
-import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
-
-import {
-  ChatOptions,
-  getHeaders,
-  LLMApi,
-  LLMModel,
-  MultimodalContent,
-} from "../api";
-import Locale from "../../locales";
-import {
-  EventStreamContentType,
-  fetchEventSource,
-} from "@fortaine/fetch-event-source";
-import { prettyObject } from "@/app/utils/format";
-import { getClientConfig } from "@/app/config/client";
-import { getMessageTextContent } from "@/app/utils";
-
-export interface OpenAIListModelResponse {
-  object: string;
-  data: Array<{
-    id: string;
-    object: string;
-    root: string;
-  }>;
-}
-
-interface RequestInput {
-  messages: {
-    role: "system" | "user" | "assistant";
-    content: string | MultimodalContent[];
-  }[];
-}
-interface RequestParam {
-  result_format: string;
-  incremental_output?: boolean;
-  temperature: number;
-  repetition_penalty?: number;
-  top_p: number;
-  max_tokens?: number;
-}
-interface RequestPayload {
-  model: string;
-  input: RequestInput;
-  parameters: RequestParam;
-}
-
-export class QwenApi implements LLMApi {
-  path(path: string): string {
-    const accessStore = useAccessStore.getState();
-
-    let baseUrl = "";
-
-    if (accessStore.useCustomConfig) {
-      baseUrl = accessStore.alibabaUrl;
-    }
-
-    if (baseUrl.length === 0) {
-      const isApp = !!getClientConfig()?.isApp;
-      baseUrl = isApp ? ALIBABA_BASE_URL : ApiPath.Alibaba;
-    }
-
-    if (baseUrl.endsWith("/")) {
-      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
-    }
-    if (!baseUrl.startsWith("http") && !baseUrl.startsWith(ApiPath.Alibaba)) {
-      baseUrl = "https://" + baseUrl;
-    }
-
-    console.log("[Proxy Endpoint] ", baseUrl, path);
-
-    return [baseUrl, path].join("/");
-  }
-
-  extractMessage(res: any) {
-    return res?.output?.choices?.at(0)?.message?.content ?? "";
-  }
-
-  async chat(options: ChatOptions) {
-    const messages = options.messages.map((v) => ({
-      role: v.role,
-      content: getMessageTextContent(v),
-    }));
-
-    const modelConfig = {
-      ...useAppConfig.getState().modelConfig,
-      ...useChatStore.getState().currentSession().mask.modelConfig,
-      ...{
-        model: options.config.model,
-      },
-    };
-
-    const shouldStream = !!options.config.stream;
-    const requestPayload: RequestPayload = {
-      model: modelConfig.model,
-      input: {
-        messages,
-      },
-      parameters: {
-        result_format: "message",
-        incremental_output: shouldStream,
-        temperature: modelConfig.temperature,
-        // max_tokens: modelConfig.max_tokens,
-        top_p: modelConfig.top_p === 1 ? 0.99 : modelConfig.top_p, // qwen top_p is should be < 1
-      },
-    };
-
-    const controller = new AbortController();
-    options.onController?.(controller);
-
-    try {
-      const chatPath = this.path(Alibaba.ChatPath);
-      const chatPayload = {
-        method: "POST",
-        body: JSON.stringify(requestPayload),
-        signal: controller.signal,
-        headers: {
-          ...getHeaders(),
-          "X-DashScope-SSE": shouldStream ? "enable" : "disable",
-        },
-      };
-
-      // make a fetch request
-      const requestTimeoutId = setTimeout(
-        () => controller.abort(),
-        REQUEST_TIMEOUT_MS,
-      );
-
-      if (shouldStream) {
-        let responseText = "";
-        let remainText = "";
-        let finished = false;
-
-        // animate response to make it looks smooth
-        function animateResponseText() {
-          if (finished || controller.signal.aborted) {
-            responseText += remainText;
-            console.log("[Response Animation] finished");
-            if (responseText?.length === 0) {
-              options.onError?.(new Error("empty response from server"));
-            }
-            return;
-          }
-
-          if (remainText.length > 0) {
-            const fetchCount = Math.max(1, Math.round(remainText.length / 60));
-            const fetchText = remainText.slice(0, fetchCount);
-            responseText += fetchText;
-            remainText = remainText.slice(fetchCount);
-            options.onUpdate?.(responseText, fetchText);
-          }
-
-          requestAnimationFrame(animateResponseText);
-        }
-
-        // start animaion
-        animateResponseText();
-
-        const finish = () => {
-          if (!finished) {
-            finished = true;
-            options.onFinish(responseText + remainText);
-          }
-        };
-
-        controller.signal.onabort = finish;
-
-        fetchEventSource(chatPath, {
-          ...chatPayload,
-          async onopen(res) {
-            clearTimeout(requestTimeoutId);
-            const contentType = res.headers.get("content-type");
-            console.log(
-              "[Alibaba] request response content type: ",
-              contentType,
-            );
-
-            if (contentType?.startsWith("text/plain")) {
-              responseText = await res.clone().text();
-              return finish();
-            }
-
-            if (
-              !res.ok ||
-              !res.headers
-                .get("content-type")
-                ?.startsWith(EventStreamContentType) ||
-              res.status !== 200
-            ) {
-              const responseTexts = [responseText];
-              let extraInfo = await res.clone().text();
-              try {
-                const resJson = await res.clone().json();
-                extraInfo = prettyObject(resJson);
-              } catch {}
-
-              if (res.status === 401) {
-                responseTexts.push(Locale.Error.Unauthorized);
-              }
-
-              if (extraInfo) {
-                responseTexts.push(extraInfo);
-              }
-
-              responseText = responseTexts.join("\n\n");
-
-              return finish();
-            }
-          },
-          onmessage(msg) {
-            if (msg.data === "[DONE]" || finished) {
-              return finish();
-            }
-            const text = msg.data;
-            try {
-              const json = JSON.parse(text);
-              const choices = json.output.choices as Array<{
-                message: { content: string };
-              }>;
-              const delta = choices[0]?.message?.content;
-              if (delta) {
-                remainText += delta;
-              }
-            } catch (e) {
-              console.error("[Request] parse error", text, msg);
-            }
-          },
-          onclose() {
-            finish();
-          },
-          onerror(e) {
-            options.onError?.(e);
-            throw e;
-          },
-          openWhenHidden: true,
-        });
-      } else {
-        const res = await fetch(chatPath, chatPayload);
-        clearTimeout(requestTimeoutId);
-
-        const resJson = await res.json();
-        const message = this.extractMessage(resJson);
-        options.onFinish(message);
-      }
-    } catch (e) {
-      console.log("[Request] failed to make a chat request", e);
-      options.onError?.(e as Error);
-    }
-  }
-  async usage() {
-    return {
-      used: 0,
-      total: 0,
-    };
-  }
-
-  async models(): Promise<LLMModel[]> {
-    return [];
-  }
-}
-export { Alibaba };

app/client/platforms/anthropic.ts

@@ -1,8 +1,9 @@
 import { ACCESS_CODE_PREFIX, Anthropic, ApiPath } from "@/app/constant";
-import { ChatOptions, getHeaders, LLMApi, MultimodalContent } from "../api";
+import { ChatOptions, LLMApi, MultimodalContent } from "../api";
 import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
 import { getClientConfig } from "@/app/config/client";
 import { DEFAULT_API_HOST } from "@/app/constant";
+import { RequestMessage } from "@/app/typing";
 import {
   EventStreamContentType,
   fetchEventSource,
@@ -11,8 +12,6 @@ import {
 import Locale from "../../locales";
 import { prettyObject } from "@/app/utils/format";
 import { getMessageTextContent, isVisionModel } from "@/app/utils";
-import { preProcessImageContent } from "@/app/utils/chat";
-import { cloudflareAIGatewayUrl } from "@/app/utils/cloudflare";
 
 export type MultiBlockContent = {
   type: "image" | "text";
@@ -93,12 +92,7 @@ export class ClaudeApi implements LLMApi {
       },
     };
 
-    // try get base64image from local cache image_url
-    const messages: ChatOptions["messages"] = [];
-    for (const v of options.messages) {
-      const content = await preProcessImageContent(v.content);
-      messages.push({ role: v.role, content });
-    }
+    const messages = [...options.messages];
 
     const keys = ["system", "user"];
 
@@ -167,13 +161,6 @@ export class ClaudeApi implements LLMApi {
         };
       });
 
-    if (prompt[0]?.role === "assistant") {
-      prompt.unshift({
-        role: "user",
-        content: ";",
-      });
-    }
-
     const requestBody: AnthropicChatRequest = {
       messages: prompt,
       stream: shouldStream,
@@ -196,10 +183,11 @@ export class ClaudeApi implements LLMApi {
       body: JSON.stringify(requestBody),
       signal: controller.signal,
       headers: {
-        ...getHeaders(), // get common headers
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        "x-api-key": accessStore.anthropicApiKey,
         "anthropic-version": accessStore.anthropicApiVersion,
-        // do not send `anthropicApiKey` in browser!!!
-        // Authorization: getAuthKey(accessStore.anthropicApiKey),
+        Authorization: getAuthKey(accessStore.anthropicApiKey),
       },
     };
 
@@ -381,8 +369,7 @@ export class ClaudeApi implements LLMApi {
 
     baseUrl = trimEnd(baseUrl, "/");
 
-    // try rebuild url, when using cloudflare ai gateway in client
-    return cloudflareAIGatewayUrl(`${baseUrl}/${path}`);
+    return `${baseUrl}/${path}`;
   }
 }
 
@@ -395,3 +382,27 @@ function trimEnd(s: string, end = " ") {
 
   return s;
 }
+
+function bearer(value: string) {
+  return `Bearer ${value.trim()}`;
+}
+
+function getAuthKey(apiKey = "") {
+  const accessStore = useAccessStore.getState();
+  const isApp = !!getClientConfig()?.isApp;
+  let authKey = "";
+
+  if (apiKey) {
+    // use user's api key first
+    authKey = bearer(apiKey);
+  } else if (
+    accessStore.enabledAccessControl() &&
+    !isApp &&
+    !!accessStore.accessCode
+  ) {
+    // or use access code
+    authKey = bearer(ACCESS_CODE_PREFIX + accessStore.accessCode);
+  }
+
+  return authKey;
+}

app/client/platforms/baidu.ts

@@ -1,273 +0,0 @@
-"use client";
-import {
-  ApiPath,
-  Baidu,
-  BAIDU_BASE_URL,
-  REQUEST_TIMEOUT_MS,
-} from "@/app/constant";
-import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
-import { getAccessToken } from "@/app/utils/baidu";
-
-import {
-  ChatOptions,
-  getHeaders,
-  LLMApi,
-  LLMModel,
-  MultimodalContent,
-} from "../api";
-import Locale from "../../locales";
-import {
-  EventStreamContentType,
-  fetchEventSource,
-} from "@fortaine/fetch-event-source";
-import { prettyObject } from "@/app/utils/format";
-import { getClientConfig } from "@/app/config/client";
-import { getMessageTextContent } from "@/app/utils";
-
-export interface OpenAIListModelResponse {
-  object: string;
-  data: Array<{
-    id: string;
-    object: string;
-    root: string;
-  }>;
-}
-
-interface RequestPayload {
-  messages: {
-    role: "system" | "user" | "assistant";
-    content: string | MultimodalContent[];
-  }[];
-  stream?: boolean;
-  model: string;
-  temperature: number;
-  presence_penalty: number;
-  frequency_penalty: number;
-  top_p: number;
-  max_tokens?: number;
-}
-
-export class ErnieApi implements LLMApi {
-  path(path: string): string {
-    const accessStore = useAccessStore.getState();
-
-    let baseUrl = "";
-
-    if (accessStore.useCustomConfig) {
-      baseUrl = accessStore.baiduUrl;
-    }
-
-    if (baseUrl.length === 0) {
-      const isApp = !!getClientConfig()?.isApp;
-      // do not use proxy for baidubce api
-      baseUrl = isApp ? BAIDU_BASE_URL : ApiPath.Baidu;
-    }
-
-    if (baseUrl.endsWith("/")) {
-      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
-    }
-    if (!baseUrl.startsWith("http") && !baseUrl.startsWith(ApiPath.Baidu)) {
-      baseUrl = "https://" + baseUrl;
-    }
-
-    console.log("[Proxy Endpoint] ", baseUrl, path);
-
-    return [baseUrl, path].join("/");
-  }
-
-  async chat(options: ChatOptions) {
-    const messages = options.messages.map((v) => ({
-      role: v.role,
-      content: getMessageTextContent(v),
-    }));
-
-    // "error_code": 336006, "error_msg": "the length of messages must be an odd number",
-    if (messages.length % 2 === 0) {
-      messages.unshift({
-        role: "user",
-        content: " ",
-      });
-    }
-
-    const modelConfig = {
-      ...useAppConfig.getState().modelConfig,
-      ...useChatStore.getState().currentSession().mask.modelConfig,
-      ...{
-        model: options.config.model,
-      },
-    };
-
-    const shouldStream = !!options.config.stream;
-    const requestPayload: RequestPayload = {
-      messages,
-      stream: shouldStream,
-      model: modelConfig.model,
-      temperature: modelConfig.temperature,
-      presence_penalty: modelConfig.presence_penalty,
-      frequency_penalty: modelConfig.frequency_penalty,
-      top_p: modelConfig.top_p,
-    };
-
-    console.log("[Request] Baidu payload: ", requestPayload);
-
-    const controller = new AbortController();
-    options.onController?.(controller);
-
-    try {
-      let chatPath = this.path(Baidu.ChatPath(modelConfig.model));
-
-      // getAccessToken can not run in browser, because cors error
-      if (!!getClientConfig()?.isApp) {
-        const accessStore = useAccessStore.getState();
-        if (accessStore.useCustomConfig) {
-          if (accessStore.isValidBaidu()) {
-            const { access_token } = await getAccessToken(
-              accessStore.baiduApiKey,
-              accessStore.baiduSecretKey,
-            );
-            chatPath = `${chatPath}${
-              chatPath.includes("?") ? "&" : "?"
-            }access_token=${access_token}`;
-          }
-        }
-      }
-      const chatPayload = {
-        method: "POST",
-        body: JSON.stringify(requestPayload),
-        signal: controller.signal,
-        headers: getHeaders(),
-      };
-
-      // make a fetch request
-      const requestTimeoutId = setTimeout(
-        () => controller.abort(),
-        REQUEST_TIMEOUT_MS,
-      );
-
-      if (shouldStream) {
-        let responseText = "";
-        let remainText = "";
-        let finished = false;
-
-        // animate response to make it looks smooth
-        function animateResponseText() {
-          if (finished || controller.signal.aborted) {
-            responseText += remainText;
-            console.log("[Response Animation] finished");
-            if (responseText?.length === 0) {
-              options.onError?.(new Error("empty response from server"));
-            }
-            return;
-          }
-
-          if (remainText.length > 0) {
-            const fetchCount = Math.max(1, Math.round(remainText.length / 60));
-            const fetchText = remainText.slice(0, fetchCount);
-            responseText += fetchText;
-            remainText = remainText.slice(fetchCount);
-            options.onUpdate?.(responseText, fetchText);
-          }
-
-          requestAnimationFrame(animateResponseText);
-        }
-
-        // start animaion
-        animateResponseText();
-
-        const finish = () => {
-          if (!finished) {
-            finished = true;
-            options.onFinish(responseText + remainText);
-          }
-        };
-
-        controller.signal.onabort = finish;
-
-        fetchEventSource(chatPath, {
-          ...chatPayload,
-          async onopen(res) {
-            clearTimeout(requestTimeoutId);
-            const contentType = res.headers.get("content-type");
-            console.log("[Baidu] request response content type: ", contentType);
-
-            if (contentType?.startsWith("text/plain")) {
-              responseText = await res.clone().text();
-              return finish();
-            }
-
-            if (
-              !res.ok ||
-              !res.headers
-                .get("content-type")
-                ?.startsWith(EventStreamContentType) ||
-              res.status !== 200
-            ) {
-              const responseTexts = [responseText];
-              let extraInfo = await res.clone().text();
-              try {
-                const resJson = await res.clone().json();
-                extraInfo = prettyObject(resJson);
-              } catch {}
-
-              if (res.status === 401) {
-                responseTexts.push(Locale.Error.Unauthorized);
-              }
-
-              if (extraInfo) {
-                responseTexts.push(extraInfo);
-              }
-
-              responseText = responseTexts.join("\n\n");
-
-              return finish();
-            }
-          },
-          onmessage(msg) {
-            if (msg.data === "[DONE]" || finished) {
-              return finish();
-            }
-            const text = msg.data;
-            try {
-              const json = JSON.parse(text);
-              const delta = json?.result;
-              if (delta) {
-                remainText += delta;
-              }
-            } catch (e) {
-              console.error("[Request] parse error", text, msg);
-            }
-          },
-          onclose() {
-            finish();
-          },
-          onerror(e) {
-            options.onError?.(e);
-            throw e;
-          },
-          openWhenHidden: true,
-        });
-      } else {
-        const res = await fetch(chatPath, chatPayload);
-        clearTimeout(requestTimeoutId);
-
-        const resJson = await res.json();
-        const message = resJson?.result;
-        options.onFinish(message);
-      }
-    } catch (e) {
-      console.log("[Request] failed to make a chat request", e);
-      options.onError?.(e as Error);
-    }
-  }
-  async usage() {
-    return {
-      used: 0,
-      total: 0,
-    };
-  }
-
-  async models(): Promise<LLMModel[]> {
-    return [];
-  }
-}
-export { Baidu };

app/client/platforms/bytedance.ts

@@ -1,255 +0,0 @@
-"use client";
-import {
-  ApiPath,
-  ByteDance,
-  BYTEDANCE_BASE_URL,
-  REQUEST_TIMEOUT_MS,
-} from "@/app/constant";
-import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
-
-import {
-  ChatOptions,
-  getHeaders,
-  LLMApi,
-  LLMModel,
-  MultimodalContent,
-} from "../api";
-import Locale from "../../locales";
-import {
-  EventStreamContentType,
-  fetchEventSource,
-} from "@fortaine/fetch-event-source";
-import { prettyObject } from "@/app/utils/format";
-import { getClientConfig } from "@/app/config/client";
-import { getMessageTextContent } from "@/app/utils";
-
-export interface OpenAIListModelResponse {
-  object: string;
-  data: Array<{
-    id: string;
-    object: string;
-    root: string;
-  }>;
-}
-
-interface RequestPayload {
-  messages: {
-    role: "system" | "user" | "assistant";
-    content: string | MultimodalContent[];
-  }[];
-  stream?: boolean;
-  model: string;
-  temperature: number;
-  presence_penalty: number;
-  frequency_penalty: number;
-  top_p: number;
-  max_tokens?: number;
-}
-
-export class DoubaoApi implements LLMApi {
-  path(path: string): string {
-    const accessStore = useAccessStore.getState();
-
-    let baseUrl = "";
-
-    if (accessStore.useCustomConfig) {
-      baseUrl = accessStore.bytedanceUrl;
-    }
-
-    if (baseUrl.length === 0) {
-      const isApp = !!getClientConfig()?.isApp;
-      baseUrl = isApp ? BYTEDANCE_BASE_URL : ApiPath.ByteDance;
-    }
-
-    if (baseUrl.endsWith("/")) {
-      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
-    }
-    if (!baseUrl.startsWith("http") && !baseUrl.startsWith(ApiPath.ByteDance)) {
-      baseUrl = "https://" + baseUrl;
-    }
-
-    console.log("[Proxy Endpoint] ", baseUrl, path);
-
-    return [baseUrl, path].join("/");
-  }
-
-  extractMessage(res: any) {
-    return res.choices?.at(0)?.message?.content ?? "";
-  }
-
-  async chat(options: ChatOptions) {
-    const messages = options.messages.map((v) => ({
-      role: v.role,
-      content: getMessageTextContent(v),
-    }));
-
-    const modelConfig = {
-      ...useAppConfig.getState().modelConfig,
-      ...useChatStore.getState().currentSession().mask.modelConfig,
-      ...{
-        model: options.config.model,
-      },
-    };
-
-    const shouldStream = !!options.config.stream;
-    const requestPayload: RequestPayload = {
-      messages,
-      stream: shouldStream,
-      model: modelConfig.model,
-      temperature: modelConfig.temperature,
-      presence_penalty: modelConfig.presence_penalty,
-      frequency_penalty: modelConfig.frequency_penalty,
-      top_p: modelConfig.top_p,
-    };
-
-    const controller = new AbortController();
-    options.onController?.(controller);
-
-    try {
-      const chatPath = this.path(ByteDance.ChatPath);
-      const chatPayload = {
-        method: "POST",
-        body: JSON.stringify(requestPayload),
-        signal: controller.signal,
-        headers: getHeaders(),
-      };
-
-      // make a fetch request
-      const requestTimeoutId = setTimeout(
-        () => controller.abort(),
-        REQUEST_TIMEOUT_MS,
-      );
-
-      if (shouldStream) {
-        let responseText = "";
-        let remainText = "";
-        let finished = false;
-
-        // animate response to make it looks smooth
-        function animateResponseText() {
-          if (finished || controller.signal.aborted) {
-            responseText += remainText;
-            console.log("[Response Animation] finished");
-            if (responseText?.length === 0) {
-              options.onError?.(new Error("empty response from server"));
-            }
-            return;
-          }
-
-          if (remainText.length > 0) {
-            const fetchCount = Math.max(1, Math.round(remainText.length / 60));
-            const fetchText = remainText.slice(0, fetchCount);
-            responseText += fetchText;
-            remainText = remainText.slice(fetchCount);
-            options.onUpdate?.(responseText, fetchText);
-          }
-
-          requestAnimationFrame(animateResponseText);
-        }
-
-        // start animaion
-        animateResponseText();
-
-        const finish = () => {
-          if (!finished) {
-            finished = true;
-            options.onFinish(responseText + remainText);
-          }
-        };
-
-        controller.signal.onabort = finish;
-
-        fetchEventSource(chatPath, {
-          ...chatPayload,
-          async onopen(res) {
-            clearTimeout(requestTimeoutId);
-            const contentType = res.headers.get("content-type");
-            console.log(
-              "[ByteDance] request response content type: ",
-              contentType,
-            );
-
-            if (contentType?.startsWith("text/plain")) {
-              responseText = await res.clone().text();
-              return finish();
-            }
-
-            if (
-              !res.ok ||
-              !res.headers
-                .get("content-type")
-                ?.startsWith(EventStreamContentType) ||
-              res.status !== 200
-            ) {
-              const responseTexts = [responseText];
-              let extraInfo = await res.clone().text();
-              try {
-                const resJson = await res.clone().json();
-                extraInfo = prettyObject(resJson);
-              } catch {}
-
-              if (res.status === 401) {
-                responseTexts.push(Locale.Error.Unauthorized);
-              }
-
-              if (extraInfo) {
-                responseTexts.push(extraInfo);
-              }
-
-              responseText = responseTexts.join("\n\n");
-
-              return finish();
-            }
-          },
-          onmessage(msg) {
-            if (msg.data === "[DONE]" || finished) {
-              return finish();
-            }
-            const text = msg.data;
-            try {
-              const json = JSON.parse(text);
-              const choices = json.choices as Array<{
-                delta: { content: string };
-              }>;
-              const delta = choices[0]?.delta?.content;
-              if (delta) {
-                remainText += delta;
-              }
-            } catch (e) {
-              console.error("[Request] parse error", text, msg);
-            }
-          },
-          onclose() {
-            finish();
-          },
-          onerror(e) {
-            options.onError?.(e);
-            throw e;
-          },
-          openWhenHidden: true,
-        });
-      } else {
-        const res = await fetch(chatPath, chatPayload);
-        clearTimeout(requestTimeoutId);
-
-        const resJson = await res.json();
-        const message = this.extractMessage(resJson);
-        options.onFinish(message);
-      }
-    } catch (e) {
-      console.log("[Request] failed to make a chat request", e);
-      options.onError?.(e as Error);
-    }
-  }
-  async usage() {
-    return {
-      used: 0,
-      total: 0,
-    };
-  }
-
-  async models(): Promise<LLMModel[]> {
-    return [];
-  }
-}
-export { ByteDance };

app/client/platforms/google.ts

@@ -1,50 +1,15 @@
-import { ApiPath, Google, REQUEST_TIMEOUT_MS } from "@/app/constant";
+import { Google, REQUEST_TIMEOUT_MS } from "@/app/constant";
 import { ChatOptions, getHeaders, LLMApi, LLMModel, LLMUsage } from "../api";
 import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
 import { getClientConfig } from "@/app/config/client";
 import { DEFAULT_API_HOST } from "@/app/constant";
-import Locale from "../../locales";
-import {
-  EventStreamContentType,
-  fetchEventSource,
-} from "@fortaine/fetch-event-source";
-import { prettyObject } from "@/app/utils/format";
 import {
   getMessageTextContent,
   getMessageImages,
   isVisionModel,
 } from "@/app/utils";
-import { preProcessImageContent } from "@/app/utils/chat";
 
 export class GeminiProApi implements LLMApi {
-  path(path: string): string {
-    const accessStore = useAccessStore.getState();
-
-    let baseUrl = "";
-    if (accessStore.useCustomConfig) {
-      baseUrl = accessStore.googleUrl;
-    }
-
-    if (baseUrl.length === 0) {
-      const isApp = !!getClientConfig()?.isApp;
-      baseUrl = isApp
-        ? DEFAULT_API_HOST + `/api/proxy/google?key=${accessStore.googleApiKey}`
-        : ApiPath.Google;
-    }
-    if (baseUrl.endsWith("/")) {
-      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
-    }
-    if (!baseUrl.startsWith("http") && !baseUrl.startsWith(ApiPath.Google)) {
-      baseUrl = "https://" + baseUrl;
-    }
-
-    console.log("[Proxy Endpoint] ", baseUrl, path);
-
-    let chatPath = [baseUrl, path].join("/");
-
-    chatPath += chatPath.includes("?") ? "&alt=sse" : "?alt=sse";
-    return chatPath;
-  }
   extractMessage(res: any) {
     console.log("[Response] gemini-pro response: ", res);
 
@@ -55,18 +20,12 @@ export class GeminiProApi implements LLMApi {
     );
   }
   async chat(options: ChatOptions): Promise<void> {
-    const apiClient = this;
+    // const apiClient = this;
+    const visionModel = isVisionModel(options.config.model);
     let multimodal = false;
-
-    // try get base64image from local cache image_url
-    const _messages: ChatOptions["messages"] = [];
-    for (const v of options.messages) {
-      const content = await preProcessImageContent(v.content);
-      _messages.push({ role: v.role, content });
-    }
-    const messages = _messages.map((v) => {
+    const messages = options.messages.map((v) => {
       let parts: any[] = [{ text: getMessageTextContent(v) }];
-      if (isVisionModel(options.config.model)) {
+      if (visionModel) {
         const images = getMessageImages(v);
         if (images.length > 0) {
           multimodal = true;
@@ -144,13 +103,36 @@ export class GeminiProApi implements LLMApi {
       ],
     };
 
+    const accessStore = useAccessStore.getState();
+
+    let baseUrl = "";
+
+    if (accessStore.useCustomConfig) {
+      baseUrl = accessStore.googleUrl;
+    }
+
+    const isApp = !!getClientConfig()?.isApp;
+
     let shouldStream = !!options.config.stream;
     const controller = new AbortController();
     options.onController?.(controller);
     try {
-      // https://github.com/google-gemini/cookbook/blob/main/quickstarts/rest/Streaming_REST.ipynb
-      const chatPath = this.path(Google.ChatPath(modelConfig.model));
+      let googleChatPath = visionModel
+        ? Google.VisionChatPath(modelConfig.model)
+        : Google.ChatPath(modelConfig.model);
+      let chatPath = this.path(googleChatPath);
 
+      // let baseUrl = accessStore.googleUrl;
+
+      if (!baseUrl) {
+        baseUrl = isApp
+          ? DEFAULT_API_HOST + "/api/proxy/google/" + googleChatPath
+          : chatPath;
+      }
+
+      if (isApp) {
+        baseUrl += `?key=${accessStore.googleApiKey}`;
+      }
       const chatPayload = {
         method: "POST",
         body: JSON.stringify(requestPayload),
@@ -163,17 +145,15 @@ export class GeminiProApi implements LLMApi {
         () => controller.abort(),
         REQUEST_TIMEOUT_MS,
       );
-
       if (shouldStream) {
         let responseText = "";
         let remainText = "";
         let finished = false;
 
+        let existingTexts: string[] = [];
         const finish = () => {
-          if (!finished) {
-            finished = true;
-            options.onFinish(responseText + remainText);
-          }
+          finished = true;
+          options.onFinish(existingTexts.join(""));
         };
 
         // animate response to make it looks smooth
@@ -198,83 +178,74 @@ export class GeminiProApi implements LLMApi {
         // start animaion
         animateResponseText();
 
-        controller.signal.onabort = finish;
+        fetch(
+          baseUrl.replace("generateContent", "streamGenerateContent"),
+          chatPayload,
+        )
+          .then((response) => {
+            const reader = response?.body?.getReader();
+            const decoder = new TextDecoder();
+            let partialData = "";
 
-        fetchEventSource(chatPath, {
-          ...chatPayload,
-          async onopen(res) {
-            clearTimeout(requestTimeoutId);
-            const contentType = res.headers.get("content-type");
-            console.log(
-              "[Gemini] request response content type: ",
-              contentType,
-            );
+            return reader?.read().then(function processText({
+              done,
+              value,
+            }): Promise<any> {
+              if (done) {
+                if (response.status !== 200) {
+                  try {
+                    let data = JSON.parse(ensureProperEnding(partialData));
+                    if (data && data[0].error) {
+                      options.onError?.(new Error(data[0].error.message));
+                    } else {
+                      options.onError?.(new Error("Request failed"));
+                    }
+                  } catch (_) {
+                    options.onError?.(new Error("Request failed"));
+                  }
+                }
 
-            if (contentType?.startsWith("text/plain")) {
-              responseText = await res.clone().text();
-              return finish();
-            }
+                console.log("Stream complete");
+                // options.onFinish(responseText + remainText);
+                finished = true;
+                return Promise.resolve();
+              }
+
+              partialData += decoder.decode(value, { stream: true });
 
-            if (
-              !res.ok ||
-              !res.headers
-                .get("content-type")
-                ?.startsWith(EventStreamContentType) ||
-              res.status !== 200
-            ) {
-              const responseTexts = [responseText];
-              let extraInfo = await res.clone().text();
               try {
-                const resJson = await res.clone().json();
-                extraInfo = prettyObject(resJson);
-              } catch {}
+                let data = JSON.parse(ensureProperEnding(partialData));
 
-              if (res.status === 401) {
-                responseTexts.push(Locale.Error.Unauthorized);
+                const textArray = data.reduce(
+                  (acc: string[], item: { candidates: any[] }) => {
+                    const texts = item.candidates.map((candidate) =>
+                      candidate.content.parts
+                        .map((part: { text: any }) => part.text)
+                        .join(""),
+                    );
+                    return acc.concat(texts);
+                  },
+                  [],
+                );
+
+                if (textArray.length > existingTexts.length) {
+                  const deltaArray = textArray.slice(existingTexts.length);
+                  existingTexts = textArray;
+                  remainText += deltaArray.join("");
+                }
+              } catch (error) {
+                // console.log("[Response Animation] error: ", error,partialData);
+                // skip error message when parsing json
               }
 
-              if (extraInfo) {
-                responseTexts.push(extraInfo);
-              }
-
-              responseText = responseTexts.join("\n\n");
-
-              return finish();
-            }
-          },
-          onmessage(msg) {
-            if (msg.data === "[DONE]" || finished) {
-              return finish();
-            }
-            const text = msg.data;
-            try {
-              const json = JSON.parse(text);
-              const delta = apiClient.extractMessage(json);
-
-              if (delta) {
-                remainText += delta;
-              }
-
-              const blockReason = json?.promptFeedback?.blockReason;
-              if (blockReason) {
-                // being blocked
-                console.log(`[Google] [Safety Ratings] result:`, blockReason);
-              }
-            } catch (e) {
-              console.error("[Request] parse error", text, msg);
-            }
-          },
-          onclose() {
-            finish();
-          },
-          onerror(e) {
-            options.onError?.(e);
-            throw e;
-          },
-          openWhenHidden: true,
-        });
+              return reader.read().then(processText);
+            });
+          })
+          .catch((error) => {
+            console.error("Error:", error);
+          });
       } else {
-        const res = await fetch(chatPath, chatPayload);
+        const res = await fetch(baseUrl, chatPayload);
         clearTimeout(requestTimeoutId);
         const resJson = await res.json();
         if (resJson?.promptFeedback?.blockReason) {
@@ -286,7 +257,7 @@ export class GeminiProApi implements LLMApi {
             ),
           );
         }
-        const message = apiClient.extractMessage(resJson);
+        const message = this.extractMessage(resJson);
         options.onFinish(message);
       }
     } catch (e) {
@@ -300,4 +271,14 @@ export class GeminiProApi implements LLMApi {
   async models(): Promise<LLMModel[]> {
     return [];
   }
+  path(path: string): string {
+    return "/api/google/" + path;
+  }
+}
+
+function ensureProperEnding(str: string) {
+  if (str.startsWith("[") && !str.endsWith("]")) {
+    return str + "]";
+  }
+  return str;
 }

app/client/platforms/openai.ts

@@ -1,18 +1,13 @@
 "use client";
-// azure and openai, using same models. so using same LLMApi.
 import {
   ApiPath,
   DEFAULT_API_HOST,
   DEFAULT_MODELS,
   OpenaiPath,
-  Azure,
   REQUEST_TIMEOUT_MS,
   ServiceProvider,
 } from "@/app/constant";
 import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
-import { collectModelsWithDefaultModel } from "@/app/utils/model";
-import { preProcessImageContent } from "@/app/utils/chat";
-import { cloudflareAIGatewayUrl } from "@/app/utils/cloudflare";
 
 import {
   ChatOptions,
@@ -29,6 +24,7 @@ import {
 } from "@fortaine/fetch-event-source";
 import { prettyObject } from "@/app/utils/format";
 import { getClientConfig } from "@/app/config/client";
+import { makeAzurePath } from "@/app/azure";
 import {
   getMessageTextContent,
   getMessageImages,
@@ -44,7 +40,7 @@ export interface OpenAIListModelResponse {
   }>;
 }
 
-export interface RequestPayload {
+interface RequestPayload {
   messages: {
     role: "system" | "user" | "assistant";
     content: string | MultimodalContent[];
@@ -66,38 +62,39 @@ export class ChatGPTApi implements LLMApi {
 
     let baseUrl = "";
 
-    const isAzure = path.includes("deployments");
     if (accessStore.useCustomConfig) {
+      const isAzure = accessStore.provider === ServiceProvider.Azure;
+
       if (isAzure && !accessStore.isValidAzure()) {
         throw Error(
           "incomplete azure config, please check it in your settings page",
         );
       }
 
+      if (isAzure) {
+        path = makeAzurePath(path, accessStore.azureApiVersion);
+      }
+
       baseUrl = isAzure ? accessStore.azureUrl : accessStore.openaiUrl;
     }
 
     if (baseUrl.length === 0) {
       const isApp = !!getClientConfig()?.isApp;
-      const apiPath = isAzure ? ApiPath.Azure : ApiPath.OpenAI;
-      baseUrl = isApp ? DEFAULT_API_HOST + "/proxy" + apiPath : apiPath;
+      baseUrl = isApp
+        ? DEFAULT_API_HOST + "/proxy" + ApiPath.OpenAI
+        : ApiPath.OpenAI;
     }
 
     if (baseUrl.endsWith("/")) {
       baseUrl = baseUrl.slice(0, baseUrl.length - 1);
     }
-    if (
-      !baseUrl.startsWith("http") &&
-      !isAzure &&
-      !baseUrl.startsWith(ApiPath.OpenAI)
-    ) {
+    if (!baseUrl.startsWith("http") && !baseUrl.startsWith(ApiPath.OpenAI)) {
       baseUrl = "https://" + baseUrl;
     }
 
     console.log("[Proxy Endpoint] ", baseUrl, path);
 
-    // try rebuild url, when using cloudflare ai gateway in client
-    return cloudflareAIGatewayUrl([baseUrl, path].join("/"));
+    return [baseUrl, path].join("/");
   }
 
   extractMessage(res: any) {
@@ -106,20 +103,16 @@ export class ChatGPTApi implements LLMApi {
 
   async chat(options: ChatOptions) {
     const visionModel = isVisionModel(options.config.model);
-    const messages: ChatOptions["messages"] = [];
-    for (const v of options.messages) {
-      const content = visionModel
-        ? await preProcessImageContent(v.content)
-        : getMessageTextContent(v);
-      messages.push({ role: v.role, content });
-    }
+    const messages = options.messages.map((v) => ({
+      role: v.role,
+      content: visionModel ? v.content : getMessageTextContent(v),
+    }));
 
     const modelConfig = {
       ...useAppConfig.getState().modelConfig,
       ...useChatStore.getState().currentSession().mask.modelConfig,
       ...{
         model: options.config.model,
-        providerName: options.config.providerName,
       },
     };
 
@@ -136,7 +129,7 @@ export class ChatGPTApi implements LLMApi {
     };
 
     // add max_tokens to vision model
-    if (visionModel && modelConfig.model.includes("preview")) {
+    if (visionModel) {
       requestPayload["max_tokens"] = Math.max(modelConfig.max_tokens, 4000);
     }
 
@@ -147,35 +140,7 @@ export class ChatGPTApi implements LLMApi {
     options.onController?.(controller);
 
     try {
-      let chatPath = "";
-      if (modelConfig.providerName === ServiceProvider.Azure) {
-        // find model, and get displayName as deployName
-        const { models: configModels, customModels: configCustomModels } =
-          useAppConfig.getState();
-        const {
-          defaultModel,
-          customModels: accessCustomModels,
-          useCustomConfig,
-        } = useAccessStore.getState();
-        const models = collectModelsWithDefaultModel(
-          configModels,
-          [configCustomModels, accessCustomModels].join(","),
-          defaultModel,
-        );
-        const model = models.find(
-          (model) =>
-            model.name === modelConfig.model &&
-            model?.provider?.providerName === ServiceProvider.Azure,
-        );
-        chatPath = this.path(
-          Azure.ChatPath(
-            (model?.displayName ?? model?.name) as string,
-            useCustomConfig ? useAccessStore.getState().azureApiVersion : "",
-          ),
-        );
-      } else {
-        chatPath = this.path(OpenaiPath.ChatPath);
-      }
+      const chatPath = this.path(OpenaiPath.ChatPath);
       const chatPayload = {
         method: "POST",
         body: JSON.stringify(requestPayload),

app/command.ts

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
-import { useSearchParams } from "react-router-dom";
+// import { useSearchParams } from "react-router-dom";
+import { useSearchParams } from "next/navigation";
 import Locale from "./locales";
 
 type Command = (param: string) => void;
@@ -14,22 +15,23 @@ interface Commands {
 export function useCommand(commands: Commands = {}) {
   const [searchParams, setSearchParams] = useSearchParams();
 
-  useEffect(() => {
-    let shouldUpdate = false;
-    searchParams.forEach((param, name) => {
-      const commandName = name as keyof Commands;
-      if (typeof commands[commandName] === "function") {
-        commands[commandName]!(param);
-        searchParams.delete(name);
-        shouldUpdate = true;
-      }
-    });
+  // fixme: update commands
+  // useEffect(() => {
+  //   let shouldUpdate = false;
+  //   searchParams.forEach((param, name) => {
+  //     const commandName = name as keyof Commands;
+  //     if (typeof commands[commandName] === "function") {
+  //       commands[commandName]!(param);
+  //       searchParams.delete(name);
+  //       shouldUpdate = true;
+  //     }
+  //   });
 
-    if (shouldUpdate) {
-      setSearchParams(searchParams);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchParams, commands]);
+  //   if (shouldUpdate) {
+  //     setSearchParams(searchParams);
+  //   }
+  // // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [searchParams, commands]);
 }
 
 interface ChatCommands {

app/components/ActionsBar/index.tsx

@@ -0,0 +1,123 @@
+import { isValidElement } from "react";
+
+type IconMap = {
+  active?: JSX.Element;
+  inactive?: JSX.Element;
+  mobileActive?: JSX.Element;
+  mobileInactive?: JSX.Element;
+};
+interface Action {
+  id: string;
+  title?: string;
+  icons: JSX.Element | IconMap;
+  className?: string;
+  onClick?: () => void;
+  activeClassName?: string;
+}
+
+type Groups = {
+  normal: string[][];
+  mobile: string[][];
+};
+
+export interface ActionsBarProps {
+  actionsShema: Action[];
+  onSelect?: (id: string) => void;
+  selected?: string;
+  groups: string[][] | Groups;
+  className?: string;
+  inMobile?: boolean;
+}
+
+export default function ActionsBar(props: ActionsBarProps) {
+  const { actionsShema, onSelect, selected, groups, className, inMobile } =
+    props;
+
+  const handlerClick =
+    (action: Action) => (e: { preventDefault: () => void }) => {
+      e.preventDefault();
+      if (action.onClick) {
+        action.onClick();
+      }
+      if (selected !== action.id) {
+        onSelect?.(action.id);
+      }
+    };
+
+  const internalGroup = Array.isArray(groups)
+    ? groups
+    : inMobile
+    ? groups.mobile
+    : groups.normal;
+
+  const content = internalGroup.reduce((res, group, ind, arr) => {
+    res.push(
+      ...group.map((i) => {
+        const action = actionsShema.find((a) => a.id === i);
+        if (!action) {
+          return <></>;
+        }
+
+        const { icons } = action;
+        let activeIcon, inactiveIcon, mobileActiveIcon, mobileInactiveIcon;
+
+        if (isValidElement(icons)) {
+          activeIcon = icons;
+          inactiveIcon = icons;
+          mobileActiveIcon = icons;
+          mobileInactiveIcon = icons;
+        } else {
+          activeIcon = (icons as IconMap).active;
+          inactiveIcon = (icons as IconMap).inactive;
+          mobileActiveIcon = (icons as IconMap).mobileActive;
+          mobileInactiveIcon = (icons as IconMap).mobileInactive;
+        }
+
+        if (inMobile) {
+          return (
+            <div
+              key={action.id}
+              className={` cursor-pointer shrink-1 grow-0 basis-[${
+                (100 - 1) / arr.length
+              }%] flex flex-col items-center justify-around gap-0.5 py-1.5
+                        ${
+                          selected === action.id
+                            ? "text-text-sidebar-tab-mobile-active"
+                            : "text-text-sidebar-tab-mobile-inactive"
+                        }
+                    `}
+              onClick={handlerClick(action)}
+            >
+              {selected === action.id ? mobileActiveIcon : mobileInactiveIcon}
+              <div className="  leading-3 text-sm-mobile-tab h-3 font-common w-[100%]">
+                {action.title || " "}
+              </div>
+            </div>
+          );
+        }
+
+        return (
+          <div
+            key={action.id}
+            className={`cursor-pointer p-3 ${
+              selected === action.id
+                ? `!bg-actions-bar-btn-default ${action.activeClassName}`
+                : "bg-transparent"
+            } rounded-md items-center ${
+              action.className
+            } transition duration-300 ease-in-out`}
+            onClick={handlerClick(action)}
+          >
+            {selected === action.id ? activeIcon : inactiveIcon}
+          </div>
+        );
+      }),
+    );
+    if (ind < arr.length - 1) {
+      res.push(<div key={String(ind)} className=" flex-1"></div>);
+    }
+    return res;
+  }, [] as JSX.Element[]);
+
+  return <div className={`flex items-center ${className} `}>{content}</div>;
+}

app/components/Btn/index.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+
+export type ButtonType = "primary" | "danger" | null;
+
+export interface BtnProps {
+  onClick?: () => void;
+  icon?: JSX.Element;
+  prefixIcon?: JSX.Element;
+  type?: ButtonType;
+  text?: React.ReactNode;
+  bordered?: boolean;
+  shadow?: boolean;
+  className?: string;
+  title?: string;
+  disabled?: boolean;
+  tabIndex?: number;
+  autoFocus?: boolean;
+}
+
+export default function Btn(props: BtnProps) {
+  const {
+    onClick,
+    icon,
+    type,
+    text,
+    className,
+    title,
+    disabled,
+    tabIndex,
+    autoFocus,
+    prefixIcon,
+  } = props;
+
+  let btnClassName;
+
+  switch (type) {
+    case "primary":
+      btnClassName = `${
+        disabled
+          ? "bg-primary-btn-disabled dark:opacity-30 dark:text-primary-btn-disabled-dark"
+          : "bg-primary-btn shadow-btn"
+      } text-text-btn-primary `;
+      break;
+    case "danger":
+      btnClassName = `bg-danger-btn text-text-btn-danger hover:bg-hovered-danger-btn`;
+      break;
+    default:
+      btnClassName = `bg-default-btn text-text-btn-default hover:bg-hovered-btn`;
+  }
+
+  return (
+    <button
+      className={`
+        ${className ?? ""} 
+        py-2 px-3 flex items-center justify-center gap-1 rounded-action-btn transition-all duration-300 select-none
+        ${disabled ? "cursor-not-allowed" : "cursor-pointer"}
+        ${btnClassName} 
+        follow-parent-svg
+      `}
+      onClick={onClick}
+      title={title}
+      disabled={disabled}
+      role="button"
+      tabIndex={tabIndex}
+      autoFocus={autoFocus}
+    >
+      {prefixIcon && (
+        <div className={`flex items-center justify-center`}>{prefixIcon}</div>
+      )}
+      {text && (
+        <div className={`font-common text-sm-title leading-4 line-clamp-1`}>
+          {text}
+        </div>
+      )}
+      {icon && <div className={`flex items-center justify-center`}>{icon}</div>}
+    </button>
+  );
+}

app/components/Card/index.tsx

@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+
+export interface CardProps {
+  className?: string;
+  children?: ReactNode;
+  title?: ReactNode;
+}
+
+export default function Card(props: CardProps) {
+  const { className, children, title } = props;
+
+  return (
+    <>
+      {title && (
+        <div
+          className={`
+            capitalize !font-semibold text-sm-mobile font-weight-setting-card-title text-text-card-title
+            mb-3
+
+            ml-3
+            md:ml-4  
+          `}
+        >
+          {title}
+        </div>
+      )}
+      <div className={`px-4 py-1 rounded-lg bg-card ${className}`}>
+        {children}
+      </div>
+    </>
+  );
+}

app/components/GlobalLoading/index.tsx

@@ -0,0 +1,18 @@
+import BotIcon from "@/app/icons/bot.svg";
+import LoadingIcon from "@/app/icons/three-dots.svg";
+
+export default function GloablLoading({
+  noLogo,
+}: {
+  noLogo?: boolean;
+  useSkeleton?: boolean;
+}) {
+  return (
+    <div
+      className={`flex flex-col justify-center items-center w-[100%] h-[100%]`}
+    >
+      {!noLogo && <BotIcon />}
+      <LoadingIcon />
+    </div>
+  );
+}

app/components/HoverPopover/index.tsx

@@ -0,0 +1,39 @@
+import * as HoverCard from "@radix-ui/react-hover-card";
+import { ComponentProps } from "react";
+
+export interface PopoverProps {
+  content?: JSX.Element | string;
+  children?: JSX.Element;
+  arrowClassName?: string;
+  popoverClassName?: string;
+  noArrow?: boolean;
+  align?: ComponentProps<typeof HoverCard.Content>["align"];
+  openDelay?: number;
+}
+
+export default function HoverPopover(props: PopoverProps) {
+  const {
+    content,
+    children,
+    arrowClassName,
+    popoverClassName,
+    noArrow = false,
+    align,
+    openDelay = 300,
+  } = props;
+  return (
+    <HoverCard.Root openDelay={openDelay}>
+      <HoverCard.Trigger asChild>{children}</HoverCard.Trigger>
+      <HoverCard.Portal>
+        <HoverCard.Content
+          className={`${popoverClassName}`}
+          sideOffset={5}
+          align={align}
+        >
+          {content}
+          {!noArrow && <HoverCard.Arrow className={`${arrowClassName}`} />}
+        </HoverCard.Content>
+      </HoverCard.Portal>
+    </HoverCard.Root>
+  );
+}

app/components/Imgs/index.tsx

@@ -0,0 +1,42 @@
+import { CSSProperties } from "react";
+import { getMessageImages } from "@/app/utils";
+import { RequestMessage } from "@/app/client/api";
+
+interface ImgsProps {
+  message: RequestMessage;
+}
+
+export default function Imgs(props: ImgsProps) {
+  const { message } = props;
+  const imgSrcs = getMessageImages(message);
+
+  if (imgSrcs.length < 1) {
+    return <></>;
+  }
+
+  const imgVars = {
+    "--imgs-width": `calc(var(--max-message-width) - ${
+      imgSrcs.length - 1
+    }*0.25rem)`,
+    "--img-width": `calc(var(--imgs-width)/ ${imgSrcs.length})`,
+  };
+
+  return (
+    <div
+      className={`w-[100%] mt-[0.625rem] flex gap-1`}
+      style={imgVars as CSSProperties}
+    >
+      {imgSrcs.map((image, index) => {
+        return (
+          <div
+            key={index}
+            className="flex-1 min-w-[var(--img-width)] pb-[var(--img-width)] object-cover bg-cover bg-no-repeat bg-center box-border rounded-chat-img"
+            style={{
+              backgroundImage: `url(${image})`,
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+}

app/components/Input/index.tsx

@@ -0,0 +1,88 @@
+import PasswordVisible from "@/app/icons/passwordVisible.svg";
+import PasswordInvisible from "@/app/icons/passwordInvisible.svg";
+import {
+  DetailedHTMLProps,
+  InputHTMLAttributes,
+  useContext,
+  useLayoutEffect,
+  useState,
+} from "react";
+import List, { ListContext } from "@/app/components/List";
+
+export interface CommonInputProps
+  extends Omit<
+    DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
+    "onChange" | "type" | "value"
+  > {
+  className?: string;
+}
+
+export interface NumberInputProps {
+  onChange?: (v: number) => void;
+  type?: "number";
+  value?: number;
+}
+
+export interface TextInputProps {
+  onChange?: (v: string) => void;
+  type?: "text" | "password";
+  value?: string;
+}
+
+export interface InputProps {
+  onChange?: ((v: string) => void) | ((v: number) => void);
+  type?: "text" | "password" | "number";
+  value?: string | number;
+}
+
+export default function Input(
+  props: CommonInputProps & NumberInputProps,
+): JSX.Element;
+export default function Input(
+  props: CommonInputProps & TextInputProps,
+): JSX.Element;
+export default function Input(props: CommonInputProps & InputProps) {
+  const { value, type = "text", onChange, className, ...rest } = props;
+  const [show, setShow] = useState(false);
+
+  const { inputClassName } = useContext(ListContext);
+
+  const internalType = (show && "text") || type;
+
+  const { update, handleValidate } = useContext(List.ListContext);
+
+  useLayoutEffect(() => {
+    update?.({ type: "input" });
+  }, []);
+
+  useLayoutEffect(() => {
+    handleValidate?.(value);
+  }, [value]);
+
+  return (
+    <div
+      className={` group/input w-[100%] rounded-chat-input bg-input transition-colors duration-300 ease-in-out flex gap-3 items-center px-3 py-2 ${className} hover:bg-select-hover ${inputClassName}`}
+    >
+      <input
+        {...rest}
+        className=" overflow-hidden text-text-input text-sm-title leading-input outline-none flex-1 group-hover/input:bg-input-input-ele-hover"
+        type={internalType}
+        value={value}
+        onChange={(e) => {
+          if (type === "number") {
+            const v = e.currentTarget.valueAsNumber;
+            (onChange as NumberInputProps["onChange"])?.(v);
+          } else {
+            const v = e.currentTarget.value;
+            (onChange as TextInputProps["onChange"])?.(v);
+          }
+        }}
+      />
+      {type == "password" && (
+        <div className=" cursor-pointer" onClick={() => setShow((pre) => !pre)}>
+          {show ? <PasswordVisible /> : <PasswordInvisible />}
+        </div>
+      )}
+    </div>
+  );
+}

app/components/List/index.tsx

@@ -0,0 +1,157 @@
+import {
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useState,
+} from "react";
+
+interface WidgetStyle {
+  selectClassName?: string;
+  inputClassName?: string;
+  rangeClassName?: string;
+  switchClassName?: string;
+  inputNextLine?: boolean;
+  rangeNextLine?: boolean;
+}
+
+interface ChildrenMeta {
+  type?: "unknown" | "input" | "range";
+  error?: string;
+}
+
+export interface ListProps {
+  className?: string;
+  children?: ReactNode;
+  id?: string;
+  isMobileScreen?: boolean;
+  widgetStyle?: WidgetStyle;
+}
+
+type Error =
+  | {
+      error: true;
+      message: string;
+    }
+  | {
+      error: false;
+    };
+
+export interface ListItemProps {
+  title: string;
+  subTitle?: string;
+  children?: JSX.Element | JSX.Element[];
+  className?: string;
+  onClick?: () => void;
+  nextline?: boolean;
+  validator?: (v: any) => Error | Promise<Error>;
+}
+
+export const ListContext = createContext<
+  {
+    isMobileScreen?: boolean;
+    update?: (m: ChildrenMeta) => void;
+    handleValidate?: (v: any) => void;
+  } & WidgetStyle
+>({ isMobileScreen: false });
+
+export function ListItem(props: ListItemProps) {
+  const {
+    className = "",
+    onClick,
+    title,
+    subTitle,
+    children,
+    nextline,
+    validator,
+  } = props;
+
+  const context = useContext(ListContext);
+
+  const [childrenMeta, setMeta] = useState<ChildrenMeta>({});
+
+  const { inputNextLine, rangeNextLine } = context;
+
+  const { type, error } = childrenMeta;
+
+  let internalNextLine;
+
+  switch (type) {
+    case "input":
+      internalNextLine = !!(nextline || inputNextLine);
+      break;
+    case "range":
+      internalNextLine = !!(nextline || rangeNextLine);
+      break;
+    default:
+      internalNextLine = false;
+  }
+
+  const update = useCallback((m: ChildrenMeta) => {
+    setMeta((pre) => ({ ...pre, ...m }));
+  }, []);
+
+  const handleValidate = useCallback((v: any) => {
+    const insideValidator = validator || (() => {});
+
+    Promise.resolve(insideValidator(v)).then((result) => {
+      if (result && result.error) {
+        return update({
+          error: result.message,
+        });
+      }
+      update({
+        error: undefined,
+      });
+    });
+  }, []);
+
+  return (
+    <div
+      className={`relative after:h-[0.5px] after:bottom-0 after:w-[100%] after:left-0 after:absolute last:after:hidden after:bg-list-item-divider ${
+        internalNextLine ? "" : "flex gap-3"
+      } justify-between items-center px-0 py-2 md:py-3 ${className}`}
+      onClick={onClick}
+    >
+      <div className={`flex-1 flex flex-col justify-start gap-1`}>
+        <div className=" font-common text-sm-mobile font-weight-[500] line-clamp-1 text-text-list-title">
+          {title}
+        </div>
+        {subTitle && (
+          <div className={` text-sm text-text-list-subtitle`}>{subTitle}</div>
+        )}
+      </div>
+      <ListContext.Provider value={{ ...context, update, handleValidate }}>
+        <div
+          className={`${
+            internalNextLine ? "mt-[0.625rem]" : "max-w-[70%]"
+          } flex flex-col items-center justify-center`}
+        >
+          <div>{children}</div>
+          {!!error && (
+            <div className="text-text-btn-danger text-sm-mobile-tab mt-[0.3125rem] flex items-start w-[100%]">
+              <div className="">{error}</div>
+            </div>
+          )}
+        </div>
+      </ListContext.Provider>
+    </div>
+  );
+}
+
+function List(props: ListProps) {
+  const { className, children, id, widgetStyle } = props;
+  const { isMobileScreen } = useContext(ListContext);
+  return (
+    <ListContext.Provider value={{ isMobileScreen, ...widgetStyle }}>
+      <div className={`flex flex-col w-[100%] ${className}`} id={id}>
+        {children}
+      </div>
+    </ListContext.Provider>
+  );
+}
+
+List.ListItem = ListItem;
+List.ListContext = ListContext;
+
+export default List;

app/components/Loading/index.tsx

@@ -0,0 +1,35 @@
+import BotIcon from "@/app/icons/bot.svg";
+import LoadingIcon from "@/app/icons/three-dots.svg";
+
+import { getCSSVar } from "@/app/utils";
+
+export default function Loading({
+  noLogo,
+  useSkeleton = true,
+}: {
+  noLogo?: boolean;
+  useSkeleton?: boolean;
+}) {
+  let theme;
+  if (typeof window !== "undefined") {
+    theme = getCSSVar("--default-container-bg");
+  }
+
+  return (
+    <div
+      className={`
+        flex flex-col justify-center items-center w-[100%] 
+        h-[100%]
+        md:my-2.5
+        md:ml-1
+        md:mr-2.5
+        md:rounded-md
+        md:h-[calc(100%-1.25rem)]
+        `}
+      style={{ background: useSkeleton ? theme : "" }}
+    >
+      {!noLogo && <BotIcon />}
+      <LoadingIcon />
+    </div>
+  );
+}

app/components/MenuLayout/index.tsx

@@ -0,0 +1,115 @@
+import {
+  DEFAULT_SIDEBAR_WIDTH,
+  MAX_SIDEBAR_WIDTH,
+  MIN_SIDEBAR_WIDTH,
+  Path,
+} from "@/app/constant";
+import useDrag from "@/app/hooks/useDrag";
+import useMobileScreen from "@/app/hooks/useMobileScreen";
+import { updateGlobalCSSVars } from "@/app/utils/client";
+import { ComponentType, useRef, useState } from "react";
+import { useAppConfig } from "@/app/store/config";
+
+export interface MenuWrapperInspectProps {
+  setExternalProps?: (v: Record<string, any>) => void;
+  setShowPanel?: (v: boolean) => void;
+  showPanel?: boolean;
+  [k: string]: any;
+}
+
+export default function MenuLayout<
+  ListComponentProps extends MenuWrapperInspectProps,
+  PanelComponentProps extends MenuWrapperInspectProps,
+>(
+  ListComponent: ComponentType<ListComponentProps>,
+  PanelComponent: ComponentType<PanelComponentProps>,
+) {
+  return function MenuHood(props: ListComponentProps & PanelComponentProps) {
+    const [showPanel, setShowPanel] = useState(false);
+    const [externalProps, setExternalProps] = useState({});
+    const config = useAppConfig();
+
+    const isMobileScreen = useMobileScreen();
+
+    const startDragWidth = useRef(config.sidebarWidth ?? DEFAULT_SIDEBAR_WIDTH);
+    // drag side bar
+    const { onDragStart } = useDrag({
+      customToggle: () => {
+        config.update((config) => {
+          config.sidebarWidth = DEFAULT_SIDEBAR_WIDTH;
+        });
+      },
+      customDragMove: (nextWidth: number) => {
+        const { menuWidth } = updateGlobalCSSVars(nextWidth);
+
+        document.documentElement.style.setProperty(
+          "--menu-width",
+          `${menuWidth}px`,
+        );
+        config.update((config) => {
+          config.sidebarWidth = nextWidth;
+        });
+      },
+      customLimit: (x: number) =>
+        Math.max(
+          MIN_SIDEBAR_WIDTH,
+          Math.min(MAX_SIDEBAR_WIDTH, startDragWidth.current + x),
+        ),
+    });
+
+    return (
+      <div
+        className={`
+          w-[100%] relative bg-center
+          max-md:h-[100%]
+          md:flex md:my-2.5
+        `}
+      >
+        <div
+          className={`
+            flex flex-col px-6 
+            h-[100%] 
+            max-md:w-[100%] max-md:px-4 max-md:pb-4 max-md:flex-1
+            md:relative md:basis-sidebar  md:pb-6  md:rounded-md md:bg-menu
+          `}
+        >
+          <ListComponent
+            {...props}
+            setShowPanel={setShowPanel}
+            setExternalProps={setExternalProps}
+            showPanel={showPanel}
+          />
+        </div>
+        {!isMobileScreen && (
+          <div
+            className={`group/menu-dragger cursor-col-resize w-[0.25rem]  flex items-center justify-center`}
+            onPointerDown={(e) => {
+              startDragWidth.current = config.sidebarWidth;
+              onDragStart(e as any);
+            }}
+          >
+            <div className="w-[2px] opacity-0 group-hover/menu-dragger:opacity-100 bg-menu-dragger h-[100%] rounded-[2px]">
+              &nbsp;
+            </div>
+          </div>
+        )}
+        <div
+          className={`
+          md:flex-1 md:h-[100%] md:w-page
+          max-md:transition-all max-md:duration-300 max-md:absolute max-md:top-0 max-md:max-h-[100vh] max-md:w-[100%] ${
+            showPanel ? "max-md:left-0" : "max-md:left-[101%]"
+          } max-md:z-10
+        `}
+        >
+          <PanelComponent
+            {...props}
+            {...externalProps}
+            setShowPanel={setShowPanel}
+            setExternalProps={setExternalProps}
+            showPanel={showPanel}
+          />
+        </div>
+      </div>
+    );
+  };
+}

app/components/Modal/index.tsx

@@ -0,0 +1,359 @@
+import React, { useLayoutEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import * as AlertDialog from "@radix-ui/react-alert-dialog";
+import Btn, { BtnProps } from "@/app/components/Btn";
+
+import Warning from "@/app/icons/warning.svg";
+import Close from "@/app/icons/closeIcon.svg";
+
+export interface ModalProps {
+  onOk?: () => void;
+  onCancel?: () => void;
+  okText?: string;
+  cancelText?: string;
+  okBtnProps?: BtnProps;
+  cancelBtnProps?: BtnProps;
+  content?:
+    | React.ReactNode
+    | ((handlers: { close: () => void }) => JSX.Element);
+  title?: React.ReactNode;
+  visible?: boolean;
+  noFooter?: boolean;
+  noHeader?: boolean;
+  isMobile?: boolean;
+  closeble?: boolean;
+  type?: "modal" | "bottom-drawer";
+  headerBordered?: boolean;
+  modelClassName?: string;
+  onOpen?: (v: boolean) => void;
+  maskCloseble?: boolean;
+}
+
+export interface WarnProps
+  extends Omit<
+    ModalProps,
+    | "closeble"
+    | "isMobile"
+    | "noHeader"
+    | "noFooter"
+    | "onOk"
+    | "okBtnProps"
+    | "cancelBtnProps"
+    | "content"
+  > {
+  onOk?: () => Promise<void> | void;
+  content?: React.ReactNode;
+}
+
+export interface TriggerProps
+  extends Omit<ModalProps, "visible" | "onOk" | "onCancel"> {
+  children: JSX.Element;
+  className?: string;
+}
+
+const baseZIndex = 150;
+
+let div: HTMLDivElement | null = null;
+
+const Modal = (props: ModalProps) => {
+  const {
+    onOk,
+    onCancel,
+    okText,
+    cancelText,
+    content,
+    title,
+    visible,
+    noFooter,
+    noHeader,
+    closeble = true,
+    okBtnProps,
+    cancelBtnProps,
+    type = "modal",
+    headerBordered,
+    modelClassName,
+    onOpen,
+    maskCloseble = true,
+  } = props;
+
+  const [open, setOpen] = useState(!!visible);
+
+  const mergeOpen = visible ?? open;
+
+  useLayoutEffect(() => {
+    const div: HTMLDivElement = document.createElement("div");
+    div.id = "confirm-root";
+    div.style.height = "0px";
+    document.body.appendChild(div);
+  }, []);
+  const root = createRoot(div);
+  const closeModal = () => {
+    root.unmount();
+  };
+  const handleClose = () => {
+    setOpen(false);
+    onCancel?.();
+  };
+
+  const handleOk = () => {
+    setOpen(false);
+    onOk?.();
+  };
+
+  useLayoutEffect(() => {
+    onOpen?.(mergeOpen);
+  }, [mergeOpen]);
+
+  let layoutClassName = "";
+  let panelClassName = "";
+  let titleClassName = "";
+  let footerClassName = "";
+
+  switch (type) {
+    case "bottom-drawer":
+      layoutClassName = "fixed inset-0 flex flex-col w-[100%] bottom-0";
+      panelClassName =
+        "rounded-t-chat-model-select overflow-y-auto overflow-x-hidden";
+      titleClassName = "px-4 py-3";
+      footerClassName = "absolute w-[100%]";
+      break;
+    case "modal":
+    default:
+      layoutClassName =
+        "fixed inset-0 flex flex-col item-start top-0 left-[50vw] translate-x-[-50%] max-sm:w-modal-modal-type-mobile";
+      panelClassName = "rounded-lg px-6 sm:w-modal-modal-type";
+      titleClassName = "py-6 max-sm:pb-3";
+      footerClassName = "py-6";
+  }
+  const btnCommonClass = "px-4 py-2.5 rounded-md max-sm:flex-1";
+  const { className: okBtnClass } = okBtnProps || {};
+  const { className: cancelBtnClass } = cancelBtnProps || {};
+
+  return (
+    <AlertDialog.Root open={mergeOpen} onOpenChange={setOpen}>
+      <AlertDialog.Portal>
+        <AlertDialog.Overlay
+          className="fixed inset-0 bg-modal-mask animate-mask "
+          style={{ zIndex: baseZIndex - 1 }}
+          onClick={() => {
+            if (maskCloseble) {
+              handleClose();
+            }
+          }}
+        />
+        <AlertDialog.Content
+          className={`
+            ${layoutClassName}
+          `}
+          style={{ zIndex: baseZIndex - 1 }}
+        >
+          <div
+            className="flex-1"
+            onClick={() => {
+              if (maskCloseble) {
+                handleClose();
+              }
+            }}
+          >
+            &nbsp;
+          </div>
+          <div
+            className={`flex flex-col flex-0      
+              bg-moda-panel text-modal-panel    
+              ${modelClassName}
+              ${panelClassName}
+            `}
+          >
+            {!noHeader && (
+              <AlertDialog.Title
+                className={`
+                      flex items-center justify-between gap-3 font-common
+                      md:text-chat-header-title md:font-bold md:leading-5 
+                      ${
+                        headerBordered
+                          ? " border-b border-modal-header-bottom"
+                          : ""
+                      }
+                      ${titleClassName}
+                  `}
+              >
+                <div className="flex items-center justify-start flex-1 gap-3 text-text-modal-title text-chat-header-title">
+                  {title}
+                </div>
+                {closeble && (
+                  <div
+                    className="items-center"
+                    onClick={() => {
+                      handleClose();
+                    }}
+                  >
+                    <Close />
+                  </div>
+                )}
+              </AlertDialog.Title>
+            )}
+            <div className="flex-1 overflow-hidden text-text-modal-content text-sm-title">
+              {typeof content === "function"
+                ? content({
+                    close: () => {
+                      handleClose();
+                    },
+                  })
+                : content}
+            </div>
+            {!noFooter && (
+              <div
+                className={`
+                  flex gap-3 sm:justify-end max-sm:justify-between
+                  ${footerClassName}
+                  `}
+              >
+                <AlertDialog.Cancel asChild>
+                  <Btn
+                    {...cancelBtnProps}
+                    onClick={() => handleClose()}
+                    text={cancelText}
+                    className={`${btnCommonClass} ${cancelBtnClass}`}
+                  />
+                </AlertDialog.Cancel>
+                <AlertDialog.Action asChild>
+                  <Btn
+                    {...okBtnProps}
+                    onClick={handleOk}
+                    text={okText}
+                    className={`${btnCommonClass} ${okBtnClass}`}
+                  />
+                </AlertDialog.Action>
+              </div>
+            )}
+          </div>
+          {type === "modal" && (
+            <div
+              className="flex-1"
+              onClick={() => {
+                if (maskCloseble) {
+                  handleClose();
+                }
+              }}
+            >
+              &nbsp;
+            </div>
+          )}
+        </AlertDialog.Content>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+};
+
+export const Warn = ({
+  title,
+  onOk,
+  visible,
+  content,
+  ...props
+}: WarnProps) => {
+  const [internalVisible, setVisible] = useState(visible);
+
+  return (
+    <Modal
+      {...props}
+      title={
+        <>
+          <Warning />
+          {title}
+        </>
+      }
+      content={
+        <AlertDialog.Description
+          className={`
+                    font-common font-normal
+                    md:text-sm-title md:leading-[158%]
+                `}
+        >
+          {content}
+        </AlertDialog.Description>
+      }
+      closeble={false}
+      onOk={() => {
+        const toDo = onOk?.();
+        if (toDo instanceof Promise) {
+          toDo.then(() => {
+            setVisible(false);
+          });
+        } else {
+          setVisible(false);
+        }
+      }}
+      visible={internalVisible}
+      okBtnProps={{
+        className: `bg-delete-chat-ok-btn text-text-delete-chat-ok-btn `,
+      }}
+      cancelBtnProps={{
+        className: `bg-delete-chat-cancel-btn  border border-delete-chat-cancel-btn text-text-delete-chat-cancel-btn`,
+      }}
+    />
+  );
+};
+
+Modal.warn = (props: Omit<WarnProps, "visible" | "onCancel" | "onOk">) => {
+  const root = createRoot(div);
+  const closeModal = () => {
+    root.unmount();
+  };
+
+  return new Promise<boolean>((resolve) => {
+    root.render(
+      <Warn
+        {...props}
+        visible={true}
+        onCancel={() => {
+          closeModal();
+          resolve(false);
+        }}
+        onOk={() => {
+          closeModal();
+          resolve(true);
+        }}
+      />,
+    );
+  });
+};
+
+export const Trigger = (props: TriggerProps) => {
+  const { children, className, content, ...rest } = props;
+
+  const [internalVisible, setVisible] = useState(false);
+
+  return (
+    <>
+      <div
+        className={className}
+        onClick={() => {
+          setVisible(true);
+        }}
+      >
+        {children}
+      </div>
+      <Modal
+        {...rest}
+        visible={internalVisible}
+        onCancel={() => {
+          setVisible(false);
+        }}
+        content={
+          typeof content === "function"
+            ? content({
+                close: () => {
+                  setVisible(false);
+                },
+              })
+            : content
+        }
+      />
+    </>
+  );
+};
+
+Modal.Trigger = Trigger;
+
+export default Modal;

app/components/Popover/index.tsx

@@ -0,0 +1,366 @@
+"use client";
+import useRelativePosition from "@/app/hooks/useRelativePosition";
+import {
+  RefObject,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+
+const ArrowIcon = ({ sibling }: { sibling: RefObject<HTMLDivElement> }) => {
+  const [color, setColor] = useState<string>("");
+  useEffect(() => {
+    if (sibling.current) {
+      const { backgroundColor } = window.getComputedStyle(sibling.current);
+      setColor(backgroundColor);
+    }
+  }, []);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="6"
+      viewBox="0 0 16 6"
+      fill="none"
+    >
+      <path
+        d="M16 0H0C1.28058 0 2.50871 0.508709 3.41421 1.41421L6.91 4.91C7.51199 5.51199 8.48801 5.51199 9.09 4.91L12.5858 1.41421C13.4913 0.508708 14.7194 0 16 0Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+const baseZIndex = 100;
+const popoverRootName = "popoverRoot";
+
+export interface PopoverProps {
+  content?: JSX.Element | string;
+  children?: JSX.Element;
+  show?: boolean;
+  onShow?: (v: boolean) => void;
+  className?: string;
+  popoverClassName?: string;
+  trigger?: "hover" | "click";
+  placement?: "t" | "lt" | "rt" | "lb" | "rb" | "b" | "l" | "r";
+  noArrow?: boolean;
+  delayClose?: number;
+  useGlobalRoot?: boolean;
+  getPopoverPanelRef?: (ref: RefObject<HTMLDivElement>) => void;
+}
+
+let popoverRoot: HTMLDivElement;
+
+export default function Popover(props: PopoverProps) {
+  const {
+    content,
+    children,
+    show,
+    onShow,
+    className,
+    popoverClassName,
+    trigger = "hover",
+    placement = "t",
+    noArrow = false,
+    delayClose = 0,
+    useGlobalRoot,
+    getPopoverPanelRef,
+  } = props;
+
+  const [internalShow, setShow] = useState(false);
+  const { position, getRelativePosition } = useRelativePosition({
+    delay: 0,
+  });
+
+  const popoverCommonClass = `absolute p-2 box-border`;
+
+  const mergedShow = show ?? internalShow;
+
+  const { arrowClassName, placementStyle, placementClassName } = useMemo(() => {
+    const arrowCommonClassName = `${
+      noArrow ? "hidden" : ""
+    } absolute z-10 left-[50%] translate-x-[calc(-50%)]`;
+
+    let defaultTopPlacement = true; // when users dont config 't' or 'b'
+
+    const {
+      distanceToBottomBoundary = 0,
+      distanceToLeftBoundary = 0,
+      distanceToRightBoundary = -10000,
+      distanceToTopBoundary = 0,
+      targetH = 0,
+      targetW = 0,
+    } = position?.poi || {};
+
+    if (distanceToBottomBoundary > distanceToTopBoundary) {
+      defaultTopPlacement = false;
+    }
+
+    const placements = {
+      lt: {
+        placementStyle: {
+          bottom: `calc(${distanceToBottomBoundary + targetH}px + 0.5rem)`,
+          left: `calc(${distanceToLeftBoundary}px - ${targetW * 0.02}px)`,
+        },
+        arrowClassName: `${arrowCommonClassName} bottom-[calc(100%+0.5rem)] translate-y-[calc(100%)] pb-[0.5rem]`,
+        placementClassName: "bottom-[calc(100%+0.5rem)] left-[calc(-2%)]",
+      },
+      lb: {
+        placementStyle: {
+          top: `calc(-${distanceToBottomBoundary}px + 0.5rem)`,
+          left: `calc(${distanceToLeftBoundary}px - ${targetW * 0.02}px)`,
+        },
+        arrowClassName: `${arrowCommonClassName} top-[calc(100%+0.5rem)] translate-y-[calc(-100%)]  pt-[0.5rem]`,
+        placementClassName: "top-[calc(100%+0.5rem)] left-[calc(-2%)]",
+      },
+      rt: {
+        placementStyle: {
+          bottom: `calc(${distanceToBottomBoundary + targetH}px + 0.5rem)`,
+          right: `calc(${distanceToRightBoundary}px - ${targetW * 0.02}px)`,
+        },
+        arrowClassName: `${arrowCommonClassName} bottom-[calc(100%+0.5rem)] translate-y-[calc(100%)] pb-[0.5rem]`,
+        placementClassName: "bottom-[calc(100%+0.5rem)] right-[calc(-2%)]",
+      },
+      rb: {
+        placementStyle: {
+          top: `calc(-${distanceToBottomBoundary}px + 0.5rem)`,
+          right: `calc(${distanceToRightBoundary}px - ${targetW * 0.02}px)`,
+        },
+        arrowClassName: `${arrowCommonClassName} top-[calc(100%+0.5rem)] translate-y-[calc(-100%)] pt-[0.5rem]`,
+        placementClassName: "top-[calc(100%+0.5rem)] right-[calc(-2%)]",
+      },
+      t: {
+        placementStyle: {
+          bottom: `calc(${distanceToBottomBoundary + targetH}px + 0.5rem)`,
+          left: `calc(${distanceToLeftBoundary + targetW / 2}px`,
+          transform: "translateX(-50%)",
+        },
+        arrowClassName: `${arrowCommonClassName} bottom-[calc(100%+0.5rem)] translate-y-[calc(100%)] pb-[0.5rem]`,
+        placementClassName:
+          "bottom-[calc(100%+0.5rem)] left-[50%] translate-x-[calc(-50%)]",
+      },
+      b: {
+        placementStyle: {
+          top: `calc(-${distanceToBottomBoundary}px + 0.5rem)`,
+          left: `calc(${distanceToLeftBoundary + targetW / 2}px`,
+          transform: "translateX(-50%)",
+        },
+        arrowClassName: `${arrowCommonClassName} top-[calc(100%+0.5rem)] translate-y-[calc(-100%)] pt-[0.5rem]`,
+        placementClassName:
+          "top-[calc(100%+0.5rem)] left-[50%]  translate-x-[calc(-50%)]",
+      },
+    };
+
+    const getStyle = () => {
+      if (["l", "r"].includes(placement)) {
+        return placements[
+          `${placement}${defaultTopPlacement ? "t" : "b"}` as
+            | "lt"
+            | "lb"
+            | "rb"
+            | "rt"
+        ];
+      }
+      return placements[placement as Exclude<typeof placement, "l" | "r">];
+    };
+
+    return getStyle();
+  }, [Object.values(position?.poi || {})]);
+
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const closeTimer = useRef<number>(0);
+
+  useLayoutEffect(() => {
+    if (popoverRoot) {
+      return;
+    }
+
+    popoverRoot = document.querySelector(
+      `#${popoverRootName}`,
+    ) as HTMLDivElement;
+    if (!popoverRoot) {
+      popoverRoot = document.createElement("div");
+      document.body.appendChild(popoverRoot);
+      popoverRoot.style.height = "0px";
+      popoverRoot.style.width = "100%";
+      popoverRoot.style.position = "fixed";
+      popoverRoot.style.bottom = "0";
+      popoverRoot.style.zIndex = "10000";
+      popoverRoot.id = "popover-root";
+    }
+  }, []);
+
+  useLayoutEffect(() => {
+    getPopoverPanelRef?.(popoverRef);
+    onShow?.(internalShow);
+  }, [internalShow]);
+
+  if (trigger === "click") {
+    const handleOpen = (e: { currentTarget: any }) => {
+      clearTimeout(closeTimer.current);
+      setShow(true);
+      getRelativePosition(e.currentTarget, "");
+      window.document.documentElement.style.overflow = "hidden";
+    };
+    const handleClose = () => {
+      if (delayClose) {
+        closeTimer.current = window.setTimeout(() => {
+          setShow(false);
+        }, delayClose);
+      } else {
+        setShow(false);
+      }
+      window.document.documentElement.style.overflow = "auto";
+    };
+
+    if (mergedShow) {
+      return null;
+    }
+
+    return (
+      <div
+        className={`relative ${className}`}
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (!mergedShow) {
+            handleOpen(e);
+          } else {
+            handleClose();
+          }
+        }}
+      >
+        {children}
+        {mergedShow && (
+          <>
+            {!noArrow && (
+              <div className={`${arrowClassName}`}>
+                <ArrowIcon sibling={popoverRef} />
+              </div>
+            )}
+            {createPortal(
+              <div
+                className={`${popoverCommonClass} ${popoverClassName} cursor-pointer overflow-auto`}
+                style={{ zIndex: baseZIndex + 1, ...placementStyle }}
+                ref={popoverRef}
+              >
+                {content}
+              </div>,
+              popoverRoot,
+            )}
+            {createPortal(
+              <div
+                className=" fixed w-[100vw] h-[100vh] right-0 bottom-0"
+                style={{ zIndex: baseZIndex }}
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleClose();
+                }}
+              >
+                &nbsp;
+              </div>,
+              popoverRoot,
+            )}
+          </>
+        )}
+      </div>
+    );
+  }
+
+  if (useGlobalRoot) {
+    return (
+      <div
+        className={`relative ${className}`}
+        onPointerEnter={(e) => {
+          e.preventDefault();
+          clearTimeout(closeTimer.current);
+          onShow?.(true);
+          setShow(true);
+          getRelativePosition(e.currentTarget, "");
+          window.document.documentElement.style.overflow = "hidden";
+        }}
+        onPointerLeave={(e) => {
+          e.preventDefault();
+          if (delayClose) {
+            closeTimer.current = window.setTimeout(() => {
+              onShow?.(false);
+              setShow(false);
+            }, delayClose);
+          } else {
+            onShow?.(false);
+            setShow(false);
+          }
+          window.document.documentElement.style.overflow = "auto";
+        }}
+      >
+        {children}
+        {mergedShow && (
+          <>
+            <div
+              className={`${
+                noArrow ? "opacity-0" : ""
+              } bg-inherit ${arrowClassName}`}
+              style={{ zIndex: baseZIndex + 1 }}
+            >
+              <ArrowIcon sibling={popoverRef} />
+            </div>
+            {createPortal(
+              <div
+                className={` whitespace-nowrap ${popoverCommonClass} ${popoverClassName} cursor-pointer`}
+                style={{ zIndex: baseZIndex + 1, ...placementStyle }}
+                ref={popoverRef}
+              >
+                {content}
+              </div>,
+              popoverRoot,
+            )}
+          </>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`group/popover relative ${className}`}
+      onPointerEnter={(e) => {
+        getRelativePosition(e.currentTarget, "");
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+    >
+      {children}
+      <div
+        className={`
+          hidden group-hover/popover:block 
+          ${noArrow ? "opacity-0" : ""} 
+          bg-inherit 
+          ${arrowClassName}
+        `}
+        style={{ zIndex: baseZIndex + 1 }}
+      >
+        <ArrowIcon sibling={popoverRef} />
+      </div>
+      <div
+        className={`
+          hidden group-hover/popover:block whitespace-nowrap 
+          ${popoverCommonClass} 
+          ${placementClassName} 
+          ${popoverClassName}
+        `}
+        ref={popoverRef}
+        style={{ zIndex: baseZIndex + 1 }}
+      >
+        {content}
+      </div>
+    </div>
+  );
+}

app/components/Screen/index.tsx

@@ -0,0 +1,71 @@
+import { useMemo, ReactNode } from "react";
+import { Path, SIDEBAR_ID, SlotID } from "@/app/constant";
+import { getLang } from "@/app/locales";
+
+import useMobileScreen from "@/app/hooks/useMobileScreen";
+
+import useListenWinResize from "@/app/hooks/useListenWinResize";
+import { usePathname } from "next/navigation";
+import { useDeviceInfo } from "@/app/hooks/useDeviceInfo";
+
+interface ScreenProps {
+  children: ReactNode;
+  noAuth: ReactNode;
+  sidebar: ReactNode;
+}
+
+export default function Screen(props: ScreenProps) {
+  const pathname = usePathname();
+  const isAuth = pathname === Path.Auth;
+
+  const isMobileScreen = useMobileScreen();
+  const { deviceType, systemInfo } = useDeviceInfo();
+  useListenWinResize();
+
+  return (
+    <div
+      className={`
+         flex h-[100%] w-[100%] bg-center
+        max-md:relative  max-md:flex-col-reverse  max-md:bg-global-mobile
+        md:overflow-hidden md:bg-global
+      `}
+      style={{
+        direction: getLang() === "ar" ? "rtl" : "ltr",
+      }}
+    >
+      {isAuth ? (
+        props.noAuth
+      ) : (
+        <>
+          <div
+            className={`
+              max-md:absolute max-md:w-[100%] max-md:bottom-0 max-md:z-10
+              md:flex-0 md:overflow-hidden
+            `}
+            id={SIDEBAR_ID}
+          >
+            {props.sidebar}
+          </div>
+
+          <div
+            className={`
+              h-[100%]
+              max-md:w-[100%] 
+              md:flex-1 md:min-w-0 md:overflow-hidden md:flex
+            `}
+            id={SlotID.AppBody}
+            style={{
+              // #3016 disable transition on ios mobile screen
+              transition:
+                systemInfo === "iOS" && deviceType === "mobile"
+                  ? "none"
+                  : undefined,
+            }}
+          >
+            {props.children}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

app/components/Search/index.module.scss

@@ -0,0 +1,24 @@
+.search {
+    display: flex;
+    max-width: 460px;
+    height: 50px;
+    padding: 16px;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+
+    border-radius: 16px;
+    border: 1px solid var(--Light-Text-Black, #18182A);
+    background: var(--light-opacity-white-70, rgba(255, 255, 255, 0.70));
+    box-shadow: 0px 8px 40px 0px rgba(60, 68, 255, 0.12);
+
+    .icon {
+        height: 20px;
+        width: 20px;
+        flex: 0 0;
+    }
+    .input {
+        height: 18px;
+        flex: 1 1;
+    } 
+}

app/components/Search/index.tsx

@@ -0,0 +1,30 @@
+import styles from "./index.module.scss";
+import SearchIcon from "@/app/icons/search.svg";
+
+export interface SearchProps {
+  value?: string;
+  onSearch?: (v: string) => void;
+  placeholder?: string;
+}
+
+const Search = (props: SearchProps) => {
+  const { placeholder = "", value, onSearch } = props;
+  return (
+    <div className={styles["search"]}>
+      <div className={styles["icon"]}>
+        <SearchIcon />
+      </div>
+      <input
+        className={styles["input"]}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => {
+          e.preventDefault();
+          onSearch?.(e.target.value);
+        }}
+      />
+    </div>
+  );
+};
+
+export default Search;

app/components/Select/index.tsx

@@ -0,0 +1,118 @@
+import SelectIcon from "@/app/icons/downArrowIcon.svg";
+import Popover from "@/app/components/Popover";
+import React, { useContext, useMemo, useRef } from "react";
+import useRelativePosition, {
+  Orientation,
+} from "@/app/hooks/useRelativePosition";
+import List from "@/app/components/List";
+
+import Selected from "@/app/icons/selectedIcon.svg";
+
+export type Option<Value> = {
+  value: Value;
+  label: string;
+  icon?: React.ReactNode;
+};
+
+export interface SearchProps<Value> {
+  value?: string;
+  onSelect?: (v: Value) => void;
+  options?: Option<Value>[];
+  inMobile?: boolean;
+}
+
+const Select = <Value extends number | string>(props: SearchProps<Value>) => {
+  const { value, onSelect, options = [], inMobile } = props;
+
+  const { isMobileScreen, selectClassName } = useContext(List.ListContext);
+
+  const optionsRef = useRef<Option<Value>[]>([]);
+  optionsRef.current = options;
+  const selectedOption = useMemo(
+    () => optionsRef.current.find((o) => o.value === value),
+    [value],
+  );
+
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const { position, getRelativePosition } = useRelativePosition({
+    delay: 0,
+  });
+
+  let headerH = 100;
+  let baseH = position?.poi.distanceToBottomBoundary || 0;
+  if (isMobileScreen) {
+    headerH = 60;
+  }
+  if (position?.poi.relativePosition[1] === Orientation.bottom) {
+    baseH = position?.poi.distanceToTopBoundary;
+  }
+
+  const maxHeight = `${baseH - headerH}px`;
+
+  const content = (
+    <div
+      className={` flex flex-col gap-1 overflow-y-auto overflow-x-hidden`}
+      style={{ maxHeight }}
+    >
+      {options?.map((o) => (
+        <div
+          key={o.value}
+          className={`
+            flex items-center px-3 py-2 gap-3 rounded-action-btn hover:bg-select-option-hovered cursor-pointer
+          `}
+          onClick={() => {
+            onSelect?.(o.value);
+          }}
+        >
+          <div className="flex gap-2 flex-1 follow-parent-svg text-text-select-option">
+            {!!o.icon && <div className="flex items-center">{o.icon}</div>}
+            <div className={`flex-1 text-text-select-option`}>{o.label}</div>
+          </div>
+          <div
+            className={
+              selectedOption?.value === o.value ? "opacity-100" : "opacity-0"
+            }
+          >
+            <Selected />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+
+  return (
+    <Popover
+      content={content}
+      trigger="click"
+      noArrow
+      placement={
+        position?.poi.relativePosition[1] !== Orientation.bottom ? "rb" : "rt"
+      }
+      popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover  bg-select-popover-panel"
+      onShow={(e) => {
+        getRelativePosition(contentRef.current!, "");
+      }}
+      className={selectClassName}
+    >
+      <div
+        className={`flex items-center gap-3 py-2 px-3 bg-select rounded-action-btn font-common text-sm-title  cursor-pointer hover:bg-select-hover transition duration-300 ease-in-out`}
+        ref={contentRef}
+      >
+        <div
+          className={`flex items-center gap-2 flex-1 follow-parent-svg text-text-select`}
+        >
+          {!!selectedOption?.icon && (
+            <div className={``}>{selectedOption?.icon}</div>
+          )}
+          <div className={`flex-1`}>{selectedOption?.label}</div>
+        </div>
+        <div className={``}>
+          <SelectIcon />
+        </div>
+      </div>
+    </Popover>
+  );
+};
+
+export default Select;

app/components/SlideRange/index.tsx

@@ -0,0 +1,99 @@
+import { useContext, useEffect, useRef } from "react";
+import { ListContext } from "@/app/components/List";
+import { useResizeObserver } from "usehooks-ts";
+
+interface SlideRangeProps {
+  className?: string;
+  description?: string;
+  range?: {
+    start?: number;
+    stroke?: number;
+  };
+  onSlide?: (v: number) => void;
+  value?: number;
+  step?: number;
+}
+
+const margin = 15;
+
+export default function SlideRange(props: SlideRangeProps) {
+  const {
+    className = "",
+    description = "",
+    range = {},
+    value,
+    onSlide,
+    step,
+  } = props;
+  const { start = 0, stroke = 1 } = range;
+
+  const { rangeClassName, update } = useContext(ListContext);
+
+  const slideRef = useRef<HTMLDivElement>(null);
+
+  useResizeObserver({
+    ref: slideRef,
+    onResize: () => {
+      setProperty(value);
+    },
+  });
+
+  const transformToWidth = (x: number = start) => {
+    const abs = x - start;
+    const maxWidth = (slideRef.current?.clientWidth || 1) - margin * 2;
+    const result = (abs / stroke) * maxWidth;
+    return result;
+  };
+
+  const setProperty = (value?: number) => {
+    const initWidth = transformToWidth(value);
+    slideRef.current?.style.setProperty(
+      "--slide-value-size",
+      `${initWidth + margin}px`,
+    );
+  };
+
+  useEffect(() => {
+    update?.({ type: "range" });
+  }, []);
+
+  return (
+    <div
+      className={`flex flex-col justify-center items-end gap-1 w-[100%] ${className} ${rangeClassName}`}
+    >
+      {!!description && (
+        <div className=" text-common text-sm ">{description}</div>
+      )}
+      <div
+        className="flex my-1.5 relative w-[100%] h-1.5 bg-slider rounded-slide cursor-pointer"
+        ref={slideRef}
+      >
+        <div className="cursor-pointer absolute  marker:top-0 h-[100%] w-[var(--slide-value-size)]  bg-slider-slided-travel rounded-slide">
+          &nbsp;
+        </div>
+        <div
+          className="cursor-pointer absolute z-1 w-[30px] top-[50%] translate-y-[-50%] left-[var(--slide-value-size)] translate-x-[-50%]  h-slide-btn leading-slide-btn text-sm-mobile text-center rounded-slide border border-slider-block bg-slider-block hover:bg-slider-block-hover text-text-slider-block"
+          // onPointerDown={onPointerDown}
+        >
+          {value}
+        </div>
+        <input
+          type="range"
+          className="w-[100%] h-[100%] opacity-0 cursor-pointer"
+          value={value}
+          min={start}
+          max={start + stroke}
+          step={step}
+          onChange={(e) => {
+            setProperty(e.target.valueAsNumber);
+            onSlide?.(e.target.valueAsNumber);
+          }}
+          style={{
+            marginLeft: margin,
+            marginRight: margin,
+          }}
+        />
+      </div>
+    </div>
+  );
+}

app/components/Switch/index.tsx

@@ -0,0 +1,33 @@
+import * as RadixSwitch from "@radix-ui/react-switch";
+import { useContext } from "react";
+import List from "../List";
+
+interface SwitchProps {
+  value: boolean;
+  onChange: (v: boolean) => void;
+}
+
+export default function Switch(props: SwitchProps) {
+  const { value, onChange } = props;
+
+  const { switchClassName = "" } = useContext(List.ListContext);
+  return (
+    <RadixSwitch.Root
+      checked={value}
+      onCheckedChange={onChange}
+      className={` 
+        cursor-pointer flex w-switch h-switch p-0.5 box-content rounded-md transition-colors duration-300 ease-in-out
+        ${switchClassName} 
+        ${
+          value
+            ? "bg-switch-checked justify-end"
+            : "bg-switch-unchecked justify-start"
+        }
+      `}
+    >
+      <RadixSwitch.Thumb
+        className={` bg-switch-btn block w-4 h-4 drop-shadow-sm rounded-md`}
+      />
+    </RadixSwitch.Root>
+  );
+}

app/components/ThumbnailImg/index.tsx

@@ -0,0 +1,27 @@
+import ImgDeleteIcon from "@/app/icons/imgDeleteIcon.svg";
+
+export interface ThumbnailProps {
+  image: string;
+  deleteImage: () => void;
+}
+
+export default function Thumbnail(props: ThumbnailProps) {
+  const { image, deleteImage } = props;
+  return (
+    <div
+      className={` h-thumbnail w-thumbnail cursor-default border border-thumbnail rounded-action-btn flex-0 bg-cover bg-center`}
+      style={{ backgroundImage: `url("${image}")` }}
+    >
+      <div
+        className={` w-[100%] h-[100%] opacity-0 transition-all duration-200 rounded-action-btn hover:opacity-100 hover:bg-thumbnail-mask`}
+      >
+        <div
+          className={`cursor-pointer flex items-center justify-center float-right`}
+          onClick={deleteImage}
+        >
+          <ImgDeleteIcon />
+        </div>
+      </div>
+    </div>
+  );
+}

app/components/auth.module.scss

@@ -6,6 +6,8 @@
   width: 100%;
   flex-direction: column;
 
+  background-color: var(--white);
+
   .auth-logo {
     transform: scale(1.4);
   }
@@ -33,4 +35,18 @@
       margin-bottom: 10px;
     }
   }
+  input[type="number"],
+  input[type="text"],
+  input[type="password"] {
+    appearance: none;
+    border-radius: 10px;
+    border: var(--border-in-light);
+    min-height: 36px;
+    box-sizing: border-box;
+    background: var(--white);
+    color: var(--black);
+    padding: 0 10px;
+    max-width: 50%;
+    font-family: inherit;
+  }
 }

app/components/auth.tsx

@@ -1,7 +1,8 @@
+"use client";
 import styles from "./auth.module.scss";
 import { IconButton } from "./button";
 
-import { useNavigate } from "react-router-dom";
+import { useRouter } from "next/navigation";
 import { Path } from "../constant";
 import { useAccessStore } from "../store";
 import Locale from "../locales";
@@ -11,11 +12,11 @@ import { useEffect } from "react";
 import { getClientConfig } from "../config/client";
 
 export function AuthPage() {
-  const navigate = useNavigate();
+  const router = useRouter();
   const accessStore = useAccessStore();
 
-  const goHome = () => navigate(Path.Home);
-  const goChat = () => navigate(Path.Chat);
+  const goHome = () => router.push(Path.Home);
+  const goChat = () => router.push(Path.Chat);
   const resetAccessCode = () => {
     accessStore.update((access) => {
       access.openaiApiKey = "";

app/components/chat-list.tsx

@@ -12,13 +12,14 @@ import {
 import { useChatStore } from "../store";
 
 import Locale from "../locales";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+// import { Link, useLocation, useNavigate } from "react-router-dom";
 import { Path } from "../constant";
 import { MaskAvatar } from "./mask";
 import { Mask } from "../store/mask";
 import { useRef, useEffect } from "react";
 import { showConfirm } from "./ui-lib";
 import { useMobileScreen } from "../utils";
+import { usePathname, useRouter } from "next/navigation";
 
 export function ChatItem(props: {
   onClick?: () => void;
@@ -41,14 +42,14 @@ export function ChatItem(props: {
     }
   }, [props.selected]);
 
-  const { pathname: currentPath } = useLocation();
+  const pathname = usePathname();
   return (
     <Draggable draggableId={`${props.id}`} index={props.index}>
       {(provided) => (
         <div
           className={`${styles["chat-item"]} ${
             props.selected &&
-            (currentPath === Path.Chat || currentPath === Path.Home) &&
+            (pathname === Path.Chat || pathname === Path.Home) &&
             styles["chat-item-selected"]
           }`}
           onClick={props.onClick}
@@ -112,8 +113,8 @@ export function ChatList(props: { narrow?: boolean }) {
     ],
   );
   const chatStore = useChatStore();
-  const navigate = useNavigate();
   const isMobileScreen = useMobileScreen();
+  const router = useRouter();
 
   const onDragEnd: OnDragEndResponder = (result) => {
     const { destination, source } = result;
@@ -150,7 +151,8 @@ export function ChatList(props: { narrow?: boolean }) {
                 index={i}
                 selected={i === selectedIndex}
                 onClick={() => {
-                  navigate(Path.Chat);
+                  // navigate(Path.Chat);
+                  router.push(Path.Chat);
                   selectSession(i);
                 }}
                 onDelete={async () => {

app/components/chat.tsx

@@ -59,10 +59,9 @@ import {
   getMessageTextContent,
   getMessageImages,
   isVisionModel,
+  compressImage,
 } from "../utils";
 
-import { uploadImage as uploadImageRemote } from "@/app/utils/chat";
-
 import dynamic from "next/dynamic";
 
 import { ChatControllerPool } from "../client/controller";
@@ -88,7 +87,6 @@ import {
   Path,
   REQUEST_TIMEOUT_MS,
   UNFINISHED_INPUT,
-  ServiceProvider,
 } from "../constant";
 import { Avatar } from "./emoji";
 import { ContextPrompts, MaskAvatar, MaskConfig } from "./mask";
@@ -99,6 +97,7 @@ import { ExportMessageModal } from "./exporter";
 import { getClientConfig } from "../config/client";
 import { useAllModels } from "../utils/hooks";
 import { MultimodalContent } from "../client/api";
+import { useRouter } from "next/navigation";
 
 const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
   loading: () => <LoadingIcon />,
@@ -245,11 +244,11 @@ function useSubmitHandler() {
   };
 }
 
-export type RenderPrompt = Pick<Prompt, "title" | "content">;
+export type RenderPompt = Pick<Prompt, "title" | "content">;
 
 export function PromptHints(props: {
-  prompts: RenderPrompt[];
-  onPromptSelect: (prompt: RenderPrompt) => void;
+  prompts: RenderPompt[];
+  onPromptSelect: (prompt: RenderPompt) => void;
 }) {
   const noPrompts = props.prompts.length === 0;
   const [selectIndex, setSelectIndex] = useState(0);
@@ -430,7 +429,7 @@ export function ChatActions(props: {
   uploading: boolean;
 }) {
   const config = useAppConfig();
-  const navigate = useNavigate();
+  const router = useRouter();
   const chatStore = useChatStore();
 
   // switch themes
@@ -449,9 +448,6 @@ export function ChatActions(props: {
 
   // switch model
   const currentModel = chatStore.currentSession().mask.modelConfig.model;
-  const currentProviderName =
-    chatStore.currentSession().mask.modelConfig?.providerName ||
-    ServiceProvider.OpenAI;
   const allModels = useAllModels();
   const models = useMemo(() => {
     const filteredModels = allModels.filter((m) => m.available);
@@ -467,14 +463,6 @@ export function ChatActions(props: {
       return filteredModels;
     }
   }, [allModels]);
-  const currentModelName = useMemo(() => {
-    const model = models.find(
-      (m) =>
-        m.name == currentModel &&
-        m?.provider?.providerName == currentProviderName,
-    );
-    return model?.displayName ?? "";
-  }, [models, currentModel, currentProviderName]);
   const [showModelSelector, setShowModelSelector] = useState(false);
   const [showUploadImage, setShowUploadImage] = useState(false);
 
@@ -491,17 +479,13 @@ export function ChatActions(props: {
     const isUnavaliableModel = !models.some((m) => m.name === currentModel);
     if (isUnavaliableModel && models.length > 0) {
       // show next model to default model if exist
-      let nextModel = models.find((model) => model.isDefault) || models[0];
-      chatStore.updateCurrentSession((session) => {
-        session.mask.modelConfig.model = nextModel.name;
-        session.mask.modelConfig.providerName = nextModel?.provider
-          ?.providerName as ServiceProvider;
-      });
-      showToast(
-        nextModel?.provider?.providerName == "ByteDance"
-          ? nextModel.displayName
-          : nextModel.name,
+      let nextModel: ModelType = (
+        models.find((model) => model.isDefault) || models[0]
+      ).name;
+      chatStore.updateCurrentSession(
+        (session) => (session.mask.modelConfig.model = nextModel),
       );
+      showToast(nextModel);
     }
   }, [chatStore, currentModel, models]);
 
@@ -560,7 +544,8 @@ export function ChatActions(props: {
 
       <ChatAction
         onClick={() => {
-          navigate(Path.Masks);
+          // navigate(Path.Masks);
+          router.push(Path.Masks);
         }}
         text={Locale.Chat.InputActions.Masks}
         icon={<MaskIcon />}
@@ -583,40 +568,25 @@ export function ChatActions(props: {
 
       <ChatAction
         onClick={() => setShowModelSelector(true)}
-        text={currentModelName}
+        text={currentModel}
         icon={<RobotIcon />}
       />
 
       {showModelSelector && (
         <Selector
-          defaultSelectedValue={`${currentModel}@${currentProviderName}`}
+          defaultSelectedValue={currentModel}
           items={models.map((m) => ({
-            title: `${m.displayName}${
-              m?.provider?.providerName
-                ? "(" + m?.provider?.providerName + ")"
-                : ""
-            }`,
-            value: `${m.name}@${m?.provider?.providerName}`,
+            title: m.displayName,
+            value: m.name,
           }))}
           onClose={() => setShowModelSelector(false)}
           onSelection={(s) => {
             if (s.length === 0) return;
-            const [model, providerName] = s[0].split("@");
             chatStore.updateCurrentSession((session) => {
-              session.mask.modelConfig.model = model as ModelType;
-              session.mask.modelConfig.providerName =
-                providerName as ServiceProvider;
+              session.mask.modelConfig.model = s[0] as ModelType;
               session.mask.syncGlobalConfig = false;
             });
-            if (providerName == "ByteDance") {
-              const selectedModel = models.find(
-                (m) =>
-                  m.name == model && m?.provider?.providerName == providerName,
-              );
-              showToast(selectedModel?.displayName ?? "");
-            } else {
-              showToast(model);
-            }
+            showToast(s[0]);
           }}
         />
       )}
@@ -727,7 +697,7 @@ function _Chat() {
 
   // prompt hints
   const promptStore = usePromptStore();
-  const [promptHints, setPromptHints] = useState<RenderPrompt[]>([]);
+  const [promptHints, setPromptHints] = useState<RenderPompt[]>([]);
   const onSearch = useDebouncedCallback(
     (text: string) => {
       const matchedPrompts = promptStore.search(text);
@@ -812,7 +782,7 @@ function _Chat() {
     setAutoScroll(true);
   };
 
-  const onPromptSelect = (prompt: RenderPrompt) => {
+  const onPromptSelect = (prompt: RenderPompt) => {
     setTimeout(() => {
       setPromptHints([]);
 
@@ -1120,7 +1090,6 @@ function _Chat() {
             if (payload.url) {
               accessStore.update((access) => (access.openaiUrl = payload.url!));
             }
-            accessStore.update((access) => (access.useCustomConfig = true));
           });
         }
       } catch {
@@ -1167,7 +1136,7 @@ function _Chat() {
               ...(await new Promise<string[]>((res, rej) => {
                 setUploading(true);
                 const imagesData: string[] = [];
-                uploadImageRemote(file)
+                compressImage(file, 256 * 1024)
                   .then((dataUrl) => {
                     imagesData.push(dataUrl);
                     setUploading(false);
@@ -1209,7 +1178,7 @@ function _Chat() {
           const imagesData: string[] = [];
           for (let i = 0; i < files.length; i++) {
             const file = event.target.files[i];
-            uploadImageRemote(file)
+            compressImage(file, 256 * 1024)
               .then((dataUrl) => {
                 imagesData.push(dataUrl);
                 if (

app/components/exporter.module.scss

@@ -2,6 +2,9 @@
   &-body {
     margin-top: 20px;
   }
+  div:not(.no-dark) > svg {
+    filter: invert(0.5);
+  }
 }
 
 .export-content {

app/components/exporter.tsx

@@ -36,10 +36,11 @@ import { toBlob, toPng } from "html-to-image";
 import { DEFAULT_MASK_AVATAR } from "../store/mask";
 
 import { prettyObject } from "../utils/format";
-import { EXPORT_MESSAGE_CLASS_NAME } from "../constant";
+import { EXPORT_MESSAGE_CLASS_NAME, ModelProvider } from "../constant";
 import { getClientConfig } from "../config/client";
-import { type ClientApi, getClientApi } from "../client/api";
+import { ClientApi } from "../client/api";
 import { getMessageTextContent } from "../utils";
+import { identifyDefaultClaudeModel } from "../utils/checkers";
 
 const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
   loading: () => <LoadingIcon />,
@@ -312,7 +313,14 @@ export function PreviewActions(props: {
   const onRenderMsgs = (msgs: ChatMessage[]) => {
     setShouldExport(false);
 
-    const api: ClientApi = getClientApi(config.modelConfig.providerName);
+    var api: ClientApi;
+    if (config.modelConfig.model.startsWith("gemini")) {
+      api = new ClientApi(ModelProvider.GeminiPro);
+    } else if (identifyDefaultClaudeModel(config.modelConfig.model)) {
+      api = new ClientApi(ModelProvider.Claude);
+    } else {
+      api = new ClientApi(ModelProvider.GPT);
+    }
 
     api
       .share(msgs)

app/components/home.tsx

@@ -12,7 +12,7 @@ import LoadingIcon from "../icons/three-dots.svg";
 import { getCSSVar, useMobileScreen } from "../utils";
 
 import dynamic from "next/dynamic";
-import { Path, SlotID } from "../constant";
+import { ModelProvider, Path, SlotID } from "../constant";
 import { ErrorBoundary } from "./error";
 
 import { getISOLang, getLang } from "../locales";
@@ -27,8 +27,9 @@ import { SideBar } from "./sidebar";
 import { useAppConfig } from "../store/config";
 import { AuthPage } from "./auth";
 import { getClientConfig } from "../config/client";
-import { type ClientApi, getClientApi } from "../client/api";
+import { ClientApi } from "../client/api";
 import { useAccessStore } from "../store";
+import { identifyDefaultClaudeModel } from "../utils/checkers";
 
 export function Loading(props: { noLogo?: boolean }) {
   return (
@@ -170,8 +171,14 @@ function Screen() {
 export function useLoadData() {
   const config = useAppConfig();
 
-  const api: ClientApi = getClientApi(config.modelConfig.providerName);
-
+  var api: ClientApi;
+  if (config.modelConfig.model.startsWith("gemini")) {
+    api = new ClientApi(ModelProvider.GeminiPro);
+  } else if (identifyDefaultClaudeModel(config.modelConfig.model)) {
+    api = new ClientApi(ModelProvider.Claude);
+  } else {
+    api = new ClientApi(ModelProvider.GPT);
+  }
   useEffect(() => {
     (async () => {
       const models = await api.llm.models();

app/components/markdown.tsx

@@ -177,13 +177,14 @@ export function Markdown(
     fontSize?: number;
     parentRef?: RefObject<HTMLDivElement>;
     defaultShow?: boolean;
+    className?: string;
   } & React.DOMAttributes<HTMLDivElement>,
 ) {
   const mdRef = useRef<HTMLDivElement>(null);
 
   return (
     <div
-      className="markdown-body"
+      className={`markdown-body ${props.className}`}
       style={{
         fontSize: `${props.fontSize ?? 14}px`,
       }}

app/components/mask.module.scss

@@ -4,6 +4,10 @@
   display: flex;
   flex-direction: column;
 
+  div:not(.no-dark) > svg {
+    filter: invert(0.5);
+  }
+
   .mask-page-body {
     padding: 20px;
     overflow-y: auto;

app/components/mask.tsx

@@ -1,5 +1,4 @@
 import { IconButton } from "./button";
-import { ErrorBoundary } from "./error";
 
 import styles from "./mask.module.scss";
 
@@ -56,6 +55,7 @@ import {
   OnDragEndResponder,
 } from "@hello-pangea/dnd";
 import { getMessageTextContent } from "../utils";
+import useMobileScreen from "@/app/hooks/useMobileScreen";
 
 // drag and drop helper function
 function reorder<T>(list: T[], startIndex: number, endIndex: number): T[] {
@@ -398,7 +398,7 @@ export function ContextPrompts(props: {
   );
 }
 
-export function MaskPage() {
+export function MaskPage(props: { className?: string }) {
   const navigate = useNavigate();
 
   const maskStore = useMaskStore();
@@ -466,8 +466,13 @@ export function MaskPage() {
   };
 
   return (
-    <ErrorBoundary>
-      <div className={styles["mask-page"]}>
+    <>
+      <div
+        className={`
+          ${styles["mask-page"]} 
+          ${props.className}
+          `}
+      >
         <div className="window-header">
           <div className="window-header-title">
             <div className="window-header-main-title">
@@ -645,6 +650,6 @@ export function MaskPage() {
           </Modal>
         </div>
       )}
-    </ErrorBoundary>
+    </>
   );
 }

app/components/model-config.tsx

@@ -1,4 +1,3 @@
-import { ServiceProvider } from "@/app/constant";
 import { ModalConfigValidator, ModelConfig } from "../store";
 
 import Locale from "../locales";
@@ -11,25 +10,25 @@ export function ModelConfigList(props: {
   updateConfig: (updater: (config: ModelConfig) => void) => void;
 }) {
   const allModels = useAllModels();
-  const value = `${props.modelConfig.model}@${props.modelConfig?.providerName}`;
 
   return (
     <>
       <ListItem title={Locale.Settings.Model}>
         <Select
-          value={value}
+          value={props.modelConfig.model}
           onChange={(e) => {
-            const [model, providerName] = e.currentTarget.value.split("@");
-            props.updateConfig((config) => {
-              config.model = ModalConfigValidator.model(model);
-              config.providerName = providerName as ServiceProvider;
-            });
+            props.updateConfig(
+              (config) =>
+                (config.model = ModalConfigValidator.model(
+                  e.currentTarget.value,
+                )),
+            );
           }}
         >
           {allModels
             .filter((v) => v.available)
             .map((v, i) => (
-              <option value={`${v.name}@${v.provider?.providerName}`} key={i}>
+              <option value={v.name} key={i}>
                 {v.displayName}({v.provider?.providerName})
               </option>
             ))}
@@ -93,7 +92,7 @@ export function ModelConfigList(props: {
         ></input>
       </ListItem>
 
-      {props.modelConfig?.providerName == ServiceProvider.Google ? null : (
+      {props.modelConfig.model.startsWith("gemini") ? null : (
         <>
           <ListItem
             title={Locale.Settings.PresencePenalty.Title}

app/components/new-chat.module.scss

@@ -8,6 +8,10 @@
   justify-content: center;
   flex-direction: column;
 
+  div:not(.no-dark) > svg {
+    filter: invert(0.5);
+  }
+
   .mask-header {
     display: flex;
     justify-content: space-between;

app/components/new-chat.tsx

@@ -16,6 +16,7 @@ import { MaskAvatar } from "./mask";
 import { useCommand } from "../command";
 import { showConfirm } from "./ui-lib";
 import { BUILTIN_MASK_STORE } from "../masks";
+import useMobileScreen from "@/app/hooks/useMobileScreen";
 
 function MaskItem(props: { mask: Mask; onClick?: () => void }) {
   return (
@@ -71,7 +72,7 @@ function useMaskGroup(masks: Mask[]) {
   return groups;
 }
 
-export function NewChat() {
+export function NewChat(props: { className?: string }) {
   const chatStore = useChatStore();
   const maskStore = useMaskStore();
 
@@ -110,8 +111,15 @@ export function NewChat() {
     }
   }, [groups]);
 
+  const isMobileScreen = useMobileScreen();
+
   return (
-    <div className={styles["new-chat"]}>
+    <div
+      className={`
+      ${styles["new-chat"]}
+      ${props.className}
+      `}
+    >
       <div className={styles["mask-header"]}>
         <IconButton
           icon={<LeftIcon />}

app/components/settings.tsx

@@ -53,9 +53,6 @@ import Link from "next/link";
 import {
   Anthropic,
   Azure,
-  Baidu,
-  ByteDance,
-  Alibaba,
   Google,
   OPENAI_BASE_URL,
   Path,
@@ -1190,155 +1187,6 @@ export function Settings() {
                       </ListItem>
                     </>
                   )}
-                  {accessStore.provider === ServiceProvider.Baidu && (
-                    <>
-                      <ListItem
-                        title={Locale.Settings.Access.Baidu.Endpoint.Title}
-                        subTitle={
-                          Locale.Settings.Access.Baidu.Endpoint.SubTitle
-                        }
-                      >
-                        <input
-                          type="text"
-                          value={accessStore.baiduUrl}
-                          placeholder={Baidu.ExampleEndpoint}
-                          onChange={(e) =>
-                            accessStore.update(
-                              (access) =>
-                                (access.baiduUrl = e.currentTarget.value),
-                            )
-                          }
-                        ></input>
-                      </ListItem>
-                      <ListItem
-                        title={Locale.Settings.Access.Baidu.ApiKey.Title}
-                        subTitle={Locale.Settings.Access.Baidu.ApiKey.SubTitle}
-                      >
-                        <PasswordInput
-                          value={accessStore.baiduApiKey}
-                          type="text"
-                          placeholder={
-                            Locale.Settings.Access.Baidu.ApiKey.Placeholder
-                          }
-                          onChange={(e) => {
-                            accessStore.update(
-                              (access) =>
-                                (access.baiduApiKey = e.currentTarget.value),
-                            );
-                          }}
-                        />
-                      </ListItem>
-                      <ListItem
-                        title={Locale.Settings.Access.Baidu.SecretKey.Title}
-                        subTitle={
-                          Locale.Settings.Access.Baidu.SecretKey.SubTitle
-                        }
-                      >
-                        <PasswordInput
-                          value={accessStore.baiduSecretKey}
-                          type="text"
-                          placeholder={
-                            Locale.Settings.Access.Baidu.SecretKey.Placeholder
-                          }
-                          onChange={(e) => {
-                            accessStore.update(
-                              (access) =>
-                                (access.baiduSecretKey = e.currentTarget.value),
-                            );
-                          }}
-                        />
-                      </ListItem>
-                    </>
-                  )}
-
-                  {accessStore.provider === ServiceProvider.ByteDance && (
-                    <>
-                      <ListItem
-                        title={Locale.Settings.Access.ByteDance.Endpoint.Title}
-                        subTitle={
-                          Locale.Settings.Access.ByteDance.Endpoint.SubTitle +
-                          ByteDance.ExampleEndpoint
-                        }
-                      >
-                        <input
-                          type="text"
-                          value={accessStore.bytedanceUrl}
-                          placeholder={ByteDance.ExampleEndpoint}
-                          onChange={(e) =>
-                            accessStore.update(
-                              (access) =>
-                                (access.bytedanceUrl = e.currentTarget.value),
-                            )
-                          }
-                        ></input>
-                      </ListItem>
-                      <ListItem
-                        title={Locale.Settings.Access.ByteDance.ApiKey.Title}
-                        subTitle={
-                          Locale.Settings.Access.ByteDance.ApiKey.SubTitle
-                        }
-                      >
-                        <PasswordInput
-                          value={accessStore.bytedanceApiKey}
-                          type="text"
-                          placeholder={
-                            Locale.Settings.Access.ByteDance.ApiKey.Placeholder
-                          }
-                          onChange={(e) => {
-                            accessStore.update(
-                              (access) =>
-                                (access.bytedanceApiKey =
-                                  e.currentTarget.value),
-                            );
-                          }}
-                        />
-                      </ListItem>
-                    </>
-                  )}
-
-                  {accessStore.provider === ServiceProvider.Alibaba && (
-                    <>
-                      <ListItem
-                        title={Locale.Settings.Access.Alibaba.Endpoint.Title}
-                        subTitle={
-                          Locale.Settings.Access.Alibaba.Endpoint.SubTitle +
-                          Alibaba.ExampleEndpoint
-                        }
-                      >
-                        <input
-                          type="text"
-                          value={accessStore.alibabaUrl}
-                          placeholder={Alibaba.ExampleEndpoint}
-                          onChange={(e) =>
-                            accessStore.update(
-                              (access) =>
-                                (access.alibabaUrl = e.currentTarget.value),
-                            )
-                          }
-                        ></input>
-                      </ListItem>
-                      <ListItem
-                        title={Locale.Settings.Access.Alibaba.ApiKey.Title}
-                        subTitle={
-                          Locale.Settings.Access.Alibaba.ApiKey.SubTitle
-                        }
-                      >
-                        <PasswordInput
-                          value={accessStore.alibabaApiKey}
-                          type="text"
-                          placeholder={
-                            Locale.Settings.Access.Alibaba.ApiKey.Placeholder
-                          }
-                          onChange={(e) => {
-                            accessStore.update(
-                              (access) =>
-                                (access.alibabaApiKey = e.currentTarget.value),
-                            );
-                          }}
-                        />
-                      </ListItem>
-                    </>
-                  )}
                 </>
               )}
             </>

app/components/sidebar.tsx

@@ -27,9 +27,9 @@ import {
 } from "../constant";
 
 import { Link, useNavigate } from "react-router-dom";
-import { isIOS, useMobileScreen } from "../utils";
 import dynamic from "next/dynamic";
 import { showConfirm, showToast } from "./ui-lib";
+import { useDeviceInfo } from "../hooks/useDeviceInfo";
 
 const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, {
   loading: () => null,
@@ -130,16 +130,11 @@ function useDragSideBar() {
 
 export function SideBar(props: { className?: string }) {
   const chatStore = useChatStore();
-
+  const { deviceType, systemInfo } = useDeviceInfo();
   // drag side bar
   const { onDragStart, shouldNarrow } = useDragSideBar();
   const navigate = useNavigate();
   const config = useAppConfig();
-  const isMobileScreen = useMobileScreen();
-  const isIOSMobile = useMemo(
-    () => isIOS() && isMobileScreen,
-    [isMobileScreen],
-  );
 
   useHotKey();
 
@@ -150,7 +145,8 @@ export function SideBar(props: { className?: string }) {
       }`}
       style={{
         // #3016 disable transition on ios mobile screen
-        transition: isMobileScreen && isIOSMobile ? "none" : undefined,
+        transition:
+          deviceType === "mobile" && systemInfo === "iOS" ? "none" : undefined,
       }}
     >
       <div className={styles["sidebar-header"]} data-tauri-drag-region>

app/components/ui-lib.tsx

@@ -101,6 +101,7 @@ interface ModalProps {
   defaultMax?: boolean;
   footer?: React.ReactNode;
   onClose?: () => void;
+  className?: string;
 }
 export function Modal(props: ModalProps) {
   useEffect(() => {
@@ -122,14 +123,14 @@ export function Modal(props: ModalProps) {
 
   return (
     <div
-      className={
-        styles["modal-container"] + ` ${isMax && styles["modal-container-max"]}`
-      }
+      className={`${styles["modal-container"]} ${
+        isMax && styles["modal-container-max"]
+      } ${props.className ?? ""}`}
     >
-      <div className={styles["modal-header"]}>
-        <div className={styles["modal-title"]}>{props.title}</div>
+      <div className={`${styles["modal-header"]} new-header follow-parent-svg`}>
+        <div className={`${styles["modal-title"]}`}>{props.title}</div>
 
-        <div className={styles["modal-header-actions"]}>
+        <div className={`${styles["modal-header-actions"]}`}>
           <div
             className={styles["modal-header-action"]}
             onClick={() => setMax(!isMax)}
@@ -147,11 +148,11 @@ export function Modal(props: ModalProps) {
 
       <div className={styles["modal-content"]}>{props.children}</div>
 
-      <div className={styles["modal-footer"]}>
+      <div className={`${styles["modal-footer"]} new-footer`}>
         {props.footer}
         <div className={styles["modal-actions"]}>
           {props.actions?.map((action, i) => (
-            <div key={i} className={styles["modal-action"]}>
+            <div key={i} className={`${styles["modal-action"]} new-btn`}>
               {action}
             </div>
           ))}

app/config/build.ts

@@ -1,5 +1,4 @@
 import tauriConfig from "../../src-tauri/tauri.conf.json";
-import { DEFAULT_INPUT_TEMPLATE } from "../constant";
 
 export const getBuildConfig = () => {
   if (typeof process === "undefined") {
@@ -39,7 +38,6 @@ export const getBuildConfig = () => {
     ...commitInfo,
     buildMode,
     isApp,
-    template: process.env.DEFAULT_INPUT_TEMPLATE ?? DEFAULT_INPUT_TEMPLATE,
   };
 };
 

app/config/client.ts

@@ -3,7 +3,12 @@ import { BuildConfig, getBuildConfig } from "./build";
 export function getClientConfig() {
   if (typeof document !== "undefined") {
     // client side
-    return JSON.parse(queryMeta("config")) as BuildConfig;
+    try {
+      const config = JSON.parse(queryMeta("config")) as BuildConfig;
+      return config;
+    } catch (e) {
+      return null;
+    }
   }
 
   if (typeof process !== "undefined") {

app/config/server.ts

@@ -21,7 +21,7 @@ declare global {
       ENABLE_BALANCE_QUERY?: string; // allow user to query balance or not
       DISABLE_FAST_LINK?: string; // disallow parse settings from url or not
       CUSTOM_MODELS?: string; // to control custom models
-      DEFAULT_MODEL?: string; // to control default model in every new chat window
+      DEFAULT_MODEL?: string; // to cnntrol default model in every new chat window
 
       // azure only
       AZURE_URL?: string; // https://{azure-url}/openai/deployments/{deploy-name}
@@ -34,27 +34,6 @@ declare global {
 
       // google tag manager
       GTM_ID?: string;
-
-      // anthropic only
-      ANTHROPIC_URL?: string;
-      ANTHROPIC_API_KEY?: string;
-      ANTHROPIC_API_VERSION?: string;
-
-      // baidu only
-      BAIDU_URL?: string;
-      BAIDU_API_KEY?: string;
-      BAIDU_SECRET_KEY?: string;
-
-      // bytedance only
-      BYTEDANCE_URL?: string;
-      BYTEDANCE_API_KEY?: string;
-
-      // alibaba only
-      ALIBABA_URL?: string;
-      ALIBABA_API_KEY?: string;
-
-      // custom template for preprocessing user input
-      DEFAULT_INPUT_TEMPLATE?: string;
     }
   }
 }
@@ -72,22 +51,6 @@ const ACCESS_CODES = (function getAccessCodes(): Set<string> {
   }
 })();
 
-function getApiKey(keys?: string) {
-  const apiKeyEnvVar = keys ?? "";
-  const apiKeys = apiKeyEnvVar.split(",").map((v) => v.trim());
-  const randomIndex = Math.floor(Math.random() * apiKeys.length);
-  const apiKey = apiKeys[randomIndex];
-  if (apiKey) {
-    console.log(
-      `[Server Config] using ${randomIndex + 1} of ${
-        apiKeys.length
-      } api key - ${apiKey}`,
-    );
-  }
-
-  return apiKey;
-}
-
 export const getServerSideConfig = () => {
   if (typeof process === "undefined") {
     throw Error(
@@ -111,53 +74,37 @@ export const getServerSideConfig = () => {
   const isGoogle = !!process.env.GOOGLE_API_KEY;
   const isAnthropic = !!process.env.ANTHROPIC_API_KEY;
 
-  const isBaidu = !!process.env.BAIDU_API_KEY;
-  const isBytedance = !!process.env.BYTEDANCE_API_KEY;
-  const isAlibaba = !!process.env.ALIBABA_API_KEY;
-  // const apiKeyEnvVar = process.env.OPENAI_API_KEY ?? "";
-  // const apiKeys = apiKeyEnvVar.split(",").map((v) => v.trim());
-  // const randomIndex = Math.floor(Math.random() * apiKeys.length);
-  // const apiKey = apiKeys[randomIndex];
-  // console.log(
-  //   `[Server Config] using ${randomIndex + 1} of ${apiKeys.length} api key`,
-  // );
+  const apiKeyEnvVar = process.env.OPENAI_API_KEY ?? "";
+  const apiKeys = apiKeyEnvVar.split(",").map((v) => v.trim());
+  const randomIndex = Math.floor(Math.random() * apiKeys.length);
+  const apiKey = apiKeys[randomIndex];
+  console.log(
+    `[Server Config] using ${randomIndex + 1} of ${apiKeys.length} api key`,
+  );
 
-  const allowedWebDevEndpoints = (
-    process.env.WHITE_WEBDEV_ENDPOINTS ?? ""
-  ).split(",");
+  const whiteWebDevEndpoints = (process.env.WHITE_WEBDEV_ENDPOINTS ?? "").split(
+    ",",
+  );
 
   return {
     baseUrl: process.env.BASE_URL,
-    apiKey: getApiKey(process.env.OPENAI_API_KEY),
+    apiKey,
     openaiOrgId: process.env.OPENAI_ORG_ID,
 
     isAzure,
     azureUrl: process.env.AZURE_URL,
-    azureApiKey: getApiKey(process.env.AZURE_API_KEY),
+    azureApiKey: process.env.AZURE_API_KEY,
     azureApiVersion: process.env.AZURE_API_VERSION,
 
     isGoogle,
-    googleApiKey: getApiKey(process.env.GOOGLE_API_KEY),
+    googleApiKey: process.env.GOOGLE_API_KEY,
     googleUrl: process.env.GOOGLE_URL,
 
     isAnthropic,
-    anthropicApiKey: getApiKey(process.env.ANTHROPIC_API_KEY),
+    anthropicApiKey: process.env.ANTHROPIC_API_KEY,
     anthropicApiVersion: process.env.ANTHROPIC_API_VERSION,
     anthropicUrl: process.env.ANTHROPIC_URL,
 
-    isBaidu,
-    baiduUrl: process.env.BAIDU_URL,
-    baiduApiKey: getApiKey(process.env.BAIDU_API_KEY),
-    baiduSecretKey: process.env.BAIDU_SECRET_KEY,
-
-    isBytedance,
-    bytedanceApiKey: getApiKey(process.env.BYTEDANCE_API_KEY),
-    bytedanceUrl: process.env.BYTEDANCE_URL,
-
-    isAlibaba,
-    alibabaUrl: process.env.ALIBABA_URL,
-    alibabaApiKey: getApiKey(process.env.ALIBABA_API_KEY),
-
     gtmId: process.env.GTM_ID,
 
     needCode: ACCESS_CODES.size > 0,
@@ -173,6 +120,6 @@ export const getServerSideConfig = () => {
     disableFastLink: !!process.env.DISABLE_FAST_LINK,
     customModels,
     defaultModel,
-    allowedWebDevEndpoints,
+    whiteWebDevEndpoints,
   };
 };

app/constant.ts

@@ -14,16 +14,6 @@ export const ANTHROPIC_BASE_URL = "https://api.anthropic.com";
 
 export const GEMINI_BASE_URL = "https://generativelanguage.googleapis.com/";
 
-export const BAIDU_BASE_URL = "https://aip.baidubce.com";
-export const BAIDU_OATUH_URL = `${BAIDU_BASE_URL}/oauth/2.0/token`;
-
-export const BYTEDANCE_BASE_URL = "https://ark.cn-beijing.volces.com";
-
-export const ALIBABA_BASE_URL = "https://dashscope.aliyuncs.com/api/";
-
-export const CACHE_URL_PREFIX = "/api/cache";
-export const UPLOAD_URL = `${CACHE_URL_PREFIX}/upload`;
-
 export enum Path {
   Home = "/",
   Chat = "/chat",
@@ -35,13 +25,8 @@ export enum Path {
 
 export enum ApiPath {
   Cors = "",
-  Azure = "/api/azure",
   OpenAI = "/api/openai",
   Anthropic = "/api/anthropic",
-  Google = "/api/google",
-  Baidu = "/api/baidu",
-  ByteDance = "/api/bytedance",
-  Alibaba = "/api/alibaba",
 }
 
 export enum SlotID {
@@ -64,11 +49,18 @@ export enum StoreKey {
   Sync = "sync",
 }
 
-export const DEFAULT_SIDEBAR_WIDTH = 300;
-export const MAX_SIDEBAR_WIDTH = 500;
-export const MIN_SIDEBAR_WIDTH = 230;
 export const NARROW_SIDEBAR_WIDTH = 100;
 
+export const DEFAULT_SIDEBAR_WIDTH = 340;
+export const MAX_SIDEBAR_WIDTH = 440;
+export const MIN_SIDEBAR_WIDTH = 230;
+
+export const WINDOW_WIDTH_SM = 480;
+export const WINDOW_WIDTH_MD = 768;
+export const WINDOW_WIDTH_LG = 1120;
+export const WINDOW_WIDTH_XL = 1440;
+export const WINDOW_WIDTH_2XL = 1980;
+
 export const ACCESS_CODE_PREFIX = "nk-";
 
 export const LAST_INPUT_KEY = "last-input";
@@ -85,18 +77,12 @@ export enum ServiceProvider {
   Azure = "Azure",
   Google = "Google",
   Anthropic = "Anthropic",
-  Baidu = "Baidu",
-  ByteDance = "ByteDance",
-  Alibaba = "Alibaba",
 }
 
 export enum ModelProvider {
   GPT = "GPT",
   GeminiPro = "GeminiPro",
   Claude = "Claude",
-  Ernie = "Ernie",
-  Doubao = "Doubao",
-  Qwen = "Qwen",
 }
 
 export const Anthropic = {
@@ -114,48 +100,13 @@ export const OpenaiPath = {
 };
 
 export const Azure = {
-  ChatPath: (deployName: string, apiVersion: string) =>
-    `deployments/${deployName}/chat/completions?api-version=${apiVersion}`,
   ExampleEndpoint: "https://{resource-url}/openai/deployments/{deploy-id}",
 };
 
 export const Google = {
   ExampleEndpoint: "https://generativelanguage.googleapis.com/",
-  ChatPath: (modelName: string) =>
-    `v1beta/models/${modelName}:streamGenerateContent`,
-};
-
-export const Baidu = {
-  ExampleEndpoint: BAIDU_BASE_URL,
-  ChatPath: (modelName: string) => {
-    let endpoint = modelName;
-    if (modelName === "ernie-4.0-8k") {
-      endpoint = "completions_pro";
-    }
-    if (modelName === "ernie-4.0-8k-preview-0518") {
-      endpoint = "completions_adv_pro";
-    }
-    if (modelName === "ernie-3.5-8k") {
-      endpoint = "completions";
-    }
-    if (modelName === "ernie-speed-128k") {
-      endpoint = "ernie-speed-128k";
-    }
-    if (modelName === "ernie-speed-8k") {
-      endpoint = "ernie_speed";
-    }
-    return `rpc/2.0/ai_custom/v1/wenxinworkshop/chat/${endpoint}`;
-  },
-};
-
-export const ByteDance = {
-  ExampleEndpoint: "https://ark.cn-beijing.volces.com/api/",
-  ChatPath: "api/v3/chat/completions",
-};
-
-export const Alibaba = {
-  ExampleEndpoint: ALIBABA_BASE_URL,
-  ChatPath: "v1/services/aigc/text-generation/generation",
+  ChatPath: (modelName: string) => `v1beta/models/${modelName}:generateContent`,
+  VisionChatPath: (modelName: string) => `v1beta/models/${modelName}:generateContent`,
 };
 
 export const DEFAULT_INPUT_TEMPLATE = `{{input}}`; // input / time / model / lang
@@ -184,10 +135,8 @@ export const KnowledgeCutOffDate: Record<string, string> = {
   "gpt-4-turbo": "2023-12",
   "gpt-4-turbo-2024-04-09": "2023-12",
   "gpt-4-turbo-preview": "2023-12",
-  "gpt-4o": "2023-10",
-  "gpt-4o-2024-05-13": "2023-10",
-  "gpt-4o-mini": "2023-10",
-  "gpt-4o-mini-2024-07-18": "2023-10",
+  "gpt-4-1106-preview": "2023-04",
+  "gpt-4-0125-preview": "2023-12",
   "gpt-4-vision-preview": "2023-04",
   // After improvements,
   // it's now easier to add "KnowledgeCutOffDate" instead of stupid hardcoding it, as was done previously.
@@ -197,27 +146,29 @@ export const KnowledgeCutOffDate: Record<string, string> = {
 
 const openaiModels = [
   "gpt-3.5-turbo",
+  "gpt-3.5-turbo-0301",
+  "gpt-3.5-turbo-0613",
   "gpt-3.5-turbo-1106",
   "gpt-3.5-turbo-0125",
+  "gpt-3.5-turbo-16k",
+  "gpt-3.5-turbo-16k-0613",
   "gpt-4",
+  "gpt-4-0314",
   "gpt-4-0613",
+  "gpt-4-1106-preview",
+  "gpt-4-0125-preview",
   "gpt-4-32k",
+  "gpt-4-32k-0314",
   "gpt-4-32k-0613",
   "gpt-4-turbo",
   "gpt-4-turbo-preview",
-  "gpt-4o",
-  "gpt-4o-2024-05-13",
-  "gpt-4o-mini",
-  "gpt-4o-mini-2024-07-18",
   "gpt-4-vision-preview",
   "gpt-4-turbo-2024-04-09",
-  "gpt-4-1106-preview",
 ];
 
 const googleModels = [
   "gemini-1.0-pro",
   "gemini-1.5-pro-latest",
-  "gemini-1.5-flash-latest",
   "gemini-pro-vision",
 ];
 
@@ -228,40 +179,6 @@ const anthropicModels = [
   "claude-3-sonnet-20240229",
   "claude-3-opus-20240229",
   "claude-3-haiku-20240307",
-  "claude-3-5-sonnet-20240620",
-];
-
-const baiduModels = [
-  "ernie-4.0-turbo-8k",
-  "ernie-4.0-8k",
-  "ernie-4.0-8k-preview",
-  "ernie-4.0-8k-preview-0518",
-  "ernie-4.0-8k-latest",
-  "ernie-3.5-8k",
-  "ernie-3.5-8k-0205",
-  "ernie-speed-128k",
-  "ernie-speed-8k",
-  "ernie-lite-8k",
-  "ernie-tiny-8k",
-];
-
-const bytedanceModels = [
-  "Doubao-lite-4k",
-  "Doubao-lite-32k",
-  "Doubao-lite-128k",
-  "Doubao-pro-4k",
-  "Doubao-pro-32k",
-  "Doubao-pro-128k",
-];
-
-const alibabaModes = [
-  "qwen-turbo",
-  "qwen-plus",
-  "qwen-max",
-  "qwen-max-0428",
-  "qwen-max-0403",
-  "qwen-max-0107",
-  "qwen-max-longcontext",
 ];
 
 export const DEFAULT_MODELS = [
@@ -274,15 +191,6 @@ export const DEFAULT_MODELS = [
       providerType: "openai",
     },
   })),
-  ...openaiModels.map((name) => ({
-    name,
-    available: true,
-    provider: {
-      id: "azure",
-      providerName: "Azure",
-      providerType: "azure",
-    },
-  })),
   ...googleModels.map((name) => ({
     name,
     available: true,
@@ -301,47 +209,21 @@ export const DEFAULT_MODELS = [
       providerType: "anthropic",
     },
   })),
-  ...baiduModels.map((name) => ({
-    name,
-    available: true,
-    provider: {
-      id: "baidu",
-      providerName: "Baidu",
-      providerType: "baidu",
-    },
-  })),
-  ...bytedanceModels.map((name) => ({
-    name,
-    available: true,
-    provider: {
-      id: "bytedance",
-      providerName: "ByteDance",
-      providerType: "bytedance",
-    },
-  })),
-  ...alibabaModes.map((name) => ({
-    name,
-    available: true,
-    provider: {
-      id: "alibaba",
-      providerName: "Alibaba",
-      providerType: "alibaba",
-    },
-  })),
 ] as const;
 
 export const CHAT_PAGE_SIZE = 15;
 export const MAX_RENDER_MSG_COUNT = 45;
 
 // some famous webdav endpoints
-export const internalAllowedWebDavEndpoints = [
+export const internalWhiteWebDavEndpoints = [
   "https://dav.jianguoyun.com/dav/",
   "https://dav.dropdav.com/",
   "https://dav.box.com/dav",
   "https://nanao.teracloud.jp/dav/",
-  "https://bora.teracloud.jp/dav/",
   "https://webdav.4shared.com/",
   "https://dav.idrivesync.com",
   "https://webdav.yandex.com",
   "https://app.koofr.net/dav/Koofr",
 ];
+
+export const SIDEBAR_ID = "sidebar";

app/containers/Chat/ChatPanel.tsx

@@ -0,0 +1,301 @@
+import React, { useState, useRef, useEffect, useMemo } from "react";
+import {
+  useChatStore,
+  BOT_HELLO,
+  createMessage,
+  useAccessStore,
+  useAppConfig,
+  ModelType,
+} from "@/app/store";
+import Locale from "@/app/locales";
+import { Selector, showConfirm, showToast } from "@/app/components/ui-lib";
+import {
+  CHAT_PAGE_SIZE,
+  REQUEST_TIMEOUT_MS,
+  UNFINISHED_INPUT,
+} from "@/app/constant";
+import { useCommand } from "@/app/command";
+import { prettyObject } from "@/app/utils/format";
+import { ExportMessageModal } from "@/app/components/exporter";
+
+import PromptToast from "./components/PromptToast";
+import { EditMessageModal } from "./components/EditMessageModal";
+import ChatHeader from "./components/ChatHeader";
+import ChatInputPanel, {
+  ChatInputPanelInstance,
+} from "./components/ChatInputPanel";
+import ChatMessagePanel, { RenderMessage } from "./components/ChatMessagePanel";
+import { useAllModels } from "@/app/utils/hooks";
+import useRows from "@/app/hooks/useRows";
+import SessionConfigModel from "./components/SessionConfigModal";
+import useScrollToBottom from "@/app/hooks/useScrollToBottom";
+
+function _Chat() {
+  const chatStore = useChatStore();
+  const session = chatStore.currentSession();
+  const config = useAppConfig();
+
+  const { isMobileScreen } = config;
+
+  const [showExport, setShowExport] = useState(false);
+
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [userInput, setUserInput] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const chatInputPanelRef = useRef<ChatInputPanelInstance | null>(null);
+
+  const [hitBottom, setHitBottom] = useState(true);
+
+  const [attachImages, setAttachImages] = useState<string[]>([]);
+
+  // auto grow input
+  const { measure, inputRows } = useRows({
+    inputRef,
+  });
+
+  const { setAutoScroll, scrollDomToBottom } = useScrollToBottom(scrollRef);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(measure, [userInput]);
+
+  useEffect(() => {
+    chatStore.updateCurrentSession((session) => {
+      const stopTiming = Date.now() - REQUEST_TIMEOUT_MS;
+      session.messages.forEach((m) => {
+        // check if should stop all stale messages
+        if (m.isError || new Date(m.date).getTime() < stopTiming) {
+          if (m.streaming) {
+            m.streaming = false;
+          }
+
+          if (m.content.length === 0) {
+            m.isError = true;
+            m.content = prettyObject({
+              error: true,
+              message: "empty response",
+            });
+          }
+        }
+      });
+
+      // auto sync mask config from global config
+      if (session.mask.syncGlobalConfig) {
+        console.log("[Mask] syncing from global, name = ", session.mask.name);
+        session.mask.modelConfig = { ...config.modelConfig };
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const context: RenderMessage[] = useMemo(() => {
+    return session.mask.hideContext ? [] : session.mask.context.slice();
+  }, [session.mask.context, session.mask.hideContext]);
+  const accessStore = useAccessStore();
+
+  if (
+    context.length === 0 &&
+    session.messages.at(0)?.content !== BOT_HELLO.content
+  ) {
+    const copiedHello = Object.assign({}, BOT_HELLO);
+    if (!accessStore.isAuthorized()) {
+      copiedHello.content = Locale.Error.Unauthorized;
+    }
+    context.push(copiedHello);
+  }
+
+  // preview messages
+  const renderMessages = useMemo(() => {
+    return context
+      .concat(session.messages as RenderMessage[])
+      .concat(
+        isLoading
+          ? [
+              {
+                ...createMessage({
+                  role: "assistant",
+                  content: "……",
+                }),
+                preview: true,
+              },
+            ]
+          : [],
+      )
+      .concat(
+        userInput.length > 0 && config.sendPreviewBubble
+          ? [
+              {
+                ...createMessage(
+                  {
+                    role: "user",
+                    content: userInput,
+                  },
+                  {
+                    customId: "typing",
+                  },
+                ),
+                preview: true,
+              },
+            ]
+          : [],
+      );
+  }, [
+    config.sendPreviewBubble,
+    context,
+    isLoading,
+    session.messages,
+    userInput,
+  ]);
+
+  const [msgRenderIndex, _setMsgRenderIndex] = useState(
+    Math.max(0, renderMessages.length - CHAT_PAGE_SIZE),
+  );
+
+  const [showPromptModal, setShowPromptModal] = useState(false);
+
+  useCommand({
+    fill: setUserInput,
+    submit: (text) => {
+      chatInputPanelRef.current?.doSubmit(text);
+    },
+    code: (text) => {
+      if (accessStore.disableFastLink) return;
+      console.log("[Command] got code from url: ", text);
+      showConfirm(Locale.URLCommand.Code + `code = ${text}`).then((res) => {
+        if (res) {
+          accessStore.update((access) => (access.accessCode = text));
+        }
+      });
+    },
+    settings: (text) => {
+      if (accessStore.disableFastLink) return;
+
+      try {
+        const payload = JSON.parse(text) as {
+          key?: string;
+          url?: string;
+        };
+
+        console.log("[Command] got settings from url: ", payload);
+
+        if (payload.key || payload.url) {
+          showConfirm(
+            Locale.URLCommand.Settings +
+              `\n${JSON.stringify(payload, null, 4)}`,
+          ).then((res) => {
+            if (!res) return;
+            if (payload.key) {
+              accessStore.update(
+                (access) => (access.openaiApiKey = payload.key!),
+              );
+            }
+            if (payload.url) {
+              accessStore.update((access) => (access.openaiUrl = payload.url!));
+            }
+          });
+        }
+      } catch {
+        console.error("[Command] failed to get settings from url: ", text);
+      }
+    },
+  });
+
+  // edit / insert message modal
+  const [isEditingMessage, setIsEditingMessage] = useState(false);
+
+  // remember unfinished input
+  useEffect(() => {
+    // try to load from local storage
+    const key = UNFINISHED_INPUT(session.id);
+    const mayBeUnfinishedInput = localStorage.getItem(key);
+    if (mayBeUnfinishedInput && userInput.length === 0) {
+      setUserInput(mayBeUnfinishedInput);
+      localStorage.removeItem(key);
+    }
+
+    const dom = inputRef.current;
+    return () => {
+      localStorage.setItem(key, dom?.value ?? "");
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const chatinputPanelProps = {
+    inputRef,
+    isMobileScreen,
+    renderMessages,
+    attachImages,
+    userInput,
+    hitBottom,
+    inputRows,
+    setAttachImages,
+    setUserInput,
+    setIsLoading,
+    showChatSetting: setShowPromptModal,
+    _setMsgRenderIndex,
+    scrollDomToBottom,
+    setAutoScroll,
+  };
+
+  const chatMessagePanelProps = {
+    scrollRef,
+    inputRef,
+    isMobileScreen,
+    msgRenderIndex,
+    userInput,
+    context,
+    renderMessages,
+    setAutoScroll,
+    setMsgRenderIndex: chatInputPanelRef.current?.setMsgRenderIndex,
+    setHitBottom,
+    setUserInput,
+    setIsLoading,
+    setShowPromptModal,
+    scrollDomToBottom,
+  };
+
+  return (
+    <div
+      className={`
+        relative flex flex-col overflow-hidden bg-chat-panel
+        max-md:absolute max-md:h-[100vh] max-md:w-[100%]
+        md:h-[100%] md:mr-2.5 md:rounded-md
+        `}
+      key={session.id}
+    >
+      <ChatHeader
+        setIsEditingMessage={setIsEditingMessage}
+        setShowExport={setShowExport}
+        isMobileScreen={isMobileScreen}
+      />
+
+      <ChatMessagePanel {...chatMessagePanelProps} />
+
+      <ChatInputPanel ref={chatInputPanelRef} {...chatinputPanelProps} />
+
+      {showExport && (
+        <ExportMessageModal onClose={() => setShowExport(false)} />
+      )}
+
+      {isEditingMessage && (
+        <EditMessageModal
+          onClose={() => {
+            setIsEditingMessage(false);
+          }}
+        />
+      )}
+
+      <PromptToast showToast={!hitBottom} setShowModal={setShowPromptModal} />
+
+      {showPromptModal && (
+        <SessionConfigModel onClose={() => setShowPromptModal(false)} />
+      )}
+    </div>
+  );
+}
+
+export default function Chat() {
+  const chatStore = useChatStore();
+  const sessionIndex = chatStore.currentSessionIndex;
+  return <_Chat key={sessionIndex}></_Chat>;
+}

app/containers/Chat/components/ChatActions.tsx

@@ -0,0 +1,276 @@
+import { ModelType, Theme, useAppConfig } from "@/app/store/config";
+import { useChatStore } from "@/app/store/chat";
+import { ChatControllerPool } from "@/app/client/controller";
+import { useAllModels } from "@/app/utils/hooks";
+import { useEffect, useMemo, useState } from "react";
+import { isVisionModel } from "@/app/utils";
+import { showToast } from "@/app/components/ui-lib";
+import Locale from "@/app/locales";
+import { Path } from "@/app/constant";
+
+import BottomIcon from "@/app/icons/bottom.svg";
+import StopIcon from "@/app/icons/pause.svg";
+import LoadingButtonIcon from "@/app/icons/loading.svg";
+import PromptIcon from "@/app/icons/comandIcon.svg";
+import MaskIcon from "@/app/icons/maskIcon.svg";
+import BreakIcon from "@/app/icons/eraserIcon.svg";
+import SettingsIcon from "@/app/icons/configIcon.svg";
+import ImageIcon from "@/app/icons/uploadImgIcon.svg";
+import AddCircleIcon from "@/app/icons/addCircle.svg";
+
+import Popover from "@/app/components/Popover";
+import ModelSelect from "./ModelSelect";
+import { useRouter } from "next/navigation";
+
+export interface Action {
+  onClick?: () => void;
+  text: string;
+  isShow: boolean;
+  render?: (key: string) => JSX.Element;
+  icon?: JSX.Element;
+  placement: "left" | "right";
+  className?: string;
+}
+
+export function ChatActions(props: {
+  uploadImage: () => void;
+  setAttachImages: (images: string[]) => void;
+  setUploading: (uploading: boolean) => void;
+  showChatSetting: () => void;
+  scrollToBottom: () => void;
+  showPromptHints: () => void;
+  hitBottom: boolean;
+  uploading: boolean;
+  isMobileScreen: boolean;
+  className?: string;
+}) {
+  const config = useAppConfig();
+  const router = useRouter();
+  const chatStore = useChatStore();
+
+  // switch themes
+  const theme = config.theme;
+  function nextTheme() {
+    const themes = [Theme.Auto, Theme.Light, Theme.Dark];
+    const themeIndex = themes.indexOf(theme);
+    const nextIndex = (themeIndex + 1) % themes.length;
+    const nextTheme = themes[nextIndex];
+    config.update((config) => (config.theme = nextTheme));
+  }
+
+  // stop all responses
+  const couldStop = ChatControllerPool.hasPending();
+  const stopAll = () => ChatControllerPool.stopAll();
+
+  // switch model
+  const currentModel = chatStore.currentSession().mask.modelConfig.model;
+  const allModels = useAllModels();
+  const models = useMemo(
+    () => allModels.filter((m) => m.available),
+    [allModels],
+  );
+  const [showUploadImage, setShowUploadImage] = useState(false);
+
+  useEffect(() => {
+    const show = isVisionModel(currentModel);
+    setShowUploadImage(show);
+    if (!show) {
+      props.setAttachImages([]);
+      props.setUploading(false);
+    }
+
+    // if current model is not available
+    // switch to first available model
+    const isUnavaliableModel = !models.some((m) => m.name === currentModel);
+    if (isUnavaliableModel && models.length > 0) {
+      const nextModel = models[0].name as ModelType;
+      chatStore.updateCurrentSession(
+        (session) => (session.mask.modelConfig.model = nextModel),
+      );
+      showToast(nextModel);
+    }
+  }, [chatStore, currentModel, models]);
+
+  const actions: Action[] = [
+    {
+      onClick: stopAll,
+      text: Locale.Chat.InputActions.Stop,
+      isShow: couldStop,
+      icon: <StopIcon />,
+      placement: "left",
+    },
+    {
+      text: currentModel,
+      isShow: !props.isMobileScreen,
+      render: (key: string) => <ModelSelect key={key} />,
+      placement: "left",
+    },
+    {
+      onClick: props.scrollToBottom,
+      text: Locale.Chat.InputActions.ToBottom,
+      isShow: !props.hitBottom,
+      icon: <BottomIcon />,
+      placement: "left",
+    },
+    {
+      onClick: props.uploadImage,
+      text: Locale.Chat.InputActions.UploadImage,
+      isShow: showUploadImage,
+      icon: props.uploading ? <LoadingButtonIcon /> : <ImageIcon />,
+      placement: "left",
+    },
+    // {
+    //   onClick: nextTheme,
+    //   text: Locale.Chat.InputActions.Theme[theme],
+    //   isShow: true,
+    //   icon: (
+    //     <>
+    //       {theme === Theme.Auto ? (
+    //         <AutoIcon />
+    //       ) : theme === Theme.Light ? (
+    //         <LightIcon />
+    //       ) : theme === Theme.Dark ? (
+    //         <DarkIcon />
+    //       ) : null}
+    //     </>
+    //   ),
+    //   placement: "left",
+    // },
+    {
+      onClick: props.showPromptHints,
+      text: Locale.Chat.InputActions.Prompt,
+      isShow: true,
+      icon: <PromptIcon />,
+      placement: "left",
+    },
+    {
+      onClick: () => {
+        router.push(Path.Masks);
+      },
+      text: Locale.Chat.InputActions.Masks,
+      isShow: true,
+      icon: <MaskIcon />,
+      placement: "left",
+    },
+    {
+      onClick: () => {
+        chatStore.updateCurrentSession((session) => {
+          if (session.clearContextIndex === session.messages.length) {
+            session.clearContextIndex = undefined;
+          } else {
+            session.clearContextIndex = session.messages.length;
+            session.memoryPrompt = ""; // will clear memory
+          }
+        });
+      },
+      text: Locale.Chat.InputActions.Clear,
+      isShow: true,
+      icon: <BreakIcon />,
+      placement: "right",
+    },
+    {
+      onClick: props.showChatSetting,
+      text: Locale.Chat.InputActions.Settings,
+      isShow: true,
+      icon: <SettingsIcon />,
+      placement: "right",
+    },
+  ];
+
+  if (props.isMobileScreen) {
+    const content = (
+      <div className="w-[100%]">
+        {actions
+          .filter((v) => v.isShow && v.icon)
+          .map((act) => {
+            return (
+              <div
+                key={act.text}
+                className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer follow-parent-svg default-icon-color`}
+                onClick={act.onClick}
+              >
+                {act.icon}
+                <div className="flex-1 font-common text-actions-popover-menu-item">
+                  {act.text}
+                </div>
+              </div>
+            );
+          })}
+      </div>
+    );
+    return (
+      <Popover
+        content={content}
+        trigger="click"
+        placement="rt"
+        noArrow
+        popoverClassName="border border-chat-actions-popover-mobile rounded-md shadow-chat-actions-popover-mobile w-actions-popover bg-chat-actions-popover-panel-mobile "
+        className="cursor-pointer follow-parent-svg default-icon-color"
+      >
+        <AddCircleIcon />
+      </Popover>
+    );
+  }
+
+  const popoverClassName = `bg-chat-actions-btn-popover px-3 py-2.5 text-text-chat-actions-btn-popover text-sm-title rounded-md`;
+
+  return (
+    <div className={`flex gap-2 item-center ${props.className}`}>
+      {actions
+        .filter((v) => v.placement === "left" && v.isShow)
+        .map((act, ind) => {
+          if (act.render) {
+            return (
+              <div className={`${act.className ?? ""}`} key={act.text}>
+                {act.render(act.text)}
+              </div>
+            );
+          }
+          return (
+            <Popover
+              key={act.text}
+              content={act.text}
+              popoverClassName={`${popoverClassName}`}
+              placement={ind ? "t" : "lt"}
+              className={`${act.className ?? ""}`}
+            >
+              <div
+                className={` 
+                  cursor-pointer h-[32px] w-[32px] flex items-center justify-center transition duration-300 ease-in-out 
+                  hover:bg-chat-actions-btn-hovered hover:rounded-action-btn
+                  follow-parent-svg default-icon-color
+                `}
+                onClick={act.onClick}
+              >
+                {act.icon}
+              </div>
+            </Popover>
+          );
+        })}
+      <div className="flex-1"></div>
+      {actions
+        .filter((v) => v.placement === "right" && v.isShow)
+        .map((act, ind, arr) => {
+          return (
+            <Popover
+              key={act.text}
+              content={act.text}
+              popoverClassName={`${popoverClassName}`}
+              placement={ind === arr.length - 1 ? "rt" : "t"}
+            >
+              <div
+                className={`
+                  cursor-pointer h-[32px] w-[32px] flex items-center transition duration-300 ease-in-out justify-center 
+                  hover:bg-chat-actions-btn-hovered hover:rounded-action-btn
+                  follow-parent-svg default-icon-color
+                `}
+                onClick={act.onClick}
+              >
+                {act.icon}
+              </div>
+            </Popover>
+          );
+        })}
+    </div>
+  );
+}

app/containers/Chat/components/ChatHeader.tsx

@@ -0,0 +1,91 @@
+import { useRouter } from "next/navigation";
+import Locale from "@/app/locales";
+import { Path } from "@/app/constant";
+import { DEFAULT_TOPIC, useChatStore } from "@/app/store/chat";
+
+import LogIcon from "@/app/icons/logIcon.svg";
+import GobackIcon from "@/app/icons/goback.svg";
+import ShareIcon from "@/app/icons/shareIcon.svg";
+import ModelSelect from "./ModelSelect";
+
+export interface ChatHeaderProps {
+  isMobileScreen: boolean;
+  setIsEditingMessage: (v: boolean) => void;
+  setShowExport: (v: boolean) => void;
+}
+
+export default function ChatHeader(props: ChatHeaderProps) {
+  const { isMobileScreen, setIsEditingMessage, setShowExport } = props;
+
+  // const navigate = useNavigate();
+  const router = useRouter();
+  const chatStore = useChatStore();
+  const session = chatStore.currentSession();
+
+  return (
+    <div
+      className={`
+        absolute w-[100%] backdrop-blur-[30px] z-20 flex flex-0 justify-between items-center px-6 py-4 gap-chat-header-gap 
+        sm:border-b sm:border-chat-header-bottom 
+        max-md:h-menu-title-mobile
+      `}
+      data-tauri-drag-region
+    >
+      <div
+        className={`absolute z-[-1] top-0 left-0 w-[100%] h-[100%] opacity-85 backdrop-blur-[20px]  sm:bg-chat-panel-header-mask bg-chat-panel-header-mobile flex flex-0 justify-between items-center  gap-chat-header-gap`}
+      >
+        {" "}
+      </div>
+
+      {isMobileScreen ? (
+        <div
+          className="cursor-pointer follow-parent-svg default-icon-color"
+          onClick={() => router.push(Path.Home)}
+        >
+          <GobackIcon />
+        </div>
+      ) : (
+        <LogIcon />
+      )}
+
+      <div
+        className={`
+        flex-1 
+        max-md:flex max-md:flex-col max-md:items-center max-md:justify-center max-md:gap-0.5 max-md:text
+        md:mr-4
+      `}
+      >
+        <div
+          className={`
+            line-clamp-1 cursor-pointer text-text-chat-header-title text-chat-header-title font-common 
+            max-md:text-sm-title max-md:h-chat-header-title-mobile max-md:leading-5
+          `}
+          onClickCapture={() => setIsEditingMessage(true)}
+        >
+          {!session.topic ? DEFAULT_TOPIC : session.topic}
+        </div>
+        <div
+          className={`
+            text-text-chat-header-subtitle text-sm 
+            max-md:text-sm-mobile-tab max-md:leading-4
+          `}
+        >
+          {isMobileScreen ? (
+            <ModelSelect />
+          ) : (
+            Locale.Chat.SubTitle(session.messages.length)
+          )}
+        </div>
+      </div>
+
+      <div
+        className=" cursor-pointer hover:bg-hovered-btn p-1.5 rounded-action-btn follow-parent-svg default-icon-color"
+        onClick={() => {
+          setShowExport(true);
+        }}
+      >
+        <ShareIcon />
+      </div>
+    </div>
+  );
+}

app/containers/Chat/components/ChatInputPanel.tsx

@@ -0,0 +1,323 @@
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useDebouncedCallback } from "use-debounce";
+import useUploadImage from "@/app/hooks/useUploadImage";
+import Locale from "@/app/locales";
+
+import useSubmitHandler from "@/app/hooks/useSubmitHandler";
+import { CHAT_PAGE_SIZE, LAST_INPUT_KEY, Path } from "@/app/constant";
+import { ChatCommandPrefix, useChatCommand } from "@/app/command";
+import { useChatStore } from "@/app/store/chat";
+import { usePromptStore } from "@/app/store/prompt";
+import { useAppConfig } from "@/app/store/config";
+import { useRouter } from "next/navigation";
+import usePaste from "@/app/hooks/usePaste";
+
+import { ChatActions } from "./ChatActions";
+import PromptHints, { RenderPompt } from "./PromptHint";
+
+// import CEIcon from "@/app/icons/command&enterIcon.svg";
+// import EnterIcon from "@/app/icons/enterIcon.svg";
+import SendIcon from "@/app/icons/sendIcon.svg";
+
+import Btn from "@/app/components/Btn";
+import Thumbnail from "@/app/components/ThumbnailImg";
+
+export interface ChatInputPanelProps {
+  inputRef: React.RefObject<HTMLTextAreaElement>;
+  isMobileScreen: boolean;
+  renderMessages: any[];
+  attachImages: string[];
+  userInput: string;
+  hitBottom: boolean;
+  inputRows: number;
+  setAttachImages: (imgs: string[]) => void;
+  setUserInput: (v: string) => void;
+  setIsLoading: (value: boolean) => void;
+  showChatSetting: (value: boolean) => void;
+  _setMsgRenderIndex: (value: number) => void;
+  setAutoScroll: (value: boolean) => void;
+  scrollDomToBottom: () => void;
+}
+
+export interface ChatInputPanelInstance {
+  setUploading: (v: boolean) => void;
+  doSubmit: (userInput: string) => void;
+  setMsgRenderIndex: (v: number) => void;
+}
+
+// only search prompts when user input is short
+const SEARCH_TEXT_LIMIT = 30;
+
+export default forwardRef<ChatInputPanelInstance, ChatInputPanelProps>(
+  function ChatInputPanel(props, ref) {
+    const {
+      attachImages,
+      inputRef,
+      setAttachImages,
+      userInput,
+      isMobileScreen,
+      setUserInput,
+      setIsLoading,
+      showChatSetting,
+      renderMessages,
+      _setMsgRenderIndex,
+      hitBottom,
+      inputRows,
+      setAutoScroll,
+      scrollDomToBottom,
+    } = props;
+
+    const [uploading, setUploading] = useState(false);
+    const [promptHints, setPromptHints] = useState<RenderPompt[]>([]);
+
+    const chatStore = useChatStore();
+    const router = useRouter();
+    const config = useAppConfig();
+
+    const { uploadImage } = useUploadImage(attachImages, {
+      emitImages: setAttachImages,
+      setUploading,
+    });
+    const { submitKey, shouldSubmit } = useSubmitHandler();
+
+    const autoFocus = !isMobileScreen; // wont auto focus on mobile screen
+
+    // chat commands shortcuts
+    const chatCommands = useChatCommand({
+      new: () => chatStore.newSession(),
+      newm: () => router.push(Path.NewChat),
+      prev: () => chatStore.nextSession(-1),
+      next: () => chatStore.nextSession(1),
+      clear: () =>
+        chatStore.updateCurrentSession(
+          (session) => (session.clearContextIndex = session.messages.length),
+        ),
+      del: () => chatStore.deleteSession(chatStore.currentSessionIndex),
+    });
+
+    // prompt hints
+    const promptStore = usePromptStore();
+    const onSearch = useDebouncedCallback(
+      (text: string) => {
+        const matchedPrompts = promptStore.search(text);
+        setPromptHints(matchedPrompts);
+      },
+      100,
+      { leading: true, trailing: true },
+    );
+
+    // check if should send message
+    const onInputKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      // if ArrowUp and no userInput, fill with last input
+      if (
+        e.key === "ArrowUp" &&
+        userInput.length <= 0 &&
+        !(e.metaKey || e.altKey || e.ctrlKey)
+      ) {
+        setUserInput(localStorage.getItem(LAST_INPUT_KEY) ?? "");
+        e.preventDefault();
+        return;
+      }
+      if (shouldSubmit(e) && promptHints.length === 0) {
+        doSubmit(userInput);
+        e.preventDefault();
+      }
+    };
+
+    const onPromptSelect = (prompt: RenderPompt) => {
+      setTimeout(() => {
+        setPromptHints([]);
+
+        const matchedChatCommand = chatCommands.match(prompt.content);
+        if (matchedChatCommand.matched) {
+          // if user is selecting a chat command, just trigger it
+          matchedChatCommand.invoke();
+          setUserInput("");
+        } else {
+          // or fill the prompt
+          setUserInput(prompt.content);
+        }
+        inputRef.current?.focus();
+      }, 30);
+    };
+
+    const doSubmit = (userInput: string) => {
+      if (userInput.trim() === "") return;
+      const matchCommand = chatCommands.match(userInput);
+      if (matchCommand.matched) {
+        setUserInput("");
+        setPromptHints([]);
+        matchCommand.invoke();
+        return;
+      }
+      setIsLoading(true);
+      chatStore
+        .onUserInput(userInput, attachImages)
+        .then(() => setIsLoading(false));
+      setAttachImages([]);
+      localStorage.setItem(LAST_INPUT_KEY, userInput);
+      setUserInput("");
+      setPromptHints([]);
+      if (!isMobileScreen) inputRef.current?.focus();
+      setAutoScroll(true);
+    };
+
+    useImperativeHandle(ref, () => ({
+      setUploading,
+      doSubmit,
+      setMsgRenderIndex,
+    }));
+
+    function scrollToBottom() {
+      setMsgRenderIndex(renderMessages.length - CHAT_PAGE_SIZE);
+      scrollDomToBottom();
+    }
+
+    const onInput = (text: string) => {
+      setUserInput(text);
+      const n = text.trim().length;
+
+      // clear search results
+      if (n === 0) {
+        setPromptHints([]);
+      } else if (text.startsWith(ChatCommandPrefix)) {
+        setPromptHints(chatCommands.search(text));
+      } else if (!config.disablePromptHint && n < SEARCH_TEXT_LIMIT) {
+        // check if need to trigger auto completion
+        if (text.startsWith("/")) {
+          let searchText = text.slice(1);
+          onSearch(searchText);
+        }
+      }
+    };
+
+    function setMsgRenderIndex(newIndex: number) {
+      newIndex = Math.min(renderMessages.length - CHAT_PAGE_SIZE, newIndex);
+      newIndex = Math.max(0, newIndex);
+      _setMsgRenderIndex(newIndex);
+    }
+
+    const { handlePaste } = usePaste(attachImages, {
+      emitImages: setAttachImages,
+      setUploading,
+    });
+
+    return (
+      <div
+        className={`
+        relative w-[100%] box-border 
+        max-md:rounded-tl-md max-md:rounded-tr-md
+        md:border-t md:border-chat-input-top
+      `}
+      >
+        <PromptHints
+          prompts={promptHints}
+          onPromptSelect={onPromptSelect}
+          className=" border-chat-input-top"
+        />
+
+        <div
+          className={`
+            flex
+            max-md:flex-row-reverse max-md:items-center max-md:gap-2 max-md:p-3
+            md:flex-col md:px-5 md:pb-5
+          `}
+        >
+          <ChatActions
+            uploadImage={uploadImage}
+            setAttachImages={setAttachImages}
+            setUploading={setUploading}
+            showChatSetting={() => showChatSetting(true)}
+            scrollToBottom={scrollToBottom}
+            hitBottom={hitBottom}
+            uploading={uploading}
+            showPromptHints={() => {
+              // Click again to close
+              if (promptHints.length > 0) {
+                setPromptHints([]);
+                return;
+              }
+
+              inputRef.current?.focus();
+              setUserInput("/");
+              onSearch("");
+            }}
+            className={`
+              md:py-2.5
+            `}
+            isMobileScreen={isMobileScreen}
+          />
+          <label
+            className={`
+              cursor-text flex flex-col bg-chat-panel-input-hood border border-chat-input-hood 
+              focus-within:border-chat-input-hood-focus sm:focus-within:shadow-chat-input-hood-focus-shadow 
+              rounded-chat-input p-3 gap-3 max-md:flex-1
+              md:rounded-md md:p-4 md:gap-4
+            `}
+            htmlFor="chat-input"
+          >
+            {attachImages.length != 0 && (
+              <div className={`flex gap-2`}>
+                {attachImages.map((image, index) => {
+                  return (
+                    <Thumbnail
+                      key={index}
+                      deleteImage={() => {
+                        setAttachImages(
+                          attachImages.filter((_, i) => i !== index),
+                        );
+                      }}
+                      image={image}
+                    />
+                  );
+                })}
+              </div>
+            )}
+            <textarea
+              id="chat-input"
+              ref={inputRef}
+              className={`
+                leading-[19px] flex-1 focus:outline-none focus:shadow-none focus:border-none resize-none bg-inherit text-text-input
+                max-md:h-chat-input-mobile
+                md:min-h-chat-input
+              `}
+              placeholder={
+                isMobileScreen
+                  ? Locale.Chat.Input(submitKey, isMobileScreen)
+                  : undefined
+              }
+              onInput={(e) => onInput(e.currentTarget.value)}
+              value={userInput}
+              onKeyDown={onInputKeyDown}
+              onFocus={scrollToBottom}
+              onClick={scrollToBottom}
+              onPaste={handlePaste}
+              rows={inputRows}
+              autoFocus={autoFocus}
+              style={{
+                fontSize: config.fontSize,
+              }}
+            />
+            {!isMobileScreen && (
+              <div className="flex items-center justify-center gap-3 text-sm">
+                <div className="flex-1">&nbsp;</div>
+                <div className="text-text-chat-input-placeholder font-common line-clamp-1">
+                  {Locale.Chat.Input(submitKey)}
+                </div>
+                <Btn
+                  className="min-w-[77px]"
+                  icon={<SendIcon />}
+                  text={Locale.Chat.Send}
+                  disabled={!userInput.length}
+                  type="primary"
+                  onClick={() => doSubmit(userInput)}
+                />
+              </div>
+            )}
+          </label>
+        </div>
+      </div>
+    );
+  },
+);

app/containers/Chat/components/ChatMessagePanel.tsx

@@ -0,0 +1,248 @@
+import { Fragment, useEffect, useMemo } from "react";
+import { ChatMessage, useChatStore } from "@/app/store/chat";
+import { CHAT_PAGE_SIZE } from "@/app/constant";
+import Locale from "@/app/locales";
+
+import { getMessageTextContent, selectOrCopy } from "@/app/utils";
+
+import LoadingIcon from "@/app/icons/three-dots.svg";
+
+import { Avatar } from "@/app/components/emoji";
+import { MaskAvatar } from "@/app/components/mask";
+import { useAppConfig } from "@/app/store/config";
+import ClearContextDivider from "./ClearContextDivider";
+import dynamic from "next/dynamic";
+import useRelativePosition, {
+  Orientation,
+} from "@/app/hooks/useRelativePosition";
+import MessageActions, { RenderMessage } from "./MessageActions";
+import Imgs from "@/app/components/Imgs";
+
+export type { RenderMessage };
+
+export interface ChatMessagePanelProps {
+  scrollRef: React.RefObject<HTMLDivElement>;
+  inputRef: React.RefObject<HTMLTextAreaElement>;
+  isMobileScreen: boolean;
+  msgRenderIndex: number;
+  userInput: string;
+  context: any[];
+  renderMessages: RenderMessage[];
+  scrollDomToBottom: () => void;
+  setAutoScroll?: (value: boolean) => void;
+  setMsgRenderIndex?: (newIndex: number) => void;
+  setHitBottom?: (value: boolean) => void;
+  setUserInput?: (v: string) => void;
+  setIsLoading?: (value: boolean) => void;
+  setShowPromptModal?: (value: boolean) => void;
+}
+
+let MarkdownLoadedCallback: () => void;
+
+const Markdown = dynamic(
+  async () => {
+    const bundle = await import("@/app/components/markdown");
+
+    if (MarkdownLoadedCallback) {
+      MarkdownLoadedCallback();
+    }
+    return bundle.Markdown;
+  },
+  {
+    loading: () => <LoadingIcon />,
+  },
+);
+
+export default function ChatMessagePanel(props: ChatMessagePanelProps) {
+  const {
+    scrollRef,
+    inputRef,
+    setAutoScroll,
+    setMsgRenderIndex,
+    isMobileScreen,
+    msgRenderIndex,
+    setHitBottom,
+    setUserInput,
+    userInput,
+    context,
+    renderMessages,
+    setIsLoading,
+    setShowPromptModal,
+    scrollDomToBottom,
+  } = props;
+
+  const chatStore = useChatStore();
+  const session = chatStore.currentSession();
+  const config = useAppConfig();
+  const fontSize = config.fontSize;
+
+  const { position, getRelativePosition } = useRelativePosition({
+    containerRef: scrollRef,
+    delay: 0,
+    offsetDistance: 20,
+  });
+
+  // clear context index = context length + index in messages
+  const clearContextIndex =
+    (session.clearContextIndex ?? -1) >= 0
+      ? session.clearContextIndex! + context.length - msgRenderIndex
+      : -1;
+
+  useEffect(() => {
+    if (!MarkdownLoadedCallback) {
+      MarkdownLoadedCallback = () => {
+        window.setTimeout(scrollDomToBottom, 100);
+      };
+    }
+  }, [scrollDomToBottom]);
+
+  const messages = useMemo(() => {
+    const endRenderIndex = Math.min(
+      msgRenderIndex + 3 * CHAT_PAGE_SIZE,
+      renderMessages.length,
+    );
+    return renderMessages.slice(msgRenderIndex, endRenderIndex);
+  }, [msgRenderIndex, renderMessages]);
+
+  const onChatBodyScroll = (e: HTMLElement) => {
+    const bottomHeight = e.scrollTop + e.clientHeight;
+    const edgeThreshold = e.clientHeight;
+
+    const isTouchTopEdge = e.scrollTop <= edgeThreshold;
+    const isTouchBottomEdge = bottomHeight >= e.scrollHeight - edgeThreshold;
+    const isHitBottom =
+      bottomHeight >= e.scrollHeight - (isMobileScreen ? 4 : 10);
+
+    const prevPageMsgIndex = msgRenderIndex - CHAT_PAGE_SIZE;
+    const nextPageMsgIndex = msgRenderIndex + CHAT_PAGE_SIZE;
+
+    if (isTouchTopEdge && !isTouchBottomEdge) {
+      setMsgRenderIndex?.(prevPageMsgIndex);
+    } else if (isTouchBottomEdge) {
+      setMsgRenderIndex?.(nextPageMsgIndex);
+    }
+
+    setHitBottom?.(isHitBottom);
+    setAutoScroll?.(isHitBottom);
+  };
+
+  const onRightClick = (e: any, message: ChatMessage) => {
+    // copy to clipboard
+    if (selectOrCopy(e.currentTarget, getMessageTextContent(message))) {
+      if (userInput.length === 0) {
+        setUserInput?.(getMessageTextContent(message));
+      }
+
+      e.preventDefault();
+    }
+  };
+
+  return (
+    <div
+      className={`pt-[80px] relative flex-1 overscroll-y-none overflow-y-auto overflow-x-hidden px-3 pb-6 md:bg-chat-panel-message bg-chat-panel-message-mobile`}
+      ref={scrollRef}
+      onScroll={(e) => onChatBodyScroll(e.currentTarget)}
+      onMouseDown={() => inputRef.current?.blur()}
+      onTouchStart={() => {
+        inputRef.current?.blur();
+        setAutoScroll?.(false);
+      }}
+    >
+      {messages.map((message, i) => {
+        const isUser = message.role === "user";
+        const isContext = i < context.length;
+
+        const shouldShowClearContextDivider = i === clearContextIndex - 1;
+
+        const actionsBarPosition =
+          position?.id === message.id &&
+          position?.poi.overlapPositions[Orientation.bottom]
+            ? "bottom-[calc(100%-0.25rem)]"
+            : "top-[calc(100%-0.25rem)]";
+
+        return (
+          <Fragment key={message.id}>
+            <div
+              className={`flex mt-6 gap-2 ${isUser ? "flex-row-reverse" : ""}`}
+            >
+              <div className={`relative flex-0`}>
+                {isUser ? (
+                  <Avatar avatar={config.avatar} />
+                ) : (
+                  <>
+                    {["system"].includes(message.role) ? (
+                      <Avatar avatar="2699-fe0f" />
+                    ) : (
+                      <MaskAvatar
+                        avatar={session.mask.avatar}
+                        model={message.model || session.mask.modelConfig.model}
+                      />
+                    )}
+                  </>
+                )}
+              </div>
+              <div
+                className={`group relative flex ${
+                  isUser ? "flex-row-reverse" : ""
+                }`}
+              >
+                <div
+                  className={` pointer-events-none  text-text-chat-message-date text-right font-common whitespace-nowrap transition-all duration-500 text-sm absolute z-1 ${
+                    isUser ? "right-0" : "left-0"
+                  } bottom-[100%] hidden group-hover:block`}
+                >
+                  {isContext
+                    ? Locale.Chat.IsContext
+                    : message.date.toLocaleString()}
+                </div>
+                <div
+                  className={`transition-all duration-300 select-text break-words font-common text-sm-title ${
+                    isUser
+                      ? "rounded-user-message bg-chat-panel-message-user"
+                      : "rounded-bot-message bg-chat-panel-message-bot"
+                  } box-border peer py-2 px-3`}
+                  onPointerMoveCapture={(e) =>
+                    getRelativePosition(e.currentTarget, message.id)
+                  }
+                >
+                  <Markdown
+                    content={getMessageTextContent(message)}
+                    loading={
+                      (message.preview || message.streaming) &&
+                      message.content.length === 0 &&
+                      !isUser
+                    }
+                    onContextMenu={(e) => onRightClick(e, message)}
+                    onDoubleClickCapture={() => {
+                      if (!isMobileScreen) return;
+                      setUserInput?.(getMessageTextContent(message));
+                    }}
+                    fontSize={fontSize}
+                    parentRef={scrollRef}
+                    defaultShow={i >= messages.length - 6}
+                    className={`leading-6 max-w-message-width ${
+                      isUser
+                        ? " text-text-chat-message-markdown-user"
+                        : "text-text-chat-message-markdown-bot"
+                    }`}
+                  />
+                  <Imgs message={message} />
+                </div>
+                <MessageActions
+                  className={actionsBarPosition}
+                  message={message}
+                  inputRef={inputRef}
+                  isUser={isUser}
+                  isContext={isContext}
+                  setIsLoading={setIsLoading}
+                  setShowPromptModal={setShowPromptModal}
+                />
+              </div>
+            </div>
+            {shouldShowClearContextDivider && <ClearContextDivider />}
+          </Fragment>
+        );
+      })}
+    </div>
+  );
+}

app/containers/Chat/components/ClearContextDivider.tsx

@@ -0,0 +1,46 @@
+import { useChatStore } from "@/app/store/chat";
+import Locale from "@/app/locales";
+import { useAppConfig } from "@/app/store";
+
+export default function ClearContextDivider() {
+  const chatStore = useChatStore();
+  const { isMobileScreen } = useAppConfig();
+
+  return (
+    <div
+      className={`mt-6 mb-8 flex items-center justify-center gap-2.5 max-md:cursor-pointer`}
+      onClick={() => {
+        if (!isMobileScreen) {
+          return;
+        }
+        chatStore.updateCurrentSession(
+          (session) => (session.clearContextIndex = undefined),
+        );
+      }}
+    >
+      <div className="bg-chat-panel-message-clear-divider h-[1px] w-10"> </div>
+      <div className="flex items-center justify-between gap-1 text-sm">
+        <div className={`text-text-chat-panel-message-clear`}>
+          {Locale.Context.Clear}
+        </div>
+        <div
+          className={`
+          text-text-chat-panel-message-clear-revert  underline font-common 
+          md:cursor-pointer
+          `}
+          onClick={() => {
+            if (isMobileScreen) {
+              return;
+            }
+            chatStore.updateCurrentSession(
+              (session) => (session.clearContextIndex = undefined),
+            );
+          }}
+        >
+          {Locale.Context.Revert}
+        </div>
+      </div>
+      <div className="bg-chat-panel-message-clear-divider h-[1px] w-10"> </div>
+    </div>
+  );
+}

app/containers/Chat/components/EditMessageModal.tsx

@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { useChatStore } from "@/app/store/chat";
+import { List, ListItem, Modal } from "@/app/components/ui-lib";
+
+import Locale from "@/app/locales";
+import { IconButton } from "@/app/components/button";
+import { ContextPrompts } from "@/app/components/mask";
+
+import CancelIcon from "@/app/icons/cancel.svg";
+import ConfirmIcon from "@/app/icons/confirm.svg";
+import Input from "@/app/components/Input";
+
+export function EditMessageModal(props: { onClose: () => void }) {
+  const chatStore = useChatStore();
+  const session = chatStore.currentSession();
+  const [messages, setMessages] = useState(session.messages.slice());
+
+  return (
+    <div className="modal-mask">
+      <Modal
+        title={Locale.Chat.EditMessage.Title}
+        onClose={props.onClose}
+        actions={[
+          <IconButton
+            text={Locale.UI.Cancel}
+            icon={<CancelIcon />}
+            key="cancel"
+            onClick={() => {
+              props.onClose();
+            }}
+          />,
+          <IconButton
+            type="primary"
+            text={Locale.UI.Confirm}
+            icon={<ConfirmIcon />}
+            key="ok"
+            onClick={() => {
+              chatStore.updateCurrentSession(
+                (session) => (session.messages = messages),
+              );
+              props.onClose();
+            }}
+          />,
+        ]}
+        // className="!bg-modal-mask"
+      >
+        <List>
+          <ListItem
+            title={Locale.Chat.EditMessage.Topic.Title}
+            subTitle={Locale.Chat.EditMessage.Topic.SubTitle}
+          >
+            <Input
+              type="text"
+              value={session.topic}
+              onChange={(e) =>
+                chatStore.updateCurrentSession(
+                  (session) => (session.topic = e || ""),
+                )
+              }
+              className=" text-center"
+            ></Input>
+          </ListItem>
+        </List>
+        <ContextPrompts
+          context={messages}
+          updateContext={(updater) => {
+            const newMessages = messages.slice();
+            updater(newMessages);
+            setMessages(newMessages);
+          }}
+        />
+      </Modal>
+    </div>
+  );
+}

app/containers/Chat/components/MessageActions.tsx

@@ -0,0 +1,295 @@
+import Locale from "@/app/locales";
+
+import StopIcon from "@/app/icons/pause.svg";
+import DeleteRequestIcon from "@/app/icons/deleteRequestIcon.svg";
+import RetryRequestIcon from "@/app/icons/retryRequestIcon.svg";
+import CopyRequestIcon from "@/app/icons/copyRequestIcon.svg";
+import EditRequestIcon from "@/app/icons/editRequestIcon.svg";
+import PinRequestIcon from "@/app/icons/pinRequestIcon.svg";
+import { showPrompt, showToast } from "@/app/components/ui-lib";
+import {
+  copyToClipboard,
+  getMessageImages,
+  getMessageTextContent,
+} from "@/app/utils";
+import { MultimodalContent } from "@/app/client/api";
+import { ChatMessage, useChatStore } from "@/app/store/chat";
+import ActionsBar from "@/app/components/ActionsBar";
+import { ChatControllerPool } from "@/app/client/controller";
+import { RefObject } from "react";
+
+export type RenderMessage = ChatMessage & { preview?: boolean };
+
+export interface MessageActionsProps {
+  message: RenderMessage;
+  isUser: boolean;
+  isContext: boolean;
+  showActions?: boolean;
+  inputRef: RefObject<HTMLTextAreaElement>;
+  className?: string;
+  setIsLoading?: (value: boolean) => void;
+  setShowPromptModal?: (value: boolean) => void;
+}
+
+const genActionsShema = (
+  message: RenderMessage,
+  {
+    onEdit,
+    onCopy,
+    onPinMessage,
+    onDelete,
+    onResend,
+    onUserStop,
+  }: Record<
+    | "onEdit"
+    | "onCopy"
+    | "onPinMessage"
+    | "onDelete"
+    | "onResend"
+    | "onUserStop",
+    (message: RenderMessage) => void
+  >,
+) => {
+  const className =
+    " !p-1 hover:bg-chat-message-actions-btn-hovered !rounded-actions-bar-btn ";
+  return [
+    {
+      id: "Edit",
+      icons: <EditRequestIcon />,
+      title: "Edit",
+      className,
+      onClick: () => onEdit(message),
+    },
+    {
+      id: Locale.Chat.Actions.Copy,
+      icons: <CopyRequestIcon />,
+      title: Locale.Chat.Actions.Copy,
+      className,
+      onClick: () => onCopy(message),
+    },
+    {
+      id: Locale.Chat.Actions.Pin,
+      icons: <PinRequestIcon />,
+      title: Locale.Chat.Actions.Pin,
+      className,
+      onClick: () => onPinMessage(message),
+    },
+    {
+      id: Locale.Chat.Actions.Delete,
+      icons: <DeleteRequestIcon />,
+      title: Locale.Chat.Actions.Delete,
+      className,
+      onClick: () => onDelete(message),
+    },
+    {
+      id: Locale.Chat.Actions.Retry,
+      icons: <RetryRequestIcon />,
+      title: Locale.Chat.Actions.Retry,
+      className,
+      onClick: () => onResend(message),
+    },
+    {
+      id: Locale.Chat.Actions.Stop,
+      icons: <StopIcon />,
+      title: Locale.Chat.Actions.Stop,
+      className,
+      onClick: () => onUserStop(message),
+    },
+  ];
+};
+
+enum GroupType {
+  "streaming" = "streaming",
+  "isContext" = "isContext",
+  "normal" = "normal",
+}
+
+const groupsTypes = {
+  [GroupType.streaming]: [[Locale.Chat.Actions.Stop]],
+  [GroupType.isContext]: [["Edit"]],
+  [GroupType.normal]: [
+    [
+      Locale.Chat.Actions.Retry,
+      "Edit",
+      Locale.Chat.Actions.Copy,
+      Locale.Chat.Actions.Pin,
+      Locale.Chat.Actions.Delete,
+    ],
+  ],
+};
+
+export default function MessageActions(props: MessageActionsProps) {
+  const {
+    className,
+    message,
+    isUser,
+    isContext,
+    showActions = true,
+    setIsLoading,
+    inputRef,
+    setShowPromptModal,
+  } = props;
+
+  const chatStore = useChatStore();
+  const session = chatStore.currentSession();
+
+  const deleteMessage = (msgId?: string) => {
+    chatStore.updateCurrentSession(
+      (session) =>
+        (session.messages = session.messages.filter((m) => m.id !== msgId)),
+    );
+  };
+
+  const onDelete = (message: ChatMessage) => {
+    deleteMessage(message.id);
+  };
+
+  const onResend = (message: ChatMessage) => {
+    // when it is resending a message
+    // 1. for a user's message, find the next bot response
+    // 2. for a bot's message, find the last user's input
+    // 3. delete original user input and bot's message
+    // 4. resend the user's input
+
+    const resendingIndex = session.messages.findIndex(
+      (m) => m.id === message.id,
+    );
+
+    if (resendingIndex < 0 || resendingIndex >= session.messages.length) {
+      console.error("[Chat] failed to find resending message", message);
+      return;
+    }
+
+    let userMessage: ChatMessage | undefined;
+    let botMessage: ChatMessage | undefined;
+
+    if (message.role === "assistant") {
+      // if it is resending a bot's message, find the user input for it
+      botMessage = message;
+      for (let i = resendingIndex; i >= 0; i -= 1) {
+        if (session.messages[i].role === "user") {
+          userMessage = session.messages[i];
+          break;
+        }
+      }
+    } else if (message.role === "user") {
+      // if it is resending a user's input, find the bot's response
+      userMessage = message;
+      for (let i = resendingIndex; i < session.messages.length; i += 1) {
+        if (session.messages[i].role === "assistant") {
+          botMessage = session.messages[i];
+          break;
+        }
+      }
+    }
+
+    if (userMessage === undefined) {
+      console.error("[Chat] failed to resend", message);
+      return;
+    }
+
+    // delete the original messages
+    deleteMessage(userMessage.id);
+    deleteMessage(botMessage?.id);
+
+    // resend the message
+    setIsLoading?.(true);
+    const textContent = getMessageTextContent(userMessage);
+    const images = getMessageImages(userMessage);
+    chatStore
+      .onUserInput(textContent, images)
+      .then(() => setIsLoading?.(false));
+    inputRef.current?.focus();
+  };
+
+  const onPinMessage = (message: ChatMessage) => {
+    chatStore.updateCurrentSession((session) =>
+      session.mask.context.push(message),
+    );
+
+    showToast(Locale.Chat.Actions.PinToastContent, {
+      text: Locale.Chat.Actions.PinToastAction,
+      onClick: () => {
+        setShowPromptModal?.(true);
+      },
+    });
+  };
+
+  // stop response
+  const onUserStop = (message: ChatMessage) => {
+    ChatControllerPool.stop(session.id, message.id);
+  };
+
+  const onEdit = async () => {
+    const newMessage = await showPrompt(
+      Locale.Chat.Actions.Edit,
+      getMessageTextContent(message),
+      10,
+    );
+    let newContent: string | MultimodalContent[] = newMessage;
+    const images = getMessageImages(message);
+    if (images.length > 0) {
+      newContent = [{ type: "text", text: newMessage }];
+      for (let i = 0; i < images.length; i++) {
+        newContent.push({
+          type: "image_url",
+          image_url: {
+            url: images[i],
+          },
+        });
+      }
+    }
+    chatStore.updateCurrentSession((session) => {
+      const m = session.mask.context
+        .concat(session.messages)
+        .find((m) => m.id === message.id);
+      if (m) {
+        m.content = newContent;
+      }
+    });
+  };
+
+  const onCopy = () => copyToClipboard(getMessageTextContent(message));
+
+  const groupsType = [
+    message.streaming && GroupType.streaming,
+    isContext && GroupType.isContext,
+    GroupType.normal,
+  ].find((i) => i) as GroupType;
+
+  return (
+    showActions && (
+      <div
+        className={`
+          absolute z-10 w-[100%]
+          ${isUser ? "right-0" : "left-0"} 
+          transition-all duration-300 
+          opacity-0
+          pointer-events-none
+          group-hover:opacity-100 
+          group-hover:pointer-events-auto
+          ${className}
+        `}
+      >
+        <ActionsBar
+          actionsShema={genActionsShema(message, {
+            onCopy,
+            onDelete,
+            onPinMessage,
+            onEdit,
+            onResend,
+            onUserStop,
+          })}
+          groups={groupsTypes[groupsType]}
+          className={`
+            float-right flex flex-row gap-1  p-1
+            bg-chat-message-actions 
+            rounded-md 
+            shadow-message-actions-bar 
+            dark:bg-none
+          `}
+        />
+      </div>
+    )
+  );
+}

app/containers/Chat/components/ModelSelect.tsx

@@ -0,0 +1,159 @@
+import Popover from "@/app/components/Popover";
+import React, { useMemo, useRef } from "react";
+import useRelativePosition, {
+  Orientation,
+} from "@/app/hooks/useRelativePosition";
+import Locale from "@/app/locales";
+import { useChatStore } from "@/app/store/chat";
+import { useAllModels } from "@/app/utils/hooks";
+import { ModelType, useAppConfig } from "@/app/store/config";
+import { showToast } from "@/app/components/ui-lib";
+import BottomArrow from "@/app/icons/downArrowLgIcon.svg";
+import BottomArrowMobile from "@/app/icons/bottomArrow.svg";
+import Modal, { TriggerProps } from "@/app/components/Modal";
+
+import Selected from "@/app/icons/selectedIcon.svg";
+
+const ModelSelect = () => {
+  const config = useAppConfig();
+  const { isMobileScreen } = config;
+  const chatStore = useChatStore();
+  const currentModel = chatStore.currentSession().mask.modelConfig.model;
+  const allModels = useAllModels();
+  const models = useMemo(() => {
+    const filteredModels = allModels.filter((m) => m.available);
+    const defaultModel = filteredModels.find((m) => m.isDefault);
+
+    if (defaultModel) {
+      const arr = [
+        defaultModel,
+        ...filteredModels.filter((m) => m !== defaultModel),
+      ];
+      return arr;
+    } else {
+      return filteredModels;
+    }
+  }, [allModels]);
+
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  const { position, getRelativePosition } = useRelativePosition({
+    delay: 0,
+  });
+
+  const contentRef = useMemo<{ current: HTMLDivElement | null }>(() => {
+    return {
+      current: null,
+    };
+  }, []);
+  const selectedItemRef = useRef<HTMLDivElement>(null);
+
+  const autoScrollToSelectedModal = () => {
+    window.setTimeout(() => {
+      const distanceToParent = selectedItemRef.current?.offsetTop || 0;
+      const childHeight = selectedItemRef.current?.offsetHeight || 0;
+      const parentHeight = contentRef.current?.offsetHeight || 0;
+      const distanceToParentCenter =
+        distanceToParent + childHeight / 2 - parentHeight / 2;
+
+      if (distanceToParentCenter > 0 && contentRef.current) {
+        contentRef.current.scrollTop = distanceToParentCenter;
+      }
+    });
+  };
+
+  const content: TriggerProps["content"] = ({ close }) => (
+    <div
+      className={`flex flex-col gap-1 overflow-x-hidden  relative text-sm-title`}
+    >
+      {models?.map((o) => (
+        <div
+          key={o.displayName}
+          className={`flex  items-center px-3 py-2 gap-3 rounded-action-btn hover:bg-select-option-hovered  cursor-pointer`}
+          onClick={() => {
+            close();
+            chatStore.updateCurrentSession((session) => {
+              session.mask.modelConfig.model = o.name as ModelType;
+              session.mask.syncGlobalConfig = false;
+            });
+            showToast(o.name);
+          }}
+          ref={currentModel === o.name ? selectedItemRef : undefined}
+        >
+          <div className={`flex-1 text-text-select`}>{o.name}</div>
+          <div
+            className={currentModel === o.name ? "opacity-100" : "opacity-0"}
+          >
+            <Selected />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+
+  if (isMobileScreen) {
+    return (
+      <Modal.Trigger
+        content={(e) => (
+          <div className="h-[100%]  overflow-y-auto" ref={contentRef}>
+            {content(e)}
+          </div>
+        )}
+        type="bottom-drawer"
+        onOpen={(e) => {
+          if (e) {
+            autoScrollToSelectedModal();
+            getRelativePosition(rootRef.current!, "");
+          }
+        }}
+        title={Locale.Chat.SelectModel}
+        headerBordered
+        noFooter
+        modelClassName="h-model-bottom-drawer"
+      >
+        <div
+          className="flex items-center gap-1 cursor-pointer text-text-modal-select"
+          ref={rootRef}
+        >
+          {currentModel}
+          <BottomArrowMobile />
+        </div>
+      </Modal.Trigger>
+    );
+  }
+
+  return (
+    <Popover
+      content={
+        <div className="max-h-chat-actions-select-model-popover overflow-y-auto">
+          {content({ close: () => {} })}
+        </div>
+      }
+      trigger="click"
+      noArrow
+      placement={
+        position?.poi.relativePosition[1] !== Orientation.bottom ? "lb" : "lt"
+      }
+      popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover  bg-model-select-popover-panel w-[280px]"
+      onShow={(e) => {
+        if (e) {
+          autoScrollToSelectedModal();
+          getRelativePosition(rootRef.current!, "");
+        }
+      }}
+      getPopoverPanelRef={(ref) => (contentRef.current = ref.current)}
+    >
+      <div
+        className="flex items-center justify-center gap-1 cursor-pointer rounded-chat-model-select pl-3 pr-2.5 py-2 font-common leading-4 bg-chat-actions-select-model hover:bg-chat-actions-select-model-hover"
+        ref={rootRef}
+      >
+        <div className="line-clamp-1 max-w-chat-actions-select-model text-sm-title text-text-modal-select">
+          {currentModel}
+        </div>
+        <BottomArrow />
+      </div>
+    </Popover>
+  );
+};
+
+export default ModelSelect;

app/containers/Chat/components/PromptHint.tsx

@@ -0,0 +1,96 @@
+import { useEffect, useRef, useState } from "react";
+import { Prompt } from "@/app/store/prompt";
+
+import styles from "../index.module.scss";
+import useShowPromptHint from "@/app/hooks/useShowPromptHint";
+
+export type RenderPompt = Pick<Prompt, "title" | "content">;
+
+export default function PromptHints(props: {
+  prompts: RenderPompt[];
+  onPromptSelect: (prompt: RenderPompt) => void;
+  className?: string;
+}) {
+  const noPrompts = props.prompts.length === 0;
+
+  const [selectIndex, setSelectIndex] = useState(0);
+
+  const selectedRef = useRef<HTMLDivElement>(null);
+
+  const { internalPrompts, notShowPrompt } = useShowPromptHint({ ...props });
+
+  useEffect(() => {
+    setSelectIndex(0);
+  }, [props.prompts.length]);
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (noPrompts || e.metaKey || e.altKey || e.ctrlKey) {
+        return;
+      }
+      // arrow up / down to select prompt
+      const changeIndex = (delta: number) => {
+        e.stopPropagation();
+        e.preventDefault();
+        const nextIndex = Math.max(
+          0,
+          Math.min(props.prompts.length - 1, selectIndex + delta),
+        );
+        setSelectIndex(nextIndex);
+        selectedRef.current?.scrollIntoView({
+          block: "center",
+        });
+      };
+
+      if (e.key === "ArrowUp") {
+        changeIndex(1);
+      } else if (e.key === "ArrowDown") {
+        changeIndex(-1);
+      } else if (e.key === "Enter") {
+        const selectedPrompt = props.prompts.at(selectIndex);
+        if (selectedPrompt) {
+          props.onPromptSelect(selectedPrompt);
+        }
+      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+
+    return () => window.removeEventListener("keydown", onKeyDown);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.prompts.length, selectIndex]);
+
+  if (!internalPrompts.length) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`
+        transition-all duration-300 shadow-prompt-hint-container rounded-none  flex flex-col-reverse overflow-x-hidden
+        ${
+          notShowPrompt
+            ? "max-h-[0vh] border-none"
+            : "border-b pt-2.5 max-h-[50vh]"
+        } 
+        ${props.className}
+      `}
+    >
+      {internalPrompts.map((prompt, i) => (
+        <div
+          ref={i === selectIndex ? selectedRef : null}
+          className={
+            styles["prompt-hint"] +
+            ` ${i === selectIndex ? styles["prompt-hint-selected"] : ""}`
+          }
+          key={prompt.title + i.toString()}
+          onClick={() => props.onPromptSelect(prompt)}
+          onMouseEnter={() => setSelectIndex(i)}
+        >
+          <div className={styles["hint-title"]}>{prompt.title}</div>
+          <div className={styles["hint-content"]}>{prompt.content}</div>
+        </div>
+      ))}
+    </div>
+  );
+}

app/containers/Chat/components/PromptToast.tsx

@@ -0,0 +1,32 @@
+import { useChatStore } from "@/app/store/chat";
+import Locale from "@/app/locales";
+
+import BrainIcon from "@/app/icons/brain.svg";
+
+import styles from "../index.module.scss";
+
+export default function PromptToast(props: {
+  showToast?: boolean;
+  setShowModal: (_: boolean) => void;
+}) {
+  const chatStore = useChatStore();
+  const session = chatStore.currentSession();
+  const context = session.mask.context;
+
+  return (
+    <div className={styles["prompt-toast"]} key="prompt-toast">
+      {props.showToast && (
+        <div
+          className={styles["prompt-toast-inner"] + " clickable"}
+          role="button"
+          onClick={() => props.setShowModal(true)}
+        >
+          <BrainIcon />
+          <span className={styles["prompt-toast-content"]}>
+            {Locale.Context.Toast(context.length)}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

app/containers/Chat/components/SessionConfigModal.tsx

@@ -0,0 +1,77 @@
+import { Modal, showConfirm } from "@/app/components/ui-lib";
+import { useChatStore } from "@/app/store/chat";
+import { useMaskStore } from "@/app/store/mask";
+import { useNavigate } from "react-router-dom";
+import Locale from "@/app/locales";
+import { IconButton } from "@/app/components/button";
+import { Path } from "@/app/constant";
+
+import ResetIcon from "@/app/icons/reload.svg";
+import CopyIcon from "@/app/icons/copy.svg";
+import MaskConfig from "@/app/containers/Settings/components/MaskConfig";
+import { ListItem } from "@/app/components/List";
+
+export default function SessionConfigModel(props: { onClose: () => void }) {
+  const chatStore = useChatStore();
+  const session = chatStore.currentSession();
+  const maskStore = useMaskStore();
+  const navigate = useNavigate();
+
+  return (
+    <div className="modal-mask">
+      <Modal
+        title={Locale.Context.Edit}
+        onClose={() => props.onClose()}
+        actions={[
+          <IconButton
+            key="reset"
+            icon={<ResetIcon />}
+            bordered
+            text={Locale.Chat.Config.Reset}
+            onClick={async () => {
+              if (await showConfirm(Locale.Memory.ResetConfirm)) {
+                chatStore.updateCurrentSession(
+                  (session) => (session.memoryPrompt = ""),
+                );
+              }
+            }}
+          />,
+          <IconButton
+            key="copy"
+            icon={<CopyIcon />}
+            bordered
+            text={Locale.Chat.Config.SaveAs}
+            onClick={() => {
+              navigate(Path.Masks);
+              setTimeout(() => {
+                maskStore.create(session.mask);
+              }, 500);
+            }}
+          />,
+        ]}
+        // className="!bg-modal-mask"
+      >
+        <MaskConfig
+          mask={session.mask}
+          updateMask={(updater) => {
+            const mask = { ...session.mask };
+            updater(mask);
+            chatStore.updateCurrentSession((session) => (session.mask = mask));
+          }}
+          shouldSyncFromGlobal
+          extraListItems={
+            session.mask.modelConfig.sendMemory ? (
+              <ListItem
+                className="copyable"
+                title={`${Locale.Memory.Title} (${session.lastSummarizeIndex} of ${session.messages.length})`}
+                subTitle={session.memoryPrompt || Locale.Memory.EmptyContent}
+              ></ListItem>
+            ) : (
+              <></>
+            )
+          }
+        ></MaskConfig>
+      </Modal>
+    </div>
+  );
+}

app/containers/Chat/components/SessionItem.tsx

@@ -0,0 +1,182 @@
+import { Draggable } from "@hello-pangea/dnd";
+
+import Locale from "@/app/locales";
+import { Path } from "@/app/constant";
+import { Mask } from "@/app/store/mask";
+import { useRef, useEffect } from "react";
+import { usePathname } from "next/navigation";
+import DeleteChatIcon from "@/app/icons/deleteChatIcon.svg";
+
+import { getTime } from "@/app/utils";
+import DeleteIcon from "@/app/icons/deleteIcon.svg";
+import LogIcon from "@/app/icons/logIcon.svg";
+
+import HoverPopover from "@/app/components/HoverPopover";
+import Popover from "@/app/components/Popover";
+
+export default function SessionItem(props: {
+  onClick?: () => void;
+  onDelete?: () => void;
+  title: string;
+  count: number;
+  time: string;
+  selected: boolean;
+  id: string;
+  index: number;
+  narrow?: boolean;
+  mask: Mask;
+  isMobileScreen: boolean;
+}) {
+  const draggableRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    if (props.selected && draggableRef.current) {
+      draggableRef.current?.scrollIntoView({
+        block: "center",
+      });
+    }
+  }, [props.selected]);
+  const pathname = usePathname();
+
+  return (
+    <Draggable draggableId={`${props.id}`} index={props.index}>
+      {(provided) => (
+        <div
+          className={`
+              group/chat-menu-list relative flex p-3 items-center gap-2 self-stretch rounded-md mb-2 
+              border 
+              transition-colors duration-300 ease-in-out
+              bg-chat-menu-session-unselected-mobile border-chat-menu-session-unselected-mobile
+              md:bg-chat-menu-session-unselected md:border-chat-menu-session-unselected
+              ${
+                props.selected &&
+                (pathname === Path.Chat || pathname === Path.Home)
+                  ? `
+                    md:!bg-chat-menu-session-selected md:!border-chat-menu-session-selected
+                    !bg-chat-menu-session-selected-mobile !border-chat-menu-session-selected-mobile
+                    `
+                  : `md:hover:bg-chat-menu-session-hovered md:hover:chat-menu-session-hovered`
+              }
+            `}
+          onClick={props.onClick}
+          ref={(ele) => {
+            draggableRef.current = ele;
+            provided.innerRef(ele);
+          }}
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+          title={`${props.title}\n${Locale.ChatItem.ChatItemCount(
+            props.count,
+          )}`}
+        >
+          <div className="flex-shrink-0 ">
+            <LogIcon />
+          </div>
+          <div className="flex flex-col flex-1">
+            <div className={`flex justify-between items-center`}>
+              <div
+                className={` text-text-chat-menu-item-title text-sm-title line-clamp-1 flex-1`}
+              >
+                {props.title}
+              </div>
+              <div
+                className={`text-text-chat-menu-item-time text-sm group-hover/chat-menu-list:opacity-0 pl-3 hidden md:block`}
+              >
+                {getTime(props.time)}
+              </div>
+            </div>
+            <div className={`text-text-chat-menu-item-description text-sm`}>
+              {Locale.ChatItem.ChatItemCount(props.count)}
+            </div>
+          </div>
+          <div
+            className={`text-text-chat-menu-item-time text-sm pl-3 block md:hidden`}
+          >
+            {getTime(props.time)}
+          </div>
+          {props.isMobileScreen ? (
+            <Popover
+              content={
+                <div
+                  className={`
+                    flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer
+                    follow-parent-svg
+                    fill-none
+                    text-text-chat-menu-item-delete
+                `}
+                  onClickCapture={(e) => {
+                    props.onDelete?.();
+                  }}
+                >
+                  <DeleteChatIcon />
+                  <div className="flex-1 font-common text-actions-popover-menu-item ">
+                    {Locale.Chat.Actions.Delete}
+                  </div>
+                </div>
+              }
+              popoverClassName={`
+                    px-2 py-1 border-delete-chat-popover bg-delete-chat-popover-panel rounded-md shadow-delete-chat-popover-shadow 
+                `}
+              noArrow
+              placement="r"
+            >
+              <div
+                className={`
+                        cursor-pointer rounded-chat-img
+                        md:!absolute md:top-[50%] md:translate-y-[-50%] md:right-3 md:pointer-events-none md:opacity-0 
+                        md:group-hover/chat-menu-list:pointer-events-auto 
+                        md:group-hover/chat-menu-list:opacity-100
+                        md:hover:bg-select-hover 
+                        follow-parent-svg
+                        fill-none
+                        text-text-chat-menu-item-time
+                    `}
+              >
+                <DeleteIcon />
+              </div>
+            </Popover>
+          ) : (
+            <HoverPopover
+              content={
+                <div
+                  className={`
+                    flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer
+                    follow-parent-svg
+                    fill-none
+                    text-text-chat-menu-item-delete
+                `}
+                  onClickCapture={(e) => {
+                    props.onDelete?.();
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }}
+                >
+                  <DeleteChatIcon />
+                  <div className="flex-1 font-common text-actions-popover-menu-item text-text-chat-menu-item-delete">
+                    {Locale.Chat.Actions.Delete}
+                  </div>
+                </div>
+              }
+              popoverClassName={`
+                    px-2 py-1 border-delete-chat-popover bg-delete-chat-popover-panel rounded-md shadow-delete-chat-popover-shadow 
+                `}
+              noArrow
+              align="start"
+            >
+              <div
+                className={`
+                        cursor-pointer rounded-chat-img
+                        md:!absolute md:top-[50%] md:translate-y-[-50%] md:right-3 md:pointer-events-none md:opacity-0 
+                        md:group-hover/chat-menu-list:pointer-events-auto 
+                        md:group-hover/chat-menu-list:opacity-100
+                        md:hover:bg-select-hover 
+                    `}
+              >
+                <DeleteIcon />
+              </div>
+            </HoverPopover>
+          )}
+        </div>
+      )}
+    </Draggable>
+  );
+}

app/containers/Chat/index.module.scss

@@ -0,0 +1,609 @@
+@import "~@/app/styles/animation.scss";
+
+.attach-images {
+  position: absolute;
+  left: 30px;
+  bottom: 32px;
+  display: flex;
+}
+
+.attach-image {
+  cursor: default;
+  width: 64px;
+  height: 64px;
+  border: rgba($color: #888, $alpha: 0.2) 1px solid;
+  border-radius: 5px;
+  margin-right: 10px;
+  background-size: cover;
+  background-position: center;
+  background-color: var(--white);
+
+  .attach-image-mask {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: all ease 0.2s;
+  }
+
+  .attach-image-mask:hover {
+    opacity: 1;
+  }
+
+  .delete-image {
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+    float: right;
+    background-color: var(--white);
+  }
+}
+
+.chat-input-actions {
+  display: flex;
+  flex-wrap: wrap;
+
+  .chat-input-action {
+    display: inline-flex;
+    border-radius: 20px;
+    font-size: 12px;
+    background-color: var(--white);
+    color: var(--black);
+    border: var(--border-in-light);
+    padding: 4px 10px;
+    animation: slide-in ease 0.3s;
+    box-shadow: var(--card-shadow);
+    transition: width ease 0.3s;
+    align-items: center;
+    height: 16px;
+    width: var(--icon-width);
+    overflow: hidden;
+
+    &:not(:last-child) {
+      margin-right: 5px;
+    }
+
+    .text {
+      white-space: nowrap;
+      padding-left: 5px;
+      opacity: 0;
+      transform: translateX(-5px);
+      transition: all ease 0.3s;
+      pointer-events: none;
+    }
+
+    &:hover {
+      --delay: 0.5s;
+      width: var(--full-width);
+      transition-delay: var(--delay);
+
+      .text {
+        transition-delay: var(--delay);
+        opacity: 1;
+        transform: translate(0);
+      }
+    }
+
+    .text,
+    .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+.prompt-toast {
+  position: absolute;
+  bottom: -50px;
+  z-index: 999;
+  display: flex;
+  justify-content: center;
+  width: calc(100% - 40px);
+
+  .prompt-toast-inner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    background-color: var(--white);
+    color: var(--black);
+
+    border: var(--border-in-light);
+    box-shadow: var(--card-shadow);
+    padding: 10px 20px;
+    border-radius: 100px;
+
+    animation: slide-in-from-top ease 0.3s;
+
+    .prompt-toast-content {
+      margin-left: 10px;
+    }
+  }
+}
+
+.section-title {
+  font-size: 12px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .section-title-action {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.context-prompt {
+  .context-prompt-insert {
+    display: flex;
+    justify-content: center;
+    padding: 4px;
+    opacity: 0.2;
+    transition: all ease 0.3s;
+    background-color: rgba(0, 0, 0, 0);
+    cursor: pointer;
+    border-radius: 4px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+
+    &:hover {
+      opacity: 1;
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+  }
+
+  .context-prompt-row {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+
+    &:hover {
+      .context-drag {
+        opacity: 1;
+      }
+    }
+
+    .context-drag {
+      display: flex;
+      align-items: center;
+      opacity: 0.5;
+      transition: all ease 0.3s;
+    }
+
+    .context-role {
+      margin-right: 10px;
+    }
+
+    .context-content {
+      flex: 1;
+      max-width: 100%;
+      text-align: left;
+    }
+
+    .context-delete-button {
+      margin-left: 10px;
+    }
+  }
+
+  .context-prompt-button {
+    flex: 1;
+  }
+}
+
+.memory-prompt {
+  margin: 20px 0;
+
+  .memory-prompt-content {
+    background-color: var(--white);
+    color: var(--black);
+    border: var(--border-in-light);
+    border-radius: 10px;
+    padding: 10px;
+    font-size: 12px;
+    user-select: text;
+  }
+}
+
+.clear-context {
+  margin: 20px 0 0 0;
+  padding: 4px 0;
+
+  border-top: var(--border-in-light);
+  border-bottom: var(--border-in-light);
+  box-shadow: var(--card-shadow) inset;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  color: var(--black);
+  transition: all ease 0.3s;
+  cursor: pointer;
+  overflow: hidden;
+  position: relative;
+  font-size: 12px;
+
+  animation: slide-in ease 0.3s;
+
+  $linear: linear-gradient(to right,
+      rgba(0, 0, 0, 0),
+      rgba(0, 0, 0, 1),
+      rgba(0, 0, 0, 0));
+  mask-image: $linear;
+
+  @mixin show {
+    transform: translateY(0);
+    position: relative;
+    transition: all ease 0.3s;
+    opacity: 1;
+  }
+
+  @mixin hide {
+    transform: translateY(-50%);
+    position: absolute;
+    transition: all ease 0.1s;
+    opacity: 0;
+  }
+
+  &-tips {
+    @include show;
+    opacity: 0.5;
+  }
+
+  &-revert-btn {
+    color: var(--primary);
+    @include hide;
+  }
+
+  &:hover {
+    opacity: 1;
+    border-color: var(--primary);
+
+    .clear-context-tips {
+      @include hide;
+    }
+
+    .clear-context-revert-btn {
+      @include show;
+    }
+  }
+}
+
+.chat {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  // height: 100%;
+}
+
+.chat-body {
+  flex: 1;
+  overflow: auto;
+  overflow-x: hidden;
+  padding: 20px;
+  padding-bottom: 40px;
+  position: relative;
+  overscroll-behavior: none;
+}
+
+.chat-body-main-title {
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .chat-body-title {
+    text-align: center;
+  }
+}
+
+.chat-message {
+  display: flex;
+  flex-direction: row;
+
+  &:last-child {
+    animation: slide-in ease 0.3s;
+  }
+}
+
+.chat-message-user {
+  display: flex;
+  flex-direction: row-reverse;
+
+  .chat-message-header {
+    flex-direction: row-reverse;
+  }
+}
+
+.chat-message-header {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+
+  .chat-message-actions {
+    display: flex;
+    box-sizing: border-box;
+    font-size: 12px;
+    align-items: flex-end;
+    justify-content: space-between;
+    transition: all ease 0.3s;
+    transform: scale(0.9) translateY(5px);
+    margin: 0 10px;
+    opacity: 0;
+    pointer-events: none;
+
+    .chat-input-actions {
+      display: flex;
+      flex-wrap: nowrap;
+    }
+  }
+}
+
+.chat-message-container {
+  max-width: var(--message-max-width);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  &:hover {
+    .chat-message-edit {
+      opacity: 0.9;
+    }
+
+    .chat-message-actions {
+      opacity: 1;
+      pointer-events: all;
+      transform: scale(1) translateY(0);
+    }
+  }
+}
+
+.chat-message-user>.chat-message-container {
+  align-items: flex-end;
+}
+
+.chat-message-avatar {
+  position: relative;
+
+  .chat-message-edit {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: all ease 0.3s;
+
+    button {
+      padding: 7px;
+    }
+  }
+
+  /* Specific styles for iOS devices */
+  @media screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) {
+    @supports (-webkit-touch-callout: none) {
+      .chat-message-edit {
+        top: -8%;
+      }
+    }
+  }
+}
+
+.chat-message-status {
+  font-size: 12px;
+  color: #aaa;
+  line-height: 1.5;
+  margin-top: 5px;
+}
+
+.chat-message-item {
+  // box-sizing: border-box;
+  // max-width: 100%;
+  // margin-top: 10px;
+  // border-radius: 10px;
+  // background-color: rgba(0, 0, 0, 0.05);
+  // padding: 10px;
+  // font-size: 14px;
+  // user-select: text;
+  // word-break: break-word;
+  // border: var(--border-in-light);
+  // position: relative;
+  transition: all ease 0.3s;
+}
+
+.chat-message-item-image {
+  width: 100%;
+  margin-top: 10px;
+}
+
+.chat-message-item-images {
+  width: 100%;
+  display: grid;
+  justify-content: left;
+  grid-gap: 10px;
+  grid-template-columns: repeat(var(--image-count), auto);
+  margin-top: 10px;
+}
+
+.chat-message-item-image-multi {
+  object-fit: cover;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.chat-message-item-image,
+.chat-message-item-image-multi {
+  box-sizing: border-box;
+  border-radius: 10px;
+  border: rgba($color: #888, $alpha: 0.2) 1px solid;
+}
+
+
+@media only screen and (max-width: 600px) {
+  $calc-image-width: calc(100vw/3*2/var(--image-count));
+
+  .chat-message-item-image-multi {
+    width: $calc-image-width;
+    height: $calc-image-width;
+  }
+  
+  .chat-message-item-image {
+    max-width: calc(100vw/3*2);
+  }
+}
+
+@media screen and (min-width: 600px) {
+  $max-image-width: calc(calc(1200px - var(--sidebar-width))/3*2/var(--image-count));
+  $image-width: calc(calc(var(--window-width) - var(--sidebar-width))/3*2/var(--image-count));
+
+  .chat-message-item-image-multi {
+    width: $image-width;
+    height: $image-width;
+    max-width: $max-image-width;
+    max-height: $max-image-width;
+  }
+
+  .chat-message-item-image {
+    max-width: calc(calc(1200px - var(--sidebar-width))/3*2);
+  }
+}
+
+// .chat-message-action-date {
+//   // font-size: 12px;
+//   // opacity: 0.2;
+//   // white-space: nowrap;
+//   // transition: all ease 0.6s;
+//   // color: var(--black);
+//   // text-align: right;
+//   // width: 100%;
+//   // box-sizing: border-box;
+//   // padding-right: 10px;
+//   // pointer-events: none;
+//   // z-index: 1;
+// }
+
+.chat-message-user>.chat-message-container>.chat-message-item {
+  background-color: var(--second);
+
+  &:hover {
+    min-width: 0;
+  }
+}
+
+.chat-input-panel {
+  // position: relative;
+  // width: 100%;
+  // padding: 20px;
+  // padding-top: 10px;
+  // box-sizing: border-box;
+  // flex-direction: column;
+  // border-top: var(--border-in-light);
+  // box-shadow: var(--card-shadow);
+
+  .chat-input-actions {
+    .chat-input-action {
+      margin-bottom: 10px;
+    }
+  }
+}
+
+@mixin single-line {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.prompt-hint {
+  color:var(--btn-default-text);
+  padding: 6px 10px;
+  border: transparent 1px solid;
+  margin: 4px;
+  border-radius: 8px;
+
+  &:not(:last-child) {
+    margin-top: 0;
+  }
+
+  .hint-title {
+    font-size: 12px;
+    font-weight: bolder;
+
+    @include single-line();
+  }
+
+  .hint-content {
+    font-size: 12px;
+
+    @include single-line();
+  }
+
+  &-selected,
+  &:hover {
+    border-color: var(--primary);
+  }
+}
+
+// .chat-input-panel-inner {
+//   cursor: text;
+//   display: flex;
+//   flex: 1;
+//   border-radius: 10px;
+//   border: var(--border-in-light);
+// }
+
+.chat-input-panel-inner-attach {
+  padding-bottom: 80px;
+}
+
+.chat-input-panel-inner:has(.chat-input:focus) {
+  border: 1px solid var(--primary);
+}
+
+.chat-input {
+  height: 100%;
+  width: 100%;
+  border-radius: 10px;
+  border: none;
+  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03);
+  background-color: var(--white);
+  color: var(--black);
+  font-family: inherit;
+  padding: 10px 90px 10px 14px;
+  resize: none;
+  outline: none;
+  box-sizing: border-box;
+  min-height: 68px;
+}
+
+.chat-input:focus {}
+
+.chat-input-send {
+  background-color: var(--primary);
+  color: white;
+
+  position: absolute;
+  right: 30px;
+  bottom: 32px;
+}
+
+@media only screen and (max-width: 600px) {
+  .chat-input {
+    font-size: 16px;
+  }
+
+  .chat-input-send {
+    bottom: 30px;
+  }
+}

app/containers/Chat/index.tsx

@@ -0,0 +1,148 @@
+import {
+  DragDropContext,
+  Droppable,
+  OnDragEndResponder,
+} from "@hello-pangea/dnd";
+
+import { useAppConfig, useChatStore } from "@/app/store";
+
+import Locale from "@/app/locales";
+import { Path } from "@/app/constant";
+import { useEffect } from "react";
+
+import AddIcon from "@/app/icons/addIcon.svg";
+import NextChatTitle from "@/app/icons/nextchatTitle.svg";
+
+import MenuLayout from "@/app/components/MenuLayout";
+import Panel from "./ChatPanel";
+import Modal from "@/app/components/Modal";
+import SessionItem from "./components/SessionItem";
+import { usePathname, useRouter } from "next/navigation";
+
+export default MenuLayout(function SessionList(props) {
+  const { setShowPanel } = props;
+
+  const [sessions, selectedIndex, selectSession, moveSession] = useChatStore(
+    (state) => [
+      state.sessions,
+      state.currentSessionIndex,
+      state.selectSession,
+      state.moveSession,
+    ],
+  );
+  const config = useAppConfig();
+
+  const { isMobileScreen } = config;
+
+  const chatStore = useChatStore();
+  const router = useRouter();
+  const pathname = usePathname();
+  useEffect(() => {
+    setShowPanel?.(pathname === Path.Chat);
+  }, [pathname]);
+
+  const onDragEnd: OnDragEndResponder = (result) => {
+    const { destination, source } = result;
+    if (!destination) {
+      return;
+    }
+
+    if (
+      destination.droppableId === source.droppableId &&
+      destination.index === source.index
+    ) {
+      return;
+    }
+    moveSession(source.index, destination.index);
+  };
+
+  return (
+    <div
+      className={`
+      h-[100%] flex flex-col
+      md:px-0
+    `}
+    >
+      <div data-tauri-drag-region>
+        <div
+          className={`
+            flex items-center justify-between
+            py-6 max-md:box-content max-md:h-0
+            md:py-7
+          `}
+          data-tauri-drag-region
+        >
+          <div className="">
+            <NextChatTitle />
+          </div>
+          <div
+            className="cursor-pointer "
+            onClick={() => {
+              if (config.dontShowMaskSplashScreen) {
+                chatStore.newSession();
+                // navigate(Path.Chat);
+                router.push(Path.Chat);
+              } else {
+                // navigate(Path.NewChat);
+                router.push(Path.NewChat);
+              }
+            }}
+          >
+            <AddIcon />
+          </div>
+        </div>
+        <div
+          className={`pb-3 text-sm sm:text-sm-mobile text-text-chat-header-subtitle`}
+        >
+          Build your own AI assistant.
+        </div>
+      </div>
+
+      <div className={`flex-1 overflow-y-auto max-md:pb-chat-panel-mobile `}>
+        <DragDropContext onDragEnd={onDragEnd}>
+          <Droppable droppableId="chat-list">
+            {(provided) => (
+              <div
+                ref={provided.innerRef}
+                {...provided.droppableProps}
+                className={`w-[100%]`}
+              >
+                {sessions.map((item, i) => (
+                  <SessionItem
+                    title={item.topic}
+                    time={new Date(item.lastUpdate).toLocaleString()}
+                    count={item.messages.length}
+                    key={item.id}
+                    id={item.id}
+                    index={i}
+                    selected={i === selectedIndex}
+                    onClick={() => {
+                      // navigate(Path.Chat);
+                      selectSession(i);
+                      router.push(Path.Chat);
+                    }}
+                    onDelete={async () => {
+                      if (
+                        await Modal.warn({
+                          okText: Locale.ChatItem.DeleteOkBtn,
+                          cancelText: Locale.ChatItem.DeleteCancelBtn,
+                          title: Locale.ChatItem.DeleteTitle,
+                          content: Locale.ChatItem.DeleteContent,
+                        })
+                      ) {
+                        chatStore.deleteSession(i);
+                      }
+                    }}
+                    mask={item.mask}
+                    isMobileScreen={isMobileScreen}
+                  />
+                ))}
+                {provided.placeholder}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
+      </div>
+    </div>
+  );
+}, Panel);

app/containers/Settings/SettingPanel.tsx

@@ -0,0 +1,137 @@
+import { useEffect, useMemo } from "react";
+import { useAccessStore, useAppConfig } from "@/app/store";
+import Locale from "@/app/locales";
+
+import { Path } from "@/app/constant";
+import List from "@/app/components/List";
+import { useNavigate } from "react-router-dom";
+import { getClientConfig } from "@/app/config/client";
+import Card from "@/app/components/Card";
+import SettingHeader from "./components/SettingHeader";
+import { MenuWrapperInspectProps } from "@/app/components/MenuLayout";
+import SyncItems from "./components/SyncItems";
+import DangerItems from "./components/DangerItems";
+import AppSetting from "./components/AppSetting";
+import MaskSetting from "./components/MaskSetting";
+import PromptSetting from "./components/PromptSetting";
+import ProviderSetting from "./components/ProviderSetting";
+import ModelConfigList from "./components/ModelSetting";
+
+export default function Settings(props: MenuWrapperInspectProps) {
+  const { setShowPanel, id } = props;
+
+  const navigate = useNavigate();
+  const accessStore = useAccessStore();
+  const config = useAppConfig();
+
+  const { isMobileScreen } = config;
+
+  useEffect(() => {
+    const keydownEvent = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        navigate(Path.Home);
+      }
+    };
+    if (clientConfig?.isApp) {
+      // Force to set custom endpoint to true if it's app
+      accessStore.update((state) => {
+        state.useCustomConfig = true;
+      });
+    }
+    document.addEventListener("keydown", keydownEvent);
+    return () => {
+      document.removeEventListener("keydown", keydownEvent);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const clientConfig = useMemo(() => getClientConfig(), []);
+
+  const cardClassName = "mb-6 md:mb-8 last:mb-0";
+
+  const itemMap = {
+    [Locale.Settings.GeneralSettings]: (
+      <>
+        <Card className={cardClassName} title={Locale.Settings.Basic.Title}>
+          <AppSetting />
+        </Card>
+
+        <Card className={cardClassName} title={Locale.Settings.Mask.Title}>
+          <MaskSetting />
+        </Card>
+        <Card className={cardClassName} title={Locale.Settings.Prompt.Title}>
+          <PromptSetting />
+        </Card>
+        <Card className={cardClassName} title={Locale.Settings.Provider.Title}>
+          <ProviderSetting />
+        </Card>
+
+        <Card className={cardClassName} title={Locale.Settings.Danger.Title}>
+          <DangerItems />
+        </Card>
+      </>
+    ),
+    [Locale.Settings.ModelSettings]: (
+      <Card className={cardClassName} title={Locale.Settings.Models.Title}>
+        <List
+          widgetStyle={{
+            // selectClassName: "min-w-select-mobile-lg",
+            selectClassName: "min-w-select-mobile md:min-w-select",
+            inputClassName: "md:min-w-select",
+            rangeClassName: "md:min-w-select",
+            rangeNextLine: isMobileScreen,
+          }}
+        >
+          <ModelConfigList
+            modelConfig={config.modelConfig}
+            updateConfig={(updater) => {
+              const modelConfig = { ...config.modelConfig };
+              updater(modelConfig);
+              config.update((config) => (config.modelConfig = modelConfig));
+            }}
+          />
+        </List>
+      </Card>
+    ),
+    [Locale.Settings.DataSettings]: (
+      <Card className={cardClassName} title={Locale.Settings.Sync.Title}>
+        <SyncItems />
+      </Card>
+    ),
+  };
+
+  return (
+    <div
+      className={`
+        flex flex-col overflow-hidden bg-settings-panel 
+        h-setting-panel-mobile
+        md:h-[100%] md:mr-2.5 md:rounded-md
+      `}
+    >
+      <SettingHeader
+        isMobileScreen={isMobileScreen}
+        goback={() => setShowPanel?.(false)}
+      />
+      <div
+        className={`
+          max-md:w-[100%]
+          px-4 py-5
+          md:px-6 md:py-8
+          flex items-start justify-center
+          overflow-y-auto
+        `}
+      >
+        <div
+          className={`
+            w-full
+            max-w-screen-md
+            !overflow-x-hidden 
+            overflow-y-auto
+          `}
+        >
+          {itemMap[id] || null}
+        </div>
+      </div>
+    </div>
+  );
+}

app/containers/Settings/components/AppSetting.tsx

@@ -0,0 +1,200 @@
+import LoadingIcon from "@/app/icons/three-dots.svg";
+import ResetIcon from "@/app/icons/reload.svg";
+
+import styles from "../index.module.scss";
+
+import { useEffect, useState } from "react";
+import { Avatar, AvatarPicker } from "@/app/components/emoji";
+import { Popover } from "@/app/components/ui-lib";
+import Locale, {
+  ALL_LANG_OPTIONS,
+  AllLangs,
+  changeLang,
+  getLang,
+} from "@/app/locales";
+import Link from "next/link";
+import { IconButton } from "@/app/components/button";
+import { useUpdateStore } from "@/app/store/update";
+import {
+  SubmitKey,
+  Theme,
+  ThemeConfig,
+  useAppConfig,
+} from "@/app/store/config";
+import { getClientConfig } from "@/app/config/client";
+import { RELEASE_URL, UPDATE_URL } from "@/app/constant";
+import List, { ListItem } from "@/app/components/List";
+import Select from "@/app/components/Select";
+import SlideRange from "@/app/components/SlideRange";
+import Switch from "@/app/components/Switch";
+
+export interface AppSettingProps {}
+
+export default function AppSetting(props: AppSettingProps) {
+  const [checkingUpdate, setCheckingUpdate] = useState(false);
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+
+  const updateStore = useUpdateStore();
+  const config = useAppConfig();
+  const { update: updateConfig, isMobileScreen } = config;
+
+  const currentVersion = updateStore.formatVersion(updateStore.version);
+  const remoteId = updateStore.formatVersion(updateStore.remoteVersion);
+  const hasNewVersion = currentVersion !== remoteId;
+  const updateUrl = getClientConfig()?.isApp ? RELEASE_URL : UPDATE_URL;
+
+  function checkUpdate(force = false) {
+    setCheckingUpdate(true);
+    updateStore.getLatestVersion(force).then(() => {
+      setCheckingUpdate(false);
+    });
+
+    console.log("[Update] local version ", updateStore.version);
+    console.log("[Update] remote version ", updateStore.remoteVersion);
+  }
+
+  useEffect(() => {
+    // checks per minutes
+    checkUpdate();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <List
+      widgetStyle={{
+        selectClassName: "min-w-select-mobile md:min-w-select",
+        inputClassName: "md:min-w-select",
+        rangeClassName: "md:min-w-select",
+        rangeNextLine: isMobileScreen,
+      }}
+    >
+      <ListItem title={Locale.Settings.Avatar}>
+        <Popover
+          onClose={() => setShowEmojiPicker(false)}
+          content={
+            <AvatarPicker
+              onEmojiClick={(avatar: string) => {
+                updateConfig((config) => (config.avatar = avatar));
+                setShowEmojiPicker(false);
+              }}
+            />
+          }
+          open={showEmojiPicker}
+        >
+          <div
+            className={styles.avatar}
+            onClick={() => {
+              setShowEmojiPicker(!showEmojiPicker);
+            }}
+          >
+            <Avatar avatar={config.avatar} />
+          </div>
+        </Popover>
+      </ListItem>
+
+      <ListItem
+        title={Locale.Settings.Update.Version(currentVersion ?? "unknown")}
+        subTitle={
+          checkingUpdate
+            ? Locale.Settings.Update.IsChecking
+            : hasNewVersion
+            ? Locale.Settings.Update.FoundUpdate(remoteId ?? "ERROR")
+            : Locale.Settings.Update.IsLatest
+        }
+      >
+        {checkingUpdate ? (
+          <LoadingIcon />
+        ) : hasNewVersion ? (
+          <Link href={updateUrl} target="_blank" className="link">
+            {Locale.Settings.Update.GoToUpdate}
+          </Link>
+        ) : (
+          <IconButton
+            icon={<ResetIcon />}
+            text={Locale.Settings.Update.CheckUpdate}
+            onClick={() => checkUpdate(true)}
+          />
+        )}
+      </ListItem>
+
+      <ListItem title={Locale.Settings.SendKey}>
+        <Select
+          value={config.submitKey}
+          options={Object.values(SubmitKey).map((v) => ({
+            value: v,
+            label: v,
+          }))}
+          onSelect={(v) => {
+            updateConfig((config) => (config.submitKey = v));
+          }}
+        />
+      </ListItem>
+
+      <ListItem title={Locale.Settings.Theme}>
+        <Select
+          value={config.theme}
+          options={Object.entries(ThemeConfig).map(([k, t]) => ({
+            value: k as Theme,
+            label: t.title,
+            icon: <t.icon />,
+          }))}
+          onSelect={(e) => {
+            updateConfig((config) => (config.theme = e));
+          }}
+        />
+      </ListItem>
+
+      <ListItem title={Locale.Settings.Lang.Name}>
+        <Select
+          value={getLang()}
+          options={AllLangs.map((lang) => ({
+            value: lang,
+            label: ALL_LANG_OPTIONS[lang],
+          }))}
+          onSelect={(e) => {
+            changeLang(e);
+          }}
+        />
+      </ListItem>
+
+      <ListItem
+        title={Locale.Settings.FontSize.Title}
+        subTitle={Locale.Settings.FontSize.SubTitle}
+      >
+        <SlideRange
+          value={config.fontSize}
+          range={{
+            start: 12,
+            stroke: 28,
+          }}
+          step={1}
+          onSlide={(e) => updateConfig((config) => (config.fontSize = e))}
+        ></SlideRange>
+      </ListItem>
+
+      <ListItem
+        title={Locale.Settings.AutoGenerateTitle.Title}
+        subTitle={Locale.Settings.AutoGenerateTitle.SubTitle}
+      >
+        <Switch
+          value={config.enableAutoGenerateTitle}
+          onChange={(e) =>
+            updateConfig((config) => (config.enableAutoGenerateTitle = e))
+          }
+        />
+      </ListItem>
+
+      <ListItem
+        title={Locale.Settings.SendPreviewBubble.Title}
+        subTitle={Locale.Settings.SendPreviewBubble.SubTitle}
+      >
+        <Switch
+          value={config.sendPreviewBubble}
+          onChange={(e) =>
+            updateConfig((config) => (config.sendPreviewBubble = e))
+          }
+        />
+      </ListItem>
+    </List>
+  );
+}

app/containers/Settings/components/DangerItems.tsx

@@ -0,0 +1,153 @@
+import { IconButton } from "@/app/components/button";
+import { showConfirm } from "@/app/components/ui-lib";
+import { useChatStore } from "@/app/store/chat";
+import { useAppConfig } from "@/app/store/config";
+import Locale from "@/app/locales";
+import { useAccessStore } from "@/app/store/access";
+import { useEffect, useMemo, useState } from "react";
+import { getClientConfig } from "@/app/config/client";
+import { OPENAI_BASE_URL, ServiceProvider } from "@/app/constant";
+import { useUpdateStore } from "@/app/store/update";
+
+import ResetIcon from "@/app/icons/reload.svg";
+import List, { ListItem } from "@/app/components/List";
+import Input from "@/app/components/Input";
+import Btn from "@/app/components/Btn";
+
+export default function DangerItems() {
+  const chatStore = useChatStore();
+  const appConfig = useAppConfig();
+  const accessStore = useAccessStore();
+  const updateStore = useUpdateStore();
+  const { isMobileScreen } = appConfig;
+
+  const enabledAccessControl = useMemo(
+    () => accessStore.enabledAccessControl(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const clientConfig = useMemo(() => getClientConfig(), []);
+
+  const showAccessCode = enabledAccessControl && !clientConfig?.isApp;
+
+  const shouldHideBalanceQuery = useMemo(() => {
+    const isOpenAiUrl = accessStore.openaiUrl.includes(OPENAI_BASE_URL);
+    return (
+      accessStore.hideBalanceQuery ||
+      isOpenAiUrl ||
+      accessStore.provider === ServiceProvider.Azure
+    );
+  }, [
+    accessStore.hideBalanceQuery,
+    accessStore.openaiUrl,
+    accessStore.provider,
+  ]);
+
+  const [loadingUsage, setLoadingUsage] = useState(false);
+  const usage = {
+    used: updateStore.used,
+    subscription: updateStore.subscription,
+  };
+
+  function checkUsage(force = false) {
+    if (shouldHideBalanceQuery) {
+      return;
+    }
+
+    setLoadingUsage(true);
+    updateStore.updateUsage(force).finally(() => {
+      setLoadingUsage(false);
+    });
+  }
+
+  const showUsage = accessStore.isAuthorized();
+
+  useEffect(() => {
+    showUsage && checkUsage();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <List
+      widgetStyle={{
+        selectClassName: "min-w-select-mobile md:min-w-select",
+        inputClassName: "md:min-w-select",
+        rangeClassName: "md:min-w-select",
+        rangeNextLine: isMobileScreen,
+        inputNextLine: isMobileScreen,
+      }}
+    >
+      {showAccessCode && (
+        <ListItem
+          title={Locale.Settings.Access.AccessCode.Title}
+          subTitle={Locale.Settings.Access.AccessCode.SubTitle}
+        >
+          <Input
+            value={accessStore.accessCode}
+            type="password"
+            placeholder={Locale.Settings.Access.AccessCode.Placeholder}
+            onChange={(e) => {
+              accessStore.update((access) => (access.accessCode = e));
+            }}
+          />
+        </ListItem>
+      )}
+
+      {!shouldHideBalanceQuery && !clientConfig?.isApp ? (
+        <ListItem
+          title={Locale.Settings.Usage.Title}
+          subTitle={
+            showUsage
+              ? loadingUsage
+                ? Locale.Settings.Usage.IsChecking
+                : Locale.Settings.Usage.SubTitle(
+                    usage?.used ?? "[?]",
+                    usage?.subscription ?? "[?]",
+                  )
+              : Locale.Settings.Usage.NoAccess
+          }
+        >
+          {!showUsage || loadingUsage ? (
+            <div />
+          ) : (
+            <IconButton
+              icon={<ResetIcon />}
+              text={Locale.Settings.Usage.Check}
+              onClick={() => checkUsage(true)}
+            />
+          )}
+        </ListItem>
+      ) : null}
+
+      <ListItem
+        title={Locale.Settings.Danger.Reset.Title}
+        subTitle={Locale.Settings.Danger.Reset.SubTitle}
+      >
+        <Btn
+          text={Locale.Settings.Danger.Reset.Action}
+          onClick={async () => {
+            if (await showConfirm(Locale.Settings.Danger.Reset.Confirm)) {
+              appConfig.reset();
+            }
+          }}
+          type="danger"
+        />
+      </ListItem>
+      <ListItem
+        title={Locale.Settings.Danger.Clear.Title}
+        subTitle={Locale.Settings.Danger.Clear.SubTitle}
+      >
+        <Btn
+          text={Locale.Settings.Danger.Clear.Action}
+          onClick={async () => {
+            if (await showConfirm(Locale.Settings.Danger.Clear.Confirm)) {
+              chatStore.clearAllData();
+            }
+          }}
+          type="danger"
+        />
+      </ListItem>
+    </List>
+  );
+}

app/containers/Settings/components/MaskConfig.tsx

@@ -0,0 +1,162 @@
+import { useState } from "react";
+import List, { ListItem } from "@/app/components/List";
+import { ContextPrompts, MaskAvatar } from "@/app/components/mask";
+import { Path } from "@/app/constant";
+import { ModelConfig, useAppConfig } from "@/app/store/config";
+import { Mask } from "@/app/store/mask";
+import { Updater } from "@/app/typing";
+import { copyToClipboard } from "@/app/utils";
+import Locale from "@/app/locales";
+import { Popover, showConfirm } from "@/app/components/ui-lib";
+import { AvatarPicker } from "@/app/components/emoji";
+import ModelSetting from "@/app/containers/Settings/components/ModelSetting";
+import { IconButton } from "@/app/components/button";
+
+import CopyIcon from "@/app/icons/copy.svg";
+import Switch from "@/app/components/Switch";
+import Input from "@/app/components/Input";
+
+export default function MaskConfig(props: {
+  mask: Mask;
+  updateMask: Updater<Mask>;
+  extraListItems?: JSX.Element;
+  readonly?: boolean;
+  shouldSyncFromGlobal?: boolean;
+}) {
+  const [showPicker, setShowPicker] = useState(false);
+
+  const updateConfig = (updater: (config: ModelConfig) => void) => {
+    if (props.readonly) return;
+
+    const config = { ...props.mask.modelConfig };
+    updater(config);
+    props.updateMask((mask) => {
+      mask.modelConfig = config;
+      // if user changed current session mask, it will disable auto sync
+      mask.syncGlobalConfig = false;
+    });
+  };
+
+  const copyMaskLink = () => {
+    const maskLink = `${location.protocol}//${location.host}/#${Path.NewChat}?mask=${props.mask.id}`;
+    copyToClipboard(maskLink);
+  };
+
+  const globalConfig = useAppConfig();
+
+  const { isMobileScreen } = globalConfig;
+
+  return (
+    <>
+      <ContextPrompts
+        context={props.mask.context}
+        updateContext={(updater) => {
+          const context = props.mask.context.slice();
+          updater(context);
+          props.updateMask((mask) => (mask.context = context));
+        }}
+      />
+
+      <List
+        widgetStyle={{
+          rangeNextLine: isMobileScreen,
+        }}
+      >
+        <ListItem title={Locale.Mask.Config.Avatar}>
+          <Popover
+            content={
+              <AvatarPicker
+                onEmojiClick={(emoji) => {
+                  props.updateMask((mask) => (mask.avatar = emoji));
+                  setShowPicker(false);
+                }}
+              ></AvatarPicker>
+            }
+            open={showPicker}
+            onClose={() => setShowPicker(false)}
+          >
+            <div
+              onClick={() => setShowPicker(true)}
+              style={{ cursor: "pointer" }}
+            >
+              <MaskAvatar
+                avatar={props.mask.avatar}
+                model={props.mask.modelConfig.model}
+              />
+            </div>
+          </Popover>
+        </ListItem>
+        <ListItem title={Locale.Mask.Config.Name}>
+          <Input
+            type="text"
+            value={props.mask.name}
+            onChange={(e) =>
+              props.updateMask((mask) => {
+                mask.name = e;
+              })
+            }
+          ></Input>
+        </ListItem>
+        <ListItem
+          title={Locale.Mask.Config.HideContext.Title}
+          subTitle={Locale.Mask.Config.HideContext.SubTitle}
+        >
+          <Switch
+            value={!!props.mask.hideContext}
+            onChange={(e) => {
+              props.updateMask((mask) => {
+                mask.hideContext = e;
+              });
+            }}
+          ></Switch>
+        </ListItem>
+
+        {!props.shouldSyncFromGlobal ? (
+          <ListItem
+            title={Locale.Mask.Config.Share.Title}
+            subTitle={Locale.Mask.Config.Share.SubTitle}
+          >
+            <IconButton
+              icon={<CopyIcon />}
+              text={Locale.Mask.Config.Share.Action}
+              onClick={copyMaskLink}
+            />
+          </ListItem>
+        ) : null}
+
+        {props.shouldSyncFromGlobal ? (
+          <ListItem
+            title={Locale.Mask.Config.Sync.Title}
+            subTitle={Locale.Mask.Config.Sync.SubTitle}
+          >
+            <Switch
+              value={!!props.mask.syncGlobalConfig}
+              onChange={async (e) => {
+                const checked = e;
+                if (
+                  checked &&
+                  (await showConfirm(Locale.Mask.Config.Sync.Confirm))
+                ) {
+                  props.updateMask((mask) => {
+                    mask.syncGlobalConfig = checked;
+                    mask.modelConfig = { ...globalConfig.modelConfig };
+                  });
+                } else if (!checked) {
+                  props.updateMask((mask) => {
+                    mask.syncGlobalConfig = checked;
+                  });
+                }
+              }}
+            />
+          </ListItem>
+        ) : null}
+
+        <ModelSetting
+          modelConfig={{ ...props.mask.modelConfig }}
+          updateConfig={updateConfig}
+        />
+        {props.extraListItems}
+      </List>
+    </>
+  );
+}

app/containers/Settings/components/MaskSetting.tsx

@@ -0,0 +1,39 @@
+import List, { ListItem } from "@/app/components/List";
+import Switch from "@/app/components/Switch";
+import Locale from "@/app/locales";
+import { useAppConfig } from "@/app/store/config";
+
+export interface MaskSettingProps {}
+
+export default function MaskSetting(props: MaskSettingProps) {
+  const config = useAppConfig();
+  const updateConfig = config.update;
+
+  return (
+    <List>
+      <ListItem
+        title={Locale.Settings.Mask.Splash.Title}
+        subTitle={Locale.Settings.Mask.Splash.SubTitle}
+      >
+        <Switch
+          value={!config.dontShowMaskSplashScreen}
+          onChange={(e) =>
+            updateConfig((config) => (config.dontShowMaskSplashScreen = !e))
+          }
+        />
+      </ListItem>
+
+      <ListItem
+        title={Locale.Settings.Mask.Builtin.Title}
+        subTitle={Locale.Settings.Mask.Builtin.SubTitle}
+      >
+        <Switch
+          value={config.hideBuiltinMasks}
+          onChange={(e) =>
+            updateConfig((config) => (config.hideBuiltinMasks = e))
+          }
+        />
+      </ListItem>
+    </List>
+  );
+}

app/containers/Settings/components/ModelSetting.tsx

@@ -0,0 +1,220 @@
+import { ListItem } from "@/app/components/List";
+import {
+  ModalConfigValidator,
+  ModelConfig,
+  useAppConfig,
+} from "@/app/store/config";
+import { useAllModels } from "@/app/utils/hooks";
+import Locale from "@/app/locales";
+import Select from "@/app/components/Select";
+import SlideRange from "@/app/components/SlideRange";
+import Switch from "@/app/components/Switch";
+import Input from "@/app/components/Input";
+
+export default function ModelSetting(props: {
+  modelConfig: ModelConfig;
+  updateConfig: (updater: (config: ModelConfig) => void) => void;
+}) {
+  const allModels = useAllModels();
+  const { isMobileScreen } = useAppConfig();
+
+  return (
+    <>
+      <ListItem title={Locale.Settings.Model}>
+        <Select
+          value={props.modelConfig.model}
+          options={allModels
+            .filter((v) => v.available)
+            .map((v) => ({
+              value: v.name,
+              label: `${v.displayName}(${v.provider?.providerName})`,
+            }))}
+          onSelect={(e) => {
+            props.updateConfig(
+              (config) => (config.model = ModalConfigValidator.model(e)),
+            );
+          }}
+        />
+      </ListItem>
+      <ListItem
+        title={Locale.Settings.Temperature.Title}
+        subTitle={Locale.Settings.Temperature.SubTitle}
+      >
+        <SlideRange
+          value={props.modelConfig.temperature}
+          range={{
+            start: 0,
+            stroke: 1,
+          }}
+          step={0.1}
+          onSlide={(e) => {
+            props.updateConfig(
+              (config) =>
+                (config.temperature = ModalConfigValidator.temperature(e)),
+            );
+          }}
+        ></SlideRange>
+      </ListItem>
+      <ListItem
+        title={Locale.Settings.TopP.Title}
+        subTitle={Locale.Settings.TopP.SubTitle}
+      >
+        <SlideRange
+          value={props.modelConfig.top_p ?? 1}
+          range={{
+            start: 0,
+            stroke: 1,
+          }}
+          step={0.1}
+          onSlide={(e) => {
+            props.updateConfig(
+              (config) => (config.top_p = ModalConfigValidator.top_p(e)),
+            );
+          }}
+        ></SlideRange>
+      </ListItem>
+      <ListItem
+        title={Locale.Settings.MaxTokens.Title}
+        subTitle={Locale.Settings.MaxTokens.SubTitle}
+      >
+        <Input
+          type="number"
+          min={1024}
+          max={512000}
+          value={props.modelConfig.max_tokens}
+          onChange={(e) =>
+            props.updateConfig(
+              (config) =>
+                (config.max_tokens = ModalConfigValidator.max_tokens(e)),
+            )
+          }
+        ></Input>
+      </ListItem>
+
+      {props.modelConfig.model.startsWith("gemini") ? null : (
+        <>
+          <ListItem
+            title={Locale.Settings.PresencePenalty.Title}
+            subTitle={Locale.Settings.PresencePenalty.SubTitle}
+          >
+            <SlideRange
+              value={props.modelConfig.presence_penalty}
+              range={{
+                start: -2,
+                stroke: 4,
+              }}
+              step={0.1}
+              onSlide={(e) => {
+                props.updateConfig(
+                  (config) =>
+                    (config.presence_penalty =
+                      ModalConfigValidator.presence_penalty(e)),
+                );
+              }}
+            ></SlideRange>
+          </ListItem>
+
+          <ListItem
+            title={Locale.Settings.FrequencyPenalty.Title}
+            subTitle={Locale.Settings.FrequencyPenalty.SubTitle}
+          >
+            <SlideRange
+              value={props.modelConfig.frequency_penalty}
+              range={{
+                start: -2,
+                stroke: 4,
+              }}
+              step={0.1}
+              onSlide={(e) => {
+                props.updateConfig(
+                  (config) =>
+                    (config.frequency_penalty =
+                      ModalConfigValidator.frequency_penalty(e)),
+                );
+              }}
+            ></SlideRange>
+          </ListItem>
+
+          <ListItem
+            title={Locale.Settings.InjectSystemPrompts.Title}
+            subTitle={Locale.Settings.InjectSystemPrompts.SubTitle}
+          >
+            <Switch
+              value={props.modelConfig.enableInjectSystemPrompts}
+              onChange={(e) =>
+                props.updateConfig(
+                  (config) => (config.enableInjectSystemPrompts = e),
+                )
+              }
+            />
+          </ListItem>
+
+          <ListItem
+            title={Locale.Settings.InputTemplate.Title}
+            subTitle={Locale.Settings.InputTemplate.SubTitle}
+            nextline={isMobileScreen}
+            validator={(v: string) => {
+              if (!v.includes("{{input}}")) {
+                return {
+                  error: true,
+                  message: Locale.Settings.InputTemplate.Error,
+                };
+              }
+
+              return { error: false };
+            }}
+          >
+            <Input
+              type="text"
+              value={props.modelConfig.template}
+              onChange={(e = "") =>
+                props.updateConfig((config) => (config.template = e))
+              }
+            ></Input>
+          </ListItem>
+        </>
+      )}
+      <ListItem
+        title={Locale.Settings.HistoryCount.Title}
+        subTitle={Locale.Settings.HistoryCount.SubTitle}
+      >
+        <SlideRange
+          value={props.modelConfig.historyMessageCount}
+          range={{
+            start: 0,
+            stroke: 64,
+          }}
+          step={1}
+          onSlide={(e) => {
+            props.updateConfig((config) => (config.historyMessageCount = e));
+          }}
+        ></SlideRange>
+      </ListItem>
+
+      <ListItem
+        title={Locale.Settings.CompressThreshold.Title}
+        subTitle={Locale.Settings.CompressThreshold.SubTitle}
+      >
+        <Input
+          type="number"
+          min={500}
+          max={4000}
+          value={props.modelConfig.compressMessageLengthThreshold}
+          onChange={(e) =>
+            props.updateConfig(
+              (config) => (config.compressMessageLengthThreshold = e),
+            )
+          }
+        ></Input>
+      </ListItem>
+      <ListItem title={Locale.Memory.Title} subTitle={Locale.Memory.Send}>
+        <Switch
+          value={props.modelConfig.sendMemory}
+          onChange={(e) =>
+            props.updateConfig((config) => (config.sendMemory = e))
+          }
+        />
+      </ListItem>
+    </>
+  );
+}

app/containers/Settings/components/PromptSetting.tsx

@@ -0,0 +1,63 @@
+import { useState } from "react";
+import UserPromptModal from "./UserPromptModal";
+import List, { ListItem } from "@/app/components/List";
+import Locale from "@/app/locales";
+import { useAppConfig } from "@/app/store/config";
+import { SearchService, usePromptStore } from "@/app/store/prompt";
+
+import Switch from "@/app/components/Switch";
+import Btn from "@/app/components/Btn";
+
+import EditIcon from "@/app/icons/editIcon.svg";
+
+export interface PromptSettingProps {}
+
+export default function PromptSetting(props: PromptSettingProps) {
+  const [shouldShowPromptModal, setShowPromptModal] = useState(false);
+
+  const config = useAppConfig();
+  const updateConfig = config.update;
+
+  const builtinCount = SearchService.count.builtin;
+
+  const promptStore = usePromptStore();
+  const customCount = promptStore.getUserPrompts().length ?? 0;
+
+  const textStyle = " !text-sm";
+
+  return (
+    <>
+      <List>
+        <ListItem
+          title={Locale.Settings.Prompt.Disable.Title}
+          subTitle={Locale.Settings.Prompt.Disable.SubTitle}
+        >
+          <Switch
+            value={config.disablePromptHint}
+            onChange={(e) =>
+              updateConfig((config) => (config.disablePromptHint = e))
+            }
+          />
+        </ListItem>
+
+        <ListItem
+          title={Locale.Settings.Prompt.List}
+          subTitle={Locale.Settings.Prompt.ListCount(builtinCount, customCount)}
+        >
+          <div className="flex gap-3">
+            <Btn
+              onClick={() => setShowPromptModal(true)}
+              text={
+                <span className={textStyle}>{Locale.Settings.Prompt.Edit}</span>
+              }
+              prefixIcon={config.isMobileScreen ? undefined : <EditIcon />}
+            ></Btn>
+          </div>
+        </ListItem>
+      </List>
+      {shouldShowPromptModal && (
+        <UserPromptModal onClose={() => setShowPromptModal(false)} />
+      )}
+    </>
+  );
+}

app/containers/Settings/components/ProviderSetting.tsx

@@ -0,0 +1,283 @@
+import { useMemo } from "react";
+import {
+  Anthropic,
+  Azure,
+  Google,
+  OPENAI_BASE_URL,
+  ServiceProvider,
+  SlotID,
+} from "@/app/constant";
+import Locale from "@/app/locales";
+import { useAccessStore } from "@/app/store/access";
+import { getClientConfig } from "@/app/config/client";
+import { useAppConfig } from "@/app/store/config";
+import List, { ListItem } from "@/app/components/List";
+import Select from "@/app/components/Select";
+import Switch from "@/app/components/Switch";
+import Input from "@/app/components/Input";
+
+export default function ProviderSetting() {
+  const accessStore = useAccessStore();
+  const config = useAppConfig();
+  const { isMobileScreen } = config;
+  const clientConfig = useMemo(() => getClientConfig(), []);
+
+  return (
+    <List
+      id={SlotID.CustomModel}
+      widgetStyle={{
+        selectClassName: "min-w-select-mobile md:min-w-select",
+        inputClassName: "md:min-w-select",
+        rangeClassName: "md:min-w-select",
+        inputNextLine: isMobileScreen,
+      }}
+    >
+      {!accessStore.hideUserApiKey && (
+        <>
+          {
+            // Conditionally render the following ListItem based on clientConfig.isApp
+            !clientConfig?.isApp && ( // only show if isApp is false
+              <ListItem
+                title={Locale.Settings.Access.CustomEndpoint.Title}
+                subTitle={Locale.Settings.Access.CustomEndpoint.SubTitle}
+              >
+                <Switch
+                  value={accessStore.useCustomConfig}
+                  onChange={(e) =>
+                    accessStore.update((access) => (access.useCustomConfig = e))
+                  }
+                />
+              </ListItem>
+            )
+          }
+          {accessStore.useCustomConfig && (
+            <>
+              <ListItem
+                title={Locale.Settings.Access.Provider.Title}
+                subTitle={Locale.Settings.Access.Provider.SubTitle}
+              >
+                <Select
+                  value={accessStore.provider}
+                  onSelect={(e) => {
+                    accessStore.update((access) => (access.provider = e));
+                  }}
+                  options={Object.entries(ServiceProvider).map(([k, v]) => ({
+                    value: v,
+                    label: k,
+                  }))}
+                />
+              </ListItem>
+
+              {accessStore.provider === ServiceProvider.OpenAI && (
+                <>
+                  <ListItem
+                    title={Locale.Settings.Access.OpenAI.Endpoint.Title}
+                    subTitle={Locale.Settings.Access.OpenAI.Endpoint.SubTitle}
+                  >
+                    <Input
+                      type="text"
+                      value={accessStore.openaiUrl}
+                      placeholder={OPENAI_BASE_URL}
+                      onChange={(e = "") =>
+                        accessStore.update((access) => (access.openaiUrl = e))
+                      }
+                    ></Input>
+                  </ListItem>
+                  <ListItem
+                    title={Locale.Settings.Access.OpenAI.ApiKey.Title}
+                    subTitle={Locale.Settings.Access.OpenAI.ApiKey.SubTitle}
+                  >
+                    <Input
+                      value={accessStore.openaiApiKey}
+                      type="password"
+                      placeholder={
+                        Locale.Settings.Access.OpenAI.ApiKey.Placeholder
+                      }
+                      onChange={(e) => {
+                        accessStore.update(
+                          (access) => (access.openaiApiKey = e),
+                        );
+                      }}
+                    />
+                  </ListItem>
+                </>
+              )}
+              {accessStore.provider === ServiceProvider.Azure && (
+                <>
+                  <ListItem
+                    title={Locale.Settings.Access.Azure.Endpoint.Title}
+                    subTitle={
+                      Locale.Settings.Access.Azure.Endpoint.SubTitle +
+                      Azure.ExampleEndpoint
+                    }
+                  >
+                    <Input
+                      type="text"
+                      value={accessStore.azureUrl}
+                      placeholder={Azure.ExampleEndpoint}
+                      onChange={(e) =>
+                        accessStore.update((access) => (access.azureUrl = e))
+                      }
+                    ></Input>
+                  </ListItem>
+                  <ListItem
+                    title={Locale.Settings.Access.Azure.ApiKey.Title}
+                    subTitle={Locale.Settings.Access.Azure.ApiKey.SubTitle}
+                  >
+                    <Input
+                      value={accessStore.azureApiKey}
+                      type="password"
+                      placeholder={
+                        Locale.Settings.Access.Azure.ApiKey.Placeholder
+                      }
+                      onChange={(e) => {
+                        accessStore.update(
+                          (access) => (access.azureApiKey = e),
+                        );
+                      }}
+                    />
+                  </ListItem>
+                  <ListItem
+                    title={Locale.Settings.Access.Azure.ApiVerion.Title}
+                    subTitle={Locale.Settings.Access.Azure.ApiVerion.SubTitle}
+                  >
+                    <Input
+                      type="text"
+                      value={accessStore.azureApiVersion}
+                      placeholder="2023-08-01-preview"
+                      onChange={(e) =>
+                        accessStore.update(
+                          (access) => (access.azureApiVersion = e),
+                        )
+                      }
+                    ></Input>
+                  </ListItem>
+                </>
+              )}
+              {accessStore.provider === ServiceProvider.Google && (
+                <>
+                  <ListItem
+                    title={Locale.Settings.Access.Google.Endpoint.Title}
+                    subTitle={
+                      Locale.Settings.Access.Google.Endpoint.SubTitle +
+                      Google.ExampleEndpoint
+                    }
+                  >
+                    <Input
+                      type="text"
+                      value={accessStore.googleUrl}
+                      placeholder={Google.ExampleEndpoint}
+                      onChange={(e) =>
+                        accessStore.update((access) => (access.googleUrl = e))
+                      }
+                    ></Input>
+                  </ListItem>
+                  <ListItem
+                    title={Locale.Settings.Access.Google.ApiKey.Title}
+                    subTitle={Locale.Settings.Access.Google.ApiKey.SubTitle}
+                  >
+                    <Input
+                      value={accessStore.googleApiKey}
+                      type="password"
+                      placeholder={
+                        Locale.Settings.Access.Google.ApiKey.Placeholder
+                      }
+                      onChange={(e) => {
+                        accessStore.update(
+                          (access) => (access.googleApiKey = e),
+                        );
+                      }}
+                    />
+                  </ListItem>
+                  <ListItem
+                    title={Locale.Settings.Access.Google.ApiVersion.Title}
+                    subTitle={Locale.Settings.Access.Google.ApiVersion.SubTitle}
+                  >
+                    <Input
+                      type="text"
+                      value={accessStore.googleApiVersion}
+                      placeholder="2023-08-01-preview"
+                      onChange={(e) =>
+                        accessStore.update(
+                          (access) => (access.googleApiVersion = e),
+                        )
+                      }
+                    ></Input>
+                  </ListItem>
+                </>
+              )}
+              {accessStore.provider === ServiceProvider.Anthropic && (
+                <>
+                  <ListItem
+                    title={Locale.Settings.Access.Anthropic.Endpoint.Title}
+                    subTitle={
+                      Locale.Settings.Access.Anthropic.Endpoint.SubTitle +
+                      Anthropic.ExampleEndpoint
+                    }
+                  >
+                    <Input
+                      type="text"
+                      value={accessStore.anthropicUrl}
+                      placeholder={Anthropic.ExampleEndpoint}
+                      onChange={(e) =>
+                        accessStore.update(
+                          (access) => (access.anthropicUrl = e),
+                        )
+                      }
+                    ></Input>
+                  </ListItem>
+                  <ListItem
+                    title={Locale.Settings.Access.Anthropic.ApiKey.Title}
+                    subTitle={Locale.Settings.Access.Anthropic.ApiKey.SubTitle}
+                  >
+                    <Input
+                      value={accessStore.anthropicApiKey}
+                      type="password"
+                      placeholder={
+                        Locale.Settings.Access.Anthropic.ApiKey.Placeholder
+                      }
+                      onChange={(e) => {
+                        accessStore.update(
+                          (access) => (access.anthropicApiKey = e),
+                        );
+                      }}
+                    />
+                  </ListItem>
+                  <ListItem
+                    title={Locale.Settings.Access.Anthropic.ApiVerion.Title}
+                    subTitle={
+                      Locale.Settings.Access.Anthropic.ApiVerion.SubTitle
+                    }
+                  >
+                    <Input
+                      type="text"
+                      value={accessStore.anthropicApiVersion}
+                      placeholder={Anthropic.Vision}
+                      onChange={(e) =>
+                        accessStore.update(
+                          (access) => (access.anthropicApiVersion = e),
+                        )
+                      }
+                    ></Input>
+                  </ListItem>
+                </>
+              )}
+            </>
+          )}
+        </>
+      )}
+
+      <ListItem
+        title={Locale.Settings.Access.CustomModel.Title}
+        subTitle={Locale.Settings.Access.CustomModel.SubTitle}
+      >
+        <Input
+          type="text"
+          value={config.customModels}
+          placeholder="model1,model2,model3"
+          onChange={(e) => config.update((config) => (config.customModels = e))}
+        ></Input>
+      </ListItem>
+    </List>
+  );
+}