fix: resolve type error for children in animated.div component (#2462)

Co-authored-by: Sayo <hi@sayo.wtf>

Author: suleigolden

client/src/components/chat.tsx

@@ -6,7 +6,7 @@ import {
 } from "@/components/ui/chat/chat-bubble";
 import { ChatInput } from "@/components/ui/chat/chat-input";
 import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
-import { useTransition, animated } from "@react-spring/web";
+import { useTransition, animated, AnimatedProps } from "@react-spring/web";
 import { Paperclip, Send, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { Content, UUID } from "@elizaos/core";
@@ -23,14 +23,18 @@ import { IAttachment } from "@/types";
 import { AudioRecorder } from "./audio-recorder";
 import { Badge } from "./ui/badge";
 
-interface ExtraContentFields {
+type ExtraContentFields = {
     user: string;
     createdAt: number;
     isLoading?: boolean;
-}
+};
 
 type ContentWithUser = Content & ExtraContentFields;
 
+type AnimatedDivProps = AnimatedProps<{ style: React.CSSProperties }> & {
+    children?: React.ReactNode;
+};
+
 export default function Page({ agentId }: { agentId: UUID }) {
     const { toast } = useToast();
     const [selectedFile, setSelectedFile] = useState<File | null>(null);
@@ -67,7 +71,6 @@ export default function Page({ agentId }: { agentId: UUID }) {
         }
     };
 
-
     const handleSendMessage = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
         if (!input) return;
@@ -167,17 +170,23 @@ export default function Page({ agentId }: { agentId: UUID }) {
         leave: { opacity: 0, transform: "translateY(10px)" },
     });
 
+    const CustomAnimatedDiv = animated.div as React.FC<AnimatedDivProps>;
+
     return (
         <div className="flex flex-col w-full h-[calc(100dvh)] p-4">
             <div className="flex-1 overflow-y-auto">
                 <ChatMessageList ref={messagesContainerRef}>
                     {transitions((styles, message) => {
                         const variant = getMessageVariant(message?.user);
                         return (
-                            // @ts-expect-error
-                            <animated.div
-                                style={styles}
-                                className="flex flex-col gap-2 p-4"
+                            <CustomAnimatedDiv
+                                style={{
+                                    ...styles,
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    gap: "0.5rem",
+                                    padding: "1rem",
+                                }}
                             >
                                 <ChatBubble
                                     variant={variant}
@@ -266,7 +275,7 @@ export default function Page({ agentId }: { agentId: UUID }) {
                                         </div>
                                     </div>
                                 </ChatBubble>
-                            </animated.div>
+                            </CustomAnimatedDiv>
                         );
                     })}
                 </ChatMessageList>