90 lines
2.9 KiB
TypeScript
90 lines
2.9 KiB
TypeScript
import { CornerUpLeft } from "lucide-react"
|
|
import { Components } from "react-markdown"
|
|
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
|
|
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism"
|
|
import { Button } from "../../../ui/button"
|
|
import { stringifyContent } from "./chatUtils"
|
|
|
|
// Create markdown components for chat message component
|
|
export const createMarkdownComponents = (
|
|
renderCopyButton: (text: any) => JSX.Element,
|
|
renderMarkdownElement: (props: any) => JSX.Element,
|
|
askAboutCode: (code: any) => void
|
|
): Components => ({
|
|
code: ({
|
|
node,
|
|
className,
|
|
children,
|
|
...props
|
|
}: {
|
|
node?: import("hast").Element
|
|
className?: string
|
|
children?: React.ReactNode
|
|
[key: string]: any
|
|
}) => {
|
|
const match = /language-(\w+)/.exec(className || "")
|
|
|
|
return match ? (
|
|
<div className="relative border border-input rounded-md my-4">
|
|
<div className="absolute top-0 left-0 px-2 py-1 text-xs font-semibold text-gray-200 bg-#1e1e1e rounded-tl">
|
|
{match[1]}
|
|
</div>
|
|
<div className="absolute top-0 right-0 flex">
|
|
{renderCopyButton(children)}
|
|
<Button
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
askAboutCode(children)
|
|
}}
|
|
size="sm"
|
|
variant="ghost"
|
|
className="p-1 h-6"
|
|
>
|
|
<CornerUpLeft className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="pt-6">
|
|
<SyntaxHighlighter
|
|
style={vscDarkPlus as any}
|
|
language={match[1]}
|
|
PreTag="div"
|
|
customStyle={{
|
|
margin: 0,
|
|
padding: "0.5rem",
|
|
fontSize: "0.875rem",
|
|
}}
|
|
>
|
|
{stringifyContent(children)}
|
|
</SyntaxHighlighter>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<code className={className} {...props}>
|
|
{children}
|
|
</code>
|
|
)
|
|
},
|
|
// Render markdown elements
|
|
p: ({ node, children, ...props }) =>
|
|
renderMarkdownElement({ node, children, ...props }),
|
|
h1: ({ node, children, ...props }) =>
|
|
renderMarkdownElement({ node, children, ...props }),
|
|
h2: ({ node, children, ...props }) =>
|
|
renderMarkdownElement({ node, children, ...props }),
|
|
h3: ({ node, children, ...props }) =>
|
|
renderMarkdownElement({ node, children, ...props }),
|
|
h4: ({ node, children, ...props }) =>
|
|
renderMarkdownElement({ node, children, ...props }),
|
|
h5: ({ node, children, ...props }) =>
|
|
renderMarkdownElement({ node, children, ...props }),
|
|
h6: ({ node, children, ...props }) =>
|
|
renderMarkdownElement({ node, children, ...props }),
|
|
ul: (props) => (
|
|
<ul className="list-disc pl-6 mb-4 space-y-2">{props.children}</ul>
|
|
),
|
|
ol: (props) => (
|
|
<ol className="list-decimal pl-6 mb-4 space-y-2">{props.children}</ol>
|
|
),
|
|
})
|