feat: add animations

frontend/src/components/ai-elements/suggestion.tsx

@@ -5,7 +5,10 @@ import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";
 import { Icon } from "@radix-ui/react-select";
 import type { LucideIcon } from "lucide-react";
-import type { ComponentProps } from "react";
+import { Children, type ComponentProps } from "react";
+
+const STAGGER_DELAY_MS = 60;
+const STAGGER_DELAY_MS_OFFSET = 200;
 
 export type SuggestionsProps = ComponentProps<typeof ScrollArea>;
 
@@ -16,7 +19,20 @@ export const Suggestions = ({
 }: SuggestionsProps) => (
   <ScrollArea className="overflow-x-auto whitespace-nowrap" {...props}>
     <div className={cn("flex w-max flex-nowrap items-center gap-2", className)}>
-      {children}
+      {Children.map(children, (child, index) =>
+        child != null ? (
+          <span
+            className="animate-fade-in-up inline-block opacity-0"
+            style={{
+              animationDelay: `${STAGGER_DELAY_MS_OFFSET + index * STAGGER_DELAY_MS}ms`,
+            }}
+          >
+            {child}
+          </span>
+        ) : (
+          child
+        ),
+      )}
     </div>
     <ScrollBar className="hidden" orientation="horizontal" />
   </ScrollArea>