@gitlab/duo-ui 15.2.0 → 15.4.0

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

@@ -13,8 +13,7 @@ $duo-code-scrim-top-gradient: linear-gradient(to top, rgba($gray-10, 0), $gray-1
 
   pre {
     box-shadow: none !important;
-    color: var(--duo-chat-message-pre-color, inherit) !important;
-    @apply gl-border gl-max-h-[60vh] gl-px-4 gl-py-3 gl-text-inherit;
+    @apply gl-border gl-max-h-[60vh] gl-scroll-smooth gl-px-4 gl-py-3 gl-text-inherit;
     background-color: var(--gl-background-color-preformat, var(--gl-background-color-default));
 
     &::before,
@@ -44,9 +43,10 @@ $duo-code-scrim-top-gradient: linear-gradient(to top, rgba($gray-10, 0), $gray-1
 
   pre code {
     @apply gl-text-sm;
-    @apply gl-leading-1;
     @apply gl-bg-transparent;
-    white-space: inherit;
+    @apply gl-block;
+    @apply gl-whitespace-pre-wrap;
+    @apply gl-break-all;
   }
 
   p:not(:last-of-type) {
@@ -87,15 +87,6 @@ $duo-code-scrim-top-gradient: linear-gradient(to top, rgba($gray-10, 0), $gray-1
   copy-code {
     margin-right: $gl-spacing-scale-8;
   }
-
-  .js-markdown-code.markdown-code-block:hover {
-    copy-code,
-    copy-code:focus-within,
-    insert-code-snippet,
-    insert-code-snippet:focus-within {
-      @apply gl-opacity-10;
-    }
-  }
 }
 
 .insert-code-hidden {
@@ -108,13 +99,18 @@ $duo-code-scrim-top-gradient: linear-gradient(to top, rgba($gray-10, 0), $gray-1
   }
 }
 
-.duo-message-pre-block:focus,
-.duo-message-pre-block:hover {
-  .copy-to-clipboard-button-container {
-    opacity: 1;
+.duo-chat-message-complete {
+  .duo-message-pre-block:focus,
+  .duo-message-pre-block:hover,
+  .duo-message-pre-block:has(button:focus) {
+    copy-code,
+    insert-code-snippet,
+    .copy-to-clipboard-button-container {
+      opacity: 1;
+    }
   }
 }
 
-.duo-message-pre-block .copy-to-clipboard-button-container:has(button:focus) {
-  opacity: 1;
+.duo-chat-message-error > p {
+  margin: 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/components/duo_chat_threads/duo_chat_threads.vue

@@ -3,6 +3,7 @@ import { GlButton, GlAvatar } from '@gitlab/ui';
 import { sprintf, translate } from '../../../../utils/i18n';
 import { formatLocalizedDate } from '../../../../utils/date';
 import DuoChatThreadsEmpty from './duo_chat_threads_empty.vue';
+import DuoChatThreadsSkeleton from './duo_chat_threads_skeleton.vue';
 
 const i18n = {
   CHAT_HISTORY_INFO: translate(
@@ -21,6 +22,7 @@ export default {
     GlButton,
     GlAvatar,
     DuoChatThreadsEmpty,
+    DuoChatThreadsSkeleton,
   },
 
   props: {
@@ -32,6 +34,11 @@ export default {
       type: Array,
       required: true,
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 
   computed: {
@@ -93,7 +100,8 @@ export default {
 
 <template>
   <div class="gl-flex gl-flex-col gl-overflow-hidden">
-    <template v-if="hasThreads">
+    <duo-chat-threads-skeleton v-if="loading" />
+    <template v-else-if="hasThreads">
       <div class="gl-grow gl-overflow-y-scroll gl-px-4 gl-py-5">
         <div v-for="(threadsForDate, date) in groupedThreads" :key="date" class="gl-mb-3">
           <div

package/src/components/chat/components/duo_chat_threads/duo_chat_threads_skeleton.vue

@@ -0,0 +1,39 @@
+<script>
+import { translate } from '../../../../utils/i18n';
+
+const i18n = {
+  LOADING_THREADS: translate('DuoChat.loadingThreads', 'Loading chat history...'),
+};
+
+export default {
+  name: 'DuoChatThreadsSkeleton',
+  i18n,
+};
+</script>
+
+<template>
+  <div class="gl-p-6">
+    <span class="gl-sr-only" role="status" aria-live="polite" aria-atomic="true">{{
+      $options.i18n.LOADING_THREADS
+    }}</span>
+    <div v-for="groupIndex in 3" :key="groupIndex" class="gl-mb-3">
+      <div
+        class="gl-animate-skeleton-loader gl-mb-3 gl-h-4 !gl-max-w-26 gl-rounded-default"
+        style="animation-delay: 0ms"
+        data-testid="chat-threads-skeleton-date-header"
+      ></div>
+      <div
+        v-for="itemIndex in 2"
+        :key="`group${groupIndex}-item${itemIndex}`"
+        class="gl-mb-5 gl-flex gl-items-center gl-gap-3"
+        style="animation-delay: 0ms"
+        data-testid="chat-threads-skeleton-item"
+      >
+        <div class="gl-animate-skeleton-loader gl-h-8 gl-w-8 gl-shrink-0 gl-rounded-full"></div>
+        <div
+          class="gl-animate-skeleton-loader gl-h-5 !gl-max-w-48 gl-grow gl-rounded-default"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>

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);
 }