@gitlab/duo-ui 10.20.0 → 10.22.0

package/src/components/agentic_chat/agentic_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';
 
@@ -38,7 +34,7 @@ export const i18n = {
   CHAT_HISTORY_TITLE: translate('AgenticDuoChat.chatHistoryTitle', 'Chat history'),
   CHAT_DISCLAMER: translate(
     'AgenticDuoChat.chatDisclamer',
-    'Chat can autonomously change code. Responses and changes can be inaccurate. Review carefully.'
+    'Responses may be inaccurate. Verify before use.'
   ),
   CHAT_EMPTY_STATE_TITLE: translate(
     'AgenticDuoChat.chatEmptyStateTitle',
@@ -46,6 +42,10 @@ 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,11 +102,8 @@ export default {
   name: 'DuoChat',
   components: {
     GlButton,
-    GlAlert,
-    GlFormInputGroup,
     GlFormTextarea,
     GlForm,
-    GlExperimentBadge,
     DuoChatLoader,
     DuoChatPredefinedPrompts,
     DuoChatConversation,
@@ -114,7 +111,6 @@ export default {
     DuoChatThreads,
     GlCard,
     GlDropdownItem,
-    VueResizable,
   },
   directives: {
     SafeHtml,
@@ -343,7 +339,6 @@ export default {
   },
   data() {
     return {
-      isHidden: false,
       prompt: '',
       scrolledToBottom: true,
       activeCommandIndex: 0,
@@ -461,7 +456,6 @@ 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) {
@@ -502,14 +496,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.
        */
@@ -765,245 +755,221 @@ export default {
 };
 </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"
+      :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"
     >
-      <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"
+      <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"
+          :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"
         />
-        <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">
-            <!--
+        <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>
+          <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 :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-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"
+              :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"
                 >
-                  <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>
+                  {{ 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>
 </template>

package/src/components/chat/components/duo_chat_header/duo_chat_header.vue

@@ -3,10 +3,10 @@ import Vue from 'vue';
 import {
   GlAlert,
   GlBadge,
+  GlAvatar,
   GlButton,
   GlDropdown,
   GlDropdownItem,
-  GlExperimentBadge,
   GlSafeHtmlDirective as SafeHtml,
   GlTooltipDirective,
   GlToast,
@@ -43,10 +43,10 @@ export default {
   components: {
     GlAlert,
     GlBadge,
+    GlAvatar,
     GlButton,
     GlDropdown,
     GlDropdownItem,
-    GlExperimentBadge,
     GlDisclosureDropdown,
   },
   directives: {
@@ -140,19 +140,31 @@ export default {
 
 <template>
   <header data-testid="chat-header" class="gl-border-b gl-shrink-0 gl-bg-default gl-p-0">
+    <div class="gl-border-b gl-flex gl-w-full gl-items-center gl-px-5 gl-py-3">
+      <h4
+        v-if="subtitle"
+        class="gl-mb-0 gl-shrink-0 gl-overflow-hidden gl-text-ellipsis gl-whitespace-nowrap gl-pr-3 gl-text-sm gl-font-normal gl-text-subtle"
+        data-testid="chat-subtitle"
+      >
+        {{ subtitle }}
+      </h4>
+      <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="$emit('close')"
+      />
+    </div>
     <div class="drawer-title gl-flex gl-items-center gl-justify-start gl-p-5">
-      <div class="gl-flex-1 gl-overflow-hidden">
+      <div class="gl-flex gl-flex-1 gl-overflow-hidden">
+        <gl-avatar :size="32" :entity-name="title" shape="circle" class="gl-mr-3" />
         <div class="gl-flex gl-items-center">
-          <h3 class="gl-my-0 gl-text-size-h2">{{ title }}</h3>
-          <gl-experiment-badge v-if="badgeType" :type="badgeType" container-id="chat-component" />
+          <h3 class="gl-my-0 gl-text-[0.875rem]">{{ title }}</h3>
         </div>
-        <h4
-          v-if="subtitle"
-          class="gl-mb-0 gl-overflow-hidden gl-text-ellipsis gl-whitespace-nowrap gl-pr-3 gl-text-sm gl-font-normal gl-text-subtle"
-          data-testid="chat-subtitle"
-        >
-          {{ subtitle }}
-        </h4>
       </div>
 
       <div class="gl-flex gl-gap-3">
@@ -242,16 +254,6 @@ export default {
             </span>
           </gl-dropdown-item>
         </gl-dropdown>
-        <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="$emit('close')"
-        />
       </div>
     </div>