-
- {{ prompt }}
-
+
+ {{ prompt }}
diff --git a/src/components/experimental/duo/chat/duo_chat.scss b/src/components/experimental/duo/chat/duo_chat.scss
index ca34049b10e97a34df2824c53bb3eedbb62feb49..01967b94331a485bdf59b53ff56545ee1c134e6b 100644
--- a/src/components/experimental/duo/chat/duo_chat.scss
+++ b/src/components/experimental/duo/chat/duo_chat.scss
@@ -125,6 +125,10 @@
}
}
+.duo-chat-suggestion-button {
+ border-radius: px-to-rem(20px) !important;
+}
+
.duo-chat-input {
@apply gl-flex;
@apply gl-flex-col;
diff --git a/src/components/experimental/duo/chat/duo_chat.spec.js b/src/components/experimental/duo/chat/duo_chat.spec.js
index 31af6ddaecbf24cd4048c23afff4be027e93fb20..cd45672db33060b2f1e9046ab6e615bf6702142f 100644
--- a/src/components/experimental/duo/chat/duo_chat.spec.js
+++ b/src/components/experimental/duo/chat/duo_chat.spec.js
@@ -89,11 +89,10 @@ describe('GlDuoChat', () => {
const findFooter = () => wrapper.find('[data-testid="chat-footer"]');
const findPromptForm = () => wrapper.find('[data-testid="chat-prompt-form"]');
const findBadge = () => wrapper.findComponent(GlExperimentBadge);
- const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+ const findEmptyState = () => wrapper.find('[data-testid="gl-duo-chat-empty-state"]');
+ const findEmptyStateTitle = () => wrapper.find('[data-testid="gl-duo-chat-empty-state-title"]');
const findEmptyStateDescription = () =>
wrapper.find('[data-testid="gl-duo-chat-empty-state-description"]');
- const findEmptyStateSecondaryDescription = () =>
- wrapper.find('[data-testid="gl-duo-chat-empty-state-secondary-description"]');
const findPredefined = () => wrapper.findComponent(DuoChatPredefinedPrompts);
const findChatInput = () => wrapper.find('[data-testid="chat-prompt-input"]');
const findCloseChatButton = () => wrapper.find('[data-testid="chat-close-button"]');
@@ -294,14 +293,13 @@ describe('GlDuoChat', () => {
describe('emptyStateTitle', () => {
it.each`
emptyStateTitle | expectedTitle
- ${undefined} | ${'Ask a question'}
- ${''} | ${''}
+ ${undefined} | ${'👋 I am GitLab Duo Chat, your personal AI-powered assistant. Here are some ideas to get you started:'}
${'custom title'} | ${'custom title'}
`(
'displays "$expectedTitle" when emptyStateTitle is "$emptyStateTitle"',
({ emptyStateTitle, expectedTitle }) => {
createComponent({ propsData: { emptyStateTitle } });
- expect(findEmptyState().props('title')).toBe(expectedTitle);
+ expect(findEmptyStateTitle().text()).toBe(expectedTitle);
}
);
});
@@ -309,8 +307,7 @@ describe('GlDuoChat', () => {
describe('emptyStateDescription', () => {
it.each`
emptyStateDescription | expectedDescription
- ${undefined} | ${'GitLab Duo Chat is your AI-powered assistant.'}
- ${''} | ${''}
+ ${undefined} | ${'How could I help you today?'}
${'custom description'} | ${'custom description'}
`(
'displays "$expectedDescription" when emptyStateDescription is "$emptyStateDescription"',
@@ -321,21 +318,6 @@ describe('GlDuoChat', () => {
);
});
- describe('emptyStateSecondaryDescription', () => {
- it.each`
- emptyStateSecondaryDescription | expectedDescription
- ${undefined} | ${'Responses may be inaccurate. Verify before use.'}
- ${''} | ${''}
- ${'custom description'} | ${'custom description'}
- `(
- 'displays "$expectedDescription" when emptyStateSecondaryDescription is "$emptyStateSecondaryDescription"',
- ({ emptyStateSecondaryDescription, expectedDescription }) => {
- createComponent({ propsData: { emptyStateSecondaryDescription } });
- expect(findEmptyStateSecondaryDescription().text()).toBe(expectedDescription);
- }
- );
- });
-
describe('prompt placeholder', () => {
it.each`
chatPromptPlaceholder | commands | expectedPlaceholder
diff --git a/src/components/experimental/duo/chat/duo_chat.stories.js b/src/components/experimental/duo/chat/duo_chat.stories.js
index 3cb04f62346d3868fca687ef6e47cd411cb676d8..2b6fa1a37a33c5977407225465207cee68ddbbb0 100644
--- a/src/components/experimental/duo/chat/duo_chat.stories.js
+++ b/src/components/experimental/duo/chat/duo_chat.stories.js
@@ -42,7 +42,6 @@ const generateProps = ({
showHeader = defaultValue('showHeader'),
emptyStateTitle = defaultValue('emptyStateTitle'),
emptyStateDescription = defaultValue('emptyStateDescription'),
- emptyStateSecondaryDescription = defaultValue('emptyStateSecondaryDescription'),
chatPromptPlaceholder = defaultValue('chatPromptPlaceholder'),
enableCodeInsertion = defaultValue('enableCodeInsertion'),
} = {}) => ({
@@ -59,7 +58,6 @@ const generateProps = ({
showHeader,
emptyStateTitle,
emptyStateDescription,
- emptyStateSecondaryDescription,
chatPromptPlaceholder,
enableCodeInsertion,
});
@@ -84,7 +82,6 @@ export const Default = (args, { argTypes }) => ({
:show-header="showHeader"
:empty-state-title="emptyStateTitle"
:empty-state-description="emptyStateDescription"
- :empty-state-secondary-description="emptyStateSecondaryDescription"
:chat-prompt-placeholder="chatPromptPlaceholder"
:enable-code-insertion="enableCodeInsertion"
/>`,
@@ -262,7 +259,6 @@ export const Interactive = (args, { argTypes }) => ({
:show-header="showHeader"
:empty-state-title="emptyStateTitle"
:empty-state-description="emptyStateDescription"
- :empty-state-secondary-description="emptyStateSecondaryDescription"
:chat-prompt-placeholder="chatPromptPlaceholder"
:slash-commands="slashCommands"
class="gl-drawer-default"
@@ -316,7 +312,6 @@ export const Slots = (args, { argTypes }) => ({
:show-header="showHeader"
:empty-state-title="emptyStateTitle"
:empty-state-description="emptyStateDescription"
- :empty-state-secondary-description="emptyStateSecondaryDescription"
:chat-prompt-placeholder="chatPromptPlaceholder">
import throttle from 'lodash/throttle';
-import emptySvg from '@gitlab/svgs/dist/illustrations/empty-state/empty-activity-md.svg';
import GlDropdownItem from '../../../base/dropdown/dropdown_item.vue';
import GlCard from '../../../base/card/card.vue';
-import GlEmptyState from '../../../regions/empty_state/empty_state.vue';
import GlButton from '../../../base/button/button.vue';
import GlAlert from '../../../base/alert/alert.vue';
import GlFormInputGroup from '../../../base/form/form_input_group/form_input_group.vue';
@@ -25,16 +23,16 @@ import {
export const i18n = {
CHAT_DEFAULT_TITLE: translate('GlDuoChat.chatDefaultTitle', 'GitLab Duo Chat'),
- CHAT_CLOSE_LABEL: translate('GlDuoChat.chatCloseLabel', 'Close the Code Explanation'),
- CHAT_EMPTY_STATE_TITLE: translate('GlDuoChat.chatEmptyStateTitle', 'Ask a question'),
- CHAT_EMPTY_STATE_DESC: translate(
- 'GlDuoChat.chatEmptyStateDesc',
- 'GitLab Duo Chat is your AI-powered assistant.'
- ),
- CHAT_EMPTY_STATE_SECONDARY_DESC: translate(
- 'GlDuoChat.chatEmptyStateSecondaryDesc',
+ CHAT_DISCLAMER: translate(
+ 'GlDuoChat.chatDisclamer',
'Responses may be inaccurate. Verify before use.'
),
+ CHAT_CLOSE_LABEL: translate('GlDuoChat.chatCloseLabel', 'Close the Code Explanation'),
+ CHAT_EMPTY_STATE_TITLE: translate(
+ 'GlDuoChat.chatEmptyStateTitle',
+ '👋 I am GitLab Duo Chat, your personal AI-powered assistant. Here are some ideas to get you started:'
+ ),
+ CHAT_EMPTY_STATE_DESC: translate('GlDuoChat.chatEmptyStateDesc', 'How could I help you today?'),
CHAT_PROMPT_PLACEHOLDER_DEFAULT: translate(
'GlDuoChat.chatPromptPlaceholderDefault',
'GitLab Duo Chat'
@@ -73,7 +71,6 @@ const slashCommandsValidator = (commands) => commands.every(isSlashCommand);
export default {
name: 'GlDuoChat',
components: {
- GlEmptyState,
GlButton,
GlAlert,
GlFormInputGroup,
@@ -213,14 +210,6 @@ 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.
*/
@@ -530,7 +519,6 @@ export default {
},
},
i18n,
- emptySvg,
};
@@ -613,30 +601,23 @@ export default {
@get-context-item-content="onGetContextItemContent"
/>
-
-
-
- {{ emptyStateDescription }}
-
-
- {{ emptyStateSecondaryDescription }}
-
-
-
-
+
+ {{ emptyStateTitle }}
+
+
+
+ {{ emptyStateDescription }}
+
+