@botonic/react 0.29.0 → 0.30.0-alpha.0

package/lib/cjs/contexts.js

@@ -41,22 +41,28 @@ exports.WebchatContext = (0, react_1.createContext)({
     setLastMessageVisible: () => {
         return;
     },
-    sendAttachment: () => {
+    sendAttachment: () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
         return;
-    },
-    sendInput: () => {
+    }),
+    sendInput: () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
         return;
-    },
-    sendPayload: () => {
+    }),
+    sendPayload: () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
         return;
-    },
-    sendText: () => {
+    }),
+    sendText: () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
         return;
-    },
+    }),
     theme: {},
     toggleWebchat: () => {
         return;
     },
+    toggleEmojiPicker: () => {
+        return;
+    },
+    togglePersistentMenu: () => {
+        return;
+    },
     updateLatestInput: () => {
         return;
     },

package/lib/cjs/contexts.js.map

@@ -1 +1 @@
-{"version":3,"file":"contexts.js","sourceRoot":"","sources":["../../src/contexts.tsx"],"names":[],"mappings":";;;;AACA,iCAAqC;AAGrC,2CAAqD;AAExC,QAAA,cAAc,GAAG,IAAA,qBAAa,EAKzC;IACA,SAAS,EAAE,GAAG,EAAE,CAAC,EAAE;IACnB,SAAS,EAAE,GAAG,EAAE,CAAC,SAAS;IAC1B,OAAO,EAAE,EAAiB;IAC1B,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAe;IACtB,YAAY,EAAE,CAAC;IACf,aAAa,EAAE,CAAC;CACjB,CAAC,CAAA;AAQW,QAAA,qBAAqB,GAAG,IAAA,qBAAa,EAK/C;IACD,YAAY,EAAE,GAAG,EAAE,CAAC,SAAS;IAC7B,SAAS,EAAE,GAAG,EAAE,CAAC,EAAE;IACnB,MAAM,EAAE,EAAyB;IACjC,OAAO,EAAE,EAAiB;CAC3B,CAAC,CAAA;AAEW,QAAA,cAAc,GAAG,IAAA,qBAAa,EAAsB;IAC/D,UAAU,EAAE,GAAG,EAAE;QACf,OAAM;IACR,CAAC;IACD,YAAY,EAAE,GAAG,EAAE;QACjB,OAAM;IACR,CAAC;IACD,gBAAgB,EAAE,GAAG,EAAE;QACrB,OAAM;IACR,CAAC;IACD,WAAW,EAAE,GAAG,EAAE;QAChB,OAAM;IACR,CAAC;IACD,WAAW,EAAE,GAAG,EAAE;QAChB,OAAM;IACR,CAAC;IACD,mBAAmB,EAAE,GAAG,EAAE;QACxB,OAAM;IACR,CAAC;IACD,qBAAqB,EAAE,GAAG,EAAE;QAC1B,OAAM;IACR,CAAC;IACD,cAAc,EAAE,GAAG,EAAE;QACnB,OAAM;IACR,CAAC;IACD,SAAS,EAAE,GAAG,EAAE;QACd,OAAM;IACR,CAAC;IACD,WAAW,EAAE,GAAG,EAAE;QAChB,OAAM;IACR,CAAC;IACD,QAAQ,EAAE,GAAG,EAAE;QACb,OAAM;IACR,CAAC;IACD,KAAK,EAAE,EAAE;IACT,aAAa,EAAE,GAAG,EAAE;QAClB,OAAM;IACR,CAAC;IACD,iBAAiB,EAAE,GAAG,EAAE;QACtB,OAAM;IACR,CAAC;IACD,aAAa,EAAE,GAAG,EAAE;QAClB,OAAM;IACR,CAAC;IACD,aAAa,EAAE,GAAG,EAAE;QAClB,OAAM;IACR,CAAC;IACD,UAAU,EAAE,GAAG,EAAE;QACf,OAAM;IACR,CAAC;IACD,wBAAwB,EAAE,GAAG,EAAE;QAC7B,OAAM;IACR,CAAC;IACD,YAAY,EAAE,2BAAmB;IACjC,UAAU,EAAE,GAAS,EAAE;QACrB,OAAM;IACR,CAAC,CAAA;CACF,CAAC,CAAA"}
+{"version":3,"file":"contexts.js","sourceRoot":"","sources":["../../src/contexts.tsx"],"names":[],"mappings":";;;;AACA,iCAAqC;AAGrC,2CAAqD;AAExC,QAAA,cAAc,GAAG,IAAA,qBAAa,EAKzC;IACA,SAAS,EAAE,GAAG,EAAE,CAAC,EAAE;IACnB,SAAS,EAAE,GAAG,EAAE,CAAC,SAAS;IAC1B,OAAO,EAAE,EAAiB;IAC1B,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAe;IACtB,YAAY,EAAE,CAAC;IACf,aAAa,EAAE,CAAC;CACjB,CAAC,CAAA;AAQW,QAAA,qBAAqB,GAAG,IAAA,qBAAa,EAK/C;IACD,YAAY,EAAE,GAAG,EAAE,CAAC,SAAS;IAC7B,SAAS,EAAE,GAAG,EAAE,CAAC,EAAE;IACnB,MAAM,EAAE,EAAyB;IACjC,OAAO,EAAE,EAAiB;CAC3B,CAAC,CAAA;AAEW,QAAA,cAAc,GAAG,IAAA,qBAAa,EAAsB;IAC/D,UAAU,EAAE,GAAG,EAAE;QACf,OAAM;IACR,CAAC;IACD,YAAY,EAAE,GAAG,EAAE;QACjB,OAAM;IACR,CAAC;IACD,gBAAgB,EAAE,GAAG,EAAE;QACrB,OAAM;IACR,CAAC;IACD,WAAW,EAAE,GAAG,EAAE;QAChB,OAAM;IACR,CAAC;IACD,WAAW,EAAE,GAAG,EAAE;QAChB,OAAM;IACR,CAAC;IACD,mBAAmB,EAAE,GAAG,EAAE;QACxB,OAAM;IACR,CAAC;IACD,qBAAqB,EAAE,GAAG,EAAE;QAC1B,OAAM;IACR,CAAC;IACD,cAAc,EAAE,GAAS,EAAE;QACzB,OAAM;IACR,CAAC,CAAA;IACD,SAAS,EAAE,GAAS,EAAE;QACpB,OAAM;IACR,CAAC,CAAA;IACD,WAAW,EAAE,GAAS,EAAE;QACtB,OAAM;IACR,CAAC,CAAA;IACD,QAAQ,EAAE,GAAS,EAAE;QACnB,OAAM;IACR,CAAC,CAAA;IACD,KAAK,EAAE,EAAE;IACT,aAAa,EAAE,GAAG,EAAE;QAClB,OAAM;IACR,CAAC;IACD,iBAAiB,EAAE,GAAG,EAAE;QACtB,OAAM;IACR,CAAC;IACD,oBAAoB,EAAE,GAAG,EAAE;QACzB,OAAM;IACR,CAAC;IACD,iBAAiB,EAAE,GAAG,EAAE;QACtB,OAAM;IACR,CAAC;IACD,aAAa,EAAE,GAAG,EAAE;QAClB,OAAM;IACR,CAAC;IACD,aAAa,EAAE,GAAG,EAAE;QAClB,OAAM;IACR,CAAC;IACD,UAAU,EAAE,GAAG,EAAE;QACf,OAAM;IACR,CAAC;IACD,wBAAwB,EAAE,GAAG,EAAE;QAC7B,OAAM;IACR,CAAC;IACD,YAAY,EAAE,2BAAmB;IACjC,UAAU,EAAE,GAAS,EAAE;QACrB,OAAM;IACR,CAAC,CAAA;CACF,CAAC,CAAA"}

