Skip to content

feat: sync via ws participants in sessions - #73

Draft
maxy-shpfy wants to merge 1 commit into
07-31-feat_display_gravatars_as_user-imagesfrom
07-31-feat_sync_via_ws_participants_in_sessions
Draft

feat: sync via ws participants in sessions#73
maxy-shpfy wants to merge 1 commit into
07-31-feat_display_gravatars_as_user-imagesfrom
07-31-feat_sync_via_ws_participants_in_sessions

Conversation

@maxy-shpfy

@maxy-shpfy maxy-shpfy commented Jul 31, 2026

Copy link
Copy Markdown
Collaborator

TL;DR

Adds a live participant bar to chat sessions, showing avatars for all humans who have contributed to or are currently connected to a session.

Contributes to https://github.com/Shopify/oasis-frontend/issues/682

What changed?

  • Introduced a SessionPresence class on the server that ref-counts socket connections per user per session, so a user's presence only drops when their last tab disconnects.
  • Added a buildParticipants helper that merges message authors (inactive) with currently-connected users (active), sorting active participants first, then alphabetically.
  • The server now emits a session:participants event to the room on join and whenever a socket connects or disconnects, keeping every client's roster in sync.
  • ChatJoinPayload now includes the joining user's author identity so the server can attribute presence to the correct author id.
  • Added SessionParticipant and ParticipantsPayload types to the shared contracts.
  • Created a SessionParticipants component that renders a row of overlapping avatars — full color for active users, grayscale for inactive ones.
  • UserAvatar gained a grayscale prop to support the inactive state styling.
  • The useSessionChat hook tracks the participant roster in state, subscribes to session:participants events, and sends the user's author identity on join. Participant state is cleared on session switch and disconnect.
  • The participant bar is rendered at the top of PrimeChatPanel when at least one participant is present.

How to test?

  1. Open a session in two different browser tabs (or as two different users).
  2. Both avatars should appear in the participant bar at the top of the chat panel, shown in color.
  3. Close one tab — that user's avatar should switch to grayscale within the remaining tab.
  4. Reopen the tab — the avatar should return to full color.
  5. Switch to a different session and confirm the participant bar updates to reflect that session's roster.
  6. Verify that users who authored messages but are not currently connected appear grayscale, while connected users appear in color and sort first.

Why make this change?

Multi-user sessions had no visibility into who else was present or had participated. The participant bar gives users immediate awareness of collaborators — distinguishing who is live in the session from who has contributed historically.

Copy link
Copy Markdown
Collaborator Author

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

This stack of pull requests is managed by Graphite. Learn more about stacking.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant