@gitlab/ui 73.1.1 → 73.3.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [73.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v73.2.0...v73.3.0) (2024-02-02)
+
+
+### Features
+
+* **GlBreadcrumb:** Add ariaLabel prop ([5527740](https://gitlab.com/gitlab-org/gitlab-ui/commit/5527740d8b6399224b6bd4acbfd672b9786a3c91))
+
+# [73.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v73.1.1...v73.2.0) (2024-02-02)
+
+
+### Features
+
+* **GlDuoChat:** Adds empty state and prompt input placeholder props ([6d0b8d0](https://gitlab.com/gitlab-org/gitlab-ui/commit/6d0b8d08dd6158883b0b35efb0cc1d5ebd3222ed))
+
 ## [73.1.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v73.1.0...v73.1.1) (2024-02-01)
 
 

package/dist/components/base/breadcrumb/breadcrumb.js

@@ -36,6 +36,11 @@ var script = {
           return keys.includes('text') && (keys.includes('href') || keys.includes('to'));
         });
       }
+    },
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: 'Breadcrumb'
     }
   },
   data() {
@@ -86,7 +91,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('nav',{staticClass:"gl-breadcrumbs",attrs:{"aria-label":"Breadcrumb"}},[_c('b-breadcrumb',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list"},'b-breadcrumb',_vm.$attrs,false),_vm.$listeners),[_vm._l((_vm.items),function(item,index){return [_c('gl-breadcrumb-item',{directives:[{name:"show",rawName:"v-show",value:(!_vm.isItemCollapsed(index)),expression:"!isItemCollapsed(index)"}],ref:_vm.isFirstItem(index) ? 'firstItem' : null,refInFor:true,attrs:{"text":item.text,"href":item.href,"to":item.to,"aria-current":_vm.getAriaCurrentAttr(index)}},[(item.avatarPath)?_c('gl-avatar',{staticClass:"gl-breadcrumb-avatar-tile gl-border gl-mr-2 gl-rounded-base!",attrs:{"src":item.avatarPath,"size":16,"aria-hidden":"true","shape":"rect","data-testid":"avatar"}}):_vm._e(),_c('span',[_vm._v(_vm._s(item.text))])],1),_vm._v(" "),(_vm.showCollapsedBreadcrumbsExpander(index))?[_c('li',{staticClass:"gl-breadcrumb-item"},[_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",value:('Show all breadcrumbs'),expression:"'Show all breadcrumbs'",modifiers:{"hover":true}}],attrs:{"aria-label":"Show all breadcrumbs","data-testid":"collapsed-expander","icon":"ellipsis_h","category":"primary"},on:{"click":_vm.expandBreadcrumbs}})],1)]:_vm._e()]})],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"gl-breadcrumbs",attrs:{"aria-label":_vm.ariaLabel}},[_c('b-breadcrumb',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list"},'b-breadcrumb',_vm.$attrs,false),_vm.$listeners),[_vm._l((_vm.items),function(item,index){return [_c('gl-breadcrumb-item',{directives:[{name:"show",rawName:"v-show",value:(!_vm.isItemCollapsed(index)),expression:"!isItemCollapsed(index)"}],ref:_vm.isFirstItem(index) ? 'firstItem' : null,refInFor:true,attrs:{"text":item.text,"href":item.href,"to":item.to,"aria-current":_vm.getAriaCurrentAttr(index)}},[(item.avatarPath)?_c('gl-avatar',{staticClass:"gl-breadcrumb-avatar-tile gl-border gl-mr-2 gl-rounded-base!",attrs:{"src":item.avatarPath,"size":16,"aria-hidden":"true","shape":"rect","data-testid":"avatar"}}):_vm._e(),_c('span',[_vm._v(_vm._s(item.text))])],1),_vm._v(" "),(_vm.showCollapsedBreadcrumbsExpander(index))?[_c('li',{staticClass:"gl-breadcrumb-item"},[_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",value:('Show all breadcrumbs'),expression:"'Show all breadcrumbs'",modifiers:{"hover":true}}],attrs:{"aria-label":"Show all breadcrumbs","data-testid":"collapsed-expander","icon":"ellipsis_h","category":"primary"},on:{"click":_vm.expandBreadcrumbs}})],1)]:_vm._e()]})],2)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -148,6 +148,30 @@ var script = {
       type: Boolean,
       required: false,
       default: true
+    },
+    /**
+     * Override the default empty state title text.
+     */
+    emptyStateTitle: {
+      type: String,
+      required: false,
+      default: i18n.CHAT_EMPTY_STATE_TITLE
+    },
+    /**
+     * Override the default empty state description text.
+     */
+    emptyStateDescription: {
+      type: String,
+      required: false,
+      default: i18n.CHAT_EMPTY_STATE_DESC
+    },
+    /**
+     * Override the default chat prompt placeholder text.
+     */
+    chatPromptPlaceholder: {
+      type: String,
+      required: false,
+      default: ''
     }
   },
   data() {
@@ -196,6 +220,9 @@ var script = {
       return startsWithSlash && this.filteredSlashCommands.length && !startsWithSlashCommand;
     },
     inputPlaceholder() {
+      if (this.chatPromptPlaceholder) {
+        return this.chatPromptPlaceholder;
+      }
       return this.withSlashCommands ? i18n.CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS : i18n.CHAT_PROMPT_PLACEHOLDER_DEFAULT;
     }
   },
