@gitlab/ui 78.1.0 → 78.1.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [78.1.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.1.1...v78.1.2) (2024-03-13)
+
+
+### Bug Fixes
+
+* Repair right alignment for table header ([3051537](https://gitlab.com/gitlab-org/gitlab-ui/commit/30515372b8b6212cab60b0cf50671a7cd36a392a))
+
+## [78.1.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.1.0...v78.1.1) (2024-03-05)
+
+
+### Bug Fixes
+
+* **GlDuoChat:** allow typing prompt while streaming ([bc107bf](https://gitlab.com/gitlab-org/gitlab-ui/commit/bc107bf7b4e84ec787142ed5b43f299ec6c7ea0b))
+
 # [78.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.0.0...v78.1.0) (2024-03-05)
 
 

package/dist/components/base/table/table.js

@@ -1,5 +1,4 @@
 import { BTable } from 'bootstrap-vue/esm/index.js';
-import GlIcon from '../icon/icon';
 import { isDev, logWarning } from '../../../utils/utils';
 import { tableFullProps, tableFullSlots, glTableLiteWarning } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -18,8 +17,7 @@ const {
 var script = {
   name: 'GlTable',
   components: {
-    BTable,
-    GlIcon
+    BTable
   },
   inheritAttrs: false,
   props: {
@@ -92,7 +90,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('b-table',_vm._g(_vm._b({attrs:{"table-class":_vm.localTableClass,"fields":_vm.fields,"sort-by":_vm.localSortBy,"sort-desc":_vm.localSortDesc},on:{"update:sortBy":function($event){_vm.localSortBy=$event;},"update:sort-by":function($event){_vm.localSortBy=$event;},"update:sortDesc":function($event){_vm.localSortDesc=$event;},"update:sort-desc":function($event){_vm.localSortDesc=$event;}},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slotName){return {key:slotName,fn:function(scope){return [_vm._t(slotName,null,null,scope)]}}}),_vm._l((_vm.headSlots),function(headSlotName){return {key:headSlotName,fn:function(scope){return [_c('div',{key:headSlotName,staticClass:"gl-display-flex gl-align-items-center"},[_vm._t(headSlotName,function(){return [_vm._v(_vm._s(scope.label))]},null,scope),(_vm.isSortable(scope))?[(_vm.getSortingIcon(scope))?_c('gl-icon',{staticClass:"gl-ml-3 gl-min-w-5 gl-text-gray-900",attrs:{"name":_vm.getSortingIcon(scope)}}):_c('div',{staticClass:"gl-display-inline-block gl-w-5 gl-h-5 gl-ml-3"})]:_vm._e()],2)]}}})],null,true)},'b-table',_vm.$attrs,false),_vm.$listeners))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-table',_vm._g(_vm._b({attrs:{"table-class":_vm.localTableClass,"fields":_vm.fields,"sort-by":_vm.localSortBy,"sort-desc":_vm.localSortDesc},on:{"update:sortBy":function($event){_vm.localSortBy=$event;},"update:sort-by":function($event){_vm.localSortBy=$event;},"update:sortDesc":function($event){_vm.localSortDesc=$event;},"update:sort-desc":function($event){_vm.localSortDesc=$event;}},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slotName){return {key:slotName,fn:function(scope){return [_vm._t(slotName,null,null,scope)]}}}),_vm._l((_vm.headSlots),function(headSlotName){return {key:headSlotName,fn:function(scope){return [_c('span',{key:headSlotName},[_vm._t(headSlotName,function(){return [_c('span',[_vm._v(_vm._s(scope.label))])]},null,scope),(_vm.isSortable(scope))?[(_vm.getSortingIcon(scope) && _vm.getSortingIcon(scope) === 'arrow-up')?_c('span',{staticClass:"gl-ml-3 gl-min-w-5 gl-text-gray-900 gl-text-center",attrs:{"name":"sort-icon"}},[_vm._v("\n          ↑\n        ")]):(_vm.getSortingIcon(scope) && _vm.getSortingIcon(scope) === 'arrow-down')?_c('span',{staticClass:"gl-ml-3 gl-min-w-5 gl-text-gray-900 gl-text-center",attrs:{"name":"sort-icon"}},[_vm._v("\n          ↓\n        ")]):_c('span',{staticClass:"gl-display-inline-block gl-w-5 gl-h-3 gl-ml-3"})]:_vm._e()],2)]}}})],null,true)},'b-table',_vm.$attrs,false),_vm.$listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -201,12 +201,22 @@ var script = {
         return acc;
       }, [[]]);
     },
