fix: agent markdown output

Author: pseudoyu

package.json

@@ -64,6 +64,7 @@
     "react-markdown": "^9.0.1",
     "react-responsive": "^10.0.0",
     "recharts": "^3.1.2",
+    "remark-gfm": "^4.0.1",
     "server-only": "^0.0.1",
     "sonic-boom": "^4.2.0",
     "streamdown": "^1.6.10",

pnpm-lock.yaml

@@ -4,59 +4,8 @@ import {
   MessagePrimitive,
   type ToolCallMessagePartProps,
 } from "@assistant-ui/react";
-import ReactMarkdown from "react-markdown";
-import type { FC, ReactNode } from "react";
-
-const markdownComponents = {
-  h1: ({ children }: { children?: ReactNode }) => (
-    <h1 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">
-      {children}
-    </h1>
-  ),
-  h2: ({ children }: { children?: ReactNode }) => (
-    <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100 mb-2 mt-4">
-      {children}
-    </h2>
-  ),
-  h3: ({ children }: { children?: ReactNode }) => (
-    <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2 mt-3">
-      {children}
-    </h3>
-  ),
-  p: ({ children }: { children?: ReactNode }) => (
-    <p className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed mb-3">
-      {children}
-    </p>
-  ),
-  strong: ({ children }: { children?: ReactNode }) => (
-    <strong className="font-semibold text-gray-900 dark:text-gray-100">
-      {children}
-    </strong>
-  ),
-  ul: ({ children }: { children?: ReactNode }) => (
-    <ul className="list-disc ml-4 mb-3 space-y-1 text-sm text-gray-700 dark:text-gray-300">
-      {children}
-    </ul>
-  ),
-  ol: ({ children }: { children?: ReactNode }) => (
-    <ol className="list-decimal ml-4 mb-3 space-y-1 text-sm text-gray-700 dark:text-gray-300">
-      {children}
-    </ol>
-  ),
-  li: ({ children }: { children?: ReactNode }) => (
-    <li className="leading-relaxed">{children}</li>
-  ),
-  code: ({ children }: { children?: ReactNode }) => (
-    <code className="bg-gray-100 dark:bg-gray-800 text-primary px-1 py-0.5 rounded text-xs font-mono">
-      {children}
-    </code>
-  ),
-  pre: ({ children }: { children?: ReactNode }) => (
-    <pre className="bg-gray-50 dark:bg-gray-900 rounded-lg p-3 overflow-x-auto mb-3 text-xs">
-      {children}
-    </pre>
-  ),
-};
+import type { FC } from "react";
+import { MarkdownText } from "./markdown-text";
 
 // Only show a minimal loading indicator while tool is running, hide result
 const ToolFallback: FC<ToolCallMessagePartProps> = ({ toolName, result }) => {
@@ -89,11 +38,7 @@ const AssistantMessage: FC = () => {
       <div className="max-w-[95%]">
         <MessagePrimitive.Content
           components={{
-            Text: ({ text }) => (
-              <ReactMarkdown components={markdownComponents}>
-                {text}
-              </ReactMarkdown>
-            ),
+            Text: MarkdownText,
             tools: {
               Fallback: ToolFallback,
             },

src/components/assistant-ui/assistant-message.tsx

@@ -3,3 +3,4 @@ export { Thread } from "./thread";
 export { Composer } from "./composer";
 export { AssistantMessage } from "./assistant-message";
 export { UserMessage } from "./user-message";
+export { MarkdownText } from "./markdown-text";