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 ? ( <View> <Text>The chat-bot is currently thinking...</Text> </View> ) : null; }; const App = () => ( <Chat client={client} isMessageAIGenerated={isMessageAIGenerated}> <Channel channel={channel}> <MessageList /> <MyAIStateIndicator /> <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.
useStreamingMessage
A hook that returns text in a streamed, typewriter fashion. The speed of streaming is configurable through the letterInterval and renderingLetterCount properties.
Example usage
const isMessageAIGenerated = (message) => !!message.ai_generated; const MyStreamedMessageText = ({ message: messageFromProps }) => { const { message: messageFromContext } = useMessageContext(); const { text = "" } = messageFromProps || messageFromContext; const { streamedMessageText } = useStreamingMessage({ renderingLetterCount: 2, letterInterval: 30, text, }); return ( <MessageTextContainer message={{ ...message, text: streamedMessageText }} /> ); }; 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 useStreamingMessage hook to make the typewriter animation of the text much slower.