@gitlab/duo-ui 8.14.2 → 8.16.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [8.16.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.15.0...v8.16.0) (2025-05-14)
+
+
+### Features
+
+* Add repository context category ([793f77d](https://gitlab.com/gitlab-org/duo-ui/commit/793f77d76f3673a2cac5fc116b864b3c3779d0bf))
+
+# [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_context/constants.js

@@ -4,8 +4,9 @@ const CONTEXT_ITEM_CATEGORY_FILE = 'file';
 const CONTEXT_ITEM_CATEGORY_LOCAL_GIT = 'local_git';
 const CONTEXT_ITEM_CATEGORY_DEPENDENCY = 'dependency';
 const CONTEXT_ITEM_CATEGORY_TERMINAL_SELECTION = 'terminal';
+const CONTEXT_ITEM_CATEGORY_REPOSITORY = 'repository';
 const LANGUAGE_IDENTIFIER_PREFIX = 'language-';
 const LANGUAGE_IDENTIFIER_DIFF = 'language-diff';
 const LANGUAGE_IDENTIFIER_PLAINTEXT = 'language-plaintext';
 
-export { CONTEXT_ITEM_CATEGORY_DEPENDENCY, CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST, CONTEXT_ITEM_CATEGORY_TERMINAL_SELECTION, LANGUAGE_IDENTIFIER_DIFF, LANGUAGE_IDENTIFIER_PLAINTEXT, LANGUAGE_IDENTIFIER_PREFIX };
+export { CONTEXT_ITEM_CATEGORY_DEPENDENCY, CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST, CONTEXT_ITEM_CATEGORY_REPOSITORY, CONTEXT_ITEM_CATEGORY_TERMINAL_SELECTION, LANGUAGE_IDENTIFIER_DIFF, LANGUAGE_IDENTIFIER_PLAINTEXT, LANGUAGE_IDENTIFIER_PREFIX };

package/dist/components/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_category_items.js

@@ -1,4 +1,4 @@
-import { GlIcon, GlDropdownItem } from '@gitlab/ui';
+import { GlIcon, GlDropdownItem, GlTooltipDirective } from '@gitlab/ui';
 import { categoriesValidator } from '../utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -8,6 +8,9 @@ var script = {
     GlIcon,
     GlDropdownItem
   },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
   props: {
     categories: {
       type: Array,
@@ -33,7 +36,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 _c('ul',{staticClass:"gl-mb-0 gl-list-none gl-pl-0"},_vm._l((_vm.categories),function(category,index){return _c('gl-dropdown-item',{key:category.value,class:{ 'active-command': index === _vm.activeIndex },attrs:{"data-testid":"category-item"},on:{"click":function($event){return _vm.selectCategory(category)}}},[_c('div',{staticClass:"gl-flex gl-items-center",on:{"mouseenter":function($event){return _vm.setActiveIndex(index)}}},[_c('gl-icon',{staticClass:"gl-mr-2",attrs:{"name":category.icon}}),_vm._v("\n      "+_vm._s(category.label)+"\n    ")],1)])}),1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ul',{staticClass:"gl-mb-0 gl-list-none gl-pl-0"},_vm._l((_vm.categories),function(category,index){return _c('gl-dropdown-item',{key:category.value,class:{ 'active-command': index === _vm.activeIndex },attrs:{"data-testid":"category-item"},on:{"click":function($event){return _vm.selectCategory(category)}}},[_c('div',{staticClass:"gl-flex gl-items-center",on:{"mouseenter":function($event){return _vm.setActiveIndex(index)}}},[_c('gl-icon',{staticClass:"gl-mr-2",attrs:{"name":category.icon}}),_vm._v("\n      "+_vm._s(category.label)+"\n      "),(category.tooltip)?_c('gl-icon',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:(category.tooltip),expression:"category.tooltip"}],staticClass:"gl-ml-2",attrs:{"name":"information-o"}}):_vm._e()],1)])}),1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/chat/components/duo_chat_context/mock_context_data.js

@@ -1,4 +1,4 @@
-import { CONTEXT_ITEM_CATEGORY_DEPENDENCY, CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST } from './constants';
+import { CONTEXT_ITEM_CATEGORY_DEPENDENCY, CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST, CONTEXT_ITEM_CATEGORY_REPOSITORY } from './constants';
 
 const MOCK_CATEGORIES = [{
   label: 'Files',
@@ -20,6 +20,11 @@ const MOCK_CATEGORIES = [{
   label: 'Dependencies',
   value: CONTEXT_ITEM_CATEGORY_DEPENDENCY,
   icon: 'package'
+}, {
+  label: 'Repositories',
+  value: CONTEXT_ITEM_CATEGORY_REPOSITORY,
+  icon: 'project',
+  tooltip: 'Best for broad relational questions. Fills context quickly.'
 }];
 function getMockCategory(categoryValue) {
   return MOCK_CATEGORIES.find(cat => cat.value === categoryValue);
@@ -250,7 +255,7 @@ const MOCK_CONTEXT_ITEM_DEPENDENCY = {
   }
 };
 const MOCK_CONTEXT_ITEM_DEPENDENCY_DISABLED = {
-  id: '923e4567-e89b-12d3-a456-426614174008',
+  id: '654e4567-e89b-12d3-a456-4266149801',
   category: CONTEXT_ITEM_CATEGORY_DEPENDENCY,
   content: JSON.stringify([{
     javascript: ['@types/node@16.11.7', '@vue/compiler-sfc@3.2.37', 'typescript@4.5.5', 'vue@3.2.37'],
@@ -267,6 +272,30 @@ const MOCK_CONTEXT_ITEM_DEPENDENCY_DISABLED = {
     project: 'example/vehicle'
   }
 };
+const MOCK_CONTEXT_ITEM_REPOSITORY = {
+  id: '4354e4567-e89b-12d3-a456-4266146087',
+  category: CONTEXT_ITEM_CATEGORY_REPOSITORY,
+  content: '',
+  metadata: {
+    enabled: true,
+    title: 'example/garden',
+    icon: 'project',
+    subType: 'repository'
+  }
+};
+const MOCK_CONTEXT_ITEM_REPOSITORY_DISABLED = {
+  id: '923e4567-e89b-12d3-a456-426614174008',
+  category: CONTEXT_ITEM_CATEGORY_REPOSITORY,
+  content: '',
+  metadata: {
+    enabled: false,
+    disabledReasons: ['This repository is not available', 'Access restricted'],
+    title: 'example/vehicle',
+    icon: 'project',
+    subType: 'repository'
+  }
+};
+const mockRepositories = [MOCK_CONTEXT_ITEM_REPOSITORY, MOCK_CONTEXT_ITEM_REPOSITORY_DISABLED];
 const mockDependencies = [MOCK_CONTEXT_ITEM_DEPENDENCY, MOCK_CONTEXT_ITEM_DEPENDENCY_DISABLED, {
   id: 'b23e4567-e89b-12d3-a456-426614174010',
   category: CONTEXT_ITEM_CATEGORY_DEPENDENCY,
@@ -317,7 +346,7 @@ const MOCK_CONTEXT_ITEM_TERMINAL = {
 };
 const mockTerminalSelections = [MOCK_CONTEXT_ITEM_TERMINAL];
 const getMockContextItems = () => {
-  const allItems = [...mockFiles, ...mockGitItems, ...mockIssues, ...mockMergeRequests, ...mockDependencies, ...mockTerminalSelections];
+  const allItems = [...mockFiles, ...mockGitItems, ...mockIssues, ...mockMergeRequests, ...mockDependencies, ...mockTerminalSelections, ...mockRepositories];
 
   // put disabled items in the back
   const disabledItems = allItems.filter(item => !item.metadata.enabled);
@@ -325,4 +354,4 @@ const getMockContextItems = () => {
   return [...enabledItems, ...disabledItems];
 };
 
-export { MOCK_CATEGORIES, MOCK_CONTEXT_FILE_CONTENT, MOCK_CONTEXT_FILE_DIFF_CONTENT, MOCK_CONTEXT_ITEM_DEPENDENCY, MOCK_CONTEXT_ITEM_DEPENDENCY_DISABLED, MOCK_CONTEXT_ITEM_FILE, MOCK_CONTEXT_ITEM_FILE_DISABLED, MOCK_CONTEXT_ITEM_GIT_COMMIT, MOCK_CONTEXT_ITEM_GIT_DIFF, MOCK_CONTEXT_ITEM_ISSUE, MOCK_CONTEXT_ITEM_ISSUE_DISABLED, MOCK_CONTEXT_ITEM_MERGE_REQUEST, MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED, MOCK_CONTEXT_ITEM_TERMINAL, getMockCategory, getMockContextItems };
+export { MOCK_CATEGORIES, MOCK_CONTEXT_FILE_CONTENT, MOCK_CONTEXT_FILE_DIFF_CONTENT, MOCK_CONTEXT_ITEM_DEPENDENCY, MOCK_CONTEXT_ITEM_DEPENDENCY_DISABLED, MOCK_CONTEXT_ITEM_FILE, MOCK_CONTEXT_ITEM_FILE_DISABLED, MOCK_CONTEXT_ITEM_GIT_COMMIT, MOCK_CONTEXT_ITEM_GIT_DIFF, MOCK_CONTEXT_ITEM_ISSUE, MOCK_CONTEXT_ITEM_ISSUE_DISABLED, MOCK_CONTEXT_ITEM_MERGE_REQUEST, MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED, MOCK_CONTEXT_ITEM_REPOSITORY, MOCK_CONTEXT_ITEM_REPOSITORY_DISABLED, MOCK_CONTEXT_ITEM_TERMINAL, getMockCategory, getMockContextItems };

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.16.0",
   "description": "Duo UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -95,12 +95,12 @@
     "@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",
     "@gitlab/stylelint-config": "6.2.2",
-    "@gitlab/svgs": "^3.128.0",
+    "@gitlab/svgs": "^3.129.0",
     "@gitlab/ui": "latest",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",

package/src/components/chat/components/duo_chat_context/constants.js

@@ -4,6 +4,7 @@ export const CONTEXT_ITEM_CATEGORY_FILE = 'file';
 export const CONTEXT_ITEM_CATEGORY_LOCAL_GIT = 'local_git';
 export const CONTEXT_ITEM_CATEGORY_DEPENDENCY = 'dependency';
 export const CONTEXT_ITEM_CATEGORY_TERMINAL_SELECTION = 'terminal';
+export const CONTEXT_ITEM_CATEGORY_REPOSITORY = 'repository';
 
 export const LANGUAGE_IDENTIFIER_PREFIX = 'language-';
 export const LANGUAGE_IDENTIFIER_DIFF = 'language-diff';

package/src/components/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.md

@@ -11,7 +11,7 @@ The component expects items with specific display properties:
 ```typescript
 export type AIContextItem = {
   id: string;
-  category: 'file' | 'snippet' | 'issue' | 'merge_request' | 'dependency';
+  category: 'file' | 'snippet' | 'issue' | 'merge_request' | 'dependency' | 'repository';
 
   content?: string; // some categories allow loading/displaying content in the details-modal
 

package/src/components/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_category_items.vue

@@ -1,10 +1,13 @@
 <script>
-import { GlDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlDropdownItem, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { categoriesValidator } from '../utils';
 
 export default {
   name: 'DuoChatContextItemMenuCategoryItems',
   components: { GlIcon, GlDropdownItem },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     categories: {
       type: Array,
@@ -38,6 +41,12 @@ export default {
       <div class="gl-flex gl-items-center" @mouseenter="setActiveIndex(index)">
         <gl-icon :name="category.icon" class="gl-mr-2" />
         {{ category.label }}
+        <gl-icon
+          v-if="category.tooltip"
+          v-gl-tooltip="category.tooltip"
+          name="information-o"
+          class="gl-ml-2"
+        />
       </div>
     </gl-dropdown-item>
   </ul>

package/src/components/chat/components/duo_chat_context/mock_context_data.js

@@ -4,6 +4,7 @@ import {
   CONTEXT_ITEM_CATEGORY_ISSUE,
   CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
   CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
+  CONTEXT_ITEM_CATEGORY_REPOSITORY,
 } from './constants';
 
 export const MOCK_CATEGORIES = [
@@ -12,6 +13,12 @@ export const MOCK_CATEGORIES = [
   { label: 'Issues', value: CONTEXT_ITEM_CATEGORY_ISSUE, icon: 'issues' },
   { label: 'Merge Requests', value: CONTEXT_ITEM_CATEGORY_MERGE_REQUEST, icon: 'merge-request' },
   { label: 'Dependencies', value: CONTEXT_ITEM_CATEGORY_DEPENDENCY, icon: 'package' },
+  {
+    label: 'Repositories',
+    value: CONTEXT_ITEM_CATEGORY_REPOSITORY,
+    icon: 'project',
+    tooltip: 'Best for broad relational questions. Fills context quickly.',
+  },
 ];
 
 export function getMockCategory(categoryValue) {
@@ -284,7 +291,7 @@ export const MOCK_CONTEXT_ITEM_DEPENDENCY = {
 };
 
 export const MOCK_CONTEXT_ITEM_DEPENDENCY_DISABLED = {
-  id: '923e4567-e89b-12d3-a456-426614174008',
+  id: '654e4567-e89b-12d3-a456-4266149801',
   category: CONTEXT_ITEM_CATEGORY_DEPENDENCY,
   content: JSON.stringify([
     {
@@ -309,6 +316,33 @@ export const MOCK_CONTEXT_ITEM_DEPENDENCY_DISABLED = {
   },
 };
 
+export const MOCK_CONTEXT_ITEM_REPOSITORY = {
+  id: '4354e4567-e89b-12d3-a456-4266146087',
+  category: CONTEXT_ITEM_CATEGORY_REPOSITORY,
+  content: '',
+  metadata: {
+    enabled: true,
+    title: 'example/garden',
+    icon: 'project',
+    subType: 'repository',
+  },
+};
+
+export const MOCK_CONTEXT_ITEM_REPOSITORY_DISABLED = {
+  id: '923e4567-e89b-12d3-a456-426614174008',
+  category: CONTEXT_ITEM_CATEGORY_REPOSITORY,
+  content: '',
+  metadata: {
+    enabled: false,
+    disabledReasons: ['This repository is not available', 'Access restricted'],
+    title: 'example/vehicle',
+    icon: 'project',
+    subType: 'repository',
+  },
+};
+
+const mockRepositories = [MOCK_CONTEXT_ITEM_REPOSITORY, MOCK_CONTEXT_ITEM_REPOSITORY_DISABLED];
+
 const mockDependencies = [
   MOCK_CONTEXT_ITEM_DEPENDENCY,
   MOCK_CONTEXT_ITEM_DEPENDENCY_DISABLED,
@@ -378,6 +412,7 @@ export const getMockContextItems = () => {
     ...mockMergeRequests,
     ...mockDependencies,
     ...mockTerminalSelections,
+    ...mockRepositories,
   ];
 
   // put disabled items in the back

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';