@gitlab/duo-ui 8.3.0 → 8.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/duo-ui",
-  "version": "8.3.0",
+  "version": "8.4.0",
   "description": "Duo UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -71,6 +71,7 @@ export default {
     data-testid="chat-header"
     :class="{
       'gl-z-200': !shouldRenderResizable,
+      'gl-z-1': shouldRenderResizable,
     }"
     class="duo-chat-drawer-header duo-chat-drawer-header-sticky gl-border-0 gl-bg-default !gl-p-0"
   >
@@ -80,7 +81,7 @@ export default {
         data-testid="chat-back-button"
         category="primary"
         size="medium"
-        icon="go-back"
+        icon="history"
         class="gl-mr-3"
         :aria-label="$options.i18n.CHAT_BACK_LABEL"
         @click="$emit('go-back')"

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

@@ -0,0 +1,122 @@
+<script>
+import { GlButton, GlIcon } from '@gitlab/ui';
+import { translate } from '../../../../utils/i18n';
+import { formatDate } from '../../../../utils/date';
+import DuoChatThreadsEmpty from './duo_chat_threads_empty.vue';
+
+const i18n = {
+  CHAT_HISTORY_INFO: translate(
+    'DuoChat.chatHistoryInfo',
+    'Chats with no activity in the last 30 days are deleted.'
+  ),
+  THREAD_DELETE_LABEL: translate('DuoChat.threadDeleteLabel', 'Delete this thread.'),
+};
+
+export default {
+  name: 'DuoChatHistory',
+
+  components: {
+    GlButton,
+    GlIcon,
+    DuoChatThreadsEmpty,
+  },
+
+  props: {
+    threads: {
+      type: Array,
+      required: true,
+    },
+  },
+
+  computed: {
+    formatDate() {
+      return formatDate;
+    },
+
+    groupedThreads() {
+      return this.threads.reduce((threadsGroupedByDate, thread) => {
+        const date = new Date(thread.createdAt);
+        const dateKey = date.toISOString().split('T')[0];
+
+        return {
+          ...threadsGroupedByDate,
+          [dateKey]: [...(threadsGroupedByDate[dateKey] || []), thread],
+        };
+      }, {});
+    },
+
+    hasThreads() {
+      return this.threads.length > 0;
+    },
+  },
+
+  methods: {
+    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');
+    },
+  },
+  i18n,
+};
+</script>
+
+<template>
+  <div class="gl-h-full 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"
+    >
+      <p class="gl-m-0 gl-flex">
+        <gl-icon class="gl-mr-4" name="bulb" />{{ $options.i18n.CHAT_HISTORY_INFO }}
+      </p>
+    </div>
+
+    <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-mb-4">
+          {{ formatDate(date) }}
+        </div>
+
+        <div>
+          <div
+            v-for="thread in threadsForDate"
+            :key="thread.id"
+            class="gl-flex gl-align-center gl-mb-4"
+          >
+            <div
+              tabindex="0"
+              data-testid="chat-threads-thread-box"
+              class="thread-box hover:gl-bg-gray-50 focus:gl-bg-gray-50 gl-text-ellipsis gl-overflow-hidden gl-rounded-base gl-cursor-pointer gl-rounded-base gl-p-4 gl-w-full gl-whitespace-nowrap"
+              @click="onSelectThread(thread)"
+            >
+              {{ thread.title || 'Untitled Chat' }}
+            </div>
+
+            <gl-button
+              data-testid="chat-threads-delete-thread-button"
+              icon="remove"
+              category="tertiary"
+              class="gl-neutral-900 !gl-p-4"
+              size="small"
+              :aria-label="$options.i18n.THREAD_DELETE_LABEL"
+              @click="$emit('delete-thread', thread.id)"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+    <duo-chat-threads-empty v-else />
+  </div>
+</template>

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

@@ -0,0 +1,40 @@
+<script>
+import ScheduleIllustration from '@gitlab/svgs/dist/illustrations/schedule-md.svg';
+import { translate } from '../../../../utils/i18n';
+
+const i18n = {
+  EMPTY_HISTORY_TITLE: translate('DuoChat.emptyHistoryTitle', 'See your chat history'),
+  EMPTY_HISTORY_COPY: translate(
+    'DuoChat.emptyHistoryCopy',
+    'Your previous chats will appear here.'
+  ),
+  EMPTY_HISTORY_ALT: translate(
+    'DuoChat.emptyHistoryAlt',
+    'Clock icon with circular arrow, indicating chat history or time-based functionality'
+  ),
+};
+
+export default {
+  name: 'DuoChatHistoryEmpty',
+
+  i18n,
+  ScheduleIllustration,
+};
+</script>
+
+<template>
+  <div class="gl-h-full gl-flex gl-flex-col gl-align-center 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">
+      {{ $options.i18n.EMPTY_HISTORY_TITLE }}
+    </h3>
+    <p class="gl-align-center" data-testid="empty-state-description">
+      {{ $options.i18n.EMPTY_HISTORY_COPY }}
+    </p>
+  </div>
+</template>