@alpaca-editor/core 1.0.3902 → 1.0.3904

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

@@ -1,329 +0,0 @@
-import { useEffect, useState } from "react";
-import { ActionButton } from "../../components/ActionButton";
-import { useDebouncedCallback } from "use-debounce";
-import { FullItem, ItemDescriptor } from "../../editor/pageModel";
-import { getChildren } from "../../editor/services/contentService";
-import { Wizard, WizardData, WizardPageModel, WizardStep } from "../PageWizard";
-import { executePrompt } from "../../editor/services/aiService";
-import { createWizardAiContext } from "../service";
-import { useEditContext } from "../../editor/client/editContext";
-import { LanguageSelector } from "../../editor/menubar/LanguageSelector";
-import { InputText } from "primereact/inputtext";
-import { InputTextarea } from "primereact/inputtextarea";
-import { getItemDescriptor } from "../../editor/utils";
-import { WizardBox } from "../WizardBox";
-import { WizardBoxConnector } from "../WizardBoxConnector";
-import { Settings, FileText } from "lucide-react";
-
-export function CreatePage({
-  wizard,
-  parentItem,
-  setPageItem,
-  pageItem,
-  pageModel,
-  setPageModel,
-  step,
-  data,
-}: {
-  wizard: Wizard;
-  parentItem: ItemDescriptor;
-  setPageItem: (item: FullItem) => void;
-  pageItem?: FullItem;
-  pageModel: WizardPageModel;
-  setPageModel: (model: WizardPageModel) => void;
-  step: WizardStep;
-  data: WizardData;
-}) {
-  const [validationMessage, setValidationMessage] = useState<string>();
-  const [isBuilding, setIsBuilding] = useState(false);
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [language, setLanguage] = useState<string>(parentItem.language || "en");
-  const [previousLanguage, setPreviousLanguage] = useState<string>(language);
-  const [fullParentItem, setFullParentItem] = useState<FullItem>();
-  const editContext = useEditContext();
-
-  useEffect(() => {
-    if (!editContext) return;
-
-    if (editContext.mode !== "edit") {
-      editContext.setMode("edit");
-    }
-
-    const generateNameAndMetaDescription = async () => {
-      const metaInstructions =
-        step["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; metaDescription: string; metaKeywords: 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 },
-          "o3-mini-low",
-          (response) => {
-            try {
-              const newLayout = JSON.parse(response.content) as WizardPageModel;
-
-              setPageModel({
-                ...pageModel,
-                name: newLayout.name,
-                metaDescription: newLayout.metaDescription,
-                metaKeywords: newLayout.metaKeywords,
-              });
-            } catch (parseError: unknown) {}
-          },
-        );
-
-        const pageModel = JSON.parse(result.content) as WizardPageModel;
-        setPageModel({
-          ...pageModel,
-          name: pageModel.name,
-          metaDescription: pageModel.metaDescription,
-          metaKeywords: pageModel.metaKeywords,
-        });
-      } catch (error) {
-        console.error("Error generating name and meta description", error);
-      } finally {
-        setIsGenerating(false);
-      }
-    };
-
-    if (!pageModel.name || language !== previousLanguage) {
-      generateNameAndMetaDescription();
-      setPreviousLanguage(language);
-    }
-  }, [language, pageModel.name, previousLanguage, data, step, editContext]);
-
-  useEffect(() => {
-    const loadParentItem = async () => {
-      if (!parentItem) return;
-      const item = await editContext?.itemsRepository.getItem(parentItem);
-      setFullParentItem(item);
-    };
-    loadParentItem();
-  }, [parentItem]);
-
-  const checkName = async () => {
-    if (!parentItem) return;
-    let valid: boolean =
-      !!wizard.templateId && pageModel.name.trim().length >= 3;
-    if (valid) {
-      const children = await getChildren(
-        parentItem.id,
-        editContext?.sessionId ?? "",
-        [],
-        false,
-        editContext?.contentEditorItem?.language || "en",
-      );
-      if (
-        children.find(
-          (x) =>
-            x.name.toLocaleLowerCase() ===
-            pageModel.name.trim().toLocaleLowerCase(),
-        )
-      ) {
-        valid = false;
-        setValidationMessage("A page with this name already exists.");
-      }
-    } else {
-      if (pageModel.name.trim().length > 0 && pageModel.name.trim().length < 3)
-        setValidationMessage("Name is too short.");
-      else setValidationMessage(undefined);
-    }
-
-    if (valid) setValidationMessage(undefined);
-    return valid;
-  };
-
-  const checkNameValidDebounced = useDebouncedCallback(
-    async () => checkName(),
-    500,
-  );
-
-  useEffect(() => {
-    checkNameValidDebounced();
-  }, [pageModel.name]);
-
-  const createPage = () => {
-    setTimeout(async () => {
-      if (!editContext || !parentItem) return;
-      try {
-        if (!(await checkName())) return;
-        setIsBuilding(true);
-        const result = await editContext.operations.createItem(
-          { ...getItemDescriptor(parentItem), language },
-          wizard.templateId,
-          pageModel.name,
-        );
-        if (result) {
-          editContext?.loadItem(result, { addToBrowseHistory: true });
-          const item = await editContext?.itemsRepository.getItem(result);
-          if (item) setPageItem(item);
-          else console.error("Failed to load newly created item", result);
-
-          console.log("Page created", result, "Page model", pageModel);
-        }
-      } catch (error) {
-        console.error("Error creating page", error);
-      } finally {
-        setIsBuilding(false);
-      }
-    }, 1);
-  };
-
-  const handleInputChange = (field: keyof typeof pageModel, value: string) => {
-    const updatedPageModel = {
-      ...pageModel,
-      [field]: value,
-    };
-
-    setPageModel(updatedPageModel);
-  };
-
-  return (
-    <div className="flex h-full">
-      <WizardBox
-        title="Page Setup"
-        icon={<Settings />}
-        description="Configure the target location and language for your new page"
-        className="w-96"
-      >
-        <div className="flex h-full flex-col items-stretch">
-          <div className="relative flex-1">
-            <div className="absolute inset-0 overflow-y-auto pr-6">
-              <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">
-                  {fullParentItem?.path}
-                </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={isBuilding || isGenerating}
-                    onLanguageSelected={(language) =>
-                      setLanguage(language.languageCode)
-                    }
-                    showAllLanguages={true}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </WizardBox>
-      <WizardBoxConnector className="mt-6" />
-      <WizardBox
-        title="Page Details"
-        icon={<FileText />}
-        description="Define the page name and meta information for SEO optimization"
-        className="flex-1"
-      >
-        <div className="flex h-full flex-col items-stretch">
-          <div className="relative flex-1">
-            <div className="absolute inset-0 overflow-y-auto pr-6">
-              <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 || isBuilding || isGenerating}
-                  className="w-full rounded border p-2 text-sm"
-                  value={pageModel.name}
-                  onChange={(e) => handleInputChange("name", e.target.value)}
-                  placeholder="Enter page name"
-                />
-                {validationMessage && (
-                  <div className="mt-2 text-sm text-red-500">
-                    {validationMessage}
-                  </div>
-                )}
-              </div>
-
-              <div className="mb-4">
-                <label
-                  htmlFor="metaDescription"
-                  className="mb-1 block text-sm font-medium"
-                >
-                  Meta Description
-                </label>
-                <InputTextarea
-                  id="metaDescription"
-                  disabled={!!pageItem || isBuilding || isGenerating}
-                  className="min-h-[100px] w-full rounded border p-2 text-sm"
-                  value={pageModel.metaDescription}
-                  onChange={(e) =>
-                    handleInputChange("metaDescription", e.target.value)
-                  }
-                  placeholder="Enter meta description"
-                />
-              </div>
-              <div className="mb-4">
-                <label
-                  htmlFor="metaKeywords"
-                  className="mb-1 block text-sm font-medium"
-                >
-                  Meta Keywords
-                </label>
-                <InputTextarea
-                  id="metaKeywords"
-                  disabled={!!pageItem || isBuilding || isGenerating}
-                  className="min-h-[100px] w-full rounded border p-2 text-sm"
-                  value={pageModel.metaKeywords}
-                  onChange={(e) =>
-                    handleInputChange("metaKeywords", e.target.value)
-                  }
-                  placeholder="Enter meta keywords"
-                />
-              </div>
-            </div>
-          </div>
-          {!pageItem && (
-            <div className="py-2">
-              <ActionButton
-                disabled={isBuilding || isGenerating || !!validationMessage}
-                className="w-full"
-                onClick={() => {
-                  createPage();
-                }}
-                isLoading={isBuilding || isGenerating}
-                loadingText={isGenerating ? "Generating..." : "Create Page"}
-              >
-                Create Page
-              </ActionButton>
-            </div>
-          )}
-        </div>
-      </WizardBox>
-    </div>
-  );
-}