@gitlab/duo-ui 8.1.0 → 8.2.0

package/CHANGELOG.md

@@ -1,3 +1,80 @@
+# [8.2.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.1.0...v8.2.0) (2025-02-04)
+
+
+### Features
+
+* Call clipboard API when env has permissions ([7be69e7](https://gitlab.com/gitlab-org/duo-ui/commit/7be69e752d955301e86bde3dafc1afb7db23248d))
+
+# [8.2.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.1.0...v8.2.0) (2025-02-04)
+
+
+### Features
+
+* Call clipboard API when env has permissions ([7be69e7](https://gitlab.com/gitlab-org/duo-ui/commit/7be69e752d955301e86bde3dafc1afb7db23248d))
+
+# [8.2.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.1.0...v8.2.0) (2025-02-04)
+
+
+### Features
+
+* Call clipboard API when env has permissions ([7be69e7](https://gitlab.com/gitlab-org/duo-ui/commit/7be69e752d955301e86bde3dafc1afb7db23248d))
+
+# [8.2.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.1.0...v8.2.0) (2025-02-04)
+
+
+### Features
+
+* Call clipboard API when env has permissions ([7be69e7](https://gitlab.com/gitlab-org/duo-ui/commit/7be69e752d955301e86bde3dafc1afb7db23248d))
+
+# [8.2.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.1.0...v8.2.0) (2025-02-04)
+
+
+### Features
+
+* Call clipboard API when env has permissions ([7be69e7](https://gitlab.com/gitlab-org/duo-ui/commit/7be69e752d955301e86bde3dafc1afb7db23248d))
+
+# [8.2.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.1.0...v8.2.0) (2025-02-04)
+
+
+### Features
+
+* Call clipboard API when env has permissions ([7be69e7](https://gitlab.com/gitlab-org/duo-ui/commit/7be69e752d955301e86bde3dafc1afb7db23248d))
+
+# [8.2.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.1.0...v8.2.0) (2025-02-04)
+
+
+### Features
+
+* Call clipboard API when env has permissions ([7be69e7](https://gitlab.com/gitlab-org/duo-ui/commit/7be69e752d955301e86bde3dafc1afb7db23248d))
+
+# [8.2.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.1.0...v8.2.0) (2025-02-04)
+
+
+### Features
+
+* Call clipboard API when env has permissions ([7be69e7](https://gitlab.com/gitlab-org/duo-ui/commit/7be69e752d955301e86bde3dafc1afb7db23248d))
+
+# [8.2.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.1.0...v8.2.0) (2025-02-03)
+
+
+### Features
+
+* Call clipboard API when env has permissions ([7be69e7](https://gitlab.com/gitlab-org/duo-ui/commit/7be69e752d955301e86bde3dafc1afb7db23248d))
+
+# [8.2.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.1.0...v8.2.0) (2025-02-03)
+
+
+### Features
+
+* Call clipboard API when env has permissions ([7be69e7](https://gitlab.com/gitlab-org/duo-ui/commit/7be69e752d955301e86bde3dafc1afb7db23248d))
+
+# [8.2.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.1.0...v8.2.0) (2025-02-03)
+
+
+### Features
+
+* Call clipboard API when env has permissions ([7be69e7](https://gitlab.com/gitlab-org/duo-ui/commit/7be69e752d955301e86bde3dafc1afb7db23248d))
+
 # [8.1.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.0.0...v8.1.0) (2025-01-30)
 
 

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

@@ -55,6 +55,9 @@ var script = {
     onInsertCodeSnippet(e) {
       this.$emit('insert-code-snippet', e);
     },
+    onCopyCodeSnippet(e) {
+      this.$emit('copy-code-snippet', e);
+    },
     onGetContextItemContent(e) {
       this.$emit('get-context-item-content', e);
     }
@@ -66,7 +69,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',{class:['gl-flex gl-flex-col gl-justify-end', { 'insert-code-hidden': !_vm.enableCodeInsertion }]},[(_vm.showDelimiter)?_c('div',{staticClass:"gl-my-5 gl-flex gl-items-center gl-gap-4 gl-text-gray-500",attrs:{"data-testid":"conversation-delimiter"}},[_c('hr',{staticClass:"gl-grow"}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.$options.i18n.CONVERSATION_NEW_CHAT))]),_vm._v(" "),_c('hr',{staticClass:"gl-grow"})]):_vm._e(),_vm._v(" "),_vm._l((_vm.messages),function(msg,index){return _c('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,"get-context-item-content":_vm.onGetContextItemContent}})})],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:['gl-flex gl-flex-col gl-justify-end', { 'insert-code-hidden': !_vm.enableCodeInsertion }]},[(_vm.showDelimiter)?_c('div',{staticClass:"gl-my-5 gl-flex gl-items-center gl-gap-4 gl-text-gray-500",attrs:{"data-testid":"conversation-delimiter"}},[_c('hr',{staticClass:"gl-grow"}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.$options.i18n.CONVERSATION_NEW_CHAT))]),_vm._v(" "),_c('hr',{staticClass:"gl-grow"})]):_vm._e(),_vm._v(" "),_vm._l((_vm.messages),function(msg,index){return _c('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,"copy-code-snippet":_vm.onCopyCodeSnippet,"get-context-item-content":_vm.onGetContextItemContent}})})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,6 +1,16 @@
 import { createButton } from './buttons_utils';
 import { createTooltip } from './tooltips_utils';
 
+const checkClipboardPermissions = async () => {
+  try {
+    const permission = await navigator.permissions.query({
+      name: 'clipboard-write'
+    });
+    return permission.state === 'granted';
+  } catch (error) {
+    return false;
+  }
+};
 class CopyCodeElement extends HTMLElement {
   constructor() {
     super();
@@ -15,7 +25,22 @@ class CopyCodeElement extends HTMLElement {
     const [codeElement] = wrapper.getElementsByTagName('code');
     btn.addEventListener('click', async () => {
       const textToCopy = codeElement.innerText;
-      await navigator.clipboard.writeText(textToCopy);
+      const hasClipboardPermission = await checkClipboardPermissions();
+      try {
+        codeElement.dispatchEvent(new CustomEvent('copy-code-snippet', {
+          bubbles: true,
+          cancelable: true,
+          detail: {
+            code: textToCopy
+          }
+        }));
+        if (hasClipboardPermission) {
+          await navigator.clipboard.writeText(textToCopy);
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn('Failed to copy snippet:', e);
+      }
     });
   }
 }

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

@@ -211,6 +211,9 @@ var script = {
     onInsertCodeSnippet(e) {
       this.$emit('insert-code-snippet', e);
     },
+    onCopyCodeSnippet(e) {
+      this.$emit('copy-code-snippet', e);
+    },
     onGetContextItemContent(contextItem) {
       this.$emit('get-context-item-content', {
         messageId: this.message.id,
@@ -251,7 +254,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
       _vm.isAssistantMessage,
     'gl-bg-subtle': _vm.isAssistantMessage && !_vm.error,
     'duo-chat-message-with-error gl-bg-red-50': _vm.error,
-  },on:{"insert-code-snippet":_vm.onInsertCodeSnippet}},[(_vm.error)?_c('gl-icon',{staticClass:"error-icon gl-border gl-mr-3 gl-shrink-0 gl-rounded-full gl-border-red-500 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.displaySelectedContextItems && _vm.isAssistantMessage)?_c('duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"assistant"},on:{"get-content":_vm.onGetContextItemContent}}):_vm._e(),_vm._v(" "),(_vm.error)?_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.renderedError),expression:"renderedError",arg:_vm.$options.safeHtmlConfigExtension}],ref:"error-message"}):_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:"duo-chat-message-feedback gl-mt-4 gl-flex gl-items-end"},[(_vm.isChunkAndNotCancelled)?_c('gl-animated-loader-icon',{attrs:{"is-on":true}}):_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),_vm._v(" "),(_vm.displaySelectedContextItems && _vm.isUserMessage)?_c('duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"user"},on:{"get-content":_vm.onGetContextItemContent}}):_vm._e()],1)],1)};
+  },on:{"insert-code-snippet":_vm.onInsertCodeSnippet,"copy-code-snippet":_vm.onCopyCodeSnippet}},[(_vm.error)?_c('gl-icon',{staticClass:"error-icon gl-border gl-mr-3 gl-shrink-0 gl-rounded-full gl-border-red-500 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.displaySelectedContextItems && _vm.isAssistantMessage)?_c('duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"assistant"},on:{"get-content":_vm.onGetContextItemContent}}):_vm._e(),_vm._v(" "),(_vm.error)?_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.renderedError),expression:"renderedError",arg:_vm.$options.safeHtmlConfigExtension}],ref:"error-message"}):_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:"duo-chat-message-feedback gl-mt-4 gl-flex gl-items-end"},[(_vm.isChunkAndNotCancelled)?_c('gl-animated-loader-icon',{attrs:{"is-on":true}}):_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),_vm._v(" "),(_vm.displaySelectedContextItems && _vm.isUserMessage)?_c('duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"user"},on:{"get-content":_vm.onGetContextItemContent}}):_vm._e()],1)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/chat/duo_chat.js

@@ -468,6 +468,13 @@ var script = {
        */
       this.$emit('insert-code-snippet', e);
     },
+    onCopyCodeSnippet(e) {
+      /**
+       * Emit copy-code-snippet event that clients can use to interact with a suggested code.
+       * @param {*} event An event containing code string in the "detail.code" field.
+       */
+      this.$emit('copy-code-snippet', e);
+    },
     onGetContextItemContent(event) {
       /**
        * Emit get-context-item-content event that tells clients to load the full file content for a selected context item.
@@ -503,7 +510,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('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,"get-context-item-content":_vm.onGetContextItemContent}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('div',{key:"empty-state-message",staticClass:"duo-chat-message gl-rounded-bl-none gl-border-1 gl-border-solid gl-border-gray-50 gl-bg-gray-10 gl-p-4 gl-leading-20 gl-text-gray-900 gl-break-anywhere",attrs:{"data-testid":"gl-duo-chat-empty-state"}},[(_vm.emptyStateTitle)?_c('p',{staticClass:"gl-m-0",attrs:{"data-testid":"gl-duo-chat-empty-state-title"}},[_vm._v("\n              "+_vm._s(_vm.emptyStateTitle)+"\n            ")]):_vm._e(),_vm._v(" "),_c('duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})],1)]:_vm._e(),_vm._v(" "),(_vm.isLoading)?_c('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-0 gl-bg-default gl-pb-3",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-full",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-full",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,608602988)},[_c('div',{staticClass:"duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-align-top",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-subtle"},[_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)])],1),_vm._v(" "),_c('p',{staticClass:"gl-mb-0 gl-mt-3 gl-px-4 gl-text-sm gl-text-secondary"},[_vm._v("\n        "+_vm._s(_vm.$options.i18n.CHAT_DISCLAMER)+"\n      ")])],1):_vm._e()]):_vm._e()])};
+          } ],attrs:{"tag":"section","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('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,"copy-code-snippet":_vm.onCopyCodeSnippet,"get-context-item-content":_vm.onGetContextItemContent}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('div',{key:"empty-state-message",staticClass:"duo-chat-message gl-rounded-bl-none gl-border-1 gl-border-solid gl-border-gray-50 gl-bg-gray-10 gl-p-4 gl-leading-20 gl-text-gray-900 gl-break-anywhere",attrs:{"data-testid":"gl-duo-chat-empty-state"}},[(_vm.emptyStateTitle)?_c('p',{staticClass:"gl-m-0",attrs:{"data-testid":"gl-duo-chat-empty-state-title"}},[_vm._v("\n              "+_vm._s(_vm.emptyStateTitle)+"\n            ")]):_vm._e(),_vm._v(" "),_c('duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})],1)]:_vm._e(),_vm._v(" "),(_vm.isLoading)?_c('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-0 gl-bg-default gl-pb-3",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-full",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-full",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,608602988)},[_c('div',{staticClass:"duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-align-top",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-subtle"},[_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)])],1),_vm._v(" "),_c('p',{staticClass:"gl-mb-0 gl-mt-3 gl-px-4 gl-text-sm gl-text-secondary"},[_vm._v("\n        "+_vm._s(_vm.$options.i18n.CHAT_DISCLAMER)+"\n      ")])],1):_vm._e()]):_vm._e()])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/duo-ui",
-  "version": "8.1.0",
+  "version": "8.2.0",
   "description": "Duo UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/chat/components/duo_chat_conversation/duo_chat_conversation.vue

@@ -57,6 +57,9 @@ export default {
     onInsertCodeSnippet(e) {
       this.$emit('insert-code-snippet', e);
     },
+    onCopyCodeSnippet(e) {
+      this.$emit('copy-code-snippet', e);
+    },
     onGetContextItemContent(e) {
       this.$emit('get-context-item-content', e);
     },
@@ -84,6 +87,7 @@ export default {
       :is-cancelled="canceledRequestIds.includes(msg.requestId)"
       @track-feedback="onTrackFeedback"
       @insert-code-snippet="onInsertCodeSnippet"
+      @copy-code-snippet="onCopyCodeSnippet"
       @get-context-item-content="onGetContextItemContent"
     />
   </div>

package/src/components/chat/components/duo_chat_message/copy_code_element.js

@@ -1,6 +1,15 @@
 import { createButton } from './buttons_utils';
 import { createTooltip } from './tooltips_utils';
 
+const checkClipboardPermissions = async () => {
+  try {
+    const permission = await navigator.permissions.query({ name: 'clipboard-write' });
+    return permission.state === 'granted';
+  } catch (error) {
+    return false;
+  }
+};
+
 export class CopyCodeElement extends HTMLElement {
   constructor() {
     super();
@@ -19,7 +28,26 @@ export class CopyCodeElement extends HTMLElement {
 
     btn.addEventListener('click', async () => {
       const textToCopy = codeElement.innerText;
-      await navigator.clipboard.writeText(textToCopy);
+      const hasClipboardPermission = await checkClipboardPermissions();
+
+      try {
+        codeElement.dispatchEvent(
+          new CustomEvent('copy-code-snippet', {
+            bubbles: true,
+            cancelable: true,
+            detail: {
+              code: textToCopy,
+            },
+          })
+        );
+
+        if (hasClipboardPermission) {
+          await navigator.clipboard.writeText(textToCopy);
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn('Failed to copy snippet:', e);
+      }
     });
   }
 }

package/src/components/chat/components/duo_chat_message/duo_chat_message.vue

@@ -245,6 +245,9 @@ export default {
     onInsertCodeSnippet(e) {
       this.$emit('insert-code-snippet', e);
     },
+    onCopyCodeSnippet(e) {
+      this.$emit('copy-code-snippet', e);
+    },
     onGetContextItemContent(contextItem) {
       this.$emit('get-context-item-content', {
         messageId: this.message.id,
@@ -289,6 +292,7 @@ export default {
       'duo-chat-message-with-error gl-bg-red-50': error,
     }"
     @insert-code-snippet="onInsertCodeSnippet"
+    @copy-code-snippet="onCopyCodeSnippet"
   >
     <gl-icon
       v-if="error"

package/src/components/chat/duo_chat.vue

@@ -529,6 +529,13 @@ export default {
        */
       this.$emit('insert-code-snippet', e);
     },
+    onCopyCodeSnippet(e) {
+      /**
+       * Emit copy-code-snippet event that clients can use to interact with a suggested code.
+       * @param {*} event An event containing code string in the "detail.code" field.
+       */
+      this.$emit('copy-code-snippet', e);
+    },
     onGetContextItemContent(event) {
       /**
        * Emit get-context-item-content event that tells clients to load the full file content for a selected context item.
@@ -645,6 +652,7 @@ export default {
             :show-delimiter="index > 0"
             @track-feedback="onTrackFeedback"
             @insert-code-snippet="onInsertCodeSnippet"
+            @copy-code-snippet="onCopyCodeSnippet"
             @get-context-item-content="onGetContextItemContent"
           />
           <template v-if="!hasMessages && !isLoading">