@gitlab/duo-ui 10.20.0 → 10.22.0

package/src/components/chat/duo_chat.vue

@@ -1,16 +1,12 @@
 <script>
 import throttle from 'lodash/throttle';
-import VueResizable from 'vue-resizable';
 
 import {
   GlButton,
   GlDropdownItem,
   GlCard,
-  GlAlert,
-  GlFormInputGroup,
   GlFormTextarea,
   GlForm,
-  GlExperimentBadge,
   GlSafeHtmlDirective as SafeHtml,
 } from '@gitlab/ui';
 
@@ -24,6 +20,8 @@ import {
   CHAT_NEW_MESSAGE,
   CHAT_INCLUDE_MESSAGE,
   MESSAGE_MODEL_ROLES,
+  MAX_PROMPT_LENGTH,
+  PROMPT_LENGTH_WARNING,
 } from './constants';
 import { VIEW_TYPES } from './components/duo_chat_header/constants';
 import DuoChatLoader from './components/duo_chat_loader/duo_chat_loader.vue';
@@ -45,7 +43,7 @@ export const i18n = {
   ),
   CHAT_PROMPT_PLACEHOLDER_DEFAULT: translate(
     'DuoChat.chatPromptPlaceholderDefault',
-    'GitLab Duo Chat'
+    "Let's work through this together..."
   ),
   CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: translate(
     'DuoChat.chatPromptPlaceholderWithCommands',
@@ -53,6 +51,7 @@ export const i18n = {
   ),
   CHAT_SUBMIT_LABEL: translate('DuoChat.chatSubmitLabel', 'Send chat message.'),
   CHAT_CANCEL_LABEL: translate('DuoChat.chatCancelLabel', 'Cancel'),
+  CHAT_MODEL_PLACEHOLDER: translate('DuoChat.chatModelPlaceholder', 'GitLab Duo Chat'),
   CHAT_DEFAULT_PREDEFINED_PROMPTS: [
     translate(
       'DuoChat.chatDefaultPredefinedPromptsChangePassword',
@@ -99,11 +98,8 @@ export default {
   name: 'DuoChat',
   components: {
     GlButton,
-    GlAlert,
-    GlFormInputGroup,
     GlFormTextarea,
     GlForm,
-    GlExperimentBadge,
     DuoChatLoader,
     DuoChatPredefinedPrompts,
     DuoChatConversation,
@@ -111,41 +107,11 @@ export default {
     DuoChatThreads,
     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.
      */
@@ -314,10 +280,14 @@ export default {
       default: () => ['en-US', 'en'],
       validator: localeValidator,
     },
+    shouldRenderResizable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
-      isHidden: false,
       prompt: '',
       scrolledToBottom: true,
       activeCommandIndex: 0,
@@ -326,6 +296,9 @@ export default {
       contextItemsMenuIsOpen: false,
       contextItemMenuRef: null,
       currentView: this.multiThreadedView,
+      maxPromptLength: MAX_PROMPT_LENGTH,
+      maxPromptLengthWarning: PROMPT_LENGTH_WARNING,
+      promptLengthWarningCount: MAX_PROMPT_LENGTH - PROMPT_LENGTH_WARNING,
     };
   },
   computed: {
@@ -434,7 +407,6 @@ export default {
       if (!newVal && !this.isStreaming) {
         this.displaySubmitButton = true; // Re-enable submit button when loading stops
       }
-      this.isHidden = false;
     },
     isStreaming(newVal) {
       if (!newVal && !this.isLoading) {
@@ -475,14 +447,10 @@ export default {
         this.focusChatInput();
       });
     },
-    updateSize(e) {
-      this.$emit('chat-resize', e);
-    },
     compositionEnd() {
       this.compositionJustEnded = true;
     },
     hideChat() {
-      this.isHidden = true;
       /**
        * Emitted when clicking the cross in the title and the chat gets closed.
        */
@@ -545,7 +513,7 @@ export default {
     focusChatInput() {
       // This method is also called directly by consumers of this component
       // https://gitlab.com/gitlab-org/gitlab-vscode-extension/-/blob/dae2d4669ab4da327921492a2962beae8a05c290/webviews/vue2/gitlab_duo_chat/src/App.vue#L109
-      this.$refs.prompt?.$el?.focus();
+      this.$refs.prompt?.$el?.querySelector?.('textarea')?.focus();
     },
     onTrackFeedback(event) {
       /**
@@ -699,214 +667,222 @@ export default {
       event.preventDefault();
       document.execCommand('redo');
     },
+    remainingCharacterCountMessage(count) {
+      return `${count} characters remaining`;
+    },
+    overLimitCharacterCountMessage(count) {
+      return `${Math.abs(count)} characters over limit`;
+    },
   },
   i18n,
 };
 </script>
 <template>
-  <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"
+  <div
+    id="chat-component"
+    class="markdown-code-block duo-chat gl-bottom-0 gl-flex gl-max-h-full gl-flex-col"
+    role="complementary"
+    data-testid="chat-component"
   >
-    <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-flex gl-max-h-full gl-flex-col"
-      role="complementary"
-      data-testid="chat-component"
+    <duo-chat-header
+      v-if="showHeader"
+      ref="header"
+      :active-thread-id="activeThreadId"
+      :title="isMultithreaded && currentView === 'list' ? $options.i18n.CHAT_HISTORY_TITLE : title"
+      :subtitle="activeThreadTitleForView"
+      :is-multithreaded="isMultithreaded"
+      :current-view="currentView"
+      :should-render-resizable="shouldRenderResizable"
+      :badge-type="isMultithreaded ? null : badgeType"
+      @go-back="onGoBack"
+      @go-back-to-chat="onGoBackToChat"
+      @new-chat="onNewChat"
+      @close="hideChat"
+    >
+      <template #subheader>
+        <slot name="subheader"></slot>
+      </template>
+    </duo-chat-header>
+
+    <div
+      class="gl-flex gl-flex-1 gl-flex-grow gl-flex-col gl-overflow-y-auto gl-overscroll-contain gl-bg-inherit"
+      data-testid="chat-history"
+      @scroll="handleScrollingThrottled"
     >
-      <duo-chat-header
-        v-if="showHeader"
-        ref="header"
-        :active-thread-id="activeThreadId"
-        :title="
-          isMultithreaded && currentView === 'list' ? $options.i18n.CHAT_HISTORY_TITLE : title
-        "
-        :subtitle="activeThreadTitleForView"
-        :is-multithreaded="isMultithreaded"
-        :current-view="currentView"
-        :should-render-resizable="shouldRenderResizable"
-        :badge-type="isMultithreaded ? null : badgeType"
-        @go-back="onGoBack"
-        @go-back-to-chat="onGoBackToChat"
+      <duo-chat-threads
+        v-if="shouldShowThreadList"
+        :threads="threadList"
+        :preferred-locale="preferredLocale"
         @new-chat="onNewChat"
+        @select-thread="onSelectThread"
+        @delete-thread="onDeleteThread"
         @close="hideChat"
+      />
+      <transition-group
+        v-else
+        mode="out-in"
+        tag="section"
+        name="message"
+        class="duo-chat-history gl-mt-auto gl-p-5"
       >
-        <template #subheader>
-          <slot name="subheader"></slot>
-        </template>
-      </duo-chat-header>
-
-      <div
-        class="gl-flex gl-flex-1 gl-flex-grow gl-flex-col gl-overflow-y-auto gl-overscroll-contain gl-bg-inherit"
-        data-testid="chat-history"
-        @scroll="handleScrollingThrottled"
-      >
-        <duo-chat-threads
-          v-if="shouldShowThreadList"
-          :threads="threadList"
-          :preferred-locale="preferredLocale"
-          @new-chat="onNewChat"
-          @select-thread="onSelectThread"
-          @delete-thread="onDeleteThread"
-          @close="hideChat"
+        <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"
+          :trusted-urls="trustedUrls"
+          @track-feedback="onTrackFeedback"
+          @insert-code-snippet="onInsertCodeSnippet"
+          @copy-code-snippet="onCopyCodeSnippet"
+          @copy-message="onCopyMessage"
+          @get-context-item-content="onGetContextItemContent"
+          @open-file-path="onOpenFilePath"
         />
-        <transition-group
-          v-else
-          mode="out-in"
-          tag="section"
-          name="message"
-          class="duo-chat-history gl-mt-auto gl-p-5"
-        >
-          <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"
-            :trusted-urls="trustedUrls"
-            @track-feedback="onTrackFeedback"
-            @insert-code-snippet="onInsertCodeSnippet"
-            @copy-code-snippet="onCopyCodeSnippet"
-            @copy-message="onCopyMessage"
-            @get-context-item-content="onGetContextItemContent"
-            @open-file-path="onOpenFilePath"
-          />
-          <template v-if="!hasMessages && !isLoading">
-            <div
-              key="empty-state-message"
-              class="duo-chat-message gl-rounded-bl-none gl-p-4 gl-leading-20 gl-text-gray-900 gl-break-anywhere"
-              data-testid="gl-duo-chat-empty-state"
-            >
-              <p v-if="emptyStateTitle" data-testid="gl-duo-chat-empty-state-title" class="gl-m-0">
-                {{ emptyStateTitle }}
-              </p>
-              <duo-chat-predefined-prompts
-                key="predefined-prompts"
-                :prompts="predefinedPrompts"
-                @click="sendPredefinedPrompt"
-              />
-            </div>
-          </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 && !shouldShowThreadList"
-        data-testid="chat-footer"
-        class="duo-chat-drawer-footer gl-relative gl-z-2 gl-shrink-0 gl-border-0 gl-bg-default gl-pb-3"
-        :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">
-            <!--
+        <template v-if="!hasMessages && !isLoading">
+          <div
+            key="empty-state-message"
+            class="duo-chat-message gl-rounded-bl-none gl-p-4 gl-leading-20 gl-text-gray-900 gl-break-anywhere"
+            data-testid="gl-duo-chat-empty-state"
+          >
+            <p v-if="emptyStateTitle" data-testid="gl-duo-chat-empty-state-title" class="gl-m-0">
+              {{ emptyStateTitle }}
+            </p>
+            <duo-chat-predefined-prompts
+              key="predefined-prompts"
+              :prompts="predefinedPrompts"
+              @click="sendPredefinedPrompt"
+            />
+          </div>
+        </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 && !shouldShowThreadList"
+      data-testid="chat-footer"
+      class="duo-chat-drawer-footer gl-relative gl-z-2 gl-shrink-0 gl-border-0 gl-bg-default gl-pb-3"
+      :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>
+          <slot
+            name="context-items-menu"
+            :is-open="contextItemsMenuIsOpen"
+            :on-close="closeContextItemsMenuOpen"
+            :set-ref="setContextItemsMenuRef"
+            :focus-prompt="focusChatInput"
+          ></slot>
+        </div>
+
+        <div
+          class="duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-flex-col gl-rounded-bl-[12px] gl-rounded-br-[18px] gl-rounded-tl-[12px] gl-rounded-tr-[12px] gl-align-top"
+        >
+          <div
+            class="gl-flex gl-justify-between gl-border-0 gl-border-b-1 gl-border-solid gl-border-[#DCDCDE] gl-px-4 gl-py-4"
+          >
+            <div>{{ $options.i18n.CHAT_MODEL_PLACEHOLDER }}</div>
+            <div><slot name="agentic-switch"></slot></div>
           </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"
+          <div class="gl-h-[40px] gl-grow" :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-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-dropdown-item
+                v-for="(command, index) in filteredSlashCommands"
+                :key="command.name"
+                :class="{ 'active-command': index === activeCommandIndex }"
+                @mouseenter.native="activeCommandIndex = index"
+                @click="selectSlashCommand(index)"
               >
-                <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"
+              :textarea-classes="[
+                '!gl-h-full',
+                '!gl-bg-transparent',
+                '!gl-py-4',
+                '!gl-shadow-none',
+                'form-control',
+                'gl-form-input',
+                'gl-form-textarea',
+                { 'gl-truncate': !prompt },
+              ]"
+              :placeholder="inputPlaceholder"
+              :character-count-limit="maxPromptLength"
+              autofocus
+              @keydown.enter.exact.native.prevent
+              @keydown.ctrl.z.exact="handleUndo"
+              @keydown.meta.z.exact="handleUndo"
+              @keydown.ctrl.shift.z="handleRedo"
+              @keydown.meta.shift.z="handleRedo"
+              @keydown.ctrl.y="handleRedo"
+              @keydown.meta.y="handleRedo"
+              @keyup.native="onInputKeyup"
+              @compositionend="compositionEnd"
+            >
+              <template #remaining-character-count-text="{ count }">
+                <span
+                  v-if="count <= promptLengthWarningCount"
+                  class="gl-absolute gl-bottom-[-25px] gl-right-px gl-pr-3"
                 >
-                  <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
-                @keydown.ctrl.z.exact="handleUndo"
-                @keydown.meta.z.exact="handleUndo"
-                @keydown.ctrl.shift.z="handleRedo"
-                @keydown.meta.shift.z="handleRedo"
-                @keydown.ctrl.y="handleRedo"
-                @keydown.meta.y="handleRedo"
-                @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"
-                :disabled="isPromptEmpty"
-                :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>
-        <slot name="footer-controls"></slot>
-        <p class="gl-mb-0 gl-mt-3 gl-px-4 gl-text-sm gl-text-secondary">
-          {{ $options.i18n.CHAT_DISCLAMER }}
-        </p>
-      </footer>
-    </aside>
-  </component>
+                  {{ remainingCharacterCountMessage(count) }}
+                </span>
+              </template>
+              <template #character-count-over-limit-text="{ count }">
+                <span class="gl-absolute gl-bottom-[-25px] gl-right-px gl-pr-3">{{
+                  overLimitCharacterCountMessage(count)
+                }}</span>
+              </template>
+            </gl-form-textarea>
+          </div>
+          <div class="gl-flex gl-justify-end gl-px-3 gl-pb-3">
+            <gl-button
+              v-if="displaySubmitButton"
+              icon="paper-airplane"
+              category="primary"
+              variant="confirm"
+              class="gl-bottom-2 gl-right-2 gl-ml-auto !gl-rounded-full"
+              type="submit"
+              data-testid="chat-prompt-submit-button"
+              :disabled="isPromptEmpty"
+              :aria-label="$options.i18n.CHAT_SUBMIT_LABEL"
+            />
+            <gl-button
+              v-else
+              icon="stop"
+              category="primary"
+              variant="default"
+              class="gl-bottom-2 gl-right-2 gl-ml-auto !gl-rounded-full"
+              data-testid="chat-prompt-cancel-button"
+              :aria-label="$options.i18n.CHAT_CANCEL_LABEL"
+              @click="cancelPrompt"
+            />
+          </div>
+        </div>
+      </gl-form>
+      <slot name="footer-controls"></slot>
+      <p class="gl-mb-0 gl-mt-3 gl-px-4 gl-text-sm gl-text-secondary">
+        {{ $options.i18n.CHAT_DISCLAMER }}
+      </p>
+    </footer>
+  </div>
 </template>