Ai Artifact

1"use client";
2 
3import * as React from "react";
4 
5import {
6  Check,
7  Copy,
8  Download,
9  FileCode,
10  Play,
11  RefreshCw,
12  Share2,
13  X,
14} from "lucide-react";
15 
16import { cn } from "@/lib/utils";
17 
18interface AiArtifactContextValue {
19  onClose?: () => void;
20}
21 
22const AiArtifactContext = React.createContext<AiArtifactContextValue | null>(
23  null,
24);
25 
26function useArtifactContext() {
27  const context = React.useContext(AiArtifactContext);
28  if (!context) {
29    throw new Error("AiArtifact components must be used within <AiArtifact>");
30  }
31  return context;
32}
33 
34interface AiArtifactProps {
35  onClose?: () => void;
36  children?: React.ReactNode;
37  className?: string;
38}
39 
40function AiArtifact({ onClose, children, className }: AiArtifactProps) {
41  const contextValue = React.useMemo(() => ({ onClose }), [onClose]);
42 
43  return (
44    <AiArtifactContext.Provider value={contextValue}>
45      <div
46        data-slot="ai-artifact"
47        className={cn(
48          "rounded-lg border border-border bg-card text-card-foreground shadow-lg overflow-hidden flex flex-col",
49          className,
50        )}
51      >
52        {children}
53      </div>
54    </AiArtifactContext.Provider>
55  );
56}
57 
58interface AiArtifactHeaderProps {
59  children?: React.ReactNode;
60  className?: string;
61}
62 
63function AiArtifactHeader({ children, className }: AiArtifactHeaderProps) {
64  return (
65    <div
66      data-slot="ai-artifact-header"
67      className={cn(
68        "flex items-center justify-between gap-4 border-b border-border px-4 py-3",
69        className,
70      )}
71    >
72      <div className="flex items-center gap-3 min-w-0">
73        <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted">
74          <FileCode className="size-4 text-muted-foreground" />
75        </div>
76        <div className="min-w-0">{children}</div>
77      </div>
78    </div>
79  );
80}
81 
82interface AiArtifactTitleProps {
83  children?: React.ReactNode;
84  className?: string;
85}
86 
87function AiArtifactTitle({ children, className }: AiArtifactTitleProps) {
88  return (
89    <h3
90      data-slot="ai-artifact-title"
91      className={cn("font-semibold text-sm truncate", className)}
92    >
93      {children}
94    </h3>
95  );
96}
97 
98interface AiArtifactDescriptionProps {
99  children?: React.ReactNode;
100  className?: string;
101}
102 
103function AiArtifactDescription({
104  children,
105  className,
106}: AiArtifactDescriptionProps) {
107  return (
108    <p
109      data-slot="ai-artifact-description"
110      className={cn("text-xs text-muted-foreground truncate", className)}
111    >
112// … truncated