Fixed tests and updated welcome message style

packages/css/themes/src/common/components/WelcomeMessage.css

@@ -1,2 +1,15 @@
 .nlux-comp-wlc_msg {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: var(--nlux-padding);
+    gap: var(--nlux-flex-gap);
+
+    > .nlux-comp-wlc_msg_prs_nm {
+        font-size: var(--nlux-font-size-l);
+        font-weight: bold;
+    }
 }

samples/aiChat/react/src/App.tsx

@@ -56,7 +56,7 @@ function App() {
             // adapter={nlBridge}
             adapter={openAiAdapter}
             // syntaxHighlighter={highlighter}
-            initialConversation={initialConversation}
+            // initialConversation={initialConversation}
             promptBoxOptions={{
                 placeholder: 'Type your prompt here',
                 autoFocus: true,
@@ -82,8 +82,9 @@ function App() {
                     picture: <div style={{backgroundColor: 'red', width: 50, height: 50}}>JsX</div>,
                 },
                 bot: {
-                    name: 'AI',
+                    name: 'Harry Botter',
                     picture: 'https://nlux.ai/images/demos/persona-harry-botter.jpg',
+                    tagline: 'Your friendly AI assistant',
                 },
             }}
         />

specs/package.json

@@ -41,6 +41,7 @@
     "ts-node": "^10.9.2",
     "tslib": "^2.6.2",
     "vite": "^5.2.11",
+    "typescript": "^5.4.5",
     "vitest": "^1.6.0"
   },
   "dependencies": {}

specs/specs/aiChat/behavior/js/initialLoad.spec.ts

@@ -1,4 +1,4 @@
-import {AiChat, createAiChat} from '@nlux/core';
+import {AiChat, createAiChat} from '@nlux-dev/core/src';
 import {afterEach, beforeEach, describe, expect, it} from 'vitest';
 import '@testing-library/jest-dom';
 import {adapterBuilder} from '../../../../utils/adapterBuilder';

specs/specs/aiChat/behavior/react/welcomeMessage.spec.tsx

@@ -0,0 +1,45 @@
+import {AiChat} from '@nlux-dev/react/src';
+import {render} from '@testing-library/react';
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+import {adapterBuilder} from '../../../../utils/adapterBuilder';
+import {AdapterController} from '../../../../utils/adapters';
+import {waitForRenderCycle} from '../../../../utils/wait';
+
+describe('<AiChat /> + bot persona + welcome message', () => {
+    let adapterController: AdapterController | undefined;
+
+    beforeEach(() => {
+        adapterController = adapterBuilder().withFetchText().create();
+    });
+
+    afterEach(() => {
+        adapterController = undefined;
+    });
+
+    describe('When bot persona is configured and a tagline is provided', () => {
+        describe('When no initial conversation is provided', () => {
+            it('The welcome message should be displayed', async () => {
+                // Arrange
+                const aiChat = (
+                    <AiChat
+                        adapter={adapterController!.adapter}
+                        personaOptions={{
+                            bot: {
+                                name: 'Bot',
+                                picture: 'https://example.com/bot.png',
+                                tagline: 'Welcome to the chat',
+                            },
+                        }}
+                    />
+                );
+                const {container} = render(aiChat);
+                await waitForRenderCycle();
+
+                // Act
+                const welcomeMessage = container.querySelector('.nlux-comp-wlc_msg')!;
+                expect(welcomeMessage).not.toBeNull();
+                expect(welcomeMessage.textContent).toContain('Welcome to the chat');
+            });
+        });
+    });
+});

specs/specs/aiContext/react/02-context-item-hook.spec.tsx

@@ -1,6 +1,5 @@
 import {AiContext as CoreAiContext} from '@nlux-dev/core/src';
-import {createAiContext} from '@nlux-dev/react/src';
-import {useAiContext} from '@nlux/react';
+import {createAiContext, useAiContext} from '@nlux-dev/react/src';
 import {render} from '@testing-library/react';
 import {useContext} from 'react';
 import {describe, expect, it, vi} from 'vitest';

specs/specs/promptBox/js/placeholder.spec.ts

@@ -1,5 +1,4 @@
-import {AiChat, createAiChat} from '@nlux-dev/core/src';
-import {PromptBoxOptions} from '@nlux/core';
+import {AiChat, createAiChat, PromptBoxOptions} from '@nlux-dev/core/src';
 import {afterEach, beforeEach, describe, expect, it} from 'vitest';
 import {adapterBuilder} from '../../../utils/adapterBuilder';
 import {AdapterController} from '../../../utils/adapters';

specs/specs/promptBox/react/submitShortcut.spec.tsx

@@ -1,5 +1,5 @@
+import {PromptBoxOptions} from '@nlux-dev/core/src';
 import {AiChat} from '@nlux-dev/react/src';
-import {PromptBoxOptions} from '@nlux/core';
 import {render} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {afterEach, beforeEach, describe, expect, it} from 'vitest';

specs/vite.config.ts

@@ -1,3 +1,15 @@
-import v from 'vite';
+/// <reference types="vitest" />
+/// <reference types="vite/client" />
 
-export default v.defineConfig({});
+import react from '@vitejs/plugin-react';
+import {defineConfig} from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react()],
+    test: {
+        globals: true,
+        environment: 'jsdom',
+        setupFiles: ['./vitest.setup.ts'],
+    },
+});

specs/vitest-setup.mjs → specs/vitest.setup.ts

@@ -15,7 +15,7 @@ console.warn = vi.fn();
 console.log = vi.fn();
 console.info = vi.fn();
 
-global.ResizeObserver = ResizeObserver;
-global.HTMLElement.prototype.scroll = vi.fn();
-global.HTMLElement.prototype.scrollTo = vi.fn();
-global.HTMLElement.prototype.scrollIntoView = vi.fn();
+(global as any).ResizeObserver = ResizeObserver;
+(global as any).HTMLElement.prototype.scroll = vi.fn();
+(global as any).HTMLElement.prototype.scrollTo = vi.fn();
+(global as any).HTMLElement.prototype.scrollIntoView = vi.fn();