Chat and Messaging
Chat and messaging are woven throughout Flowstate, enabling real-time communication in Rooms, Offices, Stages, and across the canvas. Powered by Agora Chat SDK, Flowstate’s messaging system provides reliable, feature-rich communication.
Communication Contexts
Section titled “Communication Contexts”Flowstate provides chat in multiple contexts, each tailored to its purpose:
Room Chat
Section titled “Room Chat”Every Room has persistent chat for topic-specific discussions:
- Purpose: Discuss Sparks, coordinate work, share resources
- Participants: All Room members
- Persistence: Messages are preserved indefinitely
- Features: Threading (planned), search, file sharing
Room chat keeps conversations organized by topic, making it easy to find relevant discussions.
Office Chat
Section titled “Office Chat”Every Office has team chat for general coordination:
- Purpose: Team-wide announcements, coordination, social connection
- Participants: All Office members
- Persistence: Messages are preserved indefinitely
- Features: Channels (planned), mentions, pinning
Office chat provides a central communication hub for teams.
Stage Chat
Section titled “Stage Chat”Every Stage has live chat during broadcasts:
- Purpose: Audience questions, reactions, discussion
- Participants: All Stage viewers
- Persistence: Messages are preserved for the Stage duration
- Features: Pinning, moderation, slow mode
Stage chat enables audience participation during live presentations.
Direct Messages (Planned)
Section titled “Direct Messages (Planned)”One-on-one conversations between users:
- Purpose: Private discussions, quick questions
- Participants: Two users
- Persistence: Messages are preserved indefinitely
- Features: Read receipts, typing indicators, file sharing
Direct messages provide private communication channels.
Agora Chat SDK
Section titled “Agora Chat SDK”Flowstate uses Agora Chat SDK for all messaging:
Why Agora?
Section titled “Why Agora?”Agora provides:
- Reliability: Enterprise-grade infrastructure with 99.99% uptime
- Scalability: Handles millions of concurrent users
- Low latency: Messages delivered in milliseconds
- Global reach: Optimized routing worldwide
- Rich features: Presence, typing indicators, read receipts, file sharing
Agora’s SDK handles the complexity of real-time messaging, letting Flowstate focus on user experience.
Custom UI (Not UIKit)
Section titled “Custom UI (Not UIKit)”Flowstate uses Agora’s SDK directly, not the pre-built UIKit:
- Custom design: Chat UI matches Flowstate’s design language
- Tailored features: Only the features Flowstate needs
- Full control: Complete control over behavior and appearance
- Integration: Deep integration with canvas and other features
This approach provides a seamless, native experience.
18 Agora Components
Section titled “18 Agora Components”Flowstate includes 18 custom components built on Agora SDKs:
Chat Components
Section titled “Chat Components”- ChatPanel: Main chat interface with message list and input
- MessageList: Scrollable list of messages with timestamps
- MessageInput: Text input with emoji picker and file upload
- MessageBubble: Individual message display with sender info
- TypingIndicator: Shows who’s typing in real time
Presence Components
Section titled “Presence Components”- PresenceIndicator: Online/offline status for users
- ActiveUsersList: List of currently active users
- RemoteCursors: See where others are on the canvas (cursorStore)
Voice and Video Components
Section titled “Voice and Video Components”- VoiceLobby: Persistent audio space for Offices
- VideoCall: One-on-one or group video calls in Rooms
- ScreenShare: Share your screen during calls
- AudioControls: Mute, volume, speaker selection
- VideoControls: Camera toggle, video settings
Stage Components
Section titled “Stage Components”- StageBroadcast: Live streaming for presentations
- HandRaise: Audience hand raise system
- SpeakerGrid: Display for host and speakers
- ViewerCount: Real-time viewer count display
Utility Components
Section titled “Utility Components”- PinnedMessages: Display pinned messages at top of chat
These components cover all real-time communication needs across Flowstate.
Chat Features
Section titled “Chat Features”Message Types
Section titled “Message Types”Flowstate supports multiple message types:
Text Messages
Section titled “Text Messages”Standard text messages with:
- Markdown formatting (bold, italic, links)
- Emoji support
- Mentions (@username)
- Timestamps
File Attachments
Section titled “File Attachments”Share files directly in chat:
- Images (displayed inline)
- Documents (PDF, DOCX, etc.)
- Archives (ZIP, etc.)
- Size limit: 10MB per file
Links are automatically detected and previewed:
- URL unfurling (title, description, image)
- Click to open in new tab
- Security scanning for malicious links
System Messages
Section titled “System Messages”Automated messages for events:
- User joined/left
- Spark created
- Stage started/ended
- Settings changed
System messages provide context without cluttering the conversation.
Message Actions
Section titled “Message Actions”Users can interact with messages:
Add emoji reactions to messages:
- Quick feedback without typing
- Multiple reactions per message
- See who reacted
Reply to specific messages:
- Creates a thread (planned)
- Maintains context in busy chats
- Notifications for the original sender
Pin important messages:
- Keeps critical information visible
- Pinned messages appear at top of chat
- Hosts/admins can pin; anyone can view
Delete
Section titled “Delete”Remove messages:
- Users can delete their own messages
- Admins can delete any message
- Deleted messages show “[deleted]” placeholder
Edit (Planned)
Section titled “Edit (Planned)”Edit messages after sending:
- Fix typos or add information
- Edited messages show “(edited)” indicator
- Edit history preserved
Presence Indicators
Section titled “Presence Indicators”See who’s online and active:
Online Status
Section titled “Online Status”Users show as:
- Online: Active in the last 5 minutes
- Away: Inactive for 5-30 minutes
- Offline: Inactive for 30+ minutes
Status updates automatically based on activity.
Typing Indicators
Section titled “Typing Indicators”See when someone is typing:
- “User is typing…” appears in chat
- Updates in real time
- Disappears when typing stops
Typing indicators reduce uncertainty and improve conversation flow.
Read Receipts (Planned)
Section titled “Read Receipts (Planned)”See when messages are read:
- Checkmarks indicate delivery and read status
- Useful for direct messages
- Can be disabled for privacy
Search
Section titled “Search”Find messages across all chats:
- Full-text search: Search message content
- Filter by sender: Find messages from specific users
- Filter by date: Search within a time range
- Filter by Room/Office: Search specific contexts
Search makes it easy to find past conversations and information.
Remote Cursors
Section titled “Remote Cursors”Flowstate includes a unique feature: remote cursors powered by cursorStore:
What Are Remote Cursors?
Section titled “What Are Remote Cursors?”Remote cursors show where other users are on the canvas in real time:
- Cursor position: See the exact location of other users’ cursors
- User identification: Each cursor is labeled with the user’s name
- Color coding: Each user has a unique cursor color
- Movement: Cursors move smoothly as users navigate
Why Remote Cursors?
Section titled “Why Remote Cursors?”Remote cursors provide ambient awareness:
- See who’s working on what
- Coordinate without constant communication
- Avoid conflicts (two people editing the same thing)
- Feel connected to remote teammates
It’s like being in the same room, able to glance over and see what others are doing.
cursorStore
Section titled “cursorStore”Remote cursors are managed by cursorStore, a Zustand store that:
- Tracks cursor positions for all active users
- Syncs positions via Agora presence
- Renders cursors on the canvas
- Handles user join/leave events
cursorStore is optimized for performance, updating smoothly even with many users.
Privacy
Section titled “Privacy”Remote cursors respect privacy:
- Only visible to users in the same Room or Office
- Can be disabled in settings
- Don’t track activity outside Flowstate
You control when and where your cursor is visible.
DockablePanel
Section titled “DockablePanel”Chat and other tools use DockablePanel, a flexible sidebar system:
What Is DockablePanel?
Section titled “What Is DockablePanel?”DockablePanel is a sidebar that can contain:
- Chat
- Participant lists
- Settings
- Widgets
- Other tools
The panel docks to the side of the canvas, providing access to tools without covering the main workspace.
Panel Behavior
Section titled “Panel Behavior”DockablePanel can:
- Dock left or right: Choose which side of the canvas
- Resize: Drag to adjust width
- Collapse: Hide when not needed
- Pin: Keep open permanently
- Auto-hide: Collapse when you click outside
This flexibility lets you configure the workspace to match your preferences.
Multiple Panels
Section titled “Multiple Panels”You can have multiple panels:
- Chat in one panel
- Participant list in another
- Settings in a third
Panels can be stacked or arranged side-by-side.
Panel Content
Section titled “Panel Content”Panels can contain any component:
- Chat interfaces
- Video call controls
- Widget settings
- Custom tools
This makes DockablePanel a versatile system for extending the canvas.
Message Pinning
Section titled “Message Pinning”Pinning keeps important messages visible:
How Pinning Works
Section titled “How Pinning Works”- Hover over a message
- Click the pin icon
- Message moves to the top of the chat
- Pinned messages stay visible as you scroll
Who Can Pin?
Section titled “Who Can Pin?”- Room chat: Room admins and owners
- Office chat: Office admins and owners
- Stage chat: Stage host
This ensures pinning is used intentionally, not abused.
Unpinning
Section titled “Unpinning”To unpin a message:
- Click the pinned message
- Click the unpin icon
- Message returns to its original position
Multiple Pins
Section titled “Multiple Pins”You can pin multiple messages:
- Pinned messages appear in chronological order
- Oldest pins at the top
- Newest pins below
This allows highlighting multiple important items.
Moderation
Section titled “Moderation”Chat includes moderation tools to maintain productive conversations:
Message Removal
Section titled “Message Removal”Admins can remove inappropriate messages:
- Message is replaced with “[deleted]” placeholder
- Original sender is notified
- Action is logged
User Muting
Section titled “User Muting”Admins can mute disruptive users:
- Muted users can’t send messages
- Mute duration can be set (temporary or permanent)
- Muted users can still read messages
Slow Mode
Section titled “Slow Mode”Limit message frequency to reduce spam:
- Users can send one message per X seconds
- Useful for large Stages or busy Rooms
- Configurable delay (5s, 10s, 30s, etc.)
Reporting
Section titled “Reporting”Users can report inappropriate messages:
- Report button on each message
- Reports are reviewed by admins
- Reporters remain anonymous
Best Practices
Section titled “Best Practices”Use the Right Context
Section titled “Use the Right Context”- Room chat: Topic-specific discussions
- Office chat: Team-wide coordination
- Stage chat: Audience participation
- Direct messages: Private conversations
Using the right context keeps conversations organized.
Be Concise
Section titled “Be Concise”Chat is for quick communication. For longer discussions:
- Create a Spark
- Start a voice/video call
- Write a document
Concise messages are easier to read and respond to.
Use Mentions
Section titled “Use Mentions”Mention users to get their attention:
- @username notifies the user
- Useful in busy chats
- Don’t overuse (mention fatigue)
Pin Sparingly
Section titled “Pin Sparingly”Only pin truly important messages:
- Key decisions
- Critical links
- Action items
Too many pins reduce their effectiveness.
Search Before Asking
Section titled “Search Before Asking”Before asking a question, search chat history. The answer might already be there.
Moderate Proactively
Section titled “Moderate Proactively”Don’t wait for problems to escalate. Address issues early and set clear expectations.
Technical Details
Section titled “Technical Details”Data Model
Section titled “Data Model”Each message includes:
- Unique message ID
- Sender user ID
- Recipient (Room, Office, Stage, or user)
- Content (text, file, link, etc.)
- Timestamp
- Reactions (emoji and user IDs)
- Pinned status
- Deleted status
- Edit history (planned)
Storage
Section titled “Storage”Messages are stored in Agora’s cloud:
- Persistent storage for all messages
- Fast retrieval and search
- Automatic backups
- Compliance with data regulations
Flowstate doesn’t store message content directly, relying on Agora’s infrastructure.
Real-Time Sync
Section titled “Real-Time Sync”Messages are synced in real time:
- Sent via Agora Chat SDK
- Delivered to all participants instantly
- Presence and typing indicators update in real time
- Optimistic UI updates (messages appear immediately, confirmed later)
Performance
Section titled “Performance”Chat is optimized for performance:
- Lazy loading (load messages as you scroll)
- Message batching (send multiple messages efficiently)
- Compression (reduce bandwidth usage)
- Caching (store recent messages locally)
These optimizations ensure smooth performance even in busy chats.
Integration with Other Features
Section titled “Integration with Other Features”Chat integrates deeply with Flowstate:
Room chat is the primary communication channel for discussing Sparks and coordinating work.
Offices
Section titled “Offices”Office chat provides team-wide communication, complementing the voice lobby.
Stage chat enables audience participation during live broadcasts.
Canvas
Section titled “Canvas”Chat panels dock to the canvas, providing communication without leaving the workspace.
Widgets
Section titled “Widgets”Widgets can integrate with chat (send notifications, post updates, etc.).
Future Enhancements
Section titled “Future Enhancements”Planned improvements to chat include:
- Threaded conversations for better organization
- Rich text formatting (bold, italic, lists)
- Code snippets with syntax highlighting
- Message scheduling (send later)
- Chat bots and automation
- Integration with external tools (Slack, Teams)
- Advanced search with filters
- Message templates for common responses
- Voice messages
- Video messages
Chat and messaging are the connective tissue of Flowstate. By providing reliable, feature-rich communication across all contexts, they enable teams to collaborate effectively regardless of location or time zone.