feat: support language in embedding (#2364)

apps/remix/app/routes/embed+/playground.tsx

@@ -37,6 +37,7 @@ export default function EmbedPlaygroundPage() {
     () => (searchParams.get('envelopeType') as 'DOCUMENT' | 'TEMPLATE') || 'DOCUMENT',
   );
   const [folderId, setFolderId] = useState(() => searchParams.get('folderId') || '');
+  const [language, setLanguage] = useState(() => searchParams.get('language') || '');
 
   // Auto-launch if query params are present on mount
   const [iframeSrc, setIframeSrc] = useState<string | null>(null);
@@ -203,6 +204,7 @@ export default function EmbedPlaygroundPage() {
     envelopeId: string;
     envelopeType: string;
     folderId: string;
+    language: string;
   }) => {
     const newParams = new URLSearchParams();
 
@@ -230,6 +232,10 @@ export default function EmbedPlaygroundPage() {
       newParams.set('folderId', params.folderId);
     }
 
+    if (params.language) {
+      newParams.set('language', params.language);
+    }
+
     const qs = newParams.toString();
 
     void navigate(qs ? `?${qs}` : '.', { replace: true });
@@ -270,6 +276,7 @@ export default function EmbedPlaygroundPage() {
       externalId: externalId || undefined,
       type: mode === 'create' ? envelopeType : undefined,
       folderId: mode === 'create' && folderId ? folderId : undefined,
+      language: language || undefined,
       darkModeDisabled: darkModeDisabled || undefined,
       css: rawCss || undefined,
       cssVars: Object.keys(filteredCssVars).length > 0 ? filteredCssVars : undefined,
@@ -299,7 +306,15 @@ export default function EmbedPlaygroundPage() {
     setIframeSrc(buildIframeSrc(basePath, presignToken, hash));
     setIframeKey((prev) => prev + 1);
 
-    updateQueryParams({ token: inputToken, externalId, mode, envelopeId, envelopeType, folderId });
+    updateQueryParams({
+      token: inputToken,
+      externalId,
+      mode,
+      envelopeId,
+      envelopeType,
+      folderId,
+      language,
+    });
   };
 
   const handleSubmit = useCallback(
@@ -314,6 +329,7 @@ export default function EmbedPlaygroundPage() {
       envelopeId,
       envelopeType,
       folderId,
+      language,
       generalFeatures,
       settingsFeatures,
       actionsFeatures,
@@ -333,6 +349,7 @@ export default function EmbedPlaygroundPage() {
     setEnvelopeId('');
     setEnvelopeType('DOCUMENT');
     setFolderId('');
+    setLanguage('');
     setIframeSrc(null);
     setMessages([]);
     setTokenError(null);
@@ -477,6 +494,30 @@ export default function EmbedPlaygroundPage() {
             </div>
           )}
 
+          <div style={{ marginBottom: '8px' }}>
+            <label style={{ display: 'block', fontSize: '12px', fontWeight: 'bold' }}>
+              Language (optional)
+            </label>
+            <select
+              value={language}
+              onChange={(e) => setLanguage(e.target.value)}
+              style={{ width: '100%', padding: '4px', fontSize: '12px' }}
+            >
+              <option value="">Default (en)</option>
+              <option value="de">German (de)</option>
+              <option value="en">English (en)</option>
+              <option value="es">Spanish (es)</option>
+              <option value="fr">French (fr)</option>
+              <option value="it">Italian (it)</option>
+              <option value="ja">Japanese (ja)</option>
+              <option value="ko">Korean (ko)</option>
+              <option value="nl">Dutch (nl)</option>
+              <option value="pl">Polish (pl)</option>
+              <option value="pt-BR">Portuguese - Brazil (pt-BR)</option>
+              <option value="zh">Chinese (zh)</option>
+            </select>
+          </div>
+
           <h3 style={{ fontSize: '14px', margin: '12px 0 4px' }}>Feature Flags</h3>
 
           {renderCheckboxGroup('General', generalFeatures, setGeneralFeatures)}