@gitlab/duo-ui 0.1.0 → 0.3.0

package/dist/components/chat/components/duo_chat_context/utils.js

@@ -0,0 +1,106 @@
+import { translate } from '@gitlab/ui/dist/utils/i18n';
+import { CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_LOCAL_GIT_COMMIT, CONTEXT_ITEM_LOCAL_GIT_DIFF, CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST } from './constants';
+
+function categoryValidator(category) {
+  return Boolean(category && category.value && category.label && category.icon);
+}
+function categoriesValidator(categories) {
+  return Array.isArray(categories) && categories.every(category => categoryValidator(category));
+}
+function disabledReasonsValidator(disabledReasons) {
+  return disabledReasons === undefined || Array.isArray(disabledReasons) && disabledReasons.every(reason => typeof reason === 'string');
+}
+function contextItemValidator(item) {
+  return Boolean(item && item.id && item.category && item.metadata && typeof item.metadata === 'object' && typeof item.metadata.enabled === 'boolean' && disabledReasonsValidator(item.metadata.disabledReasons));
+}
+function contextItemsValidator(items) {
+  return Array.isArray(items) && items.every(item => contextItemValidator(item));
+}
+function formatIssueId(iid) {
+  if (!iid) return '';
+  return `#${iid}`;
+}
+function formatMergeRequestId(iid) {
+  if (!iid) return '';
+  return `!${iid}`;
+}
+function getGitItemIcon(contextItem) {
+  const iconMap = {
+    [CONTEXT_ITEM_LOCAL_GIT_COMMIT]: 'commit',
+    [CONTEXT_ITEM_LOCAL_GIT_DIFF]: 'comparison'
+  };
+  const {
+    gitType
+  } = contextItem.metadata;
+  return iconMap[gitType] || null;
+}
+
+/**
+ * Gets the icon name for a given contextItem.
+ */
+function getContextItemIcon(contextItem) {
+  let category = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    icon: null
+  };
+  if (contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT) {
+    const gitIcon = getGitItemIcon(contextItem);
+    if (gitIcon) return gitIcon;
+  }
+  if (category.icon) {
+    return category.icon;
+  }
+  const iconMap = {
+    [CONTEXT_ITEM_CATEGORY_FILE]: 'document',
+    [CONTEXT_ITEM_CATEGORY_ISSUE]: 'issues',
+    [CONTEXT_ITEM_CATEGORY_MERGE_REQUEST]: 'merge-request',
+    [CONTEXT_ITEM_CATEGORY_LOCAL_GIT]: 'git'
+  };
+  return iconMap[contextItem.category] || null;
+}
+function getContextItemTypeLabel(contextItem) {
+  if (contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT) {
+    switch (contextItem.metadata.gitType) {
+      case CONTEXT_ITEM_LOCAL_GIT_DIFF:
+        return translate('DuoChatContextItemTypeLabel.GitDiff', 'Local Git repository diff');
+      case CONTEXT_ITEM_LOCAL_GIT_COMMIT:
+        return translate('DuoChatContextItemTypeLabel.GitCommit', 'Local Git repository commit');
+      default:
+        return translate('DuoChatContextItemTypeLabel.GitDefault', 'Local Git repository');
+    }
+  }
+  switch (contextItem.category) {
+    case CONTEXT_ITEM_CATEGORY_MERGE_REQUEST:
+      return translate('DuoChatContextItemTypeLabel.MergeRequest', 'Merge request');
+    case CONTEXT_ITEM_CATEGORY_ISSUE:
+      return translate('DuoChatContextItemTypeLabel.Issue', 'Issue');
+    case CONTEXT_ITEM_CATEGORY_FILE:
+      return translate('DuoChatContextItemTypeLabel.File', 'Project file');
+    default:
+      return '';
+  }
+}
+
+/**
+ * Gets the secondary text line for a git context item, showing repository and commit ID
+ */
+function formatGitItemSecondaryText(contextItem) {
+  const {
+    repositoryName,
+    commitId
+  } = contextItem.metadata;
+  const separator = commitId ? ' - ' : '';
+  return `${repositoryName}${separator}${commitId || ''}`;
+}
+
+/**
+ * Calculates a new index within a range. If the new index would fall out of bounds, wraps to the start/end of the range.
+ * @param {number} currentIndex - The starting index.
+ * @param {number} step - The number of steps to move (positive or negative).
+ * @param {number} totalLength - The total number of items in the range.
+ * @returns {number} The new index.
+ */
+function wrapIndex(currentIndex, step, totalLength) {
+  return (currentIndex + step + totalLength) % totalLength;
+}
+
+export { categoriesValidator, categoryValidator, contextItemValidator, contextItemsValidator, formatGitItemSecondaryText, formatIssueId, formatMergeRequestId, getContextItemIcon, getContextItemTypeLabel, wrapIndex };

package/dist/components/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/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/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/chat/components/duo_chat_message/constants.js

@@ -0,0 +1,5 @@
+const DUO_CODE_SCRIM_TOP_CLASS = 'scrim-top';
+const DUO_CODE_SCRIM_BOTTOM_CLASS = 'scrim-bottom';
+const DUO_CODE_SCRIM_OFFSET = 16;
+
+export { DUO_CODE_SCRIM_BOTTOM_CLASS, DUO_CODE_SCRIM_OFFSET, DUO_CODE_SCRIM_TOP_CLASS };

package/dist/components/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/chat/components/duo_chat_message/duo_chat_message.js

@@ -0,0 +1,287 @@
+import { GlFormGroup, GlFormTextarea, GlIcon, GlLoadingIcon, GlSafeHtmlDirective, GlTooltipDirective } from '@gitlab/ui';
+import { translate, translatePlural, sprintf } from '@gitlab/ui/dist/utils/i18n';
+import throttle from 'lodash/throttle';
+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 { DUO_CODE_SCRIM_BOTTOM_CLASS, DUO_CODE_SCRIM_OFFSET, DUO_CODE_SCRIM_TOP_CLASS } from './constants';
+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('duo-chat-markdown', 'duo-chat-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));
+      }
+      this.detectScrollableCodeBlocks();
+    },
+    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
+      });
+    },
+    detectScrollableCodeBlocks() {
+      const codeBlocks = document.querySelectorAll('.duo-chat-message pre');
+      codeBlocks.forEach(e => {
+        if (e.scrollHeight > e.offsetHeight) {
+          e.classList.add(DUO_CODE_SCRIM_BOTTOM_CLASS);
+          e.addEventListener('scroll', throttle(() => this.toggleScrolling(e), 200));
+        }
+      });
+    },
+    toggleScrolling(e) {
+      if (e.scrollHeight - e.scrollTop <= e.offsetHeight + DUO_CODE_SCRIM_OFFSET) {
+        e.classList.remove(DUO_CODE_SCRIM_BOTTOM_CLASS);
+      } else {
+        e.classList.add(DUO_CODE_SCRIM_BOTTOM_CLASS);
+      }
+      if (e.scrollTop > DUO_CODE_SCRIM_OFFSET) {
+        e.classList.add(DUO_CODE_SCRIM_TOP_CLASS);
+      } else {
+        e.classList.remove(DUO_CODE_SCRIM_TOP_CLASS);
+      }
+    }
+  }
+};
+
+/* 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,
+    'duo-chat-message-with-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 };