Encapsulate all interactions with the layout store concerning the
side panel into a hook. This hook exposes a clear interface.
Each variable has a single responsability, with a clear naming.
Rename useWidget interaction to useSidePanel. Remove LiveKit-specific naming
as we no longer use LiveKit elements in the layout context. This change
improves clarity and reflects the current functionality of the hook.
Properly integrate chat into the sidepanel to improve UX and avoid disruptions.
Implement initial styling based on Google Meet's design, with plans for future
enhancements. Some details remain to be refined, such as preserving newline
characters in the message formatter.
This substantial commit refactors and cleans up a significant legacy component.
Chat notifications will be addressed in a separate PR.
Note: While this is a large commit, it represents a major improvement in user
experience (in my opinion).
Implement smooth animations and DOM persistence for sidepanel.
Side panel state should be kept alive, to match initial LiveKit team
intent.
Temporarily, remove chat component. Chat functionality will be absent
until next commits. It will be reintegrated in the side panel.
When a participant leaves a videoconference, remove all notifications they
authored. It's generally unnecessary to keep notifications about actions from
users who are no longer present, with few exceptions.
As we currently support only two notification types (Joined and Raised Hand),
it's appropriate to close all of them when the author leaves the room.
Changes introduced by LiveKit which deprecated some chat's options.
As we duplicated their code, let's just removed them.
They are not useful, and not in use anywhere.
Introduce a draft chat input component inspired by Google Meet design.
This component is not yet in use and requires further enhancements.
To be improved:
- Avoid sizing in pixels
- Replace hardcoded colors with theme variables
This lays the groundwork for a more interactive chat experience in the future.
Allow more flexibility in side panel behavior. Some panels, such as the chat,
require specific scrolling functionality:
- Header and footer should remain fixed
- Only chat messages should be scrollable
This change enables customization of scroll behavior for different panel types,
improving component reusability.
In object-oriented terms, the previous implementation violated the Liskov
Substitution Principle. Props between these two components (Button and Link)
were not substitutable.
This led to TypeScript errors and increased overall complexity without
significant DX gains. To address this, the LinkButton has been extracted
into a dedicated component.
I am not a huge fan of changing the component's behavior based on
a if, but that the only way I found to have something quickly.
Actually, the push to talk feature will always only applies to the
microphone. No other devices will be concerned.
Reuse the active speaker indicator to quickly bootstrap the feature.
Some details should be improved in terms of UI. The UX is quite
decent.
Needed to support push to talk using the spacebar.
Introduce a utility hook. Will be called by the mic toggle
in the upcoming commits.
Inspired by Jitsi code.
React Query refetches stale data on window focus, which triggers
silent login attempts for logged-out users.
If user data becomes stale (after 1 hour), silent login redirects
the user to the auth domain, potentially disconnecting them during calls.
To prevent this, user data is now considered non-stale
during active sessions.
If the user logs in via another tab, a manual page
reload will be required to refresh their session.
Query API to get the App's configs.
Replacement for env variables, thus with a single image,
we can dynamically update frontend's behavior.
Code inspired by Marsha. Not sure having a single component
returning null is a good idea, to be discussed.
Implement a chat feature that allows users to communicate directly with an
engineer for assistance with issues. We use Crisp for consistency, as it’s
already utilized in all other LaSuite products. Additionally, we need to
configure an environment variable in the frontend for better flexibility.
This is the initial implementation, and session handling will be refined
in future updates.
Decouple the code from the PostHog dependency by wrapping it in a custom hook
and several utility functions. This enhances code maintainability and separation
of concerns.
We should use participant attributes, rather than metadata, to store hand
status (raised/lowered). However, the useParticipantInfo hook is currently
not suited for this, as it does not refresh when attributes change.
Be transparent with users: this version lacks quality and is currently
limited to Chrome, which may lead to frustration.
In addition to providing information, we should implement a method to
collect user feedback and reactions.
Simplified the logic to avoid redundancy. Removed unnecessary duplication of
eventGroups, as it's already exported from the core. My bad for the initial
complication — code is now cleaner.
Implemented using MediaPipe, which is not supported on Firefox due to
limitations outlined in issue #38 of the track-processors-js repo.
We decided to release this first version exclusively for Chrome to quickly
offer a solution to users. Future iterations will address broader compatibility.
An informational message will be added to notify users that the feature is
experimental. For now, a text label will be used in place of an icon.
