Global: Update AI Drawer to use chat history stored in the backend

cypress/e2e/content/actions.spec.js

@@ -38,7 +38,7 @@ describe("Actions in content editor", () => {
       );
     });
 
-    cy.getBySelector(`"field:markdown"`)
+    cy.getBySelector("field:markdown")
       .find("textarea")
       .click()
       .clear()
@@ -53,15 +53,15 @@ describe("Actions in content editor", () => {
     cy.getBySelector("toast").contains("Missing Data in Required Fields", {
       matchCase: false,
     });
-    cy.getBySelector(`"field:markdown"`)
+    cy.getBySelector("field:markdown")
       .find("textarea")
       .click()
       .clear()
       .type("markdown");
   });
 
   it("Must not save when exceeding or lacking characters", () => {
-    cy.getBySelector(`"field:text"`)
+    cy.getBySelector("field:text")
       .find("input")
       .click()
       .clear()
@@ -77,7 +77,7 @@ describe("Actions in content editor", () => {
       .find("li")
       .first()
       .contains("Requires 8 more characters.");
-    cy.getBySelector(`"field:text"`)
+    cy.getBySelector("field:text")
       .find("input")
       .click()
       .clear()
@@ -93,7 +93,7 @@ describe("Actions in content editor", () => {
       .find("li")
       .first()
       .contains("Exceeding by 5 characters.");
-    cy.getBySelector(`"field:text"`)
+    cy.getBySelector("field:text")
       .find("input")
       .click()
       .clear()
@@ -109,15 +109,15 @@ describe("Actions in content editor", () => {
         matchCase: false,
       }
     );
-    cy.getBySelector(`"field:text"`)
+    cy.getBySelector("field:text")
       .find("input")
       .click()
       .clear()
       .type("Mitchell Wilder");
   });
 
   it("Must not save when regex is not matched", () => {
-    cy.getBySelector(`"field:textarea"`)
+    cy.getBySelector("field:textarea")
       .find("textarea")
       .first()
       .click()
@@ -133,7 +133,7 @@ describe("Actions in content editor", () => {
       .find("li")
       .first()
       .contains("Must be an email (e.g. hello@zesty.io)");
-    cy.getBySelector(`"field:textarea"`)
+    cy.getBySelector("field:textarea")
       .find("textarea")
       .first()
       .click()
@@ -150,7 +150,7 @@ describe("Actions in content editor", () => {
         matchCase: false,
       }
     );
-    cy.getBySelector(`"field:textarea"`)
+    cy.getBySelector("field:textarea")
       .find("textarea")
       .first()
       .click()
@@ -166,7 +166,7 @@ describe("Actions in content editor", () => {
     cy.get(`[data-cy="field:fontawesome"] input`).should("not.exist");
 
     // Make an edit to enable save button
-    cy.getBySelector(`"field:text"`)
+    cy.getBySelector("field:text")
       .find("input")
       .click()
       .clear()
@@ -361,20 +361,20 @@ describe("Actions in content editor", () => {
       cy.visit(`/content/${Cypress.env("modelZUID")}/new`);
     });
 
-    cy.getBySelector(`"field:text"`)
+    cy.getBySelector("field:text")
       .find("input")
       .should(
         "have.value",
         FIELDS.find((field) => field.name === "text").settings.defaultValue
       );
-    cy.getBySelector(`"field:textarea"`)
+    cy.getBySelector("field:textarea")
       .find("textarea")
       .first()
       .should(
         "have.value",
         FIELDS.find((field) => field.name === "textarea").settings.defaultValue
       );
-    cy.getBySelector(`"field:markdown"`)
+    cy.getBySelector("field:markdown")
       .find("textarea")
       .should(
         "have.value",
@@ -387,7 +387,7 @@ describe("Actions in content editor", () => {
       cy.visit(`/content/${Cypress.env("modelZUID")}/new`);
     });
 
-    cy.getBySelector(`"field:text"`)
+    cy.getBySelector("field:text")
       .find("input")
       .click()
       .clear()
@@ -464,24 +464,22 @@ describe("Actions in content editor", () => {
     // Increase timeout to account for longer AI generation times.
     const aiDataGenerationTimeout = { timeout: 60_000 };
 
-    cy.getBySelector(`"field:text"`)
+    cy.getBySelector("field:text")
       .find("input")
       .click()
       .clear()
       .type(TEST_DATA?.ai);
 
     // Generate AI content for markdown
-    cy.getBySelector(`"field:markdown"`).find("[data-cy='AIOpen']").click();
+    cy.getBySelector("field:markdown").find("[data-cy='AIOpen']").click();
     cy.getBySelector("AITopicField").type("biking");
     cy.getBySelector("AIAudienceField").type("young adults");
     cy.getBySelector("AIGenerate").click();
 
     cy.get("[data-cy='AIApprove']", aiDataGenerationTimeout).click();
 
     // Generate AI content for wysiwyg_basic
-    cy.getBySelector(`"field:wysiwyg_basic"`)
-      .find("[data-cy='AIOpen']")
-      .click();
+    cy.getBySelector("field:wysiwyg_basic").find("[data-cy='AIOpen']").click();
     cy.getBySelector("AITopicField").type("biking");
     cy.getBySelector("AIAudienceField").type("young adults");
     cy.getBySelector("AIGenerate").click();

cypress/e2e/content/item-list-table.spec.js

@@ -20,7 +20,7 @@ describe("Content item list table", () => {
     });
 
     cy.getBySelector("sortByFilter_default").click();
-    cy.getBySelector(`"sort:text"`).click();
+    cy.getBySelector("sort:text").click();
     cy.getBySelector("listItemTable")
       .find('[data-cy="itemListRow"]')
       .first()
@@ -37,7 +37,7 @@ describe("Content item list table", () => {
 
     cy.intercept("/search/items*").as("searchItems");
     cy.intercept("/v1/content/models*").as("contentModels");
-    cy.getBySelector(`"field:text"`)
+    cy.getBySelector("field:text")
       .find("input")
       .clear()
       .type(`Delete me ${NOW}`);

cypress/e2e/content/meta.spec.js

@@ -111,7 +111,7 @@ describe("Content Meta", () => {
       });
     });
 
-    cy.getBySelector(`"field:text"`).find("input").type(today);
+    cy.getBySelector("field:text").find("input").type(today);
     cy.wait(500); // wait for debounced input to settle
     cy.getBySelector("CreateItemSaveButton").click();
     cy.getBySelector("toast").contains("Created Item");
@@ -129,7 +129,7 @@ describe("Content Meta", () => {
     cy.iframe("#wysiwyg_basic_ifr")
       .click()
       .type(`{selectall}{backspace}meta description`);
-    cy.getBySelector(`"field:text"`)
+    cy.getBySelector("field:text")
       .find("input")
       .clear()
       .type(`{selectall}{backspace} meta title ${today}`);

cypress/e2e/shell/ai-drawer.spec.js

@@ -0,0 +1,184 @@
+// Purposedly setting this to 1 minute as the client call sometimes takes a while to respond
+// causing some tests to fail intermittently
+const AI_CLIENT_TIMEOUT = { timeout: 60000 };
+
+describe("AI drawer", () => {
+  before(() => {
+    cy.task("seed:content", "fixtures/ai-drawer.json").then(
+      ({ model, items }) => {
+        Cypress.env("modelZUID", model?.ZUID);
+        Cypress.env("itemZUID", items[0]?.meta?.ZUID);
+      }
+    );
+  });
+
+  after(() => {
+    cy.deleteModel(Cypress.env("modelZUID"));
+  });
+
+  it("should only be available to the content, code and blocks app", () => {
+    cy.visit("/launchpad");
+    cy.getBySelector("AIDrawerToggle").click();
+    cy.getBySelector("AIDrawerDisabled").should("not.exist");
+
+    [
+      "/schema",
+      "/media",
+      "/leads",
+      "/redirects",
+      "/reports",
+      "/apps",
+      "/settings/instance/general",
+    ].forEach((path) => {
+      cy.visit(path);
+      cy.getBySelector("AIDrawerDisabled").should("exist");
+    });
+
+    [
+      "/content/6-a1a600-k0b6f0/7-a1be38-1b42ht",
+      "/content/6-a1a600-k0b6f0/7-a1be38-1b42ht/meta",
+      "/code/file/views/11-eb8dec-6nsjbf",
+      "/blocks/6-d8b088cc9c-gwk3w7/7-ee94b5e98d-ss015b",
+    ].forEach((path) => {
+      cy.visit(path);
+      cy.getBySelector("AIDrawerEnabled").should("exist");
+    });
+  });
+
+  it("should be able to load a chat history", () => {
+    cy.clearLocalStorage();
+    cy.waitOn("/v1/content/models*", () => {
+      cy.visit(
+        `/content/${Cypress.env("modelZUID")}/${Cypress.env("itemZUID")}`
+      );
+    });
+    cy.getBySelector("DuoModeToggle").click({ force: true });
+
+    const prompt = "Hello world";
+
+    cy.intercept("GET", "**/chats/*?*").as("getChat");
+    cy.intercept("POST", "**/client").as("postClient");
+
+    cy.getBySelector("AIDrawerToggle").click();
+    cy.getBySelector("AIDrawerEnabled").should("exist");
+    cy.wait(500);
+    cy.getBySelector("AIDrawerComposer").type(prompt);
+    cy.getBySelector("AIDrawerSubmitPrompt").click();
+    cy.wait("@postClient", AI_CLIENT_TIMEOUT);
+    cy.wait("@getChat");
+    cy.getBySelector("AIDrawerUserInput").should("contain", prompt);
+    cy.getBySelector("AIDrawerSystemOutput").should("have.length", 1);
+    cy.reload();
+    cy.wait("@getChat");
+    cy.getBySelector("AIDrawerUserInput").should("contain", prompt);
+    cy.getBySelector("AIDrawerSystemOutput").should("have.length", 1);
+  });
+
+  it("should be able to generate text content and apply them to fields", () => {
+    cy.intercept("GET", "**/chats/*?*").as("getChat");
+    cy.intercept("POST", "**/client").as("postClient");
+
+    cy.getBySelector("AIDrawerComposer").type(
+      "Generate a sensational title for the page_title field"
+    );
+    cy.getBySelector("AIDrawerSubmitPrompt").click();
+    cy.wait("@postClient", AI_CLIENT_TIMEOUT);
+    cy.wait("@getChat");
+    cy.getBySelector("AIDrawerSetValue").first().should("exist").click();
+    cy.getBySelector("field:page_title")
+      .find("input")
+      .invoke("val")
+      .should("not.be.empty");
+  });
+
+  it("should be able to generate images and apply them to image fields", () => {
+    cy.intercept("GET", "**/chats/*?*").as("getChat");
+    cy.intercept("POST", "**/client").as("postClient");
+
+    cy.getBySelector("AIDrawerComposer").type(
+      "Generate an image of the alps for the page_image field"
+    );
+    cy.getBySelector("AIDrawerSubmitPrompt").click();
+    cy.wait("@postClient", AI_CLIENT_TIMEOUT);
+    cy.wait("@getChat");
+    cy.getBySelector("AIDrawerSetValue").eq(1).should("exist").click();
+    cy.getBySelector("field:page_image")
+      .find('[data-cy="mediaItem-container"]')
+      .should("exist");
+  });
+
+  it("should be able to generate suggestions", () => {
+    cy.intercept("GET", "**/chats/*?*").as("getChat");
+    cy.intercept("POST", "**/client").as("postClient");
+
+    cy.getBySelector("AIDrawerGenerateSuggestions").click();
+    cy.wait("@postClient", AI_CLIENT_TIMEOUT);
+    cy.wait("@getChat");
+    cy.getBySelector("AIDrawerSystemSuggestion").should("have.length", 3);
+    cy.getBySelector("AIDrawerSystemSuggestion").first().click();
+    cy.getBySelector("AIDrawerComposer")
+      .find("textarea")
+      .first()
+      .invoke("val")
+      .should("not.be.empty");
+  });
+
+  it("should be able to generate blocks", () => {
+    cy.intercept("GET", "**/chats/*?*").as("getChat");
+    cy.intercept("POST", "**/client").as("postClient");
+
+    cy.getBySelector("AIDrawerComposer").type(
+      "{selectall}{del}Generate a block for a dog profile"
+    );
+    cy.getBySelector("AIDrawerSubmitPrompt").click();
+    cy.wait("@postClient", AI_CLIENT_TIMEOUT);
+    cy.wait("@getChat");
+    cy.getBySelector("AIDrawerNavigate").should("exist");
+  });
+
+  it("should be able to auto apply generated content", () => {
+    cy.intercept("GET", "**/chats/*?*").as("getChat");
+    cy.intercept("POST", "**/client").as("postClient");
+
+    cy.getBySelector("field:page_title")
+      .find("input")
+      .clear()
+      .should("have.value", "");
+    cy.getBySelector("AIDrawerSettings").click();
+    cy.getBySelector("AIDrawerAutoApplyToggle").click();
+    cy.getBySelector("AIDrawerComposer").type(
+      "Generate a title for people who love to fish for the page_title field"
+    );
+    cy.getBySelector("AIDrawerSubmitPrompt").click();
+    cy.wait("@postClient", AI_CLIENT_TIMEOUT);
+    cy.wait("@getChat");
+    cy.getBySelector("field:page_title")
+      .find("input")
+      .invoke("val")
+      .should("not.be.empty");
+  });
+
+  it("should be able to create a new chat session", () => {
+    cy.getBySelector("AIDrawerClearChat").click();
+    cy.getBySelector("AIDrawerUserInput").should("not.exist");
+  });
+
+  it("should be able to edit code", () => {
+    cy.intercept("GET", "**/chats/*?*").as("getChat");
+    cy.intercept("POST", "**/client").as("postClient");
+    cy.intercept("GET", "**/v1/web/views/*").as("getView");
+
+    cy.getBySelector("ContentItemMoreButton").click();
+    cy.getBySelector("EditTemplate").click();
+    cy.contains("Don't Save").click();
+    cy.wait("@getView");
+    cy.getBySelector("AIDrawerEnabled").should("exist");
+    cy.getBySelector("AIDrawerComposer").type(
+      "Generate a code with an H1 wrapping the page_title field"
+    );
+    cy.getBySelector("AIDrawerSubmitPrompt").click();
+    cy.wait("@postClient", AI_CLIENT_TIMEOUT);
+    cy.wait("@getChat");
+    cy.getBySelector("AIDrawerSetValue").should("exist");
+  });
+});