Chat Panel
The Chat Panel provides messaging capabilities between session participants.
Location
Located in the Tabs Panel on the right side of the editor interface.
Panel Structure
Chat List View
Shows all available conversations:
| Element | Description |
|---|---|
| Group | Icon with multiple people, messages all participants |
| Direct chats | Individual participant avatars and names |
| Online indicator | Green “Online” text for connected users |
| Unread badge | Red circle with count |
Chat Room View
When a conversation is selected:
| Component | Position | Description |
|---|---|---|
| Back arrow | Top-left | Returns to chat list |
| Avatar | Header | User/group icon |
| Name | Header | “Group” or participant name |
| Status | Header | “Online” when connected |
| PTT button | Header-right | Push-to-Talk (editor only) |
| Messages | Body | Scrollable message list |
| Input | Bottom | Text input and send |
Message Display
Each message shows:
- Sender name - First in a sequence
- Avatar - First in a sequence
- Message text - With link detection
- Time - Format: “2:30 PM”
- Read indicator - Checkmark + “Read” for direct messages
Date Separators
Format: “December 17, 2025”
Push-to-Talk (PTT)
Available: When editor opens direct chat with online participant
| State | Icon | Description |
|---|---|---|
| Available | i_ptt | Press and hold to speak |
| Active | SiriWave animation | Speaking in progress |
| Unavailable | i_ptt_disabled | Participant offline |
PTT Tooltip (unavailable): “Push-To-Talk is unavailable because guest is offline”
File Attachments
Upload Progress
- File preview thumbnail
- Filename and size
- Progress bar with percentage
- Cancel button (X icon)
File Display
| File Type | Display |
|---|---|
| Images | Thumbnail preview |
| Videos | Thumbnail preview |
| Documents | Document icon + filename + size |
Empty State
Group chat empty message:
“Be the first one to write a message to the group”
With messenger background image.
Unread Messages
Scroll-to-Bottom Button
- Blue circular button with down arrow
- Red badge showing unread count
- Appears when new messages arrive while scrolled up
- Click to scroll and mark as read
Styling
Message Bubbles
| Type | Style |
|---|---|
| Sent (user) | Gray background, right-aligned |
| Received | Blue tint background, left-aligned |
Header
- Rounded container (10px)
- Gray background (dark mode: #1E222B)
- 44px height
Mobile Considerations
- Full-width layout
- Touch-optimized PTT button
- No horizontal padding
- Adapted header height