ai-tool

1'use client';
2 
3import {
4  CheckCircleIcon,
5  ChevronDownIcon,
6  CircleIcon,
7  ClockIcon,
8  WrenchIcon,
9  XCircleIcon,
10} from 'lucide-react';
11import type { ComponentProps, ReactNode } from 'react';
12import { Badge } from '@repo/shadcn-ui/components/ui/badge';
13import {
14  Collapsible,
15  CollapsibleContent,
16  CollapsibleTrigger,
17} from '@repo/shadcn-ui/components/ui/collapsible';
18import { cn } from '@repo/shadcn-ui/lib/utils';
19 
20export type AIToolStatus = 'pending' | 'running' | 'completed' | 'error';
21 
22export type AIToolProps = ComponentProps<typeof Collapsible> & {
23  status?: AIToolStatus;
24};
25 
26export const AITool = ({
27  className,
28  status = 'pending',
29  ...props
30}: AIToolProps) => (
31  <Collapsible
32    className={cn('not-prose mb-4 w-full rounded-md border', className)}
33    {...props}
34  />
35);
36 
37export type AIToolHeaderProps = ComponentProps<typeof CollapsibleTrigger> & {
38  status?: AIToolStatus;
39  name: string;
40  description?: string;
41};
42 
43const getStatusBadge = (status: AIToolStatus) => {
44  const labels = {
45    pending: 'Pending',
46    running: 'Running',
47    completed: 'Completed',
48    error: 'Error',
49  } as const;
50 
51  const icons = {
52    pending: <CircleIcon className="size-4" />,
53    running: <ClockIcon className="size-4 animate-pulse" />,
54    completed: <CheckCircleIcon className="size-4 text-green-600" />,
55    error: <XCircleIcon className="size-4 text-red-600" />,
56  } as const;
57 
58  return (
59    <Badge className="rounded-full text-xs" variant="outline">
60      {icons[status]}
61      {labels[status]}
62    </Badge>
63  );
64};
65 
66export const AIToolHeader = ({
67  className,
68  status = 'pending',
69  name,
70  description,
71  ...props
72}: AIToolHeaderProps) => (
73  <CollapsibleTrigger
74    className={cn(
75      'flex w-full items-center justify-between gap-4 p-3',
76      className
77    )}
78    {...props}
79  >
80    <div className="flex items-center gap-2">
81      <WrenchIcon className="size-4 text-muted-foreground" />
82      <span className="font-medium text-sm">{name}</span>
83      {getStatusBadge(status)}
84    </div>
85    <ChevronDownIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
86  </CollapsibleTrigger>
87);
88 
89export type AIToolContentProps = ComponentProps<typeof CollapsibleContent>;
90 
91export const AIToolContent = ({ className, ...props }: AIToolContentProps) => (
92  <CollapsibleContent
93    className={cn('grid gap-4 overflow-hidden border-t p-4 text-sm', className)}
94    {...props}
95  />
96);
97 
98// … truncated