@gitlab/ui 98.4.0 → 98.5.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [98.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v98.4.0...v98.5.0) (2024-10-25)
+
+
+### Features
+
+* **DuoChatMessage:** add max height for code blocks in messages ([4493ca9](https://gitlab.com/gitlab-org/gitlab-ui/commit/4493ca9fca716aee2c4fb7b06abe0e90f60aa7e0))
+
 # [98.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v98.3.0...v98.4.0) (2024-10-24)
 
 

package/dist/components/experimental/duo/chat/components/duo_chat_message/constants.js

@@ -0,0 +1,5 @@
+const DUO_CODE_SCRIM_TOP_CLASS = 'scrim-top';
+const DUO_CODE_SCRIM_BOTTOM_CLASS = 'scrim-bottom';
+const DUO_CODE_SCRIM_OFFSET = 16;
+
+export { DUO_CODE_SCRIM_BOTTOM_CLASS, DUO_CODE_SCRIM_OFFSET, DUO_CODE_SCRIM_TOP_CLASS };

package/dist/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.js

@@ -1,3 +1,4 @@
+import throttle from 'lodash/throttle';
 import GlIcon from '../../../../../base/icon/icon';
 import GlLoadingIcon from '../../../../../base/loading_icon/loading_icon';
 import { GlTooltipDirective } from '../../../../../../directives/tooltip';
@@ -13,6 +14,7 @@ import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
 import { CopyCodeElement } from './copy_code_element';
 import { InsertCodeSnippetElement } from './insert_code_snippet_element';
 import { concatUntilEmpty } from './utils';
+import { DUO_CODE_SCRIM_BOTTOM_CLASS, DUO_CODE_SCRIM_OFFSET, DUO_CODE_SCRIM_TOP_CLASS } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const i18n = {
@@ -195,6 +197,7 @@ var script = {
       if (!this.isChunk && this.$refs.content) {
         this.$nextTick(this.renderGFM(this.$refs.content));
       }
+      this.detectScrollableCodeBlocks();
     },
     logEvent(e) {
       this.$emit('track-feedback', {
@@ -218,6 +221,27 @@ var script = {
         messageId: this.message.id,
         contextItem
       });
+    },
+    detectScrollableCodeBlocks() {
+      const codeBlocks = document.querySelectorAll('.duo-chat-message pre');
+      codeBlocks.forEach(e => {
+        if (e.scrollHeight > e.offsetHeight) {
+          e.classList.add(DUO_CODE_SCRIM_BOTTOM_CLASS);
+          e.addEventListener('scroll', throttle(() => this.toggleScrolling(e), 200));
+        }
+      });
+    },
+    toggleScrolling(e) {
+      if (e.scrollHeight - e.scrollTop <= e.offsetHeight + DUO_CODE_SCRIM_OFFSET) {
+        e.classList.remove(DUO_CODE_SCRIM_BOTTOM_CLASS);
+      } else {
+        e.classList.add(DUO_CODE_SCRIM_BOTTOM_CLASS);
+      }
+      if (e.scrollTop > DUO_CODE_SCRIM_OFFSET) {
+        e.classList.add(DUO_CODE_SCRIM_TOP_CLASS);
+      } else {
+        e.classList.remove(DUO_CODE_SCRIM_TOP_CLASS);
+      }
     }
   }
 };