@gitlab/ui 101.14.0 → 101.16.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [101.16.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v101.15.0...v101.16.0) (2024-11-07)
+
+
+### Features
+
+* **GlDuoChat, GlAnimatedIcon:** Update loading icon ([23d0874](https://gitlab.com/gitlab-org/gitlab-ui/commit/23d08749510808b1ece754025714ad2a6dd9fd65))
+
+# [101.15.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v101.14.0...v101.15.0) (2024-11-07)
+
+
+### Features
+
+* **DuoChat:** support project dependencies context item type ([e212121](https://gitlab.com/gitlab-org/gitlab-ui/commit/e2121217e000b14361fdf45087449b0299234845))
+
 # [101.14.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v101.13.0...v101.14.0) (2024-11-07)
 
 

package/dist/components/base/animated_icon/animated_loader_icon.js

@@ -0,0 +1,45 @@
+import GlBaseAnimatedIcon from './base_animated_icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlAnimatedLoaderIcon',
+  extends: GlBaseAnimatedIcon
+};
+
+/* 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('svg',{class:_vm.iconStateClass,attrs:{"aria-label":_vm.ariaLabel,"width":"16","height":"16","viewBox":"0 0 16 16","fill":"none","xmlns":"http://www.w3.org/2000/svg"}},[_c('circle',{staticClass:"gl-animated-loader-shape gl-animated-loader-shape-1",attrs:{"cx":"8","cy":"8","r":"2","fill":"currentColor","stroke-width":"0"}}),_vm._v(" "),_c('circle',{staticClass:"gl-animated-loader-shape gl-animated-loader-shape-2",attrs:{"cx":"14","cy":"8","r":"2","fill":"currentColor","stroke-width":"0"}}),_vm._v(" "),_c('circle',{staticClass:"gl-animated-loader-shape gl-animated-loader-shape-3",attrs:{"cx":"2","cy":"8","r":"2","fill":"currentColor","stroke-width":"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/components/duo_chat_context/constants.js

@@ -2,10 +2,11 @@ const CONTEXT_ITEM_CATEGORY_ISSUE = 'issue';
 const CONTEXT_ITEM_CATEGORY_MERGE_REQUEST = 'merge_request';
 const CONTEXT_ITEM_CATEGORY_FILE = 'file';
 const CONTEXT_ITEM_CATEGORY_LOCAL_GIT = 'local_git';
+const CONTEXT_ITEM_CATEGORY_DEPENDENCY = 'dependency';
 const CONTEXT_ITEM_LOCAL_GIT_COMMIT = 'commit';
 const CONTEXT_ITEM_LOCAL_GIT_DIFF = 'diff';
 const LANGUAGE_IDENTIFIER_PREFIX = 'language-';
 const LANGUAGE_IDENTIFIER_DIFF = 'language-diff';
 const LANGUAGE_IDENTIFIER_PLAINTEXT = 'language-plaintext';
 
-export { CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST, CONTEXT_ITEM_LOCAL_GIT_COMMIT, CONTEXT_ITEM_LOCAL_GIT_DIFF, LANGUAGE_IDENTIFIER_DIFF, LANGUAGE_IDENTIFIER_PLAINTEXT, LANGUAGE_IDENTIFIER_PREFIX };
+export { CONTEXT_ITEM_CATEGORY_DEPENDENCY, CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST, CONTEXT_ITEM_LOCAL_GIT_COMMIT, CONTEXT_ITEM_LOCAL_GIT_DIFF, LANGUAGE_IDENTIFIER_DIFF, LANGUAGE_IDENTIFIER_PLAINTEXT, LANGUAGE_IDENTIFIER_PREFIX };

package/dist/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_details_modal/duo_chat_context_item_details_modal.js

@@ -4,12 +4,14 @@ import GlModal from '../../../../../../base/modal/modal';
 import { SafeHtmlDirective } from '../../../../../../../directives/safe_html/safe_html';
 import GlSkeletonLoader from '../../../../../../base/skeleton_loader/skeleton_loader';
 import { translate } from '../../../../../../../utils/i18n';
-import { CONTEXT_ITEM_CATEGORY_LOCAL_GIT, LANGUAGE_IDENTIFIER_DIFF, LANGUAGE_IDENTIFIER_PREFIX, LANGUAGE_IDENTIFIER_PLAINTEXT } from '../constants';
+import { CONTEXT_ITEM_CATEGORY_LOCAL_GIT, LANGUAGE_IDENTIFIER_DIFF, LANGUAGE_IDENTIFIER_PREFIX, LANGUAGE_IDENTIFIER_PLAINTEXT, CONTEXT_ITEM_CATEGORY_DEPENDENCY } from '../constants';
+import GlAlert from '../../../../../../base/alert/alert';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   name: 'GlDuoChatContextItemDetailsModal',
   components: {
+    GlAlert,
     GlSkeletonLoader,
     GlModal
   },
@@ -34,6 +36,11 @@ var script = {
       validator: contextItemValidator
     }
   },
+  data() {
+    return {
+      contentErrorIsVisible: false
+    };
+  },
   computed: {
     isLoadingContent() {
       return this.contextItem.content === undefined;
@@ -52,16 +59,25 @@ var script = {
     title() {
       var _this$contextItem$met4, _this$contextItem$met5;
       return ((_this$contextItem$met4 = this.contextItem.metadata) === null || _this$contextItem$met4 === void 0 ? void 0 : _this$contextItem$met4.title) || ((_this$contextItem$met5 = this.contextItem.metadata) === null || _this$contextItem$met5 === void 0 ? void 0 : _this$contextItem$met5.relativePath) || translate('GlDuoChatContextItemDetailsModal.title', 'Preview');
+    },
+    isDependencies() {
+      return this.contextItem.category === CONTEXT_ITEM_CATEGORY_DEPENDENCY;
     }
   },
   watch: {
     contextItem: {
       async handler(newVal, oldVal) {
-        const shouldFormat = (newVal === null || newVal === void 0 ? void 0 : newVal.content) !== (oldVal === null || oldVal === void 0 ? void 0 : oldVal.content) && (newVal === null || newVal === void 0 ? void 0 : newVal.content);
-        if (shouldFormat) {
-          await nextTick();
-          await this.hydrateContentWithGFM();
+        // Dependency items contain structured data as content, not code/markdown.
+        // So skip running this content through GFM, we'll parse and render it here in the component.
+        if (newVal.category === CONTEXT_ITEM_CATEGORY_DEPENDENCY) {
+          return;
         }
+        const isUnchangedOrEmptyContent = !(newVal !== null && newVal !== void 0 && newVal.content) || (newVal === null || newVal === void 0 ? void 0 : newVal.content) === (oldVal === null || oldVal === void 0 ? void 0 : oldVal.content);
+        if (isUnchangedOrEmptyContent) {
+          return;
+        }
+        await nextTick();
+        await this.hydrateContentWithGFM();
       },
       immediate: true
     }
@@ -73,19 +89,31 @@ var script = {
         this.renderGFM(this.$refs.content);
       }
     },
+    parseDependencies() {
+      if (this.contextItem.category !== CONTEXT_ITEM_CATEGORY_DEPENDENCY) {
+        return null;
+      }
+      try {
+        return JSON.parse(this.contextItem.content);
+      } catch (error) {
+        this.contentErrorIsVisible = true;
+        return {};
+      }
+    },
     onModalVisibilityChange(isVisible) {
       if (!isVisible) {
         this.$emit('close');
       }
     }
-  }
+  },
+  CONTENT_ERROR_MESSAGE: translate('GlDuoChatContextItemDetailsModal.contentErrorMessage', 'Item content could not be displayed.')
 };
 
 /* 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-modal',{attrs:{"modal-id":"context-item-details-modal","title":_vm.title,"visible":true,"scrollable":true,"hide-footer":"","size":"lg"},on:{"change":_vm.onModalVisibilityChange}},[(_vm.isLoadingContent)?_c('gl-skeleton-loader'):_c('div',{ref:"content",attrs:{"data-testid":"context-item-content"}},[_c('pre',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.contextItem.content),expression:"contextItem.content"}],staticClass:"code js-syntax-highlight gl-p-3",class:_vm.languageIdentifierClass})])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-modal',{attrs:{"modal-id":"context-item-details-modal","title":_vm.title,"visible":true,"scrollable":true,"hide-footer":"","size":"lg"},on:{"change":_vm.onModalVisibilityChange}},[(_vm.isLoadingContent)?_c('gl-skeleton-loader'):(_vm.contentErrorIsVisible)?_c('gl-alert',{attrs:{"variant":"danger","dismissible":false,"data-testid":"content-error-alert"}},[_vm._v("\n    "+_vm._s(_vm.$options.CONTENT_ERROR_MESSAGE)+"\n  ")]):(_vm.isDependencies)?_c('div',{attrs:{"data-testid":"context-item-content"}},[_c('p',[_vm._v("Project dependencies from "+_vm._s(_vm.contextItem.metadata.secondaryText))]),_vm._v(" "),_vm._l((_vm.parseDependencies()),function(matches,index){return _c('div',{key:index},_vm._l((matches),function(dependencies,language){return _c('div',{key:language},[_c('h3',{staticClass:"gl-heading-4 gl-mb-2"},[_vm._v(_vm._s(language))]),_vm._v(" "),_c('ul',{staticClass:"gl-pl-6"},_vm._l((dependencies),function(dependency){return _c('li',{key:dependency},[_vm._v("\n            "+_vm._s(dependency)+"\n          ")])}),0)])}),0)})],2):_c('div',{ref:"content",attrs:{"data-testid":"context-item-content"}},[_c('pre',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.contextItem.content),expression:"contextItem.content"}],staticClass:"code js-syntax-highlight gl-p-3",class:_vm.languageIdentifierClass})])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.js

@@ -3,7 +3,7 @@ import GlIcon from '../../../../../../base/icon/icon';
 import GlToken from '../../../../../../base/token/token';
 import GlTruncate from '../../../../../../utilities/truncate/truncate';
 import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover';
-import { CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_FILE } from '../constants';
+import { CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_DEPENDENCY } from '../constants';
 import GlDuoChatContextItemDetailsModal from '../duo_chat_context_item_details_modal/duo_chat_context_item_details_modal';
 import { contextItemsValidator, getContextItemIcon } from '../utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -108,7 +108,7 @@ var script = {
       this.previewContextItemId = contextItem.id;
     },
     canOpen(contextItem) {
-      return [CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_FILE].includes(contextItem.category);
+      return [CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_DEPENDENCY].includes(contextItem.category);
     },
     onClosePreview() {
       this.previewContextItemId = null;

package/dist/components/experimental/duo/chat/components/duo_chat_context/mock_context_data.js

@@ -1,4 +1,4 @@
-import { CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST } from './constants';
+import { CONTEXT_ITEM_CATEGORY_DEPENDENCY, CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST } from './constants';
 
 const MOCK_CATEGORIES = [{
   label: 'Files',
@@ -16,6 +16,10 @@ const MOCK_CATEGORIES = [{
   label: 'Merge Requests',
   value: CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
   icon: 'merge-request'
+}, {
+  label: 'Dependencies',
+  value: CONTEXT_ITEM_CATEGORY_DEPENDENCY,
+  icon: 'package'
 }];
 function getMockCategory(categoryValue) {
   return MOCK_CATEGORIES.find(cat => cat.value === categoryValue);
@@ -217,8 +221,75 @@ const mockGitItems = [MOCK_CONTEXT_ITEM_GIT_DIFF, {
     gitType: 'commit'
   }
 }];
+const MOCK_CONTEXT_ITEM_DEPENDENCY = {
+  id: '823e4567-e89b-12d3-a456-426614174007',
+  category: CONTEXT_ITEM_CATEGORY_DEPENDENCY,
+  content: JSON.stringify([{
+    javascript: ['@types/node@16.11.7', '@vue/compiler-sfc@3.2.37', 'typescript@4.5.5', 'vue@3.2.37']
+  }]),
+  metadata: {
+    enabled: true,
+    title: 'example/garden',
+    secondaryText: 'package.json',
+    icon: 'package',
+    subType: 'dependency',
+    subTypeLabel: 'Project dependencies',
+    project: 'example/garden'
+  }
+};
+const MOCK_CONTEXT_ITEM_DEPENDENCY_DISABLED = {
+  id: '923e4567-e89b-12d3-a456-426614174008',
+  category: CONTEXT_ITEM_CATEGORY_DEPENDENCY,
+  content: JSON.stringify([{
+    javascript: ['@types/node@16.11.7', '@vue/compiler-sfc@3.2.37', 'typescript@4.5.5', 'vue@3.2.37'],
+    csharp: ['newtonsoft.json@13.0.1', 'microsoft.net.test.sdk@16.11.0']
+  }]),
+  metadata: {
+    enabled: false,
+    disabledReasons: ['Dependencies are not available for this project', 'Access restricted'],
+    title: 'example/vehicle',
+    secondaryText: 'package.json, vehicle.csproj',
+    icon: 'package',
+    subType: 'dependency',
+    subTypeLabel: 'Project dependencies',
+    project: 'example/vehicle'
+  }
+};
+const mockDependencies = [MOCK_CONTEXT_ITEM_DEPENDENCY, MOCK_CONTEXT_ITEM_DEPENDENCY_DISABLED, {
+  id: 'b23e4567-e89b-12d3-a456-426614174010',
+  category: CONTEXT_ITEM_CATEGORY_DEPENDENCY,
+  content: JSON.stringify([{
+    python: ['django@3.2.9', 'djangorestframework@3.12.4', 'psycopg2@2.9.2', 'celery@5.2.1'],
+    csharp: ['newtonsoft.json@13.0.1', 'microsoft.net.test.sdk@16.11.0']
+  }]),
+  metadata: {
+    enabled: true,
+    title: 'example/backend',
+    secondaryText: 'requirements.txt, some.backend.csproj',
+    icon: 'package',
+    subType: 'dependency',
+    subTypeLabel: 'Project dependencies',
+    project: 'example/backend'
+  }
+}, {
+  id: 'c23e4567-e89b-12d3-a456-426614174011',
+  category: CONTEXT_ITEM_CATEGORY_DEPENDENCY,
+  content: JSON.stringify([{
+    javascript: ['jquery@3.5.1', 'backbone@1.4.0', 'underscore@1.13.1', 'moment@2.29.1']
+  }]),
+  metadata: {
+    enabled: false,
+    disabledReasons: ['Project is archived'],
+    title: 'example/legacy',
+    secondaryText: 'bower.json',
+    icon: 'package',
+    subType: 'dependency',
+    subTypeLabel: 'Project dependencies',
+    project: 'example/legacy'
+  }
+}];
 const getMockContextItems = () => {
-  const allItems = [...mockFiles, ...mockGitItems, ...mockIssues, ...mockMergeRequests];
+  const allItems = [...mockFiles, ...mockGitItems, ...mockIssues, ...mockMergeRequests, ...mockDependencies];
 
   // put disabled items in the back
   const disabledItems = allItems.filter(item => !item.metadata.enabled);
@@ -226,4 +297,4 @@ const getMockContextItems = () => {
   return [...enabledItems, ...disabledItems];
 };
 
-export { MOCK_CATEGORIES, MOCK_CONTEXT_FILE_CONTENT, MOCK_CONTEXT_FILE_DIFF_CONTENT, MOCK_CONTEXT_ITEM_FILE, MOCK_CONTEXT_ITEM_FILE_DISABLED, MOCK_CONTEXT_ITEM_GIT_COMMIT, MOCK_CONTEXT_ITEM_GIT_DIFF, MOCK_CONTEXT_ITEM_ISSUE, MOCK_CONTEXT_ITEM_ISSUE_DISABLED, MOCK_CONTEXT_ITEM_MERGE_REQUEST, MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED, getMockCategory, getMockContextItems };
+export { MOCK_CATEGORIES, MOCK_CONTEXT_FILE_CONTENT, MOCK_CONTEXT_FILE_DIFF_CONTENT, MOCK_CONTEXT_ITEM_DEPENDENCY, MOCK_CONTEXT_ITEM_DEPENDENCY_DISABLED, MOCK_CONTEXT_ITEM_FILE, MOCK_CONTEXT_ITEM_FILE_DISABLED, MOCK_CONTEXT_ITEM_GIT_COMMIT, MOCK_CONTEXT_ITEM_GIT_DIFF, MOCK_CONTEXT_ITEM_ISSUE, MOCK_CONTEXT_ITEM_ISSUE_DISABLED, MOCK_CONTEXT_ITEM_MERGE_REQUEST, MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED, getMockCategory, getMockContextItems };

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

@@ -1,5 +1,6 @@
 import { translate } from '../../../../../../utils/i18n';
 import GlSprintf from '../../../../../utilities/sprintf/sprintf';
+import GlAnimatedLoaderIcon from '../../../../../base/animated_icon/animated_loader_icon';
 import { LOADING_TRANSITION_DURATION } from '../../constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -11,7 +12,8 @@ const i18n = {
 var script = {
   name: 'GlDuoChatLoader',
   components: {
-    GlSprintf
+    GlSprintf,
+    GlAnimatedLoaderIcon
   },
   i18n,
   props: {
@@ -65,8 +67,8 @@ var 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-mt-5 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"})])}];
+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-mt-5 gl-flex gl-items-center gl-gap-3"},[_c('gl-animated-loader-icon',{attrs:{"is-on":true}}),_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)],1)};
+var __vue_staticRenderFns__ = [];
 
   /* style */
   const __vue_inject_styles__ = undefined;

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

@@ -1,6 +1,6 @@
 import throttle from 'lodash/throttle';
 import GlIcon from '../../../../../base/icon/icon';
-import GlLoadingIcon from '../../../../../base/loading_icon/loading_icon';
+import GlAnimatedLoaderIcon from '../../../../../base/animated_icon/animated_loader_icon';
 import { GlTooltipDirective } from '../../../../../../directives/tooltip';
 import GlDuoChatContextItemSelections from '../duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections';
 import GlDuoUserFeedback from '../../../user_feedback/user_feedback';
@@ -41,7 +41,7 @@ var script = {
     GlFormGroup,
     GlFormTextarea,
     GlIcon,
-    GlLoadingIcon
+    GlAnimatedLoaderIcon
   },
   directives: {
     SafeHtml: SafeHtmlDirective,
@@ -256,7 +256,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
       _vm.isAssistantMessage,
     'gl-bg-subtle': _vm.isAssistantMessage && !_vm.error,
     'duo-chat-message-with-error 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)};
+  },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-animated-loader-icon',{attrs:{"is-on":true}}):_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 */