ai-suggestion

1'use client';
2 
3import type { ComponentProps } from 'react';
4import { Button } from '@repo/shadcn-ui/components/ui/button';
5import { ScrollArea, ScrollBar } from '@repo/shadcn-ui/components/ui/scroll-area';
6import { cn } from '@repo/shadcn-ui/lib/utils';
7 
8export type AISuggestionsProps = ComponentProps<typeof ScrollArea>;
9 
10export const AISuggestions = ({
11  className,
12  children,
13  ...props
14}: AISuggestionsProps) => (
15  <ScrollArea className="w-full overflow-x-auto whitespace-nowrap" {...props}>
16    <div className={cn('flex w-max flex-nowrap items-center gap-2', className)}>
17      {children}
18    </div>
19    <ScrollBar className="hidden" orientation="horizontal" />
20  </ScrollArea>
21);
22 
23export type AISuggestionProps = Omit<
24  ComponentProps<typeof Button>,
25  'onClick'
26> & {
27  suggestion: string;
28  onClick?: (suggestion: string) => void;
29};
30 
31export const AISuggestion = ({
32  suggestion,
33  onClick,
34  className,
35  variant = 'outline',
36  size = 'sm',
37  children,
38  ...props
39}: AISuggestionProps) => {
40  const handleClick = () => {
41    onClick?.(suggestion);
42  };
43 
44  return (
45    <Button
46      className={cn('cursor-pointer rounded-full px-4', className)}
47      onClick={handleClick}
48      size={size}
49      type="button"
50      variant={variant}
51      {...props}
52    >
53      {children || suggestion}
54    </Button>
55  );
56};