Markdown

1import React from "react";
2import { default as MarkdownRender } from "react-markdown";
3import remarkGfm from "remark-gfm";
4import { cn } from "@/lib/utils";
5import { CodeBlock } from "@/components/chatcn/ai/codeblock";
6 
7type MarkDownProps = {
8  children: React.ReactNode;
9  className?: string;
10  theme?: string;
11};
12 
13export function Markdown({ children, className, theme }: MarkDownProps) {
14  return (
15    <div
16      className={cn(
17        "prose dark:prose-invert max-w-4xl px-3 prose-pre:p-0 prose-pre:resize-none",
18        className
19      )}
20    >
21      <MarkdownRender
22        components={{
23          code({ className, children, ...props }) {
24            const match = /language-(\w+)/.exec(className || "");
25            return match ? (
26              <CodeBlock
27                {...props}
28                lang={"tsx"}
29                theme={
30                  theme == "dark"
31                    ? "github-dark-default"
32                    : "github-light-default"
33                }
34                className={cn("not-prose")}
35              >
36                {String(children).replace(/\n$/, "")}
37              </CodeBlock>
38            ) : (
39              <code className={className} {...props}>
40                {children}
41              </code>
42            );
43          },
44        }}
45        remarkPlugins={[remarkGfm]}
46      >
47        {String(children)}
48      </MarkdownRender>
49    </div>
50  );
51}