@gitlab/duo-ui 15.13.0 → 15.14.0

package/dist/components/agentic_chat/web_agentic_duo_chat.js

@@ -6,6 +6,7 @@ import { VIEW_TYPES } from '../chat/components/duo_chat_header/constants';
 import DuoChatLoader from '../chat/components/duo_chat_loader/duo_chat_loader';
 import DuoChatPredefinedPrompts from '../chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts';
 import DuoChatConversation from '../chat/components/duo_chat_conversation/duo_chat_conversation';
+import { messageRenderersValidator } from '../chat/components/utils';
 import WebDuoChatHeader from '../chat/components/duo_chat_header/web_duo_chat_header';
 import DuoChatThreads from '../chat/components/duo_chat_threads/duo_chat_threads';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -341,6 +342,18 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    /**
+     * Optional array of custom message renderers passed through to MessageMap.
+     * Each entry is an object with `component` (Vue component) and `matchMessage` (Function).
+     */
+    messageRenderers: {
+      type: Array,
+      required: false,
+      validator: messageRenderersValidator,
+      default() {
+        return [];
+      }
     }
   },
   data() {
@@ -772,7 +785,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
         'duo-chat-history gl-px-4',
         _vm.$scopedSlots['custom-empty-state'] && !_vm.hasMessages && !_vm.isLoading
           ? 'gl-m-auto'
-          : 'gl-mt-auto gl-pb-4 gl-pt-6' ],attrs:{"mode":"out-in","tag":"section","name":_vm.$scopedSlots['custom-empty-state'] ? '' : 'message',"data-testid":"chat-messages"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('duo-chat-conversation',{key:("conversation-" + index),attrs:{"enable-code-insertion":_vm.enableCodeInsertion,"messages":conversation,"show-delimiter":index > 0,"with-feedback":_vm.withFeedback,"is-tool-approval-processing":_vm.isToolApprovalProcessing,"working-directory":_vm.workingDirectory,"trusted-urls":_vm.trustedUrls,"is-binary-feedback-enabled":_vm.isBinaryFeedbackEnabled},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet,"copy-code-snippet":_vm.onCopyCodeSnippet,"copy-message":_vm.onCopyMessage,"get-context-item-content":_vm.onGetContextItemContent,"approve-tool":_vm.onApproveToolCall,"deny-tool":_vm.onDenyToolCall,"open-file-path":_vm.onOpenFilePath}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('div',{key:"empty-state-container"},[_vm._t("custom-empty-state",function(){return [_c('div',{key:"empty-state-message",staticClass:"duo-chat-message gl-rounded-bl-none gl-leading-20 gl-text-default gl-break-anywhere",attrs:{"data-testid":"gl-duo-chat-empty-state"}},[_c('div',{staticClass:"gl-mb-[3.75rem] gl-flex gl-flex-col gl-items-center gl-justify-center gl-gap-3 gl-text-center"},[_c('h1',{staticClass:"gl-my-0 gl-text-[3.5rem]",attrs:{"data-testid":"gl-duo-chat-empty-state-emoji"}},[_vm._v("\n                  "+_vm._s(_vm.$options.i18n.CHAT_EMPTY_STATE_EMOJI)+"\n                ")]),_vm._v(" "),(_vm.agentName)?_c('h2',{staticClass:"gl-heading-2 gl-my-0",attrs:{"data-testid":"gl-duo-chat-empty-state-greeting"}},[_vm._v("\n                  "+_vm._s(_vm.emptyStateGreeting)+"\n                ")]):_vm._e(),_vm._v(" "),_c('h2',{staticClass:"gl-my-0 gl-text-size-h2",attrs:{"data-testid":"gl-duo-chat-empty-state-title"}},[_vm._v("\n                  "+_vm._s(_vm.emptyStateMainText)+"\n                ")]),_vm._v(" "),_c('p',{staticClass:"gl-text-base gl-text-subtle",attrs:{"data-testid":"gl-duo-chat-empty-state-subtitle"}},[_vm._v("\n                  "+_vm._s(_vm.emptyStateSubText)+"\n                ")])]),_vm._v(" "),_c('duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})],1)]})],2)]:_vm._e(),_vm._v(" "),(_vm.isLoading)?_c('duo-chat-loader',{key:"loader",attrs:{"tool-name":_vm.toolName}}):_vm._e(),_vm._v(" "),_c('div',{key:"anchor",ref:"anchor",staticClass:"scroll-anchor"})],2)],1),_vm._v(" "),(!_vm.shouldShowThreadList)?_c('footer',{staticClass:"duo-chat-drawer-footer gl-relative gl-z-2 gl-shrink-0",attrs:{"data-testid":"chat-footer"}},[_c('p',{staticClass:"gl-mb-3 gl-text-sm gl-text-subtle",class:{ 'gl-invisible': !_vm.hasAssistantMessages },attrs:{"data-testid":"chat-disclaimer"}},[_vm._v("\n      "+_vm._s(_vm.$options.i18n.CHAT_DISCLAIMER)+"\n    ")]),_vm._v(" "),_c('gl-form',{attrs:{"data-testid":"chat-prompt-form"},on:{"submit":function($event){$event.stopPropagation();$event.preventDefault();return _vm.sendChatPrompt.apply(null, arguments)}}},[_c('div',{staticClass:"gl-relative gl-max-w-full"},[_vm._t("context-items-menu",null,{"isOpen":_vm.contextItemsMenuIsOpen,"onClose":_vm.closeContextItemsMenuOpen,"setRef":_vm.setContextItemsMenuRef,"focusPrompt":_vm.focusChatInput})],2),_vm._v(" "),_c('div',{staticClass:"duo-chat-input gl-relative gl-min-h-8 gl-max-w-full gl-grow gl-flex-col gl-rounded-bl-[12px] gl-rounded-br-[18px] gl-rounded-tl-[12px] gl-rounded-tr-[12px] gl-align-top forced-colors:gl-border"},[(_vm.$scopedSlots['agentic-model'] || _vm.$scopedSlots['agentic-switch'])?_c('div',{staticClass:"gl-flex gl-items-center gl-justify-between gl-gap-5 gl-border-0 gl-border-b-1 gl-border-solid gl-border-strong gl-px-4 gl-py-4 forced-colors:gl-border-none"},[_c('div',{staticClass:"duo-model-switcher gl-min-w-0 gl-max-w-full"},[_vm._t("agentic-model")],2),_vm._v(" "),_c('div',{staticClass:"duo-agent-mode-switcher gl-min-w-0 gl-max-w-full gl-shrink-0"},[_vm._t("agentic-switch")],2)]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"duo-chat-input-wrap gl-relative gl-flex gl-grow gl-flex-col",attrs:{"data-value":_vm.prompt}},[(_vm.shouldShowSlashCommands)?_c('gl-card',{ref:"commands",staticClass:"slash-commands !gl-absolute gl-w-full -gl-translate-y-full gl-list-none gl-pl-0 gl-shadow-md",attrs:{"body-class":"!gl-p-2"}},_vm._l((_vm.filteredSlashCommands),function(command,index){return _c('gl-dropdown-item',{key:command.name,class:{ 'active-command': index === _vm.activeCommandIndex },on:{"click":function($event){return _vm.selectSlashCommand(index)}},nativeOn:{"mouseenter":function($event){_vm.activeCommandIndex = index;}}},[_c('span',{staticClass:"gl-flex gl-justify-between"},[_c('span',{staticClass:"gl-block"},[_vm._v(_vm._s(command.name))]),_vm._v(" "),_c('small',{staticClass:"gl-pl-3 gl-text-right gl-italic gl-text-subtle"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",staticClass:"gl-absolute !gl-h-full !gl-w-full",attrs:{"disabled":!_vm.canSubmit || !_vm.isChatAvailable || !_vm.chatState.isEnabled,"data-testid":"chat-prompt-input","placeholder":_vm.inputPlaceholder,"character-count-limit":_vm.maxPromptLength,"textarea-classes":[
+          : 'gl-mt-auto gl-pb-4 gl-pt-6' ],attrs:{"mode":"out-in","tag":"section","name":_vm.$scopedSlots['custom-empty-state'] ? '' : 'message',"data-testid":"chat-messages"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('duo-chat-conversation',{key:("conversation-" + index),attrs:{"enable-code-insertion":_vm.enableCodeInsertion,"messages":conversation,"show-delimiter":index > 0,"with-feedback":_vm.withFeedback,"is-tool-approval-processing":_vm.isToolApprovalProcessing,"working-directory":_vm.workingDirectory,"trusted-urls":_vm.trustedUrls,"is-binary-feedback-enabled":_vm.isBinaryFeedbackEnabled,"message-renderers":_vm.messageRenderers},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet,"copy-code-snippet":_vm.onCopyCodeSnippet,"copy-message":_vm.onCopyMessage,"get-context-item-content":_vm.onGetContextItemContent,"approve-tool":_vm.onApproveToolCall,"deny-tool":_vm.onDenyToolCall,"open-file-path":_vm.onOpenFilePath}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('div',{key:"empty-state-container"},[_vm._t("custom-empty-state",function(){return [_c('div',{key:"empty-state-message",staticClass:"duo-chat-message gl-rounded-bl-none gl-leading-20 gl-text-default gl-break-anywhere",attrs:{"data-testid":"gl-duo-chat-empty-state"}},[_c('div',{staticClass:"gl-mb-[3.75rem] gl-flex gl-flex-col gl-items-center gl-justify-center gl-gap-3 gl-text-center"},[_c('h1',{staticClass:"gl-my-0 gl-text-[3.5rem]",attrs:{"data-testid":"gl-duo-chat-empty-state-emoji"}},[_vm._v("\n                  "+_vm._s(_vm.$options.i18n.CHAT_EMPTY_STATE_EMOJI)+"\n                ")]),_vm._v(" "),(_vm.agentName)?_c('h2',{staticClass:"gl-heading-2 gl-my-0",attrs:{"data-testid":"gl-duo-chat-empty-state-greeting"}},[_vm._v("\n                  "+_vm._s(_vm.emptyStateGreeting)+"\n                ")]):_vm._e(),_vm._v(" "),_c('h2',{staticClass:"gl-my-0 gl-text-size-h2",attrs:{"data-testid":"gl-duo-chat-empty-state-title"}},[_vm._v("\n                  "+_vm._s(_vm.emptyStateMainText)+"\n                ")]),_vm._v(" "),_c('p',{staticClass:"gl-text-base gl-text-subtle",attrs:{"data-testid":"gl-duo-chat-empty-state-subtitle"}},[_vm._v("\n                  "+_vm._s(_vm.emptyStateSubText)+"\n                ")])]),_vm._v(" "),_c('duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})],1)]})],2)]:_vm._e(),_vm._v(" "),(_vm.isLoading)?_c('duo-chat-loader',{key:"loader",attrs:{"tool-name":_vm.toolName}}):_vm._e(),_vm._v(" "),_c('div',{key:"anchor",ref:"anchor",staticClass:"scroll-anchor"})],2)],1),_vm._v(" "),(!_vm.shouldShowThreadList)?_c('footer',{staticClass:"duo-chat-drawer-footer gl-relative gl-z-2 gl-shrink-0",attrs:{"data-testid":"chat-footer"}},[_c('p',{staticClass:"gl-mb-3 gl-text-sm gl-text-subtle",class:{ 'gl-invisible': !_vm.hasAssistantMessages },attrs:{"data-testid":"chat-disclaimer"}},[_vm._v("\n      "+_vm._s(_vm.$options.i18n.CHAT_DISCLAIMER)+"\n    ")]),_vm._v(" "),_c('gl-form',{attrs:{"data-testid":"chat-prompt-form"},on:{"submit":function($event){$event.stopPropagation();$event.preventDefault();return _vm.sendChatPrompt.apply(null, arguments)}}},[_c('div',{staticClass:"gl-relative gl-max-w-full"},[_vm._t("context-items-menu",null,{"isOpen":_vm.contextItemsMenuIsOpen,"onClose":_vm.closeContextItemsMenuOpen,"setRef":_vm.setContextItemsMenuRef,"focusPrompt":_vm.focusChatInput})],2),_vm._v(" "),_c('div',{staticClass:"duo-chat-input gl-relative gl-min-h-8 gl-max-w-full gl-grow gl-flex-col gl-rounded-bl-[12px] gl-rounded-br-[18px] gl-rounded-tl-[12px] gl-rounded-tr-[12px] gl-align-top forced-colors:gl-border"},[(_vm.$scopedSlots['agentic-model'] || _vm.$scopedSlots['agentic-switch'])?_c('div',{staticClass:"gl-flex gl-items-center gl-justify-between gl-gap-5 gl-border-0 gl-border-b-1 gl-border-solid gl-border-strong gl-px-4 gl-py-4 forced-colors:gl-border-none"},[_c('div',{staticClass:"duo-model-switcher gl-min-w-0 gl-max-w-full"},[_vm._t("agentic-model")],2),_vm._v(" "),_c('div',{staticClass:"duo-agent-mode-switcher gl-min-w-0 gl-max-w-full gl-shrink-0"},[_vm._t("agentic-switch")],2)]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"duo-chat-input-wrap gl-relative gl-flex gl-grow gl-flex-col",attrs:{"data-value":_vm.prompt}},[(_vm.shouldShowSlashCommands)?_c('gl-card',{ref:"commands",staticClass:"slash-commands !gl-absolute gl-w-full -gl-translate-y-full gl-list-none gl-pl-0 gl-shadow-md",attrs:{"body-class":"!gl-p-2"}},_vm._l((_vm.filteredSlashCommands),function(command,index){return _c('gl-dropdown-item',{key:command.name,class:{ 'active-command': index === _vm.activeCommandIndex },on:{"click":function($event){return _vm.selectSlashCommand(index)}},nativeOn:{"mouseenter":function($event){_vm.activeCommandIndex = index;}}},[_c('span',{staticClass:"gl-flex gl-justify-between"},[_c('span',{staticClass:"gl-block"},[_vm._v(_vm._s(command.name))]),_vm._v(" "),_c('small',{staticClass:"gl-pl-3 gl-text-right gl-italic gl-text-subtle"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",staticClass:"gl-absolute !gl-h-full !gl-w-full",attrs:{"disabled":!_vm.canSubmit || !_vm.isChatAvailable || !_vm.chatState.isEnabled,"data-testid":"chat-prompt-input","placeholder":_vm.inputPlaceholder,"character-count-limit":_vm.maxPromptLength,"textarea-classes":[
               '!gl-h-full',
               '!gl-bg-transparent',
               '!gl-py-4',

package/dist/components/chat/components/duo_chat_conversation/duo_chat_conversation.js

@@ -1,6 +1,7 @@
 import { translate } from '../../../../utils/i18n';
 import DuoChatMessage from '../duo_chat_message/duo_chat_message';
 import DuoChatMessageToolApproval from '../duo_chat_message_tool_approval/message_tool_approval';
+import { messageRenderersValidator } from '../utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const i18n = {
@@ -88,6 +89,18 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    /**
+     * Optional array of custom message renderers passed through to MessageMap.
+     * Each entry is an object with `component` (Vue component) and `matchMessage` (Function).
+     */
+    messageRenderers: {
+      type: Array,
+      required: false,
+      validator: messageRenderersValidator,
+      default() {
+        return [];
+      }
     }
   },
   computed: {
@@ -173,7 +186,7 @@ const __vue_script__ = script;
 /* template */
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
     'gl-flex gl-flex-col gl-justify-end gl-gap-6',
-    { 'insert-code-hidden': !_vm.enableCodeInsertion } ]},[(_vm.showDelimiter)?_c('div',{staticClass:"gl-my-5 gl-flex gl-items-center gl-gap-4 gl-text-gray-500",attrs:{"data-testid":"conversation-delimiter"}},[_c('hr',{staticClass:"gl-grow"}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.$options.i18n.CONVERSATION_NEW_CHAT))]),_vm._v(" "),_c('hr',{staticClass:"gl-grow"})]):_vm._e(),_vm._v(" "),_vm._l((_vm.messages),function(msg,index){return _c('duo-chat-message',{key:((msg.role) + "-" + index),attrs:{"message":msg,"trusted-urls":_vm.trustedUrls,"is-cancelled":_vm.canceledRequestIds.includes(msg.requestId),"with-feedback":_vm.withFeedback,"working-directory":_vm.workingDirectory,"is-binary-feedback-enabled":_vm.isBinaryFeedbackEnabled,"show-binary-feedback":index === _vm.lastAssistantMessageIndex},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet,"copy-code-snippet":_vm.onCopyCodeSnippet,"copy-message":_vm.onCopyMessage,"get-context-item-content":_vm.onGetContextItemContent,"open-file-path":_vm.onOpenFilePath}})}),_vm._v(" "),(_vm.hasPendingToolApprovals)?_c('duo-chat-message-tool-approval',{attrs:{"messages":_vm.pendingToolApprovals,"is-processing":_vm.isToolApprovalProcessing,"approval-options":_vm.toolApprovalOptions},on:{"approve-tool":_vm.onApproveToolCall,"deny-tool":_vm.onDenyToolCall}}):_vm._e()],2)};
+    { 'insert-code-hidden': !_vm.enableCodeInsertion } ]},[(_vm.showDelimiter)?_c('div',{staticClass:"gl-my-5 gl-flex gl-items-center gl-gap-4 gl-text-gray-500",attrs:{"data-testid":"conversation-delimiter"}},[_c('hr',{staticClass:"gl-grow"}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.$options.i18n.CONVERSATION_NEW_CHAT))]),_vm._v(" "),_c('hr',{staticClass:"gl-grow"})]):_vm._e(),_vm._v(" "),_vm._l((_vm.messages),function(msg,index){return _c('duo-chat-message',{key:((msg.role) + "-" + index),attrs:{"message":msg,"trusted-urls":_vm.trustedUrls,"is-cancelled":_vm.canceledRequestIds.includes(msg.requestId),"with-feedback":_vm.withFeedback,"working-directory":_vm.workingDirectory,"is-binary-feedback-enabled":_vm.isBinaryFeedbackEnabled,"show-binary-feedback":index === _vm.lastAssistantMessageIndex,"message-renderers":_vm.messageRenderers},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet,"copy-code-snippet":_vm.onCopyCodeSnippet,"copy-message":_vm.onCopyMessage,"get-context-item-content":_vm.onGetContextItemContent,"open-file-path":_vm.onOpenFilePath}})}),_vm._v(" "),(_vm.hasPendingToolApprovals)?_c('duo-chat-message-tool-approval',{attrs:{"messages":_vm.pendingToolApprovals,"is-processing":_vm.isToolApprovalProcessing,"approval-options":_vm.toolApprovalOptions},on:{"approve-tool":_vm.onApproveToolCall,"deny-tool":_vm.onDenyToolCall}}):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/chat/components/duo_chat_message/duo_chat_message.js

@@ -4,7 +4,7 @@ import { throttle } from 'lodash-es';
 import DuoChatContextItemSelections from '../duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections';
 import { SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED, MESSAGE_MODEL_ROLES } from '../../constants';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources';
-import { concatUntilEmpty, copyToClipboard } from '../utils';
+import { messageRenderersValidator, concatUntilEmpty, copyToClipboard } from '../utils';
 import AgenticBinaryFeedback from '../../../agentic_chat/components/agentic_binary_feedback/agentic_binary_feedback';
 import AgenticFeedbackPanel from '../../../agentic_chat/components/agentic_feedback_panel/agentic_feedback_panel';
 import MessageActionBar from '../message_action_bar/message_action_bar';
@@ -111,6 +111,18 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    /**
+     * Optional array of custom message renderers to pass to MessageMap.
+     * Each entry is an object with `component` (Vue component) and `matchMessage` (Function).
+     */
+    messageRenderers: {
+      type: Array,
+      required: false,
+      validator: messageRenderersValidator,
+      default() {
+        return [];
+      }
     }
   },
   data() {
@@ -344,7 +356,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
       },attrs:{"is-html":_vm.hasContentHtml,"markdown":_vm.messageContent,"trusted-urls":_vm.trustedUrls}}),_vm._v(" "),(_vm.sources)?_c('documentation-sources',{attrs:{"sources":_vm.sources}}):_vm._e(),_vm._v(" "),(_vm.isAssistantMessage)?[_c('message-action-bar',[(_vm.isChunkAndNotCancelled)?_c('gl-animated-loader-icon',{attrs:{"is-on":true}}):_vm._e(),_vm._v(" "),(_vm.shouldShowFeedbackLink && _vm.isBinaryFeedbackEnabled)?[(_vm.showBinaryFeedback)?_c('agentic-binary-feedback',{attrs:{"feedback-choice":_vm.feedbackChoice,"submitted":_vm.feedbackSubmitted,"data-testid":"agentic-feedback-latest"},on:{"select-type":_vm.onFeedbackTypeSelected}}):_c('div',{staticClass:"agentic-feedback-hover-wrapper",class:{
               '-gl-mr-3 gl-w-0 gl-overflow-hidden gl-opacity-0':
                 !_vm.feedbackChoice && !_vm.feedbackSubmitted,
-            },attrs:{"data-testid":"agentic-feedback-hover-container"}},[_c('agentic-binary-feedback',{attrs:{"feedback-choice":_vm.feedbackChoice,"submitted":_vm.feedbackSubmitted},on:{"select-type":_vm.onFeedbackTypeSelected}})],1)]:(_vm.shouldShowFeedbackLink)?_c('message-feedback',{attrs:{"has-feedback":_vm.hasFeedback},on:{"feedback":_vm.logEvent}}):_vm._e(),_vm._v(" "),(_vm.shouldShowCopyAction)?_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],class:{ '!gl-text-success': _vm.copied, '!gl-text-subtle': !_vm.copied },attrs:{"title":_vm.copied ? _vm.$options.i18n.CHAT_MESSAGE_COPIED : _vm.$options.i18n.CHAT_MESSAGE_COPY,"icon":_vm.copied ? 'check-circle-filled' : 'copy-to-clipboard',"category":"tertiary","size":"small"},on:{"click":_vm.copyMessage,"focusout":function($event){_vm.copied = false;}}}):_vm._e()],2),_vm._v(" "),(_vm.feedbackChoice && !_vm.feedbackSubmitted)?_c('agentic-feedback-panel',{attrs:{"feedback-type":_vm.feedbackChoice},on:{"submit":_vm.onFeedbackPanelSubmit,"close":_vm.onFeedbackPanelClose}}):_vm._e()]:_vm._e(),_vm._v(" "),(_vm.displaySelectedContextItems && _vm.isUserMessage)?_c('duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"user"},on:{"get-content":_vm.onGetContextItemContent}}):_vm._e()]:_c('message-map',{attrs:{"message":_vm.message,"with-feedback":_vm.withFeedback,"working-directory":_vm.workingDirectory,"data-testid":"workflow-message"},on:{"open-file-path":_vm.onOpenFilePath,"feedback":_vm.logEvent}})],2)};
+            },attrs:{"data-testid":"agentic-feedback-hover-container"}},[_c('agentic-binary-feedback',{attrs:{"feedback-choice":_vm.feedbackChoice,"submitted":_vm.feedbackSubmitted},on:{"select-type":_vm.onFeedbackTypeSelected}})],1)]:(_vm.shouldShowFeedbackLink)?_c('message-feedback',{attrs:{"has-feedback":_vm.hasFeedback},on:{"feedback":_vm.logEvent}}):_vm._e(),_vm._v(" "),(_vm.shouldShowCopyAction)?_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],class:{ '!gl-text-success': _vm.copied, '!gl-text-subtle': !_vm.copied },attrs:{"title":_vm.copied ? _vm.$options.i18n.CHAT_MESSAGE_COPIED : _vm.$options.i18n.CHAT_MESSAGE_COPY,"icon":_vm.copied ? 'check-circle-filled' : 'copy-to-clipboard',"category":"tertiary","size":"small"},on:{"click":_vm.copyMessage,"focusout":function($event){_vm.copied = false;}}}):_vm._e()],2),_vm._v(" "),(_vm.feedbackChoice && !_vm.feedbackSubmitted)?_c('agentic-feedback-panel',{attrs:{"feedback-type":_vm.feedbackChoice},on:{"submit":_vm.onFeedbackPanelSubmit,"close":_vm.onFeedbackPanelClose}}):_vm._e()]:_vm._e(),_vm._v(" "),(_vm.displaySelectedContextItems && _vm.isUserMessage)?_c('duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"user"},on:{"get-content":_vm.onGetContextItemContent}}):_vm._e()]:_c('message-map',{attrs:{"message":_vm.message,"message-renderers":_vm.messageRenderers,"with-feedback":_vm.withFeedback,"working-directory":_vm.workingDirectory,"data-testid":"workflow-message"},on:{"open-file-path":_vm.onOpenFilePath,"feedback":_vm.logEvent}})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/chat/components/duo_chat_message/message_types/index.js

@@ -1,11 +1,14 @@
+import { MESSAGE_MODEL_ROLES, VALID_MESSAGE_TYPES } from '../../../constants';
 import AgentMessage from './message_agent';
 import InputRequestedMessage from './message_input_requested';
 import SystemMessage from './message_tool';
 import WorkflowEndMessage from './message_workflow_end';
 import MessageMap from './message_map';
-import { VALID_MESSAGE_TYPES, AGENT_MESSAGE_TYPE, USER_MESSAGE_TYPE, FLOW_END_TYPE, INPUT_REQUEST_TYPE, TOOL_MESSAGE_TYPE } from './constants';
 
 // Direct imports for backward compatibility
+
+// Import constants and factory functions
+
 var index = {
   // Main wrapper component - recommended for new consumers
   MessageMap,
@@ -17,12 +20,8 @@ var index = {
   ToolMessage: SystemMessage,
   WorkflowEndMessage,
   // Constants and utility functions
-  VALID_MESSAGE_TYPES,
-  AGENT_MESSAGE_TYPE,
-  USER_MESSAGE_TYPE,
-  FLOW_END_TYPE,
-  INPUT_REQUEST_TYPE,
-  TOOL_MESSAGE_TYPE
+  MESSAGE_MODEL_ROLES,
+  VALID_MESSAGE_TYPES
 };
 
 export default index;

package/dist/components/chat/components/duo_chat_message/message_types/message_map.js

@@ -1,18 +1,35 @@
+import { MESSAGE_MODEL_ROLES, APPROVAL_TOOL_NAMES } from '../../../constants';
+import { messageRenderersValidator } from '../../utils';
 import AgentMessage from './message_agent';
 import UserMessage from './message_user';
 import InputRequestedMessage from './message_input_requested';
-import SystemMessage from './message_tool';
+import MessageToolVisualization from './message_tool';
+import MessageToolApproved from './message_tool_approved';
 import WorkflowEndMessage from './message_workflow_end';
-import { AGENT_MESSAGE_TYPE, FLOW_END_TYPE, INPUT_REQUEST_TYPE, TOOL_MESSAGE_TYPE, USER_MESSAGE_TYPE } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const DEFAULT_COMPONENT_MAP = {
-  [AGENT_MESSAGE_TYPE]: AgentMessage,
-  [FLOW_END_TYPE]: WorkflowEndMessage,
-  [INPUT_REQUEST_TYPE]: InputRequestedMessage,
-  [TOOL_MESSAGE_TYPE]: SystemMessage,
-  [USER_MESSAGE_TYPE]: UserMessage
-};
+const DEFAULT_COMPONENT_MAP = [{
+  component: AgentMessage,
+  matchMessage: message => message.message_type === MESSAGE_MODEL_ROLES.agent
+}, {
+  component: WorkflowEndMessage,
+  matchMessage: message => message.message_type === MESSAGE_MODEL_ROLES.workflow_end
+}, {
+  component: InputRequestedMessage,
+  matchMessage: message => message.message_type === MESSAGE_MODEL_ROLES.request
+}, {
+  component: MessageToolApproved,
+  matchMessage: message => {
+    var _message$tool_info;
+    return message.message_type === MESSAGE_MODEL_ROLES.tool && Object.values(APPROVAL_TOOL_NAMES).includes((_message$tool_info = message.tool_info) === null || _message$tool_info === void 0 ? void 0 : _message$tool_info.name);
+  }
+}, {
+  component: MessageToolVisualization,
+  matchMessage: message => message.message_type === MESSAGE_MODEL_ROLES.tool
+}, {
+  component: UserMessage,
+  matchMessage: message => message.message_type === MESSAGE_MODEL_ROLES.user
+}];
 var script = {
   name: 'MessageMap',
   props: {
@@ -27,13 +44,16 @@ var script = {
       }
     },
     /**
-     * Optional custom component map to override or add default message components
+     * Optional array of custom message renderers to override or extend the default message components.
+     * Each entry is an object with `component` (Vue component) and `matchMessage` (Function).
+     * Custom entries are evaluated before defaults, allowing overrides.
      */
-    componentMap: {
-      type: Object,
+    messageRenderers: {
+      type: Array,
       required: false,
+      validator: messageRenderersValidator,
       default() {
-        return {};
+        return [];
       }
     },
     /**
@@ -54,22 +74,22 @@ var script = {
     }
   },
   computed: {
-    messageMap() {
-      return {
-        ...DEFAULT_COMPONENT_MAP,
-        ...this.componentMap
-      };
-    },
     messageComponent() {
-      var _this$message;
-      return this.isValidMessageType ? this.messageMap[(_this$message = this.message) === null || _this$message === void 0 ? void 0 : _this$message.message_type] : AgentMessage;
-    },
-    validMessageTypes() {
-      return [...Object.keys(DEFAULT_COMPONENT_MAP), ...Object.keys(this.componentMap)];
-    },
-    isValidMessageType() {
-      var _this$message2;
-      return this.validMessageTypes.includes((_this$message2 = this.message) === null || _this$message2 === void 0 ? void 0 : _this$message2.message_type);
+      const combined = [...this.messageRenderers, ...DEFAULT_COMPONENT_MAP];
+      try {
+        var _match$component;
+        const match = combined.find(_ref => {
+          let {
+            matchMessage
+          } = _ref;
+          return matchMessage(this.message);
+        });
+        return (_match$component = match === null || match === void 0 ? void 0 : match.component) !== null && _match$component !== void 0 ? _match$component : AgentMessage;
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn('Invalid message renderer found. Falling back to the default agent message renderer', e);
+        return AgentMessage;
+      }
     }
   }
 };

package/dist/components/chat/components/duo_chat_message/message_types/message_tool.js

@@ -1,7 +1,5 @@
 import { GlButton, GlCollapse, GlIcon, GlLink } from '@gitlab/ui';
 import { translate } from '../../../../../utils/i18n';
-import MessageToolApproval from '../../duo_chat_message_tool_approval/message_tool_approval';
-import { APPROVAL_TOOL_NAMES } from '../../../constants';
 import MessageToolDetails from './message_tool_details';
 import BaseMessage from './message_base';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -20,7 +18,6 @@ var script = {
   name: 'DuoToolMessage',
   components: {
     BaseMessage,
-    MessageToolApproval,
     MessageToolDetails,
     GlButton,
     GlCollapse,
@@ -156,9 +153,6 @@ var script = {
     collapseIconName() {
       return this.isDetailsOpen ? 'chevron-down' : 'chevron-right';
     },
-    requiresApproval() {
-      return Object.values(APPROVAL_TOOL_NAMES).includes(this.toolName);
-    },
     shouldShowDetails() {
       var _this$message;
       return !hiddenSubTypes.includes((_this$message = this.message) === null || _this$message === void 0 ? void 0 : _this$message.message_sub_type) && (this.hasToolInfoArgs || this.hasToolInfoResponse);
@@ -189,7 +183,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.requiresApproval)?_c('message-tool-approval',{attrs:{"messages":[_vm.message],"working-directory":_vm.workingDirectory,"approval-status":"approved"}}):_c('base-message',{attrs:{"message":_vm.message},scopedSlots:_vm._u([{key:"message",fn:function(ref){
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('base-message',{attrs:{"message":_vm.message},scopedSlots:_vm._u([{key:"message",fn:function(ref){
 var content = ref.content;
 return [_c('div',{staticClass:"gl-border gl-flex-col gl-rounded-lg gl-border-default gl-p-4"},[_c('div',{staticClass:"gl-flex gl-flex-col gl-gap-2 gl-text-base gl-text-subtle"},[_c('div',{staticClass:"gl-flex gl-items-start gl-gap-x-3"},[_c('div',{staticClass:"gl-mt-1 gl-flex gl-flex-shrink-0"},[_c('gl-icon',{attrs:{"name":_vm.iconName}})],1),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-min-w-0 gl-grow gl-flex-wrap gl-items-center gl-gap-x-2"},[_c('span',{attrs:{"data-testid":"tool-message-content"}},[_vm._v(_vm._s(content))]),_vm._v(" "),(_vm.shouldShowFilePath)?_c('gl-link',{staticClass:"file-path-link gl-min-w-0 gl-break-all gl-font-monospace",attrs:{"data-testid":"tool-message-file-path-link"},on:{"click":function($event){$event.preventDefault();return _vm.onOpenFilePath(_vm.messageFilePath)}}},[_c('code',{staticClass:"gl-rounded-base gl-px-2 gl-py-1 gl-text-default"},[_vm._v(_vm._s(_vm.messageFilePath))])]):_vm._e()],1),_vm._v(" "),(_vm.shouldShowDetails)?_c('gl-button',{staticClass:"-gl-mt-1",attrs:{"category":"tertiary","size":"small","icon":_vm.collapseIconName,"aria-label":_vm.isDetailsOpen ? _vm.$options.i18n.COLLAPSE_DETAILS : _vm.$options.i18n.EXPAND_DETAILS,"data-testid":"tool-message-toggle-button"},on:{"click":_vm.toggleDetails}}):_vm._e()],1),_vm._v(" "),(_vm.hasMetadataToShow)?_c('div',{staticClass:"gl-ml-5 gl-flex gl-flex-wrap gl-gap-2 gl-text-sm"},[(_vm.shouldShowProjectId)?_c('div',{staticClass:"gl-flex gl-min-w-0 gl-gap-x-2 gl-rounded-full gl-bg-strong gl-px-3",attrs:{"data-testid":"tool-message-project-info"}},[_c('span',{staticClass:"gl-whitespace-nowrap"},[_vm._v(_vm._s(_vm.$options.i18n.PROJECT_LABEL)+":")]),_vm._v(" "),_c('span',{staticClass:"gl-truncate",attrs:{"data-testid":"tool-message-project-id"}},[_vm._v(_vm._s(_vm.projectId))])]):_vm._e(),_vm._v(" "),(_vm.shouldShowBranch)?_c('div',{staticClass:"gl-flex gl-min-w-0 gl-gap-x-2 gl-rounded-full gl-bg-strong gl-px-3",attrs:{"data-testid":"tool-message-branch-info"}},[_c('span',{staticClass:"gl-whitespace-nowrap"},[_vm._v(_vm._s(_vm.$options.i18n.BRANCH_LABEL)+":")]),_vm._v(" "),_c('span',{staticClass:"gl-truncate",attrs:{"data-testid":"tool-message-branch-name"}},[_vm._v(_vm._s(_vm.branchName))])]):_vm._e(),_vm._v(" "),(_vm.shouldShowStartBranch)?_c('div',{staticClass:"gl-flex gl-min-w-0 gl-gap-x-2 gl-rounded-full gl-bg-strong gl-px-3",attrs:{"data-testid":"tool-message-start-branch-info"}},[_c('span',{staticClass:"gl-whitespace-nowrap"},[_vm._v(_vm._s(_vm.$options.i18n.START_BRANCH_LABEL)+":")]),_vm._v(" "),_c('span',{staticClass:"gl-truncate",attrs:{"data-testid":"tool-message-start-branch-name"}},[_vm._v(_vm._s(_vm.startBranch))])]):_vm._e()]):_vm._e()]),_vm._v(" "),(_vm.shouldShowDetails)?_c('gl-collapse',{staticClass:"gl-overflow-hidden",attrs:{"visible":_vm.isDetailsOpen}},[_c('message-tool-details',{attrs:{"message":_vm.message,"is-expanded":_vm.isDetailsOpen},on:{"copy-code-snippet":_vm.onCopyCodeSnippet}})],1):_vm._e()],1)]}}])})};
 var __vue_staticRenderFns__ = [];

package/dist/components/chat/components/duo_chat_message/message_types/message_tool_approved.js

@@ -0,0 +1,63 @@
+import MessageToolApproval from '../../duo_chat_message_tool_approval/message_tool_approval';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'MessageToolApproved',
+  components: {
+    MessageToolApproval
+  },
+  props: {
+    message: {
+      required: true,
+      type: Object
+    },
+    workingDirectory: {
+      required: false,
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    messages() {
+      return [this.message];
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('message-tool-approval',_vm._g({attrs:{"messages":_vm.messages,"working-directory":_vm.workingDirectory,"approval-status":"approved"}},_vm.$listeners))};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

package/dist/components/chat/components/utils.js

@@ -1,3 +1,5 @@
+const isValidMessageRenderer = renderer => renderer !== null && typeof renderer === 'object' && typeof renderer.component === 'object' && typeof renderer.matchMessage === 'function';
+const messageRenderersValidator = renderers => Array.isArray(renderers) && renderers.every(renderer => isValidMessageRenderer(renderer));
 const concatUntilEmpty = arr => {
   if (!arr) return '';
   let end = arr.findIndex(el => !el);
@@ -53,4 +55,4 @@ const copyToClipboard = (textToCopy, el) => {
   }
 };
 
-export { concatUntilEmpty, copyToClipboard };
+export { concatUntilEmpty, copyToClipboard, isValidMessageRenderer, messageRenderersValidator };

package/dist/components/chat/constants.js

@@ -25,6 +25,7 @@ const MESSAGE_MODEL_ROLES = {
   request: 'request',
   workflow_end: 'workflow_end'
 };
+const VALID_MESSAGE_TYPES = [MESSAGE_MODEL_ROLES.agent, MESSAGE_MODEL_ROLES.workflow_end, MESSAGE_MODEL_ROLES.request, MESSAGE_MODEL_ROLES.tool, MESSAGE_MODEL_ROLES.user, MESSAGE_MODEL_ROLES.system, MESSAGE_MODEL_ROLES.assistant];
 const SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED = true;
 
 // TODO this should be a shared util in GitLab UI
@@ -60,4 +61,4 @@ const APPROVAL_TOOL_NAMES = {
   runGitCommand: 'run_git_command'
 };
 
-export { APPROVAL_TOOL_NAMES, CHAT_BASE_COMMANDS, CHAT_CLEAR_MESSAGE, CHAT_INCLUDE_MESSAGE, CHAT_NEW_MESSAGE, CHAT_RESET_MESSAGE, DEFAULT_DEBOUNCE_AND_THROTTLE_MS, DOCUMENTATION_SOURCE_TYPES, LOADING_TRANSITION_DURATION, MAX_PROMPT_LENGTH, MESSAGE_MODEL_ROLES, PROMPT_LENGTH_WARNING, SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED, acceptedApproveToolPayloads, badgeTypeValidator, badgeTypes };
+export { APPROVAL_TOOL_NAMES, CHAT_BASE_COMMANDS, CHAT_CLEAR_MESSAGE, CHAT_INCLUDE_MESSAGE, CHAT_NEW_MESSAGE, CHAT_RESET_MESSAGE, DEFAULT_DEBOUNCE_AND_THROTTLE_MS, DOCUMENTATION_SOURCE_TYPES, LOADING_TRANSITION_DURATION, MAX_PROMPT_LENGTH, MESSAGE_MODEL_ROLES, PROMPT_LENGTH_WARNING, SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED, VALID_MESSAGE_TYPES, acceptedApproveToolPayloads, badgeTypeValidator, badgeTypes };

package/dist/index.js

@@ -1,3 +1,5 @@
+import { MESSAGE_MODEL_ROLES } from './components/chat/constants';
+export { MESSAGE_MODEL_ROLES, VALID_MESSAGE_TYPES } from './components/chat/constants';
 export { default as DuoUserFeedback } from './components/user_feedback/user_feedback';
 export { default as DuoChat } from './components/chat/duo_chat';
 export { default as DuoChatContextConversation } from './components/chat/components/duo_chat_conversation/duo_chat_conversation';
@@ -5,7 +7,6 @@ export { default as DuoChatLoader } from './components/chat/components/duo_chat_
 export { default as DuoChatMessage } from './components/chat/components/duo_chat_message/duo_chat_message';
 export { default as DuoChatMessageSources } from './components/chat/components/duo_chat_message_sources/duo_chat_message_sources';
 export { default as DuoChatPredefinedPrompts } from './components/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts';
-export { AGENT_MESSAGE_TYPE, FLOW_END_TYPE, INPUT_REQUEST_TYPE, TOOL_MESSAGE_TYPE, USER_MESSAGE_TYPE, VALID_MESSAGE_TYPES } from './components/chat/components/duo_chat_message/message_types/constants';
 export { default as MessageMap } from './components/chat/components/duo_chat_message/message_types/message_map';
 export { default as AgentMessage } from './components/chat/components/duo_chat_message/message_types/message_agent';
 export { default as InputRequestedMessage } from './components/chat/components/duo_chat_message/message_types/message_input_requested';
@@ -27,3 +28,12 @@ export { default as DuoLayout } from './components/ui/duo_layout/duo_layout';
 export { default as SideRail } from './components/ui/side_rail/side_rail';
 export { default as WebDuoChat } from './components/chat/web_duo_chat';
 export { default as WebAgenticDuoChat } from './components/agentic_chat/web_agentic_duo_chat';
+
+// Legacy message type exports for backward compatibility
+const AGENT_MESSAGE_TYPE = MESSAGE_MODEL_ROLES.agent;
+const USER_MESSAGE_TYPE = MESSAGE_MODEL_ROLES.user;
+const FLOW_END_TYPE = MESSAGE_MODEL_ROLES.workflow_end;
+const INPUT_REQUEST_TYPE = MESSAGE_MODEL_ROLES.request;
+const TOOL_MESSAGE_TYPE = MESSAGE_MODEL_ROLES.tool;
+
+export { AGENT_MESSAGE_TYPE, FLOW_END_TYPE, INPUT_REQUEST_TYPE, TOOL_MESSAGE_TYPE, USER_MESSAGE_TYPE };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/duo-ui",
-  "version": "15.13.0",
+  "version": "15.14.0",
   "description": "Duo UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -105,7 +105,7 @@
     "@gitlab/fonts": "^1.3.1",
     "@gitlab/stylelint-config": "6.3.0",
     "@gitlab/svgs": "^3.157.0",
-    "@gitlab/ui": "^128.15.0",
+    "@gitlab/ui": "^129.2.0",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
@@ -124,10 +124,11 @@
     "@storybook/vue3": "^7.6.20",
     "@storybook/vue3-webpack5": "^7.6.20",
     "@types/jest-image-snapshot": "^6.4.0",
-    "@vue/compat": "^3.2.40",
-    "@vue/compiler-sfc": "^3.2.40",
+    "@vue/compat": "3.5.30",
+    "@vue/compiler-sfc": "3.5.30",
+    "@vue/server-renderer": "3.5.30",
     "@vue/test-utils": "1.3.0",
-    "@vue/test-utils-vue3": "npm:@vue/test-utils@2.2.0",
+    "@vue/test-utils-vue3": "npm:@vue/test-utils@^2.4.6",
     "@vue/vue2-jest": "29.0.0",
     "@vue/vue3-jest": "^29.1.1",
     "@yarnpkg/lockfile": "^1.1.0",
@@ -192,7 +193,7 @@
     "vue-loader-vue3": "npm:vue-loader@17",
     "vue-router": "3",
     "vue-template-compiler": "2.7.16",
-    "vue-test-utils-compat": "^0.0.10",
+    "vue-test-utils-compat": "^0.0.15",
     "webpack": "^5.9.0",
     "yargs": "^17.3.1"
   },

package/src/components/agentic_chat/web_agentic_duo_chat.vue

@@ -26,6 +26,7 @@ import { VIEW_TYPES } from '../chat/components/duo_chat_header/constants';
 import DuoChatLoader from '../chat/components/duo_chat_loader/duo_chat_loader.vue';
 import DuoChatPredefinedPrompts from '../chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue';
 import DuoChatConversation from '../chat/components/duo_chat_conversation/duo_chat_conversation.vue';
+import { messageRenderersValidator } from '../chat/components/utils';
 import WebDuoChatHeader from '../chat/components/duo_chat_header/web_duo_chat_header.vue';
 import DuoChatThreads from '../chat/components/duo_chat_threads/duo_chat_threads.vue';
 
@@ -406,6 +407,18 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Optional array of custom message renderers passed through to MessageMap.
+     * Each entry is an object with `component` (Vue component) and `matchMessage` (Function).
+     */
+    messageRenderers: {
+      type: Array,
+      required: false,
+      validator: messageRenderersValidator,
+      default() {
+        return [];
+      },
+    },
   },
   data() {
     return {
@@ -922,6 +935,7 @@ export default {
           :working-directory="workingDirectory"
           :trusted-urls="trustedUrls"
           :is-binary-feedback-enabled="isBinaryFeedbackEnabled"
+          :message-renderers="messageRenderers"
           @track-feedback="onTrackFeedback"
           @insert-code-snippet="onInsertCodeSnippet"
           @copy-code-snippet="onCopyCodeSnippet"

package/src/components/chat/components/duo_chat_conversation/duo_chat_conversation.vue

@@ -2,6 +2,7 @@
 import { translate } from '../../../../utils/i18n';
 import DuoChatMessage from '../duo_chat_message/duo_chat_message.vue';
 import DuoChatMessageToolApproval from '../duo_chat_message_tool_approval/message_tool_approval.vue';
+import { messageRenderersValidator } from '../utils';
 
 const i18n = {
   CONVERSATION_NEW_CHAT: translate('DuoChatConversation.newChat', 'New chat'),
@@ -91,6 +92,18 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Optional array of custom message renderers passed through to MessageMap.
+     * Each entry is an object with `component` (Vue component) and `matchMessage` (Function).
+     */
+    messageRenderers: {
+      type: Array,
+      required: false,
+      validator: messageRenderersValidator,
+      default() {
+        return [];
+      },
+    },
   },
   computed: {
     /**
@@ -196,6 +209,7 @@ export default {
       :working-directory="workingDirectory"
       :is-binary-feedback-enabled="isBinaryFeedbackEnabled"
       :show-binary-feedback="index === lastAssistantMessageIndex"
+      :message-renderers="messageRenderers"
       @track-feedback="onTrackFeedback"
       @insert-code-snippet="onInsertCodeSnippet"
       @copy-code-snippet="onCopyCodeSnippet"

package/src/components/chat/components/duo_chat_message/duo_chat_message.vue

@@ -14,7 +14,7 @@ import { MESSAGE_MODEL_ROLES, SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED } from '.
 
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources.vue';
 // eslint-disable-next-line no-restricted-imports
-import { copyToClipboard, concatUntilEmpty } from '../utils';
+import { copyToClipboard, concatUntilEmpty, messageRenderersValidator } from '../utils';
 import AgenticBinaryFeedback from '../../../agentic_chat/components/agentic_binary_feedback/agentic_binary_feedback.vue';
 import AgenticFeedbackPanel from '../../../agentic_chat/components/agentic_feedback_panel/agentic_feedback_panel.vue';
 import MessageActionBar from '../message_action_bar/message_action_bar.vue';
@@ -127,6 +127,18 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Optional array of custom message renderers to pass to MessageMap.
+     * Each entry is an object with `component` (Vue component) and `matchMessage` (Function).
+     */
+    messageRenderers: {
+      type: Array,
+      required: false,
+      validator: messageRenderersValidator,
+      default() {
+        return [];
+      },
+    },
   },
   data() {
     return {
@@ -483,6 +495,7 @@ export default {
     <message-map
       v-else
       :message="message"
+      :message-renderers="messageRenderers"
       :with-feedback="withFeedback"
       :working-directory="workingDirectory"
       data-testid="workflow-message"

package/src/components/chat/components/duo_chat_message/message_types/index.js

@@ -1,4 +1,5 @@
 // Direct imports for backward compatibility
+import { MESSAGE_MODEL_ROLES, VALID_MESSAGE_TYPES } from '../../../constants';
 import AgentMessage from './message_agent.vue';
 import InputRequestedMessage from './message_input_requested.vue';
 import SystemMessage from './message_tool.vue';
@@ -6,14 +7,6 @@ import WorkflowEndMessage from './message_workflow_end.vue';
 import MessageMap from './message_map.vue';
 
 // Import constants and factory functions
-import {
-  AGENT_MESSAGE_TYPE,
-  USER_MESSAGE_TYPE,
-  FLOW_END_TYPE,
-  INPUT_REQUEST_TYPE,
-  TOOL_MESSAGE_TYPE,
-  VALID_MESSAGE_TYPES,
-} from './constants';
 
 export default {
   // Main wrapper component - recommended for new consumers
@@ -28,10 +21,6 @@ export default {
   WorkflowEndMessage,
 
   // Constants and utility functions
+  MESSAGE_MODEL_ROLES,
   VALID_MESSAGE_TYPES,
-  AGENT_MESSAGE_TYPE,
-  USER_MESSAGE_TYPE,
-  FLOW_END_TYPE,
-  INPUT_REQUEST_TYPE,
-  TOOL_MESSAGE_TYPE,
 };

package/src/components/chat/components/duo_chat_message/message_types/message_map.vue

@@ -1,25 +1,41 @@
 <script>
+import { MESSAGE_MODEL_ROLES, APPROVAL_TOOL_NAMES } from '../../../constants';
+import { messageRenderersValidator } from '../../utils';
 import AgentMessage from './message_agent.vue';
 import UserMessage from './message_user.vue';
 import InputRequestedMessage from './message_input_requested.vue';
-import SystemMessage from './message_tool.vue';
+import MessageToolVisualization from './message_tool.vue';
+import MessageToolApproved from './message_tool_approved.vue';
 import WorkflowEndMessage from './message_workflow_end.vue';
 
-import {
-  AGENT_MESSAGE_TYPE,
-  FLOW_END_TYPE,
-  INPUT_REQUEST_TYPE,
-  TOOL_MESSAGE_TYPE,
-  USER_MESSAGE_TYPE,
-} from './constants';
-
-const DEFAULT_COMPONENT_MAP = {
-  [AGENT_MESSAGE_TYPE]: AgentMessage,
-  [FLOW_END_TYPE]: WorkflowEndMessage,
-  [INPUT_REQUEST_TYPE]: InputRequestedMessage,
-  [TOOL_MESSAGE_TYPE]: SystemMessage,
-  [USER_MESSAGE_TYPE]: UserMessage,
-};
+const DEFAULT_COMPONENT_MAP = [
+  {
+    component: AgentMessage,
+    matchMessage: (message) => message.message_type === MESSAGE_MODEL_ROLES.agent,
+  },
+  {
+    component: WorkflowEndMessage,
+    matchMessage: (message) => message.message_type === MESSAGE_MODEL_ROLES.workflow_end,
+  },
+  {
+    component: InputRequestedMessage,
+    matchMessage: (message) => message.message_type === MESSAGE_MODEL_ROLES.request,
+  },
+  {
+    component: MessageToolApproved,
+    matchMessage: (message) =>
+      message.message_type === MESSAGE_MODEL_ROLES.tool &&
+      Object.values(APPROVAL_TOOL_NAMES).includes(message.tool_info?.name),
+  },
+  {
+    component: MessageToolVisualization,
+    matchMessage: (message) => message.message_type === MESSAGE_MODEL_ROLES.tool,
+  },
+  {
+    component: UserMessage,
+    matchMessage: (message) => message.message_type === MESSAGE_MODEL_ROLES.user,
+  },
+];
 
 export default {
   name: 'MessageMap',
@@ -35,13 +51,16 @@ export default {
       },
     },
     /**
-     * Optional custom component map to override or add default message components
+     * Optional array of custom message renderers to override or extend the default message components.
+     * Each entry is an object with `component` (Vue component) and `matchMessage` (Function).
+     * Custom entries are evaluated before defaults, allowing overrides.
      */
-    componentMap: {
-      type: Object,
+    messageRenderers: {
+      type: Array,
       required: false,
+      validator: messageRenderersValidator,
       default() {
-        return {};
+        return [];
       },
     },
     /**
@@ -62,17 +81,19 @@ export default {
     },
   },
   computed: {
-    messageMap() {
-      return { ...DEFAULT_COMPONENT_MAP, ...this.componentMap };
-    },
     messageComponent() {
-      return this.isValidMessageType ? this.messageMap[this.message?.message_type] : AgentMessage;
-    },
-    validMessageTypes() {
-      return [...Object.keys(DEFAULT_COMPONENT_MAP), ...Object.keys(this.componentMap)];
-    },
-    isValidMessageType() {
-      return this.validMessageTypes.includes(this.message?.message_type);
+      const combined = [...this.messageRenderers, ...DEFAULT_COMPONENT_MAP];
+      try {
+        const match = combined.find(({ matchMessage }) => matchMessage(this.message));
+        return match?.component ?? AgentMessage;
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          'Invalid message renderer found. Falling back to the default agent message renderer',
+          e
+        );
+        return AgentMessage;
+      }
     },
   },
 };

package/src/components/chat/components/duo_chat_message/message_types/message_tool.vue

@@ -1,8 +1,6 @@
 <script>
 import { GlButton, GlCollapse, GlIcon, GlLink } from '@gitlab/ui';
 import { translate } from '../../../../../utils/i18n';
-import MessageToolApproval from '../../duo_chat_message_tool_approval/message_tool_approval.vue';
-import { APPROVAL_TOOL_NAMES } from '../../../constants';
 import MessageToolDetails from './message_tool_details.vue';
 import BaseMessage from './message_base.vue';
 
@@ -21,7 +19,6 @@ export default {
   name: 'DuoToolMessage',
   components: {
     BaseMessage,
-    MessageToolApproval,
     MessageToolDetails,
     GlButton,
     GlCollapse,
@@ -153,9 +150,6 @@ export default {
     collapseIconName() {
       return this.isDetailsOpen ? 'chevron-down' : 'chevron-right';
     },
-    requiresApproval() {
-      return Object.values(APPROVAL_TOOL_NAMES).includes(this.toolName);
-    },
     shouldShowDetails() {
       return (
         !hiddenSubTypes.includes(this.message?.message_sub_type) &&
@@ -185,13 +179,7 @@ export default {
 };
 </script>
 <template>
-  <message-tool-approval
-    v-if="requiresApproval"
-    :messages="[message]"
-    :working-directory="workingDirectory"
-    approval-status="approved"
-  />
-  <base-message v-else :message="message">
+  <base-message :message="message">
     <template #message="{ content }">
       <div class="gl-border gl-flex-col gl-rounded-lg gl-border-default gl-p-4">
         <div class="gl-flex gl-flex-col gl-gap-2 gl-text-base gl-text-subtle">

package/src/components/chat/components/duo_chat_message/message_types/message_tool_approved.vue

@@ -0,0 +1,32 @@
+<script>
+import MessageToolApproval from '../../duo_chat_message_tool_approval/message_tool_approval.vue';
+
+export default {
+  name: 'MessageToolApproved',
+  components: { MessageToolApproval },
+  props: {
+    message: {
+      required: true,
+      type: Object,
+    },
+    workingDirectory: {
+      required: false,
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    messages() {
+      return [this.message];
+    },
+  },
+};
+</script>
+<template>
+  <message-tool-approval
+    :messages="messages"
+    :working-directory="workingDirectory"
+    approval-status="approved"
+    v-on="$listeners"
+  />
+</template>

package/src/components/chat/components/utils.js

@@ -1,3 +1,12 @@
+export const isValidMessageRenderer = (renderer) =>
+  renderer !== null &&
+  typeof renderer === 'object' &&
+  typeof renderer.component === 'object' &&
+  typeof renderer.matchMessage === 'function';
+
+export const messageRenderersValidator = (renderers) =>
+  Array.isArray(renderers) && renderers.every((renderer) => isValidMessageRenderer(renderer));
+
 export const concatUntilEmpty = (arr) => {
   if (!arr) return '';
 

package/src/components/chat/constants.js

@@ -31,6 +31,16 @@ export const MESSAGE_MODEL_ROLES = {
   workflow_end: 'workflow_end',
 };
 
+export const VALID_MESSAGE_TYPES = [
+  MESSAGE_MODEL_ROLES.agent,
+  MESSAGE_MODEL_ROLES.workflow_end,
+  MESSAGE_MODEL_ROLES.request,
+  MESSAGE_MODEL_ROLES.tool,
+  MESSAGE_MODEL_ROLES.user,
+  MESSAGE_MODEL_ROLES.system,
+  MESSAGE_MODEL_ROLES.assistant,
+];
+
 export const SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED = true;
 
 // TODO this should be a shared util in GitLab UI

package/src/index.js

@@ -1,3 +1,5 @@
+import { MESSAGE_MODEL_ROLES } from './components/chat/constants';
+
 export { default as DuoUserFeedback } from './components/user_feedback/user_feedback.vue';
 
 // Duo Chat component
@@ -9,14 +11,14 @@ export { default as DuoChatMessageSources } from './components/chat/components/d
 export { default as DuoChatPredefinedPrompts } from './components/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue';
 
 // Duo message types
-export {
-  VALID_MESSAGE_TYPES,
-  AGENT_MESSAGE_TYPE,
-  USER_MESSAGE_TYPE,
-  FLOW_END_TYPE,
-  INPUT_REQUEST_TYPE,
-  TOOL_MESSAGE_TYPE,
-} from './components/chat/components/duo_chat_message/message_types/constants';
+export { MESSAGE_MODEL_ROLES, VALID_MESSAGE_TYPES } from './components/chat/constants';
+
+// Legacy message type exports for backward compatibility
+export const AGENT_MESSAGE_TYPE = MESSAGE_MODEL_ROLES.agent;
+export const USER_MESSAGE_TYPE = MESSAGE_MODEL_ROLES.user;
+export const FLOW_END_TYPE = MESSAGE_MODEL_ROLES.workflow_end;
+export const INPUT_REQUEST_TYPE = MESSAGE_MODEL_ROLES.request;
+export const TOOL_MESSAGE_TYPE = MESSAGE_MODEL_ROLES.tool;
 
 // Duo message type components
 export { default as MessageMap } from './components/chat/components/duo_chat_message/message_types/message_map.vue';

package/dist/components/chat/components/duo_chat_message/message_types/constants.js

@@ -1,11 +0,0 @@
-// Message type constants
-const AGENT_MESSAGE_TYPE = 'agent';
-const FLOW_END_TYPE = 'workflow_end';
-const INPUT_REQUEST_TYPE = 'request';
-const TOOL_MESSAGE_TYPE = 'tool';
-const USER_MESSAGE_TYPE = 'user';
-
-// Array of all valid message types for validation
-const VALID_MESSAGE_TYPES = [AGENT_MESSAGE_TYPE, FLOW_END_TYPE, INPUT_REQUEST_TYPE, TOOL_MESSAGE_TYPE, USER_MESSAGE_TYPE];
-
-export { AGENT_MESSAGE_TYPE, FLOW_END_TYPE, INPUT_REQUEST_TYPE, TOOL_MESSAGE_TYPE, USER_MESSAGE_TYPE, VALID_MESSAGE_TYPES };

package/src/components/chat/components/duo_chat_message/message_types/constants.js

@@ -1,15 +0,0 @@
-// Message type constants
-export const AGENT_MESSAGE_TYPE = 'agent';
-export const FLOW_END_TYPE = 'workflow_end';
-export const INPUT_REQUEST_TYPE = 'request';
-export const TOOL_MESSAGE_TYPE = 'tool';
-export const USER_MESSAGE_TYPE = 'user';
-
-// Array of all valid message types for validation
-export const VALID_MESSAGE_TYPES = [
-  AGENT_MESSAGE_TYPE,
-  FLOW_END_TYPE,
-  INPUT_REQUEST_TYPE,
-  TOOL_MESSAGE_TYPE,
-  USER_MESSAGE_TYPE,
-];