feat: Improved markdown rendering

2025-03-17 12:33:59 -07:00
parent ddc477532c
commit 5c6f27b2a1
5 changed files with 2221 additions and 4569 deletions
--- a/src/components/thread/markdown-styles.css
+++ b/src/components/thread/markdown-styles.css
@@ -0,0 +1,45 @@
+/* Base markdown styles */
+.markdown-content code:not(pre code) {
+  background-color: rgba(0, 0, 0, 0.05);
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+
+.markdown-content a {
+  color: #0070f3;
+  text-decoration: none;
+}
+
+.markdown-content a:hover {
+  text-decoration: underline;
+}
+
+.markdown-content blockquote {
+  border-left: 4px solid #ddd;
+  padding-left: 1rem;
+  color: #666;
+}
+
+.markdown-content pre {
+  overflow-x: auto;
+}
+
+.markdown-content table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.markdown-content th,
+.markdown-content td {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+.markdown-content th {
+  background-color: #f2f2f2;
+}
+
+.markdown-content tr:nth-child(even) {
+  background-color: #f9f9f9;
+}
--- a/src/components/thread/markdown-text.tsx
+++ b/src/components/thread/markdown-text.tsx
@@ -1,12 +1,7 @@
 "use client";

-import "@assistant-ui/react-markdown/styles/dot.css";
+import "./markdown-styles.css";

-import {
-  CodeHeaderProps,
-  unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,
-  useIsMarkdownCodeBlock,
-} from "@assistant-ui/react-markdown";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeKatex from "rehype-katex";
@@ -20,37 +15,10 @@ import { cn } from "@/lib/utils";

 import "katex/dist/katex.min.css";

-const MarkdownTextImpl = ({ children }: { children: string }) => {
-  return (
-    <ReactMarkdown
-      remarkPlugins={[remarkGfm, remarkMath]}
-      rehypePlugins={[rehypeKatex]}
-      components={defaultComponents}
-    >
-      {children}
-    </ReactMarkdown>
-  );
-};
-
-export const MarkdownText = memo(MarkdownTextImpl);
-
-const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
-  const { isCopied, copyToClipboard } = useCopyToClipboard();
-  const onCopy = () => {
-    if (!code || isCopied) return;
-    copyToClipboard(code);
-  };
-
-  return (
-    <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">
-      <span className="lowercase [&>span]:text-xs">{language}</span>
-      <TooltipIconButton tooltip="Copy" onClick={onCopy}>
-        {!isCopied && <CopyIcon />}
-        {isCopied && <CheckIcon />}
-      </TooltipIconButton>
-    </div>
-  );
-};
+interface CodeHeaderProps {
+  language?: string;
+  code: string;
+}

 const useCopyToClipboard = ({
  copiedDuration = 3000,
@@ -71,8 +39,26 @@ const useCopyToClipboard = ({
  return { isCopied, copyToClipboard };
 };

-const defaultComponents = memoizeMarkdownComponents({
-  h1: ({ className, ...props }) => (
+const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
+  const { isCopied, copyToClipboard } = useCopyToClipboard();
+  const onCopy = () => {
+    if (!code || isCopied) return;
+    copyToClipboard(code);
+  };
+
+  return (
+    <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">
+      <span className="lowercase [&>span]:text-xs">{language}</span>
+      <TooltipIconButton tooltip="Copy" onClick={onCopy}>
+        {!isCopied && <CopyIcon />}
+        {isCopied && <CheckIcon />}
+      </TooltipIconButton>
+    </div>
+  );
+};
+
+const defaultComponents: any = {
+  h1: ({ className, ...props }: { className?: string }) => (
    <h1
      className={cn(
        "mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0",
@@ -81,7 +67,7 @@ const defaultComponents = memoizeMarkdownComponents({
      {...props}
    />
  ),
-  h2: ({ className, ...props }) => (
+  h2: ({ className, ...props }: { className?: string }) => (
    <h2
      className={cn(
        "mb-4 mt-8 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0",
@@ -90,7 +76,7 @@ const defaultComponents = memoizeMarkdownComponents({
      {...props}
    />
  ),
-  h3: ({ className, ...props }) => (
+  h3: ({ className, ...props }: { className?: string }) => (
    <h3
      className={cn(
        "mb-4 mt-6 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0",
@@ -99,7 +85,7 @@ const defaultComponents = memoizeMarkdownComponents({
      {...props}
    />
  ),
-  h4: ({ className, ...props }) => (
+  h4: ({ className, ...props }: { className?: string }) => (
    <h4
      className={cn(
        "mb-4 mt-6 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0",
@@ -108,7 +94,7 @@ const defaultComponents = memoizeMarkdownComponents({
      {...props}
    />
  ),
-  h5: ({ className, ...props }) => (
+  h5: ({ className, ...props }: { className?: string }) => (
    <h5
      className={cn(
        "my-4 text-lg font-semibold first:mt-0 last:mb-0",
@@ -117,19 +103,19 @@ const defaultComponents = memoizeMarkdownComponents({
      {...props}
    />
  ),
-  h6: ({ className, ...props }) => (
+  h6: ({ className, ...props }: { className?: string }) => (
    <h6
      className={cn("my-4 font-semibold first:mt-0 last:mb-0", className)}
      {...props}
    />
  ),
-  p: ({ className, ...props }) => (
+  p: ({ className, ...props }: { className?: string }) => (
    <p
      className={cn("mb-5 mt-5 leading-7 first:mt-0 last:mb-0", className)}
      {...props}
    />
  ),
-  a: ({ className, ...props }) => (
+  a: ({ className, ...props }: { className?: string }) => (
    <a
      className={cn(
        "text-primary font-medium underline underline-offset-4",
@@ -138,28 +124,28 @@ const defaultComponents = memoizeMarkdownComponents({
      {...props}
    />
  ),
-  blockquote: ({ className, ...props }) => (
+  blockquote: ({ className, ...props }: { className?: string }) => (
    <blockquote
      className={cn("border-l-2 pl-6 italic", className)}
      {...props}
    />
  ),
-  ul: ({ className, ...props }) => (
+  ul: ({ className, ...props }: { className?: string }) => (
    <ul
      className={cn("my-5 ml-6 list-disc [&>li]:mt-2", className)}
      {...props}
    />
  ),
-  ol: ({ className, ...props }) => (
+  ol: ({ className, ...props }: { className?: string }) => (
    <ol
      className={cn("my-5 ml-6 list-decimal [&>li]:mt-2", className)}
      {...props}
    />
  ),
-  hr: ({ className, ...props }) => (
+  hr: ({ className, ...props }: { className?: string }) => (
    <hr className={cn("my-5 border-b", className)} {...props} />
  ),
-  table: ({ className, ...props }) => (
+  table: ({ className, ...props }: { className?: string }) => (
    <table
      className={cn(
        "my-5 w-full border-separate border-spacing-0 overflow-y-auto",
@@ -168,7 +154,7 @@ const defaultComponents = memoizeMarkdownComponents({
      {...props}
    />
  ),
-  th: ({ className, ...props }) => (
+  th: ({ className, ...props }: { className?: string }) => (
    <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",
@@ -177,7 +163,7 @@ const defaultComponents = memoizeMarkdownComponents({
      {...props}
    />
  ),
-  td: ({ className, ...props }) => (
+  td: ({ className, ...props }: { className?: string }) => (
    <td
      className={cn(
        "border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right",
@@ -186,7 +172,7 @@ const defaultComponents = memoizeMarkdownComponents({
      {...props}
    />
  ),
-  tr: ({ className, ...props }) => (
+  tr: ({ className, ...props }: { className?: string }) => (
    <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",
@@ -195,30 +181,58 @@ const defaultComponents = memoizeMarkdownComponents({
      {...props}
    />
  ),
-  sup: ({ className, ...props }) => (
+  sup: ({ className, ...props }: { className?: string }) => (
    <sup
      className={cn("[&>a]:text-xs [&>a]:no-underline", className)}
      {...props}
    />
  ),
-  pre: ({ className, ...props }) => (
+  pre: ({ className, ...props }: { className?: string }) => (
    <pre
      className={cn(
-        "overflow-x-auto rounded-b-lg bg-black p-4 text-white max-w-4xl",
+        "overflow-x-auto rounded-lg bg-black text-white max-w-4xl",
        className,
      )}
      {...props}
    />
  ),
-  code: function Code({ className, ...props }) {
-    const isCodeBlock = useIsMarkdownCodeBlock();
+  code: ({ className, children, ...props }: { className?: string; children: React.ReactNode }) => {
+    const match = /language-(\w+)/.exec(className || '');
+    
+    if (match) {
+      const language = match[1];
+      const code = String(children).replace(/\n$/, '');
+      
+      return (
+        <>
+          <CodeHeader language={language} code={code} />
+          <SyntaxHighlighter language={language} className={className}>
+            {code}
+          </SyntaxHighlighter>
+        </>
+      );
+    }
+    
    return (
-      <code
-        className={cn(!isCodeBlock && "rounded font-semibold", className)}
-        {...props}
-      />
+      <code className={cn("rounded font-semibold", className)} {...props}>
+        {children}
+      </code>
    );
-  },
-  CodeHeader,
-  SyntaxHighlighter,
-});
+  }
+};
+
+const MarkdownTextImpl: FC<{ children: string }> = ({ children }) => {
+  return (
+    <div className="markdown-content">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm, remarkMath]}
+        rehypePlugins={[rehypeKatex]}
+        components={defaultComponents}
+      >
+        {children}
+      </ReactMarkdown>
+    </div>
+  );
+};
+
+export const MarkdownText = memo(MarkdownTextImpl);
--- a/src/components/thread/syntax-highlighter.tsx
+++ b/src/components/thread/syntax-highlighter.tsx
@@ -1,24 +1,36 @@
-import { PrismAsyncLight } from "react-syntax-highlighter";
-import { makePrismAsyncLightSyntaxHighlighter } from "@assistant-ui/react-syntax-highlighter";
-
+import { PrismAsyncLight as SyntaxHighlighterPrism } from "react-syntax-highlighter";
 import tsx from "react-syntax-highlighter/dist/esm/languages/prism/tsx";
 import python from "react-syntax-highlighter/dist/esm/languages/prism/python";
-
 import { coldarkDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { FC } from "react";

-// register languages you want to support
-PrismAsyncLight.registerLanguage("js", tsx);
-PrismAsyncLight.registerLanguage("jsx", tsx);
-PrismAsyncLight.registerLanguage("ts", tsx);
-PrismAsyncLight.registerLanguage("tsx", tsx);
-PrismAsyncLight.registerLanguage("python", python);
+// Register languages you want to support
+SyntaxHighlighterPrism.registerLanguage("js", tsx);
+SyntaxHighlighterPrism.registerLanguage("jsx", tsx);
+SyntaxHighlighterPrism.registerLanguage("ts", tsx);
+SyntaxHighlighterPrism.registerLanguage("tsx", tsx);
+SyntaxHighlighterPrism.registerLanguage("python", python);

-export const SyntaxHighlighter = makePrismAsyncLightSyntaxHighlighter({
-  style: coldarkDark,
-  customStyle: {
-    margin: 0,
-    width: "100%",
-    background: "transparent",
-    padding: "1.5rem 1rem",
-  },
-});
+interface SyntaxHighlighterProps {
+  children: string;
+  language: string;
+  className?: string;
+}
+
+export const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({ children, language, className }) => {
+  return (
+    <SyntaxHighlighterPrism
+      language={language}
+      style={coldarkDark}
+      customStyle={{
+        margin: 0,
+        width: "100%",
+        background: "transparent",
+        padding: "1.5rem 1rem",
+      }}
+      className={className}
+    >
+      {children}
+    </SyntaxHighlighterPrism>
+  );
+};