@gitlab/duo-ui 15.3.0 → 15.4.0

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

@@ -14,9 +14,9 @@ import { MESSAGE_MODEL_ROLES, SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED } from '.
 
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources.vue';
 // eslint-disable-next-line no-restricted-imports
-import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
 import { copyToClipboard, concatUntilEmpty } from '../utils';
 import MessageFeedback from './message_feedback.vue';
+import MarkdownRenderer from './markdown_renderer.vue';
 import { CopyCodeElement } from './copy_code_element';
 import { InsertCodeSnippetElement } from './insert_code_snippet_element';
 
@@ -48,6 +48,7 @@ export default {
     GlIcon,
     GlAnimatedLoaderIcon,
     GlButton,
+    MarkdownRenderer,
   },
   directives: {
     SafeHtml,
@@ -64,10 +65,6 @@ export default {
         element.classList.add('duo-chat-markdown', 'duo-chat-compact-markdown');
       },
     },
-    renderMarkdown: {
-      from: 'renderMarkdown',
-      default: () => renderDuoChatMarkdownPreview,
-    },
   },
   props: {
     /**
@@ -147,31 +144,25 @@ export default {
     hasFeedback() {
       return Boolean(this.message.extras?.hasFeedback);
     },
+    hasContentHtml() {
+      return this.message.contentHtml?.length > 0;
+    },
     defaultContent() {
-      if (this.message.contentHtml) {
+      if (this.hasContentHtml) {
         return this.message.contentHtml;
       }
 
-      return this.renderMarkdown(this.message.content, { trustedUrls: this.trustedUrls });
+      return this.message.content;
     },
     messageContent() {
       if (this.isAssistantMessage && this.isChunk) {
-        return this.renderMarkdown(concatUntilEmpty(this.messageChunks), {
-          trustedUrls: this.trustedUrls,
-        });
+        return concatUntilEmpty(this.messageChunks);
       }
 
-      return (
-        this.renderMarkdown(this.defaultContent, { trustedUrls: this.trustedUrls }) ||
-        this.renderMarkdown(concatUntilEmpty(this.message.chunks), {
-          trustedUrls: this.trustedUrls,
-        })
-      );
+      return this.defaultContent || concatUntilEmpty(this.message.chunks);
     },
     renderedError() {
-      return this.renderMarkdown(this.message.errors?.join('; ') || '', {
-        trustedUrls: this.trustedUrls,
-      });
+      return this.message.errors?.join('; ');
     },
     error() {
       return Boolean(this.message?.errors?.length) && this.message.errors.join('; ');
@@ -255,12 +246,14 @@ export default {
         this.messageWatcher = null; // Ensure the watcher can't be stopped multiple times
       }
     },
-    hydrateContentWithGFM() {
-      if (this.isDoneStreaming && this.$refs.content) {
-        this.$nextTick(() => {
-          this.renderGFM(this.$refs.content);
-        });
+    async hydrateContentWithGFM() {
+      await this.$nextTick();
+      if (this.isDoneStreaming) {
+        if (this.$refs.content) {
+          this.renderGFM(this.$refs.content.$el);
+        }
       }
+
       this.detectScrollableCodeBlocks();
     },
     logEvent(e) {
@@ -339,6 +332,7 @@ export default {
     :class="{
       'gl-pr-7': isAssistantMessage,
       'gl-justify-end gl-pl-7': isUserMessage,
+      'duo-chat-message-complete': isDoneStreaming,
     }"
     @insert-code-snippet="onInsertCodeSnippet"
     @copy-code-snippet="onCopyCodeSnippet"
@@ -356,7 +350,13 @@ export default {
         class="error-icon !gl-mt-1 gl-mr-3 gl-shrink-0 gl-text-danger"
         data-testid="error"
       />
-      <div ref="error-message" v-safe-html:[$options.safeHtmlConfigExtension]="renderedError"></div>
+      <markdown-renderer
+        v-if="error"
+        ref="error-message"
+        class="duo-chat-message-error"
+        :markdown="renderedError"
+        :trusted-urls="trustedUrls"
+      />
     </div>
     <template v-else-if="isAssistantMessage || isUserMessage">
       <div class="gl-sr-only">
@@ -372,14 +372,16 @@ export default {
         @get-content="onGetContextItemContent"
       />
 
-      <div
+      <markdown-renderer
         ref="content"
-        v-safe-html:[$options.safeHtmlConfigExtension]="messageContent"
         class="duo-chat-message"
         :class="{
           'gl-bg-feedback-info gl-p-4 gl-text-feedback-info': isUserMessage,
         }"
-      ></div>
+        :is-html="hasContentHtml"
+        :markdown="messageContent"
+        :trusted-urls="trustedUrls"
+      />
 
       <documentation-sources v-if="sources" :sources="sources" />
 

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

@@ -0,0 +1,71 @@
+<script>
+import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+// eslint-disable-next-line no-restricted-imports
+import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
+
+export default {
+  name: 'MarkdownRenderer',
+  directives: {
+    SafeHtml,
+  },
+  inject: {
+    // Note, we likely might move away from Provide/Inject for this
+    // and only ship the versions that are currently in the default
+    // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3953#note_1762834219
+    // for more context.
+    renderGFM: {
+      from: 'renderGFM',
+      default: () => (element) => {
+        element.classList.add('gl-markdown', 'gl-compact-markdown', 'gl-text-sm');
+      },
+    },
+    renderMarkdown: {
+      from: 'renderMarkdown',
+      default: () => renderDuoChatMarkdownPreview,
+    },
+  },
+  props: {
+    markdown: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    isHtml: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    trustedUrls: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      renderedMarkdown: '',
+    };
+  },
+  watch: {
+    async markdown() {
+      this.render();
+    },
+  },
+  created() {
+    this.render();
+  },
+  methods: {
+    async render() {
+      this.renderedMarkdown = this.isHtml
+        ? this.markdown
+        : await this.renderMarkdown(this.markdown, this.trustedUrls);
+    },
+  },
+  safeHtmlConfigExtension: {
+    ADD_TAGS: ['copy-code', 'insert-code-snippet'],
+  },
+};
+</script>
+<template>
+  <div ref="content" v-safe-html:[$options.safeHtmlConfigExtension]="renderedMarkdown"></div>
+</template>

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

@@ -1,17 +1,16 @@
 <script>
-import { GlIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { GlIcon } from '@gitlab/ui';
 import MessageFeedback from '../message_feedback.vue';
+import MarkdownRenderer from '../markdown_renderer.vue';
 import BaseMessage from './message_base.vue';
 
 export default {
   name: 'DuoAgentMessage',
   components: {
     BaseMessage,
-    MessageFeedback,
     GlIcon,
-  },
-  directives: {
-    SafeHtml,
+    MessageFeedback,
+    MarkdownRenderer,
   },
   safeHtmlConfigExtension: {
     ADD_TAGS: ['copy-code', 'insert-code-snippet'],
@@ -57,12 +56,13 @@ export default {
         </div>
       </div>
       <slot name="message" v-bind="slotProps">
-        <div
+        <markdown-renderer
           ref="content"
-          v-safe-html:[$options.safeHtmlConfigExtension]="slotProps.htmlContent"
+          :is-html="slotProps.isHtml"
+          :markdown="slotProps.content"
           @insert-code-snippet="onInsertCodeSnippet"
           @copy-code-snippet="onCopyCodeSnippet"
-        ></div>
+        />
       </slot>
 
       <message-feedback v-if="withFeedback" @feedback="$emit('feedback', $event)" />

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

@@ -1,15 +1,14 @@
 <script>
-import { GlIcon, GlTooltipDirective, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
-// eslint-disable-next-line no-restricted-imports
-import { renderDuoChatMarkdownPreview } from '../../../markdown_renderer';
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import MarkdownRenderer from '../markdown_renderer.vue';
 
 export default {
   name: 'DuoBaseMessage',
   components: {
     GlIcon,
+    MarkdownRenderer,
   },
   directives: {
-    SafeHtml,
     GlTooltip: GlTooltipDirective,
   },
   inject: {
@@ -23,10 +22,6 @@ export default {
         element.classList.add('gl-markdown', 'gl-compact-markdown', 'gl-text-sm');
       },
     },
-    renderMarkdown: {
-      from: 'renderMarkdown',
-      default: () => renderDuoChatMarkdownPreview,
-    },
   },
   props: {
     /**
@@ -41,11 +36,25 @@ export default {
     },
   },
   computed: {
+    isDoneStreaming() {
+      // Agentic chat format
+      if (Object.hasOwn(this.message, 'status')) {
+        return this.message.status === 'success';
+      }
+      // Classic chat format
+      return !this.isChunk;
+    },
+    isChunk() {
+      return typeof this.message.chunkId === 'number';
+    },
+    hasContentHtml() {
+      return this.message?.contentHtml?.length > 0;
+    },
     messageContent() {
-      return this.renderMarkdown(this.message.content);
+      return this.hasContentHtml ? this.message.contentHtml : this.message?.content;
     },
     renderedError() {
-      return this.renderMarkdown(this.message.errors?.join('; ') || '');
+      return this.message.errors?.join('; ') || '';
     },
     hasError() {
       return Boolean(this.message?.errors?.length);
@@ -61,7 +70,7 @@ export default {
     hydrateContentWithGFM() {
       if (this.$refs.content) {
         this.$nextTick(() => {
-          this.renderGFM(this.$refs.content, this.message.role);
+          this.renderGFM(this.$refs.content.$el, this.message.role);
         });
       }
     },
@@ -73,6 +82,7 @@ export default {
     class="duo-chat-message gl-w-full gl-flex-grow gl-leading-20 gl-break-anywhere"
     :class="{
       'gl-items-top gl-flex': hasError,
+      'duo-chat-message-complete': isDoneStreaming,
     }"
   >
     <gl-icon
@@ -83,10 +93,10 @@ export default {
       data-testid="error"
     />
     <div ref="content-wrapper" :class="{ 'has-error': hasError }">
-      <div v-if="hasError" ref="error-message" v-safe-html="renderedError"></div>
+      <markdown-renderer v-if="hasError" ref="error-message" :markdown="renderedError" />
       <div v-else>
-        <slot name="message" v-bind="{ content: message.content, htmlContent: messageContent }">
-          <div ref="content" v-safe-html="messageContent"></div>
+        <slot name="message" v-bind="{ content: messageContent, isHtml: hasContentHtml }">
+          <markdown-renderer ref="content" :is-html="hasContentHtml" :markdown="messageContent" />
         </slot>
       </div>
     </div>

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

@@ -65,7 +65,7 @@ export default {
     >
       {{ title }}
     </figcaption>
-    <pre-block ref="content" language="json" class="gl-m-0 !gl-border-0">{{
+    <pre-block ref="content" :languages="['json']" class="gl-m-0 !gl-border-0">{{
       prettyText
     }}</pre-block>
   </figure>

package/src/components/chat/components/duo_chat_message_tool_approval/components/base_tool_params.vue

@@ -169,7 +169,7 @@ export default {
 
     <gl-accordion v-if="message || description" class="-gl-ml-2" :header-level="3">
       <gl-accordion-item v-if="description" class="gl-mb-3" :title="accordionTitle">
-        <pre-block language="markdown">{{ description }}</pre-block>
+        <pre-block :languages="['markdown']">{{ description }}</pre-block>
       </gl-accordion-item>
       <gl-accordion-item v-if="withJsonView" :title="$options.i18n.EXPAND_JSON_VIEW_TITLE">
         <tool-params-json-view :tool-params="toolParams" />

package/src/components/chat/components/duo_chat_message_tool_approval/components/create_commit_tool_params.vue

@@ -70,6 +70,9 @@ export default {
           return sprintf(this.$options.i18n.UNKNOWN_FILE_ACTION_LABEL, { filePath });
       }
     },
+    getActionFileExtension({ file_path: filePath }) {
+      return filePath.split('.').pop() || 'plaintext';
+    },
     getActionContent({
       action,
       content,
@@ -168,7 +171,7 @@ export default {
         class="gl-mb-3"
         :title="$options.i18n.READ_COMMIT_MESSAGE"
       >
-        <pre-block language="markdown">{{ commitMessage }}</pre-block>
+        <pre-block :languages="['markdown']">{{ commitMessage }}</pre-block>
       </gl-accordion-item>
       <gl-accordion-item v-if="actionsCount" :title="$options.i18n.EXPAND_CHANGES">
         <gl-accordion :header-level="4">
@@ -178,7 +181,9 @@ export default {
             class="gl-mb-3"
             :title="getActionTitle(action)"
           >
-            <pre-block language="diff">{{ getActionContent(action) }}</pre-block>
+            <pre-block :languages="[getActionFileExtension(action), 'diff']">{{
+              getActionContent(action)
+            }}</pre-block>
           </gl-accordion-item>
         </gl-accordion>
       </gl-accordion-item>

package/src/components/chat/components/duo_chat_message_tool_approval/components/pre_block.vue

@@ -1,8 +1,8 @@
 <script>
 import { GlButton, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
 import { translate } from '../../../../../utils/i18n';
+import { highlightElement } from '../../../../../utils/highlight';
 import { copyToClipboard } from '../../utils';
-import { highlightElement } from '../services/highlight';
 
 export default {
   name: 'PreBlock',
@@ -13,10 +13,15 @@ export default {
     GlButton,
   },
   props: {
-    language: {
-      type: String,
+    languages: {
+      type: Array,
       required: false,
-      default: 'plaintext',
+      default: () => [],
+    },
+  },
+  computed: {
+    languageClasses() {
+      return this.languages.map((lang) => `language-${lang}`);
     },
   },
   async mounted() {
@@ -30,7 +35,7 @@ export default {
         const codeElement = this.$el.querySelector('code');
 
         if (codeElement) {
-          highlightElement(codeElement);
+          highlightElement(codeElement, this.languages);
         }
       } catch (error) {
         // Silently fail if highlight.js is not available
@@ -77,5 +82,5 @@ export default {
     />
   </span>
     
-  <code ref="codeElement" :class="`language-${language}`" class="!gl-leading-20 gl-break-all"><slot></slot></code></pre>
+  <code ref="codeElement" :class="languageClasses" class="!gl-leading-20 gl-break-all"><slot></slot></code></pre>
 </template>

package/src/components/chat/components/duo_chat_message_tool_approval/components/tool_params_json_view.vue

@@ -32,7 +32,7 @@ export default {
     <figcaption class="gl-text-subtle">
       {{ $options.i18n.REQUEST_TEXT }}
     </figcaption>
-    <pre-block v-if="hasToolParams" language="json" data-testid="tool-parameters">{{
+    <pre-block v-if="hasToolParams" :languages="['json']" data-testid="tool-parameters">{{
       JSON.stringify(toolParams, null, 2)
     }}</pre-block>
     <span v-else class="gl-text-sm gl-text-gray-500" data-testid="no-parameters-message">

package/src/components/chat/duo_chat.vue

@@ -732,7 +732,7 @@ export default {
         'resizable-content': shouldRenderResizable,
         'duo-chat-drawer': !shouldRenderResizable,
       }"
-      class="markdown-code-block duo-chat gl-bottom-0 gl-flex gl-max-h-full gl-flex-col"
+      class="duo-chat gl-bottom-0 gl-flex gl-max-h-full gl-flex-col"
       role="complementary"
       data-testid="chat-component"
     >

package/src/components/chat/markdown_renderer.js

@@ -1,13 +1,32 @@
 // eslint-disable-next-line no-restricted-imports
-import { Marked } from 'marked';
+import { Marked, Renderer } from 'marked';
 import markedBidi from 'marked-bidi';
+import { markedHighlight } from 'marked-highlight';
 import DOMPurify from 'dompurify';
+import { highlightCode } from '../../utils/highlight';
 
+const baseOptions = {
+  async: true,
+  breaks: false,
+  gfm: false,
+};
+const baseRenderer = new Renderer({ ...baseOptions });
+const customCodeRenderer = {
+  code(...args) {
+    const baseCode = baseRenderer.code(...args);
+
+    // Insert copy-code elements inside the <pre> tag
+    return baseCode
+      .replace(
+        '<pre>',
+        '<div class="gl-relative gl-flex js-markdown-code duo-message-pre-block !focus:gl-focus" tabindex="0">\n<copy-code></copy-code>\n<insert-code-snippet></insert-code-snippet>\n<pre class="code code-syntax-highlight-theme duo-message-pre-block gl-grow gl-overflow-auto gl-grid">'
+      )
+      .replace('</pre>', '</pre></div>');
+  },
+};
 const duoMarked = new Marked([
   {
-    async: false,
-    breaks: false,
-    gfm: false,
+    ...baseOptions,
   },
   markedBidi(),
 ]);
@@ -134,13 +153,13 @@ function isHtml(markup) {
   return Array.from(doc.body.childNodes).some((n) => n.nodeType === Node.ELEMENT_NODE);
 }
 
-export function renderDuoChatMarkdownPreview(md, { trustedUrls = [] } = {}) {
+export async function renderDuoChatMarkdownPreview(md, { trustedUrls = [] } = {}) {
   if (!md) return '';
 
   DOMPurify.addHook('beforeSanitizeElements', handleImageElements);
   DOMPurify.addHook('afterSanitizeAttributes', sanitizeLinksHook(trustedUrls));
 
-  const parsedMarkdown = isHtml(md) ? md : duoMarked.parse(md.toString());
+  const parsedMarkdown = isHtml(md) ? md : await duoMarked.parse(md.toString());
 
   const sanitized = DOMPurify.sanitize(parsedMarkdown, config);
 
@@ -149,6 +168,18 @@ export function renderDuoChatMarkdownPreview(md, { trustedUrls = [] } = {}) {
   return sanitized;
 }
 
+duoMarked.use(
+  markedHighlight({
+    async: true,
+    langPrefix: 'hljs language-',
+    highlight(code, lang) {
+      return highlightCode(code, [lang]);
+    },
+  })
+);
+
+duoMarked.use({ renderer: customCodeRenderer });
+
 export function addDuoMarkdownPlugin(plugin) {
   duoMarked.use(plugin);
 }

package/src/components/chat/mock_data.js

@@ -91,7 +91,7 @@ export const MOCK_TOOL_MESSAGE = {
 
 export const MOCK_AGENT_MESSAGE = {
   id: '123',
-  content: `I'll write a simple Python function with comments for you. Here's an example:\n\n<div class="gl-relative markdown-code-block js-markdown-code"><pre><code class="language-python"><span class="hljs-keyword">def</span> <span class="hljs-title function_">factorial</span>(<span class="hljs-params">n</span>):
+  contentHtml: `I'll write a simple Python function with comments for you. Here's an example:\n\n<div class="gl-relative markdown-code-block js-markdown-code"><pre><code class="language-python"><span class="hljs-keyword">def</span> <span class="hljs-title function_">factorial</span>(<span class="hljs-params">n</span>):
     <span class="hljs-string">&quot;&quot;&quot;
     Calculate the factorial of a non-negative integer.
 
@@ -118,6 +118,35 @@ export const MOCK_AGENT_MESSAGE = {
   message_type: MESSAGE_MODEL_ROLES.agent,
 };
 
+export const MOCK_AGENT_MESSAGE_WITH_MARKDOWN = {
+  status: 'success',
+  content:
+    "The `GENERATE_SERIES` function in PostgreSQL creates a set of values from a start to an end point, which is incredibly useful for generating sequences, filling gaps in data, or creating test datasets.\n\n#### Basic Syntax\n\n```sql\n-- Generate integers from 1 to 10\nSELECT * FROM GENERATE_SERIES(1, 10);\n\n-- Generate with a step value (every 2)\nSELECT * FROM GENERATE_SERIES(1, 10, 2);\n-- Returns: 1, 3, 5, 7, 9\n```\n\n#### Common Use Cases\n\n**1. Generate date ranges:**\n```sql\n-- Generate all dates in January 2025\nSELECT GENERATE_SERIES(\n  '2025-01-01'::timestamp,\n  '2025-01-31'::timestamp,\n  '1 day'::interval\n) AS date;\n```\n\n**2. Fill missing data gaps:**\n```sql\n-- Find missing IDs in a sequence\nSELECT missing_id\nFROM GENERATE_SERIES(1, 100) AS missing_id\nWHERE missing_id NOT IN (SELECT id FROM your_table);\n```\n\n**3. Create test data:**\n```sql\n-- Generate 1000 rows of test data\nSELECT \n  id,\n  'User ' || id AS username,\n  NOW() - (id || ' days')::interval AS created_at\nFROM GENERATE_SERIES(1, 1000) AS id;\n```\n\n**4. Time-based aggregations:**\n```sql\n-- Group data by hour, even for hours with no data\nSELECT \n  hour_slot,\n  COUNT(orders.id) AS order_count\nFROM GENERATE_SERIES(\n  '2025-01-01 00:00'::timestamp,\n  '2025-01-01 23:00'::timestamp,\n  '1 hour'::interval\n) AS hour_slot\nLEFT JOIN orders ON DATE_TRUNC('hour', orders.created_at) = hour_slot\nGROUP BY hour_slot\nORDER BY hour_slot;\n```\n\n**Key points:**\n- Works with integers, bigints, numeric types, and timestamps\n- The step parameter is optional (defaults to 1 for numbers, 1 day for timestamps)\n- For descending sequences, use a negative step: `GENERATE_SERIES(10, 1, -1)`\n- Can be used in `FROM` clauses, joins, or subqueries",
+  timestamp: '2025-11-29T13:32:50.545772+00:00',
+  tool_info: null,
+  message_type: 'agent',
+  correlation_id: null,
+  message_sub_type: null,
+  additional_context: null,
+};
+
+export const MOCK_AGENT_MESSAGE_WITH_LONG_CODE_BLOCK = {
+  status: 'success',
+  content: `
+  \`\`\`javascript
+  ${Array.from({ length: 500 })
+    .map(() => 'console.log("Hello world")')
+    .join('\n\n')}
+  \`\`\`
+  `,
+  timestamp: '2025-11-29T13:32:50.545772+00:00',
+  tool_info: null,
+  message_type: 'agent',
+  correlation_id: null,
+  message_sub_type: null,
+  additional_context: null,
+};
+
 export const MOCK_TOOL_MESSAGE_WITH_LINK = {
   id: '123',
   content: "Search for 'duo.*chat.*message' in directory",

package/src/components/chat/web_duo_chat.vue

@@ -738,7 +738,7 @@ export default {
 <template>
   <div
     id="chat-component"
-    class="markdown-code-block duo-chat web-only gl-bottom-0 gl-flex gl-max-h-full gl-flex-col"
+    class="duo-chat web-only gl-bottom-0 gl-flex gl-max-h-full gl-flex-col"
     role="complementary"
     data-testid="chat-component"
   >

package/src/components/ui/duo_layout/duo_layout.vue

@@ -81,7 +81,7 @@ export default {
     @resize:end="updateSize"
   >
     <aside
-      class="markdown-code-block duo-chat gl-align-items gl-bottom-0 gl-flex gl-h-full gl-max-h-full gl-flex-row gl-border-subtle"
+      class="duo-chat gl-align-items gl-bottom-0 gl-flex gl-h-full gl-max-h-full gl-flex-row gl-border-subtle"
     >
       <main
         class="content flex-none gl-border-r gl-flex gl-h-full gl-min-w-0 gl-grow gl-overflow-y-auto gl-border-subtle"