added Voice, blueticks, fixed messages, fixed search conversation, added scroll functionality, fixed file uploads & download added in screenshot paste function too, changed back to the orignal emoji pack

src/app/(dashboard)/chats/page.tsx

@@ -17,7 +17,8 @@ import {
 import { conversations as conversationsData } from "@/data/chats"
 import {
   Search, Send, Phone, Video, MoreHorizontal, Paperclip,
-  Smile, Flag, Ban, Trash2, Image, File, X,
+  Smile, Flag, Ban, Trash2, Image, FileIcon, X, Mic, Square, Play, Pause, Check, CheckCheck,
+  CornerDownRight, Forward, Pencil, Download,
 } from "lucide-react"
 import {
   Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription,
@@ -31,6 +32,65 @@ import { toast } from "sonner"
 import data from "@emoji-mart/data"
 import Picker from "@emoji-mart/react"
 
+function VoiceMessagePlayer({ src, initialDuration }: { src: string; initialDuration: number }) {
+  const [playing, setPlaying] = useState(false)
+  const [current, setCurrent] = useState(0)
+  const [duration, setDuration] = useState(initialDuration)
+  const audioRef = useRef<HTMLAudioElement>(null)
+  const animRef = useRef<number>(0)
+
+  useEffect(() => {
+    const audio = audioRef.current
+    if (!audio) return
+    const onLoaded = () => {
+      if (isFinite(audio.duration)) setDuration(audio.duration)
+    }
+    const onEnded = () => { setPlaying(false); setCurrent(0) }
+    audio.addEventListener("loadedmetadata", onLoaded)
+    audio.addEventListener("ended", onEnded)
+    return () => {
+      audio.removeEventListener("loadedmetadata", onLoaded)
+      audio.removeEventListener("ended", onEnded)
+    }
+  }, [src])
+
+  useEffect(() => {
+    if (!playing) { cancelAnimationFrame(animRef.current); return }
+    const tick = () => {
+      if (audioRef.current) setCurrent(audioRef.current.currentTime)
+      animRef.current = requestAnimationFrame(tick)
+    }
+    animRef.current = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(animRef.current)
+  }, [playing])
+
+  const toggle = () => {
+    if (!audioRef.current) return
+    if (playing) { audioRef.current.pause(); setPlaying(false) }
+    else { audioRef.current.play(); setPlaying(true) }
+  }
+
+  const displayDuration = isFinite(duration) && duration > 0 ? duration : initialDuration
+  const pct = displayDuration > 0 ? (current / displayDuration) * 100 : 0
+  const fmt = (s: number) => {
+    const secs = isFinite(s) ? Math.max(0, Math.floor(s)) : 0
+    return `${Math.floor(secs / 60)}:${(secs % 60).toString().padStart(2, "0")}`
+  }
+
+  return (
+    <div className="flex items-center gap-2 min-w-[180px]">
+      <audio ref={audioRef} src={src} preload="metadata" />
+      <button type="button" onClick={toggle} className="h-8 w-8 shrink-0 rounded-full flex items-center justify-center hover:bg-black/10 transition-colors">
+        {playing ? <Pause className="h-4 w-4 fill-current" /> : <Play className="h-4 w-4 ml-0.5 fill-current" />}
+      </button>
+      <div className="flex-1 h-1.5 rounded-full bg-white/30 relative overflow-hidden">
+        <div className="h-full rounded-full bg-white transition-all duration-100" style={{ width: `${pct}%` }} />
+      </div>
+      <span className="text-[11px] tabular-nums opacity-70 w-8 text-right">{fmt(displayDuration)}</span>
+    </div>
+  )
+}
+
 export default function ChatsPage() {
   const { theme } = useTheme()
   const { user } = useUser()
@@ -42,14 +102,52 @@ export default function ChatsPage() {
   const [isResizing, setIsResizing] = useState(false)
   const [reportDialogOpen, setReportDialogOpen] = useState(false)
   const [reportReason, setReportReason] = useState("")
+  const [forwardDialogOpen, setForwardDialogOpen] = useState(false)
+  const [forwardMessage, setForwardMessage] = useState<typeof conversationsData[0]["messages"][0] | null>(null)
+  const [forwardSearch, setForwardSearch] = useState("")
+  const [searchQuery, setSearchQuery] = useState("")
+  const [isRecording, setIsRecording] = useState(false)
+  const [isPaused, setIsPaused] = useState(false)
+  const [recordingDuration, setRecordingDuration] = useState(0)
+  const recordingDurationRef = useRef(0)
+  const [voiceMessages, setVoiceMessages] = useState<Map<string, { url: string; duration: number }>>(new Map())
+  const [messageAttachments, setMessageAttachments] = useState<Map<string, { name: string; type: string; url: string }[]>>(new Map())
+  const [replyingTo, setReplyingTo] = useState<typeof conversationsData[0]["messages"][0] | null>(null)
+  const [editingMessage, setEditingMessage] = useState<typeof conversationsData[0]["messages"][0] | null>(null)
+  const [replyMap, setReplyMap] = useState<Map<string, { repliedToSender: string; repliedToContent: string }>>(new Map())
+  const [messageStatus, setMessageStatus] = useState<Map<string, "sent" | "delivered" | "read">>(() => {
+    const map = new Map<string, "sent" | "delivered" | "read">()
+    conversationsData.forEach((conv) =>
+      conv.messages.forEach((msg) => {
+        if (msg.senderId === "user1") map.set(msg.id, "read")
+      })
+    )
+    return map
+  })
   const fileInputRef = useRef<HTMLInputElement>(null)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
   const emojiPickerRef = useRef<HTMLDivElement>(null)
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
+  const recordingChunksRef = useRef<Blob[]>([])
   const resizeStartRef = useRef({ x: 0, width: 0 })
 
+  const isOnlyEmoji = (text: string) => /^(\p{Extended_Pictographic}\s*)+$/u.test(text.trim())
+
+  const autoResizeTextarea = useCallback(() => {
+    const ta = textareaRef.current
+    if (!ta) return
+    ta.style.height = "auto"
+    ta.style.height = `${ta.scrollHeight}px`
+  }, [])
+
   const [conversations, setConversations] = useState(conversationsData)
   const conversation = conversations.find((c) => c.id === activeChat)
   const otherParticipant = (conv: typeof conversationsData[0]) =>
     conv.participants.find((p) => p.id !== "user1") ?? conv.participants[0]
+  const filteredConversations = searchQuery.trim()
+    ? conversations.filter((conv) => otherParticipant(conv).name.toLowerCase().includes(searchQuery.toLowerCase()))
+    : conversations
 
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => {
@@ -83,9 +181,14 @@ export default function ChatsPage() {
     }
   }, [isResizing])
 
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
+  }, [conversations])
+
   const handleEmojiSelect = (emoji: { native: string }) => {
     setMessageInput((prev) => prev + emoji.native)
     setShowEmojiPicker(false)
+    setTimeout(() => autoResizeTextarea(), 0)
   }
 
   const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -98,16 +201,15 @@ export default function ChatsPage() {
     setAttachments((prev) => prev.filter((_, i) => i !== index))
   }
 
-  const handleSend = (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!messageInput.trim() && attachments.length === 0) return
+  const addMessageToChat = (content: string, voice?: { url: string; duration: number }, replyTo?: { senderName: string; content: string }, attachments?: { name: string; type: string; url: string }[]) => {
+    const id = crypto.randomUUID()
     const newMessage = {
-      id: crypto.randomUUID(),
+      id,
       conversationId: activeChat!,
       senderId: "user1",
       senderName: "Sarah Chen",
       senderAvatar: "SC",
-      content: messageInput.trim(),
+      content,
       timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
     }
     setConversations((prev) =>
@@ -116,17 +218,165 @@ export default function ChatsPage() {
           ? {
               ...conv,
               messages: [...conv.messages, newMessage],
-              lastMessage: newMessage.content,
+              lastMessage: voice ? "🎤 Voice note" : (replyTo ? `↪ ${content}` : content),
               lastMessageTime: "Just now",
               unread: 0,
             }
           : conv
       )
     )
+    setMessageStatus((prev) => {
+      const next = new Map(prev)
+      next.set(id, "sent")
+      return next
+    })
+    setTimeout(() => {
+      setMessageStatus((prev) => {
+        const next = new Map(prev)
+        if (next.get(id) === "sent") next.set(id, "delivered")
+        return next
+      })
+    }, 1000)
+    if (voice) {
+      setVoiceMessages((prev) => {
+        const next = new Map(prev)
+        next.set(id, voice)
+        return next
+      })
+    }
+    if (replyTo) {
+      setReplyMap((prev) => {
+        const next = new Map(prev)
+        next.set(id, { repliedToSender: replyTo.senderName, repliedToContent: replyTo.content })
+        return next
+      })
+    }
+    if (attachments && attachments.length > 0) {
+      setMessageAttachments((prev) => {
+        const next = new Map(prev)
+        next.set(id, attachments)
+        return next
+      })
+    }
+  }
+
+  const handleSend = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!messageInput.trim() && attachments.length === 0) return
+    if (editingMessage) {
+      setConversations((prev) =>
+        prev.map((conv) => ({
+          ...conv,
+          messages: conv.messages.map((m) =>
+            m.id === editingMessage.id ? { ...m, content: messageInput.trim() } : m
+          ),
+          lastMessage: conv.id === activeChat && conv.messages.some((m) => m.id === editingMessage.id)
+            ? messageInput.trim() : conv.lastMessage,
+        }))
+      )
+      setEditingMessage(null)
+      setMessageInput("")
+      setTimeout(() => autoResizeTextarea(), 0)
+      return
+    }
+    const fileAttachments = attachments.length > 0
+      ? attachments.map((f) => ({ name: f.name, type: f.type, url: URL.createObjectURL(f) }))
+      : undefined
+    if (replyingTo) {
+      const replySender = replyingTo.senderId === "user1" ? user.name : otherParticipant(conversation!).name
+      addMessageToChat(messageInput.trim(), undefined, { senderName: replySender, content: replyingTo.content }, fileAttachments)
+      setReplyingTo(null)
+    } else {
+      addMessageToChat(messageInput.trim(), undefined, undefined, fileAttachments)
+    }
     setMessageInput("")
