@gitlab/ui 78.8.1 → 78.10.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [78.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.9.0...v78.10.0) (2024-04-08)
+
+
+### Features
+
+* **GlDuoChat:** detect streaming based on chunkId ([6cdfe5c](https://gitlab.com/gitlab-org/gitlab-ui/commit/6cdfe5cd823ed0e832a5ec51870421ff4c532dbc))
+* **GlDuoChatMessage:** Handle streaming in the component ([082ab86](https://gitlab.com/gitlab-org/gitlab-ui/commit/082ab867597972bb18ba5287ac69126f38e17619))
+
+# [78.9.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.8.1...v78.9.0) (2024-04-04)
+
+
+### Features
+
+* **DuoChat:** add mandatory field indicator on DuoChat Feedback Modal ([df7d4a5](https://gitlab.com/gitlab-org/gitlab-ui/commit/df7d4a55e799695c9d972ba029758136c0892990))
+
 ## [78.8.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.8.0...v78.8.1) (2024-04-04)
 
 

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

@@ -6,6 +6,7 @@ import { MESSAGE_MODEL_ROLES } from '../../constants';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources';
 import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
 import { CopyCodeElement } from './copy_code_element';
+import { concatUntilEmpty } from './utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const i18n = {
@@ -18,12 +19,6 @@ const i18n = {
     BETTER_RESPONSE: 'How the response might better meet your needs.'
   }
 };
-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',
   safeHtmlConfigExtension: {
@@ -72,10 +67,16 @@ var script = {
   data() {
     return {
       didWhat: '',
-      improveWhat: ''
+      improveWhat: '',
+      messageWatcher: null,
+      // imperatively set up watcher on message
+      messageChunks: []
     };
   },
   computed: {
+    isChunk() {
+      return typeof this.message.chunkId === 'number';
+    },
     isAssistantMessage() {
       return this.message.role.toLowerCase() === MESSAGE_MODEL_ROLES.assistant;
     },
@@ -90,12 +91,18 @@ var script = {
       var _this$message$extras2;
       return (_this$message$extras2 = this.message.extras) === null || _this$message$extras2 === void 0 ? void 0 : _this$message$extras2.hasFeedback;
     },
-    messageContent() {
+    defaultContent() {
       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));
+      return this.renderMarkdown(this.message.content);
+    },
+    messageContent() {
+      if (this.isAssistantMessage && this.isChunk) {
+        return this.renderMarkdown(concatUntilEmpty(this.messageChunks));
+      }
+      return this.defaultContent || this.renderMarkdown(concatUntilEmpty(this.message.chunks));
     }
   },
   beforeCreate() {
@@ -104,15 +111,39 @@ var script = {
     }
   },
   mounted() {
-    this.$nextTick(this.hydrateContentWithGFM);
+    if (this.isAssistantMessage) {
+      // The watcher has to be created imperatively here
+      // to give an opportunity to remove it after
+      // the complete message has arrived
+      this.messageWatcher = this.$watch('message', this.manageMessageUpdate);
+    }
+    this.setChunks();
+    this.hydrateContentWithGFM();
   },
   updated() {
-    this.$nextTick(this.hydrateContentWithGFM);
+    this.hydrateContentWithGFM();
   },
   methods: {
-    async hydrateContentWithGFM() {
-      if (this.message.contentHtml) {
-        this.renderGFM(this.$refs.content);
+    setChunks() {
+      if (this.isChunk) {
+        const {
+          chunkId,
+          content
+        } = this.message;
+        this.$set(this.messageChunks, chunkId - 1, content);
+      } else {
+        this.messageChunks = [];
+      }
+    },
+    stopWatchingMessage() {
+      if (this.messageWatcher) {
+        this.messageWatcher(); // Stop watching the message prop
+        this.messageWatcher = null; // Ensure the watcher can't be stopped multiple times
+      }
+    },
+    hydrateContentWithGFM() {
+      if (!this.isChunk) {
+        this.$nextTick(this.renderGFM(this.$refs.content));
       }
     },
     logEvent(e) {
@@ -122,6 +153,12 @@ var script = {
         improveWhat: this.improveWhat,
         message: this.message
       });
+    },
+    manageMessageUpdate() {
+      this.setChunks();
+      if (!this.isChunk) {
+        this.stopWatchingMessage();
+      }
     }
   },
   i18n

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

@@ -0,0 +1,8 @@
+const concatUntilEmpty = arr => {
+  if (!arr) return '';
+  let end = arr.findIndex(el => !el);
+  if (end < 0) end = arr.length;
+  return arr.slice(0, end).join('');
+};
+
+export { concatUntilEmpty };

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

@@ -215,8 +215,8 @@ var script = {
       return this.isLoading || this.isStreaming;
     },
     isStreaming() {
-      var _this$lastMessage2, _this$lastMessage2$ch, _this$lastMessage3;
-      return Boolean(((_this$lastMessage2 = this.lastMessage) === null || _this$lastMessage2 === void 0 ? void 0 : (_this$lastMessage2$ch = _this$lastMessage2.chunks) === null || _this$lastMessage2$ch === void 0 ? void 0 : _this$lastMessage2$ch.length) > 0 && !((_this$lastMessage3 = this.lastMessage) !== null && _this$lastMessage3 !== void 0 && _this$lastMessage3.content));
+      var _this$lastMessage2, _this$lastMessage2$ch, _this$lastMessage3, _this$lastMessage4;
+      return Boolean(((_this$lastMessage2 = this.lastMessage) === null || _this$lastMessage2 === void 0 ? void 0 : (_this$lastMessage2$ch = _this$lastMessage2.chunks) === null || _this$lastMessage2$ch === void 0 ? void 0 : _this$lastMessage2$ch.length) > 0 && !((_this$lastMessage3 = this.lastMessage) !== null && _this$lastMessage3 !== void 0 && _this$lastMessage3.content) || typeof ((_this$lastMessage4 = this.lastMessage) === null || _this$lastMessage4 === void 0 ? void 0 : _this$lastMessage4.chunkId) === 'number');
     },
     filteredSlashCommands() {
       const caseInsensitivePrompt = this.prompt.toLowerCase();

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

@@ -28,6 +28,20 @@ const MOCK_RESPONSE_MESSAGE = {
   errors: [],
   timestamp: '2021-04-21T12:00:00.000Z'
 };
+const generateSeparateChunks = n => {
+  const res = [];
+  for (let i = 1; i <= n; i += 1) {
+    res.push({
+      chunkId: i,
+      content: `chunk #${i}`,
+      role: MESSAGE_MODEL_ROLES.assistant,
+      requestId: '987',
+      errors: [],
+      timestamp: '2021-04-21T12:00:00.000Z'
+    });
+  }
+  return res;
+};
 const MOCK_RESPONSE_MESSAGE_FOR_STREAMING = {
   id: '123',
   content: `To change your password in GitLab:
@@ -51,7 +65,6 @@ const MOCK_RESPONSE_MESSAGE_FOR_STREAMING = {
   ~~~
   which is rendered while streaming.
   `,
-  contentHtml: '',
   role: 'assistant',
   extras: {},
   requestId: '987',
@@ -81,7 +94,7 @@ function generateMockResponseChunks() {
           ...MOCK_RESPONSE_MESSAGE_FOR_STREAMING,
           requestId,
           content: MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content.substring(start, end),
-          chunkId
+          chunkId: chunkId + 1
         };
 
         // eslint-disable-next-line no-await-in-loop
@@ -101,8 +114,9 @@ function generateMockResponseChunks() {
 }
 const MOCK_USER_PROMPT_MESSAGE = {
   id: '456',
+  chunkId: null,
   content: 'How to create a new template?',
-  contentHtml: '',
+  contentHtml: '<p>How to create a new template?</p>',
   role: MESSAGE_MODEL_ROLES.user,
   requestId: '987',
   errors: [],
@@ -135,4 +149,4 @@ const SLASH_COMMANDS = [{
   description: 'Explain the selected snippet.'
 }];
 
-export { MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_USER_PROMPT_MESSAGE, SLASH_COMMANDS, generateMockResponseChunks, renderGFM, renderMarkdown };
+export { MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_USER_PROMPT_MESSAGE, SLASH_COMMANDS, generateMockResponseChunks, generateSeparateChunks, renderGFM, renderMarkdown };

package/dist/components/experimental/duo/user_feedback/user_feedback_modal.js

@@ -17,6 +17,7 @@ const i18n = {
     IMPROVEMENT_SUGGESTION_PLACEHOLDER: 'How the response might better meet your needs.',
     MORE_LABEL: 'More information',
     MORE_PLACEHOLDER: 'How could the content be improved?',
+    REQUIRED_VALIDATION_ERROR: 'Select at least one option.',
     FEEDBACK_OPTIONS: {
       helpful: 'Helpful',
       unhelpful: 'Unhelpful or irrelevant',
@@ -70,23 +71,34 @@ var script = {
   data() {
     return {
       selectedFeedbackOptions: [],
-      extendedFeedback: ''
+      extendedFeedback: '',
+      isValid: null
     };
   },
+  watch: {
+    selectedFeedbackOptions(options) {
+      this.isValid = options.length > 0;
+    }
+  },
   methods: {
+    close() {
+      this.$refs.feedbackModal.hide();
+    },
     show() {
       this.$refs.feedbackModal.show();
     },
-    onFeedbackSubmit() {
+    onFeedbackSubmit(e) {
       if (this.selectedFeedbackOptions.length) {
         this.$emit('feedback-submitted', {
           feedbackChoices: this.selectedFeedbackOptions,
           extendedTextFeedback: this.extendedFeedback
         });
+        this.close();
+        this.isValid = null;
+      } else {
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        this.isValid = false;
       }
-    },
-    onFeedbackCanceled() {
-      this.$refs.feedbackModal.hide();
     }
   },
   actions: {
@@ -105,7 +117,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('gl-modal',{ref:"feedbackModal",attrs:{"modal-id":"feedbackModal","title":_vm.modalTitle,"action-primary":_vm.$options.actions.primary,"action-cancel":_vm.$options.actions.cancel,"visible":false,"size":"sm"},on:{"primary":_vm.onFeedbackSubmit,"canceled":_vm.onFeedbackCanceled}},[_c('p',[_vm._v(_vm._s(_vm.$options.i18n.MODAL.DESCRIPTION))]),_vm._v(" "),_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.OPTIONS_LABEL,"optional":false,"data-testid":"feedback-options"}},[_c('gl-form-checkbox-group',{attrs:{"options":_vm.$options.feedbackOptions},model:{value:(_vm.selectedFeedbackOptions),callback:function ($$v) {_vm.selectedFeedbackOptions=$$v;},expression:"selectedFeedbackOptions"}})],1),_vm._v(" "),_c('gl-alert',{staticClass:"gl-mb-5",attrs:{"dismissible":false}},[_vm._v(_vm._s(_vm.modalAlert))]),_vm._v(" "),_vm._t("feedback-extra-fields",function(){return [_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.MORE_LABEL,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.MORE_PLACEHOLDER},model:{value:(_vm.extendedFeedback),callback:function ($$v) {_vm.extendedFeedback=$$v;},expression:"extendedFeedback"}})],1)]})],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-modal',{ref:"feedbackModal",attrs:{"modal-id":"feedbackModal","title":_vm.modalTitle,"action-primary":_vm.$options.actions.primary,"action-cancel":_vm.$options.actions.cancel,"visible":false,"size":"sm"},on:{"primary":_vm.onFeedbackSubmit,"canceled":_vm.close}},[_c('p',[_vm._v(_vm._s(_vm.$options.i18n.MODAL.DESCRIPTION))]),_vm._v(" "),_c('gl-form-group',{attrs:{"invalid-feedback":_vm.$options.i18n.MODAL.REQUIRED_VALIDATION_ERROR,"state":_vm.isValid,"label":_vm.$options.i18n.MODAL.OPTIONS_LABEL,"data-testid":"feedback-options"}},[_c('gl-form-checkbox-group',{attrs:{"options":_vm.$options.feedbackOptions},model:{value:(_vm.selectedFeedbackOptions),callback:function ($$v) {_vm.selectedFeedbackOptions=$$v;},expression:"selectedFeedbackOptions"}})],1),_vm._v(" "),_c('gl-alert',{staticClass:"gl-mb-5",attrs:{"dismissible":false}},[_vm._v(_vm._s(_vm.modalAlert))]),_vm._v(" "),_vm._t("feedback-extra-fields",function(){return [_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.MORE_LABEL,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.MORE_PLACEHOLDER},model:{value:(_vm.extendedFeedback),callback:function ($$v) {_vm.extendedFeedback=$$v;},expression:"extendedFeedback"}})],1)]})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Apr 2024 18:24:00 GMT
+ * Generated on Mon, 08 Apr 2024 17:41:40 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Apr 2024 18:24:00 GMT
+ * Generated on Mon, 08 Apr 2024 17:41:40 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Apr 2024 18:24:00 GMT
+ * Generated on Mon, 08 Apr 2024 17:41:40 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, 04 Apr 2024 18:24:00 GMT
+ * Generated on Mon, 08 Apr 2024 17:41:40 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, 04 Apr 2024 18:24:00 GMT
+// Generated on Mon, 08 Apr 2024 17:41:40 GMT
 
 $gl-text-tertiary: #737278 !default;
 $gl-text-secondary: #89888d !default;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 04 Apr 2024 18:24:00 GMT
+// Generated on Mon, 08 Apr 2024 17:41:40 GMT
 
 $gl-text-tertiary: #89888d !default;
 $gl-text-secondary: #737278 !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "78.8.1",
+  "version": "78.10.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -102,7 +102,7 @@
     "@gitlab/eslint-plugin": "19.5.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.94.0",
+    "@gitlab/svgs": "3.95.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

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

@@ -1,7 +1,11 @@
 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 } from '../../mock_data';
+import {
+  MOCK_USER_PROMPT_MESSAGE,
+  MOCK_RESPONSE_MESSAGE,
+  generateSeparateChunks,
+} from '../../mock_data';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources.vue';
 import GlDuoChatMessage from './duo_chat_message.vue';
 
@@ -35,7 +39,7 @@ describe('DuoChatMessage', () => {
   };
 
   beforeEach(() => {
-    renderMarkdown = jest.fn().mockImplementation((val) => `markdown: ${val}`);
+    renderMarkdown = jest.fn().mockImplementation((val) => val);
     renderGFM = jest.fn();
   });
 
@@ -49,18 +53,26 @@ describe('DuoChatMessage', () => {
     expect(customElements.get('copy-code')).toBeDefined();
   });
 
-  describe('rendering with user message', () => {
+  describe('rendering', () => {
     beforeEach(() => {
       renderMarkdown.mockImplementation(() => mockMarkdownContent);
-      createComponent();
     });
 
-    it('converts the message `content` to Markdown', () => {
-      expect(renderMarkdown).toHaveBeenCalledWith(MOCK_USER_PROMPT_MESSAGE.content);
+    it('renders html content of the message by default', () => {
+      createComponent();
+      expect(renderMarkdown).not.toHaveBeenCalled();
+      expect(wrapper.html()).toContain(MOCK_USER_PROMPT_MESSAGE.contentHtml);
     });
 
-    it('renders message content', () => {
-      expect(wrapper.text()).toBe(mockMarkdownContent);
+    it('converts the message `content` to Markdown if there is no contentHtml', () => {
+      createComponent({
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          contentHtml: undefined,
+        },
+      });
+      expect(renderMarkdown).toHaveBeenCalledWith(MOCK_USER_PROMPT_MESSAGE.content);
+      expect(findContent().text()).toBe(mockMarkdownContent);
     });
 
     it('does not render the documentation sources component', () => {
@@ -135,8 +147,6 @@ describe('DuoChatMessage', () => {
           ...MOCK_USER_PROMPT_MESSAGE,
           errors,
           contentHtml: 'fooHtml barHtml',
-          content: 'foo bar',
-          chunks: ['a', 'b', 'c'],
         },
       });
 
@@ -155,7 +165,6 @@ describe('DuoChatMessage', () => {
           errors: [],
           contentHtml: 'fooHtml barHtml',
           content: 'foo bar',
-          chunks: ['a', 'b', 'c'],
         },
       });
 
@@ -169,47 +178,14 @@ describe('DuoChatMessage', () => {
         message: {
           ...MOCK_USER_PROMPT_MESSAGE,
           errors: [],
-          contentHtml: '',
+          contentHtml: undefined,
           content: 'foo bar',
-          chunks: ['a', 'b', 'c'],
         },
       });
 
       await nextTick();
 
-      expect(findContent().text()).toContain('markdown: foo bar');
-    });
-
-    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()).toContain('markdown: abc');
-    });
-
-    it('outputs chunks until first undefined', async () => {
-      createComponent({
-        message: {
-          ...MOCK_USER_PROMPT_MESSAGE,
-          errors: [],
-          contentHtml: '',
-          content: '',
-          chunks: ['a', undefined, 'c'],
-        },
-      });
-
-      await nextTick();
-
-      expect(findContent().text()).toContain('markdown: a');
+      expect(findContent().text()).toContain('foo bar');
     });
 
     it('hydrates the message with GFM when mounting with contentHtml', async () => {
@@ -231,44 +207,33 @@ describe('DuoChatMessage', () => {
         },
       });
 
-      wrapper.setProps({
+      await wrapper.setProps({
         message: {
           ...MOCK_USER_PROMPT_MESSAGE,
           contentHtml: 'foo bar',
         },
       });
-
-      await nextTick();
       expect(renderGFM).toHaveBeenCalled();
     });
-  });
-
-  describe('default renderers', () => {
-    it('outputs errors if they are present', async () => {
-      const errors = ['error1', 'error2', 'error3'];
 
+    it('sanitizes html produced by errors', async () => {
       createComponent({
         options: {
           provide: null,
         },
         message: {
           ...MOCK_USER_PROMPT_MESSAGE,
-          errors,
-          contentHtml: 'fooHtml barHtml',
-          content: 'foo bar',
-          chunks: ['a', 'b', 'c'],
+          errors: ['[click here](javascript:prompt(1))'],
+          contentHtml: undefined,
+          content: '',
         },
       });
 
       await nextTick();
-
-      const contentText = findContent().text();
-      expect(contentText).toContain(errors[0]);
-      expect(contentText).toContain(errors[1]);
-      expect(contentText).toContain(errors[2]);
+      expect(findContent().html()).toContain('<p><a>click here</a></p>');
     });
 
-    it('outputs contentHtml if it is present', async () => {
+    it('sanitizes html produced by content', async () => {
       createComponent({
         options: {
           provide: null,
@@ -276,20 +241,17 @@ describe('DuoChatMessage', () => {
         message: {
           ...MOCK_USER_PROMPT_MESSAGE,
           errors: [],
-          contentHtml: 'fooHtml barHtml',
-          content: 'foo bar',
-          chunks: ['a', 'b', 'c'],
+          contentHtml: undefined,
+          content: '[click here](javascript:prompt(1))',
         },
       });
 
       await nextTick();
 
-      expect(findContent().html()).toBe(
-        '<div class="gl-markdown gl-compact-markdown">fooHtml barHtml</div>'
-      );
+      expect(findContent().html()).toContain('<p><a>click here</a></p>');
     });
 
-    it('outputs markdown content if there is no contentHtml', async () => {
+    it('deprecated: sanitizes html produced by chunks', async () => {
       createComponent({
         options: {
           provide: null,
@@ -297,18 +259,18 @@ describe('DuoChatMessage', () => {
         message: {
           ...MOCK_USER_PROMPT_MESSAGE,
           errors: [],
-          contentHtml: '',
-          content: 'foo bar',
-          chunks: ['a', 'b', 'c'],
+          contentHtml: undefined,
+          content: '',
+          chunks: ['[click here]', '(javascript:prompt(1))'],
         },
       });
 
       await nextTick();
 
-      expect(findContent().html()).toBe('<div>\n  <p>foo bar</p>\n</div>');
+      expect(findContent().html()).toContain('<p><a>click here</a></p>');
     });
 
-    it('outputs chunks if there is no content', async () => {
+    it('sanitizes contentHtml', async () => {
       createComponent({
         options: {
           provide: null,
@@ -316,92 +278,250 @@ describe('DuoChatMessage', () => {
         message: {
           ...MOCK_USER_PROMPT_MESSAGE,
           errors: [],
-          contentHtml: '',
+          contentHtml: `<a href="javascript:prompt(1)">click here</a>`,
           content: '',
-          chunks: ['a', 'b', 'c'],
+          chunks: [],
         },
       });
 
       await nextTick();
 
-      expect(findContent().html()).toBe('<div>\n  <p>abc</p>\n</div>');
+      expect(findContent().html()).toBe(
+        '<div class="gl-markdown gl-compact-markdown"><a>click here</a></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: [],
-        },
+    describe('message updates watcher', () => {
+      const newContent = 'new foo content';
+      beforeEach(() => {
+        createComponent();
       });
 
-      await nextTick();
+      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
+        await wrapper.setProps({
+          message: {
+            ...MOCK_USER_PROMPT_MESSAGE,
+            contentHtml: `<p>${newContent}</p>`,
+          },
+        });
+        expect(findContent().text()).not.toContain(MOCK_USER_PROMPT_MESSAGE.content);
+        expect(findContent().text()).toContain(newContent);
+      });
 
-      expect(findContent().html()).toBe('<div>\n  <p><a>click here</a></p>\n</div>');
-    });
+      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
+        await wrapper.setProps({
+          message: {
+            ...MOCK_USER_PROMPT_MESSAGE,
+            contentHtml: `<p>${MOCK_USER_PROMPT_MESSAGE.content}</p>`,
+            content: newContent,
+          },
+        });
+        expect(findContent().text()).not.toContain(newContent);
+        expect(findContent().text()).toContain(MOCK_USER_PROMPT_MESSAGE.content);
+      });
 
-    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: [],
-        },
+      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
+        await wrapper.setProps({
+          message: {
+            ...MOCK_USER_PROMPT_MESSAGE,
+            contentHtml: '',
+            content: '',
+            errors: ['error'],
+          },
+        });
+        expect(findContent().text()).not.toContain(newContent);
+        expect(findContent().text()).not.toContain(MOCK_USER_PROMPT_MESSAGE.content);
+        expect(findContent().text()).toContain('error');
       });
 
-      await nextTick();
+      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
+        await wrapper.setProps({
+          message: {
+            ...MOCK_USER_PROMPT_MESSAGE,
+            contentHtml: '',
+            content: '',
+            errors,
+          },
+        });
+        expect(findContent().text()).toContain(errors[0]);
+        expect(findContent().text()).toContain(errors[1]);
+        expect(findContent().text()).toContain(errors[2]);
+      });
 
-      expect(findContent().html()).toBe('<div>\n  <p><a>click here</a></p>\n</div>');
+      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
+        await wrapper.setProps({
+          message: {
+            ...MOCK_USER_PROMPT_MESSAGE,
+            contentHtml: `<p>${newContent}</p>`,
+          },
+        });
+        expect(renderGFM).toHaveBeenCalled();
+      });
     });
 
-    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))'],
-        },
+    describe('updates to the message', () => {
+      const [CHUNK1, CHUNK2, CHUNK3] = generateSeparateChunks(3);
+      const consolidatedContent = CHUNK1.content + CHUNK2.content;
+
+      beforeEach(() => {
+        createComponent({ message: MOCK_RESPONSE_MESSAGE });
       });
 
-      await nextTick();
+      it('does not handle message updates with chunks for the user messages', async () => {
+        createComponent({ message: MOCK_USER_PROMPT_MESSAGE });
+        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
+        await wrapper.setProps({
+          message: {
+            ...MOCK_USER_PROMPT_MESSAGE,
+            content: 'foo bar',
+            chunkId: 1,
+          },
+        });
+        expect(findContent().text()).toContain(MOCK_USER_PROMPT_MESSAGE.content);
+      });
 
-      expect(findContent().html()).toBe('<div>\n  <p><a>click here</a></p>\n</div>');
-    });
+      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
+        await wrapper.setProps({
+          message: {
+            ...CHUNK1,
+            chunkId: null,
+          },
+        });
+        expect(findContent().text()).toContain(CHUNK1.content);
+      });
 
-    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: [],
-        },
+      it('renders chunks correctly when the chunks arrive out of order', async () => {
+        expect(CHUNK1.content).toBe('chunk #1');
+        expect(CHUNK2.content).toBe('chunk #2');
+        expect(CHUNK3.content).toBe('chunk #3');
+        // 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: CHUNK2,
+        });
+        expect(findContent().text()).toBe('');
+
+        await wrapper.setProps({
+          message: CHUNK1,
+        });
+        expect(findContent().text()).toBe(CHUNK1.content + CHUNK2.content);
+
+        await wrapper.setProps({
+          message: CHUNK3,
+        });
+        expect(findContent().text()).toBe(CHUNK1.content + CHUNK2.content + CHUNK3.content);
       });
 
-      await nextTick();
+      it('renders the chunks as they arrive when they arrive in the correct 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
+        await wrapper.setProps({
+          message: CHUNK1,
+        });
+        expect(findContent().text()).toBe(CHUNK1.content);
 
-      expect(findContent().html()).toBe(
-        '<div class="gl-markdown gl-compact-markdown"><a>click here</a></div>'
+        await wrapper.setProps({
+          message: CHUNK2,
+        });
+        expect(findContent().text()).toBe(consolidatedContent);
+      });
+
+      it('treats the initial message content as chunk if message has chunkId', async () => {
+        createComponent({
+          message: CHUNK1,
+        });
+        await nextTick();
+        expect(findContent().text()).toBe(CHUNK1.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
+        await wrapper.setProps({
+          message: CHUNK2,
+        });
+        expect(findContent().text()).toBe(consolidatedContent);
+      });
+
+      it('does not hydrate the chunk messages with GLFM', async () => {
+        createComponent({
+          propsData: {
+            message: CHUNK1,
+          },
+        });
+        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
+        await wrapper.setProps({
+          message: CHUNK2,
+        });
+        expect(renderGFM).not.toHaveBeenCalled();
+      });
+
+      it.each`
+        content    | contentHtml  | errors            | expectedContent
+        ${'alpha'} | ${'beta'}    | ${['foo', 'bar']} | ${'foo; bar'}
+        ${'alpha'} | ${'beta'}    | ${[]}             | ${'beta'}
+        ${'alpha'} | ${undefined} | ${['foo', 'bar']} | ${'foo; bar'}
+        ${'alpha'} | ${undefined} | ${[]}             | ${'alpha'}
+        ${''}      | ${'beta'}    | ${['foo', 'bar']} | ${'foo; bar'}
+        ${''}      | ${'beta'}    | ${[]}             | ${'beta'}
+        ${''}      | ${undefined} | ${['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,
+            },
+          });
+          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
+          await wrapper.setProps({
+            message: {
+              ...CHUNK2,
+              chunkId: null,
+              content,
+              contentHtml,
+              errors,
+            },
+          });
+          expect(renderGFM).toHaveBeenCalled();
+          expect(findContent().text()).toBe(expectedContent);
+        }
       );
     });
   });

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

@@ -8,6 +8,7 @@ import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_s
 // eslint-disable-next-line no-restricted-imports
 import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
 import { CopyCodeElement } from './copy_code_element';
+import { concatUntilEmpty } from './utils';
 
 export const i18n = {
   MODAL: {
@@ -21,16 +22,6 @@ export const i18n = {
   },
 };
 
-const concatUntilEmpty = (arr) => {
-  if (!arr) return '';
-
-  let end = arr.findIndex((el) => !el);
-
-  if (end < 0) end = arr.length;
-
-  return arr.slice(0, end).join('');
-};
-
 export default {
   name: 'GlDuoChatMessage',
   safeHtmlConfigExtension: {
@@ -80,9 +71,14 @@ export default {
     return {
       didWhat: '',
       improveWhat: '',
+      messageWatcher: null, // imperatively set up watcher on message
+      messageChunks: [],
     };
   },
   computed: {
+    isChunk() {
+      return typeof this.message.chunkId === 'number';
+    },
     isAssistantMessage() {
       return this.message.role.toLowerCase() === MESSAGE_MODEL_ROLES.assistant;
     },
@@ -95,7 +91,7 @@ export default {
     hasFeedback() {
       return this.message.extras?.hasFeedback;
     },
-    messageContent() {
+    defaultContent() {
       if (this.message.errors.length > 0)
         return this.renderMarkdown(this.message.errors.join('; '));
 
@@ -103,7 +99,13 @@ export default {
         return this.message.contentHtml;
       }
 
-      return this.renderMarkdown(this.message.content || concatUntilEmpty(this.message.chunks));
+      return this.renderMarkdown(this.message.content);
+    },
+    messageContent() {
+      if (this.isAssistantMessage && this.isChunk) {
+        return this.renderMarkdown(concatUntilEmpty(this.messageChunks));
+      }
+      return this.defaultContent || this.renderMarkdown(concatUntilEmpty(this.message.chunks));
     },
   },
   beforeCreate() {
@@ -112,15 +114,36 @@ export default {
     }
   },
   mounted() {
-    this.$nextTick(this.hydrateContentWithGFM);
+    if (this.isAssistantMessage) {
+      // The watcher has to be created imperatively here
+      // to give an opportunity to remove it after
+      // the complete message has arrived
+      this.messageWatcher = this.$watch('message', this.manageMessageUpdate);
+    }
+    this.setChunks();
+    this.hydrateContentWithGFM();
   },
   updated() {
-    this.$nextTick(this.hydrateContentWithGFM);
+    this.hydrateContentWithGFM();
   },
   methods: {
-    async hydrateContentWithGFM() {
-      if (this.message.contentHtml) {
-        this.renderGFM(this.$refs.content);
+    setChunks() {
+      if (this.isChunk) {
+        const { chunkId, content } = this.message;
+        this.$set(this.messageChunks, chunkId - 1, content);
+      } else {
+        this.messageChunks = [];
+      }
+    },
+    stopWatchingMessage() {
+      if (this.messageWatcher) {
+        this.messageWatcher(); // Stop watching the message prop
+        this.messageWatcher = null; // Ensure the watcher can't be stopped multiple times
+      }
+    },
+    hydrateContentWithGFM() {
+      if (!this.isChunk) {
+        this.$nextTick(this.renderGFM(this.$refs.content));
       }
     },
     logEvent(e) {
@@ -131,6 +154,12 @@ export default {
         message: this.message,
       });
     },
+    manageMessageUpdate() {
+      this.setChunks();
+      if (!this.isChunk) {
+        this.stopWatchingMessage();
+      }
+    },
   },
   i18n,
 };

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

@@ -0,0 +1,9 @@
+export const concatUntilEmpty = (arr) => {
+  if (!arr) return '';
+
+  let end = arr.findIndex((el) => !el);
+
+  if (end < 0) end = arr.length;
+
+  return arr.slice(0, end).join('');
+};

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

@@ -0,0 +1,24 @@
+import { concatUntilEmpty } from './utils';
+
+describe('concatUntilEmpty utility', () => {
+  it('returns empty string if input array is falsy', () => {
+    expect(concatUntilEmpty()).toEqual('');
+    expect(concatUntilEmpty(null)).toEqual('');
+    expect(concatUntilEmpty(undefined)).toEqual('');
+  });
+
+  it('concatenates array elements until first falsy element', () => {
+    const arr = ['a', 'b', undefined, 'c'];
+    expect(concatUntilEmpty(arr)).toEqual('ab');
+  });
+
+  it('concatenates all array elements if none are falsy', () => {
+    const arr = ['a', 'b', 'c'];
+    expect(concatUntilEmpty(arr)).toEqual('abc');
+  });
+
+  it('returns empty string if first element is falsy', () => {
+    const arr = [undefined, 'b', 'c'];
+    expect(concatUntilEmpty(arr)).toEqual('');
+  });
+});

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

@@ -357,6 +357,7 @@ describe('GlDuoChat', () => {
             { ...MOCK_RESPONSE_MESSAGE, content: undefined, chunks: [''] },
           ],
         ],
+        [[{ ...MOCK_RESPONSE_MESSAGE, chunkId: 1 }]],
       ])('prevents submission when streaming (messages = "%o")', (msgs = []) => {
         createComponent({
           propsData: { isChatAvailable: true, messages: msgs },

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

@@ -125,45 +125,28 @@ export const Interactive = (args, { argTypes }) => ({
     async mockResponseFromAi() {
       const generator = generateMockResponseChunks(this.requestId);
 
-      for await (const result of generator) {
-        const { chunkId, content, ...messageAttributes } = result;
+      for await (const newResponse of generator) {
         const existingMessageIndex = this.msgs.findIndex(
-          (msg) => msg.requestId === result.requestId && msg.role === result.role
+          (msg) => msg.requestId === newResponse.requestId && msg.role === newResponse.role
         );
-
-        if (existingMessageIndex === -1) {
-          this.addNewMessage(messageAttributes, content);
+        const existingMessage = this.msgs[existingMessageIndex];
+        if (existingMessage) {
+          this.updateExistingMessage(newResponse, existingMessageIndex);
         } else {
-          this.updateExistingMessage(existingMessageIndex, content, chunkId);
+          this.addNewMessage(newResponse);
         }
       }
     },
-    addNewMessage(messageAttributes, content) {
+    addNewMessage(msg) {
       this.promptInFlight = false;
-      this.$set(this.msgs, this.msgs.length, {
-        ...messageAttributes,
-        chunks: [content],
-      });
+      this.$set(this.msgs, this.msgs.length, msg);
     },
-    updateExistingMessage(index, content, chunkId) {
-      const message = this.msgs[index];
-
-      if (chunkId != null) {
-        // Ensure the chunks array exists
-        if (!message.chunks) {
-          this.$set(message, 'chunks', []);
-        } else {
-          this.$set(message.chunks, chunkId, content);
-        }
-      } else {
-        // Update for final message
-        this.$set(message, 'content', content);
-
-        // Remove chunks if they are not needed anymore
-        if (message.chunks) {
-          this.$delete(message, 'chunks');
-        }
-      }
+    updateExistingMessage(newResponse, existingMessageIndex) {
+      const existingMessage = this.msgs[existingMessageIndex];
+      this.$set(this.msgs, existingMessageIndex, {
+        ...existingMessage,
+        ...newResponse,
+      });
     },
   },
   template: `

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

@@ -225,7 +225,10 @@ export default {
       return this.isLoading || this.isStreaming;
     },
     isStreaming() {
-      return Boolean(this.lastMessage?.chunks?.length > 0 && !this.lastMessage?.content);
+      return Boolean(
+        (this.lastMessage?.chunks?.length > 0 && !this.lastMessage?.content) ||
+          typeof this.lastMessage?.chunkId === 'number'
+      );
     },
     filteredSlashCommands() {
       const caseInsensitivePrompt = this.prompt.toLowerCase();

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

@@ -41,6 +41,21 @@ export const MOCK_RESPONSE_MESSAGE = {
   timestamp: '2021-04-21T12:00:00.000Z',
 };
 
+export const generateSeparateChunks = (n) => {
+  const res = [];
+  for (let i = 1; i <= n; i += 1) {
+    res.push({
+      chunkId: i,
+      content: `chunk #${i}`,
+      role: MESSAGE_MODEL_ROLES.assistant,
+      requestId: '987',
+      errors: [],
+      timestamp: '2021-04-21T12:00:00.000Z',
+    });
+  }
+  return res;
+};
+
 export const MOCK_RESPONSE_MESSAGE_FOR_STREAMING = {
   id: '123',
   content: `To change your password in GitLab:
@@ -64,7 +79,6 @@ export const MOCK_RESPONSE_MESSAGE_FOR_STREAMING = {
   ~~~
   which is rendered while streaming.
   `,
-  contentHtml: '',
   role: 'assistant',
   extras: {},
   requestId: '987',
@@ -91,7 +105,7 @@ export async function* generateMockResponseChunks(requestId = 1) {
       ...MOCK_RESPONSE_MESSAGE_FOR_STREAMING,
       requestId,
       content: MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content.substring(start, end),
-      chunkId,
+      chunkId: chunkId + 1,
     };
 
     // eslint-disable-next-line no-await-in-loop
@@ -108,8 +122,9 @@ export async function* generateMockResponseChunks(requestId = 1) {
 
 export const MOCK_USER_PROMPT_MESSAGE = {
   id: '456',
+  chunkId: null,
   content: 'How to create a new template?',
-  contentHtml: '',
+  contentHtml: '<p>How to create a new template?</p>',
   role: MESSAGE_MODEL_ROLES.user,
   requestId: '987',
   errors: [],

package/src/components/experimental/duo/user_feedback/user_feedback.stories.js

@@ -74,9 +74,7 @@ export const Slots = (args, { argTypes }) => ({
         @feedback="logEvent">
         <template #feedback-extra-fields>
           <div class="gl-mb-5">
-            <gl-alert variant="info" :dismissible="false">
-              GitLab team members can not see your conversation. Please be as descriptive as possible.
-            </gl-alert>
+              Example slot content: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
           </div>
           <gl-form-group label="What were you doing?" optional>
             <gl-form-textarea placeholder="The situation in which you interacted with GitLab Duo Chat." v-model="didWhat" />

package/src/components/experimental/duo/user_feedback/user_feedback_modal.spec.js

@@ -12,10 +12,12 @@ const DummyComponent = {
 
 describe('FeedbackModal', () => {
   let wrapper;
+  const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
   const findModal = () => wrapper.findComponent(GlModal);
-  const findOptions = () => wrapper.findComponent('[data-testid="feedback-options"]');
+  const findOptions = () => findByTestId('feedback-options');
   const findOptionsCheckboxes = () => findOptions().findAllComponents(GlFormCheckbox);
   const findTextarea = () => wrapper.findComponent(GlFormTextarea);
+
   const selectOption = (index = 0) => {
     wrapper
       .findAllComponents(GlFormCheckboxGroup)
@@ -31,6 +33,9 @@ describe('FeedbackModal', () => {
       },
       provide: options.injections,
     });
+
+    wrapper.vm.close = jest.fn();
+    return wrapper;
   };
 
   describe('inputs', () => {
@@ -56,7 +61,7 @@ describe('FeedbackModal', () => {
       createComponent();
     });
 
-    it('emits the feedback event when the submit button is clicked', () => {
+    it('emits the feedback event when the submit button is clicked and closes the modal', () => {
       selectOption();
       findModal().vm.$emit('primary');
       expect(wrapper.emitted('feedback-submitted')).toEqual([
@@ -67,9 +72,20 @@ describe('FeedbackModal', () => {
           },
         ],
       ]);
+
+      expect(wrapper.vm.close).toHaveBeenCalledTimes(1);
     });
-    it('does not emit event if there is no option selected', () => {
+
+    it('does not render validation error by default', () => {
+      expect(findOptions().vm.$attrs.state).not.toBe(false);
+    });
+
+    it('renders validation error when submit was triggered without selected a required option', async () => {
       findModal().vm.$emit('primary');
+      await wrapper.vm.$nextTick();
+
+      expect(findOptions().vm.$attrs.state).toBe(false);
+      expect(findOptions().vm.$attrs['invalid-feedback']).toBe('Select at least one option.');
       expect(wrapper.emitted('feedback-submitted')).toBeUndefined();
     });
   });

package/src/components/experimental/duo/user_feedback/user_feedback_modal.vue

@@ -18,6 +18,7 @@ export const i18n = {
     IMPROVEMENT_SUGGESTION_PLACEHOLDER: 'How the response might better meet your needs.',
     MORE_LABEL: 'More information',
     MORE_PLACEHOLDER: 'How could the content be improved?',
+    REQUIRED_VALIDATION_ERROR: 'Select at least one option.',
     FEEDBACK_OPTIONS: {
       helpful: 'Helpful',
       unhelpful: 'Unhelpful or irrelevant',
@@ -81,23 +82,34 @@ export default {
     return {
       selectedFeedbackOptions: [],
       extendedFeedback: '',
+      isValid: null,
     };
   },
+  watch: {
+    selectedFeedbackOptions(options) {
+      this.isValid = options.length > 0;
+    },
+  },
   methods: {
+    close() {
+      this.$refs.feedbackModal.hide();
+    },
     show() {
       this.$refs.feedbackModal.show();
     },
-    onFeedbackSubmit() {
+    onFeedbackSubmit(e) {
       if (this.selectedFeedbackOptions.length) {
         this.$emit('feedback-submitted', {
           feedbackChoices: this.selectedFeedbackOptions,
           extendedTextFeedback: this.extendedFeedback,
         });
+        this.close();
+        this.isValid = null;
+      } else {
+        e?.preventDefault();
+        this.isValid = false;
       }
     },
-    onFeedbackCanceled() {
-      this.$refs.feedbackModal.hide();
-    },
   },
   actions: {
     primary: {
@@ -121,12 +133,13 @@ export default {
     :visible="false"
     size="sm"
     @primary="onFeedbackSubmit"
-    @canceled="onFeedbackCanceled"
+    @canceled="close"
   >
     <p>{{ $options.i18n.MODAL.DESCRIPTION }}</p>
     <gl-form-group
+      :invalid-feedback="$options.i18n.MODAL.REQUIRED_VALIDATION_ERROR"
+      :state="isValid"
       :label="$options.i18n.MODAL.OPTIONS_LABEL"
-      :optional="false"
       data-testid="feedback-options"
     >
       <gl-form-checkbox-group