Chat List Item

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import "@/components/ui/whatsapp/styles/whatsapp.css";
6 
7// WDS avatar palette — maps to actual WhatsApp avatar colors
8const AVATAR_COLORS = [
9  "#dba685", "#53a6fd", "#25d366", "#fc9775",
10  "#ff72a1", "#a791ff", "#fb5061", "#53bdeb",
11  "#42c7b8", "#ffd279",
12];
13 
14function getAvatarColor(name: string): string {
15  let hash = 0;
16  for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
17  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
18}
19 
20function getInitials(name: string): string {
21  return name.split(" ").map(w => w[0]).slice(0, 2).join("").toUpperCase();
22}
23 
24import { type MessageStatus, MessageStatusIcon } from "./message-status";
25 
26interface ChatListItemProps extends React.HTMLAttributes<HTMLDivElement> {
27  name: string;
28  avatar?: string;
29  lastMessage?: string;
30  lastMessageStatus?: MessageStatus;
31  timestamp?: string;
32  unreadCount?: number;
33  isOnline?: boolean;
34  isMuted?: boolean;
35  isTyping?: boolean;
36  isPinned?: boolean;
37  isSelected?: boolean;
38  /** Override the root element (e.g. Next.js Link, <a>, <button>) */
39  render?: React.ReactElement;
40}
41 
42 
43const ChatListItem = React.forwardRef<HTMLDivElement, ChatListItemProps>(
44  (
45    {
46      className,
47      name,
48      avatar,
49      lastMessage,
50      lastMessageStatus,
51      timestamp,
52      unreadCount,
53      isOnline = false,
54      isMuted = false,
55      isTyping = false,
56      isPinned = false,
57      isSelected = false,
58      render,
59      ...props
60    },
61    ref
62  ) => {
63    const hasUnread = !!unreadCount && unreadCount > 0;
64    const avatarColor = getAvatarColor(name);
65 
66    const rootClassName = cn(
67      "font-wa flex cursor-pointer items-center gap-[15px] py-[10px] transition-colors duration-150",
68      isSelected
69        ? "mx-2 rounded-xl bg-wa-active px-[9px]"
70        : "mx-2 rounded-xl px-[9px] hover:bg-wa-hover",
71      className
72    );
73 
74    const content = (
75      <>
76        {/* Avatar */}
77        <div className="relative shrink-0">
78          <div
79            className="h-wa-avatar-md w-wa-avatar-md overflow-hidden rounded-full"
80            style={{ backgroundColor: avatar ? undefined : avatarColor }}
81          >
82            {avatar ? (
83              <img src={avatar} alt={name} className="h-full w-full object-cover" />
84            ) : (
85              <span className="flex h-full w-full items-center justify-center text-[17px] font-semibold text-white">
86// … truncated