package/lib/cjs/index-types.d.ts

@@ -69,6 +69,10 @@ export declare enum SENDERS {
     user = "user",
     agent = "agent"
 }
+export declare enum Typing {
+    On = "typing_on",
+    Off = "typing_off"
+}
 export interface WebchatMessage {
     ack: 0 | 1;
     blob: boolean;
@@ -101,7 +105,7 @@ export interface OnStateChangeArgs {
     user: CoreSessionUser;
 }
 export interface MessageInfo {
-    data: any | 'typing_on';
+    data: any | Typing.On;
     id: string;
     type: 'update_webchat_settings' | 'sender_action';
 }
@@ -113,17 +117,19 @@ export interface Event {
 export interface WebchatContextProps {
     addMessage: (message: WebchatMessage) => void;
     closeWebview: () => void;
-    getThemeProperty: (property: string, defaultValue?: string | boolean) => any;
+    getThemeProperty: (property: string, defaultValue?: any) => any;
     openWebview: (webviewComponent: Webview) => void;
     resetUnreadMessages: () => void;
     resolveCase: () => void;
-    sendAttachment: (attachment: File) => void;
-    sendInput: (input: CoreInput) => void;
-    sendPayload: (payload: string) => void;
-    sendText: (text: string, payload?: string) => void;
+    sendAttachment: (attachment: File) => Promise<void>;
+    sendInput: (input: CoreInput) => Promise<void>;
+    sendPayload: (payload: string) => Promise<void>;
+    sendText: (text: string, payload?: string) => Promise<void>;
     setLastMessageVisible: (isLastMessageVisible: boolean) => void;
     theme: ThemeProps;
     toggleWebchat: (toggle: boolean) => void;
+    toggleEmojiPicker: (toggle: boolean) => void;
+    togglePersistentMenu: (toggle: boolean) => void;
     updateLatestInput: (input: CoreInput) => void;
     updateMessage: (message: WebchatMessage) => void;
     updateReplies: (replies: boolean) => void;

package/lib/cjs/index-types.js

@@ -1,12 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SENDERS = void 0;
+exports.Typing = exports.SENDERS = void 0;
 var SENDERS;
 (function (SENDERS) {
     SENDERS["bot"] = "bot";
     SENDERS["user"] = "user";
     SENDERS["agent"] = "agent";
 })(SENDERS = exports.SENDERS || (exports.SENDERS = {}));
+var Typing;
+(function (Typing) {
+    Typing["On"] = "typing_on";
+    Typing["Off"] = "typing_off";
+})(Typing = exports.Typing || (exports.Typing = {}));
 // export class DevApp extends WebchatApp {
 //   constructor(args: WebchatAppArgs)
 //   onUserInput(args: OnUserInputArgs): Promise<void>

package/lib/cjs/index-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"index-types.js","sourceRoot":"","sources":["../../src/index-types.ts"],"names":[],"mappings":";;;AA0IA,IAAY,OAIX;AAJD,WAAY,OAAO;IACjB,sBAAW,CAAA;IACX,wBAAa,CAAA;IACb,0BAAe,CAAA;AACjB,CAAC,EAJW,OAAO,GAAP,eAAO,KAAP,eAAO,QAIlB;AAuED,2CAA2C;AAC3C,sCAAsC;AACtC,sDAAsD;AACtD,sEAAsE;AACtE,IAAI"}
+{"version":3,"file":"index-types.js","sourceRoot":"","sources":["../../src/index-types.ts"],"names":[],"mappings":";;;AA0IA,IAAY,OAIX;AAJD,WAAY,OAAO;IACjB,sBAAW,CAAA;IACX,wBAAa,CAAA;IACb,0BAAe,CAAA;AACjB,CAAC,EAJW,OAAO,GAAP,eAAO,KAAP,eAAO,QAIlB;AAED,IAAY,MAGX;AAHD,WAAY,MAAM;IAChB,0BAAgB,CAAA;IAChB,4BAAkB,CAAA;AACpB,CAAC,EAHW,MAAM,GAAN,cAAM,KAAN,cAAM,QAGjB;AAyED,2CAA2C;AAC3C,sCAAsC;AACtC,sDAAsD;AACtD,sEAAsE;AACtE,IAAI"}

package/lib/cjs/webchat/components/{persistent-menu.d.ts → opened-persistent-menu.d.ts}

@@ -3,8 +3,4 @@ export function OpenedPersistentMenu({ onClick, options, borderRadius }: {
     options: any;
     borderRadius: any;
 }): JSX.Element;
-export function PersistentMenu({ onClick, persistentMenu }: {
-    onClick: any;
-    persistentMenu: any;
-}): JSX.Element;
 export default OpenedPersistentMenu;

package/lib/cjs/webchat/components/{persistent-menu.js → opened-persistent-menu.js}

@@ -1,17 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PersistentMenu = exports.OpenedPersistentMenu = void 0;
+exports.OpenedPersistentMenu = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const menuButton_svg_1 = tslib_1.__importDefault(require("../../assets/menuButton.svg"));
 const button_1 = require("../../components/button");
 const constants_1 = require("../../constants");
 const contexts_1 = require("../../contexts");
-const conditional_animation_1 = require("../components/conditional-animation");
 const hooks_1 = require("../hooks");
-const common_1 = require("./common");
 const ButtonsContainer = styled_components_1.default.div `
   position: absolute;
   z-index: 2;
@@ -34,12 +31,5 @@ const OpenedPersistentMenu = ({ onClick, options, borderRadius }) => {
                 }), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ onClick: onClick, bottomRadius: borderRadius }, { children: closeLabel }))] })) })));
 };
 exports.OpenedPersistentMenu = OpenedPersistentMenu;
-const PersistentMenu = ({ onClick, persistentMenu }) => {
-    const { getThemeProperty } = (0, react_1.useContext)(contexts_1.WebchatContext);
-    const persistentMenuOptions = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.persistentMenu, persistentMenu);
-    const CustomMenuButton = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.customMenuButton, undefined);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: persistentMenuOptions ? ((0, jsx_runtime_1.jsx)(conditional_animation_1.ConditionalAnimation, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ role: constants_1.ROLES.PERSISTENT_MENU_ICON, onClick: onClick }, { children: CustomMenuButton ? (0, jsx_runtime_1.jsx)(CustomMenuButton, {}) : (0, jsx_runtime_1.jsx)(common_1.Icon, { src: menuButton_svg_1.default }) })) })) : null }));
-};
-exports.PersistentMenu = PersistentMenu;
 exports.default = exports.OpenedPersistentMenu;
-//# sourceMappingURL=persistent-menu.js.map
+//# sourceMappingURL=opened-persistent-menu.js.map

package/lib/cjs/webchat/components/opened-persistent-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"opened-persistent-menu.js","sourceRoot":"","sources":["../../../../src/webchat/components/opened-persistent-menu.jsx"],"names":[],"mappings":";;;;;AAAA,uDAAyC;AACzC,kFAAsC;AAEtC,oDAAgD;AAChD,+CAAgD;AAChD,6CAA+C;AAC/C,oCAA8C;AAE9C,MAAM,gBAAgB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;CAMlC,CAAA;AAEM,MAAM,oBAAoB,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE;IACzE,MAAM,EAAE,GAAG,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,EAAC,IAAI,EAAE,OAAO,CAAC,CAAA;IACtE,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,kBAAU,EAAC,yBAAc,CAAC,CAAA;IACvD,MAAM,oBAAoB,GAAG,gBAAgB,CAC3C,mBAAO,CAAC,iBAAiB,CAAC,oBAAoB,EAC9C,SAAS,CACV,CAAA;IACD,IAAI,UAAU,GAAG,QAAQ,CAAA;IACzB,IAAI;QACF,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC;aAChE,UAAU,CAAA;KACd;IAAC,OAAO,CAAC,EAAE,GAAE;IACd,OAAO,CACL,8CAAK,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,iBAAK,CAAC,eAAe,gBACvC,kBAAkB,IAAI,oBAAoB,CAAC,CAAC,CAAC,CAC5C,uBAAC,oBAAoB,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAI,CAC7D,CAAC,CAAC,CAAC,CACF,wBAAC,gBAAgB,eACd,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;oBACnC,OAAO,CACL,CAAC,CAAC,KAAK,IAAI,CACT,uBAAC,eAAM,kBACL,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,CAAC,CAAC,GAAG,EACV,MAAM,EAAE,CAAC,CAAC,MAAM,EAChB,OAAO,EAAE,CAAC,CAAC,OAAO,EAClB,OAAO,EAAE,CAAC,CAAC,OAAO,gBAGjB,CAAC,CAAC,KAAK,KAFH,CAAC,CAGC,CACV,CACF,CAAA;gBACH,CAAC,CAAC,EACF,uBAAC,eAAM,kBAAC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,gBACjD,UAAU,IACJ,IACQ,CACpB,IACG,CACP,CAAA;AACH,CAAC,CAAA;AAzCY,QAAA,oBAAoB,wBAyChC;AAED,kBAAe,4BAAoB,CAAA"}

package/lib/cjs/webchat/trigger-button/styles.js

@@ -24,7 +24,7 @@ exports.UnreadMessagesCounter = styled_components_1.default.div `
   justify-content: center;
   align-items: center;
   border-radius: 50%;
-  position: absolute;
+  position: fixed;
   right: 20px;
   bottom: 80px;
   width: 24px;

package/lib/cjs/webchat/utils.d.ts

@@ -0,0 +1,2 @@
+import { BotonicActionType } from '@botonic/core';
+export declare const getParsedAction: (botonicAction: BotonicActionType) => any;

package/lib/cjs/webchat/utils.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getParsedAction = void 0;
+const core_1 = require("@botonic/core");
+const getParsedAction = (botonicAction) => {
+    const splittedAction = botonicAction.split(`${core_1.BotonicAction.CreateCase}:`);
+    if (splittedAction.length <= 1)
+        return undefined;
+    return JSON.parse(splittedAction[1]);
+};
+exports.getParsedAction = getParsedAction;
+//# sourceMappingURL=utils.js.map

package/lib/cjs/webchat/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/webchat/utils.ts"],"names":[],"mappings":";;;AAAA,wCAAgE;AAEzD,MAAM,eAAe,GAAG,CAAC,aAAgC,EAAE,EAAE;IAClE,MAAM,cAAc,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,oBAAa,CAAC,UAAU,GAAG,CAAC,CAAA;IAC1E,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC;QAAE,OAAO,SAAS,CAAA;IAChD,OAAO,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;AACtC,CAAC,CAAA;AAJY,QAAA,eAAe,mBAI3B"}

package/lib/cjs/webchat/webchat-input-panel/attachment.d.ts

@@ -0,0 +1,7 @@
+interface AttachmentProps {
+    accept: string;
+    enableAttachments: boolean;
+    onChange: (event: any) => void;
+}
+export declare const Attachment: ({ accept, enableAttachments, onChange, }: AttachmentProps) => JSX.Element;
+export {};

package/lib/cjs/webchat/{components → webchat-input-panel}/attachment.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Attachment = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
 const attachment_icon_svg_1 = tslib_1.__importDefault(require("../../assets/attachment-icon.svg"));
 const constants_1 = require("../../constants");
 const contexts_1 = require("../../contexts");
+const common_1 = require("../components/common");
 const conditional_animation_1 = require("../components/conditional-animation");
-const common_1 = require("./common");
-const Attachment = ({ onChange, accept, enableAttachments }) => {
+const Attachment = ({ accept, enableAttachments, onChange, }) => {
     const { getThemeProperty } = (0, react_1.useContext)(contexts_1.WebchatContext);
     const fileInputRef = (0, react_1.useRef)(null);
     const CustomAttachments = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.customAttachments, undefined);
@@ -21,7 +21,9 @@ const Attachment = ({ onChange, accept, enableAttachments }) => {
     const attachmentsEnabled = isAttachmentsEnabled();
     const handleOnChange = event => {
         onChange(event);
-        fileInputRef.current.value = null;
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
     };
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: attachmentsEnabled ? ((0, jsx_runtime_1.jsx)(conditional_animation_1.ConditionalAnimation, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ role: constants_1.ROLES.ATTACHMENT_ICON }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: 'attachment', style: { marginTop: 4 } }, { children: CustomAttachments ? ((0, jsx_runtime_1.jsx)(CustomAttachments, {})) : ((0, jsx_runtime_1.jsx)(common_1.Icon, { src: attachment_icon_svg_1.default })) })), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: 'file', name: 'file', id: 'attachment', style: { display: 'none' }, onChange: handleOnChange, accept: accept })] })) })) : null }));
 };

