@botonic/react 0.24.3 → 0.25.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/app.js.map +1 -1
- package/lib/cjs/botonic-tester.js +2 -2
- package/lib/cjs/botonic-tester.js.map +1 -1
- package/lib/cjs/components/audio.js +3 -3
- package/lib/cjs/components/audio.js.map +1 -1
- package/lib/cjs/components/button.js +19 -7
- package/lib/cjs/components/button.js.map +1 -1
- package/lib/cjs/components/buttons-disabler.js +29 -11
- package/lib/cjs/components/buttons-disabler.js.map +1 -1
- package/lib/cjs/components/carousel.d.ts +1 -1
- package/lib/cjs/components/carousel.js +12 -6
- package/lib/cjs/components/carousel.js.map +1 -1
- package/lib/cjs/components/components.js.map +1 -1
- package/lib/cjs/components/custom-message.js +9 -4
- package/lib/cjs/components/custom-message.js.map +1 -1
- package/lib/cjs/components/document.js +5 -3
- package/lib/cjs/components/document.js.map +1 -1
- package/lib/cjs/components/element.js.map +1 -1
- package/lib/cjs/components/handoff.js +2 -2
- package/lib/cjs/components/handoff.js.map +1 -1
- package/lib/cjs/components/image.js +4 -4
- package/lib/cjs/components/image.js.map +1 -1
- package/lib/cjs/components/index-types.js.map +1 -1
- package/lib/cjs/components/index.js.map +1 -1
- package/lib/cjs/components/location.js +2 -2
- package/lib/cjs/components/location.js.map +1 -1
- package/lib/cjs/components/markdown.js.map +1 -1
- package/lib/cjs/components/message/index.js +25 -8
- package/lib/cjs/components/message/index.js.map +1 -1
- package/lib/cjs/components/message/message-image.js +4 -1
- package/lib/cjs/components/message/message-image.js.map +1 -1
- package/lib/cjs/components/message/styles.js.map +1 -1
- package/lib/cjs/components/message/timestamps.js +1 -1
- package/lib/cjs/components/message/timestamps.js.map +1 -1
- package/lib/cjs/components/message-template.js +1 -1
- package/lib/cjs/components/message-template.js.map +1 -1
- package/lib/cjs/components/multichannel/facebook/facebook.js +2 -2
- package/lib/cjs/components/multichannel/facebook/facebook.js.map +1 -1
- package/lib/cjs/components/multichannel/index-types.js.map +1 -1
- package/lib/cjs/components/multichannel/index.js.map +1 -1
- package/lib/cjs/components/multichannel/multichannel-button.js +5 -7
- package/lib/cjs/components/multichannel/multichannel-button.js.map +1 -1
- package/lib/cjs/components/multichannel/multichannel-carousel.js +2 -2
- package/lib/cjs/components/multichannel/multichannel-carousel.js.map +1 -1
- package/lib/cjs/components/multichannel/multichannel-context.d.ts +1 -1
- package/lib/cjs/components/multichannel/multichannel-context.js.map +1 -1
- package/lib/cjs/components/multichannel/multichannel-reply.js +1 -1
- package/lib/cjs/components/multichannel/multichannel-reply.js.map +1 -1
- package/lib/cjs/components/multichannel/multichannel-text.js +10 -11
- package/lib/cjs/components/multichannel/multichannel-text.js.map +1 -1
- package/lib/cjs/components/multichannel/multichannel-utils.js.map +1 -1
- package/lib/cjs/components/multichannel/multichannel.js +9 -9
- package/lib/cjs/components/multichannel/multichannel.js.map +1 -1
- package/lib/cjs/components/multichannel/whatsapp/markdown.js.map +1 -1
- package/lib/cjs/components/pic.js +1 -1
- package/lib/cjs/components/pic.js.map +1 -1
- package/lib/cjs/components/raw.js +2 -2
- package/lib/cjs/components/raw.js.map +1 -1
- package/lib/cjs/components/reply.js +8 -4
- package/lib/cjs/components/reply.js.map +1 -1
- package/lib/cjs/components/share-button.js +1 -1
- package/lib/cjs/components/share-button.js.map +1 -1
- package/lib/cjs/components/subtitle.js +3 -1
- package/lib/cjs/components/subtitle.js.map +1 -1
- package/lib/cjs/components/text.js +7 -3
- package/lib/cjs/components/text.js.map +1 -1
- package/lib/cjs/components/title.js +1 -1
- package/lib/cjs/components/title.js.map +1 -1
- package/lib/cjs/components/video.js +3 -3
- package/lib/cjs/components/video.js.map +1 -1
- package/lib/cjs/components/webchat-settings.js.map +1 -1
- package/lib/cjs/components/whatsapp-button-list.js +2 -2
- package/lib/cjs/components/whatsapp-button-list.js.map +1 -1
- package/lib/cjs/components/whatsapp-template.js +2 -2
- package/lib/cjs/components/whatsapp-template.js.map +1 -1
- package/lib/cjs/constants.js.map +1 -1
- package/lib/cjs/contexts.js.map +1 -1
- package/lib/cjs/dev-app.d.ts +2 -2
- package/lib/cjs/dev-app.js +6 -5
- package/lib/cjs/dev-app.js.map +1 -1
- package/lib/cjs/index-types.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/message-utils.d.ts +1 -1
- package/lib/cjs/message-utils.js.map +1 -1
- package/lib/cjs/msg-to-botonic.d.ts +1 -1
- package/lib/cjs/msg-to-botonic.js +14 -15
- package/lib/cjs/msg-to-botonic.js.map +1 -1
- package/lib/cjs/node-app.d.ts +1 -1
- package/lib/cjs/node-app.js +4 -1
- package/lib/cjs/node-app.js.map +1 -1
- package/lib/cjs/react-bot.d.ts +1 -1
- package/lib/cjs/react-bot.js +7 -3
- package/lib/cjs/react-bot.js.map +1 -1
- package/lib/cjs/util/dom.js.map +1 -1
- package/lib/cjs/util/environment.js.map +1 -1
- package/lib/cjs/util/error-boundary.js.map +1 -1
- package/lib/cjs/util/index.js.map +1 -1
- package/lib/cjs/util/logs.js.map +1 -1
- package/lib/cjs/util/objects.js.map +1 -1
- package/lib/cjs/util/react.js.map +1 -1
- package/lib/cjs/util/regexs.js.map +1 -1
- package/lib/cjs/util/webchat.d.ts +1 -1
- package/lib/cjs/util/webchat.js.map +1 -1
- package/lib/cjs/webchat/actions.js.map +1 -1
- package/lib/cjs/webchat/components/attachment.js +2 -3
- package/lib/cjs/webchat/components/attachment.js.map +1 -1
- package/lib/cjs/webchat/components/common.js.map +1 -1
- package/lib/cjs/webchat/components/conditional-animation.js +1 -1
- package/lib/cjs/webchat/components/conditional-animation.js.map +1 -1
- package/lib/cjs/webchat/components/emoji-picker.js +3 -4
- package/lib/cjs/webchat/components/emoji-picker.js.map +1 -1
- package/lib/cjs/webchat/components/persistent-menu.js +4 -4
- package/lib/cjs/webchat/components/persistent-menu.js.map +1 -1
- package/lib/cjs/webchat/components/send-button.js +1 -1
- package/lib/cjs/webchat/components/send-button.js.map +1 -1
- package/lib/cjs/webchat/components/styled-scrollbar.js.map +1 -1
- package/lib/cjs/webchat/components/typing-indicator.js +1 -1
- package/lib/cjs/webchat/components/typing-indicator.js.map +1 -1
- package/lib/cjs/webchat/devices/device-adapter.d.ts +2 -2
- package/lib/cjs/webchat/devices/device-adapter.js.map +1 -1
- package/lib/cjs/webchat/devices/index.js.map +1 -1
- package/lib/cjs/webchat/devices/scrollbar-controller.js.map +1 -1
- package/lib/cjs/webchat/devices/webchat-resizer.js.map +1 -1
- package/lib/cjs/webchat/header.js +1 -1
- package/lib/cjs/webchat/header.js.map +1 -1
- package/lib/cjs/webchat/hooks/index.js.map +1 -1
- package/lib/cjs/webchat/hooks/use-component-visible.js.map +1 -1
- package/lib/cjs/webchat/hooks/use-component-will-mount.js.map +1 -1
- package/lib/cjs/webchat/hooks/use-previous.js.map +1 -1
- package/lib/cjs/webchat/hooks/use-typing.js +1 -1
- package/lib/cjs/webchat/hooks/use-typing.js.map +1 -1
- package/lib/cjs/webchat/hooks/use-webchat.js.map +1 -1
- package/lib/cjs/webchat/index-types.js.map +1 -1
- package/lib/cjs/webchat/index.js.map +1 -1
- package/lib/cjs/webchat/message-list/index.js +11 -7
- package/lib/cjs/webchat/message-list/index.js.map +1 -1
- package/lib/cjs/webchat/message-list/intro-message.js +4 -2
- package/lib/cjs/webchat/message-list/intro-message.js.map +1 -1
- package/lib/cjs/webchat/message-list/scroll-button.js +1 -1
- package/lib/cjs/webchat/message-list/scroll-button.js.map +1 -1
- package/lib/cjs/webchat/message-list/styles.js.map +1 -1
- package/lib/cjs/webchat/message-list/unread-messages-banner.js +1 -1
- package/lib/cjs/webchat/message-list/unread-messages-banner.js.map +1 -1
- package/lib/cjs/webchat/message-list/use-debounce.js.map +1 -1
- package/lib/cjs/webchat/messages-reducer.js +51 -19
- package/lib/cjs/webchat/messages-reducer.js.map +1 -1
- package/lib/cjs/webchat/replies.js +5 -2
- package/lib/cjs/webchat/replies.js.map +1 -1
- package/lib/cjs/webchat/session-view.js +10 -4
- package/lib/cjs/webchat/session-view.js.map +1 -1
- package/lib/cjs/webchat/trigger-button/index.js +1 -1
- package/lib/cjs/webchat/trigger-button/index.js.map +1 -1
- package/lib/cjs/webchat/trigger-button/styles.js.map +1 -1
- package/lib/cjs/webchat/use-storage-state-hook.js +4 -5
- package/lib/cjs/webchat/use-storage-state-hook.js.map +1 -1
- package/lib/cjs/webchat/webchat-dev.d.ts +2 -2
- package/lib/cjs/webchat/webchat-dev.js +3 -6
- package/lib/cjs/webchat/webchat-dev.js.map +1 -1
- package/lib/cjs/webchat/webchat-reducer.js +23 -17
- package/lib/cjs/webchat/webchat-reducer.js.map +1 -1
- package/lib/cjs/webchat/webchat.d.ts +1 -1
- package/lib/cjs/webchat/webchat.js +45 -21
- package/lib/cjs/webchat/webchat.js.map +1 -1
- package/lib/cjs/webchat/webview.js +8 -4
- package/lib/cjs/webchat/webview.js.map +1 -1
- package/lib/cjs/webchat-app.d.ts +2 -2
- package/lib/cjs/webchat-app.js +6 -8
- package/lib/cjs/webchat-app.js.map +1 -1
- package/lib/cjs/webview-app.js +1 -1
- package/lib/cjs/webview-app.js.map +1 -1
- package/lib/esm/app.js +5 -1
- package/lib/esm/app.js.map +1 -1
- package/lib/esm/botonic-tester.js +24 -18
- package/lib/esm/botonic-tester.js.map +1 -1
- package/lib/esm/components/audio.js +17 -12
- package/lib/esm/components/audio.js.map +1 -1
- package/lib/esm/components/button.js +54 -37
- package/lib/esm/components/button.js.map +1 -1
- package/lib/esm/components/buttons-disabler.js +47 -25
- package/lib/esm/components/buttons-disabler.js.map +1 -1
- package/lib/esm/components/carousel.d.ts +1 -1
- package/lib/esm/components/carousel.js +49 -38
- package/lib/esm/components/carousel.js.map +1 -1
- package/lib/esm/components/components.js +7 -2
- package/lib/esm/components/components.js.map +1 -1
- package/lib/esm/components/custom-message.js +29 -20
- package/lib/esm/components/custom-message.js.map +1 -1
- package/lib/esm/components/document.js +24 -17
- package/lib/esm/components/document.js.map +1 -1
- package/lib/esm/components/element.js +19 -14
- package/lib/esm/components/element.js.map +1 -1
- package/lib/esm/components/handoff.js +24 -19
- package/lib/esm/components/handoff.js.map +1 -1
- package/lib/esm/components/image.js +25 -20
- package/lib/esm/components/image.js.map +1 -1
- package/lib/esm/components/index-types.js +2 -1
- package/lib/esm/components/index-types.js.map +1 -1
- package/lib/esm/components/index.js +48 -23
- package/lib/esm/components/index.js.map +1 -1
- package/lib/esm/components/location.js +17 -12
- package/lib/esm/components/location.js.map +1 -1
- package/lib/esm/components/markdown.js +24 -14
- package/lib/esm/components/markdown.js.map +1 -1
- package/lib/esm/components/message/index.js +79 -58
- package/lib/esm/components/message/index.js.map +1 -1
- package/lib/esm/components/message/message-image.js +22 -15
- package/lib/esm/components/message/message-image.js.map +1 -1
- package/lib/esm/components/message/styles.js +16 -12
- package/lib/esm/components/message/styles.js.map +1 -1
- package/lib/esm/components/message/timestamps.js +24 -19
- package/lib/esm/components/message/timestamps.js.map +1 -1
- package/lib/esm/components/message-template.js +11 -6
- package/lib/esm/components/message-template.js.map +1 -1
- package/lib/esm/components/multichannel/facebook/facebook.js +10 -6
- package/lib/esm/components/multichannel/facebook/facebook.js.map +1 -1
- package/lib/esm/components/multichannel/index-types.js +2 -1
- package/lib/esm/components/multichannel/index-types.js.map +1 -1
- package/lib/esm/components/multichannel/index.js +15 -11
- package/lib/esm/components/multichannel/index.js.map +1 -1
- package/lib/esm/components/multichannel/multichannel-button.js +20 -17
- package/lib/esm/components/multichannel/multichannel-button.js.map +1 -1
- package/lib/esm/components/multichannel/multichannel-carousel.js +21 -16
- package/lib/esm/components/multichannel/multichannel-carousel.js.map +1 -1
- package/lib/esm/components/multichannel/multichannel-context.d.ts +1 -1
- package/lib/esm/components/multichannel/multichannel-context.js +6 -2
- package/lib/esm/components/multichannel/multichannel-context.js.map +1 -1
- package/lib/esm/components/multichannel/multichannel-reply.js +14 -9
- package/lib/esm/components/multichannel/multichannel-reply.js.map +1 -1
- package/lib/esm/components/multichannel/multichannel-text.js +51 -47
- package/lib/esm/components/multichannel/multichannel-text.js.map +1 -1
- package/lib/esm/components/multichannel/multichannel-utils.js +42 -26
- package/lib/esm/components/multichannel/multichannel-utils.js.map +1 -1
- package/lib/esm/components/multichannel/multichannel.js +38 -33
- package/lib/esm/components/multichannel/multichannel.js.map +1 -1
- package/lib/esm/components/multichannel/whatsapp/markdown.js +5 -1
- package/lib/esm/components/multichannel/whatsapp/markdown.js.map +1 -1
- package/lib/esm/components/pic.js +21 -16
- package/lib/esm/components/pic.js.map +1 -1
- package/lib/esm/components/raw.js +22 -17
- package/lib/esm/components/raw.js.map +1 -1
- package/lib/esm/components/reply.js +26 -17
- package/lib/esm/components/reply.js.map +1 -1
- package/lib/esm/components/share-button.js +11 -6
- package/lib/esm/components/share-button.js.map +1 -1
- package/lib/esm/components/subtitle.js +19 -12
- package/lib/esm/components/subtitle.js.map +1 -1
- package/lib/esm/components/text.js +21 -12
- package/lib/esm/components/text.js.map +1 -1
- package/lib/esm/components/title.js +15 -10
- package/lib/esm/components/title.js.map +1 -1
- package/lib/esm/components/video.js +20 -15
- package/lib/esm/components/video.js.map +1 -1
- package/lib/esm/components/webchat-settings.js +17 -12
- package/lib/esm/components/webchat-settings.js.map +1 -1
- package/lib/esm/components/whatsapp-button-list.js +12 -8
- package/lib/esm/components/whatsapp-button-list.js.map +1 -1
- package/lib/esm/components/whatsapp-template.js +14 -9
- package/lib/esm/components/whatsapp-template.js.map +1 -1
- package/lib/esm/constants.js +12 -8
- package/lib/esm/constants.js.map +1 -1
- package/lib/esm/contexts.js +8 -5
- package/lib/esm/contexts.js.map +1 -1
- package/lib/esm/dev-app.d.ts +2 -2
- package/lib/esm/dev-app.js +26 -21
- package/lib/esm/dev-app.js.map +1 -1
- package/lib/esm/index-types.js +5 -2
- package/lib/esm/index-types.js.map +1 -1
- package/lib/esm/index.js +25 -11
- package/lib/esm/index.js.map +1 -1
- package/lib/esm/message-utils.d.ts +1 -1
- package/lib/esm/message-utils.js +46 -26
- package/lib/esm/message-utils.js.map +1 -1
- package/lib/esm/msg-to-botonic.d.ts +1 -1
- package/lib/esm/msg-to-botonic.js +52 -47
- package/lib/esm/msg-to-botonic.js.map +1 -1
- package/lib/esm/node-app.d.ts +1 -1
- package/lib/esm/node-app.js +12 -5
- package/lib/esm/node-app.js.map +1 -1
- package/lib/esm/react-bot.d.ts +1 -1
- package/lib/esm/react-bot.js +19 -10
- package/lib/esm/react-bot.js.map +1 -1
- package/lib/esm/util/dom.js +22 -13
- package/lib/esm/util/dom.js.map +1 -1
- package/lib/esm/util/environment.js +16 -9
- package/lib/esm/util/environment.js.map +1 -1
- package/lib/esm/util/error-boundary.js +12 -7
- package/lib/esm/util/error-boundary.js.map +1 -1
- package/lib/esm/util/index.js +11 -8
- package/lib/esm/util/index.js.map +1 -1
- package/lib/esm/util/logs.js +9 -4
- package/lib/esm/util/logs.js.map +1 -1
- package/lib/esm/util/objects.js +9 -3
- package/lib/esm/util/objects.js.map +1 -1
- package/lib/esm/util/react.js +25 -17
- package/lib/esm/util/react.js.map +1 -1
- package/lib/esm/util/regexs.js +7 -2
- package/lib/esm/util/regexs.js.map +1 -1
- package/lib/esm/util/webchat.d.ts +1 -1
- package/lib/esm/util/webchat.js +25 -16
- package/lib/esm/util/webchat.js.map +1 -1
- package/lib/esm/webchat/actions.js +5 -2
- package/lib/esm/webchat/actions.js.map +1 -1
- package/lib/esm/webchat/components/attachment.js +18 -14
- package/lib/esm/webchat/components/attachment.js.map +1 -1
- package/lib/esm/webchat/components/common.js +11 -6
- package/lib/esm/webchat/components/common.js.map +1 -1
- package/lib/esm/webchat/components/conditional-animation.js +15 -10
- package/lib/esm/webchat/components/conditional-animation.js.map +1 -1
- package/lib/esm/webchat/components/emoji-picker.js +25 -20
- package/lib/esm/webchat/components/emoji-picker.js.map +1 -1
- package/lib/esm/webchat/components/persistent-menu.js +30 -24
- package/lib/esm/webchat/components/persistent-menu.js.map +1 -1
- package/lib/esm/webchat/components/send-button.js +17 -12
- package/lib/esm/webchat/components/send-button.js.map +1 -1
- package/lib/esm/webchat/components/styled-scrollbar.js +15 -11
- package/lib/esm/webchat/components/styled-scrollbar.js.map +1 -1
- package/lib/esm/webchat/components/typing-indicator.js +10 -5
- package/lib/esm/webchat/components/typing-indicator.js.map +1 -1
- package/lib/esm/webchat/devices/device-adapter.d.ts +2 -2
- package/lib/esm/webchat/devices/device-adapter.js +13 -9
- package/lib/esm/webchat/devices/device-adapter.js.map +1 -1
- package/lib/esm/webchat/devices/index.js +9 -4
- package/lib/esm/webchat/devices/index.js.map +1 -1
- package/lib/esm/webchat/devices/scrollbar-controller.js +14 -10
- package/lib/esm/webchat/devices/scrollbar-controller.js.map +1 -1
- package/lib/esm/webchat/devices/webchat-resizer.js +10 -6
- package/lib/esm/webchat/devices/webchat-resizer.js.map +1 -1
- package/lib/esm/webchat/header.js +39 -33
- package/lib/esm/webchat/header.js.map +1 -1
- package/lib/esm/webchat/hooks/index.js +14 -5
- package/lib/esm/webchat/hooks/index.js.map +1 -1
- package/lib/esm/webchat/hooks/use-component-visible.js +9 -5
- package/lib/esm/webchat/hooks/use-component-visible.js.map +1 -1
- package/lib/esm/webchat/hooks/use-component-will-mount.js +7 -3
- package/lib/esm/webchat/hooks/use-component-will-mount.js.map +1 -1
- package/lib/esm/webchat/hooks/use-previous.js +8 -4
- package/lib/esm/webchat/hooks/use-previous.js.map +1 -1
- package/lib/esm/webchat/hooks/use-typing.js +8 -4
- package/lib/esm/webchat/hooks/use-typing.js.map +1 -1
- package/lib/esm/webchat/hooks/use-webchat.js +43 -39
- package/lib/esm/webchat/hooks/use-webchat.js.map +1 -1
- package/lib/esm/webchat/index-types.js +2 -1
- package/lib/esm/webchat/index-types.js.map +1 -1
- package/lib/esm/webchat/index.js +11 -4
- package/lib/esm/webchat/index.js.map +1 -1
- package/lib/esm/webchat/message-list/index.js +38 -30
- package/lib/esm/webchat/message-list/index.js.map +1 -1
- package/lib/esm/webchat/message-list/intro-message.js +23 -16
- package/lib/esm/webchat/message-list/intro-message.js.map +1 -1
- package/lib/esm/webchat/message-list/scroll-button.js +19 -14
- package/lib/esm/webchat/message-list/scroll-button.js.map +1 -1
- package/lib/esm/webchat/message-list/styles.js +9 -5
- package/lib/esm/webchat/message-list/styles.js.map +1 -1
- package/lib/esm/webchat/message-list/unread-messages-banner.js +20 -15
- package/lib/esm/webchat/message-list/unread-messages-banner.js.map +1 -1
- package/lib/esm/webchat/message-list/use-debounce.js +8 -4
- package/lib/esm/webchat/message-list/use-debounce.js.map +1 -1
- package/lib/esm/webchat/messages-reducer.js +65 -29
- package/lib/esm/webchat/messages-reducer.js.map +1 -1
- package/lib/esm/webchat/replies.js +23 -15
- package/lib/esm/webchat/replies.js.map +1 -1
- package/lib/esm/webchat/session-view.js +42 -31
- package/lib/esm/webchat/session-view.js.map +1 -1
- package/lib/esm/webchat/trigger-button/index.js +19 -15
- package/lib/esm/webchat/trigger-button/index.js.map +1 -1
- package/lib/esm/webchat/trigger-button/styles.js +11 -7
- package/lib/esm/webchat/trigger-button/styles.js.map +1 -1
- package/lib/esm/webchat/use-storage-state-hook.js +13 -10
- package/lib/esm/webchat/use-storage-state-hook.js.map +1 -1
- package/lib/esm/webchat/webchat-dev.d.ts +2 -2
- package/lib/esm/webchat/webchat-dev.js +23 -22
- package/lib/esm/webchat/webchat-dev.js.map +1 -1
- package/lib/esm/webchat/webchat-reducer.js +48 -38
- package/lib/esm/webchat/webchat-reducer.js.map +1 -1
- package/lib/esm/webchat/webchat.d.ts +1 -1
- package/lib/esm/webchat/webchat.js +176 -147
- package/lib/esm/webchat/webchat.js.map +1 -1
- package/lib/esm/webchat/webview.js +38 -28
- package/lib/esm/webchat/webview.js.map +1 -1
- package/lib/esm/webchat-app.d.ts +2 -2
- package/lib/esm/webchat-app.js +37 -35
- package/lib/esm/webchat-app.js.map +1 -1
- package/lib/esm/webview-app.js +26 -21
- package/lib/esm/webview-app.js.map +1 -1
- package/package.json +8 -19
- package/lib/cjs/assets/index-types.d.ts +0 -4
- package/lib/cjs/assets/index-types.js +0 -2
- package/lib/cjs/assets/index-types.js.map +0 -1
- package/lib/esm/assets/index-types.d.ts +0 -4
- package/lib/esm/assets/index-types.js +0 -2
- package/lib/esm/assets/index-types.js.map +0 -1
- package/src/.DS_Store +0 -0
- /package/src/assets/{index-types.ts → types.d.ts} +0 -0
|
@@ -1,55 +1,60 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Webchat = exports.getParsedAction = void 0;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const core_1 = require("@botonic/core");
|
|
7
|
+
const lodash_merge_1 = tslib_1.__importDefault(require("lodash.merge"));
|
|
8
|
+
const react_1 = tslib_1.__importStar(require("react"));
|
|
9
|
+
const react_textarea_autosize_1 = tslib_1.__importDefault(require("react-textarea-autosize"));
|
|
10
|
+
const styled_components_1 = tslib_1.__importStar(require("styled-components"));
|
|
11
|
+
const use_async_effect_1 = require("use-async-effect");
|
|
12
|
+
const uuid_1 = require("uuid");
|
|
13
|
+
const components_1 = require("../components");
|
|
14
|
+
const handoff_1 = require("../components/handoff");
|
|
15
|
+
const webchat_settings_1 = require("../components/webchat-settings");
|
|
16
|
+
const constants_1 = require("../constants");
|
|
17
|
+
const contexts_1 = require("../contexts");
|
|
18
|
+
const index_types_1 = require("../index-types");
|
|
19
|
+
const message_utils_1 = require("../message-utils");
|
|
20
|
+
const msg_to_botonic_1 = require("../msg-to-botonic");
|
|
21
|
+
const dom_1 = require("../util/dom");
|
|
22
|
+
const environment_1 = require("../util/environment");
|
|
23
|
+
const regexs_1 = require("../util/regexs");
|
|
24
|
+
const webchat_1 = require("../util/webchat");
|
|
25
|
+
const attachment_1 = require("./components/attachment");
|
|
26
|
+
const emoji_picker_1 = require("./components/emoji-picker");
|
|
27
|
+
const persistent_menu_1 = require("./components/persistent-menu");
|
|
28
|
+
const send_button_1 = require("./components/send-button");
|
|
29
|
+
const device_adapter_1 = require("./devices/device-adapter");
|
|
30
|
+
const header_1 = require("./header");
|
|
31
|
+
const hooks_1 = require("./hooks");
|
|
32
|
+
const message_list_1 = require("./message-list");
|
|
33
|
+
const replies_1 = require("./replies");
|
|
34
|
+
const trigger_button_1 = require("./trigger-button");
|
|
35
|
+
const use_storage_state_hook_1 = require("./use-storage-state-hook");
|
|
36
|
+
const webview_1 = require("./webview");
|
|
37
|
+
const getParsedAction = botonicAction => {
|
|
34
38
|
const splittedAction = botonicAction.split('create_case:');
|
|
35
39
|
if (splittedAction.length <= 1)
|
|
36
40
|
return undefined;
|
|
37
41
|
return JSON.parse(splittedAction[1]);
|
|
38
42
|
};
|
|
39
|
-
|
|
43
|
+
exports.getParsedAction = getParsedAction;
|
|
44
|
+
const StyledWebchat = styled_components_1.default.div `
|
|
40
45
|
position: fixed;
|
|
41
46
|
right: 20px;
|
|
42
47
|
bottom: 20px;
|
|
43
48
|
width: ${props => props.width}px;
|
|
44
49
|
height: ${props => props.height}px;
|
|
45
50
|
margin: auto;
|
|
46
|
-
background-color: ${COLORS.SOLID_WHITE};
|
|
51
|
+
background-color: ${constants_1.COLORS.SOLID_WHITE};
|
|
47
52
|
border-radius: 10px;
|
|
48
|
-
box-shadow: ${COLORS.SOLID_BLACK_ALPHA_0_2} 0px 0px 12px;
|
|
53
|
+
box-shadow: ${constants_1.COLORS.SOLID_BLACK_ALPHA_0_2} 0px 0px 12px;
|
|
49
54
|
display: flex;
|
|
50
55
|
flex-direction: column;
|
|
51
56
|
`;
|
|
52
|
-
const UserInputContainer =
|
|
57
|
+
const UserInputContainer = styled_components_1.default.div `
|
|
53
58
|
min-height: 52px;
|
|
54
59
|
position: relative;
|
|
55
60
|
display: flex;
|
|
@@ -58,36 +63,36 @@ const UserInputContainer = styled.div `
|
|
|
58
63
|
gap: 16px;
|
|
59
64
|
padding: 0px 16px;
|
|
60
65
|
z-index: 1;
|
|
61
|
-
border-top: 1px solid ${COLORS.SOLID_BLACK_ALPHA_0_5};
|
|
66
|
+
border-top: 1px solid ${constants_1.COLORS.SOLID_BLACK_ALPHA_0_5};
|
|
62
67
|
`;
|
|
63
|
-
const TextAreaContainer =
|
|
68
|
+
const TextAreaContainer = styled_components_1.default.div `
|
|
64
69
|
display: flex;
|
|
65
70
|
flex: 1 1 auto;
|
|
66
71
|
align-items: center;
|
|
67
72
|
`;
|
|
68
|
-
const ErrorMessageContainer =
|
|
73
|
+
const ErrorMessageContainer = styled_components_1.default.div `
|
|
69
74
|
position: relative;
|
|
70
75
|
display: flex;
|
|
71
76
|
z-index: 1;
|
|
72
77
|
justify-content: center;
|
|
73
78
|
width: 100%;
|
|
74
79
|
`;
|
|
75
|
-
const ErrorMessage =
|
|
80
|
+
const ErrorMessage = styled_components_1.default.div `
|
|
76
81
|
position: absolute;
|
|
77
82
|
top: 10px;
|
|
78
83
|
font-size: 14px;
|
|
79
84
|
line-height: 20px;
|
|
80
85
|
padding: 4px 11px;
|
|
81
86
|
display: flex;
|
|
82
|
-
background-color: ${COLORS.ERROR_RED};
|
|
83
|
-
color: ${COLORS.CONCRETE_WHITE};
|
|
87
|
+
background-color: ${constants_1.COLORS.ERROR_RED};
|
|
88
|
+
color: ${constants_1.COLORS.CONCRETE_WHITE};
|
|
84
89
|
border-radius: 5px;
|
|
85
90
|
align-items: center;
|
|
86
91
|
justify-content: center;
|
|
87
|
-
font-family: ${WEBCHAT.DEFAULTS.FONT_FAMILY};
|
|
92
|
+
font-family: ${constants_1.WEBCHAT.DEFAULTS.FONT_FAMILY};
|
|
88
93
|
`;
|
|
89
|
-
const DarkBackgroundMenu =
|
|
90
|
-
background: ${COLORS.SOLID_BLACK};
|
|
94
|
+
const DarkBackgroundMenu = styled_components_1.default.div `
|
|
95
|
+
background: ${constants_1.COLORS.SOLID_BLACK};
|
|
91
96
|
opacity: 0.3;
|
|
92
97
|
z-index: 1;
|
|
93
98
|
right: 0;
|
|
@@ -98,27 +103,27 @@ const DarkBackgroundMenu = styled.div `
|
|
|
98
103
|
height: 100%;
|
|
99
104
|
`;
|
|
100
105
|
// eslint-disable-next-line complexity, react/display-name
|
|
101
|
-
|
|
106
|
+
exports.Webchat = (0, react_1.forwardRef)((props, ref) => {
|
|
102
107
|
const { addMessage, addMessageComponent, clearMessages, doRenderCustomComponent, openWebviewT, resetUnreadMessages, setCurrentAttachment, setError, setLastMessageVisible, setOnline, toggleCoverComponent, toggleEmojiPicker, togglePersistentMenu, toggleWebchat, updateDevSettings, updateHandoff, updateLastMessageDate, updateLastRoutePath, updateLatestInput, updateMessage, updateReplies, updateSession, updateTheme, updateTyping, updateWebview, webchatState,
|
|
103
108
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
104
|
-
} = props.webchatHooks || useWebchat();
|
|
105
|
-
const firstUpdate = useRef(true);
|
|
109
|
+
} = props.webchatHooks || (0, hooks_1.useWebchat)();
|
|
110
|
+
const firstUpdate = (0, react_1.useRef)(true);
|
|
106
111
|
const isOnline = () => webchatState.online;
|
|
107
112
|
const currentDateString = () => new Date().toISOString();
|
|
108
|
-
const theme =
|
|
113
|
+
const theme = (0, lodash_merge_1.default)(webchatState.theme, props.theme);
|
|
109
114
|
const { initialSession, initialDevSettings, onStateChange } = props;
|
|
110
|
-
const getThemeProperty = _getThemeProperty(theme);
|
|
111
|
-
const [customComponent, setCustomComponent] = useState(null);
|
|
115
|
+
const getThemeProperty = (0, webchat_1._getThemeProperty)(theme);
|
|
116
|
+
const [customComponent, setCustomComponent] = (0, react_1.useState)(null);
|
|
112
117
|
const storage = props.storage;
|
|
113
118
|
const storageKey = typeof props.storageKey === 'function'
|
|
114
119
|
? props.storageKey()
|
|
115
120
|
: props.storageKey;
|
|
116
|
-
const [botonicState, saveState] = useStorageState(storage, storageKey);
|
|
121
|
+
const [botonicState, saveState] = (0, use_storage_state_hook_1.useStorageState)(storage, storageKey);
|
|
117
122
|
const host = props.host || document.body;
|
|
118
|
-
const deviceAdapter = new DeviceAdapter();
|
|
123
|
+
const deviceAdapter = new device_adapter_1.DeviceAdapter();
|
|
119
124
|
const saveWebchatState = webchatState => {
|
|
120
125
|
storage &&
|
|
121
|
-
saveState(JSON.parse(stringifyWithRegexs({
|
|
126
|
+
saveState(JSON.parse((0, regexs_1.stringifyWithRegexs)({
|
|
122
127
|
messages: webchatState.messagesJSON,
|
|
123
128
|
session: webchatState.session,
|
|
124
129
|
lastRoutePath: webchatState.lastRoutePath,
|
|
@@ -128,23 +133,23 @@ export const Webchat = forwardRef((props, ref) => {
|
|
|
128
133
|
})));
|
|
129
134
|
};
|
|
130
135
|
const handleAttachment = event => {
|
|
131
|
-
if (!isAllowedSize(event.target.files[0].size)) {
|
|
132
|
-
throw new Error(`The file is too large. A maximum of ${MAX_ALLOWED_SIZE_MB}MB is allowed.`);
|
|
136
|
+
if (!(0, message_utils_1.isAllowedSize)(event.target.files[0].size)) {
|
|
137
|
+
throw new Error(`The file is too large. A maximum of ${constants_1.MAX_ALLOWED_SIZE_MB}MB is allowed.`);
|
|
133
138
|
}
|
|
134
139
|
setCurrentAttachment({
|
|
135
140
|
fileName: event.target.files[0].name,
|
|
136
141
|
file: event.target.files[0],
|
|
137
|
-
attachmentType: getMediaType(event.target.files[0].type),
|
|
142
|
+
attachmentType: (0, message_utils_1.getMediaType)(event.target.files[0].type),
|
|
138
143
|
});
|
|
139
144
|
};
|
|
140
|
-
useEffect(() => {
|
|
145
|
+
(0, react_1.useEffect)(() => {
|
|
141
146
|
if (webchatState.currentAttachment)
|
|
142
147
|
sendAttachment(webchatState.currentAttachment);
|
|
143
148
|
}, [webchatState.currentAttachment]);
|
|
144
149
|
const sendUserInput = async (input) => {
|
|
145
150
|
if (props.onUserInput) {
|
|
146
151
|
resetUnreadMessages();
|
|
147
|
-
scrollToBottom({ host });
|
|
152
|
+
(0, dom_1.scrollToBottom)({ host });
|
|
148
153
|
props.onUserInput({
|
|
149
154
|
user: webchatState.session.user,
|
|
150
155
|
input: input,
|
|
@@ -155,8 +160,8 @@ export const Webchat = forwardRef((props, ref) => {
|
|
|
155
160
|
};
|
|
156
161
|
const sendChatEvent = async (chatEvent) => {
|
|
157
162
|
const chatEventInput = {
|
|
158
|
-
id:
|
|
159
|
-
type: INPUT.CHAT_EVENT,
|
|
163
|
+
id: (0, uuid_1.v4)(),
|
|
164
|
+
type: core_1.INPUT.CHAT_EVENT,
|
|
160
165
|
data: chatEvent,
|
|
161
166
|
};
|
|
162
167
|
props.onUserInput &&
|
|
@@ -168,7 +173,7 @@ export const Webchat = forwardRef((props, ref) => {
|
|
|
168
173
|
});
|
|
169
174
|
};
|
|
170
175
|
// Load styles stored in window._botonicInsertStyles by Webpack
|
|
171
|
-
useComponentWillMount(() => {
|
|
176
|
+
(0, hooks_1.useComponentWillMount)(() => {
|
|
172
177
|
if (window._botonicInsertStyles && window._botonicInsertStyles.length) {
|
|
173
178
|
for (const botonicStyle of window._botonicInsertStyles) {
|
|
174
179
|
// Injecting styles at head is needed even if we use shadowDOM
|
|
@@ -192,27 +197,27 @@ export const Webchat = forwardRef((props, ref) => {
|
|
|
192
197
|
}
|
|
193
198
|
});
|
|
194
199
|
// Load initial state from storage
|
|
195
|
-
useEffect(() => {
|
|
200
|
+
(0, react_1.useEffect)(() => {
|
|
196
201
|
let { messages, session, lastRoutePath, devSettings, lastMessageUpdate, themeUpdates, } = botonicState || {};
|
|
197
|
-
session = initSession(session);
|
|
202
|
+
session = (0, webchat_1.initSession)(session);
|
|
198
203
|
updateSession(session);
|
|
199
|
-
if (shouldKeepSessionOnReload({ initialDevSettings, devSettings })) {
|
|
204
|
+
if ((0, webchat_1.shouldKeepSessionOnReload)({ initialDevSettings, devSettings })) {
|
|
200
205
|
if (messages) {
|
|
201
206
|
messages.forEach(message => {
|
|
202
207
|
addMessage(message);
|
|
203
|
-
const newMessageComponent =
|
|
208
|
+
const newMessageComponent = (0, msg_to_botonic_1.msgToBotonic)({ ...message, delay: 0, typing: 0 }, (props.theme.message && props.theme.message.customTypes) ||
|
|
204
209
|
props.theme.customMessageTypes);
|
|
205
210
|
if (newMessageComponent)
|
|
206
211
|
addMessageComponent(newMessageComponent);
|
|
207
212
|
});
|
|
208
213
|
}
|
|
209
214
|
if (initialSession)
|
|
210
|
-
updateSession(
|
|
215
|
+
updateSession((0, lodash_merge_1.default)(initialSession, session));
|
|
211
216
|
if (lastRoutePath)
|
|
212
217
|
updateLastRoutePath(lastRoutePath);
|
|
213
218
|
}
|
|
214
219
|
else
|
|
215
|
-
updateSession(
|
|
220
|
+
updateSession((0, lodash_merge_1.default)(initialSession, session));
|
|
216
221
|
if (devSettings)
|
|
217
222
|
updateDevSettings(devSettings);
|
|
218
223
|
else if (initialDevSettings)
|
|
@@ -220,11 +225,11 @@ export const Webchat = forwardRef((props, ref) => {
|
|
|
220
225
|
if (lastMessageUpdate)
|
|
221
226
|
updateLastMessageDate(lastMessageUpdate);
|
|
222
227
|
if (themeUpdates !== undefined)
|
|
223
|
-
updateTheme(
|
|
228
|
+
updateTheme((0, lodash_merge_1.default)(props.theme, themeUpdates), themeUpdates);
|
|
224
229
|
if (props.onInit)
|
|
225
230
|
setTimeout(() => props.onInit(), 100);
|
|
226
231
|
}, []);
|
|
227
|
-
useEffect(() => {
|
|
232
|
+
(0, react_1.useEffect)(() => {
|
|
228
233
|
if (!webchatState.isWebchatOpen) {
|
|
229
234
|
if (webchatState.isLastMessageVisible) {
|
|
230
235
|
resetUnreadMessages();
|
|
@@ -233,7 +238,7 @@ export const Webchat = forwardRef((props, ref) => {
|
|
|
233
238
|
}
|
|
234
239
|
deviceAdapter.init(host);
|
|
235
240
|
}, [webchatState.isWebchatOpen]);
|
|
236
|
-
useEffect(() => {
|
|
241
|
+
(0, react_1.useEffect)(() => {
|
|
237
242
|
if (onStateChange && typeof onStateChange === 'function') {
|
|
238
243
|
onStateChange(webchatState);
|
|
239
244
|
}
|
|
@@ -245,10 +250,10 @@ export const Webchat = forwardRef((props, ref) => {
|
|
|
245
250
|
webchatState.devSettings,
|
|
246
251
|
webchatState.lastMessageUpdate,
|
|
247
252
|
]);
|
|
248
|
-
useAsyncEffect(async () => {
|
|
253
|
+
(0, use_async_effect_1.useAsyncEffect)(async () => {
|
|
249
254
|
if (!webchatState.online) {
|
|
250
255
|
setError({
|
|
251
|
-
message: getServerErrorMessage(props.server),
|
|
256
|
+
message: (0, webchat_1.getServerErrorMessage)(props.server),
|
|
252
257
|
});
|
|
253
258
|
}
|
|
254
259
|
else {
|
|
@@ -257,9 +262,9 @@ export const Webchat = forwardRef((props, ref) => {
|
|
|
257
262
|
}
|
|
258
263
|
}
|
|
259
264
|
}, [webchatState.online]);
|
|
260
|
-
useTyping({ webchatState, updateTyping, updateMessage, host });
|
|
261
|
-
useEffect(() => {
|
|
262
|
-
updateTheme(
|
|
265
|
+
(0, hooks_1.useTyping)({ webchatState, updateTyping, updateMessage, host });
|
|
266
|
+
(0, react_1.useEffect)(() => {
|
|
267
|
+
updateTheme((0, lodash_merge_1.default)(props.theme, theme, webchatState.themeUpdates));
|
|
263
268
|
}, [props.theme, webchatState.themeUpdates]);
|
|
264
269
|
const openWebview = (webviewComponent, params) => updateWebview(webviewComponent, params);
|
|
265
270
|
const handleSelectedEmoji = event => {
|
|
@@ -277,7 +282,7 @@ export const Webchat = forwardRef((props, ref) => {
|
|
|
277
282
|
else if (options && options.path) {
|
|
278
283
|
let params = '';
|
|
279
284
|
if (options.params)
|
|
280
|
-
params = params2queryString(options.params);
|
|
285
|
+
params = (0, core_1.params2queryString)(options.params);
|
|
281
286
|
sendPayload(`__PATH_PAYLOAD__${options.path}?${params}`);
|
|
282
287
|
}
|
|
283
288
|
};
|
|
@@ -287,30 +292,30 @@ export const Webchat = forwardRef((props, ref) => {
|
|
|
287
292
|
const handleEmojiClick = () => {
|
|
288
293
|
toggleEmojiPicker(!webchatState.isEmojiPickerOpen);
|
|
289
294
|
};
|
|
290
|
-
const persistentMenuOptions = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.persistentMenu, props.persistentMenu);
|
|
291
|
-
const darkBackgroundMenu = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.darkBackgroundMenu, false);
|
|
295
|
+
const persistentMenuOptions = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.persistentMenu, props.persistentMenu);
|
|
296
|
+
const darkBackgroundMenu = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.darkBackgroundMenu, false);
|
|
292
297
|
const getBlockInputs = (rule, inputData) => {
|
|
293
298
|
const processedInput = rule.preprocess
|
|
294
299
|
? rule.preprocess(inputData)
|
|
295
300
|
: inputData;
|
|
296
301
|
return rule.match.some(regex => {
|
|
297
302
|
if (typeof regex === 'string')
|
|
298
|
-
regex = deserializeRegex(regex);
|
|
303
|
+
regex = (0, regexs_1.deserializeRegex)(regex);
|
|
299
304
|
return regex.test(processedInput);
|
|
300
305
|
});
|
|
301
306
|
};
|
|
302
307
|
const checkBlockInput = input => {
|
|
303
308
|
// if is a text we check if it is a serialized RE
|
|
304
|
-
const blockInputs = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.blockInputs, props.blockInputs);
|
|
309
|
+
const blockInputs = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.blockInputs, props.blockInputs);
|
|
305
310
|
if (!Array.isArray(blockInputs))
|
|
306
311
|
return false;
|
|
307
312
|
for (const rule of blockInputs) {
|
|
308
313
|
if (getBlockInputs(rule, input.data)) {
|
|
309
|
-
addMessageComponent(
|
|
310
|
-
backgroundColor: COLORS.SCORPION_GRAY,
|
|
311
|
-
borderColor: COLORS.SCORPION_GRAY,
|
|
314
|
+
addMessageComponent((0, jsx_runtime_1.jsx)(components_1.Text, { id: input.id, sentBy: index_types_1.SENDERS.user, blob: false, style: {
|
|
315
|
+
backgroundColor: constants_1.COLORS.SCORPION_GRAY,
|
|
316
|
+
borderColor: constants_1.COLORS.SCORPION_GRAY,
|
|
312
317
|
padding: '8px 12px',
|
|
313
|
-
}
|
|
318
|
+
}, children: rule.message }));
|
|
314
319
|
updateReplies(false);
|
|
315
320
|
return true;
|
|
316
321
|
}
|
|
@@ -321,17 +326,17 @@ export const Webchat = forwardRef((props, ref) => {
|
|
|
321
326
|
togglePersistentMenu(false);
|
|
322
327
|
};
|
|
323
328
|
const persistentMenu = () => {
|
|
324
|
-
return (
|
|
329
|
+
return ((0, jsx_runtime_1.jsx)(persistent_menu_1.OpenedPersistentMenu, { onClick: closeMenu, options: persistentMenuOptions, borderRadius: webchatState.theme.style.borderRadius || '10px' }));
|
|
325
330
|
};
|
|
326
331
|
const getCoverComponent = () => {
|
|
327
|
-
return getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.coverComponent, props.coverComponent &&
|
|
332
|
+
return getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.coverComponent, props.coverComponent &&
|
|
328
333
|
(props.coverComponent.component || props.coverComponent));
|
|
329
334
|
};
|
|
330
335
|
const CoverComponent = getCoverComponent();
|
|
331
336
|
const closeCoverComponent = () => {
|
|
332
337
|
toggleCoverComponent(false);
|
|
333
338
|
};
|
|
334
|
-
useEffect(() => {
|
|
339
|
+
(0, react_1.useEffect)(() => {
|
|
335
340
|
if (!CoverComponent)
|
|
336
341
|
return;
|
|
337
342
|
if (!botonicState ||
|
|
@@ -339,50 +344,50 @@ export const Webchat = forwardRef((props, ref) => {
|
|
|
339
344
|
toggleCoverComponent(true);
|
|
340
345
|
}, []);
|
|
341
346
|
const coverComponent = () => {
|
|
342
|
-
const coverComponentProps = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.coverComponentProps, props.coverComponent && props.coverComponent.props);
|
|
347
|
+
const coverComponentProps = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.coverComponentProps, props.coverComponent && props.coverComponent.props);
|
|
343
348
|
if (CoverComponent && webchatState.isCoverComponentOpen)
|
|
344
|
-
return (
|
|
349
|
+
return ((0, jsx_runtime_1.jsx)(CoverComponent, { closeComponent: closeCoverComponent, ...coverComponentProps }));
|
|
345
350
|
return null;
|
|
346
351
|
};
|
|
347
352
|
const messageComponentFromInput = input => {
|
|
348
353
|
let messageComponent = null;
|
|
349
|
-
if (isText(input)) {
|
|
350
|
-
messageComponent = (
|
|
354
|
+
if ((0, message_utils_1.isText)(input)) {
|
|
355
|
+
messageComponent = ((0, jsx_runtime_1.jsx)(components_1.Text, { id: input.id, payload: input.payload, sentBy: index_types_1.SENDERS.user, children: input.data }));
|
|
351
356
|
}
|
|
352
|
-
else if (isMedia(input)) {
|
|
357
|
+
else if ((0, message_utils_1.isMedia)(input)) {
|
|
353
358
|
const temporaryDisplayUrl = URL.createObjectURL(input.data);
|
|
354
359
|
const mediaProps = {
|
|
355
360
|
id: input.id,
|
|
356
|
-
sentBy: SENDERS.user,
|
|
361
|
+
sentBy: index_types_1.SENDERS.user,
|
|
357
362
|
src: temporaryDisplayUrl,
|
|
358
363
|
};
|
|
359
|
-
if (isImage(input)) {
|
|
364
|
+
if ((0, message_utils_1.isImage)(input)) {
|
|
360
365
|
mediaProps.input = input;
|
|
361
|
-
messageComponent =
|
|
366
|
+
messageComponent = (0, jsx_runtime_1.jsx)(components_1.Image, { ...mediaProps });
|
|
362
367
|
}
|
|
363
|
-
else if (isAudio(input))
|
|
364
|
-
messageComponent =
|
|
365
|
-
else if (isVideo(input))
|
|
366
|
-
messageComponent =
|
|
367
|
-
else if (isDocument(input))
|
|
368
|
-
messageComponent =
|
|
368
|
+
else if ((0, message_utils_1.isAudio)(input))
|
|
369
|
+
messageComponent = (0, jsx_runtime_1.jsx)(components_1.Audio, { ...mediaProps });
|
|
370
|
+
else if ((0, message_utils_1.isVideo)(input))
|
|
371
|
+
messageComponent = (0, jsx_runtime_1.jsx)(components_1.Video, { ...mediaProps });
|
|
372
|
+
else if ((0, message_utils_1.isDocument)(input))
|
|
373
|
+
messageComponent = (0, jsx_runtime_1.jsx)(components_1.Document, { ...mediaProps });
|
|
369
374
|
}
|
|
370
375
|
return messageComponent;
|
|
371
376
|
};
|
|
372
377
|
const sendInput = async (input) => {
|
|
373
378
|
if (!input || Object.keys(input).length == 0)
|
|
374
379
|
return;
|
|
375
|
-
if (isText(input) && (!input.data || !input.data.trim()))
|
|
380
|
+
if ((0, message_utils_1.isText)(input) && (!input.data || !input.data.trim()))
|
|
376
381
|
return; // in case trim() doesn't work in a browser we can use !/\S/.test(input.data)
|
|
377
|
-
if (isText(input) && checkBlockInput(input))
|
|
382
|
+
if ((0, message_utils_1.isText)(input) && checkBlockInput(input))
|
|
378
383
|
return;
|
|
379
384
|
if (!input.id)
|
|
380
|
-
input.id =
|
|
385
|
+
input.id = (0, uuid_1.v4)();
|
|
381
386
|
const messageComponent = messageComponentFromInput(input);
|
|
382
387
|
if (messageComponent)
|
|
383
388
|
addMessageComponent(messageComponent);
|
|
384
|
-
if (isMedia(input))
|
|
385
|
-
input.data = await readDataURL(input.data);
|
|
389
|
+
if ((0, message_utils_1.isMedia)(input))
|
|
390
|
+
input.data = await (0, message_utils_1.readDataURL)(input.data);
|
|
386
391
|
sendUserInput(input);
|
|
387
392
|
updateLatestInput(input);
|
|
388
393
|
isOnline() && updateLastMessageDate(currentDateString());
|
|
@@ -393,25 +398,28 @@ export const Webchat = forwardRef((props, ref) => {
|
|
|
393
398
|
/* This is the public API this component exposes to its parents
|
|
394
399
|
https://stackoverflow.com/questions/37949981/call-child-method-from-parent
|
|
395
400
|
*/
|
|
396
|
-
const updateSessionWithUser = userToUpdate => updateSession(
|
|
397
|
-
useImperativeHandle(ref, () => ({
|
|
401
|
+
const updateSessionWithUser = userToUpdate => updateSession((0, lodash_merge_1.default)(webchatState.session, { user: userToUpdate }));
|
|
402
|
+
(0, react_1.useImperativeHandle)(ref, () => ({
|
|
398
403
|
addBotResponse: ({ response, session, lastRoutePath }) => {
|
|
399
404
|
updateTyping(false);
|
|
400
405
|
const isUnread = !webchatState.isLastMessageVisible || webchatState.numUnreadMessages > 0;
|
|
401
406
|
if (Array.isArray(response)) {
|
|
402
407
|
response.forEach(r => {
|
|
403
|
-
addMessageComponent(
|
|
408
|
+
addMessageComponent({ ...r, props: { ...r.props, isUnread } });
|
|
404
409
|
});
|
|
405
410
|
}
|
|
406
411
|
else if (response) {
|
|
407
|
-
addMessageComponent(
|
|
412
|
+
addMessageComponent({
|
|
413
|
+
...response,
|
|
414
|
+
props: { ...response.props, isUnread },
|
|
415
|
+
});
|
|
408
416
|
}
|
|
409
417
|
if (session) {
|
|
410
|
-
updateSession(
|
|
418
|
+
updateSession((0, lodash_merge_1.default)(session, { user: webchatState.session.user }));
|
|
411
419
|
const action = session._botonic_action || '';
|
|
412
420
|
const handoff = action.startsWith('create_case');
|
|
413
|
-
if (handoff && isDev)
|
|
414
|
-
addMessageComponent(
|
|
421
|
+
if (handoff && environment_1.isDev)
|
|
422
|
+
addMessageComponent((0, jsx_runtime_1.jsx)(handoff_1.Handoff, {}));
|
|
415
423
|
updateHandoff(handoff);
|
|
416
424
|
}
|
|
417
425
|
if (lastRoutePath)
|
|
@@ -444,7 +452,7 @@ export const Webchat = forwardRef((props, ref) => {
|
|
|
444
452
|
getLastMessageUpdate: () => webchatState.lastMessageUpdate,
|
|
445
453
|
updateMessageInfo: (msgId, messageInfo) => {
|
|
446
454
|
const messageToUpdate = webchatState.messagesJSON.filter(m => m.id == msgId)[0];
|
|
447
|
-
const updatedMsg =
|
|
455
|
+
const updatedMsg = (0, lodash_merge_1.default)(messageToUpdate, messageInfo);
|
|
448
456
|
if (updatedMsg.ack === 1)
|
|
449
457
|
delete updatedMsg.unsentInput;
|
|
450
458
|
updateMessage(updatedMsg);
|
|
@@ -453,22 +461,22 @@ export const Webchat = forwardRef((props, ref) => {
|
|
|
453
461
|
if (settings.user) {
|
|
454
462
|
updateSessionWithUser(settings.user);
|
|
455
463
|
}
|
|
456
|
-
const themeUpdates = normalizeWebchatSettings(settings);
|
|
457
|
-
updateTheme(
|
|
464
|
+
const themeUpdates = (0, webchat_settings_1.normalizeWebchatSettings)(settings);
|
|
465
|
+
updateTheme((0, lodash_merge_1.default)(webchatState.theme, themeUpdates), themeUpdates);
|
|
458
466
|
updateTyping(false);
|
|
459
467
|
},
|
|
460
468
|
}));
|
|
461
469
|
const resolveCase = () => {
|
|
462
470
|
updateHandoff(false);
|
|
463
|
-
updateSession(
|
|
471
|
+
updateSession({ ...webchatState.session, _botonic_action: null });
|
|
464
472
|
};
|
|
465
|
-
const prevSession = usePrevious(webchatState.session);
|
|
466
|
-
useEffect(() => {
|
|
473
|
+
const prevSession = (0, hooks_1.usePrevious)(webchatState.session);
|
|
474
|
+
(0, react_1.useEffect)(() => {
|
|
467
475
|
// Resume conversation after handoff
|
|
468
476
|
if (prevSession &&
|
|
469
477
|
prevSession._botonic_action &&
|
|
470
478
|
!webchatState.session._botonic_action) {
|
|
471
|
-
const action = getParsedAction(prevSession._botonic_action);
|
|
479
|
+
const action = (0, exports.getParsedAction)(prevSession._botonic_action);
|
|
472
480
|
if (action && action.on_finish)
|
|
473
481
|
sendPayload(action.on_finish);
|
|
474
482
|
}
|
|
@@ -476,18 +484,18 @@ export const Webchat = forwardRef((props, ref) => {
|
|
|
476
484
|
const sendText = async (text, payload) => {
|
|
477
485
|
if (!text)
|
|
478
486
|
return;
|
|
479
|
-
const input = { type: INPUT.TEXT, data: text, payload };
|
|
487
|
+
const input = { type: core_1.INPUT.TEXT, data: text, payload };
|
|
480
488
|
await sendInput(input);
|
|
481
489
|
};
|
|
482
490
|
const sendPayload = async (payload) => {
|
|
483
491
|
if (!payload)
|
|
484
492
|
return;
|
|
485
|
-
const input = { type: INPUT.POSTBACK, payload };
|
|
493
|
+
const input = { type: core_1.INPUT.POSTBACK, payload };
|
|
486
494
|
await sendInput(input);
|
|
487
495
|
};
|
|
488
496
|
const sendAttachment = async (attachment) => {
|
|
489
497
|
if (attachment.file) {
|
|
490
|
-
const attachmentType = getMediaType(attachment.file.type);
|
|
498
|
+
const attachmentType = (0, message_utils_1.getMediaType)(attachment.file.type);
|
|
491
499
|
if (!attachmentType)
|
|
492
500
|
return;
|
|
493
501
|
const input = {
|
|
@@ -546,7 +554,7 @@ export const Webchat = forwardRef((props, ref) => {
|
|
|
546
554
|
defaultDelay: props.defaultDelay || 0,
|
|
547
555
|
defaultTyping: props.defaultTyping || 0,
|
|
548
556
|
};
|
|
549
|
-
useEffect(() => {
|
|
557
|
+
(0, react_1.useEffect)(() => {
|
|
550
558
|
if (firstUpdate.current) {
|
|
551
559
|
firstUpdate.current = false;
|
|
552
560
|
return;
|
|
@@ -560,22 +568,40 @@ export const Webchat = forwardRef((props, ref) => {
|
|
|
560
568
|
}
|
|
561
569
|
}, [webchatState.isWebchatOpen]);
|
|
562
570
|
const isUserInputEnabled = () => {
|
|
563
|
-
const isUserInputEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableUserInput, props.enableUserInput !== undefined ? props.enableUserInput : true);
|
|
571
|
+
const isUserInputEnabled = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.enableUserInput, props.enableUserInput !== undefined ? props.enableUserInput : true);
|
|
564
572
|
return isUserInputEnabled && !webchatState.isCoverComponentOpen;
|
|
565
573
|
};
|
|
566
574
|
const userInputEnabled = isUserInputEnabled();
|
|
567
|
-
const textArea = useRef(null);
|
|
575
|
+
const textArea = (0, react_1.useRef)(null);
|
|
568
576
|
const userInputArea = () => {
|
|
569
|
-
return (userInputEnabled && (
|
|
577
|
+
return (userInputEnabled && ((0, jsx_runtime_1.jsxs)(UserInputContainer, { style: {
|
|
578
|
+
...getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.userInputStyle),
|
|
579
|
+
}, className: 'user-input-container', children: [webchatState.isEmojiPickerOpen && ((0, jsx_runtime_1.jsx)(emoji_picker_1.OpenedEmojiPicker, { height: webchatState.theme.style.height, onEmojiClick: handleSelectedEmoji, onClick: handleEmojiClick })), (0, jsx_runtime_1.jsx)(persistent_menu_1.PersistentMenu, { onClick: handleMenu, persistentMenu: props.persistentMenu }), (0, jsx_runtime_1.jsx)(TextAreaContainer, { children: (0, jsx_runtime_1.jsx)(react_textarea_autosize_1.default, { inputRef: textArea, name: 'text', onFocus: () => {
|
|
570
580
|
deviceAdapter.onFocus(host);
|
|
571
581
|
}, onBlur: () => {
|
|
572
582
|
deviceAdapter.onBlur();
|
|
573
|
-
}, maxRows: 4, wrap: 'soft', maxLength: '1000', placeholder: getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.textPlaceholder, WEBCHAT.DEFAULTS.PLACEHOLDER), autoFocus: false, onKeyDown: e => onKeyDown(e), onKeyUp: onKeyUp, style:
|
|
583
|
+
}, 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: {
|
|
584
|
+
display: 'flex',
|
|
585
|
+
fontSize: deviceAdapter.fontSize(14),
|
|
586
|
+
width: '100%',
|
|
587
|
+
border: 'none',
|
|
588
|
+
resize: 'none',
|
|
589
|
+
overflow: 'auto',
|
|
590
|
+
outline: 'none',
|
|
591
|
+
flex: '1 1 auto',
|
|
592
|
+
padding: 10,
|
|
593
|
+
paddingLeft: persistentMenuOptions ? 0 : 10,
|
|
594
|
+
fontFamily: 'inherit',
|
|
595
|
+
...getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.userInputBoxStyle),
|
|
596
|
+
} }) }), (0, jsx_runtime_1.jsx)(emoji_picker_1.EmojiPicker, { enableEmojiPicker: props.enableEmojiPicker, onClick: handleEmojiClick }), (0, jsx_runtime_1.jsx)(attachment_1.Attachment, { enableAttachments: props.enableAttachments, onChange: handleAttachment, accept: (0, message_utils_1.getFullMimeWhitelist)().join(',') }), (0, jsx_runtime_1.jsx)(send_button_1.SendButton, { onClick: sendTextAreaText })] })));
|
|
574
597
|
};
|
|
575
|
-
const webchatWebview = () => (
|
|
598
|
+
const webchatWebview = () => ((0, jsx_runtime_1.jsx)(contexts_1.RequestContext.Provider, { value: webviewRequestContext, children: (0, jsx_runtime_1.jsx)(webview_1.WebviewContainer, { style: {
|
|
599
|
+
...getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.webviewStyle),
|
|
600
|
+
...mobileStyle,
|
|
601
|
+
}, webview: webchatState.webview }) }));
|
|
576
602
|
let mobileStyle = {};
|
|
577
|
-
if (isMobile(getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.mobileBreakpoint))) {
|
|
578
|
-
mobileStyle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.mobileStyle) || {
|
|
603
|
+
if ((0, core_1.isMobile)(getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.mobileBreakpoint))) {
|
|
604
|
+
mobileStyle = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.mobileStyle) || {
|
|
579
605
|
width: '100%',
|
|
580
606
|
height: '100%',
|
|
581
607
|
right: 0,
|
|
@@ -583,30 +609,30 @@ export const Webchat = forwardRef((props, ref) => {
|
|
|
583
609
|
borderRadius: 0,
|
|
584
610
|
};
|
|
585
611
|
}
|
|
586
|
-
useEffect(() => {
|
|
612
|
+
(0, react_1.useEffect)(() => {
|
|
587
613
|
// Prod mode
|
|
588
614
|
saveWebchatState(webchatState);
|
|
589
615
|
}, [webchatState.themeUpdates]);
|
|
590
616
|
// Only needed for dev/serve mode
|
|
591
617
|
const updateWebchatDevSettings = settings => {
|
|
592
618
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
593
|
-
useEffect(() => {
|
|
594
|
-
const themeUpdates = normalizeWebchatSettings(settings);
|
|
595
|
-
updateTheme(
|
|
619
|
+
(0, react_1.useEffect)(() => {
|
|
620
|
+
const themeUpdates = (0, webchat_settings_1.normalizeWebchatSettings)(settings);
|
|
621
|
+
updateTheme((0, lodash_merge_1.default)(webchatState.theme, themeUpdates), themeUpdates);
|
|
596
622
|
}, [webchatState.messagesJSON]);
|
|
597
623
|
};
|
|
598
624
|
const DarkenBackground = ({ component }) => {
|
|
599
|
-
return (
|
|
625
|
+
return ((0, jsx_runtime_1.jsxs)("div", { children: [darkBackgroundMenu && ((0, jsx_runtime_1.jsx)(DarkBackgroundMenu, { style: {
|
|
600
626
|
borderRadius: webchatState.theme.style.borderRadius,
|
|
601
627
|
} })), component] }));
|
|
602
628
|
};
|
|
603
629
|
const _renderCustomComponent = () => {
|
|
604
630
|
if (!customComponent)
|
|
605
|
-
return
|
|
631
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
606
632
|
else
|
|
607
633
|
return customComponent;
|
|
608
634
|
};
|
|
609
|
-
const WebchatComponent = (
|
|
635
|
+
const WebchatComponent = ((0, jsx_runtime_1.jsxs)(contexts_1.WebchatContext.Provider, { value: {
|
|
610
636
|
addMessage,
|
|
611
637
|
getThemeProperty,
|
|
612
638
|
openWebview,
|
|
@@ -624,16 +650,19 @@ export const Webchat = forwardRef((props, ref) => {
|
|
|
624
650
|
updateUser: updateSessionWithUser,
|
|
625
651
|
updateWebchatDevSettings: updateWebchatDevSettings,
|
|
626
652
|
webchatState,
|
|
627
|
-
}
|
|
653
|
+
}, children: [!webchatState.isWebchatOpen && (0, jsx_runtime_1.jsx)(trigger_button_1.TriggerButton, {}), webchatState.isWebchatOpen && ((0, jsx_runtime_1.jsxs)(StyledWebchat
|
|
628
654
|
// TODO: Distinguis between multiple instances of webchat, e.g. `${uniqueId}-botonic-webchat`
|
|
629
|
-
,
|
|
655
|
+
, {
|
|
630
656
|
// TODO: Distinguis between multiple instances of webchat, e.g. `${uniqueId}-botonic-webchat`
|
|
631
|
-
role: ROLES.WEBCHAT, id: WEBCHAT.DEFAULTS.ID, width: webchatState.width, height: webchatState.height, style:
|
|
657
|
+
role: constants_1.ROLES.WEBCHAT, id: constants_1.WEBCHAT.DEFAULTS.ID, width: webchatState.width, height: webchatState.height, style: {
|
|
658
|
+
...webchatState.theme.style,
|
|
659
|
+
...mobileStyle,
|
|
660
|
+
}, children: [(0, jsx_runtime_1.jsx)(header_1.StyledWebchatHeader, { onCloseClick: () => {
|
|
632
661
|
toggleWebchat(false);
|
|
633
|
-
} }), webchatState.error.message && (
|
|
634
|
-
Object.keys(webchatState.replies).length > 0 && (
|
|
662
|
+
} }), webchatState.error.message && ((0, jsx_runtime_1.jsx)(ErrorMessageContainer, { children: (0, jsx_runtime_1.jsx)(ErrorMessage, { children: webchatState.error.message }) })), (0, jsx_runtime_1.jsx)(message_list_1.WebchatMessageList, { style: { flex: 1 }, host: host }), webchatState.replies &&
|
|
663
|
+
Object.keys(webchatState.replies).length > 0 && ((0, jsx_runtime_1.jsx)(replies_1.WebchatReplies, { replies: webchatState.replies })), webchatState.isPersistentMenuOpen && ((0, jsx_runtime_1.jsx)(DarkenBackground, { component: persistentMenu() })), !webchatState.handoff && userInputArea(), webchatState.webview && webchatWebview(), webchatState.isCoverComponentOpen && coverComponent(), webchatState.isCustomComponentRendered &&
|
|
635
664
|
customComponent &&
|
|
636
|
-
_renderCustomComponent()] }))
|
|
637
|
-
return props.shadowDOM ? (
|
|
665
|
+
_renderCustomComponent()] }))] }));
|
|
666
|
+
return props.shadowDOM ? ((0, jsx_runtime_1.jsx)(styled_components_1.StyleSheetManager, { target: host, children: WebchatComponent })) : (WebchatComponent);
|
|
638
667
|
});
|
|
639
668
|
//# sourceMappingURL=webchat.js.map
|