@gitlab/ui 74.3.0 → 74.4.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 08 Feb 2024 04:02:28 GMT
+ * Generated on Fri, 09 Feb 2024 13:52:54 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 08 Feb 2024 04:02:28 GMT
+ * Generated on Fri, 09 Feb 2024 13:52:54 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 08 Feb 2024 04:02:28 GMT
+ * Generated on Fri, 09 Feb 2024 13:52:54 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 08 Feb 2024 04:02:28 GMT
+ * Generated on Fri, 09 Feb 2024 13:52:54 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 08 Feb 2024 04:02:28 GMT
+// Generated on Fri, 09 Feb 2024 13:52:54 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 08 Feb 2024 04:02:28 GMT
+// Generated on Fri, 09 Feb 2024 13:52:54 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "74.3.0",
+  "version": "74.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -72,6 +72,8 @@
     "echarts": "^5.3.2",
     "iframe-resizer": "^4.3.2",
     "lodash": "^4.17.20",
+    "marked": "^12.0.0",
+    "marked-bidi": "^1.0.8",
     "portal-vue": "^2.1.6",
     "vue-runtime-helpers": "^1.1.2"
   },

package/src/components/base/card/card.stories.js

@@ -1,30 +1,31 @@
 import readme from './card.md';
 import GlCard from './card.vue';
 
-const components = {
-  GlCard,
-};
-
-const template = `
-<gl-card>
-  <template #header>
-    <h3 class="gl-my-0 gl-font-weight-bold gl-font-lg">This is a custom header</h3>
-  </template>
-  <template #default>
-    Hello World
-  </template>
-  <template #footer>
-    <span>This is a custom footer</span>
-  </template>
-</gl-card>`;
+const generateProps = ({ headerClass, bodyClass, footerClass } = {}) => ({
+  headerClass,
+  bodyClass,
+  footerClass,
+});
 
 const Template = (args, { argTypes }) => ({
+  components: { GlCard },
   props: Object.keys(argTypes),
-  components,
-  template,
+  template: `
+      <gl-card :header-class="headerClass" :body-class="bodyClass" :footer-class="footerClass">
+        <template #header>
+          <h3 class="gl-my-0 gl-font-weight-bold gl-font-lg">This is a custom header</h3>
+        </template>
+        <template #default>
+          Hello World
+        </template>
+        <template #footer>
+          <span>This is a custom footer</span>
+        </template>
+      </gl-card>`,
 });
 
 export const Default = Template.bind({});
+Default.args = generateProps();
 
 export default {
   title: 'base/card',
@@ -36,4 +37,12 @@ export default {
       },
     },
   },
+  argTypes: {
+    headerClass: { control: 'text' },
+    bodyClass: { control: 'text' },
+    footerClass: { control: 'text' },
+    header: { control: { disable: true } },
+    default: { control: { disable: true } },
+    footer: { control: { disable: true } },
+  },
 };

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

@@ -11,7 +11,11 @@ The component represents a Duo Chat message.
 There are two ways of pretty-rendering a message's content in the component:
 
 - dependency injection, providing functions to convert raw markdown into HTML,
-- sending `contentHtml` prop as part of the `message` property,
+- sending `contentHtml` prop as part of the `message` property
+
+The component ships a default markdown renderer based on `marked`. It should produce
+reasonably well-looking results while streaming messages. The implementation can be found
+[here](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/components/experimental/duo/chat/markdown_renderer.js).
 
 ### Injecting functions
 

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

