@gitlab/ui 85.2.1 → 85.2.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [85.2.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v85.2.1...v85.2.2) (2024-06-26)
+
+
+### Bug Fixes
+
+* **duochat:** Wait for another enter to send on IME ([ed2a1e7](https://gitlab.com/gitlab-org/gitlab-ui/commit/ed2a1e7694805a3e72e78b1e4e9a6feac7f22c8b))
+
 ## [85.2.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v85.2.0...v85.2.1) (2024-06-25)
 
 

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

@@ -186,7 +186,8 @@ var script = {
       prompt: '',
       scrolledToBottom: true,
       activeCommandIndex: 0,
-      displaySubmitButton: true
+      displaySubmitButton: true,
+      compositionJustEnded: false
     };
   },
   computed: {
@@ -262,6 +263,9 @@ var script = {
     this.scrollToBottom();
   },
   methods: {
+    compositionEnd() {
+      this.compositionJustEnded = true;
+    },
     hideChat() {
       this.isHidden = true;
       /**
@@ -323,7 +327,7 @@ var script = {
        */
       this.$emit('track-feedback', event);
     },
-    onInputKeyup(e) {
+    sendChatPromptOnEnter(e) {
       const {
         metaKey,
         ctrlKey,
@@ -331,21 +335,29 @@ var script = {
         shiftKey,
         isComposing
       } = e;
+      const isModifierKey = metaKey || ctrlKey || altKey || shiftKey;
+      return !(isModifierKey || isComposing || this.compositionJustEnded);
+    },
+    onInputKeyup(e) {
+      const {
+        key
+      } = e;
       if (this.shouldShowSlashCommands) {
         e.preventDefault();
-        if (e.key === 'Enter') {
+        if (key === 'Enter') {
           this.selectSlashCommand(this.activeCommandIndex);
-        } else if (e.key === 'ArrowUp') {
+        } else if (key === 'ArrowUp') {
           this.prevCommand();
-        } else if (e.key === 'ArrowDown') {
+        } else if (key === 'ArrowDown') {
           this.nextCommand();
         } else {
           this.activeCommandIndex = 0;
         }
-      } else if (e.key === 'Enter' && !isComposing && !(metaKey || ctrlKey || altKey || shiftKey)) {
+      } else if (key === 'Enter' && this.sendChatPromptOnEnter(e)) {
         e.preventDefault();
         this.sendChatPrompt();
       }
+      this.compositionJustEnded = false;
     },
     prevCommand() {
       this.activeCommandIndex -= 1;
@@ -390,7 +402,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,"canceled-request-ids":_vm.canceledRequestIds,"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:"duo-chat-drawer-footer duo-chat-drawer-footer-sticky gl-p-5 gl-border-t gl-bg-gray-10",class:{ 'duo-chat-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 [(_vm.displaySubmitButton)?_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}}):_c('gl-button',{staticClass:"!gl-absolute gl-bottom-2 gl-right-2 gl-rounded-base!",attrs:{"icon":"stop","category":"primary","variant":"default","data-testid":"chat-prompt-cancel-button","aria-label":_vm.$options.i18n.CHAT_CANCEL_LABEL},on:{"click":_vm.cancelPrompt}})]},proxy:true}],null,false,2711323372)},[_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()};
+        } ],attrs:{"tag":"section","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('gl-duo-chat-conversation',{key:("conversation-" + index),attrs:{"messages":conversation,"canceled-request-ids":_vm.canceledRequestIds,"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:"duo-chat-drawer-footer duo-chat-drawer-footer-sticky gl-p-5 gl-border-t gl-bg-gray-10",class:{ 'duo-chat-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 [(_vm.displaySubmitButton)?_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}}):_c('gl-button',{staticClass:"!gl-absolute gl-bottom-2 gl-right-2 gl-rounded-base!",attrs:{"icon":"stop","category":"primary","variant":"default","data-testid":"chat-prompt-cancel-button","aria-label":_vm.$options.i18n.CHAT_CANCEL_LABEL},on:{"click":_vm.cancelPrompt}})]},proxy:true}],null,false,2711323372)},[_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":""},on:{"compositionend":_vm.compositionEnd},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/package.json

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

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

@@ -195,6 +195,7 @@ export default {
       scrolledToBottom: true,
       activeCommandIndex: 0,
       displaySubmitButton: true,
+      compositionJustEnded: false,
     };
   },
   computed: {
@@ -280,6 +281,9 @@ export default {
     this.scrollToBottom();
   },
   methods: {
+    compositionEnd() {
+      this.compositionJustEnded = true;
+    },
     hideChat() {
       this.isHidden = true;
       /**
@@ -338,26 +342,34 @@ export default {
        */
       this.$emit('track-feedback', event);
     },
-    onInputKeyup(e) {
+    sendChatPromptOnEnter(e) {
       const { metaKey, ctrlKey, altKey, shiftKey, isComposing } = e;
+      const isModifierKey = metaKey || ctrlKey || altKey || shiftKey;
+
+      return !(isModifierKey || isComposing || this.compositionJustEnded);
+    },
+    onInputKeyup(e) {
+      const { key } = e;
 
       if (this.shouldShowSlashCommands) {
         e.preventDefault();
 
-        if (e.key === 'Enter') {
+        if (key === 'Enter') {
           this.selectSlashCommand(this.activeCommandIndex);
-        } else if (e.key === 'ArrowUp') {
+        } else if (key === 'ArrowUp') {
           this.prevCommand();
-        } else if (e.key === 'ArrowDown') {
+        } else if (key === 'ArrowDown') {
           this.nextCommand();
         } else {
           this.activeCommandIndex = 0;
         }
-      } else if (e.key === 'Enter' && !isComposing && !(metaKey || ctrlKey || altKey || shiftKey)) {
+      } else if (key === 'Enter' && this.sendChatPromptOnEnter(e)) {
         e.preventDefault();
 
         this.sendChatPrompt();
       }
+
+      this.compositionJustEnded = false;
     },
     prevCommand() {
       this.activeCommandIndex -= 1;
@@ -540,6 +552,7 @@ export default {
               autofocus
               @keydown.enter.exact.native.prevent
               @keyup.native="onInputKeyup"
+              @compositionend="compositionEnd"
             />
           </div>
           <template #append>