diff --git a/samples/aiChat/react/src/App.tsx b/samples/aiChat/react/src/App.tsx index 14daa464..b8485d92 100644 --- a/samples/aiChat/react/src/App.tsx +++ b/samples/aiChat/react/src/App.tsx @@ -7,15 +7,21 @@ import {useChatAdapter as useNlbridgeChatAdapter} from '@nlux-dev/nlbridge-react // import {createUnsafeChatAdapter as useOpenAiChatAdapter} from '@nlux-dev/openai/src'; import {AiChat, ChatItem, FetchResponseComponentProps, StreamResponseComponentProps} from '@nlux-dev/react/src'; import './App.css'; +import {useCallback, useState} from 'react'; function App() { + const [dataTransferMode, setDataTransferMode] = useState<'fetch' | 'stream'>('fetch'); + const onDataTransferModeChange = useCallback((e) => { + setDataTransferMode(e.target.value as 'fetch' | 'stream'); + }, [setDataTransferMode]); + const nlBridgeAdapter = useNlbridgeChatAdapter({ url: 'http://localhost:8899/', }); const langChainAdapter = useChatLangChainChatAdapter({ url: 'https://pynlux.api.nlux.ai/einbot', - dataTransferMode: 'stream', + dataTransferMode, useInputSchema: true, }); @@ -66,83 +72,89 @@ function App() { ]; return ( - { - return ( -
-
{prompt}
-
Custom Prompt Component + <> + + { + return ( +
+
{prompt}
+
Custom Prompt Component +
-
- ); - }, - responseComponent: (props) => { - const {dataTransferMode} = props; - const propsForFetch = props as FetchResponseComponentProps; - const propsForStream = props as StreamResponseComponentProps; + ); + }, + responseComponent: (props) => { + const {dataTransferMode} = props; + const propsForFetch = props as FetchResponseComponentProps; + const propsForStream = props as StreamResponseComponentProps; - console.log('Response Component Props'); - console.dir(props); + console.log('Response Component Props'); + console.dir(props); - return ( - <> - {(dataTransferMode === 'fetch') &&
{propsForFetch.content}
} - {(dataTransferMode === 'stream') &&
} -
Custom Response Component -
- - ); - }, - }} - personaOptions={{ - user: { - name: 'Mr User', - // picture: 'https://nlux.ai/images/demos/persona-user.jpeg', - picture:
JsX
, - }, - bot: { - name: 'Harry Botter', - picture: 'https://nlux.ai/images/demos/persona-harry-botter.jpg', - tagline: 'Your friendly AI assistant', - }, - }} - /> + return ( + <> + {(dataTransferMode === 'fetch') &&
{propsForFetch.content}
} + {(dataTransferMode === 'stream') &&
} +
Custom Response Component +
+ + ); + }, + }} + personaOptions={{ + user: { + name: 'Mr User', + // picture: 'https://nlux.ai/images/demos/persona-user.jpeg', + picture:
JsX
, + }, + bot: { + name: 'Harry Botter', + picture: 'https://nlux.ai/images/demos/persona-harry-botter.jpg', + tagline: 'Your friendly AI assistant', + }, + }} + /> + ); }