Reply Preview

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import "@/components/ui/whatsapp/styles/whatsapp.css";
6 
7type MediaType = "text" | "image" | "video" | "audio" | "document" | "sticker" | "location" | "contact";
8 
9const MEDIA_ICONS: Record<Exclude<MediaType, "text">, React.ReactNode> = {
10  image:    <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3L14.5 12l4.5 6H5l3.5-4.5z"/></svg>,
11  video:    <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>,
12  audio:    <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.4 5.4 0 0 1-4.4 2.26 5.4 5.4 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1zm-1 7v4l3-2-3-2z"/></svg>,
13  document: <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13z"/></svg>,
14  sticker:  <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M11.5 2C6.81 2 3 5.81 3 10.5S6.81 19 11.5 19h.5v3c4.86-2.34 8-7 8-11.5C20 5.81 16.19 2 11.5 2zm1 10.5h-3v-3h3v3zm0-4.5h-3V6h3v2z"/></svg>,
15  location: <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>,
16  contact:  <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>,
17};
18 
19export interface ReplyPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
20  author?: string;
21  authorColor?: string;
22  body?: string;
23  mediaType?: MediaType;
24  mediaThumb?: string;
25  onClick?: () => void;
26}
27 
28/**
29 * Quote/reply preview strip shown inside a bubble.
30 * Place this as the first child inside a ChatBubble or any message bubble.
31 */
32const ReplyPreview = React.forwardRef<HTMLDivElement, ReplyPreviewProps>(
33  (
34    {
35      className,
36      author,
37      authorColor = "var(--wa-emerald-500)",
38      body,
39      mediaType = "text",
40      mediaThumb,
41      onClick,
42      ...props
43    },
44    ref
45  ) => {
46    return (
47      <div
48// … truncated