slice-machine-ui 2.19.2-alpha.jp-figma-to-prismic.1 → 2.19.2-alpha.jp-figma-to-prismic.3

package/src/features/customTypes/customTypesBuilder/CreateSliceFromImageModal/CreateSliceFromImageModal.tsx

@@ -1,9 +1,6 @@
 import {
   BlankSlate,
-  BlankSlateActions,
-  BlankSlateDescription,
   BlankSlateIcon,
-  BlankSlateTitle,
   Box,
   Button,
   Dialog,
@@ -16,6 +13,7 @@ import {
   FileDropZone,
   FileUploadButton,
   ScrollArea,
+  Text,
 } from "@prismicio/editor-ui";
 import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
 import { useEffect, useRef, useState } from "react";
@@ -27,6 +25,7 @@ import { getState, telemetry } from "@/apiClient";
 import { addAiFeedback } from "@/features/aiFeedback";
 import { useOnboarding } from "@/features/onboarding/useOnboarding";
 import { useAutoSync } from "@/features/sync/AutoSyncProvider";
+import { FigmaIcon } from "@/icons/FigmaIcon";
 import { managerClient } from "@/managerClient";
 import useSliceMachineActions from "@/modules/useSliceMachineActions";
 
@@ -56,12 +55,12 @@ interface CreateSliceFromImageModalProps {
 export function CreateSliceFromImageModal(
   props: CreateSliceFromImageModalProps,
 ) {
-  const { open, location, onSuccess, onClose } = props;
+  const { open, location, onClose, onSuccess } = props;
   const [slices, setSlices] = useState<Slice[]>([]);
-  const [isCreatingSlices, setIsCreatingSlices] = useState(false);
   const { syncChanges } = useAutoSync();
   const { createSliceSuccess } = useSliceMachineActions();
   const { completeStep } = useOnboarding();
+  const existingSlices = useExistingSlices({ open });
 
   /**
    * Keeps track of the current instance id.
@@ -69,6 +68,21 @@ export function CreateSliceFromImageModal(
    */
   const id = useRef(crypto.randomUUID());
 
+  useHotkeys(
+    ["meta+v", "ctrl+v"],
+    (event) => {
+      event.preventDefault();
+      void handlePaste();
+    },
+    { enabled: open },
+  );
+
+  useEffect(() => {
+    if (slices.every((slice) => slice.status === "success")) {
+      void onAllComplete();
+    }
+  }, [slices]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const setSlice = (args: {
     index: number;
     slice: (prevSlice: Slice) => Slice;
@@ -78,7 +92,7 @@ export function CreateSliceFromImageModal(
   };
 
   const onOpenChange = (open: boolean) => {
-    if (open || isCreatingSlices) return;
+    if (open) return;
     onClose();
     id.current = crypto.randomUUID();
     setSlices([]);
@@ -92,17 +106,33 @@ export function CreateSliceFromImageModal(
       return;
     }
 
-    setSlices(
-      images.map((image) => ({
-        status: "uploading",
-        image,
-      })),
-    );
-
-    images.forEach((image, index) => uploadImage({ index, image }));
+    const startIndex = slices.length;
+    setSlices((prevSlices) => [
+      ...prevSlices,
+      ...images.map(
+        (image): Slice => ({
+          status: "uploading",
+          source: "upload",
+          image,
+        }),
+      ),
+    ]);
+
+    images.forEach((imageData, relativeIndex) => {
+      const index = startIndex + relativeIndex;
+      void uploadImage({ index, imageData, source: "upload" });
+    });
   };
 
   const handlePaste = async () => {
+    if (!open) return;
+
+    // Don't allow pasting while uploads or generation are in progress
+    const isLoading = slices.some(
+      (slice) => slice.status === "uploading" || slice.status === "generating",
+    );
+    if (isLoading) return;
+
     const supportsClipboardRead =
       typeof navigator.clipboard?.read === "function";
 
@@ -124,12 +154,9 @@ export function CreateSliceFromImageModal(
 
       // Method 1: Try to extract image from clipboard image/png blob (preferred)
       for (const item of clipboardItems) {
-        console.log("Clipboard item types:", item.types);
-
         const imageType = item.types.find((type) => type.startsWith("image/"));
         if (imageType !== undefined) {
           imageBlob = await item.getType(imageType);
-          console.log("Extracted image from clipboard image type:", imageType);
           break;
         }
       }
@@ -146,14 +173,11 @@ export function CreateSliceFromImageModal(
               success = true;
               const data = result.data;
               imageName = `${data.name}.png`;
-              console.log("Extracted name from text/plain JSON:", data);
 
               // Use base64 image as fallback if no blob was found
               if (!imageBlob) {
                 const response = await fetch(data.image);
                 imageBlob = await response.blob();
-                console.log("Extracted image from base64 fallback");
-                console.log("Image blob type:", imageBlob.type);
               }
             } else {
               console.warn("Clipboard data validation failed:", result.error);
@@ -168,11 +192,11 @@ export function CreateSliceFromImageModal(
       if (!imageBlob) {
         if (success) {
           toast.error(
-            "Figma data found but image could not be extracted. Please try copying again from Figma.",
+            "Could not extract Figma data from clipboard. Please try copying again using the Prismic Figma plugin.",
           );
         } else {
           toast.error(
-            "No Figma data found in clipboard. Make sure you've copied a frame from Figma using the Prismic plugin.",
+            "No Figma data found in clipboard. Make sure you've copied a design using the Prismic Figma plugin.",
           );
         }
         return;
@@ -188,20 +212,23 @@ export function CreateSliceFromImageModal(
       }
 
       // Create File object from blob and append to existing slices
-      const file = new File([imageBlob], imageName, { type: imageBlob.type });
+      const imageData = new File([imageBlob], imageName, {
+        type: imageBlob.type,
+      });
       const newIndex = currentSliceCount;
 
       // Append new slice to existing ones
       setSlices((prevSlices) => [
         ...prevSlices,
         {
+          source: "figma",
           status: "uploading",
-          image: file,
+          image: imageData,
         },
       ]);
 
       // Start uploading the new image
-      uploadImage({ index: newIndex, image: file });
+      void uploadImage({ index: newIndex, imageData, source: "figma" });
 
       toast.success(`Pasted ${imageName}${success ? " from Figma" : ""}`);
     } catch (error) {
@@ -212,18 +239,12 @@ export function CreateSliceFromImageModal(
     }
   };
 
-  // Enable paste with Cmd+V / Ctrl+V when modal is open
-  useHotkeys(
-    ["meta+v", "ctrl+v"],
-    (event) => {
-      event.preventDefault();
-      void handlePaste();
-    },
-    { enabled: open },
-  );
-
-  const uploadImage = (args: { index: number; image: File }) => {
-    const { index, image } = args;
+  const uploadImage = async (args: {
+    index: number;
+    imageData: File;
+    source: "figma" | "upload";
+  }) => {
+    const { index, imageData, source } = args;
     const currentId = id.current;
 
     setSlice({
@@ -231,32 +252,63 @@ export function CreateSliceFromImageModal(
       slice: (prevSlice) => ({
         ...prevSlice,
         status: "uploading",
+        image: imageData,
+        source,
       }),
     });
 
-    getImageUrl({ image }).then(
-      (imageUrl) => {
-        if (currentId !== id.current) return;
-        inferSlice({ index, imageUrl });
-      },
-      () => {
-        if (currentId !== id.current) return;
-        setSlice({
+    try {
+      const imageUrl = await getImageUrl({ image: imageData });
+      if (currentId !== id.current) return;
+
+      setSlice({
+        index,
+        slice: (prevSlice) => ({
+          ...prevSlice,
+          status: "pending",
+          thumbnailUrl: imageUrl,
+        }),
+      });
+    } catch {
+      if (currentId !== id.current) return;
+      setSlice({
+        index,
+        slice: (prevSlice) => ({
+          ...prevSlice,
+          status: "uploadError",
+          onRetry: () => void uploadImage({ index, imageData, source }),
+        }),
+      });
+    }
+  };
+
+  const generateAllPendingSlices = async () => {
+    const smConfig = await managerClient.project.getSliceMachineConfig();
+    const libraryID = smConfig?.libraries?.[0];
+    if (libraryID === undefined) {
+      throw new Error("No library found in the config.");
+    }
+
+    // Generate all pending slices simultaneously
+    slices.forEach((slice, index) => {
+      if (slice.status === "pending") {
+        void inferSlice({
           index,
-          slice: (prevSlice) => ({
-            ...prevSlice,
-            status: "uploadError",
-            onRetry: () => uploadImage({ index, image }),
-          }),
+          imageUrl: slice.thumbnailUrl,
+          libraryID,
+          source: slice.source,
         });
-      },
-    );
+      }
+    });
   };
 
-  const existingSlices = useExistingSlices({ open });
-
-  const inferSlice = (args: { index: number; imageUrl: string }) => {
-    const { index, imageUrl } = args;
+  const inferSlice = async (args: {
+    index: number;
+    imageUrl: string;
+    libraryID: string;
+    source: "figma" | "upload";
+  }) => {
+    const { index, imageUrl, libraryID, source } = args;
     const currentId = id.current;
 
     setSlice({
@@ -268,110 +320,190 @@ export function CreateSliceFromImageModal(
       }),
     });
 
-    managerClient.customTypes.inferSlice({ imageUrl }).then(
-      ({ slice, langSmithUrl }) => {
-        if (currentId !== id.current) return;
-
-        setSlices((prevSlices) =>
-          prevSlices.map((prevSlice, i) =>
-            i === index
-              ? {
-                  ...prevSlice,
-                  status: "success",
-                  thumbnailUrl: imageUrl,
-                  model: sliceWithoutConflicts({
-                    existingSlices: existingSlices.current,
-                    newSlices: prevSlices,
-                    slice,
-                  }),
-                  langSmithUrl,
-                }
-              : prevSlice,
-          ),
-        );
-      },
-      () => {
-        if (currentId !== id.current) return;
-        setSlice({
-          index,
-          slice: (prevSlice) => ({
+    try {
+      const inferResult = await managerClient.customTypes.inferSlice({
+        source,
+        libraryID,
+        imageUrl,
+      });
+
+      if (currentId !== id.current) return;
+
+      setSlices((prevSlices) => {
+        return prevSlices.map((prevSlice, i) => {
+          if (i !== index) return prevSlice;
+          return {
             ...prevSlice,
-            status: "generateError",
+            status: "success",
             thumbnailUrl: imageUrl,
-            onRetry: () => inferSlice({ index, imageUrl }),
-          }),
+            model: sliceWithoutConflicts({
+              existingSlices: existingSlices.current,
+              newSlices: slices,
+              slice: inferResult.slice,
+            }),
+          };
         });
+      });
+    } catch {
+      if (currentId !== id.current) return;
+      setSlice({
+        index,
+        slice: (prevSlice) => ({
+          ...prevSlice,
+          status: "generateError",
+          thumbnailUrl: imageUrl,
+          onRetry: () => {
+            void inferSlice({ index, imageUrl, libraryID, source });
+          },
+        }),
+      });
+    }
+  };
+
+  const onAllComplete = async () => {
+    const newSlices = slices.reduce<{ upload: NewSlice[]; figma: NewSlice[] }>(
+      (acc, slice) => {
+        if (slice.status === "success") {
+          if (slice.source === "upload") {
+            acc.upload.push(slice);
+          } else {
+            acc.figma.push(slice);
+          }
+        }
+        return acc;
       },
+      { upload: [], figma: [] },
     );
-  };
 
-  const onSubmit = () => {
-    const newSlices = slices.reduce<NewSlice[]>((acc, slice) => {
-      if (slice.status === "success") acc.push(slice);
-      return acc;
-    }, []);
-    if (!newSlices.length) return;
+    if (!newSlices.upload.length && !newSlices.figma.length) return;
 
     const currentId = id.current;
-    setIsCreatingSlices(true);
-    addSlices(newSlices)
-      .then(async ({ slices, library }) => {
-        if (currentId !== id.current) return;
-
-        const serverState = await getState();
-        createSliceSuccess(serverState.libraries);
-        syncChanges();
-
-        onSuccess({ slices, library });
-
-        setIsCreatingSlices(false);
-        id.current = crypto.randomUUID();
-        setSlices([]);
-
-        void completeStep("createSlice");
-
-        for (const { model, langSmithUrl } of slices) {
-          void telemetry.track({
-            event: "slice:created",
-            id: model.id,
-            name: model.name,
-            library,
-            location,
-            mode: "ai",
-            langSmithUrl,
-          });
-
-          addAiFeedback({
-            type: "model",
-            library,
-            sliceId: model.id,
-            variationId: model.variations[0].id,
-            langSmithUrl,
-          });
-        }
-      })
-      .catch(() => {
-        if (currentId !== id.current) return;
-        setIsCreatingSlices(false);
-        toast.error("An unexpected error happened while adding slices.");
-      });
+    try {
+      // Only the slices generated from uploaded images need this step
+      const { slices, library } = await addSlices(newSlices.upload);
+      if (currentId !== id.current) return;
+
+      const serverState = await getState();
+      createSliceSuccess(serverState.libraries);
+      syncChanges();
+
+      const total = newSlices.upload.length + newSlices.figma.length;
+      toast.success(
+        `${total} new slice${total > 1 ? "s" : ""} successfully generated.`,
+      );
+
+      onSuccess({ slices: [...newSlices.upload, ...newSlices.figma], library });
+      id.current = crypto.randomUUID();
+      setSlices([]);
+
+      void completeStep("createSlice");
+
+      for (const { model, langSmithUrl } of slices) {
+        void telemetry.track({
+          event: "slice:created",
+          id: model.id,
+          name: model.name,
+          library,
+          location,
+          mode: "ai",
+          langSmithUrl,
+        });
+
+        addAiFeedback({
+          type: "model",
+          library,
+          sliceId: model.id,
+          variationId: model.variations[0].id,
+          langSmithUrl,
+        });
+      }
+    } catch {
+      if (currentId !== id.current) return;
+      toast.error("An unexpected error happened while adding slices.");
+    }
   };
 
-  const areSlicesLoading = slices.some(
-    (slice) => slice.status === "uploading" || slice.status === "generating",
-  );
-  const readySlices = slices.filter((slice) => slice.status === "success");
-  const someSlicesReady = readySlices.length > 0;
+  const handleClose = () => {
+    id.current = crypto.randomUUID();
+    setSlices([]);
+    onClose();
+  };
+
+  const loadingSliceCount = slices.filter((slice) => {
+    return slice.status === "uploading" || slice.status === "generating";
+  }).length;
+
+  const pendingSliceCount = slices.filter((slice) => {
+    return slice.status === "pending";
+  }).length;
+
+  const hasTriggeredGeneration = slices.some((slice) => {
+    return slice.status === "generating" || slice.status === "success";
+  });
+
+  const generateSliceCount = loadingSliceCount + pendingSliceCount;
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogHeader title="Generate from image" />
+    <Dialog
+      open={open}
+      onOpenChange={loadingSliceCount > 0 ? undefined : onOpenChange}
+    >
+      <DialogHeader title="Generate with AI" />
       <DialogContent gap={0}>
         <DialogDescription hidden>
           Upload images to generate slices with AI
         </DialogDescription>
         {slices.length === 0 ? (
-          <Box padding={16} height="100%">
+          <Box
+            padding={16}
+            height="100%"
+            gap={16}
+            display="flex"
+            flexDirection="column"
+          >
+            <Box
+              display="flex"
+              gap={16}
+              alignItems="center"
+              backgroundColor="grey2"
+              padding={16}
+              borderRadius={12}
+            >
+              <Box display="flex" gap={8} alignItems="center" flexGrow={1}>
+                <Box
+                  width={48}
+                  height={48}
+                  backgroundColor="grey12"
+                  borderRadius="100%"
+                  display="flex"
+                  alignItems="center"
+                  justifyContent="center"
+                >
+                  <FigmaIcon variant="original" height={25} />
+                </Box>
+                <Box display="flex" flexDirection="column" flexGrow={1}>
+                  <Text variant="bold">Want to work faster?</Text>
+                  <Text variant="small" color="grey11">
+                    Copy frames from Figma with the Slice Machine plugin and
+                    paste them here.
+                  </Text>
+                </Box>
+              </Box>
+              <Button
+                endIcon="arrowForward"
+                color="indigo"
+                onClick={() =>
+                  window.open(
+                    "https://www.figma.com/community/plugin/TODO",
+                    "_blank",
+                  )
+                }
+                sx={{ marginRight: 8 }}
+                invisible
+              >
+                Install plugin
+              </Button>
+            </Box>
             <FileDropZone
               onFilesSelected={onImagesSelected}
               assetType="image"
@@ -391,28 +523,61 @@ export function CreateSliceFromImageModal(
             </FileDropZone>
           </Box>
         ) : (
-          <ScrollArea stableScrollbar={false}>
+          <>
             <Box
-              display="grid"
-              gridTemplateColumns="1fr 1fr"
-              gap={16}
+              display="flex"
+              alignItems="center"
+              justifyContent="space-between"
               padding={16}
             >
-              {slices.map((slice, index) => (
-                <SliceCard slice={slice} key={`slice-${index}`} />
-              ))}
+              <Text variant="h3">Design</Text>
+              <FileUploadButton
+                size="medium"
+                color="grey"
+                onFilesSelected={onImagesSelected}
+                startIcon="attachFile"
+                disabled={hasTriggeredGeneration}
+              >
+                Add images
+              </FileUploadButton>
             </Box>
-          </ScrollArea>
+            <ScrollArea stableScrollbar={false}>
+              <Box
+                display="grid"
+                gridTemplateColumns="1fr 1fr"
+                gap={16}
+                padding={16}
+              >
+                {slices.map((slice, index) => (
+                  <SliceCard slice={slice} key={`slice-${index}`} />
+                ))}
+              </Box>
+            </ScrollArea>
+          </>
         )}
 
         <DialogActions>
-          <DialogCancelButton disabled={isCreatingSlices} />
+          <DialogCancelButton
+            size="medium"
+            onClick={handleClose}
+            disabled={loadingSliceCount > 0}
+          >
+            Close
+          </DialogCancelButton>
           <DialogActionButton
-            disabled={!someSlicesReady || areSlicesLoading}
-            loading={isCreatingSlices}
-            onClick={onSubmit}
+            color="purple"
+            startIcon="autoFixHigh"
+            onClick={() => void generateAllPendingSlices()}
+            disabled={
+              hasTriggeredGeneration ||
+              loadingSliceCount > 0 ||
+              pendingSliceCount === 0
+            }
+            loading={hasTriggeredGeneration}
+            size="medium"
           >
-            {getSubmitButtonLabel(location)} ({readySlices.length})
+            Generate {generateSliceCount > 0 ? `(${generateSliceCount}) ` : ""}
+            {generateSliceCount === 1 ? "Slice" : "Slices"}
           </DialogActionButton>
         </DialogActions>
       </DialogContent>
@@ -436,38 +601,49 @@ function UploadBlankSlate(props: {
       border
       borderStyle="dashed"
       borderColor={droppingFiles ? "purple9" : "grey6"}
+      borderRadius={12}
+      flexGrow={1}
     >
       <BlankSlate>
-        <BlankSlateIcon
-          lineColor="purple11"
-          backgroundColor="purple5"
-          name="cloudUpload"
-          size="large"
-        />
-        <BlankSlateTitle>Upload your design images.</BlankSlateTitle>
-        <BlankSlateDescription>
-          Once uploaded, you can generate slices automatically using AI.
-        </BlankSlateDescription>
-        <BlankSlateActions>
-          <FileUploadButton
-            startIcon="attachFile"
-            onFilesSelected={onFilesSelected}
-            color="grey"
-          >
-            Add images
-          </FileUploadButton>
-        </BlankSlateActions>
-        <BlankSlateDescription>Or</BlankSlateDescription>
-        <BlankSlateActions>
-          <Button
-            size="small"
-            startIcon="contentPaste"
-            color="grey"
-            onClick={onPaste}
+        <Box display="flex" flexDirection="column" gap={16} alignItems="center">
+          <BlankSlateIcon
+            lineColor="purple11"
+            backgroundColor="purple5"
+            name="cloudUpload"
+            size="large"
+          />
+          <Box
+            display="flex"
+            flexDirection="column"
+            gap={4}
+            alignItems="center"
           >
-            Paste from Figma
-          </Button>
-        </BlankSlateActions>
+            <Text>Generate slices from your designs</Text>
+            <Text variant="small" color="grey11">
+              Upload your design images or paste them directly from Figma.
+            </Text>
+          </Box>
+          <Box display="flex" alignItems="center" gap={16}>
+            <Button
+              size="small"
+              renderStartIcon={() => (
+                <FigmaIcon variant="original" height={16} />
+              )}
+              color="grey"
+              onClick={onPaste}
+            >
+              Paste from Figma
+            </Button>
+            <FileUploadButton
+              size="small"
+              onFilesSelected={onFilesSelected}
+              color="purple"
+              invisible
+            >
+              Add images
+            </FileUploadButton>
+          </Box>
+        </Box>
       </BlankSlate>
     </Box>
   );
@@ -494,6 +670,7 @@ type NewSlice = {
   image: File;
   model: SharedSlice;
   langSmithUrl?: string;
+  source: "figma" | "upload";
 };
 
 /**
@@ -604,16 +781,3 @@ async function addSlices(newSlices: NewSlice[]) {
 
   return { library, slices };
 }
-
-const getSubmitButtonLabel = (
-  location: "custom_type" | "page_type" | "slices",
-) => {
-  switch (location) {
-    case "custom_type":
-      return "Add to type";
-    case "page_type":
-      return "Add to page";
-    case "slices":
-      return "Add to slices";
-  }
-};