@gitlab/duo-ui 15.10.0 → 15.10.1

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/chat/components/duo_chat_message/duo_chat_message.vue

@@ -16,6 +16,8 @@ import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_s
 // eslint-disable-next-line no-restricted-imports
 import { copyToClipboard, concatUntilEmpty } from '../utils';
 import AgenticBinaryFeedback from '../../../agentic_chat/components/agentic_binary_feedback/agentic_binary_feedback.vue';
+import AgenticFeedbackPanel from '../../../agentic_chat/components/agentic_feedback_panel/agentic_feedback_panel.vue';
+import MessageActionBar from '../message_action_bar/message_action_bar.vue';
 import MessageFeedback from './message_feedback.vue';
 import MarkdownRenderer from './markdown_renderer.vue';
 import { CopyCodeElement } from './copy_code_element';
@@ -43,8 +45,10 @@ export default {
   },
   components: {
     AgenticBinaryFeedback,
+    AgenticFeedbackPanel,
     DocumentationSources,
     DuoChatContextItemSelections,
+    MessageActionBar,
     MessageFeedback,
     MessageMap,
     GlIcon,
@@ -130,6 +134,8 @@ export default {
       messageChunks: [],
       selectedContextItemsDefaultCollapsed: SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED,
       copied: false,
+      feedbackChoice: null,
+      feedbackSubmitted: false,
     };
   },
   computed: {
@@ -322,6 +328,16 @@ export default {
         e.classList.remove(DUO_CODE_SCRIM_TOP_CLASS);
       }
     },
+    onFeedbackTypeSelected(type) {
+      this.feedbackChoice = type;
+    },
+    onFeedbackPanelSubmit(payload) {
+      this.feedbackSubmitted = true;
+      this.logEvent(payload);
+    },
+    onFeedbackPanelClose() {
+      this.feedbackChoice = null;
+    },
     async copyMessage() {
       try {
         await copyToClipboard(this.message.content, this.$el);
@@ -403,42 +419,57 @@ export default {
 
       <documentation-sources v-if="sources" :sources="sources" />
 
-      <div
-        v-if="isAssistantMessage"
-        class="duo-chat-message-actions -gl-ml-2 gl-flex gl-items-start gl-gap-3"
-      >
-        <gl-animated-loader-icon v-if="isChunkAndNotCancelled" :is-on="true" />
-        <template v-if="shouldShowFeedbackLink && isBinaryFeedbackEnabled">
-          <agentic-binary-feedback
-            v-if="showBinaryFeedback"
-            data-testid="agentic-feedback-latest"
+      <template v-if="isAssistantMessage">
+        <message-action-bar>
+          <gl-animated-loader-icon v-if="isChunkAndNotCancelled" :is-on="true" />
+          <template v-if="shouldShowFeedbackLink && isBinaryFeedbackEnabled">
+            <agentic-binary-feedback
+              v-if="showBinaryFeedback"
+              :feedback-choice="feedbackChoice"
+              :submitted="feedbackSubmitted"
+              data-testid="agentic-feedback-latest"
+              @select-type="onFeedbackTypeSelected"
+            />
+            <div
+              v-else
+              class="agentic-feedback-hover-wrapper"
+              :class="{
+                '-gl-mr-3 gl-w-0 gl-overflow-hidden gl-opacity-0':
+                  !feedbackChoice && !feedbackSubmitted,
+              }"
+              data-testid="agentic-feedback-hover-container"
+            >
+              <agentic-binary-feedback
+                :feedback-choice="feedbackChoice"
+                :submitted="feedbackSubmitted"
+                @select-type="onFeedbackTypeSelected"
+              />
+            </div>
+          </template>
+          <message-feedback
+            v-else-if="shouldShowFeedbackLink"
+            :has-feedback="hasFeedback"
             @feedback="logEvent"
           />
-          <div
-            v-else
-            class="agentic-feedback-hover-wrapper -gl-mr-3 gl-w-0 gl-overflow-hidden gl-opacity-0"
-            data-testid="agentic-feedback-hover-container"
-          >
-            <agentic-binary-feedback @feedback="logEvent" />
-          </div>
-        </template>
-        <message-feedback
-          v-else-if="shouldShowFeedbackLink"
-          :has-feedback="hasFeedback"
-          @feedback="logEvent"
-        />
-        <gl-button
-          v-if="shouldShowCopyAction"
-          v-gl-tooltip
-          :title="copied ? $options.i18n.CHAT_MESSAGE_COPIED : $options.i18n.CHAT_MESSAGE_COPY"
-          :icon="copied ? 'check-circle-filled' : 'copy-to-clipboard'"
-          :class="{ '!gl-text-success': copied, '!gl-text-subtle': !copied }"
-          category="tertiary"
-          size="small"
-          @click="copyMessage"
-          @focusout="copied = false"
+          <gl-button
+            v-if="shouldShowCopyAction"
+            v-gl-tooltip
+            :title="copied ? $options.i18n.CHAT_MESSAGE_COPIED : $options.i18n.CHAT_MESSAGE_COPY"
+            :icon="copied ? 'check-circle-filled' : 'copy-to-clipboard'"
+            :class="{ '!gl-text-success': copied, '!gl-text-subtle': !copied }"
+            category="tertiary"
+            size="small"
+            @click="copyMessage"
+            @focusout="copied = false"
+          />
+        </message-action-bar>
+        <agentic-feedback-panel
+          v-if="feedbackChoice && !feedbackSubmitted"
+          :feedback-type="feedbackChoice"
+          @submit="onFeedbackPanelSubmit"
+          @close="onFeedbackPanelClose"
         />
-      </div>
+      </template>
 
       <duo-chat-context-item-selections
         v-if="displaySelectedContextItems && isUserMessage"

package/src/components/chat/components/message_action_bar/message_action_bar.vue

@@ -0,0 +1,11 @@
+<script>
+export default {
+  name: 'MessageActionBar',
+};
+</script>
+
+<template>
+  <div class="message-action-bar -gl-ml-2 gl-flex gl-items-start gl-gap-3">
+    <slot></slot>
+  </div>
+</template>