@gitlab/ui 86.6.0 → 86.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "86.6.0",
+  "version": "86.7.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -29,6 +29,13 @@ export default {
       type: Array,
       required: true,
     },
+    /**
+     * Whether the insertCode feature should be available.
+     */
+    enableCodeInsertion: {
+      type: Boolean,
+      required: true,
+    },
     /**
      * Whether to show the delimiter before this conversation
      */
@@ -46,12 +53,20 @@ export default {
        */
       this.$emit('track-feedback', event);
     },
+    onInsertCodeSnippet(e) {
+      this.$emit('insert-code-snippet', e);
+    },
   },
   i18n,
 };
 </script>
 <template>
-  <div class="gl-display-flex gl-flex-direction-column gl-justify-content-end">
+  <div
+    :class="[
+      'gl-display-flex gl-flex-direction-column gl-justify-content-end',
+      { 'insert-code-hidden': !enableCodeInsertion },
+    ]"
+  >
     <div
       v-if="showDelimiter"
       class="gl-my-5 gl-display-flex gl-align-items-center gl-gap-4 gl-text-gray-500"
@@ -67,6 +82,7 @@ export default {
       :message="msg"
       :is-cancelled="canceledRequestIds.includes(msg.requestId)"
       @track-feedback="onTrackFeedback"
+      @insert-code-snippet="onInsertCodeSnippet"
     />
   </div>
 </template>

package/src/components/experimental/duo/chat/components/duo_chat_message/buttons_utils.js

@@ -0,0 +1,30 @@
+import iconsPath from '@gitlab/svgs/dist/icons.svg';
+
+export const createButton = (title = 'Insert the code snippet', iconId = 'insert') => {
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.classList.add(
+    'btn',
+    'btn-default',
+    'btn-md',
+    'gl-button',
+    'btn-default-secondary',
+    'btn-icon'
+  );
+  button.dataset.title = title;
+
+  // Create an SVG element with the correct namespace
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('role', 'img');
+  svg.setAttribute('aria-hidden', 'true');
+  svg.classList.add('gl-button-icon', 'gl-icon', 's16');
+
+  // Create a 'use' element with the correct namespace
+  const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+  use.setAttribute('href', `${iconsPath}#${iconId}`);
+
+  svg.appendChild(use);
+  button.appendChild(svg);
+
+  return button;
+};

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

@@ -1,38 +1,9 @@
-import iconsPath from '@gitlab/svgs/dist/icons.svg';
-
-const createButton = () => {
-  const button = document.createElement('button');
-  button.type = 'button';
-  button.classList.add(
-    'btn',
-    'btn-default',
-    'btn-md',
-    'gl-button',
-    'btn-default-secondary',
-    'btn-icon'
-  );
-  button.dataset.title = 'Copy to clipboard';
-
-  // Create an SVG element with the correct namespace
-  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-  svg.setAttribute('role', 'img');
-  svg.setAttribute('aria-hidden', 'true');
-  svg.classList.add('gl-button-icon', 'gl-icon', 's16');
-
-  // Create a 'use' element with the correct namespace
-  const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
-  use.setAttribute('href', `${iconsPath}#copy-to-clipboard`);
-
-  svg.appendChild(use);
-  button.appendChild(svg);
-
-  return button;
-};
+import { createButton } from './buttons_utils';
 
 export class CopyCodeElement extends HTMLElement {
   constructor() {
     super();
-    const btn = createButton();
+    const btn = createButton('Copy to clipboard', 'copy-to-clipboard');
     const wrapper = this.parentNode;
 
     this.appendChild(btn);

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

@@ -21,7 +21,8 @@
     @include gl-mb-0;
   }
 
-  copy-code {
+  copy-code,
+  insert-code-snippet {
     position: absolute;
     @include gl-transition-medium;
     @include gl-opacity-0;
@@ -29,9 +30,15 @@
     top: $gl-spacing-scale-3;
   }
 
+  copy-code {
+    margin-right: $gl-spacing-scale-8;
+  }
+
   .js-markdown-code.markdown-code-block:hover {
     copy-code,
-    copy-code:focus-within {
+    copy-code:focus-within,
+    insert-code-snippet,
+    insert-code-snippet:focus-within {
       @include gl-opacity-10;
     }
   }
@@ -45,3 +52,13 @@
     position: absolute;
   }
 }
+
+.insert-code-hidden {
+  insert-code-snippet {
+    display: none;
+  }
+
+  copy-code {
+    margin-right: 0;
+  }
+}

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

@@ -11,6 +11,7 @@ import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_s
 // eslint-disable-next-line no-restricted-imports
 import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
 import { CopyCodeElement } from './copy_code_element';
+import { InsertCodeSnippetElement } from './insert_code_snippet_element';
 import { concatUntilEmpty } from './utils';
 
 export const i18n = {
@@ -30,7 +31,7 @@ export default {
   name: 'GlDuoChatMessage',
   i18n,
   safeHtmlConfigExtension: {
-    ADD_TAGS: ['copy-code'],
+    ADD_TAGS: ['copy-code', 'insert-code-snippet'],
   },
   components: {
     DocumentationSources,
@@ -132,6 +133,9 @@ export default {
     if (!customElements.get('copy-code')) {
       customElements.define('copy-code', CopyCodeElement);
     }
+    if (!customElements.get('insert-code-snippet')) {
+      customElements.define('insert-code-snippet', InsertCodeSnippetElement);
+    }
   },
   mounted() {
     if (this.isAssistantMessage) {
@@ -180,6 +184,9 @@ export default {
         this.stopWatchingMessage();
       }
     },
+    onInsertCodeSnippet(e) {
+      this.$emit('insert-code-snippet', e);
+    },
   },
 };
 </script>
@@ -193,6 +200,7 @@ export default {
       'gl-bg-white': isAssistantMessage && !error,
       'gl-bg-red-50 gl-border-none!': error,
     }"
+    @insert-code-snippet="onInsertCodeSnippet"
   >
     <gl-icon
       v-if="error"

package/src/components/experimental/duo/chat/components/duo_chat_message/insert_code_snippet_element.js

@@ -0,0 +1,17 @@
+import { createButton } from './buttons_utils';
+
+export class InsertCodeSnippetElement extends HTMLElement {
+  constructor(codeBlock) {
+    super();
+    const btn = createButton();
+    const wrapper = codeBlock;
+    this.appendChild(btn);
+    btn.addEventListener('click', () => {
+      if (wrapper) {
+        wrapper.dispatchEvent(
+          new CustomEvent('insert-code-snippet', { bubbles: true, cancelable: true })
+        );
+      }
+    });
+  }
+}

package/src/components/experimental/duo/chat/duo_chat.vue

@@ -116,6 +116,14 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * Whether the insertCode feature should be available.
+     */
+    enableCodeInsertion: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     /**
      * Array of predefined prompts to display in the chat to start a conversation.
      */
@@ -403,6 +411,9 @@ export default {
         this.setPromptAndFocus(`${command.name} `);
       }
     },
+    onInsertCodeSnippet(e) {
+      this.$emit('insert-code-snippet', e);
+    },
   },
   i18n,
   emptySvg,
@@ -487,10 +498,12 @@ export default {
         <gl-duo-chat-conversation
           v-for="(conversation, index) in conversations"
           :key="`conversation-${index}`"
+          :enable-code-insertion="enableCodeInsertion"
           :messages="conversation"
           :canceled-request-ids="canceledRequestIds"
           :show-delimiter="index > 0"
           @track-feedback="onTrackFeedback"
+          @insert-code-snippet="onInsertCodeSnippet"
         />
         <template v-if="!hasMessages && !isLoading">
           <gl-empty-state

package/src/components/experimental/duo/chat/mock_data.js

@@ -1,4 +1,5 @@
 import { setStoryTimeout } from '../../../../utils/test_utils';
+import { InsertCodeSnippetElement } from './components/duo_chat_message/insert_code_snippet_element';
 import {
   DOCUMENTATION_SOURCE_TYPES,
   MESSAGE_MODEL_ROLES,
@@ -31,7 +32,7 @@ export const MOCK_RESPONSE_MESSAGE = {
   content:
     'Here is a simple JavaScript function to sum two numbers:\n\n  ```js\n  function sum(a, b) {\n    return a + b;\n  }\n  ```\n  \n  To use it:\n  \n  ```js\n  const result = sum(5, 3); // result = 8\n  ```\n  \n  This function takes two number parameters, a and b. It returns the sum of adding them together.\n',
   contentHtml:
-    '<p data-sourcepos="1:1-1:56" dir="auto">Here is a simple JavaScript function to sum two numbers:</p>\n<div class="gl-relative markdown-code-block js-markdown-code">\n<pre data-sourcepos="3:1-7:3" data-canonical-lang="js" class="code highlight js-syntax-highlight language-javascript" lang="javascript" v-pre="true"><code><span id="LC1" class="line" lang="javascript"><span class="kd">function</span> <span class="nf">sum</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span></span>\n<span id="LC2" class="line" lang="javascript">  <span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span></span>\n<span id="LC3" class="line" lang="javascript"><span class="p">}</span></span></code></pre>\n<copy-code></copy-code>\n</div>\n<p data-sourcepos="9:1-9:10" dir="auto">To use it:</p>\n<div class="gl-relative markdown-code-block js-markdown-code">\n<pre data-sourcepos="11:1-13:3" data-canonical-lang="js" class="code highlight js-syntax-highlight language-javascript" lang="javascript" v-pre="true"><code><span id="LC1" class="line" lang="javascript"><span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nf">sum</span><span class="p">(</span><span class="mi">5</span><span class="p">,</span> <span class="mi">3</span><span class="p">);</span> <span class="c1">// result = 8</span></span></code></pre>\n<copy-code></copy-code>\n</div>\n<p data-sourcepos="15:1-15:95" dir="auto">This function takes two number parameters, a and b. It returns the sum of adding them together.</p>',
+    '<p data-sourcepos="1:1-1:56" dir="auto">Here is a simple JavaScript function to sum two numbers:</p>\n<div class="gl-relative markdown-code-block js-markdown-code">\n<pre data-sourcepos="3:1-7:3" data-canonical-lang="js" class="code highlight js-syntax-highlight language-javascript" lang="javascript" v-pre="true"><code><span id="LC1" class="line" lang="javascript"><span class="kd">function</span> <span class="nf">sum</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span></span>\n<span id="LC2" class="line" lang="javascript">  <span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span></span>\n<span id="LC3" class="line" lang="javascript"><span class="p">}</span></span></code></pre>\n<copy-code></copy-code>\n<insert-code-snippet></insert-code-snippet>\n</div>\n<p data-sourcepos="9:1-9:10" dir="auto">To use it:</p>\n<div class="gl-relative markdown-code-block js-markdown-code">\n<pre data-sourcepos="11:1-13:3" data-canonical-lang="js" class="code highlight js-syntax-highlight language-javascript" lang="javascript" v-pre="true"><code><span id="LC1" class="line" lang="javascript"><span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nf">sum</span><span class="p">(</span><span class="mi">5</span><span class="p">,</span> <span class="mi">3</span><span class="p">);</span> <span class="c1">// result = 8</span></span></code></pre>\n<copy-code></copy-code>\n</div>\n<p data-sourcepos="15:1-15:95" dir="auto">This function takes two number parameters, a and b. It returns the sum of adding them together.</p>',
   role: MESSAGE_MODEL_ROLES.assistant,
   extras: {
     sources: MOCK_SOURCES,
@@ -137,6 +138,7 @@ export const renderGFM = (el) => {
   const codeBlock = el.querySelectorAll('.markdown-code-block');
   codeBlock.forEach((block) => {
     block?.classList.add('gl-markdown', 'gl-compact-markdown');
+    block?.appendChild(new InsertCodeSnippetElement(block));
   });
 };