feat: add flip display effect

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>

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) => {