slice-machine-ui 2.19.2-alpha.jp-figma-to-prismic.6 → 2.19.2-alpha.jp-figma-to-slice-1.1

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

@@ -1,8 +1,10 @@
 import {
   BlankSlate,
+  BlankSlateActions,
+  BlankSlateDescription,
   BlankSlateIcon,
+  BlankSlateTitle,
   Box,
-  Button,
   Dialog,
   DialogActionButton,
   DialogActions,
@@ -12,9 +14,7 @@ import {
   DialogHeader,
   FileDropZone,
   FileUploadButton,
-  ProgressCircle,
   ScrollArea,
-  Text,
 } from "@prismicio/editor-ui";
 import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
 import { useEffect, useRef, useState } from "react";
@@ -27,45 +27,48 @@ import { addAiFeedback } from "@/features/aiFeedback";
 import { useOnboarding } from "@/features/onboarding/useOnboarding";
 import { useAutoSync } from "@/features/sync/AutoSyncProvider";
 import { useExperimentVariant } from "@/hooks/useExperimentVariant";
-import { FigmaIcon } from "@/icons/FigmaIcon";
 import { managerClient } from "@/managerClient";
 import useSliceMachineActions from "@/modules/useSliceMachineActions";
 
 import { Slice, SliceCard } from "./SliceCard";
 
-const clipboardDataSchema = z.object({
-  __type: z.literal("figma-to-prismic/clipboard-data"),
-  name: z.string(),
-  image: z.string().startsWith("data:image/"),
-});
-
 const IMAGE_UPLOAD_LIMIT = 10;
 
 interface CreateSliceFromImageModalProps {
   open: boolean;
   location: "custom_type" | "page_type" | "slices";
-  onSuccess: (args: { slices: SharedSlice[]; library: string }) => void;
+  onSuccess: (args: {
+    slices: {
+      model: SharedSlice;
+      langSmithUrl?: string;
+    }[];
+    library: string;
+  }) => void;
   onClose: () => void;
 }
 
+const clipboardDataSchema = z.object({
+  __type: z.literal("figma-to-prismic/clipboard-data"),
+  name: z.string(),
+  image: z.string().startsWith("data:image/"),
+});
+
 export function CreateSliceFromImageModal(
   props: CreateSliceFromImageModalProps,
 ) {
-  const { open, location, onClose, onSuccess } = props;
+  const { open, location, onSuccess, onClose } = props;
   const [slices, setSlices] = useState<Slice[]>([]);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
+  const [isCreatingSlices, setIsCreatingSlices] = useState(false);
   const { syncChanges } = useAutoSync();
   const { createSliceSuccess } = useSliceMachineActions();
   const { completeStep } = useOnboarding();
-  const existingSlices = useExistingSlices({ open });
-  const { libraryID, isLoading: isLoadingLibraryID } = useLibraryID();
+  const isFigmaEnabled = useIsFigmaEnabled();
+
   /**
    * Keeps track of the current instance id.
    * When the modal is closed, the id is reset.
    */
   const id = useRef(crypto.randomUUID());
-  const isFigmaEnabled = useIsFigmaEnabled();
 
   useHotkeys(
     ["meta+v", "ctrl+v"],
@@ -76,10 +79,6 @@ export function CreateSliceFromImageModal(
     { enabled: open && isFigmaEnabled },
   );
 
-  useEffect(() => {
-    return () => void cancelActiveRequests();
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
   const setSlice = (args: {
     index: number;
     slice: (prevSlice: Slice) => Slice;
@@ -88,9 +87,14 @@ export function CreateSliceFromImageModal(
     setSlices((slices) => slices.map((s, i) => (i === index ? slice(s) : s)));
   };
 
-  const onImagesSelected = (images: File[]) => {
-    if (hasTriggeredGeneration) return;
+  const onOpenChange = (open: boolean) => {
+    if (open || isCreatingSlices) return;
+    onClose();
+    id.current = crypto.randomUUID();
+    setSlices([]);
+  };
 
+  const onImagesSelected = (images: File[]) => {
     if (images.length > IMAGE_UPLOAD_LIMIT) {
       toast.error(
         `You can only upload ${IMAGE_UPLOAD_LIMIT} images at a time.`,
@@ -98,22 +102,169 @@ export function CreateSliceFromImageModal(
       return;
     }
 
-    const startIndex = slices.length;
-    setSlices((prevSlices) => [
-      ...prevSlices,
-      ...images.map(
-        (image): Slice => ({
-          source: "upload",
-          status: "uploading",
-          image,
-        }),
-      ),
-    ]);
+    setSlices(
+      images.map((image) => ({
+        source: "upload",
+        status: "uploading",
+        image,
+      })),
+    );
+
+    images.forEach((image, index) =>
+      uploadImage({ index, image, source: "upload" }),
+    );
+  };
+
+  const uploadImage = (args: {
+    index: number;
+    image: File;
+    source: "upload" | "figma";
+  }) => {
+    const { index, image, source } = args;
+    const currentId = id.current;
+
+    setSlice({
+      index,
+      slice: (prevSlice) => ({
+        ...prevSlice,
+        status: "uploading",
+        source,
+      }),
+    });
+
+    getImageUrl({ image }).then(
+      (imageUrl) => {
+        if (currentId !== id.current) return;
+        void inferSlice({ index, imageUrl, source });
+      },
+      () => {
+        if (currentId !== id.current) return;
+        setSlice({
+          index,
+          slice: (prevSlice) => ({
+            ...prevSlice,
+            status: "uploadError",
+            onRetry: () => uploadImage({ index, image, source }),
+          }),
+        });
+      },
+    );
+  };
+
+  const existingSlices = useExistingSlices({ open });
+
+  const inferSlice = async (args: {
+    index: number;
+    imageUrl: string;
+    source: "upload" | "figma";
+  }) => {
+    const { index, imageUrl, source } = args;
+    const currentId = id.current;
 
-    images.forEach((imageData, relativeIndex) => {
-      const index = startIndex + relativeIndex;
-      void uploadImage({ index, imageData, source: "upload" });
+    const libraryID = await getLibraryID();
+
+    setSlice({
+      index,
+      slice: (prevSlice) => ({
+        ...prevSlice,
+        status: "generating",
+        thumbnailUrl: imageUrl,
+      }),
     });
+
+    try {
+      const inferResult = await managerClient.customTypes.inferSlice({
+        imageUrl,
+        source,
+        libraryID,
+      });
+      if (currentId !== id.current) return;
+
+      const model = sliceWithoutConflicts({
+        existingSlices: existingSlices.current,
+        newSlices: slices,
+        slice: inferResult.slice,
+      });
+
+      setSlices((prevSlices) =>
+        prevSlices.map((prevSlice, i) =>
+          i === index
+            ? {
+                ...prevSlice,
+                status: "success",
+                thumbnailUrl: imageUrl,
+                langSmithUrl: inferResult.langSmithUrl,
+                model,
+              }
+            : prevSlice,
+        ),
+      );
+    } catch {
+      if (currentId !== id.current) return;
+      setSlice({
+        index,
+        slice: (prevSlice) => ({
+          ...prevSlice,
+          status: "generateError",
+          thumbnailUrl: imageUrl,
+          onRetry: () => void inferSlice({ index, imageUrl, source }),
+        }),
+      });
+    }
+  };
+
+  const onSubmit = () => {
+    const newSlices = slices.reduce<NewSlice[]>((acc, slice) => {
+      if (slice.status === "success" && slice.source === "upload") {
+        acc.push(slice);
+      }
+      return acc;
+    }, []);
+    if (!newSlices.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.");
+      });
   };
 
   const handlePaste = async () => {
@@ -227,7 +378,7 @@ export function CreateSliceFromImageModal(
       ]);
 
       // Start uploading the new image
-      void uploadImage({ index: newIndex, imageData, source: "figma" });
+      void uploadImage({ index: newIndex, image: imageData, source: "figma" });
 
       toast.success(`Pasted ${imageName}${success ? " from Figma" : ""}`);
     } catch (error) {
@@ -238,421 +389,60 @@ export function CreateSliceFromImageModal(
     }
   };
 
-  const uploadImage = async (args: {
-    index: number;
-    imageData: File;
-    source: "figma" | "upload";
-  }) => {
-    const { index, imageData, source } = args;
-    const currentId = id.current;
-
-    setSlice({
-      index,
-      slice: (prevSlice) => ({
-        ...prevSlice,
-        status: "uploading",
-        image: imageData,
-        source,
-      }),
-    });
-
-    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 inferSlice = async (args: {
-    index: number;
-    imageUrl: string;
-    libraryID: string;
-    source: "figma" | "upload";
-  }) => {
-    const { index, imageUrl, libraryID, source } = args;
-    let currentId = id.current;
-
-    const requestId = crypto.randomUUID();
-
-    setSlice({
-      index,
-      slice: (prevSlice) => ({
-        ...prevSlice,
-        status: "generating",
-        thumbnailUrl: imageUrl,
-        requestId,
-      }),
-    });
-
-    try {
-      const inferResult = await managerClient.customTypes.inferSlice({
-        source,
-        libraryID,
-        imageUrl,
-        requestId,
-      });
-
-      if (currentId !== id.current) return;
-
-      const model = sliceWithoutConflicts({
-        existingSlices: existingSlices.current,
-        newSlices: slices,
-        slice: inferResult.slice,
-      });
-
-      setSlices((prevSlices) => {
-        return prevSlices.map((prevSlice, i) => {
-          if (i !== index) return prevSlice;
-          return {
-            ...prevSlice,
-            status: "success",
-            thumbnailUrl: imageUrl,
-            model,
-            langSmithUrl: inferResult.langSmithUrl,
-          };
-        });
-      });
-
-      if (source === "upload") {
-        currentId = id.current;
-        const currentSlice = slices[index];
-
-        const { errors } = await managerClient.slices.createSlice({
-          libraryID,
-          model: model,
-        });
-        if (errors.length) {
-          throw new Error(`Failed to create slice ${model.id}.`);
-        }
-
-        await managerClient.slices.updateSliceScreenshot({
-          libraryID,
-          sliceID: model.id,
-          variationID: model.variations[0].id,
-          data: currentSlice.image,
-        });
-
-        if (currentId !== id.current) return;
-      }
-
-      void completeStep("createSlice");
-
-      void telemetry.track({
-        event: "slice:created",
-        id: model.id,
-        name: model.name,
-        library: libraryID,
-        location,
-        mode: "ai",
-        langSmithUrl: inferResult.langSmithUrl,
-      });
-
-      addAiFeedback({
-        type: "model",
-        library: libraryID,
-        sliceId: model.id,
-        variationId: model.variations[0].id,
-        langSmithUrl: inferResult.langSmithUrl,
-      });
-    } catch (error) {
-      if (currentId !== id.current) return;
-
-      setSlice({
-        index,
-        slice: (prevSlice) => ({
-          ...prevSlice,
-          status:
-            error instanceof Error && error.name === "AbortError"
-              ? "cancelled"
-              : "generateError",
-          thumbnailUrl: imageUrl,
-          onRetry: () => {
-            void inferSlice({ index, imageUrl, libraryID, source });
-          },
-        }),
-      });
-    }
-  };
-
-  const generatePendingSlices = () => {
-    if (libraryID === undefined) return;
-
-    slices.forEach((slice, index) => {
-      if (slice.status === "pending") {
-        void inferSlice({
-          index,
-          libraryID,
-          imageUrl: slice.thumbnailUrl,
-          source: slice.source,
-        });
-      }
-    });
-  };
-
-  const cancelActiveRequests = async () => {
-    const cancelableIds = slices.flatMap((slice) =>
-      slice.status === "generating" ? [slice.requestId] : [],
-    );
-    if (cancelableIds.length === 0) return;
-
-    await Promise.all(
-      cancelableIds.map((requestId) => {
-        return managerClient.customTypes.cancelInferSlice({ requestId });
-      }),
-    );
-  };
-
-  const closeModal = (args?: { cancelActiveRequests?: boolean }) => {
-    if (loadingSliceCount > 0) return;
-    if (args?.cancelActiveRequests ?? true) {
-      void cancelActiveRequests();
-    }
-    onClose();
-    id.current = crypto.randomUUID();
-    setTimeout(() => setSlices([]), 250); // wait for the modal fade animation
-  };
-
-  const onSubmit = async () => {
-    try {
-      setIsSubmitting(true);
-      if (libraryID === undefined) return;
-
-      const serverState = await getState();
-      createSliceSuccess(serverState.libraries);
-      syncChanges();
-
-      onSuccess({
-        slices: slices.flatMap((slice) =>
-          slice.status === "success" ? slice.model : [],
-        ),
-        library: libraryID,
-      });
-
-      closeModal({ cancelActiveRequests: false });
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const generatingSliceCount = slices.filter((slice) => {
-    return slice.status === "generating";
-  }).length;
-
-  const uploadingSliceCount = slices.filter((slice) => {
-    return slice.status === "uploading";
-  }).length;
-
-  const loadingSliceCount = generatingSliceCount + uploadingSliceCount;
-
-  const pendingSliceCount = slices.filter((slice) => {
-    return slice.status === "pending";
-  }).length;
-
-  const completedSliceCount = slices.filter((slice) => {
-    return slice.status === "success";
-  }).length;
-
-  const hasTriggeredGeneration = slices.some((slice) => {
-    return slice.status === "generating" || slice.status === "success";
-  });
-
-  const generateSliceCount = loadingSliceCount + pendingSliceCount;
+  const areSlicesLoading = slices.some(
+    (slice) => slice.status === "uploading" || slice.status === "generating",
+  );
+  const readySlices = slices.filter((slice) => slice.status === "success");
+  const someSlicesReady = readySlices.length > 0;
 
   return (
-    <Dialog open={open} onOpenChange={(open) => !open && closeModal()}>
-      <DialogHeader title="Generate with AI" />
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogHeader title="Generate from image" />
       <DialogContent gap={0}>
         <DialogDescription hidden>
           Upload images to generate slices with AI
         </DialogDescription>
-        {!isLoadingLibraryID ? (
-          <>
-            {slices.length === 0 ? (
-              <Box
-                padding={16}
-                height="100%"
-                gap={16}
-                display="flex"
-                flexDirection="column"
-              >
-                {isFigmaEnabled && (
-                  <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
+        {slices.length === 0 ? (
+          <Box padding={16} height="100%">
+            <FileDropZone
+              onFilesSelected={onImagesSelected}
+              assetType="image"
+              maxFiles={IMAGE_UPLOAD_LIMIT}
+              overlay={
+                <UploadBlankSlate
                   onFilesSelected={onImagesSelected}
-                  assetType="image"
-                  maxFiles={IMAGE_UPLOAD_LIMIT}
-                  overlay={
-                    <UploadBlankSlate
-                      onFilesSelected={onImagesSelected}
-                      onPaste={() => void handlePaste()}
-                      droppingFiles
-                    />
-                  }
-                >
-                  <UploadBlankSlate
-                    onFilesSelected={onImagesSelected}
-                    onPaste={() => void handlePaste()}
-                  />
-                </FileDropZone>
-              </Box>
-            ) : (
-              <>
-                <Box
-                  display="flex"
-                  alignItems="center"
-                  justifyContent="space-between"
-                  padding={16}
-                >
-                  <Text variant="h3">Design</Text>
-                  <FileUploadButton
-                    size="medium"
-                    color="grey"
-                    onFilesSelected={onImagesSelected}
-                    startIcon="attachFile"
-                    disabled={hasTriggeredGeneration}
-                  >
-                    Add images
-                  </FileUploadButton>
-                </Box>
-                <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>
-              {generatingSliceCount > 0 ? (
-                <DialogCancelButton
-                  onClick={() => void cancelActiveRequests()}
-                  size="medium"
-                  sx={{ marginRight: 8 }}
-                  invisible
-                >
-                  Cancel
-                </DialogCancelButton>
-              ) : (
-                <DialogCancelButton
-                  onClick={() => closeModal()}
-                  size="medium"
-                  sx={{ marginRight: 8 }}
-                  invisible
-                >
-                  Close
-                </DialogCancelButton>
-              )}
-              {completedSliceCount === 0 || loadingSliceCount > 0 ? (
-                <DialogActionButton
-                  color="purple"
-                  startIcon="autoFixHigh"
-                  onClick={() => void generatePendingSlices()}
-                  disabled={
-                    hasTriggeredGeneration ||
-                    loadingSliceCount > 0 ||
-                    pendingSliceCount === 0
-                  }
-                  loading={loadingSliceCount > 0}
-                  size="medium"
-                >
-                  Generate{" "}
-                  {generateSliceCount > 0 ? `(${generateSliceCount}) ` : ""}
-                  {generateSliceCount === 1 ? "Slice" : "Slices"}
-                </DialogActionButton>
-              ) : (
-                <DialogActionButton
-                  color="purple"
-                  onClick={() => void onSubmit()}
-                  loading={isSubmitting}
-                  size="medium"
-                >
-                  {getSubmitButtonLabel(location, completedSliceCount)}
-                </DialogActionButton>
-              )}
-            </DialogActions>
-          </>
-        ) : (
-          <Box
-            display="flex"
-            justifyContent="center"
-            alignItems="center"
-            height="100%"
-          >
-            <ProgressCircle color="purple9" />
+                  droppingFiles
+                />
+              }
+            >
+              <UploadBlankSlate onFilesSelected={onImagesSelected} />
+            </FileDropZone>
           </Box>
+        ) : (
+          <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} />
+          <DialogActionButton
+            disabled={!someSlicesReady || areSlicesLoading}
+            loading={isCreatingSlices}
+            onClick={onSubmit}
+          >
+            {getSubmitButtonLabel(location)} ({readySlices.length})
+          </DialogActionButton>
+        </DialogActions>
       </DialogContent>
     </Dialog>
   );
@@ -661,10 +451,8 @@ export function CreateSliceFromImageModal(
 function UploadBlankSlate(props: {
   droppingFiles?: boolean;
   onFilesSelected: (files: File[]) => void;
-  onPaste: () => void;
 }) {
-  const { droppingFiles = false, onFilesSelected, onPaste } = props;
-  const isFigmaEnabled = useIsFigmaEnabled();
+  const { droppingFiles = false, onFilesSelected } = props;
 
   return (
     <Box
@@ -675,72 +463,27 @@ function UploadBlankSlate(props: {
       border
       borderStyle="dashed"
       borderColor={droppingFiles ? "purple9" : "grey6"}
-      borderRadius={12}
-      flexGrow={1}
     >
       <BlankSlate>
-        <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"
+        <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"
           >
-            {isFigmaEnabled ? (
-              <>
-                <Text>Generate slices from your designs</Text>
-                <Text variant="small" color="grey11">
-                  Upload your design images or paste them directly from Figma.
-                </Text>
-              </>
-            ) : (
-              <>
-                <Text>Upload your design images.</Text>
-                <Text variant="small" color="grey11">
-                  Once uploaded, you can generate slices automatically using AI.
-                </Text>
-              </>
-            )}
-          </Box>
-          <Box display="flex" alignItems="center" gap={16}>
-            {isFigmaEnabled ? (
-              <>
-                <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>
-              </>
-            ) : (
-              <FileUploadButton
-                startIcon="attachFile"
-                onFilesSelected={onFilesSelected}
-                color="grey"
-              >
-                Add images
-              </FileUploadButton>
-            )}
-          </Box>
-        </Box>
+            Add images
+          </FileUploadButton>
+        </BlankSlateActions>
       </BlankSlate>
     </Box>
   );
@@ -763,6 +506,12 @@ async function getImageUrl({ image }: { image: File }) {
   return url;
 }
 
+type NewSlice = {
+  image: File;
+  model: SharedSlice;
+  langSmithUrl?: string;
+};
+
 /**
  * Keeps track of the existing slices in the project.
  * Re-fetches them when the modal is opened.
@@ -834,42 +583,68 @@ function sliceWithoutConflicts({
   };
 }
 
-function useLibraryID() {
-  const [libraryID, setLibraryID] = useState<string | undefined>();
+async function addSlices(newSlices: NewSlice[]) {
+  // use the first library
+  const { libraries = [] } =
+    await managerClient.project.getSliceMachineConfig();
+  const library = libraries[0];
+  if (!library) {
+    throw new Error("No library found in the config.");
+  }
 
-  useEffect(() => {
-    managerClient.project
-      .getSliceMachineConfig()
-      .then((smConfig) => {
-        const libraryID = smConfig?.libraries?.[0];
-        if (libraryID === undefined) {
-          throw new Error("No library found in the config.");
-        }
-        setLibraryID(libraryID);
-      })
-      .catch(() => {
-        throw new Error("Could not get library ID from the config.");
-      });
-  }, []);
+  for (const { model } of newSlices) {
+    const { errors } = await managerClient.slices.createSlice({
+      libraryID: library,
+      model,
+    });
+    if (errors.length) {
+      throw new Error(`Failed to create slice ${model.id}.`);
+    }
+  }
 
-  return { libraryID, isLoading: libraryID === undefined };
-}
+  // for each added slice, set the variation screenshot
+  const slices = await Promise.all(
+    newSlices.map(async ({ model, image, langSmithUrl }) => {
+      await managerClient.slices.updateSliceScreenshot({
+        libraryID: library,
+        sliceID: model.id,
+        variationID: model.variations[0].id,
+        data: image,
+      });
+      return {
+        model,
+        langSmithUrl,
+      };
+    }),
+  );
 
-function useIsFigmaEnabled() {
-  const experiment = useExperimentVariant("llm-proxy-access");
-  return experiment?.value === "on";
+  return { library, slices };
 }
 
 const getSubmitButtonLabel = (
   location: "custom_type" | "page_type" | "slices",
-  completedSliceCount: number,
 ) => {
   switch (location) {
     case "custom_type":
-      return `Add to type (${completedSliceCount})`;
+      return "Add to type";
     case "page_type":
-      return `Add to page (${completedSliceCount})`;
+      return "Add to page";
     case "slices":
-      return "Done";
+      return "Add to slices";
   }
 };
+
+function useIsFigmaEnabled() {
+  const experiment = useExperimentVariant("llm-proxy-access");
+  return experiment?.value === "on";
+}
+
+function getLibraryID() {
+  return managerClient.project.getSliceMachineConfig().then((smConfig) => {
+    const libraryID = smConfig?.libraries?.[0];
+    if (libraryID === undefined) {
+      throw new Error("No library found in the config.");
+    }
+    return libraryID;
+  });
+}