@gitlab/duo-ui 14.1.1 → 14.3.0

package/src/components/chat/web_duo_chat.vue

@@ -37,9 +37,14 @@ export const i18n = {
     'WebDuoChat.chatDisclamer',
     'Responses may be inaccurate. Verify before use.'
   ),
+  CHAT_EMPTY_STATE_EMOJI: '👋',
   CHAT_EMPTY_STATE_TITLE: translate(
     'WebDuoChat.chatEmptyStateTitle',
-    'I am GitLab Duo Chat, your personal AI-powered assistant. How can I help you today?'
+    'I am GitLab Duo Chat, your personal AI-powered assistant.'
+  ),
+  CHAT_EMPTY_STATE_DESCRIPTION: translate(
+    'WebDuoChat.chatEmptyStateDescription',
+    'How can I help you today?'
   ),
   CHAT_PROMPT_PLACEHOLDER_DEFAULT: translate(
     'WebDuoChat.chatPromptPlaceholderDefault',
@@ -255,7 +260,7 @@ export default {
     emptyStateTitle: {
       type: String,
       required: false,
-      default: i18n.CHAT_EMPTY_STATE_TITLE,
+      default: null,
     },
     /**
      * Override the default chat prompt placeholder text.
@@ -421,6 +426,15 @@ export default {
         this.$scopedSlots['footer-controls']()
       );
     },
+    emptyStateMainText() {
+      if (this.emptyStateTitle) {
+        return this.emptyStateTitle;
+      }
+      return i18n.CHAT_EMPTY_STATE_TITLE;
+    },
+    emptyStateSubText() {
+      return i18n.CHAT_EMPTY_STATE_DESCRIPTION;
+    },
   },
   watch: {
     multiThreadedView(newView) {
@@ -786,15 +800,22 @@ export default {
         <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"
+            class="duo-chat-message gl-rounded-bl-none gl-leading-20 gl-text-default gl-break-anywhere"
             data-testid="gl-duo-chat-empty-state"
           >
-            <template v-if="emptyStateTitle">
-              <div class="gl-heading-display">👋</div>
-              <p data-testid="gl-duo-chat-empty-state-title" class="gl-m-0">
-                {{ emptyStateTitle }}
+            <div
+              class="gl-mb-[3.75rem] gl-flex gl-flex-col gl-items-center gl-justify-center gl-gap-3 gl-text-center"
+            >
+              <h1 class="gl-my-0 gl-text-[3.5rem]" data-testid="gl-duo-chat-empty-state-emoji">
+                {{ $options.i18n.CHAT_EMPTY_STATE_EMOJI }}
+              </h1>
+              <h2 class="gl-my-0 gl-text-size-h2" data-testid="gl-duo-chat-empty-state-title">
+                {{ emptyStateMainText }}
+              </h2>
+              <p class="gl-text-base gl-text-subtle" data-testid="gl-duo-chat-empty-state-subtitle">
+                {{ emptyStateSubText }}
               </p>
-            </template>
+            </div>
             <duo-chat-predefined-prompts
               key="predefined-prompts"
               :prompts="predefinedPrompts"

package/translations.js

@@ -160,6 +160,7 @@ export default {
   'MessageToolApproval.toolStatusPending': 'Pending',
   'MessageToolApproval.toolUnknown': 'Unknown',
   No: 'No',
+  'PreBlock.COPY_TO_CLIPBOARD_TEXT': 'Copy to clipboard',
   'RunCommandToolParams.ACCORDION_TITLE': 'Expand command output',
   'WebAgenticDuoChat.agenticChatEmptyStateGreeting': 'Hello, I’m %{agentName}!',
   'WebAgenticDuoChat.chatCancelLabel': 'Cancel',
@@ -172,7 +173,7 @@ export default {
   'WebAgenticDuoChat.chatDisclamer': 'Responses may be inaccurate. Verify before use.',
   'WebAgenticDuoChat.chatEmptyStateDescription': 'How can I help you today?',
   'WebAgenticDuoChat.chatEmptyStateTitle':
-    'I am GitLab Duo Agentic Chat, your personal AI-powered assistant. How can I help you today?',
+    'I am GitLab Duo Agentic Chat, your personal AI-powered assistant.',
   'WebAgenticDuoChat.chatHistoryTitle': 'Chat history',
   'WebAgenticDuoChat.chatModelPlaceholder': 'GitLab Duo Agentic Chat',
   'WebAgenticDuoChat.chatPromptPlaceholderDefault': "Let's work through this together...",
@@ -189,8 +190,8 @@ export default {
   'WebDuoChat.chatDefaultTitle': 'GitLab Duo Chat',
   'WebDuoChat.chatDisclamer': 'Responses may be inaccurate. Verify before use.',
   'WebDuoChat.chatDropdownMoreOptions': 'More options',
-  'WebDuoChat.chatEmptyStateTitle':
-    'I am GitLab Duo Chat, your personal AI-powered assistant. How can I help you today?',
+  'WebDuoChat.chatEmptyStateDescription': 'How can I help you today?',
+  'WebDuoChat.chatEmptyStateTitle': 'I am GitLab Duo Chat, your personal AI-powered assistant.',
   'WebDuoChat.chatHistoryTitle': 'Chat history',
   'WebDuoChat.chatModelPlaceholder': 'GitLab Duo Chat',
   'WebDuoChat.chatNewLabel': 'New chat',