@gitlab/ui 86.5.1 → 86.7.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [86.7.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v86.6.0...v86.7.0) (2024-07-11)
+
+
+### Features
+
+* **DuoChat:** add insert code snippet button ([6b99777](https://gitlab.com/gitlab-org/gitlab-ui/commit/6b997772587c93d68e6f3e95e15150a9ad59e1b2))
+
+# [86.6.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v86.5.1...v86.6.0) (2024-07-10)
+
+
+### Features
+
+* **OutsideDirective:** Add Event Listener for focusin ([aee99c5](https://gitlab.com/gitlab-org/gitlab-ui/commit/aee99c56b926d9468030774c4bd33eac01f4f601))
+
 ## [86.5.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v86.5.0...v86.5.1) (2024-07-10)
 
 

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

@@ -27,6 +27,13 @@ var script = {
       type: Array,
       required: true
     },
+    /**
+     * Whether the insertCode feature should be available.
+     */
+    enableCodeInsertion: {
+      type: Boolean,
+      required: true
+    },
     /**
      * Whether to show the delimiter before this conversation
      */
@@ -43,6 +50,9 @@ var script = {
        * @param {*} event An event, containing the feedback choices and the extended feedback text.
        */
       this.$emit('track-feedback', event);
+    },
+    onInsertCodeSnippet(e) {
+      this.$emit('insert-code-snippet', e);
     }
   },
   i18n
@@ -52,7 +62,9 @@ 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-display-flex gl-flex-direction-column gl-justify-content-end"},[(_vm.showDelimiter)?_c('div',{staticClass:"gl-my-5 gl-display-flex gl-align-items-center gl-gap-4 gl-text-gray-500",attrs:{"data-testid":"conversation-delimiter"}},[_c('hr',{staticClass:"gl-flex-grow-1"}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.$options.i18n.CONVERSATION_NEW_CHAT))]),_vm._v(" "),_c('hr',{staticClass:"gl-flex-grow-1"})]):_vm._e(),_vm._v(" "),_vm._l((_vm.messages),function(msg,index){return _c('gl-duo-chat-message',{key:((msg.role) + "-" + index),attrs:{"message":msg,"is-cancelled":_vm.canceledRequestIds.includes(msg.requestId)},on:{"track-feedback":_vm.onTrackFeedback}})})],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
+    'gl-display-flex gl-flex-direction-column gl-justify-content-end',
+    { 'insert-code-hidden': !_vm.enableCodeInsertion } ]},[(_vm.showDelimiter)?_c('div',{staticClass:"gl-my-5 gl-display-flex gl-align-items-center gl-gap-4 gl-text-gray-500",attrs:{"data-testid":"conversation-delimiter"}},[_c('hr',{staticClass:"gl-flex-grow-1"}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.$options.i18n.CONVERSATION_NEW_CHAT))]),_vm._v(" "),_c('hr',{staticClass:"gl-flex-grow-1"})]):_vm._e(),_vm._v(" "),_vm._l((_vm.messages),function(msg,index){return _c('gl-duo-chat-message',{key:((msg.role) + "-" + index),attrs:{"message":msg,"is-cancelled":_vm.canceledRequestIds.includes(msg.requestId)},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet}})})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/experimental/duo/chat/components/duo_chat_message/buttons_utils.js

@@ -0,0 +1,25 @@
+import iconsPath from '@gitlab/svgs/dist/icons.svg';
+
+const createButton = function () {
+  let title = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'Insert the code snippet';
+  let iconId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'insert';
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.classList.add('btn', 'btn-default', 'btn-md', 'gl-button', 'btn-default-secondary', 'btn-icon');
+  button.dataset.title = title;
+
+  // Create an SVG element with the correct namespace
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('role', 'img');
+  svg.setAttribute('aria-hidden', 'true');
+  svg.classList.add('gl-button-icon', 'gl-icon', 's16');
+
+  // Create a 'use' element with the correct namespace
+  const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+  use.setAttribute('href', `${iconsPath}#${iconId}`);
+  svg.appendChild(use);
+  button.appendChild(svg);
+  return button;
+};
+
+export { createButton };

package/dist/components/experimental/duo/chat/components/duo_chat_message/copy_code_element.js

