@gitlab/duo-ui 8.11.0 → 8.12.1

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

@@ -45,6 +45,14 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * Base URL of the GitLab instance.
+     */
+    trustedUrls: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   methods: {
     onTrackFeedback(event) {
@@ -87,6 +95,7 @@ export default {
       v-for="(msg, index) in messages"
       :key="`${msg.role}-${index}`"
       :message="msg"
+      :trusted-urls="trustedUrls"
       :is-cancelled="canceledRequestIds.includes(msg.requestId)"
       @track-feedback="onTrackFeedback"
       @insert-code-snippet="onInsertCodeSnippet"

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

@@ -9,16 +9,19 @@ export class CopyCodeElement extends HTMLElement {
   }
 
   async initialize() {
+    if (!this.getCodeElement()) return;
+
     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');
-
     btn.addEventListener('click', async () => {
+      // We fetch the code element on click instead because the structure of the HTML can change after
+      // the element is initialized (e.g. on sanitation), and we don't want to use an element that is
+      // not present in the DOM.
+      const codeElement = this.getCodeElement();
       const textToCopy = codeElement.innerText;
       const hasClipboardPermission = await checkClipboardPermissions();
 
@@ -42,4 +45,9 @@ export class CopyCodeElement extends HTMLElement {
       }
     });
   }
+
+  getCodeElement = () => {
+    const wrapper = this.parentNode;
+    return wrapper.getElementsByTagName('code')[0] || wrapper.getElementsByTagName('pre')[0];
+  };
 }

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

@@ -109,6 +109,14 @@ export default {
       type: Boolean,
       required: true,
     },
+    /**
+     * Base URL of the GitLab instance.
+     */
+    trustedUrls: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -148,17 +156,20 @@ export default {
         return this.message.contentHtml;
       }
 
-      return this.renderMarkdown(this.message.content);
+      return this.renderMarkdown(this.message.content, this.trustedUrls);
     },
     messageContent() {
       if (this.isAssistantMessage && this.isChunk) {
-        return this.renderMarkdown(concatUntilEmpty(this.messageChunks));
+        return this.renderMarkdown(concatUntilEmpty(this.messageChunks), this.trustedUrls);
       }
 
-      return this.defaultContent || this.renderMarkdown(concatUntilEmpty(this.message.chunks));
+      return (
+        this.renderMarkdown(this.defaultContent, this.trustedUrls) ||
+        this.renderMarkdown(concatUntilEmpty(this.message.chunks), this.trustedUrls)
+      );
     },
     renderedError() {
-      return this.renderMarkdown(this.message.errors?.join('; ') || '');
+      return this.renderMarkdown(this.message.errors?.join('; ') || '', this.trustedUrls);
     },
     error() {
       return Boolean(this.message?.errors?.length) && this.message.errors.join('; ');

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

@@ -6,34 +6,38 @@ const CODE_MARKDOWN_CLASS = 'js-markdown-code';
 export class InsertCodeSnippetElement extends HTMLElement {
   #actionButton;
 
-  #codeElement;
+  #codeBlock;
 
   constructor(codeBlock) {
     super();
     this.initialize(codeBlock);
   }
 
+  // we handle two possible cases here:
+  // 1. we use constructor parameter if the element is created in Javascript and inserted in the document
+  // 2. we find the wrapping element containing code if the element is received from the server
   async initialize(codeBlock) {
-    this.#actionButton = createButton();
+    if (!this.getCodeElement(codeBlock)) return;
 
-    // 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
-    const wrapper = codeBlock ?? this.closest(`.${CODE_MARKDOWN_CLASS}`);
-    [this.#codeElement] = wrapper.getElementsByTagName('code');
+    this.#codeBlock = codeBlock;
+    this.#actionButton = createButton();
 
     const tooltip = await createTooltip(this.#actionButton, 'Insert at cursor');
     this.appendChild(tooltip);
   }
 
   #handleClick = () => {
-    if (this.#codeElement) {
-      this.#codeElement.dispatchEvent(
+    // We fetch the code element on click instead because the structure of the HTML can change after
+    // the element is initialized (e.g. on sanitation), and we don't want to use an element that is
+    // not present in the DOM.
+    const codeElement = this.getCodeElement(this.#codeBlock);
+    if (codeElement) {
+      codeElement.dispatchEvent(
         new CustomEvent('insert-code-snippet', {
           bubbles: true,
           cancelable: true,
           detail: {
-            code: this.#codeElement.textContent.trim(),
+            code: codeElement.textContent.trim(),
           },
         })
       );
@@ -41,11 +45,20 @@ export class InsertCodeSnippetElement extends HTMLElement {
   };
 
   connectedCallback() {
-    this.appendChild(this.#actionButton);
-    this.#actionButton.addEventListener('click', this.#handleClick);
+    if (this.#actionButton) {
+      this.appendChild(this.#actionButton);
+      this.#actionButton.addEventListener('click', this.#handleClick);
+    }
   }
 
   disconnectedCallback() {
-    this.#actionButton.removeEventListener('click', this.#handleClick);
+    if (this.#actionButton) {
+      this.#actionButton.removeEventListener('click', this.#handleClick);
+    }
   }
+
+  getCodeElement = (codeBlock) => {
+    const wrapper = codeBlock ?? this.closest(`.${CODE_MARKDOWN_CLASS}`);
+    return wrapper.getElementsByTagName('code')[0] || wrapper.getElementsByTagName('pre')[0];
+  };
 }

package/src/components/chat/duo_chat.vue

@@ -297,6 +297,14 @@ export default {
       default: false,
     },
     /**
+     * Base URL of the GitLab instance.
+     */
+    trustedUrls: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    /*
      * The preferred locale for the chat interface.
      * Follows BCP 47 language tag format (e.g., 'en-US', 'fr-FR', 'es-ES').
      */
@@ -712,7 +720,6 @@ export default {
           isMultithreaded && currentView === 'list' ? $options.i18n.CHAT_HISTORY_TITLE : title
         "
         :subtitle="activeThreadTitleForView"
-        :error="error"
         :is-multithreaded="isMultithreaded"
         :current-view="currentView"
         :should-render-resizable="shouldRenderResizable"
@@ -754,6 +761,7 @@ export default {
             :messages="conversation"
             :canceled-request-ids="canceledRequestIds"
             :show-delimiter="index > 0"
+            :trusted-urls="trustedUrls"
             @track-feedback="onTrackFeedback"
             @insert-code-snippet="onInsertCodeSnippet"
             @copy-code-snippet="onCopyCodeSnippet"

package/src/components/chat/markdown_renderer.js

@@ -1,6 +1,7 @@
 // eslint-disable-next-line no-restricted-imports
 import { Marked } from 'marked';
 import markedBidi from 'marked-bidi';
+import DOMPurify from 'dompurify';
 
 const duoMarked = new Marked([
   {
@@ -11,10 +12,120 @@ const duoMarked = new Marked([
   markedBidi(),
 ]);
 
-export function renderDuoChatMarkdownPreview(md) {
-  try {
-    return md ? duoMarked.parse(md.toString()) : '';
-  } catch {
-    return md;
+const config = {
+  ALLOW_TAGS: [
+    'p',
+    '#text',
+    'div',
+    'code',
+    'insert-code-snippet',
+    'gl-markdown',
+    'pre',
+    'span',
+    'gl-compact-markdown',
+    'copy-code',
+  ],
+  ADD_ATTR: ['data-canonical-lang', 'data-sourcepos', 'lang', 'data-src', 'img'],
+  FORBID_TAGS: ['script', 'style', 'iframe', 'form', 'button'],
+  FORBID_ATTR: ['onerror', 'onload', 'onclick'],
+};
+
+const handleImageElements = (node) => {
+  if (node.nodeName?.toLowerCase() !== 'img') return node;
+
+  const codeElement = node.ownerDocument.createElement('code');
+  codeElement.textContent = node.outerHTML;
+  node.parentNode.replaceChild(codeElement, node);
+  return node;
+};
+
+/**
+ * Validates if a URL is a safe relative URL without embedded malicious URLs
+ * @param {string} url - The URL to validate
+ * @returns {boolean} - True if the URL is a safe relative URL
+ */
+function isRelativeUrlWithoutEmbeddedUrls(url) {
+  // Check if the string starts with a slash
+  if (!url.startsWith('/')) {
+    return false;
   }
+
+  // Check for common URL schemes that might be embedded
+  // URL Schemes Regex breakdown:
+  // (?:(?:https?|ftp|mailto|tel|file|data|ssh|git):?\/\/) - Matches various protocols with optional colon and double slashes
+  //   - https? - http or https
+  //   - ftp - ftp protocol
+  //   - mailto - mailto links
+  //   - tel - telephone links
+  //   - file - file protocol
+  //   - data - data URIs
+  //   - ssh - ssh protocol
+  //   - git - git protocol
+  // (?:www\.) - Alternatively matches URLs starting with www.
+  // Flags: i (case insensitive)
+  const urlSchemesRegex = /(?:(?:https?|ftp|mailto|tel|file|data|ssh|git):?\/\/)|(?:www\.)/i;
+
+  // Return true only if no URL schemes are foundZSS%$
+  return !urlSchemesRegex.test(url);
+}
+const sanitizeLinksHook =
+  (trustedUrls = []) =>
+  (node) => {
+    if (!node.hasAttribute('href')) {
+      return;
+    }
+
+    const href = node.getAttribute('href');
+    try {
+      if (isRelativeUrlWithoutEmbeddedUrls(href)) {
+        return;
+      }
+      // eslint-disable-next-line no-new
+      new URL(href);
+    } catch (e) {
+      node.removeAttribute('href');
+      return;
+    }
+
+    const urlHostname = new URL(href).hostname.toLowerCase();
+    const isDocsGitlab = urlHostname === 'docs.gitlab.com';
+    const isTrustedUrls = trustedUrls.includes(urlHostname);
+
+    // Temporary fix until monolith side adds trustedUrls into the calling of component
+    const isGitlab = urlHostname === 'gitlab.com';
+
+    if (isDocsGitlab || isTrustedUrls || isGitlab) {
+      return; // Do not modify links from allowed domains
+    }
+
+    // Create a new code element
+    const codeElement = document.createElement('code');
+    const paraElement = document.createElement('span');
+
+    codeElement.appendChild(paraElement);
+    // Move the node's children to the code element
+    while (node.firstChild) {
+      paraElement.appendChild(node.firstChild);
+    }
+
+    // Append the code element to the node
+    node.appendChild(codeElement);
+
+    // Preserve the href attribute
+    paraElement.setAttribute('data-href', node.getAttribute('href'));
+    node.removeAttribute('href');
+  };
+
+export function renderDuoChatMarkdownPreview(md, { trustedUrls = [] } = {}) {
+  if (!md) return '';
+
+  DOMPurify.addHook('beforeSanitizeElements', handleImageElements);
+  DOMPurify.addHook('afterSanitizeAttributes', sanitizeLinksHook(trustedUrls));
+
+  const parsedMarkdown = duoMarked.parse(md.toString());
+  const sanitized = DOMPurify.sanitize(parsedMarkdown, config);
+
+  DOMPurify.removeHook('beforeSanitizeElements');
+  DOMPurify.removeHook('afterSanitizeAttributes');
+  return sanitized;
 }

package/src/index.js

@@ -12,6 +12,9 @@ export { default as DuoChatMessage } from './components/chat/components/duo_chat
 export { default as DuoChatMessageSources } from './components/chat/components/duo_chat_message_sources/duo_chat_message_sources.vue';
 export { default as DuoChatPredefinedPrompts } from './components/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue';
 
+// Agentic Duo Chat component
+export { default as AgenticDuoChat } from './components/agentic_chat/agentic_duo_chat.vue';
+
 // Duo Chat Context components
 export { default as DuoChatContextItemDetailsModal } from './components/chat/components/duo_chat_context/duo_chat_context_item_details_modal/duo_chat_context_item_details_modal.vue';
 export { default as DuoChatContextItemMenu } from './components/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.vue';

package/translations.js

@@ -1,5 +1,19 @@
 /* eslint-disable import/no-default-export */
 export default {
+  'AgenticDuoChat.chatCancelLabel': 'Cancel',
+  'AgenticDuoChat.chatDefaultPredefinedPromptsChangePassword':
+    'How do I change my password in GitLab?',
+  'AgenticDuoChat.chatDefaultPredefinedPromptsCloneRepository': 'How do I clone a repository?',
+  'AgenticDuoChat.chatDefaultPredefinedPromptsCreateTemplate': 'How do I create a template?',
+  'AgenticDuoChat.chatDefaultPredefinedPromptsForkProject': 'How do I fork a project?',
+  'AgenticDuoChat.chatDefaultTitle': 'GitLab Duo Chat',
+  'AgenticDuoChat.chatDisclamer': 'Responses may be inaccurate. Verify before use.',
+  'AgenticDuoChat.chatEmptyStateTitle':
+    '👋 I am GitLab Duo Chat, your personal AI-powered assistant. How can I help you today?',
+  'AgenticDuoChat.chatHistoryTitle': 'Chat history',
+  'AgenticDuoChat.chatPromptPlaceholderDefault': 'GitLab Duo Chat',
+  'AgenticDuoChat.chatPromptPlaceholderWithCommands': 'Type /help to learn more',
+  'AgenticDuoChat.chatSubmitLabel': 'Send chat message.',
   'DuoChat.chatBackLabel': 'Back to History',
   'DuoChat.chatCancelLabel': 'Cancel',
   'DuoChat.chatDefaultPredefinedPromptsChangePassword': 'How do I change my password in GitLab?',