@gitlab/ui 66.25.1 → 66.27.0

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';