ai-source

1'use client';
2 
3import { BookIcon, ChevronDownIcon } from 'lucide-react';
4import type { ComponentProps } from 'react';
5import {
6  Collapsible,
7  CollapsibleContent,
8  CollapsibleTrigger,
9} from '@repo/shadcn-ui/components/ui/collapsible';
10import { cn } from '@repo/shadcn-ui/lib/utils';
11 
12export type AISourcesProps = ComponentProps<'div'>;
13 
14export const AISources = ({ className, ...props }: AISourcesProps) => (
15  <Collapsible
16    className={cn('flex flex-col not-prose mb-4 text-primary justify-center items-center text-center text-sm w-full', 
17      'bg-muted text-muted-foreground hover:bg-muted/80 transition-colors rounded-md p-1',
18      className)}
19    {...props}
20  />
21);
22 
23export type AISourcesTriggerProps = ComponentProps<
24  typeof CollapsibleTrigger
25> & {
26  count: number;
27};
28 
29export const AISourcesTrigger = ({
30  className,
31  count,
32  children,
33  ...props
34}: AISourcesTriggerProps) => (
35  <CollapsibleTrigger className="flex items-center gap-2 w-full justify-center" {...props}>
36    {children ?? (
37      <>
38        <p className="font-medium">Used {count} sources</p>
39        <ChevronDownIcon className="h-4 w-4" />
40      </>
41    )}
42  </CollapsibleTrigger>
43);
44 
45export type AISourcesContentProps = ComponentProps<typeof CollapsibleContent>;
46 
47export const AISourcesContent = ({
48  className,
49  ...props
50}: AISourcesContentProps) => (
51  <CollapsibleContent
52    className={cn('mt-3 flex flex-col gap-2', className)}
53    {...props}
54  />
55);
56 
57export type AISourceProps = ComponentProps<'a'>;
58 
59export const AISource = ({
60  href,
61  title,
62  children,
63  ...props
64}: AISourceProps) => (
65  <a
66    className="flex items-center gap-2 hover:bg-muted hover:text-primary rounded-md p-2 transition-colors"
67    href={href}
68    rel="noreferrer"
69    target="_blank"
70    {...props}
71  >
72    {children ?? (
73      <>
74        <BookIcon className="h-4 w-4" />
75        <span className="block font-medium">{title}</span>
76      </>
77    )}
78  </a>
79);