@gitlab/duo-ui 13.2.0 → 13.3.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [13.3.0](https://gitlab.com/gitlab-org/duo-ui/compare/v13.2.0...v13.3.0) (2025-10-29)
+
+
+### Features
+
+* **DuoChatHeader:** adds visual tip for foundational agents ([9524a88](https://gitlab.com/gitlab-org/duo-ui/commit/9524a88b72d37db64a25a742cfaf76812c30db9f))
+
 # [13.2.0](https://gitlab.com/gitlab-org/duo-ui/compare/v13.1.0...v13.2.0) (2025-10-28)
 
 

package/dist/components/chat/components/duo_chat_header/duo_chat_header.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import { GlToast, GlAlert, GlButton, GlExperimentBadge, GlDisclosureDropdown, GlSafeHtmlDirective, GlTooltipDirective } from '@gitlab/ui';
 import { translate, sprintf } from '../../../../utils/i18n';
 import { VIEW_TYPES } from './constants';
+import DuoChatHeaderAgentItem from './duo_chat_header_agent_item/duo_chat_header_agent_item';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const i18n = {
@@ -24,7 +25,8 @@ var script = {
     GlAlert,
     GlButton,
     GlExperimentBadge,
-    GlDisclosureDropdown
+    GlDisclosureDropdown,
+    DuoChatHeaderAgentItem
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
@@ -149,7 +151,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
           _vm.isMultithreaded && (_vm.activeThreadId || _vm.currentView === _vm.VIEW_TYPES.LIST || _vm.hasManyAgents)
         )?[(_vm.hasManyAgents)?_c('gl-disclosure-dropdown',{attrs:{"title":_vm.$options.i18n.CHAT_NEW_TOOLTIP,"toggle-text":_vm.$options.i18n.CHAT_NEW_TOOLTIP,"items":_vm.agents,"data-testid":"chat-new-button","variant":"confirm","category":"tertiary","size":"small","icon":"duo-chat-new","text-sr-only":"","aria-label":_vm.$options.i18n.CHAT_NEW_LABEL,"no-caret":""},on:{"action":_vm.startNewChat},scopedSlots:_vm._u([{key:"list-item",fn:function(ref){
         var item = ref.item;
-return [_c('span',{staticClass:"gl-flex gl-flex-col"},[_c('span',{attrs:{"clas":"gl-block"}},[_vm._v(_vm._s(item.name))]),_vm._v(" "),_c('span',{staticClass:"gl-overflow-hidden gl-text-ellipsis gl-whitespace-nowrap gl-text-sm"},[_vm._v(_vm._s(item.description))])])]}}],null,false,117082970)}):_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":_vm.$options.i18n.CHAT_NEW_TOOLTIP,"data-testid":"chat-new-button","variant":"confirm","category":"tertiary","size":"small","icon":"duo-chat-new","aria-label":_vm.$options.i18n.CHAT_NEW_LABEL},on:{"click":_vm.startNewChat}})]:_vm._e(),_vm._v(" "),(_vm.isMultithreaded && _vm.currentView === _vm.VIEW_TYPES.CHAT)?_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":_vm.$options.i18n.CHAT_HISTORY_TOOLTIP,"data-testid":"go-back-to-list-button","category":"tertiary","size":"small","icon":"history","aria-label":_vm.$options.i18n.CHAT_BACK_LABEL},on:{"click":function($event){return _vm.$emit('go-back')}}}):_vm._e(),_vm._v(" "),(_vm.isMultithreaded && _vm.activeThreadId && _vm.currentView === _vm.VIEW_TYPES.LIST)?_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":_vm.$options.i18n.CHAT_BACK_TO_CHAT_TOOLTIP,"data-testid":"go-back-to-chat-button","category":"tertiary","size":"small","icon":"go-back","aria-label":_vm.$options.i18n.CHAT_BACK_TO_CHAT_TOOLTIP},on:{"click":function($event){return _vm.$emit('go-back-to-chat')}}}):_vm._e(),_vm._v(" "),(_vm.sessionId)?_c('gl-disclosure-dropdown',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:(_vm.showSessionDropdownTooltip),expression:"showSessionDropdownTooltip"}],attrs:{"icon":"ellipsis_v","category":"tertiary","text-sr-only":"","size":"small","toggle-text":_vm.$options.i18n.CHAT_DROPDOWN_MORE_OPTIONS,"items":_vm.sessionIdItems,"no-caret":""},on:{"shown":_vm.showSessionDropdown,"hidden":_vm.hideSessionDropdown}}):_vm._e(),_vm._v(" "),_c('gl-button',{staticClass:"gl-ml-auto",attrs:{"category":"tertiary","variant":"default","icon":"close","size":"small","data-testid":"chat-close-button","aria-label":_vm.$options.i18n.CHAT_CLOSE_LABEL},on:{"click":function($event){return _vm.$emit('close')}}})],2)]),_vm._v(" "),_vm._t("subheader"),_vm._v(" "),(_vm.error)?_c('gl-alert',{key:"error",staticClass:"!gl-pl-9",attrs:{"dismissible":false,"variant":"danger","role":"alert","data-testid":"chat-error"}},[_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.error),expression:"error"}]})]):_vm._e()],2)};
+return [_c('duo-chat-header-agent-item',{attrs:{"agent":item}})]}}],null,false,1406306174)}):_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":_vm.$options.i18n.CHAT_NEW_TOOLTIP,"data-testid":"chat-new-button","variant":"confirm","category":"tertiary","size":"small","icon":"duo-chat-new","aria-label":_vm.$options.i18n.CHAT_NEW_LABEL},on:{"click":_vm.startNewChat}})]:_vm._e(),_vm._v(" "),(_vm.isMultithreaded && _vm.currentView === _vm.VIEW_TYPES.CHAT)?_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":_vm.$options.i18n.CHAT_HISTORY_TOOLTIP,"data-testid":"go-back-to-list-button","category":"tertiary","size":"small","icon":"history","aria-label":_vm.$options.i18n.CHAT_BACK_LABEL},on:{"click":function($event){return _vm.$emit('go-back')}}}):_vm._e(),_vm._v(" "),(_vm.isMultithreaded && _vm.activeThreadId && _vm.currentView === _vm.VIEW_TYPES.LIST)?_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":_vm.$options.i18n.CHAT_BACK_TO_CHAT_TOOLTIP,"data-testid":"go-back-to-chat-button","category":"tertiary","size":"small","icon":"go-back","aria-label":_vm.$options.i18n.CHAT_BACK_TO_CHAT_TOOLTIP},on:{"click":function($event){return _vm.$emit('go-back-to-chat')}}}):_vm._e(),_vm._v(" "),(_vm.sessionId)?_c('gl-disclosure-dropdown',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:(_vm.showSessionDropdownTooltip),expression:"showSessionDropdownTooltip"}],attrs:{"icon":"ellipsis_v","category":"tertiary","text-sr-only":"","size":"small","toggle-text":_vm.$options.i18n.CHAT_DROPDOWN_MORE_OPTIONS,"items":_vm.sessionIdItems,"no-caret":""},on:{"shown":_vm.showSessionDropdown,"hidden":_vm.hideSessionDropdown}}):_vm._e(),_vm._v(" "),_c('gl-button',{staticClass:"gl-ml-auto",attrs:{"category":"tertiary","variant":"default","icon":"close","size":"small","data-testid":"chat-close-button","aria-label":_vm.$options.i18n.CHAT_CLOSE_LABEL},on:{"click":function($event){return _vm.$emit('close')}}})],2)]),_vm._v(" "),_vm._t("subheader"),_vm._v(" "),(_vm.error)?_c('gl-alert',{key:"error",staticClass:"!gl-pl-9",attrs:{"dismissible":false,"variant":"danger","role":"alert","data-testid":"chat-error"}},[_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.error),expression:"error"}]})]):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/chat/components/duo_chat_header/duo_chat_header_agent_item/duo_chat_header_agent_item.js

