Closes:145 feat: In-App Messaging Interface for Clients & Freelancers

[Fash004]

Closes #145

---

Description

This PR introduces a responsive, intuitive In-App Messaging Interface allowing clients and freelancers to communicate seamlessly within contract milestones.

It provides structured chat windows, real-time message auto-scrolling, conversation search/filtering, timestamp context, role indicators (Client vs. Freelancer), loading skeletons, and empty state fallbacks. The interface is optimized for both desktop and mobile viewports.

---

Key Features

💬 Chat Layout & Architecture

• Desktop View (≥ 1024px): Dual-column split view featuring a persistent conversation sidebar (320px-380px) and active chat thread workspace.
• Mobile Responsive View (< 1024px): Responsive single-column view that toggles between conversation list and active chat thread with a back arrow navigation header.
• Auto-scroll to Latest Message: Uses useRef and useEffect to scroll smoothly to the newest message upon selecting a conversation or sending new messages.

📋 Conversation List Sidebar

• Contract Context: Displays contract title, contract ID (#101), total escrow amount, and last message snippet.
• Participant Metadata: User avatar, online status indicator, and role badge (Client / Freelancer).
• Search & Filtering: Search bar to filter conversations by contract ID, project title, or user name, with an Unread filter tab and unread badge count indicators.

✉️ Chat Message Thread

• Header Summary: Contract title, status badge (Active, In Progress, Completed), and direct link to contract details page (/dashboard/contracts/[id]).
• Message Bubbles: Styled chat bubbles with Client vs. Freelancer color coding, timestamps, and read receipt indicators (sent, delivered, read).
• Quick Action Snippets: One-click predefined status update snippets (e.g. Deliverable Ready, Milestone Request, Under Review).
• Attachment Support: Visual UI rendering for file/code attachments.

🎨 Loading & Empty States

• Skeletons for conversation list (ChatListSkeleton) and message thread (ChatThreadSkeleton).
• Empty state illustrations with suggested greeting prompts for new contract chats.

---

Acceptance Criteria Checklist

• Responsive UI — Operates seamlessly across desktop and mobile screens.
• Clean Component Architecture — Modular, reusable components under components/chat/.
• Loading & Empty States — Skeleton loaders and empty state views.
• Message Timestamps — Contextual time formatting on previews and message bubbles.
• Auto-scroll to Latest Message — Automatically scrolls down when new messages arrive.

---

[drips-wave]

@Fash004 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[SudiptaPaul-31]

@Fash004 failing ci