@purposeinplay/payload-ai-translate 0.1.0

package/dist/views/TranslationHub/SettingsRail.d.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+import type { LocaleConfig, OpenRouterSettings, TranslationSettings } from './Hub.client.js';
+interface Props {
+    basePath: string;
+    locales: LocaleConfig;
+    onSettingsChange: (ts: TranslationSettings | null, ors: OpenRouterSettings | null) => void;
+    openRouterSettings: OpenRouterSettings | null;
+    translationSettings: TranslationSettings | null;
+}
+export declare const SettingsRail: React.FC<Props>;
+export {};

package/dist/views/TranslationHub/SettingsRail.js

@@ -0,0 +1,382 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { ModelCombobox } from './ModelCombobox.js';
+const SECTION_STYLE = {
+    background: 'var(--theme-elevation-50)',
+    border: '1px solid var(--theme-elevation-150)',
+    borderRadius: '6px',
+    padding: '1rem'
+};
+const LABEL_STYLE = {
+    display: 'block',
+    fontSize: '0.75rem',
+    fontWeight: 600,
+    textTransform: 'uppercase',
+    letterSpacing: '0.05em',
+    color: 'var(--theme-elevation-500)',
+    marginBottom: '0.5rem'
+};
+const SELECT_STYLE = {
+    width: '100%',
+    padding: '0.5rem 0.75rem',
+    background: 'var(--theme-elevation-50)',
+    border: '1px solid var(--theme-elevation-150)',
+    borderRadius: '4px',
+    color: 'var(--theme-elevation-1000)',
+    font: 'inherit'
+};
+export const SettingsRail = ({ basePath, translationSettings, openRouterSettings, locales, onSettingsChange })=>{
+    const [savingTs, setSavingTs] = useState(false);
+    const [savingOrs, setSavingOrs] = useState(false);
+    const [savedFlash, setSavedFlash] = useState(null);
+    const [saveError, setSaveError] = useState(null);
+    // Derive target locale codes from Payload's localization config —
+    // every locale OTHER than the default source locale. Replaces the
+    // prior hardcoded `TARGET_LOCALES = ['es', 'fr']`.
+    const targetLocales = locales.locales.filter((l)=>l.code !== locales.defaultLocale).map((l)=>l.code);
+    // Serialize all translation-settings writes through this queue so two
+    // rapid toggles can't race.
+    const tsQueueRef = useRef(Promise.resolve());
+    const tsSnapshotRef = useRef(translationSettings);
+    useEffect(()=>{
+        tsSnapshotRef.current = translationSettings;
+    }, [
+        translationSettings
+    ]);
+    useEffect(()=>{
+        if (!savedFlash) {
+            return;
+        }
+        const t = setTimeout(()=>setSavedFlash(null), 2000);
+        return ()=>clearTimeout(t);
+    }, [
+        savedFlash
+    ]);
+    async function patchGlobalRaw(slug, data) {
+        const res = await fetch(`${basePath}/api/globals/${slug}`, {
+            method: 'POST',
+            credentials: 'include',
+            headers: {
+                'content-type': 'application/json'
+            },
+            body: JSON.stringify(data)
+        });
+        if (!res.ok) {
+            const text = await res.text();
+            throw new Error(`HTTP ${res.status}: ${text.slice(0, 200)}`);
+        }
+        const json = await res.json();
+        return json.result ?? json.doc ?? json;
+    }
+    /**
+   * Send ONLY the changed fields, not the full settings snapshot.
+   * Prevents clobbering concurrent admin edits to fields the Hub never
+   * touched (e.g. `perCollection` in another tab).
+   *
+   * Optimistically updates `tsSnapshotRef` AT CALL TIME so rapid bursts
+   * of clicks each compute their `next` value against the most recent
+   * intended state rather than the slow-to-settle React state.
+   */ async function saveTranslationSettings(partial) {
+        setSaveError(null);
+        setSavingTs(true);
+        if (tsSnapshotRef.current) {
+            tsSnapshotRef.current = {
+                ...tsSnapshotRef.current,
+                ...partial
+            };
+        }
+        const previous = tsQueueRef.current;
+        const work = previous.catch(()=>undefined).then(async ()=>{
+            const updated = await patchGlobalRaw('translation-settings', partial);
+            onSettingsChange(updated, null);
+            setSavedFlash('Translation settings saved');
+        });
+        const tail = work.finally(()=>{
+            if (tsQueueRef.current === tail) {
+                setSavingTs(false);
+            }
+        });
+        tsQueueRef.current = tail;
+        try {
+            await work;
+        } catch (e) {
+            setSaveError(e instanceof Error ? e.message : String(e));
+        }
+    }
+    async function saveOpenRouterModel(model) {
+        setSaveError(null);
+        setSavingOrs(true);
+        try {
+            const updated = await patchGlobalRaw('openrouter-settings', {
+                model
+            });
+            onSettingsChange(null, updated);
+            setSavedFlash('Model saved');
+        } catch (e) {
+            setSaveError(e instanceof Error ? e.message : String(e));
+        } finally{
+            setSavingOrs(false);
+        }
+    }
+    const activeProvider = translationSettings?.activeProvider ?? '';
+    const enabledLocales = translationSettings?.enabledTargetLocales ?? [];
+    // Three plugin-wide kill switches (v1.2.8). Missing / null on older
+    // rows is treated as "enabled" (back-compat default — matches the
+    // server-side `!== false` semantics in `getGlobalKillSwitches`).
+    const autoEnabled = translationSettings?.globalAutoTranslateEnabled !== false;
+    const manualEnabled = translationSettings?.globalManualTranslateEnabled !== false;
+    const bulkEnabled = translationSettings?.globalBulkTranslateEnabled !== false;
+    const anyKillSwitchOff = !autoEnabled || !manualEnabled || !bulkEnabled;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            savedFlash && /*#__PURE__*/ _jsx("div", {
+                style: {
+                    padding: '0.5rem 0.75rem',
+                    background: 'var(--theme-success-100, #d1fae5)',
+                    border: '1px solid var(--theme-success-500, #16a34a)',
+                    borderRadius: '4px',
+                    color: 'var(--theme-success-500, #16a34a)',
+                    fontSize: '0.875rem'
+                },
+                children: savedFlash
+            }),
+            saveError && /*#__PURE__*/ _jsx("div", {
+                style: {
+                    padding: '0.5rem 0.75rem',
+                    background: 'var(--theme-error-100, #fee2e2)',
+                    border: '1px solid var(--theme-error-500, #b91c1c)',
+                    borderRadius: '4px',
+                    color: 'var(--theme-error-500, #b91c1c)',
+                    fontSize: '0.875rem'
+                },
+                children: saveError
+            }),
+            /*#__PURE__*/ _jsxs("section", {
+                "data-testid": "kill-switches-section",
+                style: {
+                    ...SECTION_STYLE,
+                    // When any switch is off, highlight the section in red so
+                    // admins immediately see "translation is intentionally
+                    // paused" rather than thinking the feature is broken.
+                    borderColor: anyKillSwitchOff ? 'var(--theme-error-500, #b91c1c)' : 'var(--theme-elevation-150)',
+                    borderWidth: anyKillSwitchOff ? '2px' : '1px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("span", {
+                        style: LABEL_STYLE,
+                        children: [
+                            "Kill switches",
+                            ' ',
+                            anyKillSwitchOff && /*#__PURE__*/ _jsx("span", {
+                                style: {
+                                    color: 'var(--theme-error-500, #b91c1c)',
+                                    fontWeight: 700
+                                },
+                                children: "· paused"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: '0.65rem'
+                        },
+                        children: [
+                            {
+                                key: 'globalAutoTranslateEnabled',
+                                checked: autoEnabled,
+                                label: 'Auto-translate (after-change hook)',
+                                hint: 'When off, saving a tracked doc does NOT fire auto-translate. Manual + Bulk unaffected.'
+                            },
+                            {
+                                key: 'globalManualTranslateEnabled',
+                                checked: manualEnabled,
+                                label: 'Manual Translate (dialog + per-field button)',
+                                hint: 'When off, the Translate dialog and per-field button hide in the admin UI and the endpoint returns 403. Auto + Bulk unaffected.'
+                            },
+                            {
+                                key: 'globalBulkTranslateEnabled',
+                                checked: bulkEnabled,
+                                label: 'Bulk Translate (new runs)',
+                                hint: 'When off, new bulk runs are rejected and the Bulk trigger renders as "paused". In-flight runs continue. Auto + Manual unaffected.'
+                            }
+                        ].map((row)=>/*#__PURE__*/ _jsxs("label", {
+                                style: {
+                                    display: 'flex',
+                                    gap: '0.55rem',
+                                    cursor: 'pointer',
+                                    alignItems: 'flex-start'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        checked: row.checked,
+                                        "data-testid": `kill-switch-${row.key}`,
+                                        disabled: savingTs || !translationSettings,
+                                        onChange: (e)=>{
+                                            saveTranslationSettings({
+                                                [row.key]: e.target.checked
+                                            });
+                                        },
+                                        style: {
+                                            marginTop: '0.2rem'
+                                        },
+                                        type: "checkbox"
+                                    }),
+                                    /*#__PURE__*/ _jsxs("span", {
+                                        style: {
+                                            fontSize: '0.875rem',
+                                            color: 'var(--theme-elevation-800)',
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: '0.15rem'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx("span", {
+                                                style: {
+                                                    fontWeight: 500
+                                                },
+                                                children: row.label
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                style: {
+                                                    fontSize: '0.75rem',
+                                                    color: 'var(--theme-elevation-500)'
+                                                },
+                                                children: row.hint
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, row.key))
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("section", {
+                style: SECTION_STYLE,
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        style: LABEL_STYLE,
+                        children: "Active Provider"
+                    }),
+                    /*#__PURE__*/ _jsxs("select", {
+                        disabled: savingTs || !translationSettings,
+                        onChange: (e)=>saveTranslationSettings({
+                                activeProvider: e.target.value || null
+                            }),
+                        style: SELECT_STYLE,
+                        value: activeProvider ?? '',
+                        children: [
+                            /*#__PURE__*/ _jsx("option", {
+                                value: "",
+                                children: "— use default —"
+                            }),
+                            /*#__PURE__*/ _jsx("option", {
+                                value: "anthropic-haiku",
+                                children: "anthropic-haiku"
+                            }),
+                            /*#__PURE__*/ _jsx("option", {
+                                value: "openai-mini",
+                                children: "openai-mini"
+                            }),
+                            /*#__PURE__*/ _jsx("option", {
+                                value: "openrouter",
+                                children: "openrouter"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        style: {
+                            margin: '0.5rem 0 0',
+                            fontSize: '0.75rem',
+                            color: 'var(--theme-elevation-500)'
+                        },
+                        children: "Where translation calls are routed. Changes take effect on the next translate call (no restart)."
+                    })
+                ]
+            }),
+            activeProvider === 'openrouter' && /*#__PURE__*/ _jsxs("section", {
+                style: SECTION_STYLE,
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        style: LABEL_STYLE,
+                        children: "OpenRouter Model"
+                    }),
+                    /*#__PURE__*/ _jsx(ModelCombobox, {
+                        basePath: basePath,
+                        disabled: savingOrs,
+                        onChange: saveOpenRouterModel,
+                        value: openRouterSettings?.model ?? ''
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("section", {
+                style: SECTION_STYLE,
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        style: LABEL_STYLE,
+                        children: "Auto-translate locales"
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: '0.4rem'
+                        },
+                        children: targetLocales.length === 0 ? /*#__PURE__*/ _jsx("p", {
+                            style: {
+                                margin: 0,
+                                fontSize: '0.875rem',
+                                color: 'var(--theme-elevation-500)'
+                            },
+                            children: "No target locales configured in the Payload localization config."
+                        }) : targetLocales.map((loc)=>{
+                            const isOn = enabledLocales.includes(loc);
+                            const localeLabel = locales.locales.find((l)=>l.code === loc)?.label ?? loc;
+                            return /*#__PURE__*/ _jsxs("label", {
+                                style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '0.5rem',
+                                    cursor: 'pointer',
+                                    fontSize: '0.875rem',
+                                    color: 'var(--theme-elevation-800)'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        checked: isOn,
+                                        disabled: savingTs || !translationSettings,
+                                        onChange: (e)=>{
+                                            const current = tsSnapshotRef.current?.enabledTargetLocales ?? enabledLocales;
+                                            const next = e.target.checked ? Array.from(new Set([
+                                                ...current,
+                                                loc
+                                            ])) : current.filter((l)=>l !== loc);
+                                            saveTranslationSettings({
+                                                enabledTargetLocales: next
+                                            });
+                                        },
+                                        type: "checkbox"
+                                    }),
+                                    localeLabel,
+                                    " (",
+                                    loc.toUpperCase(),
+                                    ")"
+                                ]
+                            }, loc);
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        style: {
+                            margin: '0.5rem 0 0',
+                            fontSize: '0.75rem',
+                            color: 'var(--theme-elevation-500)'
+                        },
+                        children: "Empty = all enabled (back-compat). Manual translate is never gated by this list."
+                    })
+                ]
+            })
+        ]
+    });
+};

package/dist/views/TranslationHub/StatusStrip.d.ts

@@ -0,0 +1,6 @@
+import type React from 'react';
+interface Props {
+    basePath: string;
+}
+export declare const StatusStrip: React.FC<Props>;
+export {};