@gitlab/ui 71.11.0 → 72.0.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [72.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v71.11.1...v72.0.0) (2023-12-18)
+
+
+* Merge branch 'force-release' into 'main' ([7df9bbe](https://gitlab.com/gitlab-org/gitlab-ui/commit/7df9bbececf3e79513be7d022269fc84864cc7a2))
+
+
+### Bug Fixes
+
+* Force a release ([090865a](https://gitlab.com/gitlab-org/gitlab-ui/commit/090865a92acbefa8b1891331651bfb27e430e0d8))
+
+
+### BREAKING CHANGES
+
+* This changes the API the GitLab duo chat component expects
+
+See merge request https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3868
+
+Merged-by: Lukas 'Eipi' Eipert <leipert@gitlab.com>
+Approved-by: Lukas 'Eipi' Eipert <leipert@gitlab.com>
+Co-authored-by: Pavel Shutsin <pshutsin@gitlab.com>
+
+## [71.11.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v71.11.0...v71.11.1) (2023-12-15)
+
+
+### Bug Fixes
+
+* **Collapse:** explicitly pass visible prop ([afcae2b](https://gitlab.com/gitlab-org/gitlab-ui/commit/afcae2b257c44003a1776b6e403fe35c97638626))
+
 # [71.11.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v71.10.0...v71.11.0) (2023-12-14)
 
 

package/dist/components/base/collapse/collapse.js

@@ -10,6 +10,13 @@ var script = {
   model: {
     prop: 'visible',
     event: 'input'
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
   }
 };
 
@@ -17,7 +24,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('b-collapse',_vm._g(_vm._b({},'b-collapse',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-collapse',_vm._g(_vm._b({attrs:{"visible":_vm.visible}},'b-collapse',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -5,12 +5,11 @@ import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_s
 import { CopyCodeElement } from './copy_code_element';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const concatIndicesUntilEmpty = arr => {
-  const start = arr.findIndex(el => el);
-  if (start === -1 || start !== 1) return ''; // If there are no non-empty elements
-
-  const end = arr.slice(start).findIndex(el => !el);
-  return end > 0 ? arr.slice(start, end).join('') : arr.slice(start).join('');
+const concatUntilEmpty = arr => {
+  if (!arr) return '';
+  let end = arr.findIndex(el => !el);
+  if (end < 0) end = arr.length;
+  return arr.slice(0, end).join('');
 };
 var script = {
   name: 'GlDuoChatMessage',
@@ -34,12 +33,6 @@ var script = {
       required: true
     }
   },
-  data() {
-    return {
-      messageContent: '',
-      messageWatcher: null
-    };
-  },
   computed: {
     isAssistantMessage() {
       return this.message.role.toLowerCase() === MESSAGE_MODEL_ROLES.assistant;
@@ -51,50 +44,29 @@ var script = {
       var _this$message$extras;
       return (_this$message$extras = this.message.extras) === null || _this$message$extras === void 0 ? void 0 : _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/dist/components/experimental/duo/chat/mock_data.js

@@ -27,14 +27,6 @@ const MOCK_RESPONSE_MESSAGE = {
   errors: [],
   timestamp: '2021-04-21T12:00:00.000Z'
 };
-const MOCK_CHUNK_RESPONSE_MESSAGE = {
-  chunkId: 1,
-  content: 'chunk',
-  role: MESSAGE_MODEL_ROLES.assistant,
-  requestId: '987',
-  errors: [],
-  timestamp: '2021-04-21T12:00:00.000Z'
-};
 const MOCK_RESPONSE_MESSAGE_FOR_STREAMING = {
   id: '123',
   content: `To change your password in GitLab:
@@ -88,4 +80,4 @@ const renderGFM = el => {
   });
 };
 
-export { MOCK_CHUNK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_USER_PROMPT_MESSAGE, generateMockResponseChunks, renderGFM, renderMarkdown };
+export { MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_USER_PROMPT_MESSAGE, generateMockResponseChunks, renderGFM, renderMarkdown };

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Dec 2023 19:07:24 GMT
+ * Generated on Mon, 18 Dec 2023 16:16:22 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Dec 2023 19:07:24 GMT
+ * Generated on Mon, 18 Dec 2023 16:16:22 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Dec 2023 19:07:24 GMT
+ * Generated on Mon, 18 Dec 2023 16:16:22 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, 14 Dec 2023 19:07:24 GMT
+ * Generated on Mon, 18 Dec 2023 16:16:22 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, 14 Dec 2023 19:07:24 GMT
+// Generated on Mon, 18 Dec 2023 16:16:22 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 14 Dec 2023 19:07:24 GMT
+// Generated on Mon, 18 Dec 2023 16:16:22 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "71.11.0",
+  "version": "72.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -87,8 +87,8 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.23.5",
-    "@babel/preset-env": "^7.23.5",
+    "@babel/core": "^7.23.6",
+    "@babel/preset-env": "^7.23.6",
     "@babel/preset-react": "^7.23.3",
     "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "19.2.0",

package/src/components/base/collapse/collapse.vue

@@ -11,11 +11,18 @@ export default {
     prop: 'visible',
     event: 'input',
   },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
 };
 </script>
 
 <template>
-  <b-collapse v-bind="$attrs" v-on="$listeners">
+  <b-collapse :visible="visible" v-bind="$attrs" v-on="$listeners">
     <!-- @slot The content to show/hide. -->
     <slot></slot>
   </b-collapse>

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: