|
@@ -1,5 +1,5 @@
|
|
|
import ReactMarkdown from "react-markdown";
|
|
import ReactMarkdown from "react-markdown";
|
|
|
-import "katex/dist/katex.min.css";
|
|
|
|
|
|
|
+import { Image } from "antd";
|
|
|
import RemarkMath from "remark-math";
|
|
import RemarkMath from "remark-math";
|
|
|
import RemarkBreaks from "remark-breaks";
|
|
import RemarkBreaks from "remark-breaks";
|
|
|
import RehypeKatex from "rehype-katex";
|
|
import RehypeKatex from "rehype-katex";
|
|
@@ -8,7 +8,6 @@ import RehypeHighlight from "rehype-highlight";
|
|
|
import { useRef, useState, RefObject, useEffect, useMemo } from "react";
|
|
import { useRef, useState, RefObject, useEffect, useMemo } from "react";
|
|
|
import { copyToClipboard, useWindowSize } from "../utils";
|
|
import { copyToClipboard, useWindowSize } from "../utils";
|
|
|
import mermaid from "mermaid";
|
|
import mermaid from "mermaid";
|
|
|
-
|
|
|
|
|
import LoadingIcon from "../icons/three-dots.svg";
|
|
import LoadingIcon from "../icons/three-dots.svg";
|
|
|
import React from "react";
|
|
import React from "react";
|
|
|
import { useDebouncedCallback } from "use-debounce";
|
|
import { useDebouncedCallback } from "use-debounce";
|
|
@@ -16,6 +15,8 @@ import { showImageModal, FullScreen } from "./ui-lib";
|
|
|
import { ArtifactsShareButton, HTMLPreview } from "./artifacts";
|
|
import { ArtifactsShareButton, HTMLPreview } from "./artifacts";
|
|
|
import { Plugin } from "../constant";
|
|
import { Plugin } from "../constant";
|
|
|
import { useChatStore } from "../store";
|
|
import { useChatStore } from "../store";
|
|
|
|
|
+import "katex/dist/katex.min.css";
|
|
|
|
|
+
|
|
|
export function Mermaid(props: { code: string }) {
|
|
export function Mermaid(props: { code: string }) {
|
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
const [hasError, setHasError] = useState(false);
|
|
const [hasError, setHasError] = useState(false);
|
|
@@ -209,6 +210,7 @@ function _MarkDownContent(props: { content: string }) {
|
|
|
},
|
|
},
|
|
|
],
|
|
],
|
|
|
]}
|
|
]}
|
|
|
|
|
+ // 控制不同标签的显示样式
|
|
|
components={{
|
|
components={{
|
|
|
pre: PreCode,
|
|
pre: PreCode,
|
|
|
p: (pProps) => <p {...pProps} dir="auto" />,
|
|
p: (pProps) => <p {...pProps} dir="auto" />,
|
|
@@ -218,10 +220,19 @@ function _MarkDownContent(props: { content: string }) {
|
|
|
const target = isInternal ? "_self" : aProps.target ?? "_blank";
|
|
const target = isInternal ? "_self" : aProps.target ?? "_blank";
|
|
|
return <a {...aProps} target={target} />;
|
|
return <a {...aProps} target={target} />;
|
|
|
},
|
|
},
|
|
|
|
|
+ img: ({ src, alt }) => (
|
|
|
|
|
+ <Image
|
|
|
|
|
+ src={src}
|
|
|
|
|
+ alt={alt}
|
|
|
|
|
+ preview={{
|
|
|
|
|
+ mask: null
|
|
|
|
|
+ }}
|
|
|
|
|
+ />
|
|
|
|
|
+ ),
|
|
|
}}
|
|
}}
|
|
|
>
|
|
>
|
|
|
{escapedContent}
|
|
{escapedContent}
|
|
|
- </ReactMarkdown>
|
|
|
|
|
|
|
+ </ReactMarkdown >
|
|
|
);
|
|
);
|
|
|
}
|
|
}
|
|
|
|
|
|