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

const 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>
);

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.

UI Components

Overview