diff --git a/specs/specs/aiChat/behavior/js/welcomeMessage.spec.ts b/specs/specs/aiChat/behavior/js/welcomeMessage.spec.ts
index a93537cc..20669e17 100644
--- a/specs/specs/aiChat/behavior/js/welcomeMessage.spec.ts
+++ b/specs/specs/aiChat/behavior/js/welcomeMessage.spec.ts
@@ -1,4 +1,5 @@
import {AiChat, createAiChat} from '@nlux-dev/core/src';
+import userEvent from '@testing-library/user-event';
import {afterEach, beforeEach, describe, expect, it} from 'vitest';
import '@testing-library/jest-dom';
import {adapterBuilder} from '../../../../utils/adapterBuilder';
@@ -47,6 +48,100 @@ describe('createAiChat() + bot persona + welcome message', () => {
expect(welcomeMessage).not.toBeNull();
expect(welcomeMessage.textContent).toContain('Welcome to the chat');
});
+
+ describe('When the user submits a message', () => {
+ it('The welcome message should be removed', async () => {
+ // Arrange
+ adapterController = adapterBuilder().withFetchText().create();
+ aiChat = createAiChat()
+ .withAdapter(adapterController.adapter)
+ .withPersonaOptions({
+ bot: {
+ name: 'Bot',
+ picture: 'https://example.com/bot.png',
+ tagline: 'Welcome to the chat',
+ },
+ });
+
+ // Act
+ aiChat.mount(rootElement);
+ await waitForRenderCycle();
+
+ const textArea: HTMLTextAreaElement = rootElement.querySelector('.nlux-comp-prmptBox > textarea')!;
+ await userEvent.type(textArea, 'Hello{enter}');
+ await waitForRenderCycle();
+
+ // Assert
+ const welcomeMessage = rootElement.querySelector('.nlux-comp-wlc_msg');
+ expect(welcomeMessage).toBeNull();
+ });
+ });
+
+ describe('When the initial message submission fails', () => {
+ it('The welcome message should be displayed again', async () => {
+ // Arrange
+ adapterController = adapterBuilder().withFetchText().create();
+ aiChat = createAiChat()
+ .withAdapter(adapterController.adapter)
+ .withPersonaOptions({
+ bot: {
+ name: 'Bot',
+ picture: 'https://example.com/bot.png',
+ tagline: 'Welcome to the chat',
+ },
+ });
+
+ // Act
+ aiChat.mount(rootElement);
+ await waitForRenderCycle();
+
+ const textArea: HTMLTextAreaElement = rootElement.querySelector('.nlux-comp-prmptBox > textarea')!;
+ await userEvent.type(textArea, 'Hello{enter}');
+ await waitForRenderCycle();
+
+ adapterController.reject('Error');
+ await waitForRenderCycle();
+
+ // Assert
+ const welcomeMessage = rootElement.querySelector('.nlux-comp-wlc_msg')!;
+ expect(welcomeMessage).not.toBeNull();
+ expect(welcomeMessage.textContent).toContain('Welcome to the chat');
+ });
+ });
+ });
+
+ describe('When an initial conversation is provided', () => {
+ it('The welcome message should not be displayed', async () => {
+ // Arrange
+ adapterController = adapterBuilder().withFetchText().create();
+ aiChat = createAiChat()
+ .withAdapter(adapterController.adapter)
+ .withPersonaOptions({
+ bot: {
+ name: 'Bot',
+ picture: 'https://example.com/bot.png',
+ tagline: 'Welcome to the chat',
+ },
+ })
+ .withInitialConversation([
+ {
+ role: 'ai',
+ message: 'Hello, world!',
+ },
+ {
+ role: 'user',
+ message: 'Hi, bot!',
+ },
+ ]);
+
+ // Act
+ aiChat.mount(rootElement);
+ await waitForRenderCycle();
+
+ // Assert
+ const welcomeMessage = rootElement.querySelector('.nlux-comp-wlc_msg');
+ expect(welcomeMessage).toBeNull();
+ });
});
});
});
diff --git a/specs/specs/aiChat/behavior/react/welcomeMessage.spec.tsx b/specs/specs/aiChat/behavior/react/welcomeMessage.spec.tsx
index 7a9cd50a..fc37eae5 100644
--- a/specs/specs/aiChat/behavior/react/welcomeMessage.spec.tsx
+++ b/specs/specs/aiChat/behavior/react/welcomeMessage.spec.tsx
@@ -1,5 +1,6 @@
import {AiChat} from '@nlux-dev/react/src';
import {render} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import {afterEach, beforeEach, describe, expect, it} from 'vitest';
import {adapterBuilder} from '../../../../utils/adapterBuilder';
import {AdapterController} from '../../../../utils/adapters';
@@ -40,6 +41,108 @@ describe(' + bot persona + welcome message', () => {
expect(welcomeMessage).not.toBeNull();
expect(welcomeMessage.textContent).toContain('Welcome to the chat');
});
+
+ describe('When the user submits a message', () => {
+ it('The welcome message should be removed', async () => {
+ // Arrange
+ const aiChat = (
+
+ );
+ const {container} = render(aiChat);
+ await waitForReactRenderCycle();
+
+ await waitForReactRenderCycle();
+ const textArea: HTMLTextAreaElement = container.querySelector('.nlux-comp-prmptBox > textarea')!;
+
+ // Act
+ await userEvent.type(textArea, 'Hello{enter}');
+ await waitForReactRenderCycle();
+
+ // Assert
+ const welcomeMessage = container.querySelector('.nlux-comp-wlc_msg');
+ expect(welcomeMessage).toBeNull();
+ });
+ });
+
+ describe('When the initial message submission fails', () => {
+ it('The welcome message should be displayed again', async () => {
+ // Arrange
+ const aiChat = (
+
+ );
+ const {container} = render(aiChat);
+ await waitForReactRenderCycle();
+
+ await waitForReactRenderCycle();
+ const textArea: HTMLTextAreaElement = container.querySelector('.nlux-comp-prmptBox > textarea')!;
+
+ // Act
+ await userEvent.type(textArea, 'Hello{enter}');
+ await waitForReactRenderCycle();
+
+ adapterController!.reject('Sorry user!');
+ await waitForReactRenderCycle();
+
+ // Assert
+ const welcomeMessage = container.querySelector('.nlux-comp-wlc_msg')!;
+ expect(welcomeMessage).not.toBeNull();
+ expect(welcomeMessage.textContent).toContain('Welcome to the chat');
+ });
+ });
+ });
+
+ describe('When an initial conversation is provided', () => {
+ it('The welcome message should not be displayed', async () => {
+ // Arrange
+ const aiChat = (
+
+ );
+
+ // Act
+ const {container} = render(aiChat);
+ await waitForReactRenderCycle();
+
+ // Assert
+ const welcomeMessage = container.querySelector('.nlux-comp-wlc_msg');
+ expect(welcomeMessage).toBeNull();
+ });
});
});
});