@gitlab/duo-ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,101 @@
+import { translate } from '@gitlab/ui/dist/utils/i18n';
+import GlDuoChatMessage from '../duo_chat_message/duo_chat_message';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const i18n = {
+  CONVERSATION_NEW_CHAT: translate('GlDuoChatConversation.newChat', 'New chat')
+};
+const isMessage = item => Boolean(item) && (item === null || item === void 0 ? void 0 : item.role);
+
+// eslint-disable-next-line unicorn/no-array-callback-reference
+const itemsValidator = items => items.every(isMessage);
+var script = {
+  name: 'GlDuoChatConversation',
+  components: {
+    GlDuoChatMessage
+  },
+  props: {
+    /**
+     * Messages to display
+     */
+    messages: {
+      type: Array,
+      required: false,
+      default: () => [],
+      validator: itemsValidator
+    },
+    canceledRequestIds: {
+      type: Array,
+      required: true
+    },
+    /**
+     * Whether the insertCode feature should be available.
+     */
+    enableCodeInsertion: {
+      type: Boolean,
+      required: true
+    },
+    /**
+     * Whether to show the delimiter before this conversation
+     */
+    showDelimiter: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  methods: {
+    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);
+    },
+    onInsertCodeSnippet(e) {
+      this.$emit('insert-code-snippet', e);
+    },
+    onGetContextItemContent(e) {
+      this.$emit('get-context-item-content', e);
+    }
+  },
+  i18n
+};
+
+/* 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',{class:['gl-flex gl-flex-col gl-justify-end', { 'insert-code-hidden': !_vm.enableCodeInsertion }]},[(_vm.showDelimiter)?_c('div',{staticClass:"gl-my-5 gl-flex gl-items-center gl-gap-4 gl-text-gray-500",attrs:{"data-testid":"conversation-delimiter"}},[_c('hr',{staticClass:"gl-grow"}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.$options.i18n.CONVERSATION_NEW_CHAT))]),_vm._v(" "),_c('hr',{staticClass:"gl-grow"})]):_vm._e(),_vm._v(" "),_vm._l((_vm.messages),function(msg,index){return _c('gl-duo-chat-message',{key:((msg.role) + "-" + index),attrs:{"message":msg,"is-cancelled":_vm.canceledRequestIds.includes(msg.requestId)},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet,"get-context-item-content":_vm.onGetContextItemContent}})})],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_loader/duo_chat_loader.js

@@ -0,0 +1,101 @@
+import { translate } from '@gitlab/ui/dist/utils/i18n';
+import { GlSprintf } from '@gitlab/ui';
+import { LOADING_TRANSITION_DURATION } from '../../constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const i18n = {
+  LOADER_LOADING_MESSAGE: translate('GlDuoChatLoader.loaderLoadingMessage', '%{tool} is %{transition} an answer'),
+  LOADER_LOADING_TRANSITIONS: [translate('GlDuoChatLoader.loaderLoadingTransitionsFinding', 'finding'), translate('GlDuoChatLoader.loaderLoadingTransitionsWorkingOn', 'working on'), translate('GlDuoChatLoader.loaderLoadingTransitionsGenerating', 'generating'), translate('GlDuoChatLoader.loaderLoadingTransitionsProducing', 'producing')],
+  GITLAB_DUO: translate('GlDuoChatLoader.gitlabDuo', '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 gl-flex gl-items-center"},[_vm._m(0),_vm._v(" "),_c('div',[_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-relative gl-inline-block gl-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-absolute gl-bottom-0 gl-left-0 gl-whitespace-nowrap",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-mr-3 gl-flex"},[_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/buttons_utils.js

@@ -0,0 +1,25 @@
+import iconsPath from '@gitlab/svgs/dist/icons.svg';
+
+const createButton = function () {
+  let title = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'Insert the code snippet';
+  let iconId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'insert';
+  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 = title;
+
+  // 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}#${iconId}`);
+  svg.appendChild(use);
+  button.appendChild(svg);
+  return button;
+};
+
+export { createButton };

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

@@ -0,0 +1,16 @@
+import { createButton } from './buttons_utils';
+
+class CopyCodeElement extends HTMLElement {
+  constructor() {
+    super();
+    const btn = createButton('Copy to clipboard', 'copy-to-clipboard');
+    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,263 @@
+import { GlFormGroup, GlFormTextarea, GlIcon, GlLoadingIcon, GlSafeHtmlDirective, GlTooltipDirective } from '@gitlab/ui';
+import { translate, translatePlural, sprintf } from '@gitlab/ui/dist/utils/i18n';
+import GlDuoChatContextItemSelections from '../duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections';
+import GlDuoUserFeedback from '../../../user_feedback/user_feedback';
+import { SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED, MESSAGE_MODEL_ROLES } from '../../constants';
+import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources';
+import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
+import { CopyCodeElement } from './copy_code_element';
+import { InsertCodeSnippetElement } from './insert_code_snippet_element';
+import { concatUntilEmpty } from './utils';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const i18n = {
+  MODAL: {
+    TITLE: translate('GlDuoChatMessage.modalTitle', 'Give feedback on GitLab Duo Chat'),
+    ALERT_TEXT: translate('GlDuoChatMessage.modalAlertText', 'GitLab team members cannot view your conversation. Please be as descriptive as possible.'),
+    DID_WHAT: translate('GlDuoChatMessage.modalDidWhat', 'What were you doing?'),
+    INTERACTION: translate('GlDuoChatMessage.modalInteraction', 'The situation in which you interacted with GitLab Duo Chat.'),
+    IMPROVE_WHAT: translate('GlDuoChatMessage.modalImproveWhat', 'How could the response be improved?'),
+    BETTER_RESPONSE: translate('GlDuoChatMessage.modalBetterResponse', 'How the response might better meet your needs.'),
+    MESSAGE_ERROR: translate('GlDuoChatMessage.modalMessageError', 'Error sending the message')
+  }
+};
+var script = {
+  name: 'GlDuoChatMessage',
+  i18n,
+  safeHtmlConfigExtension: {
+    ADD_TAGS: ['copy-code', 'insert-code-snippet']
+  },
+  components: {
+    DocumentationSources,
+    GlDuoChatContextItemSelections,
+    GlDuoUserFeedback,
+    GlFormGroup,
+    GlFormTextarea,
+    GlIcon,
+    GlLoadingIcon
+  },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+    GlTooltip: GlTooltipDirective
+  },
+  provide() {
+    return {
+      modalTitle: i18n.MODAL.TITLE,
+      modalAlertText: i18n.MODAL.ALERT_TEXT
+    };
+  },
+  inject: {
+    // Note, we likely might move away from Provide/Inject for this
+    // and only ship the versions that are currently in the default
+    // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3953#note_1762834219
+    // for more context.
+    renderGFM: {
+      from: 'renderGFM',
+      default: () => element => {
+        element.classList.add('gl-markdown', 'gl-compact-markdown');
+      }
+    },
+    renderMarkdown: {
+      from: 'renderMarkdown',
+      default: () => renderDuoChatMarkdownPreview
+    }
+  },
+  props: {
+    /**
+     * A message object
+     */
+    message: {
+      type: Object,
+      required: true
+    },
+    isCancelled: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      didWhat: '',
+      improveWhat: '',
+      messageWatcher: null,
+      // imperatively set up watcher on message
+      messageChunks: [],
+      selectedContextItemsDefaultCollapsed: SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED
+    };
+  },
+  computed: {
+    isChunk() {
+      return typeof this.message.chunkId === 'number';
+    },
+    isNotChunkOrCancelled() {
+      return !this.isChunk || this.isCancelled;
+    },
+    isChunkAndNotCancelled() {
+      return this.isChunk && !this.isCancelled;
+    },
+    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;
+    },
+    hasFeedback() {
+      var _this$message$extras2;
+      return (_this$message$extras2 = this.message.extras) === null || _this$message$extras2 === void 0 ? void 0 : _this$message$extras2.hasFeedback;
+    },
+    defaultContent() {
+      if (this.message.contentHtml) {
+        return this.message.contentHtml;
+      }
+      return this.renderMarkdown(this.message.content);
+    },
+    messageContent() {
+      if (this.isAssistantMessage && this.isChunk) {
+        return this.renderMarkdown(concatUntilEmpty(this.messageChunks));
+      }
+      return this.defaultContent || this.renderMarkdown(concatUntilEmpty(this.message.chunks));
+    },
+    renderedError() {
+      var _this$message$errors;
+      return this.renderMarkdown(((_this$message$errors = this.message.errors) === null || _this$message$errors === void 0 ? void 0 : _this$message$errors.join('; ')) || '');
+    },
+    error() {
+      var _this$message, _this$message$errors2;
+      return Boolean((_this$message = this.message) === null || _this$message === void 0 ? void 0 : (_this$message$errors2 = _this$message.errors) === null || _this$message$errors2 === void 0 ? void 0 : _this$message$errors2.length) && this.message.errors.join('; ');
+    },
+    selectedContextItems() {
+      var _this$message$extras3;
+      return ((_this$message$extras3 = this.message.extras) === null || _this$message$extras3 === void 0 ? void 0 : _this$message$extras3.contextItems) || [];
+    },
+    displaySelectedContextItems() {
+      return Boolean(this.selectedContextItems.length);
+    },
+    selectedContextItemsTitle() {
+      if (!this.displaySelectedContextItems) return '';
+      const count = this.selectedContextItems.length;
+      if (this.isUserMessage) {
+        return translatePlural('GlDuoChatMessage.SelectedContextItemsTitleUserMessage', 'Included reference', 'Included references')(count);
+      }
+      return sprintf(translatePlural('GlDuoChatMessage.SelectedContextItemsTitleAssistantMessage', 'Used %{count} included reference', 'Used %{count} included references')(count), {
+        count
+      });
+    }
+  },
+  beforeCreate() {
+    if (!customElements.get('copy-code')) {
+      customElements.define('copy-code', CopyCodeElement);
+    }
+    if (!customElements.get('insert-code-snippet')) {
+      customElements.define('insert-code-snippet', InsertCodeSnippetElement);
+    }
+  },
+  mounted() {
+    if (this.isAssistantMessage) {
+      // The watcher has to be created imperatively here
+      // to give an opportunity to remove it after
+      // the complete message has arrived
+      this.messageWatcher = this.$watch('message', this.manageMessageUpdate);
+    }
+    this.setChunks();
+    this.hydrateContentWithGFM();
+  },
+  updated() {
+    this.hydrateContentWithGFM();
+  },
+  methods: {
+    setChunks() {
+      if (this.isChunk) {
+        const {
+          chunkId,
+          content
+        } = this.message;
+        this.$set(this.messageChunks, chunkId - 1, content);
+      } else {
+        this.messageChunks = [];
+      }
+    },
+    stopWatchingMessage() {
+      if (this.messageWatcher) {
+        this.messageWatcher(); // Stop watching the message prop
+        this.messageWatcher = null; // Ensure the watcher can't be stopped multiple times
+      }
+    },
+    hydrateContentWithGFM() {
+      if (!this.isChunk && this.$refs.content) {
+        this.$nextTick(this.renderGFM(this.$refs.content));
+      }
+    },
+    logEvent(e) {
+      this.$emit('track-feedback', {
+        ...e,
+        didWhat: this.didWhat,
+        improveWhat: this.improveWhat,
+        message: this.message
+      });
+    },
+    manageMessageUpdate() {
+      this.setChunks();
+      if (!this.isChunk) {
+        this.stopWatchingMessage();
+      }
+    },
+    onInsertCodeSnippet(e) {
+      this.$emit('insert-code-snippet', e);
+    },
+    onGetContextItemContent(contextItem) {
+      this.$emit('get-context-item-content', {
+        messageId: this.message.id,
+        contextItem
+      });
+    }
+  }
+};
+
+/* 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-message gl-mb-4 gl-rounded-lg gl-p-4 gl-leading-20 gl-break-anywhere",class:{
+    'gl-ml-auto gl-rounded-br-none gl-bg-blue-100 gl-text-blue-900': _vm.isUserMessage,
+    'gl-rounded-bl-none gl-border-1 gl-border-solid gl-border-gray-50 gl-text-gray-900':
+      _vm.isAssistantMessage,
+    'gl-bg-white': _vm.isAssistantMessage && !_vm.error,
+    '!gl-border-none gl-bg-red-50': _vm.error,
+  },on:{"insert-code-snippet":_vm.onInsertCodeSnippet}},[(_vm.error)?_c('gl-icon',{staticClass:"error-icon gl-border gl-mr-3 gl-shrink-0 gl-rounded-full gl-border-red-500 gl-text-red-600",attrs:{"aria-label":_vm.$options.i18n.MESSAGE_ERROR,"name":"status_warning_borderless","size":16,"data-testid":"error"}}):_vm._e(),_vm._v(" "),_c('div',{ref:"content-wrapper",class:{ 'has-error': _vm.error }},[(_vm.displaySelectedContextItems && _vm.isAssistantMessage)?_c('gl-duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"assistant"},on:{"get-content":_vm.onGetContextItemContent}}):_vm._e(),_vm._v(" "),(_vm.error)?_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.renderedError),expression:"renderedError",arg:_vm.$options.safeHtmlConfigExtension}],ref:"error-message"}):_c('div',[_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:"duo-chat-message-feedback gl-mt-4 gl-flex gl-items-end"},[(_vm.isChunkAndNotCancelled)?_c('gl-loading-icon',{staticClass:"gl-pt-4",attrs:{"variant":"dots","inline":""}}):_vm._e(),_vm._v(" "),(_vm.isNotChunkOrCancelled)?_c('gl-duo-user-feedback',{attrs:{"feedback-received":_vm.hasFeedback,"modal-title":_vm.$options.i18n.MODAL.TITLE,"modal-alert":_vm.$options.i18n.MODAL.ALERT_TEXT},on:{"feedback":_vm.logEvent},scopedSlots:_vm._u([{key:"feedback-extra-fields",fn:function(){return [_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.DID_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.INTERACTION},model:{value:(_vm.didWhat),callback:function ($$v) {_vm.didWhat=$$v;},expression:"didWhat"}})],1),_vm._v(" "),_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.IMPROVE_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.BETTER_RESPONSE},model:{value:(_vm.improveWhat),callback:function ($$v) {_vm.improveWhat=$$v;},expression:"improveWhat"}})],1)]},proxy:true}],null,false,419229417)}):_vm._e()],1)]:_vm._e()],2),_vm._v(" "),(_vm.displaySelectedContextItems && _vm.isUserMessage)?_c('gl-duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"user"},on:{"get-content":_vm.onGetContextItemContent}}):_vm._e()],1)],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__;
+export { i18n };

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

@@ -0,0 +1,56 @@
+import { createButton } from './buttons_utils';
+
+function _assertClassBrand(e, t, n) {
+  if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n;
+  throw new TypeError("Private element is not present on this object");
+}
+function _checkPrivateRedeclaration(e, t) {
+  if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object");
+}
+function _classPrivateFieldGet2(s, a) {
+  return s.get(_assertClassBrand(s, a));
+}
+function _classPrivateFieldInitSpec(e, t, a) {
+  _checkPrivateRedeclaration(e, t), t.set(e, a);
+}
+function _classPrivateFieldSet2(s, a, r) {
+  return s.set(_assertClassBrand(s, a), r), r;
+}
+
+const CODE_MARKDOWN_CLASS = 'js-markdown-code';
+var _actionButton = /*#__PURE__*/new WeakMap();
+var _codeBlock = /*#__PURE__*/new WeakMap();
+var _handleClick = /*#__PURE__*/new WeakMap();
+class InsertCodeSnippetElement extends HTMLElement {
+  constructor(codeBlock) {
+    super();
+    _classPrivateFieldInitSpec(this, _actionButton, void 0);
+    _classPrivateFieldInitSpec(this, _codeBlock, void 0);
+    _classPrivateFieldInitSpec(this, _handleClick, () => {
+      if (_classPrivateFieldGet2(_codeBlock, this)) {
+        _classPrivateFieldGet2(_codeBlock, this).dispatchEvent(new CustomEvent('insert-code-snippet', {
+          bubbles: true,
+          cancelable: true,
+          detail: {
+            code: _classPrivateFieldGet2(_codeBlock, this).textContent.trim()
+          }
+        }));
+      }
+    });
+    _classPrivateFieldSet2(_actionButton, this, createButton());
+
+    // we handle two possible cases here:
+    // 1. we use constructor parameter if the element is created in Javscript and inserted in the document
+    // 2. we find the wrapping element containing code if the element is received from the server
+    _classPrivateFieldSet2(_codeBlock, this, codeBlock !== null && codeBlock !== void 0 ? codeBlock : this.closest(`.${CODE_MARKDOWN_CLASS}`));
+  }
+  connectedCallback() {
+    this.appendChild(_classPrivateFieldGet2(_actionButton, this));
+    _classPrivateFieldGet2(_actionButton, this).addEventListener('click', _classPrivateFieldGet2(_handleClick, this));
+  }
+  disconnectedCallback() {
+    _classPrivateFieldGet2(_actionButton, this).removeEventListener('click', _classPrivateFieldGet2(_handleClick, this));
+  }
+}
+
+export { InsertCodeSnippetElement };

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

