From 4802cbca4c779f95d603f0ac8ffc76bc27ab9c27 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 7 Oct 2025 15:55:08 -0600
Subject: [PATCH] Add animation

---
 .../components/overlay/chip/GenAISummaryChip.tsx  | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/web/src/components/overlay/chip/GenAISummaryChip.tsx b/web/src/components/overlay/chip/GenAISummaryChip.tsx
index 138582b21..581c6733c 100644
--- a/web/src/components/overlay/chip/GenAISummaryChip.tsx
+++ b/web/src/components/overlay/chip/GenAISummaryChip.tsx
@@ -12,17 +12,22 @@ type GenAISummaryChipProps = {
   onClick: () => void;
 };
 export function GenAISummaryChip({ review, onClick }: GenAISummaryChipProps) {
-  if (!review?.data?.metadata) {
-    return null;
-  }
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    setIsVisible(review?.data?.metadata != undefined);
+  }, [review]);
 
   return (
     <div
-      className="absolute left-1/2 top-8 z-30 flex max-w-[90vw] -translate-x-[50%] cursor-pointer select-none items-center gap-2 rounded-full bg-card p-2 text-sm"
+      className={cn(
+        "absolute left-1/2 top-8 z-30 flex max-w-[90vw] -translate-x-[50%] cursor-pointer select-none items-center gap-2 rounded-full bg-card p-2 text-sm transition-all duration-500",
+        isVisible ? "translate-y-0 opacity-100" : "-translate-y-4 opacity-0",
+      )}
       onClick={onClick}
     >
       <MdAutoAwesome className="shrink-0" />
-      <span className="truncate">{review.data.metadata.title}</span>
+      <span className="truncate">{review?.data.metadata?.title}</span>
     </div>
   );
 }