Added test for markdown in initialConversation

nlkitai · Jun 5, 2024 · 88f3709 · 88f3709
1 parent 132e0b9
commit 88f3709
Show file tree

Hide file tree

Showing 10 changed files with 113 additions and 14 deletions.
diff --git a/packages/react/core/src/exports/messageOptions.tsx b/packages/react/core/src/exports/messageOptions.tsx
@@ -51,6 +51,9 @@ export type ResponseRenderer<AiMsg> = FC<
     StreamResponseComponentProps<AiMsg> | BatchResponseComponentProps<AiMsg>
 >;
 
+export type BatchResponseRenderer<AiMsg> = FC<BatchResponseComponentProps<AiMsg>>;
+export type StreamResponseRenderer<AiMsg> = FC<StreamResponseComponentProps<AiMsg>>;
+
 export type PromptRendererProps = {
     uid: string;
     prompt: string;
@@ -62,7 +65,10 @@ export type ReactSpecificMessageOptions<AiMsg> = {
     /**
      * Custom React component to render the message received from the AI.
      */
-    responseRenderer?: ResponseRenderer<AiMsg>;
+    responseRenderer?:
+        ResponseRenderer<AiMsg> |
+        FC<BatchResponseComponentProps<AiMsg>> |
+        FC<StreamResponseComponentProps<AiMsg>>;
 
     /**
      * Custom React component to render the message sent by the user.

diff --git a/packages/react/core/src/index.tsx b/packages/react/core/src/index.tsx
@@ -79,12 +79,14 @@ export type {
 } from './types/conversationOptions';
 
 export type {
+    MessageOptions,
+    ResponseRenderer,
+    BatchResponseRenderer,
     BatchResponseComponentProps,
+    StreamResponseRenderer,
     StreamResponseComponentProps,
-    ResponseRenderer,
-    PromptRendererProps,
     PromptRenderer,
-    MessageOptions,
+    PromptRendererProps,
 } from './exports/messageOptions';
 
 export {

diff --git a/packages/react/core/src/sections/MessageRenderer/MessageRenderer.tsx b/packages/react/core/src/sections/MessageRenderer/MessageRenderer.tsx
@@ -28,8 +28,7 @@ export const createMessageRenderer: <AiMsg>(
     //
     // A custom response renderer is provided by the user.
     //
-    if (
-        messageOptions?.responseRenderer !== undefined) {
+    if (messageOptions?.responseRenderer !== undefined) {
         //
         // Streaming into a custom renderer.
         //
@@ -41,7 +40,7 @@ export const createMessageRenderer: <AiMsg>(
                 containerRef: containerRefToUse as RefObject<never>,
             };
 
-            return () => (messageOptions?.responseRenderer as FC<StreamResponseComponentProps<AiMsg>>)(props);
+            return () => (messageOptions.responseRenderer as FC<StreamResponseComponentProps<AiMsg>>)(props);
         } else {
             //
             // Batching data and displaying it in a custom renderer.
@@ -54,7 +53,7 @@ export const createMessageRenderer: <AiMsg>(
                 dataTransferMode,
             };
 
-            return () => (messageOptions?.responseRenderer as FC<BatchResponseComponentProps<AiMsg>>)(props);
+            return () => (messageOptions.responseRenderer as FC<BatchResponseComponentProps<AiMsg>>)(props);
         }
     }
 
@@ -78,6 +77,7 @@ export const createMessageRenderer: <AiMsg>(
                     htmlSanitizer: messageOptions?.htmlSanitizer,
                     markdownLinkTarget: messageOptions?.markdownLinkTarget,
                     showCodeBlockCopyButton: messageOptions?.showCodeBlockCopyButton,
+                    skipStreamingAnimation: messageOptions?.skipStreamingAnimation,
                 }}
             />
         );

diff --git a/packages/react/core/src/sections/StreamContainer/props.ts b/packages/react/core/src/sections/StreamContainer/props.ts
@@ -1,14 +1,14 @@
 import {HighlighterExtension, SanitizerExtension} from '@nlux/core';
 import {MessageDirection} from '@shared/components/Message/props';
-import {ResponseRenderer} from '../../exports/messageOptions';
+import {BatchResponseRenderer, ResponseRenderer, StreamResponseRenderer} from '../../exports/messageOptions';
 
 export type StreamContainerProps<AisMsg> = {
     uid: string,
     direction: MessageDirection,
     status: 'streaming' | 'complete';
     initialMarkdownMessage?: string;
-    responseRenderer?: ResponseRenderer<AisMsg>;
-    promptRenderer?: ResponseRenderer<AisMsg>;
+    responseRenderer?: ResponseRenderer<AisMsg> | BatchResponseRenderer<AisMsg> | StreamResponseRenderer<AisMsg>;
+    promptRenderer?: BatchResponseRenderer<AisMsg>;
     markdownOptions?: {
         syntaxHighlighter?: HighlighterExtension;
         htmlSanitizer?: SanitizerExtension;

diff --git a/packages/shared/src/types/markdown/snapshotParser.ts b/packages/shared/src/types/markdown/snapshotParser.ts
@@ -6,6 +6,7 @@ export type SnapshotParserOptions = {
     htmlSanitizer?: SanitizerExtension;
     markdownLinkTarget?: 'blank' | 'self';
     showCodeBlockCopyButton?: boolean;
+    skipStreamingAnimation?: boolean;
 };
 
 export type SnapshotParser = (
@@ -15,5 +16,6 @@ export type SnapshotParser = (
         htmlSanitizer?: SanitizerExtension;
         markdownLinkTarget?: 'blank' | 'self',
         showCodeBlockCopyButton?: boolean;
+        skipStreamingAnimation?: boolean;
     },
 ) => string;
diff --git a/samples/aiChat/react/src/App.tsx b/samples/aiChat/react/src/App.tsx
@@ -113,6 +113,10 @@ function App() {
         + 'This is a code block.';
 
     const initialConversation: ChatItem<string>[] = [
+        {
+            role: 'assistant',
+            message: 'Hello, **how can I help you?**\n# AI speaking\nCheers!',
+        },
         {
             role: 'assistant',
             message: longMessage,

diff --git a/specs/specs/aiChat/options/react/initialConversation.spec.tsx b/specs/specs/aiChat/options/react/initialConversation.spec.tsx
@@ -3,7 +3,7 @@ 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 {waitForMilliseconds, waitForReactRenderCycle} from '../../../../utils/wait';
+import {waitForMdStreamToComplete, waitForMilliseconds, waitForReactRenderCycle} from '../../../../utils/wait';
 
 describe('<AiChat /> + initialConversation prop', () => {
     let adapterController: AdapterController | undefined;
@@ -81,6 +81,38 @@ describe('<AiChat /> + initialConversation prop', () => {
             expect(receivedMessage.textContent).toEqual(expect.stringContaining('We find connection, hand in hand'));
         });
 
+        it('The markdown in assistant responses should be parsed', async () => {
+            // Arrange
+            const initialConversation: ChatItem<string>[] = [
+                {
+                    role: 'assistant',
+                    message: 'Hello, **how can I help you?**\n# AI speaking\nCheers!',
+                },
+                {
+                    role: 'user', message: 'I need help with my account.',
+                },
+            ];
+
+            const aiChat = (
+                <AiChat
+                    adapter={adapterController!.adapter}
+                    initialConversation={initialConversation}
+                />
+            );
+
+            render(aiChat);
+            await waitForMdStreamToComplete();
+
+            // Act
+            const aiChatDom = document.querySelector('.nlux-AiChat-root')!;
+
+            // Assert
+            const receivedMessage = aiChatDom.querySelector('.nlux_msg_received')!;
+            expect(receivedMessage.innerHTML).toEqual(expect.stringContaining(
+                '<p>Hello, <strong>how can I help you?</strong></p>\n<h1>AI speaking</h1>\n<p>Cheers!</p>',
+            ));
+        });
+
         it('The scroll should be at the bottom of the chat', async () => {
             // Arrange
             const initialConversation: ChatItem<string>[] = [

diff --git a/specs/specs/customRenderers/react/responseRenderer-initialConversation.spec.tsx b/specs/specs/customRenderers/react/responseRenderer-initialConversation.spec.tsx
@@ -0,0 +1,53 @@
+import {AiChat, BatchResponseComponentProps} from '@nlux-dev/react/src';
+import {render} from '@testing-library/react';
+import {FC} from 'react';
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+import {adapterBuilder} from '../../../utils/adapterBuilder';
+import {AdapterController} from '../../../utils/adapters';
+import {waitForReactRenderCycle} from '../../../utils/wait';
+
+describe('<AiChat /> + responseRenderer + initialConversation', () => {
+    let adapterController: AdapterController | undefined = undefined;
+
+    describe('When a response renderer is used with initial conversation', () => {
+        beforeEach(() => {
+            adapterController = adapterBuilder()
+                .withBatchText(true)
+                .withStreamText(false)
+                .create();
+        });
+
+        afterEach(() => {
+            adapterController = undefined;
+        });
+
+        it('Should render the custom component for the initial conversation messages', async () => {
+            // Arrange
+            const CustomResponseComponent: FC<BatchResponseComponentProps<string>> = ({content}) => (
+                <div>The AI response is: {content}</div>
+            );
+
+
+            // Act
+            const {container} = render(
+                <AiChat
+                    adapter={adapterController!.adapter}
+                    initialConversation={[
+                        {role: 'user', message: 'Hello'},
+                        {role: 'assistant', message: 'Hi. How can I help you?'},
+                    ]}
+                    messageOptions={{
+                        responseRenderer: CustomResponseComponent,
+                    }}
+                />,
+            );
+            await waitForReactRenderCycle();
+
+            // Assert
+            const responseElement = container.querySelector('.nlux-comp-chatItem--received');
+            expect(responseElement!.innerHTML).toEqual(
+                expect.stringContaining('<div>The AI response is: Hi. How can I help you?</div>'),
+            );
+        });
+    });
+});
diff --git a/specs/specs/markdown/12-hyperlink.spec.ts b/specs/specs/markdown/12-hyperlink.spec.ts
@@ -3,7 +3,7 @@ import {createMdStreamRenderer} from '@shared/markdown/stream/streamParser';
 import {StandardStreamParserOutput} from '@shared/types/markdown/streamParser';
 import {waitForMdStreamToComplete} from '../../utils/wait';
 
-describe('Asterisk Italic Markdowns Parser', () => {
+describe('Hyperlinks Markdowns Parser', () => {
     let streamRenderer: StandardStreamParserOutput;
     let rootElement: HTMLElement;
 

diff --git a/specs/utils/wait.ts b/specs/utils/wait.ts
@@ -17,6 +17,6 @@ export const waitForMilliseconds = (milliseconds: number) => new Promise(resolve
 });
 
 export const waitForMdStreamToComplete = (streamLength: number = 20) => new Promise(resolve => {
-    const duration = streamLength * 5; // 10ms wait per character
+    const duration = streamLength * 10; // 10ms wait per character
     setTimeout(resolve, duration);
 });