@gitlab/duo-ui 0.1.0

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

@@ -0,0 +1,20 @@
+// eslint-disable-next-line no-restricted-imports
+import { Marked } from 'marked';
+import markedBidi from 'marked-bidi';
+
+const duoMarked = new Marked([
+  {
+    async: false,
+    breaks: false,
+    gfm: false,
+  },
+  markedBidi(),
+]);
+
+export function renderDuoChatMarkdownPreview(md) {
+  try {
+    return md ? duoMarked.parse(md.toString()) : '';
+  } catch {
+    return md;
+  }
+}

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

@@ -0,0 +1,178 @@
+import { setStoryTimeout } from '../../../../utils/test_utils';
+import {
+  DOCUMENTATION_SOURCE_TYPES,
+  MESSAGE_MODEL_ROLES,
+  CHAT_CLEAR_MESSAGE,
+  CHAT_RESET_MESSAGE,
+  CHAT_INCLUDE_MESSAGE,
+} from './constants';
+import { getMockContextItems } from './components/duo_chat_context/mock_context_data';
+
+const MOCK_SOURCES = [
+  {
+    title: 'GitLab Handbook',
+    source_type: DOCUMENTATION_SOURCE_TYPES.HANDBOOK.value,
+    source_url: '/handbook/',
+  },
+  {
+    stage: 'Mock Stage',
+    group: 'Mock Group',
+    source_type: DOCUMENTATION_SOURCE_TYPES.DOC.value,
+    source_url: '/company/team/',
+  },
+  {
+    date: '2023-04-21',
+    author: 'Test User',
+    source_type: DOCUMENTATION_SOURCE_TYPES.BLOG.value,
+    source_url: '/blog/',
+  },
+];
+
+export const MOCK_RESPONSE_MESSAGE = {
+  id: '123',
+  content:
+    'Here is a simple JavaScript function to sum two numbers:\n\n  ```js\n  function sum(a, b) {\n    return a + b;\n  }\n  ```\n  \n  To use it:\n  \n  ```js\n  const result = sum(5, 3); // result = 8\n  ```\n  \n  This function takes two number parameters, a and b. It returns the sum of adding them together.\n',
+  contentHtml:
+    '<p data-sourcepos="1:1-1:56" dir="auto">Here is a simple JavaScript function to sum two numbers:</p>\n<div class="gl-relative markdown-code-block js-markdown-code">\n<pre data-sourcepos="3:1-7:3" data-canonical-lang="js" class="code highlight js-syntax-highlight language-javascript" lang="javascript" v-pre="true"><code><span id="LC1" class="line" lang="javascript"><span class="kd">function</span> <span class="nf">sum</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span></span>\n<span id="LC2" class="line" lang="javascript">  <span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span></span>\n<span id="LC3" class="line" lang="javascript"><span class="p">}</span></span></code></pre>\n<copy-code></copy-code>\n<insert-code-snippet></insert-code-snippet>\n</div>\n<p data-sourcepos="9:1-9:10" dir="auto">To use it:</p>\n<div class="gl-relative markdown-code-block js-markdown-code">\n<pre data-sourcepos="11:1-13:3" data-canonical-lang="js" class="code highlight js-syntax-highlight language-javascript" lang="javascript" v-pre="true"><code><span id="LC1" class="line" lang="javascript"><span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nf">sum</span><span class="p">(</span><span class="mi">5</span><span class="p">,</span> <span class="mi">3</span><span class="p">);</span> <span class="c1">// result = 8</span></span></code></pre>\n<copy-code></copy-code>\n</div>\n<p data-sourcepos="15:1-15:95" dir="auto">This function takes two number parameters, a and b. It returns the sum of adding them together.</p>',
+  role: MESSAGE_MODEL_ROLES.assistant,
+  extras: {
+    sources: MOCK_SOURCES,
+    contextItems: getMockContextItems().slice(0, 2),
+  },
+  requestId: '987',
+  errors: [],
+  timestamp: '2021-04-21T12:00:00.000Z',
+};
+
+export const generateSeparateChunks = (n) => {
+  const res = [];
+  for (let i = 1; i <= n; i += 1) {
+    res.push({
+      chunkId: i,
+      content: `chunk #${i}`,
+      role: MESSAGE_MODEL_ROLES.assistant,
+      requestId: '987',
+      errors: [],
+      timestamp: '2021-04-21T12:00:00.000Z',
+    });
+  }
+  return res;
+};
+
+export const MOCK_RESPONSE_MESSAGE_FOR_STREAMING = {
+  id: '123',
+  content: `To change your password in GitLab:
+
+  1. Log in to your GitLab account.
+  2. Select your avatar in the top right corner and choose Edit profile.
+  3. On the left sidebar, select Password.
+  4. Enter your current password in the Current password field.
+  5. Enter your new password in the New password and Password confirmation fields.
+  6. Select Save password.
+  7. 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.
+
+  ~~~yaml
+  # And here is a
+  # code block
+  everyone:
+    likes:
+      yaml: true
+  ~~~
+  which is rendered while streaming.
+  `,
+  role: 'assistant',
+  extras: {
+    contextItems: getMockContextItems().slice(0, 2),
+  },
+  requestId: '987',
+  errors: [],
+  timestamp: '2021-04-21T12:00:00.000Z',
+};
+
+// Utility function for delay
+async function delayRandom(min = 16, max = 267) {
+  const delay = Math.floor(Math.random() * (max - min + 1)) + min;
+  // eslint-disable-next-line no-promise-executor-return
+  return new Promise((resolve) => setStoryTimeout(resolve, delay));
+}
+
+export async function* generateMockResponseChunks(requestId = 1) {
+  const chunkSize = 5;
+  const contentLength = MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content.length;
+  const chunkCount = Math.ceil(contentLength / chunkSize);
+
+  for (let chunkId = 0; chunkId < chunkCount; chunkId += 1) {
+    const start = chunkId * chunkSize;
+    const end = Math.min((chunkId + 1) * chunkSize, contentLength);
+    const chunk = {
+      ...MOCK_RESPONSE_MESSAGE_FOR_STREAMING,
+      requestId,
+      content: MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content.substring(start, end),
+      chunkId: chunkId + 1,
+    };
+
+    // eslint-disable-next-line no-await-in-loop
+    await delayRandom();
+    yield chunk;
+  }
+  yield {
+    ...MOCK_RESPONSE_MESSAGE_FOR_STREAMING,
+    requestId,
+    content: MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content,
+    chunkId: null,
+  };
+}
+
+export const MOCK_USER_PROMPT_MESSAGE = {
+  id: '456',
+  chunkId: null,
+  content: 'How to create a new template?',
+  contentHtml: '<p>How to create a new template?</p>',
+  role: MESSAGE_MODEL_ROLES.user,
+  requestId: '987',
+  errors: [],
+  timestamp: '2021-04-21T12:00:00.000Z',
+  extras: {
+    contextItems: getMockContextItems().slice(0, 2),
+  },
+};
+
+export const renderMarkdown = (content) => content;
+export const renderGFM = (el) => {
+  const codeBlock = el.querySelectorAll('.markdown-code-block');
+  codeBlock.forEach((block) => {
+    block?.classList.add('gl-markdown', 'gl-compact-markdown');
+  });
+};
+
+export const SLASH_COMMANDS = [
+  {
+    name: CHAT_RESET_MESSAGE,
+    shouldSubmit: true,
+    description: 'Reset conversation, ignore the previous messages.',
+  },
+  {
+    name: CHAT_CLEAR_MESSAGE,
+    shouldSubmit: true,
+    description: 'Delete all messages in this conversation.',
+  },
+  {
+    name: '/tests',
+    description: 'Write tests for the selected snippet.',
+  },
+  {
+    name: '/refactor',
+    description: 'Refactor the selected snippet.',
+  },
+  {
+    name: '/explain',
+    description: 'Explain the selected snippet.',
+  },
+];
+
+export const INCLUDE_SLASH_COMMAND = {
+  name: CHAT_INCLUDE_MESSAGE,
+  description: 'Include additional context in the conversation.',
+};

