@botpress/webchat 0.2.3 → 0.2.4

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 (54) hide show
  1. package/dist/components/Composer.d.ts +1 -1
  2. package/dist/components/Composer.js +12 -2
  3. package/dist/components/Container.d.ts +1 -1
  4. package/dist/components/Container.js +0 -2
  5. package/dist/components/ContextMenu.js +0 -9
  6. package/dist/components/Header.d.ts +1 -1
  7. package/dist/components/Header.js +10 -27
  8. package/dist/components/VoiceRecorder.js +6 -2
  9. package/dist/components/common/{Avatar.d.ts → Avatar/index.d.ts} +0 -0
  10. package/dist/components/common/Avatar/index.js +13 -0
  11. package/dist/components/common/{BotInfo.d.ts → BotInfo/index.d.ts} +2 -2
  12. package/dist/components/common/BotInfo/index.js +112 -0
  13. package/dist/components/common/ConfirmDialog/index.d.ts +11 -0
  14. package/dist/components/common/ConfirmDialog/index.js +78 -0
  15. package/dist/components/common/Dialog/index.d.ts +17 -0
  16. package/dist/components/common/Dialog/index.js +57 -0
  17. package/dist/components/common/MoreOptions/index.d.ts +21 -0
  18. package/dist/components/common/MoreOptions/index.js +60 -0
  19. package/dist/components/common/Overlay/index.d.ts +7 -0
  20. package/dist/components/common/{Avatar.js → Overlay/index.js} +15 -8
  21. package/dist/components/common/ToolTip/index.d.ts +10 -0
  22. package/dist/components/common/ToolTip/index.js +163 -0
  23. package/dist/components/common/ToolTip/utils.d.ts +15 -0
  24. package/dist/components/common/ToolTip/utils.js +78 -0
  25. package/dist/components/messages/Message.js +1 -20
  26. package/dist/components/messages/MessageGroup.d.ts +1 -9
  27. package/dist/components/messages/MessageGroup.js +4 -35
  28. package/dist/components/messages/MessageList.d.ts +1 -1
  29. package/dist/components/messages/MessageList.js +1 -2
  30. package/dist/core/api.d.ts +4 -13
  31. package/dist/core/api.js +29 -130
  32. package/dist/core/socket.d.ts +0 -5
  33. package/dist/core/socket.js +2 -45
  34. package/dist/icons/Cancel.d.ts +5 -0
  35. package/dist/icons/Cancel.js +10 -0
  36. package/dist/icons/Microphone.d.ts +5 -0
  37. package/dist/icons/Microphone.js +12 -0
  38. package/dist/index.d.ts +1 -1
  39. package/dist/index.js +7 -0
  40. package/dist/main.d.ts +1 -1
  41. package/dist/main.js +20 -37
  42. package/dist/store/composer.js +3 -6
  43. package/dist/store/index.d.ts +6 -12
  44. package/dist/store/index.js +74 -89
  45. package/dist/store/view.d.ts +0 -2
  46. package/dist/store/view.js +0 -10
  47. package/dist/translations/index.d.ts +2 -1
  48. package/dist/translations/index.js +9 -4
  49. package/dist/typings.d.ts +6 -18
  50. package/dist/utils/storage.d.ts +17 -0
  51. package/dist/utils/storage.js +117 -0
  52. package/dist/utils.js +1 -1
  53. package/package.json +4 -2
  54. package/dist/components/common/BotInfo.js +0 -110
package/dist/core/api.js CHANGED
@@ -12,30 +12,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
12
12
  return (mod && mod.__esModule) ? mod : { "default": mod };
13
13
  };
14
14
  Object.defineProperty(exports, "__esModule", { value: true });
15
- const get_1 = __importDefault(require("lodash/get"));
15
+ const axios_1 = __importDefault(require("axios"));
16
16
  const uuid_1 = require("uuid");
