fix: default v2 embed allow document rejection to false

Standardizes navigation link colors by replacing hardcoded `#7AC455` hex
values with the existing `text-documenso-700` design token.

.env.example

@@ -147,6 +147,15 @@ NEXT_PUBLIC_USE_INTERNAL_URL_BROWSERLESS=false
 # We only collect: app version, installation ID, and node ID. No personal data is collected.
 DOCUMENSO_DISABLE_TELEMETRY=
 
+# [[AI]]
+# OPTIONAL: Google Cloud Project ID for Vertex AI.
+GOOGLE_VERTEX_PROJECT_ID=""
+# OPTIONAL: Google Cloud region for Vertex AI. Defaults to "global".
+GOOGLE_VERTEX_LOCATION="global"
+# OPTIONAL: API key for Google Vertex AI (Gemini). Get your key from:
+# https://console.cloud.google.com/vertex-ai/studio/settings/api-keys
+GOOGLE_VERTEX_API_KEY=""
+
 # [[E2E Tests]]
 E2E_TEST_AUTHENTICATE_USERNAME="Test User"
 E2E_TEST_AUTHENTICATE_USER_EMAIL="testuser@mail.com"
@@ -157,4 +166,4 @@ E2E_TEST_AUTHENTICATE_USER_PASSWORD="test_Password123"
 NEXT_PRIVATE_LOGGER_FILE_PATH=
 
 # [[PLAIN SUPPORT]]
-NEXT_PRIVATE_PLAIN_API_KEY=
+NEXT_PRIVATE_PLAIN_API_KEY=

.github/workflows/e2e-tests.yml

@@ -1,14 +1,19 @@
 name: Playwright Tests
 on:
   push:
-    branches: ['main', 'feat/rr7']
+    branches: ['main']
   pull_request:
     branches: ['main']
+
+concurrency:
+  group: ci-${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   e2e_tests:
     name: 'E2E Tests'
     timeout-minutes: 60
-    runs-on: warp-ubuntu-2204-x64-16x
+    runs-on: warp-ubuntu-2204-x64-8x
     steps:
       - uses: actions/checkout@v4
 
@@ -28,9 +33,6 @@ jobs:
       - name: Seed the database
         run: npm run prisma:seed
 
-      - name: Build app
-        run: npm run build
-
       - name: Install playwright browsers
         run: npx playwright install --with-deps
 
@@ -45,7 +47,7 @@ jobs:
         with:
           name: test-results
           path: 'packages/app-tests/**/test-results/*'
-          retention-days: 30
+          retention-days: 7
     env:
       TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
       TURBO_TEAM: ${{ vars.TURBO_TEAM }}

.github/workflows/publish.yml

@@ -65,6 +65,47 @@ jobs:
         env:
           BUILD_PLATFORM: ${{ matrix.os == 'warp-ubuntu-latest-arm64-4x' && 'arm64' || 'amd64' }}
 
+      - name: Build the chromium docker image
+        env:
+          BUILD_PLATFORM: ${{ matrix.os == 'warp-ubuntu-latest-arm64-4x' && 'arm64' || 'amd64' }}
+        run: |
+          APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
+          GIT_SHA="$(git rev-parse HEAD)"
+
+          docker build \
+            -f ./docker/Dockerfile.chromium \
+            --progress=plain \
+            --build-arg TAG="$GIT_SHA" \
+            -t "documenso/documenso-$BUILD_PLATFORM:latest-chromium" \
+            -t "documenso/documenso-$BUILD_PLATFORM:$GIT_SHA-chromium" \
+            -t "documenso/documenso-$BUILD_PLATFORM:$APP_VERSION-chromium" \
+            -t "ghcr.io/documenso/documenso-$BUILD_PLATFORM:latest-chromium" \
+            -t "ghcr.io/documenso/documenso-$BUILD_PLATFORM:$GIT_SHA-chromium" \
+            -t "ghcr.io/documenso/documenso-$BUILD_PLATFORM:$APP_VERSION-chromium" \
+            .
+
+      - name: Push the chromium docker image to DockerHub
+        env:
+          BUILD_PLATFORM: ${{ matrix.os == 'warp-ubuntu-latest-arm64-4x' && 'arm64' || 'amd64' }}
+        run: |
+          APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
+          GIT_SHA="$(git rev-parse HEAD)"
+
+          docker push "documenso/documenso-$BUILD_PLATFORM:latest-chromium"
+          docker push "documenso/documenso-$BUILD_PLATFORM:$GIT_SHA-chromium"
+          docker push "documenso/documenso-$BUILD_PLATFORM:$APP_VERSION-chromium" \
+
+      - name: Push the chromium docker image to GitHub Container Registry
+        env:
+          BUILD_PLATFORM: ${{ matrix.os == 'warp-ubuntu-latest-arm64-4x' && 'arm64' || 'amd64' }}
+        run: |
+          APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
+          GIT_SHA="$(git rev-parse HEAD)"
+
+          docker push "ghcr.io/documenso/documenso-$BUILD_PLATFORM:latest-chromium"
+          docker push "ghcr.io/documenso/documenso-$BUILD_PLATFORM:$GIT_SHA-chromium"
+          docker push "ghcr.io/documenso/documenso-$BUILD_PLATFORM:$APP_VERSION-chromium"
+
   create_and_publish_manifest:
     name: Create and publish manifest
     runs-on: ubuntu-latest
@@ -125,6 +166,43 @@ jobs:
           docker manifest push documenso/documenso:$GIT_SHA
           docker manifest push documenso/documenso:$APP_VERSION
 
+      - name: Create and push DockerHub chromium manifest
+        run: |
+          APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
+          GIT_SHA="$(git rev-parse HEAD)"
+
+          # Check if the version is stable (no rc or beta in the version)
+          if [[ "$APP_VERSION" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+            docker manifest create \
+              documenso/documenso:latest-chromium \
+              --amend documenso/documenso-amd64:latest-chromium \
+              --amend documenso/documenso-arm64:latest-chromium
+
+            docker manifest push documenso/documenso:latest-chromium
+          fi
+
+          if [[ "$APP_VERSION" =~ ^v[0-9]+\.[0-9]+\.[0-9]+-rc\.[0-9]+$ ]]; then
+            docker manifest create \
+              documenso/documenso:rc-chromium \
+              --amend documenso/documenso-amd64:rc-chromium \
+              --amend documenso/documenso-arm64:rc-chromium
+
+            docker manifest push documenso/documenso:rc-chromium
+          fi
+
+          docker manifest create \
+            documenso/documenso:$GIT_SHA-chromium \
+            --amend documenso/documenso-amd64:$GIT_SHA-chromium \
+            --amend documenso/documenso-arm64:$GIT_SHA-chromium
+
+          docker manifest create \
+            documenso/documenso:$APP_VERSION-chromium \
+            --amend documenso/documenso-amd64:$APP_VERSION-chromium \
+            --amend documenso/documenso-arm64:$APP_VERSION-chromium
+
+          docker manifest push documenso/documenso:$GIT_SHA-chromium
+          docker manifest push documenso/documenso:$APP_VERSION-chromium
+
       - name: Create and push Github Container Registry manifest
         run: |
           APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
@@ -161,3 +239,40 @@ jobs:
 
           docker manifest push ghcr.io/documenso/documenso:$GIT_SHA
           docker manifest push ghcr.io/documenso/documenso:$APP_VERSION
+
+      - name: Create and push Github Container Registry chromium manifest
+        run: |
+          APP_VERSION="$(git name-rev --tags --name-only $(git rev-parse HEAD) | head -n 1 | sed 's/\^0//')"
+          GIT_SHA="$(git rev-parse HEAD)"
+
+          # Check if the version is stable (no rc or beta in the version)
+          if [[ "$APP_VERSION" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+            docker manifest create \
+              ghcr.io/documenso/documenso:latest-chromium \
+              --amend ghcr.io/documenso/documenso-amd64:latest-chromium \
+              --amend ghcr.io/documenso/documenso-arm64:latest-chromium
+
+            docker manifest push ghcr.io/documenso/documenso:latest-chromium
+          fi
+
+          if [[ "$APP_VERSION" =~ ^v[0-9]+\.[0-9]+\.[0-9]+-rc\.[0-9]+$ ]]; then
+            docker manifest create \
+              ghcr.io/documenso/documenso:rc-chromium \
+              --amend ghcr.io/documenso/documenso-amd64:rc-chromium \
+              --amend ghcr.io/documenso/documenso-arm64:rc-chromium
+
+            docker manifest push ghcr.io/documenso/documenso:rc-chromium
+          fi
+
+          docker manifest create \
+            ghcr.io/documenso/documenso:$GIT_SHA-chromium \
+            --amend ghcr.io/documenso/documenso-amd64:$GIT_SHA-chromium \
+            --amend ghcr.io/documenso/documenso-arm64:$GIT_SHA-chromium
+
+          docker manifest create \
+            ghcr.io/documenso/documenso:$APP_VERSION-chromium \
+            --amend ghcr.io/documenso/documenso-amd64:$APP_VERSION-chromium \
+            --amend ghcr.io/documenso/documenso-arm64:$APP_VERSION-chromium
+
+          docker manifest push ghcr.io/documenso/documenso:$GIT_SHA-chromium
+          docker manifest push ghcr.io/documenso/documenso:$APP_VERSION-chromium

.github/workflows/translations-upload.yml

@@ -17,6 +17,7 @@ jobs:
     environment: Translations
     permissions:
       contents: write
+      pull-requests: write
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -26,12 +27,54 @@ jobs:
       - name: Extract translations
         run: npm run translate:extract
 
-      - name: Check and commit any files created
+      - name: Commit changes and push to reserved branch
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
+          set -euo pipefail
+
+          BRANCH="chore/extract-translations"
+
           git config --global user.name 'github-actions'
           git config --global user.email 'github-actions@documenso.com'
+
+          git fetch origin
+
+          # Create branch locally (always reset to main)
+          git checkout -B "$BRANCH" origin/main
+
+          # Stage translation output
           git add packages/lib/translations
-          git diff --staged --quiet --exit-code || (git commit -m "chore: extract translations" && git push)
+
+          # If no changes, exit early
+          if git diff --staged --quiet; then
+            echo "No translation changes found."
+            exit 0
+          fi
+
+          # Commit fresh snapshot
+          git commit -m "chore: extract translations"
+
+          # Force push reserved branch
+          git push origin "$BRANCH" --force
+
+          # Does a PR already exist?
+          EXISTING_PR=$(gh pr list \
+            --state open \
+            --head "$BRANCH" \
+            --json number \
+            --jq '.[0].number // empty')
+
+          if [ -z "$EXISTING_PR" ]; then
+            echo "No existing PR — creating new one."
+            gh pr create \
+              --title "chore: extract translations" \
+              --body "Automated translation extraction" \
+              --base main \
+              --head "$BRANCH"
+          else
+            echo "PR #$EXISTING_PR already exists — not creating a new one."
+          fi
 
       - name: Compile translations
         id: compile_translations

.gitignore

@@ -60,3 +60,6 @@ CLAUDE.md
 
 # agents
 .specs
+
+# scripts
+scripts/output*

.vscode/settings.json

@@ -17,5 +17,6 @@
   },
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "prisma.pinToPrisma6": true
 }

README.md

@@ -1,6 +1,3 @@
-> 🚨 🚨 🚨
-> Documenso 2.0.0 is live on Product Hunt 🎉 <a href="https://documen.so/launch" target="_blank" rel="noopener noreferrer" style="text-decoration: underline;">Join us to celebrate the best Documenso yet 🪩</a>
-
 <img src="https://github.com/documenso/documenso/assets/13398220/a643571f-0239-46a6-a73e-6bef38d1228b" alt="Documenso Logo">
 
 <p align="center" style="margin-top: 20px">

apps/documentation/package.json

@@ -15,7 +15,7 @@
     "@documenso/tailwind-config": "*",
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
-    "next": "^15",
+    "next": "15.5.9",
     "next-plausible": "^3.12.5",
     "nextra": "^3",
     "nextra-theme-docs": "^3",
@@ -29,4 +29,4 @@
     "pagefind": "^1.2.0",
     "typescript": "5.6.2"
   }
-}
+}

apps/documentation/pages/developers/developer-mode/field-coordinates.mdx

@@ -5,14 +5,22 @@ description: Learn how to get the coordinates of a field in a document.
 
 ## Field Coordinates
 
-Field coordinates represent the position of a field in a document. They are returned in the `pageX` and `pageY` properties of the field.
+Field coordinates represent the position of a field in a document. They are returned in the `pageX`, `pageY`, `width` and `height` properties of the field.
 
 To enable field coordinates, you can use the `devmode` query parameter.
 
 ```bash
-https://app.documenso.com/documents/<document-id>/edit?devmode=true
+# Legacy editor
+
+https://app.documenso.com/t/<team-url>/documents/<envelope-id>/legacy_editor?devmode=true
 ```
 
-You should then see the coordinates on top of each field.
+![Field Coordinates Legacy Editor](/developer-mode/field-coordinates-legacy-editor.webp)
 
-![Field Coordinates](/developer-mode/field-coordinates.webp)
+```bash
+# New editor
+
+https://app.documenso.com/t/<team-url>/documents/<envelope-id>/edit?step=addFields&devmode=true
+```
+
+![Field Coordinates New Editor](/developer-mode/field-coordinates-new-editor.webp)

apps/documentation/pages/developers/local-development/quickstart.mdx

@@ -61,6 +61,6 @@ You can access the following services:
 - Main application - http://localhost:3000
 - Incoming Mail Access - http://localhost:9000
 - Database Connection Details:
-- Port: 54320
-- Connection: Use your favourite database client to connect to the database.
+  - Port: 54320
+  - Connection: Use your favorite database client to connect to the database.
 - S3 Storage Dashboard - http://localhost:9001

apps/documentation/pages/developers/public-api/rate-limits.mdx

@@ -1,3 +1,8 @@
+---
+title: Rate Limits
+description: Learn about the rate limits for the Documenso Public API.
+---
+
 import { Callout } from 'nextra/components';
 
 # Rate Limits

apps/documentation/pages/developers/self-hosting/_meta.js

@@ -4,4 +4,5 @@ export default {
   'how-to': 'How To',
   'setting-up-oauth-providers': 'Setting up OAuth Providers',
   telemetry: 'Telemetry',
+  'ai-features': 'AI Recipient & Field Detection',
 };

apps/documentation/pages/developers/self-hosting/ai-features.mdx

