@gitlab/ui 68.2.1 → 68.4.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [68.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v68.3.0...v68.4.0) (2023-11-14)
+
+
+### Features
+
+* **GlAlert, GlBroadcastMessage:** Add CSS variable overrides ([ed2754f](https://gitlab.com/gitlab-org/gitlab-ui/commit/ed2754f2711cdd1eb9d2fd0f5b903a4d77aeff85))
+
+# [68.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v68.2.1...v68.3.0) (2023-11-10)
+
+
+### Features
+
+* **GlDuoChat:** support for slash commands ([2d3eee1](https://gitlab.com/gitlab-org/gitlab-ui/commit/2d3eee10dd2b1d183111729c0484deb125847c0d))
+
 ## [68.2.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v68.2.0...v68.2.1) (2023-11-10)
 
 

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

@@ -1,5 +1,7 @@
 import throttle from 'lodash/throttle';
 import emptySvg from '@gitlab/svgs/dist/illustrations/empty-state/empty-activity-md.svg';
+import GlDropdownItem from '../../../base/dropdown/dropdown_item';
+import GlCard from '../../../base/card/card';
 import GlEmptyState from '../../../regions/empty_state/empty_state';
 import GlButton from '../../../base/button/button';
 import GlAlert from '../../../base/alert/alert';
@@ -27,6 +29,23 @@ const i18n = {
   CHAT_LEGAL_DISCLAIMER: "May provide inappropriate responses not representative of GitLab's views. Do not input personal data.",
   CHAT_DEFAULT_PREDEFINED_PROMPTS: ['How do I change my password in GitLab?', 'How do I fork a project?', 'How do I clone a repository?', 'How do I create a template?']
 };
+const slashCommands = [{
+  name: '/reset',
+  shouldSubmit: true,
+  description: 'Reset conversation, ignore the previous messages.'
+}, {
+  name: '/test',
+  shouldSubmit: false,
+  description: 'Write tests for the code snippet.'
+}, {
+  name: '/refactor',
+  shouldSubmit: false,
+  description: 'Refactor the code snippet.'
+}, {
+  name: '/explain',
+  shouldSubmit: false,
+  description: 'Explain the code snippet.'
+}];
 const isMessage = item => Boolean(item) && (item === null || item === void 0 ? void 0 : item.role);
 const itemsValidator = items => items.every(isMessage);
 var script = {
@@ -42,7 +61,9 @@ var script = {
     GlExperimentBadge,
     GlDuoChatLoader,
     GlDuoChatPredefinedPrompts,
-    GlDuoChatConversation
+    GlDuoChatConversation,
+    GlCard,
+    GlDropdownItem
   },
   directives: {
     SafeHtml: SafeHtmlDirective
@@ -121,13 +142,22 @@ var script = {
       type: String,
       required: false,
       default: i18n.CHAT_DEFAULT_TITLE
+    },
+    /**
+     * Whether the slash commands should be available to user when typing the prompt.
+     */
+    withSlashCommands: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
     return {
       isHidden: false,
       prompt: '',
-      scrolledToBottom: true
+      scrolledToBottom: true,
+      activeCommandIndex: 0
     };
   },
   computed: {
@@ -152,6 +182,17 @@ var script = {
       }
       const lastMessage = this.messages[this.messages.length - 1];
       return lastMessage.content === CHAT_RESET_MESSAGE;
+    },
+    filteredSlashCommands() {
+      const caseInsensitivePrompt = this.prompt.toLowerCase();
+      return slashCommands.filter(c => c.name.toLowerCase().startsWith(caseInsensitivePrompt));
+    },
+    shouldShowSlashCommands() {
+      if (!this.withSlashCommands) return false;
+      const caseInsensitivePrompt = this.prompt.toLowerCase();
+      const startsWithSlash = caseInsensitivePrompt.startsWith('/');
+      const startsWithSlashCommand = slashCommands.some(c => caseInsensitivePrompt.startsWith(c.name));
+      return startsWithSlash && this.filteredSlashCommands.length && !startsWithSlashCommand;
     }
   },
   watch: {
@@ -215,6 +256,54 @@ var script = {
        * @param {*} event An event, containing the feedback choices and the extended feedback text.
        */
       this.$emit('track-feedback', event);
+    },
+    onInputKeyup(e) {
+      const {
+        metaKey,
+        ctrlKey,
+        altKey,
+        shiftKey
+      } = e;
+      if (this.shouldShowSlashCommands) {
+        e.preventDefault();
+        if (e.key === 'Enter') {
+          this.selectSlashCommand(this.activeCommandIndex);
+        } else if (e.key === 'ArrowUp') {
+          this.prevCommand();
+        } else if (e.key === 'ArrowDown') {
+          this.nextCommand();
+        } else {
+          this.activeCommandIndex = 0;
+        }
+      } else if (e.key === 'Enter' && !(metaKey || ctrlKey || altKey || shiftKey)) {
+        e.preventDefault();
+        this.sendChatPrompt();
+      }
+    },
+    prevCommand() {
+      this.activeCommandIndex -= 1;
+      this.wrapCommandIndex();
+    },
+    nextCommand() {
+      this.activeCommandIndex += 1;
+      this.wrapCommandIndex();
+    },
+    wrapCommandIndex() {
+      if (this.activeCommandIndex < 0) {
+        this.activeCommandIndex = this.filteredSlashCommands.length - 1;
+      } else if (this.activeCommandIndex >= this.filteredSlashCommands.length) {
+        this.activeCommandIndex = 0;
+      }
+    },
+    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();
+      }
     }
   },
   i18n,
@@ -229,7 +318,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
           {
             'gl-h-full': !_vm.hasMessages,
             'gl-h-auto': _vm.hasMessages,
-          } ],attrs:{"tag":"div","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('div',{key:"empty-state",staticClass:"gl-display-flex gl-flex-grow-1 gl-mr-auto gl-ml-auto"},[_c('gl-empty-state',{staticClass:"gl-align-self-center",attrs:{"svg-path":_vm.$options.emptySvg,"svg-height":145,"title":_vm.$options.i18n.CHAT_EMPTY_STATE_TITLE,"description":_vm.$options.i18n.CHAT_EMPTY_STATE_DESC}})],1),_vm._v(" "),_c('gl-duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})]:_vm._e()],2),_vm._v(" "),_c('transition',{attrs:{"name":"loader"}},[(_vm.isLoading)?_c('gl-duo-chat-loader',{staticClass:"gl-px-0!",attrs:{"tool-name":_vm.toolName}}):_vm._e()],1)],1)],2),_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,2232229068)},[_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}},[_c('gl-form-textarea',{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.$options.i18n.CHAT_PROMPT_PLACEHOLDER,"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();return _vm.sendChatPrompt.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":"div","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('div',{key:"empty-state",staticClass:"gl-display-flex gl-flex-grow-1 gl-mr-auto gl-ml-auto"},[_c('gl-empty-state',{staticClass:"gl-align-self-center",attrs:{"svg-path":_vm.$options.emptySvg,"svg-height":145,"title":_vm.$options.i18n.CHAT_EMPTY_STATE_TITLE,"description":_vm.$options.i18n.CHAT_EMPTY_STATE_DESC}})],1),_vm._v(" "),_c('gl-duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})]:_vm._e()],2),_vm._v(" "),_c('transition',{attrs:{"name":"loader"}},[(_vm.isLoading)?_c('gl-duo-chat-loader',{staticClass:"gl-px-0!",attrs:{"tool-name":_vm.toolName}}):_vm._e()],1)],1)],2),_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,2232229068)},[_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"},[_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.$options.i18n.CHAT_PROMPT_PLACEHOLDER,"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()};
 var __vue_staticRenderFns__ = [];
 
   /* style */
@@ -262,4 +351,4 @@ var __vue_staticRenderFns__ = [];
   );
 
 export default __vue_component__;
-export { i18n };
+export { i18n, slashCommands };