🔊(backend) update production logger

Configure probes logs as recommended by the Django dockerflow documentation.
Updating logger's config, fixed another minor issue, silenced system
warnings were still logged when calling the __lbheartbeat__ probe. These
warnings are now properly silenced.

Incoming requests are now logged in Json. Wdyt @rouja?

.github/workflows/docker-hub.yml

@@ -1,5 +1,4 @@
 name: Docker Hub Workflow
-run-name: Docker Hub Workflow
 
 on:
   workflow_dispatch:
@@ -49,15 +48,9 @@ jobs:
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
         run: echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_USER" --password-stdin
-      -
-        name: Run trivy scan
-        uses: numerique-gouv/action-trivy-cache@main
-        with:
-          docker-build-args: '--target backend-production -f Dockerfile'
-          docker-image-name: 'docker.io/lasuite/meet-backend:${{ github.sha }}'
       -
         name: Build and push
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v5
         with:
           context: .
           target: backend-production
@@ -99,15 +92,9 @@ jobs:
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
         run: echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_USER" --password-stdin
-      -
-        name: Run trivy scan
-        uses: numerique-gouv/action-trivy-cache@main
-        with:
-          docker-build-args: '-f src/frontend/Dockerfile --target frontend-production'
-          docker-image-name: 'docker.io/lasuite/meet-frontend:${{ github.sha }}'
       -
         name: Build and push
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v5
         with:
           context: .
           file: ./src/frontend/Dockerfile

.github/workflows/helmfile-linter.yml

@@ -1,22 +0,0 @@
-name: Helmfile lint
-run-name: Helmfile lint
-
-on:
-  pull_request:
-    branches:
-      - 'main'
-
-jobs:
-  helmfile-lint:
-    runs-on: ubuntu-latest
-    container:
-      image: ghcr.io/helmfile/helmfile:latest
-    steps:
-      -
-        uses: numerique-gouv/action-helmfile-lint@main
-        with:
-          app-id: ${{ secrets.APP_ID }}
-          age-key: ${{ secrets.SOPS_PRIVATE }}
-          private-key: ${{ secrets.PRIVATE_KEY }}
-          helmfile-src: "src/helm"
-          repositories: "meet,secrets"

.sops.yaml

@@ -8,5 +8,3 @@ creation_rules:
       - age1tl80n23wq6zxegupwn70ew0yp225ua5v4dk800x7g2w6pvlxz46qk592pa #marie
       - age1qy04neuzwpasmvljqrcvhwnf0kz5cpyteze38c8avp0czewskasszv9pyw #argocd
       - age18fgn6j2vwwswqcpv9xpcehq8mrf9zs2sglwkamp3tzwx8d9jq9jsrskrk9 #manuuu
-      - age1hm2hsfgjezpsc3k0y5w5feq9t8vl3seq04qjhgt6ztd6403wfvpsgxu09m # github-repo
-      - age1hnhuzj96ktkhpyygvmz0x9h8mfvssz7ss6emmukags644mdhf4msajk93r # Samuel Paccoud

Dockerfile

@@ -1,14 +1,15 @@
 # Django Meet
 
 # ---- base image to inherit from ----
-FROM python:3.12.6-alpine3.20 as base
+FROM python:3.10-slim-bullseye as base
 
 # Upgrade pip to its latest release to speed up dependencies installation
-RUN python -m pip install --upgrade pip setuptools
+RUN python -m pip install --upgrade pip
 
 # Upgrade system packages to install security updates
-RUN apk update && \
-  apk upgrade
+RUN apt-get update && \
+  apt-get -y upgrade && \
+  rm -rf /var/lib/apt/lists/*
 
 # ---- Back-end builder image ----
 FROM base as back-builder
@@ -37,9 +38,12 @@ RUN yarn install --frozen-lockfile && \
 FROM base as link-collector
 ARG MEET_STATIC_ROOT=/data/static
 
-RUN apk add \
-  pango \
-  rdfind
+# Install libpangocairo & rdfind
+RUN apt-get update && \
+    apt-get install -y \
+      libpangocairo-1.0-0 \
+      rdfind && \
+    rm -rf /var/lib/apt/lists/*
 
 # Copy installed python dependencies
 COPY --from=back-builder /install /usr/local
@@ -62,14 +66,17 @@ FROM base as core
 
 ENV PYTHONUNBUFFERED=1
 
-RUN apk add \
-  gettext \
-  cairo \
-  libffi-dev \
-  gdk-pixbuf \
-  pango \
-  shared-mime-info
-
+# Install required system libs
+RUN apt-get update && \
+    apt-get install -y \
+      gettext \
+      libcairo2 \
+      libffi-dev \
+      libgdk-pixbuf2.0-0 \
+      libpango-1.0-0 \
+      libpangocairo-1.0-0 \
+      shared-mime-info && \
+  rm -rf /var/lib/apt/lists/*
 
 # Copy entrypoint
 COPY ./docker/files/usr/local/bin/entrypoint /usr/local/bin/entrypoint
@@ -99,7 +106,9 @@ FROM core as backend-development
 USER root:root
 
 # Install psql
-RUN apk add postgresql-client
+RUN apt-get update && \
+    apt-get install -y postgresql-client && \
+    rm -rf /var/lib/apt/lists/*
 
 # Uninstall Meet and re-install it in editable mode along with development
 # dependencies

bin/validate-helm-configuration.sh

@@ -1,13 +0,0 @@
-#!/bin/bash
-
-set -e
-
-HELMFILE=src/helm/helmfile.yaml
-
-environments=$(awk '/environments:/ {flag=1; next} flag && NF {print} !NF {flag=0}' "$HELMFILE" | grep -E '^[[:space:]]{2}[a-zA-Z]+' | sed 's/^[[:space:]]*//;s/:.*//')
-
-for env in $environments; do
-	echo "################### $env lint ###################"
-	helmfile -e $env -f src/helm/helmfile.yaml lint || exit 1
-	echo -e "\n"
-done

renovate.json

@@ -13,9 +13,7 @@
       "enabled": false,
       "groupName": "ignored js dependencies",
       "matchManagers": ["npm"],
-      "matchPackageNames": [
-        "eslint"
-      ]
+      "matchPackageNames": []
     }
   ]
 }

src/backend/core/api/demo.py

@@ -1,316 +0,0 @@
-
-from rest_framework.decorators import api_view
-from rest_framework.response import Response
-from minio import Minio
-from django.conf import settings
-import openai
-import logging
-from ..models import Room, RoleChoices
-
-import tempfile
-import os
-import smtplib
-import requests
-
-
-logger = logging.getLogger(__name__)
-
-
-def get_prompt(transcript, date):
-    return f"""
-
-    Audience: Coworkers.
- 
-    **Do:**
-    - Detect the language of the transcript and provide your entire response in the same language.
-    - If any part of the transcript is unclear or lacks detail, politely inform the user, specifying which areas need further clarification.
-    - Ensure the accuracy of all information and refrain from adding unverified details.
-    - Format the response using proper markdown and structured sections.
-    - Be concise and avoid repeating yourself between the sections.
-    - Be super precise on nickname
-    - Be a nit-picker
-    - Auto-evaluate your response
-    
-    **Don't:**
-    - Write something your are not sure.
-    - Write something that is not mention in the transcript.
-    - Don't make mistake while mentioning someone
-
-    **Task:**
-    Summarize the provided meeting transcript into clear and well-organized meeting minutes. The summary should be structured into the following sections, excluding irrelevant or inapplicable details:
-    
-    1. **Summary**: Write a  TL;DR of the meeting.
-    2. **Subjects Discussed**: List the key points or issues in bullet points.
-    4. **Next Steps**: Provide action items as bullet points, assigning each task to a responsible individual and including deadlines (if mentioned). Format action items as tickable checkboxes. Ensure every action is assigned and, if a deadline is provided, that it is clearly stated.
-    
-    **Transcript**:  
-    {transcript}
-    
-    **Response:**
-    
-    ### Summary [Translate this title based on the transcript’s language]
-    [Provide a brief overview of the key points discussed]
-       
-    ### Subjects Discussed [Translate this title based on the transcript’s language]
-    - [Summarize each topic concisely]
-     
-    ### Next Steps [Translate this title based on the transcript’s language]  
-    - [ ] Action item [Assign to the responsible individual(s) and include a deadline if applicable, follow this strict format: Action - List of owner(s), deadline.]
-         
-    """
-
-def get_room_and_owners(slug):
-    """Wip."""
-
-    try:
-        room = Room.objects.get(slug=slug)
-        owner_accesses = room.accesses.filter(role=RoleChoices.OWNER)
-        owners = [access.user for access in owner_accesses]
-
-        logger.info("Room %s has owners: %s", slug, owners)
-
-    except Room.DoesNotExist:
-        logger.error("Room with slug %s does not exist", slug)
-
-        owners = None
-        room = None
-
-    return room, owners
-
-
-def remove_temporary_file(path):
-    """Wip."""
-
-    if not path or not os.path.exists(path):
-        return
-
-    os.remove(path)
-    logger.info("Temporary file %s has been deleted.", path)
-
-def get_blocknote_content(summary):
-    """Wip."""
-
-    if not settings.BLOCKNOTE_CONVERTER_URL:
-        logger.error("BLOCKNOTE_CONVERTER_URL is not configured")
-        return None
-
-    headers = {
-        "Content-Type": "application/json"
-    }
-
-    data = {
-        "markdown": summary
-    }
-
-    logger.info("Converting summary in BlockNote.js…")
-    response = requests.post(settings.BLOCKNOTE_CONVERTER_URL, headers=headers, json=data)
-
-    if response.status_code != 200:
-        logger.error(f"Failed to convert summary. Status code: {response.status_code}")
-        return None
-
-    response_data = response.json()
-    if not 'content' in response_data:
-        logger.error(f"Content is missing: %s", response_data)
-        return None
-
-    content = response_data['content']
-    logger.info("Base64 content: %s", content)
-
-    return content
-
-
-
-def get_document_link(content, email):
-    """Wip."""
-
-    logger.info("Create a document for %s", email)
-
-    if not settings.DOCS_BASE_URL:
-        logger.error("DOCS_BASE_URL is not configured")
-        return None
-
-    headers = {
-        "Content-Type": "application/json"
-    }
-
-    data = {
-        "content": content,
-        "owner": email
-    }
-
-    logger.info("Querying docs…")
-    response = requests.post(f"{settings.DOCS_BASE_URL}/api/v1.0/summary/", headers=headers, json=data)
-
-    if response.status_code != 200:
-        logger.error(f"Failed to get document's id. Status code: {response.status_code}")
-        return None
-
-    response_data = response.json()
-    if not 'id' in response_data:
-        logger.error(f"ID is missing: %s", response_data)
-        return None
-
-    id = response_data['id']
-    logger.info("Document's id: %s", id)
-
-    return f"{settings.DOCS_BASE_URL}/docs/{id}/"
-
-
-def email_owner_with_summary(room, link, owner):
-    """Wip."""
-
-    logger.info("Emailing owner: %s", owner)
-
-    try:
-        room.email_summary(owners=[owner], link=link)
-    except smtplib.SMTPException:
-        logger.error("Error while emailing owner")
-
-def strip_room_slug(filename):
-    """Wip."""
-    return filename.split("_")[2].split(".")[0]
-
-def strip_room_date(filename):
-    """Wip."""
-    return filename.split("_")[1].split(".")[0]
-
-
-def get_minio_client():
-    """Wip."""
-
-    try:
-        return Minio(
-            settings.MINIO_URL,
-            access_key=settings.MINIO_ACCESS_KEY,
-            secret_key=settings.MINIO_SECRET_KEY,
-        )
-    except Exception as e:
-        logger.error("An error occurred while creating the Minio client %s: %s", settings.MINIO_URL, str(e))
-
-
-def download_temporary_file(minio_client, filename):
-    """Wip."""
-
-    temp_file_path = None
-
-    logger.info('downloading file %s', filename)
-
-    try:
-        audio_file_stream = minio_client.get_object(settings.MINIO_BUCKET, object_name=filename)
-
-        with tempfile.NamedTemporaryFile(delete=False, suffix='.ogg') as temp_audio_file:
-
-            for data in audio_file_stream.stream(32 * 1024):
-                temp_audio_file.write(data)
-
-            temp_file_path = temp_audio_file.name
-            logger.info('Temporary file created at %s', temp_file_path)
-
-        audio_file_stream.close()
-        audio_file_stream.release_conn()
-
-    except Exception as e:
-        logger.error("An error occurred while accessing the object: %s", str(e))
-
-    return temp_file_path
-
-
-# todo - discuss retry policy if the webhook fail
-@api_view(["POST"])
-def minio_webhook(request):
-
-    data = request.data
-
-    logger.info('Minio webhook sent %s', data)
-
-    record = data["Records"][0]
-    s3 = record['s3']
-    bucket = s3['bucket']
-    bucket_name = bucket['name']
-    object = s3['object']
-    filename = object['key']
-
-    if bucket_name != settings.MINIO_BUCKET:
-        logger.info('Not interested in this bucket: %s', bucket_name)
-        return Response("Not interested in this bucket")
-
-    if object['contentType'] != 'audio/ogg':
-        logger.info('Not interested in this file type: %s', object['contentType'])
-        return Response("Not interested in this file type")
-
-    room_slug = strip_room_slug(filename)
-    room_date = strip_room_date(filename)
-    logger.info('file received %s for room %s', filename, room_slug)
-
-    minio_client = get_minio_client()
-
-    temp_file_path = None
-    summary = None
-
-    try:
-        temp_file_path = download_temporary_file(minio_client, filename)
-
-        if settings.OPENAI_ENABLE and temp_file_path:
-            logger.info('Initiating OpenAI client …')
-            openai_client = openai.OpenAI(
-                api_key=settings.OPENAI_API_KEY,
-            )
-
-            with open(temp_file_path, "rb") as audio_file:
-                logger.info('Querying transcription …')
-                transcript = openai_client.audio.transcriptions.create(
-                    model="whisper-1",
-                    file=audio_file
-                )
-
-            logger.info('Transcript: \n  %s', transcript)
-            prompt = get_prompt(transcript.text, room_date)
-
-            logger.info('Prompt: \n %s', prompt)
-
-            summary_response = openai_client.chat.completions.create(
-                model="gpt-4o",
-                messages=[
-                    {"role": "system", "content": "You are a concise and structured assistant, that summarizes meeting transcripts."},
-                    {"role": "user", "content": prompt}
-                ],
-            )
-
-            summary = summary_response.choices[0].message.content
-            logger.info('Summary: \n %s', summary)
-
-    except Exception as e:
-        logger.error("An error occurred: %s", str(e))
-        raise
-
-    finally:
-        remove_temporary_file(temp_file_path)
-
-    if not summary:
-        logger.error("Empty summary.")
-        return Response("")
-
-    room, owners = get_room_and_owners(room_slug)
-
-    if not owners or not room:
-        logger.error("No owners in room %s", room_slug)
-        return Response("")
-
-    content = get_blocknote_content(summary)
-
-    if not content:
-        logger.error("Empty content.")
-        return Response("")
-
-    owner = owners[0]
-
-    link = get_document_link(content, owner.email)
-
-    if not link:
-        logger.error("Empty link.")
-        return Response("")
-
-    email_owner_with_summary(room, link, owner)
-
-    return Response("")

src/backend/core/models.py

@@ -15,8 +15,6 @@ from django.utils.functional import lazy
 from django.utils.text import capfirst, slugify
 from django.utils.translation import gettext_lazy as _
 
-from django.template.loader import render_to_string
-
 from timezone_field import TimeZoneField
 
 logger = getLogger(__name__)
@@ -327,24 +325,3 @@ class Room(Resource):
         else:
             raise ValidationError({"name": f'Room name "{self.name:s}" is reserved.'})
         super().clean_fields(exclude=exclude)
-
-
-    def email_summary(self, owners, link):
-        """Wip"""
-
-        template_vars = {
-            "title": "Votre résumé est prêt",
-            "link": link,
-            "room": self.slug,
-        }
-        msg_html = render_to_string("mail/html/summary.html", template_vars)
-        msg_plain = render_to_string("mail/text/invitation.txt", template_vars)
-
-        for owner in owners:
-            owner.email_user(
-                subject="Votre résumé est prêt",
-                from_email=settings.EMAIL_FROM,
-                message=msg_plain,
-                html_message=msg_html,
-                fail_silently=False,
-            )

src/backend/core/urls.py

@@ -5,7 +5,7 @@ from django.urls import include, path
 
 from rest_framework.routers import DefaultRouter
 
-from core.api import get_frontend_configuration, viewsets, demo
+from core.api import viewsets
 from core.authentication.urls import urlpatterns as oidc_urls
 
 # - Main endpoints
@@ -23,8 +23,6 @@ urlpatterns = [
             [
                 *router.urls,
                 *oidc_urls,
-                path("config/", get_frontend_configuration, name="config"),
-                path("minio-webhook/", demo.minio_webhook, name="demo"),
             ]
         ),
     ),

src/backend/core/utils.py

@@ -4,7 +4,6 @@ Utils functions used in the core app
 
 # ruff: noqa:S311
 
-import hashlib
 import json
 import random
 from typing import Optional
@@ -25,11 +24,7 @@ def generate_color(identity: str) -> str:
     range and ensure predictability.
     """
 
-    # ruff: noqa:S324
-    identity_hash = hashlib.sha1(identity.encode("utf-8"))
-    # Keep only hash's last 16 bits, collisions are not a concern
-    seed = int(identity_hash.hexdigest(), 16) & 0xFFFF
-    random.seed(seed)
+    random.seed(hash(identity))
     hue = random.randint(0, 360)
     saturation = random.randint(50, 75)
     lightness = random.randint(25, 60)
@@ -52,8 +47,6 @@ def generate_token(room: str, user, username: Optional[str] = None) -> str:
     video_grants = VideoGrants(
         room=room,
         room_join=True,
-        room_admin=True,
-        room_record=True,
         can_update_own_metadata=True,
         can_publish_sources=[
             "camera",

src/backend/meet/settings.py

@@ -251,19 +251,6 @@ class Base(Configuration):
         "REDOC_DIST": "SIDECAR",
     }
 
-    # Frontend
-    FRONTEND_CONFIGURATION = {
-        "analytics": values.DictValue(
-            {}, environ_name="FRONTEND_ANALYTICS", environ_prefix=None
-        ),
-        "support": values.DictValue(
-            {}, environ_name="FRONTEND_SUPPORT", environ_prefix=None
-        ),
-        "silence_livekit_debug_logs": values.BooleanValue(
-            False, environ_name="FRONTEND_SILENCE_LIVEKIT_DEBUG", environ_prefix=None
-        ),
-    }
-
     # Mail
     EMAIL_BACKEND = values.Value("django.core.mail.backends.smtp.EmailBackend")
     EMAIL_HOST = values.Value(None)
@@ -271,7 +258,6 @@ class Base(Configuration):
     EMAIL_HOST_PASSWORD = values.Value(None)
     EMAIL_PORT = values.PositiveIntegerValue(None)
     EMAIL_USE_TLS = values.BooleanValue(False)
-    EMAIL_USE_SSL = values.BooleanValue(False)
     EMAIL_FROM = values.Value("from@example.com")
 
     AUTH_USER_MODEL = "core.User"
@@ -386,53 +372,6 @@ class Base(Configuration):
         None, environ_name="ANALYTICS_KEY", environ_prefix=None
     )
 
-    # todo - totally wip
-    AWS_S3_ENDPOINT_URL = values.Value(
-        environ_name="AWS_S3_ENDPOINT_URL", environ_prefix=None
-    )
-    AWS_S3_ACCESS_KEY_ID = values.Value(
-        environ_name="AWS_S3_ACCESS_KEY_ID", environ_prefix=None
-    )
-    AWS_S3_SECRET_ACCESS_KEY = values.Value(
-        environ_name="AWS_S3_SECRET_ACCESS_KEY", environ_prefix=None
-    )
-    AWS_S3_REGION_NAME = values.Value(
-        environ_name="AWS_S3_REGION_NAME", environ_prefix=None
-    )
-    AWS_STORAGE_BUCKET_NAME = values.Value(
-        "meet-media-storage",
-        environ_name="AWS_STORAGE_BUCKET_NAME",
-        environ_prefix=None,
-    )
-
-    OPENAI_API_KEY = values.Value(
-        None, environ_name="OPENAI_API_KEY", environ_prefix=None
-    )
-    OPENAI_ENABLE = values.BooleanValue(
-        True, environ_name="OPENAI_ENABLE", environ_prefix=None
-    )
-
-    # todo - totally wip
-    MINIO_ACCESS_KEY = values.Value(
-        None, environ_name="MINIO_ACCESS_KEY", environ_prefix=None
-    )
-    MINIO_SECRET_KEY = values.Value(
-        None, environ_name="MINIO_SECRET_KEY", environ_prefix=None
-    )
-    MINIO_URL = values.Value(
-        None, environ_name="MINIO_URL", environ_prefix=None
-    )
-    MINIO_BUCKET = values.Value(
-        'livekit-staging-livekit-egress', environ_name="MINIO_BUCKET", environ_prefix=None
-    )
-
-    BLOCKNOTE_CONVERTER_URL = values.Value(
-        'https://converter-blocknote.osc-fr1.scalingo.io/', environ_name="",  environ_prefix=None
-    )
-    DOCS_BASE_URL = values.Value(
-        'https://docs-ia.beta.numerique.gouv.fr', environ_name="",  environ_prefix=None
-    )
-
     # pylint: disable=invalid-name
     @property
     def ENVIRONMENT(self):
@@ -576,20 +515,6 @@ class Production(Base):
     ALLOWED_HOSTS=["foo.com", "foo.fr"]
     """
 
-    LOGGING = {
-        "version": 1,
-        "disable_existing_loggers": False,
-        "handlers": {
-            "console": {
-                "class": "logging.StreamHandler",
-            },
-        },
-        "root": {
-            "handlers": ["console"],
-            "level": "INFO",
-        },
-    }
-
     # Security
     ALLOWED_HOSTS = [
         *values.ListValue([], environ_name="ALLOWED_HOSTS"),
@@ -610,14 +535,6 @@ class Production(Base):
     #
     # In other cases, you should comment the following line to avoid security issues.
     SECURE_PROXY_SSL_HEADER = ("HTTP_X_FORWARDED_PROTO", "https")
-    SECURE_HSTS_SECONDS = 60
-    SECURE_HSTS_PRELOAD = True
-    SECURE_HSTS_INCLUDE_SUBDOMAINS = True
-    SECURE_SSL_REDIRECT = True
-    SECURE_REDIRECT_EXEMPT = [
-        "^__lbheartbeat__",
-        "^__heartbeat__",
-    ]
 
     # Modern browsers require to have the `secure` attribute on cookies with `Samesite=none`
     CSRF_COOKIE_SECURE = True
@@ -640,6 +557,26 @@ class Production(Base):
         },
     }
 
