feat: use tailwindcss-typography as markdown styling

web/src/app/_components/markdown.tsx

@@ -39,7 +39,10 @@ export function Markdown({
   }, [animate]);
   return (
     <div
-      className={cn(className, "markdown flex flex-col gap-4")}
+      className={cn(
+        className,
+        "prose dark:prose-invert prose-p:my-0 prose-img:mt-0 flex flex-col gap-4",
+      )}
       style={style}
     >
       <ReactMarkdown

web/src/app/_components/message-list-view.tsx

@@ -316,13 +316,13 @@ function PlanCard({
     <Card className={cn("w-full", className)}>
       <CardHeader>
         <CardTitle>
-          <h1 className="text-xl font-medium">
-            <Markdown animate>
-              {plan.title !== undefined && plan.title !== ""
+          <Markdown animate>
+            {`### ${
+              plan.title !== undefined && plan.title !== ""
                 ? plan.title
-                : "Deep Research"}
-            </Markdown>
-          </h1>
+                : "Deep Research"
+            }`}
+          </Markdown>
         </CardTitle>
       </CardHeader>
       <CardContent>

web/src/app/_components/research-report-block.tsx

@@ -1,10 +1,10 @@
 // Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 // SPDX-License-Identifier: MIT
 
-import { useRef } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
 
 import ReportEditor from "~/components/editor";
-import { useMessage } from "~/core/store";
+import { useMessage, useStore } from "~/core/store";
 import { cn } from "~/lib/utils";
 
 import { LoadingAnimation } from "./loading-animation";
@@ -19,15 +19,45 @@ export function ResearchReportBlock({
   messageId: string;
 }) {
   const message = useMessage(messageId);
+  const handleMarkdownChange = useCallback(
+    (markdown: string) => {
+      if (message) {
+        message.content = markdown;
+        useStore.setState({
+          messages: new Map(useStore.getState().messages).set(
+            message.id,
+            message,
+          ),
+        });
+      }
+    },
+    [message],
+  );
   const contentRef = useRef<HTMLDivElement>(null);
   const isCompleted = message?.isStreaming === false && message?.content !== "";
+  // TODO: scroll to top when completed, but it's not working
+  // useEffect(() => {
+  //   if (isCompleted && contentRef.current) {
+  //     setTimeout(() => {
+  //       contentRef
+  //         .current!.closest("[data-radix-scroll-area-viewport]")
+  //         ?.scrollTo({
+  //           top: 0,
+  //           behavior: "smooth",
+  //         });
+  //     }, 500);
+  //   }
+  // }, [isCompleted]);
   return (
     <div
       ref={contentRef}
-      className={cn("relative flex flex-col pb-8", className)}
+      className={cn("relative flex flex-col pt-4 pb-8", className)}
     >
       {isCompleted ? (
-        <ReportEditor content={message?.content} />
+        <ReportEditor
+          content={message?.content}
+          onMarkdownChange={handleMarkdownChange}
+        />
       ) : (
         <>
           <Markdown animate>{message?.content}</Markdown>