@botonic/react
Version:
Build Chatbots using React
82 lines • 3.13 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Textarea = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_textarea_autosize_1 = tslib_1.__importDefault(require("react-textarea-autosize"));
const index_types_1 = require("../../index-types");
const context_1 = require("../../webchat/context");
const hooks_1 = require("../hooks");
const styles_1 = require("./styles");
const Textarea = ({ host, textareaRef, sendChatEvent, sendTextAreaText, }) => {
const { webchatState, setIsInputFocused } = (0, react_1.useContext)(context_1.WebchatContext);
(0, hooks_1.useDeviceAdapter)(host, webchatState.isWebchatOpen);
let isTyping = false;
let typingTimeout = null;
const persistentMenuOptions = webchatState.theme.userInput?.persistentMenu;
const placeholder = webchatState.theme.userInput?.box?.placeholder;
const userInputBoxStyle = webchatState.theme.userInput?.box?.style;
const onKeyDown = event => {
if (event.keyCode === 13 && event.shiftKey === false) {
event.preventDefault();
sendTextAreaText();
stopTyping();
}
};
const onKeyUp = () => {
if (!textareaRef.current) {
return;
}
if (textareaRef.current.value === '') {
stopTyping();
return;
}
if (!isTyping) {
startTyping();
}
clearTimeoutWithReset(true);
};
const clearTimeoutWithReset = (reset) => {
const waitTime = 20 * 1000;
if (typingTimeout) {
clearTimeout(typingTimeout);
}
if (reset) {
typingTimeout = setTimeout(stopTyping, waitTime);
}
};
const startTyping = () => {
isTyping = true;
sendChatEvent(index_types_1.Typing.On);
};
const stopTyping = () => {
clearTimeoutWithReset(false);
isTyping = false;
sendChatEvent(index_types_1.Typing.Off);
};
const handleFocus = () => {
setIsInputFocused(true);
};
const handleBlur = () => {
setIsInputFocused(false);
};
return ((0, jsx_runtime_1.jsx)(styles_1.TextAreaContainer, { children: (0, jsx_runtime_1.jsx)(react_textarea_autosize_1.default, { ref: (ref) => {
textareaRef.current = ref;
}, onFocus: handleFocus, onBlur: handleBlur, name: 'text', maxRows: 4, wrap: 'soft', maxLength: 1000, placeholder: placeholder, autoFocus: false, onKeyDown: e => onKeyDown(e), onKeyUp: onKeyUp, style: {
display: 'flex',
fontSize: 16,
width: '100%',
border: 'none',
resize: 'none',
overflow: 'auto',
outline: 'none',
flex: '1 1 auto',
padding: 10,
paddingLeft: persistentMenuOptions ? 0 : 10,
fontFamily: 'inherit',
...userInputBoxStyle,
} }) }));
};
exports.Textarea = Textarea;
//# sourceMappingURL=textarea.js.map