From 560683d782fb8f993868cc845c2fa8c20ec996ad Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 5 Sep 2025 17:01:03 -0300
Subject: [PATCH] Added animation to displaying nudges

---
 frontend/src/app/chat/nudges.tsx | 51 ++++++++++++++++++++++----------
 1 file changed, 35 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/chat/nudges.tsx b/frontend/src/app/chat/nudges.tsx
index 0d713c89..c5929924 100644
--- a/frontend/src/app/chat/nudges.tsx
+++ b/frontend/src/app/chat/nudges.tsx
@@ -1,27 +1,46 @@
+import { motion, AnimatePresence } from "motion/react";
+
 export default function Nudges({
   nudges,
   handleSuggestionClick,
 }: {
   nudges: string[];
+
   handleSuggestionClick: (suggestion: string) => void;
 }) {
   return (
-    <div className="flex-shrink-0 px-6 pt-4 flex justify-center">
-      <div className="w-full max-w-[75%] relative">
-        <div className="flex gap-3 justify-start overflow-x-auto scrollbar-hide">
-          {nudges.map((suggestion: string, index: number) => (
-            <button
-              key={index}
-              onClick={() => handleSuggestionClick(suggestion)}
-              className="px-2 py-1.5 bg-muted hover:bg-muted/50 rounded-lg text-sm text-placeholder-foreground hover:text-foreground transition-colors whitespace-nowrap"
-            >
-              {suggestion}
-            </button>
-          ))}
-        </div>
-        {/* Fade out gradient on the right */}
-        <div className="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-background to-transparent pointer-events-none"></div>
-      </div>
+    <div className="flex-shrink-0 h-12 w-full overflow-hidden">
+      <AnimatePresence>
+        {nudges.length > 0 && (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 20 }}
+            transition={{
+              duration: 0.2,
+              ease: "easeInOut",
+            }}
+          >
+            <div className="relative px-6 pt-4 flex justify-center">
+              <div className="w-full max-w-[75%]">
+                <div className="flex gap-3 justify-start overflow-x-auto scrollbar-hide">
+                  {nudges.map((suggestion: string, index: number) => (
+                    <button
+                      key={index}
+                      onClick={() => handleSuggestionClick(suggestion)}
+                      className="px-2 py-1.5 bg-muted hover:bg-muted/50 rounded-lg text-sm text-placeholder-foreground hover:text-foreground transition-colors whitespace-nowrap"
+                    >
+                      {suggestion}
+                    </button>
+                  ))}
+                </div>
+                {/* Fade out gradient on the right */}
+                <div className="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-background to-transparent pointer-events-none"></div>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }