@gitlab/duo-ui 0.1.0

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

@@ -0,0 +1,153 @@
+<script>
+import { GlAlert, GlIcon, GlPopover, GlTruncate } from '@gitlab/ui';
+import { translate } from '@gitlab/ui/dist/utils/i18n';
+
+import {
+  CONTEXT_ITEM_CATEGORY_FILE,
+  CONTEXT_ITEM_CATEGORY_ISSUE,
+  CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+  CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
+} from '../constants';
+import {
+  formatGitItemSecondaryText,
+  formatIssueId,
+  formatMergeRequestId,
+  getContextItemIcon,
+  getContextItemTypeLabel,
+} from '../utils';
+
+export default {
+  name: 'DuoChatContextItemPopover',
+  components: {
+    GlTruncate,
+    GlAlert,
+    GlIcon,
+    GlPopover,
+  },
+  props: {
+    /**
+     * The context contextItem to display in the popover.
+     */
+    contextItem: {
+      type: Object,
+      required: true,
+    },
+    /**
+     * The target element ID for the popover.
+     */
+    target: {
+      type: String,
+      required: true,
+    },
+    /**
+     * The placement of the popover relative to the target.
+     */
+    placement: {
+      type: String,
+      default: 'bottom',
+      required: false,
+    },
+  },
+  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 || ''
+        : null;
+    },
+    filePathArray() {
+      return this.filePath?.split('/');
+    },
+    gitDetails() {
+      return this.contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT
+        ? formatGitItemSecondaryText(this.contextItem)
+        : null;
+    },
+    isEnabled() {
+      return this.contextItem.metadata.enabled !== false;
+    },
+    disabledMessage() {
+      return Array.isArray(this.contextItem.metadata.disabledReasons) &&
+        this.contextItem.metadata.disabledReasons.length > 0
+        ? this.contextItem.metadata.disabledReasons.join(', ')
+        : translate('DuoChatContextItemPopover.DisabledReason', 'This item is disabled');
+    },
+    iconName() {
+      return getContextItemIcon(this.contextItem);
+    },
+    itemTypeLabel() {
+      return getContextItemTypeLabel(this.contextItem);
+    },
+  },
+  methods: {
+    translate,
+  },
+};
+</script>
+<template>
+  <gl-popover
+    :target="target"
+    triggers="hover focus"
+    :placement="placement"
+    :title="title"
+    custom-class="gl-duo-chat-item-popover"
+  >
+    <template #title>
+      <div>
+        <div
+          class="gl-heading-3 gl-mb-1 gl-mt-2 gl-leading-1"
+          data-testid="chat-context-popover-title"
+        >
+          {{ title }}
+        </div>
+        <div v-if="itemTypeLabel" class="gl-font-normal gl-text-subtle">{{ itemTypeLabel }}</div>
+      </div>
+    </template>
+    <div>
+      <div v-if="filePath">
+        <gl-icon name="document" :size="12" variant="subtle" />
+        <span class="gl-break-all">{{ contextItem.metadata.project }}</span>
+        <span v-for="(pathPart, index) in filePathArray" :key="pathPart" class="gl-break-all"
+          >{{ pathPart }}{{ index + 1 < filePathArray.length ? '/' : '' }}</span
+        >
+      </div>
+      <div v-else-if="gitDetails" class="gl-flex gl-items-center" data-testid="git-details">
+        <gl-icon :name="iconName" :size="12" variant="subtle" class="gl-mr-1 gl-shrink-0" />
+        <gl-truncate :text="gitDetails" class="gl-min-w-0" />
+      </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"
+        class="gl-mb-1 gl-mt-3 gl-p-4 gl-text-sm"
+        data-testid="chat-context-popover-disabled"
+        :dismissible="false"
+        :show-icon="false"
+      >
+        {{ disabledMessage }}
+      </gl-alert>
+    </div>
+  </gl-popover>
+</template>

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

