@botonic/react
Version:
Build Chatbots using React
59 lines • 3.41 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputPanel = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@botonic/core");
const react_1 = require("react");
const uuid_1 = require("uuid");
const constants_1 = require("../../constants");
const message_utils_1 = require("../../message-utils");
const context_1 = require("../../webchat/context");
const constants_2 = require("../constants");
const attachment_1 = require("./attachment");
const emoji_picker_1 = require("./emoji-picker");
const opened_emoji_picker_1 = require("./opened-emoji-picker");
const persistent_menu_1 = require("./persistent-menu");
const send_button_1 = require("./send-button");
const styles_1 = require("./styles");
const textarea_1 = require("./textarea");
const InputPanel = ({ handleAttachment, textareaRef, host, onUserInput, }) => {
const { getThemeProperty, sendText, togglePersistentMenu, toggleEmojiPicker, webchatState, inputPanelRef, } = (0, react_1.useContext)(context_1.WebchatContext);
const handleSelectedEmoji = event => {
if (!textareaRef.current)
return;
textareaRef.current.value += event.emoji;
textareaRef.current.focus();
};
const handleEmojiClick = () => {
toggleEmojiPicker(!webchatState.isEmojiPickerOpen);
};
const handleMenu = () => {
togglePersistentMenu(!webchatState.isPersistentMenuOpen);
};
const sendTextAreaText = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
var _a;
if (!textareaRef.current)
return;
yield sendText((_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.value);
textareaRef.current.value = '';
});
const sendChatEvent = (chatEvent) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
const chatEventInput = {
id: (0, uuid_1.v7)(),
type: core_1.INPUT.CHAT_EVENT,
data: chatEvent,
};
if (onUserInput) {
onUserInput({
user: webchatState.session.user,
input: chatEventInput,
session: webchatState.session,
lastRoutePath: webchatState.lastRoutePath,
});
}
});
return ((0, jsx_runtime_1.jsxs)(styles_1.UserInputContainer, Object.assign({ id: constants_2.BotonicContainerId.InputPanel, ref: inputPanelRef, style: Object.assign({}, getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.userInputStyle)), className: 'user-input-container' }, { children: [webchatState.isEmojiPickerOpen && ((0, jsx_runtime_1.jsx)(opened_emoji_picker_1.OpenedEmojiPicker, { onEmojiClick: handleSelectedEmoji, onClick: handleEmojiClick })), (0, jsx_runtime_1.jsx)(persistent_menu_1.PersistentMenu, { onClick: handleMenu }), (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { host: host, textareaRef: textareaRef, sendChatEvent: sendChatEvent, sendTextAreaText: sendTextAreaText }), (0, jsx_runtime_1.jsx)(emoji_picker_1.EmojiPicker, { onClick: handleEmojiClick }), (0, jsx_runtime_1.jsx)(attachment_1.Attachment, { onChange: handleAttachment, accept: (0, message_utils_1.getFullMimeWhitelist)().join(',') }), (0, jsx_runtime_1.jsx)(send_button_1.SendButton, { onClick: sendTextAreaText })] })));
};
exports.InputPanel = InputPanel;
//# sourceMappingURL=index.js.map