package/lib/cjs/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,iCAAiD;AAEjD,mGAA6D;AAC7D,+CAAgD;AAChD,6CAA+C;AAC/C,iDAA2C;AAC3C,+EAA0E;AAQnE,MAAM,UAAU,GAAG,CAAC,EACzB,MAAM,EACN,iBAAiB,EACjB,QAAQ,GACQ,EAAE,EAAE;IACpB,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,kBAAU,EAAC,yBAAc,CAAC,CAAA;IAEvD,MAAM,YAAY,GAAG,IAAA,cAAM,EAA0B,IAAI,CAAC,CAAA;IAE1D,MAAM,iBAAiB,GAAG,gBAAgB,CACxC,mBAAO,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,mBAAO,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,2DACG,kBAAkB,CAAC,CAAC,CAAC,CACpB,uBAAC,4CAAoB,cACnB,+CAAK,IAAI,EAAE,iBAAK,CAAC,eAAe,iBAC9B,gDAAO,OAAO,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,gBAChD,iBAAiB,CAAC,CAAC,CAAC,CACnB,uBAAC,iBAAiB,KAAG,CACtB,CAAC,CAAC,CAAC,CACF,uBAAC,aAAI,IAAC,GAAG,EAAE,6BAAc,GAAI,CAC9B,IACK,EACR,kCACE,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;AA1DY,QAAA,UAAU,cA0DtB"}