@@ -0,0 +1,180 @@
+<script>
+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 { 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';
+
+export default {
+  name: 'GlDuoChatContextItemSelections',
+  components: {
+    GlTruncate,
+    GlDuoChatContextItemDetailsModal,
+    GlIcon,
+    GlDuoChatContextItemPopover,
+    GlToken,
+  },
+  props: {
+    /**
+     * Array of selected context items.
+     */
+    selections: {
+      type: Array,
+      required: true,
+      validator: contextItemsValidator,
+    },
+    /**
+     * The title to display for the selections.
+     */
+    title: {
+      type: String,
+      required: true,
+    },
+    /**
+     * Whether the selections should be collapsed by default.
+     */
+    defaultCollapsed: {
+      type: Boolean,
+      required: true,
+    },
+    /**
+     * Whether the selections can be removed.
+     */
+    removable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: 'assistant',
+    },
+  },
+  data() {
+    return {
+      isCollapsed: this.defaultCollapsed,
+      selectionsId: uniqueId(),
+      previewContextItemId: null,
+    };
+  },
+  computed: {
+    collapseIconName() {
+      return this.isCollapsed ? 'chevron-right' : 'chevron-down';
+    },
+    variantClasses() {
+      if (this.variant === 'user') {
+        return 'gl-mb-0 gl-mt-2 gl-text-blue-700';
+      }
+      return 'gl-mb-2 gl-text-gray-500';
+    },
+    tokenVariantClasses() {
+      if (this.variant === 'user') {
+        return 'gl-bg-blue-50 gl-text-blue-600';
+      }
+      return '';
+    },
+    contextItemPreview() {
+      return this.selections.find((item) => item.id === this.previewContextItemId);
+    },
+  },
+  methods: {
+    getContextItemIcon,
+    toggleCollapse() {
+      this.isCollapsed = !this.isCollapsed;
+    },
+    onRemoveItem(contextItem) {
+      /**
+       * Emitted when a context contextItem should be removed.
+       * @property {Object} item - The context contextItem to be removed
+       */
+      this.$emit('remove', contextItem);
+    },
+    onOpenItem(event, contextItem) {
+      const isKeypressOnCloseButton =
+        event.type === 'keydown' && event.target !== event.currentTarget;
+      if (isKeypressOnCloseButton) {
+        // don't respond to events triggered by the gl-token children (e.g. the close button)
+        return;
+      }
+
+      if (!this.canOpen(contextItem)) {
+        return;
+      }
+      if (!contextItem.content) {
+        this.$emit('get-content', contextItem);
+      }
+      this.previewContextItemId = contextItem.id;
+    },
+    canOpen(contextItem) {
+      return [CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_FILE].includes(
+        contextItem.category
+      );
+    },
+    onClosePreview() {
+      this.previewContextItemId = null;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-flex gl-flex-col" :class="variantClasses">
+    <button
+      class="gl-flex gl-w-full gl-items-center gl-border-0 gl-bg-transparent gl-p-0 gl-text-left gl-text-xs gl-lowercase gl-text-inherit"
+      data-testid="chat-context-selections-title"
+      type="button"
+      @click="toggleCollapse"
+    >
+      <gl-icon :name="collapseIconName" data-testid="chat-context-collapse-icon" /> {{ title }}
+    </button>
+
+    <div
+      v-show="!isCollapsed"
+      class="gl-mt-1 gl-flex gl-grow gl-flex-wrap"
+      data-testid="chat-context-tokens-wrapper"
+    >
+      <gl-token
+        v-for="item in selections"
+        :id="`context-item-${item.id}-${selectionsId}-token`"
+        :key="item.id"
+        :view-only="!removable"
+        variant="default"
+        class="gl-mb-2 gl-mr-2 gl-max-w-full"
+        :class="tokenVariantClasses"
+        :tabindex="canOpen(item) ? 0 : -1"
+        :role="canOpen(item) ? 'button' : undefined"
+        @click="onOpenItem($event, item)"
+        @keydown.enter="onOpenItem($event, item)"
+        @keydown.space.prevent="onOpenItem($event, item)"
+        @close="onRemoveItem(item)"
+      >
+        <div
+          :id="`context-item-${item.id}-${selectionsId}`"
+          class="gl-flex gl-min-w-0 gl-items-center"
+        >
+          <gl-icon
+            v-if="getContextItemIcon(item)"
+            :name="getContextItemIcon(item)"
+            :size="12"
+            class="gl-mr-1"
+          />
+          <gl-truncate :text="item.metadata.title" position="middle" />
+        </div>
+        <gl-duo-chat-context-item-popover
+          :context-item="item"
+          :target="`context-item-${item.id}-${selectionsId}-token`"
+          placement="bottom"
+          @show-git-diff="onOpenItem(item)"
+        />
+      </gl-token>
+    </div>
+    <gl-duo-chat-context-item-details-modal
+      v-if="contextItemPreview"
+      :context-item="contextItemPreview"
+      @close="onClosePreview"
+    />
+  </div>
+</template>

package/src/components/experimental/duo/chat/components/duo_chat_context/mock_context_data.js

@@ -0,0 +1,214 @@
+import {
+  CONTEXT_ITEM_CATEGORY_ISSUE,
+  CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
+  CONTEXT_ITEM_CATEGORY_FILE,
+  CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+} from './constants';
+
+export const MOCK_CATEGORIES = [
+  { label: 'Files', value: CONTEXT_ITEM_CATEGORY_FILE, icon: 'document' },
+  { label: 'Local Git', value: CONTEXT_ITEM_CATEGORY_LOCAL_GIT, icon: 'git' },
+  { label: 'Issues', value: CONTEXT_ITEM_CATEGORY_ISSUE, icon: 'issues' },
+  { label: 'Merge Requests', value: CONTEXT_ITEM_CATEGORY_MERGE_REQUEST, icon: 'merge-request' },
+];
+
+export function getMockCategory(categoryValue) {
+  return MOCK_CATEGORIES.find((cat) => cat.value === categoryValue);
+}
+
+export const MOCK_CONTEXT_FILE_CONTENT = `export function waterPlants() {
+    console.log('sprinkle');
+}`;
+
+export const MOCK_CONTEXT_FILE_DIFF_CONTENT = `diff --git a/src/plants/strawberry.ts b/src/plants/strawberry.ts
+index 1234567..8901234 100644
+--- a/src/plants/strawberry.ts
++++ b/src/plants/strawberry.ts
+@@ -1,4 +1,4 @@
+ export const strawberry = {
+   name: 'Strawberry',
+-  waterNeeds: 'moderate',
++  waterNeeds: 'high',
+ };`;
+
+export const MOCK_CONTEXT_ITEM_FILE = {
+  id: '123e4567-e89b-12d3-a456-426614174000',
+  category: CONTEXT_ITEM_CATEGORY_FILE,
+  metadata: {
+    enabled: true,
+    title: 'strawberry.ts',
+    project: 'example/garden',
+    relativePath: 'src/plants/strawberry.ts',
+  },
+};
+
+export const MOCK_CONTEXT_ITEM_FILE_DISABLED = {
+  id: '323e4567-e89b-12d3-a456-426614174002',
+  category: CONTEXT_ITEM_CATEGORY_FILE,
+  metadata: {
+    enabled: false,
+    title: 'motorbike.cs',
+    project: 'example/vehicles',
+    relativePath: '/src/VehicleFoo/motorbike.cs',
+  },
+};
+const mockFiles = [
+  MOCK_CONTEXT_ITEM_FILE,
+  {
+    id: '223e4567-e89b-12d3-a456-426614174001',
+    category: CONTEXT_ITEM_CATEGORY_FILE,
+    metadata: {
+      enabled: true,
+      title: 'potato.ts',
+      project: 'example/garden',
+      relativePath: '/src/plants/potato.ts',
+    },
+  },
+  MOCK_CONTEXT_ITEM_FILE_DISABLED,
+];
+
+export const MOCK_CONTEXT_ITEM_ISSUE = {
+  id: '423e4567-e89b-12d3-a456-426614174003',
+  category: CONTEXT_ITEM_CATEGORY_ISSUE,
+  metadata: {
+    enabled: true,
+    title: 'Implement watering schedule',
+    project: 'example/garden',
+    iid: 1234,
+  },
+};
+export const MOCK_CONTEXT_ITEM_ISSUE_DISABLED = {
+  id: 'c463fb31-2a4c-4f8e-a609-97230ac48ae5',
+  category: CONTEXT_ITEM_CATEGORY_ISSUE,
+
+  metadata: {
+    enabled: false,
+    disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
+    title: `Fix vehicle colours and make them look real nice and colourful won't that be wonderful wow this issue title is really long I sure hope it's gonna wrap OK`,
+    project: 'example/vehicle',
+    iid: 91011,
+  },
+};
+
+const mockIssues = [
+  MOCK_CONTEXT_ITEM_ISSUE,
+  {
+    id: '523e4567-e89b-12d3-a456-426614174004',
+    category: CONTEXT_ITEM_CATEGORY_ISSUE,
+    metadata: {
+      enabled: true,
+      title: 'Refactor plant growth rates',
+      project: 'example/garden',
+      iid: 5678,
+    },
+  },
+  MOCK_CONTEXT_ITEM_ISSUE_DISABLED,
+];
+
+export const MOCK_CONTEXT_ITEM_MERGE_REQUEST = {
+  id: '623e4567-e89b-12d3-a456-426614174005',
+  category: CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
+  metadata: {
+    enabled: true,
+    title: 'Improve database performance',
+    project: 'example/garden',
+    iid: 1122,
+  },
+};
+export const MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED = {
+  id: '4eb665fc-e5e1-49b0-9789-2a16964e461a',
+  category: CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
+  metadata: {
+    enabled: false,
+    disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
+    title: 'Fix broken layout at small viewports',
+    project: 'example/vehicle',
+    iid: 5566,
+  },
+};
+
+const mockMergeRequests = [
+  MOCK_CONTEXT_ITEM_MERGE_REQUEST,
+  {
+    id: '723e4567-e89b-12d3-a456-426614174006',
+    category: CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
+    metadata: {
+      enabled: false,
+      disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
+      title: 'Add vehicle registration details',
+      project: 'example/vehicle',
+      iid: 3344,
+    },
+  },
+  MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED,
+];
+
+export const MOCK_CONTEXT_ITEM_GIT_DIFF = {
+  id: '6d88b466-0c38-48d6-b271-deda47f97cee',
+  category: CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+  metadata: {
+    enabled: true,
+    title: 'Current working changes',
+    commitId: 'main',
+    repositoryName: 'example/garden',
+    gitType: 'diff',
+  },
+};
+export const MOCK_CONTEXT_ITEM_GIT_COMMIT = {
+  id: '20f8caf94cb8f5e5f9dbd1a9ac32702321de201b',
+  category: CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+  metadata: {
+    enabled: true,
+    title: 'fix: some bug fix commit',
+    commitId: '20f8caf94cb8f5e5f9dbd1a9ac32702321de201b',
+    repositoryName: 'example/garden',
+    gitType: 'commit',
+  },
+};
+
+const mockGitItems = [
+  MOCK_CONTEXT_ITEM_GIT_DIFF,
+  {
+    id: 'diff-example/garden',
+    category: CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+    metadata: {
+      enabled: true,
+      title: 'Diff from default branch',
+      commitId: 'main',
+      repositoryName: 'example/garden',
+      gitType: 'diff',
+    },
+  },
+  MOCK_CONTEXT_ITEM_GIT_COMMIT,
+  {
+    id: '32b9b56b6de75b32909986755fbc470f20fb6fc0',
+    category: CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+    metadata: {
+      enabled: true,
+      title: 'feat: add cool new feature',
+      commitId: '32b9b56b6de75b32909986755fbc470f20fb6fc0',
+      repositoryName: 'example/garden',
+      gitType: 'commit',
+    },
+  },
+  {
+    id: '775d7efdce25c1af48c55abcadbefd1f181b92ce',
+    category: CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+    metadata: {
+      enabled: true,
+      title: 'fix: stop foo from bar when baz because customers ding',
+      commitId: '775d7efdce25c1af48c55abcadbefd1f181b92ce',
+      repositoryName: 'example/garden',
+      gitType: 'commit',
+    },
+  },
+];
+
+export const getMockContextItems = () => {
+  const allItems = [...mockFiles, ...mockGitItems, ...mockIssues, ...mockMergeRequests];
+
+  // put disabled items in the back
+  const disabledItems = allItems.filter((item) => !item.metadata.enabled);
+  const enabledItems = allItems.filter((item) => item.metadata.enabled);
+  return [...enabledItems, ...disabledItems];
+};

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

@@ -0,0 +1,129 @@
+import { translate } from '@gitlab/ui/dist/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);
+}
+
+export function categoriesValidator(categories) {
+  return Array.isArray(categories) && categories.every((category) => categoryValidator(category));
+}
+
+function disabledReasonsValidator(disabledReasons) {
+  return (
+    disabledReasons === undefined ||
+    (Array.isArray(disabledReasons) &&
+      disabledReasons.every((reason) => typeof reason === 'string'))
+  );
+}
+
+export function contextItemValidator(item) {
+  return Boolean(
+    item &&
+      item.id &&
+      item.category &&
+      item.metadata &&
+      typeof item.metadata === 'object' &&
+      typeof item.metadata.enabled === 'boolean' &&
+      disabledReasonsValidator(item.metadata.disabledReasons)
+  );
+}
+
+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}`;
+}
+
+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.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.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 || ''}`;
+}
+
+/**
+ * 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.
+ * @param {number} step - The number of steps to move (positive or negative).
+ * @param {number} totalLength - The total number of items in the range.
+ * @returns {number} The new index.
+ */
+export function wrapIndex(currentIndex, step, totalLength) {
+  return (currentIndex + step + totalLength) % totalLength;
+}

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

@@ -0,0 +1,18 @@
+A component that lists messages in a conversation, and presents an optional delimiter to
+mark the beginning of the conversation.
+
+## Usage
+
+```html
+<gl-duo-chat-conversation :messages="messages" :show-delimeter="showDelimiter" />
+```
+
+Translations for newChatLabel can be set via the props as documented or via translation configuration:
+
+```js
+setConfigs({
+  translations: {
+    'GlDuoWorkflowPrompt.newChat': __('New chat'),
+  },
+});
+```