AI Suggestions

1"use client";
2 
3import { type ComponentProps, useRef } from "react";
4 
5import { useGSAP } from "@gsap/react";
6import gsap from "gsap";
7 
8import { cn } from "@/lib/utils";
9 
10import { Button } from "@/components/ui/button";
11import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
12 
13export type AISuggestionsProps = ComponentProps<typeof ScrollArea> & {
14    show?: boolean;
15};
16 
17export const AISuggestions = ({ className, children, show = true, ...props }: AISuggestionsProps) => {
18    const containerRef = useRef<HTMLDivElement>(null);
19 
20    useGSAP(
21        () => {
22            const el = containerRef.current;
23            if (!el) return;
24 
25            if (show) {
26                gsap.to(el, {
27                    height: "auto",
28                    opacity: 1,
29                    filter: "blur(0px)",
30                    duration: 0.5,
31                    ease: "power2.out",
32                    pointerEvents: "auto",
33                });
34            } else {
35                gsap.to(el, {
36                    height: 0,
37                    opacity: 0,
38                    filter: "blur(8px)",
39                    duration: 0.5,
40                    ease: "power2.in",
41                    pointerEvents: "none",
42                });
43            }
44        },
45        { dependencies: [show] },
46    );
47 
48    return (
49        <ScrollArea ref={containerRef} className="relative w-full overflow-x-auto whitespace-nowrap" {...props}>
50            <div className={cn("relative flex w-max flex-nowrap items-center gap-2", className)}>{children}</div>
51            <div className="from-background absolute end-0 top-0 h-full w-8 bg-linear-to-l to-transparent"></div>
52            <ScrollBar className="hidden" orientation="horizontal" />
53        </ScrollArea>
54    );
55};
56 
57export type AISuggestionProps = ComponentProps<typeof Button> & {
58    suggestion?: string;
59};
60 
61export const AISuggestion = ({
62    suggestion,
63    variant = "outline",
64    size = "sm",
65    children,
66    ...props
67}: AISuggestionProps) => {
68    return (
69        <Button type="button" size={size} variant={variant} {...props}>
70            {children || suggestion}
71        </Button>
72    );
73};