@gitlab/duo-ui 15.0.0 → 15.0.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [15.0.1](https://gitlab.com/gitlab-org/duo-ui/compare/v15.0.0...v15.0.1) (2025-11-25)
+
+
+### Bug Fixes
+
+* Use a generic clipboard copy action ([b1eb7a3](https://gitlab.com/gitlab-org/duo-ui/commit/b1eb7a3b5d56c42346a569bbc14740aeb8a73fb4))
+
 # [15.0.0](https://gitlab.com/gitlab-org/duo-ui/compare/v14.3.0...v15.0.0) (2025-11-21)
 
 

package/dist/components/chat/components/duo_chat_header/duo_chat_header.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import { GlToast, GlAlert, GlButton, GlExperimentBadge, GlDisclosureDropdown, GlSafeHtmlDirective, GlTooltipDirective } from '@gitlab/ui';
 import { translate, sprintf } from '../../../../utils/i18n';
+import { copyToClipboard } from '../utils';
 import { VIEW_TYPES } from './constants';
 import DuoChatHeaderAgentItem from './duo_chat_header_agent_item/duo_chat_header_agent_item';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -133,7 +134,7 @@ var script = {
     },
     async copySessionIdToClipboard() {
       try {
-        await navigator.clipboard.writeText(this.sessionId);
+        await copyToClipboard(this.sessionId, this.$el);
         this.$toast.show('Session ID copied to clipboard');
       } catch {
         this.$toast.show('Could not copy session ID');

package/dist/components/chat/components/duo_chat_header/web_duo_chat_header.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import { GlToast, GlAlert, GlAvatar, GlButton, GlDisclosureDropdown, GlSafeHtmlDirective, GlTooltipDirective } from '@gitlab/ui';
 import { translate, sprintf } from '../../../../utils/i18n';
+import { copyToClipboard } from '../utils';
 import { VIEW_TYPES } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -140,7 +141,7 @@ var script = {
     },
     async copySessionIdToClipboard() {
       try {
-        await navigator.clipboard.writeText(this.sessionId);
+        await copyToClipboard(this.sessionId, this.$el);
         this.$toast.show('Session ID copied to clipboard');
       } catch {
         this.$toast.show('Could not copy session ID');

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

@@ -1,6 +1,6 @@
+import { copyToClipboard } from '../utils';
 import { createButton } from './buttons_utils';
 import { createTooltip } from './tooltips_utils';
-import { checkClipboardPermissions } from './utils';
 
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
@@ -46,21 +46,11 @@ class CopyCodeElement extends HTMLElement {
       // not present in the DOM.
       const codeElement = this.getCodeElement();
       const textToCopy = codeElement.innerText;
-      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) {
+        await copyToClipboard(textToCopy, codeElement);
+      } catch (error) {
         // eslint-disable-next-line no-console
-        console.warn('Failed to copy snippet:', e);
+        console.warn('Failed to copy to clipboard:', error);
       }
     });
   }

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

@@ -5,10 +5,10 @@ import DuoChatContextItemSelections from '../duo_chat_context/duo_chat_context_i
 import { SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED, MESSAGE_MODEL_ROLES } from '../../constants';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources';
 import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
+import { concatUntilEmpty, copyToClipboard } from '../utils';
 import MessageFeedback from './message_feedback';
 import { CopyCodeElement } from './copy_code_element';
 import { InsertCodeSnippetElement } from './insert_code_snippet_element';
-import { concatUntilEmpty, checkClipboardPermissions } from './utils';
 import { DUO_CODE_SCRIM_BOTTOM_CLASS, DUO_CODE_SCRIM_OFFSET, DUO_CODE_SCRIM_TOP_CLASS } from './constants';
 import MessageMap from './message_types/message_map';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -170,7 +170,7 @@ var script = {
       });
     },
     shouldShowCopyAction() {
-      return Boolean(navigator.clipboard && !this.isChunk && this.isAssistantMessage);
+      return Boolean(!this.isChunk && this.isAssistantMessage);
     },
     shouldShowFeedbackLink() {
       return this.withFeedback && this.isNotChunkOrCancelled && this.isAssistantMessage;
@@ -273,18 +273,17 @@ var script = {
       }
     },
     async copyMessage() {
-      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
-            }
-          });
-        }
+      try {
+        await copyToClipboard(this.message.content, this.$el);
+        this.$emit('copy-message', {
+          detail: {
+            message: this.message.content
+          }
+        });
         this.copied = true;
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.warn('Failed to copy message:', error);
       }
     },
     onOpenFilePath(e) {

package/dist/components/chat/components/duo_chat_message_tool_approval/components/pre_block.js

@@ -1,6 +1,6 @@
 import { GlTooltipDirective, GlButton } from '@gitlab/ui';
 import { translate } from '../../../../../utils/i18n';
-import { checkClipboardPermissions } from '../../duo_chat_message/utils';
+import { copyToClipboard } from '../../utils';
 import { highlightElement } from '../services/highlight';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -39,26 +39,7 @@ var script = {
     async copyToClipboard() {
       try {
         const textToCopy = this.$refs.codeElement.textContent;
-        const hasClipboardPermission = await checkClipboardPermissions();
-        const event = new CustomEvent('copy-code-snippet', {
-          bubbles: true,
-          detail: {
-            code: textToCopy
-          }
-        });
-        // Emit custom event for VS Code and other environments
-        // This bubbles up to parent components that handle clipboard operations
-        this.$emit('copy-code-snippet', {
-          detail: {
-            code: textToCopy
-          }
-        });
-        this.$el.dispatchEvent(event);
-
-        // If we have clipboard permission, also copy directly
-        if (hasClipboardPermission) {
-          await navigator.clipboard.writeText(textToCopy);
-        }
+        await copyToClipboard(textToCopy, this.$el);
         this.$emit('copied', this.title);
         setTimeout(() => {
           this.$refs.copyToClipboardButton.$el.blur();

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

@@ -0,0 +1,56 @@
+const concatUntilEmpty = arr => {
+  if (!arr) return '';
+  let end = arr.findIndex(el => !el);
+  if (end < 0) end = arr.length;
+  return arr.slice(0, end).join('');
+};
+
+/**
+ * Programmatically copies a text string to the clipboard. Attempts to copy in both secure and non-secure contexts as well as VSCode.
+ *
+ * Accepts a container element. This helps ensure the text can get copied to the clipboard correctly in non-secure
+ * environments, the container should be active (such as a button in a modal) to ensure the content can be copied.
+ *
+ * @param {String} text - Text to copy
+ * @param {HTMLElement} el - element that emits event for VSCode, and contains the fallback textarea.
+ */
+const copyToClipboard = (textToCopy, el) => {
+  // Fist, emit a custom event for VS Code extensions and other environments
+  // This bubbles up to parent components that handle clipboard operations
+  el.dispatchEvent(new CustomEvent('copy-code-snippet', {
+    bubbles: true,
+    cancelable: true,
+    detail: {
+      code: textToCopy
+    }
+  }));
+
+  // Second, for modern browsers try a simple clipboard.writeText (works on https and localhost)
+  if (navigator.clipboard && window.isSecureContext) {
+    return navigator.clipboard.writeText(textToCopy);
+  }
+
+  // Third, try execCommand to copy from a dynamically created invisible textarea (for http and older browsers)
+  const textarea = document.createElement('textarea');
+  textarea.value = textToCopy;
+  textarea.style.position = 'absolute';
+  textarea.style.left = '-9999px'; // eslint-disable-line @gitlab/require-i18n-strings
+  textarea.style.top = '0';
+  textarea.setAttribute('readonly', ''); // prevent keyboard popup on mobile
+
+  // textarea must be in document to be selectable, but we add it to the button so it works in modals
+  el.appendChild(textarea);
+  textarea.select(); // for Safari
+  textarea.setSelectionRange(0, textarea.value.length); // for mobile devices
+
+  try {
+    const done = document.execCommand('copy');
+    el.removeChild(textarea);
+    return done ? Promise.resolve() : Promise.reject(new Error('Copy command failed'));
+  } catch (err) {
+    el.removeChild(textarea);
+    return Promise.reject(err);
+  }
+};
+
+export { concatUntilEmpty, copyToClipboard };

package/package.json

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

package/src/components/chat/components/duo_chat_header/duo_chat_header.vue

@@ -10,6 +10,7 @@ import {
   GlDisclosureDropdown,
 } from '@gitlab/ui';
 import { sprintf, translate } from '../../../../utils/i18n';
+import { copyToClipboard } from '../utils';
 import { VIEW_TYPES } from './constants';
 import DuoChatHeaderAgentItem from './duo_chat_header_agent_item/duo_chat_header_agent_item.vue';
 
@@ -150,7 +151,8 @@ export default {
     },
     async copySessionIdToClipboard() {
       try {
-        await navigator.clipboard.writeText(this.sessionId);
+        await copyToClipboard(this.sessionId, this.$el);
+
         this.$toast.show('Session ID copied to clipboard');
       } catch {
         this.$toast.show('Could not copy session ID');

package/src/components/chat/components/duo_chat_header/web_duo_chat_header.vue

@@ -10,6 +10,7 @@ import {
   GlDisclosureDropdown,
 } from '@gitlab/ui';
 import { sprintf, translate } from '../../../../utils/i18n';
+import { copyToClipboard } from '../utils';
 import { VIEW_TYPES } from './constants';
 
 export const i18n = {
@@ -157,7 +158,8 @@ export default {
     },
     async copySessionIdToClipboard() {
       try {
-        await navigator.clipboard.writeText(this.sessionId);
+        await copyToClipboard(this.sessionId, this.$el);
+
         this.$toast.show('Session ID copied to clipboard');
       } catch {
         this.$toast.show('Could not copy session ID');

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

@@ -1,6 +1,6 @@
+import { copyToClipboard } from '../utils';
 import { createButton } from './buttons_utils';
 import { createTooltip } from './tooltips_utils';
-import { checkClipboardPermissions } from './utils';
 
 export class CopyCodeElement extends HTMLElement {
   constructor() {
@@ -23,25 +23,12 @@ export class CopyCodeElement extends HTMLElement {
       // not present in the DOM.
       const codeElement = this.getCodeElement();
       const textToCopy = codeElement.innerText;
-      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) {
+        await copyToClipboard(textToCopy, codeElement);
+      } catch (error) {
         // eslint-disable-next-line no-console
-        console.warn('Failed to copy snippet:', e);
+        console.warn('Failed to copy to clipboard:', error);
       }
     });
   }

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

@@ -15,10 +15,11 @@ import { MESSAGE_MODEL_ROLES, SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED } from '.
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources.vue';
 // eslint-disable-next-line no-restricted-imports
 import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
+import { copyToClipboard, concatUntilEmpty } from '../utils';
 import MessageFeedback from './message_feedback.vue';
 import { CopyCodeElement } from './copy_code_element';
 import { InsertCodeSnippetElement } from './insert_code_snippet_element';
-import { checkClipboardPermissions, concatUntilEmpty } from './utils';
+
 import {
   DUO_CODE_SCRIM_BOTTOM_CLASS,
   DUO_CODE_SCRIM_OFFSET,
@@ -197,7 +198,7 @@ export default {
       );
     },
     shouldShowCopyAction() {
-      return Boolean(navigator.clipboard && !this.isChunk && this.isAssistantMessage);
+      return Boolean(!this.isChunk && this.isAssistantMessage);
     },
     shouldShowFeedbackLink() {
       return this.withFeedback && this.isNotChunkOrCancelled && this.isAssistantMessage;
@@ -302,19 +303,18 @@ export default {
       }
     },
     async copyMessage() {
-      const hasPermissions = await checkClipboardPermissions();
+      try {
+        await copyToClipboard(this.message.content, this.$el);
 
-      if (!this.copied) {
-        if (hasPermissions) {
-          await navigator.clipboard.writeText(this.message.content);
-        } else {
-          this.$emit('copy-message', {
-            detail: {
-              message: this.message.content,
-            },
-          });
-        }
+        this.$emit('copy-message', {
+          detail: {
+            message: this.message.content,
+          },
+        });
         this.copied = true;
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.warn('Failed to copy message:', error);
       }
     },
     onOpenFilePath(e) {

package/src/components/chat/components/duo_chat_message_tool_approval/components/pre_block.vue

@@ -1,7 +1,7 @@
 <script>
 import { GlButton, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
 import { translate } from '../../../../../utils/i18n';
-import { checkClipboardPermissions } from '../../duo_chat_message/utils';
+import { copyToClipboard } from '../../utils';
 import { highlightElement } from '../services/highlight';
 
 export default {
@@ -41,27 +41,9 @@ export default {
     async copyToClipboard() {
       try {
         const textToCopy = this.$refs.codeElement.textContent;
-        const hasClipboardPermission = await checkClipboardPermissions();
 
-        const event = new CustomEvent('copy-code-snippet', {
-          bubbles: true,
-          detail: {
-            code: textToCopy,
-          },
-        });
-        // Emit custom event for VS Code and other environments
-        // This bubbles up to parent components that handle clipboard operations
-        this.$emit('copy-code-snippet', {
-          detail: {
-            code: textToCopy,
-          },
-        });
-        this.$el.dispatchEvent(event);
+        await copyToClipboard(textToCopy, this.$el);
 
-        // If we have clipboard permission, also copy directly
-        if (hasClipboardPermission) {
-          await navigator.clipboard.writeText(textToCopy);
-        }
         this.$emit('copied', this.title);
         setTimeout(() => {
           this.$refs.copyToClipboardButton.$el.blur();

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

@@ -0,0 +1,60 @@
+export const concatUntilEmpty = (arr) => {
+  if (!arr) return '';
+
+  let end = arr.findIndex((el) => !el);
+
+  if (end < 0) end = arr.length;
+
+  return arr.slice(0, end).join('');
+};
+
+/**
+ * Programmatically copies a text string to the clipboard. Attempts to copy in both secure and non-secure contexts as well as VSCode.
+ *
+ * Accepts a container element. This helps ensure the text can get copied to the clipboard correctly in non-secure
+ * environments, the container should be active (such as a button in a modal) to ensure the content can be copied.
+ *
+ * @param {String} text - Text to copy
+ * @param {HTMLElement} el - element that emits event for VSCode, and contains the fallback textarea.
+ */
+export const copyToClipboard = (textToCopy, el) => {
+  // Fist, emit a custom event for VS Code extensions and other environments
+  // This bubbles up to parent components that handle clipboard operations
+  el.dispatchEvent(
+    new CustomEvent('copy-code-snippet', {
+      bubbles: true,
+      cancelable: true,
+      detail: {
+        code: textToCopy,
+      },
+    })
+  );
+
+  // Second, for modern browsers try a simple clipboard.writeText (works on https and localhost)
+  if (navigator.clipboard && window.isSecureContext) {
+    return navigator.clipboard.writeText(textToCopy);
+  }
+
+  // Third, try execCommand to copy from a dynamically created invisible textarea (for http and older browsers)
+  const textarea = document.createElement('textarea');
+  textarea.value = textToCopy;
+  textarea.style.position = 'absolute';
+  textarea.style.left = '-9999px'; // eslint-disable-line @gitlab/require-i18n-strings
+  textarea.style.top = '0';
+  textarea.setAttribute('readonly', ''); // prevent keyboard popup on mobile
+
+  // textarea must be in document to be selectable, but we add it to the button so it works in modals
+  el.appendChild(textarea);
+
+  textarea.select(); // for Safari
+  textarea.setSelectionRange(0, textarea.value.length); // for mobile devices
+
+  try {
+    const done = document.execCommand('copy');
+    el.removeChild(textarea);
+    return done ? Promise.resolve() : Promise.reject(new Error('Copy command failed'));
+  } catch (err) {
+    el.removeChild(textarea);
+    return Promise.reject(err);
+  }
+};

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

@@ -1,21 +0,0 @@
-const concatUntilEmpty = arr => {
-  if (!arr) return '';
-  let end = arr.findIndex(el => !el);
-  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 { checkClipboardPermissions, concatUntilEmpty };

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

@@ -1,22 +0,0 @@
-export const concatUntilEmpty = (arr) => {
-  if (!arr) return '';
-
-  let end = arr.findIndex((el) => !el);
-
-  if (end < 0) end = arr.length;
-
-  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;
-  }
-};