feat: add invite link functionality to participants sidebar and fix invite link generation #237
Conversation
|
@Yashxp1 is attempting to deploy a commit to the cloudec31-gmailcom's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe ParticipantsSidebar component was updated to generate and copy a shareable invite URL for the current call. This includes using the current path to construct the URL, adding a copy-to-clipboard function with toast notifications, and introducing an "Invite" button in the sidebar UI to trigger this functionality. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ParticipantsSidebar
participant Clipboard
participant Toast
User->>ParticipantsSidebar: Clicks "Invite" button
ParticipantsSidebar->>Clipboard: Copy invite URL
alt Success
Clipboard-->>ParticipantsSidebar: Copy successful
ParticipantsSidebar->>Toast: Show success notification
else Failure
Clipboard-->>ParticipantsSidebar: Copy failed
ParticipantsSidebar->>Toast: Show error notification
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~7 minutes Poem
Note 🔌 MCP (Model Context Protocol) integration is now available in Early Access!Pro users can now connect to remote MCP servers under the Integrations page to get reviews and chat conversations that understand additional development context. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
apps/web/components/rooms/participants-sidebar.tsx (3)
13-13: Avoid unnecessary hook: compute URL at click time insteadYou don’t need
usePathnameif the invite URL is constructed inside the click handler. This also avoids touchingwindowduring render and keeps the value fresh.Apply (paired with the handler refactor below):
-import { usePathname } from "next/navigation";
163-175: Harden invite URL generation and clipboard copy (SSR-safe + fallback)Build the URL inside the handler and add a non-Clipboard-API fallback. Kept to origin+pathname to avoid leaking query tokens; confirm if query/hash should be included.
- // Generate shareable invite URL for the current call - const invitePath = usePathname(); - const inviteURL = `${window.location.origin}${invitePath}`; - - const copyInviteURL = async () => { - try { - await navigator.clipboard.writeText(inviteURL); - toast.success("Invite link copied"); - } catch (error) { - console.error("Error copying invite URL:", error); - toast.error("Failed to copy invite link"); - } - }; + // Copy a shareable invite URL for the current call (computed at click-time) + const copyInviteURL = async () => { + try { + const { origin, pathname } = window.location; + const inviteURL = origin + pathname; + if (navigator.clipboard && window.isSecureContext) { + await navigator.clipboard.writeText(inviteURL); + } else { + const textarea = document.createElement("textarea"); + textarea.value = inviteURL; + textarea.style.position = "fixed"; + textarea.style.left = "-9999px"; + document.body.appendChild(textarea); + textarea.focus(); + textarea.select(); + document.execCommand("copy"); + document.body.removeChild(textarea); + } + toast.success("Invite link copied"); + } catch (error) { + console.error("Error copying invite URL:", error); + toast.error("Failed to copy invite link"); + } + };If query params are required for joining, switch to:
const { origin, pathname, search } = window.location; const inviteURL = origin + pathname + search;
360-364: Clarify CTA and a11y; confirm visibility scope and input-field requirementRename to “Copy invite link” and add aria-label. Also, confirm whether this should be visible to all participants or only creators. PR summary mentions an input field; confirm if that’s still desired.
- <div className="absolute bottom-4 left-4 right-4"> - <Button onClick={copyInviteURL} variant="outline" className="w-full"> - Invite - </Button> - </div> + <div className="absolute bottom-4 left-4 right-4"> + <Button + onClick={copyInviteURL} + variant="outline" + className="w-full" + aria-label="Copy invite link" + > + Copy invite link + </Button> + </div>Optional (gate to creators only, if that’s the policy):
- <div className="absolute bottom-4 left-4 right-4"> - <Button - onClick={copyInviteURL} - variant="outline" - className="w-full" - aria-label="Copy invite link" - > - Copy invite link - </Button> - </div> + {isCreator && ( + <div className="absolute bottom-4 left-4 right-4"> + <Button + onClick={copyInviteURL} + variant="outline" + className="w-full" + aria-label="Copy invite link" + > + Copy invite link + </Button> + </div> + )}Note: To ensure the absolute container anchors correctly, consider making
SheetContentpositioned:Outside this hunk (at Line 179):
<SheetContent side="right" className="relative w-80 p-4">If you want the input field UX, I can provide a compact read-only input + copy pattern here—say the word and I’ll push a diff.
1 participant
Problem:
When users joined calls, there was no way to invite additional people to the meeting. Users had to manually copy the URL from the browser address bar to share with others.
Solution:
Added a convenient invite link feature to the participants sidebar that allows users to copy the meeting URL with a single click.
Changes:
Video:
Screen.Recording.2025-08-10.124138.mp4
Screenshots:
small suggestion: we should consider centring the toast popup at the top for better visual consistency.
Summary by CodeRabbit