Unsupported Message Bubble

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import { type MessageStatus, MessageStatusIcon } from "./message-status";
6import "@/components/ui/whatsapp/styles/whatsapp.css";
7 
8export interface UnsupportedMessageBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
9  variant?: "incoming" | "outgoing";
10  title?: string;
11  description?: string;
12  timestamp?: string;
13  status?: MessageStatus;
14  showTail?: boolean;
15}
16 
17const UnsupportedMessageBubble = React.forwardRef<HTMLDivElement, UnsupportedMessageBubbleProps>(
18  (
19    {
20      className,
21      variant = "incoming",
22      title = "This message is not supported",
23      description,
24      timestamp,
25      status,
26      showTail = false,
27      ...props
28    },
29    ref
30  ) => {
31    const isOutgoing = variant === "outgoing";
32 
33    return (
34      <div
35        className={cn(
36          "flex w-full",
37          isOutgoing ? "justify-end" : "justify-start",
38          showTail ? "mb-[6px]" : "mb-[2px]",
39          className
40        )}
41        {...props}
42        ref={ref}
43      >
44        <div
45          className={cn(
46            "font-wa relative max-w-[60%] overflow-visible rounded-lg px-3 pb-[7px] pt-[6px]",
47            "border border-dashed border-wa-border",
48            isOutgoing ? "bg-wa-bubble-outgoing" : "bg-wa-bubble-incoming",
49            showTail && (isOutgoing ? "rounded-br-none" : "rounded-bl-none")
50          )}
51        >
52          <div className="flex items-start gap-2">
53            <svg viewBox="0 0 24 24" width="16" height="16" className="mt-[2px] shrink-0 text-wa-text-secondary" fill="currentColor">
54              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
55            </svg>
56            <div className="min-w-0">
57              <p className="text-[13px] leading-[18px] text-wa-text-secondary">{title}</p>
58              {description && (
59                <p className="mt-[2px] text-[12px] leading-[16px] text-wa-text-secondary opacity-70">{description}</p>
60              )}
61            </div>
62          </div>
63          <div className="float-right -mb-1 ml-2 mt-0.5 flex items-center gap-[3px]">
64            {timestamp && <span className="text-[11px] leading-[15px] text-wa-bubble-meta">{timestamp}</span>}
65            {isOutgoing && status && <MessageStatusIcon status={status} />}
66          </div>
67        </div>
68      </div>
69    );
70  }
71);
72UnsupportedMessageBubble.displayName = "UnsupportedMessageBubble";
73 
74// … truncated