@botonic/react 0.29.0 → 0.30.0-alpha.0

package/lib/esm/webchat/webchat-input-panel/attachment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment.js","sourceRoot":"","sources":["../../../../src/webchat/webchat-input-panel/attachment.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEjD,OAAO,cAAc,MAAM,kCAAkC,CAAA;AAC7D,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAA;AAQ1E,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,MAAM,EACN,iBAAiB,EACjB,QAAQ,GACQ,EAAE,EAAE;IACpB,MAAM,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IAEvD,MAAM,YAAY,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAA;IAE1D,MAAM,iBAAiB,GAAG,gBAAgB,CACxC,OAAO,CAAC,iBAAiB,CAAC,iBAAiB,EAC3C,SAAS,CACV,CAAA;IAED,MAAM,oBAAoB,GAAG,GAAG,EAAE;;QAChC,MAAM,oBAAoB,GAAG,CAAC,CAAC,iBAAiB,CAAA;QAChD,OAAO,CACL,MAAA,gBAAgB,CACd,OAAO,CAAC,iBAAiB,CAAC,iBAAiB,EAC3C,iBAAiB,CAClB,mCAAI,oBAAoB,CAC1B,CAAA;IACH,CAAC,CAAA;IACD,MAAM,kBAAkB,GAAG,oBAAoB,EAAE,CAAA;IAEjD,MAAM,cAAc,GAAG,KAAK,CAAC,EAAE;QAC7B,QAAQ,CAAC,KAAK,CAAC,CAAA;QACf,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,YAAY,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAA;SAChC;IACH,CAAC,CAAA;IAED,OAAO,CACL,4BACG,kBAAkB,CAAC,CAAC,CAAC,CACpB,KAAC,oBAAoB,cACnB,6BAAK,IAAI,EAAE,KAAK,CAAC,eAAe,iBAC9B,8BAAO,OAAO,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,gBAChD,iBAAiB,CAAC,CAAC,CAAC,CACnB,KAAC,iBAAiB,KAAG,CACtB,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,GAAG,EAAE,cAAc,GAAI,CAC9B,IACK,EACR,gBACE,GAAG,EAAE,YAAY,EACjB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,YAAY,EACf,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAC1B,QAAQ,EAAE,cAAc,EACxB,MAAM,EAAE,MAAM,GACd,KACE,GACe,CACxB,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAA;AACH,CAAC,CAAA"}

package/lib/esm/webchat/webchat-input-panel/emoji-picker.d.ts

@@ -0,0 +1,6 @@
+interface EmojiPickerProps {
+    enableEmojiPicker: boolean;
+    onClick: () => void;
+}
+export declare const EmojiPicker: ({ enableEmojiPicker, onClick, }: EmojiPickerProps) => JSX.Element;
+export {};

package/lib/esm/webchat/{components → webchat-input-panel}/emoji-picker.js

@@ -1,14 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import Picker from 'emoji-picker-react';
-import React, { useContext } from 'react';
-import styled from 'styled-components';
+import { useContext } from 'react';
 import LogoEmoji from '../../assets/emojiButton.svg';
 import { ROLES, WEBCHAT } from '../../constants';
 import { WebchatContext } from '../../contexts';
+import { Icon } from '../components/common';
 import { ConditionalAnimation } from '../components/conditional-animation';
-import { useComponentVisible } from '../hooks';
-import { Icon } from './common';
-export const EmojiPicker = ({ enableEmojiPicker, onClick }) => {
+export const EmojiPicker = ({ enableEmojiPicker, onClick, }) => {
     const { getThemeProperty } = useContext(WebchatContext);
     const CustomEmojiPicker = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customEmojiPicker, undefined);
     const isEmojiPickerEnabled = () => {
@@ -17,21 +14,10 @@ export const EmojiPicker = ({ enableEmojiPicker, onClick }) => {
         return ((_a = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableEmojiPicker, enableEmojiPicker)) !== null && _a !== void 0 ? _a : hasCustomEmojiPicker);
     };
     const emojiPickerEnabled = isEmojiPickerEnabled();
-    const handleClick = event => {
+    const handleClick = (event) => {
         onClick();
         event.stopPropagation();
     };
     return (_jsx(_Fragment, { children: emojiPickerEnabled ? (_jsx(ConditionalAnimation, { children: _jsx("div", Object.assign({ role: ROLES.EMOJI_PICKER_ICON, onClick: handleClick }, { children: CustomEmojiPicker ? (_jsx(CustomEmojiPicker, {})) : (_jsx(Icon, { src: LogoEmoji })) })) })) : null }));
 };
-const Container = styled.div `
-  display: flex;
-  justify-content: flex-end;
-  position: absolute;
-  right: 3px;
-  top: -324px;
-`;
-export const OpenedEmojiPicker = props => {
-    const { ref, isComponentVisible } = useComponentVisible(true, props.onClick);
-    return (_jsx("div", Object.assign({ ref: ref }, { children: isComponentVisible && (_jsx(Container, Object.assign({ role: ROLES.EMOJI_PICKER }, { children: _jsx(Picker, { width: '100%', height: '19rem', previewConfig: { showPreview: false }, onEmojiClick: props.onEmojiClick, disableAutoFocus: true }) }))) })));
-};
 //# sourceMappingURL=emoji-picker.js.map

package/lib/esm/webchat/webchat-input-panel/emoji-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-picker.js","sourceRoot":"","sources":["../../../../src/webchat/webchat-input-panel/emoji-picker.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,SAAS,MAAM,8BAA8B,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAA;AAO1E,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,iBAAiB,EACjB,OAAO,GACU,EAAE,EAAE;IACrB,MAAM,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IAEvD,MAAM,iBAAiB,GAAG,gBAAgB,CACxC,OAAO,CAAC,iBAAiB,CAAC,iBAAiB,EAC3C,SAAS,CACV,CAAA;IAED,MAAM,oBAAoB,GAAG,GAAG,EAAE;;QAChC,MAAM,oBAAoB,GAAG,CAAC,CAAC,iBAAiB,CAAA;QAChD,OAAO,CACL,MAAA,gBAAgB,CACd,OAAO,CAAC,iBAAiB,CAAC,iBAAiB,EAC3C,iBAAiB,CAClB,mCAAI,oBAAoB,CAC1B,CAAA;IACH,CAAC,CAAA;IACD,MAAM,kBAAkB,GAAG,oBAAoB,EAAE,CAAA;IAEjD,MAAM,WAAW,GAAG,CAAC,KAAU,EAAE,EAAE;QACjC,OAAO,EAAE,CAAA;QACT,KAAK,CAAC,eAAe,EAAE,CAAA;IACzB,CAAC,CAAA;IAED,OAAO,CACL,4BACG,kBAAkB,CAAC,CAAC,CAAC,CACpB,KAAC,oBAAoB,cACnB,4BAAK,IAAI,EAAE,KAAK,CAAC,iBAAiB,EAAE,OAAO,EAAE,WAAW,gBACrD,iBAAiB,CAAC,CAAC,CAAC,CACnB,KAAC,iBAAiB,KAAG,CACtB,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,GAAG,EAAE,SAAS,GAAI,CACzB,IACG,GACe,CACxB,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAA;AACH,CAAC,CAAA"}

package/lib/esm/webchat/webchat-input-panel/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { DeviceAdapter } from '../devices/device-adapter';
+interface WebchatInputPanelProps {
+    persistentMenu: any;
+    enableEmojiPicker: boolean;
+    enableAttachments: boolean;
+    handleAttachment: (event: any) => void;
+    textareaRef: React.MutableRefObject<HTMLTextAreaElement>;
+    deviceAdapter: DeviceAdapter;
+    onUserInput?: (event: any) => Promise<void>;
+}
+export declare const WebchatInputPanel: ({ persistentMenu, enableEmojiPicker, enableAttachments, handleAttachment, textareaRef, deviceAdapter, onUserInput, }: WebchatInputPanelProps) => JSX.Element;
+export {};

package/lib/esm/webchat/webchat-input-panel/index.js

@@ -0,0 +1,49 @@
+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 { v4 as uuidv4 } from 'uuid';
+import { WEBCHAT } from '../../constants';
+import { WebchatContext } from '../../contexts';
+import { getFullMimeWhitelist } from '../../message-utils';
+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 WebchatInputPanel = ({ persistentMenu, enableEmojiPicker, enableAttachments, handleAttachment, textareaRef, deviceAdapter, onUserInput, }) => {
+    const { getThemeProperty, sendText, togglePersistentMenu, toggleEmojiPicker, webchatState, } = useContext(WebchatContext);
+    const handleSelectedEmoji = event => {
+        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* () {
+        yield sendText(textareaRef.current.value);
+        textareaRef.current.value = '';
+    });
+    const sendChatEvent = (chatEvent) => __awaiter(void 0, void 0, void 0, function* () {
+        const chatEventInput = {
+            id: uuidv4(),
+            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({ 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, persistentMenu: persistentMenu }), _jsx(Textarea, { deviceAdapter: deviceAdapter, persistentMenu: persistentMenu, textareaRef: textareaRef, sendChatEvent: sendChatEvent, sendTextAreaText: sendTextAreaText }), _jsx(EmojiPicker, { enableEmojiPicker: enableEmojiPicker, onClick: handleEmojiClick }), _jsx(Attachment, { enableAttachments: enableAttachments, onChange: handleAttachment, accept: getFullMimeWhitelist().join(',') }), _jsx(SendButton, { onClick: sendTextAreaText })] })));
+};
+//# sourceMappingURL=index.js.map

package/lib/esm/webchat/webchat-input-panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/webchat/webchat-input-panel/index.tsx"],"names":[],"mappings":"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"}

package/lib/esm/webchat/webchat-input-panel/opened-emoji-picker.d.ts

@@ -0,0 +1,6 @@
+interface OpenedEmojiPickerProps {
+    onClick: () => void;
+    onEmojiClick: (event: any) => void;
+}
+export declare const OpenedEmojiPicker: ({ onClick, onEmojiClick, }: OpenedEmojiPickerProps) => JSX.Element;
+export {};

package/lib/esm/webchat/webchat-input-panel/opened-emoji-picker.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Picker from 'emoji-picker-react';
+import { ROLES } from '../../constants';
+import { useComponentVisible } from '../hooks';
+import { OpenedEmojiPickerContainer } from './styles';
+export const OpenedEmojiPicker = ({ onClick, onEmojiClick, }) => {
+    const { ref, isComponentVisible } = useComponentVisible(true, onClick);
+    return (_jsx("div", Object.assign({ ref: ref }, { children: isComponentVisible && (_jsx(OpenedEmojiPickerContainer, Object.assign({ role: ROLES.EMOJI_PICKER }, { children: _jsx(Picker, { width: '100%', height: '19rem', previewConfig: { showPreview: false }, lazyLoadEmojis: true, onEmojiClick: onEmojiClick, autoFocusSearch: false }) }))) })));
+};
+//# sourceMappingURL=opened-emoji-picker.js.map

package/lib/esm/webchat/webchat-input-panel/opened-emoji-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"opened-emoji-picker.js","sourceRoot":"","sources":["../../../../src/webchat/webchat-input-panel/opened-emoji-picker.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAGvC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAA;AAOrD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,OAAO,EACP,YAAY,GACW,EAAE,EAAE;IAC3B,MAAM,EAAE,GAAG,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;IACtE,OAAO,CACL,4BAAK,GAAG,EAAE,GAAgC,gBACvC,kBAAkB,IAAI,CACrB,KAAC,0BAA0B,kBAAC,IAAI,EAAE,KAAK,CAAC,YAAY,gBAClD,KAAC,MAAM,IACL,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,OAAO,EACd,aAAa,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EACrC,cAAc,EAAE,IAAI,EACpB,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,KAAK,GACtB,IACyB,CAC9B,IACG,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/esm/webchat/webchat-input-panel/persistent-menu.d.ts

@@ -0,0 +1,6 @@
+interface PersistentMenuProps {
+    persistentMenu: any;
+    onClick: () => void;
+}
+export declare const PersistentMenu: ({ onClick, persistentMenu, }: PersistentMenuProps) => JSX.Element;
+export {};

package/lib/esm/webchat/webchat-input-panel/persistent-menu.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext } from 'react';
+import LogoMenu from '../../assets/menuButton.svg';
+import { ROLES, WEBCHAT } from '../../constants';
+import { WebchatContext } from '../../contexts';
+import { Icon } from '../components/common';
+import { ConditionalAnimation } from '../components/conditional-animation';
+export const PersistentMenu = ({ onClick, persistentMenu, }) => {
+    const { getThemeProperty } = useContext(WebchatContext);
+    const persistentMenuOptions = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.persistentMenu, persistentMenu);
+    const CustomMenuButton = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customMenuButton, undefined);
+    return (_jsx(_Fragment, { children: persistentMenuOptions ? (_jsx(ConditionalAnimation, { children: _jsx("div", Object.assign({ role: ROLES.PERSISTENT_MENU_ICON, onClick: onClick }, { children: CustomMenuButton ? _jsx(CustomMenuButton, {}) : _jsx(Icon, { src: LogoMenu }) })) })) : null }));
+};
+//# sourceMappingURL=persistent-menu.js.map

