添加 Markdown 拓展支持
This commit is contained in:
Generated
+1778
-311
File diff suppressed because it is too large
Load Diff
@@ -49,7 +49,9 @@
|
|||||||
"react-dom": "^19.1.0",
|
"react-dom": "^19.1.0",
|
||||||
"react-draggable": "^4.5.0",
|
"react-draggable": "^4.5.0",
|
||||||
"react-icons": "^5.5.0",
|
"react-icons": "^5.5.0",
|
||||||
|
"react-markdown": "^10.1.0",
|
||||||
"react-window": "^1.8.10",
|
"react-window": "^1.8.10",
|
||||||
|
"remark-gfm": "^4.0.1",
|
||||||
"tailwindcss": "^4.1.13",
|
"tailwindcss": "^4.1.13",
|
||||||
"zustand": "^5.0.11"
|
"zustand": "^5.0.11"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
|
|
||||||
import React, { useMemo, useRef, useState, useEffect, useCallback } from "react";
|
import React, { useMemo, useRef, useState, useEffect, useCallback } from "react";
|
||||||
import ReactMarkdown from "react-markdown";
|
import ReactMarkdown from "react-markdown";
|
||||||
|
import remarkGfm from "remark-gfm";
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
import markdownStyles from "./GlobalChatboxMarkdown.module.css";
|
import markdownStyles from "./GlobalChatboxMarkdown.module.css";
|
||||||
|
|
||||||
@@ -21,7 +22,6 @@ import {
|
|||||||
Typography,
|
Typography,
|
||||||
useTheme,
|
useTheme,
|
||||||
alpha,
|
alpha,
|
||||||
Tooltip,
|
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import type { Theme } from "@mui/material/styles";
|
import type { Theme } from "@mui/material/styles";
|
||||||
|
|
||||||
@@ -30,7 +30,6 @@ import CloseRounded from "@mui/icons-material/CloseRounded";
|
|||||||
import SendRounded from "@mui/icons-material/SendRounded";
|
import SendRounded from "@mui/icons-material/SendRounded";
|
||||||
import StopRounded from "@mui/icons-material/StopRounded";
|
import StopRounded from "@mui/icons-material/StopRounded";
|
||||||
import AutoAwesome from "@mui/icons-material/AutoAwesome"; // Sparkle icon for AI
|
import AutoAwesome from "@mui/icons-material/AutoAwesome"; // Sparkle icon for AI
|
||||||
import PersonRounded from "@mui/icons-material/PersonRounded";
|
|
||||||
import ErrorOutlineRounded from "@mui/icons-material/ErrorOutlineRounded";
|
import ErrorOutlineRounded from "@mui/icons-material/ErrorOutlineRounded";
|
||||||
import AddCommentRounded from "@mui/icons-material/AddCommentRounded";
|
import AddCommentRounded from "@mui/icons-material/AddCommentRounded";
|
||||||
|
|
||||||
@@ -276,7 +275,7 @@ const ChatMessageItem = React.memo(
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className={markdownStyles.markdown}>
|
<div className={markdownStyles.markdown}>
|
||||||
<ReactMarkdown>{answerContent || "..."}</ReactMarkdown>
|
<ReactMarkdown remarkPlugins={[remarkGfm]}>{answerContent || "..."}</ReactMarkdown>
|
||||||
</div>
|
</div>
|
||||||
</Paper>
|
</Paper>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|||||||
@@ -80,6 +80,33 @@
|
|||||||
line-height: 1.65;
|
line-height: 1.65;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.markdown table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin: 1rem 0;
|
||||||
|
font-size: 0.88em;
|
||||||
|
border: 1px solid var(--chat-md-inline-code-border);
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown th,
|
||||||
|
.markdown td {
|
||||||
|
padding: 0.6rem 0.8rem;
|
||||||
|
border: 1px solid var(--chat-md-inline-code-border);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown th {
|
||||||
|
background-color: var(--chat-md-inline-code-bg);
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--chat-md-heading);
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown tr:nth-child(even) {
|
||||||
|
background-color: rgba(0, 0, 0, 0.02);
|
||||||
|
}
|
||||||
|
|
||||||
.markdown blockquote {
|
.markdown blockquote {
|
||||||
margin: 0.8rem 0;
|
margin: 0.8rem 0;
|
||||||
padding: 0.45rem 0.75rem;
|
padding: 0.45rem 0.75rem;
|
||||||
|
|||||||
Reference in New Issue
Block a user