@gitlab/duo-ui 8.6.0 → 8.7.1

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [8.7.1](https://gitlab.com/gitlab-org/duo-ui/compare/v8.7.0...v8.7.1) (2025-03-11)
+
+
+### Bug Fixes
+
+* Duo Chat overflow on header ([90b37c7](https://gitlab.com/gitlab-org/duo-ui/commit/90b37c70ccb25f93dfdb1f3709b59c8125c1b428))
+
+# [8.7.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.6.0...v8.7.0) (2025-03-11)
+
+
+### Bug Fixes
+
+* adapt default to BCP 47 ([7786272](https://gitlab.com/gitlab-org/duo-ui/commit/7786272f35b6447bda958ac01fc6922d0fb4c102))
+
+
+### Features
+
+* improve date formatting with localization support ([24c2548](https://gitlab.com/gitlab-org/duo-ui/commit/24c2548b2576fd70e5e93511f7107d965dd6361d))
+
 # [8.6.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.5.0...v8.6.0) (2025-03-11)
 
 

package/dist/components/chat/components/duo_chat_threads/duo_chat_threads.js

@@ -1,6 +1,6 @@
 import { GlButton, GlIcon } from '@gitlab/ui';
 import { translate } from '../../../../utils/i18n';
-import { formatDate } from '../../../../utils/date';
+import { formatLocalizedDate } from '../../../../utils/date';
 import DuoChatThreadsEmpty from './duo_chat_threads_empty';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -19,11 +19,15 @@ var script = {
     threads: {
       type: Array,
       required: true
+    },
+    preferredLocale: {
+      type: Array,
+      required: true
     }
   },
   computed: {
-    formatDate() {
-      return formatDate;
+    formattedLocalDate() {
+      return date => formatLocalizedDate(date, this.preferredLocale);
     },
     groupedThreads() {
       return this.threads.reduce((threadsGroupedByDate, thread) => {
@@ -61,7 +65,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('div',{staticClass:"gl-h-full gl-p-5"},[_c('div',{staticClass:"gl-bg-gray-50 gl-text-gray-500 gl-p-4 gl-mb-5 gl-rounded-base",attrs:{"data-testid":"chat-threads-info-banner"}},[_c('p',{staticClass:"gl-m-0 gl-flex"},[_c('gl-icon',{staticClass:"gl-mr-4",attrs:{"name":"bulb"}}),_vm._v(_vm._s(_vm.$options.i18n.CHAT_HISTORY_INFO)+"\n    ")],1)]),_vm._v(" "),(_vm.hasThreads)?_vm._l((_vm.groupedThreads),function(threadsForDate,date){return _c('div',{key:date},[_c('div',{staticClass:"gl-font-bold gl-neutral-900 gl-mb-4",attrs:{"data-testid":"chat-threads-date-header"}},[_vm._v("\n        "+_vm._s(_vm.formatDate(date))+"\n      ")]),_vm._v(" "),_c('div',_vm._l((threadsForDate),function(thread){return _c('div',{key:thread.id,staticClass:"gl-flex gl-align-center gl-mb-4"},[_c('div',{staticClass:"thread-box hover:gl-bg-gray-50 focus:gl-bg-gray-50 gl-text-ellipsis gl-overflow-hidden gl-rounded-base gl-cursor-pointer gl-rounded-base gl-p-4 gl-w-full gl-whitespace-nowrap",attrs:{"tabindex":"0","data-testid":"chat-threads-thread-box"},on:{"click":function($event){return _vm.onSelectThread(thread)}}},[_vm._v("\n            "+_vm._s(thread.title || 'Untitled Chat')+"\n          ")]),_vm._v(" "),_c('gl-button',{staticClass:"gl-neutral-900 !gl-p-4",attrs:{"data-testid":"chat-threads-delete-thread-button","icon":"remove","category":"tertiary","size":"small","aria-label":_vm.$options.i18n.THREAD_DELETE_LABEL},on:{"click":function($event){return _vm.$emit('delete-thread', thread.id)}}})],1)}),0)])}):_c('duo-chat-threads-empty')],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-h-full gl-p-5"},[_c('div',{staticClass:"gl-bg-gray-50 gl-text-gray-500 gl-p-4 gl-mb-5 gl-rounded-base",attrs:{"data-testid":"chat-threads-info-banner"}},[_c('p',{staticClass:"gl-m-0 gl-flex"},[_c('gl-icon',{staticClass:"gl-mr-4",attrs:{"name":"bulb"}}),_vm._v(_vm._s(_vm.$options.i18n.CHAT_HISTORY_INFO)+"\n    ")],1)]),_vm._v(" "),(_vm.hasThreads)?_vm._l((_vm.groupedThreads),function(threadsForDate,date){return _c('div',{key:date},[_c('div',{staticClass:"gl-font-bold gl-neutral-900 gl-mb-4",attrs:{"data-testid":"chat-threads-date-header"}},[_vm._v("\n        "+_vm._s(_vm.formattedLocalDate(date))+"\n      ")]),_vm._v(" "),_c('div',_vm._l((threadsForDate),function(thread){return _c('div',{key:thread.id,staticClass:"gl-flex gl-align-center gl-mb-4"},[_c('div',{staticClass:"thread-box hover:gl-bg-gray-50 focus:gl-bg-gray-50 gl-text-ellipsis gl-overflow-hidden gl-rounded-base gl-cursor-pointer gl-rounded-base gl-p-4 gl-w-full gl-whitespace-nowrap",attrs:{"tabindex":"0","data-testid":"chat-threads-thread-box"},on:{"click":function($event){return _vm.onSelectThread(thread)}}},[_vm._v("\n            "+_vm._s(thread.title || 'Untitled Chat')+"\n          ")]),_vm._v(" "),_c('gl-button',{staticClass:"gl-neutral-900 !gl-p-4",attrs:{"data-testid":"chat-threads-delete-thread-button","icon":"remove","category":"tertiary","size":"small","aria-label":_vm.$options.i18n.THREAD_DELETE_LABEL},on:{"click":function($event){return _vm.$emit('delete-thread', thread.id)}}})],1)}),0)])}):_c('duo-chat-threads-empty')],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/chat/duo_chat.js

@@ -33,6 +33,14 @@ const isThread = thread => typeof thread === 'object' && typeof thread.id === 's
 
 // eslint-disable-next-line unicorn/no-array-callback-reference
 const threadListValidator = threads => threads.every(isThread);
+const localeValidator = value => {
+  try {
+    Intl.getCanonicalLocales(value);
+    return true;
+  } catch {
+    return false;
+  }
+};
 var script = {
   name: 'DuoChat',
   components: {
@@ -232,6 +240,16 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    /**
+     * The preferred locale for the chat interface.
+     * Follows BCP 47 language tag format (e.g., 'en-US', 'fr-FR', 'es-ES').
+     */
+    preferredLocale: {
+      type: Array,
+      required: false,
+      default: () => ['en-US', 'en'],
+      validator: localeValidator
     }
   },
   data() {
@@ -244,7 +262,8 @@ var script = {
       compositionJustEnded: false,
       contextItemsMenuIsOpen: false,
       contextItemMenuRef: null,
-      currentView: this.multiThreadedView
+      currentView: this.multiThreadedView,
+      headerHeight: 0
     };
   },
   computed: {
@@ -351,8 +370,13 @@ var script = {
   },
   mounted() {
     this.scrollToBottom();
+    this.positionContent();
   },
   methods: {
+    positionContent() {
+      var _this$$refs, _this$$refs$header, _this$$refs$header$$e, _this$$refs$header$$e2;
+      this.headerHeight = ((_this$$refs = this.$refs) === null || _this$$refs === void 0 ? void 0 : (_this$$refs$header = _this$$refs.header) === null || _this$$refs$header === void 0 ? void 0 : (_this$$refs$header$$e = _this$$refs$header.$el) === null || _this$$refs$header$$e === void 0 ? void 0 : (_this$$refs$header$$e2 = _this$$refs$header$$e.getBoundingClientRect()) === null || _this$$refs$header$$e2 === void 0 ? void 0 : _this$$refs$header$$e2.height) || 0;
+    },
     onGoBack() {
       this.$emit('back-to-list');
     },
@@ -574,7 +598,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
   },attrs:{"width":_vm.shouldRenderResizable ? _vm.dimensions.width : null,"height":_vm.shouldRenderResizable ? _vm.dimensions.height : null,"max-width":_vm.shouldRenderResizable ? _vm.dimensions.maxWidth : null,"max-height":_vm.shouldRenderResizable ? _vm.dimensions.maxHeight : null,"min-width":_vm.shouldRenderResizable ? _vm.dimensions.minWidth : null,"left":_vm.shouldRenderResizable ? _vm.dimensions.left : null,"top":_vm.shouldRenderResizable ? _vm.dimensions.top : null,"fit-parent":true,"min-height":_vm.shouldRenderResizable ? _vm.dimensions.minHeight : null,"active":_vm.shouldRenderResizable ? ['l', 't', 'lt'] : null},on:{"resize:end":_vm.updateSize}},[(!_vm.isHidden)?_c('aside',{staticClass:"markdown-code-block duo-chat gl-bottom-0 gl-max-h-full",class:{
       'resizable-content': _vm.shouldRenderResizable,
       'duo-chat-drawer': !_vm.shouldRenderResizable,
-    },attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"}},[(_vm.showHeader)?_c('duo-chat-header',{attrs:{"active-thread-id":_vm.activeThreadId,"title":_vm.isMultithreaded && _vm.currentView === 'list' ? _vm.$options.i18n.CHAT_HISTORY_TITLE : _vm.title,"error":_vm.error,"is-multithreaded":_vm.isMultithreaded,"current-view":_vm.currentView,"should-render-resizable":_vm.shouldRenderResizable,"badge-type":_vm.isMultithreaded ? null : _vm.badgeType},on:{"go-back":_vm.onGoBack,"new-chat":_vm.onNewChat,"close":_vm.hideChat},scopedSlots:_vm._u([{key:"subheader",fn:function(){return [_vm._t("subheader")]},proxy:true}],null,true)}):_vm._e(),_vm._v(" "),(_vm.shouldShowThreadList)?_c('div',{staticClass:"gl-h-full"},[_c('duo-chat-threads',{attrs:{"threads":_vm.threadList},on:{"new-chat":_vm.onNewChat,"select-thread":_vm.onSelectThread,"delete-thread":_vm.onDeleteThread,"close":_vm.hideChat}})],1):_c('span',{staticClass:"gl-h-full gl-flex gl-flex-col gl-justify-end"},[_c('div',{staticClass:"duo-chat-drawer-body gl-bg-default",attrs:{"data-testid":"chat-history"},on:{"scroll":_vm.handleScrollingTrottled}},[_c('transition-group',{staticClass:"duo-chat-history gl-flex gl-flex-col gl-justify-end",class:[
+    },attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"}},[(_vm.showHeader)?_c('duo-chat-header',{ref:"header",attrs:{"active-thread-id":_vm.activeThreadId,"title":_vm.isMultithreaded && _vm.currentView === 'list' ? _vm.$options.i18n.CHAT_HISTORY_TITLE : _vm.title,"error":_vm.error,"is-multithreaded":_vm.isMultithreaded,"current-view":_vm.currentView,"should-render-resizable":_vm.shouldRenderResizable,"badge-type":_vm.isMultithreaded ? null : _vm.badgeType},on:{"go-back":_vm.onGoBack,"new-chat":_vm.onNewChat,"close":_vm.hideChat},scopedSlots:_vm._u([{key:"subheader",fn:function(){return [_vm._t("subheader")]},proxy:true}],null,true)}):_vm._e(),_vm._v(" "),(_vm.shouldShowThreadList)?_c('div',{staticClass:"gl-h-full"},[_c('duo-chat-threads',{attrs:{"threads":_vm.threadList,"preferred-locale":_vm.preferredLocale},on:{"new-chat":_vm.onNewChat,"select-thread":_vm.onSelectThread,"delete-thread":_vm.onDeleteThread,"close":_vm.hideChat}})],1):_c('span',{staticClass:"gl-h-full gl-flex gl-flex-col gl-justify-end"},[_c('div',{staticClass:"duo-chat-drawer-body gl-bg-default",style:({ marginTop: (_vm.headerHeight + "px") }),attrs:{"data-testid":"chat-history"},on:{"scroll":_vm.handleScrollingTrottled}},[_c('transition-group',{staticClass:"duo-chat-history gl-flex gl-flex-col gl-justify-end",class:[
             {
               'gl-h-full': !_vm.hasMessages,
               'force-scroll-bar': _vm.hasMessages,

package/dist/utils/date.js

@@ -1,3 +1,4 @@
+const DEFAULT_LOCALE = ['en-US'];
 function getOrdinalSuffix(day) {
   if (day > 3 && day < 21) return 'th';
   switch (day % 10) {
@@ -11,17 +12,39 @@ function getOrdinalSuffix(day) {
       return 'th';
   }
 }
-function formatDate(dateStr) {
+const isValidDateString = dateStr => {
+  if (!dateStr) return false;
   const date = new Date(dateStr);
+  return date.toString() !== 'Invalid Date';
+};
+const getValidLocale = preferredLocale => {
+  const locale = preferredLocale !== null && preferredLocale !== void 0 && preferredLocale.length ? preferredLocale : DEFAULT_LOCALE;
+  const supportedLocales = Intl.DateTimeFormat.supportedLocalesOf(locale);
+  return supportedLocales.length ? supportedLocales : DEFAULT_LOCALE;
+};
+const createDateFormatter = locale => {
+  return new Intl.DateTimeFormat(locale, {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric'
+  });
+};
+const formatEnglishDate = (date, formatter) => {
   const day = date.getDate();
   const suffix = getOrdinalSuffix(day);
-  const month = new Intl.DateTimeFormat('en-US', {
-    month: 'long'
-  }).format(date);
-  const year = new Intl.DateTimeFormat('en-US', {
-    year: 'numeric'
-  }).format(date);
-  return `${month} ${day}${suffix}, ${year}`;
+  const parts = formatter.formatToParts(date);
+  const formattedParts = parts.map(part => part.type === 'day' ? `${part.value}${suffix}` : part.value);
+  return formattedParts.join('');
+};
+function formatLocalizedDate(dateStr, preferredLocale) {
+  var _validLocale$;
+  if (!isValidDateString(dateStr)) {
+    return 'Invalid Date';
+  }
+  const date = new Date(dateStr);
+  const validLocale = getValidLocale(preferredLocale);
+  const formatter = createDateFormatter(validLocale);
+  return (_validLocale$ = validLocale[0]) !== null && _validLocale$ !== void 0 && _validLocale$.startsWith('en') ? formatEnglishDate(date, formatter) : formatter.format(date);
 }
 
-export { formatDate, getOrdinalSuffix };
+export { formatLocalizedDate, getOrdinalSuffix };

package/package.json

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

package/src/components/chat/components/duo_chat_threads/duo_chat_threads.vue

@@ -1,7 +1,7 @@
 <script>
 import { GlButton, GlIcon } from '@gitlab/ui';
 import { translate } from '../../../../utils/i18n';
-import { formatDate } from '../../../../utils/date';
+import { formatLocalizedDate } from '../../../../utils/date';
 import DuoChatThreadsEmpty from './duo_chat_threads_empty.vue';
 
 const i18n = {
@@ -26,11 +26,15 @@ export default {
       type: Array,
       required: true,
     },
+    preferredLocale: {
+      type: Array,
+      required: true,
+    },
   },
 
   computed: {
-    formatDate() {
-      return formatDate;
+    formattedLocalDate() {
+      return (date) => formatLocalizedDate(date, this.preferredLocale);
     },
 
     groupedThreads() {
@@ -86,7 +90,7 @@ export default {
     <template v-if="hasThreads">
       <div v-for="(threadsForDate, date) in groupedThreads" :key="date">
         <div data-testid="chat-threads-date-header" class="gl-font-bold gl-neutral-900 gl-mb-4">
-          {{ formatDate(date) }}
+          {{ formattedLocalDate(date) }}
         </div>
 
         <div>

package/src/components/chat/duo_chat.vue

@@ -86,6 +86,15 @@ const isThread = (thread) =>
 // eslint-disable-next-line unicorn/no-array-callback-reference
 const threadListValidator = (threads) => threads.every(isThread);
 
+const localeValidator = (value) => {
+  try {
+    Intl.getCanonicalLocales(value);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
 export default {
   name: 'DuoChat',
   components: {
@@ -287,6 +296,16 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * The preferred locale for the chat interface.
+     * Follows BCP 47 language tag format (e.g., 'en-US', 'fr-FR', 'es-ES').
+     */
+    preferredLocale: {
+      type: Array,
+      required: false,
+      default: () => ['en-US', 'en'],
+      validator: localeValidator,
+    },
   },
   data() {
     return {
@@ -299,6 +318,7 @@ export default {
       contextItemsMenuIsOpen: false,
       contextItemMenuRef: null,
       currentView: this.multiThreadedView,
+      headerHeight: 0,
     };
   },
   computed: {
@@ -418,9 +438,13 @@ export default {
   },
   mounted() {
     this.scrollToBottom();
+    this.positionContent();
   },
 
   methods: {
+    positionContent() {
+      this.headerHeight = this.$refs?.header?.$el?.getBoundingClientRect()?.height || 0;
+    },
     onGoBack() {
       this.$emit('back-to-list');
     },
@@ -665,6 +689,7 @@ export default {
     >
       <duo-chat-header
         v-if="showHeader"
+        ref="header"
         :active-thread-id="activeThreadId"
         :title="
           isMultithreaded && currentView === 'list' ? $options.i18n.CHAT_HISTORY_TITLE : title
@@ -686,6 +711,7 @@ export default {
       <div v-if="shouldShowThreadList" class="gl-h-full">
         <duo-chat-threads
           :threads="threadList"
+          :preferred-locale="preferredLocale"
           @new-chat="onNewChat"
           @select-thread="onSelectThread"
           @delete-thread="onDeleteThread"
@@ -696,6 +722,7 @@ export default {
         <div
           class="duo-chat-drawer-body gl-bg-default"
           data-testid="chat-history"
+          :style="{ marginTop: `${headerHeight}px` }"
           @scroll="handleScrollingTrottled"
         >
           <transition-group

package/src/utils/date.js

@@ -1,3 +1,5 @@
+const DEFAULT_LOCALE = ['en-US'];
+
 export function getOrdinalSuffix(day) {
   if (day > 3 && day < 21) return 'th';
   switch (day % 10) {
@@ -12,13 +14,48 @@ export function getOrdinalSuffix(day) {
   }
 }
 
-export function formatDate(dateStr) {
+const isValidDateString = (dateStr) => {
+  if (!dateStr) return false;
   const date = new Date(dateStr);
+  return date.toString() !== 'Invalid Date';
+};
+
+const getValidLocale = (preferredLocale) => {
+  const locale = preferredLocale?.length ? preferredLocale : DEFAULT_LOCALE;
+  const supportedLocales = Intl.DateTimeFormat.supportedLocalesOf(locale);
+  return supportedLocales.length ? supportedLocales : DEFAULT_LOCALE;
+};
+
+const createDateFormatter = (locale) => {
+  return new Intl.DateTimeFormat(locale, {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  });
+};
+
+const formatEnglishDate = (date, formatter) => {
   const day = date.getDate();
   const suffix = getOrdinalSuffix(day);
 
-  const month = new Intl.DateTimeFormat('en-US', { month: 'long' }).format(date);
-  const year = new Intl.DateTimeFormat('en-US', { year: 'numeric' }).format(date);
+  const parts = formatter.formatToParts(date);
+  const formattedParts = parts.map((part) =>
+    part.type === 'day' ? `${part.value}${suffix}` : part.value
+  );
+
+  return formattedParts.join('');
+};
+
+export function formatLocalizedDate(dateStr, preferredLocale) {
+  if (!isValidDateString(dateStr)) {
+    return 'Invalid Date';
+  }
+
+  const date = new Date(dateStr);
+  const validLocale = getValidLocale(preferredLocale);
+  const formatter = createDateFormatter(validLocale);
 
-  return `${month} ${day}${suffix}, ${year}`;
+  return validLocale[0]?.startsWith('en')
+    ? formatEnglishDate(date, formatter)
+    : formatter.format(date);
 }