@botpress/webchat 0.5.1 → 1.0.0

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 (295) 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/dist/vite.svg +1 -0
  83. package/index.html +18 -0
  84. package/package.json +60 -49
  85. package/public/vite.svg +1 -0
  86. package/src/App.tsx +41 -0
  87. package/src/Utils/colors.ts +45 -0
  88. package/src/Utils/eventEmitter.ts +31 -0
  89. package/src/Utils/index.ts +2 -0
  90. package/src/assets/check-circle-bold.svg +5 -0
  91. package/src/assets/chevron-up.svg +3 -0
  92. package/src/assets/file-05.svg +6 -0
  93. package/src/assets/globe-02.svg +6 -0
  94. package/src/assets/help-circle.svg +3 -0
  95. package/src/assets/info-circle.svg +3 -0
  96. package/src/assets/lock-01.svg +4 -0
  97. package/src/assets/mail-01.svg +6 -0
  98. package/src/assets/minus-circle.svg +3 -0
  99. package/src/assets/phone.svg +6 -0
  100. package/src/assets/send-03.svg +4 -0
  101. package/src/assets/share-04.svg +5 -0
  102. package/src/assets/slash-circle-01.svg +3 -0
  103. package/src/assets/x-circle-bold.svg +5 -0
  104. package/src/assets/x-close.svg +3 -0
  105. package/src/assets/x.svg +3 -0
  106. package/src/client/MessagingClient.ts +87 -0
  107. package/src/client/adapters/Audio.ts +10 -0
  108. package/src/client/adapters/Card.ts +104 -0
  109. package/src/client/adapters/Carousel.ts +11 -0
  110. package/src/client/adapters/Choice.ts +48 -0
  111. package/src/client/adapters/Dropdown.ts +39 -0
  112. package/src/client/adapters/File.ts +10 -0
  113. package/src/client/adapters/Image.ts +10 -0
  114. package/src/client/adapters/Location.ts +18 -0
  115. package/src/client/adapters/Message.ts +26 -0
  116. package/src/client/adapters/Text.ts +11 -0
  117. package/src/client/adapters/Utils.ts +11 -0
  118. package/src/client/adapters/Video.ts +10 -0
  119. package/src/client/adapters/Voice.ts +9 -0
  120. package/src/client/adapters/index.ts +12 -0
  121. package/src/client/index.ts +2 -0
  122. package/src/components/Avatar.tsx +22 -0
  123. package/src/components/Block.tsx +17 -0
  124. package/src/components/Composer.tsx +115 -0
  125. package/src/components/Container.tsx +17 -0
  126. package/src/components/Header.tsx +141 -0
  127. package/src/components/LoadingIndicator.tsx +15 -0
  128. package/src/components/Message.tsx +52 -0
  129. package/src/components/MessageList.tsx +75 -0
  130. package/src/components/Modal.tsx +49 -0
  131. package/src/components/RestartConversation.tsx +52 -0
  132. package/src/components/Webchat.tsx +68 -0
  133. package/src/components/dev-tools/DevTools.tsx +496 -0
  134. package/src/components/dev-tools/configuration.tsx +27 -0
  135. package/src/components/dev-tools/helpers.ts +21 -0
  136. package/src/components/index.ts +12 -0
  137. package/src/components/renderers/Audio.tsx +11 -0
  138. package/src/components/renderers/Bubble.tsx +12 -0
  139. package/src/components/renderers/Button.tsx +59 -0
  140. package/src/components/renderers/Carousel.tsx +51 -0
  141. package/src/components/renderers/Column.tsx +22 -0
  142. package/src/components/renderers/Dropdown.tsx +170 -0
  143. package/src/components/renderers/File.tsx +13 -0
  144. package/src/components/renderers/Image.tsx +63 -0
  145. package/src/components/renderers/Location.tsx +16 -0
  146. package/src/components/renderers/Row.tsx +22 -0
  147. package/src/components/renderers/Text.tsx +32 -0
  148. package/src/components/renderers/Video.tsx +11 -0
  149. package/src/components/renderers/index.ts +28 -0
  150. package/src/contexts/ComposerContext.ts +16 -0
  151. package/src/contexts/MessageContext.ts +16 -0
  152. package/src/contexts/ModalContext.ts +19 -0
  153. package/src/contexts/WebchatContext.ts +61 -0
  154. package/src/contexts/index.ts +4 -0
  155. package/src/hooks/index.ts +3 -0
  156. package/src/hooks/useImageSize.ts +30 -0
  157. package/src/hooks/useRefresh.ts +33 -0
  158. package/src/hooks/useWebchatStore.ts +45 -0
  159. package/src/index.css +18 -0
  160. package/src/index.ts +3 -0
  161. package/src/main.tsx +33 -0
  162. package/src/providers/ModalProvider.tsx +35 -0
  163. package/src/providers/WebchatProvider.tsx +107 -0
  164. package/src/providers/index.ts +2 -0
  165. package/src/schemas/index.ts +1 -0
  166. package/src/schemas/theme.ts +188 -0
  167. package/src/services/clipboard.ts +8 -0
  168. package/src/services/images.ts +39 -0
  169. package/src/services/index.ts +3 -0
  170. package/src/services/toast.tsx +71 -0
  171. package/src/themes/dawn.ts +277 -0
  172. package/src/themes/duskTheme.ts +349 -0
  173. package/src/themes/eggplant.ts +353 -0
  174. package/src/themes/galaxy.ts +323 -0
  175. package/src/themes/index.ts +6 -0
  176. package/src/themes/midnight.ts +276 -0
  177. package/src/themes/prism.ts +349 -0
  178. package/src/twind.config.ts +31 -0
  179. package/src/types/block-type.ts +150 -0
  180. package/src/types/image.ts +10 -0
  181. package/src/types/index.ts +2 -0
  182. package/src/vite-env.d.ts +1 -0
  183. package/tailwind.config.js +0 -0
  184. package/tsconfig.json +30 -0
  185. package/tsconfig.node.json +10 -0
  186. package/vite.config.ts +31 -0
  187. package/README.md +0 -41
  188. package/assets/fonts/roboto/roboto.woff2 +0 -0
  189. package/assets/fonts/roboto/roboto500.woff2 +0 -0
  190. package/assets/fonts/roboto.css +0 -128
  191. package/assets/notification.mp3 +0 -0
  192. package/dist/components/Composer.js +0 -118
  193. package/dist/components/Container.js +0 -62
  194. package/dist/components/ConversationList.d.ts +0 -10
  195. package/dist/components/ConversationList.js +0 -41
  196. package/dist/components/Footer.d.ts +0 -3
  197. package/dist/components/Footer.js +0 -21
  198. package/dist/components/Header.js +0 -181
  199. package/dist/components/VoiceRecorder.d.ts +0 -10
  200. package/dist/components/VoiceRecorder.js +0 -137
  201. package/dist/components/common/Avatar/index.d.ts +0 -9
  202. package/dist/components/common/Avatar/index.js +0 -13
  203. package/dist/components/common/BotInfo/index.d.ts +0 -10
  204. package/dist/components/common/BotInfo/index.js +0 -107
  205. package/dist/components/common/BotInfo/style.scss +0 -88
  206. package/dist/components/common/ConfirmDialog/index.d.ts +0 -11
  207. package/dist/components/common/ConfirmDialog/index.js +0 -78
  208. package/dist/components/common/ConfirmDialog/style.module.scss +0 -48
  209. package/dist/components/common/Dialog/index.d.ts +0 -17
  210. package/dist/components/common/Dialog/index.js +0 -57
  211. package/dist/components/common/Dialog/style.module.scss +0 -29
  212. package/dist/components/common/ToolTip/index.d.ts +0 -10
  213. package/dist/components/common/ToolTip/index.js +0 -163
  214. package/dist/components/common/ToolTip/style.module.scss +0 -108
  215. package/dist/components/common/ToolTip/utils.d.ts +0 -15
  216. package/dist/components/common/ToolTip/utils.js +0 -78
  217. package/dist/components/common/variables.scss +0 -38
  218. package/dist/components/messages/InlineFeedback.d.ts +0 -11
  219. package/dist/components/messages/InlineFeedback.js +0 -56
  220. package/dist/components/messages/Message.d.ts +0 -11
  221. package/dist/components/messages/Message.js +0 -106
  222. package/dist/components/messages/MessageGroup.d.ts +0 -23
  223. package/dist/components/messages/MessageGroup.js +0 -63
  224. package/dist/components/messages/MessageList.d.ts +0 -10
  225. package/dist/components/messages/MessageList.js +0 -148
  226. package/dist/core/api.d.ts +0 -23
  227. package/dist/core/api.js +0 -117
  228. package/dist/core/constants.d.ts +0 -14
  229. package/dist/core/constants.js +0 -29
  230. package/dist/core/socket.d.ts +0 -14
  231. package/dist/core/socket.js +0 -57
  232. package/dist/declaration.d.ts +0 -2
  233. package/dist/declaration.js +0 -1
  234. package/dist/fonts/roboto.d.ts +0 -4
  235. package/dist/fonts/roboto.js +0 -9
  236. package/dist/globals.d.ts +0 -7
  237. package/dist/globals.js +0 -2
  238. package/dist/icons/Add.d.ts +0 -6
  239. package/dist/icons/Add.js +0 -10
  240. package/dist/icons/Cancel.d.ts +0 -5
  241. package/dist/icons/Cancel.js +0 -10
  242. package/dist/icons/Chat.d.ts +0 -6
  243. package/dist/icons/Chat.js +0 -9
  244. package/dist/icons/Close.d.ts +0 -3
  245. package/dist/icons/Close.js +0 -10
  246. package/dist/icons/Delete.d.ts +0 -3
  247. package/dist/icons/Delete.js +0 -11
  248. package/dist/icons/Download.d.ts +0 -3
  249. package/dist/icons/Download.js +0 -10
  250. package/dist/icons/Email.d.ts +0 -3
  251. package/dist/icons/Email.js +0 -8
  252. package/dist/icons/Information.d.ts +0 -3
  253. package/dist/icons/Information.js +0 -12
  254. package/dist/icons/List.d.ts +0 -3
  255. package/dist/icons/List.js +0 -15
  256. package/dist/icons/Microphone.d.ts +0 -5
  257. package/dist/icons/Microphone.js +0 -12
  258. package/dist/icons/Phone.d.ts +0 -3
  259. package/dist/icons/Phone.js +0 -8
  260. package/dist/icons/Reload.d.ts +0 -3
  261. package/dist/icons/Reload.js +0 -10
  262. package/dist/icons/ThumbsDown.d.ts +0 -3
  263. package/dist/icons/ThumbsDown.js +0 -11
  264. package/dist/icons/ThumbsUp.d.ts +0 -3
  265. package/dist/icons/ThumbsUp.js +0 -11
  266. package/dist/icons/Website.d.ts +0 -3
  267. package/dist/icons/Website.js +0 -8
  268. package/dist/main.js +0 -336
  269. package/dist/store/composer.d.ts +0 -17
  270. package/dist/store/composer.js +0 -98
  271. package/dist/store/index.d.ts +0 -89
  272. package/dist/store/index.js +0 -604
  273. package/dist/store/view.d.ts +0 -61
  274. package/dist/store/view.js +0 -365
  275. package/dist/translations/ar.json +0 -30
  276. package/dist/translations/de.json +0 -32
  277. package/dist/translations/en.json +0 -40
  278. package/dist/translations/es.json +0 -19
  279. package/dist/translations/fr.json +0 -40
  280. package/dist/translations/index.d.ts +0 -9
  281. package/dist/translations/index.js +0 -95
  282. package/dist/translations/it.json +0 -38
  283. package/dist/translations/pt.json +0 -19
  284. package/dist/translations/ru.json +0 -24
  285. package/dist/translations/uk.json +0 -24
  286. package/dist/typings.d.ts +0 -410
  287. package/dist/typings.js +0 -2
  288. package/dist/utils/analytics.d.ts +0 -5
  289. package/dist/utils/analytics.js +0 -37
  290. package/dist/utils/index.d.ts +0 -3
  291. package/dist/utils/index.js +0 -27
  292. package/dist/utils/storage.d.ts +0 -16
  293. package/dist/utils/storage.js +0 -129
  294. package/dist/utils/webchatEvents.d.ts +0 -2
  295. package/dist/utils/webchatEvents.js +0 -14