package/src/components/experimental/duo/user_feedback/user_feedback.md

@@ -0,0 +1,81 @@
+The main entry point component for gathering the user feedback for AI features.
+
+The component consists of a textual button and a connected modal with the actual form, emitting
+the form data on submission.
+
+## Custom button text
+
+The component allows to customize the button text presented to the user.
+
+```html
+<gl-duo-user-feedback feedback-link-text="Leave your custom feedback" />
+```
+
+## Linking to a separate feedback form
+
+The main goal of this component is to provide an advanced feedback form. However, it might only
+be necessary for some consumers. In such a case, the component bypasses the default
+form and links to an external feedback page/form.
+
+```html
+<gl-duo-user-feedback feedback-link-url="https://gitlab.com" />
+```
+
+## Listening to the feedback form submission
+
+This component emits the `feedback` event with all the options selected in the feedback form.
+
+```html
+<gl-duo-user-feedback @feedback="myEventTracker" />
+```
+
+The returned event contains two props (`feedbackChoices` and `extendedTextFeedback`) from
+the underlying `FeedbackModal` component. Here's an example of a possible event:
+
+```json
+{
+  "feedbackChoices": ["unhelpful", "long"],
+  "extendedTextFeedback": "The answer was too long to understand"
+}
+```
+
+## Using the `feedback-extra-fields` slot
+
+By default, the component renders one extra textarea field to gather additional feedback
+information from users. However, it may not be enough sometimes, and different use cases of
+this component might need to fine-tune the form to gather information most suitable for that
+or another use case. For this purpose, the component provides the `feedback-extra-fields`
+slot, which can override the default textarea with different fields/information.
+
+Note, however, that the content put into this slot will override the default textarea. So,
+if you want to append additional fields, instead of completely overriding the default textarea,
+you must copy the textarea field from the `DuoChatFeedbackModal` component into the slot.
+
+```html
+<gl-duo-user-feedback
+  :feedback-link-text="feedbackLinkText"
+  :feedback-link-url="feedbackLinkUrl"
+  @feedback="logEvent"
+>
+  <template #feedback-extra-fields>
+    <gl-form-group label="What were you doing?" optional>
+      <gl-form-textarea
+        placeholder="The situation in which you interacted with GitLab Duo Chat."
+        v-model="didWhat"
+      />
+    </gl-form-group>
+    <gl-form-group label="What were you expecting from the response?" optional>
+      <gl-form-textarea
+        placeholder="What kind of information or assistance were you hoping to receive?"
+        v-model="expectedWhat"
+      />
+    </gl-form-group>
+    <gl-form-group label="How could the response be improved?" optional>
+      <gl-form-textarea
+        placeholder="How the response might better meet your needs."
+        v-model="improveWhat"
+      />
+    </gl-form-group>
+  </template>
+</gl-duo-user-feedback>
+```

