| import ReactMarkdown from "react-markdown"; |
| import remarkGfm from "remark-gfm"; |
| import remarkMath from "remark-math"; |
| import rehypeHighlight from "rehype-highlight"; |
| import rehypeKatex from "rehype-katex"; |
| import "katex/dist/katex.min.css"; |
| import Mermaid from "./Mermaid"; |
| function preprocessContent(text) { |
| if (!text) return ""; |
| let processedText = text; |
| const imageBlockRegex = /((?:!\[.*?\]\(.*?\)(?:\s| )*){2,})/g; |
| processedText = processedText.replace(imageBlockRegex, (match) => { |
| return `\n\`\`\`slider\n${match.trim()}\n\`\`\`\n`; |
| }); |
| const parts = processedText.split(/(```[\s\S]*?```|`[^`\n]+`|!\[[\s\S]*?\]\([\s\S]*?\))/g); |
| const processedParts = parts.map(part => { |
| if (part.startsWith("```") || part.startsWith("`") || part.startsWith("![")) return part; |
| let processed = part; |
| const mermaidRegex = /^(?:graph|flowchart|classDiagram|stateDiagram|erDiagram|sequenceDiagram|gantt|pie|quadrantChart|xychart|mindmap|timeline)[\s\S]+?(?=\n\n|\n$|$)/gm; |
| processed = processed.replace(mermaidRegex, (match) => { |
| if (match.trim().split("\n").length > 1) { |
| return `\n\`\`\`mermaid\n${match.trim()}\n\`\`\`\n`; |
| } |
| return match; |
| }); |
|
|
| const treeRegex = /((?:^[ \t]*[│├└┌┐┘┤┼|].*$\n?)+)/gm; |
| processed = processed.replace(treeRegex, (match) => { |
| const lines = match.trim().split("\n"); |
| const hasStrongTreeChars = /[│├└┌┐┘┤┼├─]/.test(match); |
| if (lines.length > 1 || hasStrongTreeChars) { |
| return `\n\`\`\`tree\n${match.trim()}\n\`\`\`\n`; |
| } |
| return match; |
| }); |
| processed = processed.replace(/^[ \t\u00a0]*[•●○·][ \t\u00a0]*/gm, "- "); |
| processed = processed.replace(/\\\[([\s\S]*?)\\\]/g, "$$$$1$$"); |
| processed = processed.replace(/\\\(([\s\S]*?)\\\)/g, "$$1$"); |
| processed = processed.replace(/(\((.+?)\)|\[(.+?)\])/g, (match, full, p1, p2) => { |
| const content = (p1 || p2 || "").trim(); |
| if (!content) return match; |
| const hasMathOperator = /[\\_^={}+\-*/]/.test(content); |
| const isSingleVar = /^[a-z]$/i.test(content); |
| const isExpression = /^[a-z0-9] *[+\-*/=] *[a-z0-9]/i.test(content); |
| if (hasMathOperator || isSingleVar || isExpression) { |
| const delim = (match.startsWith("[") || content.length > 50) ? "$$" : "$"; |
| return `${delim}${match}${delim}`; |
| } |
| return match; |
| }); |
| const lines = processed.split("\n"); |
| const resultLines = lines.map(line => { |
| const trimmed = line.trim(); |
| if ( |
| (trimmed.includes("\\") || /[_^]/.test(trimmed) || /^[a-z] *=/i.test(trimmed)) && |
| !trimmed.includes("$") && |
| !trimmed.startsWith("#") && |
| !trimmed.startsWith("-") && |
| !trimmed.startsWith("*") && |
| trimmed.length > 0 |
| ) { |
| if (/^[a-zA-Z0-9] *=/.test(trimmed) || /^\\[a-zA-Z]+/.test(trimmed)) { |
| return `$$${trimmed}$$`; |
| } |
| } |
| return line; |
| }); |
| return resultLines.join("\n"); |
| }); |
| let finalProcessed = processedParts.join(""); |
| finalProcessed = finalProcessed.replace(/([^\n])\n- /g, "$1\n\n- "); |
| return finalProcessed; |
| } |
| export function AnswerRenderer({ answer }) { |
| const processedAnswer = preprocessContent(answer); |
| return ( |
| <div className="answer-body"> |
| <ReactMarkdown |
| remarkPlugins={[remarkGfm, remarkMath]} |
| rehypePlugins={[rehypeHighlight, rehypeKatex]} |
| components={{ |
| code({ node, inline, className, children, ...props }) { |
| const match = /language-(\w+)/.exec(className || ""); |
| const content = String(children).replace(/\n$/, ""); |
| |
| if (!inline && match?.[1] === "mermaid") { |
| return <Mermaid chart={content} />; |
| } |
| |
| if (!inline && match?.[1] === "slider") { |
| const imageMatches = content.match(/!\[.*?\]\((.*?)\)/g) || []; |
| const imageUrls = imageMatches.map(m => { |
| const urlMatch = m.match(/\((.*?)\)/); |
| return urlMatch ? urlMatch[1] : null; |
| }).filter(Boolean); |
| return ( |
| <div className="image-slider-container"> |
| {imageUrls.map((url, idx) => ( |
| <div key={idx} className="slider-item"> |
| <img src={url} alt={`Image ${idx + 1}`} loading="lazy" /> |
| </div> |
| ))} |
| </div> |
| ); |
| } |
| const isTree = match?.[1] === "tree" || |
| /[│├└┌┐┘┤┼├─]/.test(content) || |
| (content.includes("|") && /[─━]/.test(content)) || |
| /^[ \t]*[|│].*$/m.test(content); |
| if (!inline && isTree) { |
| const handleCopy = () => { |
| navigator.clipboard.writeText(content); |
| }; |
| return ( |
| <div className="chatgpt-style-block"> |
| <div className="block-header"> |
| <span className="block-title">STRUCTURE</span> |
| <button className="copy-button" title="Copy code" onClick={handleCopy}> |
| <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> |
| </button> |
| </div> |
| <pre className="block-content"> |
| <code>{children}</code> |
| </pre> |
| </div> |
| ); |
| } |
| return !inline && match ? ( |
| <pre className={className}> |
| <code className={className} {...props}> |
| {children} |
| </code> |
| </pre> |
| ) : ( |
| <code className={className} {...props}> |
| {children} |
| </code> |
| ); |
| }, |
| }} |
| > |
| {processedAnswer} |
| </ReactMarkdown> |
| </div> |
| ); |
| } |
|
|
