@gitlab/ui 72.12.0 → 72.12.1

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

@@ -0,0 +1,100 @@
+import GlSprintf from '../../../../../utilities/sprintf/sprintf';
+import { LOADING_TRANSITION_DURATION } from '../../constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const i18n = {
+  LOADER_LOADING_MESSAGE: '%{tool} is %{transition} an answer',
+  LOADER_LOADING_TRANSITIONS: ['finding', 'working on', 'generating', 'producing'],
+  GITLAB_DUO: 'GitLab Duo'
+};
+var script = {
+  name: 'GlDuoChatLoader',
+  components: {
+    GlSprintf
+  },
+  i18n,
+  props: {
+    /**
+     * The message containing the name of the current AI tool working on the answer.
+     */
+    toolName: {
+      type: String,
+      required: false,
+      default: i18n.GITLAB_DUO
+    }
+  },
+  data() {
+    return {
+      loadingSequence: 0,
+      timeout: null
+    };
+  },
+  beforeDestroy() {
+    clearTimeout(this.timeout);
+  },
+  mounted() {
+    this.computeTransitionWidth();
+    this.enter();
+  },
+  methods: {
+    computeTransitionWidth() {
+      const container = this.$refs.transition;
+      const active = this.$refs.currentTransition[0]; // There's only one `currentTransition` ref at a time, but refs in v-for loops are always Arrays
+      const {
+        width,
+        height
+      } = active.getBoundingClientRect();
+      container.$el.style.width = `${width}px`;
+      container.$el.style.height = `${height}px`;
+    },
+    enter() {
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        this.loadingSequence = (this.loadingSequence + 1) % this.$options.i18n.LOADER_LOADING_TRANSITIONS.length;
+        this.enter();
+      }, LOADING_TRANSITION_DURATION);
+    },
+    isCurrentTransition(index) {
+      return index === this.loadingSequence;
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"duo-chat-loader"},[_vm._m(0),_vm._v(" "),_c('div',{staticClass:"gl-line-height-24"},[_c('gl-sprintf',{attrs:{"message":_vm.$options.i18n.LOADER_LOADING_MESSAGE},scopedSlots:_vm._u([{key:"tool",fn:function(){return [_c('strong',{attrs:{"data-testid":"tool"}},[_vm._v(_vm._s(_vm.toolName))])]},proxy:true},{key:"transition",fn:function(){return [_c('transition-group',{ref:"transition",staticClass:"transition gl-display-inline-block gl-relative gl-vertical-align-bottom",attrs:{"name":"text"},on:{"after-leave":_vm.computeTransitionWidth}},_vm._l((_vm.$options.i18n.LOADER_LOADING_TRANSITIONS),function(message,index){return _c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.isCurrentTransition(index)),expression:"isCurrentTransition(index)"}],key:message,ref:_vm.isCurrentTransition(index) ? 'currentTransition' : '',refInFor:true,staticClass:"gl-white-space-nowrap gl-absolute gl-bottom-0 gl-left-0",attrs:{"data-testid":_vm.isCurrentTransition(index) ? 'current-transition' : ''}},[_vm._v(_vm._s(message))])}),0)]},proxy:true}])})],1)])};
+var __vue_staticRenderFns__ = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-display-flex gl-align-items-flex-start gl-mr-3 gl-pt-3"},[_c('div',{staticClass:"duo-chat-loader__dot duo-chat-loader__dot--1"}),_vm._v(" "),_c('div',{staticClass:"duo-chat-loader__dot duo-chat-loader__dot--2"}),_vm._v(" "),_c('div',{staticClass:"duo-chat-loader__dot duo-chat-loader__dot--3"})])}];
+
+  /* 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/components/duo_chat_message/copy_code_element.js

@@ -0,0 +1,35 @@
+import iconsPath from '@gitlab/svgs/dist/icons.svg';
+
+const createButton = () => {
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.classList.add('btn', 'btn-default', 'btn-md', 'gl-button', 'btn-default-secondary', 'btn-icon');
+  button.dataset.title = 'Copy to clipboard';
+
+  // Create an SVG element with the correct namespace
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('role', 'img');
+  svg.setAttribute('aria-hidden', 'true');
+  svg.classList.add('gl-button-icon', 'gl-icon', 's16');
+
+  // Create a 'use' element with the correct namespace
+  const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+  use.setAttribute('href', `${iconsPath}#copy-to-clipboard`);
+  svg.appendChild(use);
+  button.appendChild(svg);
+  return button;
+};
+class CopyCodeElement extends HTMLElement {
+  constructor() {
+    super();
+    const btn = createButton();
+    const wrapper = this.parentNode;
+    this.appendChild(btn);
+    btn.addEventListener('click', async () => {
+      const textToCopy = wrapper.innerText;
+      await navigator.clipboard.writeText(textToCopy);
+    });
+  }
+}
+
+export { CopyCodeElement };

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

@@ -0,0 +1,115 @@
+import GlDuoUserFeedback from '../../../user_feedback/user_feedback';
+import { SafeHtmlDirective } from '../../../../../../directives/safe_html/safe_html';
+import { MESSAGE_MODEL_ROLES } from '../../constants';
+import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources';
+import { CopyCodeElement } from './copy_code_element';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const concatUntilEmpty = arr => {
+  if (!arr) return '';
+  let end = arr.findIndex(el => !el);
+  if (end < 0) end = arr.length;
+  return arr.slice(0, end).join('');
+};
+var script = {
+  name: 'GlDuoChatMessage',
+  safeHtmlConfigExtension: {
+    ADD_TAGS: ['copy-code']
+  },
+  components: {
+    DocumentationSources,
+    GlDuoUserFeedback
+  },
+  directives: {
+    SafeHtml: SafeHtmlDirective
+  },
+  inject: ['renderGFM', 'renderMarkdown'],
+  props: {
+    /**
+     * A message object
+     */
+    message: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    isAssistantMessage() {
+      return this.message.role.toLowerCase() === MESSAGE_MODEL_ROLES.assistant;
+    },
+    isUserMessage() {
+      return this.message.role.toLowerCase() === MESSAGE_MODEL_ROLES.user;
+    },
+    sources() {
+      var _this$message$extras;
+      return (_this$message$extras = this.message.extras) === null || _this$message$extras === void 0 ? void 0 : _this$message$extras.sources;
+    },
+    messageContent() {
+      if (this.message.errors.length > 0) return this.renderMarkdown(this.message.errors.join('; '));
+      if (this.message.contentHtml) {
+        return this.message.contentHtml;
+      }
+      return this.renderMarkdown(this.message.content || concatUntilEmpty(this.message.chunks));
+    }
+  },
+  beforeCreate() {
+    if (!customElements.get('copy-code')) {
+      customElements.define('copy-code', CopyCodeElement);
+    }
+  },
+  mounted() {
+    this.$nextTick(this.hydrateContentWithGFM);
+  },
+  updated() {
+    this.$nextTick(this.hydrateContentWithGFM);
+  },
+  methods: {
+    async hydrateContentWithGFM() {
+      if (this.message.contentHtml) {
+        this.renderGFM(this.$refs.content);
+      }
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-p-4 gl-mb-4 gl-rounded-lg gl-line-height-20 gl-word-break-word duo-chat-message",class:{
+    'gl-ml-auto gl-bg-blue-100 gl-text-blue-900 gl-rounded-bottom-right-none': _vm.isUserMessage,
+    'gl-rounded-bottom-left-none gl-text-gray-900 gl-bg-white gl-border-1 gl-border-solid gl-border-gray-50':
+      _vm.isAssistantMessage,
+  }},[_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.messageContent),expression:"messageContent",arg:_vm.$options.safeHtmlConfigExtension}],ref:"content"}),_vm._v(" "),(_vm.isAssistantMessage)?[(_vm.sources)?_c('documentation-sources',{attrs:{"sources":_vm.sources}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-flex-end gl-mt-4"},[_c('gl-duo-user-feedback',{on:{"feedback":function($event){return _vm.$emit('track-feedback', $event)}}})],1)]:_vm._e()],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

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

@@ -0,0 +1,104 @@
+import GlIcon from '../../../../../base/icon/icon';
+import GlLink from '../../../../../base/link/link';
+import { DOCUMENTATION_SOURCE_TYPES } from '../../constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const i18n = {
+  MESSAGE_SOURCE: 'Source',
+  MESSAGE_SOURCES: 'Sources'
+};
+var script = {
+  name: 'GlDuoChatMessageSources',
+  components: {
+    GlIcon,
+    GlLink
+  },
+  props: {
+    /**
+     * The Array of the message sources.
+     */
+    sources: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    sourceLabel() {
+      return this.sources.length > 1 ? i18n.MESSAGE_SOURCES : i18n.MESSAGE_SOURCES;
+    }
+  },
+  methods: {
+    getSourceIcon(sourceType) {
+      const currentSourceType = Object.values(DOCUMENTATION_SOURCE_TYPES).find(_ref => {
+        let {
+          value
+        } = _ref;
+        return value === sourceType;
+      });
+      return (currentSourceType === null || currentSourceType === void 0 ? void 0 : currentSourceType.icon) || 'document';
+    },
+    getSourceTitle(_ref2) {
+      let {
+        title,
+        source_type: sourceType,
+        stage,
+        group,
+        date,
+        author
+      } = _ref2;
+      if (title) {
+        return title;
+      }
+      if (sourceType === DOCUMENTATION_SOURCE_TYPES.DOC.value) {
+        if (stage && group) {
+          return `${stage} / ${group}`;
+        }
+      }
+      if (sourceType === DOCUMENTATION_SOURCE_TYPES.BLOG.value) {
+        if (date && author) {
+          return `${date} / ${author}`;
+        }
+      }
+      return i18n.MESSAGE_SOURCE;
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-mt-4 gl-mr-3 gl-text-gray-600",attrs:{"data-testid":"duo-chat-message-sources"}},[(_vm.sources.length)?_c('span',[_vm._v(_vm._s(_vm.sourceLabel)+":")]):_vm._e(),_vm._v(" "),_c('ul',{staticClass:"gl-list-style-none gl-p-0 gl-m-0"},_vm._l((_vm.sources),function(source,index){return _c('li',{key:index,staticClass:"gl-display-flex gl-pt-3 gl-align-items-center",attrs:{"data-testid":"source-list-item"}},[(source.source_type)?_c('gl-icon',{staticClass:"gl-flex-shrink-0 gl-mr-2",attrs:{"name":_vm.getSourceIcon(source.source_type)}}):_vm._e(),_vm._v(" "),_c('gl-link',{attrs:{"href":source.source_url}},[_vm._v(_vm._s(_vm.getSourceTitle(source)))])],1)}),0)])};
+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/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.js

@@ -0,0 +1,64 @@
+import GlButton from '../../../../../base/button/button';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlDuoChatPredefinedPrompts',
+  components: {
+    GlButton
+  },
+  props: {
+    /**
+     * Array of predefined prompts to display. Every prompt should be a string which will be converted into a prompt when clicked.
+     */
+    prompts: {
+      type: Array,
+      required: true
+    }
+  },
+  methods: {
+    handleClick(prompt) {
+      /**
+       * Emits the prompt string that was clicked.
+       */
+      this.$emit('click', prompt);
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-text-right"},_vm._l((_vm.prompts),function(prompt,index){return _c('div',{key:("question-" + index),staticClass:"gl-mt-3"},[_c('gl-button',{attrs:{"category":"secondary","variant":"confirm"},on:{"click":function($event){return _vm.handleClick(prompt)}}},[_c('span',{staticClass:"gl-white-space-normal"},[_vm._v(_vm._s(prompt))])])],1)}),0)};
+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/chat/constants.js

@@ -0,0 +1,23 @@
+const CHAT_RESET_MESSAGE = '/reset';
+const LOADING_TRANSITION_DURATION = 7500;
+const DOCUMENTATION_SOURCE_TYPES = {
+  HANDBOOK: {
+    value: 'handbook',
+    icon: 'book'
+  },
+  DOC: {
+    value: 'doc',
+    icon: 'documents'
+  },
+  BLOG: {
+    value: 'blog',
+    icon: 'list-bulleted'
+  }
+};
+const MESSAGE_MODEL_ROLES = {
+  user: 'user',
+  system: 'system',
+  assistant: 'assistant'
+};
+
+export { CHAT_RESET_MESSAGE, DOCUMENTATION_SOURCE_TYPES, LOADING_TRANSITION_DURATION, MESSAGE_MODEL_ROLES };