@parhelia/core 0.4.12825 → 0.4.12872

package/dist/editor/component-conversion/ConvertComponentDialog.js

@@ -0,0 +1,633 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { AlertTriangle, Check, ChevronLeft, ChevronRight, Info, Replace, RotateCcw, Sparkles, } from "lucide-react";
+import { Dialog, DialogContent } from "../../components/ui/dialog";
+import { StyledDialogTitle } from "../../components/ui/styled-dialog-title";
+import { Button } from "../../components/ui/button";
+import { Select } from "../../components/ui/select";
+import { Textarea } from "../../components/ui/textarea";
+import { sanitizeHtml } from "../../lib/sanitize";
+import { Alert, AlertDescription } from "../../components/ui/alert";
+import { MultiSwitchButton } from "../../components/ui/multi-switch-button";
+import { useEditContext } from "../client/editContext";
+import DialogButtons from "../ui/DialogButtons";
+import { LoadingState } from "../ui/LoadingState";
+import { Spinner } from "../ui/Spinner";
+import { buildClientRows, buildConversions, buildCurrentValues, clearLanguageValues, countPendingAiWrites, createDialogState, encodeRowValue, getLostFields, getMergedSourceIds, getRowOptions, getVisibleChildren, humanizePlaceholder, isAiRow, mergeRefinedPlan, normalizeId, setPreview, updateChild, updateRole, updateRow, } from "./conversionModel";
+import { planComponentConversion, previewConversionValue } from "./conversionService";
+import { ConversionAiDebugButton } from "./ConversionAiDebugButton";
+const MODEL_STORAGE_KEY = "convertComponent.modelId";
+function readStoredModelId() {
+    try {
+        return window.localStorage.getItem(MODEL_STORAGE_KEY) ?? undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+function storeModelId(modelId) {
+    try {
+        window.localStorage.setItem(MODEL_STORAGE_KEY, modelId);
+    }
+    catch {
+        // Remembering the model is a convenience only.
+    }
+}
+/**
+ * Reviews and adjusts a component conversion before it runs. One AI call maps
+ * the fields and writes the texts of every component in every language; the
+ * user steers it with instructions, picks the model and can change any row.
+ * Returns the operation's conversions; nothing is written here.
+ */
+export function ConvertComponentDialog(props) {
+    const { pageItem, componentIds, target } = props;
+    const editContext = useEditContext();
+    const showDebug = editContext?.userInfo?.preferences?.showDebugButtons ?? false;
+    const [plan, setPlan] = useState(null);
+    const [state, setState] = useState(null);
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [mode, setMode] = useState(undefined);
+    const [refine, setRefine] = useState("idle");
+    const [refineError, setRefineError] = useState(null);
+    const [instructions, setInstructions] = useState([]);
+    const [draft, setDraft] = useState("");
+    const [activeItems, setActiveItems] = useState({});
+    const [pendingPreviews, setPendingPreviews] = useState({});
+    const [modelId, setModelId] = useState(readStoredModelId);
+    const [aiCalls, setAiCalls] = useState([]);
+    const modelIdRef = useRef(modelId);
+    modelIdRef.current = modelId;
+    /** Shows the model the server used, e.g. its default when a remembered one is gone. */
+    const syncModel = useCallback((effective) => {
+        modelIdRef.current = effective;
+        setModelId(effective);
+    }, []);
+    const controllerRef = useRef(null);
+    const refineControllerRef = useRef(null);
+    const previewSequence = useRef({});
+    const requestRefine = useCallback(async (request) => {
+        refineControllerRef.current?.abort();
+        const controller = new AbortController();
+        refineControllerRef.current = controller;
+        controllerRef.current?.signal.addEventListener("abort", () => controller.abort(), {
+            once: true,
+        });
+        setRefine("running");
+        setRefineError(null);
+        const result = await planComponentConversion({
+            page: pageItem,
+            componentIds,
+            targetTypeId: target.typeId,
+            mode: request.plan.mode,
+            useAi: true,
+            instructions: request.instructions,
+            currentMappings: request.force ? buildClientRows(request.plan, request.state) : undefined,
+            currentValues: request.force ? buildCurrentValues(request.plan, request.state) : undefined,
+            activeItems: request.activeItems,
+            modelId: modelIdRef.current,
+            includeAiDebug: showDebug,
+        }, controller.signal);
+        if (controller.signal.aborted)
+            return false;
+        if (result.type !== "success" || !result.data) {
+            setRefine("error");
+            setRefineError(result.summary ?? "The AI is unavailable.");
+            return false;
+        }
+        const refined = result.data;
+        setAiCalls(refined.aiCalls ?? []);
+        syncModel(refined.modelId);
+        if (!refined.aiApplied) {
+            setRefine("error");
+            setRefineError(refined.aiError ?? "The AI is unavailable.");
+            return false;
+        }
+        setPlan((current) => current
+            ? {
+                ...current,
+                groups: refined.groups,
+                items: current.items.map((item) => refined.items.find((r) => r.key === item.key) ?? item),
+                aiApplied: true,
+                models: refined.models,
+                modelId: refined.modelId,
+            }
+            : current);
+        setState((current) => current ? mergeRefinedPlan(current, refined, { force: request.force }) : current);
+        setRefine("done");
+        return true;
+    }, [pageItem, componentIds, target.typeId, showDebug, syncModel]);
+    const requestPlan = useCallback(async (requestedMode, aiInstructions) => {
+        controllerRef.current?.abort();
+        refineControllerRef.current?.abort();
+        const controller = new AbortController();
+        controllerRef.current = controller;
+        setLoading(true);
+        setError(null);
+        setRefine("idle");
+        setRefineError(null);
+        setPendingPreviews({});
+        const result = await planComponentConversion({
+            page: pageItem,
+            componentIds,
+            targetTypeId: target.typeId,
+            mode: requestedMode,
+            modelId: modelIdRef.current,
+        }, controller.signal);
+        if (controller.signal.aborted)
+            return;
+        if (result.type !== "success" || !result.data) {
+            setError(result.summary ?? result.details ?? "The conversion could not be planned.");
+            setLoading(false);
+            return;
+        }
+        const nextPlan = result.data;
+        syncModel(nextPlan.modelId);
+        const nextState = createDialogState(nextPlan);
+        const nextActive = Object.fromEntries(nextPlan.groups.map((g) => [g.key, g.itemKeys[0] ?? ""]));
+        setPlan(nextPlan);
+        setMode(nextPlan.mode);
+        setState(nextState);
+        setActiveItems(nextActive);
+        setLoading(false);
+        // The AI maps and writes right away; the name-and-type plan shows meanwhile.
+        if (nextPlan.aiAvailable && nextPlan.aiSuggested) {
+            void requestRefine({
+                plan: nextPlan,
+                state: nextState,
+                activeItems: nextActive,
+                instructions: aiInstructions,
+                force: false,
+            });
+        }
+    }, [pageItem, componentIds, target.typeId, requestRefine, syncModel]);
+    useEffect(() => {
+        void requestPlan(undefined, []);
+        return () => {
+            controllerRef.current?.abort();
+            refineControllerRef.current?.abort();
+        };
+    }, [requestPlan]);
+    const itemsByKey = useMemo(() => new Map((plan?.items ?? []).map((item) => [item.key, item])), [plan]);
+    /** Marks preview keys pending; returns a check whether this request is still the latest for a key. */
+    const beginPreviews = (keys) => {
+        const sequences = keys.map((key) => {
+            const sequence = (previewSequence.current[key] ?? 0) + 1;
+            previewSequence.current[key] = sequence;
+            return sequence;
+        });
+        setPendingPreviews((current) => ({
+            ...current,
+            ...Object.fromEntries(keys.map((key) => [key, true])),
+        }));
+        return (key) => previewSequence.current[key] === sequences[keys.indexOf(key)];
+    };
+    const endPreviews = (keys) => setPendingPreviews((current) => {
+        const next = { ...current };
+        for (const key of keys)
+            delete next[key];
+        return next;
+    });
+    const fetchPreview = async (group, item, field, row) => {
+        if (!plan || !row.sourceKey || row.mode === "empty")
+            return;
+        const option = group.sourceFields.find((o) => o.key === row.sourceKey);
+        if (!option)
+            return;
+        const sourceComponentId = option.componentId ?? item.sourceComponentIds[0] ?? item.anchorComponentId;
+        const key = `${item.key}:${field.id}`;
+        const isLatest = beginPreviews([key]);
+        const result = await previewConversionValue({
+            page: pageItem,
+            sourceComponentId,
+            sourceFieldId: option.fieldId,
+            targetTypeId: plan.target.typeId,
+            targetFieldId: field.id,
+            mode: row.mode,
+            instruction: row.instruction,
+            modelId: plan.modelId,
+        }, controllerRef.current?.signal);
+        if (controllerRef.current?.signal.aborted || !isLatest(key))
+            return;
+        endPreviews([key]);
+        const preview = result.type === "success" && result.data?.preview
+            ? result.data.preview
+            : { hasValue: false, error: result.data?.error ?? result.summary ?? "Preview failed." };
+        setState((current) => (current ? setPreview(current, item.key, field.id, preview) : current));
+    };
+    /**
+     * Runs the AI again on the dialog as it is: one call that keeps the user's
+     * rows and writes every AI field of every component and language.
+     */
+    const rerunAi = (basePlan, baseState) => requestRefine({ plan: basePlan, state: baseState, activeItems, instructions, force: true });
+    const changeRow = (group, field, sourceKey, rowMode, instruction) => {
+        if (!plan || !state)
+            return;
+        const effectiveMode = rowMode === "generate" ? "generate" : sourceKey ? rowMode : "empty";
+        const row = {
+            sourceKey: effectiveMode === "generate" ? null : sourceKey,
+            mode: effectiveMode,
+            instruction,
+            uses: undefined,
+            origin: "user",
+        };
+        let next = clearLanguageValues(updateRow(state, group.key, field.id, row), group.itemKeys, field.id);
+        // Copies read straight from the source preview; conversions ask the server
+        // for the instance on screen; AI fields run the AI for all of them.
+        for (const itemKey of group.itemKeys) {
+            const item = itemsByKey.get(itemKey);
+            if (!item)
+                continue;
+            if (effectiveMode === "empty") {
+                next = setPreview(next, itemKey, field.id, { hasValue: false });
+            }
+            else if (effectiveMode === "copy" && sourceKey) {
+                next = setPreview(next, itemKey, field.id, item.sourceValues[sourceKey] ?? { hasValue: false });
+            }
+            else {
+                const previews = { ...(next.previews[itemKey] ?? {}) };
+                delete previews[field.id];
+                next = { ...next, previews: { ...next.previews, [itemKey]: previews } };
+            }
+        }
+        setState(next);
+        if (effectiveMode === "generate") {
+            void rerunAi(plan, next);
+            return;
+        }
+        const activeKey = activeItems[group.key];
+        const activeItem = activeKey ? itemsByKey.get(activeKey) : undefined;
+        if (!activeItem)
+            return;
+        if (effectiveMode === "convert" || effectiveMode === "rewrite") {
+            void fetchPreview(group, activeItem, field, row);
+        }
+    };
+    const switchInstance = (group, direction) => {
+        if (!state || !plan)
+            return;
+        const keys = group.itemKeys;
+        const index = keys.indexOf(activeItems[group.key] ?? keys[0]);
+        const nextKey = keys[(index + direction + keys.length) % keys.length];
+        setActiveItems((current) => ({ ...current, [group.key]: nextKey }));
+        // Conversions this instance has not shown yet; its AI fields are already written.
+        const item = itemsByKey.get(nextKey);
+        if (!item)
+            return;
+        for (const field of plan.target.fields) {
+            const row = state.rows[group.key]?.[field.id];
+            if (row?.mode === "convert" && !state.previews[nextKey]?.[field.id]) {
+                void fetchPreview(group, item, field, row);
+            }
+        }
+    };
+    const changeModel = (nextModelId) => {
+        if (!plan || !state || nextModelId === (modelId ?? plan.modelId))
+            return;
+        setModelId(nextModelId);
+        modelIdRef.current = nextModelId;
+        storeModelId(nextModelId);
+        void rerunAi(plan, state);
+    };
+    const submitInstruction = async () => {
+        if (!plan || !state || refine === "running")
+            return;
+        const text = draft.trim();
+        const next = text ? [...instructions, text] : instructions;
+        const applied = await requestRefine({ plan, state, activeItems, instructions: next, force: true });
+        if (applied) {
+            setInstructions(next);
+            setDraft("");
+        }
+    };
+    const startOver = () => {
+        setInstructions([]);
+        setDraft("");
+        void requestPlan(plan?.mode, []);
+    };
+    const pendingAiWrites = plan && state ? countPendingAiWrites(plan, state) : 0;
+    const conversions = plan && state ? buildConversions(plan, state) : [];
+    const canConvert = !!plan &&
+        !!state &&
+        !loading &&
+        refine !== "running" &&
+        conversions.length > 0 &&
+        conversions.every((c) => (c.sourceComponentIds?.length ?? 0) > 0 || (c.childActions?.length ?? 0) > 0);
+    const convert = () => {
+        if (!plan || !state || !canConvert)
+            return;
+        const count = componentIds.length;
+        const title = plan.mode === "merge"
+            ? `Merge ${count} components into ${plan.target.name}`
+            : count === 1
+                ? `Convert ${props.selectionLabel} to ${plan.target.name}`
+                : `Convert ${count} components to ${plan.target.name}`;
+        props.onClose?.({ mode: plan.mode, conversions, title, instructions, modelId: plan.modelId });
+    };
+    const subtitle = componentIds.length === 1
+        ? props.selectionLabel
+        : mode === "merge"
+            ? `${componentIds.length} components into one`
+            : `${componentIds.length} components`;
+    const warnings = plan?.notes.filter((n) => n.kind === "warning") ?? [];
+    const infos = plan?.notes.filter((n) => n.kind !== "warning") ?? [];
+    return (_jsx(Dialog, { open: true, onOpenChange: (open) => {
+            if (!open)
+                props.onClose?.(null);
+        }, children: _jsxs(DialogContent, { "data-testid": "convert-component-dialog", className: "flex flex-col overflow-hidden border-none p-0 shadow-2xl", style: { width: "min(900px, 95vw)", maxHeight: "90vh" }, children: [_jsx(StyledDialogTitle, { icon: _jsx(Replace, { strokeWidth: 1 }), title: props.sourceTypeName
+                        ? `Convert from ${props.sourceTypeName} to ${target.name}`
+                        : `Convert to ${target.name}`, subtitle: subtitle }), loading ? (_jsx(LoadingState, { message: "Planning the conversion...", className: "py-20" })) : error || !plan || !state ? (_jsx("div", { className: "bg-white px-6 py-6", children: _jsxs(Alert, { variant: "destructive", "data-testid": "convert-component-error", children: [_jsx(AlertTriangle, { className: "h-4 w-4" }), _jsx(AlertDescription, { children: error ?? "The conversion could not be planned." })] }) })) : (_jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto bg-white", children: _jsxs("div", { className: "space-y-6 px-6 pt-4 pb-6", children: [componentIds.length > 1 && (_jsx("section", { className: "flex flex-wrap items-center gap-3", children: plan.canMerge ? (_jsx(MultiSwitchButton, { value: plan.mode, testId: "convert-component-mode", className: "w-[340px]", "aria-label": "Conversion mode", onValueChange: (value) => {
+                                        if (value !== plan.mode)
+                                            void requestPlan(value, instructions);
+                                    }, options: [
+                                        {
+                                            value: "each",
+                                            label: `Convert each (${componentIds.length})`,
+                                            testId: "convert-component-mode-each",
+                                        },
+                                        {
+                                            value: "merge",
+                                            label: "Merge into one",
+                                            testId: "convert-component-mode-merge",
+                                        },
+                                    ] })) : (_jsx("span", { className: "text-muted-foreground text-xs", children: plan.cannotMergeReason ?? "Each component is converted on its own." })) })), plan.aiAvailable && (_jsx(AiInstructions, { refine: refine, error: refineError, models: plan.models ?? [], modelId: modelId ?? plan.modelId, onModelChange: changeModel, aiCalls: showDebug ? aiCalls : undefined, instructions: instructions, draft: draft, onDraftChange: setDraft, onSubmit: () => void submitInstruction(), onStartOver: startOver })), warnings.length > 0 && (_jsxs(Alert, { variant: "warning", "data-testid": "convert-component-warnings", children: [_jsx(AlertTriangle, { className: "h-4 w-4" }), _jsx(AlertDescription, { className: "space-y-1 text-xs", children: warnings.map((note) => (_jsx("p", { children: note.text }, note.code + note.text))) })] })), plan.mode === "merge" && plan.items[0] && (_jsx(SourcesSection, { plan: plan, state: state, item: plan.items[0], onChange: (componentId, role) => setState(updateRole(state, componentId, role)) })), plan.groups.map((group) => {
+                                const item = itemsByKey.get(activeItems[group.key] ?? group.itemKeys[0]);
+                                if (!item)
+                                    return null;
+                                return (_jsx(GroupSections, { plan: plan, state: state, group: group, item: item, showGroupName: plan.groups.length > 1, pendingPreviews: pendingPreviews, aiRunning: refine === "running", onChangeRow: changeRow, onGeneratePreview: (field, row) => {
+                                        if (row.mode === "generate")
+                                            void rerunAi(plan, state);
+                                        else
+                                            void fetchPreview(group, item, field, row);
+                                    }, onSwitchInstance: (direction) => switchInstance(group, direction), onChangeChild: (childId, child) => setState(updateChild(state, item.key, childId, child)) }, group.key));
+                            }), infos.length > 0 && (_jsxs("section", { "data-testid": "convert-component-notes", children: [_jsx("h3", { className: "mb-2 text-base font-medium", children: "Good to know" }), _jsx("ul", { className: "space-y-1.5", children: infos.map((note) => (_jsxs("li", { className: "text-muted-foreground flex items-start gap-2 text-xs", "data-note-code": note.code, children: [_jsx(Info, { className: "mt-0.5 h-3.5 w-3.5 shrink-0", strokeWidth: 1.5 }), _jsx("span", { children: note.text })] }, note.code + note.text))) })] }))] }) })), _jsxs(DialogButtons, { className: "items-center", children: [plan && !loading && !error && (_jsxs("div", { className: "text-muted-foreground mr-auto text-xs", "data-testid": "convert-component-summary", children: ["Applies to ", plan.languages.join(", "), ".", pendingAiWrites > 0 && (_jsxs(_Fragment, { children: [" ", "The AI writes ", pendingAiWrites, " more value", pendingAiWrites === 1 ? "" : "s", " when you convert."] }))] })), _jsx(Button, { variant: "ghost", onClick: () => props.onClose?.(null), children: "Cancel" }), _jsx(Button, { variant: "default", disabled: !canConvert, onClick: convert, "data-testid": "convert-component-confirm", children: plan?.mode === "merge" ? "Merge" : "Convert" })] })] }) }));
+}
+/**
+ * The user's line to the AI: instructions it follows for the mapping and the
+ * written values. Each one refines the current result; all of them also apply
+ * to the values written when the user converts.
+ */
+function AiInstructions({ refine, error, models, modelId, onModelChange, aiCalls, instructions, draft, onDraftChange, onSubmit, onStartOver, }) {
+    const running = refine === "running";
+    return (_jsxs("section", { className: "border-highlight-100/25 bg-highlight-100/5 rounded-lg border p-3", "data-testid": "convert-component-ai", "data-state": refine, children: [_jsxs("div", { className: "mb-2 flex items-center gap-2 text-xs", children: [_jsx(Sparkles, { className: "text-highlight-100 h-3.5 w-3.5", strokeWidth: 1.5 }), _jsx("span", { className: "shrink-0 font-medium", children: "AI conversion" }), _jsx("span", { className: "text-muted-foreground ml-auto flex min-w-0 items-center gap-1.5 truncate", children: running ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "xs" }), _jsx("span", { "data-testid": "convert-component-ai-running", children: "Mapping and writing..." })] })) : refine === "error" ? (_jsx("span", { className: "text-feedback-red", "data-testid": "convert-component-ai-error", children: error ?? "The AI is unavailable." })) : refine === "done" ? (_jsx("span", { "data-testid": "convert-component-ai-done", children: "Fields mapped and written by AI" })) : null }), models.length > 1 && (_jsx("div", { className: "w-48 shrink-0", children: _jsx(Select, { size: "xs", maxWidth: "100%", value: modelId ?? "", disabled: running, searchable: models.length > 8, placeholder: "AI model", "data-testid": "convert-component-ai-model", options: models.map((model) => ({ value: model.id, label: model.name })), onValueChange: onModelChange }) })), models.length === 1 && (_jsx("span", { className: "text-muted-foreground shrink-0", "data-testid": "convert-component-ai-model-name", children: models[0].name })), aiCalls && _jsx(ConversionAiDebugButton, { calls: aiCalls, running: running })] }), instructions.length > 0 && (_jsx("ol", { className: "mb-2 space-y-1", "data-testid": "convert-component-ai-instructions", children: instructions.map((instruction, index) => (_jsxs("li", { className: "text-muted-foreground flex items-start gap-1.5 text-xs", "data-testid": "convert-component-ai-instruction", children: [_jsx(Check, { className: "text-highlight-100 mt-0.5 h-3 w-3 shrink-0", strokeWidth: 2 }), _jsx("span", { className: "min-w-0 break-words", children: instruction })] }, `${index}:${instruction}`))) })), _jsxs("div", { className: "flex items-end gap-2", children: [_jsx(Textarea, { value: draft, rows: 1, disabled: running, placeholder: instructions.length > 0
+                            ? "Refine the result, e.g. “make the text shorter”"
+                            : "Tell the AI how to convert, e.g. “use the headline as a heading in the text” or “shorten the teaser to one sentence”", className: "min-h-9 bg-white", "data-testid": "convert-component-ai-input", onChange: (event) => onDraftChange(event.target.value), onKeyDown: (event) => {
+                            if (event.key === "Enter" && !event.shiftKey) {
+                                event.preventDefault();
+                                onSubmit();
+                            }
+                        } }), _jsxs(Button, { size: "sm", variant: "default", disabled: running, onClick: onSubmit, "data-testid": "convert-component-ai-apply", className: "shrink-0 gap-1.5", children: [_jsx(Sparkles, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }), draft.trim() ? "Apply" : refine === "error" ? "Try again" : "Run again"] })] }), instructions.length > 0 && !running && (_jsxs("button", { type: "button", className: "text-muted-foreground hover:text-foreground mt-2 flex items-center gap-1 text-[11px]", onClick: onStartOver, "data-testid": "convert-component-ai-start-over", children: [_jsx(RotateCcw, { className: "h-3 w-3", strokeWidth: 1.5 }), "Start over without instructions"] }))] }));
+}
+function SectionHeading({ title, subtitle, trailing, }) {
+    return (_jsxs("div", { className: "mb-3 flex items-end justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-base font-medium", children: title }), subtitle && _jsx("span", { className: "text-muted-foreground text-xs", children: subtitle })] }), trailing] }));
+}
+function GroupSections({ plan, state, group, item, showGroupName, pendingPreviews, aiRunning, onChangeRow, onGeneratePreview, onSwitchInstance, onChangeChild, }) {
+    const index = group.itemKeys.indexOf(item.key);
+    const lost = getLostFields(plan, state, item);
+    const children = getVisibleChildren(plan, state, item);
+    const removedChildren = children.filter((child) => (state.children[item.key]?.[child.componentId]?.action ?? child.action) === "remove");
+    const switcher = group.itemKeys.length > 1 ? (_jsxs("div", { className: "flex items-center gap-1 text-xs", "data-testid": "convert-component-instance-switcher", children: [_jsx(Button, { variant: "ghost", size: "iconXs", "aria-label": "Previous component", onClick: () => onSwitchInstance(-1), children: _jsx(ChevronLeft, { className: "h-4 w-4", strokeWidth: 1.5 }) }), _jsxs("span", { className: "text-muted-foreground max-w-[220px] truncate", "data-testid": "convert-component-instance", children: [item.name, " \u00B7 ", index + 1, " of ", group.itemKeys.length] }), _jsx(Button, { variant: "ghost", size: "iconXs", "aria-label": "Next component", onClick: () => onSwitchInstance(1), children: _jsx(ChevronRight, { className: "h-4 w-4", strokeWidth: 1.5 }) })] })) : undefined;
+    return (_jsxs(_Fragment, { children: [_jsxs("section", { "data-testid": "convert-component-fields", "data-group-key": group.key, children: [_jsx(SectionHeading, { title: showGroupName ? `Fields from ${group.sourceTypeName}` : "Fields", subtitle: plan.mode === "merge"
+                            ? "Each field of the new component and where its content comes from."
+                            : `Each field of the new component and where its content comes from${group.itemKeys.length > 1 ? ` (one mapping for all ${group.itemKeys.length})` : ""}.`, trailing: switcher }), _jsxs("div", { className: "text-muted-foreground grid grid-cols-[minmax(0,170px)_minmax(0,240px)_minmax(0,1fr)] gap-3 px-1 pb-1.5 text-[11px] font-medium", children: [_jsxs("span", { children: [plan.target.name, " field"] }), _jsx("span", { children: "Content from" }), _jsx("span", { children: "Result" })] }), plan.target.fields.length === 0 && (_jsxs("div", { className: "text-muted-foreground border-border-default border-t px-1 py-3 text-xs", children: [plan.target.name, " has no content fields."] })), plan.target.fields.map((field) => {
+                        const row = state.rows[group.key]?.[field.id] ?? {
+                            sourceKey: null,
+                            mode: "empty",
+                            origin: "none",
+                        };
+                        return (_jsx(MappingRow, { plan: plan, state: state, group: group, item: item, field: field, row: row, pending: !!pendingPreviews[`${item.key}:${field.id}`] || (aiRunning && isAiRow(row)), onChange: (sourceKey, mode, instruction) => onChangeRow(group, field, sourceKey, mode, instruction), onGeneratePreview: () => onGeneratePreview(field, row) }, field.id));
+                    })] }), children.length > 0 && (_jsxs("section", { "data-testid": "convert-component-children", children: [_jsx(SectionHeading, { title: "Child components", subtitle: `Components inside ${plan.mode === "merge" ? "the merged components" : item.name}.` }), children.map((child) => (_jsx(ChildRow, { plan: plan, child: child, state: state.children[item.key]?.[child.componentId], onChange: (next) => onChangeChild(child.componentId, next) }, child.componentId)))] })), _jsxs("section", { "data-testid": "convert-component-lost", children: [_jsx(SectionHeading, { title: "Won't carry over" }), _jsx(LostList, { plan: plan, item: item, lost: lost, removedChildren: removedChildren })] })] }));
+}
+function MappingRow({ plan, state, group, item, field, row, pending, onChange, onGeneratePreview, }) {
+    const options = getRowOptions(plan, state, group, item, field.id);
+    const value = encodeRowValue(row.sourceKey, row.mode);
+    const preview = state.previews[item.key]?.[field.id];
+    const [instruction, setInstruction] = useState(row.instruction ?? "");
+    const aiRow = row.mode === "generate" || row.mode === "rewrite";
+    const usedLabels = (row.mode === "generate" ? row.uses ?? [] : [])
+        .map((key) => group.sourceFields.find((o) => o.key === key))
+        .filter((option) => !!option)
+        .map((option) => plan.mode === "merge" && option.componentName
+        ? `${option.componentName} · ${option.displayName}`
+        : option.displayName);
+    useEffect(() => {
+        setInstruction(row.instruction ?? "");
+    }, [row.instruction]);
+    return (_jsxs("div", { className: "border-border-default grid grid-cols-[minmax(0,170px)_minmax(0,240px)_minmax(0,1fr)] items-start gap-3 border-t px-1 py-2.5", "data-testid": "convert-component-row", "data-target-field": field.name, "data-mode": row.mode, children: [_jsxs("div", { className: "min-w-0 pt-1.5", children: [_jsx("div", { className: "truncate text-xs font-medium", title: field.displayName, children: field.displayName }), _jsx("div", { className: "text-muted-foreground truncate text-[11px]", children: field.type })] }), _jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [_jsx(Select, { size: "sm", maxWidth: "100%", value: value, options: options.map((option) => ({
+                            value: option.value,
+                            label: option.label,
+                            description: option.description,
+                        })), searchable: options.length > 8, "data-testid": "convert-component-row-source", onValueChange: (next) => {
+                            const option = options.find((o) => o.value === next);
+                            if (!option)
+                                return;
+                            onChange(option.sourceKey, option.mode, option.mode === "generate" || option.mode === "rewrite" ? row.instruction : undefined);
+                        } }), aiRow && (_jsx(Textarea, { value: instruction, rows: 1, placeholder: "Instruction for this field (optional)", className: "min-h-7 px-2 py-1 text-[11px] leading-snug", "data-testid": "convert-component-row-instruction", onChange: (event) => setInstruction(event.target.value), onBlur: () => {
+                            if ((row.instruction ?? "") !== instruction) {
+                                onChange(row.sourceKey, row.mode, instruction || undefined);
+                            }
+                        }, onKeyDown: (event) => {
+                            if (event.key === "Enter" && !event.shiftKey) {
+                                event.preventDefault();
+                                event.target.blur();
+                            }
+                        } })), usedLabels.length > 0 && (_jsxs("span", { className: "text-muted-foreground text-[11px]", "data-testid": "convert-component-row-uses", children: ["Based on ", usedLabels.join(", ")] })), row.origin === "ai" && row.reason && (_jsx("span", { className: "text-muted-foreground text-[11px]", children: row.reason }))] }), _jsxs("div", { className: "min-w-0 pt-1", "data-testid": "convert-component-row-preview", children: [_jsx(ValuePreview, { row: row, field: field, preview: preview, pending: pending, onGenerate: onGeneratePreview, hasSourceValue: row.mode === "generate" || !!(row.sourceKey && item.sourceValues[row.sourceKey]?.hasValue) }), row.mode === "generate" && !pending && (_jsx(OtherLanguageValues, { item: item, fieldId: field.id, currentLanguage: plan.currentLanguage, values: state.languageValues[item.key] }))] })] }));
+}
+function ValuePreview({ row, field, preview, pending, hasSourceValue, onGenerate, }) {
+    const aiRow = row.mode === "generate" || row.mode === "rewrite";
+    if (row.mode === "empty" || (!row.sourceKey && row.mode !== "generate")) {
+        return _jsx("span", { className: "text-muted-foreground text-xs", children: "Stays empty" });
+    }
+    if (!hasSourceValue) {
+        return _jsx("span", { className: "text-muted-foreground text-xs", children: "Source is empty" });
+    }
+    if (pending) {
+        return (_jsxs("span", { className: "text-muted-foreground flex items-center gap-2 text-xs", children: [_jsx(Spinner, { size: "xs" }), aiRow ? "Writing..." : "Converting..."] }));
+    }
+    if (preview?.error) {
+        return (_jsxs("span", { className: "flex flex-wrap items-center gap-x-2 text-xs", children: [_jsx("span", { className: "text-feedback-red", children: preview.error }), aiRow && (_jsx("button", { type: "button", className: "text-highlight-100 underline-offset-2 hover:underline", onClick: onGenerate, "data-testid": "convert-component-row-generate", children: "Try again" }))] }));
+    }
+    if (!preview || (!preview.hasValue && !preview.raw)) {
+        if (aiRow) {
+            return (_jsxs("span", { className: "text-muted-foreground flex flex-wrap items-center gap-x-2 text-xs", children: [_jsx(AiBadge, {}), "Written when you convert.", _jsx("button", { type: "button", className: "text-highlight-100 underline-offset-2 hover:underline", onClick: onGenerate, "data-testid": "convert-component-row-generate", children: "Write now" })] }));
+        }
+        return _jsx("span", { className: "text-muted-foreground text-xs", children: "..." });
+    }
+    // AI-written rich text shows its formatting, so a heading the AI added reads as one.
+    if (aiRow && preview.raw && field.category === "rich-text") {
+        return (_jsxs("div", { className: "flex min-w-0 items-start gap-2 text-xs", "data-testid": "convert-component-row-value", children: [_jsx(AiBadge, {}), _jsx("div", { className: "max-h-40 min-w-0 overflow-y-auto break-words [&_a]:underline [&_h1]:mb-1 [&_h1]:text-sm [&_h1]:font-semibold [&_h2]:mb-1 [&_h2]:text-[13px] [&_h2]:font-semibold [&_h3]:mb-1 [&_h3]:font-semibold [&_li]:ml-4 [&_ol]:list-decimal [&_p]:mb-1 [&_ul]:list-disc", "data-testid": "convert-component-row-html", dangerouslySetInnerHTML: { __html: sanitizeHtml(preview.raw) } })] }));
+    }
+    return (_jsxs("div", { className: "flex min-w-0 items-start gap-2 text-xs", "data-testid": "convert-component-row-value", children: [aiRow && _jsx(AiBadge, {}), preview.imageUrl && (_jsx("img", { src: preview.imageUrl, alt: "", className: "border-border-default h-9 w-14 shrink-0 rounded border object-cover" })), _jsx("span", { className: "line-clamp-4 min-w-0 break-words", title: preview.text, children: preview.text })] }));
+}
+/**
+ * The languages besides the current one the AI already wrote this field in;
+ * hovering one shows its text. Languages still missing are written on convert.
+ */
+function OtherLanguageValues({ item, fieldId, currentLanguage, values, }) {
+    const others = item.languages.filter((language) => language !== currentLanguage);
+    if (others.length === 0)
+        return null;
+    return (_jsx("div", { className: "text-muted-foreground mt-1 flex flex-wrap items-center gap-1 text-[11px]", "data-testid": "convert-component-row-languages", children: others.map((language) => {
+            const value = values?.[language]?.[fieldId];
+            return (_jsx("span", { title: value ? sanitizeTooltip(value) : "Written when you convert", "data-language": language, "data-written": value ? "true" : "false", className: value
+                    ? "bg-highlight-100/10 text-highlight-100 rounded px-1.5 py-px"
+                    : "border-border-default rounded border border-dashed px-1.5 py-px", children: language }, language));
+        }) }));
+}
+/** Tooltip text for a written value: its text without markup. */
+function sanitizeTooltip(value) {
+    const element = document.createElement("div");
+    element.innerHTML = sanitizeHtml(value);
+    return (element.textContent ?? "").trim();
+}
+function AiBadge() {
+    return (_jsx("span", { className: "bg-highlight-100/10 text-highlight-100 shrink-0 rounded px-1.5 py-px text-[10px] font-medium", children: "AI" }));
+}
+function ChildRow({ plan, child, state, onChange, }) {
+    const current = state ?? {
+        action: child.action,
+        targetPlaceholder: child.targetPlaceholder,
+        targetTypeId: child.targetTypeId,
+        targetTypeName: child.targetTypeName,
+        nested: child.nested,
+    };
+    const options = [
+        ...child.movePlaceholders.map((placeholder) => ({
+            value: `move|${placeholder}`,
+            label: `Move to ${humanizePlaceholder(placeholder)}`,
+            state: { action: "move", targetPlaceholder: placeholder },
+        })),
+    ];
+    if (child.targetTypeId && child.targetPlaceholder) {
+        options.push({
+            value: `convert|${child.targetPlaceholder}|${child.targetTypeId}`,
+            label: `Convert to ${child.targetTypeName ?? "another type"} in ${humanizePlaceholder(child.targetPlaceholder)}`,
+            state: {
+                action: "convert",
+                targetPlaceholder: child.targetPlaceholder,
+                targetTypeId: child.targetTypeId,
+                targetTypeName: child.targetTypeName,
+                nested: child.nested,
+            },
+        });
+    }
+    options.push({ value: "remove", label: "Remove", state: { action: "remove" } });
+    const value = current.action === "move"
+        ? `move|${current.targetPlaceholder}`
+        : current.action === "convert"
+            ? `convert|${current.targetPlaceholder}|${current.targetTypeId}`
+            : "remove";
+    // Each field of the converted child: where it comes from, or what the AI wrote (current language).
+    const nestedFields = current.action === "convert" && current.nested
+        ? current.nested.mappings
+            .filter((m) => m.mode !== "empty" && (m.mode === "generate" || m.sourceKey))
+            .map((m) => {
+            const nested = current.nested;
+            const targetField = nested.targetFields.find((f) => f.id === m.targetFieldId);
+            if (!targetField)
+                return null;
+            if (m.mode === "generate") {
+                const written = nested.values?.[plan.currentLanguage]?.[m.targetFieldId];
+                return {
+                    id: m.targetFieldId,
+                    field: targetField.displayName,
+                    ai: true,
+                    text: written ? sanitizeTooltip(written) : "Written when you convert",
+                    languages: Object.keys(nested.values ?? {}).filter((language) => language !== plan.currentLanguage && nested.values[language]?.[m.targetFieldId]),
+                };
+            }
+            const source = nested.sourceFields.find((o) => o.key === m.sourceKey);
+            return source
+                ? { id: m.targetFieldId, field: targetField.displayName, ai: false, text: `from ${source.displayName}`, languages: [] }
+                : null;
+        })
+            .filter((f) => f !== null)
+        : [];
+    return (_jsxs("div", { className: "border-border-default grid grid-cols-[minmax(0,170px)_minmax(0,240px)_minmax(0,1fr)] items-start gap-3 border-t px-1 py-2.5", "data-testid": "convert-component-child", "data-action": current.action, children: [_jsxs("div", { className: "min-w-0 pt-1.5", children: [_jsx("div", { className: "truncate text-xs font-medium", children: child.name }), _jsx("div", { className: "text-muted-foreground truncate text-[11px]", children: child.typeName })] }), _jsx(Select, { size: "sm", maxWidth: "100%", value: value, "data-testid": "convert-component-child-action", options: options.map((o) => ({ value: o.value, label: o.label })), onValueChange: (next) => {
+                    const option = options.find((o) => o.value === next);
+                    if (option)
+                        onChange(option.state);
+                } }), _jsx("div", { className: "text-muted-foreground min-w-0 pt-1.5 text-xs", children: current.action === "remove" ? (child.reason ?? `Not placed in ${plan.target.name}.`) : current.action !== "convert" ? ("Moves along with its content.") : nestedFields.length === 0 ? ("Converted without field content.") : (_jsx("ul", { className: "space-y-1", "data-testid": "convert-component-child-fields", children: nestedFields.map((f) => (_jsxs("li", { className: "flex min-w-0 items-start gap-1.5", "data-ai": f.ai ? "true" : "false", children: [_jsx("span", { className: "text-foreground shrink-0 font-medium", children: f.field }), f.ai && _jsx(AiBadge, {}), _jsx("span", { className: "line-clamp-2 min-w-0 break-words", title: f.text, children: f.text }), f.languages.length > 0 && (_jsxs("span", { className: "shrink-0 text-[10px]", children: ["+", f.languages.join(", ")] }))] }, f.id))) })) })] }));
+}
+function SourcesSection({ plan, state, item, onChange, }) {
+    const merged = new Set(getMergedSourceIds(plan, state, item).map(normalizeId));
+    return (_jsxs("section", { "data-testid": "convert-component-sources", children: [_jsx(SectionHeading, { title: "Components", subtitle: "Merge a component's fields into the new one, or place it inside as a child." }), item.sourceRoles.map((role) => {
+                const current = state.roles[role.componentId] ?? role;
+                const options = [
+                    { value: "merge", label: "Merge its fields" },
+                    ...role.childPlaceholders.map((placeholder) => ({
+                        value: `child|${placeholder}`,
+                        label: `Add as child in ${humanizePlaceholder(placeholder)}`,
+                    })),
+                ];
+                if (role.targetTypeId && role.targetPlaceholder) {
+                    options.push({
+                        value: `child|${role.targetPlaceholder}|${role.targetTypeId}`,
+                        label: `Add as ${role.targetTypeName ?? "child"} in ${humanizePlaceholder(role.targetPlaceholder)}`,
+                    });
+                }
+                const value = current.role === "merge"
+                    ? "merge"
+                    : current.targetTypeId
+                        ? `child|${current.targetPlaceholder}|${current.targetTypeId}`
+                        : `child|${current.targetPlaceholder}`;
+                return (_jsxs("div", { className: "border-border-default grid grid-cols-[minmax(0,170px)_minmax(0,240px)_minmax(0,1fr)] items-start gap-3 border-t px-1 py-2.5", "data-testid": "convert-component-source", "data-role": current.role, children: [_jsxs("div", { className: "min-w-0 pt-1.5", children: [_jsx("div", { className: "truncate text-xs font-medium", children: role.name }), _jsx("div", { className: "text-muted-foreground truncate text-[11px]", children: role.typeName })] }), _jsx(Select, { size: "sm", maxWidth: "100%", value: value, "data-testid": "convert-component-source-role", options: options, onValueChange: (next) => {
+                                if (next === "merge") {
+                                    onChange(role.componentId, { role: "merge" });
+                                    return;
+                                }
+                                const [, placeholder, typeId] = next.split("|");
+                                onChange(role.componentId, {
+                                    role: "child",
+                                    targetPlaceholder: placeholder,
+                                    targetTypeId: typeId,
+                                    targetTypeName: typeId ? role.targetTypeName : undefined,
+                                    nested: typeId ? role.nested : undefined,
+                                });
+                            } }), _jsx("div", { className: "text-muted-foreground min-w-0 pt-1.5 text-xs", children: merged.has(normalizeId(role.componentId))
+                                ? "Its fields can feed the new component; it is removed afterwards."
+                                : "Placed inside the new component with its content." })] }, role.componentId));
+            })] }));
+}
+function LostList({ plan, item, lost, removedChildren, }) {
+    const entries = [
+        ...lost.map((field) => ({
+            key: `field:${field.key}`,
+            label: field.label,
+            detail: field.preview.text || (field.preview.imageUrl ? "Image" : undefined),
+        })),
+    ];
+    if (removedChildren.length > 0) {
+        entries.push({
+            key: "children",
+            label: `${removedChildren.length} child component${removedChildren.length === 1 ? "" : "s"} removed`,
+            detail: removedChildren.map((c) => c.name).join(", "),
+        });
+    }
+    if (item.droppedParameters.length > 0) {
+        entries.push({
+            key: "parameters",
+            label: "Rendering parameters",
+            detail: item.droppedParameters.join(", "),
+        });
+    }
+    if (item.personalizationRulesDropped > 0) {
+        entries.push({
+            key: "personalization",
+            label: "Personalization",
+            detail: `${item.personalizationRulesDropped} rule${item.personalizationRulesDropped === 1 ? "" : "s"} that change content${plan.mode === "merge" ? " (not carried over when merging)" : ""}`,
+        });
+    }
+    if (item.suggestedEdits > 0) {
+        entries.push({
+            key: "suggested-edits",
+            label: "Suggested edits",
+            detail: "Suggestions on fields that are not copied unchanged stay with the old component.",
+        });
+    }
+    if (entries.length === 0) {
+        return (_jsx("div", { className: "text-muted-foreground text-xs", "data-testid": "convert-component-lost-none", children: "Everything with content carries over." }));
+    }
+    return (_jsx("ul", { className: "space-y-1.5", children: entries.map((entry) => (_jsxs("li", { className: "flex items-start gap-2 text-xs", "data-testid": "convert-component-lost-entry", children: [_jsx(AlertTriangle, { className: "text-feedback-orange mt-0.5 h-3.5 w-3.5 shrink-0", strokeWidth: 1.5 }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "font-medium", children: entry.label }), entry.detail && (_jsxs("span", { className: "text-muted-foreground", children: [" \u00B7 ", entry.detail] }))] })] }, entry.key))) }));
+}
+//# sourceMappingURL=ConvertComponentDialog.js.map