"use client"; import { Bot, Loader2, Paperclip, Send } from "lucide-react"; import { useRef, useState } from "react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from "@/components/ui/empty"; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea, } from "@/components/ui/input-group"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; export interface ChatMessage { id: string; content: string; author: { id: string; name: string; avatar?: string; }; timestamp: Date; mentions?: string[]; attachments?: { id: string; name: string; url: string; type: string; }[]; isAIMention?: boolean; } export interface TeamChatProps { messages?: ChatMessage[]; currentUserId?: string; onSendMessage?: (content: string, mentions?: string[]) => Promise; onMentionAI?: () => void; onUploadFile?: (file: File) => Promise; className?: string; placeholder?: string; showAIButton?: boolean; } function formatTime(date: Date): string { return new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit", }).format(date); } function formatDate(date: Date): string { const today = new Date(); const yesterday = new Date(today); yesterday.setDate(yesterday.getDate() - 1); if (date.toDateString() === today.toDateString()) { return "Today"; } if (date.toDateString() === yesterday.toDateString()) { return "Yesterday"; } return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", }).format(date); } function getInitials(name: string): string { return name .split(" ") .map((n) => n[0]) .join("") .toUpperCase() .slice(0, 2); } export default function TeamChat({ messages = [], currentUserId, onSendMessage, onMentionAI, onUploadFile, className, placeholder = "Type a message…", showAIButton = true, }: TeamChatProps) { const [input, setInput] = useState(""); const [isSending, setIsSending] = useState(false); const textareaRef = useRef(null); const handleSend = async () => { if (!input.trim() || isSending) return; const content = input.trim(); setInput(""); setIsSending(true); try { // Extract mentions (e.g., @username or @ai) const mentionRegex = /@(\w+)/g; const mentions: string[] = []; let match; while ((match = mentionRegex.exec(content)) !== null) { mentions.push(match[1]); } await onSendMessage?.(content, mentions); } catch (error) { // Restore input on error setInput(content); } finally { setIsSending(false); textareaRef.current?.focus(); } }; const handleKeyDown = (e: React.KeyboardEvent) => { if ((e.metaKey || e.ctrlKey) && e.key === "Enter") { e.preventDefault(); handleSend(); } }; const groupedMessages = messages.reduce( (groups, message) => { const dateKey = formatDate(message.timestamp); if (!groups[dateKey]) { groups[dateKey] = []; } groups[dateKey].push(message); return groups; }, {} as Record ); return (

Team Chat Chat with your team members in real-time

{/* Messages */}

{messages.length === 0 ? ( No messages yet Start the conversation! ) : (

{Object.entries(groupedMessages).map( ([dateKey, dateMessages]) => (

{dateKey}

{dateMessages.map((message, idx) => { const isCurrentUser = message.author.id === currentUserId; const showAvatar = idx === 0 || dateMessages[idx - 1].author.id !== message.author.id; return (

{showAvatar ? ( {getInitials(message.author.name)} ) : (

)}

{showAvatar && (

{message.author.name} {formatTime(message.timestamp)}

)}

{message.content}

{message.isAIMention && (

AI mentioned

)}

); })}

) )}

)}

{/* Input */}

{onUploadFile && ( )} {showAIButton && onMentionAI && ( )}

setInput(e.target.value)} onKeyDown={handleKeyDown} placeholder={placeholder} ref={textareaRef} rows={1} value={input} /> {isSending ? ( ) : ( )}

⌘ + Enter to send {input.trim() && ( {input.length} character{input.length !== 1 ? "s" : ""} )}

); }

Example Usage