package/lib/cjs/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/cjs/webchat/{components → webchat-input-panel}/emoji-picker.js

@@ -1,18 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OpenedEmojiPicker = exports.EmojiPicker = void 0;
+exports.EmojiPicker = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const emoji_picker_react_1 = tslib_1.__importDefault(require("emoji-picker-react"));
-const react_1 = tslib_1.__importStar(require("react"));
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const react_1 = require("react");
 const emojiButton_svg_1 = tslib_1.__importDefault(require("../../assets/emojiButton.svg"));
 const constants_1 = require("../../constants");
 const contexts_1 = require("../../contexts");
+const common_1 = require("../components/common");
 const conditional_animation_1 = require("../components/conditional-animation");
-const hooks_1 = require("../hooks");
-const common_1 = require("./common");
-const EmojiPicker = ({ enableEmojiPicker, onClick }) => {
+const EmojiPicker = ({ enableEmojiPicker, onClick, }) => {
     const { getThemeProperty } = (0, react_1.useContext)(contexts_1.WebchatContext);
     const CustomEmojiPicker = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.customEmojiPicker, undefined);
     const isEmojiPickerEnabled = () => {
@@ -21,23 +18,11 @@ const EmojiPicker = ({ enableEmojiPicker, onClick }) => {
         return ((_a = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.enableEmojiPicker, enableEmojiPicker)) !== null && _a !== void 0 ? _a : hasCustomEmojiPicker);
     };
     const emojiPickerEnabled = isEmojiPickerEnabled();
-    const handleClick = event => {
+    const handleClick = (event) => {
         onClick();
         event.stopPropagation();
     };
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: emojiPickerEnabled ? ((0, jsx_runtime_1.jsx)(conditional_animation_1.ConditionalAnimation, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ role: constants_1.ROLES.EMOJI_PICKER_ICON, onClick: handleClick }, { children: CustomEmojiPicker ? ((0, jsx_runtime_1.jsx)(CustomEmojiPicker, {})) : ((0, jsx_runtime_1.jsx)(common_1.Icon, { src: emojiButton_svg_1.default })) })) })) : null }));
 };
 exports.EmojiPicker = EmojiPicker;
