feat: generate from image option with no slices (#1727)

jomifepe · web-flow · commit 13bdc0913ab3 · 2025-11-21T16:19:05.000+01:00
diff --git a/packages/manager/src/managers/customTypes/CustomTypesManager.ts b/packages/manager/src/managers/customTypes/CustomTypesManager.ts
@@ -49,7 +49,6 @@ import {
 	readdir,
 } from "node:fs/promises";
 import { query as queryClaude } from "@anthropic-ai/claude-agent-sdk";
-import { APPLICATION_MODE } from "../../constants/APPLICATION_MODE";
 
 type SliceMachineManagerReadCustomTypeLibraryReturnType = {
 	ids: string[];
@@ -872,9 +871,6 @@ FINAL REMINDERS:
 					let newSliceAbsPath: string | undefined;
 
 					for await (const query of queries) {
-						if (process.env.SM_ENV !== APPLICATION_MODE.Production) {
-							console.info(JSON.stringify(query, null, 2));
-						}
 						switch (query.type) {
 							case "result":
 								if (query.subtype === "success") {
diff --git a/packages/slice-machine/src/features/customTypes/customTypesBuilder/CreateSliceFromImageModal/CreateSliceFromImageModal.tsx b/packages/slice-machine/src/features/customTypes/customTypesBuilder/CreateSliceFromImageModal/CreateSliceFromImageModal.tsx
@@ -510,7 +510,7 @@ export function CreateSliceFromImageModal(
 
   return (
     <Dialog open={open} onOpenChange={(open) => !open && closeModal()}>
-      <DialogHeader title="Generate with AI" />
+      <DialogHeader title="Generate slices with AI" />
       <DialogContent gap={0}>
         <DialogDescription hidden>
           Upload images to generate slices with AI
diff --git a/packages/slice-machine/src/legacy/components/EmptyState/index.tsx b/packages/slice-machine/src/legacy/components/EmptyState/index.tsx
@@ -1,12 +1,20 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@prismicio/editor-ui";
 import { Video } from "cloudinary-react";
 import React from "react";
 import { Box, Button, Heading, Text } from "theme-ui";
 
 import { telemetry } from "@/apiClient";
+import { getSliceCreationOptions } from "@/features/customTypes/customTypesBuilder/sliceCreationOptions";
 
 interface Props {
   title: string;
   onCreateNew: () => void;
+  onCreateFromImage: () => void;
   buttonText: string;
   documentationComponent: React.ReactNode;
   videoPublicIdUrl: string;
@@ -15,111 +23,135 @@ interface Props {
 const EmptyState: React.FunctionComponent<Props> = ({
   title,
   onCreateNew,
+  onCreateFromImage,
   buttonText,
   documentationComponent,
   videoPublicIdUrl,
   ...restProps
-}) => (
-  <Box
-    sx={{
-      display: "flex",
-      width: "80%",
-      flexWrap: "wrap",
-      justifyContent: "center",
-    }}
-    {...restProps}
-  >
-    <Box
-      sx={(theme) => ({
-        display: "flex",
-        flex: 1,
-        alignItems: "center",
-        minWidth: "400px",
-        maxWidth: "70%",
-        border: `1px solid ${theme.colors?.grey02 as string}`,
-      })}
-    >
-      <Video
-        cloudName="dmtf1daqp"
-        controls
-        loop
-        style={{
-          maxWidth: "100%",
-          objectFit: "contain",
-        }}
-        publicId={videoPublicIdUrl}
-        onPlay={() => {
-          void telemetry.track({
-            event: "open-video-tutorials",
-            video: videoPublicIdUrl,
-          });
-        }}
-      />
-    </Box>
+}) => {
+  const sliceCreationOptions = getSliceCreationOptions({
+    menuType: "Dropdown",
+  });
 
+  return (
     <Box
-      sx={(theme) => ({
-        bg: "white",
+      sx={{
         display: "flex",
-        flexDirection: "column",
-        border: `1px solid ${theme.colors?.grey02 as string}`,
-        flex: 1,
-        minWidth: "400px",
-        maxWidth: "70%",
-      })}
+        width: "80%",
+        flexWrap: "wrap",
+        justifyContent: "center",
+      }}
+      {...restProps}
     >
       <Box
         sx={(theme) => ({
           display: "flex",
-          flexDirection: "column",
-          p: 4,
-          borderBottom: `1px solid ${theme.colors?.grey02 as string}`,
+          flex: 1,
+          alignItems: "center",
+          minWidth: "400px",
+          maxWidth: "70%",
+          border: `1px solid ${theme.colors?.grey02 as string}`,
         })}
       >
-        <Heading
-          as="h3"
-          variant={"heading"}
-          sx={{ fontSize: "16px", lineHeight: "24px", mb: 2 }}
-        >
-          {title}
-        </Heading>
-        <Text variant="xs" sx={{ lineHeight: "24px", fontSize: "13px" }}>
-          {documentationComponent}
-        </Text>
+        <Video
+          cloudName="dmtf1daqp"
+          controls
+          loop
+          style={{
+            maxWidth: "100%",
+            objectFit: "contain",
+          }}
+          publicId={videoPublicIdUrl}
+          onPlay={() => {
+            void telemetry.track({
+              event: "open-video-tutorials",
+              video: videoPublicIdUrl,
+            });
+          }}
+        />
       </Box>
+
       <Box
-        sx={{
+        sx={(theme) => ({
+          bg: "white",
           display: "flex",
-          p: 4,
-          alignItems: "center",
-        }}
+          flexDirection: "column",
+          border: `1px solid ${theme.colors?.grey02 as string}`,
+          flex: 1,
+          minWidth: "400px",
+          maxWidth: "70%",
+        })}
       >
-        <Button
-          onClick={onCreateNew}
-          data-testid="empty-state-main-button"
-          sx={{
+        <Box
+          sx={(theme) => ({
             display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            flexShrink: 0,
-            mr: 4,
-          }}
+            flexDirection: "column",
+            p: 4,
+            borderBottom: `1px solid ${theme.colors?.grey02 as string}`,
+          })}
         >
-          {buttonText}
-        </Button>
-        <Text
+          <Heading
+            as="h3"
+            variant={"heading"}
+            sx={{ fontSize: "16px", lineHeight: "24px", mb: 2 }}
+          >
+            {title}
+          </Heading>
+          <Text variant="xs" sx={{ lineHeight: "24px", fontSize: "13px" }}>
+            {documentationComponent}
+          </Text>
+        </Box>
+        <Box
           sx={{
-            fontSize: "12px",
-            color: "grey04",
-            maxWidth: "280px",
+            display: "flex",
+            p: 4,
+            alignItems: "center",
           }}
         >
-          It will be stored locally and you will be able to push it to your
-          repository
-        </Text>
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <Button
+                data-testid="empty-state-main-button"
+                sx={{ flexShrink: 0, mr: 4 }}
+              >
+                {buttonText}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                renderStartIcon={() =>
+                  sliceCreationOptions.fromImage.BackgroundIcon
+                }
+                onSelect={onCreateFromImage}
+                description={sliceCreationOptions.fromImage.description}
+              >
+                {sliceCreationOptions.fromImage.title}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                renderStartIcon={() =>
+                  sliceCreationOptions.fromScratch.BackgroundIcon
+                }
+                onSelect={onCreateNew}
+                description={sliceCreationOptions.fromScratch.description}
+              >
+                {sliceCreationOptions.fromScratch.title}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Text
+            sx={{
+              fontSize: "12px",
+              color: "grey04",
+              maxWidth: "280px",
+            }}
+          >
+            It will be stored locally and you will be able to push it to your
+            repository
+          </Text>
+        </Box>
       </Box>
     </Box>
-  </Box>
-);
+  );
+};
 
 export default EmptyState;
diff --git a/packages/slice-machine/src/pages/slices.tsx b/packages/slice-machine/src/pages/slices.tsx
@@ -171,6 +171,9 @@ const SlicesIndex: React.FunctionComponent = () => {
                       onCreateNew={() => {
                         setIsCreateSliceModalOpen(true);
                       }}
+                      onCreateFromImage={() => {
+                        void openCreateSliceFromImageModal();
+                      }}
                       buttonText={"Create one"}
                       videoPublicIdUrl={VIDEO_WHAT_ARE_SLICES}
                       documentationComponent={
diff --git a/playwright/tests/slices/slicesList.spec.ts b/playwright/tests/slices/slicesList.spec.ts
@@ -220,6 +220,7 @@ test("I can create a slice from the empty state", async ({
   await slicesListPage.goto();
   await expect(slicesListPage.blankSlate).toBeVisible();
   await slicesListPage.blankSlateCreateAction.click();
+  await slicesListPage.addSliceDropdownCreateNewAction.click();
 
   const sliceName = "Slice" + generateRandomId();
   procedures.unmock("getState");
