Fixed some unit tests related to custom component props

packages/react/core/src/exports/messageOptions.tsx

@@ -68,9 +68,7 @@ export type FetchResponseComponentProps<AiMsg> = {
     serverResponse: unknown;
 };
 
-export type ResponseComponentProps<AiMsg> = StreamResponseComponentProps<AiMsg> | FetchResponseComponentProps<AiMsg>;
-
-export type ResponseComponent<AiMsg> = FC<ResponseComponentProps<AiMsg>>;
+export type ResponseComponent<AiMsg> = FC<StreamResponseComponentProps<AiMsg>> | FC<FetchResponseComponentProps<AiMsg>>;
 
 export type PromptComponentProps = {
     uid: string;

packages/react/core/src/exports/props.tsx

@@ -1,4 +1,4 @@
-import {ConversationOptions, EventsMap, LayoutOptions, PromptBoxOptions} from '@nlux/core';
+import {ConversationOptions, EventsMap, LayoutOptions, PromptBoxOptions, StandardChatAdapter} from '@nlux/core';
 import {ChatAdapter} from '../../../../shared/src/types/adapters/chat/chatAdapter';
 import {ChatAdapterBuilder} from '../../../../shared/src/types/adapters/chat/chatAdapterBuilder';
 import {ChatItem} from '../../../../shared/src/types/conversation';
@@ -14,7 +14,7 @@ export type AiChatProps<AiMsg> = {
      * You can either provide a standard adapter from @nlux or create a custom adapter.
      * For more information, please visit — https://nlux.dev/learn/adapters
      */
-    adapter: ChatAdapter<AiMsg> | ChatAdapterBuilder<AiMsg>;
+    adapter: ChatAdapter<AiMsg> | StandardChatAdapter<AiMsg> | ChatAdapterBuilder<AiMsg>;
 
     /**
      * A map of event handlers.

packages/react/core/src/index.tsx

@@ -71,7 +71,6 @@ export type {
 export type {
     FetchResponseComponentProps,
     StreamResponseComponentProps,
-    ResponseComponentProps,
     ResponseComponent,
     PromptComponentProps,
     PromptComponent,

pipeline/npm/versions.json

@@ -1,6 +1,6 @@
 {
   "inherit": true,
-  "nlux": "2.0.12-alpha",
+  "nlux": "2.0.0-beta",
   "peerDependencies": {
     "react": "18.2.0",
     "react-dom": "18.2.0"

samples/components/react/src/comp/AiChatReactExpo.tsx

@@ -1,11 +1,4 @@
-import {
-    AiChat,
-    AiChatProps,
-    DataTransferMode,
-    FetchResponseComponentProps,
-    PersonaOptions,
-    ResponseComponentProps,
-} from '@nlux-dev/react/src';
+import {AiChat, AiChatProps, DataTransferMode, FetchResponseComponentProps, PersonaOptions} from '@nlux-dev/react/src';
 import {ChatItem} from '@nlux/core';
 import {useChatAdapter} from '@nlux/langchain-react';
 import {FC, useMemo, useState} from 'react';
@@ -17,12 +10,13 @@ const possibleColors = ['red', 'green', 'blue', 'yellow', 'purple'];
 const possibleBackgrounds = ['white', 'black', 'gray', 'lightgray', 'darkgray'];
 
 const CustomMessageComponent: FC<
-    ResponseComponentProps<MessageObjectType>
+    FetchResponseComponentProps<MessageObjectType>
 > = (props) => {
     const color = useMemo(() => possibleColors[Math.floor(Math.random() * possibleColors.length)], []);
     const bg = useMemo(() => possibleBackgrounds[Math.floor(Math.random() * possibleBackgrounds.length)], []);
 
-    if (props.dataTransferMode === 'stream') {
+    // This custom component does not support streaming mode
+    if ((props as any).dataTransferMode === 'stream') {
         // This custom component does not support streaming mode
         return null;
     }

specs/specs/aiChat/options/react/messageOptions-responseComponent.spec.tsx

@@ -1,4 +1,4 @@
-import {AiChat, ResponseComponent} from '@nlux-dev/react/src';
+import {AiChat, ResponseComponent, StreamResponseComponentProps} from '@nlux-dev/react/src';
 import {render, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {act} from 'react';
@@ -24,8 +24,8 @@ describe('<AiChat /> + messageOptions + responseComponent', () => {
 
         it('Should render the custom component', async () => {
             // Arrange
-            const CustomResponseComponent: ResponseComponent<string> = ({response}) => (
-                <div>The AI response is: {response}</div>
+            const CustomResponseComponent: ResponseComponent<string> = ({content}) => (
+                <div>The AI response is: {content}</div>
             );
 
             const {container} = render(
@@ -53,9 +53,9 @@ describe('<AiChat /> + messageOptions + responseComponent', () => {
 
         it('Should pass uid to the custom component', async () => {
             // Arrange
-            const CustomResponseComponent: ResponseComponent<string> = ({response, uid}) => (
+            const CustomResponseComponent: ResponseComponent<string> = ({content, uid}) => (
                 <div>
-                    The AI response is: {response} with uid: {uid}
+                    The AI response is: {content} with uid: {uid}
                 </div>
             );
 
@@ -81,16 +81,19 @@ describe('<AiChat /> + messageOptions + responseComponent', () => {
             expect(customResponseComponentSpy).toHaveBeenCalledWith(
                 expect.objectContaining({
                     uid: expect.any(String),
-                    response: 'Yo!',
+                    content: 'Yo!',
+                    dataTransferMode: 'fetch',
+                    status: 'complete',
+                    serverResponse: undefined,
                 }),
             );
         });
 
         describe('When the custom response component is removed', () => {
             it('Should render the default response component', async () => {
                 // Arrange
-                const CustomResponseComponent: ResponseComponent<string> = ({response, uid}) => (
-                    <div>The AI response is: {response} with uid: {uid}</div>
+                const CustomResponseComponent: ResponseComponent<string> = ({content, uid}) => (
+                    <div>The AI response is: {content} with uid: {uid}</div>
                 );
 
                 const customResponseComponentSpy = vi.fn(CustomResponseComponent);
@@ -141,7 +144,10 @@ describe('<AiChat /> + messageOptions + responseComponent', () => {
 
         it('Should render the markdown in the custom component as it\'s being generated', async () => {
             // Arrange
-            const CustomResponseComponent: ResponseComponent<string> = ({containerRef, response, uid}) => (
+            const CustomResponseComponent: ResponseComponent<string> = ({
+                containerRef,
+                uid,
+            }: StreamResponseComponentProps<string>) => (
                 <div className="some-streamed-response">
                     <div className="content" ref={containerRef}/>
                     <div className="footer">Some footer content</div>

specs/specs/ui/react/ChatItem/ChatItem.spec.tsx

@@ -1,18 +1,19 @@
+import {FetchResponseComponentProps} from '@nlux-dev/react/src';
 import {ChatItemComp} from '@nlux-dev/react/src/ui/ChatItem/ChatItemComp';
 import {render} from '@testing-library/react';
 import {forwardRef} from 'react';
 import {describe, expect, it} from 'vitest';
 
-describe('When a custom chat item is rendered', () => {
+describe('When a custom chat item is provided', () => {
     it('Should render the custom chat item', async () => {
         // Arrange
         const ForwardRefChatItemComp = forwardRef(ChatItemComp);
         const component = <ForwardRefChatItemComp
             uid={'1'}
             direction={'incoming'}
             status={'complete'}
-            message={'Hello'}
-            responseRenderer={({response}: any) => <>{`THE AI SAID [${response}]`}</>}
+            fetchedContent={'Hello'}
+            responseRenderer={({content}: any) => <>{`THE AI SAID [${content}]`}</>}
         />;
 
         // Act
@@ -29,8 +30,8 @@ describe('When a custom chat item is rendered', () => {
             uid={'1'}
             direction={'incoming'}
             status={'complete'}
-            message={{text: 'Hello Jason!'}}
-            responseRenderer={({response}: any) => <>{`THE AI SAID [${response.text}]`}</>}
+            fetchedContent={{text: 'Hello Jason!'}}
+            responseRenderer={({content}: FetchResponseComponentProps<any>) => <>{`THE AI SAID [${content.text}]`}</>}
         />;
 
         // Act