@gitlab/duo-ui 8.7.11 → 8.9.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [8.9.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.8.0...v8.9.0) (2025-03-31)
+
+
+### Features
+
+* render current thread's title in Duo Chat ([fdbc38d](https://gitlab.com/gitlab-org/duo-ui/commit/fdbc38d143c5e563732cb92d60dabb685e89ea96))
+
+# [8.8.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.7.11...v8.8.0) (2025-03-31)
+
+
+### Features
+
+* support terminal context category ([2aefdc6](https://gitlab.com/gitlab-org/duo-ui/commit/2aefdc60b95cbff87c8a6e284e01ef3f4e95da8c))
+
 ## [8.7.11](https://gitlab.com/gitlab-org/duo-ui/compare/v8.7.10...v8.7.11) (2025-03-28)
 
 

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

@@ -3,10 +3,9 @@ const CONTEXT_ITEM_CATEGORY_MERGE_REQUEST = 'merge_request';
 const CONTEXT_ITEM_CATEGORY_FILE = 'file';
 const CONTEXT_ITEM_CATEGORY_LOCAL_GIT = 'local_git';
 const CONTEXT_ITEM_CATEGORY_DEPENDENCY = 'dependency';
-const CONTEXT_ITEM_LOCAL_GIT_COMMIT = 'commit';
-const CONTEXT_ITEM_LOCAL_GIT_DIFF = 'diff';
+const CONTEXT_ITEM_CATEGORY_TERMINAL_SELECTION = 'terminal';
 const LANGUAGE_IDENTIFIER_PREFIX = 'language-';
 const LANGUAGE_IDENTIFIER_DIFF = 'language-diff';
 const LANGUAGE_IDENTIFIER_PLAINTEXT = 'language-plaintext';
 
-export { CONTEXT_ITEM_CATEGORY_DEPENDENCY, 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, LANGUAGE_IDENTIFIER_DIFF, LANGUAGE_IDENTIFIER_PLAINTEXT, LANGUAGE_IDENTIFIER_PREFIX };
+export { CONTEXT_ITEM_CATEGORY_DEPENDENCY, CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST, CONTEXT_ITEM_CATEGORY_TERMINAL_SELECTION, LANGUAGE_IDENTIFIER_DIFF, LANGUAGE_IDENTIFIER_PLAINTEXT, LANGUAGE_IDENTIFIER_PREFIX };

package/dist/components/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.js

@@ -1,7 +1,7 @@
 import uniqueId from 'lodash/uniqueId';
 import { GlTruncate, GlIcon, GlToken } from '@gitlab/ui';
 import DuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover';
-import { CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_DEPENDENCY } from '../constants';
+import { CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_DEPENDENCY, CONTEXT_ITEM_CATEGORY_TERMINAL_SELECTION } from '../constants';
 import DuoChatContextItemDetailsModal from '../duo_chat_context_item_details_modal/duo_chat_context_item_details_modal';
 import { contextItemsValidator } from '../utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -105,7 +105,7 @@ var script = {
       this.previewContextItemId = contextItem.id;
     },
     canOpen(contextItem) {
-      return [CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_DEPENDENCY].includes(contextItem.category);
+      return [CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_DEPENDENCY, CONTEXT_ITEM_CATEGORY_TERMINAL_SELECTION].includes(contextItem.category);
     },
     onClosePreview() {
       this.previewContextItemId = null;

package/dist/components/chat/components/duo_chat_context/mock_context_data.js

@@ -300,8 +300,24 @@ const mockDependencies = [MOCK_CONTEXT_ITEM_DEPENDENCY, MOCK_CONTEXT_ITEM_DEPEND
     project: 'example/legacy'
   }
 }];
