@gitlab/duo-ui 15.10.0 → 15.11.0

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

@@ -8,7 +8,7 @@ import {
 } from '@gitlab/ui';
 
 import { sprintf, translate, translatePlural } from '@gitlab/ui/dist/utils/i18n';
-import throttle from 'lodash/throttle';
+import { throttle } from 'lodash-es';
 import DuoChatContextItemSelections from '../duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.vue';
 import { MESSAGE_MODEL_ROLES, SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED } from '../../constants';
 
@@ -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/duo_chat_message/message_types/message_tool_kv_section.vue

@@ -1,5 +1,5 @@
 <script>
-import isEmpty from 'lodash/isEmpty';
+import { isEmpty } from 'lodash-es';
 import PreBlock from '../../duo_chat_message_tool_approval/components/pre_block.vue';
 
 function makePretty(value, visited = new WeakSet()) {

package/src/components/chat/components/duo_chat_message_tool_approval/message_tool_approval.vue

@@ -8,8 +8,7 @@ import {
   GlDropdown,
   GlDropdownItem,
 } from '@gitlab/ui';
-import startCase from 'lodash/startCase';
-import capitalize from 'lodash/capitalize';
+import { startCase, capitalize } from 'lodash-es';
 import { translate } from '../../../../utils/i18n';
 import { convertKeysToCamelCase } from '../../../../utils/object';
 import { acceptedApproveToolPayloads, APPROVAL_TOOL_NAMES } from '../../constants';

package/src/components/chat/components/duo_chat_threads/duo_chat_threads.vue

@@ -1,6 +1,6 @@
 <script>
 import { GlButton, GlAvatar, GlSearchBoxByType } from '@gitlab/ui';
-import debounce from 'lodash/debounce';
+import { debounce } from 'lodash-es';
 import { sprintf, translate } from '../../../../utils/i18n';
 import { formatLocalizedDate } from '../../../../utils/date';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '../../constants';

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>

package/src/components/chat/duo_chat.vue

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

package/src/components/chat/web_duo_chat.vue

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

package/src/utils/i18n.js

@@ -1,4 +1,4 @@
-import escape from 'lodash/escape';
+import { escape } from 'lodash-es';
 import { i18n } from '../config';
 
 const defaultPluralHandler = (n, singleValue, pluralValue) => {

package/src/utils/object.js

@@ -1,4 +1,3 @@
-import mapKeys from 'lodash/mapKeys';
-import camelCase from 'lodash/camelCase';
+import { mapKeys, camelCase } from 'lodash-es';
 
 export const convertKeysToCamelCase = (obj = {}) => mapKeys(obj, (value, key) => camelCase(key));