ts-glitter 21.2.9 → 21.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lowcode/Entry.js +1 -1
- package/lowcode/Entry.ts +1 -1
- package/lowcode/backend-manager/bg-customer-message.js +660 -566
- package/lowcode/backend-manager/bg-customer-message.ts +1738 -1580
- package/lowcode/cms-plugin/customer-message-user.ts +2 -0
- package/lowcode/cms-plugin/shopping-setting-advance.js +1 -1
- package/lowcode/cms-plugin/shopping-setting-advance.ts +1 -1
- package/lowcode/jspage/function-page/tool-setting.js +0 -1
- package/lowcode/jspage/function-page/tool-setting.ts +1 -1
- package/package.json +1 -1
|
@@ -17,15 +17,21 @@ import { CustomerMessageUser } from '../cms-plugin/customer-message-user.js';
|
|
|
17
17
|
export class BgCustomerMessage {
|
|
18
18
|
static leftNav(gvc) {
|
|
19
19
|
const html = String.raw;
|
|
20
|
-
return html `
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
return html ` <div
|
|
21
|
+
id="BgCustomerMessageHover"
|
|
22
|
+
class="d-none position-fixed vw-100 vh-100"
|
|
23
|
+
style="background: rgba(0,0,0,0.5);z-index: 99999;"
|
|
24
|
+
onclick="${gvc.event(() => {
|
|
23
25
|
BgCustomerMessage.toggle(false, gvc);
|
|
24
|
-
})}"
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
})}"
|
|
27
|
+
></div>
|
|
28
|
+
<div
|
|
29
|
+
id="BgCustomerMessage"
|
|
30
|
+
class="position-fixed left-0 top-0 h-100 bg-white shadow-lg "
|
|
31
|
+
style="width:480px;max-width:100vw; z-index: 99999; right: -125%;background: rgba(0,0,0,0.5);"
|
|
32
|
+
>
|
|
33
|
+
${BgCustomerMessage.view(gvc)}
|
|
34
|
+
</div>`;
|
|
29
35
|
}
|
|
30
36
|
static view(gvc) {
|
|
31
37
|
return gvc.bindView(() => {
|
|
@@ -74,18 +80,16 @@ export class BgCustomerMessage {
|
|
|
74
80
|
bind: BgCustomerMessage.id,
|
|
75
81
|
view: () => {
|
|
76
82
|
if (!BgCustomerMessage.visible) {
|
|
77
|
-
return html `
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
</div>`;
|
|
83
|
+
return html ` <div class="d-flex align-items-center justify-content-center w-100 flex-column pt-3">
|
|
84
|
+
<div class="spinner-border" role="status">
|
|
85
|
+
<span class="sr-only"></span>
|
|
86
|
+
</div>
|
|
87
|
+
<span class="mt-2">載入中...</span>
|
|
88
|
+
</div>`;
|
|
84
89
|
}
|
|
85
90
|
if (vm.type === 'detail') {
|
|
86
|
-
return html `
|
|
87
|
-
|
|
88
|
-
${CustomerMessageUser.detail({
|
|
91
|
+
return html ` <div style="padding-bottom: 70px;">
|
|
92
|
+
${CustomerMessageUser.detail({
|
|
89
93
|
gvc: gvc,
|
|
90
94
|
chat: vm.chat_user,
|
|
91
95
|
user_id: 'manager',
|
|
@@ -102,7 +106,7 @@ export class BgCustomerMessage {
|
|
|
102
106
|
gvc.notifyDataChange(BgCustomerMessage.id);
|
|
103
107
|
},
|
|
104
108
|
})}
|
|
105
|
-
|
|
109
|
+
</div>`;
|
|
106
110
|
}
|
|
107
111
|
else {
|
|
108
112
|
let view = [
|
|
@@ -123,13 +127,19 @@ export class BgCustomerMessage {
|
|
|
123
127
|
gvc,
|
|
124
128
|
title: '提示',
|
|
125
129
|
innerHTML: () => {
|
|
126
|
-
return `<div class="w-100" style="white-space:normal;word-break: break-all;">${BgWidget.grayNote([
|
|
130
|
+
return `<div class="w-100" style="white-space:normal;word-break: break-all;">${BgWidget.grayNote([
|
|
131
|
+
`*單一後台即可管理各渠道訊息`,
|
|
132
|
+
`*前往第三方整合設定，設定Line與Facebook官方訊息串接`,
|
|
133
|
+
`*為確保訊息同步，請統一透過SHOPNEX後台發送訊息`,
|
|
134
|
+
]
|
|
135
|
+
.map(dd => {
|
|
127
136
|
return `<div style="letter-spacing: 1.2px;white-space:normal;word-break: break-all;">${dd}</div>`;
|
|
128
|
-
})
|
|
137
|
+
})
|
|
138
|
+
.join('<div class="my-1"></div>'))}</div>`;
|
|
129
139
|
},
|
|
130
|
-
width: 250
|
|
140
|
+
width: 250,
|
|
131
141
|
});
|
|
132
|
-
})
|
|
142
|
+
}),
|
|
133
143
|
})}
|
|
134
144
|
</div>
|
|
135
145
|
<div class="flex-fill" style="flex: 1;"></div>
|
|
@@ -139,9 +149,8 @@ export class BgCustomerMessage {
|
|
|
139
149
|
})}"></i>
|
|
140
150
|
</div>
|
|
141
151
|
</div>`,
|
|
142
|
-
html `
|
|
143
|
-
|
|
144
|
-
${(() => {
|
|
152
|
+
html ` <div class="d-flex align-items-center p-2 shadow border-bottom" style="gap:10px;">
|
|
153
|
+
${(() => {
|
|
145
154
|
const list = [
|
|
146
155
|
{
|
|
147
156
|
key: 'list',
|
|
@@ -153,32 +162,32 @@ export class BgCustomerMessage {
|
|
|
153
162
|
},
|
|
154
163
|
];
|
|
155
164
|
return list
|
|
156
|
-
.map(
|
|
165
|
+
.map(dd => {
|
|
157
166
|
if (BgCustomerMessage.vm.select_bt === dd.key) {
|
|
158
|
-
return html `
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
167
|
+
return html ` <div
|
|
168
|
+
class="d-flex align-items-center justify-content-center fw-bold px-3 py-2 fw-500 select-label-ai-message"
|
|
169
|
+
>
|
|
170
|
+
${dd.label}
|
|
171
|
+
</div>`;
|
|
162
172
|
}
|
|
163
173
|
else {
|
|
164
|
-
return html `
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
onclick="${gvc.event(() => {
|
|
174
|
+
return html ` <div
|
|
175
|
+
class="d-flex align-items-center justify-content-center fw-bold px-3 py-2 fw-500 select-btn-ai-message"
|
|
176
|
+
onclick="${gvc.event(() => {
|
|
168
177
|
BgCustomerMessage.vm.select_bt = dd.key;
|
|
169
178
|
gvc.notifyDataChange(BgCustomerMessage.id);
|
|
170
179
|
})}"
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
180
|
+
>
|
|
181
|
+
${dd.label}
|
|
182
|
+
</div>`;
|
|
174
183
|
}
|
|
175
184
|
})
|
|
176
185
|
.join('');
|
|
177
186
|
})()}
|
|
178
|
-
|
|
187
|
+
</div>`,
|
|
179
188
|
];
|
|
180
189
|
if (BgCustomerMessage.vm.select_bt === 'list') {
|
|
181
|
-
view.push(BgCustomerMessage.list(gvc,
|
|
190
|
+
view.push(BgCustomerMessage.list(gvc, user => {
|
|
182
191
|
vm.type = 'detail';
|
|
183
192
|
vm.chat_user = user;
|
|
184
193
|
gvc.notifyDataChange(BgCustomerMessage.id);
|
|
@@ -198,12 +207,14 @@ export class BgCustomerMessage {
|
|
|
198
207
|
}
|
|
199
208
|
const dialog = new ShareDialog(gvc.glitter);
|
|
200
209
|
resolve(html `
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
210
|
+
<div
|
|
211
|
+
class="position-relative bgf6 d-flex align-items-center justify-content-between m-n2 p-2 border-bottom shadow"
|
|
212
|
+
>
|
|
213
|
+
<span class="fs-6 fw-bold " style="color:black;">自動問答</span>
|
|
214
|
+
<button
|
|
215
|
+
class="btn btn-primary-c "
|
|
216
|
+
style="height: 28px;width:40px;font-size:14px;"
|
|
217
|
+
onclick="${gvc.event(() => {
|
|
207
218
|
dialog.dataLoading({ visible: true });
|
|
208
219
|
ApiUser.setPublicConfig({
|
|
209
220
|
key: `robot_auto_reply`,
|
|
@@ -214,12 +225,12 @@ export class BgCustomerMessage {
|
|
|
214
225
|
dialog.successMessage({ text: '設定成功' });
|
|
215
226
|
});
|
|
216
227
|
})}"
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
228
|
+
>
|
|
229
|
+
儲存
|
|
230
|
+
</button>
|
|
231
|
+
</div>
|
|
232
|
+
<div style="margin-top: -30px;">
|
|
233
|
+
${FormWidget.editorView({
|
|
223
234
|
gvc: gvc,
|
|
224
235
|
array: [
|
|
225
236
|
{
|
|
@@ -287,16 +298,16 @@ export class BgCustomerMessage {
|
|
|
287
298
|
],
|
|
288
299
|
},
|
|
289
300
|
],
|
|
290
|
-
refresh: () => {
|
|
291
|
-
},
|
|
301
|
+
refresh: () => { },
|
|
292
302
|
formData: keyData,
|
|
293
303
|
})}
|
|
294
|
-
|
|
295
|
-
|
|
304
|
+
</div>
|
|
305
|
+
`);
|
|
296
306
|
}));
|
|
297
307
|
},
|
|
298
308
|
divCreate: {
|
|
299
|
-
class: `p-2`,
|
|
309
|
+
class: `p-2`,
|
|
310
|
+
style: ``,
|
|
300
311
|
},
|
|
301
312
|
};
|
|
302
313
|
}));
|
|
@@ -315,9 +326,9 @@ export class BgCustomerMessage {
|
|
|
315
326
|
const vO = {
|
|
316
327
|
id: gvc.glitter.getUUID(),
|
|
317
328
|
loading: false,
|
|
318
|
-
data: {}
|
|
329
|
+
data: {},
|
|
319
330
|
};
|
|
320
|
-
const keyData =
|
|
331
|
+
const keyData = ApiUser.getPublicConfig(`message_setting`, 'manager').then(res => {
|
|
321
332
|
vO.data = res.response.value;
|
|
322
333
|
gvc.notifyDataChange(vO.id);
|
|
323
334
|
});
|
|
@@ -353,15 +364,16 @@ export class BgCustomerMessage {
|
|
|
353
364
|
});
|
|
354
365
|
}
|
|
355
366
|
const view = [
|
|
356
|
-
html `
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
367
|
+
html ` <div
|
|
368
|
+
class="position-relative bgf6 d-flex align-items-center justify-content-between m-n2 p-2 border-bottom shadow"
|
|
369
|
+
>
|
|
370
|
+
<span class="fs-6 fw-bold " style="color:black;">功能設定</span>
|
|
371
|
+
${BgWidget.darkButton('儲存', gvc.event(() => {
|
|
360
372
|
save();
|
|
361
373
|
}))}
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
374
|
+
</div>
|
|
375
|
+
<div style="margin-top: 10px;" class="p-2">
|
|
376
|
+
${[
|
|
365
377
|
...(() => {
|
|
366
378
|
if (keyData.toggle) {
|
|
367
379
|
return [
|
|
@@ -373,272 +385,302 @@ export class BgCustomerMessage {
|
|
|
373
385
|
bind: cid,
|
|
374
386
|
view: () => {
|
|
375
387
|
return html `
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
</div>
|
|
381
|
-
<div class="d-flex">
|
|
382
|
-
${BgWidget.switchButton(gvc, keyData.ai_toggle, (bool) => {
|
|
388
|
+
<div class="d-flex flex-column" style="gap:5px;">
|
|
389
|
+
<div class="tx_normal fw-normal" style="">AI客服機器人</div>
|
|
390
|
+
<div class="d-flex">
|
|
391
|
+
${BgWidget.switchButton(gvc, keyData.ai_toggle, bool => {
|
|
383
392
|
keyData.ai_toggle = bool;
|
|
384
393
|
gvc.notifyDataChange(cid);
|
|
385
394
|
})}
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
395
|
+
${keyData.ai_toggle ? `啟用` : `關閉`}
|
|
396
|
+
</div>
|
|
397
|
+
${keyData.ai_toggle
|
|
398
|
+
? html ` <div class="mt-2 d-flex align-items-center" style="gap:10px;">
|
|
399
|
+
${BgWidget.grayButton('AI 問答設定', gvc.event(() => __awaiter(this, void 0, void 0, function* () {
|
|
400
|
+
let keyData = (yield ApiUser.getPublicConfig(`robot_ai_reply`, 'manager'))
|
|
401
|
+
.response.value || {};
|
|
402
|
+
BgWidget.settingDialog({
|
|
403
|
+
gvc: gvc,
|
|
404
|
+
title: 'AI問答設定',
|
|
405
|
+
innerHTML: gvc => {
|
|
406
|
+
return gvc.bindView(() => {
|
|
407
|
+
const id = gvc.glitter.getUUID();
|
|
408
|
+
const html = String.raw;
|
|
409
|
+
return {
|
|
410
|
+
bind: id,
|
|
411
|
+
view: () => {
|
|
412
|
+
var _a;
|
|
413
|
+
if (Array.isArray(keyData)) {
|
|
414
|
+
keyData = {};
|
|
415
|
+
}
|
|
416
|
+
keyData.question = (_a = keyData.question) !== null && _a !== void 0 ? _a : [];
|
|
417
|
+
const parId = gvc.glitter.getUUID();
|
|
418
|
+
const id = gvc.glitter.getUUID();
|
|
419
|
+
function refresh() {
|
|
420
|
+
gvc.notifyDataChange(id);
|
|
421
|
+
}
|
|
422
|
+
return html `
|
|
423
|
+
${BgWidget.alertInfo('', [
|
|
424
|
+
`<span class="fw-500 fs-6">＊當AI判斷，客戶提出的問題與你設定的問題有關聯的話，將會直接回答你設定的回覆內容。</span>`,
|
|
425
|
+
`<span class="fw-500 fs-6">＊建議設定多個問答項目，來提升機器人客服的妥善率。</span>`,
|
|
426
|
+
], {
|
|
427
|
+
class: 'p-2',
|
|
428
|
+
style: ``,
|
|
429
|
+
})}
|
|
430
|
+
<div style="" class="p-2">
|
|
431
|
+
${gvc.bindView(() => {
|
|
432
|
+
return {
|
|
433
|
+
bind: id,
|
|
434
|
+
view: () => {
|
|
435
|
+
return (keyData.question || [])
|
|
436
|
+
.map((d2, index) => {
|
|
437
|
+
return html ` <li
|
|
438
|
+
onclick="${gvc.event(() => {
|
|
439
|
+
const copy = JSON.parse(JSON.stringify(d2));
|
|
440
|
+
BgWidget.settingDialog({
|
|
441
|
+
gvc: gvc,
|
|
442
|
+
title: '設定問答',
|
|
443
|
+
innerHTML: gvc => {
|
|
444
|
+
return [
|
|
445
|
+
BgWidget.editeInput({
|
|
446
|
+
gvc: gvc,
|
|
447
|
+
title: '問題',
|
|
448
|
+
placeHolder: `請輸入問題`,
|
|
449
|
+
default: copy.ask,
|
|
450
|
+
callback: text => {
|
|
451
|
+
copy.ask = text;
|
|
452
|
+
},
|
|
453
|
+
}),
|
|
454
|
+
BgWidget.textArea({
|
|
455
|
+
gvc: gvc,
|
|
456
|
+
title: '回答',
|
|
457
|
+
placeHolder: `請輸入回答`,
|
|
458
|
+
default: copy.response,
|
|
459
|
+
callback: text => {
|
|
460
|
+
copy.response = text;
|
|
461
|
+
},
|
|
462
|
+
}),
|
|
463
|
+
]
|
|
464
|
+
.map(dd => {
|
|
465
|
+
return `<div>${dd}</div>`;
|
|
466
|
+
})
|
|
467
|
+
.join('');
|
|
468
|
+
},
|
|
469
|
+
footer_html: gvc => {
|
|
470
|
+
return [
|
|
471
|
+
BgWidget.cancel(gvc.event(() => {
|
|
472
|
+
gvc.closeDialog();
|
|
473
|
+
})),
|
|
474
|
+
BgWidget.save(gvc.event(() => {
|
|
475
|
+
refresh();
|
|
476
|
+
gvc.closeDialog();
|
|
477
|
+
})),
|
|
478
|
+
].join(``);
|
|
479
|
+
},
|
|
480
|
+
});
|
|
481
|
+
})}"
|
|
482
|
+
>
|
|
483
|
+
<div
|
|
484
|
+
class="w-100 fw-500 d-flex align-items-center fs-6 hoverBtn h_item rounded px-2 hoverF2 mb-1 subComponentGuide"
|
|
485
|
+
style="gap:5px;color:#393939;"
|
|
486
|
+
>
|
|
487
|
+
<div class=" p-1 dragItem ">
|
|
488
|
+
<i
|
|
489
|
+
class="fa-solid fa-grip-dots-vertical d-flex align-items-center justify-content-center "
|
|
490
|
+
style="width:15px;height:15px;"
|
|
491
|
+
aria-hidden="true"
|
|
492
|
+
></i>
|
|
493
|
+
</div>
|
|
494
|
+
<span
|
|
495
|
+
style="max-width:calc(100% - 60px);text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"
|
|
496
|
+
>${d2.ask}</span
|
|
497
|
+
>
|
|
498
|
+
<div class="flex-fill"></div>
|
|
499
|
+
<div
|
|
500
|
+
class="hoverBtn p-1 child"
|
|
501
|
+
onclick="${gvc.event((e, event) => {
|
|
502
|
+
event.stopPropagation();
|
|
503
|
+
event.preventDefault();
|
|
504
|
+
dialog.checkYesOrNot({
|
|
505
|
+
text: '是否確認移除問答?',
|
|
506
|
+
callback: response => {
|
|
507
|
+
if (response) {
|
|
508
|
+
keyData.question.splice(index, 1);
|
|
509
|
+
gvc.notifyDataChange(id);
|
|
510
|
+
}
|
|
511
|
+
},
|
|
512
|
+
});
|
|
513
|
+
})}"
|
|
514
|
+
>
|
|
515
|
+
<i
|
|
516
|
+
class="fa-regular fa-trash d-flex align-items-center justify-content-center "
|
|
517
|
+
aria-hidden="true"
|
|
518
|
+
></i>
|
|
519
|
+
</div>
|
|
520
|
+
</div>
|
|
521
|
+
</li>`;
|
|
522
|
+
})
|
|
523
|
+
.join('');
|
|
524
|
+
},
|
|
525
|
+
divCreate: {
|
|
526
|
+
class: `mx-n2`,
|
|
527
|
+
elem: 'ul',
|
|
528
|
+
option: [
|
|
529
|
+
{
|
|
530
|
+
key: 'id',
|
|
531
|
+
value: parId,
|
|
532
|
+
},
|
|
533
|
+
],
|
|
534
|
+
},
|
|
535
|
+
onCreate: () => {
|
|
536
|
+
gvc.glitter.addMtScript([
|
|
537
|
+
{
|
|
538
|
+
src: `https://raw.githack.com/SortableJS/Sortable/master/Sortable.js`,
|
|
539
|
+
},
|
|
540
|
+
], () => {
|
|
541
|
+
const interval = setInterval(() => {
|
|
542
|
+
if (window.Sortable) {
|
|
543
|
+
try {
|
|
544
|
+
gvc.addStyle(`
|
|
517
545
|
ul {
|
|
518
546
|
list-style: none;
|
|
519
547
|
padding: 0;
|
|
520
548
|
}
|
|
521
549
|
`);
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
550
|
+
function swapArr(arr, index1, index2) {
|
|
551
|
+
const data = arr[index1];
|
|
552
|
+
arr.splice(index1, 1);
|
|
553
|
+
arr.splice(index2, 0, data);
|
|
554
|
+
}
|
|
555
|
+
let startIndex = 0;
|
|
556
|
+
Sortable.create(gvc.glitter.document.getElementById(parId), {
|
|
557
|
+
handle: '.dragItem',
|
|
558
|
+
group: gvc.glitter.getUUID(),
|
|
559
|
+
animation: 100,
|
|
560
|
+
onChange: function (evt) {
|
|
561
|
+
swapArr(keyData.question, startIndex, evt.newIndex);
|
|
562
|
+
const newIndex = evt.newIndex;
|
|
563
|
+
startIndex = newIndex;
|
|
564
|
+
},
|
|
565
|
+
onEnd: (evt) => { },
|
|
566
|
+
onStart: function (evt) {
|
|
567
|
+
startIndex = evt.oldIndex;
|
|
568
|
+
},
|
|
569
|
+
});
|
|
526
570
|
}
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
handle: '.dragItem',
|
|
530
|
-
group: gvc.glitter.getUUID(),
|
|
531
|
-
animation: 100,
|
|
532
|
-
onChange: function (evt) {
|
|
533
|
-
swapArr(keyData.question, startIndex, evt.newIndex);
|
|
534
|
-
const newIndex = evt.newIndex;
|
|
535
|
-
startIndex = newIndex;
|
|
536
|
-
},
|
|
537
|
-
onEnd: (evt) => {
|
|
538
|
-
},
|
|
539
|
-
onStart: function (evt) {
|
|
540
|
-
startIndex = evt.oldIndex;
|
|
541
|
-
},
|
|
542
|
-
});
|
|
571
|
+
catch (e) { }
|
|
572
|
+
clearInterval(interval);
|
|
543
573
|
}
|
|
544
|
-
|
|
574
|
+
}, 100);
|
|
575
|
+
}, () => { });
|
|
576
|
+
},
|
|
577
|
+
};
|
|
578
|
+
})}
|
|
579
|
+
<div
|
|
580
|
+
class="w-100"
|
|
581
|
+
style="justify-content: center; align-items: center; gap: 4px; display: flex;color: #3366BB;cursor: pointer;"
|
|
582
|
+
data-bs-toggle="dropdown"
|
|
583
|
+
aria-haspopup="true"
|
|
584
|
+
aria-expanded="false"
|
|
585
|
+
onclick="${gvc.event(() => {
|
|
586
|
+
const copy = {
|
|
587
|
+
ask: '',
|
|
588
|
+
response: '',
|
|
589
|
+
};
|
|
590
|
+
BgWidget.settingDialog({
|
|
591
|
+
gvc: gvc,
|
|
592
|
+
title: '設定問答',
|
|
593
|
+
innerHTML: gvc => {
|
|
594
|
+
return [
|
|
595
|
+
BgWidget.editeInput({
|
|
596
|
+
gvc: gvc,
|
|
597
|
+
title: '問題',
|
|
598
|
+
placeHolder: `請輸入問題`,
|
|
599
|
+
default: copy.ask,
|
|
600
|
+
callback: text => {
|
|
601
|
+
copy.ask = text;
|
|
602
|
+
},
|
|
603
|
+
}),
|
|
604
|
+
BgWidget.textArea({
|
|
605
|
+
gvc: gvc,
|
|
606
|
+
title: '回答',
|
|
607
|
+
placeHolder: `請輸入回答`,
|
|
608
|
+
default: copy.response,
|
|
609
|
+
callback: text => {
|
|
610
|
+
copy.response = text;
|
|
611
|
+
},
|
|
612
|
+
}),
|
|
613
|
+
]
|
|
614
|
+
.map(dd => {
|
|
615
|
+
return `<div>${dd}</div>`;
|
|
616
|
+
})
|
|
617
|
+
.join('');
|
|
618
|
+
},
|
|
619
|
+
footer_html: gvc => {
|
|
620
|
+
return [
|
|
621
|
+
BgWidget.cancel(gvc.event(() => {
|
|
622
|
+
gvc.closeDialog();
|
|
623
|
+
})),
|
|
624
|
+
BgWidget.save(gvc.event(() => {
|
|
625
|
+
if (!copy.ask || !copy.response) {
|
|
626
|
+
dialog.errorMessage({
|
|
627
|
+
text: '內容不得為空',
|
|
628
|
+
});
|
|
629
|
+
return;
|
|
545
630
|
}
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
refresh();
|
|
600
|
-
gvc.closeDialog();
|
|
601
|
-
}))
|
|
602
|
-
].join(``);
|
|
603
|
-
}
|
|
604
|
-
});
|
|
605
|
-
})}">
|
|
606
|
-
<div style="font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word">
|
|
607
|
-
新增一則問答
|
|
608
|
-
</div>
|
|
609
|
-
<i class="fa-solid fa-plus"
|
|
610
|
-
aria-hidden="true"></i>
|
|
611
|
-
</div>
|
|
612
|
-
</div>
|
|
613
|
-
`;
|
|
614
|
-
},
|
|
615
|
-
divCreate: {
|
|
616
|
-
class: `m-n2`,
|
|
617
|
-
},
|
|
618
|
-
};
|
|
619
|
-
});
|
|
620
|
-
},
|
|
621
|
-
footer_html: (gvc) => {
|
|
622
|
-
return [BgWidget.cancel(gvc.event(() => {
|
|
623
|
-
gvc.closeDialog();
|
|
624
|
-
}), '取消'), BgWidget.save(gvc.event(() => __awaiter(this, void 0, void 0, function* () {
|
|
625
|
-
dialog.dataLoading({ visible: true });
|
|
626
|
-
yield ApiUser.setPublicConfig({
|
|
627
|
-
key: `robot_ai_reply`,
|
|
628
|
-
value: keyData,
|
|
629
|
-
user_id: 'manager',
|
|
630
|
-
});
|
|
631
|
-
dialog.dataLoading({ visible: false });
|
|
632
|
-
dialog.successMessage({ text: '設定成功' });
|
|
633
|
-
gvc.closeDialog();
|
|
634
|
-
})), '儲存')].join('');
|
|
635
|
-
}
|
|
636
|
-
});
|
|
637
|
-
})))}
|
|
638
|
-
</div>` : ``}
|
|
639
|
-
</div>
|
|
640
|
-
`;
|
|
641
|
-
}
|
|
631
|
+
keyData.question.push(copy);
|
|
632
|
+
refresh();
|
|
633
|
+
gvc.closeDialog();
|
|
634
|
+
})),
|
|
635
|
+
].join(``);
|
|
636
|
+
},
|
|
637
|
+
});
|
|
638
|
+
})}"
|
|
639
|
+
>
|
|
640
|
+
<div
|
|
641
|
+
style="font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word"
|
|
642
|
+
>
|
|
643
|
+
新增一則問答
|
|
644
|
+
</div>
|
|
645
|
+
<i
|
|
646
|
+
class="fa-solid fa-plus"
|
|
647
|
+
aria-hidden="true"
|
|
648
|
+
></i>
|
|
649
|
+
</div>
|
|
650
|
+
</div>
|
|
651
|
+
`;
|
|
652
|
+
},
|
|
653
|
+
divCreate: {
|
|
654
|
+
class: `m-n2`,
|
|
655
|
+
},
|
|
656
|
+
};
|
|
657
|
+
});
|
|
658
|
+
},
|
|
659
|
+
footer_html: gvc => {
|
|
660
|
+
return [
|
|
661
|
+
BgWidget.cancel(gvc.event(() => {
|
|
662
|
+
gvc.closeDialog();
|
|
663
|
+
}), '取消'),
|
|
664
|
+
BgWidget.save(gvc.event(() => __awaiter(this, void 0, void 0, function* () {
|
|
665
|
+
dialog.dataLoading({ visible: true });
|
|
666
|
+
yield ApiUser.setPublicConfig({
|
|
667
|
+
key: `robot_ai_reply`,
|
|
668
|
+
value: keyData,
|
|
669
|
+
user_id: 'manager',
|
|
670
|
+
});
|
|
671
|
+
dialog.dataLoading({ visible: false });
|
|
672
|
+
dialog.successMessage({ text: '設定成功' });
|
|
673
|
+
gvc.closeDialog();
|
|
674
|
+
})), '儲存'),
|
|
675
|
+
].join('');
|
|
676
|
+
},
|
|
677
|
+
});
|
|
678
|
+
})))}
|
|
679
|
+
</div>`
|
|
680
|
+
: ``}
|
|
681
|
+
</div>
|
|
682
|
+
`;
|
|
683
|
+
},
|
|
642
684
|
};
|
|
643
685
|
}),
|
|
644
686
|
BgWidget.editeInput({
|
|
@@ -647,7 +689,7 @@ export class BgCustomerMessage {
|
|
|
647
689
|
type: 'name',
|
|
648
690
|
placeHolder: `請輸入客服名稱`,
|
|
649
691
|
default: keyData.name,
|
|
650
|
-
callback:
|
|
692
|
+
callback: text => {
|
|
651
693
|
keyData.name = text;
|
|
652
694
|
},
|
|
653
695
|
}),
|
|
@@ -663,7 +705,7 @@ export class BgCustomerMessage {
|
|
|
663
705
|
gvc: gvc,
|
|
664
706
|
title: '設定主色調',
|
|
665
707
|
def: keyData.color,
|
|
666
|
-
callback:
|
|
708
|
+
callback: text => {
|
|
667
709
|
keyData.color = text;
|
|
668
710
|
gvc.notifyDataChange(vO.id);
|
|
669
711
|
},
|
|
@@ -673,7 +715,7 @@ export class BgCustomerMessage {
|
|
|
673
715
|
title: '置頂標題',
|
|
674
716
|
placeHolder: `請輸入置頂標題`,
|
|
675
717
|
default: keyData.title,
|
|
676
|
-
callback:
|
|
718
|
+
callback: text => {
|
|
677
719
|
keyData.title = text;
|
|
678
720
|
},
|
|
679
721
|
}),
|
|
@@ -682,18 +724,18 @@ export class BgCustomerMessage {
|
|
|
682
724
|
title: '置頂內文',
|
|
683
725
|
placeHolder: `請輸入置頂內文`,
|
|
684
726
|
default: keyData.content,
|
|
685
|
-
callback:
|
|
727
|
+
callback: text => {
|
|
686
728
|
keyData.content = text;
|
|
687
729
|
},
|
|
688
|
-
})
|
|
730
|
+
}),
|
|
689
731
|
];
|
|
690
732
|
}
|
|
691
733
|
else {
|
|
692
734
|
return [];
|
|
693
735
|
}
|
|
694
|
-
})()
|
|
736
|
+
})(),
|
|
695
737
|
].join(`<div class="my-2"></div>`)}
|
|
696
|
-
|
|
738
|
+
</div>`,
|
|
697
739
|
gvc.bindView(() => {
|
|
698
740
|
const id = gvc.glitter.getUUID();
|
|
699
741
|
const html = String.raw;
|
|
@@ -717,46 +759,53 @@ export class BgCustomerMessage {
|
|
|
717
759
|
gvc.notifyDataChange(id);
|
|
718
760
|
}
|
|
719
761
|
resolve(html `
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
762
|
+
<div
|
|
763
|
+
class="position-relative bgf6 d-flex align-items-center justify-content-between mx-n2 p-2 py-3 border-top border-bottom mt-2 shadow"
|
|
764
|
+
>
|
|
765
|
+
<span class="fs-6 fw-bold d-flex flex-column" style="color:black;"
|
|
766
|
+
>常見問題 ${BgWidget.grayNote('將顯示於客服聊天首頁，讓用戶直接點選')}</span
|
|
767
|
+
>
|
|
768
|
+
</div>
|
|
769
|
+
<div style="" class="p-2">
|
|
770
|
+
${gvc.bindView(() => {
|
|
728
771
|
return {
|
|
729
772
|
bind: id,
|
|
730
773
|
view: () => {
|
|
731
|
-
return (keyData.question || [])
|
|
732
|
-
|
|
733
|
-
|
|
774
|
+
return (keyData.question || [])
|
|
775
|
+
.map((d2, index) => {
|
|
776
|
+
return html ` <li
|
|
777
|
+
onclick="${gvc.event(() => {
|
|
734
778
|
const copy = JSON.parse(JSON.stringify(d2));
|
|
735
779
|
BgWidget.settingDialog({
|
|
736
780
|
gvc: gvc,
|
|
737
781
|
title: '設定問答',
|
|
738
|
-
innerHTML:
|
|
739
|
-
return [
|
|
782
|
+
innerHTML: gvc => {
|
|
783
|
+
return [
|
|
784
|
+
BgWidget.editeInput({
|
|
740
785
|
gvc: gvc,
|
|
741
786
|
title: '問題',
|
|
742
787
|
placeHolder: `請輸入問題`,
|
|
743
788
|
default: copy.ask,
|
|
744
|
-
callback:
|
|
789
|
+
callback: text => {
|
|
745
790
|
copy.ask = text;
|
|
746
791
|
},
|
|
747
|
-
}),
|
|
792
|
+
}),
|
|
793
|
+
BgWidget.textArea({
|
|
748
794
|
gvc: gvc,
|
|
749
795
|
title: '回答',
|
|
750
796
|
placeHolder: `請輸入回答`,
|
|
751
797
|
default: copy.response,
|
|
752
|
-
callback:
|
|
798
|
+
callback: text => {
|
|
753
799
|
copy.response = text;
|
|
754
800
|
},
|
|
755
|
-
})
|
|
801
|
+
}),
|
|
802
|
+
]
|
|
803
|
+
.map(dd => {
|
|
756
804
|
return `<div>${dd}</div>`;
|
|
757
|
-
})
|
|
805
|
+
})
|
|
806
|
+
.join('');
|
|
758
807
|
},
|
|
759
|
-
footer_html:
|
|
808
|
+
footer_html: gvc => {
|
|
760
809
|
return [
|
|
761
810
|
BgWidget.cancel(gvc.event(() => {
|
|
762
811
|
gvc.closeDialog();
|
|
@@ -765,40 +814,50 @@ export class BgCustomerMessage {
|
|
|
765
814
|
keyData.question[index] = copy;
|
|
766
815
|
refresh();
|
|
767
816
|
gvc.closeDialog();
|
|
768
|
-
}))
|
|
817
|
+
})),
|
|
769
818
|
].join(``);
|
|
770
|
-
}
|
|
819
|
+
},
|
|
771
820
|
});
|
|
772
|
-
})}"
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
821
|
+
})}"
|
|
822
|
+
>
|
|
823
|
+
<div
|
|
824
|
+
class="w-100 fw-500 d-flex align-items-center fs-6 hoverBtn h_item rounded px-2 hoverF2 mb-1 subComponentGuide"
|
|
825
|
+
style="gap:5px;color:#393939;"
|
|
826
|
+
>
|
|
827
|
+
<div class=" p-1 dragItem ">
|
|
828
|
+
<i
|
|
829
|
+
class="fa-solid fa-grip-dots-vertical d-flex align-items-center justify-content-center "
|
|
830
|
+
style="width:15px;height:15px;"
|
|
831
|
+
aria-hidden="true"
|
|
832
|
+
></i>
|
|
833
|
+
</div>
|
|
834
|
+
<span>${d2.ask}</span>
|
|
835
|
+
<div class="flex-fill"></div>
|
|
836
|
+
<div
|
|
837
|
+
class="hoverBtn p-1 child"
|
|
838
|
+
onclick="${gvc.event((e, event) => {
|
|
784
839
|
event.stopPropagation();
|
|
785
840
|
event.preventDefault();
|
|
786
841
|
dialog.checkYesOrNot({
|
|
787
842
|
text: '是否確認移除問答?',
|
|
788
|
-
callback:
|
|
843
|
+
callback: response => {
|
|
789
844
|
if (response) {
|
|
790
845
|
keyData.question.splice(index, 1);
|
|
791
846
|
gvc.notifyDataChange(id);
|
|
792
847
|
}
|
|
793
|
-
}
|
|
848
|
+
},
|
|
794
849
|
});
|
|
795
|
-
})}"
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
850
|
+
})}"
|
|
851
|
+
>
|
|
852
|
+
<i
|
|
853
|
+
class="fa-regular fa-trash d-flex align-items-center justify-content-center "
|
|
854
|
+
aria-hidden="true"
|
|
855
|
+
></i>
|
|
856
|
+
</div>
|
|
857
|
+
</div>
|
|
858
|
+
</li>`;
|
|
859
|
+
})
|
|
860
|
+
.join('');
|
|
802
861
|
},
|
|
803
862
|
divCreate: {
|
|
804
863
|
class: `mx-n2`,
|
|
@@ -835,54 +894,58 @@ export class BgCustomerMessage {
|
|
|
835
894
|
const newIndex = evt.newIndex;
|
|
836
895
|
startIndex = newIndex;
|
|
837
896
|
},
|
|
838
|
-
onEnd: (evt) => {
|
|
839
|
-
},
|
|
897
|
+
onEnd: (evt) => { },
|
|
840
898
|
onStart: function (evt) {
|
|
841
899
|
startIndex = evt.oldIndex;
|
|
842
900
|
},
|
|
843
901
|
});
|
|
844
902
|
}
|
|
845
|
-
catch (e) {
|
|
846
|
-
}
|
|
903
|
+
catch (e) { }
|
|
847
904
|
clearInterval(interval);
|
|
848
905
|
}
|
|
849
906
|
}, 100);
|
|
850
|
-
}, () => {
|
|
851
|
-
|
|
852
|
-
}
|
|
907
|
+
}, () => { });
|
|
908
|
+
},
|
|
853
909
|
};
|
|
854
910
|
})}
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
911
|
+
<div
|
|
912
|
+
class="w-100"
|
|
913
|
+
style="justify-content: center; align-items: center; gap: 4px; display: flex;color: #3366BB;cursor: pointer;"
|
|
914
|
+
data-bs-toggle="dropdown"
|
|
915
|
+
aria-haspopup="true"
|
|
916
|
+
aria-expanded="false"
|
|
917
|
+
onclick="${gvc.event(() => {
|
|
860
918
|
const copy = { ask: '', response: '' };
|
|
861
919
|
BgWidget.settingDialog({
|
|
862
920
|
gvc: gvc,
|
|
863
921
|
title: '設定問答',
|
|
864
|
-
innerHTML:
|
|
865
|
-
return [
|
|
922
|
+
innerHTML: gvc => {
|
|
923
|
+
return [
|
|
924
|
+
BgWidget.editeInput({
|
|
866
925
|
gvc: gvc,
|
|
867
926
|
title: '問題',
|
|
868
927
|
placeHolder: `請輸入問題`,
|
|
869
928
|
default: copy.ask,
|
|
870
|
-
callback:
|
|
929
|
+
callback: text => {
|
|
871
930
|
copy.ask = text;
|
|
872
931
|
},
|
|
873
|
-
}),
|
|
932
|
+
}),
|
|
933
|
+
BgWidget.textArea({
|
|
874
934
|
gvc: gvc,
|
|
875
935
|
title: '回答',
|
|
876
936
|
placeHolder: `請輸入回答`,
|
|
877
937
|
default: copy.response,
|
|
878
|
-
callback:
|
|
938
|
+
callback: text => {
|
|
879
939
|
copy.response = text;
|
|
880
940
|
},
|
|
881
|
-
})
|
|
941
|
+
}),
|
|
942
|
+
]
|
|
943
|
+
.map(dd => {
|
|
882
944
|
return `<div>${dd}</div>`;
|
|
883
|
-
})
|
|
945
|
+
})
|
|
946
|
+
.join('');
|
|
884
947
|
},
|
|
885
|
-
footer_html:
|
|
948
|
+
footer_html: gvc => {
|
|
886
949
|
return [
|
|
887
950
|
BgWidget.cancel(gvc.event(() => {
|
|
888
951
|
gvc.closeDialog();
|
|
@@ -895,19 +958,21 @@ export class BgCustomerMessage {
|
|
|
895
958
|
keyData.question.push(copy);
|
|
896
959
|
refresh();
|
|
897
960
|
gvc.closeDialog();
|
|
898
|
-
}))
|
|
961
|
+
})),
|
|
899
962
|
].join(``);
|
|
900
|
-
}
|
|
963
|
+
},
|
|
901
964
|
});
|
|
902
|
-
})}"
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
965
|
+
})}"
|
|
966
|
+
>
|
|
967
|
+
<div
|
|
968
|
+
style="font-size: 16px; font-family: Noto Sans; font-weight: 400; word-wrap: break-word"
|
|
969
|
+
>
|
|
970
|
+
新增一則回覆
|
|
971
|
+
</div>
|
|
972
|
+
<i class="fa-solid fa-plus" aria-hidden="true"></i>
|
|
973
|
+
</div>
|
|
974
|
+
</div>
|
|
975
|
+
`);
|
|
911
976
|
}));
|
|
912
977
|
},
|
|
913
978
|
divCreate: {
|
|
@@ -920,7 +985,7 @@ export class BgCustomerMessage {
|
|
|
920
985
|
},
|
|
921
986
|
divCreate: {
|
|
922
987
|
class: `p-2`,
|
|
923
|
-
style: `height: calc(100vh - 132px);overflow-y:auto;${
|
|
988
|
+
style: `height: calc(100vh - 132px);overflow-y:auto;${parseInt(gvc.glitter.share.top_inset, 10) ? `padding-bottom:${parseInt(gvc.glitter.share.top_inset, 10) + parseInt(gvc.glitter.share.bottom_inset, 10)}px !important;` : ``}`,
|
|
924
989
|
},
|
|
925
990
|
};
|
|
926
991
|
}));
|
|
@@ -930,7 +995,7 @@ export class BgCustomerMessage {
|
|
|
930
995
|
},
|
|
931
996
|
divCreate: {
|
|
932
997
|
style: `position:relative;`,
|
|
933
|
-
class: `h-100
|
|
998
|
+
class: `h-100`,
|
|
934
999
|
},
|
|
935
1000
|
onCreate: () => {
|
|
936
1001
|
$('.tooltip').remove();
|
|
@@ -953,7 +1018,7 @@ export class BgCustomerMessage {
|
|
|
953
1018
|
}).then((data) => __awaiter(this, void 0, void 0, function* () {
|
|
954
1019
|
chatData = data.response.data;
|
|
955
1020
|
chatData = chatData.filter((data) => data.topMessage !== undefined);
|
|
956
|
-
Chat.getUnRead({ user_id: 'manager' }).then(
|
|
1021
|
+
Chat.getUnRead({ user_id: 'manager' }).then(data => {
|
|
957
1022
|
unRead = data.response;
|
|
958
1023
|
gvc.notifyDataChange(listId);
|
|
959
1024
|
});
|
|
@@ -962,21 +1027,24 @@ export class BgCustomerMessage {
|
|
|
962
1027
|
let socket = undefined;
|
|
963
1028
|
const url = new URL(window.glitterBackend);
|
|
964
1029
|
let vm = {
|
|
965
|
-
close: false
|
|
1030
|
+
close: false,
|
|
966
1031
|
};
|
|
967
1032
|
function connect() {
|
|
968
|
-
|
|
1033
|
+
const socket_id = gvc.glitter.getUUID();
|
|
1034
|
+
socket = location.href.includes('https://')
|
|
1035
|
+
? new WebSocket(`wss://${url.hostname}/websocket`)
|
|
1036
|
+
: new WebSocket(`ws://${url.hostname}:9003`);
|
|
969
1037
|
socket.addEventListener('open', function (event) {
|
|
970
|
-
console.log(
|
|
1038
|
+
console.log(`Connected to update list server-${socket_id}`);
|
|
971
1039
|
socket.send(JSON.stringify({
|
|
972
1040
|
type: 'message-count-change',
|
|
973
1041
|
user_id: 'manager',
|
|
974
|
-
app_name: window.appName
|
|
1042
|
+
app_name: window.appName,
|
|
975
1043
|
}));
|
|
976
1044
|
});
|
|
977
1045
|
socket.addEventListener('message', function (event) {
|
|
978
1046
|
return __awaiter(this, void 0, void 0, function* () {
|
|
979
|
-
console.log(`update_message_count`);
|
|
1047
|
+
console.log(`update_message_count-${socket_id}`);
|
|
980
1048
|
const data = JSON.parse(event.data);
|
|
981
1049
|
if (data.type === 'update_message_count') {
|
|
982
1050
|
vm.close = true;
|
|
@@ -986,7 +1054,7 @@ export class BgCustomerMessage {
|
|
|
986
1054
|
});
|
|
987
1055
|
});
|
|
988
1056
|
socket.addEventListener('close', function (event) {
|
|
989
|
-
console.log(
|
|
1057
|
+
console.log(`Disconnected from server-${socket_id}`);
|
|
990
1058
|
if (!vm.close) {
|
|
991
1059
|
console.log('Reconnected from server');
|
|
992
1060
|
connect();
|
|
@@ -1001,23 +1069,23 @@ export class BgCustomerMessage {
|
|
|
1001
1069
|
const view = [];
|
|
1002
1070
|
try {
|
|
1003
1071
|
view.push(html `
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1072
|
+
<div class="p-2">
|
|
1073
|
+
<div class="position-relative">
|
|
1074
|
+
<input type="text" class="form-control pe-5" placeholder="搜尋用戶" />
|
|
1075
|
+
<i class="bx bx-search fs-xl text-nav position-absolute top-50 end-0 translate-middle-y me-3"></i>
|
|
1076
|
+
</div>
|
|
1077
|
+
</div>
|
|
1078
|
+
<div style="max-height: calc(100vh - 180px);overflow-y: auto;">
|
|
1079
|
+
${chatData
|
|
1012
1080
|
.filter((dd) => {
|
|
1013
1081
|
return !['manager-operation_guide', 'manager-order_analysis', 'manager-writer'].includes(dd.chat_id);
|
|
1014
|
-
})
|
|
1082
|
+
})
|
|
1083
|
+
.map((dd) => {
|
|
1015
1084
|
var _a, _b, _c, _d, _e;
|
|
1016
1085
|
dd.topMessage = (_a = dd.topMessage) !== null && _a !== void 0 ? _a : {};
|
|
1017
|
-
dd.topMessage.text = (_c = (_b = dd.topMessage) === null || _b === void 0 ? void 0 : _b.text) !== null && _c !== void 0 ? _c :
|
|
1086
|
+
dd.topMessage.text = (_c = (_b = dd.topMessage) === null || _b === void 0 ? void 0 : _b.text) !== null && _c !== void 0 ? _c : '圖片內容';
|
|
1018
1087
|
dd.user_data = (_d = dd.user_data) !== null && _d !== void 0 ? _d : {};
|
|
1019
1088
|
if (dd.topMessage && dd.chat_id !== 'manager-preview') {
|
|
1020
|
-
console.log(`unRead==>`, unRead);
|
|
1021
1089
|
const unReadCount = unRead.filter((d2) => {
|
|
1022
1090
|
return dd.chat_id === d2.chat_id;
|
|
1023
1091
|
}).length;
|
|
@@ -1029,16 +1097,17 @@ export class BgCustomerMessage {
|
|
|
1029
1097
|
if (dd.chat_id.startsWith('fb')) {
|
|
1030
1098
|
dd.info.fb = (_e = dd.info.fb) !== null && _e !== void 0 ? _e : {
|
|
1031
1099
|
head: `https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/1704269678588-43.png`,
|
|
1032
|
-
name: '訪客'
|
|
1100
|
+
name: '訪客',
|
|
1033
1101
|
};
|
|
1034
1102
|
dd.user_data.head = dd.info.fb.head;
|
|
1035
1103
|
dd.user_data.name = dd.info.fb.name;
|
|
1036
1104
|
}
|
|
1037
|
-
let head = (dd.user_data && dd.user_data.head) ||
|
|
1105
|
+
let head = (dd.user_data && dd.user_data.head) ||
|
|
1106
|
+
`https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/1704269678588-43.png`;
|
|
1038
1107
|
let name = (dd.user_data && dd.user_data.name) || `訪客`;
|
|
1039
1108
|
let socket = undefined;
|
|
1040
1109
|
const vm = {
|
|
1041
|
-
close: false
|
|
1110
|
+
close: false,
|
|
1042
1111
|
};
|
|
1043
1112
|
const id = gvc.glitter.getUUID();
|
|
1044
1113
|
return gvc.bindView(() => {
|
|
@@ -1055,7 +1124,7 @@ export class BgCustomerMessage {
|
|
|
1055
1124
|
</div>
|
|
1056
1125
|
<img
|
|
1057
1126
|
src="${head}"
|
|
1058
|
-
class="rounded-circle ${
|
|
1127
|
+
class="rounded-circle ${dd.chat_id.startsWith('line') || dd.chat_id.startsWith('fb') ? `` : `border`}"
|
|
1059
1128
|
style="border-radius: 50%;${(() => {
|
|
1060
1129
|
if (dd.chat_id.startsWith('line')) {
|
|
1061
1130
|
return `border:2px solid green;`;
|
|
@@ -1088,7 +1157,9 @@ export class BgCustomerMessage {
|
|
|
1088
1157
|
<p class="fs-sm mb-0 "
|
|
1089
1158
|
style="white-space: normal;${unReadCount ? `color:black;` : `color:#585c7b !important;`}">
|
|
1090
1159
|
${(dd.topMessage ? dd.topMessage.text : ``).length > 50
|
|
1091
|
-
? (dd.topMessage
|
|
1160
|
+
? (dd.topMessage
|
|
1161
|
+
? dd.topMessage.text
|
|
1162
|
+
: ``).substring(0, 50) + '.....'
|
|
1092
1163
|
: dd.topMessage
|
|
1093
1164
|
? dd.topMessage.text
|
|
1094
1165
|
: ``}
|
|
@@ -1103,10 +1174,10 @@ export class BgCustomerMessage {
|
|
|
1103
1174
|
key: 'onclick',
|
|
1104
1175
|
value: gvc.event(() => {
|
|
1105
1176
|
callback(dd);
|
|
1106
|
-
})
|
|
1107
|
-
}
|
|
1108
|
-
]
|
|
1109
|
-
}
|
|
1177
|
+
}),
|
|
1178
|
+
},
|
|
1179
|
+
],
|
|
1180
|
+
},
|
|
1110
1181
|
};
|
|
1111
1182
|
});
|
|
1112
1183
|
}
|
|
@@ -1116,21 +1187,23 @@ export class BgCustomerMessage {
|
|
|
1116
1187
|
}
|
|
1117
1188
|
})
|
|
1118
1189
|
.join('') ||
|
|
1119
|
-
html `
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1190
|
+
html ` <div
|
|
1191
|
+
class="d-flex align-items-center justify-content-center flex-column w-100"
|
|
1192
|
+
style="width:700px;"
|
|
1193
|
+
>
|
|
1194
|
+
<lottie-player
|
|
1195
|
+
style="max-width: 100%;width: 300px;"
|
|
1196
|
+
src="https://assets10.lottiefiles.com/packages/lf20_rc6CDU.json"
|
|
1197
|
+
speed="1"
|
|
1198
|
+
loop="true"
|
|
1199
|
+
background="transparent"
|
|
1200
|
+
></lottie-player>
|
|
1201
|
+
<h3 class="text-dark fs-6 mt-n3 px-2" style="line-height: 200%;text-align: center;">
|
|
1202
|
+
尚未收到任何訊息
|
|
1203
|
+
</h3>
|
|
1204
|
+
</div>`}
|
|
1205
|
+
</div>
|
|
1206
|
+
`);
|
|
1134
1207
|
return view.join('');
|
|
1135
1208
|
}
|
|
1136
1209
|
catch (e) {
|
|
@@ -1139,18 +1212,19 @@ export class BgCustomerMessage {
|
|
|
1139
1212
|
}
|
|
1140
1213
|
}
|
|
1141
1214
|
else {
|
|
1142
|
-
return html `
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
</div>`;
|
|
1215
|
+
return html ` <div class="d-flex align-items-center justify-content-center w-100 flex-column pt-3">
|
|
1216
|
+
<div class="spinner-border" role="status">
|
|
1217
|
+
<span class="sr-only"></span>
|
|
1218
|
+
</div>
|
|
1219
|
+
<span class="mt-2">載入中...</span>
|
|
1220
|
+
</div>`;
|
|
1149
1221
|
}
|
|
1150
1222
|
},
|
|
1151
1223
|
divCreate: {},
|
|
1152
1224
|
onCreate: () => {
|
|
1153
1225
|
setTimeout(() => {
|
|
1226
|
+
vm.close = true;
|
|
1227
|
+
socket && socket.close();
|
|
1154
1228
|
vm.close = false;
|
|
1155
1229
|
connect();
|
|
1156
1230
|
}, 50);
|
|
@@ -1158,7 +1232,7 @@ export class BgCustomerMessage {
|
|
|
1158
1232
|
onDestroy: () => {
|
|
1159
1233
|
vm.close = true;
|
|
1160
1234
|
socket && socket.close();
|
|
1161
|
-
}
|
|
1235
|
+
},
|
|
1162
1236
|
};
|
|
1163
1237
|
});
|
|
1164
1238
|
}
|
|
@@ -1208,9 +1282,8 @@ export class BgCustomerMessage {
|
|
|
1208
1282
|
participant: [cf.userID, cf.toUser],
|
|
1209
1283
|
});
|
|
1210
1284
|
const viewId = gvc.glitter.getUUID();
|
|
1211
|
-
const chatView = html `
|
|
1212
|
-
|
|
1213
|
-
${BgCustomerMessage.detail({
|
|
1285
|
+
const chatView = html ` <div class="w-100 h-100" style="position: relative;">
|
|
1286
|
+
${BgCustomerMessage.detail({
|
|
1214
1287
|
gvc: gvc,
|
|
1215
1288
|
chat: {
|
|
1216
1289
|
chat_id: chatID,
|
|
@@ -1228,7 +1301,7 @@ export class BgCustomerMessage {
|
|
|
1228
1301
|
gvc.notifyDataChange(id);
|
|
1229
1302
|
}),
|
|
1230
1303
|
})}
|
|
1231
|
-
|
|
1304
|
+
</div>`;
|
|
1232
1305
|
const baseUrl = new URL('../', import.meta.url);
|
|
1233
1306
|
document.querySelector('#' + id).addStyleLink(baseUrl.href + `assets/css/theme.css`);
|
|
1234
1307
|
document.querySelector('#' + id).addStyleLink(baseUrl.href + `assets/vendor/boxicons/css/boxicons.min.css`);
|
|
@@ -1291,17 +1364,21 @@ export class BgCustomerMessage {
|
|
|
1291
1364
|
chatRoom.user_data.head = (_c = chatRoom.fb.line) === null || _c === void 0 ? void 0 : _c.head;
|
|
1292
1365
|
chatRoom.user_data.name = (_d = chatRoom.fb.line) === null || _d === void 0 ? void 0 : _d.name;
|
|
1293
1366
|
}
|
|
1294
|
-
resolve(html `
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1367
|
+
resolve(html ` <div
|
|
1368
|
+
class="navbar d-flex align-items-center justify-content-between w-100 p-3 ${BgCustomerMessage
|
|
1369
|
+
.config.hideBar
|
|
1370
|
+
? `d-none`
|
|
1371
|
+
: ``}"
|
|
1372
|
+
style="background: ${BgCustomerMessage.config.color};"
|
|
1373
|
+
>
|
|
1374
|
+
<div
|
|
1375
|
+
class="d-flex align-items-center pe-3 w-100"
|
|
1376
|
+
style="gap:10px;display: flex;align-items: center;"
|
|
1377
|
+
>
|
|
1378
|
+
<i
|
|
1379
|
+
class="fa-solid fa-chevron-left fs-6"
|
|
1380
|
+
style="color:white;cursor: pointer;"
|
|
1381
|
+
onclick="${gvc.event(() => {
|
|
1305
1382
|
if (cf.user_id === 'manager') {
|
|
1306
1383
|
BgCustomerMessage.vm.type = 'list';
|
|
1307
1384
|
gvc.notifyDataChange(BgCustomerMessage.id);
|
|
@@ -1310,29 +1387,32 @@ export class BgCustomerMessage {
|
|
|
1310
1387
|
cf.goBack();
|
|
1311
1388
|
}
|
|
1312
1389
|
})}"
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1390
|
+
></i>
|
|
1391
|
+
<img
|
|
1392
|
+
src="${chatRoom.type === 'user'
|
|
1316
1393
|
? (chatRoom.user_data && chatRoom.user_data.head) ||
|
|
1317
1394
|
chatRoom.user_data.head_img ||
|
|
1318
1395
|
'https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/1704269678588-43.png'
|
|
1319
1396
|
: `https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/1704269678588-43.png`}"
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1397
|
+
class="rounded-circle border"
|
|
1398
|
+
style="background: white;"
|
|
1399
|
+
width="40"
|
|
1400
|
+
alt="Albert Flores"
|
|
1401
|
+
/>
|
|
1402
|
+
<h6 class="mb-0 px-1 text-white">
|
|
1403
|
+
${chatRoom.type === 'user'
|
|
1404
|
+
? (chatRoom.user_data && chatRoom.user_data.name) || '訪客'
|
|
1405
|
+
: `群組`}
|
|
1406
|
+
</h6>
|
|
1407
|
+
<div class="flex-fill" style="flex: 1;"></div>
|
|
1408
|
+
<i
|
|
1409
|
+
class="fa-regular fa-circle-xmark text-white fs-3 ${cf.close ? `` : `d-none`}"
|
|
1410
|
+
onclick="${gvc.event(() => {
|
|
1331
1411
|
cf.close && cf.close();
|
|
1332
1412
|
})}"
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1413
|
+
></i>
|
|
1414
|
+
</div>
|
|
1415
|
+
</div>`);
|
|
1336
1416
|
}));
|
|
1337
1417
|
},
|
|
1338
1418
|
};
|
|
@@ -1355,7 +1435,7 @@ export class BgCustomerMessage {
|
|
|
1355
1435
|
limit: 50,
|
|
1356
1436
|
chat_id: cf.chat.chat_id,
|
|
1357
1437
|
user_id: cf.user_id,
|
|
1358
|
-
}).then(
|
|
1438
|
+
}).then(res => {
|
|
1359
1439
|
vm.data = res.response.data.reverse();
|
|
1360
1440
|
vm.last_read = res.response.lastRead;
|
|
1361
1441
|
vm.loading = false;
|
|
@@ -1368,7 +1448,9 @@ export class BgCustomerMessage {
|
|
|
1368
1448
|
gvc.glitter.share.close_socket();
|
|
1369
1449
|
}
|
|
1370
1450
|
vm.close = false;
|
|
1371
|
-
socket = location.href.includes('https://')
|
|
1451
|
+
socket = location.href.includes('https://')
|
|
1452
|
+
? new WebSocket(`wss://${url.hostname}/websocket`)
|
|
1453
|
+
: new WebSocket(`ws://${url.hostname}:9003`);
|
|
1372
1454
|
gvc.glitter.share.close_socket = () => {
|
|
1373
1455
|
vm.close = true;
|
|
1374
1456
|
socket.close();
|
|
@@ -1381,7 +1463,7 @@ export class BgCustomerMessage {
|
|
|
1381
1463
|
type: 'message',
|
|
1382
1464
|
chatID: cf.chat.chat_id,
|
|
1383
1465
|
user_id: cf.user_id,
|
|
1384
|
-
app_name: window.appName
|
|
1466
|
+
app_name: window.appName,
|
|
1385
1467
|
}));
|
|
1386
1468
|
});
|
|
1387
1469
|
let interVal = 0;
|
|
@@ -1434,23 +1516,21 @@ export class BgCustomerMessage {
|
|
|
1434
1516
|
return {
|
|
1435
1517
|
bind: messageID,
|
|
1436
1518
|
view: () => {
|
|
1437
|
-
return html `
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
${vm.data
|
|
1519
|
+
return html ` <div class="my-auto flex-fill" id=""></div>
|
|
1520
|
+
<div class="w-100" id="message-lines">
|
|
1521
|
+
${vm.data
|
|
1441
1522
|
.map((dd, index) => {
|
|
1442
1523
|
return BgCustomerMessage.message_line(dd, cf, index, vm, gvc);
|
|
1443
1524
|
})
|
|
1444
1525
|
.join('')}
|
|
1445
|
-
|
|
1526
|
+
</div>
|
|
1446
1527
|
|
|
1447
|
-
|
|
1528
|
+
${vm.data.length === 0
|
|
1448
1529
|
? html `
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
</div> `
|
|
1530
|
+
<div class="w-100 text-center">
|
|
1531
|
+
<div class="badge bg-secondary">尚未展開對話，於下方輸入訊息並傳送。</div>
|
|
1532
|
+
</div>
|
|
1533
|
+
`
|
|
1454
1534
|
: ``}`;
|
|
1455
1535
|
},
|
|
1456
1536
|
divCreate: {
|
|
@@ -1462,7 +1542,8 @@ export class BgCustomerMessage {
|
|
|
1462
1542
|
let targetElement = document.querySelector('.chatContainer');
|
|
1463
1543
|
if (vm.lastScroll === -1) {
|
|
1464
1544
|
setTimeout(() => {
|
|
1465
|
-
document.querySelector('.chatContainer').scrollTop =
|
|
1545
|
+
document.querySelector('.chatContainer').scrollTop =
|
|
1546
|
+
document.querySelector('.chatContainer').scrollHeight;
|
|
1466
1547
|
}, 100);
|
|
1467
1548
|
}
|
|
1468
1549
|
else {
|
|
@@ -1486,7 +1567,7 @@ export class BgCustomerMessage {
|
|
|
1486
1567
|
chat_id: cf.chat.chat_id,
|
|
1487
1568
|
olderID: vm.data[0].id,
|
|
1488
1569
|
user_id: cf.user_id,
|
|
1489
|
-
}).then(
|
|
1570
|
+
}).then(res => {
|
|
1490
1571
|
vm.loading = false;
|
|
1491
1572
|
vm.prefixScroll = targetElement.scrollHeight;
|
|
1492
1573
|
vm.data = res.response.data.reverse().concat(vm.data);
|
|
@@ -1497,13 +1578,12 @@ export class BgCustomerMessage {
|
|
|
1497
1578
|
},
|
|
1498
1579
|
};
|
|
1499
1580
|
})}
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
${gvc.bindView(() => {
|
|
1581
|
+
<div
|
|
1582
|
+
class="card-footer border-top d-flex align-items-center w-100 border-0 pt-3 pb-3 px-4 position-fixed bottom-0 position-lg-absolute"
|
|
1583
|
+
style="background: white;"
|
|
1584
|
+
>
|
|
1585
|
+
<div class="position-relative w-100 me-2 ">
|
|
1586
|
+
${gvc.bindView(() => {
|
|
1507
1587
|
return {
|
|
1508
1588
|
bind: textAreaId,
|
|
1509
1589
|
view: () => {
|
|
@@ -1518,7 +1598,7 @@ export class BgCustomerMessage {
|
|
|
1518
1598
|
{ key: 'placeholder', value: '輸入訊息內容' },
|
|
1519
1599
|
{
|
|
1520
1600
|
key: 'onchange',
|
|
1521
|
-
value: gvc.event(
|
|
1601
|
+
value: gvc.event(e => {
|
|
1522
1602
|
vm.message = e.value;
|
|
1523
1603
|
}),
|
|
1524
1604
|
},
|
|
@@ -1534,12 +1614,12 @@ export class BgCustomerMessage {
|
|
|
1534
1614
|
},
|
|
1535
1615
|
};
|
|
1536
1616
|
})}
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1617
|
+
</div>
|
|
1618
|
+
<button
|
|
1619
|
+
type="button"
|
|
1620
|
+
class="btn btn-icon btn-lg d-sm-inline-flex ms-1"
|
|
1621
|
+
style="height: 36px;background: ${BgCustomerMessage.config.color};"
|
|
1622
|
+
onclick="${gvc.event(() => {
|
|
1543
1623
|
if (vm.message) {
|
|
1544
1624
|
Chat.postMessage({
|
|
1545
1625
|
chat_id: cf.chat.chat_id,
|
|
@@ -1556,14 +1636,13 @@ export class BgCustomerMessage {
|
|
|
1556
1636
|
textArea.focus();
|
|
1557
1637
|
}
|
|
1558
1638
|
})}"
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
|
|
1639
|
+
>
|
|
1640
|
+
<i class="fa-regular fa-paper-plane-top"></i>
|
|
1641
|
+
</button>
|
|
1642
|
+
</div>`;
|
|
1563
1643
|
},
|
|
1564
1644
|
divCreate: {},
|
|
1565
|
-
onCreate: () => {
|
|
1566
|
-
},
|
|
1645
|
+
onCreate: () => { },
|
|
1567
1646
|
onDestroy: () => {
|
|
1568
1647
|
vm.close = true;
|
|
1569
1648
|
socket.close();
|
|
@@ -1583,62 +1662,77 @@ export class BgCustomerMessage {
|
|
|
1583
1662
|
}
|
|
1584
1663
|
function drawChatContent() {
|
|
1585
1664
|
if (dd.message.image) {
|
|
1586
|
-
return html `<img src="${dd.message.image}"
|
|
1665
|
+
return html `<img src="${dd.message.image}" />`;
|
|
1587
1666
|
}
|
|
1588
1667
|
else {
|
|
1589
1668
|
return dd.message.text.replace(/\n/g, '<br>');
|
|
1590
1669
|
}
|
|
1591
1670
|
}
|
|
1592
1671
|
if (cf.user_id !== dd.user_id) {
|
|
1593
|
-
return html `
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
|
|
1672
|
+
return html ` <div
|
|
1673
|
+
class="mt-auto d-flex align-items-start ${vm.data[index + 1] && vm.data[index + 1].user_id === dd.user_id
|
|
1674
|
+
? `mb-1`
|
|
1675
|
+
: `mb-3`}"
|
|
1676
|
+
>
|
|
1677
|
+
<img
|
|
1678
|
+
src="${(dd.user_data && dd.user_data.head) ||
|
|
1679
|
+
`https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/1704269678588-43.png`}"
|
|
1680
|
+
class="rounded-circle border"
|
|
1681
|
+
width="40"
|
|
1682
|
+
alt="Albert Flores"
|
|
1683
|
+
/>
|
|
1684
|
+
<div class="ps-2 ms-1" style="max-width: 348px;">
|
|
1685
|
+
<div
|
|
1686
|
+
class="p-3 mb-1 ${dd.message.image ? '' : 'py-2'}"
|
|
1687
|
+
style="background:#eeeef1;border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; border-bottom-left-radius: .5rem;white-space: normal;"
|
|
1688
|
+
>
|
|
1689
|
+
${drawChatContent()}
|
|
1690
|
+
</div>
|
|
1691
|
+
<div
|
|
1692
|
+
class="fs-sm text-muted ${vm.data[index + 1] && vm.data[index + 1].user_id === dd.user_id ? `d-none` : ``}"
|
|
1693
|
+
>
|
|
1694
|
+
${gvc.glitter.ut.dateFormat(new Date(dd.created_time), 'MM-dd hh:mm')}
|
|
1695
|
+
</div>
|
|
1696
|
+
</div>
|
|
1697
|
+
</div>`;
|
|
1612
1698
|
}
|
|
1613
1699
|
else {
|
|
1614
|
-
return html `
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
|
|
1627
|
-
|
|
1628
|
-
|
|
1629
|
-
|
|
1700
|
+
return html ` <div
|
|
1701
|
+
class="d-flex align-items-start justify-content-end ${vm.data[index + 1] &&
|
|
1702
|
+
vm.data[index + 1].user_id === dd.user_id
|
|
1703
|
+
? `mb-1`
|
|
1704
|
+
: `mb-3`}"
|
|
1705
|
+
>
|
|
1706
|
+
<div class="pe-2 me-1" style="max-width: 348px;">
|
|
1707
|
+
<div
|
|
1708
|
+
class=" text-light p-3 mb-1 ${((_a = dd === null || dd === void 0 ? void 0 : dd.message) === null || _a === void 0 ? void 0 : _a.image) ? '' : 'py-2'}"
|
|
1709
|
+
style="background:${BgCustomerMessage.config
|
|
1710
|
+
.color};border-top-left-radius: .5rem; border-bottom-right-radius: .5rem; border-bottom-left-radius: .5rem;white-space: normal;"
|
|
1711
|
+
>
|
|
1712
|
+
${drawChatContent()}
|
|
1713
|
+
</div>
|
|
1714
|
+
<div
|
|
1715
|
+
class="time-mute fw-500 d-flex justify-content-end align-items-center fs-sm text-muted ${vm.data[index + 1] && vm.data[index + 1].user_id === dd.user_id
|
|
1716
|
+
? `d-none`
|
|
1717
|
+
: ``}"
|
|
1718
|
+
style="gap:5px;"
|
|
1719
|
+
>
|
|
1720
|
+
<span> ${gvc.glitter.ut.dateFormat(new Date(dd.created_time), 'MM/dd hh:mm')}</span>
|
|
1721
|
+
${vm.last_read.find((d2) => {
|
|
1722
|
+
return (d2.user_id !== cf.user_id && new Date(d2.last_read).getTime() >= new Date(dd.created_time).getTime());
|
|
1630
1723
|
})
|
|
1631
1724
|
? `已讀`
|
|
1632
1725
|
: ``}
|
|
1633
|
-
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
|
|
1726
|
+
</div>
|
|
1727
|
+
</div>
|
|
1728
|
+
<img
|
|
1729
|
+
src="${(dd.user_data && dd.user_data.head) ||
|
|
1730
|
+
`https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/1704269678588-43.png`}"
|
|
1731
|
+
class="rounded-circle border"
|
|
1732
|
+
width="40"
|
|
1733
|
+
alt="Albert Flores"
|
|
1734
|
+
/>
|
|
1735
|
+
</div>`;
|
|
1642
1736
|
}
|
|
1643
1737
|
}
|
|
1644
1738
|
}
|