package/lib/esm/webchat/webchat-input-panel/persistent-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"persistent-menu.js","sourceRoot":"","sources":["../../../../src/webchat/webchat-input-panel/persistent-menu.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,QAAQ,MAAM,6BAA6B,CAAA;AAClD,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAA;AAO1E,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,cAAc,GACM,EAAE,EAAE;IACxB,MAAM,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IAEvD,MAAM,qBAAqB,GAAG,gBAAgB,CAC5C,OAAO,CAAC,iBAAiB,CAAC,cAAc,EACxC,cAAc,CACf,CAAA;IAED,MAAM,gBAAgB,GAAG,gBAAgB,CACvC,OAAO,CAAC,iBAAiB,CAAC,gBAAgB,EAC1C,SAAS,CACV,CAAA;IAED,OAAO,CACL,4BACG,qBAAqB,CAAC,CAAC,CAAC,CACvB,KAAC,oBAAoB,cACnB,4BAAK,IAAI,EAAE,KAAK,CAAC,oBAAoB,EAAE,OAAO,EAAE,OAAO,gBACpD,gBAAgB,CAAC,CAAC,CAAC,KAAC,gBAAgB,KAAG,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,GAAG,EAAE,QAAQ,GAAI,IAC9D,GACe,CACxB,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAA;AACH,CAAC,CAAA"}

package/lib/esm/webchat/webchat-input-panel/send-button.d.ts

@@ -0,0 +1,5 @@
+interface SendButtonProps {
+    onClick: () => Promise<void>;
+}
+export declare const SendButton: ({ onClick }: SendButtonProps) => JSX.Element;
+export {};

package/lib/esm/webchat/{components → webchat-input-panel}/send-button.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import SendButtonIcon from '../../assets/send-button.svg';
 import { ROLES, WEBCHAT } from '../../constants';
 import { WebchatContext } from '../../contexts';
+import { Icon } from '../components/common';
 import { ConditionalAnimation } from '../components/conditional-animation';
-import { Icon } from './common';
 export const SendButton = ({ onClick }) => {
     const { getThemeProperty } = useContext(WebchatContext);
     const sendButtonEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableSendButton, true);

package/lib/esm/webchat/webchat-input-panel/send-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"send-button.js","sourceRoot":"","sources":["../../../../src/webchat/webchat-input-panel/send-button.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,cAAc,MAAM,8BAA8B,CAAA;AACzD,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAA;AAM1E,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAmB,EAAE,EAAE;IACzD,MAAM,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IAEvD,MAAM,iBAAiB,GAAG,gBAAgB,CACxC,OAAO,CAAC,iBAAiB,CAAC,gBAAgB,EAC1C,IAAI,CACL,CAAA;IAED,MAAM,gBAAgB,GAAG,gBAAgB,CACvC,OAAO,CAAC,iBAAiB,CAAC,gBAAgB,EAC1C,SAAS,CACV,CAAA;IAED,OAAO,CACL,4BACG,iBAAiB,IAAI,gBAAgB,CAAC,CAAC,CAAC,CACvC,KAAC,oBAAoB,cACnB,4BAAK,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,gBAAgB,gBAChD,gBAAgB,CAAC,CAAC,CAAC,CAClB,KAAC,gBAAgB,KAAG,CACrB,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,GAAG,EAAE,cAAc,GAAI,CAC9B,IACG,GACe,CACxB,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAA;AACH,CAAC,CAAA"}

package/lib/esm/webchat/webchat-input-panel/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const UserInputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TextAreaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const OpenedEmojiPickerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/esm/webchat/webchat-input-panel/styles.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { COLORS } from '../../constants';
+export const UserInputContainer = styled.div `
+  min-height: 52px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 16px;
+  padding: 0px 16px;
+  z-index: 1;
+  border-top: 1px solid ${COLORS.SOLID_BLACK_ALPHA_0_5};
+`;
+export const TextAreaContainer = styled.div `
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+`;
+export const OpenedEmojiPickerContainer = styled.div `
+  display: flex;
+  justify-content: flex-end;
+  position: absolute;
+  right: 3px;
+  top: -324px;
+`;
+//# sourceMappingURL=styles.js.map

package/lib/esm/webchat/webchat-input-panel/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/webchat/webchat-input-panel/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAExC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;0BASlB,MAAM,CAAC,qBAAqB;CACrD,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI1C,CAAA;AAED,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMnD,CAAA"}

package/lib/esm/webchat/webchat-input-panel/textarea.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PersistentMenuTheme } from '../../components/index-types';
+import { DeviceAdapter } from '../devices/device-adapter';
+interface TextareaProps {
+    deviceAdapter: DeviceAdapter;
+    persistentMenu: PersistentMenuTheme;
+    textareaRef: React.MutableRefObject<HTMLTextAreaElement>;
+    sendChatEvent: (event: string) => Promise<void>;
+    sendTextAreaText: () => Promise<void>;
+}
+export declare const Textarea: ({ deviceAdapter, persistentMenu, textareaRef, sendChatEvent, sendTextAreaText, }: TextareaProps) => JSX.Element;
+export {};

package/lib/esm/webchat/webchat-input-panel/textarea.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+import { WEBCHAT } from '../../constants';
+import { WebchatContext } from '../../contexts';
+import { Typing } from '../../index-types';
+import { TextAreaContainer } from './styles';
+export const Textarea = ({ deviceAdapter, persistentMenu, textareaRef, sendChatEvent, sendTextAreaText, }) => {
+    const { getThemeProperty } = useContext(WebchatContext);
+    let isTyping = false;
+    let typingTimeout;
+    const persistentMenuOptions = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.persistentMenu, persistentMenu);
+    const onKeyDown = event => {
+        if (event.keyCode === 13 && event.shiftKey === false) {
+            event.preventDefault();
+            sendTextAreaText();
+            stopTyping();
+        }
+    };
+    const onKeyUp = () => {
+        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);
+    };
+    return (_jsx(TextAreaContainer, { children: _jsx(TextareaAutosize, { ref: (ref) => (textareaRef.current = ref), name: 'text', onFocus: () => {
+                deviceAdapter.onFocus();
+            }, onBlur: () => {
+                deviceAdapter.onBlur();
+            }, maxRows: 4, wrap: 'soft', maxLength: 1000, placeholder: getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.textPlaceholder, WEBCHAT.DEFAULTS.PLACEHOLDER), autoFocus: false, onKeyDown: e => onKeyDown(e), onKeyUp: onKeyUp, style: Object.assign({ display: 'flex', fontSize: deviceAdapter.fontSize(14), width: '100%', border: 'none', resize: 'none', overflow: 'auto', outline: 'none', flex: '1 1 auto', padding: 10, paddingLeft: persistentMenuOptions ? 0 : 10, fontFamily: 'inherit' }, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userInputBoxStyle)) }) }));
+};
+//# sourceMappingURL=textarea.js.map

package/lib/esm/webchat/webchat-input-panel/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../../src/webchat/webchat-input-panel/textarea.tsx"],"names":[],"mappings":"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"}

package/lib/esm/webchat/webchat.d.ts

@@ -1,3 +1,2 @@
-export function getParsedAction(botonicAction: any): any;
 export const Webchat: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from "react";

package/lib/esm/webchat/webchat.js

@@ -1,11 +1,9 @@
 import { __awaiter } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { INPUT, isMobile, params2queryString } from '@botonic/core';
+import { BotonicAction, INPUT, isMobile, params2queryString, } from '@botonic/core';
 import merge from 'lodash.merge';
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState, } from 'react';
-import Textarea from 'react-textarea-autosize';
 import styled, { StyleSheetManager } from 'styled-components';