17
17
  class WebchatApi {
18
18
  constructor(socket) {
19
19
  this.socket = socket;
20
- this.handleApiError = (error) => __awaiter(this, void 0, void 0, function* () {
21
- // @deprecated 11.9 (replace with proper error management)
22
- const data = (0, get_1.default)(error, 'response.data', {});
23
- if (data && typeof data === 'string' && data.includes('BP_CONV_NOT_FOUND')) {
24
- console.error('Conversation not found, starting a new one...');
25
- yield this.createConversation();
26
- yield this.startConversation();
27
- }
28
- });
29
20
  }
30
- get baseUserPayload() {
31
- return {
32
- webSessionId: window.__BP_VISITOR_SOCKET_ID
33
- };
34
- }
35
- fetchBotInfo() {
21
+ fetchBotInfo(mediaFileServiceUrl) {
36
22
  return __awaiter(this, void 0, void 0, function* () {
37
23
  try {
38
- const { data } = yield this.axios.get('/botInfo', this.axiosConfig);
24
+ const { data } = yield axios_1.default.get(mediaFileServiceUrl);
39
25
  return data;
40
26
  }
41
27
  catch (err) {
@@ -43,44 +29,24 @@ class WebchatApi {
43
29
  }
44
30
  });
45
31
  }
46
- fetchPreferences() {
47
- return __awaiter(this, void 0, void 0, function* () {
48
- try {
49
- const { data } = yield this.axios.post('/preferences/get', this.baseUserPayload, this.axiosConfig);
50
- return data;
51
- }
52
- catch (err) {
53
- console.error('Error while fetching preferences', err);
54
- }
55
- });
56
- }
57
- updateUserPreferredLanguage(language) {
58
- return __awaiter(this, void 0, void 0, function* () {
59
- try {
60
- yield this.axios.post('/preferences', Object.assign(Object.assign({}, this.baseUserPayload), { language }), this.axiosConfig);
61
- }
62
- catch (err) {
63
- console.error('Error in updating user preferred language', err);
64
- }
65
- });
66
- }
67
32
  fetchConversations() {
68
33
  return __awaiter(this, void 0, void 0, function* () {
69
34
  try {
70
- const convos = (yield this.socket.socket.listConversations());
35
+ const conversations = (yield this.socket.socket.listConversations());
71
36
  // Add the last message of each conversation
72
- for (const convo of convos) {
37
+ for (const conversation of conversations) {
73
38
  const limit = 1;
74
- yield this.socket.socket.switchConversation(convo.id);
39
+ yield this.socket.socket.switchConversation(conversation.id);
75
40
  const lastMessages = yield this.socket.socket.listMessages(limit);
76
41
  if (lastMessages.length >= limit) {
77
- convo.lastMessage = lastMessages[0];
42
+ conversation.lastMessage = lastMessages[0];
78
43
  }
79
44
  }
80
- return convos;
45
+ return conversations;
81
46
  }
82
47
  catch (err) {
83
- console.error('Error while fetching convos', err);
48
+ console.error('Error while fetching users conversations', err);
49
+ return [];
84
50
  }
85
51
  });
86
52
  }
@@ -93,14 +59,14 @@ class WebchatApi {
93
59
  return Object.assign(Object.assign({}, conversation), { messages });
94
60
  }
95
61
  catch (err) {
96
- yield this.handleApiError(err);
62
+ console.error('Error fetching a conversation', err);
97
63
  }
98
64
  });
99
65
  }
66
+ // TODO: Fis this
100
67
  resetSession(conversationId) {
101
68
  return __awaiter(this, void 0, void 0, function* () {
102
69
  try {
103
- yield this.axios.post('/conversations/reset', Object.assign(Object.assign({}, this.baseUserPayload), { conversationId }), this.axiosConfig);
104
70
  }
105
71
  catch (err) {
106
72
  console.error('Error while resetting conversation', err);
@@ -114,7 +80,7 @@ class WebchatApi {
114
80
  return conversation.id;
115
81
  }
116
82
  catch (err) {
117
- console.error('Error in create conversation', err);
83
+ console.error('Error creating conversation', err);
118
84
  }
119
85
  });
120
86
  }
@@ -124,118 +90,51 @@ class WebchatApi {
124
90
  yield this.socket.socket.startConversation();
125
91
  }
126
92
  catch (err) {
127
- console.error('Error in start conversation', err);
128
- }
129
- });
130
- }
131
- downloadConversation(conversationId) {
132
- return __awaiter(this, void 0, void 0, function* () {
133
- try {
134
- const { data } = yield this.axios.post('/conversations/download/txt', Object.assign(Object.assign({}, this.baseUserPayload), { conversationId }), this.axiosConfig);
135
- return { name: data.name, txt: data.txt };
136
- }
137
- catch (err) {
138
- console.error('Error in download conversation', err);
93
+ console.error('Error starting conversation', err);
139
94
  }
140
95
  });
141
96
  }
