@gitlab/ui 66.25.0 → 66.26.0

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

@@ -0,0 +1,381 @@
+import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import { GlDuoUserFeedback } from '../../../../../../index';
+import {
+  MOCK_USER_PROMPT_MESSAGE,
+  MOCK_RESPONSE_MESSAGE,
+  MOCK_CHUNK_RESPONSE_MESSAGE,
+} from '../../mock_data';
+import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources.vue';
+import GlDuoChatMessage from './duo_chat_message.vue';
+
+describe('DuoChatMessage', () => {
+  let wrapper;
+
+  const findContent = () => wrapper.findComponent({ ref: 'content' });
+  const findDocumentSources = () => wrapper.findComponent(DocumentationSources);
+  const findUserFeedback = () => wrapper.findComponent(GlDuoUserFeedback);
+  const mockMarkdownContent = 'foo **bar**';
+
+  let renderMarkdown;
+  let renderGFM;
+
+  const componentFactory = ({ message = MOCK_USER_PROMPT_MESSAGE, options = {} } = {}) => {
+    return shallowMount(GlDuoChatMessage, {
+      ...options,
+      propsData: {
+        message,
+      },
+      provide: {
+        renderMarkdown,
+        renderGFM,
+      },
+    });
+  };
+
+  const createComponent = (args) => {
+    wrapper = componentFactory(args);
+  };
+
+  beforeEach(() => {
+    renderMarkdown = jest.fn().mockImplementation((val) => val);
+    renderGFM = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('rendering', () => {
+    beforeEach(() => {
+      renderMarkdown.mockImplementation(() => mockMarkdownContent);
+      createComponent();
+    });
+
+    it('converts the message `content` to Markdown', () => {
+      expect(renderMarkdown).toHaveBeenCalledWith(MOCK_USER_PROMPT_MESSAGE.content);
+    });
+
+    it('renders message content', () => {
+      expect(wrapper.text()).toBe(mockMarkdownContent);
+    });
+
+    describe('user message', () => {
+      it('does not render the documentation sources component', () => {
+        expect(findDocumentSources().exists()).toBe(false);
+      });
+
+      it('does not render the user feedback component', () => {
+        expect(findUserFeedback().exists()).toBe(false);
+      });
+    });
+  });
+
+  describe('rendering - with assistant message', () => {
+    beforeEach(() => {
+      createComponent({
+        message: MOCK_RESPONSE_MESSAGE,
+      });
+    });
+
+    it('renders the documentation sources component by default', () => {
+      expect(findDocumentSources().exists()).toBe(true);
+      expect(findDocumentSources().props('sources')).toEqual(MOCK_RESPONSE_MESSAGE.extras.sources);
+    });
+
+    it.each([null, undefined, ''])(
+      'does not render sources component when `sources` is %s',
+      (sources) => {
+        createComponent({
+          message: {
+            ...MOCK_RESPONSE_MESSAGE,
+            extras: {
+              sources,
+            },
+          },
+        });
+        expect(findDocumentSources().exists()).toBe(false);
+      }
+    );
+
+    it('renders the user feedback component', () => {
+      expect(findUserFeedback().exists()).toBe(true);
+    });
+
+    it('proxies the emitted event from the User Feedback component', () => {
+      findUserFeedback().vm.$emit('feedback', 'foo');
+      expect(wrapper.emitted('track-feedback')).toEqual([['foo']]);
+    });
+  });
+
+  describe('message output', () => {
+    it('hydrates the message with GLFM when mounting the component', () => {
+      createComponent();
+      expect(renderGFM).toHaveBeenCalled();
+    });
+
+    it('outputs errors if message has no content', async () => {
+      const errors = ['foo', 'bar', 'baz'];
+
+      createComponent({
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          contentHtml: '',
+          content: '',
+          errors,
+        },
+      });
+
+      await nextTick();
+
+      expect(findContent().text()).toContain(errors[0]);
+      expect(findContent().text()).toContain(errors[1]);
+      expect(findContent().text()).toContain(errors[2]);
+    });
+
+    describe('message updates watcher', () => {
+      const newContent = 'new foo content';
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('listens to the message changes', async () => {
+        expect(findContent().text()).toContain(MOCK_USER_PROMPT_MESSAGE.content);
+        // setProps is justified here because we are testing the component's
+        // reactive behavior which consistutes an exception
+        // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+        wrapper.setProps({
+          message: {
+            ...MOCK_USER_PROMPT_MESSAGE,
+            contentHtml: `<p>${newContent}</p>`,
+          },
+        });
+        await nextTick();
+        expect(findContent().text()).not.toContain(MOCK_USER_PROMPT_MESSAGE.content);
+        expect(findContent().text()).toContain(newContent);
+      });
+
+      it('prioritises the output of contentHtml over content', async () => {
+        // setProps is justified here because we are testing the component's
+        // reactive behavior which consistutes an exception
+        // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+        wrapper.setProps({
+          message: {
+            ...MOCK_USER_PROMPT_MESSAGE,
+            contentHtml: `<p>${MOCK_USER_PROMPT_MESSAGE.content}</p>`,
+            content: newContent,
+          },
+        });
+        await nextTick();
+        expect(findContent().text()).not.toContain(newContent);
+        expect(findContent().text()).toContain(MOCK_USER_PROMPT_MESSAGE.content);
+      });
+
+      it('outputs errors if message has no content', async () => {
+        // setProps is justified here because we are testing the component's
+        // reactive behavior which consistutes an exception
+        // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+        wrapper.setProps({
+          message: {
+            ...MOCK_USER_PROMPT_MESSAGE,
+            contentHtml: '',
+            content: '',
+            errors: ['error'],
+          },
+        });
+        await nextTick();
+        expect(findContent().text()).not.toContain(newContent);
+        expect(findContent().text()).not.toContain(MOCK_USER_PROMPT_MESSAGE.content);
+        expect(findContent().text()).toContain('error');
+      });
+
+      it('merges all the errors for output', async () => {
+        const errors = ['foo', 'bar', 'baz'];
+        // setProps is justified here because we are testing the component's
+        // reactive behavior which consistutes an exception
+        // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+        wrapper.setProps({
+          message: {
+            ...MOCK_USER_PROMPT_MESSAGE,
+            contentHtml: '',
+            content: '',
+            errors,
+          },
+        });
+        await nextTick();
+        expect(findContent().text()).toContain(errors[0]);
+        expect(findContent().text()).toContain(errors[1]);
+        expect(findContent().text()).toContain(errors[2]);
+      });
+
+      it('hydrates the output message with GLFM if its not a chunk', async () => {
+        // setProps is justified here because we are testing the component's
+        // reactive behavior which consistutes an exception
+        // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+        wrapper.setProps({
+          message: {
+            ...MOCK_USER_PROMPT_MESSAGE,
+            contentHtml: `<p>${newContent}</p>`,
+          },
+        });
+        await nextTick();
+        expect(renderGFM).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('updates to the message', () => {
+    const content1 = 'chunk #1';
+    const content2 = ' chunk #2';
+    const content3 = ' chunk #3';
+    const chunk1 = {
+      ...MOCK_CHUNK_RESPONSE_MESSAGE,
+      content: content1,
+      chunkId: 1,
+    };
+    const chunk2 = {
+      ...MOCK_CHUNK_RESPONSE_MESSAGE,
+      content: content2,
+      chunkId: 2,
+    };
+    const chunk3 = {
+      ...MOCK_CHUNK_RESPONSE_MESSAGE,
+      content: content3,
+      chunkId: 3,
+    };
+
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('does not fail if the message has no chunkId', async () => {
+      // setProps is justified here because we are testing the component's
+      // reactive behavior which consistutes an exception
+      // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+      wrapper.setProps({
+        message: {
+          ...MOCK_CHUNK_RESPONSE_MESSAGE,
+          content: content1,
+        },
+      });
+      await nextTick();
+      expect(findContent().text()).toBe(content1);
+    });
+
+    it('renders chunks correctly when the chunks arrive out of order', async () => {
+      // setProps is justified here because we are testing the component's
+      // reactive behavior which consistutes an exception
+      // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+      wrapper.setProps({
+        message: chunk2,
+      });
+      await nextTick();
+      expect(findContent().text()).toBe('');
+
+      wrapper.setProps({
+        message: chunk1,
+      });
+      await nextTick();
+      expect(findContent().text()).toBe(content1 + content2);
+
+      wrapper.setProps({
+        message: chunk3,
+      });
+      await nextTick();
+      expect(findContent().text()).toBe(content1 + content2 + content3);
+    });
+
+    it('renders the chunks as they arrive', async () => {
+      const consolidatedContent = content1 + content2;
+
+      // setProps is justified here because we are testing the component's
+      // reactive behavior which consistutes an exception
+      // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+      wrapper.setProps({
+        message: chunk1,
+      });
+      await nextTick();
+      expect(findContent().text()).toBe(content1);
+
+      wrapper.setProps({
+        message: chunk2,
+      });
+      await nextTick();
+      expect(findContent().text()).toBe(consolidatedContent);
+    });
+
+    it('treats the initial message content as chunk if message has chunkId', async () => {
+      createComponent({
+        message: chunk1,
+      });
+      await nextTick();
+      expect(findContent().text()).toBe(content1);
+
+      // setProps is justified here because we are testing the component's
+      // reactive behavior which consistutes an exception
+      // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+      wrapper.setProps({
+        message: chunk2,
+      });
+      await nextTick();
+      expect(findContent().text()).toBe(content1 + content2);
+    });
+
+    it('does not hydrate the chunk messages with GLFM', async () => {
+      createComponent({
+        propsData: {
+          message: chunk1,
+        },
+      });
+      renderGFM.mockClear();
+      expect(renderGFM).not.toHaveBeenCalled();
+
+      // setProps is justified here because we are testing the component's
+      // reactive behavior which consistutes an exception
+      // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+      wrapper.setProps({
+        message: chunk2,
+      });
+      await nextTick();
+      expect(renderGFM).not.toHaveBeenCalled();
+    });
+
+    it.each`
+      content    | contentHtml | errors            | expectedContent
+      ${'alpha'} | ${'beta'}   | ${['foo', 'bar']} | ${'beta'}
+      ${'alpha'} | ${'beta'}   | ${[]}             | ${'beta'}
+      ${'alpha'} | ${''}       | ${['foo', 'bar']} | ${'alpha'}
+      ${'alpha'} | ${''}       | ${[]}             | ${'alpha'}
+      ${''}      | ${'beta'}   | ${['foo', 'bar']} | ${'beta'}
+      ${''}      | ${'beta'}   | ${[]}             | ${'beta'}
+      ${''}      | ${''}       | ${['foo', 'bar']} | ${'foo; bar'}
+    `(
+      'outputs "$expectedContent" and hydrates this content when content is "$content", contentHtml is "$contentHtml" and errors is "$errors" with "chunkId: null"',
+      async ({ content, contentHtml, errors, expectedContent } = {}) => {
+        createComponent({
+          propsData: {
+            message: chunk1,
+          },
+        });
+        renderGFM.mockClear();
+        expect(renderGFM).not.toHaveBeenCalled();
+
+        // setProps is justified here because we are testing the component's
+        // reactive behavior which consistutes an exception
+        // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+        wrapper.setProps({
+          message: {
+            ...MOCK_CHUNK_RESPONSE_MESSAGE,
+            chunkId: null,
+            content,
+            contentHtml,
+            errors,
+          },
+        });
+        await nextTick();
+        expect(renderGFM).toHaveBeenCalled();
+        expect(findContent().text()).toBe(expectedContent);
+      }
+    );
+  });
+});

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

