diff --git a/web/package.json b/web/package.json
index 2abb1897..a09a58af 100644
--- a/web/package.json
+++ b/web/package.json
@@ -11,26 +11,36 @@
"@visactor/vchart": "~1.8.8",
"@visactor/vchart-semi-theme": "~1.8.8",
"axios": "^0.27.2",
+ "clsx": "^2.1.1",
"country-flag-icons": "^1.5.19",
"dayjs": "^1.11.11",
"history": "^5.3.0",
"i18next": "^23.16.8",
"i18next-browser-languagedetector": "^7.2.0",
+ "katex": "^0.16.22",
"lucide-react": "^0.511.0",
"marked": "^4.1.1",
+ "mermaid": "^11.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
"react-fireworks": "^1.0.4",
"react-i18next": "^13.0.0",
"react-icons": "^5.5.0",
+ "react-markdown": "^10.1.0",
"react-router-dom": "^6.3.0",
"react-telegram-login": "^1.1.2",
"react-toastify": "^9.0.8",
"react-turnstile": "^1.0.5",
+ "rehype-highlight": "^7.0.2",
+ "rehype-katex": "^7.0.1",
+ "remark-breaks": "^4.0.0",
+ "remark-gfm": "^4.0.1",
+ "remark-math": "^6.0.0",
"semantic-ui-offline": "^2.5.0",
"semantic-ui-react": "^2.1.3",
- "sse": "https://github.com/mpetazzoni/sse.js"
+ "sse": "https://github.com/mpetazzoni/sse.js",
+ "use-debounce": "^10.0.4"
},
"scripts": {
"dev": "vite",
diff --git a/web/src/components/common/MarkdownRenderer.js b/web/src/components/common/MarkdownRenderer.js
new file mode 100644
index 00000000..12662265
--- /dev/null
+++ b/web/src/components/common/MarkdownRenderer.js
@@ -0,0 +1,491 @@
+import ReactMarkdown from 'react-markdown';
+import 'katex/dist/katex.min.css';
+import 'highlight.js/styles/default.css';
+import './markdown.css';
+import RemarkMath from 'remark-math';
+import RemarkBreaks from 'remark-breaks';
+import RehypeKatex from 'rehype-katex';
+import RemarkGfm from 'remark-gfm';
+import RehypeHighlight from 'rehype-highlight';
+import { useRef, useState, useEffect, useMemo } from 'react';
+import mermaid from 'mermaid';
+import React from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+import clsx from 'clsx';
+import { Button, Tooltip, Toast } from '@douyinfe/semi-ui';
+import { copy } from '../../helpers/utils';
+import { IconCopy } from '@douyinfe/semi-icons';
+import { useTranslation } from 'react-i18next';
+
+mermaid.initialize({
+ startOnLoad: false,
+ theme: 'default',
+ securityLevel: 'loose',
+});
+
+export function Mermaid(props) {
+ const ref = useRef(null);
+ const [hasError, setHasError] = useState(false);
+
+ useEffect(() => {
+ if (props.code && ref.current) {
+ mermaid
+ .run({
+ nodes: [ref.current],
+ suppressErrors: true,
+ })
+ .catch((e) => {
+ setHasError(true);
+ console.error('[Mermaid] ', e.message);
+ });
+ }
+ }, [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);
+ window.open(url, '_blank');
+ }
+
+ if (hasError) {
+ return null;
+ }
+
+ return (
+ viewSvgInNewWindow()}
+ >
+ {props.code}
+
+ );
+}
+
+export function PreCode(props) {
+ const ref = useRef(null);
+ const [mermaidCode, setMermaidCode] = useState('');
+ const [htmlCode, setHtmlCode] = useState('');
+ const { t } = useTranslation();
+
+ const renderArtifacts = useDebouncedCallback(() => {
+ if (!ref.current) return;
+ const mermaidDom = ref.current.querySelector('code.language-mermaid');
+ if (mermaidDom) {
+ setMermaidCode(mermaidDom.innerText);
+ }
+ const htmlDom = ref.current.querySelector('code.language-html');
+ const refText = ref.current.querySelector('code')?.innerText;
+ if (htmlDom) {
+ setHtmlCode(htmlDom.innerText);
+ } else if (
+ refText?.startsWith(' {
+ if (ref.current) {
+ const codeElements = ref.current.querySelectorAll('code');
+ const wrapLanguages = [
+ '',
+ 'md',
+ 'markdown',
+ 'text',
+ 'txt',
+ 'plaintext',
+ 'tex',
+ 'latex',
+ ];
+ codeElements.forEach((codeElement) => {
+ let languageClass = codeElement.className.match(/language-(\w+)/);
+ let name = languageClass ? languageClass[1] : '';
+ if (wrapLanguages.includes(name)) {
+ codeElement.style.whiteSpace = 'pre-wrap';
+ }
+ });
+ setTimeout(renderArtifacts, 1);
+ }
+ }, []);
+
+ return (
+ <>
+
+
+
+ }
+ onClick={(e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ if (ref.current) {
+ const code = ref.current.querySelector('code')?.innerText ?? '';
+ copy(code).then((success) => {
+ if (success) {
+ Toast.success(t('代码已复制到剪贴板'));
+ } else {
+ Toast.error(t('复制失败，请手动复制'));
+ }
+ });
+ }
+ }}
+ style={{
+ padding: '4px',
+ backgroundColor: 'var(--semi-color-bg-2)',
+ borderRadius: '4px',
+ cursor: 'pointer',
+ border: '1px solid var(--semi-color-border)',
+ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
+ }}
+ />
+
+
+ {props.children}
+
+ {mermaidCode.length > 0 && (
+
+ )}
+ {htmlCode.length > 0 && (
+
+ )}
+
+ );
+}
+
+function CustomCode(props) {
+ const ref = useRef(null);
+ const [collapsed, setCollapsed] = useState(true);
+ const [showToggle, setShowToggle] = useState(false);
+ const { t } = useTranslation();
+
+ useEffect(() => {
+ if (ref.current) {
+ const codeHeight = ref.current.scrollHeight;
+ setShowToggle(codeHeight > 400);
+ ref.current.scrollTop = ref.current.scrollHeight;
+ }
+ }, [props.children]);
+
+ const toggleCollapsed = () => {
+ setCollapsed((collapsed) => !collapsed);
+ };
+
+ const renderShowMoreButton = () => {
+ if (showToggle && collapsed) {
+ return (
+
+
+
+ );
+ }
+ return null;
+ };
+
+ return (
+
+
+ {props.children}
+
+ {renderShowMoreButton()}
+
+ );
+}
+
+function escapeBrackets(text) {
+ const pattern =
+ /(```[\s\S]*?```|`.*?`)|\\\[([\s\S]*?[^\\])\\\]|\\\((.*?)\\\)/g;
+ return text.replace(
+ pattern,
+ (match, codeBlock, squareBracket, roundBracket) => {
+ if (codeBlock) {
+ return codeBlock;
+ } else if (squareBracket) {
+ return `$$${squareBracket}$$`;
+ } else if (roundBracket) {
+ return `$${roundBracket}$`;
+ }
+ return match;
+ },
+ );
+}
+
+function tryWrapHtmlCode(text) {
+ // 尝试包装HTML代码
+ if (text.includes('```')) {
+ return text;
+ }
+ return text
+ .replace(
+ /([`]*?)(\w*?)([\n\r]*?)()/g,
+ (match, quoteStart, lang, newLine, doctype) => {
+ return !quoteStart ? '\n```html\n' + doctype : match;
+ },
+ )
+ .replace(
+ /(<\/body>)([\r\n\s]*?)(<\/html>)([\n\r]*)([`]*)([\n\r]*?)/g,
+ (match, bodyEnd, space, htmlEnd, newLine, quoteEnd) => {
+ return !quoteEnd ? bodyEnd + space + htmlEnd + '\n```\n' : match;
+ },
+ );
+}
+
+function _MarkdownContent(props) {
+ const escapedContent = useMemo(() => {
+ return tryWrapHtmlCode(escapeBrackets(props.content));
+ }, [props.content]);
+
+ // 判断是否为用户消息
+ const isUserMessage = props.className && props.className.includes('user-message');
+
+ return (
+ ,
+ a: (aProps) => {
+ const href = aProps.href || '';
+ if (/\.(aac|mp3|opus|wav)$/.test(href)) {
+ return (
+
+
+
+ );
+ }
+ if (/\.(3gp|3g2|webm|ogv|mpeg|mp4|avi)$/.test(href)) {
+ return (
+
+ );
+ }
+ const isInternal = /^\/#/i.test(href);
+ const target = isInternal ? '_self' : aProps.target ?? '_blank';
+ return (
+ {
+ e.target.style.textDecoration = 'underline';
+ }}
+ onMouseLeave={(e) => {
+ e.target.style.textDecoration = 'none';
+ }}
+ />
+ );
+ },
+ h1: (props) => ,
+ h2: (props) => ,
+ h3: (props) => ,
+ h4: (props) => ,
+ h5: (props) => ,
+ h6: (props) => ,
+ blockquote: (props) => (
+
+ ),
+ ul: (props) => ,
+ ol: (props) =>
,
+ li: (props) => ,
+ table: (props) => (
+
+ ),
+ th: (props) => (
+ |
+ ),
+ td: (props) => (
+ |
+ ),
+ }}
+ >
+ {escapedContent}
+
+ );
+}
+
+export const MarkdownContent = React.memo(_MarkdownContent);
+
+export function MarkdownRenderer(props) {
+ const {
+ content,
+ loading,
+ fontSize = 14,
+ fontFamily = 'inherit',
+ className,
+ style,
+ ...otherProps
+ } = props;
+
+ return (
+
+ {loading ? (
+
+ ) : (
+
+ )}
+
-
+
);
}
} else {
return (
-