Merge pull request ChatGPTNextWeb#1276 from Yidadaa/bugfix-0505

feat: ChatGPTNextWeb#951 mermaid support

app/components/markdown.tsx

@@ -7,12 +7,61 @@ import RemarkGfm from "remark-gfm";
 import RehypeHighlight from "rehype-highlight";
 import { useRef, useState, RefObject, useEffect } from "react";
 import { copyToClipboard } from "../utils";
+import mermaid from "mermaid";
 
 import LoadingIcon from "../icons/three-dots.svg";
 import React from "react";
 
+export function Mermaid(props: { code: string }) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (props.code && ref.current) {
+      mermaid.run({
+        nodes: [ref.current],
+      });
+    }
+  }, [props.code]);
+
+  function viewSvgInNewWindow() {
+    const svg = ref.current?.querySelector("svg");
+    if (!svg) return;
+    const text = new XMLSerializer().serializeToString(svg);
+    const blob = new Blob([text], { type: "image/svg+xml" });
+    const url = URL.createObjectURL(blob);
+    const win = window.open(url);
+    if (win) {
+      win.onload = () => URL.revokeObjectURL(url);
+    }
+  }
+
+  return (
+    <div
+      className="no-dark"
+      style={{ cursor: "pointer" }}
+      ref={ref}
+      onClick={() => viewSvgInNewWindow()}
+    >
+      {props.code}
+    </div>
+  );
+}
+
 export function PreCode(props: { children: any }) {
   const ref = useRef<HTMLPreElement>(null);
+  const [mermaidCode, setMermaidCode] = useState("");
+
+  useEffect(() => {
+    if (!ref.current) return;
+    const mermaidDom = ref.current.querySelector("code.language-mermaid");
+    if (mermaidDom) {
+      setMermaidCode((mermaidDom as HTMLElement).innerText);
+    }
+  }, [props.children]);
+
+  if (mermaidCode) {
+    return <Mermaid code={mermaidCode} />;
+  }
 
   return (
     <pre ref={ref}>
@@ -82,10 +131,12 @@ export function Markdown(
       const parentBounds = parent.getBoundingClientRect();
       const twoScreenHeight = Math.max(500, parentBounds.height * 2);
       const mdBounds = md.getBoundingClientRect();
-      const isInRange = (x: number) =>
-        x <= parentBounds.bottom + twoScreenHeight &&
-        x >= parentBounds.top - twoScreenHeight;
-      inView.current = isInRange(mdBounds.top) || isInRange(mdBounds.bottom);
+      const parentTop = parentBounds.top - twoScreenHeight;
+      const parentBottom = parentBounds.bottom + twoScreenHeight;
+      const isOverlap =
+        Math.max(parentTop, mdBounds.top) <=
+        Math.min(parentBottom, mdBounds.bottom);
+      inView.current = isOverlap;
     }
 
     if (inView.current && md) {

app/layout.tsx

@@ -35,10 +35,9 @@ export default function RootLayout({
         />
         <meta name="version" content={buildConfig.commitId} />
         <link rel="manifest" href="/site.webmanifest"></link>
-        <link rel="preconnect" href="https://fonts.googleapis.com"></link>
-        <link rel="preconnect" href="https://fonts.gstatic.com"></link>
+        <link rel="preconnect" href="https://fonts.proxy.ustclug.org"></link>
         <link
-          href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700;900&display=swap"
+          href="https://fonts.proxy.ustclug.org/css2?family=Noto+Sans+SC:wght@300;400;700;900&display=swap"
           rel="stylesheet"
         ></link>
         <script src="/serviceWorkerRegister.js" defer></script>

app/store/access.ts

@@ -41,6 +41,8 @@ export const useAccessStore = create<AccessControlStore>()(
         set(() => ({ token }));
       },
       isAuthorized() {
+        get().fetch();
+
         // has token or has code or disabled access control
         return (
           !!get().token || !!get().accessCode || !get().enabledAccessControl()

app/styles/globals.scss

@@ -88,6 +88,9 @@
 }
 html {
   height: var(--full-height);
+
+  font-family: "Noto Sans SC", "SF Pro SC", "SF Pro Text", "SF Pro Icons",
+    "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 }
 
 body {
@@ -102,8 +105,6 @@ body {
   align-items: center;
   user-select: none;
   touch-action: pan-x pan-y;
-  font-family: "Noto Sans SC", "SF Pro SC", "SF Pro Text", "SF Pro Icons",
-    "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 
   @media only screen and (max-width: 600px) {
     background-color: var(--second);

next.config.mjs

@@ -17,7 +17,7 @@ const nextConfig = {
     }
 
     return {
-      afterFiles: ret,
+      beforeFiles: ret,
     };
   },
   webpack(config) {

package.json

@@ -19,6 +19,7 @@
     "emoji-picker-react": "^4.4.7",
     "eventsource-parser": "^0.1.0",
     "fuse.js": "^6.6.2",
+    "mermaid": "^10.1.0",
     "next": "^13.3.1-canary.8",
     "node-fetch": "^3.3.1",
     "openai": "^3.2.1",