@botonic/react
Version:
Build Chatbots using React
61 lines • 3.23 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputPanel = void 0;
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 = async () => {
if (!textareaRef.current) {
return;
}
await sendText(textareaRef.current?.value);
textareaRef.current.value = '';
};
const sendChatEvent = async (chatEvent) => {
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, { id: constants_2.BotonicContainerId.InputPanel, ref: inputPanelRef, style: {
...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