@gitlab/ui 87.1.1 → 87.2.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [87.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v87.1.2...v87.2.0) (2024-07-26)
+
+
+### Features
+
+* **DuoWorkflow:** add component to take prompt ([3b7617d](https://gitlab.com/gitlab-org/gitlab-ui/commit/3b7617dcb12f2254f8d7844a86da4b908a6a8178))
+
+## [87.1.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v87.1.1...v87.1.2) (2024-07-26)
+
+
+### Bug Fixes
+
+* add cancel case to isStreaming state ([86e84bd](https://gitlab.com/gitlab-org/gitlab-ui/commit/86e84bd5db5782f603d0ca252420db792477bcd1))
+
 ## [87.1.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v87.1.0...v87.1.1) (2024-07-24)
 
 

package/dist/components/experimental/duo/chat/duo_chat.js

@@ -232,8 +232,11 @@ var script = {
       return ((_this$lastMessage = this.lastMessage) === null || _this$lastMessage === void 0 ? void 0 : _this$lastMessage.content) === CHAT_RESET_MESSAGE;
     },
     isStreaming() {
-      var _this$lastMessage2, _this$lastMessage2$ch, _this$lastMessage3, _this$lastMessage4;
-      return Boolean(((_this$lastMessage2 = this.lastMessage) === null || _this$lastMessage2 === void 0 ? void 0 : (_this$lastMessage2$ch = _this$lastMessage2.chunks) === null || _this$lastMessage2$ch === void 0 ? void 0 : _this$lastMessage2$ch.length) > 0 && !((_this$lastMessage3 = this.lastMessage) !== null && _this$lastMessage3 !== void 0 && _this$lastMessage3.content) || typeof ((_this$lastMessage4 = this.lastMessage) === null || _this$lastMessage4 === void 0 ? void 0 : _this$lastMessage4.chunkId) === 'number');
+      var _this$lastMessage2, _this$lastMessage3, _this$lastMessage3$ch, _this$lastMessage4, _this$lastMessage5;
+      if (this.canceledRequestIds.includes((_this$lastMessage2 = this.lastMessage) === null || _this$lastMessage2 === void 0 ? void 0 : _this$lastMessage2.requestId)) {
+        return false;
+      }
+      return Boolean(((_this$lastMessage3 = this.lastMessage) === null || _this$lastMessage3 === void 0 ? void 0 : (_this$lastMessage3$ch = _this$lastMessage3.chunks) === null || _this$lastMessage3$ch === void 0 ? void 0 : _this$lastMessage3$ch.length) > 0 && !((_this$lastMessage4 = this.lastMessage) !== null && _this$lastMessage4 !== void 0 && _this$lastMessage4.content) || typeof ((_this$lastMessage5 = this.lastMessage) === null || _this$lastMessage5 === void 0 ? void 0 : _this$lastMessage5.chunkId) === 'number');
     },
     filteredSlashCommands() {
       const caseInsensitivePrompt = this.prompt.toLowerCase();

package/dist/components/experimental/duo/workflow/components/duo_workflow_panel/duo_workflow_panel.js

@@ -0,0 +1,100 @@
+import GlIcon from '../../../../../base/icon/icon';
+import GlCollapse from '../../../../../base/collapse/collapse';
+import GlButton from '../../../../../base/button/button';
+import { GlTooltipDirective } from '../../../../../../directives/tooltip';
+import { translate } from '../../../../../../utils/i18n';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlDuoWorkflowPanel',
+  components: {
+    GlCollapse,
+    GlButton,
+    GlIcon
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
+  props: {
+    /**
+     * The icon to show in the header.
+     */
+    headerIcon: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * The text used as the title and aria-label for the button when the collapse is collapsed
+     */
+    expandPanelButtonTitle: {
+      type: String,
+      required: false,
+      default: translate('GlDuoWorkflowPanel.expandButtonTitle', 'Expand')
+    },
+    /**
+     * The text used as the title and aria-label for the button when the collapse is expanded
+     */
+    collapsePanelButtonTitle: {
+      type: String,
+      required: false,
+      default: translate('GlDuoWorkflowPanel.collapseButtonTitle', 'Collapse')
+    }
+  },
+  data() {
+    return {
+      expanded: true
+    };
+  },
+  computed: {
+    buttonIcon() {
+      return this.expanded ? 'chevron-up' : 'chevron-down';
+    },
+    buttonTitle() {
+      return this.expanded ? this.collapsePanelButtonTitle : this.expandPanelButtonTitle;
+    }
+  },
+  methods: {
+    toggleExpanded() {
+      this.expanded = !this.expanded;
+    }
+  }
+};
+
+/* 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',[_c('div',{staticClass:"gl-flex gl-flex-nowrap gl-items-center"},[(_vm.headerIcon)?_c('gl-icon',{staticClass:"gl-mr-3",attrs:{"name":_vm.headerIcon,"size":24}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-flex-grow gl-items-baseline"},[_c('h2',{staticClass:"gl-mb-0"},[_vm._t("title")],2),_vm._v(" "),_c('small',{staticClass:"gl-ml-3"},[_vm._t("subtitle")],2)]),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"category":"tertiary","icon":_vm.buttonIcon,"title":_vm.buttonTitle,"aria-label":_vm.buttonTitle},on:{"click":_vm.toggleExpanded}})],1),_vm._v(" "),_c('gl-collapse',{attrs:{"visible":_vm.expanded}},[_c('div',{staticClass:"gl-ml-7 gl-mt-4 gl-flex-grow"},[_vm._t("content")],2)])],1)};
+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/experimental/duo/workflow/components/duo_workflow_prompt/duo_workflow_prompt.js

@@ -0,0 +1,238 @@
+import GlDuoWorkflowPanel from '../duo_workflow_panel/duo_workflow_panel';
+import GlButton from '../../../../../base/button/button';
+import GlFormGroup from '../../../../../base/form/form_group/form_group';
+import GlFormTextarea from '../../../../../base/form/form_textarea/form_textarea';
+import GlFormInput from '../../../../../base/form/form_input/form_input';
+import { translate } from '../../../../../../utils/i18n';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlDuoWorkflowPrompt',
+  components: {
+    GlDuoWorkflowPanel,
+    GlButton,
+    GlFormGroup,
+    GlFormInput,
+    GlFormTextarea
+  },
+  props: {
+    /**
+     * The prompt the user has entered
+     */
+    prompt: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * The image to run the workflow in
+     */
+    image: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * The text for the title of the panel
+     */
+    title: {
+      type: String,
+      required: false,
+      default: translate('GlDuoWorkflowPrompt.title', 'Goal')
+    },
+    /**
+     * The summary of the ongoing workflow plan
+     */
+    summary: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Whether or not the panel is loading
+     */
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * The label of the prompt text area
+     *
+     * See `GlFormGroup` for text placement.
+     */
+    promptLabel: {
+      type: String,
+      required: false,
+      default: translate('GlDuoWorkflowPrompt.promptLabel', 'Description')
+    },
+    /**
+     * The label description of the prompt text area
+     *
+     * See `GlFormGroup` for text placement.
+     */
+    promptLabelDescription: {
+      type: String,
+      required: false,
+      default: translate('GlDuoWorkflowPrompt.promptLabelDescription', 'What would you like to do and how.')
+    },
+    /**
+     * The description of the prompt text area
+     *
+     * See `GlFormGroup` for text placement.
+     */
+    promptDescription: {
+      type: String,
+      required: false,
+      default: translate('GlDuoWorkflowPrompt.promptDescription', 'Be specific and include any requirements.')
+    },
+    /**
+     * The HTML ID of the textarea for the prompt
+     */
+    promptId: {
+      type: String,
+      required: false,
+      default: 'duo-workflow-prompt'
+    },
+    /**
+     * The label of the image input
+     */
+    imageLabel: {
+      type: String,
+      required: false,
+      default: translate('GlDuoWorkflowPrompt.imageLabel', 'Image')
+    },
+    /**
+     * The label description of the image input
+     *
+     * See `GlFormGroup` for text placement.
+     */
+    imageLabelDescription: {
+      type: String,
+      required: false,
+      default: translate('GlDuoWorkflowPrompt.imageLabelDescription', 'The container image to run the workflow in.')
+    },
+    /**
+     * The description of the image input
+     *
+     * See `GlFormGroup` for text placement.
+     */
+    imageDescription: {
+      type: String,
+      required: false,
+      default: translate('GlDuoWorkflowPrompt.imageDescription', 'It should have any tools necessary for the workflow installed.')
+    },
+    /**
+     * The ID of the image input
+     */
+    imageId: {
+      type: String,
+      required: false,
+      default: 'duo-workflow-image'
+    },
+    /**
+     * The text for the confirmation button. This button emits a `confirm` event.
+     */
+    confirmButtonText: {
+      type: String,
+      required: false,
+      default: translate('GlDuoWorkflowPrompt.confirmButtonText', 'Generate plan')
+    },
+    /**
+     * The text for the cancellation button. This button emits a `cancel` event.
+     */
+    cancelButtonText: {
+      type: String,
+      required: false,
+      default: translate('GlDuoWorkflowPrompt.cancelButtonText', 'Cancel')
+    },
+    /**
+     * The text used as the title and aria-label for the button when the collapse is collapsed
+     *
+     * See `GlDuoWorkflowPanel`
+     */
+    expandPanelButtonTitle: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * The text used as the title and aria-label for the button when the collapse is expanded
+     *
+     * See `GlDuoWorkflowPanel`
+     */
+    collapsePanelButtonTitle: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  methods: {
+    emitChange(prompt) {
+      /**
+       * Notify listeners about prompt change
+       * @param {string} prompt The newly entered prompt
+       */
+      this.$emit('update:prompt', prompt);
+    },
+    emitImage(image) {
+      /**
+       * Notify listeners about image change
+       * @param {string} image The newly entered image
+       */
+      this.$emit('update:image', image);
+    },
+    clickConfirm(event) {
+      /**
+       * Notify listeners about prompt submission
+       * @param {*} event A click event
+       */
+      this.$emit('confirm', event);
+    },
+    clickCancel(event) {
+      /**
+       * Notify listeners about prompt submission cancellation.
+       * @param {*} event A click event
+       */
+      this.$emit('cancel', event);
+    }
+  }
+};
+
+/* 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('gl-duo-workflow-panel',{attrs:{"header-icon":"issue-type-objective","expand-panel-button-title":_vm.expandPanelButtonTitle,"collapse-panel-button-title":_vm.collapsePanelButtonTitle},scopedSlots:_vm._u([{key:"title",fn:function(){return [_vm._v(_vm._s(_vm.title))]},proxy:true},{key:"subtitle",fn:function(){return [_vm._v(_vm._s(_vm.summary))]},proxy:true},{key:"content",fn:function(){return [_c('gl-form-group',{attrs:{"label":_vm.promptLabel,"label-for":_vm.promptId,"label-description":_vm.promptLabelDescription,"description":_vm.promptDescription}},[_c('gl-form-textarea',{attrs:{"id":_vm.promptId,"value":_vm.prompt,"disable":_vm.loading,"no-resize":false},on:{"input":_vm.emitChange}})],1),_vm._v(" "),_c('gl-form-group',{attrs:{"label":_vm.imageLabel,"label-for":_vm.imageId,"label-description":_vm.imageLabelDescription,"description":_vm.imageDescription}},[_c('gl-form-input',{attrs:{"id":_vm.imageId,"value":_vm.image,"disable":_vm.loading},on:{"input":_vm.emitImage}})],1),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-gap-3"},[_c('gl-button',{attrs:{"variant":"confirm","data-test-id":"duo-workflow-prompt-confirm","loading":_vm.loading},on:{"click":_vm.clickConfirm}},[_vm._v(_vm._s(_vm.confirmButtonText))]),_vm._v(" "),_c('gl-button',{attrs:{"data-test-id":"duo-workflow-prompt-cancel"},on:{"click":_vm.clickCancel}},[_vm._v(_vm._s(_vm.cancelButtonText))])],1)]},proxy:true}])})};
+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__;