package/src/components/experimental/duo/user_feedback/user_feedback.vue

@@ -0,0 +1,85 @@
+<script>
+import { GlAlert, GlButton } from '@gitlab/ui';
+import FeedbackModal from './user_feedback_modal.vue';
+
+export const i18n = {
+  FEEDBACK_LINK_TEXT: 'Give feedback to improve this answer.',
+  FEEDBACK_THANKS: 'Thank you for your feedback.',
+};
+
+export default {
+  name: 'GlDuoUserFeedback',
+  components: {
+    GlAlert,
+    GlButton,
+    FeedbackModal,
+  },
+  props: {
+    /**
+     * Whether the message already has gotten feedback
+     */
+    feedbackReceived: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * The text to be displayed as the feedback link/button.
+     */
+    feedbackLinkText: {
+      type: String,
+      required: false,
+      default: i18n.FEEDBACK_LINK_TEXT,
+    },
+    /**
+     * The URL of a page to provide more explanations on the experiment. If provided, clicking
+     * the feedback link will open a new tab with the URL instead of showing the feedback modal.
+     */
+    feedbackLinkUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    shouldRenderModal() {
+      return !this.feedbackReceived && !this.feedbackLinkUrl;
+    },
+  },
+  methods: {
+    notify(event) {
+      /**
+       * Notify listeners about the feedback form submission.
+       * @param {*} event An event, containing the feedback choices and the extended feedback text.
+       */
+      this.$emit('feedback', event);
+    },
+  },
+  i18n,
+};
+</script>
+
+<template>
+  <div class="gl-w-full gl-pt-4">
+    <div>
+      <gl-button
+        v-if="!feedbackReceived"
+        variant="link"
+        target="_blank"
+        :href="feedbackLinkUrl"
+        button-text-classes="!gl-whitespace-normal gl-text-left"
+        @click="shouldRenderModal && $refs.feedbackModal.show()"
+        >{{ feedbackLinkText }}</gl-button
+      >
+      <gl-alert v-else variant="success" :dismissible="false">
+        {{ $options.i18n.FEEDBACK_THANKS }}
+      </gl-alert>
+    </div>
+    <feedback-modal v-if="shouldRenderModal" ref="feedbackModal" @feedback-submitted="notify">
+      <template #feedback-extra-fields>
+        <!-- @slot The addition Feedback form fields. -->
+        <slot name="feedback-extra-fields"></slot>
+      </template>
+    </feedback-modal>
+  </div>
+</template>

