@botonic/react/lib/cjs/components/image.js

Build Chatbots using React

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Image = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@botonic/core");
const react_1 = require("react");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const constants_1 = require("../constants");
const environment_1 = require("../util/environment");
const context_1 = require("../webchat/context");
const message_1 = require("./message");
const StyledImage = styled_components_1.default.img `
  border-radius: 8px;
  max-width: 150px;
  max-height: 150px;
  margin: -3px -6px;
  cursor: ${({ hasPreviewer }) => (hasPreviewer ? 'pointer' : 'auto')};
`;
const serialize = (imageProps) => {
    return { image: imageProps.src };
};
const Image = (props) => {
    var _a;
    props = ((_a = props.input) === null || _a === void 0 ? void 0 : _a.data)
        ? Object.assign(Object.assign({}, props), { src: props.input.data }) : Object.assign(Object.assign({}, props), { src: (0, environment_1.staticAsset)(props.src) });
    let content = props.children;
    const [isPreviewerOpened, setIsPreviewerOpened] = (0, react_1.useState)(false);
    const openPreviewer = () => setIsPreviewerOpened(true);
    const closePreviewer = () => setIsPreviewerOpened(false);
    const { getThemeProperty } = (0, react_1.useContext)(context_1.WebchatContext);
    const ImagePreviewer = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.imagePreviewer);
    if ((0, core_1.isBrowser)()) {
        content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(StyledImage, { src: props.src, onClick: openPreviewer, hasPreviewer: Boolean(ImagePreviewer) }), ImagePreviewer && ((0, jsx_runtime_1.jsx)(ImagePreviewer, { src: props.src, isPreviewerOpened: isPreviewerOpened, openPreviewer: openPreviewer, closePreviewer: closePreviewer }))] }));
    }
    return ((0, jsx_runtime_1.jsx)(message_1.Message, Object.assign({ role: constants_1.ROLES.IMAGE_MESSAGE, json: serialize(props) }, props, { type: core_1.INPUT.IMAGE }, { children: content })));
};
exports.Image = Image;
exports.Image.serialize = serialize;
//# sourceMappingURL=image.js.map