@gitlab/ui 66.32.0 → 66.33.0

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/fonts.scss

@@ -13,18 +13,34 @@ Usage:
    */
   font-display: block;
   font-style: normal;
-  font-named-instance: 'Regular'; /* stylelint-disable property-no-unknown */
+  /* stylelint-disable-next-line property-no-unknown */
+  font-named-instance: 'Regular';
   src: url('../../static/fonts/GitLabSans.woff2') format('woff2');
 }
 
+@font-face {
+  font-family: 'GitLab Sans';
+  font-weight: 100 900;
+  /**
+   * Applications should use a less aggressive font-display value than this.
+   * This is done to make sure Storybook Previews load the font.
+   */
+  font-display: block;
+  font-style: italic;
+  /* stylelint-disable-next-line property-no-unknown */
+  font-named-instance: 'Regular';
+  src: url('../../static/fonts/GitLabSans-Italic.woff2') format('woff2');
+}
+
 /* -------------------------------------------------------
 Monospaced font: GitLab Mono.
 
 Usage:
-  html { font-family: 'GitLab Mono', sans-serif; }
+  html { font-family: 'GitLab Mono', monospace; }
 */
 @font-face {
   font-family: 'GitLab Mono';
+  font-weight: 100 900;
   /**
    * Applications should use a less aggressive font-display value than this.
    * This is done to make sure Storybook Previews load the font.
@@ -33,3 +49,19 @@ Usage:
   font-style: normal;
   src: url('../../static/fonts/GitLabMono.woff2') format('woff2');
 }
+
+@font-face {
+  font-family: 'GitLab Mono';
+  font-weight: 100 900;
+  /**
+   * Applications should use a less aggressive font-display value than this.
+   * This is done to make sure Storybook Previews load the font.
+   */
+  font-display: block;
+  font-style: italic;
+  src: url('../../static/fonts/GitLabMono-Italic.woff2') format('woff2');
+}
+
+* {
+  font-synthesis: none;
+}

package/src/scss/storybook.scss

@@ -15,6 +15,7 @@
 
 @import 'components';
 
+@import '../../dist/tokens/css/tokens';
 @import 'storybook_dark_mode';
 
 /**

package/src/scss/storybook_dark_mode.scss

@@ -1,4 +1,5 @@
 @import 'variables';
+@import '../../dist/tokens/css/tokens.dark';
 
 // conditional overrides for dark mode for use in storybook.
 // Because we only use application.css from gitlab (and not
@@ -15,7 +16,6 @@
   // Note that we are assigning variables with different values due to the way GitLab inverts variables in dark mode.
   // e.g. text color is usually $gray-900, but in dark mode $gray-900 variable gets inverted to $gray-50
   --gl-text-color: #{$gray-50};
-  --gray-600: #{$gray-300};
 
   color-scheme: dark;