"use client"; import React, { useState } from "react"; import { SmilePlus, Send, MoreHorizontal, CheckCheck, Check, Users, } from "lucide-react"; import Image from "next/image"; import { cn } from "@/lib/utils"; interface Message { id: string; content: string; sender: { name: string; avatar: string; isOnline: boolean; }; timestamp: string; status: "sent" | "delivered" | "read"; reactions?: Array<{ emoji: string; count: number; reacted: boolean; }>; } interface CollabChatCardProps { chatName?: string; messages?: Message[]; } export function CollabChatCard({ chatName = "Design Team", messages = [ { id: "1", content: "Just pushed the latest design system updates ✨", sender: { name: "Alex Chen", avatar: "https://github.com/shadcn.png", isOnline: true, }, timestamp: "10:24 AM", status: "read", reactions: [ { emoji: "🙌", count: 2, reacted: true }, { emoji: "✨", count: 1, reacted: false }, ], }, { id: "2", content: "The new components look amazing! Great work on the animations.", sender: { name: "Sarah Kim", avatar: "https://github.com/evilrabbit.png", isOnline: true, }, timestamp: "10:26 AM", status: "delivered", }, ], }: CollabChatCardProps) { const [selectedSender, setSelectedSender] = useState(null); // Get unique senders from messages const uniqueSenders = Array.from( new Map(messages.map((m) => [m.sender.name, m.sender])).values(), ); // Filter messages by selected sender or show all const filteredMessages = selectedSender ? messages.filter((m) => m.sender.name === selectedSender) : messages; return (

{/* Header */}

{chatName}

Collaborate creatively, deliver clearly.

{/* Body */}

{/* Participants List */} {/* Messages */}

{filteredMessages.length === 0 ? (

No messages to display.

) : ( filteredMessages.map((message) => (

{message.sender.name}

{message.timestamp}

{message.content}

{message.status === "read" && ( )} {message.status === "delivered" && ( )} {message.timestamp}

{message.reactions?.map((reaction) => ( ))}

)) )}

{/* Footer */}

); }

Prop	Type	Default	Description
`chatName`	`string`	`"Design Team"`	Name of the chat or team
`messages`	`Message[]`	-	Array of chat messages

Collab Chat Card

Installation

Props