ts-glitter 21.3.0 → 21.3.3

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