@gitlab/duo-ui 3.0.0 → 3.0.1

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.vue

@@ -5,20 +5,20 @@ import { LOADING_TRANSITION_DURATION } from '../../constants';
 
 export const i18n = {
   LOADER_LOADING_MESSAGE: translate(
-    'GlDuoChatLoader.loaderLoadingMessage',
+    'DuoChatLoader.loaderLoadingMessage',
     '%{tool} is %{transition} an answer'
   ),
   LOADER_LOADING_TRANSITIONS: [
-    translate('GlDuoChatLoader.loaderLoadingTransitionsFinding', 'finding'),
-    translate('GlDuoChatLoader.loaderLoadingTransitionsWorkingOn', 'working on'),
-    translate('GlDuoChatLoader.loaderLoadingTransitionsGenerating', 'generating'),
-    translate('GlDuoChatLoader.loaderLoadingTransitionsProducing', 'producing'),
+    translate('DuoChatLoader.loaderLoadingTransitionsFinding', 'finding'),
+    translate('DuoChatLoader.loaderLoadingTransitionsWorkingOn', 'working on'),
+    translate('DuoChatLoader.loaderLoadingTransitionsGenerating', 'generating'),
+    translate('DuoChatLoader.loaderLoadingTransitionsProducing', 'producing'),
   ],
-  GITLAB_DUO: translate('GlDuoChatLoader.gitlabDuo', 'GitLab Duo'),
+  GITLAB_DUO: translate('DuoChatLoader.gitlabDuo', 'GitLab Duo'),
 };
 
 export default {
-  name: 'GlDuoChatLoader',
+  name: 'DuoChatLoader',
   components: {
     GlSprintf,
     GlAnimatedLoaderIcon,

package/src/components/chat/components/duo_chat_message/duo_chat_message.md

@@ -3,7 +3,7 @@ The component represents a Duo Chat message.
 ## Usage
 
 ```html
-<gl-duo-chat-message :message="message" />
+<duo-chat-message :message="message" />
 ```
 
 ## Pretty rendering message content
@@ -52,7 +52,7 @@ _provided_ by a consumer.
 ## The underlying use of the `GlDuoUserFeedback` component
 
 The component integrates the [`GlDuoUserFeedback`](/story/experimental-duo-user-feedback--default)
-component to track user feedback on the AI-generated responses. Note that the `GlDuoChatMessage`
+component to track user feedback on the AI-generated responses. Note that the `DuoChatMessage`
 component renders the default state of `GlDuoUserFeedback` component, not allowing to override
 the slots in that underlying component.
 

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

@@ -10,7 +10,7 @@ import {
 
 import { sprintf, translate, translatePlural } from '@gitlab/ui/dist/utils/i18n';
 import throttle from 'lodash/throttle';
-import GlDuoChatContextItemSelections from '../duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.vue';
+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';
 
@@ -28,37 +28,37 @@ import {
 
 export const i18n = {
   MODAL: {
-    TITLE: translate('GlDuoChatMessage.modalTitle', 'Give feedback on GitLab Duo Chat'),
+    TITLE: translate('DuoChatMessage.modalTitle', 'Give feedback on GitLab Duo Chat'),
     ALERT_TEXT: translate(
-      'GlDuoChatMessage.modalAlertText',
+      'DuoChatMessage.modalAlertText',
       'GitLab team members cannot view your conversation. Please be as descriptive as possible.'
     ),
-    DID_WHAT: translate('GlDuoChatMessage.modalDidWhat', 'What were you doing?'),
+    DID_WHAT: translate('DuoChatMessage.modalDidWhat', 'What were you doing?'),
     INTERACTION: translate(
-      'GlDuoChatMessage.modalInteraction',
+      'DuoChatMessage.modalInteraction',
       'The situation in which you interacted with GitLab Duo Chat.'
     ),
     IMPROVE_WHAT: translate(
-      'GlDuoChatMessage.modalImproveWhat',
+      'DuoChatMessage.modalImproveWhat',
       'How could the response be improved?'
     ),
     BETTER_RESPONSE: translate(
-      'GlDuoChatMessage.modalBetterResponse',
+      'DuoChatMessage.modalBetterResponse',
       'How the response might better meet your needs.'
     ),
-    MESSAGE_ERROR: translate('GlDuoChatMessage.modalMessageError', 'Error sending the message'),
+    MESSAGE_ERROR: translate('DuoChatMessage.modalMessageError', 'Error sending the message'),
   },
 };
 
 export default {
-  name: 'GlDuoChatMessage',
+  name: 'DuoChatMessage',
   i18n,
   safeHtmlConfigExtension: {
     ADD_TAGS: ['copy-code', 'insert-code-snippet'],
   },
   components: {
     DocumentationSources,
-    GlDuoChatContextItemSelections,
+    DuoChatContextItemSelections,
     GlDuoUserFeedback,
     GlFormGroup,
     GlFormTextarea,
@@ -168,7 +168,7 @@ export default {
 
       if (this.isUserMessage) {
         return translatePlural(
-          'GlDuoChatMessage.SelectedContextItemsTitleUserMessage',
+          'DuoChatMessage.SelectedContextItemsTitleUserMessage',
           'Included reference',
           'Included references'
         )(count);
@@ -176,7 +176,7 @@ export default {
 
       return sprintf(
         translatePlural(
-          'GlDuoChatMessage.SelectedContextItemsTitleAssistantMessage',
+          'DuoChatMessage.SelectedContextItemsTitleAssistantMessage',
           'Used %{count} included reference',
           'Used %{count} included references'
         )(count),
@@ -299,7 +299,7 @@ export default {
       data-testid="error"
     />
     <div ref="content-wrapper" :class="{ 'has-error': error }">
-      <gl-duo-chat-context-item-selections
+      <duo-chat-context-item-selections
         v-if="displaySelectedContextItems && isAssistantMessage"
         :selections="selectedContextItems"
         :title="selectedContextItemsTitle"
@@ -345,7 +345,7 @@ export default {
           </div>
         </template>
       </div>
-      <gl-duo-chat-context-item-selections
+      <duo-chat-context-item-selections
         v-if="displaySelectedContextItems && isUserMessage"
         :selections="selectedContextItems"
         :title="selectedContextItemsTitle"

package/src/components/chat/components/duo_chat_message_sources/duo_chat_message_sources.vue

@@ -5,11 +5,11 @@ import { DOCUMENTATION_SOURCE_TYPES } from '../../constants';
 
 export const i18n = {
   MESSAGE_SOURCE: (count = 1) =>
-    translatePlural('GlDuoChatMessageSources.messageSources', 'Source', 'Sources')(count),
+    translatePlural('DuoChatMessageSources.messageSources', 'Source', 'Sources')(count),
 };
 
 export default {
-  name: 'GlDuoChatMessageSources',
+  name: 'DuoChatMessageSources',
   components: {
     GlIcon,
     GlLink,

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

@@ -2,7 +2,7 @@
 import { GlButton } from '@gitlab/ui';
 
 export default {
-  name: 'GlDuoChatPredefinedPrompts',
+  name: 'DuoChatPredefinedPrompts',
   components: {
     GlButton,
   },

package/src/components/chat/duo_chat.md

@@ -9,7 +9,7 @@ To use the component in its simplest form, import it and add it to the `template
 consumer component.
 
 ```html
-<gl-duo-chat
+<duo-chat
   :title="title"
   :messages="messages"
   :error="error"
@@ -66,7 +66,7 @@ and, in this case, when the message is constantly updating, we rely on a more li
 
 ### Don't use reactivity where unnecessary
 
-The `GlDuoChat` component exposes many properties, as seen below. But not all of those should
+The `DuoChat` component exposes many properties, as seen below. But not all of those should
 be necessarily reactive in the consumer component. The properties that might be static:
 
 - `title`. The title is shown in the head of the component.
@@ -83,7 +83,7 @@ be necessarily reactive in the consumer component. The properties that might be
 ### Set up communication with consumer
 
 ```javascript
-import { GlDuoChat } from '@gitlab/ui';
+import { DuoChat } from '@gitlab/duo-ui';
 
 export default {
   ...
@@ -186,7 +186,7 @@ character.
   }
 <script>
 <template>
-  <gl-duo-chat
+  <duo-chat
     ...
     :slash-commands="slashCommands"
   />