@@ -19,14 +19,14 @@ describe('DuoChatMessage', () => {
 
   const componentFactory = ({ message = MOCK_USER_PROMPT_MESSAGE, options = {} } = {}) => {
     return shallowMount(GlDuoChatMessage, {
-      ...options,
-      propsData: {
-        message,
-      },
       provide: {
         renderMarkdown,
         renderGFM,
       },
+      ...options,
+      propsData: {
+        message,
+      },
     });
   };
 
@@ -115,7 +115,7 @@ describe('DuoChatMessage', () => {
 
   describe('message output', () => {
     it('outputs errors if they are present', async () => {
-      const errors = ['foo', 'bar', 'baz'];
+      const errors = ['error1', 'error2', 'error3'];
 
       createComponent({
         message: {
@@ -129,9 +129,10 @@ describe('DuoChatMessage', () => {
 
       await nextTick();
 
-      expect(findContent().text()).toContain(errors[0]);
-      expect(findContent().text()).toContain(errors[1]);
-      expect(findContent().text()).toContain(errors[2]);
+      const contentText = findContent().text();
+      expect(contentText).toContain(errors[0]);
+      expect(contentText).toContain(errors[1]);
+      expect(contentText).toContain(errors[2]);
     });
 
     it('outputs contentHtml if it is present', async () => {
@@ -228,4 +229,167 @@ describe('DuoChatMessage', () => {
       expect(renderGFM).toHaveBeenCalled();
     });
   });
+
+  describe('default renderers', () => {
+    it('outputs errors if they are present', async () => {
+      const errors = ['error1', 'error2', 'error3'];
+
+      createComponent({
+        options: {
+          provide: null,
+        },
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          errors,
+          contentHtml: 'fooHtml barHtml',
+          content: 'foo bar',
+          chunks: ['a', 'b', 'c'],
+        },
+      });
+
+      await nextTick();
+
+      const contentText = findContent().text();
+      expect(contentText).toContain(errors[0]);
+      expect(contentText).toContain(errors[1]);
+      expect(contentText).toContain(errors[2]);
+    });
+
+    it('outputs contentHtml if it is present', async () => {
+      createComponent({
+        options: {
+          provide: null,
+        },
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          errors: [],
+          contentHtml: 'fooHtml barHtml',
+          content: 'foo bar',
+          chunks: ['a', 'b', 'c'],
+        },
+      });
+
+      await nextTick();
+
+      expect(findContent().html()).toBe(
+        '<div class="gl-markdown gl-compact-markdown">fooHtml barHtml</div>'
+      );
+    });
+
+    it('outputs markdown content if there is no contentHtml', async () => {
+      createComponent({
+        options: {
+          provide: null,
+        },
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          errors: [],
+          contentHtml: '',
+          content: 'foo bar',
+          chunks: ['a', 'b', 'c'],
+        },
+      });
+
+      await nextTick();
+
+      expect(findContent().html()).toBe('<div>\n  <p>foo bar</p>\n</div>');
+    });
+
+    it('outputs chunks if there is no content', async () => {
+      createComponent({
+        options: {
+          provide: null,
+        },
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          errors: [],
+          contentHtml: '',
+          content: '',
+          chunks: ['a', 'b', 'c'],
+        },
+      });
+
+      await nextTick();
+
+      expect(findContent().html()).toBe('<div>\n  <p>abc</p>\n</div>');
+    });
+
+    it('sanitizes html produced by errors', async () => {
+      createComponent({
+        options: {
+          provide: null,
+        },
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          errors: ['[click here](javascript:prompt(1))'],
+          contentHtml: '',
+          content: '',
+          chunks: [],
+        },
+      });
+
+      await nextTick();
+
+      expect(findContent().html()).toBe('<div>\n  <p><a>click here</a></p>\n</div>');
+    });
+
+    it('sanitizes html produced by content', async () => {
+      createComponent({
+        options: {
+          provide: null,
+        },
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          errors: [],
+          contentHtml: '',
+          content: '[click here](javascript:prompt(1))',
+          chunks: [],
+        },
+      });
+
+      await nextTick();
+
+      expect(findContent().html()).toBe('<div>\n  <p><a>click here</a></p>\n</div>');
+    });
+
+    it('sanitizes html produced by chunks', async () => {
+      createComponent({
+        options: {
+          provide: null,
+        },
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          errors: [],
+          contentHtml: '',
+          content: '',
+          chunks: ['[click here]', '(javascript:prompt(1))'],
+        },
+      });
+
+      await nextTick();
+
+      expect(findContent().html()).toBe('<div>\n  <p><a>click here</a></p>\n</div>');
+    });
+
+    it('sanitizes contentHtml', async () => {
+      createComponent({
+        options: {
+          provide: null,
+        },
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          errors: [],
+          contentHtml: `<a href="javascript:prompt(1)">click here</a>`,
+          content: '',
+          chunks: [],
+        },
+      });
+
+      await nextTick();
+
+      expect(findContent().html()).toBe(
+        '<div class="gl-markdown gl-compact-markdown"><a>click here</a></div>'
+      );
+    });
+  });
 });

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

@@ -3,6 +3,8 @@ import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
 import { SafeHtmlDirective as SafeHtml } from '../../../../../../directives/safe_html/safe_html';
 import { MESSAGE_MODEL_ROLES } from '../../constants';
 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 { CopyCodeElement } from './copy_code_element';
 
 const concatUntilEmpty = (arr) => {
@@ -27,7 +29,22 @@ export default {
   directives: {
     SafeHtml,
   },
-  inject: ['renderGFM', 'renderMarkdown'],
+  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');
+      },
+    },
+    renderMarkdown: {
+      from: 'renderMarkdown',
+      default: () => renderDuoChatMarkdownPreview,
+    },
+  },
   props: {
     /**
      * A message object

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

@@ -33,6 +33,33 @@
   }
 }
 
+.duo-chat-history {
+  scroll-behavior: smooth;
+
+  /*
+  Browsers a are pretty good at keeping the focus on an element while
+  the parent element grows in size. With this we mark all child elements
+  of the chat history as "non" anchors.
+  https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor
+  */
+  * {
+    overflow-anchor: none;
+  }
+
+  /*
+  Right at the bottom of the chat history we add a scroll-anchor element.
+  This scroll-anchor element is the only "possible" anchor. The beauty of it:
+  It only will be used as an anchor _if_ it is currently inside the view port.
+  So if the user manually scrolls up while a chunked message is coming in,
+  it won't stick to the bottom while the message still loads.
+  */
+  .scroll-anchor {
+    overflow-anchor: auto;
+    height: 1px;
+    margin-top: -1px; // In order to not add 1px vertically, we add a negative margin
+  }
+}
+
 .duo-chat-input {
   @include gl-display-flex;
   @include gl-flex-direction-column;
@@ -61,7 +88,7 @@
 .slash-commands {
   @include gl-mt-n2;
 
-  .active-command{
+  .active-command {
     @include gl-bg-gray-50;
     @include gl-rounded-base;
   }

package/src/components/experimental/duo/chat/duo_chat.spec.js

@@ -127,13 +127,15 @@ describe('GlDuoChat', () => {
 
     describe('when messages exist', () => {
       it('scrolls to the bottom on load', async () => {
+        const scrollIntoViewMock = jest.fn();
+        window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+
         createComponent({ propsData: { messages } });
-        const { element } = findChatComponent();
-        jest.spyOn(element, 'scrollHeight', 'get').mockReturnValue(200);
 
         await nextTick();
 
-        expect(element.scrollTop).toEqual(200);
+        expect(scrollIntoViewMock).toHaveBeenCalledTimes(1);
+        window.HTMLElement.prototype.scrollIntoView = undefined;
       });
     });
 

package/src/components/experimental/duo/chat/duo_chat.stories.js

@@ -9,7 +9,6 @@ import {
   MOCK_USER_PROMPT_MESSAGE,
   generateMockResponseChunks,
   renderGFM,
-  renderMarkdown,
 } from './mock_data';
 
 const slashCommands = [
@@ -72,7 +71,6 @@ export const Default = (args, { argTypes }) => ({
   components: { GlDuoChat },
   props: Object.keys(argTypes),
   provide: {
-    renderMarkdown,
     renderGFM,
   },
   template: `
@@ -101,7 +99,6 @@ export const Interactive = (args, { argTypes }) => ({
   components: { GlDuoChat, GlButton },
   props: Object.keys(argTypes),
   provide: {
-    renderMarkdown,
     renderGFM,
   },
   data() {
@@ -160,7 +157,7 @@ export const Interactive = (args, { argTypes }) => ({
         this.logerInfo += `New response: ${JSON.stringify(newResponse)}\n\n`;
         this.timeout = setStoryTimeout(() => {
           this.mockResponseFromAi();
-        }, Math.floor(Math.random() * 251) + 50);
+        }, Math.floor(Math.random() * 251) + 16);
       }
     },
   },
@@ -199,7 +196,7 @@ export const Slots = (args, { argTypes }) => ({
   components: { GlDuoChat, GlAlert },
   props: Object.keys(argTypes),
   provide: {
-    renderMarkdown,
+    renderMarkdown: (md) => `THIS IS ALTERED MARKDOWN: ${md}`,
     renderGFM,
   },
   template: `

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

@@ -292,9 +292,7 @@ export default {
     async scrollToBottom() {
       await this.$nextTick();
 
-      if (this.$refs.drawer) {
-        this.$refs.drawer.scrollTop = this.$refs.drawer.scrollHeight;
-      }
+      this.$refs.anchor?.scrollIntoView?.();
     },
     onTrackFeedback(event) {
       /**
@@ -422,7 +420,7 @@ export default {
       ></gl-alert>
 
       <section
-        class="gl-display-flex gl-flex-direction-column gl-justify-content-end gl-flex-grow-1 gl-border-b-0 gl-bg-gray-10"
+        class="duo-chat-history gl-display-flex gl-flex-direction-column gl-justify-content-end gl-flex-grow-1 gl-border-b-0 gl-bg-gray-10"
       >
         <transition-group
           tag="div"
@@ -462,6 +460,7 @@ export default {
         <transition name="loader">
           <gl-duo-chat-loader v-if="isLoading" :tool-name="toolName" class="gl-px-0!" />
         </transition>
+        <div ref="anchor" class="scroll-anchor"></div>
       </section>
     </div>
     <footer

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

@@ -0,0 +1,20 @@
+// eslint-disable-next-line no-restricted-imports
+import { Marked } from 'marked';
+import markedBidi from 'marked-bidi';
+
+const duoMarked = new Marked([
+  {
+    async: false,
+    breaks: false,
+    gfm: false,
+  },
+  markedBidi(),
+]);
+
+export function renderDuoChatMarkdownPreview(md) {
+  try {
+    return md ? duoMarked.parse(md.toString()) : '';
+  } catch {
+    return md;
+  }
+}

package/src/components/experimental/duo/chat/markdown_renderer.spec.js

@@ -0,0 +1,55 @@
+import { Parser } from 'marked';
+import { renderDuoChatMarkdownPreview } from './markdown_renderer';
+
+describe('Duo Chat Markdown renderer', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('renders a few edge cases', () => {
+    expect(renderDuoChatMarkdownPreview('')).toEqual('');
+    expect(renderDuoChatMarkdownPreview(null)).toEqual('');
+    expect(renderDuoChatMarkdownPreview(undefined)).toEqual('');
+    expect(renderDuoChatMarkdownPreview(5)).toEqual('<p>5</p>\n');
+  });
+
+  it('renders a simple paragraph', () => {
+    expect(renderDuoChatMarkdownPreview('Hello world')).toEqual('<p>Hello world</p>\n');
+  });
+
+  it('auto-closes an open code block', () => {
+    expect(renderDuoChatMarkdownPreview('```yaml\n# comment')).toEqual(
+      '<pre><code class="language-yaml"># comment\n</code></pre>\n'
+    );
+  });
+
+  it('renders standard markdown syntax', () => {
+    expect(renderDuoChatMarkdownPreview('*italic*')).toEqual(`<p><em>italic</em></p>\n`);
+    expect(renderDuoChatMarkdownPreview('_italic_')).toEqual(`<p><em>italic</em></p>\n`);
+    expect(renderDuoChatMarkdownPreview('**bold**')).toEqual(`<p><strong>bold</strong></p>\n`);
+    expect(renderDuoChatMarkdownPreview('~~strike~~')).toEqual(`<p><del>strike</del></p>\n`);
+    expect(renderDuoChatMarkdownPreview('https://example.org')).toEqual(
+      `<p><a href="https://example.org">https://example.org</a></p>\n`
+    );
+    expect(renderDuoChatMarkdownPreview('[example](https://example.org)')).toEqual(
+      `<p><a href="https://example.org">example</a></p>\n`
+    );
+    expect(renderDuoChatMarkdownPreview('1. first\n2. second')).toEqual(
+      `<ol>\n<li>first</li>\n<li>second</li>\n</ol>\n`
+    );
+    expect(renderDuoChatMarkdownPreview('- first\n- second')).toEqual(
+      `<ul>\n<li>first</li>\n<li>second</li>\n</ul>\n`
+    );
+    expect(renderDuoChatMarkdownPreview('* first\n* second')).toEqual(
+      `<ul>\n<li>first</li>\n<li>second</li>\n</ul>\n`
+    );
+  });
+
+  it('returns content as-is if marked throws', () => {
+    jest.spyOn(Parser.prototype, 'parse').mockImplementationOnce(() => {
+      throw new Error('I am a broken parser');
+    });
+
+    expect(renderDuoChatMarkdownPreview('Hello world')).toEqual('Hello world');
+  });
+});

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

@@ -39,15 +39,25 @@ export const MOCK_RESPONSE_MESSAGE_FOR_STREAMING = {
   id: '123',
   content: `To change your password in GitLab:
 
-  Log in to your GitLab account.
-  Select your avatar in the top right corner and choose Edit profile.
-  On the left sidebar, select Password.
-  Enter your current password in the Current password field.
-  Enter your new password in the New password and Password confirmation fields.
-  Select Save password.
-  If you don't know your current password, select the I forgot my password link to reset it.
-  
-  GitLab enforces password requirements when you choose a new password.`,
+  1. Log in to your GitLab account.
+  2. Select your avatar in the top right corner and choose Edit profile.
+  3. On the left sidebar, select Password.
+  4. Enter your current password in the Current password field.
+  5. Enter your new password in the New password and Password confirmation fields.
+  6. Select Save password.
+  7. If you don't know your current password, select the I forgot my password link to reset it.
+
+  GitLab enforces password requirements when you choose a new password.
+
+  ~~~yaml
+  # And here is a
+  # code block
+  everyone:
+    likes:
+      yaml: true
+  ~~~
+  which is rendered while streaming.
+  `,
   contentHtml: '',
   role: 'assistant',
   extras: {},