Fix agentic chat toggle row layout and interaction

What does this MR do and why?

In the agentic chat model selection dropdown (behind the new_model_selection feature flag), this change makes the Agentic chat toggle row clickable, adds a hover state, and rebuilds the layout so it no longer depends on GlToggle's internals, matching other toggle-as-dropdown-item patterns in the codebase (e.g. board view options, work item display settings). The same treatment is applied to the non-agentic "Agentic chat" toggle in chat_model_selector.vue, which shares the pattern.

References

Screenshots or screen recordings

Before After
CleanShot_2026-09-24_at_1.44.31_PM CleanShot_2026-09-24_at_1.42.57_PM_2x

How to set up and validate locally

  1. Enable the feature flag in a Rails console:
    Feature.enable(:new_model_selection)
  2. Open GitLab Duo agentic chat and open the model selection dropdown.
  3. Hover the Agentic chat row — the row shows an inset, rounded hover background that stays within the panel (no bleed past the rounded corners or caret arrow).
  4. Confirm the label sits on the left and the switch on the right, with padding around the row.
  5. Click anywhere on the row (not just the switch) — the toggle flips.
  6. Confirm keyboard interaction still works: Tab to the switch and press Enter/Space.
  7. Switch to non-agentic chat and confirm the "Agentic chat" toggle row behaves the same.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Austin Regnery

Merge request reports

Loading
Loading