@parhelia/localization 0.1.12789 → 0.1.12790

package/dist/steps/PromptCustomizationStep.js

@@ -1,15 +1,77 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useMemo, useRef, useCallback } from "react";
-export function PromptCustomizationStep({ stepIndex, isActive = true, data, setData, onStepCompleted, editContext, }) {
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Input, Select, Textarea } from "@parhelia/core";
+import { WizardStepShell } from "./WizardStepShell";
+import { suggestBatchName } from "../api/discovery";
+export function PromptCustomizationStep({ isActive = true, data, setData, onStepCompleted, editContext, }) {
     const [customPrompt, setCustomPrompt] = useState("");
     const [customizationType, setCustomizationType] = useState("extend");
-    // Use refs to track current values without triggering re-renders
+    // Local mirror of the wizard's batch name so typing is responsive.
+    const [batchName, setBatchName] = useState(data.batchName ?? "");
+    const [isSuggesting, setIsSuggesting] = useState(false);
+    // Whether the user has manually edited the name. If so, we never overwrite
+    // it with a fresh AI suggestion.
+    const userTouchedNameRef = useRef(!!data.batchName);
+    const dataRef = useRef(data);
+    useEffect(() => {
+        dataRef.current = data;
+    }, [data]);
+    // Push name changes back into wizard data (debounced via simple equality).
+    useEffect(() => {
+        if ((dataRef.current.batchName ?? "") === batchName)
+            return;
+        setData({ ...dataRef.current, batchName });
+    }, [batchName, setData]);
+    // Auto-suggest a name when the step becomes active and the user hasn't
+    // already provided/edited one. Fires once per item+language combination so
+    // navigating away and back doesn't re-fetch.
+    const lastSuggestionKeyRef = useRef("");
+    const sessionId = editContext?.sessionId;
+    useEffect(() => {
+        if (!isActive)
+            return;
+        if (userTouchedNameRef.current)
+            return;
+        const itemIds = (data.selectionTreeItems && data.selectionTreeItems.length > 0
+            ? data.selectionTreeItems.map((s) => s.descriptor.id)
+            : data.items.map((i) => i.descriptor.id)).filter(Boolean);
+        const langs = [...data.targetLanguages].sort();
+        if (itemIds.length === 0 || langs.length === 0)
+            return;
+        const key = JSON.stringify({ itemIds: [...itemIds].sort(), langs });
+        if (lastSuggestionKeyRef.current === key)
+            return;
+        lastSuggestionKeyRef.current = key;
+        let cancelled = false;
+        setIsSuggesting(true);
+        void (async () => {
+            try {
+                const includeSubitems = !!(data.selectionTreeItems?.some((s) => s.includeSubitems));
+                const name = await suggestBatchName({ itemIds, targetLanguages: langs, includeSubitems }, sessionId);
+                if (cancelled || userTouchedNameRef.current)
+                    return;
+                if (name)
+                    setBatchName(name);
+            }
+            finally {
+                if (!cancelled)
+                    setIsSuggesting(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        isActive,
+        sessionId,
+        data.selectionTreeItems,
+        data.items,
+        data.targetLanguages,
+    ]);
     const customPromptRef = useRef(customPrompt);
     const customizationTypeRef = useRef(customizationType);
-    // Track if we've initialized from parent data to prevent re-initialization during typing
     const hasInitializedRef = useRef(false);
     const lastProviderRef = useRef(data.translationProvider);
-    // Debounce timer ref for parent updates
     const updateTimerRef = useRef(null);
     useEffect(() => {
         customPromptRef.current = customPrompt;
@@ -17,36 +79,32 @@ export function PromptCustomizationStep({ stepIndex, isActive = true, data, setD
     useEffect(() => {
         customizationTypeRef.current = customizationType;
     }, [customizationType]);
-    // Get service-specific custom data for the selected provider
+    const selectedProvider = useMemo(() => data.translationProviders.find((p) => p.name === data.translationProvider), [data.translationProviders, data.translationProvider]);
     const serviceData = useMemo(() => {
         if (!data.serviceCustomData || !data.translationProvider)
             return null;
         return data.serviceCustomData.get(data.translationProvider);
     }, [data.serviceCustomData, data.translationProvider]);
     const enableCustomPrompt = serviceData?.enableCustomPrompt === true;
-    // Get default prompt from provider settings (no fallback)
+    const supportsPromptCustomization = data.translationProvider === "OpenAI";
     const defaultPrompt = useMemo(() => {
-        const provider = data.translationProviders.find(p => p.name === data.translationProvider);
-        const prompt = provider?.defaultPrompt;
-        // Return null if prompt is null, undefined, or empty string
+        const prompt = selectedProvider?.defaultPrompt;
         return prompt && prompt.trim() ? prompt : null;
-    }, [data.translationProviders, data.translationProvider]);
-    const hasDefaultPrompt = defaultPrompt != null && defaultPrompt.trim().length > 0;
-    // Initialize from existing data - only on mount or provider change
+    }, [selectedProvider?.defaultPrompt]);
+    const hasDefaultPrompt = defaultPrompt != null && defaultPrompt.length > 0;
     useEffect(() => {
-        // Reset initialization when provider changes
         if (lastProviderRef.current !== data.translationProvider) {
             hasInitializedRef.current = false;
             lastProviderRef.current = data.translationProvider;
         }
-        // Skip if already initialized (prevents re-init during typing)
-        if (hasInitializedRef.current) {
+        if (hasInitializedRef.current)
             return;
-        }
-        const nextCustomizationType = serviceData?.promptCustomizationType || "extend";
+        const nextCustomizationType = serviceData?.promptCustomizationType ||
+            "extend";
         let nextCustomPrompt = serviceData?.customPrompt || "";
-        // If stored prompt already includes default (legacy), strip it for editing
-        if (hasDefaultPrompt && nextCustomizationType === "extend" && nextCustomPrompt.startsWith(defaultPrompt || "")) {
+        if (hasDefaultPrompt &&
+            nextCustomizationType === "extend" &&
+            nextCustomPrompt.startsWith(defaultPrompt || "")) {
             nextCustomPrompt = nextCustomPrompt.slice((defaultPrompt || "").length);
             nextCustomPrompt = nextCustomPrompt.replace(/^\s*\n\s*\n?/, "");
         }
@@ -60,29 +118,70 @@ export function PromptCustomizationStep({ stepIndex, isActive = true, data, setD
         }
         hasInitializedRef.current = true;
     }, [
+        data.translationProvider,
+        defaultPrompt,
         enableCustomPrompt,
-        serviceData,
         hasDefaultPrompt,
-        defaultPrompt,
-        data.translationProvider,
+        serviceData,
     ]);
-    // Preview of final prompt
+    useEffect(() => {
+        if (!isActive)
+            return;
+        onStepCompleted(!!data.translationProvider);
+    }, [data.translationProvider, isActive, onStepCompleted]);
+    const handleProviderChange = (e) => {
+        const newProvider = e.target.value;
+        const newServiceCustomData = new Map();
+        data.serviceCustomData?.forEach((value, key) => {
+            if (key !== "OpenAI" || newProvider === "OpenAI") {
+                newServiceCustomData.set(key, value);
+            }
+        });
+        const newData = {
+            ...data,
+            translationProvider: newProvider,
+            serviceCustomData: newServiceCustomData,
+        };
+        setData(newData);
+    };
+    const handleCustomPromptToggle = (enabled) => {
+        const newServiceCustomData = new Map(data.serviceCustomData || new Map());
+        if (enabled) {
+            newServiceCustomData.set(data.translationProvider, {
+                enableCustomPrompt: true,
+                customPrompt: "",
+                promptCustomizationType: "extend",
+            });
+        }
+        else {
+            newServiceCustomData.delete(data.translationProvider);
+        }
+        setData({
+            ...data,
+            serviceCustomData: newServiceCustomData,
+        });
+    };
     const previewPrompt = useMemo(() => {
         if (!enableCustomPrompt || !customPrompt.trim()) {
             return defaultPrompt || "";
         }
-        // If no default prompt, just show custom prompt
         if (!hasDefaultPrompt) {
             return customPrompt;
         }
-        // If default prompt exists, show based on customization type
         if (customizationType === "replace") {
             return customPrompt;
         }
         return `${defaultPrompt}\n\n${customPrompt}`;
-    }, [enableCustomPrompt, customPrompt, customizationType, defaultPrompt, hasDefaultPrompt]);
-    // Debounced update to parent - prevents rapid state updates during typing
+    }, [
+        customPrompt,
+        customizationType,
+        defaultPrompt,
+        enableCustomPrompt,
+        hasDefaultPrompt,
+    ]);
     const updateParentData = useCallback(() => {
+        if (!data.translationProvider)
+            return;
         const trimmedCustomPrompt = customPromptRef.current.trim();
         const currentCustomizationType = customizationTypeRef.current;
         const newServiceCustomData = new Map(data.serviceCustomData || new Map());
@@ -95,33 +194,28 @@ export function PromptCustomizationStep({ stepIndex, isActive = true, data, setD
             };
             const isSame = currentServiceData?.enableCustomPrompt === true &&
                 (currentServiceData.customPrompt || "") === trimmedCustomPrompt &&
-                (currentServiceData.promptCustomizationType || "extend") === currentCustomizationType;
-            if (isSame) {
+                (currentServiceData.promptCustomizationType || "extend") ===
+                    currentCustomizationType;
+            if (isSame)
                 return;
-            }
             newServiceCustomData.set(data.translationProvider, nextServiceData);
         }
         else {
-            if (!currentServiceData) {
+            if (!currentServiceData)
                 return;
-            }
             newServiceCustomData.delete(data.translationProvider);
         }
-        const newData = {
+        setData({
             ...data,
             serviceCustomData: newServiceCustomData,
-        };
-        setData(newData);
-    }, [enableCustomPrompt, data, setData]);
-    // Update wizard data when settings change - debounced to prevent rapid fire
+        });
+    }, [data, enableCustomPrompt, setData]);
     useEffect(() => {
-        if (!isActive)
+        if (!isActive || !supportsPromptCustomization)
             return;
-        // Clear any pending update
         if (updateTimerRef.current) {
             clearTimeout(updateTimerRef.current);
         }
-        // Debounce the update to parent (100ms delay)
         updateTimerRef.current = setTimeout(() => {
             updateParentData();
         }, 100);
@@ -131,24 +225,35 @@ export function PromptCustomizationStep({ stepIndex, isActive = true, data, setD
             }
         };
     }, [
-        enableCustomPrompt,
         customPrompt,
         customizationType,
         isActive,
+        supportsPromptCustomization,
         updateParentData,
     ]);
-    // Update completion status
-    useEffect(() => {
-        if (!isActive)
-            return;
-        // Step is always complete (it's optional)
-        onStepCompleted(true);
-    }, [isActive, onStepCompleted]);
-    // Skip condition: hide step when checkbox is disabled
-    // This is handled by skipCondition in wizard config
-    return (_jsxs("div", { className: "p-6 space-y-6 h-full flex flex-col", "data-testid": "prompt-customization-step", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-xl font-semibold text-[var(--color-dark)] mb-2", children: "Customize Translation Prompt" }), _jsxs("p", { className: "text-sm text-[var(--color-gray-2)] mb-6", children: ["Optionally customize the prompt used for translation. This allows you to provide specific instructions or context for the translation service.", _jsx("br", {}), _jsx("span", { className: "text-xs text-[var(--color-gray-2)] mt-1 block", children: "Note: Your custom prompt will be appended to the system instructions that ensure proper translation structure." })] })] }), _jsxs("div", { className: "space-y-6 flex-1", children: [!enableCustomPrompt && (_jsx("div", { className: "border border-[var(--color-gray-3)] rounded-lg p-4 bg-[var(--color-gray-5)]", children: _jsx("p", { className: "text-sm text-[var(--color-gray-2)]", children: "Enable \"Customize translation prompt\" in the previous step to customize the prompt." }) })), enableCustomPrompt && (_jsxs(_Fragment, { children: [hasDefaultPrompt && (_jsxs(_Fragment, { 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: "Default Prompt" }), _jsx("div", { className: "border border-[var(--color-gray-3)] rounded-md p-3 bg-[var(--color-gray-5)]", children: _jsx("pre", { className: "text-xs text-[var(--color-gray-1)] whitespace-pre-wrap font-mono", children: defaultPrompt }) })] }), _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-3", children: "Customization Type" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("label", { className: "flex items-center cursor-pointer py-1.5 px-2 rounded-md hover:bg-[var(--color-gray-5)] transition-colors", children: [_jsx("input", { type: "radio", name: "customizationType", value: "extend", checked: customizationType === "extend", onChange: () => setCustomizationType("extend"), className: "h-4 w-4 text-[#9650fb] focus:ring-[#9650fb] border-[var(--color-gray-3)] accent-[#9650fb]", "data-testid": "customization-type-extend" }), _jsx("span", { className: "ml-2 text-sm text-[var(--color-dark)]", children: "Extend (append to default)" })] }), _jsxs("label", { className: "flex items-center cursor-pointer py-1.5 px-2 rounded-md hover:bg-[var(--color-gray-5)] transition-colors", children: [_jsx("input", { type: "radio", name: "customizationType", value: "replace", checked: customizationType === "replace", onChange: () => setCustomizationType("replace"), className: "h-4 w-4 text-[#9650fb] focus:ring-[#9650fb] border-[var(--color-gray-3)] accent-[#9650fb]", "data-testid": "customization-type-replace" }), _jsx("span", { className: "ml-2 text-sm text-[var(--color-dark)]", children: "Replace (use custom prompt only)" })] })] })] })] })), _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: "Custom Prompt" }), _jsx("textarea", { value: customPrompt, onChange: (e) => setCustomPrompt(e.target.value), className: "w-full px-3 py-2.5 border border-[var(--color-gray-3)] rounded-md bg-[var(--color-gray-5)] text-[var(--color-dark)] focus:outline-none focus:ring-2 focus:ring-[#9650fb] focus:border-[#9650fb] text-sm font-mono transition-colors", rows: 6, placeholder: "Enter your custom prompt instructions here...", "data-testid": "custom-prompt-textarea" }), _jsx("p", { className: "text-xs text-[var(--color-gray-2)] mt-2", children: hasDefaultPrompt
-                                            ? customizationType === "extend"
-                                                ? "This will be appended to the default prompt. The final prompt (default + custom) will then be appended to the system instructions on the backend."
-                                                : "This will replace the default prompt. The custom prompt will then be appended to the system instructions on the backend."
-                                            : "Your custom prompt will be appended to the system instructions on the backend." })] }), hasDefaultPrompt && _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: "Preview" }), _jsx("div", { className: "border border-[var(--color-gray-3)] rounded-md p-3 bg-[var(--color-gray-5)] max-h-64 overflow-y-auto", children: _jsx("pre", { className: "text-xs text-[var(--color-gray-1)] whitespace-pre-wrap font-mono", children: previewPrompt }) }), _jsx("p", { className: "text-xs text-[var(--color-gray-2)] mt-2", children: "This is how the final prompt will look when sent to the translation service." })] })] }))] })] }));
+    return (_jsx(WizardStepShell, { fillHeight: true, testId: "prompt-customization-step", children: _jsxs("div", { className: "mx-auto flex min-h-0 w-full max-w-3xl flex-1 flex-col gap-6 overflow-y-auto", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-baseline justify-between", children: [_jsx("label", { htmlFor: "translation-batch-name", className: "text-[11px] font-bold tracking-wider text-gray-500 uppercase", children: "Name" }), isSuggesting && (_jsx("span", { className: "text-muted-foreground text-[10px]", children: "Suggesting\u2026" }))] }), _jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: "A short label for this translation batch." }), _jsx(Input, { id: "translation-batch-name", type: "text", value: batchName, placeholder: isSuggesting ? "Generating a name…" : "Translation batch", onChange: (e) => {
+                                userTouchedNameRef.current = true;
+                                setBatchName(e.target.value);
+                            }, className: "mt-2", "data-testid": "translation-batch-name-input" })] }), _jsxs("div", { children: [_jsx("label", { className: "text-[11px] font-bold tracking-wider text-gray-500 uppercase", children: "Translation provider" }), _jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: "\"Create Versions\" will create new language versions without automatic translation." }), _jsx(Select, { value: data.translationProvider || "", onValueChange: (value) => handleProviderChange({
+                                target: { value },
+                            }), options: data.translationProviders.map((provider) => ({
+                                value: provider.name,
+                                label: provider.displayName || provider.name,
+                            })), placeholder: "Select a provider\u2026", size: "sm", className: "mt-2 w-full", "data-testid": "translation-provider-select" })] }), supportsPromptCustomization && (_jsxs(_Fragment, { children: [_jsxs("label", { className: "-mb-2 flex cursor-pointer items-start gap-2.5", children: [_jsx("input", { type: "checkbox", checked: enableCustomPrompt, onChange: (e) => handleCustomPromptToggle(e.target.checked), className: "mt-0.5 h-3.5 w-3.5 rounded border-gray-300 text-[#9650fb] accent-[#9650fb] focus:ring-[#9650fb]", "data-testid": "enable-custom-prompt-checkbox" }), _jsxs("div", { className: "min-w-0", children: [_jsx("span", { className: "block text-[13px] font-semibold text-gray-900", children: "Customize translation prompt" }), _jsx("span", { className: "text-muted-foreground mt-0.5 block text-xs", children: "Override or extend the provider's default instructions." })] })] }), enableCustomPrompt && (_jsxs(_Fragment, { children: [hasDefaultPrompt && (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("span", { className: "text-[11px] font-bold tracking-wider text-gray-500 uppercase", children: "Default prompt" }), _jsx("pre", { className: "mt-2 max-h-40 overflow-y-auto rounded-md bg-gray-50/70 p-3 font-mono text-xs leading-relaxed whitespace-pre-wrap text-gray-700", children: defaultPrompt })] }), _jsxs("div", { children: [_jsx("span", { className: "text-[11px] font-bold tracking-wider text-gray-500 uppercase", children: "Customization type" }), _jsx("div", { className: "mt-2 grid gap-2 sm:grid-cols-2", children: [
+                                                        {
+                                                            value: "extend",
+                                                            title: "Extend",
+                                                            hint: "Append to the default prompt.",
+                                                        },
+                                                        {
+                                                            value: "replace",
+                                                            title: "Replace",
+                                                            hint: "Use the custom prompt only.",
+                                                        },
+                                                    ].map((opt) => {
+                                                        const selected = customizationType === opt.value;
+                                                        return (_jsxs("label", { className: `group flex cursor-pointer items-start gap-2.5 rounded-lg p-2.5 transition-colors ${selected
+                                                                ? "bg-primary/5"
+                                                                : "hover:bg-gray-50"}`, children: [_jsx("input", { type: "radio", name: "customizationType", value: opt.value, checked: selected, onChange: () => setCustomizationType(opt.value), className: "mt-0.5 h-3.5 w-3.5 border-gray-300 text-[#9650fb] accent-[#9650fb] focus:ring-[#9650fb]", "data-testid": `customization-type-${opt.value}` }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-semibold text-gray-900", children: opt.title }), _jsx("div", { className: "text-muted-foreground mt-0.5 text-[11px]", children: opt.hint })] })] }, opt.value));
+                                                    }) })] })] })), _jsxs("div", { children: [_jsx("span", { className: "text-[11px] font-bold tracking-wider text-gray-500 uppercase", children: "Custom prompt" }), _jsx(Textarea, { value: customPrompt, onChange: (e) => setCustomPrompt(e.target.value), className: "mt-2 font-mono", rows: 6, placeholder: "Enter your custom prompt instructions here\u2026", "data-testid": "custom-prompt-textarea" })] }), hasDefaultPrompt && (_jsxs("div", { children: [_jsx("span", { className: "text-[11px] font-bold tracking-wider text-gray-500 uppercase", children: "Preview" }), _jsx("pre", { className: "mt-2 max-h-52 overflow-y-auto rounded-md bg-gray-50/70 p-3 font-mono text-xs leading-relaxed whitespace-pre-wrap text-gray-700", children: previewPrompt })] }))] }))] }))] }) }));
 }

