refactor: rename to animated

web/src/app/chat/components/message-list-view.tsx

@@ -10,7 +10,10 @@ import { LoadingAnimation } from "~/components/deer-flow/loading-animation";
 import { Markdown } from "~/components/deer-flow/markdown";
 import { RainbowText } from "~/components/deer-flow/rainbow-text";
 import { RollingText } from "~/components/deer-flow/rolling-text";
-import { ScrollContainer, type ScrollContainerRef } from "~/components/deer-flow/scroll-container";
+import {
+  ScrollContainer,
+  type ScrollContainerRef,
+} from "~/components/deer-flow/scroll-container";
 import { Tooltip } from "~/components/deer-flow/tooltip";
 import { Button } from "~/components/ui/button";
 import {
@@ -81,7 +84,9 @@ export function MessageListView({
         scrollContainerRef.current.scrollToBottom();
       }
     }, 500);
-    return () => { clearTimeout(timer); };
+    return () => {
+      clearTimeout(timer);
+    };
   }, []);
 
   return (
@@ -119,7 +124,7 @@ function MessageListItem({
   interruptMessage,
   onFeedback,
   onSendMessage,
-  onToggleResearch
+  onToggleResearch,
 }: {
   className?: string;
   messageId: string;
@@ -166,7 +171,10 @@ function MessageListItem({
       } else if (startOfResearch) {
         content = (
           <div className="w-full px-4">
-            <ResearchCard researchId={message.id} onToggleResearch={onToggleResearch} />
+            <ResearchCard
+              researchId={message.id}
+              onToggleResearch={onToggleResearch}
+            />
           </div>
         );
       } else {
@@ -234,7 +242,7 @@ function MessageListItem({
   function ResearchCard({
     className,
     researchId,
-    onToggleResearch
+    onToggleResearch,
   }: {
     className?: string;
     researchId: string;
@@ -332,8 +340,9 @@ function PlanCard({
     <Card className={cn("w-full", className)}>
       <CardHeader>
         <CardTitle>
-          <Markdown animate>
-            {`### ${plan.title !== undefined && plan.title !== ""
+          <Markdown animated>
+            {`### ${
+              plan.title !== undefined && plan.title !== ""
                 ? plan.title
                 : "Deep Research"
             }`}
@@ -341,7 +350,7 @@ function PlanCard({
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <Markdown className="opacity-80" animate>
+        <Markdown className="opacity-80" animated>
           {plan.thought}
         </Markdown>
         {plan.steps && (
@@ -349,10 +358,10 @@ function PlanCard({
             {plan.steps.map((step, i) => (
               <li key={`step-${i}`}>
                 <h3 className="mb text-lg font-medium">
-                  <Markdown animate>{step.title}</Markdown>
+                  <Markdown animated>{step.title}</Markdown>
                 </h3>
                 <div className="text-muted-foreground text-sm">
-                  <Markdown animate>{step.description}</Markdown>
+                  <Markdown animated>{step.description}</Markdown>
                 </div>
               </li>
             ))}

web/src/app/chat/components/research-activities-block.tsx

@@ -75,7 +75,7 @@ function ActivityMessage({ messageId }: { messageId: string }) {
     if (message.agent !== "reporter" && message.agent !== "planner") {
       return (
         <div className="px-4 py-2">
-          <Markdown animate>{message.content}</Markdown>
+          <Markdown animated>{message.content}</Markdown>
         </div>
       );
     }

web/src/app/chat/components/research-report-block.tsx

@@ -62,7 +62,7 @@ export function ResearchReportBlock({
         />
       ) : (
         <>
-          <Markdown animate>{message?.content}</Markdown>
+          <Markdown animated>{message?.content}</Markdown>
           {message?.isStreaming && <LoadingAnimation className="my-12" />}
         </>
       )}

web/src/components/deer-flow/markdown.tsx

@@ -24,20 +24,20 @@ export function Markdown({
   children,
   style,
   enableCopy,
-  animate = false,
+  animated = false,
   ...props
 }: ReactMarkdownOptions & {
   className?: string;
   enableCopy?: boolean;
   style?: React.CSSProperties;
-  animate?: boolean;
+  animated?: boolean;
 }) {
   const rehypePlugins = useMemo(() => {
-    if (animate) {
+    if (animated) {
       return [rehypeKatex, rehypeSplitWordsIntoSpans];
     }
     return [rehypeKatex];
-  }, [animate]);
+  }, [animated]);
   return (
     <div
       className={cn(