@gitlab/ui 77.0.0 → 77.2.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [77.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v77.1.0...v77.2.0) (2024-02-27)
+
+
+### Features
+
+* **tailwind:** add screens to the preset ([d6835dd](https://gitlab.com/gitlab-org/gitlab-ui/commit/d6835ddac49021e38452eb36d647e4ae59bc4ac2))
+
+# [77.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v77.0.0...v77.1.0) (2024-02-27)
+
+
+### Features
+
+* **DuoChat:** Improve the feedback mechanism in the DuoChat ([235077d](https://gitlab.com/gitlab-org/gitlab-ui/commit/235077d5a20a8a3848233450d8d1c9190008cc15))
+
 # [77.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v76.1.0...v77.0.0) (2024-02-27)
 
 

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

@@ -1,4 +1,6 @@
 import GlDuoUserFeedback from '../../../user_feedback/user_feedback';
+import GlFormGroup from '../../../../../base/form/form_group/form_group';
+import GlFormTextarea from '../../../../../base/form/form_textarea/form_textarea';
 import { SafeHtmlDirective } from '../../../../../../directives/safe_html/safe_html';
 import { MESSAGE_MODEL_ROLES } from '../../constants';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources';
@@ -6,6 +8,16 @@ import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
 import { CopyCodeElement } from './copy_code_element';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+const i18n = {
+  MODAL: {
+    TITLE: 'Give feedback on GitLab Duo Chat',
+    ALERT_TEXT: 'GitLab team members cannot view your conversation. Please be as descriptive as possible.',
+    DID_WHAT: 'What were you doing?',
+    INTERACTION: 'The situation in which you interacted with GitLab Duo Chat.',
+    IMPROVE_WHAT: 'How could the response be improved?',
+    BETTER_RESPONSE: 'How the response might better meet your needs.'
+  }
+};
 const concatUntilEmpty = arr => {
   if (!arr) return '';
   let end = arr.findIndex(el => !el);
@@ -19,11 +31,19 @@ var script = {
   },
   components: {
     DocumentationSources,
-    GlDuoUserFeedback
+    GlDuoUserFeedback,
+    GlFormGroup,
+    GlFormTextarea
   },
   directives: {
     SafeHtml: SafeHtmlDirective
   },
+  provide() {
+    return {
+      modalTitle: i18n.MODAL.TITLE,
+      modalAlertText: i18n.MODAL.ALERT_TEXT
+    };
+  },
   inject: {
     // Note, we likely might move away from Provide/Inject for this
     // and only ship the versions that are currently in the default
@@ -49,6 +69,12 @@ var script = {
       required: true
     }
   },
+  data() {
+    return {
+      didWhat: '',
+      improveWhat: ''
+    };
+  },
   computed: {
     isAssistantMessage() {
       return this.message.role.toLowerCase() === MESSAGE_MODEL_ROLES.assistant;
@@ -84,8 +110,16 @@ var script = {
       if (this.message.contentHtml) {
         this.renderGFM(this.$refs.content);
       }
+    },
+    logEvent(e) {
+      this.$emit('track-feedback', {
+        ...e,
+        didWhat: this.didWhat,
+        improveWhat: this.improveWhat
+      });
     }
-  }
+  },
+  i18n
 };
 
 /* script */
@@ -96,7 +130,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
     'gl-ml-auto gl-bg-blue-100 gl-text-blue-900 gl-rounded-bottom-right-none': _vm.isUserMessage,
     'gl-rounded-bottom-left-none gl-text-gray-900 gl-bg-white gl-border-1 gl-border-solid gl-border-gray-50':
       _vm.isAssistantMessage,
-  }},[_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.messageContent),expression:"messageContent",arg:_vm.$options.safeHtmlConfigExtension}],ref:"content"}),_vm._v(" "),(_vm.isAssistantMessage)?[(_vm.sources)?_c('documentation-sources',{attrs:{"sources":_vm.sources}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-flex-end gl-mt-4 duo-chat-message-feedback"},[_c('gl-duo-user-feedback',{on:{"feedback":function($event){return _vm.$emit('track-feedback', $event)}}})],1)]:_vm._e()],2)};
+  }},[_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.messageContent),expression:"messageContent",arg:_vm.$options.safeHtmlConfigExtension}],ref:"content"}),_vm._v(" "),(_vm.isAssistantMessage)?[(_vm.sources)?_c('documentation-sources',{attrs:{"sources":_vm.sources}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-flex-end gl-mt-4 duo-chat-message-feedback"},[_c('gl-duo-user-feedback',{attrs:{"modal-title":_vm.$options.i18n.MODAL.TITLE,"modal-alert":_vm.$options.i18n.MODAL.ALERT_TEXT},on:{"feedback":_vm.logEvent},scopedSlots:_vm._u([{key:"feedback-extra-fields",fn:function(){return [_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.DID_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.INTERACTION},model:{value:(_vm.didWhat),callback:function ($$v) {_vm.didWhat=$$v;},expression:"didWhat"}})],1),_vm._v(" "),_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.IMPROVE_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.BETTER_RESPONSE},model:{value:(_vm.improveWhat),callback:function ($$v) {_vm.improveWhat=$$v;},expression:"improveWhat"}})],1)]},proxy:true}],null,false,419229417)})],1)]:_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */
@@ -129,3 +163,4 @@ var __vue_staticRenderFns__ = [];
   );
 
 export default __vue_component__;
+export { i18n };

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

@@ -1,55 +1,72 @@
 import GlModal from '../../../base/modal/modal';
+import GlAlert from '../../../base/alert/alert';
 import GlFormGroup from '../../../base/form/form_group/form_group';
 import GlFormTextarea from '../../../base/form/form_textarea/form_textarea';
 import GlFormCheckboxGroup from '../../../base/form/form_checkbox/form_checkbox_group';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const i18n = {
-  MODAL_TITLE: 'Give feedback on AI content',
-  MODAL_DESCRIPTION: 'To help improve the quality of the content, send your feedback to GitLab team members.',
-  MODAL_OPTIONS_LABEL: 'How was the AI content?',
-  MODAL_MORE_LABEL: 'More information',
-  MODAL_MORE_PLACEHOLDER: 'How could the content be improved?',
-  MODAL_FEEDBACK_OPTIONS: {
-    helpful: 'Helpful',
-    unhelpful: 'Unhelpful or irrelevant',
-    incorrect: 'Factually incorrect',
-    long: 'Too long',
-    abuse: 'Abusive or offensive',
-    other: 'Something else'
-  },
-  MODAL_ACTIONS: {
-    submit: 'Submit',
-    cancel: 'Cancel'
+  MODAL: {
+    TITLE: 'Give feedback on GitLab Duo',
+    DESCRIPTION: 'To help improve GitLab Duo, send your feeback to GitLab team members.',
+    ALERT: 'GitLab team members cannot see the AI content. Please be as descriptive as possible.',
+    OPTIONS_LABEL: 'How could the AI content be improved?',
+    SITUATION_DESCRIPTION_LABEL: 'What were you doing?',
+    SITUATION_DESCRIPTION_PLACEHOLDER: 'The situation in which you interacted with GitLab Duo Chat.',
+    IMPROVEMENT_SUGGESTION_LABEL: 'How could the response be improved?',
+    IMPROVEMENT_SUGGESTION_PLACEHOLDER: 'How the response might better meet your needs.',
+    MORE_LABEL: 'More information',
+    MORE_PLACEHOLDER: 'How could the content be improved?',
+    FEEDBACK_OPTIONS: {
+      helpful: 'Helpful',
+      unhelpful: 'Unhelpful or irrelevant',
+      incorrect: 'Factually incorrect',
+      long: 'Too long',
+      abuse: 'Abusive or offensive',
+      other: 'Something else'
+    },
+    ACTIONS: {
+      submit: 'Submit',
+      cancel: 'Cancel'
+    }
   }
 };
 const feedbackOptions = [{
-  text: i18n.MODAL_FEEDBACK_OPTIONS.helpful,
+  text: i18n.MODAL.FEEDBACK_OPTIONS.helpful,
   value: 'helpful'
 }, {
-  text: i18n.MODAL_FEEDBACK_OPTIONS.unhelpful,
+  text: i18n.MODAL.FEEDBACK_OPTIONS.unhelpful,
   value: 'unhelpful'
 }, {
-  text: i18n.MODAL_FEEDBACK_OPTIONS.incorrect,
+  text: i18n.MODAL.FEEDBACK_OPTIONS.incorrect,
   value: 'incorrect'
 }, {
-  text: i18n.MODAL_FEEDBACK_OPTIONS.long,
+  text: i18n.MODAL.FEEDBACK_OPTIONS.long,
   value: 'long'
 }, {
-  text: i18n.MODAL_FEEDBACK_OPTIONS.abuse,
+  text: i18n.MODAL.FEEDBACK_OPTIONS.abuse,
   value: 'abuse'
 }, {
-  text: i18n.MODAL_FEEDBACK_OPTIONS.other,
+  text: i18n.MODAL.FEEDBACK_OPTIONS.other,
   value: 'other'
 }];
 var script = {
   name: 'DuoChatFeedbackModal',
   components: {
     GlModal,
+    GlAlert,
     GlFormCheckboxGroup,
     GlFormGroup,
     GlFormTextarea
   },
+  inject: {
+    modalTitle: {
+      default: i18n.MODAL.TITLE
+    },
+    modalAlert: {
+      default: i18n.MODAL.ALERT
+    }
+  },
   data() {
     return {
       selectedFeedbackOptions: [],
@@ -74,10 +91,10 @@ var script = {
   },
   actions: {
     primary: {
-      text: i18n.MODAL_ACTIONS.submit
+      text: i18n.MODAL.ACTIONS.submit
     },
     cancel: {
-      text: i18n.MODAL_ACTIONS.cancel
+      text: i18n.MODAL.ACTIONS.cancel
     }
   },
   feedbackOptions,
@@ -88,7 +105,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.$options.i18n.MODAL_TITLE,"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(" "),_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.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_staticRenderFns__ = [];
 
   /* style */

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 27 Feb 2024 15:36:15 GMT
+ * Generated on Tue, 27 Feb 2024 18:50:13 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 27 Feb 2024 15:36:15 GMT
+ * Generated on Tue, 27 Feb 2024 18:50:13 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 27 Feb 2024 15:36:15 GMT
+ * Generated on Tue, 27 Feb 2024 18:50:13 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 27 Feb 2024 15:36:15 GMT
+ * Generated on Tue, 27 Feb 2024 18:50:13 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 Tue, 27 Feb 2024 15:36:15 GMT
+// Generated on Tue, 27 Feb 2024 18:50:13 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 27 Feb 2024 15:36:15 GMT
+// Generated on Tue, 27 Feb 2024 18:50:13 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "77.0.0",
+  "version": "77.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -136,7 +136,7 @@
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.56.0",
+    "eslint": "8.57.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.15.1",
     "eslint-plugin-storybook": "0.8.0",

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

@@ -107,9 +107,21 @@ describe('DuoChatMessage', () => {
       expect(findUserFeedback().exists()).toBe(true);
     });
 
-    it('proxies the emitted event from the User Feedback component', () => {
-      findUserFeedback().vm.$emit('feedback', 'foo');
-      expect(wrapper.emitted('track-feedback')).toEqual([['foo']]);
+    it('proxies and enhances the emitted event from the User Feedback component', () => {
+      findUserFeedback().vm.$emit('feedback', {
+        feedbackChoices: ['incorrect'],
+        extendedTextFeedback: 'exampleText',
+      });
+      expect(wrapper.emitted('track-feedback')).toEqual([
+        [
+          {
+            feedbackChoices: ['incorrect'],
+            extendedTextFeedback: 'exampleText',
+            didWhat: '',
+            improveWhat: '',
+          },
+        ],
+      ]);
     });
   });
 

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

@@ -1,5 +1,7 @@
 <script>
 import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
+import GlFormGroup from '../../../../../base/form/form_group/form_group.vue';
+import GlFormTextarea from '../../../../../base/form/form_textarea/form_textarea.vue';
 import { SafeHtmlDirective as SafeHtml } from '../../../../../../directives/safe_html/safe_html';
 import { MESSAGE_MODEL_ROLES } from '../../constants';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources.vue';
@@ -7,6 +9,18 @@ import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_s
 import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
 import { CopyCodeElement } from './copy_code_element';
 
+export const i18n = {
+  MODAL: {
+    TITLE: 'Give feedback on GitLab Duo Chat',
+    ALERT_TEXT:
+      'GitLab team members cannot view your conversation. Please be as descriptive as possible.',
+    DID_WHAT: 'What were you doing?',
+    INTERACTION: 'The situation in which you interacted with GitLab Duo Chat.',
+    IMPROVE_WHAT: 'How could the response be improved?',
+    BETTER_RESPONSE: 'How the response might better meet your needs.',
+  },
+};
+
 const concatUntilEmpty = (arr) => {
   if (!arr) return '';
 
@@ -25,10 +39,18 @@ export default {
   components: {
     DocumentationSources,
     GlDuoUserFeedback,
+    GlFormGroup,
+    GlFormTextarea,
   },
   directives: {
     SafeHtml,
   },
+  provide() {
+    return {
+      modalTitle: i18n.MODAL.TITLE,
+      modalAlertText: i18n.MODAL.ALERT_TEXT,
+    };
+  },
   inject: {
     // Note, we likely might move away from Provide/Inject for this
     // and only ship the versions that are currently in the default
@@ -54,6 +76,12 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      didWhat: '',
+      improveWhat: '',
+    };
+  },
   computed: {
     isAssistantMessage() {
       return this.message.role.toLowerCase() === MESSAGE_MODEL_ROLES.assistant;
@@ -92,7 +120,15 @@ export default {
         this.renderGFM(this.$refs.content);
       }
     },
+    logEvent(e) {
+      this.$emit('track-feedback', {
+        ...e,
+        didWhat: this.didWhat,
+        improveWhat: this.improveWhat,
+      });
+    },
   },
+  i18n,
 };
 </script>
 <template>
@@ -110,7 +146,23 @@ export default {
       <documentation-sources v-if="sources" :sources="sources" />
 
       <div class="gl-display-flex gl-align-items-flex-end gl-mt-4 duo-chat-message-feedback">
-        <gl-duo-user-feedback @feedback="$emit('track-feedback', $event)" />
+        <gl-duo-user-feedback
+          :modal-title="$options.i18n.MODAL.TITLE"
+          :modal-alert="$options.i18n.MODAL.ALERT_TEXT"
+          @feedback="logEvent"
+        >
+          <template #feedback-extra-fields>
+            <gl-form-group :label="$options.i18n.MODAL.DID_WHAT" optional>
+              <gl-form-textarea v-model="didWhat" :placeholder="$options.i18n.MODAL.INTERACTION" />
+            </gl-form-group>
+            <gl-form-group :label="$options.i18n.MODAL.IMPROVE_WHAT" optional>
+              <gl-form-textarea
+                v-model="improveWhat"
+                :placeholder="$options.i18n.MODAL.BETTER_RESPONSE"
+              />
+            </gl-form-group>
+          </template>
+        </gl-duo-user-feedback>
       </div>
     </template>
   </div>

package/src/components/experimental/duo/user_feedback/user_feedback.md

@@ -58,11 +58,6 @@ you must copy the textarea field from the `DuoChatFeedbackModal` component into
   @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>
-    </div>
     <gl-form-group label="What were you doing?" optional>
       <gl-form-textarea
         placeholder="The situation in which you interacted with GitLab Duo Chat."

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

@@ -31,11 +31,11 @@ describe('UserFeedback', () => {
   const findButton = () => wrapper.findComponent(GlButton);
   const findModal = () => wrapper.findComponent(FeedbackModal);
 
-  beforeEach(() => {
-    createComponent();
-  });
-
   describe('rendering with no feedback registered', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
     it('renders a button to provide feedback', () => {
       expect(findButton().exists()).toBe(true);
     });
@@ -65,6 +65,10 @@ describe('UserFeedback', () => {
   });
 
   describe('event handling', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
     const passedFeedback = { feedbackOptions: ['helpful'], extendedFeedback: 'Foo bar' };
 
     it('emits the event, containing the form data, when modal emits', () => {
@@ -87,6 +91,10 @@ describe('UserFeedback', () => {
   });
 
   describe('slots', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
     it('renders the `feedback-extra-fields` slot', () => {
       expect(wrapper.findComponent(DummyComponent).exists()).toBe(false);
       wrapper.destroy();

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

@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import GlModal from '../../../base/modal/modal.vue';
+import GlAlert from '../../../base/alert/alert.vue';
 import GlFormCheckbox from '../../../base/form/form_checkbox/form_checkbox.vue';
 import GlFormCheckboxGroup from '../../../base/form/form_checkbox/form_checkbox_group.vue';
 import GlFormTextarea from '../../../base/form/form_textarea/form_textarea.vue';
@@ -11,7 +12,6 @@ const DummyComponent = {
 
 describe('FeedbackModal', () => {
   let wrapper;
-
   const findModal = () => wrapper.findComponent(GlModal);
   const findOptions = () => wrapper.findComponent('[data-testid="feedback-options"]');
   const findOptionsCheckboxes = () => findOptions().findAllComponents(GlFormCheckbox);
@@ -29,26 +29,33 @@ describe('FeedbackModal', () => {
         GlModal,
         GlFormCheckboxGroup,
       },
+      provide: options.injections,
     });
   };
 
-  beforeEach(() => {
-    createComponent();
-  });
+  describe('inputs', () => {
+    beforeEach(() => {
+      createComponent();
+    });
 
-  it('renders the feedback options', () => {
-    const checkboxes = findOptionsCheckboxes();
-    feedbackOptions.forEach((option, index) => {
-      expect(checkboxes.at(index).text()).toBe(option.text);
-      expect(checkboxes.at(index).attributes('value')).toBe(option.value);
+    it('renders the feedback options', () => {
+      const checkboxes = findOptionsCheckboxes();
+      feedbackOptions.forEach((option, index) => {
+        expect(checkboxes.at(index).text()).toBe(option.text);
+        expect(checkboxes.at(index).attributes('value')).toBe(option.value);
+      });
     });
-  });
 
-  it('renders the textarea field for additional feedback', () => {
-    expect(findTextarea().exists()).toBe(true);
+    it('renders the textarea field for additional feedback', () => {
+      expect(findTextarea().exists()).toBe(true);
+    });
   });
 
   describe('interaction', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
     it('emits the feedback event when the submit button is clicked', () => {
       selectOption();
       findModal().vm.$emit('primary');
@@ -68,6 +75,10 @@ describe('FeedbackModal', () => {
   });
 
   describe('slots', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
     it('renders the `feedback-extra-fields` slot with default content', () => {
       expect(wrapper.findComponent(DummyComponent).exists()).toBe(false);
       expect(findTextarea().exists()).toBe(true);
@@ -78,4 +89,30 @@ describe('FeedbackModal', () => {
       expect(findTextarea().exists()).toBe(false);
     });
   });
+
+  describe('injections', () => {
+    it('should pass modalTitle when set as injection', () => {
+      const customTitle = 'Custom Feedback Title';
+      createComponent({ injections: { modalTitle: customTitle } });
+      expect(findModal().props('title')).toBe(customTitle);
+    });
+
+    it('should pass modalTitle default when injection not set', () => {
+      createComponent();
+      expect(findModal().props('title')).toBe('Give feedback on GitLab Duo');
+    });
+
+    it('should pass modalAlert when set as injection', () => {
+      const customAlert = 'Custom Alert Message';
+      createComponent({ injections: { modalAlert: customAlert } });
+      expect(wrapper.findComponent(GlAlert).text()).toBe(customAlert);
+    });
+
+    it('should render modalAlert default when injection not set', () => {
+      createComponent();
+      expect(wrapper.findComponent(GlAlert).text()).toBe(
+        'GitLab team members cannot see the AI content. Please be as descriptive as possible.'
+      );
+    });
+  });
 });

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

@@ -1,53 +1,61 @@
 <script>
 import GlModal from '../../../base/modal/modal.vue';
+import GlAlert from '../../../base/alert/alert.vue';
 import GlFormGroup from '../../../base/form/form_group/form_group.vue';
 import GlFormTextarea from '../../../base/form/form_textarea/form_textarea.vue';
 import GlFormCheckboxGroup from '../../../base/form/form_checkbox/form_checkbox_group.vue';
 
 export const i18n = {
-  MODAL_TITLE: 'Give feedback on AI content',
-  MODAL_DESCRIPTION:
-    'To help improve the quality of the content, send your feedback to GitLab team members.',
-  MODAL_OPTIONS_LABEL: 'How was the AI content?',
-  MODAL_MORE_LABEL: 'More information',
-  MODAL_MORE_PLACEHOLDER: 'How could the content be improved?',
-  MODAL_FEEDBACK_OPTIONS: {
-    helpful: 'Helpful',
-    unhelpful: 'Unhelpful or irrelevant',
-    incorrect: 'Factually incorrect',
-    long: 'Too long',
-    abuse: 'Abusive or offensive',
-    other: 'Something else',
-  },
-  MODAL_ACTIONS: {
-    submit: 'Submit',
-    cancel: 'Cancel',
+  MODAL: {
+    TITLE: 'Give feedback on GitLab Duo',
+    DESCRIPTION: 'To help improve GitLab Duo, send your feeback to GitLab team members.',
+    ALERT: 'GitLab team members cannot see the AI content. Please be as descriptive as possible.',
+    OPTIONS_LABEL: 'How could the AI content be improved?',
+    SITUATION_DESCRIPTION_LABEL: 'What were you doing?',
+    SITUATION_DESCRIPTION_PLACEHOLDER:
+      'The situation in which you interacted with GitLab Duo Chat.',
+    IMPROVEMENT_SUGGESTION_LABEL: 'How could the response be improved?',
+    IMPROVEMENT_SUGGESTION_PLACEHOLDER: 'How the response might better meet your needs.',
+    MORE_LABEL: 'More information',
+    MORE_PLACEHOLDER: 'How could the content be improved?',
+    FEEDBACK_OPTIONS: {
+      helpful: 'Helpful',
+      unhelpful: 'Unhelpful or irrelevant',
+      incorrect: 'Factually incorrect',
+      long: 'Too long',
+      abuse: 'Abusive or offensive',
+      other: 'Something else',
+    },
+    ACTIONS: {
+      submit: 'Submit',
+      cancel: 'Cancel',
+    },
   },
 };
 
 export const feedbackOptions = [
   {
-    text: i18n.MODAL_FEEDBACK_OPTIONS.helpful,
+    text: i18n.MODAL.FEEDBACK_OPTIONS.helpful,
     value: 'helpful',
   },
   {
-    text: i18n.MODAL_FEEDBACK_OPTIONS.unhelpful,
+    text: i18n.MODAL.FEEDBACK_OPTIONS.unhelpful,
     value: 'unhelpful',
   },
   {
-    text: i18n.MODAL_FEEDBACK_OPTIONS.incorrect,
+    text: i18n.MODAL.FEEDBACK_OPTIONS.incorrect,
     value: 'incorrect',
   },
   {
-    text: i18n.MODAL_FEEDBACK_OPTIONS.long,
+    text: i18n.MODAL.FEEDBACK_OPTIONS.long,
     value: 'long',
   },
   {
-    text: i18n.MODAL_FEEDBACK_OPTIONS.abuse,
+    text: i18n.MODAL.FEEDBACK_OPTIONS.abuse,
     value: 'abuse',
   },
   {
-    text: i18n.MODAL_FEEDBACK_OPTIONS.other,
+    text: i18n.MODAL.FEEDBACK_OPTIONS.other,
     value: 'other',
   },
 ];
@@ -56,10 +64,19 @@ export default {
   name: 'DuoChatFeedbackModal',
   components: {
     GlModal,
+    GlAlert,
     GlFormCheckboxGroup,
     GlFormGroup,
     GlFormTextarea,
   },
+  inject: {
+    modalTitle: {
+      default: i18n.MODAL.TITLE,
+    },
+    modalAlert: {
+      default: i18n.MODAL.ALERT,
+    },
+  },
   data() {
     return {
       selectedFeedbackOptions: [],
@@ -84,10 +101,10 @@ export default {
   },
   actions: {
     primary: {
-      text: i18n.MODAL_ACTIONS.submit,
+      text: i18n.MODAL.ACTIONS.submit,
     },
     cancel: {
-      text: i18n.MODAL_ACTIONS.cancel,
+      text: i18n.MODAL.ACTIONS.cancel,
     },
   },
   feedbackOptions,
@@ -98,7 +115,7 @@ export default {
   <gl-modal
     ref="feedbackModal"
     modal-id="feedbackModal"
-    :title="$options.i18n.MODAL_TITLE"
+    :title="modalTitle"
     :action-primary="$options.actions.primary"
     :action-cancel="$options.actions.cancel"
     :visible="false"
@@ -106,9 +123,9 @@ export default {
     @primary="onFeedbackSubmit"
     @canceled="onFeedbackCanceled"
   >
-    <p>{{ $options.i18n.MODAL_DESCRIPTION }}</p>
+    <p>{{ $options.i18n.MODAL.DESCRIPTION }}</p>
     <gl-form-group
-      :label="$options.i18n.MODAL_OPTIONS_LABEL"
+      :label="$options.i18n.MODAL.OPTIONS_LABEL"
       :optional="false"
       data-testid="feedback-options"
     >
@@ -117,13 +134,13 @@ export default {
         :options="$options.feedbackOptions"
       />
     </gl-form-group>
-
+    <gl-alert class="gl-mb-5" :dismissible="false">{{ modalAlert }}</gl-alert>
     <!-- @slot The addition Feedback form fields. -->
     <slot name="feedback-extra-fields">
-      <gl-form-group :label="$options.i18n.MODAL_MORE_LABEL" optional>
+      <gl-form-group :label="$options.i18n.MODAL.MORE_LABEL" optional>
         <gl-form-textarea
           v-model="extendedFeedback"
-          :placeholder="$options.i18n.MODAL_MORE_PLACEHOLDER"
+          :placeholder="$options.i18n.MODAL.MORE_PLACEHOLDER"
         />
       </gl-form-group>
     </slot>

package/tailwind.defaults.js

@@ -59,6 +59,12 @@ const spacing = {
 module.exports = {
   prefix: 'gl-',
   theme: {
+    screens: {
+      sm: '576px',
+      md: '768px',
+      lg: '992px',
+      xl: '1200px',
+    },
     colors: {
       white: `var(--white, ${baseColorTokens.white.$value})`,
       black: `var(--black, ${baseColorTokens.black.$value})`,