Image

1"use client";
2 
3import * as React from "react";
4import * as DialogPrimitive from "@radix-ui/react-dialog";
5import { Slot } from "@radix-ui/react-slot";
6 
7import {
8  Tooltip,
9  TooltipContent,
10  TooltipProvider,
11  TooltipTrigger,
12} from "@/components/ui/tooltip";
13import { Kbd } from "@/components/ui/kbd";
14import { cn } from "@/lib/utils";
15 
16type ImageData = {
17  src?: string;
18  base64?: string;
19  uint8Array?: Uint8Array;
20  mediaType?: string;
21};
22 
23function resolveBase64MediaType(base64: string, fallback: string) {
24  const trimmed = base64.trim();
25 
26  if (trimmed.startsWith("data:")) {
27    return /^data:([^;,]+)/i.exec(trimmed)?.[1] ?? fallback;
28  }
29 
30  const normalized = trimmed.replace(/\s+/g, "").slice(0, 120);
31 
32  if (normalized.startsWith("iVBORw0KGgo")) return "image/png";
33  if (normalized.startsWith("/9j/")) return "image/jpeg";
34  if (normalized.startsWith("R0lGOD")) return "image/gif";
35  if (normalized.startsWith("UklGR") && normalized.includes("V0VCUA")) {
36    return "image/webp";
37  }
38  if (normalized.startsWith("PHN2Zy") || normalized.startsWith("PD94bWwg")) {
39    return "image/svg+xml";
40  }
41 
42  return fallback;
43}
44 
45function toDataUrl(base64: string, mediaType: string) {
46  const trimmed = base64.trim();
47  if (trimmed.startsWith("data:")) return trimmed;
48  return `data:${mediaType};base64,${trimmed}`;
49}
50 
51function uint8ArrayToBase64(bytes: Uint8Array) {
52  let binary = "";
53  const chunkSize = 0x8000;
54  for (let i = 0; i < bytes.length; i += chunkSize) {
55    const chunk = bytes.subarray(i, i + chunkSize);
56    binary += String.fromCharCode(...chunk);
57  }
58  return btoa(binary);
59}
60 
61type ImageContextValue = {
62  src?: string;
63  alt: string;
64  mediaType?: string;
65  hasError: boolean;
66  setHasError: (value: boolean) => void;
67};
68 
69const ImageContext = React.createContext<ImageContextValue | null>(null);
70 
71function useImageContext(component: string) {
72  const ctx = React.useContext(ImageContext);
73  if (!ctx) {
74    throw new Error(`${component} must be used within <Image>`);
75  }
76  return ctx;
77}
78 
79export type ImageProps = Omit<
80  React.HTMLAttributes<HTMLDivElement>,
81  "children"
82> &
83  Omit<React.ComponentProps<typeof DialogPrimitive.Root>, "children"> &
84  ImageData & {
85    alt?: string;
86    children?: React.ReactNode;
87  };
88 
89function Image({
90  src,
91  base64,
92  uint8Array,
93  mediaType,
94  open,
95  defaultOpen,
96  onOpenChange,
97  modal,
98  alt = "",
99  className,
100  children,
101  ...props
102}: ImageProps) {
103  const hasUint8BlobSource =
104// … truncated