Image Bubble

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import "@/components/ui/whatsapp/styles/whatsapp.css";
6import { type MessageStatus } from "./message-status";
7 
8interface ImageBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
9  variant?: "incoming" | "outgoing";
10  /** Single image (shorthand) */
11  src?: string;
12  /** Multiple image URLs — renders grid layout */
13  images?: string[];
14  alt?: string;
15  caption?: string;
16  timestamp?: string;
17  status?: MessageStatus;
18  showTail?: boolean;
19}
20 
21// ─── Icons ────────────────────────────────────────────────────────────────────
22 
23function CheckIcon({ className }: { className?: string }) {
24  return (
25    <svg viewBox="0 0 16 11" height="11" width="16" className={className}>
26      <path d="M11.071.653a.457.457 0 0 0-.304-.102.493.493 0 0 0-.381.178l-6.19 7.636-2.011-2.175a.463.463 0 0 0-.349-.158.467.467 0 0 0-.338.131.537.537 0 0 0-.14.353.54.54 0 0 0 .13.363l2.39 2.576a.465.465 0 0 0 .349.158.457.457 0 0 0 .368-.189l6.596-8.14a.504.504 0 0 0 .103-.36.516.516 0 0 0-.223-.271z" fill="currentColor" />
27    </svg>
28  );
29}
30 
31function DoubleCheckIcon({ className }: { className?: string }) {
32  return (
33    <svg viewBox="0 0 16 11" height="11" width="16" className={className}>
34      <path d="M11.071.653a.457.457 0 0 0-.304-.102.493.493 0 0 0-.381.178l-6.19 7.636-2.011-2.175a.463.463 0 0 0-.349-.158.467.467 0 0 0-.338.131.537.537 0 0 0-.14.353.54.54 0 0 0 .13.363l2.39 2.576a.465.465 0 0 0 .349.158.457.457 0 0 0 .368-.189l6.596-8.14a.504.504 0 0 0 .103-.36.516.516 0 0 0-.223-.271z" fill="currentColor" />
35      <path d="M15.071.653a.457.457 0 0 0-.304-.102.493.493 0 0 0-.381.178l-6.19 7.636-1.2-1.298-.728.897 1.58 1.704a.465.465 0 0 0 .349.158.457.457 0 0 0 .368-.189l6.596-8.14a.504.504 0 0 0 .103-.36.516.516 0 0 0-.193-.484z" fill="currentColor" />
36    </svg>
37  );
38}
39 
40// ─── Media cell with loading skeleton ────────────────────────────────────────
41 
42function ImageCell({
43  src,
44  overlay,
45  className,
46  naturalSize = false,
47}: {
48  src: string;
49  overlay?: React.ReactNode;
50  className?: string;
51  naturalSize?: boolean;
52}) {
53  const [loaded, setLoaded] = React.useState(false);
54 
55  return (
56    <div className={cn("relative overflow-hidden bg-wa-gray-800", className)}>
57// … truncated