@purposeinplay/payload-ai-translate 0.1.0

package/dist/client/translate-modal.js

@@ -0,0 +1,549 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { toast, useConfig, useFormModified } from '@payloadcms/ui';
+import { formatAdminURL } from 'payload/shared';
+import React, { useCallback, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { formatCost } from '../views/shared/format.js';
+// Cost rendering uses the shared `formatCost` helper from
+// `views/shared/format.ts` (NEW-17 — single source of truth across
+// every cost render site in the plugin).
+export function TranslateModal({ docId, collectionSlug, globalSlug, onClose, onJobStarted }) {
+    const { config } = useConfig();
+    // The modal does NOT auto-save the form. A previous implementation
+    // called `useForm().submit()` here so unsaved edits would flush
+    // before the estimate/translate read the DB — but that save fires
+    // the collection's afterChange hooks, including this plugin's own
+    // auto-translate hook. The result: clicking "Continue" silently
+    // kicked off a real translation in the background while the user
+    // was still looking at the cost estimate. Cancel on the cost modal
+    // closed the dialog but never aborted the in-flight job, so the
+    // explicit "Translate" button (when clicked) actually fired a
+    // SECOND translation on top of the first. The estimate + translate
+    // endpoints both read DB state directly; if the form has unsaved
+    // edits the user is warned in the estimate step so they can save
+    // first and reopen the modal.
+    const formModified = useFormModified();
+    const locales = config.localization ? config.localization.locales : [];
+    const defaultLocale = config.localization ? config.localization.defaultLocale : 'en';
+    // Restrict the picker to the plugin's configured `targetLocales` (not
+    // every locale registered in Payload's `config.localization`). Without
+    // this filter, the drawer surfaces locales the plugin can't translate
+    // to anyway. Payload's admin bundle strips function refs from
+    // `config.custom` so we can't read `targetLocales` synchronously from
+    // `useConfig()` — fetch them from the plugin's `/ai-translate/
+    // client-config` endpoint on mount instead. Falls back to "every
+    // non-source locale" until the fetch resolves (no flash of wrong UI;
+    // the modal starts disabled below).
+    const [pluginTargetLocales, setPluginTargetLocales] = useState(null);
+    const [clientConfigLoaded, setClientConfigLoaded] = useState(false);
+    const apiRouteForConfig = config.routes?.api ?? '/api';
+    // Use `formatAdminURL` so the consumer's Next.js basePath (e.g. '/blog'
+    // for blog-wild) is prepended. Raw `${apiRoute}/...` resolves against
+    // `window.location.origin + apiRoute` and 404s on every consumer
+    // that uses a basePath. Mirrors the pattern in `excluded-fields-field.tsx`.
+    const clientConfigUrl = formatAdminURL({
+        apiRoute: apiRouteForConfig,
+        path: '/ai-translate/client-config',
+        serverURL: ''
+    });
+    useEffect(()=>{
+        let cancelled = false;
+        void fetch(clientConfigUrl, {
+            credentials: 'include'
+        }).then((res)=>res.ok ? res.json() : null).then((data)=>{
+            if (cancelled) return;
+            if (data && Array.isArray(data.targetLocales)) {
+                setPluginTargetLocales(data.targetLocales);
+            }
+            setClientConfigLoaded(true);
+        }).catch(()=>{
+            if (cancelled) return;
+            // Network / 404 → graceful fallback to "every non-source locale"
+            setClientConfigLoaded(true);
+        });
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        clientConfigUrl
+    ]);
+    const targetLocales = pluginTargetLocales && pluginTargetLocales.length > 0 ? locales.filter((l)=>pluginTargetLocales.includes(l.code)) : locales.filter((l)=>l.code !== defaultLocale);
+    const [selected, setSelected] = useState(new Set());
+    // Once the fetch settles, default-select every plugin-configured locale.
+    // Done in an effect so the selection updates after `targetLocales`
+    // resolves; without this, the modal renders with an empty selection.
+    useEffect(()=>{
+        if (clientConfigLoaded) {
+            setSelected(new Set(targetLocales.map((l)=>l.code)));
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        clientConfigLoaded,
+        pluginTargetLocales
+    ]);
+    const [step, setStep] = useState('pick-locales');
+    const [estimate, setEstimate] = useState(null);
+    const [resultMessage, setResultMessage] = useState('');
+    const isGlobal = !!globalSlug;
+    const pathPrefix = isGlobal ? `/globals/${globalSlug}` : `/${collectionSlug}`;
+    const apiRoute = config.routes?.api ?? '/api';
+    const toggleLocale = (code)=>{
+        setSelected((prev)=>{
+            const next = new Set(prev);
+            if (next.has(code)) next.delete(code);
+            else next.add(code);
+            return next;
+        });
+    };
+    // Step 1: locale picker → fetch estimate (does NOT save the form;
+    // see the rationale on `formModified` above).
+    const handleConfirmLocales = useCallback(async ()=>{
+        if (selected.size === 0) return;
+        setStep('estimating');
+        try {
+            const body = isGlobal ? {
+                targetLocales: [
+                    ...selected
+                ]
+            } : {
+                ids: [
+                    docId
+                ],
+                targetLocales: [
+                    ...selected
+                ]
+            };
+            const estimatePath = `${pathPrefix}/ai-translate/estimate`;
+            const res = await fetch(formatAdminURL({
+                apiRoute,
+                path: estimatePath
+            }), {
+                method: 'POST',
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(body)
+            });
+            if (!res.ok) {
+                // Estimate failed — fall through, allow user to translate without it
+                toast.error('Could not fetch cost estimate; you can still proceed.');
+                setEstimate(null);
+                setStep('estimate-shown');
+                return;
+            }
+            const data = await res.json();
+            setEstimate(data);
+            setStep('estimate-shown');
+        } catch  {
+            toast.error('Could not fetch cost estimate; you can still proceed.');
+            setEstimate(null);
+            setStep('estimate-shown');
+        }
+    }, [
+        selected,
+        docId,
+        pathPrefix,
+        apiRoute,
+        isGlobal
+    ]);
+    // Step 2: estimate-shown → fire translation
+    const handleTranslate = useCallback(async ()=>{
+        setStep('translating');
+        try {
+            const body = {
+                targetLocales: [
+                    ...selected
+                ],
+                // Run in the background. The server returns the jobId immediately
+                // and the sidebar progress widget tracks completion via SSE.
+                async: true
+            };
+            if (!isGlobal) body.id = docId;
+            const translatePath = `${pathPrefix}/ai-translate`;
+            const res = await fetch(formatAdminURL({
+                apiRoute,
+                path: translatePath
+            }), {
+                method: 'POST',
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(body)
+            });
+            if (!res.ok) {
+                const errorData = await res.json().catch(()=>({}));
+                const friendlyFallback = res.status >= 500 ? 'The translation service returned an error. Try again, or contact engineering if it keeps happening.' : 'The translation request couldn’t be completed. Try again, or refresh the page.';
+                throw new Error(errorData.error ?? friendlyFallback);
+            }
+            const data = await res.json();
+            const result = data.results[0];
+            if (result?.jobId) {
+                // Async mode — the server will run the translation in the background.
+                // Hand the jobId off to the sidebar progress widget and close. Keeping
+                // the modal open here would trap the user behind a duplicate progress
+                // UI for the same job.
+                onJobStarted?.(result.jobId);
+                toast.success('Translation started — track progress in the sidebar.');
+                onClose();
+                return;
+            }
+            const successCount = result?.succeeded?.length ?? 0;
+            const failCount = result?.failed?.length ?? 0;
+            setStep('done');
+            if (failCount === 0) {
+                setResultMessage(`Translated ${successCount} field(s) to ${selected.size} locale(s)`);
+                toast.success(`Translation complete: ${successCount} field(s) translated`);
+            } else {
+                setResultMessage(`${successCount} succeeded, ${failCount} failed`);
+                toast.error(`Translation finished, but ${failCount} field${failCount === 1 ? '' : 's'} couldn’t be translated. Open the document to review.`);
+            }
+        } catch (error) {
+            setStep('error');
+            const msg = error instanceof Error ? error.message : 'Translation failed';
+            setResultMessage(msg);
+            toast.error(msg);
+        }
+    }, [
+        selected,
+        docId,
+        pathPrefix,
+        apiRoute,
+        isGlobal
+    ]);
+    // Escape key closes modal (except during active translation)
+    useEffect(()=>{
+        const handleKeyDown = (e)=>{
+            if (e.key === 'Escape' && step !== 'translating' && step !== 'estimating') {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>document.removeEventListener('keydown', handleKeyDown);
+    }, [
+        onClose,
+        step
+    ]);
+    // Portal to document.body so the modal escapes any sticky/fixed/transform
+    // ancestor that would otherwise trap it in a lower stacking context (e.g.
+    // the per-field "Translate..." button lives inside the document sidebar,
+    // whose `position: sticky` parent ranks below the rich-text fixed toolbar
+    // — without a portal the modal renders behind the toolbar).
+    if (typeof document === 'undefined') return null;
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsx("div", {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "ai-translate-modal-title",
+        onClick: (e)=>{
+            if (e.target === e.currentTarget && step !== 'translating' && step !== 'estimating') {
+                onClose();
+            }
+        },
+        style: {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 10000
+        },
+        children: /*#__PURE__*/ _jsxs("div", {
+            style: {
+                backgroundColor: 'var(--theme-elevation-0)',
+                borderRadius: '4px',
+                padding: '24px',
+                minWidth: '360px',
+                maxWidth: '480px',
+                maxHeight: '80vh',
+                overflow: 'auto',
+                color: 'var(--theme-text)'
+            },
+            children: [
+                /*#__PURE__*/ _jsx("h3", {
+                    id: "ai-translate-modal-title",
+                    style: {
+                        margin: '0 0 16px',
+                        fontSize: '18px'
+                    },
+                    children: "Translate Document"
+                }),
+                step === 'pick-locales' && /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx("p", {
+                            style: {
+                                margin: '0 0 12px',
+                                fontSize: '14px',
+                                color: 'var(--theme-elevation-500)'
+                            },
+                            children: "Select target locales:"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: '8px',
+                                marginBottom: '16px'
+                            },
+                            children: targetLocales.map((locale)=>/*#__PURE__*/ _jsxs("label", {
+                                    style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: '8px',
+                                        cursor: 'pointer'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx("input", {
+                                            type: "checkbox",
+                                            checked: selected.has(locale.code),
+                                            onChange: ()=>toggleLocale(locale.code)
+                                        }),
+                                        /*#__PURE__*/ _jsx("span", {
+                                            children: locale.label ?? locale.code
+                                        })
+                                    ]
+                                }, locale.code))
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            style: {
+                                display: 'flex',
+                                gap: '8px',
+                                justifyContent: 'flex-end'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx("button", {
+                                    type: "button",
+                                    onClick: onClose,
+                                    style: {
+                                        padding: '8px 16px',
+                                        backgroundColor: 'transparent',
+                                        border: '1px solid var(--theme-elevation-300)',
+                                        borderRadius: '4px',
+                                        color: 'var(--theme-text)',
+                                        cursor: 'pointer'
+                                    },
+                                    children: "Cancel"
+                                }),
+                                /*#__PURE__*/ _jsx("button", {
+                                    type: "button",
+                                    onClick: handleConfirmLocales,
+                                    disabled: selected.size === 0,
+                                    style: {
+                                        padding: '8px 16px',
+                                        backgroundColor: 'var(--theme-success-500)',
+                                        border: 'none',
+                                        borderRadius: '4px',
+                                        color: 'white',
+                                        cursor: selected.size === 0 ? 'not-allowed' : 'pointer',
+                                        opacity: selected.size === 0 ? 0.5 : 1
+                                    },
+                                    children: "Continue"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                step === 'estimating' && /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        textAlign: 'center',
+                        padding: '16px 0'
+                    },
+                    children: /*#__PURE__*/ _jsx("p", {
+                        children: "Calculating cost estimate…"
+                    })
+                }),
+                step === 'estimate-shown' && /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        formModified && /*#__PURE__*/ _jsx("div", {
+                            role: "alert",
+                            style: {
+                                margin: '0 0 12px',
+                                padding: '10px 12px',
+                                borderRadius: '4px',
+                                border: '1px solid var(--theme-warning-500)',
+                                backgroundColor: 'var(--theme-warning-50, rgba(234, 179, 8, 0.08))',
+                                color: 'var(--theme-warning-800, #78350f)',
+                                fontSize: '13px',
+                                lineHeight: 1.4
+                            },
+                            children: "You have unsaved edits on this document. The translation will use the last saved version — save first if you want recent changes included, then reopen this dialog."
+                        }),
+                        /*#__PURE__*/ _jsx("p", {
+                            style: {
+                                margin: '0 0 12px',
+                                fontSize: '14px',
+                                color: 'var(--theme-elevation-500)'
+                            },
+                            children: "Cost estimate"
+                        }),
+                        estimate ? /*#__PURE__*/ _jsxs("dl", {
+                            style: {
+                                margin: '0 0 16px',
+                                fontSize: '14px',
+                                display: 'grid',
+                                gridTemplateColumns: 'auto 1fr',
+                                gap: '4px 12px'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx("dt", {
+                                    children: "Characters:"
+                                }),
+                                /*#__PURE__*/ _jsxs("dd", {
+                                    style: {
+                                        margin: 0
+                                    },
+                                    children: [
+                                        estimate.totalCharacters.toLocaleString(),
+                                        estimate.likelySkippedCharacters && estimate.likelySkippedCharacters > 0 ? /*#__PURE__*/ _jsxs("span", {
+                                            style: {
+                                                color: 'var(--theme-elevation-500)',
+                                                fontSize: '12px'
+                                            },
+                                            children: [
+                                                ' ',
+                                                "(",
+                                                estimate.billableCharacters.toLocaleString(),
+                                                " billable",
+                                                ' · ',
+                                                estimate.likelySkippedCharacters.toLocaleString(),
+                                                " likely skipped)"
+                                            ]
+                                        }) : null
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx("dt", {
+                                    children: "Tokens (est.):"
+                                }),
+                                /*#__PURE__*/ _jsx("dd", {
+                                    style: {
+                                        margin: 0
+                                    },
+                                    children: estimate.estimatedTokens.toLocaleString()
+                                }),
+                                /*#__PURE__*/ _jsx("dt", {
+                                    children: "Locales:"
+                                }),
+                                /*#__PURE__*/ _jsx("dd", {
+                                    style: {
+                                        margin: 0
+                                    },
+                                    children: estimate.localeCount
+                                }),
+                                /*#__PURE__*/ _jsx("dt", {
+                                    children: "Cost (est.):"
+                                }),
+                                /*#__PURE__*/ _jsx("dd", {
+                                    style: {
+                                        margin: 0,
+                                        fontWeight: 500
+                                    },
+                                    children: formatCost(estimate.estimatedCostUsd)
+                                })
+                            ]
+                        }) : /*#__PURE__*/ _jsx("p", {
+                            style: {
+                                margin: '0 0 16px',
+                                fontSize: '13px',
+                                color: 'var(--theme-warning-500)'
+                            },
+                            children: "Cost estimate unavailable."
+                        }),
+                        estimate && estimate.totalCharacters === 0 && /*#__PURE__*/ _jsx("p", {
+                            style: {
+                                margin: '0 0 16px',
+                                fontSize: '13px',
+                                color: 'var(--theme-warning-500)'
+                            },
+                            children: "No translatable content found in the source locale. Add content in the source locale before translating."
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            style: {
+                                display: 'flex',
+                                gap: '8px',
+                                justifyContent: 'flex-end'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx("button", {
+                                    type: "button",
+                                    onClick: onClose,
+                                    style: {
+                                        padding: '8px 16px',
+                                        backgroundColor: 'transparent',
+                                        border: '1px solid var(--theme-elevation-300)',
+                                        borderRadius: '4px',
+                                        color: 'var(--theme-text)',
+                                        cursor: 'pointer'
+                                    },
+                                    children: "Cancel"
+                                }),
+                                /*#__PURE__*/ _jsxs("button", {
+                                    type: "button",
+                                    onClick: handleTranslate,
+                                    disabled: estimate?.totalCharacters === 0,
+                                    style: {
+                                        padding: '8px 16px',
+                                        backgroundColor: 'var(--theme-success-500)',
+                                        border: 'none',
+                                        borderRadius: '4px',
+                                        color: 'white',
+                                        cursor: estimate?.totalCharacters === 0 ? 'not-allowed' : 'pointer',
+                                        opacity: estimate?.totalCharacters === 0 ? 0.5 : 1
+                                    },
+                                    children: [
+                                        "Translate to ",
+                                        selected.size,
+                                        " locale",
+                                        selected.size !== 1 ? 's' : ''
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                step === 'translating' && /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        textAlign: 'center',
+                        padding: '16px 0'
+                    },
+                    children: /*#__PURE__*/ _jsx("p", {
+                        children: "Starting translation…"
+                    })
+                }),
+                (step === 'done' || step === 'error') && /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("p", {
+                            style: {
+                                margin: '0 0 16px'
+                            },
+                            children: resultMessage
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            style: {
+                                display: 'flex',
+                                justifyContent: 'flex-end'
+                            },
+                            children: /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: onClose,
+                                style: {
+                                    padding: '8px 16px',
+                                    backgroundColor: 'var(--theme-elevation-100)',
+                                    border: 'none',
+                                    borderRadius: '4px',
+                                    color: 'var(--theme-text)',
+                                    cursor: 'pointer'
+                                },
+                                children: "Close"
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    }), document.body);
+}

package/dist/client/translation-progress.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type TranslationProgressProps = {
+    jobId?: string;
+    collectionSlug?: string;
+    globalSlug?: string;
+    docId?: string | number;
+    onComplete?: () => void;
+};
+export declare function TranslationProgress({ jobId, collectionSlug, globalSlug, docId, onComplete, }: TranslationProgressProps): React.JSX.Element | null;
+export {};