Add real time api calling

CHANGELOG.md

@@ -9,22 +9,16 @@ and this project adheres to
 
 ## [Unreleased]
 
-## [2.2.0] - 2025-02-10
-
 ## Added
 
 - 📝(doc) Add security.md and codeofconduct.md #604
-- ✨(frontend) add home page #608
+- ✨(frontend) add home page #553
 - ✨(frontend) cursor display on activity #609
 - ✨(frontend) Add export page break #623
 
-## Changed
-
-- 🔧(backend) make AI feature reach configurable #628
-
 ## Fixed
 
-- 🌐(CI) Fix email partially translated #616
+🌐(CI) Fix email partially translated #616
 - 🐛(frontend) fix cursor breakline #609
 - 🐛(frontend) fix style pdf export #609
 
@@ -411,8 +405,7 @@ and this project adheres to
 - 🚀 Impress, project to manage your documents easily and collaboratively.
 
 
-[unreleased]: https://github.com/numerique-gouv/impress/compare/v2.2.0...main
-[v2.2.0]: https://github.com/numerique-gouv/impress/releases/v2.2.0
+[unreleased]: https://github.com/numerique-gouv/impress/compare/v2.1.0...main
 [v2.1.0]: https://github.com/numerique-gouv/impress/releases/v2.1.0
 [v2.0.1]: https://github.com/numerique-gouv/impress/releases/v2.0.1
 [v2.0.0]: https://github.com/numerique-gouv/impress/releases/v2.0.0

UPGRADE.md

@@ -15,8 +15,3 @@ the following command inside your docker container:
 (Note : in your development environment, you can `make migrate`.)
 
 ## [Unreleased]
-
-- AI features are now limited to users who are authenticated. Before this release, even anonymous
-  users who gained editor access on a document with link reach used to get AI feature.
-  IF you want anonymous users to keep access on AI features, you must now define the
-  `AI_ALLOW_REACH_FROM` setting to "public".

docker-compose.yml

@@ -15,14 +15,14 @@ services:
       - "1081:1080"
 
   minio:
-    # user: ${DOCKER_USER:-1000}
+    user: ${DOCKER_USER:-1000}
     image: minio/minio
     environment:
       - MINIO_ROOT_USER=impress
       - MINIO_ROOT_PASSWORD=password
     ports:
-      - '9000:9000'
-      - '9001:9001'
+      - "9000:9000"
+      - "9001:9001"
     entrypoint: ""
     command: minio server --console-address :9001 /data
     volumes:
@@ -59,11 +59,11 @@ services:
       - ./src/backend:/app
       - ./data/static:/data/static
     depends_on:
-        - postgresql
-        - mailcatcher
-        - redis
-        - createbuckets
-  
+      - postgresql
+      - mailcatcher
+      - redis
+      - createbuckets
+
   celery-dev:
     user: ${DOCKER_USER:-1000}
     image: impress:backend-development
@@ -122,7 +122,7 @@ services:
 
   frontend-dev:
     user: "${DOCKER_USER:-1000}"
-    build: 
+    build:
       context: .
       dockerfile: ./src/frontend/Dockerfile
       target: frontend-production
@@ -151,13 +151,13 @@ services:
     image: node:18
     user: "${DOCKER_USER:-1000}"
     environment:
-      HOME: /tmp 
+      HOME: /tmp
     volumes:
       - ".:/app"
 
   y-provider:
     user: ${DOCKER_USER:-1000}
-    build: 
+    build:
       context: .
       dockerfile: ./src/frontend/servers/y-provider/Dockerfile
       target: y-provider
@@ -169,6 +169,7 @@ services:
 
   kc_postgresql:
     image: postgres:14.3
+    platform: linux/amd64
     ports:
       - "5433:5432"
     env_file:
@@ -196,7 +197,7 @@ services:
       KC_DB_PASSWORD: pass
       KC_DB_USERNAME: impress
       KC_DB_SCHEMA: public
-      PROXY_ADDRESS_FORWARDING: 'true'
+      PROXY_ADDRESS_FORWARDING: "true"
     ports:
       - "8080:8080"
     depends_on:

env.d/development/common.dist

@@ -10,6 +10,10 @@ LOGGING_LEVEL_HANDLERS_CONSOLE=INFO
 LOGGING_LEVEL_LOGGERS_ROOT=INFO
 LOGGING_LEVEL_LOGGERS_APP=INFO
 
+# Y-Provider
+Y_PROVIDER_API_KEY="yprovider-api-key" 
+Y_PROVIDER_API_BASE_URL=http://y-provider:4444/api/
+
 # Python
 PYTHONPATH=/app
 
@@ -54,6 +58,9 @@ AI_BASE_URL=https://openaiendpoint.com
 AI_API_KEY=password
 AI_MODEL=llama
 
+# Accessibility API
+ACCESSIBILITY_API_BASE_URL=https://localhost:8000
+
 # Collaboration
 COLLABORATION_API_URL=http://nginx:8083/collaboration/api/
 COLLABORATION_SERVER_ORIGIN=http://localhost:3000

package.json

@@ -1,6 +0,0 @@
-{
-  "dependencies": {
-    "@blocknote/core": "^0.23.4",
-    "next": "^15.1.7"
-  }
-}

src/backend/core/api/serializers.py

@@ -16,6 +16,7 @@ from core.services.converter_services import (
     ConversionError,
     YdocConverter,
 )
+from core.services.ai_services import AIService
 
 
 class UserSerializer(serializers.ModelSerializer):
@@ -306,7 +307,7 @@ class ServerCreateDocumentSerializer(serializers.Serializer):
         if user:
             email = user.email
             language = user.language or language
