@gitlab/ui 74.2.0 → 74.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "74.2.0",
+  "version": "74.3.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/experimental/duo/chat/duo_chat.scss

@@ -33,6 +33,33 @@
   }
 }
 
+.duo-chat-history {
+  scroll-behavior: smooth;
+
+  /*
+  Browsers a are pretty good at keeping the focus on an element while
+  the parent element grows in size. With this we mark all child elements
+  of the chat history as "non" anchors.
+  https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor
+  */
+  * {
+    overflow-anchor: none;
+  }
+
+  /*
+  Right at the bottom of the chat history we add a scroll-anchor element.
+  This scroll-anchor element is the only "possible" anchor. The beauty of it:
+  It only will be used as an anchor _if_ it is currently inside the view port.
+  So if the user manually scrolls up while a chunked message is coming in,
+  it won't stick to the bottom while the message still loads.
+  */
+  .scroll-anchor {
+    overflow-anchor: auto;
+    height: 1px;
+    margin-top: -1px; // In order to not add 1px vertically, we add a negative margin
+  }
+}
+
 .duo-chat-input {
   @include gl-display-flex;
   @include gl-flex-direction-column;
@@ -61,7 +88,7 @@
 .slash-commands {
   @include gl-mt-n2;
 
-  .active-command{
+  .active-command {
     @include gl-bg-gray-50;
     @include gl-rounded-base;
   }

package/src/components/experimental/duo/chat/duo_chat.spec.js

@@ -127,13 +127,15 @@ describe('GlDuoChat', () => {
 
     describe('when messages exist', () => {
       it('scrolls to the bottom on load', async () => {
+        const scrollIntoViewMock = jest.fn();
+        window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+
         createComponent({ propsData: { messages } });
-        const { element } = findChatComponent();
-        jest.spyOn(element, 'scrollHeight', 'get').mockReturnValue(200);
 
         await nextTick();
 
-        expect(element.scrollTop).toEqual(200);
+        expect(scrollIntoViewMock).toHaveBeenCalledTimes(1);
+        window.HTMLElement.prototype.scrollIntoView = undefined;
       });
     });
 

package/src/components/experimental/duo/chat/duo_chat.vue

@@ -292,9 +292,7 @@ export default {
     async scrollToBottom() {
       await this.$nextTick();
 
-      if (this.$refs.drawer) {
-        this.$refs.drawer.scrollTop = this.$refs.drawer.scrollHeight;
-      }
+      this.$refs.anchor?.scrollIntoView?.();
     },
     onTrackFeedback(event) {
       /**
@@ -422,7 +420,7 @@ export default {
       ></gl-alert>
 
       <section
-        class="gl-display-flex gl-flex-direction-column gl-justify-content-end gl-flex-grow-1 gl-border-b-0 gl-bg-gray-10"
+        class="duo-chat-history gl-display-flex gl-flex-direction-column gl-justify-content-end gl-flex-grow-1 gl-border-b-0 gl-bg-gray-10"
       >
         <transition-group
           tag="div"
@@ -462,6 +460,7 @@ export default {
         <transition name="loader">
           <gl-duo-chat-loader v-if="isLoading" :tool-name="toolName" class="gl-px-0!" />
         </transition>
+        <div ref="anchor" class="scroll-anchor"></div>
       </section>
     </div>
     <footer

package/src/scss/utilities.scss

@@ -3798,6 +3798,18 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   flex-basis: 33% !important;
 }
 
+.gl-md-flex-basis-13 {
+  @include gl-media-breakpoint-up(md) {
+    flex-basis: $gl-spacing-scale-13;
+  }
+}
+
+.gl-md-flex-basis-13\! {
+  @include gl-media-breakpoint-up(md) {
+    flex-basis: $gl-spacing-scale-13 !important;
+  }
+}
+
 .gl-md-flex-basis-third {
   @include gl-media-breakpoint-up(md) {
   flex-basis: 33%;

package/src/scss/utility-mixins/flex.scss

@@ -223,6 +223,12 @@
   flex-basis: 33%;
 }
 
+@mixin gl-md-flex-basis-13 {
+  @include gl-media-breakpoint-up(md) {
+    flex-basis: $gl-spacing-scale-13;
+  }
+}
+
 @mixin gl-md-flex-basis-third {
   @include gl-media-breakpoint-up(md) {
     @include gl-flex-basis-third;