-const Container = styled_components_1.default.div `
-  display: flex;
-  justify-content: flex-end;
-  position: absolute;
-  right: 3px;
-  top: -324px;
-`;
-const OpenedEmojiPicker = props => {
-    const { ref, isComponentVisible } = (0, hooks_1.useComponentVisible)(true, props.onClick);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref }, { children: isComponentVisible && ((0, jsx_runtime_1.jsx)(Container, Object.assign({ role: constants_1.ROLES.EMOJI_PICKER }, { children: (0, jsx_runtime_1.jsx)(emoji_picker_react_1.default, { width: '100%', height: '19rem', previewConfig: { showPreview: false }, onEmojiClick: props.onEmojiClick, disableAutoFocus: true }) }))) })));
-};
-exports.OpenedEmojiPicker = OpenedEmojiPicker;
 //# sourceMappingURL=emoji-picker.js.map

package/lib/cjs/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,iCAAyC;AAEzC,2FAAoD;AACpD,+CAAgD;AAChD,6CAA+C;AAC/C,iDAA2C;AAC3C,+EAA0E;AAOnE,MAAM,WAAW,GAAG,CAAC,EAC1B,iBAAiB,EACjB,OAAO,GACU,EAAE,EAAE;IACrB,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,kBAAU,EAAC,yBAAc,CAAC,CAAA;IAEvD,MAAM,iBAAiB,GAAG,gBAAgB,CACxC,mBAAO,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,mBAAO,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,2DACG,kBAAkB,CAAC,CAAC,CAAC,CACpB,uBAAC,4CAAoB,cACnB,8CAAK,IAAI,EAAE,iBAAK,CAAC,iBAAiB,EAAE,OAAO,EAAE,WAAW,gBACrD,iBAAiB,CAAC,CAAC,CAAC,CACnB,uBAAC,iBAAiB,KAAG,CACtB,CAAC,CAAC,CAAC,CACF,uBAAC,aAAI,IAAC,GAAG,EAAE,yBAAS,GAAI,CACzB,IACG,GACe,CACxB,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAA;AACH,CAAC,CAAA;AA1CY,QAAA,WAAW,eA0CvB"}

