@gitlab/ui 68.2.1 → 68.3.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Nov 2023 15:49:52 GMT
+ * Generated on Fri, 10 Nov 2023 17:20:59 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Nov 2023 15:49:52 GMT
+ * Generated on Fri, 10 Nov 2023 17:20:59 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Nov 2023 15:49:52 GMT
+ * Generated on Fri, 10 Nov 2023 17:20:59 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Nov 2023 15:49:52 GMT
+ * Generated on Fri, 10 Nov 2023 17:20:59 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 10 Nov 2023 15:49:52 GMT
+// Generated on Fri, 10 Nov 2023 17:20:59 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 10 Nov 2023 15:49:52 GMT
+// Generated on Fri, 10 Nov 2023 17:20:59 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "68.2.1",
+  "version": "68.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -55,3 +55,22 @@
     @include gl-py-4;
   }
 }
+
+.slash-commands {
+  @include gl-mt-n2;
+
+  .active-command{
+    @include gl-bg-gray-50;
+    @include gl-rounded-base;
+  }
+
+  .gl-dropdown-item button.dropdown-item {
+    @include gl-font-sm;
+    @include gl-px-3;
+    @include gl-bg-none;
+
+    &:hover {
+      @include gl-bg-none;
+    }
+  }
+}

package/src/components/experimental/duo/chat/duo_chat.spec.js

@@ -2,13 +2,23 @@ import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import GlEmptyState from '../../../regions/empty_state/empty_state.vue';
 import GlExperimentBadge from '../../experiment_badge/experiment_badge.vue';
+import GlCard from '../../../base/card/card.vue';
+import GlDropdownItem from '../../../base/dropdown/dropdown_item.vue';
 import DuoChatLoader from './components/duo_chat_loader/duo_chat_loader.vue';
 import DuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue';
 import DuoChatConversation from './components/duo_chat_conversation/duo_chat_conversation.vue';
-import GlDuoChat from './duo_chat.vue';
+import GlDuoChat, { slashCommands } from './duo_chat.vue';
 
 import { MESSAGE_MODEL_ROLES, CHAT_RESET_MESSAGE } from './constants';
 
