chore: Update npm dependencies and add framer-motion library for animations

Author: n4ze3m

app/ui/package.json

@@ -23,6 +23,7 @@
     "d3": "^7.8.5",
     "dayjs": "^1.11.10",
     "eventsource-parser": "^1.0.0",
+    "framer-motion": "^11.3.2",
     "js-cookie": "^3.0.5",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.1",

app/ui/src/components/Bot/Playground/HistoryList.tsx

@@ -7,6 +7,7 @@ import React from "react";
 import { useMessage } from "../../../hooks/useMessage";
 import { Empty, Skeleton } from "antd";
 import { useStoreMessage } from "../../../store";
+import { motion } from "framer-motion";
 
 export const PlaygroundHistoryList = () => {
   const params = useParams<{ id: string; history_id?: string }>();
@@ -72,9 +73,16 @@ export const PlaygroundHistoryList = () => {
               </div>
             )}
             <div className="flex flex-col gap-2 overflow-hidden text-gray-100 text-sm dark:text-gray-400">
-              {data.history.map((item, index) => {
-                return <PlaygroundHistoryCard key={index} item={item} />;
-              })}
+              {data.history.map((item, index) => (
+                <motion.div
+                  key={item.id || index}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.3, delay: index * 0.1 }}
+                >
+                  <PlaygroundHistoryCard item={item} />
+                </motion.div>
+              ))}
             </div>
           </div>
         )}

app/ui/src/components/Bot/Settings/SettingsCard.tsx renamed to app/ui/src/components/Bot/Settings/SettingsBody.tsx

@@ -18,7 +18,7 @@ import {
 } from "../../../utils/prompts";
 import { BotSettings } from "../../../@types/bot";
 
-export const SettingsCard: React.FC<BotSettings> = ({
+export const SettingsBody: React.FC<BotSettings> = ({
   data,
   chatModel,
   embeddingModel,

app/ui/src/routes/bot/settings.tsx

@@ -3,7 +3,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import api from "../../services/api";
 import React from "react";
 import { SkeletonLoading } from "../../components/Common/SkeletonLoading";
-import { SettingsCard } from "../../components/Bot/Settings/SettingsCard";
+import { SettingsBody } from "../../components/Bot/Settings/SettingsBody";
 import { BotSettings } from "../../@types/bot";
 
 export default function BotSettingsRoot() {
@@ -30,7 +30,7 @@ export default function BotSettingsRoot() {
   return (
     <div className="mx-auto my-3 w-full max-w-7xl">
       {status === "loading" && <SkeletonLoading />}
-      {status === "success" && <SettingsCard {...data} />}
+      {status === "success" && <SettingsBody {...data} />}
     </div>
   );
 }