@slicemachine/manager 0.24.4-alpha.xru-kong-obelix-services.2 → 0.24.4-alpha.xru-poc-ai.1

package/src/managers/slices/SlicesManager.ts

@@ -36,6 +36,10 @@ import { API_ENDPOINTS } from "../../constants/API_ENDPOINTS";
 import { UnauthenticatedError, UnauthorizedError } from "../../errors";
 
 import { BaseManager } from "../BaseManager";
+import {
+	BedrockRuntimeClient,
+	ConverseCommand,
+} from "@aws-sdk/client-bedrock-runtime";
 
 type SlicesManagerReadSliceLibraryReturnType = {
 	sliceIDs: string[];
@@ -207,6 +211,18 @@ type SliceMachineManagerConvertLegacySliceToSharedSliceReturnType = {
 	errors: (DecodeError | HookError)[];
 };
 
+type SliceMachineManagerGenerateSliceArgs = {
+	userPrompt: string;
+	libraryID: string;
+	slice: SharedSlice;
+	imageFile?: Buffer;
+};
+
+type SliceMachineManagerGenerateSliceReturnType = {
+	slice?: SharedSlice;
+	errors: (DecodeError | HookError)[];
+};
+
 export class SlicesManager extends BaseManager {
 	async readSliceLibrary(
 		args: SliceLibraryReadHookData,
@@ -1110,4 +1126,726 @@ export class SlicesManager extends BaseManager {
 
 		return { errors: customTypeReadErrors };
 	}
+
+	async generateSlice(
+		args: SliceMachineManagerGenerateSliceArgs,
+	): Promise<SliceMachineManagerGenerateSliceReturnType> {
+		assertPluginsInitialized(this.sliceMachinePluginRunner);
+
+		const AWS_REGION = "us-east-1";
+		const AWS_ACCESS_KEY_ID = process.env.AWS_ACCESS_KEY_ID;
+		const AWS_SECRET_ACCESS_KEY = process.env.AWS_SECRET_ACCESS_KEY;
+
+		if (!AWS_ACCESS_KEY_ID || !AWS_SECRET_ACCESS_KEY) {
+			throw new Error("AWS credentials are not set.");
+		}
+
+		// Initialize AWS Bedrock client
+		const bedrockClient = new BedrockRuntimeClient({
+			region: AWS_REGION,
+			credentials: {
+				accessKeyId: AWS_ACCESS_KEY_ID,
+				secretAccessKey: AWS_SECRET_ACCESS_KEY,
+			},
+		});
+
+		/**
+		 * Generates the JSON schema for the SharedSlice TypeScript type.
+		 */
+		const getSharedSliceSchema = (): string => {
+			return `
+
+			/**
+			 * Represents a Prismic Slice.
+			 * @property {string} type - Should always be "SharedSlice".
+			 * @property {string} id - Unique identifier for the slice in snake_case.
+			 * @property {string} name - Human-readable name in PascalCase.
+			 * @property {string} description - Brief explanation of the slice's purpose.
+			 * @property {SliceVariation[]} variations - Array of variations for the slice.
+			 */
+			type PrismicSlice = {
+			  type: "SharedSlice";
+			  id: string;
+			  name: string;
+			  description: string;
+			  variations: SliceVariation[];
+			};
+			
+			/**
+			 * Represents a variation of a Prismic Slice.
+			 * @property {string} id - Unique identifier for the variation in snake_case.
+			 * @property {string} name - Human-readable name in PascalCase.
+			 * @property {string} description - Brief explanation of the variation's purpose.
+			 * @property {string} docURL - Legacy property, required with an empty string.
+			 * @property {string} version - Legacy property, required with the name property value.
+			 * @property {Record<string, PrismicField>} [primary] - Primary fields defining the main content of the slice.
+			 */
+			type SliceVariation = {
+			  id: string;
+			  name: string;
+			  description: string;
+			  primary: Record<string, PrismicField>;
+			  docURL: string;
+			  version: string;
+			};
+			
+			/**
+			 * Union type representing all possible Prismic fields.
+			 */
+			type PrismicField =
+			  | UIDField
+			  | BooleanField
+			  | ColorField
+			  | DateField
+			  | TimestampField
+			  | NumberField
+			  | KeyTextField
+			  | SelectField
+			  | StructuredTextField
+			  | ImageField
+			  | LinkField
+			  | GeoPointField
+			  | EmbedField
+			  | GroupField;
+			
+			/**
+			 * Represents a UID Field in Prismic.
+			 * @property {"UID"} type - Field type.
+			 * @property {Object} config - Configuration object.
+			 * @property {string} config.label - Label displayed in the editor.
+			 * @property {string} [config.placeholder] - Placeholder text.
+			 * @property {string} [config.customregex] - Custom regex for validation.
+			 * @property {string} [config.errorMessage] - Error message for invalid input.
+			 */
+			type UIDField = {
+			  type: "UID";
+			  config: {
+				label: string;
+				placeholder?: string;
+				customregex?: string;
+				errorMessage?: string;
+			  };
+			};
+			
+			/**
+			 * Represents a Boolean Field in Prismic.
+			 * @property {"Boolean"} type - Field type.
+			 * @property {Object} config - Configuration object.
+			 * @property {string} config.label - Label displayed in the editor.
+			 * @property {boolean} [config.default_value] - Default value (true or false).
+			 */
+			type BooleanField = {
+			  type: "Boolean";
+			  config: {
+				label: string;
+				default_value?: boolean;
+			  };
+			};
+			
+			/**
+			 * Represents a Color Field in Prismic.
+			 * @property {"Color"} type - Field type.
+			 * @property {Object} config - Configuration object.
+			 * @property {string} config.label - Label displayed in the editor.
+			 */
+			type ColorField = {
+			  type: "Color";
+			  config: {
+				label: string;
+			  };
+			};
+			
+			/**
+			 * Represents a Date Field in Prismic.
+			 * @property {"Date"} type - Field type.
+			 * @property {Object} config - Configuration object.
+			 * @property {string} config.label - Label displayed in the editor.
+			 */
+			type DateField = {
+			  type: "Date";
+			  config: {
+				label: string;
+			  };
+			};
+			
+			/**
+			 * Represents a Timestamp Field in Prismic.
+			 * @property {"Timestamp"} type - Field type.
+			 * @property {Object} config - Configuration object.
+			 * @property {string} config.label - Label displayed in the editor.
+			 */
+			type TimestampField = {
+			  type: "Timestamp";
+			  config: {
+				label: string;
+			  };
+			};
+			
+			/**
+			 * Represents a Number Field in Prismic.
+			 * @property {"Number"} type - Field type.
+			 * @property {Object} config - Configuration object.
+			 * @property {string} config.label - Label displayed in the editor.
+			 * @property {string} [config.placeholder] - Placeholder text.
+			 * @property {number} [config.min] - Minimum allowable value.
+			 * @property {number} [config.max] - Maximum allowable value.
+			 */
+			type NumberField = {
+			  type: "Number";
+			  config: {
+				label: string;
+				placeholder?: string;
+				min?: number;
+				max?: number;
+			  };
+			};
+			
+			/**
+			 * Represents a Key Text Field in Prismic.
+			 * @property {"Text"} type - Field type.
+			 * @property {Object} config - Configuration object.
+			 * @property {string} config.label - Label displayed in the editor.
+			 * @property {string} [config.placeholder] - Placeholder text.
+			 */
+			type KeyTextField = {
+			  type: "Text";
+			  config: {
+				label: string;
+				placeholder?: string;
+			  };
+			};
+			
+			/**
+			 * Represents a Select Field in Prismic.
+			 * @property {"Select"} type - Field type.
+			 * @property {Object} config - Configuration object.
+			 * @property {string} config.label - Label displayed in the editor.
+			 * @property {string[]} config.options - Array of options for the select dropdown.
+			 */
+			type SelectField = {
+			  type: "Select";
+			  config: {
+				label: string;
+				options: string[];
+			  };
+			};
+			
+			/**
+			 * Represents a Structured Text Field in Prismic.
+			 * @property {"StructuredText"} type - Field type.
+			 * @property {Object} config - Configuration object.
+			 * @property {string} config.label - Label displayed in the editor.
+			 * @property {string} [config.placeholder] - Placeholder text.
+			 * @property {string} [config.single] - A comma-separated list of formatting options that does not allow line breaks. Options: paragraph | preformatted | heading1 | heading2 | heading3 | heading4 | heading5 | heading6 | strong | em | hyperlink | image | embed | list-item | o-list-item | rtl.
+			 * @property {string} [config.multi] - A comma-separated list of formatting options, with paragraph breaks allowed. Options: paragraph | preformatted | heading1 | heading2 | heading3 | heading4 | heading5 | heading6 | strong | em | hyperlink | image | embed | list-item | o-list-item | rtl.
+			 * @property {boolean} [config.allowTargetBlank] - Allows links to open in a new tab.
+			 * @property {string[]} [config.labels] - An array of strings to define labels for custom formatting.
+			 * @property {ImageConstraint} [config.imageConstraint] - Constraints for images within the rich text field.
+			 */
+			type StructuredTextField = {
+			  type: "StructuredText";
+			  config: {
+				label: string;
+				placeholder?: string;
+				single?: string;
+				multi?: string;
+				allowTargetBlank?: boolean;
+				labels?: string[];
+				imageConstraint?: ImageConstraint;
+			  };
+			};
+			
+			/**
+			 * Represents constraints for images within a rich text field.
+			 * @property {number} [width] - Width constraint in pixels.
+			 * @property {number
+			 * @property {number} [height] - Height constraint in pixels.
+			 */
+			type ImageConstraint = {
+			  width?: number;
+			  height?: number;
+			};
+			
+			/**
+			 * Represents an Image Field in Prismic.
+			 * @property {"Image"} type - Field type.
+			 * @property {Object} config - Configuration object.
+			 * @property {string} config.label - Label displayed in the editor.
+			 * @property {Object} [config.constraint] - Constraints for the image dimensions.
+			 * @property {number} [config.constraint.width] - Width constraint.
+			 * @property {number} [config.constraint.height] - Height constraint.
+			 * @property {Thumbnail[]} [config.thumbnails] - Array of thumbnail configurations.
+			 */
+			type ImageField = {
+			  type: "Image";
+			  config: {
+				label: string;
+				constraint?: {
+				  width?: number;
+				  height?: number;
+				};
+				thumbnails?: Thumbnail[];
+			  };
+			};
+			
+			/**
+			 * Represents a Thumbnail configuration for an Image field.
+			 * @property {string} name - Name of the thumbnail.
+			 * @property {number} [width] - Width of the thumbnail in pixels.
+			 * @property {number} [height] - Height of the thumbnail in pixels.
+			 */
+			type Thumbnail = {
+			  name: string;
+			  width?: number;
+			  height?: number;
+			};
+			
+			/**
+			 * Represents a Link Field in Prismic.
+			 * @property {"Link"} type - Field type.
+			 * @property {Object} config - Configuration object.
+			 * @property {string} config.label - Label displayed in the editor.
+			 * @property {"web" | "document" | "media"} config.select - Defines the type of link allowed.
+			 * @property {string[]} [config.customtypes] - Defines which Prismic document types are allowed if select is "document".
+			 */
+			type LinkField = {
+			  type: "Link";
+			  config: {
+				label: string;
+				select: "web" | "document" | "media";
+				customtypes?: string[];
+				allowText: boolean;
+			  };
+			};
+			
+			/**
+			 * Represents an Embed Field in Prismic.
+			 * @property {"Embed"} type - Field type.
+			 * @property {Object} config - Configuration object.
+			 * @property {string} config.label - Label displayed in the editor.
+			 */
+			type EmbedField = {
+			  type: "Embed";
+			  config: {
+				label: string;
+			  };
+			};
+			
+			/**
+			 * Represents a GeoPoint Field in Prismic.
+			 * @property {"GeoPoint"} type - Field type.
+			 * @property {Object} config - Configuration object.
+			 * @property {string} config.label - Label displayed in the editor.
+			 */
+			type GeoPointField = {
+			  type: "GeoPoint";
+			  config: {
+				label: string;
+			  };
+			};
+			
+			/**
+			 * Represents a Group Field (Repeatable Fields) in Prismic.
+			 * @property {"Group"} type - Field type.
+			 * @property {Object} config - Configuration object.
+			 * @property {string} config.label - Label displayed in the editor.
+			 * @property {Record<string, PrismicField>} config.fields - Defines the fields inside the group.
+			 */
+			type GroupField = {
+			  type: "Group";
+			  config: {
+				label: string;
+				fields: Record<string, PrismicField>;
+			  };
+			};
+`;
+		};
+
+		/**
+		 * Builds the system prompt message using the generated TypeScript schema.
+		 */
+		const buildSystemMessage = (
+			schema: string,
+			existingSlice: SharedSlice,
+		): string => {
+			return `
+You are a world-class expert in creating Prismic Custom Type models for slices.
+Your task is to generate a valid Prismic JSON model based solely on the provided description and the TypeScript schema below.
+The JSON model must adhere strictly to these rules:
+1. Include all necessary fields as described.
+2. Use the "primary" object for all main content fields.
+3. Do NOT use an "items" field. If a field represents a collection, it must be defined inside a Group field within the "primary" object.
+4. Ensure that each field has appropriate placeholders, labels, and configurations.
+5. If the existing slices contain fields, ensure to understand the user prompt to update the existing slice instead of creating something from scratch.
+6. If you detect the user wants to add a variation, always ensure the new variation is not exactly the same as another existing one
+7. Always return the full valid slice, as given in existing it should be returned in a valid format.
+8. If you detect the user prompt is about creating a totally different slice, do it and discard what was given in the existing slice, BUT only if you detect if nothing related.
+9. NEVER generate a Link / Button text field, ONLY the Link / Button field itself is enough. So ONE field just for the Link / Button. ENABLE "allowText" when doing that.
+10. AND THE MOST ULTRA IMPORTANT THING! Output ONLY a valid JSON object without any additional commentary or formatting! ONLY JSON, I need to parse it after with JSON.parse!
+
+### TypeScript Schema for reference:
+${schema}
+
+### Existing slice
+${JSON.stringify(existingSlice)}
+`.trim();
+		};
+
+		/**
+		 * Sends the prompt to AWS Bedrock and returns the generated Prismic JSON
+		 * model.
+		 */
+		const generatePrismicModel = async (
+			userPrompt: string,
+		): Promise<string> => {
+			const schema = getSharedSliceSchema();
+
+			const systemMessage = buildSystemMessage(schema, args.slice);
+
+			const command = new ConverseCommand({
+				modelId: "anthropic.claude-3-5-sonnet-20240620-v1:0",
+				system: [
+					{
+						text:
+							systemMessage +
+							(args.imageFile
+								? `
+								### Additional important rules
+					A. SUPER IMPORTANT, you have to check and read the image and generate the model according to what is visible.
+					B. You MUST understand that background image are just a simple image field. Don't try to do anything fancy with it, just a simple image field. 
+					C. Even if the background image looks like two image, be smart and detect if it's actually just one simple background that don't need a GROUP!
+					D. NEVER EVER ADD decorative elements as detailled fields
+					`
+								: ``),
+					},
+				],
+				messages: [
+					args.imageFile
+						? {
+								role: "user",
+								content: [
+									{
+										image: {
+											format: "png",
+											source: { bytes: args.imageFile } as any,
+										},
+									},
+								],
+						  }
+						: {
+								role: "user",
+								content: [
+									{
+										text: `Generate a valid Prismic JSON model based on the following description:\n\n${userPrompt}`,
+									},
+								],
+						  },
+				],
+			});
+
+			try {
+				console.log("Before sending command");
+				const response = await bedrockClient.send(command);
+				console.log("After response", JSON.stringify(response));
+
+				const result = response.output?.message?.content?.[0]?.text?.trim();
+				console.log("After sending command");
+				if (!result) {
+					throw new Error("No valid response received.");
+				}
+
+				return result;
+			} catch (error) {
+				console.error("Error generating Prismic model:", error);
+				throw error;
+			}
+		};
+
+		const prismicModel = await generatePrismicModel(args.userPrompt);
+
+		console.log("After saving slice", prismicModel);
+
+		const newSlice = {
+			...args.slice,
+			variations: JSON.parse(prismicModel).variations,
+		};
+
+		const response = await this.updateSlice({
+			libraryID: args.libraryID,
+			model: newSlice,
+		});
+
+		if (response.errors.length) {
+			return {
+				errors: response.errors,
+			};
+		}
+
+		try {
+			if (args.imageFile) {
+				await this.updateSliceScreenshot({
+					libraryID: args.libraryID,
+					sliceID: newSlice.id,
+					variationID: newSlice.variations[0].id,
+					data: args.imageFile,
+				});
+
+				const extMocks = mockSlice({ model: newSlice });
+				console.log("extMocks", extMocks);
+
+				const command = new ConverseCommand({
+					modelId: "anthropic.claude-3-5-sonnet-20240620-v1:0",
+					system: [
+						{
+							text: `
+# Task 1
+You are a world-class expert in creating Prismic Mocks for slices.
+Your task is to generate a valid Prismic JSON mocks based solely on the provided existing mocks.
+The goal is for you to take the image from the user input, detect the text and fill ensure the existing mock data is aligned with what is visible.
+Don't handle images.
+Only handle text.
+If you see a repetition with a group, you must create the same number of group items that are visible on the image.
+KEEP THE EXACT SAME STRUCTURE FOR THE MOCKS DATA, ONLY FILL IN THE TEXT FIELDS!
+AND ULTRA IMPORTANT! Output ONLY a valid JSON object without any additional commentary or formatting! ONLY JSON with the same existing mock format, I need to parse it after with JSON.parse!
+
+### Existing mocks
+${JSON.stringify(extMocks)}
+
+THAT was your FIRST task!
+# Task 2
+
+Now you also have a second task, generating the slice code!
+Generate fully isolated slice mock that don't require any package. The code is in React.
+You have to ensure the mocks data will be the input of your code.
+Use the example of a slice fully isolated from bellow to help you know how to code a slice. But use the mocks data as input and the slice name etc.
+NEVER USE <style jsx> in the final code, just <style> is enough! It's important to not use <style jsx>!
+Ensure that the color used for the background is the same as the image provide in the user prompt! It's better no background color than a wrong one.
+Your goal is to make the code visually looks as close as possible to the image from the user input.
+AND ULTRA IMPORTANT! Output ONLY a valid React code without any additional commentary or formatting! Give me the code so I can just copy paste it into a React component file.
+
+### Tips
+For links just use PrismicNextLink just pass the field, PrismicNextLink will handle the display of the link text.
+DO NOT TRY TO MANUALLY GO INSIDE THE LINK TO WRITE THE TEXT IT"S DONE AUTOMATICALLY.
+
+### Example of a slice fully isolated 
+import { type Content } from "@prismicio/client";
+import { PrismicNextLink, PrismicNextImage } from "@prismicio/next";
+import { SliceComponentProps, PrismicRichText } from "@prismicio/react";
+
+export type HeroProps = SliceComponentProps<Content.HeroSlice>;
+
+const Hero = ({ slice }: HeroProps): JSX.Element => {
+  return (
+    <section
+      data-slice-type={slice.slice_type}
+      data-slice-variation={slice.variation}
+      className="es-bounded es-fullpage-hero"
+    >
+      <div
+        className="es-fullpage-hero__content"
+      >
+        <div>
+            <PrismicNextImage
+              field={slice.primary.image}
+              className="es-fullpage-hero__image"
+            />
+        </div>
+
+        <div className="es-fullpage-hero__content-right">
+          <div className="es-fullpage-hero__content__intro">
+              <p className="es-fullpage-hero__content__intro__eyebrow">
+                {slice.primary.eyebrowHeadline}
+              </p>
+            
+              <div className="es-fullpage-hero__content__intro__headline">
+                <PrismicRichText field={slice.primary.title} />
+              </div>
+
+           
+              <div className="es-fullpage-hero__content__intro__description">
+                <PrismicRichText field={slice.primary.description} />
+              </div>
+         
+            <PrismicNextLink
+              className="es-call-to-action__link"
+              field={slice.primary.callToActionLink}
+            />
+          </div>
+        </div>
+      </div>
+      <style>
+        {\`
+          .es-bounded {
+              margin: 0px;
+              min-width: 0px;
+              position: relative;
+          }
+          
+          .es-fullpage-hero {
+              font-family: system-ui, sans-serif;
+              background-color: #fff;
+              color: #333;
+          }
+          
+          .es-fullpage-hero__image {
+              max-width: 100%;
+              height: auto;
+              align-self: center;
+		}
+          
+          .es-fullpage-hero__content {
+              display: flex;
+              flex-direction: column;
+              gap: 2rem;
+          }
+          
+          .es-fullpage-hero__content-right {
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              padding: 1.5rem;
+          }
+          
+          @media (min-width: 1080px) {
+              .es-fullpage-hero__content {
+                  flex-direction: row;
+              }
+              
+              .es-fullpage-hero__content > div {
+                  width: 50%;
+              }
+          }
+          
+          .es-fullpage-hero__content__intro {
+              display: grid;
+              gap: 1rem;
+          }
+          
+          .es-fullpage-hero__content__intro__eyebrow {
+              color: #47C1AF;
+              font-size: 1.15rem;
+              font-weight: 500;
+              margin: 0;
+          }
+          
+          .es-fullpage-hero__content__intro__headline {
+              font-size: 1.625rem;
+              font-weight: 700;
+          }
+          
+          .es-fullpage-hero__content__intro__headline * {
+              margin: 0;
+          }
+          
+          @media (min-width: 640px) {
+              .es-fullpage-hero__content__intro__headline {
+                  font-size: 2rem;
+              }
+          }
+          
+          @media (min-width: 1024px) {
+              .es-fullpage-hero__content__intro__headline {
+                  font-size: 2.5rem;
+              }
+          }
+          
+          @media (min-width: 1200px) {
+              .es-fullpage-hero__content__intro__headline {
+                  font-size: 2.75rem;
+              }
+          }
+          
+          .es-fullpage-hero__content__intro__description {
+              font-size: 1.15rem;
+              max-width: 38rem;
+          }
+          
+          .es-fullpage-hero__content__intro__description > p {
+              margin: 0;
+          }
+          
+          @media (min-width: 1200px) {
+              .es-fullpage-hero__content__intro__description {
+                  font-size: 1.4rem;
+              }
+          }
+
+          .es-call-to-action__link {
+              justify-self: flex-start;
+              border-radius: 0.25rem;
+              font-size: 0.875rem;
+              line-height: 1.3;
+              padding: 1rem 2.625rem;
+              transition: background-color 100ms linear;
+              background-color: #16745f;
+              color: #fff;
+          }
+          
+          .es-call-to-action__link:hover {
+              background-color: #0d5e4c;
+          }
+      \`}
+      </style>
+    </section>
+  );
+};
+
+export default Hero;
+
+
+# Final output of task 1 and 2
+Return the task 1 and 2 output in a an object:
+{
+  task1: <JSON of task 1 for the mocks>,
+  task2: <plain string of the slice code for task 2>
+}
+THIS IS THE MOST IMPORTANT THING, YOU NEED A VALID JSON, with task1 and task2 property. And the correct format for each of the two property.
+						`,
+						},
+					],
+					messages: [
+						{
+							role: "user",
+							content: [
+								{
+									image: {
+										format: "png",
+										source: { bytes: args.imageFile } as any,
+									},
+								},
+							],
+						},
+					],
+				});
+
+				console.log("Before sending mock command");
+				const response = await bedrockClient.send(command);
+				console.log("After response", JSON.stringify(response));
+
+				const result = response.output?.message?.content?.[0]?.text?.trim();
+				console.log("After sending mock command");
+
+				if (result) {
+					await this.updateSliceMocks({
+						libraryID: args.libraryID,
+						sliceID: newSlice.id,
+						mocks: JSON.parse(result).task1,
+					});
+
+					await this.sliceMachinePluginRunner.callHook("slice:update-code", {
+						libraryID: args.libraryID,
+						model: newSlice,
+						componentContents: JSON.parse(result).task2,
+					});
+				}
+			}
+		} catch (e) {
+			console.log("Error", e);
+		}
+
+		return {
+			errors: [],
+			slice: newSlice,
+		};
+	}
 }