wip avoid displaying transcript if feature not enable

Use a totally different strategy, which hopefully works in prod env.
Actually broadcast channel cannot be shared between two different
browsing context, even on a same domain, an iFrame and a pop up
cannot communicate.

Moreover, in an iFrame session cookie are unavailable.
Rely on a newly created backend endpoint to pass room data.

.github/workflows/docker-hub.yml

@@ -119,12 +119,9 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event_name != 'pull_request'
     steps:
-      -
-        name: Checkout repository
-        uses: actions/checkout@v4
-      -
-        name: Call argocd github webhook
-        run: |
-          data='{"ref": "'$GITHUB_REF'","repository": {"html_url":"'$GITHUB_SERVER_URL'/numerique-gouv/lasuite-deploiement"}}'
-          sig=$(echo -n ${data} | openssl dgst -sha1 -hmac "${{ secrets.ARGOCD_PREPROD_WEBHOOK_SECRET }}" | awk '{print "X-Hub-Signature: sha1="$2}')
-          curl -X POST -H 'X-GitHub-Event:push' -H "Content-Type: application/json" -H "${sig}" --data "${data}" ${{ vars.ARGOCD_PREPROD_WEBHOOK_URL }}
+      - uses: numerique-gouv/action-argocd-webhook-notification@main
+        id: notify
+        with:
+          deployment_repo_path: "${{ secrets.DEPLOYMENT_REPO_URL }}"
+          argocd_webhook_secret: "${{ secrets.ARGOCD_PREPROD_WEBHOOK_SECRET }}"
+          argocd_url: "${{ vars.ARGOCD_PREPROD_WEBHOOK_URL }}"

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-2025 DINUM/Etalab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

LICENSES/LICENSE.MIT.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021-2023 DINUM/Etalab
+Copyright (c) 2024-2025 DINUM/Etalab
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

docker/livekit/Dockerfile

@@ -1,4 +1,4 @@
-FROM livekit/livekit-server:latest
+FROM livekit/livekit-server:v1.8.0
 
 # We inject the nip.io certificate manually because the livekit chart doesn't support volume mounting
 COPY rootCA.pem /etc/ssl/certs/

docs/installation.md

@@ -2,7 +2,6 @@
 
 This document is a step-by-step guide that describes how to install Visio on a k8s cluster without AI features.
 
-
 ## Prerequisites
 
 - k8s cluster with an nginx-ingress controller
@@ -43,11 +42,11 @@ It will expire on 23 March 2027 🗓
 2. Create kind cluster with containerd registry config dir enabled
 Creating cluster "visio" ...
  ✓ Ensuring node image (kindest/node:v1.27.3) 🖼
- ✓ Preparing nodes 📦  
- ✓ Writing configuration 📜 
- ✓ Starting control-plane 🕹️ 
- ✓ Installing CNI 🔌 
- ✓ Installing StorageClass 💾 
+ ✓ Preparing nodes 📦
+ ✓ Writing configuration 📜
+ ✓ Starting control-plane 🕹️
+ ✓ Installing CNI 🔌
+ ✓ Installing StorageClass 💾
 Set kubectl context to "kind-visio"
 You can now use your cluster with:
 
@@ -95,13 +94,14 @@ ingress-nginx-admission-create-jgnc9        0/1     Completed   0          2m44s
 ingress-nginx-admission-patch-wrt47         0/1     Completed   0          2m44s
 ingress-nginx-controller-57c548c4cd-9xwt6   1/1     Running     0          2m44s
 ```
-When your k8s cluster is ready, you can start the deployment. This cluster is special because it uses the *.127.0.0.1.nip.io domain and mkcert certificates to have full HTTPS support and easy domain name management.
 
-Please remember that *.127.0.0.1.nip.io will always resolve to 127.0.0.1, except in the k8s cluster where we configure CoreDNS to answer with the ingress-nginx service IP.
+When your k8s cluster is ready, you can start the deployment. This cluster is special because it uses the \*.127.0.0.1.nip.io domain and mkcert certificates to have full HTTPS support and easy domain name management.
+
+Please remember that \*.127.0.0.1.nip.io will always resolve to 127.0.0.1, except in the k8s cluster where we configure CoreDNS to answer with the ingress-nginx service IP.
 
 ## Preparation
 
-### What will you use to authenticate your users ? 
+### What will you use to authenticate your users ?
 
 Visio uses OIDC, so if you already have an OIDC provider, obtain the necessary information to use it. In the next step, we will see how to configure Django (and thus Visio) to use it. If you do not have a provider, we will show you how to deploy a local Keycloak instance (this is not a production deployment, just a demo).
 
@@ -153,6 +153,7 @@ keycloak-0              1/1     Running   0          26m
 keycloak-postgresql-0   1/1     Running   0          26m
 redis-master-0          1/1     Running   0          35s
 ```
+
 When the redis is ready we can deploy livekit-server.
 
 ```
@@ -194,6 +195,7 @@ livekit-livekit-server-5c5fb87f7f-ct6x5   1/1     Running   0          15m
 postgresql-0                              1/1     Running   0          50s
 redis-master-0                            1/1     Running   0          19
 ```
+
 From here important information you will need are :
 
 ```
@@ -231,3 +233,98 @@ meet-admin               <none>   meet.127.0.0.1.nip.io       localhost   80, 44
 ```
 
 You can use Visio on https://meet.127.0.0.1.nip.io. The provisioning user in keycloak is meet/meet.
+
+## All options
+
+These are the environmental options available on meet backend.
+
+| Option                                          | Description                              | default                                                                                                                                                       |
+| ----------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| DJANGO_ALLOWED_HOSTS                            | Host that are allowed                    | []                                                                                                                                                            |
+| DJANGO_SECRET_KEY                               | Secret key used                          |                                                                                                                                                               |
+| DJANGO_SILENCED_SYSTEM_CHECKS                   | Silence system checks                    | []                                                                                                                                                            |
+| DJANGO_ALLOW_UNSECURE_USER_LISTING              |                                          | false                                                                                                                                                         |
+| DB_ENGINE                                       | Database engine used                     | django.db.backends.postgresql_psycopg2                                                                                                                        |
+| DB_NAME                                         | name of the database                     | meet                                                                                                                                                          |
+| DB_USER                                         | user used to connect to database         | dinum                                                                                                                                                         |
+| DB_PASSWORD                                     | password used to connect to the database | pass                                                                                                                                                          |
+| DB_HOST                                         | hostname of the database                 | localhost                                                                                                                                                     |
+| DB_PORT                                         | port to connect to database              | 5432                                                                                                                                                          |
+| STORAGES_STATICFILES_BACKEND                    | Static file serving engine               | whitenoise.storage.CompressedManifestStaticFilesStorage                                                                                                       |
+| AWS_S3_ENDPOINT_URL                             | S3 host endpoint                         |                                                                                                                                                               |
+| AWS_S3_ACCESS_KEY_ID                            | s3 access key                            |                                                                                                                                                               |
+| AWS_S3_SECRET_ACCESS_KEY                        | s3 secret key                            |                                                                                                                                                               |
+| AWS_S3_REGION_NAME                              | s3 region                                |                                                                                                                                                               |
+| AWS_STORAGE_BUCKET_NAME                         | s3 bucket name                           |                                                                                                                                                               |
+| DJANGO_LANGUAGE_CODE                            | Default language                         | en-us                                                                                                                                                         |
+| REDIS_URL                                       | redis endpoint                           | redis://redis:6379/1                                                                                                                                          |
+| REQUEST_ENTRY_THROTTLE_RATES                    | throttle rates                           | 150/minute                                                                                                                                                    |
+| SPECTACULAR_SETTINGS_ENABLE_DJANGO_DEPLOY_CHECK | deploy check                             | False                                                                                                                                                         |
+| FRONTEND_ANALYTICS                              | analytics information                    | {}                                                                                                                                                            |
+| FRONTEND_SUPPORT                                | crisp frontend support                   | {}                                                                                                                                                            |
+| FRONTEND_SILENCE_LIVEKIT_DEBUG                  | silence livekit debug                    | false                                                                                                                                                         |
+| DJANGO_EMAIL_BACKEND                            | email backend library                    | django.core.mail.backends.smtp.EmailBackend                                                                                                                   |
+| DJANGO_EMAIL_HOST                               | host of the email server                 |                                                                                                                                                               |
+| DJANGO_EMAIL_HOST_USER                          | user to connect to the email server      |                                                                                                                                                               |
+| DJANGO_EMAIL_HOST_PASSWORD                      | password to connect tto the email server |                                                                                                                                                               |
+| DJANGO_EMAIL_PORT                               | por tot connect to the email server      |                                                                                                                                                               |
+| DJANGO_EMAIL_USE_TLS                            | enable tls on email connection           | false                                                                                                                                                         |
+| DJANGO_EMAIL_USE_SSL                            | enable tls on email connection           | false                                                                                                                                                         |
+| DJANGO_EMAIL_FROM                               | email from account                       | from@example.com                                                                                                                                              |
+| DJANGO_CORS_ALLOW_ALL_ORIGINS                   | allow all cors origins                   | true                                                                                                                                                          |
+| DJANGO_CORS_ALLOWED_ORIGINS                     | origins to allow in string               | []                                                                                                                                                            |
+| DJANGO_CORS_ALLOWED_ORIGIN_REGEXES              | origins to allow in regex                | []                                                                                                                                                            |
+| SENTRY_DSN                                      | sentry server                            |                                                                                                                                                               |
+| DJANGO_CELERY_BROKER_URL                        | celery broker host                       | redis://redis:6379/0                                                                                                                                          |
+| DJANGO_CELERY_BROKER_TRANSPORT_OPTIONS          | celery broker options                    | {}                                                                                                                                                            |
+| OIDC_CREATE_USER                                | create oidc user if not exists           | false                                                                                                                                                         |
+| OIDC_VERIFY_SSL                                 | verify ssl for oidc                      | true                                                                                                                                                          |
+| OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION       | fallback to email for identification     | false                                                                                                                                                         |
+| OIDC_RP_SIGN_ALGO                               | token verification algoritm used by oidc | RS256                                                                                                                                                         |
+| OIDC_RP_CLIENT_ID                               | oidc client                              | meet                                                                                                                                                          |
+| OIDC_RP_CLIENT_SECRET                           | oidc client secret                       |                                                                                                                                                               |
+| OIDC_OP_JWKS_ENDPOINT                           | oidc endpoint for JWKS                   |                                                                                                                                                               |
+| OIDC_OP_AUTHORIZATION_ENDPOINT                  | oidc endpoint for authorization          |                                                                                                                                                               |
+| OIDC_OP_TOKEN_ENDPOINT                          | oidc endpoint for token                  |                                                                                                                                                               |
+| OIDC_OP_USER_ENDPOINT                           | oidc endpoint for user                   |                                                                                                                                                               |
+| OIDC_OP_LOGOUT_ENDPOINT                         | oidc endpoint for logout                 |                                                                                                                                                               |
+| OIDC_AUTH_REQUEST_EXTRA_PARAMS                  | extra parameters for oidc request        |                                                                                                                                                               |
+| OIDC_RP_SCOPES                                  | oidc scopes                              | openid email                                                                                                                                                  |
+| LOGIN_REDIRECT_URL                              | login redirect url                       |                                                                                                                                                               |
+| LOGIN_REDIRECT_URL_FAILURE                      | login redurect url for failure           |                                                                                                                                                               |
+| LOGOUT_REDIRECT_URL                             | url to redirect to on logout             |                                                                                                                                                               |
+| OIDC_USE_NONCE                                  | use nonce for oidc                       | true                                                                                                                                                          |
+| OIDC_REDIRECT_REQUIRE_HTTPS                     | require https for oidc                   | false                                                                                                                                                         |
+| OIDC_REDIRECT_ALLOWED_HOSTS                     | allowed redirect hosts for oidc          | []                                                                                                                                                            |
+| OIDC_STORE_ID_TOKEN                             | store oidc ID token                      | true                                                                                                                                                          |
+| ALLOW_LOGOUT_GET_METHOD                         | allow logout through get method          | true                                                                                                                                                          |
+| OIDC_REDIRECT_FIELD_NAME                        | direct field for oidc                    | returnTo                                                                                                                                                      |
+| OIDC_USERINFO_FULLNAME_FIELDS                   | full name claim from OIDC token          | ["given_name", "usual_name"]                                                                                                                                  |
+| OIDC_USERINFO_SHORTNAME_FIELD                   | shortname claim from OIDC token          | given_name                                                                                                                                                    |
+| LIVEKIT_API_KEY                                 | livekit api key                          |                                                                                                                                                               |
+| LIVEKIT_API_SECRET                              | livekit api secret                       |                                                                                                                                                               |
+| LIVEKIT_API_URL                                 | livekit api url                          |                                                                                                                                                               |
+| RESOURCE_DEFAULT_ACCESS_LEVEL                   | default resource access level for rooms  | public                                                                                                                                                        |
+| ALLOW_UNREGISTERED_ROOMS                        | Allow usage of unregistered rooms        | true                                                                                                                                                          |
+| RECORDING_ENABLE                                | record meeting option                    | false                                                                                                                                                         |
+| RECORDING_OUTPUT_FOLDER                         | folder to store meetings                 | recordings                                                                                                                                                    |
+| RECORDING_VERIFY_SSL                            | verify ssl for recording storage         | true                                                                                                                                                          |
+| RECORDING_WORKER_CLASSES                        | worker classes for recording             | {"screen_recording": "core.recording.worker.services.VideoCompositeEgressService","transcript": "core.recording.worker.services.AudioCompositeEgressService"} |
+| RECORDING_EVENT_PARSER_CLASS                    | storage event engine for recording       | core.recording.event.parsers.MinioParser                                                                                                                      |
+| RECORDING_ENABLE_STORAGE_EVENT_AUTH             | enable storage event authorization       | true                                                                                                                                                          |
+| RECORDING_STORAGE_EVENT_ENABLE                  | enable recording storage events          | false                                                                                                                                                         |
+| RECORDING_STORAGE_EVENT_TOKEN                   | recording storage event token            |                                                                                                                                                               |
+| SUMMARY_SERVICE_ENDPOINT                        | summary service endpoint                 |                                                                                                                                                               |
+| SUMMARY_SERVICE_API_TOKEN                       | api token voor summary service           |                                                                                                                                                               |
+| SIGNUP_NEW_USER_TO_MARKETING_EMAIL              | signup users to marketing emails         | false                                                                                                                                                         |
+| MARKETING_SERVICE_CLASS                         | markering class                          | core.services.marketing.BrevoMarketingService                                                                                                                 |
+| BREVO_API_KEY                                   | breva api key for marketing emails       |                                                                                                                                                               |
+| BREVO_API_CONTACT_LIST_IDS                      | brevo api contact list ids               | []                                                                                                                                                            |
+| DJANGO_BREVO_API_CONTACT_ATTRIBUTES             | brevo contact attributes                 | {"VISIO_USER": True}                                                                                                                                          |
+| BREVO_API_TIMEOUT                               | brevo timeout                            | 1                                                                                                                                                             |
+| LOBBY_KEY_PREFIX                                | lobby prefix                             | room_lobby                                                                                                                                                    |
+| LOBBY_WAITING_TIMEOUT                           | lobby waiting tumeout                    | 3                                                                                                                                                             |
+| LOBBY_DENIED_TIMEOUT                            | lobby deny timeout                       | 5                                                                                                                                                             |
+| LOBBY_ACCEPTED_TIMEOUT                          | lobby accept timeout                     | 21600                                                                                                                                                         |
+| LOBBY_NOTIFICATION_TYPE                         | lobby notification types                 | participantWaiting                                                                                                                                            |
+| LOBBY_COOKIE_NAME                               | lobby cookie name                        | lobbyParticipantId                                                                                                                                            |

src/backend/core/api/serializers.py

@@ -209,3 +209,17 @@ class ParticipantEntrySerializer(serializers.Serializer):
     def update(self, instance, validated_data):
         """Not implemented as this is a validation-only serializer."""
         raise NotImplementedError("StartRecordingSerializer is validation-only")
+
+
+class CreationCallbackSerializer(serializers.Serializer):
+    """Validate room creation callback data."""
+
+    callback_id = serializers.CharField(required=True)
+
+    def create(self, validated_data):
+        """Not implemented as this is a validation-only serializer."""
+        raise NotImplementedError("StartRecordingSerializer is validation-only")
+
+    def update(self, instance, validated_data):
+        """Not implemented as this is a validation-only serializer."""
+        raise NotImplementedError("StartRecordingSerializer is validation-only")

src/backend/core/api/viewsets.py

@@ -47,6 +47,7 @@ from core.services.lobby import (
     LobbyParticipantNotFound,
     LobbyService,
 )
+from core.services.room_creation import RoomCreation
 
 from . import permissions, serializers
 
@@ -186,6 +187,12 @@ class RequestEntryAnonRateThrottle(throttling.AnonRateThrottle):
     scope = "request_entry"
 
 