+const mockTerminalOutput = '$ npx cowsay "moo"\n _____\n< moo >\n -----\n        \\   ^__^\n         \\  (oo)\\_______\n            (__)\\       )\\/\\\n                ||----w |\n                ||     ||';
+const mockTerminalOutputLines = mockTerminalOutput.split('\n');
+const MOCK_CONTEXT_ITEM_TERMINAL = {
+  id: 'cb94e08e-f2f6-408a-8f43-036079d19e47',
+  category: 'terminal',
+  content: mockTerminalOutput,
+  metadata: {
+    title: mockTerminalOutput.split('\n').at(0),
+    enabled: true,
+    subType: 'snippet',
+    icon: 'terminal',
+    subTypeLabel: 'Selected terminal output',
+    secondaryText: `${mockTerminalOutputLines.length} lines of terminal output`
+  }
+};
+const mockTerminalSelections = [MOCK_CONTEXT_ITEM_TERMINAL];
 const getMockContextItems = () => {
-  const allItems = [...mockFiles, ...mockGitItems, ...mockIssues, ...mockMergeRequests, ...mockDependencies];
+  const allItems = [...mockFiles, ...mockGitItems, ...mockIssues, ...mockMergeRequests, ...mockDependencies, ...mockTerminalSelections];
 
   // put disabled items in the back
   const disabledItems = allItems.filter(item => !item.metadata.enabled);
@@ -309,4 +325,4 @@ const getMockContextItems = () => {
   return [...enabledItems, ...disabledItems];
 };
 
-export { MOCK_CATEGORIES, MOCK_CONTEXT_FILE_CONTENT, MOCK_CONTEXT_FILE_DIFF_CONTENT, MOCK_CONTEXT_ITEM_DEPENDENCY, MOCK_CONTEXT_ITEM_DEPENDENCY_DISABLED, MOCK_CONTEXT_ITEM_FILE, MOCK_CONTEXT_ITEM_FILE_DISABLED, MOCK_CONTEXT_ITEM_GIT_COMMIT, MOCK_CONTEXT_ITEM_GIT_DIFF, MOCK_CONTEXT_ITEM_ISSUE, MOCK_CONTEXT_ITEM_ISSUE_DISABLED, MOCK_CONTEXT_ITEM_MERGE_REQUEST, MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED, getMockCategory, getMockContextItems };
+export { MOCK_CATEGORIES, MOCK_CONTEXT_FILE_CONTENT, MOCK_CONTEXT_FILE_DIFF_CONTENT, MOCK_CONTEXT_ITEM_DEPENDENCY, MOCK_CONTEXT_ITEM_DEPENDENCY_DISABLED, MOCK_CONTEXT_ITEM_FILE, MOCK_CONTEXT_ITEM_FILE_DISABLED, MOCK_CONTEXT_ITEM_GIT_COMMIT, MOCK_CONTEXT_ITEM_GIT_DIFF, MOCK_CONTEXT_ITEM_ISSUE, MOCK_CONTEXT_ITEM_ISSUE_DISABLED, MOCK_CONTEXT_ITEM_MERGE_REQUEST, MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED, MOCK_CONTEXT_ITEM_TERMINAL, getMockCategory, getMockContextItems };

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

@@ -28,6 +28,11 @@ var script = {
       required: false,
       default: i18n.CHAT_TITLE
     },
+    subtitle: {
+      type: String,
+      required: false,
+      default: ''
+    },
     error: {
       type: String,
       required: false,
@@ -70,7 +75,7 @@ var 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:"gl-border-b gl-bg-default gl-p-0 gl-shrink-0",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',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],staticClass:"gl-mr-3",attrs:{"title":_vm.$options.i18n.CHAT_HISTORY_TOOLTIP,"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',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],staticClass:"gl-mr-3",attrs:{"title":_vm.$options.i18n.CHAT_NEW_TOOLTIP,"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_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('header',{staticClass:"gl-border-b gl-bg-default gl-p-0 gl-shrink-0",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',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],staticClass:"gl-mr-3",attrs:{"title":_vm.$options.i18n.CHAT_HISTORY_TOOLTIP,"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',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],staticClass:"gl-mr-3",attrs:{"title":_vm.$options.i18n.CHAT_NEW_TOOLTIP,"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('div',{staticClass:"gl-flex-1 gl-overflow-hidden"},[_c('div',{staticClass:"gl-flex gl-items-center"},[_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()],1),_vm._v(" "),(_vm.subtitle)?_c('h4',{staticClass:"gl-text-base gl-whitespace-nowrap gl-overflow-hidden gl-text-ellipsis gl-font-normal text-muted gl-mb-0",attrs:{"data-testid":"chat-subtitle"}},[_vm._v("\n        "+_vm._s(_vm.subtitle)+"\n      ")]):_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 */

package/dist/components/chat/duo_chat.js

@@ -334,6 +334,16 @@ var script = {
     },
     hasContextItemSelectionMenu() {
       return Boolean(this.contextItemMenuRef);
+    },
+    activeThread() {
+      return this.activeThreadId ? this.threadList.find(thread => thread.id === this.activeThreadId) : null;
+    },
+    activeThreadTitle() {
+      var _this$activeThread;
+      return (_this$activeThread = this.activeThread) === null || _this$activeThread === void 0 ? void 0 : _this$activeThread.title;
+    },
+    activeThreadTitleForView() {
+      return this.currentView === VIEW_TYPES.CHAT && this.activeThreadTitle || '';
     }
   },
   watch: {
@@ -595,7 +605,7 @@ 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 gl-flex gl-flex-col",class:{
       'resizable-content': _vm.shouldRenderResizable,
       'duo-chat-drawer': !_vm.shouldRenderResizable,
-    },attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"}},[(_vm.showHeader)?_c('duo-chat-header',{ref:"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(" "),_c('div',{staticClass:"gl-overflow-y-auto gl-flex gl-flex-col gl-flex-1 gl-flex-grow gl-bg-inherit gl-overscroll-contain",attrs:{"data-testid":"chat-history"},on:{"scroll":_vm.handleScrollingThrottled}},[(_vm.shouldShowThreadList)?_c('duo-chat-threads',{attrs:{"threads":_vm.threadList,"preferred-locale":_vm.preferredLocale},on:{"new-chat":_vm.onNewChat,"select-thread":_vm.onSelectThread,"delete-thread":_vm.onDeleteThread,"close":_vm.hideChat}}):_c('transition-group',{staticClass:"duo-chat-history gl-p-5 gl-mt-auto",attrs:{"mode":"out-in","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 && !_vm.shouldShowThreadList)?_c('footer',{staticClass:"duo-chat-drawer-footer gl-border-0 gl-bg-default gl-pb-3 gl-shrink-0 gl-relative gl-z-2",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()])};
+    },attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"}},[(_vm.showHeader)?_c('duo-chat-header',{ref:"header",attrs:{"active-thread-id":_vm.activeThreadId,"title":_vm.isMultithreaded && _vm.currentView === 'list' ? _vm.$options.i18n.CHAT_HISTORY_TITLE : _vm.title,"subtitle":_vm.activeThreadTitleForView,"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(" "),_c('div',{staticClass:"gl-overflow-y-auto gl-flex gl-flex-col gl-flex-1 gl-flex-grow gl-bg-inherit gl-overscroll-contain",attrs:{"data-testid":"chat-history"},on:{"scroll":_vm.handleScrollingThrottled}},[(_vm.shouldShowThreadList)?_c('duo-chat-threads',{attrs:{"threads":_vm.threadList,"preferred-locale":_vm.preferredLocale},on:{"new-chat":_vm.onNewChat,"select-thread":_vm.onSelectThread,"delete-thread":_vm.onDeleteThread,"close":_vm.hideChat}}):_c('transition-group',{staticClass:"duo-chat-history gl-p-5 gl-mt-auto",attrs:{"mode":"out-in","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 && !_vm.shouldShowThreadList)?_c('footer',{staticClass:"duo-chat-drawer-footer gl-border-0 gl-bg-default gl-pb-3 gl-shrink-0 gl-relative gl-z-2",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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/duo-ui",
-  "version": "8.7.11",
+  "version": "8.9.0",
   "description": "Duo UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -139,7 +139,7 @@
     "esbuild": "^0.18.0",
     "eslint": "8.57.1",
     "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-storybook": "0.11.6",
+    "eslint-plugin-storybook": "0.12.0",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "10.3.3",
     "globby": "^11.1.0",

package/src/components/chat/components/duo_chat_context/constants.js

@@ -3,9 +3,7 @@ export const CONTEXT_ITEM_CATEGORY_MERGE_REQUEST = 'merge_request';
 export const CONTEXT_ITEM_CATEGORY_FILE = 'file';
 export const CONTEXT_ITEM_CATEGORY_LOCAL_GIT = 'local_git';
 export const CONTEXT_ITEM_CATEGORY_DEPENDENCY = 'dependency';
-
-export const CONTEXT_ITEM_LOCAL_GIT_COMMIT = 'commit';
-export const CONTEXT_ITEM_LOCAL_GIT_DIFF = 'diff';
+export const CONTEXT_ITEM_CATEGORY_TERMINAL_SELECTION = 'terminal';
 
 export const LANGUAGE_IDENTIFIER_PREFIX = 'language-';
 export const LANGUAGE_IDENTIFIER_DIFF = 'language-diff';

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

@@ -7,6 +7,7 @@ import {
   CONTEXT_ITEM_CATEGORY_DEPENDENCY,
   CONTEXT_ITEM_CATEGORY_FILE,
   CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+  CONTEXT_ITEM_CATEGORY_TERMINAL_SELECTION,
 } from '../constants';
 import DuoChatContextItemDetailsModal from '../duo_chat_context_item_details_modal/duo_chat_context_item_details_modal.vue';
 import { contextItemsValidator } from '../utils';
@@ -117,6 +118,7 @@ export default {
         CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
         CONTEXT_ITEM_CATEGORY_FILE,
         CONTEXT_ITEM_CATEGORY_DEPENDENCY,
+        CONTEXT_ITEM_CATEGORY_TERMINAL_SELECTION,
       ].includes(contextItem.category);
     },
     onClosePreview() {

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

@@ -352,6 +352,24 @@ const mockDependencies = [
   },
 ];
 
+const mockTerminalOutput =
+  '$ npx cowsay "moo"\n _____\n< moo >\n -----\n        \\   ^__^\n         \\  (oo)\\_______\n            (__)\\       )\\/\\\n                ||----w |\n                ||     ||';
+const mockTerminalOutputLines = mockTerminalOutput.split('\n');
+export const MOCK_CONTEXT_ITEM_TERMINAL = {
+  id: 'cb94e08e-f2f6-408a-8f43-036079d19e47',
+  category: 'terminal',
+  content: mockTerminalOutput,
+  metadata: {
+    title: mockTerminalOutput.split('\n').at(0),
+    enabled: true,
+    subType: 'snippet',
+    icon: 'terminal',
+    subTypeLabel: 'Selected terminal output',
+    secondaryText: `${mockTerminalOutputLines.length} lines of terminal output`,
+  },
+};
+const mockTerminalSelections = [MOCK_CONTEXT_ITEM_TERMINAL];
+
 export const getMockContextItems = () => {
   const allItems = [
     ...mockFiles,
@@ -359,6 +377,7 @@ export const getMockContextItems = () => {
     ...mockIssues,
     ...mockMergeRequests,
     ...mockDependencies,
+    ...mockTerminalSelections,
   ];
 
   // put disabled items in the back

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

@@ -36,6 +36,11 @@ export default {
       required: false,
       default: i18n.CHAT_TITLE,
     },
+    subtitle: {
+      type: String,
+      required: false,
+      default: '',
+    },
     error: {
       type: String,
       required: false,
@@ -103,8 +108,19 @@ export default {
         @click="$emit('new-chat')"
       />
 
-      <h3 class="gl-my-0 gl-text-size-h2">{{ title }}</h3>
-      <gl-experiment-badge v-if="badgeType" :type="badgeType" container-id="chat-component" />
+      <div class="gl-flex-1 gl-overflow-hidden">
+        <div class="gl-flex gl-items-center">
+          <h3 class="gl-my-0 gl-text-size-h2">{{ title }}</h3>
+          <gl-experiment-badge v-if="badgeType" :type="badgeType" container-id="chat-component" />
+        </div>
+        <h4
+          v-if="subtitle"
+          class="gl-text-base gl-whitespace-nowrap gl-overflow-hidden gl-text-ellipsis gl-font-normal text-muted gl-mb-0"
+          data-testid="chat-subtitle"
+        >
+          {{ subtitle }}
+        </h4>
+      </div>
       <gl-button
         category="tertiary"
         variant="default"

package/src/components/chat/duo_chat.vue

@@ -403,6 +403,17 @@ export default {
     hasContextItemSelectionMenu() {
       return Boolean(this.contextItemMenuRef);
     },
+    activeThread() {
+      return this.activeThreadId
+        ? this.threadList.find((thread) => thread.id === this.activeThreadId)
+        : null;
+    },
+    activeThreadTitle() {
+      return this.activeThread?.title;
+    },
+    activeThreadTitleForView() {
+      return (this.currentView === VIEW_TYPES.CHAT && this.activeThreadTitle) || '';
+    },
   },
   watch: {
     multiThreadedView(newView) {
@@ -693,6 +704,7 @@ export default {
         :title="
           isMultithreaded && currentView === 'list' ? $options.i18n.CHAT_HISTORY_TITLE : title
         "
+        :subtitle="activeThreadTitleForView"
         :error="error"
         :is-multithreaded="isMultithreaded"
         :current-view="currentView"