Merge branch 'develop' into sif-dev

Sifchain · Jan 17, 2025 · a4eb128 · a4eb128
2 parents b8595b6 + 024bc8d
commit a4eb128
Showing 1 changed file with 17 additions and 8 deletions.
diff --git a/client/src/components/chat.tsx b/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";
@@ -28,10 +28,14 @@ interface 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);
@@ -68,7 +72,6 @@ export default function Page({ agentId }: { agentId: UUID }) {
         }
     };
 
-
     const handleSendMessage = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
         if (!input) return;
@@ -209,17 +212,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}
@@ -311,7 +320,7 @@ export default function Page({ agentId }: { agentId: UUID }) {
                                         </div>
                                     </div>
                                 </ChatBubble>
-                            </animated.div>
+                            </CustomAnimatedDiv>
                         );
                     })}
                 </ChatMessageList>