@gitlab/duo-ui 8.7.0 → 8.7.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [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)
 
 

package/dist/components/chat/duo_chat.js

@@ -262,7 +262,8 @@ var script = {
       compositionJustEnded: false,
       contextItemsMenuIsOpen: false,
       contextItemMenuRef: null,
-      currentView: this.multiThreadedView
+      currentView: this.multiThreadedView,
+      headerHeight: 0
     };
   },
   computed: {
@@ -369,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');
     },
@@ -592,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,"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",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/package.json

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

package/src/components/chat/duo_chat.vue

@@ -318,6 +318,7 @@ export default {
       contextItemsMenuIsOpen: false,
       contextItemMenuRef: null,
       currentView: this.multiThreadedView,
+      headerHeight: 0,
     };
   },
   computed: {
@@ -437,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');
     },
@@ -684,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
@@ -716,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