System Message

1"use client"
2 
3import { Button } from "@/components/ui/button"
4import { cn } from "@/lib/utils"
5import { cva, type VariantProps } from "class-variance-authority"
6import { AlertCircle, AlertTriangle, Info } from "lucide-react"
7import React from "react"
8 
9const systemMessageVariants = cva(
10  "flex flex-row items-center gap-3 rounded-[12px] border py-2 pr-2 pl-3",
11  {
12    variants: {
13      variant: {
14        action: "text-zinc-700 dark:text-zinc-300",
15        error: "text-red-700 dark:text-red-800",
16        warning: "text-amber-700 dark:text-amber-700",
17      },
18      fill: {
19        true: "bg-background",
20        false: "",
21      },
22    },
23    compoundVariants: [
24      {
25        variant: "action",
26        fill: true,
27        class: "bg-zinc-100 dark:bg-zinc-900 border-transparent",
28      },
29      {
30        variant: "error",
31        fill: true,
32        class: "bg-red-100 dark:bg-red-900/20 border-transparent",
33      },
34      {
35        variant: "warning",
36        fill: true,
37        class: "bg-amber-100 dark:bg-amber-900/20 border-transparent",
38      },
39      {
40        variant: "action",
41        fill: false,
42        class: "border-zinc-200 dark:border-zinc-800",
43      },
44      {
45        variant: "error",
46        fill: false,
47        class: "border-red-600 dark:border-red-900",
48      },
49      {
50        variant: "warning",
51        fill: false,
52        class: "border-amber-600 dark:border-amber-900",
53      },
54    ],
55    defaultVariants: {
56      variant: "action",
57      fill: false,
58    },
59  }
60)
61 
62export type SystemMessageProps = React.ComponentProps<"div"> &
63  VariantProps<typeof systemMessageVariants> & {
64    icon?: React.ReactNode
65    isIconHidden?: boolean
66    cta?: {
67      label: string
68      onClick?: () => void
69      variant?: "solid" | "outline" | "ghost"
70    }
71  }
72 
73export function SystemMessage({
74  children,
75  variant = "action",
76  fill = false,
77  icon,
78  isIconHidden = false,
79  cta,
80  className,
81  ...props
82}: SystemMessageProps) {
83  const getDefaultIcon = () => {
84    if (isIconHidden) return null
85 
86    switch (variant) {
87      case "error":
88        return <AlertCircle className="size-4" />
89      case "warning":
90        return <AlertTriangle className="size-4" />
91      default:
92        return <Info className="size-4" />
93    }
94  }
95 
96  const getIconToShow = () => {
97    if (isIconHidden) return null
98    if (icon) return icon
99    return getDefaultIcon()
100  }
101 
102  const shouldShowIcon = getIconToShow() !== null
103 
104  return (
105    <div
106// … truncated