@alpaca-editor/core 1.0.3902 → 1.0.3904

package/src/page-wizard/WizardBoxConnector.tsx

@@ -1,21 +1,56 @@
 import { cn } from "../lib/utils";
 
-export function WizardBoxConnector({ className }: { className?: string }) {
+export function WizardBoxConnector({
+  className,
+  direction,
+}: {
+  className?: string;
+  direction?: "horizontal" | "vertical";
+}) {
   return (
-    <div className={cn("mr-[-3px] ml-[-3px]", className)}>
-      <svg
-        className={className}
-        width="31"
-        height="40"
-        viewBox="0 0 31 40"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
+    <>
+      <div
+        className={cn(
+          "mt-[-3px] mb-[-3px] flex items-center justify-center",
+          className,
+          (!direction || direction === "horizontal") && "md:hidden",
+        )}
       >
-        <path
-          d="M3.04199 0C3.55018 6.15949 8.70936 11 15 11C21.2906 11 26.4498 6.1595 26.958 0H31V40H27C27 33.3726 21.6274 28 15 28C8.37258 28 3 33.3726 3 40H0V0H3.04199Z"
-          fill="white"
-        />
-      </svg>
-    </div>
+        <svg
+          width="40"
+          height="31"
+          viewBox="0 0 40 31"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M40 3.04199C33.8405 3.55018 29 8.70936 29 15C29 21.2906 33.8405 26.4498 40 26.958L40 31L-1.35505e-06 31L-1.18021e-06 27C6.62741 27 12 21.6274 12 15C12 8.37258 6.62741 3 -1.31134e-07 3L0 -1.74846e-06L40 0L40 3.04199Z"
+            fill="white"
+          />
+        </svg>
+      </div>
+
+      <div
+        className={cn(
+          "mt-6 mr-[-3px] ml-[-3px] hidden",
+          className,
+          (!direction || direction === "horizontal") && "md:block",
+        )}
+      >
+        <svg
+          className={className}
+          width="31"
+          height="40"
+          viewBox="0 0 31 40"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M3.04199 0C3.55018 6.15949 8.70936 11 15 11C21.2906 11 26.4498 6.1595 26.958 0H31V40H27C27 33.3726 21.6274 28 15 28C8.37258 28 3 33.3726 3 40H0V0H3.04199Z"
+            fill="white"
+          />
+        </svg>
+      </div>
+    </>
   );
 }

package/src/page-wizard/WizardSteps.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React from "react";
 import { Wizard, WizardData, WizardPageModel } from "./PageWizard";
 
 import { ItemDescriptor } from "../editor/pageModel";
@@ -11,6 +11,7 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 
 import { Button } from "../components/ui/button";
 import { cn } from "../lib/utils";
+import { useRef, useEffect } from "react";
 
 interface WizardStepsProps {
   wizard: Wizard;
@@ -45,6 +46,7 @@ interface WizardHeaderProps {
   onNext: () => void;
   onFinish: () => void;
   stepCompleted: number;
+  isMobile: boolean;
 }
 
 interface WizardContentProps {
@@ -52,6 +54,15 @@ interface WizardContentProps {
   children: React.ReactNode;
 }
 
+interface MobileNavigationButtonsProps {
+  currentStepIndex: number;
+  wizard: Wizard;
+  stepCompleted: number;
+  onPrevious: () => void;
+  onNext: () => void;
+  onFinish: () => void;
+}
+
 function PreviousButton({
   currentStepIndex,
   wizard,
@@ -97,16 +108,32 @@ function NavigationSteps({
   currentStepIndex,
   onStepClick,
 }: NavigationStepsProps) {
+  const stepRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  useEffect(() => {
+    const activeStepElement = stepRefs.current[currentStepIndex];
+    if (activeStepElement) {
+      activeStepElement.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      });
+    }
+  }, [currentStepIndex]);
+
   return (
     <div className="min-w-0 flex-1">
-      <div className="scrollbar-hide overflow-x-auto scroll-smooth p-2.5 text-xs">
-        <div className="flex min-w-max items-center gap-3 md:justify-center">
+      <div className="p-2.5 text-xs">
+        <div className="flex items-center gap-3 md:justify-center">
           {wizard.steps.map((step, index) => (
             <>
               <div
                 key={step.id}
+                ref={(el) => {
+                  stepRefs.current[index] = el;
+                }}
                 className={classNames(
-                  "flex min-w-max flex-col items-center gap-1 px-1",
+                  "flex shrink-0 flex-col items-center gap-1 px-1",
                   currentStepIndex > index && "cursor-pointer",
                 )}
                 onClick={() =>
@@ -131,7 +158,7 @@ function NavigationSteps({
                     currentStepIndex === index
                       ? "text-theme-secondary font-semibold"
                       : currentStepIndex >= index
-                        ? "text-gray-600"
+                        ? "text-theme-secondary"
                         : "text-gray-400",
                   )}
                 >
@@ -140,7 +167,14 @@ function NavigationSteps({
               </div>
 
               {index < wizard.steps.length - 1 && (
-                <div className="border-theme-secondary mt-[-20px] h-0 w-4 shrink-0 border-t-2 bg-gray-300 md:w-8" />
+                <div
+                  className={cn(
+                    index < currentStepIndex
+                      ? "border-theme-secondary"
+                      : "border-gray-400",
+                    "mt-[-20px] h-0 w-4 shrink-0 border-t-2 bg-gray-300 md:w-8",
+                  )}
+                />
               )}
             </>
           ))}
@@ -158,14 +192,19 @@ function WizardHeader({
   onNext,
   onFinish,
   stepCompleted,
+  isMobile,
 }: WizardHeaderProps) {
   return (
-    <div className="flex items-center gap-3 border-b border-gray-300 bg-white md:pr-8">
-      <PreviousButton
-        currentStepIndex={currentStepIndex}
-        wizard={wizard}
-        onPrevious={onPrevious}
-      />
+    <div className="scrollbar-hide flex w-[100vw] items-center gap-3 overflow-x-auto scroll-smooth border-b border-gray-300 bg-white md:w-auto md:px-4">
+      {!isMobile && (
+        <div className="shrink-0">
+          <PreviousButton
+            currentStepIndex={currentStepIndex}
+            wizard={wizard}
+            onPrevious={onPrevious}
+          />
+        </div>
+      )}
 
       <NavigationSteps
         wizard={wizard}
@@ -173,26 +212,28 @@ function WizardHeader({
         onStepClick={onStepClick}
       />
 
-      <div>
-        <NextButton
-          currentStepIndex={currentStepIndex}
-          wizard={wizard}
-          stepCompleted={stepCompleted}
-          onNext={onNext}
-          onFinish={onFinish}
-        />
-      </div>
+      {!isMobile && (
+        <div className="shrink-0">
+          <NextButton
+            currentStepIndex={currentStepIndex}
+            wizard={wizard}
+            stepCompleted={stepCompleted}
+            onNext={onNext}
+            onFinish={onFinish}
+          />
+        </div>
+      )}
     </div>
   );
 }
 
 function WizardContent({ currentStep, children }: WizardContentProps) {
   return (
-    <div className="relative flex-1 bg-neutral-100">
-      <div className="h-full p-8">
+    <div className="relative h-full flex-1 bg-neutral-100">
+      <div className="h-full p-4 md:p-8">
         <div className="relative z-10 h-full">
-          <div className="flex h-full flex-col">
-            <div className="mb-5 flex gap-4 md:mb-10">
+          <div className="flex h-full flex-col gap-6 md:gap-10">
+            <div className="flex gap-4">
               <Logo className="h-8 w-8" />
               <div className="flex-1 text-neutral-800">
                 <div className="text-lg font-semibold md:text-xl">
@@ -205,7 +246,9 @@ function WizardContent({ currentStep, children }: WizardContentProps) {
                 )}
               </div>
             </div>
-            <div className="relative flex-1">{children}</div>
+            <div className="relative flex-1">
+              <div className="absolute inset-0 overflow-auto">{children}</div>
+            </div>
           </div>
         </div>
         <div className="bg-wizard absolute inset-0" />
@@ -214,19 +257,84 @@ function WizardContent({ currentStep, children }: WizardContentProps) {
   );
 }
 
+function MobileNavigationButtons({
+  currentStepIndex,
+  wizard,
+  stepCompleted,
+  onPrevious,
+  onNext,
+  onFinish,
+}: MobileNavigationButtonsProps) {
+  const isLastStep = currentStepIndex === wizard.steps.length - 1;
+  const isNextDisabled = stepCompleted < currentStepIndex;
+  const showPrevious = currentStepIndex > 0;
+
+  return (
+    <div className="srcollbar-hide w-[100vw] overflow-x-auto border-t border-gray-300 bg-white px-4 py-3">
+      <div className="flex gap-3">
+        {showPrevious && (
+          <Button onClick={onPrevious} variant="outline" className="flex-1">
+            <ChevronLeft className="h-4 w-4" />
+            {wizard.steps[currentStepIndex - 1]?.name}
+          </Button>
+        )}
+
+        {isLastStep ? (
+          <Button
+            disabled={isNextDisabled}
+            onClick={onFinish}
+            className={cn("flex-1", !showPrevious && "w-full")}
+          >
+            Finish
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        ) : (
+          <Button
+            disabled={isNextDisabled}
+            onClick={onNext}
+            className={cn("flex-1", !showPrevious && "w-full")}
+          >
+            {wizard.steps[currentStepIndex + 1]?.name}
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
 export function WizardSteps({ wizard, parentItem }: WizardStepsProps) {
-  const [currentStepIndex, setCurrentStepIndex] = useState(0);
-  const [data, setData] = useState<WizardData>({});
-  const [pageModel, setPageModel] = useState<WizardPageModel>({
+  const editContext = useEditContext();
+  const pageWizard = editContext?.pageWizard;
+
+  // Use state from pageWizard context instead of local state
+  const currentStepIndex = pageWizard?.currentStepIndex ?? 0;
+  const setCurrentStepIndex = pageWizard?.setCurrentStepIndex ?? (() => {});
+  const data = pageWizard?.data ?? {};
+  const setData = pageWizard?.setData ?? (() => {});
+  const pageModel = pageWizard?.pageModel ?? {
     components: [],
     name: "",
     metaDescription: "",
     metaKeywords: "",
-  });
+  };
+  const setPageModel = pageWizard?.setPageModel ?? (() => {});
+  const internalState = pageWizard?.internalState ?? {};
+  const setInternalState = pageWizard?.setInternalState ?? (() => {});
+  const stepCompleted = pageWizard?.stepCompleted ?? -1;
+  const setStepCompleted = pageWizard?.setStepCompleted ?? (() => {});
+
+  const beforeNextCallbackRef = pageWizard?.beforeNextCallbackRef ?? {
+    current: null,
+  };
 
-  const editContext = useEditContext();
-  const [internalState, setInternalState] = useState<any>({});
-  const [stepCompleted, setStepCompleted] = useState(-1);
+  const isMobile = editContext?.isMobile ?? false;
+
+  const setBeforeNextCallback = (callback: (() => Promise<boolean>) | null) => {
+    if (beforeNextCallbackRef) {
+      beforeNextCallbackRef.current = callback;
+    }
+  };
 
   const getCurrentStep = () => {
     const step = wizard.steps[currentStepIndex];
@@ -262,6 +370,7 @@ export function WizardSteps({ wizard, parentItem }: WizardStepsProps) {
               setStepCompleted(currentStepIndex - 1);
             }
           }}
+          setBeforeNextCallback={setBeforeNextCallback}
           internalState={internalState}
           setInternalState={setInternalState}
           parentItem={parentItem}
@@ -276,6 +385,7 @@ export function WizardSteps({ wizard, parentItem }: WizardStepsProps) {
     document.startViewTransition(() => {
       flushSync(() => {
         setCurrentStepIndex(index);
+        beforeNextCallbackRef.current = null; // Clear callback when switching steps
       });
     });
   };
@@ -284,7 +394,15 @@ export function WizardSteps({ wizard, parentItem }: WizardStepsProps) {
     switchStep(currentStepIndex - 1);
   };
 
-  const handleNext = () => {
+  const handleNext = async () => {
+    // If there's a beforeNext callback, execute it first
+    if (beforeNextCallbackRef.current) {
+      console.log("Calling beforeNext callback");
+      const canProceed = await beforeNextCallbackRef.current();
+      if (!canProceed) {
+        return; // Don't proceed if callback returns false
+      }
+    }
     switchStep(currentStepIndex + 1);
   };
 
@@ -306,11 +424,22 @@ export function WizardSteps({ wizard, parentItem }: WizardStepsProps) {
         onNext={handleNext}
         onFinish={handleFinish}
         stepCompleted={stepCompleted}
+        isMobile={isMobile}
       />
 
       <WizardContent currentStep={currentStep}>
         {getCurrentStep()}
       </WizardContent>
+      {isMobile && (
+        <MobileNavigationButtons
+          currentStepIndex={currentStepIndex}
+          wizard={wizard}
+          stepCompleted={stepCompleted}
+          onPrevious={handlePrevious}
+          onNext={handleNext}
+          onFinish={handleFinish}
+        />
+      )}
     </div>
   );
 }

package/src/page-wizard/service.ts

@@ -5,7 +5,7 @@ import { post } from "../editor/services/serviceHelper";
 import { Wizard } from "./PageWizard";
 
 export async function getWizards(
-  parentItem: ItemDescriptor
+  parentItem: ItemDescriptor,
 ): Promise<Wizard[]> {
   const result = await post("/alpaca/editor/page-wizard/wizards", parentItem);
   return result.data as Wizard[] | [];
@@ -31,5 +31,5 @@ export function createWizardAiContext({
 
 export async function wipeComponents(pageItem: ItemDescriptor) {
   const result = await post("/alpaca/editor/page-wizard/wipePage", pageItem);
-  return result.data;
+  return result;
 }

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

@@ -122,23 +122,86 @@ export function CollectStep({
     }
   };
 
-  const uploadPanel: SplitterPanel = {
-    name: "upload",
-    defaultSize: 300,
-    collapsible: false,
-    content: (
-      <div className="6 flex flex-col items-stretch gap-6 p-2">
-        <div className="flex flex-col gap-2">
-          <div className="text-sm font-semibold text-gray-700">
-            Upload a file
+  return (
+    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+      <Card
+        icon={<UploadIcon className="text-theme-secondary" />}
+        title="Upload a file  (optional)"
+        collapsible="mobileOnly"
+        defaultCollapsed="mobileOnly"
+        description="Upload a file to the page"
+      >
+        {error && <div className="mt-2 text-sm text-red-500">{error}</div>}
+        <div
+          className={`flex flex-col items-center justify-center border border-dashed border-gray-300 p-8 ${
+            isUploading ? "bg-gray-200" : "bg-white"
+          }`}
+          onDrop={handleDrop}
+          onDragOver={(e) => e.preventDefault()}
+        >
+          <div className="flex flex-col items-center justify-center gap-1 text-center text-sm">
+            {!isUploading && (
+              <svg
+                width="49"
+                height="48"
+                viewBox="0 0 49 48"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect
+                  x="0.666992"
+                  width="48"
+                  height="48"
+                  rx="24"
+                  fill="#F6EEFF"
+                />
+                <path
+                  d="M32.604 20.68C32.594 20.648 32.583 20.6167 32.571 20.586C32.5235 20.4775 32.4572 20.3783 32.375 20.293L26.375 14.293C26.2897 14.2108 26.1905 14.1445 26.082 14.097C26.052 14.083 26.02 14.075 25.988 14.064C25.9043 14.0356 25.8172 14.0185 25.729 14.013C25.707 14.011 25.688 14 25.667 14H18.667C17.564 14 16.667 14.897 16.667 16V32C16.667 33.103 17.564 34 18.667 34H30.667C31.77 34 32.667 33.103 32.667 32V21C32.667 20.979 32.656 20.96 32.654 20.938C32.6487 20.8502 32.6319 20.7634 32.604 20.68ZM29.253 20H26.667V17.414L29.253 20ZM18.667 32V16H24.667V21C24.667 21.2652 24.7723 21.5196 24.9599 21.7071C25.1474 21.8946 25.4018 22 25.667 22H30.667L30.669 32H18.667Z"
+                  fill="#9650FB"
+                />
+              </svg>
+            )}
+            {isUploading && <Spinner />}
+            <input
+              ref={fileInputRef}
+              type="file"
+              multiple
+              accept=".pdf,.doc,.docx"
+              style={{ display: "none" }}
+              onChange={(e) => {
+                const file = e.target.files?.[0];
+                if (file) {
+                  uploadFile(file);
+                }
+              }}
+              onDrop={handleDrop}
+              disabled={isUploading}
+            />
+            <div className="flex items-center gap-1">
+              <span
+                className={`text-sm font-medium ${
+                  isUploading
+                    ? "text-gray-500"
+                    : "text-theme-secondary cursor-pointer underline"
+                } `}
+                onClick={triggerFileInput}
+              >
+                Click
+              </span>
+              or drag & drop to upload
+            </div>
           </div>
         </div>
-
-        {error && <div className="mt-2 text-sm text-red-500">{error}</div>}
-
+      </Card>
+      <Card
+        icon={<LinkIcon className="text-theme-secondary" />}
+        title="Scrape page from URL (optional)"
+        description="Upload a file to the page"
+        collapsible="mobileOnly"
+        defaultCollapsed="mobileOnly"
+      >
         <div className="flex flex-col gap-2">
           <div className="text-sm font-semibold text-gray-700">
-            Scrape page from URL
             <div className="text-xs font-normal text-gray-500">
               Only scrape websites you have permission to access. You are
               responsible for complying with the website's terms of service and
@@ -164,134 +227,25 @@ export function CollectStep({
             </ActionButton>
           </div>
         </div>
-      </div>
-    ),
-  };
-
-  return (
-    <div className="absolute inset-0 overflow-auto">
-      <div className="grid grid-cols-2 gap-4">
-        <Card
-          icon={<UploadIcon className="text-theme-secondary" />}
-          title="Upload a file  (optional)"
-          description="Upload a file to the page"
-          className="flex-1"
-        >
-          {error && <div className="mt-2 text-sm text-red-500">{error}</div>}
-          <div
-            className={`flex flex-col items-center justify-center border border-dashed border-gray-300 p-8 ${
-              isUploading ? "bg-gray-200" : "bg-white"
-            }`}
-            onDrop={handleDrop}
-            onDragOver={(e) => e.preventDefault()}
-          >
-            <div className="flex flex-col items-center justify-center gap-1 text-center text-sm">
-              {!isUploading && (
-                <svg
-                  width="49"
-                  height="48"
-                  viewBox="0 0 49 48"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <rect
-                    x="0.666992"
-                    width="48"
-                    height="48"
-                    rx="24"
-                    fill="#F6EEFF"
-                  />
-                  <path
-                    d="M32.604 20.68C32.594 20.648 32.583 20.6167 32.571 20.586C32.5235 20.4775 32.4572 20.3783 32.375 20.293L26.375 14.293C26.2897 14.2108 26.1905 14.1445 26.082 14.097C26.052 14.083 26.02 14.075 25.988 14.064C25.9043 14.0356 25.8172 14.0185 25.729 14.013C25.707 14.011 25.688 14 25.667 14H18.667C17.564 14 16.667 14.897 16.667 16V32C16.667 33.103 17.564 34 18.667 34H30.667C31.77 34 32.667 33.103 32.667 32V21C32.667 20.979 32.656 20.96 32.654 20.938C32.6487 20.8502 32.6319 20.7634 32.604 20.68ZM29.253 20H26.667V17.414L29.253 20ZM18.667 32V16H24.667V21C24.667 21.2652 24.7723 21.5196 24.9599 21.7071C25.1474 21.8946 25.4018 22 25.667 22H30.667L30.669 32H18.667Z"
-                    fill="#9650FB"
-                  />
-                </svg>
-              )}
-              {isUploading && <Spinner />}
-              <input
-                ref={fileInputRef}
-                type="file"
-                multiple
-                accept=".pdf,.doc,.docx"
-                style={{ display: "none" }}
-                onChange={(e) => {
-                  const file = e.target.files?.[0];
-                  if (file) {
-                    uploadFile(file);
-                  }
-                }}
-                onDrop={handleDrop}
-                disabled={isUploading}
-              />
-              <div className="flex items-center gap-1">
-                <span
-                  className={`text-sm font-medium ${
-                    isUploading
-                      ? "text-gray-500"
-                      : "text-theme-secondary cursor-pointer underline"
-                  } `}
-                  onClick={triggerFileInput}
-                >
-                  Click
-                </span>
-                or drag & drop to upload
-              </div>
-            </div>
-          </div>
-        </Card>
-        <Card
-          icon={<LinkIcon className="text-theme-secondary" />}
-          title="Scrape page from URL (optional)"
-          description="Upload a file to the page"
-          className="flex-1"
-        >
-          <div className="flex flex-col gap-2">
-            <div className="text-sm font-semibold text-gray-700">
-              <div className="text-xs font-normal text-gray-500">
-                Only scrape websites you have permission to access. You are
-                responsible for complying with the website's terms of service
-                and all applicable laws.
-              </div>
-            </div>
-            <InputText
-              type="text"
-              className="rounded-md border border-gray-300 px-3 py-2"
-              onChange={(e) => setScrapeUrl(e.target.value)}
-            />
-            {scrapeError && (
-              <div className="mt-2 text-sm text-red-500">{scrapeError}</div>
-            )}
-            <div className="flex gap-2">
-              <ActionButton
-                type="submit"
-                isLoading={isScraping}
-                onClick={handleScrape}
-                loadingText="Scraping..."
-              >
-                Scrape
-              </ActionButton>
-            </div>
-          </div>
-        </Card>
-        <Card
-          icon={<DocumentIcon className="text-theme-secondary" />}
-          title="Text"
-          description="Provide the text you want to use for the page"
-          className="col-span-2"
-        >
-          <InputTextarea
-            className="max-h-full w-full"
-            value={data.htmlContent}
-            rows={20}
-            onChange={(e) =>
-              setData((prev: WizardData) => ({
-                ...prev,
-                htmlContent: e.target.value || "",
-              }))
-            }
-          />
-        </Card>
-      </div>
+      </Card>
+      <Card
+        icon={<DocumentIcon className="text-theme-secondary" />}
+        title="Text"
+        description="Provide the text you want to use for the page"
+        className="md:col-span-2"
+      >
+        <InputTextarea
+          className="max-h-full w-full"
+          value={data.htmlContent}
+          rows={20}
+          onChange={(e) =>
+            setData((prev: WizardData) => ({
+              ...prev,
+              htmlContent: e.target.value || "",
+            }))
+          }
+        />
+      </Card>
     </div>
   );
 }