From e37be407732f328576ca4aed34b7e2cece1e7da4 Mon Sep 17 00:00:00 2001
From: Henry Li <henry1943@163.com>
Date: Fri, 16 Jan 2026 20:40:09 +0800
Subject: [PATCH] feat: add flip display effect

---
 .../src/components/workspace/flip-display.tsx | 29 +++++++++++++++++++
 .../workspace/message-list/message-group.tsx  | 17 +++++++----
 .../workspace/message-list/message-list.tsx   |  2 +-
 3 files changed, 41 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/components/workspace/flip-display.tsx

diff --git a/frontend/src/components/workspace/flip-display.tsx b/frontend/src/components/workspace/flip-display.tsx
new file mode 100644
index 0000000..6c3a2ca
--- /dev/null
+++ b/frontend/src/components/workspace/flip-display.tsx
@@ -0,0 +1,29 @@
+import { AnimatePresence, motion } from "motion/react";
+
+import { cn } from "@/lib/utils";
+
+export function FlipDisplay({
+  uniqueKey,
+  children,
+  className,
+}: {
+  uniqueKey: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("relative h-6 overflow-hidden", className)}>
+      <AnimatePresence mode="wait">
+        <motion.div
+          key={uniqueKey}
+          initial={{ y: 8, opacity: 0 }}
+          animate={{ y: 2, opacity: 1 }}
+          exit={{ y: -8, opacity: 0 }}
+          transition={{ duration: 0.25, ease: [0.4, 0, 0.2, 1] }}
+        >
+          {children}
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+}
diff --git a/frontend/src/components/workspace/message-list/message-group.tsx b/frontend/src/components/workspace/message-list/message-group.tsx
index 16f9d82..dcc7ae1 100644
--- a/frontend/src/components/workspace/message-list/message-group.tsx
+++ b/frontend/src/components/workspace/message-list/message-group.tsx
@@ -29,6 +29,8 @@ import { useRehypeSplitWordsIntoSpans } from "@/core/rehype";
 import { extractTitleFromMarkdown } from "@/core/utils/markdown";
 import { cn } from "@/lib/utils";
 
+import { FlipDisplay } from "../flip-display";
+
 export function MessageGroup({
   className,
   messages,
@@ -62,17 +64,20 @@ export function MessageGroup({
               {open && steps.length > 1 ? (
                 <div>{steps.length} steps</div>
               ) : (
-                <MessageResponse rehypePlugins={rehypePlugins}>
-                  {label}
-                </MessageResponse>
+                <FlipDisplay uniqueKey={`step-${steps.length}`}>
+                  <MessageResponse rehypePlugins={rehypePlugins}>
+                    {label}
+                  </MessageResponse>
+                </FlipDisplay>
               )}
             </div>
           </div>
           <div>
             {!open && steps.length > 1 && (
-              <div className="tet-xs opacity-60">
-                {steps.length - 1} more step
-                {steps.length - 1 > 1 ? "s" : ""}
+              <div>
+                {steps.length - 1 > 1
+                  ? `${steps.length - 1} more steps`
+                  : `${steps.length - 1} more step`}
               </div>
             )}
           </div>
diff --git a/frontend/src/components/workspace/message-list/message-list.tsx b/frontend/src/components/workspace/message-list/message-list.tsx
index 215b6ab..f947e38 100644
--- a/frontend/src/components/workspace/message-list/message-list.tsx
+++ b/frontend/src/components/workspace/message-list/message-list.tsx
@@ -28,7 +28,7 @@ export function MessageList({
     <Conversation
       className={cn("flex size-full flex-col justify-center pt-2", className)}
     >
-      <ConversationContent className="mx-auto w-full max-w-(--container-width-md) gap-12">
+      <ConversationContent className="mx-auto w-full max-w-(--container-width-md) gap-10">
         {groupMessages(
           thread.messages,
           (groupedMessages) => {