feat: react-ui Markdown support (#332)

Yonom · Jun 26, 2024 · eca37cf · eca37cf
1 parent d52c345
commit eca37cf
Show file tree

Hide file tree

Showing 7 changed files with 545 additions and 102 deletions.
diff --git a/packages/react-ui/components/ui/assistant-ui/markdown-text.tsx b/packages/react-ui/components/ui/assistant-ui/markdown-text.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import { MarkdownTextPrimitive } from "@assistant-ui/react-markdown";
+import remarkGfm from "remark-gfm";
+import { memo } from "react";
+import { cn } from "@/lib/utils";
+
+const MarkdownTextImpl = () => {
+  return (
+    <MarkdownTextPrimitive
+      remarkPlugins={[remarkGfm]}
+      components={{
+        h1: ({ node, className, ...props }) => (
+          <h1
+            className={cn(
+              "mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0",
+              className,
+            )}
+            {...props}
+          />
+        ),
+        h2: ({ node, className, ...props }) => (
+          <h2
+            className={cn(
+              "mb-4 mt-8 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0",
+              className,
+            )}
+            {...props}
+          />
+        ),
+        h3: ({ node, className, ...props }) => (
+          <h3
+            className={cn(
+              "mb-4 mt-6 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0",
+              className,
+            )}
+            {...props}
+          />
+        ),
+        h4: ({ node, className, ...props }) => (
+          <h4
+            className={cn(
+              "mb-4 mt-6 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0",
+              className,
+            )}
+            {...props}
+          />
+        ),
+        h5: ({ node, className, ...props }) => (
+          <h5
+            className={cn(
+              "my-4 text-lg font-semibold first:mt-0 last:mb-0",
+              className,
+            )}
+            {...props}
+          />
+        ),
+        h6: ({ node, className, ...props }) => (
+          <h6
+            className={cn("my-4 font-semibold first:mt-0 last:mb-0", className)}
+            {...props}
+          />
+        ),
+        p: ({ node, className, ...props }) => (
+          <p
+            className={cn(
+              "mb-5 mt-5 leading-7 first:mt-0 last:mb-0",
+              className,
+            )}
+            {...props}
+          />
+        ),
+        a: ({ node, ...props }) => (
+          <a
+            className={cn(
+              "text-primary font-medium underline underline-offset-4",
+              props.className,
+            )}
+            {...props}
+          />
+        ),
+        blockquote: ({ node, ...props }) => (
+          <blockquote
+            className={cn("border-l-2 pl-6 italic", props.className)}
+            {...props}
+          />
+        ),
+        ul: ({ node, ...props }) => (
+          <ul
+            className={cn("my-5 ml-6 list-disc [&>li]:mt-2", props.className)}
+            {...props}
+          />
+        ),
+        ol: ({ node, ...props }) => (
+          <ol
+            className={cn(
+              "my-5 ml-6 list-decimal [&>li]:mt-2",
+              props.className,
+            )}
+            {...props}
+          />
+        ),
+        hr: ({ node, ...props }) => (
+          <hr className={cn("my-5 border-b", props.className)} {...props} />
+        ),
+
+        table: ({ node, ...props }) => (
+          <table
+            className={cn(
+              "my-5 w-full border-separate border-spacing-0 overflow-y-auto",
+              props.className,
+            )}
+            {...props}
+          />
+        ),
+        th: ({ node, ...props }) => (
+          <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",
+              props.className,
+            )}
+            {...props}
+          />
+        ),
+        td: ({ node, ...props }) => (
+          <td
+            className={cn(
+              "border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right",
+              props.className,
+            )}
+            {...props}
+          />
+        ),
+        tr: ({ node, ...props }) => (
+          <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",
+              props.className,
+            )}
+            {...props}
+          />
+        ),
+
+        sup: ({ node, ...props }) => (
+          <sup
+            className={cn("[&>a]:text-xs [&>a]:no-underline", props.className)}
+            {...props}
+          />
+        ),
+      }}
+    />
+  );
+};
+
+export const MarkdownText = memo(MarkdownTextImpl);