chore: update docs

README.md

@@ -27,10 +27,14 @@ English | [简体中文](https://github.com/Deeptrain-Community/chatnio/blob/mas
      ![Midjourney](/screenshot/code.png)
   2. **Markdown Support / Theme Switching Support**, supports light and dark modes, code highlighting, Mermaid, LaTeX formulas, tables, progress bars, Virtual Message, etc.
      ![Markdown Message](/screenshot/latex.jpg)
+     ![Markdown Mermaid](/screenshot/mermaid.png)
   3. **Support for Message Menu**, including re-answering, copying messages, using messages, editing messages, deleting messages, saving as a file, and more operations...
+     ![Vision Support](/screenshot/vision.png)
   4. **Support for Multi-platform Adaptation**, supports PWA apps, desktop platforms (desktop is based on [Tauri](https://github.com/tauri-apps/tauri)).
   5. **Dialogue Memory**, cloud synchronization, native support for direct link sharing of site conversations, supports using shared conversations, saving shared conversations as images, and share management (including viewing, deleting shares, etc.).
+     ![Conversation Sharing](/screenshot/sharing.png)
   6. **Native Support for Full Model File Parsing**, supports pdf, docx, pptx, xlsx, images, and other formats parsing (for more details, see the project [chatnio-blob-service](https://github.com/Deeptrain-Community/chatnio-blob-service)).
+     ![File Upload](/screenshot/file.png)
   7. Supports Full-model DuckDuckGo Online Search _(for details, refer to the [duckduckgo-api](https://github.com/binjie09/duckduckgo-api) project, needs to be set up on your own and configured in the internet settings in the system settings, thanks to the author [@binjie09](https://github.com/binjie09), enable web searching by prefixing the relay api model with **web-**.)_
      ![Online Search](/screenshot/online.png)
   8. **Full-screen Large Text Editing**, supports *plain text editing*, *edit-preview mode*, *pure preview mode* three mode switching.
@@ -47,6 +51,23 @@ English | [简体中文](https://github.com/Deeptrain-Community/chatnio/blob/mas
     - *[Discontinued]* 🍎 **AI project generator function**, supports viewing of the generation process, supports TAR / ZIP format downloads *(based on presets, may be unstable)*
     - *[Discontinued]* 📂 **Bulk article generation function**, supports progress bar, one-click generation of DOCX documents in TAR / ZIP format download *(requires a generation quantity higher than the highest concurrency number of the upstream model)*
     - *[Deprecated]* 🥪 **AI Card feature** (deprecated), AI questions and answers are presented in the form of cards, can be directly embedded via image url. *(Based on dynamic SVG generation)*
+- 🔔 **Rich Admin System**
+    1. **Rich and beautiful dashboard**, including current day and month's crediting information, subscribers, model usage statistics line charts, pie charts, revenue statistics, user type statistics, model usage statistics, request counts and model error counts statistics charts, etc.
+       ! [Dashboard](/screenshot/admin.png)
+    2. **Support user management**, *User list*, *User details*, *Administrative operations* (*Change password*, *Change mailbox*, *Block/Unblock user*, *Set as administrator*, *Points change*, *Points setup*, *Subscription management*, *Subscription level setup*, *Release subscription*, etc).
+    3. **Support Gift Code and Redemption Code Management** Support management operations, support batch generation and save to file.
+    4. **Price setting**, support model price setting (_**Counts billing**_, **_Token flexible billing_**, _**No billing**_ etc.), support synchronize the price setting of upstream Chat Nio site (optional whether to override the price rules of the existing models on this site), unset price model detection (if non-administrator will automatically detect and stop using the model to prevent loss of money). to prevent loss of money)
+       ! [Buy Points](/screenshot/shop.png)
+       ! [Price setting](/screenshot/charge.png) !
+    5. **Subscription Settings**, different from flexible billing, subscription is a kind of fixed price per time billing, platform users can subscribe to a fixed price through the package, support whether to enable subscription (default off), support subscription tiering, support subscription quota settings, support subscription quotas cover the model settings, icon settings, quotas imported from other packages and other functions.
+       ! [Subscription Plan](/screenshot/subscription.png)
+       ! [Subscription Settings](/screenshot/plan.png) !
+    6. **Customize Model Marketplace**, Edit Frontend Model Marketplace Model Name, Description, Tags, Avatar (Built-in Model Image Selection and Custom Model Image Setting), Whether or not to add Model Models and other information!
+       ! [Model Market Settings](/screenshot/admin-market.png)
+    7. **System Settings**, Customized Site Name, Site Logo, Documentation Link, Whether to Suspend Registration, User Initial Points Settings, Customized Purchase Link (Card Address), Contact Information, Footer Information, etc. !
+       ! [System Settings](/screenshot/system.png)
+    8. **SMTP support**, support whether to enable email suffix whitelisting, support customized email suffix whitelisting.
+    9. **Support model caching**, *i.e., under the same entry, if it has been requested before, it will return the cached result directly (hit caching will not be billed), to reduce the number of requests. You can customize the maximum number of cached results for a case (default is 1), customize the models that can be cached (default is empty), customize the caching time (default is 1 hour), support one-click settings *All models are not cached*, *Free models are cached*, *All models are cached*, and other operations*.
 - ⚡ Channel Management System
   1. Chat Nio **uses a self-developed channel distribution algorithm** (doesn't rely on http context), abstracts Adapter compatibility layer architecture, low coupling, and high scalability.
   2. **Supports Multi-channel Management**, supports **priority allocation**, **weight load**, **channel status management**, etc. _(Priority refers to the allocation of channel priority during the model request process, where higher priority channels are used first. If an error occurs, the system will automatically fall back to a channel of lower priority; weight refers to the weight of a channel within the same priority, with higher weight increasing the probability of being used. For channels at the same priority level, only one can be used at any time, and the higher the weight, the higher the probability of being selected.)_

README_zh-CN.md

@@ -27,6 +27,7 @@ _🚀 **Next Generation AI One-Stop Solution**_
      ![Midjourney 绘图](/screenshot/code.png)
   2. **丰富 Markdown 支持和主题切换**, 支持明暗模式, 代码高亮, Mermaid, LaTeX 公式, 表格, 进度条, Virtual Message 等
      ![Markdown 消息](/screenshot/latex.jpg)
+     ![Markdown Mermaid](/screenshot/mermaid.png)
   3. **支持消息菜单**, 支持重新回答, 复制消息, 使用消息, 编辑消息, 删除消息, 保存为文件等操作
      ![Vision 支持](/screenshot/vision.png)
   4. **支持多端适配**, 支持 PWA 应用, 支持桌面端 *(桌面端基于 [Tauri](https://github.com/tauri-apps/tauri))*

app/src/components/plugins/mermaid.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect } from "react";
 import mermaid from "mermaid";
 import { cn } from "@/components/ui/lib/utils.ts";
-import { Loader2 } from "lucide-react";
+import { Check, Copy, Loader2 } from "lucide-react";
 import { useDebouncedCallback } from "use-debounce";
+import { copyClipboard } from "@/utils/dom.ts";
 
 mermaid.initialize({
   theme: "dark",
@@ -23,6 +24,7 @@ export function Mermaid({ children }: MermaidProps) {
   const chart = React.useRef<HTMLDivElement>(null);
   const [error, setError] = React.useState<boolean>(false);
   const [loading, setLoading] = React.useState<boolean>(false);
+  const [copied, setCopied] = React.useState<boolean>(false);
 
   const createRenderTask = useDebouncedCallback(() => {
     if (!chart.current) return;
@@ -49,7 +51,22 @@ export function Mermaid({ children }: MermaidProps) {
   }, [children]);
 
   return (
-    <div className={`whitespace-pre-wrap p-2 border rounded-md border-input`}>
+    <div className={`whitespace-pre-wrap markdown-syntax`}>
+      <div
+        className={`markdown-syntax-header`}
+        onClick={async () => {
+          const text = children?.toString() || "";
+          await copyClipboard(text);
+          setCopied(true);
+        }}
+      >
+        {copied ? (
+          <Check className={`h-3 w-3`} />
+        ) : (
+          <Copy className={`h-3 w-3`} />
+        )}
+        <p>mermaid</p>
+      </div>
       <div
         className={cn(
           "flex flex-row items-center justify-center text-primary select-none mb-4",