diff --git a/packages/react/core/src/exports/messageOptions.tsx b/packages/react/core/src/exports/messageOptions.tsx index e6beadfe..de44d33a 100644 --- a/packages/react/core/src/exports/messageOptions.tsx +++ b/packages/react/core/src/exports/messageOptions.tsx @@ -68,9 +68,7 @@ export type FetchResponseComponentProps = { serverResponse: unknown; }; -export type ResponseComponentProps = StreamResponseComponentProps | FetchResponseComponentProps; - -export type ResponseComponent = FC>; +export type ResponseComponent = FC> | FC>; export type PromptComponentProps = { uid: string; diff --git a/packages/react/core/src/exports/props.tsx b/packages/react/core/src/exports/props.tsx index 426fbf9b..45c310ec 100644 --- a/packages/react/core/src/exports/props.tsx +++ b/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 = { * 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 | ChatAdapterBuilder; + adapter: ChatAdapter | StandardChatAdapter | ChatAdapterBuilder; /** * A map of event handlers. diff --git a/packages/react/core/src/index.tsx b/packages/react/core/src/index.tsx index ac76481b..dd5359eb 100644 --- a/packages/react/core/src/index.tsx +++ b/packages/react/core/src/index.tsx @@ -71,7 +71,6 @@ export type { export type { FetchResponseComponentProps, StreamResponseComponentProps, - ResponseComponentProps, ResponseComponent, PromptComponentProps, PromptComponent, diff --git a/pipeline/npm/versions.json b/pipeline/npm/versions.json index 8409368f..c034da95 100644 --- a/pipeline/npm/versions.json +++ b/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" diff --git a/samples/components/react/src/comp/AiChatReactExpo.tsx b/samples/components/react/src/comp/AiChatReactExpo.tsx index aa679157..19e0dfbb 100644 --- a/samples/components/react/src/comp/AiChatReactExpo.tsx +++ b/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 + FetchResponseComponentProps > = (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; } diff --git a/specs/specs/aiChat/options/react/messageOptions-responseComponent.spec.tsx b/specs/specs/aiChat/options/react/messageOptions-responseComponent.spec.tsx index 55438dda..3779d2cc 100644 --- a/specs/specs/aiChat/options/react/messageOptions-responseComponent.spec.tsx +++ b/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(' + messageOptions + responseComponent', () => { it('Should render the custom component', async () => { // Arrange - const CustomResponseComponent: ResponseComponent = ({response}) => ( -
The AI response is: {response}
+ const CustomResponseComponent: ResponseComponent = ({content}) => ( +
The AI response is: {content}
); const {container} = render( @@ -53,9 +53,9 @@ describe(' + messageOptions + responseComponent', () => { it('Should pass uid to the custom component', async () => { // Arrange - const CustomResponseComponent: ResponseComponent = ({response, uid}) => ( + const CustomResponseComponent: ResponseComponent = ({content, uid}) => (
- The AI response is: {response} with uid: {uid} + The AI response is: {content} with uid: {uid}
); @@ -81,7 +81,10 @@ describe(' + messageOptions + responseComponent', () => { expect(customResponseComponentSpy).toHaveBeenCalledWith( expect.objectContaining({ uid: expect.any(String), - response: 'Yo!', + content: 'Yo!', + dataTransferMode: 'fetch', + status: 'complete', + serverResponse: undefined, }), ); }); @@ -89,8 +92,8 @@ describe(' + messageOptions + responseComponent', () => { describe('When the custom response component is removed', () => { it('Should render the default response component', async () => { // Arrange - const CustomResponseComponent: ResponseComponent = ({response, uid}) => ( -
The AI response is: {response} with uid: {uid}
+ const CustomResponseComponent: ResponseComponent = ({content, uid}) => ( +
The AI response is: {content} with uid: {uid}
); const customResponseComponentSpy = vi.fn(CustomResponseComponent); @@ -141,7 +144,10 @@ describe(' + messageOptions + responseComponent', () => { it('Should render the markdown in the custom component as it\'s being generated', async () => { // Arrange - const CustomResponseComponent: ResponseComponent = ({containerRef, response, uid}) => ( + const CustomResponseComponent: ResponseComponent = ({ + containerRef, + uid, + }: StreamResponseComponentProps) => (
Some footer content
diff --git a/specs/specs/ui/react/ChatItem/ChatItem.spec.tsx b/specs/specs/ui/react/ChatItem/ChatItem.spec.tsx index 83223184..aa8d5174 100644 --- a/specs/specs/ui/react/ChatItem/ChatItem.spec.tsx +++ b/specs/specs/ui/react/ChatItem/ChatItem.spec.tsx @@ -1,9 +1,10 @@ +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); @@ -11,8 +12,8 @@ describe('When a custom chat item is rendered', () => { 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) => <>{`THE AI SAID [${content.text}]`}} />; // Act