+    lastMessage() {
+      return this.messages[this.messages.length - 1];
+    },
     resetDisabled() {
+      var _this$lastMessage;
       if (this.isLoading || !this.hasMessages) {
         return true;
       }
-      const lastMessage = this.messages[this.messages.length - 1];
-      return lastMessage.content === CHAT_RESET_MESSAGE;
+      return ((_this$lastMessage = this.lastMessage) === null || _this$lastMessage === void 0 ? void 0 : _this$lastMessage.content) === CHAT_RESET_MESSAGE;
+    },
+    submitDisabled() {
+      return this.isLoading || this.isStreaming;
+    },
+    isStreaming() {
+      var _this$lastMessage2, _this$lastMessage2$ch, _this$lastMessage3;
+      return Boolean(((_this$lastMessage2 = this.lastMessage) === null || _this$lastMessage2 === void 0 ? void 0 : (_this$lastMessage2$ch = _this$lastMessage2.chunks) === null || _this$lastMessage2$ch === void 0 ? void 0 : _this$lastMessage2$ch.length) > 0 && !((_this$lastMessage3 = this.lastMessage) !== null && _this$lastMessage3 !== void 0 && _this$lastMessage3.content));
     },
     filteredSlashCommands() {
       const caseInsensitivePrompt = this.prompt.toLowerCase();
@@ -227,12 +237,13 @@ var script = {
     }
   },
   watch: {
-    isLoading() {
+    isLoading(newVal) {
       this.isHidden = false;
       this.scrollToBottom();
-    },
-    messages() {
-      this.prompt = '';
+      if (newVal) {
+        // We reset the prompt when we start getting the response and focus in the prompt field
+        this.setPromptAndFocus();
+      }
     }
   },
   created() {
@@ -250,6 +261,9 @@ var script = {
       this.$emit('chat-hidden');
     },
     sendChatPrompt() {
+      if (this.submitDisabled) {
+        return;
+      }
       if (this.prompt) {
         if (this.prompt === CHAT_RESET_MESSAGE && this.resetDisabled) {
           return;
@@ -324,14 +338,19 @@ var script = {
         this.activeCommandIndex = 0;
       }
     },
+    async setPromptAndFocus() {
+      let prompt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      this.prompt = prompt;
+      await this.$nextTick();
+      this.$refs.prompt.$el.focus();
+    },
     selectSlashCommand(index) {
       const command = this.filteredSlashCommands[index];
       if (command.shouldSubmit) {
         this.prompt = command.name;
         this.sendChatPrompt();
       } else {
-        this.prompt = `${command.name} `;
-        this.$refs.prompt.$el.focus();
+        this.setPromptAndFocus(`${command.name} `);
       }
     }
   },
@@ -347,7 +366,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
         {
           'gl-h-full': !_vm.hasMessages,
           'force-scroll-bar': _vm.hasMessages,
-        } ],attrs:{"tag":"section","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('gl-duo-chat-conversation',{key:("conversation-" + index),attrs:{"messages":conversation,"show-delimiter":index > 0},on:{"track-feedback":_vm.onTrackFeedback}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('gl-empty-state',{key:"empty-state",staticClass:"gl-flex-grow gl-justify-content-center",attrs:{"svg-path":_vm.$options.emptySvg,"svg-height":145,"title":_vm.emptyStateTitle,"description":_vm.emptyStateDescription}}),_vm._v(" "),_c('gl-duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})]:_vm._e(),_vm._v(" "),(_vm.isLoading)?_c('gl-duo-chat-loader',{key:"loader",attrs:{"tool-name":_vm.toolName}}):_vm._e(),_vm._v(" "),_c('div',{key:"anchor",ref:"anchor",staticClass:"scroll-anchor"})],2)],1),_vm._v(" "),(_vm.isChatAvailable)?_c('footer',{staticClass:"gl-drawer-footer gl-drawer-footer-sticky gl-p-5 gl-border-t gl-bg-gray-10",class:{ 'gl-drawer-body-scrim-on-footer': !_vm.scrolledToBottom },attrs:{"data-testid":"chat-footer"}},[_c('gl-form',{attrs:{"data-testid":"chat-prompt-form"},on:{"submit":function($event){$event.stopPropagation();$event.preventDefault();return _vm.sendChatPrompt.apply(null, arguments)}}},[_c('gl-form-input-group',{scopedSlots:_vm._u([{key:"append",fn:function(){return [_c('gl-button',{staticClass:"!gl-absolute gl-bottom-2 gl-right-2 gl-rounded-base!",attrs:{"icon":"paper-airplane","category":"primary","variant":"confirm","type":"submit","aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL,"disabled":_vm.isLoading}})]},proxy:true}],null,false,3929529036)},[_c('div',{staticClass:"duo-chat-input gl-flex-grow-1 gl-vertical-align-top gl-max-w-full gl-min-h-8 gl-inset-border-1-gray-400 gl-rounded-base gl-bg-white",attrs:{"data-value":_vm.prompt}},[(_vm.shouldShowSlashCommands)?_c('gl-card',{ref:"commands",staticClass:"slash-commands !gl-absolute gl-translate-y-n100 gl-list-style-none gl-pl-0 gl-w-full gl-shadow-md",attrs:{"body-class":"gl-p-2!"}},_vm._l((_vm.filteredSlashCommands),function(command,index){return _c('gl-dropdown-item',{key:command.name,class:{ 'active-command': index === _vm.activeCommandIndex },on:{"click":function($event){return _vm.selectSlashCommand(index)}},nativeOn:{"mouseenter":function($event){_vm.activeCommandIndex = index;}}},[_c('span',{staticClass:"gl-display-flex gl-justify-content-space-between"},[_c('span',{staticClass:"gl-display-block"},[_vm._v(_vm._s(command.name))]),_vm._v(" "),_c('small',{staticClass:"gl-text-gray-500 gl-font-style-italic gl-text-right gl-pl-3"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",staticClass:"gl-absolute gl-h-full! gl-py-4! gl-bg-transparent! gl-rounded-top-right-none gl-rounded-bottom-right-none gl-shadow-none!",class:{ 'gl-text-truncate': !_vm.prompt },attrs:{"data-testid":"chat-prompt-input","placeholder":_vm.inputPlaceholder,"disabled":_vm.isLoading,"autofocus":""},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }$event.preventDefault();},"keyup":function($event){return _vm.onInputKeyup.apply(null, arguments)}},model:{value:(_vm.prompt),callback:function ($$v) {_vm.prompt=$$v;},expression:"prompt"}})],1)]),_vm._v(" "),_c('gl-form-text',{staticClass:"gl-text-gray-400 gl-line-height-20 gl-mt-3",attrs:{"data-testid":"chat-legal-disclaimer"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_DISCLAIMER))])],1)],1):_vm._e()]):_vm._e()};
+        } ],attrs:{"tag":"section","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('gl-duo-chat-conversation',{key:("conversation-" + index),attrs:{"messages":conversation,"show-delimiter":index > 0},on:{"track-feedback":_vm.onTrackFeedback}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('gl-empty-state',{key:"empty-state",staticClass:"gl-flex-grow gl-justify-content-center",attrs:{"svg-path":_vm.$options.emptySvg,"svg-height":145,"title":_vm.emptyStateTitle,"description":_vm.emptyStateDescription}}),_vm._v(" "),_c('gl-duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})]:_vm._e(),_vm._v(" "),(_vm.isLoading)?_c('gl-duo-chat-loader',{key:"loader",attrs:{"tool-name":_vm.toolName}}):_vm._e(),_vm._v(" "),_c('div',{key:"anchor",ref:"anchor",staticClass:"scroll-anchor"})],2)],1),_vm._v(" "),(_vm.isChatAvailable)?_c('footer',{staticClass:"gl-drawer-footer gl-drawer-footer-sticky gl-p-5 gl-border-t gl-bg-gray-10",class:{ 'gl-drawer-body-scrim-on-footer': !_vm.scrolledToBottom },attrs:{"data-testid":"chat-footer"}},[_c('gl-form',{attrs:{"data-testid":"chat-prompt-form"},on:{"submit":function($event){$event.stopPropagation();$event.preventDefault();return _vm.sendChatPrompt.apply(null, arguments)}}},[_c('gl-form-input-group',{scopedSlots:_vm._u([{key:"append",fn:function(){return [_c('gl-button',{staticClass:"!gl-absolute gl-bottom-2 gl-right-2 gl-rounded-base!",attrs:{"icon":"paper-airplane","category":"primary","variant":"confirm","type":"submit","data-testid":"chat-prompt-submit-button","aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL,"disabled":_vm.submitDisabled}})]},proxy:true}],null,false,3132459889)},[_c('div',{staticClass:"duo-chat-input gl-flex-grow-1 gl-vertical-align-top gl-max-w-full gl-min-h-8 gl-inset-border-1-gray-400 gl-rounded-base gl-bg-white",attrs:{"data-value":_vm.prompt}},[(_vm.shouldShowSlashCommands)?_c('gl-card',{ref:"commands",staticClass:"slash-commands !gl-absolute gl-translate-y-n100 gl-list-style-none gl-pl-0 gl-w-full gl-shadow-md",attrs:{"body-class":"gl-p-2!"}},_vm._l((_vm.filteredSlashCommands),function(command,index){return _c('gl-dropdown-item',{key:command.name,class:{ 'active-command': index === _vm.activeCommandIndex },on:{"click":function($event){return _vm.selectSlashCommand(index)}},nativeOn:{"mouseenter":function($event){_vm.activeCommandIndex = index;}}},[_c('span',{staticClass:"gl-display-flex gl-justify-content-space-between"},[_c('span',{staticClass:"gl-display-block"},[_vm._v(_vm._s(command.name))]),_vm._v(" "),_c('small',{staticClass:"gl-text-gray-500 gl-font-style-italic gl-text-right gl-pl-3"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",staticClass:"gl-absolute gl-h-full! gl-py-4! gl-bg-transparent! gl-rounded-top-right-none gl-rounded-bottom-right-none gl-shadow-none!",class:{ 'gl-text-truncate': !_vm.prompt },attrs:{"data-testid":"chat-prompt-input","placeholder":_vm.inputPlaceholder,"autofocus":""},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }$event.preventDefault();},"keyup":function($event){return _vm.onInputKeyup.apply(null, arguments)}},model:{value:(_vm.prompt),callback:function ($$v) {_vm.prompt=$$v;},expression:"prompt"}})],1)]),_vm._v(" "),_c('gl-form-text',{staticClass:"gl-text-gray-400 gl-line-height-20 gl-mt-3",attrs:{"data-testid":"chat-legal-disclaimer"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_DISCLAIMER))])],1)],1):_vm._e()]):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,3 +1,4 @@
+import { setStoryTimeout } from '../../../../utils/test_utils';
 import { DOCUMENTATION_SOURCE_TYPES, MESSAGE_MODEL_ROLES } from './constants';
 
 const MOCK_SOURCES = [{
@@ -57,21 +58,47 @@ const MOCK_RESPONSE_MESSAGE_FOR_STREAMING = {
   errors: [],
   timestamp: '2021-04-21T12:00:00.000Z'
 };
-const generateMockResponseChunks = requestId => {
-  const chunks = [];
-  const chunkSize = 5;
-  const chunkCount = Math.ceil(MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content.length / chunkSize);
-  for (let i = 0; i < chunkCount; i += 1) {
-    const chunk = {
-      ...MOCK_RESPONSE_MESSAGE_FOR_STREAMING,
-      requestId,
-      content: MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content.substring(i * chunkSize, (i + 1) * chunkSize),
-      chunkId: i
-    };
-    chunks.push(chunk);
+
+// Utility function for delay
+async function delayRandom() {
+  let min = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 16;
+  let max = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 267;
+  const delay = Math.floor(Math.random() * (max - min + 1)) + min;
+  // eslint-disable-next-line no-promise-executor-return
+  return new Promise(resolve => setStoryTimeout(resolve, delay));
+}
+function generateMockResponseChunks() {
+  try {
+    let requestId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    return async function* () {
+      const chunkSize = 5;
+      const contentLength = MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content.length;
+      const chunkCount = Math.ceil(contentLength / chunkSize);
+      for (let chunkId = 0; chunkId < chunkCount; chunkId += 1) {
+        const start = chunkId * chunkSize;
+        const end = Math.min((chunkId + 1) * chunkSize, contentLength);
+        const chunk = {
+          ...MOCK_RESPONSE_MESSAGE_FOR_STREAMING,
+          requestId,
+          content: MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content.substring(start, end),
+          chunkId
+        };
+
+        // eslint-disable-next-line no-await-in-loop
+        await delayRandom();
+        yield chunk;
+      }
+      yield {
+        ...MOCK_RESPONSE_MESSAGE_FOR_STREAMING,
+        requestId,
+        content: MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content,
+        chunkId: null
+      };
+    }();
+  } catch (e) {
+    return Promise.reject(e);
   }
-  return chunks;
-};
+}
 const MOCK_USER_PROMPT_MESSAGE = {
   id: '456',
   content: 'How to create a new template?',