Introduce AI Agents and tools to create entire page templates using available component entities

This is now unblocked as ✨ Introduce AI Agents and tools to Build Pages from Single Directory Components Active has been merged.

Tested it locally, I think one thing which is not working as expected is that the final message about the template is created successfully is shown before and then the message about creating the footer section is shown. Attached the screen recording showing how it's working. →

There is a lot of complexity that I think can be solved via this: https://git.drupalcode.org/project/experience_builder/-/merge_requests/1.... Please look if it makes sense to move over to that.

Some other NITs

Something that's important here is that right now there's only one page template, which means that the header and footer apply to all pages within the site. We may introduce the concept of multiple page templates in future but it seems that we have to build this with the assumption that they are global.

Some example prompts to test:

1. Create a header for a restaurant site with logo, search bar and main navigation menu
2. Generate a footer for a restaurant site with location/hours, menu links, social media, and reservation button
3. Create a modern header and footer for a tech startup with gradient background, featuring product demos button and investor relations links
4. Create a footer for a SaaS company with 4 columns: Product links, Company info, Resources, and Contact details with social media icons"

Going to close the current MR. The current approach generates a header and footer for all templates. When generating a template, the agent should generate only the main content of the page. The header and footer will be generated only if the user explicitly requests them. By default, all components will be placed in the content region.

akhil babu → changed the visibility of the branch 0.x to hidden.

akhil babu → changed the visibility of the branch 1.x to hidden.

akhil babu → closed merge request !1322

akhil babu → changed the visibility of the branch 3533079-template-generation to hidden.

akhil babu → changed the visibility of the branch 3533079-template-generation to active.

I have updated the implementation.
A new form has been added under Configuration >> AI >> XB AI Theme Region Settings, which can be used to provide descriptions for different regions when global regions are enabled. These descriptions help the AI use the regions more effectively.

By default, only the main body will be generated during template generation.
The header and footer will be generated only if explicitly requested.
Header and footer components will be placed in the corresponding global regions if available. otherwise, they will be placed in the content region.

The following types of prompts are expected to work:

• "Create a template for the homepage of a pizza shop website"
• "Create a template for the homepage of a pizza shop, with proper header and footer"
• "Create a header template for a pizza shop website"
• "Create a footer template for a pizza shop website"

Known issue:
If only content region is enabled, and the following prompts are used one by one

• "Create a template for the homepage of a pizza shop website"
• "Create a header template for a pizza shop website"
• "Create a footer template for a pizza shop website"

The footer components woudl get placed on the top of the page, above the header.
Reason:

  const theLayoutModel = useAppSelector(
    (state) => state?.layoutModel?.present
  );

is not returning the current layout structure unless the page is manually refreshed. This was working fine earlier. Not sure if something has been updated recently.

Switching to the correct tag