@gitlab/ui 66.32.1 → 66.34.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,
+      },
+    },
+  },
+};

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

@@ -0,0 +1,372 @@
+<script>
+import throttle from 'lodash/throttle';
+import emptySvg from '@gitlab/svgs/dist/illustrations/empty-state/empty-activity-md.svg';
+import GlEmptyState from '../../../regions/empty_state/empty_state.vue';
+import GlButton from '../../../base/button/button.vue';
+import GlAlert from '../../../base/alert/alert.vue';
+import GlFormInputGroup from '../../../base/form/form_input_group/form_input_group.vue';
+import GlFormTextarea from '../../../base/form/form_textarea/form_textarea.vue';
+import GlForm from '../../../base/form/form.vue';
+import GlFormText from '../../../base/form/form_text/form_text.vue';
+import GlExperimentBadge from '../../experiment_badge/experiment_badge.vue';
+import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
+import GlDuoChatLoader from './components/duo_chat_loader/duo_chat_loader.vue';
+import GlDuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue';
+import GlDuoChatConversation from './components/duo_chat_conversation/duo_chat_conversation.vue';
+import { CHAT_RESET_MESSAGE } from './constants';
+
+export const i18n = {
+  CHAT_DEFAULT_TITLE: 'GitLab Duo Chat',
+  CHAT_CLOSE_LABEL: 'Close the Code Explanation',
+  CHAT_LEGAL_GENERATED_BY_AI: 'Responses generated by AI',
+  CHAT_EMPTY_STATE_TITLE: 'Ask a question',
+  CHAT_EMPTY_STATE_DESC: 'AI generated explanations will appear here.',
+  CHAT_PROMPT_PLACEHOLDER: 'GitLab Duo Chat',
+  CHAT_SUBMIT_LABEL: 'Send chat message.',
+  CHAT_LEGAL_DISCLAIMER:
+    "May provide inappropriate responses not representative of GitLab's views. Do not input personal data.",
+  CHAT_DEFAULT_PREDEFINED_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?',
+  ],
+};
+
+const isMessage = (item) => Boolean(item) && item?.role;
+
+const itemsValidator = (items) => items.every(isMessage);
+
+export default {
+  name: 'GlDuoChat',
+  components: {
+    GlEmptyState,
+    GlButton,
+    GlAlert,
+    GlFormInputGroup,
+    GlFormTextarea,
+    GlForm,
+    GlFormText,
+    GlExperimentBadge,
+    GlDuoChatLoader,
+    GlDuoChatPredefinedPrompts,
+    GlDuoChatConversation,
+  },
+  directives: {
+    SafeHtml,
+  },
+  props: {
+    /**
+     * The title of the chat/feature.
+     */
+    title: {
+      type: String,
+      required: false,
+      default: i18n.CHAT_DEFAULT_TITLE,
+    },
+    /**
+     * Array of messages to display in the chat.
+     */
+    messages: {
+      type: Array,
+      required: false,
+      default: () => [],
+      validator: itemsValidator,
+    },
+    /**
+     * A non-recoverable error message to display in the chat.
+     */
+    error: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * Whether the chat is currently fetching a response from AI.
+     */
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Whether the conversational interfaces should be enabled.
+     */
+    isChatAvailable: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    /**
+     * Array of predefined prompts to display in the chat to start a conversation.
+     */
+    predefinedPrompts: {
+      type: Array,
+      required: false,
+      default: () => i18n.CHAT_DEFAULT_PREDEFINED_PROMPTS,
+    },
+    /**
+     * URL to the experiment help page. This is passed down to the `GlExperimentBadge` component. Refer that component for more information.
+     */
+    experimentHelpPageUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * The current tool's name to display in the loading message while waiting for a response from AI. Refer the `GlDuoChatLoader` component for more information.
+     */
+    toolName: {
+      type: String,
+      required: false,
+      default: i18n.CHAT_DEFAULT_TITLE,
+    },
+  },
+  data() {
+    return {
+      isHidden: false,
+      prompt: '',
+      scrolledToBottom: true,
+    };
+  },
+  computed: {
+    hasMessages() {
+      return this.messages?.length > 0;
+    },
+    conversations() {
+      if (!this.hasMessages) return [];
+
+      return this.messages.reduce(
+        (acc, message) => {
+          if (message.content === CHAT_RESET_MESSAGE) {
+            acc.push([]);
+          } else {
+            acc[acc.length - 1].push(message);
+          }
+          return acc;
+        },
+        [[]]
+      );
+    },
+    resetDisabled() {
+      if (this.isLoading || !this.hasMessages) {
+        return true;
+      }
+
+      const lastMessage = this.messages[this.messages.length - 1];
+      return lastMessage.content === CHAT_RESET_MESSAGE;
+    },
+  },
+  watch: {
+    isLoading() {
+      this.isHidden = false;
+      this.scrollToBottom();
+    },
+    messages() {
+      this.prompt = '';
+    },
+  },
+  created() {
+    this.handleScrollingTrottled = throttle(this.handleScrolling, 200); // Assume a 200ms throttle for example
+  },
+  mounted() {
+    this.scrollToBottom();
+  },
+  methods: {
+    hideChat() {
+      this.isHidden = true;
+      /**
+       * Emitted when clicking the cross in the title and the chat gets closed.
+       */
+      this.$emit('chat-hidden');
+    },
+    sendChatPrompt() {
+      if (this.prompt) {
+        if (this.prompt === CHAT_RESET_MESSAGE && this.resetDisabled) {
+          return;
+        }
+        /**
+         * Emitted when a new user prompt should be sent out.
+         *
+         * @param {String} prompt The user prompt to send.
+         */
+        this.$emit('send-chat-prompt', this.prompt);
+      }
+    },
+    sendPredefinedPrompt(prompt) {
+      this.prompt = prompt;
+      this.sendChatPrompt();
+    },
+    handleScrolling() {
+      const { scrollTop, offsetHeight, scrollHeight } = this.$refs.drawer;
+      this.scrolledToBottom = scrollTop + offsetHeight >= scrollHeight;
+    },
+    async scrollToBottom() {
+      await this.$nextTick();
+
+      if (this.$refs.drawer) {
+        this.$refs.drawer.scrollTop = this.$refs.drawer.scrollHeight;
+      }
+    },
+    onTrackFeedback(event) {
+      /**
+       * Notify listeners about the feedback form submission on a response message.
+       * @param {*} event An event, containing the feedback choices and the extended feedback text.
+       */
+      this.$emit('track-feedback', event);
+    },
+  },
+  i18n,
+  emptySvg,
+};
+</script>
+<template>
+  <aside
+    v-if="!isHidden"
+    id="chat-component"
+    ref="drawer"
+    class="markdown-code-block gl-drawer gl-drawer-default gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat gl-h-auto"
+    role="complementary"
+    data-testid="chat-component"
+    @scroll="handleScrollingTrottled"
+  >
+    <header class="gl-drawer-header gl-drawer-header-sticky gl-z-index-200 gl-p-0! gl-border-b-0">
+      <div
+        class="drawer-title gl-display-flex gl-justify-content-start gl-align-items-center gl-p-5"
+      >
+        <h3 class="gl-my-0 gl-font-size-h2">{{ title }}</h3>
+        <gl-experiment-badge
+          :experiment-help-page-url="experimentHelpPageUrl"
+          container-id="chat-component"
+        />
+        <gl-button
+          category="tertiary"
+          variant="default"
+          icon="close"
+          size="small"
+          class="gl-p-0! gl-ml-auto"
+          data-testid="chat-close-button"
+          :aria-label="$options.i18n.CHAT_CLOSE_LABEL"
+          @click="hideChat"
+        />
+      </div>
+
+      <gl-alert
+        :dismissible="false"
+        variant="tip"
+        :show-icon="false"
+        class="gl-text-center gl-border-t gl-p-4 gl-text-gray-700 gl-bg-gray-50 legal-warning gl-max-w-full"
+        role="alert"
+        data-testid="chat-legal-warning"
+        >{{ $options.i18n.CHAT_LEGAL_GENERATED_BY_AI }}</gl-alert
+      >
+
+      <!-- 
+        @slot Subheader to be rendered right after the title. It is sticky and stays on top of the chat no matter the number of messages.
+      -->
+      <slot name="subheader"></slot>
+    </header>
+
+    <div class="gl-drawer-body gl-display-flex gl-flex-direction-column">
+      <!-- @slot 'Hero' information to be rendered at the top of the chat before any message. It gets pushed away from the view by incomming messages
+      -->
+      <slot name="hero"></slot>
+
+      <gl-alert
+        v-if="error"
+        key="error"
+        :dismissible="false"
+        variant="danger"
+        class="gl-mb-0 gl-pl-9!"
+        role="alert"
+        data-testid="chat-error"
+        ><span v-safe-html="error"></span
+      ></gl-alert>
+
+      <section
+        class="gl-display-flex gl-flex-direction-column gl-justify-content-end gl-flex-grow-1 gl-border-b-0 gl-bg-gray-10"
+      >
+        <transition-group
+          tag="div"
+          name="message"
+          class="gl-display-flex gl-flex-direction-column gl-justify-content-end"
+          :class="[
+            {
+              'gl-h-full': !hasMessages,
+              'gl-h-auto': hasMessages,
+            },
+          ]"
+        >
+          <gl-duo-chat-conversation
+            v-for="(conversation, index) in conversations"
+            :key="`conversation-${index}`"
+            :messages="conversation"
+            :show-delimiter="index > 0"
+            @track-feedback="onTrackFeedback"
+          />
+          <template v-if="!hasMessages && !isLoading">
+            <div key="empty-state" class="gl-display-flex gl-flex-grow-1 gl-mr-auto gl-ml-auto">
+              <gl-empty-state
+                :svg-path="$options.emptySvg"
+                :svg-height="145"
+                :title="$options.i18n.CHAT_EMPTY_STATE_TITLE"
+                :description="$options.i18n.CHAT_EMPTY_STATE_DESC"
+                class="gl-align-self-center"
+              />
+            </div>
+            <gl-duo-chat-predefined-prompts
+              key="predefined-prompts"
+              :prompts="predefinedPrompts"
+              @click="sendPredefinedPrompt"
+            />
+          </template>
+        </transition-group>
+        <transition name="loader">
+          <gl-duo-chat-loader v-if="isLoading" :tool-name="toolName" />
+        </transition>
+      </section>
+    </div>
+    <footer
+      v-if="isChatAvailable"
+      data-testid="chat-footer"
+      class="gl-drawer-footer gl-drawer-footer-sticky gl-p-5 gl-border-t gl-bg-gray-10"
+      :class="{ 'gl-drawer-body-scrim-on-footer': !scrolledToBottom }"
+    >
+      <gl-form data-testid="chat-prompt-form" @submit.stop.prevent="sendChatPrompt">
+        <gl-form-input-group>
+          <div
+            class="duo-chat-input gl-flex-grow-1 gl-vertical-align-top gl-max-w-full gl-min-h-8 gl-inset-border-1-gray-400 gl-rounded-base gl-bg-white"
+            :data-value="prompt"
+          >
+            <gl-form-textarea
+              v-model="prompt"
+              data-testid="chat-prompt-input"
+              class="gl-absolute gl-h-full! gl-py-4! gl-bg-transparent! gl-rounded-top-right-none gl-rounded-bottom-right-none gl-shadow-none!"
+              :class="{ 'gl-text-truncate': !prompt }"
+              :placeholder="$options.i18n.CHAT_PROMPT_PLACEHOLDER"
+              :disabled="isLoading"
+              autofocus
+              @keydown.enter.exact.native.prevent="sendChatPrompt"
+            />
+          </div>
+          <template #append>
+            <gl-button
+              icon="paper-airplane"
+              category="primary"
+              variant="confirm"
+              class="gl-absolute! gl-bottom-2 gl-right-2 gl-rounded-base!"
+              type="submit"
+              :aria-label="$options.i18n.CHAT_SUBMIT_LABEL"
+              :disabled="isLoading"
+            />
+          </template>
+        </gl-form-input-group>
+        <gl-form-text
+          class="gl-text-gray-400 gl-line-height-20 gl-mt-3"
+          data-testid="chat-legal-disclaimer"
+          >{{ $options.i18n.CHAT_LEGAL_DISCLAIMER }}</gl-form-text
+        >
+      </gl-form>
+    </footer>
+  </aside>
+</template>

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

