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

React components to create chat conversations or livestream style chat

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import React, { useEffect } from 'react';
import { MESSAGE_ACTIONS } from '../Message';
import { MessageInput, MessageInputFlat, MessageInputSmall, } from '../MessageInput';
import { MessageList, VirtualizedMessageList, } from '../MessageList';
import { ThreadHeader as DefaultThreadHeader } from './ThreadHeader';
import { ThreadHead as DefaultThreadHead } from '../Thread/ThreadHead';
import { useChannelActionContext, useChannelStateContext, useChatContext, useComponentContext, } from '../../context';
/**
 * The Thread component renders a parent Message with a list of replies
 */
export var Thread = function (props) {
    var _a = useChannelStateContext('Thread'), channel = _a.channel, channelConfig = _a.channelConfig, thread = _a.thread;
    if (!thread || (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.replies) === false)
        return null;
    // The wrapper ensures a key variable is set and the component recreates on thread switch
    return React.createElement(ThreadInner, __assign({}, props, { key: "thread-".concat(thread.id, "-").concat(channel === null || channel === void 0 ? void 0 : channel.cid) }));
};
var ThreadInner = function (props) {
    var _a, _b;
    var additionalMessageInputProps = props.additionalMessageInputProps, additionalMessageListProps = props.additionalMessageListProps, additionalParentMessageProps = props.additionalParentMessageProps, additionalVirtualizedMessageListProps = props.additionalVirtualizedMessageListProps, _c = props.autoFocus, autoFocus = _c === void 0 ? true : _c, _d = props.enableDateSeparator, enableDateSeparator = _d === void 0 ? false : _d, _e = props.fullWidth, fullWidth = _e === void 0 ? false : _e, PropInput = props.Input, PropMessage = props.Message, _f = props.messageActions, messageActions = _f === void 0 ? Object.keys(MESSAGE_ACTIONS) : _f, virtualized = props.virtualized;
    var _g = useChannelStateContext('Thread'), thread = _g.thread, threadHasMore = _g.threadHasMore, threadLoadingMore = _g.threadLoadingMore, threadMessages = _g.threadMessages, threadSuppressAutoscroll = _g.threadSuppressAutoscroll;
    var _h = useChannelActionContext('Thread'), closeThread = _h.closeThread, loadMoreThread = _h.loadMoreThread;
    var _j = useChatContext('Thread'), customClasses = _j.customClasses, themeVersion = _j.themeVersion;
    var _k = useComponentContext('Thread'), ContextInput = _k.ThreadInput, ContextMessage = _k.Message, _l = _k.ThreadHead, ThreadHead = _l === void 0 ? DefaultThreadHead : _l, _m = _k.ThreadHeader, ThreadHeader = _m === void 0 ? DefaultThreadHeader : _m, VirtualMessage = _k.VirtualMessage;
    var ThreadInput = (_b = (_a = PropInput !== null && PropInput !== void 0 ? PropInput : additionalMessageInputProps === null || additionalMessageInputProps === void 0 ? void 0 : additionalMessageInputProps.Input) !== null && _a !== void 0 ? _a : ContextInput) !== null && _b !== void 0 ? _b : (themeVersion === '2' ? MessageInputFlat : MessageInputSmall);
    var ThreadMessage = PropMessage || (additionalMessageListProps === null || additionalMessageListProps === void 0 ? void 0 : additionalMessageListProps.Message);
    var FallbackMessage = virtualized && VirtualMessage ? VirtualMessage : ContextMessage;
    var MessageUIComponent = ThreadMessage || FallbackMessage;
    var ThreadMessageList = virtualized ? VirtualizedMessageList : MessageList;
    useEffect(function () {
        if ((thread === null || thread === void 0 ? void 0 : thread.id) && (thread === null || thread === void 0 ? void 0 : thread.reply_count)) {
            loadMoreThread();
        }
    }, []);
    if (!thread)
        return null;
    var threadClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.thread) || 'str-chat__thread-container str-chat__thread';
    var head = (React.createElement(ThreadHead, __assign({ key: thread.id, message: thread, Message: MessageUIComponent }, additionalParentMessageProps)));
    return (React.createElement("div", { className: "".concat(threadClass, " ").concat(fullWidth ? 'str-chat__thread--full' : '') },
        React.createElement(ThreadHeader, { closeThread: closeThread, thread: thread }),
        React.createElement(ThreadMessageList, __assign({ disableDateSeparator: !enableDateSeparator, hasMore: threadHasMore, head: head, loadingMore: threadLoadingMore, loadMore: loadMoreThread, Message: MessageUIComponent, messageActions: messageActions, messages: threadMessages || [], suppressAutoscroll: threadSuppressAutoscroll, threadList: true }, (virtualized ? additionalVirtualizedMessageListProps : additionalMessageListProps))),
        React.createElement(MessageInput, __assign({ focus: autoFocus, Input: ThreadInput, parent: thread, publishTypingEvent: false }, additionalMessageInputProps))));
};