-
+        
         try:
             document_content = YdocConverter().convert_markdown(
                 validated_data["content"]
@@ -568,6 +569,56 @@ class AITranslateSerializer(serializers.Serializer):
         if len(value.strip()) == 0:
             raise serializers.ValidationError("Text field cannot be empty.")
         return value
+    
+
+class AIPdfTranscribeSerializer(serializers.Serializer):
+    """Serializer for AI PDF transcribe requests."""
+
+    pdfUrl = serializers.CharField(required=True)
+
+    def __init__(self, *args, **kwargs):
+        """Initialize with user."""
+        self.user = kwargs.pop('user', None)
+        super().__init__(*args, **kwargs)
+
+    def validate_pdfUrl(self, value):
+        """Ensure the pdfUrl field is a valid URL."""
+        if not value.startswith(settings.MEDIA_BASE_URL):
+            raise serializers.ValidationError("Invalid PDF URL format.")
+        return value
+
+    def create(self, validated_data):
+        """Create a new document for the transcribed content."""
+        if not self.user:
+            raise serializers.ValidationError("User is required")
+        
+        # Get the transcribed content from AI service
+        pdf_url = validated_data["pdfUrl"]
+        response = AIService().transcribe_pdf(pdf_url)
+        
+        try:
+            # Convert the markdown content to YDoc format
+            document_content = YdocConverter().convert_markdown(response)
+        except ConversionError as err:
+            raise serializers.ValidationError(
+                {"content": [f"Could not convert transcribed content: {str(err)}"]}
+            ) from err
+
+        # Create the document as root node with converted content
+        document = models.Document.add_root(
+            title="PDF Transcription", 
+            content=document_content,
+            creator=self.user,
+        )
+
+        # Create owner access for the user
+        models.DocumentAccess.objects.create(
+            document=document,
+            role=models.RoleChoices.OWNER,
+            user=self.user,
+        )
+
+        return document
 
 
 class MoveDocumentSerializer(serializers.Serializer):

src/backend/core/api/viewsets.py

@@ -1079,6 +1079,41 @@ class DocumentViewSet(
 
         return drf.response.Response(response, status=drf.status.HTTP_200_OK)
 
+    @drf.decorators.action(
+        detail=True,
+        methods=["post"],
+        name="Just proxy ai call",
+        url_path="ai-proxy"
+    )
+    def ai_proxy(self, request, *args, **kwargs):
+        """
+        POST /api/v1.0/documents/<resource_id>/ai-transform
+        with expected data:
+        - text: str
+        - action: str [prompt, correct, rephrase, summarize]
+        Return JSON response with the processed text.
+        """
+        print('PROXY 1')
+        # Check permissions first
+        # self.get_object()
+
+        print('PROXY 2')
+        print(request.data)
+        # serializer = serializers.AITransformSerializer(data=request.data)
+        # serializer.is_valid(raise_exception=True)
+
+        print('PROXY 3')
+        system_content = request.data["system"]
+        text = request.data["text"]
+
+        print('PROXY 4')
+        response = AIService().call_proxy(system_content, text)
+
+        print('PROXY 5')
+        print(response)
+
+        return drf.response.Response(response, status=drf.status.HTTP_200_OK)
+
     @drf.decorators.action(
         detail=True,
         methods=["post"],
@@ -1107,6 +1142,32 @@ class DocumentViewSet(
 
         return drf.response.Response(response, status=drf.status.HTTP_200_OK)
 
+    @drf.decorators.action(
+        detail=True,
+        methods=["post"],
+        name="Transcribe PDF with AI",
+        url_path="ai-pdf-transcribe",
+        throttle_classes=[utils.AIDocumentRateThrottle, utils.AIUserRateThrottle],
+    )
+    def ai_pdf_transcribe(self, request, *args, **kwargs):
+        """
+        POST /api/v1.0/documents/<resource_id>/ai-pdf-transcribe
+        with expected data:
+        - pdfUrl: str
+        Return JSON response with the new document ID containing the transcription.
+        """
+        serializer = serializers.AIPdfTranscribeSerializer(
+            data=request.data,
+            user=request.user
+        )
+        serializer.is_valid(raise_exception=True)
+        document = serializer.save()
+        
+        return drf.response.Response(
+            {"document_id": str(document.id)}, 
+            status=drf.status.HTTP_201_CREATED
+        )
+
 
 class DocumentAccessViewSet(
     ResourceAccessViewsetMixin,

src/backend/core/models.py

@@ -629,9 +629,6 @@ class Document(MP_Node, BaseModel):
         # which date to allow them anyway)
         # Anonymous users should also not see document accesses
         has_access_role = bool(roles) and not is_deleted
-        can_update_from_access = (
-            is_owner_or_admin or RoleChoices.EDITOR in roles
-        ) and not is_deleted
 
         # Add roles provided by the document link, taking into account its ancestors
 
@@ -650,23 +647,11 @@ class Document(MP_Node, BaseModel):
             is_owner_or_admin or RoleChoices.EDITOR in roles
         ) and not is_deleted
 
-        ai_allow_reach_from = settings.AI_ALLOW_REACH_FROM
-        ai_access = any(
-            [
-                ai_allow_reach_from == LinkReachChoices.PUBLIC and can_update,
-                ai_allow_reach_from == LinkReachChoices.AUTHENTICATED
-                and user.is_authenticated
-                and can_update,
-                ai_allow_reach_from == LinkReachChoices.RESTRICTED
-                and can_update_from_access,
-            ]
-        )
-
         return {
             "accesses_manage": is_owner_or_admin,
             "accesses_view": has_access_role,
-            "ai_transform": ai_access,
-            "ai_translate": ai_access,
+            "ai_transform": can_update,
+            "ai_translate": can_update,
             "attachment_upload": can_update,
             "children_list": can_get,
             "children_create": can_update and user.is_authenticated,

src/backend/core/services/ai_services.py

@@ -2,13 +2,18 @@
 
 import json
 import re
+import os
+import requests
+import botocore
 
 from django.conf import settings
 from django.core.exceptions import ImproperlyConfigured
+from django.core.files.storage import default_storage
 
 from openai import OpenAI
 
 from core import enums
+from core.models import Document
 
 AI_ACTIONS = {
     "prompt": (
@@ -55,6 +60,22 @@ class AIService:
             raise ImproperlyConfigured("AI configuration not set")
         self.client = OpenAI(base_url=settings.AI_BASE_URL, api_key=settings.AI_API_KEY)
 
+    def call_proxy(self, system_content, text):
+       messages = [
+                {"role": "system", "content": system_content},
+                {"role": "user", "content": text},
+            ]
+       print('REQUEST', messages)
+       response = self.client.chat.completions.create(
+            model=settings.AI_MODEL,
+            messages=messages,
+        )
+       
+       print('RESPONSE', response)
+       content = response.choices[0].message.content
+       print('CONTENT', content)
+       return content
+
     def call_ai_api(self, system_content, text):
         """Helper method to call the OpenAI API and process the response."""
         response = self.client.chat.completions.create(
@@ -96,3 +117,26 @@ class AIService:
         language_display = enums.ALL_LANGUAGES.get(language, language)
         system_content = AI_TRANSLATE.format(language=language_display)
         return self.call_ai_api(system_content, text)
+
+    def transcribe_pdf(self, pdf_url):
+        """Transcribe PDF using the accessibility hackathon API and create a new document."""
+        try:
+            media_prefix = os.path.join(settings.MEDIA_BASE_URL, "media")
+            key = pdf_url[len(media_prefix):]
+
+            pdf_response = default_storage.connection.meta.client.get_object(
+                Bucket=default_storage.bucket_name,
+                Key=key
+            )
+            pdf_content = pdf_response['Body'].read()
+            
+            api_url = f"{settings.ACCESSIBILITY_API_BASE_URL}/transcribe/pdf"
+            files = {'file': ('document.pdf', pdf_content, 'application/pdf')}
+            headers = {'Accept': 'application/json'}
+            response = requests.post(api_url, files=files, headers=headers)
+            response.raise_for_status()
+            
+            transcribed_text = response.json()['markdown_content']
+            return transcribed_text
+        except Exception as e:
+            raise RuntimeError(f"Failed to transcribe PDF: {str(e)}")

src/backend/core/tests/documents/test_api_documents_ai_transform.py

@@ -2,7 +2,6 @@
 Test AI transform API endpoint for users in impress's core app.
 """
 
-import random
 from unittest.mock import MagicMock, patch
 
 from django.core.cache import cache
@@ -32,9 +31,6 @@ def ai_settings():
         yield
 
 
-@override_settings(
-    AI_ALLOW_REACH_FROM=random.choice(["public", "authenticated", "restricted"])
-)
 @pytest.mark.parametrize(
     "reach, role",
     [
@@ -61,7 +57,6 @@ def test_api_documents_ai_transform_anonymous_forbidden(reach, role):
     }
 
 
-@override_settings(AI_ALLOW_REACH_FROM="public")
 @pytest.mark.usefixtures("ai_settings")
 @patch("openai.resources.chat.completions.Completions.create")
 def test_api_documents_ai_transform_anonymous_success(mock_create):
@@ -98,27 +93,6 @@ def test_api_documents_ai_transform_anonymous_success(mock_create):
     )
 
 
-@override_settings(AI_ALLOW_REACH_FROM=random.choice(["authenticated", "restricted"]))
-@pytest.mark.usefixtures("ai_settings")
-@patch("openai.resources.chat.completions.Completions.create")
-def test_api_documents_ai_transform_anonymous_limited_by_setting(mock_create):
-    """
-    Anonymous users should be able to request AI transform to a document
-    if the link reach and role permit it.
-    """
-    document = factories.DocumentFactory(link_reach="public", link_role="editor")
-
-    answer = '{"answer": "Salut"}'
-    mock_create.return_value = MagicMock(
-        choices=[MagicMock(message=MagicMock(content=answer))]
-    )
-
-    url = f"/api/v1.0/documents/{document.id!s}/ai-transform/"
-    response = APIClient().post(url, {"text": "Hello", "action": "summarize"})
-
-    assert response.status_code == 401
-
-
 @pytest.mark.parametrize(
     "reach, role",
     [

src/backend/core/tests/documents/test_api_documents_ai_translate.py

@@ -2,7 +2,6 @@
 Test AI translate API endpoint for users in impress's core app.
 """
 
-import random
 from unittest.mock import MagicMock, patch
 
 from django.core.cache import cache
@@ -52,9 +51,6 @@ def test_api_documents_ai_translate_viewset_options_metadata():
     }
 
 
-@override_settings(
-    AI_ALLOW_REACH_FROM=random.choice(["public", "authenticated", "restricted"])
-)
 @pytest.mark.parametrize(
     "reach, role",
     [
@@ -81,7 +77,6 @@ def test_api_documents_ai_translate_anonymous_forbidden(reach, role):
     }
 
 
-@override_settings(AI_ALLOW_REACH_FROM="public")
 @pytest.mark.usefixtures("ai_settings")
 @patch("openai.resources.chat.completions.Completions.create")
 def test_api_documents_ai_translate_anonymous_success(mock_create):
@@ -118,27 +113,6 @@ def test_api_documents_ai_translate_anonymous_success(mock_create):
     )
 
 
-@override_settings(AI_ALLOW_REACH_FROM=random.choice(["authenticated", "restricted"]))
-@pytest.mark.usefixtures("ai_settings")
-@patch("openai.resources.chat.completions.Completions.create")
-def test_api_documents_ai_translate_anonymous_limited_by_setting(mock_create):
-    """
-    Anonymous users should be able to request AI translate to a document
-    if the link reach and role permit it.
-    """
-    document = factories.DocumentFactory(link_reach="public", link_role="editor")
-
-    answer = '{"answer": "Salut"}'
-    mock_create.return_value = MagicMock(
-        choices=[MagicMock(message=MagicMock(content=answer))]
-    )
-
-    url = f"/api/v1.0/documents/{document.id!s}/ai-translate/"
-    response = APIClient().post(url, {"text": "Hello", "language": "es"})
-
-    assert response.status_code == 401
-
-
 @pytest.mark.parametrize(
     "reach, role",
     [

src/backend/core/tests/documents/test_api_documents_retrieve.py

@@ -28,8 +28,8 @@ def test_api_documents_retrieve_anonymous_public_standalone():
         "abilities": {
             "accesses_manage": False,
             "accesses_view": False,
-            "ai_transform": False,
-            "ai_translate": False,
+            "ai_transform": document.link_role == "editor",
+            "ai_translate": document.link_role == "editor",
             "attachment_upload": document.link_role == "editor",
             "children_create": False,
             "children_list": True,
@@ -84,8 +84,8 @@ def test_api_documents_retrieve_anonymous_public_parent():
         "abilities": {
             "accesses_manage": False,
             "accesses_view": False,
-            "ai_transform": False,
-            "ai_translate": False,
+            "ai_transform": grand_parent.link_role == "editor",
+            "ai_translate": grand_parent.link_role == "editor",
             "attachment_upload": grand_parent.link_role == "editor",
             "children_create": False,
             "children_list": True,

src/backend/core/tests/test_models_documents.py

@@ -12,7 +12,6 @@ from django.core import mail
 from django.core.cache import cache
 from django.core.exceptions import ValidationError
 from django.core.files.storage import default_storage
-from django.test.utils import override_settings
 from django.utils import timezone
 
 import pytest
@@ -125,9 +124,6 @@ def test_models_documents_soft_delete(depth):
 # get_abilities
 
 
-@override_settings(
-    AI_ALLOW_REACH_FROM=random.choice(["public", "authenticated", "restricted"])
-)
 @pytest.mark.parametrize(
     "is_authenticated,reach,role",
     [
@@ -179,9 +175,6 @@ def test_models_documents_get_abilities_forbidden(
     assert document.get_abilities(user) == expected_abilities
 
 
-@override_settings(
-    AI_ALLOW_REACH_FROM=random.choice(["public", "authenticated", "restricted"])
-)
 @pytest.mark.parametrize(
     "is_authenticated,reach",
     [
@@ -250,8 +243,8 @@ def test_models_documents_get_abilities_editor(
     expected_abilities = {
         "accesses_manage": False,
         "accesses_view": False,
-        "ai_transform": is_authenticated,
-        "ai_translate": is_authenticated,
+        "ai_transform": True,
+        "ai_translate": True,
         "attachment_upload": True,
         "children_create": is_authenticated,
         "children_list": True,
@@ -278,9 +271,6 @@ def test_models_documents_get_abilities_editor(
     assert all(value is False for value in document.get_abilities(user).values())
 
 
-@override_settings(
-    AI_ALLOW_REACH_FROM=random.choice(["public", "authenticated", "restricted"])
-)
 def test_models_documents_get_abilities_owner(django_assert_num_queries):
     """Check abilities returned for the owner of a document."""
     user = factories.UserFactory()
@@ -310,16 +300,12 @@ def test_models_documents_get_abilities_owner(django_assert_num_queries):
     }
     with django_assert_num_queries(1):
         assert document.get_abilities(user) == expected_abilities
-
     document.soft_delete()
     document.refresh_from_db()
     expected_abilities["move"] = False
     assert document.get_abilities(user) == expected_abilities
 
 
-@override_settings(
-    AI_ALLOW_REACH_FROM=random.choice(["public", "authenticated", "restricted"])
-)
 def test_models_documents_get_abilities_administrator(django_assert_num_queries):
     """Check abilities returned for the administrator of a document."""
     user = factories.UserFactory()
@@ -349,15 +335,11 @@ def test_models_documents_get_abilities_administrator(django_assert_num_queries)
     }
     with django_assert_num_queries(1):
         assert document.get_abilities(user) == expected_abilities
-
     document.soft_delete()
     document.refresh_from_db()
     assert all(value is False for value in document.get_abilities(user).values())
 
 
-@override_settings(
-    AI_ALLOW_REACH_FROM=random.choice(["public", "authenticated", "restricted"])
-)
 def test_models_documents_get_abilities_editor_user(django_assert_num_queries):
     """Check abilities returned for the editor of a document."""
     user = factories.UserFactory()
@@ -387,31 +369,23 @@ def test_models_documents_get_abilities_editor_user(django_assert_num_queries):
     }
     with django_assert_num_queries(1):
         assert document.get_abilities(user) == expected_abilities
-
     document.soft_delete()
     document.refresh_from_db()
     assert all(value is False for value in document.get_abilities(user).values())
 
 
-@pytest.mark.parametrize("ai_access_setting", ["public", "authenticated", "restricted"])
-def test_models_documents_get_abilities_reader_user(
-    ai_access_setting, django_assert_num_queries
-):
+def test_models_documents_get_abilities_reader_user(django_assert_num_queries):
     """Check abilities returned for the reader of a document."""
     user = factories.UserFactory()
     document = factories.DocumentFactory(users=[(user, "reader")])
-
     access_from_link = (
         document.link_reach != "restricted" and document.link_role == "editor"
     )
-
     expected_abilities = {
         "accesses_manage": False,
         "accesses_view": True,
-        # If you get your editor rights from the link role and not your access role
-        # You should not access AI if it's restricted to users with specific access
-        "ai_transform": access_from_link and ai_access_setting != "restricted",
-        "ai_translate": access_from_link and ai_access_setting != "restricted",
+        "ai_transform": access_from_link,
+        "ai_translate": access_from_link,
         "attachment_upload": access_from_link,
         "children_create": access_from_link,
         "children_list": True,
@@ -430,14 +404,11 @@ def test_models_documents_get_abilities_reader_user(
         "versions_list": True,
         "versions_retrieve": True,
     }
-
-    with override_settings(AI_ALLOW_REACH_FROM=ai_access_setting):
-        with django_assert_num_queries(1):
-            assert document.get_abilities(user) == expected_abilities
-
-        document.soft_delete()
-        document.refresh_from_db()
-        assert all(value is False for value in document.get_abilities(user).values())
+    with django_assert_num_queries(1):
+        assert document.get_abilities(user) == expected_abilities
+    document.soft_delete()
+    document.refresh_from_db()
+    assert all(value is False for value in document.get_abilities(user).values())
 
 
 def test_models_documents_get_abilities_preset_role(django_assert_num_queries):
@@ -475,44 +446,6 @@ def test_models_documents_get_abilities_preset_role(django_assert_num_queries):
     }
 
 
-@override_settings(AI_ALLOW_REACH_FROM="public")
-@pytest.mark.parametrize(
-    "is_authenticated,reach",
-    [
-        (True, "public"),
-        (False, "public"),
-        (True, "authenticated"),
-    ],
-)
-def test_models_document_get_abilities_ai_access_authenticated(is_authenticated, reach):
-    """Validate AI abilities when AI is available to any anonymous user with editor rights."""
-    user = factories.UserFactory() if is_authenticated else AnonymousUser()
-    document = factories.DocumentFactory(link_reach=reach, link_role="editor")
-
-    abilities = document.get_abilities(user)
-    assert abilities["ai_transform"] is True
-    assert abilities["ai_translate"] is True
-
-
-@override_settings(AI_ALLOW_REACH_FROM="authenticated")
-@pytest.mark.parametrize(
-    "is_authenticated,reach",
-    [
-        (True, "public"),
-        (False, "public"),
-        (True, "authenticated"),
-    ],
-)
-def test_models_document_get_abilities_ai_access_public(is_authenticated, reach):
-    """Validate AI abilities when AI is available only to authenticated users with editor rights."""
-    user = factories.UserFactory() if is_authenticated else AnonymousUser()
-    document = factories.DocumentFactory(link_reach=reach, link_role="editor")
-
-    abilities = document.get_abilities(user)
-    assert abilities["ai_transform"] == is_authenticated
-    assert abilities["ai_translate"] == is_authenticated
-
-
 def test_models_documents_get_versions_slice_pagination(settings):
     """
     The "get_versions_slice" method should allow navigating all versions of

src/backend/impress/settings.py

@@ -516,12 +516,13 @@ class Base(Configuration):
     AI_API_KEY = values.Value(None, environ_name="AI_API_KEY", environ_prefix=None)
     AI_BASE_URL = values.Value(None, environ_name="AI_BASE_URL", environ_prefix=None)
     AI_MODEL = values.Value(None, environ_name="AI_MODEL", environ_prefix=None)
-    AI_ALLOW_REACH_FROM = values.Value(
-        choices=("public", "authenticated", "restricted"),
-        default="authenticated",
-        environ_name="AI_ALLOW_REACH_FROM",
+
+    ACCESSIBILITY_API_BASE_URL = values.Value(
+        None,
+        environ_name="ACCESSIBILITY_API_BASE_URL",
         environ_prefix=None,
     )
+
     AI_DOCUMENT_RATE_THROTTLE_RATES = {
         "minute": 5,
         "hour": 100,

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "impress"
-version = "2.2.0"
+version = "2.1.0"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",

src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts

@@ -1,5 +1,3 @@
-/* eslint-disable playwright/no-conditional-expect */
-/* eslint-disable playwright/no-conditional-in-test */
 import path from 'path';
 
 import { expect, test } from '@playwright/test';
@@ -370,77 +368,4 @@ test.describe('Doc Editor', () => {
 
     await expect(editor.getByText('Bonjour le monde')).toBeVisible();
   });
-
-  [
-    { ai_transform: false, ai_translate: false },
-    { ai_transform: true, ai_translate: false },
-    { ai_transform: false, ai_translate: true },
-  ].forEach(({ ai_transform, ai_translate }) => {
-    test(`it checks AI buttons when can transform is at "${ai_transform}" and can translate is at "${ai_translate}"`, async ({
-      page,
-    }) => {
-      await mockedDocument(page, {
-        accesses: [
-          {
-            id: 'b0df4343-c8bd-4c20-9ff6-fbf94fc94egg',
-            role: 'owner',
-            user: {
-              email: 'super@owner.com',
-              full_name: 'Super Owner',
-            },
-          },
-        ],
-        abilities: {
-          destroy: true, // Means owner
-          link_configuration: true,
-          ai_transform,
-          ai_translate,
-          accesses_manage: true,
-          accesses_view: true,
-          update: true,
-          partial_update: true,
-          retrieve: true,
-        },
-        link_reach: 'public',
-        link_role: 'editor',
-        created_at: '2021-09-01T09:00:00Z',
-      });
-
-      await goToGridDoc(page);
-
-      await verifyDocName(page, 'Mocked document');
-
-      await page.locator('.bn-block-outer').last().fill('Hello World');
-
-      const editor = page.locator('.ProseMirror');
-      await editor.getByText('Hello').dblclick();
-
-      if (!ai_transform && !ai_translate) {
-        await expect(page.getByRole('button', { name: 'AI' })).toBeHidden();
-        return;
-      }
-
-      await page.getByRole('button', { name: 'AI' }).click();
-
-      if (ai_transform) {
-        await expect(
-          page.getByRole('menuitem', { name: 'Use as prompt' }),
-        ).toBeVisible();
-      } else {
-        await expect(
-          page.getByRole('menuitem', { name: 'Use as prompt' }),
-        ).toBeHidden();
-      }
-
-      if (ai_translate) {
-        await expect(
-          page.getByRole('menuitem', { name: 'Language' }),
-        ).toBeVisible();
-      } else {
-        await expect(
-          page.getByRole('menuitem', { name: 'Language' }),
-        ).toBeHidden();
-      }
-    });
-  });
 });

src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts

@@ -10,7 +10,7 @@ test.describe('Header', () => {
   test('checks all the elements are visible', async ({ page }) => {
     const header = page.locator('header').first();
 
-    await expect(header.getByLabel('Docs Logo')).toBeVisible();
+    await expect(header.getByAltText('Docs Logo')).toBeVisible();
     await expect(header.locator('h2').getByText('Docs')).toHaveCSS(
       'color',
       'rgb(0, 0, 145)',

src/frontend/apps/e2e/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-e2e",
-  "version": "2.2.0",
+  "version": "2.1.0",
   "private": true,
   "scripts": {
     "lint": "eslint . --ext .ts",

src/frontend/apps/impress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-impress",
-  "version": "2.2.0",
+  "version": "2.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -34,6 +34,7 @@
     "idb": "8.0.2",
     "lodash": "4.17.21",
     "luxon": "3.5.0",
+    "marked": "^15.0.7",
     "next": "15.1.6",
     "posthog-js": "1.215.6",
     "react": "*",

src/frontend/apps/impress/src/components/DropButton.tsx

@@ -1,4 +1,3 @@
-import { FocusScope } from '@react-aria/focus';
 import {
   PropsWithChildren,
   ReactNode,
@@ -7,16 +6,16 @@ import {
   useState,
 } from 'react';
 import { Button, Popover } from 'react-aria-components';
-import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 const StyledPopover = styled(Popover)`
   background-color: white;
   border-radius: 4px;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
+
   border: 1px solid #dddddd;
+
   transition: opacity 0.2s ease-in-out;
-  padding: 1rem;
 `;
 
 const StyledButton = styled(Button)`
@@ -30,10 +29,6 @@ const StyledButton = styled(Button)`
   font-size: 0.938rem;
   padding: 0;
   text-wrap: nowrap;
-
-  &:focus-within {
-    outline: 2px solid #007bff;
-  }
 `;
 
 export interface DropButtonProps {
@@ -48,17 +43,15 @@ export const DropButton = ({
   isOpen = false,
   onOpenChange,
   children,
+  label,
 }: PropsWithChildren<DropButtonProps>) => {
-  const { t } = useTranslation();
   const [isLocalOpen, setIsLocalOpen] = useState(isOpen);
-  const triggerRef = useRef<HTMLButtonElement>(null);
-  const firstFocusableRef = useRef<HTMLButtonElement>(null);
+
+  const triggerRef = useRef(null);
 
   useEffect(() => {
-    if (isLocalOpen && firstFocusableRef.current) {
-      firstFocusableRef.current.focus();
-    }
-  }, [isLocalOpen]);
+    setIsLocalOpen(isOpen);
+  }, [isOpen]);
 
   const onOpenChangeHandler = (isOpen: boolean) => {
     setIsLocalOpen(isOpen);
@@ -70,30 +63,18 @@ export const DropButton = ({
       <StyledButton
         ref={triggerRef}
         onPress={() => onOpenChangeHandler(true)}
-        aria-haspopup="true"
-        aria-expanded={isLocalOpen}
-        aria-label={t('Open the document options')}
+        aria-label={label}
       >
-        <span aria-hidden="true">{button}</span>
+        {button}
       </StyledButton>
 
-      {isLocalOpen && (
-        <StyledPopover
-          triggerRef={triggerRef}
-          isOpen={isLocalOpen}
-          onOpenChange={onOpenChangeHandler}
-        >
-          <FocusScope contain restoreFocus>
-            {children}
-            <button
-              ref={firstFocusableRef}
-              onClick={() => setIsLocalOpen(false)}
-            >
-              {t('Close the modal')}
-            </button>
-          </FocusScope>
-        </StyledPopover>
-      )}
+      <StyledPopover
+        triggerRef={triggerRef}
+        isOpen={isLocalOpen}
+        onOpenChange={onOpenChangeHandler}
+      >
+        {children}
+      </StyledPopover>
     </>
   );
 };

src/frontend/apps/impress/src/components/DropdownMenu.tsx

@@ -1,4 +1,3 @@
-//import { t } from 'i18next';
 import { PropsWithChildren, useState } from 'react';
 import { css } from 'styled-components';
 

src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx

@@ -47,11 +47,7 @@ export const QuickSearchInput = ({
         $gap={spacing['2xs']}
         $padding={{ all: 'base' }}
       >
-        {!loading && (
-          <span aria-hidden="true">
-            <Icon iconName="search" $variation="600" />
-          </span>
-        )}
+        {!loading && <Icon iconName="search" $variation="600" />}
         {loading && (
           <div>
             <Loader size="small" />

src/frontend/apps/impress/src/cunningham/cunningham-style.css

@@ -203,7 +203,6 @@ input:-webkit-autofill:focus {
 
 .c__select__wrapper .c__select__inner__actions__open:focus {
   outline: none;
-  
 }
 
 .c__select__wrapper .labelled-box__label.c__offscreen {
@@ -606,31 +605,3 @@ input:-webkit-autofill:focus {
 .c__tooltip {
   padding: 4px 6px;
 }
-
-/**
- * lecture ou non des icons
- */
- .sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-[data-icon]:before {
-  font-family: 'Material Icons';
-  content: attr(data-icon);
-}
-
-button:focus {
-  background-color: var(
-    --c--components--button--primary-text--background--color-hover
-  );
-  border-radius: var(--c--components--button--border-radius--focus);
-  box-shadow: 0 0 0 2px var(--c--theme--colors--primary-400)
-}

src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx

@@ -1,10 +1,11 @@
 import { Button } from '@openfun/cunningham-react';
+import Image from 'next/image';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
 import { BoxButton } from '@/components';
 
-import ProConnectImg from '../assets/button-proconnect.svg';
+import ProConnectImg from '../assets/button-proconnect.svg?url';
 import { useAuth } from '../hooks';
 import { gotoLogin, gotoLogout } from '../utils';
 
@@ -40,9 +41,8 @@ export const ProConnectButton = () => {
           background-color: var(--c--theme--colors--primary-action);
         }
       `}
-      $radius="4px"
     >
-      <ProConnectImg />
+      <Image src={ProConnectImg} alt={t('ProConnect Image')} />
     </BoxButton>
   );
 };

src/frontend/apps/impress/src/features/docs/doc-editor/api/useDocAIPdfTranscribe.tsx

@@ -0,0 +1,39 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { APIError, errorCauses, fetchAPI } from '@/api';
+
+export type DocAIPdfTranscribe = {
+  docId: string;
+  pdfUrl: string;
+};
+
+export type DocAIPdfTranscribeResponse = {
+  document_id: string;
+};
+
+export const docAIPdfTranscribe = async ({
+  docId,
+  ...params
+}: DocAIPdfTranscribe): Promise<DocAIPdfTranscribeResponse> => {
+  const response = await fetchAPI(`documents/${docId}/ai-pdf-transcribe/`, {
+    method: 'POST',
+    body: JSON.stringify({
+      ...params,
+    }),
+  });
+
+  if (!response.ok) {
+    throw new APIError(
+      'Failed to request pdf transcription',
+      await errorCauses(response),
+    );
+  }
+
+  return response.json() as Promise<DocAIPdfTranscribeResponse>;
+};
+
+export function useDocAIPdfTranscribe() {
+  return useMutation<DocAIPdfTranscribeResponse, APIError, DocAIPdfTranscribe>({
+    mutationFn: docAIPdfTranscribe,
+  });
+}

src/frontend/apps/impress/src/features/docs/doc-editor/components/AIButton.tsx

@@ -92,13 +92,6 @@ export function AIGroupButton() {
     return null;
   }
 
-  const canAITransform = currentDoc.abilities.ai_transform;
-  const canAITranslate = currentDoc.abilities.ai_translate;
-
-  if (!canAITransform && !canAITranslate) {
-    return null;
-  }
-
   return (
     <Components.Generic.Menu.Root>
       <Components.Generic.Menu.Trigger>
@@ -118,85 +111,79 @@ export function AIGroupButton() {
         className="bn-menu-dropdown bn-drag-handle-menu"
         sub={true}
       >
-        {canAITransform && (
-          <>
-            <AIMenuItemTransform
-              action="prompt"
-              docId={currentDoc.id}
-              icon={
-                <Text $isMaterialIcon $size="s">
-                  text_fields
-                </Text>
-              }
+        <AIMenuItemTransform
+          action="prompt"
+          docId={currentDoc.id}
+          icon={
+            <Text $isMaterialIcon $size="s">
+              text_fields
+            </Text>
+          }
+        >
+          {t('Use as prompt')}
+        </AIMenuItemTransform>
+        <AIMenuItemTransform
+          action="rephrase"
+          docId={currentDoc.id}
+          icon={
+            <Text $isMaterialIcon $size="s">
+              refresh
+            </Text>
+          }
+        >
+          {t('Rephrase')}
+        </AIMenuItemTransform>
+        <AIMenuItemTransform
+          action="summarize"
+          docId={currentDoc.id}
+          icon={
+            <Text $isMaterialIcon $size="s">
+              summarize
+            </Text>
+          }
+        >
+          {t('Summarize')}
+        </AIMenuItemTransform>
+        <AIMenuItemTransform
+          action="correct"
+          docId={currentDoc.id}
+          icon={
+            <Text $isMaterialIcon $size="s">
+              check
+            </Text>
+          }
+        >
+          {t('Correct')}
+        </AIMenuItemTransform>
+        <Components.Generic.Menu.Root position="right" sub={true}>
+          <Components.Generic.Menu.Trigger sub={false}>
+            <Components.Generic.Menu.Item
+              className="bn-menu-item"
+              subTrigger={true}
             >
-              {t('Use as prompt')}
-            </AIMenuItemTransform>
-            <AIMenuItemTransform
-              action="rephrase"
-              docId={currentDoc.id}
-              icon={
+              <Box $direction="row" $gap="0.6rem">
                 <Text $isMaterialIcon $size="s">
-                  refresh
+                  translate
                 </Text>
-              }
-            >
-              {t('Rephrase')}
-            </AIMenuItemTransform>
-            <AIMenuItemTransform
-              action="summarize"
-              docId={currentDoc.id}
-              icon={
-                <Text $isMaterialIcon $size="s">
-                  summarize
-                </Text>
-              }
-            >
-              {t('Summarize')}
-            </AIMenuItemTransform>
-            <AIMenuItemTransform
-              action="correct"
-              docId={currentDoc.id}
-              icon={
-                <Text $isMaterialIcon $size="s">
-                  check
-                </Text>
-              }
-            >
-              {t('Correct')}
-            </AIMenuItemTransform>
-          </>
-        )}
-        {canAITranslate && (
-          <Components.Generic.Menu.Root position="right" sub={true}>
-            <Components.Generic.Menu.Trigger sub={false}>
-              <Components.Generic.Menu.Item
-                className="bn-menu-item"
-                subTrigger={true}
+                {t('Language')}
+              </Box>
+            </Components.Generic.Menu.Item>
+          </Components.Generic.Menu.Trigger>
+          <Components.Generic.Menu.Dropdown
+            sub={true}
+            className="bn-menu-dropdown"
+          >
+            {languages.map((language) => (
+              <AIMenuItemTranslate
+                key={language.value}
+                language={language.value}
+                docId={currentDoc.id}
               >
-                <Box $direction="row" $gap="0.6rem">
-                  <Text $isMaterialIcon $size="s">
-                    translate
-                  </Text>
-                  {t('Language')}
-                </Box>
-              </Components.Generic.Menu.Item>
-            </Components.Generic.Menu.Trigger>
-            <Components.Generic.Menu.Dropdown
-              sub={true}
-              className="bn-menu-dropdown"
-            >
-              {languages.map((language) => (
-                <AIMenuItemTranslate
-                  key={language.value}
-                  language={language.value}
-                  docId={currentDoc.id}
-                >
-                  {language.display_name}
-                </AIMenuItemTranslate>
-              ))}
-            </Components.Generic.Menu.Dropdown>
-          </Components.Generic.Menu.Root>
-        )}
+                {language.display_name}
+              </AIMenuItemTranslate>
+            ))}
+          </Components.Generic.Menu.Dropdown>
+        </Components.Generic.Menu.Root>
       </Components.Generic.Menu.Dropdown>
     </Components.Generic.Menu.Root>
   );

src/frontend/apps/impress/src/features/docs/doc-editor/components/AIPdfButton.tsx

@@ -0,0 +1,88 @@
+import {
+  useBlockNoteEditor,
+  useComponentsContext,
+  useSelectedBlocks,
+} from '@blocknote/react';
+import {
+  Loader,
+  VariantType,
+  useToastProvider,
+} from '@openfun/cunningham-react';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Text } from '@/components';
+import { useDocStore } from '@/features/docs/doc-management/';
+
+import { useDocAIPdfTranscribe } from '../api/useDocAIPdfTranscribe';
+
+export const AIPdfButton = () => {
+  const editor = useBlockNoteEditor();
+  const Components = useComponentsContext();
+  const selectedBlocks = useSelectedBlocks(editor);
+  const { t } = useTranslation();
+  const { currentDoc } = useDocStore();
+  const { toast } = useToastProvider();
+  const router = useRouter();
+  const { mutateAsync: requestAIPdf, isPending } = useDocAIPdfTranscribe();
+  const [isLoading, setIsLoading] = useState(false);
+
+  if (!Components || !currentDoc) {
+    return null;
+  }
+
+  const show = selectedBlocks.length === 1 && selectedBlocks[0].type === 'file';
+  if (!show) {
+    return null;
+  }
+
+  const handlePdfTranscription = async () => {
+    console.log('selectedBlocks', selectedBlocks);
+    const pdfBlock = selectedBlocks[0];
+    const props = pdfBlock.props as { url?: string };
+    const pdfUrl = props?.url;
+    console.log('pdfUrl', pdfUrl);
+    if (!props || !pdfUrl) {
+      toast(t('No PDF file found'), VariantType.ERROR);
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const response = await requestAIPdf({
+        docId: currentDoc.id,
+        pdfUrl,
+      });
+
+      setTimeout(() => {
+        // router.push causes the following error:
+        // TypeError: Cannot read properties of undefined (reading 'isDestroyed')
+        // void router.push(`/docs/${response.document_id}`);
+        window.location.href = `/docs/${response.document_id}?albert=true`;
+      }, 1000);
+    } catch (error) {
+      console.error('error', error);
+      toast(t('Failed to transcribe PDF'), VariantType.ERROR);
+    }
+  };
+
+  return (
+    <Components.FormattingToolbar.Button
+      className="bn-button bn-menu-item"
+      data-test="ai-pdf-transcribe"
+      label="AI"
+      mainTooltip={t('Transcribe PDF')}
+      icon={
+        isLoading ? (
+          <Loader size="small" />
+        ) : (
+          <Text $isMaterialIcon $size="l">
+            auto_awesome
+          </Text>
+        )
+      }
+      onClick={() => void handlePdfTranscription()}
+    />
+  );
+};

src/frontend/apps/impress/src/features/docs/doc-editor/components/Ai/AiButton.tsx

@@ -0,0 +1,303 @@
+import { Button, Input, Loader } from '@openfun/cunningham-react';
+import { marked } from 'marked';
+import { useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+import styled from 'styled-components';
+
+import { fetchAPI } from '@/api';
+import { Box, Text } from '@/components';
+import { Doc } from '@/features/docs';
+
+import { useEditorStore } from '../../stores/useEditorStore';
+
+export const AIButtonEl = styled.button`
+  background-image: url('/assets/ia_baguette.png');
+  background-size: cover;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  background-color: transparent;
+`;
+
+export const SuggestionButton = styled.button`
+  display: flex;
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  background-color: white;
+  color: var(--c--theme--colors--greyscale-900);
+  height: 32px;
+  padding: 0 0.5rem;
+  border-radius: 4px;
+  font-weight: 600;
+  &:hover,
+  &:focus {
+    background-color: var(--c--theme--colors--greyscale-100);
+  }
+
+  span.material-icons {
+    margin-right: 4px;
+  }
+
+  span.sub {
+    color: var(--c--theme--colors--greyscale-600);
+    margin-left: 4px;
+    font-weight: 500;
+  }
+`;
+
+export const AiButton = ({ doc }: { doc: Doc }) => {
+  const searchParams = useSearchParams();
+
+  const [isOpen, setIsOpen] = useState(searchParams.get('albert') === 'true');
+
+  return (
+    <>
+      <Box
+        $position="absolute"
+        $css={`
+        right: 0;
+        bottom: 0;
+        padding: 1rem;
+        margin: 1rem;
+        z-index: 1;
+        
+        `}
+      >
+        <AIButtonEl
+          aria-label="Posez une question à Albert à propos de ce document"
+          onClick={() => setIsOpen(true)}
+        />
+      </Box>
+
+      <AiChat doc={doc} isOpen={isOpen} onClose={() => setIsOpen(false)} />
+    </>
+  );
+};
+type Message = {
+  role: 'user' | 'assistant';
+  content: string;
+};
+
+const AiChat = (props: { isOpen: boolean; onClose: () => void; doc: Doc }) => {
+  const [prompt, setPrompt] = useState('');
+  const { editor } = useEditorStore();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  if (!props.isOpen) {
+    return null;
+  }
+
+  const newPrompt = async (prompt: string) => {
+    if (!editor) {
+      return;
+    }
+
+    setIsLoading(true);
+    setMessages([...messages, { role: 'user', content: prompt }]);
+
+    const editorContentFormatted = await editor.blocksToMarkdownLossy();
+
+    const response = await fetchAPI(`documents/${props.doc.id}/ai-proxy/`, {
+      method: 'POST',
+      body: JSON.stringify({
+        system:
+          'You are a helpful assistant. You are given a text in markdown format and you need to answer the question. Here is the text: ' +
+          editorContentFormatted,
+        text: prompt,
+      }),
+    });
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const data = (await response.json()) as string;
+
+    console.log('response', data);
+    setMessages((messages) => [
+      ...messages,
+      { role: 'assistant', content: data },
+    ]);
+    setIsLoading(false);
+  };
+
+  const submit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setPrompt(''); // Clear the prompt after submitting the form
+    await newPrompt(prompt);
+  };
+
+  return (
+    <Box
+      $position="absolute"
+      $css={`
+        right: 0;
+        bottom: 0;
+        padding: 1rem;
+        width: 450px;
+        min-height: min(61vh, 365px);
+            box-shadow: rgba(15, 15, 15, 0.04) 0px 0px 0px 1px, rgba(15, 15, 15, 0.03) 0px 3px 6px, rgba(15, 15, 15, 0.06) 0px 9px 24px;
+        max-height: max(-180px + 100vh, 365px);
+        overflow-y: auto;
+        border-radius: 16px;
+        background-color: white;
+        margin: 1rem;
+        z-index: 2;
+      `}
+      $direction="column"
+    >
+      <Box $direction="row" $align="center" $justify="space-between">
+        <Text $theme="greyscale" $variation="1000" $weight="bold" $size="s">
+          {messages.length == 0 ? '' : 'Demander à Albert'}
+        </Text>
+        <Button
+          size="small"
+          onClick={props.onClose}
+          color="tertiary-text"
+          icon={<span className="material-icons">close</span>}
+        />
+      </Box>
+      {messages.length == 0 && (
+        <Box $gap="1rem" $position="relative" $css="top: -24px;">
+          <Box $gap="0.5rem">
+            <Box
+              $css={`
+            background-image: url('/assets/ia_baguette_question_mark.png');
+            background-size: cover;
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            border: none;
+            cursor: pointer;
+            `}
+            ></Box>
+            <Text $theme="primary" $variation="800">
+              Bonjour, comment puis-je vous aider ?
+            </Text>
+          </Box>
+          <Box $gap="0.5rem">
+            <Text $theme="greyscale" $variation="1000" $weight="bold" $size="s">
+              Suggestions
+            </Text>
+            <Box>
+              <SuggestionButton
+                onClick={() =>
+                  void newPrompt(
+                    'Resume ce document sous forme textuelle uniquement',
+                  )
+                }
+              >
+                <span className="material-icons">description</span>
+                Résumer <span className="sub">cette page</span>
+              </SuggestionButton>
+              <SuggestionButton
+                onClick={() =>
+                  void newPrompt('Quel est le sujet principal de ce document ?')
+                }
+              >
+                <span className="material-icons">help_center</span>
+                Poser des questions <span className="sub">sur cette page</span>
+              </SuggestionButton>
+            </Box>
+          </Box>
+        </Box>
+      )}
+      <Box
+        $flex={1}
+        $direction="column"
+        $gap="1rem"
+        $css={`
+      overflow-y: auto;
+      font-size: 14px;
+          mask-image: linear-gradient(black calc(100% - 32px), transparent calc(100% - 4px));
+          padding-bottom: 32px;
+`}
+        aria-live="polite"
+      >
+        {messages.map((message, index) => (
+          <Message key={index} message={message} />
+        ))}
+
+        {(isLoading || false) && (
+          <Box $display="flex" $direction="row" $align="center" $gap="0.5rem">
+            <Loader size="small" />
+            Albert réfléchit ...
+          </Box>
+        )}
+      </Box>
+      <Box>
+        <form onSubmit={(e) => void submit(e)} style={{ width: '100%' }}>
+          <Input
+            type="text"
+            label="Posez votre question"
+            name="prompt"
+            fullWidth={true}
+            onChange={(e) => setPrompt(e.target.value)}
+            value={prompt} // Ensure the input value is updated with the state
+            rightIcon={<span className="material-icons">send</span>}
+          />
+        </form>
+      </Box>
+    </Box>
+  );
+};
+
+const Message = ({ message }: { message: Message }) => {
+  return (
+    <Box>
+      <Box $direction="row" $align="center" $gap="0.5rem">
+        {message.role === 'user' ? (
+          <Box
+            aria-hidden={true}
+            $css={`
+            background-color:#417DC4;
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            border: none;
+            cursor: pointer;
+            color: white;
+            font-size: 10px;
+            align-items: center;
+            justify-content: center;
+            display: flex;
+            `}
+          >
+            VD
+          </Box>
+        ) : (
+          <Box
+            aria-hidden={true}
+            $css={`
+                background-image: url('/assets/ia_baguette.png');
+                background-size: cover;
+                width: 24px;
+                height: 24px;
+                border-radius: 50%;
+                border: none;
+                cursor: pointer;
+                `}
+          ></Box>
+        )}
+        <Text $weight="bold">
+          {message.role === 'user' ? 'Vous' : 'Albert'}
+        </Text>
+      </Box>
+      <Box
+        $css={`
+            font-size: 12px;
+            padding-left: 34px;
+            color: var(--c--theme--colors--greyscale-700);
+
+            p {
+                margin: 0;
+            }
+            `}
+        dangerouslySetInnerHTML={{
+          __html: marked.parse(message.content) as string,
+        }}
+      ></Box>
+    </Box>
+  );
+};

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolbar.tsx

@@ -8,21 +8,27 @@ import {
 import React, { useCallback } from 'react';
 
 import { AIGroupButton } from './AIButton';
+import { AIPdfButton } from './AIPdfButton';
 import { MarkdownButton } from './MarkdownButton';
 
 export const BlockNoteToolbar = () => {
   const formattingToolbar = useCallback(
-    ({ blockTypeSelectItems }: FormattingToolbarProps) => (
-      <FormattingToolbar>
-        {getFormattingToolbarItems(blockTypeSelectItems)}
+    ({ blockTypeSelectItems }: FormattingToolbarProps) => {
+      console.log('formattingToolbar', blockTypeSelectItems);
+      return (
+        <FormattingToolbar>
+          {getFormattingToolbarItems(blockTypeSelectItems)}
 
-        {/* Extra button to do some AI powered actions */}
-        <AIGroupButton key="AIButton" />
+          {/* Extra button to do some AI powered actions */}
+          <AIGroupButton key="AIButton" />
 
-        {/* Extra button to convert from markdown to json */}
-        <MarkdownButton key="customButton" />
-      </FormattingToolbar>
-    ),
+          {/* Extra button to convert from markdown to json */}
+          <MarkdownButton key="customButton" />
+
+          <AIPdfButton />
+        </FormattingToolbar>
+      );
+    },
     [],
   );
 

src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx

@@ -16,6 +16,7 @@ import { TableContent } from '@/features/docs/doc-table-content/';
 import { Versions, useDocVersion } from '@/features/docs/doc-versioning/';
 import { useResponsiveStore } from '@/stores';
 
+import { AiButton } from './Ai/AiButton';
 import { BlockNoteEditor, BlockNoteEditorVersion } from './BlockNoteEditor';
 
 interface DocEditorProps {
@@ -38,6 +39,7 @@ export const DocEditor = ({ doc, versionId }: DocEditorProps) => {
 
   return (
     <>
+      <AiButton doc={doc} />
       {isDesktop && !isVersion && (
         <Box
           $position="absolute"
@@ -65,7 +67,7 @@ export const DocEditor = ({ doc, versionId }: DocEditorProps) => {
           $css="overflow-x: clip; flex: 1;"
           $position="relative"
         >
-          <Box $css="flex:1;" $position="relative" $width="100%">
+          <Box $css="flex:1;" $overflow="auto" $position="relative">
             {isVersion ? (
               <DocVersionEditor docId={doc.id} versionId={versionId} />
             ) : (

src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx

@@ -11,7 +11,7 @@ export const cssEditor = (readonly: boolean) => css`
     }
     .collaboration-cursor-custom__caret {
       position: absolute;
-      height: 100%;
+      height: 85%;
       width: 2px;
       bottom: 4%;
       left: -1px;

src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import {
   Tooltip,
   VariantType,
@@ -112,6 +114,7 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
           defaultValue={isUntitled ? undefined : titleDisplay}
           onKeyDownCapture={handleKeyDown}
           suppressContentEditableWarning={true}
+          aria-label="doc title input"
           onBlurCapture={(event) =>
             handleTitleSubmit(event.target.textContent || '')
           }

src/frontend/apps/impress/src/features/docs/doc-management/types.tsx

@@ -48,20 +48,10 @@ export interface Doc {
   abilities: {
     accesses_manage: boolean;
     accesses_view: boolean;
-    ai_transform: boolean;
-    ai_translate: boolean;
-    attachment_upload: boolean;
-    children_create: boolean;
-    children_list: boolean;
-    collaboration_auth: boolean;
+    attachment_upload: true;
     destroy: boolean;
-    favorite: boolean;
-    invite_owner: boolean;
     link_configuration: boolean;
-    media_auth: boolean;
-    move: boolean;
     partial_update: boolean;
-    restore: boolean;
     retrieve: boolean;
     update: boolean;
     versions_destroy: boolean;

src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx

@@ -51,7 +51,7 @@ export const DocSearchModal = ({ ...modalProps }: DocSearchModalProps) => {
     return {
       groupName: docs.length > 0 ? t('Select a document') : '',
       elements: search ? docs : [],
-      //emptyString: t('No document found'),
+      emptyString: t('No document found'),
       endActions: hasNextPage
         ? [{ content: <InView onChange={() => void fetchNextPage()} /> }]
         : [],
@@ -96,20 +96,6 @@ export const DocSearchModal = ({ ...modalProps }: DocSearchModalProps) => {
                 renderElement={(doc) => <DocSearchItem doc={doc} />}
               />
             )}
-            {/* Message accessible pour les résultats vides */}
-            {search && docsData.elements.length === 0 && (
-              <p
-                role="alert"
-                aria-live="polite"
-                style={{
-                  textAlign: 'center',
-                  marginTop: '1rem',
-                  color: '#666',
-                }}
-              >
-                {t('No document found')}
-              </p>
-            )}
           </Box>
         </QuickSearch>
       </Box>

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx

@@ -49,6 +49,7 @@ export const DocsGridActions = ({
       callback: () => {
         openShareModal?.();
       },
+
       testId: `docs-grid-actions-share-${doc.id}`,
     },
 
@@ -69,7 +70,6 @@ export const DocsGridActions = ({
           iconName="more_horiz"
           $theme="primary"
           $variation="600"
-          aria-hidden="true"
         />
       </DropdownMenu>
 

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx

@@ -54,9 +54,6 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
           $css={css`
             flex: ${flexLeft};
             align-items: center;
-            &:focus {
-              outline: 2px solidrgb(33, 34, 82);
-            }
           `}
           href={`/docs/${doc.id}`}
         >
@@ -82,11 +79,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
               >
                 <Tooltip
                   content={
-                    <Text
-                      id={`tooltip-access-${doc.id}`}
-                      $textAlign="center"
-                      $variation="000"
-                    >
+                    <Text $textAlign="center" $variation="000">
                       {isPublic
                         ? t('Accessible to anyone')
                         : t('Accessible to authenticated users')}
@@ -94,17 +87,12 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
                   }
                   placement="top"
                 >
-                  <div
-                    role="button"
-                    tabIndex={0}
-                    aria-labelledby={`tooltip-access-${doc.id}`}
-                  >
+                  <div>
                     <Icon
                       $theme="greyscale"
                       $variation="600"
                       $size="14px"
                       iconName={isPublic ? 'public' : 'vpn_lock'}
-                      aria-hidden="true"
                     />
                   </div>
                 </Tooltip>

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx

@@ -9,7 +9,6 @@ type Props = {
   doc: Doc;
   handleClick: () => void;
 };
-
 export const DocsGridItemSharedButton = ({ doc, handleClick }: Props) => {
   const { t } = useTranslation();
   const sharedCount = doc.nb_accesses;
@@ -19,15 +18,11 @@ export const DocsGridItemSharedButton = ({ doc, handleClick }: Props) => {
     return <Box $minWidth="50px">&nbsp;</Box>;
   }
 
-  const tooltipContent = t('Shared with {{count}} users', {
-    count: sharedCount,
-  });
-
   return (
     <Tooltip
       content={
-        <Text $variation="000" $textAlign="center">
-          {tooltipContent}
+        <Text $textAlign="center" $variation="000">
+          {t('Shared with {{count}} users', { count: sharedCount })}
         </Text>
       }
       placement="top"
@@ -41,14 +36,8 @@ export const DocsGridItemSharedButton = ({ doc, handleClick }: Props) => {
         }}
         color="tertiary"
         size="nano"
-        aria-label={tooltipContent} // Lecture directe pour les lecteurs d'écran
+        icon={<Icon $variation="800" $theme="primary" iconName="group" />}
       >
-        <Icon
-          $variation="800"
-          $theme="primary"
-          iconName="group"
-          aria-hidden="true" // Empêche la lecture de l'icône
-        />
         {sharedCount}
       </Button>
     </Tooltip>

src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx

@@ -47,9 +47,9 @@ export const SimpleDocItem = ({
         `}
       >
         {isPinned ? (
-          <PinnedDocumentIcon aria-label={t('Pinned document.')} />
+          <PinnedDocumentIcon aria-label={t('Pin document icon')} />
         ) : (
-          <SimpleFileIcon aria-label="" />
+          <SimpleFileIcon aria-label={t('Simple document icon')} />
         )}
       </Box>
       <Box $justify="center">

src/frontend/apps/impress/src/features/header/components/Header.tsx

@@ -1,7 +1,8 @@
+import Image from 'next/image';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
-import IconDocs from '@/assets/icons/icon-docs.svg';
+import { default as IconDocs } from '@/assets/icons/icon-docs.svg?url';
 import { Box, StyledLink } from '@/components/';
 import { useCunninghamTheme } from '@/cunningham';
 import { ButtonLogin } from '@/features/auth';
@@ -50,7 +51,7 @@ export const Header = () => {
           $height="fit-content"
           $margin={{ top: 'auto' }}
         >
-          <IconDocs aria-label={t('Docs Logo')} width={25} />
+          <Image priority src={IconDocs} alt={t('Docs Logo')} width={25} />
           <Title />
         </Box>
       </StyledLink>

src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import { useTranslation } from 'react-i18next';
 
-import IconDocs from '@/assets/icons/icon-docs.svg';
+import { default as IconDocs } from '@/assets/icons/icon-docs.svg?url';
 import { Box } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { ButtonTogglePanel, Title } from '@/features/header/';
@@ -61,7 +61,7 @@ export const HomeHeader = () => {
           $position="relative"
           $height="fit-content"
         >
-          <IconDocs aria-label={t('Docs Logo')} width={32} />
+          <Image priority src={IconDocs} alt={t('Docs Logo')} width={32} />
           <Title />
         </Box>
       </Box>

src/frontend/apps/impress/src/features/home/components/HomeSection.tsx

@@ -175,7 +175,7 @@ export const HomeSection = ({
               height: 'fit-content',
               margin: 'auto',
               overflow: 'auto',
-              flexBasis: direction === 'column' ? 'fit-content' : '50%',
+              flexBasis: direction === 'column' ? '100%' : '50%',
             }}
           />
         )}

src/frontend/apps/impress/src/features/language/LanguagePicker.tsx

@@ -54,7 +54,6 @@ export const LanguagePicker = () => {
             $theme="primary"
             $weight="bold"
             $variation="800"
-            aria-hidden="true"
           >
             translate
           </Text>

src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx

@@ -52,7 +52,6 @@ export const LeftPanelTargetFilters = () => {
 
   return (
     <Box
-      role="tablist"
       $justify="center"
       $padding={{ horizontal: 'sm' }}
       $gap={spacing['2xs']}
@@ -62,7 +61,7 @@ export const LeftPanelTargetFilters = () => {
 
         return (
           <BoxButton
-            role="tab"
+            aria-label={query.label}
             key={query.label}
             onClick={() => onSelectQuery(query.targetQuery)}
             $direction="row"
@@ -86,7 +85,6 @@ export const LeftPanelTargetFilters = () => {
             <Icon
               $variation={isActive ? '1000' : '700'}
               iconName={query.icon}
-              aria-hidden="true"
             />
             <Text $variation={isActive ? '1000' : '700'} $size="sm">
               {query.label}

src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx

@@ -50,11 +50,8 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
                 onClick={goToHome}
                 size="medium"
                 color="tertiary-text"
-                aria-label={t('Back to home page')}
                 icon={
-                  <span aria-hidden="true">
-                    <Icon $variation="800" $theme="primary" iconName="house" />
-                  </span>
+                  <Icon $variation="800" $theme="primary" iconName="house" />
                 }
               />
               {authenticated && (
@@ -62,15 +59,8 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
                   onClick={searchModal.open}
                   size="medium"
                   color="tertiary-text"
-                  aria-label={t('Search')}
                   icon={
-                    <span aria-hidden="true">
-                      <Icon
-                        $variation="800"
-                        $theme="primary"
-                        iconName="search"
-                      />
-                    </span>
+                    <Icon $variation="800" $theme="primary" iconName="search" />
                   }
                 />
               )}

src/frontend/apps/impress/src/features/service-worker/ApiPlugin.ts

@@ -195,20 +195,10 @@ export class ApiPlugin implements WorkboxPlugin {
       abilities: {
         accesses_manage: true,
         accesses_view: true,
-        ai_transform: true,
-        ai_translate: true,
         attachment_upload: true,
-        children_create: true,
-        children_list: true,
-        collaboration_auth: true,
         destroy: true,
-        favorite: true,
-        invite_owner: true,
         link_configuration: true,
-        media_auth: true,
-        move: true,
         partial_update: true,
-        restore: true,
         retrieve: true,
         update: true,
         versions_destroy: true,

src/frontend/apps/impress/src/i18n/translations.json

@@ -7,8 +7,6 @@
       "AI seems busy! Please try again.": "KI scheint beschäftigt! Bitte versuchen Sie es erneut.",
       "Accessibility": "Barrierefreiheit",
       "Accessibility statement": "Erklärung zur Barrierefreiheit",
-      "Accessible to anyone": "Für jeden zugänglich",
-      "Accessible to authenticated users": "Für authentifizierte Benutzer zugänglich",
       "Add": "Hinzufügen",
       "Address:": "Anschrift:",
       "All docs": "Alle Dokumente",
@@ -94,7 +92,6 @@
       "Pending invitations": "Ausstehende Einladungen",
       "Personal data and cookies": "Personenbezogene Daten und Cookies",
       "Pin": "Anheften",
-      "Pinned document.": "Angeheftetes Dokument",
       "Pinned documents": "Angepinnte Dokumente",
       "Private": "Privat",
       "Public": "Öffentlich",
@@ -121,7 +118,6 @@
       "Share with {{count}} users_many": "Teilen mit {{count}} Benutzern",
       "Share with {{count}} users_one": "Teilen mit {{count}} Benutzern",
       "Share with {{count}} users_other": "Teilen mit {{count}} Benutzern",
-      "Shared with {{count}} users": "Mit {{count}} Benutzern geteilt",
       "Shared with me": "Mit mir geteilt",
       "Something bad happens, please retry.": "Etwas ist schiefgelaufen, bitte versuchen Sie es erneut.",
       "Stéphanie Schaer: Interministerial Digital Director (DINUM).": "Stéphanie Schaer: Interministerielle Digitaldirektorin (DINUM).",
@@ -137,7 +133,6 @@
       "This site places a small text file (a \"cookie\") on your computer when you visit it.": "Diese Website platziert beim Besuch auf Ihrem Computer eine kleine Textdatei (ein \"Cookie\").",
       "This will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.": "Dies schützt Ihre Privatsphäre, verhindert jedoch auch, dass der Eigentümer aus Ihren Aktionen lernt und eine bessere Erfahrung für Sie und andere Benutzer schafft.",
       "Too many requests. Please wait 60 seconds.": "Zu viele Anfragen. Bitte warten Sie 60 Sekunden.",
-      "Translate": "Übersetzen",
       "Type a name or email": "Geben Sie einen Namen oder eine E-Mail-Adresse ein",
       "Type the name of a document": "Geben Sie den Namen eines Dokuments ein",
       "Unless otherwise stated, all content on this site is under": "Sofern nicht anders angegeben, steht der gesamte Inhalt dieser Website unter",
@@ -260,7 +255,7 @@
       "It's true, you didn't have to click on a block that covers half the page to say you agree to the placement of cookies — even if you don't know what it means!": "C'est vrai, vous n'avez pas à cliquer sur un bloc qui couvre la moitié de la page pour dire que vous acceptez le placement de cookies — même si vous ne savez pas ce que cela signifie !",
       "Language": "Langue",
       "Last update: {{update}}": "Dernière mise à jour : {{update}}",
-      "Legal Notice": "Mentions Légales",
+      "Legal Notice": "Mentions Legales",
       "Legal notice": "Mention légale",
       "Link Copied !": "Lien copié !",
       "Link parameters": "Paramètres du lien",
@@ -294,7 +289,6 @@
       "Personal data and cookies": "Données personnelles et cookies",
       "Pin": "Épingler",
       "Pin document icon": "Icône épingler un document",
-      "Pinned document.": "Document épinglé",
       "Pinned documents": "Documents épinglés",
       "Private": "Privé",
       "ProConnect Image": "Image ProConnect",
@@ -323,7 +317,6 @@
       "Share with {{count}} users_many": "Partager avec {{count}} utilisateurs",
       "Share with {{count}} users_one": "Partager avec {{count}} utilisateur",
       "Share with {{count}} users_other": "Partager avec {{count}} utilisateurs",
-      "Shared with {{count}} users": "Partagé avec {{count}} utilisateurs",
       "Shared with me": "Partagés avec moi",
       "Shared with {{count}} users_many": "Partager avec {{count}} utilisateurs",
       "Shared with {{count}} users_one": "Partager avec {{count}} utilisateur",
@@ -349,7 +342,6 @@
       "This will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.": "Cela protégera votre vie privée, mais empêchera également le propriétaire d'apprendre de vos actions et de créer une meilleure expérience pour vous et les autres utilisateurs.",
       "To facilitate the circulation of documents, Docs allows you to export your content to the most common formats: PDF, Word or OpenDocument.": "Pour faciliter la circulation des documents, Docs permet d'exporter vos contenus vers les formats les plus courants : PDF, Word ou OpenDocument.",
       "Too many requests. Please wait 60 seconds.": "Trop de demandes. Veuillez patienter 60 secondes.",
-      "Translate": "Traduire",
       "Type a name or email": "Tapez un nom ou un email",
       "Type the name of a document": "Tapez le nom d'un document",
       "Unless otherwise stated, all content on this site is under": "Sauf mention contraire, tout le contenu de ce site est sous",

src/frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "impress",
-  "version": "2.2.0",
+  "version": "2.1.0",
   "private": true,
   "workspaces": {
     "packages": [

src/frontend/packages/eslint-config-impress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-impress",
-  "version": "2.2.0",
+  "version": "2.1.0",
   "license": "MIT",
   "scripts": {
     "lint": "eslint --ext .js ."

src/frontend/packages/i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "packages-i18n",
-  "version": "2.2.0",
+  "version": "2.1.0",
   "private": true,
   "scripts": {
     "extract-translation": "yarn extract-translation:impress",

src/frontend/servers/y-provider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "server-y-provider",
-  "version": "2.2.0",
+  "version": "2.1.0",
   "description": "Y.js provider for docs",
   "repository": "https://github.com/numerique-gouv/impress",
   "license": "MIT",

src/helm/helmfile.yaml

@@ -93,4 +93,4 @@ releases:
 environments:
   dev:
     values:
-      - version: 2.2.0
+      - version: 2.1.0

src/helm/impress/Chart.yaml

@@ -1,5 +1,5 @@
 apiVersion: v2
 type: application
 name: docs
-version: 2.2.0-beta.1
+version: 2.1.0-beta-1
 appVersion: latest

src/mail/mjml/invitation.mjml

@@ -2,7 +2,7 @@
   <mj-include path="./partial/header.mjml" />
 
   <mj-body mj-class="bg--blue-100">
-    <mj-wrapper css-class="wrapper" padding="5px 25px 0px 25px">
+    <mj-wrapper css-class="wrapper" padding="0 25px 0px 25px">
       <mj-section css-class="wrapper-logo">
         <mj-column>
           <mj-image
@@ -14,7 +14,7 @@
           />
         </mj-column>
       </mj-section>
-      <mj-section mj-class="bg--white-100" padding="0px 20px 60px 20px">
+      <mj-section mj-class="bg--white-100" padding="30px 20px 60px 20px">
         <mj-column>
           <mj-text align="center">
             <h1>{{title|capfirst}}</h1>

src/mail/mjml/partial/header.mjml

@@ -13,7 +13,7 @@
         <mj-all
             font-family="Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif"
             font-size="16px"
-            line-height="normal"
+            line-height="1.3em"
             color="#3A3A3A"
         />
     </mj-attributes>

src/mail/package.json

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