@gitlab/duo-ui 10.21.0 → 10.22.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/dist/components/agentic_chat/agentic_duo_chat.js +18 -37
- package/dist/components/chat/components/duo_chat_header/duo_chat_header.js +4 -4
- package/dist/components/chat/duo_chat.js +35 -54
- package/dist/components/ui/duo_layout/duo_layout.js +100 -0
- package/dist/components/ui/side_rail/side_rail.js +67 -0
- package/dist/components.css +1 -1
- package/dist/components.css.map +1 -1
- package/dist/index.js +2 -0
- package/dist/tailwind.css +1 -1
- package/dist/tailwind.css.map +1 -1
- package/package.json +2 -1
- package/src/components/agentic_chat/agentic_duo_chat.vue +210 -244
- package/src/components/chat/components/duo_chat_header/duo_chat_header.vue +24 -22
- package/src/components/chat/duo_chat.scss +1 -2
- package/src/components/chat/duo_chat.vue +214 -238
- package/src/components/ui/duo_layout/duo_layout.md +0 -0
- package/src/components/ui/duo_layout/duo_layout.vue +95 -0
- package/src/components/ui/side_rail/side_rail.vue +56 -0
- package/src/index.js +2 -0
- package/translations.js +5 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
## [10.22.1](https://gitlab.com/gitlab-org/duo-ui/compare/v10.22.0...v10.22.1) (2025-09-12)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* **siderail:** fixed layout style and storybook ([a9b470b](https://gitlab.com/gitlab-org/duo-ui/commit/a9b470b3f46d2235267b5243c4c50cff60acf87b))
|
|
7
|
+
|
|
8
|
+
# [10.22.0](https://gitlab.com/gitlab-org/duo-ui/compare/v10.21.0...v10.22.0) (2025-09-12)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* **siderail:** added chat layout and siderail ([17c61cc](https://gitlab.com/gitlab-org/duo-ui/commit/17c61cc9c523294242cccdb6f6296f9a5a555f73))
|
|
14
|
+
|
|
1
15
|
# [10.21.0](https://gitlab.com/gitlab-org/duo-ui/compare/v10.20.0...v10.21.0) (2025-09-11)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import throttle from 'lodash/throttle';
|
|
2
|
-
import
|
|
3
|
-
import { GlButton, GlAlert, GlFormInputGroup, GlFormTextarea, GlForm, GlExperimentBadge, GlCard, GlDropdownItem, GlSafeHtmlDirective } from '@gitlab/ui';
|
|
2
|
+
import { GlButton, GlFormTextarea, GlForm, GlCard, GlDropdownItem, GlSafeHtmlDirective } from '@gitlab/ui';
|
|
4
3
|
import { translate, sprintf, translatePlural } from '@gitlab/ui/dist/utils/i18n';
|
|
5
4
|
import { badgeTypes, badgeTypeValidator, MAX_PROMPT_LENGTH, PROMPT_LENGTH_WARNING, CHAT_RESET_MESSAGE, CHAT_INCLUDE_MESSAGE, MESSAGE_MODEL_ROLES, CHAT_BASE_COMMANDS } from '../chat/constants';
|
|
6
5
|
import { VIEW_TYPES } from '../chat/components/duo_chat_header/constants';
|
|
@@ -14,9 +13,10 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
|
14
13
|
const i18n = {
|
|
15
14
|
CHAT_DEFAULT_TITLE: translate('AgenticDuoChat.chatDefaultTitle', 'GitLab Duo Agentic Chat'),
|
|
16
15
|
CHAT_HISTORY_TITLE: translate('AgenticDuoChat.chatHistoryTitle', 'Chat history'),
|
|
17
|
-
CHAT_DISCLAMER: translate('AgenticDuoChat.chatDisclamer', '
|
|
16
|
+
CHAT_DISCLAMER: translate('AgenticDuoChat.chatDisclamer', 'Responses may be inaccurate. Verify before use.'),
|
|
18
17
|
CHAT_EMPTY_STATE_TITLE: translate('AgenticDuoChat.chatEmptyStateTitle', '👋 I am GitLab Duo Agentic Chat, your personal AI-powered assistant. How can I help you today?'),
|
|
19
|
-
CHAT_PROMPT_PLACEHOLDER_DEFAULT: translate('AgenticDuoChat.chatPromptPlaceholderDefault', '
|
|
18
|
+
CHAT_PROMPT_PLACEHOLDER_DEFAULT: translate('AgenticDuoChat.chatPromptPlaceholderDefault', "Let's work through this together..."),
|
|
19
|
+
CHAT_MODEL_PLACEHOLDER: translate('AgenticDuoChat.chatModelPlaceholder', 'GitLab Duo Agentic Chat'),
|
|
20
20
|
CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: translate('AgenticDuoChat.chatPromptPlaceholderWithCommands', 'Type /help to learn more'),
|
|
21
21
|
CHAT_SUBMIT_LABEL: translate('AgenticDuoChat.chatSubmitLabel', 'Send chat message.'),
|
|
22
22
|
CHAT_CANCEL_LABEL: translate('AgenticDuoChat.chatCancelLabel', 'Cancel'),
|
|
@@ -45,19 +45,15 @@ var script = {
|
|
|
45
45
|
name: 'DuoChat',
|
|
46
46
|
components: {
|
|
47
47
|
GlButton,
|
|
48
|
-
GlAlert,
|
|
49
|
-
GlFormInputGroup,
|
|
50
48
|
GlFormTextarea,
|
|
51
49
|
GlForm,
|
|
52
|
-
GlExperimentBadge,
|
|
53
50
|
DuoChatLoader,
|
|
54
51
|
DuoChatPredefinedPrompts,
|
|
55
52
|
DuoChatConversation,
|
|
56
53
|
DuoChatHeader,
|
|
57
54
|
DuoChatThreads,
|
|
58
55
|
GlCard,
|
|
59
|
-
GlDropdownItem
|
|
60
|
-
VueResizable
|
|
56
|
+
GlDropdownItem
|
|
61
57
|
},
|
|
62
58
|
directives: {
|
|
63
59
|
SafeHtml: GlSafeHtmlDirective
|
|
@@ -283,7 +279,6 @@ var script = {
|
|
|
283
279
|
},
|
|
284
280
|
data() {
|
|
285
281
|
return {
|
|
286
|
-
isHidden: false,
|
|
287
282
|
prompt: '',
|
|
288
283
|
scrolledToBottom: true,
|
|
289
284
|
activeCommandIndex: 0,
|
|
@@ -387,7 +382,6 @@ var script = {
|
|
|
387
382
|
if (!loading && !this.isStreaming) {
|
|
388
383
|
this.canSubmit = true; // Re-enable submit button when loading stops
|
|
389
384
|
}
|
|
390
|
-
this.isHidden = false;
|
|
391
385
|
},
|
|
392
386
|
isStreaming(streaming) {
|
|
393
387
|
if (!streaming && !this.isLoading) {
|
|
@@ -426,14 +420,10 @@ var script = {
|
|
|
426
420
|
this.focusChatInput();
|
|
427
421
|
});
|
|
428
422
|
},
|
|
429
|
-
updateSize(e) {
|
|
430
|
-
this.$emit('chat-resize', e);
|
|
431
|
-
},
|
|
432
423
|
compositionEnd() {
|
|
433
424
|
this.compositionJustEnded = true;
|
|
434
425
|
},
|
|
435
426
|
hideChat() {
|
|
436
|
-
this.isHidden = true;
|
|
437
427
|
/**
|
|
438
428
|
* Emitted when clicking the cross in the title and the chat gets closed.
|
|
439
429
|
*/
|
|
@@ -687,28 +677,19 @@ var script = {
|
|
|
687
677
|
const __vue_script__ = script;
|
|
688
678
|
|
|
689
679
|
/* template */
|
|
690
|
-
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.shouldRenderResizable ? '
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
'!gl-shadow-none',
|
|
704
|
-
'form-control',
|
|
705
|
-
'gl-form-input',
|
|
706
|
-
'gl-form-textarea',
|
|
707
|
-
{ 'gl-truncate': !_vm.prompt } ],"aria-label":"Chat prompt input","autofocus":""},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"z",undefined,$event.key,undefined)){ return null; }if(!$event.ctrlKey){ return null; }if($event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.handleUndo.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"z",undefined,$event.key,undefined)){ return null; }if(!$event.metaKey){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey){ return null; }return _vm.handleUndo.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"z",undefined,$event.key,undefined)){ return null; }if(!$event.ctrlKey){ return null; }if(!$event.shiftKey){ return null; }if($event.altKey||$event.metaKey){ return null; }return _vm.handleRedo.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"z",undefined,$event.key,undefined)){ return null; }if(!$event.metaKey){ return null; }if(!$event.shiftKey){ return null; }if($event.ctrlKey||$event.altKey){ return null; }return _vm.handleRedo.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"y",undefined,$event.key,undefined)){ return null; }if(!$event.ctrlKey){ return null; }if($event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.handleRedo.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"y",undefined,$event.key,undefined)){ return null; }if(!$event.metaKey){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey){ return null; }return _vm.handleRedo.apply(null, arguments)}],"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)}},scopedSlots:_vm._u([{key:"remaining-character-count-text",fn:function(ref){
|
|
708
|
-
var count = ref.count;
|
|
709
|
-
return [(count <= _vm.promptLengthWarningCount)?_c('span',{staticClass:"gl-absolute gl-bottom-[-25px] gl-right-px gl-pr-3"},[_vm._v("\n "+_vm._s(_vm.remainingCharacterCountMessage(count))+"\n ")]):_vm._e()]}},{key:"character-count-over-limit-text",fn:function(ref){
|
|
710
|
-
var count = ref.count;
|
|
711
|
-
return [_c('span',{staticClass:"gl-absolute gl-bottom-[-25px] gl-right-px gl-pr-3"},[_vm._v(_vm._s(_vm.overLimitCharacterCountMessage(count)))])]}}],null,false,578626568),model:{value:(_vm.prompt),callback:function ($$v) {_vm.prompt=$$v;},expression:"prompt"}})],1)])],1),_vm._v(" "),_vm._t("footer-controls"),_vm._v(" "),_c('p',{staticClass:"gl-mb-0 gl-mt-3 gl-px-4 gl-text-sm gl-text-secondary",class:{ 'gl-mt-6 sm:gl-mt-3 sm:gl-max-w-1/2': _vm.prompt.length >= _vm.maxPromptLengthWarning }},[_vm._v("\n "+_vm._s(_vm.$options.i18n.CHAT_DISCLAMER)+"\n ")])],2):_vm._e()],1):_vm._e()])};
|
|
680
|
+
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"markdown-code-block duo-chat gl-bottom-0 gl-flex gl-max-h-full gl-flex-col",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,"session-id":_vm.sessionId,"agents":_vm.agents},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-flex gl-flex-1 gl-flex-grow gl-flex-col gl-overflow-y-auto gl-overscroll-contain gl-bg-inherit",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-mt-auto gl-p-5",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,"show-delimiter":index > 0,"with-feedback":_vm.withFeedback,"is-tool-approval-processing":_vm.isToolApprovalProcessing,"working-directory":_vm.workingDirectory},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet,"copy-code-snippet":_vm.onCopyCodeSnippet,"copy-message":_vm.onCopyMessage,"get-context-item-content":_vm.onGetContextItemContent,"approve-tool":_vm.onApproveToolCall,"deny-tool":_vm.onDenyToolCall,"open-file-path":_vm.onOpenFilePath}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('div',{key:"empty-state-message",staticClass:"duo-chat-message gl-rounded-bl-none 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-relative gl-z-2 gl-shrink-0 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('div',{staticClass:"duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-flex-col gl-rounded-bl-[12px] gl-rounded-br-[18px] gl-rounded-tl-[12px] gl-rounded-tr-[12px] gl-align-top"},[_c('div',{staticClass:"gl-flex gl-justify-between gl-border-0 gl-border-b-1 gl-border-solid gl-border-[#DCDCDE] gl-px-4 gl-py-4"},[_c('div',[_vm._v(_vm._s(_vm.$options.i18n.CHAT_MODEL_PLACEHOLDER))]),_vm._v(" "),_c('div',[_vm._t("agentic-switch")],2)]),_vm._v(" "),_c('div',{staticClass:"gl-h-[40px] gl-grow",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",attrs:{"disabled":!_vm.canSubmit,"data-testid":"chat-prompt-input","placeholder":_vm.inputPlaceholder,"character-count-limit":_vm.maxPromptLength,"textarea-classes":[
|
|
681
|
+
'!gl-h-full',
|
|
682
|
+
'!gl-bg-transparent',
|
|
683
|
+
'!gl-py-4',
|
|
684
|
+
'!gl-shadow-none',
|
|
685
|
+
'form-control',
|
|
686
|
+
'gl-form-input',
|
|
687
|
+
'gl-form-textarea',
|
|
688
|
+
{ 'gl-truncate': !_vm.prompt } ],"aria-label":"Chat prompt input","autofocus":""},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"z",undefined,$event.key,undefined)){ return null; }if(!$event.ctrlKey){ return null; }if($event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.handleUndo.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"z",undefined,$event.key,undefined)){ return null; }if(!$event.metaKey){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey){ return null; }return _vm.handleUndo.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"z",undefined,$event.key,undefined)){ return null; }if(!$event.ctrlKey){ return null; }if(!$event.shiftKey){ return null; }if($event.altKey||$event.metaKey){ return null; }return _vm.handleRedo.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"z",undefined,$event.key,undefined)){ return null; }if(!$event.metaKey){ return null; }if(!$event.shiftKey){ return null; }if($event.ctrlKey||$event.altKey){ return null; }return _vm.handleRedo.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"y",undefined,$event.key,undefined)){ return null; }if(!$event.ctrlKey){ return null; }if($event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.handleRedo.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"y",undefined,$event.key,undefined)){ return null; }if(!$event.metaKey){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey){ return null; }return _vm.handleRedo.apply(null, arguments)}],"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)}},scopedSlots:_vm._u([{key:"remaining-character-count-text",fn:function(ref){
|
|
689
|
+
var count = ref.count;
|
|
690
|
+
return [(count <= _vm.promptLengthWarningCount)?_c('span',{staticClass:"gl-absolute gl-bottom-[-25px] gl-right-px gl-pr-3"},[_vm._v("\n "+_vm._s(_vm.remainingCharacterCountMessage(count))+"\n ")]):_vm._e()]}},{key:"character-count-over-limit-text",fn:function(ref){
|
|
691
|
+
var count = ref.count;
|
|
692
|
+
return [_c('span',{staticClass:"gl-absolute gl-bottom-[-25px] gl-right-px gl-pr-3"},[_vm._v(_vm._s(_vm.overLimitCharacterCountMessage(count)))])]}}],null,false,839584904),model:{value:(_vm.prompt),callback:function ($$v) {_vm.prompt=$$v;},expression:"prompt"}})],1),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-justify-end gl-px-3 gl-pb-3"},[(_vm.canSubmit)?_c('gl-button',{staticClass:"gl-bottom-2 gl-right-2 gl-ml-auto !gl-rounded-full",attrs:{"icon":"paper-airplane","category":"primary","variant":"confirm","type":"submit","disabled":_vm.isPromptEmpty || !_vm.hasValidPrompt,"data-testid":"chat-prompt-submit-button","aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL}}):_c('gl-button',{staticClass:"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}})],1)])]),_vm._v(" "),_vm._t("footer-controls"),_vm._v(" "),_c('p',{staticClass:"gl-mb-0 gl-mt-3 gl-px-4 gl-text-sm gl-text-secondary",class:{ 'gl-mt-6 sm:gl-mt-3 sm:gl-max-w-1/2': _vm.prompt.length >= _vm.maxPromptLengthWarning }},[_vm._v("\n "+_vm._s(_vm.$options.i18n.CHAT_DISCLAMER)+"\n ")])],2):_vm._e()],1)};
|
|
712
693
|
var __vue_staticRenderFns__ = [];
|
|
713
694
|
|
|
714
695
|
/* style */
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import Vue from 'vue';
|
|
2
|
-
import { GlToast, GlAlert, GlBadge, GlButton, GlDropdown, GlDropdownItem,
|
|
2
|
+
import { GlToast, GlAlert, GlBadge, GlAvatar, GlButton, GlDropdown, GlDropdownItem, GlDisclosureDropdown, GlSafeHtmlDirective, GlTooltipDirective } from '@gitlab/ui';
|
|
3
3
|
import { translate } from '../../../../utils/i18n';
|
|
4
4
|
import { VIEW_TYPES } from './constants';
|
|
5
5
|
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
@@ -23,10 +23,10 @@ var script = {
|
|
|
23
23
|
components: {
|
|
24
24
|
GlAlert,
|
|
25
25
|
GlBadge,
|
|
26
|
+
GlAvatar,
|
|
26
27
|
GlButton,
|
|
27
28
|
GlDropdown,
|
|
28
29
|
GlDropdownItem,
|
|
29
|
-
GlExperimentBadge,
|
|
30
30
|
GlDisclosureDropdown
|
|
31
31
|
},
|
|
32
32
|
directives: {
|
|
@@ -121,11 +121,11 @@ var script = {
|
|
|
121
121
|
const __vue_script__ = script;
|
|
122
122
|
|
|
123
123
|
/* template */
|
|
124
|
-
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-shrink-0 gl-bg-default gl-p-0",attrs:{"data-testid":"chat-header"}},[_c('div',{staticClass:"
|
|
124
|
+
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-shrink-0 gl-bg-default gl-p-0",attrs:{"data-testid":"chat-header"}},[_c('div',{staticClass:"gl-border-b gl-flex gl-w-full gl-items-center gl-px-5 gl-py-3"},[(_vm.subtitle)?_c('h4',{staticClass:"gl-mb-0 gl-shrink-0 gl-overflow-hidden gl-text-ellipsis gl-whitespace-nowrap gl-pr-3 gl-text-sm gl-font-normal gl-text-subtle",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(" "),_c('div',{staticClass:"drawer-title gl-flex gl-items-center gl-justify-start gl-p-5"},[_c('div',{staticClass:"gl-flex gl-flex-1 gl-overflow-hidden"},[_c('gl-avatar',{staticClass:"gl-mr-3",attrs:{"size":32,"entity-name":_vm.title,"shape":"circle"}}),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-items-center"},[_c('h3',{staticClass:"gl-my-0 gl-text-[0.875rem]"},[_vm._v(_vm._s(_vm.title))])])],1),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-gap-3"},[(
|
|
125
125
|
_vm.isMultithreaded && (_vm.activeThreadId || _vm.currentView === _vm.VIEW_TYPES.LIST || _vm.hasManyAgents)
|
|
126
126
|
)?[(_vm.hasManyAgents)?_c('gl-disclosure-dropdown',{attrs:{"title":_vm.$options.i18n.CHAT_NEW_TOOLTIP,"toggle-text":_vm.$options.i18n.CHAT_NEW_TOOLTIP,"items":_vm.agents,"data-testid":"chat-new-button","variant":"confirm","category":"tertiary","size":"small","icon":"duo-chat-new","text-sr-only":"","aria-label":_vm.$options.i18n.CHAT_NEW_LABEL,"no-caret":""},on:{"action":_vm.startNewChat},scopedSlots:_vm._u([{key:"list-item",fn:function(ref){
|
|
127
127
|
var item = ref.item;
|
|
128
|
-
return [_c('span',{staticClass:"gl-flex gl-flex-col"},[_c('span',{attrs:{"clas":"gl-block"}},[_vm._v(_vm._s(item.name))]),_vm._v(" "),_c('span',{staticClass:"gl-overflow-hidden gl-text-ellipsis gl-whitespace-nowrap gl-text-sm"},[_vm._v(_vm._s(item.description))])])]}}],null,false,117082970)}):_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":_vm.$options.i18n.CHAT_NEW_TOOLTIP,"data-testid":"chat-new-button","variant":"confirm","category":"tertiary","size":"small","icon":"duo-chat-new","aria-label":_vm.$options.i18n.CHAT_NEW_LABEL},on:{"click":_vm.startNewChat}})]:_vm._e(),_vm._v(" "),(_vm.isMultithreaded && _vm.currentView === _vm.VIEW_TYPES.CHAT)?_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":_vm.$options.i18n.CHAT_HISTORY_TOOLTIP,"data-testid":"go-back-to-list-button","category":"tertiary","size":"small","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"}],attrs:{"title":_vm.$options.i18n.CHAT_BACK_TO_CHAT_TOOLTIP,"data-testid":"go-back-to-chat-button","category":"tertiary","size":"small","icon":"go-back","aria-label":_vm.$options.i18n.CHAT_BACK_TO_CHAT_TOOLTIP},on:{"click":function($event){return _vm.$emit('go-back-to-chat')}}}):_vm._e(),_vm._v(" "),(_vm.sessionId)?_c('gl-dropdown',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",modifiers:{"hover":true}}],attrs:{"icon":"ellipsis_v","category":"tertiary","text-sr-only":"","size":"small","text":_vm.$options.i18n.CHAT_DROPDOWN_MORE_OPTIONS,"title":_vm.$options.i18n.CHAT_DROPDOWN_MORE_OPTIONS,"no-caret":""}},[_c('gl-dropdown-item',{on:{"click":function($event){return _vm.copySessionIdToClipboard()}}},[_c('span',{staticClass:"gl-flex gl-items-center gl-gap-2"},[_c('span',{staticClass:"gl-flex-shrink-0"},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_COPY_TOOLTIP))]),_vm._v(" "),_c('gl-badge',{staticClass:"gl-flex-shrink"},[_c('span',{staticClass:"gl-max-w-12 gl-truncate",attrs:{"title":_vm.sessionId}},[_vm._v("\n "+_vm._s(_vm.sessionId)+"\n ")])])],1)])],1):_vm._e()
|
|
128
|
+
return [_c('span',{staticClass:"gl-flex gl-flex-col"},[_c('span',{attrs:{"clas":"gl-block"}},[_vm._v(_vm._s(item.name))]),_vm._v(" "),_c('span',{staticClass:"gl-overflow-hidden gl-text-ellipsis gl-whitespace-nowrap gl-text-sm"},[_vm._v(_vm._s(item.description))])])]}}],null,false,117082970)}):_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":_vm.$options.i18n.CHAT_NEW_TOOLTIP,"data-testid":"chat-new-button","variant":"confirm","category":"tertiary","size":"small","icon":"duo-chat-new","aria-label":_vm.$options.i18n.CHAT_NEW_LABEL},on:{"click":_vm.startNewChat}})]:_vm._e(),_vm._v(" "),(_vm.isMultithreaded && _vm.currentView === _vm.VIEW_TYPES.CHAT)?_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":_vm.$options.i18n.CHAT_HISTORY_TOOLTIP,"data-testid":"go-back-to-list-button","category":"tertiary","size":"small","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"}],attrs:{"title":_vm.$options.i18n.CHAT_BACK_TO_CHAT_TOOLTIP,"data-testid":"go-back-to-chat-button","category":"tertiary","size":"small","icon":"go-back","aria-label":_vm.$options.i18n.CHAT_BACK_TO_CHAT_TOOLTIP},on:{"click":function($event){return _vm.$emit('go-back-to-chat')}}}):_vm._e(),_vm._v(" "),(_vm.sessionId)?_c('gl-dropdown',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",modifiers:{"hover":true}}],attrs:{"icon":"ellipsis_v","category":"tertiary","text-sr-only":"","size":"small","text":_vm.$options.i18n.CHAT_DROPDOWN_MORE_OPTIONS,"title":_vm.$options.i18n.CHAT_DROPDOWN_MORE_OPTIONS,"no-caret":""}},[_c('gl-dropdown-item',{on:{"click":function($event){return _vm.copySessionIdToClipboard()}}},[_c('span',{staticClass:"gl-flex gl-items-center gl-gap-2"},[_c('span',{staticClass:"gl-flex-shrink-0"},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_COPY_TOOLTIP))]),_vm._v(" "),_c('gl-badge',{staticClass:"gl-flex-shrink"},[_c('span',{staticClass:"gl-max-w-12 gl-truncate",attrs:{"title":_vm.sessionId}},[_vm._v("\n "+_vm._s(_vm.sessionId)+"\n ")])])],1)])],1):_vm._e()],2)]),_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)};
|
|
129
129
|
var __vue_staticRenderFns__ = [];
|
|
130
130
|
|
|
131
131
|
/* style */
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import throttle from 'lodash/throttle';
|
|
2
|
-
import
|
|
3
|
-
import { GlButton, GlAlert, GlFormInputGroup, GlFormTextarea, GlForm, GlExperimentBadge, GlCard, GlDropdownItem, GlSafeHtmlDirective } from '@gitlab/ui';
|
|
2
|
+
import { GlButton, GlFormTextarea, GlForm, GlCard, GlDropdownItem, GlSafeHtmlDirective } from '@gitlab/ui';
|
|
4
3
|
import { translate } from '../../utils/i18n';
|
|
5
|
-
import { badgeTypes, badgeTypeValidator, CHAT_RESET_MESSAGE, CHAT_INCLUDE_MESSAGE, MESSAGE_MODEL_ROLES, CHAT_CLEAR_MESSAGE, CHAT_NEW_MESSAGE } from './constants';
|
|
4
|
+
import { badgeTypes, badgeTypeValidator, MAX_PROMPT_LENGTH, PROMPT_LENGTH_WARNING, CHAT_RESET_MESSAGE, CHAT_INCLUDE_MESSAGE, MESSAGE_MODEL_ROLES, CHAT_CLEAR_MESSAGE, CHAT_NEW_MESSAGE } from './constants';
|
|
6
5
|
import { VIEW_TYPES } from './components/duo_chat_header/constants';
|
|
7
6
|
import DuoChatLoader from './components/duo_chat_loader/duo_chat_loader';
|
|
8
7
|
import DuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts';
|
|
@@ -16,10 +15,11 @@ const i18n = {
|
|
|
16
15
|
CHAT_HISTORY_TITLE: translate('GlDuoChat.chatHistoryTitle', 'Chat history'),
|
|
17
16
|
CHAT_DISCLAMER: translate('GlDuoChat.chatDisclamer', 'Responses may be inaccurate. Verify before use.'),
|
|
18
17
|
CHAT_EMPTY_STATE_TITLE: translate('DuoChat.chatEmptyStateTitle', '👋 I am GitLab Duo Chat, your personal AI-powered assistant. How can I help you today?'),
|
|
19
|
-
CHAT_PROMPT_PLACEHOLDER_DEFAULT: translate('DuoChat.chatPromptPlaceholderDefault', '
|
|
18
|
+
CHAT_PROMPT_PLACEHOLDER_DEFAULT: translate('DuoChat.chatPromptPlaceholderDefault', "Let's work through this together..."),
|
|
20
19
|
CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: translate('DuoChat.chatPromptPlaceholderWithCommands', 'Type /help to learn more'),
|
|
21
20
|
CHAT_SUBMIT_LABEL: translate('DuoChat.chatSubmitLabel', 'Send chat message.'),
|
|
22
21
|
CHAT_CANCEL_LABEL: translate('DuoChat.chatCancelLabel', 'Cancel'),
|
|
22
|
+
CHAT_MODEL_PLACEHOLDER: translate('DuoChat.chatModelPlaceholder', 'GitLab Duo Chat'),
|
|
23
23
|
CHAT_DEFAULT_PREDEFINED_PROMPTS: [translate('DuoChat.chatDefaultPredefinedPromptsChangePassword', 'How do I change my password in GitLab?'), translate('DuoChat.chatDefaultPredefinedPromptsForkProject', 'How do I fork a project?'), translate('DuoChat.chatDefaultPredefinedPromptsCloneRepository', 'How do I clone a repository?'), translate('DuoChat.chatDefaultPredefinedPromptsCreateTemplate', 'How do I create a template?')]
|
|
24
24
|
};
|
|
25
25
|
const isMessage = item => Boolean(item) && (item === null || item === void 0 ? void 0 : item.role);
|
|
@@ -45,53 +45,20 @@ var script = {
|
|
|
45
45
|
name: 'DuoChat',
|
|
46
46
|
components: {
|
|
47
47
|
GlButton,
|
|
48
|
-
GlAlert,
|
|
49
|
-
GlFormInputGroup,
|
|
50
48
|
GlFormTextarea,
|
|
51
49
|
GlForm,
|
|
52
|
-
GlExperimentBadge,
|
|
53
50
|
DuoChatLoader,
|
|
54
51
|
DuoChatPredefinedPrompts,
|
|
55
52
|
DuoChatConversation,
|
|
56
53
|
DuoChatHeader,
|
|
57
54
|
DuoChatThreads,
|
|
58
55
|
GlCard,
|
|
59
|
-
GlDropdownItem
|
|
60
|
-
VueResizable
|
|
56
|
+
GlDropdownItem
|
|
61
57
|
},
|
|
62
58
|
directives: {
|
|
63
59
|
SafeHtml: GlSafeHtmlDirective
|
|
64
60
|
},
|
|
65
61
|
props: {
|
|
66
|
-
/**
|
|
67
|
-
* Determines if the component should be resizable. When true, it renders inside
|
|
68
|
-
* a `vue-resizable` wrapper; otherwise, a standard `div` is used.
|
|
69
|
-
*/
|
|
70
|
-
shouldRenderResizable: {
|
|
71
|
-
type: Boolean,
|
|
72
|
-
required: false,
|
|
73
|
-
default: false
|
|
74
|
-
},
|
|
75
|
-
/**
|
|
76
|
-
* Defines the dimensions of the chat container when resizable.
|
|
77
|
-
* By default, the height is set to match the height of the browser window,
|
|
78
|
-
* and the width is fixed at 400px. The `top` position is left undefined,
|
|
79
|
-
* allowing it to be dynamically adjusted if needed.
|
|
80
|
-
*/
|
|
81
|
-
dimensions: {
|
|
82
|
-
type: Object,
|
|
83
|
-
required: false,
|
|
84
|
-
default: () => ({
|
|
85
|
-
width: undefined,
|
|
86
|
-
height: undefined,
|
|
87
|
-
top: undefined,
|
|
88
|
-
left: undefined,
|
|
89
|
-
maxWidth: undefined,
|
|
90
|
-
minWidth: 400,
|
|
91
|
-
maxHeight: undefined,
|
|
92
|
-
minHeight: 400
|
|
93
|
-
})
|
|
94
|
-
},
|
|
95
62
|
/**
|
|
96
63
|
* The title of the chat/feature.
|
|
97
64
|
*/
|
|
@@ -258,11 +225,15 @@ var script = {
|
|
|
258
225
|
required: false,
|
|
259
226
|
default: () => ['en-US', 'en'],
|
|
260
227
|
validator: localeValidator
|
|
228
|
+
},
|
|
229
|
+
shouldRenderResizable: {
|
|
230
|
+
type: Boolean,
|
|
231
|
+
required: false,
|
|
232
|
+
default: false
|
|
261
233
|
}
|
|
262
234
|
},
|
|
263
235
|
data() {
|
|
264
236
|
return {
|
|
265
|
-
isHidden: false,
|
|
266
237
|
prompt: '',
|
|
267
238
|
scrolledToBottom: true,
|
|
268
239
|
activeCommandIndex: 0,
|
|
@@ -270,7 +241,10 @@ var script = {
|
|
|
270
241
|
compositionJustEnded: false,
|
|
271
242
|
contextItemsMenuIsOpen: false,
|
|
272
243
|
contextItemMenuRef: null,
|
|
273
|
-
currentView: this.multiThreadedView
|
|
244
|
+
currentView: this.multiThreadedView,
|
|
245
|
+
maxPromptLength: MAX_PROMPT_LENGTH,
|
|
246
|
+
maxPromptLengthWarning: PROMPT_LENGTH_WARNING,
|
|
247
|
+
promptLengthWarningCount: MAX_PROMPT_LENGTH - PROMPT_LENGTH_WARNING
|
|
274
248
|
};
|
|
275
249
|
},
|
|
276
250
|
computed: {
|
|
@@ -365,7 +339,6 @@ var script = {
|
|
|
365
339
|
if (!newVal && !this.isStreaming) {
|
|
366
340
|
this.displaySubmitButton = true; // Re-enable submit button when loading stops
|
|
367
341
|
}
|
|
368
|
-
this.isHidden = false;
|
|
369
342
|
},
|
|
370
343
|
isStreaming(newVal) {
|
|
371
344
|
if (!newVal && !this.isLoading) {
|
|
@@ -404,14 +377,10 @@ var script = {
|
|
|
404
377
|
this.focusChatInput();
|
|
405
378
|
});
|
|
406
379
|
},
|
|
407
|
-
updateSize(e) {
|
|
408
|
-
this.$emit('chat-resize', e);
|
|
409
|
-
},
|
|
410
380
|
compositionEnd() {
|
|
411
381
|
this.compositionJustEnded = true;
|
|
412
382
|
},
|
|
413
383
|
hideChat() {
|
|
414
|
-
this.isHidden = true;
|
|
415
384
|
/**
|
|
416
385
|
* Emitted when clicking the cross in the title and the chat gets closed.
|
|
417
386
|
*/
|
|
@@ -467,10 +436,10 @@ var script = {
|
|
|
467
436
|
(_this$$refs$anchor = this.$refs.anchor) === null || _this$$refs$anchor === void 0 ? void 0 : (_this$$refs$anchor$sc = _this$$refs$anchor.scrollIntoView) === null || _this$$refs$anchor$sc === void 0 ? void 0 : _this$$refs$anchor$sc.call(_this$$refs$anchor);
|
|
468
437
|
},
|
|
469
438
|
focusChatInput() {
|
|
470
|
-
var _this$$refs$prompt, _this$$refs$prompt$$e;
|
|
439
|
+
var _this$$refs$prompt, _this$$refs$prompt$$e, _this$$refs$prompt$$e2, _this$$refs$prompt$$e3;
|
|
471
440
|
// This method is also called directly by consumers of this component
|
|
472
441
|
// https://gitlab.com/gitlab-org/gitlab-vscode-extension/-/blob/dae2d4669ab4da327921492a2962beae8a05c290/webviews/vue2/gitlab_duo_chat/src/App.vue#L109
|
|
473
|
-
(_this$$refs$prompt = this.$refs.prompt) === null || _this$$refs$prompt === void 0 ? void 0 : (_this$$refs$prompt$$e = _this$$refs$prompt.$el) === null || _this$$refs$prompt$$e === void 0 ? void 0 : _this$$refs$prompt$$e.focus();
|
|
442
|
+
(_this$$refs$prompt = this.$refs.prompt) === null || _this$$refs$prompt === void 0 ? void 0 : (_this$$refs$prompt$$e = _this$$refs$prompt.$el) === null || _this$$refs$prompt$$e === void 0 ? void 0 : (_this$$refs$prompt$$e2 = _this$$refs$prompt$$e.querySelector) === null || _this$$refs$prompt$$e2 === void 0 ? void 0 : (_this$$refs$prompt$$e3 = _this$$refs$prompt$$e2.call(_this$$refs$prompt$$e, 'textarea')) === null || _this$$refs$prompt$$e3 === void 0 ? void 0 : _this$$refs$prompt$$e3.focus();
|
|
474
443
|
},
|
|
475
444
|
onTrackFeedback(event) {
|
|
476
445
|
/**
|
|
@@ -626,6 +595,12 @@ var script = {
|
|
|
626
595
|
handleRedo(event) {
|
|
627
596
|
event.preventDefault();
|
|
628
597
|
document.execCommand('redo');
|
|
598
|
+
},
|
|
599
|
+
remainingCharacterCountMessage(count) {
|
|
600
|
+
return `${count} characters remaining`;
|
|
601
|
+
},
|
|
602
|
+
overLimitCharacterCountMessage(count) {
|
|
603
|
+
return `${Math.abs(count)} characters over limit`;
|
|
629
604
|
}
|
|
630
605
|
},
|
|
631
606
|
i18n
|
|
@@ -635,13 +610,19 @@ var script = {
|
|
|
635
610
|
const __vue_script__ = script;
|
|
636
611
|
|
|
637
612
|
/* template */
|
|
638
|
-
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.shouldRenderResizable ? '
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
613
|
+
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"markdown-code-block duo-chat gl-bottom-0 gl-flex gl-max-h-full gl-flex-col",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,"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,"go-back-to-chat":_vm.onGoBackToChat,"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-flex gl-flex-1 gl-flex-grow gl-flex-col gl-overflow-y-auto gl-overscroll-contain gl-bg-inherit",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-mt-auto gl-p-5",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,"trusted-urls":_vm.trustedUrls},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet,"copy-code-snippet":_vm.onCopyCodeSnippet,"copy-message":_vm.onCopyMessage,"get-context-item-content":_vm.onGetContextItemContent,"open-file-path":_vm.onOpenFilePath}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('div',{key:"empty-state-message",staticClass:"duo-chat-message gl-rounded-bl-none 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-relative gl-z-2 gl-shrink-0 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('div',{staticClass:"duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-flex-col gl-rounded-bl-[12px] gl-rounded-br-[18px] gl-rounded-tl-[12px] gl-rounded-tr-[12px] gl-align-top"},[_c('div',{staticClass:"gl-flex gl-justify-between gl-border-0 gl-border-b-1 gl-border-solid gl-border-[#DCDCDE] gl-px-4 gl-py-4"},[_c('div',[_vm._v(_vm._s(_vm.$options.i18n.CHAT_MODEL_PLACEHOLDER))]),_vm._v(" "),_c('div',[_vm._t("agentic-switch")],2)]),_vm._v(" "),_c('div',{staticClass:"gl-h-[40px] gl-grow",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",attrs:{"data-testid":"chat-prompt-input","textarea-classes":[
|
|
614
|
+
'!gl-h-full',
|
|
615
|
+
'!gl-bg-transparent',
|
|
616
|
+
'!gl-py-4',
|
|
617
|
+
'!gl-shadow-none',
|
|
618
|
+
'form-control',
|
|
619
|
+
'gl-form-input',
|
|
620
|
+
'gl-form-textarea',
|
|
621
|
+
{ 'gl-truncate': !_vm.prompt } ],"placeholder":_vm.inputPlaceholder,"character-count-limit":_vm.maxPromptLength,"autofocus":""},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"z",undefined,$event.key,undefined)){ return null; }if(!$event.ctrlKey){ return null; }if($event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.handleUndo.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"z",undefined,$event.key,undefined)){ return null; }if(!$event.metaKey){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey){ return null; }return _vm.handleUndo.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"z",undefined,$event.key,undefined)){ return null; }if(!$event.ctrlKey){ return null; }if(!$event.shiftKey){ return null; }return _vm.handleRedo.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"z",undefined,$event.key,undefined)){ return null; }if(!$event.metaKey){ return null; }if(!$event.shiftKey){ return null; }return _vm.handleRedo.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"y",undefined,$event.key,undefined)){ return null; }if(!$event.ctrlKey){ return null; }return _vm.handleRedo.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"y",undefined,$event.key,undefined)){ return null; }if(!$event.metaKey){ return null; }return _vm.handleRedo.apply(null, arguments)}],"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)}},scopedSlots:_vm._u([{key:"remaining-character-count-text",fn:function(ref){
|
|
622
|
+
var count = ref.count;
|
|
623
|
+
return [(count <= _vm.promptLengthWarningCount)?_c('span',{staticClass:"gl-absolute gl-bottom-[-25px] gl-right-px gl-pr-3"},[_vm._v("\n "+_vm._s(_vm.remainingCharacterCountMessage(count))+"\n ")]):_vm._e()]}},{key:"character-count-over-limit-text",fn:function(ref){
|
|
624
|
+
var count = ref.count;
|
|
625
|
+
return [_c('span',{staticClass:"gl-absolute gl-bottom-[-25px] gl-right-px gl-pr-3"},[_vm._v(_vm._s(_vm.overLimitCharacterCountMessage(count)))])]}}],null,false,839584904),model:{value:(_vm.prompt),callback:function ($$v) {_vm.prompt=$$v;},expression:"prompt"}})],1),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-justify-end gl-px-3 gl-pb-3"},[(_vm.displaySubmitButton)?_c('gl-button',{staticClass:"gl-bottom-2 gl-right-2 gl-ml-auto !gl-rounded-full",attrs:{"icon":"paper-airplane","category":"primary","variant":"confirm","type":"submit","data-testid":"chat-prompt-submit-button","disabled":_vm.isPromptEmpty,"aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL}}):_c('gl-button',{staticClass:"gl-bottom-2 gl-right-2 gl-ml-auto !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}})],1)])]),_vm._v(" "),_vm._t("footer-controls"),_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 ")])],2):_vm._e()],1)};
|
|
645
626
|
var __vue_staticRenderFns__ = [];
|
|
646
627
|
|
|
647
628
|
/* style */
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import VueResizable from 'vue-resizable';
|
|
2
|
+
import SideRail from '../side_rail/side_rail';
|
|
3
|
+
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
4
|
+
|
|
5
|
+
var script = {
|
|
6
|
+
name: 'DuoLayout',
|
|
7
|
+
components: {
|
|
8
|
+
VueResizable,
|
|
9
|
+
SideRail
|
|
10
|
+
},
|
|
11
|
+
props: {
|
|
12
|
+
/**
|
|
13
|
+
* Determines if the component should be resizable. When true, it renders inside
|
|
14
|
+
* a `vue-resizable` wrapper; otherwise, a standard `div` is used.
|
|
15
|
+
*/
|
|
16
|
+
shouldRenderResizable: {
|
|
17
|
+
type: Boolean,
|
|
18
|
+
required: false,
|
|
19
|
+
default: false
|
|
20
|
+
},
|
|
21
|
+
/**
|
|
22
|
+
* Defines the dimensions of the layout container when resizable.
|
|
23
|
+
* By default, the height is set to match the height of the browser window,
|
|
24
|
+
* and the width is fixed at 400px. The `top` position is left undefined,
|
|
25
|
+
* allowing it to be dynamically adjusted if needed.
|
|
26
|
+
*/
|
|
27
|
+
dimensions: {
|
|
28
|
+
type: Object,
|
|
29
|
+
required: false,
|
|
30
|
+
default: () => ({
|
|
31
|
+
width: undefined,
|
|
32
|
+
height: undefined,
|
|
33
|
+
top: undefined,
|
|
34
|
+
left: undefined,
|
|
35
|
+
maxWidth: undefined,
|
|
36
|
+
minWidth: 400,
|
|
37
|
+
maxHeight: undefined,
|
|
38
|
+
minHeight: 400
|
|
39
|
+
})
|
|
40
|
+
},
|
|
41
|
+
/**
|
|
42
|
+
* Whether the layout is hidden
|
|
43
|
+
*/
|
|
44
|
+
isHidden: {
|
|
45
|
+
type: Boolean,
|
|
46
|
+
required: false,
|
|
47
|
+
default: false
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
methods: {
|
|
51
|
+
updateSize(e) {
|
|
52
|
+
/**
|
|
53
|
+
* Emitted when the layout is resized
|
|
54
|
+
* @param {Object} e The resize event data
|
|
55
|
+
*/
|
|
56
|
+
this.$emit('resize', e);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
/* script */
|
|
62
|
+
const __vue_script__ = script;
|
|
63
|
+
|
|
64
|
+
/* template */
|
|
65
|
+
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.isHidden)?_c(_vm.shouldRenderResizable ? 'vue-resizable' : 'div',{tag:"component",class:{
|
|
66
|
+
'duo-chat-resizable': _vm.shouldRenderResizable,
|
|
67
|
+
'non-resizable-wrapper': !_vm.shouldRenderResizable,
|
|
68
|
+
},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,"data-testid":"duo-layout-component"},on:{"resize:end":_vm.updateSize}},[_c('aside',{staticClass:"markdown-code-block duo-chat gl-align-items gl-bottom-0 gl-flex gl-h-full gl-max-h-full gl-flex-row gl-bg-strong gl-py-3 gl-pl-3"},[_c('main',{staticClass:"content flex-none gl-flex gl-h-full gl-min-w-0 gl-grow gl-overflow-y-auto gl-rounded-[1rem] gl-bg-neutral-0"},[_vm._t("mainview")],2),_vm._v(" "),_c('aside',{staticClass:"gl-h-full gl-min-h-full gl-bg-strong gl-px-3 gl-py-2"},[_vm._t("siderail")],2)])]):_vm._e()};
|
|
69
|
+
var __vue_staticRenderFns__ = [];
|
|
70
|
+
|
|
71
|
+
/* style */
|
|
72
|
+
const __vue_inject_styles__ = undefined;
|
|
73
|
+
/* scoped */
|
|
74
|
+
const __vue_scope_id__ = undefined;
|
|
75
|
+
/* module identifier */
|
|
76
|
+
const __vue_module_identifier__ = undefined;
|
|
77
|
+
/* functional template */
|
|
78
|
+
const __vue_is_functional_template__ = false;
|
|
79
|
+
/* style inject */
|
|
80
|
+
|
|
81
|
+
/* style inject SSR */
|
|
82
|
+
|
|
83
|
+
/* style inject shadow dom */
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
const __vue_component__ = __vue_normalize__(
|
|
88
|
+
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
|
89
|
+
__vue_inject_styles__,
|
|
90
|
+
__vue_script__,
|
|
91
|
+
__vue_scope_id__,
|
|
92
|
+
__vue_is_functional_template__,
|
|
93
|
+
__vue_module_identifier__,
|
|
94
|
+
false,
|
|
95
|
+
undefined,
|
|
96
|
+
undefined,
|
|
97
|
+
undefined
|
|
98
|
+
);
|
|
99
|
+
|
|
100
|
+
export default __vue_component__;
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { GlTooltipDirective, GlButtonGroup, GlButton, GlAvatar } from '@gitlab/ui';
|
|
2
|
+
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
3
|
+
|
|
4
|
+
var script = {
|
|
5
|
+
name: 'SideRail',
|
|
6
|
+
directives: {
|
|
7
|
+
GlTooltip: GlTooltipDirective
|
|
8
|
+
},
|
|
9
|
+
components: {
|
|
10
|
+
GlButtonGroup,
|
|
11
|
+
GlButton,
|
|
12
|
+
GlAvatar
|
|
13
|
+
},
|
|
14
|
+
props: {
|
|
15
|
+
/**
|
|
16
|
+
* String to display the empty state of recent content
|
|
17
|
+
*/
|
|
18
|
+
buttons: {
|
|
19
|
+
type: Object,
|
|
20
|
+
required: false,
|
|
21
|
+
default: () => ({})
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
methods: {
|
|
25
|
+
onClick(buttonName) {
|
|
26
|
+
this.$emit('click', buttonName);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
/* script */
|
|
32
|
+
const __vue_script__ = script;
|
|
33
|
+
|
|
34
|
+
/* template */
|
|
35
|
+
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-button-group',{attrs:{"vertical":true}},[_vm._l((_vm.buttons),function(button,buttonName){return [(button.dividerBefore)?_c('div',{key:(buttonName + "-divider"),staticClass:"gl-mx-auto gl-my-3 gl-h-1 gl-w-5 gl-border-0 gl-border-t-1 gl-border-solid gl-border-[#7759C233]",attrs:{"name":"divider"}}):_vm._e(),_vm._v(" "),(button.render)?_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],key:(buttonName + "-button"),attrs:{"title":button.title,"category":"tertiary","variant":"default","size":"medium","icon":button.icon,"active-class":"gl-active"},on:{"click":function($event){return _vm.onClick(buttonName)}}},[(button.avatar)?_c('gl-avatar',{attrs:{"size":32,"entity-name":button.avatar,"shape":"circle"}}):_vm._e()],1):_vm._e()]})],2)};
|
|
36
|
+
var __vue_staticRenderFns__ = [];
|
|
37
|
+
|
|
38
|
+
/* style */
|
|
39
|
+
const __vue_inject_styles__ = undefined;
|
|
40
|
+
/* scoped */
|
|
41
|
+
const __vue_scope_id__ = undefined;
|
|
42
|
+
/* module identifier */
|
|
43
|
+
const __vue_module_identifier__ = undefined;
|
|
44
|
+
/* functional template */
|
|
45
|
+
const __vue_is_functional_template__ = false;
|
|
46
|
+
/* style inject */
|
|
47
|
+
|
|
48
|
+
/* style inject SSR */
|
|
49
|
+
|
|
50
|
+
/* style inject shadow dom */
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
const __vue_component__ = __vue_normalize__(
|
|
55
|
+
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
|
56
|
+
__vue_inject_styles__,
|
|
57
|
+
__vue_script__,
|
|
58
|
+
__vue_scope_id__,
|
|
59
|
+
__vue_is_functional_template__,
|
|
60
|
+
__vue_module_identifier__,
|
|
61
|
+
false,
|
|
62
|
+
undefined,
|
|
63
|
+
undefined,
|
|
64
|
+
undefined
|
|
65
|
+
);
|
|
66
|
+
|
|
67
|
+
export default __vue_component__;
|