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

React components to create chat conversations or livestream style chat

import React, { useMemo } from 'react';
import { ChannelSearchSource, MessageSearchSource, SearchController, UserSearchSource, } from 'stream-chat';
import { useChat } from './hooks/useChat';
import { useCreateChatContext } from './hooks/useCreateChatContext';
import { useChannelsQueryState } from './hooks/useChannelsQueryState';
import { ChatProvider } from '../../context/ChatContext';
import { TranslationProvider } from '../../context/TranslationContext';
import { ModalDialogManagerProvider } from '../../context';
/**
 * Wrapper component for a StreamChat application. Chat needs to be placed around any other chat components
 * as it provides the ChatContext.
 */
export const Chat = (props) => {
    const { children, client, customClasses, defaultLanguage, i18nInstance, initialNavOpen = true, isMessageAIGenerated, searchController: customChannelSearchController, theme = 'messaging light', useImageFlagEmojisOnWindows = false, } = props;
    const { channel, closeMobileNav, getAppSettings, latestMessageDatesByChannels, mutes, navOpen, openMobileNav, setActiveChannel, translators, } = useChat({ client, defaultLanguage, i18nInstance, initialNavOpen });
    const channelsQueryState = useChannelsQueryState();
    const searchController = useMemo(() => customChannelSearchController ??
        new SearchController({
            sources: [
                new ChannelSearchSource(client),
                new UserSearchSource(client),
                new MessageSearchSource(client),
            ],
        }), [client, customChannelSearchController]);
    const chatContextValue = useCreateChatContext({
        channel,
        channelsQueryState,
        client,
        closeMobileNav,
        customClasses,
        getAppSettings,
        isMessageAIGenerated,
        latestMessageDatesByChannels,
        mutes,
        navOpen,
        openMobileNav,
        searchController,
        setActiveChannel,
        theme,
        useImageFlagEmojisOnWindows,
    });
    if (!translators.t)
        return null;
    return (React.createElement(ChatProvider, { value: chatContextValue },
        React.createElement(TranslationProvider, { value: translators },
            React.createElement(ModalDialogManagerProvider, null, children))));
};