@botonic/react/lib/esm/webchat/input-panel/attachment.js

Build Chatbots using React

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useContext, useRef } from 'react';
import AttachmentIcon from '../../assets/attachment-icon.svg';
import { ROLES } from '../../constants';
import { WebchatContext } from '../../webchat/context';
import { Icon } from '../components/common';
import { ConditionalAnimation } from '../components/conditional-animation';
export const Attachment = ({ accept, onChange }) => {
    var _a, _b;
    const { webchatState } = useContext(WebchatContext);
    const fileInputRef = useRef(null);
    const CustomAttachments = (_b = (_a = webchatState.theme.userInput) === null || _a === void 0 ? void 0 : _a.attachments) === null || _b === void 0 ? void 0 : _b.custom;
    const isAttachmentsEnabled = () => {
        var _a, _b, _c;
        const hasCustomAttachments = !!CustomAttachments;
        return ((_c = (_b = (_a = webchatState.theme.userInput) === null || _a === void 0 ? void 0 : _a.attachments) === null || _b === void 0 ? void 0 : _b.enable) !== null && _c !== void 0 ? _c : hasCustomAttachments);
    };
    const attachmentsEnabled = isAttachmentsEnabled();
    const handleOnChange = event => {
        onChange(event);
        if (fileInputRef.current) {
            fileInputRef.current.value = '';
        }
    };
    return (_jsx(_Fragment, { children: attachmentsEnabled ? (_jsx(ConditionalAnimation, { children: _jsxs("div", Object.assign({ role: ROLES.ATTACHMENT_ICON }, { children: [_jsx("label", Object.assign({ htmlFor: 'attachment', style: { marginTop: 4 } }, { children: CustomAttachments ? (_jsx(CustomAttachments, {})) : (_jsx(Icon, { src: AttachmentIcon })) })), _jsx("input", { ref: fileInputRef, type: 'file', name: 'file', id: 'attachment', style: { display: 'none' }, onChange: handleOnChange, accept: accept })] })) })) : null }));
};
//# sourceMappingURL=attachment.js.map