XB AI: User selection should be taken into account while building page
>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3540211. --> Reported by: [narendrar](https://www.drupal.org/user/1730192) Related to !40 !1467 >>> <h3 id="overview">Overview</h3> <p>While creating a page using AI in XB, Component selection should be taken into account even if the user doesn't explicitly ask for that.<br> <strong>Scenario 1:</strong><br> User has selected &ldquo;Card Container&rdquo; component on the preview. There&rsquo;s an empty content slot. User asks &ldquo;Can you add some cards to show case the product highlights?&rdquo;. I&rsquo;d expect these cards to be added to the slot.</p> <p><strong>Scenario 2:</strong><br> User has selected hero component on the preview. Hero component has an empty slot for buttons. User asks &ldquo;Can you add some cards to show case the product highlights?&rdquo;. I&rsquo;d expect these cards to be added in a new container below the hero.</p> <p>Currently the page builder agent generates components to be placed, in the following format</p> <pre>&nbsp;&nbsp;&nbsp; reference_nodepath: [array, of, integers]&nbsp; # From Step 3<br>&nbsp;&nbsp;&nbsp; placement: below&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; # 'above' or 'below'<br>&nbsp;&nbsp;&nbsp; components:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; - sdc.component.id:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; props:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; prop_name: "value"<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; slots:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; slot_name:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; - sdc.nested.component:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; props:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; nested_prop: "value"<br>&nbsp;&nbsp;&nbsp; message: "Concise 1-2 sentence summary of changes made"</pre><p>Right now, this only supports placing one or more components into a single specified position. It doesn&rsquo;t handle prompts that require placing components in different positions at the same time.</p> <p>Some examples:</p> <p>Page already contains components, and User asks <em>Add a heading with the text &lsquo;What is Drupal&rsquo; to the top of the page, and a paragraph explaining the features of Drupal to the bottom of the page.</em></p> <p>The page contains a two-column component. User selects it and asks: <em>Add two cards to each slot of this component</em></p> <p>Multiple regions available <em>Add a button with text &lsquo;Contact us&rsquo; to all the regions</em></p> <h3 id="proposed-resolution">Proposed resolution</h3> <p>Changed the yml structure returned by the agent to the following format</p> <pre>&nbsp; operations:<br>&nbsp;&nbsp;&nbsp; - target: [FIRST_LOCATION] // Can be region name or slot id ('parentuuid/slot_name' format)<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; reference_uuid: UUID of an existing component. New components would be placed above or below this component, if provided.<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; placement: [inside or below or above]. inside is used only for adding components to an empty region or slot.<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; components:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; - sdc.component.id:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; props:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; prop_name: "value"<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; - sdc.another_component.id:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; props:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; prop_name: "value"<br>&nbsp;&nbsp;&nbsp; - target: [SECOND_LOCATION]<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; reference_uuid: [UUID or leave empty]<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; placement: [inside or below or above]<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; components:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; - sdc.another.component:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; props:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; another_prop: "value"</pre><p>This allows adding components at multiple positions simultaneously. </p> <p>Once the agent provides output in the above format, its first passed through <code>CanvasAiPageBuilderHelper::addUuidToAllComponent()</code>, which assigns a unique UUID to each components.</p> <p>The result is then given to <code>CanvasAiPageBuilderHelper::createExpectedPageLayout()</code>, which takes two inputs: the current layout and the component structure with UUIDs attached. Based on the values of target, reference_uuid, and placement, components are positioned in the correct place within the layout by <code>CanvasAiPageBuilderHelper::placeComponentsInLayout()</code></p> <p>This step doesn&rsquo;t actually update the page itself. It only performs array operations on the current layout data. Once the expected layout structure is prepared,<code> CanvasAiPageBuilderHelper::getCalculatedNodepath()</code> calculates the nodePath values for each newly added component.</p> <h3 id="ui-changes">User interface changes</h3> > Related issue: [Issue #3543519](https://www.drupal.org/node/3543519) > Related issue: [Issue #3544614](https://www.drupal.org/node/3544614) > Related issue: [Issue #3545378](https://www.drupal.org/node/3545378) > Related issue: [Issue #3549232](https://www.drupal.org/node/3549232) > Related issue: [Issue #3530701](https://www.drupal.org/node/3530701)
issue