@botonic/react/lib/esm/webchat/replies/index.js

Build Chatbots using React

import { jsx as _jsx } from "react/jsx-runtime";
import { useContext } from 'react';
import { WEBCHAT } from '../../constants';
import { WebchatContext } from '../../webchat/context';
import { BotonicContainerId } from '../constants';
import { RepliesContainer, ReplyContainer, ScrollableReplies } from './styles';
const options = {
    left: 'flex-start',
    center: 'center',
    right: 'flex-end',
};
export const WebchatReplies = () => {
    var _a;
    const { webchatState, getThemeProperty, repliesRef } = useContext(WebchatContext);
    let justifyContent = 'center';
    const flexWrap = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.wrapReplies, 'wrap');
    if (flexWrap === 'nowrap') {
        justifyContent = 'flex-start';
    }
    else if (getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.alignReplies)) {
        justifyContent =
            options[getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.alignReplies)];
    }
    return (_jsx(ScrollableReplies, { children: _jsx(RepliesContainer, Object.assign({ id: BotonicContainerId.RepliesContainer, ref: repliesRef, className: 'replies-container', justify: justifyContent, wrap: flexWrap }, { children: (_a = webchatState.replies) === null || _a === void 0 ? void 0 : _a.map((reply, i) => (
            // @ts-ignore TODO: In this point reply is the the component to render
            _jsx(ReplyContainer, { children: reply }, `reply-${i}`))) })) }));
};
//# sourceMappingURL=index.js.map