Merge branch 'nd/stream-order-issue' into 'master'

Do not render chunks once full message is received

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/134387



Merged-by: Denys Mishunov <dmishunov@gitlab.com>
Approved-by: Denys Mishunov <dmishunov@gitlab.com>
Reviewed-by: Denys Mishunov <dmishunov@gitlab.com>
Reviewed-by: Nicolas Dular <ndular@gitlab.com>
Co-authored-by: Nicolas Dular <ndular@gitlab.com>

ee/app/assets/javascripts/ai/components/ai_genie_chat_message.vue

@@ -39,6 +39,7 @@ export default {
   data() {
     return {
       messageContent: this.getContent(),
+      chunksFinished: false,
     };
   },
   computed: {
@@ -59,10 +60,14 @@ export default {
         if (!chunkId) {
           this.$options.messageChunks = [];
           this.messageContent = this.getContent();
+          this.chunksFinished = true;
 
           await this.$nextTick();
           renderGFM(this.$refs.content);
         } else {
+          if (this.chunksFinished) {
+            return;
+          }
           this.$options.messageChunks[chunkId] = content;
           this.messageContent = renderMarkdown(
             concatIndicesUntilEmpty(this.$options.messageChunks),

ee/spec/frontend/ai/components/ai_genie_chat_message_spec.js

@@ -359,6 +359,29 @@ describe('AiGenieChatMessage', () => {
       expect(findContent().text()).toBe(content1 + content2);
     });
 
+    it('does not re-render when chunk gets received after full message', 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: chunk1,
+      });
+      await nextTick();
+      expect(findContent().text()).toBe(content1);
+
+      wrapper.setProps({
+        message: { ...MOCK_CHUNK_MESSAGE, content: content1 + content2, chunkId: null },
+      });
+      await nextTick();
+      expect(findContent().text()).toBe(content1 + content2);
+
+      wrapper.setProps({
+        message: chunk2,
+      });
+      await nextTick();
+      expect(findContent().text()).toBe(content1 + content2);
+    });
+
     it('does not hydrate the chunk message with GLFM', async () => {
       createComponent({
         propsData: {