@vllnt/ui 0.2.1 → 0.3.0-canary.00b20d6

package/dist/components/ai-artifact/ai-artifact.js

@@ -0,0 +1,439 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  Check,
+  Copy,
+  Download,
+  Maximize2,
+  Minimize2,
+  Pencil
+} from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge/badge";
+import { Button } from "../button/button";
+const COPIED_TIMEOUT_MS = 2e3;
+const DEFAULT_LABELS = {
+  copied: "Copied",
+  copy: "Copy",
+  download: "Download",
+  edit: "Edit",
+  enterFullscreen: "Enter fullscreen",
+  exitFullscreen: "Exit fullscreen",
+  versions: "Versions"
+};
+const NO_OP = () => {
+  return;
+};
+const DEFAULT_CONTEXT = {
+  copied: false,
+  copy: async () => false,
+  download: NO_OP,
+  filename: "artifact.txt",
+  fullscreen: false,
+  hasOnEdit: false,
+  labels: DEFAULT_LABELS,
+  onEdit: NO_OP,
+  toggleFullscreen: NO_OP,
+  type: "code",
+  value: ""
+};
+const AIArtifactContext = createContext(DEFAULT_CONTEXT);
+function useAIArtifact() {
+  return useContext(AIArtifactContext);
+}
+function pickExtension(type, language) {
+  if (language) return language;
+  switch (type) {
+    case "code":
+      return "txt";
+    case "custom":
+      return "txt";
+    case "diagram":
+      return "mmd";
+    case "document":
+      return "md";
+    case "html":
+      return "html";
+    case "image":
+      return "png";
+    case "table":
+      return "csv";
+  }
+}
+const SLUG_INVALID_CHARS = /[^\da-z]+/g;
+const SLUG_TRIM = /^-+|-+$/g;
+function buildFilename({
+  filename,
+  language,
+  title,
+  type
+}) {
+  if (filename) return filename;
+  const base = typeof title === "string" && title.length > 0 ? title : "artifact";
+  const slug = base.toLowerCase().replaceAll(SLUG_INVALID_CHARS, "-").replaceAll(SLUG_TRIM, "");
+  const safeBase = slug.length > 0 ? slug : "artifact";
+  return `${safeBase}.${pickExtension(type, language)}`;
+}
+async function writeToClipboard(value) {
+  if (typeof navigator === "undefined" || typeof navigator.clipboard?.writeText !== "function") {
+    return false;
+  }
+  try {
+    await navigator.clipboard.writeText(value);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function downloadValueAsFile(value, filename) {
+  if (typeof document === "undefined") return;
+  const blob = new Blob([value], { type: "text/plain;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.style.display = "none";
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+  URL.revokeObjectURL(url);
+}
+function ArtifactHeader({
+  language,
+  subtitle,
+  title,
+  type
+}) {
+  if (!title && !subtitle && !language) return null;
+  return /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      title ? /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold tracking-tight text-foreground", children: title }) : null,
+      /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: language || type })
+    ] }),
+    subtitle ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: subtitle }) : null
+  ] });
+}
+function useCopiedFlag() {
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef(void 0);
+  useEffect(
+    () => () => {
+      clearTimeout(timerRef.current);
+    },
+    []
+  );
+  const flagCopied = useCallback(() => {
+    setCopied(true);
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      setCopied(false);
+    }, COPIED_TIMEOUT_MS);
+  }, []);
+  return { copied, flagCopied };
+}
+function useArtifactController(options) {
+  const {
+    defaultFullscreen,
+    filename,
+    labels,
+    language,
+    onEdit,
+    title,
+    type,
+    value
+  } = options;
+  const [fullscreen, setFullscreen] = useState(defaultFullscreen);
+  const { copied, flagCopied } = useCopiedFlag();
+  const resolvedFilename = useMemo(
+    () => buildFilename({ filename, language, title, type }),
+    [filename, language, title, type]
+  );
+  const copy = useCallback(async () => {
+    const ok = await writeToClipboard(value);
+    if (!ok) return false;
+    flagCopied();
+    return true;
+  }, [flagCopied, value]);
+  const download = useCallback(() => {
+    downloadValueAsFile(value, resolvedFilename);
+  }, [resolvedFilename, value]);
+  const toggleFullscreen = useCallback(() => {
+    setFullscreen((current) => !current);
+  }, []);
+  const triggerEdit = useCallback(() => {
+    onEdit?.();
+  }, [onEdit]);
+  return useMemo(
+    () => ({
+      copied,
+      copy,
+      download,
+      filename: resolvedFilename,
+      fullscreen,
+      hasOnEdit: onEdit !== void 0,
+      labels,
+      onEdit: triggerEdit,
+      toggleFullscreen,
+      type,
+      value
+    }),
+    [
+      copied,
+      copy,
+      download,
+      fullscreen,
+      labels,
+      onEdit,
+      resolvedFilename,
+      toggleFullscreen,
+      triggerEdit,
+      type,
+      value
+    ]
+  );
+}
+const AIArtifact = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      defaultFullscreen = false,
+      filename,
+      labels,
+      language = "",
+      onEdit,
+      subtitle,
+      title,
+      type = "code",
+      value = "",
+      ...rest
+    } = props;
+    const resolvedLabels = useMemo(
+      () => ({ ...DEFAULT_LABELS, ...labels }),
+      [labels]
+    );
+    const contextValue = useArtifactController({
+      defaultFullscreen,
+      filename,
+      labels: resolvedLabels,
+      language,
+      onEdit,
+      title,
+      type,
+      value
+    });
+    return /* @__PURE__ */ jsx(AIArtifactContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": typeof title === "string" ? title : void 0,
+        className: cn(
+          "flex flex-col gap-3 rounded-2xl border bg-background p-4",
+          className
+        ),
+        "data-fullscreen": contextValue.fullscreen ? "true" : "false",
+        "data-type": type,
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            ArtifactHeader,
+            {
+              language,
+              subtitle,
+              title,
+              type
+            }
+          ),
+          children
+        ]
+      }
+    ) });
+  }
+);
+AIArtifact.displayName = "AIArtifact";
+const AIArtifactToolbar = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-wrap items-center gap-1.5 border-b border-border pb-2",
+      className
+    ),
+    ref,
+    role: "toolbar",
+    ...rest
+  }
+));
+AIArtifactToolbar.displayName = "AIArtifactToolbar";
+const AIArtifactCopyButton = forwardRef(({ className, onClick, ...rest }, ref) => {
+  const { copied, copy, labels } = useAIArtifact();
+  const handleCopyArtifact = useCallback(
+    (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      void copy();
+    },
+    [copy, onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": copied ? labels.copied : labels.copy,
+      className: cn("size-8", className),
+      onClick: handleCopyArtifact,
+      ref,
+      size: "icon",
+      type: "button",
+      variant: "ghost",
+      ...rest,
+      children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "size-4" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": "true", className: "size-4" })
+    }
+  );
+});
+AIArtifactCopyButton.displayName = "AIArtifactCopyButton";
+const AIArtifactEditButton = forwardRef(({ className, onClick, ...rest }, ref) => {
+  const { hasOnEdit, labels, onEdit } = useAIArtifact();
+  const handleEditArtifact = useCallback(
+    (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      onEdit();
+    },
+    [onClick, onEdit]
+  );
+  if (!hasOnEdit) return null;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": labels.edit,
+      className: cn("size-8", className),
+      onClick: handleEditArtifact,
+      ref,
+      size: "icon",
+      type: "button",
+      variant: "ghost",
+      ...rest,
+      children: /* @__PURE__ */ jsx(Pencil, { "aria-hidden": "true", className: "size-4" })
+    }
+  );
+});
+AIArtifactEditButton.displayName = "AIArtifactEditButton";
+const AIArtifactDownloadButton = forwardRef(({ className, onClick, ...rest }, ref) => {
+  const { download, labels } = useAIArtifact();
+  const handleDownloadArtifact = useCallback(
+    (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      download();
+    },
+    [download, onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": labels.download,
+      className: cn("size-8", className),
+      onClick: handleDownloadArtifact,
+      ref,
+      size: "icon",
+      type: "button",
+      variant: "ghost",
+      ...rest,
+      children: /* @__PURE__ */ jsx(Download, { "aria-hidden": "true", className: "size-4" })
+    }
+  );
+});
+AIArtifactDownloadButton.displayName = "AIArtifactDownloadButton";
+const AIArtifactFullscreenButton = forwardRef(({ className, onClick, ...rest }, ref) => {
+  const { fullscreen, labels, toggleFullscreen } = useAIArtifact();
+  const handleToggleArtifactFullscreen = useCallback(
+    (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      toggleFullscreen();
+    },
+    [onClick, toggleFullscreen]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": fullscreen ? labels.exitFullscreen : labels.enterFullscreen,
+      "aria-pressed": fullscreen,
+      className: cn("size-8", className),
+      onClick: handleToggleArtifactFullscreen,
+      ref,
+      size: "icon",
+      type: "button",
+      variant: "ghost",
+      ...rest,
+      children: fullscreen ? /* @__PURE__ */ jsx(Minimize2, { "aria-hidden": "true", className: "size-4" }) : /* @__PURE__ */ jsx(Maximize2, { "aria-hidden": "true", className: "size-4" })
+    }
+  );
+});
+AIArtifactFullscreenButton.displayName = "AIArtifactFullscreenButton";
+const AIArtifactContent = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "min-h-[6rem] overflow-auto rounded-lg border border-border bg-muted/20 p-3 text-sm text-foreground",
+      className
+    ),
+    ref,
+    ...rest
+  }
+));
+AIArtifactContent.displayName = "AIArtifactContent";
+const AIArtifactVersions = forwardRef(({ children, className, ...rest }, ref) => {
+  const { labels } = useAIArtifact();
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": labels.versions,
+      className: cn(
+        "flex flex-wrap items-center gap-1.5 border-t border-border pt-2",
+        className
+      ),
+      ref,
+      ...rest,
+      children
+    }
+  );
+});
+AIArtifactVersions.displayName = "AIArtifactVersions";
+const AIArtifactVersion = forwardRef(({ active = false, className, label, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    "aria-current": active ? "true" : void 0,
+    className: cn(
+      "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      active ? "border-primary bg-primary text-primary-foreground" : "border-border bg-background text-muted-foreground hover:bg-accent",
+      className
+    ),
+    ref,
+    type: "button",
+    ...rest,
+    children: label
+  }
+));
+AIArtifactVersion.displayName = "AIArtifactVersion";
+export {
+  AIArtifact,
+  AIArtifactContent,
+  AIArtifactCopyButton,
+  AIArtifactDownloadButton,
+  AIArtifactEditButton,
+  AIArtifactFullscreenButton,
+  AIArtifactToolbar,
+  AIArtifactVersion,
+  AIArtifactVersions,
+  useAIArtifact
+};

package/dist/components/ai-artifact/index.js

@@ -0,0 +1,24 @@
+import {
+  AIArtifact,
+  AIArtifactContent,
+  AIArtifactCopyButton,
+  AIArtifactDownloadButton,
+  AIArtifactEditButton,
+  AIArtifactFullscreenButton,
+  AIArtifactToolbar,
+  AIArtifactVersion,
+  AIArtifactVersions,
+  useAIArtifact
+} from "./ai-artifact";
+export {
+  AIArtifact,
+  AIArtifactContent,
+  AIArtifactCopyButton,
+  AIArtifactDownloadButton,
+  AIArtifactEditButton,
+  AIArtifactFullscreenButton,
+  AIArtifactToolbar,
+  AIArtifactVersion,
+  AIArtifactVersions,
+  useAIArtifact
+};

package/dist/components/ai-chat-input/ai-chat-input.js

@@ -3,8 +3,8 @@ import { forwardRef } from "react";
 import { cva } from "class-variance-authority";
 import { LoaderCircle, SendHorizontal } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
-import { Textarea } from "../textarea";
+import { Button } from "../button/button";
+import { Textarea } from "../textarea/textarea";
 const formShellVariants = cva(
   "rounded-2xl border border-border/70 bg-background shadow-sm"
 );
