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

package/src/managers/slices/SlicesManager.ts

@@ -36,10 +36,6 @@ 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[];
@@ -211,18 +207,6 @@ 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,
@@ -1126,726 +1110,4 @@ 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,
-		};
-	}
 }