@@ -0,0 +1,72 @@
+---
+title: AI Recipient & Field Detection (Self-hosting)
+description: Configure Google Vertex AI so Documenso can detect recipients and fields automatically.
+---
+
+import { Callout, Steps } from 'nextra/components';
+
+# AI Recipient & Field Detection (Self-hosting)
+
+This guide covers how to enable the AI recipient and field detection features when you self-host Documenso.
+
+## What this enables
+
+- Detect recipients from uploaded PDFs (roles, names, emails when present).
+- Detect and place fields (signature, initials, name, email, date, text, number, radio, checkbox) onto draft envelopes.
+- Built-in rate limits (3 requests per minute per IP) to prevent abuse.
+
+## Prerequisites
+
+- A Google Cloud project with the **Vertex AI API** enabled and billing active.
+- A **Vertex AI Express API key** with access to Gemini models (create via the [Vertex AI Express flow](https://cloud.google.com/vertex-ai/generative-ai/docs/start/express-mode/overview) and manage keys in [API keys](https://cloud.google.com/vertex-ai/generative-ai/docs/start/api-keys)).
+- Documenso version that includes the AI detection feature and the corresponding database migration.
+
+## Configure environment variables
+
+Add these variables to your deployment `.env` (or secret manager):
+
+```
+GOOGLE_VERTEX_PROJECT_ID="<your-gcp-project-id>"
+GOOGLE_VERTEX_API_KEY="<your-vertex-api-key>"
+# Optional, defaults to "global"
+GOOGLE_VERTEX_LOCATION="global"
+```
+
+<Callout type="info">
+  Use a region close to your users if you need data residency considerations (e.g. `europe-west1`).
+  If you omit the location, Documenso uses `global`. Not all models are available in every region;
+  if a model is unavailable, switch to a supported region.
+</Callout>
+
+## Deploy with the published container
+
+- Use the official Documenso image (DockerHub or GHCR) and supply the Vertex env vars above.
+- Ensure migrations run on startup (the container runs `prisma migrate deploy` in production mode).
+- Restart the container after adding or changing Vertex env vars.
+
+## Enable the feature in Documenso
+
+Once the service is running with the Vertex env vars:
+
+<Steps>
+### Organisation settings
+
+Go to **Settings → Document Preferences → AI Features** and set to **Enabled**. Teams that inherit organisation defaults will pick this up.
+
+### Team settings
+
+If a team overrides organisation defaults, go to **Team Settings → Document Preferences → AI Features** and choose **Enabled** (or **Inherit** to follow the organisation).
+
+### Verify in the editor
+
+Open a draft envelope. In **Recipients**, you should see the sparkle button for AI detection. In **Fields**, you should see **Detect with AI** available.
+
+</Steps>
+
+## Troubleshooting
+
+- **Too many requests**: Wait a minute or two and retry (rate limit is 3/min per IP).
+- **AI options hidden**: Ensure the env vars are set, the server was restarted after setting them, and `aiFeaturesEnabled` is enabled at organisation/team level.
+- **Detection fails immediately**: Confirm the Vertex API key is valid and the project has Vertex AI enabled. Check server logs for status codes from Vertex.
+
+If issues persist, recheck env vars, restart the service, and confirm the Prisma migration was applied.

apps/documentation/pages/developers/self-hosting/how-to.mdx

@@ -119,6 +119,8 @@ NEXT_PRIVATE_SMTP_USERNAME="<your-username>"
 NEXT_PRIVATE_SMTP_PASSWORD="<your-password>"
 ```
 
+For full AI setup details (including model availability notes), see the [AI Recipient & Field Detection (Self-hosting)](./ai-features) page.
+
 ### Set Up Your Signing Certificate
 
 <Callout type="warning">
@@ -146,6 +148,7 @@ This method avoids file permission issues by creating the certificate directly i
 
    # Generate certificate inside container using environment variable
    docker exec -e CERT_PASS="$CERT_PASS" -it documenso-production-documenso-1 bash -c "
+     mkdir -p /app/certs && \
      openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
        -keyout /tmp/private.key \
        -out /tmp/certificate.crt \
@@ -267,58 +270,63 @@ You can access the Documenso application by visiting the URL you provided for th
 
 The environment variables listed above are a subset of those available for configuring Documenso. The table below provides a complete list of environment variables and their descriptions.
 
-| Variable                                     | Description                                                                                         |
-| -------------------------------------------- | --------------------------------------------------------------------------------------------------- |
-| `PORT`                                       | The port on which the Documenso application runs. It defaults to `3000`.                            |
-| `NEXTAUTH_SECRET`                            | The secret key used by NextAuth.js for encryption and signing.                                      |
-| `NEXT_PRIVATE_ENCRYPTION_KEY`                | The primary encryption key for symmetric encryption and decryption (at least 32 characters).        |
-| `NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY`      | The secondary encryption key for symmetric encryption and decryption (at least 32 characters).      |
-| `NEXT_PRIVATE_GOOGLE_CLIENT_ID`              | The Google client ID for Google authentication (optional).                                          |
-| `NEXT_PRIVATE_GOOGLE_CLIENT_SECRET`          | The Google client secret for Google authentication (optional).                                      |
-| `NEXT_PRIVATE_MICROSOFT_CLIENT_ID`           | The Microsoft client ID for Microsoft authentication (optional).                                    |
-| `NEXT_PRIVATE_MICROSOFT_CLIENT_SECRET`       | The Microsoft client secret for Microsoft authentication (optional).                                |
-| `NEXT_PRIVATE_OIDC_CLIENT_ID`                | The OIDC client ID for OIDC authentication (optional).                                              |
-| `NEXT_PRIVATE_OIDC_CLIENT_SECRET`            | The OIDC client secret for OIDC authentication (optional).                                          |
-| `NEXT_PRIVATE_OIDC_WELL_KNOWN`               | The well-known URL for the OIDC provider (optional).                                                |
-| `NEXT_PRIVATE_OIDC_PROVIDER_LABEL`           | The label to display for the OIDC provider button (optional).                                       |
-| `NEXT_PRIVATE_OIDC_SKIP_VERIFY`              | Whether to skip email verification for OIDC accounts (optional, default `false`).                   |
-| `NEXT_PUBLIC_WEBAPP_URL`                     | The URL for the web application.                                                                    |
-| `NEXT_PUBLIC_SUPPORT_EMAIL`                  | The support email address displayed to users (default `support@documenso.com`).                     |
-| `NEXT_PRIVATE_DATABASE_URL`                  | The URL for the primary database connection (with connection pooling).                              |
-| `NEXT_PRIVATE_DIRECT_DATABASE_URL`           | The URL for the direct database connection (without connection pooling).                            |
-| `NEXT_PRIVATE_SIGNING_TRANSPORT`             | The signing transport to use. Available options: local (default)                                    |
-| `NEXT_PRIVATE_SIGNING_PASSPHRASE`            | The passphrase for the key file.                                                                    |
-| `NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS`   | The base64-encoded contents of the key file will be used instead of the file path.                  |
-| `NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH`       | The path to the key file, default `/opt/documenso/cert.p12`.                                        |
-| `NEXT_PUBLIC_UPLOAD_TRANSPORT`               | The transport for file uploads (database or s3).                                                    |
-| `NEXT_PRIVATE_UPLOAD_ENDPOINT`               | The endpoint for the S3 storage transport (for third-party S3-compatible providers).                |
-| `NEXT_PRIVATE_UPLOAD_FORCE_PATH_STYLE`       | Whether to force path-style URLs for the S3 storage transport.                                      |
-| `NEXT_PRIVATE_UPLOAD_REGION`                 | The region for the S3 storage transport (defaults to us-east-1).                                    |
-| `NEXT_PRIVATE_UPLOAD_BUCKET`                 | The bucket to use for the S3 storage transport.                                                     |
-| `NEXT_PRIVATE_UPLOAD_ACCESS_KEY_ID`          | The access key ID for the S3 storage transport.                                                     |
-| `NEXT_PRIVATE_UPLOAD_SECRET_ACCESS_KEY`      | The secret access key for the S3 storage transport.                                                 |
-| `NEXT_PRIVATE_SMTP_TRANSPORT`                | The transport to send emails (smtp-auth, smtp-api, resend, or mailchannels).                        |
-| `NEXT_PRIVATE_SMTP_HOST`                     | The host for the SMTP server for SMTP transports.                                                   |
-| `NEXT_PRIVATE_SMTP_PORT`                     | The port for the SMTP server for SMTP transports.                                                   |
-| `NEXT_PRIVATE_SMTP_USERNAME`                 | The username for the SMTP server for the `smtp-auth` transport.                                     |
-| `NEXT_PRIVATE_SMTP_PASSWORD`                 | The password for the SMTP server for the `smtp-auth` transport.                                     |
-| `NEXT_PRIVATE_SMTP_APIKEY_USER`              | The API key user for the SMTP server for the `smtp-api` transport.                                  |
-| `NEXT_PRIVATE_SMTP_APIKEY`                   | The API key for the SMTP server for the `smtp-api` transport.                                       |
-| `NEXT_PRIVATE_SMTP_SECURE`                   | Whether to force the use of TLS for the SMTP server for SMTP transports.                            |
-| `NEXT_PRIVATE_SMTP_UNSAFE_IGNORE_TLS`        | Whether to ignore TLS errors for the SMTP server (useful for self-signed certificates).             |
-| `NEXT_PRIVATE_SMTP_FROM_ADDRESS`             | The email address for the "from" address.                                                           |
-| `NEXT_PRIVATE_SMTP_FROM_NAME`                | The sender name for the "from" address.                                                             |
-| `NEXT_PRIVATE_RESEND_API_KEY`                | The API key for Resend.com for the `resend` transport.                                              |
-| `NEXT_PRIVATE_MAILCHANNELS_API_KEY`          | The optional API key for MailChannels (if using a proxy) for the `mailchannels` transport.          |
-| `NEXT_PRIVATE_MAILCHANNELS_ENDPOINT`         | The optional endpoint for the MailChannels API (if using a proxy) for the `mailchannels` transport. |
-| `NEXT_PRIVATE_MAILCHANNELS_DKIM_DOMAIN`      | The domain for DKIM signing with MailChannels for the `mailchannels` transport.                     |
-| `NEXT_PRIVATE_MAILCHANNELS_DKIM_SELECTOR`    | The selector for DKIM signing with MailChannels for the `mailchannels` transport.                   |
-| `NEXT_PRIVATE_MAILCHANNELS_DKIM_PRIVATE_KEY` | The private key for DKIM signing with MailChannels for the `mailchannels` transport.                |
-| `NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT`     | The maximum document upload limit displayed to the user (in MB).                                    |
-| `NEXT_PUBLIC_POSTHOG_KEY`                    | The optional PostHog key for analytics and feature flags.                                           |
-| `NEXT_PUBLIC_DISABLE_SIGNUP`                 | Whether to disable user signups through the /signup page.                                           |
-| `NEXT_PRIVATE_BROWSERLESS_URL`               | The URL for a Browserless.io instance to generate PDFs (optional).                                  |
-| `DOCUMENSO_DISABLE_TELEMETRY`                | Set to `true` to disable anonymous telemetry (see [Telemetry](#telemetry) section below).           |
+For AI setup specifics, see the [AI Recipient & Field Detection (Self-hosting)](./ai-features) page.
+
+| Variable                                     | Description                                                                                                                                             |
+| -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `PORT`                                       | The port on which the Documenso application runs. It defaults to `3000`.                                                                                |
+| `NEXTAUTH_SECRET`                            | The secret key used by NextAuth.js for encryption and signing.                                                                                          |
+| `NEXT_PRIVATE_ENCRYPTION_KEY`                | The primary encryption key for symmetric encryption and decryption (at least 32 characters).                                                            |
+| `NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY`      | The secondary encryption key for symmetric encryption and decryption (at least 32 characters).                                                          |
+| `NEXT_PRIVATE_GOOGLE_CLIENT_ID`              | The Google client ID for Google authentication (optional).                                                                                              |
+| `NEXT_PRIVATE_GOOGLE_CLIENT_SECRET`          | The Google client secret for Google authentication (optional).                                                                                          |
+| `NEXT_PRIVATE_MICROSOFT_CLIENT_ID`           | The Microsoft client ID for Microsoft authentication (optional).                                                                                        |
+| `NEXT_PRIVATE_MICROSOFT_CLIENT_SECRET`       | The Microsoft client secret for Microsoft authentication (optional).                                                                                    |
+| `NEXT_PRIVATE_OIDC_CLIENT_ID`                | The OIDC client ID for OIDC authentication (optional).                                                                                                  |
+| `NEXT_PRIVATE_OIDC_CLIENT_SECRET`            | The OIDC client secret for OIDC authentication (optional).                                                                                              |
+| `NEXT_PRIVATE_OIDC_WELL_KNOWN`               | The well-known URL for the OIDC provider (optional).                                                                                                    |
+| `NEXT_PRIVATE_OIDC_PROVIDER_LABEL`           | The label to display for the OIDC provider button (optional).                                                                                           |
+| `NEXT_PRIVATE_OIDC_SKIP_VERIFY`              | Whether to skip email verification for OIDC accounts (optional, default `false`).                                                                       |
+| `NEXT_PUBLIC_WEBAPP_URL`                     | The URL for the web application.                                                                                                                        |
+| `NEXT_PUBLIC_SUPPORT_EMAIL`                  | The support email address displayed to users (default `support@documenso.com`).                                                                         |
+| `NEXT_PRIVATE_DATABASE_URL`                  | The URL for the primary database connection (with connection pooling).                                                                                  |
+| `NEXT_PRIVATE_DIRECT_DATABASE_URL`           | The URL for the direct database connection (without connection pooling).                                                                                |
+| `NEXT_PRIVATE_SIGNING_TRANSPORT`             | The signing transport to use. Available options: local (default)                                                                                        |
+| `NEXT_PRIVATE_SIGNING_PASSPHRASE`            | The passphrase for the key file.                                                                                                                        |
+| `NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS`   | The base64-encoded contents of the key file will be used instead of the file path.                                                                      |
+| `NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH`       | The path to the key file, default `/opt/documenso/cert.p12`.                                                                                            |
+| `NEXT_PUBLIC_UPLOAD_TRANSPORT`               | The transport for file uploads (database or s3).                                                                                                        |
+| `NEXT_PRIVATE_UPLOAD_ENDPOINT`               | The endpoint for the S3 storage transport (for third-party S3-compatible providers).                                                                    |
+| `NEXT_PRIVATE_UPLOAD_FORCE_PATH_STYLE`       | Whether to force path-style URLs for the S3 storage transport.                                                                                          |
+| `NEXT_PRIVATE_UPLOAD_REGION`                 | The region for the S3 storage transport (defaults to us-east-1).                                                                                        |
+| `NEXT_PRIVATE_UPLOAD_BUCKET`                 | The bucket to use for the S3 storage transport.                                                                                                         |
+| `NEXT_PRIVATE_UPLOAD_ACCESS_KEY_ID`          | The access key ID for the S3 storage transport.                                                                                                         |
+| `NEXT_PRIVATE_UPLOAD_SECRET_ACCESS_KEY`      | The secret access key for the S3 storage transport.                                                                                                     |
+| `NEXT_PRIVATE_SMTP_TRANSPORT`                | The transport to send emails (smtp-auth, smtp-api, resend, or mailchannels).                                                                            |
+| `NEXT_PRIVATE_SMTP_HOST`                     | The host for the SMTP server for SMTP transports.                                                                                                       |
+| `NEXT_PRIVATE_SMTP_PORT`                     | The port for the SMTP server for SMTP transports.                                                                                                       |
+| `NEXT_PRIVATE_SMTP_USERNAME`                 | The username for the SMTP server for the `smtp-auth` transport.                                                                                         |
+| `NEXT_PRIVATE_SMTP_PASSWORD`                 | The password for the SMTP server for the `smtp-auth` transport.                                                                                         |
+| `NEXT_PRIVATE_SMTP_APIKEY_USER`              | The API key user for the SMTP server for the `smtp-api` transport.                                                                                      |
+| `NEXT_PRIVATE_SMTP_APIKEY`                   | The API key for the SMTP server for the `smtp-api` transport.                                                                                           |
+| `NEXT_PRIVATE_SMTP_SECURE`                   | Whether to force the use of TLS for the SMTP server for SMTP transports.                                                                                |
+| `NEXT_PRIVATE_SMTP_UNSAFE_IGNORE_TLS`        | Whether to ignore TLS errors for the SMTP server (useful for self-signed certificates).                                                                 |
+| `NEXT_PRIVATE_SMTP_FROM_ADDRESS`             | The email address for the "from" address.                                                                                                               |
+| `NEXT_PRIVATE_SMTP_FROM_NAME`                | The sender name for the "from" address.                                                                                                                 |
+| `NEXT_PRIVATE_RESEND_API_KEY`                | The API key for Resend.com for the `resend` transport.                                                                                                  |
+| `NEXT_PRIVATE_MAILCHANNELS_API_KEY`          | The optional API key for MailChannels (if using a proxy) for the `mailchannels` transport.                                                              |
+| `NEXT_PRIVATE_MAILCHANNELS_ENDPOINT`         | The optional endpoint for the MailChannels API (if using a proxy) for the `mailchannels` transport.                                                     |
+| `NEXT_PRIVATE_MAILCHANNELS_DKIM_DOMAIN`      | The domain for DKIM signing with MailChannels for the `mailchannels` transport.                                                                         |
+| `NEXT_PRIVATE_MAILCHANNELS_DKIM_SELECTOR`    | The selector for DKIM signing with MailChannels for the `mailchannels` transport.                                                                       |
+| `NEXT_PRIVATE_MAILCHANNELS_DKIM_PRIVATE_KEY` | The private key for DKIM signing with MailChannels for the `mailchannels` transport.                                                                    |
+| `NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT`     | The maximum document upload limit displayed to the user (in MB).                                                                                        |
+| `NEXT_PUBLIC_POSTHOG_KEY`                    | The optional PostHog key for analytics and feature flags.                                                                                               |
+| `NEXT_PUBLIC_DISABLE_SIGNUP`                 | Whether to disable user signups through the /signup page.                                                                                               |
+| `NEXT_PRIVATE_BROWSERLESS_URL`               | The URL for a Browserless.io instance to generate PDFs (optional).                                                                                      |
+| `DOCUMENSO_DISABLE_TELEMETRY`                | Set to `true` to disable anonymous telemetry (see [Telemetry](#telemetry) section below).                                                               |
+| `GOOGLE_VERTEX_PROJECT_ID`                   | Google Cloud project ID used for Vertex AI (required for AI detection).                                                                                 |
+| `GOOGLE_VERTEX_API_KEY`                      | Vertex AI Express API key with access to Gemini models (required for AI detection). See [AI Recipient & Field Detectionfor](./ai-features) for details. |
+| `GOOGLE_VERTEX_LOCATION`                     | Optional Vertex region, defaults to `global`. Not all models are available in every region.                                                             |
 
 ## Telemetry
 

apps/documentation/pages/developers/self-hosting/telemetry.mdx

@@ -1,3 +1,8 @@
+---
+title: Telemetry
+description: Learn about the telemetry data that Documenso collects from self-hosted instances.
+---
+
 # Telemetry
 
 Documenso collects anonymous telemetry data from self-hosted instances to help us understand how the software is being used and make improvements to the product. This telemetry is enabled by default, but you can easily disable it if you prefer.

apps/documentation/pages/developers/webhooks.mdx

@@ -5,7 +5,7 @@ description: Learn how to use webhooks to receive real-time notifications about
 
 # Webhooks
 
-Webhooks are HTTP callbacks triggered by specific events. When the user subscribes to a specific event, and that event occurs, the webhook makes an HTTP request to the URL provided by the user. The request can be a simple notification or carry a payload with more information about the event.
+Webhooks are HTTP callbacks triggered by specific events. When you subscribe to a specific event and that event occurs, the webhook makes an HTTP request to the URL you provide. The request can be a simple notification or carry a payload with more information about the event.
 
 Some of the common use cases for webhooks include:
 
@@ -25,13 +25,13 @@ Documenso supports Webhooks and allows you to subscribe to the following events:
 
 ## Create a webhook subscription
 
-You can create a webhook subscription from the user settings page. Click on your avatar in the top right corner of the dashboard and select "**[User settings](https://app.documenso.com/settings)**" from the dropdown menu.
+You can create a webhook subscription from the team settings page. Click your avatar in the top right corner of the dashboard and select "Team settings" from the dropdown menu.
 
-![A screenshot of the Documenso's dashboard that shows the dropdown menu when you click on your user avatar](/webhook-images/dashboard-user-dropdown-menu.webp)
+![A screenshot of the Documenso's dashboard that shows the dropdown menu when you click on your user avatar](/webhook-images/documenso-main-page.webp)
 
-Then, navigate to the "**[Webhooks](https://app.documenso.com/settings/webhooks)**" tab, where you can see a list of your existing webhooks and create new ones.
+Then, navigate to the "Webhooks" tab, which takes you to the webhooks main page.
 
-![A screenshot of the Documenso's user settings page that shows the Webhooks tab and the Create Webhook button](/webhook-images/webhooks-settings-page.webp)
+![A screenshot of the Documenso's team settings page that shows the Webhooks tab and the Create Webhook button](/webhook-images/webhooks-main-page.webp)
 
 Clicking on the "**Create Webhook**" button opens a modal to create a new webhook subscription.
 
@@ -41,7 +41,7 @@ To create a new webhook subscription, you need to provide the following informat
 - Select the event(s) you want to subscribe to: `document.created`, `document.sent`, `document.opened`, `document.signed`, `document.completed`, `document.rejected`, `document.cancelled`.
 - Optionally, you can provide a secret key that will be used to sign the payload. This key will be included in the `X-Documenso-Secret` header of the request.
 
-![A screenshot of the Create Webhook modal that shows the URL input field and the event checkboxes](/webhook-images/webhooks-page-create-webhook-modal.webp)
+![A screenshot of the Create Webhook modal that shows the URL input field and the event checkboxes](/webhook-images/create-webhook-dialog.webp)
 
 After you have filled in the required information, click on the "**Create Webhook**" button to save your subscription.
 
@@ -49,7 +49,22 @@ The screenshot below illustrates a newly created webhook subscription.
 
 ![A screenshot of the Documenso's user settings page that shows the newly created webhook subscription](/webhook-images/webhooks-page.webp)
 
-You can edit or delete your webhook subscriptions by clicking the "**Edit**" or "**Delete**" buttons next to the webhook.
+You can edit, view the logs, or delete your webhook subscriptions by clicking the three dots (...) under the "Action" column. You can also access the webhook logs by clicking on the webhook subscription directly.
+
+![A screenshot of the Documenso's team settings page that shows the webhook logs](/webhook-images/webhook-detail-page.webp)
+
+You can go even further and check the execution details of each call by clicking on a specific webhook call.
+
+![A screenshot of the Documenso's team settings page that shows the webhook call details](/webhook-images/webhook-run-page.webp)
+
+This page shows the details of the webhook call such as:
+
+- status
+- event
+- date when the webhook was sent
+- response code
+- request body
+- response body and headers
 
 ## Webhook fields
 
@@ -619,18 +634,26 @@ Example payload for the `document.rejected` event:
 }
 ```
 
-## Webhook Events Testing
+## Webhook events testing
 
-You can trigger test webhook events to test the webhook functionality. To trigger a test webhook, navigate to the [Webhooks page](/developers/webhooks) and click on the "Test Webhook" button.
+You can trigger test webhook events to test the webhook functionality. To do so, navigate to the webhook subscription details page and click the "Test" button.
 
-![Documenso's Webhooks Page](/webhook-images/test-webhooks-page.webp)
+![A screenshot of the Documenso's team settings page that shows the webhook logs](/webhook-images/webhook-detail-page.webp)
 
 This opens a dialog where you can select the event type to test.
 
-![Documenso's individual webhook page](/webhook-images/test-webhook-dialog.webp)
+![Documenso's individual webhook page](/webhook-images/webhook-test-trigger.webp)
 
-Choose the appropriate event and click "Send Test Webhook." You’ll shortly receive a test payload from Documenso with sample data.
+Choose the event you want to test and click "Send". You’ll then receive a test payload from Documenso with sample data.
+
+## Webhook events resending
+
+To resend a webhook call, you need to navigate to the webhook call page and click the "Resend" button.
+
+![A screenshot of the Documenso's team settings page that shows the webhook call details](/webhook-images/webhook-run-page.webp)
+
+This will send the webhook event to the webhook URL again.
 
 ## Availability
 
-Webhooks are available to individual users and teams.
+Webhooks are available to teams only.

apps/documentation/pages/users/compliance/signature-levels.mdx

@@ -1,3 +1,8 @@
+---
+title: Signature Levels
+description: Learn about the different signature levels for Documenso.
+---
+
 import { Callout } from 'nextra/components';
 
 # Signature Levels
@@ -26,20 +31,20 @@ ensures the legal validity and enforceability of electronic signatures and recor
 
 ### Main Requirements
 
-- [x] Intent to Sign: "Parties must demonstrate their intent to sign [..]"
-- [x] Consent: "The ESIGN Act requires that all parties involved in a transaction consent to the use of electronic signatures and records [..]"
-- [x] Consumer Disclosures: Before obtaining their consent, financial institutions must provide the consumer a clear and conspicuous statement informing the consumer [..]
-- [x] Record Retention: Electronic Records must be maintained for later access by signers.
-- [x] Security: The ESIGN Act does not mandate specific security measures, but it does require that parties take reasonable steps to ensure the security and integrity of electronic signatures and records. This may include implementing encryption, access controls, and authentication measures.
+- [x] **Intent to Sign**: "Parties must demonstrate their intent to sign [..]"
+- [x] **Consent**: "The ESIGN Act requires that all parties involved in a transaction consent to the use of electronic signatures and records [..]"
+- [x] **Consumer Disclosures**: Before obtaining their consent, financial institutions must provide the consumer a clear and conspicuous statement informing the consumer [..]
+- [x] **Record Retention**: Electronic Records must be maintained for later access by signers.
+- [x] **Security**: The ESIGN Act does not mandate specific security measures, but it does require that parties take reasonable steps to ensure the security and integrity of electronic signatures and records. This may include implementing encryption, access controls, and authentication measures.
 
 ## UETA (Uniform Electronic Transactions Act)
 
 <Callout type="info" emoji="✅">
   Status: Compliant
 </Callout>
-The Uniform Electronic Transactions Act is a law that provides a legal framework for the use of electronic
-signatures and records in electronic transactions, ensuring they have the same validity and enforceability
-as paper documents and handwritten signatures.
+The Uniform Electronic Transactions Act is a law that provides a legal framework for the use of
+electronic signatures and records in electronic transactions, ensuring they have the same validity
+and enforceability as paper documents and handwritten signatures.
 
 ### Main Requirements
 
@@ -50,9 +55,9 @@ _See [ESIGN](/users/compliance/signature-levels#-esign-electronic-signatures-in-
 <Callout type="info" emoji="✅">
   Status: Compliant for Level 1 - SES (Simple Electronic Signatures)
 </Callout>
-eIDAS (Electronic Identification, Authentication and Trust Services) is an EU regulation that standardizes
-electronic identification and trust services for secure and seamless electronic transactions across European
-member states.
+eIDAS (Electronic Identification, Authentication and Trust Services) is an EU regulation that
+standardizes electronic identification and trust services for secure and seamless electronic
+transactions across European member states.
 
 ### Level 1 - SES (Simple Electronic Signatures)
 
@@ -69,8 +74,8 @@ eIDAS SES (Simple Electronic Signature) is a basic electronic signature with min
   Status: [Planned](https://github.com/documenso/backlog/issues/9) via third party until [Let's
   Sign](https://github.com/documenso/backlog/issues/21) is realized.
 </Callout>
-eIDAS AES (Advanced Electronic Signature) provides a higher level of security with unique identification
-of the signer and data integrity.
+eIDAS AES (Advanced Electronic Signature) provides a higher level of security with unique
+identification of the signer and data integrity.
 
 ### Main Requirements
 
@@ -85,8 +90,8 @@ of the signer and data integrity.
   Status: [Planned](https://github.com/documenso/backlog/issues/32) via third party until [Let's
   Sign](https://github.com/documenso/backlog/issues/21) is realized.
 </Callout>
-eIDAS QES (Qualified Electronic Signature) is the highest security level, legally equivalent to a handwritten
-signature within the EU.
+eIDAS QES (Qualified Electronic Signature) is the highest security level, legally equivalent to a
+handwritten signature within the EU.
 
 ### Main Requirements
 

apps/documentation/pages/users/compliance/standards-and-regulations.mdx

@@ -1,3 +1,8 @@
+---
+title: Standards and Regulations
+description: Learn about the different standards and regulations for Documenso.
+---
+
 import { Callout } from 'nextra/components';
 
 ## 21 CFR Part 11

apps/documentation/pages/users/documents/_meta.js

@@ -4,4 +4,5 @@ export default {
   'document-visibility': 'Document Visibility',
   fields: 'Document Fields',
   'email-preferences': 'Email Preferences',
+  'ai-detection': 'AI Recipient & Field Detection',
 };

apps/documentation/pages/users/documents/ai-detection.mdx

@@ -0,0 +1,68 @@
+---
+title: AI Recipient & Field Detection
+description: Use Documenso’s AI helpers to detect recipients and fields in draft documents.
+---
+
+# AI Recipient & Field Detection
+
+Documenso can suggest recipients and place fields automatically using Google Vertex AI (Gemini). The feature is optional and only available when your organisation or team has **AI Features** enabled. Documents are processed securely and providers do not retain your data for training.
+
+## Requirements
+
+- AI Features must be enabled in **Document Preferences** for your organisation or team.
+- The envelope must be in **Draft** status.
+- Helpful rate limits are in place (up to 3 detection requests per minute per IP) to prevent abuse. If you see a “too many requests” message, wait a minute or two and try again.
+
+### Enable AI features
+
+1. **Organisation settings**:
+
+Settings → Document Preferences → **AI Features** → Enabled.
+
+_This applies to teams that inherit organisation defaults._
+
+2. **Team settings**:
+
+Team Settings → Document Preferences → **AI Features** → choose Enabled, Disabled, or Inherit.
+
+## Detect recipients
+
+Use this to identify who needs to sign or approve.
+
+1. Open a draft document/template and go to the **Recipients** panel.
+2. Select the **sparkle** button to start detection. If AI is enabled, uploads launched from the dashboard will open the detector automatically.
+
+![Detect recipients with AI button in the Recipients panel](/document-signing/ai-recipient-detect-button.webp)
+
+3. Wait for progress to finish, then review the suggested recipients.
+4. Remove any incorrect entries, then **Add recipients** to apply them. Existing recipients and duplicates are preserved.
+
+Notes:
+
+- Detection is unavailable once an envelope is completed.
+- You can re-run detection if you update the document; each run counts toward the rate limit.
+
+## Detect fields
+
+Use this to auto-place fields on the pages of a draft.
+
+1. Open the envelope editor and switch to the **Fields** tab.
+2. Select **Detect with AI**. Provide optional context (e.g., “Alice is the tenant, Bob is the landlord”) to improve recipient assignment.
+
+![AI field detection dialog with context input](/document-signing/ai-field-detection-button.webp)
+![AI field detection dialog with context input](/document-signing/ai-field-detection-dialog.webp)
+
+3. Watch the progress indicators; they update per page and total fields found.
+4. Review the summary and choose **Add fields** to place them in the editor.
+
+Notes:
+
+- Works only for draft envelopes and teams with AI features enabled.
+- Existing fields are masked during detection to avoid duplicates.
+- Fields are assigned to recipients based on nearby labels and your context message; you can edit them after adding.
+
+## Best practices
+
+- Keep labels near the intended fields (e.g., “Tenant signature”, “Buyer email”).
+- Provide short context when roles are ambiguous.
+- Always review suggestions before sending; AI assists but does not replace final checks.

apps/documentation/pages/users/documents/fields.mdx

@@ -178,7 +178,7 @@ The dropdown/select field collects a single choice from a list of options.
 
 Place the dropdown/select field on the document where you want the signer to select a choice. The dropdown/select field comes with additional settings that can be configured.
 
-{/* ![The dropdown/select field in the Documenso document editor](/document-signing/dropdown-field-document-editor-view.webp) */}
+![The dropdown/select field in the Documenso document editor](/document-signing/dropdown-field-document-editor-view.webp)
 
 The dropdown/select field settings include:
 

apps/documentation/pages/users/email-domains.mdx

@@ -1,3 +1,8 @@
+---
+title: Email Domains
+description: Learn how to create and manage email domains in Documenso.
+---
+
 import { Callout, Steps } from 'nextra/components';
 
 # Email Domains

apps/documentation/pages/users/fair-use.mdx

@@ -7,28 +7,28 @@ import { Callout } from 'nextra/components';
 
 # Fair Use Policy
 
-### Why
+We offer our plans without any limits on volume because we want our users and customers to make the most of their accounts. Estimating volume is incredibly hard, especially for shorter intervals like a quarter. We are not interested in selling volume packages our customers end up not using.
 
-We offer our plans without any limits on volume because we want our users and customers to make the most of their accounts. Estimating volume is incredibly hard, especially for shorter intervals like a quarter. We are not interested in selling volume packages our customers end up not using. This is why the individual plan and the team plan do not include a limit on signing or API volume. If you are a customer of these [plans](https://documen.so/pricing), we ask you to abide by this fair use policy:
+This is why the individual plan and the team plan do not include a limit on signing or API volume. If you are a customer of these [plans](https://documen.so/pricing), we ask you to abide by this fair use policy:
 
 ### Spirit of the Plan
 
-> Use the limitless accounts as much as you like (they are meant to offer a lot) while respecting the spirit and intended scope of the account.
+Use the limitless accounts as much as you like (they are meant to offer a lot) while respecting the spirit and intended scope of the account.
 
 <Callout type="info">
   What happens if I violate this policy? We will ask you to upgrade to a fitting plan or custom
-  pricing. We won’t block your account without reaching out. [Message
-  us](mailto:support@documenso.com) for questions. It's probably fine, though.
+  pricing. We won’t block your account without reaching out. You can [message
+  us](mailto:support@documenso.com) for questions.
 </Callout>
 
 ### DO
 
-- Sign as many documents with the individual plan for your single business or organization you are part of
-- Use the API and Zapier to automate all your signing to sign as much as possible
-- Experiment with the plans and integrations, testing what you want to build: When in doubt, do it. Especially if you are just starting.
+- Sign as many documents as you need with the individual plan for your single business or organization you are part of
+- Use the API and automation tools to automate all your signing workflows
+- Experiment with the plans and integrations, testing what you want to build
 
 ### DON'T
 
 - Use the individual account's API to power a platform
 - Run a huge company, signing thousands of documents per day on a two-user team plan using the API
-- Let this policy make you overthink. If you are a paying customer, we want you to win, and it's probably fine
+- Let this policy make you overthink. If you are a paying customer, we want you to win

apps/documentation/pages/users/get-started/account-creation.mdx

@@ -10,7 +10,12 @@ import { Callout, Steps } from 'nextra/components';
 <Steps>
 ### Pick a Plan
 
-The first step to start using Documenso is to pick a plan and create an account. At the moment of writing this guide, we have 3 plans available: Free, Individual, Teams and Platform.
+The first step to start using Documenso is to pick a plan and create an account. At the moment of writing this guide, we have 4 plans available:
+
+- Free
+- Individual
+- Teams
+- Platform
 
 Explore each plan's features and choose the one that best suits your needs. The [pricing page](https://documen.so/pricing) has more information about the plans.
 
@@ -24,7 +29,7 @@ To create a free account, navigate to the [registration page](https://documen.so
 
 ### Optional: Claim a Premium Username
 
-You can claim a premium username by upgrading to a paid plan. After upgrading to a paid plan, you can update your [public profile](https://app.documenso.com/settings/public-profile).
+You can claim a premium username by upgrading to a paid plan. After upgrading to a paid plan, you can update your [public profile](/users/profile).
 
 ### Optional: Create a Team
 

apps/documentation/pages/users/licenses/community-edition.mdx

@@ -1,3 +1,8 @@
+---
+title: Community Edition
+description: Learn about the Community Edition of Documenso.
+---
+
 import { Callout } from 'nextra/components';
 
 # Community Edition
@@ -32,10 +37,10 @@ Documenso and the Community Edition are licensed under [AGPL3](https://github.co
 
 ### Conditions
 
-ℹ️ License and copyright notice
-ℹ️ State changes
-ℹ️ Disclose source
-ℹ️ Network use is distribution
+- License and copyright notice
+- State changes
+- Disclose source
+- Network use is distribution
 
 <Callout type="warning">
   It's important to remember that you must keep the AGPL3 license for your modified or non-modified

apps/documentation/pages/users/licenses/enterprise-edition.mdx

@@ -1,3 +1,8 @@
+---
+title: Enterprise Edition
+description: Learn about the Enterprise Edition of Documenso.
+---
+
 import { Callout } from 'nextra/components';
 
 # Enterprise Edition

apps/documentation/pages/users/licenses/index.mdx

@@ -1,3 +1,8 @@
+---
+title: Licenses
+description: Learn about the different licenses for self-hosting Documenso.
+---
+
 # Self-Hosting Licenses
 
 Documenso comes in two versions for self-hosting:

apps/documentation/pages/users/profile.mdx

@@ -15,7 +15,7 @@ Documenso allows you to create a public profile to share your templates for anyo
 
 ### Navigate to Your Profile Settings
 
-Click on your profile picture in the top right corner and select "Settings" or "Team Settings". Then, navigate to the "Public Profile" tab to configure your profile.
+Click on your profile picture in the top right corner and select "Team Settings". Then, navigate to the "Public Profile" tab to configure your profile.
 
 ![The profile settings page](/public-profile/documenso-public-profile-settings.webp)
 

apps/documentation/pages/users/support.mdx

@@ -9,30 +9,30 @@ description: Learn what types of support we offer.
 
 If you are a developer or free user, you can reach out to the community or raise an issue:
 
-### [Create Github Issues](https://github.com/documenso/documenso/issues)
+**[Create Github Issues](https://github.com/documenso/documenso/issues)**
 
 The community and the core team address GitHub issues. Be sure to check if a similar issue already exists. Please note that while we want to address everything immediately, we must prioritize.
 
-### [Join our Discord](https://documen.so/discord)
+**[Join our Discord](https://documen.so/discord)**
 
 You can ask for help in the [community help channel](https://discord.com/channels/1132216843537485854/1133419426524430376).
 
 ## Paid Account Support
 
-### Email: support@documenso.com
+**Email: support@documenso.com**
 
 If you are paying customers facing issues, email our customer support, especially in urgent cases.
 
-### Private Discord channel
+**Private Discord channel**
 
 If you prefer Discord, we can invite you to a private channel. Message support to make this happen.
 
 ## Enterprise Support
 
-### Email: support@documenso.com
+**Email: support@documenso.com**
 
 If you are paying customers facing issues, email our customer support, especially in urgent cases.
 
-### Slack
+**Slack**
 
 If your team is on Slack, we can create a private workspace to support you more closely.

apps/documentation/pages/users/templates.mdx

@@ -1,3 +1,8 @@
+---
+title: Templates
+description: Learn how to create and use templates in Documenso.
+---
+
 import { Callout, Steps } from 'nextra/components';
 
 # Document Templates

apps/openpage-api/package.json

@@ -12,11 +12,11 @@
   "dependencies": {
     "@documenso/prisma": "*",
     "luxon": "^3.7.2",
-    "next": "^15"
+    "next": "15.5.9"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "18.3.27",
     "typescript": "5.6.2"
   }
-}
+}

apps/remix/app/components/dialogs/admin-document-delete-dialog.tsx

@@ -45,7 +45,7 @@ export const AdminDocumentDeleteDialog = ({ envelopeId }: AdminDocumentDeleteDia
 
       toast({
         title: _(msg`Document deleted`),
-        description: 'The Document has been deleted successfully.',
+        description: _(msg`The Document has been deleted successfully.`),
         duration: 5000,
       });
 
@@ -54,8 +54,9 @@ export const AdminDocumentDeleteDialog = ({ envelopeId }: AdminDocumentDeleteDia
       toast({
         title: _(msg`An unknown error occurred`),
         variant: 'destructive',
-        description:
-          'We encountered an unknown error while attempting to delete your document. Please try again later.',
+        description: _(
+          msg`We encountered an unknown error while attempting to delete your document. Please try again later.`,
+        ),
       });
     }
   };

apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx

@@ -156,8 +156,8 @@ export const AdminOrganisationMemberUpdateDialog = ({
 
           <DialogDescription className="mt-4">
             <Trans>
-              You are currently updating{' '}
-              <span className="font-bold">{organisationMemberName}.</span>
+              You are currently updating <span className="font-bold">{organisationMemberName}</span>
+              .
             </Trans>
           </DialogDescription>
         </DialogHeader>

apps/remix/app/components/dialogs/ai-features-enable-dialog.tsx

@@ -0,0 +1,141 @@
+import { useState } from 'react';
+
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { OrganisationMemberRole, TeamMemberRole } from '@prisma/client';
+
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+
+import { useCurrentTeam } from '~/providers/team';
+
+type AiFeaturesEnableDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onEnabled: () => void;
+};
+
+export const AiFeaturesEnableDialog = ({
+  open,
+  onOpenChange,
+  onEnabled,
+}: AiFeaturesEnableDialogProps) => {
+  const { t } = useLingui();
+
+  const team = useCurrentTeam();
+  const organisation = useCurrentOrganisation();
+
+  const isTeamAdmin = team.currentTeamRole === TeamMemberRole.ADMIN;
+  const isOrganisationAdmin = organisation.currentOrganisationRole === OrganisationMemberRole.ADMIN;
+  const canEnableAiFeatures = isTeamAdmin || isOrganisationAdmin;
+
+  const [error, setError] = useState<string | null>(null);
+
+  const { mutateAsync: updateTeamSettings, isPending: isUpdatingTeamSettings } =
+    trpc.team.settings.update.useMutation();
+  const { mutateAsync: updateOrganisationSettings, isPending: isUpdatingOrganisationSettings } =
+    trpc.organisation.settings.update.useMutation();
+
+  const isSubmitting = isUpdatingTeamSettings || isUpdatingOrganisationSettings;
+
+  const onEnableClick = async () => {
+    if (!canEnableAiFeatures) {
+      return;
+    }
+
+    setError(null);
+
+    try {
+      if (isTeamAdmin) {
+        await updateTeamSettings({
+          teamId: team.id,
+          data: { aiFeaturesEnabled: true },
+        });
+      } else {
+        await updateOrganisationSettings({
+          organisationId: organisation.id,
+          data: { aiFeaturesEnabled: true },
+        });
+      }
+
+      onEnabled();
+      onOpenChange(false);
+    } catch (err) {
+      console.error('Failed to enable AI features', err);
+      setError(
+        err instanceof Error
+          ? err.message
+          : t`We couldn't enable AI features right now. Please try again.`,
+      );
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Enable AI features</Trans>
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <p className="text-sm text-muted-foreground">
+            <Trans>
+              Turn on AI detection to automatically find recipients and fields in your documents. AI
+              providers do not retain your data for training.
+            </Trans>
+          </p>
+
+          <Alert variant="neutral">
+            <AlertDescription>
+              <Trans>
+                Your document content will be sent securely to our AI provider solely for detection
+                and will not be stored or used for training.
+              </Trans>
+            </AlertDescription>
+          </Alert>
+
+          {canEnableAiFeatures ? (
+            <p className="text-sm text-muted-foreground">
+              <Trans>
+                You're an admin. You can enable AI features for this team right away. Everyone on
+                the team will see AI detection once enabled.
+              </Trans>
+            </p>
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              <Trans>
+                AI features are disabled for your team. Please ask your team owner or organisation
+                owner to enable them.
+              </Trans>
+            </p>
+          )}
+
+          {error ? <p className="text-sm text-destructive">{error}</p> : null}
+        </div>
+
+        <DialogFooter>
+          <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+            <Trans>Close</Trans>
+          </Button>
+
+          {canEnableAiFeatures ? (
+            <Button type="button" onClick={() => void onEnableClick()} loading={isSubmitting}>
+              <Trans>Enable AI features</Trans>
+            </Button>
+          ) : null}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/ai-field-detection-dialog.tsx

@@ -0,0 +1,381 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Plural, Trans } from '@lingui/react/macro';
+import { CheckIcon, FormInputIcon, ShieldCheckIcon } from 'lucide-react';
+
+import type { NormalizedFieldWithContext } from '@documenso/lib/server-only/ai/envelope/detect-fields/types';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { Label } from '@documenso/ui/primitives/label';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+
+import {
+  AiApiError,
+  type DetectFieldsProgressEvent,
+  detectFields,
+} from '../../../server/api/ai/detect-fields.client';
+import { AnimatedDocumentScanner } from '../general/animated-document-scanner';
+
+type DialogState = 'PROMPT' | 'PROCESSING' | 'REVIEW' | 'ERROR' | 'RATE_LIMITED';
+
+type AiFieldDetectionDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onComplete: (fields: NormalizedFieldWithContext[]) => void;
+  envelopeId: string;
+  teamId: number;
+};
+
+const PROCESSING_MESSAGES = [
+  msg`Reading your document`,
+  msg`Analyzing page layout`,
+  msg`Looking for form fields`,
+  msg`Detecting signature areas`,
+  msg`Identifying input fields`,
+  msg`Mapping fields to recipients`,
+  msg`Almost done`,
+] as const;
+
+const FIELD_TYPE_LABELS: Record<string, MessageDescriptor> = {
+  SIGNATURE: msg`Signature`,
+  INITIALS: msg`Initials`,
+  NAME: msg`Name`,
+  EMAIL: msg`Email`,
+  DATE: msg`Date`,
+  TEXT: msg`Text`,
+  NUMBER: msg`Number`,
+  CHECKBOX: msg`Checkbox`,
+  RADIO: msg`Radio`,
+};
+
+export const AiFieldDetectionDialog = ({
+  open,
+  onOpenChange,
+  onComplete,
+  envelopeId,
+  teamId,
+}: AiFieldDetectionDialogProps) => {
+  const { _ } = useLingui();
+
+  const [state, setState] = useState<DialogState>('PROMPT');
+  const [messageIndex, setMessageIndex] = useState(0);
+  const [detectedFields, setDetectedFields] = useState<NormalizedFieldWithContext[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [context, setContext] = useState('');
+  const [progress, setProgress] = useState<DetectFieldsProgressEvent | null>(null);
+
+  const onDetectClick = useCallback(async () => {
+    setState('PROCESSING');
+    setMessageIndex(0);
+    setError(null);
+    setProgress(null);
+
+    try {
+      await detectFields({
+        request: {
+          envelopeId,
+          teamId,
+          context: context || undefined,
+        },
+        onProgress: (progressEvent) => {
+          setProgress(progressEvent);
+        },
+        onComplete: (event) => {
+          setDetectedFields(event.fields);
+          setState('REVIEW');
+        },
+        onError: (err) => {
+          console.error('Detection failed:', err);
+
+          if (err.status === 429) {
+            setState('RATE_LIMITED');
+            return;
+          }
+
+          setError(err.message);
+          setState('ERROR');
+        },
+      });
+    } catch (err) {
+      console.error('Detection failed:', err);
+
+      if (err instanceof AiApiError && err.status === 429) {
+        setState('RATE_LIMITED');
+        return;
+      }
+
+      setError(err instanceof Error ? err.message : 'Failed to detect fields');
+      setState('ERROR');
+    }
+  }, [envelopeId, teamId, context]);
+
+  const onAddFields = () => {
+    onComplete(detectedFields);
+    onOpenChange(false);
+    setState('PROMPT');
+    setDetectedFields([]);
+    setContext('');
+  };
+
+  const onClose = () => {
+    onOpenChange(false);
+    setState('PROMPT');
+    setDetectedFields([]);
+    setError(null);
+    setContext('');
+    setProgress(null);
+  };
+
+  // Group fields by type for summary display
+  const fieldCountsByType = useMemo(() => {
+    const counts: Record<string, number> = {};
+
+    for (const field of detectedFields) {
+      counts[field.type] = (counts[field.type] || 0) + 1;
+    }
+
+    return Object.entries(counts).sort(([, a], [, b]) => b - a);
+  }, [detectedFields]);
+
+  useEffect(() => {
+    if (state !== 'PROCESSING') {
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setMessageIndex((prev) => (prev + 1) % PROCESSING_MESSAGES.length);
+    }, 4000);
+
+    return () => clearInterval(interval);
+  }, [state]);
+
+  return (
+    <Dialog open={open}>
+      <DialogContent className="sm:max-w-lg" hideClose={true}>
+        {state === 'PROMPT' && (
+          <>
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Detect fields</Trans>
+              </DialogTitle>
+            </DialogHeader>
+
+            <div className="space-y-4">
+              <p className="text-sm text-muted-foreground">
+                <Trans>
+                  We'll scan your document to find form fields like signature lines, text inputs,
+                  checkboxes, and more. Detected fields will be suggested for you to review.
+                </Trans>
+              </p>
+
+              <Alert className="flex items-center gap-2 space-y-0" variant="neutral">
+                <ShieldCheckIcon className="h-5 w-5 stroke-green-600" />
+                <AlertDescription className="mt-0">
+                  <Trans>
+                    Your document is processed securely using AI services that don't retain your
+                    data.
+                  </Trans>
+                </AlertDescription>
+              </Alert>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="context">
+                  <Trans>Context</Trans>
+                </Label>
+                <Textarea
+                  id="context"
+                  placeholder={_(msg`David is the Employee, Lucas is the Manager`)}
+                  value={context}
+                  onChange={(e) => setContext(e.target.value)}
+                  rows={2}
+                  className="resize-none"
+                />
+                <p className="text-xs text-muted-foreground">
+                  <Trans>Help the AI assign fields to the right recipients.</Trans>
+                </p>
+              </div>
+            </div>
+
+            <DialogFooter>
+              <Button type="button" variant="ghost" onClick={onClose}>
+                <Trans>Skip</Trans>
+              </Button>
+              <Button type="button" onClick={onDetectClick}>
+                <Trans>Detect</Trans>
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+
+        {state === 'PROCESSING' && (
+          <>
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Detecting fields</Trans>
+              </DialogTitle>
+            </DialogHeader>
+
+            <div className="flex flex-col items-center py-8">
+              <AnimatedDocumentScanner />
+
+              <p className="mt-8 text-muted-foreground">{_(PROCESSING_MESSAGES[messageIndex])}</p>
+
+              {progress && (
+                <p className="mt-2 text-xs text-muted-foreground/60">
+                  <Plural
+                    value={progress.fieldsDetected}
+                    one={
+                      <Trans>
+                        Page {progress.pagesProcessed} of {progress.totalPages} - # field found
+                      </Trans>
+                    }
+                    other={
+                      <Trans>
+                        Page {progress.pagesProcessed} of {progress.totalPages} - # fields found
+                      </Trans>
+                    }
+                  />
+                </p>
+              )}
+
+              <p className="mt-2 max-w-[40ch] text-center text-xs text-muted-foreground/60">
+                <Trans>This can take a minute or two depending on the size of your document.</Trans>
+              </p>
+
+              <div className="mt-4 flex gap-1">
+                {PROCESSING_MESSAGES.map((_, index) => (
+                  <div
+                    key={index}
+                    className={`h-1.5 w-1.5 rounded-full transition-all duration-300 ${
+                      index === messageIndex ? 'w-4 bg-primary' : 'bg-muted-foreground/30'
+                    }`}
+                  />
+                ))}
+              </div>
+            </div>
+          </>
+        )}
+
+        {state === 'REVIEW' && (
+          <>
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Detected fields</Trans>
+              </DialogTitle>
+            </DialogHeader>
+
+            <div className="max-h-[400px] overflow-y-auto">
+              {detectedFields.length === 0 ? (
+                <div className="flex flex-col items-center py-8">
+                  <FormInputIcon className="h-12 w-12 text-muted-foreground/50" />
+                  <p className="mt-4 text-center text-sm text-muted-foreground">
+                    <Trans>No fields were detected in your document.</Trans>
+                  </p>
+                  <p className="mt-1 text-center text-xs text-muted-foreground/70">
+                    <Trans>You can add fields manually in the editor.</Trans>
+                  </p>
+                </div>
+              ) : (
+                <>
+                  <p className="text-sm text-muted-foreground">
+                    <Plural
+                      value={detectedFields.length}
+                      one="We found # field in your document."
+                      other="We found # fields in your document."
+                    />
+                  </p>
+
+                  <ul className="mt-4 divide-y rounded-lg border">
+                    {fieldCountsByType.map(([type, count]) => (
+                      <li key={type} className="flex items-center justify-between px-4 py-3">
+                        <span className="text-sm">{_(FIELD_TYPE_LABELS[type]) || type}</span>
+                        <span className="text-sm font-medium text-muted-foreground">{count}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </>
+              )}
+            </div>
+
+            <DialogFooter>
+              <Button type="button" variant="ghost" onClick={onClose}>
+                <Trans>Cancel</Trans>
+              </Button>
+
+              {detectedFields.length > 0 && (
+                <Button type="button" onClick={onAddFields}>
+                  <CheckIcon className="-ml-1 mr-2 h-4 w-4" />
+                  <Trans>Add fields</Trans>
+                </Button>
+              )}
+            </DialogFooter>
+          </>
+        )}
+
+        {state === 'ERROR' && (
+          <>
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Detection failed</Trans>
+              </DialogTitle>
+            </DialogHeader>
+
+            <div className="py-4">
+              <p className="text-sm text-muted-foreground">
+                <Trans>Something went wrong while detecting fields.</Trans>
+              </p>
+
+              {error && <p className="mt-2 text-sm text-destructive">{error}</p>}
+            </div>
+
+            <DialogFooter>
+              <Button type="button" variant="ghost" onClick={onClose}>
+                <Trans>Close</Trans>
+              </Button>
+              <Button type="button" onClick={onDetectClick}>
+                <Trans>Try again</Trans>
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+
+        {state === 'RATE_LIMITED' && (
+          <>
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Too many requests</Trans>
+              </DialogTitle>
+            </DialogHeader>
+
+            <div className="py-4">
+              <p className="text-sm text-muted-foreground">
+                <Trans>
+                  You've made too many detection requests. Please wait a minute before trying again.
+                </Trans>
+              </p>
+            </div>
+
+            <DialogFooter>
+              <Button type="button" variant="ghost" onClick={onClose}>
+                <Trans>Close</Trans>
+              </Button>
+              <Button type="button" onClick={onDetectClick}>
+                <Trans>Try again</Trans>
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/ai-recipient-detection-dialog.tsx

@@ -0,0 +1,372 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Plural, Trans } from '@lingui/react/macro';
+import { CheckIcon, ShieldCheckIcon, UserIcon, XIcon } from 'lucide-react';
+
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import type { TDetectedRecipientSchema } from '@documenso/lib/server-only/ai/envelope/detect-recipients/schema';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+
+import {
+  AiApiError,
+  type DetectRecipientsProgressEvent,
+  detectRecipients,
+} from '../../../server/api/ai/detect-recipients.client';
+import { AnimatedDocumentScanner } from '../general/animated-document-scanner';
+
+type DialogState = 'PROMPT' | 'PROCESSING' | 'REVIEW' | 'ERROR' | 'RATE_LIMITED';
+
+type AiRecipientDetectionDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onComplete: (recipients: TDetectedRecipientSchema[]) => void;
+  envelopeId: string;
+  teamId: number;
+};
+
+const PROCESSING_MESSAGES = [
+  msg`Reading your document`,
+  msg`Analyzing pages`,
+  msg`Looking for signature fields`,
+  msg`Identifying recipients`,
+  msg`Extracting contact details`,
+  msg`Almost done`,
+] as const;
+
+export const AiRecipientDetectionDialog = ({
+  open,
+  onOpenChange,
+  onComplete,
+  envelopeId,
+  teamId,
+}: AiRecipientDetectionDialogProps) => {
+  const { _ } = useLingui();
+
+  const [state, setState] = useState<DialogState>('PROMPT');
+  const [messageIndex, setMessageIndex] = useState(0);
+  const [detectedRecipients, setDetectedRecipients] = useState<TDetectedRecipientSchema[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [progress, setProgress] = useState<DetectRecipientsProgressEvent | null>(null);
+
+  const onDetectClick = useCallback(async () => {
+    setState('PROCESSING');
+    setMessageIndex(0);
+    setError(null);
+    setProgress(null);
+
+    try {
+      await detectRecipients({
+        request: {
+          envelopeId,
+          teamId,
+        },
+        onProgress: (progressEvent) => {
+          setProgress(progressEvent);
+        },
+        onComplete: (event) => {
+          setDetectedRecipients(event.recipients);
+          setState('REVIEW');
+        },
+        onError: (err) => {
+          console.error('Detection failed:', err);
+
+          if (err.status === 429) {
+            setState('RATE_LIMITED');
+            return;
+          }
+
+          setError(err.message);
+          setState('ERROR');
+        },
+      });
+    } catch (err) {
+      console.error('Detection failed:', err);
+
+      if (err instanceof AiApiError && err.status === 429) {
+        setState('RATE_LIMITED');
+        return;
+      }
+
+      setError(err instanceof Error ? err.message : 'Failed to detect recipients');
+      setState('ERROR');
+    }
+  }, [envelopeId, teamId]);
+
+  const handleRemoveRecipient = (index: number) => {
+    setDetectedRecipients((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const onAddRecipients = () => {
+    onComplete(detectedRecipients);
+    onOpenChange(false);
+    setState('PROMPT');
+    setDetectedRecipients([]);
+  };
+
+  const onClose = () => {
+    onOpenChange(false);
+    setState('PROMPT');
+    setDetectedRecipients([]);
+    setError(null);
+    setProgress(null);
+  };
+
+  useEffect(() => {
+    if (state !== 'PROCESSING') {
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setMessageIndex((prev) => (prev + 1) % PROCESSING_MESSAGES.length);
+    }, 4000);
+
+    return () => clearInterval(interval);
+  }, [state]);
+
+  return (
+    <Dialog open={open}>
+      <DialogContent className="sm:max-w-lg" hideClose={true}>
+        {state === 'PROMPT' && (
+          <>
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Detect recipients</Trans>
+              </DialogTitle>
+            </DialogHeader>
+
+            <div>
+              <p className="text-sm text-muted-foreground">
+                <Trans>
+                  We'll scan your document to find signature fields and identify who needs to sign.
+                  Detected recipients will be suggested for you to review.
+                </Trans>
+              </p>
+
+              <Alert className="mt-4 flex items-center gap-2 space-y-0" variant="neutral">
+                <ShieldCheckIcon className="h-5 w-5 stroke-green-600" />
+                <AlertDescription className="mt-0">
+                  <Trans>
+                    Your document is processed securely using AI services that don't retain your
+                    data.
+                  </Trans>
+                </AlertDescription>
+              </Alert>
+            </div>
+
+            <DialogFooter>
+              <Button type="button" variant="ghost" onClick={onClose}>
+                <Trans>Skip</Trans>
+              </Button>
+              <Button type="button" onClick={onDetectClick}>
+                <Trans>Detect</Trans>
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+
+        {state === 'PROCESSING' && (
+          <>
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Detecting recipients</Trans>
+              </DialogTitle>
+            </DialogHeader>
+
+            <div className="flex flex-col items-center py-8">
+              <AnimatedDocumentScanner />
+
+              <p className="mt-8 text-muted-foreground">{_(PROCESSING_MESSAGES[messageIndex])}</p>
+
+              {progress && (
+                <p className="mt-2 text-xs text-muted-foreground/60">
+                  <Plural
+                    value={progress.recipientsDetected}
+                    one={
+                      <Trans>
+                        Page {progress.pagesProcessed} of {progress.totalPages} - # recipient found
+                      </Trans>
+                    }
+                    other={
+                      <Trans>
+                        Page {progress.pagesProcessed} of {progress.totalPages} - # recipients found
+                      </Trans>
+                    }
+                  />
+                </p>
+              )}
+
+              <p className="mt-2 max-w-[40ch] text-center text-xs text-muted-foreground/60">
+                <Trans>This can take a minute or two depending on the size of your document.</Trans>
+              </p>
+
+              <div className="mt-4 flex gap-1">
+                {PROCESSING_MESSAGES.map((_, index) => (
+                  <div
+                    key={index}
+                    className={`h-1.5 w-1.5 rounded-full transition-all duration-300 ${
+                      index === messageIndex ? 'w-4 bg-primary' : 'bg-muted-foreground/30'
+                    }`}
+                  />
+                ))}
+              </div>
+            </div>
+          </>
+        )}
+
+        {state === 'REVIEW' && (
+          <>
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Detected recipients</Trans>
+              </DialogTitle>
+            </DialogHeader>
+
+            <div className="max-h-[400px] overflow-y-auto">
+              {detectedRecipients.length === 0 ? (
+                <div className="flex flex-col items-center py-8">
+                  <UserIcon className="h-12 w-12 text-muted-foreground/50" />
+                  <p className="mt-4 text-center text-sm text-muted-foreground">
+                    <Trans>No recipients were detected in your document.</Trans>
+                  </p>
+                  <p className="mt-1 text-center text-xs text-muted-foreground/70">
+                    <Trans>You can add recipients manually in the editor.</Trans>
+                  </p>
+                </div>
+              ) : (
+                <>
+                  <p className="text-sm text-muted-foreground">
+                    <Plural
+                      value={detectedRecipients.length}
+                      one="We found # recipient in your document."
+                      other="We found # recipients in your document."
+                    />
+                  </p>
+
+                  <ul className="mt-4 divide-y rounded-lg border">
+                    {detectedRecipients.map((recipient, index) => (
+                      <li key={index} className="flex items-center justify-between px-4 py-3">
+                        <AvatarWithText
+                          avatarFallback={
+                            recipient.name
+                              ? recipient.name.slice(0, 1).toUpperCase()
+                              : recipient.email
+                                ? recipient.email.slice(0, 1).toUpperCase()
+                                : '?'
+                          }
+                          primaryText={
+                            <p className="text-sm font-medium text-foreground">
+                              {recipient.name || _(msg`Unknown name`)}
+                            </p>
+                          }
+                          secondaryText={
+                            <div className="text-xs text-muted-foreground">
+                              <p className="italic text-muted-foreground/70">
+                                {recipient.email || _(msg`No email detected`)}
+                              </p>
+                              <p>{_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}</p>
+                            </div>
+                          }
+                        />
+
+                        <button
+                          type="button"
+                          className="h-8 w-8 p-0 text-muted-foreground/80 hover:text-destructive focus-visible:border-destructive focus-visible:ring-destructive"
+                          onClick={() => handleRemoveRecipient(index)}
+                        >
+                          <span className="sr-only">
+                            <Trans>Remove recipient</Trans>
+                          </span>
+
+                          <XIcon className="h-4 w-4" aria-hidden="true" />
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                </>
+              )}
+            </div>
+
+            <DialogFooter>
+              <Button type="button" variant="ghost" onClick={onClose}>
+                <Trans>Cancel</Trans>
+              </Button>
+
+              {detectedRecipients.length > 0 && (
+                <Button type="button" onClick={onAddRecipients}>
+                  <CheckIcon className="-ml-1 mr-2 h-4 w-4" />
+                  <Trans>Add recipients</Trans>
+                </Button>
+              )}
+            </DialogFooter>
+          </>
+        )}
+
+        {state === 'ERROR' && (
+          <>
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Detection failed</Trans>
+              </DialogTitle>
+            </DialogHeader>
+
+            <div className="py-4">
+              <p className="text-sm text-muted-foreground">
+                <Trans>Something went wrong while detecting recipients.</Trans>
+              </p>
+
+              {error && <p className="mt-2 text-sm text-destructive">{error}</p>}
+            </div>
+
+            <DialogFooter>
+              <Button type="button" variant="ghost" onClick={onClose}>
+                <Trans>Close</Trans>
+              </Button>
+
+              <Button type="button" onClick={onDetectClick}>
+                <Trans>Try again</Trans>
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+
+        {state === 'RATE_LIMITED' && (
+          <>
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Too many requests</Trans>
+              </DialogTitle>
+            </DialogHeader>
+
+            <div className="py-4">
+              <p className="text-sm text-muted-foreground">
+                <Trans>
+                  You've made too many detection requests. Please wait a minute before trying again.
+                </Trans>
+              </p>
+            </div>
+
+            <DialogFooter>
+              <Button type="button" variant="ghost" onClick={onClose}>
+                <Trans>Close</Trans>
+              </Button>
+              <Button type="button" onClick={onDetectClick}>
+                <Trans>Try again</Trans>
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx

@@ -19,6 +19,7 @@ import * as z from 'zod';
 
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
 import { trpc, trpc as trpcReact } from '@documenso/trpc/react';
 import { DocumentSendEmailMessageHelper } from '@documenso/ui/components/document/document-send-email-message-helper';
 import { cn } from '@documenso/ui/lib/utils';
@@ -129,18 +130,43 @@ export const EnvelopeDistributeDialog = ({
 
   const distributionMethod = watch('meta.distributionMethod');
 
+  const recipientsWithIndex = useMemo(
+    () =>
+      envelope.recipients.map((recipient, index) => ({
+        ...recipient,
+        index,
+      })),
+    [envelope.recipients],
+  );
+
   const recipientsMissingSignatureFields = useMemo(
     () =>
-      envelope.recipients.filter(
+      recipientsWithIndex.filter(
         (recipient) =>
           recipient.role === RecipientRole.SIGNER &&
           !envelope.fields.some(
             (field) => field.type === FieldType.SIGNATURE && field.recipientId === recipient.id,
           ),
       ),
-    [envelope.recipients, envelope.fields],
+    [recipientsWithIndex, envelope.fields],
   );
 
+  /**
+   * List of recipients who must have an email due to having auth enabled.
+   */
+  const recipientsMissingRequiredEmail = useMemo(() => {
+    return recipientsWithIndex.filter((recipient) => {
+      const auth = extractDocumentAuthMethods({
+        documentAuth: envelope.authOptions,
+        recipientAuth: recipient.authOptions,
+      });
+
+      return (
+        (auth.recipientAccessAuthRequired || auth.recipientActionAuthRequired) && !recipient.email
+      );
+    });
+  }, [recipientsWithIndex, envelope.authOptions]);
+
   const invalidEnvelopeCode = useMemo(() => {
     if (recipientsMissingSignatureFields.length > 0) {
       return 'MISSING_SIGNATURES';
@@ -150,8 +176,12 @@ export const EnvelopeDistributeDialog = ({
       return 'MISSING_RECIPIENTS';
     }
 
+    if (recipientsMissingRequiredEmail.length > 0) {
+      return 'MISSING_REQUIRED_EMAIL';
+    }
+
     return null;
-  }, [envelope.recipients, envelope.fields, recipientsMissingSignatureFields]);
+  }, [envelope.recipients, recipientsMissingRequiredEmail, recipientsMissingSignatureFields]);
 
   const onFormSubmit = async ({ meta }: TEnvelopeDistributeFormSchema) => {
     try {
@@ -323,8 +353,10 @@ export const EnvelopeDistributeDialog = ({
                               render={({ field }) => (
                                 <FormItem>
                                   <FormLabel>
-                                    <Trans>Reply To Email</Trans>{' '}
-                                    <span className="text-muted-foreground">(Optional)</span>
+                                    <Trans>
+                                      Reply To Email{' '}
+                                      <span className="text-muted-foreground">(Optional)</span>
+                                    </Trans>
                                   </FormLabel>
 
                                   <FormControl>
@@ -342,8 +374,10 @@ export const EnvelopeDistributeDialog = ({
                               render={({ field }) => (
                                 <FormItem>
                                   <FormLabel>
-                                    <Trans>Subject</Trans>{' '}
-                                    <span className="text-muted-foreground">(Optional)</span>
+                                    <Trans>
+                                      Subject{' '}
+                                      <span className="text-muted-foreground">(Optional)</span>
+                                    </Trans>
                                   </FormLabel>
 
                                   <FormControl>
@@ -360,8 +394,10 @@ export const EnvelopeDistributeDialog = ({
                               render={({ field }) => (
                                 <FormItem>
                                   <FormLabel className="flex flex-row items-center">
-                                    <Trans>Message</Trans>{' '}
-                                    <span className="text-muted-foreground">(Optional)</span>
+                                    <Trans>
+                                      Message{' '}
+                                      <span className="text-muted-foreground">(Optional)</span>
+                                    </Trans>
                                     <Tooltip>
                                       <TooltipTrigger type="button">
                                         <InfoIcon className="mx-2 h-4 w-4" />
@@ -444,7 +480,22 @@ export const EnvelopeDistributeDialog = ({
 
                     <ul className="ml-2 mt-1 list-inside list-disc">
                       {recipientsMissingSignatureFields.map((recipient) => (
-                        <li key={recipient.id}>{recipient.email}</li>
+                        <li key={recipient.id}>
+                          {recipient.email || recipient.name || t`Recipient ${recipient.index + 1}`}
+                        </li>
+                      ))}
+                    </ul>
+                  </AlertDescription>
+                ))
+                .with('MISSING_REQUIRED_EMAIL', () => (
+                  <AlertDescription>
+                    <Trans>The following recipients require an email address:</Trans>
+
+                    <ul className="ml-2 mt-1 list-inside list-disc">
+                      {recipientsMissingRequiredEmail.map((recipient) => (
+                        <li key={recipient.id}>
+                          {recipient.email || recipient.name || t`Recipient ${recipient.index + 1}`}
+                        </li>
                       ))}
                     </ul>
                   </AlertDescription>

apps/remix/app/components/dialogs/envelope-item-delete-dialog.tsx

@@ -117,7 +117,7 @@ export const EnvelopeItemDeleteDialog = ({
 
             <DialogDescription className="mt-4">
               <Trans>
-                You cannot delete this item because the document has been sent to recipients
+                You cannot delete this item because the document has been sent to recipients.
               </Trans>
             </DialogDescription>
           </DialogHeader>

apps/remix/app/components/dialogs/organisation-email-domain-records-dialog.tsx

@@ -121,7 +121,7 @@ export const OrganisationEmailDomainRecordContent = ({ records }: { records: Dom
             <Trans>
               Once you update your DNS records, it may take up to 48 hours for it to be propogated.
               Once the DNS propagation is complete you will need to come back and press the "Sync"
-              domains button
+              domains button.
             </Trans>
           </AlertDescription>
         </Alert>

apps/remix/app/components/dialogs/organisation-member-update-dialog.tsx

@@ -148,8 +148,8 @@ export const OrganisationMemberUpdateDialog = ({
 
           <DialogDescription className="mt-4">
             <Trans>
-              You are currently updating{' '}
-              <span className="font-bold">{organisationMemberName}.</span>
+              You are currently updating <span className="font-bold">{organisationMemberName}</span>
+              .
             </Trans>
           </DialogDescription>
         </DialogHeader>

apps/remix/app/components/dialogs/sign-field-checkbox-dialog.tsx

@@ -82,9 +82,7 @@ export const SignFieldCheckboxDialog = createCallable<
     <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
       <DialogContent position="center">
         <DialogHeader>
-          <DialogTitle>
-            <Trans>Sign Checkbox Field</Trans>
-          </DialogTitle>
+          <DialogTitle>{fieldMeta.label || <Trans>Select Options</Trans>}</DialogTitle>
 
           <DialogDescription
             className={cn('mt-4', {
@@ -143,7 +141,7 @@ export const SignFieldCheckboxDialog = createCallable<
                             <div className="flex items-center">
                               <Checkbox
                                 id={`checkbox-value-${index}`}
-                                className="data-[state=checked]:bg-primary border-foreground/30 h-5 w-5"
+                                className="h-5 w-5 border-foreground/30 data-[state=checked]:bg-primary"
                                 checked={field.value.checked}
                                 onCheckedChange={(checked) => {
                                   field.onChange({
@@ -154,7 +152,7 @@ export const SignFieldCheckboxDialog = createCallable<
                               />
 
                               <label
-                                className="text-muted-foreground ml-2 w-full text-sm"
+                                className="ml-2 w-full text-sm text-muted-foreground"
                                 htmlFor={`checkbox-value-${index}`}
                               >
                                 {value.value}
@@ -174,7 +172,7 @@ export const SignFieldCheckboxDialog = createCallable<
                 </Button>
 
                 <Button type="submit">
-                  <Trans>Sign</Trans>
+                  <Trans>Confirm</Trans>
                 </Button>
               </DialogFooter>
             </fieldset>

apps/remix/app/components/dialogs/sign-field-email-dialog.tsx

@@ -24,7 +24,10 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 
 const ZSignFieldEmailFormSchema = z.object({
-  email: z.string().min(1, { message: msg`Email is required`.id }),
+  email: z
+    .string()
+    .email()
+    .min(1, { message: msg`Email is required`.id }),
 });
 
 type TSignFieldEmailFormSchema = z.infer<typeof ZSignFieldEmailFormSchema>;
@@ -47,11 +50,11 @@ export const SignFieldEmailDialog = createCallable<SignFieldEmailDialogProps, st
         <DialogContent>
           <DialogHeader>
             <DialogTitle>
-              <Trans>Sign Email</Trans>
+              <Trans>Enter Email</Trans>
             </DialogTitle>
 
             <DialogDescription className="mt-4">
-              <Trans>Sign your email into the field</Trans>
+              <Trans>Please enter your email address</Trans>
             </DialogDescription>
           </DialogHeader>
 
@@ -80,7 +83,7 @@ export const SignFieldEmailDialog = createCallable<SignFieldEmailDialogProps, st
                   </Button>
 
                   <Button type="submit">
-                    <Trans>Sign</Trans>
+                    <Trans>Enter</Trans>
                   </Button>
                 </DialogFooter>
               </fieldset>

apps/remix/app/components/dialogs/sign-field-initials-dialog.tsx

@@ -48,11 +48,11 @@ export const SignFieldInitialsDialog = createCallable<SignFieldInitialsDialogPro
         <DialogContent>
           <DialogHeader>
             <DialogTitle>
-              <Trans>Sign Initials</Trans>
+              <Trans>Enter Initials</Trans>
             </DialogTitle>
 
             <DialogDescription className="mt-4">
-              <Trans>Sign your initials into the field</Trans>
+              <Trans>Please enter your initials</Trans>
             </DialogDescription>
           </DialogHeader>
 
@@ -84,7 +84,7 @@ export const SignFieldInitialsDialog = createCallable<SignFieldInitialsDialogPro
                   </Button>
 
                   <Button type="submit">
-                    <Trans>Sign</Trans>
+                    <Trans>Enter</Trans>
                   </Button>
                 </DialogFooter>
               </fieldset>

apps/remix/app/components/dialogs/sign-field-name-dialog.tsx

@@ -47,11 +47,11 @@ export const SignFieldNameDialog = createCallable<SignFieldNameDialogProps, stri
         <DialogContent>
           <DialogHeader>
             <DialogTitle>
-              <Trans>Sign Name</Trans>
+              <Trans>Enter Name</Trans>
             </DialogTitle>
 
             <DialogDescription className="mt-4">
-              <Trans>Sign your full name into the field</Trans>
+              <Trans>Please enter your full name</Trans>
             </DialogDescription>
           </DialogHeader>
 
@@ -80,7 +80,7 @@ export const SignFieldNameDialog = createCallable<SignFieldNameDialogProps, stri
                   </Button>
 
                   <Button type="submit">
-                    <Trans>Sign</Trans>
+                    <Trans>Enter</Trans>
                   </Button>
                 </DialogFooter>
               </fieldset>

apps/remix/app/components/dialogs/sign-field-number-dialog.tsx

@@ -22,7 +22,6 @@ import {
   FormControl,
   FormField,
   FormItem,
-  FormLabel,
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
@@ -107,12 +106,10 @@ export const SignFieldNumberDialog = createCallable<SignFieldNumberDialogProps,
       <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>
-              <Trans>Sign Number Field</Trans>
-            </DialogTitle>
+            <DialogTitle>{fieldMeta.label || <Trans>Enter Number</Trans>}</DialogTitle>
 
             <DialogDescription className="mt-4">
-              <Trans>Insert a value into the number field</Trans>
+              <Trans>Please enter a number</Trans>
             </DialogDescription>
           </DialogHeader>
 
@@ -127,8 +124,6 @@ export const SignFieldNumberDialog = createCallable<SignFieldNumberDialogProps,
                   name="number"
                   render={({ field, fieldState }) => (
                     <FormItem>
-                      {fieldMeta.label && <FormLabel>{fieldMeta.label}</FormLabel>}
-
                       <FormControl>
                         <Input
                           placeholder={fieldMeta.placeholder ?? t`Enter your number here`}
@@ -150,7 +145,7 @@ export const SignFieldNumberDialog = createCallable<SignFieldNumberDialogProps,
                   </Button>
 
                   <Button type="submit">
-                    <Trans>Sign</Trans>
+                    <Trans>Enter</Trans>
                   </Button>
                 </DialogFooter>
               </fieldset>

apps/remix/app/components/dialogs/sign-field-signature-dialog.tsx

@@ -17,6 +17,7 @@ import { DocumentSigningDisclosure } from '../general/document-signing/document-
 
 export type SignFieldSignatureDialogProps = {
   initialSignature?: string;
+  fullName?: string;
   typedSignatureEnabled?: boolean;
   uploadSignatureEnabled?: boolean;
   drawSignatureEnabled?: boolean;
@@ -28,6 +29,7 @@ export const SignFieldSignatureDialog = createCallable<
 >(
   ({
     call,
+    fullName,
     typedSignatureEnabled,
     uploadSignatureEnabled,
     drawSignatureEnabled,
@@ -46,6 +48,7 @@ export const SignFieldSignatureDialog = createCallable<
             </DialogHeader>
 
             <SignaturePad
+              fullName={fullName}
               value={localSignature ?? ''}
               onChange={({ value }) => setLocalSignature(value)}
               typedSignatureEnabled={typedSignatureEnabled}

apps/remix/app/components/dialogs/sign-field-text-dialog.tsx

@@ -22,7 +22,6 @@ import {
   FormControl,
   FormField,
   FormItem,
-  FormLabel,
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Textarea } from '@documenso/ui/primitives/textarea';
@@ -52,12 +51,10 @@ export const SignFieldTextDialog = createCallable<SignFieldTextDialogProps, stri
       <Dialog open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>
-              <Trans>Sign Text Field</Trans>
-            </DialogTitle>
+            <DialogTitle>{fieldMeta?.label || <Trans>Enter Text</Trans>}</DialogTitle>
 
             <DialogDescription className="mt-4">
-              <Trans>Insert a value into the text field</Trans>
+              <Trans>Please enter a value</Trans>
             </DialogDescription>
           </DialogHeader>
 
@@ -72,8 +69,6 @@ export const SignFieldTextDialog = createCallable<SignFieldTextDialogProps, stri
                   name="text"
                   render={({ field, fieldState }) => (
                     <FormItem>
-                      {fieldMeta?.label && <FormLabel>{fieldMeta?.label}</FormLabel>}
-
                       <FormControl>
                         <Textarea
                           id="custom-text"
@@ -89,7 +84,7 @@ export const SignFieldTextDialog = createCallable<SignFieldTextDialogProps, stri
                       {fieldMeta?.characterLimit !== undefined &&
                         fieldMeta?.characterLimit > 0 &&
                         !fieldState.error && (
-                          <div className="text-muted-foreground text-sm">
+                          <div className="text-sm text-muted-foreground">
                             <Plural
                               value={fieldMeta?.characterLimit - (field.value?.length ?? 0)}
                               one="# character remaining"
@@ -107,7 +102,7 @@ export const SignFieldTextDialog = createCallable<SignFieldTextDialogProps, stri
                   </Button>
 
                   <Button type="submit">
-                    <Trans>Sign</Trans>
+                    <Trans>Enter</Trans>
                   </Button>
                 </DialogFooter>
               </fieldset>

apps/remix/app/components/dialogs/team-delete-dialog.tsx

@@ -8,6 +8,7 @@ import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router';
 import { z } from 'zod';
 
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { AppError } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
@@ -30,6 +31,13 @@ import {
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
 import type { Toast } from '@documenso/ui/primitives/use-toast';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -53,26 +61,34 @@ export const TeamDeleteDialog = ({
   const { toast } = useToast();
   const { refreshSession } = useSession();
 
+  const currentOrganisation = useCurrentOrganisation();
+
   const deleteMessage = _(msg`delete ${teamName}`);
 
+  const filteredTeams = currentOrganisation.teams.filter((team) => team.id !== teamId);
+
   const ZDeleteTeamFormSchema = z.object({
     teamName: z.literal(deleteMessage, {
       errorMap: () => ({ message: _(msg`You must enter '${deleteMessage}' to proceed`) }),
     }),
+    transferTeamId: z.string().optional(),
   });
 
   const form = useForm({
     resolver: zodResolver(ZDeleteTeamFormSchema),
     defaultValues: {
       teamName: '',
+      transferTeamId: undefined,
     },
   });
 
   const { mutateAsync: deleteTeam } = trpc.team.delete.useMutation();
 
-  const onFormSubmit = async () => {
+  const onFormSubmit = async (data: z.infer<typeof ZDeleteTeamFormSchema>) => {
     try {
-      await deleteTeam({ teamId });
+      const transferTeamId = data.transferTeamId ? parseInt(data.transferTeamId, 10) : undefined;
+
+      await deleteTeam({ teamId, transferTeamId: transferTeamId || undefined });
 
       await refreshSession();
 
@@ -168,6 +184,43 @@ export const TeamDeleteDialog = ({
                 )}
               />
 
+              {filteredTeams.length > 0 && (
+                <FormField
+                  control={form.control}
+                  name="transferTeamId"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        <Trans>Transfer documents to a different team</Trans>
+                      </FormLabel>
+                      <FormControl>
+                        <Select {...field} onValueChange={field.onChange}>
+                          <SelectTrigger>
+                            <SelectValue
+                              placeholder={_(msg`Don't transfer (Delete all documents)`)}
+                            />
+                          </SelectTrigger>
+
+                          <SelectContent>
+                            <SelectItem value="-1">
+                              <Trans>Don't transfer (Delete all documents)</Trans>
+                            </SelectItem>
+
+                            {filteredTeams.map((team) => (
+                              <SelectItem key={team.id} value={team.id.toString()}>
+                                {team.name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
               <DialogFooter>
                 <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
                   <Trans>Cancel</Trans>

apps/remix/app/components/dialogs/team-member-update-dialog.tsx

@@ -146,7 +146,7 @@ export const TeamMemberUpdateDialog = ({
 
           <DialogDescription>
             <Trans>
-              You are currently updating <span className="font-bold">{memberName}.</span>
+              You are currently updating <span className="font-bold">{memberName}</span>.
             </Trans>
           </DialogDescription>
         </DialogHeader>

apps/remix/app/components/dialogs/template-bulk-send-dialog.tsx

@@ -103,8 +103,8 @@ export const TemplateBulkSendDialog = ({
       console.error(err);
 
       toast({
-        title: 'Error',
-        description: 'Failed to upload CSV. Please check the file format and try again.',
+        title: _(msg`Error`),
+        description: _(msg`Failed to upload CSV. Please check the file format and try again.`),
         variant: 'destructive',
       });
     }
@@ -137,12 +137,12 @@ export const TemplateBulkSendDialog = ({
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
-            <div className="bg-muted/70 rounded-lg border p-4">
+            <div className="rounded-lg border bg-muted/70 p-4">
               <h3 className="text-sm font-medium">
                 <Trans>CSV Structure</Trans>
               </h3>
 
-              <p className="text-muted-foreground mt-1 text-sm">
+              <p className="mt-1 text-sm text-muted-foreground">
                 <Trans>
                   For each recipient, provide their email (required) and name (optional) in separate
                   columns. Download the template CSV below for the correct format.
@@ -153,7 +153,7 @@ export const TemplateBulkSendDialog = ({
                 <Trans>Current recipients:</Trans>
               </p>
 
-              <ul className="text-muted-foreground mt-2 list-inside list-disc text-sm">
+              <ul className="mt-2 list-inside list-disc text-sm text-muted-foreground">
                 {recipients.map((recipient, index) => (
                   <li key={index}>
                     {recipient.name ? `${recipient.name} (${recipient.email})` : recipient.email}
@@ -167,7 +167,7 @@ export const TemplateBulkSendDialog = ({
                 <Trans>Download Template CSV</Trans>
               </Button>
 
-              <p className="text-muted-foreground text-xs">
+              <p className="text-xs text-muted-foreground">
                 <Trans>Pre-formatted CSV template with example data.</Trans>
               </p>
             </div>
@@ -200,14 +200,14 @@ export const TemplateBulkSendDialog = ({
                     ) : (
                       <div className="flex h-10 items-center rounded-md border px-3">
                         <div className="flex flex-1 items-center gap-2">
-                          <FileIcon className="text-muted-foreground h-4 w-4" />
+                          <FileIcon className="h-4 w-4 text-muted-foreground" />
                           <span className="flex-1 truncate text-sm">{value.name}</span>
                         </div>
 
                         <Button
                           type="button"
                           variant="link"
-                          className="text-destructive hover:text-destructive p-0 text-xs"
+                          className="p-0 text-xs text-destructive hover:text-destructive"
                           onClick={() => onChange(null)}
                           disabled={form.formState.isSubmitting}
                         >
@@ -220,9 +220,9 @@ export const TemplateBulkSendDialog = ({
                     )}
                   </FormControl>
 
-                  {error && <p className="text-destructive text-sm">{error.message}</p>}
+                  {error && <p className="text-sm text-destructive">{error.message}</p>}
 
-                  <p className="text-muted-foreground text-xs">
+                  <p className="text-xs text-muted-foreground">
                     <Trans>
                       Maximum file size: 4MB. Maximum 100 rows per upload. Blank values will use
                       template defaults.
@@ -247,7 +247,7 @@ export const TemplateBulkSendDialog = ({
 
                       <label
                         htmlFor="send-immediately"
-                        className="text-muted-foreground ml-2 flex items-center text-sm"
+                        className="ml-2 flex items-center text-sm text-muted-foreground"
                       >
                         <Trans>Send documents to recipients immediately</Trans>
                       </label>

apps/remix/app/components/dialogs/template-create-dialog.tsx

@@ -1,136 +0,0 @@
-import { useState } from 'react';
-
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { FilePlus, Loader } from 'lucide-react';
-import { useNavigate } from 'react-router';
-
-import { useSession } from '@documenso/lib/client-only/providers/session';
-import { formatTemplatesPath } from '@documenso/lib/utils/teams';
-import { trpc } from '@documenso/trpc/react';
-import type { TCreateTemplatePayloadSchema } from '@documenso/trpc/server/template-router/schema';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@documenso/ui/primitives/dialog';
-import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { useCurrentTeam } from '~/providers/team';
-
-type TemplateCreateDialogProps = {
-  folderId?: string;
-};
-
-export const TemplateCreateDialog = ({ folderId }: TemplateCreateDialogProps) => {
-  const navigate = useNavigate();
-
-  const { user } = useSession();
-  const { toast } = useToast();
-  const { _ } = useLingui();
-
-  const team = useCurrentTeam();
-
-  const { mutateAsync: createTemplate } = trpc.template.createTemplate.useMutation();
-
-  const [showTemplateCreateDialog, setShowTemplateCreateDialog] = useState(false);
-  const [isUploadingFile, setIsUploadingFile] = useState(false);
-
-  const onFileDrop = async (files: File[]) => {
-    const file = files[0];
-
-    if (isUploadingFile) {
-      return;
-    }
-
-    setIsUploadingFile(true);
-
-    try {
-      const payload = {
-        title: file.name,
-        folderId: folderId,
-      } satisfies TCreateTemplatePayloadSchema;
-
-      const formData = new FormData();
-
-      formData.append('payload', JSON.stringify(payload));
-      formData.append('file', file);
-
-      const { envelopeId: id } = await createTemplate(formData);
-
-      toast({
-        title: _(msg`Template document uploaded`),
-        description: _(
-          msg`Your document has been uploaded successfully. You will be redirected to the template page.`,
-        ),
-        duration: 5000,
-      });
-
-      setShowTemplateCreateDialog(false);
-
-      await navigate(`${formatTemplatesPath(team.url)}/${id}/edit`);
-    } catch {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`Please try again later.`),
-        variant: 'destructive',
-      });
-
-      setIsUploadingFile(false);
-    }
-  };
-
-  return (
-    <Dialog
-      open={showTemplateCreateDialog}
-      onOpenChange={(value) => !isUploadingFile && setShowTemplateCreateDialog(value)}
-    >
-      <DialogTrigger asChild>
-        <Button className="cursor-pointer" disabled={!user.emailVerified}>
-          <FilePlus className="-ml-1 mr-2 h-4 w-4" />
-          <Trans>Template (Legacy)</Trans>
-        </Button>
-      </DialogTrigger>
-
-      <DialogContent className="w-full max-w-xl">
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>New Template</Trans>
-          </DialogTitle>
-          <DialogDescription>
-            <Trans>
-              Templates allow you to quickly generate documents with pre-filled recipients and
-              fields.
-            </Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="relative">
-          <DocumentDropzone className="h-[40vh]" onDrop={onFileDrop} type="template" />
-
-          {isUploadingFile && (
-            <div className="bg-background/50 absolute inset-0 flex items-center justify-center rounded-lg">
-              <Loader className="text-muted-foreground h-12 w-12 animate-spin" />
-            </div>
-          )}
-        </div>
-
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button type="button" variant="secondary" disabled={isUploadingFile}>
-              <Trans>Close</Trans>
-            </Button>
-          </DialogClose>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};

apps/remix/app/components/dialogs/template-use-dialog.tsx

@@ -21,6 +21,7 @@ import {
   SKIP_QUERY_BATCH_META,
 } from '@documenso/lib/constants/trpc';
 import { AppError } from '@documenso/lib/errors/app-error';
+import { ZRecipientEmailSchema } from '@documenso/lib/types/recipient';
 import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -65,7 +66,7 @@ const ZAddRecipientsForNewDocumentSchema = z.object({
   recipients: z.array(
     z.object({
       id: z.number(),
-      email: z.string().email(),
+      email: ZRecipientEmailSchema,
       name: z.string(),
       signingOrder: z.number().optional(),
     }),
@@ -100,12 +101,29 @@ export function TemplateUseDialog({
 
   const [open, setOpen] = useState(false);
 
-  const form = useForm<TAddRecipientsForNewDocumentSchema>({
-    resolver: zodResolver(ZAddRecipientsForNewDocumentSchema),
-    defaultValues: {
+  const { data: response, isLoading: isLoadingEnvelopeItems } = trpc.envelope.item.getMany.useQuery(
+    {
+      envelopeId,
+    },
+    {
+      placeholderData: (previousData) => previousData,
+      ...SKIP_QUERY_BATCH_META,
+      ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+      enabled: open,
+    },
+  );
+
+  const envelopeItems = response?.data ?? [];
+
+  const generateDefaultFormValues = () => {
+    return {
       distributeDocument: false,
       useCustomDocument: false,
-      customDocumentData: [],
+      customDocumentData: envelopeItems.map((item) => ({
+        title: item.title,
+        data: undefined,
+        envelopeItemId: item.id,
+      })),
       recipients: recipients
         .sort((a, b) => (a.signingOrder || 0) - (b.signingOrder || 0))
         .map((recipient) => {
@@ -124,7 +142,12 @@ export function TemplateUseDialog({
             signingOrder: recipient.signingOrder ?? undefined,
           };
         }),
-    },
+    };
+  };
+
+  const form = useForm<TAddRecipientsForNewDocumentSchema>({
+    resolver: zodResolver(ZAddRecipientsForNewDocumentSchema),
+    defaultValues: generateDefaultFormValues(),
   });
 
   const { replace, fields: localCustomDocumentData } = useFieldArray({
@@ -132,19 +155,6 @@ export function TemplateUseDialog({
     name: 'customDocumentData',
   });
 
-  const { data: response, isLoading: isLoadingEnvelopeItems } = trpc.envelope.item.getMany.useQuery(
-    {
-      envelopeId,
-    },
-    {
-      placeholderData: (previousData) => previousData,
-      ...SKIP_QUERY_BATCH_META,
-      ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
-    },
-  );
-
-  const envelopeItems = response?.data ?? [];
-
   const { mutateAsync: createDocumentFromTemplate } =
     trpc.template.createDocumentFromTemplate.useMutation();
 
@@ -214,8 +224,8 @@ export function TemplateUseDialog({
   });
 
   useEffect(() => {
-    if (!open) {
-      form.reset();
+    if (open) {
+      form.reset(generateDefaultFormValues());
     }
   }, [open, form]);
 
@@ -322,7 +332,7 @@ export function TemplateUseDialog({
                             <Input
                               {...field}
                               aria-label="Name"
-                              placeholder={recipients[index].name || _(msg`Name`)}
+                              placeholder={recipients[index].name || _(msg`Recipient ${index + 1}`)}
                             />
                           </FormControl>
                           <FormMessage />
@@ -349,7 +359,7 @@ export function TemplateUseDialog({
 
                             {documentDistributionMethod === DocumentDistributionMethod.EMAIL && (
                               <label
-                                className="text-muted-foreground ml-2 flex items-center text-sm"
+                                className="ml-2 flex items-center text-sm text-muted-foreground"
                                 htmlFor="distributeDocument"
                               >
                                 <Trans>Send document</Trans>
@@ -358,7 +368,7 @@ export function TemplateUseDialog({
                                     <InfoIcon className="mx-1 h-4 w-4" />
                                   </TooltipTrigger>
 
-                                  <TooltipContent className="text-muted-foreground z-[99999] max-w-md space-y-2 p-4">
+                                  <TooltipContent className="z-[99999] max-w-md space-y-2 p-4 text-muted-foreground">
                                     <p>
                                       <Trans>
                                         The document will be immediately sent to recipients if this
@@ -378,7 +388,7 @@ export function TemplateUseDialog({
 
                             {documentDistributionMethod === DocumentDistributionMethod.NONE && (
                               <label
-                                className="text-muted-foreground ml-2 flex items-center text-sm"
+                                className="ml-2 flex items-center text-sm text-muted-foreground"
                                 htmlFor="distributeDocument"
                               >
                                 <Trans>Create as pending</Trans>
@@ -386,7 +396,7 @@ export function TemplateUseDialog({
                                   <TooltipTrigger type="button">
                                     <InfoIcon className="mx-1 h-4 w-4" />
                                   </TooltipTrigger>
-                                  <TooltipContent className="text-muted-foreground z-[99999] max-w-md space-y-2 p-4">
+                                  <TooltipContent className="z-[99999] max-w-md space-y-2 p-4 text-muted-foreground">
                                     <p>
                                       <Trans>
                                         Create the document as pending and ready to sign.
@@ -432,7 +442,7 @@ export function TemplateUseDialog({
                           }}
                         />
                         <label
-                          className="text-muted-foreground ml-2 flex items-center text-sm"
+                          className="ml-2 flex items-center text-sm text-muted-foreground"
                           htmlFor="useCustomDocument"
                         >
                           <Trans>Upload custom document</Trans>
@@ -440,7 +450,7 @@ export function TemplateUseDialog({
                             <TooltipTrigger type="button">
                               <InfoIcon className="mx-1 h-4 w-4" />
                             </TooltipTrigger>
-                            <TooltipContent className="text-muted-foreground z-[99999] max-w-md space-y-2 p-4">
+                            <TooltipContent className="z-[99999] max-w-md space-y-2 p-4 text-muted-foreground">
                               <p>
                                 <Trans>
                                   Upload a custom document to use instead of the template's default
@@ -470,19 +480,19 @@ export function TemplateUseDialog({
                               <FormControl>
                                 <div
                                   key={item.id}
-                                  className="border-border bg-card hover:bg-accent/10 flex items-center gap-4 rounded-lg border p-4 transition-colors"
+                                  className="flex items-center gap-4 rounded-lg border border-border bg-card p-4 transition-colors hover:bg-accent/10"
                                 >
                                   <div className="flex-shrink-0">
-                                    <div className="bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg">
-                                      <FileTextIcon className="text-primary h-5 w-5" />
+                                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
+                                      <FileTextIcon className="h-5 w-5 text-primary" />
                                     </div>
                                   </div>
 
                                   <div className="min-w-0 flex-1">
-                                    <h4 className="text-foreground truncate text-sm font-medium">
+                                    <h4 className="truncate text-sm font-medium text-foreground">
                                       {item.title}
                                     </h4>
-                                    <p className="text-muted-foreground mt-0.5 text-xs">
+                                    <p className="mt-0.5 text-xs text-muted-foreground">
                                       {field.value ? (
                                         <div>
                                           <Trans>

apps/remix/app/components/dialogs/webhook-create-dialog.tsx

@@ -219,9 +219,8 @@ export const WebhookCreateDialog = ({ trigger, ...props }: WebhookCreateDialogPr
                     <FormDescription>
                       <Trans>
                         A secret that will be sent to your URL so you can verify that the request
-                        has been sent by Documenso
+                        has been sent by Documenso.
                       </Trans>
-                      .
                     </FormDescription>
                     <FormMessage />
                   </FormItem>

apps/remix/app/components/embed/authoring/configure-document-view.types.ts

@@ -5,6 +5,7 @@ import {
   ZDocumentMetaDateFormatSchema,
   ZDocumentMetaLanguageSchema,
 } from '@documenso/lib/types/document-meta';
+import { ZRecipientEmailSchema } from '@documenso/lib/types/recipient';
 import { DocumentDistributionMethod } from '@documenso/prisma/generated/types';
 
 // Define the schema for configuration
@@ -55,7 +56,7 @@ export const ZConfigureTemplateEmbedFormSchema = ZConfigureEmbedFormSchema.exten
       nativeId: z.number().optional(),
       formId: z.string(),
       name: z.string(),
-      email: z.union([z.string().length(0), z.string().email('Invalid email address')]),
+      email: ZRecipientEmailSchema,
       role: z.enum(['SIGNER', 'CC', 'APPROVER', 'VIEWER', 'ASSISTANT']),
       signingOrder: z.number().optional(),
       disabled: z.boolean().optional(),

apps/remix/app/components/embed/authoring/configure-fields-view.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { EnvelopeItem, FieldType } from '@prisma/client';
@@ -229,8 +230,8 @@ export const ConfigureFieldsView = ({
         setFieldClipboard(lastActiveField);
 
         toast({
-          title: 'Copied field',
-          description: 'Copied field to clipboard',
+          title: _(msg`Copied field`),
+          description: _(msg`Copied field to clipboard`),
         });
       }
     },

apps/remix/app/components/embed/embed-direct-template-client-page.tsx

@@ -438,6 +438,7 @@ export const EmbedDirectTemplateClientPage = ({
                       className="mt-2"
                       disabled={isThrottled || isSubmitting}
                       disableAnimation
+                      fullName={fullName}
                       value={signature ?? ''}
                       onChange={(v) => setSignature(v ?? '')}
                       typedSignatureEnabled={metadata?.typedSignatureEnabled}

apps/remix/app/components/embed/embed-document-signing-page-v1.tsx

@@ -455,6 +455,7 @@ export const EmbedSignDocumentV1ClientPage = ({
                             className="mt-2"
                             disabled={isThrottled || isSubmitting}
                             disableAnimation
+                            fullName={fullName}
                             value={signature ?? ''}
                             onChange={(v) => setSignature(v ?? '')}
                             typedSignatureEnabled={metadata?.typedSignatureEnabled}

apps/remix/app/components/embed/multisign/multi-sign-document-signing-view.tsx

@@ -150,8 +150,8 @@ export const MultiSignDocumentSigningView = ({
       onDocumentError?.();
 
       toast({
-        title: 'Error',
-        description: 'Failed to complete the document. Please try again.',
+        title: _(msg`Error`),
+        description: _(msg`Failed to complete the document. Please try again.`),
         variant: 'destructive',
       });
     } finally {
@@ -319,6 +319,7 @@ export const MultiSignDocumentSigningView = ({
                                     className="mt-2"
                                     disabled={isSubmitting}
                                     disableAnimation
+                                    fullName={fullName}
                                     value={signature ?? ''}
                                     onChange={(v) => setSignature(v ?? '')}
                                     typedSignatureEnabled={

apps/remix/app/components/forms/document-preferences-form.tsx

@@ -58,6 +58,8 @@ export type TDocumentPreferencesFormSchema = {
   includeSigningCertificate: boolean | null;
   includeAuditLog: boolean | null;
   signatureTypes: DocumentSignatureType[];
+  delegateDocumentOwnership: boolean | null;
+  aiFeaturesEnabled: boolean | null;
 };
 
 type SettingsSubset = Pick<
@@ -72,11 +74,14 @@ type SettingsSubset = Pick<
   | 'typedSignatureEnabled'
   | 'uploadSignatureEnabled'
   | 'drawSignatureEnabled'
+  | 'delegateDocumentOwnership'
+  | 'aiFeaturesEnabled'
 >;
 
 export type DocumentPreferencesFormProps = {
   settings: SettingsSubset;
   canInherit: boolean;
+  isAiFeaturesConfigured?: boolean;
   onFormSubmit: (data: TDocumentPreferencesFormSchema) => Promise<void>;
 };
 
@@ -84,6 +89,7 @@ export const DocumentPreferencesForm = ({
   settings,
   onFormSubmit,
   canInherit,
+  isAiFeaturesConfigured = false,
 }: DocumentPreferencesFormProps) => {
   const { t } = useLingui();
   const { user, organisations } = useSession();
@@ -105,6 +111,8 @@ export const DocumentPreferencesForm = ({
     signatureTypes: z.array(z.nativeEnum(DocumentSignatureType)).min(canInherit ? 0 : 1, {
       message: msg`At least one signature type must be enabled`.id,
     }),
+    delegateDocumentOwnership: z.boolean().nullable(),
+    aiFeaturesEnabled: z.boolean().nullable(),
   });
 
   const form = useForm<TDocumentPreferencesFormSchema>({
@@ -120,6 +128,8 @@ export const DocumentPreferencesForm = ({
       includeSigningCertificate: settings.includeSigningCertificate,
       includeAuditLog: settings.includeAuditLog,
       signatureTypes: extractTeamSignatureSettings({ ...settings }),
+      delegateDocumentOwnership: settings.delegateDocumentOwnership,
+      aiFeaturesEnabled: settings.aiFeaturesEnabled,
     },
     resolver: zodResolver(ZDocumentPreferencesFormSchema),
   });
@@ -312,7 +322,7 @@ export const DocumentPreferencesForm = ({
                     }))}
                     selectedValues={field.value}
                     onChange={field.onChange}
-                    className="bg-background w-full"
+                    className="w-full bg-background"
                     enableSearch={false}
                     emptySelectionPlaceholder={
                       canInherit ? t`Inherit from organisation` : t`Select signature types`
@@ -378,7 +388,7 @@ export const DocumentPreferencesForm = ({
                   </FormControl>
 
                   <div className="pt-2">
-                    <div className="text-muted-foreground text-xs font-medium">
+                    <div className="text-xs font-medium text-muted-foreground">
                       <Trans>Preview</Trans>
                     </div>
 
@@ -509,6 +519,105 @@ export const DocumentPreferencesForm = ({
             )}
           />
 
+          <FormField
+            control={form.control}
+            name="delegateDocumentOwnership"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Delegate Document Ownership</Trans>
+                </FormLabel>
+
+                <Select
+                  {...field}
+                  value={field.value === null ? '-1' : field.value.toString()}
+                  onValueChange={(value) =>
+                    field.onChange(value === 'true' ? true : value === 'false' ? false : null)
+                  }
+                >
+                  <SelectTrigger className="bg-background text-muted-foreground">
+                    <SelectValue />
+                  </SelectTrigger>
+
+                  <SelectContent>
+                    <SelectItem value="true">
+                      <Trans>Yes</Trans>
+                    </SelectItem>
+
+                    <SelectItem value="false">
+                      <Trans>No</Trans>
+                    </SelectItem>
+
+                    {canInherit && (
+                      <SelectItem value={'-1'}>
+                        <Trans>Inherit from organisation</Trans>
+                      </SelectItem>
+                    )}
+                  </SelectContent>
+                </Select>
+
+                <FormDescription>
+                  <Trans>
+                    Enable team API tokens to delegate document ownership to another team member.
+                  </Trans>
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
+          {isAiFeaturesConfigured && (
+            <FormField
+              control={form.control}
+              name="aiFeaturesEnabled"
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>
+                    <Trans>AI Features</Trans>
+                  </FormLabel>
+
+                  <FormControl>
+                    <Select
+                      {...field}
+                      value={field.value === null ? '-1' : field.value.toString()}
+                      onValueChange={(value) =>
+                        field.onChange(value === 'true' ? true : value === 'false' ? false : null)
+                      }
+                    >
+                      <SelectTrigger className="bg-background text-muted-foreground">
+                        <SelectValue />
+                      </SelectTrigger>
+
+                      <SelectContent>
+                        <SelectItem value="true">
+                          <Trans>Enabled</Trans>
+                        </SelectItem>
+
+                        <SelectItem value="false">
+                          <Trans>Disabled</Trans>
+                        </SelectItem>
+
+                        {canInherit && (
+                          <SelectItem value={'-1'}>
+                            <Trans>Inherit from organisation</Trans>
+                          </SelectItem>
+                        )}
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+
+                  <FormDescription>
+                    <Trans>
+                      Enable AI-powered features such as automatic recipient detection. When
+                      enabled, document content will be sent to AI providers. We only use providers
+                      that do not retain data for training and prefer European regions where
+                      available.
+                    </Trans>
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
+          )}
+
           <div className="flex flex-row justify-end space-x-4">
             <Button type="submit" loading={form.formState.isSubmitting}>
               <Trans>Update</Trans>

apps/remix/app/components/forms/profile.tsx

@@ -110,7 +110,7 @@ export const ProfileForm = ({ className }: ProfileFormProps) => {
             <Label htmlFor="email" className="text-muted-foreground">
               <Trans>Email</Trans>
             </Label>
-            <Input id="email" type="email" className="bg-muted mt-2" value={user.email} disabled />
+            <Input id="email" type="email" className="mt-2 bg-muted" value={user.email} disabled />
           </div>
 
           <FormField
@@ -124,6 +124,7 @@ export const ProfileForm = ({ className }: ProfileFormProps) => {
                 <FormControl>
                   <SignaturePadDialog
                     disabled={isSubmitting}
+                    fullName={user.name ?? ''}
                     value={value}
                     onChange={(v) => onChange(v ?? '')}
                   />

apps/remix/app/components/forms/signin.tsx

@@ -201,7 +201,7 @@ export const SignInForm = ({
         .otherwise(() => handleFallbackErrorMessages(error.code));
 
       toast({
-        title: 'Something went wrong',
+        title: _(msg`Something went wrong`),
         description: _(errorMessage),
         duration: 10000,
         variant: 'destructive',
@@ -244,11 +244,11 @@ export const SignInForm = ({
       const errorMessage = match(error.code)
         .with(
           AuthenticationErrorCode.InvalidCredentials,
-          () => msg`The email or password provided is incorrect`,
+          () => msg`The email or password provided is incorrect.`,
         )
         .with(
           AuthenticationErrorCode.InvalidTwoFactorCode,
-          () => msg`The two-factor authentication code provided is incorrect`,
+          () => msg`The two-factor authentication code provided is incorrect.`,
         )
         .otherwise(() => handleFallbackErrorMessages(error.code));
 
@@ -368,7 +368,7 @@ export const SignInForm = ({
                 <p className="mt-2 text-right">
                   <Link
                     to="/forgot-password"
-                    className="text-muted-foreground text-sm duration-200 hover:opacity-70"
+                    className="text-sm text-muted-foreground duration-200 hover:opacity-70"
                   >
                     <Trans>Forgot your password?</Trans>
                   </Link>
@@ -390,11 +390,11 @@ export const SignInForm = ({
             <>
               {hasSocialAuthEnabled && (
                 <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
-                  <div className="bg-border h-px flex-1" />
-                  <span className="text-muted-foreground bg-transparent">
+                  <div className="h-px flex-1 bg-border" />
+                  <span className="bg-transparent text-muted-foreground">
                     <Trans>Or continue with</Trans>
                   </span>
-                  <div className="bg-border h-px flex-1" />
+                  <div className="h-px flex-1 bg-border" />
                 </div>
               )}
 
@@ -403,7 +403,7 @@ export const SignInForm = ({
                   type="button"
                   size="lg"
                   variant="outline"
-                  className="bg-background text-muted-foreground border"
+                  className="border bg-background text-muted-foreground"
                   disabled={isSubmitting}
                   onClick={onSignInWithGoogleClick}
                 >
@@ -417,7 +417,7 @@ export const SignInForm = ({
                   type="button"
                   size="lg"
                   variant="outline"
-                  className="bg-background text-muted-foreground border"
+                  className="border bg-background text-muted-foreground"
                   disabled={isSubmitting}
                   onClick={onSignInWithMicrosoftClick}
                 >
@@ -435,7 +435,7 @@ export const SignInForm = ({
                   type="button"
                   size="lg"
                   variant="outline"
-                  className="bg-background text-muted-foreground border"
+                  className="border bg-background text-muted-foreground"
                   disabled={isSubmitting}
                   onClick={onSignInWithOIDCClick}
                 >
@@ -452,7 +452,7 @@ export const SignInForm = ({
             variant="outline"
             disabled={isSubmitting}
             loading={isPasskeyLoading}
-            className="bg-background text-muted-foreground border"
+            className="border bg-background text-muted-foreground"
             onClick={onSignInWithPasskey}
           >
             {!isPasskeyLoading && <KeyRoundIcon className="-ml-1 mr-1 h-5 w-5" />}

apps/remix/app/components/forms/token.tsx

@@ -131,7 +131,7 @@ export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
       const errorMessage = match(error.code)
         .with(
           AppErrorCode.UNAUTHORIZED,
-          () => msg`You do not have permission to create a token for this team`,
+          () => msg`You do not have permission to create a token for this team.`,
         )
         .otherwise(() => msg`Something went wrong. Please try again later.`);
 
@@ -212,12 +212,12 @@ export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
               />
 
               <div>
-                <FormLabel className="text-muted-foreground mt-2">
+                <FormLabel className="mt-2 text-muted-foreground">
                   <Trans>Never expire</Trans>
                 </FormLabel>
                 <div className="block md:py-1.5">
                   <Switch
-                    className="bg-background mt-2"
+                    className="mt-2 bg-background"
                     checked={noExpirationDate}
                     onCheckedChange={setNoExpirationDate}
                   />
@@ -254,14 +254,14 @@ export const ApiTokenForm = ({ className, tokens }: ApiTokenFormProps) => {
             >
               <Card gradient>
                 <CardContent className="p-4">
-                  <p className="text-muted-foreground mt-2 text-sm">
+                  <p className="mt-2 text-sm text-muted-foreground">
                     <Trans>
                       Your token was created successfully! Make sure to copy it because you won't be
                       able to see it again!
                     </Trans>
                   </p>
 
-                  <p className="bg-muted-foreground/10 my-4 rounded-md px-2.5 py-1 font-mono text-sm">
+                  <p className="my-4 rounded-md bg-muted-foreground/10 px-2.5 py-1 font-mono text-sm">
                     {newlyCreatedToken.token}
                   </p>
 

apps/remix/app/components/general/animated-document-scanner.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react';
+
+import { SearchIcon } from 'lucide-react';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+export type AnimatedDocumentScannerProps = {
+  className?: string;
+  interval?: number;
+};
+
+export const AnimatedDocumentScanner = ({
+  className,
+  interval = 2500,
+}: AnimatedDocumentScannerProps) => {
+  const [magPosition, setMagPosition] = useState({ x: 0, y: 0, page: 0 });
+
+  useEffect(() => {
+    const moveInterval = setInterval(() => {
+      setMagPosition({
+        x: Math.random() * 60 - 30,
+        y: Math.random() * 50 - 25,
+        page: Math.random() > 0.5 ? 1 : 0,
+      });
+    }, interval);
+
+    return () => clearInterval(moveInterval);
+  }, [interval]);
+
+  return (
+    <div className={cn('relative mx-auto h-36 w-56', className)}>
+      {/* Magnifying glass */}
+      <div
+        className="pointer-events-none absolute z-50 transition-all duration-1000 ease-in-out"
+        style={{
+          left: magPosition.page === 0 ? '25%' : '75%',
+          top: '50%',
+          transform: `translate(calc(-50% + ${magPosition.x}px), calc(-50% + ${magPosition.y}px))`,
+        }}
+      >
+        <SearchIcon className="h-8 w-8 text-foreground" />
+      </div>
+
+      {/* Book container */}
+      <div className="relative h-full w-full animate-pulse" style={{ perspective: '800px' }}>
+        <div className="relative h-full w-full" style={{ transformStyle: 'preserve-3d' }}>
+          {/* Left page */}
+          <div
+            className="absolute left-0 top-0 h-full w-[calc(50%)] origin-right overflow-hidden rounded-l-md border border-border bg-card shadow-md"
+            style={{ transform: 'rotateY(15deg) skewY(-1deg)' }}
+          >
+            <div className="absolute inset-3 space-y-2">
+              <div className="h-1.5 w-3/4 rounded-sm bg-muted" />
+              <div className="h-1.5 w-full rounded-sm bg-muted" />
+              <div className="h-1.5 w-5/6 rounded-sm bg-muted" />
+              <div className="h-1.5 w-2/3 rounded-sm bg-muted" />
+              <div className="mt-3 h-6 w-3/4 rounded border border-dashed border-primary" />
+            </div>
+          </div>
+
+          {/* Right page */}
+          <div
+            className="absolute right-0 top-0 h-full w-[calc(50%)] origin-left overflow-hidden rounded-r-md border border-border bg-card shadow-md"
+            style={{ transform: 'rotateY(-15deg) skewY(1deg)' }}
+          >
+            <div className="absolute inset-3 space-y-2">
+              <div className="h-1.5 w-full rounded-sm bg-muted" />
+              <div className="h-1.5 w-4/5 rounded-sm bg-muted" />
+              <div className="h-1.5 w-full rounded-sm bg-muted" />
+              <div className="h-1.5 w-3/5 rounded-sm bg-muted" />
+              <div className="mt-3 h-6 w-2/3 rounded border border-dashed border-primary" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/general/avatar-with-recipient.tsx

@@ -56,13 +56,13 @@ export function AvatarWithRecipient({ recipient, documentStatus }: AvatarWithRec
       />
 
       <div
-        className="text-muted-foreground text-sm"
+        className="text-sm text-muted-foreground"
         title={
           signingToken ? _(msg`Click to copy signing link for sending to recipient`) : undefined
         }
       >
-        <p>{recipient.email}</p>
-        <p className="text-muted-foreground/70 text-xs">
+        <p>{recipient.email || recipient.name}</p>
+        <p className="text-xs text-muted-foreground/70">
           {_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
         </p>
       </div>

apps/remix/app/components/general/direct-template/direct-template-configure-form.tsx

@@ -1,6 +1,4 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { Recipient } from '@prisma/client';
 import type { Field } from '@prisma/client';
@@ -57,8 +55,6 @@ export const DirectTemplateConfigureForm = ({
   initialEmail,
   onSubmit,
 }: DirectTemplateConfigureFormProps) => {
-  const { _ } = useLingui();
-
   const { sessionData } = useOptionalSession();
   const user = sessionData?.user;
 
@@ -77,17 +73,7 @@ export const DirectTemplateConfigureForm = ({
   });
 
   const form = useForm<TDirectTemplateConfigureFormSchema>({
-    resolver: zodResolver(
-      ZDirectTemplateConfigureFormSchema.superRefine((items, ctx) => {
-        if (template.recipients.map((recipient) => recipient.email).includes(items.email)) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: _(msg`Email cannot already exist in the template`),
-            path: ['email'],
-          });
-        }
-      }),
-    ),
+    resolver: zodResolver(ZDirectTemplateConfigureFormSchema),
     defaultValues: {
       email: initialEmail || '',
     },
@@ -138,7 +124,7 @@ export const DirectTemplateConfigureForm = ({
                   </FormControl>
 
                   {!fieldState.error && (
-                    <p className="text-muted-foreground text-xs">
+                    <p className="text-xs text-muted-foreground">
                       <Trans>Enter your email address to receive the completed document.</Trans>
                     </p>
                   )}

apps/remix/app/components/general/direct-template/direct-template-signing-form.tsx

@@ -417,6 +417,7 @@ export const DirectTemplateSigningForm = ({
               <SignaturePadDialog
                 className="mt-2"
                 disabled={isSubmitting}
+                fullName={fullName}
                 value={signature ?? ''}
                 onChange={(value) => setSignature(value)}
                 typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
@@ -433,7 +434,7 @@ export const DirectTemplateSigningForm = ({
 
         <div className="mt-4 flex gap-x-4">
           <Button
-            className="dark:bg-muted dark:hover:bg-muted/80 w-full bg-black/5 hover:bg-black/10"
+            className="w-full bg-black/5 hover:bg-black/10 dark:bg-muted dark:hover:bg-muted/80"
             size="lg"
             variant="secondary"
             disabled={isSubmitting}

apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx

@@ -57,12 +57,13 @@ export type DocumentSigningCompleteDialogProps = {
     name: string;
     email: string;
   };
-  directTemplatePayload?: {
+  recipientPayload?: {
     name: string;
     email: string;
   };
   buttonSize?: 'sm' | 'lg';
   position?: 'start' | 'end' | 'center';
+  disableNameInput?: boolean;
 };
 
 const ZNextSignerFormSchema = z.object({
@@ -89,10 +90,11 @@ export const DocumentSigningCompleteDialog = ({
   recipient,
   disabled = false,
   allowDictateNextSigner = false,
-  directTemplatePayload,
+  recipientPayload,
   defaultNextSigner,
   buttonSize = 'lg',
   position,
+  disableNameInput = false,
 }: DocumentSigningCompleteDialogProps) => {
   const { t } = useLingui();
 
@@ -113,11 +115,11 @@ export const DocumentSigningCompleteDialog = ({
     },
   });
 
-  const directRecipientForm = useForm<TDirectRecipientFormSchema>({
+  const recipientForm = useForm<TDirectRecipientFormSchema>({
     resolver: zodResolver(ZDirectRecipientFormSchema),
     defaultValues: {
-      name: directTemplatePayload?.name ?? '',
-      email: directTemplatePayload?.email ?? '',
+      name: recipientPayload?.name ?? '',
+      email: recipientPayload?.email ?? '',
     },
   });
 
@@ -145,16 +147,16 @@ export const DocumentSigningCompleteDialog = ({
 
   const onFormSubmit = async (data: TNextSignerFormSchema) => {
     try {
-      let directRecipient: { name: string; email: string } | undefined;
+      let recipientOverridePayload: { name: string; email: string } | undefined;
 
-      if (directTemplatePayload && !directTemplatePayload.email) {
-        const isFormValid = await directRecipientForm.trigger();
+      if (recipientPayload && !recipientPayload.email) {
+        const isFormValid = await recipientForm.trigger();
 
         if (!isFormValid) {
           return;
         }
 
-        directRecipient = directRecipientForm.getValues();
+        recipientOverridePayload = recipientForm.getValues();
       }
 
       // Check if 2FA is required
@@ -168,7 +170,7 @@ export const DocumentSigningCompleteDialog = ({
           ? { name: data.name, email: data.email }
           : undefined;
 
-      await onSignatureComplete(nextSigner, data.accessAuthOptions, directRecipient);
+      await onSignatureComplete(nextSigner, data.accessAuthOptions, recipientOverridePayload);
     } catch (error) {
       const err = AppError.parseError(error);
 
@@ -222,7 +224,7 @@ export const DocumentSigningCompleteDialog = ({
             <Trans>Are you sure?</Trans>
           </DialogTitle>
           <DialogDescription>
-            <div className="text-muted-foreground max-w-[50ch]">
+            <div className="max-w-[50ch] text-muted-foreground">
               {match(recipient.role)
                 .with(RecipientRole.VIEWER, () => (
                   <span className="inline-flex flex-wrap">
@@ -250,19 +252,19 @@ export const DocumentSigningCompleteDialog = ({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="border-border bg-muted/50 rounded-lg border p-4 text-center">
-          <p className="text-muted-foreground text-sm font-medium">{documentTitle}</p>
+        <div className="rounded-lg border border-border bg-muted/50 p-4 text-center">
+          <p className="text-sm font-medium text-muted-foreground">{documentTitle}</p>
         </div>
 
         {!showTwoFactorForm && (
           <>
             <fieldset disabled={form.formState.isSubmitting} className="border-none p-0">
-              {directTemplatePayload && !directTemplatePayload.email && (
-                <Form {...directRecipientForm}>
+              {recipientPayload && !recipientPayload.email && (
+                <Form {...recipientForm}>
                   <div className="mb-4 flex flex-col gap-4">
                     <div className="flex flex-col gap-4 md:flex-row">
                       <FormField
-                        control={directRecipientForm.control}
+                        control={recipientForm.control}
                         name="name"
                         render={({ field }) => (
                           <FormItem className="flex-1">
@@ -274,7 +276,7 @@ export const DocumentSigningCompleteDialog = ({
                                 {...field}
                                 className="mt-2"
                                 placeholder={t`Enter your name`}
-                                disabled={isNameLocked}
+                                disabled={isNameLocked || disableNameInput}
                               />
                             </FormControl>
 
@@ -284,7 +286,7 @@ export const DocumentSigningCompleteDialog = ({
                       />
 
                       <FormField
-                        control={directRecipientForm.control}
+                        control={recipientForm.control}
                         name="email"
                         render={({ field }) => (
                           <FormItem className="flex-1">

apps/remix/app/components/general/document-signing/document-signing-form.tsx

@@ -108,8 +108,8 @@ export const DocumentSigningForm = ({
       await completeDocument({ nextSigner });
     } catch (err) {
       toast({
-        title: 'Error',
-        description: 'An error occurred while completing the document. Please try again.',
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while completing the document. Please try again.`),
         variant: 'destructive',
       });
 
@@ -280,6 +280,7 @@ export const DocumentSigningForm = ({
                       <SignaturePadDialog
                         className="mt-2"
                         disabled={isSubmitting}
+                        fullName={fullName}
                         value={signature ?? ''}
                         onChange={(v) => setSignature(v ?? '')}
                         typedSignatureEnabled={document.documentMeta?.typedSignatureEnabled}

apps/remix/app/components/general/document-signing/document-signing-mobile-widget.tsx

@@ -35,7 +35,7 @@ export const DocumentSigningMobileWidget = () => {
   return (
     <div className="pointer-events-none fixed bottom-0 left-0 right-0 z-50 flex justify-center px-2 pb-2 sm:px-4 sm:pb-6">
       <div className="pointer-events-auto w-full max-w-[760px]">
-        <div className="bg-card border-border overflow-hidden rounded-xl border shadow-2xl">
+        <div className="overflow-hidden rounded-xl border border-border bg-card shadow-2xl">
           {/* Main Header Bar */}
           <div className="flex items-center justify-between gap-4 p-4">
             <div className="flex-1">
@@ -48,15 +48,15 @@ export const DocumentSigningMobileWidget = () => {
                     aria-label={isExpanded ? 'Collapse' : 'Expand'}
                   >
                     {isExpanded ? (
-                      <LucideChevronDown className="text-muted-foreground h-5 w-5 flex-shrink-0" />
+                      <LucideChevronDown className="h-5 w-5 flex-shrink-0 text-muted-foreground" />
                     ) : (
-                      <LucideChevronUp className="text-muted-foreground h-5 w-5 flex-shrink-0" />
+                      <LucideChevronUp className="h-5 w-5 flex-shrink-0 text-muted-foreground" />
                     )}
                   </Button>
                 )}
 
                 <div>
-                  <h2 className="text-foreground text-lg font-semibold">
+                  <h2 className="text-lg font-semibold text-foreground">
                     {match(recipient.role)
                       .with(RecipientRole.VIEWER, () => <Trans>View Document</Trans>)
                       .with(RecipientRole.SIGNER, () => <Trans>Sign Document</Trans>)
@@ -65,7 +65,7 @@ export const DocumentSigningMobileWidget = () => {
                       .otherwise(() => null)}
                   </h2>
 
-                  <p className="text-muted-foreground -mt-0.5 text-sm">
+                  <p className="-mt-0.5 text-sm text-muted-foreground">
                     {recipientFieldsRemaining.length === 0 ? (
                       match(recipient.role)
                         .with(RecipientRole.VIEWER, () => (
@@ -102,11 +102,11 @@ export const DocumentSigningMobileWidget = () => {
           {recipient.role !== RecipientRole.VIEWER &&
             recipient.role !== RecipientRole.ASSISTANT && (
               <div className="px-4 pb-3">
-                <div className="bg-muted relative h-[4px] rounded-md">
+                <div className="relative h-[4px] rounded-md bg-muted">
                   <motion.div
                     layout="size"
                     layoutId="document-signing-mobile-widget-progress-bar"
-                    className="bg-documenso absolute inset-y-0 left-0"
+                    className="absolute inset-y-0 left-0 bg-primary"
                     style={{
                       width: `${100 - (100 / requiredRecipientFields.length) * (recipientFieldsRemaining.length ?? 0)}%`,
                     }}
@@ -117,11 +117,11 @@ export const DocumentSigningMobileWidget = () => {
 
           {/* Expandable Content */}
           {isExpanded && (
-            <div className="border-border animate-in slide-in-from-bottom-2 border-t p-4 duration-200">
+            <div className="border-t border-border p-4 duration-200 animate-in slide-in-from-bottom-2">
               <EnvelopeSignerForm />
 
               {!hidePoweredBy && (
-                <div className="bg-primary text-primary-foreground mt-2 inline-block rounded px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100 lg:hidden">
+                <div className="mt-2 inline-block rounded bg-primary px-2 py-1 text-xs font-medium text-primary-foreground opacity-60 hover:opacity-100 lg:hidden">
                   <span>Powered by</span>
                   <BrandingLogo className="ml-2 inline-block h-[14px]" />
                 </div>

apps/remix/app/components/general/document-signing/document-signing-page-view-v1.tsx

@@ -187,45 +187,74 @@ export const DocumentSigningPageViewV1 = ({
 
         <div className="mt-1.5 flex flex-wrap items-center justify-between gap-y-2 sm:mt-2.5 sm:gap-y-0">
           <div className="max-w-[50ch]">
-            <span className="truncate text-muted-foreground" title={senderName}>
-              {senderName} {senderEmail}
-            </span>{' '}
             <span className="text-muted-foreground">
               {match(recipient.role)
                 .with(RecipientRole.VIEWER, () =>
                   includeSenderDetails ? (
                     <Trans>
+                      <span className="truncate" title={senderName}>
+                        {senderName} {senderEmail}
+                      </span>{' '}
                       on behalf of "{document.team?.name}" has invited you to view this document
                     </Trans>
                   ) : (
-                    <Trans>has invited you to view this document</Trans>
+                    <Trans>
+                      <span className="truncate" title={senderName}>
+                        {senderName} {senderEmail}
+                      </span>{' '}
+                      has invited you to view this document
+                    </Trans>
                   ),
                 )
                 .with(RecipientRole.SIGNER, () =>
                   includeSenderDetails ? (
                     <Trans>
+                      <span className="truncate" title={senderName}>
+                        {senderName} {senderEmail}
+                      </span>{' '}
                       on behalf of "{document.team?.name}" has invited you to sign this document
                     </Trans>
                   ) : (
-                    <Trans>has invited you to sign this document</Trans>
+                    <Trans>
+                      <span className="truncate" title={senderName}>
+                        {senderName} {senderEmail}
+                      </span>{' '}
+                      has invited you to sign this document
+                    </Trans>
                   ),
                 )
                 .with(RecipientRole.APPROVER, () =>
                   includeSenderDetails ? (
                     <Trans>
+                      <span className="truncate" title={senderName}>
+                        {senderName} {senderEmail}
+                      </span>{' '}
                       on behalf of "{document.team?.name}" has invited you to approve this document
                     </Trans>
                   ) : (
-                    <Trans>has invited you to approve this document</Trans>
+                    <Trans>
+                      <span className="truncate" title={senderName}>
+                        {senderName} {senderEmail}
+                      </span>{' '}
+                      has invited you to approve this document
+                    </Trans>
                   ),
                 )
                 .with(RecipientRole.ASSISTANT, () =>
                   includeSenderDetails ? (
                     <Trans>
+                      <span className="truncate" title={senderName}>
+                        {senderName} {senderEmail}
+                      </span>{' '}
                       on behalf of "{document.team?.name}" has invited you to assist this document
                     </Trans>
                   ) : (
-                    <Trans>has invited you to assist this document</Trans>
+                    <Trans>
+                      <span className="truncate" title={senderName}>
+                        {senderName} {senderEmail}
+                      </span>{' '}
+                      has invited you to assist this document
+                    </Trans>
                   ),
                 )
                 .otherwise(() => null)}

apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx

@@ -52,7 +52,7 @@ export const DocumentSigningPageViewV2 = () => {
 
   const {
     isEmbed = false,
-    allowDocumentRejection = true,
+    allowDocumentRejection = false,
     hidePoweredBy = true,
     onDocumentRejected,
   } = useEmbedSigningContext() || {};
@@ -109,7 +109,7 @@ export const DocumentSigningPageViewV2 = () => {
               <motion.div
                 layout="size"
                 layoutId="document-flow-container-step"
-                className="absolute inset-y-0 left-0 bg-documenso"
+                className="absolute inset-y-0 left-0 bg-primary"
                 style={{
                   width: `${100 - (100 / requiredRecipientFields.length) * (recipientFieldsRemaining.length ?? 0)}%`,
                 }}

apps/remix/app/components/general/document-signing/document-signing-reject-dialog.tsx

@@ -74,8 +74,8 @@ export function DocumentSigningRejectDialog({
       });
 
       toast({
-        title: 'Document rejected',
-        description: 'The document has been successfully rejected.',
+        title: t`Document rejected`,
+        description: t`The document has been successfully rejected.`,
         duration: 5000,
       });
 
@@ -88,8 +88,8 @@ export function DocumentSigningRejectDialog({
       }
     } catch (err) {
       toast({
-        title: 'Error',
-        description: 'An error occurred while rejecting the document. Please try again.',
+        title: t`Error`,
+        description: t`An error occurred while rejecting the document. Please try again.`,
         variant: 'destructive',
         duration: 5000,
       });

apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx

@@ -56,8 +56,11 @@ export const DocumentSigningSignatureField = ({
   const containerRef = useRef<HTMLDivElement>(null);
   const [fontSize, setFontSize] = useState(2);
 
-  const { signature: providedSignature, setSignature: setProvidedSignature } =
-    useRequiredDocumentSigningContext();
+  const {
+    fullName,
+    signature: providedSignature,
+    setSignature: setProvidedSignature,
+  } = useRequiredDocumentSigningContext();
 
   const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
 
@@ -236,13 +239,13 @@ export const DocumentSigningSignatureField = ({
       type="Signature"
     >
       {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        <div className="absolute inset-0 flex items-center justify-center rounded-md bg-background">
+          <Loader className="h-5 w-5 animate-spin text-primary md:h-8 md:w-8" />
         </div>
       )}
 
       {state === 'empty' && (
-        <p className="group-hover:text-primary font-signature text-muted-foreground group-hover:text-recipient-green text-[clamp(0.575rem,25cqw,1.2rem)] text-xl duration-200">
+        <p className="font-signature text-[clamp(0.575rem,25cqw,1.2rem)] text-xl text-muted-foreground duration-200 group-hover:text-primary group-hover:text-recipient-green">
           <Trans>Signature</Trans>
         </p>
       )}
@@ -259,7 +262,7 @@ export const DocumentSigningSignatureField = ({
         <div ref={containerRef} className="flex h-full w-full items-center justify-center p-2">
           <p
             ref={signatureRef}
-            className="font-signature text-muted-foreground w-full overflow-hidden break-all text-center leading-tight duration-200"
+            className="w-full overflow-hidden break-all text-center font-signature leading-tight text-muted-foreground duration-200"
             style={{ fontSize: `${fontSize}rem` }}
           >
             {signature?.typedSignature}
@@ -272,12 +275,13 @@ export const DocumentSigningSignatureField = ({
           <DialogTitle>
             <Trans>
               Sign as {recipient.name}{' '}
-              <div className="text-muted-foreground h-5">({recipient.email})</div>
+              <div className="h-5 text-muted-foreground">({recipient.email})</div>
             </Trans>
           </DialogTitle>
 
           <SignaturePad
             className="mt-2"
+            fullName={fullName}
             value={localSignature ?? ''}
             onChange={({ value }) => setLocalSignature(value)}
             typedSignatureEnabled={typedSignatureEnabled}

apps/remix/app/components/general/document/document-page-view-recent-activity.tsx

@@ -22,7 +22,7 @@ export const DocumentPageViewRecentActivity = ({
   documentId,
   userId,
 }: DocumentPageViewRecentActivityProps) => {
-  const { _ } = useLingui();
+  const { _, i18n } = useLingui();
 
   const {
     data,
@@ -48,9 +48,9 @@ export const DocumentPageViewRecentActivity = ({
   const documentAuditLogs = useMemo(() => (data?.pages ?? []).flatMap((page) => page.data), [data]);
 
   return (
-    <section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">
+    <section className="flex flex-col rounded-xl border border-border bg-widget dark:bg-background">
       <div className="flex flex-row items-center justify-between border-b px-4 py-3">
-        <h1 className="text-foreground font-medium">
+        <h1 className="font-medium text-foreground">
           <Trans>Recent activity</Trans>
         </h1>
 
@@ -59,18 +59,18 @@ export const DocumentPageViewRecentActivity = ({
 
       {isLoading && (
         <div className="flex h-full items-center justify-center py-16">
-          <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+          <Loader className="h-6 w-6 animate-spin text-muted-foreground" />
         </div>
       )}
 
       {isLoadingError && (
         <div className="flex h-full flex-col items-center justify-center py-16">
-          <p className="text-foreground/80 text-sm">
+          <p className="text-sm text-foreground/80">
             <Trans>Unable to load document history</Trans>
           </p>
           <button
             onClick={async () => refetch()}
-            className="text-foreground/70 hover:text-muted-foreground mt-2 text-sm"
+            className="mt-2 text-sm text-foreground/70 hover:text-muted-foreground"
           >
             <Trans>Click here to retry</Trans>
           </button>
@@ -83,16 +83,16 @@ export const DocumentPageViewRecentActivity = ({
             {hasNextPage && (
               <li className="relative flex gap-x-4">
                 <div className="absolute -bottom-6 left-0 top-0 flex w-6 justify-center">
-                  <div className="bg-border w-px" />
+                  <div className="w-px bg-border" />
                 </div>
 
-                <div className="bg-widget relative flex h-6 w-6 flex-none items-center justify-center">
-                  <div className="bg-widget h-1.5 w-1.5 rounded-full ring-1 ring-gray-300 dark:ring-neutral-600" />
+                <div className="relative flex h-6 w-6 flex-none items-center justify-center bg-widget">
+                  <div className="h-1.5 w-1.5 rounded-full bg-widget ring-1 ring-gray-300 dark:ring-neutral-600" />
                 </div>
 
                 <button
                   onClick={async () => fetchNextPage()}
-                  className="text-foreground/70 hover:text-muted-foreground text-xs"
+                  className="text-xs text-foreground/70 hover:text-muted-foreground"
                 >
                   {isFetchingNextPage ? _(msg`Loading...`) : _(msg`Load older activity`)}
                 </button>
@@ -101,7 +101,7 @@ export const DocumentPageViewRecentActivity = ({
 
             {documentAuditLogs.length === 0 && (
               <div className="flex items-center justify-center py-4">
-                <p className="text-muted-foreground/70 text-sm">
+                <p className="text-sm text-muted-foreground/70">
                   <Trans>No recent activity</Trans>
                 </p>
               </div>
@@ -115,44 +115,44 @@ export const DocumentPageViewRecentActivity = ({
                     'absolute left-0 top-0 flex w-6 justify-center',
                   )}
                 >
-                  <div className="bg-border w-px" />
+                  <div className="w-px bg-border" />
                 </div>
 
-                <div className="bg-widget text-foreground/40 relative flex h-6 w-6 flex-none items-center justify-center">
+                <div className="relative flex h-6 w-6 flex-none items-center justify-center bg-widget text-foreground/40">
                   {match(auditLog.type)
                     .with(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_COMPLETED, () => (
-                      <div className="bg-widget rounded-full border border-gray-300 p-1 dark:border-neutral-600">
+                      <div className="rounded-full border border-gray-300 bg-widget p-1 dark:border-neutral-600">
                         <CheckCheckIcon className="h-3 w-3" aria-hidden="true" />
                       </div>
                     ))
                     .with(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED, () => (
-                      <div className="bg-widget rounded-full border border-gray-300 p-1 dark:border-neutral-600">
+                      <div className="rounded-full border border-gray-300 bg-widget p-1 dark:border-neutral-600">
                         <CheckIcon className="h-3 w-3" aria-hidden="true" />
                       </div>
                     ))
                     .with(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_REJECTED, () => (
-                      <div className="bg-widget rounded-full border border-gray-300 p-1 dark:border-neutral-600">
+                      <div className="rounded-full border border-gray-300 bg-widget p-1 dark:border-neutral-600">
                         <AlertTriangle className="h-3 w-3" aria-hidden="true" />
                       </div>
                     ))
                     .with(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED, () => (
-                      <div className="bg-widget rounded-full border border-gray-300 p-1 dark:border-neutral-600">
+                      <div className="rounded-full border border-gray-300 bg-widget p-1 dark:border-neutral-600">
                         <MailOpen className="h-3 w-3" aria-hidden="true" />
                       </div>
                     ))
                     .otherwise(() => (
-                      <div className="bg-widget h-1.5 w-1.5 rounded-full ring-1 ring-gray-300 dark:ring-neutral-600" />
+                      <div className="h-1.5 w-1.5 rounded-full bg-widget ring-1 ring-gray-300 dark:ring-neutral-600" />
                     ))}
                 </div>
 
                 <p
-                  className="text-muted-foreground dark:text-muted-foreground/70 flex-auto truncate py-0.5 text-xs leading-5"
-                  title={formatDocumentAuditLogAction(_, auditLog, userId).description}
+                  className="flex-auto truncate py-0.5 text-xs leading-5 text-muted-foreground dark:text-muted-foreground/70"
+                  title={formatDocumentAuditLogAction(i18n, auditLog, userId).description}
                 >
-                  {formatDocumentAuditLogAction(_, auditLog, userId).description}
+                  {formatDocumentAuditLogAction(i18n, auditLog, userId).description}
                 </p>
 
-                <time className="text-muted-foreground dark:text-muted-foreground/70 flex-none py-0.5 text-xs leading-5">
+                <time className="flex-none py-0.5 text-xs leading-5 text-muted-foreground dark:text-muted-foreground/70">
                   {DateTime.fromJSDate(auditLog.createdAt).toRelative({ style: 'short' })}
                 </time>
               </li>

apps/remix/app/components/general/document/document-upload-button-legacy.tsx

@@ -14,9 +14,10 @@ import { useSession } from '@documenso/lib/client-only/providers/session';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import type { TCreateDocumentPayloadSchema } from '@documenso/trpc/server/document-router/create-document.types';
+import type { TCreateTemplatePayloadSchema } from '@documenso/trpc/server/template-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { DocumentUploadButton as DocumentUploadButtonPrimitive } from '@documenso/ui/primitives/document-upload-button';
 import {
@@ -31,9 +32,13 @@ import { useCurrentTeam } from '~/providers/team';
 
 export type DocumentUploadButtonLegacyProps = {
   className?: string;
+  type: EnvelopeType;
 };
 
-export const DocumentUploadButtonLegacy = ({ className }: DocumentUploadButtonLegacyProps) => {
+export const DocumentUploadButtonLegacy = ({
+  className,
+  type,
+}: DocumentUploadButtonLegacyProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
   const { user } = useSession();
@@ -54,8 +59,18 @@ export const DocumentUploadButtonLegacy = ({ className }: DocumentUploadButtonLe
   const [isLoading, setIsLoading] = useState(false);
 
   const { mutateAsync: createDocument } = trpc.document.create.useMutation();
+  const { mutateAsync: createTemplate } = trpc.template.createTemplate.useMutation();
 
   const disabledMessage = useMemo(() => {
+    if (!user.emailVerified) {
+      return msg`Verify your email to upload documents.`;
+    }
+
+    // No errors for templates.
+    if (type === EnvelopeType.TEMPLATE) {
+      return;
+    }
+
     if (organisation.subscription && remaining.documents === 0) {
       return msg`Document upload disabled due to unpaid invoices`;
     }
@@ -64,11 +79,8 @@ export const DocumentUploadButtonLegacy = ({ className }: DocumentUploadButtonLe
       return msg`You have reached your document limit.`;
     }
 
-    if (!user.emailVerified) {
-      return msg`Verify your email to upload documents.`;
-    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [remaining.documents, user.emailVerified, team]);
+  }, [remaining.documents, user.emailVerified, team, type]);
 
   const onFileDrop = async (file: File) => {
     try {
@@ -80,44 +92,62 @@ export const DocumentUploadButtonLegacy = ({ className }: DocumentUploadButtonLe
         meta: {
           timezone: userTimezone,
         },
-      } satisfies TCreateDocumentPayloadSchema;
+      } satisfies TCreateDocumentPayloadSchema | TCreateTemplatePayloadSchema;
 
       const formData = new FormData();
 
       formData.append('payload', JSON.stringify(payload));
       formData.append('file', file);
 
-      const { envelopeId: id } = await createDocument(formData);
+      // Handle legacy document creation.
+      if (type === EnvelopeType.DOCUMENT) {
+        const { envelopeId: id } = await createDocument(formData);
 
-      void refreshLimits();
+        void refreshLimits();
 
-      await navigate(`${formatDocumentsPath(team.url)}/${id}/edit`);
+        await navigate(`${formatDocumentsPath(team.url)}/${id}/edit`);
 
-      toast({
-        title: _(msg`Document uploaded`),
-        description: _(msg`Your document has been uploaded successfully.`),
-        duration: 5000,
-      });
+        toast({
+          title: _(msg`Document uploaded`),
+          description: _(msg`Your document has been uploaded successfully.`),
+          duration: 5000,
+        });
 
-      analytics.capture('App: Document Uploaded', {
-        userId: user.id,
-        documentId: id,
-        timestamp: new Date().toISOString(),
-      });
+        analytics.capture('App: Document Uploaded', {
+          userId: user.id,
+          documentId: id,
+          timestamp: new Date().toISOString(),
+        });
+      }
+
+      // Handle legacy template creation.
+      if (type === EnvelopeType.TEMPLATE) {
+        const { envelopeId: id } = await createTemplate(formData);
+
+        await navigate(`${formatTemplatesPath(team.url)}/${id}/edit`);
+
+        toast({
+          title: _(msg`Template document uploaded`),
+          description: _(
+            msg`Your document has been uploaded successfully. You will be redirected to the template page.`,
+          ),
+          duration: 5000,
+        });
+      }
     } catch (err) {
       const error = AppError.parseError(err);
 
       console.error(err);
 
       const errorMessage = match(error.code)
-        .with('INVALID_DOCUMENT_FILE', () => msg`You cannot upload encrypted PDFs`)
+        .with('INVALID_DOCUMENT_FILE', () => msg`You cannot upload encrypted PDFs.`)
         .with(
           AppErrorCode.LIMIT_EXCEEDED,
           () => msg`You have reached your document limit for this month. Please upgrade your plan.`,
         )
         .with(
           'ENVELOPE_ITEM_LIMIT_EXCEEDED',
-          () => msg`You have reached the limit of the number of files per envelope`,
+          () => msg`You have reached the limit of the number of files per envelope.`,
         )
         .otherwise(() => msg`An error occurred while uploading your document.`);
 
@@ -149,17 +179,18 @@ export const DocumentUploadButtonLegacy = ({ className }: DocumentUploadButtonLe
             <div>
               <DocumentUploadButtonPrimitive
                 loading={isLoading}
-                disabled={remaining.documents === 0 || !user.emailVerified}
+                disabled={disabledMessage !== undefined}
                 disabledMessage={disabledMessage}
                 onDrop={async (files) => onFileDrop(files[0])}
                 onDropRejected={onFileDropRejected}
-                type={EnvelopeType.DOCUMENT}
+                type={type}
                 internalVersion="1"
               />
             </div>
           </TooltipTrigger>
 
           {team?.id === undefined &&
+            type === EnvelopeType.DOCUMENT &&
             remaining.documents > 0 &&
             Number.isFinite(remaining.documents) && (
               <TooltipContent>

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx

@@ -1,28 +1,31 @@
-import { lazy, useEffect, useMemo } from 'react';
+import { lazy, useEffect, useMemo, useState } from 'react';
 
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
-import { Trans, useLingui } from '@lingui/react/macro';
-import { FieldType, RecipientRole } from '@prisma/client';
-import { FileTextIcon } from 'lucide-react';
-import { Link, useSearchParams } from 'react-router';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { DocumentStatus, FieldType, RecipientRole } from '@prisma/client';
+import { FileTextIcon, SparklesIcon } from 'lucide-react';
+import { Link, useRevalidator, useSearchParams } from 'react-router';
 import { isDeepEqual } from 'remeda';
 import { match } from 'ts-pattern';
 
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
-import type {
-  TCheckboxFieldMeta,
-  TDateFieldMeta,
-  TDropdownFieldMeta,
-  TEmailFieldMeta,
-  TFieldMetaSchema,
-  TInitialsFieldMeta,
-  TNameFieldMeta,
-  TNumberFieldMeta,
-  TRadioFieldMeta,
-  TSignatureFieldMeta,
-  TTextFieldMeta,
+import type { NormalizedFieldWithContext } from '@documenso/lib/server-only/ai/envelope/detect-fields/types';
+import {
+  FIELD_META_DEFAULT_VALUES,
+  type TCheckboxFieldMeta,
+  type TDateFieldMeta,
+  type TDropdownFieldMeta,
+  type TEmailFieldMeta,
+  type TFieldMetaSchema,
+  type TInitialsFieldMeta,
+  type TNameFieldMeta,
+  type TNumberFieldMeta,
+  type TRadioFieldMeta,
+  type TSignatureFieldMeta,
+  type TTextFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
@@ -31,6 +34,8 @@ import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/al
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
 
+import { AiFeaturesEnableDialog } from '~/components/dialogs/ai-features-enable-dialog';
+import { AiFieldDetectionDialog } from '~/components/dialogs/ai-field-detection-dialog';
 import { EditorFieldCheckboxForm } from '~/components/forms/editor/editor-field-checkbox-form';
 import { EditorFieldDateForm } from '~/components/forms/editor/editor-field-date-form';
 import { EditorFieldDropdownForm } from '~/components/forms/editor/editor-field-dropdown-form';
@@ -41,6 +46,7 @@ import { EditorFieldNumberForm } from '~/components/forms/editor/editor-field-nu
 import { EditorFieldRadioForm } from '~/components/forms/editor/editor-field-radio-form';
 import { EditorFieldSignatureForm } from '~/components/forms/editor/editor-field-signature-form';
 import { EditorFieldTextForm } from '~/components/forms/editor/editor-field-text-form';
+import { useCurrentTeam } from '~/providers/team';
 
 import { EnvelopeEditorFieldDragDrop } from './envelope-editor-fields-drag-drop';
 import { EnvelopeRendererFileSelector } from './envelope-file-selector';
@@ -67,11 +73,17 @@ const FieldSettingsTypeTranslations: Record<FieldType, MessageDescriptor> = {
 export const EnvelopeEditorFieldsPage = () => {
   const [searchParams] = useSearchParams();
 
+  const team = useCurrentTeam();
+
   const { envelope, editorFields, relativePath } = useCurrentEnvelopeEditor();
 
   const { currentEnvelopeItem } = useCurrentEnvelopeRender();
 
-  const { t } = useLingui();
+  const { _ } = useLingui();
+
+  const [isAiFieldDialogOpen, setIsAiFieldDialogOpen] = useState(false);
+  const [isAiEnableDialogOpen, setIsAiEnableDialogOpen] = useState(false);
+  const { revalidate } = useRevalidator();
 
   const selectedField = useMemo(
     () => structuredClone(editorFields.selectedField),
@@ -96,6 +108,24 @@ export const EnvelopeEditorFieldsPage = () => {
     }
   };
 
+  const onFieldDetectionComplete = (fields: NormalizedFieldWithContext[]) => {
+    for (const field of fields) {
+      editorFields.addField({
+        height: field.height,
+        width: field.width,
+        positionX: field.positionX,
+        positionY: field.positionY,
+        type: field.type,
+        envelopeItemId: field.envelopeItemId,
+        recipientId: field.recipientId,
+        page: field.pageNumber,
+        fieldMeta: structuredClone(FIELD_META_DEFAULT_VALUES[field.type]),
+      });
+    }
+
+    setIsAiFieldDialogOpen(false);
+  };
+
   /**
    * Set the selected recipient to the first recipient in the envelope.
    */
@@ -108,6 +138,22 @@ export const EnvelopeEditorFieldsPage = () => {
     editorFields.setSelectedRecipient(firstSelectableRecipient?.id ?? null);
   }, []);
 
+  const onDetectClick = () => {
+    if (!team.preferences.aiFeaturesEnabled) {
+      setIsAiEnableDialogOpen(true);
+      return;
+    }
+
+    setIsAiFieldDialogOpen(true);
+  };
+
+  const onAiFeaturesEnabled = () => {
+    void revalidate().then(() => {
+      setIsAiEnableDialogOpen(false);
+      setIsAiFieldDialogOpen(true);
+    });
+  };
+
   return (
     <div className="relative flex h-full">
       <div className="flex w-full flex-col overflow-y-auto">
@@ -202,6 +248,37 @@ export const EnvelopeEditorFieldsPage = () => {
               selectedRecipientId={editorFields.selectedRecipient?.id ?? null}
               selectedEnvelopeItemId={currentEnvelopeItem?.id ?? null}
             />
+
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="mt-4 w-full"
+              onClick={onDetectClick}
+              disabled={envelope.status !== DocumentStatus.DRAFT}
+              title={
+                envelope.status !== DocumentStatus.DRAFT
+                  ? _(msg`You can only detect fields in draft envelopes`)
+                  : undefined
+              }
+            >
+              <SparklesIcon className="-ml-1 mr-2 h-4 w-4" />
+              <Trans>Detect with AI</Trans>
+            </Button>
+
+            <AiFieldDetectionDialog
+              open={isAiFieldDialogOpen}
+              onOpenChange={setIsAiFieldDialogOpen}
+              onComplete={onFieldDetectionComplete}
+              envelopeId={envelope.id}
+              teamId={envelope.teamId}
+            />
+
+            <AiFeaturesEnableDialog
+              open={isAiEnableDialogOpen}
+              onOpenChange={setIsAiEnableDialogOpen}
+              onEnabled={onAiFeaturesEnabled}
+            />
           </section>
 
           {/* Field details section. */}
@@ -243,7 +320,7 @@ export const EnvelopeEditorFieldsPage = () => {
 
                 <div className="px-4 [&_label]:text-xs [&_label]:text-foreground/70">
                   <h3 className="text-sm font-semibold">
-                    {t(FieldSettingsTypeTranslations[selectedField.type])}
+                    {_(FieldSettingsTypeTranslations[selectedField.type])}
                   </h3>
 
                   {match(selectedField.type)

apps/remix/app/components/general/envelope-editor/envelope-editor-recipient-form.tsx

@@ -8,12 +8,13 @@ import {
   type SensorAPI,
 } from '@hello-pangea/dnd';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
+import { plural } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { DocumentSigningOrder, EnvelopeType, RecipientRole, SendStatus } from '@prisma/client';
 import { motion } from 'framer-motion';
-import { GripVerticalIcon, HelpCircleIcon, PlusIcon, TrashIcon } from 'lucide-react';
+import { GripVerticalIcon, HelpCircleIcon, PlusIcon, SparklesIcon, TrashIcon } from 'lucide-react';
 import { useFieldArray, useForm, useWatch } from 'react-hook-form';
+import { useRevalidator, useSearchParams } from 'react-router';
 import { isDeepEqual, prop, sortBy } from 'remeda';
 import { z } from 'zod';
 
@@ -22,10 +23,12 @@ import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounce
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import type { TDetectedRecipientSchema } from '@documenso/lib/server-only/ai/envelope/detect-recipients/schema';
 import {
   ZRecipientActionAuthTypesSchema,
   ZRecipientAuthOptionsSchema,
 } from '@documenso/lib/types/document-auth';
+import { ZRecipientEmailSchema } from '@documenso/lib/types/recipient';
 import { nanoid } from '@documenso/lib/universal/id';
 import { canRecipientBeModified as utilCanRecipientBeModified } from '@documenso/lib/utils/recipients';
 import { trpc } from '@documenso/trpc/react';
@@ -60,15 +63,16 @@ import { Input } from '@documenso/ui/primitives/input';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { AiFeaturesEnableDialog } from '~/components/dialogs/ai-features-enable-dialog';
+import { AiRecipientDetectionDialog } from '~/components/dialogs/ai-recipient-detection-dialog';
+import { useCurrentTeam } from '~/providers/team';
+
 const ZEnvelopeRecipientsForm = z.object({
   signers: z.array(
     z.object({
       formId: z.string().min(1),
       id: z.number().optional(),
-      email: z
-        .string()
-        .email({ message: msg`Invalid email`.id })
-        .min(1),
+      email: ZRecipientEmailSchema,
       name: z.string(),
       role: z.nativeEnum(RecipientRole),
       signingOrder: z.number().optional(),
@@ -85,13 +89,59 @@ export const EnvelopeEditorRecipientForm = () => {
   const { envelope, setRecipientsDebounced, updateEnvelope } = useCurrentEnvelopeEditor();
 
   const organisation = useCurrentOrganisation();
+  const team = useCurrentTeam();
 
   const { t } = useLingui();
   const { toast } = useToast();
   const { remaining } = useLimits();
   const { user } = useSession();
 
+  const [searchParams, setSearchParams] = useSearchParams();
   const [recipientSearchQuery, setRecipientSearchQuery] = useState('');
+  const [isAiEnableDialogOpen, setIsAiEnableDialogOpen] = useState(false);
+
+  // AI recipient detection dialog state
+  const [isAiDialogOpen, setIsAiDialogOpen] = useState(() => searchParams.get('ai') === 'true');
+  const { revalidate } = useRevalidator();
+
+  const onAiDialogOpenChange = (open: boolean) => {
+    if (open && !team.preferences.aiFeaturesEnabled) {
+      setIsAiEnableDialogOpen(true);
+      setIsAiDialogOpen(false);
+      return;
+    }
+
+    setIsAiDialogOpen(open);
+
+    if (!open && searchParams.get('ai') === 'true') {
+      setSearchParams(
+        (prev) => {
+          const newParams = new URLSearchParams(prev);
+
+          newParams.delete('ai');
+
+          return newParams;
+        },
+        { replace: true },
+      );
+    }
+  };
+
+  const onDetectRecipientsClick = () => {
+    if (!team.preferences.aiFeaturesEnabled) {
+      setIsAiEnableDialogOpen(true);
+      return;
+    }
+
+    setIsAiDialogOpen(true);
+  };
+
+  const onAiFeaturesEnabled = () => {
+    void revalidate().then(() => {
+      setIsAiEnableDialogOpen(false);
+      setIsAiDialogOpen(true);
+    });
+  };
 
   const debouncedRecipientSearchQuery = useDebouncedValue(recipientSearchQuery, 500);
 
@@ -201,12 +251,13 @@ export const EnvelopeEditorRecipientForm = () => {
     keyName: 'nativeId',
   });
 
-  const emptySigners = useCallback(
-    () => form.getValues('signers').filter((signer) => signer.email === ''),
-    [form],
+  const emptySignerIndex = watchedSigners.findIndex(
+    (signer) =>
+      !signer.name &&
+      !signer.email &&
+      envelope.fields.filter((field) => field.recipientId === signer.id).length === 0,
   );
 
-  const emptySignerIndex = watchedSigners.findIndex((signer) => !signer.name && !signer.email);
   const isUserAlreadyARecipient = watchedSigners.some(
     (signer) => signer.email.toLowerCase() === user?.email?.toLowerCase(),
   );
@@ -244,6 +295,77 @@ export const EnvelopeEditorRecipientForm = () => {
     });
   };
 
+  const onAiDetectionComplete = (detectedRecipients: TDetectedRecipientSchema[]) => {
+    const currentSigners = form.getValues('signers');
+
+    let nextSigningOrder =
+      currentSigners.length > 0
+        ? Math.max(...currentSigners.map((s) => s.signingOrder ?? 0)) + 1
+        : 1;
+
+    // If the only signer is the default empty signer lets just replace it with the detected recipients
+    if (currentSigners.length === 1 && !currentSigners[0].name && !currentSigners[0].email) {
+      form.setValue(
+        'signers',
+        detectedRecipients.map((recipient, index) => ({
+          formId: nanoid(12),
+          name: recipient.name,
+          email: recipient.email,
+          role: recipient.role,
+          actionAuth: [],
+          signingOrder: index + 1,
+        })),
+        {
+          shouldValidate: true,
+          shouldDirty: true,
+        },
+      );
+
+      return;
+    }
+
+    for (const recipient of detectedRecipients) {
+      const emailExists = currentSigners.some(
+        (s) => s.email.toLowerCase() === recipient.email.toLowerCase(),
+      );
+
+      const nameExists = currentSigners.some(
+        (s) => s.name.toLowerCase() === recipient.name.toLowerCase(),
+      );
+
+      if ((emailExists && recipient.email) || (nameExists && recipient.name)) {
+        continue;
+      }
+
+      currentSigners.push({
+        formId: nanoid(12),
+        name: recipient.name,
+        email: recipient.email,
+        role: recipient.role,
+        actionAuth: [],
+        signingOrder: nextSigningOrder,
+      });
+
+      nextSigningOrder += 1;
+    }
+
+    form.setValue('signers', normalizeSigningOrders(currentSigners), {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+
+    toast({
+      title: plural(detectedRecipients.length, {
+        one: `Recipient added`,
+        other: `Recipients added`,
+      }),
+      description: plural(detectedRecipients.length, {
+        one: `# recipient have been added from AI detection.`,
+        other: `# recipients have been added from AI detection.`,
+      }),
+    });
+  };
+
   const onRemoveSigner = (index: number) => {
     const signer = signers[index];
 
@@ -306,8 +428,14 @@ export const EnvelopeEditorRecipientForm = () => {
     index: number,
     suggestion: RecipientAutoCompleteOption,
   ) => {
-    setValue(`signers.${index}.email`, suggestion.email);
-    setValue(`signers.${index}.name`, suggestion.name || '');
+    setValue(`signers.${index}.email`, suggestion.email, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+    setValue(`signers.${index}.name`, suggestion.name || '', {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
   };
 
   const onDragEnd = useCallback(
@@ -460,21 +588,7 @@ export const EnvelopeEditorRecipientForm = () => {
       return;
     }
 
-    const formValueSigners = formValues.signers || [];
-
-    // Remove the last signer if it's empty.
-    const nonEmptyRecipients = formValueSigners.filter((signer, i) => {
-      if (i === formValueSigners.length - 1 && signer.email === '') {
-        return false;
-      }
-
-      return true;
-    });
-
-    const validatedFormValues = ZEnvelopeRecipientsForm.safeParse({
-      ...formValues,
-      signers: nonEmptyRecipients,
-    });
+    const validatedFormValues = ZEnvelopeRecipientsForm.safeParse(formValues);
 
     if (!validatedFormValues.success) {
       return;
@@ -543,6 +657,28 @@ export const EnvelopeEditorRecipientForm = () => {
         </div>
 
         <div className="flex flex-row items-center space-x-2">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="outline"
+                type="button"
+                size="sm"
+                disabled={isSubmitting}
+                onClick={onDetectRecipientsClick}
+              >
+                <SparklesIcon className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+
+            <TooltipContent>
+              {team.preferences.aiFeaturesEnabled ? (
+                <Trans>Detect recipients with AI</Trans>
+              ) : (
+                <Trans>Enable AI detection</Trans>
+              )}
+            </TooltipContent>
+          </Tooltip>
+
           <Button
             variant="outline"
             className="flex flex-row items-center"
@@ -570,7 +706,7 @@ export const EnvelopeEditorRecipientForm = () => {
       <CardContent>
         <AnimateGenericFadeInOut motionKey={showAdvancedSettings ? 'Show' : 'Hide'}>
           <Form {...form}>
-            <div className="bg-accent/50 -mt-2 mb-2 space-y-4 rounded-md p-4">
+            <div className="-mt-2 mb-2 space-y-4 rounded-md bg-accent/50 p-4">
               {organisation.organisationClaim.flags.cfr21 && (
                 <div className="flex flex-row items-center">
                   <Checkbox
@@ -618,9 +754,7 @@ export const EnvelopeEditorRecipientForm = () => {
                             });
                           }
                         }}
-                        disabled={
-                          isSubmitting || hasDocumentBeenSent || emptySigners().length !== 0
-                        }
+                        disabled={isSubmitting || hasDocumentBeenSent}
                       />
                     </FormControl>
 
@@ -634,7 +768,7 @@ export const EnvelopeEditorRecipientForm = () => {
 
                       <Tooltip>
                         <TooltipTrigger asChild>
-                          <span className="text-muted-foreground ml-1 cursor-help">
+                          <span className="ml-1 cursor-help text-muted-foreground">
                             <HelpCircleIcon className="h-3.5 w-3.5" />
                           </span>
                         </TooltipTrigger>
@@ -679,7 +813,7 @@ export const EnvelopeEditorRecipientForm = () => {
 
                         <Tooltip>
                           <TooltipTrigger asChild>
-                            <span className="text-muted-foreground ml-1 cursor-help">
+                            <span className="ml-1 cursor-help text-muted-foreground">
                               <HelpCircleIcon className="h-3.5 w-3.5" />
                             </span>
                           </TooltipTrigger>
@@ -716,7 +850,7 @@ export const EnvelopeEditorRecipientForm = () => {
                   >
                     {signers.map((signer, index) => (
                       <Draggable
-                        key={`${signer.id}-${signer.signingOrder}`}
+                        key={`${signer.nativeId}-${signer.signingOrder}`}
                         draggableId={signer['nativeId']}
                         index={index}
                         isDragDisabled={
@@ -732,7 +866,7 @@ export const EnvelopeEditorRecipientForm = () => {
                             {...provided.draggableProps}
                             {...provided.dragHandleProps}
                             className={cn('py-1', {
-                              'bg-widget-foreground pointer-events-none rounded-md pt-2':
+                              'pointer-events-none rounded-md bg-widget-foreground pt-2':
                                 snapshot.isDragging,
                             })}
                           >
@@ -806,7 +940,7 @@ export const EnvelopeEditorRecipientForm = () => {
                                       })}
                                     >
                                       {!showAdvancedSettings && index === 0 && (
-                                        <FormLabel required>
+                                        <FormLabel>
                                           <Trans>Email</Trans>
                                         </FormLabel>
                                       )}
@@ -860,7 +994,7 @@ export const EnvelopeEditorRecipientForm = () => {
                                       <FormControl>
                                         <RecipientAutoCompleteInput
                                           type="text"
-                                          placeholder={t`Name`}
+                                          placeholder={t`Recipient ${index + 1}`}
                                           {...field}
                                           disabled={
                                             snapshot.isDragging ||
@@ -992,6 +1126,20 @@ export const EnvelopeEditorRecipientForm = () => {
           onOpenChange={setShowSigningOrderConfirmation}
           onConfirm={handleSigningOrderDisable}
         />
+
+        <AiRecipientDetectionDialog
+          open={isAiDialogOpen}
+          onOpenChange={onAiDialogOpenChange}
+          onComplete={onAiDetectionComplete}
+          envelopeId={envelope.id}
+          teamId={envelope.teamId}
+        />
+
+        <AiFeaturesEnableDialog
+          open={isAiEnableDialogOpen}
+          onOpenChange={setIsAiEnableDialogOpen}
+          onEnabled={onAiFeaturesEnabled}
+        />
       </CardContent>
     </Card>
   );

apps/remix/app/components/general/envelope-editor/envelope-editor-settings-dialog.tsx

@@ -339,9 +339,11 @@ export const EnvelopeEditorSettingsDialog = ({
 
       <DialogContent className="flex w-full !max-w-5xl flex-row gap-0 p-0">
         {/* Sidebar. */}
-        <div className="bg-accent/20 flex w-80 flex-col border-r">
+        <div className="flex w-80 flex-col border-r bg-accent/20">
           <DialogHeader className="p-6 pb-4">
-            <DialogTitle>Document Settings</DialogTitle>
+            <DialogTitle>
+              <Trans>Document Settings</Trans>
+            </DialogTitle>
           </DialogHeader>
 
           <nav className="col-span-12 mb-8 flex flex-wrap items-center justify-start gap-x-2 gap-y-4 px-4 md:col-span-3 md:w-full md:flex-col md:items-start md:gap-y-2">
@@ -390,7 +392,7 @@ export const EnvelopeEditorSettingsDialog = ({
                                   <InfoIcon className="mx-2 h-4 w-4" />
                                 </TooltipTrigger>
 
-                                <TooltipContent className="text-foreground max-w-md space-y-2 p-4">
+                                <TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
                                   <Trans>
                                     Controls the language for the document, including the language
                                     to be used for email notifications, and the final certificate
@@ -441,7 +443,7 @@ export const EnvelopeEditorSettingsDialog = ({
                                 }))}
                                 selectedValues={field.value}
                                 onChange={field.onChange}
-                                className="bg-background w-full"
+                                className="w-full bg-background"
                                 emptySelectionPlaceholder="Select signature types"
                               />
                             </FormControl>
@@ -518,7 +520,7 @@ export const EnvelopeEditorSettingsDialog = ({
                                   <InfoIcon className="mx-2 h-4 w-4" />
                                 </TooltipTrigger>
 
-                                <TooltipContent className="text-muted-foreground max-w-xs">
+                                <TooltipContent className="max-w-xs text-muted-foreground">
                                   <Trans>
                                     Add an external ID to the document. This can be used to identify
                                     the document in external systems.
@@ -548,7 +550,7 @@ export const EnvelopeEditorSettingsDialog = ({
                                   <InfoIcon className="mx-2 h-4 w-4" />
                                 </TooltipTrigger>
 
-                                <TooltipContent className="text-muted-foreground max-w-xs">
+                                <TooltipContent className="max-w-xs text-muted-foreground">
                                   <Trans>
                                     Add a URL to redirect the user to once the document is signed
                                   </Trans>
@@ -576,7 +578,7 @@ export const EnvelopeEditorSettingsDialog = ({
                                   <InfoIcon className="mx-2 h-4 w-4" />
                                 </TooltipTrigger>
 
-                                <TooltipContent className="text-foreground max-w-md space-y-2 p-4">
+                                <TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
                                   <h2>
                                     <strong>
                                       <Trans>Document Distribution Method</Trans>
@@ -687,8 +689,10 @@ export const EnvelopeEditorSettingsDialog = ({
                         render={({ field }) => (
                           <FormItem>
                             <FormLabel>
-                              <Trans>Reply To Email</Trans>{' '}
-                              <span className="text-muted-foreground">(Optional)</span>
+                              <Trans>
+                                Reply To Email{' '}
+                                <span className="text-muted-foreground">(Optional)</span>
+                              </Trans>
                             </FormLabel>
 
                             <FormControl>
@@ -726,20 +730,21 @@ export const EnvelopeEditorSettingsDialog = ({
                         render={({ field }) => (
                           <FormItem>
                             <FormLabel className="flex flex-row items-center">
-                              <Trans>Message</Trans>{' '}
-                              <span className="text-muted-foreground">(Optional)</span>
+                              <Trans>
+                                Message <span className="text-muted-foreground">(Optional)</span>
+                              </Trans>
                               <Tooltip>
                                 <TooltipTrigger>
                                   <InfoIcon className="mx-2 h-4 w-4" />
                                 </TooltipTrigger>
-                                <TooltipContent className="text-muted-foreground p-4">
+                                <TooltipContent className="p-4 text-muted-foreground">
                                   <DocumentSendEmailMessageHelper />
                                 </TooltipContent>
                               </Tooltip>
                             </FormLabel>
 
                             <FormControl>
-                              <Textarea className="bg-background h-16 resize-none" {...field} />
+                              <Textarea className="h-16 resize-none bg-background" {...field} />
                             </FormControl>
 
                             <FormMessage />

apps/remix/app/components/general/envelope-editor/envelope-editor-upload-page.tsx

@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react';
 
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import type { DropResult } from '@hello-pangea/dnd';
-import { msg } from '@lingui/core/macro';
+import { msg, plural } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { DocumentStatus } from '@prisma/client';
 import { FileWarningIcon, GripVerticalIcon, Loader2 } from 'lucide-react';
@@ -226,7 +226,12 @@ export const EnvelopeEditorUploadPage = () => {
     }
 
     if (maximumEnvelopeItemCount <= localFiles.length) {
-      return msg`You cannot upload more than ${maximumEnvelopeItemCount} items per envelope.`;
+      return msg({
+        message: plural(maximumEnvelopeItemCount, {
+          one: `You cannot upload more than # item per envelope.`,
+          other: `You cannot upload more than # items per envelope.`,
+        }),
+      });
     }
 
     return null;
@@ -240,7 +245,10 @@ export const EnvelopeEditorUploadPage = () => {
 
     if (maxItemsReached) {
       toast({
-        title: t`You cannot upload more than ${maximumEnvelopeItemCount} items per envelope.`,
+        title: plural(maximumEnvelopeItemCount, {
+          one: `You cannot upload more than # item per envelope.`,
+          other: `You cannot upload more than # items per envelope.`,
+        }),
         duration: 5000,
         variant: 'destructive',
       });

apps/remix/app/components/general/envelope-editor/envelope-editor.tsx

@@ -175,7 +175,7 @@ export default function EnvelopeEditor() {
               <motion.div
                 layout="size"
                 layoutId="document-flow-container-step"
-                className="absolute inset-y-0 left-0 bg-documenso"
+                className="absolute inset-y-0 left-0 bg-primary"
                 style={{
                   width: `${(100 / envelopeEditorSteps.length) * (currentStepData.order ?? 0)}%`,
                 }}

apps/remix/app/components/general/envelope-editor/envelope-recipient-selector.tsx

@@ -1,5 +1,7 @@
 import { useCallback, useState } from 'react';
 
+import type { I18n } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
 import type { Field, Recipient } from '@prisma/client';
@@ -39,8 +41,15 @@ export const EnvelopeRecipientSelector = ({
   fields,
   align = 'start',
 }: EnvelopeRecipientSelectorProps) => {
+  const { i18n } = useLingui();
+
   const [showRecipientsSelector, setShowRecipientsSelector] = useState(false);
 
+  const getRecipientLabel = useCallback(
+    (recipient: Recipient) => extractRecipientLabel(recipient, recipients, i18n),
+    [recipients],
+  );
+
   return (
     <Popover open={showRecipientsSelector} onOpenChange={setShowRecipientsSelector}>
       <PopoverTrigger asChild>
@@ -49,7 +58,7 @@ export const EnvelopeRecipientSelector = ({
           variant="outline"
           role="combobox"
           className={cn(
-            'bg-background text-muted-foreground hover:text-foreground justify-between font-normal',
+            'justify-between bg-background font-normal text-muted-foreground hover:text-foreground',
             getRecipientColorStyles(
               Math.max(
                 recipients.findIndex((r) => r.id === selectedRecipient?.id),
@@ -59,16 +68,12 @@ export const EnvelopeRecipientSelector = ({
             className,
           )}
         >
-          {selectedRecipient?.email && (
+          {selectedRecipient && (
             <span className="flex-1 truncate text-left">
-              {selectedRecipient?.name} ({selectedRecipient?.email})
+              {getRecipientLabel(selectedRecipient)}
             </span>
           )}
 
-          {!selectedRecipient?.email && (
-            <span className="flex-1 truncate text-left">{selectedRecipient?.email}</span>
-          )}
-
           <ChevronsUpDown className="ml-2 h-4 w-4" />
         </Button>
       </PopoverTrigger>
@@ -105,7 +110,7 @@ export const EnvelopeRecipientSelectorCommand = ({
   fields,
   placeholder,
 }: EnvelopeRecipientSelectorCommandProps) => {
-  const { t } = useLingui();
+  const { t, i18n } = useLingui();
 
   const recipientsByRole = useCallback(() => {
     const recipientsByRole: Record<RecipientRole, Recipient[]> = {
@@ -154,6 +159,11 @@ export const EnvelopeRecipientSelectorCommand = ({
     [fields, recipients],
   );
 
+  const getRecipientLabel = useCallback(
+    (recipient: Recipient) => extractRecipientLabel(recipient, recipients, i18n),
+    [recipients],
+  );
+
   return (
     <Command
       value={selectedRecipient ? selectedRecipient.id.toString() : undefined}
@@ -162,21 +172,21 @@ export const EnvelopeRecipientSelectorCommand = ({
       <CommandInput placeholder={placeholder} />
 
       <CommandEmpty>
-        <span className="text-muted-foreground inline-block px-4">
+        <span className="inline-block px-4 text-muted-foreground">
           <Trans>No recipient matching this description was found.</Trans>
         </span>
       </CommandEmpty>
 
       {recipientsByRoleToDisplay().map(([role, roleRecipients], roleIndex) => (
         <CommandGroup key={roleIndex}>
-          <div className="text-muted-foreground mb-1 ml-2 mt-2 text-xs font-medium">
+          <div className="mb-1 ml-2 mt-2 text-xs font-medium text-muted-foreground">
             {t(RECIPIENT_ROLES_DESCRIPTION[role].roleNamePlural)}
           </div>
 
           {roleRecipients.length === 0 && (
             <div
               key={`${role}-empty`}
-              className="text-muted-foreground/80 px-4 pb-4 pt-2.5 text-center text-xs"
+              className="px-4 pb-4 pt-2.5 text-center text-xs text-muted-foreground/80"
             >
               <Trans>No recipients with this role</Trans>
             </div>
@@ -205,18 +215,12 @@ export const EnvelopeRecipientSelectorCommand = ({
               }}
             >
               <span
-                className={cn('text-foreground/70 truncate', {
+                className={cn('truncate text-foreground/70', {
                   'text-foreground/80': recipient.id === selectedRecipient?.id,
                   'opacity-50': isRecipientDisabled(recipient.id),
                 })}
               >
-                {recipient.name && (
-                  <span title={`${recipient.name} (${recipient.email})`}>
-                    {recipient.name} ({recipient.email})
-                  </span>
-                )}
-
-                {!recipient.name && <span title={recipient.email}>{recipient.email}</span>}
+                {getRecipientLabel(recipient)}
               </span>
 
               <div className="ml-auto flex items-center justify-center">
@@ -234,7 +238,7 @@ export const EnvelopeRecipientSelectorCommand = ({
                       <Info className="z-50 ml-2 h-4 w-4" />
                     </TooltipTrigger>
 
-                    <TooltipContent className="text-muted-foreground max-w-xs">
+                    <TooltipContent className="max-w-xs text-muted-foreground">
                       <Trans>
                         This document has already been sent to this recipient. You can no longer
                         edit this recipient.
@@ -250,3 +254,22 @@ export const EnvelopeRecipientSelectorCommand = ({
     </Command>
   );
 };
+
+const extractRecipientLabel = (recipient: Recipient, recipients: Recipient[], i18n: I18n) => {
+  if (recipient.name && recipient.email) {
+    return `${recipient.name} (${recipient.email})`;
+  }
+
+  if (recipient.name) {
+    return recipient.name;
+  }
+
+  if (recipient.email) {
+    return recipient.email;
+  }
+
+  // Since objects are basically pointers we can use `indexOf` rather than `findIndex`
+  const index = recipients.indexOf(recipient);
+
+  return i18n._(msg`Recipient ${index + 1}`);
+};