@gitlab/duo-ui 2.0.0 → 3.0.1

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

@@ -2,20 +2,20 @@
 import debounce from 'lodash/debounce';
 import { GlCard } from '@gitlab/ui';
 import { translate } from '../../../../../utils/i18n';
-import GlDuoChatContextItemSelections from '../duo_chat_context_item_selections/duo_chat_context_item_selections.vue';
+import DuoChatContextItemSelections from '../duo_chat_context_item_selections/duo_chat_context_item_selections.vue';
 import { categoriesValidator, contextItemsValidator, wrapIndex } from '../utils';
-import GlDuoChatContextItemMenuCategoryItems from './duo_chat_context_item_menu_category_items.vue';
-import GlDuoChatContextItemMenuSearchItems from './duo_chat_context_item_menu_search_items.vue';
+import DuoChatContextItemMenuCategoryItems from './duo_chat_context_item_menu_category_items.vue';
+import DuoChatContextItemMenuSearchItems from './duo_chat_context_item_menu_search_items.vue';
 
 const SEARCH_DEBOUNCE_MS = 30;
 
 export default {
-  name: 'GlDuoChatContextItemMenu',
+  name: 'DuoChatContextItemMenu',
   components: {
     GlCard,
-    GlDuoChatContextItemMenuCategoryItems,
-    GlDuoChatContextItemMenuSearchItems,
-    GlDuoChatContextItemSelections,
+    DuoChatContextItemMenuCategoryItems,
+    DuoChatContextItemMenuSearchItems,
+    DuoChatContextItemSelections,
   },
   props: {
     /**
@@ -185,7 +185,7 @@ export default {
           this.selectedCategory = null;
 
           /**
-           * Emitted when the parent GlDuoChat component should refocus on the main prompt input
+           * Emitted when the parent DuoChat component should refocus on the main prompt input
            */
           this.$emit('focus-prompt');
           break;
@@ -229,7 +229,7 @@ export default {
   },
   i18n: {
     selectedContextItemsTitle: translate(
-      'GlDuoChatContextItemMenu.selectedContextItemsTitle',
+      'DuoChatContextItemMenu.selectedContextItemsTitle',
       'Included references'
     ),
   },
@@ -238,7 +238,7 @@ export default {
 
 <template>
   <div>
-    <gl-duo-chat-context-item-selections
+    <duo-chat-context-item-selections
       v-if="selections.length"
       :selections="selections"
       :categories="categories"
@@ -255,14 +255,14 @@ export default {
       body-class="!gl-p-2"
       data-testid="context-item-menu"
     >
-      <gl-duo-chat-context-item-menu-category-items
+      <duo-chat-context-item-menu-category-items
         v-if="showCategorySelection"
         :active-index="activeIndex"
         :categories="categories"
         @select="selectCategory"
         @active-index-change="activeIndex = $event"
       />
-      <gl-duo-chat-context-item-menu-search-items
+      <duo-chat-context-item-menu-search-items
         v-else
         v-model="searchQuery"
         :active-index="activeIndex"

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

@@ -3,7 +3,7 @@ import { GlDropdownItem, GlIcon } from '@gitlab/ui';
 import { categoriesValidator } from '../utils';
 
 export default {
-  name: 'GlDuoChatContextItemMenuCategoryItems',
+  name: 'DuoChatContextItemMenuCategoryItems',
   components: { GlIcon, GlDropdownItem },
   props: {
     categories: {

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

@@ -1,18 +1,12 @@
 <script>
 import { GlIcon, GlTruncate, GlBadge } from '@gitlab/ui';
-import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover.vue';
+import DuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover.vue';
 
-import {
-  categoryValidator,
-  contextItemValidator,
-  getContextItemIcon,
-  getContextItemSecondaryText,
-  getContextItemSource,
-} from '../utils';
+import { categoryValidator, contextItemValidator, getContextItemSource } from '../utils';
 
 export default {
-  name: 'GlDuoChatContextItemMenuSearchItem',
-  components: { GlBadge, GlTruncate, GlIcon, GlDuoChatContextItemPopover },
+  name: 'DuoChatContextItemMenuSearchItem',
+  components: { GlBadge, GlTruncate, GlIcon, DuoChatContextItemPopover },
   props: {
     category: {
       type: Object,
@@ -26,15 +20,6 @@ export default {
     },
   },
   computed: {
-    title() {
-      return this.contextItem.metadata?.title || '';
-    },
-    secondaryText() {
-      return getContextItemSecondaryText(this.contextItem);
-    },
-    icon() {
-      return getContextItemIcon(this.contextItem, this.category);
-    },
     itemSource() {
       return getContextItemSource(this.contextItem);
     },
@@ -44,22 +29,26 @@ export default {
 <template>
   <div class="gl-flex gl-flex-col">
     <div class="gl-flex gl-items-center">
-      <gl-icon :name="icon" class="gl-mr-2 gl-shrink-0" data-testid="category-icon" />
-      <gl-truncate :text="title" class="gl-min-w-0" data-testid="item-title" />
+      <gl-icon
+        :name="contextItem.metadata.icon"
+        class="gl-mr-2 gl-shrink-0"
+        data-testid="category-icon"
+      />
+      <gl-truncate :text="contextItem.metadata.title" class="gl-min-w-0" data-testid="item-title" />
       <gl-icon
         :id="`info-icon-${contextItem.id}`"
         name="information-o"
         class="gl-ml-2 gl-shrink-0 gl-cursor-pointer gl-text-secondary"
         :size="12"
       />
-      <gl-duo-chat-context-item-popover
+      <duo-chat-context-item-popover
         :context-item="contextItem"
         :target="`info-icon-${contextItem.id}`"
         placement="left"
       />
     </div>
     <div
-      v-if="secondaryText"
+      v-if="contextItem.metadata.secondaryText"
       class="gl-align-items-center gl-mt-1 gl-flex gl-shrink-0 gl-whitespace-nowrap gl-text-secondary"
       data-testid="item-secondary-text"
     >
@@ -70,7 +59,11 @@ export default {
         data-testid="context-item-source"
         >{{ itemSource }}</gl-badge
       >
-      <gl-truncate class="gl-min-w-0" position="middle" :text="secondaryText" />
+      <gl-truncate
+        class="gl-min-w-0"
+        position="middle"
+        :text="contextItem.metadata.secondaryText"
+      />
     </div>
   </div>
 </template>

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

@@ -2,16 +2,16 @@
 import { GlDropdownItem, GlFormInput, GlAlert } from '@gitlab/ui';
 import { sprintf, translate } from '@gitlab/ui/dist/utils/i18n';
 import { categoryValidator, contextItemsValidator } from '../utils';
-import GlDuoChatContextItemMenuSearchItemsLoading from './duo_chat_context_item_menu_search_items_loading.vue';
-import GlDuoChatContextItemMenuSearchItem from './duo_chat_context_item_menu_search_item.vue';
+import DuoChatContextItemMenuSearchItemsLoading from './duo_chat_context_item_menu_search_items_loading.vue';
+import DuoChatContextItemMenuSearchItem from './duo_chat_context_item_menu_search_item.vue';
 
 export default {
-  name: 'GlDuoChatContextItemMenuSearchItems',
+  name: 'DuoChatContextItemMenuSearchItems',
   components: {
     GlAlert,
     GlDropdownItem,
-    GlDuoChatContextItemMenuSearchItem,
-    GlDuoChatContextItemMenuSearchItemsLoading,
+    DuoChatContextItemMenuSearchItem,
+    DuoChatContextItemMenuSearchItemsLoading,
     GlFormInput,
   },
   model: {
@@ -61,7 +61,7 @@ export default {
     },
     searchInputPlaceholder() {
       return sprintf(
-        translate('GlDuoChatContextItemMenu.searchInputPlaceholder', 'Search %{categoryLabel}...'),
+        translate('DuoChatContextItemMenu.searchInputPlaceholder', 'Search %{categoryLabel}...'),
         {
           categoryLabel: this.category.label.toLowerCase(),
         }
@@ -94,14 +94,14 @@ export default {
     },
   },
   i18n: {
-    emptyStateMessage: translate('GlDuoChatContextItemMenu.emptyStateMessage', 'No results found'),
+    emptyStateMessage: translate('DuoChatContextItemMenu.emptyStateMessage', 'No results found'),
   },
 };
 </script>
 <template>
   <div>
     <div class="gl-max-h-31 gl-overflow-y-scroll">
-      <gl-duo-chat-context-item-menu-search-items-loading v-if="loading" :rows="numLoadingItems" />
+      <duo-chat-context-item-menu-search-items-loading v-if="loading" :rows="numLoadingItems" />
       <gl-alert
         v-else-if="error"
         variant="danger"
@@ -134,7 +134,7 @@ export default {
           @click="selectItem(contextItem)"
         >
           <div @mouseenter="setActiveIndex(index)">
-            <gl-duo-chat-context-item-menu-search-item
+            <duo-chat-context-item-menu-search-item
               :context-item="contextItem"
               :category="category"
               :class="{ 'gl-text-secondary': !contextItem.metadata.enabled }"

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

@@ -2,7 +2,7 @@
 import { translate } from '../../../../../utils/i18n';
 
 export default {
-  name: 'GlDuoChatContextItemMenuSearchItemsLoading',
+  name: 'DuoChatContextItemMenuSearchItemsLoading',
   props: {
     rows: {
       type: Number,
@@ -10,7 +10,7 @@ export default {
     },
   },
   i18n: {
-    loadingMessage: translate('GlDuoChatContextItemMenu.loadingMessage', 'Loading...'),
+    loadingMessage: translate('DuoChatContextItemMenu.loadingMessage', 'Loading...'),
   },
 };
 </script>

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

@@ -2,19 +2,8 @@
 import { GlAlert, GlIcon, GlPopover, GlTruncate, GlBadge } from '@gitlab/ui';
 import { translate } from '../../../../../utils/i18n';
 
-import {
-  CONTEXT_ITEM_CATEGORY_FILE,
-  CONTEXT_ITEM_CATEGORY_ISSUE,
-  CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
-} from '../constants';
-import {
-  formatIssueId,
-  formatMergeRequestId,
-  getContextItemIcon,
-  getContextItemSecondaryText,
-  getContextItemSource,
-  getContextItemTypeLabel,
-} from '../utils';
+import { CONTEXT_ITEM_CATEGORY_FILE } from '../constants';
+import { getContextItemSource } from '../utils';
 
 export default {
   name: 'DuoChatContextItemPopover',
@@ -50,25 +39,6 @@ export default {
     },
   },
   computed: {
-    id() {
-      const isIssuable =
-        this.contextItem.category === CONTEXT_ITEM_CATEGORY_ISSUE ||
-        this.contextItem.category === CONTEXT_ITEM_CATEGORY_MERGE_REQUEST;
-      return isIssuable ? this.contextItem.metadata.iid : null;
-    },
-    formattedId() {
-      switch (this.contextItem.category) {
-        case CONTEXT_ITEM_CATEGORY_ISSUE:
-          return formatIssueId(this.id);
-        case CONTEXT_ITEM_CATEGORY_MERGE_REQUEST:
-          return formatMergeRequestId(this.id);
-        default:
-          return '';
-      }
-    },
-    title() {
-      return this.contextItem.metadata.title || '';
-    },
     filePath() {
       return this.contextItem.category === CONTEXT_ITEM_CATEGORY_FILE
         ? this.contextItem.metadata.relativePath || ''
@@ -86,15 +56,6 @@ export default {
         ? this.contextItem.metadata.disabledReasons.join(', ')
         : translate('DuoChatContextItemPopover.DisabledReason', 'This item is disabled');
     },
-    iconName() {
-      return getContextItemIcon(this.contextItem);
-    },
-    itemTypeLabel() {
-      return getContextItemTypeLabel(this.contextItem);
-    },
-    secondaryText() {
-      return getContextItemSecondaryText(this.contextItem);
-    },
     itemSource() {
       return getContextItemSource(this.contextItem);
     },
@@ -109,8 +70,8 @@ export default {
     :target="target"
     triggers="hover focus"
     :placement="placement"
-    :title="title"
-    custom-class="gl-duo-chat-item-popover"
+    :title="contextItem.metadata.title"
+    custom-class="duo-chat-item-popover"
   >
     <template #title>
       <div>
@@ -118,18 +79,32 @@ export default {
           class="gl-heading-3 gl-mb-1 gl-mt-2 gl-leading-1"
           data-testid="chat-context-popover-title"
         >
-          {{ title }}
+          {{ contextItem.metadata.title }}
         </div>
-        <div v-if="itemTypeLabel" class="gl-flex gl-items-center gl-font-normal gl-text-subtle">
-          <gl-truncate :text="itemTypeLabel" class="gl-min-w-0" />
+        <div
+          v-if="contextItem.metadata.subTypeLabel"
+          class="gl-flex gl-items-center gl-font-normal gl-text-subtle"
+        >
+          <gl-truncate :text="contextItem.metadata.subTypeLabel" class="gl-min-w-0" />
         </div>
       </div>
     </template>
     <div>
-      <div v-if="secondaryText" class="gl-flex gl-items-center">
-        <gl-icon :name="iconName" :size="12" variant="subtle" class="gl-mr-1 gl-shrink-0" />
-        <gl-badge v-if="itemSource" class="gl-mr-1">{{ itemSource }}</gl-badge>
-        <gl-truncate :text="secondaryText" class="gl-min-w-0" />
+      <div v-if="contextItem.metadata.secondaryText" class="gl-flex gl-items-center">
+        <gl-icon
+          :name="contextItem.metadata.icon"
+          :size="12"
+          variant="subtle"
+          class="gl-mr-1 gl-shrink-0"
+        />
+        <gl-badge v-if="itemSource" class="gl-mr-1 gl-flex-1 gl-min-w-[33%]">
+          <gl-truncate :text="itemSource" position="middle" />
+        </gl-badge>
+        <gl-truncate
+          :text="contextItem.metadata.secondaryText"
+          position="middle"
+          class="gl-flex-2 gl-min-w-[33%]"
+        />
       </div>
       <div v-else-if="filePath">
         <gl-icon name="document" :size="12" variant="subtle" />
@@ -138,11 +113,6 @@ export default {
           >{{ pathPart }}{{ index + 1 < filePathArray.length ? '/' : '' }}</span
         >
       </div>
-      <div v-else>
-        <gl-icon v-if="iconName" :name="iconName" :size="12" variant="subtle" />
-        <span class="gl-break-all">{{ contextItem.metadata.project }}</span>
-        <span v-if="id" class="gl-break-all">{{ formattedId }}</span>
-      </div>
       <gl-alert
         v-if="!isEnabled"
         variant="danger"

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

@@ -2,22 +2,22 @@
 import uniqueId from 'lodash/uniqueId';
 import { GlIcon, GlToken, GlTruncate } from '@gitlab/ui';
 
-import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover.vue';
+import DuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover.vue';
 import {
   CONTEXT_ITEM_CATEGORY_DEPENDENCY,
   CONTEXT_ITEM_CATEGORY_FILE,
   CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
 } from '../constants';
-import GlDuoChatContextItemDetailsModal from '../duo_chat_context_item_details_modal/duo_chat_context_item_details_modal.vue';
-import { contextItemsValidator, getContextItemIcon } from '../utils';
+import DuoChatContextItemDetailsModal from '../duo_chat_context_item_details_modal/duo_chat_context_item_details_modal.vue';
+import { contextItemsValidator } from '../utils';
 
 export default {
-  name: 'GlDuoChatContextItemSelections',
+  name: 'DuoChatContextItemSelections',
   components: {
     GlTruncate,
-    GlDuoChatContextItemDetailsModal,
+    DuoChatContextItemDetailsModal,
     GlIcon,
-    GlDuoChatContextItemPopover,
+    DuoChatContextItemPopover,
     GlToken,
   },
   props: {
@@ -85,7 +85,6 @@ export default {
     },
   },
   methods: {
-    getContextItemIcon,
     toggleCollapse() {
       this.isCollapsed = !this.isCollapsed;
     },
@@ -162,14 +161,14 @@ export default {
           class="gl-flex gl-min-w-0 gl-items-center"
         >
           <gl-icon
-            v-if="getContextItemIcon(item)"
-            :name="getContextItemIcon(item)"
+            v-if="item.metadata.icon"
+            :name="item.metadata.icon"
             :size="12"
             class="gl-mr-1"
           />
           <gl-truncate :text="item.metadata.title" position="middle" />
         </div>
-        <gl-duo-chat-context-item-popover
+        <duo-chat-context-item-popover
           :context-item="item"
           :target="`context-item-${item.id}-${selectionsId}-token`"
           placement="bottom"
@@ -177,7 +176,7 @@ export default {
         />
       </gl-token>
     </div>
-    <gl-duo-chat-context-item-details-modal
+    <duo-chat-context-item-details-modal
       v-if="contextItemPreview"
       :context-item="contextItemPreview"
       @close="onClosePreview"

package/src/components/chat/components/duo_chat_context/utils.js

@@ -1,13 +1,3 @@
-import { translate } from '../../../../utils/i18n';
-import {
-  CONTEXT_ITEM_CATEGORY_FILE,
-  CONTEXT_ITEM_CATEGORY_ISSUE,
-  CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
-  CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
-  CONTEXT_ITEM_LOCAL_GIT_COMMIT,
-  CONTEXT_ITEM_LOCAL_GIT_DIFF,
-} from './constants';
-
 export function categoryValidator(category) {
   return Boolean(category && category.value && category.label && category.icon);
 }
@@ -40,114 +30,10 @@ export function contextItemsValidator(items) {
   return Array.isArray(items) && items.every((item) => contextItemValidator(item));
 }
 
-export function formatIssueId(iid) {
-  if (!iid) return '';
-
-  return `#${iid}`;
-}
-
-export function formatMergeRequestId(iid) {
-  if (!iid) return '';
-
-  return `!${iid}`;
-}
-
 export function getContextItemSource(contextItem) {
   return contextItem.metadata.repositoryName || contextItem.metadata.project || null;
 }
 
-function getGitItemIcon(contextItem) {
-  const iconMap = {
-    [CONTEXT_ITEM_LOCAL_GIT_COMMIT]: 'commit',
-    [CONTEXT_ITEM_LOCAL_GIT_DIFF]: 'comparison',
-  };
-  const { gitType } = contextItem.metadata;
-  return iconMap[gitType] || null;
-}
-
-/**
- * Gets the icon name for a given contextItem.
- */
-export function getContextItemIcon(contextItem, category = { icon: null }) {
-  if (contextItem.metadata.icon) {
-    return contextItem.metadata.icon;
-  }
-
-  if (contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT) {
-    const gitIcon = getGitItemIcon(contextItem);
-    if (gitIcon) return gitIcon;
-  }
-
-  if (category.icon) {
-    return category.icon;
-  }
-
-  const iconMap = {
-    [CONTEXT_ITEM_CATEGORY_FILE]: 'document',
-    [CONTEXT_ITEM_CATEGORY_ISSUE]: 'issues',
-    [CONTEXT_ITEM_CATEGORY_MERGE_REQUEST]: 'merge-request',
-    [CONTEXT_ITEM_CATEGORY_LOCAL_GIT]: 'git',
-  };
-
-  return iconMap[contextItem.category] || null;
-}
-
-export function getContextItemTypeLabel(contextItem) {
-  if (contextItem.metadata.subTypeLabel) {
-    return contextItem.metadata.subTypeLabel;
-  }
-
-  if (contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT) {
-    switch (contextItem.metadata.gitType) {
-      case CONTEXT_ITEM_LOCAL_GIT_DIFF:
-        return translate('DuoChatContextItemTypeLabel.GitDiff', 'Local Git repository diff');
-      case CONTEXT_ITEM_LOCAL_GIT_COMMIT:
-        return translate('DuoChatContextItemTypeLabel.GitCommit', 'Local Git repository commit');
-      default:
-        return translate('DuoChatContextItemTypeLabel.GitDefault', 'Local Git repository');
-    }
-  }
-
-  switch (contextItem.category) {
-    case CONTEXT_ITEM_CATEGORY_MERGE_REQUEST:
-      return translate('DuoChatContextItemTypeLabel.MergeRequest', 'Merge request');
-    case CONTEXT_ITEM_CATEGORY_ISSUE:
-      return translate('DuoChatContextItemTypeLabel.Issue', 'Issue');
-    case CONTEXT_ITEM_CATEGORY_FILE:
-      return translate('DuoChatContextItemTypeLabel.File', 'Project file');
-    default:
-      return '';
-  }
-}
-
-/**
- * Gets the secondary text line for a git context item, showing repository and commit ID
- */
-export function formatGitItemSecondaryText(contextItem) {
-  const { repositoryName, commitId } = contextItem.metadata;
-  const separator = commitId ? ' - ' : '';
-  return `${repositoryName}${separator}${commitId || ''}`;
-}
-
-export function getContextItemSecondaryText(contextItem) {
-  if (contextItem.metadata.secondaryText) {
-    return contextItem.metadata.secondaryText;
-  }
-
-  switch (contextItem.category) {
-    case CONTEXT_ITEM_CATEGORY_FILE:
-      return contextItem.metadata.relativePath;
-    case CONTEXT_ITEM_CATEGORY_ISSUE:
-      return formatIssueId(contextItem.metadata.iid);
-    case CONTEXT_ITEM_CATEGORY_MERGE_REQUEST:
-      return formatMergeRequestId(contextItem.metadata.iid);
-    case CONTEXT_ITEM_CATEGORY_LOCAL_GIT:
-      return formatGitItemSecondaryText(contextItem);
-    default:
-      return '';
-  }
-}
-
 /**
  * Calculates a new index within a range. If the new index would fall out of bounds, wraps to the start/end of the range.
  * @param {number} currentIndex - The starting index.

package/src/components/chat/components/duo_chat_conversation/duo_chat_conversation.md

@@ -4,7 +4,7 @@ mark the beginning of the conversation.
 ## Usage
 
 ```html
-<gl-duo-chat-conversation :messages="messages" :show-delimeter="showDelimiter" />
+<duo-chat-conversation :messages="messages" :show-delimeter="showDelimiter" />
 ```
 
 Translations for newChatLabel can be set via the props as documented or via translation configuration:

package/src/components/chat/components/duo_chat_conversation/duo_chat_conversation.vue

@@ -1,9 +1,9 @@
 <script>
 import { translate } from '../../../../utils/i18n';
-import GlDuoChatMessage from '../duo_chat_message/duo_chat_message.vue';
+import DuoChatMessage from '../duo_chat_message/duo_chat_message.vue';
 
 const i18n = {
-  CONVERSATION_NEW_CHAT: translate('GlDuoChatConversation.newChat', 'New chat'),
+  CONVERSATION_NEW_CHAT: translate('DuoChatConversation.newChat', 'New chat'),
 };
 
 const isMessage = (item) => Boolean(item) && item?.role;
@@ -12,9 +12,9 @@ const isMessage = (item) => Boolean(item) && item?.role;
 const itemsValidator = (items) => items.every(isMessage);
 
 export default {
-  name: 'GlDuoChatConversation',
+  name: 'DuoChatConversation',
   components: {
-    GlDuoChatMessage,
+    DuoChatMessage,
   },
   props: {
     /**
@@ -77,7 +77,7 @@ export default {
       <span>{{ $options.i18n.CONVERSATION_NEW_CHAT }}</span>
       <hr class="gl-grow" />
     </div>
-    <gl-duo-chat-message
+    <duo-chat-message
       v-for="(msg, index) in messages"
       :key="`${msg.role}-${index}`"
       :message="msg"

package/src/components/chat/components/duo_chat_loader/duo_chat_loader.scss

@@ -3,7 +3,8 @@
   @apply gl-text-gray-500;
 
   .transition {
-    transition: width 0.5s ease;
+    @include gl-prefers-reduced-motion-transition;
+    transition: width 200ms $gl-easing-out-cubic;
   }
 
   .text-enter {
@@ -11,7 +12,8 @@
   }
 
   .text-enter-active {
-    transition: opacity 1s ease-in; // we intentionally overlap this transition with .text-leave-active by 200ms
+    @include gl-prefers-reduced-motion-transition;
+    transition: opacity 400ms $gl-easing-out-cubic; // we intentionally overlap this transition with .text-leave-active by 200ms
   }
 
   .text-enter-to {
@@ -23,40 +25,11 @@
   }
 
   .text-leave-active {
-    transition: opacity 0.7s linear;
+    @include gl-prefers-reduced-motion-transition;
+    transition: opacity 200ms $gl-easing-out-cubic;
   }
 
   .text-leave-to {
     @apply gl-opacity-0;
   }
-
-  &__dot {
-    display: inline-block;
-    width: 0.3rem;
-    height: 0.3rem;
-    background-color: $gray-200;
-    border-radius: 100%;
-    animation: DuoChatLoading 1400ms ease-in-out infinite;
-    animation-fill-mode: both;
-  }
-
-  &__dot--1 {
-    animation-delay: -0.3s;
-  }
-
-  &__dot--2 {
-    animation-delay: -0.15s;
-  }
-}
-
-@keyframes DuoChatLoading {
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-  }
-
-  40% {
-    transform: scale(1);
-  }
 }