stream-chat-react/dist/components/MessageInput/MessageInput.js

React components to create chat conversations or livestream style chat

import React, { useEffect } from 'react';
import { MessageInputFlat } from './MessageInputFlat';
import { useMessageComposer } from './hooks';
import { useCooldownTimer } from './hooks/useCooldownTimer';
import { useCreateMessageInputContext } from './hooks/useCreateMessageInputContext';
import { useMessageInputControls } from './hooks/useMessageInputControls';
import { useComponentContext } from '../../context/ComponentContext';
import { MessageInputContextProvider } from '../../context/MessageInputContext';
import { DialogManagerProvider } from '../../context';
import { useStableId } from '../UtilityComponents/useStableId';
import { useRegisterDropHandlers } from './WithDragAndDropUpload';
const MessageInputProvider = (props) => {
    const cooldownTimerState = useCooldownTimer();
    const messageInputUiApi = useMessageInputControls(props);
    const { emojiSearchIndex } = useComponentContext('MessageInput');
    const messageInputContextValue = useCreateMessageInputContext({
        ...cooldownTimerState,
        ...messageInputUiApi,
        ...props,
        emojiSearchIndex: props.emojiSearchIndex ?? emojiSearchIndex,
    });
    const messageComposer = useMessageComposer();
    useEffect(() => () => {
        messageComposer.createDraft();
    }, [messageComposer]);
    useEffect(() => {
        const threadId = messageComposer.threadId;
        if (!threadId ||
            !messageComposer.channel ||
            !messageComposer.compositionIsEmpty ||
            !messageComposer.config.drafts.enabled)
            return;
        // get draft data for legacy thead composer
        messageComposer.channel
            .getDraft({ parent_id: threadId })
            .then(({ draft }) => {
            if (draft) {
                messageComposer.initState({ composition: draft });
            }
        })
            .catch(console.error);
    }, [messageComposer]);
    useRegisterDropHandlers();
    return (React.createElement(MessageInputContextProvider, { value: messageInputContextValue }, props.children));
};
const UnMemoizedMessageInput = (props) => {
    const { Input: PropInput } = props;
    const { Input: ContextInput } = useComponentContext('MessageInput');
    const messageComposer = useMessageComposer();
    const id = useStableId();
    const Input = PropInput || ContextInput || MessageInputFlat;
    const dialogManagerId = messageComposer.threadId
        ? `message-input-dialog-manager-thread-${id}`
        : `message-input-dialog-manager-${id}`;
    return (React.createElement(DialogManagerProvider, { id: dialogManagerId },
        React.createElement(MessageInputProvider, { ...props },
            React.createElement(Input, null))));
};
/**
 * A high level component that has provides all functionality to the Input it renders.
 */
export const MessageInput = React.memo(UnMemoizedMessageInput);