|
| 1 | +"use client"; |
| 2 | + |
| 3 | +import "@assistant-ui/react-markdown/styles/dot.css"; |
| 4 | + |
| 5 | +import { |
| 6 | + CodeHeaderProps, |
| 7 | + MarkdownTextPrimitive, |
| 8 | + unstable_memoizeMarkdownComponents as memoizeMarkdownComponents, |
| 9 | + useIsMarkdownCodeBlock, |
| 10 | +} from "@assistant-ui/react-markdown"; |
| 11 | +import remarkGfm from "remark-gfm"; |
| 12 | +import { FC, memo, useState } from "react"; |
| 13 | +import { CheckIcon, CopyIcon } from "lucide-react"; |
| 14 | + |
| 15 | +import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button"; |
| 16 | +import { cn } from "@/lib/utils"; |
| 17 | + |
| 18 | +const MarkdownTextImpl = () => { |
| 19 | + return ( |
| 20 | + <MarkdownTextPrimitive |
| 21 | + remarkPlugins={[remarkGfm]} |
| 22 | + className="aui-md" |
| 23 | + components={defaultComponents} |
| 24 | + /> |
| 25 | + ); |
| 26 | +}; |
| 27 | + |
| 28 | +export const MarkdownText = memo(MarkdownTextImpl); |
| 29 | + |
| 30 | +const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => { |
| 31 | + const { isCopied, copyToClipboard } = useCopyToClipboard(); |
| 32 | + const onCopy = () => { |
| 33 | + if (!code || isCopied) return; |
| 34 | + copyToClipboard(code); |
| 35 | + }; |
| 36 | + |
| 37 | + return ( |
| 38 | + <div className="flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white"> |
| 39 | + <span className="lowercase [&>span]:text-xs">{language}</span> |
| 40 | + <TooltipIconButton tooltip="Copy" onClick={onCopy}> |
| 41 | + {!isCopied && <CopyIcon />} |
| 42 | + {isCopied && <CheckIcon />} |
| 43 | + </TooltipIconButton> |
| 44 | + </div> |
| 45 | + ); |
| 46 | +}; |
| 47 | + |
| 48 | +const useCopyToClipboard = ({ |
| 49 | + copiedDuration = 3000, |
| 50 | +}: { |
| 51 | + copiedDuration?: number; |
| 52 | +} = {}) => { |
| 53 | + const [isCopied, setIsCopied] = useState<boolean>(false); |
| 54 | + |
| 55 | + const copyToClipboard = (value: string) => { |
| 56 | + if (!value) return; |
| 57 | + |
| 58 | + navigator.clipboard.writeText(value).then(() => { |
| 59 | + setIsCopied(true); |
| 60 | + setTimeout(() => setIsCopied(false), copiedDuration); |
| 61 | + }); |
| 62 | + }; |
| 63 | + |
| 64 | + return { isCopied, copyToClipboard }; |
| 65 | +}; |
| 66 | + |
| 67 | +const defaultComponents = memoizeMarkdownComponents({ |
| 68 | + h1: ({ className, ...props }) => ( |
| 69 | + <h1 className={cn("mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0", className)} {...props} /> |
| 70 | + ), |
| 71 | + h2: ({ className, ...props }) => ( |
| 72 | + <h2 className={cn("mb-4 mt-8 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0", className)} {...props} /> |
| 73 | + ), |
| 74 | + h3: ({ className, ...props }) => ( |
| 75 | + <h3 className={cn("mb-4 mt-6 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0", className)} {...props} /> |
| 76 | + ), |
| 77 | + h4: ({ className, ...props }) => ( |
| 78 | + <h4 className={cn("mb-4 mt-6 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0", className)} {...props} /> |
| 79 | + ), |
| 80 | + h5: ({ className, ...props }) => ( |
| 81 | + <h5 className={cn("my-4 text-lg font-semibold first:mt-0 last:mb-0", className)} {...props} /> |
| 82 | + ), |
| 83 | + h6: ({ className, ...props }) => ( |
| 84 | + <h6 className={cn("my-4 font-semibold first:mt-0 last:mb-0", className)} {...props} /> |
| 85 | + ), |
| 86 | + p: ({ className, ...props }) => ( |
| 87 | + <p className={cn("mb-5 mt-5 leading-7 first:mt-0 last:mb-0", className)} {...props} /> |
| 88 | + ), |
| 89 | + a: ({ className, ...props }) => ( |
| 90 | + <a className={cn("text-primary font-medium underline underline-offset-4", className)} {...props} /> |
| 91 | + ), |
| 92 | + blockquote: ({ className, ...props }) => ( |
| 93 | + <blockquote className={cn("border-l-2 pl-6 italic", className)} {...props} /> |
| 94 | + ), |
| 95 | + ul: ({ className, ...props }) => ( |
| 96 | + <ul className={cn("my-5 ml-6 list-disc [&>li]:mt-2", className)} {...props} /> |
| 97 | + ), |
| 98 | + ol: ({ className, ...props }) => ( |
| 99 | + <ol className={cn("my-5 ml-6 list-decimal [&>li]:mt-2", className)} {...props} /> |
| 100 | + ), |
| 101 | + hr: ({ className, ...props }) => ( |
| 102 | + <hr className={cn("my-5 border-b", className)} {...props} /> |
| 103 | + ), |
| 104 | + table: ({ className, ...props }) => ( |
| 105 | + <table className={cn("my-5 w-full border-separate border-spacing-0 overflow-y-auto", className)} {...props} /> |
| 106 | + ), |
| 107 | + th: ({ className, ...props }) => ( |
| 108 | + <th className={cn("bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right", className)} {...props} /> |
| 109 | + ), |
| 110 | + td: ({ className, ...props }) => ( |
| 111 | + <td className={cn("border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right", className)} {...props} /> |
| 112 | + ), |
| 113 | + tr: ({ className, ...props }) => ( |
| 114 | + <tr className={cn("m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg", className)} {...props} /> |
| 115 | + ), |
| 116 | + sup: ({ className, ...props }) => ( |
| 117 | + <sup className={cn("[&>a]:text-xs [&>a]:no-underline", className)} {...props} /> |
| 118 | + ), |
| 119 | + pre: ({ className, ...props }) => ( |
| 120 | + <pre className={cn("overflow-x-auto rounded-b-lg bg-black p-4 text-white", className)} {...props} /> |
| 121 | + ), |
| 122 | + code: function Code({ className, ...props }) { |
| 123 | + const isCodeBlock = useIsMarkdownCodeBlock(); |
| 124 | + return ( |
| 125 | + <code |
| 126 | + className={cn(!isCodeBlock && "bg-muted rounded border font-semibold", className)} |
| 127 | + {...props} |
| 128 | + /> |
| 129 | + ); |
| 130 | + }, |
| 131 | + CodeHeader, |
| 132 | +}); |
0 commit comments