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

package/dist/managers/slices/SlicesManager.js

@@ -14,7 +14,6 @@ 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;
@@ -636,683 +635,6 @@ 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