Add Model Selection Dropdown to Web Agentic Chat Panel

What does this MR do and why?

This MR adds the user-level Model Selection dropdown to the agentic chat panel. The component is gated by a feature flag (ai_user_model_switching), also added in this MR.

Notes:

  • User-level model selections are to be handled by a localStorage value in browser. For the first iteration of the feature, we do no require DB persistence and can cut scope with this solution.
  • The API for fetching model selection options is not yet ready. Mock data is used in its place.
  • The API for updating model selections is not ready. Handling the model selection update is out of scope in this MR.

References

Epic: &19251 (closed)

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/568128

Screenshots or screen recordings

Web Agentic Chat Window (feature flag disabled)

  • No visual changes before or after

Web Agentic Chat Window (feature flag enabled)

Before After (Dropdown closed) After (Dropdown open)
Screenshot_2025-09-08_at_12.35.43_pm Screenshot_2025-09-08_at_12.35.22_pm Screenshot_2025-09-08_at_12.34.58_pm

Screen Recording

Screen_Recording_2025-09-08_at_12.48.45_pm

How to set up and validate locally

Set-up

  • An active online cloud or legacy, Ultimate license.
  1. Start GDK in saas mode GITLAB_SIMULATE_SAAS=1 gdk start
  2. Enable the appropriate feature flags duo_agentic_chat, ai_model_switching and ai_user_model_switching by visiting http://gdk.test:3000/rails/features/
  3. Run the Duo setup rake task GITLAB_SIMULATE_SAAS=1 bundle exec 'rake gitlab:duo:setup' to seed DB with a Duo test group (it will be called gitlab-duo).
  4. Visit the root group page i.e http://gdk.test:3000/groups/gitlab-duo
  5. You should see a "GitLab Duo Chat" button on the top right of the page. Click on it to open the chat panel.
  6. Validate that you see the model selection dropdown, as noted in the "After" screenshots.
  7. Validate that selecting a model in the dropdown adds/updates the agentic-chat-user-selected-model key in localStorage.
    • To validate this:
      • open devtools
      • Navigate to Application -> Local storage -> http://gdk.test:3000 and look for the agentic-chat-user-selected-model key
  8. Validate that disabling either ai_user_model_switching or ai_model_switching feature flag hides the model selection dropdown (both flags must be enabled for the feature to show)

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 Julie Huang

Merge request reports

Loading