Skip to content

Add duo chat into the project studio panel part-3

Tomas Bulvarequested to merge
tbulva-duo-studio-p3 into master

What does this MR do and why?

This MR implements dynamic title support for the GitLab Duo Studio panel, allowing the header title to update dynamically based on the active chat context (e.g., workflow goal, agent name).

Problem: The Duo Studio panel header always displayed a static title, making it difficult for users to understand which conversation or workflow they were viewing, especially when switching between different chats or viewing historical threads.

Solution: This MR adds a dynamic title system that:

  • Updates the panel header to show contextual titles (workflow goals, agent names, thread titles)
  • Refactors configuration management to use a centralized chatConfiguration object
  • Simplifies prop drilling by injecting configuration at the root level
  • Emits title change events from child components to update the parent header

Implementation details

1. Dynamic Title System (content_container.vue)

  • Added currentChatTitle data property to store dynamic titles
  • Implemented handleTitleChange() method to handle change-title events from child components
  • Updated header to display currentChatTitle when available, falling back to activeTab.title
  • Added responsive text overflow styling to handle long titles gracefully

2. Configuration Centralization (init_duo_panel.js)

  • Created chatConfiguration object containing:
    • component: The active chat component (Agentic or placeholder)
    • title: Default title for the chat
    • isAgenticAvailable: Feature availability flag
    • defaultProps: Common props like isEmbedded
  • Injected chatConfiguration via Vue's provide/inject pattern
  • Eliminated need for separate isAgenticAvailable and chatTitle injections

3. AI Panel Simplification (ai_panel.vue)

  • Removed direct imports of chat components
  • Injected chatConfiguration instead of individual props
  • Simplified computed properties by referencing centralized configuration
  • Reduced code duplication across chat/new/history tabs
  • Removed availableChat, getChatTitle, and defaultChatProps computed properties

4. Agentic Chat Updates (duo_agentic_chat.vue)

  • Changed isEmbedded from prop to computed data property derived from activeTabData
  • Removed unnecessary skip() conditions in Apollo queries (simpler, always fetch)
  • Added @change-title event emission in hydrateActiveThread() to display workflow goal
  • Changed default mode prop from 'default' to 'active' for consistency
  • Added activeTabData prop to receive parent context
  • Derived isAgenticAvailable and userId from activeTabData.props

5. View Updates (_ask_duo_button.html.haml)

  • Updated data attribute from agentic_available to agentic-available for consistency with Vue naming conventions

Test coverage

Updated Specs:

  1. ai_panel_spec.js

    • Updated to inject chatConfiguration instead of individual properties
    • Added tests for chatConfiguration structure
    • Updated component mounting to use new injection pattern

  2. duo_agentic_chat_spec.js

    • Added activeTabData prop to test setups
    • Updated tests for isEmbedded derived from activeTabData
    • Verified change-title event emission
    • Added comprehensive tests for new prop structure

  3. _ask_duo_button.html.haml_spec.rb

    • Updated to match new data-agentic-available attribute naming

Dependencies

This MR requires: duo-ui!297 (merged)

query: author = "tbulva" AND type = MergeRequest AND myReaction = "cat_typing"
fields: title, state
title: Add duo chat into the project studio panel parts 
display: table
sort: createdAt asc

References

Screenshots or screen recordings

Before After
image image
image image
image image

How to set up and validate locally

  1. Enable duo and enable agentic chat
  2. Navigate to any page with GitLab Duo Studio panel enabled
  3. Open the Duo panel from the navigation rail
  4. Create a new agentic workflow with a specific goal
  5. Verify the panel header shows the workflow goal as the title
  6. Switch between different threads
  7. Verify the title updates to reflect the active thread
  8. Test with long titles to verify truncation works correctly

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 Tomas Bulva

Merge request reports