+    LOGGING = {
+        "version": 1,
+        "formatters": {
+            "json": {"()": "dockerflow.logging.JsonLogFormatter", "logger_name": "meet"}
+        },
+        "handlers": {
+            "console": {
+                "level": "DEBUG",
+                "class": "logging.StreamHandler",
+                "formatter": "json",
+            },
+        },
+        "loggers": {
+            "request.summary": {
+                "handlers": ["console"],
+                "level": "DEBUG",
+            },
+        },
+    }
+
 
 class Feature(Production):
     """

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "meet"
-version = "0.1.7"
+version = "0.1.4"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",
@@ -25,7 +25,7 @@ license = { file = "LICENSE" }
 readme = "README.md"
 requires-python = ">=3.10"
 dependencies = [
-    "boto3==1.35.19",
+    "boto3==1.35.5",
     "Brotli==1.1.0",
     "celery[redis]==5.4.0",
     "django-configurations==2.5.1",
@@ -36,11 +36,11 @@ dependencies = [
     "django-redis==5.4.0",
     "django-storages[s3]==1.14.4",
     "django-timezone-field>=5.1",
-    "django==5.1.1",
+    "django==5.1",
     "djangorestframework==3.15.2",
     "drf_spectacular==0.27.2",
     "dockerflow==2024.4.2",
-    "easy_thumbnails==2.10",
+    "easy_thumbnails==2.9",
     "factory_boy==3.3.1",
     "freezegun==1.5.1",
     "gunicorn==23.0.0",
@@ -48,18 +48,16 @@ dependencies = [
     "june-analytics-python==2.3.0",
     "markdown==3.7",
     "nested-multipart-parser==1.5.0",
-    "psycopg[binary]==3.2.2",
+    "psycopg[binary]==3.2.1",
     "PyJWT==2.9.0",
     "python-frontmatter==1.1.0",
     "requests==2.32.3",
-    "sentry-sdk==2.14.0",
+    "sentry-sdk==2.13.0",
     "url-normalize==1.4.3",
     "WeasyPrint>=60.2",
     "whitenoise==6.7.0",
     "mozilla-django-oidc==4.0.1",
     "livekit-api==0.7.0",
-    "minio==7.2.9",
-    "openai==1.51.2"
 ]
 
 [project.urls]
@@ -73,18 +71,18 @@ dev = [
     "django-extensions==3.2.3",
     "drf-spectacular-sidecar==2024.7.1",
     "ipdb==0.13.13",
-    "ipython==8.27.0",
+    "ipython==8.26.0",
     "pyfakefs==5.6.0",
     "pylint-django==2.5.5",
-    "pylint==3.2.7",
+    "pylint==3.2.6",
     "pytest-cov==5.0.0",
-    "pytest-django==4.9.0",
-    "pytest==8.3.3",
+    "pytest-django==4.8.0",
+    "pytest==8.3.2",
     "pytest-icdiff==0.9",
     "pytest-xdist==3.6.1",
     "responses==0.25.3",
-    "ruff==0.6.5",
-    "types-requests==2.32.0.20240914",
+    "ruff==0.6.2",
+    "types-requests==2.32.0.20240712",
 ]
 
 [tool.setuptools]

src/frontend/Dockerfile

@@ -32,7 +32,7 @@ WORKDIR /home/frontend
 RUN npm run build
 
 # ---- Front-end image ----
-FROM nginxinc/nginx-unprivileged:1.26-alpine as frontend-production
+FROM nginxinc/nginx-unprivileged:1.25 as frontend-production
 
 # Un-privileged user running the application
 ARG DOCKER_USER

src/frontend/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/play-icon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Visio</title>
+    <title>Meet</title>
   </head>
   <body>
     <div id="root"></div>

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "meet",
   "private": true,
-  "version": "0.1.7",
+  "version": "0.1.4",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",
@@ -13,48 +13,43 @@
     "check": "prettier --check ./src"
   },
   "dependencies": {
-    "@livekit/components-react": "2.6.5",
-    "@livekit/components-styles": "1.1.3",
-    "@livekit/track-processors": "0.3.2",
-    "@pandacss/preset-panda": "0.46.1",
-    "@react-aria/toast": "3.0.0-beta.16",
+    "@livekit/components-react": "2.3.3",
+    "@livekit/components-styles": "1.0.12",
+    "@pandacss/preset-panda": "0.41.0",
     "@remixicon/react": "4.2.0",
-    "@tanstack/react-query": "5.59.4",
-    "crisp-sdk-web": "1.0.25",
+    "@tanstack/react-query": "5.49.2",
     "hoofd": "1.7.1",
-    "i18next": "23.15.2",
+    "i18next": "23.12.1",
     "i18next-browser-languagedetector": "8.0.0",
-    "i18next-parser": "9.0.2",
+    "i18next-parser": "9.0.0",
     "i18next-resources-to-backend": "1.2.1",
-    "livekit-client": "2.5.7",
-    "posthog-js": "1.167.0",
-    "react": "18.3.1",
-    "react-aria-components": "1.4.0",
-    "react-dom": "18.3.1",
-    "react-i18next": "15.0.2",
-    "use-sound": "4.0.3",
-    "valtio": "2.0.0",
-    "wouter": "3.3.5"
+    "livekit-client": "2.3.1",
+    "react": "18.2.0",
+    "react-aria-components": "1.2.1",
+    "react-dom": "18.2.0",
+    "react-i18next": "14.1.3",
+    "valtio": "1.13.2",
+    "wouter": "3.3.0"
   },
   "devDependencies": {
-    "@pandacss/dev": "0.46.1",
-    "@tanstack/eslint-plugin-query": "5.59.2",
-    "@tanstack/react-query-devtools": "5.59.4",
-    "@types/node": "20.16.11",
-    "@types/react": "18.3.11",
+    "@pandacss/dev": "0.41.0",
+    "@tanstack/eslint-plugin-query": "5.49.1",
+    "@tanstack/react-query-devtools": "5.49.2",
+    "@types/node": "20.14.9",
+    "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "8.8.1",
-    "@typescript-eslint/parser": "8.8.1",
-    "@vitejs/plugin-react": "4.3.2",
+    "@typescript-eslint/eslint-plugin": "7.13.1",
+    "@typescript-eslint/parser": "7.13.1",
+    "@vitejs/plugin-react": "4.3.1",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-jsx-a11y": "6.10.0",
+    "eslint-plugin-jsx-a11y": "6.9.0",
     "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-react-refresh": "0.4.12",
-    "postcss": "8.4.47",
+    "eslint-plugin-react-refresh": "0.4.7",
+    "postcss": "8.4.39",
     "prettier": "3.3.3",
-    "typescript": "5.6.3",
-    "vite": "5.4.8",
-    "vite-tsconfig-paths": "5.0.1"
+    "typescript": "5.5.2",
+    "vite": "5.3.1",
+    "vite-tsconfig-paths": "4.3.2"
   }
 }

src/frontend/panda.config.ts

@@ -63,29 +63,6 @@ const config: Config = {
         '75%': { boxShadow: '0 0 0 30px rgba(255, 255, 255, 0)' },
         '100%': { boxShadow: '0 0 0 0 rgba(255, 255, 255, 0)' },
       },
-      active_speaker: {
-        '0%': { height: '25%' },
-        '25%': { height: '45%' },
-        '50%': { height: '20%' },
-        '100%': { height: '55%' },
-      },
-      active_speaker_small: {
-        '0%': { height: '20%' },
-        '25%': { height: '25%' },
-        '50%': { height: '18%' },
-        '100%': { height: '25%' },
-      },
-      wave_hand: {
-        '0%': { transform: 'rotate(0deg)' },
-        '20%': { transform: 'rotate(-20deg)' },
-        '80%': { transform: 'rotate(20deg)' },
-        '100%': { transform: 'rotate(0)' },
-      },
-      pulse_mic: {
-        '0%': { color: 'primary', opacity: '1' },
-        '50%': { color: 'primary', opacity: '0.8' },
-        '100%': { color: 'primary', opacity: '1' },
-      },
     },
     tokens: defineTokens({
       /* we take a few things from the panda preset but for now we clear out some stuff.

src/frontend/src/App.tsx

@@ -11,15 +11,18 @@ import { Layout } from './layout/Layout'
 import { NotFoundScreen } from './components/NotFoundScreen'
 import { routes } from './routes'
 import './i18n/init'
+import { silenceLiveKitLogs } from '@/utils/livekit.ts'
 import { queryClient } from '@/api/queryClient'
-import { AppInitialization } from '@/components/AppInitialization'
 
 function App() {
   const { i18n } = useTranslation()
   useLang(i18n.language)
+
+  const isProduction = import.meta.env.PROD
+  silenceLiveKitLogs(isProduction)
+
   return (
     <QueryClientProvider client={queryClient}>
-      <AppInitialization />
       <Suspense fallback={null}>
         <I18nProvider locale={i18n.language}>
           <Layout>

src/frontend/src/api/queryKeys.ts

@@ -1,5 +1,4 @@
 export const keys = {
   user: 'user',
   room: 'room',
-  config: 'config',
 }

src/frontend/src/api/useConfig.ts

@@ -1,26 +0,0 @@
-import { fetchApi } from './fetchApi'
-import { keys } from './queryKeys'
-import { useQuery } from '@tanstack/react-query'
-
-export interface ApiConfig {
-  analytics?: {
-    id: string
-    host: string
-  }
-  support?: {
-    id: string
-  }
-  silence_livekit_debug_logs?: boolean
-}
-
-const fetchConfig = (): Promise<ApiConfig> => {
-  return fetchApi<ApiConfig>(`config/`)
-}
-
-export const useConfig = () => {
-  return useQuery({
-    queryKey: [keys.config],
-    queryFn: fetchConfig,
-    staleTime: Infinity,
-  })
-}

src/frontend/src/components/AppInitialization.tsx

@@ -1,20 +0,0 @@
-import { silenceLiveKitLogs } from '@/utils/livekit'
-import { useConfig } from '@/api/useConfig'
-import { useAnalytics } from '@/features/analytics/hooks/useAnalytics'
-import { useSupport } from '@/features/support/hooks/useSupport'
-
-export const AppInitialization = () => {
-  const { data } = useConfig()
-
-  const {
-    analytics = {},
-    support = {},
-    silence_livekit_debug_logs = false,
-  } = data || {}
-
-  useAnalytics(analytics)
-  useSupport(support)
-  silenceLiveKitLogs(silence_livekit_debug_logs)
-
-  return null
-}

src/frontend/src/components/Avatar.tsx

@@ -19,7 +19,7 @@ const avatar = cva({
       list: {
         width: '32px',
         height: '32px',
-        fontSize: '1.25rem',
+        fontSize: '0.8rem',
       },
       placeholder: {
         width: '100%',

src/frontend/src/components/Feedback.tsx

@@ -1,12 +1,12 @@
+import { Button } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { RiExternalLinkLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import { LinkButton } from '@/primitives'
 
 export const Feedback = () => {
   const { t } = useTranslation()
   return (
-    <LinkButton
+    <Button
       href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
       variant="success"
       target="_blank"
@@ -20,6 +20,6 @@ export const Feedback = () => {
         className={css({ marginLeft: 0.5 })}
         aria-hidden="true"
       />
-    </LinkButton>
+    </Button>
   )
 }

src/frontend/src/components/SoundTester.tsx

@@ -27,17 +27,12 @@ export const SoundTester = () => {
   return (
     <>
       <Button
-        invisible
         onPress={() => {
           audioRef?.current?.play()
           setIsPlaying(true)
         }}
         size="sm"
         isDisabled={isPlaying}
-        fullWidth
-        style={{
-          color: isPlaying ? 'var(--colors-primary)' : undefined,
-        }}
       >
         {isPlaying ? t('audio.speakers.ongoingTest') : t('audio.speakers.test')}
       </Button>

src/frontend/src/features/analytics/hooks/useAnalytics.tsx

@@ -1,39 +0,0 @@
-import { useEffect } from 'react'
-import { useLocation } from 'wouter'
-import posthog from 'posthog-js'
-import { ApiUser } from '@/features/auth/api/ApiUser'
-
-export const startAnalyticsSession = (data: ApiUser) => {
-  if (posthog._isIdentified()) return
-  const { id, email } = data
-  posthog.identify(id, { email })
-}
-
-export const terminateAnalyticsSession = () => {
-  if (!posthog._isIdentified()) return
-  posthog.reset()
-}
-
-export type useAnalyticsProps = {
-  id?: string
-  host?: string
-}
-
-export const useAnalytics = ({ id, host }: useAnalyticsProps) => {
-  const [location] = useLocation()
-  useEffect(() => {
-    if (!id || !host) return
-    if (posthog.__loaded) return
-    posthog.init(id, {
-      api_host: host,
-      person_profiles: 'always',
-    })
-  }, [id, host])
-
-  // From PostHog tutorial on PageView tracking in a Single Page Application (SPA) context.
-  useEffect(() => {
-    posthog.capture('$pageview')
-  }, [location])
-
-  return null
-}

src/frontend/src/features/auth/api/fetchUser.ts

@@ -20,7 +20,7 @@ export const fetchUser = (): Promise<ApiUser | false> => {
           // make sure to not resolve the promise while trying to silent login
           // so that consumers of fetchUser don't think the work already ended
           if (canAttemptSilentLogin()) {
-            attemptSilentLogin(300)
+            attemptSilentLogin(3600)
           } else {
             resolve(false)
           }

src/frontend/src/features/auth/api/useUser.tsx

@@ -2,12 +2,9 @@ import { useQuery } from '@tanstack/react-query'
 import { keys } from '@/api/queryKeys'
 import { fetchUser } from './fetchUser'
 import { type ApiUser } from './ApiUser'
-import { useEffect } from 'react'
-import { startAnalyticsSession } from '@/features/analytics/hooks/useAnalytics'
-import { initializeSupportSession } from '@/features/support/hooks/useSupport'
 
 /**
- * returns info about currently logged-in user
+ * returns info about currently logged in user
  *
  * `isLoggedIn` is undefined while query is loading and true/false when it's done
  */
@@ -15,16 +12,9 @@ export const useUser = () => {
   const query = useQuery({
     queryKey: [keys.user],
     queryFn: fetchUser,
-    staleTime: Infinity,
+    staleTime: 1000 * 60 * 60, // 1 hour
   })
 
-  useEffect(() => {
-    if (query?.data) {
-      startAnalyticsSession(query.data)
-      initializeSupportSession(query.data)
-    }
-  }, [query.data])
-
   const isLoggedIn =
     query.status === 'success' ? query.data !== false : undefined
   const isLoggedOut = isLoggedIn === false

src/frontend/src/features/home/components/JoinMeetingDialog.tsx

@@ -23,7 +23,7 @@ export const JoinMeetingDialog = () => {
           name="roomId"
           label={t('joinInputLabel')}
           description={t('joinInputExample', {
-            example: 'https://visio.numerique.gouv.fr/azer-tyu-qsdf',
+            example: 'https://meet.numerique.gouv.fr/azer-tyu-qsdf',
           })}
           validate={(value) => {
             return !isRoomValid(value.trim()) ? (

src/frontend/src/features/home/components/LaterMeetingDialog.tsx

@@ -1,9 +1,8 @@
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getRouteUrl } from '@/navigation/getRouteUrl'
-import { Button, Dialog, type DialogProps, P, Text } from '@/primitives'
+import { Div, Button, Dialog, Input, type DialogProps, P } from '@/primitives'
 import { HStack } from '@/styled-system/jsx'
-import { RiCheckLine, RiFileCopyLine, RiSpam2Fill } from '@remixicon/react'
 
 // fixme - duplication with the InviteDialog
 export const LaterMeetingDialog = ({
@@ -12,17 +11,19 @@ export const LaterMeetingDialog = ({
 }: { roomId: string } & Omit<DialogProps, 'title'>) => {
   const { t } = useTranslation('home')
   const roomUrl = getRouteUrl('room', roomId)
-
-  const [isCopied, setIsCopied] = useState(false)
-
+  const copyLabel = t('laterMeetingDialog.copy')
+  const copiedLabel = t('laterMeetingDialog.copied')
+  const [copyLinkLabel, setCopyLinkLabel] = useState(copyLabel)
   useEffect(() => {
-    if (isCopied) {
-      const timeout = setTimeout(() => setIsCopied(false), 3000)
-      return () => clearTimeout(timeout)
+    if (copyLinkLabel == copiedLabel) {
+      const timeout = setTimeout(() => {
+        setCopyLinkLabel(copyLabel)
+      }, 5000)
+      return () => {
+        clearTimeout(timeout)
+      }
     }
-  }, [isCopied])
-
-  const [isHovered, setIsHovered] = useState(false)
+  }, [copyLinkLabel, copyLabel, copiedLabel])
 
   return (
     <Dialog
@@ -31,63 +32,31 @@ export const LaterMeetingDialog = ({
       title={t('laterMeetingDialog.heading')}
     >
       <P>{t('laterMeetingDialog.description')}</P>
-      <Button
-        variant={isCopied ? 'success' : 'primary'}
-        size="sm"
-        fullWidth
-        aria-label={t('laterMeetingDialog.copy')}
-        style={{
-          justifyContent: 'start',
-        }}
-        onPress={() => {
-          navigator.clipboard.writeText(roomUrl)
-          setIsCopied(true)
-        }}
-        onHoverChange={setIsHovered}
-        data-attr="later-dialog-copy"
-      >
-        {isCopied ? (
-          <>
-            <RiCheckLine size={18} style={{ marginRight: '8px' }} />
-            {t('laterMeetingDialog.copied')}
-          </>
-        ) : (
-          <>
-            <RiFileCopyLine
-              size={18}
-              style={{ marginRight: '8px', minWidth: '18px' }}
-            />
-            {isHovered ? (
-              t('laterMeetingDialog.copy')
-            ) : (
-              <div
-                style={{
-                  textOverflow: 'ellipsis',
-                  overflow: 'hidden',
-                  userSelect: 'none',
-                  textWrap: 'nowrap',
-                }}
-              >
-                {roomUrl.replace(/^https?:\/\//, '')}
-              </div>
-            )}
-          </>
-        )}
-      </Button>
-      <HStack>
-        <div
-          style={{
-            backgroundColor: '#d9e5ff',
-            borderRadius: '50%',
-            padding: '4px',
-            marginTop: '1rem',
-          }}
-        >
-          <RiSpam2Fill size={22} style={{ fill: '#4c84fc' }} />
-        </div>
-        <Text variant="sm" style={{ marginTop: '1rem' }}>
-          {t('laterMeetingDialog.permissions')}
-        </Text>
+      <HStack alignItems="stretch" gap="gutter">
+        <Div flex="1">
+          <Input
+            type="text"
+            aria-label={t('laterMeetingDialog.inputLabel')}
+            value={roomUrl}
+            readOnly
+            onClick={(e) => {
+              e.currentTarget.select()
+            }}
+          />
+        </Div>
+        <Div minWidth="8rem">
+          <Button
+            variant="primary"
+            size="sm"
+            fullWidth
+            onPress={() => {
+              navigator.clipboard.writeText(roomUrl)
+              setCopyLinkLabel(copiedLabel)
+            }}
+          >
+            {copyLinkLabel}
+          </Button>
+        </Div>
       </HStack>
     </Dialog>
   )

src/frontend/src/features/home/routes/Home.tsx

@@ -1,18 +1,18 @@
 import { useTranslation } from 'react-i18next'
-import { DialogTrigger, MenuItem, Menu as RACMenu } from 'react-aria-components'
+import { DialogTrigger } from 'react-aria-components'
 import { Button, Menu, Text } from '@/primitives'
 import { HStack } from '@/styled-system/jsx'
 import { navigateTo } from '@/navigation/navigateTo'
 import { Screen } from '@/layout/Screen'
 import { Centered } from '@/layout/Centered'
 import { generateRoomId } from '@/features/rooms'
-import { useUser, UserAware } from '@/features/auth'
+import { authUrl, useUser, UserAware } from '@/features/auth'
 import { JoinMeetingDialog } from '../components/JoinMeetingDialog'
-import { ProConnectButton } from '@/components/ProConnectButton'
 import { useCreateRoom } from '@/features/rooms'
 import { usePersistentUserChoices } from '@livekit/components-react'
 import { menuItemRecipe } from '@/primitives/menuItemRecipe'
 import { RiAddLine, RiLink } from '@remixicon/react'
+import { MenuItem, Menu as RACMenu } from 'react-aria-components'
 import { LaterMeetingDialog } from '@/features/home/components/LaterMeetingDialog'
 import { useState } from 'react'
 
@@ -27,6 +27,8 @@ export const Home = () => {
   const { mutateAsync: createRoom } = useCreateRoom()
   const [laterRoomId, setLaterRoomId] = useState<null | string>(null)
 
+  console.log(laterRoomId)
+
   return (
     <UserAware>
       <Screen>
@@ -42,12 +44,10 @@ export const Home = () => {
               {t('loginToCreateMeeting')}
             </Text>
           )}
-          <HStack gap="gutter" alignItems="start">
+          <HStack gap="gutter">
             {isLoggedIn ? (
               <Menu>
-                <Button variant="primary" data-attr="create-meeting">
-                  {t('createMeeting')}
-                </Button>
+                <Button variant="primary">{t('createMeeting')}</Button>
                 <RACMenu>
                   <MenuItem
                     className={menuItemRecipe({ icon: true })}
@@ -59,7 +59,6 @@ export const Home = () => {
                         })
                       )
                     }}
-                    data-attr="create-option-instant"
                   >
                     <RiAddLine size={18} />
                     {t('createMenu.instantOption')}
@@ -72,7 +71,6 @@ export const Home = () => {
                         setLaterRoomId(data.slug)
                       )
                     }}
-                    data-attr="create-option-later"
                   >
                     <RiLink size={18} />
                     {t('createMenu.laterOption')}
@@ -80,16 +78,12 @@ export const Home = () => {
                 </RACMenu>
               </Menu>
             ) : (
-              <ProConnectButton />
+              <Button variant="primary" href={authUrl()}>
+                {t('login', { ns: 'global' })}
+              </Button>
             )}
             <DialogTrigger>
-              <Button
-                variant="primary"
-                outline
-                style={{
-                  height: !isLoggedIn ? '56px' : undefined, // Temporary, Align with ProConnect Button fixed height
-                }}
-              >
+              <Button variant="primary" outline>
                 {t('joinMeeting')}
               </Button>
               <JoinMeetingDialog />

src/frontend/src/features/notifications/MainNotificationToast.tsx

@@ -1,112 +0,0 @@
-import { useEffect } from 'react'
-import { useRoomContext } from '@livekit/components-react'
-import { Participant, RoomEvent } from 'livekit-client'
-import { ToastProvider, toastQueue } from './components/ToastProvider'
-import { NotificationType } from './NotificationType'
-import { Div } from '@/primitives'
-import { isMobileBrowser } from '@livekit/components-core'
-import { useNotificationSound } from '@/features/notifications/hooks/useSoundNotification'
-
-export const MainNotificationToast = () => {
-  const room = useRoomContext()
-  const { triggerNotificationSound } = useNotificationSound()
-
-  useEffect(() => {
-    const showJoinNotification = (participant: Participant) => {
-      if (isMobileBrowser()) {
-        return
-      }
-      triggerNotificationSound(NotificationType.Joined)
-      toastQueue.add(
-        {
-          participant,
-          type: NotificationType.Joined,
-        },
-        {
-          timeout: 5000,
-        }
-      )
-    }
-    room.on(RoomEvent.ParticipantConnected, showJoinNotification)
-    return () => {
-      room.off(RoomEvent.ParticipantConnected, showJoinNotification)
-    }
-  }, [room, triggerNotificationSound])
-
-  useEffect(() => {
-    const removeParticipantNotifications = (participant: Participant) => {
-      toastQueue.visibleToasts.forEach((toast) => {
-        if (toast.content.participant === participant) {
-          toastQueue.close(toast.key)
-        }
-      })
-    }
-    room.on(RoomEvent.ParticipantDisconnected, removeParticipantNotifications)
-    return () => {
-      room.off(
-        RoomEvent.ParticipantDisconnected,
-        removeParticipantNotifications
-      )
-    }
-  }, [room])
-
-  useEffect(() => {
-    const handleNotificationReceived = (
-      prevMetadataStr: string | undefined,
-      participant: Participant
-    ) => {
-      if (!participant) return
-      if (isMobileBrowser()) return
-      if (participant.isLocal) return
-
-      const prevMetadata = JSON.parse(prevMetadataStr || '{}')
-      const metadata = JSON.parse(participant.metadata || '{}')
-
-      if (prevMetadata.raised == metadata.raised) return
-
-      const existingToast = toastQueue.visibleToasts.find(
-        (toast) =>
-          toast.content.participant === participant &&
-          toast.content.type === NotificationType.Raised
-      )
-
-      if (existingToast && prevMetadata.raised && !metadata.raised) {
-        toastQueue.close(existingToast.key)
-        return
-      }
-
-      if (!existingToast && !prevMetadata.raised && metadata.raised) {
-        triggerNotificationSound(NotificationType.Raised)
-        toastQueue.add(
-          {
-            participant,
-            type: NotificationType.Raised,
-          },
-          { timeout: 5000 }
-        )
-      }
-    }
-
-    room.on(RoomEvent.ParticipantMetadataChanged, handleNotificationReceived)
-
-    return () => {
-      room.off(RoomEvent.ParticipantMetadataChanged, handleNotificationReceived)
-    }
-  }, [room, triggerNotificationSound])
-
-  useEffect(() => {
-    const closeAllToasts = () => {
-      toastQueue.visibleToasts.forEach(({ key }) => toastQueue.close(key))
-    }
-    room.on(RoomEvent.Disconnected, closeAllToasts)
-    return () => {
-      room.off(RoomEvent.Disconnected, closeAllToasts)
-    }
-  }, [room])
-
-  return (
-    <Div position="absolute" bottom={0} right={5} zIndex={1000}>
-      <ToastProvider />
-    </Div>
-  )
-}

src/frontend/src/features/notifications/NotificationType.ts

@@ -1,6 +0,0 @@
-export enum NotificationType {
-  Joined = 'joined',
-  Default = 'default',
-  Raised = 'raised',
-  Lowered = 'lowered',
-}

src/frontend/src/features/notifications/components/Toast.tsx

@@ -1,58 +0,0 @@
-import { useToast } from '@react-aria/toast'
-import { Button } from '@/primitives'
-import { RiCloseLine } from '@remixicon/react'
-import { ToastState } from '@react-stately/toast'
-import { styled } from '@/styled-system/jsx'
-import { useRef } from 'react'
-import { ToastData } from './ToastProvider'
-import type { QueuedToast } from '@react-stately/toast'
-
-export const StyledToastContainer = styled('div', {
-  base: {
-    margin: 0.5,
-    boxShadow:
-      'rgba(0, 0, 0, 0.5) 0px 4px 8px 0px, rgba(0, 0, 0, 0.3) 0px 6px 20px 4px',
-    backgroundColor: '#494c4f',
-    color: 'white',
-    borderRadius: '8px',
-    '&[data-entering]': { animation: 'fade 200ms' },
-    '&[data-exiting]': { animation: 'fade 150ms reverse ease-in' },
-    width: 'fit-content',
-    marginLeft: 'auto',
-  },
-})
-
-const StyledToast = styled('div', {
-  base: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    gap: '1rem',
-    padding: '10px',
-  },
-})
-
-export interface ToastProps {
-  key: string
-  toast: QueuedToast<ToastData>
-  state: ToastState<ToastData>
-}
-
-export function Toast({ state, ...props }: ToastProps) {
-  const ref = useRef(null)
-  const { toastProps, contentProps, closeButtonProps } = useToast(
-    props,
-    state,
-    ref
-  )
-  return (
-    <StyledToastContainer {...toastProps} ref={ref}>
-      <StyledToast>
-        <div {...contentProps}>{props.toast.content?.message} machine a</div>
-        <Button square size="sm" invisible {...closeButtonProps}>
-          <RiCloseLine color="white" />
-        </Button>
-      </StyledToast>
-    </StyledToastContainer>
-  )
-}

src/frontend/src/features/notifications/components/ToastJoined.tsx

@@ -1,73 +0,0 @@
-import { useToast } from '@react-aria/toast'
-import { useRef } from 'react'
-import { Button as RACButton } from 'react-aria-components'
-import { Track } from 'livekit-client'
-import Source = Track.Source
-
-import { useMaybeLayoutContext } from '@livekit/components-react'
-import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
-import { StyledToastContainer, ToastProps } from './Toast'
-import { HStack, styled } from '@/styled-system/jsx'
-import { Div } from '@/primitives'
-import { useTranslation } from 'react-i18next'
-
-const ClickableToast = styled(RACButton, {
-  base: {
-    cursor: 'pointer',
-    display: 'flex',
-    borderRadius: 'inherit',
-  },
-})
-
-export function ToastJoined({ state, ...props }: ToastProps) {
-  const { t } = useTranslation('notifications')
-  const ref = useRef(null)
-  const { toastProps, contentProps, titleProps, closeButtonProps } = useToast(
-    props,
-    state,
-    ref
-  )
-  const layoutContext = useMaybeLayoutContext()
-  const participant = props.toast.content.participant
-  const trackReference = {
-    participant,
-    publication: participant.getTrackPublication(Source.Camera),
-    source: Source.Camera,
-  }
-  const pinParticipant = () => {
-    layoutContext?.pin.dispatch?.({
-      msg: 'set_pin',
-      trackReference,
-    })
-  }
-  return (
-    <StyledToastContainer {...toastProps} ref={ref}>
-      <ClickableToast
-        ref={ref}
-        onPress={(e) => {
-          pinParticipant()
-          closeButtonProps.onPress?.(e)
-        }}
-      >
-        <HStack justify="center" alignItems="center" {...contentProps}>
-          <Div display="flex" overflow="hidden" width="128" height="72">
-            <ParticipantTile
-              trackRef={trackReference}
-              disableSpeakingIndicator={true}
-              disableMetadata={true}
-              style={{
-                borderRadius: '7px 0 0 7px',
-                width: '100%',
-              }}
-            />
-          </Div>
-          <Div padding={20} {...titleProps}>
-            {t('joined.description', {
-              name: participant.name || t('defaultName'),
-            })}
-          </Div>
-        </HStack>
-      </ClickableToast>
-    </StyledToastContainer>
-  )
-}

src/frontend/src/features/notifications/components/ToastProvider.tsx

@@ -1,28 +0,0 @@
-/* eslint-disable react-refresh/only-export-components */
-import { ToastQueue, useToastQueue } from '@react-stately/toast'
-import { ToastRegion } from './ToastRegion'
-import { Participant } from 'livekit-client'
-import { NotificationType } from '../NotificationType'
-
-export interface ToastData {
-  participant: Participant
-  type: NotificationType
-  message?: string
-}
-
-// Using a global queue for toasts allows for centralized management and queuing of notifications
-// from anywhere in the app, providing greater flexibility in complex scenarios.
-export const toastQueue = new ToastQueue<ToastData>({
-  maxVisibleToasts: 5,
-})
-
-export const ToastProvider = ({ ...props }) => {
-  const state = useToastQueue<ToastData>(toastQueue)
-  return (
-    <>
-      {state.visibleToasts.length > 0 && (
-        <ToastRegion {...props} state={state} />
-      )}
-    </>
-  )
-}

src/frontend/src/features/notifications/components/ToastRaised.tsx

@@ -1,66 +0,0 @@
-import { useToast } from '@react-aria/toast'
-import { useRef } from 'react'
-
-import { StyledToastContainer, ToastProps } from './Toast'
-import { HStack } from '@/styled-system/jsx'
-import { Button, Div } from '@/primitives'
-import { useTranslation } from 'react-i18next'
-import { RiCloseLine, RiHand } from '@remixicon/react'
-import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
-
-export function ToastRaised({ state, ...props }: ToastProps) {
-  const { t } = useTranslation('notifications')
-  const ref = useRef(null)
-  const { toastProps, contentProps, titleProps, closeButtonProps } = useToast(
-    props,
-    state,
-    ref
-  )
-  const participant = props.toast.content.participant
-  const { isParticipantsOpen, toggleParticipants } = useSidePanel()
-
-  return (
-    <StyledToastContainer {...toastProps} ref={ref}>
-      <HStack
-        justify="center"
-        alignItems="center"
-        {...contentProps}
-        padding={14}
-        gap={0}
-      >
-        <RiHand
-          color="white"
-          style={{
-            marginRight: '1rem',
-            animationDuration: '300ms',
-            animationName: 'wave_hand',
-            animationIterationCount: '2',
-          }}
-        />
-        <Div {...titleProps} marginRight={0.5}>
-          {t('raised.description', {
-            name: participant.name || t('defaultName'),
-          })}
-        </Div>
-        {!isParticipantsOpen && (
-          <Button
-            size="sm"
-            variant="text"
-            style={{
-              color: '#60a5fa',
-            }}
-            onPress={(e) => {
-              toggleParticipants()
-              closeButtonProps.onPress?.(e)
-            }}
-          >
-            {t('raised.cta')}
-          </Button>
-        )}
-        <Button square size="sm" invisible {...closeButtonProps}>
-          <RiCloseLine size={18} color="white" />
-        </Button>
-      </HStack>
-    </StyledToastContainer>
-  )
-}

src/frontend/src/features/notifications/components/ToastRegion.tsx

@@ -1,30 +0,0 @@
-import { AriaToastRegionProps, useToastRegion } from '@react-aria/toast'
-import type { ToastState } from '@react-stately/toast'
-import { Toast } from './Toast'
-import { useRef } from 'react'
-import { NotificationType } from '../NotificationType'
-import { ToastJoined } from './ToastJoined'
-import { ToastData } from './ToastProvider'
-import { ToastRaised } from '@/features/notifications/components/ToastRaised.tsx'
-
-interface ToastRegionProps extends AriaToastRegionProps {
-  state: ToastState<ToastData>
-}
-
-export function ToastRegion({ state, ...props }: ToastRegionProps) {
-  const ref = useRef(null)
-  const { regionProps } = useToastRegion(props, state, ref)
-  return (
-    <div {...regionProps} ref={ref} className="toast-region">
-      {state.visibleToasts.map((toast) => {
-        if (toast.content?.type === NotificationType.Joined) {
-          return <ToastJoined key={toast.key} toast={toast} state={state} />
-        }
-        if (toast.content?.type === NotificationType.Raised) {
-          return <ToastRaised key={toast.key} toast={toast} state={state} />
-        }
-        return <Toast key={toast.key} toast={toast} state={state} />
-      })}
-    </div>
-  )
-}

src/frontend/src/features/notifications/hooks/useSoundNotification.tsx

@@ -1,18 +0,0 @@
-import useSound from 'use-sound'
-
-// fixme - handle dynamic audio output changes
-export const useNotificationSound = () => {
-  const [play] = useSound('./sounds/notifications.mp3', {
-    sprite: {
-      joined: [0, 1150],
-      raised: [1400, 180],
-      message: [1580, 300],
-      waiting: [2039, 710],
-      success: [2740, 1304],
-    },
-  })
-  const triggerNotificationSound = (type: string) => {
-    play({ id: type })
-  }
-  return { triggerNotificationSound }
-}

src/frontend/src/features/rooms/components/ActiveSpeaker.tsx

@@ -1,101 +0,0 @@
-import { styled } from '@/styled-system/jsx'
-
-const StyledContainer = styled('div', {
-  base: {
-    width: '24px',
-    height: '24px',
-    boxSizing: 'border-box',
-    backgroundColor: 'primary',
-    borderRadius: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: '2px',
-  },
-  variants: {
-    pushToTalk: {
-      true: {
-        height: '46px',
-        width: '58px',
-        borderLeftRadius: 8,
-        borderRightRadius: 0,
-        backgroundColor: '#dbeafe',
-        border: '1px solid #3b82f6',
-        gap: '3px',
-      },
-    },
-  },
-})
-
-const StyledChild = styled('div', {
-  base: {
-    backgroundColor: 'white',
-    width: '4px',
-    height: '4px',
-    borderRadius: '4px',
-    animationDuration: '400ms',
-    animationName: 'active_speaker',
-    animationIterationCount: 'infinite',
-    animationDirection: 'alternate',
-  },
-  variants: {
-    active: {
-      true: {
-        animationIterationCount: 'infinite',
-      },
-      false: {
-        animationIterationCount: 0,
-      },
-    },
-    size: {
-      small: {
-        animationName: 'active_speaker_small',
-      },
-    },
-    pushToTalk: {
-      true: {
-        backgroundColor: 'primary',
-        width: '6px',
-        height: '6px',
-      },
-    },
-  },
-})
-
-export type ActiveSpeakerProps = {
-  isSpeaking: boolean
-  pushToTalk?: boolean
-}
-
-export const ActiveSpeaker = ({
-  isSpeaking,
-  pushToTalk,
-}: ActiveSpeakerProps) => {
-  return (
-    <StyledContainer pushToTalk={pushToTalk}>
-      <StyledChild
-        pushToTalk={pushToTalk}
-        active={isSpeaking}
-        size="small"
-        style={{
-          animationDelay: '300ms',
-        }}
-      />
-      <StyledChild
-        pushToTalk={pushToTalk}
-        active={isSpeaking}
-        style={{
-          animationDelay: '100ms',
-        }}
-      />
-      <StyledChild
-        pushToTalk={pushToTalk}
-        active={isSpeaking}
-        size="small"
-        style={{
-          animationDelay: '500ms',
-        }}
-      />
-    </StyledContainer>
-  )
-}

src/frontend/src/features/rooms/components/Conference.tsx

@@ -1,10 +1,15 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
-import { LiveKitRoom, type LocalUserChoices } from '@livekit/components-react'
+import {
+  formatChatMessageLinks,
+  LiveKitRoom,
+  type LocalUserChoices,
+} from '@livekit/components-react'
 import { Room, RoomOptions } from 'livekit-client'
 import { keys } from '@/api/queryKeys'
 import { queryClient } from '@/api/queryClient'
+import { navigateTo } from '@/navigation/navigateTo'
 import { Screen } from '@/layout/Screen'
 import { QueryAware } from '@/components/QueryAware'
 import { ErrorScreen } from '@/components/ErrorScreen'
@@ -14,7 +19,6 @@ import { useCreateRoom } from '../api/createRoom'
 import { InviteDialog } from './InviteDialog'
 
 import { VideoConference } from '../livekit/prefabs/VideoConference'
-import posthog from 'posthog-js'
 
 export const Conference = ({
   roomId,
@@ -27,9 +31,6 @@ export const Conference = ({
   mode?: 'join' | 'create'
   initialRoomData?: ApiRoom
 }) => {
-  useEffect(() => {
-    posthog.capture('visit-room', { slug: roomId })
-  }, [roomId])
   const fetchKey = [keys.room, roomId, userConfig.username]
 
   const {
@@ -49,6 +50,7 @@ export const Conference = ({
   } = useQuery({
     queryKey: fetchKey,
     staleTime: 6 * 60 * 60 * 1000, // By default, LiveKit access tokens expire 6 hours after generation
+    enabled: !initialRoomData,
     initialData: initialRoomData,
     queryFn: () =>
       fetchRoom({
@@ -78,6 +80,25 @@ export const Conference = ({
 
   const [showInviteDialog, setShowInviteDialog] = useState(mode === 'create')
 
+  /**
+   * checks for actual click on the leave button instead of
+   * relying on LiveKitRoom onDisconnected because onDisconnected
+   * triggers even on page reload, it's not a user "onLeave" event really.
+   * Here we want to react to the user actually deciding to leave.
+   */
+  useEffect(() => {
+    const checkOnLeaveClick = (event: MouseEvent) => {
+      const target = event.target as HTMLElement
+      if (target.classList.contains('lk-disconnect-button')) {
+        navigateTo('feedback')
+      }
+    }
+    document.body.addEventListener('click', checkOnLeaveClick)
+    return () => {
+      document.body.removeEventListener('click', checkOnLeaveClick)
+    }
+  }, [])
+
   const { t } = useTranslation('rooms')
   if (isCreateError) {
     // this error screen should be replaced by a proper waiting room for anonymous user.
@@ -100,7 +121,7 @@ export const Conference = ({
           audio={userConfig.audioEnabled}
           video={userConfig.videoEnabled}
         >
-          <VideoConference />
+          <VideoConference chatMessageFormatter={formatChatMessageLinks} />
           {showInviteDialog && (
             <InviteDialog
               isOpen={showInviteDialog}

src/frontend/src/features/rooms/components/InviteDialog.tsx

@@ -1,37 +1,8 @@
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getRouteUrl } from '@/navigation/getRouteUrl'
-import { Div, Button, type DialogProps, P } from '@/primitives'
-import { HStack, styled, VStack } from '@/styled-system/jsx'
-import { Heading, Dialog } from 'react-aria-components'
-import { Text, text } from '@/primitives/Text'
-import {
-  RiCheckLine,
-  RiCloseLine,
-  RiFileCopyLine,
-  RiSpam2Fill,
-} from '@remixicon/react'
-import { useEffect, useState } from 'react'
-
-// fixme - extract in a proper primitive this dialog without overlay
-const StyledRACDialog = styled(Dialog, {
-  base: {
-    position: 'fixed',
-    left: '0.75rem',
-    bottom: 80,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 1000,
-    width: '24.5rem',
-    borderRadius: '8px',
-    padding: '1.5rem',
-    boxShadow:
-      '0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15)',
-    backgroundColor: 'white',
-    '&[data-entering]': { animation: 'fade 200ms' },
-    '&[data-exiting]': { animation: 'fade 150ms reverse ease-in' },
-  },
-})
+import { Div, Button, Dialog, Input, type DialogProps } from '@/primitives'
+import { HStack } from '@/styled-system/jsx'
 
 export const InviteDialog = ({
   roomId,
@@ -40,103 +11,48 @@ export const InviteDialog = ({
   const { t } = useTranslation('rooms')
   const roomUrl = getRouteUrl('room', roomId)
 
-  const [isCopied, setIsCopied] = useState(false)
-
+  const copyLabel = t('shareDialog.copy')
+  const copiedLabel = t('shareDialog.copied')
+  const [copyLinkLabel, setCopyLinkLabel] = useState(copyLabel)
   useEffect(() => {
-    if (isCopied) {
-      const timeout = setTimeout(() => setIsCopied(false), 3000)
-      return () => clearTimeout(timeout)
+    if (copyLinkLabel == copiedLabel) {
+      const timeout = setTimeout(() => {
+        setCopyLinkLabel(copyLabel)
+      }, 5000)
+      return () => {
+        clearTimeout(timeout)
+      }
     }
-  }, [isCopied])
-
-  const [isHovered, setIsHovered] = useState(false)
+  }, [copyLinkLabel, copyLabel, copiedLabel])
 
   return (
-    <StyledRACDialog {...dialogProps}>
-      {({ close }) => (
-        <VStack
-          alignItems="left"
-          justify="start"
-          gap={0}
-          style={{ maxWidth: '100%', overflow: 'hidden' }}
-        >
-          <Heading slot="title" level={3} className={text({ variant: 'h2' })}>
-            {t('shareDialog.heading')}
-          </Heading>
-          <Div position="absolute" top="5" right="5">
-            <Button
-              invisible
-              size="xs"
-              onPress={() => {
-                dialogProps.onClose?.()
-                close()
-              }}
-              aria-label={t('closeDialog')}
-            >
-              <RiCloseLine />
-            </Button>
-          </Div>
-          <P>{t('shareDialog.description')}</P>
+    <Dialog {...dialogProps} title={t('shareDialog.heading')}>
+      <HStack alignItems="stretch" gap="gutter">
+        <Div flex="1">
+          <Input
+            type="text"
+            aria-label={t('shareDialog.inputLabel')}
+            value={roomUrl}
+            readOnly
+            onClick={(e) => {
+              e.currentTarget.select()
+            }}
+          />
+        </Div>
+        <Div minWidth="8rem">
           <Button
-            variant={isCopied ? 'success' : 'primary'}
+            variant="primary"
             size="sm"
             fullWidth
-            aria-label={t('shareDialog.copy')}
-            style={{
-              justifyContent: 'start',
-            }}
             onPress={() => {
               navigator.clipboard.writeText(roomUrl)
-              setIsCopied(true)
+              setCopyLinkLabel(copiedLabel)
             }}
-            onHoverChange={setIsHovered}
-            data-attr="share-dialog-copy"
           >
-            {isCopied ? (
-              <>
-                <RiCheckLine size={18} style={{ marginRight: '8px' }} />
-                {t('shareDialog.copied')}
-              </>
-            ) : (
-              <>
-                <RiFileCopyLine
-                  size={18}
-                  style={{ marginRight: '8px', minWidth: '18px' }}
-                />
-                {isHovered ? (
-                  t('shareDialog.copy')
-                ) : (
-                  <div
-                    style={{
-                      textOverflow: 'ellipsis',
-                      overflow: 'hidden',
-                      userSelect: 'none',
-                      textWrap: 'nowrap',
-                    }}
-                  >
-                    {roomUrl.replace(/^https?:\/\//, '')}
-                  </div>
-                )}
-              </>
-            )}
+            {copyLinkLabel}
           </Button>
-          <HStack>
-            <div
-              style={{
-                backgroundColor: '#d9e5ff',
-                borderRadius: '50%',
-                padding: '4px',
-                marginTop: '1rem',
-              }}
-            >
-              <RiSpam2Fill size={22} style={{ fill: '#4c84fc' }} />
-            </div>
-            <Text variant="sm" style={{ marginTop: '1rem' }}>
-              {t('shareDialog.permissions')}
-            </Text>
-          </HStack>
-        </VStack>
-      )}
-    </StyledRACDialog>
+        </Div>
+      </HStack>
+    </Dialog>
   )
 }

src/frontend/src/features/rooms/components/Join.tsx

@@ -16,8 +16,8 @@ export const Join = ({
         <PreJoin
           persistUserChoices
           onSubmit={onSubmit}
-          micLabel={t('join.audioinput.label')}
-          camLabel={t('join.videoinput.label')}
+          micLabel={t('join.micLabel')}
+          camLabel={t('join.camlabel')}
           joinLabel={t('join.joinLabel')}
           userLabel={t('join.userLabel')}
         />

src/frontend/src/features/rooms/components/RecordingIndicator.tsx

@@ -1,53 +0,0 @@
-import { useRoomContext } from '@livekit/components-react'
-import { useEffect, useState } from 'react'
-import { RoomEvent } from 'livekit-client'
-import { egressStore } from '@/stores/egress.ts'
-import { useSnapshot } from 'valtio'
-
-export const RecordingIndicator = () => {
-  const room = useRoomContext()
-  const [isRecording, setIsRecording] = useState(room.isRecording)
-
-  const egressSnap = useSnapshot(egressStore)
-  const egressIsStopping = egressSnap.egressIsStopping
-
-  useEffect(() => {
-    const handleRecordingStatusChanges = (isRecording: boolean) => {
-      if (!isRecording) {
-        egressStore.egressIsStopping = false
-      }
-
-      setIsRecording(isRecording)
-    }
-    room.on(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanges)
-    return () => {
-      room.off(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanges)
-    }
-  }, [room])
-
-  const getStatus = () => {
-    if (egressIsStopping) {
-      return 'saving recording'
-    }
-    if (isRecording) {
-      return 'recording'
-    }
-    if (!isRecording) {
-      return 'available'
-    }
-  }
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        flexDirection: 'column',
-        width: '100%',
-      }}
-    >
-      Room status: {getStatus()}
-    </div>
-  )
-}

src/frontend/src/features/rooms/livekit/api/buildServerApiUrl.ts

@@ -1,5 +0,0 @@
-export const buildServerApiUrl = (origin: string, path: string) => {
-  const sanitizedOrigin = origin.replace(/\/$/, '')
-  const sanitizedPath = path.replace(/^\//, '')
-  return `${sanitizedOrigin}/${sanitizedPath}`
-}

src/frontend/src/features/rooms/livekit/api/fetchServerApi.ts

@@ -1,21 +0,0 @@
-import { ApiError } from '@/api/ApiError'
-
-export const fetchServerApi = async <T = Record<string, unknown>>(
-  url: string,
-  token: string,
-  options?: RequestInit
-): Promise<T> => {
-  const response = await fetch(url, {
-    ...options,
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${token}`,
-      ...options?.headers,
-    },
-  })
-  const result = await response.json()
-  if (!response.ok) {
-    throw new ApiError(response.status, result)
-  }
-  return result
-}

src/frontend/src/features/rooms/livekit/api/lowerHandParticipant.ts

@@ -1,33 +0,0 @@
-import { Participant } from 'livekit-client'
-import { fetchServerApi } from './fetchServerApi'
-import { buildServerApiUrl } from './buildServerApiUrl'
-import { useRoomData } from '../hooks/useRoomData'
-
-export const useLowerHandParticipant = () => {
-  const data = useRoomData()
-
-  const lowerHandParticipant = (participant: Participant) => {
-    if (!data || !data?.livekit) {
-      throw new Error('Room data is not available')
-    }
-    const newMetadata = JSON.parse(participant.metadata || '{}')
-    newMetadata.raised = !newMetadata.raised
-    return fetchServerApi(
-      buildServerApiUrl(
-        data.livekit.url,
-        'twirp/livekit.RoomService/UpdateParticipant'
-      ),
-      data.livekit.token,
-      {
-        method: 'POST',
-        body: JSON.stringify({
-          room: data.livekit.room,
-          identity: participant.identity,
-          metadata: JSON.stringify(newMetadata),
-          permission: participant.permissions,
-        }),
-      }
-    )
-  }
-  return { lowerHandParticipant }
-}

src/frontend/src/features/rooms/livekit/api/lowerHandParticipants.ts

@@ -1,19 +0,0 @@
-import { Participant } from 'livekit-client'
-import { useLowerHandParticipant } from '@/features/rooms/livekit/api/lowerHandParticipant'
-
-export const useLowerHandParticipants = () => {
-  const { lowerHandParticipant } = useLowerHandParticipant()
-
-  const lowerHandParticipants = (participants: Array<Participant>) => {
-    try {
-      const promises = participants.map((participant) =>
-        lowerHandParticipant(participant)
-      )
-      return Promise.all(promises)
-    } catch (error) {
-      console.error('An error occurred while lowering hands :', error)
-      throw new Error('An error occurred while lowering hands.')
-    }
-  }
-  return { lowerHandParticipants }
-}

src/frontend/src/features/rooms/livekit/api/muteParticipant.ts

@@ -1,39 +0,0 @@
-import { Participant, Track } from 'livekit-client'
-import Source = Track.Source
-import { fetchServerApi } from './fetchServerApi'
-import { buildServerApiUrl } from './buildServerApiUrl'
-import { useRoomData } from '../hooks/useRoomData'
-
-export const useMuteParticipant = () => {
-  const data = useRoomData()
-
-  const muteParticipant = (participant: Participant) => {
-    if (!data || !data?.livekit) {
-      throw new Error('Room data is not available')
-    }
-    const trackSid = participant.getTrackPublication(
-      Source.Microphone
-    )?.trackSid
-
-    if (!trackSid) {
-      throw new Error('Missing audio track')
-    }
-    return fetchServerApi(
-      buildServerApiUrl(
-        data.livekit.url,
-        'twirp/livekit.RoomService/MutePublishedTrack'
-      ),
-      data.livekit.token,
-      {
-        method: 'POST',
-        body: JSON.stringify({
-          room: data.livekit.room,
-          identity: participant.identity,
-          muted: true,
-          track_sid: trackSid,
-        }),
-      }
-    )
-  }
-  return { muteParticipant }
-}

src/frontend/src/features/rooms/livekit/api/recordRoom.ts

@@ -1,56 +0,0 @@
-import { fetchServerApi } from './fetchServerApi'
-import { buildServerApiUrl } from './buildServerApiUrl'
-import { useRoomData } from '../hooks/useRoomData'
-import { useParams } from 'wouter'
-
-export const useRecordRoom = () => {
-  const data = useRoomData()
-  const { roomId: roomSlug } = useParams()
-
-  const recordRoom = () => {
-    if (!data || !data?.livekit) {
-      throw new Error('Room data is not available')
-    }
-    if (!roomSlug) {
-      throw new Error('Room ID is not available')
-    }
-    return fetchServerApi(
-      buildServerApiUrl(
-        data.livekit.url,
-        '/twirp/livekit.Egress/StartRoomCompositeEgress'
-      ),
-      data.livekit.token,
-      {
-        method: 'POST',
-        body: JSON.stringify({
-          room_name: data.livekit.room,
-          audio_only: true,
-          file_outputs: [
-            {
-              file_extension: 'ogg',
-              filepath: `{room_name}_{time}_${roomSlug}`,
-            },
-          ],
-        }),
-      }
-    )
-  }
-
-  const stopRecordingRoom = (egressId: string) => {
-    if (!data || !data?.livekit) {
-      throw new Error('Room data is not available')
-    }
-    return fetchServerApi(
-      buildServerApiUrl(data.livekit.url, '/twirp/livekit.Egress/StopEgress'),
-      data.livekit.token,
-      {
-        method: 'POST',
-        body: JSON.stringify({
-          egressId,
-        }),
-      }
-    )
-  }
-
-  return { recordRoom, stopRecordingRoom }
-}

src/frontend/src/features/rooms/livekit/components/Effects.tsx

@@ -1,191 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import { useLocalParticipant } from '@livekit/components-react'
-import { LocalVideoTrack } from 'livekit-client'
-import { Text, P, ToggleButton, Div, H } from '@/primitives'
-import { useTranslation } from 'react-i18next'
-import { HStack, styled, VStack } from '@/styled-system/jsx'
-import {
-  BackgroundBlur,
-  BackgroundOptions,
-  ProcessorWrapper,
-  BackgroundTransformer,
-} from '@livekit/track-processors'
-
-const Information = styled('div', {
-  base: {
-    backgroundColor: 'orange.50',
-    borderRadius: '4px',
-    padding: '0.75rem 0.75rem',
-    marginTop: '0.8rem',
-    alignItems: 'start',
-  },
-})
-
-enum BlurRadius {
-  NONE = 0,
-  LIGHT = 5,
-  NORMAL = 10,
-}
-
-export const Effects = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'effects' })
-  const { isCameraEnabled, cameraTrack, localParticipant } =
-    useLocalParticipant()
-  const videoRef = useRef<HTMLVideoElement>(null)
-  const [processorPending, setProcessorPending] = useState(false)
-
-  const localCameraTrack = cameraTrack?.track as LocalVideoTrack
-
-  const getProcessor = () => {
-    return localCameraTrack?.getProcessor() as ProcessorWrapper<BackgroundOptions>
-  }
-
-  const getBlurRadius = (): BlurRadius => {
-    const processor = getProcessor()
-    return (
-      (processor?.transformer as BackgroundTransformer)?.options?.blurRadius ||
-      BlurRadius.NONE
-    )
-  }
-
-  const toggleBlur = async (blurRadius: number) => {
-    if (!isCameraEnabled) await localParticipant.setCameraEnabled(true)
-    if (!localCameraTrack) return
-
-    setProcessorPending(true)
-
-    const processor = getProcessor()
-    const currentBlurRadius = getBlurRadius()
-
-    try {
-      if (blurRadius == currentBlurRadius && processor) {
-        await localCameraTrack.stopProcessor()
-      } else if (!processor) {
-        await localCameraTrack.setProcessor(BackgroundBlur(blurRadius))
-      } else {
-        await processor?.updateTransformerOptions({ blurRadius })
-      }
-    } catch (error) {
-      console.error('Error applying blur:', error)
-    } finally {
-      setProcessorPending(false)
-    }
-  }
-
-  useEffect(() => {
-    const videoElement = videoRef.current
-    if (!videoElement) return
-
-    const attachVideoTrack = async () => localCameraTrack?.attach(videoElement)
-    attachVideoTrack()
-
-    return () => {
-      if (!videoElement) return
-      localCameraTrack.detach(videoElement)
-    }
-  }, [localCameraTrack, isCameraEnabled])
-
-  const isSelected = (blurRadius: BlurRadius) => {
-    return isCameraEnabled && getBlurRadius() == blurRadius
-  }
-
-  const tooltipLabel = (blurRadius: BlurRadius) => {
-    return t(`blur.${isSelected(blurRadius) ? 'clear' : 'apply'}`)
-  }
-
-  return (
-    <VStack padding="0 1.5rem" overflowY="scroll">
-      {localCameraTrack && isCameraEnabled ? (
-        <video
-          ref={videoRef}
-          width="100%"
-          muted
-          style={{
-            transform: 'rotateY(180deg)',
-            minHeight: '175px',
-            borderRadius: '8px',
-          }}
-        />
-      ) : (
-        <div
-          style={{
-            width: '100%',
-            height: '174px',
-            display: 'flex',
-            backgroundColor: 'black',
-            justifyContent: 'center',
-            flexDirection: 'column',
-          }}
-        >
-          <P
-            style={{
-              color: 'white',
-              textAlign: 'center',
-              textWrap: 'balance',
-              marginBottom: 0,
-            }}
-          >
-            {t('activateCamera')}
-          </P>
-        </div>
-      )}
-      <Div
-        alignItems={'left'}
-        width={'100%'}
-        style={{
-          border: '1px solid #dadce0',
-          borderRadius: '8px',
-          margin: '0 .625rem',
-          padding: '0.5rem 1rem',
-        }}
-      >
-        <H
-          lvl={3}
-          style={{
-            marginBottom: '0.4rem',
-          }}
-        >
-          {t('heading')}
-        </H>
-        {ProcessorWrapper.isSupported ? (
-          <HStack>
-            <ToggleButton
-              size={'sm'}
-              legacyStyle
-              aria-label={tooltipLabel(BlurRadius.LIGHT)}
-              tooltip={tooltipLabel(BlurRadius.LIGHT)}
-              isDisabled={processorPending}
-              onPress={async () => await toggleBlur(BlurRadius.LIGHT)}
-              isSelected={isSelected(BlurRadius.LIGHT)}
-            >
-              {t('blur.light')}
-            </ToggleButton>
-            <ToggleButton
-              size={'sm'}
-              legacyStyle
-              aria-label={tooltipLabel(BlurRadius.NORMAL)}
-              tooltip={tooltipLabel(BlurRadius.NORMAL)}
-              isDisabled={processorPending}
-              onPress={async () => await toggleBlur(BlurRadius.NORMAL)}
-              isSelected={isSelected(BlurRadius.NORMAL)}
-            >
-              {t('blur.normal')}
-            </ToggleButton>
-          </HStack>
-        ) : (
-          <Text variant="sm">{t('notAvailable')}</Text>
-        )}
-        <Information>
-          <Text
-            variant="sm"
-            style={{
-              textWrap: 'balance',
-            }}
-          >
-            ⚠︎ {t('experimental')}
-          </Text>
-        </Information>
-      </Div>
-    </VStack>
-  )
-}

src/frontend/src/features/rooms/livekit/components/MutedMicIndicator.tsx

@@ -1,26 +0,0 @@
-import { useTrackMutedIndicator } from '@livekit/components-react'
-import { Participant, Track } from 'livekit-client'
-import Source = Track.Source
-import { Div } from '@/primitives'
-import { RiMicOffFill } from '@remixicon/react'
-
-export const MutedMicIndicator = ({
-  participant,
-}: {
-  participant: Participant
-}) => {
-  const { isMuted } = useTrackMutedIndicator({
-    participant: participant,
-    source: Source.Microphone,
-  })
-
-  if (!isMuted) {
-    return null
-  }
-
-  return (
-    <Div padding={0.25} backgroundColor="red" borderRadius="4px">
-      <RiMicOffFill size={16} color="white" />
-    </Div>
-  )
-}

src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx

@@ -6,6 +6,7 @@ import {
   ParticipantName,
   ParticipantTileProps,
   ScreenShareIcon,
+  TrackMutedIndicator,
   useEnsureTrackRef,
   useFeatureContext,
   useIsEncrypted,
@@ -24,10 +25,6 @@ import {
 } from '@livekit/components-core'
 import { Track } from 'livekit-client'
 import { ParticipantPlaceholder } from '@/features/rooms/livekit/components/ParticipantPlaceholder'
-import { RiHand } from '@remixicon/react'
-import { useRaisedHand } from '@/features/rooms/livekit/hooks/useRaisedHand'
-import { HStack } from '@/styled-system/jsx'
-import { MutedMicIndicator } from '@/features/rooms/livekit/components/MutedMicIndicator'
 
 export function TrackRefContextIfNeeded(
   props: React.PropsWithChildren<{
@@ -44,24 +41,19 @@ export function TrackRefContextIfNeeded(
   )
 }
 
-interface ParticipantTileExtendedProps extends ParticipantTileProps {
-  disableMetadata?: boolean
-}
-
 export const ParticipantTile: (
-  props: ParticipantTileExtendedProps & React.RefAttributes<HTMLDivElement>
+  props: ParticipantTileProps & React.RefAttributes<HTMLDivElement>
 ) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
   HTMLDivElement,
-  ParticipantTileExtendedProps
+  ParticipantTileProps
 >(function ParticipantTile(
   {
     trackRef,
     children,
     onParticipantClick,
     disableSpeakingIndicator,
-    disableMetadata,
     ...htmlProps
-  }: ParticipantTileExtendedProps,
+  }: ParticipantTileProps,
   ref
 ) {
   const trackReference = useEnsureTrackRef(trackRef)
@@ -92,10 +84,6 @@ export const ParticipantTile: (
     [trackReference, layoutContext]
   )
 
-  const { isHandRaised } = useRaisedHand({
-    participant: trackReference.participant,
-  })
-
   return (
     <div ref={ref} style={{ position: 'relative' }} {...elementProps}>
       <TrackRefContextIfNeeded trackRef={trackReference}>
@@ -124,56 +112,34 @@ export const ParticipantTile: (
                   participant={trackReference.participant}
                 />
               </div>
-              {!disableMetadata && (
-                <div className="lk-participant-metadata">
-                  <HStack gap={0.25}>
-                    <MutedMicIndicator
-                      participant={trackReference.participant}
-                    />
-                    <div
-                      className="lk-participant-metadata-item"
-                      style={{
-                        minHeight: '24px',
-                        backgroundColor: isHandRaised ? 'white' : undefined,
-                        color: isHandRaised ? 'black' : undefined,
-                        transition: 'background 200ms ease, color 400ms ease',
-                      }}
-                    >
-                      {trackReference.source === Track.Source.Camera ? (
-                        <>
-                          {isHandRaised && (
-                            <RiHand
-                              color="black"
-                              size={16}
-                              style={{
-                                marginInlineEnd: '.25rem', // fixme - match TrackMutedIndicator styling
-                                animationDuration: '300ms',
-                                animationName: 'wave_hand',
-                                animationIterationCount: '2',
-                              }}
-                            />
-                          )}
-                          {isEncrypted && (
-                            <LockLockedIcon
-                              style={{ marginRight: '0.25rem' }}
-                            />
-                          )}
-                          <ParticipantName />
-                        </>
-                      ) : (
-                        <>
-                          <ScreenShareIcon style={{ marginRight: '0.25rem' }} />
-                          <ParticipantName>&apos;s screen</ParticipantName>
-                        </>
+              <div className="lk-participant-metadata">
+                <div className="lk-participant-metadata-item">
+                  {trackReference.source === Track.Source.Camera ? (
+                    <>
+                      {isEncrypted && (
+                        <LockLockedIcon style={{ marginRight: '0.25rem' }} />
                       )}
-                    </div>
-                  </HStack>
-                  <ConnectionQualityIndicator className="lk-participant-metadata-item" />
+                      <TrackMutedIndicator
+                        trackRef={{
+                          participant: trackReference.participant,
+                          source: Track.Source.Microphone,
+                        }}
+                        show={'muted'}
+                      ></TrackMutedIndicator>
+                      <ParticipantName />
+                    </>
+                  ) : (
+                    <>
+                      <ScreenShareIcon style={{ marginRight: '0.25rem' }} />
+                      <ParticipantName>&apos;s screen</ParticipantName>
+                    </>
+                  )}
                 </div>
-              )}
+                <ConnectionQualityIndicator className="lk-participant-metadata-item" />
+              </div>
             </>
           )}
-          {!disableMetadata && <FocusToggle trackRef={trackReference} />}
+          <FocusToggle trackRef={trackReference} />
         </ParticipantContextIfNeeded>
       </TrackRefContextIfNeeded>
     </div>

src/frontend/src/features/rooms/livekit/components/SidePanel.tsx

@@ -1,131 +0,0 @@
-import { layoutStore } from '@/stores/layout'
-import { css } from '@/styled-system/css'
-import { Heading } from 'react-aria-components'
-import { text } from '@/primitives/Text'
-import { Box, Button, Div } from '@/primitives'
-import { RiCloseLine } from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-import { ParticipantsList } from './controls/Participants/ParticipantsList'
-import { useSidePanel } from '../hooks/useSidePanel'
-import { ReactNode } from 'react'
-import { Effects } from './Effects'
-import { Chat } from '../prefabs/Chat'
-
-type StyledSidePanelProps = {
-  title: string
-  children: ReactNode
-  onClose: () => void
-  isClosed: boolean
-  closeButtonTooltip: string
-}
-
-const StyledSidePanel = ({
-  title,
-  children,
-  onClose,
-  isClosed,
-  closeButtonTooltip,
-}: StyledSidePanelProps) => (
-  <Box
-    size="sm"
-    className={css({
-      overflow: 'hidden',
-      display: 'flex',
-      flexDirection: 'column',
-      margin: '1.5rem 1.5rem 1.5rem 0',
-      padding: 0,
-      gap: 0,
-      right: 0,
-      top: 0,
-      bottom: '80px',
-      width: '360px',
-      position: 'absolute',
-      transition: '.5s cubic-bezier(.4,0,.2,1) 5ms',
-    })}
-    style={{
-      transform: isClosed ? 'translateX(calc(360px + 1.5rem))' : 'none',
-    }}
-  >
-    <Heading
-      slot="title"
-      level={1}
-      className={text({ variant: 'h2' })}
-      style={{
-        paddingLeft: '1.5rem',
-        paddingTop: '1rem',
-        display: isClosed ? 'none' : undefined,
-      }}
-    >
-      {title}
-    </Heading>
-    <Div
-      position="absolute"
-      top="5"
-      right="5"
-      style={{
-        display: isClosed ? 'none' : undefined,
-      }}
-    >
-      <Button
-        invisible
-        size="xs"
-        onPress={onClose}
-        aria-label={closeButtonTooltip}
-        tooltip={closeButtonTooltip}
-      >
-        <RiCloseLine />
-      </Button>
-    </Div>
-    {children}
-  </Box>
-)
-
-type PanelProps = {
-  isOpen: boolean
-  children: React.ReactNode
-}
-
-const Panel = ({ isOpen, children }: PanelProps) => (
-  <div
-    style={{
-      display: isOpen ? 'inherit' : 'none',
-      flexDirection: 'column',
-      overflow: 'hidden',
-      flexGrow: 1,
-    }}
-  >
-    {children}
-  </div>
-)
-
-export const SidePanel = () => {
-  const {
-    activePanelId,
-    isParticipantsOpen,
-    isEffectsOpen,
-    isChatOpen,
-    isSidePanelOpen,
-  } = useSidePanel()
-  const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' })
-
-  return (
-    <StyledSidePanel
-      title={t(`heading.${activePanelId}`)}
-      onClose={() => (layoutStore.activePanelId = null)}
-      closeButtonTooltip={t('closeButton', {
-        content: t(`content.${activePanelId}`),
-      })}
-      isClosed={!isSidePanelOpen}
-    >
-      <Panel isOpen={isParticipantsOpen}>
-        <ParticipantsList />
-      </Panel>
-      <Panel isOpen={isEffectsOpen}>
-        <Effects />
-      </Panel>
-      <Panel isOpen={isChatOpen}>
-        <Chat />
-      </Panel>
-    </StyledSidePanel>
-  )
-}

src/frontend/src/features/rooms/livekit/components/chat/Entry.tsx

@@ -1,71 +0,0 @@
-import type { ReceivedChatMessage } from '@livekit/components-core'
-import * as React from 'react'
-import { css } from '@/styled-system/css'
-import { Text } from '@/primitives'
-import { MessageFormatter } from '@livekit/components-react'
-
-export interface ChatEntryProps extends React.HTMLAttributes<HTMLLIElement> {
-  entry: ReceivedChatMessage
-  hideMetadata?: boolean
-  messageFormatter?: MessageFormatter
-}
-
-export const ChatEntry: (
-  props: ChatEntryProps & React.RefAttributes<HTMLLIElement>
-) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
-  HTMLLIElement,
-  ChatEntryProps
->(function ChatEntry(
-  { entry, hideMetadata = false, messageFormatter, ...props }: ChatEntryProps,
-  ref
-) {
-  // Fixme - Livekit messageFormatter strips '\n' char
-  const formattedMessage = React.useMemo(() => {
-    return messageFormatter ? messageFormatter(entry.message) : entry.message
-  }, [entry.message, messageFormatter])
-  const time = new Date(entry.timestamp)
-  const locale = navigator ? navigator.language : 'en-US'
-
-  return (
-    <li
-      className={css({
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '0.25rem',
-      })}
-      ref={ref}
-      title={time.toLocaleTimeString(locale, { timeStyle: 'full' })}
-      data-lk-message-origin={entry.from?.isLocal ? 'local' : 'remote'}
-      {...props}
-    >
-      {!hideMetadata && (
-        <span
-          className={css({
-            display: 'flex',
-            gap: '0.5rem',
-            paddingTop: '0.75rem',
-          })}
-        >
-          <Text bold={true} variant="sm">
-            {entry.from?.name ?? entry.from?.identity}
-          </Text>
-          <Text variant="sm" className={css({ color: 'gray.700' })}>
-            {time.toLocaleTimeString(locale, { timeStyle: 'short' })}
-          </Text>
-        </span>
-      )}
-      <Text
-        variant="sm"
-        margin={false}
-        className={css({
-          '& .lk-chat-link': {
-            color: 'blue',
-            textDecoration: 'underline',
-          },
-        })}
-      >
-        {formattedMessage}
-      </Text>
-    </li>
-  )
-})

src/frontend/src/features/rooms/livekit/components/chat/Input.tsx

@@ -1,120 +0,0 @@
-import { Button } from '@/primitives'
-import { HStack } from '@/styled-system/jsx'
-import { RiSendPlane2Fill } from '@remixicon/react'
-import { useState, useEffect } from 'react'
-import { TextArea } from '@/primitives/TextArea'
-import { RefObject } from 'react'
-import { useTranslation } from 'react-i18next'
-
-const MAX_ROWS = 6
-
-interface ChatInputProps {
-  inputRef: RefObject<HTMLTextAreaElement>
-  onSubmit: (text: string) => void
-  isSending: boolean
-}
-
-export const ChatInput = ({
-  inputRef,
-  onSubmit,
-  isSending,
-}: ChatInputProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.chat.input' })
-  const [text, setText] = useState('')
-  const [rows, setRows] = useState(1)
-
-  const handleSubmit = () => {
-    onSubmit(text)
-    setText('')
-  }
-
-  const isDisabled = !text.trim() || isSending
-
-  const submitOnEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key !== 'Enter' || (e.key === 'Enter' && e.shiftKey)) return
-    e.preventDefault()
-    if (!isDisabled) handleSubmit()
-  }
-
-  useEffect(() => {
-    const resize = () => {
-      if (!inputRef.current) return
-
-      const textAreaLineHeight = 20 // Adjust this value based on your TextArea's line height
-      const previousRows = inputRef.current.rows
-      inputRef.current.rows = 1
-
-      const currentRows = Math.floor(
-        inputRef.current.scrollHeight / textAreaLineHeight
-      )
-
-      if (currentRows === previousRows) {
-        inputRef.current.rows = currentRows
-      }
-
-      if (currentRows >= MAX_ROWS) {
-        inputRef.current.rows = MAX_ROWS
-        inputRef.current.scrollTop = inputRef.current.scrollHeight
-      }
-
-      if (currentRows < MAX_ROWS) {
-        inputRef.current.style.overflowY = 'hidden'
-      } else {
-        inputRef.current.style.overflowY = 'auto'
-      }
-
-      setRows(currentRows < MAX_ROWS ? currentRows : MAX_ROWS)
-    }
-
-    resize()
-  }, [text, inputRef])
-
-  return (
-    <HStack
-      style={{
-        margin: '0.75rem 0 1.5rem',
-        padding: '0.5rem',
-        backgroundColor: '#f3f4f6',
-        borderRadius: 4,
-      }}
-    >
-      <TextArea
-        ref={inputRef}
-        onKeyDown={(e) => {
-          e.stopPropagation()
-          submitOnEnter(e)
-        }}
-        onKeyUp={(e) => e.stopPropagation()}
-        placeholder={t('textArea.placeholder')}
-        value={text}
-        onChange={(e) => {
-          setText(e.target.value)
-        }}
-        rows={rows || 1}
-        style={{
-          border: 'none',
-          resize: 'none',
-          height: 'auto',
-          minHeight: `34px`,
-          lineHeight: 1.25,
-          padding: '7px 10px',
-          overflowY: 'hidden',
-        }}
-        placeholderStyle={'strong'}
-        spellCheck={false}
-        maxLength={500}
-        aria-label={t('textArea.label')}
-      />
-      <Button
-        square
-        invisible
-        size="sm"
-        onPress={handleSubmit}
-        isDisabled={isDisabled}
-        aria-label={t('button.label')}
-      >
-        <RiSendPlane2Fill />
-      </Button>
-    </HStack>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx

@@ -1,18 +1,19 @@
 import { useTranslation } from 'react-i18next'
 import { RiChat1Line } from '@remixicon/react'
-import { useSnapshot } from 'valtio'
-import { css } from '@/styled-system/css'
 import { ToggleButton } from '@/primitives'
-import { chatStore } from '@/stores/chat'
-import { useSidePanel } from '../../hooks/useSidePanel'
+import { css } from '@/styled-system/css'
+import { useLayoutContext } from '@livekit/components-react'
+import { useSnapshot } from 'valtio'
+import { participantsStore } from '@/stores/participants'
 
 export const ChatToggle = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.chat' })
+  const { t } = useTranslation('rooms')
 
-  const chatSnap = useSnapshot(chatStore)
+  const { dispatch, state } = useLayoutContext().widget
+  const tooltipLabel = state?.showChat ? 'open' : 'closed'
 
-  const { isChatOpen, toggleChat } = useSidePanel()
-  const tooltipLabel = isChatOpen ? 'open' : 'closed'
+  const participantsSnap = useSnapshot(participantsStore)
+  const showParticipants = participantsSnap.showParticipants
 
   return (
     <div
@@ -24,15 +25,17 @@ export const ChatToggle = () => {
       <ToggleButton
         square
         legacyStyle
-        aria-label={t(tooltipLabel)}
-        tooltip={t(tooltipLabel)}
-        isSelected={isChatOpen}
-        onPress={() => toggleChat()}
-        data-attr={`controls-chat-${tooltipLabel}`}
+        aria-label={t(`controls.chat.${tooltipLabel}`)}
+        tooltip={t(`controls.chat.${tooltipLabel}`)}
+        isSelected={state?.showChat}
+        onPress={() => {
+          if (showParticipants) participantsStore.showParticipants = false
+          if (dispatch) dispatch({ msg: 'toggle_chat' })
+        }}
       >
         <RiChat1Line />
       </ToggleButton>
-      {!!chatSnap.unreadMessages && (
+      {!!state?.unreadMessages && (
         <div
           className={css({
             position: 'absolute',

src/frontend/src/features/rooms/livekit/components/controls/HandToggle.tsx

@@ -1,38 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { RiHand } from '@remixicon/react'
-import { ToggleButton } from '@/primitives'
-import { css } from '@/styled-system/css'
-import { useRoomContext } from '@livekit/components-react'
-import { useRaisedHand } from '@/features/rooms/livekit/hooks/useRaisedHand'
-
-export const HandToggle = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.hand' })
-
-  const room = useRoomContext()
-  const { isHandRaised, toggleRaisedHand } = useRaisedHand({
-    participant: room.localParticipant,
-  })
-
-  const tooltipLabel = isHandRaised ? 'lower' : 'raise'
-
-  return (
-    <div
-      className={css({
-        position: 'relative',
-        display: 'inline-block',
-      })}
-    >
-      <ToggleButton
-        square
-        legacyStyle
-        aria-label={t(tooltipLabel)}
-        tooltip={t(tooltipLabel)}
-        isSelected={isHandRaised}
-        onPress={() => toggleRaisedHand()}
-        data-attr={`controls-hand-${tooltipLabel}`}
-      >
-        <RiHand />
-      </ToggleButton>
-    </div>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/LeaveButton.tsx

@@ -1,37 +0,0 @@
-import { useConnectionState, useRoomContext } from '@livekit/components-react'
-import { Button } from '@/primitives'
-import { navigateTo } from '@/navigation/navigateTo'
-import { RiPhoneFill } from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-import { ConnectionState } from 'livekit-client'
-
-export const LeaveButton = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls' })
-  const room = useRoomContext()
-  const connectionState = useConnectionState(room)
-  return (
-    <Button
-      isDisabled={connectionState === ConnectionState.Disconnected}
-      variant={'danger'}
-      tooltip={t('leave')}
-      aria-label={t('leave')}
-      onPress={() => {
-        room
-          .disconnect(true)
-          .catch((e) =>
-            console.error('An error occurred while disconnecting:', e)
-          )
-          .finally(() => {
-            navigateTo('feedback')
-          })
-      }}
-      data-attr="controls-leave"
-    >
-      <RiPhoneFill
-        style={{
-          transform: 'rotate(135deg)',
-        }}
-      />
-    </Button>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx

@@ -1,16 +1,13 @@
 import { menuItemRecipe } from '@/primitives/menuItemRecipe'
 import {
-  RiAccountBoxLine,
-  RiMegaphoneLine,
+  RiFeedbackLine,
+  RiQuestionLine,
   RiSettings3Line,
 } from '@remixicon/react'
-import { MenuItem, Menu as RACMenu, Section } from 'react-aria-components'
+import { MenuItem, Menu as RACMenu } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { Dispatch, SetStateAction } from 'react'
-import { DialogState } from './OptionsButton'
-import { Separator } from '@/primitives/Separator'
-import { useSidePanel } from '../../../hooks/useSidePanel'
-import { RecordingMenuItem } from '@/features/rooms/livekit/components/controls/Options/RecordingMenuItem'
+import { DialogState } from '@/features/rooms/livekit/components/controls/Options/OptionsButton'
 
 // @todo try refactoring it to use MenuList component
 export const OptionsMenuItems = ({
@@ -18,8 +15,8 @@ export const OptionsMenuItems = ({
 }: {
   onOpenDialog: Dispatch<SetStateAction<DialogState>>
 }) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-  const { toggleEffects } = useSidePanel()
+  const { t } = useTranslation('rooms')
+
   return (
     <RACMenu
       style={{
@@ -27,34 +24,29 @@ export const OptionsMenuItems = ({
         width: '300px',
       }}
     >
-      <Section>
-        <MenuItem
-          onAction={() => toggleEffects()}
-          className={menuItemRecipe({ icon: true })}
-        >
-          <RiAccountBoxLine size={20} />
-          {t('effects')}
-        </MenuItem>
-        <RecordingMenuItem />
-      </Section>
-      <Separator />
-      <Section>
-        <MenuItem
-          href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
-          target="_blank"
-          className={menuItemRecipe({ icon: true })}
-        >
-          <RiMegaphoneLine size={20} />
-          {t('feedbacks')}
-        </MenuItem>
-        <MenuItem
-          className={menuItemRecipe({ icon: true })}
-          onAction={() => onOpenDialog('settings')}
-        >
-          <RiSettings3Line size={20} />
-          {t('settings')}
-        </MenuItem>
-      </Section>
+      <MenuItem
+        href="https://tchap.gouv.fr/#/room/!aGImQayAgBLjSBycpm:agent.dinum.tchap.gouv.fr?via=agent.dinum.tchap.gouv.fr"
+        target="_blank"
+        className={menuItemRecipe({ icon: true })}
+      >
+        <RiQuestionLine size={18} />
+        {t('options.items.support')}
+      </MenuItem>
+      <MenuItem
+        href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
+        target="_blank"
+        className={menuItemRecipe({ icon: true })}
+      >
+        <RiFeedbackLine size={18} />
+        {t('options.items.feedbacks')}
+      </MenuItem>
+      <MenuItem
+        className={menuItemRecipe({ icon: true })}
+        onAction={() => onOpenDialog('settings')}
+      >
+        <RiSettings3Line size={18} />
+        {t('options.items.settings')}
+      </MenuItem>
     </RACMenu>
   )
 }

src/frontend/src/features/rooms/livekit/components/controls/Options/RecordingMenuItem.tsx

@@ -1,52 +0,0 @@
-import { MenuItem } from 'react-aria-components'
-import { menuItemRecipe } from '@/primitives/menuItemRecipe.ts'
-import { RiPauseCircleLine, RiRecordCircleLine } from '@remixicon/react'
-import { useRecordRoom } from '@/features/rooms/livekit/api/recordRoom.ts'
-import { useState } from 'react'
-import { egressStore } from '@/stores/egress.ts'
-import { useSnapshot } from 'valtio'
-
-export const RecordingMenuItem = () => {
-  const { recordRoom, stopRecordingRoom } = useRecordRoom()
-
-  const egressSnap = useSnapshot(egressStore)
-  const egressId = egressSnap.egressId
-
-  const [isPending, setIsPending] = useState(false)
-
-  const handleAction = async () => {
-    if (egressId) {
-      setIsPending(true)
-      egressStore.egressIsStopping = true
-      const response = await stopRecordingRoom(egressId)
-      console.log(response)
-      egressStore.egressId = undefined
-      setIsPending(false)
-    } else {
-      setIsPending(true)
-      const response = await recordRoom()
-      egressStore.egressId = response['egress_id'] as string
-      setIsPending(false)
-    }
-  }
-
-  return (
-    <MenuItem
-      isDisabled={isPending}
-      className={menuItemRecipe({ icon: true })}
-      onAction={handleAction}
-    >
-      {egressId ? (
-        <>
-          <RiPauseCircleLine size={18} />
-          Arrêter l'enregistrement
-        </>
-      ) : (
-        <>
-          <RiRecordCircleLine size={18} />
-          Enregistrer la réunion
-        </>
-      )}
-    </MenuItem>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Participants/HandRaisedListItem.tsx

@@ -1,82 +0,0 @@
-import { css } from '@/styled-system/css'
-
-import { HStack } from '@/styled-system/jsx'
-import { Text } from '@/primitives/Text'
-import { useTranslation } from 'react-i18next'
-import { Avatar } from '@/components/Avatar'
-import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
-import { Participant } from 'livekit-client'
-import { isLocal } from '@/utils/livekit'
-import { RiHand } from '@remixicon/react'
-import { useLowerHandParticipant } from '@/features/rooms/livekit/api/lowerHandParticipant.ts'
-import { Button } from '@/primitives'
-
-type HandRaisedListItemProps = {
-  participant: Participant
-}
-
-export const HandRaisedListItem = ({
-  participant,
-}: HandRaisedListItemProps) => {
-  const { t } = useTranslation('rooms')
-  const name = participant.name || participant.identity
-
-  const { lowerHandParticipant } = useLowerHandParticipant()
-
-  return (
-    <HStack
-      role="listitem"
-      justify="space-between"
-      key={participant.identity}
-      id={participant.identity}
-      className={css({
-        padding: '0.25rem 0',
-        width: 'full',
-      })}
-    >
-      <HStack>
-        <Avatar name={name} bgColor={getParticipantColor(participant)} />
-        <Text
-          variant={'sm'}
-          className={css({
-            userSelect: 'none',
-            cursor: 'default',
-            display: 'flex',
-          })}
-        >
-          <span
-            className={css({
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              maxWidth: '120px',
-              display: 'block',
-            })}
-          >
-            {name}
-          </span>
-          {isLocal(participant) && (
-            <span
-              className={css({
-                marginLeft: '.25rem',
-                whiteSpace: 'nowrap',
-              })}
-            >
-              ({t('participants.you')})
-            </span>
-          )}
-        </Text>
-      </HStack>
-      <Button
-        square
-        invisible
-        size="sm"
-        onPress={() => lowerHandParticipant(participant)}
-        tooltip={t('participants.lowerParticipantHand', { name })}
-        data-attr="participants-lower-hand"
-      >
-        <RiHand />
-      </Button>
-    </HStack>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Participants/LowerAllHandsButton.tsx

@@ -1,27 +0,0 @@
-import { Button } from '@/primitives'
-import { useLowerHandParticipants } from '@/features/rooms/livekit/api/lowerHandParticipants'
-import { useTranslation } from 'react-i18next'
-import { Participant } from 'livekit-client'
-
-type LowerAllHandsButtonProps = {
-  participants: Array<Participant>
-}
-
-export const LowerAllHandsButton = ({
-  participants,
-}: LowerAllHandsButtonProps) => {
-  const { lowerHandParticipants } = useLowerHandParticipants()
-  const { t } = useTranslation('rooms')
-  return (
-    <Button
-      aria-label={t('participants.lowerParticipantsHand')}
-      size="sm"
-      fullWidth
-      variant="text"
-      onPress={() => lowerHandParticipants(participants)}
-      data-attr="participants-lower-hands"
-    >
-      {t('participants.lowerParticipantsHand')}
-    </Button>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx

@@ -1,163 +0,0 @@
-import { css } from '@/styled-system/css'
-
-import { HStack } from '@/styled-system/jsx'
-import { Text } from '@/primitives/Text'
-import { useTranslation } from 'react-i18next'
-import { Avatar } from '@/components/Avatar'
-import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
-import { Participant, Track } from 'livekit-client'
-import { isLocal } from '@/utils/livekit'
-import {
-  useIsSpeaking,
-  useTrackMutedIndicator,
-} from '@livekit/components-react'
-import Source = Track.Source
-import { RiMicFill, RiMicOffFill } from '@remixicon/react'
-import { Button, Dialog, P } from '@/primitives'
-import { useState } from 'react'
-import { useMuteParticipant } from '@/features/rooms/livekit/api/muteParticipant'
-
-const MuteAlertDialog = ({
-  isOpen,
-  onClose,
-  onSubmit,
-  name,
-}: {
-  isOpen: boolean
-  onClose: () => void
-  onSubmit: () => void
-  name: string
-}) => {
-  const { t } = useTranslation('rooms')
-  return (
-    <Dialog isOpen={isOpen} role="alertdialog">
-      <P>{t('participants.muteParticipantAlert.description', { name })}</P>
-      <HStack gap={1}>
-        <Button variant="text" size="sm" onPress={onClose}>
-          {t('participants.muteParticipantAlert.cancel')}
-        </Button>
-        <Button variant="text" size="sm" onPress={onSubmit}>
-          {t('participants.muteParticipantAlert.confirm')}
-        </Button>
-      </HStack>
-    </Dialog>
-  )
-}
-
-type MicIndicatorProps = {
-  participant: Participant
-}
-
-const MicIndicator = ({ participant }: MicIndicatorProps) => {
-  const { t } = useTranslation('rooms')
-  const { muteParticipant } = useMuteParticipant()
-  const { isMuted } = useTrackMutedIndicator({
-    participant: participant,
-    source: Source.Microphone,
-  })
-  const isSpeaking = useIsSpeaking(participant)
-  const [isAlertOpen, setIsAlertOpen] = useState(false)
-  const name = participant.name || participant.identity
-
-  return (
-    <>
-      <Button
-        square
-        invisible
-        size="sm"
-        tooltip={
-          isLocal(participant)
-            ? t('participants.muteYourself')
-            : t('participants.muteParticipant', {
-                name,
-              })
-        }
-        isDisabled={isMuted}
-        onPress={() =>
-          !isMuted && isLocal(participant)
-            ? muteParticipant(participant)
-            : setIsAlertOpen(true)
-        }
-        data-attr="participants-mute"
-      >
-        {isMuted ? (
-          <RiMicOffFill color={'gray'} />
-        ) : (
-          <RiMicFill
-            style={{
-              animation: isSpeaking ? 'pulse_mic 800ms infinite' : undefined,
-            }}
-          />
-        )}
-      </Button>
-      <MuteAlertDialog
-        isOpen={isAlertOpen}
-        onSubmit={() =>
-          muteParticipant(participant).then(() => setIsAlertOpen(false))
-        }
-        onClose={() => setIsAlertOpen(false)}
-        name={name}
-      />
-    </>
-  )
-}
-
-type ParticipantListItemProps = {
-  participant: Participant
-}
-
-export const ParticipantListItem = ({
-  participant,
-}: ParticipantListItemProps) => {
-  const { t } = useTranslation('rooms')
-  const name = participant.name || participant.identity
-  return (
-    <HStack
-      role="listitem"
-      justify="space-between"
-      key={participant.identity}
-      id={participant.identity}
-      className={css({
-        padding: '0.25rem 0',
-        width: 'full',
-      })}
-    >
-      <HStack>
-        <Avatar name={name} bgColor={getParticipantColor(participant)} />
-        <Text
-          variant={'sm'}
-          className={css({
-            userSelect: 'none',
-            cursor: 'default',
-            display: 'flex',
-          })}
-        >
-          <span
-            className={css({
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              maxWidth: '120px',
-              display: 'block',
-            })}
-          >
-            {name}
-          </span>
-          {isLocal(participant) && (
-            <span
-              className={css({
-                marginLeft: '.25rem',
-                whiteSpace: 'nowrap',
-              })}
-            >
-              ({t('participants.you')})
-            </span>
-          )}
-        </Text>
-      </HStack>
-      <HStack>
-        <MicIndicator participant={participant} />
-      </HStack>
-    </HStack>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsCollapsableList.tsx

@@ -1,109 +0,0 @@
-import { useState } from 'react'
-import { css } from '@/styled-system/css'
-import { ToggleButton } from 'react-aria-components'
-import { HStack, styled, VStack } from '@/styled-system/jsx'
-import { RiArrowUpSLine } from '@remixicon/react'
-import { Participant } from 'livekit-client'
-import { useTranslation } from 'react-i18next'
-
-const ToggleHeader = styled(ToggleButton, {
-  base: {
-    minHeight: '40px', //fixme hardcoded value
-    paddingRight: '.5rem',
-    cursor: 'pointer',
-    display: 'flex',
-    justifyContent: 'space-between',
-    width: '100%',
-    alignItems: 'center',
-    transition: 'background 200ms',
-    borderTopRadius: '7px',
-    '&[data-hovered]': {
-      backgroundColor: '#f5f5f5',
-    },
-  },
-})
-
-const Container = styled('div', {
-  base: {
-    border: '1px solid #dadce0',
-    borderRadius: '8px',
-    margin: '0 .625rem',
-  },
-})
-
-const ListContainer = styled(VStack, {
-  base: {
-    borderTop: '1px solid #dadce0',
-    alignItems: 'start',
-    overflowY: 'scroll',
-    overflowX: 'hidden',
-    minHeight: 0,
-    flexGrow: 1,
-    display: 'flex',
-    paddingY: '0.5rem',
-    paddingX: '1rem',
-    gap: 0,
-  },
-})
-
-type ParticipantsCollapsableListProps = {
-  heading: string
-  participants: Array<Participant>
-  renderParticipant: (participant: Participant) => JSX.Element
-  action?: () => JSX.Element
-}
-
-export const ParticipantsCollapsableList = ({
-  heading,
-  participants,
-  renderParticipant,
-  action,
-}: ParticipantsCollapsableListProps) => {
-  const { t } = useTranslation('rooms')
-  const [isOpen, setIsOpen] = useState(true)
-  const label = t(`participants.collapsable.${isOpen ? 'close' : 'open'}`, {
-    name: heading,
-  })
-  return (
-    <Container>
-      <ToggleHeader
-        isSelected={isOpen}
-        aria-label={label}
-        onPress={() => setIsOpen(!isOpen)}
-        style={{
-          borderRadius: !isOpen ? '7px' : undefined,
-        }}
-      >
-        <HStack
-          justify="space-between"
-          className={css({
-            margin: '0 1.25rem',
-            width: '100%',
-          })}
-        >
-          <div
-            className={css({
-              fontSize: '1rem',
-            })}
-          >
-            {heading}
-          </div>
-          <div>{participants?.length || 0}</div>
-        </HStack>
-        <RiArrowUpSLine
-          size={32}
-          style={{
-            transform: isOpen ? 'rotate(-180deg)' : undefined,
-            transition: 'transform 200ms',
-          }}
-        />
-      </ToggleHeader>
-      {isOpen && (
-        <ListContainer>
-          {action && action()}
-          {participants.map((participant) => renderParticipant(participant))}
-        </ListContainer>
-      )}
-    </Container>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx

@@ -1,76 +1,136 @@
 import { css } from '@/styled-system/css'
 import { useParticipants } from '@livekit/components-react'
 
-import { Div, H } from '@/primitives'
+import { Heading } from 'react-aria-components'
+import { Box, Button, Div } from '@/primitives'
+import { HStack, VStack } from '@/styled-system/jsx'
+import { Text, text } from '@/primitives/Text'
+import { RiCloseLine } from '@remixicon/react'
+import { capitalize } from '@/utils/capitalize'
+import { participantsStore } from '@/stores/participants'
 import { useTranslation } from 'react-i18next'
-import { ParticipantListItem } from '../../controls/Participants/ParticipantListItem'
-import { ParticipantsCollapsableList } from '../../controls/Participants/ParticipantsCollapsableList'
-import { HandRaisedListItem } from '../../controls/Participants/HandRaisedListItem'
-import { LowerAllHandsButton } from '../../controls/Participants/LowerAllHandsButton'
+import { allParticipantRoomEvents } from '@/features/rooms/livekit/constants/events'
+import { Avatar } from '@/components/Avatar'
+import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
 
 // TODO: Optimize rendering performance, especially for longer participant lists, even though they are generally short.
 export const ParticipantsList = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'participants' })
+  const { t } = useTranslation('rooms')
 
   // Preferred using the 'useParticipants' hook rather than the separate remote and local hooks,
   // because the 'useLocalParticipant' hook does not update the participant's information when their
   // metadata/name changes. The LiveKit team has marked this as a TODO item in the code.
-  const participants = useParticipants()
+  const participants = useParticipants({
+    updateOnlyOn: allParticipantRoomEvents,
+  })
 
-  const sortedRemoteParticipants = participants
+  const formattedParticipants = participants.map((participant) => ({
+    name: participant.name || participant.identity,
+    id: participant.identity,
+    color: getParticipantColor(participant),
+  }))
+
+  const sortedRemoteParticipants = formattedParticipants
     .slice(1)
-    .sort((participantA, participantB) => {
-      const nameA = participantA.name || participantA.identity
-      const nameB = participantB.name || participantB.identity
-      return nameA.localeCompare(nameB)
-    })
+    .sort((a, b) => a.name.localeCompare(b.name))
 
-  const sortedParticipants = [
-    participants[0], // first participant returned by the hook, is always the local one
+  const allParticipants = [
+    formattedParticipants[0], // first participant returned by the hook, is always the local one
     ...sortedRemoteParticipants,
   ]
 
-  const raisedHandParticipants = participants.filter((participant) => {
-    const data = JSON.parse(participant.metadata || '{}')
-    return data.raised
-  })
-
   // TODO - extract inline styling in a centralized styling file, and avoid magic numbers
   return (
-    <Div overflowY="scroll">
-      <H
-        lvl={2}
-        className={css({
-          fontSize: '0.875rem',
-          fontWeight: 'bold',
-          color: '#5f6368',
-          padding: '0 1.5rem',
-          marginBottom: '0.83em',
-        })}
-      >
-        {t('subheading').toUpperCase()}
-      </H>
-      {raisedHandParticipants.length > 0 && (
-        <Div marginBottom=".9375rem">
-          <ParticipantsCollapsableList
-            heading={t('raisedHands')}
-            participants={raisedHandParticipants}
-            renderParticipant={(participant) => (
-              <HandRaisedListItem participant={participant} />
-            )}
-            action={() => (
-              <LowerAllHandsButton participants={raisedHandParticipants} />
-            )}
-          />
-        </Div>
+    <Box
+      size="sm"
+      minWidth="300px"
+      className={css({
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        margin: '1.5rem 1.5rem 1.5rem 0',
+      })}
+    >
+      <Heading slot="title" level={3} className={text({ variant: 'h2' })}>
+        <span>{t('participants.heading')}</span>{' '}
+        <span
+          className={css({
+            marginLeft: '0.75rem',
+            fontWeight: 'normal',
+            fontSize: '1rem',
+          })}
+        >
+          {participants?.length}
+        </span>
+      </Heading>
+      <Div position="absolute" top="5" right="5">
+        <Button
+          invisible
+          size="xs"
+          onPress={() => (participantsStore.showParticipants = false)}
+          aria-label={t('participants.closeButton')}
+          tooltip={t('participants.closeButton')}
+        >
+          <RiCloseLine />
+        </Button>
+      </Div>
+      {participants?.length > 0 && (
+        <VStack
+          role="list"
+          className={css({
+            alignItems: 'start',
+            gap: 'none',
+            overflowY: 'scroll',
+            overflowX: 'hidden',
+            minHeight: 0,
+            flexGrow: 1,
+            display: 'flex',
+          })}
+        >
+          {allParticipants.map((participant, index) => (
+            <HStack
+              role="listitem"
+              key={participant.id}
+              id={participant.id}
+              className={css({
+                padding: '0.25rem 0',
+              })}
+            >
+              <Avatar name={participant.name} bgColor={participant.color} />
+              <Text
+                variant={'sm'}
+                className={css({
+                  userSelect: 'none',
+                  cursor: 'default',
+                  display: 'flex',
+                })}
+              >
+                <span
+                  className={css({
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    maxWidth: '120px',
+                    display: 'block',
+                  })}
+                >
+                  {capitalize(participant.name)}
+                </span>
+                {index === 0 && (
+                  <span
+                    className={css({
+                      marginLeft: '.25rem',
+                      whiteSpace: 'nowrap',
+                    })}
+                  >
+                    ({t('participants.you')})
+                  </span>
+                )}
+              </Text>
+            </HStack>
+          ))}
+        </VStack>
       )}
-      <ParticipantsCollapsableList
-        heading={t('contributors')}
-        participants={sortedParticipants}
-        renderParticipant={(participant) => (
-          <ParticipantListItem participant={participant} />
-        )}
-      />
-    </Div>
+    </Box>
   )
 }

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx

@@ -2,11 +2,14 @@ import { useTranslation } from 'react-i18next'
 import { RiGroupLine, RiInfinityLine } from '@remixicon/react'
 import { ToggleButton } from '@/primitives'
 import { css } from '@/styled-system/css'
-import { useParticipants } from '@livekit/components-react'
-import { useSidePanel } from '../../../hooks/useSidePanel'
+import { useLayoutContext, useParticipants } from '@livekit/components-react'
+import { useSnapshot } from 'valtio'
+import { participantsStore } from '@/stores/participants'
 
 export const ParticipantsToggle = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.participants' })
+  const { t } = useTranslation('rooms')
+
+  const { dispatch, state } = useLayoutContext().widget
 
   /**
    * Context could not be used due to inconsistent refresh behavior.
@@ -16,9 +19,10 @@ export const ParticipantsToggle = () => {
   const participants = useParticipants()
   const numParticipants = participants?.length
 
-  const { isParticipantsOpen, toggleParticipants } = useSidePanel()
+  const participantsSnap = useSnapshot(participantsStore)
+  const showParticipants = participantsSnap.showParticipants
 
-  const tooltipLabel = isParticipantsOpen ? 'open' : 'closed'
+  const tooltipLabel = showParticipants ? 'open' : 'closed'
 
   return (
     <div
@@ -30,11 +34,13 @@ export const ParticipantsToggle = () => {
       <ToggleButton
         square
         legacyStyle
-        aria-label={t(tooltipLabel)}
-        tooltip={t(tooltipLabel)}
-        isSelected={isParticipantsOpen}
-        onPress={() => toggleParticipants()}
-        data-attr={`controls-participants-${tooltipLabel}`}
+        aria-label={t(`controls.participants.${tooltipLabel}`)}
+        tooltip={t(`controls.participants.${tooltipLabel}`)}
+        isSelected={showParticipants}
+        onPress={() => {
+          if (dispatch && state?.showChat) dispatch({ msg: 'toggle_chat' })
+          participantsStore.showParticipants = !showParticipants
+        }}
       >
         <RiGroupLine />
       </ToggleButton>

src/frontend/src/features/rooms/livekit/components/controls/ScreenShareToggle.tsx

@@ -1,56 +0,0 @@
-import { Div, ToggleButton } from '@/primitives'
-import { RiArrowUpLine, RiCloseFill, RiRectangleLine } from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-import { useTrackToggle, UseTrackToggleProps } from '@livekit/components-react'
-import { Track } from 'livekit-client'
-import React from 'react'
-
-export const ScreenShareToggle = (
-  props: Omit<
-    UseTrackToggleProps<Track.Source.ScreenShare>,
-    'source' | 'captureOptions'
-  >
-) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.screenShare' })
-  const { buttonProps, enabled } = useTrackToggle({
-    ...props,
-    source: Track.Source.ScreenShare,
-    captureOptions: { audio: true, selfBrowserSurface: 'include' },
-  })
-
-  const tooltipLabel = enabled ? 'stop' : 'start'
-  const Icon = enabled ? RiCloseFill : RiArrowUpLine
-
-  // fixme - remove ToggleButton custom styles when we design a proper icon
-  return (
-    <ToggleButton
-      isSelected={enabled}
-      square
-      legacyStyle
-      tooltip={t(tooltipLabel)}
-      onPress={(e) =>
-        buttonProps.onClick?.(
-          e as unknown as React.MouseEvent<HTMLButtonElement, MouseEvent>
-        )
-      }
-      style={{
-        maxWidth: '46px',
-        maxHeight: '46px',
-      }}
-      data-attr={`controls-screenshare-${tooltipLabel}`}
-    >
-      <Div position="relative">
-        <RiRectangleLine size={28} />
-        <Icon
-          size={16}
-          style={{
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-          }}
-        />
-      </Div>
-    </ToggleButton>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx

@@ -1,114 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import {
-  useMediaDeviceSelect,
-  useTrackToggle,
-  UseTrackToggleProps,
-} from '@livekit/components-react'
-import { HStack } from '@/styled-system/jsx'
-import { Button, Menu, MenuList } from '@/primitives'
-import {
-  RemixiconComponentType,
-  RiArrowDownSLine,
-  RiMicLine,
-  RiMicOffLine,
-  RiVideoOffLine,
-  RiVideoOnLine,
-} from '@remixicon/react'
-import { Track } from 'livekit-client'
-
-import { Shortcut } from '@/features/shortcuts/types'
-
-import { ToggleDevice } from '@/features/rooms/livekit/components/controls/ToggleDevice.tsx'
-
-export type ToggleSource = Exclude<
-  Track.Source,
-  Track.Source.ScreenShareAudio | Track.Source.Unknown
->
-
-type SelectToggleSource = Exclude<ToggleSource, Track.Source.ScreenShare>
-
-export type SelectToggleDeviceConfig = {
-  kind: MediaDeviceKind
-  iconOn: RemixiconComponentType
-  iconOff: RemixiconComponentType
-  shortcut?: Shortcut
-  longPress?: Shortcut
-}
-
-type SelectToggleDeviceConfigMap = {
-  [key in SelectToggleSource]: SelectToggleDeviceConfig
-}
-
-const selectToggleDeviceConfig: SelectToggleDeviceConfigMap = {
-  [Track.Source.Microphone]: {
-    kind: 'audioinput',
-    iconOn: RiMicLine,
-    iconOff: RiMicOffLine,
-    shortcut: {
-      key: 'd',
-      ctrlKey: true,
-    },
-    longPress: {
-      key: 'Space',
-    },
-  },
-  [Track.Source.Camera]: {
-    kind: 'videoinput',
-    iconOn: RiVideoOnLine,
-    iconOff: RiVideoOffLine,
-    shortcut: {
-      key: 'e',
-      ctrlKey: true,
-    },
-  },
-}
-
-type SelectToggleDeviceProps<T extends ToggleSource> =
-  UseTrackToggleProps<T> & {
-    onActiveDeviceChange: (deviceId: string) => void
-    source: SelectToggleSource
-  }
-
-export const SelectToggleDevice = <T extends ToggleSource>({
-  onActiveDeviceChange,
-  ...props
-}: SelectToggleDeviceProps<T>) => {
-  const config = selectToggleDeviceConfig[props.source]
-  if (!config) {
-    throw new Error('Invalid source')
-  }
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
-  const trackProps = useTrackToggle(props)
-
-  const { devices, activeDeviceId, setActiveMediaDevice } =
-    useMediaDeviceSelect({ kind: config.kind })
-
-  const selectLabel = t('choose', { keyPrefix: `join.${config.kind}` })
-
-  return (
-    <HStack gap={0}>
-      <ToggleDevice {...trackProps} config={config} />
-      <Menu>
-        <Button
-          tooltip={selectLabel}
-          aria-label={selectLabel}
-          groupPosition="right"
-          square
-        >
-          <RiArrowDownSLine />
-        </Button>
-        <MenuList
-          items={devices.map((d) => ({
-            value: d.deviceId,
-            label: d.label,
-          }))}
-          selectedItem={activeDeviceId}
-          onAction={(value) => {
-            setActiveMediaDevice(value as string)
-            onActiveDeviceChange(value as string)
-          }}
-        />
-      </Menu>
-    </HStack>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/ToggleDevice.tsx

@@ -1,71 +0,0 @@
-import { ToggleButton } from '@/primitives'
-import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
-import { useMemo, useState } from 'react'
-import { appendShortcutLabel } from '@/features/shortcuts/utils'
-import { useTranslation } from 'react-i18next'
-import { SelectToggleDeviceConfig } from './SelectToggleDevice'
-import useLongPress from '@/features/shortcuts/useLongPress'
-import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
-import { useIsSpeaking, useLocalParticipant } from '@livekit/components-react'
-
-export type ToggleDeviceProps = {
-  enabled: boolean
-  toggle: () => void
-  config: SelectToggleDeviceConfig
-}
-
-export const ToggleDevice = ({
-  config,
-  enabled,
-  toggle,
-}: ToggleDeviceProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
-
-  const { kind, shortcut, iconOn, iconOff, longPress } = config
-
-  const [pushToTalk, setPushToTalk] = useState(false)
-
-  const onKeyDown = () => {
-    if (pushToTalk || enabled) return
-    toggle()
-    setPushToTalk(true)
-  }
-  const onKeyUp = () => {
-    if (!pushToTalk) return
-    toggle()
-    setPushToTalk(false)
-  }
-
-  useRegisterKeyboardShortcut({ shortcut, handler: toggle })
-  useLongPress({ keyCode: longPress?.key, onKeyDown, onKeyUp })
-
-  const toggleLabel = useMemo(() => {
-    const label = t(enabled ? 'disable' : 'enable', {
-      keyPrefix: `join.${kind}`,
-    })
-    return shortcut ? appendShortcutLabel(label, shortcut) : label
-  }, [enabled, kind, shortcut, t])
-
-  const Icon = enabled ? iconOn : iconOff
-
-  const { localParticipant } = useLocalParticipant()
-  const isSpeaking = useIsSpeaking(localParticipant)
-
-  if (kind === 'audioinput' && pushToTalk) {
-    return <ActiveSpeaker isSpeaking={isSpeaking} pushToTalk />
-  }
-
-  return (
-    <ToggleButton
-      isSelected={enabled}
-      variant={enabled ? undefined : 'danger'}
-      toggledStyles={false}
-      onPress={() => toggle()}
-      aria-label={toggleLabel}
-      tooltip={toggleLabel}
-      groupPosition="left"
-    >
-      <Icon />
-    </ToggleButton>
-  )
-}

src/frontend/src/features/rooms/livekit/constants/events.ts

@@ -0,0 +1,33 @@
+import { RoomEvent } from 'livekit-client'
+
+// Issue: 'allRemoteParticipantRoomEvents' is not exposed or importable. One event is missing
+// to trigger the real-time update of participants when they change their name.
+// This code is duplicated from LiveKit.
+export const allRemoteParticipantRoomEvents = [
+  RoomEvent.ConnectionStateChanged,
+  RoomEvent.RoomMetadataChanged,
+
+  RoomEvent.ActiveSpeakersChanged,
+  RoomEvent.ConnectionQualityChanged,
+
+  RoomEvent.ParticipantConnected,
+  RoomEvent.ParticipantDisconnected,
+  RoomEvent.ParticipantPermissionsChanged,
+  RoomEvent.ParticipantMetadataChanged,
+  RoomEvent.ParticipantNameChanged, // This element is missing in LiveKit and causes problems
+
+  RoomEvent.TrackMuted,
+  RoomEvent.TrackUnmuted,
+  RoomEvent.TrackPublished,
+  RoomEvent.TrackUnpublished,
+  RoomEvent.TrackStreamStateChanged,
+  RoomEvent.TrackSubscriptionFailed,
+  RoomEvent.TrackSubscriptionPermissionChanged,
+  RoomEvent.TrackSubscriptionStatusChanged,
+]
+
+export const allParticipantRoomEvents = [
+  ...allRemoteParticipantRoomEvents,
+  RoomEvent.LocalTrackPublished,
+  RoomEvent.LocalTrackUnpublished,
+]

src/frontend/src/features/rooms/livekit/hooks/useRaisedHand.ts

@@ -1,23 +0,0 @@
-import { LocalParticipant, Participant } from 'livekit-client'
-import { useParticipantInfo } from '@livekit/components-react'
-import { isLocal } from '@/utils/livekit'
-
-type useRaisedHandProps = {
-  participant: Participant
-}
-
-export function useRaisedHand({ participant }: useRaisedHandProps) {
-  // fixme - refactor this part to rely on attributes
-  const { metadata } = useParticipantInfo({ participant })
-  const parsedMetadata = JSON.parse(metadata || '{}')
-
-  const toggleRaisedHand = () => {
-    if (isLocal(participant)) {
-      parsedMetadata.raised = !parsedMetadata.raised
-      const localParticipant = participant as LocalParticipant
-      localParticipant.setMetadata(JSON.stringify(parsedMetadata))
-    }
-  }
-
-  return { isHandRaised: parsedMetadata.raised, toggleRaisedHand }
-}

src/frontend/src/features/rooms/livekit/hooks/useRoomData.ts

@@ -1,12 +0,0 @@
-import { ApiRoom } from '@/features/rooms/api/ApiRoom'
-import { useRoomContext } from '@livekit/components-react'
-import { useParams } from 'wouter'
-import { keys } from '@/api/queryKeys'
-import { queryClient } from '@/api/queryClient'
-
-export const useRoomData = (): ApiRoom | undefined => {
-  const room = useRoomContext()
-  const { roomId } = useParams()
-  const queryKey = [keys.room, roomId, room.localParticipant.name]
-  return queryClient.getQueryData<ApiRoom>(queryKey)
-}

src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts

@@ -1,41 +0,0 @@
-import { useSnapshot } from 'valtio'
-import { layoutStore } from '@/stores/layout'
-
-export enum PanelId {
-  PARTICIPANTS = 'participants',
-  EFFECTS = 'effects',
-  CHAT = 'chat',
-}
-
-export const useSidePanel = () => {
-  const layoutSnap = useSnapshot(layoutStore)
-  const activePanelId = layoutSnap.activePanelId
-
-  const isParticipantsOpen = activePanelId == PanelId.PARTICIPANTS
-  const isEffectsOpen = activePanelId == PanelId.EFFECTS
-  const isChatOpen = activePanelId == PanelId.CHAT
-  const isSidePanelOpen = !!activePanelId
-
-  const toggleParticipants = () => {
-    layoutStore.activePanelId = isParticipantsOpen ? null : PanelId.PARTICIPANTS
-  }
-
-  const toggleChat = () => {
-    layoutStore.activePanelId = isChatOpen ? null : PanelId.CHAT
-  }
-
-  const toggleEffects = () => {
-    layoutStore.activePanelId = isEffectsOpen ? null : PanelId.EFFECTS
-  }
-
-  return {
-    activePanelId,
-    toggleParticipants,
-    toggleChat,
-    toggleEffects,
-    isChatOpen,
-    isParticipantsOpen,
-    isEffectsOpen,
-    isSidePanelOpen,
-  }
-}

src/frontend/src/features/rooms/livekit/prefabs/Chat.tsx

@@ -1,134 +0,0 @@
-import type { ChatMessage, ChatOptions } from '@livekit/components-core'
-import * as React from 'react'
-import {
-  formatChatMessageLinks,
-  useChat,
-  useParticipants,
-} from '@livekit/components-react'
-import { useTranslation } from 'react-i18next'
-import { useSnapshot } from 'valtio'
-import { chatStore } from '@/stores/chat'
-import { Div, Text } from '@/primitives'
-import { ChatInput } from '../components/chat/Input'
-import { ChatEntry } from '../components/chat/Entry'
-import { useSidePanel } from '../hooks/useSidePanel'
-
-export interface ChatProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    ChatOptions {}
-
-/**
- * The Chat component adds a basis chat functionality to the LiveKit room. The messages are distributed to all participants
- * in the room. Only users who are in the room at the time of dispatch will receive the message.
- */
-export function Chat({ ...props }: ChatProps) {
-  const { t } = useTranslation('rooms', { keyPrefix: 'chat' })
-
-  const inputRef = React.useRef<HTMLTextAreaElement>(null)
-  const ulRef = React.useRef<HTMLUListElement>(null)
-
-  const { send, chatMessages, isSending } = useChat()
-
-  const { isChatOpen } = useSidePanel()
-  const chatSnap = useSnapshot(chatStore)
-
-  // Use useParticipants hook to trigger a re-render when the participant list changes.
-  const participants = useParticipants()
-
-  const lastReadMsgAt = React.useRef<ChatMessage['timestamp']>(0)
-
-  async function handleSubmit(text: string) {
-    if (!send || !text) return
-    await send(text)
-    inputRef?.current?.focus()
-  }
-
-  React.useEffect(() => {
-    if (chatMessages.length > 0 && ulRef.current) {
-      ulRef.current?.scrollTo({ top: ulRef.current.scrollHeight })
-    }
-  }, [ulRef, chatMessages])
-
-  React.useEffect(() => {
-    if (chatMessages.length === 0) {
-      return
-    }
-    if (
-      isChatOpen &&
-      lastReadMsgAt.current !== chatMessages[chatMessages.length - 1]?.timestamp
-    ) {
-      lastReadMsgAt.current = chatMessages[chatMessages.length - 1]?.timestamp
-      chatStore.unreadMessages = 0
-      return
-    }
-
-    const unreadMessageCount = chatMessages.filter(
-      (msg) => !lastReadMsgAt.current || msg.timestamp > lastReadMsgAt.current
-    ).length
-
-    if (
-      unreadMessageCount > 0 &&
-      chatSnap.unreadMessages !== unreadMessageCount
-    ) {
-      chatStore.unreadMessages = unreadMessageCount
-    }
-  }, [chatMessages, chatSnap.unreadMessages, isChatOpen])
-
-  const renderedMessages = React.useMemo(() => {
-    return chatMessages.map((msg, idx, allMsg) => {
-      const hideMetadata =
-        idx >= 1 &&
-        msg.timestamp - allMsg[idx - 1].timestamp < 60_000 &&
-        allMsg[idx - 1].from === msg.from
-
-      return (
-        <ChatEntry
-          key={msg.id ?? idx}
-          hideMetadata={hideMetadata}
-          entry={msg}
-          messageFormatter={formatChatMessageLinks}
-        />
-      )
-    })
-    // This ensures that the chat message list is updated to reflect any changes in participant information.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chatMessages, participants])
-
-  return (
-    <Div
-      display={'flex'}
-      padding={'0 1.5rem'}
-      flexGrow={1}
-      flexDirection={'column'}
-      minHeight={0}
-      {...props}
-    >
-      <Text
-        variant="sm"
-        style={{
-          padding: '0.75rem',
-          backgroundColor: '#f3f4f6',
-          borderRadius: 4,
-          marginBottom: '0.75rem',
-        }}
-      >
-        {t('disclaimer')}
-      </Text>
-      <Div
-        flexGrow={1}
-        flexDirection={'column'}
-        minHeight={0}
-        overflowY="scroll"
-      >
-        <ul className="lk-list lk-chat-messages" ref={ulRef}>
-          {renderedMessages}
-        </ul>
-      </Div>
-      <ChatInput
-        inputRef={inputRef}
-        onSubmit={(e) => handleSubmit(e)}
-        isSending={isSending}
-      />
-    </Div>
-  )
-}

src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx

@@ -4,20 +4,21 @@ import * as React from 'react'
 import { supportsScreenSharing } from '@livekit/components-core'
 
 import {
+  DisconnectButton,
+  LeaveIcon,
+  MediaDeviceMenu,
+  TrackToggle,
   useMaybeLayoutContext,
   usePersistentUserChoices,
 } from '@livekit/components-react'
 
+import { mergeProps } from '@/utils/mergeProps.ts'
 import { StartMediaButton } from '../components/controls/StartMediaButton'
 import { useMediaQuery } from '../hooks/useMediaQuery'
+import { useTranslation } from 'react-i18next'
 import { OptionsButton } from '../components/controls/Options/OptionsButton'
-import { ParticipantsToggle } from '../components/controls/Participants/ParticipantsToggle'
-import { ChatToggle } from '../components/controls/ChatToggle'
-import { HandToggle } from '../components/controls/HandToggle'
-import { SelectToggleDevice } from '../components/controls/SelectToggleDevice'
-import { LeaveButton } from '../components/controls/LeaveButton'
-import { ScreenShareToggle } from '../components/controls/ScreenShareToggle'
-import { css } from '@/styled-system/css'
+import { ParticipantsToggle } from '@/features/rooms/livekit/components/controls/Participants/ParticipantsToggle'
+import { ChatToggle } from '@/features/rooms/livekit/components/controls/ChatToggle'
 
 /** @public */
 export type ControlBarControls = {
@@ -36,7 +37,7 @@ export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
   controls?: ControlBarControls
   /**
    * If `true`, the user's device choices will be persisted.
-   * This will enable the user to have the same device choices when they rejoin the room.
+   * This will enables the user to have the same device choices when they rejoin the room.
    * @defaultValue true
    * @alpha
    */
@@ -63,7 +64,9 @@ export function ControlBar({
   variation,
   saveUserChoices = true,
   onDeviceError,
+  ...props
 }: ControlBarProps) {
+  const { t } = useTranslation('rooms')
   const [isChatOpen, setIsChatOpen] = React.useState(false)
   const layoutContext = useMaybeLayoutContext()
   React.useEffect(() => {
@@ -79,8 +82,28 @@ export function ControlBar({
   const defaultVariation = isTooLittleSpace ? 'minimal' : 'verbose'
   variation ??= defaultVariation
 
+  const showIcon = React.useMemo(
+    () => variation === 'minimal' || variation === 'verbose',
+    [variation]
+  )
+  const showText = React.useMemo(
+    () => variation === 'textOnly' || variation === 'verbose',
+    [variation]
+  )
+
   const browserSupportsScreenSharing = supportsScreenSharing()
 
+  const [isScreenShareEnabled, setIsScreenShareEnabled] = React.useState(false)
+
+  const onScreenShareChange = React.useCallback(
+    (enabled: boolean) => {
+      setIsScreenShareEnabled(enabled)
+    },
+    [setIsScreenShareEnabled]
+  )
+
+  const htmlProps = mergeProps({ className: 'lk-control-bar' }, props)
+
   const {
     saveAudioInputEnabled,
     saveVideoInputEnabled,
@@ -101,55 +124,72 @@ export function ControlBar({
   )
 
   return (
-    <div
-      className={css({
-        display: 'flex',
-        gap: '.5rem',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '.75rem',
-        borderTop: '1px solid var(--lk-border-color)',
-        maxHeight: 'var(--lk-control-bar-height)',
-        height: '80px',
-        position: 'absolute',
-        backgroundColor: '#d1d5db',
-        bottom: 0,
-        left: 0,
-        right: 0,
-      })}
-    >
-      <SelectToggleDevice
-        source={Track.Source.Microphone}
-        onChange={microphoneOnChange}
-        onDeviceError={(error) =>
-          onDeviceError?.({ source: Track.Source.Microphone, error })
-        }
-        onActiveDeviceChange={(deviceId) =>
-          saveAudioInputDeviceId(deviceId ?? '')
-        }
-      />
-      <SelectToggleDevice
-        source={Track.Source.Camera}
-        onChange={cameraOnChange}
-        onDeviceError={(error) =>
-          onDeviceError?.({ source: Track.Source.Camera, error })
-        }
-        onActiveDeviceChange={(deviceId) =>
-          saveVideoInputDeviceId(deviceId ?? '')
-        }
-      />
+    <div {...htmlProps}>
+      <div className="lk-button-group">
+        <TrackToggle
+          source={Track.Source.Microphone}
+          showIcon={showIcon}
+          onChange={microphoneOnChange}
+          onDeviceError={(error) =>
+            onDeviceError?.({ source: Track.Source.Microphone, error })
+          }
+        >
+          {showText && t('controls.microphone')}
+        </TrackToggle>
+        <div className="lk-button-group-menu">
+          <MediaDeviceMenu
+            kind="audioinput"
+            onActiveDeviceChange={(_kind, deviceId) =>
+              saveAudioInputDeviceId(deviceId ?? '')
+            }
+          />
+        </div>
+      </div>
+      <div className="lk-button-group">
+        <TrackToggle
+          source={Track.Source.Camera}
+          showIcon={showIcon}
+          onChange={cameraOnChange}
+          onDeviceError={(error) =>
+            onDeviceError?.({ source: Track.Source.Camera, error })
+          }
+        >
+          {showText && t('controls.camera')}
+        </TrackToggle>
+        <div className="lk-button-group-menu">
+          <MediaDeviceMenu
+            kind="videoinput"
+            onActiveDeviceChange={(_kind, deviceId) =>
+              saveVideoInputDeviceId(deviceId ?? '')
+            }
+          />
+        </div>
+      </div>
       {browserSupportsScreenSharing && (
-        <ScreenShareToggle
+        <TrackToggle
+          source={Track.Source.ScreenShare}
+          captureOptions={{ audio: true, selfBrowserSurface: 'include' }}
+          showIcon={showIcon}
+          onChange={onScreenShareChange}
           onDeviceError={(error) =>
             onDeviceError?.({ source: Track.Source.ScreenShare, error })
           }
-        />
+        >
+          {showText &&
+            t(
+              isScreenShareEnabled
+                ? 'controls.stopScreenShare'
+                : 'controls.shareScreen'
+            )}
+        </TrackToggle>
       )}
-      <HandToggle />
       <ChatToggle />
       <ParticipantsToggle />
       <OptionsButton />
-      <LeaveButton />
+      <DisconnectButton>
+        {showIcon && <LeaveIcon />}
+        {showText && t('controls.leave')}
+      </DisconnectButton>
       <StartMediaButton />
     </div>
   )

src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx

@@ -1,4 +1,9 @@
-import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
+import type {
+  MessageDecoder,
+  MessageEncoder,
+  TrackReferenceOrPlaceholder,
+  WidgetState,
+} from '@livekit/components-core'
 import {
   isEqualTrackRef,
   isTrackReference,
@@ -15,20 +20,21 @@ import {
   GridLayout,
   LayoutContextProvider,
   RoomAudioRenderer,
+  MessageFormatter,
   usePinnedTracks,
   useTracks,
   useCreateLayoutContext,
+  Chat,
 } from '@livekit/components-react'
 
 import { ControlBar } from './ControlBar'
 import { styled } from '@/styled-system/jsx'
 import { cva } from '@/styled-system/css'
-import { MainNotificationToast } from '@/features/notifications/MainNotificationToast'
+import { ParticipantsList } from '@/features/rooms/livekit/components/controls/Participants/ParticipantsList'
+import { useSnapshot } from 'valtio'
+import { participantsStore } from '@/stores/participants'
 import { FocusLayout } from '../components/FocusLayout'
 import { ParticipantTile } from '../components/ParticipantTile'
-import { SidePanel } from '../components/SidePanel'
-import { useSidePanel } from '../hooks/useSidePanel'
-import { RecordingIndicator } from '@/features/rooms/components/RecordingIndicator.tsx'
 
 const LayoutWrapper = styled(
   'div',
@@ -37,7 +43,7 @@ const LayoutWrapper = styled(
       position: 'relative',
       display: 'flex',
       width: '100%',
-      height: '100%',
+      height: 'calc(100% - var(--lk-control-bar-height))',
     },
   })
 )
@@ -47,6 +53,9 @@ const LayoutWrapper = styled(
  */
 export interface VideoConferenceProps
   extends React.HTMLAttributes<HTMLDivElement> {
+  chatMessageFormatter?: MessageFormatter
+  chatMessageEncoder?: MessageEncoder
+  chatMessageDecoder?: MessageDecoder
   /** @alpha */
   SettingsComponent?: React.ComponentType
 }
@@ -69,7 +78,17 @@ export interface VideoConferenceProps
  * ```
  * @public
  */
-export function VideoConference({ ...props }: VideoConferenceProps) {
+export function VideoConference({
+  chatMessageFormatter,
+  chatMessageDecoder,
+  chatMessageEncoder,
+  ...props
+}: VideoConferenceProps) {
+  const [widgetState, setWidgetState] = React.useState<WidgetState>({
+    showChat: false,
+    unreadMessages: 0,
+    showSettings: false,
+  })
   const lastAutoFocusedScreenShareTrack =
     React.useRef<TrackReferenceOrPlaceholder | null>(null)
 
@@ -81,6 +100,11 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
     { updateOnlyOn: [RoomEvent.ActiveSpeakersChanged], onlySubscribed: false }
   )
 
+  const widgetUpdate = (state: WidgetState) => {
+    log.debug('updating widget state', state)
+    setWidgetState(state)
+  }
+
   const layoutContext = useCreateLayoutContext()
 
   const screenShareTracks = tracks
@@ -147,7 +171,8 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
   ])
   /* eslint-enable react-hooks/exhaustive-deps */
 
-  const { isSidePanelOpen } = useSidePanel()
+  const participantsSnap = useSnapshot(participantsStore)
+  const showParticipants = participantsSnap.showParticipants
 
   return (
     <div className="lk-video-conference" {...props}>
@@ -155,55 +180,39 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
         <LayoutContextProvider
           value={layoutContext}
           // onPinChange={handleFocusStateChange}
+          onWidgetChange={widgetUpdate}
         >
-          <div
-            // todo - extract these magic values into constant
-            style={{
-              position: 'absolute',
-              inset: isSidePanelOpen
-                ? 'var(--lk-grid-gap) calc(358px + 3rem) calc(80px + var(--lk-grid-gap)) 16px'
-                : 'var(--lk-grid-gap) var(--lk-grid-gap) calc(80px + var(--lk-grid-gap))',
-              transition: 'inset .5s cubic-bezier(0.4,0,0.2,1) 5ms',
-            }}
-          >
-            <RecordingIndicator />
+          <div className="lk-video-conference-inner">
             <LayoutWrapper>
-              <div
-                style={{ display: 'flex', position: 'relative', width: '100%' }}
-              >
-                {!focusTrack ? (
-                  <div
-                    className="lk-grid-layout-wrapper"
-                    style={{ height: 'auto' }}
-                  >
-                    <GridLayout tracks={tracks} style={{ padding: 0 }}>
+              {!focusTrack ? (
+                <div
+                  className="lk-grid-layout-wrapper"
+                  style={{ height: 'auto' }}
+                >
+                  <GridLayout tracks={tracks}>
+                    <ParticipantTile />
+                  </GridLayout>
+                </div>
+              ) : (
+                <div className="lk-focus-layout-wrapper">
+                  <FocusLayoutContainer>
+                    <CarouselLayout tracks={carouselTracks}>
                       <ParticipantTile />
-                    </GridLayout>
-                  </div>
-                ) : (
-                  <div
-                    className="lk-focus-layout-wrapper"
-                    style={{ height: 'auto' }}
-                  >
-                    <FocusLayoutContainer style={{ padding: 0 }}>
-                      <CarouselLayout
-                        tracks={carouselTracks}
-                        style={{
-                          minWidth: '200px',
-                        }}
-                      >
-                        <ParticipantTile />
-                      </CarouselLayout>
-                      {focusTrack && <FocusLayout trackRef={focusTrack} />}
-                    </FocusLayoutContainer>
-                  </div>
-                )}
-              </div>
+                    </CarouselLayout>
+                    {focusTrack && <FocusLayout trackRef={focusTrack} />}
+                  </FocusLayoutContainer>
+                </div>
+              )}
+              <Chat
+                style={{ display: widgetState.showChat ? 'grid' : 'none' }}
+                messageFormatter={chatMessageFormatter}
+                messageEncoder={chatMessageEncoder}
+                messageDecoder={chatMessageDecoder}
+              />
+              {showParticipants && <ParticipantsList />}
             </LayoutWrapper>
-            <MainNotificationToast />
+            <ControlBar />
           </div>
-          <ControlBar />
-          <SidePanel />
         </LayoutContextProvider>
       )}
       <RoomAudioRenderer />

src/frontend/src/features/rooms/routes/Room.tsx

@@ -8,7 +8,6 @@ import { ErrorScreen } from '@/components/ErrorScreen'
 import { useUser, UserAware } from '@/features/auth'
 import { Conference } from '../components/Conference'
 import { Join } from '../components/Join'
-import { useKeyboardShortcuts } from '@/features/shortcuts/useKeyboardShortcuts'
 
 export const Room = () => {
   const { isLoggedIn } = useUser()
@@ -20,8 +19,6 @@ export const Room = () => {
   const mode = isLoggedIn && history.state?.create ? 'create' : 'join'
   const skipJoinScreen = isLoggedIn && mode === 'create'
 
-  useKeyboardShortcuts()
-
   const clearRouterState = () => {
     if (window?.history?.state) {
       window.history.replaceState({}, '')

src/frontend/src/features/settings/components/SettingsDialog.tsx

@@ -1,8 +1,7 @@
 import { Trans, useTranslation } from 'react-i18next'
 import { useLanguageLabels } from '@/i18n/useLanguageLabels'
 import { A, Badge, Dialog, type DialogProps, Field, H, P } from '@/primitives'
-import { logoutUrl, useUser } from '@/features/auth'
-import { ProConnectButton } from '@/components/ProConnectButton'
+import { authUrl, logoutUrl, useUser } from '@/features/auth'
 
 export type SettingsDialogProps = Pick<DialogProps, 'isOpen' | 'onOpenChange'>
 
@@ -29,7 +28,9 @@ export const SettingsDialog = (props: SettingsDialogProps) => {
       ) : (
         <>
           <P>{t('account.youAreNotLoggedIn')}</P>
-          <ProConnectButton />
+          <P>
+            <A href={authUrl()}>{t('login', { ns: 'global' })}</A>
+          </P>
         </>
       )}
       <H lvl={2}>{t('language.heading')}</H>

src/frontend/src/features/settings/components/SettingsDialogExtended.tsx

@@ -12,8 +12,6 @@ import {
 import { AccountTab } from './tabs/AccountTab'
 import { GeneralTab } from '@/features/settings/components/tabs/GeneralTab.tsx'
 import { AudioTab } from '@/features/settings/components/tabs/AudioTab.tsx'
-import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
-import { useRef } from 'react'
 
 const tabsStyle = css({
   maxHeight: '40.625rem', // fixme size copied from meet settings modal
@@ -30,13 +28,13 @@ const tabListContainerStyle = css({
   borderRight: '1px solid lightGray', // fixme poor color management
   paddingY: '1rem',
   paddingRight: '1.5rem',
+  flex: '0 0 16rem', // fixme size copied from meet settings modal
 })
 
 const tabPanelContainerStyle = css({
   display: 'flex',
   flexGrow: '1',
   marginTop: '3.5rem',
-  minWidth: 0,
 })
 
 export type SettingsDialogExtended = Pick<
@@ -47,39 +45,25 @@ export type SettingsDialogExtended = Pick<
 export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
   // display only icon on small screen
   const { t } = useTranslation('settings')
-
-  const dialogEl = useRef<HTMLDivElement>(null)
-  const { width } = useSize(dialogEl)
-  const isWideScreen = !width || width >= 800 // fixme - hardcoded 50rem in pixel
-
   return (
-    <Dialog innerRef={dialogEl} {...props} role="dialog" type="flex">
+    <Dialog {...props} role="dialog" type="flex">
       <Tabs orientation="vertical" className={tabsStyle}>
-        <div
-          className={tabListContainerStyle}
-          style={{
-            flex: isWideScreen ? '0 0 16rem' : undefined,
-            paddingTop: !isWideScreen ? '64px' : undefined,
-            paddingRight: !isWideScreen ? '1rem' : undefined,
-          }}
-        >
-          {isWideScreen && (
-            <Heading slot="title" level={1} className={text({ variant: 'h1' })}>
-              {t('dialog.heading')}
-            </Heading>
-          )}
+        <div className={tabListContainerStyle}>
+          <Heading slot="title" level={1} className={text({ variant: 'h1' })}>
+            {t('dialog.heading')}
+          </Heading>
           <TabList border={false} aria-label="Chat log orientation example">
             <Tab icon highlight id="1">
               <RiAccountCircleLine />
-              {isWideScreen && t('tabs.account')}
+              {t('tabs.account')}
             </Tab>
             <Tab icon highlight id="2">
               <RiSpeakerLine />
-              {isWideScreen && t('tabs.audio')}
+              {t('tabs.audio')}
             </Tab>
             <Tab icon highlight id="3">
               <RiSettings3Line />
-              {isWideScreen && t('tabs.general')}
+              {t('tabs.general')}
             </Tab>
           </TabList>
         </div>

src/frontend/src/features/settings/components/tabs/AccountTab.tsx

@@ -4,12 +4,11 @@ import {
   usePersistentUserChoices,
   useRoomContext,
 } from '@livekit/components-react'
-import { logoutUrl, useUser } from '@/features/auth'
+import { authUrl, logoutUrl, useUser } from '@/features/auth'
 import { css } from '@/styled-system/css'
 import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
 import { HStack } from '@/styled-system/jsx'
 import { useState } from 'react'
-import { ProConnectButton } from '@/components/ProConnectButton'
 
 export type AccountTabProps = Pick<DialogProps, 'onOpenChange'> &
   Pick<TabPanelProps, 'id'>
@@ -59,7 +58,9 @@ export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => {
       ) : (
         <>
           <P>{t('account.youAreNotLoggedIn')}</P>
-          <ProConnectButton />
+          <P>
+            <A href={authUrl()}>{t('login', { ns: 'global' })}</A>
+          </P>
         </>
       )}
       <HStack

src/frontend/src/features/settings/components/tabs/AudioTab.tsx

@@ -1,55 +1,10 @@
 import { DialogProps, Field, H } from '@/primitives'
 
 import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
-import {
-  useIsSpeaking,
-  useMediaDeviceSelect,
-  useRoomContext,
-} from '@livekit/components-react'
+import { useMediaDeviceSelect } from '@livekit/components-react'
 import { isSafari } from '@/utils/livekit'
 import { useTranslation } from 'react-i18next'
-import { SoundTester } from '@/components/SoundTester'
-import { HStack } from '@/styled-system/jsx'
-import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
-import { ReactNode } from 'react'
-
-type RowWrapperProps = {
-  heading: string
-  children: ReactNode[]
-}
-
-const RowWrapper = ({ heading, children }: RowWrapperProps) => {
-  return (
-    <>
-      <H lvl={2}>{heading}</H>
-      <HStack
-        gap={0}
-        style={{
-          flexWrap: 'wrap',
-        }}
-      >
-        <div
-          style={{
-            flex: '1 1 215px',
-            minWidth: 0,
-          }}
-        >
-          {children[0]}
-        </div>
-        <div
-          style={{
-            width: '10rem',
-            justifyContent: 'center',
-            display: 'flex',
-            paddingLeft: '1.5rem',
-          }}
-        >
-          {children[1]}
-        </div>
-      </HStack>
-    </>
-  )
-}
+import { SoundTester } from '@/components/SoundTester.tsx'
 
 export type AudioTabProps = Pick<DialogProps, 'onOpenChange'> &
   Pick<TabPanelProps, 'id'>
@@ -58,9 +13,6 @@ type DeviceItems = Array<{ value: string; label: string }>
 
 export const AudioTab = ({ id }: AudioTabProps) => {
   const { t } = useTranslation('settings')
-  const { localParticipant } = useRoomContext()
-
-  const isSpeaking = useIsSpeaking(localParticipant)
 
   const {
     devices: devicesOut,
@@ -108,32 +60,20 @@ export const AudioTab = ({ id }: AudioTabProps) => {
 
   return (
     <TabPanel padding={'md'} flex id={id}>
-      <RowWrapper heading={t('audio.microphone.heading')}>
-        <Field
-          type="select"
-          label={t('audio.microphone.label')}
-          items={itemsIn}
-          defaultSelectedKey={
-            activeDeviceIdIn || getDefaultSelectedKey(itemsIn)
-          }
-          onSelectionChange={(key) => setActiveMediaDeviceIn(key as string)}
-          {...disabledProps}
-          style={{
-            width: '100%',
-          }}
-        />
-        <>
-          {localParticipant.isMicrophoneEnabled ? (
-            <ActiveSpeaker isSpeaking={isSpeaking} />
-          ) : (
-            <span>Micro désactivé</span>
-          )}
-        </>
-      </RowWrapper>
+      <H lvl={2}>{t('audio.microphone.heading')}</H>
+      <Field
+        type="select"
+        label={t('audio.microphone.label')}
+        items={itemsIn}
+        defaultSelectedKey={activeDeviceIdIn || getDefaultSelectedKey(itemsIn)}
+        onSelectionChange={(key) => setActiveMediaDeviceIn(key as string)}
+        {...disabledProps}
+      />
       {/* Safari has a known limitation where its implementation of 'enumerateDevices' does not include audio output devices.
         To prevent errors or an empty selection list, we only render the speakers selection field on non-Safari browsers. */}
       {!isSafari() && (
-        <RowWrapper heading={t('audio.speakers.heading')}>
+        <>
+          <H lvl={2}>{t('audio.speakers.heading')}</H>
           <Field
             type="select"
             label={t('audio.speakers.label')}
@@ -145,12 +85,9 @@ export const AudioTab = ({ id }: AudioTabProps) => {
               setActiveMediaDeviceOut(key as string)
             }
             {...disabledProps}
-            style={{
-              minWidth: 0,
-            }}
           />
           <SoundTester />
-        </RowWrapper>
+        </>
       )}
     </TabPanel>
   )

src/frontend/src/features/shortcuts/types.ts

@@ -1,4 +0,0 @@
-export type Shortcut = {
-  key: string
-  ctrlKey?: boolean
-}

src/frontend/src/features/shortcuts/useKeyboardShortcuts.ts

@@ -1,31 +0,0 @@
-import { useEffect } from 'react'
-import { useSnapshot } from 'valtio'
-import { keyboardShortcutsStore } from '@/stores/keyboardShortcuts'
-import { isMacintosh } from '@/utils/livekit'
-import { formatShortcutKey } from './utils'
-
-export const useKeyboardShortcuts = () => {
-  const shortcutsSnap = useSnapshot(keyboardShortcutsStore)
-
-  useEffect(() => {
-    // This approach handles basic shortcuts but isn't comprehensive.
-    // Issues might occur. First draft.
-    const onKeyDown = (e: KeyboardEvent) => {
-      const { key, metaKey, ctrlKey } = e
-      const shortcutKey = formatShortcutKey({
-        key,
-        ctrlKey: ctrlKey || (isMacintosh() && metaKey),
-      })
-      const shortcut = shortcutsSnap.shortcuts.get(shortcutKey)
-      if (!shortcut) return
-      e.preventDefault()
-      shortcut()
-    }
-
-    window.addEventListener('keydown', onKeyDown)
-
-    return () => {
-      window.removeEventListener('keydown', onKeyDown)
-    }
-  }, [shortcutsSnap])
-}

src/frontend/src/features/shortcuts/useLongPress.ts

@@ -1,47 +0,0 @@
-import { useEffect, useRef } from 'react'
-
-export type useLongPressProps = {
-  keyCode?: string
-  onKeyDown: () => void
-  onKeyUp: () => void
-  longPressThreshold?: number
-}
-
-export const useLongPress = ({
-  keyCode,
-  onKeyDown,
-  onKeyUp,
-  longPressThreshold = 300,
-}: useLongPressProps) => {
-  const timeoutIdRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.code != keyCode || timeoutIdRef.current) return
-      timeoutIdRef.current = setTimeout(() => {
-        onKeyDown()
-      }, longPressThreshold)
-    }
-
-    const handleKeyUp = (event: KeyboardEvent) => {
-      if (event.code != keyCode || !timeoutIdRef.current) return
-      clearTimeout(timeoutIdRef.current)
-      timeoutIdRef.current = null
-      onKeyUp()
-    }
-
-    if (!keyCode) return
-
-    window.addEventListener('keydown', handleKeyDown)
-    window.addEventListener('keyup', handleKeyUp)
-
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown)
-      window.removeEventListener('keyup', handleKeyUp)
-    }
-  }, [keyCode, onKeyDown, onKeyUp, longPressThreshold])
-
-  return
-}
-
-export default useLongPress

src/frontend/src/features/shortcuts/useRegisterKeyboardShortcut.ts

@@ -1,19 +0,0 @@
-import { useEffect } from 'react'
-import { keyboardShortcutsStore } from '@/stores/keyboardShortcuts'
-import { formatShortcutKey } from '@/features/shortcuts/utils'
-import { Shortcut } from '@/features/shortcuts/types'
-
-export type useRegisterKeyboardShortcutProps = {
-  shortcut?: Shortcut
-  handler: () => void
-}
-
-export const useRegisterKeyboardShortcut = ({
-  shortcut,
-  handler,
-}: useRegisterKeyboardShortcutProps) => {
-  useEffect(() => {
-    if (!shortcut) return
-    keyboardShortcutsStore.shortcuts.set(formatShortcutKey(shortcut), handler)
-  }, [handler, shortcut])
-}

src/frontend/src/features/shortcuts/utils.ts

@@ -1,18 +0,0 @@
-import { isMacintosh } from '@/utils/livekit'
-import { Shortcut } from '@/features/shortcuts/types'
-
-export const CTRL = 'ctrl'
-
-export const formatShortcutKey = (shortcut: Shortcut) => {
-  if (shortcut.ctrlKey) return `${CTRL}+${shortcut.key.toUpperCase()}`
-  return shortcut.key.toUpperCase()
-}
-
-export const appendShortcutLabel = (label: string, shortcut: Shortcut) => {
-  if (!shortcut.key) return
-  let formattedKeyLabel = shortcut.key.toLowerCase()
-  if (shortcut.ctrlKey) {
-    formattedKeyLabel = `${isMacintosh() ? '⌘' : 'Ctrl'}+${formattedKeyLabel}`
-  }
-  return `${label} (${formattedKeyLabel})`
-}

src/frontend/src/features/support/hooks/useSupport.tsx

@@ -1,31 +0,0 @@
-import { useEffect } from 'react'
-import { Crisp } from 'crisp-sdk-web'
-import { ApiUser } from '@/features/auth/api/ApiUser'
-
-export const initializeSupportSession = (user: ApiUser) => {
-  if (!Crisp.isCrispInjected()) return
-  const { id, email } = user
-  Crisp.setTokenId(`meet-${id}`)
-  Crisp.user.setEmail(email)
-}
-
-export const terminateSupportSession = () => {
-  if (!Crisp.isCrispInjected()) return
-  Crisp.setTokenId()
-  Crisp.session.reset()
-}
-
-export type useSupportProps = {
-  id?: string
-}
-
-// Configure Crisp chat for real-time support across all pages.
-export const useSupport = ({ id }: useSupportProps) => {
-  useEffect(() => {
-    if (!id || Crisp.isCrispInjected()) return
-    Crisp.configure(id)
-    Crisp.setHideOnMobile(true)
-  }, [id])
-
-  return null
-}

src/frontend/src/layout/Header.tsx

@@ -2,16 +2,13 @@ import { Link } from 'wouter'
 import { css } from '@/styled-system/css'
 import { Stack } from '@/styled-system/jsx'
 import { useTranslation } from 'react-i18next'
-import { Text, Button } from '@/primitives'
+import { A, Text, Button } from '@/primitives'
 import { SettingsButton } from '@/features/settings'
-import { logoutUrl, useUser } from '@/features/auth'
+import { authUrl, logoutUrl, useUser } from '@/features/auth'
 import { useMatchesRoute } from '@/navigation/useMatchesRoute'
 import { Feedback } from '@/components/Feedback'
 import { Menu } from '@/primitives/Menu'
 import { MenuList } from '@/primitives/MenuList'
-import { ProConnectButton } from '@/components/ProConnectButton'
-import { terminateAnalyticsSession } from '@/features/analytics/hooks/useAnalytics'
-import { terminateSupportSession } from '@/features/support/hooks/useSupport'
 
 export const Header = () => {
   const { t } = useTranslation()
@@ -66,7 +63,7 @@ export const Header = () => {
         <nav>
           <Stack gap={1} direction="row" align="center">
             {isLoggedIn === false && !isHome && (
-              <ProConnectButton hint={false} />
+              <A href={authUrl()}>{t('login')}</A>
             )}
             {!!user && (
               <Menu>
@@ -82,8 +79,6 @@ export const Header = () => {
                   items={[{ value: 'logout', label: t('logout') }]}
                   onAction={(value) => {
                     if (value === 'logout') {
-                      terminateAnalyticsSession()
-                      terminateSupportSession()
                       window.location.href = logoutUrl()
                     }
                   }}

src/frontend/src/locales/de/global.json

@@ -1,5 +1,5 @@
 {
-  "app": "Visio",
+  "app": "Meet",
   "backToHome": "",
   "cancel": "",
   "closeDialog": "",
@@ -12,11 +12,7 @@
   },
   "loading": "",
   "loggedInUserTooltip": "",
-  "login": {
-    "buttonLabel": "",
-    "linkLabel": "",
-    "link": ""
-  },
+  "login": "Anmelden",
   "logout": "",
   "notFound": {
     "heading": ""

src/frontend/src/locales/de/home.json

@@ -17,8 +17,8 @@
   "laterMeetingDialog": {
     "heading": "",
     "description": "",
-    "copy": "",
     "copied": "",
-    "permissions": ""
+    "copy": "",
+    "inputLabel": ""
   }
 }

src/frontend/src/locales/de/notifications.json

@@ -1,10 +0,0 @@
-{
-  "defaultName": "",
-  "joined": {
-    "description": ""
-  },
-  "raised": {
-    "description": "",
-    "cta": ""
-  }
-}

src/frontend/src/locales/de/rooms.json

@@ -4,35 +4,18 @@
     "heading": ""
   },
   "join": {
-    "videoinput": {
-      "choose": "",
-      "disable": "",
-      "enable": "",
-      "label": "",
-      "placeholder": ""
-    },
-    "audioinput": {
-      "choose": "",
-      "disable": "",
-      "enable": "",
-      "label": ""
-    },
+    "camlabel": "",
     "heading": "",
     "joinLabel": "",
-    "joinMeeting": "",
-    "toggleOff": "",
-    "toggleOn": "",
-    "userLabel": "",
-    "usernameHint": "",
-    "usernameLabel": ""
+    "micLabel": "",
+    "userLabel": ""
   },
   "leaveRoomPrompt": "",
   "shareDialog": {
-    "copy": "",
     "copied": "",
+    "copy": "",
     "heading": "",
-    "description": "",
-    "permissions": ""
+    "inputLabel": ""
   },
   "error": {
     "createRoom": {
@@ -47,24 +30,7 @@
     "stopScreenShare": "",
     "chat": {
       "open": "",
-      "closed": "",
-      "input": {
-        "textArea": {
-          "label": "",
-          "placeholder": ""
-        },
-        "button": {
-          "label": ""
-        }
-      }
-    },
-    "hand": {
-      "raise": "",
-      "lower": ""
-    },
-    "screenShare": {
-      "start": "",
-      "stop": ""
+      "closed": ""
     },
     "leave": "",
     "participants": {
@@ -78,55 +44,12 @@
       "feedbacks": "",
       "support": "",
       "settings": "",
-      "username": "",
-      "effects": ""
+      "username": ""
     }
   },
-  "effects": {
-    "activateCamera": "",
-    "notAvailable": "",
-    "heading": "",
-    "blur": {
-      "light": "",
-      "normal": "",
-      "apply": "",
-      "clear": ""
-    },
-    "experimental": ""
-  },
-  "sidePanel": {
-    "heading": {
-      "participants": "",
-      "effects": "",
-      "chat": ""
-    },
-    "content": {
-      "participants": "",
-      "effects": "",
-      "chat": ""
-    },
-    "closeButton": ""
-  },
-  "chat": {
-    "disclaimer": ""
-  },
   "participants": {
-    "subheading": "",
-    "contributors": "",
-    "collapsable": {
-      "open": "",
-      "close": ""
-    },
-    "you": "",
-    "muteYourself": "",
-    "muteParticipant": "",
-    "muteParticipantAlert": {
-      "description": "",
-      "confirm": "",
-      "cancel": ""
-    },
-    "raisedHands": "",
-    "lowerParticipantHand": "",
-    "lowerParticipantsHand": ""
+    "heading": "",
+    "closeButton": "",
+    "you": ""
   }
 }

src/frontend/src/locales/en/global.json

@@ -1,10 +1,10 @@
 {
-  "app": "Visio",
+  "app": "Meet",
   "backToHome": "Back to homescreen",
   "cancel": "Cancel",
   "closeDialog": "Close dialog",
   "error": {
-    "heading": "An error occurred while loading the page"
+    "heading": "An error occured while loading the page"
   },
   "feedbackAlert": "Give us feedback",
   "forbidden": {
@@ -12,11 +12,7 @@
   },
   "loading": "Loading…",
   "loggedInUserTooltip": "Logged in as…",
-  "login": {
-    "buttonLabel": "Login with ProConnect",
-    "linkLabel": "What is ProConnect? - new tab",
-    "link": "What is ProConnect?"
-  },
+  "login": "Login",
   "logout": "Logout",
   "notFound": {
     "heading": "Page not found"

src/frontend/src/locales/en/home.json

@@ -1,6 +1,6 @@
 {
   "createMeeting": "Create a meeting",
-  "heading": "Welcome in Visio",
+  "heading": "Welcome in Meet",
   "intro": "Work easily, from anywhere.",
   "joinInputError": "Use a meeting link or code. Examples:",
   "joinInputExample": "URL or 10-letter code",
@@ -17,8 +17,8 @@
   "laterMeetingDialog": {
     "heading": "Your connection details",
     "description": "Send this link to the people you want to invite to the meeting. They will be able to join without Agent Connect.",
-    "copy": "Copy the meeting link",
-    "copied": "Link copied to clipboard",
-    "permissions": "People with this link do not need your permission to join this meeting."
+    "copied": "Copied",
+    "copy": "Copy",
+    "inputLabel": "Meeting link"
   }
 }

src/frontend/src/locales/en/notifications.json

@@ -1,10 +0,0 @@
-{
-  "defaultName": "A contributor",
-  "joined": {
-    "description": "{{name}} has joined the room"
-  },
-  "raised": {
-    "description": "{{name}} has raised their hand.",
-    "cta": "Open waiting list"
-  }
-}

src/frontend/src/locales/en/rooms.json

@@ -1,38 +1,21 @@
 {
   "feedback": {
     "body": "Please fill out the form available in the header to give us your precious feedback! Thanks.",
-    "heading": "Help us improve Visio"
+    "heading": "Help us improve Meet"
   },
   "join": {
-    "videoinput": {
-      "choose": "Select camera",
-      "disable": "Disable camera",
-      "enable": "Enable camera",
-      "label": "Camera",
-      "placeholder": "Enable camera to see the preview"
-    },
-    "audioinput": {
-      "choose": "Select microphone",
-      "disable": "Disable microphone",
-      "enable": "Enable microphone",
-      "label": "Microphone"
-    },
-    "heading": "Verify your settings",
+    "camlabel": "Camera",
+    "heading": "Join the meeting",
     "joinLabel": "Join",
-    "joinMeeting": "Join meeting",
-    "toggleOff": "Click to turn off",
-    "toggleOn": "Click to turn on",
-    "userLabel": "",
-    "usernameHint": "Shown to other participants",
-    "usernameLabel": "Your name"
+    "micLabel": "Microphone",
+    "userLabel": "Your name"
   },
   "leaveRoomPrompt": "This will make you leave the meeting.",
   "shareDialog": {
-    "copy": "Copy the meeting link",
-    "copied": "Link copied to clipboard",
-    "heading": "Your meeting is ready",
-    "description": "Share this link with people you want to invite to the meeting.",
-    "permissions": "People with this link do not need your permission to join this meeting."
+    "copied": "Copied",
+    "copy": "Copy",
+    "heading": "Share the meeting link",
+    "inputLabel": "Meeting link"
   },
   "error": {
     "createRoom": {
@@ -43,26 +26,11 @@
   "controls": {
     "microphone": "Microphone",
     "camera": "Camera",
+    "shareScreen": "Share screen",
+    "stopScreenShare": "Stop screen share",
     "chat": {
       "open": "Close the chat",
-      "closed": "Open the chat",
-      "input": {
-        "textArea": {
-          "label": "Enter a message",
-          "placeholder": "Enter a message"
-        },
-        "button": {
-          "label": "Send message"
-        }
-      }
-    },
-    "hand": {
-      "raise": "Raise hand",
-      "lower": "Lower hand"
-    },
-    "screenShare": {
-      "start": "Share screen",
-      "stop": "Stop screen share"
+      "closed": "Open the chat"
     },
     "leave": "Leave",
     "participants": {
@@ -76,55 +44,12 @@
       "feedbacks": "Give us feedbacks",
       "support": "Get Help on Tchap",
       "settings": "Settings",
-      "username": "Update Your Name",
-      "effects": "Apply effects"
+      "username": "Update Your Name"
     }
   },
-  "effects": {
-    "activateCamera": "Your camera is disabled. Choose an option to enable it.",
-    "notAvailable": "The blur effect will be available soon on your browser. We're working on it! In the meantime, you can use Google Chrome :(",
-    "heading": "Blur",
-    "blur": {
-      "light": "Light blur",
-      "normal": "Blur",
-      "apply": "Enable blur",
-      "clear": "Disable blur"
-    },
-    "experimental": "Experimental feature. A v2 is coming for full browser support and improved quality."
-  },
-  "sidePanel": {
-    "heading": {
-      "participants": "Participants",
-      "effects": "Effects",
-      "chat": "Messages in the chat"
-    },
-    "content": {
-      "participants": "participants",
-      "effects": "effects",
-      "chat": "messages"
-    },
-    "closeButton": "Hide {{content}}"
-  },
-  "chat": {
-    "disclaimer": "The messages are visible to participants only at the time they are sent. All messages are deleted at the end of the call."
-  },
   "participants": {
-    "subheading": "In room",
-    "you": "You",
-    "contributors": "Contributors",
-    "collapsable": {
-      "open": "Open {{name}} list",
-      "close": "Close {{name}} list"
-    },
-    "muteYourself": "Close your mic",
-    "muteParticipant": "Close the mic of {{name}}",
-    "muteParticipantAlert": {
-      "description": "Mute {{name}} for all participants? {{name}} will be the only one who can unmute themselves.",
-      "confirm": "Mute",
-      "cancel": "Cancel"
-    },
-    "raisedHands": "Raised hands",
-    "lowerParticipantHand": "Lower {{name}}'s hand",
-    "lowerParticipantsHand": "Lower all hands"
+    "heading": "Participants",
+    "closeButton": "Hide participants",
+    "you": "You"
   }
 }

src/frontend/src/locales/en/settings.json

@@ -3,7 +3,7 @@
     "currentlyLoggedAs": "You are currently logged in as <0>{{user}}</0>",
     "heading": "Account",
     "youAreNotLoggedIn": "You are not logged in.",
-    "nameLabel": "Your Name",
+    "nameLabel": "Votre Nom",
     "authentication": "Authentication"
   },
   "audio": {