@gitlab/duo-ui 10.23.0 → 11.0.0

package/src/components/agentic_chat/agentic_duo_chat.vue

@@ -1,12 +1,16 @@
 <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';
 
@@ -34,7 +38,7 @@ export const i18n = {
   CHAT_HISTORY_TITLE: translate('AgenticDuoChat.chatHistoryTitle', 'Chat history'),
   CHAT_DISCLAMER: translate(
     'AgenticDuoChat.chatDisclamer',
-    'Responses may be inaccurate. Verify before use.'
+    'Chat can autonomously change code. Responses and changes can be inaccurate. Review carefully.'
   ),
   CHAT_EMPTY_STATE_TITLE: translate(
     'AgenticDuoChat.chatEmptyStateTitle',
@@ -42,10 +46,6 @@ export const i18n = {
   ),
   CHAT_PROMPT_PLACEHOLDER_DEFAULT: translate(
     'AgenticDuoChat.chatPromptPlaceholderDefault',
-    "Let's work through this together..."
-  ),
-  CHAT_MODEL_PLACEHOLDER: translate(
-    'AgenticDuoChat.chatModelPlaceholder',
     'GitLab Duo Agentic Chat'
   ),
   CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: translate(
@@ -102,8 +102,11 @@ export default {
   name: 'DuoChat',
   components: {
     GlButton,
+    GlAlert,
+    GlFormInputGroup,
     GlFormTextarea,
     GlForm,
+    GlExperimentBadge,
     DuoChatLoader,
     DuoChatPredefinedPrompts,
     DuoChatConversation,
@@ -111,6 +114,7 @@ export default {
     DuoChatThreads,
     GlCard,
     GlDropdownItem,
+    VueResizable,
   },
   directives: {
     SafeHtml,
@@ -339,6 +343,7 @@ export default {
   },
   data() {
     return {
+      isHidden: false,
       prompt: '',
       scrolledToBottom: true,
       activeCommandIndex: 0,
@@ -456,6 +461,7 @@ export default {
       if (!loading && !this.isStreaming) {
         this.canSubmit = true; // Re-enable submit button when loading stops
       }
+      this.isHidden = false;
     },
     isStreaming(streaming) {
       if (!streaming && !this.isLoading) {
@@ -496,10 +502,14 @@ 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.
        */
@@ -755,221 +765,245 @@ export default {
 };
 </script>
 <template>
-  <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"
+  <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"
   >
-    <duo-chat-header
-      v-if="showHeader"
-      ref="header"
-      :active-thread-id="activeThreadId"
-      :title="isMultithreaded && currentView === 'list' ? $options.i18n.CHAT_HISTORY_TITLE : title"
-      :subtitle="activeThreadTitleForView"
-      :error="error"
-      :is-multithreaded="isMultithreaded"
-      :current-view="currentView"
-      :should-render-resizable="shouldRenderResizable"
-      :badge-type="isMultithreaded ? null : badgeType"
-      :session-id="sessionId"
-      :agents="agents"
-      @go-back="onGoBack"
-      @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"
+    <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-threads
-        v-if="shouldShowThreadList"
-        :threads="threadList"
-        :preferred-locale="preferredLocale"
+      <duo-chat-header
+        v-if="showHeader"
+        ref="header"
+        :active-thread-id="activeThreadId"
+        :title="
+          isMultithreaded && currentView === 'list' ? $options.i18n.CHAT_HISTORY_TITLE : title
+        "
+        :subtitle="activeThreadTitleForView"
+        :error="error"
+        :is-multithreaded="isMultithreaded"
+        :current-view="currentView"
+        :should-render-resizable="shouldRenderResizable"
+        :badge-type="isMultithreaded ? null : badgeType"
+        :session-id="sessionId"
+        :agents="agents"
+        @go-back="onGoBack"
         @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"
       >
-        <duo-chat-conversation
-          v-for="(conversation, index) in conversations"
-          :key="`conversation-${index}`"
-          :enable-code-insertion="enableCodeInsertion"
-          :messages="conversation"
-          :show-delimiter="index > 0"
-          :with-feedback="withFeedback"
-          :is-tool-approval-processing="isToolApprovalProcessing"
-          :working-directory="workingDirectory"
-          @track-feedback="onTrackFeedback"
-          @insert-code-snippet="onInsertCodeSnippet"
-          @copy-code-snippet="onCopyCodeSnippet"
-          @copy-message="onCopyMessage"
-          @get-context-item-content="onGetContextItemContent"
-          @approve-tool="onApproveToolCall"
-          @deny-tool="onDenyToolCall"
-          @open-file-path="onOpenFilePath"
-        />
-        <template v-if="!hasMessages && !isLoading">
-          <div
-            key="empty-state-message"
-            class="duo-chat-message gl-rounded-bl-none 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 #subheader>
+          <slot name="subheader"></slot>
         </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">
-          <!--
+      </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"
+        />
+        <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"
+            :show-delimiter="index > 0"
+            :with-feedback="withFeedback"
+            :is-tool-approval-processing="isToolApprovalProcessing"
+            :working-directory="workingDirectory"
+            @track-feedback="onTrackFeedback"
+            @insert-code-snippet="onInsertCodeSnippet"
+            @copy-code-snippet="onCopyCodeSnippet"
+            @copy-message="onCopyMessage"
+            @get-context-item-content="onGetContextItemContent"
+            @approve-tool="onApproveToolCall"
+            @deny-tool="onDenyToolCall"
+            @open-file-path="onOpenFilePath"
+          />
+          <template v-if="!hasMessages && !isLoading">
+            <div
+              key="empty-state-message"
+              class="duo-chat-message gl-rounded-bl-none 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>
-        </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>
+            <slot
+              name="context-items-menu"
+              :is-open="contextItemsMenuIsOpen"
+              :on-close="closeContextItemsMenuOpen"
+              :set-ref="setContextItemsMenuRef"
+              :focus-prompt="focusChatInput"
+            ></slot>
           </div>
-          <div :data-value="prompt" class="gl-h-[40px] gl-grow">
-            <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-form-textarea
-              ref="prompt"
-              v-model="prompt"
-              :disabled="!canSubmit"
-              data-testid="chat-prompt-input"
-              :placeholder="inputPlaceholder"
-              :character-count-limit="maxPromptLength"
-              :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 },
-              ]"
-              aria-label="Chat prompt input"
-              autofocus
-              @keydown.enter.exact.native.prevent
-              @keydown.ctrl.z.exact="handleUndo"
-              @keydown.meta.z.exact="handleUndo"
-              @keydown.ctrl.shift.z.exact="handleRedo"
-              @keydown.meta.shift.z.exact="handleRedo"
-              @keydown.ctrl.y.exact="handleRedo"
-              @keydown.meta.y.exact="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"
+                <gl-dropdown-item
+                  v-for="(command, index) in filteredSlashCommands"
+                  :key="command.name"
+                  :class="{ 'active-command': index === activeCommandIndex }"
+                  @mouseenter.native="activeCommandIndex = index"
+                  @click="selectSlashCommand(index)"
                 >
-                  {{ 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="canSubmit"
-              icon="paper-airplane"
-              category="primary"
-              variant="confirm"
-              class="gl-bottom-2 gl-right-2 gl-ml-auto !gl-rounded-full"
-              type="submit"
-              :disabled="isPromptEmpty || !hasValidPrompt"
-              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-bottom-2 gl-right-2 !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"
-        :class="{ 'gl-mt-6 sm:gl-mt-3 sm:gl-max-w-1/2': prompt.length >= maxPromptLengthWarning }"
-      >
-        {{ $options.i18n.CHAT_DISCLAMER }}
-      </p>
-    </footer>
-  </div>
+                  <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"
+                :disabled="!canSubmit"
+                data-testid="chat-prompt-input"
+                :placeholder="inputPlaceholder"
+                :character-count-limit="maxPromptLength"
+                :textarea-classes="[
+                  'gl-absolute',
+                  '!gl-h-full',
+                  'gl-rounded-br-none',
+                  'gl-rounded-tr-none',
+                  '!gl-bg-transparent',
+                  '!gl-py-4',
+                  '!gl-shadow-none',
+                  'form-control',
+                  'gl-form-input',
+                  'gl-form-textarea',
+                  { 'gl-truncate': !prompt },
+                ]"
+                aria-label="Chat prompt input"
+                autofocus
+                @keydown.enter.exact.native.prevent
+                @keydown.ctrl.z.exact="handleUndo"
+                @keydown.meta.z.exact="handleUndo"
+                @keydown.ctrl.shift.z.exact="handleRedo"
+                @keydown.meta.shift.z.exact="handleRedo"
+                @keydown.ctrl.y.exact="handleRedo"
+                @keydown.meta.y.exact="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"
+                  >
+                    {{ 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>
+            <template #append>
+              <gl-button
+                v-if="canSubmit"
+                icon="paper-airplane"
+                category="primary"
+                variant="confirm"
+                class="!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-full"
+                type="submit"
+                :disabled="isPromptEmpty || !hasValidPrompt"
+                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>
+        <slot name="footer-controls"></slot>
+        <p
+          class="gl-mb-0 gl-mt-3 gl-px-4 gl-text-sm gl-text-secondary"
+          :class="{ 'gl-mt-6 sm:gl-mt-3 sm:gl-max-w-1/2': prompt.length >= maxPromptLengthWarning }"
+        >
+          {{ $options.i18n.CHAT_DISCLAMER }}
+        </p>
+      </footer>
+    </aside>
+  </component>
 </template>