+class CreationCallbackAnonRateThrottle(throttling.AnonRateThrottle):
+    """Throttle Anonymous user requesting room generation callback"""
+
+    scope = "creation_callback"
+
+
 class RoomViewSet(
     mixins.CreateModelMixin,
     mixins.DestroyModelMixin,
@@ -268,6 +275,9 @@ class RoomViewSet(
             role=models.RoleChoices.OWNER,
         )
 
+        if callback_id := self.request.data.get("callback_id"):
+            RoomCreation().persist_callback_state(callback_id, room)
+
     @decorators.action(
         detail=True,
         methods=["post"],
@@ -460,6 +470,31 @@ class RoomViewSet(
                 {"status": "error", "message": str(e)}, status=status_code
             )
 
+    @decorators.action(
+        detail=False,
+        methods=["POST"],
+        url_path="creation-callback",
+        permission_classes=[],
+        throttle_classes=[CreationCallbackAnonRateThrottle],
+    )
+    def creation_callback(self, request):
+        """Retrieve cached room data via an unauthenticated request with a unique ID.
+
+        Designed for interoperability across iframes, popups, and other contexts,
+        even on the same domain, bypassing browser security restrictions on direct communication.
+        """
+
+        serializer = serializers.CreationCallbackSerializer(data=request.data)
+        serializer.is_valid(raise_exception=True)
+
+        room = RoomCreation().get_callback_state(
+            callback_id=serializer.validated_data.get("callback_id")
+        )
+
+        return drf_response.Response(
+            {"status": "success", "room": room}, status=drf_status.HTTP_200_OK
+        )
+
 
 class ResourceAccessListModelMixin:
     """List mixin for resource access API."""

src/backend/core/authentication/backends.py

@@ -121,7 +121,9 @@ class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
             contact_data = ContactData(
                 email=email, attributes={"VISIO_SOURCE": ["SIGNIN"]}
             )
-            marketing_service.create_contact(contact_data, timeout=1)
+            marketing_service.create_contact(
+                contact_data, timeout=settings.BREVO_API_TIMEOUT
+            )
         except (ContactCreationError, ImproperlyConfigured, ImportError):
             pass
 

src/backend/core/services/lobby.py

@@ -12,7 +12,12 @@ from django.conf import settings
 from django.core.cache import cache
 
 from asgiref.sync import async_to_sync
-from livekit.api import LiveKitAPI, SendDataRequest, TwirpError  # pylint: disable=E0611
+from livekit.api import (  # pylint: disable=E0611
+    ListRoomsRequest,
+    LiveKitAPI,
+    SendDataRequest,
+    TwirpError,
+)
 
 from core import models, utils
 
@@ -221,6 +226,12 @@ class LobbyService:
             color=color,
         )
 
+        try:
+            self.notify_participants(room_id=room_id)
+        except LobbyNotificationError:
+            # If room not created yet, there is no participants to notify
+            pass
+
         cache_key = self._get_cache_key(room_id, participant_id)
         cache.set(
             cache_key,
@@ -228,12 +239,6 @@ class LobbyService:
             timeout=settings.LOBBY_WAITING_TIMEOUT,
         )
 
-        try:
-            self.notify_participants(room_id=room_id)
-        except LobbyNotificationError:
-            # If room not created yet, there is no participants to notify
-            pass
-
         return participant
 
     def _get_participant(
@@ -343,7 +348,18 @@ class LobbyService:
         }
 
         lkapi = LiveKitAPI(**settings.LIVEKIT_CONFIGURATION)
+
         try:
+            room_response = await lkapi.room.list_rooms(
+                ListRoomsRequest(
+                    names=[str(room_id)],
+                )
+            )
+
+            # Check if the room exists
+            if not room_response.rooms:
+                return
+
             await lkapi.room.send_data(
                 SendDataRequest(
                     room=str(room_id),

src/backend/core/services/room_creation.py

@@ -0,0 +1,37 @@
+"""Room creation service."""
+
+from django.conf import settings
+from django.core.cache import cache
+
+
+class RoomCreation:
+    """Room creation related methods"""
+
+    @staticmethod
+    def _get_cache_key(callback_id):
+        """Generate a standardized cache key for room creation callbacks."""
+        return f"room-creation-callback_{callback_id}"
+
+    def persist_callback_state(self, callback_id: str, room) -> None:
+        """Store room data in cache using the callback ID as an identifier."""
+        data = {
+            "slug": room.slug,
+        }
+        cache.set(
+            self._get_cache_key(callback_id),
+            data,
+            timeout=settings.ROOM_CREATION_CALLBACK_CACHE_TIMEOUT,
+        )
+
+    def get_callback_state(self, callback_id: str) -> dict:
+        """Retrieve and clear cached room data for the given callback ID."""
+
+        cache_key = self._get_cache_key(callback_id)
+        data = cache.get(cache_key)
+
+        if not data:
+            return {}
+
+        cache.delete(cache_key)
+
+        return data

src/backend/core/tests/rooms/test_api_rooms_create.py

@@ -2,6 +2,9 @@
 Test rooms API endpoints in the Meet core app: create.
 """
 
+# pylint: disable=W0621,W0613
+from django.core.cache import cache
+
 import pytest
 from rest_framework.test import APIClient
 
@@ -11,6 +14,15 @@ from ...models import Room
 pytestmark = pytest.mark.django_db
 
 
+@pytest.fixture
+def reset_cache():
+    """Provide cache cleanup after each test to maintain test isolation."""
+    yield
+    keys = cache.keys("room-creation-callback_*")
+    if keys:
+        cache.delete(*keys)
+
+
 def test_api_rooms_create_anonymous():
     """Anonymous users should not be allowed to create rooms."""
     client = APIClient()
@@ -26,7 +38,7 @@ def test_api_rooms_create_anonymous():
     assert Room.objects.exists() is False
 
 
-def test_api_rooms_create_authenticated():
+def test_api_rooms_create_authenticated(reset_cache):
     """
     Authenticated users should be able to create rooms and should automatically be declared
     as owner of the newly created room.
@@ -49,6 +61,33 @@ def test_api_rooms_create_authenticated():
     assert room.slug == "my-room"
     assert room.accesses.filter(role="owner", user=user).exists() is True
 
+    rooms_data = cache.keys("room-creation-callback_*")
+    assert not rooms_data
+
+
+def test_api_rooms_create_generation_cache(reset_cache):
+    """
+    Authenticated users creating a room with a callback ID should have room data stored in cache.
+    """
+    user = UserFactory()
+
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.post(
+        "/api/v1.0/rooms/",
+        {"name": "my room", "callback_id": "1234"},
+    )
+
+    assert response.status_code == 201
+    room = Room.objects.get()
+    assert room.name == "my room"
+    assert room.slug == "my-room"
+    assert room.accesses.filter(role="owner", user=user).exists() is True
+
+    room_data = cache.get("room-creation-callback_1234")
+    assert room_data.get("slug") == "my-room"
+
 
 def test_api_rooms_create_authenticated_existing_slug():
     """

src/backend/core/tests/rooms/test_api_rooms_creation_callback.py

@@ -0,0 +1,98 @@
+"""
+Test rooms API endpoints in the Meet core app: creation callback functionality.
+"""
+
+# pylint: disable=W0621,W0613
+from django.core.cache import cache
+
+import pytest
+from rest_framework.test import APIClient
+
+from ...factories import UserFactory
+
+pytestmark = pytest.mark.django_db
+
+
+# Tests for creation_callback endpoint
+
+
+@pytest.fixture
+def reset_cache():
+    """Provide cache cleanup after each test to maintain test isolation."""
+    yield
+    keys = cache.keys("room-creation-callback_*")
+    if keys:
+        cache.delete(*keys)
+
+
+def test_api_rooms_create_anonymous(reset_cache):
+    """Anonymous user can retrieve room data once using a valid callback ID."""
+    client = APIClient()
+    cache.set("room-creation-callback_123", {"slug": "my room"})
+    response = client.post(
+        "/api/v1.0/rooms/creation-callback/",
+        {
+            "callback_id": "123",
+        },
+    )
+
+    assert response.status_code == 200
+    assert response.json() == {"status": "success", "room": {"slug": "my room"}}
+
+    # Data should be cleared after retrieval
+    response = client.post(
+        "/api/v1.0/rooms/creation-callback/",
+        {
+            "callback_id": "123",
+        },
+    )
+
+    assert response.status_code == 200
+    assert response.json() == {"status": "success", "room": {}}
+
+
+def test_api_rooms_create_empty_cache():
+    """Valid callback ID return empty room data when nothing is stored in the cache."""
+    client = APIClient()
+
+    response = client.post(
+        "/api/v1.0/rooms/creation-callback/",
+        {
+            "callback_id": "123",
+        },
+    )
+
+    assert response.status_code == 200
+    assert response.json() == {"status": "success", "room": {}}
+
+
+def test_api_rooms_create_missing_callback_id():
+    """Requests without a callback ID properly fail with a 400 status code."""
+    client = APIClient()
+
+    response = client.post(
+        "/api/v1.0/rooms/creation-callback/",
+        {},
+    )
+
+    assert response.status_code == 400
+
+
+def test_api_rooms_create_authenticated(reset_cache):
+    """Authenticated users can also successfully retrieve room data using a valid callback ID"""
+    user = UserFactory()
+
+    client = APIClient()
+    client.force_login(user)
+
+    cache.set("room-creation-callback_123", {"slug": "my room"})
+
+    response = client.post(
+        "/api/v1.0/rooms/creation-callback/",
+        {
+            "callback_id": "123",
+        },
+    )
+
+    assert response.status_code == 200
+    assert response.json() == {"status": "success", "room": {"slug": "my room"}}

src/backend/core/tests/services/test_lobby.py

@@ -776,6 +776,43 @@ def test_update_participant_status_success(mock_cache, lobby_service, participan
     lobby_service._get_cache_key.assert_called_once_with(room.id, participant_id)
 
 
+@mock.patch("core.services.lobby.LiveKitAPI")
+def test_notify_participants_success_no_room(mock_livekit_api, lobby_service):
+    """Test the notify_participants method when the LiveKit room doesn't exist yet."""
+    room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED)
+
+    # Set up the mock LiveKitAPI and its behavior
+    mock_api_instance = mock.Mock()
+    mock_api_instance.room = mock.Mock()
+    mock_api_instance.room.send_data = mock.AsyncMock()
+
+    # Create a proper response object with an empty rooms list
+    class MockResponse:
+        """LiveKit API response mock with empty rooms list."""
+
+        rooms = []
+
+    mock_api_instance.room.list_rooms = mock.AsyncMock(return_value=MockResponse())
+    mock_api_instance.aclose = mock.AsyncMock()
+    mock_livekit_api.return_value = mock_api_instance
+
+    # Act
+    lobby_service.notify_participants(room.id)
+
+    # Assert
+    # Verify the API was initialized with correct configuration
+    mock_livekit_api.assert_called_once_with(**settings.LIVEKIT_CONFIGURATION)
+
+    # Verify that the service checked for existing rooms
+    mock_api_instance.room.list_rooms.assert_called_once()
+
+    # Verify the send_data method was not called since no room exists
+    mock_api_instance.room.send_data.assert_not_called()
+
+    # Verify the connection was properly closed
+    mock_api_instance.aclose.assert_called_once()
+
+
 @mock.patch("core.services.lobby.LiveKitAPI")
 def test_notify_participants_success(mock_livekit_api, lobby_service):
     """Test successful participant notification."""
@@ -784,6 +821,14 @@ def test_notify_participants_success(mock_livekit_api, lobby_service):
     mock_api_instance = mock.Mock()
     mock_api_instance.room = mock.Mock()
     mock_api_instance.room.send_data = mock.AsyncMock()
+
+    class MockResponse:
+        """LiveKit API response mock with non-empty rooms list."""
+
+        rooms = ["room-1"]
+
+    mock_api_instance.room.list_rooms = mock.AsyncMock(return_value=MockResponse())
+
     mock_api_instance.aclose = mock.AsyncMock()
     mock_livekit_api.return_value = mock_api_instance
 
@@ -793,6 +838,9 @@ def test_notify_participants_success(mock_livekit_api, lobby_service):
     # Verify the API was called correctly
     mock_livekit_api.assert_called_once_with(**settings.LIVEKIT_CONFIGURATION)
 
+    # Verify that the service checked for existing rooms
+    mock_api_instance.room.list_rooms.assert_called_once()
+
     # Verify the send_data method was called
     mock_api_instance.room.send_data.assert_called_once()
     send_data_request = mock_api_instance.room.send_data.call_args[0][0]
@@ -817,6 +865,14 @@ def test_notify_participants_error(mock_livekit_api, lobby_service):
     mock_api_instance.room.send_data = mock.AsyncMock(
         side_effect=TwirpError(msg="test error", code=123)
     )
+
+    class MockResponse:
+        """LiveKit API response mock with non-empty rooms list."""
+
+        rooms = ["room-1"]
+
+    mock_api_instance.room.list_rooms = mock.AsyncMock(return_value=MockResponse())
+
     mock_api_instance.aclose = mock.AsyncMock()
     mock_livekit_api.return_value = mock_api_instance
 
@@ -829,6 +885,9 @@ def test_notify_participants_error(mock_livekit_api, lobby_service):
     # Verify the API was called correctly
     mock_livekit_api.assert_called_once_with(**settings.LIVEKIT_CONFIGURATION)
 
+    # Verify that the service checked for existing rooms
+    mock_api_instance.room.list_rooms.assert_called_once()
+
     # Verify send_data was called
     mock_api_instance.room.send_data.assert_called_once()
 

src/backend/meet/settings.py

@@ -19,6 +19,7 @@ from django.utils.translation import gettext_lazy as _
 import sentry_sdk
 from configurations import Configuration, values
 from sentry_sdk.integrations.django import DjangoIntegration
+from sentry_sdk.integrations.logging import ignore_logger
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
@@ -271,6 +272,11 @@ class Base(Configuration):
                 environ_name="REQUEST_ENTRY_THROTTLE_RATES",
                 environ_prefix=None,
             ),
+            "creation_callback": values.Value(
+                default="600/minute",
+                environ_name="CREATION_CALLBACK_THROTTLE_RATES",
+                environ_prefix=None,
+            ),
         },
     }
 
@@ -497,6 +503,9 @@ class Base(Configuration):
         converter=lambda x: int(x),  # pylint: disable=unnecessary-lambda
     )
     BREVO_API_CONTACT_ATTRIBUTES = values.DictValue({"VISIO_USER": True})
+    BREVO_API_TIMEOUT = values.PositiveIntegerValue(
+        1, environ_name="BREVO_API_TIMEOUT", environ_prefix=None
+    )
 
     # Lobby configurations
     LOBBY_KEY_PREFIX = values.Value(
@@ -524,6 +533,13 @@ class Base(Configuration):
         environ_prefix=None,
     )
 
+    # Calendar integrations
+    ROOM_CREATION_CALLBACK_CACHE_TIMEOUT = values.PositiveIntegerValue(
+        600,  # 10 minutes
+        environ_name="ROOM_CREATION_CALLBACK_CACHE_TIMEOUT",
+        environ_prefix=None,
+    )
+
     # pylint: disable=invalid-name
     @property
     def ENVIRONMENT(self):
@@ -575,6 +591,9 @@ class Base(Configuration):
             scope = sentry_sdk.get_global_scope()
             scope.set_tag("application", "backend")
 
