Image

1"use client"
2 
3import { cn } from "@/lib/utils"
4import { useEffect, useState, type ImgHTMLAttributes } from "react"
5 
6export type GeneratedImageLike = {
7  base64?: string
8  uint8Array?: Uint8Array
9  mediaType?: string
10}
11 
12export type ImageProps = GeneratedImageLike &
13  Omit<ImgHTMLAttributes<HTMLImageElement>, "src"> & {
14    alt: string
15  }
16 
17function getImageSrc({
18  base64,
19  mediaType,
20}: Pick<GeneratedImageLike, "base64" | "mediaType">) {
21  if (base64 && mediaType) {
22    return `data:${mediaType};base64,${base64}`
23  }
24  return undefined
25}
26 
27export const Image = ({
28  base64,
29  uint8Array,
30  mediaType = "image/png",
31  className,
32  alt,
33  ...props
34}: ImageProps) => {
35  const [objectUrl, setObjectUrl] = useState<string | undefined>(undefined)
36 
37  useEffect(() => {
38    if (uint8Array && mediaType) {
39      const blob = new Blob([uint8Array as BlobPart], { type: mediaType })
40      const url = URL.createObjectURL(blob)
41      setObjectUrl(url)
42      return () => {
43        URL.revokeObjectURL(url)
44      }
45    }
46    setObjectUrl(undefined)
47    return
48  }, [uint8Array, mediaType])
49 
50  const base64Src = getImageSrc({ base64, mediaType })
51  const src = base64Src ?? objectUrl
52 
53  if (!src) {
54    return (
55      <div
56        aria-label={alt}
57        role="img"
58        className={cn(
59          "h-auto max-w-full animate-pulse overflow-hidden rounded-md bg-gray-100 dark:bg-neutral-800",
60          className
61        )}
62        {...props}
63      />
64    )
65  }
66 
67  return (
68    <img
69      src={src}
70      alt={alt}
71      className={cn("h-auto max-w-full overflow-hidden rounded-md", className)}
72      role="img"
73      {...props}
74    />
75  )
76}