@@ -321,7 +348,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
           {
             'gl-h-full': !_vm.hasMessages,
             'gl-h-auto': _vm.hasMessages,
-          } ],attrs:{"tag":"div","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('gl-duo-chat-conversation',{key:("conversation-" + index),attrs:{"messages":conversation,"show-delimiter":index > 0},on:{"track-feedback":_vm.onTrackFeedback}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('div',{key:"empty-state",staticClass:"gl-display-flex gl-flex-grow-1 gl-mr-auto gl-ml-auto"},[_c('gl-empty-state',{staticClass:"gl-align-self-center",attrs:{"svg-path":_vm.$options.emptySvg,"svg-height":145,"title":_vm.$options.i18n.CHAT_EMPTY_STATE_TITLE,"description":_vm.$options.i18n.CHAT_EMPTY_STATE_DESC}})],1),_vm._v(" "),_c('gl-duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})]:_vm._e()],2),_vm._v(" "),_c('transition',{attrs:{"name":"loader"}},[(_vm.isLoading)?_c('gl-duo-chat-loader',{staticClass:"gl-px-0!",attrs:{"tool-name":_vm.toolName}}):_vm._e()],1)],1)],2),_vm._v(" "),(_vm.isChatAvailable)?_c('footer',{staticClass:"gl-drawer-footer gl-drawer-footer-sticky gl-p-5 gl-border-t gl-bg-gray-10",class:{ 'gl-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 [_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","aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL,"disabled":_vm.isLoading}})]},proxy:true}],null,false,2232229068)},[_c('div',{staticClass:"duo-chat-input gl-flex-grow-1 gl-vertical-align-top gl-max-w-full gl-min-h-8 gl-inset-border-1-gray-400 gl-rounded-base gl-bg-white",attrs:{"data-value":_vm.prompt}},[(_vm.shouldShowSlashCommands)?_c('gl-card',{ref:"commands",staticClass:"slash-commands gl-absolute! gl-translate-y-n100 gl-list-style-none gl-pl-0 gl-w-full 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-display-flex gl-justify-content-space-between"},[_c('span',{staticClass:"gl-display-block"},[_vm._v(_vm._s(command.name))]),_vm._v(" "),_c('small',{staticClass:"gl-text-gray-500 gl-font-style-italic gl-text-right gl-pl-3"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",staticClass:"gl-absolute gl-h-full! gl-py-4! gl-bg-transparent! gl-rounded-top-right-none gl-rounded-bottom-right-none gl-shadow-none!",class:{ 'gl-text-truncate': !_vm.prompt },attrs:{"data-testid":"chat-prompt-input","placeholder":_vm.inputPlaceholder,"disabled":_vm.isLoading,"autofocus":""},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('gl-form-text',{staticClass:"gl-text-gray-400 gl-line-height-20 gl-mt-3",attrs:{"data-testid":"chat-legal-disclaimer"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_DISCLAIMER))])],1)],1):_vm._e()]):_vm._e()};
+          } ],attrs:{"tag":"div","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('gl-duo-chat-conversation',{key:("conversation-" + index),attrs:{"messages":conversation,"show-delimiter":index > 0},on:{"track-feedback":_vm.onTrackFeedback}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('div',{key:"empty-state",staticClass:"gl-display-flex gl-flex-grow-1 gl-mr-auto gl-ml-auto"},[_c('gl-empty-state',{staticClass:"gl-align-self-center",attrs:{"svg-path":_vm.$options.emptySvg,"svg-height":145,"title":_vm.emptyStateTitle,"description":_vm.emptyStateDescription}})],1),_vm._v(" "),_c('gl-duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})]:_vm._e()],2),_vm._v(" "),_c('transition',{attrs:{"name":"loader"}},[(_vm.isLoading)?_c('gl-duo-chat-loader',{staticClass:"gl-px-0!",attrs:{"tool-name":_vm.toolName}}):_vm._e()],1)],1)],2),_vm._v(" "),(_vm.isChatAvailable)?_c('footer',{staticClass:"gl-drawer-footer gl-drawer-footer-sticky gl-p-5 gl-border-t gl-bg-gray-10",class:{ 'gl-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 [_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","aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL,"disabled":_vm.isLoading}})]},proxy:true}],null,false,2232229068)},[_c('div',{staticClass:"duo-chat-input gl-flex-grow-1 gl-vertical-align-top gl-max-w-full gl-min-h-8 gl-inset-border-1-gray-400 gl-rounded-base gl-bg-white",attrs:{"data-value":_vm.prompt}},[(_vm.shouldShowSlashCommands)?_c('gl-card',{ref:"commands",staticClass:"slash-commands gl-absolute! gl-translate-y-n100 gl-list-style-none gl-pl-0 gl-w-full 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-display-flex gl-justify-content-space-between"},[_c('span',{staticClass:"gl-display-block"},[_vm._v(_vm._s(command.name))]),_vm._v(" "),_c('small',{staticClass:"gl-text-gray-500 gl-font-style-italic gl-text-right gl-pl-3"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",staticClass:"gl-absolute gl-h-full! gl-py-4! gl-bg-transparent! gl-rounded-top-right-none gl-rounded-bottom-right-none gl-shadow-none!",class:{ 'gl-text-truncate': !_vm.prompt },attrs:{"data-testid":"chat-prompt-input","placeholder":_vm.inputPlaceholder,"disabled":_vm.isLoading,"autofocus":""},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('gl-form-text',{staticClass:"gl-text-gray-400 gl-line-height-20 gl-mt-3",attrs:{"data-testid":"chat-legal-disclaimer"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_DISCLAIMER))])],1)],1):_vm._e()]):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 01 Feb 2024 16:57:13 GMT
+ * Generated on Fri, 02 Feb 2024 15:27:03 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 01 Feb 2024 16:57:13 GMT
+ * Generated on Fri, 02 Feb 2024 15:27:03 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 01 Feb 2024 16:57:13 GMT
+ * Generated on Fri, 02 Feb 2024 15:27:03 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 01 Feb 2024 16:57:13 GMT
+ * Generated on Fri, 02 Feb 2024 15:27:03 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 01 Feb 2024 16:57:13 GMT
+// Generated on Fri, 02 Feb 2024 15:27:03 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 01 Feb 2024 16:57:13 GMT
+// Generated on Fri, 02 Feb 2024 15:27:03 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

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

