@gitlab/duo-ui 14.3.0 → 15.0.1

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [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)
+
+
+### Bug Fixes
+
+* **DuoChat:** Remove new chat button ([5e9944f](https://gitlab.com/gitlab-org/duo-ui/commit/5e9944f5dfbb6963f27152636c727908bf0228d8))
+
+
+### BREAKING CHANGES
+
+* **DuoChat:** Removes New Chat button for web header as the
+button is now toggles from the navigation siderail
+
 # [14.3.0](https://gitlab.com/gitlab-org/duo-ui/compare/v14.2.0...v14.3.0) (2025-11-20)
 
 

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,14 +1,12 @@
 import Vue from 'vue';
 import { GlToast, GlAlert, GlAvatar, GlButton, GlDisclosureDropdown, GlSafeHtmlDirective, GlTooltipDirective } from '@gitlab/ui';
 import { translate, sprintf } from '../../../../utils/i18n';
-import DuoChatHeaderAgentItem from './duo_chat_header_agent_item/duo_chat_header_agent_item';
+import { copyToClipboard } from '../utils';
 import { VIEW_TYPES } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const i18n = {
   CHAT_CLOSE_LABEL: translate('WebDuoChat.closeChatHeaderLabel', 'Close chat'),
-  CHAT_NEW_LABEL: translate('WebDuoChat.chatNewLabel', 'New chat'),
-  CHAT_NEW_TOOLTIP: translate('WebDuoChat.chatNewToolTip', 'New chat'),
   CHAT_BACK_TO_CHAT_TOOLTIP: translate('WebDuoChat.chatBackToChatToolTip', 'Back to chat'),
   CHAT_TITLE: translate('WebDuoChat.chatTitle', 'GitLab Duo Chat'),
   CHAT_DROPDOWN_MORE_OPTIONS: translate('WebDuoChat.chatDropdownMoreOptions', 'More options'),
@@ -23,8 +21,7 @@ var script = {
     GlAlert,
     GlAvatar,
     GlButton,
-    GlDisclosureDropdown,
-    DuoChatHeaderAgentItem
+    GlDisclosureDropdown
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
@@ -144,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');
@@ -158,11 +155,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('header',{staticClass:"gl-shrink-0 gl-p-0",attrs:{"data-testid":"chat-header"}},[(!_vm.showStudioHeader)?_c('div',{staticClass:"gl-flex gl-w-full gl-items-center gl-px-4 gl-py-3",attrs:{"data-testid":"chat-top-header"}},[(_vm.subtitle)?_c('h4',{staticClass:"gl-mb-0 gl-max-w-17/20 gl-flex-1 gl-shrink-0 gl-overflow-hidden gl-truncate gl-text-ellipsis gl-whitespace-nowrap gl-pr-3 gl-text-sm gl-font-normal gl-text-subtle",attrs:{"data-testid":"chat-subtitle"}},[_vm._v("\n      "+_vm._s(_vm.subtitle)+"\n    ")]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-ml-auto gl-flex gl-gap-3"},[(_vm.sessionId)?_c('gl-disclosure-dropdown',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:(_vm.showSessionDropdownTooltip),expression:"showSessionDropdownTooltip"}],attrs:{"icon":"ellipsis_v","category":"tertiary","text-sr-only":"","size":"small","toggle-text":_vm.$options.i18n.CHAT_DROPDOWN_MORE_OPTIONS,"items":_vm.sessionIdItems,"no-caret":""},on:{"shown":_vm.showSessionDropdown,"hidden":_vm.hideSessionDropdown}}):_vm._e(),_vm._v(" "),_c('gl-button',{attrs:{"category":"tertiary","variant":"default","icon":"close","size":"small","data-testid":"chat-close-button","aria-label":_vm.$options.i18n.CHAT_CLOSE_LABEL},on:{"click":function($event){return _vm.$emit('close')}}})],1)]):_vm._e(),_vm._v(" "),(_vm.showSubheader)?_c('div',{staticClass:"drawer-title gl-flex gl-items-center gl-justify-start gl-gap-4 gl-px-4 gl-py-3",class:{ 'gl-border-t': !_vm.showStudioHeader, 'gl-border-b': _vm.showStudioHeader },attrs:{"data-testid":"chat-subheader"}},[_c('div',{staticClass:"gl-flex gl-grow gl-gap-3"},[_c('gl-avatar',{staticClass:"gl-shrink-0",attrs:{"size":32,"entity-name":_vm.title,"shape":"circle"}}),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-flex-col gl-justify-center"},[_c('h3',{staticClass:"gl-my-0 gl-line-clamp-1 gl-text-[0.875rem] gl-text-default"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),(_vm.agentHandler)?_c('p',{staticClass:"gl-my-0 gl-text-[0.75rem] gl-text-subtle"},[_vm._v("\n          "+_vm._s(_vm.agentHandler)+"\n        ")]):_vm._e()])],1),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-gap-3"},[(
-          _vm.isMultithreaded && (_vm.activeThreadId || _vm.currentView === _vm.VIEW_TYPES.LIST || _vm.hasManyAgents)
-        )?[(_vm.hasManyAgents)?_c('gl-disclosure-dropdown',{attrs:{"title":_vm.$options.i18n.CHAT_NEW_TOOLTIP,"toggle-text":_vm.$options.i18n.CHAT_NEW_TOOLTIP,"items":_vm.agents,"data-testid":"chat-new-button","variant":"confirm","category":"tertiary","size":"small","icon":"duo-chat-new","text-sr-only":"","aria-label":_vm.$options.i18n.CHAT_NEW_LABEL,"no-caret":""},on:{"action":_vm.startNewChat},scopedSlots:_vm._u([{key:"list-item",fn:function(ref){
-        var item = ref.item;
-return [_c('duo-chat-header-agent-item',{attrs:{"agent":item}})]}}],null,false,1406306174)}):_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":_vm.$options.i18n.CHAT_NEW_TOOLTIP,"data-testid":"chat-new-button","variant":"confirm","category":"tertiary","size":"small","icon":"duo-chat-new","aria-label":_vm.$options.i18n.CHAT_NEW_LABEL},on:{"click":_vm.startNewChat}})]:_vm._e(),_vm._v(" "),(_vm.isMultithreaded && _vm.activeThreadId && _vm.currentView === _vm.VIEW_TYPES.LIST)?_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":_vm.$options.i18n.CHAT_BACK_TO_CHAT_TOOLTIP,"data-testid":"go-back-to-chat-button","category":"tertiary","size":"small","icon":"go-back","aria-label":_vm.$options.i18n.CHAT_BACK_TO_CHAT_TOOLTIP},on:{"click":function($event){return _vm.$emit('go-back-to-chat')}}}):_vm._e()],2)]):_vm._e(),_vm._v(" "),_vm._t("subheader"),_vm._v(" "),(_vm.error)?_c('gl-alert',{key:"error",staticClass:"!gl-pl-9",attrs:{"dismissible":false,"variant":"danger","role":"alert","data-testid":"chat-error"}},[_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.error),expression:"error"}]})]):_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('header',{staticClass:"gl-shrink-0 gl-p-0",attrs:{"data-testid":"chat-header"}},[(!_vm.showStudioHeader)?_c('div',{staticClass:"gl-flex gl-w-full gl-items-center gl-px-4 gl-py-3",attrs:{"data-testid":"chat-top-header"}},[(_vm.subtitle)?_c('h4',{staticClass:"gl-mb-0 gl-max-w-17/20 gl-flex-1 gl-shrink-0 gl-overflow-hidden gl-truncate gl-text-ellipsis gl-whitespace-nowrap gl-pr-3 gl-text-sm gl-font-normal gl-text-subtle",attrs:{"data-testid":"chat-subtitle"}},[_vm._v("\n      "+_vm._s(_vm.subtitle)+"\n    ")]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-ml-auto gl-flex gl-gap-3"},[(_vm.sessionId)?_c('gl-disclosure-dropdown',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:(_vm.showSessionDropdownTooltip),expression:"showSessionDropdownTooltip"}],attrs:{"icon":"ellipsis_v","category":"tertiary","text-sr-only":"","size":"small","toggle-text":_vm.$options.i18n.CHAT_DROPDOWN_MORE_OPTIONS,"items":_vm.sessionIdItems,"no-caret":""},on:{"shown":_vm.showSessionDropdown,"hidden":_vm.hideSessionDropdown}}):_vm._e(),_vm._v(" "),_c('gl-button',{attrs:{"category":"tertiary","variant":"default","icon":"close","size":"small","data-testid":"chat-close-button","aria-label":_vm.$options.i18n.CHAT_CLOSE_LABEL},on:{"click":function($event){return _vm.$emit('close')}}})],1)]):_vm._e(),_vm._v(" "),(_vm.showSubheader)?_c('div',{staticClass:"drawer-title gl-flex gl-items-center gl-justify-start gl-gap-4 gl-px-4 gl-py-3",class:{ 'gl-border-t': !_vm.showStudioHeader, 'gl-border-b': _vm.showStudioHeader },attrs:{"data-testid":"chat-subheader"}},[_c('div',{staticClass:"gl-flex gl-grow gl-gap-3"},[_c('gl-avatar',{staticClass:"gl-shrink-0",attrs:{"size":32,"entity-name":_vm.title,"shape":"circle"}}),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-flex-col gl-justify-center"},[_c('h3',{staticClass:"gl-my-0 gl-line-clamp-1 gl-text-[0.875rem] gl-text-default"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),(_vm.agentHandler)?_c('p',{staticClass:"gl-my-0 gl-text-[0.75rem] gl-text-subtle"},[_vm._v("\n          "+_vm._s(_vm.agentHandler)+"\n        ")]):_vm._e()])],1),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-gap-3"},[(_vm.isMultithreaded && _vm.activeThreadId && _vm.currentView === _vm.VIEW_TYPES.LIST)?_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":_vm.$options.i18n.CHAT_BACK_TO_CHAT_TOOLTIP,"data-testid":"go-back-to-chat-button","category":"tertiary","size":"small","icon":"go-back","aria-label":_vm.$options.i18n.CHAT_BACK_TO_CHAT_TOOLTIP},on:{"click":function($event){return _vm.$emit('go-back-to-chat')}}}):_vm._e()],1)]):_vm._e(),_vm._v(" "),_vm._t("subheader"),_vm._v(" "),(_vm.error)?_c('gl-alert',{key:"error",staticClass:"!gl-pl-9",attrs:{"dismissible":false,"variant":"danger","role":"alert","data-testid":"chat-error"}},[_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.error),expression:"error"}]})]):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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": "14.3.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,13 +10,11 @@ import {
   GlDisclosureDropdown,
 } from '@gitlab/ui';
 import { sprintf, translate } from '../../../../utils/i18n';
