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 ? (
    <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>
);

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<StreamChatGenerics>(
    '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.

UI Components

ChatView