@gitlab/duo-ui 0.1.0

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

@@ -0,0 +1,327 @@
+<script>
+import {
+  GlIcon,
+  GlLoadingIcon,
+  GlFormGroup,
+  GlFormTextarea,
+  GlTooltipDirective,
+  GlSafeHtmlDirective as SafeHtml,
+} from '@gitlab/ui';
+
+import { sprintf, translate, translatePlural } from '@gitlab/ui/dist/utils/i18n';
+import GlDuoChatContextItemSelections from '../duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.vue';
+import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
+import { MESSAGE_MODEL_ROLES, SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED } from '../../constants';
+
+import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources.vue';
+// eslint-disable-next-line no-restricted-imports
+import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
+import { CopyCodeElement } from './copy_code_element';
+import { InsertCodeSnippetElement } from './insert_code_snippet_element';
+import { concatUntilEmpty } from './utils';
+
+export const i18n = {
+  MODAL: {
+    TITLE: translate('GlDuoChatMessage.modalTitle', 'Give feedback on GitLab Duo Chat'),
+    ALERT_TEXT: translate(
+      'GlDuoChatMessage.modalAlertText',
+      'GitLab team members cannot view your conversation. Please be as descriptive as possible.'
+    ),
+    DID_WHAT: translate('GlDuoChatMessage.modalDidWhat', 'What were you doing?'),
+    INTERACTION: translate(
+      'GlDuoChatMessage.modalInteraction',
+      'The situation in which you interacted with GitLab Duo Chat.'
+    ),
+    IMPROVE_WHAT: translate(
+      'GlDuoChatMessage.modalImproveWhat',
+      'How could the response be improved?'
+    ),
+    BETTER_RESPONSE: translate(
+      'GlDuoChatMessage.modalBetterResponse',
+      'How the response might better meet your needs.'
+    ),
+    MESSAGE_ERROR: translate('GlDuoChatMessage.modalMessageError', 'Error sending the message'),
+  },
+};
+
+export default {
+  name: 'GlDuoChatMessage',
+  i18n,
+  safeHtmlConfigExtension: {
+    ADD_TAGS: ['copy-code', 'insert-code-snippet'],
+  },
+  components: {
+    DocumentationSources,
+    GlDuoChatContextItemSelections,
+    GlDuoUserFeedback,
+    GlFormGroup,
+    GlFormTextarea,
+    GlIcon,
+    GlLoadingIcon,
+  },
+  directives: {
+    SafeHtml,
+    GlTooltip: GlTooltipDirective,
+  },
+  provide() {
+    return {
+      modalTitle: i18n.MODAL.TITLE,
+      modalAlertText: i18n.MODAL.ALERT_TEXT,
+    };
+  },
+  inject: {
+    // Note, we likely might move away from Provide/Inject for this
+    // and only ship the versions that are currently in the default
+    // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3953#note_1762834219
+    // for more context.
+    renderGFM: {
+      from: 'renderGFM',
+      default: () => (element) => {
+        element.classList.add('gl-markdown', 'gl-compact-markdown');
+      },
+    },
+    renderMarkdown: {
+      from: 'renderMarkdown',
+      default: () => renderDuoChatMarkdownPreview,
+    },
+  },
+  props: {
+    /**
+     * A message object
+     */
+    message: {
+      type: Object,
+      required: true,
+    },
+    isCancelled: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      didWhat: '',
+      improveWhat: '',
+      messageWatcher: null, // imperatively set up watcher on message
+      messageChunks: [],
+      selectedContextItemsDefaultCollapsed: SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED,
+    };
+  },
+  computed: {
+    isChunk() {
+      return typeof this.message.chunkId === 'number';
+    },
+    isNotChunkOrCancelled() {
+      return !this.isChunk || this.isCancelled;
+    },
+    isChunkAndNotCancelled() {
+      return this.isChunk && !this.isCancelled;
+    },
+    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;
+    },
+    hasFeedback() {
+      return this.message.extras?.hasFeedback;
+    },
+    defaultContent() {
+      if (this.message.contentHtml) {
+        return this.message.contentHtml;
+      }
+
+      return this.renderMarkdown(this.message.content);
+    },
+    messageContent() {
+      if (this.isAssistantMessage && this.isChunk) {
+        return this.renderMarkdown(concatUntilEmpty(this.messageChunks));
+      }
+
+      return this.defaultContent || this.renderMarkdown(concatUntilEmpty(this.message.chunks));
+    },
+    renderedError() {
+      return this.renderMarkdown(this.message.errors?.join('; ') || '');
+    },
+    error() {
+      return Boolean(this.message?.errors?.length) && this.message.errors.join('; ');
+    },
+    selectedContextItems() {
+      return this.message.extras?.contextItems || [];
+    },
+    displaySelectedContextItems() {
+      return Boolean(this.selectedContextItems.length);
+    },
+    selectedContextItemsTitle() {
+      if (!this.displaySelectedContextItems) return '';
+
+      const count = this.selectedContextItems.length;
+
+      if (this.isUserMessage) {
+        return translatePlural(
+          'GlDuoChatMessage.SelectedContextItemsTitleUserMessage',
+          'Included reference',
+          'Included references'
+        )(count);
+      }
+
+      return sprintf(
+        translatePlural(
+          'GlDuoChatMessage.SelectedContextItemsTitleAssistantMessage',
+          'Used %{count} included reference',
+          'Used %{count} included references'
+        )(count),
+        {
+          count,
+        }
+      );
+    },
+  },
+  beforeCreate() {
+    if (!customElements.get('copy-code')) {
+      customElements.define('copy-code', CopyCodeElement);
+    }
+    if (!customElements.get('insert-code-snippet')) {
+      customElements.define('insert-code-snippet', InsertCodeSnippetElement);
+    }
+  },
+  mounted() {
+    if (this.isAssistantMessage) {
+      // The watcher has to be created imperatively here
+      // to give an opportunity to remove it after
+      // the complete message has arrived
+      this.messageWatcher = this.$watch('message', this.manageMessageUpdate);
+    }
+    this.setChunks();
+    this.hydrateContentWithGFM();
+  },
+  updated() {
+    this.hydrateContentWithGFM();
+  },
+  methods: {
+    setChunks() {
+      if (this.isChunk) {
+        const { chunkId, content } = this.message;
+        this.$set(this.messageChunks, chunkId - 1, content);
+      } else {
+        this.messageChunks = [];
+      }
+    },
+    stopWatchingMessage() {
+      if (this.messageWatcher) {
+        this.messageWatcher(); // Stop watching the message prop
+        this.messageWatcher = null; // Ensure the watcher can't be stopped multiple times
+      }
+    },
+    hydrateContentWithGFM() {
+      if (!this.isChunk && this.$refs.content) {
+        this.$nextTick(this.renderGFM(this.$refs.content));
+      }
+    },
+    logEvent(e) {
+      this.$emit('track-feedback', {
+        ...e,
+        didWhat: this.didWhat,
+        improveWhat: this.improveWhat,
+        message: this.message,
+      });
+    },
+    manageMessageUpdate() {
+      this.setChunks();
+      if (!this.isChunk) {
+        this.stopWatchingMessage();
+      }
+    },
+    onInsertCodeSnippet(e) {
+      this.$emit('insert-code-snippet', e);
+    },
+    onGetContextItemContent(contextItem) {
+      this.$emit('get-context-item-content', {
+        messageId: this.message.id,
+        contextItem,
+      });
+    },
+  },
+};
+</script>
+<template>
+  <div
+    class="duo-chat-message gl-mb-4 gl-rounded-lg gl-p-4 gl-leading-20 gl-break-anywhere"
+    :class="{
+      'gl-ml-auto gl-rounded-br-none gl-bg-blue-100 gl-text-blue-900': isUserMessage,
+      'gl-rounded-bl-none gl-border-1 gl-border-solid gl-border-gray-50 gl-text-gray-900':
+        isAssistantMessage,
+      'gl-bg-white': isAssistantMessage && !error,
+      '!gl-border-none gl-bg-red-50': error,
+    }"
+    @insert-code-snippet="onInsertCodeSnippet"
+  >
+    <gl-icon
+      v-if="error"
+      :aria-label="$options.i18n.MESSAGE_ERROR"
+      name="status_warning_borderless"
+      :size="16"
+      class="error-icon gl-border gl-mr-3 gl-shrink-0 gl-rounded-full gl-border-red-500 gl-text-red-600"
+      data-testid="error"
+    />
+    <div ref="content-wrapper" :class="{ 'has-error': error }">
+      <gl-duo-chat-context-item-selections
+        v-if="displaySelectedContextItems && isAssistantMessage"
+        :selections="selectedContextItems"
+        :title="selectedContextItemsTitle"
+        :default-collapsed="selectedContextItemsDefaultCollapsed"
+        variant="assistant"
+        @get-content="onGetContextItemContent"
+      />
+      <div
+        v-if="error"
+        ref="error-message"
+        v-safe-html:[$options.safeHtmlConfigExtension]="renderedError"
+      ></div>
+      <div v-else>
+        <div ref="content" v-safe-html:[$options.safeHtmlConfigExtension]="messageContent"></div>
+
+        <template v-if="isAssistantMessage">
+          <documentation-sources v-if="sources" :sources="sources" />
+
+          <div class="duo-chat-message-feedback gl-mt-4 gl-flex gl-items-end">
+            <gl-loading-icon v-if="isChunkAndNotCancelled" class="gl-pt-4" variant="dots" inline />
+            <gl-duo-user-feedback
+              v-if="isNotChunkOrCancelled"
+              :feedback-received="hasFeedback"
+              :modal-title="$options.i18n.MODAL.TITLE"
+              :modal-alert="$options.i18n.MODAL.ALERT_TEXT"
+              @feedback="logEvent"
+            >
+              <template #feedback-extra-fields>
+                <gl-form-group :label="$options.i18n.MODAL.DID_WHAT" optional>
+                  <gl-form-textarea
+                    v-model="didWhat"
+                    :placeholder="$options.i18n.MODAL.INTERACTION"
+                  />
+                </gl-form-group>
+                <gl-form-group :label="$options.i18n.MODAL.IMPROVE_WHAT" optional>
+                  <gl-form-textarea
+                    v-model="improveWhat"
+                    :placeholder="$options.i18n.MODAL.BETTER_RESPONSE"
+                  />
+                </gl-form-group>
+              </template>
+            </gl-duo-user-feedback>
+          </div>
+        </template>
+      </div>
+      <gl-duo-chat-context-item-selections
+        v-if="displaySelectedContextItems && isUserMessage"
+        :selections="selectedContextItems"
+        :title="selectedContextItemsTitle"
+        :default-collapsed="selectedContextItemsDefaultCollapsed"
+        variant="user"
+        @get-content="onGetContextItemContent"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,42 @@
+import { createButton } from './buttons_utils';
+
+const CODE_MARKDOWN_CLASS = 'js-markdown-code';
+
+export class InsertCodeSnippetElement extends HTMLElement {
+  #actionButton;
+
+  #codeBlock;
+
+  constructor(codeBlock) {
+    super();
+    this.#actionButton = createButton();
+
+    // we handle two possible cases here:
+    // 1. we use constructor parameter if the element is created in Javscript and inserted in the document
+    // 2. we find the wrapping element containing code if the element is received from the server
+    this.#codeBlock = codeBlock ?? this.closest(`.${CODE_MARKDOWN_CLASS}`);
+  }
+
+  #handleClick = () => {
+    if (this.#codeBlock) {
+      this.#codeBlock.dispatchEvent(
+        new CustomEvent('insert-code-snippet', {
+          bubbles: true,
+          cancelable: true,
+          detail: {
+            code: this.#codeBlock.textContent.trim(),
+          },
+        })
+      );
+    }
+  };
+
+  connectedCallback() {
+    this.appendChild(this.#actionButton);
+    this.#actionButton.addEventListener('click', this.#handleClick);
+  }
+
+  disconnectedCallback() {
+    this.#actionButton.removeEventListener('click', this.#handleClick);
+  }
+}

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

