🎨 Add animations

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "hasInstallScript": true,
       "dependencies": {
+        "@formkit/auto-animate": "^1.0.0-beta.6",
         "@next-auth/prisma-adapter": "^1.0.5",
         "@prisma/client": "^4.9.0",
         "@radix-ui/react-toast": "^1.1.3",
@@ -139,6 +140,11 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@formkit/auto-animate": {
+      "version": "1.0.0-beta.6",
+      "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-1.0.0-beta.6.tgz",
+      "integrity": "sha512-PVDhLAlr+B4Xb7e+1wozBUWmXa6BFU8xUPR/W/E+TsQhPS1qkAdAsJ25keEnFrcePSnXHrOsh3tiFbEToOzV9w=="
+    },
     "node_modules/@fortaine/fetch-event-source": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/@fortaine/fetch-event-source/-/fetch-event-source-3.0.6.tgz",
@@ -5482,6 +5488,11 @@
       "integrity": "sha512-x5vzdtOOGgFVDCUs81QRB2+liax8rFg3+7hqM+QhBG0/G3F1ZsoYl97UrqgHgQ9KKT7G6c4V+aTUCgu/n22v1A==",
       "dev": true
     },
+    "@formkit/auto-animate": {
+      "version": "1.0.0-beta.6",
+      "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-1.0.0-beta.6.tgz",
+      "integrity": "sha512-PVDhLAlr+B4Xb7e+1wozBUWmXa6BFU8xUPR/W/E+TsQhPS1qkAdAsJ25keEnFrcePSnXHrOsh3tiFbEToOzV9w=="
+    },
     "@fortaine/fetch-event-source": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/@fortaine/fetch-event-source/-/fetch-event-source-3.0.6.tgz",

package.json

@@ -10,6 +10,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@formkit/auto-animate": "^1.0.0-beta.6",
     "@next-auth/prisma-adapter": "^1.0.5",
     "@prisma/client": "^4.9.0",
     "@radix-ui/react-toast": "^1.1.3",

src/components/ChatWindow.tsx

@@ -2,6 +2,7 @@ import cx from "classnames";
 import type { ReactNode } from "react";
 import React, { useEffect, useRef } from "react";
 import { FaBrain, FaListAlt, FaPlayCircle, FaStar } from "react-icons/fa";
+import autoAnimate from "@formkit/auto-animate";
 
 interface ChatWindowProps {
   children?: ReactNode;
@@ -19,6 +20,10 @@ const ChatWindow = ({ messages, children, className }: ChatWindowProps) => {
     }
   });
 
+  useEffect(() => {
+    scrollRef.current && autoAnimate(scrollRef.current);
+  }, [messages]);
+
   return (
     <div
       className={

src/components/Header.tsx

@@ -1,5 +1,5 @@
 import { FaGithub } from "react-icons/fa";
-import PopIn from "./popin";
+import PopIn from "./motions/popin";
 import { AnimatePresence } from "framer-motion";
 
 const Header: React.FC = () => {

src/components/motions/expand.tsx

@@ -0,0 +1,21 @@
+import { motion } from "framer-motion";
+import type { PropsWithChildren } from "react";
+
+interface MotionProps extends PropsWithChildren {
+  className?: string;
+  delay?: number;
+}
+
+const Expand = (props: MotionProps) => (
+  <motion.div
+    initial={{ scaleX: 0.8, scaleY: 0 }}
+    animate={{ scale: 1, scaleY: 1 }}
+    transition={{ duration: 0.75, type: "spring", delay: props.delay ?? 0 }}
+    {...props}
+  >
+    {props.children}
+  </motion.div>
+);
+
+Expand.displayName = "Expand";
+export default Expand;

src/pages/index.tsx

@@ -12,9 +12,10 @@ import Drawer from "../components/Drawer";
 import Input from "../components/Input";
 import Button from "../components/Button";
 import { FaRobot, FaStar } from "react-icons/fa";
-import PopIn from "../components/popin";
+import PopIn from "../components/motions/popin";
 import { VscLoading } from "react-icons/vsc";
 import type AutonomousAgent from "../components/AutonomousAgent";
+import Expand from "../components/motions/expand";
 
 const Home: NextPage = () => {
   const [name, setName] = React.useState<string>("");
@@ -64,7 +65,9 @@ const Home: NextPage = () => {
               </div>
             </div>
 
+            <Expand className="w-full">
               <ChatWindow className="mt-4" messages={messages} />
+            </Expand>
 
             <Input
               left={