@alpaca-editor/core 1.0.3942 → 1.0.3943

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

@@ -0,0 +1,890 @@
+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;
+};