@gitlab/ui 66.32.0 → 66.33.0

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

@@ -0,0 +1,391 @@
+import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import GlEmptyState from '../../../regions/empty_state/empty_state.vue';
+import GlExperimentBadge from '../../experiment_badge/experiment_badge.vue';
+import DuoChatLoader from './components/duo_chat_loader/duo_chat_loader.vue';
+import DuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue';
+import DuoChatConversation from './components/duo_chat_conversation/duo_chat_conversation.vue';
+import GlDuoChat from './duo_chat.vue';
+
+import { MESSAGE_MODEL_ROLES, CHAT_RESET_MESSAGE } from './constants';
+
+describe('GlDuoChat', () => {
+  let wrapper;
+
+  const createComponent = ({ propsData = {}, data = {}, slots = {} } = {}) => {
+    jest.spyOn(DuoChatLoader.methods, 'computeTransitionWidth').mockImplementation();
+
+    wrapper = shallowMount(GlDuoChat, {
+      propsData,
+      data() {
+        return {
+          ...data,
+        };
+      },
+      slots,
+      stubs: {
+        DuoChatLoader,
+      },
+    });
+  };
+
+  const findChatComponent = () => wrapper.find('[data-testid="chat-component"]');
+  const findCloseButton = () => wrapper.find('[data-testid="chat-close-button"]');
+  const findChatConversations = () => wrapper.findAllComponents(DuoChatConversation);
+  const findCustomLoader = () => wrapper.findComponent(DuoChatLoader);
+  const findError = () => wrapper.find('[data-testid="chat-error"]');
+  const findFooter = () => wrapper.find('[data-testid="chat-footer"]');
+  const findPromptForm = () => wrapper.find('[data-testid="chat-prompt-form"]');
+  const findGeneratedByAI = () => wrapper.find('[data-testid="chat-legal-warning"]');
+  const findBadge = () => wrapper.findComponent(GlExperimentBadge);
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+  const findPredefined = () => wrapper.findComponent(DuoChatPredefinedPrompts);
+  const findChatInput = () => wrapper.find('[data-testid="chat-prompt-input"]');
+  const findCloseChatButton = () => wrapper.find('[data-testid="chat-close-button"]');
+  const findLegalDisclaimer = () => wrapper.find('[data-testid="chat-legal-disclaimer"]');
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  const promptStr = 'foo';
+  const messages = [
+    {
+      role: MESSAGE_MODEL_ROLES.user,
+      content: promptStr,
+    },
+  ];
+
+  describe('rendering', () => {
+    it('does not fail if no messages are passed', () => {
+      createComponent({
+        propsData: { messages: null },
+      });
+      expect(findChatConversations()).toHaveLength(0);
+      expect(findEmptyState().exists()).toBe(true);
+    });
+
+    it.each`
+      desc                                  | component            | shouldRender
+      ${'renders root component'}           | ${findChatComponent} | ${true}
+      ${'renders experimental label'}       | ${findBadge}         | ${true}
+      ${'renders empty state'}              | ${findEmptyState}    | ${true}
+      ${'renders predefined prompts'}       | ${findPredefined}    | ${true}
+      ${'does not render loading skeleton'} | ${findCustomLoader}  | ${false}
+      ${'does not render chat error'}       | ${findError}         | ${false}
+      ${'does render chat input'}           | ${findChatInput}     | ${true}
+      ${'renders a generated by AI note'}   | ${findGeneratedByAI} | ${true}
+    `('$desc', ({ component, shouldRender }) => {
+      expect(component().exists()).toBe(shouldRender);
+    });
+
+    describe('when messages exist', () => {
+      it('scrolls to the bottom on load', async () => {
+        createComponent({ propsData: { messages } });
+        const { element } = findChatComponent();
+        jest.spyOn(element, 'scrollHeight', 'get').mockReturnValue(200);
+
+        await nextTick();
+
+        expect(element.scrollTop).toEqual(200);
+      });
+    });
+
+    describe('conversations', () => {
+      it('renders one conversation when no reset message is present', () => {
+        const newMessages = [
+          {
+            role: MESSAGE_MODEL_ROLES.user,
+            content: 'How are you?',
+          },
+          {
+            role: MESSAGE_MODEL_ROLES.assistant,
+            content: 'Great!',
+          },
+        ];
+        createComponent({ propsData: { messages: newMessages } });
+
+        expect(findChatConversations().length).toEqual(1);
+        expect(findChatConversations().at(0).props('showDelimiter')).toEqual(false);
+      });
+
+      it('does not render conversations when no message is present', () => {
+        createComponent({ propsData: { messages: [] } });
+
+        expect(findChatConversations().length).toEqual(0);
+      });
+
+      it('splits it up into multiple conversations when reset message is present', () => {
+        const newMessages = [
+          {
+            role: MESSAGE_MODEL_ROLES.user,
+            content: 'Message 1',
+          },
+          {
+            role: MESSAGE_MODEL_ROLES.assistant,
+            content: 'Great!',
+          },
+          {
+            role: MESSAGE_MODEL_ROLES.user,
+            content: CHAT_RESET_MESSAGE,
+          },
+        ];
+        createComponent({ propsData: { messages: newMessages } });
+
+        expect(findChatConversations().length).toEqual(2);
+        expect(findChatConversations().at(0).props('showDelimiter')).toEqual(false);
+        expect(findChatConversations().at(1).props('showDelimiter')).toEqual(true);
+      });
+    });
+
+    describe('slots', () => {
+      const slotContent = 'As Gregor Samsa awoke one morning from uneasy dreams';
+
+      it.each`
+        slot           | content        | isChatAvailable
+        ${'hero'}      | ${slotContent} | ${true}
+        ${'hero'}      | ${slotContent} | ${false}
+        ${'subheader'} | ${slotContent} | ${false}
+        ${'subheader'} | ${slotContent} | ${true}
+      `(
+        'renders the $content passed to the $slot slot when isChatAvailable is $isChatAvailable',
+        ({ slot, content, isChatAvailable }) => {
+          createComponent({
+            propsData: { isChatAvailable },
+            slots: { [slot]: content },
+          });
+          expect(wrapper.text()).toContain(content);
+        }
+      );
+    });
+
+    it('sets correct props on the Experiment badge', () => {
+      const experimentHelpPageUrl = 'https://foo.bar';
+      const containerId = 'chat-component';
+      createComponent({ propsData: { experimentHelpPageUrl } });
+      expect(findBadge().props('experimentHelpPageUrl')).toBe(experimentHelpPageUrl);
+      expect(findBadge().attributes('container-id')).toBe(containerId);
+    });
+  });
+
+  describe('chat', () => {
+    const clickSubmit = () =>
+      findPromptForm().vm.$emit('submit', {
+        preventDefault: jest.fn(),
+        stopPropagation: jest.fn(),
+      });
+
+    it('does render the prompt input by default', () => {
+      createComponent({ propsData: { messages } });
+      expect(findChatInput().exists()).toBe(true);
+    });
+
+    it('does not render the prompt input if `isChatAvailable` prop is `false`', () => {
+      createComponent({ propsData: { messages, isChatAvailable: false } });
+      expect(findChatInput().exists()).toBe(false);
+    });
+
+    it('renders the legal disclaimer if `isChatAvailable` prop is `true', () => {
+      createComponent({ propsData: { messages, isChatAvailable: true } });
+      expect(findLegalDisclaimer().exists()).toBe(true);
+    });
+
+    describe('submit', () => {
+      const ENTER = 'Enter';
+
+      it.each`
+        trigger                                                                            | event                         | action          | expectEmitted
+        ${() => clickSubmit()}                                                             | ${'Submit button click'}      | ${'submit'}     | ${[[promptStr]]}
+        ${() => findChatInput().trigger('keydown.enter', { code: ENTER })}                 | ${`Clicking ${ENTER}`}        | ${'submit'}     | ${[[promptStr]]}
+        ${() => findChatInput().trigger('keydown.enter', { code: ENTER, metaKey: true })}  | ${`Clicking ${ENTER} + ⌘`}    | ${'not submit'} | ${undefined}
+        ${() => findChatInput().trigger('keydown.enter', { code: ENTER, altKey: true })}   | ${`Clicking ${ENTER} + ⎇`}    | ${'not submit'} | ${undefined}
+        ${() => findChatInput().trigger('keydown.enter', { code: ENTER, shiftKey: true })} | ${`Clicking ${ENTER} + ⬆︎`}   | ${'not submit'} | ${undefined}
+        ${() => findChatInput().trigger('keydown.enter', { code: ENTER, ctrlKey: true })}  | ${`Clicking ${ENTER} + CTRL`} | ${'not submit'} | ${undefined}
+      `('$event should $action the prompt form', ({ trigger, expectEmitted } = {}) => {
+        createComponent({
+          propsData: { messages: [], isChatAvailable: true },
+          data: { prompt: promptStr },
+        });
+        trigger();
+        if (expectEmitted) {
+          expect(wrapper.emitted('send-chat-prompt')).toEqual(expectEmitted);
+        } else {
+          expect(wrapper.emitted('send-chat-prompt')).toBe(undefined);
+        }
+      });
+    });
+
+    describe('reset', () => {
+      it('emits the event with the reset prompt', () => {
+        createComponent({
+          propsData: { messages, isChatAvailable: true },
+          data: { prompt: CHAT_RESET_MESSAGE },
+        });
+        clickSubmit();
+
+        expect(wrapper.emitted('send-chat-prompt')).toEqual([[CHAT_RESET_MESSAGE]]);
+        expect(findChatConversations().length).toEqual(1);
+      });
+
+      it('reset does nothing when chat is loading', () => {
+        createComponent({
+          propsData: { messages, isChatAvailable: true, isLoading: true },
+          data: { prompt: CHAT_RESET_MESSAGE },
+        });
+        clickSubmit();
+
+        expect(wrapper.emitted('send-chat-prompt')).toBeUndefined();
+        expect(findChatConversations().length).toEqual(1);
+      });
+
+      it('reset does nothing when there are no messages', () => {
+        createComponent({
+          propsData: { messages: [], isChatAvailable: true },
+          data: { prompt: CHAT_RESET_MESSAGE },
+        });
+        clickSubmit();
+
+        expect(wrapper.emitted('send-chat-prompt')).toBeUndefined();
+        expect(findChatConversations().length).toEqual(0);
+      });
+
+      it('reset does nothing when last message was a reset message', () => {
+        const existingMessages = [
+          ...messages,
+          {
+            role: MESSAGE_MODEL_ROLES.user,
+            content: CHAT_RESET_MESSAGE,
+          },
+        ];
+        createComponent({
+          propsData: {
+            isLoading: false,
+            messages: existingMessages,
+            isChatAvailable: true,
+          },
+          data: { prompt: CHAT_RESET_MESSAGE },
+        });
+        clickSubmit();
+
+        expect(wrapper.emitted('send-chat-prompt')).toBeUndefined();
+
+        expect(findChatConversations().length).toEqual(2);
+        expect(findChatConversations().at(0).props('messages')).toEqual(messages);
+        expect(findChatConversations().at(1).props('messages')).toEqual([]);
+      });
+    });
+  });
+
+  describe('interaction', () => {
+    it('is hidden after the header button is clicked', async () => {
+      findCloseButton().vm.$emit('click');
+      await nextTick();
+      expect(findChatComponent().exists()).toBe(false);
+    });
+
+    it('resets the hidden status of the component on loading', async () => {
+      createComponent({ data: { isHidden: true } });
+      expect(findChatComponent().exists()).toBe(false);
+      // 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({
+        isLoading: true,
+      });
+      await nextTick();
+      expect(findChatComponent().exists()).toBe(true);
+    });
+
+    it('resets the prompt when new messages are added', async () => {
+      const prompt = 'foo';
+      createComponent({ data: { prompt } });
+      expect(findChatInput().props('value')).toBe(prompt);
+      // 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({
+        messages,
+      });
+      await nextTick();
+      expect(findChatInput().props('value')).toBe('');
+    });
+
+    it('renders custom loader when isLoading', () => {
+      createComponent({ propsData: { isLoading: true } });
+      expect(findCustomLoader().exists()).toBe(true);
+    });
+
+    it('renders alert if error', () => {
+      const errorMessage = 'Something went Wrong';
+      createComponent({ propsData: { error: errorMessage } });
+      expect(findError().text()).toBe(errorMessage);
+    });
+
+    it('hides the chat on button click and emits an event', async () => {
+      createComponent({ propsData: { messages } });
+      expect(findChatComponent().exists()).toBe(true);
+      findCloseChatButton().vm.$emit('click');
+      await nextTick();
+      expect(findChatComponent().exists()).toBe(false);
+      expect(wrapper.emitted('chat-hidden')).toBeDefined();
+    });
+
+    it('does not render the empty state when there are messages available', () => {
+      createComponent({ propsData: { messages } });
+      expect(findEmptyState().exists()).toBe(false);
+    });
+
+    describe('scrolling', () => {
+      let element;
+
+      beforeEach(() => {
+        createComponent({ propsData: { messages, isChatAvailable: true } });
+        element = findChatComponent().element;
+      });
+
+      it('when scrolling to the bottom it removes the scrim class', async () => {
+        jest.spyOn(element, 'scrollTop', 'get').mockReturnValue(100);
+        jest.spyOn(element, 'offsetHeight', 'get').mockReturnValue(100);
+        jest.spyOn(element, 'scrollHeight', 'get').mockReturnValue(200);
+
+        findChatComponent().trigger('scroll');
+
+        await nextTick();
+
+        expect(findFooter().classes()).not.toContain('gl-drawer-body-scrim-on-footer');
+      });
+
+      it('when scrolling up it adds the scrim class', async () => {
+        jest.spyOn(element, 'scrollTop', 'get').mockReturnValue(50);
+        jest.spyOn(element, 'offsetHeight', 'get').mockReturnValue(100);
+        jest.spyOn(element, 'scrollHeight', 'get').mockReturnValue(200);
+
+        findChatComponent().trigger('scroll');
+
+        await nextTick();
+
+        expect(findFooter().classes()).toContain('gl-drawer-body-scrim-on-footer');
+      });
+    });
+
+    describe('predefined prompts', () => {
+      const prompts = ['what is a fork'];
+
+      beforeEach(() => {
+        createComponent({ propsData: { predefinedPrompts: prompts } });
+      });
+
+      it('passes on predefined prompts', () => {
+        expect(findPredefined().props().prompts).toEqual(prompts);
+      });
+
+      it('listens to the click event and sends the predefined prompt', async () => {
+        findPredefined().vm.$emit('click', prompts[0]);
+
+        await nextTick();
+
+        expect(wrapper.emitted('send-chat-prompt')).toEqual([[prompts[0]]]);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,216 @@
+import GlButton from '../../../base/button/button.vue';
+import GlAlert from '../../../base/alert/alert.vue';
+import { setStoryTimeout } from '../../../../utils/test_utils';
+import { makeContainer } from '../../../../utils/story_decorators/container';
+import GlDuoChat from './duo_chat.vue';
+import readme from './duo_chat.md';
+import {
+  MOCK_RESPONSE_MESSAGE,
+  MOCK_USER_PROMPT_MESSAGE,
+  generateMockResponseChunks,
+} from './mock_data';
+
+const renderMarkdown = (content) => content;
+const renderGFM = () => {};
+
+const defaultValue = (prop) =>
+  typeof GlDuoChat.props[prop].default === 'function'
+    ? GlDuoChat.props[prop].default()
+    : GlDuoChat.props[prop].default;
+
+const generateProps = ({
+  title = defaultValue('title'),
+  messages = defaultValue('messages'),
+  error = defaultValue('error'),
+  isLoading = defaultValue('isLoading'),
+  isChatAvailable = defaultValue('isChatAvailable'),
+  predefinedPrompts = defaultValue('predefinedPrompts'),
+  experimentHelpPageUrl = defaultValue('experimentHelpPageUrl'),
+  toolName = defaultValue('toolName'),
+} = {}) => ({
+  title,
+  messages,
+  error,
+  isLoading,
+  isChatAvailable,
+  predefinedPrompts,
+  experimentHelpPageUrl,
+  toolName,
+});
+
+export const Default = (args, { argTypes }) => ({
+  components: { GlDuoChat },
+  props: Object.keys(argTypes),
+  provide: {
+    renderMarkdown,
+    renderGFM,
+  },
+  template: `
+    <gl-duo-chat
+      :title="title"
+      :messages="messages"
+      :error="error"
+      :is-loading="isLoading"
+      :is-chat-available="isChatAvailable"
+      :predefined-prompts="predefinedPrompts"
+      :experiment-help-page-url="experimentHelpPageUrl"
+      :tool-name="toolName"
+    />`,
+});
+Default.args = generateProps({
+  messages: [MOCK_USER_PROMPT_MESSAGE, MOCK_RESPONSE_MESSAGE],
+});
+Default.decorators = [makeContainer({ height: '800px' })];
+
+export const Interactive = (args, { argTypes }) => ({
+  components: { GlDuoChat, GlButton },
+  props: Object.keys(argTypes),
+  provide: {
+    renderMarkdown,
+    renderGFM,
+  },
+  data() {
+    return {
+      isHidden: false,
+      loggerInfo: '',
+      promptInFlight: false,
+      msgs: args.messages,
+      chunks: [],
+      timeout: null,
+      requestId: 1,
+    };
+  },
+  methods: {
+    onSendChatPrompt(prompt) {
+      const newPrompt = {
+        ...MOCK_USER_PROMPT_MESSAGE,
+        contentHtml: '',
+        content: prompt,
+        requestId: this.requestId,
+      };
+      this.loggerInfo += `New prompt: ${JSON.stringify(newPrompt)}\n\n`;
+      this.msgs.push(newPrompt);
+      this.promptInFlight = true;
+    },
+    onChatHidden() {
+      this.isHidden = true;
+      this.loggerInfo += `Chat closed\n\n`;
+    },
+    showChat() {
+      this.isHidden = false;
+      this.loggerInfo += `Chat opened\n\n`;
+    },
+    onResponseRequested() {
+      this.timeout = null;
+      this.chunks = generateMockResponseChunks(this.requestId);
+      this.mockResponseFromAi();
+      this.requestId += 1;
+    },
+    mockResponseFromAi() {
+      this.promptInFlight = false;
+      if (this.chunks.length) {
+        const newResponse = this.chunks.shift();
+        const existingMessageIndex = this.msgs.findIndex(
+          (msg) => msg.requestId === newResponse.requestId && msg.role === newResponse.role
+        );
+        const existingMessage = this.msgs[existingMessageIndex];
+        if (existingMessage) {
+          this.msgs.splice(existingMessageIndex, 1, {
+            ...existingMessage,
+            content: existingMessage.content + newResponse.content,
+          });
+        } else {
+          this.msgs.push(newResponse);
+        }
+        this.logerInfo += `New response: ${JSON.stringify(newResponse)}\n\n`;
+        this.timeout = setStoryTimeout(() => {
+          this.mockResponseFromAi();
+        }, Math.floor(Math.random() * 251) + 50);
+      }
+    },
+  },
+  template: `
+  <div style="height: 800px">
+    <div id="logger" class="gl-w-half">
+      <pre class="gl-font-sm" style="text-wrap: wrap">
+<code>{{ loggerInfo }}</code>
+      </pre>
+      <gl-button v-if="promptInFlight" @click="onResponseRequested">Mock the response</gl-button>
+    </div>
+    <gl-button v-if="isHidden" @click="showChat">Show chat</gl-button>
+    <gl-duo-chat
+      v-if="!isHidden"
+      :title="title"
+      :messages="msgs"
+      :error="error"
+      :is-loading="promptInFlight"
+      :is-chat-available="isChatAvailable"
+      :predefined-prompts="predefinedPrompts"
+      :experiment-help-page-url="experimentHelpPageUrl"
+      :tool-name="toolName"
+      @send-chat-prompt="onSendChatPrompt"
+      @chat-hidden="onChatHidden"
+    />
+  </div>`,
+});
+Interactive.args = generateProps({});
+
+export const Slots = (args, { argTypes }) => ({
+  components: { GlDuoChat, GlAlert },
+  props: Object.keys(argTypes),
+  provide: {
+    renderMarkdown,
+    renderGFM,
+  },
+  template: `
+    <div>
+      <gl-duo-chat
+        :title="title"
+        :messages="messages"
+        :error="error"
+        :is-loading="isLoading"
+        :is-chat-available="isChatAvailable"
+        :predefined-prompts="predefinedPrompts"
+        :experiment-help-page-url="experimentHelpPageUrl"
+        :tool-name="toolName">
+
+        <template #hero>
+<pre class="code-block rounded code highlight gl-border-b gl-rounded-0! gl-mb-0 gl-overflow-y-auto solarized-light" style="max-height: 20rem; overflow-y: auto;">
+if (firstUserPromptIndex >= 0 && lastUserPromptIndex > firstUserPromptIndex) {
+  messages.splice(firstUserPromptIndex, 1);
+  return truncateChatPrompt(messages);
+}
+</pre>
+        </template>
+        <template #subheader>
+          <gl-alert
+            :dismissible="false"
+            variant="warning"
+            class="gl-font-sm gl-border-t"
+            role="alert"
+            data-testid="chat-legal-warning-gitlab-usage"
+            primary-button-link="https://internal-handbook.gitlab.io/handbook/product/ai-strategy/ai-integration-effort/legal_restrictions/"
+            primary-button-text="Read more"
+          >
+            <p>
+              You are not allowed to copy any part of this output into issues, comments, GitLab source code, commit messages, merge requests or any other user interface in the <code>/gitlab-org</code> or <code>/gitlab-com</code> groups.
+            </p>
+          </gl-alert>
+        </template>
+      </gl-duo-chat>
+    </div>
+    `,
+});
+Slots.decorators = [makeContainer({ height: '800px' })];
+
+export default {
+  title: 'experimental/duo/chat/duo-chat',
+  component: GlDuoChat,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};