Dashboard Chat App

1"use client";
2
3import { useState, useRef, useEffect } from "react";
4import { motion, AnimatePresence } from "framer-motion";
5import { Search, MoreVertical, Send, Plus, Smile, ChevronLeft, Image as ImageIcon, Bell, Edit3, CheckCheck } from "lucide-react";
6
7// Type definitions
8interface Message {
9    id: string;
10    content: string;
11    sender: "me" | "other";
12    timestamp: string;
13    type: "text" | "images";
14}
15
16interface Contact {
17    id: string;
18    name: string;
19    avatar: string;
20    messages: Message[];
21}
22
23// Contact data
24interface ContactData extends Contact {
25    tab: "friends" | "groups";
26    online: boolean;
27    time: string;
28    lastMessage: string;
29    unread?: number;
30    verified?: boolean;
31    lastSeen?: string;
32}
33
34const contacts: ContactData[] = [
35    {
36        id: "1",
37        name: "Alice Mensah",
38        avatar: "AM",
39        messages: [
40            { id: "1", content: "Hi! How are you?", sender: "other", timestamp: "14:30", type: "text" },
41            { id: "2", content: "Very good, and you?", sender: "me", timestamp: "14:31", type: "text" },
42            { id: "3", content: "Cool! Are we meeting this weekend?", sender: "other", timestamp: "14:32", type: "text" },
43        ],
44        tab: "friends",
45        online: true,
46        time: "14:32",
47        lastMessage: "Are we meeting this weekend?",
48        unread: 3,
49        verified: true,
50    },
51    {
52        id: "2",
53        name: "Alex Chen",
54        avatar: "AC",
55        messages: [
56            { id: "1", content: "Project finished? 📁", sender: "other", timestamp: "13:15", type: "text" },
57            { id: "2", content: "Yes, it's done!", sender: "me", timestamp: "13:16", type: "text" },
58        ],
59        tab: "friends",
60        online: true,
61        time: "13:16",
62        lastMessage: "Yes, it's done!",
63        verified: true,
64    },
65    {
66        id: "3",
67        name: "Ivan Goldberg",
68        avatar: "IG",
69        messages: [
70            { id: "1", content: "See you soon!", sender: "other", timestamp: "12:45", type: "text" },
71        ],
72        tab: "friends",
73        online: false,
74        time: "12:45",
75        lastMessage: "See you soon!",
76        lastSeen: "2h ago",
77    },
78    {
79        id: "4",
80        name: "Christina Brown",
81        avatar: "CB",
82        messages: [],
83        tab: "friends",
84        online: false,
85        time: "Yesterday",
86        lastMessage: "Thanks for everything!",
87// … truncated