stream-chat-react/dist/components/Message/StreamedMessageText.js

React components to create chat conversations or livestream style chat

import React, { useEffect } from 'react';
import { MessageText } from './MessageText';
import { useChannelStateContext, useMessageContext } from '../../context';
import { useMessageTextStreaming } from './hooks';
export const StreamedMessageText = (props) => {
    const { message: messageFromProps, renderingLetterCount, renderText, streamingLetterIntervalMs, } = props;
    const { message: messageFromContext } = useMessageContext('StreamedMessageText');
    const { channel } = useChannelStateContext();
    const message = messageFromProps || messageFromContext;
    const { text = '' } = message;
    const { skipAnimation, streamedMessageText } = useMessageTextStreaming({
        renderingLetterCount,
        streamingLetterIntervalMs,
        text,
    });
    useEffect(() => {
        channel?.on('ai_indicator.stop', () => {
            skipAnimation();
        });
    }, [channel, skipAnimation]);
    return (React.createElement(MessageText, { message: { ...message, text: streamedMessageText }, renderText: renderText }));
};