@gitlab/ui 66.32.1 → 66.33.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [66.33.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.32.1...v66.33.0) (2023-10-17)
+
+
+### Features
+
+* **GlDuoChat:** Implemented component ([ce8a3b4](https://gitlab.com/gitlab-org/gitlab-ui/commit/ce8a3b417882d068a147719a4b7dfdeb91e7bb3b))
+
 ## [66.32.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.32.0...v66.32.1) (2023-10-17)
 
 

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

@@ -1,3 +1,4 @@
+const CHAT_RESET_MESSAGE = '/reset';
 const LOADING_TRANSITION_DURATION = 7500;
 const DOCUMENTATION_SOURCE_TYPES = {
   HANDBOOK: {
@@ -19,4 +20,4 @@ const MESSAGE_MODEL_ROLES = {
   assistant: 'assistant'
 };
 
-export { DOCUMENTATION_SOURCE_TYPES, LOADING_TRANSITION_DURATION, MESSAGE_MODEL_ROLES };
+export { CHAT_RESET_MESSAGE, DOCUMENTATION_SOURCE_TYPES, LOADING_TRANSITION_DURATION, MESSAGE_MODEL_ROLES };

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

@@ -0,0 +1,255 @@
+import throttle from 'lodash/throttle';
+import emptySvg from '@gitlab/svgs/dist/illustrations/empty-state/empty-activity-md.svg';
+import GlEmptyState from '../../../regions/empty_state/empty_state';
+import GlButton from '../../../base/button/button';
+import GlAlert from '../../../base/alert/alert';
+import GlFormInputGroup from '../../../base/form/form_input_group/form_input_group';
+import GlFormTextarea from '../../../base/form/form_textarea/form_textarea';
+import GlForm from '../../../base/form/form';
+import GlFormText from '../../../base/form/form_text/form_text';
+import GlExperimentBadge from '../../experiment_badge/experiment_badge';
+import { SafeHtmlDirective } from '../../../../directives/safe_html/safe_html';
+import GlDuoChatLoader from './components/duo_chat_loader/duo_chat_loader';
+import GlDuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts';
+import GlDuoChatConversation from './components/duo_chat_conversation/duo_chat_conversation';
+import { CHAT_RESET_MESSAGE } from './constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const i18n = {
+  CHAT_DEFAULT_TITLE: 'GitLab Duo Chat',
+  CHAT_CLOSE_LABEL: 'Close the Code Explanation',
+  CHAT_LEGAL_GENERATED_BY_AI: 'Responses generated by AI',
+  CHAT_EMPTY_STATE_TITLE: 'Ask a question',
+  CHAT_EMPTY_STATE_DESC: 'AI generated explanations will appear here.',
+  CHAT_PROMPT_PLACEHOLDER: 'GitLab Duo Chat',
+  CHAT_SUBMIT_LABEL: 'Send chat message.',
+  CHAT_LEGAL_DISCLAIMER: "May provide inappropriate responses not representative of GitLab's views. Do not input personal data.",
+  CHAT_DEFAULT_PREDEFINED_PROMPTS: ['How do I change my password in GitLab?', 'How do I fork a project?', 'How do I clone a repository?', 'How do I create a template?']
+};
+const isMessage = item => Boolean(item) && (item === null || item === void 0 ? void 0 : item.role);
+const itemsValidator = items => items.every(isMessage);
+var script = {
+  name: 'GlDuoChat',
+  components: {
+    GlEmptyState,
+    GlButton,
+    GlAlert,
+    GlFormInputGroup,
+    GlFormTextarea,
+    GlForm,
+    GlFormText,
+    GlExperimentBadge,
+    GlDuoChatLoader,
+    GlDuoChatPredefinedPrompts,
+    GlDuoChatConversation
+  },
+  directives: {
+    SafeHtml: SafeHtmlDirective
+  },
+  props: {
+    /**
+     * The title of the chat/feature.
+     */
+    title: {
+      type: String,
+      required: false,
+      default: i18n.CHAT_DEFAULT_TITLE
+    },
+    /**
+     * Array of messages to display in the chat.
+     */
+    messages: {
+      type: Array,
+      required: false,
+      default: () => [],
+      validator: itemsValidator
+    },
+    /**
+     * A non-recoverable error message to display in the chat.
+     */
+    error: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Whether the chat is currently fetching a response from AI.
+     */
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Whether the conversational interfaces should be enabled.
+     */
+    isChatAvailable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    /**
+     * Array of predefined prompts to display in the chat to start a conversation.
+     */
+    predefinedPrompts: {
+      type: Array,
+      required: false,
+      default: () => i18n.CHAT_DEFAULT_PREDEFINED_PROMPTS
+    },
+    /**
+     * URL to the experiment help page. This is passed down to the `GlExperimentBadge` component. Refer that component for more information.
+     */
+    experimentHelpPageUrl: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * The current tool's name to display in the loading message while waiting for a response from AI. Refer the `GlDuoChatLoader` component for more information.
+     */
+    toolName: {
+      type: String,
+      required: false,
+      default: i18n.CHAT_DEFAULT_TITLE
+    }
+  },
+  data() {
+    return {
+      isHidden: false,
+      prompt: '',
+      scrolledToBottom: true
+    };
+  },
+  computed: {
+    hasMessages() {
+      var _this$messages;
+      return ((_this$messages = this.messages) === null || _this$messages === void 0 ? void 0 : _this$messages.length) > 0;
+    },
+    conversations() {
+      if (!this.hasMessages) return [];
+      return this.messages.reduce((acc, message) => {
+        if (message.content === CHAT_RESET_MESSAGE) {
+          acc.push([]);
+        } else {
+          acc[acc.length - 1].push(message);
+        }
+        return acc;
+      }, [[]]);
+    },
+    resetDisabled() {
+      if (this.isLoading || !this.hasMessages) {
+        return true;
+      }
+      const lastMessage = this.messages[this.messages.length - 1];
+      return lastMessage.content === CHAT_RESET_MESSAGE;
+    }
+  },
+  watch: {
+    isLoading() {
+      this.isHidden = false;
+      this.scrollToBottom();
+    },
+    messages() {
+      this.prompt = '';
+    }
+  },
+  created() {
+    this.handleScrollingTrottled = throttle(this.handleScrolling, 200); // Assume a 200ms throttle for example
+  },
+
+  mounted() {
+    this.scrollToBottom();
+  },
+  methods: {
+    hideChat() {
+      this.isHidden = true;
+      /**
+       * Emitted when clicking the cross in the title and the chat gets closed.
+       */
+      this.$emit('chat-hidden');
+    },
+    sendChatPrompt() {
+      if (this.prompt) {
+        if (this.prompt === CHAT_RESET_MESSAGE && this.resetDisabled) {
+          return;
+        }
+        /**
+         * Emitted when a new user prompt should be sent out.
+         *
+         * @param {String} prompt The user prompt to send.
+         */
+        this.$emit('send-chat-prompt', this.prompt);
+      }
+    },
+    sendPredefinedPrompt(prompt) {
+      this.prompt = prompt;
+      this.sendChatPrompt();
+    },
+    handleScrolling() {
+      const {
+        scrollTop,
+        offsetHeight,
+        scrollHeight
+      } = this.$refs.drawer;
+      this.scrolledToBottom = scrollTop + offsetHeight >= scrollHeight;
+    },
+    async scrollToBottom() {
+      await this.$nextTick();
+      if (this.$refs.drawer) {
+        this.$refs.drawer.scrollTop = this.$refs.drawer.scrollHeight;
+      }
+    },
+    onTrackFeedback(event) {
+      /**
+       * Notify listeners about the feedback form submission on a response message.
+       * @param {*} event An event, containing the feedback choices and the extended feedback text.
+       */
+      this.$emit('track-feedback', event);
+    }
+  },
+  i18n,
+  emptySvg
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.isHidden)?_c('aside',{ref:"drawer",staticClass:"markdown-code-block gl-drawer gl-drawer-default gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat gl-h-auto",attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"},on:{"scroll":_vm.handleScrollingTrottled}},[_c('header',{staticClass:"gl-drawer-header gl-drawer-header-sticky gl-z-index-200 gl-p-0! gl-border-b-0"},[_c('div',{staticClass:"drawer-title gl-display-flex gl-justify-content-start gl-align-items-center gl-p-5"},[_c('h3',{staticClass:"gl-my-0 gl-font-size-h2"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_c('gl-experiment-badge',{attrs:{"experiment-help-page-url":_vm.experimentHelpPageUrl,"container-id":"chat-component"}}),_vm._v(" "),_c('gl-button',{staticClass:"gl-p-0! gl-ml-auto",attrs:{"category":"tertiary","variant":"default","icon":"close","size":"small","data-testid":"chat-close-button","aria-label":_vm.$options.i18n.CHAT_CLOSE_LABEL},on:{"click":_vm.hideChat}})],1),_vm._v(" "),_c('gl-alert',{staticClass:"gl-text-center gl-border-t gl-p-4 gl-text-gray-700 gl-bg-gray-50 legal-warning gl-max-w-full",attrs:{"dismissible":false,"variant":"tip","show-icon":false,"role":"alert","data-testid":"chat-legal-warning"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_GENERATED_BY_AI))]),_vm._v(" "),_vm._t("subheader")],2),_vm._v(" "),_c('div',{staticClass:"gl-drawer-body gl-display-flex gl-flex-direction-column"},[_vm._t("hero"),_vm._v(" "),(_vm.error)?_c('gl-alert',{key:"error",staticClass:"gl-mb-0 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(),_vm._v(" "),_c('section',{staticClass:"gl-display-flex gl-flex-direction-column gl-justify-content-end gl-flex-grow-1 gl-border-b-0 gl-bg-gray-10"},[_c('transition-group',{staticClass:"gl-display-flex gl-flex-direction-column gl-justify-content-end",class:[
+          {
+            'gl-h-full': !_vm.hasMessages,
+            'gl-h-auto': _vm.hasMessages,
+          } ],attrs:{"tag":"div","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('gl-duo-chat-conversation',{key:("conversation-" + index),attrs:{"messages":conversation,"show-delimiter":index > 0},on:{"track-feedback":_vm.onTrackFeedback}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('div',{key:"empty-state",staticClass:"gl-display-flex gl-flex-grow-1 gl-mr-auto gl-ml-auto"},[_c('gl-empty-state',{staticClass:"gl-align-self-center",attrs:{"svg-path":_vm.$options.emptySvg,"svg-height":145,"title":_vm.$options.i18n.CHAT_EMPTY_STATE_TITLE,"description":_vm.$options.i18n.CHAT_EMPTY_STATE_DESC}})],1),_vm._v(" "),_c('gl-duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})]:_vm._e()],2),_vm._v(" "),_c('transition',{attrs:{"name":"loader"}},[(_vm.isLoading)?_c('gl-duo-chat-loader',{attrs:{"tool-name":_vm.toolName}}):_vm._e()],1)],1)],2),_vm._v(" "),(_vm.isChatAvailable)?_c('footer',{staticClass:"gl-drawer-footer gl-drawer-footer-sticky gl-p-5 gl-border-t gl-bg-gray-10",class:{ 'gl-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('gl-form-input-group',{scopedSlots:_vm._u([{key:"append",fn:function(){return [_c('gl-button',{staticClass:"gl-absolute! gl-bottom-2 gl-right-2 gl-rounded-base!",attrs:{"icon":"paper-airplane","category":"primary","variant":"confirm","type":"submit","aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL,"disabled":_vm.isLoading}})]},proxy:true}],null,false,2232229068)},[_c('div',{staticClass:"duo-chat-input gl-flex-grow-1 gl-vertical-align-top gl-max-w-full gl-min-h-8 gl-inset-border-1-gray-400 gl-rounded-base gl-bg-white",attrs:{"data-value":_vm.prompt}},[_c('gl-form-textarea',{staticClass:"gl-absolute gl-h-full! gl-py-4! gl-bg-transparent! gl-rounded-top-right-none gl-rounded-bottom-right-none gl-shadow-none!",class:{ 'gl-text-truncate': !_vm.prompt },attrs:{"data-testid":"chat-prompt-input","placeholder":_vm.$options.i18n.CHAT_PROMPT_PLACEHOLDER,"disabled":_vm.isLoading,"autofocus":""},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();return _vm.sendChatPrompt.apply(null, arguments)}},model:{value:(_vm.prompt),callback:function ($$v) {_vm.prompt=$$v;},expression:"prompt"}})],1)]),_vm._v(" "),_c('gl-form-text',{staticClass:"gl-text-gray-400 gl-line-height-20 gl-mt-3",attrs:{"data-testid":"chat-legal-disclaimer"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_DISCLAIMER))])],1)],1):_vm._e()]):_vm._e()};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;
+export { i18n };

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

@@ -55,6 +55,21 @@ const MOCK_RESPONSE_MESSAGE_FOR_STREAMING = {
   errors: [],
   timestamp: '2021-04-21T12:00:00.000Z'
 };
+const generateMockResponseChunks = requestId => {
+  const chunks = [];
+  const chunkSize = 5;
+  const chunkCount = Math.ceil(MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content.length / chunkSize);
+  for (let i = 0; i < chunkCount; i += 1) {
+    const chunk = {
+      ...MOCK_RESPONSE_MESSAGE_FOR_STREAMING,
+      requestId,
+      content: MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content.substring(i * chunkSize, (i + 1) * chunkSize),
+      chunkId: i
+    };
+    chunks.push(chunk);
+  }
+  return chunks;
+};
 const MOCK_USER_PROMPT_MESSAGE = {
   id: '456',
   content: 'How to create a new template?',
@@ -66,4 +81,4 @@ const MOCK_USER_PROMPT_MESSAGE = {
   extras: null
 };
 
-export { MOCK_CHUNK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_USER_PROMPT_MESSAGE };
+export { MOCK_CHUNK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_USER_PROMPT_MESSAGE, generateMockResponseChunks };