@@ -36,7 +36,7 @@ function AIChatInputFooter({
         disabled: isSubmitDisabled,
         type: "submit",
         children: [
-          isSubmitting ? /* @__PURE__ */ jsx(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(SendHorizontal, { className: "mr-2 h-4 w-4" }),
+          isSubmitting ? /* @__PURE__ */ jsx(LoaderCircle, { className: "mr-2 size-4 animate-spin" }) : /* @__PURE__ */ jsx(SendHorizontal, { className: "mr-2 size-4" }),
           submitLabel
         ]
       }
@@ -48,6 +48,7 @@ const AIChatInput = forwardRef(
     className,
     disabled = false,
     helperText,
+    inputLabel = "Chat message",
     isSubmitting = false,
     onSubmit,
     onValueChange,
@@ -72,7 +73,8 @@ const AIChatInput = forwardRef(
           /* @__PURE__ */ jsx(
             Textarea,
             {
-              className: "min-h-[120px] resize-none rounded-xl border-0 bg-transparent px-1 py-1 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0",
+              "aria-label": inputLabel,
+              className: "min-h-[120px] resize-none rounded-xl border-0 bg-transparent p-1 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0",
               disabled,
               onChange: (event) => {
                 textareaProps?.onChange?.(event);

package/dist/components/ai-message-bubble/ai-message-bubble.js

@@ -2,8 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
-import { Avatar, AvatarFallback } from "../avatar";
-import { Badge } from "../badge";
+import { Avatar, AvatarFallback } from "../avatar/avatar";
+import { Badge } from "../badge/badge";
 const bubbleVariants = cva(
   "rounded-2xl border px-4 py-3 shadow-sm transition-colors",
   {
@@ -73,7 +73,7 @@ const AIMessageBubble = forwardRef(
               isUser ? "flex-row-reverse text-right" : "flex-row"
             ),
             children: [
-              /* @__PURE__ */ jsx(Avatar, { className: "mt-0.5 h-8 w-8 border border-border/70", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-muted text-[11px] font-medium uppercase text-muted-foreground", children: fallbackLabel }) }),
+              /* @__PURE__ */ jsx(Avatar, { className: "mt-0.5 size-8 border border-border/70", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-muted text-[11px] font-medium uppercase text-muted-foreground", children: fallbackLabel }) }),
               /* @__PURE__ */ jsxs(
                 "div",
                 {