@@ -1,28 +1,9 @@
-import iconsPath from '@gitlab/svgs/dist/icons.svg';
+import { createButton } from './buttons_utils';
 
-const createButton = () => {
-  const button = document.createElement('button');
-  button.type = 'button';
-  button.classList.add('btn', 'btn-default', 'btn-md', 'gl-button', 'btn-default-secondary', 'btn-icon');
-  button.dataset.title = 'Copy to clipboard';
-
-  // Create an SVG element with the correct namespace
-  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-  svg.setAttribute('role', 'img');
-  svg.setAttribute('aria-hidden', 'true');
-  svg.classList.add('gl-button-icon', 'gl-icon', 's16');
-
-  // Create a 'use' element with the correct namespace
-  const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
-  use.setAttribute('href', `${iconsPath}#copy-to-clipboard`);
-  svg.appendChild(use);
-  button.appendChild(svg);
-  return button;
-};
 class CopyCodeElement extends HTMLElement {
   constructor() {
     super();
-    const btn = createButton();
+    const btn = createButton('Copy to clipboard', 'copy-to-clipboard');
     const wrapper = this.parentNode;
     this.appendChild(btn);
     btn.addEventListener('click', async () => {

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

@@ -9,6 +9,7 @@ import { MESSAGE_MODEL_ROLES } from '../../constants';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources';
 import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
 import { CopyCodeElement } from './copy_code_element';
+import { InsertCodeSnippetElement } from './insert_code_snippet_element';
 import { concatUntilEmpty } from './utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -27,7 +28,7 @@ var script = {
   name: 'GlDuoChatMessage',
   i18n,
   safeHtmlConfigExtension: {
-    ADD_TAGS: ['copy-code']
+    ADD_TAGS: ['copy-code', 'insert-code-snippet']
   },
   components: {
     DocumentationSources,
@@ -130,6 +131,9 @@ var script = {
     if (!customElements.get('copy-code')) {
       customElements.define('copy-code', CopyCodeElement);
     }
+    if (!customElements.get('insert-code-snippet')) {
+      customElements.define('insert-code-snippet', InsertCodeSnippetElement);
+    }
   },
   mounted() {
     if (this.isAssistantMessage) {
@@ -180,6 +184,9 @@ var script = {
       if (!this.isChunk) {
         this.stopWatchingMessage();
       }
+    },
+    onInsertCodeSnippet(e) {
+      this.$emit('insert-code-snippet', e);
     }
   }
 };
@@ -194,7 +201,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
       _vm.isAssistantMessage,
     'gl-bg-white': _vm.isAssistantMessage && !_vm.error,
     'gl-bg-red-50 gl-border-none!': _vm.error,
-  }},[(_vm.error)?_c('gl-icon',{staticClass:"gl-border-red-500 gl-rounded-full gl-mr-3 gl-flex-shrink-0 error-icon gl-border 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.error)?_c('div',{ref:"error-message"},[_vm._v(_vm._s(_vm.error))]):_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:"gl-display-flex gl-align-items-flex-end gl-mt-4 duo-chat-message-feedback"},[(_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)])],1)};
+  },on:{"insert-code-snippet":_vm.onInsertCodeSnippet}},[(_vm.error)?_c('gl-icon',{staticClass:"gl-border-red-500 gl-rounded-full gl-mr-3 gl-flex-shrink-0 error-icon gl-border 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.error)?_c('div',{ref:"error-message"},[_vm._v(_vm._s(_vm.error))]):_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:"gl-display-flex gl-align-items-flex-end gl-mt-4 duo-chat-message-feedback"},[(_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)])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/experimental/duo/chat/components/duo_chat_message/insert_code_snippet_element.js

@@ -0,0 +1,20 @@
+import { createButton } from './buttons_utils';
+
+class InsertCodeSnippetElement extends HTMLElement {
+  constructor(codeBlock) {
+    super();
+    const btn = createButton();
+    const wrapper = codeBlock;
+    this.appendChild(btn);
+    btn.addEventListener('click', () => {
+      if (wrapper) {
+        wrapper.dispatchEvent(new CustomEvent('insert-code-snippet', {
+          bubbles: true,
+          cancelable: true
+        }));
+      }
+    });
+  }
+}
+
+export { InsertCodeSnippetElement };

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

@@ -108,6 +108,14 @@ var script = {
       required: false,
       default: true
     },
+    /**
+     * Whether the insertCode feature should be available.
+     */
+    enableCodeInsertion: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     /**
      * Array of predefined prompts to display in the chat to start a conversation.
      */
@@ -391,6 +399,9 @@ var script = {
       } else {
         this.setPromptAndFocus(`${command.name} `);
       }
+    },
+    onInsertCodeSnippet(e) {
+      this.$emit('insert-code-snippet', e);
     }
   },
   i18n,
@@ -405,7 +416,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-bg-gray-10 gl-border-t",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-rounded-base! !gl-absolute gl-bottom-2 gl-right-2",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-rounded-base! !gl-absolute gl-bottom-2 gl-right-2",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,1231938732)},[_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-translate-y-n100 gl-list-style-none gl-pl-0 gl-w-full gl-shadow-md !gl-absolute",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-font-style-italic gl-text-right gl-pl-3 gl-text-gray-500"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",staticClass:"gl-h-full! gl-py-4! gl-bg-transparent! gl-rounded-top-right-none gl-rounded-bottom-right-none gl-shadow-none! gl-absolute",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-line-height-20 gl-mt-3 gl-text-gray-400",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:{"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-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-bg-gray-10 gl-border-t",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-rounded-base! !gl-absolute gl-bottom-2 gl-right-2",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-rounded-base! !gl-absolute gl-bottom-2 gl-right-2",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,1231938732)},[_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-translate-y-n100 gl-list-style-none gl-pl-0 gl-w-full gl-shadow-md !gl-absolute",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-font-style-italic gl-text-right gl-pl-3 gl-text-gray-500"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",staticClass:"gl-h-full! gl-py-4! gl-bg-transparent! gl-rounded-top-right-none gl-rounded-bottom-right-none gl-shadow-none! gl-absolute",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-line-height-20 gl-mt-3 gl-text-gray-400",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,4 +1,5 @@
 import { setStoryTimeout } from '../../../../utils/test_utils';
+import { InsertCodeSnippetElement } from './components/duo_chat_message/insert_code_snippet_element';
 import { DOCUMENTATION_SOURCE_TYPES, MESSAGE_MODEL_ROLES, CHAT_RESET_MESSAGE, CHAT_CLEAN_MESSAGE } from './constants';
 
 const MOCK_SOURCES = [{
@@ -19,7 +20,7 @@ const MOCK_SOURCES = [{
 const MOCK_RESPONSE_MESSAGE = {
   id: '123',
   content: 'Here is a simple JavaScript function to sum two numbers:\n\n  ```js\n  function sum(a, b) {\n    return a + b;\n  }\n  ```\n  \n  To use it:\n  \n  ```js\n  const result = sum(5, 3); // result = 8\n  ```\n  \n  This function takes two number parameters, a and b. It returns the sum of adding them together.\n',
-  contentHtml: '<p data-sourcepos="1:1-1:56" dir="auto">Here is a simple JavaScript function to sum two numbers:</p>\n<div class="gl-relative markdown-code-block js-markdown-code">\n<pre data-sourcepos="3:1-7:3" data-canonical-lang="js" class="code highlight js-syntax-highlight language-javascript" lang="javascript" v-pre="true"><code><span id="LC1" class="line" lang="javascript"><span class="kd">function</span> <span class="nf">sum</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span></span>\n<span id="LC2" class="line" lang="javascript">  <span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span></span>\n<span id="LC3" class="line" lang="javascript"><span class="p">}</span></span></code></pre>\n<copy-code></copy-code>\n</div>\n<p data-sourcepos="9:1-9:10" dir="auto">To use it:</p>\n<div class="gl-relative markdown-code-block js-markdown-code">\n<pre data-sourcepos="11:1-13:3" data-canonical-lang="js" class="code highlight js-syntax-highlight language-javascript" lang="javascript" v-pre="true"><code><span id="LC1" class="line" lang="javascript"><span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nf">sum</span><span class="p">(</span><span class="mi">5</span><span class="p">,</span> <span class="mi">3</span><span class="p">);</span> <span class="c1">// result = 8</span></span></code></pre>\n<copy-code></copy-code>\n</div>\n<p data-sourcepos="15:1-15:95" dir="auto">This function takes two number parameters, a and b. It returns the sum of adding them together.</p>',
+  contentHtml: '<p data-sourcepos="1:1-1:56" dir="auto">Here is a simple JavaScript function to sum two numbers:</p>\n<div class="gl-relative markdown-code-block js-markdown-code">\n<pre data-sourcepos="3:1-7:3" data-canonical-lang="js" class="code highlight js-syntax-highlight language-javascript" lang="javascript" v-pre="true"><code><span id="LC1" class="line" lang="javascript"><span class="kd">function</span> <span class="nf">sum</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span></span>\n<span id="LC2" class="line" lang="javascript">  <span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span></span>\n<span id="LC3" class="line" lang="javascript"><span class="p">}</span></span></code></pre>\n<copy-code></copy-code>\n<insert-code-snippet></insert-code-snippet>\n</div>\n<p data-sourcepos="9:1-9:10" dir="auto">To use it:</p>\n<div class="gl-relative markdown-code-block js-markdown-code">\n<pre data-sourcepos="11:1-13:3" data-canonical-lang="js" class="code highlight js-syntax-highlight language-javascript" lang="javascript" v-pre="true"><code><span id="LC1" class="line" lang="javascript"><span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nf">sum</span><span class="p">(</span><span class="mi">5</span><span class="p">,</span> <span class="mi">3</span><span class="p">);</span> <span class="c1">// result = 8</span></span></code></pre>\n<copy-code></copy-code>\n</div>\n<p data-sourcepos="15:1-15:95" dir="auto">This function takes two number parameters, a and b. It returns the sum of adding them together.</p>',
   role: MESSAGE_MODEL_ROLES.assistant,
   extras: {
     sources: MOCK_SOURCES
@@ -128,6 +129,7 @@ const renderGFM = el => {
   const codeBlock = el.querySelectorAll('.markdown-code-block');
   codeBlock.forEach(block => {
     block === null || block === void 0 ? void 0 : block.classList.add('gl-markdown', 'gl-compact-markdown');
+    block === null || block === void 0 ? void 0 : block.appendChild(new InsertCodeSnippetElement(block));
   });
 };
 const SLASH_COMMANDS = [{

package/dist/directives/outside/outside.js

@@ -1,19 +1,32 @@
 /**
- * Map<HTMLElement, Function>
+ * Map<HTMLElement, { callback: Function, eventTypes: Array<string> }>
  */
 const callbacks = new Map();
+const click = 'click';
+const focusin = 'focusin';
+const supportedEventTypes = [click, focusin];
+const defaultEventType = click;
 
 /**
- * Is a global listener already set up?
+ * A Set to keep track of currently active event types.
+ * This ensures that event listeners are only added for the event types that are in use.
+ *
+ * @type {Set<string>}
  */
-let listening = false;
+const activeEventTypes = new Set();
 let lastMousedown = null;
 const globalListener = event => {
-  callbacks.forEach((callback, element) => {
-    const originalEvent = lastMousedown || event;
+  callbacks.forEach((_ref, element) => {
+    let {
+      callback,
+      eventTypes
+    } = _ref;
+    const originalEvent = event.type === click ? lastMousedown || event : event;
     if (
     // Ignore events that aren't targeted outside the element
-    element.contains(originalEvent.target)) {
+    element.contains(originalEvent.target) ||
+    // Ignore events that aren't the specified types for this element
+    !eventTypes.includes(event.type)) {
       return;
     }
     try {
@@ -25,7 +38,9 @@ const globalListener = event => {
       }
     }
   });
-  lastMousedown = null;
+  if (event.type === click) {
+    lastMousedown = null;
+  }
 };
 
 // We need to listen for mouse events because text selection fires click event only when selection ends.
@@ -34,39 +49,72 @@ const globalListener = event => {
 const onMousedown = event => {
   lastMousedown = event;
 };
-const startListening = () => {
-  if (listening) {
-    return;
-  }
-  document.addEventListener('mousedown', onMousedown);
-  // Added { capture: true } to prevent the behavior discussed in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1686#note_412545027
-  // Ensures the event listener handles the event in the capturing phase, avoiding issues encountered previously.
-  // Cannot be tested with Jest or Cypress, but can be tested with Playwright in the future: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/4272#note_1947425384
-  document.addEventListener('click', globalListener, {
-    capture: true
+const startListening = eventTypes => {
+  eventTypes.forEach(eventType => {
+    if (!activeEventTypes.has(eventType)) {
+      // Listening to mousedown events, ensures that a text selection doesn't trigger the
+      // GlOutsideDirective 'click' callback if the selection started within the target element.
+      if (eventType === click) {
+        document.addEventListener('mousedown', onMousedown);
+      }
+
+      // Added { capture: true } to all event types to prevent the behavior discussed in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1686#note_412545027
+      // Ensures the event listener handles the event in the capturing phase, avoiding issues encountered previously.
+      // Cannot be tested with Jest or Cypress, but can be tested with Playwright in the future: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/4272#note_1947425384
+      document.addEventListener(eventType, globalListener, {
+        capture: true
+      });
+      activeEventTypes.add(eventType);
+    }
   });
-  listening = true;
   lastMousedown = null;
 };
-const stopListening = () => {
-  if (!listening) {
-    return;
+const stopListening = eventTypesToUnbind => {
+  eventTypesToUnbind.forEach(eventType => {
+    if (activeEventTypes.has(eventType)) {
+      if ([...callbacks.values()].every(_ref2 => {
+        let {
+          eventTypes
+        } = _ref2;
+        return !eventTypes.includes(eventType);
+      })) {
+        document.removeEventListener(eventType, globalListener);
+        activeEventTypes.delete(eventType);
+      }
+    }
+  });
+  if (eventTypesToUnbind.includes(click) && !activeEventTypes.has(click)) {
+    document.removeEventListener('mousedown', onMousedown);
   }
-  document.removeEventListener('mousedown', onMousedown);
-  document.removeEventListener('click', globalListener);
-  listening = false;
 };
-const bind = (el, _ref) => {
+function parseBinding(_ref3) {
   let {
+    arg,
     value,
-    arg = 'click'
-  } = _ref;
-  if (typeof value !== 'function') {
-    throw new Error(`[GlOutsideDirective] Value must be a function; got ${typeof value}!`);
-  }
-  if (arg !== 'click') {
-    throw new Error(`[GlOutsideDirective] Cannot bind ${arg} events; only click events are currently supported!`);
+    modifiers
+  } = _ref3;
+  const modifiersList = Object.keys(modifiers);
+  if (process.env.NODE_ENV !== 'production') {
+    if (typeof value !== 'function') {
+      throw new Error(`[GlOutsideDirective] Value must be a function; got ${typeof value}!`);
+    }
+    if (typeof arg !== 'undefined') {
+      throw new Error(`[GlOutsideDirective] Arguments are not supported. Consider using modifiers instead.`);
+    }
+    if (modifiersList.some(modifier => !supportedEventTypes.includes(modifier))) {
+      throw new Error(`[GlOutsideDirective] Cannot bind ${modifiersList} events; supported event types are: ${supportedEventTypes.join(', ')}`);
+    }
   }
+  return {
+    callback: value,
+    eventTypes: modifiersList.length > 0 ? modifiersList : [defaultEventType]
+  };
+}
+const bind = (el, bindings) => {
+  const {
+    callback,
+    eventTypes
+  } = parseBinding(bindings);
   if (callbacks.has(el)) {
     // This element is already bound. This is possible if two components, which
     // share the same root node, (i.e., one is a higher-order component
@@ -79,15 +127,17 @@ const bind = (el, _ref) => {
     // element.
     return;
   }
-  if (!listening) {
-    startListening();
-  }
-  callbacks.set(el, value);
+  callbacks.set(el, {
+    callback,
+    eventTypes
+  });
+  startListening(eventTypes);
 };
 const unbind = el => {
-  callbacks.delete(el);
-  if (callbacks.size === 0) {
-    stopListening();
+  const entry = callbacks.get(el);
+  if (entry) {
+    callbacks.delete(el);
+    stopListening(entry.eventTypes);
   }
 };
 const OutsideDirective = {