+            # Ignore the logs added by the DockerflowMiddleware
+            ignore_logger("request.summary")
+
 
 class Build(Base):
     """Settings used when the application is built.

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "meet"
-version = "0.1.15"
+version = "0.1.17"
 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.37.4",
+    "boto3==1.37.18",
     "Brotli==1.1.0",
     "brevo-python==1.1.2",
     "celery[redis]==5.4.0",
@@ -48,16 +48,16 @@ dependencies = [
     "june-analytics-python==2.3.0",
     "markdown==3.7",
     "nested-multipart-parser==1.5.0",
-    "psycopg[binary]==3.2.5",
+    "psycopg[binary]==3.2.6",
     "PyJWT==2.10.1",
     "python-frontmatter==1.1.0",
     "requests==2.32.3",
-    "sentry-sdk==2.22.0",
+    "sentry-sdk==2.24.1",
     "url-normalize==1.4.3",
     "whitenoise==6.9.0",
     "mozilla-django-oidc==4.0.1",
     "livekit-api==0.8.2",
-    "aiohttp==3.11.13",
+    "aiohttp==3.11.14",
 ]
 
 [project.urls]
@@ -72,18 +72,18 @@ dev = [
     "drf-spectacular-sidecar==2025.3.1",
     "freezegun==1.5.1",
     "ipdb==0.13.13",
-    "ipython==9.0.1",
-    "pyfakefs==5.7.4",
+    "ipython==9.0.2",
+    "pyfakefs==5.8.0",
     "pylint-django==2.6.1",
-    "pylint==3.3.4",
+    "pylint==3.3.6",
     "pytest-cov==6.0.0",
     "pytest-django==4.10.0",
     "pytest==8.3.5",
     "pytest-icdiff==0.9",
     "pytest-xdist==3.6.1",
-    "responses==0.25.6",
-    "ruff==0.9.9",
-    "types-requests==2.32.0.20250301",
+    "responses==0.25.7",
+    "ruff==0.11.2",
+    "types-requests==2.32.0.20250306",
 ]
 
 [tool.setuptools]

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "meet",
   "private": true,
-  "version": "0.1.15",
+  "version": "0.1.17",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",
@@ -16,45 +16,45 @@
     "@livekit/components-react": "2.8.1",
     "@livekit/components-styles": "1.1.4",
     "@livekit/track-processors": "0.3.3",
-    "@pandacss/preset-panda": "0.53.0",
-    "@react-aria/toast": "3.0.0-beta.19",
+    "@pandacss/preset-panda": "0.53.3",
+    "@react-aria/toast": "3.0.1",
     "@remixicon/react": "4.6.0",
-    "@tanstack/react-query": "5.67.1",
+    "@tanstack/react-query": "5.69.0",
     "crisp-sdk-web": "1.0.25",
     "hoofd": "1.7.3",
-    "i18next": "24.2.2",
+    "i18next": "24.2.3",
     "i18next-browser-languagedetector": "8.0.4",
     "i18next-parser": "9.3.0",
     "i18next-resources-to-backend": "1.2.1",
-    "livekit-client": "2.9.5",
-    "posthog-js": "1.225.1",
+    "livekit-client": "2.9.8",
+    "posthog-js": "1.232.6",
     "react": "18.3.1",
-    "react-aria-components": "1.6.0",
+    "react-aria-components": "1.7.1",
     "react-dom": "18.3.1",
     "react-i18next": "15.1.1",
     "use-sound": "5.0.0",
-    "valtio": "2.1.3",
+    "valtio": "2.1.4",
     "wouter": "3.6.0"
   },
   "devDependencies": {
-    "@pandacss/dev": "0.53.0",
-    "@tanstack/eslint-plugin-query": "5.66.1",
-    "@tanstack/react-query-devtools": "5.67.1",
-    "@types/node": "22.13.9",
+    "@pandacss/dev": "0.53.3",
+    "@tanstack/eslint-plugin-query": "5.68.0",
+    "@tanstack/react-query-devtools": "5.69.0",
+    "@types/node": "22.13.13",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
-    "@typescript-eslint/eslint-plugin": "8.26.0",
-    "@typescript-eslint/parser": "8.26.0",
+    "@typescript-eslint/eslint-plugin": "8.28.0",
+    "@typescript-eslint/parser": "8.28.0",
     "@vitejs/plugin-react": "4.3.4",
     "eslint": "8.57.0",
-    "eslint-config-prettier": "10.0.2",
+    "eslint-config-prettier": "10.1.1",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-react-refresh": "0.4.19",
     "postcss": "8.5.3",
     "prettier": "3.5.3",
     "typescript": "5.8.2",
-    "vite": "6.2.0",
+    "vite": "6.2.3",
     "vite-tsconfig-paths": "5.1.4"
   }
 }

src/frontend/panda.config.ts

@@ -35,40 +35,7 @@ const config: Config = {
   exclude: [],
   jsxFramework: 'react',
   outdir: 'src/styled-system',
-  globalFontface: {
-    Marianne: [
-      {
-        src: 'url(/fonts/Marianne-Regular-subset.woff2) format("woff2")',
-        fontWeight: 400,
-        fontStyle: 'normal',
-        fontDisplay: 'swap',
-      },
-      {
-        path: 'url(/fonts/Marianne-Regular_Italic-subset.woff2) format("woff2")',
-        fontWeight: 400,
-        fontStyle: 'italic',
-        fontDisplay: 'swap',
-      },
-      {
-        path: 'url(/fonts/Marianne-Medium-subset.woff2) format("woff2")',
-        fontWeight: 500,
-        fontStyle: 'normal',
-        fontDisplay: 'swap',
-      },
-      {
-        path: 'url(/fonts/Marianne-Bold-subset.woff2) format("woff2")',
-        fontWeight: 700,
-        fontStyle: 'normal',
-        fontDisplay: 'swap',
-      },
-      {
-        path: 'url(/fonts/Marianne-ExtraBold-subset.woff2) format("woff2")',
-        fontWeight: 800,
-        fontStyle: 'normal',
-        fontDisplay: 'swap',
-      },
-    ],
-  },
+  globalFontface: {},
   theme: {
     ...pandaPreset.theme,
     // media queries are defined in em so that zooming with text-only mode triggers breakpoints

src/frontend/src/App.tsx

@@ -5,7 +5,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { useLang } from 'hoofd'
-import { Switch, Route, useLocation } from 'wouter'
+import { Switch, Route } from 'wouter'
 import { I18nProvider } from 'react-aria-components'
 import { Layout } from './layout/Layout'
 import { NotFoundScreen } from './components/NotFoundScreen'
@@ -13,35 +13,11 @@ import { routes } from './routes'
 import './i18n/init'
 import { queryClient } from '@/api/queryClient'
 import { AppInitialization } from '@/components/AppInitialization'
-import { SdkCreateButton } from './features/sdk/routes/CreateButton'
-
-const SDK_BASE_ROUTE = '/sdk'
 
 function App() {
   const { i18n } = useTranslation()
   useLang(i18n.language)
 
-  const [location] = useLocation()
-  const isSDKRoute = location.startsWith(SDK_BASE_ROUTE)
-
-  if (isSDKRoute) {
-    return (
-      <QueryClientProvider client={queryClient}>
-        <Suspense fallback={null}>
-          <I18nProvider locale={i18n.language}>
-            <Switch>
-              <Route path={SDK_BASE_ROUTE} nest>
-                <Route path="/create-button">
-                  <SdkCreateButton />
-                </Route>
-              </Route>
-            </Switch>
-          </I18nProvider>
-        </Suspense>
-      </QueryClientProvider>
-    )
-  }
-
   return (
     <QueryClientProvider client={queryClient}>
       <AppInitialization />
@@ -55,7 +31,10 @@ function App() {
               <Route component={NotFoundScreen} />
             </Switch>
           </Layout>
-          <ReactQueryDevtools initialIsOpen={false} buttonPosition="top-left" />
+          <ReactQueryDevtools
+            initialIsOpen={false}
+            buttonPosition="bottom-left"
+          />
         </I18nProvider>
       </Suspense>
     </QueryClientProvider>

src/frontend/src/api/queryKeys.ts

@@ -4,4 +4,5 @@ export const keys = {
   config: 'config',
   requestEntry: 'requestEntry',
   waitingParticipants: 'waitingParticipants',
+  roomCreationCallback: 'roomCreationCallback',
 }

src/frontend/src/components/AppInitialization.tsx

@@ -2,9 +2,13 @@ import { silenceLiveKitLogs } from '@/utils/livekit'
 import { useConfig } from '@/api/useConfig'
 import { useAnalytics } from '@/features/analytics/hooks/useAnalytics'
 import { useSupport } from '@/features/support/hooks/useSupport'
+import { useLocation } from 'wouter'
+
+const SDK_BASE_ROUTE = '/sdk'
 
 export const AppInitialization = () => {
   const { data } = useConfig()
+  const [location] = useLocation()
 
   const {
     analytics = {},
@@ -12,8 +16,11 @@ export const AppInitialization = () => {
     silence_livekit_debug_logs = false,
   } = data || {}
 
-  useAnalytics(analytics)
-  useSupport(support)
+  const isSDKContext = location.includes(SDK_BASE_ROUTE)
+
+  useAnalytics({ ...analytics, isDisabled: isSDKContext })
+  useSupport({ ...support, isDisabled: isSDKContext })
+
   silenceLiveKitLogs(silence_livekit_debug_logs)
 
   return null

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

@@ -17,18 +17,19 @@ export const terminateAnalyticsSession = () => {
 export type useAnalyticsProps = {
   id?: string
   host?: string
+  isDisabled?: boolean
 }
 
-export const useAnalytics = ({ id, host }: useAnalyticsProps) => {
+export const useAnalytics = ({ id, host, isDisabled }: useAnalyticsProps) => {
   const [location] = useLocation()
   useEffect(() => {
-    if (!id || !host) return
+    if (!id || !host || isDisabled) return
     if (posthog.__loaded) return
     posthog.init(id, {
       api_host: host,
       person_profiles: 'always',
     })
-  }, [id, host])
+  }, [id, host, isDisabled])
 
   // From PostHog tutorial on PageView tracking in a Single Page Application (SPA) context.
   useEffect(() => {

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

@@ -48,7 +48,7 @@ export const useUser = (
   const isLoggedOut = isLoggedIn === false
 
   return {
-    ...query,
+    refetch: query.refetch,
     user: isLoggedOut ? undefined : (query.data as ApiUser | undefined),
     isLoggedIn,
     logout,

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

@@ -8,19 +8,16 @@ import { Button, LinkButton } from '@/primitives'
 import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-
-// todo - extract in a proper env variable
-const BETA_USERS_FORM_URL =
-  'https://grist.numerique.gouv.fr/o/docs/forms/3fFfvJoTBEQ6ZiMi8zsQwX/17'
+import { BETA_USERS_FORM_URL } from '@/utils/constants'
 
 const Heading = styled('h2', {
   base: {
     width: 'fit-content',
     marginBottom: 0,
     fontSize: '1.3rem',
-    fontWeight: '600',
+    fontWeight: '700',
     marginTop: '0.75rem',
-    lineHeight: '2rem',
+    lineHeight: '1.7rem',
     maxWidth: '23rem',
     textAlign: 'center',
     textWrap: 'balance',

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

@@ -13,12 +13,11 @@ import { RiAddLine, RiLink } from '@remixicon/react'
 import { LaterMeetingDialog } from '@/features/home/components/LaterMeetingDialog'
 import { IntroSlider } from '@/features/home/components/IntroSlider'
 import { MoreLink } from '@/features/home/components/MoreLink'
-import { ReactNode, useEffect, useState } from 'react'
+import { ReactNode, useState } from 'react'
 
 import { css } from '@/styled-system/css'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
 import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices'
-import { SdkReverseClient } from '@/features/sdk/SdkReverseClient'
 
 const Columns = ({ children }: { children?: ReactNode }) => {
   return (
@@ -120,7 +119,7 @@ const Separator = styled('div', {
 
 const Heading = styled('h1', {
   base: {
-    fontWeight: '600',
+    fontWeight: '700',
     fontStyle: 'normal',
     fontStretch: 'normal',
     fontOpticalSizing: 'auto',
@@ -156,18 +155,6 @@ export const Home = () => {
   const { mutateAsync: createRoom } = useCreateRoom()
   const [laterRoomId, setLaterRoomId] = useState<null | string>(null)
 
-  const { user } = useUser()
-
-  /**
-   * Used for SDK popup to close automatically.
-   */
-  useEffect(() => {
-    if (!user) {
-      return
-    }
-    SdkReverseClient.broadcastAuthentication()
-  }, [user])
-
   return (
     <UserAware>
       <Screen>

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

@@ -88,6 +88,24 @@ export const MainNotificationToast = () => {
           if (notification.data?.emoji)
             handleEmoji(notification.data.emoji, participant)
           break
+        case NotificationType.TranscriptionStarted:
+          toastQueue.add(
+            {
+              participant,
+              type: NotificationType.TranscriptionStarted,
+            },
+            { timeout: NotificationDuration.ALERT }
+          )
+          break
+        case NotificationType.TranscriptionStopped:
+          toastQueue.add(
+            {
+              participant,
+              type: NotificationType.TranscriptionStopped,
+            },
+            { timeout: NotificationDuration.ALERT }
+          )
+          break
         default:
           return
       }

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

@@ -6,4 +6,6 @@ export enum NotificationType {
   LowerHand = 'lowerHand',
   ReactionReceived = 'reactionReceived',
   ParticipantWaiting = 'participantWaiting',
+  TranscriptionStarted = 'transcriptionStarted',
+  TranscriptionStopped = 'transcriptionStopped',
 }

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

@@ -9,6 +9,7 @@ import { ToastRaised } from './ToastRaised'
 import { ToastMuted } from './ToastMuted'
 import { ToastMessageReceived } from './ToastMessageReceived'
 import { ToastLowerHand } from './ToastLowerHand'
+import { ToastTranscription } from '@/features/notifications/components/ToastTranscription.tsx'
 
 interface ToastRegionProps extends AriaToastRegionProps {
   state: ToastState<ToastData>
@@ -36,6 +37,12 @@ const renderToast = (
     case NotificationType.LowerHand:
       return <ToastLowerHand key={toast.key} toast={toast} state={state} />
 
+    case NotificationType.TranscriptionStarted:
+      return <ToastTranscription key={toast.key} toast={toast} state={state} />
+
+    case NotificationType.TranscriptionStopped:
+      return <ToastTranscription key={toast.key} toast={toast} state={state} />
+
     default:
       return <Toast key={toast.key} toast={toast} state={state} />
   }

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

@@ -0,0 +1,35 @@
+import { useToast } from '@react-aria/toast'
+import { useRef } from 'react'
+
+import { StyledToastContainer, ToastProps } from './Toast'
+import { HStack } from '@/styled-system/jsx'
+import { useTranslation } from 'react-i18next'
+import { NotificationType } from '../NotificationType'
+
+export function ToastTranscription({ state, ...props }: ToastProps) {
+  const { t } = useTranslation('notifications')
+  const ref = useRef(null)
+  const { toastProps, contentProps } = useToast(props, state, ref)
+  const participant = props.toast.content.participant
+
+  return (
+    <StyledToastContainer {...toastProps} ref={ref}>
+      <HStack
+        justify="center"
+        alignItems="center"
+        {...contentProps}
+        padding={14}
+        gap={0}
+      >
+        {t(
+          props.toast.content.type == NotificationType.TranscriptionStarted
+            ? 'recordingStarted'
+            : 'recordingStopped',
+          {
+            name: participant.name,
+          }
+        )}
+      </HStack>
+    </StyledToastContainer>
+  )
+}

src/frontend/src/features/rooms/api/createRoom.ts

@@ -5,17 +5,20 @@ import { ApiRoom } from './ApiRoom'
 
 export interface CreateRoomParams {
   slug: string
+  callbackId?: string
   username?: string
 }
 
 const createRoom = ({
   slug,
+  callbackId,
   username = '',
 }: CreateRoomParams): Promise<ApiRoom> => {
   return fetchApi(`rooms/?username=${encodeURIComponent(username)}`, {
     method: 'POST',
     body: JSON.stringify({
       name: slug,
+      callback_id: callbackId,
     }),
   })
 }

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

@@ -298,7 +298,7 @@ export const Join = ({
       case ApiLobbyStatus.TIMEOUT:
         return (
           <VStack alignItems="center" textAlign="center">
-            <H lvl={1} margin={false}>
+            <H lvl={1} margin={false} centered>
               {t('timeoutInvite.title')}
             </H>
             <Text as="p" variant="note">
@@ -310,7 +310,7 @@ export const Join = ({
       case ApiLobbyStatus.DENIED:
         return (
           <VStack alignItems="center" textAlign="center">
-            <H lvl={1} margin={false}>
+            <H lvl={1} margin={false} centered>
               {t('denied.title')}
             </H>
             <Text as="p" variant="note">
@@ -322,7 +322,7 @@ export const Join = ({
       case ApiLobbyStatus.WAITING:
         return (
           <VStack alignItems="center" textAlign="center">
-            <H lvl={1} margin={false}>
+            <H lvl={1} margin={false} centered>
               {t('waiting.title')}
             </H>
             <Text
@@ -346,7 +346,7 @@ export const Join = ({
             }}
           >
             <VStack marginBottom={1}>
-              <H lvl={1} margin="sm">
+              <H lvl={1} margin="sm" centered>
                 {t('heading')}
               </H>
               <Field

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

@@ -37,7 +37,14 @@ export const Admin = () => {
       flexDirection="column"
       alignItems="start"
     >
-      <Text variant="note" wrap="pretty" margin="md">
+      <Text
+        variant="note"
+        wrap="pretty"
+        className={css({
+          textStyle: 'sm',
+        })}
+        margin={'md'}
+      >
         {t('description')}
       </Text>
       <RACSeparator
@@ -68,8 +75,8 @@ export const Admin = () => {
       </Text>
       <Field
         type="radioGroup"
-        label="Type d'accès à la réunion"
-        aria-label="Type d'accès à la réunion"
+        label={t('access.type')}
+        aria-label={t('access.type')}
         labelProps={{
           className: css({
             fontSize: '1rem',

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

@@ -75,7 +75,7 @@ export function FloatingReaction({
     >
       <span
         className={css({
-          lineHeight: '45px',
+          lineHeight: '57px',
         })}
       >
         {emoji}
@@ -89,9 +89,10 @@ export function FloatingReaction({
             textAlign: 'center',
             borderRadius: '20px',
             paddingX: '0.5rem',
-            paddingY: '0.15rem',
+            paddingBottom: '0.3125rem',
+            paddingTop: '0.15rem',
             boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
-            lineHeight: '14px',
+            lineHeight: '16px',
           })}
         >
           {name}

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

@@ -1,43 +0,0 @@
-import { css } from '@/styled-system/css'
-import { RiRecordCircleLine } from '@remixicon/react'
-import { Text } from '@/primitives'
-import { useTranslation } from 'react-i18next'
-import { useRoomContext } from '@livekit/components-react'
-
-export const RecordingStateToast = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'recording' })
-
-  const room = useRoomContext()
-
-  if (!room?.isRecording) return
-
-  return (
-    <div
-      className={css({
-        display: 'flex',
-        position: 'fixed',
-        top: '10px',
-        left: '10px',
-        paddingY: '0.25rem',
-        paddingX: '0.25rem 0.35rem',
-        backgroundColor: 'primaryDark.200',
-        borderColor: 'primaryDark.400',
-        border: '1px solid',
-        color: 'white',
-        borderRadius: '4px',
-        gap: '0.5rem',
-      })}
-    >
-      <RiRecordCircleLine
-        size={20}
-        className={css({
-          color: 'white',
-          backgroundColor: 'danger.700',
-          padding: '3px',
-          borderRadius: '3px',
-        })}
-      />
-      <Text variant={'sm'}>{t('label')}</Text>
-    </div>
-  )
-}

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

@@ -3,15 +3,15 @@ import { css } from '@/styled-system/css'
 import { Heading } from 'react-aria-components'
 import { text } from '@/primitives/Text'
 import { Button, Div } from '@/primitives'
-import { RiCloseLine } from '@remixicon/react'
+import { RiArrowLeftLine, 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 { Chat } from '../prefabs/Chat'
-import { Transcript } from './Transcript'
 import { Effects } from './effects/Effects'
 import { Admin } from './Admin'
+import { Tools } from '@/features/rooms/livekit/components/Tools.tsx'
 
 type StyledSidePanelProps = {
   title: string
@@ -19,6 +19,8 @@ type StyledSidePanelProps = {
   onClose: () => void
   isClosed: boolean
   closeButtonTooltip: string
+  isSubmenu: boolean
+  onBack: () => void
 }
 
 const StyledSidePanel = ({
@@ -27,6 +29,8 @@ const StyledSidePanel = ({
   onClose,
   isClosed,
   closeButtonTooltip,
+  isSubmenu = false,
+  onBack,
 }: StyledSidePanelProps) => (
   <div
     className={css({
@@ -61,9 +65,22 @@ const StyledSidePanel = ({
       style={{
         paddingLeft: '1.5rem',
         paddingTop: '1rem',
-        display: isClosed ? 'none' : undefined,
+        display: isClosed ? 'none' : 'flex',
+        justifyContent: 'start',
+        alignItems: 'center',
       }}
     >
+      {isSubmenu && (
+        <Button
+          variant="secondaryText"
+          size={'sm'}
+          square
+          className={css({ marginRight: '0.5rem' })}
+          onPress={onBack}
+        >
+          <RiArrowLeftLine size={20} />
+        </Button>
+      )}
       {title}
     </Heading>
     <Div
@@ -114,19 +131,25 @@ export const SidePanel = () => {
     isEffectsOpen,
     isChatOpen,
     isSidePanelOpen,
-    isTranscriptOpen,
+    isToolsOpen,
     isAdminOpen,
+    isSubPanelOpen,
+    activeSubPanelId,
   } = useSidePanel()
   const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' })
-
   return (
     <StyledSidePanel
-      title={t(`heading.${activePanelId}`)}
-      onClose={() => (layoutStore.activePanelId = null)}
+      title={t(`heading.${activeSubPanelId || activePanelId}`)}
+      onClose={() => {
+        layoutStore.activePanelId = null
+        layoutStore.activeSubPanelId = null
+      }}
       closeButtonTooltip={t('closeButton', {
-        content: t(`content.${activePanelId}`),
+        content: t(`content.${activeSubPanelId || activePanelId}`),
       })}
       isClosed={!isSidePanelOpen}
+      isSubmenu={isSubPanelOpen}
+      onBack={() => (layoutStore.activeSubPanelId = null)}
     >
       <Panel isOpen={isParticipantsOpen}>
         <ParticipantsList />
@@ -137,8 +160,8 @@ export const SidePanel = () => {
       <Panel isOpen={isChatOpen}>
         <Chat />
       </Panel>
-      <Panel isOpen={isTranscriptOpen}>
-        <Transcript />
+      <Panel isOpen={isToolsOpen}>
+        <Tools />
       </Panel>
       <Panel isOpen={isAdminOpen}>
         <Admin />

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

@@ -0,0 +1,102 @@
+import { A, Div, Text } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { Button as RACButton } from 'react-aria-components'
+import { RiFileTextFill } from '@remixicon/react'
+import { Transcript } from '@/features/rooms/livekit/components/Transcript'
+import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
+import { useTranslation } from 'react-i18next'
+import { useIsTranscriptEnabled } from '@/features/rooms/livekit/hooks/useIsTranscriptEnabled.ts'
+
+const CRISP_HELP_ARTICLE =
+  'https://lasuite.crisp.help/fr/article/visio-tools-bvxj23'
+
+const ActionButton = ({ icon, title, description, onPress }) => {
+  return (
+    <RACButton
+      className={css({
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'start',
+        paddingY: '0.5rem',
+        paddingX: '0.75rem 1.5rem',
+        borderRadius: '5px',
+        gap: '1.25rem',
+        width: 'full',
+        textAlign: 'start',
+        '&[data-hovered]': {
+          backgroundColor: 'primary.50',
+          cursor: 'pointer',
+        },
+      })}
+      onPress={onPress}
+    >
+      <div
+        className={css({
+          height: '50px',
+          minWidth: '50px',
+          borderRadius: '25px',
+          backgroundColor: 'primary.800',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        })}
+      >
+        {icon}
+      </div>
+      <div>
+        <Text margin={false} as="h3">
+          {title}
+        </Text>
+        <Text as="p" variant="smNote" wrap="pretty">
+          {description}
+        </Text>
+      </div>
+    </RACButton>
+  )
+}
+
+export const Tools = () => {
+  const { openTranscript, isTranscriptOpen } = useSidePanel()
+  const { t } = useTranslation('rooms', { keyPrefix: 'moreTools' })
+  const isTranscriptEnabled = useIsTranscriptEnabled()
+
+  if (isTranscriptOpen && isTranscriptEnabled) {
+    return <Transcript />
+  }
+
+  return (
+    <Div
+      display="flex"
+      overflowY="scroll"
+      padding="0 0.75rem"
+      flexGrow={1}
+      flexDirection="column"
+      alignItems="start"
+    >
+      <Text
+        variant="note"
+        wrap="balance"
+        className={css({
+          textStyle: 'sm',
+          paddingX: '0.75rem',
+        })}
+        margin="md"
+      >
+        {t('body')}{' '}
+        <A href={CRISP_HELP_ARTICLE} target="_blank">
+          {t('moreLink')}
+        </A>
+        .
+      </Text>
+      {isTranscriptEnabled && (
+        <ActionButton
+          icon={<RiFileTextFill size={24} color="white" />}
+          title={t('tools.transcript.title')}
+          description={t('tools.transcript.body')}
+          onPress={() => openTranscript()}
+        />
+      )}
+    </Div>
+  )
+}

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

@@ -1,10 +1,7 @@
-import { Button, Div, H, Text } from '@/primitives'
+import { A, Button, Div, LinkButton, Text } from '@/primitives'
 
 import thirdSlide from '@/assets/intro-slider/3_resume.png'
 import { css } from '@/styled-system/css'
-
-import { useHasTranscriptAccess } from '../hooks/useHasTranscriptAccess'
-import { RiRecordCircleLine, RiStopCircleLine } from '@remixicon/react'
 import { useRoomId } from '@/features/rooms/livekit/hooks/useRoomId'
 import { useRoomContext } from '@livekit/components-react'
 import {
@@ -12,22 +9,34 @@ import {
   useStartRecording,
 } from '@/features/rooms/api/startRecording'
 import { useStopRecording } from '@/features/rooms/api/stopRecording'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { RoomEvent } from 'livekit-client'
 import { useTranslation } from 'react-i18next'
+import { NotificationPayload } from '@/features/notifications/NotificationPayload.ts'
+import { NotificationType } from '@/features/notifications/NotificationType.ts'
+import { useSnapshot } from 'valtio/index'
+import {
+  TranscriptionStatus,
+  transcriptionStore,
+} from '@/stores/transcription.ts'
+import { useHasTranscriptAccess } from '../hooks/useHasTranscriptAccess.ts'
+import { BETA_USERS_FORM_URL } from '@/utils/constants.ts'
+
+const CRISP_HELP_ARTICLE =
+  'https://lasuite.crisp.help/fr/article/visio-transcript-1sjq43x'
 
 export const Transcript = () => {
   const [isLoading, setIsLoading] = useState(false)
-
   const { t } = useTranslation('rooms', { keyPrefix: 'transcript' })
 
   const hasTranscriptAccess = useHasTranscriptAccess()
-
   const roomId = useRoomId()
 
   const { mutateAsync: startRecordingRoom } = useStartRecording()
   const { mutateAsync: stopRecordingRoom } = useStopRecording()
 
+  const transcriptionSnap = useSnapshot(transcriptionStore)
+
   const room = useRoomContext()
 
   useEffect(() => {
@@ -40,6 +49,17 @@ export const Transcript = () => {
     }
   }, [room])
 
+  const notifyParticipant = async (status) => {
+    const encoder = new TextEncoder()
+    const payload: NotificationPayload = {
+      type: status,
+    }
+    const data = encoder.encode(JSON.stringify(payload))
+    await room.localParticipant.publishData(data, {
+      reliable: true,
+    })
+  }
+
   const handleTranscript = async () => {
     if (!roomId) {
       console.warn('No room ID found')
@@ -49,8 +69,12 @@ export const Transcript = () => {
       setIsLoading(true)
       if (room.isRecording) {
         await stopRecordingRoom({ id: roomId })
+        await notifyParticipant(NotificationType.TranscriptionStopped)
+        transcriptionStore.status = TranscriptionStatus.STOPPING
       } else {
         await startRecordingRoom({ id: roomId, mode: RecordingMode.Transcript })
+        await notifyParticipant(NotificationType.TranscriptionStarted)
+        transcriptionStore.status = TranscriptionStatus.STARTING
       }
     } catch (error) {
       console.error('Failed to handle transcript:', error)
@@ -58,7 +82,13 @@ export const Transcript = () => {
     }
   }
 
-  if (!hasTranscriptAccess) return
+  const isDisabled = useMemo(
+    () =>
+      isLoading ||
+      transcriptionSnap.status === TranscriptionStatus.STARTING ||
+      transcriptionSnap.status === TranscriptionStatus.STOPPING,
+    [isLoading, transcriptionSnap]
+  )
 
   return (
     <Div
@@ -69,38 +99,98 @@ export const Transcript = () => {
       flexDirection="column"
       alignItems="center"
     >
-      <img src={thirdSlide} alt={'wip'} />
-      {room.isRecording ? (
+      <img
+        src={thirdSlide}
+        alt={''}
+        className={css({
+          minHeight: '309px',
+          marginBottom: '1rem',
+        })}
+      />
+      {!hasTranscriptAccess ? (
         <>
-          <H lvl={2}>{t('stop.heading')}</H>
-          <Text variant="sm" centered wrap="balance">
-            {t('stop.body')}
-          </Text>
-          <div className={css({ height: '2rem' })} />
-          <Button
-            isDisabled={isLoading}
-            onPress={() => handleTranscript()}
-            data-attr="stop-transcript"
+          <Text>{t('beta.heading')}</Text>
+          <Text
+            variant="note"
+            wrap={'pretty'}
+            centered
+            className={css({
+              textStyle: 'sm',
+              marginBottom: '2.5rem',
+              marginTop: '0.25rem',
+            })}
           >
-            <RiStopCircleLine style={{ marginRight: '0.5rem' }} />{' '}
-            {t('stop.button')}
-          </Button>
+            {t('beta.body')}{' '}
+            <A href={CRISP_HELP_ARTICLE} target="_blank">
+              {t('start.linkMore')}
+            </A>
+          </Text>
+          <LinkButton
+            size="sm"
+            variant="tertiary"
+            href={BETA_USERS_FORM_URL}
+            target="_blank"
+          >
+            {t('beta.button')}
+          </LinkButton>
         </>
       ) : (
         <>
-          <H lvl={2}>{t('start.heading')}</H>
-          <Text variant="sm" centered wrap="balance">
-            {t('start.body')}
-          </Text>
-          <div className={css({ height: '2rem' })} />
-          <Button
-            isDisabled={isLoading}
-            onPress={() => handleTranscript()}
-            data-attr="start-transcript"
-          >
-            <RiRecordCircleLine style={{ marginRight: '0.5rem' }} />{' '}
-            {t('start.button')}
-          </Button>
+          {room.isRecording ? (
+            <>
+              <Text>{t('stop.heading')}</Text>
+              <Text
+                variant="note"
+                wrap={'pretty'}
+                centered
+                className={css({
+                  textStyle: 'sm',
+                  marginBottom: '2.5rem',
+                  marginTop: '0.25rem',
+                })}
+              >
+                {t('stop.body')}
+              </Text>
+              <Button
+                isDisabled={isDisabled}
+                onPress={() => handleTranscript()}
+                data-attr="stop-transcript"
+                size="sm"
+                variant="tertiary"
+              >
+                {t('stop.button')}
+              </Button>
+            </>
+          ) : (
+            <>
+              <Text>{t('start.heading')}</Text>
+              <Text
+                variant="note"
+                wrap={'pretty'}
+                centered
+                className={css({
+                  textStyle: 'sm',
+                  maxWidth: '90%',
+                  marginBottom: '2.5rem',
+                  marginTop: '0.25rem',
+                })}
+              >
+                {t('start.body')} <br />{' '}
+                <A href={CRISP_HELP_ARTICLE} target="_blank">
+                  {t('start.linkMore')}
+                </A>
+              </Text>
+              <Button
+                isDisabled={isDisabled}
+                onPress={() => handleTranscript()}
+                data-attr="start-transcript"
+                size="sm"
+                variant="tertiary"
+              >
+                {t('start.button')}
+              </Button>
+            </>
+          )}
         </>
       )}
     </Div>

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

@@ -0,0 +1,105 @@
+import { css } from '@/styled-system/css'
+import { Text } from '@/primitives'
+import { useTranslation } from 'react-i18next'
+import { useRoomContext } from '@livekit/components-react'
+import { Spinner } from '@/primitives/Spinner'
+import { useEffect, useMemo, useState } from 'react'
+import { RemoteParticipant, RoomEvent } from 'livekit-client'
+import { decodeNotificationDataReceived } from '@/features/notifications/utils.ts'
+import { NotificationType } from '@/features/notifications/NotificationType.ts'
+import { useSnapshot } from 'valtio/index'
+import {
+  TranscriptionStatus,
+  transcriptionStore,
+} from '@/stores/transcription.ts'
+
+export const TranscriptStateToast = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'recording' })
+  const room = useRoomContext()
+
+  const transcriptionSnap = useSnapshot(transcriptionStore)
+
+  useEffect(() => {
+    if (room.isRecording) {
+      transcriptionStore.status = TranscriptionStatus.STARTED
+    }
+  }, [])
+
+  useEffect(() => {
+    const handleDataReceived = (
+      payload: Uint8Array,
+      participant?: RemoteParticipant
+    ) => {
+      const notification = decodeNotificationDataReceived(payload)
+
+      if (!participant || !notification) return
+
+      switch (notification.type) {
+        case NotificationType.TranscriptionStarted:
+          transcriptionStore.status = TranscriptionStatus.STARTING
+          break
+        case NotificationType.TranscriptionStopped:
+          transcriptionStore.status = TranscriptionStatus.STOPPING
+          break
+        default:
+          return
+      }
+    }
+
+    const handleRecordingStatusChanged = (status) => {
+      transcriptionStore.status = status
+        ? TranscriptionStatus.STARTED
+        : TranscriptionStatus.STOPPED
+    }
+
+    room.on(RoomEvent.DataReceived, handleDataReceived)
+    room.on(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanged)
+
+    return () => {
+      room.off(RoomEvent.DataReceived, handleDataReceived)
+      room.off(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanged)
+    }
+  }, [room])
+
+  const message = useMemo(() => {
+    switch (transcriptionSnap.status) {
+      case TranscriptionStatus.STOPPING:
+        return t('transcriptStopping')
+      case TranscriptionStatus.STARTING:
+        return t('transcriptStarting')
+      default:
+        return t('transcriptStarted')
+    }
+  }, [transcriptionSnap])
+
+  if (transcriptionSnap.status == TranscriptionStatus.STOPPED) return
+
+  return (
+    <div
+      className={css({
+        display: 'flex',
+        position: 'fixed',
+        top: '10px',
+        left: '10px',
+        paddingY: '0.25rem',
+        paddingX: '0.75rem 0.75rem',
+        backgroundColor: 'primaryDark.100',
+        borderColor: 'white',
+        border: '1px solid',
+        color: 'white',
+        borderRadius: '4px',
+        gap: '0.5rem',
+      })}
+    >
+      <Spinner size={20} variant="black" />
+      <Text
+        variant={'sm'}
+        className={css({
+          fontWeight: '500 !important',
+        })}
+      >
+        {message}
+      </Text>
+    </div>
+  )
+}

src/frontend/src/features/rooms/livekit/components/blur/FaceLandmarksProcessor.ts

@@ -0,0 +1,345 @@
+import { ProcessorOptions, Track } from 'livekit-client'
+import posthog from 'posthog-js'
+import {
+  FilesetResolver,
+  FaceLandmarker,
+  FaceLandmarkerResult,
+} from '@mediapipe/tasks-vision'
+import {
+  CLEAR_TIMEOUT,
+  SET_TIMEOUT,
+  TIMEOUT_TICK,
+  timerWorkerScript,
+} from './TimerWorker'
+import {
+  BackgroundProcessorInterface,
+  BackgroundOptions,
+  ProcessorType,
+} from '.'
+
+const PROCESSING_WIDTH = 256 * 3
+const PROCESSING_HEIGHT = 144 * 3
+
+const FACE_LANDMARKS_CANVAS_ID = 'face-landmarks-local'
+
+export class FaceLandmarksProcessor implements BackgroundProcessorInterface {
+  options: BackgroundOptions
+  name: string
+  processedTrack?: MediaStreamTrack | undefined
+
+  source?: MediaStreamTrack
+  sourceSettings?: MediaTrackSettings
+  videoElement?: HTMLVideoElement
+  videoElementLoaded?: boolean
+
+  // Canvas containing the video processing result
+  outputCanvas?: HTMLCanvasElement
+  outputCanvasCtx?: CanvasRenderingContext2D
+
+  faceLandmarker?: FaceLandmarker
+  faceLandmarkerResult?: FaceLandmarkerResult
+
+  // The resized image of the video source
+  sourceImageData?: ImageData
+
+  timerWorker?: Worker
+
+  type: ProcessorType
+
+  // Effect images
+  glassesImage?: HTMLImageElement
+  mustacheImage?: HTMLImageElement
+  beretImage?: HTMLImageElement
+  constructor(opts: BackgroundOptions) {
+    this.name = 'face_landmarks'
+    this.options = opts
+    this.type = ProcessorType.FACE_LANDMARKS
+    this._initEffectImages()
+  }
+
+  private _initEffectImages() {
+    this.glassesImage = new Image()
+    this.glassesImage.src = '/assets/glasses.png'
+    this.glassesImage.crossOrigin = 'anonymous'
+
+    this.mustacheImage = new Image()
+    this.mustacheImage.src = '/assets/mustache.png'
+    this.mustacheImage.crossOrigin = 'anonymous'
+
+    this.beretImage = new Image()
+    this.beretImage.src = '/assets/beret.png'
+    this.beretImage.crossOrigin = 'anonymous'
+  }
+
+  static get isSupported() {
+    return true // Face landmarks should work in all modern browsers
+  }
+
+  async init(opts: ProcessorOptions<Track.Kind>) {
+    if (!opts.element) {
+      throw new Error('Element is required for processing')
+    }
+
+    this.source = opts.track as MediaStreamTrack
+    this.sourceSettings = this.source!.getSettings()
+    this.videoElement = opts.element as HTMLVideoElement
+
+    this._createMainCanvas()
+
+    const stream = this.outputCanvas!.captureStream()
+    const tracks = stream.getVideoTracks()
+    if (tracks.length == 0) {
+      throw new Error('No tracks found for processing')
+    }
+    this.processedTrack = tracks[0]
+
+    await this.initFaceLandmarker()
+    this._initWorker()
+
+    posthog.capture('face-landmarks-init')
+  }
+
+  _initWorker() {
+    this.timerWorker = new Worker(timerWorkerScript, {
+      name: 'FaceLandmarks',
+    })
+    this.timerWorker.onmessage = (data) => this.onTimerMessage(data)
+    if (this.videoElementLoaded) {
+      this.timerWorker!.postMessage({
+        id: SET_TIMEOUT,
+        timeMs: 1000 / 30,
+      })
+    } else {
+      this.videoElement!.onloadeddata = () => {
+        this.videoElementLoaded = true
+        this.timerWorker!.postMessage({
+          id: SET_TIMEOUT,
+          timeMs: 1000 / 30,
+        })
+      }
+    }
+  }
+
+  onTimerMessage(response: { data: { id: number } }) {
+    if (response.data.id === TIMEOUT_TICK) {
+      this.process()
+    }
+  }
+
+  async initFaceLandmarker() {
+    const vision = await FilesetResolver.forVisionTasks(
+      'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm'
+    )
+    this.faceLandmarker = await FaceLandmarker.createFromOptions(vision, {
+      baseOptions: {
+        modelAssetPath:
+          'https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/latest/face_landmarker.task',
+        delegate: 'GPU',
+      },
+      runningMode: 'VIDEO',
+      outputFaceBlendshapes: true,
+      outputFacialTransformationMatrixes: true,
+    })
+  }
+
+  async sizeSource() {
+    this.outputCanvasCtx?.drawImage(
+      this.videoElement!,
+      0,
+      0,
+      this.videoElement!.videoWidth,
+      this.videoElement!.videoHeight,
+      0,
+      0,
+      PROCESSING_WIDTH,
+      PROCESSING_HEIGHT
+    )
+
+    this.sourceImageData = this.outputCanvasCtx?.getImageData(
+      0,
+      0,
+      PROCESSING_WIDTH,
+      PROCESSING_HEIGHT
+    )
+  }
+
+  async detectFaces() {
+    const startTimeMs = performance.now()
+    this.faceLandmarkerResult = this.faceLandmarker!.detectForVideo(
+      this.sourceImageData!,
+      startTimeMs
+    )
+  }
+
+  private drawEffect(
+    leftPoint: { x: number; y: number },
+    rightPoint: { x: number; y: number },
+    image: HTMLImageElement,
+    widthScale: number,
+    heightScale: number,
+    yOffset: number = 0
+  ) {
+    // Calculate distance between points
+    const distance = Math.sqrt(
+      Math.pow(rightPoint.x - leftPoint.x, 2) +
+        Math.pow(rightPoint.y - leftPoint.y, 2)
+    )
+
+    // Scale image based on distance
+    const width = distance * PROCESSING_WIDTH * widthScale
+    const height = width * heightScale
+
+    // Calculate center position between points
+    const centerX = (leftPoint.x + rightPoint.x) / 2
+    const centerY = (leftPoint.y + rightPoint.y) / 2 + yOffset
+
+    // Draw image
+    this.outputCanvasCtx!.save()
+    this.outputCanvasCtx!.translate(
+      centerX * PROCESSING_WIDTH,
+      centerY * PROCESSING_HEIGHT
+    )
+
+    // Calculate rotation angle based on point positions
+    const angle = Math.atan2(
+      rightPoint.y - leftPoint.y,
+      rightPoint.x - leftPoint.x
+    )
+    this.outputCanvasCtx!.rotate(angle)
+
+    // Draw image centered at the midpoint between points
+    this.outputCanvasCtx!.drawImage(
+      image,
+      -width / 2,
+      -height / 2,
+      width,
+      height
+    )
+
+    this.outputCanvasCtx!.restore()
+  }
+
+  async drawFaceLandmarks() {
+    // Draw the original video frame at the canvas size
+    this.outputCanvasCtx!.drawImage(
+      this.videoElement!,
+      0,
+      0,
+      this.videoElement!.videoWidth,
+      this.videoElement!.videoHeight,
+      0,
+      0,
+      PROCESSING_WIDTH,
+      PROCESSING_HEIGHT
+    )
+
+    if (!this.faceLandmarkerResult?.faceLandmarks) {
+      return
+    }
+
+    // Draw face landmarks (optional, for debugging)
+    this.outputCanvasCtx!.strokeStyle = '#00FF00'
+    this.outputCanvasCtx!.lineWidth = 2
+
+    for (const face of this.faceLandmarkerResult.faceLandmarks) {
+      // Find eye landmarks
+      const leftEye = face[468]
+      const rightEye = face[473]
+
+      // Find mouth landmarks for mustache
+      const leftMoustache = face[92]
+      const rightMoustache = face[322]
+
+      // Find forehead landmarks for beret
+      const leftForehead = face[103]
+      const rightForehead = face[332]
+
+      if (leftEye && rightEye && this.options.showGlasses) {
+        this.drawEffect(leftEye, rightEye, this.glassesImage!, 2.5, 0.7)
+      }
+
+      if (leftMoustache && rightMoustache && this.options.showFrench) {
+        this.drawEffect(
+          leftMoustache,
+          rightMoustache,
+          this.mustacheImage!,
+          1.5,
+          0.5
+        )
+      }
+
+      if (leftForehead && rightForehead && this.options.showFrench) {
+        this.drawEffect(
+          leftForehead,
+          rightForehead,
+          this.beretImage!,
+          2.1,
+          0.7,
+          -0.1
+        )
+      }
+    }
+  }
+
+  async process() {
+    await this.sizeSource()
+    await this.detectFaces()
+    await this.drawFaceLandmarks()
+
+    this.timerWorker!.postMessage({
+      id: SET_TIMEOUT,
+      timeMs: 1000 / 30,
+    })
+  }
+
+  _createMainCanvas() {
+    this.outputCanvas = document.querySelector(
+      `#${FACE_LANDMARKS_CANVAS_ID}`
+    ) as HTMLCanvasElement
+    if (!this.outputCanvas) {
+      this.outputCanvas = this._createCanvas(
+        FACE_LANDMARKS_CANVAS_ID,
+        PROCESSING_WIDTH,
+        PROCESSING_HEIGHT
+      )
+    }
+    this.outputCanvasCtx = this.outputCanvas.getContext('2d')!
+  }
+
+  _createCanvas(id: string, width: number, height: number) {
+    const element = document.createElement('canvas')
+    element.setAttribute('id', id)
+    element.setAttribute('width', '' + width)
+    element.setAttribute('height', '' + height)
+    return element
+  }
+
+  update(opts: BackgroundOptions): void {
+    this.options = opts
+  }
+
+  async restart(opts: ProcessorOptions<Track.Kind>) {
+    await this.destroy()
+    return this.init(opts)
+  }
+
+  async destroy() {
+    this.timerWorker?.postMessage({
+      id: CLEAR_TIMEOUT,
+    })
+
+    this.timerWorker?.terminate()
+    this.faceLandmarker?.close()
+  }
+
+  clone() {
+    return new FaceLandmarksProcessor(this.options)
+  }
+
+  serialize() {
+    return {
+      type: this.type,
+      options: this.options,
+    }
+  }
+}

src/frontend/src/features/rooms/livekit/components/blur/index.ts

@@ -3,10 +3,13 @@ import { Track, TrackProcessor } from 'livekit-client'
 import { BackgroundBlurTrackProcessorJsWrapper } from './BackgroundBlurTrackProcessorJsWrapper'
 import { BackgroundCustomProcessor } from './BackgroundCustomProcessor'
 import { BackgroundVirtualTrackProcessorJsWrapper } from './BackgroundVirtualTrackProcessorJsWrapper'
+import { FaceLandmarksProcessor } from './FaceLandmarksProcessor'
 
 export type BackgroundOptions = {
   blurRadius?: number
   imagePath?: string
+  showGlasses?: boolean
+  showFrench?: boolean
 }
 
 export interface ProcessorSerialized {
@@ -25,11 +28,16 @@ export interface BackgroundProcessorInterface
 export enum ProcessorType {
   BLUR = 'blur',
   VIRTUAL = 'virtual',
+  FACE_LANDMARKS = 'faceLandmarks',
 }
 
 export class BackgroundProcessorFactory {
   static isSupported() {
-    return ProcessorWrapper.isSupported || BackgroundCustomProcessor.isSupported
+    return (
+      ProcessorWrapper.isSupported ||
+      BackgroundCustomProcessor.isSupported ||
+      FaceLandmarksProcessor.isSupported
+    )
   }
 
   static getProcessor(
@@ -50,6 +58,10 @@ export class BackgroundProcessorFactory {
       if (BackgroundCustomProcessor.isSupported) {
         return new BackgroundCustomProcessor(opts)
       }
+    } else if (type === ProcessorType.FACE_LANDMARKS) {
+      if (FaceLandmarksProcessor.isSupported) {
+        return new FaceLandmarksProcessor(opts)
+      }
     }
     return undefined
   }

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

@@ -1,24 +1,19 @@
 import { ToggleButton } from '@/primitives'
-import { RiBardLine } from '@remixicon/react'
+import { RiShapesLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useSidePanel } from '../../hooks/useSidePanel'
-import { useHasTranscriptAccess } from '../../hooks/useHasTranscriptAccess'
 import { css } from '@/styled-system/css'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
-export const TranscriptToggle = ({
+export const ToolsToggle = ({
   variant = 'primaryTextDark',
   onPress,
   ...props
 }: ToggleButtonProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.transcript' })
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.tools' })
 
-  const { isTranscriptOpen, toggleTranscript } = useSidePanel()
-  const tooltipLabel = isTranscriptOpen ? 'open' : 'closed'
-
-  const hasTranscriptAccess = useHasTranscriptAccess()
-
-  if (!hasTranscriptAccess) return
+  const { isToolsOpen, toggleTools } = useSidePanel()
+  const tooltipLabel = isToolsOpen ? 'open' : 'closed'
 
   return (
     <div
@@ -32,15 +27,15 @@ export const TranscriptToggle = ({
         variant={variant}
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
-        isSelected={isTranscriptOpen}
+        isSelected={isToolsOpen}
         onPress={(e) => {
-          toggleTranscript()
+          toggleTools()
           onPress?.(e)
         }}
         {...props}
-        data-attr="toggle-transcript"
+        data-attr="toggle-tools"
       >
-        <RiBardLine />
+        <RiShapesLine />
       </ToggleButton>
     </div>
   )

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

@@ -13,6 +13,7 @@ export const Effects = () => {
     <div
       className={css({
         padding: '0 1.5rem',
+        overflowY: 'scroll',
       })}
     >
       <EffectsConfiguration

src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx

@@ -5,17 +5,22 @@ import {
   BackgroundProcessorFactory,
   BackgroundProcessorInterface,
   ProcessorType,
+  BackgroundOptions,
 } from '../blur'
 import { css } from '@/styled-system/css'
 import { Text, P, ToggleButton, H } from '@/primitives'
 import { styled } from '@/styled-system/jsx'
-import { BackgroundOptions } from '@livekit/track-processors'
 import { BlurOn } from '@/components/icons/BlurOn'
 import { BlurOnStrong } from '@/components/icons/BlurOnStrong'
 import { useTrackToggle } from '@livekit/components-react'
 import { Loader } from '@/primitives/Loader'
 import { useSyncAfterDelay } from '@/hooks/useSyncAfterDelay'
-import { RiProhibited2Line } from '@remixicon/react'
+import {
+  RiProhibited2Line,
+  RiGlassesLine,
+  RiGoblet2Fill,
+} from '@remixicon/react'
+import { useHasFaceLandmarksAccess } from '../../hooks/useHasFaceLandmarksAccess'
 
 enum BlurRadius {
   NONE = 0,
@@ -50,6 +55,7 @@ export const EffectsConfiguration = ({
   const { toggle, enabled } = useTrackToggle({ source: Track.Source.Camera })
   const [processorPending, setProcessorPending] = useState(false)
   const processorPendingReveal = useSyncAfterDelay(processorPending)
+  const hasFaceLandmarksAccess = useHasFaceLandmarksAccess()
 
   useEffect(() => {
     const videoElement = videoRef.current
@@ -139,9 +145,42 @@ export const EffectsConfiguration = ({
   }
 
   const tooltipLabel = (type: ProcessorType, options: BackgroundOptions) => {
+    if (type === ProcessorType.FACE_LANDMARKS) {
+      const effect = options.showGlasses ? 'glasses' : 'french'
+      return t(
+        `faceLandmarks.${effect}.${isSelected(type, options) ? 'clear' : 'apply'}`
+      )
+    }
     return t(`${type}.${isSelected(type, options) ? 'clear' : 'apply'}`)
   }
 
+  const getFaceLandmarksOptions = () => {
+    const processor = getProcessor()
+    if (processor?.serialize().type === ProcessorType.FACE_LANDMARKS) {
+      return processor.serialize().options as {
+        showGlasses?: boolean
+        showFrench?: boolean
+      }
+    }
+    return { showGlasses: false, showFrench: false }
+  }
+
+  const toggleFaceLandmarkEffect = async (effect: 'glasses' | 'french') => {
+    const currentOptions = getFaceLandmarksOptions()
+    const newOptions = {
+      ...currentOptions,
+      [effect === 'glasses' ? 'showGlasses' : 'showFrench']:
+        !currentOptions[effect === 'glasses' ? 'showGlasses' : 'showFrench'],
+    }
+
+    if (!newOptions.showGlasses && !newOptions.showFrench) {
+      // If both effects are off stop the processor
+      await clearEffect()
+    } else {
+      await toggleEffect(ProcessorType.FACE_LANDMARKS, newOptions)
+    }
+  }
+
   return (
     <div
       className={css(
@@ -302,6 +341,68 @@ export const EffectsConfiguration = ({
                   </ToggleButton>
                 </div>
               </div>
+              {hasFaceLandmarksAccess && (
+                <div
+                  className={css({
+                    marginTop: '1.5rem',
+                  })}
+                >
+                  <H
+                    lvl={3}
+                    style={{
+                      marginBottom: '1rem',
+                    }}
+                    variant="bodyXsBold"
+                  >
+                    {t('faceLandmarks.title')}
+                  </H>
+                  <div
+                    className={css({
+                      display: 'flex',
+                      gap: '1.25rem',
+                    })}
+                  >
+                    <ToggleButton
+                      variant="bigSquare"
+                      aria-label={tooltipLabel(ProcessorType.FACE_LANDMARKS, {
+                        showGlasses: true,
+                        showFrench: false,
+                      })}
+                      tooltip={tooltipLabel(ProcessorType.FACE_LANDMARKS, {
+                        showGlasses: true,
+                        showFrench: false,
+                      })}
+                      isDisabled={processorPendingReveal}
+                      onChange={async () =>
+                        await toggleFaceLandmarkEffect('glasses')
+                      }
+                      isSelected={getFaceLandmarksOptions().showGlasses}
+                      data-attr="toggle-glasses"
+                    >
+                      <RiGlassesLine />
+                    </ToggleButton>
+                    <ToggleButton
+                      variant="bigSquare"
+                      aria-label={tooltipLabel(ProcessorType.FACE_LANDMARKS, {
+                        showGlasses: false,
+                        showFrench: true,
+                      })}
+                      tooltip={tooltipLabel(ProcessorType.FACE_LANDMARKS, {
+                        showGlasses: false,
+                        showFrench: true,
+                      })}
+                      isDisabled={processorPendingReveal}
+                      onChange={async () =>
+                        await toggleFaceLandmarkEffect('french')
+                      }
+                      isSelected={getFaceLandmarksOptions().showFrench}
+                      data-attr="toggle-french"
+                    >
+                      <RiGoblet2Fill />
+                    </ToggleButton>
+                  </div>
+                </div>
+              )}
               <div
                 className={css({
                   marginTop: '1.5rem',

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

@@ -0,0 +1,9 @@
+import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
+
+export const useHasFaceLandmarksAccess = () => {
+  const featureEnabled = useFeatureFlagEnabled('face-landmarks')
+  const isAnalyticsEnabled = useIsAnalyticsEnabled()
+
+  return featureEnabled || !isAnalyticsEnabled
+}

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

@@ -5,53 +5,73 @@ export enum PanelId {
   PARTICIPANTS = 'participants',
   EFFECTS = 'effects',
   CHAT = 'chat',
-  TRANSCRIPT = 'transcript',
+  TOOLS = 'tools',
   ADMIN = 'admin',
 }
 
+export enum SubPanelId {
+  TRANSCRIPT = 'transcript',
+}
+
 export const useSidePanel = () => {
   const layoutSnap = useSnapshot(layoutStore)
   const activePanelId = layoutSnap.activePanelId
+  const activeSubPanelId = layoutSnap.activeSubPanelId
 
   const isParticipantsOpen = activePanelId == PanelId.PARTICIPANTS
   const isEffectsOpen = activePanelId == PanelId.EFFECTS
   const isChatOpen = activePanelId == PanelId.CHAT
-  const isTranscriptOpen = activePanelId == PanelId.TRANSCRIPT
+  const isToolsOpen = activePanelId == PanelId.TOOLS
   const isAdminOpen = activePanelId == PanelId.ADMIN
+  const isTranscriptOpen = activeSubPanelId == SubPanelId.TRANSCRIPT
   const isSidePanelOpen = !!activePanelId
+  const isSubPanelOpen = !!activeSubPanelId
 
   const toggleAdmin = () => {
     layoutStore.activePanelId = isAdminOpen ? null : PanelId.ADMIN
+    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
   }
 
   const toggleParticipants = () => {
     layoutStore.activePanelId = isParticipantsOpen ? null : PanelId.PARTICIPANTS
+    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
   }
 
   const toggleChat = () => {
     layoutStore.activePanelId = isChatOpen ? null : PanelId.CHAT
+    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
   }
 
   const toggleEffects = () => {
     layoutStore.activePanelId = isEffectsOpen ? null : PanelId.EFFECTS
+    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
   }
 
-  const toggleTranscript = () => {
-    layoutStore.activePanelId = isTranscriptOpen ? null : PanelId.TRANSCRIPT
+  const toggleTools = () => {
+    layoutStore.activePanelId = isToolsOpen ? null : PanelId.TOOLS
+    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
+  }
+
+  const openTranscript = () => {
+    layoutStore.activeSubPanelId = SubPanelId.TRANSCRIPT
   }
 
   return {
     activePanelId,
+    activeSubPanelId,
     toggleParticipants,
     toggleChat,
     toggleEffects,
-    toggleTranscript,
+    toggleTools,
     toggleAdmin,
+    openTranscript,
+    isSubPanelOpen,
     isChatOpen,
     isParticipantsOpen,
     isEffectsOpen,
     isSidePanelOpen,
-    isTranscriptOpen,
+    isToolsOpen,
     isAdminOpen,
+    isTranscriptOpen,
   }
 }

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

@@ -22,8 +22,9 @@ import { useSidePanel } from '../../hooks/useSidePanel'
 import { LinkButton } from '@/primitives'
 import { useSettingsDialog } from '../../components/controls/SettingsDialogContext'
 import { ResponsiveMenu } from './ResponsiveMenu'
-import { TranscriptToggle } from '../../components/controls/TranscriptToggle'
+import { ToolsToggle } from '../../components/controls/ToolsToggle.tsx'
 import { CameraSwitchButton } from '../../components/controls/CameraSwitchButton'
+import { GRIST_FORM } from '@/utils/constants'
 
 export function MobileControlBar({
   onDeviceError,
@@ -134,7 +135,7 @@ export function MobileControlBar({
               description={true}
               onPress={() => setIsMenuOpened(false)}
             />
-            <TranscriptToggle
+            <ToolsToggle
               description={true}
               onPress={() => setIsMenuOpened(false)}
             />
@@ -155,7 +156,7 @@ export function MobileControlBar({
               <RiAccountBoxLine size={20} />
             </Button>
             <LinkButton
-              href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
+              href={GRIST_FORM}
               variant="primaryTextDark"
               tooltip={t('options.items.feedback')}
               aria-label={t('options.items.feedback')}

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

@@ -2,7 +2,7 @@ import { css } from '@/styled-system/css'
 import { ChatToggle } from '../../components/controls/ChatToggle'
 import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
 import { SupportToggle } from '../../components/controls/SupportToggle'
-import { TranscriptToggle } from '../../components/controls/TranscriptToggle'
+import { ToolsToggle } from '../../components/controls/ToolsToggle.tsx'
 import { AdminToggle } from '../../components/AdminToggle'
 import { useSize } from '../../hooks/useResizeObserver'
 import { useState, RefObject } from 'react'
@@ -18,7 +18,7 @@ const NavigationControls = ({ onPress }: Partial<ToggleButtonProps>) => (
   <>
     <ChatToggle onPress={onPress} />
     <ParticipantsToggle onPress={onPress} />
-    <TranscriptToggle onPress={onPress} />
+    <ToolsToggle onPress={onPress} />
     <SupportToggle onPress={onPress} />
     <AdminToggle onPress={onPress} />
   </>

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

@@ -28,7 +28,7 @@ import { FocusLayout } from '../components/FocusLayout'
 import { ParticipantTile } from '../components/ParticipantTile'
 import { SidePanel } from '../components/SidePanel'
 import { useSidePanel } from '../hooks/useSidePanel'
-import { RecordingStateToast } from '../components/RecordingStateToast'
+import { TranscriptStateToast } from '../components/TranscriptStateToast'
 import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
 
 const LayoutWrapper = styled(
@@ -231,7 +231,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
       )}
       <RoomAudioRenderer />
       <ConnectionStateToast />
-      <RecordingStateToast />
+      <TranscriptStateToast />
     </div>
   )
 }

src/frontend/src/features/sdk/SdkReverseClient.tsx

@@ -1,84 +0,0 @@
-import { authUrl, useUser } from '../auth'
-
-export enum ClientMessageType {
-  ROOM_CREATED = 'ROOM_CREATED',
-}
-
-export class SdkReverseClient {
-  /**
-   * IDEA: Use API Key. Must be based on some sort of credentials? No needs for now as there are no security
-   * plausible at the moment.
-   */
-  static getAllowTargetOrigin() {
-    return '*'
-  }
-
-  static post(type: ClientMessageType, data: unknown = {}) {
-    window.parent.postMessage(
-      {
-        type,
-        data,
-      },
-      SdkReverseClient.getAllowTargetOrigin()
-    )
-  }
-
-  static broadcastAuthentication() {
-    const bc = new BroadcastChannel('APP_CHANNEL')
-    bc.postMessage({ type: 'AUTHENTICATED' })
-
-    /**
-     * This means the parent window has authenticated has successfully refetched user, then we can close the popup.
-     */
-    bc.onmessage = (event) => {
-      if (event.data.type === 'AUTHENTICATED_ACK') {
-        window.close()
-      }
-    }
-  }
-
-  static waitForAuthenticationAck() {
-    return new Promise<void>((resolve) => {
-      const bc = new BroadcastChannel('APP_CHANNEL')
-      bc.onmessage = async (event) => {
-        if (event.data.type === 'AUTHENTICATED') {
-          resolve()
-          bc.postMessage({ type: 'AUTHENTICATED_ACK' })
-        }
-      }
-    })
-  }
-}
-
-/**
- * Returns a function to be awaited in order to make sure the user is logged in.
- * If not logged-in it opens a popup with the connection flow, the promise returned is resolved
- * once logged-in.
- *
- * To be used in SDK scope.
- */
-export function useEnsureAuth() {
-  const { isLoggedIn, ...other } = useUser({
-    fetchUserOptions: { attemptSilent: false },
-  })
-
-  const startSSO = () => {
-    return new Promise<void>((resolve) => {
-      SdkReverseClient.waitForAuthenticationAck().then(async () => {
-        await other.refetch()
-        resolve()
-      })
-      const params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
-  width=400,height=900,left=100,top=100`
-      window.open(new URL('authenticate/', authUrl()).href, '', params)
-    })
-  }
-
-  const ensureAuth = async () => {
-    if (!isLoggedIn) {
-      await startSSO()
-    }
-  }
-
-  return { ensureAuth }
-}

src/frontend/src/features/sdk/api/useRoomCreationCallback.ts

@@ -0,0 +1,35 @@
+import { fetchApi } from '@/api/fetchApi'
+import { useQuery } from '@tanstack/react-query'
+import { keys } from '@/api/queryKeys'
+import { CallbackCreationRoomData } from '../utils/types'
+
+export type CallbackResponse = {
+  status: string
+  room: CallbackCreationRoomData
+}
+
+export const fetchRoomGenerationState = async ({
+  callbackId,
+}: {
+  callbackId: string
+}) => {
+  return fetchApi<CallbackResponse>(`/rooms/creation-callback/`, {
+    method: 'POST',
+    body: JSON.stringify({
+      callback_id: callbackId,
+    }),
+  })
+}
+
+export const useRoomCreationCallback = ({
+  callbackId = '',
+}: {
+  callbackId?: string
+}) => {
+  return useQuery({
+    queryKey: [keys.roomCreationCallback, callbackId],
+    queryFn: () => fetchRoomGenerationState({ callbackId }),
+    enabled: !!callbackId,
+    refetchInterval: 1000,
+  })
+}

src/frontend/src/features/sdk/routes/CreateButton.tsx

@@ -1,103 +0,0 @@
-import { Button } from '@/primitives/Button'
-import { useTranslation } from 'react-i18next'
-import { usePersistentUserChoices } from '@livekit/components-react'
-import { useState } from 'react'
-import { getRouteUrl } from '@/navigation/getRouteUrl'
-import { css } from '@/styled-system/css'
-import { RiCheckLine, RiFileCopyLine } from '@remixicon/react'
-import { VisioIcon } from '@/assets/VisioIcon'
-import { generateRoomId, useCreateRoom } from '../../rooms'
-import {
-  ClientMessageType,
-  SdkReverseClient,
-  useEnsureAuth,
-} from '../SdkReverseClient'
-
-export const SdkCreateButton = () => {
-  const { t } = useTranslation('sdk', { keyPrefix: 'createButton' })
-  const [roomUrl, setRoomUrl] = useState<string>()
-  const [isLoading, setIsLoading] = useState(false)
-  const {
-    userChoices: { username },
-  } = usePersistentUserChoices()
-
-  const { mutateAsync: createRoom } = useCreateRoom()
-  const { ensureAuth } = useEnsureAuth()
-
-  const submitCreateRoom = async () => {
-    setIsLoading(true)
-    const slug = generateRoomId()
-    const data = await createRoom({ slug, username })
-    const roomUrlTmp = getRouteUrl('room', data.slug)
-    setRoomUrl(roomUrlTmp)
-    setIsLoading(false)
-    SdkReverseClient.post(ClientMessageType.ROOM_CREATED, {
-      url: roomUrlTmp,
-    })
-  }
-
-  const submit = async () => {
-    await ensureAuth()
-    submitCreateRoom()
-  }
-
-  return (
-    <div
-      className={css({
-        paddingTop: '3px',
-        paddingLeft: '3px',
-      })}
-    >
-      {roomUrl ? (
-        <RoomUrl roomUrl={roomUrl} />
-      ) : (
-        <Button
-          variant="primaryDark"
-          aria-label={t('label')}
-          onPress={submit}
-          data-attr="sdk-create"
-          loading={isLoading}
-          icon={<VisioIcon />}
-        >
-          {t('label')}
-        </Button>
-      )}
-    </div>
-  )
-}
-
-const RoomUrl = ({ roomUrl }: { roomUrl: string }) => {
-  const [isCopied, setIsCopied] = useState(false)
-
-  const copy = () => {
-    navigator.clipboard.writeText(roomUrl!)
-    setIsCopied(true)
-    setTimeout(() => setIsCopied(false), 1000)
-  }
-
-  return (
-    <div
-      className={css({
-        display: 'flex',
-        alignItems: 'center',
-        gap: '0.5rem',
-      })}
-    >
-      <span
-        className={css({
-          color: 'greyscale.600',
-        })}
-      >
-        {roomUrl}
-      </span>
-      <Button
-        variant={isCopied ? 'success' : 'quaternaryText'}
-        data-attr="sdk-create-copy"
-        onPress={copy}
-        square
-      >
-        {isCopied ? <RiCheckLine /> : <RiFileCopyLine />}
-      </Button>
-    </div>
-  )
-}

src/frontend/src/features/sdk/routes/CreateMeetingButton.tsx

@@ -0,0 +1,164 @@
+import { Button } from '@/primitives/Button'
+import { useEffect, useMemo, useState } from 'react'
+import { Link } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
+import { HStack, VStack } from '@/styled-system/jsx'
+import { css } from '@/styled-system/css'
+import { RiCloseLine, RiFileCopyLine } from '@remixicon/react'
+import { Text } from '@/primitives'
+import { Spinner } from '@/primitives/Spinner'
+import { buttonRecipe } from '@/primitives/buttonRecipe'
+import { VisioIcon } from '@/assets/VisioIcon'
+import { getRouteUrl } from '@/navigation/getRouteUrl'
+import { useRoomCreationCallback } from '../api/useRoomCreationCallback'
+import { PopupManager } from '../utils/PopupManager'
+import { CallbackCreationRoomData } from '../utils/types'
+import { useSearchParams } from 'wouter'
+
+const popupManager = new PopupManager()
+
+export const CreateMeetingButton = () => {
+  const { t } = useTranslation('sdk', { keyPrefix: 'createMeeting' })
+
+  const [searchParams] = useSearchParams()
+
+  const [callbackId, setCallbackId] = useState<string | undefined>(undefined)
+  const [isPending, setIsPending] = useState(false)
+
+  const initialRoom = useMemo(() => {
+    const roomSlug = searchParams.get('slug')
+    if (!roomSlug) return undefined
+    return {
+      slug: roomSlug.trim(), // Trim whitespace for safety
+    }
+  }, [searchParams])
+
+  const [room, setRoom] = useState<CallbackCreationRoomData | undefined>(
+    initialRoom
+  )
+
+  const { data } = useRoomCreationCallback({ callbackId })
+
+  const roomUrl = useMemo(() => {
+    if (room?.slug) return getRouteUrl('room', room.slug)
+  }, [room])
+
+  useEffect(() => {
+    if (!data?.room?.slug) return
+    setRoom(data.room)
+    setCallbackId(undefined)
+    setIsPending(false)
+  }, [data])
+
+  useEffect(() => {
+    popupManager.setupMessageListener(
+      (id) => setCallbackId(id),
+      (data) => {
+        setRoom(data)
+        setIsPending(false)
+      }
+    )
+
+    return () => popupManager.cleanup()
+  }, [])
+
+  const resetState = () => {
+    setRoom(undefined)
+    setCallbackId(undefined)
+    setIsPending(false)
+  }
+
+  if (isPending) {
+    return (
+      <div>
+        <Spinner />
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className="p-6"
+      style={{
+        display: 'flex',
+        justifyContent: 'start',
+        alignItems: 'start',
+        border: 'none',
+      }}
+    >
+      {roomUrl && room?.slug ? (
+        <VStack justify={'start'} alignItems={'start'} gap={0.25}>
+          <HStack>
+            <Link
+              className={buttonRecipe({ size: 'sm' })}
+              href={roomUrl}
+              target="_blank"
+              style={{
+                textWrap: 'nowrap',
+              }}
+            >
+              <VisioIcon />
+              {t('joinButton')}
+            </Link>
+            <HStack gap={0}>
+              <Button
+                variant="quaternaryText"
+                square
+                icon={<RiFileCopyLine />}
+                tooltip={t('copyLinkTooltip')}
+                onPress={() => {
+                  navigator.clipboard.writeText(roomUrl)
+                }}
+              />
+              {searchParams.get('readOnly') === 'false' && (
+                <Button
+                  variant="quaternaryText"
+                  square
+                  icon={<RiCloseLine />}
+                  onPress={resetState}
+                  aria-label={t('resetLabel')}
+                />
+              )}
+            </HStack>
+          </HStack>
+          <VStack justify={'start'} alignItems="start" gap={0.25}>
+            <Text variant={'smNote'} margin={false} centered={false}>
+              {roomUrl.replace('https://', '')}
+            </Text>
+            <Text variant={'smNote'} margin={false} centered={false}>
+              {t('participantLimit')}
+            </Text>
+          </VStack>
+        </VStack>
+      ) : (
+        <div
+          className={css({
+            minHeight: '46px',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+          })}
+        >
+          {/*
+           * Using popup for Visio to access session cookies (blocked in iframes).
+           * If authenticated: Popup creates room and returns data directly.
+           * If not: Popup sends callbackId, redirects to login, then backend
+           * associates new room with callbackId after authentication.
+           */}
+          <Button
+            onPress={() => {
+              setIsPending(true)
+              popupManager.createPopupWindow(() => {
+                setIsPending(false)
+              })
+            }}
+            size="sm"
+          >
+            <VisioIcon />
+            {t('createButton')}
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}

src/frontend/src/features/sdk/routes/CreatePopup.tsx

@@ -0,0 +1,76 @@
+import { useEffect, useMemo } from 'react'
+import { css } from '@/styled-system/css'
+import { generateRoomId, useCreateRoom } from '../../rooms'
+import { useUser } from '@/features/auth'
+import { Spinner } from '@/primitives/Spinner'
+import { CallbackIdHandler } from '../utils/CallbackIdHandler'
+import { PopupWindow } from '../utils/PopupWindow'
+
+const callbackIdHandler = new CallbackIdHandler()
+const popupWindow = new PopupWindow()
+
+export const CreatePopup = () => {
+  const { isLoggedIn } = useUser({ fetchUserOptions: { attemptSilent: false } })
+  const { mutateAsync: createRoom } = useCreateRoom()
+
+  const callbackId = useMemo(() => callbackIdHandler.getOrCreate(), [])
+
+  /**
+   * Handle unauthenticated users by redirecting to login
+   *
+   * When redirecting to authentication, the window.location change breaks the connection
+   * between this popup and its parent window. We need to send the callbackId to the parent
+   * before redirecting so it can re-establish connection after authentication completes.
+   * This prevents the popup from becoming orphaned and ensures state consistency.
+   */
+  useEffect(() => {
+    if (isLoggedIn === false) {
+      // redirection loses the connection to the manager
+      // prevent it passing an async callback id
+      popupWindow.sendCallbackId(callbackId, () => {
+        popupWindow.navigateToAuthentication()
+      })
+    }
+  }, [isLoggedIn, callbackId])
+
+  /**
+   * Automatically create meeting room once user is authenticated
+   * This effect will trigger either immediately if the user is already logged in,
+   * or after successful authentication and return to this popup
+   */
+  useEffect(() => {
+    const createMeetingRoom = async () => {
+      try {
+        const slug = generateRoomId()
+        const roomData = await createRoom({
+          slug,
+          callbackId,
+        })
+        // Send room data back to parent window and clean up resources
+        popupWindow.sendRoomData(roomData, () => {
+          callbackIdHandler.clear()
+          popupWindow.close()
+        })
+      } catch (error) {
+        console.error('Failed to create meeting room:', error)
+      }
+    }
+    if (isLoggedIn && callbackId) {
+      createMeetingRoom()
+    }
+  }, [isLoggedIn, callbackId, createRoom])
+
+  return (
+    <div
+      className={css({
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100%',
+        width: '100%',
+      })}
+    >
+      <Spinner />
+    </div>
+  )
+}

src/frontend/src/features/sdk/utils/CallbackIdHandler.ts

@@ -0,0 +1,45 @@
+export class CallbackIdHandler {
+  private storageKey = 'popup_callback_id'
+
+  private generateId(): string {
+    return (
+      Math.random().toString(36).substring(2, 15) +
+      Math.random().toString(36).substring(2, 15)
+    )
+  }
+
+  /**
+   * Gets an existing callback ID or creates a new one
+   */
+  public getOrCreate(): string {
+    const existingId = this.get()
+    if (existingId) {
+      return existingId
+    }
+
+    const newId = this.generateId()
+    this.set(newId)
+    return newId
+  }
+
+  /**
+   * Gets the current callback ID if one exists
+   */
+  public get(): string | null {
+    return sessionStorage.getItem(this.storageKey)
+  }
+
+  /**
+   * Sets a callback ID
+   */
+  private set(id: string): void {
+    sessionStorage.setItem(this.storageKey, id)
+  }
+
+  /**
+   * Removes the current callback ID
+   */
+  public clear(): void {
+    sessionStorage.removeItem(this.storageKey)
+  }
+}

src/frontend/src/features/sdk/utils/PopupManager.ts

@@ -0,0 +1,63 @@
+import { getRouteUrl } from '@/navigation/getRouteUrl'
+import {
+  CallbackCreationRoomData,
+  ClientMessageType,
+  PopupMessageData,
+  PopupMessageType,
+} from './types'
+
+export class PopupManager {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private messageHandler: (event: MessageEvent<any>) => void = () => {}
+
+  public createPopupWindow(onFailure: () => void) {
+    const popupWindow = window.open(
+      `${window.location.origin}/sdk/create-popup`,
+      'CreatePopupWindow',
+      `status=no,location=no,toolbar=no,menubar=no,width=600,height=800,left=100,top=100, resizable=yes,scrollbars=yes`
+    )
+
+    if (popupWindow) {
+      popupWindow.focus()
+    } else {
+      onFailure()
+    }
+  }
+
+  public setupMessageListener(
+    onCallbackId: (id: string) => void,
+    onRoomData: (data: CallbackCreationRoomData) => void
+  ) {
+    this.messageHandler = (event) => {
+      const data = event.data as PopupMessageData
+      // Skip messages from untrusted sources
+      if (data.source !== window.location.origin) return
+      switch (data.type) {
+        case PopupMessageType.CALLBACK_ID:
+          onCallbackId(data.callbackId as string)
+          return
+        case PopupMessageType.ROOM_DATA:
+          if (!data?.room) return
+          onRoomData(data.room)
+          window?.parent.postMessage(
+            {
+              type: ClientMessageType.ROOM_CREATED,
+              data: {
+                room: {
+                  url: getRouteUrl('room', data.room.slug),
+                  ...data.room,
+                },
+              },
+            },
+            '*'
+          )
+          return
+      }
+    }
+    window.addEventListener('message', this.messageHandler)
+  }
+
+  public cleanup() {
+    window.removeEventListener('message', this.messageHandler)
+  }
+}

src/frontend/src/features/sdk/utils/PopupWindow.ts

@@ -0,0 +1,50 @@
+import { authUrl } from '@/features/auth'
+import { PopupMessageType, CallbackCreationRoomData } from './types'
+
+export class PopupWindow {
+  private sendMessageToManager(
+    type: PopupMessageType,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    data: any,
+    callback?: () => void
+  ) {
+    if (!window.opener) {
+      console.error('No manager window found')
+      window.close()
+      return
+    }
+    window.opener.postMessage(
+      {
+        source: window.location.origin,
+        type,
+        ...data,
+      },
+      window.location.origin
+    )
+    callback?.()
+  }
+
+  public sendRoomData(data: CallbackCreationRoomData, callback?: () => void) {
+    this.sendMessageToManager(
+      PopupMessageType.ROOM_DATA,
+      { room: { slug: data.slug } },
+      callback
+    )
+  }
+
+  public sendCallbackId(callbackId: string, callback?: () => void) {
+    this.sendMessageToManager(
+      PopupMessageType.CALLBACK_ID,
+      { callbackId },
+      callback
+    )
+  }
+
+  public close() {
+    window.close()
+  }
+
+  public navigateToAuthentication() {
+    window.location.href = authUrl({})
+  }
+}

src/frontend/src/features/sdk/utils/types.ts

@@ -0,0 +1,19 @@
+export type CallbackCreationRoomData = {
+  slug: string
+}
+
+export enum ClientMessageType {
+  ROOM_CREATED = 'ROOM_CREATED',
+}
+
+export interface PopupMessageData {
+  type: PopupMessageType
+  source: string
+  callbackId?: string
+  room?: CallbackCreationRoomData
+}
+
+export enum PopupMessageType {
+  CALLBACK_ID,
+  ROOM_DATA,
+}

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

@@ -18,15 +18,16 @@ export const terminateSupportSession = () => {
 
 export type useSupportProps = {
   id?: string
+  isDisabled?: boolean
 }
 
 // Configure Crisp chat for real-time support across all pages.
-export const useSupport = ({ id }: useSupportProps) => {
+export const useSupport = ({ id, isDisabled }: useSupportProps) => {
   useEffect(() => {
-    if (!id || Crisp.isCrispInjected()) return
+    if (!id || Crisp.isCrispInjected() || isDisabled) return
     Crisp.configure(id)
     Crisp.setHideOnMobile(true)
-  }, [id])
+  }, [id, isDisabled])
 
   return null
 }

src/frontend/src/layout/Footer.tsx

@@ -106,7 +106,7 @@ const Marianne = () => {
         className={css({
           letterSpacing: '-.01em',
           textTransform: 'uppercase',
-          fontWeight: '600',
+          fontWeight: '700',
           fontFamily: 'Marianne',
           fontSize: '1.25rem',
           lineHeight: '1.75rem',

src/frontend/src/layout/Header.tsx

@@ -44,7 +44,7 @@ const Marianne = () => {
         className={css({
           letterSpacing: '-.01em',
           textTransform: 'uppercase',
-          fontWeight: '600',
+          fontWeight: '700',
           fontFamily: 'Marianne',
           fontSize: '0.7875rem !important',
         })}

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

@@ -21,5 +21,7 @@
     "several": "",
     "open": "",
     "accept": ""
-  }
+  },
+  "recordingStarted": "",
+  "recordingStopped": ""
 }

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

@@ -104,7 +104,7 @@
       "open": "",
       "closed": ""
     },
-    "transcript": {
+    "tools": {
       "open": "",
       "closed": ""
     },
@@ -135,48 +135,72 @@
     }
   },
   "effects": {
-    "activateCamera": "",
-    "notAvailable": "",
-    "heading": "",
+    "activateCamera": "Ihre Kamera ist deaktiviert. Wählen Sie eine Option, um sie zu aktivieren.",
+    "notAvailable": "Videoeffekte werden in Kürze in Ihrem Browser verfügbar sein. Wir arbeiten daran! In der Zwischenzeit können Sie Google Chrome für beste Leistung oder Firefox verwenden :(",
+    "heading": "Unschärfe",
     "blur": {
-      "title": "",
-      "light": "",
-      "normal": "",
-      "apply": "",
-      "clear": ""
+      "title": "Hintergrundunschärfe",
+      "light": "Leichte Unschärfe",
+      "normal": "Unschärfe",
+      "apply": "Unschärfe aktivieren",
+      "clear": "Unschärfe deaktivieren"
     },
     "virtual": {
-      "title": "",
-      "apply": "",
-      "clear": ""
+      "title": "Virtueller Hintergrund",
+      "apply": "Virtuellen Hintergrund aktivieren",
+      "clear": "Virtuellen Hintergrund deaktivieren"
     },
-    "experimental": ""
+    "faceLandmarks": {
+      "title": "Visuelle Effekte",
+      "glasses": {
+        "apply": "Brille hinzufügen",
+        "clear": "Brille entfernen"
+      },
+      "french": {
+        "apply": "Französische Touch hinzufügen",
+        "clear": "Französische Touch entfernen"
+      }
+    },
+    "experimental": "Experimentelle Funktion. Eine v2 kommt für vollständige Browserunterstützung und verbesserte Qualität."
   },
   "sidePanel": {
     "heading": {
       "participants": "",
       "effects": "",
       "chat": "",
-      "transcript": "",
-      "admin": ""
+      "tools": "",
+      "admin": "",
+      "transcript": ""
     },
     "content": {
       "participants": "",
       "effects": "",
       "chat": "",
-      "transcript": "",
-      "admin": ""
+      "tools": "",
+      "admin": "",
+      "transcript": ""
     },
     "closeButton": ""
   },
   "chat": {
     "disclaimer": ""
   },
+  "moreTools": {
+    "body": "",
+    "moreLink": "",
+    "tools": {
+      "transcript": {
+        "title": "",
+        "body": ""
+      }
+    }
+  },
   "transcript": {
     "start": {
       "heading": "",
       "body": "",
-      "button": ""
+      "button": "",
+      "linkMore": ""
     },
     "stop": {
       "heading": "",
@@ -189,6 +213,7 @@
     "access": {
       "title": "",
       "description": "",
+      "type": "",
       "levels": {
         "public": {
           "label": "",
@@ -263,7 +288,9 @@
     }
   },
   "recording": {
-    "label": ""
+    "transcriptStarted": "",
+    "transcriptStarting": "",
+    "transcriptStopping": ""
   },
   "participantTileFocus": {
     "pin": {

src/frontend/src/locales/de/sdk.json

@@ -1,5 +1,10 @@
 {
-  "createButton": {
-    "label": ""
+  "createMeeting": {
+    "createButton": "",
+    "joinButton": "",
+    "copyLinkTooltip": "",
+    "resetLabel": "",
+    "participantLimit": "",
+    "popupBlocked": ""
   }
 }

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

@@ -21,5 +21,7 @@
     "several": "Several people want to join this call.",
     "open": "Open",
     "accept": "Accept"
-  }
+  },
+  "recordingStarted": "{{name}} started the meeting transcription.",
+  "recordingStopped": "{{name}} stopped the meeting transcription."
 }

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

@@ -103,9 +103,9 @@
       "open": "Hide everyone",
       "closed": "See everyone"
     },
-    "transcript": {
-      "open": "Hide AI assistant",
-      "closed": "Show AI assistant"
+    "tools": {
+      "open": "Hide more tools",
+      "closed": "Show more tools"
     },
     "admin": {
       "open": "Hide admin",
@@ -149,6 +149,17 @@
       "apply": "Enable virtual background",
       "clear": "Disable virtual background"
     },
+    "faceLandmarks": {
+      "title": "Visual Effects",
+      "glasses": {
+        "apply": "Add Glasses",
+        "clear": "Remove Glasses"
+      },
+      "french": {
+        "apply": "Add French touch",
+        "clear": "Remove French touch"
+      }
+    },
     "experimental": "Experimental feature. A v2 is coming for full browser support and improved quality."
   },
   "sidePanel": {
@@ -156,31 +167,49 @@
       "participants": "Participants",
       "effects": "Effects",
       "chat": "Messages in the chat",
-      "transcript": "AI Assistant",
-      "admin": "Admin settings"
+      "tools": "More tools",
+      "admin": "Admin settings",
+      "transcript": "Transcription"
     },
     "content": {
       "participants": "participants",
       "effects": "effects",
       "chat": "messages",
-      "transcript": "AI assistant",
-      "admin": "Admin settings"
+      "tools": "more tools",
+      "admin": "Admin settings",
+      "transcript": "Transcription"
     },
     "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."
   },
+  "moreTools": {
+    "body": "Access more tools in Visio to enhance your meetings,",
+    "moreLink": "learn more",
+    "tools": {
+      "transcript": {
+        "title": "Transcription",
+        "body": "Transcribe your meeting for later"
+      }
+    }
+  },
   "transcript": {
     "start": {
-      "heading": "Start the Assistant!",
-      "body": "The assistant automatically starts recording your meeting audio (limited to 1 hour). At the end, you'll receive a clear and concise summary of the discussion directly via email.",
-      "button": "Start"
+      "heading": "Transcribe this call",
+      "body": "Automatically transcribe this call and receive the summary in Docs,",
+      "button": "Start transcription",
+      "linkMore": "Learn more"
     },
     "stop": {
       "heading": "Recording in Progress...",
       "body": "Your meeting is currently being recorded. You will receive a summary via email once the meeting ends.",
       "button": "Stop Recording"
+    },
+    "beta": {
+      "heading": "Become a beta tester",
+      "body": "Record your meeting for later. You will receive a summary by email once the meeting is finished.",
+      "button": "Sign up"
     }
   },
   "admin": {
@@ -188,6 +217,7 @@
     "access": {
       "title": "Room access",
       "description": "These settings will also apply to future occurrences of this meeting.",
+      "type": "Meeting access types",
       "levels": {
         "public": {
           "label": "Open",
@@ -262,7 +292,9 @@
     }
   },
   "recording": {
-    "label": "Recording"
+    "transcriptStarted": "Transcribing",
+    "transcriptStarting": "Transcription starting",
+    "transcriptStopping": "Transcription stopping"
   },
   "participantTileFocus": {
     "pin": {

src/frontend/src/locales/en/sdk.json

@@ -1,5 +1,10 @@
 {
-  "createButton": {
-    "label": "Create a Visio link"
+  "createMeeting": {
+    "createButton": "Create",
+    "joinButton": "Join with Visio",
+    "copyLinkTooltip": "Copy link",
+    "resetLabel": "Reset",
+    "participantLimit": "Up to 150 participants.",
+    "popupBlocked": "Popup was blocked. Please allow popups for this site."
   }
 }

src/frontend/src/locales/fr/notifications.json

@@ -21,5 +21,7 @@
     "several": "Plusieurs personnes souhaitent participer à cet appel.",
     "open": "Afficher",
     "accept": "Accepter"
-  }
+  },
+  "recordingStarted": "{{name}} a démarré la transcription de la réunion.",
+  "recordingStopped": "{{name}} a arrêté la transcription de la réunion."
 }

src/frontend/src/locales/fr/rooms.json

@@ -103,9 +103,9 @@
       "open": "Masquer les participants",
       "closed": "Afficher les participants"
     },
-    "transcript": {
-      "open": "Masquer l'assistant IA",
-      "closed": "Afficher l'assistant IA"
+    "tools": {
+      "open": "Masquer plus d'outils",
+      "closed": "Afficher plus d'outils"
     },
     "admin": {
       "open": "Masquer l'admin",
@@ -134,53 +134,82 @@
     }
   },
   "effects": {
-    "activateCamera": "Votre camera est désactivée. Choisissez une option pour l'activer.",
-    "notAvailable": "Les effets vidéo seront bientôt disponible sur votre navigateur. Nous y travaillons ! En attendant, vous pouvez utiliser Google Chrome pour une meilleure performance ou Firefox :(",
+    "activateCamera": "Votre caméra est désactivée. Choisissez une option pour l'activer.",
+    "notAvailable": "Les effets vidéo seront bientôt disponibles sur votre navigateur. Nous y travaillons ! En attendant, vous pouvez utiliser Google Chrome pour de meilleures performances ou Firefox :(",
     "heading": "Flou",
     "blur": {
       "title": "Flou d'arrière-plan",
-      "light": "Léger flou",
+      "light": "Flou léger",
       "normal": "Flou",
-      "apply": "Appliquer le flou",
+      "apply": "Activer le flou",
       "clear": "Désactiver le flou"
     },
     "virtual": {
       "title": "Arrière-plan virtuel",
-      "apply": "Appliquer l'arrière plan virtuel",
-      "clear": "Désactiver l'arrière plan virtuel"
+      "apply": "Activer l'arrière-plan virtuel",
+      "clear": "Désactiver l'arrière-plan virtuel"
     },
-    "experimental": "Fonctionnalité expérimentale. Une v2 arrive pour un support complet sur tous les navigateurs et une meilleur qualité."
+    "faceLandmarks": {
+      "title": "Effets visuels",
+      "glasses": {
+        "apply": "Ajouter des lunettes",
+        "clear": "Retirer les lunettes"
+      },
+      "french": {
+        "apply": "Ajouter la touche française",
+        "clear": "Retirer la touche française"
+      }
+    },
+    "experimental": "Fonctionnalité expérimentale. Une v2 arrive pour un support complet des navigateurs et une meilleure qualité."
   },
   "sidePanel": {
     "heading": {
       "participants": "Participants",
       "effects": "Effets",
       "chat": "Messages dans l'appel",
-      "transcript": "Assistant IA",
-      "admin": "Commandes de l'organisateur"
+      "tools": "Plus d'outils",
+      "admin": "Commandes de l'organisateur",
+      "transcript": "Transcription"
     },
     "content": {
       "participants": "les participants",
       "effects": "les effets",
       "chat": "les messages",
-      "transcript": "l'assistant IA",
-      "admin": "Commandes de l'organisateur"
+      "tools": "plus d'outils",
+      "admin": "Commandes de l'organisateur",
+      "transcript": "Transcription"
     },
     "closeButton": "Masquer {{content}}"
   },
   "chat": {
     "disclaimer": "Les messages sont visibles par les participants uniquement au moment de\nleur envoi. Tous les messages sont supprimés à la fin de l'appel."
   },
+  "moreTools": {
+    "body": "Accèder à d'avantage d'outils dans Visio pour améliorer vos réunions,",
+    "moreLink": "en savoir plus",
+    "tools": {
+      "transcript": {
+        "title": "Transcription",
+        "body": "Transcrivez votre réunion pour plus tard"
+      }
+    }
+  },
   "transcript": {
     "start": {
-      "heading": "Démarrer l'assistant !",
-      "body": "L'assistant démarre automatiquement l'enregistrement sonore de votre réunion (limité à 1h). À la fin, vous recevrez un résumé clair et concis des échanges directement par e-mail.",
-      "button": "Démarrer"
+      "heading": "Transcrire cet appel",
+      "body": "Transcrivez cet appel automatiquement et recevez le compte rendu dans Docs.",
+      "button": "Démarrer la transcription",
+      "linkMore": "En savoir plus"
     },
     "stop": {
       "heading": "Enregistrement en cours …",
       "body": "L'enregistrement de votre réunion est en cours. Vous recevrez un compte-rendu par email une fois la réunion terminée.",
-      "button": "Arrêter l'enregistrement"
+      "button": "Arrêter la transcription"
+    },
+    "beta": {
+      "heading": "Devenez beta testeur",
+      "body": "Enregistrer votre réunion pour plus tard. Vous recevrez un compte-rendu par email une fois la réunion terminée.",
+      "button": "Inscrivez-vous"
     }
   },
   "admin": {
@@ -188,6 +217,7 @@
     "access": {
       "title": "Accès à la réunion",
       "description": "Ces paramètres s'appliqueront également aux futures occurrences de cette réunion.",
+      "type": "Type d'accès à la réunion",
       "levels": {
         "public": {
           "label": "Ouvrir",
@@ -262,7 +292,9 @@
     }
   },
   "recording": {
-    "label": "Enregistrement"
+    "transcriptStarted": "Transcription en cours",
+    "transcriptStarting": "Démarrage de la transcription",
+    "transcriptStopping": "Arrêt de la transcription"
   },
   "participantTileFocus": {
     "pin": {

src/frontend/src/locales/fr/sdk.json

@@ -1,5 +1,10 @@
 {
-  "createButton": {
-    "label": "Créer un lien Visio"
+  "createMeeting": {
+    "createButton": "Créer un lien",
+    "joinButton": "Participer avec Visio",
+    "copyLinkTooltip": "Copier le lien",
+    "resetLabel": "Réinitialiser",
+    "participantLimit": "Jusqu'à 150 participants.",
+    "popupBlocked": "La fenêtre pop-up a été bloquée. Veuillez autoriser les pop-ups pour ce site."
   }
 }

src/frontend/src/locales/nl/notifications.json

@@ -21,5 +21,7 @@
     "several": "Meerdere mensen willen deelnemen aan dit gesprek.",
     "open": "Openen",
     "accept": "Accepteren"
-  }
+  },
+  "recordingStarted": "{{name}} is de transcriptie van de vergadering gestart.",
+  "recordingStopped": "{{name}} heeft de transcriptie van de vergadering gestopt."
 }

src/frontend/src/locales/nl/rooms.json

@@ -103,9 +103,9 @@
       "open": "Verberg iedereen",
       "closed": "Toon iedereen"
     },
-    "transcript": {
-      "open": "Verberg AI-assistent",
-      "closed": "Toon AI-assistant"
+    "tools": {
+      "open": "Meer tools verbergen",
+      "closed": "Meer tools weergeven"
     },
     "admin": {
       "open": "Verberg beheerder",
@@ -134,53 +134,82 @@
     }
   },
   "effects": {
-    "activateCamera": "Uw camera is uitgeschakeld. Kies een optie om hem in te schakelen.",
-    "notAvailable": "Video-effecten zijn binnenkort beschikbaar in uw browser. We werken hier aan! Ondertussen kunt u Chrome gebruiken voor de beste prestaties, of Firefox :(",
+    "activateCamera": "Uw camera is uitgeschakeld. Kies een optie om deze in te schakelen.",
+    "notAvailable": "Video-effecten zijn binnenkort beschikbaar in uw browser. We werken eraan! In de tussentijd kunt u Google Chrome gebruiken voor de beste prestaties of Firefox :(",
     "heading": "Vervaging",
     "blur": {
-      "title": "Achtergrond vervagen",
-      "light": "Licht vervagen",
-      "normal": "Vervagen",
-      "apply": "Schakel vervaging in",
-      "clear": "Schakel vervaging uit"
+      "title": "Achtergrondvervaging",
+      "light": "Lichte vervaging",
+      "normal": "Vervaging",
+      "apply": "Vervaging inschakelen",
+      "clear": "Vervaging uitschakelen"
     },
     "virtual": {
       "title": "Virtuele achtergrond",
-      "apply": "Schakel virtuele achtergrond in",
-      "clear": "Schakel virtuele achtergrond uit"
+      "apply": "Virtuele achtergrond inschakelen",
+      "clear": "Virtuele achtergrond uitschakelen"
     },
-    "experimental": "Experimentele functionaliteit. Een v2 komt er aan met volledige browser-ondersteuning en verbeterde kwaliteit."
+    "faceLandmarks": {
+      "title": "Visuele effecten",
+      "glasses": {
+        "apply": "Bril toevoegen",
+        "clear": "Bril verwijderen"
+      },
+      "french": {
+        "apply": "Franse stijl toevoegen",
+        "clear": "Franse stijl verwijderen"
+      }
+    },
+    "experimental": "Experimentele functie. Een v2 komt eraan voor volledige browserondersteuning en verbeterde kwaliteit."
   },
   "sidePanel": {
     "heading": {
       "participants": "Deelnemers",
       "effects": "Effecten",
       "chat": "Berichten in de chat",
-      "transcript": "AI-assistent",
-      "admin": "Beheerdersbediening"
+      "tools": "Meer tools",
+      "admin": "Beheerdersbediening",
+      "transcript": "Transcriptie"
     },
     "content": {
       "participants": "deelnemers",
       "effects": "effecten",
       "chat": "berichten",
-      "transcript": "AI-assistent",
-      "admin": "Beheerdersbediening"
+      "tools": "meer tools",
+      "admin": "Beheerdersbediening",
+      "transcript": "Transcriptie"
     },
     "closeButton": "Verberg {{content}}"
   },
   "chat": {
     "disclaimer": "De berichten zijn alleen voor de deelnemers zichtbaar op het moment dat ze worden verzonden. Alle berichten worden verwijderd aan het einde van het gesprek."
   },
+  "moreTools": {
+    "body": "Toegang tot meer tools in Visio om je vergaderingen te verbeteren,",
+    "moreLink": "lees meer",
+    "tools": {
+      "transcript": {
+        "title": "Transcriptie",
+        "body": "Transcribeer je vergadering voor later"
+      }
+    }
+  },
   "transcript": {
     "start": {
-      "heading": "Start de assistent!",
-      "body": "De assistent begint automatisch de audio van uw vergadering op te nemen (beperkt tot 1 uur). Na afloop krijgt u direct een heldere en beknopte samenvatting van de discussies in uw e-mail.",
-      "button": "Start"
+      "heading": "Dit gesprek transcriberen",
+      "body": "Transcribeer dit gesprek automatisch en ontvang de samenvatting in Docs.",
+      "button": "Start transcriberen",
+      "linkMore": "Meer informatie"
     },
     "stop": {
       "heading": "Opname loopt ...",
       "body": "Uw vergadering wordt momenteel opgenomen. U ontvangt een samenvatting via e-mail, zo gauw de vergarding gesloten wordt.",
       "button": "Stop met opname"
+    },
+    "beta": {
+      "heading": "Word beta tester",
+      "body": "Neem je vergadering op voor later. Je ontvangt een samenvatting per e-mail zodra de vergadering is afgelopen.",
+      "button": "Schrijf je in"
     }
   },
   "admin": {
@@ -188,6 +217,7 @@
     "access": {
       "title": "Toegang tot vergadering",
       "description": "Deze instellingen zijn ook van toepassing op toekomstige sessies van deze vergadering.",
+      "type": "Vergaderings toegangstypen",
       "levels": {
         "public": {
           "label": "Open",
@@ -262,7 +292,9 @@
     }
   },
   "recording": {
-    "label": "Opnemen"
+    "transcriptStarted": "Transcriptie bezig",
+    "transcriptStarting": "Transcriptie begint",
+    "transcriptStopping": "Transcriptie stopt"
   },
   "participantTileFocus": {
     "pin": {

src/frontend/src/locales/nl/sdk.json

@@ -1,5 +1,10 @@
 {
-  "createButton": {
-    "label": "Maak een Visio link"
+  "createMeeting": {
+    "createButton": "Aanmaken",
+    "joinButton": "Deelnemen met Visio",
+    "copyLinkTooltip": "Link kopiëren",
+    "resetLabel": "Resetten",
+    "participantLimit": "Tot 150 deelnemers.",
+    "popupBlocked": "Pop-up werd geblokkeerd. Sta pop-ups toe voor deze site."
   }
 }

src/frontend/src/primitives/A.tsx

@@ -7,8 +7,9 @@ const link = cva({
     textUnderlineOffset: '2',
     cursor: 'pointer',
     borderRadius: 2,
-    transition: 'all 0.2s',
+    fontWeight: 'normal',
     '&[data-hovered]': {
+      fontWeight: 500,
       textDecorationThickness: '2px',
     },
     '&[data-pressed]': {

src/frontend/src/primitives/Field.tsx

@@ -44,7 +44,7 @@ const FieldWrapper = styled('div', {
 const StyledLabel = styled(Label, {
   base: {
     display: 'block',
-    fontSize: '0.75rem',
+    fontSize: '0.875rem',
   },
   variants: {
     center: {
@@ -218,8 +218,10 @@ export const Field = <T extends object>({
                   {item.description && (
                     <Text
                       variant="note"
+                      wrap={'pretty'}
                       className={css({
                         textStyle: 'sm',
+                        marginBottom: '0.5rem',
                       })}
                     >
                       {item.description}

src/frontend/src/primitives/LinkButton.tsx

@@ -9,6 +9,7 @@ type LinkButtonProps = RecipeVariantProps<ButtonRecipe> &
   TooltipWrapperProps & {
     // Use tooltip as description below the button.
     description?: boolean
+    target?: string
   }
 
 export const LinkButton = ({

src/frontend/src/primitives/Spinner.tsx

@@ -1,18 +1,25 @@
 import { ProgressBar } from 'react-aria-components'
 import { css } from '@/styled-system/css'
 
-export const Spinner = () => {
+export const Spinner = ({
+  size = 56,
+  variant = 'light',
+}: {
+  size: number
+  variant: 'light' | 'dark'
+}) => {
   const center = 14
   const strokeWidth = 3
   const r = 14 - strokeWidth
   const c = 2 * r * Math.PI
+
   return (
     <ProgressBar aria-label="Loading…" value={30}>
       {({ percentage }) => (
         <>
           <svg
-            width={56}
-            height={56}
+            width={size}
+            height={size}
             viewBox="0 0 28 28"
             fill="none"
             strokeWidth={strokeWidth}
@@ -25,9 +32,8 @@ export const Spinner = () => {
               strokeDashoffset={0}
               strokeLinecap="round"
               className={css({
-                stroke: 'primary.100',
+                stroke: variant == 'light' ? 'primary.100' : 'primaryDark.100',
               })}
-              style={{}}
             />
             <circle
               cx={center}
@@ -37,7 +43,7 @@ export const Spinner = () => {
               strokeDashoffset={percentage && c - (percentage / 100) * c}
               strokeLinecap="round"
               className={css({
-                stroke: 'primary.800',
+                stroke: variant == 'light' ? 'primary.800' : 'white',
               })}
               style={{
                 animation: `rotate 1s ease-in-out infinite`,

src/frontend/src/primitives/Text.tsx

@@ -53,6 +53,10 @@ export const text = cva({
       note: {
         color: 'default.subtle-text',
       },
+      smNote: {
+        color: 'default.subtle-text',
+        textStyle: 'sm',
+      },
       inherits: {},
     },
     centered: {

src/frontend/src/primitives/buttonRecipe.ts

@@ -41,6 +41,7 @@ export const buttonRecipe = cva({
     variant: {
       primary: {
         backgroundColor: 'primary.800',
+        fontWeight: '500 !important',
         color: 'white',
         '&[data-hovered]': {
           backgroundColor: 'primary.action',
@@ -112,7 +113,7 @@ export const buttonRecipe = cva({
         },
       },
       tertiary: {
-        backgroundColor: 'primary.100',
+        backgroundColor: 'primary.50',
         color: 'primary.800',
         '&[data-hovered]': {
           backgroundColor: 'primary.300',
@@ -120,6 +121,10 @@ export const buttonRecipe = cva({
         '&[data-pressed]': {
           backgroundColor: 'primary.300',
         },
+        '&[data-disabled]': {
+          backgroundColor: 'transparent',
+          color: 'primary.400',
+        },
       },
       tertiaryText: {
         backgroundColor: 'transparent',

src/frontend/src/routes.ts

@@ -3,6 +3,8 @@ import { HomeRoute } from '@/features/home'
 import { LegalTermsRoute } from '@/features/legalsTerms/LegalTermsRoute'
 import { AccessibilityRoute } from '@/features/legalsTerms/Accessibility'
 import { TermsOfServiceRoute } from '@/features/legalsTerms/TermsOfService'
+import { CreatePopup } from '@/features/sdk/routes/CreatePopup'
+import { CreateMeetingButton } from '@/features/sdk/routes/CreateMeetingButton'
 
 export const routes: Record<
   | 'home'
@@ -10,7 +12,9 @@ export const routes: Record<
   | 'feedback'
   | 'legalTerms'
   | 'accessibility'
-  | 'termsOfService',
+  | 'termsOfService'
+  | 'sdkCreatePopup'
+  | 'sdkCreateButton',
   {
     name: RouteName
     path: RegExp | string
@@ -50,6 +54,16 @@ export const routes: Record<
     path: '/conditions-utilisation',
     Component: TermsOfServiceRoute,
   },
+  sdkCreatePopup: {
+    name: 'sdkCreatePopup',
+    path: '/sdk/create-popup',
+    Component: CreatePopup,
+  },
+  sdkCreateButton: {
+    name: 'sdkCreateButton',
+    path: '/sdk/create-button',
+    Component: CreateMeetingButton,
+  },
 }
 
 export type RouteName = keyof typeof routes

src/frontend/src/stores/layout.ts

@@ -1,14 +1,19 @@
 import { proxy } from 'valtio'
-import { PanelId } from '@/features/rooms/livekit/hooks/useSidePanel'
+import {
+  PanelId,
+  SubPanelId,
+} from '@/features/rooms/livekit/hooks/useSidePanel'
 
 type State = {
   showHeader: boolean
   showFooter: boolean
   activePanelId: PanelId | null
+  activeSubPanelId: SubPanelId | null
 }
 
 export const layoutStore = proxy<State>({
   showHeader: false,
   showFooter: false,
   activePanelId: null,
+  activeSubPanelId: null,
 })

src/frontend/src/stores/transcription.ts

@@ -0,0 +1,16 @@
+import { proxy } from 'valtio'
+
+export enum TranscriptionStatus {
+  STARTING,
+  STARTED,
+  STOPPING,
+  STOPPED,
+}
+
+type State = {
+  status: TranscriptionStatus
+}
+
+export const transcriptionStore = proxy<State>({
+  status: TranscriptionStatus.STOPPED,
+})

src/frontend/src/styles/fonts.css

@@ -30,6 +30,46 @@
   font-display: swap;
 }
 
+@font-face {
+  font-family: 'Marianne';
+  src: url('/fonts/Marianne-Regular-subset.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Marianne';
+  src: url('/fonts/Marianne-Regular_Italic-subset.woff2') format('woff2');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Marianne';
+  src: url('/fonts/Marianne-Medium-subset.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Marianne';
+  src: url('/fonts/Marianne-Bold-subset.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Marianne';
+  src: url('/fonts/Marianne-ExtraBold-subset.woff2') format('woff2');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
 /*
 * to reduce CLS
 * values taken from https://github.com/khempenius/font-fallbacks-dataset/blob/main/font-metric-overrides.csv#L2979

src/frontend/src/utils/constants.ts

@@ -1,2 +1,5 @@
 export const GRIST_FORM =
   'https://grist.numerique.gouv.fr/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4' as const
+
+export const BETA_USERS_FORM_URL =
+  'https://grist.numerique.gouv.fr/o/docs/forms/3fFfvJoTBEQ6ZiMi8zsQwX/17' as const

src/mail/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "mail_mjml",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mail_mjml",
-      "version": "0.1.15",
+      "version": "0.1.17",
       "license": "MIT",
       "dependencies": {
         "@html-to/text-cli": "0.5.4",

src/mail/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mail_mjml",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "An util to generate html and text django's templates from mjml templates",
   "type": "module",
   "dependencies": {

src/sdk/consumer/src/App.tsx

@@ -21,7 +21,7 @@ function App() {
       </div>
       <div className="group">
         <label>Visioconference</label>
-        <VisioCreateButton onRoomCreated={setRoomUrl} />
+        <VisioCreateButton onRoomCreated={(data) => setRoomUrl(data.url)} />
       </div>
       <div className="group">
         <label>Description</label>

src/sdk/consumer/src/index.css

@@ -72,3 +72,56 @@ button {
   font-weight: 300;
   cursor: pointer;
 }
+
+.create-meeting {
+  background-color: rgb(45, 45, 70);
+  color: white;
+  height: 46px;
+  border-radius: 4px;
+  font-size: 16px;
+  font-weight: 300;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem 0.75rem;
+  border: none;
+}
+
+.create-meeting svg path {
+  fill: white !important;
+}
+
+
+.icon {
+  color: white !important;
+}
+
+.join-button {
+  background-color: rgb(45, 45, 70);
+  color: white;
+  height: 46px;
+  border-radius: 4px;
+  font-size: 16px;
+  font-weight: 300;
+  cursor: pointer;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  padding: 0 1rem;
+  text-decoration: none;
+}
+
+.join-button svg path {
+  fill: white !important;
+}
+
+.join-link {
+  padding-top: 0.5rem;
+}
+
+.join-link svg path {
+  fill: white !important;
+}

src/sdk/library/.env.development

@@ -0,0 +1 @@
+VITE_VISIO_SDK_URL=https://meet.127.0.0.1.nip.io/sdk

src/sdk/library/src/Types.ts

@@ -5,3 +5,10 @@ export type ConfigType = typeof DEFAULT_CONFIG
 export enum ClientMessageType {
   ROOM_CREATED = 'ROOM_CREATED',
 }
+
+export type RoomData = {
+  slug: string
+  url: string
+  phone?: string
+  code?: string
+}

src/sdk/library/src/create/VisioCreateButton.tsx

@@ -1,11 +1,15 @@
-import { DEFAULT_CONFIG } from '@/Config'
-import { ClientMessageType } from '@/Types'
 import { useEffect } from 'react'
+import { ClientMessageType, RoomData } from '@/Types'
+import { DEFAULT_CONFIG } from '@/Config'
 
 export const VisioCreateButton = ({
   onRoomCreated,
+  readOnly = false,
+  slug,
 }: {
-  onRoomCreated: (roomUrl: string) => void
+  onRoomCreated: (roomData: RoomData) => void
+  readOnly?: boolean
+  slug?: string
 }) => {
   useEffect(() => {
     const onMessage = (event: MessageEvent) => {
@@ -13,13 +17,11 @@ export const VisioCreateButton = ({
       if (event.origin !== new URL(DEFAULT_CONFIG.url).origin) {
         return
       }
-      if (event.data.type === ClientMessageType.ROOM_CREATED) {
-        const data = event.data.data
-        const roomUrl = data.url
-        onRoomCreated(roomUrl)
+      const { type, data } = event.data
+      if (type == ClientMessageType.ROOM_CREATED && data?.room) {
+        onRoomCreated(data.room)
       }
     }
-
     window.addEventListener('message', onMessage)
     return () => {
       window.removeEventListener('message', onMessage)
@@ -30,10 +32,13 @@ export const VisioCreateButton = ({
     // eslint-disable-next-line jsx-a11y/iframe-has-title
     <iframe
       allow="clipboard-read; clipboard-write"
-      src={DEFAULT_CONFIG.url + '/create-button'}
+      src={
+        DEFAULT_CONFIG.url +
+        `/create-button?readOnly=${readOnly}${slug ? '&slug=' + slug : ''}`
+      }
       style={{
         width: '100%',
-        height: '52px',
+        height: '100px',
         border: 'none',
       }}
     ></iframe>

src/sdk/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "sdk",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sdk",
-      "version": "0.1.15",
+      "version": "0.1.17",
       "license": "ISC",
       "workspaces": [
         "./library",

src/sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdk",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "author": "",
   "license": "ISC",
   "description": "",

src/summary/pyproject.toml

@@ -1,7 +1,7 @@
 
 [project]
 name = "summary"
-version = "0.1.15"
+version = "0.1.17"
 dependencies = [
     "fastapi[standard]>=0.105.0",
     "uvicorn>=0.24.0",
@@ -10,14 +10,14 @@ dependencies = [
     "celery==5.4.0",
     "redis==5.2.1",
     "minio==7.2.15",
-    "openai==1.65.2",
+    "openai==1.68.2",
     "requests==2.32.3",
-    "sentry-sdk[fastapi, celery]==2.22.0",
+    "sentry-sdk[fastapi, celery]==2.24.1",
 ]
 
 [project.optional-dependencies]
 dev = [
-    "ruff==0.9.9",
+    "ruff==0.11.2",
 ]
 
 [build-system]

src/summary/summary/api/route/tasks.py

@@ -1,10 +1,15 @@
 """API routes related to application tasks."""
 
+from typing import Optional
+
 from celery.result import AsyncResult
 from fastapi import APIRouter
 from pydantic import BaseModel
 
-from summary.core.celery_worker import process_audio_transcribe_summarize
+from summary.core.celery_worker import (
+    process_audio_transcribe_summarize,
+    process_audio_transcribe_summarize_v2,
+)
 
 
 class TaskCreation(BaseModel):
@@ -13,6 +18,7 @@ class TaskCreation(BaseModel):
     filename: str
     email: str
     sub: str
+    version: Optional[int] = 2
 
 
 router = APIRouter(prefix="/tasks")
@@ -21,9 +27,15 @@ router = APIRouter(prefix="/tasks")
 @router.post("/")
 async def create_task(request: TaskCreation):
     """Create a task."""
-    task = process_audio_transcribe_summarize.delay(
-        request.filename, request.email, request.sub
-    )
+    if request.version == 1:
+        task = process_audio_transcribe_summarize.delay(
+            request.filename, request.email, request.sub
+        )
+    else:
+        task = process_audio_transcribe_summarize_v2.delay(
+            request.filename, request.email, request.sub
+        )
+
     return {"id": task.id, "message": "Task created"}
 
 

src/summary/summary/core/celery_worker.py

@@ -56,6 +56,35 @@ def create_retry_session():
     return session
 
 
+def format_segments(transcription_data):
+    """Format transcription segments from WhisperX into a readable conversation format.
+
+    Processes transcription data with segments containing speaker information and text,
+    combining consecutive segments from the same speaker and formatting them as a
+    conversation with speaker labels.
+    """
+    formatted_output = ""
+    if not transcription_data or not hasattr(transcription_data, 'segments'):
+        if isinstance(transcription_data, dict) and 'segments' in transcription_data:
+            segments = transcription_data['segments']
+        else:
+            return "Error: Invalid transcription data format"
+    else:
+        segments = transcription_data.segments
+
+    previous_speaker = None
+
+    for segment in segments:
+        speaker = segment.get('speaker', 'UNKNOWN_SPEAKER')
+        text = segment.get('text', '')
+        if text:
+            if speaker != previous_speaker:
+                formatted_output += f"\n\n *{speaker}*: {text}"
+            else:
+                formatted_output += f" {text}"
+            previous_speaker = speaker
+    return formatted_output
+
 def post_with_retries(url, data):
     """Send POST request with automatic retries."""
     session = create_retry_session()
@@ -140,3 +169,72 @@ def process_audio_transcribe_summarize(filename: str, email: str, sub: str):
 
     logger.info("Webhook submitted successfully. Status: %s", response.status_code)
     logger.debug("Response body: %s", response.text)
+
+
+@celery.task(max_retries=settings.celery_max_retries)
+def process_audio_transcribe_summarize_v2(filename: str, email: str, sub: str):
+    """Process an audio file by transcribing it and generating a summary.
+
+    This Celery task performs the following operations:
+    1. Retrieves the audio file from MinIO storage
+    2. Transcribes the audio using WhisperX model
+    3. Sends the results via webhook
+
+    """
+    logger.info("Notification received")
+    logger.debug("filename: %s", filename)
+
+    minio_client = Minio(
+        settings.aws_s3_endpoint_url,
+        access_key=settings.aws_s3_access_key_id,
+        secret_key=settings.aws_s3_secret_access_key,
+        secure=settings.aws_s3_secure_access,
+    )
+
+    logger.debug("Connection to the Minio bucket successful")
+
+    audio_file_stream = minio_client.get_object(
+        settings.aws_storage_bucket_name, object_name=filename
+    )
+
+    temp_file_path = save_audio_stream(audio_file_stream)
+    logger.debug("Recording successfully downloaded, filepath: %s", temp_file_path)
+
+    logger.debug("Initiating OpenAI client")
+    openai_client = openai.OpenAI(
+        api_key=settings.openai_api_key, base_url=settings.openai_base_url
+    )
+
+    try:
+        logger.debug("Querying transcription …")
+        with open(temp_file_path, "rb") as audio_file:
+            transcription = openai_client.audio.transcriptions.create(
+                model=settings.openai_asr_model, file=audio_file
+            )
+
+            logger.debug("Transcription: \n %s", transcription)
+    finally:
+        if os.path.exists(temp_file_path):
+            os.remove(temp_file_path)
+            logger.debug("Temporary file removed: %s", temp_file_path)
+
+    formatted_transcription = format_segments(transcription)
+
+    data = {
+        "title": "Transcription",
+        "content": formatted_transcription,
+        "email": email,
+        "sub": sub,
+    }
+
+    logger.debug("Submitting webhook to %s", settings.webhook_url)
+    logger.debug("Request payload: %s", json.dumps(data, indent=2))
+
+    response = post_with_retries(settings.webhook_url, data)
+
+    logger.info("Webhook submitted successfully. Status: %s", response.status_code)
+    logger.debug("Response body: %s", response.text)
+
+    # TODO - integrate summarize the transcript and create a new document.
+
+