@botonic/react
Version:
Build Chatbots using React
60 lines • 2.81 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useContext } from 'react';
import TextareaAutosize from 'react-textarea-autosize';
import { Typing } from '../../index-types';
import { WebchatContext } from '../../webchat/context';
import { useDeviceAdapter } from '../hooks';
import { TextAreaContainer } from './styles';
export const Textarea = ({ host, textareaRef, sendChatEvent, sendTextAreaText, }) => {
var _a, _b, _c, _d, _e;
const { webchatState, setIsInputFocused } = useContext(WebchatContext);
useDeviceAdapter(host, webchatState.isWebchatOpen);
let isTyping = false;
let typingTimeout;
const persistentMenuOptions = (_a = webchatState.theme.userInput) === null || _a === void 0 ? void 0 : _a.persistentMenu;
const placeholder = (_c = (_b = webchatState.theme.userInput) === null || _b === void 0 ? void 0 : _b.box) === null || _c === void 0 ? void 0 : _c.placeholder;
const userInputBoxStyle = (_e = (_d = webchatState.theme.userInput) === null || _d === void 0 ? void 0 : _d.box) === null || _e === void 0 ? void 0 : _e.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(Typing.On);
};
const stopTyping = () => {
clearTimeoutWithReset(false);
isTyping = false;
sendChatEvent(Typing.Off);
};
const handleFocus = () => {
setIsInputFocused(true);
};
const handleBlur = () => {
setIsInputFocused(false);
};
return (_jsx(TextAreaContainer, { children: _jsx(TextareaAutosize, { 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: Object.assign({ 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) }) }));
};
//# sourceMappingURL=textarea.js.map