@gitlab/ui 66.25.0 → 66.26.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [66.26.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.25.1...v66.26.0) (2023-10-10)
+
+
+### Features
+
+* **GlDuoChatMessage:** Implemented component ([633f36f](https://gitlab.com/gitlab-org/gitlab-ui/commit/633f36f4cb0a117beaf6d377e20fead885b6abb6))
+
+## [66.25.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.25.0...v66.25.1) (2023-10-09)
+
+
+### Bug Fixes
+
+* **charts:** prevent long legends overflowing chart ([873edcf](https://gitlab.com/gitlab-org/gitlab-ui/commit/873edcf60afbd275f466a0ef200d5eb01c81eda1))
+
 # [66.25.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.24.0...v66.25.0) (2023-10-05)
 
 

package/dist/components/charts/legend/legend.js

@@ -184,7 +184,7 @@ 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',{attrs:{"data-testid":"gl-chart-legend"}},[(_vm.layout === _vm.$options.legendLayoutTypes.LEGEND_LAYOUT_INLINE)?[_c('div',{staticClass:"gl-legend-inline"},_vm._l((_vm.seriesInfo),function(series,key){return _c('div',{key:key,staticClass:"gl-legend-inline-series",class:{
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-legend",attrs:{"data-testid":"gl-chart-legend"}},[(_vm.layout === _vm.$options.legendLayoutTypes.LEGEND_LAYOUT_INLINE)?[_c('div',{staticClass:"gl-legend-inline"},_vm._l((_vm.seriesInfo),function(series,key){return _c('div',{key:key,staticClass:"gl-legend-inline-series",class:{
           'text-muted': _vm.disabledSeries[key],
           'w-100': _vm.seriesNameIsLong(series.name),
           'gl-hover-cursor-not-allowed!':

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

@@ -0,0 +1,128 @@
+import { GlDuoUserFeedback } from '../../../../../../index';
+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 __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const concatIndicesUntilEmpty = arr => {
+  const start = arr.findIndex(el => el);
+  if (start === -1 || start !== 1) return ''; // If there are no non-empty elements
+
+  const end = arr.slice(start).findIndex(el => !el);
+  return end > 0 ? arr.slice(start, end).join('') : arr.slice(start).join('');
+};
+var script = {
+  name: 'GlDuoChatMessage',
+  components: {
+    DocumentationSources,
+    GlDuoUserFeedback
+  },
+  directives: {
+    SafeHtml: SafeHtmlDirective
+  },
+  inject: ['renderGFM', 'renderMarkdown'],
+  props: {
+    /**
+     * A message object
+     */
+    message: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      messageContent: ''
+    };
+  },
+  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;
+    },
+    content() {
+      return this.message.contentHtml || this.renderMarkdown(this.message.content || this.message.errors.join('; '));
+    }
+  },
+  watch: {
+    message: {
+      handler() {
+        const {
+          chunkId,
+          content
+        } = this.message;
+        if (!chunkId) {
+          this.messageChunks = [];
+          this.messageContent = this.content;
+          this.renderGFM(this.$refs.content);
+        } else {
+          this.messageChunks[chunkId] = content;
+          this.messageContent = this.renderMarkdown(concatIndicesUntilEmpty(this.messageChunks));
+        }
+      },
+      deep: true
+    }
+  },
+  beforeCreate() {
+    /**
+     * Keeps cache of previous chunks used for rerendering the AI response when streaming.
+     * Is intentionally non-reactive
+     */
+    this.messageChunks = [];
+  },
+  mounted() {
+    this.messageContent = this.content;
+    if (this.message.chunkId) {
+      this.messageChunks[this.message.chunkId] = this.message.content;
+    }
+    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",value:(_vm.messageContent),expression:"messageContent"}],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/mock_data.js

@@ -17,8 +17,8 @@ const MOCK_SOURCES = [{
 }];
 const MOCK_RESPONSE_MESSAGE = {
   id: '123',
-  content: '_Duo Chat message_ comming from AI',
-  contentHtml: '<p><em>Duo Chat message</em> comming from AI</p>',
+  content: 'To create a new template:\n\n1. Create a new Markdown (`.md`) file inside the `.gitlab/issue_templates/` or `.gitlab/merge_request_templates/` directory in your repository.\n2. Commit the template file to your default branch.\n\nTo check if this has worked correctly, create a new issue or merge request and see if you can find your template in the **Choose a template** dropdown list.',
+  contentHtml: '\u003cp data-sourcepos="1:1-1:25" dir="auto"\u003eTo create a new template:\u003c/p\u003e\n\u003col data-sourcepos="3:1-5:0" dir="auto"\u003e\n\u003cli data-sourcepos="3:1-3:143"\u003eCreate a new Markdown (\u003ccode\u003e.md\u003c/code\u003e) file inside the \u003ccode\u003e.gitlab/issue_templates/\u003c/code\u003e or \u003ccode\u003e.gitlab/merge_request_templates/\u003c/code\u003e directory in your repository.\u003c/li\u003e\n\u003cli data-sourcepos="4:1-5:0"\u003eCommit the template file to your default branch.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp data-sourcepos="6:1-6:156" dir="auto"\u003eTo check if this has worked correctly, create a new issue or merge request and see if you can find your template in the \u003cstrong\u003eChoose a template\u003c/strong\u003e dropdown list.\u003c/p\u003e',
   role: MESSAGE_MODEL_ROLES.assistant,
   extras: {
     sources: MOCK_SOURCES
@@ -27,5 +27,43 @@ const MOCK_RESPONSE_MESSAGE = {
   errors: [],
   timestamp: '2021-04-21T12:00:00.000Z'
 };
+const MOCK_CHUNK_RESPONSE_MESSAGE = {
+  chunkId: 1,
+  content: 'chunk',
+  role: MESSAGE_MODEL_ROLES.assistant,
+  requestId: '987',
+  errors: [],
+  timestamp: '2021-04-21T12:00:00.000Z'
+};
+const MOCK_RESPONSE_MESSAGE_FOR_STREAMING = {
+  id: '123',
+  content: `To change your password in GitLab:
+
+  Log in to your GitLab account.
+  Select your avatar in the top right corner and choose Edit profile.
+  On the left sidebar, select Password.
+  Enter your current password in the Current password field.
+  Enter your new password in the New password and Password confirmation fields.
+  Select Save password.
+  If you don't know your current password, select the I forgot my password link to reset it.
+  
+  GitLab enforces password requirements when you choose a new password.`,
+  contentHtml: '',
+  role: 'assistant',
+  extras: {},
+  requestId: '987',
+  errors: [],
+  timestamp: '2021-04-21T12:00:00.000Z'
+};
+const MOCK_USER_PROMPT_MESSAGE = {
+  id: '456',
+  content: 'How to create a new template?',
+  contentHtml: '',
+  role: MESSAGE_MODEL_ROLES.user,
+  requestId: '987',
+  errors: [],
+  timestamp: '2021-04-21T12:00:00.000Z',
+  extras: null
+};
 
-export { MOCK_RESPONSE_MESSAGE };
+export { MOCK_CHUNK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_USER_PROMPT_MESSAGE };