@@ -0,0 +1,8 @@
+const concatUntilEmpty = arr => {
+  if (!arr) return '';
+  let end = arr.findIndex(el => !el);
+  if (end < 0) end = arr.length;
+  return arr.slice(0, end).join('');
+};
+
+export { concatUntilEmpty };

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

@@ -0,0 +1,106 @@
+import { translatePlural } from '@gitlab/ui/dist/utils/i18n';
+import { GlIcon, GlLink } from '@gitlab/ui';
+import { DOCUMENTATION_SOURCE_TYPES } from '../../constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const i18n = {
+  MESSAGE_SOURCE: function () {
+    let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    return translatePlural('GlDuoChatMessageSources.messageSources', 'Source', 'Sources')(count);
+  }
+};
+var script = {
+  name: 'GlDuoChatMessageSources',
+  components: {
+    GlIcon,
+    GlLink
+  },
+  props: {
+    /**
+     * The Array of the message sources.
+     */
+    sources: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    sourceLabel() {
+      return i18n.MESSAGE_SOURCE(this.sources.length);
+    }
+  },
+  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 this.sourceLabel;
+    }
+  }
+};
+
+/* 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-mr-3 gl-mt-4 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-m-0 gl-list-none gl-p-0"},_vm._l((_vm.sources),function(source,index){return _c('li',{key:index,staticClass:"gl-flex gl-items-center gl-pt-3",attrs:{"data-testid":"source-list-item"}},[(source.source_type)?_c('gl-icon',{staticClass:"gl-mr-2 gl-shrink-0",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 };