@gitlab/ui 66.21.0 → 66.23.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [66.23.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.22.0...v66.23.0) (2023-10-03)
+
+
+### Features
+
+* **GlDuoChatPredefinedPrompts:** new component ([c3e2347](https://gitlab.com/gitlab-org/gitlab-ui/commit/c3e234717b9c33ab8bb3d3f66e13387efe235fd7))
+
+# [66.22.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.21.0...v66.22.0) (2023-10-03)
+
+
+### Features
+
+* **GlDuoChatMessageSources:** Implemented component ([8066320](https://gitlab.com/gitlab-org/gitlab-ui/commit/8066320214e88a8b75279eec1d82029bf8c3e9db))
+
 # [66.21.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.20.0...v66.21.0) (2023-10-02)
 
 

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

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

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

@@ -0,0 +1,64 @@
+import { GlButton } from '../../../../../../index';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlDuoChatPredefinedPrompts',
+  components: {
+    GlButton
+  },
+  props: {
+    /**
+     * Array of predefined prompts to display. Every prompt should be a string which will be converted into a prompt when clicked.
+     */
+    prompts: {
+      type: Array,
+      required: true
+    }
+  },
+  methods: {
+    handleClick(prompt) {
+      /**
+       * Emits the prompt string that was clicked.
+       */
+      this.$emit('click', prompt);
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-text-right"},_vm._l((_vm.prompts),function(prompt,index){return _c('div',{key:("question-" + index),staticClass:"gl-mt-3"},[_c('gl-button',{attrs:{"category":"secondary","variant":"confirm"},on:{"click":function($event){return _vm.handleClick(prompt)}}},[_c('span',{staticClass:"gl-white-space-normal"},[_vm._v(_vm._s(prompt))])])],1)}),0)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

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

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

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

@@ -0,0 +1,31 @@
+import { DOCUMENTATION_SOURCE_TYPES, MESSAGE_MODEL_ROLES } from './constants';
+
+const MOCK_SOURCES = [{
+  title: 'GitLab Handbook',
+  source_type: DOCUMENTATION_SOURCE_TYPES.HANDBOOK.value,
+  source_url: '/handbook/'
+}, {
+  stage: 'Mock Stage',
+  group: 'Mock Group',
+  source_type: DOCUMENTATION_SOURCE_TYPES.DOC.value,
+  source_url: '/company/team/'
+}, {
+  date: '2023-04-21',
+  author: 'Test User',
+  source_type: DOCUMENTATION_SOURCE_TYPES.BLOG.value,
+  source_url: '/blog/'
+}];
+const MOCK_RESPONSE_MESSAGE = {
+  id: '123',
+  content: '_Duo Chat message_ comming from AI',
+  contentHtml: '<p><em>Duo Chat message</em> comming from AI</p>',
+  role: MESSAGE_MODEL_ROLES.assistant,
+  extras: {
+    sources: MOCK_SOURCES
+  },
+  requestId: '987',
+  errors: [],
+  timestamp: '2021-04-21T12:00:00.000Z'
+};
+
+export { MOCK_RESPONSE_MESSAGE };

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 02 Oct 2023 23:23:52 GMT
+ * Generated on Tue, 03 Oct 2023 12:19:27 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 02 Oct 2023 23:23:52 GMT
+ * Generated on Tue, 03 Oct 2023 12:19:27 GMT
  */
 
 :root {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 02 Oct 2023 23:23:52 GMT
+ * Generated on Tue, 03 Oct 2023 12:19:27 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 02 Oct 2023 23:23:52 GMT
+ * Generated on Tue, 03 Oct 2023 12:19:27 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 02 Oct 2023 23:23:52 GMT
+// Generated on Tue, 03 Oct 2023 12:19:27 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 02 Oct 2023 23:23:52 GMT
+// Generated on Tue, 03 Oct 2023 12:19:27 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.21.0",
+  "version": "66.23.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.md

@@ -0,0 +1 @@
+A simple component to list documentation sources for a documentation-related AI response messages.

package/src/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.spec.js

@@ -0,0 +1,92 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlIcon, GlLink } from '../../../../../../index';
+import { DOCUMENTATION_SOURCE_TYPES } from '../../constants';
+import GlDuoChatMessageSources from './duo_chat_message_sources.vue';
+
+const dummySourceBase = {
+  title: 'Foo',
+  source_type: DOCUMENTATION_SOURCE_TYPES.HANDBOOK.value,
+  stage: 'foo-stage',
+  group: 'bar-group',
+  date: new Date('December 31, 2020 23:59:59'),
+  author: 'Gregor Samsa',
+};
+
+describe('Duo Chat Message Sources', () => {
+  let wrapper;
+
+  const findListItems = () => wrapper.findAll('[data-testid="source-list-item"]');
+  const findSourceIcons = () => wrapper.findAllComponents(GlIcon);
+  const findSourceTitles = () => wrapper.findAllComponents(GlLink);
+
+  const createComponent = ({ propsData = {} } = {}) => {
+    wrapper = shallowMount(GlDuoChatMessageSources, {
+      propsData,
+    });
+  };
+
+  it('does not render anything if sources is an empty Array', () => {
+    createComponent({
+      propsData: {
+        sources: [],
+      },
+    });
+    expect(wrapper.text()).toBe('');
+  });
+
+  it('renders sources passed down as a prop', () => {
+    createComponent({
+      propsData: {
+        sources: [
+          dummySourceBase,
+          {
+            ...dummySourceBase,
+            title: 'Bar',
+          },
+        ],
+      },
+    });
+    expect(findListItems().length).toBe(2);
+  });
+
+  it.each`
+    type                                         | expectedIcon
+    ${DOCUMENTATION_SOURCE_TYPES.HANDBOOK.value} | ${DOCUMENTATION_SOURCE_TYPES.HANDBOOK.icon}
+    ${DOCUMENTATION_SOURCE_TYPES.DOC.value}      | ${DOCUMENTATION_SOURCE_TYPES.DOC.icon}
+    ${DOCUMENTATION_SOURCE_TYPES.BLOG.value}     | ${DOCUMENTATION_SOURCE_TYPES.BLOG.icon}
+    ${'foo'}                                     | ${'document'}
+  `('renders the correct icon for $type type', ({ type, expectedIcon } = {}) => {
+    createComponent({
+      propsData: {
+        sources: [
+          {
+            ...dummySourceBase,
+            source_type: type,
+          },
+        ],
+      },
+    });
+    expect(findSourceIcons().at(0).props('name')).toBe(expectedIcon);
+  });
+
+  it.each`
+    sourceExtension                                           | expectedTitle
+    ${{ title: 'Foo' }}                                       | ${'Foo'}
+    ${{ source_type: DOCUMENTATION_SOURCE_TYPES.DOC.value }}  | ${`${dummySourceBase.stage} / ${dummySourceBase.group}`}
+    ${{ source_type: DOCUMENTATION_SOURCE_TYPES.BLOG.value }} | ${`${dummySourceBase.date} / ${dummySourceBase.author}`}
+    ${{}}                                                     | ${'Source'}
+  `('renders the correct title for $sourceExtension', ({ sourceExtension, expectedTitle } = {}) => {
+    createComponent({
+      propsData: {
+        sources: [
+          {
+            ...dummySourceBase,
+            title: '',
+            ...sourceExtension,
+          },
+        ],
+      },
+    });
+    expect(findSourceTitles().at(0).text()).toBe(expectedTitle);
+  });
+});

package/src/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.stories.js

@@ -0,0 +1,32 @@
+import { MOCK_RESPONSE_MESSAGE } from '../../mock_data';
+import GlDuoChatMessageSources from './duo_chat_message_sources.vue';
+import readme from './duo_chat_message_sources.md';
+
+const generateProps = ({ sources = [] } = {}) => ({
+  sources,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: { GlDuoChatMessageSources },
+  props: Object.keys(argTypes),
+  template: `
+    <gl-duo-chat-message-sources :sources="sources" />
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps({
+  sources: MOCK_RESPONSE_MESSAGE.extras.sources,
+});
+
+export default {
+  title: 'experimental/duo/chat/duo_chat_message_sources',
+  component: GlDuoChatMessageSources,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

package/src/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.vue

@@ -0,0 +1,80 @@
+<script>
+import { GlIcon, GlLink } from '../../../../../../index';
+import { DOCUMENTATION_SOURCE_TYPES } from '../../constants';
+
+export const i18n = {
+  MESSAGE_SOURCE: 'Source',
+  MESSAGE_SOURCES: 'Sources',
+};
+
+export default {
+  name: 'GlDuoChatMessageSources',
+  components: {
+    GlIcon,
+    GlLink,
+  },
+  props: {
+    /**
+     * The Array of the message sources.
+     */
+    sources: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    sourceLabel() {
+      return this.sources.length > 1 ? i18n.MESSAGE_SOURCES : i18n.MESSAGE_SOURCES;
+    },
+  },
+  methods: {
+    getSourceIcon(sourceType) {
+      const currentSourceType = Object.values(DOCUMENTATION_SOURCE_TYPES).find(
+        ({ value }) => value === sourceType
+      );
+
+      return currentSourceType?.icon || 'document';
+    },
+    getSourceTitle({ title, source_type: sourceType, stage, group, date, author }) {
+      if (title) {
+        return title;
+      }
+
+      if (sourceType === DOCUMENTATION_SOURCE_TYPES.DOC.value) {
+        if (stage && group) {
+          return `${stage} / ${group}`;
+        }
+      }
+
+      if (sourceType === DOCUMENTATION_SOURCE_TYPES.BLOG.value) {
+        if (date && author) {
+          return `${date} / ${author}`;
+        }
+      }
+
+      return i18n.MESSAGE_SOURCE;
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-mt-4 gl-mr-3 gl-text-gray-600" data-testid="duo-chat-message-sources">
+    <span v-if="sources.length">{{ sourceLabel }}:</span>
+
+    <ul class="gl-list-style-none gl-p-0 gl-m-0">
+      <li
+        v-for="(source, index) in sources"
+        :key="index"
+        class="gl-display-flex gl-pt-3 gl-align-items-center"
+        data-testid="source-list-item"
+      >
+        <gl-icon
+          v-if="source.source_type"
+          :name="getSourceIcon(source.source_type)"
+          class="gl-flex-shrink-0 gl-mr-2"
+        />
+        <gl-link :href="source.source_url">{{ getSourceTitle(source) }}</gl-link>
+      </li>
+    </ul>
+  </div>
+</template>

package/src/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.md

@@ -0,0 +1 @@
+The component is a simple list of strings representing possible prompts to AI.

package/src/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.spec.js

@@ -0,0 +1,35 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '../../../../../../index';
+import GlDuoChatPredefinedPrompts from './duo_chat_predefined_prompts.vue';
+
+describe('GlDuoChatPredefinedPrompts', () => {
+  let wrapper;
+  const predefinedPrompt1 = 'foo';
+  const predefinedPrompt2 = 'bar';
+
+  const createComponent = () => {
+    wrapper = shallowMount(GlDuoChatPredefinedPrompts, {
+      propsData: {
+        prompts: [predefinedPrompt1, predefinedPrompt2],
+      },
+    });
+  };
+
+  const findButtons = () => wrapper.findAllComponents(GlButton);
+
+  it('renders a button for each predefined prompt', () => {
+    createComponent();
+
+    expect(findButtons()).toHaveLength(2);
+  });
+
+  it('emits the click event when a button is clicked', () => {
+    createComponent();
+
+    findButtons().at(0).vm.$emit('click');
+    expect(wrapper.emitted('click')).toEqual([[predefinedPrompt1]]);
+
+    findButtons().at(1).vm.$emit('click');
+    expect(wrapper.emitted('click')).toEqual([[predefinedPrompt1], [predefinedPrompt2]]);
+  });
+});

package/src/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.stories.js

@@ -0,0 +1,36 @@
+import GlDuoChatPredefinedPrompts from './duo_chat_predefined_prompts.vue';
+import readme from './duo_chat_predefined_prompts.md';
+
+const generateProps = ({ prompts = [] } = {}) => ({
+  prompts,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: { GlDuoChatPredefinedPrompts },
+  props: Object.keys(argTypes),
+  template: `
+    <gl-duo-chat-predefined-prompts :prompts="prompts" />
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps({
+  prompts: [
+    'How do I change my password in GitLab?',
+    'How do I fork a project?',
+    'How do I clone a repository?',
+    'How do I create a template?',
+  ],
+});
+
+export default {
+  title: 'experimental/duo/chat/duo_chat_predefined_prompts',
+  component: GlDuoChatPredefinedPrompts,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

package/src/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue

@@ -0,0 +1,36 @@
+<script>
+import { GlButton } from '../../../../../../index';
+
+export default {
+  name: 'GlDuoChatPredefinedPrompts',
+  components: {
+    GlButton,
+  },
+  props: {
+    /**
+     * Array of predefined prompts to display. Every prompt should be a string which will be converted into a prompt when clicked.
+     */
+    prompts: {
+      type: Array,
+      required: true,
+    },
+  },
+  methods: {
+    handleClick(prompt) {
+      /**
+       * Emits the prompt string that was clicked.
+       */
+      this.$emit('click', prompt);
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-text-right">
+    <div v-for="(prompt, index) in prompts" :key="`question-${index}`" class="gl-mt-3">
+      <gl-button category="secondary" variant="confirm" @click="handleClick(prompt)"
+        ><span class="gl-white-space-normal">{{ prompt }}</span></gl-button
+      >
+    </div>
+  </div>
+</template>

package/src/components/experimental/duo/chat/constants.js

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

package/src/components/experimental/duo/chat/mock_data.js

@@ -0,0 +1,34 @@
+import { DOCUMENTATION_SOURCE_TYPES, MESSAGE_MODEL_ROLES } from './constants';
+
+const MOCK_SOURCES = [
+  {
+    title: 'GitLab Handbook',
+    source_type: DOCUMENTATION_SOURCE_TYPES.HANDBOOK.value,
+    source_url: '/handbook/',
+  },
+  {
+    stage: 'Mock Stage',
+    group: 'Mock Group',
+    source_type: DOCUMENTATION_SOURCE_TYPES.DOC.value,
+    source_url: '/company/team/',
+  },
+  {
+    date: '2023-04-21',
+    author: 'Test User',
+    source_type: DOCUMENTATION_SOURCE_TYPES.BLOG.value,
+    source_url: '/blog/',
+  },
+];
+
+export const MOCK_RESPONSE_MESSAGE = {
+  id: '123',
+  content: '_Duo Chat message_ comming from AI',
+  contentHtml: '<p><em>Duo Chat message</em> comming from AI</p>',
+  role: MESSAGE_MODEL_ROLES.assistant,
+  extras: {
+    sources: MOCK_SOURCES,
+  },
+  requestId: '987',
+  errors: [],
+  timestamp: '2021-04-21T12:00:00.000Z',
+};