@gitlab/duo-ui 15.10.0 → 15.11.0

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

@@ -1,173 +1,61 @@
 <script>
-import { nextTick } from 'vue';
-import { GlButton, GlIcon, GlTooltipDirective, GlFormTextarea, GlForm } from '@gitlab/ui';
+import { GlButton, GlIcon, GlTooltipDirective } 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,
   },
-  data() {
-    return {
-      feedbackType: null,
-      feedbackView: FEEDBACK_VIEW.CLOSED,
-      customFeedback: '',
-      feedbackSubmitted: false,
-    };
+  props: {
+    feedbackChoice: {
+      type: String,
+      required: false,
+      default: null,
+      validator: (value) => value === null || ['thumbs_up', 'thumbs_down'].includes(value),
+    },
+    submitted: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     isThumbsUp() {
-      return this.feedbackType === 'thumbs_up';
+      return this.feedbackChoice === '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;
+      return this.feedbackChoice === 'thumbs_down';
     },
-    trimmedFeedback() {
-      return this.customFeedback.trim();
+    showButtons() {
+      return !this.feedbackChoice && !this.submitted;
     },
-    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;
+    showSelectedIcon() {
+      return this.feedbackChoice && !this.submitted;
     },
   },
   methods: {
     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;
+      this.$emit('select-type', type);
     },
   },
 };
 </script>
 
 <template>
-  <div
-    class="agentic-binary-feedback gl-flex gl-items-center gl-gap-2"
-    :class="{ 'gl-relative': !isDropdownOpen }"
-  >
-    <template v-if="!feedbackSubmitted && !isDropdownOpen">
+  <div class="agentic-binary-feedback gl-flex gl-items-center gl-gap-2">
+    <template v-if="showButtons">
       <gl-button
         v-gl-tooltip
         :title="$options.i18n.THUMBS_UP"
@@ -190,106 +78,20 @@ export default {
       />
     </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-if="showSelectedIcon" 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 v-else class="gl-relative gl-flex gl-items-center gl-gap-2" data-testid="feedback-given">
+    <div
+      v-else-if="submitted"
+      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
           v-if="isThumbsUp"

package/src/components/agentic_chat/components/agentic_feedback_panel/agentic_feedback_panel.vue

@@ -0,0 +1,228 @@
+<script>
+import { GlButton, GlFormTextarea, GlForm } from '@gitlab/ui';
+import { translate } from '@gitlab/ui/dist/utils/i18n';
+
+export const i18n = {
+  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 PANEL_VIEW = {
+  REASON_LIST: 'reason_list',
+  TELL_US_MORE: 'tell_us_more',
+};
+
+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 },
+];
+
+const CHARACTER_LIMIT = 140;
+
+export default {
+  name: 'AgenticFeedbackPanel',
+  i18n,
+  thumbsUpReasons,
+  thumbsDownReasons,
+  components: {
+    GlButton,
+    GlFormTextarea,
+    GlForm,
+  },
+  props: {
+    feedbackType: {
+      type: String,
+      required: true,
+      validator: (value) => ['thumbs_up', 'thumbs_down'].includes(value),
+    },
+  },
+  data() {
+    return {
+      panelView: PANEL_VIEW.REASON_LIST,
+      customFeedback: '',
+    };
+  },
+  computed: {
+    isThumbsUp() {
+      return this.feedbackType === 'thumbs_up';
+    },
+    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 > CHARACTER_LIMIT;
+    },
+    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 = CHARACTER_LIMIT - 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`;
+    },
+    isReasonListVisible() {
+      return this.panelView === PANEL_VIEW.REASON_LIST;
+    },
+    isTellUsMoreVisible() {
+      return this.panelView === PANEL_VIEW.TELL_US_MORE;
+    },
+  },
+  methods: {
+    selectReason(reason) {
+      if (reason.isCustom) {
+        this.panelView = PANEL_VIEW.TELL_US_MORE;
+        return;
+      }
+      this.$emit('submit', {
+        feedbackType: this.feedbackType,
+        feedbackReason: reason.key,
+      });
+    },
+    submitCustomFeedback() {
+      this.$emit('submit', {
+        feedbackType: this.feedbackType,
+        feedbackReason: `custom_${this.customFeedback.trim()}`,
+      });
+    },
+    goBackToReasons() {
+      this.panelView = PANEL_VIEW.REASON_LIST;
+      this.customFeedback = '';
+    },
+    close() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="agentic-feedback-panel gl-border gl-mt-2 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="close"
+        />
+      </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>

package/src/components/agentic_chat/web_agentic_duo_chat.vue

@@ -1,5 +1,5 @@
 <script>
-import throttle from 'lodash/throttle';
+import { throttle } from 'lodash-es';
 
 import {
   GlButton,

package/src/components/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.vue

@@ -1,5 +1,5 @@
 <script>
-import debounce from 'lodash/debounce';
+import { debounce } from 'lodash-es';
 import { GlButton, GlCard } from '@gitlab/ui';
 import { translate } from '../../../../../utils/i18n';
 import DuoChatContextItemSelections from '../duo_chat_context_item_selections/duo_chat_context_item_selections.vue';

package/src/components/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.vue

@@ -1,5 +1,5 @@
 <script>
-import uniqueId from 'lodash/uniqueId';
+import { uniqueId } from 'lodash-es';
 import { GlIcon, GlToken, GlTruncate } from '@gitlab/ui';
 
 import DuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover.vue';