package/dist/steps/ServiceLanguageSelectionStep.d.ts

@@ -1,3 +1,8 @@
 import { TranslationStepProps } from "./types";
-export declare function ServiceLanguageSelectionStep({ stepIndex, isActive, data, setData, onStepCompleted, editContext, setFooterActions, requestClose }: TranslationStepProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Language-only step. Item selection lives in its own step
+ * (see ItemSelectionStep). The legacy name is kept so existing imports
+ * keep working.
+ */
+export declare function ServiceLanguageSelectionStep({ isActive, data, setData, onStepCompleted, editContext, }: TranslationStepProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ServiceLanguageSelectionStep.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ServiceLanguageSelectionStep.d.ts","sourceRoot":"","sources":["../../src/steps/ServiceLanguageSelectionStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,SAAS,CAAC;AAkBtE,wBAAgB,4BAA4B,CAAC,EAAE,SAAS,EAAE,QAAe,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,EAAE,oBAAoB,2CAuZ7K"}
+{"version":3,"file":"ServiceLanguageSelectionStep.d.ts","sourceRoot":"","sources":["../../src/steps/ServiceLanguageSelectionStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,SAAS,CAAC;AAGtE;;;;GAIG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,QAAe,EACf,IAAI,EACJ,OAAO,EACP,eAAe,EACf,WAAW,GACZ,EAAE,oBAAoB,2CA4OtB"}