142
- // TODO: we don't have a /events route available for this
143
- /*
144
- async sendEvent(payload: any, conversationId: uuid): Promise<void> {
145
- try {
146
- return this.axios.post('/events', { ...this.baseUserPayload, conversationId, payload }, this.axiosConfig)
147
- } catch (err) {
148
- await this.handleApiError(err)
149
- }
150
- }
151
- */
152
97
  sendMessage(payload, conversationId) {
153
98
  return __awaiter(this, void 0, void 0, function* () {
154
99
  try {
155
100
  return this.socket.sendPayload(payload);
156
101
  }
157
102
  catch (err) {
158
- yield this.handleApiError(err);
103
+ console.error('Error sending message', err);
159
104
  }
160
105
  });
161
106
  }
162
- deleteMessages(conversationId) {
107
+ deleteConversation(conversationId) {
163
108
  return __awaiter(this, void 0, void 0, function* () {
164
109
  try {
165
- yield this.axios.post('/conversations/messages/delete', Object.assign(Object.assign({}, this.baseUserPayload), { conversationId }), this.axiosConfig);
110
+ yield this.socket.socket.deleteConversation(conversationId);
166
111
  }
167
112
  catch (err) {
168
- yield this.handleApiError(err);
113
+ console.error('Error deleting conversation', err);
169
114
  }
170
115
  });
171
116
  }
172
117
  sendFeedback(feedback, messageId) {
173
118
  return __awaiter(this, void 0, void 0, function* () {
174
- try {
175
- return this.socket.socket.sendFeedback(messageId, feedback);
176
- }
177
- catch (err) {
178
- yield this.handleApiError(err);
179
- }
180
- });
181
- }
182
- getMessageIdsFeedbackInfo(messageIds) {
183
- return __awaiter(this, void 0, void 0, function* () {
184
- try {
185
- const { data } = yield this.axios.post('/feedbackInfo', { messageIds, target: this.userId }, this.axiosConfig);
186
- return data;
187
- }
188
- catch (err) {
189
- yield this.handleApiError(err);
190
- }
119
+ return this.socket.socket.sendFeedback(messageId, feedback);
191
120
  });
192
121
  }
193
122
  uploadFile(file, payload, conversationId) {
194
123
  return __awaiter(this, void 0, void 0, function* () {
195
- try {
196
- const data = new FormData();
197
- data.append('file', file);
198
- data.append('webSessionId', this.baseUserPayload.webSessionId);
199
- data.append('conversationId', conversationId);
200
- data.append('payload', payload);
201
- return this.axios.post('/messages/files', data, this.axiosConfig);
202
- }
203
- catch (err) {
204
- yield this.handleApiError(err);
205
- }
124
+ const data = new FormData();
125
+ data.append('file', file);
126
+ data.append('conversationId', conversationId);
127
+ data.append('payload', payload);
128
+ return this.axios.post('/messages/files', data, this.axiosConfig);
206
129
  });
207
130
  }
131
+ // TODO: Fix this
208
132
  sendVoiceMessage(voice, ext, conversationId) {
209
133
  return __awaiter(this, void 0, void 0, function* () {
210
- try {
211
- const audio = {
212
- buffer: voice.toString('base64'),
213
- title: `${(0, uuid_1.v4)()}.${ext}`
214
- };
215
- return this.axios.post('/messages/voice', Object.assign(Object.assign({}, this.baseUserPayload), { conversationId, audio }), this.axiosConfig);
216
- }
217
- catch (err) {
218
- yield this.handleApiError(err);
219
- }
220
- });
221
- }
222
- setReference(reference, conversationId) {
223
- return __awaiter(this, void 0, void 0, function* () {
224
- // TODO: this can't work. We don't have a reference route
225
- try {
226
- return this.axios.post('/conversations/reference', Object.assign(Object.assign({}, this.baseUserPayload), { conversationId, reference }), this.axiosConfig);
227
- }
228
- catch (err) {
229
- yield this.handleApiError(err);
230
- }
231
- });
232
- }
233
- listByIncomingEvent(messageId) {
234
- return __awaiter(this, void 0, void 0, function* () {
235
- const { data: messages } = yield this.axios.get(`/messaging/list-by-incoming-event/${messageId}`, {
236
- baseURL: window['BOT_API_PATH']
237
- });
238
- return messages;
134
+ const audio = {
135
+ buffer: voice.toString('base64'),
136
+ title: `${(0, uuid_1.v4)()}.${ext}`
137
+ };
239
138
  });
240
139
  }
241
140
  }
