@gitlab/duo-ui 10.23.0 → 11.0.0

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,31 +140,19 @@ 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 gl-flex-1 gl-overflow-hidden">
-        <gl-avatar :size="32" :entity-name="title" shape="circle" class="gl-mr-3" />
+      <div class="gl-flex-1 gl-overflow-hidden">
         <div class="gl-flex gl-items-center">
-          <h3 class="gl-my-0 gl-text-[0.875rem]">{{ title }}</h3>
+          <h3 class="gl-my-0 gl-text-size-h2">{{ title }}</h3>
+          <gl-experiment-badge v-if="badgeType" :type="badgeType" container-id="chat-component" />
         </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">
@@ -254,6 +242,16 @@ 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>
 

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

@@ -0,0 +1,274 @@
+<script>
+import Vue from 'vue';
+import {
+  GlAlert,
+  GlBadge,
+  GlAvatar,
+  GlButton,
+  GlDropdown,
+  GlDropdownItem,
+  GlSafeHtmlDirective as SafeHtml,
+  GlTooltipDirective,
+  GlToast,
+  GlDisclosureDropdown,
+} from '@gitlab/ui';
+import { translate } from '../../../../utils/i18n';
+import { VIEW_TYPES } from './constants';
+
+export const i18n = {
+  CHAT_BACK_LABEL: translate('WebDuoChat.chatBackLabel', 'Back to history'),
+  CHAT_CLOSE_LABEL: translate('WebDuoChat.closeChatHeaderLabel', 'Close chat'),
+  CHAT_NEW_LABEL: translate('WebDuoChat.chatNewLabel', 'New chat'),
+  CHAT_NEW_TOOLTIP: translate('WebDuoChat.chatNewToolTip', 'New chat'),
+  CHAT_HISTORY_TOOLTIP: translate('WebDuoChat.chatHistoryToolTip', 'Chat history'),
+  CHAT_BACK_TO_CHAT_TOOLTIP: translate('WebDuoChat.chatBackToChatToolTip', 'Back to chat'),
+  CHAT_TITLE: translate('WebDuoChat.chatTitle', 'GitLab Duo Chat'),
+  CHAT_DROPDOWN_MORE_OPTIONS: translate('WebDuoChat.chatDropdownMoreOptions', 'More options'),
+  CHAT_COPY_TOOLTIP: translate('WebDuoChat.copySessionIdTooltip', 'Copy session ID'),
+  CHAT_COPY_SUCCESS_TOAST: translate(
+    'WebDuoChat.copySessionIdSuccessToast',
+    'Session ID copied to clipboard'
+  ),
+  CHAT_COPY_FAILED_TOAST: translate(
+    'WebDuoChat.copySessionIdFailedToast',
+    'Could not copy session ID'
+  ),
+};
+
+Vue.use(GlToast);
+
+export default {
+  name: 'DuoChatHeader',
+
+  components: {
+    GlAlert,
+    GlBadge,
+    GlAvatar,
+    GlButton,
+    GlDropdown,
+    GlDropdownItem,
+    GlDisclosureDropdown,
+  },
+  directives: {
+    SafeHtml,
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: i18n.CHAT_TITLE,
+    },
+    subtitle: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    sessionId: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    error: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    isMultithreaded: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    shouldRenderResizable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    activeThreadId: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    badgeType: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    currentView: {
+      type: String,
+      required: true,
+    },
+    agents: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  computed: {
+    VIEW_TYPES() {
+      return VIEW_TYPES;
+    },
+    hasManyAgents() {
+      return this.agents.length > 1;
+    },
+    hasAgents() {
+      return this.agents.length > 0;
+    },
+  },
+  methods: {
+    startNewChat(agent) {
+      if (agent) {
+        this.$emit('new-chat', agent);
+      } else if (this.hasAgents) {
+        this.$emit('new-chat', this.agents[0]);
+      } else {
+        this.$emit('new-chat');
+      }
+    },
+    async copySessionIdToClipboard() {
+      try {
+        await navigator.clipboard.writeText(this.sessionId);
+        this.$toast.show('Session ID copied to clipboard');
+      } catch {
+        this.$toast.show('Could not copy session ID');
+      }
+    },
+  },
+  i18n,
+};
+</script>
+
+<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 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-[0.875rem]">{{ title }}</h3>
+        </div>
+      </div>
+
+      <div class="gl-flex gl-gap-3">
+        <template
+          v-if="
+            isMultithreaded && (activeThreadId || currentView === VIEW_TYPES.LIST || hasManyAgents)
+          "
+        >
+          <gl-disclosure-dropdown
+            v-if="hasManyAgents"
+            :title="$options.i18n.CHAT_NEW_TOOLTIP"
+            :toggle-text="$options.i18n.CHAT_NEW_TOOLTIP"
+            :items="agents"
+            data-testid="chat-new-button"
+            variant="confirm"
+            category="tertiary"
+            size="small"
+            icon="duo-chat-new"
+            text-sr-only
+            :aria-label="$options.i18n.CHAT_NEW_LABEL"
+            no-caret
+            @action="startNewChat"
+          >
+            <template #list-item="{ item }">
+              <span class="gl-flex gl-flex-col">
+                <span clas="gl-block">{{ item.name }}</span>
+                <span class="gl-overflow-hidden gl-text-ellipsis gl-whitespace-nowrap gl-text-sm">{{
+                  item.description
+                }}</span>
+              </span>
+            </template>
+          </gl-disclosure-dropdown>
+          <gl-button
+            v-else
+            v-gl-tooltip
+            :title="$options.i18n.CHAT_NEW_TOOLTIP"
+            data-testid="chat-new-button"
+            variant="confirm"
+            category="tertiary"
+            size="small"
+            icon="duo-chat-new"
+            :aria-label="$options.i18n.CHAT_NEW_LABEL"
+            @click="startNewChat"
+          />
+        </template>
+        <gl-button
+          v-if="isMultithreaded && currentView === VIEW_TYPES.CHAT"
+          v-gl-tooltip
+          :title="$options.i18n.CHAT_HISTORY_TOOLTIP"
+          data-testid="go-back-to-list-button"
+          category="tertiary"
+          size="small"
+          icon="history"
+          :aria-label="$options.i18n.CHAT_BACK_LABEL"
+          @click="$emit('go-back')"
+        />
+        <gl-button
+          v-if="isMultithreaded && activeThreadId && currentView === VIEW_TYPES.LIST"
+          v-gl-tooltip
+          :title="$options.i18n.CHAT_BACK_TO_CHAT_TOOLTIP"
+          data-testid="go-back-to-chat-button"
+          category="tertiary"
+          size="small"
+          icon="go-back"
+          :aria-label="$options.i18n.CHAT_BACK_TO_CHAT_TOOLTIP"
+          @click="$emit('go-back-to-chat')"
+        />
+        <gl-dropdown
+          v-if="sessionId"
+          v-gl-tooltip.hover
+          icon="ellipsis_v"
+          category="tertiary"
+          text-sr-only
+          size="small"
+          :text="$options.i18n.CHAT_DROPDOWN_MORE_OPTIONS"
+          :title="$options.i18n.CHAT_DROPDOWN_MORE_OPTIONS"
+          no-caret
+        >
+          <gl-dropdown-item @click="copySessionIdToClipboard()">
+            <span class="gl-flex gl-items-center gl-gap-2">
+              <span class="gl-flex-shrink-0">{{ $options.i18n.CHAT_COPY_TOOLTIP }}</span>
+              <gl-badge class="gl-flex-shrink">
+                <span class="gl-max-w-12 gl-truncate" :title="sessionId">
+                  {{ sessionId }}
+                </span>
+              </gl-badge>
+            </span>
+          </gl-dropdown-item>
+        </gl-dropdown>
+      </div>
+    </div>
+
+    <slot name="subheader"></slot>
+
+    <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>
+</template>

package/src/components/chat/duo_chat.scss

@@ -141,6 +141,7 @@ $drawer-width: 400px;
   overflow: hidden;
   background: var(--gl-control-background-color-default);
   box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-default);
+  border-radius: px-to-rem(20px);
 
   &:focus-within {
     @include gl-focus($color: var(--gl-control-border-color-focus));
@@ -151,6 +152,7 @@ $drawer-width: 400px;
     resize: none;
     max-height: 240px;
     padding-right: 40px;
+    border-radius: px-to-rem(20px);
   }
 
   &::after {
@@ -158,7 +160,6 @@ $drawer-width: 400px;
     @apply gl-invisible;
     @apply gl-p-4;
     @apply gl-font-regular;
-    @apply gl-absolute;
     padding-right: 40px;
     word-break: break-word;
   }