@gitlab/duo-ui 8.14.2 → 8.15.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [8.15.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.14.2...v8.15.0) (2025-05-12)
+
+
+### Features
+
+* Add new tool call styling ([8501c64](https://gitlab.com/gitlab-org/duo-ui/commit/8501c64e87d11aee0274043e1e6d32bfac05fbc0))
+
 ## [8.14.2](https://gitlab.com/gitlab-org/duo-ui/compare/v8.14.1...v8.14.2) (2025-05-05)
 
 

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

@@ -2,7 +2,7 @@ import BaseMessage from './message_base';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
-  name: 'DuoChatAgentMessage',
+  name: 'DuoAgentMessage',
   components: {
     BaseMessage
   },

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

@@ -3,7 +3,7 @@ import { renderDuoChatMarkdownPreview } from '../../../markdown_renderer';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
-  name: 'DuoChatBaseMessage',
+  name: 'DuoBaseMessage',
   components: {
     GlIcon
   },
@@ -33,7 +33,10 @@ var script = {
      */
     message: {
       type: Object,
-      required: true
+      required: true,
+      validate: message => {
+        return message && message.content && message.role && message.errors;
+      }
     }
   },
   computed: {

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

@@ -2,7 +2,7 @@ import AgentMessage from './message_agent';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
-  name: 'DuoChatInputRequestedMessage',
+  name: 'DuoInputRequestedMessage',
   components: {
     AgentMessage
   },

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

@@ -1,11 +1,12 @@
-import { GlLink } from '@gitlab/ui';
+import { GlIcon, GlLink } from '@gitlab/ui';
 import BaseMessage from './message_base';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
-  name: 'DuoChatToolMessage',
+  name: 'DuoToolMessage',
   components: {
     BaseMessage,
+    GlIcon,
     GlLink
   },
   provide: {
@@ -20,13 +21,33 @@ var script = {
   props: {
     message: {
       required: true,
-      type: Object
+      type: Object,
+      validate: value => {
+        return value && value.tool_info;
+      }
     }
   },
   computed: {
+    iconName() {
+      var _this$message$tool_in;
+      switch ((_this$message$tool_in = this.message.tool_info) === null || _this$message$tool_in === void 0 ? void 0 : _this$message$tool_in.name) {
+        case 'read_file':
+          return 'eye';
+        case 'write_file':
+          return 'pencil';
+        case 'grep_files':
+        case 'list_files':
+          return 'search';
+        case 'get_issue':
+        case 'list_issue_notes':
+          return 'issues';
+        default:
+          return 'issue-type-maintenance';
+      }
+    },
     messageFilePath() {
-      var _this$message$tool_in, _this$message$tool_in2;
-      return (_this$message$tool_in = this.message.tool_info) === null || _this$message$tool_in === void 0 ? void 0 : (_this$message$tool_in2 = _this$message$tool_in.args) === null || _this$message$tool_in2 === void 0 ? void 0 : _this$message$tool_in2.file_path;
+      var _this$message$tool_in2, _this$message$tool_in3;
+      return (_this$message$tool_in2 = this.message.tool_info) === null || _this$message$tool_in2 === void 0 ? void 0 : (_this$message$tool_in3 = _this$message$tool_in2.args) === null || _this$message$tool_in3 === void 0 ? void 0 : _this$message$tool_in3.file_path;
     }
   },
   methods: {
@@ -42,7 +63,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('base-message',{attrs:{"message":_vm.message},scopedSlots:_vm._u([{key:"message",fn:function(ref){
 var content = ref.content;
-return [_c('span',{staticClass:"gl-text-sm"},[_vm._v(_vm._s(content))]),_vm._v(" "),(_vm.messageFilePath)?_c('gl-link',{staticClass:"gl-markdown file-path-link gl-text-sm",attrs:{"data-testid":"file-path-link"},on:{"click":function($event){$event.preventDefault();return _vm.onOpenFilePath.apply(null, arguments)}}},[_c('code',[_vm._v(_vm._s(_vm.messageFilePath))])]):_vm._e()]}}])})};
+return [_c('div',{staticClass:"gl-flex gl-items-baseline !gl-text-subtle"},[_c('div',{staticClass:"gl-mr-3 gl-flex-shrink-0"},[_c('gl-icon',{attrs:{"name":_vm.iconName}})],1),_vm._v(" "),_c('div',[_c('span',[_vm._v(_vm._s(content))]),_vm._v(" "),(_vm.messageFilePath)?_c('gl-link',{staticClass:"gl-markdown file-path-link gl-break-all",attrs:{"data-testid":"file-path-link"},on:{"click":function($event){$event.preventDefault();return _vm.onOpenFilePath.apply(null, arguments)}}},[_c('code',[_vm._v(_vm._s(_vm.messageFilePath))])]):_vm._e()],1)])]}}])})};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -4,7 +4,7 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const WORKFLOW_NEW_APP = 'workflow-new';
 var script = {
-  name: 'DuoChatWorkflowEndMessage',
+  name: 'DuoWorkflowEndMessage',
   components: {
     AgentMessage,
     GlButton

package/dist/components/chat/mock_data.js

@@ -33,13 +33,17 @@ const MOCK_RESPONSE_MESSAGE = {
 const MOCK_TOOL_MESSAGE = {
   id: '123',
   content: "Search for 'duo.*chat.*message' in directory",
-  message_type: MESSAGE_MODEL_ROLES.tool
+  message_type: MESSAGE_MODEL_ROLES.tool,
+  tool_info: {
+    name: 'list_files'
+  }
 };
 const MOCK_TOOL_MESSAGE_WITH_LINK = {
   id: '123',
   content: "Search for 'duo.*chat.*message' in directory",
   message_type: MESSAGE_MODEL_ROLES.tool,
   tool_info: {
+    name: 'list_files',
     args: {
       file_path: '/path/to/file.js'
     }

package/dist/index.js

@@ -7,6 +7,10 @@ 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 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';
+export { default as WorkflowEndMessage } from './components/chat/components/duo_chat_message/message_types/message_workflow_end';
 export { default as AgenticDuoChat } from './components/agentic_chat/agentic_duo_chat';
 export { default as DuoChatContextItemDetailsModal } from './components/chat/components/duo_chat_context/duo_chat_context_item_details_modal/duo_chat_context_item_details_modal';
 export { default as DuoChatContextItemMenu } from './components/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/duo-ui",
-  "version": "8.14.2",
+  "version": "8.15.0",
   "description": "Duo UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -95,7 +95,7 @@
     "@babel/core": "^7.27.1",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.27.1",
+    "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@gitlab/eslint-plugin": "20.7.1",
     "@gitlab/fonts": "^1.3.0",

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

@@ -2,7 +2,7 @@
 import BaseMessage from './message_base.vue';
 
 export default {
-  name: 'DuoChatAgentMessage',
+  name: 'DuoAgentMessage',
   components: {
     BaseMessage,
   },

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

@@ -4,7 +4,7 @@ import { GlIcon, GlTooltipDirective, GlSafeHtmlDirective as SafeHtml } from '@gi
 import { renderDuoChatMarkdownPreview } from '../../../markdown_renderer';
 
 export default {
-  name: 'DuoChatBaseMessage',
+  name: 'DuoBaseMessage',
   components: {
     GlIcon,
   },
@@ -35,6 +35,9 @@ export default {
     message: {
       type: Object,
       required: true,
+      validate: (message) => {
+        return message && message.content && message.role && message.errors;
+      },
     },
   },
   computed: {

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

@@ -2,7 +2,7 @@
 import AgentMessage from './message_agent.vue';
 
 export default {
-  name: 'DuoChatInputRequestedMessage',
+  name: 'DuoInputRequestedMessage',
   components: {
     AgentMessage,
   },

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

@@ -1,11 +1,12 @@
 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlIcon, GlLink } from '@gitlab/ui';
 import BaseMessage from './message_base.vue';
 
 export default {
-  name: 'DuoChatToolMessage',
+  name: 'DuoToolMessage',
   components: {
     BaseMessage,
+    GlIcon,
     GlLink,
   },
   provide: {
@@ -21,9 +22,28 @@ export default {
     message: {
       required: true,
       type: Object,
+      validate: (value) => {
+        return value && value.tool_info;
+      },
     },
   },
   computed: {
+    iconName() {
+      switch (this.message.tool_info?.name) {
+        case 'read_file':
+          return 'eye';
+        case 'write_file':
+          return 'pencil';
+        case 'grep_files':
+        case 'list_files':
+          return 'search';
+        case 'get_issue':
+        case 'list_issue_notes':
+          return 'issues';
+        default:
+          return 'issue-type-maintenance';
+      }
+    },
     messageFilePath() {
       return this.message.tool_info?.args?.file_path;
     },
@@ -38,15 +58,22 @@ export default {
 <template>
   <base-message :message="message">
     <template #message="{ content }">
-      <span class="gl-text-sm">{{ content }}</span>
-      <gl-link
-        v-if="messageFilePath"
-        class="gl-markdown file-path-link gl-text-sm"
-        data-testid="file-path-link"
-        @click.prevent="onOpenFilePath"
-      >
-        <code>{{ messageFilePath }}</code>
-      </gl-link>
+      <div class="gl-flex gl-items-baseline !gl-text-subtle">
+        <div class="gl-mr-3 gl-flex-shrink-0">
+          <gl-icon :name="iconName" />
+        </div>
+        <div>
+          <span>{{ content }}</span>
+          <gl-link
+            v-if="messageFilePath"
+            class="gl-markdown file-path-link gl-break-all"
+            data-testid="file-path-link"
+            @click.prevent="onOpenFilePath"
+          >
+            <code>{{ messageFilePath }}</code>
+          </gl-link>
+        </div>
+      </div>
     </template>
   </base-message>
 </template>

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

@@ -5,7 +5,7 @@ import AgentMessage from './message_agent.vue';
 export const WORKFLOW_NEW_APP = 'workflow-new';
 
 export default {
-  name: 'DuoChatWorkflowEndMessage',
+  name: 'DuoWorkflowEndMessage',
   components: {
     AgentMessage,
     GlButton,

package/src/components/chat/mock_data.js

@@ -48,6 +48,9 @@ export const MOCK_TOOL_MESSAGE = {
   id: '123',
   content: "Search for 'duo.*chat.*message' in directory",
   message_type: MESSAGE_MODEL_ROLES.tool,
+  tool_info: {
+    name: 'list_files',
+  },
 };
 
 export const MOCK_TOOL_MESSAGE_WITH_LINK = {
@@ -55,6 +58,7 @@ export const MOCK_TOOL_MESSAGE_WITH_LINK = {
   content: "Search for 'duo.*chat.*message' in directory",
   message_type: MESSAGE_MODEL_ROLES.tool,
   tool_info: {
+    name: 'list_files',
     args: {
       file_path: '/path/to/file.js',
     },

package/src/index.js

@@ -12,6 +12,12 @@ export { default as DuoChatMessage } from './components/chat/components/duo_chat
 export { default as DuoChatMessageSources } from './components/chat/components/duo_chat_message_sources/duo_chat_message_sources.vue';
 export { default as DuoChatPredefinedPrompts } from './components/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue';
 
+// Duo message type components
+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';
+export { default as WorkflowEndMessage } from './components/chat/components/duo_chat_message/message_types/message_workflow_end.vue';
+
 // Agentic Duo Chat component
 export { default as AgenticDuoChat } from './components/agentic_chat/agentic_duo_chat.vue';