@gitlab/duo-ui 8.2.1 → 8.4.0

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+# [8.4.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.3.0...v8.4.0) (2025-02-28)
+
+
+### Features
+
+* add support for duo chat multithreading ([7f10c77](https://gitlab.com/gitlab-org/duo-ui/commit/7f10c77f4ed28b869a749317f5278c384cd653b3))
+
+# [8.4.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.3.0...v8.4.0) (2025-02-28)
+
+
+### Features
+
+* add support for duo chat multithreading ([7f10c77](https://gitlab.com/gitlab-org/duo-ui/commit/7f10c77f4ed28b869a749317f5278c384cd653b3))
+
+# [8.4.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.3.0...v8.4.0) (2025-02-27)
+
+
+### Features
+
+* add support for duo chat multithreading ([7f10c77](https://gitlab.com/gitlab-org/duo-ui/commit/7f10c77f4ed28b869a749317f5278c384cd653b3))
+
+# [8.4.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.3.0...v8.4.0) (2025-02-27)
+
+
+### Features
+
+* add support for duo chat multithreading ([7f10c77](https://gitlab.com/gitlab-org/duo-ui/commit/7f10c77f4ed28b869a749317f5278c384cd653b3))
+
+# [8.3.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.2.1...v8.3.0) (2025-02-21)
+
+
+### Features
+
+* add Duo Chat header component ([b120863](https://gitlab.com/gitlab-org/duo-ui/commit/b12086344411a02894ddca77c3be9c7763443ce6))
+
 ## [8.2.1](https://gitlab.com/gitlab-org/duo-ui/compare/v8.2.0...v8.2.1) (2025-02-21)
 
 

package/dist/components/chat/components/duo_chat_header/constants.js

@@ -0,0 +1,6 @@
+const VIEW_TYPES = {
+  CHAT: 'chat',
+  LIST: 'list'
+};
+
+export { VIEW_TYPES };

package/dist/components/chat/components/duo_chat_header/duo_chat_header.js

@@ -0,0 +1,106 @@
+import { GlButton, GlAlert, GlExperimentBadge, GlSafeHtmlDirective } from '@gitlab/ui';
+import { translate } from '../../../../utils/i18n';
+import { VIEW_TYPES } from './constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const i18n = {
+  CHAT_BACK_LABEL: translate('DuoChat.chatBackLabel', 'Back to History'),
+  CHAT_CLOSE_LABEL: translate('DuoChat.closeChatHeaderLabel', 'Close Chat'),
+  CHAT_NEW_LABEL: translate('DuoChat.chatNewLabel', 'New Chat'),
+  CHAT_TITLE: translate('DuoChat.chatTitle', 'GitLab Duo Chat')
+};
+var script = {
+  name: 'DuoChatHeader',
+  components: {
+    GlButton,
+    GlAlert,
+    GlExperimentBadge
+  },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective
+  },
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: i18n.CHAT_TITLE
+    },
+    error: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    isMultithreaded: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    shouldRenderResizable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    activeThreadId: {
+      type: String,
+      required: false,
+      default: null
+    },
+    badgeType: {
+      type: String,
+      required: false,
+      default: null
+    },
+    currentView: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    VIEW_TYPES() {
+      return VIEW_TYPES;
+    }
+  },
+  i18n
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('header',{staticClass:"duo-chat-drawer-header duo-chat-drawer-header-sticky gl-border-0 gl-bg-default !gl-p-0",class:{
+    'gl-z-200': !_vm.shouldRenderResizable,
+    'gl-z-1': _vm.shouldRenderResizable,
+  },attrs:{"data-testid":"chat-header"}},[_c('div',{staticClass:"drawer-title gl-flex gl-items-center gl-justify-start gl-p-5"},[(_vm.isMultithreaded && _vm.currentView === _vm.VIEW_TYPES.CHAT)?_c('gl-button',{staticClass:"gl-mr-3",attrs:{"data-testid":"chat-back-button","category":"primary","size":"medium","icon":"history","aria-label":_vm.$options.i18n.CHAT_BACK_LABEL},on:{"click":function($event){return _vm.$emit('go-back')}}}):_vm._e(),_vm._v(" "),(_vm.isMultithreaded && (_vm.activeThreadId || _vm.currentView === _vm.VIEW_TYPES.LIST))?_c('gl-button',{staticClass:"gl-mr-3",attrs:{"data-testid":"chat-new-button","category":"primary","size":"medium","icon":"duo-chat-new","aria-label":_vm.$options.i18n.CHAT_NEW_LABEL},on:{"click":function($event){return _vm.$emit('new-chat')}}}):_vm._e(),_vm._v(" "),_c('h3',{staticClass:"gl-my-0 gl-text-size-h2"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),(_vm.badgeType)?_c('gl-experiment-badge',{attrs:{"type":_vm.badgeType,"container-id":"chat-component"}}):_vm._e(),_vm._v(" "),_c('gl-button',{staticClass:"gl-ml-auto",attrs:{"category":"tertiary","variant":"default","icon":"close","size":"small","data-testid":"chat-close-button","aria-label":_vm.$options.i18n.CHAT_CLOSE_LABEL},on:{"click":function($event){return _vm.$emit('close')}}})],1),_vm._v(" "),_vm._t("subheader"),_vm._v(" "),(_vm.error)?_c('gl-alert',{key:"error",staticClass:"!gl-pl-9",attrs:{"dismissible":false,"variant":"danger","role":"alert","data-testid":"chat-error"}},[_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.error),expression:"error"}]})]):_vm._e()],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
+export { i18n };

package/dist/components/chat/components/duo_chat_threads/duo_chat_threads.js

@@ -0,0 +1,96 @@
+import { GlButton, GlIcon } from '@gitlab/ui';
+import { translate } from '../../../../utils/i18n';
+import { formatDate } from '../../../../utils/date';
+import DuoChatThreadsEmpty from './duo_chat_threads_empty';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+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.')
+};
+var script = {
+  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 */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-h-full gl-p-5"},[_c('div',{staticClass:"gl-bg-gray-50 gl-text-gray-500 gl-p-4 gl-mb-5 gl-rounded-base",attrs:{"data-testid":"chat-threads-info-banner"}},[_c('p',{staticClass:"gl-m-0 gl-flex"},[_c('gl-icon',{staticClass:"gl-mr-4",attrs:{"name":"bulb"}}),_vm._v(_vm._s(_vm.$options.i18n.CHAT_HISTORY_INFO)+"\n    ")],1)]),_vm._v(" "),(_vm.hasThreads)?_vm._l((_vm.groupedThreads),function(threadsForDate,date){return _c('div',{key:date},[_c('div',{staticClass:"gl-font-bold gl-neutral-900 gl-mb-4",attrs:{"data-testid":"chat-threads-date-header"}},[_vm._v("\n        "+_vm._s(_vm.formatDate(date))+"\n      ")]),_vm._v(" "),_c('div',_vm._l((threadsForDate),function(thread){return _c('div',{key:thread.id,staticClass:"gl-flex gl-align-center gl-mb-4"},[_c('div',{staticClass:"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",attrs:{"tabindex":"0","data-testid":"chat-threads-thread-box"},on:{"click":function($event){return _vm.onSelectThread(thread)}}},[_vm._v("\n            "+_vm._s(thread.title || 'Untitled Chat')+"\n          ")]),_vm._v(" "),_c('gl-button',{staticClass:"gl-neutral-900 !gl-p-4",attrs:{"data-testid":"chat-threads-delete-thread-button","icon":"remove","category":"tertiary","size":"small","aria-label":_vm.$options.i18n.THREAD_DELETE_LABEL},on:{"click":function($event){return _vm.$emit('delete-thread', thread.id)}}})],1)}),0)])}):_c('duo-chat-threads-empty')],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

package/dist/components/chat/components/duo_chat_threads/duo_chat_threads_empty.js

@@ -0,0 +1,52 @@
+import ScheduleIllustration from '@gitlab/svgs/dist/illustrations/schedule-md.svg';
+import { translate } from '../../../../utils/i18n';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+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')
+};
+var script = {
+  name: 'DuoChatHistoryEmpty',
+  i18n,
+  ScheduleIllustration
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-h-full gl-flex gl-flex-col gl-align-center gl-items-center gl-justify-center"},[_c('img',{staticClass:"gl-mb-5",attrs:{"src":_vm.$options.ScheduleIllustration,"alt":_vm.$options.i18n.EMPTY_HISTORY_ALT,"data-testid":"empty-state-illustration"}}),_vm._v(" "),_c('h3',{staticClass:"gl-font-bold gl-neutral-900 gl-mb-4",attrs:{"data-testid":"empty-state-title"}},[_vm._v("\n    "+_vm._s(_vm.$options.i18n.EMPTY_HISTORY_TITLE)+"\n  ")]),_vm._v(" "),_c('p',{staticClass:"gl-align-center",attrs:{"data-testid":"empty-state-description"}},[_vm._v("\n    "+_vm._s(_vm.$options.i18n.EMPTY_HISTORY_COPY)+"\n  ")])])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

package/dist/components/chat/duo_chat.js

@@ -3,15 +3,18 @@ import VueResizable from 'vue-resizable';
 import { GlButton, GlAlert, GlFormInputGroup, GlFormTextarea, GlForm, GlExperimentBadge, GlCard, GlDropdownItem, GlSafeHtmlDirective } from '@gitlab/ui';
 import { translate } from '../../utils/i18n';
 import { badgeTypes, badgeTypeValidator, CHAT_RESET_MESSAGE, CHAT_INCLUDE_MESSAGE, MESSAGE_MODEL_ROLES, CHAT_CLEAR_MESSAGE, CHAT_NEW_MESSAGE } from './constants';
+import { VIEW_TYPES } from './components/duo_chat_header/constants';
 import DuoChatLoader from './components/duo_chat_loader/duo_chat_loader';
 import DuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts';
 import DuoChatConversation from './components/duo_chat_conversation/duo_chat_conversation';
+import DuoChatHeader from './components/duo_chat_header/duo_chat_header';
+import DuoChatThreads from './components/duo_chat_threads/duo_chat_threads';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 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?'),
   CHAT_PROMPT_PLACEHOLDER_DEFAULT: translate('DuoChat.chatPromptPlaceholderDefault', 'GitLab Duo Chat'),
   CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: translate('DuoChat.chatPromptPlaceholderWithCommands', 'Type /help to learn more'),
@@ -26,6 +29,10 @@ const isSlashCommand = command => Boolean(command) && (command === null || comma
 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);
 var script = {
   name: 'DuoChat',
   components: {
@@ -38,6 +45,8 @@ var script = {
     DuoChatLoader,
     DuoChatPredefinedPrompts,
     DuoChatConversation,
+    DuoChatHeader,
+    DuoChatThreads,
     GlCard,
     GlDropdownItem,
     VueResizable
@@ -92,6 +101,23 @@ var script = {
       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.
      */
@@ -108,6 +134,15 @@ var script = {
       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.
      */
@@ -189,6 +224,14 @@ var script = {
       type: String,
       required: false,
       default: ''
+    },
+    /**
+     * Whether the chat is running in multi-threaded mode
+     */
+    isMultithreaded: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
@@ -200,10 +243,14 @@ var script = {
       displaySubmitButton: true,
       compositionJustEnded: false,
       contextItemsMenuIsOpen: false,
-      contextItemMenuRef: null
+      contextItemMenuRef: null,
+      currentView: this.multiThreadedView
     };
   },
   computed: {
+    shouldShowThreadList() {
+      return this.isMultithreaded && this.currentView === VIEW_TYPES.LIST;
+    },
     withSlashCommands() {
       return this.slashCommands.length > 0;
     },
@@ -272,6 +319,9 @@ var script = {
     }
   },
   watch: {
+    multiThreadedView(newView) {
+      this.currentView = newView;
+    },
     isLoading(newVal) {
       if (!newVal && !this.isStreaming) {
         this.displaySubmitButton = true; // Re-enable submit button when loading stops
@@ -303,6 +353,12 @@ var script = {
     this.scrollToBottom();
   },
   methods: {
+    onGoBack() {
+      this.$emit('back-to-list');
+    },
+    onNewChat() {
+      this.$emit('new-chat');
+    },
     updateSize(e) {
       this.$emit('chat-resize', e);
     },
@@ -489,6 +545,20 @@ var script = {
     },
     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
@@ -504,13 +574,11 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
   },attrs:{"width":_vm.shouldRenderResizable ? _vm.dimensions.width : null,"height":_vm.shouldRenderResizable ? _vm.dimensions.height : null,"max-width":_vm.shouldRenderResizable ? _vm.dimensions.maxWidth : null,"max-height":_vm.shouldRenderResizable ? _vm.dimensions.maxHeight : null,"min-width":_vm.shouldRenderResizable ? _vm.dimensions.minWidth : null,"left":_vm.shouldRenderResizable ? _vm.dimensions.left : null,"top":_vm.shouldRenderResizable ? _vm.dimensions.top : null,"fit-parent":true,"min-height":_vm.shouldRenderResizable ? _vm.dimensions.minHeight : null,"active":_vm.shouldRenderResizable ? ['l', 't', 'lt'] : null},on:{"resize:end":_vm.updateSize}},[(!_vm.isHidden)?_c('aside',{staticClass:"markdown-code-block duo-chat gl-bottom-0 gl-max-h-full",class:{
       'resizable-content': _vm.shouldRenderResizable,
       'duo-chat-drawer': !_vm.shouldRenderResizable,
-    },attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"}},[(_vm.showHeader)?_c('header',{staticClass:"duo-chat-drawer-header duo-chat-drawer-header-sticky gl-border-0 gl-bg-default !gl-p-0",class:{
-        'gl-z-200': !_vm.shouldRenderResizable,
-      },attrs:{"data-testid":"chat-header"}},[_c('div',{staticClass:"drawer-title gl-flex gl-items-center gl-justify-start gl-p-5"},[_c('h3',{staticClass:"gl-my-0 gl-text-size-h2"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),(_vm.badgeType)?_c('gl-experiment-badge',{attrs:{"type":_vm.badgeType,"container-id":"chat-component"}}):_vm._e(),_vm._v(" "),_c('gl-button',{staticClass:"gl-ml-auto",attrs:{"category":"tertiary","variant":"default","icon":"close","size":"small","data-testid":"chat-close-button","aria-label":_vm.$options.i18n.CHAT_CLOSE_LABEL},on:{"click":_vm.hideChat}})],1),_vm._v(" "),_vm._t("subheader"),_vm._v(" "),(_vm.error)?_c('gl-alert',{key:"error",staticClass:"!gl-pl-9",attrs:{"dismissible":false,"variant":"danger","role":"alert","data-testid":"chat-error"}},[_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.error),expression:"error"}]})]):_vm._e()],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"duo-chat-drawer-body gl-bg-default",attrs:{"data-testid":"chat-history"},on:{"scroll":_vm.handleScrollingTrottled}},[_c('transition-group',{staticClass:"duo-chat-history gl-flex gl-flex-col gl-justify-end",class:[
-          {
-            'gl-h-full': !_vm.hasMessages,
-            'force-scroll-bar': _vm.hasMessages,
-          } ],attrs:{"tag":"section","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('duo-chat-conversation',{key:("conversation-" + index),attrs:{"enable-code-insertion":_vm.enableCodeInsertion,"messages":conversation,"canceled-request-ids":_vm.canceledRequestIds,"show-delimiter":index > 0},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet,"copy-code-snippet":_vm.onCopyCodeSnippet,"get-context-item-content":_vm.onGetContextItemContent}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('div',{key:"empty-state-message",staticClass:"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",attrs:{"data-testid":"gl-duo-chat-empty-state"}},[(_vm.emptyStateTitle)?_c('p',{staticClass:"gl-m-0",attrs:{"data-testid":"gl-duo-chat-empty-state-title"}},[_vm._v("\n              "+_vm._s(_vm.emptyStateTitle)+"\n            ")]):_vm._e(),_vm._v(" "),_c('duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})],1)]:_vm._e(),_vm._v(" "),(_vm.isLoading)?_c('duo-chat-loader',{key:"loader",attrs:{"tool-name":_vm.toolName}}):_vm._e(),_vm._v(" "),_c('div',{key:"anchor",ref:"anchor",staticClass:"scroll-anchor"})],2)],1),_vm._v(" "),(_vm.isChatAvailable)?_c('footer',{staticClass:"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': !_vm.scrolledToBottom },attrs:{"data-testid":"chat-footer"}},[_c('gl-form',{attrs:{"data-testid":"chat-prompt-form"},on:{"submit":function($event){$event.stopPropagation();$event.preventDefault();return _vm.sendChatPrompt.apply(null, arguments)}}},[_c('div',{staticClass:"gl-relative gl-max-w-full"},[_vm._t("context-items-menu",null,{"isOpen":_vm.contextItemsMenuIsOpen,"onClose":_vm.closeContextItemsMenuOpen,"setRef":_vm.setContextItemsMenuRef,"focusPrompt":_vm.focusChatInput})],2),_vm._v(" "),_c('gl-form-input-group',{scopedSlots:_vm._u([{key:"append",fn:function(){return [(_vm.displaySubmitButton)?_c('gl-button',{staticClass:"!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-full",attrs:{"icon":"paper-airplane","category":"primary","variant":"confirm","type":"submit","data-testid":"chat-prompt-submit-button","aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL}}):_c('gl-button',{staticClass:"!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-full",attrs:{"icon":"stop","category":"primary","variant":"default","data-testid":"chat-prompt-cancel-button","aria-label":_vm.$options.i18n.CHAT_CANCEL_LABEL},on:{"click":_vm.cancelPrompt}})]},proxy:true}],null,false,608602988)},[_c('div',{staticClass:"duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-align-top",attrs:{"data-value":_vm.prompt}},[(_vm.shouldShowSlashCommands)?_c('gl-card',{ref:"commands",staticClass:"slash-commands !gl-absolute gl-w-full -gl-translate-y-full gl-list-none gl-pl-0 gl-shadow-md",attrs:{"body-class":"!gl-p-2"}},_vm._l((_vm.filteredSlashCommands),function(command,index){return _c('gl-dropdown-item',{key:command.name,class:{ 'active-command': index === _vm.activeCommandIndex },on:{"click":function($event){return _vm.selectSlashCommand(index)}},nativeOn:{"mouseenter":function($event){_vm.activeCommandIndex = index;}}},[_c('span',{staticClass:"gl-flex gl-justify-between"},[_c('span',{staticClass:"gl-block"},[_vm._v(_vm._s(command.name))]),_vm._v(" "),_c('small',{staticClass:"gl-pl-3 gl-text-right gl-italic gl-text-subtle"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",staticClass:"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': !_vm.prompt },attrs:{"data-testid":"chat-prompt-input","placeholder":_vm.inputPlaceholder,"autofocus":""},on:{"compositionend":_vm.compositionEnd},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }$event.preventDefault();},"keyup":function($event){return _vm.onInputKeyup.apply(null, arguments)}},model:{value:(_vm.prompt),callback:function ($$v) {_vm.prompt=$$v;},expression:"prompt"}})],1)])],1),_vm._v(" "),_c('p',{staticClass:"gl-mb-0 gl-mt-3 gl-px-4 gl-text-sm gl-text-secondary"},[_vm._v("\n        "+_vm._s(_vm.$options.i18n.CHAT_DISCLAMER)+"\n      ")])],1):_vm._e()]):_vm._e()])};
+    },attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"}},[(_vm.showHeader)?_c('duo-chat-header',{attrs:{"active-thread-id":_vm.activeThreadId,"title":_vm.isMultithreaded && _vm.currentView === 'list' ? _vm.$options.i18n.CHAT_HISTORY_TITLE : _vm.title,"error":_vm.error,"is-multithreaded":_vm.isMultithreaded,"current-view":_vm.currentView,"should-render-resizable":_vm.shouldRenderResizable,"badge-type":_vm.isMultithreaded ? null : _vm.badgeType},on:{"go-back":_vm.onGoBack,"new-chat":_vm.onNewChat,"close":_vm.hideChat},scopedSlots:_vm._u([{key:"subheader",fn:function(){return [_vm._t("subheader")]},proxy:true}],null,true)}):_vm._e(),_vm._v(" "),(_vm.shouldShowThreadList)?_c('div',{staticClass:"gl-h-full"},[_c('duo-chat-threads',{attrs:{"threads":_vm.threadList},on:{"new-chat":_vm.onNewChat,"select-thread":_vm.onSelectThread,"delete-thread":_vm.onDeleteThread,"close":_vm.hideChat}})],1):_c('span',{staticClass:"gl-h-full gl-flex gl-flex-col gl-justify-end"},[_c('div',{staticClass:"duo-chat-drawer-body gl-bg-default",attrs:{"data-testid":"chat-history"},on:{"scroll":_vm.handleScrollingTrottled}},[_c('transition-group',{staticClass:"duo-chat-history gl-flex gl-flex-col gl-justify-end",class:[
+            {
+              'gl-h-full': !_vm.hasMessages,
+              'force-scroll-bar': _vm.hasMessages,
+            } ],attrs:{"tag":"section","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('duo-chat-conversation',{key:("conversation-" + index),attrs:{"enable-code-insertion":_vm.enableCodeInsertion,"messages":conversation,"canceled-request-ids":_vm.canceledRequestIds,"show-delimiter":index > 0},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet,"copy-code-snippet":_vm.onCopyCodeSnippet,"get-context-item-content":_vm.onGetContextItemContent}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('div',{key:"empty-state-message",staticClass:"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",attrs:{"data-testid":"gl-duo-chat-empty-state"}},[(_vm.emptyStateTitle)?_c('p',{staticClass:"gl-m-0",attrs:{"data-testid":"gl-duo-chat-empty-state-title"}},[_vm._v("\n                "+_vm._s(_vm.emptyStateTitle)+"\n              ")]):_vm._e(),_vm._v(" "),_c('duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})],1)]:_vm._e(),_vm._v(" "),(_vm.isLoading)?_c('duo-chat-loader',{key:"loader",attrs:{"tool-name":_vm.toolName}}):_vm._e(),_vm._v(" "),_c('div',{key:"anchor",ref:"anchor",staticClass:"scroll-anchor"})],2)],1),_vm._v(" "),(_vm.isChatAvailable)?_c('footer',{staticClass:"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': !_vm.scrolledToBottom },attrs:{"data-testid":"chat-footer"}},[_c('gl-form',{attrs:{"data-testid":"chat-prompt-form"},on:{"submit":function($event){$event.stopPropagation();$event.preventDefault();return _vm.sendChatPrompt.apply(null, arguments)}}},[_c('div',{staticClass:"gl-relative gl-max-w-full"},[_vm._t("context-items-menu",null,{"isOpen":_vm.contextItemsMenuIsOpen,"onClose":_vm.closeContextItemsMenuOpen,"setRef":_vm.setContextItemsMenuRef,"focusPrompt":_vm.focusChatInput})],2),_vm._v(" "),_c('gl-form-input-group',{scopedSlots:_vm._u([{key:"append",fn:function(){return [(_vm.displaySubmitButton)?_c('gl-button',{staticClass:"!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-full",attrs:{"icon":"paper-airplane","category":"primary","variant":"confirm","type":"submit","data-testid":"chat-prompt-submit-button","aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL}}):_c('gl-button',{staticClass:"!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-full",attrs:{"icon":"stop","category":"primary","variant":"default","data-testid":"chat-prompt-cancel-button","aria-label":_vm.$options.i18n.CHAT_CANCEL_LABEL},on:{"click":_vm.cancelPrompt}})]},proxy:true}],null,false,608602988)},[_c('div',{staticClass:"duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-align-top",attrs:{"data-value":_vm.prompt}},[(_vm.shouldShowSlashCommands)?_c('gl-card',{ref:"commands",staticClass:"slash-commands !gl-absolute gl-w-full -gl-translate-y-full gl-list-none gl-pl-0 gl-shadow-md",attrs:{"body-class":"!gl-p-2"}},_vm._l((_vm.filteredSlashCommands),function(command,index){return _c('gl-dropdown-item',{key:command.name,class:{ 'active-command': index === _vm.activeCommandIndex },on:{"click":function($event){return _vm.selectSlashCommand(index)}},nativeOn:{"mouseenter":function($event){_vm.activeCommandIndex = index;}}},[_c('span',{staticClass:"gl-flex gl-justify-between"},[_c('span',{staticClass:"gl-block"},[_vm._v(_vm._s(command.name))]),_vm._v(" "),_c('small',{staticClass:"gl-pl-3 gl-text-right gl-italic gl-text-subtle"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",staticClass:"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': !_vm.prompt },attrs:{"data-testid":"chat-prompt-input","placeholder":_vm.inputPlaceholder,"autofocus":""},on:{"compositionend":_vm.compositionEnd},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }$event.preventDefault();},"keyup":function($event){return _vm.onInputKeyup.apply(null, arguments)}},model:{value:(_vm.prompt),callback:function ($$v) {_vm.prompt=$$v;},expression:"prompt"}})],1)])],1),_vm._v(" "),_c('p',{staticClass:"gl-mb-0 gl-mt-3 gl-px-4 gl-text-sm gl-text-secondary"},[_vm._v("\n          "+_vm._s(_vm.$options.i18n.CHAT_DISCLAMER)+"\n        ")])],1):_vm._e()])],1):_vm._e()])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/chat/mock_data.js

@@ -158,5 +158,76 @@ const INCLUDE_SLASH_COMMAND = {
   name: CHAT_INCLUDE_MESSAGE,
   description: 'Include additional context in the conversation.'
 };
+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'
+}];
 
-export { INCLUDE_SLASH_COMMAND, MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_USER_PROMPT_MESSAGE, SLASH_COMMANDS, generateMockResponseChunks, generateSeparateChunks, renderGFM, renderMarkdown };
+export { INCLUDE_SLASH_COMMAND, MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_USER_PROMPT_MESSAGE, SLASH_COMMANDS, THREADLIST, generateMockResponseChunks, generateSeparateChunks, renderGFM, renderMarkdown };