React
iOS
Android
Flutter
Angular
JavaScript
Unity
Unreal
Node
Python
Ruby
PHP
Java
.NET
Go
RESTconst isMessageAIGenerated = (message) => !!message.ai_generated; const MyAIStateIndicator = () => { const { aiState } = useAIState(); return aiState === AIStates.Thinking ? ( <div> <p>The chat-bot is currently thinking...</p> </div> ) : null; }; const App = () => ( <Chat client={client} isMessageAIGenerated={isMessageAIGenerated}> <Channel channel={channel}> <MessageList /> <AIStateIndicator /> <MessageInput /> </Channel> </Chat> );Hooks
Our SDK provides 2 new hooks that can be used as utilities to allow us to more easily create customizations of components.
useAIState
This hook returns the current AI State for a given channel.
Example usage
In the example above, we create a custom AIStateIndicator, which is only triggered while the AI is in a AI_STATE_THINKING state.
useMessageTextStreaming
A hook that returns text in a streamed, typewriter fashion. The speed of streaming is configurable through the streamingLetterIntervalMs and renderingLetterCount properties.
Example usage
const isMessageAIGenerated = (message) => !!message.ai_generated; const MyStreamedMessageText = ({ message: messageFromProps, renderText }) => { const { message: messageFromContext } = useMessageContext( 'StreamedMessageText', ); const { text = '' } = messageFromProps || messageFromContext const { streamedMessageText } = useMessageTextStreaming({ renderingLetterCount: 1, streamingLetterIntervalMs: 10, text, }); return ( <MessageText message={{ ...message, text: streamedMessageText }} renderText={renderText} /> ); } const App = () => ( <Chat client={client} isMessageAIGenerated={isMessageAIGenerated}> <Channel channel={channel} StreamedMessageText={MyStreamedMessageText}> <MessageList /> <MessageInput /> </Channel> </Chat> );The example above overrides the default StreamedMessageText component and utilizes the useMessageTextStreaming hook to make the typewriter animation of the text much faster.