Contact Bubble

1"use client";
2 
3import * as React from "react";
4import { Button } from "@base-ui/react/button";
5import { cn } from "@/lib/utils";
6import { type MessageStatus, MessageStatusIcon } from "./message-status";
7import "@/components/ui/whatsapp/styles/whatsapp.css";
8 
9export interface ContactItem {
10  /** Formatted display name */
11  name: string;
12  phones?: string[];
13  avatar?: string;
14  company?: string;
15}
16 
17export interface ContactBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
18  variant?: "incoming" | "outgoing";
19  contacts: ContactItem[];
20  timestamp?: string;
21  status?: MessageStatus;
22  showTail?: boolean;
23  onMessageContact?: (contact: ContactItem) => void;
24  onAddContact?: (contact: ContactItem) => void;
25}
26 
27const AVATAR_COLORS = [
28  "#dba685","#53a6fd","#25d366","#fc9775",
29  "#ff72a1","#a791ff","#fb5061","#53bdeb",
30  "#42c7b8","#ffd279",
31];
32 
33function getAvatarColor(name: string) {
34  let hash = 0;
35  for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
36  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
37}
38 
39function getInitials(name: string) {
40  return name.split(" ").map(w => w[0]).slice(0, 2).join("").toUpperCase();
41}
42 
43function ContactRow({ contact }: { contact: ContactItem }) {
44  return (
45    <div className="flex items-center gap-3 px-[9px] py-[10px]">
46      <div
47        className="flex h-[40px] w-[40px] shrink-0 items-center justify-center rounded-full text-[15px] font-semibold text-white"
48        style={{ backgroundColor: contact.avatar ? undefined : getAvatarColor(contact.name) }}
49      >
50        {contact.avatar
51          ? <img src={contact.avatar} alt={contact.name} className="h-full w-full rounded-full object-cover" />
52          : getInitials(contact.name)
53        }
54      </div>
55      <div className="min-w-0">
56        <p className="text-[14.2px] font-medium leading-[19px] text-wa-text-primary">{contact.name}</p>
57        {contact.company && (
58          <p className="text-[12px] leading-[16px] text-wa-text-secondary">{contact.company}</p>
59        )}
60        {contact.phones?.[0] && (
61          <p className="text-[12px] leading-[16px] text-wa-text-secondary">{contact.phones[0]}</p>
62        )}
63      </div>
64    </div>
65  );
66}
67 
68const ContactBubble = React.forwardRef<HTMLDivElement, ContactBubbleProps>(
69  (
70    {
71      className,
72      variant = "incoming",
73      contacts,
74      timestamp,
75      status,
76      showTail = false,
77      onMessageContact,
78      onAddContact,
79      ...props
80    },
81    ref
82// … truncated