Add chat mode switching and fix external triggers for embedded panel
Completes: https://gitlab.com/gitlab-org/gitlab/-/issues/562160
Users need to toggle between Classic Chat and Agentic Chat in both the old drawer design and the new embedded side panel design. Their preference should persist when navigating or switching between UI modes. Additionally, external triggers (RCA button, vulnerability explain, etc.) were not opening the AI panel in embedded mode.
The Solution
Created a single reactive flag (chatMode) that:
- Tracks the current mode - stores whether user wants 'classic' or 'agentic'
- Persists across sessions - saves to cookie so preference survives page reloads
- Works everywhere - both drawer and embedded panel read this same flag
- Auto-updates the UI - when the flag changes, Vue automatically switches the chat component
Also added reactive panel state management (activeTab) so external triggers can directly open the embedded panel.
Result: Users can toggle chat modes in any UI design, and their choice follows them everywhere. External triggers
work consistently in both UI modes and always open in classic chat (for now
| Demo |
|---|
| 2025-10-19_20-06-39 |