@gitlab/duo-ui 8.3.0 → 8.5.0

package/src/components/chat/duo_chat.vue

@@ -25,17 +25,20 @@ import {
   CHAT_INCLUDE_MESSAGE,
   MESSAGE_MODEL_ROLES,
 } from './constants';
+import { VIEW_TYPES } from './components/duo_chat_header/constants';
 import DuoChatLoader from './components/duo_chat_loader/duo_chat_loader.vue';
 import DuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue';
 import DuoChatConversation from './components/duo_chat_conversation/duo_chat_conversation.vue';
+import DuoChatHeader from './components/duo_chat_header/duo_chat_header.vue';
+import DuoChatThreads from './components/duo_chat_threads/duo_chat_threads.vue';
 
 export const i18n = {
   CHAT_DEFAULT_TITLE: translate('DuoChat.chatDefaultTitle', 'GitLab Duo Chat'),
+  CHAT_HISTORY_TITLE: translate('GlDuoChat.chatHistoryTitle', 'Chat history'),
   CHAT_DISCLAMER: translate(
     'GlDuoChat.chatDisclamer',
     'Responses may be inaccurate. Verify before use.'
   ),
-  CHAT_CLOSE_LABEL: translate('DuoChat.chatCloseLabel', 'Close the Code Explanation'),
   CHAT_EMPTY_STATE_TITLE: translate(
     'DuoChat.chatEmptyStateTitle',
     '👋 I am GitLab Duo Chat, your personal AI-powered assistant. How can I help you today?'
@@ -72,6 +75,17 @@ const itemsValidator = (items) => items.every(isMessage);
 // eslint-disable-next-line unicorn/no-array-callback-reference
 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');
+
+// eslint-disable-next-line unicorn/no-array-callback-reference
+const threadListValidator = (threads) => threads.every(isThread);
+
 export default {
   name: 'DuoChat',
   components: {
@@ -84,6 +98,8 @@ export default {
     DuoChatLoader,
     DuoChatPredefinedPrompts,
     DuoChatConversation,
+    DuoChatHeader,
+    DuoChatThreads,
     GlCard,
     GlDropdownItem,
     VueResizable,
@@ -138,6 +154,23 @@ export default {
       default: () => [],
       validator: itemsValidator,
     },
+    /**
+     * The ID of the active thread (if any).
+     */
+    activeThreadId: {
+      type: String,
+      required: false,
+      default: () => '',
+    },
+    /**
+     * The chat page that should be shown.
+     */
+    multiThreadedView: {
+      type: String,
+      required: false,
+      default: VIEW_TYPES.LIST,
+      validator: (value) => [VIEW_TYPES.LIST, VIEW_TYPES.CHAT].includes(value),
+    },
     /**
      * Array of RequestIds that have been canceled.
      */
@@ -154,6 +187,16 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * Array of messages to display in the chat.
+     */
+    threadList: {
+      type: Array,
+      required: false,
+      default: () => [],
+      validator: threadListValidator,
+    },
+
     /**
      * Whether the chat is currently fetching a response from AI.
      */
@@ -236,6 +279,14 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * Whether the chat is running in multi-threaded mode
+     */
+    isMultithreaded: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -247,9 +298,13 @@ export default {
       compositionJustEnded: false,
       contextItemsMenuIsOpen: false,
       contextItemMenuRef: null,
+      currentView: this.multiThreadedView,
     };
   },
   computed: {
+    shouldShowThreadList() {
+      return this.isMultithreaded && this.currentView === VIEW_TYPES.LIST;
+    },
     withSlashCommands() {
       return this.slashCommands.length > 0;
     },
@@ -331,6 +386,9 @@ export default {
     },
   },
   watch: {
+    multiThreadedView(newView) {
+      this.currentView = newView;
+    },
     isLoading(newVal) {
       if (!newVal && !this.isStreaming) {
         this.displaySubmitButton = true; // Re-enable submit button when loading stops
@@ -363,6 +421,12 @@ export default {
   },
 
   methods: {
+    onGoBack() {
+      this.$emit('back-to-list');
+    },
+    onNewChat() {
+      this.$emit('new-chat');
+    },
     updateSize(e) {
       this.$emit('chat-resize', e);
     },
@@ -551,6 +615,20 @@ export default {
     setContextItemsMenuRef(ref) {
       this.contextItemMenuRef = ref;
     },
+    onSelectThread(thread) {
+      /**
+       * Emitted when a thread is selected from the history.
+       * @param {Object} thread The selected thread object
+       */
+      this.$emit('thread-selected', thread);
+    },
+    onDeleteThread(threadId) {
+      /**
+       * Emitted when a thread is deleted from the history.
+       * @param {String} threadId The ID of the thread to delete
+       */
+      this.$emit('delete-thread', threadId);
+    },
   },
   i18n,
 };
@@ -585,184 +663,177 @@ export default {
       role="complementary"
       data-testid="chat-component"
     >
-      <header
+      <duo-chat-header
         v-if="showHeader"
-        data-testid="chat-header"
-        :class="{
-          'gl-z-200': !shouldRenderResizable,
-        }"
-        class="duo-chat-drawer-header duo-chat-drawer-header-sticky gl-border-0 gl-bg-default !gl-p-0"
+        :active-thread-id="activeThreadId"
+        :title="
+          isMultithreaded && currentView === 'list' ? $options.i18n.CHAT_HISTORY_TITLE : title
+        "
+        :error="error"
+        :is-multithreaded="isMultithreaded"
+        :current-view="currentView"
+        :should-render-resizable="shouldRenderResizable"
+        :badge-type="isMultithreaded ? null : badgeType"
+        @go-back="onGoBack"
+        @new-chat="onNewChat"
+        @close="hideChat"
       >
-        <div class="drawer-title gl-flex gl-items-center gl-justify-start gl-p-5">
-          <h3 class="gl-my-0 gl-text-size-h2">{{ title }}</h3>
-          <gl-experiment-badge v-if="badgeType" :type="badgeType" container-id="chat-component" />
-          <gl-button
-            category="tertiary"
-            variant="default"
-            icon="close"
-            size="small"
-            class="gl-ml-auto"
-            data-testid="chat-close-button"
-            :aria-label="$options.i18n.CHAT_CLOSE_LABEL"
-            @click="hideChat"
-          />
-        </div>
-
-        <!--
-        @slot Subheader to be rendered right after the title. It is sticky and stays on top of the chat no matter the number of messages.
-      -->
-        <slot name="subheader"></slot>
+        <template #subheader>
+          <slot name="subheader"></slot>
+        </template>
+      </duo-chat-header>
 
-        <!-- Ensure that the global error is not scrolled away -->
-        <gl-alert
-          v-if="error"
-          key="error"
-          :dismissible="false"
-          variant="danger"
-          class="!gl-pl-9"
-          role="alert"
-          data-testid="chat-error"
+      <div v-if="shouldShowThreadList" class="gl-h-full">
+        <duo-chat-threads
+          :threads="threadList"
+          @new-chat="onNewChat"
+          @select-thread="onSelectThread"
+          @delete-thread="onDeleteThread"
+          @close="hideChat"
+        />
+      </div>
+      <span v-else class="gl-h-full gl-flex gl-flex-col gl-justify-end">
+        <div
+          class="duo-chat-drawer-body gl-bg-default"
+          data-testid="chat-history"
+          @scroll="handleScrollingTrottled"
         >
-          <span v-safe-html="error"></span>
-        </gl-alert>
-      </header>
-
-      <div
-        class="duo-chat-drawer-body gl-bg-default"
-        data-testid="chat-history"
-        @scroll="handleScrollingTrottled"
-      >
-        <transition-group
-          tag="section"
-          name="message"
-          class="duo-chat-history gl-flex gl-flex-col gl-justify-end"
-          :class="[
-            {
-              'gl-h-full': !hasMessages,
-              'force-scroll-bar': hasMessages,
-            },
-          ]"
+          <transition-group
+            tag="section"
+            name="message"
+            class="duo-chat-history gl-flex gl-flex-col gl-justify-end"
+            :class="[
+              {
+                'gl-h-full': !hasMessages,
+                'force-scroll-bar': hasMessages,
+              },
+            ]"
+          >
+            <duo-chat-conversation
+              v-for="(conversation, index) in conversations"
+              :key="`conversation-${index}`"
+              :enable-code-insertion="enableCodeInsertion"
+              :messages="conversation"
+              :canceled-request-ids="canceledRequestIds"
+              :show-delimiter="index > 0"
+              @track-feedback="onTrackFeedback"
+              @insert-code-snippet="onInsertCodeSnippet"
+              @copy-code-snippet="onCopyCodeSnippet"
+              @get-context-item-content="onGetContextItemContent"
+            />
+            <template v-if="!hasMessages && !isLoading">
+              <div
+                key="empty-state-message"
+                class="duo-chat-message gl-rounded-bl-none gl-border-1 gl-border-solid gl-border-gray-50 gl-bg-gray-10 gl-p-4 gl-leading-20 gl-text-gray-900 gl-break-anywhere"
+                data-testid="gl-duo-chat-empty-state"
+              >
+                <p
+                  v-if="emptyStateTitle"
+                  data-testid="gl-duo-chat-empty-state-title"
+                  class="gl-m-0"
+                >
+                  {{ emptyStateTitle }}
+                </p>
+                <duo-chat-predefined-prompts
+                  key="predefined-prompts"
+                  :prompts="predefinedPrompts"
+                  @click="sendPredefinedPrompt"
+                />
+              </div>
+            </template>
+            <duo-chat-loader v-if="isLoading" key="loader" :tool-name="toolName" />
+            <div key="anchor" ref="anchor" class="scroll-anchor"></div>
+          </transition-group>
+        </div>
+        <footer
+          v-if="isChatAvailable"
+          data-testid="chat-footer"
+          class="duo-chat-drawer-footer duo-chat-drawer-footer-sticky gl-border-0 gl-bg-default gl-pb-3"
+          :class="{ 'duo-chat-drawer-body-scrim-on-footer': !scrolledToBottom }"
         >
-          <duo-chat-conversation
-            v-for="(conversation, index) in conversations"
-            :key="`conversation-${index}`"
-            :enable-code-insertion="enableCodeInsertion"
-            :messages="conversation"
-            :canceled-request-ids="canceledRequestIds"
-            :show-delimiter="index > 0"
-            @track-feedback="onTrackFeedback"
-            @insert-code-snippet="onInsertCodeSnippet"
-            @copy-code-snippet="onCopyCodeSnippet"
-            @get-context-item-content="onGetContextItemContent"
-          />
-          <template v-if="!hasMessages && !isLoading">
-            <div
-              key="empty-state-message"
-              class="duo-chat-message gl-rounded-bl-none gl-border-1 gl-border-solid gl-border-subtle gl-bg-subtle gl-p-4 gl-leading-20 gl-text-primary gl-break-anywhere"
-              data-testid="gl-duo-chat-empty-state"
-            >
-              <p v-if="emptyStateTitle" data-testid="gl-duo-chat-empty-state-title" class="gl-m-0">
-                {{ emptyStateTitle }}
-              </p>
-              <duo-chat-predefined-prompts
-                key="predefined-prompts"
-                :prompts="predefinedPrompts"
-                @click="sendPredefinedPrompt"
-              />
-            </div>
-          </template>
-          <duo-chat-loader v-if="isLoading" key="loader" :tool-name="toolName" />
-          <div key="anchor" ref="anchor" class="scroll-anchor"></div>
-        </transition-group>
-      </div>
-      <footer
-        v-if="isChatAvailable"
-        data-testid="chat-footer"
-        class="duo-chat-drawer-footer duo-chat-drawer-footer-sticky 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">
-          <div class="gl-relative gl-max-w-full">
-            <!--
+          <gl-form data-testid="chat-prompt-form" @submit.stop.prevent="sendChatPrompt">
+            <div class="gl-relative gl-max-w-full">
+              <!--
             @slot For integrating `<gl-context-items-menu>` component if pinned-context should be available. The following scopedSlot properties are provided: `isOpen`, `onClose`, `setRef`, `focusPrompt`, which should be passed to the `<gl-context-items-menu>` component when rendering, e.g. `<template #context-items-menu="{ isOpen, onClose, setRef, focusPrompt }">` `<duo-chat-context-item-menu :ref="setRef" :open="isOpen" @close="onClose" @focus-prompt="focusPrompt" ...`
           -->
-            <slot
-              name="context-items-menu"
-              :is-open="contextItemsMenuIsOpen"
-              :on-close="closeContextItemsMenuOpen"
-              :set-ref="setContextItemsMenuRef"
-              :focus-prompt="focusChatInput"
-            ></slot>
-          </div>
+              <slot
+                name="context-items-menu"
+                :is-open="contextItemsMenuIsOpen"
+                :on-close="closeContextItemsMenuOpen"
+                :set-ref="setContextItemsMenuRef"
+                :focus-prompt="focusChatInput"
+              ></slot>
+            </div>
 
-          <gl-form-input-group>
-            <div
-              class="duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-align-top"
-              :data-value="prompt"
-            >
-              <gl-card
-                v-if="shouldShowSlashCommands"
-                ref="commands"
-                class="slash-commands !gl-absolute gl-w-full -gl-translate-y-full gl-list-none gl-pl-0 gl-shadow-md"
-                body-class="!gl-p-2"
+            <gl-form-input-group>
+              <div
+                class="duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-align-top"
+                :data-value="prompt"
               >
-                <gl-dropdown-item
-                  v-for="(command, index) in filteredSlashCommands"
-                  :key="command.name"
-                  :class="{ 'active-command': index === activeCommandIndex }"
-                  @mouseenter.native="activeCommandIndex = index"
-                  @click="selectSlashCommand(index)"
+                <gl-card
+                  v-if="shouldShowSlashCommands"
+                  ref="commands"
+                  class="slash-commands !gl-absolute gl-w-full -gl-translate-y-full gl-list-none gl-pl-0 gl-shadow-md"
+                  body-class="!gl-p-2"
                 >
-                  <span class="gl-flex gl-justify-between">
-                    <span class="gl-block">{{ command.name }}</span>
-                    <small class="gl-pl-3 gl-text-right gl-italic gl-text-subtle">{{
-                      command.description
-                    }}</small>
-                  </span>
-                </gl-dropdown-item>
-              </gl-card>
+                  <gl-dropdown-item
+                    v-for="(command, index) in filteredSlashCommands"
+                    :key="command.name"
+                    :class="{ 'active-command': index === activeCommandIndex }"
+                    @mouseenter.native="activeCommandIndex = index"
+                    @click="selectSlashCommand(index)"
+                  >
+                    <span class="gl-flex gl-justify-between">
+                      <span class="gl-block">{{ command.name }}</span>
+                      <small class="gl-pl-3 gl-text-right gl-italic gl-text-subtle">{{
+                        command.description
+                      }}</small>
+                    </span>
+                  </gl-dropdown-item>
+                </gl-card>
 
-              <gl-form-textarea
-                ref="prompt"
-                v-model="prompt"
-                data-testid="chat-prompt-input"
-                class="gl-absolute !gl-h-full gl-rounded-br-none gl-rounded-tr-none !gl-bg-transparent !gl-py-4 !gl-shadow-none"
-                :class="{ 'gl-truncate': !prompt }"
-                :placeholder="inputPlaceholder"
-                autofocus
-                @keydown.enter.exact.native.prevent
-                @keyup.native="onInputKeyup"
-                @compositionend="compositionEnd"
-              />
-            </div>
-            <template #append>
-              <gl-button
-                v-if="displaySubmitButton"
-                icon="paper-airplane"
-                category="primary"
-                variant="confirm"
-                class="!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-full"
-                type="submit"
-                data-testid="chat-prompt-submit-button"
-                :aria-label="$options.i18n.CHAT_SUBMIT_LABEL"
-              />
-              <gl-button
-                v-else
-                icon="stop"
-                category="primary"
-                variant="default"
-                class="!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-full"
-                data-testid="chat-prompt-cancel-button"
-                :aria-label="$options.i18n.CHAT_CANCEL_LABEL"
-                @click="cancelPrompt"
-              />
-            </template>
-          </gl-form-input-group>
-        </gl-form>
-        <p class="gl-mb-0 gl-mt-3 gl-px-4 gl-text-sm gl-text-secondary">
-          {{ $options.i18n.CHAT_DISCLAMER }}
-        </p>
-      </footer>
+                <gl-form-textarea
+                  ref="prompt"
+                  v-model="prompt"
+                  data-testid="chat-prompt-input"
+                  class="gl-absolute !gl-h-full gl-rounded-br-none gl-rounded-tr-none !gl-bg-transparent !gl-py-4 !gl-shadow-none"
+                  :class="{ 'gl-truncate': !prompt }"
+                  :placeholder="inputPlaceholder"
+                  autofocus
+                  @keydown.enter.exact.native.prevent
+                  @keyup.native="onInputKeyup"
+                  @compositionend="compositionEnd"
+                />
+              </div>
+              <template #append>
+                <gl-button
+                  v-if="displaySubmitButton"
+                  icon="paper-airplane"
+                  category="primary"
+                  variant="confirm"
+                  class="!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-full"
+                  type="submit"
+                  data-testid="chat-prompt-submit-button"
+                  :aria-label="$options.i18n.CHAT_SUBMIT_LABEL"
+                />
+                <gl-button
+                  v-else
+                  icon="stop"
+                  category="primary"
+                  variant="default"
+                  class="!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-full"
+                  data-testid="chat-prompt-cancel-button"
+                  :aria-label="$options.i18n.CHAT_CANCEL_LABEL"
+                  @click="cancelPrompt"
+                />
+              </template>
+            </gl-form-input-group>
+          </gl-form>
+          <p class="gl-mb-0 gl-mt-3 gl-px-4 gl-text-sm gl-text-secondary">
+            {{ $options.i18n.CHAT_DISCLAMER }}
+          </p>
+        </footer>
+      </span>
     </aside>
   </component>
 </template>

package/src/components/chat/mock_data.js

@@ -176,3 +176,86 @@ export const INCLUDE_SLASH_COMMAND = {
   name: CHAT_INCLUDE_MESSAGE,
   description: 'Include additional context in the conversation.',
 };
+
+export const THREADLIST = [
+  {
+    __typename: 'AiConversationsThread',
+    id: 'gid://gitlab/Ai::Conversation::Thread/14',
+    lastUpdatedAt: '2025-01-31T11:12:05Z',
+    createdAt: '2025-01-31T11:12:00Z',
+    conversationType: 'DUO_CHAT',
+    title: 'On the Proper Filing of Form B-789 in Triplicate',
+  },
+  {
+    __typename: 'AiConversationsThread',
+    id: 'gid://gitlab/Ai::Conversation::Thread/13',
+    lastUpdatedAt: '2025-01-31T14:30:42Z',
+    createdAt: '2025-01-31T14:30:36Z',
+    conversationType: 'DUO_CHAT',
+    title: 'The Case of the Missing Permission Slip',
+  },
+  {
+    __typename: 'AiConversationsThread',
+    id: 'gid://gitlab/Ai::Conversation::Thread/12',
+    lastUpdatedAt: '2025-01-31T14:30:08Z',
+    createdAt: '2025-01-31T14:30:03Z',
+    conversationType: 'DUO_CHAT',
+    title: 'Regarding the Metamorphosis of Code Review #2187',
+  },
+  {
+    __typename: 'AiConversationsThread',
+    id: 'gid://gitlab/Ai::Conversation::Thread/11',
+    lastUpdatedAt: '2025-01-24T14:29:51Z',
+    createdAt: '2025-01-24T14:29:36Z',
+    conversationType: 'DUO_CHAT',
+    title: "An Investigation into the Disappearance of Yesterday's Commits",
+  },
+  {
+    __typename: 'AiConversationsThread',
+    id: 'gid://gitlab/Ai::Conversation::Thread/10',
+    lastUpdatedAt: '2025-01-24T14:29:25Z',
+    createdAt: '2025-01-24T14:28:50Z',
+    conversationType: 'DUO_CHAT',
+    title: 'The Curious Incident of the Bug in the Runtime',
+  },
+  {
+    __typename: 'AiConversationsThread',
+    id: 'gid://gitlab/Ai::Conversation::Thread/9',
+    lastUpdatedAt: '2025-01-15T14:24:30Z',
+    createdAt: '2025-01-15T14:24:26Z',
+    conversationType: 'DUO_CHAT',
+    title: 'Notes on the Inexplicable Behavior of the Legacy System',
+  },
+  {
+    __typename: 'AiConversationsThread',
+    id: 'gid://gitlab/Ai::Conversation::Thread/8',
+    lastUpdatedAt: '2025-01-15T14:24:21Z',
+    createdAt: '2025-01-15T14:24:17Z',
+    conversationType: 'DUO_CHAT',
+    title: 'The Trial of the Undefined Variable',
+  },
+  {
+    __typename: 'AiConversationsThread',
+    id: 'gid://gitlab/Ai::Conversation::Thread/7',
+    lastUpdatedAt: '2025-01-15T14:12:13Z',
+    createdAt: '2025-01-15T14:12:08Z',
+    conversationType: 'DUO_CHAT',
+    title: 'Waiting for the Database Response',
+  },
+  {
+    __typename: 'AiConversationsThread',
+    id: 'gid://gitlab/Ai::Conversation::Thread/6',
+    lastUpdatedAt: '2025-01-08T14:11:46Z',
+    createdAt: '2025-01-08T14:11:38Z',
+    conversationType: 'DUO_CHAT',
+    title: 'The Endless Corridor of Dependencies',
+  },
+  {
+    __typename: 'AiConversationsThread',
+    id: 'gid://gitlab/Ai::Conversation::Thread/5',
+    lastUpdatedAt: '2025-01-08T14:11:24Z',
+    createdAt: '2025-01-08T14:11:24Z',
+    conversationType: 'DUO_CHAT',
+    title: 'Before the Configuration Committee',
+  },
+];

package/src/utils/date.js

@@ -0,0 +1,24 @@
+export function getOrdinalSuffix(day) {
+  if (day > 3 && day < 21) return 'th';
+  switch (day % 10) {
+    case 1:
+      return 'st';
+    case 2:
+      return 'nd';
+    case 3:
+      return 'rd';
+    default:
+      return 'th';
+  }
+}
+
+export function formatDate(dateStr) {
+  const date = new Date(dateStr);
+  const day = date.getDate();
+  const suffix = getOrdinalSuffix(day);
+
+  const month = new Intl.DateTimeFormat('en-US', { month: 'long' }).format(date);
+  const year = new Intl.DateTimeFormat('en-US', { year: 'numeric' }).format(date);
+
+  return `${month} ${day}${suffix}, ${year}`;
+}

package/translations.js

@@ -2,7 +2,6 @@
 export default {
   'DuoChat.chatBackLabel': 'Back to History',
   'DuoChat.chatCancelLabel': 'Cancel',
-  'DuoChat.chatCloseLabel': 'Close the Code Explanation',
   'DuoChat.chatDefaultPredefinedPromptsChangePassword': 'How do I change my password in GitLab?',
   'DuoChat.chatDefaultPredefinedPromptsCloneRepository': 'How do I clone a repository?',
   'DuoChat.chatDefaultPredefinedPromptsCreateTemplate': 'How do I create a template?',
@@ -10,12 +9,20 @@ export default {
   'DuoChat.chatDefaultTitle': 'GitLab Duo Chat',
   'DuoChat.chatEmptyStateTitle':
     '👋 I am GitLab Duo Chat, your personal AI-powered assistant. How can I help you today?',
+  'DuoChat.chatHistoryInfo': 'Chats with no activity in the last 30 days are deleted.',
+  'DuoChat.chatHistoryToolTip': 'Chat History',
   'DuoChat.chatNewLabel': 'New Chat',
+  'DuoChat.chatNewToolTip': 'New Chat',
   'DuoChat.chatPromptPlaceholderDefault': 'GitLab Duo Chat',
   'DuoChat.chatPromptPlaceholderWithCommands': 'Type /help to learn more',
   'DuoChat.chatSubmitLabel': 'Send chat message.',
   'DuoChat.chatTitle': 'GitLab Duo Chat',
   'DuoChat.closeChatHeaderLabel': 'Close Chat',
+  'DuoChat.emptyHistoryAlt':
+    'Clock icon with circular arrow, indicating chat history or time-based functionality',
+  'DuoChat.emptyHistoryCopy': 'Your previous chats will appear here.',
+  'DuoChat.emptyHistoryTitle': 'See your chat history',
+  'DuoChat.threadDeleteLabel': 'Delete this thread.',
   'DuoChatContextItemDetailsModal.contentErrorMessage': 'Item content could not be displayed.',
   'DuoChatContextItemDetailsModal.title': 'Preview',
   'DuoChatContextItemMenu.emptyStateMessage': 'No results found',
@@ -42,6 +49,7 @@ export default {
   'DuoChatMessage.modalTitle': 'Give feedback on GitLab Duo Chat',
   'DuoChatMessageSources.messageSources': null,
   'GlDuoChat.chatDisclamer': 'Responses may be inaccurate. Verify before use.',
+  'GlDuoChat.chatHistoryTitle': 'Chat history',
   'GlDuoWorkflowPanel.collapseButtonTitle': 'Collapse',
   'GlDuoWorkflowPanel.expandButtonTitle': 'Expand',
   'GlDuoWorkflowPrompt.cancelButtonText': 'Cancel',