@gitlab/duo-ui 15.8.3 → 15.9.0

package/src/components/agentic_chat/components/agentic_binary_feedback/agentic_binary_feedback.vue

@@ -1,19 +1,64 @@
 <script>
-import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { nextTick } from 'vue';
+import { GlButton, GlIcon, GlTooltipDirective, GlFormTextarea, GlForm } from '@gitlab/ui';
 import { translate } from '@gitlab/ui/dist/utils/i18n';
 
 export const i18n = {
   THANKS: translate('AgenticBinaryFeedback.thanks', 'Thanks for the feedback!'),
   THUMBS_UP: translate('AgenticBinaryFeedback.thumbsUp', 'Helpful'),
   THUMBS_DOWN: translate('AgenticBinaryFeedback.thumbsDown', 'Not helpful'),
+  TELL_US_MORE: translate('AgenticBinaryFeedback.tellUsMore', 'Tell us more'),
+  SUBMIT: translate('AgenticBinaryFeedback.submit', 'Submit'),
+  BACK: translate('AgenticBinaryFeedback.back', 'Back'),
+  CLOSE: translate('AgenticBinaryFeedback.close', 'Close'),
+  FEEDBACK_PLACEHOLDER: translate('AgenticBinaryFeedback.placeholder', 'Share your feedback...'),
+  THUMBS_UP_HEADER: translate('AgenticBinaryFeedback.thumbsUpHeader', 'What made this helpful?'),
+  THUMBS_DOWN_HEADER: translate(
+    'AgenticBinaryFeedback.thumbsDownHeader',
+    'What would have been more helpful?'
+  ),
+  TOO_GENERIC: translate('AgenticBinaryFeedback.tooGeneric', 'Too generic'),
+  MISSING_STEPS: translate('AgenticBinaryFeedback.missingSteps', 'Missing steps'),
+  WRONG_CONTEXT: translate('AgenticBinaryFeedback.wrongContext', 'Wrong context'),
+  OUTDATED_INCORRECT: translate('AgenticBinaryFeedback.outdatedIncorrect', 'Outdated/incorrect'),
+  SOLVED_PROBLEM: translate('AgenticBinaryFeedback.solvedProblem', 'Solved my problem'),
+  SAVED_TIME: translate('AgenticBinaryFeedback.savedTime', 'Saved me time'),
+  GOOD_EXAMPLES: translate('AgenticBinaryFeedback.goodExamples', 'Good examples'),
+  ACCURATE_INFO: translate('AgenticBinaryFeedback.accurateInfo', 'Accurate information'),
+};
+
+export const thumbsDownReasons = [
+  { key: 'too_generic', label: i18n.TOO_GENERIC },
+  { key: 'missing_steps', label: i18n.MISSING_STEPS },
+  { key: 'wrong_context', label: i18n.WRONG_CONTEXT },
+  { key: 'outdated_incorrect', label: i18n.OUTDATED_INCORRECT },
+  { key: 'tell_us_more', label: i18n.TELL_US_MORE, isCustom: true },
+];
+
+export const thumbsUpReasons = [
+  { key: 'solved_problem', label: i18n.SOLVED_PROBLEM },
+  { key: 'saved_time', label: i18n.SAVED_TIME },
+  { key: 'good_examples', label: i18n.GOOD_EXAMPLES },
+  { key: 'accurate_info', label: i18n.ACCURATE_INFO },
+  { key: 'tell_us_more', label: i18n.TELL_US_MORE, isCustom: true },
+];
+
+export const FEEDBACK_VIEW = {
+  CLOSED: 'closed',
+  REASON_LIST: 'reason_list',
+  TELL_US_MORE: 'tell_us_more',
 };
 
 export default {
   name: 'AgenticBinaryFeedback',
   i18n,
+  thumbsUpReasons,
+  thumbsDownReasons,
   components: {
     GlButton,
     GlIcon,
+    GlFormTextarea,
+    GlForm,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -21,34 +66,108 @@ export default {
   data() {
     return {
       feedbackType: null,
+      feedbackView: FEEDBACK_VIEW.CLOSED,
+      customFeedback: '',
+      feedbackSubmitted: false,
     };
   },
   computed: {
-    feedbackGiven() {
-      return this.feedbackType !== null;
-    },
     isThumbsUp() {
       return this.feedbackType === 'thumbs_up';
     },
     isThumbsDown() {
       return this.feedbackType === 'thumbs_down';
     },
+    reasonOptions() {
+      return this.isThumbsUp ? this.$options.thumbsUpReasons : this.$options.thumbsDownReasons;
+    },
+    reasonHeader() {
+      return this.isThumbsUp
+        ? this.$options.i18n.THUMBS_UP_HEADER
+        : this.$options.i18n.THUMBS_DOWN_HEADER;
+    },
+    isOverCharacterLimit() {
+      return this.customFeedback.length > 140;
+    },
+    trimmedFeedback() {
+      return this.customFeedback.trim();
+    },
+    isTextareaValid() {
+      return this.trimmedFeedback.length === 0 ? null : !this.isOverCharacterLimit;
+    },
+    canSubmitCustomFeedback() {
+      return this.trimmedFeedback.length > 0 && !this.isOverCharacterLimit;
+    },
+    characterCountText() {
+      const remaining = 140 - this.customFeedback.length;
+      if (remaining >= 0) {
+        return remaining === 1
+          ? `${remaining} character remaining`
+          : `${remaining} characters remaining`;
+      }
+      const over = Math.abs(remaining);
+      return over === 1 ? `${over} character over limit` : `${over} characters over limit`;
+    },
+    isDropdownOpen() {
+      return this.feedbackView !== FEEDBACK_VIEW.CLOSED;
+    },
+    isReasonListVisible() {
+      return this.feedbackView === FEEDBACK_VIEW.REASON_LIST;
+    },
+    isTellUsMoreVisible() {
+      return this.feedbackView === FEEDBACK_VIEW.TELL_US_MORE;
+    },
   },
   methods: {
-    submitFeedback(type) {
-      /**
-       * Notify listeners about the feedback submission.
-       * @param {string} type The feedback type ('thumbs_up' or 'thumbs_down').
-       */
-      this.$emit('feedback', { feedbackType: type });
+    selectFeedbackType(type) {
       this.feedbackType = type;
+      this.feedbackView = FEEDBACK_VIEW.REASON_LIST;
+      this.customFeedback = '';
+      this.scrollToDropdown();
+    },
+    scrollToDropdown() {
+      nextTick(() => {
+        const el = this.$refs.dropdown?.$el || this.$refs.dropdown;
+        el?.scrollIntoView?.({ behavior: 'smooth', block: 'nearest' });
+      });
+    },
+    selectReason(reason) {
+      if (reason.isCustom) {
+        this.feedbackView = FEEDBACK_VIEW.TELL_US_MORE;
+        return;
+      }
+      this.submitFeedback(reason.key);
+    },
+    submitCustomFeedback() {
+      this.submitFeedback(`custom_${this.customFeedback.trim()}`);
+    },
+    submitFeedback(feedbackReason) {
+      this.$emit('feedback', {
+        feedbackType: this.feedbackType,
+        feedbackReason,
+      });
+      this.feedbackView = FEEDBACK_VIEW.CLOSED;
+      this.feedbackSubmitted = true;
+    },
+    goBackToReasons() {
+      this.feedbackView = FEEDBACK_VIEW.REASON_LIST;
+      this.customFeedback = '';
+    },
+    closeDropdown() {
+      this.feedbackView = FEEDBACK_VIEW.CLOSED;
+      this.customFeedback = '';
+      this.feedbackType = null;
     },
   },
 };
 </script>
+
 <template>
-  <div class="agentic-binary-feedback gl-flex gl-items-center gl-gap-2">
-    <template v-if="!feedbackGiven">
+  <div
+    class="agentic-binary-feedback gl-flex gl-items-center gl-gap-2"
+    :class="{ 'gl-relative': !isDropdownOpen }"
+  >
+    <template v-if="!feedbackSubmitted && !isDropdownOpen">
       <gl-button
         v-gl-tooltip
         :title="$options.i18n.THUMBS_UP"
@@ -57,7 +176,7 @@ export default {
         category="tertiary"
         size="small"
         data-testid="thumb-up-button"
-        @click="submitFeedback('thumbs_up')"
+        @click="selectFeedbackType('thumbs_up')"
       />
       <gl-button
         v-gl-tooltip
@@ -67,9 +186,109 @@ export default {
         category="tertiary"
         size="small"
         data-testid="thumb-down-button"
-        @click="submitFeedback('thumbs_down')"
+        @click="selectFeedbackType('thumbs_down')"
       />
     </template>
+
+    <template v-else-if="isDropdownOpen">
+      <div class="gl-flex gl-h-6 gl-items-center">
+        <gl-icon
+          :name="isThumbsUp ? 'thumb-up' : 'thumb-down'"
+          :size="16"
+          :class="isThumbsUp ? 'gl-text-success' : 'gl-text-danger'"
+          data-testid="selected-thumb-icon"
+        />
+      </div>
+
+      <div
+        ref="dropdown"
+        class="feedback-reason-dropdown gl-l-0 gl-r-0 gl-border gl-absolute gl-top-full gl-mb-4 gl-mt-4 gl-w-full gl-rounded-lg gl-border-default gl-bg-subtle gl-p-3"
+        data-testid="feedback-reason-dropdown"
+      >
+        <div class="gl-mb-3 gl-flex gl-items-center gl-justify-between gl-gap-2">
+          <p class="gl-m-0 gl-text-sm gl-font-bold" data-testid="reason-header">
+            {{ reasonHeader }}
+          </p>
+          <div class="gl-flex gl-shrink-0 gl-items-center gl-gap-1">
+            <gl-button
+              v-if="isTellUsMoreVisible"
+              icon="go-back"
+              category="tertiary"
+              size="small"
+              :aria-label="$options.i18n.BACK"
+              data-testid="back-button"
+              @click="goBackToReasons"
+            />
+            <gl-button
+              icon="close"
+              category="tertiary"
+              size="small"
+              class="gl-mr-[-5px]"
+              :aria-label="$options.i18n.CLOSE"
+              data-testid="close-dropdown-button"
+              @click="closeDropdown"
+            />
+          </div>
+        </div>
+
+        <div
+          v-if="isReasonListVisible"
+          class="gl-flex gl-flex-wrap gl-gap-2"
+          data-testid="reason-buttons"
+        >
+          <gl-button
+            v-for="reason in reasonOptions"
+            :key="reason.key"
+            category="secondary"
+            size="small"
+            class="gl-rounded-full"
+            :icon="reason.isCustom ? 'pencil' : undefined"
+            :data-testid="`reason-${reason.key}`"
+            @click="selectReason(reason)"
+          >
+            {{ reason.label }}
+          </gl-button>
+        </div>
+
+        <div
+          v-if="isTellUsMoreVisible"
+          class="gl-flex gl-w-full gl-flex-col gl-gap-3"
+          data-testid="tell-us-more-view"
+        >
+          <gl-form
+            class="gl-flex gl-w-full gl-flex-col gl-gap-3"
+            @submit.prevent="canSubmitCustomFeedback ? submitCustomFeedback() : null"
+          >
+            <gl-form-textarea
+              v-model="customFeedback"
+              :state="isTextareaValid"
+              :placeholder="$options.i18n.FEEDBACK_PLACEHOLDER"
+              :rows="3"
+              :max-rows="5"
+              data-testid="custom-feedback-textarea"
+            />
+            <div class="gl-flex gl-items-center gl-justify-between">
+              <gl-button
+                variant="confirm"
+                size="small"
+                type="submit"
+                data-testid="submit-custom-feedback-button"
+              >
+                {{ $options.i18n.SUBMIT }}
+              </gl-button>
+              <span
+                :class="isOverCharacterLimit ? 'gl-text-danger' : 'gl-text-subtle'"
+                class="gl-text-sm"
+                data-testid="character-count"
+              >
+                {{ characterCountText }}
+              </span>
+            </div>
+          </gl-form>
+        </div>
+      </div>
+    </template>
+
     <div v-else class="gl-relative gl-flex gl-items-center gl-gap-2" data-testid="feedback-given">
       <div class="feedback-colored-icon" data-testid="feedback-colored-icon">
         <gl-icon

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

@@ -346,7 +346,7 @@ export default {
 <template>
   <div
     ref="content-wrapper"
-    class="duo-chat-message-container gl-group gl-flex gl-flex-col gl-gap-4 gl-text-base gl-break-anywhere"
+    class="duo-chat-message-container gl-group gl-relative gl-flex gl-flex-col gl-gap-4 gl-text-base gl-break-anywhere"
     :class="{
       'gl-pr-7': isAssistantMessage,
       'gl-justify-end gl-pl-7': isUserMessage,

package/translations.js

@@ -1,8 +1,23 @@
 /* eslint-disable import/no-default-export */
 export default {
+  'AgenticBinaryFeedback.accurateInfo': 'Accurate information',
+  'AgenticBinaryFeedback.back': 'Back',
+  'AgenticBinaryFeedback.close': 'Close',
+  'AgenticBinaryFeedback.goodExamples': 'Good examples',
+  'AgenticBinaryFeedback.missingSteps': 'Missing steps',
+  'AgenticBinaryFeedback.outdatedIncorrect': 'Outdated/incorrect',
+  'AgenticBinaryFeedback.placeholder': 'Share your feedback...',
+  'AgenticBinaryFeedback.savedTime': 'Saved me time',
+  'AgenticBinaryFeedback.solvedProblem': 'Solved my problem',
+  'AgenticBinaryFeedback.submit': 'Submit',
+  'AgenticBinaryFeedback.tellUsMore': 'Tell us more',
   'AgenticBinaryFeedback.thanks': 'Thanks for the feedback!',
   'AgenticBinaryFeedback.thumbsDown': 'Not helpful',
+  'AgenticBinaryFeedback.thumbsDownHeader': 'What would have been more helpful?',
   'AgenticBinaryFeedback.thumbsUp': 'Helpful',
+  'AgenticBinaryFeedback.thumbsUpHeader': 'What made this helpful?',
+  'AgenticBinaryFeedback.tooGeneric': 'Too generic',
+  'AgenticBinaryFeedback.wrongContext': 'Wrong context',
   'AgenticDuoChat.chatCancelLabel': 'Cancel',
   'AgenticDuoChat.chatDefaultPredefinedPromptsChangePassword':
     'How do I change my password in GitLab?',