@@ -3,8 +3,6 @@ import { Config } from '../typings';
3
3
  export default class BpSocket {
4
4
  socket: MessagingSocket;
5
5
  private chatId;
6
- private encryptionKey;
7
- private clientId;
8
6
  private waitingForUser?;
9
7
  onClear: (event: any) => void;
10
8
  onMessage: (event: any) => void;
@@ -17,7 +15,4 @@ export default class BpSocket {
17
15
  postToParent: (_type: string, payload: any) => void;
18
16
  /** Waits until the VISITOR ID and VISITOR SOCKET ID is set */
19
17
  waitForUserId(): Promise<void>;
20
- getStorage<T>(key: string): T | undefined;
21
- setStorage<T>(key: string, object: T): void;
22
- private getStorageKey;
23
18
  }
@@ -8,14 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
8
8
  step((generator = generator.apply(thisArg, _arguments || [])).next());
9
9
  });
10
10
  };
11
- var __importDefault = (this && this.__importDefault) || function (mod) {
12
- return (mod && mod.__esModule) ? mod : { "default": mod };
13
- };
14
11
  Object.defineProperty(exports, "__esModule", { value: true });
15
12
  const messaging_socket_1 = require("@botpress/messaging-socket");
16
- const aes_1 = __importDefault(require("crypto-js/aes"));
17
- const enc_utf8_1 = __importDefault(require("crypto-js/enc-utf8"));
18
- const sha256_1 = __importDefault(require("crypto-js/sha256"));
19
13
  class BpSocket {
20
14
  constructor(config) {
21
15
  this.postToParent = (_type, payload) => {
@@ -24,8 +18,6 @@ class BpSocket {
24
18
  (_a = window.parent) === null || _a === void 0 ? void 0 : _a.postMessage(Object.assign(Object.assign({}, payload), { chatId: this.chatId }), '*');
25
19
  };
26
20
  this.chatId = config.chatId;
27
- this.encryptionKey = config.encryptionKey;
28
- this.clientId = config.clientId;
29
21
  this.socket = new messaging_socket_1.MessagingSocket({ url: config.messagingUrl, clientId: config.clientId });
30
22
  }
31
23
  setup() {
@@ -54,11 +46,11 @@ class BpSocket {
54
46
  return this.waitingForUser;
55
47
  }
56
48
  this.waitingForUser = new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
57
- const creds = this.getStorage('creds');
49
+ const creds = window.BP_STORAGE.get('creds');
58
50
  yield this.socket.connect(creds);
59
51
  if (this.socket.userId) {
60
52
  const userId = this.socket.userId;
61
- this.setStorage('creds', this.socket.creds);
53
+ window.BP_STORAGE.set('creds', this.socket.creds);
62
54
  this.onUserIdChanged(userId);
63
55
  this.postToParent('', { userId });
64
56
  resolve();
@@ -71,40 +63,5 @@ class BpSocket {
71
63
  return this.waitingForUser;
72
64
  });
73
65
  }
74
- getStorage(key) {
75
- var _a;
76
- let stored = localStorage.getItem(this.getStorageKey(key));
77
- if (!stored) {
78
- return undefined;
79
- }
80
- if ((_a = this.encryptionKey) === null || _a === void 0 ? void 0 : _a.length) {
81
- stored = aes_1.default.decrypt(stored, this.encryptionKey).toString(enc_utf8_1.default);
82
- }
83
- try {
84
- const val = JSON.parse(stored);
85
- return val;
86
- }
87
- catch (_b) {
88
- return undefined;
89
- }
90
- }
91
- setStorage(key, object) {
92
- var _a;
93
- let string = JSON.stringify(object);
94
- if ((_a = this.encryptionKey) === null || _a === void 0 ? void 0 : _a.length) {
95
- string = aes_1.default.encrypt(string, this.encryptionKey).toString();
96
- }
97
- localStorage.setItem(this.getStorageKey(key), string);
98
- }
99
- getStorageKey(key) {
100
- var _a;
101
- const rawKey = `bp-chat-${key}`;
102
- if ((_a = this.encryptionKey) === null || _a === void 0 ? void 0 : _a.length) {
103
- return `${rawKey}-${(0, sha256_1.default)(`${this.clientId}-${this.encryptionKey}`).toString()}`;
104
- }
105
- else {
106
- return `${rawKey}-${this.clientId}`;
107
- }
108
- }
109
66
  }
110
67
  exports.default = BpSocket;
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ declare const _default: ({ fill }: {
3
+ fill?: string | undefined;
4
+ }) => JSX.Element;
5
+ export default _default;
@@ -0,0 +1,10 @@
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
+ exports.default = ({ fill = 'black' }) => (react_1.default.createElement("i", null,
8
+ react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", x: "0px", y: "0px", width: "16px", height: "16px", viewBox: "0 0 492 492", fill: `${fill}` },
9
+ react_1.default.createElement("g", null,
10
+ react_1.default.createElement("path", { d: "M300.188,246L484.14,62.04c5.06-5.064,7.852-11.82,7.86-19.024c0-7.208-2.792-13.972-7.86-19.028L468.02,7.872 c-5.068-5.076-11.824-7.856-19.036-7.856c-7.2,0-13.956,2.78-19.024,7.856L246.008,191.82L62.048,7.872 c-5.06-5.076-11.82-7.856-19.028-7.856c-7.2,0-13.96,2.78-19.02,7.856L7.872,23.988c-10.496,10.496-10.496,27.568,0,38.052 L191.828,246L7.872,429.952c-5.064,5.072-7.852,11.828-7.852,19.032c0,7.204,2.788,13.96,7.852,19.028l16.124,16.116 c5.06,5.072,11.824,7.856,19.02,7.856c7.208,0,13.968-2.784,19.028-7.856l183.96-183.952l183.952,183.952 c5.068,5.072,11.824,7.856,19.024,7.856h0.008c7.204,0,13.96-2.784,19.028-7.856l16.12-16.116 c5.06-5.064,7.852-11.824,7.852-19.028c0-7.204-2.792-13.96-7.852-19.028L300.188,246z" })))));
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ declare const _default: ({ fill }: {
3
+ fill?: string | undefined;
4
+ }) => JSX.Element;
5
+ export default _default;
@@ -0,0 +1,12 @@
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
+ exports.default = ({ fill = 'black' }) => (react_1.default.createElement("i", null,
8
+ react_1.default.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", width: "16px", height: "16px", viewBox: "0 0 475.085 475.085", fill: `${fill}` },
9
+ react_1.default.createElement("g", null,
10
+ react_1.default.createElement("g", null,
11
+ react_1.default.createElement("path", { d: "M237.541,328.897c25.128,0,46.632-8.946,64.523-26.83c17.888-17.884,26.833-39.399,26.833-64.525V91.365\n c0-25.126-8.938-46.632-26.833-64.525C284.173,8.951,262.669,0,237.541,0c-25.125,0-46.632,8.951-64.524,26.84\n c-17.893,17.89-26.838,39.399-26.838,64.525v146.177c0,25.125,8.949,46.641,26.838,64.525\n C190.906,319.951,212.416,328.897,237.541,328.897z" }),
12
+ react_1.default.createElement("path", { d: "M396.563,188.15c-3.606-3.617-7.898-5.426-12.847-5.426c-4.944,0-9.226,1.809-12.847,5.426\n c-3.613,3.616-5.421,7.898-5.421,12.845v36.547c0,35.214-12.518,65.333-37.548,90.362c-25.022,25.03-55.145,37.545-90.36,37.545\n c-35.214,0-65.334-12.515-90.365-37.545c-25.028-25.022-37.541-55.147-37.541-90.362v-36.547c0-4.947-1.809-9.229-5.424-12.845\n c-3.617-3.617-7.895-5.426-12.847-5.426c-4.952,0-9.235,1.809-12.85,5.426c-3.618,3.616-5.426,7.898-5.426,12.845v36.547\n c0,42.065,14.04,78.659,42.112,109.776c28.073,31.118,62.762,48.961,104.068,53.526v37.691h-73.089\n c-4.949,0-9.231,1.811-12.847,5.428c-3.617,3.614-5.426,7.898-5.426,12.847c0,4.941,1.809,9.233,5.426,12.847\n c3.616,3.614,7.898,5.428,12.847,5.428h182.719c4.948,0,9.236-1.813,12.847-5.428c3.621-3.613,5.431-7.905,5.431-12.847\n c0-4.948-1.81-9.232-5.431-12.847c-3.61-3.617-7.898-5.428-12.847-5.428h-73.08v-37.691\n c41.299-4.565,75.985-22.408,104.061-53.526c28.076-31.117,42.12-67.711,42.12-109.776v-36.547\n C401.998,196.049,400.185,191.77,396.563,188.15z" }))))));
package/dist/index.d.ts CHANGED
@@ -7,7 +7,7 @@ interface State {
7
7
  store: RootStore;
8
8
  }
