Episode Chat
show.fm provides a real-time chat system embedded in episode collaboration views. It supports both authenticated team members and guest portal users with @mentions, emoji reactions, typing indicators, and online presence tracking.
Architecture Overview
Key Components
| Component | Location | Purpose |
|---|---|---|
EpisodeChatSidebar | src/lib/components/chat/ | Main container managing messages, tabs, subscriptions |
ChatMentionInput | src/lib/components/chat/ | TipTap-based editor with @mention autocomplete |
MessageContent | src/lib/components/chat/ | Renders messages with URL linkification and mention highlighting |
MessageReactions | src/lib/components/chat/ | Emoji reaction buttons with counts and picker |
ChatParticipantRoster | src/lib/components/chat/ | Online/offline participant list with role badges |
TypingIndicator | src/lib/components/chat/ | Animated typing dots with user attribution |
ChatPresenceAvatars | src/lib/components/chat/ | Overlapping avatar circles for online users |
Feature Summary
Messaging
- Send and delete chat messages with optimistic UI updates
- @mention participants with autocomplete (TipTap Mention extension)
- URL auto-detection and linkification
- 5,000 character limit enforced client and server-side
- Rate limiting with retry-after feedback
Reactions
- Six emoji options: thumbs up, heart, laugh, wow, party, fire
- Optimistic toggle with rollback on failure
- Real-time broadcast to all participants
Presence & Typing
- Online/offline status tracking via Supabase Realtime Presence API
- Typing indicators with 2-second auto-expiry
- Participant roster sorted by role priority
Dual Auth Model
- Authenticated users: Supabase Auth + RLS policies on
episode_messages - Guests: Magic token validation via SECURITY DEFINER RPCs (bypasses RLS)
Usage in Routes
| Route | Context |
|---|---|
/p/[slug]/e/[episodeSlug]/show-notes | Sidebar alongside collaborative editor |
/guest/e/[episodeId] | Guest portal main view |
/guest/e/[episodeId]/chat | Pop-out chat window for guests |
Documentation
| Document | Description |
|---|---|
| Components | Props, behavior, and relationships for all chat UI components |
| Service Layer | Business logic, stores, and API functions |
| Real-Time Architecture | Subscriptions, broadcasts, presence tracking |
| Database Schema | Tables, RLS policies, RPCs, and migrations |
Related Documentation
- Collaboration System - Show notes editing (separate feature)
- Guest Portal - Guest authentication flow
- Multi-Tenancy - Permission model