ChitChat — Real-time VS Code Chat Rooms

ChitChat is a lightweight, modern, real-time chat extension for Visual Studio Code. Create or join chat rooms directly inside VS Code, collaborate with teammates, share quick messages, and keep discussions scoped per room — all without leaving your editor.

Perfect for remote pair programming, team collaboration, quick discussions, or sharing notes with your group.

✨ Features

Core Chat Features

• 🏠 Create or Join Chat Rooms Generate a room with a single command or join an existing room by ID.

• 💾 Persistent Rooms Rooms stay visible in the sidebar until you delete them — even after restarting VS Code.

• 👤 Personalized Display Names Set your name once, and ChitChat remembers it across all rooms.

• 🎭 Host & Client Roles Room creators automatically become hosts. Keep your identity organized.

• ⚡ Real-time Messaging Messages sync instantly between all connected users via WebSocket (Socket.IO).

• ✍️ Live Typing Indicators See when others are typing in real-time.

• 👥 Active Members List A clean sidebar panel shows who's currently online in the room.

• 📱 Unread Message Counter Room list shows unread message counts when you're not viewing a room.

• 🔔 Desktop Notifications Get notified of new messages even when the chat panel isn't visible.

Message Management

• 🗑️ Delete Message for Everyone (within 1 hour) Remove your own messages from everyone's view if sent within the last hour.

• ❌ Delete Message for Me (anytime) Hide any of your messages from your own view — others still see them.

• 🧹 Clear Chat History Clear your entire chat history with one click. Only affects your view.

• ⏰ Auto-expire Messages Server automatically deletes messages older than 24 hours — keeps things clean.

Modern UI Features

• 😊 Emoji Picker Built-in emoji selector for expressive messaging.

• 💬 Message Bubbles Clean, modern chat interface with avatars and timestamps.

• 🎨 Color-coded Avatars Each user gets a unique color for easy identification.

• 📍 Scroll to Bottom Button Quickly jump to latest messages with unread counter.

• 📋 Copy Room ID One-click copy to clipboard for easy sharing.

• 🔄 Auto-reconnect Automatically reconnects if your connection drops.

📦 Installation

You can install ChitChat from the VS Code Marketplace:

ext install <your-publisher>.chitchat

Or install manually from a .vsix:

1. Download the latest .vsix file
2. Open VS Code → View → Extensions
3. Click the ... menu → Install from VSIX...

🚀 Getting Started

1. Create a Room

1. Press Ctrl/Cmd + Shift + P to open Command Palette
2. Type and select "ChitChat: Create Room"
3. Enter your display name (will be remembered)
4. Optionally enter a room name (e.g., "Project Alpha Team")
5. Start chatting! Share the Room ID with teammates.

2. Join a Room

1. Get a Room ID from a teammate
2. Press Ctrl/Cmd + Shift + P → "ChitChat: Join Room"
3. Enter the Room ID
4. Enter your display name
5. You're in! Start collaborating.

3. Open an Existing Room

• Click any room in the ChitChat Rooms sidebar view
• Your display name is automatically restored
• Unread messages are cleared when you open the room

4. Manage Messages

Delete a Message:

• Hover over your own message to reveal action buttons
• Click 🗑️ to delete for everyone (available for 1 hour after sending)
• Click ✕ to delete for yourself only (available anytime)

Clear Your Chat:

• Click "Clear My Chat History" button in the sidebar
• Removes all messages from your view (others unaffected)

5. Rename a Room

1. Right-click a room in the sidebar
2. Select "Change Name"
3. Enter new name (updates for everyone in the room)

6. Delete a Room

1. Right-click a room in the sidebar
2. Select "Delete"
3. Removes room from your list

🖥️ User Interface Overview

Main Chat Panel

• 💬 Message bubbles with color-coded avatars
• 📅 Timestamps on every message
• ✍️ Typing indicator showing who's typing
• 😊 Emoji picker for reactions and emojis
• 🗑️ Delete buttons on hover (your messages only)
• ↓ Scroll to bottom button with unread counter
• 📍 Hidden scrollbar for cleaner look

Sidebar Panel

• 📝 Room ID and name display
• 📋 Copy Room ID button
• 👥 Active members list with avatars
• 🧹 Clear My Chat History button
• 💡 Status messages (typing, copied, etc.)

Room List Sidebar

• 📂 All your rooms organized
• 🏠 Host badge on rooms you created
• 📬 Unread counter on inactive rooms
• 🔄 Refresh button to sync with server
• ➕ Quick create/join buttons

Tip: The chat UI is rendered in a secure WebView with modern dark theme styling that complements VS Code's appearance.

💡 Tips & Tricks

Keyboard Shortcuts

• Enter to send message
• Shift + Enter for new line (if supported)

Best Practices

• Share Room IDs securely with your team
• Use meaningful room names for easy identification
• Set a clear display name to help team members identify you
• Delete messages within 1 hour if you need to correct mistakes
• Use "Clear Chat" to declutter your view without affecting others
• Check unread counters to stay updated on multiple rooms

Troubleshooting

• Messages not syncing? Check your internet connection
• Room not found? Verify the Room ID is correct
• Can't delete for everyone? Message must be less than 1 hour old
• Lost messages? They auto-expire after 24 hours
• Connection lost? The app will auto-reconnect

🔒 Privacy & Data

ChitChat respects your privacy:

• ✅ No analytics or tracking — zero telemetry
• ✅ No external data storage — everything stays on your server
• ✅ Auto-expiring messages — deleted after 24 hours
• ✅ Local storage only — usernames and room lists stored on your device
• ✅ No personal info collected — only what you choose to share in messages
• ✅ Client-side deletion — "delete for me" is stored locally
• ✅ Open source — inspect the code yourself

What gets stored:

• Locally (your device): Room list, display names, unread counts, deleted message IDs
• Server (MongoDB): Room IDs, room names, messages (expire after 24h)
• Not stored: Email, location, device info, usage patterns

🎯 Use Cases

Remote Pair Programming

Quickly chat with your pairing partner without switching apps.

Team Collaboration

Create topic-specific rooms for different projects or features.

Code Reviews

Discuss changes in real-time while reviewing code together.

Quick Questions

Ask and answer quick questions without formal meeting overhead.

Learning & Teaching

Mentors and students can communicate directly in the editor.

Study Groups

Work on coding problems together with instant messaging.

🛠️ Technical Details

• Built with: TypeScript, Socket.IO, MongoDB, VS Code Extension API
• Message Limit: Messages auto-expire after 24 hours
• Connection: WebSocket for real-time, HTTP for REST API
• Storage: Local VS Code GlobalState + MongoDB server
• Security: Content Security Policy (CSP) enabled on webviews

❓ FAQ

Q: Is ChitChat free? A: Yes! ChitChat is free to use.

Q: Do I need to create an account? A: No accounts needed. Just pick a display name when joining a room.

Q: How long do messages last? A: Messages automatically expire after 24 hours.

Q: Can I see who deleted a message? A: When someone deletes for everyone, it shows "This message was deleted" without identifying who deleted it.

Q: What happens if I clear my chat? A: Only you stop seeing those messages. Others are unaffected.

Q: Can I edit messages? A: Not yet, but you can delete and resend within 1 hour.

Q: Is there a message limit? A: No hard limit, but messages expire after 24 hours to keep things performant.

Q: Can I use ChitChat offline? A: No, you need an internet connection to connect to the chat server.

📄 License

MIT License — free to use, modify, and distribute.

Happy Chatting! 💬