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

package/dist/managers/slices/SlicesManager.js

@@ -14,6 +14,7 @@ import { SLICE_MACHINE_USER_AGENT } from "../../constants/SLICE_MACHINE_USER_AGE
 import { API_ENDPOINTS } from "../../constants/API_ENDPOINTS.js";
 import { UnauthenticatedError, UnauthorizedError } from "../../errors.js";
 import { BaseManager } from "../BaseManager.js";
+import { BedrockRuntimeClient, ConverseCommand } from "@aws-sdk/client-bedrock-runtime";
 class SlicesManager extends BaseManager {
   async readSliceLibrary(args) {
     var _a;
@@ -635,6 +636,683 @@ class SlicesManager extends BaseManager {
     }));
     return { errors: customTypeReadErrors };
   }
+  async generateSlice(args) {
+    var _a, _b, _c, _d, _e;
+    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.");
+    }
+    const bedrockClient = new BedrockRuntimeClient({
+      region: AWS_REGION,
+      credentials: {
+        accessKeyId: AWS_ACCESS_KEY_ID,
+        secretAccessKey: AWS_SECRET_ACCESS_KEY
+      }
+    });
+    const getSharedSliceSchema = () => {
+      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>;
+			  };
+			};
+`;
+    };
+    const buildSystemMessage = (schema, existingSlice) => {
+      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();
+    };
+    const generatePrismicModel = async (userPrompt) => {
+      var _a2, _b2, _c2, _d2, _e2;
+      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 }
+                }
+              }
+            ]
+          } : {
+            role: "user",
+            content: [
+              {
+                text: `Generate a valid Prismic JSON model based on the following description:
+
+${userPrompt}`
+              }
+            ]
+          }
+        ]
+      });
+      try {
+        console.log("Before sending command");
+        const response2 = await bedrockClient.send(command);
+        console.log("After response", JSON.stringify(response2));
+        const result = (_e2 = (_d2 = (_c2 = (_b2 = (_a2 = response2.output) == null ? void 0 : _a2.message) == null ? void 0 : _b2.content) == null ? void 0 : _c2[0]) == null ? void 0 : _d2.text) == null ? void 0 : _e2.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 }
+                  }
+                }
+              ]
+            }
+          ]
+        });
+        console.log("Before sending mock command");
+        const response2 = await bedrockClient.send(command);
+        console.log("After response", JSON.stringify(response2));
+        const result = (_e = (_d = (_c = (_b = (_a = response2.output) == null ? void 0 : _a.message) == null ? void 0 : _b.content) == null ? void 0 : _c[0]) == null ? void 0 : _d.text) == null ? void 0 : _e.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
+    };
+  }
 }
 export {
   SlicesManager