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

Build Chatbots using React

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { INPUT, isBrowser } from '@botonic/core';
import { useContext, useState } from 'react';
import styled from 'styled-components';
import { ROLES, WEBCHAT } from '../constants';
import { staticAsset } from '../util/environment';
import { WebchatContext } from '../webchat/context';
import { Message } from './message';
const StyledImage = styled.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 };
};
export 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: staticAsset(props.src) });
    let content = props.children;
    const [isPreviewerOpened, setIsPreviewerOpened] = useState(false);
    const openPreviewer = () => setIsPreviewerOpened(true);
    const closePreviewer = () => setIsPreviewerOpened(false);
    const { getThemeProperty } = useContext(WebchatContext);
    const ImagePreviewer = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.imagePreviewer);
    if (isBrowser()) {
        content = (_jsxs(_Fragment, { children: [_jsx(StyledImage, { src: props.src, onClick: openPreviewer, hasPreviewer: Boolean(ImagePreviewer) }), ImagePreviewer && (_jsx(ImagePreviewer, { src: props.src, isPreviewerOpened: isPreviewerOpened, openPreviewer: openPreviewer, closePreviewer: closePreviewer }))] }));
    }
    return (_jsx(Message, Object.assign({ role: ROLES.IMAGE_MESSAGE, json: serialize(props) }, props, { type: INPUT.IMAGE }, { children: content })));
};
Image.serialize = serialize;
//# sourceMappingURL=image.js.map