@botonic/react
Version:
Build Chatbots using React
55 lines • 2.96 kB
JavaScript
import { __awaiter } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { INPUT } from '@botonic/core';
import { useContext } from 'react';
import { v7 as uuidv7 } from 'uuid';
import { WEBCHAT } from '../../constants';
import { getFullMimeWhitelist } from '../../message-utils';
import { WebchatContext } from '../../webchat/context';
import { BotonicContainerId } from '../constants';
import { Attachment } from './attachment';
import { EmojiPicker } from './emoji-picker';
import { OpenedEmojiPicker } from './opened-emoji-picker';
import { PersistentMenu } from './persistent-menu';
import { SendButton } from './send-button';
import { UserInputContainer } from './styles';
import { Textarea } from './textarea';
export const InputPanel = ({ handleAttachment, textareaRef, host, onUserInput, }) => {
const { getThemeProperty, sendText, togglePersistentMenu, toggleEmojiPicker, webchatState, inputPanelRef, } = useContext(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 = () => __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) => __awaiter(void 0, void 0, void 0, function* () {
const chatEventInput = {
id: uuidv7(),
type: INPUT.CHAT_EVENT,
data: chatEvent,
};
if (onUserInput) {
onUserInput({
user: webchatState.session.user,
input: chatEventInput,
session: webchatState.session,
lastRoutePath: webchatState.lastRoutePath,
});
}
});
return (_jsxs(UserInputContainer, Object.assign({ id: BotonicContainerId.InputPanel, ref: inputPanelRef, style: Object.assign({}, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userInputStyle)), className: 'user-input-container' }, { children: [webchatState.isEmojiPickerOpen && (_jsx(OpenedEmojiPicker, { onEmojiClick: handleSelectedEmoji, onClick: handleEmojiClick })), _jsx(PersistentMenu, { onClick: handleMenu }), _jsx(Textarea, { host: host, textareaRef: textareaRef, sendChatEvent: sendChatEvent, sendTextAreaText: sendTextAreaText }), _jsx(EmojiPicker, { onClick: handleEmojiClick }), _jsx(Attachment, { onChange: handleAttachment, accept: getFullMimeWhitelist().join(',') }), _jsx(SendButton, { onClick: sendTextAreaText })] })));
};
//# sourceMappingURL=index.js.map