@botpress/webchat 0.5.1 → 1.0.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.
Files changed (191) hide show
  1. package/dist/App.d.ts +10 -0
  2. package/dist/Utils/colors.d.ts +18 -0
  3. package/dist/Utils/eventEmitter.d.ts +12 -0
  4. package/dist/Utils/index.d.ts +2 -0
  5. package/dist/client/MessagingClient.d.ts +27 -0
  6. package/dist/client/adapters/Audio.d.ts +19 -0
  7. package/dist/client/adapters/Card.d.ts +188 -0
  8. package/dist/client/adapters/Carousel.d.ts +147 -0
  9. package/dist/client/adapters/Choice.d.ts +45 -0
  10. package/dist/client/adapters/Dropdown.d.ts +46 -0
  11. package/dist/client/adapters/File.d.ts +19 -0
  12. package/dist/client/adapters/Image.d.ts +19 -0
  13. package/dist/client/adapters/Location.d.ts +27 -0
  14. package/dist/client/adapters/Message.d.ts +433 -0
  15. package/dist/client/adapters/Text.d.ts +20 -0
  16. package/dist/client/adapters/Utils.d.ts +5 -0
  17. package/dist/client/adapters/Video.d.ts +19 -0
  18. package/dist/client/adapters/Voice.d.ts +15 -0
  19. package/dist/client/adapters/index.d.ts +12 -0
  20. package/dist/client/index.d.ts +2 -0
  21. package/dist/components/Avatar.d.ts +6 -0
  22. package/dist/components/Block.d.ts +4 -0
  23. package/dist/components/Composer.d.ts +12 -14
  24. package/dist/components/Container.d.ts +2 -12
  25. package/dist/components/Header.d.ts +36 -26
  26. package/dist/components/LoadingIndicator.d.ts +2 -0
  27. package/dist/components/Message.d.ts +7 -0
  28. package/dist/components/MessageList.d.ts +2 -0
  29. package/dist/components/Modal.d.ts +17 -0
  30. package/dist/components/RestartConversation.d.ts +5 -0
  31. package/dist/components/Webchat.d.ts +6 -0
  32. package/dist/components/dev-tools/DevTools.d.ts +1 -0
  33. package/dist/components/dev-tools/configuration.d.ts +2 -0
  34. package/dist/components/dev-tools/helpers.d.ts +5 -0
  35. package/dist/components/index.d.ts +12 -0
  36. package/dist/components/renderers/Audio.d.ts +3 -0
  37. package/dist/components/renderers/Bubble.d.ts +5 -0
  38. package/dist/components/renderers/Button.d.ts +4 -0
  39. package/dist/components/renderers/Carousel.d.ts +3 -0
  40. package/dist/components/renderers/Column.d.ts +5 -0
  41. package/dist/components/renderers/Dropdown.d.ts +5 -0
  42. package/dist/components/renderers/File.d.ts +3 -0
  43. package/dist/components/renderers/Image.d.ts +3 -0
  44. package/dist/components/renderers/Location.d.ts +3 -0
  45. package/dist/components/renderers/Row.d.ts +5 -0
  46. package/dist/components/renderers/Text.d.ts +4 -0
  47. package/dist/components/renderers/Video.d.ts +3 -0
  48. package/dist/components/renderers/index.d.ts +2 -0
  49. package/dist/contexts/ComposerContext.d.ts +8 -0
  50. package/dist/contexts/MessageContext.d.ts +8 -0
  51. package/dist/contexts/ModalContext.d.ts +14 -0
  52. package/dist/contexts/WebchatContext.d.ts +56 -0
  53. package/dist/contexts/index.d.ts +4 -0
  54. package/dist/hooks/index.d.ts +3 -0
  55. package/dist/hooks/useImageSize.d.ts +2 -0
  56. package/dist/hooks/useRefresh.d.ts +10 -0
  57. package/dist/hooks/useWebchatStore.d.ts +30 -0
  58. package/dist/index.d.ts +3 -17
  59. package/dist/index.js +43569 -48
  60. package/dist/index.umd.cjs +702 -0
  61. package/dist/main.d.ts +11 -13
  62. package/dist/providers/ModalProvider.d.ts +8 -0
  63. package/dist/providers/WebchatProvider.d.ts +13 -0
  64. package/dist/providers/index.d.ts +2 -0
  65. package/dist/schemas/index.d.ts +1 -0
  66. package/dist/schemas/theme.d.ts +3371 -0
  67. package/dist/services/clipboard.d.ts +1 -0
  68. package/dist/services/images.d.ts +2 -0
  69. package/dist/services/index.d.ts +3 -0
  70. package/dist/services/toast.d.ts +17 -0
  71. package/dist/themes/dawn.d.ts +2 -0
  72. package/dist/themes/duskTheme.d.ts +2 -0
  73. package/dist/themes/eggplant.d.ts +2 -0
  74. package/dist/themes/galaxy.d.ts +2 -0
  75. package/dist/themes/index.d.ts +6 -0
  76. package/dist/themes/midnight.d.ts +2 -0
  77. package/dist/themes/prism.d.ts +2 -0
  78. package/dist/twind.config.d.ts +9 -0
  79. package/dist/types/block-type.d.ts +93 -0
  80. package/dist/types/image.d.ts +11 -0
  81. package/dist/types/index.d.ts +2 -0
  82. package/package.json +61 -49
  83. package/README.md +0 -41
  84. package/assets/fonts/roboto/roboto.woff2 +0 -0
  85. package/assets/fonts/roboto/roboto500.woff2 +0 -0
  86. package/assets/fonts/roboto.css +0 -128
  87. package/assets/notification.mp3 +0 -0
  88. package/dist/components/Composer.js +0 -118
  89. package/dist/components/Container.js +0 -62
  90. package/dist/components/ConversationList.d.ts +0 -10
  91. package/dist/components/ConversationList.js +0 -41
  92. package/dist/components/Footer.d.ts +0 -3
  93. package/dist/components/Footer.js +0 -21
  94. package/dist/components/Header.js +0 -181
  95. package/dist/components/VoiceRecorder.d.ts +0 -10
  96. package/dist/components/VoiceRecorder.js +0 -137
  97. package/dist/components/common/Avatar/index.d.ts +0 -9
  98. package/dist/components/common/Avatar/index.js +0 -13
  99. package/dist/components/common/BotInfo/index.d.ts +0 -10
  100. package/dist/components/common/BotInfo/index.js +0 -107
  101. package/dist/components/common/BotInfo/style.scss +0 -88
  102. package/dist/components/common/ConfirmDialog/index.d.ts +0 -11
  103. package/dist/components/common/ConfirmDialog/index.js +0 -78
  104. package/dist/components/common/ConfirmDialog/style.module.scss +0 -48
  105. package/dist/components/common/Dialog/index.d.ts +0 -17
  106. package/dist/components/common/Dialog/index.js +0 -57
  107. package/dist/components/common/Dialog/style.module.scss +0 -29
  108. package/dist/components/common/ToolTip/index.d.ts +0 -10
  109. package/dist/components/common/ToolTip/index.js +0 -163
  110. package/dist/components/common/ToolTip/style.module.scss +0 -108
  111. package/dist/components/common/ToolTip/utils.d.ts +0 -15
  112. package/dist/components/common/ToolTip/utils.js +0 -78
  113. package/dist/components/common/variables.scss +0 -38
  114. package/dist/components/messages/InlineFeedback.d.ts +0 -11
  115. package/dist/components/messages/InlineFeedback.js +0 -56
  116. package/dist/components/messages/Message.d.ts +0 -11
  117. package/dist/components/messages/Message.js +0 -106
  118. package/dist/components/messages/MessageGroup.d.ts +0 -23
  119. package/dist/components/messages/MessageGroup.js +0 -63
  120. package/dist/components/messages/MessageList.d.ts +0 -10
  121. package/dist/components/messages/MessageList.js +0 -148
  122. package/dist/core/api.d.ts +0 -23
  123. package/dist/core/api.js +0 -117
  124. package/dist/core/constants.d.ts +0 -14
  125. package/dist/core/constants.js +0 -29
  126. package/dist/core/socket.d.ts +0 -14
  127. package/dist/core/socket.js +0 -57
  128. package/dist/declaration.d.ts +0 -2
  129. package/dist/declaration.js +0 -1
  130. package/dist/fonts/roboto.d.ts +0 -4
  131. package/dist/fonts/roboto.js +0 -9
  132. package/dist/globals.d.ts +0 -7
  133. package/dist/globals.js +0 -2
  134. package/dist/icons/Add.d.ts +0 -6
  135. package/dist/icons/Add.js +0 -10
  136. package/dist/icons/Cancel.d.ts +0 -5
  137. package/dist/icons/Cancel.js +0 -10
  138. package/dist/icons/Chat.d.ts +0 -6
  139. package/dist/icons/Chat.js +0 -9
  140. package/dist/icons/Close.d.ts +0 -3
  141. package/dist/icons/Close.js +0 -10
  142. package/dist/icons/Delete.d.ts +0 -3
  143. package/dist/icons/Delete.js +0 -11
  144. package/dist/icons/Download.d.ts +0 -3
  145. package/dist/icons/Download.js +0 -10
  146. package/dist/icons/Email.d.ts +0 -3
  147. package/dist/icons/Email.js +0 -8
  148. package/dist/icons/Information.d.ts +0 -3
  149. package/dist/icons/Information.js +0 -12
  150. package/dist/icons/List.d.ts +0 -3
  151. package/dist/icons/List.js +0 -15
  152. package/dist/icons/Microphone.d.ts +0 -5
  153. package/dist/icons/Microphone.js +0 -12
  154. package/dist/icons/Phone.d.ts +0 -3
  155. package/dist/icons/Phone.js +0 -8
  156. package/dist/icons/Reload.d.ts +0 -3
  157. package/dist/icons/Reload.js +0 -10
  158. package/dist/icons/ThumbsDown.d.ts +0 -3
  159. package/dist/icons/ThumbsDown.js +0 -11
  160. package/dist/icons/ThumbsUp.d.ts +0 -3
  161. package/dist/icons/ThumbsUp.js +0 -11
  162. package/dist/icons/Website.d.ts +0 -3
  163. package/dist/icons/Website.js +0 -8
  164. package/dist/main.js +0 -336
  165. package/dist/store/composer.d.ts +0 -17
  166. package/dist/store/composer.js +0 -98
  167. package/dist/store/index.d.ts +0 -89
  168. package/dist/store/index.js +0 -604
  169. package/dist/store/view.d.ts +0 -61
  170. package/dist/store/view.js +0 -365
  171. package/dist/translations/ar.json +0 -30
  172. package/dist/translations/de.json +0 -32
  173. package/dist/translations/en.json +0 -40
  174. package/dist/translations/es.json +0 -19
  175. package/dist/translations/fr.json +0 -40
  176. package/dist/translations/index.d.ts +0 -9
  177. package/dist/translations/index.js +0 -95
  178. package/dist/translations/it.json +0 -38
  179. package/dist/translations/pt.json +0 -19
  180. package/dist/translations/ru.json +0 -24
  181. package/dist/translations/uk.json +0 -24
  182. package/dist/typings.d.ts +0 -410
  183. package/dist/typings.js +0 -2
  184. package/dist/utils/analytics.d.ts +0 -5
  185. package/dist/utils/analytics.js +0 -37
  186. package/dist/utils/index.d.ts +0 -3
  187. package/dist/utils/index.js +0 -27
  188. package/dist/utils/storage.d.ts +0 -16
  189. package/dist/utils/storage.js +0 -129
  190. package/dist/utils/webchatEvents.d.ts +0 -2
  191. package/dist/utils/webchatEvents.js +0 -14
