@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/page-wizard/steps/ContentStep.tsx

@@ -1,890 +0,0 @@
-import { StepComponentProps } from "../../config/types";
-
-import { useEffect, useState, useCallback, useRef } from "react";
-import { getChildren } from "../../editor/services/contentService";
-import { getItemDescriptor } from "../../editor/utils";
-import { PageViewer } from "../../editor/page-viewer/PageViewer";
-import {
-  useEditContext,
-  useEditContextRef,
-  useModifiedFieldsContext,
-} from "../../editor/client/editContext";
-import { ExecutionResult } from "../../editor/services/serviceHelper";
-
-import {
-  ComponentTypeSelector,
-  getComponentTypeSelectorSummary,
-} from "./ComponentTypesSelector";
-import { ActionButton } from "../../components/ActionButton";
-import { convertPageSchemaToWizardComponents } from "./schema";
-import { WizardPageModel } from "../PageWizard";
-import { createWizardAiContext, wipeComponents } from "../service";
-
-import { executePrompt } from "../../editor/services/aiService";
-import { usePageCreator } from "./usePageCreator";
-import { useThrottledCallback } from "use-debounce";
-import { InputTextarea } from "primereact/inputtextarea";
-import { InputText } from "primereact/inputtext";
-import { LanguageSelector } from "../../editor/menubar/LanguageSelector";
-
-import { convertToAiPageModel } from "../../editor/ai/aiPageModel";
-import { WizardBox } from "../WizardBox";
-import { Wand2, PanelsTopLeft, Settings, FileText } from "lucide-react";
-import { cn } from "../../lib/utils";
-import { WizardBoxConnector } from "../WizardBoxConnector";
-import { ItemDescriptor, FullItem } from "../../editor/pageModel";
-import Generate from "./Generate";
-
-export function ContentStep({
-  wizard,
-  step,
-  parentItem,
-  pageModel,
-  setPageModel,
-  data,
-  setData,
-  internalState,
-  setInternalState,
-  setStepCompleted,
-}: StepComponentProps) {
-  const [pageLoaded, setPageLoaded] = useState(false);
-  const pageLoadedRef = useRef(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [availableComponentTypes, setAvailableComponentTypes] = useState<
-    string[]
-  >([]);
-
-  const editContext = useEditContext();
-  const editContextRef = useEditContextRef();
-  const [abortController, setAbortController] = useState<AbortController>();
-  const [message, setMessage] = useState<string>();
-  const [isCreatingComponents, setIsCreatingComponents] = useState(false);
-  const [pageItem, setPageItem] = useState<ItemDescriptor>();
-
-  // New state for name and language functionality
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [language, setLanguage] = useState<string>(
-    parentItem?.language || "en",
-  );
-  const [fullParentItem, setFullParentItem] = useState<FullItem>();
-  const [nameValidation, setNameValidation] = useState<{
-    isValid: boolean;
-    message?: string;
-  }>({ isValid: false });
-
-  const modifiedFieldsContext = useModifiedFieldsContext();
-
-  const pageCreator = usePageCreator(pageItem, wizard, setPageModel);
-
-  if (!parentItem) return "No parent item";
-
-  const checkPageName = useCallback(async () => {
-    if (!parentItem) {
-      setNameValidation({ isValid: false, message: "No parent item" });
-      return false;
-    }
-
-    // Check if page name is valid
-    if (!pageModel.name || pageModel.name.trim().length < 3) {
-      setNameValidation({
-        isValid: false,
-        message: "Page name must be at least 3 characters long",
-      });
-      return false;
-    }
-
-    try {
-      // Check if page with same name already exists
-      const children = await getChildren(
-        parentItem.id,
-        editContext?.sessionId ?? "",
-        [],
-        false,
-        editContext?.contentEditorItem?.language || "en",
-      );
-
-      if (
-        children.find(
-          (x) =>
-            x.name.toLocaleLowerCase() ===
-            pageModel.name.trim().toLocaleLowerCase(),
-        )
-      ) {
-        setNameValidation({
-          isValid: false,
-          message: "A page with this name already exists",
-        });
-        return false;
-      }
-
-      setNameValidation({ isValid: true });
-      return true;
-    } catch (error) {
-      setNameValidation({
-        isValid: false,
-        message: "Error checking page name",
-      });
-      return false;
-    }
-  }, [
-    parentItem,
-    pageModel.name,
-    editContext?.sessionId,
-    editContext?.contentEditorItem?.language,
-  ]);
-
-  const handleInputChange = (field: keyof typeof pageModel, value: string) => {
-    const updatedPageModel = {
-      ...pageModel,
-      [field]: value,
-    };
-
-    setPageModel(updatedPageModel);
-  };
-
-  const createPageIfNeeded = useCallback(async (): Promise<boolean> => {
-    if (!editContext || !parentItem || pageItem) return true; // Page already exists
-
-    try {
-      if (!(await checkPageName())) {
-        console.error("Page name validation failed");
-        return false;
-      }
-
-      const result = await editContext.operations.createItem(
-        {
-          ...getItemDescriptor(parentItem),
-          language: parentItem.language || "en",
-        },
-        wizard.templateId,
-        pageModel.name,
-      );
-
-      if (result) {
-        editContext?.loadItem(result, { addToBrowseHistory: true });
-        const item = await editContext?.itemsRepository.getItem(result);
-        if (item && setPageItem) {
-          setPageItem(item);
-          return true;
-        } else {
-          console.error("Failed to load newly created item", result);
-          return false;
-        }
-      }
-      return false;
-    } catch (error) {
-      console.error("Error creating page", error);
-      return false;
-    }
-  }, [
-    editContext,
-    parentItem,
-    pageItem,
-    checkPageName,
-    wizard.templateId,
-    pageModel.name,
-    setPageItem,
-  ]);
-
-  useEffect(() => {
-    editContext?.setMode("edit");
-    if (!internalState.layoutInstructions) {
-      setInternalState({
-        ...internalState,
-        layoutInstructions: step.fields.instructions,
-      });
-    }
-
-    // Extract available component types from schema
-    if (wizard.schema) {
-      try {
-        const schema =
-          typeof wizard.schema === "string"
-            ? JSON.parse(wizard.schema)
-            : wizard.schema;
-
-        // Extract component types (reusing logic from ComponentTypeSelector)
-        const extractComponentTypes = (items: any): string[] => {
-          if (!items || !Array.isArray(items)) return [];
-          let types: string[] = [];
-          for (const item of items) {
-            if ("type" in item) {
-              types.push(item.type);
-            }
-            if ("placeholders" in item && Array.isArray(item.placeholders)) {
-              for (const placeholder of item.placeholders) {
-                if (
-                  placeholder.components &&
-                  Array.isArray(placeholder.components)
-                ) {
-                  types = [
-                    ...types,
-                    ...extractComponentTypes(placeholder.components),
-                  ];
-                }
-              }
-            }
-            if ("components" in item && Array.isArray(item.components)) {
-              types = [...types, ...extractComponentTypes(item.components)];
-            }
-          }
-          return types;
-        };
-
-        const componentTypes = extractComponentTypes(schema);
-        const uniqueTypes = Array.from(new Set(componentTypes)).sort();
-        setAvailableComponentTypes(uniqueTypes);
-
-        // Initialize selected component types if not already set
-        if (
-          !data.selectedComponentTypes ||
-          !Array.isArray(data.selectedComponentTypes)
-        ) {
-          // Parse preselected components from step if available
-          let stepPreselectedTypes: string[] = [];
-          if (step.fields["preselectedComponents"]) {
-            stepPreselectedTypes = step.fields["preselectedComponents"]
-              .split(/[,\n\r]+/)
-              .map((type: string) => type.trim())
-              .filter((type: string) => type && uniqueTypes.includes(type));
-          }
-
-          // Set initial selection
-          const initialSelection =
-            stepPreselectedTypes.length > 0
-              ? stepPreselectedTypes
-              : uniqueTypes;
-
-          setData({
-            ...data,
-            selectedComponentTypes: initialSelection,
-          });
-        }
-      } catch (error) {
-        console.error("Error extracting component types:", error);
-      }
-    }
-  }, []);
-
-  // Check page name whenever it changes
-  useEffect(() => {
-    if (pageModel.name && !pageItem) {
-      checkPageName();
-    }
-  }, [pageModel.name, checkPageName]);
-
-  // Load parent item details
-  useEffect(() => {
-    const loadParentItem = async () => {
-      if (!parentItem) return;
-      const item = await editContext?.itemsRepository.getItem(parentItem);
-      setFullParentItem(item);
-    };
-    loadParentItem();
-  }, [parentItem]);
-
-  // Auto-generate page name and meta description if not set
-  useEffect(() => {
-    if (!editContext) return;
-
-    const generatePageName = async () => {
-      const metaInstructions =
-        step.fields["Instructions for generating item name and meta fields"];
-
-      setIsGenerating(true);
-
-      try {
-        const abortController = new AbortController();
-
-        const result = await executePrompt(
-          [
-            {
-              content: `${metaInstructions?.trim()} Reply with a json object of type PageModel = { name: string; };               
-              The item name should be a valid sitecore item name. Spaces are allowed but no special characters or Umlaute.
-              The language of the page is ${language}.
-              Input data: ${JSON.stringify(data)}`,
-              name: "system",
-              role: "system",
-            },
-          ],
-          editContext,
-          createWizardAiContext,
-          {},
-          { signal: abortController.signal },
-          "gpt-4.1",
-          (response) => {
-            try {
-              const newLayout = JSON.parse(response.content) as WizardPageModel;
-
-              setPageModel({
-                ...pageModel,
-                name: newLayout.name,
-              });
-            } catch (parseError: unknown) {}
-          },
-        );
-
-        const pageModelResult = JSON.parse(result.content) as WizardPageModel;
-        setPageModel({
-          ...pageModel,
-          name: pageModelResult.name,
-        });
-      } catch (error) {
-        console.error("Error generating page name", error);
-      } finally {
-        setIsGenerating(false);
-      }
-    };
-
-    if (!pageModel.name) generatePageName();
-  }, []);
-
-  const createComponents = async () => {
-    if (!pageLoaded) return;
-    if (pageModel?.components && !isCreatingComponents) {
-      try {
-        setIsCreatingComponents(true);
-
-        await pageCreator.createComponentsRecursively(
-          pageModel.components,
-          "root",
-        );
-        setInternalState((prev: any) => ({
-          ...prev,
-          componentsCreated: true,
-        }));
-      } finally {
-        setIsCreatingComponents(false);
-      }
-    }
-  };
-
-  useEffect(() => {
-    if (
-      internalState.componentsCreated &&
-      !isCreatingComponents &&
-      !isLoading
-    ) {
-      editContext?.requestRefresh("immediate");
-    }
-  }, [isCreatingComponents, isLoading]);
-
-  const createComponentsThrottled = useThrottledCallback(createComponents, 300);
-
-  useEffect(() => {
-    createComponentsThrottled();
-  }, [pageModel]);
-
-  // useEffect(() => {
-  //   if (!pageItem) {
-  //     setPageItem(pageItem);
-  //   }
-  // }, [pageItem]);
-
-  useEffect(() => {
-    //console.log("$$$$ Active field actions: ", editContext?.activeFieldActions);
-    if (
-      editContext &&
-      editContext.activeFieldActions &&
-      !editContext.activeFieldActions.find((x) => x.state === "running")
-    ) {
-      console.log("$$$ Refreshing!");
-      editContext.requestRefresh("immediate");
-    }
-  }, [editContext?.activeFieldActions]);
-
-  useEffect(() => {
-    if (
-      editContext &&
-      editContext.page &&
-      editContext.page.item &&
-      pageItem &&
-      pageItem.id === editContext.page.item.descriptor.id
-    ) {
-      if (!pageLoaded) {
-        setTimeout(() => {
-          setPageLoaded(true);
-          pageLoadedRef.current = true;
-        }, 1000);
-      }
-    }
-  }, [editContext?.page, pageItem]);
-
-  const createLayout = async () => {
-    try {
-      if (!editContext) return;
-      setMessage("");
-      setIsLoading(true);
-      setStepCompleted(false);
-
-      // Create page if it doesn't exist yet
-      let currentPageItem = pageItem;
-      // Wait for pageLoaded to become true before continuing
-      const waitForPageLoaded = async (): Promise<boolean> => {
-        const maxWaitTime = 10000; // 10 seconds max wait
-        const pollInterval = 100; // Check every 100ms
-        let elapsed = 0;
-
-        while (elapsed < maxWaitTime) {
-          // Check if page is loaded using the ref which gets updated by the useEffect
-          if (pageLoadedRef.current) {
-            return true;
-          }
-
-          await new Promise((resolve) => setTimeout(resolve, pollInterval));
-          elapsed += pollInterval;
-        }
-
-        return false;
-      };
-
-      if (!currentPageItem) {
-        const pageCreated = await createPageIfNeeded();
-        if (!pageCreated) {
-          setMessage(
-            "Failed to create page. Please check the page name and try again.",
-          );
-          setIsLoading(false);
-          return;
-        }
-
-        const isPageLoaded = await waitForPageLoaded();
-        if (!isPageLoaded) {
-          setMessage("Page creation timed out. Please try again.");
-          setIsLoading(false);
-          return;
-        }
-      }
-
-      if (internalState.componentsCreated) {
-        console.log("Wiping components");
-        if (currentPageItem) {
-          const wipeResult: ExecutionResult<any> = await wipeComponents(
-            getItemDescriptor(currentPageItem),
-          );
-          if (wipeResult.type !== "success") {
-            console.error("Failed to wipe components:", wipeResult);
-            setMessage(
-              wipeResult.summary ||
-                "Failed to clear existing components. Please try again.",
-            );
-            setIsLoading(false);
-            return;
-          }
-        }
-        console.log("Wiping components 2");
-        editContextRef.current?.itemsRepository.clear();
-        modifiedFieldsContext?.clear();
-        setInternalState((prev: any) => ({
-          ...prev,
-          componentsCreated: false,
-        }));
-
-        setPageModel((prev) => ({
-          ...prev,
-          components: [],
-          message: "",
-        }));
-
-        pageLoadedRef.current = false;
-
-        console.log("Wiping components 3");
-        editContextRef.current?.requestRefresh("immediate");
-        await waitForPageLoaded();
-        console.log("Wiping components 4");
-      }
-
-      // Parse schema if it's a string
-      const schema =
-        typeof wizard.schema === "string"
-          ? JSON.parse(wizard.schema)
-          : wizard.schema;
-
-      // Filter the schema based on selected component types and placeholders
-      const filteredSchema = convertPageSchemaToWizardComponents(
-        schema,
-        data.selectedComponentTypes,
-      );
-
-      const localAbortController = new AbortController();
-      setAbortController(localAbortController);
-
-      // Get the existing page model
-      const existingPageModel = await convertToAiPageModel(
-        editContextRef.current?.page!,
-        editContextRef.current!,
-      );
-
-      console.log("Existing page model: ", existingPageModel);
-
-      const prompt = [
-        {
-          content: `${internalState.layoutInstructions ? internalState.layoutInstructions?.trim() : ""} Reply with a json object of type PageModel = { components: Component[]; message: string; }; 
-            Component = { id: string | undefined, name: string, type: string;  fields: Field[]; placeholder?: string; children?: Component[]; }; 
-            Field = {  name: string;  value: string;  type: string; };
-            Generate a descriptive name for each component including the topic.
-              Only use component types that are in the page schema.
-              Keep existing components with their ids. Leave id field empty for new components.
-            Existing page model: ${JSON.stringify(existingPageModel)}
-          Fill empty fields of existing components before you insert new components.
-            Component types: ${JSON.stringify(
-              filteredSchema,
-            )} Root level component types ${filteredSchema
-              .filter((c) => c.allowedOnRoot)
-              .map((c) => c.type)
-              .join(", ")}
-            Tell the user your reasoning in the message field.
-            If the user provided image ids, fill them into picture / image fields with an "id:" prefix. The image id needs to be guid. 
-            If you dont have a matching image id, provide a description of a picture that you would like to use with a "generate:" prefix instead.
-             In any case the field value must start with "id:" or "generate:", nothing else. Do not inject json into picture fields even if the existing value is json.
-            The language of the page is ${editContextRef.current!.page!.item!.language}.
-            Input data: ${JSON.stringify(data)}`,
-
-          name: "system",
-          role: "system",
-        },
-      ];
-
-      console.log("PAGE WIZARD PROMPT: ", prompt);
-
-      const result = await executePrompt(
-        prompt,
-        editContextRef.current!,
-        createWizardAiContext,
-        { allowedFunctions: [] },
-        { signal: localAbortController.signal },
-        step.fields.aiModel || "gpt-4.1",
-        (response) => {
-          try {
-            const newLayout = JSON.parse(response.content) as WizardPageModel;
-
-            if (newLayout) {
-              setPageModel((prev) => mergeLayout(prev, newLayout));
-            }
-
-            setMessage(newLayout.message);
-          } catch (parseError: unknown) {}
-        },
-      );
-
-      const pageModel = result;
-
-      const finalLayout = JSON.parse(pageModel.content);
-      console.log("RESULT LAYOUT: ", pageModel, finalLayout);
-      setPageModel((prev) => mergeLayout(prev, finalLayout));
-      setStepCompleted(true);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  // Custom instructions panel
-  const customInstructionsPanel = () => {
-    return (
-      <InputTextarea
-        value={internalState.layoutInstructions}
-        onChange={(e) =>
-          setInternalState({
-            ...internalState,
-            layoutInstructions: e.target.value,
-          })
-        }
-        placeholder="Example: Make it modern and minimalist. Focus on images. Include a hero section at the top."
-        className="h-48 w-full rounded border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
-      />
-    );
-  };
-
-  return (
-    <div className="flex h-full flex-col md:flex-row">
-      <div className="flex flex-col items-stretch overflow-y-auto md:h-full">
-        <WizardBox
-          title="Page Setup"
-          icon={<Settings />}
-          description="Configure the page name, target location and language for your new page"
-          collapsible="yes"
-          summary={
-            <div className="text-xs text-gray-500">
-              Folder: {fullParentItem?.path}, Language: {language}, Name:{" "}
-              {pageModel.name || "Not set"}
-            </div>
-          }
-          className="w-full md:w-96"
-        >
-          <div className="flex flex-col items-stretch">
-            <div className="relative flex-1">
-              {isGenerating ? (
-                <div className="flex h-full items-center justify-center">
-                  <Generate title="Generating page name..." />
-                </div>
-              ) : (
-                <>
-                  <div className="mb-4">
-                    <label
-                      htmlFor="pageName"
-                      className="mb-1 block text-sm font-medium"
-                    >
-                      Page Name
-                    </label>
-                    <InputText
-                      id="pageName"
-                      type="text"
-                      disabled={!!pageItem}
-                      className={`w-full rounded border p-2 text-sm ${
-                        !nameValidation.isValid
-                          ? "border-red-500"
-                          : nameValidation.isValid && pageModel.name
-                            ? "border-green-500"
-                            : ""
-                      }`}
-                      value={pageModel.name}
-                      onChange={(e) =>
-                        handleInputChange("name", e.target.value)
-                      }
-                      placeholder="Enter page name"
-                    />
-                    {nameValidation.message && !nameValidation.isValid && (
-                      <div className="mt-1 text-xs text-red-600">
-                        {nameValidation.message}
-                      </div>
-                    )}
-                    {nameValidation.isValid && pageModel.name && (
-                      <div className="mt-1 text-xs text-green-600">
-                        ✓ Page name is available
-                      </div>
-                    )}
-                  </div>
-
-                  <div className="mb-4">
-                    <div className="mb-1 text-sm font-medium">
-                      Target Parent Item
-                    </div>
-                    <div className="mb-4 break-after-all text-xs text-gray-600">
-                      {fullParentItem?.path || "Loading..."}
-                    </div>
-                  </div>
-
-                  <div className="relative mb-4">
-                    <label
-                      htmlFor="language"
-                      className="mb-1 block text-sm font-medium"
-                    >
-                      Language
-                    </label>
-                    <div className="w-fit">
-                      <LanguageSelector
-                        selectedLanguage={language}
-                        darkMode={true}
-                        disabled={isGenerating}
-                        onLanguageSelected={(language) =>
-                          setLanguage(language.languageCode)
-                        }
-                        showAllLanguages={true}
-                      />
-                    </div>
-                  </div>
-                </>
-              )}
-            </div>
-          </div>
-        </WizardBox>
-        <WizardBoxConnector direction="vertical" />
-        <WizardBox
-          title="Content modules"
-          icon={<Wand2 />}
-          description="Select the component types the AI can choose from"
-          className="w-full md:w-96"
-          collapsible="yes"
-          defaultCollapsed="yes"
-          summary=<div className="text-xs text-gray-500">
-            {getComponentTypeSelectorSummary(
-              data.selectedComponentTypes,
-              availableComponentTypes,
-            )}
-          </div>
-        >
-          <ComponentTypeSelector
-            selectedComponentTypes={data.selectedComponentTypes}
-            setSelectedComponentTypes={(selectedTypes) => {
-              setData({
-                ...data,
-                selectedComponentTypes: selectedTypes,
-              });
-            }}
-            schema={wizard.schema}
-            data={data}
-            setData={setData}
-            step={step}
-          />
-        </WizardBox>
-        <WizardBoxConnector direction="vertical" />
-        <WizardBox
-          title="Generate content"
-          icon={<Wand2 />}
-          collapsible="yes"
-          defaultCollapsed="mobileOnly"
-          description="Refine instructions and generate content"
-          className="w-full md:w-96"
-          footer={
-            <div>
-              <div className="flex w-full gap-2">
-                <ActionButton
-                  onClick={createLayout}
-                  disabled={
-                    isLoading ||
-                    isCreatingComponents ||
-                    !data.selectedComponentTypes ||
-                    data.selectedComponentTypes.length === 0 ||
-                    (!pageItem &&
-                      (!pageModel.name ||
-                        pageModel.name.trim().length < 3 ||
-                        !nameValidation.isValid))
-                  }
-                  isLoading={
-                    isLoading ||
-                    isCreatingComponents ||
-                    !!editContext?.activeFieldActions.find(
-                      (action) => action.state === "running",
-                    )
-                  }
-                  loadingText={"Working"}
-                  className="w-full flex-1"
-                >
-                  {!pageItem ? "Create page" : "Delete & Regenerate content"}
-                </ActionButton>
-
-                {isLoading && (
-                  <ActionButton
-                    isLoading={false}
-                    onClick={() => abortController?.abort("User aborted")}
-                  >
-                    Abort
-                  </ActionButton>
-                )}
-              </div>
-              {message && <div className="mt-2 text-xs">{message}</div>}
-            </div>
-          }
-        >
-          <div>{customInstructionsPanel()}</div>
-        </WizardBox>
-      </div>
-      {pageItem && (
-        <>
-          <WizardBoxConnector />
-          <WizardBox
-            title="Page preview"
-            icon={<PanelsTopLeft />}
-            description="After finalizing the page, you can edit, further enhance the content and share the page with your team for collaboration."
-            noPadding={true}
-            className="flex-1"
-            showFullscreenButton={true}
-          >
-            <div
-              className={cn(
-                "min-h-[300px] border-t border-gray-200",
-                pageLoaded ? "h-full" : "h-0",
-              )}
-            >
-              <PageViewer
-                name="single"
-                compareView={false}
-                showFormEditor={false}
-                followEditsDefault={true}
-                pageViewContext={editContext!.pageView}
-              />
-            </div>
-          </WizardBox>
-        </>
-      )}
-    </div>
-  );
-}
-
-/**
- * Merges a new layout with the previous layout
- * - Keeps all previous components
- * - Adds new components
- * - Updates existing fields with new values
- * - Adds new fields
- */
-const mergeLayout = (
-  prev: WizardPageModel | null,
-  newLayout: WizardPageModel,
-): WizardPageModel => {
-  if (!prev) return newLayout;
-
-  // Merge top-level properties
-  const result: WizardPageModel = {
-    name: newLayout.name || prev.name,
-    message: newLayout.message,
-    metaDescription: prev.metaDescription,
-    metaKeywords: prev.metaKeywords,
-    components: [...(prev.components || [])],
-  };
-
-  // Function to merge components recursively
-  const mergeComponents = (
-    existingComponents: any[],
-    newComponents: any[],
-  ): any[] => {
-    if (!newComponents?.length) return existingComponents;
-
-    const result = [...existingComponents];
-
-    for (const newComp of newComponents) {
-      // Try to find a matching component by type and name
-      const existingIndex = result.findIndex(
-        (comp) => comp.type === newComp.type && comp.name === newComp.name,
-      );
-
-      if (existingIndex >= 0) {
-        // Update existing component
-        const existing = result[existingIndex];
-
-        // Merge fields - update existing fields and add new ones
-        const mergedFields = [...(existing.fields || [])];
-        for (const newField of newComp.fields || []) {
-          const fieldIndex = mergedFields.findIndex(
-            (f) => f.name === newField.name,
-          );
-          if (fieldIndex >= 0) {
-            mergedFields[fieldIndex].value = newField.value; // Update existing field
-            mergedFields[fieldIndex].type = newField.type;
-          } else {
-            mergedFields.push(newField); // Add new field
-          }
-        }
-
-        // Recursive merge of children components
-        const mergedChildren = mergeComponents(
-          existing.children || [],
-          newComp.children || [],
-        );
-
-        // Create updated component
-        result[existingIndex] = {
-          ...existing,
-          fields: mergedFields,
-          children: mergedChildren,
-          placeholder: newComp.placeholder || existing.placeholder,
-        };
-      } else {
-        // Add new component
-        result.push(newComp);
-      }
-    }
-
-    return result;
-  };
-
-  // Merge components recursively
-  result.components = mergeComponents(
-    result.components,
-    newLayout.components || [],
-  );
-
-  return result;
-};