@@ -0,0 +1,45 @@
+import { MOCK_RESPONSE_MESSAGE, MOCK_USER_PROMPT_MESSAGE } from '../../mock_data';
+import GlDuoChatMessage from './duo_chat_message.vue';
+import readme from './duo_chat_message.md';
+
+const renderMarkdown = (content) => content;
+const renderGFM = () => {};
+
+const generateProps = ({ message = MOCK_RESPONSE_MESSAGE } = {}) => ({
+  message,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: { GlDuoChatMessage },
+  props: Object.keys(argTypes),
+  provide: {
+    renderMarkdown,
+    renderGFM,
+  },
+  template: `
+    <gl-duo-chat-message :message="message" />
+  `,
+});
+
+export const User = Template.bind({});
+User.args = generateProps({
+  message: MOCK_USER_PROMPT_MESSAGE,
+});
+
+export const Response = Template.bind({});
+Response.args = generateProps({
+  message: MOCK_RESPONSE_MESSAGE,
+});
+
+export default {
+  title: 'experimental/duo/chat/duo-chat-message',
+  component: GlDuoChatMessage,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {},
+};

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

@@ -0,0 +1,107 @@
+<script>
+import { GlDuoUserFeedback } from '../../../../../../index';
+import { SafeHtmlDirective as SafeHtml } from '../../../../../../directives/safe_html/safe_html';
+import { MESSAGE_MODEL_ROLES } from '../../constants';
+import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources.vue';
+
+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('');
+};
+
+export default {
+  name: 'GlDuoChatMessage',
+  components: {
+    DocumentationSources,
+    GlDuoUserFeedback,
+  },
+  directives: {
+    SafeHtml,
+  },
+  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() {
+      return 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>
+<template>
+  <div
+    class="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': isUserMessage,
+      'gl-rounded-bottom-left-none gl-text-gray-900 gl-bg-white gl-border-1 gl-border-solid gl-border-gray-50':
+        isAssistantMessage,
+    }"
+  >
+    <div ref="content" v-safe-html="messageContent"></div>
+
+    <template v-if="isAssistantMessage">
+      <documentation-sources v-if="sources" :sources="sources" />
+
+      <div class="gl-display-flex gl-align-items-flex-end gl-mt-4">
+        <gl-duo-user-feedback @feedback="$emit('track-feedback', $event)" />
+      </div>
+    </template>
+  </div>
+</template>

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

@@ -22,8 +22,10 @@ const MOCK_SOURCES = [
 
 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>',
+  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,
@@ -32,3 +34,44 @@ export const MOCK_RESPONSE_MESSAGE = {
   errors: [],
   timestamp: '2021-04-21T12:00:00.000Z',
 };
+
+export const MOCK_CHUNK_RESPONSE_MESSAGE = {
+  chunkId: 1,
+  content: 'chunk',
+  role: MESSAGE_MODEL_ROLES.assistant,
+  requestId: '987',
+  errors: [],
+  timestamp: '2021-04-21T12:00:00.000Z',
+};
+
+export 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',
+};
+
+export 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,
+};

package/src/scss/components.scss

@@ -3,6 +3,7 @@
 // @import '../components/base/dropdown/dropdown'
 //
 // ADD COMPONENT IMPORTS - needed for yarn generate:component. Do not remove
+@import '../components/experimental/duo/chat/components/duo_chat_message/duo_chat_message';
 @import '../components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader';
 @import '../components/base/new_dropdowns/disclosure/disclosure_dropdown';
 @import '../components/base/keyset_pagination/keyset_pagination';

package/src/utils/charts/constants.js

@@ -65,5 +65,6 @@ export const CHART_TYPE_BAR = 'bar';
 export const CHART_TYPE_LINE = 'line';
 
 // Constants for height "auto"
-export const HEIGHT_AUTO_CLASSES = 'gl-display-flex gl-flex-direction-column gl-h-full';
+export const HEIGHT_AUTO_CLASSES =
+  'gl-chart-h-auto gl-display-flex gl-flex-direction-column gl-h-full';
 export const HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES = 'gl-display-flex gl-h-full';