@@ -1,56 +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
- exports.InlineFeedback = void 0;
26
- const react_1 = __importStar(require("react"));
27
- const ThumbsDown_1 = __importDefault(require("../../icons/ThumbsDown"));
28
- const ThumbsUp_1 = __importDefault(require("../../icons/ThumbsUp"));
29
- const InlineFeedback = ({ messageFeedbacks, messageId, onFeedback, intl }) => {
30
- const [feedbackSent, setFeedbackSent] = (0, react_1.useState)(false);
31
- (0, react_1.useEffect)(() => {
32
- if (messageFeedbacks && messageFeedbacks.find((x) => x.messageId === messageId && x.feedback != null)) {
33
- setFeedbackSent(true);
34
- }
35
- }, [messageFeedbacks]);
36
- const handleSendFeedback = (feedback) => {
37
- onFeedback(feedback, messageId);
38
- setFeedbackSent(true);
39
- };
40
- if (feedbackSent) {
41
- return null;
42
- }
43
- return (react_1.default.createElement("div", { className: "bpw-message-feedback" },
44
- react_1.default.createElement("div", null,
45
- react_1.default.createElement("button", { type: "button", "aria-label": intl.formatMessage({
46
- id: 'message.thumbsUp',
47
- defaultMessage: 'Thumbs Up'
48
- }), onClick: () => handleSendFeedback(1) },
49
- react_1.default.createElement(ThumbsUp_1.default, null)),
50
- react_1.default.createElement("button", { type: "button", "aria-label": intl.formatMessage({
51
- id: 'message.thumbsDown',
52
- defaultMessage: 'Thumbs Down'
53
- }), onClick: () => handleSendFeedback(-1) },
54
- react_1.default.createElement(ThumbsDown_1.default, null)))));
55
- };
56
- exports.InlineFeedback = InlineFeedback;
@@ -1,11 +0,0 @@
1
- import React from 'react';
2
- import { WrappedComponentProps } from 'react-intl';
3
- import { StoreDef } from '../../store';
4
- import { Renderer } from '../../typings';
5
- declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omit<MessageProps, "intl"> & {
6
- forwardedRef?: React.Ref<any> | undefined;
7
- } & React.RefAttributes<any>> & {
8
- WrappedComponent: React.ComponentType<MessageProps>;
9
- } & import("mobx-react").IWrappedComponent<unknown>;
10
- export default _default;
11
- declare type MessageProps = Renderer.Message & WrappedComponentProps & Pick<StoreDef, 'intl' | 'selectedMessageId' | 'config'>;
@@ -1,106 +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 messaging_components_1 = __importDefault(require("@botpress/messaging-components"));
26
- const classnames_1 = __importDefault(require("classnames"));
27
- const mobx_react_1 = require("mobx-react");
28
- const react_1 = __importStar(require("react"));
29
- const react_intl_1 = require("react-intl");
30
- const webchatEvents_1 = require("../../utils/webchatEvents");
31
- class Message extends react_1.Component {
32
- constructor() {
33
- super(...arguments);
34
- this.state = {
35
- hasError: false,
36
- showMore: false
37
- };
38
- this.onMessageClick = () => {
39
- var _a, _b;
40
- (_a = this.props.store) === null || _a === void 0 ? void 0 : _a.setSelectedMessage(this.props.messageId);
41
- (0, webchatEvents_1.postMessageToParent)('MESSAGE.SELECTED', {
42
- id: this.props.messageId,
43
- conversationId: (_b = this.props.store) === null || _b === void 0 ? void 0 : _b.currentConversationId,
44
- sentOn: this.props.sentOn,
45
- payload: this.props.payload,
46
- from: this.props.isBotMessage ? 'bot' : 'user'
47
- }, this.props.config.chatId);
48
- };
49
- }
50
- static getDerivedStateFromError(_error) {
51
- return { hasError: true };
52
- }
53
- renderTimestamp() {
54
- return (react_1.default.createElement("span", { className: "bpw-message-timestamp" }, this.props.store.intl.formatTime(new Date(this.props.sentOn), { hour: 'numeric', minute: 'numeric' })));
55
- }
56
- render() {
57
- var _a, _b;
58
- if (this.state.hasError) {
59
- return '* Cannot display message *';
60
- }
61
- const type = this.props.type || (this.props.payload && this.props.payload.type);
62
- const wrappedType = this.props.payload && this.props.payload.wrapped && this.props.payload.wrapped.type;
63
- const wrappedClass = `bpw-bubble-${wrappedType}`;
64
- const rendered = (react_1.default.createElement(messaging_components_1.default, { key: this.props.messageId, content: this.props.payload, config: {
65
- messageId: this.props.messageId,
66
- noMessageBubble: this.props.noBubble,
67
- isLastOfGroup: this.props.isLastOfGroup,
68
- isLastGroup: this.props.isLastGroup,
69
- isBotMessage: this.props.isBotMessage,
70
- sentOn: this.props.sentOn,
71
- onSendData: this.props.onSendData,
72
- onFileUpload: this.props.onFileUpload,
73
- store: this.props.store,
74
- onAudioEnded: this.props.onAudioEnded,
75
- shouldPlay: this.props.shouldPlay,
76
- intl: this.props.store.intl,
77
- escapeHTML: true,
78
- showTimestamp: this.props.store.config.showTimestamp,
79
- googleMapsAPIKey: this.props.store.config.googleMapsAPIKey
80
- } }));
81
- if (rendered === null) {
82
- return null;
83
- }
84
- const additionalStyle = (this.props.payload && this.props.payload['web-style']) || {};
85
- const messageSelectedClass = {
86
- 'bpw-message-selected': this.props.selectedMessageId === this.props.messageId
87
- };
88
- if (this.props.noBubble || ((_b = (_a = this.props.payload) === null || _a === void 0 ? void 0 : _a.wrapped) === null || _b === void 0 ? void 0 : _b.noBubble)) {
89
- return (react_1.default.createElement("div", { className: (0, classnames_1.default)(this.props.className, wrappedClass, messageSelectedClass), style: additionalStyle, onClick: this.onMessageClick }, rendered));
90
- }
91
- return (react_1.default.createElement("div", { className: (0, classnames_1.default)(this.props.className, wrappedClass, 'bpw-chat-bubble', `bpw-bubble-${type}`), "data-from": this.props.fromLabel, tabIndex: -1, style: additionalStyle },
92
- react_1.default.createElement("div", { tabIndex: -1, className: (0, classnames_1.default)('bpw-chat-bubble-content', messageSelectedClass), onClick: this.onMessageClick },
93
- react_1.default.createElement("span", { className: "sr-only" }, this.props.store.intl.formatMessage({
94
- id: this.props.isBotMessage ? 'message.botSaid' : 'message.iSaid',
95
- defaultMessage: this.props.isBotMessage ? 'Virtual assistant said : ' : 'I said : '
96
- })),
97
- rendered,
98
- this.props.store.config.showTimestamp && this.renderTimestamp()),
99
- this.props.inlineFeedback));
100
- }
101
- }
102
- exports.default = (0, mobx_react_1.inject)(({ store }) => ({
103
- intl: store.intl,
104
- config: store.config,
105
- selectedMessageId: store.selectedMessageId
106
- }))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(Message)));
@@ -1,23 +0,0 @@
1
- import React from 'react';
2
- import { RootStore, StoreDef } from '../../store';
3
- import { Message as MessageDetails } from '../../typings';
4
- declare class MessageGroup extends React.Component<Props> {
5
- state: {
6
- hasError: boolean;
7
- audioPlayingIndex: number;
8
- };
9
- static getDerivedStateFromError(_error: Error): {
10
- hasError: boolean;
11
- };
12
- onAudioEnded: () => void;
13
- render(): JSX.Element | "* Cannot display message *";
14
- }
15
- declare const _default: typeof MessageGroup & import("mobx-react").IWrappedComponent<unknown>;
16
- export default _default;
17
- declare type Props = {
18
- isBot: boolean;
19
- avatar: JSX.Element;
20
- messages: MessageDetails[];
21
- isLastGroup: boolean;
22
- store?: RootStore;
23
- } & Pick<StoreDef, 'sendFeedback' | 'sendData' | 'selectedMessageId'>;
@@ -1,63 +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 classnames_1 = __importDefault(require("classnames"));
7
- const sortBy_1 = __importDefault(require("lodash/sortBy"));
8
- const mobx_react_1 = require("mobx-react");
9
- const react_1 = __importDefault(require("react"));
10
- const InlineFeedback_1 = require("./InlineFeedback");
11
- const Message_1 = __importDefault(require("./Message"));
12
- class MessageGroup extends react_1.default.Component {
13
- constructor() {
14
- super(...arguments);
15
- this.state = {
16
- hasError: false,
17
- audioPlayingIndex: 0
18
- };
19
- this.onAudioEnded = () => {
20
- if (this.state.audioPlayingIndex >= this.props.messages.length - 1) {
21
- this.state.audioPlayingIndex = -1;
22
- }
23
- else {
24
- this.setState(Object.assign(Object.assign({}, this.state), { audioPlayingIndex: (this.state.audioPlayingIndex += 1) }));
25
- }
26
- };
27
- }
28
- static getDerivedStateFromError(_error) {
29
- return { hasError: true };
30
- }
31
- render() {
32
- const { messages, avatar, isBot } = this.props;
33
- const fromLabel = this.props.store.intl.formatMessage({
34
- id: this.props.isBot ? 'message.fromBotLabel' : 'message.fromMeLabel',
35
- defaultMessage: 'Me'
36
- });
37
- if (this.state.hasError) {
38
- return '* Cannot display message *';
39
- }
40
- return (react_1.default.createElement("div", { role: "main", className: (0, classnames_1.default)('bpw-message-big-container', {
41
- 'bpw-from-user': !isBot,
42
- 'bpw-from-bot': isBot
43
- }) },
44
- avatar,
45
- react_1.default.createElement("div", { role: "region", className: 'bpw-message-container' },
46
- react_1.default.createElement("div", { "aria-live": "assertive", role: "log", className: (0, classnames_1.default)('bpw-message-group', {
47
- 'bpw-message-group-selected': !!this.props.messages.find((m) => m.id === this.props.selectedMessageId)
48
- }) },
49
- react_1.default.createElement("span", { "data-from": fromLabel, className: "from hidden", "aria-hidden": "true" }, fromLabel),
50
- (0, sortBy_1.default)(messages, ['sent_on', 'eventId']).map((message, i, messages) => {
51
- const isLastMsg = i === messages.length - 1;
52
- const payload = message.payload;
53
- const showInlineFeedback = isBot && isLastMsg && payload.collectFeedback;
54
- return (react_1.default.createElement(Message_1.default, { key: `${message.id}-${message.payload.type}`, inlineFeedback: showInlineFeedback && (react_1.default.createElement(InlineFeedback_1.InlineFeedback, { intl: this.props.store.intl, messageId: message.id, onFeedback: this.props.sendFeedback, messageFeedbacks: this.props.store.messageFeedbacks })), messageId: message.id, noBubble: !!payload.noBubble, fromLabel: fromLabel, isLastOfGroup: i >= this.props.messages.length - 1, isLastGroup: this.props.isLastGroup, isBotMessage: !message.authorId, payload: payload, sentOn: message.sentOn, onSendData: this.props.sendData, store: this.props.store, onAudioEnded: this.onAudioEnded, shouldPlay: this.state.audioPlayingIndex === i }));
55
- })))));
56
- }
57
- }
58
- exports.default = (0, mobx_react_1.inject)(({ store }) => ({
59
- store,
60
- sendFeedback: store.sendFeedback,
61
- sendData: store.sendData,
62
- selectedMessageId: store.selectedMessageId
63
- }))(MessageGroup);
@@ -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<MessageListProps, "intl"> & {
5
- forwardedRef?: React.Ref<any> | undefined;
6
- } & React.RefAttributes<any>> & {
7
- WrappedComponent: React.ComponentType<MessageListProps>;
8
- } & import("mobx-react").IWrappedComponent<unknown>;
9
- export default _default;
10
- declare type MessageListProps = WrappedComponentProps & Pick<StoreDef, 'intl' | 'isBotTyping' | 'focusedArea' | 'focusPrevious' | 'focusNext' | 'botAvatarUrl' | 'botName' | 'currentMessages' | 'preferredLanguage'>;
@@ -1,148 +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 difference_in_minutes_1 = __importDefault(require("date-fns/difference_in_minutes"));
26
- const last_1 = __importDefault(require("lodash/last"));
27
- const mobx_1 = require("mobx");
28
- const mobx_react_1 = require("mobx-react");
29
- const react_1 = __importStar(require("react"));
30
- const react_intl_1 = require("react-intl");
31
- const react_scroll_to_bottom_1 = __importStar(require("react-scroll-to-bottom"));
32
- const constants_1 = __importDefault(require("../../core/constants"));
33
- const Avatar_1 = __importDefault(require("../common/Avatar"));
34
- const MessageGroup_1 = __importDefault(require("./MessageGroup"));
35
- class MessageList extends react_1.default.Component {
36
- componentDidMount() {
37
- (0, mobx_1.observe)(this.props.focusedArea, (focus) => {
38
- focus.newValue === 'convo' && this.messagesDiv.focus();
39
- });
40
- }
41
- render() {
42
- return (react_1.default.createElement(react_scroll_to_bottom_1.default, { mode: 'bottom', initialScrollBehavior: 'auto', tabIndex: 0, className: 'bpw-msg-list-scroll-container', scrollViewClassName: 'bpw-msg-list', ref: (m) => {
43
- this.messagesDiv = m;
44
- }, followButtonClassName: 'bpw-msg-list-follow' },
45
- react_1.default.createElement(Content, Object.assign({}, this.props))));
46
- }
47
- }
48
- const Content = (0, mobx_react_1.observer)((props) => {
49
- var _a, _b;
50
- const [state, setState] = (0, react_1.useState)({
51
- showNewMessageIndicator: false,
52
- messagesLength: undefined
53
- });
54
- const scrollToBottom = (0, react_scroll_to_bottom_1.useScrollToBottom)();
55
- const [sticky] = (0, react_scroll_to_bottom_1.useSticky)();
56
- (0, react_1.useEffect)(() => {
57
- var _a, _b;
58
- const stateUpdate = Object.assign(Object.assign({}, state), { messagesLength: (_a = props === null || props === void 0 ? void 0 : props.currentMessages) === null || _a === void 0 ? void 0 : _a.length });
59
- if (!sticky && state.messagesLength !== ((_b = props === null || props === void 0 ? void 0 : props.currentMessages) === null || _b === void 0 ? void 0 : _b.length)) {
60
- setState(Object.assign(Object.assign({}, stateUpdate), { showNewMessageIndicator: true }));
61
- }
62
- else {
63
- setState(Object.assign(Object.assign({}, stateUpdate), { showNewMessageIndicator: false }));
64
- }
65
- }, [(_a = props === null || props === void 0 ? void 0 : props.currentMessages) === null || _a === void 0 ? void 0 : _a.length, sticky]);
66
- const shouldDisplayMessage = (m) => {
67
- return m.payload.type !== 'postback';
68
- };
69
- const renderDate = (date) => {
70
- return (react_1.default.createElement("div", { className: 'bpw-date-container' },
71
- new Intl.DateTimeFormat(props.intl.locale || 'en', {
72
- month: 'short',
73
- day: 'numeric',
74
- hour: 'numeric',
75
- minute: 'numeric'
76
- }).format(new Date(date)),
77
- react_1.default.createElement("div", { className: 'bpw-small-line' })));
78
- };
79
- const renderAvatar = (name, url) => {
80
- const avatarSize = 40;
81
- return react_1.default.createElement(Avatar_1.default, { name: name, avatarUrl: url, height: avatarSize, width: avatarSize });
82
- };
83
- const renderMessageGroups = () => {
84
- var _a;
85
- const messages = (props.currentMessages || []).filter((m) => shouldDisplayMessage(m));
86
- const groups = [];
87
- let lastSpeaker = undefined;
88
- let lastDate = undefined;
89
- let currentGroup = undefined;
90
- messages.forEach((m) => {
91
- const speaker = m.authorId;
92
- const date = m.sentOn;
93
- // Create a new group if messages are separated by more than X minutes or if different speaker
94
- if (speaker !== lastSpeaker ||
95
- !currentGroup ||
96
- (0, difference_in_minutes_1.default)(new Date(date), new Date(lastDate)) >= constants_1.default.TIME_BETWEEN_DATES) {
97
- currentGroup = [];
98
- groups.push(currentGroup);
99
- }
100
- if (currentGroup.find((x) => x.id === m.id)) {
101
- return;
102
- }
103
- currentGroup.push(m);
104
- lastSpeaker = speaker;
105
- lastDate = date;
106
- });
107
- if ((_a = props === null || props === void 0 ? void 0 : props.isBotTyping) === null || _a === void 0 ? void 0 : _a.get()) {
108
- if (lastSpeaker !== 'bot') {
109
- currentGroup = [];
110
- groups.push(currentGroup);
111
- }
112
- currentGroup.push({
113
- sentOn: new Date(),
114
- payload: { type: 'typing' }
115
- });
116
- }
117
- return (react_1.default.createElement("div", null, groups.map((group, i) => {
118
- var _a;
119
- const lastGroup = groups[i - 1];
120
- const lastDate = (_a = lastGroup === null || lastGroup === void 0 ? void 0 : lastGroup[lastGroup.length - 1]) === null || _a === void 0 ? void 0 : _a.sentOn;
121
- const groupDate = group === null || group === void 0 ? void 0 : group[0].sentOn;
122
- const isDateNeeded = !groups[i - 1] ||
123
- (0, difference_in_minutes_1.default)(new Date(groupDate), new Date(lastDate)) > constants_1.default.TIME_BETWEEN_DATES;
124
- const { authorId } = (0, last_1.default)(group);
125
- const avatar = !authorId && renderAvatar(props.botName, props.botAvatarUrl);
126
- return (react_1.default.createElement("div", { key: i },
127
- isDateNeeded && renderDate(group[0].sentOn),
128
- react_1.default.createElement(MessageGroup_1.default, { isBot: !authorId, avatar: avatar, key: `msg-group-${i}`, isLastGroup: i >= groups.length - 1, messages: group })));
129
- })));
130
- };
131
- return (react_1.default.createElement(react_1.default.Fragment, null,
132
- state.showNewMessageIndicator && (react_1.default.createElement("div", { className: "bpw-new-messages-indicator", onClick: (e) => scrollToBottom() },
133
- react_1.default.createElement("span", null, props.intl.formatMessage({
134
- id: `messages.newMessage${((_b = props === null || props === void 0 ? void 0 : props.currentMessages) === null || _b === void 0 ? void 0 : _b.length) === 1 ? '' : 's'}`
135
- })))),
136
- renderMessageGroups()));
137
- });
138
- exports.default = (0, mobx_react_1.inject)(({ store }) => ({
139
- intl: store.intl,
140
- botName: store.botName,
141
- isBotTyping: store.isBotTyping,
142
- botAvatarUrl: store.botAvatarUrl,
143
- currentMessages: store.currentMessages,
144
- focusPrevious: store.view.focusPrevious,
145
- focusNext: store.view.focusNext,
146
- focusedArea: store.view.focusedArea,
147
- preferredLanguage: store.preferredLanguage
148
- }))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(MessageList)));
@@ -1,23 +0,0 @@
1
- /// <reference types="node" />
2
- import { Message } from '@botpress/messaging-socket';
3
- import { uuid, RecentConversation } from '../typings';
4
- import BpSocket from './socket';
5
- export default class WebchatApi {
6
- private socket;
7
- constructor(socket: BpSocket);
8
- listCurrentConversationMessages(limit?: number): Promise<Message[] | undefined>;
9
- fetchConversations(): Promise<RecentConversation[]>;
10
- fetchConversation(conversationId: uuid): Promise<{
11
- messages: Message[];
12
- id?: string | undefined;
13
- clientId?: string | undefined;
14
- userId?: string | undefined;
15
- createdOn?: Date | undefined;
16
- } | undefined>;
17
- createConversation(): Promise<uuid | undefined>;
18
- startConversation(): Promise<void>;
19
- sendMessage(payload: any, conversationId: uuid): Promise<Message | undefined>;
20
- deleteConversation(conversationId: uuid): Promise<void>;
21
- sendFeedback(feedback: number, messageId: uuid): Promise<void>;
22
- sendVoiceMessage(voice: Buffer, ext: string, conversationId: uuid): Promise<void>;
23
- }
package/dist/core/api.js DELETED
@@ -1,117 +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
- Object.defineProperty(exports, "__esModule", { value: true });
12
- const uuid_1 = require("uuid");
13
- class WebchatApi {
14
- constructor(socket) {
15
- this.socket = socket;
16
- }
17
- listCurrentConversationMessages(limit) {
18
- return __awaiter(this, void 0, void 0, function* () {
19
- try {
20
- return this.socket.socket.listMessages(limit);
21
- }
22
- catch (err) {
23
- console.error('An error occurred while listing the messages of the current conversation', err);
24
- }
25
- });
26
- }
27
- fetchConversations() {
28
- return __awaiter(this, void 0, void 0, function* () {
29
- try {
30
- const conversations = (yield this.socket.socket.listConversations());
31
- // Add the last message of each conversation
32
- for (const conversation of conversations) {
33
- const limit = 1;
34
- yield this.socket.socket.switchConversation(conversation.id);
35
- const lastMessages = yield this.listCurrentConversationMessages(limit);
36
- if (lastMessages && lastMessages.length >= limit) {
37
- conversation.lastMessage = lastMessages[0];
38
- }
39
- }
40
- return conversations;
41
- }
42
- catch (err) {
43
- console.error('Error while fetching users conversations', err);
44
- return [];
45
- }
46
- });
47
- }
48
- fetchConversation(conversationId) {
49
- return __awaiter(this, void 0, void 0, function* () {
50
- try {
51
- const conversation = yield this.socket.socket.getConversation(conversationId);
52
- this.socket.socket.switchConversation(conversation.id);
53
- const messages = (yield this.socket.socket.listMessages()).filter((x) => x.payload.type !== 'visit');
54
- return Object.assign(Object.assign({}, conversation), { messages });
55
- }
56
- catch (err) {
57
- console.error('Error fetching a conversation', err);
58
- }
59
- });
60
- }
61
- createConversation() {
62
- return __awaiter(this, void 0, void 0, function* () {
63
- try {
64
- const conversation = yield this.socket.socket.createConversation();
65
- return conversation.id;
66
- }
67
- catch (err) {
68
- console.error('Error creating conversation', err);
69
- }
70
- });
71
- }
72
- startConversation() {
73
- return __awaiter(this, void 0, void 0, function* () {
74
- try {
75
- yield this.socket.socket.startConversation();
76
- }
77
- catch (err) {
78
- console.error('Error starting conversation', err);
79
- }
80
- });
81
- }
82
- sendMessage(payload, conversationId) {
83
- return __awaiter(this, void 0, void 0, function* () {
84
- try {
85
- return this.socket.sendPayload(payload);
86
- }
87
- catch (err) {
88
- console.error('Error sending message', err);
89
- }
90
- });
91
- }
92
- deleteConversation(conversationId) {
93
- return __awaiter(this, void 0, void 0, function* () {
94
- try {
95
- yield this.socket.socket.deleteConversation(conversationId);
96
- }
97
- catch (err) {
98
- console.error('Error deleting conversation', err);
99
- }
100
- });
101
- }
102
- sendFeedback(feedback, messageId) {
103
- return __awaiter(this, void 0, void 0, function* () {
104
- return this.socket.socket.sendFeedback(messageId, feedback);
105
- });
106
- }
107
- // TODO: Fix this
108
- sendVoiceMessage(voice, ext, conversationId) {
109
- return __awaiter(this, void 0, void 0, function* () {
110
- const audio = {
111
- buffer: voice.toString('base64'),
112
- title: `${(0, uuid_1.v4)()}.${ext}`
113
- };
114
- });
115
- }
116
- }
117
- exports.default = WebchatApi;
@@ -1,14 +0,0 @@
1
- import { Config } from '../typings';
2
- declare const _default: {
3
- /** The duration of the hide / show chat */
4
- ANIMATION_DURATION: number;
5
- MIN_TIME_BETWEEN_SOUNDS: number;
6
- SENT_HISTORY_SIZE: number;
7
- /** The number of minutes before a new timestamp is displayed */
8
- TIME_BETWEEN_DATES: number;
9
- DEFAULT_LAYOUT_WIDTH: number;
10
- DEFAULT_CONTAINER_WIDTH: number;
11
- /** The default configuration when starting the chat */
12
- DEFAULT_CONFIG: Partial<Config>;
13
- };
14
- export default _default;
@@ -1,29 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const DEFAULT_CONFIG = {
4
- botName: undefined,
5
- botConversationDescription: undefined,
6
- enableTranscriptDownload: true,
7
- showConversationsButton: true,
8
- useSessionStorage: false,
9
- showTimestamp: false,
10
- disableAnimations: false,
11
- hideWidget: false,
12
- showPoweredBy: false,
13
- enablePersistHistory: true,
14
- enableVoiceComposer: false,
15
- enableConversationDeletion: false,
16
- closeOnEscape: true
17
- };
18
- exports.default = {
19
- /** The duration of the hide / show chat */
20
- ANIMATION_DURATION: 300,
21
- MIN_TIME_BETWEEN_SOUNDS: 1000,
22
- SENT_HISTORY_SIZE: 20,
23
- /** The number of minutes before a new timestamp is displayed */
24
- TIME_BETWEEN_DATES: 10,
25
- DEFAULT_LAYOUT_WIDTH: 360,
26
- DEFAULT_CONTAINER_WIDTH: 360,
27
- /** The default configuration when starting the chat */
28
- DEFAULT_CONFIG
29
- };
@@ -1,14 +0,0 @@
1
- import { Message, MessagingSocket } from '@botpress/messaging-socket';
2
- import { Config } from '../typings';
3
- export default class BpSocket {
4
- private config;
5
- socket: MessagingSocket;
6
- private chatId;
7
- onMessage: (event: any) => void;
8
- constructor(config: Config);
9
- setup(): void;
10
- sendPayload(payload: any): Promise<Message>;
11
- connect(): Promise<void>;
12
- reload(config: Config): Promise<void>;
13
- private getCreds;
14
- }