@@ -0,0 +1,9 @@
+export const concatUntilEmpty = (arr) => {
+  if (!arr) return '';
+
+  let end = arr.findIndex((el) => !el);
+
+  if (end < 0) end = arr.length;
+
+  return arr.slice(0, end).join('');
+};

package/src/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.md

@@ -0,0 +1 @@
+A simple component to list documentation sources for a documentation-related AI response messages.

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

@@ -0,0 +1,81 @@
+<script>
+import { translatePlural } from '@gitlab/ui/dist/utils/i18n';
+import { GlIcon, GlLink } from '@gitlab/ui';
+import { DOCUMENTATION_SOURCE_TYPES } from '../../constants';
+
+export const i18n = {
+  MESSAGE_SOURCE: (count = 1) =>
+    translatePlural('GlDuoChatMessageSources.messageSources', 'Source', 'Sources')(count),
+};
+
+export default {
+  name: 'GlDuoChatMessageSources',
+  components: {
+    GlIcon,
+    GlLink,
+  },
+  props: {
+    /**
+     * The Array of the message sources.
+     */
+    sources: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    sourceLabel() {
+      return i18n.MESSAGE_SOURCE(this.sources.length);
+    },
+  },
+  methods: {
+    getSourceIcon(sourceType) {
+      const currentSourceType = Object.values(DOCUMENTATION_SOURCE_TYPES).find(
+        ({ value }) => value === sourceType
+      );
+
+      return currentSourceType?.icon || 'document';
+    },
+    getSourceTitle({ title, source_type: sourceType, stage, group, date, author }) {
+      if (title) {
+        return title;
+      }
+
+      if (sourceType === DOCUMENTATION_SOURCE_TYPES.DOC.value) {
+        if (stage && group) {
+          return `${stage} / ${group}`;
+        }
+      }
+
+      if (sourceType === DOCUMENTATION_SOURCE_TYPES.BLOG.value) {
+        if (date && author) {
+          return `${date} / ${author}`;
+        }
+      }
+
+      return this.sourceLabel;
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-mr-3 gl-mt-4 gl-text-gray-600" data-testid="duo-chat-message-sources">
+    <span v-if="sources.length">{{ sourceLabel }}:</span>
+
+    <ul class="gl-m-0 gl-list-none gl-p-0">
+      <li
+        v-for="(source, index) in sources"
+        :key="index"
+        class="gl-flex gl-items-center gl-pt-3"
+        data-testid="source-list-item"
+      >
+        <gl-icon
+          v-if="source.source_type"
+          :name="getSourceIcon(source.source_type)"
+          class="gl-mr-2 gl-shrink-0"
+        />
+        <gl-link :href="source.source_url">{{ getSourceTitle(source) }}</gl-link>
+      </li>
+    </ul>
+  </div>
+</template>

package/src/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.md

@@ -0,0 +1 @@
+The component is a simple list of strings representing possible prompts to AI.

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

@@ -0,0 +1,36 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+
+export default {
+  name: 'GlDuoChatPredefinedPrompts',
+  components: {
+    GlButton,
+  },
+  props: {
+    /**
+     * Array of predefined prompts to display. Every prompt should be a string which will be converted into a prompt when clicked.
+     */
+    prompts: {
+      type: Array,
+      required: true,
+    },
+  },
+  methods: {
+    handleClick(prompt) {
+      /**
+       * Emits the prompt string that was clicked.
+       */
+      this.$emit('click', prompt);
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-text-right">
+    <div v-for="(prompt, index) in prompts" :key="`question-${index}`" class="gl-mt-3">
+      <gl-button category="secondary" variant="confirm" @click="handleClick(prompt)"
+        ><span class="gl-whitespace-normal">{{ prompt }}</span></gl-button
+      >
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,32 @@
+export const CHAT_RESET_MESSAGE = '/reset';
+export const CHAT_CLEAR_MESSAGE = '/clear';
+export const CHAT_INCLUDE_MESSAGE = '/include';
+
+export const LOADING_TRANSITION_DURATION = 7500;
+
+export const DOCUMENTATION_SOURCE_TYPES = {
+  HANDBOOK: {
+    value: 'handbook',
+    icon: 'book',
+  },
+  DOC: {
+    value: 'doc',
+    icon: 'documents',
+  },
+  BLOG: {
+    value: 'blog',
+    icon: 'list-bulleted',
+  },
+};
+
+export const MESSAGE_MODEL_ROLES = {
+  user: 'user',
+  system: 'system',
+  assistant: 'assistant',
+};
+
+export const SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED = true;
+
+// TODO this should be a shared util in GitLab UI
+export const badgeTypes = ['experiment', 'beta', null];
+export const badgeTypeValidator = (value) => badgeTypes.includes(value);