package/lib/cjs/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/cjs/webchat/webchat-input-panel/index.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebchatInputPanel = 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 contexts_1 = require("../../contexts");
+const message_utils_1 = require("../../message-utils");
+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 WebchatInputPanel = ({ persistentMenu, enableEmojiPicker, enableAttachments, handleAttachment, textareaRef, deviceAdapter, onUserInput, }) => {
+    const { getThemeProperty, sendText, togglePersistentMenu, toggleEmojiPicker, webchatState, } = (0, react_1.useContext)(contexts_1.WebchatContext);
+    const handleSelectedEmoji = event => {
+        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* () {
+        yield sendText(textareaRef.current.value);
+        textareaRef.current.value = '';
+    });
+    const sendChatEvent = (chatEvent) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        const chatEventInput = {
+            id: (0, uuid_1.v4)(),
+            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({ 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, persistentMenu: persistentMenu }), (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { deviceAdapter: deviceAdapter, persistentMenu: persistentMenu, textareaRef: textareaRef, sendChatEvent: sendChatEvent, sendTextAreaText: sendTextAreaText }), (0, jsx_runtime_1.jsx)(emoji_picker_1.EmojiPicker, { enableEmojiPicker: enableEmojiPicker, onClick: handleEmojiClick }), (0, jsx_runtime_1.jsx)(attachment_1.Attachment, { enableAttachments: enableAttachments, onChange: handleAttachment, accept: (0, message_utils_1.getFullMimeWhitelist)().join(',') }), (0, jsx_runtime_1.jsx)(send_button_1.SendButton, { onClick: sendTextAreaText })] })));
+};
+exports.WebchatInputPanel = WebchatInputPanel;
+//# sourceMappingURL=index.js.map

package/lib/cjs/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":";;;;;AAAA,wCAAqC;AACrC,iCAAyC;AACzC,+BAAmC;AAEnC,+CAAyC;AACzC,6CAA+C;AAC/C,uDAA0D;AAE1D,6CAAyC;AACzC,iDAA4C;AAC5C,+DAAyD;AACzD,uDAAkD;AAClD,+CAA0C;AAC1C,qCAA6C;AAC7C,yCAAqC;AAY9B,MAAM,iBAAiB,GAAG,CAAC,EAChC,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,WAAW,GACY,EAAE,EAAE;IAC3B,MAAM,EACJ,gBAAgB,EAChB,QAAQ,EACR,oBAAoB,EACpB,iBAAiB,EACjB,YAAY,GACb,GAAG,IAAA,kBAAU,EAAC,yBAAc,CAAC,CAAA;IAE9B,MAAM,mBAAmB,GAAG,KAAK,CAAC,EAAE;QAClC,WAAW,CAAC,OAAO,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAA;QACxC,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;IAC7B,CAAC,CAAA;IAED,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,iBAAiB,CAAC,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;IACpD,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,oBAAoB,CAAC,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAA;IAC1D,CAAC,CAAA;IAED,MAAM,gBAAgB,GAAG,GAAS,EAAE;QAClC,MAAM,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;QACzC,WAAW,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAA;IAChC,CAAC,CAAA,CAAA;IAED,MAAM,aAAa,GAAG,CAAM,SAAS,EAAC,EAAE;QACtC,MAAM,cAAc,GAAG;YACrB,EAAE,EAAE,IAAA,SAAM,GAAE;YACZ,IAAI,EAAE,YAAK,CAAC,UAAU;YACtB,IAAI,EAAE,SAAS;SAChB,CAAA;QACD,IAAI,WAAW,EAAE;YACf,WAAW,CAAC;gBACV,IAAI,EAAE,YAAY,CAAC,OAAO,CAAC,IAAI;gBAC/B,KAAK,EAAE,cAAc;gBACrB,OAAO,EAAE,YAAY,CAAC,OAAO;gBAC7B,aAAa,EAAE,YAAY,CAAC,aAAa;aAC1C,CAAC,CAAA;SACH;IACH,CAAC,CAAA,CAAA;IAED,OAAO,CACL,wBAAC,2BAAkB,kBACjB,KAAK,oBACA,gBAAgB,CAAC,mBAAO,CAAC,iBAAiB,CAAC,cAAc,CAAC,GAE/D,SAAS,EAAC,sBAAsB,iBAE/B,YAAY,CAAC,iBAAiB,IAAI,CACjC,uBAAC,uCAAiB,IAChB,YAAY,EAAE,mBAAmB,EACjC,OAAO,EAAE,gBAAgB,GACzB,CACH,EAED,uBAAC,gCAAc,IAAC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,GAAI,EAEvE,uBAAC,mBAAQ,IACP,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,gBAAgB,GAClC,EAEF,uBAAC,0BAAW,IACV,iBAAiB,EAAE,iBAAiB,EACpC,OAAO,EAAE,gBAAgB,GACzB,EAEF,uBAAC,uBAAU,IACT,iBAAiB,EAAE,iBAAiB,EACpC,QAAQ,EAAE,gBAAgB,EAC1B,MAAM,EAAE,IAAA,oCAAoB,GAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GACxC,EAEF,uBAAC,wBAAU,IAAC,OAAO,EAAE,gBAAgB,GAAI,KACtB,CACtB,CAAA;AACH,CAAC,CAAA;AAzFY,QAAA,iBAAiB,qBAyF7B"}