9
9
  interface Props {
10
- config?: Config;
10
+ config: Config;
11
11
  fullscreen?: boolean;
12
12
  }
13
13
  export declare class ExposedWebChat extends React.Component<Props, State> {
package/dist/index.js CHANGED
@@ -21,6 +21,7 @@ const react_intl_1 = require("react-intl");
21
21
  const main_1 = __importDefault(require("./main"));
22
22
  const store_1 = require("./store");
23
23
  const translations_1 = require("./translations");
24
+ const storage_1 = __importDefault(require("./utils/storage"));
24
25
  (0, mobx_1.configure)({ enforceActions: 'observed' });
25
26
  const Embedded = (props) => new Wrapper(Object.assign(Object.assign({}, props), { fullscreen: false }));
26
27
  exports.Embedded = Embedded;
@@ -29,6 +30,12 @@ exports.Fullscreen = Fullscreen;
29
30
  class ExposedWebChat extends react_1.default.Component {
30
31
  constructor(props) {
31
32
  super(props);
33
+ const { clientId, encryptionKey, useSessionStorage } = props.config;
34
+ window.BP_STORAGE = new storage_1.default({
35
+ clientId,
36
+ encryptionKey,
37
+ useSessionStorage
38
+ });
32
39
  this.state = {
33
40
  store: new store_1.RootStore({ fullscreen: props.fullscreen }, props.config)
34
41
  };
package/dist/main.d.ts CHANGED
@@ -10,4 +10,4 @@ declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omi
10
10
  export default _default;
11
11
  declare type MainProps = {
12
12
  store: RootStore;
13
- } & WrappedComponentProps & Pick<StoreDef, 'config' | 'initializeChat' | 'botInfo' | 'fetchBotInfo' | 'sendMessage' | 'setUserId' | 'sendData' | 'intl' | 'isEmulator' | 'updateTyping' | 'setReference' | 'updateBotUILanguage' | 'hideChat' | 'showChat' | 'toggleBotInfo' | 'widgetTransition' | 'activeView' | 'isFullscreen' | 'unreadCount' | 'hasUnreadMessages' | 'showWidgetButton' | 'addEventToConversation' | 'clearMessages' | 'updateConfig' | 'mergeConfig' | 'isWebchatReady' | 'incrementUnread' | 'displayWidgetView' | 'resetUnread' | 'setLoadingCompleted' | 'dimensions' | 'updateLastMessage'>;
13
+ } & WrappedComponentProps & Pick<StoreDef, 'config' | 'initializeChat' | 'botInfo' | 'fetchBotInfo' | 'sendMessage' | 'setUserId' | 'sendData' | 'intl' | 'updateTyping' | 'updateBotUILanguage' | 'hideChat' | 'showChat' | 'toggleBotInfo' | 'widgetTransition' | 'activeView' | 'isFullscreen' | 'unreadCount' | 'hasUnreadMessages' | 'showWidgetButton' | 'addEventToConversation' | 'clearMessages' | 'updateConfig' | 'mergeConfig' | 'isWebchatReady' | 'incrementUnread' | 'displayWidgetView' | 'resetUnread' | 'setLoadingCompleted' | 'dimensions' | 'updateLastMessage'>;
package/dist/main.js CHANGED
@@ -52,9 +52,18 @@ class Web extends react_1.default.Component {
52
52
  super(props);
53
53
  this.hasBeenInitialized = false;
54
54
  this.isCurrentConversation = (event) => {
55
- var _a;
56
- return !((_a = this.props.config) === null || _a === void 0 ? void 0 : _a.conversationId) || this.props.config.conversationId === event.conversationId;
55
+ var _a, _b;
56
+ return !((_a = this.props.config) === null || _a === void 0 ? void 0 : _a.conversationId) || ((_b = this.props.config) === null || _b === void 0 ? void 0 : _b.conversationId) === event.conversationId;
57
57
  };
58
+ this.handleKeyDown = (e) => __awaiter(this, void 0, void 0, function* () {
59
+ var _a;
60
+ if (!((_a = this.props.config) === null || _a === void 0 ? void 0 : _a.closeOnEscape)) {
61
+ return;
62
+ }
63
+ if (e.key === 'Escape') {
64
+ this.props.hideChat();
65
+ }
66
+ });
58
67
  this.handleIframeApi = ({ data: { action, payload } }) => __awaiter(this, void 0, void 0, function* () {
59
68
  if (action === 'configure') {
60
69
  this.props.updateConfig(Object.assign({}, constants_1.default.DEFAULT_CONFIG, payload));
@@ -65,9 +74,6 @@ class Web extends react_1.default.Component {
65
74
  else if (action === 'sendPayload') {
66
75
  yield this.props.sendData(payload);
67
76
  }
68
- else if (action === 'change-user-id') {
69
- this.props.store.setUserId(payload);
70
- }
71
77
  else if (action === 'event') {
72
78
  const { type, text } = payload;
73
79
  if (type === 'show') {
@@ -103,12 +109,12 @@ class Web extends react_1.default.Component {
103
109
  }
104
110
  };
105
111
  this.handleNewMessage = (event) => __awaiter(this, void 0, void 0, function* () {
106
- var _a;
112
+ var _b;
107
113
  if (event.authorId === undefined) {
108
114
  const value = (event.payload.type === 'typing' ? event.payload.value : undefined) || exports.DEFAULT_TYPING_DELAY;
109
115
  yield this.handleTyping(Object.assign(Object.assign({}, event), { timeInMs: value }));
110
116
  }
111
- if (((_a = event.payload) === null || _a === void 0 ? void 0 : _a.type) === 'visit') {
117
+ if (((_b = event.payload) === null || _b === void 0 ? void 0 : _b.type) === 'visit') {
112
118
  // don't do anything, it's the system message
113
119
  return;
114
120
  }
@@ -120,15 +126,11 @@ class Web extends react_1.default.Component {
120
126
  this.props.updateLastMessage(event.conversationId, event);
121
127
  yield this.props.addEventToConversation(event);
122
128
  // there's no focus on the actual conversation
123
- if ((document.hasFocus && !document.hasFocus()) || this.props.activeView !== 'side') {
129
+ if (!document.hasFocus() || this.props.activeView !== 'side') {
124
130
  yield this.playSound();
125
131
  this.props.incrementUnread();
126
132
  }
127
133
  this.handleResetUnreadCount();
128
- if (!['session_reset'].includes(event.payload.type) && event.id !== this.lastMessageId) {
129
- this.lastMessageId = event.id;
130
- yield this.props.store.loadEventInDebugger(event.id);
131
- }
132
134
  });
133
135
  this.handleTyping = (event) => __awaiter(this, void 0, void 0, function* () {
134
136
  if (!this.isCurrentConversation(event)) {
@@ -158,8 +160,7 @@ class Web extends react_1.default.Component {
158
160
  yield this.audio.play();
159
161
  }), constants_1.default.MIN_TIME_BETWEEN_SOUNDS);
160
162
  this.handleResetUnreadCount = () => {
161
- var _a;
162
- if (((_a = document.hasFocus) === null || _a === void 0 ? void 0 : _a.call(document)) && this.props.activeView === 'side') {
163
+ if (document.hasFocus() && this.props.activeView === 'side') {
163
164
  this.props.resetUnread();
164
165
  }
165
166
  };
@@ -172,18 +173,7 @@ class Web extends react_1.default.Component {
172
173
  this.props.store.setIntlProvider(this.props.intl);
173
174
  window.store = this.props.store;
174
175
  window.addEventListener('message', this.handleIframeApi);
175
- window.addEventListener('keydown', (e) => {
176
- if (!this.props.config.closeOnEscape) {
177
- return;
178
- }
179
- if (e.key === 'Escape') {
180
- this.props.hideChat();
181
- // TODO: what to do with emulator mode?
182
- if (this.props.config.isEmulator) {
183
- window.parent.document.getElementById('mainLayout').focus();
184
- }
185
- }
186
- });
176
+ window.addEventListener('keydown', this.handleKeyDown);
187
177
  yield this.load();
188
178
  yield this.initializeIfChatDisplayed();
189
179
  this.props.setLoadingCompleted();
@@ -191,11 +181,11 @@ class Web extends react_1.default.Component {
191
181
  }
192
182
  componentWillUnmount() {
193
183
  window.removeEventListener('message', this.handleIframeApi);
184
+ window.removeEventListener('keydown', this.handleKeyDown);
194
185
  }
195
186
  componentDidUpdate() {
196
187
  if (this.config) {
197
- // eslint-disable-next-line @typescript-eslint/no-floating-promises
198
- this.initializeIfChatDisplayed();
188
+ void this.initializeIfChatDisplayed();
199
189
  }
200
190
  }
201
191
  initializeIfChatDisplayed() {
@@ -227,9 +217,6 @@ class Web extends react_1.default.Component {
227
217
  if (this.config.containerWidth) {
228
218
  this.postMessageToParent('setWidth', this.config.containerWidth);
229
219
  }
230
- if (this.config.reference) {
231
- yield this.props.setReference();
232
- }
233
220
  // TODO: replace this by frontend configuration
234
221
  // await this.props.fetchBotInfo!()
235
222
  if (!this.isLazySocket()) {
@@ -251,10 +238,9 @@ class Web extends react_1.default.Component {
251
238
  return options;
252
239
  }
253
240
  };
254
- const { options, ref } = query_string_1.default.parse(location.search);
241
+ const { options } = query_string_1.default.parse(location.search);
255
242
  const { config } = JSON.parse(decodeIfRequired(options || '{}'));
256
243
  const userConfig = Object.assign({}, constants_1.default.DEFAULT_CONFIG, this.props.config, config);
257
- userConfig.reference = (config === null || config === void 0 ? void 0 : config.ref) || ref;
258
244
  this.props.updateConfig(userConfig);
259
245
  return userConfig;
260
246
  }
@@ -324,8 +310,7 @@ class Web extends react_1.default.Component {
324
310
  this.props.hasUnreadMessages && react_1.default.createElement("span", { className: 'bpw-floating-button-unread' }, this.props.unreadCount)));
325
311
  }
326
312
  applyAndRenderStyle() {
327
- const emulatorClass = this.props.isEmulator ? ' emulator' : '';
328
- const parentClass = (0, classnames_1.default)(`bp-widget-web bp-widget-${this.props.activeView}${emulatorClass}`, {
313
+ const parentClass = (0, classnames_1.default)(`bp-widget-web bp-widget-${this.props.activeView}`, {
329
314
  'bp-widget-hidden': !this.props.showWidgetButton && this.props.displayWidgetView,
330
315
  [this.props.config.className]: !!this.props.config.className
331
316
  });
@@ -367,8 +352,6 @@ exports.default = (0, mobx_react_1.inject)(({ store }) => ({
367
352
  setUserId: store.setUserId,
368
353
  updateTyping: store.updateTyping,
369
354
  sendMessage: store.sendMessage,
370
- setReference: store.setReference,
371
- isEmulator: store.isEmulator,
372
355
  updateBotUILanguage: store.updateBotUILanguage,
373
356
  isWebchatReady: store.view.isWebchatReady,
374
357
  showWidgetButton: store.view.showWidgetButton,
@@ -14,7 +14,7 @@ const takeRight_1 = __importDefault(require("lodash/takeRight"));
14
14
  const mobx_1 = require("mobx");
15
15
  const constants_1 = __importDefault(require("../core/constants"));
16
16
  const HISTORY_UP = 'ArrowUp';
17
- const SENT_HISTORY_KEY = `bp::${window.BOT_ID}::sentHistory`;
17
+ const SENT_HISTORY_KEY = 'sent-history';
18
18
  class ComposerStore {
19
19
  constructor(rootStore) {
20
20
  this.message = '';
@@ -23,9 +23,7 @@ class ComposerStore {
23
23
  this._sentHistory = [];
24
24
  this._sentHistoryIndex = 0;
25
25
  this.rootStore = rootStore;
26
- if (window.BP_STORAGE) {
27
- this._sentHistory = window.BP_STORAGE.get(SENT_HISTORY_KEY) || [];
28
- }
26
+ this._sentHistory = window.BP_STORAGE.get(SENT_HISTORY_KEY) || [];
29
27
  }
30
28
  get composerPlaceholder() {
31
29
  var _a;
@@ -35,12 +33,11 @@ class ComposerStore {
35
33
  this.message = msg;
36
34
  }
37
35
  addMessageToHistory(text) {
38
- var _a;
39
36
  if ((0, last_1.default)(this._sentHistory) !== text) {
40
37
  this._sentHistory.push(text);
41
38
  this._sentHistoryIndex = 0;
42
39
  if (this.rootStore.config.enablePersistHistory) {
43
- (_a = window.BP_STORAGE) === null || _a === void 0 ? void 0 : _a.set(SENT_HISTORY_KEY, (0, takeRight_1.default)(this._sentHistory, constants_1.default.SENT_HISTORY_SIZE));
40
+ window.BP_STORAGE.set(SENT_HISTORY_KEY, (0, takeRight_1.default)(this._sentHistory, constants_1.default.SENT_HISTORY_SIZE));
44
41
  }
45
42
  }
46
43
  }