@gitlab/ui 92.0.0 → 92.1.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [92.1.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v92.1.0...v92.1.1) (2024-09-11)
+
+
+### Bug Fixes
+
+* ensure chat scrolls to bottom with new message ([3d048f8](https://gitlab.com/gitlab-org/gitlab-ui/commit/3d048f82c586cd3860a7cf5c86d0572ee44d0dc6))
+
+# [92.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v92.0.0...v92.1.0) (2024-09-10)
+
+
+### Features
+
+* **GlDuoChat:** add /include command, integrate context-item-menu ([3f664f8](https://gitlab.com/gitlab-org/gitlab-ui/commit/3f664f89a35aa426bb043f1563cd2bdb9722878c))
+
 # [92.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v91.15.0...v92.0.0) (2024-09-10)
 
 

package/dist/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.js

@@ -179,6 +179,11 @@ var script = {
             return;
           }
           this.selectedCategory = null;
+
+          /**
+           * Emitted when the parent GlDuoChat component should refocus on the main prompt input
+           */
+          this.$emit('focus-prompt');
           break;
       }
     },

package/dist/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.js

@@ -82,7 +82,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('div',{staticClass:"gl-mb-3 gl-flex gl-flex-col"},[_c('button',{staticClass:"gl-flex gl-w-full gl-items-center gl-border-0 gl-bg-transparent gl-p-0 gl-text-left gl-text-xs gl-lowercase gl-text-gray-500",attrs:{"data-testid":"chat-context-selections-title"},on:{"click":_vm.toggleCollapse}},[_c('gl-icon',{attrs:{"name":_vm.collapseIconName,"data-testid":"chat-context-collapse-icon"}}),_vm._v(" "+_vm._s(_vm.title)+"\n  ")],1),_vm._v(" "),_c('div',{directives:[{name:"show",rawName:"v-show",value:(!_vm.isCollapsed),expression:"!isCollapsed"}],staticClass:"gl-mt-1 gl-flex gl-grow gl-flex-wrap",attrs:{"data-testid":"chat-context-tokens-wrapper"}},_vm._l((_vm.selections),function(contextItem){return _c('gl-token',{key:contextItem.id,staticClass:"gl-mb-2 gl-mr-2",attrs:{"view-only":!_vm.removable,"variant":"default"},on:{"close":function($event){return _vm.onRemoveItem(contextItem)}}},[_c('div',{staticClass:"gl-flex gl-items-center",attrs:{"id":("context-item-" + (contextItem.id) + "-" + _vm.selectionsId)}},[_c('gl-icon',{staticClass:"gl-mr-1",attrs:{"name":_vm.getIconName(contextItem.type),"size":12}}),_vm._v("\n        "+_vm._s(contextItem.metadata.name)+"\n      ")],1),_vm._v(" "),_c('gl-duo-chat-context-item-popover',{attrs:{"context-item":contextItem,"target":("context-item-" + (contextItem.id) + "-" + _vm.selectionsId),"placement":"bottom"}})],1)}),1)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-mb-3 gl-flex gl-flex-col"},[_c('button',{staticClass:"gl-flex gl-w-full gl-items-center gl-border-0 gl-bg-transparent gl-p-0 gl-text-left gl-text-xs gl-lowercase gl-text-gray-500",attrs:{"data-testid":"chat-context-selections-title","type":"button"},on:{"click":_vm.toggleCollapse}},[_c('gl-icon',{attrs:{"name":_vm.collapseIconName,"data-testid":"chat-context-collapse-icon"}}),_vm._v(" "+_vm._s(_vm.title)+"\n  ")],1),_vm._v(" "),_c('div',{directives:[{name:"show",rawName:"v-show",value:(!_vm.isCollapsed),expression:"!isCollapsed"}],staticClass:"gl-mt-1 gl-flex gl-grow gl-flex-wrap",attrs:{"data-testid":"chat-context-tokens-wrapper"}},_vm._l((_vm.selections),function(contextItem){return _c('gl-token',{key:contextItem.id,staticClass:"gl-mb-2 gl-mr-2",attrs:{"view-only":!_vm.removable,"variant":"default"},on:{"close":function($event){return _vm.onRemoveItem(contextItem)}}},[_c('div',{staticClass:"gl-flex gl-items-center",attrs:{"id":("context-item-" + (contextItem.id) + "-" + _vm.selectionsId)}},[_c('gl-icon',{staticClass:"gl-mr-1",attrs:{"name":_vm.getIconName(contextItem.type),"size":12}}),_vm._v("\n        "+_vm._s(contextItem.metadata.name)+"\n      ")],1),_vm._v(" "),_c('gl-duo-chat-context-item-popover',{attrs:{"context-item":contextItem,"target":("context-item-" + (contextItem.id) + "-" + _vm.selectionsId),"placement":"bottom"}})],1)}),1)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,6 +1,7 @@
 const CHAT_RESET_MESSAGE = '/reset';
 const CHAT_CLEAN_MESSAGE = '/clean';
 const CHAT_CLEAR_MESSAGE = '/clear';
+const CHAT_INCLUDE_MESSAGE = '/include';
 const LOADING_TRANSITION_DURATION = 7500;
 const DOCUMENTATION_SOURCE_TYPES = {
   HANDBOOK: {
@@ -22,4 +23,4 @@ const MESSAGE_MODEL_ROLES = {
   assistant: 'assistant'
 };
 
-export { CHAT_CLEAN_MESSAGE, CHAT_CLEAR_MESSAGE, CHAT_RESET_MESSAGE, DOCUMENTATION_SOURCE_TYPES, LOADING_TRANSITION_DURATION, MESSAGE_MODEL_ROLES };
+export { CHAT_CLEAN_MESSAGE, CHAT_CLEAR_MESSAGE, CHAT_INCLUDE_MESSAGE, CHAT_RESET_MESSAGE, DOCUMENTATION_SOURCE_TYPES, LOADING_TRANSITION_DURATION, MESSAGE_MODEL_ROLES };

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

@@ -14,7 +14,8 @@ import { SafeHtmlDirective } from '../../../../directives/safe_html/safe_html';
 import GlDuoChatLoader from './components/duo_chat_loader/duo_chat_loader';
 import GlDuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts';
 import GlDuoChatConversation from './components/duo_chat_conversation/duo_chat_conversation';
-import { CHAT_RESET_MESSAGE, CHAT_CLEAN_MESSAGE, CHAT_CLEAR_MESSAGE } from './constants';
+import { CHAT_RESET_MESSAGE, CHAT_INCLUDE_MESSAGE, MESSAGE_MODEL_ROLES, CHAT_CLEAN_MESSAGE, CHAT_CLEAR_MESSAGE } from './constants';
+import { INCLUDE_SLASH_COMMAND } from './mock_data';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const i18n = {
@@ -205,7 +206,9 @@ var script = {
       scrolledToBottom: true,
       activeCommandIndex: 0,
       displaySubmitButton: true,
-      compositionJustEnded: false
+      compositionJustEnded: false,
+      contextItemsMenuIsOpen: false,
+      contextItemMenuRef: null
     };
   },
   computed: {
@@ -231,6 +234,9 @@ var script = {
       var _this$messages2;
       return (_this$messages2 = this.messages) === null || _this$messages2 === void 0 ? void 0 : _this$messages2[this.messages.length - 1];
     },
+    caseInsensitivePrompt() {
+      return this.prompt.toLowerCase().trim();
+    },
     resetDisabled() {
       var _this$lastMessage;
       if (this.isLoading || !this.hasMessages) {
@@ -246,21 +252,38 @@ var script = {
       return Boolean(((_this$lastMessage3 = this.lastMessage) === null || _this$lastMessage3 === void 0 ? void 0 : (_this$lastMessage3$ch = _this$lastMessage3.chunks) === null || _this$lastMessage3$ch === void 0 ? void 0 : _this$lastMessage3$ch.length) > 0 && !((_this$lastMessage4 = this.lastMessage) !== null && _this$lastMessage4 !== void 0 && _this$lastMessage4.content) || typeof ((_this$lastMessage5 = this.lastMessage) === null || _this$lastMessage5 === void 0 ? void 0 : _this$lastMessage5.chunkId) === 'number');
     },
     filteredSlashCommands() {
-      const caseInsensitivePrompt = this.prompt.toLowerCase();
-      return this.slashCommands.filter(c => c.name.toLowerCase().startsWith(caseInsensitivePrompt));
+      return this.slashCommands.filter(c => c.name.toLowerCase().startsWith(this.caseInsensitivePrompt)).filter(c => {
+        if (c.name === CHAT_INCLUDE_MESSAGE) {
+          return this.hasContextItemSelectionMenu;
+        }
+        return true;
+      });
     },
     shouldShowSlashCommands() {
-      if (!this.withSlashCommands) return false;
-      const caseInsensitivePrompt = this.prompt.toLowerCase();
-      const startsWithSlash = caseInsensitivePrompt.startsWith('/');
-      const startsWithSlashCommand = this.slashCommands.some(c => caseInsensitivePrompt.startsWith(c.name));
+      if (!this.withSlashCommands || this.contextItemsMenuIsOpen) return false;
+      const startsWithSlash = this.caseInsensitivePrompt.startsWith('/');
+      const startsWithSlashCommand = this.slashCommands.some(c => this.caseInsensitivePrompt.startsWith(c.name));
       return startsWithSlash && this.filteredSlashCommands.length && !startsWithSlashCommand;
     },
+    shouldShowContextItemSelectionMenu() {
+      if (!this.hasContextItemSelectionMenu) {
+        return false;
+      }
+      const isSlash = this.caseInsensitivePrompt === '/';
+      if (!this.caseInsensitivePrompt || isSlash) {
+        // if user has removed entire command (or whole command except for '/') we should close context item menu and allow slash command menu to show again
+        return false;
+      }
+      return INCLUDE_SLASH_COMMAND.name.startsWith(this.caseInsensitivePrompt);
+    },
     inputPlaceholder() {
       if (this.chatPromptPlaceholder) {
         return this.chatPromptPlaceholder;
       }
       return this.withSlashCommands ? i18n.CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS : i18n.CHAT_PROMPT_PLACEHOLDER_DEFAULT;
+    },
+    hasContextItemSelectionMenu() {
+      return Boolean(this.contextItemMenuRef);
     }
   },
   watch: {
@@ -269,12 +292,18 @@ var script = {
         this.displaySubmitButton = true; // Re-enable submit button when loading stops
       }
       this.isHidden = false;
-      this.scrollToBottom();
     },
     isStreaming(newVal) {
       if (!newVal && !this.isLoading) {
         this.displaySubmitButton = true; // Re-enable submit button when streaming stops
       }
+    },
+    lastMessage(newMessage) {
+      if (this.scrolledToBottom || newMessage.role.toLowerCase() === MESSAGE_MODEL_ROLES.user) {
+        // only scroll to bottom on new message if the user hasn't explicitly scrolled up to view an earlier message
+        // or if the user has just submitted a new message
+        this.scrollToBottom();
+      }
     }
   },
   created() {
@@ -304,27 +333,32 @@ var script = {
       this.setPromptAndFocus();
     },
     sendChatPrompt() {
-      if (!this.displaySubmitButton) {
+      if (!this.displaySubmitButton || this.contextItemsMenuIsOpen) {
         return;
       }
       if (this.prompt) {
-        if (this.prompt === CHAT_RESET_MESSAGE && this.resetDisabled) {
+        if (this.caseInsensitivePrompt === CHAT_RESET_MESSAGE && this.resetDisabled) {
           return;
         }
+        if (this.caseInsensitivePrompt.startsWith(CHAT_INCLUDE_MESSAGE) && this.hasContextItemSelectionMenu) {
+          this.contextItemsMenuIsOpen = true;
+          return;
+        }
+        if (![CHAT_RESET_MESSAGE, CHAT_CLEAN_MESSAGE, CHAT_CLEAR_MESSAGE].includes(this.caseInsensitivePrompt)) {
+          this.displaySubmitButton = false;
+        }
+
         /**
          * Emitted when a new user prompt should be sent out.
          *
          * @param {String} prompt The user prompt to send.
          */
-
-        if (![CHAT_RESET_MESSAGE, CHAT_CLEAN_MESSAGE, CHAT_CLEAR_MESSAGE].includes(this.prompt)) {
-          this.displaySubmitButton = false;
-        }
         this.$emit('send-chat-prompt', this.prompt.trim());
         this.setPromptAndFocus();
       }
     },
     sendPredefinedPrompt(prompt) {
+      this.contextItemsMenuIsOpen = false;
       this.prompt = prompt;
       this.sendChatPrompt();
     },
@@ -338,8 +372,6 @@ var script = {
     },
     async scrollToBottom() {
       var _this$$refs$anchor, _this$$refs$anchor$sc;
-      // This method is also called directly by consumers of this component
-      // https://gitlab.com/gitlab-org/gitlab-vscode-extension/-/blob/3269f6200dc3821c62a3992b40c971dd9ee55d87/webviews/vue2/gitlab_duo_chat/src/App.vue#L97
       await this.$nextTick();
       (_this$$refs$anchor = this.$refs.anchor) === null || _this$$refs$anchor === void 0 ? void 0 : (_this$$refs$anchor$sc = _this$$refs$anchor.scrollIntoView) === null || _this$$refs$anchor$sc === void 0 ? void 0 : _this$$refs$anchor$sc.call(_this$$refs$anchor);
     },
@@ -371,6 +403,18 @@ var script = {
       const {
         key
       } = e;
+      if (this.contextItemsMenuIsOpen) {
+        var _this$contextItemMenu;
+        if (!this.shouldShowContextItemSelectionMenu) {
+          this.contextItemsMenuIsOpen = false;
+        }
+        (_this$contextItemMenu = this.contextItemMenuRef) === null || _this$contextItemMenu === void 0 ? void 0 : _this$contextItemMenu.handleKeyUp(e);
+        return;
+      }
+      if (this.caseInsensitivePrompt === INCLUDE_SLASH_COMMAND.name) {
+        this.contextItemsMenuIsOpen = true;
+        return;
+      }
       if (this.shouldShowSlashCommands) {
         e.preventDefault();
         if (key === 'Enter') {
@@ -416,6 +460,9 @@ var script = {
         this.sendChatPrompt();
       } else {
         this.setPromptAndFocus(`${command.name} `);
+        if (command.name === CHAT_INCLUDE_MESSAGE && this.hasContextItemSelectionMenu) {
+          this.contextItemsMenuIsOpen = true;
+        }
       }
     },
     onInsertCodeSnippet(e) {
@@ -424,6 +471,13 @@ var script = {
        * @param {*} event An event containing code string in the "detail.code" field.
        */
       this.$emit('insert-code-snippet', e);
+    },
+    closeContextItemsMenuOpen() {
+      this.contextItemsMenuIsOpen = false;
+      this.setPromptAndFocus();
+    },
+    setContextItemsMenuRef(ref) {
+      this.contextItemMenuRef = ref;
     }
   },
   i18n,
@@ -438,7 +492,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:{"enable-code-insertion":_vm.enableCodeInsertion,"messages":conversation,"canceled-request-ids":_vm.canceledRequestIds,"show-delimiter":index > 0},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('gl-empty-state',{key:"empty-state",staticClass:"gl-flex-grow gl-justify-center",attrs:{"svg-path":_vm.$options.emptySvg,"svg-height":145,"title":_vm.emptyStateTitle},scopedSlots:_vm._u([{key:"description",fn:function(){return [_c('p',{staticClass:"gl-mb-3",attrs:{"data-testid":"gl-duo-chat-empty-state-description"}},[_vm._v("\n              "+_vm._s(_vm.emptyStateDescription)+"\n            ")]),_vm._v(" "),_c('p',{staticClass:"gl-mt-3 gl-text-sm gl-text-subtle",attrs:{"data-testid":"gl-duo-chat-empty-state-secondary-description"}},[_vm._v("\n              "+_vm._s(_vm.emptyStateSecondaryDescription)+"\n            ")])]},proxy:true}],null,false,460840487)}),_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-border-t gl-bg-gray-10 gl-p-5",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,677611116)},[_c('div',{staticClass:"duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-rounded-base gl-bg-white gl-align-top gl-shadow-inner-1-gray-400",attrs:{"data-value":_vm.prompt}},[(_vm.shouldShowSlashCommands)?_c('gl-card',{ref:"commands",staticClass:"slash-commands !gl-absolute gl-w-full -gl-translate-y-full gl-list-none gl-pl-0 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-flex gl-justify-between"},[_c('span',{staticClass:"gl-block"},[_vm._v(_vm._s(command.name))]),_vm._v(" "),_c('small',{staticClass:"gl-pl-3 gl-text-right gl-italic gl-text-gray-500"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",staticClass:"gl-absolute !gl-h-full gl-rounded-br-none gl-rounded-tr-none !gl-bg-transparent !gl-py-4 !gl-shadow-none",class:{ 'gl-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('p',{staticClass:"gl-mb-0 gl-mt-3 gl-text-sm gl-leading-20 gl-text-subtle",attrs:{"data-testid":"chat-legal-disclaimer"}},[_vm._v("\n        "+_vm._s(_vm.$options.i18n.CHAT_LEGAL_DISCLAIMER)+"\n      ")])],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:{"enable-code-insertion":_vm.enableCodeInsertion,"messages":conversation,"canceled-request-ids":_vm.canceledRequestIds,"show-delimiter":index > 0},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('gl-empty-state',{key:"empty-state",staticClass:"gl-flex-grow gl-justify-center",attrs:{"svg-path":_vm.$options.emptySvg,"svg-height":145,"title":_vm.emptyStateTitle},scopedSlots:_vm._u([{key:"description",fn:function(){return [_c('p',{staticClass:"gl-mb-3",attrs:{"data-testid":"gl-duo-chat-empty-state-description"}},[_vm._v("\n              "+_vm._s(_vm.emptyStateDescription)+"\n            ")]),_vm._v(" "),_c('p',{staticClass:"gl-mt-3 gl-text-sm gl-text-subtle",attrs:{"data-testid":"gl-duo-chat-empty-state-secondary-description"}},[_vm._v("\n              "+_vm._s(_vm.emptyStateSecondaryDescription)+"\n            ")])]},proxy:true}],null,false,460840487)}),_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-border-t gl-bg-gray-10 gl-p-5",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('div',{staticClass:"gl-relative gl-max-w-full"},[_vm._t("context-items-menu",null,{"isOpen":_vm.contextItemsMenuIsOpen,"onClose":_vm.closeContextItemsMenuOpen,"setRef":_vm.setContextItemsMenuRef,"focusPrompt":_vm.focusChatInput})],2),_vm._v(" "),_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,677611116)},[_c('div',{staticClass:"duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-rounded-base gl-bg-white gl-align-top gl-shadow-inner-1-gray-400",attrs:{"data-value":_vm.prompt}},[(_vm.shouldShowSlashCommands)?_c('gl-card',{ref:"commands",staticClass:"slash-commands !gl-absolute gl-w-full -gl-translate-y-full gl-list-none gl-pl-0 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-flex gl-justify-between"},[_c('span',{staticClass:"gl-block"},[_vm._v(_vm._s(command.name))]),_vm._v(" "),_c('small',{staticClass:"gl-pl-3 gl-text-right gl-italic gl-text-gray-500"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",staticClass:"gl-absolute !gl-h-full gl-rounded-br-none gl-rounded-tr-none !gl-bg-transparent !gl-py-4 !gl-shadow-none",class:{ 'gl-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('p',{staticClass:"gl-mb-0 gl-mt-3 gl-text-sm gl-leading-20 gl-text-subtle",attrs:{"data-testid":"chat-legal-disclaimer"}},[_vm._v("\n        "+_vm._s(_vm.$options.i18n.CHAT_LEGAL_DISCLAIMER)+"\n      ")])],1)],1):_vm._e()]):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,5 +1,5 @@
 import { setStoryTimeout } from '../../../../utils/test_utils';
-import { DOCUMENTATION_SOURCE_TYPES, MESSAGE_MODEL_ROLES, CHAT_RESET_MESSAGE, CHAT_CLEAN_MESSAGE } from './constants';
+import { DOCUMENTATION_SOURCE_TYPES, MESSAGE_MODEL_ROLES, CHAT_RESET_MESSAGE, CHAT_CLEAN_MESSAGE, CHAT_INCLUDE_MESSAGE } from './constants';
 import { getMockContextItems } from './components/duo_chat_context/mock_context_data';
 
 const MOCK_SOURCES = [{
@@ -154,5 +154,9 @@ const SLASH_COMMANDS = [{
   name: '/explain',
   description: 'Explain the selected snippet.'
 }];
+const INCLUDE_SLASH_COMMAND = {
+  name: CHAT_INCLUDE_MESSAGE,
+  description: 'Include additional context in the conversation.'
+};
 
-export { MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_USER_PROMPT_MESSAGE, SLASH_COMMANDS, generateMockResponseChunks, generateSeparateChunks, renderGFM, renderMarkdown };
+export { INCLUDE_SLASH_COMMAND, MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_USER_PROMPT_MESSAGE, SLASH_COMMANDS, generateMockResponseChunks, generateSeparateChunks, renderGFM, renderMarkdown };

package/dist/index.js

@@ -89,6 +89,7 @@ export { default as GlAccordionItem } from './components/base/accordion/accordio
 export { default as GlExperimentBadge } from './components/experimental/experiment_badge/experiment_badge';
 export { default as GlDuoUserFeedback } from './components/experimental/duo/user_feedback/user_feedback';
 export { default as GlDuoChat } from './components/experimental/duo/chat/duo_chat';
+export { default as GlDuoChatContextItemMenu } from './components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu';
 export { default as GlAnimatedNumber } from './components/utilities/animated_number/animated_number';
 export { default as GlFriendlyWrap } from './components/utilities/friendly_wrap/friendly_wrap';
 export { default as GlIntersperse } from './components/utilities/intersperse/intersperse';

package/package.json

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

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.vue

@@ -183,6 +183,11 @@ export default {
           }
 
           this.selectedCategory = null;
+
+          /**
+           * Emitted when the parent GlDuoChat component should refocus on the main prompt input
+           */
+          this.$emit('focus-prompt');
           break;
         default:
           break;

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.vue

@@ -88,6 +88,7 @@ export default {
     <button
       class="gl-flex gl-w-full gl-items-center gl-border-0 gl-bg-transparent gl-p-0 gl-text-left gl-text-xs gl-lowercase gl-text-gray-500"
       data-testid="chat-context-selections-title"
+      type="button"
       @click="toggleCollapse"
     >
       <gl-icon :name="collapseIconName" data-testid="chat-context-collapse-icon" /> {{ title }}

package/src/components/experimental/duo/chat/constants.js

@@ -1,6 +1,7 @@
 export const CHAT_RESET_MESSAGE = '/reset';
 export const CHAT_CLEAN_MESSAGE = '/clean';
 export const CHAT_CLEAR_MESSAGE = '/clear';
+export const CHAT_INCLUDE_MESSAGE = '/include';
 
 export const LOADING_TRANSITION_DURATION = 7500;
 

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

@@ -15,7 +15,14 @@ import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/
 import GlDuoChatLoader from './components/duo_chat_loader/duo_chat_loader.vue';
 import GlDuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue';
 import GlDuoChatConversation from './components/duo_chat_conversation/duo_chat_conversation.vue';
-import { CHAT_CLEAN_MESSAGE, CHAT_RESET_MESSAGE, CHAT_CLEAR_MESSAGE } from './constants';
+import {
+  CHAT_CLEAN_MESSAGE,
+  CHAT_RESET_MESSAGE,
+  CHAT_CLEAR_MESSAGE,
+  CHAT_INCLUDE_MESSAGE,
+  MESSAGE_MODEL_ROLES,
+} from './constants';
+import { INCLUDE_SLASH_COMMAND } from './mock_data';
 
 export const i18n = {
   CHAT_DEFAULT_TITLE: 'GitLab Duo Chat',
@@ -214,6 +221,8 @@ export default {
       activeCommandIndex: 0,
       displaySubmitButton: true,
       compositionJustEnded: false,
+      contextItemsMenuIsOpen: false,
+      contextItemMenuRef: null,
     };
   },
   computed: {
@@ -241,6 +250,9 @@ export default {
     lastMessage() {
       return this.messages?.[this.messages.length - 1];
     },
+    caseInsensitivePrompt() {
+      return this.prompt.toLowerCase().trim();
+    },
     resetDisabled() {
       if (this.isLoading || !this.hasMessages) {
         return true;
@@ -257,20 +269,36 @@ export default {
       );
     },
     filteredSlashCommands() {
-      const caseInsensitivePrompt = this.prompt.toLowerCase();
-      return this.slashCommands.filter((c) =>
-        c.name.toLowerCase().startsWith(caseInsensitivePrompt)
-      );
+      return this.slashCommands
+        .filter((c) => c.name.toLowerCase().startsWith(this.caseInsensitivePrompt))
+        .filter((c) => {
+          if (c.name === CHAT_INCLUDE_MESSAGE) {
+            return this.hasContextItemSelectionMenu;
+          }
+          return true;
+        });
     },
     shouldShowSlashCommands() {
-      if (!this.withSlashCommands) return false;
-      const caseInsensitivePrompt = this.prompt.toLowerCase();
-      const startsWithSlash = caseInsensitivePrompt.startsWith('/');
+      if (!this.withSlashCommands || this.contextItemsMenuIsOpen) return false;
+      const startsWithSlash = this.caseInsensitivePrompt.startsWith('/');
       const startsWithSlashCommand = this.slashCommands.some((c) =>
-        caseInsensitivePrompt.startsWith(c.name)
+        this.caseInsensitivePrompt.startsWith(c.name)
       );
       return startsWithSlash && this.filteredSlashCommands.length && !startsWithSlashCommand;
     },
+    shouldShowContextItemSelectionMenu() {
+      if (!this.hasContextItemSelectionMenu) {
+        return false;
+      }
+
+      const isSlash = this.caseInsensitivePrompt === '/';
+      if (!this.caseInsensitivePrompt || isSlash) {
+        // if user has removed entire command (or whole command except for '/') we should close context item menu and allow slash command menu to show again
+        return false;
+      }
+
+      return INCLUDE_SLASH_COMMAND.name.startsWith(this.caseInsensitivePrompt);
+    },
     inputPlaceholder() {
       if (this.chatPromptPlaceholder) {
         return this.chatPromptPlaceholder;
@@ -280,6 +308,9 @@ export default {
         ? i18n.CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS
         : i18n.CHAT_PROMPT_PLACEHOLDER_DEFAULT;
     },
+    hasContextItemSelectionMenu() {
+      return Boolean(this.contextItemMenuRef);
+    },
   },
   watch: {
     isLoading(newVal) {
@@ -287,13 +318,19 @@ export default {
         this.displaySubmitButton = true; // Re-enable submit button when loading stops
       }
       this.isHidden = false;
-      this.scrollToBottom();
     },
     isStreaming(newVal) {
       if (!newVal && !this.isLoading) {
         this.displaySubmitButton = true; // Re-enable submit button when streaming stops
       }
     },
+    lastMessage(newMessage) {
+      if (this.scrolledToBottom || newMessage.role.toLowerCase() === MESSAGE_MODEL_ROLES.user) {
+        // only scroll to bottom on new message if the user hasn't explicitly scrolled up to view an earlier message
+        // or if the user has just submitted a new message
+        this.scrollToBottom();
+      }
+    },
   },
   created() {
     this.handleScrollingTrottled = throttle(this.handleScrolling, 200); // Assume a 200ms throttle for example
@@ -322,28 +359,42 @@ export default {
       this.setPromptAndFocus();
     },
     sendChatPrompt() {
-      if (!this.displaySubmitButton) {
+      if (!this.displaySubmitButton || this.contextItemsMenuIsOpen) {
         return;
       }
       if (this.prompt) {
-        if (this.prompt === CHAT_RESET_MESSAGE && this.resetDisabled) {
+        if (this.caseInsensitivePrompt === CHAT_RESET_MESSAGE && this.resetDisabled) {
           return;
         }
+
+        if (
+          this.caseInsensitivePrompt.startsWith(CHAT_INCLUDE_MESSAGE) &&
+          this.hasContextItemSelectionMenu
+        ) {
+          this.contextItemsMenuIsOpen = true;
+          return;
+        }
+
+        if (
+          ![CHAT_RESET_MESSAGE, CHAT_CLEAN_MESSAGE, CHAT_CLEAR_MESSAGE].includes(
+            this.caseInsensitivePrompt
+          )
+        ) {
+          this.displaySubmitButton = false;
+        }
+
         /**
          * Emitted when a new user prompt should be sent out.
          *
          * @param {String} prompt The user prompt to send.
          */
-
-        if (![CHAT_RESET_MESSAGE, CHAT_CLEAN_MESSAGE, CHAT_CLEAR_MESSAGE].includes(this.prompt)) {
-          this.displaySubmitButton = false;
-        }
         this.$emit('send-chat-prompt', this.prompt.trim());
 
         this.setPromptAndFocus();
       }
     },
     sendPredefinedPrompt(prompt) {
+      this.contextItemsMenuIsOpen = false;
       this.prompt = prompt;
       this.sendChatPrompt();
     },
@@ -352,8 +403,6 @@ export default {
       this.scrolledToBottom = scrollTop + offsetHeight >= scrollHeight;
     },
     async scrollToBottom() {
-      // This method is also called directly by consumers of this component
-      // https://gitlab.com/gitlab-org/gitlab-vscode-extension/-/blob/3269f6200dc3821c62a3992b40c971dd9ee55d87/webviews/vue2/gitlab_duo_chat/src/App.vue#L97
       await this.$nextTick();
 
       this.$refs.anchor?.scrollIntoView?.();
@@ -379,6 +428,18 @@ export default {
     onInputKeyup(e) {
       const { key } = e;
 
+      if (this.contextItemsMenuIsOpen) {
+        if (!this.shouldShowContextItemSelectionMenu) {
+          this.contextItemsMenuIsOpen = false;
+        }
+        this.contextItemMenuRef?.handleKeyUp(e);
+        return;
+      }
+      if (this.caseInsensitivePrompt === INCLUDE_SLASH_COMMAND.name) {
+        this.contextItemsMenuIsOpen = true;
+        return;
+      }
+
       if (this.shouldShowSlashCommands) {
         e.preventDefault();
 
@@ -426,6 +487,10 @@ export default {
         this.sendChatPrompt();
       } else {
         this.setPromptAndFocus(`${command.name} `);
+
+        if (command.name === CHAT_INCLUDE_MESSAGE && this.hasContextItemSelectionMenu) {
+          this.contextItemsMenuIsOpen = true;
+        }
       }
     },
     onInsertCodeSnippet(e) {
@@ -435,6 +500,13 @@ export default {
        */
       this.$emit('insert-code-snippet', e);
     },
+    closeContextItemsMenuOpen() {
+      this.contextItemsMenuIsOpen = false;
+      this.setPromptAndFocus();
+    },
+    setContextItemsMenuRef(ref) {
+      this.contextItemMenuRef = ref;
+    },
   },
   i18n,
   emptySvg,
@@ -561,6 +633,19 @@ export default {
       :class="{ 'duo-chat-drawer-body-scrim-on-footer': !scrolledToBottom }"
     >
       <gl-form data-testid="chat-prompt-form" @submit.stop.prevent="sendChatPrompt">
+        <div class="gl-relative gl-max-w-full">
+          <!--
+            @slot For integrating `<gl-context-items-menu>` component if pinned-context should be available. The following scopedSlot properties are provided: `isOpen`, `onClose`, `setRef`, `focusPrompt`, which should be passed to the `<gl-context-items-menu>` component when rendering, e.g. `<template #context-items-menu="{ isOpen, onClose, setRef, focusPrompt }">` `<gl-duo-chat-context-item-menu :ref="setRef" :open="isOpen" @close="onClose" @focus-prompt="focusPrompt" ...`
+          -->
+          <slot
+            name="context-items-menu"
+            :is-open="contextItemsMenuIsOpen"
+            :on-close="closeContextItemsMenuOpen"
+            :set-ref="setContextItemsMenuRef"
+            :focus-prompt="focusChatInput"
+          ></slot>
+        </div>
+
         <gl-form-input-group>
           <div
             class="duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-rounded-base gl-bg-white gl-align-top gl-shadow-inner-1-gray-400"

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

@@ -4,6 +4,7 @@ import {
   MESSAGE_MODEL_ROLES,
   CHAT_RESET_MESSAGE,
   CHAT_CLEAN_MESSAGE,
+  CHAT_INCLUDE_MESSAGE,
 } from './constants';
 import { getMockContextItems } from './components/duo_chat_context/mock_context_data';
 
@@ -170,3 +171,8 @@ export const SLASH_COMMANDS = [
     description: 'Explain the selected snippet.',
   },
 ];
+
+export const INCLUDE_SLASH_COMMAND = {
+  name: CHAT_INCLUDE_MESSAGE,
+  description: 'Include additional context in the conversation.',
+};

package/src/index.js

@@ -100,6 +100,7 @@ export { default as GlAccordionItem } from './components/base/accordion/accordio
 export { default as GlExperimentBadge } from './components/experimental/experiment_badge/experiment_badge.vue';
 export { default as GlDuoUserFeedback } from './components/experimental/duo/user_feedback/user_feedback.vue';
 export { default as GlDuoChat } from './components/experimental/duo/chat/duo_chat.vue';
+export { default as GlDuoChatContextItemMenu } from './components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.vue';
 
 // Utilities
 export { default as GlAnimatedNumber } from './components/utilities/animated_number/animated_number.vue';