@parhelia/localization 0.1.12902 → 0.1.12904

package/dist/steps/ServiceLanguageSelectionStep.js

@@ -1,39 +1,63 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { CountBadge } from "@parhelia/core";
-import { WizardStepShell } from "./WizardStepShell";
-/**
- * Language-only step. Item selection lives in its own step
- * (see ItemSelectionStep). The legacy name is kept so existing imports
- * keep working.
- */
-export function ServiceLanguageSelectionStep({ isActive = true, data, setData, onStepCompleted, editContext, }) {
+// Version creation now offered via VersionOnlyTranslationProvider. No custom button here.
+function getTranslationStatusBadgeClass(status) {
+    switch (status) {
+        case "Completed":
+            return "text-green-700 bg-green-100";
+        case "Error":
+            return "text-red-700 bg-red-100";
+        case "In Progress":
+            return "text-purple-800 bg-purple-100";
+        case "Not started":
+            return "text-[var(--color-gray-2)] bg-[var(--color-gray-4)]";
+        default:
+            return "text-[var(--color-gray-2)] bg-[var(--color-gray-4)]";
+    }
+}
+export function ServiceLanguageSelectionStep({ stepIndex, isActive = true, data, setData, onStepCompleted, editContext, setFooterActions, requestClose }) {
     const [languageSelection, setLanguageSelection] = useState({});
     const dataRef = useRef(data);
-    useEffect(() => {
-        dataRef.current = data;
-    }, [data]);
+    useEffect(() => { dataRef.current = data; }, [data]);
+    // Check if multi-item translation is enabled
+    const multiItemEnabled = editContext?.configuration?.localization?.multiItem !== false;
+    // Use ref to track onStepCompleted to avoid dependency issues
     const onStepCompletedRef = useRef(onStepCompleted);
     useEffect(() => {
         onStepCompletedRef.current = onStepCompleted;
     }, [onStepCompleted]);
+    // Track last completion state to prevent unnecessary calls
     const lastCompletionStateRef = useRef(null);
+    // Call completion check when component mounts or when returning to this step
+    // Also check when data changes (but only if we're actually the active step)
     useEffect(() => {
+        // Only update completion when this step is active
         if (!isActive)
             return;
-        const isCompleted = data.targetLanguages.length > 0;
+        const hasProvider = !!data.translationProvider;
+        const hasLanguages = data.targetLanguages.length > 0;
+        const isCompleted = hasProvider && hasLanguages;
+        // Only call if completion state actually changed
         if (lastCompletionStateRef.current !== isCompleted) {
             lastCompletionStateRef.current = isCompleted;
             onStepCompletedRef.current(isCompleted);
         }
-    }, [isActive, data.targetLanguages.length]);
+    }, [isActive, data.translationProvider, data.targetLanguages.length]);
+    // 1) Derive provider + available languages (lightweight, in-memory)
+    const provider = useMemo(() => data.translationProviders.find(p => p.name === data.translationProvider), [data.translationProviders, data.translationProvider]);
+    // Use editContext.itemLanguages (like TranslationSidebar) to get all languages including source language
+    // This is not item-specific - it shows all available languages for the site
     const editContextLanguages = useMemo(() => editContext?.itemLanguages || [], [editContext?.itemLanguages]);
+    // Get language codes from editContext languages, or fallback to languageData keys
     const siteLanguageCodes = useMemo(() => {
         if (editContextLanguages.length > 0) {
-            return editContextLanguages.map((lang) => lang.languageCode);
+            return editContextLanguages.map(lang => lang.languageCode);
         }
         return Array.from(data.languageData.keys());
     }, [editContextLanguages, data.languageData]);
