@gitlab/duo-ui 8.9.1 → 8.10.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [8.10.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.9.1...v8.10.0) (2025-04-02)
+
+
+### Features
+
+* Emit event on Duo message "Copy" ([7c1b460](https://gitlab.com/gitlab-org/duo-ui/commit/7c1b46079ed97593a5342f7896bb5359b5482fad))
+
 ## [8.9.1](https://gitlab.com/gitlab-org/duo-ui/compare/v8.9.0...v8.9.1) (2025-03-31)
 
 

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

@@ -58,6 +58,9 @@ var script = {
     onCopyCodeSnippet(e) {
       this.$emit('copy-code-snippet', e);
     },
+    onCopyMessage(e) {
+      this.$emit('copy-message', e);
+    },
     onGetContextItemContent(e) {
       this.$emit('get-context-item-content', e);
     }
@@ -69,7 +72,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,"copy-code-snippet":_vm.onCopyCodeSnippet,"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,"copy-message":_vm.onCopyMessage,"get-context-item-content":_vm.onGetContextItemContent}})})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,16 +1,7 @@
 import { createButton } from './buttons_utils';
 import { createTooltip } from './tooltips_utils';
+import { checkClipboardPermissions } from './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();

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

@@ -8,7 +8,7 @@ import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_s
 import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
 import { CopyCodeElement } from './copy_code_element';
 import { InsertCodeSnippetElement } from './insert_code_snippet_element';
-import { concatUntilEmpty } from './utils';
+import { concatUntilEmpty, checkClipboardPermissions } from './utils';
 import { DUO_CODE_SCRIM_BOTTOM_CLASS, DUO_CODE_SCRIM_OFFSET, DUO_CODE_SCRIM_TOP_CLASS } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -255,8 +255,17 @@ var script = {
       }
     },
     async copyMessage() {
-      if (navigator.clipboard && !this.copied) {
-        await navigator.clipboard.writeText(this.message.content);
+      const hasPermissions = await checkClipboardPermissions();
+      if (!this.copied) {
+        if (hasPermissions) {
+          await navigator.clipboard.writeText(this.message.content);
+        } else {
+          this.$emit('copy-message', {
+            detail: {
+              message: this.message.content
+            }
+          });
+        }
         this.copied = true;
       }
     }

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

@@ -4,5 +4,18 @@ const concatUntilEmpty = arr => {
   if (end < 0) end = arr.length;
   return arr.slice(0, end).join('');
 };
+const checkClipboardPermissions = async () => {
+  try {
+    if (!navigator.clipboard || !navigator.permissions) {
+      return false;
+    }
+    const permission = await navigator.permissions.query({
+      name: 'clipboard-write'
+    });
+    return permission.state === 'granted';
+  } catch (error) {
+    return false;
+  }
+};
 
-export { concatUntilEmpty };
+export { checkClipboardPermissions, concatUntilEmpty };

package/dist/components/chat/components/duo_chat_threads/duo_chat_threads.js

@@ -75,7 +75,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-p-5"},[_c('div',{staticClass:"gl-bg-gray-50 gl-text-gray-500 gl-p-4 gl-mb-5 gl-rounded-base",attrs:{"data-testid":"chat-threads-info-banner"}},[_c('p',{staticClass:"gl-m-0 gl-flex"},[_c('gl-icon',{staticClass:"gl-mr-4",attrs:{"name":"bulb"}}),_vm._v(_vm._s(_vm.$options.i18n.CHAT_HISTORY_INFO)+"\n    ")],1)]),_vm._v(" "),(_vm.hasThreads)?_vm._l((_vm.groupedThreads),function(threadsForDate,date){return _c('div',{key:date},[_c('div',{staticClass:"gl-font-bold gl-neutral-900 gl-my-4",attrs:{"data-testid":"chat-threads-date-header"}},[_vm._v("\n        "+_vm._s(_vm.formattedLocalDate(date))+"\n      ")]),_vm._v(" "),_c('div',_vm._l((threadsForDate),function(thread){return _c('div',{key:thread.id,staticClass:"gl-flex gl-align-center"},[_c('gl-button',{staticClass:"hover:gl-bg-gray-50 gl-text-ellipsis !gl-text-default justify-content-start gl-overflow-hidden gl-rounded-base gl-rounded-base gl-p-4 gl-w-full gl-whitespace-nowrap",attrs:{"data-testid":"chat-threads-thread-box","category":"tertiary","aria-label":_vm.sprintf(_vm.$options.i18n.OPEN_CHAT_LABEL, { title: thread.title || 'Untitled Chat' })},on:{"click":function($event){return _vm.onSelectThread(thread)}}},[_vm._v("\n            "+_vm._s(thread.title || 'Untitled Chat')+"\n          ")]),_vm._v(" "),(_vm.threads.length > 1)?_c('gl-button',{staticClass:"gl-neutral-900 !gl-p-4",attrs:{"data-testid":"chat-threads-delete-thread-button","icon":"remove","category":"tertiary","size":"small","aria-label":_vm.$options.i18n.THREAD_DELETE_LABEL},on:{"click":function($event){return _vm.$emit('delete-thread', thread.id)}}}):_vm._e()],1)}),0)])}):_c('duo-chat-threads-empty')],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-p-5"},[_c('div',{staticClass:"gl-bg-gray-50 gl-text-gray-500 gl-p-4 gl-mb-5 gl-rounded-base",attrs:{"data-testid":"chat-threads-info-banner"}},[_c('p',{staticClass:"gl-m-0 gl-flex"},[_c('gl-icon',{staticClass:"gl-mr-4",attrs:{"name":"bulb"}}),_vm._v(_vm._s(_vm.$options.i18n.CHAT_HISTORY_INFO)+"\n    ")],1)]),_vm._v(" "),(_vm.hasThreads)?_vm._l((_vm.groupedThreads),function(threadsForDate,date){return _c('div',{key:date},[_c('div',{staticClass:"gl-font-bold gl-neutral-900 gl-my-4",attrs:{"data-testid":"chat-threads-date-header"}},[_vm._v("\n        "+_vm._s(_vm.formattedLocalDate(date))+"\n      ")]),_vm._v(" "),_c('div',_vm._l((threadsForDate),function(thread){return _c('div',{key:thread.id,staticClass:"gl-flex gl-align-center"},[_c('gl-button',{staticClass:"hover:gl-bg-gray-50 gl-text-ellipsis !gl-text-default justify-content-start gl-overflow-hidden gl-rounded-base gl-rounded-base gl-p-4 gl-w-full gl-whitespace-nowrap",attrs:{"data-testid":"chat-threads-thread-box","category":"tertiary","aria-label":_vm.sprintf(_vm.$options.i18n.OPEN_CHAT_LABEL, { title: thread.title || 'Untitled Chat' })},on:{"click":function($event){return _vm.onSelectThread(thread)}}},[_vm._v("\n            "+_vm._s(thread.title || 'Untitled Chat')+"\n          ")]),_vm._v(" "),_c('gl-button',{staticClass:"gl-neutral-900 !gl-p-4",attrs:{"data-testid":"chat-threads-delete-thread-button","icon":"remove","category":"tertiary","size":"small","aria-label":_vm.$options.i18n.THREAD_DELETE_LABEL},on:{"click":function($event){return _vm.$emit('delete-thread', thread.id)}}})],1)}),0)])}):_c('duo-chat-threads-empty')],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/chat/duo_chat.js

@@ -562,6 +562,13 @@ var script = {
        */
       this.$emit('copy-code-snippet', e);
     },
+    onCopyMessage(e) {
+      /**
+       * Emit copy-message event that clients can use to copy chat message content.
+       * @param {*} event An event containing code string in the "detail.message" field.
+       */
+      this.$emit('copy-message', e);
+    },
     onGetContextItemContent(event) {
       /**
        * Emit get-context-item-content event that tells clients to load the full file content for a selected context item.
@@ -605,7 +612,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
   },attrs:{"width":_vm.shouldRenderResizable ? _vm.dimensions.width : null,"height":_vm.shouldRenderResizable ? _vm.dimensions.height : null,"max-width":_vm.shouldRenderResizable ? _vm.dimensions.maxWidth : null,"max-height":_vm.shouldRenderResizable ? _vm.dimensions.maxHeight : null,"min-width":_vm.shouldRenderResizable ? _vm.dimensions.minWidth : null,"left":_vm.shouldRenderResizable ? _vm.dimensions.left : null,"top":_vm.shouldRenderResizable ? _vm.dimensions.top : null,"fit-parent":true,"min-height":_vm.shouldRenderResizable ? _vm.dimensions.minHeight : null,"active":_vm.shouldRenderResizable ? ['l', 't', 'lt'] : null},on:{"resize:end":_vm.updateSize}},[(!_vm.isHidden)?_c('aside',{staticClass:"markdown-code-block duo-chat gl-bottom-0 gl-max-h-full gl-flex gl-flex-col",class:{
       'resizable-content': _vm.shouldRenderResizable,
       'duo-chat-drawer': !_vm.shouldRenderResizable,
-    },attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"}},[(_vm.showHeader)?_c('duo-chat-header',{ref:"header",attrs:{"active-thread-id":_vm.activeThreadId,"title":_vm.isMultithreaded && _vm.currentView === 'list' ? _vm.$options.i18n.CHAT_HISTORY_TITLE : _vm.title,"subtitle":_vm.activeThreadTitleForView,"error":_vm.error,"is-multithreaded":_vm.isMultithreaded,"current-view":_vm.currentView,"should-render-resizable":_vm.shouldRenderResizable,"badge-type":_vm.isMultithreaded ? null : _vm.badgeType},on:{"go-back":_vm.onGoBack,"new-chat":_vm.onNewChat,"close":_vm.hideChat},scopedSlots:_vm._u([{key:"subheader",fn:function(){return [_vm._t("subheader")]},proxy:true}],null,true)}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-overflow-y-auto gl-flex gl-flex-col gl-flex-1 gl-flex-grow gl-bg-inherit gl-overscroll-contain",attrs:{"data-testid":"chat-history"},on:{"scroll":_vm.handleScrollingThrottled}},[(_vm.shouldShowThreadList)?_c('duo-chat-threads',{attrs:{"threads":_vm.threadList,"preferred-locale":_vm.preferredLocale},on:{"new-chat":_vm.onNewChat,"select-thread":_vm.onSelectThread,"delete-thread":_vm.onDeleteThread,"close":_vm.hideChat}}):_c('transition-group',{staticClass:"duo-chat-history gl-p-5 gl-mt-auto",attrs:{"mode":"out-in","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 && !_vm.shouldShowThreadList)?_c('footer',{staticClass:"duo-chat-drawer-footer gl-border-0 gl-bg-default gl-pb-3 gl-shrink-0 gl-relative gl-z-2",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()],1):_vm._e()])};
+    },attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"}},[(_vm.showHeader)?_c('duo-chat-header',{ref:"header",attrs:{"active-thread-id":_vm.activeThreadId,"title":_vm.isMultithreaded && _vm.currentView === 'list' ? _vm.$options.i18n.CHAT_HISTORY_TITLE : _vm.title,"subtitle":_vm.activeThreadTitleForView,"error":_vm.error,"is-multithreaded":_vm.isMultithreaded,"current-view":_vm.currentView,"should-render-resizable":_vm.shouldRenderResizable,"badge-type":_vm.isMultithreaded ? null : _vm.badgeType},on:{"go-back":_vm.onGoBack,"new-chat":_vm.onNewChat,"close":_vm.hideChat},scopedSlots:_vm._u([{key:"subheader",fn:function(){return [_vm._t("subheader")]},proxy:true}],null,true)}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-overflow-y-auto gl-flex gl-flex-col gl-flex-1 gl-flex-grow gl-bg-inherit gl-overscroll-contain",attrs:{"data-testid":"chat-history"},on:{"scroll":_vm.handleScrollingThrottled}},[(_vm.shouldShowThreadList)?_c('duo-chat-threads',{attrs:{"threads":_vm.threadList,"preferred-locale":_vm.preferredLocale},on:{"new-chat":_vm.onNewChat,"select-thread":_vm.onSelectThread,"delete-thread":_vm.onDeleteThread,"close":_vm.hideChat}}):_c('transition-group',{staticClass:"duo-chat-history gl-p-5 gl-mt-auto",attrs:{"mode":"out-in","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,"copy-message":_vm.onCopyMessage,"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 && !_vm.shouldShowThreadList)?_c('footer',{staticClass:"duo-chat-drawer-footer gl-border-0 gl-bg-default gl-pb-3 gl-shrink-0 gl-relative gl-z-2",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()],1):_vm._e()])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

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

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

@@ -60,6 +60,9 @@ export default {
     onCopyCodeSnippet(e) {
       this.$emit('copy-code-snippet', e);
     },
+    onCopyMessage(e) {
+      this.$emit('copy-message', e);
+    },
     onGetContextItemContent(e) {
       this.$emit('get-context-item-content', e);
     },
@@ -88,6 +91,7 @@ export default {
       @track-feedback="onTrackFeedback"
       @insert-code-snippet="onInsertCodeSnippet"
       @copy-code-snippet="onCopyCodeSnippet"
+      @copy-message="onCopyMessage"
       @get-context-item-content="onGetContextItemContent"
     />
   </div>

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

@@ -1,14 +1,6 @@
 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;
-  }
-};
+import { checkClipboardPermissions } from './utils';
 
 export class CopyCodeElement extends HTMLElement {
   constructor() {

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

@@ -20,7 +20,7 @@ import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_s
 import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
 import { CopyCodeElement } from './copy_code_element';
 import { InsertCodeSnippetElement } from './insert_code_snippet_element';
-import { concatUntilEmpty } from './utils';
+import { checkClipboardPermissions, concatUntilEmpty } from './utils';
 import {
   DUO_CODE_SCRIM_BOTTOM_CLASS,
   DUO_CODE_SCRIM_OFFSET,
@@ -295,8 +295,18 @@ export default {
       }
     },
     async copyMessage() {
-      if (navigator.clipboard && !this.copied) {
-        await navigator.clipboard.writeText(this.message.content);
+      const hasPermissions = await checkClipboardPermissions();
+
+      if (!this.copied) {
+        if (hasPermissions) {
+          await navigator.clipboard.writeText(this.message.content);
+        } else {
+          this.$emit('copy-message', {
+            detail: {
+              message: this.message.content,
+            },
+          });
+        }
         this.copied = true;
       }
     },

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

@@ -7,3 +7,16 @@ export const concatUntilEmpty = (arr) => {
 
   return arr.slice(0, end).join('');
 };
+
+export const checkClipboardPermissions = async () => {
+  try {
+    if (!navigator.clipboard || !navigator.permissions) {
+      return false;
+    }
+
+    const permission = await navigator.permissions.query({ name: 'clipboard-write' });
+    return permission.state === 'granted';
+  } catch (error) {
+    return false;
+  }
+};

package/src/components/chat/components/duo_chat_threads/duo_chat_threads.vue

@@ -124,7 +124,6 @@ export default {
             </gl-button>
 
             <gl-button
-              v-if="threads.length > 1"
               data-testid="chat-threads-delete-thread-button"
               icon="remove"
               category="tertiary"

package/src/components/chat/duo_chat.vue

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