v2.2.2

Use Gemini to handle detection of recipients and fields within
documents.

Opt in using organisation or team settings.

Replaces #2128 since the branch was cursed and would include
dependencies that weren't even in the lock file.



https://github.com/user-attachments/assets/e6cbb58f-62b9-4079-a9ae-7af5c4f2e4ec

.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=

.gitignore

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

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">
@@ -174,9 +171,11 @@ git clone https://github.com/<your-username>/documenso
 
 5. Create the database schema by running `npm run prisma:migrate-dev`
 
-6. Run `npm run dev` in the root directory to start
+6. Run `npm run translate:compile` in the root directory to compile lingui
 
-7. Register a new user at http://localhost:3000/signup
+7. Run `npm run dev` in the root directory to start
+
+8. Register a new user at http://localhost:3000/signup
 
 ---
 

apps/documentation/package.json

@@ -15,7 +15,7 @@
     "@documenso/tailwind-config": "*",
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
-    "next": "^15",
+    "next": "^15.5.7",
     "next-plausible": "^3.12.5",
     "nextra": "^3",
     "nextra-theme-docs": "^3",

apps/openpage-api/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@documenso/prisma": "*",
     "luxon": "^3.7.2",
-    "next": "^15"
+    "next": "^15.5.7"
   },
   "devDependencies": {
     "@types/node": "^20",

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/ai-field-detection-dialog.tsx

@@ -0,0 +1,368 @@
+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 { 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">
+                  <Trans>
+                    Page {progress.pagesProcessed} of {progress.totalPages} -{' '}
+                    {progress.fieldsDetected} field(s) 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">
+                    <Trans>We found {detectedFields.length} field(s) in your document.</Trans>
+                  </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,361 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { 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">
+                  <Trans>
+                    Page {progress.pagesProcessed} of {progress.totalPages} -{' '}
+                    {progress.recipientsDetected} recipient(s) 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">
+                    <Trans>
+                      We found {detectedRecipients.length} recipient(s) in your document.
+                    </Trans>
+                  </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

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
@@ -7,9 +7,7 @@ import {
   DocumentDistributionMethod,
   DocumentStatus,
   EnvelopeType,
-  type Field,
   FieldType,
-  type Recipient,
   RecipientRole,
 } from '@prisma/client';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -19,8 +17,8 @@ import { useNavigate } from 'react-router';
 import { match } from 'ts-pattern';
 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 type { TEnvelope } from '@documenso/lib/types/envelope';
 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';
@@ -52,16 +50,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@documenso/ui/primitives/select';
+import { SpinnerBox } from '@documenso/ui/primitives/spinner';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 import { Textarea } from '@documenso/ui/primitives/textarea';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type EnvelopeDistributeDialogProps = {
-  envelope: Pick<TEnvelope, 'id' | 'userId' | 'teamId' | 'status' | 'type' | 'documentMeta'> & {
-    recipients: Recipient[];
-    fields: Pick<Field, 'type' | 'recipientId'>[];
-  };
   onDistribute?: () => Promise<void>;
   documentRootPath: string;
   trigger?: React.ReactNode;
@@ -86,20 +81,20 @@ export const ZEnvelopeDistributeFormSchema = z.object({
 export type TEnvelopeDistributeFormSchema = z.infer<typeof ZEnvelopeDistributeFormSchema>;
 
 export const EnvelopeDistributeDialog = ({
-  envelope,
   trigger,
   documentRootPath,
   onDistribute,
 }: EnvelopeDistributeDialogProps) => {
   const organisation = useCurrentOrganisation();
 
-  const recipients = envelope.recipients;
+  const { envelope, syncEnvelope, isAutosaving, autosaveError } = useCurrentEnvelopeEditor();
 
   const { toast } = useToast();
   const { t } = useLingui();
   const navigate = useNavigate();
 
   const [isOpen, setIsOpen] = useState(false);
+  const [isSyncing, setIsSyncing] = useState(false);
 
   const { mutateAsync: distributeEnvelope } = trpcReact.envelope.distribute.useMutation();
 
@@ -189,6 +184,29 @@ export const EnvelopeDistributeDialog = ({
     }
   };
 
+  const handleSync = async () => {
+    if (isSyncing) {
+      return;
+    }
+
+    setIsSyncing(true);
+
+    try {
+      await syncEnvelope();
+    } catch (err) {
+      console.error(err);
+    }
+
+    setIsSyncing(false);
+  };
+
+  useEffect(() => {
+    // Resync the whole envelope if the envelope is mid saving.
+    if (isOpen && (isAutosaving || autosaveError)) {
+      void handleSync();
+    }
+  }, [isOpen]);
+
   if (envelope.status !== DocumentStatus.DRAFT || envelope.type !== EnvelopeType.DOCUMENT) {
     return null;
   }
@@ -208,7 +226,7 @@ export const EnvelopeDistributeDialog = ({
           </DialogDescription>
         </DialogHeader>
 
-        {!invalidEnvelopeCode ? (
+        {!invalidEnvelopeCode || isSyncing ? (
           <Form {...form}>
             <form onSubmit={handleSubmit(onFormSubmit)}>
               <fieldset disabled={isSubmitting}>
@@ -236,7 +254,16 @@ export const EnvelopeDistributeDialog = ({
                   })}
                 >
                   <AnimatePresence initial={false} mode="wait">
-                    {distributionMethod === DocumentDistributionMethod.EMAIL && (
+                    {isSyncing ? (
+                      <motion.div
+                        key={'Flushing'}
+                        initial={{ opacity: 0, y: 5 }}
+                        animate={{ opacity: 1, y: 0, transition: { duration: 0.3 } }}
+                        exit={{ opacity: 0, transition: { duration: 0.15 } }}
+                      >
+                        <SpinnerBox spinnerProps={{ size: 'sm' }} className="h-72" />
+                      </motion.div>
+                    ) : distributionMethod === DocumentDistributionMethod.EMAIL ? (
                       <motion.div
                         key={'Emails'}
                         initial={{ opacity: 0, y: 5 }}
@@ -339,7 +366,7 @@ export const EnvelopeDistributeDialog = ({
                                       <TooltipTrigger type="button">
                                         <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>
@@ -347,7 +374,7 @@ export const EnvelopeDistributeDialog = ({
 
                                   <FormControl>
                                     <Textarea
-                                      className="bg-background mt-2 h-16 resize-none"
+                                      className="mt-2 h-16 resize-none bg-background"
                                       {...field}
                                       maxLength={5000}
                                     />
@@ -359,9 +386,7 @@ export const EnvelopeDistributeDialog = ({
                           </fieldset>
                         </Form>
                       </motion.div>
-                    )}
-
-                    {distributionMethod === DocumentDistributionMethod.NONE && (
+                    ) : distributionMethod === DocumentDistributionMethod.NONE ? (
                       <motion.div
                         key={'Links'}
                         initial={{ opacity: 0, y: 5 }}
@@ -369,7 +394,7 @@ export const EnvelopeDistributeDialog = ({
                         exit={{ opacity: 0, transition: { duration: 0.15 } }}
                         className="min-h-60 rounded-lg border"
                       >
-                        <div className="text-muted-foreground py-24 text-center text-sm">
+                        <div className="py-24 text-center text-sm text-muted-foreground">
                           <p>
                             <Trans>We won't send anything to notify recipients.</Trans>
                           </p>
@@ -382,7 +407,7 @@ export const EnvelopeDistributeDialog = ({
                           </p>
                         </div>
                       </motion.div>
-                    )}
+                    ) : null}
                   </AnimatePresence>
                 </div>
 
@@ -393,7 +418,7 @@ export const EnvelopeDistributeDialog = ({
                     </Button>
                   </DialogClose>
 
-                  <Button loading={isSubmitting} type="submit">
+                  <Button loading={isSubmitting} disabled={isSyncing} type="submit">
                     {distributionMethod === DocumentDistributionMethod.EMAIL ? (
                       <Trans>Send</Trans>
                     ) : (

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

@@ -367,7 +367,7 @@ const BillingPlanForm = ({
           <div className="w-full text-left">
             <div className="flex items-center justify-between">
               <p className="text-medium">
-                <Trans>Free</Trans>
+                <Trans context="Plan price">Free</Trans>
               </p>
 
               <Badge size="small" variant="neutral" className="ml-1.5">

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',
       });
     }

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/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 {

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

@@ -58,6 +58,7 @@ export type TDocumentPreferencesFormSchema = {
   includeSigningCertificate: boolean | null;
   includeAuditLog: boolean | null;
   signatureTypes: DocumentSignatureType[];
+  aiFeaturesEnabled: boolean | null;
 };
 
 type SettingsSubset = Pick<
@@ -72,11 +73,13 @@ type SettingsSubset = Pick<
   | 'typedSignatureEnabled'
   | 'uploadSignatureEnabled'
   | 'drawSignatureEnabled'
+  | 'aiFeaturesEnabled'
 >;
 
 export type DocumentPreferencesFormProps = {
   settings: SettingsSubset;
   canInherit: boolean;
+  isAiFeaturesConfigured?: boolean;
   onFormSubmit: (data: TDocumentPreferencesFormSchema) => Promise<void>;
 };
 
@@ -84,6 +87,7 @@ export const DocumentPreferencesForm = ({
   settings,
   onFormSubmit,
   canInherit,
+  isAiFeaturesConfigured = false,
 }: DocumentPreferencesFormProps) => {
   const { t } = useLingui();
   const { user, organisations } = useSession();
@@ -105,6 +109,7 @@ export const DocumentPreferencesForm = ({
     signatureTypes: z.array(z.nativeEnum(DocumentSignatureType)).min(canInherit ? 0 : 1, {
       message: msg`At least one signature type must be enabled`.id,
     }),
+    aiFeaturesEnabled: z.boolean().nullable(),
   });
 
   const form = useForm<TDocumentPreferencesFormSchema>({
@@ -120,6 +125,7 @@ export const DocumentPreferencesForm = ({
       includeSigningCertificate: settings.includeSigningCertificate,
       includeAuditLog: settings.includeAuditLog,
       signatureTypes: extractTeamSignatureSettings({ ...settings }),
+      aiFeaturesEnabled: settings.aiFeaturesEnabled,
     },
     resolver: zodResolver(ZDocumentPreferencesFormSchema),
   });
@@ -312,7 +318,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 +384,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 +515,59 @@ export const DocumentPreferencesForm = ({
             )}
           />
 
+          {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/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',

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/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',
       });
 

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-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/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 { 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, 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,7 @@ import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/al
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
 
+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 +45,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 +72,15 @@ 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 selectedField = useMemo(
     () => structuredClone(editorFields.selectedField),
@@ -96,6 +105,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.
    */
@@ -202,6 +229,35 @@ export const EnvelopeEditorFieldsPage = () => {
               selectedRecipientId={editorFields.selectedRecipient?.id ?? null}
               selectedEnvelopeItemId={currentEnvelopeItem?.id ?? null}
             />
+
+            {team.preferences.aiFeaturesEnabled && (
+              <>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="mt-4 w-full"
+                  onClick={() => setIsAiFieldDialogOpen(true)}
+                  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}
+                />
+              </>
+            )}
           </section>
 
           {/* Field details section. */}
@@ -243,7 +299,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-header.tsx

@@ -30,18 +30,11 @@ import { EnvelopeItemTitleInput } from './envelope-editor-title-input';
 export default function EnvelopeEditorHeader() {
   const { t } = useLingui();
 
-  const {
-    envelope,
-    isDocument,
-    isTemplate,
-    updateEnvelope,
-    autosaveError,
-    relativePath,
-    editorFields,
-  } = useCurrentEnvelopeEditor();
+  const { envelope, isDocument, isTemplate, updateEnvelope, autosaveError, relativePath } =
+    useCurrentEnvelopeEditor();
 
   return (
-    <nav className="bg-background border-border w-full border-b px-4 py-3 md:px-6">
+    <nav className="w-full border-b border-border bg-background px-4 py-3 md:px-6">
       <div className="flex items-center justify-between">
         <div className="flex items-center space-x-4">
           <Link to="/">
@@ -147,10 +140,6 @@ export default function EnvelopeEditorHeader() {
           {isDocument && (
             <>
               <EnvelopeDistributeDialog
-                envelope={{
-                  ...envelope,
-                  fields: editorFields.localFields,
-                }}
                 documentRootPath={relativePath.documentRootPath}
                 trigger={
                   <Button size="sm">

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

@@ -12,8 +12,9 @@ import { msg } 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 { useSearchParams } from 'react-router';
 import { isDeepEqual, prop, sortBy } from 'remeda';
 import { z } from 'zod';
 
@@ -22,6 +23,7 @@ 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,
@@ -60,6 +62,9 @@ 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 { AiRecipientDetectionDialog } from '~/components/dialogs/ai-recipient-detection-dialog';
+import { useCurrentTeam } from '~/providers/team';
+
 const ZEnvelopeRecipientsForm = z.object({
   signers: z.array(
     z.object({
@@ -85,14 +90,36 @@ 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('');
 
+  // AI recipient detection dialog state
+  const [isAiDialogOpen, setIsAiDialogOpen] = useState(() => searchParams.get('ai') === 'true');
+
+  const onAiDialogOpenChange = (open: boolean) => {
+    setIsAiDialogOpen(open);
+
+    if (!open && searchParams.get('ai') === 'true') {
+      setSearchParams(
+        (prev) => {
+          const newParams = new URLSearchParams(prev);
+
+          newParams.delete('ai');
+
+          return newParams;
+        },
+        { replace: true },
+      );
+    }
+  };
+
   const debouncedRecipientSearchQuery = useDebouncedValue(recipientSearchQuery, 500);
 
   const initialId = useId();
@@ -244,6 +271,71 @@ 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: t`Recipients added`,
+      description: t`${detectedRecipients.length} recipient(s) have been added from AI detection.`,
+    });
+  };
+
   const onRemoveSigner = (index: number) => {
     const signer = signers[index];
 
@@ -306,8 +398,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(
@@ -543,6 +641,26 @@ export const EnvelopeEditorRecipientForm = () => {
         </div>
 
         <div className="flex flex-row items-center space-x-2">
+          {team.preferences.aiFeaturesEnabled && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  type="button"
+                  size="sm"
+                  disabled={isSubmitting}
+                  onClick={() => setIsAiDialogOpen(true)}
+                >
+                  <SparklesIcon className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+
+              <TooltipContent>
+                <Trans>Detect recipients with AI</Trans>
+              </TooltipContent>
+            </Tooltip>
+          )}
+
           <Button
             variant="outline"
             className="flex flex-row items-center"
@@ -570,7 +688,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
@@ -634,7 +752,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 +797,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 +834,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 +850,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,
                             })}
                           >
@@ -992,6 +1110,14 @@ export const EnvelopeEditorRecipientForm = () => {
           onOpenChange={setShowSigningOrderConfirmation}
           onConfirm={handleSigningOrderDisable}
         />
+
+        <AiRecipientDetectionDialog
+          open={isAiDialogOpen}
+          onOpenChange={onAiDialogOpenChange}
+          onComplete={onAiDetectionComplete}
+          envelopeId={envelope.id}
+          teamId={envelope.teamId}
+        />
       </CardContent>
     </Card>
   );

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

@@ -152,30 +152,30 @@ export default function EnvelopeEditor() {
     envelopeEditorSteps.find((step) => step.id === currentStep) || envelopeEditorSteps[0];
 
   return (
-    <div className="dark:bg-background h-screen w-screen bg-gray-50">
+    <div className="h-screen w-screen bg-gray-50 dark:bg-background">
       <EnvelopeEditorHeader />
 
       {/* Main Content Area */}
       <div className="flex h-[calc(100vh-4rem)] w-screen">
         {/* Left Section - Step Navigation */}
-        <div className="bg-background border-border flex w-80 flex-shrink-0 flex-col overflow-y-auto border-r py-4">
+        <div className="flex w-80 flex-shrink-0 flex-col overflow-y-auto border-r border-border bg-background py-4">
           {/* Left section step selector. */}
           <div className="px-4">
-            <h3 className="text-foreground flex items-end justify-between text-sm font-semibold">
+            <h3 className="flex items-end justify-between text-sm font-semibold text-foreground">
               {isDocument ? <Trans>Document Editor</Trans> : <Trans>Template Editor</Trans>}
 
-              <span className="text-muted-foreground bg-muted/50 ml-2 rounded border px-2 py-0.5 text-xs">
+              <span className="ml-2 rounded border bg-muted/50 px-2 py-0.5 text-xs text-muted-foreground">
                 <Trans context="The step counter">
                   Step {currentStepData.order}/{envelopeEditorSteps.length}
                 </Trans>
               </span>
             </h3>
 
-            <div className="bg-muted relative my-4 h-[4px] rounded-md">
+            <div className="relative my-4 h-[4px] rounded-md bg-muted">
               <motion.div
                 layout="size"
                 layoutId="document-flow-container-step"
-                className="bg-documenso absolute inset-y-0 left-0"
+                className="absolute inset-y-0 left-0 bg-documenso"
                 style={{
                   width: `${(100 / envelopeEditorSteps.length) * (currentStepData.order ?? 0)}%`,
                 }}
@@ -219,7 +219,7 @@ export default function EnvelopeEditor() {
                         >
                           {t(step.title)}
                         </div>
-                        <div className="text-muted-foreground text-xs">{t(step.description)}</div>
+                        <div className="text-xs text-muted-foreground">{t(step.description)}</div>
                       </div>
                     </div>
                   </div>
@@ -232,7 +232,7 @@ export default function EnvelopeEditor() {
 
           {/* Quick Actions. */}
           <div className="space-y-3 px-4">
-            <h4 className="text-foreground text-sm font-semibold">
+            <h4 className="text-sm font-semibold text-foreground">
               <Trans>Quick Actions</Trans>
             </h4>
             <EnvelopeEditorSettingsDialog
@@ -246,10 +246,6 @@ export default function EnvelopeEditor() {
 
             {isDocument && (
               <EnvelopeDistributeDialog
-                envelope={{
-                  ...envelope,
-                  fields: editorFields.localFields,
-                }}
                 documentRootPath={relativePath.documentRootPath}
                 trigger={
                   <Button variant="ghost" size="sm" className="w-full justify-start">

apps/remix/app/components/general/envelope/envelope-drop-zone-wrapper.tsx

@@ -1,5 +1,6 @@
 import { type ReactNode, useState } from 'react';
 
+import { plural } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
 import { EnvelopeType } from '@prisma/client';
@@ -115,7 +116,9 @@ export const EnvelopeDropZoneWrapper = ({
           ? formatDocumentsPath(team.url)
           : formatTemplatesPath(team.url);
 
-      await navigate(`${pathPrefix}/${id}/edit`);
+      const aiQueryParam = team.preferences.aiFeaturesEnabled ? '?ai=true' : '';
+
+      await navigate(`${pathPrefix}/${id}/edit${aiQueryParam}`);
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -153,7 +156,10 @@ export const EnvelopeDropZoneWrapper = ({
 
     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',
       });
@@ -220,9 +226,9 @@ export const EnvelopeDropZoneWrapper = ({
       {children}
 
       {isDragActive && (
-        <div className="bg-muted/60 fixed left-0 top-0 z-[9999] h-full w-full backdrop-blur-[4px]">
+        <div className="fixed left-0 top-0 z-[9999] h-full w-full bg-muted/60 backdrop-blur-[4px]">
           <div className="pointer-events-none flex h-full w-full flex-col items-center justify-center">
-            <h2 className="text-foreground text-2xl font-semibold">
+            <h2 className="text-2xl font-semibold text-foreground">
               {type === EnvelopeType.DOCUMENT ? (
                 <Trans>Upload Document</Trans>
               ) : (
@@ -230,7 +236,7 @@ export const EnvelopeDropZoneWrapper = ({
               )}
             </h2>
 
-            <p className="text-muted-foreground text-md mt-4">
+            <p className="text-md mt-4 text-muted-foreground">
               <Trans>Drag and drop your PDF file here</Trans>
             </p>
 
@@ -247,7 +253,7 @@ export const EnvelopeDropZoneWrapper = ({
               team?.id === undefined &&
               remaining.documents > 0 &&
               Number.isFinite(remaining.documents) && (
-                <p className="text-muted-foreground/80 mt-4 text-sm">
+                <p className="mt-4 text-sm text-muted-foreground/80">
                   <Trans>
                     {remaining.documents} of {quota.documents} documents remaining this month.
                   </Trans>
@@ -258,10 +264,10 @@ export const EnvelopeDropZoneWrapper = ({
       )}
 
       {isLoading && (
-        <div className="bg-muted/30 absolute inset-0 z-50 backdrop-blur-[2px]">
+        <div className="absolute inset-0 z-50 bg-muted/30 backdrop-blur-[2px]">
           <div className="pointer-events-none flex h-1/2 w-full flex-col items-center justify-center">
-            <Loader className="text-primary h-12 w-12 animate-spin" />
-            <p className="text-foreground mt-8 font-medium">
+            <Loader className="h-12 w-12 animate-spin text-primary" />
+            <p className="mt-8 font-medium text-foreground">
               <Trans>Uploading</Trans>
             </p>
           </div>

apps/remix/app/components/general/envelope/envelope-upload-button.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 
-import { msg } from '@lingui/core/macro';
+import { msg, plural } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
 import { EnvelopeType } from '@prisma/client';
@@ -108,7 +108,9 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
           ? formatDocumentsPath(team.url)
           : formatTemplatesPath(team.url);
 
-      await navigate(`${pathPrefix}/${id}/edit`);
+      const aiQueryParam = team.preferences.aiFeaturesEnabled ? '?ai=true' : '';
+
+      await navigate(`${pathPrefix}/${id}/edit${aiQueryParam}`);
 
       toast({
         title: type === EnvelopeType.DOCUMENT ? t`Document uploaded` : t`Template uploaded`,
@@ -153,7 +155,10 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
 
     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/tables/admin-dashboard-users-table.tsx

@@ -51,7 +51,7 @@ export const AdminDashboardUsersTable = ({
   const columns = useMemo(() => {
     return [
       {
-        header: 'ID',
+        header: _(msg`ID`),
         accessorKey: 'id',
         cell: ({ row }) => <div>{row.original.id}</div>,
       },

apps/remix/app/components/tables/admin-document-recipient-item-table.tsx

@@ -57,7 +57,7 @@ export const AdminDocumentRecipientItemTable = ({ recipient }: RecipientItemProp
   const columns = useMemo(() => {
     return [
       {
-        header: 'ID',
+        header: _(msg`ID`),
         accessorKey: 'id',
         cell: ({ row }) => <div>{row.original.id}</div>,
       },

apps/remix/app/components/tables/admin-organisations-table.tsx

@@ -113,7 +113,11 @@ export const AdminOrganisationsTable = ({
                 isPaid ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
               }`}
             >
-              {isPaid ? t`Paid` : t`Free`}
+              {isPaid ? (
+                <Trans context="Subscription status">Paid</Trans>
+              ) : (
+                <Trans context="Subscription status">Free</Trans>
+              )}
             </div>
           );
         },
@@ -131,7 +135,7 @@ export const AdminOrganisationsTable = ({
               <ExternalLinkIcon className="h-4 w-4" />
             </Link>
           ) : (
-            'None'
+            <Trans>None</Trans>
           ),
       },
       {

apps/remix/app/components/tables/document-logs-table.tsx

@@ -96,11 +96,11 @@ export const DocumentLogsTable = ({ documentId }: DocumentLogsTableProps) => {
         cell: ({ row }) => <span>{formatDocumentAuditLogAction(_, row.original).description}</span>,
       },
       {
-        header: 'IP Address',
+        header: _(msg`IP Address`),
         accessorKey: 'ipAddress',
       },
       {
-        header: 'Browser',
+        header: _(msg`Browser`),
         cell: ({ row }) => {
           if (!row.original.userAgent) {
             return 'N/A';

apps/remix/app/components/tables/settings-security-activity-table.tsx

@@ -104,7 +104,7 @@ export const SettingsSecurityActivityTable = () => {
         },
       },
       {
-        header: 'IP Address',
+        header: _(msg`IP Address`),
         accessorKey: 'ipAddress',
         cell: ({ row }) => row.original.ipAddress ?? 'N/A',
       },

apps/remix/app/components/tables/user-billing-organisations-table.tsx

@@ -28,19 +28,19 @@ export const UserBillingOrganisationsTable = () => {
   const getSubscriptionStatusDisplay = (status: SubscriptionStatus | undefined) => {
     return match(status)
       .with(SubscriptionStatus.ACTIVE, () => ({
-        label: t`Active`,
+        label: t({ message: `Active`, context: `Subscription status` }),
         variant: 'default' as const,
       }))
       .with(SubscriptionStatus.PAST_DUE, () => ({
-        label: t`Past Due`,
+        label: t({ message: `Past Due`, context: `Subscription status` }),
         variant: 'warning' as const,
       }))
       .with(SubscriptionStatus.INACTIVE, () => ({
-        label: t`Inactive`,
+        label: t({ message: `Inactive`, context: `Subscription status` }),
         variant: 'neutral' as const,
       }))
       .otherwise(() => ({
-        label: t`Free`,
+        label: t({ message: `Free`, context: `Subscription status` }),
         variant: 'neutral' as const,
       }));
   };

apps/remix/app/routes/_authenticated+/admin+/documents._index.tsx

@@ -114,7 +114,7 @@ export default function AdminDocumentsPage() {
         },
       },
       {
-        header: 'Last updated',
+        header: _(msg`Last updated`),
         accessorKey: 'updatedAt',
         cell: ({ row }) => i18n.date(row.original.updatedAt),
       },

apps/remix/app/routes/_authenticated+/admin+/stats.tsx

@@ -152,12 +152,6 @@ export default function AdminStatsPage({ loaderData }: Route.ComponentProps) {
         <div className="mt-5 grid grid-cols-2 gap-8">
           <MonthlyActiveUsersChart title={_(msg`MAU (signed in)`)} data={monthlyActiveUsers} />
 
-          <MonthlyActiveUsersChart
-            title={_(msg`Cumulative MAU (signed in)`)}
-            data={monthlyActiveUsers}
-            cummulative
-          />
-
           <AdminStatsUsersWithDocumentsChart
             data={monthlyUsersWithDocuments}
             title={_(msg`MAU (created document)`)}

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.document.tsx

@@ -1,8 +1,10 @@
 import { useLingui } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
+import { useLoaderData } from 'react-router';
 
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import { IS_AI_FEATURES_CONFIGURED } from '@documenso/lib/constants/app';
 import { DocumentSignatureType } from '@documenso/lib/constants/document';
 import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { trpc } from '@documenso/trpc/react';
@@ -19,9 +21,16 @@ export function meta() {
   return appMetaTags('Document Preferences');
 }
 
-export default function OrganisationSettingsDocumentPage() {
-  const { organisations } = useSession();
+export const loader = () => {
+  return {
+    isAiFeaturesConfigured: IS_AI_FEATURES_CONFIGURED(),
+  };
+};
 
+export default function OrganisationSettingsDocumentPage() {
+  const { isAiFeaturesConfigured } = useLoaderData<typeof loader>();
+
+  const { organisations } = useSession();
   const organisation = useCurrentOrganisation();
 
   const { t } = useLingui();
@@ -48,6 +57,7 @@ export default function OrganisationSettingsDocumentPage() {
         includeSigningCertificate,
         includeAuditLog,
         signatureTypes,
+        aiFeaturesEnabled,
       } = data;
 
       if (
@@ -56,7 +66,8 @@ export default function OrganisationSettingsDocumentPage() {
         documentDateFormat === null ||
         includeSenderDetails === null ||
         includeSigningCertificate === null ||
-        includeAuditLog === null
+        includeAuditLog === null ||
+        aiFeaturesEnabled === null
       ) {
         throw new Error('Should not be possible.');
       }
@@ -74,6 +85,7 @@ export default function OrganisationSettingsDocumentPage() {
           typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
           uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
           drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
+          aiFeaturesEnabled,
         },
       });
 
@@ -93,7 +105,7 @@ export default function OrganisationSettingsDocumentPage() {
   if (isLoadingOrganisation || !organisationWithSettings) {
     return (
       <div className="flex items-center justify-center rounded-lg py-32">
-        <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+        <Loader className="h-6 w-6 animate-spin text-muted-foreground" />
       </div>
     );
   }
@@ -110,6 +122,7 @@ export default function OrganisationSettingsDocumentPage() {
       <section>
         <DocumentPreferencesForm
           canInherit={false}
+          isAiFeaturesConfigured={isAiFeaturesConfigured}
           settings={organisationWithSettings.organisationGlobalSettings}
           onFormSubmit={onDocumentPreferencesFormSubmit}
         />

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.document.tsx

@@ -1,6 +1,8 @@
 import { useLingui } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
+import { useLoaderData } from 'react-router';
 
+import { IS_AI_FEATURES_CONFIGURED } from '@documenso/lib/constants/app';
 import { DocumentSignatureType } from '@documenso/lib/constants/document';
 import { trpc } from '@documenso/trpc/react';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -17,7 +19,17 @@ export function meta() {
   return appMetaTags('Document Preferences');
 }
 
+export const loader = () => {
+  return {
+    isAiFeaturesConfigured: IS_AI_FEATURES_CONFIGURED(),
+  };
+};
+
 export default function TeamsSettingsPage() {
+  const { isAiFeaturesConfigured } = useLoaderData<typeof loader>();
+
+  console.log('isAiFeaturesConfigured', isAiFeaturesConfigured);
+
   const team = useCurrentTeam();
 
   const { t } = useLingui();
@@ -40,6 +52,7 @@ export default function TeamsSettingsPage() {
         includeSigningCertificate,
         includeAuditLog,
         signatureTypes,
+        aiFeaturesEnabled,
       } = data;
 
       await updateTeamSettings({
@@ -52,6 +65,7 @@ export default function TeamsSettingsPage() {
           includeSenderDetails,
           includeSigningCertificate,
           includeAuditLog,
+          aiFeaturesEnabled,
           ...(signatureTypes.length === 0
             ? {
                 typedSignatureEnabled: null,
@@ -82,7 +96,7 @@ export default function TeamsSettingsPage() {
   if (isLoadingTeam || !teamWithSettings) {
     return (
       <div className="flex items-center justify-center rounded-lg py-32">
-        <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+        <Loader className="h-6 w-6 animate-spin text-muted-foreground" />
       </div>
     );
   }
@@ -97,6 +111,7 @@ export default function TeamsSettingsPage() {
       <section>
         <DocumentPreferencesForm
           canInherit={true}
+          isAiFeaturesConfigured={isAiFeaturesConfigured}
           settings={teamWithSettings.teamSettings}
           onFormSubmit={onDocumentPreferencesSubmit}
         />

apps/remix/app/routes/_unauthenticated+/organisation.sso.confirmation.$token.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { AlertTriangle, Building2, Database, Eye, Settings, UserCircle2 } from 'lucide-react';
 import { data, isRouteErrorResponse } from 'react-router';
@@ -125,6 +126,7 @@ export async function loader({ params }: Route.LoaderArgs) {
 export default function OrganisationSsoConfirmationTokenPage({ loaderData }: Route.ComponentProps) {
   const { token, type, user, organisation } = loaderData;
 
+  const { _ } = useLingui();
   const { toast } = useToast();
   const navigate = useNavigate();
 
@@ -136,12 +138,12 @@ export default function OrganisationSsoConfirmationTokenPage({ loaderData }: Rou
         await navigate('/');
 
         toast({
-          title: 'Account link declined',
+          title: _(msg`Account link declined`),
         });
       },
       onError: (error) => {
         toast({
-          title: 'Error declining account link',
+          title: _(msg`Error declining account link`),
           description: error.message,
         });
       },
@@ -153,12 +155,12 @@ export default function OrganisationSsoConfirmationTokenPage({ loaderData }: Rou
         await navigate(formatOrganisationLoginPath(organisation.url));
 
         toast({
-          title: 'Account linked successfully',
+          title: _(msg`Account linked successfully`),
         });
       },
       onError: (error) => {
         toast({
-          title: 'Error linking account',
+          title: _(msg`Error linking account`),
           description: error.message,
         });
       },

apps/remix/package.json

@@ -108,5 +108,5 @@
     "vite-plugin-babel-macros": "^1.0.6",
     "vite-tsconfig-paths": "^5.1.4"
   },
-  "version": "2.1.0"
+  "version": "2.2.2"
 }

apps/remix/server/api/ai/detect-fields.client.ts

@@ -0,0 +1,161 @@
+import { z } from 'zod';
+
+import {
+  type TDetectFieldsRequest,
+  ZNormalizedFieldWithContextSchema,
+} from './detect-fields.types';
+
+export type { TDetectFieldsRequest };
+
+// Stream event schemas
+const ZProgressEventSchema = z.object({
+  type: z.literal('progress'),
+  pagesProcessed: z.number(),
+  totalPages: z.number(),
+  fieldsDetected: z.number(),
+});
+
+const ZKeepaliveEventSchema = z.object({
+  type: z.literal('keepalive'),
+});
+
+const ZErrorEventSchema = z.object({
+  type: z.literal('error'),
+  message: z.string(),
+});
+
+const ZCompleteEventSchema = z.object({
+  type: z.literal('complete'),
+  fields: z.array(ZNormalizedFieldWithContextSchema),
+});
+
+const ZStreamEventSchema = z.discriminatedUnion('type', [
+  ZProgressEventSchema,
+  ZKeepaliveEventSchema,
+  ZErrorEventSchema,
+  ZCompleteEventSchema,
+]);
+
+export type DetectFieldsProgressEvent = z.infer<typeof ZProgressEventSchema>;
+export type DetectFieldsCompleteEvent = z.infer<typeof ZCompleteEventSchema>;
+export type DetectFieldsStreamEvent = z.infer<typeof ZStreamEventSchema>;
+
+const ZApiErrorResponseSchema = z.object({
+  error: z.string(),
+});
+
+export class AiApiError extends Error {
+  constructor(
+    message: string,
+    public status: number,
+  ) {
+    super(message);
+    this.name = 'AiApiError';
+  }
+}
+
+export type DetectFieldsOptions = {
+  request: TDetectFieldsRequest;
+  onProgress?: (event: DetectFieldsProgressEvent) => void;
+  onComplete: (event: DetectFieldsCompleteEvent) => void;
+  onError: (error: AiApiError) => void;
+  signal?: AbortSignal;
+};
+
+/**
+ * Detect fields from an envelope using AI with streaming support.
+ */
+export const detectFields = async ({
+  request,
+  onProgress,
+  onComplete,
+  onError,
+  signal,
+}: DetectFieldsOptions): Promise<void> => {
+  const response = await fetch('/api/ai/detect-fields', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(request),
+    signal,
+  });
+
+  // Handle non-streaming error responses (auth failures, etc.)
+  if (!response.ok) {
+    const text = await response.text();
+
+    try {
+      const parsed = ZApiErrorResponseSchema.parse(JSON.parse(text));
+
+      throw new AiApiError(parsed.error, response.status);
+    } catch (e) {
+      if (e instanceof AiApiError) {
+        throw e;
+      }
+
+      throw new AiApiError('Failed to detect fields', response.status);
+    }
+  }
+
+  // Handle streaming response
+  const reader = response.body?.getReader();
+
+  if (!reader) {
+    throw new AiApiError('No response body', 500);
+  }
+
+  const decoder = new TextDecoder();
+  let buffer = '';
+
+  try {
+    let done = false;
+
+    while (!done) {
+      const result = await reader.read();
+      done = result.done;
+
+      if (done) {
+        break;
+      }
+
+      const value = result.value;
+
+      buffer += decoder.decode(value, { stream: true });
+
+      // Process complete lines
+      const lines = buffer.split('\n');
+      buffer = lines.pop() || ''; // Keep incomplete line in buffer
+
+      for (const line of lines) {
+        if (!line.trim()) {
+          continue;
+        }
+
+        try {
+          const event = ZStreamEventSchema.parse(JSON.parse(line));
+
+          switch (event.type) {
+            case 'progress':
+              onProgress?.(event);
+              break;
+            case 'keepalive':
+              // Ignore keepalive, it's just to prevent timeout
+              break;
+            case 'error':
+              onError(new AiApiError(event.message, 500));
+              return;
+            case 'complete':
+              onComplete(event);
+              return;
+          }
+        } catch {
+          // Ignore malformed lines
+          console.warn('Failed to parse stream event:', line);
+        }
+      }
+    }
+  } finally {
+    reader.releaseLock();
+  }
+};

apps/remix/server/api/ai/detect-fields.ts

@@ -0,0 +1,154 @@
+import { sValidator } from '@hono/standard-validator';
+import { Hono } from 'hono';
+import { streamText } from 'hono/streaming';
+
+import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { IS_AI_FEATURES_CONFIGURED } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { detectFieldsFromEnvelope } from '@documenso/lib/server-only/ai/envelope/detect-fields';
+import { getTeamById } from '@documenso/lib/server-only/team/get-team';
+
+import type { HonoEnv } from '../../router';
+import { ZDetectFieldsRequestSchema } from './detect-fields.types';
+
+const KEEPALIVE_INTERVAL_MS = 5000;
+
+export const detectFieldsRoute = new Hono<HonoEnv>().post(
+  '/',
+  sValidator('json', ZDetectFieldsRequestSchema),
+  async (c) => {
+    const logger = c.get('logger');
+
+    try {
+      const { envelopeId, teamId, context } = c.req.valid('json');
+
+      const session = await getSession(c);
+
+      if (!session.user) {
+        throw new AppError(AppErrorCode.UNAUTHORIZED, {
+          message: 'You must be logged in to detect fields',
+        });
+      }
+
+      // Verify user has access to the team (abort early)
+      const team = await getTeamById({
+        userId: session.user.id,
+        teamId,
+      }).catch(() => null);
+
+      if (!team) {
+        throw new AppError(AppErrorCode.UNAUTHORIZED, {
+          message: 'You do not have access to this team',
+        });
+      }
+
+      // Check if AI features are enabled for the team
+      const { aiFeaturesEnabled } = team.derivedSettings;
+
+      if (!aiFeaturesEnabled) {
+        throw new AppError(AppErrorCode.UNAUTHORIZED, {
+          message: 'AI features are not enabled for this team',
+        });
+      }
+
+      if (!IS_AI_FEATURES_CONFIGURED()) {
+        throw new AppError(AppErrorCode.INVALID_REQUEST, {
+          message: 'AI features are not configured. Please contact support to enable AI features.',
+        });
+      }
+
+      logger.info({
+        event: 'ai.detect-fields.start',
+        envelopeId,
+        userId: session.user.id,
+        teamId: team.id,
+        hasContext: !!context,
+      });
+
+      // Return streaming response with NDJSON
+      return streamText(c, async (stream) => {
+        // Start keepalive to prevent connection timeout
+        let interval: NodeJS.Timeout | null = setInterval(() => {
+          void stream.writeln(JSON.stringify({ type: 'keepalive' }));
+        }, KEEPALIVE_INTERVAL_MS);
+
+        try {
+          const allFields = await detectFieldsFromEnvelope({
+            context,
+            envelopeId,
+            userId: session.user.id,
+            teamId: team.id,
+            onProgress: (progress) => {
+              void stream.writeln(
+                JSON.stringify({
+                  type: 'progress',
+                  pagesProcessed: progress.pagesProcessed,
+                  totalPages: progress.totalPages,
+                  fieldsDetected: progress.fieldsDetected,
+                }),
+              );
+            },
+          });
+
+          // Clear keepalive before sending final response
+          if (interval) {
+            clearInterval(interval);
+            interval = null;
+          }
+
+          logger.info({
+            event: 'ai.detect-fields.complete',
+            envelopeId,
+            userId: session.user.id,
+            teamId: team.id,
+            fieldCount: allFields.length,
+          });
+
+          await stream.writeln(
+            JSON.stringify({
+              type: 'complete',
+              fields: allFields,
+            }),
+          );
+        } catch (error) {
+          // Clear keepalive on error
+          if (interval) {
+            clearInterval(interval);
+          }
+
+          // The logger below it stringifies the error, using `console.error`
+          // to attempt to get a stack trace
+          console.error(error);
+
+          logger.error({
+            event: 'ai.detect-fields.error',
+            error,
+          });
+
+          const message = error instanceof AppError ? error.message : 'Failed to detect fields';
+
+          await stream.writeln(
+            JSON.stringify({
+              type: 'error',
+              message,
+            }),
+          );
+        }
+      });
+    } catch (error) {
+      // Handle errors that occur before streaming starts
+      logger.error({
+        event: 'ai.detect-fields.error',
+        error,
+      });
+
+      if (error instanceof AppError) {
+        const { status, body } = AppError.toRestAPIError(error);
+
+        return c.json(body, status);
+      }
+
+      return c.json({ error: 'Failed to detect fields' }, 500);
+    }
+  },
+);

apps/remix/server/api/ai/detect-fields.types.ts

@@ -0,0 +1,54 @@
+import { z } from 'zod';
+
+import {
+  ZConfidenceLevel,
+  ZDetectableFieldType,
+} from '@documenso/lib/server-only/ai/envelope/detect-fields/schema';
+
+export const ZDetectFieldsRequestSchema = z.object({
+  envelopeId: z.string().min(1).describe('The ID of the envelope to detect fields from.'),
+  teamId: z.number().describe('The ID of the team the envelope belongs to.'),
+  context: z
+    .string()
+    .optional()
+    .describe(
+      'Optional context about recipients to help map fields (e.g., "David is the Employee, Lucas is the Manager").',
+    ),
+});
+
+export type TDetectFieldsRequest = z.infer<typeof ZDetectFieldsRequestSchema>;
+
+// Schema for fields returned from streaming API (before recipient resolution)
+export const ZNormalizedFieldWithPageSchema = z.object({
+  type: ZDetectableFieldType,
+  recipientKey: z.string(),
+  positionX: z.number(),
+  positionY: z.number(),
+  width: z.number(),
+  height: z.number(),
+  confidence: ZConfidenceLevel,
+  pageNumber: z.number(),
+});
+
+export type TNormalizedFieldWithPage = z.infer<typeof ZNormalizedFieldWithPageSchema>;
+
+// Schema for fields after recipient resolution
+export const ZNormalizedFieldWithContextSchema = z.object({
+  type: ZDetectableFieldType,
+  positionX: z.number(),
+  positionY: z.number(),
+  width: z.number(),
+  height: z.number(),
+  confidence: ZConfidenceLevel,
+  pageNumber: z.number(),
+  recipientId: z.number(),
+  envelopeItemId: z.string(),
+});
+
+export type TNormalizedFieldWithContext = z.infer<typeof ZNormalizedFieldWithContextSchema>;
+
+export const ZDetectFieldsResponseSchema = z.object({
+  fields: z.array(ZNormalizedFieldWithContextSchema),
+});
+
+export type TDetectFieldsResponse = z.infer<typeof ZDetectFieldsResponseSchema>;

apps/remix/server/api/ai/detect-recipients.client.ts

@@ -0,0 +1,160 @@
+import { z } from 'zod';
+
+import { ZDetectedRecipientSchema } from '@documenso/lib/server-only/ai/envelope/detect-recipients/schema';
+
+import { type TDetectRecipientsRequest } from './detect-recipients.types';
+
+export type { TDetectRecipientsRequest };
+
+// Stream event schemas
+const ZProgressEventSchema = z.object({
+  type: z.literal('progress'),
+  pagesProcessed: z.number(),
+  totalPages: z.number(),
+  recipientsDetected: z.number(),
+});
+
+const ZKeepaliveEventSchema = z.object({
+  type: z.literal('keepalive'),
+});
+
+const ZErrorEventSchema = z.object({
+  type: z.literal('error'),
+  message: z.string(),
+});
+
+const ZCompleteEventSchema = z.object({
+  type: z.literal('complete'),
+  recipients: z.array(ZDetectedRecipientSchema),
+});
+
+const ZStreamEventSchema = z.discriminatedUnion('type', [
+  ZProgressEventSchema,
+  ZKeepaliveEventSchema,
+  ZErrorEventSchema,
+  ZCompleteEventSchema,
+]);
+
+export type DetectRecipientsProgressEvent = z.infer<typeof ZProgressEventSchema>;
+export type DetectRecipientsCompleteEvent = z.infer<typeof ZCompleteEventSchema>;
+export type DetectRecipientsStreamEvent = z.infer<typeof ZStreamEventSchema>;
+
+const ZApiErrorResponseSchema = z.object({
+  error: z.string(),
+});
+
+export class AiApiError extends Error {
+  constructor(
+    message: string,
+    public status: number,
+  ) {
+    super(message);
+    this.name = 'AiApiError';
+  }
+}
+
+export type DetectRecipientsOptions = {
+  request: TDetectRecipientsRequest;
+  onProgress?: (event: DetectRecipientsProgressEvent) => void;
+  onComplete: (event: DetectRecipientsCompleteEvent) => void;
+  onError: (error: AiApiError) => void;
+  signal?: AbortSignal;
+};
+
+/**
+ * Detect recipients from an envelope using AI with streaming support.
+ */
+export const detectRecipients = async ({
+  request,
+  onProgress,
+  onComplete,
+  onError,
+  signal,
+}: DetectRecipientsOptions): Promise<void> => {
+  const response = await fetch('/api/ai/detect-recipients', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(request),
+    signal,
+  });
+
+  // Handle non-streaming error responses (auth failures, etc.)
+  if (!response.ok) {
+    const text = await response.text();
+
+    try {
+      const parsed = ZApiErrorResponseSchema.parse(JSON.parse(text));
+
+      throw new AiApiError(parsed.error, response.status);
+    } catch (e) {
+      if (e instanceof AiApiError) {
+        throw e;
+      }
+
+      throw new AiApiError('Failed to detect recipients', response.status);
+    }
+  }
+
+  // Handle streaming response
+  const reader = response.body?.getReader();
+
+  if (!reader) {
+    throw new AiApiError('No response body', 500);
+  }
+
+  const decoder = new TextDecoder();
+  let buffer = '';
+
+  try {
+    let done = false;
+
+    while (!done) {
+      const result = await reader.read();
+      done = result.done;
+
+      if (done) {
+        break;
+      }
+
+      const value = result.value;
+
+      buffer += decoder.decode(value, { stream: true });
+
+      // Process complete lines
+      const lines = buffer.split('\n');
+      buffer = lines.pop() || ''; // Keep incomplete line in buffer
+
+      for (const line of lines) {
+        if (!line.trim()) {
+          continue;
+        }
+
+        try {
+          const event = ZStreamEventSchema.parse(JSON.parse(line));
+
+          switch (event.type) {
+            case 'progress':
+              onProgress?.(event);
+              break;
+            case 'keepalive':
+              // Ignore keepalive, it's just to prevent timeout
+              break;
+            case 'error':
+              onError(new AiApiError(event.message, 500));
+              return;
+            case 'complete':
+              onComplete(event);
+              return;
+          }
+        } catch {
+          // Ignore malformed lines
+          console.warn('Failed to parse stream event:', line);
+        }
+      }
+    }
+  } finally {
+    reader.releaseLock();
+  }
+};

apps/remix/server/api/ai/detect-recipients.ts

@@ -0,0 +1,152 @@
+import { sValidator } from '@hono/standard-validator';
+import { Hono } from 'hono';
+import { streamText } from 'hono/streaming';
+
+import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { IS_AI_FEATURES_CONFIGURED } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { detectRecipientsFromEnvelope } from '@documenso/lib/server-only/ai/envelope/detect-recipients';
+import { getTeamById } from '@documenso/lib/server-only/team/get-team';
+
+import type { HonoEnv } from '../../router';
+import { ZDetectRecipientsRequestSchema } from './detect-recipients.types';
+
+const KEEPALIVE_INTERVAL_MS = 5000;
+
+export const detectRecipientsRoute = new Hono<HonoEnv>().post(
+  '/',
+  sValidator('json', ZDetectRecipientsRequestSchema),
+  async (c) => {
+    const logger = c.get('logger');
+
+    try {
+      const { envelopeId, teamId } = c.req.valid('json');
+
+      const session = await getSession(c);
+
+      if (!session.user) {
+        throw new AppError(AppErrorCode.UNAUTHORIZED, {
+          message: 'You must be logged in to detect recipients',
+        });
+      }
+
+      // Verify user has access to the team (abort early)
+      const team = await getTeamById({
+        userId: session.user.id,
+        teamId,
+      }).catch(() => null);
+
+      if (!team) {
+        throw new AppError(AppErrorCode.UNAUTHORIZED, {
+          message: 'You do not have access to this team',
+        });
+      }
+
+      // Check if AI features are enabled for the team
+      const { aiFeaturesEnabled } = team.derivedSettings;
+
+      if (!aiFeaturesEnabled) {
+        throw new AppError(AppErrorCode.UNAUTHORIZED, {
+          message: 'AI features are not enabled for this team',
+        });
+      }
+
+      if (!IS_AI_FEATURES_CONFIGURED()) {
+        throw new AppError(AppErrorCode.INVALID_REQUEST, {
+          message: 'AI features are not configured. Please contact support to enable AI features.',
+        });
+      }
+
+      logger.info({
+        event: 'ai.detect-recipients.start',
+        envelopeId,
+        userId: session.user.id,
+        teamId: team.id,
+      });
+
+      // Return streaming response with NDJSON
+      return streamText(c, async (stream) => {
+        // Start keepalive to prevent connection timeout
+        let interval: NodeJS.Timeout | null = setInterval(() => {
+          void stream.writeln(JSON.stringify({ type: 'keepalive' }));
+        }, KEEPALIVE_INTERVAL_MS);
+
+        try {
+          const recipients = await detectRecipientsFromEnvelope({
+            envelopeId,
+            userId: session.user.id,
+            teamId: team.id,
+            onProgress: (progress) => {
+              void stream.writeln(
+                JSON.stringify({
+                  type: 'progress',
+                  pagesProcessed: progress.pagesProcessed,
+                  totalPages: progress.totalPages,
+                  recipientsDetected: progress.recipientsDetected,
+                }),
+              );
+            },
+          });
+
+          // Clear keepalive before sending final response
+          if (interval) {
+            clearInterval(interval);
+            interval = null;
+          }
+
+          logger.info({
+            event: 'ai.detect-recipients.complete',
+            envelopeId,
+            userId: session.user.id,
+            teamId: team.id,
+            recipientCount: recipients.length,
+          });
+
+          await stream.writeln(
+            JSON.stringify({
+              type: 'complete',
+              recipients,
+            }),
+          );
+        } catch (error) {
+          // Clear keepalive on error
+          if (interval) {
+            clearInterval(interval);
+          }
+
+          // The logger below it stringifies the error, using `console.error`
+          // to attempt to get a stack trace
+          console.error(error);
+
+          logger.error({
+            event: 'ai.detect-recipients.error',
+            error,
+          });
+
+          const message = error instanceof AppError ? error.message : 'Failed to detect recipients';
+
+          await stream.writeln(
+            JSON.stringify({
+              type: 'error',
+              message,
+            }),
+          );
+        }
+      });
+    } catch (error) {
+      // Handle errors that occur before streaming starts
+      logger.error({
+        event: 'ai.detect-recipients.error',
+        error,
+      });
+
+      if (error instanceof AppError) {
+        const { status, body } = AppError.toRestAPIError(error);
+
+        return c.json(body, status);
+      }
+
+      return c.json({ error: 'Failed to detect recipients' }, 500);
+    }
+  },
+);

apps/remix/server/api/ai/detect-recipients.types.ts

@@ -0,0 +1,16 @@
+import { z } from 'zod';
+
+import { ZDetectedRecipientSchema } from '@documenso/lib/server-only/ai/envelope/detect-recipients/schema';
+
+export const ZDetectRecipientsRequestSchema = z.object({
+  envelopeId: z.string().min(1).describe('The ID of the envelope to detect recipients from.'),
+  teamId: z.number().describe('The ID of the team the envelope belongs to.'),
+});
+
+export type TDetectRecipientsRequest = z.infer<typeof ZDetectRecipientsRequestSchema>;
+
+export const ZDetectRecipientsResponseSchema = z.object({
+  recipients: z.array(ZDetectedRecipientSchema),
+});
+
+export type TDetectRecipientsResponse = z.infer<typeof ZDetectRecipientsResponseSchema>;

apps/remix/server/api/ai/route.ts

@@ -0,0 +1,9 @@
+import { Hono } from 'hono';
+
+import type { HonoEnv } from '../../router';
+import { detectFieldsRoute } from './detect-fields';
+import { detectRecipientsRoute } from './detect-recipients';
+
+export const aiRoute = new Hono<HonoEnv>()
+  .route('/detect-recipients', detectRecipientsRoute)
+  .route('/detect-fields', detectFieldsRoute);

apps/remix/server/router.ts

@@ -12,9 +12,11 @@ import { API_V2_BETA_URL, API_V2_URL } from '@documenso/lib/constants/app';
 import { jobsClient } from '@documenso/lib/jobs/client';
 import { TelemetryClient } from '@documenso/lib/server-only/telemetry/telemetry-client';
 import { getIpAddress } from '@documenso/lib/universal/get-ip-address';
+import { env } from '@documenso/lib/utils/env';
 import { logger } from '@documenso/lib/utils/logger';
 import { openApiDocument } from '@documenso/trpc/server/open-api';
 
+import { aiRoute } from './api/ai/route';
 import { downloadRoute } from './api/download/download';
 import { filesRoute } from './api/files/files';
 import { type AppContext, appContext } from './context';
@@ -50,6 +52,21 @@ const rateLimitMiddleware = rateLimiter({
   },
 });
 
+const aiRateLimitMiddleware = rateLimiter({
+  windowMs: 60 * 1000, // 1 minute
+  limit: 3, // 3 requests per window
+  keyGenerator: (c) => {
+    try {
+      return getIpAddress(c.req.raw);
+    } catch (error) {
+      return 'unknown';
+    }
+  },
+  message: {
+    error: 'Too many requests, please try again later.',
+  },
+});
+
 /**
  * Attach session and context to requests.
  */
@@ -85,6 +102,10 @@ app.route('/api/auth', auth);
 // Files route.
 app.route('/api/files', filesRoute);
 
+// AI route.
+app.use('/api/ai/*', aiRateLimitMiddleware);
+app.route('/api/ai', aiRoute);
+
 // API servers.
 app.use(`/api/v1/*`, cors());
 app.route('/api/v1', tsRestHonoApp);
@@ -115,6 +136,8 @@ app.use(`${API_V2_BETA_URL}/*`, async (c) =>
 
 // Start telemetry client for anonymous usage tracking.
 // Can be disabled by setting DOCUMENSO_DISABLE_TELEMETRY=true
-void TelemetryClient.start();
+if (env('NODE_ENV') !== 'development') {
+  void TelemetryClient.start();
+}
 
 export default app;

apps/remix/vite.config.ts

@@ -51,6 +51,7 @@ export default defineConfig({
   ssr: {
     noExternal: ['react-dropzone', 'plausible-tracker'],
     external: [
+      '@napi-rs/canvas',
       '@node-rs/bcrypt',
       '@prisma/client',
       '@documenso/tailwind-config',
@@ -64,6 +65,7 @@ export default defineConfig({
     include: ['prop-types', 'file-selector', 'attr-accept'],
     exclude: [
       'node_modules',
+      '@napi-rs/canvas',
       '@node-rs/bcrypt',
       '@documenso/pdf-sign',
       'sharp',
@@ -94,6 +96,7 @@ export default defineConfig({
   build: {
     rollupOptions: {
       external: [
+        '@napi-rs/canvas',
         '@node-rs/bcrypt',
         '@documenso/pdf-sign',
         '@aws-sdk/cloudfront-signer',

docker/Dockerfile

@@ -70,6 +70,7 @@ COPY --from=builder /app/out/json/ .
 COPY --from=builder /app/out/package-lock.json ./package-lock.json
 
 COPY --from=builder /app/lingui.config.ts ./lingui.config.ts
+COPY --from=builder /app/patches ./patches
 
 RUN npm ci
 
@@ -108,6 +109,8 @@ WORKDIR /app
 COPY --from=builder --chown=nodejs:nodejs /app/out/json/ .
 # Copy the tailwind config files across
 COPY --from=builder --chown=nodejs:nodejs /app/out/full/packages/tailwind-config ./packages/tailwind-config
+# Copy the patches across
+COPY --from=builder --chown=nodejs:nodejs /app/patches ./patches
 
 RUN npm ci --only=production
 

package.json

@@ -5,8 +5,9 @@
     "apps/*",
     "packages/*"
   ],
-  "version": "2.1.0",
+  "version": "2.2.2",
   "scripts": {
+    "postinstall": "patch-package",
     "build": "turbo run build",
     "dev": "turbo run dev --filter=@documenso/remix",
     "dev:remix": "turbo run dev --filter=@documenso/remix",
@@ -63,7 +64,7 @@
     "lint-staged": "^16.2.7",
     "nanoid": "^5.1.6",
     "nodemailer": "^7.0.10",
-    "pdfjs-dist": "5.4.296",
+    "pdfjs-dist": "5.4.449",
     "pino": "^9.14.0",
     "pino-pretty": "^13.1.2",
     "playwright": "1.56.1",
@@ -83,19 +84,22 @@
     "zod-prisma-types": "3.3.5"
   },
   "dependencies": {
+    "@ai-sdk/google-vertex": "3.0.81",
     "@documenso/pdf-sign": "^0.1.0",
     "@documenso/prisma": "*",
     "@lingui/conf": "^5.6.0",
     "@lingui/core": "^5.6.0",
+    "ai": "^5.0.104",
     "inngest-cli": "^1.13.7",
     "luxon": "^3.7.2",
+    "patch-package": "^8.0.1",
     "posthog-node": "4.18.0",
     "react": "^18",
     "typescript": "5.6.2",
     "zod": "^3.25.76"
   },
   "overrides": {
-    "pdfjs-dist": "5.4.296",
+    "pdfjs-dist": "5.4.449",
     "typescript": "5.6.2",
     "zod": "^3.25.76"
   }

packages/app-tests/package.json

@@ -14,7 +14,7 @@
   "devDependencies": {
     "@documenso/lib": "*",
     "@documenso/prisma": "*",
-    "@napi-rs/canvas": "^0.1.82",
+    "@napi-rs/canvas": "^0.1.83",
     "@playwright/test": "1.56.1",
     "@types/node": "^20",
     "@types/pngjs": "^6.0.5",

packages/lib/client-only/providers/envelope-editor-provider.tsx

@@ -132,7 +132,12 @@ export const EnvelopeEditorProvider = ({
   });
 
   const envelopeFieldSetMutationQuery = trpc.envelope.field.set.useMutation({
-    onSuccess: () => {
+    onSuccess: ({ data: fields }) => {
+      setEnvelope((prev) => ({
+        ...prev,
+        fields,
+      }));
+
       setAutosaveError(false);
     },
     onError: (err) => {
@@ -154,8 +159,18 @@ export const EnvelopeEditorProvider = ({
       setEnvelope((prev) => ({
         ...prev,
         recipients,
+        fields: prev.fields.filter((field) =>
+          recipients.some((recipient) => recipient.id === field.recipientId),
+        ),
       }));
 
+      // Reset the local fields to ensure deleted recipient fields are removed.
+      editorFields.resetForm(
+        envelope.fields.filter((field) =>
+          recipients.some((recipient) => recipient.id === field.recipientId),
+        ),
+      );
+
       setAutosaveError(false);
     },
     onError: (err) => {
@@ -265,7 +280,7 @@ export const EnvelopeEditorProvider = ({
   );
 
   /**
-   * Fetch and sycn the envelope back into the editor.
+   * Fetch and sync the envelope back into the editor.
    *
    * Overrides everything.
    */

packages/lib/constants/app.ts

@@ -18,3 +18,6 @@ export const SUPPORT_EMAIL = env('NEXT_PUBLIC_SUPPORT_EMAIL') ?? 'support@docume
 
 export const USE_INTERNAL_URL_BROWSERLESS = () =>
   env('NEXT_PUBLIC_USE_INTERNAL_URL_BROWSERLESS') === 'true';
+
+export const IS_AI_FEATURES_CONFIGURED = () =>
+  !!env('GOOGLE_VERTEX_PROJECT_ID') && !!env('GOOGLE_VERTEX_API_KEY');

packages/lib/constants/i18n.ts

@@ -6,6 +6,7 @@ export const SUPPORTED_LANGUAGE_CODES = [
   'fr',
   'es',
   'it',
+  'nl',
   'pl',
   'pt-BR',
   'ja',
@@ -61,6 +62,10 @@ export const SUPPORTED_LANGUAGES: Record<string, SupportedLanguage> = {
     full: 'Italian',
     short: 'it',
   },
+  nl: {
+    short: 'nl',
+    full: 'Dutch',
+  },
   pl: {
     short: 'pl',
     full: 'Polish',

packages/lib/package.json

@@ -15,6 +15,7 @@
     "clean": "rimraf node_modules"
   },
   "dependencies": {
+    "@ai-sdk/google-vertex": "3.0.81",
     "@aws-sdk/client-s3": "^3.936.0",
     "@aws-sdk/client-sesv2": "^3.936.0",
     "@aws-sdk/cloudfront-signer": "^3.935.0",
@@ -27,6 +28,7 @@
     "@lingui/core": "^5.6.0",
     "@lingui/macro": "^5.6.0",
     "@lingui/react": "^5.6.0",
+    "@napi-rs/canvas": "^0.1.83",
     "@noble/ciphers": "0.6.0",
     "@noble/hashes": "1.8.0",
     "@node-rs/bcrypt": "^1.10.7",
@@ -35,6 +37,7 @@
     "@sindresorhus/slugify": "^3.0.0",
     "@team-plain/typescript-sdk": "^5.11.0",
     "@vvo/tzdb": "^6.196.0",
+    "ai": "^5.0.104",
     "csv-parse": "^6.1.0",
     "inngest": "^3.45.1",
     "jose": "^6.1.2",
@@ -43,6 +46,7 @@
     "luxon": "^3.7.2",
     "nanoid": "^5.1.6",
     "oslo": "^0.17.0",
+    "p-map": "^7.0.4",
     "pg": "^8.16.3",
     "pino": "^9.14.0",
     "pino-pretty": "^13.1.2",
@@ -63,4 +67,4 @@
     "@types/luxon": "^3.7.1",
     "@types/pg": "^8.15.6"
   }
-}
+}

packages/lib/server-only/ai/envelope/detect-fields/helpers.ts

@@ -0,0 +1,91 @@
+import type { DetectedField } from './schema';
+import type { NormalizedField, RecipientContext } from './types';
+
+/**
+ * Build a message providing recipient context to the AI.
+ */
+export const buildRecipientContextMessage = (recipients: RecipientContext[]) => {
+  if (recipients.length === 0) {
+    return 'No recipients have been specified for this document. Leave recipientKey empty for all fields.';
+  }
+
+  const recipientList = recipients.map((r) => `- ${formatRecipientKey(r)}`).join('\n');
+
+  return `The following recipients will sign/fill this document. Use their recipientKey when assigning fields:
+
+${recipientList}
+
+When you detect a field that should be filled by a specific recipient (based on nearby labels like "Tenant Signature", "Landlord", "Buyer", etc.), set the recipientKey to match one of the above. If no recipient can be determined, leave recipientKey empty.`;
+};
+
+/**
+ * Format recipient key as id|name|email for AI context.
+ */
+export const formatRecipientKey = (recipient: RecipientContext) => {
+  return `${recipient.id}|${recipient.name}|${recipient.email}`;
+};
+
+/**
+ * Parse recipientKey (format: id|name|email) and find matching recipient.
+ *
+ * Matching logic:
+ * 1. Match on id === id
+ * 2. OR match on email && name === email && name
+ * 3. If no match or empty key, use first recipient
+ * 4. If no recipients, return null (caller creates blank recipient)
+ */
+export const resolveRecipientFromKey = (recipientKey: string, recipients: RecipientContext[]) => {
+  if (recipients.length === 0) {
+    return null;
+  }
+
+  // Empty key defaults to first recipient
+  if (!recipientKey) {
+    return recipients[0];
+  }
+
+  // Parse the key format: id|name|email
+  const [idStr, name, email] = recipientKey.split('|');
+
+  const id = Number(idStr);
+
+  // Try to match by ID first
+  if (!Number.isNaN(id)) {
+    const matchById = recipients.find((r) => r.id === id);
+
+    if (matchById) {
+      return matchById;
+    }
+  }
+
+  // Try to match by email AND name
+  if (email && name) {
+    const matchByEmailAndName = recipients.find((r) => r.email === email && r.name === name);
+
+    if (matchByEmailAndName) {
+      return matchByEmailAndName;
+    }
+  }
+
+  // No match found, default to first recipient
+  return recipients[0];
+};
+
+/**
+ * Convert AI's 0-1000 bounding box to our 0-100 percentage format.
+ */
+export const normalizeDetectedField = (field: DetectedField): NormalizedField => {
+  const { box2d } = field;
+
+  const [yMin, xMin, yMax, xMax] = box2d;
+
+  return {
+    type: field.type,
+    recipientKey: field.recipientKey,
+    positionX: xMin / 10,
+    positionY: yMin / 10,
+    width: (xMax - xMin) / 10,
+    height: (yMax - yMin) / 10,
+    confidence: field.confidence,
+  };
+};

packages/lib/server-only/ai/envelope/detect-fields/index.ts

@@ -0,0 +1,323 @@
+import { createCanvas, loadImage } from '@napi-rs/canvas';
+import { DocumentStatus, type Field, RecipientRole } from '@prisma/client';
+import { generateObject } from 'ai';
+import pMap from 'p-map';
+import sharp from 'sharp';
+
+import { prisma } from '@documenso/prisma';
+
+import { AppError, AppErrorCode } from '../../../../errors/app-error';
+import { getFileServerSide } from '../../../../universal/upload/get-file.server';
+import { getEnvelopeById } from '../../../envelope/get-envelope-by-id';
+import { createEnvelopeRecipients } from '../../../recipient/create-envelope-recipients';
+import { vertex } from '../../google';
+import { pdfToImages } from '../../pdf-to-images';
+import {
+  buildRecipientContextMessage,
+  normalizeDetectedField,
+  resolveRecipientFromKey,
+} from './helpers';
+import { SYSTEM_PROMPT } from './prompt';
+import { ZSubmitDetectedFieldsInputSchema } from './schema';
+import type {
+  NormalizedFieldWithContext,
+  NormalizedFieldWithPage,
+  RecipientContext,
+} from './types';
+
+export type DetectFieldsFromEnvelopeOptions = {
+  context?: string;
+  envelopeId: string;
+  userId: number;
+  teamId: number;
+  onProgress?: (progress: DetectFieldsProgress) => void;
+};
+
+export const detectFieldsFromEnvelope = async ({
+  context,
+  envelopeId,
+  userId,
+  teamId,
+  onProgress,
+}: DetectFieldsFromEnvelopeOptions) => {
+  const envelope = await getEnvelopeById({
+    id: {
+      type: 'envelopeId',
+      id: envelopeId,
+    },
+    userId,
+    teamId,
+    type: null,
+  });
+
+  if (envelope.status !== DocumentStatus.DRAFT) {
+    throw new AppError(AppErrorCode.INVALID_REQUEST, {
+      message: 'Cannot detect fields for a non-draft envelope',
+    });
+  }
+
+  // Extract recipients for field assignment context
+  const recipients: RecipientContext[] = envelope.recipients.map((r) => ({
+    id: r.id,
+    name: r.name,
+    email: r.email,
+  }));
+
+  const allFields: NormalizedFieldWithContext[] = [];
+
+  for (const item of envelope.envelopeItems) {
+    const existingFields = await prisma.field.findMany({
+      where: {
+        envelopeItemId: item.id,
+      },
+    });
+
+    const pdfBytes = await getFileServerSide(item.documentData);
+    const fields = await detectFieldsFromPdf({
+      pdfBytes,
+      existingFields,
+      recipients,
+      context,
+      onProgress,
+    });
+
+    // Resolve recipientKey to actual recipient and add context
+    const fieldsWithContext = await Promise.all(
+      fields.map(async (field) => {
+        const { recipientKey, ...fieldWithoutKey } = field;
+
+        let resolvedRecipient = resolveRecipientFromKey(recipientKey, recipients);
+
+        // If no recipients exist, create a blank recipient
+        if (!resolvedRecipient) {
+          const { recipients: createdRecipients } = await createEnvelopeRecipients({
+            id: {
+              id: envelope.id,
+              type: 'envelopeId',
+            },
+            recipients: [
+              {
+                name: '',
+                email: '',
+                role: RecipientRole.SIGNER,
+              },
+            ],
+            userId,
+            teamId,
+          });
+
+          resolvedRecipient = createdRecipients[0];
+        }
+
+        return {
+          ...fieldWithoutKey,
+          envelopeItemId: item.id,
+          recipientId: resolvedRecipient.id,
+        };
+      }),
+    );
+
+    allFields.push(...fieldsWithContext);
+  }
+
+  return allFields;
+};
+
+export type DetectFieldsProgress = {
+  pagesProcessed: number;
+  totalPages: number;
+  fieldsDetected: number;
+};
+
+export type DetectFieldsFromPdfOptions = {
+  pdfBytes: Uint8Array;
+  recipients?: RecipientContext[];
+  existingFields?: Field[];
+  context?: string;
+  onProgress?: (progress: DetectFieldsProgress) => void;
+};
+
+export const detectFieldsFromPdf = async ({
+  pdfBytes,
+  recipients = [],
+  existingFields = [],
+  context,
+  onProgress,
+}: DetectFieldsFromPdfOptions) => {
+  const pageImages = await pdfToImages(pdfBytes);
+
+  if (pageImages.length === 0) {
+    return [];
+  }
+
+  let pagesProcessed = 0;
+  let totalFieldsDetected = 0;
+
+  const results = await pMap(
+    pageImages,
+    async (page) => {
+      // Get existing fields for this page
+      const fieldsOnPage = existingFields.filter((f) => f.page === page.pageNumber);
+
+      // Mask existing fields on the image
+      const maskedImage = await maskFieldsOnImage({
+        image: page.image,
+        width: page.width,
+        height: page.height,
+        fields: fieldsOnPage,
+      });
+
+      const rawFields = await detectFieldsFromPage({
+        image: maskedImage,
+        pageNumber: page.pageNumber,
+        recipients,
+        context,
+      });
+
+      // Convert bounding boxes to normalized positions and add page number
+      const normalizedFields = rawFields.map(
+        (field): NormalizedFieldWithPage => ({
+          ...normalizeDetectedField(field),
+          pageNumber: page.pageNumber,
+        }),
+      );
+
+      // Update progress
+      pagesProcessed += 1;
+      totalFieldsDetected += normalizedFields.length;
+
+      onProgress?.({
+        pagesProcessed,
+        totalPages: pageImages.length,
+        fieldsDetected: totalFieldsDetected,
+      });
+
+      return normalizedFields;
+    },
+    { concurrency: 5 },
+  );
+
+  return results.flat();
+};
+
+type MaskFieldsOnImageOptions = {
+  image: Buffer;
+  width: number;
+  height: number;
+  fields: Field[];
+};
+
+/**
+ * Draw black rectangles over existing fields to prevent re-detection.
+ */
+const maskFieldsOnImage = async ({ image, width, height, fields }: MaskFieldsOnImageOptions) => {
+  if (fields.length === 0) {
+    return image;
+  }
+
+  const img = await loadImage(image);
+  const canvas = createCanvas(width, height);
+  const ctx = canvas.getContext('2d');
+
+  // Draw the original image
+  ctx.drawImage(img, 0, 0, width, height);
+
+  // Draw black rectangles over existing fields
+  ctx.fillStyle = '#000000';
+
+  for (const field of fields) {
+    // field positions and width,height are on a 0-100 percentage scale
+    const x = (field.positionX.toNumber() / 100) * width;
+    const y = (field.positionY.toNumber() / 100) * height;
+    const w = (field.width.toNumber() / 100) * width;
+    const h = (field.height.toNumber() / 100) * height;
+
+    ctx.fillRect(x, y, w, h);
+  }
+
+  return canvas.encode('jpeg');
+};
+
+const TARGET_SIZE = 1000;
+
+type ResizeImageOptions = {
+  image: Buffer;
+  size?: number;
+};
+
+/**
+ * Resize image to 1000x1000 using fill strategy.
+ * Scales to cover the target area and crops any overflow.
+ */
+const resizeImageToSquare = async ({ image, size = TARGET_SIZE }: ResizeImageOptions) => {
+  return await sharp(image).resize(size, size, { fit: 'fill' }).toBuffer();
+};
+
+type DetectFieldsFromPageOptions = {
+  image: Buffer;
+  pageNumber: number;
+  recipients: RecipientContext[];
+  context?: string;
+};
+
+const detectFieldsFromPage = async ({
+  image,
+  pageNumber,
+  recipients,
+  context,
+}: DetectFieldsFromPageOptions) => {
+  // Resize to 1000x1000 for consistent coordinate mapping
+  const resizedImage = await resizeImageToSquare({ image });
+
+  // Build messages array
+  const messages: Parameters<typeof generateObject>[0]['messages'] = [
+    {
+      role: 'user',
+      content: buildRecipientContextMessage(recipients),
+    },
+  ];
+
+  // Add user-provided context if available
+  if (context?.trim()) {
+    messages.push({
+      role: 'user',
+      content: `Additional context about recipients:\n${context.trim()}`,
+    });
+  }
+
+  // Add the page analysis request with image
+  messages.push({
+    role: 'user',
+    content: [
+      {
+        type: 'text',
+        text: `Analyze this document page (page ${pageNumber}) and detect all empty fillable fields. Submit the fields using the tool. Remember: only detect EMPTY fields, exclude labels from bounding boxes, use 0-1000 normalized coordinates, and IGNORE any solid black rectangles (those are existing fields).`,
+      },
+      {
+        type: 'image',
+        image: resizedImage,
+      },
+    ],
+  });
+
+  const result = await generateObject({
+    model: vertex('gemini-3-pro-preview'),
+    system: SYSTEM_PROMPT,
+    schema: ZSubmitDetectedFieldsInputSchema,
+    messages,
+    temperature: 0.5,
+    providerOptions: {
+      google: {
+        thinkingConfig: {
+          thinkingLevel: 'low',
+        },
+      },
+    },
+  });
+
+  if (!result.object) {
+    return [];
+  }
+
+  return result.object.fields ?? [];
+};

packages/lib/server-only/ai/envelope/detect-fields/prompt.ts

@@ -0,0 +1,69 @@
+export const SYSTEM_PROMPT = `You are analyzing a form document image to detect fillable fields for a document signing platform.
+
+IMPORTANT RULES:
+1. Only detect EMPTY/UNFILLED fields (ignore boxes that already contain text or data)
+2. Analyze nearby text labels to determine the field type
+3. Return bounding boxes for the fillable area ONLY, NOT the label text
+4. Each boundingBox must be in the format {yMin, xMin, yMax, xMax} where all coordinates are NORMALIZED to a 0-1000 scale
+5. IGNORE any black rectangles on the page - these are existing fields that should not be re-detected
+6. Only return fields that are clearly fillable and not just labels or instructions.
+
+CRITICAL: UNDERSTANDING FILLABLE AREAS
+The "fillable area" is ONLY the empty space where a user will write, type, sign, or check.
+- ✓ CORRECT: The blank underscore where someone writes their name: "Name: _________" → box ONLY the underscores
+- ✓ CORRECT: The empty white rectangle inside a box outline → box ONLY the empty space
+- ✓ CORRECT: The blank space to the right of a label: "Email: [ empty box ]" → box ONLY the empty box
+- ✗ INCORRECT: Including the word "Signature:" that appears to the left of a signature line
+- ✗ INCORRECT: Including printed labels, instructions, or descriptive text near the field
+- ✗ INCORRECT: Extending the box to include text just because it's close to the fillable area
+- ✗ INCORRECT: Detecting solid black rectangles (these are masked existing fields)
+
+FIELD TYPES TO DETECT:
+- SIGNATURE - Signature lines, boxes labeled 'Signature', 'Sign here', 'Authorized signature', 'X____'
+- INITIALS - Small boxes labeled 'Initials', 'Initial here', typically smaller than signature fields
+- NAME - Boxes labeled 'Name', 'Full name', 'Your name', 'Print name', 'Printed name'
+- EMAIL - Boxes labeled 'Email', 'Email address', 'E-mail'
+- DATE - Boxes labeled 'Date', 'Date signed', or showing date format placeholders like 'MM/DD/YYYY', '__/__/____'
+- CHECKBOX - Empty checkbox squares (☐) with or without labels, typically small square boxes
+- RADIO - Empty radio button circles (○) in groups, typically circular selection options
+- NUMBER - Boxes labeled with numeric context: 'Amount', 'Quantity', 'Phone', 'ZIP', 'Age', 'Price', '#'
+- TEXT - Any other empty text input boxes, general input fields, or when field type is uncertain
+
+DETECTION GUIDELINES:
+- Read text located near the box (above, to the left, or inside) to infer the field type
+- Use nearby text to CLASSIFY the field type, but DO NOT include that text in the bounding box
+- If you're uncertain which type fits best, default to TEXT
+- For checkboxes and radio buttons: Detect each individual box/circle separately, not the label
+- Signature fields are often longer horizontal lines or larger boxes
+- Date fields often show format hints or date separators (slashes, dashes)
+- Look for visual patterns: underscores (____), horizontal lines, box outlines
+
+BOUNDING BOX PLACEMENT:
+- Coordinates must capture ONLY the empty fillable space
+- Once you find the fillable region, LOCK the box to the full boundary (top, bottom, left, right)
+- If the field is defined by a line or rectangular border, extend coordinates across the entire line/border
+- EXCLUDE all printed text labels even if they are:
+  - Directly to the left of the field (e.g., "Name: _____")
+  - Directly above the field (e.g., "Signature" printed above a line)
+  - Very close to the field with minimal spacing
+- The box should never cover only the leftmost few characters of a long field
+
+COORDINATE SYSTEM:
+- {yMin, xMin, yMax, xMax} normalized to 0-1000 scale
+- Top-left corner: yMin and xMin close to 0
+- Bottom-right corner: yMax and xMax close to 1000
+- Coordinates represent positions on a 1000x1000 grid overlaid on the image
+
+FIELD SIZING FOR LINE-BASED FIELDS:
+When detecting thin horizontal lines for SIGNATURE, INITIALS, NAME, EMAIL, DATE, TEXT, or NUMBER fields:
+1. Keep yMax (bottom) at the detected line position
+2. Extend yMin (top) upward into the available whitespace above the line
+3. Use 60-80% of the clear whitespace above the line for comfortable writing/signing space
+4. Apply minimum dimensions: height at least 30 units (3% of 1000-scale), width at least 36 units
+5. Ensure yMin >= 0 (do not go off-page)
+6. Do NOT apply this expansion to CHECKBOX, RADIO fields - use detected dimensions
+
+RECIPIENT IDENTIFICATION:
+- Look for labels near fields indicating who should fill them (e.g., "Tenant Signature", "Landlord", "Buyer")
+- Use the recipientKey field to indicate which recipient should fill the field
+- If a field has no clear recipient label, leave recipientKey empty`;

packages/lib/server-only/ai/envelope/detect-fields/schema.ts

@@ -0,0 +1,54 @@
+import { FieldType } from '@prisma/client';
+import z from 'zod';
+
+export const DETECTABLE_FIELD_TYPES = [
+  FieldType.SIGNATURE,
+  FieldType.INITIALS,
+  FieldType.NAME,
+  FieldType.EMAIL,
+  FieldType.DATE,
+  FieldType.TEXT,
+  FieldType.NUMBER,
+  FieldType.RADIO,
+  FieldType.CHECKBOX,
+] as const;
+
+export const ZDetectableFieldType = z.enum(DETECTABLE_FIELD_TYPES);
+
+export const ZConfidenceLevel = z.enum(['low', 'medium-low', 'medium', 'medium-high', 'high']);
+
+export type TConfidenceLevel = z.infer<typeof ZConfidenceLevel>;
+
+/**
+ * Schema for a detected field's bounding box.
+ * All values are normalized to a 0-1000 scale relative to the page dimensions.
+ */
+const ZBox2DSchema = z.array(z.number().min(0).max(1000)).length(4);
+
+/**
+ * Schema for a detected field.
+ */
+export const ZDetectedFieldSchema = z.object({
+  type: ZDetectableFieldType.describe(
+    `The field type based on nearby labels and visual appearance`,
+  ),
+  recipientKey: z
+    .string()
+    .describe(
+      'Recipient identifier from nearby labels (e.g., "Tenant", "Landlord", "Buyer", "Seller"). Empty string if no recipient indicated.',
+    ),
+  box2d: ZBox2DSchema.describe(
+    'Box2D [yMin, xMin, yMax, xMax] coordinates of the FILLABLE AREA only (exclude labels).',
+  ),
+  confidence: ZConfidenceLevel.describe('The confidence in the detection'),
+});
+
+export type DetectedField = z.infer<typeof ZDetectedFieldSchema>;
+
+export const ZSubmitDetectedFieldsInputSchema = z.object({
+  fields: z
+    .array(ZDetectedFieldSchema)
+    .describe('List of detected EMPTY fillable fields. Exclude pre-filled content and label text.'),
+});
+
+export type SubmitDetectedFieldsInput = z.infer<typeof ZSubmitDetectedFieldsInputSchema>;

packages/lib/server-only/ai/envelope/detect-fields/types.ts

@@ -0,0 +1,30 @@
+import type { Recipient } from '@prisma/client';
+
+import type { DETECTABLE_FIELD_TYPES, TConfidenceLevel } from './schema';
+
+export type DetectableFieldType = (typeof DETECTABLE_FIELD_TYPES)[number];
+
+/**
+ * Normalized field position using 0-100 percentage scale (matching Field model).
+ */
+export type NormalizedField = {
+  type: DetectableFieldType;
+  recipientKey: string;
+  positionX: number;
+  positionY: number;
+  width: number;
+  height: number;
+  confidence: TConfidenceLevel;
+};
+
+export type RecipientContext = Pick<Recipient, 'id' | 'name' | 'email'>;
+
+export type NormalizedFieldWithPage = NormalizedField & {
+  pageNumber: number;
+};
+
+export type NormalizedFieldWithContext = Omit<NormalizedField, 'recipientKey'> & {
+  pageNumber: number;
+  envelopeItemId: string;
+  recipientId: number;
+};

packages/lib/server-only/ai/envelope/detect-recipients/index.ts

@@ -0,0 +1,237 @@
+import { DocumentStatus } from '@prisma/client';
+import type { ImagePart, ModelMessage } from 'ai';
+import { generateObject } from 'ai';
+import { chunk } from 'remeda';
+
+import { AppError, AppErrorCode } from '../../../../errors/app-error';
+import { getFileServerSide } from '../../../../universal/upload/get-file.server';
+import { getEnvelopeById } from '../../../envelope/get-envelope-by-id';
+import { vertex } from '../../google';
+import { pdfToImages } from '../../pdf-to-images';
+import { SYSTEM_PROMPT } from './prompt';
+import type { TDetectedRecipientSchema } from './schema';
+import { ZDetectedRecipientsSchema } from './schema';
+
+const MAX_PAGES_PER_CHUNK = 10;
+
+const createImageContentParts = (images: Buffer[]) => {
+  return images.map<ImagePart>((image) => ({
+    type: 'image',
+    image,
+  }));
+};
+
+export type DetectRecipientsProgress = {
+  pagesProcessed: number;
+  totalPages: number;
+  recipientsDetected: number;
+};
+
+export type DetectRecipientsFromEnvelopeOptions = {
+  envelopeId: string;
+  userId: number;
+  teamId: number;
+  onProgress?: (progress: DetectRecipientsProgress) => void;
+};
+
+export const detectRecipientsFromEnvelope = async ({
+  envelopeId,
+  userId,
+  teamId,
+  onProgress,
+}: DetectRecipientsFromEnvelopeOptions) => {
+  const envelope = await getEnvelopeById({
+    id: {
+      type: 'envelopeId',
+      id: envelopeId,
+    },
+    userId,
+    teamId,
+    type: null,
+  });
+
+  if (envelope.status === DocumentStatus.COMPLETED) {
+    throw new AppError(AppErrorCode.INVALID_REQUEST, {
+      message: 'Cannot detect recipients for a completed envelope',
+    });
+  }
+
+  let allRecipients: TDetectedRecipientSchema[] = [];
+
+  for (const item of envelope.envelopeItems) {
+    const pdfBytes = await getFileServerSide(item.documentData);
+    const recipients = await detectRecipientsFromPdf({ pdfBytes, onProgress });
+
+    allRecipients = mergeRecipients(allRecipients, recipients);
+  }
+
+  return allRecipients;
+};
+
+export type DetectRecipientsFromPdfOptions = {
+  pdfBytes: Uint8Array;
+  onProgress?: (progress: DetectRecipientsProgress) => void;
+};
+
+export const detectRecipientsFromPdf = async ({
+  pdfBytes,
+  onProgress,
+}: DetectRecipientsFromPdfOptions) => {
+  const pageImages = await pdfToImages(pdfBytes);
+
+  if (pageImages.length === 0) {
+    return [];
+  }
+
+  const images = pageImages.map((p) => p.image);
+
+  return await detectRecipientsFromImages({ images, onProgress });
+};
+
+type DetectRecipientsFromImagesOptions = {
+  images: Buffer[];
+  onProgress?: (progress: DetectRecipientsProgress) => void;
+};
+
+const formatDetectedRecipients = (recipients: TDetectedRecipientSchema[]) => {
+  if (recipients.length === 0) {
+    return '';
+  }
+
+  const formatted = recipients
+    .map((r, i) => `${i + 1}. ${r.name || '(no name)'} - ${r.email || '(no email)'} - ${r.role}`)
+    .join('\n');
+
+  return `\n\nRecipients detected so far:\n${formatted}`;
+};
+
+const isDuplicateRecipient = (
+  recipient: TDetectedRecipientSchema,
+  existing: TDetectedRecipientSchema,
+) => {
+  if (recipient.email && existing.email) {
+    return recipient.email.toLowerCase() === existing.email.toLowerCase();
+  }
+
+  if (recipient.name && existing.name) {
+    return recipient.name.toLowerCase() === existing.name.toLowerCase();
+  }
+
+  return false;
+};
+
+const mergeRecipients = (
+  existingRecipients: TDetectedRecipientSchema[],
+  newRecipients: TDetectedRecipientSchema[],
+) => {
+  const merged = [...existingRecipients];
+
+  for (const recipient of newRecipients) {
+    const isDuplicate = merged.some((existing) => isDuplicateRecipient(recipient, existing));
+
+    if (!isDuplicate) {
+      merged.push(recipient);
+    }
+  }
+
+  return merged;
+};
+
+const buildPromptText = (options: {
+  chunkIndex: number;
+  totalChunks: number;
+  totalPages: number;
+  startPage: number;
+  endPage: number;
+  detectedRecipients: TDetectedRecipientSchema[];
+}) => {
+  const { chunkIndex, totalChunks, totalPages, startPage, endPage, detectedRecipients } = options;
+
+  const isFirstChunk = chunkIndex === 0;
+  const isSingleChunk = totalChunks === 1;
+  const batchNumber = chunkIndex + 1;
+  const previouslyFoundText = formatDetectedRecipients(detectedRecipients);
+
+  if (isSingleChunk) {
+    return `Please analyze these ${totalPages} document page(s) and detect all recipients. Submit all detected recipients using the tool.`;
+  }
+
+  if (isFirstChunk) {
+    return `This is a ${totalPages}-page document. I'll show you the pages in batches of ${MAX_PAGES_PER_CHUNK}.
+
+Here are pages ${startPage}-${endPage} (batch ${batchNumber} of ${totalChunks}).
+
+Please analyze these pages and submit any recipients you find using the tool. I will show you the remaining pages after.`;
+  }
+
+  return `Here are pages ${startPage}-${endPage} (batch ${batchNumber} of ${totalChunks}).${previouslyFoundText}
+
+Please analyze these pages and submit any NEW recipients you find (not already listed above) using the tool.`;
+};
+
+const detectRecipientsFromImages = async ({
+  images,
+  onProgress,
+}: DetectRecipientsFromImagesOptions) => {
+  const imageChunks = chunk(images, MAX_PAGES_PER_CHUNK);
+
+  const totalChunks = imageChunks.length;
+  const totalPages = images.length;
+
+  const messages: ModelMessage[] = [];
+  let allRecipients: TDetectedRecipientSchema[] = [];
+
+  for (const [chunkIndex, currentChunk] of imageChunks.entries()) {
+    const startPage = chunkIndex * MAX_PAGES_PER_CHUNK + 1;
+    const endPage = startPage + currentChunk.length - 1;
+
+    const promptText = buildPromptText({
+      chunkIndex,
+      totalChunks,
+      totalPages,
+      startPage,
+      endPage,
+      detectedRecipients: allRecipients,
+    });
+
+    // Add user message with images for this chunk
+    messages.push({
+      role: 'user',
+      content: [
+        {
+          type: 'text',
+          text: promptText,
+        },
+        ...createImageContentParts(currentChunk),
+      ],
+    });
+
+    const result = await generateObject({
+      model: vertex('gemini-2.5-flash'),
+      system: SYSTEM_PROMPT,
+      schema: ZDetectedRecipientsSchema,
+      messages,
+      temperature: 0.5,
+    });
+
+    const newRecipients = result.object?.recipients ?? [];
+
+    // Merge new recipients into our accumulated list (handles duplicates)
+    allRecipients = mergeRecipients(allRecipients, newRecipients);
+
+    // Report progress (endPage represents pages processed so far)
+    onProgress?.({
+      pagesProcessed: endPage,
+      totalPages,
+      recipientsDetected: allRecipients.length,
+    });
+
+    // Add assistant response as context for next iteration
+    messages.push({
+      role: 'assistant',
+      content: `Detected recipients: ${JSON.stringify(allRecipients)}`,
+    });
+  }
+
+  return allRecipients;
+};

packages/lib/server-only/ai/envelope/detect-recipients/prompt.ts

@@ -0,0 +1,41 @@
+export const SYSTEM_PROMPT = `You are analyzing a document to identify recipients who need to sign, approve, or receive copies.
+
+TASK: Extract recipient information from this document.
+
+RECIPIENT TYPES:
+- SIGNER: People who must sign the document (look for signature lines, "Signed by:", "Signature:", "X____")
+- APPROVER: People who must review/approve before signing (look for "Approved by:", "Reviewed by:", "Approval:")
+- VIEWER: People who need to view the document (look for "Viewed by:", "View:", "Viewer:")
+- CC: People who receive a copy for information only (look for "CC:", "Copy to:", "For information:")
+
+EXTRACTION RULES:
+1. Look for signature lines with names printed above, below, or near them
+2. Check for explicit labels like "Name:", "Signer:", "Party:", "Recipient:"
+3. Look for "Approved by:", "Reviewed by:", "CC:" sections
+4. Extract FULL NAMES as they appear in the document
+5. If the name is a placeholder name, reformat it to a more readable format (e.g. "[Insert signer A name]" -> "Signer A").
+6. If an email address is visible near a name, include it exactly in the "email" field
+7. If NO email is found, leave the email field empty.
+8. If the email is a placeholder email, leave the email field empty.
+9. Assign signing order based on document flow (numbered items, "First signer:", "Second signer:", or top-to-bottom sequence)
+
+IMPORTANT:
+- Only extract recipients explicitly mentioned in the document
+- Default role is SIGNER if unclear (signature lines = SIGNER)
+- Signing order starts at 1 (first signer = 1, second = 2, etc.)
+- If no clear ordering, omit signingOrder
+- Do NOT invent recipients - only extract what's clearly present
+- If a signature line exists but no name is associated with it use an empty name and the email address (if found) of the signer.
+- Do not use placeholder names like "<UNKNOWN>", "Unknown", "Signer" unless they are explicitly mentioned in the document.
+
+EXAMPLES:
+Good:
+- "Signed: _________ John Doe" → { name: "John Doe", role: "SIGNER", signingOrder: 1 }
+- "Approved by: Jane Smith (jane@example.com)" → { name: "Jane Smith", email: "jane@example.com", role: "APPROVER" }
+- "CC: Legal Team" → { name: "Legal Team", role: "CC" }
+
+Bad:
+- Extracting the document title as a recipient name
+- Making up email addresses that aren't in the document
+- Adding people not mentioned in the document
+- Using placeholder names like "<UNKNOWN>", "Unknown", "Signer" unless they are explicitly mentioned in the document.`;

packages/lib/server-only/ai/envelope/detect-recipients/schema.ts

@@ -0,0 +1,24 @@
+import { RecipientRole } from '@prisma/client';
+import { z } from 'zod';
+
+export const ZDetectedRecipientSchema = z.object({
+  name: z.string().describe('The detected recipient name, leave blank if unknown'),
+  email: z.string().describe('The detected recipient email, leave blank if unknown'),
+  role: z
+    .nativeEnum(RecipientRole)
+    .optional()
+    .default(RecipientRole.SIGNER)
+    .describe(
+      'The detected recipient role. Use SIGNER for people who need to sign, APPROVER for approvers, CC for people who should receive a copy, VIEWER for view-only recipients',
+    ),
+});
+
+export type TDetectedRecipientSchema = z.infer<typeof ZDetectedRecipientSchema>;
+
+export const ZDetectedRecipientsSchema = z.object({
+  recipients: z
+    .array(ZDetectedRecipientSchema)
+    .describe('The list of detected recipients from the document'),
+});
+
+export type TDetectedRecipientsSchema = z.infer<typeof ZDetectedRecipientsSchema>;

packages/lib/server-only/ai/google.ts

@@ -0,0 +1,9 @@
+import { createVertex } from '@ai-sdk/google-vertex';
+
+import { env } from '../../utils/env';
+
+export const vertex = createVertex({
+  project: env('GOOGLE_VERTEX_PROJECT_ID'),
+  location: env('GOOGLE_VERTEX_LOCATION') || 'global',
+  apiKey: env('GOOGLE_VERTEX_API_KEY'),
+});

packages/lib/server-only/ai/index.ts

@@ -0,0 +1 @@
+export * from 'ai';

packages/lib/server-only/ai/pdf-to-images.ts

@@ -0,0 +1,47 @@
+import { createCanvas } from '@napi-rs/canvas';
+import pMap from 'p-map';
+import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf.mjs';
+
+export type PdfToImagesOptions = {
+  scale?: number;
+};
+
+export const pdfToImages = async (pdfBytes: Uint8Array, options: PdfToImagesOptions = {}) => {
+  const { scale = 2 } = options;
+
+  const pdf = await pdfjsLib.getDocument(pdfBytes).promise;
+
+  const images = await pMap(
+    Array.from({ length: pdf.numPages }),
+    async (_, index) => {
+      const pageNumber = index + 1;
+      const page = await pdf.getPage(pageNumber);
+
+      const viewport = page.getViewport({ scale });
+
+      const canvas = createCanvas(viewport.width, viewport.height);
+      const canvasContext = canvas.getContext('2d');
+
+      await page.render({
+        // @ts-expect-error napi-rs/canvas satifies the requirements
+        canvas,
+        // @ts-expect-error napi-rs/canvas satifies the requirements
+        canvasContext,
+        viewport,
+      }).promise;
+
+      return {
+        pageNumber,
+        image: await canvas.encode('jpeg'),
+        width: Math.floor(viewport.width),
+        height: Math.floor(viewport.height),
+        mimeType: 'image/jpeg',
+      };
+    },
+    { concurrency: 10 },
+  );
+
+  void pdf.destroy();
+
+  return images;
+};

packages/lib/server-only/recipient/create-envelope-recipients.ts

@@ -27,7 +27,7 @@ export interface CreateEnvelopeRecipientsOptions {
     accessAuth?: TRecipientAccessAuthTypes[];
     actionAuth?: TRecipientActionAuthTypes[];
   }[];
-  requestMetadata: ApiRequestMetadata;
+  requestMetadata?: ApiRequestMetadata;
 }
 
 export const createEnvelopeRecipients = async ({

packages/lib/translations/en/web.po

@@ -2812,10 +2812,6 @@ msgstr "Created on {0}"
 msgid "CSV Structure"
 msgstr "CSV Structure"
 
-#: apps/remix/app/routes/_authenticated+/admin+/stats.tsx
-msgid "Cumulative MAU (signed in)"
-msgstr "Cumulative MAU (signed in)"
-
 #: apps/remix/app/routes/_authenticated+/settings+/security.sessions.tsx
 msgid "Current"
 msgstr "Current"

packages/lib/translations/pl/web.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: pl\n"
 "Project-Id-Version: documenso-app\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2025-11-27 05:32\n"
+"PO-Revision-Date: 2025-11-27 18:05\n"
 "Last-Translator: \n"
 "Language-Team: Polish\n"
 "Plural-Forms: nplurals=4; plural=(n==1 ? 0 : (n%10>=2 && n%10<=4) && (n%100<12 || n%100>14) ? 1 : n!=1 && (n%10>=0 && n%10<=1) || (n%10>=5 && n%10<=9) || (n%100>=12 && n%100<=14) ? 2 : 3);\n"
@@ -944,7 +944,7 @@ msgstr "Akcje"
 #: apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.members.tsx
 #: apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings._index.tsx
 msgid "Active"
-msgstr "Aktywny"
+msgstr "Aktywne"
 
 #: apps/remix/app/routes/_authenticated+/settings+/security._index.tsx
 #: apps/remix/app/routes/_authenticated+/settings+/security.sessions.tsx
@@ -1239,7 +1239,7 @@ msgstr "Wszystkie wstawione podpisy zostaną unieważnione"
 
 #: apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx
 msgid "All recipients have signed. The document is being processed and you will receive an email copy shortly."
-msgstr "Wszyscy odbiorcy podpisali. Dokument jest przetwarzany i wkrótce otrzymasz jego kopię e‑mailem."
+msgstr "Wszyscy odbiorcy podpisali dokument. Dokument jest przetwarzany i wkrótce otrzymasz jego kopię."
 
 #: apps/remix/app/components/dialogs/document-delete-dialog.tsx
 msgid "All recipients will be notified"
@@ -3102,7 +3102,7 @@ msgstr "Szczegóły"
 
 #: apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx
 msgid "Developer Mode"
-msgstr "Tryb deweloperski"
+msgstr "Tryb programisty"
 
 #: apps/remix/app/components/tables/settings-security-activity-table.tsx
 #: apps/remix/app/routes/_authenticated+/settings+/security.sessions.tsx
@@ -3716,7 +3716,7 @@ msgstr "Przeciągnij i upuść plik PDF"
 #: packages/ui/primitives/signature-pad/signature-pad.tsx
 msgctxt "Draw signature"
 msgid "Draw"
-msgstr "Rysuj"
+msgstr "Rysowany"
 
 #: apps/remix/app/components/embed/authoring/configure-document-upload.tsx
 msgid "Drop your document here"
@@ -4256,7 +4256,7 @@ msgstr "Wszyscy podpisali"
 
 #: apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx
 msgid "Everyone has signed! You will receive an email copy of the signed document."
-msgstr "Wszyscy podpisali! Otrzymasz kopię podpisanego dokumentu e‑mailem."
+msgstr "Wszyscy podpisali! Otrzymasz wiadomość z podpisanym dokumentem."
 
 #: apps/remix/app/components/dialogs/passkey-create-dialog.tsx
 msgid "Exceeded timeout"
@@ -4837,7 +4837,7 @@ msgstr "Uwaga: Co to oznacza"
 
 #: apps/remix/app/components/tables/user-billing-organisations-table.tsx
 msgid "Inactive"
-msgstr "Nieaktywne"
+msgstr "Nieaktywna"
 
 #: apps/remix/app/components/general/app-nav-mobile.tsx
 #: apps/remix/app/components/general/app-nav-mobile.tsx
@@ -5208,7 +5208,7 @@ msgstr "Wygenerowane linki"
 
 #: apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks._index.tsx
 msgid "Listening to"
-msgstr "Nasłuchuje"
+msgstr "Nasłuchiwanie"
 
 #: apps/remix/app/components/general/document/document-page-view-recent-activity.tsx
 msgid "Load older activity"
@@ -5252,7 +5252,7 @@ msgstr "Zaloguj się"
 
 #: apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks._index.tsx
 msgid "Logs"
-msgstr "Dzienniki"
+msgstr "Logi"
 
 #: apps/remix/app/components/tables/admin-organisations-table.tsx
 #: apps/remix/app/components/tables/organisation-teams-table.tsx
@@ -5292,7 +5292,7 @@ msgstr "Zarządzaj płatnościami"
 
 #: apps/remix/app/routes/_authenticated+/settings+/billing.tsx
 msgid "Manage billing and subscriptions for organisations where you have billing management permissions."
-msgstr "Zarządzaj rozliczeniami i subskrypcjami dla organizacji, w których masz uprawnienia do zarządzania rozliczeniami."
+msgstr "Zarządzaj płatnościami i subskrypcjami organizacji, w których masz uprawnienia do zarządzania płatnościami."
 
 #: apps/remix/app/components/dialogs/public-profile-template-manage-dialog.tsx
 msgid "Manage details for this public template"
@@ -6192,7 +6192,7 @@ msgstr "Hasło zostało zaktualizowane!"
 
 #: apps/remix/app/components/tables/user-billing-organisations-table.tsx
 msgid "Past Due"
-msgstr "Po terminie"
+msgstr "Przeterminowana"
 
 #: apps/remix/app/components/general/organisations/organisation-billing-banner.tsx
 #: apps/remix/app/components/general/organisations/organisation-billing-banner.tsx
@@ -6412,7 +6412,7 @@ msgstr "Otwórz aplikację uwierzytelniającą i wpisz 6-cyfrowy kod dla tego do
 
 #: apps/remix/app/components/general/document-signing/document-signing-reject-dialog.tsx
 msgid "Please provide a reason for rejecting this document"
-msgstr "Podaj powód odrzucenia tego dokumentu"
+msgstr "Podaj powód odrzucenia dokumentu"
 
 #: apps/remix/app/components/forms/2fa/disable-authenticator-app-dialog.tsx
 msgid "Please provide a token from the authenticator, or a backup code. If you do not have a backup code available, please contact support."
@@ -7134,7 +7134,7 @@ msgstr "Szukaj tytułu dokumentu"
 
 #: apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks.$id._index.tsx
 msgid "Search by ID"
-msgstr "Szukaj po ID"
+msgstr "Szukaj identyfikatora"
 
 #: apps/remix/app/components/tables/admin-dashboard-users-table.tsx
 msgid "Search by name or email"
@@ -7231,7 +7231,7 @@ msgstr "Wybierz metody dostępu"
 
 #: apps/remix/app/components/dialogs/webhook-test-dialog.tsx
 msgid "Select an event type"
-msgstr "Wybierz typ zdarzenia"
+msgstr "Wybierz rodzaj zdarzenia"
 
 #: apps/remix/app/components/dialogs/sign-field-dropdown-dialog.tsx
 #: packages/ui/primitives/combobox.tsx
@@ -8380,7 +8380,7 @@ msgstr "Szablony umożliwiają szybkie generowanie dokumentów z wcześniej wype
 
 #: apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks.$id._index.tsx
 msgid "Test"
-msgstr "Test"
+msgstr "Testuj"
 
 #: apps/remix/app/components/dialogs/webhook-test-dialog.tsx
 msgid "Test Webhook"
@@ -9257,13 +9257,13 @@ msgstr "Weryfikacja dwuetapowa"
 #: apps/remix/app/components/tables/admin-document-recipient-item-table.tsx
 #: apps/remix/app/components/tables/templates-table.tsx
 msgid "Type"
-msgstr "Typ"
+msgstr "Rodzaj"
 
 #: packages/lib/constants/document.ts
 #: packages/ui/primitives/signature-pad/signature-pad.tsx
 msgctxt "Type signature"
 msgid "Type"
-msgstr "Wpisz"
+msgstr "Pisany"
 
 #: apps/remix/app/components/general/app-command-menu.tsx
 msgid "Type a command or search..."
@@ -9560,7 +9560,7 @@ msgstr "Przesłany"
 #: packages/ui/primitives/signature-pad/signature-pad.tsx
 msgctxt "Upload signature"
 msgid "Upload"
-msgstr "Prześlij"
+msgstr "Przesłany"
 
 #: apps/remix/app/components/dialogs/template-bulk-send-dialog.tsx
 msgid "Upload a CSV file to create multiple documents from this template. Each row represents one document with its recipient details."
@@ -10350,7 +10350,7 @@ msgstr "Webhook nie został znaleziony"
 
 #: apps/remix/app/components/general/webhook-logs-sheet.tsx
 msgid "Webhook successfully sent"
-msgstr "Webhook został pomyślnie wysłany"
+msgstr "Webhook został wysłany"
 
 #: apps/remix/app/components/dialogs/webhook-edit-dialog.tsx
 msgid "Webhook updated"
@@ -10712,7 +10712,7 @@ msgstr "Nie masz uprawnień do utworzenia tokena dla tego zespołu"
 
 #: apps/remix/app/components/tables/user-billing-organisations-table.tsx
 msgid "You don't manage billing for any organisations."
-msgstr "Nie zarządzasz rozliczeniami dla żadnej organizacji."
+msgstr "Nie zarządzasz płatnościami żadnej organizacji."
 
 #: packages/email/template-components/template-document-cancel.tsx
 msgid "You don't need to sign it anymore."
@@ -10931,7 +10931,7 @@ msgstr "Kod z aplikacji uwierzytelniającej będzie wymagany podczas logowania."
 
 #: apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx
 msgid "You will receive an email copy of the signed document once everyone has signed."
-msgstr "Otrzymasz kopię podpisanego dokumentu e‑mailem, gdy wszyscy go podpiszą."
+msgstr "Otrzymasz kopię dokumentu, gdy wszyscy go podpiszą."
 
 #: apps/remix/app/routes/_unauthenticated+/organisation.sso.confirmation.$token.tsx
 msgid "Your Account"

packages/lib/translations/pt-BR/web.po

@@ -2812,10 +2812,6 @@ msgstr "Criado em {0}"
 msgid "CSV Structure"
 msgstr "Estrutura do CSV"
 
-#: apps/remix/app/routes/_authenticated+/admin+/stats.tsx
-msgid "Cumulative MAU (signed in)"
-msgstr "MAU acumulado (logados)"
-
 #: apps/remix/app/routes/_authenticated+/settings+/security.sessions.tsx
 msgid "Current"
 msgstr "Atual"

packages/lib/translations/sq/web.po

@@ -2298,10 +2298,6 @@ msgstr "Krijuar më {0}"
 msgid "CSV Structure"
 msgstr "Struktura CSV"
 
-#: apps/remix/app/routes/_authenticated+/admin+/stats.tsx
-msgid "Cumulative MAU (signed in)"
-msgstr ""
-
 #: apps/remix/app/routes/_authenticated+/settings+/security.sessions.tsx
 msgid "Current"
 msgstr "Aktual"

packages/lib/utils/organisations.ts

@@ -135,5 +135,7 @@ export const generateDefaultOrganisationSettings = (): Omit<
     emailReplyTo: null,
     // emailReplyToName: null,
     emailDocumentSettings: DEFAULT_DOCUMENT_EMAIL_SETTINGS,
+
+    aiFeaturesEnabled: false,
   };
 };

packages/lib/utils/teams.ts

@@ -202,6 +202,8 @@ export const generateDefaultTeamSettings = (): Omit<TeamGlobalSettings, 'id' | '
     emailId: null,
     emailReplyTo: null,
     // emailReplyToName: null,
+
+    aiFeaturesEnabled: null,
   };
 };
 

packages/prisma/migrations/20251201000000_add_ai_features_enabled/migration.sql

@@ -0,0 +1,6 @@
+-- AlterTable
+ALTER TABLE "OrganisationGlobalSettings" ADD COLUMN "aiFeaturesEnabled" BOOLEAN NOT NULL DEFAULT false;
+
+-- AlterTable
+ALTER TABLE "TeamGlobalSettings" ADD COLUMN "aiFeaturesEnabled" BOOLEAN;
+

packages/prisma/schema.prisma

@@ -834,6 +834,9 @@ model OrganisationGlobalSettings {
   brandingLogo           String  @default("")
   brandingUrl            String  @default("")
   brandingCompanyDetails String  @default("")
+
+  // AI features settings.
+  aiFeaturesEnabled Boolean @default(false)
 }
 
 /// @zod.import(["import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';"])
@@ -865,6 +868,9 @@ model TeamGlobalSettings {
   brandingLogo           String?
   brandingUrl            String?
   brandingCompanyDetails String?
+
+  // AI features settings.
+  aiFeaturesEnabled Boolean?
 }
 
 model Team {

packages/trpc/server/envelope-router/set-envelope-fields.ts

@@ -66,7 +66,7 @@ export const setEnvelopeFieldsRoute = authenticatedProcedure
 
     return {
       data: result.fields.map((field) => ({
-        id: field.id,
+        ...field,
         formId: field.formId,
       })),
     };

packages/trpc/server/envelope-router/set-envelope-fields.types.ts

@@ -6,6 +6,7 @@ import {
   ZClampedFieldPositionXSchema,
   ZClampedFieldPositionYSchema,
   ZClampedFieldWidthSchema,
+  ZEnvelopeFieldSchema,
 } from '@documenso/lib/types/field';
 import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
 
@@ -37,12 +38,9 @@ export const ZSetEnvelopeFieldsRequestSchema = z.object({
 });
 
 export const ZSetEnvelopeFieldsResponseSchema = z.object({
-  data: z
-    .object({
-      id: z.number(),
-      formId: z.string().optional(),
-    })
-    .array(),
+  data: ZEnvelopeFieldSchema.extend({
+    formId: z.string().optional(),
+  }).array(),
 });
 
 export type TSetEnvelopeFieldsRequest = z.infer<typeof ZSetEnvelopeFieldsRequestSchema>;

packages/trpc/server/organisation-router/get-organisation-session.ts

@@ -1,5 +1,9 @@
 import { getHighestOrganisationRoleInGroup } from '@documenso/lib/utils/organisations';
-import { buildTeamWhereQuery, getHighestTeamRoleInGroup } from '@documenso/lib/utils/teams';
+import {
+  buildTeamWhereQuery,
+  extractDerivedTeamSettings,
+  getHighestTeamRoleInGroup,
+} from '@documenso/lib/utils/teams';
 import { prisma } from '@documenso/prisma';
 
 import { authenticatedProcedure } from '../trpc';
@@ -30,6 +34,7 @@ export const getOrganisationSession = async ({
     },
     include: {
       organisationClaim: true,
+      organisationGlobalSettings: true,
       subscription: true,
       groups: {
         where: {
@@ -45,6 +50,7 @@ export const getOrganisationSession = async ({
       teams: {
         where: buildTeamWhereQuery({ teamId: undefined, userId }),
         include: {
+          teamGlobalSettings: true,
           teamGroups: {
             where: {
               organisationGroup: {
@@ -67,12 +73,24 @@ export const getOrganisationSession = async ({
   });
 
   return organisations.map((organisation) => {
+    const { organisationGlobalSettings } = organisation;
+
     return {
       ...organisation,
-      teams: organisation.teams.map((team) => ({
-        ...team,
-        currentTeamRole: getHighestTeamRoleInGroup(team.teamGroups),
-      })),
+      teams: organisation.teams.map((team) => {
+        const derivedSettings = extractDerivedTeamSettings(
+          organisationGlobalSettings,
+          team.teamGlobalSettings,
+        );
+
+        return {
+          ...team,
+          currentTeamRole: getHighestTeamRoleInGroup(team.teamGroups),
+          preferences: {
+            aiFeaturesEnabled: derivedSettings.aiFeaturesEnabled,
+          },
+        };
+      }),
       currentOrganisationRole: getHighestOrganisationRoleInGroup(organisation.groups),
     };
   });

packages/trpc/server/organisation-router/get-organisation-session.types.ts

@@ -16,6 +16,9 @@ export const ZGetOrganisationSessionResponseSchema = ZOrganisationSchema.extend(
       organisationId: true,
     }).extend({
       currentTeamRole: z.nativeEnum(TeamMemberRole),
+      preferences: z.object({
+        aiFeaturesEnabled: z.boolean(),
+      }),
     }),
   ),
   subscription: SubscriptionSchema.nullable(),

packages/trpc/server/organisation-router/update-organisation-settings.ts

@@ -48,6 +48,9 @@ export const updateOrganisationSettingsRoute = authenticatedProcedure
       emailReplyTo,
       // emailReplyToName,
       emailDocumentSettings,
+
+      // AI features settings.
+      aiFeaturesEnabled,
     } = data;
 
     if (Object.values(data).length === 0) {
@@ -149,6 +152,9 @@ export const updateOrganisationSettingsRoute = authenticatedProcedure
             emailReplyTo,
             // emailReplyToName,
             emailDocumentSettings,
+
+            // AI features settings.
+            aiFeaturesEnabled,
           },
         },
       },

packages/trpc/server/organisation-router/update-organisation-settings.types.ts

@@ -34,6 +34,9 @@ export const ZUpdateOrganisationSettingsRequestSchema = z.object({
     emailReplyTo: z.string().email().nullish(),
     // emailReplyToName: z.string().optional(),
     emailDocumentSettings: ZDocumentEmailSettingsSchema.optional(),
+
+    // AI features settings.
+    aiFeaturesEnabled: z.boolean().optional(),
   }),
 });
 

packages/trpc/server/team-router/update-team-settings.ts

@@ -51,6 +51,9 @@ export const updateTeamSettingsRoute = authenticatedProcedure
       emailReplyTo,
       // emailReplyToName,
       emailDocumentSettings,
+
+      // AI features settings.
+      aiFeaturesEnabled,
     } = data;
 
     if (Object.values(data).length === 0) {
@@ -160,6 +163,9 @@ export const updateTeamSettingsRoute = authenticatedProcedure
             // emailReplyToName,
             emailDocumentSettings:
               emailDocumentSettings === null ? Prisma.DbNull : emailDocumentSettings,
+
+            // AI features settings.
+            aiFeaturesEnabled,
           },
         },
       },

packages/trpc/server/team-router/update-team-settings.types.ts

@@ -38,6 +38,9 @@ export const ZUpdateTeamSettingsRequestSchema = z.object({
     emailReplyTo: z.string().email().nullish(),
     // emailReplyToName: z.string().nullish(),
     emailDocumentSettings: ZDocumentEmailSettingsSchema.nullish(),
+
+    // AI features settings.
+    aiFeaturesEnabled: z.boolean().nullish(),
   }),
 });
 

packages/trpc/server/template-router/router.ts

@@ -459,6 +459,7 @@ export const templateRouter = router({
         customDocumentDataId,
         folderId,
         prefillFields,
+        externalId,
         override,
         attachments,
       } = input;
@@ -497,6 +498,7 @@ export const templateRouter = router({
         requestMetadata: ctx.metadata,
         folderId,
         prefillFields,
+        externalId,
         override,
         attachments,
       });

packages/trpc/server/template-router/schema.ts

@@ -29,6 +29,7 @@ import {
   ZTemplateSchema,
 } from '@documenso/lib/types/template';
 import { LegacyTemplateDirectLinkSchema } from '@documenso/prisma/types/template-legacy-schema';
+import { ZDocumentExternalIdSchema } from '@documenso/trpc/server/document-router/schema';
 
 import { zodFormData } from '../../utils/zod-form-data';
 import { ZSignFieldWithTokenMutationSchema } from '../field-router/schema';
@@ -96,6 +97,7 @@ export const ZCreateDocumentFromDirectTemplateRequestSchema = z.object({
 
 export const ZCreateDocumentFromTemplateRequestSchema = z.object({
   templateId: z.number(),
+  externalId: ZDocumentExternalIdSchema.optional(),
   recipients: z
     .array(
       z.object({

packages/tsconfig/process-env.d.ts

@@ -86,5 +86,12 @@ declare namespace NodeJS {
     DATABASE_URL?: string;
     POSTGRES_PRISMA_URL?: string;
     POSTGRES_URL_NON_POOLING?: string;
+
+    /**
+     * Google Vertex AI environment variables
+     */
+    GOOGLE_VERTEX_PROJECT_ID?: string;
+    GOOGLE_VERTEX_LOCATION?: string;
+    GOOGLE_VERTEX_API_KEY?: string;
   }
 }

packages/ui/components/document/document-visibility-select.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 
-import { useLingui } from '@lingui/react/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { TeamMemberRole } from '@prisma/client';
 import type { SelectProps } from '@radix-ui/react-select';
 import { InfoIcon } from 'lucide-react';
@@ -70,21 +70,31 @@ export const DocumentVisibilityTooltip = () => {
 
       <TooltipContent className="text-foreground max-w-md space-y-2 p-4">
         <h2>
-          <strong>Document visibility</strong>
+          <strong>
+            <Trans>Document visibility</Trans>
+          </strong>
         </h2>
 
-        <p>The visibility of the document to the recipient.</p>
+        <p>
+          <Trans>The visibility of the document to the recipient.</Trans>
+        </p>
 
         <ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
           <li>
-            <strong>Everyone</strong> - Everyone can access and view the document
+            <Trans>
+              <strong>Everyone</strong> - Everyone can access and view the document
+            </Trans>
           </li>
           <li>
-            <strong>Managers and above</strong> - Only managers and above can access and view the
-            document
+            <Trans>
+              <strong>Managers and above</strong> - Only managers and above can access and view the
+              document
+            </Trans>
           </li>
           <li>
-            <strong>Admins only</strong> - Only admins can access and view the document
+            <Trans>
+              <strong>Admins only</strong> - Only admins can access and view the document
+            </Trans>
           </li>
         </ul>
       </TooltipContent>

packages/ui/package.json

@@ -67,7 +67,7 @@
     "lucide-react": "^0.554.0",
     "luxon": "^3.7.2",
     "perfect-freehand": "^1.2.2",
-    "pdfjs-dist": "5.4.296",
+    "pdfjs-dist": "5.4.449",
     "react": "^18",
     "react-colorful": "^5.6.1",
     "react-day-picker": "^8.10.1",

packages/ui/primitives/data-table-pagination.tsx

@@ -27,10 +27,19 @@ export function DataTablePagination<TData>({
         {match(additionalInformation)
           .with('SelectedCount', () => (
             <span>
-              <Trans>
-                {table.getFilteredSelectedRowModel().rows.length} of{' '}
-                {table.getFilteredRowModel().rows.length} row(s) selected.
-              </Trans>
+              <Plural
+                value={table.getFilteredRowModel().rows.length}
+                one={
+                  <Trans>
+                    {table.getFilteredSelectedRowModel().rows.length} of # row selected.
+                  </Trans>
+                }
+                other={
+                  <Trans>
+                    {table.getFilteredSelectedRowModel().rows.length} of # rows selected.
+                  </Trans>
+                }
+              />
             </span>
           ))
           .with('VisibleCount', () => {

packages/ui/primitives/document-flow/add-fields.tsx

@@ -457,8 +457,8 @@ export const AddFieldsFormPartial = ({
         setFieldClipboard(lastActiveField);
 
         toast({
-          title: 'Copied field',
-          description: 'Copied field to clipboard',
+          title: _(msg`Copied field`),
+          description: _(msg`Copied field to clipboard`),
         });
       }
     },

packages/ui/primitives/document-flow/add-settings.tsx

@@ -312,7 +312,7 @@ export const AddSettingsFormPartial = ({
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel className="flex flex-row items-center">
-                      Document visibility
+                      <Trans>Document visibility</Trans>
                       <DocumentVisibilityTooltip />
                     </FormLabel>
 

packages/ui/primitives/document-flow/add-signers.tsx

@@ -350,8 +350,14 @@ export const AddSignersFormPartial = ({
     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(

packages/ui/primitives/signature-pad/signature-pad-type.tsx

@@ -20,10 +20,14 @@ export const SignaturePadType = ({ className, value, onChange }: SignaturePadTyp
       <input
         data-testid="signature-pad-type-input"
         placeholder={t`Type your signature`}
-        className="font-signature w-full bg-transparent px-4 text-center text-7xl text-black placeholder:text-4xl focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:text-white"
+        className="w-full bg-transparent px-4 text-center font-signature text-7xl text-black placeholder:text-4xl focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:text-white"
         // style={{ color: selectedColor }}
         value={value}
         onChange={(event) => onChange(event.target.value.trimStart())}
+        autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="off"
+        spellCheck={false}
       />
 
       {/* <SignaturePadColorPicker selectedColor={selectedColor} setSelectedColor={setSelectedColor} /> */}

packages/ui/primitives/template-flow/add-template-fields.tsx

@@ -217,8 +217,8 @@ export const AddTemplateFieldsFormPartial = ({
         setFieldClipboard(lastActiveField);
 
         toast({
-          title: 'Copied field',
-          description: 'Copied field to clipboard',
+          title: _(msg`Copied field`),
+          description: _(msg`Copied field to clipboard`),
         });
       }
     },

packages/ui/primitives/template-flow/add-template-settings.tsx

@@ -305,7 +305,7 @@ export const AddTemplateSettingsFormPartial = ({
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel className="flex flex-row items-center">
-                      Document visibility
+                      <Trans>Document visibility</Trans>
                       <DocumentVisibilityTooltip />
                     </FormLabel>
 

turbo.json

@@ -2,12 +2,20 @@
   "$schema": "https://turbo.build/schema.json",
   "pipeline": {
     "build": {
-      "dependsOn": ["prebuild", "^build"],
-      "outputs": [".next/**", "!.next/cache/**"]
+      "dependsOn": [
+        "prebuild",
+        "^build"
+      ],
+      "outputs": [
+        ".next/**",
+        "!.next/cache/**"
+      ]
     },
     "prebuild": {
       "cache": false,
-      "dependsOn": ["^prebuild"]
+      "dependsOn": [
+        "^prebuild"
+      ]
     },
     "lint": {
       "cache": false
@@ -23,7 +31,9 @@
       "persistent": true
     },
     "start": {
-      "dependsOn": ["^build"],
+      "dependsOn": [
+        "^build"
+      ],
       "cache": false,
       "persistent": true
     },
@@ -31,11 +41,15 @@
       "cache": false
     },
     "test:e2e": {
-      "dependsOn": ["^build"],
+      "dependsOn": [
+        "^build"
+      ],
       "cache": false
     }
   },
-  "globalDependencies": ["**/.env.*local"],
+  "globalDependencies": [
+    "**/.env.*local"
+  ],
   "globalEnv": [
     "APP_VERSION",
     "PORT",
@@ -112,6 +126,9 @@
     "NEXT_PRIVATE_TELEMETRY_KEY",
     "NEXT_PRIVATE_TELEMETRY_HOST",
     "DOCUMENSO_DISABLE_TELEMETRY",
+    "GOOGLE_VERTEX_PROJECT_ID",
+    "GOOGLE_VERTEX_LOCATION",
+    "GOOGLE_VERTEX_API_KEY",
     "CI",
     "NODE_ENV",
     "POSTGRES_URL",
@@ -126,4 +143,4 @@
     "NEXT_PUBLIC_USE_INTERNAL_URL_BROWSERLESS",
     "NEXT_PRIVATE_OIDC_PROMPT"
   ]
-}
+}