@@ -1,62 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const messaging_components_1 = require("@botpress/messaging-components");
7
- const classnames_1 = __importDefault(require("classnames"));
8
- const mobx_react_1 = require("mobx-react");
9
- const react_1 = __importDefault(require("react"));
10
- const react_intl_1 = require("react-intl");
11
- const BotInfo_1 = __importDefault(require("./common/BotInfo"));
12
- const Composer_1 = __importDefault(require("./Composer"));
13
- const ConversationList_1 = __importDefault(require("./ConversationList"));
14
- const Footer_1 = __importDefault(require("./Footer"));
15
- const Header_1 = __importDefault(require("./Header"));
16
- const MessageList_1 = __importDefault(require("./messages/MessageList"));
17
- class Container extends react_1.default.Component {
18
- renderBody() {
19
- if (!this.props.isInitialized) {
20
- return (react_1.default.createElement("div", { className: "bpw-msg-list-container bpw-msg-list-container-loading" },
21
- react_1.default.createElement("div", { className: "bpw-msg-list-loading" })));
22
- }
23
- if (this.props.isConversationsDisplayed) {
24
- return react_1.default.createElement(ConversationList_1.default, null);
25
- }
26
- else if (this.props.isBotInfoDisplayed) {
27
- return react_1.default.createElement(BotInfo_1.default, null);
28
- }
29
- else {
30
- return (react_1.default.createElement("div", { className: (0, classnames_1.default)('bpw-msg-list-container', {
31
- 'bpw-rtl': this.props.rtl
32
- }) },
33
- react_1.default.createElement(MessageList_1.default, null),
34
- react_1.default.createElement(messaging_components_1.Keyboard, null,
35
- react_1.default.createElement(Composer_1.default, null))));
36
- }
37
- }
38
- render() {
39
- const classNames = (0, classnames_1.default)('bpw-layout', 'bpw-chat-container', {
40
- 'bpw-layout-fullscreen': this.props.isFullscreen && 'fullscreen',
41
- [`bpw-anim-${this.props.sideTransition}`]: true
42
- });
43
- return (react_1.default.createElement(react_1.default.Fragment, null,
44
- react_1.default.createElement("div", { className: classNames, style: { width: this.props.dimensions.layout } },
45
- react_1.default.createElement(Header_1.default, null),
46
- this.renderBody(),
47
- this.props.isPoweredByDisplayed && react_1.default.createElement(Footer_1.default, null))));
48
- }
49
- }
50
- exports.default = (0, mobx_react_1.inject)(({ store }) => ({
51
- store,
52
- isConversationsDisplayed: store.view.isConversationsDisplayed,
53
- isBotInfoDisplayed: store.view.isBotInfoDisplayed,
54
- isFullscreen: store.view.isFullscreen,
55
- sideTransition: store.view.sideTransition,
56
- dimensions: store.view.dimensions,
57
- isInitialized: store.isInitialized,
58
- isPoweredByDisplayed: store.view.isPoweredByDisplayed,
59
- config: store.config,
60
- botName: store.botName,
61
- rtl: store.rtl
62
- }))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(Container)));
@@ -1,10 +0,0 @@
1
- import React from 'react';
2
- import { WrappedComponentProps } from 'react-intl';
3
- import { StoreDef } from '../store';
4
- declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omit<ConversationListProps, "intl"> & {
5
- forwardedRef?: React.Ref<any> | undefined;
6
- } & React.RefAttributes<any>> & {
7
- WrappedComponent: React.ComponentType<ConversationListProps>;
8
- } & import("mobx-react").IWrappedComponent<unknown>;
9
- export default _default;
10
- declare type ConversationListProps = WrappedComponentProps & Pick<StoreDef, 'conversations' | 'fetchConversation' | 'createConversation'>;
@@ -1,41 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const intl_utils_1 = require("@formatjs/intl-utils");
7
- const mobx_react_1 = require("mobx-react");
8
- const react_1 = __importDefault(require("react"));
9
- const react_intl_1 = require("react-intl");
10
- const Add_1 = __importDefault(require("../icons/Add"));
11
- const ConversationListItem = (0, react_intl_1.injectIntl)(({ conversation, onClick, intl }) => {
12
- var _a, _b, _c;
13
- const title = intl.formatMessage({ id: 'conversationList.title' }, { id: conversation.id });
14
- const { value, unit } = (0, intl_utils_1.selectUnit)(new Date(((_a = conversation.lastMessage) === null || _a === void 0 ? void 0 : _a.sentOn) || conversation.createdOn));
15
- const date = intl.formatRelativeTime(value, unit);
16
- const message = ((_c = (_b = conversation.lastMessage) === null || _b === void 0 ? void 0 : _b.payload) === null || _c === void 0 ? void 0 : _c.text) || '...';
17
- return (react_1.default.createElement("div", { className: 'bpw-convo-item', onClick: onClick },
18
- react_1.default.createElement("div", { className: 'bpw-align-right' },
19
- react_1.default.createElement("div", { className: 'bpw-title' },
20
- react_1.default.createElement("div", null, title),
21
- react_1.default.createElement("div", { className: 'bpw-date' },
22
- react_1.default.createElement("span", null, date))),
23
- react_1.default.createElement("div", { className: 'bpw-convo-preview' }, message))));
24
- });
25
- class ConversationList extends react_1.default.Component {
26
- componentDidMount() {
27
- this.main.focus();
28
- }
29
- render() {
30
- const { conversations, createConversation, fetchConversation } = this.props;
31
- return (react_1.default.createElement("div", { tabIndex: 0, ref: (el) => (this.main = el), className: 'bpw-convo-list' },
32
- conversations.map((conversation, idx) => (react_1.default.createElement(ConversationListItem, { key: conversation.id, conversation: conversation, onClick: fetchConversation.bind(this, conversation.id) }))),
33
- react_1.default.createElement("button", { id: "btn-convo-add", className: 'bpw-convo-add-btn', onClick: createConversation.bind(this, undefined) },
34
- react_1.default.createElement(Add_1.default, { width: 15, height: 15 }))));
35
- }
36
- }
37
- exports.default = (0, mobx_react_1.inject)(({ store }) => ({
38
- conversations: store.conversations,
39
- createConversation: store.createConversation,
40
- fetchConversation: store.fetchConversation
41
- }))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(ConversationList)));
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- declare const Footer: () => JSX.Element;
3
- export default Footer;
@@ -1,21 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const react_1 = __importDefault(require("react"));
7
- const react_intl_1 = require("react-intl");
8
- const Footer = () => {
9
- return (react_1.default.createElement("span", null,
10
- react_1.default.createElement("div", { className: 'bpw-powered' },
11
- react_1.default.createElement("span", null,
12
- react_1.default.createElement(react_intl_1.FormattedMessage, { id: "footer.poweredBy", defaultMessage: "We're {icon} by {link}", values: {
13
- icon: (react_1.default.createElement("i", null,
14
- react_1.default.createElement("svg", { width: "7", height: "13", viewBox: "0 0 7 13", xmlns: "http://www.w3.org/2000/svg" },
15
- react_1.default.createElement("g", { fill: "none", fillRule: "evenodd" },
16
- react_1.default.createElement("path", { d: "M4.127.496C4.51-.12 5.37.356 5.16 1.07L3.89 5.14H6.22c.483 0 .757.616.464 1.044l-4.338 6.34c-.407.595-1.244.082-1.01-.618L2.72 7.656H.778c-.47 0-.748-.59-.48-1.02L4.13.495z", fill: "#F6A623" }),
17
- react_1.default.createElement("path", { fill: "#FEF79E", d: "M4.606.867L.778 7.007h2.807l-1.7 5.126 4.337-6.34H3.16" }))))),
18
- link: (react_1.default.createElement("a", { href: 'https://botpress.com', target: "_blank" }, 'Botpress'))
19
- } })))));
20
- };
21
- exports.default = Footer;
@@ -1,181 +0,0 @@
1
- "use strict";
2
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
- return new (P || (P = Promise))(function (resolve, reject) {
5
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
- step((generator = generator.apply(thisArg, _arguments || [])).next());
9
- });
10
- };
11
- var __importDefault = (this && this.__importDefault) || function (mod) {
12
- return (mod && mod.__esModule) ? mod : { "default": mod };
13
- };
14
- Object.defineProperty(exports, "__esModule", { value: true });
15
- const mobx_1 = require("mobx");
16
- const mobx_react_1 = require("mobx-react");
17
- const react_1 = __importDefault(require("react"));
18
- const Close_1 = __importDefault(require("../icons/Close"));
19
- const Delete_1 = __importDefault(require("../icons/Delete"));
20
- const Download_1 = __importDefault(require("../icons/Download"));
21
- const Information_1 = __importDefault(require("../icons/Information"));
22
- const List_1 = __importDefault(require("../icons/List"));
23
- const Avatar_1 = __importDefault(require("./common/Avatar"));
24
- const ConfirmDialog_1 = __importDefault(require("./common/ConfirmDialog"));
25
- class Header extends react_1.default.Component {
26
- constructor() {
27
- super(...arguments);
28
- this.btnEls = {};
29
- this.state = {
30
- currentFocusIdx: undefined,
31
- showingOption: false
32
- };
33
- this.onBlur = () => {
34
- this.setCurrentFocusIdx(undefined);
35
- };
36
- this.setCurrentFocusIdx = (currentFocusIdx) => {
37
- this.setState({ currentFocusIdx });
38
- };
39
- this.changeButtonFocus = (step) => {
40
- let idx = this.state.currentFocusIdx !== null ? this.state.currentFocusIdx + step : 0;
41
- if (idx < 0) {
42
- this.onBlur();
43
- this.props.focusPrevious();
44
- }
45
- for (idx; idx < Object.keys(this.btnEls).length; idx++) {
46
- if (this.btnEls[idx]) {
47
- this.btnEls[idx].focus();
48
- this.setCurrentFocusIdx(idx);
49
- break;
50
- }
51
- }
52
- if (idx === Object.keys(this.btnEls).length) {
53
- this.onBlur();
54
- this.props.focusNext();
55
- }
56
- };
57
- this.renderTitle = () => {
58
- const title = this.props.isConversationsDisplayed
59
- ? this.props.intl.formatMessage({ id: 'header.conversations' })
60
- : this.props.botName;
61
- return (react_1.default.createElement("div", { className: 'bpw-header-title' },
62
- react_1.default.createElement("div", { className: 'bpw-header-name' },
63
- title,
64
- this.props.hasUnreadMessages && react_1.default.createElement("span", { className: 'bpw-header-unread' }, this.props.unreadCount)),
65
- this.props.hasBotInfoDescription && (react_1.default.createElement("div", { className: 'bpw-header-subtitle' }, this.props.botConversationDescription))));
66
- };
67
- this.handleDeleteConversation = () => __awaiter(this, void 0, void 0, function* () {
68
- if (yield (0, ConfirmDialog_1.default)(this.props.intl.formatMessage({
69
- id: 'header.deleteConversation'
70
- }), {
71
- acceptLabel: this.props.intl.formatMessage({
72
- id: 'header.deleteConversationYes'
73
- }),
74
- declineLabel: this.props.intl.formatMessage({
75
- id: 'header.deleteConversationNo'
76
- })
77
- })) {
78
- yield this.props.deleteConversation();
79
- }
80
- });
81
- this.setShowingOption = (val) => {
82
- this.setState({ showingOption: val });
83
- };
84
- }
85
- componentDidMount() {
86
- (0, mobx_1.observe)(this.props.focusedArea, (focus) => {
87
- focus.newValue === 'header' && this.changeButtonFocus(1);
88
- });
89
- }
90
- renderDeleteConversationButton() {
91
- return (react_1.default.createElement("button", { type: "button", tabIndex: -1, id: "btn-delete", ref: (el) => (this.btnEls[0] = el), className: 'bpw-header-icon bpw-header-icon-delete', onClick: this.handleDeleteConversation, onBlur: this.onBlur },
92
- react_1.default.createElement(Delete_1.default, null)));
93
- }
94
- renderDownloadButton() {
95
- return (react_1.default.createElement("button", { type: "button", tabIndex: -1, id: "btn-download", ref: (el) => (this.btnEls[2] = el), className: 'bpw-header-icon bpw-header-icon-download', onClick: this.props.downloadConversation, onBlur: this.onBlur },
96
- react_1.default.createElement(Download_1.default, null)));
97
- }
98
- renderConvoButton() {
99
- return (react_1.default.createElement("button", { type: "button", tabIndex: -1, id: "btn-conversations", ref: (el) => (this.btnEls[3] = el), className: 'bpw-header-icon bpw-header-icon-convo', onClick: this.props.toggleConversations, onBlur: this.onBlur },
100
- react_1.default.createElement(List_1.default, null)));
101
- }
102
- renderBotInfoButton() {
103
- return (react_1.default.createElement("button", { type: "button", tabIndex: -1, id: "btn-botinfo", ref: (el) => (this.btnEls[4] = el), className: 'bpw-header-icon bpw-header-icon-botinfo', onClick: this.props.toggleBotInfo, onBlur: this.onBlur },
104
- react_1.default.createElement(Information_1.default, null)));
105
- }
106
- renderCloseButton() {
107
- return (react_1.default.createElement("button", { type: "button", id: "btn-close", "aria-label": this.props.intl.formatMessage({
108
- id: 'header.hideChatWindow',
109
- defaultMessage: 'Hide the chat window'
110
- }), ref: (el) => (this.btnEls[5] = el), className: 'bpw-header-icon bpw-header-icon-close', onClick: this.props.hideChat, onBlur: this.onBlur },
111
- react_1.default.createElement(Close_1.default, null)));
112
- }
113
- renderCustomButtons() {
114
- return this.props.customButtons.map((btn) => {
115
- const Icon = btn.icon;
116
- return (react_1.default.createElement("button", { type: "button", key: btn.id, id: `btn-${btn.id}`, tabIndex: -1, className: 'bpw-header-icon', onClick: btn.onClick.bind(this, btn.id, this), title: btn.label || '' }, typeof Icon === 'function' ? react_1.default.createElement(Icon, null) : Icon));
117
- });
118
- }
119
- render() {
120
- const optionsItems = [];
121
- if (this.props.showDownloadButton) {
122
- optionsItems.push({
123
- label: 'Download Conversation',
124
- action: this.props.downloadConversation
125
- });
126
- }
127
- if (this.props.showConversationsButton) {
128
- optionsItems.push({
129
- label: 'Toggle List View',
130
- action: this.props.toggleConversations
131
- });
132
- }
133
- if (this.props.showBotInfoButton) {
134
- optionsItems.push({
135
- label: 'Toggle Bot Info',
136
- action: this.props.toggleBotInfo
137
- });
138
- }
139
- if (this.props.showDeleteConversationButton) {
140
- optionsItems.push({
141
- label: 'Delete conversation',
142
- action: this.props.deleteConversation
143
- });
144
- }
145
- return (react_1.default.createElement("div", { className: 'bpw-header-container' },
146
- react_1.default.createElement("div", { className: 'bpw-header-title-flexbox' },
147
- react_1.default.createElement("div", { className: 'bpw-header-title-container' },
148
- react_1.default.createElement(Avatar_1.default, { name: this.props.botName, avatarUrl: this.props.botAvatarUrl, height: 40, width: 40 }),
149
- this.renderTitle())),
150
- !!this.props.customButtons.length && this.renderCustomButtons(),
151
- this.props.showDeleteConversationButton && this.renderDeleteConversationButton(),
152
- this.props.showDownloadButton && this.renderDownloadButton(),
153
- this.props.showConversationsButton && this.renderConvoButton(),
154
- this.props.showBotInfoButton && this.renderBotInfoButton(),
155
- this.props.showCloseButton && this.renderCloseButton()));
156
- }
157
- }
158
- exports.default = (0, mobx_react_1.inject)(({ store }) => ({
159
- intl: store.intl,
160
- isConversationsDisplayed: store.view.isConversationsDisplayed,
161
- showDeleteConversationButton: store.view.showDeleteConversationButton,
162
- showDownloadButton: store.view.showDownloadButton,
163
- showBotInfoButton: store.view.showBotInfoButton,
164
- showConversationsButton: store.view.showConversationsButton,
165
- showCloseButton: store.view.showCloseButton,
166
- hasUnreadMessages: store.view.hasUnreadMessages,
167
- unreadCount: store.view.unreadCount,
168
- focusPrevious: store.view.focusPrevious,
169
- focusNext: store.view.focusNext,
170
- focusedArea: store.view.focusedArea,
171
- hideChat: store.view.hideChat,
172
- toggleConversations: store.view.toggleConversations,
173
- toggleBotInfo: store.view.toggleBotInfo,
174
- customButtons: store.view.customButtons,
175
- deleteConversation: store.deleteConversation,
176
- downloadConversation: store.downloadConversation,
177
- botName: store.botName,
178
- botAvatarUrl: store.botAvatarUrl,
179
- hasBotInfoDescription: store.hasBotInfoDescription,
180
- botConversationDescription: store.config.botConversationDescription
181
- }))((0, mobx_react_1.observer)(Header));
@@ -1,10 +0,0 @@
1
- /// <reference types="node" />
2
- import { FC } from 'react';
3
- interface Props {
4
- onDone: (voice: Buffer, ext: string) => Promise<void>;
5
- onStart?: () => void;
6
- onNotAvailable?: () => void;
7
- className?: string;
8
- }
9
- declare const VoiceRecorder: FC<Props>;
10
- export default VoiceRecorder;
@@ -1,137 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
- }) : (function(o, m, k, k2) {
6
- if (k2 === undefined) k2 = k;
7
- o[k2] = m[k];
8
- }));
9
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
10
- Object.defineProperty(o, "default", { enumerable: true, value: v });
11
- }) : function(o, v) {
12
- o["default"] = v;
13
- });
14
- var __importStar = (this && this.__importStar) || function (mod) {
15
- if (mod && mod.__esModule) return mod;
16
- var result = {};
17
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
18
- __setModuleDefault(result, mod);
19
- return result;
20
- };
21
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
22
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
23
- return new (P || (P = Promise))(function (resolve, reject) {
24
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
25
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
26
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
27
- step((generator = generator.apply(thisArg, _arguments || [])).next());
28
- });
29
- };
30
- var __importDefault = (this && this.__importDefault) || function (mod) {
31
- return (mod && mod.__esModule) ? mod : { "default": mod };
32
- };
33
- Object.defineProperty(exports, "__esModule", { value: true });
34
- const classnames_1 = __importDefault(require("classnames"));
35
- const lite_1 = __importDefault(require("mime/lite"));
36
- const react_1 = __importStar(require("react"));
37
- const Cancel_1 = __importDefault(require("../icons/Cancel"));
38
- const Microphone_1 = __importDefault(require("../icons/Microphone"));
39
- const VoiceRecorder = (props) => {
40
- var _a;
41
- const [isRecording, setIsRecording] = (0, react_1.useState)(false);
42
- const mediaRecorder = (0, react_1.useRef)(null);
43
- const mediaChunks = (0, react_1.useRef)([]);
44
- const mediaStream = (0, react_1.useRef)(null);
45
- const isCancelled = (0, react_1.useRef)(false);
46
- const getMediaStream = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
47
- var _b;
48
- try {
49
- const stream = yield window.navigator.mediaDevices.getUserMedia({ audio: true, video: false });
50
- mediaStream.current = stream;
51
- }
52
- catch (err) {
53
- console.error('[VoiceRecorder] - Error while creating MediaStream', err);
54
- (_b = props.onNotAvailable) === null || _b === void 0 ? void 0 : _b.call(props);
55
- }
56
- }), []);
57
- (0, react_1.useEffect)(() => {
58
- return () => {
59
- var _a, _b, _c, _d;
60
- (_a = mediaRecorder.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('dataavailable', onResult);
61
- props.onStart && ((_b = mediaRecorder.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('start', props.onStart));
62
- (_c = mediaRecorder.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('stop', onStop);
63
- (_d = mediaRecorder.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('error', onError);
64
- };
65
- }, []);
66
- const onError = (ev) => {
67
- var _a;
68
- console.error(`[VoiceRecorder] - Error while recording audio: ${ev.error.name} (${ev.error.code}) - ${ev.error.message}`);
69
- (_a = props.onNotAvailable) === null || _a === void 0 ? void 0 : _a.call(props);
70
- };
71
- const onResult = (e) => {
72
- if (e.data.size > 0) {
73
- mediaChunks.current.push(e.data);
74
- }
75
- };
76
- const onStop = () => __awaiter(void 0, void 0, void 0, function* () {
77
- if (isCancelled.current) {
78
- isCancelled.current = false;
79
- return;
80
- }
81
- try {
82
- if (mediaChunks.current.length) {
83
- const firstBlob = mediaChunks.current[0];
84
- // Fallback to ogg when detecting the extension since it's the most common
85
- // audio format supported by modern browsers
86
- const ext = lite_1.default.getExtension(firstBlob.type) || 'ogg';
87
- const blob = new Blob(mediaChunks.current);
88
- const arrayBuffer = yield blob.arrayBuffer();
89
- const buffer = Buffer.from(arrayBuffer);
90
- yield props.onDone(buffer, ext);
91
- }
92
- }
93
- catch (err) {
94
- console.error('[VoiceRecorder] - Error converting the audio blob into a buffer', err);
95
- }
96
- finally {
97
- setIsRecording(false);
98
- }
99
- });
100
- const stopRecording = () => {
101
- var _a, _b;
102
- if (((_a = mediaRecorder.current) === null || _a === void 0 ? void 0 : _a.state) !== 'inactive') {
103
- (_b = mediaRecorder.current) === null || _b === void 0 ? void 0 : _b.stop();
104
- mediaStream.current && mediaStream.current.getTracks().forEach((track) => track.stop());
105
- mediaChunks.current = [];
106
- setIsRecording(false);
107
- }
108
- };
109
- const cancelRecording = () => {
110
- isCancelled.current = true;
111
- stopRecording();
112
- };
113
- const startRecording = () => __awaiter(void 0, void 0, void 0, function* () {
114
- if (!mediaStream.current || mediaStream.current.getTracks().some((track) => track.readyState === 'ended')) {
115
- yield getMediaStream();
116
- }
117
- if (mediaStream.current) {
118
- mediaRecorder.current = new MediaRecorder(mediaStream.current);
119
- mediaRecorder.current.addEventListener('dataavailable', onResult);
120
- props.onStart && mediaRecorder.current.addEventListener('start', props.onStart);
121
- mediaRecorder.current.addEventListener('stop', onStop);
122
- mediaRecorder.current.addEventListener('error', onError);
123
- mediaRecorder.current.start();
124
- setIsRecording(true);
125
- }
126
- });
127
- if (!window.MediaRecorder) {
128
- (_a = props.onNotAvailable) === null || _a === void 0 ? void 0 : _a.call(props);
129
- return null;
130
- }
131
- return (react_1.default.createElement(react_1.Fragment, null,
132
- isRecording && (react_1.default.createElement("button", { className: (0, classnames_1.default)('bpw-send-button', props.className), onClick: cancelRecording },
133
- react_1.default.createElement(Cancel_1.default, { fill: "#ff0000" }))),
134
- react_1.default.createElement("button", { className: (0, classnames_1.default)('bpw-send-button', props.className), onClick: isRecording ? stopRecording : startRecording },
135
- react_1.default.createElement(Microphone_1.default, { fill: isRecording ? '#f1f1f1' : 'black' }))));
136
- };
137
- exports.default = VoiceRecorder;
@@ -1,9 +0,0 @@
1
- /// <reference types="react" />
2
- declare const Avatar: ({ name, avatarUrl, height, width }: AvatarProps) => JSX.Element;
3
- export default Avatar;
4
- export interface AvatarProps {
5
- name?: string;
6
- avatarUrl?: string;
7
- height: number;
8
- width: number;
9
- }
@@ -1,13 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const react_1 = __importDefault(require("react"));
7
- const Avatar = ({ name, avatarUrl, height, width }) => {
8
- return (react_1.default.createElement("div", { className: 'bpw-bot-avatar' },
9
- avatarUrl && react_1.default.createElement("img", { height: height, width: width, src: avatarUrl }),
10
- !avatarUrl && (react_1.default.createElement("svg", { width: width, height: width },
11
- react_1.default.createElement("text", { textAnchor: 'middle', x: '50%', y: '50%', dy: '0.35em', fill: '#ffffff', fontSize: 15 }, name && name[0])))));
12
- };
13
- exports.default = Avatar;
@@ -1,10 +0,0 @@
1
- import React from 'react';
2
- import { WrappedComponentProps } from 'react-intl';
3
- import { StoreDef } from '../../../store';
4
- declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omit<BotInfoProps, "intl"> & {
5
- forwardedRef?: React.Ref<any> | undefined;
6
- } & React.RefAttributes<any>> & {
7
- WrappedComponent: React.ComponentType<BotInfoProps>;
8
- } & import("mobx-react").IWrappedComponent<unknown>;
9
- export default _default;
10
- declare type BotInfoProps = WrappedComponentProps & Pick<StoreDef, 'coverPictureUrl' | 'description' | 'phoneNumber' | 'website' | 'emailAddress' | 'termsConditions' | 'privacyPolicy' | 'botInfo' | 'botName' | 'avatarUrl' | 'toggleBotInfo' | 'updatePreferredLanguage' | 'preferredLanguage' | 'escapeHTML' | 'rtl'>;
@@ -1,107 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
- }) : (function(o, m, k, k2) {
6
- if (k2 === undefined) k2 = k;
7
- o[k2] = m[k];
8
- }));
9
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
10
- Object.defineProperty(o, "default", { enumerable: true, value: v });
11
- }) : function(o, v) {
12
- o["default"] = v;
13
- });
14
- var __importStar = (this && this.__importStar) || function (mod) {
15
- if (mod && mod.__esModule) return mod;
16
- var result = {};
17
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
18
- __setModuleDefault(result, mod);
19
- return result;
20
- };
21
- var __importDefault = (this && this.__importDefault) || function (mod) {
22
- return (mod && mod.__esModule) ? mod : { "default": mod };
23
- };
24
- Object.defineProperty(exports, "__esModule", { value: true });
25
- const classnames_1 = __importDefault(require("classnames"));
26
- const mobx_react_1 = require("mobx-react");
27
- const react_1 = __importStar(require("react"));
28
- const react_intl_1 = require("react-intl");
29
- const Email_1 = __importDefault(require("../../../icons/Email"));
30
- const Phone_1 = __importDefault(require("../../../icons/Phone"));
31
- const Website_1 = __importDefault(require("../../../icons/Website"));
32
- const utils_1 = require("../../../utils");
33
- const Avatar_1 = __importDefault(require("../Avatar"));
34
- const CoverPicture = ({ coverPictureUrl }) => (react_1.default.createElement("div", { className: 'bpw-botinfo-cover-picture-wrapper' },
35
- react_1.default.createElement("img", { className: 'bpw-botinfo-cover-picture', src: coverPictureUrl })));
36
- class BotInfoPage extends react_1.default.Component {
37
- constructor() {
38
- super(...arguments);
39
- this.changeLanguage = (e) => {
40
- const lang = e.target.value;
41
- this.props.updatePreferredLanguage(lang);
42
- };
43
- }
44
- componentDidMount() {
45
- var _a;
46
- (_a = this.btnEl) === null || _a === void 0 ? void 0 : _a.focus();
47
- }
48
- renderDescription(text) {
49
- const html = (0, utils_1.renderUnsafeHTML)(text, this.props.escapeHTML);
50
- return react_1.default.createElement("div", { className: 'bpw-botinfo-description', dangerouslySetInnerHTML: { __html: html } });
51
- }
52
- render() {
53
- const { botName, avatarUrl, coverPictureUrl, description, phoneNumber, website, emailAddress, termsConditions, privacyPolicy, botInfo } = this.props;
54
- return (react_1.default.createElement(react_1.Fragment, null,
55
- react_1.default.createElement("link", { rel: "stylesheet", href: "style.scss" }),
56
- react_1.default.createElement("div", { className: (0, classnames_1.default)('bpw-botinfo-container', {
57
- 'bpw-rtl': this.props.rtl
58
- }) },
59
- coverPictureUrl ? react_1.default.createElement(CoverPicture, { coverPictureUrl: coverPictureUrl }) : react_1.default.createElement("div", { style: { height: '42px' } }),
60
- react_1.default.createElement("div", { className: 'bpw-botinfo-summary' },
61
- react_1.default.createElement(Avatar_1.default, { name: botName, avatarUrl: avatarUrl, height: 64, width: 64 }),
62
- react_1.default.createElement("h3", { style: { marginBottom: '10px' } }, botName),
63
- description && this.renderDescription(description)),
64
- react_1.default.createElement(react_1.default.Fragment, null,
65
- react_1.default.createElement("div", { className: 'bpw-botinfo-links' },
66
- phoneNumber && (react_1.default.createElement("div", { className: 'bpw-botinfo-link' },
67
- react_1.default.createElement("i", null,
68
- react_1.default.createElement(Phone_1.default, null)),
69
- react_1.default.createElement("a", { target: '_blank', rel: "noopener noreferrer", href: `tel:${phoneNumber}` }, phoneNumber))),
70
- website && (react_1.default.createElement("div", { className: 'bpw-botinfo-link' },
71
- react_1.default.createElement("i", null,
72
- react_1.default.createElement(Website_1.default, null)),
73
- react_1.default.createElement("a", { target: '_blank', rel: "noopener noreferrer", href: website }, website))),
74
- emailAddress && (react_1.default.createElement("div", { className: 'bpw-botinfo-link' },
75
- react_1.default.createElement("i", null,
76
- react_1.default.createElement(Email_1.default, null)),
77
- react_1.default.createElement("a", { target: '_blank', rel: "noopener noreferrer", href: `mailto:${emailAddress}` }, emailAddress)))),
78
- termsConditions && (react_1.default.createElement("div", { className: 'bpw-botinfo-terms' },
79
- react_1.default.createElement("a", { target: '_blank', rel: "noopener noreferrer", href: termsConditions },
80
- react_1.default.createElement(react_intl_1.FormattedMessage, { id: 'botInfo.termsAndConditions' })))),
81
- privacyPolicy && (react_1.default.createElement("div", { className: 'bpw-botinfo-terms' },
82
- react_1.default.createElement("a", { target: '_blank', rel: "noopener noreferrer", href: privacyPolicy },
83
- react_1.default.createElement(react_intl_1.FormattedMessage, { id: 'botInfo.privacyPolicy' }))))),
84
- (botInfo === null || botInfo === void 0 ? void 0 : botInfo.languages) && botInfo.languages.length > 1 && (react_1.default.createElement("div", { className: 'bpw-botinfo-preferred-language' },
85
- react_1.default.createElement(react_intl_1.FormattedMessage, { id: 'botInfo.preferredLanguage' }),
86
- react_1.default.createElement("select", { value: this.props.preferredLanguage, onChange: this.changeLanguage }, botInfo.languages.map((lang) => (react_1.default.createElement("option", { key: lang, value: lang }, lang.toUpperCase())))))),
87
- react_1.default.createElement("button", { tabIndex: 1, ref: (el) => (this.btnEl = el), className: 'bpw-botinfo-start-button', onClick: this.props.toggleBotInfo.bind(this, undefined) },
88
- react_1.default.createElement(react_intl_1.FormattedMessage, { id: 'botInfo.backToConversation' })))));
89
- }
90
- }
91
- exports.default = (0, mobx_react_1.inject)(({ store }) => ({
92
- coverPictureUrl: store.coverPictureUrl,
93
- description: store.description,
94
- phoneNumber: store.phoneNumber,
95
- website: store.website,
96
- emailAddress: store.emailAddress,
97
- termsConditions: store.termsConditions,
98
- privacyPolicy: store.privacyPolicy,
99
- botName: store.botName,
100
- botInfo: store.botInfo,
101
- avatarUrl: store.botAvatarUrl,
102
- toggleBotInfo: store.view.toggleBotInfo,
103
- updatePreferredLanguage: store.updatePreferredLanguage,
104
- preferredLanguage: store.preferredLanguage,
105
- escapeHTML: store.escapeHTML,
106
- rtl: store.rtl
107
- }))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(BotInfoPage)));