chatui2
Version:
The React library for Chatbot UI
68 lines • 2.72 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["inputRef", "invisible", "onImageSend", "sendRender", "inputFeaturesRender", "inputControllerRender"];
import React, { useState, useEffect, useCallback } from 'react';
import clsx from 'clsx';
import { Input } from '../Input';
import { SendConfirm } from '../SendConfirm';
import riseInput from './riseInput';
import parseDataTransfer from '../../utils/parseDataTransfer';
import canUse from '../../utils/canUse';
import { Flex, FlexItem } from '../Flex';
var canTouch = canUse('touch');
export var ComposerInput = function ComposerInput(_ref) {
var inputRef = _ref.inputRef,
invisible = _ref.invisible,
onImageSend = _ref.onImageSend,
sendRender = _ref.sendRender,
inputFeaturesRender = _ref.inputFeaturesRender,
inputControllerRender = _ref.inputControllerRender,
rest = _objectWithoutProperties(_ref, _excluded);
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
pastedImage = _useState2[0],
setPastedImage = _useState2[1];
var handlePaste = useCallback(function (e) {
parseDataTransfer(e, setPastedImage);
}, []);
var handleImageCancel = useCallback(function () {
setPastedImage(null);
}, []);
var handleImageSend = useCallback(function () {
if (onImageSend && pastedImage) {
Promise.resolve(onImageSend(pastedImage)).then(function () {
setPastedImage(null);
});
}
}, [onImageSend, pastedImage]);
useEffect(function () {
if (canTouch && inputRef.current) {
var $composer = document.querySelector('.Composer');
riseInput(inputRef.current, $composer);
}
}, [inputRef]);
return /*#__PURE__*/React.createElement("div", {
className: clsx({
'S--invisible': invisible,
"Composer-input-area": true
})
}, /*#__PURE__*/React.createElement(Input, _extends({
className: "Composer-input",
rows: 2,
autoSize: true,
enterKeyHint: "send",
onPaste: onImageSend ? handlePaste : undefined,
ref: inputRef
}, rest)), /*#__PURE__*/React.createElement(Flex, {
direction: "row",
align: "center",
justifyContent: "space-between"
}, /*#__PURE__*/React.createElement(FlexItem, null, inputFeaturesRender), /*#__PURE__*/React.createElement(FlexItem, {
flex: "none"
}, inputControllerRender ? inputControllerRender(sendRender) : sendRender)), pastedImage && /*#__PURE__*/React.createElement(SendConfirm, {
file: pastedImage,
onCancel: handleImageCancel,
onSend: handleImageSend
}));
};