📝 CodeRabbit Chat: Implement requested code changes

components/chat-messages.tsx

@@ -62,6 +62,7 @@ export function ChatMessages({ messages }: ChatMessagesProps) {
             isLastMessage={
               groupedMessage.id === messages[messages.length - 1].id
             }
+            index={index}
           />
         )
       )}

components/collapsible-message.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import {
   Collapsible,
   CollapsibleTrigger,
@@ -9,7 +9,7 @@ import {
 import { Button } from './ui/button'
 import { ChevronDown } from 'lucide-react'
 import { StreamableValue, useStreamableValue } from 'ai/rsc'
-import { motion, AnimatePresence } from 'framer-motion'
+import { motion, AnimatePresence, useInView } from 'framer-motion'
 import { cn } from '@/lib/utils'
 import { Separator } from './ui/separator'
 
@@ -20,71 +20,93 @@ interface CollapsibleMessageProps {
     component: React.ReactNode
   }
   isLastMessage?: boolean
+  index?: number
 }
 
 export const CollapsibleMessage: React.FC<CollapsibleMessageProps> = ({
   message,
-  isLastMessage = false
+  isLastMessage = false,
+  index = 0
 }) => {
   const [data] = useStreamableValue(message.isCollapsed)
   const isCollapsed = data ?? false
   const [open, setOpen] = useState(isLastMessage)
+  const ref = useRef<HTMLDivElement>(null)
+  const isInView = useInView(ref, { once: true, margin: '0px 0px -50px 0px' })
 
   useEffect(() => {
     setOpen(isLastMessage)
   }, [isCollapsed, isLastMessage])
 
-  // if not collapsed, return the component
+  const staggerDelay = index * 0.08
+
+  // if not collapsed, return the component with entrance animation
   if (!isCollapsed) {
-    return message.component
+    return (
+      <motion.div
+        ref={ref}
+        initial={{ opacity: 0, y: 16 }}
+        animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 16 }}
+        transition={{ duration: 0.4, ease: 'easeOut', delay: staggerDelay }}
+      >
+        {message.component}
+      </motion.div>
+    )
   }
 
   return (
-    <Collapsible
-      open={open}
-      onOpenChange={value => {
-        setOpen(value)
-      }}
+    <motion.div
+      ref={ref}
+      initial={{ opacity: 0, y: 16 }}
+      animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 16 }}
+      transition={{ duration: 0.4, ease: 'easeOut', delay: staggerDelay }}
     >
-      <CollapsibleTrigger asChild>
-        <div
-          className={cn(
-            'w-full flex justify-end',
-            !isCollapsed ? 'hidden' : ''
-          )}
-        >
-          <Button
-            variant="ghost"
-            size={'icon'}
-            className={cn('-mt-3 rounded-full')}
+      <Collapsible
+        open={open}
+        onOpenChange={value => {
+          setOpen(value)
+        }}
+      >
+        <CollapsibleTrigger asChild>
+          <div
+            className={cn(
+              'w-full flex justify-end',
+              !isCollapsed ? 'hidden' : ''
+            )}
           >
-            <ChevronDown
-              size={14}
-              className={cn(
-                open ? 'rotate-180' : 'rotate-0',
-                'h-4 w-4 transition-all'
-              )}
-            />
-            <span className="sr-only">collapse</span>
-          </Button>
-        </div>
-      </CollapsibleTrigger>
-      <AnimatePresence initial={false}>
-        {open && (
-          <CollapsibleContent asChild forceMount>
-            <motion.div
-              initial={{ opacity: 0, height: 0 }}
-              animate={{ opacity: 1, height: 'auto' }}
-              exit={{ opacity: 0, height: 0 }}
-              transition={{ duration: 0.3, ease: 'easeInOut' }}
-              className="overflow-hidden"
+            <Button
+              variant="ghost"
+              size={'icon'}
+              className={cn('-mt-3 rounded-full')}
             >
-              {message.component}
-            </motion.div>
-          </CollapsibleContent>
-        )}
-      </AnimatePresence>
-      {!open && <Separator className="my-2 bg-muted" />}
-    </Collapsible>
+              <ChevronDown
+                size={14}
+                className={cn(
+                  open ? 'rotate-180' : 'rotate-0',
+                  'h-4 w-4 transition-all'
+                )}
+              />
+              <span className="sr-only">collapse</span>
+            </Button>
+          </div>
+        </CollapsibleTrigger>
+        <AnimatePresence>
+          {open && (
+            <CollapsibleContent asChild forceMount>
+              <motion.div
+                initial={{ opacity: 0, height: 0 }}
+                animate={{ opacity: 1, height: 'auto' }}
+                exit={{ opacity: 0, height: 0 }}
+                transition={{ duration: 0.3, ease: 'easeInOut' }}
+                className="overflow-hidden"
+              >
+                {message.component}
+              </motion.div>
+            </CollapsibleContent>
+          )}
+        </AnimatePresence>
+        {!open && <Separator className="my-2 bg-muted" />}
+      </Collapsible>
+    </motion.div>
   )
 }