@gitlab/duo-ui 3.0.0 → 4.0.0

package/src/components/chat/duo_chat.vue

@@ -1,6 +1,7 @@
 <script>
 import throttle from 'lodash/throttle';
 import emptySvg from '@gitlab/svgs/dist/illustrations/empty-state/empty-activity-md.svg';
+import VueResizable from 'vue-resizable';
 
 import {
   GlButton,
@@ -16,6 +17,7 @@ import {
 } from '@gitlab/ui';
 
 import { translate } from '../../utils/i18n';
+
 import {
   badgeTypes,
   badgeTypeValidator,
@@ -24,46 +26,43 @@ import {
   CHAT_INCLUDE_MESSAGE,
   MESSAGE_MODEL_ROLES,
 } from './constants';
-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 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';
 
 export const i18n = {
-  CHAT_DEFAULT_TITLE: translate('GlDuoChat.chatDefaultTitle', 'GitLab Duo Chat'),
-  CHAT_CLOSE_LABEL: translate('GlDuoChat.chatCloseLabel', 'Close the Code Explanation'),
-  CHAT_EMPTY_STATE_TITLE: translate('GlDuoChat.chatEmptyStateTitle', 'Ask a question'),
+  CHAT_DEFAULT_TITLE: translate('DuoChat.chatDefaultTitle', 'GitLab Duo Chat'),
+  CHAT_CLOSE_LABEL: translate('DuoChat.chatCloseLabel', 'Close the Code Explanation'),
+  CHAT_EMPTY_STATE_TITLE: translate('DuoChat.chatEmptyStateTitle', 'Ask a question'),
   CHAT_EMPTY_STATE_DESC: translate(
-    'GlDuoChat.chatEmptyStateDesc',
+    'DuoChat.chatEmptyStateDesc',
     'GitLab Duo Chat is your AI-powered assistant.'
   ),
   CHAT_EMPTY_STATE_SECONDARY_DESC: translate(
-    'GlDuoChat.chatEmptyStateSecondaryDesc',
+    'DuoChat.chatEmptyStateSecondaryDesc',
     'Responses may be inaccurate. Verify before use.'
   ),
   CHAT_PROMPT_PLACEHOLDER_DEFAULT: translate(
-    'GlDuoChat.chatPromptPlaceholderDefault',
+    'DuoChat.chatPromptPlaceholderDefault',
     'GitLab Duo Chat'
   ),
   CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: translate(
-    'GlDuoChat.chatPromptPlaceholderWithCommands',
+    'DuoChat.chatPromptPlaceholderWithCommands',
     'Type /help to learn more'
   ),
-  CHAT_SUBMIT_LABEL: translate('GlDuoChat.chatSubmitLabel', 'Send chat message.'),
-  CHAT_CANCEL_LABEL: translate('GlDuoChat.chatCancelLabel', 'Cancel'),
+  CHAT_SUBMIT_LABEL: translate('DuoChat.chatSubmitLabel', 'Send chat message.'),
+  CHAT_CANCEL_LABEL: translate('DuoChat.chatCancelLabel', 'Cancel'),
   CHAT_DEFAULT_PREDEFINED_PROMPTS: [
     translate(
-      'GlDuoChat.chatDefaultPredefinedPromptsChangePassword',
+      'DuoChat.chatDefaultPredefinedPromptsChangePassword',
       'How do I change my password in GitLab?'
     ),
-    translate('GlDuoChat.chatDefaultPredefinedPromptsForkProject', 'How do I fork a project?'),
+    translate('DuoChat.chatDefaultPredefinedPromptsForkProject', 'How do I fork a project?'),
     translate(
-      'GlDuoChat.chatDefaultPredefinedPromptsCloneRepository',
+      'DuoChat.chatDefaultPredefinedPromptsCloneRepository',
       'How do I clone a repository?'
     ),
-    translate(
-      'GlDuoChat.chatDefaultPredefinedPromptsCreateTemplate',
-      'How do I create a template?'
-    ),
+    translate('DuoChat.chatDefaultPredefinedPromptsCreateTemplate', 'How do I create a template?'),
   ],
 };
 
@@ -76,7 +75,7 @@ const itemsValidator = (items) => items.every(isMessage);
 const slashCommandsValidator = (commands) => commands.every(isSlashCommand);
 
 export default {
-  name: 'GlDuoChat',
+  name: 'DuoChat',
   components: {
     GlEmptyState,
     GlButton,
@@ -85,16 +84,46 @@ export default {
     GlFormTextarea,
     GlForm,
     GlExperimentBadge,
-    GlDuoChatLoader,
-    GlDuoChatPredefinedPrompts,
-    GlDuoChatConversation,
+    DuoChatLoader,
+    DuoChatPredefinedPrompts,
+    DuoChatConversation,
     GlCard,
     GlDropdownItem,
+    VueResizable,
   },
   directives: {
     SafeHtml,
   },
   props: {
+    /**
+     * Determines if the component should be resizable. When true, it renders inside
+     * a `vue-resizable` wrapper; otherwise, a standard `div` is used.
+     */
+    shouldRenderResizable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Defines the dimensions of the chat container when resizable.
+     * By default, the height is set to match the height of the browser window,
+     * and the width is fixed at 400px. The `top` position is left undefined,
+     * allowing it to be dynamically adjusted if needed.
+     */
+    dimensions: {
+      type: Object,
+      required: false,
+      default: () => ({
+        width: undefined,
+        height: undefined,
+        top: undefined,
+        left: undefined,
+        maxWidth: undefined,
+        minWidth: 400,
+        maxHeight: undefined,
+        minHeight: 400,
+      }),
+    },
     /**
      * The title of the chat/feature.
      */
@@ -178,7 +207,7 @@ export default {
       validator: badgeTypeValidator,
     },
     /**
-     * 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.
+     * The current tool's name to display in the loading message while waiting for a response from AI. Refer the `DuoChatLoader` component for more information.
      */
     toolName: {
       type: String,
@@ -365,7 +394,11 @@ export default {
   mounted() {
     this.scrollToBottom();
   },
+
   methods: {
+    updateSize(e) {
+      this.$emit('chat-resize', e);
+    },
     compositionEnd() {
       this.compositionJustEnded = true;
     },
@@ -550,198 +583,224 @@ export default {
 };
 </script>
 <template>
-  <aside
-    v-if="!isHidden"
-    id="chat-component"
-    class="markdown-code-block duo-chat-drawer duo-chat gl-bottom-0 gl-max-h-full"
-    role="complementary"
-    data-testid="chat-component"
+  <component
+    :is="shouldRenderResizable ? 'vue-resizable' : 'div'"
+    :width="shouldRenderResizable ? dimensions.width : null"
+    :height="shouldRenderResizable ? dimensions.height : null"
+    :max-width="shouldRenderResizable ? dimensions.maxWidth : null"
+    :max-height="shouldRenderResizable ? dimensions.maxHeight : null"
+    :min-width="shouldRenderResizable ? dimensions.minWidth : null"
+    :left="shouldRenderResizable ? dimensions.left : null"
+    :top="shouldRenderResizable ? dimensions.top : null"
+    :fit-parent="true"
+    :min-height="shouldRenderResizable ? dimensions.minHeight : null"
+    :class="{
+      'duo-chat-resizable': shouldRenderResizable,
+      'non-resizable-wrapper': !shouldRenderResizable,
+    }"
+    :active="shouldRenderResizable ? ['l', 't', 'lt'] : null"
+    @resize:end="updateSize"
   >
-    <header
-      v-if="showHeader"
-      data-testid="chat-header"
-      class="duo-chat-drawer-header duo-chat-drawer-header-sticky gl-z-200 gl-border-0 gl-bg-default !gl-p-0"
+    <aside
+      v-if="!isHidden"
+      id="chat-component"
+      :class="{
+        'resizable-content': shouldRenderResizable,
+        'duo-chat-drawer': !shouldRenderResizable,
+      }"
+      class="markdown-code-block duo-chat gl-bottom-0 gl-max-h-full"
+      role="complementary"
+      data-testid="chat-component"
     >
-      <div class="drawer-title gl-flex gl-items-center gl-justify-start gl-p-5">
-        <h3 class="gl-my-0 gl-text-size-h2">{{ title }}</h3>
-        <gl-experiment-badge
-          v-if="badgeType"
-          :help-page-url="badgeHelpPageUrl"
-          :type="badgeType"
-          container-id="chat-component"
-        />
-        <gl-button
-          category="tertiary"
-          variant="default"
-          icon="close"
-          size="small"
-          class="gl-ml-auto"
-          data-testid="chat-close-button"
-          :aria-label="$options.i18n.CHAT_CLOSE_LABEL"
-          @click="hideChat"
-        />
-      </div>
+      <header
+        v-if="showHeader"
+        data-testid="chat-header"
+        :class="{
+          'gl-z-200': !shouldRenderResizable,
+        }"
+        class="duo-chat-drawer-header duo-chat-drawer-header-sticky gl-border-0 gl-bg-default !gl-p-0"
+      >
+        <div class="drawer-title gl-flex gl-items-center gl-justify-start gl-p-5">
+          <h3 class="gl-my-0 gl-text-size-h2">{{ title }}</h3>
+          <gl-experiment-badge
+            v-if="badgeType"
+            :help-page-url="badgeHelpPageUrl"
+            :type="badgeType"
+            container-id="chat-component"
+          />
+          <gl-button
+            category="tertiary"
+            variant="default"
+            icon="close"
+            size="small"
+            class="gl-ml-auto"
+            data-testid="chat-close-button"
+            :aria-label="$options.i18n.CHAT_CLOSE_LABEL"
+            @click="hideChat"
+          />
+        </div>
 
-      <!--
+        <!--
         @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>
+        <slot name="subheader"></slot>
 
-      <!-- Ensure that the global error is not scrolled away -->
-      <gl-alert
-        v-if="error"
-        key="error"
-        :dismissible="false"
-        variant="danger"
-        class="!gl-pl-9"
-        role="alert"
-        data-testid="chat-error"
-      >
-        <span v-safe-html="error"></span>
-      </gl-alert>
-    </header>
+        <!-- Ensure that the global error is not scrolled away -->
+        <gl-alert
+          v-if="error"
+          key="error"
+          :dismissible="false"
+          variant="danger"
+          class="!gl-pl-9"
+          role="alert"
+          data-testid="chat-error"
+        >
+          <span v-safe-html="error"></span>
+        </gl-alert>
+      </header>
 
-    <div
-      class="duo-chat-drawer-body gl-bg-default"
-      data-testid="chat-history"
-      @scroll="handleScrollingTrottled"
-    >
-      <transition-group
-        tag="section"
-        name="message"
-        class="duo-chat-history gl-flex gl-flex-col gl-justify-end"
-        :class="[
-          {
-            'gl-h-full': !hasMessages,
-            'force-scroll-bar': hasMessages,
-          },
-        ]"
+      <div
+        class="duo-chat-drawer-body gl-bg-default"
+        data-testid="chat-history"
+        @scroll="handleScrollingTrottled"
       >
-        <gl-duo-chat-conversation
-          v-for="(conversation, index) in conversations"
-          :key="`conversation-${index}`"
-          :enable-code-insertion="enableCodeInsertion"
-          :messages="conversation"
-          :canceled-request-ids="canceledRequestIds"
-          :show-delimiter="index > 0"
-          @track-feedback="onTrackFeedback"
-          @insert-code-snippet="onInsertCodeSnippet"
-          @get-context-item-content="onGetContextItemContent"
-        />
-        <template v-if="!hasMessages && !isLoading">
-          <gl-empty-state
-            key="empty-state"
-            :svg-path="$options.emptySvg"
-            :svg-height="145"
-            :title="emptyStateTitle"
-            class="gl-flex-grow gl-justify-center"
-          >
-            <template #description>
-              <p data-testid="gl-duo-chat-empty-state-description" class="gl-mb-3">
-                {{ emptyStateDescription }}
-              </p>
-              <p
-                data-testid="gl-duo-chat-empty-state-secondary-description"
-                class="gl-mt-3 gl-text-sm gl-text-subtle"
-              >
-                {{ emptyStateSecondaryDescription }}
-              </p>
-            </template>
-          </gl-empty-state>
-          <gl-duo-chat-predefined-prompts
-            key="predefined-prompts"
-            :prompts="predefinedPrompts"
-            @click="sendPredefinedPrompt"
+        <transition-group
+          tag="section"
+          name="message"
+          class="duo-chat-history gl-flex gl-flex-col gl-justify-end"
+          :class="[
+            {
+              'gl-h-full': !hasMessages,
+              'force-scroll-bar': hasMessages,
+            },
+          ]"
+        >
+          <duo-chat-conversation
+            v-for="(conversation, index) in conversations"
+            :key="`conversation-${index}`"
+            :enable-code-insertion="enableCodeInsertion"
+            :messages="conversation"
+            :canceled-request-ids="canceledRequestIds"
+            :show-delimiter="index > 0"
+            @track-feedback="onTrackFeedback"
+            @insert-code-snippet="onInsertCodeSnippet"
+            @get-context-item-content="onGetContextItemContent"
           />
-        </template>
-        <gl-duo-chat-loader v-if="isLoading" key="loader" :tool-name="toolName" />
-        <div key="anchor" ref="anchor" class="scroll-anchor"></div>
-      </transition-group>
-    </div>
-    <footer
-      v-if="isChatAvailable"
-      data-testid="chat-footer"
-      class="duo-chat-drawer-footer duo-chat-drawer-footer-sticky gl-border-0 gl-bg-default gl-p-5"
-      :class="{ 'duo-chat-drawer-body-scrim-on-footer': !scrolledToBottom }"
-    >
-      <gl-form data-testid="chat-prompt-form" @submit.stop.prevent="sendChatPrompt">
-        <div class="gl-relative gl-max-w-full">
-          <!--
-            @slot For integrating `<gl-context-items-menu>` component if pinned-context should be available. The following scopedSlot properties are provided: `isOpen`, `onClose`, `setRef`, `focusPrompt`, which should be passed to the `<gl-context-items-menu>` component when rendering, e.g. `<template #context-items-menu="{ isOpen, onClose, setRef, focusPrompt }">` `<gl-duo-chat-context-item-menu :ref="setRef" :open="isOpen" @close="onClose" @focus-prompt="focusPrompt" ...`
+          <template v-if="!hasMessages && !isLoading">
+            <gl-empty-state
+              key="empty-state"
+              :svg-path="$options.emptySvg"
+              :svg-height="145"
+              :title="emptyStateTitle"
+              class="gl-flex-grow gl-justify-center"
+            >
+              <template #description>
+                <p data-testid="duo-chat-empty-state-description" class="gl-mb-3">
+                  {{ emptyStateDescription }}
+                </p>
+                <p
+                  data-testid="duo-chat-empty-state-secondary-description"
+                  class="gl-mt-3 gl-text-sm gl-text-subtle"
+                >
+                  {{ emptyStateSecondaryDescription }}
+                </p>
+              </template>
+            </gl-empty-state>
+            <duo-chat-predefined-prompts
+              key="predefined-prompts"
+              :prompts="predefinedPrompts"
+              @click="sendPredefinedPrompt"
+            />
+          </template>
+          <duo-chat-loader v-if="isLoading" key="loader" :tool-name="toolName" />
+          <div key="anchor" ref="anchor" class="scroll-anchor"></div>
+        </transition-group>
+      </div>
+      <footer
+        v-if="isChatAvailable"
+        data-testid="chat-footer"
+        class="duo-chat-drawer-footer duo-chat-drawer-footer-sticky gl-border-0 gl-bg-default gl-p-5"
+        :class="{ 'duo-chat-drawer-body-scrim-on-footer': !scrolledToBottom }"
+      >
+        <gl-form data-testid="chat-prompt-form" @submit.stop.prevent="sendChatPrompt">
+          <div class="gl-relative gl-max-w-full">
+            <!--
+            @slot For integrating `<gl-context-items-menu>` component if pinned-context should be available. The following scopedSlot properties are provided: `isOpen`, `onClose`, `setRef`, `focusPrompt`, which should be passed to the `<gl-context-items-menu>` component when rendering, e.g. `<template #context-items-menu="{ isOpen, onClose, setRef, focusPrompt }">` `<duo-chat-context-item-menu :ref="setRef" :open="isOpen" @close="onClose" @focus-prompt="focusPrompt" ...`
           -->
-          <slot
-            name="context-items-menu"
-            :is-open="contextItemsMenuIsOpen"
-            :on-close="closeContextItemsMenuOpen"
-            :set-ref="setContextItemsMenuRef"
-            :focus-prompt="focusChatInput"
-          ></slot>
-        </div>
+            <slot
+              name="context-items-menu"
+              :is-open="contextItemsMenuIsOpen"
+              :on-close="closeContextItemsMenuOpen"
+              :set-ref="setContextItemsMenuRef"
+              :focus-prompt="focusChatInput"
+            ></slot>
+          </div>
 
-        <gl-form-input-group>
-          <div
-            class="duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-align-top"
-            :data-value="prompt"
-          >
-            <gl-card
-              v-if="shouldShowSlashCommands"
-              ref="commands"
-              class="slash-commands !gl-absolute gl-w-full -gl-translate-y-full gl-list-none gl-pl-0 gl-shadow-md"
-              body-class="!gl-p-2"
+          <gl-form-input-group>
+            <div
+              class="duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-align-top"
+              :data-value="prompt"
             >
-              <gl-dropdown-item
-                v-for="(command, index) in filteredSlashCommands"
-                :key="command.name"
-                :class="{ 'active-command': index === activeCommandIndex }"
-                @mouseenter.native="activeCommandIndex = index"
-                @click="selectSlashCommand(index)"
+              <gl-card
+                v-if="shouldShowSlashCommands"
+                ref="commands"
+                class="slash-commands !gl-absolute gl-w-full -gl-translate-y-full gl-list-none gl-pl-0 gl-shadow-md"
+                body-class="!gl-p-2"
               >
-                <span class="gl-flex gl-justify-between">
-                  <span class="gl-block">{{ command.name }}</span>
-                  <small class="gl-pl-3 gl-text-right gl-italic gl-text-subtle">{{
-                    command.description
-                  }}</small>
-                </span>
-              </gl-dropdown-item>
-            </gl-card>
+                <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-flex gl-justify-between">
+                    <span class="gl-block">{{ command.name }}</span>
+                    <small class="gl-pl-3 gl-text-right gl-italic gl-text-subtle">{{
+                      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-rounded-br-none gl-rounded-tr-none !gl-bg-transparent !gl-py-4 !gl-shadow-none"
-              :class="{ 'gl-truncate': !prompt }"
-              :placeholder="inputPlaceholder"
-              autofocus
-              @keydown.enter.exact.native.prevent
-              @keyup.native="onInputKeyup"
-              @compositionend="compositionEnd"
-            />
-          </div>
-          <template #append>
-            <gl-button
-              v-if="displaySubmitButton"
-              icon="paper-airplane"
-              category="primary"
-              variant="confirm"
-              class="!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-full"
-              type="submit"
-              data-testid="chat-prompt-submit-button"
-              :aria-label="$options.i18n.CHAT_SUBMIT_LABEL"
-            />
-            <gl-button
-              v-else
-              icon="stop"
-              category="primary"
-              variant="default"
-              class="!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-full"
-              data-testid="chat-prompt-cancel-button"
-              :aria-label="$options.i18n.CHAT_CANCEL_LABEL"
-              @click="cancelPrompt"
-            />
-          </template>
-        </gl-form-input-group>
-      </gl-form>
-    </footer>
-  </aside>
+              <gl-form-textarea
+                ref="prompt"
+                v-model="prompt"
+                data-testid="chat-prompt-input"
+                class="gl-absolute !gl-h-full gl-rounded-br-none gl-rounded-tr-none !gl-bg-transparent !gl-py-4 !gl-shadow-none"
+                :class="{ 'gl-truncate': !prompt }"
+                :placeholder="inputPlaceholder"
+                autofocus
+                @keydown.enter.exact.native.prevent
+                @keyup.native="onInputKeyup"
+                @compositionend="compositionEnd"
+              />
+            </div>
+            <template #append>
+              <gl-button
+                v-if="displaySubmitButton"
+                icon="paper-airplane"
+                category="primary"
+                variant="confirm"
+                class="!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-full"
+                type="submit"
+                data-testid="chat-prompt-submit-button"
+                :aria-label="$options.i18n.CHAT_SUBMIT_LABEL"
+              />
+              <gl-button
+                v-else
+                icon="stop"
+                category="primary"
+                variant="default"
+                class="!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-full"
+                data-testid="chat-prompt-cancel-button"
+                :aria-label="$options.i18n.CHAT_CANCEL_LABEL"
+                @click="cancelPrompt"
+              />
+            </template>
+          </gl-form-input-group>
+        </gl-form>
+      </footer>
+    </aside>
+  </component>
 </template>