@gitlab/duo-ui 10.5.0 → 10.6.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [10.6.0](https://gitlab.com/gitlab-org/duo-ui/compare/v10.5.0...v10.6.0) (2025-07-09)
+
+
+### Features
+
+* Export and use messageMap in agentic chat ([884a306](https://gitlab.com/gitlab-org/duo-ui/commit/884a306b275ddd020c5f6e79c3cee51d35fc4e14))
+
 # [10.5.0](https://gitlab.com/gitlab-org/duo-ui/compare/v10.4.0...v10.5.0) (2025-07-08)
 
 

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

@@ -1,4 +1,4 @@
-import { GlFormGroup, GlFormTextarea, GlIcon, GlAnimatedLoaderIcon, GlButton, GlSafeHtmlDirective, GlTooltipDirective } from '@gitlab/ui';
+import { GlIcon, GlAnimatedLoaderIcon, GlButton, GlSafeHtmlDirective, GlTooltipDirective } from '@gitlab/ui';
 import { translate, translatePlural, sprintf } from '@gitlab/ui/dist/utils/i18n';
 import throttle from 'lodash/throttle';
 import DuoChatContextItemSelections from '../duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections';
@@ -10,18 +10,9 @@ import { CopyCodeElement } from './copy_code_element';
 import { InsertCodeSnippetElement } from './insert_code_snippet_element';
 import { concatUntilEmpty, checkClipboardPermissions } from './utils';
 import { DUO_CODE_SCRIM_BOTTOM_CLASS, DUO_CODE_SCRIM_OFFSET, DUO_CODE_SCRIM_TOP_CLASS } from './constants';
-import AgentMessage from './message_types/message_agent';
-import InputRequestedMessage from './message_types/message_input_requested';
-import ToolMessage from './message_types/message_tool';
-import WorkflowEndMessage from './message_types/message_workflow_end';
+import MessageMap from './message_types/message_map';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const COMPONENT_FOR_MESSAGE_TYPE = {
-  tool: () => ToolMessage,
-  request: () => InputRequestedMessage,
-  workflow_end: () => WorkflowEndMessage,
-  agent: () => AgentMessage
-};
 const i18n = {
   CHAT_MESSAGE_COPIED: translate('DuoChatMessage.chatMessageCopied', 'Copied'),
   CHAT_MESSAGE_COPY: translate('DuoChatMessage.chatMessageCopyToClipboard', 'Copy to clipboard'),
@@ -38,8 +29,7 @@ var script = {
     DocumentationSources,
     DuoChatContextItemSelections,
     MessageFeedback,
-    GlFormGroup,
-    GlFormTextarea,
+    MessageMap,
     GlIcon,
     GlAnimatedLoaderIcon,
     GlButton
@@ -200,10 +190,6 @@ var script = {
       var _this$message2, _this$message2$role, _this$message3, _this$message3$messag;
       return ((_this$message2 = this.message) === null || _this$message2 === void 0 ? void 0 : (_this$message2$role = _this$message2.role) === null || _this$message2$role === void 0 ? void 0 : _this$message2$role.toLowerCase()) === type || ((_this$message3 = this.message) === null || _this$message3 === void 0 ? void 0 : (_this$message3$messag = _this$message3.message_type) === null || _this$message3$messag === void 0 ? void 0 : _this$message3$messag.toLowerCase()) === type;
     },
-    componentForMessageType(message) {
-      var _COMPONENT_FOR_MESSAG, _COMPONENT_FOR_MESSAG2;
-      return (_COMPONENT_FOR_MESSAG = (_COMPONENT_FOR_MESSAG2 = COMPONENT_FOR_MESSAGE_TYPE[message.message_type]) === null || _COMPONENT_FOR_MESSAG2 === void 0 ? void 0 : _COMPONENT_FOR_MESSAG2.call(COMPONENT_FOR_MESSAGE_TYPE, message, this.messages)) !== null && _COMPONENT_FOR_MESSAG !== void 0 ? _COMPONENT_FOR_MESSAG : AgentMessage;
-    },
     setChunks() {
       if (this.isChunk) {
         const {
@@ -305,7 +291,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
         'gl-bg-subtle': _vm.isAssistantMessage && !_vm.error,
         'duo-chat-message-with-error gl-bg-feedback-danger': _vm.error,
         '!gl-rounded-br-none': _vm.shouldShowCopyAction,
-      },on:{"insert-code-snippet":_vm.onInsertCodeSnippet,"copy-code-snippet":_vm.onCopyCodeSnippet}},[(_vm.showA11yFromText)?_c('div',{staticClass:"gl-sr-only"},[_vm._v("\n        "+_vm._s(_vm.isUserMessage ? _vm.$options.i18n.FROM_ME : _vm.$options.i18n.FROM_DUO)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.error)?_c('gl-icon',{staticClass:"error-icon gl-mr-3 gl-shrink-0 gl-text-danger",attrs:{"aria-label":_vm.$options.i18n.MESSAGE_ERROR,"name":"error","size":16,"data-testid":"error"}}):_vm._e(),_vm._v(" "),_c('div',{ref:"content-wrapper",class:{ 'has-error': _vm.error }},[(_vm.displaySelectedContextItems && _vm.isAssistantMessage)?_c('duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"assistant"},on:{"get-content":_vm.onGetContextItemContent}}):_vm._e(),_vm._v(" "),(_vm.error)?_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.renderedError),expression:"renderedError",arg:_vm.$options.safeHtmlConfigExtension}],ref:"error-message"}):_c('div',[_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.messageContent),expression:"messageContent",arg:_vm.$options.safeHtmlConfigExtension}],ref:"content"}),_vm._v(" "),(_vm.isAssistantMessage)?[(_vm.sources)?_c('documentation-sources',{attrs:{"sources":_vm.sources}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"duo-chat-message-feedback gl-mt-4 gl-flex gl-items-end"},[(_vm.isChunkAndNotCancelled)?_c('gl-animated-loader-icon',{attrs:{"is-on":true}}):_vm._e(),_vm._v(" "),(_vm.shouldShowFeedbackLink)?_c('message-feedback',{attrs:{"has-feedback":_vm.hasFeedback},on:{"feedback":_vm.logEvent}}):_vm._e()],1)]:_vm._e()],2),_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()],1)],1),_vm._v(" "),_c('transition',{attrs:{"name":"duo-chat-message-actions"}},[(_vm.shouldShowCopyAction)?_c('div',{staticClass:"gl-bg-subtle duo-chat-message-actions gl-rounded-tr-lg gl-rounded-br-lg"},[_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",modifiers:{"hover":true}}],class:{ '!gl-text-success': _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"},on:{"click":_vm.copyMessage}})],1):_vm._e()])]:_c(_vm.componentForMessageType(_vm.message),{tag:"component",attrs:{"message":_vm.message,"with-feedback":_vm.withFeedback,"data-testid":"workflow-message"},on:{"open-file-path":_vm.onOpenFilePath,"feedback":_vm.logEvent,"insert-code-snippet":_vm.onInsertCodeSnippet,"copy-code-snippet":_vm.onCopyCodeSnippet}})],2)};
+      },on:{"insert-code-snippet":_vm.onInsertCodeSnippet,"copy-code-snippet":_vm.onCopyCodeSnippet}},[(_vm.showA11yFromText)?_c('div',{staticClass:"gl-sr-only"},[_vm._v("\n        "+_vm._s(_vm.isUserMessage ? _vm.$options.i18n.FROM_ME : _vm.$options.i18n.FROM_DUO)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.error)?_c('gl-icon',{staticClass:"error-icon gl-mr-3 gl-shrink-0 gl-text-danger",attrs:{"aria-label":_vm.$options.i18n.MESSAGE_ERROR,"name":"error","size":16,"data-testid":"error"}}):_vm._e(),_vm._v(" "),_c('div',{ref:"content-wrapper",class:{ 'has-error': _vm.error }},[(_vm.displaySelectedContextItems && _vm.isAssistantMessage)?_c('duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"assistant"},on:{"get-content":_vm.onGetContextItemContent}}):_vm._e(),_vm._v(" "),(_vm.error)?_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.renderedError),expression:"renderedError",arg:_vm.$options.safeHtmlConfigExtension}],ref:"error-message"}):_c('div',[_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.messageContent),expression:"messageContent",arg:_vm.$options.safeHtmlConfigExtension}],ref:"content"}),_vm._v(" "),(_vm.isAssistantMessage)?[(_vm.sources)?_c('documentation-sources',{attrs:{"sources":_vm.sources}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"duo-chat-message-feedback gl-mt-4 gl-flex gl-items-end"},[(_vm.isChunkAndNotCancelled)?_c('gl-animated-loader-icon',{attrs:{"is-on":true}}):_vm._e(),_vm._v(" "),(_vm.shouldShowFeedbackLink)?_c('message-feedback',{attrs:{"has-feedback":_vm.hasFeedback},on:{"feedback":_vm.logEvent}}):_vm._e()],1)]:_vm._e()],2),_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()],1)],1),_vm._v(" "),_c('transition',{attrs:{"name":"duo-chat-message-actions"}},[(_vm.shouldShowCopyAction)?_c('div',{staticClass:"gl-bg-subtle duo-chat-message-actions gl-rounded-tr-lg gl-rounded-br-lg"},[_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",modifiers:{"hover":true}}],class:{ '!gl-text-success': _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"},on:{"click":_vm.copyMessage}})],1):_vm._e()])]:_c('message-map',{attrs:{"message":_vm.message,"with-feedback":_vm.withFeedback,"data-testid":"workflow-message"},on:{"open-file-path":_vm.onOpenFilePath,"feedback":_vm.logEvent,"insert-code-snippet":_vm.onInsertCodeSnippet,"copy-code-snippet":_vm.onCopyCodeSnippet}})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/index.js

@@ -5,6 +5,7 @@ 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 { 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';
 export { default as SystemMessage } from './components/chat/components/duo_chat_message/message_types/message_tool';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/duo-ui",
-  "version": "10.5.0",
+  "version": "10.6.0",
   "description": "Duo UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -3,8 +3,6 @@ import {
   GlButton,
   GlIcon,
   GlAnimatedLoaderIcon,
-  GlFormGroup,
-  GlFormTextarea,
   GlTooltipDirective,
   GlSafeHtmlDirective as SafeHtml,
 } from '@gitlab/ui';
@@ -26,17 +24,7 @@ import {
   DUO_CODE_SCRIM_OFFSET,
   DUO_CODE_SCRIM_TOP_CLASS,
 } from './constants';
-import AgentMessage from './message_types/message_agent.vue';
-import InputRequestedMessage from './message_types/message_input_requested.vue';
-import ToolMessage from './message_types/message_tool.vue';
-import WorkflowEndMessage from './message_types/message_workflow_end.vue';
-
-const COMPONENT_FOR_MESSAGE_TYPE = {
-  tool: () => ToolMessage,
-  request: () => InputRequestedMessage,
-  workflow_end: () => WorkflowEndMessage,
-  agent: () => AgentMessage,
-};
+import MessageMap from './message_types/message_map.vue';
 
 export const i18n = {
   CHAT_MESSAGE_COPIED: translate('DuoChatMessage.chatMessageCopied', 'Copied'),
@@ -55,8 +43,7 @@ export default {
     DocumentationSources,
     DuoChatContextItemSelections,
     MessageFeedback,
-    GlFormGroup,
-    GlFormTextarea,
+    MessageMap,
     GlIcon,
     GlAnimatedLoaderIcon,
     GlButton,
@@ -234,11 +221,6 @@ export default {
         this.message?.message_type?.toLowerCase() === type
       );
     },
-    componentForMessageType(message) {
-      return (
-        COMPONENT_FOR_MESSAGE_TYPE[message.message_type]?.(message, this.messages) ?? AgentMessage
-      );
-    },
     setChunks() {
       if (this.isChunk) {
         const { chunkId, content } = this.message;
@@ -422,8 +404,7 @@ export default {
         </div>
       </transition>
     </template>
-    <component
-      :is="componentForMessageType(message)"
+    <message-map
       v-else
       :message="message"
       :with-feedback="withFeedback"

package/src/index.js

@@ -9,6 +9,7 @@ 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 type components
+export { default as MessageMap } from './components/chat/components/duo_chat_message/message_types/message_map.vue';
 export { default as AgentMessage } from './components/chat/components/duo_chat_message/message_types/message_agent.vue';
 export { default as InputRequestedMessage } from './components/chat/components/duo_chat_message/message_types/message_input_requested.vue';
 export { default as SystemMessage } from './components/chat/components/duo_chat_message/message_types/message_tool.vue';