package/src/components/experimental/duo/user_feedback/user_feedback_modal.vue

@@ -0,0 +1,157 @@
+<script>
+import { GlModal, GlAlert, GlFormGroup, GlFormTextarea, GlFormCheckboxGroup } from '@gitlab/ui';
+
+export const i18n = {
+  MODAL: {
+    TITLE: 'Give feedback on GitLab Duo',
+    DESCRIPTION: 'To help improve GitLab Duo, send your feeback to GitLab team members.',
+    ALERT: 'GitLab team members cannot see the AI content. Please be as descriptive as possible.',
+    OPTIONS_LABEL: 'How could the AI content be improved?',
+    SITUATION_DESCRIPTION_LABEL: 'What were you doing?',
+    SITUATION_DESCRIPTION_PLACEHOLDER:
+      'The situation in which you interacted with GitLab Duo Chat.',
+    IMPROVEMENT_SUGGESTION_LABEL: 'How could the response be improved?',
+    IMPROVEMENT_SUGGESTION_PLACEHOLDER: 'How the response might better meet your needs.',
+    MORE_LABEL: 'More information',
+    MORE_PLACEHOLDER: 'How could the content be improved?',
+    REQUIRED_VALIDATION_ERROR: 'Select at least one option.',
+    FEEDBACK_OPTIONS: {
+      helpful: 'Helpful',
+      unhelpful: 'Unhelpful or irrelevant',
+      incorrect: 'Factually incorrect',
+      long: 'Too long',
+      abuse: 'Abusive or offensive',
+      other: 'Something else',
+    },
+    ACTIONS: {
+      submit: 'Submit',
+      cancel: 'Cancel',
+    },
+  },
+};
+
+export const feedbackOptions = [
+  {
+    text: i18n.MODAL.FEEDBACK_OPTIONS.helpful,
+    value: 'helpful',
+  },
+  {
+    text: i18n.MODAL.FEEDBACK_OPTIONS.unhelpful,
+    value: 'unhelpful',
+  },
+  {
+    text: i18n.MODAL.FEEDBACK_OPTIONS.incorrect,
+    value: 'incorrect',
+  },
+  {
+    text: i18n.MODAL.FEEDBACK_OPTIONS.long,
+    value: 'long',
+  },
+  {
+    text: i18n.MODAL.FEEDBACK_OPTIONS.abuse,
+    value: 'abuse',
+  },
+  {
+    text: i18n.MODAL.FEEDBACK_OPTIONS.other,
+    value: 'other',
+  },
+];
+
+export default {
+  name: 'DuoChatFeedbackModal',
+  components: {
+    GlModal,
+    GlAlert,
+    GlFormCheckboxGroup,
+    GlFormGroup,
+    GlFormTextarea,
+  },
+  inject: {
+    modalTitle: {
+      default: i18n.MODAL.TITLE,
+    },
+    modalAlert: {
+      default: i18n.MODAL.ALERT,
+    },
+  },
+  data() {
+    return {
+      selectedFeedbackOptions: [],
+      extendedFeedback: '',
+      isValid: null,
+    };
+  },
+  watch: {
+    selectedFeedbackOptions(options) {
+      this.isValid = options.length > 0;
+    },
+  },
+  methods: {
+    close() {
+      this.$refs.feedbackModal.hide();
+    },
+    show() {
+      this.$refs.feedbackModal.show();
+    },
+    onFeedbackSubmit(e) {
+      if (this.selectedFeedbackOptions.length) {
+        this.$emit('feedback-submitted', {
+          feedbackChoices: this.selectedFeedbackOptions,
+          extendedTextFeedback: this.extendedFeedback,
+        });
+        this.close();
+        this.isValid = null;
+      } else {
+        e?.preventDefault();
+        this.isValid = false;
+      }
+    },
+  },
+  actions: {
+    primary: {
+      text: i18n.MODAL.ACTIONS.submit,
+    },
+    cancel: {
+      text: i18n.MODAL.ACTIONS.cancel,
+    },
+  },
+  feedbackOptions,
+  i18n,
+};
+</script>
+<template>
+  <gl-modal
+    ref="feedbackModal"
+    modal-id="feedbackModal"
+    :title="modalTitle"
+    :action-primary="$options.actions.primary"
+    :action-cancel="$options.actions.cancel"
+    :visible="false"
+    size="sm"
+    @primary="onFeedbackSubmit"
+    @canceled="close"
+  >
+    <p>{{ $options.i18n.MODAL.DESCRIPTION }}</p>
+    <gl-form-group
+      :invalid-feedback="$options.i18n.MODAL.REQUIRED_VALIDATION_ERROR"
+      :state="isValid"
+      :label="$options.i18n.MODAL.OPTIONS_LABEL"
+      data-testid="feedback-options"
+    >
+      <gl-form-checkbox-group
+        v-model="selectedFeedbackOptions"
+        :options="$options.feedbackOptions"
+      />
+    </gl-form-group>
+    <gl-alert class="gl-mb-5" :dismissible="false">{{ modalAlert }}</gl-alert>
+    <!-- @slot The addition Feedback form fields. -->
+    <slot name="feedback-extra-fields">
+      <gl-form-group :label="$options.i18n.MODAL.MORE_LABEL" optional>
+        <gl-form-textarea
+          v-model="extendedFeedback"
+          :placeholder="$options.i18n.MODAL.MORE_PLACEHOLDER"
+        />
+      </gl-form-group>
+    </slot>
+  </gl-modal>
+</template>