@@ -0,0 +1,62 @@
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { translate } from '@gitlab/ui/dist/utils/i18n';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const i18n = {
+  CHAT_VERIFIED_AGENT: translate('DuoChat.verifiedAgent', 'Created and maintained by GitLab')
+};
+var script = {
+  name: 'ChatAgentItem',
+  components: {
+    GlIcon
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
+  props: {
+    agent: {
+      type: Object,
+      required: true
+    }
+  },
+  i18n
+};
+
+/* 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('span',{staticClass:"gl-flex gl-flex-col"},[_c('span',{staticClass:"gl-mb-1 gl-inline-block gl-text-lg gl-font-bold gl-text-strong"},[_vm._v("\n    "+_vm._s(_vm.agent.name)+"\n    "),(_vm.agent.foundational)?_c('gl-icon',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"name":"tanuki-verified","variant":"subtle","title":_vm.$options.i18n.CHAT_VERIFIED_AGENT}}):_vm._e()],1),_vm._v(" "),_c('span',{staticClass:"gl-overflow-hidden gl-text-ellipsis gl-whitespace-nowrap gl-text-sm"},[_vm._v("\n    "+_vm._s(_vm.agent.description)+"\n  ")])])};
+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__;
+export { i18n };

package/dist/components/chat/components/duo_chat_header/web_duo_chat_header.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import { GlToast, GlAlert, GlAvatar, GlButton, GlDisclosureDropdown, GlSafeHtmlDirective, GlTooltipDirective } from '@gitlab/ui';
 import { translate, sprintf } from '../../../../utils/i18n';
+import DuoChatHeaderAgentItem from './duo_chat_header_agent_item/duo_chat_header_agent_item';
 import { VIEW_TYPES } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -24,7 +25,8 @@ var script = {
     GlAlert,
     GlAvatar,
     GlButton,
-    GlDisclosureDropdown
+    GlDisclosureDropdown,
+    DuoChatHeaderAgentItem
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
@@ -154,7 +156,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
           _vm.isMultithreaded && (_vm.activeThreadId || _vm.currentView === _vm.VIEW_TYPES.LIST || _vm.hasManyAgents)
         )?[(_vm.hasManyAgents)?_c('gl-disclosure-dropdown',{attrs:{"title":_vm.$options.i18n.CHAT_NEW_TOOLTIP,"toggle-text":_vm.$options.i18n.CHAT_NEW_TOOLTIP,"items":_vm.agents,"data-testid":"chat-new-button","variant":"confirm","category":"tertiary","size":"small","icon":"duo-chat-new","text-sr-only":"","aria-label":_vm.$options.i18n.CHAT_NEW_LABEL,"no-caret":""},on:{"action":_vm.startNewChat},scopedSlots:_vm._u([{key:"list-item",fn:function(ref){
         var item = ref.item;
-return [_c('span',{staticClass:"gl-flex gl-flex-col"},[_c('span',{staticClass:"gl-block"},[_vm._v(_vm._s(item.name))]),_vm._v(" "),_c('span',{staticClass:"gl-overflow-hidden gl-text-ellipsis gl-whitespace-nowrap gl-text-sm"},[_vm._v(_vm._s(item.description))])])]}}],null,false,2800000557)}):_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":_vm.$options.i18n.CHAT_NEW_TOOLTIP,"data-testid":"chat-new-button","variant":"confirm","category":"tertiary","size":"small","icon":"duo-chat-new","aria-label":_vm.$options.i18n.CHAT_NEW_LABEL},on:{"click":_vm.startNewChat}})]:_vm._e(),_vm._v(" "),(!_vm.showStudioHeader && _vm.isMultithreaded && _vm.currentView === _vm.VIEW_TYPES.CHAT)?_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":_vm.$options.i18n.CHAT_HISTORY_TOOLTIP,"data-testid":"go-back-to-list-button","category":"tertiary","size":"small","icon":"history","aria-label":_vm.$options.i18n.CHAT_BACK_LABEL},on:{"click":function($event){return _vm.$emit('go-back')}}}):_vm._e(),_vm._v(" "),(_vm.isMultithreaded && _vm.activeThreadId && _vm.currentView === _vm.VIEW_TYPES.LIST)?_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":_vm.$options.i18n.CHAT_BACK_TO_CHAT_TOOLTIP,"data-testid":"go-back-to-chat-button","category":"tertiary","size":"small","icon":"go-back","aria-label":_vm.$options.i18n.CHAT_BACK_TO_CHAT_TOOLTIP},on:{"click":function($event){return _vm.$emit('go-back-to-chat')}}}):_vm._e(),_vm._v(" "),(_vm.sessionId)?_c('gl-disclosure-dropdown',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:(_vm.showSessionDropdownTooltip),expression:"showSessionDropdownTooltip"}],attrs:{"icon":"ellipsis_v","category":"tertiary","text-sr-only":"","size":"small","toggle-text":_vm.$options.i18n.CHAT_DROPDOWN_MORE_OPTIONS,"items":_vm.sessionIdItems,"no-caret":""},on:{"shown":_vm.showSessionDropdown,"hidden":_vm.hideSessionDropdown}}):_vm._e()],2)]),_vm._v(" "),_vm._t("subheader"),_vm._v(" "),(_vm.error)?_c('gl-alert',{key:"error",staticClass:"!gl-pl-9",attrs:{"dismissible":false,"variant":"danger","role":"alert","data-testid":"chat-error"}},[_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.error),expression:"error"}]})]):_vm._e()],2)};
+return [_c('duo-chat-header-agent-item',{attrs:{"agent":item}})]}}],null,false,1406306174)}):_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":_vm.$options.i18n.CHAT_NEW_TOOLTIP,"data-testid":"chat-new-button","variant":"confirm","category":"tertiary","size":"small","icon":"duo-chat-new","aria-label":_vm.$options.i18n.CHAT_NEW_LABEL},on:{"click":_vm.startNewChat}})]:_vm._e(),_vm._v(" "),(!_vm.showStudioHeader && _vm.isMultithreaded && _vm.currentView === _vm.VIEW_TYPES.CHAT)?_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":_vm.$options.i18n.CHAT_HISTORY_TOOLTIP,"data-testid":"go-back-to-list-button","category":"tertiary","size":"small","icon":"history","aria-label":_vm.$options.i18n.CHAT_BACK_LABEL},on:{"click":function($event){return _vm.$emit('go-back')}}}):_vm._e(),_vm._v(" "),(_vm.isMultithreaded && _vm.activeThreadId && _vm.currentView === _vm.VIEW_TYPES.LIST)?_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":_vm.$options.i18n.CHAT_BACK_TO_CHAT_TOOLTIP,"data-testid":"go-back-to-chat-button","category":"tertiary","size":"small","icon":"go-back","aria-label":_vm.$options.i18n.CHAT_BACK_TO_CHAT_TOOLTIP},on:{"click":function($event){return _vm.$emit('go-back-to-chat')}}}):_vm._e(),_vm._v(" "),(_vm.sessionId)?_c('gl-disclosure-dropdown',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:(_vm.showSessionDropdownTooltip),expression:"showSessionDropdownTooltip"}],attrs:{"icon":"ellipsis_v","category":"tertiary","text-sr-only":"","size":"small","toggle-text":_vm.$options.i18n.CHAT_DROPDOWN_MORE_OPTIONS,"items":_vm.sessionIdItems,"no-caret":""},on:{"shown":_vm.showSessionDropdown,"hidden":_vm.hideSessionDropdown}}):_vm._e()],2)]),_vm._v(" "),_vm._t("subheader"),_vm._v(" "),(_vm.error)?_c('gl-alert',{key:"error",staticClass:"!gl-pl-9",attrs:{"dismissible":false,"variant":"danger","role":"alert","data-testid":"chat-error"}},[_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.error),expression:"error"}]})]):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

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

package/src/components/chat/components/duo_chat_header/duo_chat_header.vue

@@ -11,6 +11,7 @@ import {
 } from '@gitlab/ui';
 import { sprintf, translate } from '../../../../utils/i18n';
 import { VIEW_TYPES } from './constants';
+import DuoChatHeaderAgentItem from './duo_chat_header_agent_item/duo_chat_header_agent_item.vue';
 
 export const i18n = {
   CHAT_BACK_LABEL: translate('DuoChat.chatBackLabel', 'Back to history'),
@@ -42,6 +43,7 @@ export default {
     GlButton,
     GlExperimentBadge,
     GlDisclosureDropdown,
+    DuoChatHeaderAgentItem,
   },
   directives: {
     SafeHtml,
@@ -198,12 +200,7 @@ export default {
             @action="startNewChat"
           >
             <template #list-item="{ item }">
-              <span class="gl-flex gl-flex-col">
-                <span clas="gl-block">{{ item.name }}</span>
-                <span class="gl-overflow-hidden gl-text-ellipsis gl-whitespace-nowrap gl-text-sm">{{
-                  item.description
-                }}</span>
-              </span>
+              <duo-chat-header-agent-item :agent="item" />
             </template>
           </gl-disclosure-dropdown>
           <gl-button

package/src/components/chat/components/duo_chat_header/duo_chat_header_agent_item/duo_chat_header_agent_item.vue

@@ -0,0 +1,43 @@
+<script>
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { translate } from '@gitlab/ui/dist/utils/i18n';
+
+export const i18n = {
+  CHAT_VERIFIED_AGENT: translate('DuoChat.verifiedAgent', 'Created and maintained by GitLab'),
+};
+
+export default {
+  name: 'ChatAgentItem',
+  components: {
+    GlIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    agent: {
+      type: Object,
+      required: true,
+    },
+  },
+  i18n,
+};
+</script>
+
+<template>
+  <span class="gl-flex gl-flex-col">
+    <span class="gl-mb-1 gl-inline-block gl-text-lg gl-font-bold gl-text-strong">
+      {{ agent.name }}
+      <gl-icon
+        v-if="agent.foundational"
+        v-gl-tooltip
+        name="tanuki-verified"
+        variant="subtle"
+        :title="$options.i18n.CHAT_VERIFIED_AGENT"
+      />
+    </span>
+    <span class="gl-overflow-hidden gl-text-ellipsis gl-whitespace-nowrap gl-text-sm">
+      {{ agent.description }}
+    </span>
+  </span>
+</template>

package/src/components/chat/components/duo_chat_header/web_duo_chat_header.md

@@ -0,0 +1 @@
+A component that handles the header of the chat, including agent selection

package/src/components/chat/components/duo_chat_header/web_duo_chat_header.vue

@@ -10,6 +10,7 @@ import {
   GlDisclosureDropdown,
 } from '@gitlab/ui';
 import { sprintf, translate } from '../../../../utils/i18n';
+import DuoChatHeaderAgentItem from './duo_chat_header_agent_item/duo_chat_header_agent_item.vue';
 import { VIEW_TYPES } from './constants';
 
 export const i18n = {
@@ -42,6 +43,7 @@ export default {
     GlAvatar,
     GlButton,
     GlDisclosureDropdown,
+    DuoChatHeaderAgentItem,
   },
   directives: {
     SafeHtml,
@@ -222,12 +224,7 @@ export default {
             @action="startNewChat"
           >
             <template #list-item="{ item }">
-              <span class="gl-flex gl-flex-col">
-                <span class="gl-block">{{ item.name }}</span>
-                <span class="gl-overflow-hidden gl-text-ellipsis gl-whitespace-nowrap gl-text-sm">{{
-                  item.description
-                }}</span>
-              </span>
+              <duo-chat-header-agent-item :agent="item" />
             </template>
           </gl-disclosure-dropdown>
           <gl-button

package/translations.js

@@ -81,6 +81,7 @@ export default {
   'DuoChat.emptyHistoryTitle': 'See your chat history',
   'DuoChat.openChatLabel': 'Open chat: %{title}',
   'DuoChat.threadDeleteLabel': 'Delete this chat',
+  'DuoChat.verifiedAgent': 'Created and maintained by GitLab',
   'DuoChatContextItemDetailsModal.contentErrorMessage': 'Item content could not be displayed.',
   'DuoChatContextItemDetailsModal.title': 'Preview',
   'DuoChatContextItemMenu.emptyStateMessage': 'No results found',