-import { useAsyncEffect } from 'use-async-effect';
 import { v4 as uuidv4 } from 'uuid';
 import { Audio, Document, Image, Text, Video } from '../components';
 import { Handoff } from '../components/handoff';
@@ -13,16 +11,13 @@ import { normalizeWebchatSettings } from '../components/webchat-settings';
 import { COLORS, MAX_ALLOWED_SIZE_MB, ROLES, WEBCHAT } from '../constants';
 import { WebchatContext, WebviewRequestContext } from '../contexts';
 import { SENDERS } from '../index-types';
-import { getFullMimeWhitelist, getMediaType, isAllowedSize, isAudio, isDocument, isImage, isMedia, isText, isVideo, readDataURL, } from '../message-utils';
+import { getMediaType, isAllowedSize, isAudio, isDocument, isImage, isMedia, isText, isVideo, readDataURL, } from '../message-utils';
 import { msgToBotonic } from '../msg-to-botonic';
 import { scrollToBottom } from '../util/dom';
 import { isDev } from '../util/environment';
 import { deserializeRegex, stringifyWithRegexs } from '../util/regexs';
 import { _getThemeProperty, getServerErrorMessage, initSession, shouldKeepSessionOnReload, } from '../util/webchat';
-import { Attachment } from './components/attachment';
-import { EmojiPicker, OpenedEmojiPicker } from './components/emoji-picker';
-import { OpenedPersistentMenu, PersistentMenu, } from './components/persistent-menu';
-import { SendButton } from './components/send-button';
+import { OpenedPersistentMenu } from './components/opened-persistent-menu';
 import { DeviceAdapter } from './devices/device-adapter';
 import { StyledWebchatHeader } from './header';
 import { useComponentWillMount, usePrevious, useTyping, useWebchat, } from './hooks';
@@ -30,13 +25,9 @@ import { WebchatMessageList } from './message-list';
 import { WebchatReplies } from './replies';
 import { TriggerButton } from './trigger-button';
 import { useStorageState } from './use-storage-state-hook';
+import { getParsedAction } from './utils';
+import { WebchatInputPanel } from './webchat-input-panel';
 import { WebviewContainer } from './webview';
-export const getParsedAction = botonicAction => {
-    const splittedAction = botonicAction.split('create_case:');
-    if (splittedAction.length <= 1)
-        return undefined;
-    return JSON.parse(splittedAction[1]);
-};
 const StyledWebchat = styled.div `
   position: fixed;
   right: 20px;
@@ -50,22 +41,6 @@ const StyledWebchat = styled.div `
   display: flex;
   flex-direction: column;
 `;
-const UserInputContainer = styled.div `
-  min-height: 52px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 16px;
-  padding: 0px 16px;
-  z-index: 1;
-  border-top: 1px solid ${COLORS.SOLID_BLACK_ALPHA_0_5};
-`;
-const TextAreaContainer = styled.div `
-  display: flex;
-  flex: 1 1 auto;
-  align-items: center;
-`;
 const ErrorMessageContainer = styled.div `
   position: relative;
   display: flex;
@@ -154,20 +129,6 @@ export const Webchat = forwardRef((props, ref) => {
             });
         }
     });
