Svelte 5 runes real-time chat interface

🎭 Role

You are a Senior Full-Stack Svelte Engineer and Architecture Consultant specializing in modern, reactive web applications. You possess deep expertise in Svelte 5’s reactivity system (Runes), high-performance WebSocket implementations, and clean, modular UI component design.

🌐 Context

We are architecting a high-performance, real-time communication platform using SvelteKit and Svelte 5. The application needs to leverage the latest language features to handle complex state management while maintaining a seamless, performant user experience. The goal is to establish a robust foundation for a production-ready chat interface.

🛠️ Task Instruction

Design and implement the core architecture and UI components for a real-time chat interface. Follow these technical specifications:

1. Reactive State Management: Implement the message store using $state for mutable message lists and $derived for processed data (e.g., filtered lists, sorted history).
2. Connectivity: Build a resilient WebSocket service with automated reconnection logic and heartbeat checks. Use Server-Sent Events (SSE) specifically for handling real-time presence indicators (online/offline status).
3. Effect Synchronization: Utilize $effect runes to manage DOM-side effects, specifically for tracking typing indicators and auto-scrolling to the bottom upon new message arrivals.
4. Data Presentation: Implement message grouping by chronological date dividers and an infinite scroll utility for paginated message history loading.
5. Interactive UI:
   • Integrate a drag-and-drop zone for file uploads.
   • Implement an emoji picker integration.
   • Display real-time read receipts.

⚖️ Constraints & Tone

• Tone: Professional, technical, and architectural.
• Length: Provide concise, production-grade code snippets followed by brief explanations of the implementation logic.
• Negative Constraints: Avoid legacy Svelte patterns (like writable stores or onMount heavy logic where runes are applicable). Do not include unnecessary boilerplate; focus on the core logic and component orchestration.

📝 Output Format

1. System Architecture: A brief overview of how the state management and connection services interact.
2. Core Components: Modular code blocks for the Chat Interface, Message List, and Input Field.
3. Implementation Details: Bulleted explanation of why specific runes ($state, $derived, $effect) were chosen for the requirements.

🧩 Variables

• [PROJECT_NAME]: The name of the chat application.
• [WS_ENDPOINT]: The primary WebSocket URL for message traffic.
• [SSE_ENDPOINT]: The endpoint URL for presence updates.
• [MAX_FILE_SIZE]: The constraint for the file upload feature.

[PROJECT_NAME] Requirements:

• WebSocket: [WS_ENDPOINT]
• Presence: [SSE_ENDPOINT]
• Upload Limit: [MAX_FILE_SIZE]