+const generatePartialSlashCommands = () => {
+  const res = [];
+  slashCommands.forEach((command) => {
+    res.push(command.name.slice(0, command.name.length - 1));
+  });
+  return res;
+};
+
 describe('GlDuoChat', () => {
   let wrapper;
 
@@ -43,6 +53,9 @@ describe('GlDuoChat', () => {
   const findChatInput = () => wrapper.find('[data-testid="chat-prompt-input"]');
   const findCloseChatButton = () => wrapper.find('[data-testid="chat-close-button"]');
   const findLegalDisclaimer = () => wrapper.find('[data-testid="chat-legal-disclaimer"]');
+  const findSlashCommandsCard = () => wrapper.findComponent(GlCard);
+  const findSlashCommands = () => wrapper.findAllComponents(GlDropdownItem);
+  const findSelectedSlashCommand = () => wrapper.find('.active-command');
 
   beforeEach(() => {
     createComponent();
@@ -207,13 +220,13 @@ describe('GlDuoChat', () => {
       const ENTER = 'Enter';
 
       it.each`
-        trigger                                                                            | event                         | action          | expectEmitted
-        ${() => clickSubmit()}                                                             | ${'Submit button click'}      | ${'submit'}     | ${[[promptStr]]}
-        ${() => findChatInput().trigger('keydown.enter', { code: ENTER })}                 | ${`Clicking ${ENTER}`}        | ${'submit'}     | ${[[promptStr]]}
-        ${() => findChatInput().trigger('keydown.enter', { code: ENTER, metaKey: true })}  | ${`Clicking ${ENTER} + ⌘`}    | ${'not submit'} | ${undefined}
-        ${() => findChatInput().trigger('keydown.enter', { code: ENTER, altKey: true })}   | ${`Clicking ${ENTER} + ⎇`}    | ${'not submit'} | ${undefined}
-        ${() => findChatInput().trigger('keydown.enter', { code: ENTER, shiftKey: true })} | ${`Clicking ${ENTER} + ⬆︎`}   | ${'not submit'} | ${undefined}
-        ${() => findChatInput().trigger('keydown.enter', { code: ENTER, ctrlKey: true })}  | ${`Clicking ${ENTER} + CTRL`} | ${'not submit'} | ${undefined}
+        trigger                                                                   | event                         | action          | expectEmitted
+        ${() => clickSubmit()}                                                    | ${'Submit button click'}      | ${'submit'}     | ${[[promptStr]]}
+        ${() => findChatInput().trigger('keyup', { key: ENTER })}                 | ${`Clicking ${ENTER}`}        | ${'submit'}     | ${[[promptStr]]}
+        ${() => findChatInput().trigger('keyup', { key: ENTER, metaKey: true })}  | ${`Clicking ${ENTER} + ⌘`}    | ${'not submit'} | ${undefined}
+        ${() => findChatInput().trigger('keyup', { key: ENTER, altKey: true })}   | ${`Clicking ${ENTER} + ⎇`}    | ${'not submit'} | ${undefined}
+        ${() => findChatInput().trigger('keyup', { key: ENTER, shiftKey: true })} | ${`Clicking ${ENTER} + ⬆︎`}   | ${'not submit'} | ${undefined}
+        ${() => findChatInput().trigger('keyup', { key: ENTER, ctrlKey: true })}  | ${`Clicking ${ENTER} + CTRL`} | ${'not submit'} | ${undefined}
       `('$event should $action the prompt form', ({ trigger, expectEmitted } = {}) => {
         createComponent({
           propsData: { messages: [], isChatAvailable: true },
@@ -401,4 +414,288 @@ describe('GlDuoChat', () => {
       });
     });
   });
+
+  describe('slash commands', () => {
+    const slashCommandsNames = slashCommands.map((command) => command.name);
+    const slashCommandsOnly = (commands = []) =>
+      slashCommandsNames.filter((name) => commands.includes(name));
+
+    describe('rendering', () => {
+      describe('without the `withSlashCommands` enabled', () => {
+        it('does not render slash commands by default', () => {
+          createComponent({
+            propsData: {
+              withSlashCommands: false,
+            },
+          });
+          expect(findSlashCommandsCard().exists()).toBe(false);
+        });
+
+        it('does not render slash commands when prompt is "/"', async () => {
+          createComponent({
+            propsData: {
+              withSlashCommands: false,
+            },
+            data: {
+              prompt: '/',
+            },
+          });
+
+          await nextTick();
+          expect(findSlashCommandsCard().exists()).toBe(false);
+        });
+      });
+
+      describe('with the `withSlashCommands` enabled', () => {
+        it('does not render slash commands by default', async () => {
+          createComponent({
+            propsData: {
+              withSlashCommands: true,
+            },
+          });
+
+          await nextTick();
+          expect(findSlashCommandsCard().exists()).toBe(false);
+        });
+
+        it('renders all slash commands when prompt is "/"', async () => {
+          createComponent({
+            propsData: {
+              withSlashCommands: true,
+            },
+            data: {
+              prompt: '/',
+            },
+          });
+
+          await nextTick();
+          expect(findSlashCommandsCard().exists()).toBe(true);
+          expect(findSlashCommands()).toHaveLength(slashCommands.length);
+
+          slashCommands.forEach((command, index) => {
+            expect(findSlashCommands().at(index).text()).toContain(command.name);
+            expect(findSlashCommands().at(index).text()).toContain(command.description);
+          });
+        });
+
+        describe('when the prompt includes the "/" character or no characters', () => {
+          it.each(['', '//', '\\', 'foo', '/foo'])(
+            'does not render the slash commands if prompt is "$prompt"',
+            async (prompt) => {
+              createComponent({
+                propsData: {
+                  withSlashCommands: true,
+                },
+                data: {
+                  prompt,
+                },
+              });
+
+              await nextTick();
+              expect(findSlashCommandsCard().exists()).toBe(false);
+            }
+          );
+        });
+
+        describe('when prompt presents a partial match to an existing slash command', () => {
+          it.each(generatePartialSlashCommands())(
+            'renders the slash commands when prompt is "%s" and is a partial match',
+            async (prompt) => {
+              createComponent({
+                propsData: {
+                  withSlashCommands: true,
+                },
+                data: {
+                  prompt,
+                },
+              });
+
+              await nextTick();
+              expect(findSlashCommandsCard().exists()).toBe(true);
+            }
+          );
+        });
+
+        describe('when the prompt matches a complete slash command', () => {
+          it.each(slashCommands.map((command) => command.name))(
+            'does not render the slash commands when prompt is "%s"',
+            async (prompt) => {
+              createComponent({
+                propsData: {
+                  withSlashCommands: true,
+                },
+                data: {
+                  prompt,
+                },
+              });
+
+              await nextTick();
+              expect(findSlashCommandsCard().exists()).toBe(false);
+            }
+          );
+        });
+      });
+    });
+
+    describe('interaction', () => {
+      describe('filtering when user types in partial slash command', () => {
+        it.each`
+          prompt       | expectedCommands
+          ${'/'}       | ${slashCommandsNames}
+          ${'/t'}      | ${slashCommandsOnly(['/test'])}
+          ${'/tes'}    | ${slashCommandsOnly(['/test'])}
+          ${'/e'}      | ${slashCommandsOnly(['/explain'])}
+          ${'/explai'} | ${slashCommandsOnly(['/explain'])}
+          ${'/r'}      | ${slashCommandsOnly(['/reset', '/refactor'])}
+          ${'/re'}     | ${slashCommandsOnly(['/reset', '/refactor'])}
+          ${'/res'}    | ${slashCommandsOnly(['/reset'])}
+          ${'/ref'}    | ${slashCommandsOnly(['/refactor'])}
+          ${'/foo'}    | ${[]}
+        `(
+          'shows $expectedCommands when prompt is $prompt',
+          async ({ prompt, expectedCommands } = {}) => {
+            createComponent({
+              propsData: {
+                withSlashCommands: true,
+              },
+              data: {
+                prompt,
+              },
+            });
+
+            await nextTick();
+            expect(findSlashCommands()).toHaveLength(expectedCommands.length);
+            expectedCommands.forEach((command) => {
+              expect(findSlashCommandsCard().text()).toContain(command);
+            });
+          }
+        );
+      });
+
+      describe('keyboard navigation', () => {
+        beforeEach(() => {
+          createComponent({
+            propsData: {
+              withSlashCommands: true,
+              messages,
+            },
+            data: {
+              prompt: '/',
+            },
+          });
+        });
+
+        it('toggles through commands on ArrowDown', async () => {
+          for (const command of slashCommandsNames) {
+            expect(findSelectedSlashCommand().text()).toContain(command);
+            findChatInput().trigger('keyup', { key: 'ArrowDown' });
+            // eslint-disable-next-line no-await-in-loop
+            await nextTick();
+          }
+        });
+
+        it('toggles through commands on ArrowUp', async () => {
+          const arr = [...slashCommandsNames].reverse();
+          arr.unshift(slashCommandsNames[0]); // it still has the top most command selected on the first run
+          for (const command of arr) {
+            expect(findSelectedSlashCommand().text()).toContain(command);
+            findChatInput().trigger('keyup', { key: 'ArrowUp' });
+            // eslint-disable-next-line no-await-in-loop
+            await nextTick();
+          }
+        });
+
+        describe('on Enter', () => {
+          const navigateToCommand = async (index) => {
+            const command = slashCommandsNames[index];
+            if (index) {
+              for (let i = 0; i < index; i += 1) {
+                findChatInput().trigger('keyup', { key: 'ArrowDown' });
+              }
+            }
+            await nextTick();
+            return command;
+          };
+
+          it('selects correct command and updates input if command should not submit right away', async () => {
+            const commandIndex = slashCommands.findIndex((cmd) => !cmd.shouldSubmit);
+            const command = await navigateToCommand(commandIndex);
+
+            expect(findSelectedSlashCommand().text()).toContain(command);
+            findChatInput().trigger('keyup', { key: 'Enter' });
+            await nextTick();
+            expect(findChatInput().props('value')).toBe(`${command} `);
+            expect(wrapper.emitted('send-chat-prompt')).toBe(undefined);
+          });
+
+          it('selects correct command and submits the prompt if command should submit right away', async () => {
+            const commandIndex = slashCommands.findIndex((cmd) => cmd.shouldSubmit);
+            const command = await navigateToCommand(commandIndex);
+
+            expect(findSelectedSlashCommand().text()).toContain(command);
+            findChatInput().trigger('keyup', { key: 'Enter' });
+            await nextTick();
+            expect(findChatInput().props('value')).toBe(`${command}`);
+            expect(wrapper.emitted('send-chat-prompt')).toEqual([[command]]);
+          });
+        });
+      });
+
+      describe('mouse navigation', () => {
+        beforeEach(() => {
+          createComponent({
+            propsData: {
+              withSlashCommands: true,
+              messages,
+            },
+            data: {
+              prompt: '/',
+            },
+          });
+        });
+
+        it('updates the selected command when hovering over it', async () => {
+          expect(findSelectedSlashCommand().text()).toContain(slashCommandsNames[0]);
+          findSlashCommands().at(2).trigger('mouseenter');
+          await nextTick();
+          expect(findSelectedSlashCommand().text()).toContain(slashCommandsNames[2]);
+          expect(findSelectedSlashCommand().text()).not.toContain(slashCommandsNames[0]);
+        });
+
+        describe('click', () => {
+          it('selects correct command and updates input if command should not submit right away', async () => {
+            const commandIndex = slashCommands.findIndex((cmd) => !cmd.shouldSubmit);
+
+            findSlashCommands().at(commandIndex).trigger('mouseenter');
+            await nextTick();
+
+            expect(findSelectedSlashCommand().text()).toContain(slashCommandsNames[commandIndex]);
+
+            findSelectedSlashCommand().vm.$emit('click');
+            await nextTick();
+
+            expect(findChatInput().props('value')).toBe(`${slashCommandsNames[commandIndex]} `);
+            expect(wrapper.emitted('send-chat-prompt')).toBe(undefined);
+          });
+
+          it('selects correct command and submits the prompt if command should submit right away', async () => {
+            const commandIndex = slashCommands.findIndex((cmd) => cmd.shouldSubmit);
+
+            findSlashCommands().at(commandIndex).trigger('mouseenter');
+            await nextTick();
+
+            expect(findSelectedSlashCommand().text()).toContain(slashCommandsNames[commandIndex]);
+
+            findSelectedSlashCommand().vm.$emit('click');
+            await nextTick();
+
+            expect(findChatInput().props('value')).toBe(slashCommandsNames[commandIndex]);
+            expect(wrapper.emitted('send-chat-prompt')).toEqual([
+              [slashCommandsNames[commandIndex]],
+            ]);
+          });
+        });
+      });
+    });
+  });
 });

package/src/components/experimental/duo/chat/duo_chat.stories.js

@@ -27,6 +27,7 @@ const generateProps = ({
   badgeHelpPageUrl = defaultValue('badgeHelpPageUrl'),
   badgeType = defaultValue('badgeType'),
   toolName = defaultValue('toolName'),
+  withSlashCommands = defaultValue('withSlashCommands'),
 } = {}) => ({
   title,
   messages,
@@ -37,6 +38,7 @@ const generateProps = ({
   badgeHelpPageUrl,
   badgeType,
   toolName,
+  withSlashCommands,
 });
 
 export const Default = (args, { argTypes }) => ({
@@ -57,6 +59,7 @@ export const Default = (args, { argTypes }) => ({
       :badge-help-page-url="badgeHelpPageUrl"
       :badge-type="badgeType"
       :tool-name="toolName"
+      :with-slash-commands="withSlashCommands"
     />`,
 });
 Default.args = generateProps({
@@ -151,6 +154,7 @@ export const Interactive = (args, { argTypes }) => ({
       :badge-help-page-url="badgeHelpPageUrl"
       :badge-type="badgeType"
       :tool-name="toolName"
+      :with-slash-commands="withSlashCommands"
       @send-chat-prompt="onSendChatPrompt"
       @chat-hidden="onChatHidden"
     />
@@ -176,7 +180,8 @@ export const Slots = (args, { argTypes }) => ({
         :predefined-prompts="predefinedPrompts"
         :badge-help-page-url="badgeHelpPageUrl"
         :badge-type="badgeType"
-        :tool-name="toolName">
+        :tool-name="toolName"
+        :with-slash-commands="withSlashCommands">
 
         <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;">

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

@@ -1,6 +1,8 @@
 <script>
 import throttle from 'lodash/throttle';
 import emptySvg from '@gitlab/svgs/dist/illustrations/empty-state/empty-activity-md.svg';
+import GlDropdownItem from '../../../base/dropdown/dropdown_item.vue';
+import GlCard from '../../../base/card/card.vue';
 import GlEmptyState from '../../../regions/empty_state/empty_state.vue';
 import GlButton from '../../../base/button/button.vue';
 import GlAlert from '../../../base/alert/alert.vue';
@@ -34,6 +36,29 @@ export const i18n = {
   ],
 };
 
+export const slashCommands = [
+  {
+    name: '/reset',
+    shouldSubmit: true,
+    description: 'Reset conversation, ignore the previous messages.',
+  },
+  {
+    name: '/test',
+    shouldSubmit: false,
+    description: 'Write tests for the code snippet.',
+  },
+  {
+    name: '/refactor',
+    shouldSubmit: false,
+    description: 'Refactor the code snippet.',
+  },
+  {
+    name: '/explain',
+    shouldSubmit: false,
+    description: 'Explain the code snippet.',
+  },
+];
+
 const isMessage = (item) => Boolean(item) && item?.role;
 
 const itemsValidator = (items) => items.every(isMessage);
@@ -52,6 +77,8 @@ export default {
     GlDuoChatLoader,
     GlDuoChatPredefinedPrompts,
     GlDuoChatConversation,
+    GlCard,
+    GlDropdownItem,
   },
   directives: {
     SafeHtml,
@@ -131,12 +158,21 @@ export default {
       required: false,
       default: i18n.CHAT_DEFAULT_TITLE,
     },
+    /**
+     * Whether the slash commands should be available to user when typing the prompt.
+     */
+    withSlashCommands: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
       isHidden: false,
       prompt: '',
       scrolledToBottom: true,
+      activeCommandIndex: 0,
     };
   },
   computed: {
@@ -166,6 +202,19 @@ export default {
       const lastMessage = this.messages[this.messages.length - 1];
       return lastMessage.content === CHAT_RESET_MESSAGE;
     },
+    filteredSlashCommands() {
+      const caseInsensitivePrompt = this.prompt.toLowerCase();
+      return slashCommands.filter((c) => c.name.toLowerCase().startsWith(caseInsensitivePrompt));
+    },
+    shouldShowSlashCommands() {
+      if (!this.withSlashCommands) return false;
+      const caseInsensitivePrompt = this.prompt.toLowerCase();
+      const startsWithSlash = caseInsensitivePrompt.startsWith('/');
+      const startsWithSlashCommand = slashCommands.some((c) =>
+        caseInsensitivePrompt.startsWith(c.name)
+      );
+      return startsWithSlash && this.filteredSlashCommands.length && !startsWithSlashCommand;
+    },
   },
   watch: {
     isLoading() {
@@ -225,6 +274,51 @@ export default {
        */
       this.$emit('track-feedback', event);
     },
+    onInputKeyup(e) {
+      const { metaKey, ctrlKey, altKey, shiftKey } = e;
+
+      if (this.shouldShowSlashCommands) {
+        e.preventDefault();
+
+        if (e.key === 'Enter') {
+          this.selectSlashCommand(this.activeCommandIndex);
+        } else if (e.key === 'ArrowUp') {
+          this.prevCommand();
+        } else if (e.key === 'ArrowDown') {
+          this.nextCommand();
+        } else {
+          this.activeCommandIndex = 0;
+        }
+      } else if (e.key === 'Enter' && !(metaKey || ctrlKey || altKey || shiftKey)) {
+        e.preventDefault();
+        this.sendChatPrompt();
+      }
+    },
+    prevCommand() {
+      this.activeCommandIndex -= 1;
+      this.wrapCommandIndex();
+    },
+    nextCommand() {
+      this.activeCommandIndex += 1;
+      this.wrapCommandIndex();
+    },
+    wrapCommandIndex() {
+      if (this.activeCommandIndex < 0) {
+        this.activeCommandIndex = this.filteredSlashCommands.length - 1;
+      } else if (this.activeCommandIndex >= this.filteredSlashCommands.length) {
+        this.activeCommandIndex = 0;
+      }
+    },
+    selectSlashCommand(index) {
+      const command = this.filteredSlashCommands[index];
+      if (command.shouldSubmit) {
+        this.prompt = command.name;
+        this.sendChatPrompt();
+      } else {
+        this.prompt = `${command.name} `;
+        this.$refs.prompt.$el.focus();
+      }
+    },
   },
   i18n,
   emptySvg,
@@ -349,7 +443,30 @@ export default {
             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-card
+              v-if="shouldShowSlashCommands"
+              ref="commands"
+              class="slash-commands gl-absolute! gl-translate-y-n100 gl-list-style-none gl-pl-0 gl-w-full gl-shadow-md"
+              body-class="gl-p-2!"
+            >
+              <gl-dropdown-item
+                v-for="(command, index) in filteredSlashCommands"
+                :key="command.name"
+                :class="{ 'active-command': index === activeCommandIndex }"
+                @mouseenter.native="activeCommandIndex = index"
+                @click="selectSlashCommand(index)"
+              >
+                <span class="gl-display-flex gl-justify-content-space-between">
+                  <span class="gl-display-block">{{ command.name }}</span>
+                  <small class="gl-text-gray-500 gl-font-style-italic">{{
+                    command.description
+                  }}</small>
+                </span>
+              </gl-dropdown-item>
+            </gl-card>
+
             <gl-form-textarea
+              ref="prompt"
               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!"
@@ -357,7 +474,8 @@ export default {
               :placeholder="$options.i18n.CHAT_PROMPT_PLACEHOLDER"
               :disabled="isLoading"
               autofocus
-              @keydown.enter.exact.native.prevent="sendChatPrompt"
+              @keydown.enter.exact.native.prevent
+              @keyup.native="onInputKeyup"
             />
           </div>
           <template #append>