-import DuoChatHeaderAgentItem from './duo_chat_header_agent_item/duo_chat_header_agent_item.vue';
+import { copyToClipboard } from '../utils';
 import { VIEW_TYPES } from './constants';
 
 export const i18n = {
   CHAT_CLOSE_LABEL: translate('WebDuoChat.closeChatHeaderLabel', 'Close chat'),
-  CHAT_NEW_LABEL: translate('WebDuoChat.chatNewLabel', 'New chat'),
-  CHAT_NEW_TOOLTIP: translate('WebDuoChat.chatNewToolTip', 'New chat'),
   CHAT_BACK_TO_CHAT_TOOLTIP: translate('WebDuoChat.chatBackToChatToolTip', 'Back to chat'),
   CHAT_TITLE: translate('WebDuoChat.chatTitle', 'GitLab Duo Chat'),
   CHAT_DROPDOWN_MORE_OPTIONS: translate('WebDuoChat.chatDropdownMoreOptions', 'More options'),
@@ -41,7 +39,6 @@ export default {
     GlAvatar,
     GlButton,
     GlDisclosureDropdown,
-    DuoChatHeaderAgentItem,
   },
   directives: {
     SafeHtml,
@@ -161,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');
@@ -228,43 +226,6 @@ export default {
       </div>
 
       <div class="gl-flex gl-gap-3">
-        <template
-          v-if="
-            isMultithreaded && (activeThreadId || currentView === VIEW_TYPES.LIST || hasManyAgents)
-          "
-        >
-          <gl-disclosure-dropdown
-            v-if="hasManyAgents"
-            :title="$options.i18n.CHAT_NEW_TOOLTIP"
-            :toggle-text="$options.i18n.CHAT_NEW_TOOLTIP"
-            :items="agents"
-            data-testid="chat-new-button"
-            variant="confirm"
-            category="tertiary"
-            size="small"
-            icon="duo-chat-new"
-            text-sr-only
-            :aria-label="$options.i18n.CHAT_NEW_LABEL"
-            no-caret
-            @action="startNewChat"
-          >
-            <template #list-item="{ item }">
-              <duo-chat-header-agent-item :agent="item" />
-            </template>
-          </gl-disclosure-dropdown>
-          <gl-button
-            v-else
-            v-gl-tooltip
-            :title="$options.i18n.CHAT_NEW_TOOLTIP"
-            data-testid="chat-new-button"
-            variant="confirm"
-            category="tertiary"
-            size="small"
-            icon="duo-chat-new"
-            :aria-label="$options.i18n.CHAT_NEW_LABEL"
-            @click="startNewChat"
-          />
-        </template>
         <gl-button
           v-if="isMultithreaded && activeThreadId && currentView === VIEW_TYPES.LIST"
           v-gl-tooltip

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/translations.js

@@ -194,8 +194,6 @@ export default {
   'WebDuoChat.chatEmptyStateTitle': 'I am GitLab Duo Chat, your personal AI-powered assistant.',
   'WebDuoChat.chatHistoryTitle': 'Chat history',
   'WebDuoChat.chatModelPlaceholder': 'GitLab Duo Chat',
-  'WebDuoChat.chatNewLabel': 'New chat',
-  'WebDuoChat.chatNewToolTip': 'New chat',
   'WebDuoChat.chatPromptPlaceholderDefault': "Let's work through this together...",
   'WebDuoChat.chatPromptPlaceholderWithCommands': 'Type /help to learn more',
   'WebDuoChat.chatSubmitLabel': 'Send chat message.',

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;
-  }
-};