@parhelia/localization 0.1.12902 → 0.1.12904

package/dist/steps/PromptCustomizationStep.js

@@ -1,77 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Input, Select, Spinner, Textarea } from "@parhelia/core";
-import { WizardStepShell } from "./WizardStepShell";
-import { suggestBatchName } from "../api/discovery";
-export function PromptCustomizationStep({ isActive = true, data, setData, onStepCompleted, editContext, }) {
+import { useState, useEffect, useMemo, useRef, useCallback } from "react";
+export function PromptCustomizationStep({ stepIndex, isActive = true, data, setData, onStepCompleted, editContext, }) {
     const [customPrompt, setCustomPrompt] = useState("");
     const [customizationType, setCustomizationType] = useState("extend");
-    // 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,
-    ]);
+    // Use refs to track current values without triggering re-renders
     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;
@@ -79,32 +17,36 @@ export function PromptCustomizationStep({ isActive = true, data, setData, onStep
     useEffect(() => {
         customizationTypeRef.current = customizationType;
     }, [customizationType]);
-    const selectedProvider = useMemo(() => data.translationProviders.find((p) => p.name === data.translationProvider), [data.translationProviders, data.translationProvider]);
+    // Get service-specific custom data for the selected provider
     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;
-    const supportsPromptCustomization = data.translationProvider === "AI";
+    // Get default prompt from provider settings (no fallback)
     const defaultPrompt = useMemo(() => {
-        const prompt = selectedProvider?.defaultPrompt;
+        const provider = data.translationProviders.find(p => p.name === data.translationProvider);
+        const prompt = provider?.defaultPrompt;
+        // Return null if prompt is null, undefined, or empty string
         return prompt && prompt.trim() ? prompt : null;
-    }, [selectedProvider?.defaultPrompt]);
-    const hasDefaultPrompt = defaultPrompt != null && defaultPrompt.length > 0;
+    }, [data.translationProviders, data.translationProvider]);
+    const hasDefaultPrompt = defaultPrompt != null && defaultPrompt.trim().length > 0;
+    // Initialize from existing data - only on mount or provider change
     useEffect(() => {
+        // Reset initialization when provider changes
         if (lastProviderRef.current !== data.translationProvider) {
             hasInitializedRef.current = false;
             lastProviderRef.current = data.translationProvider;
         }
-        if (hasInitializedRef.current)
+        // Skip if already initialized (prevents re-init during typing)
+        if (hasInitializedRef.current) {
             return;
-        const nextCustomizationType = serviceData?.promptCustomizationType ||
-            "extend";
+        }
+        const nextCustomizationType = serviceData?.promptCustomizationType || "extend";
         let nextCustomPrompt = serviceData?.customPrompt || "";
-        if (hasDefaultPrompt &&
-            nextCustomizationType === "extend" &&
-            nextCustomPrompt.startsWith(defaultPrompt || "")) {
+        // If stored prompt already includes default (legacy), strip it for editing
+        if (hasDefaultPrompt && nextCustomizationType === "extend" && nextCustomPrompt.startsWith(defaultPrompt || "")) {
             nextCustomPrompt = nextCustomPrompt.slice((defaultPrompt || "").length);
             nextCustomPrompt = nextCustomPrompt.replace(/^\s*\n\s*\n?/, "");
         }
@@ -118,70 +60,29 @@ export function PromptCustomizationStep({ isActive = true, data, setData, onStep
         }
         hasInitializedRef.current = true;
     }, [
-        data.translationProvider,
-        defaultPrompt,
         enableCustomPrompt,
-        hasDefaultPrompt,
         serviceData,
+        hasDefaultPrompt,
+        defaultPrompt,
+        data.translationProvider,
     ]);
-    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 !== "AI" || newProvider === "AI") {
-                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,
-        });
-    };
+    // Preview of final prompt
     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}`;
-    }, [
-        customPrompt,
-        customizationType,
-        defaultPrompt,
-        enableCustomPrompt,
-        hasDefaultPrompt,
-    ]);
+    }, [enableCustomPrompt, customPrompt, customizationType, defaultPrompt, hasDefaultPrompt]);
+    // Debounced update to parent - prevents rapid state updates during typing
     const updateParentData = useCallback(() => {
-        if (!data.translationProvider)
-            return;
         const trimmedCustomPrompt = customPromptRef.current.trim();
         const currentCustomizationType = customizationTypeRef.current;
         const newServiceCustomData = new Map(data.serviceCustomData || new Map());
@@ -194,28 +95,33 @@ export function PromptCustomizationStep({ isActive = true, data, setData, onStep
             };
             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);
         }
-        setData({
+        const newData = {
             ...data,
             serviceCustomData: newServiceCustomData,
-        });
-    }, [data, enableCustomPrompt, setData]);
+        };
+        setData(newData);
+    }, [enableCustomPrompt, data, setData]);
+    // Update wizard data when settings change - debounced to prevent rapid fire
     useEffect(() => {
-        if (!isActive || !supportsPromptCustomization)
+        if (!isActive)
             return;
+        // Clear any pending update
         if (updateTimerRef.current) {
             clearTimeout(updateTimerRef.current);
         }
+        // Debounce the update to parent (100ms delay)
         updateTimerRef.current = setTimeout(() => {
             updateParentData();
         }, 100);
@@ -225,33 +131,24 @@ export function PromptCustomizationStep({ isActive = true, data, setData, onStep
             }
         };
     }, [
+        enableCustomPrompt,
         customPrompt,
         customizationType,
         isActive,
-        supportsPromptCustomization,
         updateParentData,
     ]);
-    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-center justify-between", children: [_jsx("label", { htmlFor: "translation-batch-name", className: "text-[11px] font-bold tracking-wider text-neutral-grey-50 ", children: "Name" }), isSuggesting && (_jsx("div", { role: "status", "aria-label": "Suggesting name", className: "text-muted-foreground flex h-3.5 w-3.5 items-center justify-center", children: _jsx(Spinner, { size: "xs" }) }))] }), _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: "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-neutral-grey-50 ", 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-border-default text-[var(--color-highlight-100)] accent-[var(--color-highlight-100)] focus:ring-[var(--color-highlight-100)]", "data-testid": "enable-custom-prompt-checkbox" }), _jsxs("div", { className: "min-w-0", children: [_jsx("span", { className: "block text-[13px] font-medium text-neutral-grey-100", 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-neutral-grey-50 ", children: "Default prompt" }), _jsx("pre", { className: "mt-2 max-h-40 overflow-y-auto rounded-md bg-neutral-grey-5/70 p-3 font-mono text-xs leading-relaxed whitespace-pre-wrap text-neutral-grey-100", children: defaultPrompt })] }), _jsxs("div", { children: [_jsx("span", { className: "text-[11px] font-bold tracking-wider text-neutral-grey-50 ", 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-neutral-grey-5"}`, 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-border-default text-[var(--color-highlight-100)] accent-[var(--color-highlight-100)] focus:ring-[var(--color-highlight-100)]", "data-testid": `customization-type-${opt.value}` }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-medium text-neutral-grey-100", 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-neutral-grey-50 ", 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-neutral-grey-50 ", children: "Preview" }), _jsx("pre", { className: "mt-2 max-h-52 overflow-y-auto rounded-md bg-neutral-grey-5/70 p-3 font-mono text-xs leading-relaxed whitespace-pre-wrap text-neutral-grey-100", children: previewPrompt })] }))] }))] }))] }) }));
+    // 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." })] })] }))] })] }));
 }

package/dist/steps/ServiceLanguageSelectionStep.d.ts

@@ -1,8 +1,3 @@
 import { TranslationStepProps } from "./types";
-/**
- * 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;
+export declare function ServiceLanguageSelectionStep({ stepIndex, isActive, data, setData, onStepCompleted, editContext, setFooterActions, requestClose }: 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":"AAEA,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"}
+{"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"}