Map agent avatar to the Duo chat panel header
What does this MR do and why?
Summary
This change fixes a visual bug where the AI chat header was showing a blank or incorrectly colored avatar icon before an agent was selected.
Previously, the chat header had no way to know which agent's avatar to display on initial load, so it defaulted to a generic red identicon. Now, the header automatically falls back to the default foundational chat agent's avatar when no specific agent has been chosen yet, ensuring the correct avatar and color are shown from the start.
Additionally, a helper function was introduced to reliably convert an agent's ID into a number that the avatar component can use to pick a consistent color since some agent IDs are text-based slugs rather than plain numbers, which previously caused the color calculation to break.
References
N/A
Screenshots or screen recordings
| Before | After |
|---|---|
 |
 |
How to set up and validate locally
- Ensure GitLab Duo Agentic Chat is enabled for your user/namespace and that you have at least one foundational chat agent available.
- Start your GDK (
gdk start) and make sure the frontend bundler (Vite) is running so the changes are served. - Open GitLab Duo Chat from the top navigation to display the AI chat panel.
- On initial load (no agent selected): confirm the panel header shows the default agent's avatar (image or a non-red, agent-specific identicon color) and that a circular skeleton placeholder appears briefly while the agents load — the title should not shift and there should be no red "G" flash.
- Select different agents from the agent picker dropdown and confirm each agent's avatar in both the dropdown list item and the panel header shows the agent's image when available, or a consistent, distinct color per agent (no longer all red).
- Reload the page a few times and confirm the avatar color for a given agent stays the same (deterministic) across reloads.
To run the automated checks for the changed files:
yarn jest ee/spec/frontend/ai/utils_spec.js ee/spec/frontend/ai/duo_agentic_chat/components/duo_chat_header_spec.js ee/spec/frontend/ai/components/new_chat_button_spec.js ee/spec/frontend/ai/duo_agentic_chat/components/duo_agentic_chat_state_manager_spec.jsMR 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.