@alpaca-editor/core 1.0.3906 → 1.0.3907

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

@@ -1,329 +0,0 @@
-import { useEffect, useState, useCallback } from "react";
-import { FullItem } from "../../editor/pageModel";
-import { WizardPageModel } 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 { WizardBox } from "../WizardBox";
-import { WizardBoxConnector } from "../WizardBoxConnector";
-import { Settings, FileText } from "lucide-react";
-import { StepComponentProps } from "../../config/types";
-import Generate from "./Generate";
-import { getChildren } from "../../editor/services/contentService";
-
-export function SetupPageStep({
-  wizard,
-  parentItem,
-  pageModel,
-  setPageModel,
-  step,
-  data,
-  setStepCompleted,
-}: StepComponentProps) {
-  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 [nameValidation, setNameValidation] = useState<{
-    isValid: boolean;
-    message?: string;
-  }>({ isValid: false });
-
-  const editContext = useEditContext();
-
-  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,
-  ]);
-
-  // Check page name whenever it changes
-  useEffect(() => {
-    if (pageModel.name) {
-      checkPageName();
-    }
-  }, [pageModel.name, checkPageName]);
-
-  // Mark step as completed when page name is valid
-  useEffect(() => {
-    if (nameValidation.isValid) {
-      setStepCompleted(true);
-    } else {
-      setStepCompleted(false);
-    }
-  }, [nameValidation.isValid, setStepCompleted]);
-
-  useEffect(() => {
-    if (!editContext) return;
-
-    if (editContext.mode !== "edit") {
-      editContext.setMode("edit");
-    }
-  }, [editContext]);
-
-  useEffect(() => {
-    if (!editContext) return;
-
-    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) generateNameAndMetaDescription();
-  }, []);
-
-  useEffect(() => {
-    const loadParentItem = async () => {
-      if (!parentItem) return;
-      const item = await editContext?.itemsRepository.getItem(parentItem);
-      setFullParentItem(item);
-    };
-    loadParentItem();
-  }, [parentItem]);
-
-  const handleInputChange = (field: keyof typeof pageModel, value: string) => {
-    const updatedPageModel = {
-      ...pageModel,
-      [field]: value,
-    };
-
-    setPageModel(updatedPageModel);
-  };
-
-  return (
-    <div className="flex h-full flex-col md:flex-row">
-      <WizardBox
-        title="Page Setup"
-        icon={<Settings />}
-        description="Configure the target location and language for your new page"
-        collapsible="mobileOnly"
-        defaultCollapsed="mobileOnly"
-        summary={
-          <div className="text-xs text-gray-500">
-            Folder: {fullParentItem?.path}, Language: {language}
-          </div>
-        }
-      >
-        <div className="flex flex-col items-stretch">
-          <div className="relative flex-1">
-            <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={isGenerating}
-                  onLanguageSelected={(language) =>
-                    setLanguage(language.languageCode)
-                  }
-                  showAllLanguages={true}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </WizardBox>
-      <WizardBoxConnector />
-      <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">
-            {isGenerating ? (
-              <div className="flex h-full items-center justify-center">
-                <Generate title="Generating page details..." />
-              </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={false}
-                    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">
-                  <label
-                    htmlFor="metaDescription"
-                    className="mb-1 block text-sm font-medium"
-                  >
-                    Meta Description
-                  </label>
-                  <InputTextarea
-                    id="metaDescription"
-                    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"
-                    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>
-      </WizardBox>
-    </div>
-  );
-}