+    const availableLanguageCodes = useMemo(() => (provider?.supportedLanguages?.length ? provider.supportedLanguages : siteLanguageCodes), [provider?.supportedLanguages, siteLanguageCodes]);
+    // Determine the source language from the items being translated
+    // Use the first item's language as the source language (all items should have the same source language)
     const itemSourceLanguage = useMemo(() => {
         return (data.items[0]?.descriptor.language ||
             editContext?.item?.descriptor.language ||
@@ -41,94 +65,177 @@ export function ServiceLanguageSelectionStep({ isActive = true, data, setData, o
             "en");
     }, [data.items, editContext?.item, editContext?.currentItemDescriptor]);
     const allLanguages = useMemo(() => {
-        const editContextLanguageMap = new Map(editContextLanguages.map((lang) => [lang.languageCode, lang]));
-        const arr = siteLanguageCodes
-            .map((code) => {
+        // Create a map of language codes to Language objects from editContext for quick lookup
+        const editContextLanguageMap = new Map(editContextLanguages.map(lang => [lang.languageCode, lang]));
+        const arr = availableLanguageCodes
+            .map(code => {
+            // Prefer language info from editContext (like TranslationSidebar), fallback to languageData
             const editContextLang = editContextLanguageMap.get(code);
             const languageDataLang = data.languageData.get(code);
-            const sourceLanguage = languageDataLang?.translationStatus?.sourceLanguage ||
-                itemSourceLanguage;
+            // Determine source language: prefer from translationStatus, fallback to item's source language
+            const sourceLanguage = languageDataLang?.translationStatus?.sourceLanguage || itemSourceLanguage;
             return {
                 code,
                 name: editContextLang?.name || languageDataLang?.name || code,
-                icon: editContextLang?.icon,
-                sourceLanguage,
+                hasVersions: (editContextLang?.versions || 0) > 0 || (languageDataLang?.items.length || 0) > 0,
+                translationStatus: languageDataLang?.translationStatus,
+                sourceLanguage, // Add source language to the language object
             };
         })
-            .filter((lang) => lang.sourceLanguage !== lang.code);
+            // Filter out languages where sourceLanguage equals targetLanguage
+            .filter(lang => lang.sourceLanguage !== lang.code);
         arr.sort((a, b) => a.name.localeCompare(b.name));
         return arr;
-    }, [
-        siteLanguageCodes,
-        editContextLanguages,
-        data.languageData,
-        itemSourceLanguage,
-    ]);
-    const lastProcessedTargetLanguagesRef = useRef("");
+    }, [availableLanguageCodes, editContextLanguages, data.languageData, itemSourceLanguage]);
+    // Track last processed targetLanguages to prevent unnecessary updates
+    const lastProcessedTargetLanguagesRef = useRef('');
+    // Rehydrate UI selection from saved wizard data when returning to this step
     useEffect(() => {
         if (!allLanguages || allLanguages.length === 0)
             return;
+        // Create a stable key from targetLanguages to detect actual changes
         const targetLanguagesKey = JSON.stringify([...data.targetLanguages].sort());
-        if (lastProcessedTargetLanguagesRef.current === targetLanguagesKey)
+        // Skip if we've already processed this exact set of target languages
+        if (lastProcessedTargetLanguagesRef.current === targetLanguagesKey) {
             return;
+        }
         lastProcessedTargetLanguagesRef.current = targetLanguagesKey;
         const initialSelection = {};
+        // Mark as selected any language that's in our saved targetLanguages array
         for (const langCode of data.targetLanguages) {
-            const lang = allLanguages.find((l) => l.code === langCode);
-            if (lang)
+            const lang = allLanguages.find(l => l.code === langCode);
+            if (lang) {
                 initialSelection[langCode] = true;
+            }
         }
         setLanguageSelection(initialSelection);
     }, [allLanguages, data.targetLanguages]);
-    const lastSetTargetLanguagesRef = useRef("");
+    // Track last set targetLanguages to prevent unnecessary setData calls
+    const lastSetTargetLanguagesRef = useRef('');
+    // Update wizard data when language selection changes
     useEffect(() => {
         const selectedLanguages = Object.entries(languageSelection)
             .filter(([, isSelected]) => isSelected)
             .map(([code]) => code);
         const selectedLanguagesKey = JSON.stringify([...selectedLanguages].sort());
         const currentTargetLanguagesKey = JSON.stringify([...data.targetLanguages].sort());
-        if (selectedLanguagesKey === currentTargetLanguagesKey)
+        // Only update if the selection has actually changed AND we haven't already set this value
+        if (selectedLanguagesKey === currentTargetLanguagesKey) {
+            // Selection matches current data, no update needed
             return;
-        if (lastSetTargetLanguagesRef.current === selectedLanguagesKey)
+        }
+        if (lastSetTargetLanguagesRef.current === selectedLanguagesKey) {
+            // We've already set this value, skip to prevent loops
             return;
+        }
         lastSetTargetLanguagesRef.current = selectedLanguagesKey;
         const newData = {
             ...dataRef.current,
-            targetLanguages: selectedLanguages,
+            targetLanguages: selectedLanguages
         };
         setData(newData);
+        // Completion will be updated by the useEffect that watches data.targetLanguages.length
     }, [languageSelection, setData, data.targetLanguages]);
+    const handleProviderChange = (e) => {
+        const newProvider = e.target.value;
+        // Always create a new Map instance to ensure React detects the change
+        const newServiceCustomData = new Map();
+        if (data.serviceCustomData) {
+            data.serviceCustomData.forEach((value, key) => {
+                // Only preserve custom data if not switching away from OpenAI
+                if (key !== "OpenAI" || newProvider === "OpenAI") {
+                    newServiceCustomData.set(key, value);
+                }
+            });
+        }
+        const newData = {
+            ...data,
+            translationProvider: newProvider,
+            serviceCustomData: newServiceCustomData,
+            // Clear target languages when provider changes since language availability might change
+            targetLanguages: []
+        };
+        setData(newData);
+        // Clear UI selection too
+        setLanguageSelection({});
+        // Completion will be updated by the useEffect that watches data.translationProvider
+    };
     const handleLanguageToggle = (langCode) => {
-        setLanguageSelection((prev) => ({ ...prev, [langCode]: !prev[langCode] }));
+        setLanguageSelection(prev => ({ ...prev, [langCode]: !prev[langCode] }));
+    };
+    const handleSubitemsToggle = () => {
+        const newData = {
+            ...data,
+            includeSubitems: !data.includeSubitems
+        };
+        setData(newData);
     };
     const handleSelectAllLanguages = () => {
-        const allSelected = allLanguages.every((lang) => languageSelection[lang.code]);
+        const allSelected = allLanguages.every(lang => languageSelection[lang.code]);
         const newSelection = {};
-        allLanguages.forEach((lang) => {
-            newSelection[lang.code] = !allSelected;
-        });
+        if (allSelected) {
+            // Deselect all
+            allLanguages.forEach(lang => {
+                newSelection[lang.code] = false;
+            });
+        }
+        else {
+            // Select all
+            allLanguages.forEach(lang => {
+                newSelection[lang.code] = true;
+            });
+        }
         setLanguageSelection(newSelection);
     };
     const areAllLanguagesSelected = useMemo(() => {
         if (allLanguages.length === 0)
             return false;
-        return allLanguages.every((lang) => languageSelection[lang.code]);
+        return allLanguages.every(lang => languageSelection[lang.code]);
     }, [allLanguages, languageSelection]);
     const areSomeLanguagesSelected = useMemo(() => {
-        return allLanguages.some((lang) => languageSelection[lang.code]);
+        return allLanguages.some(lang => languageSelection[lang.code]);
     }, [allLanguages, languageSelection]);
-    const selectedCount = data.targetLanguages.length;
-    return (_jsx(WizardStepShell, { fillHeight: true, testId: "language-selection-step", children: _jsxs("div", { className: "mx-auto flex min-h-0 w-full max-w-3xl flex-1 flex-col overflow-hidden rounded-xl border border-border-default bg-white", children: [_jsxs("div", { className: "flex h-[37px] shrink-0 items-center justify-between gap-2 border-b border-border-default bg-neutral-grey-5/50 px-3", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-xs font-medium tracking-wider text-neutral-grey-50 ", children: "Target Languages" }), selectedCount > 0 && (_jsx(CountBadge, { children: selectedCount }))] }), allLanguages.length > 1 && (_jsxs("label", { className: "flex cursor-pointer items-center gap-1.5 text-[11px] font-medium text-neutral-grey-50 transition-colors hover:text-neutral-grey-100", children: [_jsx("input", { type: "checkbox", checked: areAllLanguagesSelected, ref: (input) => {
-                                        if (input) {
-                                            input.indeterminate =
-                                                areSomeLanguagesSelected && !areAllLanguagesSelected;
+    // Compute checkbox state for prompt customization
+    const isPromptCustomizationEnabled = useMemo(() => {
+        if (data.translationProvider !== "OpenAI") {
+            return false;
+        }
+        const serviceData = data.serviceCustomData?.get("OpenAI");
+        return serviceData?.enableCustomPrompt === true;
+    }, [data.translationProvider, data.serviceCustomData]);
+    return (_jsx("div", { className: "p-6 space-y-6 h-full flex flex-col", "data-testid": "service-language-selection-step", children: _jsxs("div", { className: "space-y-6 flex-1", children: [_jsxs("div", { className: "bg-background rounded-lg border border-[var(--color-gray-3)] p-4", children: [_jsx("h3", { className: "text-sm font-medium text-[var(--color-dark)] mb-2", children: "Translation Provider" }), _jsx("p", { className: "text-xs text-[var(--color-gray-2)] mb-3", children: "Choose how to translate your content. \"Create Versions\" will create new language versions without automatic translation." }), _jsxs("select", { value: data.translationProvider || "", onChange: handleProviderChange, className: "block w-full px-3 py-2 border border-[var(--color-gray-3)] rounded-md bg-[var(--color-gray-5)] text-[var(--color-dark)] text-sm focus:outline-none focus:ring-2 focus:ring-[#9650fb] focus:border-[#9650fb] transition-colors", "data-testid": "translation-provider-select", children: [_jsx("option", { value: "", disabled: true, children: "Select a provider..." }), data.translationProviders.map((provider) => (_jsx("option", { value: provider.name, children: provider.displayName || provider.name }, provider.name)))] })] }), multiItemEnabled && (_jsxs("div", { className: "bg-background rounded-lg border border-[var(--color-gray-3)] p-4", children: [_jsxs("label", { className: "flex items-center cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: data.includeSubitems, onChange: handleSubitemsToggle, className: "h-4 w-4 text-[#9650fb] focus:ring-[#9650fb] border-[var(--color-gray-3)] rounded accent-[#9650fb]", "data-testid": "include-subitems-checkbox" }), _jsx("span", { className: "ml-2 text-sm text-[var(--color-dark)] font-medium", children: "Include subitems" })] }), _jsx("p", { className: "text-xs text-[var(--color-gray-2)] mt-1.5 ml-6", children: "Also translate any child components and nested content within this item." })] })), data.translationProvider === "OpenAI" && (_jsxs("div", { className: "bg-background rounded-lg border border-[var(--color-gray-3)] p-4", children: [_jsxs("label", { className: "flex items-center cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: isPromptCustomizationEnabled, onChange: (e) => {
+                                        const isChecked = e.target.checked;
+                                        // Always create a new Map instance to ensure React detects the change
+                                        const newServiceCustomData = new Map();
+                                        if (data.serviceCustomData) {
+                                            data.serviceCustomData.forEach((value, key) => {
+                                                newServiceCustomData.set(key, value);
+                                            });
+                                        }
+                                        if (isChecked) {
+                                            newServiceCustomData.set("OpenAI", {
+                                                enableCustomPrompt: true,
+                                                customPrompt: "",
+                                                promptCustomizationType: "extend",
+                                            });
+                                        }
+                                        else {
+                                            // Remove the service data when unchecked
+                                            newServiceCustomData.delete("OpenAI");
                                         }
-                                    }, onChange: handleSelectAllLanguages, className: "h-3 w-3 rounded border-border-default text-[var(--color-highlight-100)] accent-[var(--color-highlight-100)] focus:ring-[var(--color-highlight-100)]", "data-testid": "select-all-languages-checkbox" }), "Select all"] }))] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-2", children: allLanguages.length === 0 ? (_jsx("div", { className: "grid gap-2 p-1 sm:grid-cols-2", children: [...Array(6)].map((_, i) => (_jsxs("div", { className: "flex animate-pulse items-center gap-2 rounded-lg border border-border-default px-3 py-2", children: [_jsx("div", { className: "h-3.5 w-3.5 rounded bg-neutral-grey-10" }), _jsx("div", { className: "h-4 w-4 rounded-sm bg-neutral-grey-10" }), _jsx("div", { className: "h-3.5 w-24 rounded bg-neutral-grey-10" }), _jsx("div", { className: "ml-auto h-3 w-10 rounded bg-neutral-grey-5" })] }, i))) })) : (_jsx("div", { className: "grid gap-1.5 sm:grid-cols-2", children: allLanguages.map((lang) => {
-                            const checked = !!languageSelection[lang.code];
-                            return (_jsxs("label", { className: `group flex cursor-pointer items-center gap-2.5 rounded-lg border px-2 py-1.5 transition-all ${checked
-                                    ? "border-primary/30 bg-primary/5 ring-primary/10 ring-1"
-                                    : "border-border-default hover:border-border-default hover:bg-neutral-grey-5"}`, children: [_jsx("input", { type: "checkbox", checked: checked, onChange: () => handleLanguageToggle(lang.code), className: "h-3.5 w-3.5 shrink-0 rounded border-border-default text-[var(--color-highlight-100)] accent-[var(--color-highlight-100)] focus:ring-[var(--color-highlight-100)]", "data-testid": `language-checkbox-${lang.code}` }), lang.icon ? (_jsx("img", { src: lang.icon, alt: "", "aria-hidden": "true", className: "h-4 w-5 shrink-0 rounded-sm object-cover" })) : (_jsx("span", { className: "inline-block h-4 w-5 shrink-0 rounded-sm bg-neutral-grey-5" })), _jsx("span", { className: `min-w-0 flex-1 truncate text-[13px] ${checked
-                                            ? "font-medium text-neutral-grey-100"
-                                            : "text-neutral-grey-100"}`, children: lang.name }), _jsx("span", { className: "shrink-0 font-mono text-[10px] tracking-wider text-neutral-grey-50 ", children: lang.code })] }, lang.code));
-                        }) })) })] }) }));
+                                        const newData = {
+                                            ...data,
+                                            serviceCustomData: newServiceCustomData
+                                        };
+                                        setData(newData);
+                                    }, className: "h-4 w-4 text-[#9650fb] focus:ring-[#9650fb] border-[var(--color-gray-3)] rounded accent-[#9650fb]", "data-testid": "enable-custom-prompt-checkbox" }), _jsx("span", { className: "ml-2 text-sm text-[var(--color-dark)] font-medium", children: "Customize translation prompt" })] }), _jsx("p", { className: "text-xs text-[var(--color-gray-2)] mt-1.5 ml-6", children: "Enable advanced prompt customization for the translation service." })] })), _jsxs("div", { className: "bg-background rounded-lg border border-[var(--color-gray-3)] p-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("h3", { className: "text-sm font-medium text-[var(--color-dark)]", children: "Target Languages" }), allLanguages.length > 1 && (_jsxs("label", { className: "flex items-center cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: areAllLanguagesSelected, ref: (input) => {
+                                                if (input) {
+                                                    input.indeterminate = areSomeLanguagesSelected && !areAllLanguagesSelected;
+                                                }
+                                            }, onChange: handleSelectAllLanguages, className: "h-4 w-4 text-[#9650fb] focus:ring-[#9650fb] border-[var(--color-gray-3)] rounded accent-[#9650fb]", "data-testid": "select-all-languages-checkbox" }), _jsx("span", { className: "ml-2 text-xs text-[var(--color-gray-2)]", children: "Select All" })] }))] }), _jsx("p", { className: "text-xs text-[var(--color-gray-2)] mb-3", children: "Select the languages you want to translate this content into." }), _jsx("div", { className: "border border-[var(--color-gray-3)] rounded-lg min-h-[200px] max-h-64 overflow-y-auto bg-[var(--color-gray-5)]", children: data.translationProviders.length === 0 || allLanguages.length === 0 ? (
+                            // Loading skeleton
+                            _jsx("div", { className: "p-3 space-y-2", children: [...Array(4)].map((_, i) => (_jsxs("div", { className: "flex items-center animate-pulse", children: [_jsx("div", { className: "h-4 w-4 bg-[var(--color-gray-3)] rounded" }), _jsx("div", { className: "ml-2 h-4 bg-[var(--color-gray-3)] rounded w-32" }), _jsx("div", { className: "ml-auto h-4 bg-[var(--color-gray-3)] rounded w-16" })] }, i))) })) : (_jsx("div", { className: "p-3 grid grid-cols-1 gap-2", children: allLanguages.map((lang) => {
+                                    const statusLabel = lang.translationStatus?.status || "Not started";
+                                    return (_jsxs("label", { className: "flex items-start gap-2 py-1.5 px-2 rounded-md hover:bg-[var(--color-gray-4)] transition-colors cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: languageSelection[lang.code] || false, onChange: () => handleLanguageToggle(lang.code), className: "mt-0.5 h-4 w-4 shrink-0 text-[#9650fb] focus:ring-[#9650fb] border-[var(--color-gray-3)] rounded accent-[#9650fb]", "data-testid": `language-checkbox-${lang.code}` }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "text-sm text-[var(--color-dark)]", children: [lang.name, " (", lang.code, ")"] }), _jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-[var(--color-gray-2)]", children: [lang.sourceLanguage && _jsxs("span", { children: ["from: ", lang.sourceLanguage] }), !lang.hasVersions && (_jsx("span", { className: "text-2xs text-orange-600 bg-orange-100 px-2 py-1 rounded-full font-medium", children: "No versions" })), lang.hasVersions && (_jsx("span", { title: lang.translationStatus?.message, className: `text-2xs px-2 py-1 rounded-full font-medium ${getTranslationStatusBadgeClass(statusLabel)}`, "data-testid": `translation-status-badge-${lang.code}`, children: statusLabel }))] })] })] }, lang.code));
+                                }) })) })] })] }) }));
 }

package/dist/steps/SubitemDiscoveryStep.d.ts

@@ -0,0 +1,3 @@
+import { TranslationStepProps } from "./types";
+export declare function SubitemDiscoveryStep({ stepIndex, isActive, data, setData, editContext, onStepCompleted, setBeforeNextCallback, setFooterActions, requestClose }: TranslationStepProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SubitemDiscoveryStep.d.ts.map

package/dist/steps/SubitemDiscoveryStep.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubitemDiscoveryStep.d.ts","sourceRoot":"","sources":["../../src/steps/SubitemDiscoveryStep.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAW/C,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,QAAe,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,YAAY,EAAE,EAAE,oBAAoB,2CAga5L"}