almost perfect transition

web/src/controllers/ReasoningController/ReasoningMessages/BarContainer.tsx

@@ -5,7 +5,6 @@ import { AnimatePresence } from 'framer-motion';
 import React from 'react';
 import { Text } from '@/components/ui/typography';
 import { cn } from '@/lib/classMerge';
-import { itemAnimationConfig } from './animationConfig';
 
 export const BarContainer: React.FC<{
   showBar: boolean;
@@ -96,7 +95,12 @@ const AnimatedThoughtTitle = React.memo(
     return (
       <AnimatePresence initial={false} mode="wait">
         {title && (
-          <motion.div className="flex" {...itemAnimationConfig} key={title}>
+          <motion.div
+            className="flex"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            key={title}>
             <Text
               size="sm"
               className={cn(

web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessageSelector.stories.tsx

@@ -100,7 +100,7 @@ export const SameIdDifferentTypes: Story = {
           title: 'Text Type',
           secondary_title: 'This is a text message',
           message:
-            'This is a text message that can change types. The message can be a long message that can be scrolled. The message can be a short message that can be displayed in a single line. The message can be a long message that can be scrolled. The message can be a short message that can be displayed in a single line.',
+            'This is a text message that can change types. The message can be a long message that can be scrolled. The message can be a short message that can be displayed in a single line. The message can be a long message that can be scrolled. The message can be a short message that.',
           status: 'completed'
         },
         pills: {
@@ -134,6 +134,13 @@ export const SameIdDifferentTypes: Story = {
                 { text: 'Pill 9', type: 'dashboard', id: 'pill-9' },
                 { text: 'Pill 10', type: 'dashboard', id: 'pill-10' }
               ]
+            },
+            {
+              title: 'Dynamic Pills Quaternary',
+              pills: [
+                { text: 'Pill 11', type: 'metric', id: 'pill-11' },
+                { text: 'Pill 12', type: 'dashboard', id: 'pill-12' }
+              ]
             }
           ]
         },

web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessageSelector.tsx

@@ -57,7 +57,7 @@ export const ReasoningMessageSelector: React.FC<ReasoningMessageSelectorProps> =
       title={title}
       secondaryTitle={secondary_title}>
       <AnimatePresence mode="wait">
-        <motion.div key={animationKey} {...itemAnimationConfig}>
+        <motion.div key={animationKey} {...itemAnimationConfig} className="overflow-hidden" layout>
           <ReasoningMessage
             reasoningMessageId={reasoningMessageId}
             isCompletedStream={isCompletedStream}

web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessage_PillContainers/ReasoningMessagePills.tsx

@@ -16,17 +16,15 @@ const containerVariants = {
   hidden: {
     opacity: 0,
     transition: {
-      height: { duration: duration, ease: 'easeInOut' },
       opacity: { duration: duration * 0.5, ease: 'easeOut' }
     }
   },
   visible: {
     opacity: 1,
     transition: {
-      height: { duration: duration, ease: 'easeInOut' },
-      opacity: { duration: duration * 0.5, ease: 'easeIn' },
-      staggerChildren: 0.125,
-      delayChildren: 0.075
+      opacity: { duration: duration * 0.5, ease: 'easeIn' }
+      // staggerChildren: 0.125,
+      //  delayChildren: 0
     }
   }
 };

web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessage_PillContainers/ReasoningMessagePillsContainer.tsx

@@ -41,7 +41,6 @@ export const ReasoningMessagePillsContainer: React.FC<
   }
 > = ({ pill_containers, status, isCompletedStream }) => {
   const hasPills = !!pill_containers && pill_containers.length > 0;
-  const loadingStatus: NonNullable<BusterChatMessageReasoning_pills['status']> = status;
 
   if (!hasPills) return null;
 

web/src/controllers/ReasoningController/ReasoningMessages/animationConfig.ts

@@ -1,5 +1,31 @@
 export const itemAnimationConfig = {
-  initial: { opacity: 0 },
-  animate: { opacity: 1, transition: { duration: 0.575 } }, // Keep the animate duration the same
-  exit: { opacity: 0, transition: { duration: 0.4 } } // Updated only the exit animation duration to 0.4
+  initial: { opacity: 0, height: 0 },
+  animate: {
+    opacity: 1,
+    height: 'auto',
+    transition: {
+      height: {
+        type: 'spring',
+        stiffness: 400,
+        damping: 35,
+        mass: 1,
+        restDelta: 0.001
+      },
+      opacity: { duration: 0.2 }
+    }
+  },
+  exit: {
+    opacity: 0,
+    height: 0,
+    transition: {
+      height: {
+        type: 'spring',
+        stiffness: 400,
+        damping: 35,
+        mass: 1,
+        restDelta: 0.001
+      },
+      opacity: { duration: 0.15 }
+    }
+  }
 };