package/lib/cjs/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/cjs/webchat/webchat-input-panel/opened-emoji-picker.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenedEmojiPicker = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const emoji_picker_react_1 = tslib_1.__importDefault(require("emoji-picker-react"));
+const constants_1 = require("../../constants");
+const hooks_1 = require("../hooks");
+const styles_1 = require("./styles");
+const OpenedEmojiPicker = ({ onClick, onEmojiClick, }) => {
+    const { ref, isComponentVisible } = (0, hooks_1.useComponentVisible)(true, onClick);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref }, { children: isComponentVisible && ((0, jsx_runtime_1.jsx)(styles_1.OpenedEmojiPickerContainer, Object.assign({ role: constants_1.ROLES.EMOJI_PICKER }, { children: (0, jsx_runtime_1.jsx)(emoji_picker_react_1.default, { width: '100%', height: '19rem', previewConfig: { showPreview: false }, lazyLoadEmojis: true, onEmojiClick: onEmojiClick, autoFocusSearch: false }) }))) })));
+};
+exports.OpenedEmojiPicker = OpenedEmojiPicker;
+//# sourceMappingURL=opened-emoji-picker.js.map

package/lib/cjs/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,oFAAuC;AAGvC,+CAAuC;AACvC,oCAA8C;AAC9C,qCAAqD;AAO9C,MAAM,iBAAiB,GAAG,CAAC,EAChC,OAAO,EACP,YAAY,GACW,EAAE,EAAE;IAC3B,MAAM,EAAE,GAAG,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,EAAC,IAAI,EAAE,OAAO,CAAC,CAAA;IACtE,OAAO,CACL,8CAAK,GAAG,EAAE,GAAgC,gBACvC,kBAAkB,IAAI,CACrB,uBAAC,mCAA0B,kBAAC,IAAI,EAAE,iBAAK,CAAC,YAAY,gBAClD,uBAAC,4BAAM,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;AArBY,QAAA,iBAAiB,qBAqB7B"}

package/lib/cjs/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/cjs/webchat/webchat-input-panel/persistent-menu.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PersistentMenu = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const menuButton_svg_1 = tslib_1.__importDefault(require("../../assets/menuButton.svg"));
+const constants_1 = require("../../constants");
+const contexts_1 = require("../../contexts");
+const common_1 = require("../components/common");
+const conditional_animation_1 = require("../components/conditional-animation");
+const PersistentMenu = ({ onClick, persistentMenu, }) => {
+    const { getThemeProperty } = (0, react_1.useContext)(contexts_1.WebchatContext);
+    const persistentMenuOptions = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.persistentMenu, persistentMenu);
+    const CustomMenuButton = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.customMenuButton, undefined);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: persistentMenuOptions ? ((0, jsx_runtime_1.jsx)(conditional_animation_1.ConditionalAnimation, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ role: constants_1.ROLES.PERSISTENT_MENU_ICON, onClick: onClick }, { children: CustomMenuButton ? (0, jsx_runtime_1.jsx)(CustomMenuButton, {}) : (0, jsx_runtime_1.jsx)(common_1.Icon, { src: menuButton_svg_1.default }) })) })) : null }));
+};
+exports.PersistentMenu = PersistentMenu;
+//# sourceMappingURL=persistent-menu.js.map

package/lib/cjs/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,iCAAyC;AAEzC,yFAAkD;AAClD,+CAAgD;AAChD,6CAA+C;AAC/C,iDAA2C;AAC3C,+EAA0E;AAOnE,MAAM,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,cAAc,GACM,EAAE,EAAE;IACxB,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,kBAAU,EAAC,yBAAc,CAAC,CAAA;IAEvD,MAAM,qBAAqB,GAAG,gBAAgB,CAC5C,mBAAO,CAAC,iBAAiB,CAAC,cAAc,EACxC,cAAc,CACf,CAAA;IAED,MAAM,gBAAgB,GAAG,gBAAgB,CACvC,mBAAO,CAAC,iBAAiB,CAAC,gBAAgB,EAC1C,SAAS,CACV,CAAA;IAED,OAAO,CACL,2DACG,qBAAqB,CAAC,CAAC,CAAC,CACvB,uBAAC,4CAAoB,cACnB,8CAAK,IAAI,EAAE,iBAAK,CAAC,oBAAoB,EAAE,OAAO,EAAE,OAAO,gBACpD,gBAAgB,CAAC,CAAC,CAAC,uBAAC,gBAAgB,KAAG,CAAC,CAAC,CAAC,uBAAC,aAAI,IAAC,GAAG,EAAE,wBAAQ,GAAI,IAC9D,GACe,CACxB,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAA;AACH,CAAC,CAAA;AA3BY,QAAA,cAAc,kBA2B1B"}

