@gitlab/duo-ui 10.11.0 → 10.12.1

package/dist/components/ui/duo_navigation_bar/duo_navigation_bar.js

@@ -40,7 +40,7 @@ var 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('div',{staticClass:"gl-flex gl-gap-1 gl-justify-end"},[_vm._l((_vm.navigationItems),function(item){return _c('gl-link',{key:item.routeName,staticClass:"navigation-link nav-bar-link gl-p-2",attrs:{"to":item.to},on:{"click":function($event){return _vm.$emit('navigation-item-selected', item)}}},[_c('gl-icon',{attrs:{"name":item.iconName}})],1)}),_vm._v(" "),_vm._t("custom-content"),_vm._v(" "),(_vm.showDropdown)?_c('gl-dropdown',{attrs:{"text":"More actions","text-sr-only":"","category":"tertiary","variant":"default","size":"medium","icon":"ellipsis_h","block":false,"no-caret":""}},_vm._l((_vm.dropdownItems),function(item){return _c('gl-dropdown-item',{key:item.id,on:{"click":function($event){return _vm.$emit('dropdown-item-selected', item)}}},[_vm._v("\n      "+_vm._s(item.text)+"\n    ")])}),1):_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-flex gl-justify-end gl-gap-1"},[_vm._l((_vm.navigationItems),function(item){return _c('gl-link',{key:item.routeName,staticClass:"navigation-link nav-bar-link gl-p-2",attrs:{"to":item.to},on:{"click":function($event){return _vm.$emit('navigation-item-selected', item)}}},[_c('gl-icon',{attrs:{"name":item.iconName}})],1)}),_vm._v(" "),_vm._t("custom-content"),_vm._v(" "),(_vm.showDropdown)?_c('gl-dropdown',{attrs:{"text":"More actions","text-sr-only":"","category":"tertiary","variant":"default","size":"medium","icon":"ellipsis_h","block":false,"no-caret":""}},_vm._l((_vm.dropdownItems),function(item){return _c('gl-dropdown-item',{key:item.id,on:{"click":function($event){return _vm.$emit('dropdown-item-selected', item)}}},[_vm._v("\n      "+_vm._s(item.text)+"\n    ")])}),1):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/ui/duo_recent_collapsible/duo_recent_collapsible.js

@@ -82,7 +82,7 @@ var 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-accordion',{attrs:{"auto-collapse":false,"header-level":3}},[(_vm.showViewAllButton)?_c('gl-link',{staticClass:"gl-flex gl-items-center gl-text-sm gl-absolute gl-right-3 gl-mt-2",attrs:{"data-testid":"view-all-toggle"},on:{"click":function($event){return _vm.$emit('view-all-clicked')}}},[_c('span',[_vm._v(_vm._s(_vm.viewAllText))])]):_vm._e(),_vm._v(" "),_c('gl-accordion-item',{class:_vm.wrapperClasses,attrs:{"title":_vm.accordionTitle,"header-class":'gl-flex gl-mb-n3'},model:{value:(_vm.expanded),callback:function ($$v) {_vm.expanded=$$v;},expression:"expanded"}},[_vm._t("default")],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-accordion',{attrs:{"auto-collapse":false,"header-level":3}},[(_vm.showViewAllButton)?_c('gl-link',{staticClass:"gl-absolute gl-right-3 gl-mt-2 gl-flex gl-items-center gl-text-sm",attrs:{"data-testid":"view-all-toggle"},on:{"click":function($event){return _vm.$emit('view-all-clicked')}}},[_c('span',[_vm._v(_vm._s(_vm.viewAllText))])]):_vm._e(),_vm._v(" "),_c('gl-accordion-item',{class:_vm.wrapperClasses,attrs:{"title":_vm.accordionTitle,"header-class":'gl-flex gl-mb-n3'},model:{value:(_vm.expanded),callback:function ($$v) {_vm.expanded=$$v;},expression:"expanded"}},[_vm._t("default")],2)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/ui/duo_terminal_command/duo_terminal_command.js

@@ -63,7 +63,7 @@ var 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('div',{staticClass:"gl-border-solid gl-border-neutral-600"},[_c('div',{staticClass:"gl-w-full gl-flex gl-justify-between gl-items-center gl-px-3 gl-py-2"},[_c('span',{staticClass:"gl-flex gl-items-center",attrs:{"data-testid":"terminal-command-header"}},[_c('gl-icon',{staticClass:"gl-mr-3",attrs:{"name":"terminal"}}),_vm._v("\n      "+_vm._s(_vm.commandHeader)+"\n    ")],1),_vm._v(" "),(_vm.isCommandOutputAvailable)?_c('gl-button',{attrs:{"text":"Toggle visibility","icon":_vm.toggleIcon,"data-testid":"toggle-visibility-button","category":"tertiary"},on:{"click":_vm.toggleVisibility}}):_vm._e()],1),_vm._v(" "),_c('div',{staticClass:"gl-border-t gl-p-3 gl-flex gl-flex-col gl-leading-22"},[_c('code',{staticClass:"gl-text-subtle",attrs:{"data-testid":"terminal-working-directory"}},[_vm._v(_vm._s(_vm.workingDirectory)+" >")]),_vm._v(" "),_c('code',{staticClass:"gl-text-default",attrs:{"data-testid":"terminal-command-action"}},[_vm._v(_vm._s(_vm.commandAction))])]),_vm._v(" "),(_vm.isCommandOutputAvailable)?_c('gl-collapse',{attrs:{"visible":_vm.isVisible}},[_c('div',{staticClass:"gl-p-3 gl-bg-black"},[_c('code',[_vm._v(_vm._s(_vm.commandOutput))])])]):_vm._e(),_vm._v(" "),(_vm.$scopedSlots.actions)?_c('div',{staticClass:"gl-p-3 gl-border-t"},[_vm._t("actions")],2):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-border-solid gl-border-neutral-600"},[_c('div',{staticClass:"gl-flex gl-w-full gl-items-center gl-justify-between gl-px-3 gl-py-2"},[_c('span',{staticClass:"gl-flex gl-items-center",attrs:{"data-testid":"terminal-command-header"}},[_c('gl-icon',{staticClass:"gl-mr-3",attrs:{"name":"terminal"}}),_vm._v("\n      "+_vm._s(_vm.commandHeader)+"\n    ")],1),_vm._v(" "),(_vm.isCommandOutputAvailable)?_c('gl-button',{attrs:{"text":"Toggle visibility","icon":_vm.toggleIcon,"data-testid":"toggle-visibility-button","category":"tertiary"},on:{"click":_vm.toggleVisibility}}):_vm._e()],1),_vm._v(" "),_c('div',{staticClass:"gl-leading-22 gl-border-t gl-flex gl-flex-col gl-p-3"},[_c('code',{staticClass:"gl-text-subtle",attrs:{"data-testid":"terminal-working-directory"}},[_vm._v(_vm._s(_vm.workingDirectory)+" >")]),_vm._v(" "),_c('code',{staticClass:"gl-text-default",attrs:{"data-testid":"terminal-command-action"}},[_vm._v(_vm._s(_vm.commandAction))])]),_vm._v(" "),(_vm.isCommandOutputAvailable)?_c('gl-collapse',{attrs:{"visible":_vm.isVisible}},[_c('div',{staticClass:"gl-bg-black gl-p-3"},[_c('code',[_vm._v(_vm._s(_vm.commandOutput))])])]):_vm._e(),_vm._v(" "),(_vm.$scopedSlots.actions)?_c('div',{staticClass:"gl-border-t gl-p-3"},[_vm._t("actions")],2):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/duo-ui",
-  "version": "10.11.0",
+  "version": "10.12.1",
   "description": "Duo UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -86,6 +86,7 @@
     "vue": "^2.7.16"
   },
   "resolutions": {
+    "stylus": "npm:@gitlab/noop@1.0.1",
     "chokidar": "^3.5.2",
     "sane": "^5.0.1",
     "jackspeak": "2.1.1"

package/src/components/agentic_chat/agentic_duo_chat.vue

@@ -78,12 +78,11 @@ const itemsValidator = (items) => items.every(isMessage);
 const slashCommandsValidator = (commands) => commands.every(isSlashCommand);
 
 const isThread = (thread) =>
-  typeof thread === 'object' &&
-  typeof thread.id === 'string' &&
-  typeof thread.lastUpdatedAt === 'string' &&
-  typeof thread.createdAt === 'string' &&
-  typeof thread.conversationType === 'string' &&
-  (thread.title === null || typeof thread.title === 'string');
+  (typeof thread === 'object' &&
+    typeof thread.id === 'string' &&
+    typeof thread.lastUpdatedAt === 'string') ||
+  (typeof thread.updatedAt === 'string' &&
+    (thread.title === null || typeof thread.title === 'string' || typeof thread.goal === 'string'));
 
 // eslint-disable-next-line unicorn/no-array-callback-reference
 const threadListValidator = (threads) => threads.every(isThread);
@@ -728,7 +727,7 @@ export default {
         'resizable-content': shouldRenderResizable,
         'duo-chat-drawer': !shouldRenderResizable,
       }"
-      class="markdown-code-block duo-chat gl-bottom-0 gl-max-h-full gl-flex gl-flex-col"
+      class="markdown-code-block duo-chat gl-bottom-0 gl-flex gl-max-h-full gl-flex-col"
       role="complementary"
       data-testid="chat-component"
     >
@@ -755,7 +754,7 @@ export default {
       </duo-chat-header>
 
       <div
-        class="gl-overflow-y-auto gl-flex gl-flex-col gl-flex-1 gl-flex-grow gl-bg-inherit gl-overscroll-contain"
+        class="gl-flex gl-flex-1 gl-flex-grow gl-flex-col gl-overflow-y-auto gl-overscroll-contain gl-bg-inherit"
         data-testid="chat-history"
         @scroll="handleScrollingThrottled"
       >
@@ -773,7 +772,7 @@ export default {
           mode="out-in"
           tag="section"
           name="message"
-          class="duo-chat-history gl-p-5 gl-mt-auto"
+          class="duo-chat-history gl-mt-auto gl-p-5"
         >
           <duo-chat-conversation
             v-for="(conversation, index) in conversations"
@@ -815,7 +814,7 @@ export default {
       <footer
         v-if="isChatAvailable && !shouldShowThreadList"
         data-testid="chat-footer"
-        class="duo-chat-drawer-footer gl-border-0 gl-bg-default gl-pb-3 gl-shrink-0 gl-relative gl-z-2"
+        class="duo-chat-drawer-footer gl-relative gl-z-2 gl-shrink-0 gl-border-0 gl-bg-default gl-pb-3"
         :class="{ 'duo-chat-drawer-body-scrim-on-footer': !scrolledToBottom }"
       >
         <gl-form data-testid="chat-prompt-form" @submit.stop.prevent="sendChatPrompt">

package/src/components/agentic_chat/components/agentic_tool_approval_flow/agentic_tool_approval_modal/agentic_tool_approval_modal.vue

@@ -122,13 +122,13 @@ export default {
 
       <div
         v-if="toolDetails"
-        class="gl-bg-gray-10 gl-p-3 gl-rounded-base gl-mb-3"
+        class="gl-mb-3 gl-rounded-base gl-bg-gray-10 gl-p-3"
         data-testid="tool-details"
       >
         <strong>{{ $options.i18n.TOOL_LABEL }} {{ toolName }}</strong>
         <pre
           v-if="toolDetails.parameters"
-          class="gl-mt-2 gl-mb-0 gl-text-inherit"
+          class="gl-mb-0 gl-mt-2 gl-text-inherit"
           data-testid="tool-parameters"
           >{{ JSON.stringify(toolDetails.parameters, null, 2) }}</pre
         >

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

@@ -257,7 +257,7 @@ export default {
         body-class="!gl-p-2"
         data-testid="context-item-menu"
       >
-        <div class="gl-flex gl-mb-2">
+        <div class="gl-mb-2 gl-flex">
           <gl-button
             v-if="selectedCategory"
             size="small"
@@ -302,7 +302,7 @@ export default {
           :removable="true"
           :title="$options.i18n.selectedContextItemsTitle"
           :default-collapsed="false"
-          class="gl-mt-2 !gl-mb-0 gl-max-h-13 gl-overflow-y-auto"
+          class="!gl-mb-0 gl-mt-2 gl-max-h-13 gl-overflow-y-auto"
           data-testid="in-menu-context-item-selections"
           @remove="removeItem"
           @get-content="onGetContextItemContent"

package/src/components/chat/components/duo_chat_header/duo_chat_header.vue

@@ -82,7 +82,7 @@ export default {
 </script>
 
 <template>
-  <header data-testid="chat-header" class="gl-border-b gl-bg-default gl-p-0 gl-shrink-0">
+  <header data-testid="chat-header" class="gl-border-b gl-shrink-0 gl-bg-default gl-p-0">
     <div class="drawer-title gl-flex gl-items-center gl-justify-start gl-p-5">
       <div class="gl-flex-1 gl-overflow-hidden">
         <div class="gl-flex gl-items-center">
@@ -91,7 +91,7 @@ export default {
         </div>
         <h4
           v-if="subtitle"
-          class="gl-whitespace-nowrap gl-overflow-hidden gl-text-ellipsis gl-font-normal gl-text-subtle gl-mb-0 gl-text-sm gl-pr-3"
+          class="gl-mb-0 gl-overflow-hidden gl-text-ellipsis gl-whitespace-nowrap gl-pr-3 gl-text-sm gl-font-normal gl-text-subtle"
           data-testid="chat-subtitle"
         >
           {{ subtitle }}

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

@@ -319,7 +319,7 @@ export default {
 </script>
 <template>
   <div
-    class="gl-flex gl-flex-row gl-items-end duo-chat-message-container"
+    class="duo-chat-message-container gl-flex gl-flex-row gl-items-end"
     @mouseenter="hovered = true"
     @mouseleave="
       hovered = false;
@@ -328,9 +328,9 @@ export default {
   >
     <template v-if="isAssistantMessage || isUserMessage">
       <div
-        class="duo-chat-message gl-leading-20 gl-break-anywhere md gl-w-full"
+        class="duo-chat-message md gl-w-full gl-leading-20 gl-break-anywhere"
         :class="{
-          'gl-ml-auto gl-p-3 gl-bg-feedback-info gl-text-feedback-info': isUserMessage,
+          'gl-ml-auto gl-bg-feedback-info gl-p-3 gl-text-feedback-info': isUserMessage,
           'gl-text-default': isAssistantMessage && !error,
           'duo-chat-message-with-error gl-bg-feedback-danger gl-p-3': error,
         }"
@@ -404,7 +404,7 @@ export default {
       <transition name="duo-chat-message-actions">
         <div
           v-if="shouldShowCopyAction"
-          class="gl-bg-subtle duo-chat-message-actions gl-rounded-tr-lg gl-rounded-br-lg"
+          class="duo-chat-message-actions gl-rounded-br-lg gl-rounded-tr-lg gl-bg-subtle"
         >
           <gl-button
             v-gl-tooltip.hover

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

@@ -70,7 +70,7 @@ export default {
   <div
     class="duo-chat-message gl-leading-20 gl-break-anywhere"
     :class="{
-      'gl-flex gl-items-top': hasError,
+      'gl-items-top gl-flex': hasError,
     }"
   >
     <gl-icon

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

@@ -135,7 +135,7 @@ export default {
             <div
               v-for="(action, index) in toolArgs.actions"
               :key="index"
-              class="gl-ml-4 gl-mb-3 gl-p-3 gl-border gl-border-subtle gl-rounded"
+              class="gl-rounded gl-border gl-mb-3 gl-ml-4 gl-border-subtle gl-p-3"
               data-testid="tool-message-action-item"
             >
               <div class="gl-mb-2">
@@ -147,7 +147,7 @@ export default {
               <div v-if="action.file_path" class="gl-mb-2">
                 <span class="gl-font-weight-bold">{{ $options.i18n.FILE_PATH_LABEL }}:</span>
                 <gl-link
-                  class="gl-ml-2 gl-markdown file-path-link gl-break-all"
+                  class="gl-markdown file-path-link gl-ml-2 gl-break-all"
                   data-testid="tool-message-action-file-path-link"
                   @click.prevent="onOpenFilePath(action.file_path)"
                 >
@@ -158,7 +158,7 @@ export default {
               <div v-if="action.content" class="gl-mb-2" data-testid="tool-message-action-content">
                 <span class="gl-font-weight-bold">{{ $options.i18n.CONTENT_LABEL }}:</span>
                 <pre
-                  class="gl-mt-2 gl-p-2 gl-bg-subtle gl-rounded gl-text-sm gl-overflow-auto"
+                  class="gl-rounded gl-mt-2 gl-overflow-auto gl-bg-subtle gl-p-2 gl-text-sm"
                   data-testid="tool-message-action-content-text"
                   >{{ action.content }}</pre
                 >
@@ -169,7 +169,7 @@ export default {
           <div v-else-if="messageFilePath" class="gl-mb-2">
             <span class="gl-font-weight-bold">{{ $options.i18n.FILE_PATH_LABEL }}:</span>
             <gl-link
-              class="gl-ml-2 gl-markdown file-path-link gl-break-all"
+              class="gl-markdown file-path-link gl-ml-2 gl-break-all"
               data-testid="tool-message-file-path-link"
               @click.prevent="onOpenFilePath(messageFilePath)"
             >

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

@@ -15,5 +15,5 @@ export default {
 };
 </script>
 <template>
-  <base-message :message="message" class="gl-ml-auto gl-bg-blue-100 gl-text-blue-900 gl-p-4" />
+  <base-message :message="message" class="gl-ml-auto gl-bg-blue-100 gl-p-4 gl-text-blue-900" />
 </template>

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

@@ -132,24 +132,24 @@ export default {
 
 <template>
   <div
-    class="gl-border gl-border-transparent gl-p-4 gl-leading-20 gl-break-anywhere md gl-rounded-bl-none gl-border-1 gl-border-solid gl-text-default gl-bg-subtle"
+    class="md gl-border gl-rounded-bl-none gl-border-1 gl-border-solid gl-border-transparent gl-bg-subtle gl-p-4 gl-leading-20 gl-text-default gl-break-anywhere"
   >
-    <p class="gl-text-gray-700 gl-mb-3">
+    <p class="gl-mb-3 gl-text-gray-700">
       {{ $options.i18n.TOOL_APPROVAL_TITLE }}
     </p>
 
-    <div class="gl-flex gl-items-center gl-gap-2 gl-mb-3">
+    <div class="gl-mb-3 gl-flex gl-items-center gl-gap-2">
       <gl-icon name="work-item-maintenance" class="gl-text-gray-500" />
       <strong>{{ toolName }}</strong>
     </div>
 
-    <div class="gl-border gl-border-gray-200 gl-rounded-base gl-bg-gray-50 gl-p-3 gl-mb-4">
-      <p class="gl-text-sm gl-text-gray-500 gl-mb-1">
+    <div class="gl-border gl-mb-4 gl-rounded-base gl-border-gray-200 gl-bg-gray-50 gl-p-3">
+      <p class="gl-mb-1 gl-text-sm gl-text-gray-500">
         {{ $options.i18n.REQUEST_TEXT }}
       </p>
       <code
         v-if="hasToolParameters"
-        class="gl-text-sm gl-font-monospace gl-whitespace-pre-wrap gl-text-default"
+        class="gl-whitespace-pre-wrap gl-text-sm gl-text-default gl-font-monospace"
         data-testid="tool-parameters"
         >{{ JSON.stringify(toolParameters, null, 2) }}</code
       >

package/src/components/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue

@@ -32,7 +32,6 @@ export default {
       :key="`question-${index}`"
       category="secondary"
       variant="default"
-      icon="question-o"
       class="duo-chat-suggestion-button gl-text-left"
       @click="handleClick(prompt)"
       ><span class="gl-whitespace-normal">{{ prompt }}</span></gl-button

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

@@ -40,9 +40,11 @@ export default {
 
       return this.threads
         .slice()
+        .sort((a, b) => this.compareThreadDates(b.updatedAt, a.updatedAt))
         .sort((a, b) => this.compareThreadDates(b.lastUpdatedAt, a.lastUpdatedAt))
         .reduce((grouped, thread) => {
-          const dateKey = this.getDateKey(thread.lastUpdatedAt);
+          const dateField = thread.updatedAt || thread.lastUpdatedAt;
+          const dateKey = this.getDateKey(dateField);
           return {
             ...grouped,
             [dateKey]: [...(grouped[dateKey] || []), thread],
@@ -88,7 +90,7 @@ export default {
   <div class="gl-p-5">
     <div
       data-testid="chat-threads-info-banner"
-      class="gl-bg-gray-50 gl-text-gray-500 gl-p-4 gl-mb-5 gl-rounded-base"
+      class="gl-mb-5 gl-rounded-base gl-bg-gray-50 gl-p-4 gl-text-gray-500"
     >
       <p class="gl-m-0 gl-flex">
         {{ $options.i18n.CHAT_HISTORY_INFO }}
@@ -97,22 +99,24 @@ export default {
 
     <template v-if="hasThreads">
       <div v-for="(threadsForDate, date) in groupedThreads" :key="date">
-        <div data-testid="chat-threads-date-header" class="gl-font-bold gl-neutral-900 gl-my-4">
+        <div data-testid="chat-threads-date-header" class="gl-neutral-900 gl-my-4 gl-font-bold">
           {{ formattedLocalDate(date) }}
         </div>
 
         <div>
-          <div v-for="thread in threadsForDate" :key="thread.id" class="gl-flex gl-align-center">
+          <div v-for="thread in threadsForDate" :key="thread.id" class="gl-align-center gl-flex">
             <gl-button
               data-testid="chat-threads-thread-box"
               category="tertiary"
-              class="hover:gl-bg-gray-50 gl-text-ellipsis !gl-text-default justify-content-start gl-overflow-hidden gl-rounded-base gl-p-4 gl-w-full gl-whitespace-nowrap"
+              class="justify-content-start gl-w-full gl-overflow-hidden gl-text-ellipsis gl-whitespace-nowrap gl-rounded-base gl-p-4 !gl-text-default hover:gl-bg-gray-50"
               :aria-label="
-                sprintf($options.i18n.OPEN_CHAT_LABEL, { title: thread.title || 'Untitled Chat' })
+                sprintf($options.i18n.OPEN_CHAT_LABEL, {
+                  title: thread.title || thread.goal || 'Untitled Chat',
+                })
               "
               @click="onSelectThread(thread)"
             >
-              {{ thread.title || 'Untitled Chat' }}
+              {{ thread.title || thread.goal || 'Untitled Chat' }}
             </gl-button>
 
             <gl-button

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

@@ -23,14 +23,14 @@ export default {
 </script>
 
 <template>
-  <div class="gl-h-full gl-flex gl-flex-col gl-align-center gl-items-center gl-justify-center">
+  <div class="gl-align-center gl-flex gl-h-full gl-flex-col gl-items-center gl-justify-center">
     <img
       :src="$options.ScheduleIllustration"
       :alt="$options.i18n.EMPTY_HISTORY_ALT"
       class="gl-mb-5"
       data-testid="empty-state-illustration"
     />
-    <h3 class="gl-font-bold gl-neutral-900 gl-mb-4" data-testid="empty-state-title">
+    <h3 class="gl-neutral-900 gl-mb-4 gl-font-bold" data-testid="empty-state-title">
       {{ $options.i18n.EMPTY_HISTORY_TITLE }}
     </h3>
     <p class="gl-align-center" data-testid="empty-state-description">

package/src/components/chat/duo_chat.vue

@@ -718,7 +718,7 @@ export default {
         'resizable-content': shouldRenderResizable,
         'duo-chat-drawer': !shouldRenderResizable,
       }"
-      class="markdown-code-block duo-chat gl-bottom-0 gl-max-h-full gl-flex gl-flex-col"
+      class="markdown-code-block duo-chat gl-bottom-0 gl-flex gl-max-h-full gl-flex-col"
       role="complementary"
       data-testid="chat-component"
     >
@@ -745,7 +745,7 @@ export default {
       </duo-chat-header>
 
       <div
-        class="gl-overflow-y-auto gl-flex gl-flex-col gl-flex-1 gl-flex-grow gl-bg-inherit gl-overscroll-contain"
+        class="gl-flex gl-flex-1 gl-flex-grow gl-flex-col gl-overflow-y-auto gl-overscroll-contain gl-bg-inherit"
         data-testid="chat-history"
         @scroll="handleScrollingThrottled"
       >
@@ -763,7 +763,7 @@ export default {
           mode="out-in"
           tag="section"
           name="message"
-          class="duo-chat-history gl-p-5 gl-mt-auto"
+          class="duo-chat-history gl-mt-auto gl-p-5"
         >
           <duo-chat-conversation
             v-for="(conversation, index) in conversations"
@@ -803,7 +803,7 @@ export default {
       <footer
         v-if="isChatAvailable && !shouldShowThreadList"
         data-testid="chat-footer"
-        class="duo-chat-drawer-footer gl-border-0 gl-bg-default gl-pb-3 gl-shrink-0 gl-relative gl-z-2"
+        class="duo-chat-drawer-footer gl-relative gl-z-2 gl-shrink-0 gl-border-0 gl-bg-default gl-pb-3"
         :class="{ 'duo-chat-drawer-body-scrim-on-footer': !scrolledToBottom }"
       >
         <gl-form data-testid="chat-prompt-form" @submit.stop.prevent="sendChatPrompt">