@gitlab/duo-ui 8.0.0 → 8.2.0

package/CHANGELOG.md

@@ -1,3 +1,129 @@
+# [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)
+
+
+### Features
+
+* **DuoChatMessage:** create tooltip on copy and insert button ([268823d](https://gitlab.com/gitlab-org/duo-ui/commit/268823dfe2dc2e20c570c2420d8567b44e8c19e2))
+
+# [8.1.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.0.0...v8.1.0) (2025-01-30)
+
+
+### Features
+
+* **DuoChatMessage:** create tooltip on copy and insert button ([268823d](https://gitlab.com/gitlab-org/duo-ui/commit/268823dfe2dc2e20c570c2420d8567b44e8c19e2))
+
+# [8.1.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.0.0...v8.1.0) (2025-01-29)
+
+
+### Features
+
+* **DuoChatMessage:** create tooltip on copy and insert button ([268823d](https://gitlab.com/gitlab-org/duo-ui/commit/268823dfe2dc2e20c570c2420d8567b44e8c19e2))
+
+# [8.1.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.0.0...v8.1.0) (2025-01-29)
+
+
+### Features
+
+* **DuoChatMessage:** create tooltip on copy and insert button ([268823d](https://gitlab.com/gitlab-org/duo-ui/commit/268823dfe2dc2e20c570c2420d8567b44e8c19e2))
+
+# [8.1.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.0.0...v8.1.0) (2025-01-28)
+
+
+### Features
+
+* **DuoChatMessage:** create tooltip on copy and insert button ([268823d](https://gitlab.com/gitlab-org/duo-ui/commit/268823dfe2dc2e20c570c2420d8567b44e8c19e2))
+
+# [8.1.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.0.0...v8.1.0) (2025-01-28)
+
+
+### Features
+
+* **DuoChatMessage:** create tooltip on copy and insert button ([268823d](https://gitlab.com/gitlab-org/duo-ui/commit/268823dfe2dc2e20c570c2420d8567b44e8c19e2))
+
+# [8.1.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.0.0...v8.1.0) (2025-01-28)
+
+
+### Features
+
+* **DuoChatMessage:** create tooltip on copy and insert button ([268823d](https://gitlab.com/gitlab-org/duo-ui/commit/268823dfe2dc2e20c570c2420d8567b44e8c19e2))
+
 # [8.0.0](https://gitlab.com/gitlab-org/duo-ui/compare/v7.0.0...v8.0.0) (2025-01-24)
 
 

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

@@ -7,6 +7,7 @@ const createButton = function () {
   button.type = 'button';
   button.classList.add('btn', 'btn-default', 'btn-md', 'gl-button', 'btn-default-secondary', 'btn-icon');
   button.dataset.title = title;
+  button.setAttribute('aria-label', title);
 
   // Create an SVG element with the correct namespace
   const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

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

@@ -1,14 +1,46 @@
 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();
+    this.initialize();
+  }
+  async initialize() {
     const btn = createButton('Copy to clipboard', 'copy-to-clipboard');
-    const wrapper = this.parentNode;
     this.appendChild(btn);
+    const tooltip = await createTooltip(btn, 'Copy to clipboard');
+    this.appendChild(tooltip);
+    const wrapper = this.parentNode;
+    const [codeElement] = wrapper.getElementsByTagName('code');
     btn.addEventListener('click', async () => {
-      const textToCopy = wrapper.innerText;
-      await navigator.clipboard.writeText(textToCopy);
+      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) {
+        // 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/components/duo_chat_message/insert_code_snippet_element.js

@@ -1,4 +1,5 @@
 import { createButton } from './buttons_utils';
+import { createTooltip } from './tooltips_utils';
 
 function _assertClassBrand(e, t, n) {
   if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n;
@@ -16,33 +17,48 @@ function _classPrivateFieldInitSpec(e, t, a) {
 function _classPrivateFieldSet2(s, a, r) {
   return s.set(_assertClassBrand(s, a), r), r;
 }
+function _toSetter(t, e, n) {
+  e || (e = []);
+  var r = e.length++;
+  return Object.defineProperty({}, "_", {
+    set: function (o) {
+      e[r] = o, t.apply(n, e);
+    }
+  });
+}
 
 const CODE_MARKDOWN_CLASS = 'js-markdown-code';
 var _actionButton = /*#__PURE__*/new WeakMap();
-var _codeBlock = /*#__PURE__*/new WeakMap();
+var _codeElement = /*#__PURE__*/new WeakMap();
 var _handleClick = /*#__PURE__*/new WeakMap();
 class InsertCodeSnippetElement extends HTMLElement {
   constructor(codeBlock) {
     super();
     _classPrivateFieldInitSpec(this, _actionButton, void 0);
-    _classPrivateFieldInitSpec(this, _codeBlock, void 0);
+    _classPrivateFieldInitSpec(this, _codeElement, void 0);
     _classPrivateFieldInitSpec(this, _handleClick, () => {
-      if (_classPrivateFieldGet2(_codeBlock, this)) {
-        _classPrivateFieldGet2(_codeBlock, this).dispatchEvent(new CustomEvent('insert-code-snippet', {
+      if (_classPrivateFieldGet2(_codeElement, this)) {
+        _classPrivateFieldGet2(_codeElement, this).dispatchEvent(new CustomEvent('insert-code-snippet', {
           bubbles: true,
           cancelable: true,
           detail: {
-            code: _classPrivateFieldGet2(_codeBlock, this).textContent.trim()
+            code: _classPrivateFieldGet2(_codeElement, this).textContent.trim()
           }
         }));
       }
     });
+    this.initialize(codeBlock);
+  }
+  async initialize(codeBlock) {
     _classPrivateFieldSet2(_actionButton, this, createButton());
 
     // we handle two possible cases here:
     // 1. we use constructor parameter if the element is created in Javscript and inserted in the document
     // 2. we find the wrapping element containing code if the element is received from the server
-    _classPrivateFieldSet2(_codeBlock, this, codeBlock !== null && codeBlock !== void 0 ? codeBlock : this.closest(`.${CODE_MARKDOWN_CLASS}`));
+    const wrapper = codeBlock !== null && codeBlock !== void 0 ? codeBlock : this.closest(`.${CODE_MARKDOWN_CLASS}`);
+    [_toSetter(_classPrivateFieldSet2, [_codeElement, this])._] = wrapper.getElementsByTagName('code');
+    const tooltip = await createTooltip(_classPrivateFieldGet2(_actionButton, this), 'Insert at cursor');
+    this.appendChild(tooltip);
   }
   connectedCallback() {
     this.appendChild(_classPrivateFieldGet2(_actionButton, this));

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

@@ -0,0 +1,61 @@
+import { computePosition, offset, shift, arrow } from '@floating-ui/dom';
+
+const createTooltip = async (element, text) => {
+  const tooltip = document.createElement('div');
+  tooltip.classList.add('gl-tooltip');
+  tooltip.setAttribute('role', 'tooltip');
+  tooltip.textContent = text;
+  const arrowElement = document.createElement('div');
+  arrowElement.classList.add('arrow');
+  tooltip.appendChild(arrowElement);
+  const updateTooltipPosition = async () => {
+    const {
+      x,
+      y,
+      placement,
+      middlewareData
+    } = await computePosition(element, tooltip, {
+      placement: 'top',
+      middleware: [offset(10), shift(), arrow({
+        element: arrowElement
+      })]
+    });
+    Object.assign(tooltip.style, {
+      left: `${x}px`,
+      top: `${y}px`
+    });
+
+    // style arrow element to position correctly
+    const {
+      x: arrowX,
+      y: arrowY
+    } = middlewareData.arrow;
+    const staticSide = {
+      top: 'bottom',
+      right: 'left',
+      bottom: 'top',
+      left: 'right'
+    }[placement.split('-')[0]];
+    Object.assign(arrowElement.style, {
+      left: arrowX != null ? `${arrowX}px` : '',
+      top: arrowY != null ? `${arrowY}px` : '',
+      right: '',
+      bottom: '',
+      [staticSide]: '-4px'
+    });
+  };
+  const showTooltip = () => {
+    tooltip.style.display = 'block';
+    updateTooltipPosition();
+  };
+  const hideTooltip = () => {
+    tooltip.style.display = '';
+  };
+  [['mouseenter', showTooltip], ['mouseleave', hideTooltip], ['focus', showTooltip], ['blur', hideTooltip]].forEach(_ref => {
+    let [event, listener] = _ref;
+    element.addEventListener(event, listener);
+  });
+  return tooltip;
+};
+
+export { createTooltip };

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/dist/components.css

@@ -1,2 +1,2 @@
-@charset "UTF-8";.resizable-content{--tw-shadow:0 0 2px var(--gl-shadow-color-default,#05050629),0 0 2px var(--gl-shadow-color-default,#05050629),0 4px 12px var(--gl-shadow-color-default,#05050629);--tw-shadow-colored:0 0 2px var(--tw-shadow-color),0 0 2px var(--tw-shadow-color),0 4px 12px var(--tw-shadow-color);background:var(--gl-background-color-default);border-radius:.5rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);display:flex;flex-direction:column;font-size:.875rem;height:100%;line-height:1rem;overflow-y:auto;width:100%}.resizable-component .resizable-l,.resizable-component .resizable-t{background-color:initial;border-radius:3px;transition:background-color .2s cubic-bezier(.22,.61,.36,1)}@media (prefers-reduced-motion){.resizable-component .resizable-l,.resizable-component .resizable-t{transition-delay:0ms!important;transition-duration:.01ms!important}}.resizable-component .resizable-l:hover,.resizable-component .resizable-t:hover{background-color:var(--gl-color-blue-200)}.resizable-component .resizable-t{height:4px!important;left:50%!important;top:2px!important;transform:translateX(-50%);width:95%!important}.resizable-component .resizable-l{height:95%!important;left:2px!important;top:50%!important;transform:translateY(-50%);width:4px!important}.duo-chat{z-index:999}.duo-chat .message-enter-active,.duo-chat .message-leave-active{transition:all .5s ease}.duo-chat .message-enter,.duo-chat .message-leave-to{opacity:0;transform:translateY(10px)}.duo-chat .duo-chat-loader.message-leave,.duo-chat .duo-chat-loader.message-leave-to{transition:none}.duo-chat .duo-chat-drawer-body-scrim-on-footer:before{background:linear-gradient(180deg,#fbfafd00,#fbfafd)}.duo-chat .duo-chat-drawer-body{overflow-y:auto}.duo-chat .duo-chat-drawer-body>*,.duo-chat .duo-chat-drawer-header{padding:1rem}.duo-chat-drawer{--tw-shadow:0 0 2px var(--gl-shadow-color-default,#05050629),0 0 2px var(--gl-shadow-color-default,#05050629),0 4px 12px var(--gl-shadow-color-default,#05050629);--tw-shadow-colored:0 0 2px var(--tw-shadow-color),0 0 2px var(--tw-shadow-color),0 4px 12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);display:flex;flex-direction:column;font-size:.875rem;height:100%;line-height:1rem;overflow-y:auto;position:fixed;right:0;transition-duration:.2s;transition-property:all;transition-timing-function:ease;width:100%}.duo-chat-drawer-header,.duo-chat-drawer-header-sticky{border-bottom:1px solid var(--gl-border-color-default)}.duo-chat-drawer-header-sticky{position:sticky;top:0}.duo-chat-drawer-body{background-color:inherit;flex-grow:1;overscroll-behavior:contain}.duo-chat-drawer-footer{border-top:1px solid var(--gl-border-color-default);padding:1rem}.duo-chat-drawer-footer-sticky{background-color:var(--white,#fff);bottom:0;position:sticky}.duo-chat-drawer-body-scrim-on-footer:before{--tw-translate-y:-100%;background:linear-gradient(180deg,#fbfafd00,#fbfafd);content:"";height:1rem;left:0;pointer-events:none;position:absolute;top:0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));width:100%}.duo-chat-history{scroll-behavior:smooth}.duo-chat-history.force-scroll-bar{min-height:calc(100% + 1rem)}.duo-chat-history *{overflow-anchor:none}.duo-chat-history .scroll-anchor{height:1px;margin-top:-1px;overflow-anchor:auto}.duo-chat-input{background:var(--gl-control-background-color-default);border-radius:1.25rem;box-shadow:inset 0 0 0 1px var(--gl-control-border-color-default);display:flex;flex-direction:column;max-height:240px;overflow:hidden}.duo-chat-input:focus-within{box-shadow:inset 0 0 0 1px var(--gl-control-border-color-focus),0 0 0 1px var(--gl-focus-ring-inner-color),0 0 0 3px var(--gl-focus-ring-outer-color);outline:none}@media (forced-colors:active){.duo-chat-input:focus-within{outline:2px solid LinkText}}.duo-chat-input .gl-form-textarea.form-control{border-radius:1.25rem;flex:1;max-height:240px;padding-right:40px;resize:none}.duo-chat-input:after{content:attr(data-value) " ";font-family:var(--default-regular-font,"GitLab Sans"),-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Ubuntu,Cantarell,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";padding:.75rem 40px .75rem .75rem;visibility:hidden;word-break:break-word}.duo-chat .duo-chat-suggestion-button{border-radius:1.25rem}.slash-commands{margin-top:-.25rem}.slash-commands .active-command{background-color:var(--gray-50,#ececef);border-radius:.25rem}.slash-commands .gl-dropdown-item button.dropdown-item{background-color:initial;font-size:.75rem;padding-left:.5rem;padding-right:.5rem}.slash-commands .gl-dropdown-item button.dropdown-item:hover{background-color:initial}.duo-chat-markdown{color:#28272d;font-family:var(--default-regular-font,"GitLab Sans"),-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Ubuntu,Cantarell,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5rem}.duo-chat-markdown :first-child{margin-top:0}.duo-chat-markdown .gl-h1,.duo-chat-markdown h1{font-size:clamp(1.5rem,.8333333333rem + 1.3888888889vw,1.875rem);margin-top:2rem}.duo-chat-markdown .gl-h1,.duo-chat-markdown .gl-h2,.duo-chat-markdown h1,.duo-chat-markdown h2{color:var(--gl-text-color-heading);font-weight:600;letter-spacing:-.01em;line-height:1.25;margin-bottom:1rem}.duo-chat-markdown .gl-h2,.duo-chat-markdown h2{font-size:clamp(1.3125rem,.8680555556rem + .9259259259vw,1.5625rem);margin-top:1.5rem}.duo-chat-markdown .gl-h3,.duo-chat-markdown h3{font-size:clamp(1.125rem,.9027777778rem + .462962963vw,1.25rem);margin-top:1.5rem}.duo-chat-markdown .gl-h3,.duo-chat-markdown .gl-h4,.duo-chat-markdown h3,.duo-chat-markdown h4{color:var(--gl-text-color-heading);font-weight:600;letter-spacing:inherit;line-height:1.25;margin-bottom:1rem}.duo-chat-markdown .gl-h4,.duo-chat-markdown h4{font-size:1rem;margin-top:1rem}.duo-chat-markdown .gl-h5,.duo-chat-markdown h5{font-size:.875rem}.duo-chat-markdown .gl-h5,.duo-chat-markdown .gl-h6,.duo-chat-markdown h5,.duo-chat-markdown h6{color:var(--gl-text-color-heading);font-weight:600;letter-spacing:inherit;line-height:1.25;margin-bottom:1rem;margin-top:1rem}.duo-chat-markdown .gl-h6,.duo-chat-markdown h6{font-size:.8125rem}.duo-chat-markdown .gl-paragraph,.duo-chat-markdown p{margin-bottom:0;margin-top:0}.duo-chat-markdown .gl-paragraph+.gl-paragraph,.duo-chat-markdown .gl-paragraph+p,.duo-chat-markdown p+.gl-paragraph,.duo-chat-markdown p+p{margin-top:1rem}.duo-chat-markdown .gl-paragraph.sm,.duo-chat-markdown .sm,.duo-chat-markdown p.sm{font-size:.875rem;line-height:1.25rem}.duo-chat-markdown .monospace,.duo-chat-markdown code{font-family:var(--default-mono-font,"GitLab Mono"),"JetBrains Mono","Menlo","DejaVu Sans Mono","Liberation Mono","Consolas","Ubuntu Mono","Courier New","andale mono","lucida console",monospace;font-variant-ligatures:none}.duo-chat-markdown blockquote{box-shadow:inset 4px 0 0 0 #dcdcde;color:var(--gray-700,#4c4b51);margin:.5rem 0;padding-bottom:.5rem;padding-left:1.5rem;padding-top:.5rem}.duo-chat-markdown .idiff{border-radius:.25rem;display:inline-flex;padding-left:.25rem;padding-right:.25rem}.duo-chat-markdown .deletion{background-color:var(--red-100,#fdd4cd)}.duo-chat-markdown .addition{background-color:var(--green-100,#c3e6cd)}.duo-chat-markdown code{background-color:var(--gray-50,#ececef);border-radius:.25rem;color:var(--gray-950,#18171d);padding:.125rem .25rem}.duo-chat-markdown pre{border-radius:.25rem;box-shadow:inset 0 0 0 1px #dcdcde;margin-bottom:2rem;margin-top:2rem;overflow:auto;padding:.5rem .75rem}.duo-chat-markdown pre code{background-color:var(--white,#fff);border-radius:0;color:var(--gray-900,#28272d);padding:0}.duo-chat-markdown .audio-container{display:inline-flex;flex-direction:column;width:100%}.duo-chat-markdown .audio-container audio{width:100%}.duo-chat-markdown .audio-container a{margin-top:.5rem}.duo-chat-markdown .audio-container a:before{-webkit-font-smoothing:antialiased;content:"📎";margin-right:.25rem;text-rendering:auto}.duo-chat-markdown table{margin-bottom:2rem;margin-top:2rem}.duo-chat-markdown table td,.duo-chat-markdown table th{box-shadow:inset 0 -1px 0 0 #dcdcde;padding:.75rem .5rem;vertical-align:top}.duo-chat-markdown table th{box-shadow:inset 0 1px 0 0 #dcdcde,inset 0 -1px 0 0 #dcdcde;font-weight:600}.duo-chat-markdown table thead{background-color:var(--gray-50,#ececef)}.duo-chat-markdown table tr:nth-child(2n){background-color:var(--gray-10,#fbfafd)}.duo-chat-compact-markdown{font-size:.875rem;line-height:1.25rem}.duo-chat-compact-markdown .gl-h1,.duo-chat-compact-markdown h1{color:var(--gl-text-color-heading);font-size:1.5rem;font-weight:600;letter-spacing:-.01em;line-height:1.25;margin-bottom:1rem;margin-top:2rem}.duo-chat-compact-markdown .gl-h2,.duo-chat-compact-markdown h2{color:var(--gl-text-color-heading);font-size:1.3125rem;font-weight:600;letter-spacing:-.01em;line-height:1.25;margin-bottom:1rem;margin-top:1.5rem}.duo-chat-compact-markdown .gl-h3,.duo-chat-compact-markdown h3{color:var(--gl-text-color-heading);font-size:1.125rem;font-weight:600;letter-spacing:inherit;line-height:1.25;margin-bottom:1rem;margin-top:1.5rem}.duo-chat-compact-markdown .gl-h4,.duo-chat-compact-markdown h4{color:var(--gl-text-color-heading);font-size:1rem;font-weight:600;letter-spacing:inherit;line-height:1.25;margin-bottom:1rem;margin-top:1rem}.duo-chat-compact-markdown .gl-h5,.duo-chat-compact-markdown h5{color:var(--gl-text-color-heading);font-size:.875rem;font-weight:600;letter-spacing:inherit;line-height:1.25;margin-bottom:1rem;margin-top:1rem}.duo-chat-compact-markdown .gl-h6,.duo-chat-compact-markdown h6{color:var(--gl-text-color-heading);font-size:.8125rem;font-weight:600;letter-spacing:inherit;line-height:1.25;margin-bottom:1rem;margin-top:1rem}.duo-chat-compact-markdown .sm{font-size:.75rem}.duo-chat-compact-markdown .monospace,.duo-chat-compact-markdown code{font-family:var(--default-mono-font,"GitLab Mono"),"JetBrains Mono","Menlo","DejaVu Sans Mono","Liberation Mono","Consolas","Ubuntu Mono","Courier New","andale mono","lucida console",monospace;font-variant-ligatures:none}.duo-chat-compact-markdown table td,.duo-chat-compact-markdown table th{padding-bottom:.5rem;padding-top:.5rem}.duo-chat-loader{color:var(--gray-500,#737278);display:flex}.duo-chat-loader .transition{transition:width .2s cubic-bezier(.22,.61,.36,1)}@media (prefers-reduced-motion){.duo-chat-loader .transition{transition-delay:0ms!important;transition-duration:.01ms!important}}.duo-chat-loader .text-enter{opacity:0}.duo-chat-loader .text-enter-active{transition:opacity .4s cubic-bezier(.22,.61,.36,1)}@media (prefers-reduced-motion){.duo-chat-loader .text-enter-active{transition-delay:0ms!important;transition-duration:.01ms!important}}.duo-chat-loader .text-enter-to,.duo-chat-loader .text-leave{opacity:1}.duo-chat-loader .text-leave-active{transition:opacity .2s cubic-bezier(.22,.61,.36,1)}@media (prefers-reduced-motion){.duo-chat-loader .text-leave-active{transition-delay:0ms!important;transition-duration:.01ms!important}}.duo-chat-loader .text-leave-to{opacity:0}.duo-chat-message{border-radius:1.25rem;max-width:90%;position:relative}.duo-chat-message:not(:last-child){margin-bottom:.75rem}.duo-chat-message code{background-color:var(--gray-100,#dcdcde)}.duo-chat-message pre{border-color:var(--gl-border-color-default);border-style:solid;border-width:1px;box-shadow:none!important;color:inherit;max-height:60vh;padding:.5rem .75rem}.duo-chat-message pre:after,.duo-chat-message pre:before{border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;content:"";height:2rem;left:1px;pointer-events:none;position:absolute;width:calc(100% - 2px)}.duo-chat-message pre.scrim-top:before{--tw-rotate:-180deg;background:linear-gradient(180deg,#fbfafd00,#fbfafd);top:1px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.duo-chat-message pre.scrim-bottom:after{background:linear-gradient(180deg,#fbfafd00,#fbfafd);bottom:1px}.duo-chat-message pre code{background-color:initial;font-size:.75rem;line-height:1;white-space:inherit}.duo-chat-message p:last-of-type{margin-bottom:0}.duo-chat-message copy-code,.duo-chat-message insert-code-snippet{opacity:0;position:absolute;right:.5rem;top:.5rem;transition-duration:.2s;transition-property:all;transition-timing-function:ease}.duo-chat-message copy-code{margin-right:2.5rem}.duo-chat-message .js-markdown-code.markdown-code-block:hover copy-code,.duo-chat-message .js-markdown-code.markdown-code-block:hover copy-code:focus-within,.duo-chat-message .js-markdown-code.markdown-code-block:hover insert-code-snippet,.duo-chat-message .js-markdown-code.markdown-code-block:hover insert-code-snippet:focus-within{opacity:1}.duo-chat-message .has-error{margin-left:1.5rem}.duo-chat-message .error-icon{position:absolute;top:14px}.insert-code-hidden insert-code-snippet{display:none}.insert-code-hidden copy-code{margin-right:0}
+@charset "UTF-8";.resizable-content{--tw-shadow:0 0 2px var(--gl-shadow-color-default,#05050629),0 0 2px var(--gl-shadow-color-default,#05050629),0 4px 12px var(--gl-shadow-color-default,#05050629);--tw-shadow-colored:0 0 2px var(--tw-shadow-color),0 0 2px var(--tw-shadow-color),0 4px 12px var(--tw-shadow-color);background:var(--gl-background-color-default);border-radius:.5rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);display:flex;flex-direction:column;font-size:.875rem;height:100%;line-height:1rem;overflow-y:auto;width:100%}.resizable-component .resizable-l,.resizable-component .resizable-t{background-color:initial;border-radius:3px;transition:background-color .2s cubic-bezier(.22,.61,.36,1)}@media (prefers-reduced-motion){.resizable-component .resizable-l,.resizable-component .resizable-t{transition-delay:0ms!important;transition-duration:.01ms!important}}.resizable-component .resizable-l:hover,.resizable-component .resizable-t:hover{background-color:var(--gl-color-blue-200)}.resizable-component .resizable-t{height:4px!important;left:50%!important;top:2px!important;transform:translateX(-50%);width:95%!important}.resizable-component .resizable-l{height:95%!important;left:2px!important;top:50%!important;transform:translateY(-50%);width:4px!important}.duo-chat{z-index:999}.duo-chat .message-enter-active,.duo-chat .message-leave-active{transition:all .5s ease}.duo-chat .message-enter,.duo-chat .message-leave-to{opacity:0;transform:translateY(10px)}.duo-chat .duo-chat-loader.message-leave,.duo-chat .duo-chat-loader.message-leave-to{transition:none}.duo-chat .duo-chat-drawer-body-scrim-on-footer:before{background:linear-gradient(180deg,#fbfafd00,#fbfafd)}.duo-chat .duo-chat-drawer-body{overflow-y:auto}.duo-chat .duo-chat-drawer-body>*,.duo-chat .duo-chat-drawer-header{padding:1rem}.duo-chat-drawer{--tw-shadow:0 0 2px var(--gl-shadow-color-default,#05050629),0 0 2px var(--gl-shadow-color-default,#05050629),0 4px 12px var(--gl-shadow-color-default,#05050629);--tw-shadow-colored:0 0 2px var(--tw-shadow-color),0 0 2px var(--tw-shadow-color),0 4px 12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);display:flex;flex-direction:column;font-size:.875rem;height:100%;line-height:1rem;overflow-y:auto;position:fixed;right:0;transition-duration:.2s;transition-property:all;transition-timing-function:ease;width:100%}.duo-chat-drawer-header,.duo-chat-drawer-header-sticky{border-bottom:1px solid var(--gl-border-color-default)}.duo-chat-drawer-header-sticky{position:sticky;top:0}.duo-chat-drawer-body{background-color:inherit;flex-grow:1;overscroll-behavior:contain}.duo-chat-drawer-footer{border-top:1px solid var(--gl-border-color-default);padding:1rem}.duo-chat-drawer-footer-sticky{background-color:var(--white,#fff);bottom:0;position:sticky}.duo-chat-drawer-body-scrim-on-footer:before{--tw-translate-y:-100%;background:linear-gradient(180deg,#fbfafd00,#fbfafd);content:"";height:1rem;left:0;pointer-events:none;position:absolute;top:0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));width:100%}.duo-chat-history{scroll-behavior:smooth}.duo-chat-history.force-scroll-bar{min-height:calc(100% + 1rem)}.duo-chat-history *{overflow-anchor:none}.duo-chat-history .scroll-anchor{height:1px;margin-top:-1px;overflow-anchor:auto}.duo-chat-input{background:var(--gl-control-background-color-default);border-radius:1.25rem;box-shadow:inset 0 0 0 1px var(--gl-control-border-color-default);display:flex;flex-direction:column;max-height:240px;overflow:hidden}.duo-chat-input:focus-within{box-shadow:inset 0 0 0 1px var(--gl-control-border-color-focus),0 0 0 1px var(--gl-focus-ring-inner-color),0 0 0 3px var(--gl-focus-ring-outer-color);outline:none}@media (forced-colors:active){.duo-chat-input:focus-within{outline:2px solid LinkText}}.duo-chat-input .gl-form-textarea.form-control{border-radius:1.25rem;flex:1;max-height:240px;padding-right:40px;resize:none}.duo-chat-input:after{content:attr(data-value) " ";font-family:var(--default-regular-font,"GitLab Sans"),-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Ubuntu,Cantarell,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";padding:.75rem 40px .75rem .75rem;visibility:hidden;word-break:break-word}.duo-chat .duo-chat-suggestion-button{border-radius:1.25rem}.slash-commands{margin-top:-.25rem}.slash-commands .active-command{background-color:var(--gray-50,#ececef);border-radius:.25rem}.slash-commands .gl-dropdown-item button.dropdown-item{background-color:initial;font-size:.75rem;padding-left:.5rem;padding-right:.5rem}.slash-commands .gl-dropdown-item button.dropdown-item:hover{background-color:initial}.duo-chat-markdown{color:#28272d;font-family:var(--default-regular-font,"GitLab Sans"),-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Ubuntu,Cantarell,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5rem}.duo-chat-markdown :first-child{margin-top:0}.duo-chat-markdown .gl-h1,.duo-chat-markdown h1{font-size:clamp(1.5rem,.8333333333rem + 1.3888888889vw,1.875rem);margin-top:2rem}.duo-chat-markdown .gl-h1,.duo-chat-markdown .gl-h2,.duo-chat-markdown h1,.duo-chat-markdown h2{color:var(--gl-text-color-heading);font-weight:600;letter-spacing:-.01em;line-height:1.25;margin-bottom:1rem}.duo-chat-markdown .gl-h2,.duo-chat-markdown h2{font-size:clamp(1.3125rem,.8680555556rem + .9259259259vw,1.5625rem);margin-top:1.5rem}.duo-chat-markdown .gl-h3,.duo-chat-markdown h3{font-size:clamp(1.125rem,.9027777778rem + .462962963vw,1.25rem);margin-top:1.5rem}.duo-chat-markdown .gl-h3,.duo-chat-markdown .gl-h4,.duo-chat-markdown h3,.duo-chat-markdown h4{color:var(--gl-text-color-heading);font-weight:600;letter-spacing:inherit;line-height:1.25;margin-bottom:1rem}.duo-chat-markdown .gl-h4,.duo-chat-markdown h4{font-size:1rem;margin-top:1rem}.duo-chat-markdown .gl-h5,.duo-chat-markdown h5{font-size:.875rem}.duo-chat-markdown .gl-h5,.duo-chat-markdown .gl-h6,.duo-chat-markdown h5,.duo-chat-markdown h6{color:var(--gl-text-color-heading);font-weight:600;letter-spacing:inherit;line-height:1.25;margin-bottom:1rem;margin-top:1rem}.duo-chat-markdown .gl-h6,.duo-chat-markdown h6{font-size:.8125rem}.duo-chat-markdown .gl-paragraph,.duo-chat-markdown p{margin-bottom:0;margin-top:0}.duo-chat-markdown .gl-paragraph+.gl-paragraph,.duo-chat-markdown .gl-paragraph+p,.duo-chat-markdown p+.gl-paragraph,.duo-chat-markdown p+p{margin-top:1rem}.duo-chat-markdown .gl-paragraph.sm,.duo-chat-markdown .sm,.duo-chat-markdown p.sm{font-size:.875rem;line-height:1.25rem}.duo-chat-markdown .monospace,.duo-chat-markdown code{font-family:var(--default-mono-font,"GitLab Mono"),"JetBrains Mono","Menlo","DejaVu Sans Mono","Liberation Mono","Consolas","Ubuntu Mono","Courier New","andale mono","lucida console",monospace;font-variant-ligatures:none}.duo-chat-markdown blockquote{box-shadow:inset 4px 0 0 0 #dcdcde;color:var(--gray-700,#4c4b51);margin:.5rem 0;padding-bottom:.5rem;padding-left:1.5rem;padding-top:.5rem}.duo-chat-markdown .idiff{border-radius:.25rem;display:inline-flex;padding-left:.25rem;padding-right:.25rem}.duo-chat-markdown .deletion{background-color:var(--red-100,#fdd4cd)}.duo-chat-markdown .addition{background-color:var(--green-100,#c3e6cd)}.duo-chat-markdown code{background-color:var(--gray-50,#ececef);border-radius:.25rem;color:var(--gray-950,#18171d);padding:.125rem .25rem}.duo-chat-markdown pre{border-radius:.25rem;box-shadow:inset 0 0 0 1px #dcdcde;margin-bottom:2rem;margin-top:2rem;overflow:auto;padding:.5rem .75rem}.duo-chat-markdown pre code{background-color:var(--white,#fff);border-radius:0;color:var(--gray-900,#28272d);padding:0}.duo-chat-markdown .audio-container{display:inline-flex;flex-direction:column;width:100%}.duo-chat-markdown .audio-container audio{width:100%}.duo-chat-markdown .audio-container a{margin-top:.5rem}.duo-chat-markdown .audio-container a:before{-webkit-font-smoothing:antialiased;content:"📎";margin-right:.25rem;text-rendering:auto}.duo-chat-markdown table{margin-bottom:2rem;margin-top:2rem}.duo-chat-markdown table td,.duo-chat-markdown table th{box-shadow:inset 0 -1px 0 0 #dcdcde;padding:.75rem .5rem;vertical-align:top}.duo-chat-markdown table th{box-shadow:inset 0 1px 0 0 #dcdcde,inset 0 -1px 0 0 #dcdcde;font-weight:600}.duo-chat-markdown table thead{background-color:var(--gray-50,#ececef)}.duo-chat-markdown table tr:nth-child(2n){background-color:var(--gray-10,#fbfafd)}.duo-chat-compact-markdown{font-size:.875rem;line-height:1.25rem}.duo-chat-compact-markdown .gl-h1,.duo-chat-compact-markdown h1{color:var(--gl-text-color-heading);font-size:1.5rem;font-weight:600;letter-spacing:-.01em;line-height:1.25;margin-bottom:1rem;margin-top:2rem}.duo-chat-compact-markdown .gl-h2,.duo-chat-compact-markdown h2{color:var(--gl-text-color-heading);font-size:1.3125rem;font-weight:600;letter-spacing:-.01em;line-height:1.25;margin-bottom:1rem;margin-top:1.5rem}.duo-chat-compact-markdown .gl-h3,.duo-chat-compact-markdown h3{color:var(--gl-text-color-heading);font-size:1.125rem;font-weight:600;letter-spacing:inherit;line-height:1.25;margin-bottom:1rem;margin-top:1.5rem}.duo-chat-compact-markdown .gl-h4,.duo-chat-compact-markdown h4{color:var(--gl-text-color-heading);font-size:1rem;font-weight:600;letter-spacing:inherit;line-height:1.25;margin-bottom:1rem;margin-top:1rem}.duo-chat-compact-markdown .gl-h5,.duo-chat-compact-markdown h5{color:var(--gl-text-color-heading);font-size:.875rem;font-weight:600;letter-spacing:inherit;line-height:1.25;margin-bottom:1rem;margin-top:1rem}.duo-chat-compact-markdown .gl-h6,.duo-chat-compact-markdown h6{color:var(--gl-text-color-heading);font-size:.8125rem;font-weight:600;letter-spacing:inherit;line-height:1.25;margin-bottom:1rem;margin-top:1rem}.duo-chat-compact-markdown .sm{font-size:.75rem}.duo-chat-compact-markdown .monospace,.duo-chat-compact-markdown code{font-family:var(--default-mono-font,"GitLab Mono"),"JetBrains Mono","Menlo","DejaVu Sans Mono","Liberation Mono","Consolas","Ubuntu Mono","Courier New","andale mono","lucida console",monospace;font-variant-ligatures:none}.duo-chat-compact-markdown table td,.duo-chat-compact-markdown table th{padding-bottom:.5rem;padding-top:.5rem}.duo-chat-loader{color:var(--gray-500,#737278);display:flex}.duo-chat-loader .transition{transition:width .2s cubic-bezier(.22,.61,.36,1)}@media (prefers-reduced-motion){.duo-chat-loader .transition{transition-delay:0ms!important;transition-duration:.01ms!important}}.duo-chat-loader .text-enter{opacity:0}.duo-chat-loader .text-enter-active{transition:opacity .4s cubic-bezier(.22,.61,.36,1)}@media (prefers-reduced-motion){.duo-chat-loader .text-enter-active{transition-delay:0ms!important;transition-duration:.01ms!important}}.duo-chat-loader .text-enter-to,.duo-chat-loader .text-leave{opacity:1}.duo-chat-loader .text-leave-active{transition:opacity .2s cubic-bezier(.22,.61,.36,1)}@media (prefers-reduced-motion){.duo-chat-loader .text-leave-active{transition-delay:0ms!important;transition-duration:.01ms!important}}.duo-chat-loader .text-leave-to{opacity:0}.duo-chat-message{border-radius:1.25rem;max-width:90%;position:relative}.duo-chat-message:not(:last-child){margin-bottom:.75rem}.duo-chat-message code{background-color:var(--gray-100,#dcdcde)}.duo-chat-message pre{border-color:var(--gl-border-color-default);border-style:solid;border-width:1px;box-shadow:none!important;color:inherit;max-height:60vh;padding:.5rem .75rem}.duo-chat-message pre:after,.duo-chat-message pre:before{border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;content:"";height:2rem;left:1px;pointer-events:none;position:absolute;width:calc(100% - 2px)}.duo-chat-message pre.scrim-top:before{--tw-rotate:-180deg;background:linear-gradient(180deg,#fbfafd00,#fbfafd);top:1px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.duo-chat-message pre.scrim-bottom:after{background:linear-gradient(180deg,#fbfafd00,#fbfafd);bottom:1px}.duo-chat-message pre code{background-color:initial;font-size:.75rem;line-height:1;white-space:inherit}.duo-chat-message p:last-of-type{margin-bottom:0}.duo-chat-message copy-code,.duo-chat-message insert-code-snippet{opacity:0;position:absolute;right:.5rem;top:.5rem;transition-duration:.2s;transition-property:all;transition-timing-function:ease}.duo-chat-message copy-code [role=tooltip],.duo-chat-message insert-code-snippet [role=tooltip]{background-color:var(--gray-100,#dcdcde);border-radius:.25rem;display:none;left:0;position:absolute;top:0;width:max-content}.duo-chat-message copy-code [role=tooltip] .arrow,.duo-chat-message insert-code-snippet [role=tooltip] .arrow{background:inherit;height:.5rem;position:absolute;transform:rotate(45deg);width:.5rem}.duo-chat-message copy-code{margin-right:2.5rem}.duo-chat-message .js-markdown-code.markdown-code-block:hover copy-code,.duo-chat-message .js-markdown-code.markdown-code-block:hover copy-code:focus-within,.duo-chat-message .js-markdown-code.markdown-code-block:hover insert-code-snippet,.duo-chat-message .js-markdown-code.markdown-code-block:hover insert-code-snippet:focus-within{opacity:1}.duo-chat-message .has-error{margin-left:1.5rem}.duo-chat-message .error-icon{position:absolute;top:14px}.insert-code-hidden insert-code-snippet{display:none}.insert-code-hidden copy-code{margin-right:0}
 /*# sourceMappingURL=components.css.map */

package/dist/components.css.map

@@ -1 +1 @@
-{"version":3,"sources":["components.scss"],"names":[],"mappings":"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","file":"components.css","sourcesContent":["@charset \"UTF-8\";\n/*\n* SASS preserves units in arithmetic operations. For example:\n* 12em * 0 = 0em. This function return the unit of a numeric value.\n*\n* For more examples, see: https://codepen.io/paulgv/pen/XWrqMgQ\n*/\n/**\n* Declares a property with a fluid value that decreases or\n* rises depending on the viewport’s size. The property type\n* should be numeric.\n*\n* Values are expected in rem units.\n* Fluid range: between 48rem (768px) – 75rem (1200px).\n*\n* @param $property Property name, i.e. line-height, font-size, width, height, etc.\n* @param $min Property value lower bound.\n* @param $max Property value upper bound.\n*/\n/**\n* Helper function for :focus\n*\n* @param $size is deprecated and should not be used anymore\n*/\n/**\n* Helper function for @media of at least the minimum\n* breakpoint width.\n*\n* @param $name Breakpoint name, such as `sm` or `md`.\n*/\n/**\n* Helper function for @media of at most the maximum\n* breakpoint width.\n*\n* Note: Before using, consider using a mobile-first\n* approach, and define @media for larger breakpoints\n* using `gl-media-breakpoint-up` while using this rule as\n* the starting point instead.\n*\n* @param $name Breakpoint, such as `sm` or `md`. `xs` is not valid\n*/\n/**\n* Helper function to resolve font-size value from $gl-font-sizes and\n* $gl-font-sizes-fixed maps.\n*\n* @param $size Number font-size scale\n* @param $fixed Boolean toggle default and fixed font size scales\n*/\n.resizable-content {\n  height: 100%;\n  width: 100%;\n  background: var(--gl-background-color-default);\n  border-radius: 0.5rem;\n  @apply gl-overflow-y-auto;\n  @apply gl-shadow-lg;\n  @apply gl-text-base;\n  @apply gl-leading-normal;\n  @apply gl-flex;\n  @apply gl-flex-col;\n}\n\n.resizable-component .resizable-t,\n.resizable-component .resizable-l {\n  background-color: transparent;\n  border-radius: 3px;\n  transition: background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n@media (prefers-reduced-motion) {\n  .resizable-component .resizable-t,\n.resizable-component .resizable-l {\n    transition-duration: 0.01ms !important;\n    transition-delay: 0ms !important;\n  }\n}\n.resizable-component .resizable-t:hover,\n.resizable-component .resizable-l:hover {\n  background-color: var(--gl-color-blue-200);\n}\n.resizable-component .resizable-t {\n  width: 95% !important;\n  transform: translateX(-50%);\n  left: 50% !important;\n  height: 4px !important;\n  top: 2px !important;\n}\n.resizable-component .resizable-l {\n  height: 95% !important;\n  transform: translateY(-50%);\n  top: 50% !important;\n  width: 4px !important;\n  left: 2px !important;\n}\n\n.duo-chat {\n  z-index: 999;\n}\n.duo-chat .message-enter-active,\n.duo-chat .message-leave-active {\n  transition: all 0.5s ease;\n}\n.duo-chat .message-enter,\n.duo-chat .message-leave-to {\n  @apply gl-opacity-0;\n  transform: translateY(10px);\n}\n.duo-chat .duo-chat-loader.message-leave,\n.duo-chat .duo-chat-loader.message-leave-to {\n  transition: none;\n}\n.duo-chat .duo-chat-drawer-body-scrim-on-footer::before {\n  background: linear-gradient(to bottom, rgba(251, 250, 253, 0), #fbfafd);\n}\n.duo-chat .duo-chat-drawer-body {\n  overflow-y: auto;\n}\n.duo-chat .duo-chat-drawer-header,\n.duo-chat .duo-chat-drawer-body > * {\n  @apply gl-p-5;\n}\n\n.duo-chat-drawer {\n  right: 0;\n  @apply gl-transition-all;\n  position: fixed;\n  @apply gl-h-full;\n  @apply gl-w-full;\n  @apply gl-overflow-y-auto;\n  @apply gl-shadow-lg;\n  @apply gl-text-base;\n  @apply gl-leading-normal;\n  @apply gl-flex;\n  @apply gl-flex-col;\n}\n\n.duo-chat-drawer-header {\n  @apply gl-border-b;\n}\n\n.duo-chat-drawer-header-sticky {\n  top: 0;\n  position: sticky;\n  @apply gl-border-b;\n}\n\n.duo-chat-drawer-body {\n  @apply gl-grow;\n  background-color: inherit;\n  overscroll-behavior: contain;\n}\n\n.duo-chat-drawer-footer {\n  @apply gl-border-t;\n  @apply gl-p-5;\n}\n\n.duo-chat-drawer-footer-sticky {\n  @apply gl-bg-white;\n  bottom: 0;\n  position: sticky;\n}\n\n.duo-chat-drawer-body-scrim-on-footer::before {\n  background: linear-gradient(to bottom, rgba(251, 250, 253, 0), #fbfafd);\n  top: 0;\n  @apply -gl-translate-y-full;\n  content: \"\";\n  left: 0;\n  position: absolute;\n  @apply gl-pointer-events-none;\n  @apply gl-w-full;\n  @apply gl-h-5;\n}\n\n.duo-chat-history {\n  scroll-behavior: smooth;\n  /*\n  Browsers a are pretty good at keeping the focus on an element while\n  the parent element grows in size. With this we mark all child elements\n  of the chat history as \"non\" anchors.\n  https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor\n  */\n  /*\n  Right at the bottom of the chat history we add a scroll-anchor element.\n  This scroll-anchor element is the only \"possible\" anchor. The beauty of it:\n  It only will be used as an anchor _if_ it is currently inside the view port.\n  So if the user manually scrolls up while a chunked message is coming in,\n  it won't stick to the bottom while the message still loads.\n  */\n}\n.duo-chat-history.force-scroll-bar {\n  min-height: calc(100% + 1rem);\n}\n.duo-chat-history * {\n  overflow-anchor: none;\n}\n.duo-chat-history .scroll-anchor {\n  overflow-anchor: auto;\n  height: 1px;\n  margin-top: -1px;\n}\n\n.duo-chat-input {\n  @apply gl-flex;\n  @apply gl-flex-col;\n  max-height: 240px;\n  overflow: hidden;\n  background: var(--gl-control-background-color-default);\n  box-shadow: inset 0 0 0 1px var(--gl-control-border-color-default);\n  border-radius: 1.25rem;\n}\n.duo-chat-input:focus-within {\n  box-shadow: inset 0 0 0 1px var(--gl-control-border-color-focus), 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color);\n  outline: none;\n}\n@media (forced-colors: active) {\n  .duo-chat-input:focus-within {\n    outline: 2px solid LinkText;\n  }\n}\n.duo-chat-input .gl-form-textarea.form-control {\n  flex: 1;\n  resize: none;\n  max-height: 240px;\n  padding-right: 40px;\n  border-radius: 1.25rem;\n}\n.duo-chat-input::after {\n  content: attr(data-value) \" \";\n  @apply gl-invisible;\n  @apply gl-p-4;\n  @apply gl-font-regular;\n  padding-right: 40px;\n  word-break: break-word;\n}\n\n.duo-chat .duo-chat-suggestion-button {\n  border-radius: 1.25rem;\n}\n\n.slash-commands {\n  @apply -gl-mt-2;\n}\n.slash-commands .active-command {\n  @apply gl-bg-gray-50;\n  @apply gl-rounded-base;\n}\n.slash-commands .gl-dropdown-item button.dropdown-item {\n  @apply gl-text-sm;\n  @apply gl-px-3;\n  @apply gl-bg-transparent;\n}\n.slash-commands .gl-dropdown-item button.dropdown-item:hover {\n  @apply gl-bg-transparent;\n}\n\n.duo-chat-markdown {\n  @apply gl-text-lg;\n  @apply gl-leading-24;\n  color: #28272d;\n  @apply gl-font-regular;\n  @apply gl-font-normal;\n}\n.duo-chat-markdown :first-child {\n  @apply gl-mt-0;\n}\n.duo-chat-markdown h1,\n.duo-chat-markdown .gl-h1 {\n  @apply gl-heading-1;\n  @apply gl-mt-7;\n}\n.duo-chat-markdown h2,\n.duo-chat-markdown .gl-h2 {\n  @apply gl-heading-2;\n  @apply gl-mt-6;\n}\n.duo-chat-markdown h3,\n.duo-chat-markdown .gl-h3 {\n  @apply gl-heading-3;\n  @apply gl-mt-6;\n}\n.duo-chat-markdown h4,\n.duo-chat-markdown .gl-h4 {\n  @apply gl-heading-4;\n  @apply gl-mt-5;\n}\n.duo-chat-markdown h5,\n.duo-chat-markdown .gl-h5 {\n  @apply gl-heading-5;\n  @apply gl-mt-5;\n}\n.duo-chat-markdown h6,\n.duo-chat-markdown .gl-h6 {\n  @apply gl-heading-6;\n  @apply gl-mt-5;\n}\n.duo-chat-markdown p,\n.duo-chat-markdown .gl-paragraph {\n  @apply gl-mt-0;\n  @apply gl-mb-0;\n}\n.duo-chat-markdown p + p,\n.duo-chat-markdown p + .gl-paragraph,\n.duo-chat-markdown .gl-paragraph + p,\n.duo-chat-markdown .gl-paragraph + .gl-paragraph {\n  @apply gl-mt-5;\n}\n.duo-chat-markdown p.sm,\n.duo-chat-markdown .gl-paragraph.sm {\n  font-size: 0.875rem;\n  @apply gl-leading-20;\n}\n.duo-chat-markdown .sm {\n  font-size: 0.875rem;\n  @apply gl-leading-20;\n}\n.duo-chat-markdown .monospace,\n.duo-chat-markdown code {\n  @apply gl-font-monospace;\n}\n.duo-chat-markdown blockquote {\n  @apply gl-text-gray-700;\n  @apply gl-py-3;\n  @apply gl-pl-6;\n  @apply gl-my-3;\n  @apply gl-mx-0;\n  box-shadow: inset 4px 0 0 0 #dcdcde;\n}\n.duo-chat-markdown .idiff {\n  @apply gl-rounded-base;\n  @apply gl-inline-flex;\n  @apply gl-px-2;\n}\n.duo-chat-markdown .deletion {\n  @apply gl-bg-red-100;\n}\n.duo-chat-markdown .addition {\n  @apply gl-bg-green-100;\n}\n.duo-chat-markdown code {\n  @apply gl-rounded-base;\n  @apply gl-bg-gray-50;\n  @apply gl-text-gray-950;\n  @apply gl-px-2;\n  @apply gl-py-1;\n}\n.duo-chat-markdown pre {\n  @apply gl-rounded-base;\n  @apply gl-py-3;\n  @apply gl-px-4;\n  box-shadow: inset 0 0 0 1px #dcdcde;\n  @apply gl-my-7;\n  @apply gl-overflow-auto;\n}\n.duo-chat-markdown pre code {\n  @apply gl-bg-white;\n  @apply gl-rounded-none;\n  @apply gl-text-gray-900;\n  @apply gl-p-0;\n}\n.duo-chat-markdown .audio-container {\n  @apply gl-inline-flex;\n  @apply gl-flex-col;\n  @apply gl-w-full;\n}\n.duo-chat-markdown .audio-container audio {\n  @apply gl-w-full;\n}\n.duo-chat-markdown .audio-container a {\n  @apply gl-mt-3;\n}\n.duo-chat-markdown .audio-container a::before {\n  @apply gl-mr-2;\n  text-rendering: auto;\n  -webkit-font-smoothing: antialiased;\n  content: \"📎\";\n}\n.duo-chat-markdown table {\n  @apply gl-my-7;\n}\n.duo-chat-markdown table th,\n.duo-chat-markdown table td {\n  @apply gl-px-3;\n  @apply gl-py-4;\n  box-shadow: inset 0 -1px 0 0 #dcdcde;\n  @apply gl-align-top;\n}\n.duo-chat-markdown table th {\n  box-shadow: inset 0 1px 0 0 #dcdcde, inset 0 -1px 0 0 #dcdcde;\n  @apply gl-font-bold;\n}\n.duo-chat-markdown table thead {\n  @apply gl-bg-gray-50;\n}\n.duo-chat-markdown table tr:nth-child(even) {\n  @apply gl-bg-gray-10;\n}\n\n.duo-chat-compact-markdown {\n  @apply gl-text-base;\n  @apply gl-leading-20;\n}\n.duo-chat-compact-markdown h1,\n.duo-chat-compact-markdown .gl-h1 {\n  @apply gl-heading-1-fixed;\n  @apply gl-mt-7;\n}\n.duo-chat-compact-markdown h2,\n.duo-chat-compact-markdown .gl-h2 {\n  @apply gl-heading-2-fixed;\n  @apply gl-mt-6;\n}\n.duo-chat-compact-markdown h3,\n.duo-chat-compact-markdown .gl-h3 {\n  @apply gl-heading-3-fixed;\n  @apply gl-mt-6;\n}\n.duo-chat-compact-markdown h4,\n.duo-chat-compact-markdown .gl-h4 {\n  @apply gl-heading-4-fixed;\n  @apply gl-mt-5;\n}\n.duo-chat-compact-markdown h5,\n.duo-chat-compact-markdown .gl-h5 {\n  @apply gl-heading-5-fixed;\n  @apply gl-mt-5;\n}\n.duo-chat-compact-markdown h6,\n.duo-chat-compact-markdown .gl-h6 {\n  @apply gl-heading-6-fixed;\n  @apply gl-mt-5;\n}\n.duo-chat-compact-markdown .sm {\n  @apply gl-text-sm;\n}\n.duo-chat-compact-markdown .monospace,\n.duo-chat-compact-markdown code {\n  @apply gl-font-monospace;\n}\n.duo-chat-compact-markdown table th,\n.duo-chat-compact-markdown table td {\n  @apply gl-py-3;\n}\n\n.duo-chat-loader {\n  @apply gl-flex;\n  @apply gl-text-gray-500;\n}\n.duo-chat-loader .transition {\n  transition: width 200ms cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n@media (prefers-reduced-motion) {\n  .duo-chat-loader .transition {\n    transition-duration: 0.01ms !important;\n    transition-delay: 0ms !important;\n  }\n}\n.duo-chat-loader .text-enter {\n  @apply gl-opacity-0;\n}\n.duo-chat-loader .text-enter-active {\n  transition: opacity 400ms cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n@media (prefers-reduced-motion) {\n  .duo-chat-loader .text-enter-active {\n    transition-duration: 0.01ms !important;\n    transition-delay: 0ms !important;\n  }\n}\n.duo-chat-loader .text-enter-to {\n  @apply gl-opacity-10;\n}\n.duo-chat-loader .text-leave {\n  @apply gl-opacity-10;\n}\n.duo-chat-loader .text-leave-active {\n  transition: opacity 200ms cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n@media (prefers-reduced-motion) {\n  .duo-chat-loader .text-leave-active {\n    transition-duration: 0.01ms !important;\n    transition-delay: 0ms !important;\n  }\n}\n.duo-chat-loader .text-leave-to {\n  @apply gl-opacity-0;\n}\n\n.duo-chat-message {\n  max-width: 90%;\n  position: relative;\n  border-radius: 1.25rem;\n}\n.duo-chat-message:not(:last-child) {\n  @apply gl-mb-4;\n}\n.duo-chat-message code {\n  @apply gl-bg-gray-100;\n}\n.duo-chat-message pre {\n  box-shadow: none !important;\n  @apply gl-border gl-max-h-[60vh] gl-px-4 gl-py-3 gl-text-inherit;\n}\n.duo-chat-message pre::before, .duo-chat-message pre::after {\n  content: \"\";\n  left: 1px;\n  width: calc(100% - 2px);\n  position: absolute;\n  @apply gl-pointer-events-none gl-h-7 gl-rounded-b-base;\n}\n.duo-chat-message pre.scrim-top::before {\n  background: linear-gradient(to bottom, rgba(251, 250, 253, 0), #fbfafd);\n  top: 1px;\n  @apply -gl-rotate-180;\n}\n.duo-chat-message pre.scrim-bottom::after {\n  background: linear-gradient(to bottom, rgba(251, 250, 253, 0), #fbfafd);\n  bottom: 1px;\n}\n.duo-chat-message pre code {\n  @apply gl-text-sm;\n  @apply gl-leading-1;\n  @apply gl-bg-transparent;\n  white-space: inherit;\n}\n.duo-chat-message p:last-of-type {\n  @apply gl-mb-0;\n}\n.duo-chat-message copy-code,\n.duo-chat-message insert-code-snippet {\n  position: absolute;\n  @apply gl-transition-all;\n  @apply gl-opacity-0;\n  right: 0.5rem;\n  top: 0.5rem;\n}\n.duo-chat-message copy-code {\n  margin-right: 2.5rem;\n}\n.duo-chat-message .js-markdown-code.markdown-code-block:hover copy-code,\n.duo-chat-message .js-markdown-code.markdown-code-block:hover copy-code:focus-within,\n.duo-chat-message .js-markdown-code.markdown-code-block:hover insert-code-snippet,\n.duo-chat-message .js-markdown-code.markdown-code-block:hover insert-code-snippet:focus-within {\n  @apply gl-opacity-10;\n}\n.duo-chat-message .has-error {\n  margin-left: 1.5rem;\n}\n.duo-chat-message .error-icon {\n  top: 14px;\n  position: absolute;\n}\n\n.insert-code-hidden insert-code-snippet {\n  display: none;\n}\n.insert-code-hidden copy-code {\n  margin-right: 0;\n}"]}
+{"version":3,"sources":["components.scss"],"names":[],"mappings":"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","file":"components.css","sourcesContent":["@charset \"UTF-8\";\n/*\n* SASS preserves units in arithmetic operations. For example:\n* 12em * 0 = 0em. This function return the unit of a numeric value.\n*\n* For more examples, see: https://codepen.io/paulgv/pen/XWrqMgQ\n*/\n/**\n* Declares a property with a fluid value that decreases or\n* rises depending on the viewport’s size. The property type\n* should be numeric.\n*\n* Values are expected in rem units.\n* Fluid range: between 48rem (768px) – 75rem (1200px).\n*\n* @param $property Property name, i.e. line-height, font-size, width, height, etc.\n* @param $min Property value lower bound.\n* @param $max Property value upper bound.\n*/\n/**\n* Helper function for :focus\n*\n* @param $size is deprecated and should not be used anymore\n*/\n/**\n* Helper function for @media of at least the minimum\n* breakpoint width.\n*\n* @param $name Breakpoint name, such as `sm` or `md`.\n*/\n/**\n* Helper function for @media of at most the maximum\n* breakpoint width.\n*\n* Note: Before using, consider using a mobile-first\n* approach, and define @media for larger breakpoints\n* using `gl-media-breakpoint-up` while using this rule as\n* the starting point instead.\n*\n* @param $name Breakpoint, such as `sm` or `md`. `xs` is not valid\n*/\n/**\n* Helper function to resolve font-size value from $gl-font-sizes and\n* $gl-font-sizes-fixed maps.\n*\n* @param $size Number font-size scale\n* @param $fixed Boolean toggle default and fixed font size scales\n*/\n.resizable-content {\n  height: 100%;\n  width: 100%;\n  background: var(--gl-background-color-default);\n  border-radius: 0.5rem;\n  @apply gl-overflow-y-auto;\n  @apply gl-shadow-lg;\n  @apply gl-text-base;\n  @apply gl-leading-normal;\n  @apply gl-flex;\n  @apply gl-flex-col;\n}\n\n.resizable-component .resizable-t,\n.resizable-component .resizable-l {\n  background-color: transparent;\n  border-radius: 3px;\n  transition: background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n@media (prefers-reduced-motion) {\n  .resizable-component .resizable-t,\n.resizable-component .resizable-l {\n    transition-duration: 0.01ms !important;\n    transition-delay: 0ms !important;\n  }\n}\n.resizable-component .resizable-t:hover,\n.resizable-component .resizable-l:hover {\n  background-color: var(--gl-color-blue-200);\n}\n.resizable-component .resizable-t {\n  width: 95% !important;\n  transform: translateX(-50%);\n  left: 50% !important;\n  height: 4px !important;\n  top: 2px !important;\n}\n.resizable-component .resizable-l {\n  height: 95% !important;\n  transform: translateY(-50%);\n  top: 50% !important;\n  width: 4px !important;\n  left: 2px !important;\n}\n\n.duo-chat {\n  z-index: 999;\n}\n.duo-chat .message-enter-active,\n.duo-chat .message-leave-active {\n  transition: all 0.5s ease;\n}\n.duo-chat .message-enter,\n.duo-chat .message-leave-to {\n  @apply gl-opacity-0;\n  transform: translateY(10px);\n}\n.duo-chat .duo-chat-loader.message-leave,\n.duo-chat .duo-chat-loader.message-leave-to {\n  transition: none;\n}\n.duo-chat .duo-chat-drawer-body-scrim-on-footer::before {\n  background: linear-gradient(to bottom, rgba(251, 250, 253, 0), #fbfafd);\n}\n.duo-chat .duo-chat-drawer-body {\n  overflow-y: auto;\n}\n.duo-chat .duo-chat-drawer-header,\n.duo-chat .duo-chat-drawer-body > * {\n  @apply gl-p-5;\n}\n\n.duo-chat-drawer {\n  right: 0;\n  @apply gl-transition-all;\n  position: fixed;\n  @apply gl-h-full;\n  @apply gl-w-full;\n  @apply gl-overflow-y-auto;\n  @apply gl-shadow-lg;\n  @apply gl-text-base;\n  @apply gl-leading-normal;\n  @apply gl-flex;\n  @apply gl-flex-col;\n}\n\n.duo-chat-drawer-header {\n  @apply gl-border-b;\n}\n\n.duo-chat-drawer-header-sticky {\n  top: 0;\n  position: sticky;\n  @apply gl-border-b;\n}\n\n.duo-chat-drawer-body {\n  @apply gl-grow;\n  background-color: inherit;\n  overscroll-behavior: contain;\n}\n\n.duo-chat-drawer-footer {\n  @apply gl-border-t;\n  @apply gl-p-5;\n}\n\n.duo-chat-drawer-footer-sticky {\n  @apply gl-bg-white;\n  bottom: 0;\n  position: sticky;\n}\n\n.duo-chat-drawer-body-scrim-on-footer::before {\n  background: linear-gradient(to bottom, rgba(251, 250, 253, 0), #fbfafd);\n  top: 0;\n  @apply -gl-translate-y-full;\n  content: \"\";\n  left: 0;\n  position: absolute;\n  @apply gl-pointer-events-none;\n  @apply gl-w-full;\n  @apply gl-h-5;\n}\n\n.duo-chat-history {\n  scroll-behavior: smooth;\n  /*\n  Browsers a are pretty good at keeping the focus on an element while\n  the parent element grows in size. With this we mark all child elements\n  of the chat history as \"non\" anchors.\n  https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor\n  */\n  /*\n  Right at the bottom of the chat history we add a scroll-anchor element.\n  This scroll-anchor element is the only \"possible\" anchor. The beauty of it:\n  It only will be used as an anchor _if_ it is currently inside the view port.\n  So if the user manually scrolls up while a chunked message is coming in,\n  it won't stick to the bottom while the message still loads.\n  */\n}\n.duo-chat-history.force-scroll-bar {\n  min-height: calc(100% + 1rem);\n}\n.duo-chat-history * {\n  overflow-anchor: none;\n}\n.duo-chat-history .scroll-anchor {\n  overflow-anchor: auto;\n  height: 1px;\n  margin-top: -1px;\n}\n\n.duo-chat-input {\n  @apply gl-flex;\n  @apply gl-flex-col;\n  max-height: 240px;\n  overflow: hidden;\n  background: var(--gl-control-background-color-default);\n  box-shadow: inset 0 0 0 1px var(--gl-control-border-color-default);\n  border-radius: 1.25rem;\n}\n.duo-chat-input:focus-within {\n  box-shadow: inset 0 0 0 1px var(--gl-control-border-color-focus), 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color);\n  outline: none;\n}\n@media (forced-colors: active) {\n  .duo-chat-input:focus-within {\n    outline: 2px solid LinkText;\n  }\n}\n.duo-chat-input .gl-form-textarea.form-control {\n  flex: 1;\n  resize: none;\n  max-height: 240px;\n  padding-right: 40px;\n  border-radius: 1.25rem;\n}\n.duo-chat-input::after {\n  content: attr(data-value) \" \";\n  @apply gl-invisible;\n  @apply gl-p-4;\n  @apply gl-font-regular;\n  padding-right: 40px;\n  word-break: break-word;\n}\n\n.duo-chat .duo-chat-suggestion-button {\n  border-radius: 1.25rem;\n}\n\n.slash-commands {\n  @apply -gl-mt-2;\n}\n.slash-commands .active-command {\n  @apply gl-bg-gray-50;\n  @apply gl-rounded-base;\n}\n.slash-commands .gl-dropdown-item button.dropdown-item {\n  @apply gl-text-sm;\n  @apply gl-px-3;\n  @apply gl-bg-transparent;\n}\n.slash-commands .gl-dropdown-item button.dropdown-item:hover {\n  @apply gl-bg-transparent;\n}\n\n.duo-chat-markdown {\n  @apply gl-text-lg;\n  @apply gl-leading-24;\n  color: #28272d;\n  @apply gl-font-regular;\n  @apply gl-font-normal;\n}\n.duo-chat-markdown :first-child {\n  @apply gl-mt-0;\n}\n.duo-chat-markdown h1,\n.duo-chat-markdown .gl-h1 {\n  @apply gl-heading-1;\n  @apply gl-mt-7;\n}\n.duo-chat-markdown h2,\n.duo-chat-markdown .gl-h2 {\n  @apply gl-heading-2;\n  @apply gl-mt-6;\n}\n.duo-chat-markdown h3,\n.duo-chat-markdown .gl-h3 {\n  @apply gl-heading-3;\n  @apply gl-mt-6;\n}\n.duo-chat-markdown h4,\n.duo-chat-markdown .gl-h4 {\n  @apply gl-heading-4;\n  @apply gl-mt-5;\n}\n.duo-chat-markdown h5,\n.duo-chat-markdown .gl-h5 {\n  @apply gl-heading-5;\n  @apply gl-mt-5;\n}\n.duo-chat-markdown h6,\n.duo-chat-markdown .gl-h6 {\n  @apply gl-heading-6;\n  @apply gl-mt-5;\n}\n.duo-chat-markdown p,\n.duo-chat-markdown .gl-paragraph {\n  @apply gl-mt-0;\n  @apply gl-mb-0;\n}\n.duo-chat-markdown p + p,\n.duo-chat-markdown p + .gl-paragraph,\n.duo-chat-markdown .gl-paragraph + p,\n.duo-chat-markdown .gl-paragraph + .gl-paragraph {\n  @apply gl-mt-5;\n}\n.duo-chat-markdown p.sm,\n.duo-chat-markdown .gl-paragraph.sm {\n  font-size: 0.875rem;\n  @apply gl-leading-20;\n}\n.duo-chat-markdown .sm {\n  font-size: 0.875rem;\n  @apply gl-leading-20;\n}\n.duo-chat-markdown .monospace,\n.duo-chat-markdown code {\n  @apply gl-font-monospace;\n}\n.duo-chat-markdown blockquote {\n  @apply gl-text-gray-700;\n  @apply gl-py-3;\n  @apply gl-pl-6;\n  @apply gl-my-3;\n  @apply gl-mx-0;\n  box-shadow: inset 4px 0 0 0 #dcdcde;\n}\n.duo-chat-markdown .idiff {\n  @apply gl-rounded-base;\n  @apply gl-inline-flex;\n  @apply gl-px-2;\n}\n.duo-chat-markdown .deletion {\n  @apply gl-bg-red-100;\n}\n.duo-chat-markdown .addition {\n  @apply gl-bg-green-100;\n}\n.duo-chat-markdown code {\n  @apply gl-rounded-base;\n  @apply gl-bg-gray-50;\n  @apply gl-text-gray-950;\n  @apply gl-px-2;\n  @apply gl-py-1;\n}\n.duo-chat-markdown pre {\n  @apply gl-rounded-base;\n  @apply gl-py-3;\n  @apply gl-px-4;\n  box-shadow: inset 0 0 0 1px #dcdcde;\n  @apply gl-my-7;\n  @apply gl-overflow-auto;\n}\n.duo-chat-markdown pre code {\n  @apply gl-bg-white;\n  @apply gl-rounded-none;\n  @apply gl-text-gray-900;\n  @apply gl-p-0;\n}\n.duo-chat-markdown .audio-container {\n  @apply gl-inline-flex;\n  @apply gl-flex-col;\n  @apply gl-w-full;\n}\n.duo-chat-markdown .audio-container audio {\n  @apply gl-w-full;\n}\n.duo-chat-markdown .audio-container a {\n  @apply gl-mt-3;\n}\n.duo-chat-markdown .audio-container a::before {\n  @apply gl-mr-2;\n  text-rendering: auto;\n  -webkit-font-smoothing: antialiased;\n  content: \"📎\";\n}\n.duo-chat-markdown table {\n  @apply gl-my-7;\n}\n.duo-chat-markdown table th,\n.duo-chat-markdown table td {\n  @apply gl-px-3;\n  @apply gl-py-4;\n  box-shadow: inset 0 -1px 0 0 #dcdcde;\n  @apply gl-align-top;\n}\n.duo-chat-markdown table th {\n  box-shadow: inset 0 1px 0 0 #dcdcde, inset 0 -1px 0 0 #dcdcde;\n  @apply gl-font-bold;\n}\n.duo-chat-markdown table thead {\n  @apply gl-bg-gray-50;\n}\n.duo-chat-markdown table tr:nth-child(even) {\n  @apply gl-bg-gray-10;\n}\n\n.duo-chat-compact-markdown {\n  @apply gl-text-base;\n  @apply gl-leading-20;\n}\n.duo-chat-compact-markdown h1,\n.duo-chat-compact-markdown .gl-h1 {\n  @apply gl-heading-1-fixed;\n  @apply gl-mt-7;\n}\n.duo-chat-compact-markdown h2,\n.duo-chat-compact-markdown .gl-h2 {\n  @apply gl-heading-2-fixed;\n  @apply gl-mt-6;\n}\n.duo-chat-compact-markdown h3,\n.duo-chat-compact-markdown .gl-h3 {\n  @apply gl-heading-3-fixed;\n  @apply gl-mt-6;\n}\n.duo-chat-compact-markdown h4,\n.duo-chat-compact-markdown .gl-h4 {\n  @apply gl-heading-4-fixed;\n  @apply gl-mt-5;\n}\n.duo-chat-compact-markdown h5,\n.duo-chat-compact-markdown .gl-h5 {\n  @apply gl-heading-5-fixed;\n  @apply gl-mt-5;\n}\n.duo-chat-compact-markdown h6,\n.duo-chat-compact-markdown .gl-h6 {\n  @apply gl-heading-6-fixed;\n  @apply gl-mt-5;\n}\n.duo-chat-compact-markdown .sm {\n  @apply gl-text-sm;\n}\n.duo-chat-compact-markdown .monospace,\n.duo-chat-compact-markdown code {\n  @apply gl-font-monospace;\n}\n.duo-chat-compact-markdown table th,\n.duo-chat-compact-markdown table td {\n  @apply gl-py-3;\n}\n\n.duo-chat-loader {\n  @apply gl-flex;\n  @apply gl-text-gray-500;\n}\n.duo-chat-loader .transition {\n  transition: width 200ms cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n@media (prefers-reduced-motion) {\n  .duo-chat-loader .transition {\n    transition-duration: 0.01ms !important;\n    transition-delay: 0ms !important;\n  }\n}\n.duo-chat-loader .text-enter {\n  @apply gl-opacity-0;\n}\n.duo-chat-loader .text-enter-active {\n  transition: opacity 400ms cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n@media (prefers-reduced-motion) {\n  .duo-chat-loader .text-enter-active {\n    transition-duration: 0.01ms !important;\n    transition-delay: 0ms !important;\n  }\n}\n.duo-chat-loader .text-enter-to {\n  @apply gl-opacity-10;\n}\n.duo-chat-loader .text-leave {\n  @apply gl-opacity-10;\n}\n.duo-chat-loader .text-leave-active {\n  transition: opacity 200ms cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n@media (prefers-reduced-motion) {\n  .duo-chat-loader .text-leave-active {\n    transition-duration: 0.01ms !important;\n    transition-delay: 0ms !important;\n  }\n}\n.duo-chat-loader .text-leave-to {\n  @apply gl-opacity-0;\n}\n\n.duo-chat-message {\n  max-width: 90%;\n  position: relative;\n  border-radius: 1.25rem;\n}\n.duo-chat-message:not(:last-child) {\n  @apply gl-mb-4;\n}\n.duo-chat-message code {\n  @apply gl-bg-gray-100;\n}\n.duo-chat-message pre {\n  box-shadow: none !important;\n  @apply gl-border gl-max-h-[60vh] gl-px-4 gl-py-3 gl-text-inherit;\n}\n.duo-chat-message pre::before, .duo-chat-message pre::after {\n  content: \"\";\n  left: 1px;\n  width: calc(100% - 2px);\n  position: absolute;\n  @apply gl-pointer-events-none gl-h-7 gl-rounded-b-base;\n}\n.duo-chat-message pre.scrim-top::before {\n  background: linear-gradient(to bottom, rgba(251, 250, 253, 0), #fbfafd);\n  top: 1px;\n  @apply -gl-rotate-180;\n}\n.duo-chat-message pre.scrim-bottom::after {\n  background: linear-gradient(to bottom, rgba(251, 250, 253, 0), #fbfafd);\n  bottom: 1px;\n}\n.duo-chat-message pre code {\n  @apply gl-text-sm;\n  @apply gl-leading-1;\n  @apply gl-bg-transparent;\n  white-space: inherit;\n}\n.duo-chat-message p:last-of-type {\n  @apply gl-mb-0;\n}\n.duo-chat-message copy-code,\n.duo-chat-message insert-code-snippet {\n  position: absolute;\n  @apply gl-transition-all;\n  @apply gl-opacity-0;\n  right: 0.5rem;\n  top: 0.5rem;\n}\n.duo-chat-message copy-code [role=tooltip],\n.duo-chat-message insert-code-snippet [role=tooltip] {\n  display: none;\n  @apply gl-bg-gray-100;\n  width: max-content;\n  position: absolute;\n  top: 0;\n  left: 0;\n  @apply gl-rounded-base;\n}\n.duo-chat-message copy-code [role=tooltip] .arrow,\n.duo-chat-message insert-code-snippet [role=tooltip] .arrow {\n  position: absolute;\n  background: inherit;\n  @apply gl-w-3 gl-h-3;\n  transform: rotate(45deg);\n}\n.duo-chat-message copy-code {\n  margin-right: 2.5rem;\n}\n.duo-chat-message .js-markdown-code.markdown-code-block:hover copy-code,\n.duo-chat-message .js-markdown-code.markdown-code-block:hover copy-code:focus-within,\n.duo-chat-message .js-markdown-code.markdown-code-block:hover insert-code-snippet,\n.duo-chat-message .js-markdown-code.markdown-code-block:hover insert-code-snippet:focus-within {\n  @apply gl-opacity-10;\n}\n.duo-chat-message .has-error {\n  margin-left: 1.5rem;\n}\n.duo-chat-message .error-icon {\n  top: 14px;\n  position: absolute;\n}\n\n.insert-code-hidden insert-code-snippet {\n  display: none;\n}\n.insert-code-hidden copy-code {\n  margin-right: 0;\n}"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/duo-ui",
-  "version": "8.0.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/buttons_utils.js

@@ -12,6 +12,7 @@ export const createButton = (title = 'Insert the code snippet', iconId = 'insert
     'btn-icon'
   );
   button.dataset.title = title;
+  button.setAttribute('aria-label', title);
 
   // Create an SVG element with the correct namespace
   const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

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

@@ -1,15 +1,53 @@
 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();
+    this.initialize();
+  }
+
+  async initialize() {
     const btn = createButton('Copy to clipboard', 'copy-to-clipboard');
+    this.appendChild(btn);
+
+    const tooltip = await createTooltip(btn, 'Copy to clipboard');
+    this.appendChild(tooltip);
+
     const wrapper = this.parentNode;
+    const [codeElement] = wrapper.getElementsByTagName('code');
 
-    this.appendChild(btn);
     btn.addEventListener('click', async () => {
-      const textToCopy = wrapper.innerText;
-      await navigator.clipboard.writeText(textToCopy);
+      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) {
+        // eslint-disable-next-line no-console
+        console.warn('Failed to copy snippet:', e);
+      }
     });
   }
 }

package/src/components/chat/components/duo_chat_message/duo_chat_message.scss

@@ -61,6 +61,24 @@ $duo-code-scrim-top-gradient: linear-gradient(to top, rgba($gray-10, 0), $gray-1
     @apply gl-opacity-0;
     right: $gl-spacing-scale-3;
     top: $gl-spacing-scale-3;
+
+    [role='tooltip'] {
+      display: none;
+      @apply gl-bg-gray-100;
+
+      width: max-content;
+      position: absolute;
+      top: 0;
+      left: 0;
+      @apply gl-rounded-base;
+
+      .arrow {
+        position: absolute;
+        background: inherit;
+        @apply gl-w-3 gl-h-3;
+        transform: rotate(45deg);
+      }
+    }
   }
 
   copy-code {

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/components/duo_chat_message/insert_code_snippet_element.js

@@ -1,30 +1,39 @@
 import { createButton } from './buttons_utils';
+import { createTooltip } from './tooltips_utils';
 
 const CODE_MARKDOWN_CLASS = 'js-markdown-code';
 
 export class InsertCodeSnippetElement extends HTMLElement {
   #actionButton;
 
-  #codeBlock;
+  #codeElement;
 
   constructor(codeBlock) {
     super();
+    this.initialize(codeBlock);
+  }
+
+  async initialize(codeBlock) {
     this.#actionButton = createButton();
 
     // we handle two possible cases here:
     // 1. we use constructor parameter if the element is created in Javscript and inserted in the document
     // 2. we find the wrapping element containing code if the element is received from the server
-    this.#codeBlock = codeBlock ?? this.closest(`.${CODE_MARKDOWN_CLASS}`);
+    const wrapper = codeBlock ?? this.closest(`.${CODE_MARKDOWN_CLASS}`);
+    [this.#codeElement] = wrapper.getElementsByTagName('code');
+
+    const tooltip = await createTooltip(this.#actionButton, 'Insert at cursor');
+    this.appendChild(tooltip);
   }
 
   #handleClick = () => {
-    if (this.#codeBlock) {
-      this.#codeBlock.dispatchEvent(
+    if (this.#codeElement) {
+      this.#codeElement.dispatchEvent(
         new CustomEvent('insert-code-snippet', {
           bubbles: true,
           cancelable: true,
           detail: {
-            code: this.#codeBlock.textContent.trim(),
+            code: this.#codeElement.textContent.trim(),
           },
         })
       );

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

@@ -0,0 +1,60 @@
+import { computePosition, offset, arrow, shift } from '@floating-ui/dom';
+
+export const createTooltip = async (element, text) => {
+  const tooltip = document.createElement('div');
+  tooltip.classList.add('gl-tooltip');
+  tooltip.setAttribute('role', 'tooltip');
+  tooltip.textContent = text;
+
+  const arrowElement = document.createElement('div');
+  arrowElement.classList.add('arrow');
+  tooltip.appendChild(arrowElement);
+
+  const updateTooltipPosition = async () => {
+    const { x, y, placement, middlewareData } = await computePosition(element, tooltip, {
+      placement: 'top',
+      middleware: [offset(10), shift(), arrow({ element: arrowElement })],
+    });
+
+    Object.assign(tooltip.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+    });
+
+    // style arrow element to position correctly
+    const { x: arrowX, y: arrowY } = middlewareData.arrow;
+    const staticSide = {
+      top: 'bottom',
+      right: 'left',
+      bottom: 'top',
+      left: 'right',
+    }[placement.split('-')[0]];
+    Object.assign(arrowElement.style, {
+      left: arrowX != null ? `${arrowX}px` : '',
+      top: arrowY != null ? `${arrowY}px` : '',
+      right: '',
+      bottom: '',
+      [staticSide]: '-4px',
+    });
+  };
+
+  const showTooltip = () => {
+    tooltip.style.display = 'block';
+    updateTooltipPosition(element, tooltip);
+  };
+
+  const hideTooltip = () => {
+    tooltip.style.display = '';
+  };
+
+  [
+    ['mouseenter', showTooltip],
+    ['mouseleave', hideTooltip],
+    ['focus', showTooltip],
+    ['blur', hideTooltip],
+  ].forEach(([event, listener]) => {
+    element.addEventListener(event, listener);
+  });
+
+  return tooltip;
+};

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">