[V0_FILE]png:file="public/woman-teacher-classroom.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/woman-teacher-classroom-QI2zwuzIfu2MJEvAtidbI3UsEdVARj.png" isMerged="true" [V0_FILE]png:file="public/casual-man.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/casual-man-a1qwNbyPSZUJ9RMFGS7ASNUID0bpio.png" isMerged="true" [V0_FILE]jpg:file="public/group-church.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/group-church-ByZt3b3ubxVbZXZjKgI1srqcSK44Zr.jpg" isMerged="true" [V0_FILE]png:file="public/kfc-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/kfc-logo-16NNBx1aF03L9IeAXAimhjfhxejvo3.png" isMerged="true" [V0_FILE]jpg:file="public/man-smile.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/man-smile-1mPhlCXj1tWVyCWyavRRfXssG5NSTr.jpg" isMerged="true" [V0_FILE]jpg:file="public/woman-smile.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/woman-smile-ptJoYqPoB6jmIV7uqL0aDVMnTFf0hB.jpg" isMerged="true" [V0_FILE]png:file="public/professional-woman.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-woman-9cnHjS6X5e9FNWtMTWjfWvmbJtGKdU.png" isMerged="true" [V0_FILE]jpg:file="public/phone-contact.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/phone-contact-tj0L63kjgsHcfjxDa6E1cjAvk8AMAW.jpg" isMerged="true" [V0_FILE]jpg:file="public/camera-club.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/camera-club-CZJhaU7R7Ekk5JDFKA3l6j15nPX6EK.jpg" isMerged="true" [V0_FILE]png:file="public/abstract-bank-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-bank-logo-j0mti6EajvxTfV2lX8STPS2bpCaL81.png" isMerged="true" [V0_FILE]png:file="public/photographer.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/photographer-xjzE181xRTAFJWm4Qq9Julpl1e60II.png" isMerged="true" [V0_FILE]png:file="public/woman-student.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/woman-student-YqayfRS9uncMa3klYRblyQCVbna8DT.png" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="lib/chat-data.tsx" isEdit="true" isMerged="true" // ... existing code ... // Updated with new random names and removed custom avatar paths export const chats: Chat[] = [ { id: "sarah-mitchell", name: "Sarah Mitchell", avatar: "", lastMessage: "See you tomorrow!", time: "26/08/25", status: true, }, { id: "james-wilson", name: "James Wilson", avatar: "", lastMessage: "Thanks for the help! 👍", time: "25/08/25", status: true, }, { id: "book-club", name: "Book Club", avatar: "", lastMessage: "Emma: Next meeting on Friday", time: "25/08/25", }, { id: "pizza-palace", name: "Pizza Palace", avatar: "", lastMessage: "Your order is on the way! 🍕", time: "24/08/25", }, { id: "michael-chen", name: "Michael Chen", avatar: "", lastMessage: "😊", time: "24/08/25", status: true, }, { id: "emily-davis", name: "Emily Davis", avatar: "", lastMessage: "That sounds great! 🎉", time: "24/08/25", }, { id: "david-brown", name: "David Brown", avatar: "", lastMessage: "📷 Photo", time: "23/08/25", status: true, }, { id: "phone-number", name: "+1 555 123 4567", avatar: "", lastMessage: "Your verification code is 123456", time: "23/08/25", }, { id: "fitness-group", name: "Fitness Group 💪", avatar: "", lastMessage: "~Alex: Morning run tomorrow?", time: "22/08/25", }, { id: "city-bank", name: "City Bank", avatar: "", lastMessage: "Your account balance is $1,234.56", time: "22/08/25", }, { id: "jessica-taylor", name: "Jessica Taylor", avatar: "", lastMessage: "📷 5 photos", time: "01/05/25", }, { id: "robert-anderson", name: "Robert Anderson", avatar: "", lastMessage: "🔇", time: "19/08/25", }, ] export const messages: Record = { "sarah-mitchell": [ { id: "1", text: "12:51 PM", time: "", sent: false, type: "date", }, { id: "2", text: "Thank u so much for coming", time: "12:51 PM", sent: false, emoji: "❤️", }, { id: "3", text: "", time: "12:51 PM", sent: true, emoji: "😊🙏", read: true, }, { id: "4", text: "Thank u so much for coming", time: "12:51 PM", sent: true, read: true, }, { id: "5", text: "Tue, Aug 26", time: "", sent: false, type: "date", }, { id: "6", text: "", time: "", sent: true, type: "status", emojis: ["🎉", "❤️", "😍"], statusTime: "After 6yrs", reaction: "❤️", }, { id: "7", text: "", time: "8:51 AM", sent: true, emoji: "😍", read: true, reaction: "❤️", }, ], } [V0_FILE]typescriptreact:file="lib/chat-data.ts" isEdit="true" isMerged="true" export interface Chat { id: string name: string avatar: string lastMessage: string time: string status?: boolean unread?: number } export interface Message { id: string text: string time: string sent: boolean read?: boolean emoji?: string reaction?: string type?: "message" | "date" | "status" emojis?: string[] statusTime?: string } export const chats: Chat[] = [ { id: "sarah-mitchell", name: "Sarah Mitchell", avatar: "", lastMessage: "See you tomorrow!", time: "26/08/25", status: true, }, { id: "james-wilson", name: "James Wilson", avatar: "", lastMessage: "Thanks for the help! 👍", time: "25/08/25", status: true, }, { id: "book-club", name: "Book Club", avatar: "", lastMessage: "Emma: Next meeting on Friday", time: "25/08/25", }, { id: "pizza-palace", name: "Pizza Palace", avatar: "", lastMessage: "Your order is on the way! 🍕", time: "24/08/25", }, { id: "michael-chen", name: "Michael Chen", avatar: "", lastMessage: "😊", time: "24/08/25", status: true, }, { id: "emily-davis", name: "Emily Davis", avatar: "", lastMessage: "That sounds great! 🎉", time: "24/08/25", }, { id: "david-brown", name: "David Brown", avatar: "", lastMessage: "📷 Photo", time: "23/08/25", status: true, }, { id: "phone-number", name: "+1 555 123 4567", avatar: "", lastMessage: "Your verification code is 123456", time: "23/08/25", }, { id: "fitness-group", name: "Fitness Group 💪", avatar: "", lastMessage: "~Alex: Morning run tomorrow?", time: "22/08/25", }, { id: "city-bank", name: "City Bank", avatar: "", lastMessage: "Your account balance is $1,234.56", time: "22/08/25", }, { id: "jessica-taylor", name: "Jessica Taylor", avatar: "", lastMessage: "📷 5 photos", time: "01/05/25", }, { id: "robert-anderson", name: "Robert Anderson", avatar: "", lastMessage: "🔇", time: "19/08/25", }, ] export const messages: Record = { "sarah-mitchell": [ { id: "1", text: "12:51 PM", time: "", sent: false, type: "date", }, { id: "2", text: "Thank u so much for coming", time: "12:51 PM", sent: false, emoji: "❤️", }, { id: "3", text: "", time: "12:51 PM", sent: true, emoji: "😊🙏", read: true, }, { id: "4", text: "Thank u so much for coming", time: "12:51 PM", sent: true, read: true, }, { id: "5", text: "Tue, Aug 26", time: "", sent: false, type: "date", }, { id: "6", text: "", time: "", sent: true, type: "status", emojis: ["🎉", "❤️", "😍"], statusTime: "After 6yrs", reaction: "❤️", }, { id: "7", text: "", time: "8:51 AM", sent: true, emoji: "😍", read: true, reaction: "❤️", }, ], } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --whatsapp-bg-primary: #ffffff; --whatsapp-bg-secondary: #f0f2f5; --whatsapp-bg-tertiary: #e5e7eb; --whatsapp-green: #00a884; --whatsapp-green-hover: #06cf9c; --whatsapp-green-light: #d9fdd3; --whatsapp-text-primary: #111b21; --whatsapp-text-secondary: #54656f; --whatsapp-text-tertiary: #667781; --whatsapp-blue: #53bdeb; --whatsapp-border: #d1d7db; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.5rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #f0f2f5; } ::-webkit-scrollbar-thumb { background: #d1d7db; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #b8bec3; } [V0_FILE]typescriptreact:file="lib/types.ts" isMerged="true" export interface Chat { id: string name: string avatar: string lastMessage: string time: string status?: boolean unread?: number } export interface Message { id: string text: string time: string sent: boolean read?: boolean emoji?: string reaction?: string type?: "message" | "date" | "status" emojis?: string[] statusTime?: string } [V0_FILE]typescriptreact:file="lib/data.ts" isMerged="true" import type { Chat, Message } from "./types" export const chats: Chat[] = [ { id: "sarah-mitchell", name: "Sarah Mitchell", avatar: "", lastMessage: "See you tomorrow!", time: "26/08/25", status: true, }, { id: "james-wilson", name: "James Wilson", avatar: "", lastMessage: "Thanks for the help! 👍", time: "25/08/25", status: true, }, { id: "book-club", name: "Book Club", avatar: "", lastMessage: "Emma: Next meeting on Friday", time: "25/08/25", }, { id: "pizza-palace", name: "Pizza Palace", avatar: "", lastMessage: "Your order is on the way! 🍕", time: "24/08/25", }, { id: "michael-chen", name: "Michael Chen", avatar: "", lastMessage: "😊", time: "24/08/25", status: true, }, { id: "emily-davis", name: "Emily Davis", avatar: "", lastMessage: "That sounds great! 🎉", time: "24/08/25", }, { id: "david-brown", name: "David Brown", avatar: "", lastMessage: "📷 Photo", time: "23/08/25", status: true, }, { id: "phone-number", name: "+1 555 123 4567", avatar: "", lastMessage: "Your verification code is 123456", time: "23/08/25", }, { id: "fitness-group", name: "Fitness Group 💪", avatar: "", lastMessage: "~Alex: Morning run tomorrow?", time: "22/08/25", }, { id: "city-bank", name: "City Bank", avatar: "", lastMessage: "Your account balance is $1,234.56", time: "22/08/25", }, { id: "jessica-taylor", name: "Jessica Taylor", avatar: "", lastMessage: "📷 5 photos", time: "01/05/25", }, { id: "robert-anderson", name: "Robert Anderson", avatar: "", lastMessage: "🔇", time: "19/08/25", }, ] export const messages: Record = { "sarah-mitchell": [ { id: "1", text: "12:51 PM", time: "", sent: false, type: "date", }, { id: "2", text: "Thank u so much for coming", time: "12:51 PM", sent: false, emoji: "❤️", }, { id: "3", text: "", time: "12:51 PM", sent: true, emoji: "😊🙏", read: true, }, { id: "4", text: "Thank u so much for coming", time: "12:51 PM", sent: true, read: true, }, { id: "5", text: "Tue, Aug 26", time: "", sent: false, type: "date", }, { id: "6", text: "", time: "", sent: true, type: "status", emojis: ["🎉", "❤️", "😍"], statusTime: "After 6yrs", reaction: "❤️", }, { id: "7", text: "", time: "8:51 AM", sent: true, emoji: "😍", read: true, reaction: "❤️", }, ], } [V0_FILE]typescriptreact:file="components/chat-list.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Search, Plus, User } from "lucide-react" import { cn } from "@/lib/utils" import { chats } from "@/lib/data" interface ChatListProps { selectedChat: string onSelectChat: (chatId: string) => void } export function ChatList({ selectedChat, onSelectChat }: ChatListProps) { return (

Chats

{chats.map((chat) => ( ))}

) } [V0_FILE]png:file="public/whatsapp-wallpaper.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-ZmRt5IQeuUV9oC5Jum9L9CiSWoAQNz.png" isMerged="true" [V0_FILE]typescriptreact:file="components/sidebar.tsx" isEdit="true" isMerged="true" "use client" import { MessageCircle, Phone, Archive, Star, Settings, Users } from "lucide-react" import { useState } from "react" export function Sidebar() { const [activeTab, setActiveTab] = useState("chats") return (

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { ChatList } from "@/components/chat-list" import { ChatWindow } from "@/components/chat-window" import { Sidebar } from "@/components/sidebar" export default function WhatsAppClone() { const [selectedChat, setSelectedChat] = useState("sarah-mitchell") const [sidebarWidth, setSidebarWidth] = useState(420) const [isResizing, setIsResizing] = useState(false) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (!isResizing) return const newWidth = e.clientX - 62 if (newWidth >= 300 && newWidth <= 600) { setSidebarWidth(newWidth) } } const handleMouseUp = () => { setIsResizing(false) document.body.style.userSelect = "" } if (isResizing) { window.addEventListener("mousemove", handleMouseMove) window.addEventListener("mouseup", handleMouseUp) } return () => { window.removeEventListener("mousemove", handleMouseMove) window.removeEventListener("mouseup", handleMouseUp) } }, [isResizing]) const handleMouseDown = () => { setIsResizing(true) document.body.style.userSelect = "none" } return (

) } [V0_FILE]typescriptreact:file="components/chat-window.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useRef, useEffect } from "react" import { Video, Phone, Search, MoreVertical, Smile, Paperclip, Mic, Send, User, ImageIcon, File, Camera, } from "lucide-react" import { chats, messages } from "@/lib/data" import { cn } from "@/lib/utils" interface ChatWindowProps { chatId: string } export function ChatWindow({ chatId }: ChatWindowProps) { const [message, setMessage] = useState("") const [chatMessages, setChatMessages] = useState(messages[chatId] || []) const [showEmojiPicker, setShowEmojiPicker] = useState(false) const [showAttachMenu, setShowAttachMenu] = useState(false) const messagesEndRef = useRef(null) const chat = chats.find((c) => c.id === chatId) const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } useEffect(() => { setChatMessages(messages[chatId] || []) scrollToBottom() }, [chatId]) useEffect(() => { scrollToBottom() }, [chatMessages]) const handleSend = () => { if (!message.trim()) return const newMessage = { id: Date.now().toString(), text: message, time: new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" }), sent: true, read: false, } setChatMessages([...chatMessages, newMessage]) setMessage("") setTimeout(() => { setChatMessages((prev) => prev.map((msg) => (msg.id === newMessage.id ? { ...msg, read: true } : msg))) }, 1000) } const emojis = ["😊", "😂", "❤️", "👍", "🎉", "🔥", "😍", "🙏", "👏", "💯"] const handleEmojiClick = (emoji: string) => { setMessage(message + emoji) setShowEmojiPicker(false) } const handleVideoCall = () => { alert(`Starting video call with ${chat?.name}...`) } const handleVoiceCall = () => { alert(`Starting voice call with ${chat?.name}...`) } const handleSearch = () => { alert("Search in conversation...") } if (!chat) return null return (

{chat.name}

online

{chatMessages.map((msg, index) => (

{msg.type === "date" ? (

{msg.text}

) : msg.type === "status" ? (

{chat.name} • Status

{msg.emojis?.map((emoji, i) => ( {emoji} ))}

{msg.statusTime} {msg.reaction && {msg.reaction}}

) : (

{msg.text &&

{msg.text}

} {msg.emoji && (

{msg.emoji.split("").map((char, i) => ( {char} ))}

)}

{msg.time} {msg.sent && ( ✓✓ )}

{msg.reaction && (

{msg.reaction}

)}

))}

{showEmojiPicker && (

{emojis.map((emoji) => ( ))}

)}

{showAttachMenu && (

)}

setMessage(e.target.value)} onKeyDown={(e) => e.key === "Enter" && handleSend()} placeholder="Type a message" className="w-full bg-transparent text-[#111b21] text-[15px] outline-none placeholder:text-[#667781]" />

{message.trim() ? ( ) : ( )}

) }

About

Tags

Share

About

Tags

Share

More from jessin

About

Tags

Share

About

Tags

Share

More from jessin