@@ -65,6 +65,25 @@ export const MOCK_RESPONSE_MESSAGE_FOR_STREAMING = {
   timestamp: '2021-04-21T12:00:00.000Z',
 };
 
+export const generateMockResponseChunks = (requestId) => {
+  const chunks = [];
+  const chunkSize = 5;
+  const chunkCount = Math.ceil(MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content.length / chunkSize);
+  for (let i = 0; i < chunkCount; i += 1) {
+    const chunk = {
+      ...MOCK_RESPONSE_MESSAGE_FOR_STREAMING,
+      requestId,
+      content: MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content.substring(
+        i * chunkSize,
+        (i + 1) * chunkSize
+      ),
+      chunkId: i,
+    };
+    chunks.push(chunk);
+  }
+  return chunks;
+};
+
 export const MOCK_USER_PROMPT_MESSAGE = {
   id: '456',
   content: 'How to create a new template?',

package/src/index.js

@@ -99,6 +99,7 @@ export { default as GlCarouselSlide } from './components/base/carousel/carousel_
 // Experimental
 export { default as GlExperimentBadge } from './components/experimental/experiment_badge/experiment_badge.vue';
 export { default as GlDuoUserFeedback } from './components/experimental/duo/user_feedback/user_feedback.vue';
+export { default as GlDuoChat } from './components/experimental/duo/chat/duo_chat.vue';
 
 // Utilities
 export { default as GlAnimatedNumber } from './components/utilities/animated_number/animated_number.vue';

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/duo_chat';
 @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';

package/src/scss/utilities.scss

@@ -9305,6 +9305,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   z-index: 200 !important
 }
 
+.gl-z-index-999 {
+  z-index: 999
+}
+
+.gl-z-index-999\! {
+  z-index: 999 !important
+}
+
 .gl-z-index-9999 {
   z-index: 9999
 }

package/src/scss/utility-mixins/z-index.scss

@@ -24,6 +24,10 @@
   z-index: 200;
 }
 
+@mixin gl-z-index-999 {
+  z-index: 999;
+}
+
 @mixin gl-z-index-9999 {
   z-index: 9999;
 }