package/src/components/experimental/duo/workflow/components/duo_workflow_panel/duo_workflow_panel.md

@@ -0,0 +1,33 @@
+This is the main UI panel used in the larger Duo Workflow Plan UI for the IDE
+and WebUI.
+
+## Usage
+
+To use this component, import it and fill out the available slots:
+
+- `title`: the main title for the panel
+- `subtitle`: the small text adjacent to the title
+- `content`: the content of the panel, hidden away when the collapse is toggled
+
+Also provide an icon via the `headerIcon` prop. This icon is displayed adjacent
+to the title.
+
+You can pass `expanded` prop set to `false` if you need a section to be
+collapsed by default. You can also listen to `toggle-panel` event to know
+when the expanded state changed.
+
+Translations for the title of the single button can be provided either via the
+props `expandButtonTitle` and `collapseTitleButton` or via the translation
+configuration:
+
+```js
+setConfigs({
+  translations: {
+    'GlDuoWorkflowPanel.expandButtonTitle': __('Expand Panel'),
+    'GlDuoWorkflowPanel.collapseButtonTitle': __('Collapse Panel'),
+  },
+});
+```
+
+These translations are tied to the action of the button, not its state, so
+ensure they are set properly!

package/src/components/experimental/duo/workflow/components/duo_workflow_panel/duo_workflow_panel.vue

