chat system
Goal Design a complete, production-ready mobile chat application layout in TypeScript/React that implements all specified chat features, including header options, message input controls, message actions, chat body features, media handling, chat settings, group chat functionality, and advanced optional features. The layout should be mobile-optimized, fully functional, and organized into reusable components. Return Format Deliver a complete TypeScript/React project structure with: Project folder organization (src/pages/, src/components/, src/types/) TypeScript configuration files (tsconfig.json, tsconfig.app.json, tsconfig.node.json) Fully implemented .tsx component files for each feature section Type definitions for all data structures A main chat page component that integrates all sections CSS/styling approach (inline, CSS modules, or Tailwind - your choice for mobile responsiveness) Brief file-by-file explanation of component purpose and structure Warnings Ensure all interactive elements (buttons, inputs, menus) are touch-friendly with adequate spacing for mobile devices Avoid deeply nested component structures that could impact performance on lower-end mobile devices Message actions (long press/hover) require different UX patterns for mobile (long press) vs desktop (hover) - implement mobile-first approach Media preview functionality (images, videos, PDFs) must handle various file sizes and formats without breaking layout Group chat features should gracefully degrade if user lacks admin permissions Typing indicators and real-time status updates should not cause layout shifts Ensure threaded replies don't create infinite nesting or performance issues Schedule message feature should validate time input and prevent past dates Context """ ๐น Chat Header Options (Top Bar) ๐ค User profile (avatar + name) ๐ข Online / Last seen status ๐ Audio call ๐ฅ Video call ๐ Search in chat โฎ More options menu ๐น Message Input Options (Bottom Bar) โ๏ธ Text input box ๐ Emoji picker ๐ Attachment (file / image / video / PDF) ๐ค Voice message ๐ท Camera capture ๐ Send button โฑ๏ธ Schedule message (optional) ๐น Message Actions (On Long Press / Hover) ๐ React (like, love, emoji reactions) โฉ๏ธ Reply ๐ค Forward ๐ Pin message ๐ Edit message ๐๏ธ Delete (for me / for everyone) ๐ Copy text โญ Star / Save message ๐น Chat Body Features ๐ Date separators (Today / Yesterday) โ๏ธ Message status (sent, delivered, read) ๐งต Threaded replies ๐ Pinned messages section ๐ Typing indicator ๐ Time shown on messages ๐น Media & Files ๐ผ๏ธ Image preview โถ๏ธ Video player ๐ File preview + download ๐ Document size & type ๐ Fullscreen view ๐น Chat Settings (From โฎ Menu) ๐ Mute / Unmute chat ๐ Pin / Unpin chat ๐งน Clear chat history ๐ซ Block user ๐ฉ Report chat ๐ฅ View participants (for group chat) ๐จ Change chat theme / wallpaper ๐น Group Chat Extra Options โ Add members โ Remove members ๐ Admin controls ๐ Read-only mode ๐ข Announcements only ๐ Edit group info ๐น Advanced / Optional (If Needed) ๐ค AI auto-reply / suggestions ๐ Translate message ๐ Search by file / link ๐ Share location ๐ณ๏ธ Polls ๐น๏ธ Stickers / GIFs """