+    setTimeout(() => autoResizeTextarea(), 0)
     setAttachments([])
   }
 
+  const handleDeleteMessage = (messageId: string) => {
+    setConversations((prev) =>
+      prev.map((conv) => ({
+        ...conv,
+        messages: conv.messages.filter((m) => m.id !== messageId),
+        lastMessage: conv.messages.filter((m) => m.id !== messageId).at(-1)?.content ?? conv.lastMessage,
+      }))
+    )
+    toast.success("Message deleted")
+  }
+
+  const startRecording = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+      const recorder = new MediaRecorder(stream, { mimeType: "audio/webm" })
+      recordingChunksRef.current = []
+      recorder.ondataavailable = (e) => {
+        if (e.data.size > 0) recordingChunksRef.current.push(e.data)
+      }
+      recorder.onstop = () => {
+        const blob = new Blob(recordingChunksRef.current, { type: "audio/webm" })
+        const url = URL.createObjectURL(blob)
+        addMessageToChat("", { url, duration: recordingDurationRef.current })
+        stream.getTracks().forEach((t) => t.stop())
+        setRecordingDuration(0)
+      }
+      mediaRecorderRef.current = recorder
+      recorder.start()
+      setIsRecording(true)
+      setIsPaused(false)
+    } catch {
+      toast.error("Microphone access denied")
+    }
+  }
+
+  const togglePauseRecording = () => {
+    const recorder = mediaRecorderRef.current
+    if (!recorder || recorder.state === "inactive") return
+    if (recorder.state === "recording") {
+      recorder.pause()
+      setIsPaused(true)
+    } else {
+      recorder.resume()
+      setIsPaused(false)
+    }
+  }
+
+  const stopRecording = () => {
+    mediaRecorderRef.current?.stop()
+    setIsRecording(false)
+    setIsPaused(false)
+  }
+
+  const discardRecording = () => {
+    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+      mediaRecorderRef.current.ondataavailable = null
+      mediaRecorderRef.current.onstop = null
+      mediaRecorderRef.current.stop()
+      mediaRecorderRef.current.stream?.getTracks().forEach((t) => t.stop())
+    }
+    setIsRecording(false)
+    setIsPaused(false)
+    setRecordingDuration(0)
+    recordingDurationRef.current = 0
+  }
+
+  useEffect(() => {
+    if (!isRecording) return
+    recordingDurationRef.current = 0
+    setRecordingDuration(0)
+    const interval = setInterval(() => {
+      recordingDurationRef.current += 1
+      setRecordingDuration(recordingDurationRef.current)
+    }, 1000)
+    return () => clearInterval(interval)
+  }, [isRecording])
+
+  const formatDuration = (secs: number) => {
+    const m = Math.floor(secs / 60)
+    const s = secs % 60
+    return `${m}:${s.toString().padStart(2, "0")}`
+  }
+
   const formatFileSize = (bytes: number) => {
     if (bytes < 1024) return bytes + " B"
     if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB"
@@ -146,11 +396,11 @@ export default function ChatsPage() {
           <h2 className="text-lg font-semibold">Chats</h2>
           <div className="relative">
             <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-            <Input placeholder="Search conversations..." className="h-9 pl-9" />
+            <Input value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} placeholder="Search conversations..." className="h-9 pl-9" />
           </div>
         </div>
         <ScrollArea className="flex-1">
-          {conversations.map((conv) => {
+          {filteredConversations.map((conv) => {
             const person = otherParticipant(conv)
             const isActive = conv.id === activeChat
             return (
@@ -180,6 +430,9 @@ export default function ChatsPage() {
               </button>
             )
           })}
+          {filteredConversations.length === 0 && searchQuery && (
+            <div className="p-4 text-center text-sm text-muted-foreground">No conversations found</div>
+          )}
         </ScrollArea>
       </div>
 
@@ -206,16 +459,10 @@ export default function ChatsPage() {
               </div>
             </div>
             <div className="flex items-center gap-1 shrink-0">
-              <Button
-                variant="ghost" size="icon" className="h-8 w-8"
-                onClick={() => toast.info("Voice calling coming soon")}
-              >
+              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => toast.info("Voice calling coming soon")}>
                 <Phone className="h-4 w-4" />
               </Button>
-              <Button
-                variant="ghost" size="icon" className="h-8 w-8"
-                onClick={() => toast.info("Video calling coming soon")}
-              >
+              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => toast.info("Video calling coming soon")}>
                 <Video className="h-4 w-4" />
               </Button>
               <DropdownMenu>
@@ -234,10 +481,7 @@ export default function ChatsPage() {
                     <Ban className="mr-2 h-4 w-4" /> Block
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
-                  <DropdownMenuItem
-                    className="text-destructive"
-                    onClick={() => toast.info("Conversation deleted")}
-                  >
+                  <DropdownMenuItem className="text-destructive" onClick={() => toast.info("Conversation deleted")}>
                     <Trash2 className="mr-2 h-4 w-4" /> Delete
                   </DropdownMenuItem>
                 </DropdownMenuContent>
@@ -246,12 +490,13 @@ export default function ChatsPage() {
           </div>
 
           {/* Messages */}
-          <ScrollArea className="flex-1 p-6">
-            <div className="space-y-4">
+          <div className="flex-1 overflow-y-auto p-6" style={{ scrollbarWidth: "thin", scrollbarColor: "hsl(var(--muted-foreground) / 0.3) transparent" }}>
+            <div className="space-y-4 min-h-0">
               {conversation.messages.map((msg) => {
                 const isMe = msg.senderId === "user1"
+                const voiceUrl = voiceMessages.get(msg.id)
                 return (
-                  <div key={msg.id} className={cn("flex gap-3", isMe && "flex-row-reverse")}>
+                  <div key={msg.id} className={cn("group flex gap-3", isMe && "flex-row-reverse")}>
                     <Avatar className="h-8 w-8 mt-0.5 shrink-0">
                       {isMe ? <AvatarImage src={user.avatar} /> : null}
                       <AvatarFallback className={cn("text-xs", isMe && "bg-primary text-primary-foreground")}>
@@ -261,92 +506,208 @@ export default function ChatsPage() {
                     <div className={cn("max-w-[70%]", isMe && "items-end flex flex-col")}>
                       <div
                         className={cn(
-                          "rounded-2xl px-4 py-2.5 text-sm",
+                          "rounded-2xl px-5 py-3 text-base relative",
                           isMe ? "bg-primary text-primary-foreground rounded-tr-sm" : "bg-muted rounded-tl-sm"
                         )}
                       >
-                        {msg.content}
+                        {!isMe && (
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <button type="button" className="absolute -right-8 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity h-6 w-6 flex items-center justify-center rounded-full hover:bg-sky-400/20">
+                                <MoreHorizontal className="h-3.5 w-3.5 text-sky-400" />
+                              </button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="start" side="top" className="w-32">
+                              <DropdownMenuItem onClick={() => setReplyingTo(msg)}>
+                                <CornerDownRight className="mr-2 h-4 w-4" /> Reply
+                              </DropdownMenuItem>
+                              <DropdownMenuItem onClick={() => { setForwardMessage(msg); setForwardDialogOpen(true) }}>
+                                <Forward className="mr-2 h-4 w-4" /> Forward
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        )}
+                        {isMe && (
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <button type="button" className="absolute -left-8 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity h-6 w-6 flex items-center justify-center rounded-full hover:bg-sky-400/20">
+                                <MoreHorizontal className="h-3.5 w-3.5 text-sky-400" />
+                              </button>
+                            </DropdownMenuTrigger>
+                             <DropdownMenuContent align="end" side="top" className="w-32">
+                              <DropdownMenuItem onClick={() => { setEditingMessage(msg); setMessageInput(msg.content) }}>
+                                <Pencil className="mr-2 h-4 w-4" /> Edit
+                              </DropdownMenuItem>
+                              <DropdownMenuItem onClick={() => setReplyingTo(msg)}>
+                                <CornerDownRight className="mr-2 h-4 w-4" /> Reply
+                              </DropdownMenuItem>
+                              <DropdownMenuItem onClick={() => { setForwardMessage(msg); setForwardDialogOpen(true) }}>
+                                <Forward className="mr-2 h-4 w-4" /> Forward
+                              </DropdownMenuItem>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuItem className="text-destructive" onClick={() => handleDeleteMessage(msg.id)}>
+                                <Trash2 className="mr-2 h-4 w-4" /> Delete
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        )}
+                        {(() => {
+                          const replyInfo = replyMap.get(msg.id)
+                          return (
+                            <>
+                              {replyInfo && (
+                                <div className={cn("mb-1.5 pl-2 border-l-2 overflow-hidden bg-black/70 rounded-sm text-white", isMe ? "border-white/40" : "border-primary/40")}>
+                                  <p className="text-[11px] font-medium truncate">{replyInfo.repliedToSender}</p>
+                                  <p className="text-[11px] text-white/60 truncate">{replyInfo.repliedToContent}</p>
+                                </div>
+                              )}
+                              {voiceUrl ? (
+                                <div>
+                                  <VoiceMessagePlayer src={voiceUrl.url} initialDuration={voiceUrl.duration} />
+                                  {msg.content && (
+                                    <p className="mt-1 text-sm text-black">{msg.content}</p>
+                                  )}
+                                </div>
+                              ) : (
+                                <>
+                                  {(() => {
+                                    const files = messageAttachments.get(msg.id)
+                                    return files && files.length > 0 ? (
+                                      <div className="space-y-1.5 mb-1.5">
+                                        {files.map((file, i) =>
+                                          file.type.startsWith("image/") ? (
+                                            <div key={i} className="relative group">
+                                              <img src={file.url} alt={file.name} className="max-w-full rounded-lg max-h-60 object-cover cursor-pointer" onClick={() => window.open(file.url, "_blank")} />
+                                              <a href={file.url} download={file.name} className="absolute top-2 right-2 h-7 w-7 rounded-full bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                                                <Download className="h-3.5 w-3.5 text-white" />
+                                              </a>
+                                            </div>
+                                          ) : (
+                                            <a key={i} href={file.url} download={file.name} className="flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2 text-sm hover:bg-muted/80 transition-colors">
+                                              <FileIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
+                                              <span className="flex-1 min-w-0 truncate">{file.name}</span>
+                                              <Download className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                                            </a>
+                                          )
+                                        )}
+                                      </div>
+                                    ) : null
+                                  })()}
+                                  {isOnlyEmoji(msg.content) ? (
+                                    <span className="text-4xl leading-none">{msg.content.trim()}</span>
+                                  ) : (
+                                    msg.content
+                                  )}
+                                </>
+                              )}
+                            </>
+                          )
+                        })()}
                       </div>
-                      <span className="text-[10px] text-muted-foreground mt-1 px-1">{msg.timestamp}</span>
+                      <span className="flex items-center gap-1 text-xs text-muted-foreground mt-1.5 px-1">
+                        {msg.timestamp}
+                        {isMe && (
+                          (() => {
+                            const status = messageStatus.get(msg.id)
+                            if (status === "read") return <CheckCheck className="h-3 w-3 text-blue-400" />
+                            if (status === "delivered") return <CheckCheck className="h-3 w-3 text-muted-foreground/60" />
+                            return <Check className="h-3 w-3 text-muted-foreground/60" />
+                          })()
+                        )}
+                      </span>
                     </div>
                   </div>
                 )
               })}
+            <div ref={messagesEndRef} />
             </div>
-          </ScrollArea>
+          </div>
 
           {/* Input */}
           <div className="p-4 border-t shrink-0 space-y-2">
             {attachments.length > 0 && (
               <div className="flex flex-wrap gap-2">
                 {attachments.map((file, i) => (
-                  <div
-                    key={i}
-                    className="flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-1.5 text-sm max-w-[200px]"
-                  >
+                  <div key={i} className="flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-1.5 text-sm max-w-[200px]">
                     {isImageFile(file) ? (
                       <Image className="h-4 w-4 shrink-0 text-muted-foreground" />
                     ) : (
-                      <File className="h-4 w-4 shrink-0 text-muted-foreground" />
+                      <FileIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
                     )}
                     <span className="truncate">{file.name}</span>
                     <span className="text-xs text-muted-foreground shrink-0">{formatFileSize(file.size)}</span>
-                    <Button
-                      variant="ghost" size="icon" className="h-5 w-5 -mr-1 shrink-0"
-                      onClick={() => removeAttachment(i)}
-                    >
+                    <Button variant="ghost" size="icon" className="h-5 w-5 -mr-1 shrink-0" onClick={() => removeAttachment(i)}>
                       <X className="h-3 w-3" />
                     </Button>
                   </div>
                 ))}
               </div>
             )}
+            {/* Reply bar */}
+            {replyingTo && (
+              <div className="flex items-center gap-2 rounded-lg border-l-4 border-primary bg-muted/50 px-3 py-2 text-sm">
+                <div className="flex-1 min-w-0">
+                  <p className="text-xs font-medium text-primary">
+                    Replying to {replyingTo.senderId === "user1" ? "yourself" : otherParticipant(conversation).name}
+                  </p>
+                  <p className="text-xs text-muted-foreground truncate">{replyingTo.content}</p>
+                </div>
+                <Button variant="ghost" size="icon" className="h-6 w-6 shrink-0" onClick={() => setReplyingTo(null)}>
+                  <X className="h-3 w-3" />
+                </Button>
+              </div>
+            )}
+            {editingMessage && (
+              <div className="flex items-center gap-2 rounded-lg bg-muted/50 px-3 py-2 text-sm">
+                <Pencil className="h-4 w-4 text-muted-foreground shrink-0" />
+                <span className="text-xs text-muted-foreground">Editing message</span>
+                <Button variant="ghost" size="icon" className="h-6 w-6 shrink-0 ml-auto" onClick={() => { setEditingMessage(null); setMessageInput(""); setTimeout(() => autoResizeTextarea(), 0) }}>
+                  <X className="h-3 w-3" />
+                </Button>
+              </div>
+            )}
             <form onSubmit={handleSend} className="flex items-center gap-2">
-              <input
-                ref={fileInputRef}
-                type="file"
-                multiple
-                accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt"
-                className="hidden"
-                onChange={handleFileSelect}
-              />
-              <Button
-                type="button" variant="ghost" size="icon" className="h-9 w-9 shrink-0"
-                onClick={() => fileInputRef.current?.click()}
-              >
+              <input ref={fileInputRef} type="file" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt" className="hidden" onChange={handleFileSelect} />
+              <Button type="button" variant="ghost" size="icon" className="h-9 w-9 shrink-0" onClick={() => fileInputRef.current?.click()}>
                 <Paperclip className="h-4 w-4 text-muted-foreground" />
               </Button>
               <div className="relative flex-1">
-                <Input
-                  value={messageInput}
-                  onChange={(e) => setMessageInput(e.target.value)}
-                  placeholder="Type a message..."
-                  className="h-9 w-full pr-9"
-                />
-                <div className="absolute right-0 top-0 bottom-0 flex items-center pr-1" ref={emojiPickerRef}>
-                  <Button
-                    type="button" variant="ghost" size="icon" className="h-7 w-7 shrink-0"
-                    onClick={() => setShowEmojiPicker(!showEmojiPicker)}
-                  >
-                    <Smile className="h-4 w-4 text-muted-foreground" />
-                  </Button>
-                  {showEmojiPicker && (
-                    <div className="absolute bottom-full right-0 mb-2 z-50">
-                      <Picker
-                        data={data}
-                        onEmojiSelect={handleEmojiSelect}
-                        theme={theme === "dark" ? "dark" : "light"}
-                        previewPosition="none"
-                        skinTonePosition="none"
-                        set="native"
-                        maxFrequentRows={2}
-                      />
+                {isRecording ? (
+                  <div className="flex h-9 items-center gap-1 rounded-md border bg-muted/30 px-2">
+                    <span className={cn("h-2 w-2 rounded-full", isPaused ? "bg-muted-foreground" : "bg-destructive animate-pulse")} />
+                    <span className="text-sm tabular-nums font-medium text-muted-foreground">{formatDuration(recordingDuration)}</span>
+                    <div className="flex-1" />
+                    <Button type="button" variant="ghost" size="icon" className="h-7 w-7 shrink-0 text-muted-foreground hover:text-muted-foreground" onClick={togglePauseRecording}>
+                      {isPaused ? <Play className="h-3.5 w-3.5 fill-current ml-0.5" /> : <Pause className="h-3.5 w-3.5 fill-current" />}
+                    </Button>
+                    <Button type="button" variant="ghost" size="icon" className="h-7 w-7 shrink-0 text-destructive hover:text-destructive" onClick={discardRecording}>
+                      <Trash2 className="h-3.5 w-3.5" />
+                    </Button>
+                    <Button type="button" variant="ghost" size="icon" className="h-7 w-7 shrink-0 text-destructive hover:text-destructive" onClick={stopRecording}>
+                      <Square className="h-3.5 w-3.5 fill-current" />
+                    </Button>
+                  </div>
+                ) : (
+                  <>
+                    <textarea ref={textareaRef} value={messageInput} onChange={(e) => { setMessageInput(e.target.value); autoResizeTextarea() }} onPaste={(e) => { const items = Array.from(e.clipboardData.items).filter((item) => item.type.startsWith("image/")); if (items.length > 0) { e.preventDefault(); const files = items.map((item) => item.getAsFile()).filter((f): f is File => f !== null); setAttachments((prev) => [...prev, ...files]) } }} placeholder={editingMessage ? "Edit message..." : "Type a message..."} className="w-full resize-none overflow-hidden rounded-md border border-input bg-transparent px-3 py-1.5 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 min-h-[36px] max-h-[200px] pr-16" style={{ height: "auto" }} rows={1} />
+                    <div className="absolute right-0 top-0 bottom-0 flex items-center pr-1" ref={emojiPickerRef}>
+                      <Button type="button" variant="ghost" size="icon" className="h-7 w-7 shrink-0" onClick={() => setShowEmojiPicker(!showEmojiPicker)}>
+                        <Smile className="h-4 w-4 text-muted-foreground" />
+                      </Button>
+                      <Button type="button" variant="ghost" size="icon" className="h-7 w-7 shrink-0" onClick={startRecording}>
+                        <Mic className="h-4 w-4 text-muted-foreground" />
+                      </Button>
+                      {showEmojiPicker && (
+                        <div className="absolute bottom-full right-0 mb-2 z-50">
+                          <Picker data={data} onEmojiSelect={handleEmojiSelect} theme={theme === "dark" ? "dark" : "light"} previewPosition="none" skinTonePosition="none" set="native" emojiSize={36} maxFrequentRows={2} />
+                        </div>
+                      )}
                     </div>
-                  )}
-                </div>
+                  </>
+                )}
               </div>
               <Button type="submit" size="icon" className="h-9 w-9 shrink-0" disabled={!messageInput.trim() && attachments.length === 0}>
-                <Send className="h-4 w-4" />
+                {editingMessage ? <Pencil className="h-4 w-4" /> : <Send className="h-4 w-4" />}
               </Button>
             </form>
           </div>
@@ -365,37 +726,95 @@ export default function ChatsPage() {
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
             <DialogTitle>Report {conversation ? otherParticipant(conversation).name : "User"}</DialogTitle>
-            <DialogDescription>
-              Let us know why you're reporting this conversation.
-            </DialogDescription>
+            <DialogDescription>Let us know why you're reporting this conversation.</DialogDescription>
           </DialogHeader>
           <div className="space-y-3 py-2">
             <Label htmlFor="reason">Reason</Label>
-            <Textarea
-              id="reason"
-              placeholder="Describe the issue..."
-              value={reportReason}
-              onChange={(e) => setReportReason(e.target.value)}
-              rows={4}
-            />
+            <Textarea id="reason" placeholder="Describe the issue..." value={reportReason} onChange={(e) => setReportReason(e.target.value)} rows={4} />
           </div>
           <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </DialogClose>
-            <Button
-              onClick={() => {
-                toast.success("Report submitted")
-                setReportReason("")
-                setReportDialogOpen(false)
-              }}
-              disabled={!reportReason.trim()}
-            >
-              Submit Report
-            </Button>
+            <DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose>
+            <Button onClick={() => { toast.success("Report submitted"); setReportReason(""); setReportDialogOpen(false) }} disabled={!reportReason.trim()}>Submit Report</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* Forward dialog */}
+      <Dialog open={forwardDialogOpen} onOpenChange={setForwardDialogOpen}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>Forward message</DialogTitle>
+            <DialogDescription>Select who to forward this message to.</DialogDescription>
+          </DialogHeader>
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Input value={forwardSearch} onChange={(e) => setForwardSearch(e.target.value)} placeholder="Search contacts..." className="h-9 pl-9" />
+          </div>
+          <ScrollArea className="max-h-64">
+            <div className="space-y-0.5">
+              {conversations
+                .slice()
+                .sort((a, b) => b.messages.length - a.messages.length)
+                .filter((conv) => {
+                  const person = otherParticipant(conv)
+                  return person.name.toLowerCase().includes(forwardSearch.toLowerCase())
+                })
+                .map((conv) => {
+                  const person = otherParticipant(conv)
+                  return (
+                    <button
+                      key={conv.id}
+                      type="button"
+                      onClick={() => {
+                        const msg = forwardMessage
+                        if (!msg) return
+                        const newContent = `📨 Forwarded: ${msg.content}`
+                        setConversations((prev) =>
+                          prev.map((c) =>
+                            c.id === conv.id
+                              ? {
+                                  ...c,
+                                  messages: [
+                                    ...c.messages,
+                                    {
+                                      id: crypto.randomUUID(),
+                                      conversationId: conv.id,
+                                      senderId: "user1",
+                                      senderName: "Sarah Chen",
+                                      senderAvatar: "SC",
+                                      content: newContent,
+                                      timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
+                                    },
+                                  ],
+                                  lastMessage: newContent,
+                                  lastMessageTime: "Just now",
+                                }
+                              : c
+                          )
+                        )
+                        setForwardDialogOpen(false)
+                        setForwardSearch("")
+                        toast.success("Message forwarded")
+                      }}
+                      className="w-full flex items-center gap-3 rounded-lg p-2.5 text-left transition-colors hover:bg-muted"
+                    >
+                      <Avatar className="h-9 w-9 shrink-0">
+                        <AvatarFallback>{person.avatar}</AvatarFallback>
+                      </Avatar>
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium truncate">{person.name}</p>
+                        <p className="text-xs text-muted-foreground truncate">{person.role} · {conv.messages.length} messages</p>
+                      </div>
+                    </button>
+                  )
+                })}
+              {forwardSearch && conversations.filter((conv) => otherParticipant(conv).name.toLowerCase().includes(forwardSearch.toLowerCase())).length === 0 && (
+                <p className="text-sm text-muted-foreground text-center py-4">No contacts found</p>
+              )}
+            </div>
+          </ScrollArea>
+        </DialogContent>
+      </Dialog>
     </div>
   )
 }

src/app/globals.css

@@ -68,8 +68,11 @@
     @apply border-border;
   }
 
+
+
   body {
     @apply bg-background text-foreground;
     font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
   }
+
 }

src/components/ui/scroll-area.tsx

@@ -14,7 +14,7 @@ const ScrollArea = React.forwardRef<
     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
       {children}
     </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
+    <ScrollBar forceMount />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
 ))
@@ -28,14 +28,14 @@ const ScrollBar = React.forwardRef<
     ref={ref}
     orientation={orientation}
     className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      "flex touch-none select-none transition-opacity",
+      orientation === "vertical" && "h-full w-3 border-l border-l-transparent p-[1px]",
       orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
       className
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-muted-foreground/30" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ))
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName