Build Real-Time Support Chat with Widget and Admin Dashboard

Provides a full-stack blueprint for a live support chat system: a floating user widget and an admin dashboard, backed by two data models (support_chats, one per user with last_message_at/admin_viewed_at/archived_at, and support_messages with a sender_type enum and read_at), five REST endpoints (user GET/PATCH /support_chat, admin list/detail/archive/unarchive), and two WebSocket channels: ChatChannel per conversation and AdminNotificationChannel global for all admins, that broadcast new messages to both the relevant chat and, when the sender is a user, a global admin-notification stream. Concrete implementations are given for five stacks: Ruby on Rails (ActiveRecord models with after_create_commit broadcasts, an ActionCable channel, and a UUID-keyed migration), React (a useSupportChat hook plus a Tailwind-styled ChatWidget component), Next.js App Router (a Prisma-backed API route plus a Pusher/Ably pattern for serverless WebSockets), PHP/Laravel (Eloquent models, a ShouldBroadcast event), and Vue.js (a composable using the Composition API). A delayed-email job notifies the user 5 minutes after an admin reply, but only if the message is still unread by then.

add_index :support_messages, [:support_chat_id, :created_at]

Use it when adding live chat, customer-support messaging, or an in-app support channel to an existing app - it assumes an existing user/auth system and a backend capable of WebSockets or a managed real-time service (Pusher, Ably, Supabase Realtime, Firebase RTDB) for serverless stacks. Six design decisions shape the scope: one chat per user rather than multi-thread support tickets, soft-delete via archiving rather than deletion, auto-unarchive when a user messages an archived chat, a 5-minute email delay to avoid spamming users who reply in-app quickly, message deduplication via tracked seen-IDs to prevent a sender's own message echoing back as a duplicate, and a separate admin-only notification channel to support future features like a global unread count. If WebSockets aren't available in the target environment, the guide gives a 5-second polling fallback instead.

Inputs are the two data models and their indexes - a unique index on support_chats.user_id, a composite index on support_messages(chat_id, created_at) explicitly flagged as commonly forgotten - plus WebSocket authorization logic that checks a subscriber is either the chat's owning user or an admin. Outputs are the two frontend surfaces: a ChatWidget (floating button with unread badge capped at "9+", connection-status dot, auto-scroll, Enter-to-send) and an admin dashboard (tabbed active/archived chat list sorted by recency, a detail view grouping messages by date), plus typed WebSocket message shapes (ChatChannelMessage, AdminNotificationMessage) shared between client and server. A 12-item testing checklist and six named common pitfalls - missing deduplication, read-status race conditions, unauthenticated WebSocket subscriptions, stale connection state, the missing composite index, and synchronous rather than background-job email sends - anchor what to verify before shipping.

Names concrete real-time technology options by fit: ActionCable for Rails, Socket.IO for Node.js, Pusher/Ably/Supabase Realtime/Firebase RTDB for serverless stacks, and Server-Sent Events for simple one-way updates. Email delivery is left to a transactional provider - Postmark, SendGrid, AWS SES, or Resend - sent via a delayed background job, never synchronously. Database guidance covers PostgreSQL (UUID keys, timestamptz, optional GIN full-text index), MySQL (CHAR(36)/BINARY(16) UUIDs, utf8mb4 for emoji), SQLite for prototyping, and MongoDB (embedded vs. referenced messages, TTL index for archived-chat cleanup).

Full-stack developers adding a live support chat feature - widget plus admin dashboard - to a Rails, React, Next.js, Laravel, or Vue app, who want the data model, WebSocket channel design, and known pitfalls (deduplication, read-status races, missing indexes) worked out rather than designed from scratch.