# 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

```jsx
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

```jsx
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.

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v12/components/ai/hooks/](https://getstream.io/chat/docs/sdk/react/v12/components/ai/hooks/).