@botonic/react/lib/esm/webchat/header/default-header.js

Build Chatbots using React

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext } from 'react';
import { ROLES, WEBCHAT } from '../../constants';
import { Scale } from '../../shared/styles';
import { resolveImage } from '../../util/environment';
import { ConditionalWrapper } from '../../util/react';
import { WebchatContext } from '../../webchat/context';
import { CloseHeader, HeaderContainer, ImageContainer, Subtitle, TextContainer, Title, } from './styles';
export const DefaultHeader = () => {
    const { getThemeProperty, toggleWebchat } = useContext(WebchatContext);
    const animationsEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableAnimations);
    const headerImage = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerImage, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandImage));
    const headerTitle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerTitle);
    const headerSubtitle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerSubtitle);
    const handleCloseWebchat = () => {
        toggleWebchat(false);
    };
    const color = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandColor);
    return (_jsxs(HeaderContainer, Object.assign({ role: ROLES.HEADER, color: color, style: Object.assign({}, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerStyle)) }, { children: [headerImage && (_jsx(ImageContainer, { children: _jsx("img", { src: resolveImage(headerImage) }) })), _jsxs(TextContainer, { children: [_jsx(Title, { children: headerTitle }), headerSubtitle ? _jsx(Subtitle, { children: headerSubtitle }) : null] }), _jsx(ConditionalWrapper, Object.assign({ condition: animationsEnabled, wrapper: children => _jsx(Scale, { children: children }) }, { children: _jsx(CloseHeader, Object.assign({ onClick: handleCloseWebchat }, { children: "\u2A2F" })) }))] })));
};
//# sourceMappingURL=default-header.js.map