@gitlab/ui 71.11.1 → 72.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "71.11.1",
+  "version": "72.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -1,11 +1,7 @@
 import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
-import {
-  MOCK_USER_PROMPT_MESSAGE,
-  MOCK_RESPONSE_MESSAGE,
-  MOCK_CHUNK_RESPONSE_MESSAGE,
-} from '../../mock_data';
+import { MOCK_USER_PROMPT_MESSAGE, MOCK_RESPONSE_MESSAGE } from '../../mock_data';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources.vue';
 import GlDuoChatMessage from './duo_chat_message.vue';
 
@@ -39,7 +35,7 @@ describe('DuoChatMessage', () => {
   };
 
   beforeEach(() => {
-    renderMarkdown = jest.fn().mockImplementation((val) => val);
+    renderMarkdown = jest.fn().mockImplementation((val) => `markdown: ${val}`);
     renderGFM = jest.fn();
   });
 
@@ -53,7 +49,7 @@ describe('DuoChatMessage', () => {
     expect(customElements.get('copy-code')).toBeDefined();
   });
 
-  describe('rendering', () => {
+  describe('rendering with user message', () => {
     beforeEach(() => {
       renderMarkdown.mockImplementation(() => mockMarkdownContent);
       createComponent();
@@ -67,18 +63,16 @@ describe('DuoChatMessage', () => {
       expect(wrapper.text()).toBe(mockMarkdownContent);
     });
 
-    describe('user message', () => {
-      it('does not render the documentation sources component', () => {
-        expect(findDocumentSources().exists()).toBe(false);
-      });
+    it('does not render the documentation sources component', () => {
+      expect(findDocumentSources().exists()).toBe(false);
+    });
 
-      it('does not render the user feedback component', () => {
-        expect(findUserFeedback().exists()).toBe(false);
-      });
+    it('does not render the user feedback component', () => {
+      expect(findUserFeedback().exists()).toBe(false);
     });
   });
 
-  describe('rendering - with assistant message', () => {
+  describe('rendering with assistant message', () => {
     beforeEach(() => {
       createComponent({
         message: MOCK_RESPONSE_MESSAGE,
@@ -120,21 +114,16 @@ describe('DuoChatMessage', () => {
   });
 
   describe('message output', () => {
-    it('hydrates the message with GLFM when mounting the component', async () => {
-      createComponent();
-      await nextTick();
-      expect(renderGFM).toHaveBeenCalled();
-    });
-
-    it('outputs errors if message has no content', async () => {
+    it('outputs errors if they are present', async () => {
       const errors = ['foo', 'bar', 'baz'];
 
       createComponent({
         message: {
           ...MOCK_USER_PROMPT_MESSAGE,
-          contentHtml: '',
-          content: '',
           errors,
+          contentHtml: 'fooHtml barHtml',
+          content: 'foo bar',
+          chunks: ['a', 'b', 'c'],
         },
       });
 
@@ -145,277 +134,98 @@ describe('DuoChatMessage', () => {
       expect(findContent().text()).toContain(errors[2]);
     });
 
-    describe('message updates watcher', () => {
-      const newContent = 'new foo content';
-      beforeEach(() => {
-        createComponent();
-      });
-
-      it('listens to the message changes', async () => {
-        expect(findContent().text()).toContain(MOCK_USER_PROMPT_MESSAGE.content);
-        // setProps is justified here because we are testing the component's
-        // reactive behavior which consistutes an exception
-        // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
-        wrapper.setProps({
-          message: {
-            ...MOCK_USER_PROMPT_MESSAGE,
-            contentHtml: `<p>${newContent}</p>`,
-          },
-        });
-        await nextTick();
-        expect(findContent().text()).not.toContain(MOCK_USER_PROMPT_MESSAGE.content);
-        expect(findContent().text()).toContain(newContent);
-      });
-
-      it('prioritises the output of contentHtml over content', async () => {
-        // setProps is justified here because we are testing the component's
-        // reactive behavior which consistutes an exception
-        // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
-        wrapper.setProps({
-          message: {
-            ...MOCK_USER_PROMPT_MESSAGE,
-            contentHtml: `<p>${MOCK_USER_PROMPT_MESSAGE.content}</p>`,
-            content: newContent,
-          },
-        });
-        await nextTick();
-        expect(findContent().text()).not.toContain(newContent);
-        expect(findContent().text()).toContain(MOCK_USER_PROMPT_MESSAGE.content);
-      });
-
-      it('outputs errors if message has no content', async () => {
-        // setProps is justified here because we are testing the component's
-        // reactive behavior which consistutes an exception
-        // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
-        wrapper.setProps({
-          message: {
-            ...MOCK_USER_PROMPT_MESSAGE,
-            contentHtml: '',
-            content: '',
-            errors: ['error'],
-          },
-        });
-        await nextTick();
-        expect(findContent().text()).not.toContain(newContent);
-        expect(findContent().text()).not.toContain(MOCK_USER_PROMPT_MESSAGE.content);
-        expect(findContent().text()).toContain('error');
-      });
-
-      it('merges all the errors for output', async () => {
-        const errors = ['foo', 'bar', 'baz'];
-        // setProps is justified here because we are testing the component's
-        // reactive behavior which consistutes an exception
-        // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
-        wrapper.setProps({
-          message: {
-            ...MOCK_USER_PROMPT_MESSAGE,
-            contentHtml: '',
-            content: '',
-            errors,
-          },
-        });
-        await nextTick();
-        expect(findContent().text()).toContain(errors[0]);
-        expect(findContent().text()).toContain(errors[1]);
-        expect(findContent().text()).toContain(errors[2]);
-      });
-
-      it('hydrates the output message with GLFM if its not a chunk', async () => {
-        // setProps is justified here because we are testing the component's
-        // reactive behavior which consistutes an exception
-        // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
-        wrapper.setProps({
-          message: {
-            ...MOCK_USER_PROMPT_MESSAGE,
-            contentHtml: `<p>${newContent}</p>`,
-          },
-        });
-        await nextTick();
-        expect(renderGFM).toHaveBeenCalled();
+    it('outputs contentHtml if it is present', async () => {
+      createComponent({
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          errors: [],
+          contentHtml: 'fooHtml barHtml',
+          content: 'foo bar',
+          chunks: ['a', 'b', 'c'],
+        },
       });
-    });
-  });
 
-  describe('updates to the message', () => {
-    const content1 = 'chunk #1';
-    const content2 = ' chunk #2';
-    const content3 = ' chunk #3';
-    const chunk1 = {
-      ...MOCK_CHUNK_RESPONSE_MESSAGE,
-      content: content1,
-      chunkId: 1,
-    };
-    const chunk2 = {
-      ...MOCK_CHUNK_RESPONSE_MESSAGE,
-      content: content2,
-      chunkId: 2,
-    };
-    const chunk3 = {
-      ...MOCK_CHUNK_RESPONSE_MESSAGE,
-      content: content3,
-      chunkId: 3,
-    };
+      await nextTick();
 
-    beforeEach(() => {
-      createComponent();
+      expect(findContent().text()).toContain('fooHtml barHtml');
     });
 
-    it('does not fail if the message has no chunkId', async () => {
-      // setProps is justified here because we are testing the component's
-      // reactive behavior which consistutes an exception
-      // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
-      wrapper.setProps({
+    it('outputs markdown content if there is no contentHtml', async () => {
+      createComponent({
         message: {
-          ...MOCK_CHUNK_RESPONSE_MESSAGE,
-          content: content1,
+          ...MOCK_USER_PROMPT_MESSAGE,
+          errors: [],
+          contentHtml: '',
+          content: 'foo bar',
+          chunks: ['a', 'b', 'c'],
         },
       });
-      await nextTick();
-      expect(findContent().text()).toBe(content1);
-    });
 
-    it('renders chunks correctly when the chunks arrive out of order', async () => {
-      // setProps is justified here because we are testing the component's
-      // reactive behavior which consistutes an exception
-      // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
-      wrapper.setProps({
-        message: chunk2,
-      });
       await nextTick();
-      expect(findContent().text()).toBe('');
 
-      wrapper.setProps({
-        message: chunk1,
-      });
-      await nextTick();
-      expect(findContent().text()).toBe(content1 + content2);
-
-      wrapper.setProps({
-        message: chunk3,
-      });
-      await nextTick();
-      expect(findContent().text()).toBe(content1 + content2 + content3);
+      expect(findContent().text()).toContain('markdown: foo bar');
     });
 
-    it('renders the chunks as they arrive', async () => {
-      const consolidatedContent = content1 + content2;
-
-      // setProps is justified here because we are testing the component's
-      // reactive behavior which consistutes an exception
-      // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
-      wrapper.setProps({
-        message: chunk1,
+    it('outputs chunks if there is no content', async () => {
+      createComponent({
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          errors: [],
+          contentHtml: '',
+          content: '',
+          chunks: ['a', 'b', 'c'],
+        },
       });
-      await nextTick();
-      expect(findContent().text()).toBe(content1);
 
-      wrapper.setProps({
-        message: chunk2,
-      });
       await nextTick();
-      expect(findContent().text()).toBe(consolidatedContent);
+
+      expect(findContent().text()).toContain('markdown: abc');
     });
 
-    it('treats the initial message content as chunk if message has chunkId', async () => {
+    it('outputs chunks until first undefined', async () => {
       createComponent({
-        message: chunk1,
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          errors: [],
+          contentHtml: '',
+          content: '',
+          chunks: ['a', undefined, 'c'],
+        },
       });
-      await nextTick();
-      expect(findContent().text()).toBe(content1);
 
-      // setProps is justified here because we are testing the component's
-      // reactive behavior which consistutes an exception
-      // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
-      wrapper.setProps({
-        message: chunk2,
-      });
       await nextTick();
-      expect(findContent().text()).toBe(content1 + content2);
+
+      expect(findContent().text()).toContain('markdown: a');
     });
 
-    it('does not hydrate the chunk messages with GLFM', async () => {
+    it('hydrates the message with GFM when mounting with contentHtml', async () => {
       createComponent({
-        propsData: {
-          message: chunk1,
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          contentHtml: 'foo bar',
         },
       });
       await nextTick();
-      renderGFM.mockClear();
-      expect(renderGFM).not.toHaveBeenCalled();
-
-      // setProps is justified here because we are testing the component's
-      // reactive behavior which consistutes an exception
-      // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
-      wrapper.setProps({
-        message: chunk2,
-      });
-      await nextTick();
-      expect(renderGFM).not.toHaveBeenCalled();
+      expect(renderGFM).toHaveBeenCalled();
     });
 
-    it('does not re-render when chunk is received after final message', async () => {
-      const finalMessageContent = content1 + content2;
-
-      // setProps is justified here because we are testing the component's
-      // reactive behavior which consistutes an exception
-      // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
-      await wrapper.setProps({
-        message: chunk1,
+    it('hydrates the message with GFM when updating with contentHtml', async () => {
+      createComponent({
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          contentHtml: '',
+        },
       });
-      expect(findContent().text()).toBe(content1);
 
-      await wrapper.setProps({
+      wrapper.setProps({
         message: {
-          ...MOCK_RESPONSE_MESSAGE,
-          content: finalMessageContent,
-          contentHtml: finalMessageContent,
-          chunkId: null,
+          ...MOCK_USER_PROMPT_MESSAGE,
+          contentHtml: 'foo bar',
         },
       });
-      expect(findContent().text()).toBe(finalMessageContent);
 
-      await wrapper.setProps({
-        message: chunk2,
-      });
-      expect(findContent().text()).toBe(finalMessageContent);
+      await nextTick();
+      expect(renderGFM).toHaveBeenCalled();
     });
-
-    it.each`
-      content    | contentHtml | errors            | expectedContent
-      ${'alpha'} | ${'beta'}   | ${['foo', 'bar']} | ${'beta'}
-      ${'alpha'} | ${'beta'}   | ${[]}             | ${'beta'}
-      ${'alpha'} | ${''}       | ${['foo', 'bar']} | ${'alpha'}
-      ${'alpha'} | ${''}       | ${[]}             | ${'alpha'}
-      ${''}      | ${'beta'}   | ${['foo', 'bar']} | ${'beta'}
-      ${''}      | ${'beta'}   | ${[]}             | ${'beta'}
-      ${''}      | ${''}       | ${['foo', 'bar']} | ${'foo; bar'}
-    `(
-      'outputs "$expectedContent" and hydrates this content when content is "$content", contentHtml is "$contentHtml" and errors is "$errors" with "chunkId: null"',
-      async ({ content, contentHtml, errors, expectedContent } = {}) => {
-        createComponent({
-          propsData: {
-            message: chunk1,
-          },
-        });
-        renderGFM.mockClear();
-        expect(renderGFM).not.toHaveBeenCalled();
-
-        // setProps is justified here because we are testing the component's
-        // reactive behavior which consistutes an exception
-        // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
-        wrapper.setProps({
-          message: {
-            ...MOCK_CHUNK_RESPONSE_MESSAGE,
-            chunkId: null,
-            content,
-            contentHtml,
-            errors,
-          },
-        });
-        await nextTick();
-        expect(renderGFM).toHaveBeenCalled();
-        expect(findContent().text()).toBe(expectedContent);
-      }
-    );
   });
 });

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

@@ -5,12 +5,14 @@ import { MESSAGE_MODEL_ROLES } from '../../constants';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources.vue';
 import { CopyCodeElement } from './copy_code_element';
 
-const concatIndicesUntilEmpty = (arr) => {
-  const start = arr.findIndex((el) => el);
-  if (start === -1 || start !== 1) return ''; // If there are no non-empty elements
+const concatUntilEmpty = (arr) => {
+  if (!arr) return '';
 
-  const end = arr.slice(start).findIndex((el) => !el);
-  return end > 0 ? arr.slice(start, end).join('') : arr.slice(start).join('');
+  let end = arr.findIndex((el) => !el);
+
+  if (end < 0) end = arr.length;
+
+  return arr.slice(0, end).join('');
 };
 
 export default {
@@ -35,12 +37,6 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      messageContent: '',
-      messageWatcher: null,
-    };
-  },
   computed: {
     isAssistantMessage() {
       return this.message.role.toLowerCase() === MESSAGE_MODEL_ROLES.assistant;
@@ -51,49 +47,32 @@ export default {
     sources() {
       return this.message.extras?.sources;
     },
-    content() {
-      return (
-        this.message.contentHtml ||
-        this.renderMarkdown(this.message.content || this.message.errors.join('; '))
-      );
+    messageContent() {
+      if (this.message.errors.length > 0)
+        return this.renderMarkdown(this.message.errors.join('; '));
+
+      if (this.message.contentHtml) {
+        return this.message.contentHtml;
+      }
+
+      return this.renderMarkdown(this.message.content || concatUntilEmpty(this.message.chunks));
     },
   },
-  created() {
-    this.messageWatcher = this.$watch('message', this.messageUpdateHandler, { deep: true });
-  },
   beforeCreate() {
-    /**
-     * Keeps cache of previous chunks used for rerendering the AI response when streaming.
-     * Is intentionally non-reactive
-     */
-    this.messageChunks = [];
     if (!customElements.get('copy-code')) {
       customElements.define('copy-code', CopyCodeElement);
     }
   },
   mounted() {
-    this.messageContent = this.content;
-    if (this.message.chunkId) {
-      this.messageChunks[this.message.chunkId] = this.message.content;
-    }
-    this.hydrateContentWithGFM();
+    this.$nextTick(this.hydrateContentWithGFM);
+  },
+  updated() {
+    this.$nextTick(this.hydrateContentWithGFM);
   },
   methods: {
     async hydrateContentWithGFM() {
-      await this.$nextTick();
-      this.renderGFM(this.$refs.content);
-    },
-    async messageUpdateHandler() {
-      const { chunkId, content } = this.message;
-      if (!chunkId) {
-        this.messageChunks = [];
-        this.messageContent = this.content;
-
-        this.messageWatcher();
-        this.hydrateContentWithGFM();
-      } else {
-        this.messageChunks[chunkId] = content;
-        this.messageContent = this.renderMarkdown(concatIndicesUntilEmpty(this.messageChunks));
+      if (this.message.contentHtml) {
+        this.renderGFM(this.$refs.content);
       }
     },
   },

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

@@ -35,15 +35,6 @@ export const MOCK_RESPONSE_MESSAGE = {
   timestamp: '2021-04-21T12:00:00.000Z',
 };
 
-export const MOCK_CHUNK_RESPONSE_MESSAGE = {
-  chunkId: 1,
-  content: 'chunk',
-  role: MESSAGE_MODEL_ROLES.assistant,
-  requestId: '987',
-  errors: [],
-  timestamp: '2021-04-21T12:00:00.000Z',
-};
-
 export const MOCK_RESPONSE_MESSAGE_FOR_STREAMING = {
   id: '123',
   content: `To change your password in GitLab:

package/src/scss/utilities.scss

@@ -3938,6 +3938,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   }
 }
 
+.gl-align-self-baseline {
+  align-self: baseline;
+}
+
+.gl-align-self-baseline\! {
+  align-self: baseline !important;
+}
+
 .gl-order-n1 {
   order: -1;
 }
@@ -5047,6 +5055,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   height: $gl-spacing-scale-9 !important;
 }
 
+.gl-h-10 {
+  height: $gl-spacing-scale-10;
+}
+
+.gl-h-10\! {
+  height: $gl-spacing-scale-10 !important;
+}
+
 .gl-h-11 {
   height: $gl-spacing-scale-11;
 }

package/src/scss/utility-mixins/flex.scss

@@ -321,6 +321,10 @@
   }
 }
 
+@mixin gl-align-self-baseline {
+  align-self: baseline;
+}
+
 /**
  * Order utilities
  *

package/src/scss/utility-mixins/sizing.scss

@@ -208,6 +208,10 @@
   height: $gl-spacing-scale-9;
 }
 
+@mixin gl-h-10 {
+  height: $gl-spacing-scale-10;
+}
+
 @mixin gl-h-11 {
   height: $gl-spacing-scale-11;
 }