feat: add suggestions

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

@@ -1,11 +1,10 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import {
-  ScrollArea,
-  ScrollBar,
-} from "@/components/ui/scroll-area";
+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";
 
 export type SuggestionsProps = ComponentProps<typeof ScrollArea>;
@@ -15,7 +14,7 @@ export const Suggestions = ({
   children,
   ...props
 }: SuggestionsProps) => (
-  <ScrollArea className="w-full overflow-x-auto whitespace-nowrap" {...props}>
+  <ScrollArea className="overflow-x-auto whitespace-nowrap" {...props}>
     <div className={cn("flex w-max flex-nowrap items-center gap-2", className)}>
       {children}
     </div>
@@ -24,32 +23,38 @@ export const Suggestions = ({
 );
 
 export type SuggestionProps = Omit<ComponentProps<typeof Button>, "onClick"> & {
-  suggestion: string;
-  onClick?: (suggestion: string) => void;
+  suggestion: React.ReactNode;
+  icon?: LucideIcon;
+  onClick?: () => void;
 };
 
 export const Suggestion = ({
   suggestion,
   onClick,
   className,
+  icon: Icon,
   variant = "outline",
   size = "sm",
   children,
   ...props
 }: SuggestionProps) => {
   const handleClick = () => {
-    onClick?.(suggestion);
+    onClick?.();
   };
 
   return (
     <Button
-      className={cn("cursor-pointer rounded-full px-4", className)}
+      className={cn(
+        "text-muted-foreground cursor-pointer rounded-full px-4 text-xs font-normal",
+        className,
+      )}
       onClick={handleClick}
       size={size}
       type="button"
       variant={variant}
       {...props}
     >
+      {Icon && <Icon className="size-4" />}
       {children || suggestion}
     </Button>
   );