feat: real-time collaboration rooms — chat, notes, editor, voice/vide…#148
Open
StackFox wants to merge 2 commits into
Open
feat: real-time collaboration rooms — chat, notes, editor, voice/vide…#148StackFox wants to merge 2 commits into
StackFox wants to merge 2 commits into
Conversation
👷 Deploy request for devconnectai pending review.Visit the deploys page to approve it
|
There was a problem hiding this comment.
Pull request overview
This PR introduces Collaboration Rooms to DevConnect AI, adding new /rooms routes and supporting components for a real-time workspace experience (chat, shared notes, collaborative code editor, WebRTC calling) plus an AI-powered room summary API route.
Changes:
- Added Rooms hub (
/rooms) and Room workspace (/rooms/[roomId]) with real-time Firestore-backed chat, notes, presence/cursors, and Monaco editor sync. - Added WebRTC calling utilities + UI controls for voice/video/screen sharing inside rooms.
- Added AI room summary generation endpoint and UI (summary button + markdown modal), plus dashboard navigation/promotions and markdown styling.
Reviewed changes
Copilot reviewed 28 out of 30 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| README.md | Documents collaboration rooms feature set, routes, and Firestore collections. |
| postcss.config.mjs | Minor formatting/update aligning with Tailwind v4 PostCSS plugin usage. |
| package.json | Adds new client dependencies for rooms (Monaco, markdown rendering, toasts). |
| package-lock.json | Lockfile updated for new dependencies. |
| app/globals.css | Adds .markdown styling for rendered summaries/notes. |
| app/rooms/page.js | Rooms hub UI: real-time rooms list + create-room modal. |
| app/rooms/[roomId]/layout.js | Pass-through layout for room workspace route. |
| app/rooms/[roomId]/page.js | Room workspace: 3-panel resizable layout + summary UI + presence heartbeat + call controls. |
| app/rooms/[roomId]/messages/[messageId]/layout.js | Stub layout for message route segment. |
| app/rooms/[roomId]/messages/[messageId]/page.js | Stub page for message route segment. |
| app/rooms/[roomId]/notes/[noteId]/layout.js | Stub layout for notes route segment. |
| app/rooms/[roomId]/notes/[noteId]/page.js | Stub page for notes route segment. |
| app/rooms/[roomId]/presence/[uid]/layout.js | Stub layout for presence route segment. |
| app/rooms/[roomId]/presence/[uid]/page.js | Stub page for presence route segment. |
| app/api/rooms/[roomId]/summary/route.js | Room summary generation endpoint (Firestore fetch + Sarvam AI call + fallback). |
| components/rooms/RoomChat.js | Firestore onSnapshot chat panel with send-on-submit behavior. |
| components/rooms/RoomNotes.js | Firestore-backed shared notes with debounced persistence. |
| components/rooms/RoomEditor.js | Monaco editor with debounced Firestore sync and cursor persistence to presence. |
| components/rooms/RoomCursorLayer.js | Remote cursor badges overlay using presence docs. |
| components/rooms/RoomMembers.js | Presence list UI derived from presence heartbeat timestamps. |
| components/rooms/RoomCallControls.js | WebRTC call control bar + draggable previews + in-component toasts. |
| components/rooms/RoomSummaryButton.js | Summary generation/view button with toast feedback. |
| components/rooms/RoomSummaryModal.js | Modal that renders summary markdown with GFM support. |
| components/rooms/RoomLanguagePicker.js | Language/version picker UI (currently broken in diff). |
| components/dashboard/LeftSidebar.js | Adds “Rooms” navigation entry. |
| components/dashboard/MobileView.js | Adds “Rooms” tab routing on mobile. |
| components/dashboard/RightSidebar.js | Adds “Coding Rooms” promo widget CTA to /rooms. |
| lib/rooms.js | Room CRUD/presence helper module (some functions stubbed). |
| lib/webrtc.js | Firestore-based signaling + mesh WebRTC utilities for calls/screen share. |
| lib/firebase-admin.js | Server Firestore accessor used by the summary API route. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+17
to
+20
| const roomDoc = await getDoc(doc(db, "rooms", roomId)); | ||
| const roomData = roomDoc.exists ? roomDoc.data() : {}; | ||
| const title = roomData.title || "Collaboration Room"; | ||
| const language = roomData.language || "Not specified"; |
| const LANG_COLORS = { | ||
| JavaScript: "#f7df1e", | ||
| TypeScript: "#3178c6", | ||
| Python: "#377ab", |
| } | ||
|
|
||
| setIsGeneratingSummary(true); | ||
| setShowSummaryHistory(false); |
Comment on lines
+16
to
+23
| <ul> | ||
| {languages.map((language, version) => { | ||
| <li key={language}>{language} | ||
| | ||
| <div>{version}</div> | ||
| </li> | ||
| })} | ||
| </ul> |
| python: "3.10.0", | ||
| java: "15.ø.2", | ||
| csharp: "6.12.0", | ||
| Php: "8.2.3", |
| </div> | ||
| ))} | ||
| </div> | ||
| <form style={S.inputArea} onSubmit={handleSend} role="search" aria-label="Send chat message"> |
Comment on lines
+618
to
+622
| try { state.unsubParticipants?.(); } catch (_) {} | ||
| try { state.unsubIce?.(); } catch (_) {} | ||
| state.unsubParticipants = null; | ||
| state.unsubIce = null; | ||
| state.iceListeners.clear(); |
Comment on lines
29
to
31
| "firebase": "^12.14.0", | ||
| "firebase-admin": "^14.1.0", | ||
| "lucide-react": "^1.17.0", |
Owner
1.there is no exit button to dashboard
2. not able to delete the rooms
|
StackFox
force-pushed
the
feat/real-time-collaboration-rooms
branch
from
99ec754 to
13eaffc
Compare
Author
|
Owner
|
resolve conflict |
Author
Done 👍 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds real-time collaboration rooms to DevConnect AI — a full-featured workspace where developers can create rooms, chat, share notes, co-edit code, and join voice/video calls, all backed by Firestore and WebRTC.
What's included
Room Hub (
/rooms)Room Workspace (
/rooms/[roomId])Three-panel resizable layout with draggable dividers:
onSnapshot, send-on-enter, timestamps, sender namesVoice / Video / Screen Share
<video>muted, dedicated<audio>element for remote audioPresence & Awareness
presencesubcollection, 15s interval)AI Room Summaries
/api/rooms/[roomId]/summary)react-markdown+remark-gfmfor rich markdownDashboard Integration
Files changed
New files (22)
app/rooms/page.jsapp/rooms/[roomId]/page.jsapp/rooms/[roomId]/layout.jsapp/rooms/[roomId]/messages/[messageId]/app/rooms/[roomId]/notes/[noteId]/app/rooms/[roomId]/presence/[uid]/app/api/rooms/[roomId]/summary/route.jscomponents/rooms/RoomCallControls.jscomponents/rooms/RoomChat.jscomponents/rooms/RoomCursorLayer.jscomponents/rooms/RoomEditor.jscomponents/rooms/RoomLanguagePicker.jscomponents/rooms/RoomMembers.jscomponents/rooms/RoomNotes.jscomponents/rooms/RoomSummaryButton.jscomponents/rooms/RoomSummaryModal.jslib/firebase-admin.jslib/rooms.jslib/webrtc.jsModified files (8)
README.mdapp/globals.css.markdownstyles for summary renderingcomponents/dashboard/LeftSidebar.jscomponents/dashboard/MobileView.jscomponents/dashboard/RightSidebar.jspackage.jsonreact-markdown,remark-gfmpackage-lock.jsonpostcss.config.mjsTech stack used
Testing
npm run build— passes cleanlynpm run check:structure— passesNotes
lib/firebase-admin.jsuses the clientfirebasepackage withNEXT_PUBLIC_FIREBASE_*env vars for server-side Firestore accessSARVAM_API_KEYin.env.local