@@ -0,0 +1,84 @@
+<script>
+import { GlIcon, GlCollapse, GlButton, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
+import { translate } from '@gitlab/ui/dist/utils/i18n';
+
+export default {
+  name: 'GlDuoWorkflowPanel',
+  components: { GlCollapse, GlButton, GlIcon },
+  directives: { GlTooltip },
+  props: {
+    /**
+     * The icon to show in the header.
+     */
+    headerIcon: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * The text used as the title and aria-label for the button when the collapse is collapsed
+     */
+    expandPanelButtonTitle: {
+      type: String,
+      required: false,
+      default: translate('GlDuoWorkflowPanel.expandButtonTitle', 'Expand'),
+    },
+    /**
+     * The text used as the title and aria-label for the button when the collapse is expanded
+     */
+    collapsePanelButtonTitle: {
+      type: String,
+      required: false,
+      default: translate('GlDuoWorkflowPanel.collapseButtonTitle', 'Collapse'),
+    },
+    /**
+     * Whether the panel is expanded or not
+     */
+    expanded: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  computed: {
+    buttonIcon() {
+      return this.expanded ? 'chevron-up' : 'chevron-down';
+    },
+    buttonTitle() {
+      return this.expanded ? this.collapsePanelButtonTitle : this.expandPanelButtonTitle;
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <div class="gl-flex gl-flex-nowrap gl-items-center">
+      <gl-icon v-if="headerIcon" :name="headerIcon" :size="24" class="gl-mr-3" />
+      <div class="gl-flex gl-flex-grow gl-items-baseline">
+        <h2 class="gl-mb-0">
+          <!-- @slot Panel title. -->
+          <slot name="title"></slot>
+        </h2>
+        <small class="gl-ml-3">
+          <!-- @slot Panel subtitle. -->
+          <slot name="subtitle"></slot
+        ></small>
+      </div>
+
+      <gl-button
+        v-gl-tooltip
+        category="tertiary"
+        :icon="buttonIcon"
+        :title="buttonTitle"
+        :aria-label="buttonTitle"
+        @click="$emit('toggle-panel')"
+      />
+    </div>
+    <gl-collapse :visible="expanded">
+      <div class="gl-ml-7 gl-mt-4 gl-flex-grow">
+        <!-- @slot Panel content. -->
+        <slot name="content"></slot>
+      </div>
+    </gl-collapse>
+  </div>
+</template>

package/src/components/experimental/duo/workflow/components/duo_workflow_prompt/duo_workflow_prompt.md

@@ -0,0 +1,37 @@
+This is the UI panel to capture the user's AI prompt for Duo Workflow. This
+prompt is emitted upwards so it may be sent to the Duo Workflow service.
+
+## Usage
+
+To use this component, import it and be sure to set the following props:
+
+* `prompt`: the prompt the user enters, can be provided if the prompt has been
+  cached
+* `summary`: the summary of the goal as provided by the Duo Workflow service,
+displayed adjacent to the title
+* `loading`: sets the loading state for the panel while waiting on responses
+
+Also listen to the following events:
+
+* `update:prompt`: Emitted when the prompt textarea's `input` event fires, when
+  the text within the textarea is changed
+* `update:image`: Emitted when the image input's `input` event fires, when the
+    text within the input is changed
+* `confirm`: Emitted when the confirm button is clicked
+* `cancel`: Emitted when the cancel button is clicked
+
+Translations for the title of the panel, labels, and other strings can be set via
+the props as documented or via translation configuration:
+
+```js
+setConfigs({
+  translations: {
+    'GlDuoWorkflowPrompt.header': __('Plan'),
+    'GlDuoWorkflowPrompt.promptLabel': __('Prompt'),
+    'GlDuoWorkflowPrompt.promptLabelDescription': __('What is your task?'),
+    'GlDuoWorkflowPrompt.promptDescription': __('Be specific and include references!'),
+    'GlDuoWorkflowPrompt.confirmButtonText': __('Start plan'),
+    'GlDuoWorkflowPrompt.cancelButtonText': __('Stop'),
+  },
+});
+```