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

📌 Generate/update title and metadata for pages created from components Active has landed. So this issue needs a rebase

Rebased and added tests. Ready for review

Tried to test it manually, but I am getting below error:
Error: Call to undefined method Drupal\xb_ai\XbAiPageBuilderHelper::extractComponentIds() in Drupal\xb_ai\Plugin\AiFunctionCall\SetAIGeneratedTemplateData->execute()

That method was removed in 📌 Allow AI to validate changes before publishing Active . We should use the validation added in that issue here.

This is now blocked by 🐛 Option to provide the nodePath in addNewComponentToLayout Active

This is now ready for review. It extends on the code changes made in ✨ XB AI: Create a common service for validations Active . So that issue must be merged first before reviewing this

(How we bring the Salsa digital stuff):

https://github.com/salsadigitalauorg/xb_metadata/

Things Marcus thinks:

• - There are things hardcoded into the design system for metadata, Can we bring it into our existing UI?
• - Something similar to how AI Agents and config works, we have something where the information comes from the yaml files and then you can override it.
• - We need to decide if the thing we already have, if there is some missing metadata

Things Akhil thinks:

• - There are two approaches: The CT version, they do one component at a time, (They it gets the features of each component) when asked.
• - The version in XB gets all the tool calls and componenet information at once. Akhil things moving to the other one would be better.

🐛 Canvas AI: Agent should pass values to image props correctly Active is a blocker now.

Linking to current blockers