@gitlab/duo-ui 8.22.0 → 8.23.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [8.23.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.22.1...v8.23.0) (2025-06-26)
+
+
+### Features
+
+* add message feedback to agentic messages ([04ca354](https://gitlab.com/gitlab-org/duo-ui/commit/04ca354f2a7e1e54074222f2672dd3967737452e))
+
+## [8.22.1](https://gitlab.com/gitlab-org/duo-ui/compare/v8.22.0...v8.22.1) (2025-06-20)
+
+
+### Bug Fixes
+
+* **chat:** Fix chat history group dates ([548c507](https://gitlab.com/gitlab-org/duo-ui/commit/548c5078090d0a648824727a59a0fe6f727d31f2))
+
 # [8.22.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.21.0...v8.22.0) (2025-06-18)
 
 

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

@@ -2,10 +2,10 @@ import { GlFormGroup, GlFormTextarea, GlIcon, GlAnimatedLoaderIcon, GlButton, Gl
 import { translate, translatePlural, sprintf } from '@gitlab/ui/dist/utils/i18n';
 import throttle from 'lodash/throttle';
 import DuoChatContextItemSelections from '../duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections';
-import GlDuoUserFeedback from '../../../user_feedback/user_feedback';
 import { SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED, MESSAGE_MODEL_ROLES } from '../../constants';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources';
 import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
+import MessageFeedback from './message_feedback';
 import { CopyCodeElement } from './copy_code_element';
 import { InsertCodeSnippetElement } from './insert_code_snippet_element';
 import { concatUntilEmpty, checkClipboardPermissions } from './utils';
@@ -19,18 +19,10 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 const COMPONENT_FOR_MESSAGE_TYPE = {
   tool: () => ToolMessage,
   request: () => InputRequestedMessage,
-  workflow_end: () => WorkflowEndMessage
+  workflow_end: () => WorkflowEndMessage,
+  agent: () => AgentMessage
 };
 const i18n = {
-  MODAL: {
-    TITLE: translate('DuoChatMessage.modalTitle', 'Give feedback on GitLab Duo Chat'),
-    ALERT_TEXT: translate('DuoChatMessage.modalAlertText', 'GitLab team members cannot view your conversation. Please be as descriptive as possible.'),
-    DID_WHAT: translate('DuoChatMessage.modalDidWhat', 'What were you doing?'),
-    INTERACTION: translate('DuoChatMessage.modalInteraction', 'The situation in which you interacted with GitLab Duo Chat.'),
-    IMPROVE_WHAT: translate('DuoChatMessage.modalImproveWhat', 'How could the response be improved?'),
-    BETTER_RESPONSE: translate('DuoChatMessage.modalBetterResponse', 'How the response might better meet your needs.'),
-    MESSAGE_ERROR: translate('DuoChatMessage.modalMessageError', 'Error sending the message')
-  },
   CHAT_MESSAGE_COPIED: translate('DuoChatMessage.chatMessageCopied', 'Copied'),
   CHAT_MESSAGE_COPY: translate('DuoChatMessage.chatMessageCopyToClipboard', 'Copy to clipboard'),
   FROM_ME: translate('DuoChatMessage.fromMe', 'Me:'),
@@ -45,7 +37,7 @@ var script = {
   components: {
     DocumentationSources,
     DuoChatContextItemSelections,
-    GlDuoUserFeedback,
+    MessageFeedback,
     GlFormGroup,
     GlFormTextarea,
     GlIcon,
@@ -56,12 +48,6 @@ var script = {
     SafeHtml: GlSafeHtmlDirective,
     GlTooltip: GlTooltipDirective
   },
-  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
@@ -109,8 +95,6 @@ var script = {
   },
   data() {
     return {
-      didWhat: '',
-      improveWhat: '',
       messageWatcher: null,
       // imperatively set up watcher on message
       messageChunks: [],
@@ -141,7 +125,7 @@ var script = {
     },
     hasFeedback() {
       var _this$message$extras2;
-      return (_this$message$extras2 = this.message.extras) === null || _this$message$extras2 === void 0 ? void 0 : _this$message$extras2.hasFeedback;
+      return Boolean((_this$message$extras2 = this.message.extras) === null || _this$message$extras2 === void 0 ? void 0 : _this$message$extras2.hasFeedback);
     },
     defaultContent() {
       if (this.message.contentHtml) {
@@ -246,8 +230,6 @@ var script = {
     logEvent(e) {
       this.$emit('track-feedback', {
         ...e,
-        didWhat: this.didWhat,
-        improveWhat: this.improveWhat,
         message: this.message
       });
     },
@@ -323,7 +305,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
         'gl-bg-subtle': _vm.isAssistantMessage && !_vm.error,
         'duo-chat-message-with-error gl-bg-feedback-danger': _vm.error,
         '!gl-rounded-br-none': _vm.shouldShowCopyAction,
-      },on:{"insert-code-snippet":_vm.onInsertCodeSnippet,"copy-code-snippet":_vm.onCopyCodeSnippet}},[(_vm.showA11yFromText)?_c('div',{staticClass:"gl-sr-only"},[_vm._v("\n        "+_vm._s(_vm.isUserMessage ? _vm.$options.i18n.FROM_ME : _vm.$options.i18n.FROM_DUO)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.error)?_c('gl-icon',{staticClass:"error-icon gl-mr-3 gl-shrink-0 gl-text-danger",attrs:{"aria-label":_vm.$options.i18n.MESSAGE_ERROR,"name":"error","size":16,"data-testid":"error"}}):_vm._e(),_vm._v(" "),_c('div',{ref:"content-wrapper",class:{ 'has-error': _vm.error }},[(_vm.displaySelectedContextItems && _vm.isAssistantMessage)?_c('duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"assistant"},on:{"get-content":_vm.onGetContextItemContent}}):_vm._e(),_vm._v(" "),(_vm.error)?_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.renderedError),expression:"renderedError",arg:_vm.$options.safeHtmlConfigExtension}],ref:"error-message"}):_c('div',[_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:"duo-chat-message-feedback gl-mt-4 gl-flex gl-items-end"},[(_vm.isChunkAndNotCancelled)?_c('gl-animated-loader-icon',{attrs:{"is-on":true}}):_vm._e(),_vm._v(" "),(_vm.shouldShowFeedbackLink)?_c('gl-duo-user-feedback',{attrs:{"feedback-received":_vm.hasFeedback,"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)}):_vm._e()],1)]:_vm._e()],2),_vm._v(" "),(_vm.displaySelectedContextItems && _vm.isUserMessage)?_c('duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"user"},on:{"get-content":_vm.onGetContextItemContent}}):_vm._e()],1)],1),_vm._v(" "),_c('transition',{attrs:{"name":"duo-chat-message-actions"}},[(_vm.shouldShowCopyAction)?_c('div',{staticClass:"gl-bg-subtle duo-chat-message-actions gl-rounded-tr-lg gl-rounded-br-lg"},[_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",modifiers:{"hover":true}}],class:{ '!gl-text-success': _vm.copied },attrs:{"title":_vm.copied ? _vm.$options.i18n.CHAT_MESSAGE_COPIED : _vm.$options.i18n.CHAT_MESSAGE_COPY,"icon":_vm.copied ? 'check-circle-filled' : 'copy-to-clipboard',"category":"tertiary"},on:{"click":_vm.copyMessage}})],1):_vm._e()])]:_c(_vm.componentForMessageType(_vm.message),{tag:"component",attrs:{"message":_vm.message,"data-testid":"workflow-message"},on:{"open-file-path":_vm.onOpenFilePath}})],2)};
+      },on:{"insert-code-snippet":_vm.onInsertCodeSnippet,"copy-code-snippet":_vm.onCopyCodeSnippet}},[(_vm.showA11yFromText)?_c('div',{staticClass:"gl-sr-only"},[_vm._v("\n        "+_vm._s(_vm.isUserMessage ? _vm.$options.i18n.FROM_ME : _vm.$options.i18n.FROM_DUO)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.error)?_c('gl-icon',{staticClass:"error-icon gl-mr-3 gl-shrink-0 gl-text-danger",attrs:{"aria-label":_vm.$options.i18n.MESSAGE_ERROR,"name":"error","size":16,"data-testid":"error"}}):_vm._e(),_vm._v(" "),_c('div',{ref:"content-wrapper",class:{ 'has-error': _vm.error }},[(_vm.displaySelectedContextItems && _vm.isAssistantMessage)?_c('duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"assistant"},on:{"get-content":_vm.onGetContextItemContent}}):_vm._e(),_vm._v(" "),(_vm.error)?_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.renderedError),expression:"renderedError",arg:_vm.$options.safeHtmlConfigExtension}],ref:"error-message"}):_c('div',[_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:"duo-chat-message-feedback gl-mt-4 gl-flex gl-items-end"},[(_vm.isChunkAndNotCancelled)?_c('gl-animated-loader-icon',{attrs:{"is-on":true}}):_vm._e(),_vm._v(" "),(_vm.shouldShowFeedbackLink)?_c('message-feedback',{attrs:{"has-feedback":_vm.hasFeedback},on:{"feedback":_vm.logEvent}}):_vm._e()],1)]:_vm._e()],2),_vm._v(" "),(_vm.displaySelectedContextItems && _vm.isUserMessage)?_c('duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"user"},on:{"get-content":_vm.onGetContextItemContent}}):_vm._e()],1)],1),_vm._v(" "),_c('transition',{attrs:{"name":"duo-chat-message-actions"}},[(_vm.shouldShowCopyAction)?_c('div',{staticClass:"gl-bg-subtle duo-chat-message-actions gl-rounded-tr-lg gl-rounded-br-lg"},[_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",modifiers:{"hover":true}}],class:{ '!gl-text-success': _vm.copied },attrs:{"title":_vm.copied ? _vm.$options.i18n.CHAT_MESSAGE_COPIED : _vm.$options.i18n.CHAT_MESSAGE_COPY,"icon":_vm.copied ? 'check-circle-filled' : 'copy-to-clipboard',"category":"tertiary"},on:{"click":_vm.copyMessage}})],1):_vm._e()])]:_c(_vm.componentForMessageType(_vm.message),{tag:"component",attrs:{"message":_vm.message,"with-feedback":_vm.withFeedback,"data-testid":"workflow-message"},on:{"open-file-path":_vm.onOpenFilePath,"feedback":_vm.logEvent}})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/chat/components/duo_chat_message/message_feedback.js

@@ -0,0 +1,90 @@
+import { GlFormGroup, GlFormTextarea } from '@gitlab/ui';
+import { translate } from '@gitlab/ui/dist/utils/i18n';
+import GlDuoUserFeedback from '../../../user_feedback/user_feedback';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const i18n = {
+  TITLE: translate('DuoChatMessage.modalTitle', 'Give feedback on GitLab Duo Chat'),
+  ALERT_TEXT: translate('DuoChatMessage.modalAlertText', 'GitLab team members cannot view your conversation. Please be as descriptive as possible.'),
+  DID_WHAT: translate('DuoChatMessage.modalDidWhat', 'What were you doing?'),
+  INTERACTION: translate('DuoChatMessage.modalInteraction', 'The situation in which you interacted with GitLab Duo Chat.'),
+  IMPROVE_WHAT: translate('DuoChatMessage.modalImproveWhat', 'How could the response be improved?'),
+  BETTER_RESPONSE: translate('DuoChatMessage.modalBetterResponse', 'How the response might better meet your needs.'),
+  MESSAGE_ERROR: translate('DuoChatMessage.modalMessageError', 'Error sending the message')
+};
+var script = {
+  i18n,
+  name: 'MessageFeedback',
+  components: {
+    GlDuoUserFeedback,
+    GlFormGroup,
+    GlFormTextarea
+  },
+  provide() {
+    return {
+      modalTitle: i18n.TITLE,
+      modalAlertText: i18n.ALERT_TEXT
+    };
+  },
+  props: {
+    hasFeedback: {
+      required: false,
+      default: false,
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      didWhat: '',
+      improveWhat: ''
+    };
+  },
+  methods: {
+    logEvent(e) {
+      this.$emit('feedback', {
+        ...e,
+        didWhat: this.didWhat,
+        improveWhat: this.improveWhat
+      });
+    }
+  }
+};
+
+/* 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-duo-user-feedback',{attrs:{"feedback-received":_vm.hasFeedback,"modal-title":_vm.$options.i18n.TITLE,"modal-alert":_vm.$options.i18n.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.DID_WHAT,"optional":"","data-testid":"did-what-form-group"}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.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.IMPROVE_WHAT,"optional":"","data-testid":"improve-what-form-group"}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.BETTER_RESPONSE},model:{value:(_vm.improveWhat),callback:function ($$v) {_vm.improveWhat=$$v;},expression:"improveWhat"}})],1)]},proxy:true}])})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
+export { i18n };

package/dist/components/chat/components/duo_chat_message/message_types/message_agent.js

@@ -1,15 +1,22 @@
+import MessageFeedback from '../message_feedback';
 import BaseMessage from './message_base';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   name: 'DuoAgentMessage',
   components: {
-    BaseMessage
+    BaseMessage,
+    MessageFeedback
   },
   props: {
     message: {
       required: true,
       type: Object
+    },
+    withFeedback: {
+      required: false,
+      default: false,
+      type: Boolean
     }
   },
   computed: {
@@ -26,7 +33,7 @@ const __vue_script__ = script;
 /* template */
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('base-message',{staticClass:"gl-rounded-bl-none gl-border-1 gl-border-solid gl-text-gray-900 gl-p-4 gl-border-gray-50",class:{
     'gl-border-red-100': _vm.hasError,
-  },attrs:{"message":_vm.message},scopedSlots:_vm._u([{key:"message",fn:function(slotProps){return [_vm._t("message",null,null,slotProps)]}}],null,true)})};
+  },attrs:{"message":_vm.message},scopedSlots:_vm._u([{key:"message",fn:function(slotProps){return [_vm._t("message",function(){return [_vm._v(_vm._s(slotProps.content))]},null,slotProps),_vm._v(" "),(_vm.withFeedback)?_c('message-feedback',{on:{"feedback":function($event){return _vm.$emit('feedback', $event)}}}):_vm._e()]}}],null,true)})};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/chat/components/duo_chat_threads/duo_chat_threads.js

@@ -26,9 +26,6 @@ var script = {
     }
   },
   computed: {
-    formattedLocalDate() {
-      return date => formatLocalizedDate(date, this.preferredLocale);
-    },
     groupedThreads() {
       if (!this.hasThreads) {
         return {};
@@ -46,6 +43,9 @@ var script = {
     }
   },
   methods: {
+    formattedLocalDate(date) {
+      return formatLocalizedDate(date, this.preferredLocale);
+    },
     onNewChat() {
       this.$emit('new-chat');
     },
@@ -63,7 +63,8 @@ var script = {
       return new Date(dateA) - new Date(dateB);
     },
     getDateKey(date) {
-      return new Date(date).toISOString().split('T')[0];
+      // add 00:00:00 to the date string to make it at midnight local time
+      return `${new Date(date).toISOString().split('T')[0]}T00:00:00`;
     },
     sprintf
   },

package/dist/components/chat/constants.js

@@ -18,6 +18,7 @@ const MESSAGE_MODEL_ROLES = {
   user: 'user',
   system: 'system',
   assistant: 'assistant',
+  agent: 'agent',
   tool: 'tool',
   request: 'request',
   workflow_end: 'workflow_end'

package/dist/components/chat/mock_data.js

@@ -74,6 +74,11 @@ const MOCK_TOOL_MESSAGE = {
     name: 'list_files'
   }
 };
+const MOCK_AGENT_MESSAGE = {
+  id: '123',
+  content: "Search for 'duo.*chat.*message' in directory",
+  message_type: MESSAGE_MODEL_ROLES.agent
+};
 const MOCK_TOOL_MESSAGE_WITH_LINK = {
   id: '123',
   content: "Search for 'duo.*chat.*message' in directory",
@@ -295,4 +300,4 @@ const THREADLIST = [{
   title: 'Before the Configuration Committee'
 }];
 
-export { INCLUDE_SLASH_COMMAND, MOCK_REQUEST_MESSAGE, MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_TOOL_MESSAGE, MOCK_TOOL_MESSAGE_WITH_LINK, MOCK_USER_PROMPT_MESSAGE, MOCK_WORKFLOW_END_MESSAGE, SLASH_COMMANDS, THREADLIST, generateMockResponseChunks, generateSeparateChunks, renderGFM, renderMarkdown };
+export { INCLUDE_SLASH_COMMAND, MOCK_AGENT_MESSAGE, MOCK_REQUEST_MESSAGE, MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_TOOL_MESSAGE, MOCK_TOOL_MESSAGE_WITH_LINK, MOCK_USER_PROMPT_MESSAGE, MOCK_WORKFLOW_END_MESSAGE, SLASH_COMMANDS, THREADLIST, generateMockResponseChunks, generateSeparateChunks, renderGFM, renderMarkdown };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/duo-ui",
-  "version": "8.22.0",
+  "version": "8.23.0",
   "description": "Duo UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -97,10 +97,10 @@
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@gitlab/eslint-plugin": "21.0.0",
+    "@gitlab/eslint-plugin": "21.1.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.2.2",
-    "@gitlab/svgs": "^3.135.0",
+    "@gitlab/svgs": "^3.136.0",
     "@gitlab/ui": "latest",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
@@ -155,8 +155,8 @@
     "module-alias": "^2.2.2",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
-    "playwright": "^1.53.0",
-    "playwright-core": "^1.53.0",
+    "playwright": "^1.53.1",
+    "playwright-core": "^1.53.1",
     "plop": "^2.5.4",
     "postcss": "8.4.28",
     "postcss-loader": "^7.0.2",

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

@@ -12,12 +12,12 @@ import {
 import { sprintf, translate, translatePlural } from '@gitlab/ui/dist/utils/i18n';
 import throttle from 'lodash/throttle';
 import DuoChatContextItemSelections from '../duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.vue';
-import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
 import { MESSAGE_MODEL_ROLES, SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED } from '../../constants';
 
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources.vue';
 // eslint-disable-next-line no-restricted-imports
 import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
+import MessageFeedback from './message_feedback.vue';
 import { CopyCodeElement } from './copy_code_element';
 import { InsertCodeSnippetElement } from './insert_code_snippet_element';
 import { checkClipboardPermissions, concatUntilEmpty } from './utils';
@@ -35,30 +35,10 @@ const COMPONENT_FOR_MESSAGE_TYPE = {
   tool: () => ToolMessage,
   request: () => InputRequestedMessage,
   workflow_end: () => WorkflowEndMessage,
+  agent: () => AgentMessage,
 };
 
 export const i18n = {
-  MODAL: {
-    TITLE: translate('DuoChatMessage.modalTitle', 'Give feedback on GitLab Duo Chat'),
-    ALERT_TEXT: translate(
-      'DuoChatMessage.modalAlertText',
-      'GitLab team members cannot view your conversation. Please be as descriptive as possible.'
-    ),
-    DID_WHAT: translate('DuoChatMessage.modalDidWhat', 'What were you doing?'),
-    INTERACTION: translate(
-      'DuoChatMessage.modalInteraction',
-      'The situation in which you interacted with GitLab Duo Chat.'
-    ),
-    IMPROVE_WHAT: translate(
-      'DuoChatMessage.modalImproveWhat',
-      'How could the response be improved?'
-    ),
-    BETTER_RESPONSE: translate(
-      'DuoChatMessage.modalBetterResponse',
-      'How the response might better meet your needs.'
-    ),
-    MESSAGE_ERROR: translate('DuoChatMessage.modalMessageError', 'Error sending the message'),
-  },
   CHAT_MESSAGE_COPIED: translate('DuoChatMessage.chatMessageCopied', 'Copied'),
   CHAT_MESSAGE_COPY: translate('DuoChatMessage.chatMessageCopyToClipboard', 'Copy to clipboard'),
   FROM_ME: translate('DuoChatMessage.fromMe', 'Me:'),
@@ -74,7 +54,7 @@ export default {
   components: {
     DocumentationSources,
     DuoChatContextItemSelections,
-    GlDuoUserFeedback,
+    MessageFeedback,
     GlFormGroup,
     GlFormTextarea,
     GlIcon,
@@ -85,12 +65,6 @@ export default {
     SafeHtml,
     GlTooltip: GlTooltipDirective,
   },
-  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
@@ -138,8 +112,6 @@ export default {
   },
   data() {
     return {
-      didWhat: '',
-      improveWhat: '',
       messageWatcher: null, // imperatively set up watcher on message
       messageChunks: [],
       selectedContextItemsDefaultCollapsed: SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED,
@@ -167,7 +139,7 @@ export default {
       return this.message.extras?.sources;
     },
     hasFeedback() {
-      return this.message.extras?.hasFeedback;
+      return Boolean(this.message.extras?.hasFeedback);
     },
     defaultContent() {
       if (this.message.contentHtml) {
@@ -290,8 +262,6 @@ export default {
     logEvent(e) {
       this.$emit('track-feedback', {
         ...e,
-        didWhat: this.didWhat,
-        improveWhat: this.improveWhat,
         message: this.message,
       });
     },
@@ -418,28 +388,11 @@ export default {
 
               <div class="duo-chat-message-feedback gl-mt-4 gl-flex gl-items-end">
                 <gl-animated-loader-icon v-if="isChunkAndNotCancelled" :is-on="true" />
-                <gl-duo-user-feedback
+                <message-feedback
                   v-if="shouldShowFeedbackLink"
-                  :feedback-received="hasFeedback"
-                  :modal-title="$options.i18n.MODAL.TITLE"
-                  :modal-alert="$options.i18n.MODAL.ALERT_TEXT"
+                  :has-feedback="hasFeedback"
                   @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>
@@ -473,8 +426,10 @@ export default {
       :is="componentForMessageType(message)"
       v-else
       :message="message"
+      :with-feedback="withFeedback"
       data-testid="workflow-message"
       @open-file-path="onOpenFilePath"
+      @feedback="logEvent"
     />
   </div>
 </template>

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

@@ -0,0 +1,83 @@
+<script>
+import { GlFormGroup, GlFormTextarea } from '@gitlab/ui';
+import { translate } from '@gitlab/ui/dist/utils/i18n';
+import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
+
+export const i18n = {
+  TITLE: translate('DuoChatMessage.modalTitle', 'Give feedback on GitLab Duo Chat'),
+  ALERT_TEXT: translate(
+    'DuoChatMessage.modalAlertText',
+    'GitLab team members cannot view your conversation. Please be as descriptive as possible.'
+  ),
+  DID_WHAT: translate('DuoChatMessage.modalDidWhat', 'What were you doing?'),
+  INTERACTION: translate(
+    'DuoChatMessage.modalInteraction',
+    'The situation in which you interacted with GitLab Duo Chat.'
+  ),
+  IMPROVE_WHAT: translate('DuoChatMessage.modalImproveWhat', 'How could the response be improved?'),
+  BETTER_RESPONSE: translate(
+    'DuoChatMessage.modalBetterResponse',
+    'How the response might better meet your needs.'
+  ),
+  MESSAGE_ERROR: translate('DuoChatMessage.modalMessageError', 'Error sending the message'),
+};
+
+export default {
+  i18n,
+  name: 'MessageFeedback',
+  components: {
+    GlDuoUserFeedback,
+    GlFormGroup,
+    GlFormTextarea,
+  },
+  provide() {
+    return {
+      modalTitle: i18n.TITLE,
+      modalAlertText: i18n.ALERT_TEXT,
+    };
+  },
+  props: {
+    hasFeedback: {
+      required: false,
+      default: false,
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      didWhat: '',
+      improveWhat: '',
+    };
+  },
+  methods: {
+    logEvent(e) {
+      this.$emit('feedback', {
+        ...e,
+        didWhat: this.didWhat,
+        improveWhat: this.improveWhat,
+      });
+    },
+  },
+};
+</script>
+<template>
+  <gl-duo-user-feedback
+    :feedback-received="hasFeedback"
+    :modal-title="$options.i18n.TITLE"
+    :modal-alert="$options.i18n.ALERT_TEXT"
+    @feedback="logEvent"
+  >
+    <template #feedback-extra-fields>
+      <gl-form-group :label="$options.i18n.DID_WHAT" optional data-testid="did-what-form-group">
+        <gl-form-textarea v-model="didWhat" :placeholder="$options.i18n.INTERACTION" />
+      </gl-form-group>
+      <gl-form-group
+        :label="$options.i18n.IMPROVE_WHAT"
+        optional
+        data-testid="improve-what-form-group"
+      >
+        <gl-form-textarea v-model="improveWhat" :placeholder="$options.i18n.BETTER_RESPONSE" />
+      </gl-form-group>
+    </template>
+  </gl-duo-user-feedback>
+</template>

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

@@ -1,16 +1,23 @@
 <script>
+import MessageFeedback from '../message_feedback.vue';
 import BaseMessage from './message_base.vue';
 
 export default {
   name: 'DuoAgentMessage',
   components: {
     BaseMessage,
+    MessageFeedback,
   },
   props: {
     message: {
       required: true,
       type: Object,
     },
+    withFeedback: {
+      required: false,
+      default: false,
+      type: Boolean,
+    },
   },
   computed: {
     hasError() {
@@ -28,7 +35,9 @@ export default {
     }"
   >
     <template #message="slotProps">
-      <slot name="message" v-bind="slotProps"> </slot>
+      <slot name="message" v-bind="slotProps">{{ slotProps.content }}</slot>
+
+      <message-feedback v-if="withFeedback" @feedback="$emit('feedback', $event)" />
     </template>
   </base-message>
 </template>

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

@@ -33,10 +33,6 @@ export default {
   },
 
   computed: {
-    formattedLocalDate() {
-      return (date) => formatLocalizedDate(date, this.preferredLocale);
-    },
-
     groupedThreads() {
       if (!this.hasThreads) {
         return {};
@@ -53,38 +49,35 @@ export default {
           };
         }, {});
     },
-
     hasThreads() {
       return this.threads.length > 0;
     },
   },
 
   methods: {
+    formattedLocalDate(date) {
+      return formatLocalizedDate(date, this.preferredLocale);
+    },
     onNewChat() {
       this.$emit('new-chat');
     },
-
     onSelectThread(thread) {
       this.$emit('select-thread', thread);
     },
-
     onDeleteThread(threadId, event) {
       event.stopPropagation();
       this.$emit('delete-thread', threadId);
     },
-
     onClose() {
       this.$emit('close');
     },
-
     compareThreadDates(dateA, dateB) {
       return new Date(dateA) - new Date(dateB);
     },
-
     getDateKey(date) {
-      return new Date(date).toISOString().split('T')[0];
+      // add 00:00:00 to the date string to make it at midnight local time
+      return `${new Date(date).toISOString().split('T')[0]}T00:00:00`;
     },
-
     sprintf,
   },
   i18n,

package/src/components/chat/constants.js

@@ -21,6 +21,7 @@ export const MESSAGE_MODEL_ROLES = {
   user: 'user',
   system: 'system',
   assistant: 'assistant',
+  agent: 'agent',
   tool: 'tool',
   request: 'request',
   workflow_end: 'workflow_end',

package/src/components/chat/mock_data.js

@@ -89,6 +89,12 @@ export const MOCK_TOOL_MESSAGE = {
   },
 };
 
+export const MOCK_AGENT_MESSAGE = {
+  id: '123',
+  content: "Search for 'duo.*chat.*message' in directory",
+  message_type: MESSAGE_MODEL_ROLES.agent,
+};
+
 export const MOCK_TOOL_MESSAGE_WITH_LINK = {
   id: '123',
   content: "Search for 'duo.*chat.*message' in directory",