@gitlab/ui 98.3.0 → 98.5.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [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)
+
+
+### Features
+
+* **DuoChatMessage:** Add a stable CSS selector for error messages ([1fe03be](https://gitlab.com/gitlab-org/gitlab-ui/commit/1fe03beb3a877d19b2a993fc280306841509abff))
+
 # [98.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v98.2.0...v98.3.0) (2024-10-23)
 
 

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);
+      }
     }
   }
 };
@@ -231,7 +255,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
     'gl-rounded-bl-none gl-border-1 gl-border-solid gl-border-gray-50 gl-text-gray-900':
       _vm.isAssistantMessage,
     'gl-bg-white': _vm.isAssistantMessage && !_vm.error,
-    '!gl-border-none gl-bg-red-50': _vm.error,
+    'duo-chat-message-with-error !gl-border-none gl-bg-red-50': _vm.error,
   },on:{"insert-code-snippet":_vm.onInsertCodeSnippet}},[(_vm.error)?_c('gl-icon',{staticClass:"error-icon gl-border gl-mr-3 gl-shrink-0 gl-rounded-full gl-border-red-500 gl-text-red-600",attrs:{"aria-label":_vm.$options.i18n.MESSAGE_ERROR,"name":"status_warning_borderless","size":16,"data-testid":"error"}}):_vm._e(),_vm._v(" "),_c('div',{ref:"content-wrapper",class:{ 'has-error': _vm.error }},[(_vm.displaySelectedContextItems && _vm.isAssistantMessage)?_c('gl-duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"assistant"},on:{"get-content":_vm.onGetContextItemContent}}):_vm._e(),_vm._v(" "),(_vm.error)?_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.renderedError),expression:"renderedError",arg:_vm.$options.safeHtmlConfigExtension}],ref:"error-message"}):_c('div',[_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.messageContent),expression:"messageContent",arg:_vm.$options.safeHtmlConfigExtension}],ref:"content"}),_vm._v(" "),(_vm.isAssistantMessage)?[(_vm.sources)?_c('documentation-sources',{attrs:{"sources":_vm.sources}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"duo-chat-message-feedback gl-mt-4 gl-flex gl-items-end"},[(_vm.isChunkAndNotCancelled)?_c('gl-loading-icon',{staticClass:"gl-pt-4",attrs:{"variant":"dots","inline":""}}):_vm._e(),_vm._v(" "),(_vm.isNotChunkOrCancelled)?_c('gl-duo-user-feedback',{attrs:{"feedback-received":_vm.hasFeedback,"modal-title":_vm.$options.i18n.MODAL.TITLE,"modal-alert":_vm.$options.i18n.MODAL.ALERT_TEXT},on:{"feedback":_vm.logEvent},scopedSlots:_vm._u([{key:"feedback-extra-fields",fn:function(){return [_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.DID_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.INTERACTION},model:{value:(_vm.didWhat),callback:function ($$v) {_vm.didWhat=$$v;},expression:"didWhat"}})],1),_vm._v(" "),_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.IMPROVE_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.BETTER_RESPONSE},model:{value:(_vm.improveWhat),callback:function ($$v) {_vm.improveWhat=$$v;},expression:"improveWhat"}})],1)]},proxy:true}],null,false,419229417)}):_vm._e()],1)]:_vm._e()],2),_vm._v(" "),(_vm.displaySelectedContextItems && _vm.isUserMessage)?_c('gl-duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"user"},on:{"get-content":_vm.onGetContextItemContent}}):_vm._e()],1)],1)};
 var __vue_staticRenderFns__ = [];