package/lib/cjs/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/cjs/webchat/{components → webchat-input-panel}/send-button.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SendButton = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
 const send_button_svg_1 = tslib_1.__importDefault(require("../../assets/send-button.svg"));
 const constants_1 = require("../../constants");
 const contexts_1 = require("../../contexts");
+const common_1 = require("../components/common");
 const conditional_animation_1 = require("../components/conditional-animation");
-const common_1 = require("./common");
 const SendButton = ({ onClick }) => {
     const { getThemeProperty } = (0, react_1.useContext)(contexts_1.WebchatContext);
     const sendButtonEnabled = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.enableSendButton, true);

package/lib/cjs/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,iCAAyC;AAEzC,2FAAyD;AACzD,+CAAgD;AAChD,6CAA+C;AAC/C,iDAA2C;AAC3C,+EAA0E;AAMnE,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAmB,EAAE,EAAE;IACzD,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,kBAAU,EAAC,yBAAc,CAAC,CAAA;IAEvD,MAAM,iBAAiB,GAAG,gBAAgB,CACxC,mBAAO,CAAC,iBAAiB,CAAC,gBAAgB,EAC1C,IAAI,CACL,CAAA;IAED,MAAM,gBAAgB,GAAG,gBAAgB,CACvC,mBAAO,CAAC,iBAAiB,CAAC,gBAAgB,EAC1C,SAAS,CACV,CAAA;IAED,OAAO,CACL,2DACG,iBAAiB,IAAI,gBAAgB,CAAC,CAAC,CAAC,CACvC,uBAAC,4CAAoB,cACnB,8CAAK,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,iBAAK,CAAC,gBAAgB,gBAChD,gBAAgB,CAAC,CAAC,CAAC,CAClB,uBAAC,gBAAgB,KAAG,CACrB,CAAC,CAAC,CAAC,CACF,uBAAC,aAAI,IAAC,GAAG,EAAE,yBAAc,GAAI,CAC9B,IACG,GACe,CACxB,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAA;AACH,CAAC,CAAA;AA5BY,QAAA,UAAU,cA4BtB"}

package/lib/cjs/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/cjs/webchat/webchat-input-panel/styles.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenedEmojiPickerContainer = exports.TextAreaContainer = exports.UserInputContainer = void 0;
+const tslib_1 = require("tslib");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const constants_1 = require("../../constants");
+exports.UserInputContainer = styled_components_1.default.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 ${constants_1.COLORS.SOLID_BLACK_ALPHA_0_5};
+`;
+exports.TextAreaContainer = styled_components_1.default.div `
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+`;
+exports.OpenedEmojiPickerContainer = styled_components_1.default.div `
+  display: flex;
+  justify-content: flex-end;
+  position: absolute;
+  right: 3px;
+  top: -324px;
+`;
+//# sourceMappingURL=styles.js.map

package/lib/cjs/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,kFAAsC;AAEtC,+CAAwC;AAE3B,QAAA,kBAAkB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;;0BASlB,kBAAM,CAAC,qBAAqB;CACrD,CAAA;AAEY,QAAA,iBAAiB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAI1C,CAAA;AAEY,QAAA,0BAA0B,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;CAMnD,CAAA"}

package/lib/cjs/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/cjs/webchat/webchat-input-panel/textarea.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Textarea = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_textarea_autosize_1 = tslib_1.__importDefault(require("react-textarea-autosize"));
+const constants_1 = require("../../constants");
+const contexts_1 = require("../../contexts");
+const index_types_1 = require("../../index-types");
+const styles_1 = require("./styles");
+const Textarea = ({ deviceAdapter, persistentMenu, textareaRef, sendChatEvent, sendTextAreaText, }) => {
+    const { getThemeProperty } = (0, react_1.useContext)(contexts_1.WebchatContext);
+    let isTyping = false;
+    let typingTimeout;
+    const persistentMenuOptions = getThemeProperty(constants_1.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(index_types_1.Typing.On);
+    };
+    const stopTyping = () => {
+        clearTimeoutWithReset(false);
+        isTyping = false;
+        sendChatEvent(index_types_1.Typing.Off);
+    };
+    return ((0, jsx_runtime_1.jsx)(styles_1.TextAreaContainer, { children: (0, jsx_runtime_1.jsx)(react_textarea_autosize_1.default, { ref: (ref) => (textareaRef.current = ref), name: 'text', onFocus: () => {
+                deviceAdapter.onFocus();
+            }, onBlur: () => {
+                deviceAdapter.onBlur();
+            }, maxRows: 4, wrap: 'soft', maxLength: 1000, placeholder: getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.textPlaceholder, constants_1.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(constants_1.WEBCHAT.CUSTOM_PROPERTIES.userInputBoxStyle)) }) }));
+};
+exports.Textarea = Textarea;
+//# sourceMappingURL=textarea.js.map

package/lib/cjs/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/cjs/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";