package/src/components/base/breadcrumb/breadcrumb.spec.js

@@ -2,7 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import avatarPath1 from '../../../../static/img/avatar.png';
 import avatarPath3 from '../../../../static/img/avatar_1.png';
-import Breadcrumb, { COLLAPSE_AT_SIZE } from './breadcrumb.vue';
+import GlBreadcrumb, { COLLAPSE_AT_SIZE } from './breadcrumb.vue';
 import GlBreadcrumbItem from './breadcrumb_item.vue';
 
 describe('Breadcrumb component', () => {
@@ -39,7 +39,7 @@ describe('Breadcrumb component', () => {
     findBreadcrumbItems().wrappers.filter((item) => !item.isVisible());
 
   const createComponent = (propsData = { items }) => {
-    wrapper = shallowMount(Breadcrumb, {
+    wrapper = shallowMount(GlBreadcrumb, {
       propsData,
       stubs: {
         GlBreadcrumbItem,
@@ -61,6 +61,20 @@ describe('Breadcrumb component', () => {
     });
   });
 
+  describe('ariaLabel', () => {
+    it('uses prop if provided', () => {
+      createComponent({ items, ariaLabel: 'Folder breadcrumbs' });
+
+      expect(wrapper.attributes('aria-label')).toBe('Folder breadcrumbs');
+    });
+
+    it('uses default if prop not provided', () => {
+      createComponent();
+
+      expect(wrapper.attributes('aria-label')).toBe('Breadcrumb');
+    });
+  });
+
   describe('avatars', () => {
     it('renders 2 avatars when 2 avatarPaths are passed', () => {
       createComponent();

package/src/components/base/breadcrumb/breadcrumb.stories.js

@@ -6,6 +6,7 @@ import readme from './breadcrumb.md';
 const template = `
     <gl-breadcrumb
         :items="items"
+        :aria-label="ariaLabel"
     />
   `;
 

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -35,6 +35,11 @@ export default {
         });
       },
     },
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: 'Breadcrumb',
+    },
   },
   data() {
     return {
@@ -84,7 +89,7 @@ export default {
 };
 </script>
 <template>
-  <nav class="gl-breadcrumbs" aria-label="Breadcrumb">
+  <nav class="gl-breadcrumbs" :aria-label="ariaLabel">
     <b-breadcrumb class="gl-breadcrumb-list" v-bind="$attrs" v-on="$listeners">
       <template v-for="(item, index) in items">
         <!-- eslint-disable-next-line vue/valid-v-for (for @vue/compat) -->

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

@@ -18,6 +18,9 @@ consumer component.
   :predefined-prompts="predefinedPrompts"
   :badge-help-page-url="badgeHelpPageUrl"
   :tool-name="toolName"
+  :empty-state-title="emptyStateTitle"
+  :empty-state-description="emptyStateDescription"
+  :chat-prompt-placeholder="chatPromptPlaceholder"
   :slash-commands="slashCommands"
   @chat-hidden="onChatHidden"
   @send-chat-prompt="onSendChatPrompt"
@@ -72,6 +75,9 @@ be necessarily reactive in the consumer component. The properties that might be
   there are no messages in the chat.
 - `badgeHelpPageUrl`. The link to an external page explaining the meaning of an "experiment".
   The prop is passed down to the [`GlExperimentBadge` component](?path=/docs/experimental-experiment-badge--docs).
+- `emptyStateTitle`. Title of the empty state component. Visible when there are no messages.
+- `emptyStateDescription`. Description text of the empty state component. Visible when there are no messages.
+- `chatPromptPlaceholder`. Placeholder text for the chat prompt input.
 
 ### Set up communication with consumer
 
@@ -102,6 +108,9 @@ export default {
     this.isChatAvailable = true; // this is just an example. `true` is the default value
     this.predefinedPrompts = ['How to …?', 'Where do I …?'];
     this.badgeHelpPageUrl = 'https://dev.null';
+    this.emptyStateTitle = 'Ask anything';
+    this.emptyStateDescription = 'You will see the answers below';
+    this.chatPromptPlaceholder = 'Type your question here';
   }
   methods: {
     onChatHidden() {

package/src/components/experimental/duo/chat/duo_chat.spec.js

@@ -237,6 +237,57 @@ describe('GlDuoChat', () => {
         expect(findHeader().exists()).toBe(shouldRender);
       });
     });
+
+    describe('emptyStateTitle', () => {
+      it.each`
+        emptyStateTitle   | expectedTitle
+        ${undefined}      | ${'Ask a question'}
+        ${''}             | ${''}
+        ${'custom title'} | ${'custom title'}
+      `(
+        'displays "$expectedTitle" when emptyStateTitle is "$emptyStateTitle"',
+        ({ emptyStateTitle, expectedTitle }) => {
+          createComponent({ propsData: { emptyStateTitle } });
+          expect(findEmptyState().props('title')).toBe(expectedTitle);
+        }
+      );
+    });
+
+    describe('emptyStateDescription', () => {
+      it.each`
+        emptyStateDescription   | expectedDescription
+        ${undefined}            | ${'AI generated explanations will appear here.'}
+        ${''}                   | ${''}
+        ${'custom description'} | ${'custom description'}
+      `(
+        'displays "$expectedDescription" when emptyStateDescription is "$emptyStateDescription"',
+        ({ emptyStateDescription, expectedDescription }) => {
+          createComponent({ propsData: { emptyStateDescription } });
+          expect(findEmptyState().props('description')).toBe(expectedDescription);
+        }
+      );
+    });
+
+    describe('prompt placeholder', () => {
+      it.each`
+        chatPromptPlaceholder   | commands         | expectedPlaceholder
+        ${undefined}            | ${undefined}     | ${'GitLab Duo Chat'}
+        ${''}                   | ${undefined}     | ${'GitLab Duo Chat'}
+        ${'custom placeholder'} | ${undefined}     | ${'custom placeholder'}
+        ${undefined}            | ${[]}            | ${'GitLab Duo Chat'}
+        ${''}                   | ${[]}            | ${'GitLab Duo Chat'}
+        ${'custom placeholder'} | ${[]}            | ${'custom placeholder'}
+        ${undefined}            | ${slashCommands} | ${'Type "/" for slash commands'}
+        ${''}                   | ${slashCommands} | ${'Type "/" for slash commands'}
+        ${'custom placeholder'} | ${slashCommands} | ${'custom placeholder'}
+      `(
+        'displays "$expectedPlaceholder" when chatPromptPlaceholder is "$chatPromptPlaceholder", and slashCommands are "$commands"',
+        ({ chatPromptPlaceholder, commands, expectedPlaceholder }) => {
+          createComponent({ propsData: { chatPromptPlaceholder, slashCommands: commands } });
+          expect(findChatInput().attributes('placeholder')).toBe(expectedPlaceholder);
+        }
+      );
+    });
   });
 
   describe('chat', () => {
@@ -482,11 +533,6 @@ describe('GlDuoChat', () => {
           await nextTick();
           expect(findSlashCommandsCard().exists()).toBe(false);
         });
-
-        it('shows default placeholder in the chat input', () => {
-          createComponent();
-          expect(findChatInput().attributes('placeholder')).toBe('GitLab Duo Chat');
-        });
       });
 
       describe('with slash commands', () => {
@@ -521,15 +567,6 @@ describe('GlDuoChat', () => {
           });
         });
 
-        it('shows the correct placeholder in the chat input', () => {
-          createComponent({
-            propsData: {
-              slashCommands,
-            },
-          });
-          expect(findChatInput().attributes('placeholder')).toBe('Type "/" for slash commands');
-        });
-
         it('prevents passing down invalid slash commands', () => {
           expect(() => {
             wrapper = shallowMount(GlDuoChat, {

package/src/components/experimental/duo/chat/duo_chat.stories.js

@@ -48,6 +48,9 @@ const generateProps = ({
   badgeType = defaultValue('badgeType'),
   toolName = defaultValue('toolName'),
   showHeader = defaultValue('showHeader'),
+  emptyStateTitle = defaultValue('emptyStateTitle'),
+  emptyStateDescription = defaultValue('emptyStateDescription'),
+  chatPromptPlaceholder = defaultValue('chatPromptPlaceholder'),
 } = {}) => ({
   title,
   messages,
@@ -60,6 +63,9 @@ const generateProps = ({
   toolName,
   slashCommands,
   showHeader,
+  emptyStateTitle,
+  emptyStateDescription,
+  chatPromptPlaceholder,
 });
 
 export const Default = (args, { argTypes }) => ({
@@ -81,6 +87,9 @@ export const Default = (args, { argTypes }) => ({
       :badge-type="badgeType"
       :tool-name="toolName"
       :show-header="showHeader"
+      :empty-state-title="emptyStateTitle"
+      :empty-state-description="emptyStateDescription"
+      :chat-prompt-placeholder="chatPromptPlaceholder"
     />`,
 });
 Default.args = generateProps({
@@ -176,6 +185,9 @@ export const Interactive = (args, { argTypes }) => ({
       :badge-type="badgeType"
       :tool-name="toolName"
       :show-header="showHeader"
+      :empty-state-title="emptyStateTitle"
+      :empty-state-description="emptyStateDescription"
+      :chat-prompt-placeholder="chatPromptPlaceholder"
       @send-chat-prompt="onSendChatPrompt"
       @chat-hidden="onChatHidden"
     />
@@ -202,7 +214,10 @@ export const Slots = (args, { argTypes }) => ({
         :badge-help-page-url="badgeHelpPageUrl"
         :badge-type="badgeType"
         :tool-name="toolName"
-        :show-header="showHeader">
+        :show-header="showHeader"
+        :empty-state-title="emptyStateTitle"
+        :empty-state-description="emptyStateDescription"
+        :chat-prompt-placeholder="chatPromptPlaceholder">
 
         <template #hero>
 <pre class="code-block rounded code highlight gl-border-b gl-rounded-0! gl-mb-0 gl-overflow-y-auto solarized-light" style="max-height: 20rem; overflow-y: auto;">

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

@@ -157,6 +157,30 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * Override the default empty state title text.
+     */
+    emptyStateTitle: {
+      type: String,
+      required: false,
+      default: i18n.CHAT_EMPTY_STATE_TITLE,
+    },
+    /**
+     * Override the default empty state description text.
+     */
+    emptyStateDescription: {
+      type: String,
+      required: false,
+      default: i18n.CHAT_EMPTY_STATE_DESC,
+    },
+    /**
+     * Override the default chat prompt placeholder text.
+     */
+    chatPromptPlaceholder: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -212,6 +236,10 @@ export default {
       return startsWithSlash && this.filteredSlashCommands.length && !startsWithSlashCommand;
     },
     inputPlaceholder() {
+      if (this.chatPromptPlaceholder) {
+        return this.chatPromptPlaceholder;
+      }
+
       return this.withSlashCommands
         ? i18n.CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS
         : i18n.CHAT_PROMPT_PLACEHOLDER_DEFAULT;
@@ -419,8 +447,8 @@ export default {
               <gl-empty-state
                 :svg-path="$options.emptySvg"
                 :svg-height="145"
-                :title="$options.i18n.CHAT_EMPTY_STATE_TITLE"
-                :description="$options.i18n.CHAT_EMPTY_STATE_DESC"
+                :title="emptyStateTitle"
+                :description="emptyStateDescription"
                 class="gl-align-self-center"
               />
             </div>