Add an animation to opening and closing the thought process

src/interface/web/app/components/chatHistory/chatHistory.tsx

@@ -2,6 +2,7 @@
 
 import styles from "./chatHistory.module.css";
 import { useRef, useEffect, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
 
 import ChatMessage, {
     ChatHistoryData,
@@ -55,6 +56,19 @@ function TrainOfThoughtComponent(props: TrainOfThoughtComponentProps) {
     const lastIndex = props.trainOfThought.length - 1;
     const [collapsed, setCollapsed] = useState(props.completed);
 
+    const variants = {
+        open: {
+            height: "auto",
+            opacity: 1,
+            transition: { duration: 0.3, ease: "easeOut" }
+        },
+        closed: {
+            height: 0,
+            opacity: 0,
+            transition: { duration: 0.3, ease: "easeIn" }
+        }
+    };
+
     useEffect(() => {
         if (props.completed) {
             setCollapsed(true);
@@ -87,15 +101,25 @@ function TrainOfThoughtComponent(props: TrainOfThoughtComponentProps) {
                         Close <CaretUp size={16} className="ml-1" />
                     </Button>
                 ))}
-            {!collapsed &&
+            <AnimatePresence initial={false}>
-                props.trainOfThought.map((train, index) => (
+                {!collapsed && (
-                    <TrainOfThought
+                    <motion.div
-                        key={`train-${index}`}
+                        initial="closed"
-                        message={train}
+                        animate="open"
-                        primary={index === lastIndex && props.lastMessage && !props.completed}
+                        exit="closed"
-                        agentColor={props.agentColor}
+                        variants={variants}
-                    />
+                    >
-                ))}
+                        {props.trainOfThought.map((train, index) => (
+                            <TrainOfThought
+                                key={`train-${index}`}
+                                message={train}
+                                primary={index === lastIndex && props.lastMessage && !props.completed}
+                                agentColor={props.agentColor}
+                            />
+                        ))}
+                    </motion.div>
+                )}
+            </AnimatePresence>
         </div>
     );
 }

src/interface/web/package.json

@@ -53,6 +53,7 @@
         "embla-carousel-react": "^8.5.1",
         "eslint": "^8",
         "eslint-config-next": "14.2.3",
+        "framer-motion": "^12.0.6",
         "input-otp": "^1.2.4",
         "intl-tel-input": "^23.8.1",
         "katex": "^0.16.21",

src/interface/web/yarn.lock

@@ -3121,6 +3121,15 @@ fraction.js@^4.3.7:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
+framer-motion@^12.0.6:
+  version "12.0.6"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-12.0.6.tgz#4ec8b9225ead4d0d7d4ff00ade6e76a83e6d0c99"
+  integrity sha512-LmrXbXF6Vv5WCNmb+O/zn891VPZrH7XbsZgRLBROw6kFiP+iTK49gxTv2Ur3F0Tbw6+sy9BVtSqnWfMUpH+6nA==
+  dependencies:
+    motion-dom "^12.0.0"
+    motion-utils "^12.0.0"
+    tslib "^2.4.0"
+
 fs-extra@^11.1.0:
   version "11.2.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-11.2.0.tgz#e70e17dfad64232287d01929399e0ea7c86b0e5b"
@@ -4167,6 +4176,18 @@ mlly@^1.7.3:
     pkg-types "^1.2.1"
     ufo "^1.5.4"
 
+motion-dom@^12.0.0:
+  version "12.0.0"
+  resolved "https://registry.yarnpkg.com/motion-dom/-/motion-dom-12.0.0.tgz#7045c63642eecbcc04c40b4457ebb07b3c2b3d0c"
+  integrity sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==
+  dependencies:
+    motion-utils "^12.0.0"
+
+motion-utils@^12.0.0:
+  version "12.0.0"
+  resolved "https://registry.yarnpkg.com/motion-utils/-/motion-utils-12.0.0.tgz#fabf79f4f1c818720a1b70f615e2a1768f396ac0"
+  integrity sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==
+
 ms@^2.1.1, ms@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"