@gitlab/duo-ui 8.11.0 → 8.12.0

package/dist/components/chat/components/duo_chat_conversation/duo_chat_conversation.js

@@ -42,6 +42,14 @@ var script = {
       type: Boolean,
       required: false,
       default: true
+    },
+    /**
+     * Base URL of the GitLab instance.
+     */
+    trustedUrls: {
+      type: Array,
+      required: false,
+      default: () => []
     }
   },
   methods: {
@@ -72,7 +80,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,"copy-code-snippet":_vm.onCopyCodeSnippet,"copy-message":_vm.onCopyMessage,"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,"trusted-urls":_vm.trustedUrls,"is-cancelled":_vm.canceledRequestIds.includes(msg.requestId)},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet,"copy-code-snippet":_vm.onCopyCodeSnippet,"copy-message":_vm.onCopyMessage,"get-context-item-content":_vm.onGetContextItemContent}})})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -80,6 +80,14 @@ var script = {
     isCancelled: {
       type: Boolean,
       required: true
+    },
+    /**
+     * Base URL of the GitLab instance.
+     */
+    trustedUrls: {
+      type: Array,
+      required: false,
+      default: () => []
     }
   },
   data() {
@@ -122,17 +130,17 @@ var script = {
       if (this.message.contentHtml) {
         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() {
       var _this$message$errors;
-      return this.renderMarkdown(((_this$message$errors = this.message.errors) === null || _this$message$errors === void 0 ? void 0 : _this$message$errors.join('; ')) || '');
+      return this.renderMarkdown(((_this$message$errors = this.message.errors) === null || _this$message$errors === void 0 ? void 0 : _this$message$errors.join('; ')) || '', this.trustedUrls);
     },
     error() {
       var _this$message, _this$message$errors2;

package/dist/components/chat/duo_chat.js

@@ -242,6 +242,14 @@ var script = {
       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').
      */
@@ -612,7 +620,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
   },attrs:{"width":_vm.shouldRenderResizable ? _vm.dimensions.width : null,"height":_vm.shouldRenderResizable ? _vm.dimensions.height : null,"max-width":_vm.shouldRenderResizable ? _vm.dimensions.maxWidth : null,"max-height":_vm.shouldRenderResizable ? _vm.dimensions.maxHeight : null,"min-width":_vm.shouldRenderResizable ? _vm.dimensions.minWidth : null,"left":_vm.shouldRenderResizable ? _vm.dimensions.left : null,"top":_vm.shouldRenderResizable ? _vm.dimensions.top : null,"fit-parent":true,"min-height":_vm.shouldRenderResizable ? _vm.dimensions.minHeight : null,"active":_vm.shouldRenderResizable ? ['l', 't', 'lt'] : null},on:{"resize:end":_vm.updateSize}},[(!_vm.isHidden)?_c('aside',{staticClass:"markdown-code-block duo-chat gl-bottom-0 gl-max-h-full gl-flex gl-flex-col",class:{
       'resizable-content': _vm.shouldRenderResizable,
       'duo-chat-drawer': !_vm.shouldRenderResizable,
-    },attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"}},[(_vm.showHeader)?_c('duo-chat-header',{ref:"header",attrs:{"active-thread-id":_vm.activeThreadId,"title":_vm.isMultithreaded && _vm.currentView === 'list' ? _vm.$options.i18n.CHAT_HISTORY_TITLE : _vm.title,"subtitle":_vm.activeThreadTitleForView,"error":_vm.error,"is-multithreaded":_vm.isMultithreaded,"current-view":_vm.currentView,"should-render-resizable":_vm.shouldRenderResizable,"badge-type":_vm.isMultithreaded ? null : _vm.badgeType},on:{"go-back":_vm.onGoBack,"new-chat":_vm.onNewChat,"close":_vm.hideChat},scopedSlots:_vm._u([{key:"subheader",fn:function(){return [_vm._t("subheader")]},proxy:true}],null,true)}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-overflow-y-auto gl-flex gl-flex-col gl-flex-1 gl-flex-grow gl-bg-inherit gl-overscroll-contain",attrs:{"data-testid":"chat-history"},on:{"scroll":_vm.handleScrollingThrottled}},[(_vm.shouldShowThreadList)?_c('duo-chat-threads',{attrs:{"threads":_vm.threadList,"preferred-locale":_vm.preferredLocale},on:{"new-chat":_vm.onNewChat,"select-thread":_vm.onSelectThread,"delete-thread":_vm.onDeleteThread,"close":_vm.hideChat}}):_c('transition-group',{staticClass:"duo-chat-history gl-p-5 gl-mt-auto",attrs:{"mode":"out-in","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,"copy-message":_vm.onCopyMessage,"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 && !_vm.shouldShowThreadList)?_c('footer',{staticClass:"duo-chat-drawer-footer gl-border-0 gl-bg-default gl-pb-3 gl-shrink-0 gl-relative gl-z-2",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()],1):_vm._e()])};
+    },attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"}},[(_vm.showHeader)?_c('duo-chat-header',{ref:"header",attrs:{"active-thread-id":_vm.activeThreadId,"title":_vm.isMultithreaded && _vm.currentView === 'list' ? _vm.$options.i18n.CHAT_HISTORY_TITLE : _vm.title,"subtitle":_vm.activeThreadTitleForView,"is-multithreaded":_vm.isMultithreaded,"current-view":_vm.currentView,"should-render-resizable":_vm.shouldRenderResizable,"badge-type":_vm.isMultithreaded ? null : _vm.badgeType},on:{"go-back":_vm.onGoBack,"new-chat":_vm.onNewChat,"close":_vm.hideChat},scopedSlots:_vm._u([{key:"subheader",fn:function(){return [_vm._t("subheader")]},proxy:true}],null,true)}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-overflow-y-auto gl-flex gl-flex-col gl-flex-1 gl-flex-grow gl-bg-inherit gl-overscroll-contain",attrs:{"data-testid":"chat-history"},on:{"scroll":_vm.handleScrollingThrottled}},[(_vm.shouldShowThreadList)?_c('duo-chat-threads',{attrs:{"threads":_vm.threadList,"preferred-locale":_vm.preferredLocale},on:{"new-chat":_vm.onNewChat,"select-thread":_vm.onSelectThread,"delete-thread":_vm.onDeleteThread,"close":_vm.hideChat}}):_c('transition-group',{staticClass:"duo-chat-history gl-p-5 gl-mt-auto",attrs:{"mode":"out-in","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,"trusted-urls":_vm.trustedUrls},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet,"copy-code-snippet":_vm.onCopyCodeSnippet,"copy-message":_vm.onCopyMessage,"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 && !_vm.shouldShowThreadList)?_c('footer',{staticClass:"duo-chat-drawer-footer gl-border-0 gl-bg-default gl-pb-3 gl-shrink-0 gl-relative gl-z-2",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()],1):_vm._e()])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/chat/markdown_renderer.js

@@ -1,5 +1,6 @@
 import { Marked } from 'marked';
 import markedBidi from 'marked-bidi';
+import DOMPurify from 'dompurify';
 
 // eslint-disable-next-line no-restricted-imports
 const duoMarked = new Marked([{
@@ -7,12 +8,106 @@ const duoMarked = new Marked([{
   breaks: false,
   gfm: false
 }, markedBidi()]);
-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 => {
+  var _node$nodeName;
+  if (((_node$nodeName = node.nodeName) === null || _node$nodeName === void 0 ? void 0 : _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 = function () {
+  let trustedUrls = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return 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');
+  };
+};
+function renderDuoChatMarkdownPreview(md) {
+  let {
+    trustedUrls = []
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  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;
 }
 
 export { renderDuoChatMarkdownPreview };

package/dist/index.js

@@ -7,6 +7,7 @@ export { default as DuoChatLoader } from './components/chat/components/duo_chat_
 export { default as DuoChatMessage } from './components/chat/components/duo_chat_message/duo_chat_message';
 export { default as DuoChatMessageSources } from './components/chat/components/duo_chat_message_sources/duo_chat_message_sources';
 export { default as DuoChatPredefinedPrompts } from './components/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts';
+export { default as AgenticDuoChat } from './components/agentic_chat/agentic_duo_chat';
 export { default as DuoChatContextItemDetailsModal } from './components/chat/components/duo_chat_context/duo_chat_context_item_details_modal/duo_chat_context_item_details_modal';
 export { default as DuoChatContextItemMenu } from './components/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu';
 export { default as DuoChatContextItemPopover } from './components/chat/components/duo_chat_context/duo_chat_context_item_popover/duo_chat_context_item_popover';

package/package.json

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

package/src/components/agentic_chat/agentic_duo_chat.md

@@ -0,0 +1,190 @@
+The component represents the complete Duo Chat feature.
+
+The component provides a configurable chat UI interface. The primary use is communication with
+GitLab Duo, however, the component is BE-agnostic and can accept information from any source.
+
+## Usage
+
+To use the component in its simplest form, import it and add it to the `template` part of your
+consumer component.
+
+```html
+<agentic-duo-chat
+  :title="title"
+  :messages="messages"
+  :error="error"
+  :is-loading="isLoading"
+  :is-chat-available="isChatAvailable"
+  :predefined-prompts="predefinedPrompts"
+  :canceled-request-ids="cancelledRequestIds"
+  :tool-name="toolName"
+  :empty-state-title="emptyStateTitle"
+  :empty-state-description="emptyStateDescription"
+  :chat-prompt-placeholder="chatPromptPlaceholder"
+  :slash-commands="slashCommands"
+  @chat-hidden="onChatHidden"
+  @send-chat-prompt="onSendChatPrompt"
+  @track-feedback="onTrackFeedback"
+/>
+```
+
+## Integration
+
+To demonstrate how to connect this component to a backend implementation, let's consider its use
+for GitLab Duo. First, some general notes on the best practices and expectations when using this
+component.
+
+### Expected dependency injection
+
+To be universal, the component delegates some of its responsibilities to the consumer component.
+
+The component expects two function props:
+
+- `renderMarkdown`
+- `renderGFM`
+
+#### `renderMarkdown`
+
+This function prop converts plain Markdown text into HTML markup. To have a better understanding
+of what is expected from this function, take a look at
+[the existing GitLab example](https://gitlab.com/gitlab-org/gitlab/-/blob/774ecc1f2b15a581e8eab6441de33585c9691c82/app/assets/javascripts/notes/utils.js#L22-24).
+
+#### `renderGFM`
+
+This function prop extends the standard Markdown rendering with support for the
+[GitLab Flavored Markdown (GLFM)](https://docs.gitlab.com/ee/user/markdown.html). To
+have a better understanding of what is expected from this function, take a look at
+[the existing GitLab example](https://gitlab.com/gitlab-org/gitlab/-/blob/774ecc1f2b15a581e8eab6441de33585c9691c82/app/assets/javascripts/behaviors/markdown/render_gfm.js#L18-40).
+
+The reason to have two different functions for rendering Markdown is performance. `renderGFM`
+operates on a DOM node and might come with many additional mutations for the node's content.
+Such behavior suits a one-time update. However, Duo Chat also supports streaming of the AI
+responses (check the [Interactive story for this component](?path=/story/experimental-duo-chat-duo-chat--interactive))
+and, in this case, when the message is constantly updating, we rely on a more lightweight
+`renderMarkdown` to render the updated message faster.
+
+### Don't use reactivity where unnecessary
+
+The `AgenticDuoChat` component exposes many properties, as seen below. But not all of those should
+be necessarily reactive in the consumer component. The properties that might be static:
+
+- `title`. The title is shown in the head of the component.
+- `isChatAvailable`. The flag indicates whether the communication interface should allow follow-up
+  questions. Usually, this decision stays the same during the component's lifecycle.
+- `predefinedPrompts`. The `Array` of strings that represents the possible questions to ask when
+  there are no messages in the chat.
+- `emptyStateTitle`. Title of the empty state component. Visible when there are no messages.
+- `emptyStateDescription`. Description text of the empty state component. Visible when there are no messages.
+- `chatPromptPlaceholder`. Placeholder text for the chat prompt input.
+
+### Set up communication with consumer
+
+```javascript
+import { AgenticDuoChat } from '@gitlab/duo-ui';
+
+export default {
+  ...
+  data() {
+    return {
+      messages: [],
+      error: null,
+      isLoading: false,
+      toolName: '',
+      cancelledRequestIds: []
+    }
+  },
+  provide: {
+    renderMarkdown: (content) => {
+      // implementation of the `renderMarkdown` functionality
+    },
+    renderGFM: (el) => {
+      // implementation of the `renderGFM` functionality
+    },
+  },
+  beforeCreate() {
+    // Here, we set up our non-reactive properties if we must change the default values
+    this.title = 'Foo Bar';
+    this.isChatAvailable = true; // this is just an example. `true` is the default value
+    this.predefinedPrompts = ['How to …?', 'Where do I …?'];
+    this.emptyStateTitle = 'Ask anything';
+    this.emptyStateDescription = 'You will see the answers below';
+    this.chatPromptPlaceholder = 'Type your question here';
+  }
+  methods: {
+    onChatCancel() {
+       // pushing last requestId of messages to canceled Request Ids
+      this.cancelledRequestIds.push(this.messages[this.messages.length - 1].requestId);
+      this.isLoading = false;
+    },
+    onChatHidden() {
+      ...
+    },
+    onSendChatPrompt(prompt = '') {
+      this.isLoading = true;
+      this.messages.push(constructUserMessage(prompt));
+      ...
+    },
+    onTrackFeedback(feedbackObj = {}) {
+      ...
+    },
+    onAiResponse(data) {
+      // check if requestId was not cancelled
+      if (requestId && !this.cancelledRequestIds.includes(data.requestId)) {
+        this.messages = data
+      }
+      …
+      this.isLoading = false;
+    },
+    onAiResponseError(error) {
+      this.error = error;
+      this.isLoading = false;
+    },
+    onToolNameChange(toolMessage) {
+      this.toolName = toolMessage.content;
+    }
+  }
+}
+```
+
+With this template in place, consumer is left with the following things to implement:
+
+- Fetch `messages`. For Duo Chat, we rely on GraphQL query to get the cached
+  messages and subscription to monitor new messages when:
+
+  - streaming response
+  - listening to chat messages in other tabs/environments
+  - listen to updates from different tools to update `toolName`
+
+- Send the new user's prompt. For Duo Chat, we rely on GraphQL mutation for this purpose.
+- Send user feedback to the telemetry of your choice when `track-feedback` event arrives.
+
+## Slash commands
+
+One of the props accepted by the component is the `slashCommands`. This is an `Array` of
+the commands, shown to user when they start typing the prompt with a slash (`/`)
+character.
+
+```javascript
+<script>
+  const slashCommands = [
+    {
+      name: '/mycommand', // This is the exact name of my command as it will be submitted
+      shouldSubmit: true, // If the command should be submitted right away without free text
+      description: 'The description of my super-duper command.',
+    },
+    ...
+  ];
+  export default {
+    ...
+    options: {
+      slashCommands
+    }
+  }
+<script>
+<template>
+  <duo-chat
+    ...
+    :slash-commands="slashCommands"
+  />
+</template>
+```