@gitlab/ui 91.2.0 → 91.4.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# [91.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v91.3.0...v91.4.0) (2024-09-02)
+
+
+### Features
+
+* **GlAlert:** Replace english text with translation ([38582dd](https://gitlab.com/gitlab-org/gitlab-ui/commit/38582dddee70e6bf2b19945b5f20953359f5bc7a))
+* **GlBanner:** Replace english text with translation ([a8ad872](https://gitlab.com/gitlab-org/gitlab-ui/commit/a8ad872011660d2973c9008e63b314355032e632))
+* **GlBroadcastMessage:** Replace english text with translation ([6cf3e7c](https://gitlab.com/gitlab-org/gitlab-ui/commit/6cf3e7cfe272c1eb48c61d0d79dec9245a825d75))
+* **GlModal:** Replace english text with translation ([2498b0e](https://gitlab.com/gitlab-org/gitlab-ui/commit/2498b0e38f74d2af7efae62b3686ff189b056932))
+* **GlToken:** Add property 'removeLabel' ([87b81a6](https://gitlab.com/gitlab-org/gitlab-ui/commit/87b81a6f0838e8a644af20558a65b02d5b99e25e))
+
+# [91.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v91.2.0...v91.3.0) (2024-08-30)
+
+
+### Features
+
+* **GlDuoChat:** Change empty state ([87d3384](https://gitlab.com/gitlab-org/gitlab-ui/commit/87d3384045da79aff0676bbe282626615f776b5f))
+
 # [91.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v91.1.2...v91.2.0) (2024-08-30)
 
 

package/dist/components/base/alert/alert.js

@@ -1,3 +1,4 @@
+import { translate } from '../../../utils/i18n';
 import { alertVariantOptions, alertVariantIconMap, buttonCategoryOptions } from '../../../utils/constants';
 import CloseButton from '../../shared_components/close_button/close_button';
 import GlButton from '../button/button';
@@ -35,12 +36,12 @@ var script = {
       default: true
     },
     /**
-     * Dismiss button's aria-label.
+     * The close button's label, it is used for the button's aria-label attribute.
      */
     dismissLabel: {
       type: String,
       required: false,
-      default: 'Dismiss'
+      default: () => translate('GlAlert.closeButtonTitle', 'Dismiss')
     },
     variant: {
       type: String,

package/dist/components/base/banner/banner.js

@@ -1,4 +1,5 @@
 import { bannerVariants } from '../../../utils/constants';
+import { translate } from '../../../utils/i18n';
 import CloseButton from '../../shared_components/close_button/close_button';
 import GlButton from '../button/button';
 import GlCard from '../card/card';
@@ -62,12 +63,12 @@ var script = {
       }
     },
     /**
-     * Dismiss button's aria-label.
+     * The close button's label, it is used for the button's aria-label attribute.
      */
     dismissLabel: {
       type: String,
       required: false,
-      default: 'Dismiss'
+      default: () => translate('GlBanner.closeButtonTitle', 'Dismiss')
     }
   },
   computed: {

package/dist/components/base/broadcast_message/broadcast_message.js

@@ -1,4 +1,5 @@
 import { colorThemes } from '../../../utils/constants';
+import { translate } from '../../../utils/i18n';
 import CloseButton from '../../shared_components/close_button/close_button';
 import GlIcon from '../icon/icon';
 import { TYPE_BANNER, TYPE_LIST, TYPE_NOTIFICATION } from './constants';
@@ -28,12 +29,12 @@ var script = {
       default: true
     },
     /**
-     * The dismiss button's label, it is visible in mobile viewports and used for the button's aria-label attribute.
+     * The dismiss button's label, it is used for the button's aria-label attribute.
      */
     dismissLabel: {
       type: String,
       required: false,
-      default: 'Dismiss'
+      default: () => translate('GlBroadcastMessage.closeButtonTitle', 'Dismiss')
     },
     /**
      * The theme's name to use, this should correspond to the user's selected theme in GitLab.

package/dist/components/base/modal/modal.js

@@ -1,4 +1,5 @@
 import { BModal } from '../../../vendor/bootstrap-vue/src/components/modal/modal';
+import { translate } from '../../../utils/i18n';
 import { modalSizeOptions, modalButtonDefaults, focusableTags, COMMA } from '../../../utils/constants';
 import { logWarning, focusFirstFocusableElement } from '../../../utils/utils';
 import CloseButton from '../../shared_components/close_button/close_button';
@@ -65,10 +66,13 @@ var script = {
       default: modalSizeOptions.md,
       validator: val => Object.keys(modalSizeOptions).includes(val)
     },
+    /**
+     * The close button's label, it is used for the button's aria-label attribute.
+     */
     dismissLabel: {
       type: String,
       required: false,
-      default: 'Close'
+      default: () => translate('GlModal.closeButtonTitle', 'Close')
     },
     visible: {
       type: Boolean,

package/dist/components/base/token/token.js

@@ -1,4 +1,5 @@
 import { tokenVariants } from '../../../utils/constants';
+import { translate } from '../../../utils/i18n';
 import CloseButton from '../../shared_components/close_button/close_button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -22,6 +23,14 @@ var script = {
       required: false,
       default: 'default',
       validator: variant => tokenVariants.includes(variant)
+    },
+    /**
+     * The close button's label, it is used for the button's aria-label attribute.
+     */
+    removeLabel: {
+      type: String,
+      required: false,
+      default: () => translate('GlToken.closeButtonTitle', 'Remove')
     }
   },
   computed: {
@@ -50,7 +59,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',_vm._g({class:['gl-token', _vm.variantClass, _vm.viewOnlyClass]},_vm.$listeners),[_c('span',{staticClass:"gl-token-content"},[_vm._t("default"),_vm._v(" "),(!_vm.viewOnly)?_c('close-button',{staticClass:"gl-token-close gl-close-btn-color-inherit",on:{"click":_vm.close}}):_vm._e()],2)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',_vm._g({class:['gl-token', _vm.variantClass, _vm.viewOnlyClass]},_vm.$listeners),[_c('span',{staticClass:"gl-token-content"},[_vm._t("default"),_vm._v(" "),(!_vm.viewOnly)?_c('close-button',{staticClass:"gl-token-close gl-close-btn-color-inherit",attrs:{"label":_vm.removeLabel},on:{"click":_vm.close}}):_vm._e()],2)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/experimental/duo/chat/duo_chat.js

@@ -22,7 +22,8 @@ const i18n = {
   CHAT_CLOSE_LABEL: 'Close the Code Explanation',
   CHAT_LEGAL_GENERATED_BY_AI: 'Responses generated by AI',
   CHAT_EMPTY_STATE_TITLE: 'Ask a question',
-  CHAT_EMPTY_STATE_DESC: 'AI generated explanations will appear here.',
+  CHAT_EMPTY_STATE_DESC: 'GitLab Duo Chat is your AI-powered assistant.',
+  CHAT_EMPTY_STATE_SECONDARY_DESC: 'Responses may be inaccurate. Verify before use.',
   CHAT_PROMPT_PLACEHOLDER_DEFAULT: 'GitLab Duo Chat',
   CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: 'Type "/" for slash commands',
   CHAT_SUBMIT_LABEL: 'Send chat message.',
@@ -180,6 +181,14 @@ var script = {
       required: false,
       default: i18n.CHAT_EMPTY_STATE_DESC
     },
+    /**
+     * Override the default empty state description secondary text.
+     */
+    emptyStateSecondaryDescription: {
+      type: String,
+      required: false,
+      default: i18n.CHAT_EMPTY_STATE_SECONDARY_DESC
+    },
     /**
      * Override the default chat prompt placeholder text.
      */
@@ -425,7 +434,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
         {
           'gl-h-full': !_vm.hasMessages,
           'force-scroll-bar': _vm.hasMessages,
-        } ],attrs:{"tag":"section","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('gl-duo-chat-conversation',{key:("conversation-" + index),attrs:{"enable-code-insertion":_vm.enableCodeInsertion,"messages":conversation,"canceled-request-ids":_vm.canceledRequestIds,"show-delimiter":index > 0},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('gl-empty-state',{key:"empty-state",staticClass:"gl-flex-grow gl-justify-center",attrs:{"svg-path":_vm.$options.emptySvg,"svg-height":145,"title":_vm.emptyStateTitle,"description":_vm.emptyStateDescription}}),_vm._v(" "),_c('gl-duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})]:_vm._e(),_vm._v(" "),(_vm.isLoading)?_c('gl-duo-chat-loader',{key:"loader",attrs:{"tool-name":_vm.toolName}}):_vm._e(),_vm._v(" "),_c('div',{key:"anchor",ref:"anchor",staticClass:"scroll-anchor"})],2)],1),_vm._v(" "),(_vm.isChatAvailable)?_c('footer',{staticClass:"duo-chat-drawer-footer duo-chat-drawer-footer-sticky gl-border-t gl-bg-gray-10 gl-p-5",class:{ 'duo-chat-drawer-body-scrim-on-footer': !_vm.scrolledToBottom },attrs:{"data-testid":"chat-footer"}},[_c('gl-form',{attrs:{"data-testid":"chat-prompt-form"},on:{"submit":function($event){$event.stopPropagation();$event.preventDefault();return _vm.sendChatPrompt.apply(null, arguments)}}},[_c('gl-form-input-group',{scopedSlots:_vm._u([{key:"append",fn:function(){return [(_vm.displaySubmitButton)?_c('gl-button',{staticClass:"!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-base",attrs:{"icon":"paper-airplane","category":"primary","variant":"confirm","type":"submit","data-testid":"chat-prompt-submit-button","aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL}}):_c('gl-button',{staticClass:"!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-base",attrs:{"icon":"stop","category":"primary","variant":"default","data-testid":"chat-prompt-cancel-button","aria-label":_vm.$options.i18n.CHAT_CANCEL_LABEL},on:{"click":_vm.cancelPrompt}})]},proxy:true}],null,false,677611116)},[_c('div',{staticClass:"duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-rounded-base gl-bg-white gl-align-top gl-shadow-inner-1-gray-400",attrs:{"data-value":_vm.prompt}},[(_vm.shouldShowSlashCommands)?_c('gl-card',{ref:"commands",staticClass:"slash-commands !gl-absolute gl-w-full -gl-translate-y-full gl-list-none gl-pl-0 gl-shadow-md",attrs:{"body-class":"!gl-p-2"}},_vm._l((_vm.filteredSlashCommands),function(command,index){return _c('gl-dropdown-item',{key:command.name,class:{ 'active-command': index === _vm.activeCommandIndex },on:{"click":function($event){return _vm.selectSlashCommand(index)}},nativeOn:{"mouseenter":function($event){_vm.activeCommandIndex = index;}}},[_c('span',{staticClass:"gl-flex gl-justify-between"},[_c('span',{staticClass:"gl-block"},[_vm._v(_vm._s(command.name))]),_vm._v(" "),_c('small',{staticClass:"gl-pl-3 gl-text-right gl-italic gl-text-gray-500"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",staticClass:"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': !_vm.prompt },attrs:{"data-testid":"chat-prompt-input","placeholder":_vm.inputPlaceholder,"autofocus":""},on:{"compositionend":_vm.compositionEnd},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }$event.preventDefault();},"keyup":function($event){return _vm.onInputKeyup.apply(null, arguments)}},model:{value:(_vm.prompt),callback:function ($$v) {_vm.prompt=$$v;},expression:"prompt"}})],1)]),_vm._v(" "),_c('p',{staticClass:"gl-mb-0 gl-mt-3 gl-text-sm gl-leading-20 gl-text-subtle",attrs:{"data-testid":"chat-legal-disclaimer"}},[_vm._v("\n        "+_vm._s(_vm.$options.i18n.CHAT_LEGAL_DISCLAIMER)+"\n      ")])],1)],1):_vm._e()]):_vm._e()};
+        } ],attrs:{"tag":"section","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('gl-duo-chat-conversation',{key:("conversation-" + index),attrs:{"enable-code-insertion":_vm.enableCodeInsertion,"messages":conversation,"canceled-request-ids":_vm.canceledRequestIds,"show-delimiter":index > 0},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('gl-empty-state',{key:"empty-state",staticClass:"gl-flex-grow gl-justify-center",attrs:{"svg-path":_vm.$options.emptySvg,"svg-height":145,"title":_vm.emptyStateTitle},scopedSlots:_vm._u([{key:"description",fn:function(){return [_c('p',{staticClass:"gl-mb-3",attrs:{"data-testid":"gl-duo-chat-empty-state-description"}},[_vm._v("\n              "+_vm._s(_vm.emptyStateDescription)+"\n            ")]),_vm._v(" "),_c('p',{staticClass:"gl-mt-3 gl-text-sm gl-text-subtle",attrs:{"data-testid":"gl-duo-chat-empty-state-secondary-description"}},[_vm._v("\n              "+_vm._s(_vm.emptyStateSecondaryDescription)+"\n            ")])]},proxy:true}],null,false,460840487)}),_vm._v(" "),_c('gl-duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})]:_vm._e(),_vm._v(" "),(_vm.isLoading)?_c('gl-duo-chat-loader',{key:"loader",attrs:{"tool-name":_vm.toolName}}):_vm._e(),_vm._v(" "),_c('div',{key:"anchor",ref:"anchor",staticClass:"scroll-anchor"})],2)],1),_vm._v(" "),(_vm.isChatAvailable)?_c('footer',{staticClass:"duo-chat-drawer-footer duo-chat-drawer-footer-sticky gl-border-t gl-bg-gray-10 gl-p-5",class:{ 'duo-chat-drawer-body-scrim-on-footer': !_vm.scrolledToBottom },attrs:{"data-testid":"chat-footer"}},[_c('gl-form',{attrs:{"data-testid":"chat-prompt-form"},on:{"submit":function($event){$event.stopPropagation();$event.preventDefault();return _vm.sendChatPrompt.apply(null, arguments)}}},[_c('gl-form-input-group',{scopedSlots:_vm._u([{key:"append",fn:function(){return [(_vm.displaySubmitButton)?_c('gl-button',{staticClass:"!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-base",attrs:{"icon":"paper-airplane","category":"primary","variant":"confirm","type":"submit","data-testid":"chat-prompt-submit-button","aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL}}):_c('gl-button',{staticClass:"!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-base",attrs:{"icon":"stop","category":"primary","variant":"default","data-testid":"chat-prompt-cancel-button","aria-label":_vm.$options.i18n.CHAT_CANCEL_LABEL},on:{"click":_vm.cancelPrompt}})]},proxy:true}],null,false,677611116)},[_c('div',{staticClass:"duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-rounded-base gl-bg-white gl-align-top gl-shadow-inner-1-gray-400",attrs:{"data-value":_vm.prompt}},[(_vm.shouldShowSlashCommands)?_c('gl-card',{ref:"commands",staticClass:"slash-commands !gl-absolute gl-w-full -gl-translate-y-full gl-list-none gl-pl-0 gl-shadow-md",attrs:{"body-class":"!gl-p-2"}},_vm._l((_vm.filteredSlashCommands),function(command,index){return _c('gl-dropdown-item',{key:command.name,class:{ 'active-command': index === _vm.activeCommandIndex },on:{"click":function($event){return _vm.selectSlashCommand(index)}},nativeOn:{"mouseenter":function($event){_vm.activeCommandIndex = index;}}},[_c('span',{staticClass:"gl-flex gl-justify-between"},[_c('span',{staticClass:"gl-block"},[_vm._v(_vm._s(command.name))]),_vm._v(" "),_c('small',{staticClass:"gl-pl-3 gl-text-right gl-italic gl-text-gray-500"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",staticClass:"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': !_vm.prompt },attrs:{"data-testid":"chat-prompt-input","placeholder":_vm.inputPlaceholder,"autofocus":""},on:{"compositionend":_vm.compositionEnd},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }$event.preventDefault();},"keyup":function($event){return _vm.onInputKeyup.apply(null, arguments)}},model:{value:(_vm.prompt),callback:function ($$v) {_vm.prompt=$$v;},expression:"prompt"}})],1)]),_vm._v(" "),_c('p',{staticClass:"gl-mb-0 gl-mt-3 gl-text-sm gl-leading-20 gl-text-subtle",attrs:{"data-testid":"chat-legal-disclaimer"}},[_vm._v("\n        "+_vm._s(_vm.$options.i18n.CHAT_LEGAL_DISCLAIMER)+"\n      ")])],1)],1):_vm._e()]):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/shared_components/close_button/close_button.js

@@ -1,3 +1,4 @@
+import { translate } from '../../../utils/i18n';
 import GlButton from '../../base/button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -10,7 +11,7 @@ var script = {
     label: {
       type: String,
       required: false,
-      default: 'Close'
+      default: () => translate('CloseButton.title', 'Close')
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "91.2.0",
+  "version": "91.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/alert/alert.vue

@@ -1,5 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
+import { translate } from '../../../utils/i18n';
 import {
   alertVariantOptions,
   alertVariantIconMap,
@@ -39,12 +40,12 @@ export default {
       default: true,
     },
     /**
-     * Dismiss button's aria-label.
+     * The close button's label, it is used for the button's aria-label attribute.
      */
     dismissLabel: {
       type: String,
       required: false,
-      default: 'Dismiss',
+      default: () => translate('GlAlert.closeButtonTitle', 'Dismiss'),
     },
     variant: {
       type: String,

package/src/components/base/banner/banner.vue

@@ -1,5 +1,6 @@
 <script>
 import { bannerVariants } from '../../../utils/constants';
+import { translate } from '../../../utils/i18n';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
 import GlButton from '../button/button.vue';
 import GlCard from '../card/card.vue';
@@ -62,12 +63,12 @@ export default {
       },
     },
     /**
-     * Dismiss button's aria-label.
+     * The close button's label, it is used for the button's aria-label attribute.
      */
     dismissLabel: {
       type: String,
       required: false,
-      default: 'Dismiss',
+      default: () => translate('GlBanner.closeButtonTitle', 'Dismiss'),
     },
   },
   computed: {

package/src/components/base/broadcast_message/broadcast_message.vue

@@ -1,5 +1,6 @@
 <script>
 import { colorThemes } from '../../../utils/constants';
+import { translate } from '../../../utils/i18n';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
 import GlIcon from '../icon/icon.vue';
 import { TYPE_BANNER, TYPE_NOTIFICATION, TYPE_LIST } from './constants';
@@ -28,12 +29,12 @@ export default {
       default: true,
     },
     /**
-     * The dismiss button's label, it is visible in mobile viewports and used for the button's aria-label attribute.
+     * The dismiss button's label, it is used for the button's aria-label attribute.
      */
     dismissLabel: {
       type: String,
       required: false,
-      default: 'Dismiss',
+      default: () => translate('GlBroadcastMessage.closeButtonTitle', 'Dismiss'),
     },
     /**
      * The theme's name to use, this should correspond to the user's selected theme in GitLab.

package/src/components/base/modal/modal.vue

@@ -1,6 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BModal } from '../../../vendor/bootstrap-vue/src/components/modal/modal';
+import { translate } from '../../../utils/i18n';
 import {
   COMMA,
   focusableTags,
@@ -71,10 +72,13 @@ export default {
       default: modalSizeOptions.md,
       validator: (val) => Object.keys(modalSizeOptions).includes(val),
     },
+    /**
+     * The close button's label, it is used for the button's aria-label attribute.
+     */
     dismissLabel: {
       type: String,
       required: false,
-      default: 'Close',
+      default: () => translate('GlModal.closeButtonTitle', 'Close'),
     },
     visible: {
       type: Boolean,

package/src/components/base/token/token.vue

@@ -1,6 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { tokenVariants } from '../../../utils/constants';
+import { translate } from '../../../utils/i18n';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
 
 export default {
@@ -23,6 +24,14 @@ export default {
       default: 'default',
       validator: (variant) => tokenVariants.includes(variant),
     },
+    /**
+     * The close button's label, it is used for the button's aria-label attribute.
+     */
+    removeLabel: {
+      type: String,
+      required: false,
+      default: () => translate('GlToken.closeButtonTitle', 'Remove'),
+    },
   },
   computed: {
     variantClass() {
@@ -54,6 +63,7 @@ export default {
       <close-button
         v-if="!viewOnly"
         class="gl-token-close gl-close-btn-color-inherit"
+        :label="removeLabel"
         @click="close"
       />
     </span>

package/src/components/experimental/duo/chat/duo_chat.vue

@@ -22,7 +22,8 @@ export const i18n = {
   CHAT_CLOSE_LABEL: 'Close the Code Explanation',
   CHAT_LEGAL_GENERATED_BY_AI: 'Responses generated by AI',
   CHAT_EMPTY_STATE_TITLE: 'Ask a question',
-  CHAT_EMPTY_STATE_DESC: 'AI generated explanations will appear here.',
+  CHAT_EMPTY_STATE_DESC: 'GitLab Duo Chat is your AI-powered assistant.',
+  CHAT_EMPTY_STATE_SECONDARY_DESC: 'Responses may be inaccurate. Verify before use.',
   CHAT_PROMPT_PLACEHOLDER_DEFAULT: 'GitLab Duo Chat',
   CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: 'Type "/" for slash commands',
   CHAT_SUBMIT_LABEL: 'Send chat message.',
@@ -188,6 +189,14 @@ export default {
       required: false,
       default: i18n.CHAT_EMPTY_STATE_DESC,
     },
+    /**
+     * Override the default empty state description secondary text.
+     */
+    emptyStateSecondaryDescription: {
+      type: String,
+      required: false,
+      default: i18n.CHAT_EMPTY_STATE_SECONDARY_DESC,
+    },
     /**
      * Override the default chat prompt placeholder text.
      */
@@ -517,9 +526,20 @@ export default {
             :svg-path="$options.emptySvg"
             :svg-height="145"
             :title="emptyStateTitle"
-            :description="emptyStateDescription"
             class="gl-flex-grow gl-justify-center"
-          />
+          >
+            <template #description>
+              <p data-testid="gl-duo-chat-empty-state-description" class="gl-mb-3">
+                {{ emptyStateDescription }}
+              </p>
+              <p
+                data-testid="gl-duo-chat-empty-state-secondary-description"
+                class="gl-mt-3 gl-text-sm gl-text-subtle"
+              >
+                {{ emptyStateSecondaryDescription }}
+              </p>
+            </template>
+          </gl-empty-state>
           <gl-duo-chat-predefined-prompts
             key="predefined-prompts"
             :prompts="predefinedPrompts"

package/src/components/shared_components/close_button/close_button.vue

@@ -1,4 +1,5 @@
 <script>
+import { translate } from '../../../utils/i18n';
 import GlButton from '../../base/button/button.vue';
 
 export default {
@@ -10,7 +11,7 @@ export default {
     label: {
       type: String,
       required: false,
-      default: 'Close',
+      default: () => translate('CloseButton.title', 'Close'),
     },
   },
 };

package/translations.js

@@ -1,8 +1,12 @@
 /* eslint-disable import/no-default-export */
 export default {
   'ClearIconButton.title': 'Clear',
+  'CloseButton.title': 'Close',
   'DuoChatContextItemPopover.DisabledReason': 'This item is disabled',
+  'GlAlert.closeButtonTitle': 'Dismiss',
+  'GlBanner.closeButtonTitle': 'Dismiss',
   'GlBreadcrumb.showMoreLabel': 'Show more breadcrumbs',
+  'GlBroadcastMessage.closeButtonTitle': 'Dismiss',
   'GlCollapsibleListbox.srOnlyResultsLabel': null,
   'GlDuoChatMessage.SelectedContextItemsTitleAssistantMessage': null,
   'GlDuoChatMessage.SelectedContextItemsTitleUserMessage': null,
@@ -21,6 +25,7 @@ export default {
   'GlKeysetPagination.navigationLabel': 'Pagination',
   'GlKeysetPagination.nextText': 'Next',
   'GlKeysetPagination.prevText': 'Previous',
+  'GlModal.closeButtonTitle': 'Close',
   'GlPagination.labelFirstPage': 'Go to first page',
   'GlPagination.labelLastPage': 'Go to last page',
   'GlPagination.labelNextPage': 'Go to next page',
@@ -32,4 +37,5 @@ export default {
   'GlSearchBoxByType.input.placeholder': 'Search',
   'GlSorting.sortAscending': 'Sort direction: ascending',
   'GlSorting.sortDescending': 'Sort direction: descending',
+  'GlToken.closeButtonTitle': 'Remove',
 };