-    const sendChatEvent = (chatEvent) => __awaiter(void 0, void 0, void 0, function* () {
-        const chatEventInput = {
-            id: uuidv4(),
-            type: INPUT.CHAT_EVENT,
-            data: chatEvent,
-        };
-        props.onUserInput &&
-            props.onUserInput({
-                user: webchatState.session.user,
-                input: chatEventInput,
-                session: webchatState.session,
-                lastRoutePath: webchatState.lastRoutePath,
-            });
-    });
     // Load styles stored in window._botonicInsertStyles by Webpack
     useComponentWillMount(() => {
         if (window._botonicInsertStyles && window._botonicInsertStyles.length) {
@@ -246,7 +207,7 @@ export const Webchat = forwardRef((props, ref) => {
         webchatState.devSettings,
         webchatState.lastMessageUpdate,
     ]);
-    useAsyncEffect(() => __awaiter(void 0, void 0, void 0, function* () {
+    useEffect(() => {
         if (!webchatState.online) {
             setError({
                 message: getServerErrorMessage(props.server),
@@ -257,20 +218,19 @@ export const Webchat = forwardRef((props, ref) => {
                 setError(undefined);
             }
         }
-    }), [webchatState.online]);
+    }, [webchatState.online]);
     useTyping({ webchatState, updateTyping, updateMessage, host });
     useEffect(() => {
         updateTheme(merge(props.theme, theme, webchatState.themeUpdates));
     }, [props.theme, webchatState.themeUpdates]);
-    const openWebview = (webviewComponent, params) => updateWebview(webviewComponent, params);
-    const handleSelectedEmoji = event => {
-        textArea.current.value += event.emoji;
-        textArea.current.focus();
+    const openWebview = (webviewComponent, params) => {
+        updateWebview(webviewComponent, params);
     };
+    const textareaRef = useRef(null);
     const closeWebview = options => {
         updateWebview();
         if (userInputEnabled) {
-            textArea.current.focus();
+            textareaRef.current.focus();
         }
         if (options === null || options === void 0 ? void 0 : options.payload) {
             sendPayload(options.payload);
@@ -280,12 +240,6 @@ export const Webchat = forwardRef((props, ref) => {
             sendPayload(`__PATH_PAYLOAD__${options.path}?${params}`);
         }
     };
-    const handleMenu = () => {
-        togglePersistentMenu(!webchatState.isPersistentMenuOpen);
-    };
-    const handleEmojiClick = () => {
-        toggleEmojiPicker(!webchatState.isEmojiPickerOpen);
-    };
     const persistentMenuOptions = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.persistentMenu, props.persistentMenu);
     const darkBackgroundMenu = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.darkBackgroundMenu, false);
     const getBlockInputs = (rule, inputData) => {
@@ -408,7 +362,7 @@ export const Webchat = forwardRef((props, ref) => {
             if (session) {
                 updateSession(merge(session, { user: webchatState.session.user }));
                 const action = session._botonic_action || '';
-                const handoff = action.startsWith('create_case');
+                const handoff = action.startsWith(BotonicAction.CreateCase);
                 if (handoff && isDev)
                     addMessageComponent(_jsx(Handoff, {}));
                 updateHandoff(handoff);
@@ -498,45 +452,6 @@ export const Webchat = forwardRef((props, ref) => {
             setCurrentAttachment(undefined);
         }
     });
-    const sendTextAreaText = () => {
-        sendText(textArea.current.value);
-        textArea.current.value = '';
-    };
-    let isTyping = false;
-    let typingTimeout = null;
-    function clearTimeoutWithReset(reset) {
-        const waitTime = 20 * 1000;
-        if (typingTimeout)
-            clearTimeout(typingTimeout);
-        if (reset)
-            typingTimeout = setTimeout(stopTyping, waitTime);
-    }
-    function startTyping() {
-        isTyping = true;
-        sendChatEvent('typing_on');
-    }
-    function stopTyping() {
-        clearTimeoutWithReset(false);
-        isTyping = false;
-        sendChatEvent('typing_off');
-    }
-    const onKeyDown = event => {
-        if (event.keyCode === 13 && event.shiftKey === false) {
-            event.preventDefault();
-            sendTextAreaText();
-            stopTyping();
-        }
-    };
-    const onKeyUp = () => {
-        if (textArea.current.value === '') {
-            stopTyping();
-            return;
-        }
-        if (!isTyping) {
-            startTyping();
-        }
-        clearTimeoutWithReset(true);
-    };
     const webviewRequestContext = {
         closeWebview: closeWebview,
         getString: stringId => props.getString(stringId, webchatState.session),
@@ -561,14 +476,6 @@ export const Webchat = forwardRef((props, ref) => {
         return isUserInputEnabled && !webchatState.isCoverComponentOpen;
     };
     const userInputEnabled = isUserInputEnabled();
-    const textArea = useRef(null);
-    const userInputArea = () => {
-        return (userInputEnabled && (_jsxs(UserInputContainer, Object.assign({ style: Object.assign({}, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userInputStyle)), className: 'user-input-container' }, { children: [webchatState.isEmojiPickerOpen && (_jsx(OpenedEmojiPicker, { height: webchatState.theme.style.height, onEmojiClick: handleSelectedEmoji, onClick: handleEmojiClick })), _jsx(PersistentMenu, { onClick: handleMenu, persistentMenu: props.persistentMenu }), _jsx(TextAreaContainer, { children: _jsx(Textarea, { inputRef: textArea, name: 'text', onFocus: () => {
-                            deviceAdapter.onFocus();
-                        }, onBlur: () => {
-                            deviceAdapter.onBlur();
-                        }, maxRows: 4, wrap: 'soft', maxLength: '1000', placeholder: getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.textPlaceholder, WEBCHAT.DEFAULTS.PLACEHOLDER), autoFocus: false, onKeyDown: e => onKeyDown(e), onKeyUp: onKeyUp, style: Object.assign({ display: 'flex', fontSize: deviceAdapter.fontSize(14), width: '100%', border: 'none', resize: 'none', overflow: 'auto', outline: 'none', flex: '1 1 auto', padding: 10, paddingLeft: persistentMenuOptions ? 0 : 10, fontFamily: 'inherit' }, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userInputBoxStyle)) }) }), _jsx(EmojiPicker, { enableEmojiPicker: props.enableEmojiPicker, onClick: handleEmojiClick }), _jsx(Attachment, { enableAttachments: props.enableAttachments, onChange: handleAttachment, accept: getFullMimeWhitelist().join(',') }), _jsx(SendButton, { onClick: sendTextAreaText })] }))));
-    };
     const webchatWebview = () => (_jsx(WebviewRequestContext.Provider, Object.assign({ value: webviewRequestContext }, { children: _jsx(WebviewContainer, { style: Object.assign(Object.assign({}, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.webviewStyle)), mobileStyle), webview: webchatState.webview }) })));
     let mobileStyle = {};
     if (isMobile(getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.mobileBreakpoint))) {
@@ -615,6 +522,8 @@ export const Webchat = forwardRef((props, ref) => {
             sendPayload,
             sendText,
             toggleWebchat,
+            toggleEmojiPicker,
+            togglePersistentMenu,
             updateLatestInput,
             updateMessage,
             updateReplies,
@@ -629,7 +538,7 @@ export const Webchat = forwardRef((props, ref) => {
                 role: ROLES.WEBCHAT, id: WEBCHAT.DEFAULTS.ID, width: webchatState.width, height: webchatState.height, style: Object.assign(Object.assign({}, webchatState.theme.style), mobileStyle) }, { children: [_jsx(StyledWebchatHeader, { onCloseClick: () => {
                             toggleWebchat(false);
                         } }), webchatState.error.message && (_jsx(ErrorMessageContainer, { children: _jsx(ErrorMessage, { children: webchatState.error.message }) })), _jsx(WebchatMessageList, {}), webchatState.replies &&
-                        Object.keys(webchatState.replies).length > 0 && (_jsx(WebchatReplies, { replies: webchatState.replies })), webchatState.isPersistentMenuOpen && (_jsx(DarkenBackground, { component: persistentMenu() })), !webchatState.handoff && userInputArea(), webchatState.webview && webchatWebview(), webchatState.isCoverComponentOpen && coverComponent(), webchatState.isCustomComponentRendered &&
+                        Object.keys(webchatState.replies).length > 0 && (_jsx(WebchatReplies, { replies: webchatState.replies })), webchatState.isPersistentMenuOpen && (_jsx(DarkenBackground, { component: persistentMenu() })), !webchatState.handoff && userInputEnabled && (_jsx(WebchatInputPanel, { persistentMenu: props.persistentMenu, enableEmojiPicker: props.enableEmojiPicker, enableAttachments: props.enableAttachments, handleAttachment: handleAttachment, textareaRef: textareaRef, deviceAdapter: deviceAdapter, onUserInput: props.onUserInput })), webchatState.webview && webchatWebview(), webchatState.isCoverComponentOpen && coverComponent(), webchatState.isCustomComponentRendered &&
                         customComponent &&
                         _renderCustomComponent()] })))] })));
     return props.shadowDOM ? (_jsx(StyleSheetManager, Object.assign({ target: host }, { children: WebchatComponent }))) : (WebchatComponent);