@botpress/webchat 0.2.0 → 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.
- package/dist/components/Composer.d.ts +1 -1
- package/dist/components/Composer.js +12 -2
- package/dist/components/Container.d.ts +1 -1
- package/dist/components/Container.js +2 -23
- package/dist/components/ContextMenu.js +0 -9
- package/dist/components/ConversationList.js +1 -1
- package/dist/components/Header.d.ts +1 -1
- package/dist/components/Header.js +10 -27
- package/dist/components/VoiceRecorder.js +6 -2
- package/dist/components/common/{Avatar.d.ts → Avatar/index.d.ts} +0 -0
- package/dist/components/common/Avatar/index.js +13 -0
- package/dist/components/common/{BotInfo.d.ts → BotInfo/index.d.ts} +2 -2
- package/dist/components/common/BotInfo/index.js +112 -0
- package/dist/components/common/ConfirmDialog/index.d.ts +11 -0
- package/dist/components/common/ConfirmDialog/index.js +78 -0
- package/dist/components/common/Dialog/index.d.ts +17 -0
- package/dist/components/common/Dialog/index.js +57 -0
- package/dist/components/common/MoreOptions/index.d.ts +21 -0
- package/dist/components/common/MoreOptions/index.js +60 -0
- package/dist/components/common/Overlay/index.d.ts +7 -0
- package/dist/components/common/{Avatar.js → Overlay/index.js} +15 -8
- package/dist/components/common/ToolTip/index.d.ts +10 -0
- package/dist/components/common/ToolTip/index.js +163 -0
- package/dist/components/common/ToolTip/utils.d.ts +15 -0
- package/dist/components/common/ToolTip/utils.js +78 -0
- package/dist/components/messages/Message.js +1 -20
- package/dist/components/messages/MessageGroup.d.ts +1 -9
- package/dist/components/messages/MessageGroup.js +4 -39
- package/dist/components/messages/MessageList.d.ts +1 -1
- package/dist/components/messages/MessageList.js +1 -2
- package/dist/core/api.d.ts +4 -13
- package/dist/core/api.js +35 -127
- package/dist/core/socket.d.ts +0 -3
- package/dist/core/socket.js +2 -21
- package/dist/fonts/roboto.d.ts +4 -0
- package/dist/fonts/roboto.js +9 -0
- package/dist/icons/Cancel.d.ts +5 -0
- package/dist/icons/Cancel.js +10 -0
- package/dist/icons/Microphone.d.ts +5 -0
- package/dist/icons/Microphone.js +12 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +7 -0
- package/dist/main.d.ts +2 -1
- package/dist/main.js +50 -47
- package/dist/store/composer.js +3 -6
- package/dist/store/index.d.ts +7 -12
- package/dist/store/index.js +92 -97
- package/dist/store/view.d.ts +0 -2
- package/dist/store/view.js +0 -10
- package/dist/translations/index.d.ts +2 -1
- package/dist/translations/index.js +9 -4
- package/dist/typings.d.ts +9 -19
- package/dist/utils/storage.d.ts +17 -0
- package/dist/utils/storage.js +117 -0
- package/dist/utils.js +1 -1
- package/package.json +6 -2
- package/dist/components/Keyboard.d.ts +0 -22
- package/dist/components/Keyboard.js +0 -86
- package/dist/components/common/BotInfo.js +0 -110
package/dist/store/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="node" />
|
|
2
2
|
import { IntlShape } from 'react-intl';
|
|
3
3
|
import BpSocket from '../core/socket';
|
|
4
|
-
import { BotInfo, Config, CurrentConversation, EventFeedback, Message,
|
|
4
|
+
import { BotInfo, Config, CurrentConversation, EventFeedback, Message, QueuedMessage, RecentConversation, StudioConnector, uuid } from '../typings';
|
|
5
5
|
import ComposerStore from './composer';
|
|
6
6
|
import ViewStore from './view';
|
|
7
7
|
/** Includes the partial definitions of all classes */
|
|
@@ -12,7 +12,7 @@ declare class RootStore {
|
|
|
12
12
|
private _typingInterval;
|
|
13
13
|
private api;
|
|
14
14
|
conversations: RecentConversation[];
|
|
15
|
-
currentConversation
|
|
15
|
+
currentConversation?: CurrentConversation;
|
|
16
16
|
botInfo: BotInfo;
|
|
17
17
|
config: Config;
|
|
18
18
|
preferredLanguage: string;
|
|
@@ -20,35 +20,32 @@ declare class RootStore {
|
|
|
20
20
|
messageFeedbacks: EventFeedback[];
|
|
21
21
|
intl: IntlShape;
|
|
22
22
|
isBotTyping: import("mobx").IObservableValue<boolean>;
|
|
23
|
-
/** When a wrapper is defined, every messages are wrapped by the specified component */
|
|
24
|
-
messageWrapper: MessageWrapper | undefined;
|
|
25
23
|
botUILanguage: string;
|
|
26
24
|
delayedMessages: QueuedMessage[];
|
|
27
25
|
constructor(options: {
|
|
28
26
|
fullscreen: boolean;
|
|
29
|
-
}, config
|
|
27
|
+
}, config: Config);
|
|
30
28
|
setIntlProvider(provider: IntlShape): void;
|
|
31
29
|
setSocket(socket: BpSocket): void;
|
|
32
30
|
get isConversationStarted(): boolean;
|
|
33
31
|
get botName(): string;
|
|
34
|
-
get isEmulator(): boolean;
|
|
35
32
|
get hasBotInfoDescription(): boolean;
|
|
36
33
|
get botAvatarUrl(): string | undefined;
|
|
37
34
|
get rtl(): boolean;
|
|
38
35
|
get escapeHTML(): boolean;
|
|
39
36
|
get currentMessages(): Message[];
|
|
40
|
-
get currentConversationId(): uuid;
|
|
37
|
+
get currentConversationId(): uuid | undefined;
|
|
41
38
|
postMessage(name: string, payload?: any): void;
|
|
42
39
|
updateMessages(messages: Message[]): void;
|
|
40
|
+
updateLastMessage(conversationId: string, message?: Message): void;
|
|
43
41
|
clearMessages(): void;
|
|
44
42
|
deleteConversation(): Promise<void>;
|
|
45
|
-
loadEventInDebugger(messageId: uuid, isManual?: boolean): Promise<void>;
|
|
46
43
|
addEventToConversation(event: Message): Promise<void>;
|
|
47
44
|
updateTyping(event: Message): Promise<void>;
|
|
48
45
|
/** Loads the initial state, for the first time or when the user ID is changed. */
|
|
49
46
|
initializeChat(): Promise<void>;
|
|
50
47
|
fetchBotInfo(): Promise<void>;
|
|
51
|
-
|
|
48
|
+
fetchLanguage(): void;
|
|
52
49
|
/** Fetches the list of conversation, and update the corresponding config values */
|
|
53
50
|
fetchConversations(): Promise<void>;
|
|
54
51
|
/** Fetch the specified conversation ID, or try to fetch a valid one from the list */
|
|
@@ -59,7 +56,6 @@ declare class RootStore {
|
|
|
59
56
|
startConversation(): Promise<void>;
|
|
60
57
|
/** Creates a new conversation and switches to it */
|
|
61
58
|
createConversation(): Promise<uuid>;
|
|
62
|
-
setReference(): Promise<void>;
|
|
63
59
|
resetConversation(): void;
|
|
64
60
|
resetSession(): Promise<void>;
|
|
65
61
|
extractFeedback(messages: Message[]): Promise<void>;
|
|
@@ -78,8 +74,7 @@ declare class RootStore {
|
|
|
78
74
|
/** When this method is used, the user ID is changed in the configuration, then the socket is updated */
|
|
79
75
|
setUserId(userId: string): void;
|
|
80
76
|
publishConfigChanged(): void;
|
|
81
|
-
|
|
82
|
-
updatePreferredLanguage(lang: string): Promise<void>;
|
|
77
|
+
updatePreferredLanguage(lang: string): void;
|
|
83
78
|
/** Starts a timer to remove the typing animation when it's completed */
|
|
84
79
|
private _startTypingTimer;
|
|
85
80
|
private _expireTyping;
|
package/dist/store/index.js
CHANGED
|
@@ -22,24 +22,23 @@ exports.RootStore = void 0;
|
|
|
22
22
|
const is_before_1 = __importDefault(require("date-fns/is_before"));
|
|
23
23
|
const is_valid_1 = __importDefault(require("date-fns/is_valid"));
|
|
24
24
|
const merge_1 = __importDefault(require("lodash/merge"));
|
|
25
|
+
const orderBy_1 = __importDefault(require("lodash/orderBy"));
|
|
25
26
|
const mobx_1 = require("mobx");
|
|
26
27
|
const api_1 = __importDefault(require("../core/api"));
|
|
28
|
+
const main_1 = require("../main");
|
|
27
29
|
const translations_1 = require("../translations");
|
|
28
30
|
const utils_1 = require("../utils");
|
|
29
31
|
const composer_1 = __importDefault(require("./composer"));
|
|
30
32
|
const view_1 = __importDefault(require("./view"));
|
|
31
|
-
const chosenLocale = (0, translations_1.getUserLocale)();
|
|
32
33
|
class RootStore {
|
|
33
34
|
constructor(options, config) {
|
|
34
35
|
this.conversations = [];
|
|
35
36
|
this.isBotTyping = mobx_1.observable.box(false);
|
|
36
|
-
this.botUILanguage = chosenLocale;
|
|
37
37
|
this.delayedMessages = [];
|
|
38
38
|
this.composer = new composer_1.default(this);
|
|
39
39
|
this.view = new view_1.default(this, options.fullscreen);
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
40
|
+
this.updateConfig(config);
|
|
41
|
+
this.botUILanguage = (0, translations_1.getUserLocale)();
|
|
43
42
|
}
|
|
44
43
|
setIntlProvider(provider) {
|
|
45
44
|
this.intl = provider;
|
|
@@ -52,12 +51,8 @@ class RootStore {
|
|
|
52
51
|
return !!((_a = this.currentConversation) === null || _a === void 0 ? void 0 : _a.messages.length);
|
|
53
52
|
}
|
|
54
53
|
get botName() {
|
|
55
|
-
var _a, _b;
|
|
56
|
-
return ((_a = this.config) === null || _a === void 0 ? void 0 : _a.botName) || ((_b = this.botInfo) === null || _b === void 0 ? void 0 : _b.name) || 'Bot';
|
|
57
|
-
}
|
|
58
|
-
get isEmulator() {
|
|
59
54
|
var _a;
|
|
60
|
-
return ((_a = this.
|
|
55
|
+
return this.config.botName || ((_a = this.botInfo) === null || _a === void 0 ? void 0 : _a.name) || 'Bot';
|
|
61
56
|
}
|
|
62
57
|
get hasBotInfoDescription() {
|
|
63
58
|
var _a;
|
|
@@ -65,11 +60,7 @@ class RootStore {
|
|
|
65
60
|
}
|
|
66
61
|
get botAvatarUrl() {
|
|
67
62
|
var _a, _b, _c;
|
|
68
|
-
return ((
|
|
69
|
-
((_c = this.config) === null || _c === void 0 ? void 0 : _c.avatarUrl) ||
|
|
70
|
-
(this.config.isEmulator
|
|
71
|
-
? `${window.ROOT_PATH}/assets/modules/channel-web/images/emulator-default.svg`
|
|
72
|
-
: undefined));
|
|
63
|
+
return ((_b = (_a = this.botInfo) === null || _a === void 0 ? void 0 : _a.details) === null || _b === void 0 ? void 0 : _b.avatarUrl) || ((_c = this.config) === null || _c === void 0 ? void 0 : _c.avatarUrl) || undefined;
|
|
73
64
|
}
|
|
74
65
|
get rtl() {
|
|
75
66
|
return (0, utils_1.isRTLLocale)(this.preferredLanguage);
|
|
@@ -80,7 +71,7 @@ class RootStore {
|
|
|
80
71
|
}
|
|
81
72
|
get currentMessages() {
|
|
82
73
|
var _a;
|
|
83
|
-
return (_a = this.currentConversation) === null || _a === void 0 ? void 0 : _a.messages;
|
|
74
|
+
return ((_a = this.currentConversation) === null || _a === void 0 ? void 0 : _a.messages) || [];
|
|
84
75
|
}
|
|
85
76
|
get currentConversationId() {
|
|
86
77
|
var _a;
|
|
@@ -91,33 +82,40 @@ class RootStore {
|
|
|
91
82
|
window.parent.postMessage({ name, chatId, payload }, '*');
|
|
92
83
|
}
|
|
93
84
|
updateMessages(messages) {
|
|
94
|
-
this.currentConversation
|
|
85
|
+
if (this.currentConversation) {
|
|
86
|
+
this.currentConversation.messages = messages;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
updateLastMessage(conversationId, message) {
|
|
90
|
+
for (const conversation of this.conversations) {
|
|
91
|
+
if (conversation.id === conversationId) {
|
|
92
|
+
conversation.lastMessage = message;
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
95
96
|
}
|
|
96
97
|
clearMessages() {
|
|
97
|
-
this.currentConversation
|
|
98
|
+
if (this.currentConversation) {
|
|
99
|
+
this.currentConversation.messages = [];
|
|
100
|
+
}
|
|
98
101
|
}
|
|
99
102
|
deleteConversation() {
|
|
100
103
|
return __awaiter(this, void 0, void 0, function* () {
|
|
101
|
-
if (this.
|
|
102
|
-
yield this.api.
|
|
103
|
-
this.
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
if (!this.config.isEmulator || !messageId) {
|
|
110
|
-
return;
|
|
104
|
+
if (this.currentConversationId) {
|
|
105
|
+
yield this.api.deleteConversation(this.currentConversationId);
|
|
106
|
+
const index = this.conversations.findIndex((c) => c.id === this.currentConversationId);
|
|
107
|
+
if (index > -1) {
|
|
108
|
+
this.conversations.splice(index, 1);
|
|
109
|
+
}
|
|
110
|
+
this.resetConversation();
|
|
111
|
+
yield this.fetchConversation();
|
|
111
112
|
}
|
|
112
|
-
const messages = yield this.api.listByIncomingEvent(messageId);
|
|
113
|
-
this.view.setHighlightedMessages(messages);
|
|
114
|
-
window.parent.postMessage({ action: 'load-event', payload: { messageId, isManual } }, '*');
|
|
115
113
|
});
|
|
116
114
|
}
|
|
117
115
|
addEventToConversation(event) {
|
|
118
116
|
var _a;
|
|
119
117
|
return __awaiter(this, void 0, void 0, function* () {
|
|
120
|
-
if (this.isInitialized && this.currentConversationId !== event.conversationId) {
|
|
118
|
+
if (!this.currentConversation || (this.isInitialized && this.currentConversationId !== event.conversationId)) {
|
|
121
119
|
yield this.fetchConversations();
|
|
122
120
|
yield this.fetchConversation(event.conversationId);
|
|
123
121
|
return;
|
|
@@ -137,7 +135,7 @@ class RootStore {
|
|
|
137
135
|
}
|
|
138
136
|
updateTyping(event) {
|
|
139
137
|
return __awaiter(this, void 0, void 0, function* () {
|
|
140
|
-
if (this.isInitialized && this.currentConversationId !== event.conversationId) {
|
|
138
|
+
if (!this.currentConversation || (this.isInitialized && this.currentConversationId !== event.conversationId)) {
|
|
141
139
|
yield this.fetchConversations();
|
|
142
140
|
yield this.fetchConversation(event.conversationId);
|
|
143
141
|
return;
|
|
@@ -146,7 +144,7 @@ class RootStore {
|
|
|
146
144
|
if ((0, is_before_1.default)(start, this.currentConversation.typingUntil)) {
|
|
147
145
|
start = this.currentConversation.typingUntil;
|
|
148
146
|
}
|
|
149
|
-
this.currentConversation.typingUntil = new Date(+start + event.timeInMs);
|
|
147
|
+
this.currentConversation.typingUntil = new Date(+start + (event.timeInMs || main_1.DEFAULT_TYPING_DELAY));
|
|
150
148
|
this._startTypingTimer();
|
|
151
149
|
});
|
|
152
150
|
}
|
|
@@ -162,15 +160,21 @@ class RootStore {
|
|
|
162
160
|
});
|
|
163
161
|
}
|
|
164
162
|
catch (err) {
|
|
165
|
-
console.error('Error while fetching data, creating new
|
|
163
|
+
console.error('Error while fetching data, creating new conversation...', err);
|
|
166
164
|
yield this.createConversation();
|
|
167
165
|
}
|
|
168
|
-
|
|
166
|
+
this.fetchLanguage();
|
|
169
167
|
});
|
|
170
168
|
}
|
|
171
169
|
fetchBotInfo() {
|
|
172
170
|
return __awaiter(this, void 0, void 0, function* () {
|
|
173
|
-
|
|
171
|
+
if (!this.config.mediaFileServiceUrl) {
|
|
172
|
+
return;
|
|
173
|
+
}
|
|
174
|
+
const botInfo = yield this.api.fetchBotInfo(this.config.mediaFileServiceUrl);
|
|
175
|
+
if (!botInfo) {
|
|
176
|
+
return;
|
|
177
|
+
}
|
|
174
178
|
(0, mobx_1.runInAction)('-> setBotInfo', () => {
|
|
175
179
|
this.botInfo = botInfo;
|
|
176
180
|
});
|
|
@@ -180,16 +184,10 @@ class RootStore {
|
|
|
180
184
|
});
|
|
181
185
|
});
|
|
182
186
|
}
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
if (!preferences.language) {
|
|
188
|
-
return;
|
|
189
|
-
}
|
|
190
|
-
(0, mobx_1.runInAction)('-> setPreferredLanguage', () => {
|
|
191
|
-
this.updateBotUILanguage(preferences.language);
|
|
192
|
-
});
|
|
187
|
+
fetchLanguage() {
|
|
188
|
+
const language = (0, translations_1.getUserLocale)(this.config.locale);
|
|
189
|
+
(0, mobx_1.runInAction)('-> setPreferredLanguage', () => {
|
|
190
|
+
this.updateBotUILanguage(language);
|
|
193
191
|
});
|
|
194
192
|
}
|
|
195
193
|
/** Fetches the list of conversation, and update the corresponding config values */
|
|
@@ -261,24 +259,22 @@ class RootStore {
|
|
|
261
259
|
return newId;
|
|
262
260
|
});
|
|
263
261
|
}
|
|
264
|
-
setReference() {
|
|
265
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
266
|
-
return this.api.setReference(this.config.reference, this.currentConversationId);
|
|
267
|
-
});
|
|
268
|
-
}
|
|
269
262
|
resetConversation() {
|
|
270
263
|
this.currentConversation = undefined;
|
|
271
264
|
}
|
|
272
265
|
resetSession() {
|
|
273
266
|
return __awaiter(this, void 0, void 0, function* () {
|
|
274
|
-
this.
|
|
275
|
-
|
|
267
|
+
if (this.currentConversationId) {
|
|
268
|
+
this.composer.setLocked(false);
|
|
269
|
+
return this.api.resetSession(this.currentConversationId);
|
|
270
|
+
}
|
|
276
271
|
});
|
|
277
272
|
}
|
|
278
273
|
extractFeedback(messages) {
|
|
279
274
|
return __awaiter(this, void 0, void 0, function* () {
|
|
280
275
|
const feedbackMessageIds = messages.filter((x) => x.payload && x.payload.collectFeedback).map((x) => x.id);
|
|
281
|
-
|
|
276
|
+
// TODO: store feedback somewhere
|
|
277
|
+
const feedbackInfo = feedbackMessageIds.map((x) => ({ messageId: x, feedback: 1 }));
|
|
282
278
|
(0, mobx_1.runInAction)('-> setFeedbackInfo', () => {
|
|
283
279
|
this.messageFeedbacks = feedbackInfo;
|
|
284
280
|
});
|
|
@@ -292,40 +288,50 @@ class RootStore {
|
|
|
292
288
|
downloadConversation() {
|
|
293
289
|
return __awaiter(this, void 0, void 0, function* () {
|
|
294
290
|
try {
|
|
295
|
-
const
|
|
296
|
-
|
|
297
|
-
|
|
291
|
+
const formatDate = (date) => {
|
|
292
|
+
return new Date(date).toLocaleString();
|
|
293
|
+
};
|
|
294
|
+
const conversation = this.currentConversation;
|
|
295
|
+
if (!conversation) {
|
|
296
|
+
console.warn('Cannot download the current conversation as it is undefined.');
|
|
297
|
+
return;
|
|
298
|
+
}
|
|
299
|
+
let info = `Conversation Id: ${conversation.id}\nCreated on: ${formatDate(conversation.createdOn)}\nUser: ${conversation.userId}\n-----------------`;
|
|
300
|
+
for (const message of (0, orderBy_1.default)(conversation.messages, 'sentOn', 'desc')) {
|
|
301
|
+
info += `\n[${formatDate(message.sentOn)}] ${message.authorId ? 'User' : this.config.botId || 'Bot'}: ${message.payload.text}`;
|
|
302
|
+
}
|
|
303
|
+
const blobFile = new Blob([info]);
|
|
304
|
+
(0, utils_1.downloadFile)(`conversation-${conversation.id}`, blobFile);
|
|
298
305
|
}
|
|
299
306
|
catch (err) {
|
|
300
|
-
console.error('Error trying to download conversation');
|
|
307
|
+
console.error('Error trying to download conversation', err);
|
|
301
308
|
}
|
|
302
309
|
});
|
|
303
310
|
}
|
|
304
311
|
/** Sends an event or a message, depending on how the backend manages those types */
|
|
305
312
|
sendData(data) {
|
|
306
313
|
return __awaiter(this, void 0, void 0, function* () {
|
|
307
|
-
if (!this.isInitialized) {
|
|
314
|
+
if (!this.isInitialized || !this.currentConversationId) {
|
|
308
315
|
console.warn('[webchat] Cannot send data until the webchat is ready');
|
|
309
316
|
return;
|
|
310
317
|
}
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
if (!constants.MESSAGE_TYPES.includes(data.type)) {
|
|
314
|
-
return this.api.sendEvent(data, this.currentConversationId)
|
|
315
|
-
}
|
|
316
|
-
*/
|
|
317
|
-
yield this.api.sendMessage(data, this.currentConversationId);
|
|
318
|
+
const message = yield this.api.sendMessage(data, this.currentConversationId);
|
|
319
|
+
this.updateLastMessage(this.currentConversationId, message);
|
|
318
320
|
});
|
|
319
321
|
}
|
|
320
322
|
uploadFile(title, payload, file) {
|
|
321
323
|
return __awaiter(this, void 0, void 0, function* () {
|
|
322
|
-
|
|
324
|
+
if (this.currentConversationId) {
|
|
325
|
+
yield this.api.uploadFile(file, payload, this.currentConversationId);
|
|
326
|
+
}
|
|
323
327
|
});
|
|
324
328
|
}
|
|
325
329
|
/** Sends a message of type voice */
|
|
326
330
|
sendVoiceMessage(voice, ext) {
|
|
327
331
|
return __awaiter(this, void 0, void 0, function* () {
|
|
328
|
-
|
|
332
|
+
if (this.currentConversationId) {
|
|
333
|
+
return this.api.sendVoiceMessage(voice, ext, this.currentConversationId);
|
|
334
|
+
}
|
|
329
335
|
});
|
|
330
336
|
}
|
|
331
337
|
/** Use this method to replace a value or add a new config */
|
|
@@ -339,6 +345,7 @@ class RootStore {
|
|
|
339
345
|
this._applyConfig();
|
|
340
346
|
}
|
|
341
347
|
_applyConfig() {
|
|
348
|
+
window.BP_STORAGE.config = this.config;
|
|
342
349
|
this.config.layoutWidth && this.view.setLayoutWidth(this.config.layoutWidth);
|
|
343
350
|
this.config.containerWidth && this.view.setContainerWidth(this.config.containerWidth);
|
|
344
351
|
this.view.disableAnimations = this.config.disableAnimations;
|
|
@@ -352,7 +359,7 @@ class RootStore {
|
|
|
352
359
|
else if (window.USE_SESSION_STORAGE !== this.config.useSessionStorage) {
|
|
353
360
|
console.warn('[WebChat] "useSessionStorage" value cannot be altered once the webchat is initialized');
|
|
354
361
|
}
|
|
355
|
-
const locale =
|
|
362
|
+
const locale = (0, translations_1.getUserLocale)(this.config.locale);
|
|
356
363
|
this.updateBotUILanguage(locale);
|
|
357
364
|
document.documentElement.setAttribute('lang', locale);
|
|
358
365
|
this.publishConfigChanged();
|
|
@@ -367,14 +374,9 @@ class RootStore {
|
|
|
367
374
|
publishConfigChanged() {
|
|
368
375
|
this.postMessage('configChanged', JSON.stringify(this.config, undefined, 2));
|
|
369
376
|
}
|
|
370
|
-
setMessageWrapper(messageWrapper) {
|
|
371
|
-
this.messageWrapper = messageWrapper;
|
|
372
|
-
}
|
|
373
377
|
updatePreferredLanguage(lang) {
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
yield this.api.updateUserPreferredLanguage(lang);
|
|
377
|
-
});
|
|
378
|
+
this.preferredLanguage = lang;
|
|
379
|
+
(0, translations_1.setUserLocale)(lang);
|
|
378
380
|
}
|
|
379
381
|
/** Starts a timer to remove the typing animation when it's completed */
|
|
380
382
|
_startTypingTimer() {
|
|
@@ -383,7 +385,8 @@ class RootStore {
|
|
|
383
385
|
}
|
|
384
386
|
this.isBotTyping.set(true);
|
|
385
387
|
this._typingInterval = setInterval(() => {
|
|
386
|
-
|
|
388
|
+
var _a;
|
|
389
|
+
const typeUntil = new Date((_a = this.currentConversation) === null || _a === void 0 ? void 0 : _a.typingUntil);
|
|
387
390
|
if (!typeUntil || !(0, is_valid_1.default)(typeUntil) || (0, is_before_1.default)(typeUntil, new Date())) {
|
|
388
391
|
this._expireTyping();
|
|
389
392
|
}
|
|
@@ -395,20 +398,24 @@ class RootStore {
|
|
|
395
398
|
_expireTyping() {
|
|
396
399
|
this.emptyDelayedMessagesQueue(true);
|
|
397
400
|
this.isBotTyping.set(false);
|
|
398
|
-
this.currentConversation
|
|
401
|
+
if (this.currentConversation) {
|
|
402
|
+
this.currentConversation.typingUntil = undefined;
|
|
403
|
+
}
|
|
399
404
|
clearInterval(this._typingInterval);
|
|
400
405
|
this._typingInterval = undefined;
|
|
401
406
|
}
|
|
402
407
|
updateBotUILanguage(lang) {
|
|
403
408
|
lang = (0, translations_1.getUserLocale)(lang); // Ensure language is supported
|
|
404
409
|
(0, mobx_1.runInAction)('-> setBotUILanguage', () => {
|
|
405
|
-
var _a;
|
|
406
410
|
this.botUILanguage = lang;
|
|
407
411
|
this.preferredLanguage = lang;
|
|
408
|
-
(
|
|
412
|
+
(0, translations_1.setUserLocale)(lang);
|
|
409
413
|
});
|
|
410
414
|
}
|
|
411
415
|
emptyDelayedMessagesQueue(removeAll) {
|
|
416
|
+
if (!this.currentConversation) {
|
|
417
|
+
return;
|
|
418
|
+
}
|
|
412
419
|
while (this.delayedMessages.length) {
|
|
413
420
|
const message = this.delayedMessages[0];
|
|
414
421
|
if (removeAll || (0, is_before_1.default)(message.showAt, new Date())) {
|
|
@@ -461,9 +468,6 @@ __decorate([
|
|
|
461
468
|
__decorate([
|
|
462
469
|
mobx_1.observable
|
|
463
470
|
], RootStore.prototype, "messageFeedbacks", void 0);
|
|
464
|
-
__decorate([
|
|
465
|
-
mobx_1.observable
|
|
466
|
-
], RootStore.prototype, "messageWrapper", void 0);
|
|
467
471
|
__decorate([
|
|
468
472
|
mobx_1.observable
|
|
469
473
|
], RootStore.prototype, "botUILanguage", void 0);
|
|
@@ -479,9 +483,6 @@ __decorate([
|
|
|
479
483
|
__decorate([
|
|
480
484
|
mobx_1.computed
|
|
481
485
|
], RootStore.prototype, "botName", null);
|
|
482
|
-
__decorate([
|
|
483
|
-
mobx_1.computed
|
|
484
|
-
], RootStore.prototype, "isEmulator", null);
|
|
485
486
|
__decorate([
|
|
486
487
|
mobx_1.computed
|
|
487
488
|
], RootStore.prototype, "hasBotInfoDescription", null);
|
|
@@ -508,13 +509,13 @@ __decorate([
|
|
|
508
509
|
], RootStore.prototype, "updateMessages", null);
|
|
509
510
|
__decorate([
|
|
510
511
|
mobx_1.action.bound
|
|
511
|
-
], RootStore.prototype, "
|
|
512
|
+
], RootStore.prototype, "updateLastMessage", null);
|
|
512
513
|
__decorate([
|
|
513
514
|
mobx_1.action.bound
|
|
514
|
-
], RootStore.prototype, "
|
|
515
|
+
], RootStore.prototype, "clearMessages", null);
|
|
515
516
|
__decorate([
|
|
516
517
|
mobx_1.action.bound
|
|
517
|
-
], RootStore.prototype, "
|
|
518
|
+
], RootStore.prototype, "deleteConversation", null);
|
|
518
519
|
__decorate([
|
|
519
520
|
mobx_1.action.bound
|
|
520
521
|
], RootStore.prototype, "addEventToConversation", null);
|
|
@@ -529,7 +530,7 @@ __decorate([
|
|
|
529
530
|
], RootStore.prototype, "fetchBotInfo", null);
|
|
530
531
|
__decorate([
|
|
531
532
|
mobx_1.action.bound
|
|
532
|
-
], RootStore.prototype, "
|
|
533
|
+
], RootStore.prototype, "fetchLanguage", null);
|
|
533
534
|
__decorate([
|
|
534
535
|
mobx_1.action.bound
|
|
535
536
|
], RootStore.prototype, "fetchConversations", null);
|
|
@@ -545,9 +546,6 @@ __decorate([
|
|
|
545
546
|
__decorate([
|
|
546
547
|
mobx_1.action.bound
|
|
547
548
|
], RootStore.prototype, "createConversation", null);
|
|
548
|
-
__decorate([
|
|
549
|
-
mobx_1.action.bound
|
|
550
|
-
], RootStore.prototype, "setReference", null);
|
|
551
549
|
__decorate([
|
|
552
550
|
mobx_1.action.bound
|
|
553
551
|
], RootStore.prototype, "resetConversation", null);
|
|
@@ -584,9 +582,6 @@ __decorate([
|
|
|
584
582
|
__decorate([
|
|
585
583
|
mobx_1.action.bound
|
|
586
584
|
], RootStore.prototype, "publishConfigChanged", null);
|
|
587
|
-
__decorate([
|
|
588
|
-
mobx_1.action.bound
|
|
589
|
-
], RootStore.prototype, "setMessageWrapper", null);
|
|
590
585
|
__decorate([
|
|
591
586
|
mobx_1.action.bound
|
|
592
587
|
], RootStore.prototype, "updatePreferredLanguage", null);
|
package/dist/store/view.d.ts
CHANGED
|
@@ -17,7 +17,6 @@ declare class ViewStore {
|
|
|
17
17
|
customButtons: CustomButton[];
|
|
18
18
|
customActions: CustomAction[];
|
|
19
19
|
disableAnimations: boolean;
|
|
20
|
-
highlightedMessages: string[];
|
|
21
20
|
constructor(rootStore: RootStore, fullscreen: boolean);
|
|
22
21
|
get showConversationsButton(): boolean;
|
|
23
22
|
get showBotInfoButton(): boolean;
|
|
@@ -51,7 +50,6 @@ declare class ViewStore {
|
|
|
51
50
|
addCustomAction(newAction: CustomAction): void;
|
|
52
51
|
removeCustomAction(actionId: string): void;
|
|
53
52
|
addHeaderButton(newButton: CustomButton): void;
|
|
54
|
-
setHighlightedMessages(ids: string[]): void;
|
|
55
53
|
/** Updates one or multiple properties of a specific button */
|
|
56
54
|
updateHeaderButton(buttonId: string, newProps: Partial<CustomButton>): void;
|
|
57
55
|
removeHeaderButton(buttonId: string): void;
|
package/dist/store/view.js
CHANGED
|
@@ -26,7 +26,6 @@ class ViewStore {
|
|
|
26
26
|
this.customButtons = [];
|
|
27
27
|
this.customActions = [];
|
|
28
28
|
this.disableAnimations = false;
|
|
29
|
-
this.highlightedMessages = [];
|
|
30
29
|
this.rootStore = rootStore;
|
|
31
30
|
this.isFullscreen = fullscreen;
|
|
32
31
|
this.activeView = fullscreen ? 'side' : 'widget';
|
|
@@ -151,9 +150,6 @@ class ViewStore {
|
|
|
151
150
|
}
|
|
152
151
|
this.customButtons.push(newButton);
|
|
153
152
|
}
|
|
154
|
-
setHighlightedMessages(ids) {
|
|
155
|
-
this.highlightedMessages = ids;
|
|
156
|
-
}
|
|
157
153
|
/** Updates one or multiple properties of a specific button */
|
|
158
154
|
updateHeaderButton(buttonId, newProps) {
|
|
159
155
|
const button = this.customButtons.find((btn) => btn.id === buttonId);
|
|
@@ -260,9 +256,6 @@ __decorate([
|
|
|
260
256
|
__decorate([
|
|
261
257
|
mobx_1.observable
|
|
262
258
|
], ViewStore.prototype, "disableAnimations", void 0);
|
|
263
|
-
__decorate([
|
|
264
|
-
mobx_1.observable
|
|
265
|
-
], ViewStore.prototype, "highlightedMessages", void 0);
|
|
266
259
|
__decorate([
|
|
267
260
|
mobx_1.computed
|
|
268
261
|
], ViewStore.prototype, "showConversationsButton", null);
|
|
@@ -353,9 +346,6 @@ __decorate([
|
|
|
353
346
|
__decorate([
|
|
354
347
|
mobx_1.action.bound
|
|
355
348
|
], ViewStore.prototype, "addHeaderButton", null);
|
|
356
|
-
__decorate([
|
|
357
|
-
mobx_1.action.bound
|
|
358
|
-
], ViewStore.prototype, "setHighlightedMessages", null);
|
|
359
349
|
__decorate([
|
|
360
350
|
mobx_1.action.bound
|
|
361
351
|
], ViewStore.prototype, "updateHeaderButton", null);
|
|
@@ -4,4 +4,5 @@ declare const translations: {
|
|
|
4
4
|
[lang: string]: any;
|
|
5
5
|
};
|
|
6
6
|
declare const getUserLocale: (manualLocale?: Locale) => string;
|
|
7
|
-
|
|
7
|
+
declare const setUserLocale: (locale: Locale) => void;
|
|
8
|
+
export { translations, DEFAULT_LOCALE as defaultLocale, getUserLocale, setUserLocale };
|
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.getUserLocale = exports.defaultLocale = exports.translations = void 0;
|
|
6
|
+
exports.setUserLocale = exports.getUserLocale = exports.defaultLocale = exports.translations = void 0;
|
|
7
7
|
require('@formatjs/intl-pluralrules/polyfill');
|
|
8
8
|
require('@formatjs/intl-pluralrules/locale-data/ar');
|
|
9
9
|
require('@formatjs/intl-pluralrules/locale-data/de');
|
|
@@ -25,19 +25,20 @@ const ru_json_1 = __importDefault(require("./ru.json"));
|
|
|
25
25
|
const uk_json_1 = __importDefault(require("./uk.json"));
|
|
26
26
|
const DEFAULT_LOCALE = 'en';
|
|
27
27
|
exports.defaultLocale = DEFAULT_LOCALE;
|
|
28
|
-
const
|
|
28
|
+
const USER_LANG_STORAGE_KEY = 'user-lang';
|
|
29
29
|
const translations = { en: en_json_1.default, fr: fr_json_1.default, pt: pt_json_1.default, es: es_json_1.default, ar: ar_json_1.default, ru: ru_json_1.default, uk: uk_json_1.default, de: de_json_1.default, it: it_json_1.default };
|
|
30
30
|
exports.translations = translations;
|
|
31
31
|
const cleanLanguageCode = (str) => str.split('-')[0];
|
|
32
32
|
const getNavigatorLanguage = () => cleanLanguageCode(navigator.language || navigator['userLanguage'] || '');
|
|
33
|
-
const getStorageLanguage = () =>
|
|
33
|
+
const getStorageLanguage = () => cleanLanguageCode(window.BP_STORAGE.get(USER_LANG_STORAGE_KEY) || '');
|
|
34
|
+
const setStorageLanguage = (locale) => window.BP_STORAGE.set(USER_LANG_STORAGE_KEY, locale);
|
|
34
35
|
// Desired precedence
|
|
35
36
|
// 1- manual locale = 'browser' : browser lang
|
|
36
37
|
// 2- manual locale is supported : manual lang
|
|
37
38
|
// 3- storage lang is supported : storage lang
|
|
38
39
|
// 4- browser lang is supported : browser lang
|
|
39
40
|
// 5- default lang
|
|
40
|
-
const getUserLocale = (manualLocale = '
|
|
41
|
+
const getUserLocale = (manualLocale = '') => {
|
|
41
42
|
const browserLocale = getNavigatorLanguage();
|
|
42
43
|
if (manualLocale === 'browser' && translations[browserLocale]) {
|
|
43
44
|
return browserLocale;
|
|
@@ -53,3 +54,7 @@ const getUserLocale = (manualLocale = 'browser') => {
|
|
|
53
54
|
return translations[browserLocale] ? browserLocale : DEFAULT_LOCALE;
|
|
54
55
|
};
|
|
55
56
|
exports.getUserLocale = getUserLocale;
|
|
57
|
+
const setUserLocale = (locale) => {
|
|
58
|
+
setStorageLanguage(locale);
|
|
59
|
+
};
|
|
60
|
+
exports.setUserLocale = setUserLocale;
|