Chat
Two systems in one: a personal AI assistant that can take actions across your workspace, and a real-time team messaging platform with channels, threads, reactions, and search.
AI Assistant
The AI chat sidebar understands your tasks, documents, calendar, and email. It can take actions on your behalf.
Capabilities
- Create and update tasks — "Add a task to deploy the API by Thursday"
- Search and read documents — "Find my architecture doc"
- Update documents — "Add a deployment section to the spec"
- Search the web — "What's the latest Node.js LTS version?"
- Remember things — stores notes and context for future conversations
- File analysis — upload PDF, images, or audio for the AI to analyze
Voice Input
Click the mic icon in the chat input to dictate your message. Uses the same WhisperRecorderManager as global transcription, with real-time audio level visualization.
File Attachments
Drag and drop files onto the chat input or click the attach icon. Supported in both AI chat and team messaging.
Team Chat
Real-time messaging powered by WebSocket with presence tracking.
Architecture
TeamChatPage connects to the WebSocket on mount, loads channels, and starts a presence heartbeat every 30 seconds. On unmount, it sends an away status and disconnects.
Channels
The left panel (ChannelList, 240px) shows all channels grouped by type:
| Type | Icon | Description |
|---|---|---|
| Group | GroupIcon | team channels (e.g. #engineering, #standup) |
| Document | ArticleIcon | per-document discussion channels |
| DM | PersonIcon | direct messages (shows the other person's name) |
- Create channel — name + optional description
- Start DM — enter an email address
- Search — filter channels by name
- Unread badges — count + last message preview
- Online indicators — green dot for online users (from presence events)
Messages
The right panel (MessageThread) shows the selected channel's messages, grouped by date with separator labels (Today, Yesterday, or full date).
Each message shows:
- Color-coded avatar with initials (6 colors, hash-based)
- Author name + relative timestamp
- Message content with
@mentionhighlighting viarenderMentions() - File attachments (image previews for images, download links for files)
Reactions
16 quick emojis: 👍 👎 ❤️ 😂 😮 😢 🎉 🔥 👀 🙏 ✅ ❌ 💯 🚀 💡 ⭐
Hover over a message to show the reaction picker. Click an emoji to toggle it. Reactions display below the message as chips with count and who reacted. Backend: PATCH /chat/messages/:id/reactions { emoji, action: "add"|"remove" }.
Message Actions
- Reply — opens thread view
- Edit — inline edit your own messages
- Delete — remove your own messages
- Star — bookmark important messages
- React — add emoji reactions
Search
Search icon in the channel header opens a search bar. Debounced search via goSvc across all messages in the channel, with highlighted matches.
Mentions
Type @ to trigger the MentionAutocomplete dropdown showing team members. Mentions trigger native desktop notifications via sendNativeNotification().
AI Agent
Each channel can have custom agent instructions that shape how the AI responds. The agent (identified by agent@manage.app) can participate in conversations, suggest tasks, surface relevant documents, or summarize long threads.
Typing Indicators
Real-time typing events show which users are currently composing a message in the channel.
Read Receipts
The WebSocket broadcasts read events. When you select a channel, its unread count resets to 0 both locally and via the read receipt event.