@product7/product7-js 0.5.4 → 0.5.6

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 (37) hide show
  1. package/README.md +6 -5
  2. package/dist/README.md +6 -5
  3. package/dist/product7-js.js +821 -816
  4. package/dist/product7-js.js.map +1 -1
  5. package/dist/product7-js.min.js +1 -1
  6. package/dist/product7-js.min.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/api/services/{WebChatService.js → LiveChatService.js} +14 -14
  9. package/src/core/APIService.js +15 -15
  10. package/src/core/Product7.js +9 -4
  11. package/src/core/WebSocketService.js +1 -1
  12. package/src/docs/api.md +8 -8
  13. package/src/docs/example.md +9 -9
  14. package/src/docs/framework-integrations.md +3 -3
  15. package/src/index.js +37 -37
  16. package/src/styles/base.js +8 -8
  17. package/src/styles/{web-chat-components.js → live-chat-components.js} +114 -114
  18. package/src/styles/{web-chat-core.js → live-chat-core.js} +30 -30
  19. package/src/styles/{web-chat-features.js → live-chat-features.js} +20 -20
  20. package/src/styles/{web-chat-views.js → live-chat-views.js} +137 -137
  21. package/src/styles/live-chat.js +17 -0
  22. package/src/styles/{webChatCustomStyles.js → liveChatCustomStyles.js} +16 -16
  23. package/src/styles/styles.js +3 -3
  24. package/src/widgets/{WebChatWidget.js → LiveChatWidget.js} +166 -166
  25. package/src/widgets/WidgetFactory.js +2 -2
  26. package/src/widgets/{web-chat/WebChatState.js → live-chat/LiveChatState.js} +1 -1
  27. package/src/widgets/{web-chat/components/WebChatLauncher.js → live-chat/components/LiveChatLauncher.js} +15 -15
  28. package/src/widgets/{web-chat/components/WebChatPanel.js → live-chat/components/LiveChatPanel.js} +10 -10
  29. package/src/widgets/{web-chat → live-chat}/components/NavigationTabs.js +12 -12
  30. package/src/widgets/{web-chat → live-chat}/views/ChangelogView.js +16 -16
  31. package/src/widgets/{web-chat → live-chat}/views/ChatView.js +90 -90
  32. package/src/widgets/{web-chat → live-chat}/views/ConversationsView.js +23 -23
  33. package/src/widgets/{web-chat → live-chat}/views/HelpView.js +28 -28
  34. package/src/widgets/{web-chat → live-chat}/views/HomeView.js +52 -52
  35. package/src/widgets/{web-chat → live-chat}/views/PreChatFormView.js +16 -16
  36. package/types/index.d.ts +11 -9
  37. package/src/styles/web-chat.js +0 -17
package/dist/product7-js.js CHANGED
@@ -724,12 +724,12 @@
724
724
  }
725
725
  }
726
726
 
727
- class WebChatService {
727
+ class LiveChatService {
728
728
  constructor(baseAPI) {
729
729
  this.api = baseAPI;
730
730
  }
731
731
 
732
- async getWebChatSettings() {
732
+ async getLiveChatSettings() {
733
733
  await this.api._ensureSession();
734
734
 
735
735
  if (this.api.mock) {
@@ -744,7 +744,7 @@
744
744
  };
745
745
  }
746
746
 
747
- return this.api._makeRequest('/widget/web-chat/settings', {
747
+ return this.api._makeRequest('/widget/live-chat/settings', {
748
748
  method: 'GET',
749
749
  headers: { Authorization: `Bearer ${this.api.sessionToken}` },
750
750
  });
@@ -768,7 +768,7 @@
768
768
  };
769
769
  }
770
770
 
771
- return this.api._makeRequest('/widget/web-chat/agents/online', {
771
+ return this.api._makeRequest('/widget/live-chat/agents/online', {
772
772
  method: 'GET',
773
773
  headers: { Authorization: `Bearer ${this.api.sessionToken}` },
774
774
  });
@@ -787,7 +787,7 @@
787
787
  }
788
788
 
789
789
  const endpoint = this.api._getEndpointWithParams(
790
- '/widget/web-chat/conversations',
790
+ '/widget/live-chat/conversations',
791
791
  options
792
792
  );
793
793
  return this.api._makeRequest(endpoint, {
@@ -809,7 +809,7 @@
809
809
  }
810
810
 
811
811
  return this.api._makeRequest(
812
- `/widget/web-chat/conversations/${conversationId}`,
812
+ `/widget/live-chat/conversations/${conversationId}`,
813
813
  {
814
814
  method: 'GET',
815
815
  headers: { Authorization: `Bearer ${this.api.sessionToken}` },
@@ -843,7 +843,7 @@
843
843
  return { status: true, data: newConv };
844
844
  }
845
845
 
846
- return this.api._makeRequest('/widget/web-chat/conversations', {
846
+ return this.api._makeRequest('/widget/live-chat/conversations', {
847
847
  method: 'POST',
848
848
  headers: {
849
849
  'Content-Type': 'application/json',
@@ -877,7 +877,7 @@
877
877
  }
878
878
 
879
879
  return this.api._makeRequest(
880
- `/widget/web-chat/conversations/${conversationId}/messages`,
880
+ `/widget/live-chat/conversations/${conversationId}/messages`,
881
881
  {
882
882
  method: 'POST',
883
883
  headers: {
@@ -906,7 +906,7 @@
906
906
  };
907
907
  }
908
908
 
909
- return this.api._makeRequest('/widget/web-chat/unread', {
909
+ return this.api._makeRequest('/widget/live-chat/unread', {
910
910
  method: 'GET',
911
911
  headers: { Authorization: `Bearer ${this.api.sessionToken}` },
912
912
  });
@@ -920,7 +920,7 @@
920
920
  }
921
921
 
922
922
  return this.api._makeRequest(
923
- `/widget/web-chat/conversations/${conversationId}/read`,
923
+ `/widget/live-chat/conversations/${conversationId}/read`,
924
924
  {
925
925
  method: 'POST',
926
926
  headers: { Authorization: `Bearer ${this.api.sessionToken}` },
@@ -942,7 +942,7 @@
942
942
 
943
943
  const params = { ...options };
944
944
  const endpoint = this.api._getEndpointWithParams(
945
- `/widget/web-chat/conversations/${conversationId}/messages`,
945
+ `/widget/live-chat/conversations/${conversationId}/messages`,
946
946
  params
947
947
  );
948
948
  return this.api._makeRequest(endpoint, {
@@ -959,7 +959,7 @@
959
959
  return { status: true, url: `https://mock-cdn.example.com/${filename}` };
960
960
  }
961
961
 
962
- return this.api._makeRequest('/widget/web-chat/upload', {
962
+ return this.api._makeRequest('/widget/live-chat/upload', {
963
963
  method: 'POST',
964
964
  headers: {
965
965
  'Content-Type': 'application/json',
@@ -981,7 +981,7 @@
981
981
  }
982
982
 
983
983
  return this.api._makeRequest(
984
- `/widget/web-chat/conversations/${conversationId}/rating`,
984
+ `/widget/live-chat/conversations/${conversationId}/rating`,
985
985
  {
986
986
  method: 'POST',
987
987
  headers: {
@@ -1001,7 +1001,7 @@
1001
1001
  }
1002
1002
 
1003
1003
  return this.api._makeRequest(
1004
- `/widget/web-chat/conversations/${conversationId}/typing`,
1004
+ `/widget/live-chat/conversations/${conversationId}/typing`,
1005
1005
  {
1006
1006
  method: 'POST',
1007
1007
  headers: {
@@ -1464,7 +1464,7 @@
1464
1464
 
1465
1465
  this.feedback = new FeedbackService(this);
1466
1466
  this.survey = new SurveyService(this);
1467
- this.webChat = new WebChatService(this);
1467
+ this.liveChat = new LiveChatService(this);
1468
1468
  this.help = new HelpService(this);
1469
1469
  this.changelog = new ChangelogService(this);
1470
1470
  }
@@ -1485,52 +1485,52 @@
1485
1485
  return this.survey.dismissSurvey(surveyId);
1486
1486
  }
1487
1487
 
1488
- async getWebChatSettings() {
1489
- return this.webChat.getWebChatSettings();
1488
+ async getLiveChatSettings() {
1489
+ return this.liveChat.getLiveChatSettings();
1490
1490
  }
1491
1491
 
1492
1492
  async checkAgentsOnline() {
1493
- return this.webChat.checkAgentsOnline();
1493
+ return this.liveChat.checkAgentsOnline();
1494
1494
  }
1495
1495
 
1496
1496
  async getConversations(options) {
1497
- return this.webChat.getConversations(options);
1497
+ return this.liveChat.getConversations(options);
1498
1498
  }
1499
1499
 
1500
1500
  async getConversation(conversationId) {
1501
- return this.webChat.getConversation(conversationId);
1501
+ return this.liveChat.getConversation(conversationId);
1502
1502
  }
1503
1503
 
1504
1504
  async getMessages(conversationId, options) {
1505
- return this.webChat.getMessages(conversationId, options);
1505
+ return this.liveChat.getMessages(conversationId, options);
1506
1506
  }
1507
1507
 
1508
1508
  async startConversation(data) {
1509
- return this.webChat.startConversation(data);
1509
+ return this.liveChat.startConversation(data);
1510
1510
  }
1511
1511
 
1512
1512
  async sendMessage(conversationId, data) {
1513
- return this.webChat.sendMessage(conversationId, data);
1513
+ return this.liveChat.sendMessage(conversationId, data);
1514
1514
  }
1515
1515
 
1516
1516
  async uploadFile(base64Data, filename) {
1517
- return this.webChat.uploadFile(base64Data, filename);
1517
+ return this.liveChat.uploadFile(base64Data, filename);
1518
1518
  }
1519
1519
 
1520
1520
  async sendTypingIndicator(conversationId, isTyping) {
1521
- return this.webChat.sendTypingIndicator(conversationId, isTyping);
1521
+ return this.liveChat.sendTypingIndicator(conversationId, isTyping);
1522
1522
  }
1523
1523
 
1524
1524
  async markConversationAsRead(conversationId) {
1525
- return this.webChat.markConversationAsRead(conversationId);
1525
+ return this.liveChat.markConversationAsRead(conversationId);
1526
1526
  }
1527
1527
 
1528
1528
  async getUnreadCount() {
1529
- return this.webChat.getUnreadCount();
1529
+ return this.liveChat.getUnreadCount();
1530
1530
  }
1531
1531
 
1532
1532
  async submitRating(conversationId, data) {
1533
- return this.webChat.submitRating(conversationId, data);
1533
+ return this.liveChat.submitRating(conversationId, data);
1534
1534
  }
1535
1535
 
1536
1536
  async identify(metadata) {
@@ -1695,7 +1695,7 @@
1695
1695
 
1696
1696
  const baseStyles = `
1697
1697
  .feedback-widget,
1698
- .web-chat-widget,
1698
+ .live-chat-widget,
1699
1699
  .changelog-widget,
1700
1700
  .feedback-survey,
1701
1701
  .feedback-panel,
@@ -1710,9 +1710,9 @@
1710
1710
  .feedback-widget *,
1711
1711
  .feedback-widget *::before,
1712
1712
  .feedback-widget *::after,
1713
- .web-chat-widget *,
1714
- .web-chat-widget *::before,
1715
- .web-chat-widget *::after,
1713
+ .live-chat-widget *,
1714
+ .live-chat-widget *::before,
1715
+ .live-chat-widget *::after,
1716
1716
  .changelog-widget *,
1717
1717
  .changelog-widget *::before,
1718
1718
  .changelog-widget *::after,
@@ -1736,7 +1736,7 @@
1736
1736
 
1737
1737
  @media (prefers-reduced-motion: reduce) {
1738
1738
  .feedback-widget *,
1739
- .web-chat-widget *,
1739
+ .live-chat-widget *,
1740
1740
  .changelog-widget *,
1741
1741
  .feedback-survey * {
1742
1742
  transition: none !important;
@@ -1751,9 +1751,9 @@
1751
1751
  .sdk-notification,
1752
1752
  .changelog-widget,
1753
1753
  .changelog-modal,
1754
- .web-chat-widget,
1755
- .web-chat-launcher,
1756
- .web-chat-panel,
1754
+ .live-chat-widget,
1755
+ .live-chat-launcher,
1756
+ .live-chat-panel,
1757
1757
  .feedback-survey,
1758
1758
  .feedback-survey-backdrop {
1759
1759
  display: none !important;
@@ -4204,19 +4204,19 @@
4204
4204
  }
4205
4205
  `;
4206
4206
 
4207
- const webChatComponentsStyles = `
4207
+ const liveChatComponentsStyles = `
4208
4208
 
4209
4209
  /* ========================================
4210
4210
  MESSAGES
4211
4211
  ======================================== */
4212
4212
 
4213
- .web-chat-message {
4213
+ .live-chat-message {
4214
4214
  display: flex;
4215
4215
  gap: var(--spacing-2);
4216
4216
  max-width: 75%;
4217
4217
  }
4218
4218
 
4219
- .web-chat-message-system {
4219
+ .live-chat-message-system {
4220
4220
  align-self: center;
4221
4221
  display: flex;
4222
4222
  align-items: center;
@@ -4225,15 +4225,15 @@
4225
4225
  width: 100%;
4226
4226
  }
4227
4227
 
4228
- .web-chat-message-system::before,
4229
- .web-chat-message-system::after {
4228
+ .live-chat-message-system::before,
4229
+ .live-chat-message-system::after {
4230
4230
  content: '';
4231
4231
  flex: 1;
4232
4232
  height: 1px;
4233
4233
  background: var(--msg-border);
4234
4234
  }
4235
4235
 
4236
- .web-chat-message-system-text {
4236
+ .live-chat-message-system-text {
4237
4237
  font-size: 0.875rem;
4238
4238
  font-weight: 500;
4239
4239
  color: var(--msg-text-secondary);
@@ -4242,7 +4242,7 @@
4242
4242
  }
4243
4243
 
4244
4244
  /* Rich join/leave system event */
4245
- .web-chat-message-system-event {
4245
+ .live-chat-message-system-event {
4246
4246
  align-self: center;
4247
4247
  display: flex;
4248
4248
  flex-direction: column;
@@ -4253,7 +4253,7 @@
4253
4253
  text-align: center;
4254
4254
  }
4255
4255
 
4256
- .web-chat-message-system-event-avatar {
4256
+ .live-chat-message-system-event-avatar {
4257
4257
  width: 3rem;
4258
4258
  height: 3rem;
4259
4259
  border-radius: var(--radius-full);
@@ -4270,103 +4270,103 @@
4270
4270
  margin-bottom: 4px;
4271
4271
  }
4272
4272
 
4273
- .web-chat-message-system-event-avatar img {
4273
+ .live-chat-message-system-event-avatar img {
4274
4274
  width: 60%;
4275
4275
  height: 60%;
4276
4276
  object-fit: contain;
4277
4277
  }
4278
4278
 
4279
- .web-chat-message-system-event-name {
4279
+ .live-chat-message-system-event-name {
4280
4280
  font-size: 0.875rem;
4281
4281
  font-weight: var(--font-weight-semibold);
4282
4282
  color: var(--msg-text);
4283
4283
  line-height: 1.3;
4284
4284
  }
4285
4285
 
4286
- .web-chat-message-system-event-action {
4286
+ .live-chat-message-system-event-action {
4287
4287
  font-size: 0.875rem;
4288
4288
  font-weight: 500;
4289
4289
  color: var(--msg-text-secondary);
4290
4290
  margin-top: -2px;
4291
4291
  }
4292
4292
 
4293
- .web-chat-message-system-event-time {
4293
+ .live-chat-message-system-event-time {
4294
4294
  font-size: 0.875rem;
4295
4295
  font-weight: 500;
4296
4296
  color: var(--msg-text-tertiary);
4297
4297
  }
4298
4298
 
4299
- .web-chat-message-own {
4299
+ .live-chat-message-own {
4300
4300
  align-self: flex-end;
4301
4301
  flex-direction: column;
4302
4302
  align-items: flex-end;
4303
4303
  }
4304
4304
 
4305
- .web-chat-message-received {
4305
+ .live-chat-message-received {
4306
4306
  align-self: flex-start;
4307
4307
  flex-direction: column;
4308
4308
  }
4309
4309
 
4310
- .web-chat-message-row {
4310
+ .live-chat-message-row {
4311
4311
  display: flex;
4312
4312
  align-items: flex-end;
4313
4313
  gap: var(--spacing-2);
4314
4314
  }
4315
4315
 
4316
- .web-chat-message-wrapper {
4316
+ .live-chat-message-wrapper {
4317
4317
  display: flex;
4318
4318
  flex-direction: column;
4319
4319
  }
4320
4320
 
4321
- .web-chat-message-avatar {
4321
+ .live-chat-message-avatar {
4322
4322
  display: none;
4323
4323
  }
4324
4324
 
4325
- .web-chat-message-sender {
4325
+ .live-chat-message-sender {
4326
4326
  display: none;
4327
4327
  }
4328
4328
 
4329
- .web-chat-message-bubble {
4329
+ .live-chat-message-bubble {
4330
4330
  padding: 7px 13px;
4331
4331
  border-radius: 1.125rem;
4332
4332
  word-wrap: break-word;
4333
4333
  max-width: 100%;
4334
4334
  }
4335
4335
 
4336
- .web-chat-message-own .web-chat-message-bubble {
4336
+ .live-chat-message-own .live-chat-message-bubble {
4337
4337
  background: var(--msg-bg-bubble-own);
4338
4338
  color: #111827;
4339
4339
  border-bottom-right-radius: 0.25rem;
4340
4340
  }
4341
4341
 
4342
- .web-chat-message-received .web-chat-message-bubble {
4342
+ .live-chat-message-received .live-chat-message-bubble {
4343
4343
  background: var(--msg-bg-bubble-received);
4344
4344
  color: #ffffff;
4345
4345
  border-bottom-left-radius: 0.25rem;
4346
4346
  }
4347
4347
 
4348
- .web-chat-message-content {
4348
+ .live-chat-message-content {
4349
4349
  font-size: 0.875rem;
4350
4350
  font-weight: 500;
4351
4351
  line-height: var(--line-height-relaxed);
4352
4352
  }
4353
4353
 
4354
- .web-chat-message-content p {
4354
+ .live-chat-message-content p {
4355
4355
  margin: 0 0 0.5rem;
4356
4356
  }
4357
4357
 
4358
- .web-chat-message-content p:last-child {
4358
+ .live-chat-message-content p:last-child {
4359
4359
  margin-bottom: 0;
4360
4360
  }
4361
4361
 
4362
- .web-chat-message-time {
4362
+ .live-chat-message-time {
4363
4363
  font-size: var(--font-size-xs);
4364
4364
  color: var(--msg-text-tertiary);
4365
4365
  margin-top: 0.25rem;
4366
4366
  padding: 0 var(--spacing-1);
4367
4367
  }
4368
4368
 
4369
- .web-chat-message-meta {
4369
+ .live-chat-message-meta {
4370
4370
  display: flex;
4371
4371
  align-items: center;
4372
4372
  gap: 0.375rem;
@@ -4376,19 +4376,19 @@
4376
4376
  padding: 0 var(--spacing-1);
4377
4377
  }
4378
4378
 
4379
- .web-chat-message-meta-own {
4379
+ .live-chat-message-meta-own {
4380
4380
  justify-content: flex-end;
4381
4381
  }
4382
4382
 
4383
- .web-chat-message-sent-status {
4383
+ .live-chat-message-sent-status {
4384
4384
  color: var(--msg-text-muted);
4385
4385
  }
4386
4386
 
4387
- .web-chat-message-optimistic .web-chat-message-bubble {
4387
+ .live-chat-message-optimistic .live-chat-message-bubble {
4388
4388
  opacity: 0.7;
4389
4389
  }
4390
4390
 
4391
- .web-chat-message-image {
4391
+ .live-chat-message-image {
4392
4392
  max-width: 220px;
4393
4393
  max-height: 200px;
4394
4394
  width: auto;
@@ -4400,7 +4400,7 @@
4400
4400
  display: block;
4401
4401
  }
4402
4402
 
4403
- .web-chat-message-file {
4403
+ .live-chat-message-file {
4404
4404
  display: inline-flex;
4405
4405
  align-items: center;
4406
4406
  gap: var(--spacing-2);
@@ -4417,21 +4417,21 @@
4417
4417
  cursor: pointer;
4418
4418
  }
4419
4419
 
4420
- .web-chat-message-file:hover {
4420
+ .live-chat-message-file:hover {
4421
4421
  background: var(--color-neutral-200);
4422
4422
  }
4423
4423
 
4424
- .web-chat-file-download-icon {
4424
+ .live-chat-file-download-icon {
4425
4425
  margin-left: auto;
4426
4426
  opacity: 0.5;
4427
4427
  flex-shrink: 0;
4428
4428
  }
4429
4429
 
4430
- .web-chat-message-file:hover .web-chat-file-download-icon {
4430
+ .live-chat-message-file:hover .live-chat-file-download-icon {
4431
4431
  opacity: 1;
4432
4432
  }
4433
4433
 
4434
- .web-chat-closed-banner {
4434
+ .live-chat-closed-banner {
4435
4435
  display: flex;
4436
4436
  align-items: center;
4437
4437
  justify-content: center;
@@ -4449,7 +4449,7 @@
4449
4449
  SCROLL PILL & CONNECTION BANNER
4450
4450
  ======================================== */
4451
4451
 
4452
- .web-chat-scroll-pill {
4452
+ .live-chat-scroll-pill {
4453
4453
  position: absolute;
4454
4454
  bottom: 80px;
4455
4455
  left: 50%;
@@ -4469,7 +4469,7 @@
4469
4469
  white-space: nowrap;
4470
4470
  }
4471
4471
 
4472
- .web-chat-connection-banner {
4472
+ .live-chat-connection-banner {
4473
4473
  display: flex;
4474
4474
  align-items: center;
4475
4475
  justify-content: center;
@@ -4482,7 +4482,7 @@
4482
4482
  flex-shrink: 0;
4483
4483
  }
4484
4484
 
4485
- .web-chat-widget.theme-dark .web-chat-connection-banner {
4485
+ .live-chat-widget.theme-dark .live-chat-connection-banner {
4486
4486
  background: rgba(245, 158, 11, 0.15);
4487
4487
  color: #fbbf24;
4488
4488
  }
@@ -4491,7 +4491,7 @@
4491
4491
  CHAT HEADER
4492
4492
  ======================================== */
4493
4493
 
4494
- .web-chat-chat-header {
4494
+ .live-chat-chat-header {
4495
4495
  display: flex;
4496
4496
  align-items: center;
4497
4497
  gap: var(--spacing-2);
@@ -4499,7 +4499,7 @@
4499
4499
  border-bottom: 1px solid var(--msg-border);
4500
4500
  }
4501
4501
 
4502
- .web-chat-chat-header-avatar {
4502
+ .live-chat-chat-header-avatar {
4503
4503
  width: 2.25rem;
4504
4504
  height: 2.25rem;
4505
4505
  border-radius: var(--radius-lg);
@@ -4513,19 +4513,19 @@
4513
4513
  padding: 4px;
4514
4514
  }
4515
4515
 
4516
- .web-chat-chat-header-avatar img {
4516
+ .live-chat-chat-header-avatar img {
4517
4517
  width: 100%;
4518
4518
  height: 100%;
4519
4519
  object-fit: contain;
4520
4520
  }
4521
4521
 
4522
- .web-chat-chat-header-avatar svg {
4522
+ .live-chat-chat-header-avatar svg {
4523
4523
  width: 1.25rem;
4524
4524
  height: 1.25rem;
4525
4525
  color: var(--msg-text-secondary);
4526
4526
  }
4527
4527
 
4528
- .web-chat-chat-header-info {
4528
+ .live-chat-chat-header-info {
4529
4529
  flex: 1;
4530
4530
  display: flex;
4531
4531
  flex-direction: column;
@@ -4533,27 +4533,27 @@
4533
4533
  min-width: 0;
4534
4534
  }
4535
4535
 
4536
- .web-chat-chat-title {
4536
+ .live-chat-chat-title {
4537
4537
  font-size: var(--font-size-base);
4538
4538
  font-weight: var(--font-weight-semibold);
4539
4539
  color: var(--msg-text);
4540
4540
  line-height: 1.4;
4541
4541
  }
4542
4542
 
4543
- .web-chat-chat-subtitle {
4543
+ .live-chat-chat-subtitle {
4544
4544
  font-size: var(--font-size-sm);
4545
4545
  color: var(--msg-text-secondary);
4546
4546
  line-height: 1.4;
4547
4547
  }
4548
4548
 
4549
- .web-chat-chat-header-actions {
4549
+ .live-chat-chat-header-actions {
4550
4550
  display: flex;
4551
4551
  align-items: center;
4552
4552
  gap: var(--spacing-1);
4553
4553
  flex-shrink: 0;
4554
4554
  }
4555
4555
 
4556
- .web-chat-chat-messages {
4556
+ .live-chat-chat-messages {
4557
4557
  flex: 1;
4558
4558
  overflow-y: auto;
4559
4559
  padding: var(--spacing-5) var(--spacing-4);
@@ -4562,7 +4562,7 @@
4562
4562
  gap: var(--spacing-4);
4563
4563
  }
4564
4564
 
4565
- .web-chat-chat-empty {
4565
+ .live-chat-chat-empty {
4566
4566
  flex: 1;
4567
4567
  display: flex;
4568
4568
  flex-direction: column;
@@ -4572,11 +4572,11 @@
4572
4572
  padding: var(--spacing-10);
4573
4573
  }
4574
4574
 
4575
- .web-chat-chat-empty-avatars {
4575
+ .live-chat-chat-empty-avatars {
4576
4576
  margin-bottom: var(--spacing-4);
4577
4577
  }
4578
4578
 
4579
- .web-chat-chat-empty-logo {
4579
+ .live-chat-chat-empty-logo {
4580
4580
  width: 48px;
4581
4581
  height: 48px;
4582
4582
  border-radius: var(--radius-xl);
@@ -4588,13 +4588,13 @@
4588
4588
  background: var(--msg-bg-surface);
4589
4589
  }
4590
4590
 
4591
- .web-chat-chat-empty-logo img {
4591
+ .live-chat-chat-empty-logo img {
4592
4592
  width: 100%;
4593
4593
  height: 100%;
4594
4594
  object-fit: contain;
4595
4595
  }
4596
4596
 
4597
- .web-chat-chat-empty h3 {
4597
+ .live-chat-chat-empty h3 {
4598
4598
  margin: 0 0 var(--spacing-2);
4599
4599
  font-size: var(--font-size-base);
4600
4600
  font-weight: var(--font-weight-semibold);
@@ -4610,11 +4610,11 @@
4610
4610
  EMOJI PICKER
4611
4611
  ======================================== */
4612
4612
 
4613
- .web-chat-emoji-picker-container {
4613
+ .live-chat-emoji-picker-container {
4614
4614
  padding: 0 var(--spacing-3) var(--spacing-2);
4615
4615
  }
4616
4616
 
4617
- .web-chat-emoji-picker-container emoji-picker {
4617
+ .live-chat-emoji-picker-container emoji-picker {
4618
4618
  width: 100%;
4619
4619
  height: 320px;
4620
4620
  border-radius: var(--radius-xl);
@@ -4640,7 +4640,7 @@
4640
4640
  --hover-background: var(--msg-bg-hover);
4641
4641
  }
4642
4642
 
4643
- .web-chat-widget.theme-dark .web-chat-emoji-picker-container emoji-picker {
4643
+ .live-chat-widget.theme-dark .live-chat-emoji-picker-container emoji-picker {
4644
4644
  --background: var(--msg-bg);
4645
4645
  --border-color: var(--msg-border);
4646
4646
  --category-font-color: var(--msg-text-secondary);
@@ -4649,7 +4649,7 @@
4649
4649
  --hover-background: var(--msg-bg-hover);
4650
4650
  }
4651
4651
 
4652
- .web-chat-chat-compose {
4652
+ .live-chat-chat-compose {
4653
4653
  display: flex;
4654
4654
  flex-direction: column;
4655
4655
  padding: var(--spacing-3) var(--spacing-4);
@@ -4659,11 +4659,11 @@
4659
4659
  border-radius: var(--radius-xl);
4660
4660
  }
4661
4661
 
4662
- .web-chat-compose-input-wrapper {
4662
+ .live-chat-compose-input-wrapper {
4663
4663
  width: 100%;
4664
4664
  }
4665
4665
 
4666
- .web-chat-compose-input {
4666
+ .live-chat-compose-input {
4667
4667
  width: 100%;
4668
4668
  background: transparent;
4669
4669
  border: none;
@@ -4677,33 +4677,33 @@
4677
4677
  padding: var(--spacing-1) 0;
4678
4678
  }
4679
4679
 
4680
- .web-chat-compose-input::placeholder {
4680
+ .live-chat-compose-input::placeholder {
4681
4681
  color: var(--msg-text-tertiary);
4682
4682
  }
4683
4683
 
4684
- .web-chat-compose-input:focus {
4684
+ .live-chat-compose-input:focus {
4685
4685
  outline: none;
4686
4686
  }
4687
4687
 
4688
- .web-chat-chat-compose:focus-within {
4688
+ .live-chat-chat-compose:focus-within {
4689
4689
  border-color: var(--color-primary-border);
4690
4690
  box-shadow: 0 0 0 3px var(--color-primary-light);
4691
4691
  }
4692
4692
 
4693
- .web-chat-compose-bottom {
4693
+ .live-chat-compose-bottom {
4694
4694
  display: flex;
4695
4695
  align-items: center;
4696
4696
  justify-content: space-between;
4697
4697
  margin-top: var(--spacing-2);
4698
4698
  }
4699
4699
 
4700
- .web-chat-compose-actions {
4700
+ .live-chat-compose-actions {
4701
4701
  display: flex;
4702
4702
  align-items: center;
4703
4703
  gap: var(--spacing-1);
4704
4704
  }
4705
4705
 
4706
- .web-chat-compose-send {
4706
+ .live-chat-compose-send {
4707
4707
  width: 2.25rem;
4708
4708
  height: 2.25rem;
4709
4709
  background: transparent;
@@ -4718,43 +4718,43 @@
4718
4718
  flex-shrink: 0;
4719
4719
  }
4720
4720
 
4721
- .web-chat-compose-send:hover:not(:disabled) {
4721
+ .live-chat-compose-send:hover:not(:disabled) {
4722
4722
  background: var(--color-primary);
4723
4723
  border-color: var(--color-primary);
4724
4724
  color: var(--msg-bg);
4725
4725
  }
4726
4726
 
4727
- .web-chat-compose-send:active:not(:disabled) {
4727
+ .live-chat-compose-send:active:not(:disabled) {
4728
4728
  transform: translateY(1px);
4729
4729
  transition-duration: 100ms;
4730
4730
  }
4731
4731
 
4732
- .web-chat-compose-send:disabled {
4732
+ .live-chat-compose-send:disabled {
4733
4733
  color: var(--color-neutral-300);
4734
4734
  border-color: var(--color-neutral-200);
4735
4735
  cursor: not-allowed;
4736
4736
  }
4737
4737
 
4738
- .web-chat-compose-send svg {
4738
+ .live-chat-compose-send svg {
4739
4739
  color: inherit;
4740
4740
  }
4741
4741
 
4742
- .web-chat-compose-file-input {
4742
+ .live-chat-compose-file-input {
4743
4743
  display: none;
4744
4744
  }
4745
4745
 
4746
- .web-chat-compose-attach {
4746
+ .live-chat-compose-attach {
4747
4747
  width: 2rem;
4748
4748
  height: 2rem;
4749
4749
  flex-shrink: 0;
4750
4750
  color: var(--msg-text-secondary);
4751
4751
  }
4752
4752
 
4753
- .web-chat-compose-attach:hover {
4753
+ .live-chat-compose-attach:hover {
4754
4754
  color: var(--msg-text);
4755
4755
  }
4756
4756
 
4757
- .web-chat-compose-attach svg {
4757
+ .live-chat-compose-attach svg {
4758
4758
  width: 1.25rem;
4759
4759
  height: 1.25rem;
4760
4760
  }
@@ -4763,7 +4763,7 @@
4763
4763
  TYPING INDICATOR
4764
4764
  ======================================== */
4765
4765
 
4766
- .web-chat-typing-indicator {
4766
+ .live-chat-typing-indicator {
4767
4767
  display: none;
4768
4768
  align-items: center;
4769
4769
  gap: var(--spacing-2);
@@ -4771,7 +4771,7 @@
4771
4771
  margin: var(--spacing-1) 0;
4772
4772
  }
4773
4773
 
4774
- .web-chat-typing-dots {
4774
+ .live-chat-typing-dots {
4775
4775
  display: flex;
4776
4776
  align-items: center;
4777
4777
  gap: 4px;
@@ -4780,19 +4780,19 @@
4780
4780
  border-radius: var(--radius-2xl);
4781
4781
  }
4782
4782
 
4783
- .web-chat-typing-dots span {
4783
+ .live-chat-typing-dots span {
4784
4784
  width: 6px;
4785
4785
  height: 6px;
4786
4786
  background: var(--color-neutral-400);
4787
4787
  border-radius: var(--radius-full);
4788
- animation: web-chat-typing-bounce 1.4s infinite ease-in-out;
4788
+ animation: live-chat-typing-bounce 1.4s infinite ease-in-out;
4789
4789
  }
4790
4790
 
4791
- .web-chat-typing-dots span:nth-child(1) { animation-delay: -0.32s; }
4792
- .web-chat-typing-dots span:nth-child(2) { animation-delay: -0.16s; }
4793
- .web-chat-typing-dots span:nth-child(3) { animation-delay: 0s; }
4791
+ .live-chat-typing-dots span:nth-child(1) { animation-delay: -0.32s; }
4792
+ .live-chat-typing-dots span:nth-child(2) { animation-delay: -0.16s; }
4793
+ .live-chat-typing-dots span:nth-child(3) { animation-delay: 0s; }
4794
4794
 
4795
- .web-chat-typing-text {
4795
+ .live-chat-typing-text {
4796
4796
  font-size: var(--font-size-xs);
4797
4797
  color: var(--msg-text-tertiary);
4798
4798
  }
@@ -4801,23 +4801,23 @@
4801
4801
  NAVIGATION TABS
4802
4802
  ======================================== */
4803
4803
 
4804
- .web-chat-panel-nav {
4804
+ .live-chat-panel-nav {
4805
4805
  border-top: 1px solid var(--msg-border);
4806
4806
  background: var(--msg-bg);
4807
4807
  }
4808
4808
 
4809
- .web-chat-nav-tabs {
4809
+ .live-chat-nav-tabs {
4810
4810
  display: flex;
4811
4811
  padding: var(--spacing-1) var(--spacing-2) 0;
4812
4812
  gap: var(--spacing-1);
4813
4813
  }
4814
4814
 
4815
- .web-chat-nav-footer {
4815
+ .live-chat-nav-footer {
4816
4816
  padding: 2px var(--spacing-2) var(--spacing-2);
4817
4817
  text-align: center;
4818
4818
  }
4819
4819
 
4820
- .web-chat-powered-by {
4820
+ .live-chat-powered-by {
4821
4821
  display: inline-flex;
4822
4822
  align-items: center;
4823
4823
  gap: 4px;
@@ -4827,20 +4827,20 @@
4827
4827
  transition: color var(--transition-base);
4828
4828
  }
4829
4829
 
4830
- .web-chat-powered-by:hover {
4830
+ .live-chat-powered-by:hover {
4831
4831
  color: var(--msg-text-secondary);
4832
4832
  }
4833
4833
 
4834
- .web-chat-powered-by svg {
4834
+ .live-chat-powered-by svg {
4835
4835
  width: 12px;
4836
4836
  height: 14px;
4837
4837
  }
4838
4838
 
4839
- .web-chat-powered-by strong {
4839
+ .live-chat-powered-by strong {
4840
4840
  font-weight: var(--font-weight-semibold);
4841
4841
  }
4842
4842
 
4843
- .web-chat-nav-tab {
4843
+ .live-chat-nav-tab {
4844
4844
  flex: 1;
4845
4845
  display: flex;
4846
4846
  flex-direction: column;
@@ -4855,21 +4855,21 @@
4855
4855
  position: relative;
4856
4856
  }
4857
4857
 
4858
- .web-chat-nav-tab:hover {
4858
+ .live-chat-nav-tab:hover {
4859
4859
  background: transparent;
4860
4860
  }
4861
4861
 
4862
- .web-chat-nav-tab:active {
4862
+ .live-chat-nav-tab:active {
4863
4863
  transform: translateY(1px);
4864
4864
  transition-duration: 100ms;
4865
4865
  }
4866
4866
 
4867
- .web-chat-nav-tab:hover .web-chat-nav-icon,
4868
- .web-chat-nav-tab:hover .web-chat-nav-label {
4867
+ .live-chat-nav-tab:hover .live-chat-nav-icon,
4868
+ .live-chat-nav-tab:hover .live-chat-nav-label {
4869
4869
  color: var(--msg-text);
4870
4870
  }
4871
4871
 
4872
- .web-chat-nav-icon {
4872
+ .live-chat-nav-icon {
4873
4873
  color: var(--msg-text-secondary);
4874
4874
  transition: color var(--transition-base);
4875
4875
  display: flex;
@@ -4879,25 +4879,25 @@
4879
4879
  height: 26px;
4880
4880
  }
4881
4881
 
4882
- .web-chat-nav-icon svg {
4882
+ .live-chat-nav-icon svg {
4883
4883
  width: 26px;
4884
4884
  height: 26px;
4885
4885
  display: block;
4886
4886
  }
4887
4887
 
4888
- .web-chat-nav-label {
4888
+ .live-chat-nav-label {
4889
4889
  font-size: var(--font-size-sm);
4890
4890
  font-weight: var(--font-weight-medium);
4891
4891
  color: var(--msg-text-secondary);
4892
4892
  transition: color var(--transition-base);
4893
4893
  }
4894
4894
 
4895
- .web-chat-nav-tab.active .web-chat-nav-icon,
4896
- .web-chat-nav-tab.active .web-chat-nav-label {
4895
+ .live-chat-nav-tab.active .live-chat-nav-icon,
4896
+ .live-chat-nav-tab.active .live-chat-nav-label {
4897
4897
  color: var(--color-primary);
4898
4898
  }
4899
4899
 
4900
- .web-chat-nav-badge {
4900
+ .live-chat-nav-badge {
4901
4901
  position: absolute;
4902
4902
  top: var(--spacing-1);
4903
4903
  right: calc(50% - 16px);
@@ -4918,11 +4918,11 @@
4918
4918
  PRECHAT
4919
4919
  ======================================== */
4920
4920
 
4921
- .web-chat-prechat-view {
4921
+ .live-chat-prechat-view {
4922
4922
  position: relative;
4923
4923
  }
4924
4924
 
4925
- .web-chat-prechat-overlay {
4925
+ .live-chat-prechat-overlay {
4926
4926
  position: absolute;
4927
4927
  top: 0;
4928
4928
  left: 0;
@@ -4937,7 +4937,7 @@
4937
4937
  backdrop-filter: blur(2px);
4938
4938
  }
4939
4939
 
4940
- .web-chat-prechat-card {
4940
+ .live-chat-prechat-card {
4941
4941
  background: var(--msg-bg);
4942
4942
  border-radius: var(--radius-xl);
4943
4943
  padding: var(--spacing-6) var(--spacing-6) var(--spacing-5);
@@ -4948,7 +4948,7 @@
4948
4948
  text-align: center;
4949
4949
  }
4950
4950
 
4951
- .web-chat-prechat-icon {
4951
+ .live-chat-prechat-icon {
4952
4952
  display: flex;
4953
4953
  align-items: center;
4954
4954
  justify-content: center;
@@ -4960,33 +4960,33 @@
4960
4960
  margin: 0 auto var(--spacing-4);
4961
4961
  }
4962
4962
 
4963
- .web-chat-prechat-title {
4963
+ .live-chat-prechat-title {
4964
4964
  margin: 0 0 var(--spacing-2);
4965
4965
  font-size: var(--font-size-base);
4966
4966
  font-weight: var(--font-weight-semibold);
4967
4967
  color: var(--msg-text);
4968
4968
  }
4969
4969
 
4970
- .web-chat-prechat-subtitle {
4970
+ .live-chat-prechat-subtitle {
4971
4971
  margin: 0 0 var(--spacing-5);
4972
4972
  font-size: var(--font-size-sm);
4973
4973
  color: var(--msg-text-secondary);
4974
4974
  line-height: var(--line-height-relaxed);
4975
4975
  }
4976
4976
 
4977
- .web-chat-prechat-form {
4977
+ .live-chat-prechat-form {
4978
4978
  display: flex;
4979
4979
  flex-direction: column;
4980
4980
  gap: var(--spacing-2);
4981
4981
  }
4982
4982
 
4983
- .web-chat-prechat-field {
4983
+ .live-chat-prechat-field {
4984
4984
  display: flex;
4985
4985
  flex-direction: column;
4986
4986
  gap: var(--spacing-1);
4987
4987
  }
4988
4988
 
4989
- .web-chat-prechat-input {
4989
+ .live-chat-prechat-input {
4990
4990
  width: 100%;
4991
4991
  padding: var(--spacing-2) var(--spacing-3);
4992
4992
  border: 1px solid var(--msg-border);
@@ -5000,20 +5000,20 @@
5000
5000
  box-sizing: border-box;
5001
5001
  }
5002
5002
 
5003
- .web-chat-prechat-input::placeholder {
5003
+ .live-chat-prechat-input::placeholder {
5004
5004
  color: var(--msg-text-secondary);
5005
5005
  }
5006
5006
 
5007
- .web-chat-prechat-input:focus {
5007
+ .live-chat-prechat-input:focus {
5008
5008
  border-color: var(--color-primary);
5009
5009
  }
5010
5010
 
5011
- .web-chat-prechat-error {
5011
+ .live-chat-prechat-error {
5012
5012
  font-size: var(--font-size-xs);
5013
5013
  color: #dc2626;
5014
5014
  }
5015
5015
 
5016
- .web-chat-prechat-submit {
5016
+ .live-chat-prechat-submit {
5017
5017
  display: flex;
5018
5018
  align-items: center;
5019
5019
  justify-content: center;
@@ -5032,39 +5032,39 @@
5032
5032
  margin-top: var(--spacing-1);
5033
5033
  }
5034
5034
 
5035
- .web-chat-prechat-submit:hover {
5035
+ .live-chat-prechat-submit:hover {
5036
5036
  background: var(--color-primary-hover);
5037
5037
  }
5038
5038
 
5039
- .web-chat-prechat-submit:active {
5039
+ .live-chat-prechat-submit:active {
5040
5040
  transform: translateY(1px);
5041
5041
  transition-duration: 100ms;
5042
5042
  }
5043
5043
 
5044
- .web-chat-prechat-submit:disabled {
5044
+ .live-chat-prechat-submit:disabled {
5045
5045
  opacity: 0.7;
5046
5046
  cursor: not-allowed;
5047
5047
  }
5048
5048
  `;
5049
5049
 
5050
- const webChatCoreStyles = `
5050
+ const liveChatCoreStyles = `
5051
5051
 
5052
- .web-chat-launcher {
5052
+ .live-chat-launcher {
5053
5053
  position: fixed;
5054
5054
  z-index: var(--z-modal);
5055
5055
  }
5056
5056
 
5057
- .web-chat-launcher-right {
5057
+ .live-chat-launcher-right {
5058
5058
  bottom: var(--spacing-5);
5059
5059
  right: var(--spacing-5);
5060
5060
  }
5061
5061
 
5062
- .web-chat-launcher-left {
5062
+ .live-chat-launcher-left {
5063
5063
  bottom: var(--spacing-5);
5064
5064
  left: var(--spacing-5);
5065
5065
  }
5066
5066
 
5067
- .web-chat-launcher-btn {
5067
+ .live-chat-launcher-btn {
5068
5068
  width: 60px;
5069
5069
  height: 60px;
5070
5070
  border-radius: var(--radius-full);
@@ -5080,16 +5080,16 @@
5080
5080
  position: relative;
5081
5081
  }
5082
5082
 
5083
- .web-chat-launcher-btn:hover {
5083
+ .live-chat-launcher-btn:hover {
5084
5084
  box-shadow: var(--shadow-xl);
5085
5085
  }
5086
5086
 
5087
- .web-chat-launcher-btn:active {
5087
+ .live-chat-launcher-btn:active {
5088
5088
  transform: translateY(1px);
5089
5089
  transition-duration: 100ms;
5090
5090
  }
5091
5091
 
5092
- .web-chat-launcher-badge {
5092
+ .live-chat-launcher-badge {
5093
5093
  position: absolute;
5094
5094
  top: -3px;
5095
5095
  right: -3px;
@@ -5110,7 +5110,7 @@
5110
5110
  line-height: 1;
5111
5111
  }
5112
5112
 
5113
- .web-chat-panel {
5113
+ .live-chat-panel {
5114
5114
  position: fixed;
5115
5115
  z-index: var(--z-popover);
5116
5116
  width: 400px;
@@ -5126,7 +5126,7 @@
5126
5126
  visibility 0s linear 180ms;
5127
5127
  }
5128
5128
 
5129
- .web-chat-panel.open {
5129
+ .live-chat-panel.open {
5130
5130
  opacity: 1;
5131
5131
  visibility: visible;
5132
5132
  pointer-events: auto;
@@ -5137,19 +5137,19 @@
5137
5137
  visibility 0s linear 0s;
5138
5138
  }
5139
5139
 
5140
- .web-chat-panel-right {
5140
+ .live-chat-panel-right {
5141
5141
  bottom: 90px;
5142
5142
  right: var(--spacing-5);
5143
5143
  transform-origin: bottom right;
5144
5144
  }
5145
5145
 
5146
- .web-chat-panel-left {
5146
+ .live-chat-panel-left {
5147
5147
  bottom: 90px;
5148
5148
  left: var(--spacing-5);
5149
5149
  transform-origin: bottom left;
5150
5150
  }
5151
5151
 
5152
- .web-chat-panel-content {
5152
+ .live-chat-panel-content {
5153
5153
  background: var(--msg-bg);
5154
5154
  height: 100%;
5155
5155
  border-radius: var(--radius-2xl);
@@ -5160,22 +5160,22 @@
5160
5160
  border: 1px solid var(--msg-border);
5161
5161
  }
5162
5162
 
5163
- .web-chat-panel-content *::-webkit-scrollbar {
5163
+ .live-chat-panel-content *::-webkit-scrollbar {
5164
5164
  display: none;
5165
5165
  }
5166
5166
 
5167
- .web-chat-panel-content * {
5167
+ .live-chat-panel-content * {
5168
5168
  scrollbar-width: none;
5169
5169
  }
5170
5170
 
5171
- .web-chat-panel-views {
5171
+ .live-chat-panel-views {
5172
5172
  flex: 1;
5173
5173
  overflow: hidden;
5174
5174
  display: flex;
5175
5175
  flex-direction: column;
5176
5176
  }
5177
5177
 
5178
- .web-chat-view {
5178
+ .live-chat-view {
5179
5179
  height: 100%;
5180
5180
  display: flex;
5181
5181
  flex-direction: column;
@@ -5183,36 +5183,36 @@
5183
5183
  position: relative;
5184
5184
  }
5185
5185
 
5186
- .web-chat-avatar-stack {
5186
+ .live-chat-avatar-stack {
5187
5187
  display: flex;
5188
5188
  align-items: center;
5189
5189
  }
5190
5190
 
5191
- .web-chat-avatar-stack .sdk-avatar {
5191
+ .live-chat-avatar-stack .sdk-avatar {
5192
5192
  margin-left: -8px;
5193
5193
  }
5194
5194
 
5195
- .web-chat-avatar-stack .sdk-avatar:first-child {
5195
+ .live-chat-avatar-stack .sdk-avatar:first-child {
5196
5196
  margin-left: 0;
5197
5197
  }
5198
5198
 
5199
- .web-chat-avatar-stack-tiny .sdk-avatar {
5199
+ .live-chat-avatar-stack-tiny .sdk-avatar {
5200
5200
  margin-left: -6px;
5201
5201
  }
5202
5202
 
5203
- .web-chat-avatar-stack-tiny .sdk-avatar:first-child {
5203
+ .live-chat-avatar-stack-tiny .sdk-avatar:first-child {
5204
5204
  margin-left: 0;
5205
5205
  }
5206
5206
 
5207
- .web-chat-mobile-close-btn {
5207
+ .live-chat-mobile-close-btn {
5208
5208
  display: none;
5209
5209
  }
5210
5210
 
5211
5211
  @media (max-width: 480px) {
5212
- .web-chat-mobile-close-btn {
5212
+ .live-chat-mobile-close-btn {
5213
5213
  display: flex;
5214
5214
  }
5215
- .web-chat-panel {
5215
+ .live-chat-panel {
5216
5216
  width: 100%;
5217
5217
  height: 100%;
5218
5218
  max-height: 100%;
@@ -5224,20 +5224,20 @@
5224
5224
  transform: translateY(12px) scale(0.98);
5225
5225
  }
5226
5226
 
5227
- .web-chat-panel.open {
5227
+ .live-chat-panel.open {
5228
5228
  transform: translateY(0) scale(1);
5229
5229
  }
5230
5230
 
5231
- .web-chat-panel-content {
5231
+ .live-chat-panel-content {
5232
5232
  border-radius: 0;
5233
5233
  }
5234
5234
 
5235
- .web-chat-launcher {
5235
+ .live-chat-launcher {
5236
5236
  bottom: var(--spacing-4);
5237
5237
  right: var(--spacing-4);
5238
5238
  }
5239
5239
 
5240
- .web-chat-launcher-left {
5240
+ .live-chat-launcher-left {
5241
5241
  left: var(--spacing-4);
5242
5242
  }
5243
5243
  }
@@ -5246,7 +5246,7 @@
5246
5246
  DARK THEME — token overrides only
5247
5247
  ======================================== */
5248
5248
 
5249
- .web-chat-widget.theme-dark {
5249
+ .live-chat-widget.theme-dark {
5250
5250
  /* Web Chat semantic tokens */
5251
5251
  --msg-bg: #0f1317;
5252
5252
  --msg-bg-surface: #1a1e24;
@@ -5289,11 +5289,11 @@
5289
5289
  }
5290
5290
  `;
5291
5291
 
5292
- const webChatFeaturesStyles = `
5292
+ const liveChatFeaturesStyles = `
5293
5293
  /* ========================================
5294
5294
  ATTACHMENTS
5295
5295
  ======================================== */
5296
- .web-chat-compose-attachments-preview {
5296
+ .live-chat-compose-attachments-preview {
5297
5297
  display: none;
5298
5298
  flex-wrap: wrap;
5299
5299
  gap: var(--spacing-2);
@@ -5302,7 +5302,7 @@
5302
5302
  background: var(--msg-bg);
5303
5303
  }
5304
5304
 
5305
- .web-chat-attachment-preview {
5305
+ .live-chat-attachment-preview {
5306
5306
  position: relative;
5307
5307
  width: 56px;
5308
5308
  height: 56px;
@@ -5311,14 +5311,14 @@
5311
5311
  border: 1px solid var(--color-border);
5312
5312
  }
5313
5313
 
5314
- .web-chat-attachment-thumb {
5314
+ .live-chat-attachment-thumb {
5315
5315
  width: 100%;
5316
5316
  height: 100%;
5317
5317
  object-fit: cover;
5318
5318
  display: block;
5319
5319
  }
5320
5320
 
5321
- .web-chat-attachment-file-icon {
5321
+ .live-chat-attachment-file-icon {
5322
5322
  display: flex;
5323
5323
  align-items: center;
5324
5324
  justify-content: center;
@@ -5326,7 +5326,7 @@
5326
5326
  color: var(--color-text-secondary);
5327
5327
  }
5328
5328
 
5329
- .web-chat-attachment-remove {
5329
+ .live-chat-attachment-remove {
5330
5330
  position: absolute;
5331
5331
  top: 2px;
5332
5332
  right: 2px;
@@ -5346,14 +5346,14 @@
5346
5346
  transition: background var(--transition-base);
5347
5347
  }
5348
5348
 
5349
- .web-chat-attachment-remove:hover {
5349
+ .live-chat-attachment-remove:hover {
5350
5350
  background: var(--color-error);
5351
5351
  }
5352
5352
 
5353
5353
  /* ========================================
5354
5354
  EMAIL OVERLAY
5355
5355
  ======================================== */
5356
- .web-chat-email-overlay {
5356
+ .live-chat-email-overlay {
5357
5357
  position: absolute;
5358
5358
  bottom: 0;
5359
5359
  left: 0;
@@ -5366,12 +5366,12 @@
5366
5366
  pointer-events: auto;
5367
5367
  }
5368
5368
 
5369
- .web-chat-email-card {
5369
+ .live-chat-email-card {
5370
5370
  width: 100%;
5371
- animation: web-chat-slide-up 0.25s ease;
5371
+ animation: live-chat-slide-up 0.25s ease;
5372
5372
  }
5373
5373
 
5374
- .web-chat-email-actions {
5374
+ .live-chat-email-actions {
5375
5375
  display: flex;
5376
5376
  gap: var(--spacing-2);
5377
5377
  margin-top: var(--spacing-1);
@@ -5380,7 +5380,7 @@
5380
5380
  /* ========================================
5381
5381
  EMPTY STATE
5382
5382
  ======================================== */
5383
- .web-chat-empty-state {
5383
+ .live-chat-empty-state {
5384
5384
  flex: 1;
5385
5385
  display: flex;
5386
5386
  flex-direction: column;
@@ -5390,19 +5390,19 @@
5390
5390
  padding: var(--spacing-10);
5391
5391
  }
5392
5392
 
5393
- .web-chat-empty-state-icon {
5393
+ .live-chat-empty-state-icon {
5394
5394
  color: var(--msg-text-tertiary);
5395
5395
  margin-bottom: var(--spacing-4);
5396
5396
  }
5397
5397
 
5398
- .web-chat-empty-state h3 {
5398
+ .live-chat-empty-state h3 {
5399
5399
  margin: 0 0 var(--spacing-2);
5400
5400
  font-size: var(--font-size-xl);
5401
5401
  font-weight: var(--font-weight-semibold);
5402
5402
  color: var(--color-text-primary);
5403
5403
  }
5404
5404
 
5405
- .web-chat-empty-state p {
5405
+ .live-chat-empty-state p {
5406
5406
  margin: 0;
5407
5407
  font-size: var(--font-size-base);
5408
5408
  color: var(--color-text-secondary);
@@ -5417,7 +5417,7 @@
5417
5417
  }
5418
5418
  }
5419
5419
 
5420
- @keyframes web-chat-typing-bounce {
5420
+ @keyframes live-chat-typing-bounce {
5421
5421
  0%, 80%, 100% {
5422
5422
  transform: scale(0);
5423
5423
  }
@@ -5426,7 +5426,7 @@
5426
5426
  }
5427
5427
  }
5428
5428
 
5429
- @keyframes web-chat-slide-up {
5429
+ @keyframes live-chat-slide-up {
5430
5430
  from {
5431
5431
  transform: translateY(100%);
5432
5432
  opacity: 0;
@@ -5437,7 +5437,7 @@
5437
5437
  }
5438
5438
  }
5439
5439
 
5440
- @keyframes web-chat-fade-in {
5440
+ @keyframes live-chat-fade-in {
5441
5441
  from {
5442
5442
  opacity: 0;
5443
5443
  }
@@ -5450,27 +5450,27 @@
5450
5450
  RESPONSIVE
5451
5451
  ======================================== */
5452
5452
  @media (max-width: 480px) {
5453
- .web-chat-prechat-overlay {
5453
+ .live-chat-prechat-overlay {
5454
5454
  padding: var(--spacing-4);
5455
5455
  }
5456
- .web-chat-prechat-card {
5456
+ .live-chat-prechat-card {
5457
5457
  max-width: 100%;
5458
5458
  }
5459
5459
  }
5460
5460
  `;
5461
5461
 
5462
- const webChatViewsStyles = `
5462
+ const liveChatViewsStyles = `
5463
5463
  /* ========================================
5464
5464
  HOME VIEW
5465
5465
  ======================================== */
5466
5466
 
5467
- .web-chat-home-view {
5467
+ .live-chat-home-view {
5468
5468
  background: var(--msg-bg-header-gradient);
5469
5469
  position: relative;
5470
5470
  overflow: hidden;
5471
5471
  }
5472
5472
 
5473
- .web-chat-home-view::before {
5473
+ .live-chat-home-view::before {
5474
5474
  content: '';
5475
5475
  position: absolute;
5476
5476
  top: 0;
@@ -5483,7 +5483,7 @@
5483
5483
  z-index: 1;
5484
5484
  }
5485
5485
 
5486
- .web-chat-home-view::after {
5486
+ .live-chat-home-view::after {
5487
5487
  content: '';
5488
5488
  position: absolute;
5489
5489
  top: 0;
@@ -5496,7 +5496,7 @@
5496
5496
  z-index: 1;
5497
5497
  }
5498
5498
 
5499
- .web-chat-home-scroll {
5499
+ .live-chat-home-scroll {
5500
5500
  flex: 1;
5501
5501
  overflow-y: auto;
5502
5502
  display: flex;
@@ -5504,14 +5504,14 @@
5504
5504
  position: relative;
5505
5505
  }
5506
5506
 
5507
- .web-chat-home-header {
5507
+ .live-chat-home-header {
5508
5508
  padding: var(--spacing-6) var(--spacing-5);
5509
5509
  position: relative;
5510
5510
  z-index: 2;
5511
5511
  flex-shrink: 0;
5512
5512
  }
5513
5513
 
5514
- .web-chat-home-header-top {
5514
+ .live-chat-home-header-top {
5515
5515
  display: flex;
5516
5516
  align-items: center;
5517
5517
  justify-content: space-between;
@@ -5520,7 +5520,7 @@
5520
5520
  z-index: 2;
5521
5521
  }
5522
5522
 
5523
- .web-chat-home-logo {
5523
+ .live-chat-home-logo {
5524
5524
  width: 48px;
5525
5525
  height: 48px;
5526
5526
  border-radius: var(--radius-lg);
@@ -5531,14 +5531,14 @@
5531
5531
  justify-content: center;
5532
5532
  }
5533
5533
 
5534
- .web-chat-home-logo img {
5534
+ .live-chat-home-logo img {
5535
5535
  width: 100%;
5536
5536
  height: 100%;
5537
5537
  object-fit: contain;
5538
5538
  border-radius: var(--radius-lg);
5539
5539
  }
5540
5540
 
5541
- .web-chat-home-avatars {
5541
+ .live-chat-home-avatars {
5542
5542
  flex: 1;
5543
5543
  display: flex;
5544
5544
  justify-content: flex-end;
@@ -5546,11 +5546,11 @@
5546
5546
  margin-left: var(--spacing-4);
5547
5547
  }
5548
5548
 
5549
- .web-chat-home-avatars:empty {
5549
+ .live-chat-home-avatars:empty {
5550
5550
  display: none;
5551
5551
  }
5552
5552
 
5553
- .web-chat-home-welcome {
5553
+ .live-chat-home-welcome {
5554
5554
  display: flex;
5555
5555
  flex-direction: column;
5556
5556
  text-align: left;
@@ -5558,7 +5558,7 @@
5558
5558
  z-index: 2;
5559
5559
  }
5560
5560
 
5561
- .web-chat-home-greeting {
5561
+ .live-chat-home-greeting {
5562
5562
  font-size: clamp(22px, 8vw, 34px);
5563
5563
  font-weight: var(--font-weight-bold);
5564
5564
  color: var(--msg-text);
@@ -5566,7 +5566,7 @@
5566
5566
  word-break: break-word;
5567
5567
  }
5568
5568
 
5569
- .web-chat-home-question {
5569
+ .live-chat-home-question {
5570
5570
  font-size: clamp(18px, 6.5vw, 28px);
5571
5571
  font-weight: var(--font-weight-bold);
5572
5572
  color: var(--msg-text);
@@ -5574,14 +5574,14 @@
5574
5574
  word-break: break-word;
5575
5575
  }
5576
5576
 
5577
- .web-chat-home-body {
5577
+ .live-chat-home-body {
5578
5578
  flex: 1;
5579
5579
  padding: 0 var(--spacing-5) var(--spacing-5);
5580
5580
  position: relative;
5581
5581
  z-index: 2;
5582
5582
  }
5583
5583
 
5584
- .web-chat-home-recent-card {
5584
+ .live-chat-home-recent-card {
5585
5585
  background: var(--msg-bg);
5586
5586
  border: 1px solid var(--msg-border);
5587
5587
  border-radius: 10px;
@@ -5592,24 +5592,24 @@
5592
5592
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
5593
5593
  }
5594
5594
 
5595
- .web-chat-home-recent-card:hover {
5595
+ .live-chat-home-recent-card:hover {
5596
5596
  background: var(--msg-bg-hover);
5597
5597
  }
5598
5598
 
5599
- .web-chat-home-recent-card-label {
5599
+ .live-chat-home-recent-card-label {
5600
5600
  font-size: 0.875rem;
5601
5601
  font-weight: 600;
5602
5602
  color: var(--msg-text-tertiary);
5603
5603
  margin-bottom: var(--spacing-2);
5604
5604
  }
5605
5605
 
5606
- .web-chat-home-recent-card-row {
5606
+ .live-chat-home-recent-card-row {
5607
5607
  display: flex;
5608
5608
  align-items: center;
5609
5609
  gap: var(--spacing-3);
5610
5610
  }
5611
5611
 
5612
- .web-chat-home-recent-avatar {
5612
+ .live-chat-home-recent-avatar {
5613
5613
  width: 36px;
5614
5614
  height: 36px;
5615
5615
  border-radius: var(--radius-full);
@@ -5623,28 +5623,28 @@
5623
5623
  overflow: hidden;
5624
5624
  }
5625
5625
 
5626
- .web-chat-home-recent-avatar img {
5626
+ .live-chat-home-recent-avatar img {
5627
5627
  width: 100%;
5628
5628
  height: 100%;
5629
5629
  object-fit: cover;
5630
5630
  }
5631
5631
 
5632
- .web-chat-home-recent-avatar-logo {
5632
+ .live-chat-home-recent-avatar-logo {
5633
5633
  background: var(--msg-bg-surface);
5634
5634
  border: 1px solid var(--msg-border);
5635
5635
  padding: 4px;
5636
5636
  }
5637
5637
 
5638
- .web-chat-home-recent-avatar-logo img {
5638
+ .live-chat-home-recent-avatar-logo img {
5639
5639
  object-fit: contain;
5640
5640
  }
5641
5641
 
5642
- .web-chat-home-recent-card-content {
5642
+ .live-chat-home-recent-card-content {
5643
5643
  flex: 1;
5644
5644
  min-width: 0;
5645
5645
  }
5646
5646
 
5647
- .web-chat-home-recent-card-header {
5647
+ .live-chat-home-recent-card-header {
5648
5648
  display: flex;
5649
5649
  align-items: center;
5650
5650
  justify-content: space-between;
@@ -5652,26 +5652,26 @@
5652
5652
  margin-bottom: 2px;
5653
5653
  }
5654
5654
 
5655
- .web-chat-home-recent-card-name {
5655
+ .live-chat-home-recent-card-name {
5656
5656
  font-size: var(--font-size-sm);
5657
5657
  font-weight: var(--font-weight-semibold);
5658
5658
  color: var(--msg-text);
5659
5659
  }
5660
5660
 
5661
- .web-chat-home-recent-card-time {
5661
+ .live-chat-home-recent-card-time {
5662
5662
  font-size: var(--font-size-xs);
5663
5663
  color: var(--msg-text-tertiary);
5664
5664
  flex-shrink: 0;
5665
5665
  }
5666
5666
 
5667
- .web-chat-home-recent-card-preview {
5667
+ .live-chat-home-recent-card-preview {
5668
5668
  display: flex;
5669
5669
  align-items: center;
5670
5670
  justify-content: space-between;
5671
5671
  gap: var(--spacing-2);
5672
5672
  }
5673
5673
 
5674
- .web-chat-home-recent-card-message {
5674
+ .live-chat-home-recent-card-message {
5675
5675
  font-size: var(--font-size-sm);
5676
5676
  color: var(--msg-text-secondary);
5677
5677
  white-space: nowrap;
@@ -5679,7 +5679,7 @@
5679
5679
  text-overflow: ellipsis;
5680
5680
  }
5681
5681
 
5682
- .web-chat-home-recent-unread-dot {
5682
+ .live-chat-home-recent-unread-dot {
5683
5683
  width: 8px;
5684
5684
  height: 8px;
5685
5685
  border-radius: var(--radius-full);
@@ -5687,7 +5687,7 @@
5687
5687
  flex-shrink: 0;
5688
5688
  }
5689
5689
 
5690
- .web-chat-home-message-btn {
5690
+ .live-chat-home-message-btn {
5691
5691
  width: 100%;
5692
5692
  display: flex;
5693
5693
  align-items: center;
@@ -5706,27 +5706,27 @@
5706
5706
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
5707
5707
  }
5708
5708
 
5709
- .web-chat-home-message-btn:hover {
5709
+ .live-chat-home-message-btn:hover {
5710
5710
  background: var(--msg-bg-hover);
5711
5711
  }
5712
5712
 
5713
- .web-chat-home-message-btn:active {
5713
+ .live-chat-home-message-btn:active {
5714
5714
  transform: translateY(1px);
5715
5715
  transition-duration: 100ms;
5716
5716
  }
5717
5717
 
5718
- .web-chat-home-continue-btn {
5718
+ .live-chat-home-continue-btn {
5719
5719
  flex-direction: row;
5720
5720
  align-items: center;
5721
5721
  justify-content: space-between;
5722
5722
  gap: var(--spacing-3);
5723
5723
  }
5724
5724
 
5725
- .web-chat-home-continue-btn > svg {
5725
+ .live-chat-home-continue-btn > svg {
5726
5726
  flex-shrink: 0;
5727
5727
  }
5728
5728
 
5729
- .web-chat-home-continue-info {
5729
+ .live-chat-home-continue-info {
5730
5730
  display: flex;
5731
5731
  flex-direction: column;
5732
5732
  gap: 2px;
@@ -5734,25 +5734,25 @@
5734
5734
  flex: 1;
5735
5735
  }
5736
5736
 
5737
- .web-chat-home-continue-label {
5737
+ .live-chat-home-continue-label {
5738
5738
  font-size: 0.875rem;
5739
5739
  font-weight: var(--font-weight-semibold);
5740
5740
  color: var(--msg-text);
5741
5741
  }
5742
5742
 
5743
- .web-chat-home-message-subtext {
5743
+ .live-chat-home-message-subtext {
5744
5744
  font-size: var(--font-size-xs);
5745
5745
  font-weight: 400;
5746
5746
  color: var(--msg-text-secondary);
5747
5747
  }
5748
5748
 
5749
- .web-chat-home-continue-preview {
5749
+ .live-chat-home-continue-preview {
5750
5750
  font-size: var(--font-size-sm);
5751
5751
  opacity: 0.6;
5752
5752
  font-weight: var(--font-weight-normal);
5753
5753
  }
5754
5754
 
5755
- .web-chat-home-featured {
5755
+ .live-chat-home-featured {
5756
5756
  background: var(--msg-bg);
5757
5757
  border-radius: var(--radius-xl);
5758
5758
  overflow: hidden;
@@ -5760,23 +5760,23 @@
5760
5760
  box-shadow: var(--msg-shadow-card);
5761
5761
  }
5762
5762
 
5763
- .web-chat-home-featured-image {
5763
+ .live-chat-home-featured-image {
5764
5764
  width: 100%;
5765
5765
  height: 160px;
5766
5766
  object-fit: cover;
5767
5767
  display: block;
5768
5768
  }
5769
5769
 
5770
- .web-chat-home-featured-divider {
5770
+ .live-chat-home-featured-divider {
5771
5771
  height: 1px;
5772
5772
  background: var(--msg-border);
5773
5773
  }
5774
5774
 
5775
- .web-chat-home-featured-content {
5775
+ .live-chat-home-featured-content {
5776
5776
  padding: var(--spacing-4) var(--spacing-5);
5777
5777
  }
5778
5778
 
5779
- .web-chat-home-featured-content h3 {
5779
+ .live-chat-home-featured-content h3 {
5780
5780
  margin: 0 0 var(--spacing-2);
5781
5781
  font-size: var(--font-size-xl);
5782
5782
  font-weight: var(--font-weight-semibold);
@@ -5784,25 +5784,25 @@
5784
5784
  line-height: var(--line-height-normal);
5785
5785
  }
5786
5786
 
5787
- .web-chat-home-featured-content p {
5787
+ .live-chat-home-featured-content p {
5788
5788
  margin: 0;
5789
5789
  font-size: var(--font-size-base);
5790
5790
  color: var(--msg-text-tertiary);
5791
5791
  line-height: var(--line-height-relaxed);
5792
5792
  }
5793
5793
 
5794
- .web-chat-home-featured-btn {
5794
+ .live-chat-home-featured-btn {
5795
5795
  margin-top: var(--spacing-3);
5796
5796
  }
5797
5797
 
5798
- .web-chat-home-changelog-section {
5798
+ .live-chat-home-changelog-section {
5799
5799
  margin-top: var(--spacing-5);
5800
5800
  display: flex;
5801
5801
  flex-direction: column;
5802
5802
  gap: var(--spacing-4);
5803
5803
  }
5804
5804
 
5805
- .web-chat-home-changelog-card {
5805
+ .live-chat-home-changelog-card {
5806
5806
  background: var(--msg-bg-surface);
5807
5807
  border-radius: 8px;
5808
5808
  overflow: hidden;
@@ -5812,29 +5812,29 @@
5812
5812
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
5813
5813
  }
5814
5814
 
5815
- .web-chat-home-changelog-card:hover {
5815
+ .live-chat-home-changelog-card:hover {
5816
5816
  background: var(--msg-bg-hover);
5817
5817
  }
5818
5818
 
5819
- .web-chat-home-changelog-card:active {
5819
+ .live-chat-home-changelog-card:active {
5820
5820
  transform: translateY(1px);
5821
5821
  transition-duration: 100ms;
5822
5822
  }
5823
5823
 
5824
- .web-chat-home-changelog-cover {
5824
+ .live-chat-home-changelog-cover {
5825
5825
  width: 100%;
5826
5826
  height: 140px;
5827
5827
  overflow: hidden;
5828
5828
  position: relative;
5829
5829
  }
5830
5830
 
5831
- .web-chat-home-changelog-cover img {
5831
+ .live-chat-home-changelog-cover img {
5832
5832
  width: 100%;
5833
5833
  height: 100%;
5834
5834
  object-fit: cover;
5835
5835
  }
5836
5836
 
5837
- .web-chat-home-changelog-cover-text {
5837
+ .live-chat-home-changelog-cover-text {
5838
5838
  position: absolute;
5839
5839
  bottom: var(--spacing-3);
5840
5840
  left: var(--spacing-3);
@@ -5846,12 +5846,12 @@
5846
5846
  line-height: var(--line-height-snug);
5847
5847
  }
5848
5848
 
5849
- .web-chat-home-changelog-card-content {
5849
+ .live-chat-home-changelog-card-content {
5850
5850
  padding: var(--spacing-4);
5851
5851
  border-top: 1px solid var(--msg-border);
5852
5852
  }
5853
5853
 
5854
- .web-chat-home-changelog-card-title {
5854
+ .live-chat-home-changelog-card-title {
5855
5855
  margin: 0 0 var(--spacing-2);
5856
5856
  font-size: var(--font-size-md);
5857
5857
  font-weight: var(--font-weight-semibold);
@@ -5859,7 +5859,7 @@
5859
5859
  line-height: var(--line-height-snug);
5860
5860
  }
5861
5861
 
5862
- .web-chat-home-changelog-card-desc {
5862
+ .live-chat-home-changelog-card-desc {
5863
5863
  margin: 0;
5864
5864
  font-size: var(--font-size-sm);
5865
5865
  font-weight: var(--font-weight-normal);
@@ -5871,8 +5871,8 @@
5871
5871
  overflow: hidden;
5872
5872
  }
5873
5873
 
5874
- .web-chat-home-availability,
5875
- .web-chat-chat-availability {
5874
+ .live-chat-home-availability,
5875
+ .live-chat-chat-availability {
5876
5876
  display: flex;
5877
5877
  align-items: center;
5878
5878
  gap: var(--spacing-2);
@@ -5881,7 +5881,7 @@
5881
5881
  color: var(--msg-text-secondary);
5882
5882
  }
5883
5883
 
5884
- .web-chat-availability-dot {
5884
+ .live-chat-availability-dot {
5885
5885
  width: 8px;
5886
5886
  height: 8px;
5887
5887
  border-radius: var(--radius-full);
@@ -5890,16 +5890,16 @@
5890
5890
  display: block;
5891
5891
  }
5892
5892
 
5893
- .web-chat-availability-online {
5893
+ .live-chat-availability-online {
5894
5894
  background: var(--color-success);
5895
5895
  box-shadow: 0 0 0 2px var(--color-success-light);
5896
5896
  }
5897
5897
 
5898
- .web-chat-availability-away {
5898
+ .live-chat-availability-away {
5899
5899
  background: var(--color-neutral-400);
5900
5900
  }
5901
5901
 
5902
- .web-chat-availability-text {
5902
+ .live-chat-availability-text {
5903
5903
  opacity: 0.9;
5904
5904
  }
5905
5905
 
@@ -5907,7 +5907,7 @@
5907
5907
  CONVERSATIONS VIEW
5908
5908
  ======================================== */
5909
5909
 
5910
- .web-chat-conversations-header {
5910
+ .live-chat-conversations-header {
5911
5911
  display: flex;
5912
5912
  align-items: center;
5913
5913
  justify-content: space-between;
@@ -5918,7 +5918,7 @@
5918
5918
  overflow: hidden;
5919
5919
  }
5920
5920
 
5921
- .web-chat-conversations-header h2 {
5921
+ .live-chat-conversations-header h2 {
5922
5922
  margin: 0;
5923
5923
  font-size: var(--font-size-xl);
5924
5924
  font-weight: var(--font-weight-semibold);
@@ -5927,22 +5927,22 @@
5927
5927
  flex: 1;
5928
5928
  }
5929
5929
 
5930
- .web-chat-conversations-body {
5930
+ .live-chat-conversations-body {
5931
5931
  flex: 1;
5932
5932
  overflow-y: auto;
5933
5933
  padding: 0;
5934
5934
  }
5935
5935
 
5936
- .web-chat-conversations-list {
5936
+ .live-chat-conversations-list {
5937
5937
  display: flex;
5938
5938
  flex-direction: column;
5939
5939
  }
5940
5940
 
5941
- .web-chat-conversation-item + .web-chat-conversation-item {
5941
+ .live-chat-conversation-item + .live-chat-conversation-item {
5942
5942
  border-top: 1px solid var(--msg-border);
5943
5943
  }
5944
5944
 
5945
- .web-chat-conversation-item {
5945
+ .live-chat-conversation-item {
5946
5946
  display: flex;
5947
5947
  align-items: center;
5948
5948
  gap: var(--spacing-3);
@@ -5951,23 +5951,23 @@
5951
5951
  transition: background var(--transition-base);
5952
5952
  }
5953
5953
 
5954
- .web-chat-conversation-item:hover {
5954
+ .live-chat-conversation-item:hover {
5955
5955
  background: var(--msg-bg-hover);
5956
5956
  }
5957
5957
 
5958
- .web-chat-conversation-item:active {
5958
+ .live-chat-conversation-item:active {
5959
5959
  transform: translateY(1px);
5960
5960
  transition-duration: 100ms;
5961
5961
  }
5962
5962
 
5963
- .web-chat-conversation-avatars {
5963
+ .live-chat-conversation-avatars {
5964
5964
  flex-shrink: 0;
5965
5965
  display: flex;
5966
5966
  align-items: center;
5967
5967
  align-self: stretch;
5968
5968
  }
5969
5969
 
5970
- .web-chat-conversation-content {
5970
+ .live-chat-conversation-content {
5971
5971
  flex: 1;
5972
5972
  min-width: 0;
5973
5973
  display: flex;
@@ -5975,7 +5975,7 @@
5975
5975
  justify-content: center;
5976
5976
  }
5977
5977
 
5978
- .web-chat-conversation-header {
5978
+ .live-chat-conversation-header {
5979
5979
  display: flex;
5980
5980
  align-items: center;
5981
5981
  justify-content: space-between;
@@ -5983,7 +5983,7 @@
5983
5983
  gap: var(--spacing-3);
5984
5984
  }
5985
5985
 
5986
- .web-chat-conversation-title {
5986
+ .live-chat-conversation-title {
5987
5987
  font-size: var(--font-size-sm);
5988
5988
  font-weight: var(--font-weight-semibold);
5989
5989
  color: var(--msg-text);
@@ -5993,19 +5993,19 @@
5993
5993
  text-overflow: ellipsis;
5994
5994
  }
5995
5995
 
5996
- .web-chat-conversation-time {
5996
+ .live-chat-conversation-time {
5997
5997
  font-size: var(--font-size-sm);
5998
5998
  color: var(--msg-text-tertiary);
5999
5999
  flex-shrink: 0;
6000
6000
  }
6001
6001
 
6002
- .web-chat-conversation-preview {
6002
+ .live-chat-conversation-preview {
6003
6003
  display: flex;
6004
6004
  align-items: center;
6005
6005
  gap: var(--spacing-2);
6006
6006
  }
6007
6007
 
6008
- .web-chat-conversation-message {
6008
+ .live-chat-conversation-message {
6009
6009
  font-size: var(--font-size-sm);
6010
6010
  font-weight: 400;
6011
6011
  color: var(--msg-text-secondary);
@@ -6015,12 +6015,12 @@
6015
6015
  line-height: 1.4;
6016
6016
  }
6017
6017
 
6018
- .web-chat-conversation-item.unread .web-chat-conversation-message {
6018
+ .live-chat-conversation-item.unread .live-chat-conversation-message {
6019
6019
  color: var(--msg-text);
6020
6020
  font-weight: 500;
6021
6021
  }
6022
6022
 
6023
- .web-chat-unread-dot {
6023
+ .live-chat-unread-dot {
6024
6024
  width: 8px;
6025
6025
  height: 8px;
6026
6026
  background: var(--color-primary);
@@ -6028,12 +6028,12 @@
6028
6028
  flex-shrink: 0;
6029
6029
  }
6030
6030
 
6031
- .web-chat-conversation-item.closed .web-chat-conversation-title,
6032
- .web-chat-conversation-item.closed .web-chat-conversation-message {
6031
+ .live-chat-conversation-item.closed .live-chat-conversation-title,
6032
+ .live-chat-conversation-item.closed .live-chat-conversation-message {
6033
6033
  color: var(--msg-text-tertiary);
6034
6034
  }
6035
6035
 
6036
- .web-chat-conversation-resolved-badge {
6036
+ .live-chat-conversation-resolved-badge {
6037
6037
  font-size: 0.6875rem;
6038
6038
  font-weight: 500;
6039
6039
  color: var(--color-success-dark);
@@ -6043,11 +6043,11 @@
6043
6043
  flex-shrink: 0;
6044
6044
  }
6045
6045
 
6046
- .web-chat-conversations-footer {
6046
+ .live-chat-conversations-footer {
6047
6047
  border-top: 1px solid var(--msg-border);
6048
6048
  }
6049
6049
 
6050
- .web-chat-new-message-btn {
6050
+ .live-chat-new-message-btn {
6051
6051
  width: 100%;
6052
6052
  display: flex;
6053
6053
  align-items: center;
@@ -6064,16 +6064,16 @@
6064
6064
  text-align: left;
6065
6065
  }
6066
6066
 
6067
- .web-chat-new-message-btn:hover {
6067
+ .live-chat-new-message-btn:hover {
6068
6068
  background: var(--msg-bg-hover);
6069
6069
  }
6070
6070
 
6071
- .web-chat-new-message-btn:active {
6071
+ .live-chat-new-message-btn:active {
6072
6072
  transform: translateX(4px) translateY(1px);
6073
6073
  transition-duration: 100ms;
6074
6074
  }
6075
6075
 
6076
- .web-chat-new-message-btn span {
6076
+ .live-chat-new-message-btn span {
6077
6077
  flex: 1;
6078
6078
  text-align: left;
6079
6079
  }
@@ -6082,7 +6082,7 @@
6082
6082
  HELP VIEW
6083
6083
  ======================================== */
6084
6084
 
6085
- .web-chat-help-header {
6085
+ .live-chat-help-header {
6086
6086
  display: flex;
6087
6087
  flex-direction: column;
6088
6088
  gap: var(--spacing-2);
@@ -6094,7 +6094,7 @@
6094
6094
  overflow: hidden;
6095
6095
  }
6096
6096
 
6097
- .web-chat-help-header::before {
6097
+ .live-chat-help-header::before {
6098
6098
  content: '';
6099
6099
  position: absolute;
6100
6100
  top: -20px;
@@ -6106,7 +6106,7 @@
6106
6106
  pointer-events: none;
6107
6107
  }
6108
6108
 
6109
- .web-chat-help-header::after {
6109
+ .live-chat-help-header::after {
6110
6110
  content: '';
6111
6111
  position: absolute;
6112
6112
  top: -10px;
@@ -6118,33 +6118,33 @@
6118
6118
  pointer-events: none;
6119
6119
  }
6120
6120
 
6121
- .web-chat-help-header-top {
6121
+ .live-chat-help-header-top {
6122
6122
  display: flex;
6123
6123
  align-items: center;
6124
6124
  justify-content: center;
6125
6125
  position: relative;
6126
6126
  }
6127
6127
 
6128
- .web-chat-help-header-top h2 {
6128
+ .live-chat-help-header-top h2 {
6129
6129
  margin: 0;
6130
6130
  font-size: var(--font-size-xl);
6131
6131
  font-weight: var(--font-weight-semibold);
6132
6132
  color: var(--msg-text);
6133
6133
  }
6134
6134
 
6135
- .web-chat-help-close-btn {
6135
+ .live-chat-help-close-btn {
6136
6136
  position: absolute;
6137
6137
  right: 0;
6138
6138
  top: 50%;
6139
6139
  transform: translateY(-50%);
6140
6140
  }
6141
6141
 
6142
- .web-chat-help-search-wrap {
6142
+ .live-chat-help-search-wrap {
6143
6143
  position: relative;
6144
6144
  width: 100%;
6145
6145
  }
6146
6146
 
6147
- .web-chat-help-search-icon {
6147
+ .live-chat-help-search-icon {
6148
6148
  position: absolute;
6149
6149
  left: var(--spacing-3);
6150
6150
  top: 50%;
@@ -6155,7 +6155,7 @@
6155
6155
  pointer-events: none;
6156
6156
  }
6157
6157
 
6158
- .web-chat-help-search-input {
6158
+ .live-chat-help-search-input {
6159
6159
  width: 100%;
6160
6160
  background: var(--msg-bg-input);
6161
6161
  border: 1px solid var(--msg-border);
@@ -6170,30 +6170,30 @@
6170
6170
  box-sizing: border-box;
6171
6171
  }
6172
6172
 
6173
- .web-chat-help-search-input:focus {
6173
+ .live-chat-help-search-input:focus {
6174
6174
  border-color: var(--color-primary);
6175
6175
  background: var(--msg-bg);
6176
6176
  }
6177
6177
 
6178
- .web-chat-help-search-input::placeholder {
6178
+ .live-chat-help-search-input::placeholder {
6179
6179
  color: var(--msg-text-tertiary);
6180
6180
  }
6181
6181
 
6182
- .web-chat-help-body {
6182
+ .live-chat-help-body {
6183
6183
  flex: 1;
6184
6184
  overflow-y: auto;
6185
6185
  padding: 0;
6186
6186
  }
6187
6187
 
6188
- .web-chat-help-collections-header {
6188
+ .live-chat-help-collections-header {
6189
6189
  display: none;
6190
6190
  }
6191
6191
 
6192
- .web-chat-help-collections {
6192
+ .live-chat-help-collections {
6193
6193
  padding: 0;
6194
6194
  }
6195
6195
 
6196
- .web-chat-help-collection {
6196
+ .live-chat-help-collection {
6197
6197
  display: flex;
6198
6198
  align-items: center;
6199
6199
  gap: var(--spacing-3);
@@ -6203,16 +6203,16 @@
6203
6203
  border-bottom: 1px solid var(--msg-border);
6204
6204
  }
6205
6205
 
6206
- .web-chat-help-collection:hover {
6206
+ .live-chat-help-collection:hover {
6207
6207
  background: var(--msg-bg-hover);
6208
6208
  }
6209
6209
 
6210
- .web-chat-help-collection:active {
6210
+ .live-chat-help-collection:active {
6211
6211
  transform: translateY(1px);
6212
6212
  transition-duration: 100ms;
6213
6213
  }
6214
6214
 
6215
- .web-chat-help-collection-icon {
6215
+ .live-chat-help-collection-icon {
6216
6216
  flex-shrink: 0;
6217
6217
  width: 2.25rem;
6218
6218
  height: 2.25rem;
@@ -6222,14 +6222,14 @@
6222
6222
  color: var(--msg-text-secondary);
6223
6223
  }
6224
6224
 
6225
- .web-chat-help-collection-icon svg {
6225
+ .live-chat-help-collection-icon svg {
6226
6226
  width: 1.5rem;
6227
6227
  height: 1.5rem;
6228
6228
  display: block;
6229
6229
  flex-shrink: 0;
6230
6230
  }
6231
6231
 
6232
- .web-chat-help-collection-icon iconify-icon {
6232
+ .live-chat-help-collection-icon iconify-icon {
6233
6233
  font-size: 1.5rem;
6234
6234
  width: 1em;
6235
6235
  height: 1em;
@@ -6237,12 +6237,12 @@
6237
6237
  flex-shrink: 0;
6238
6238
  }
6239
6239
 
6240
- .web-chat-help-collection-content {
6240
+ .live-chat-help-collection-content {
6241
6241
  flex: 1;
6242
6242
  min-width: 0;
6243
6243
  }
6244
6244
 
6245
- .web-chat-help-collection-title {
6245
+ .live-chat-help-collection-title {
6246
6246
  font-size: var(--font-size-base);
6247
6247
  font-weight: var(--font-weight-semibold);
6248
6248
  color: var(--msg-text);
@@ -6252,7 +6252,7 @@
6252
6252
  text-overflow: ellipsis;
6253
6253
  }
6254
6254
 
6255
- .web-chat-help-collection-desc {
6255
+ .live-chat-help-collection-desc {
6256
6256
  margin: 2px 0 var(--spacing-1);
6257
6257
  font-size: var(--font-size-sm);
6258
6258
  color: var(--msg-text-secondary);
@@ -6265,35 +6265,35 @@
6265
6265
  text-overflow: ellipsis;
6266
6266
  }
6267
6267
 
6268
- .web-chat-help-collection-meta {
6268
+ .live-chat-help-collection-meta {
6269
6269
  display: flex;
6270
6270
  align-items: center;
6271
6271
  gap: var(--spacing-2);
6272
6272
  margin-top: 2px;
6273
6273
  }
6274
6274
 
6275
- .web-chat-help-collection-avatar {
6275
+ .live-chat-help-collection-avatar {
6276
6276
  display: none;
6277
6277
  }
6278
6278
 
6279
- .web-chat-help-collection-avatar--initials {
6279
+ .live-chat-help-collection-avatar--initials {
6280
6280
  display: none;
6281
6281
  line-height: 1;
6282
6282
  }
6283
6283
 
6284
- .web-chat-help-collection-count {
6284
+ .live-chat-help-collection-count {
6285
6285
  font-size: var(--font-size-xs);
6286
6286
  font-weight: var(--font-weight-medium);
6287
6287
  color: var(--msg-text-tertiary);
6288
6288
  }
6289
6289
 
6290
- .web-chat-help-footer {
6290
+ .live-chat-help-footer {
6291
6291
  padding: var(--spacing-4) var(--spacing-5);
6292
6292
  border-top: 1px solid var(--msg-border);
6293
6293
  text-align: center;
6294
6294
  }
6295
6295
 
6296
- .web-chat-help-footer-link {
6296
+ .live-chat-help-footer-link {
6297
6297
  display: inline-flex;
6298
6298
  align-items: center;
6299
6299
  gap: var(--spacing-2);
@@ -6305,7 +6305,7 @@
6305
6305
  transition: color var(--transition-base);
6306
6306
  }
6307
6307
 
6308
- .web-chat-help-footer-link:hover {
6308
+ .live-chat-help-footer-link:hover {
6309
6309
  color: var(--color-primary);
6310
6310
  }
6311
6311
 
@@ -6313,7 +6313,7 @@
6313
6313
  CHANGELOG VIEW
6314
6314
  ======================================== */
6315
6315
 
6316
- .web-chat-changelog-header {
6316
+ .live-chat-changelog-header {
6317
6317
  padding: var(--spacing-2) var(--spacing-5);
6318
6318
  border-bottom: 1px solid var(--msg-border);
6319
6319
  flex-shrink: 0;
@@ -6322,7 +6322,7 @@
6322
6322
  overflow: hidden;
6323
6323
  }
6324
6324
 
6325
- .web-chat-changelog-header::before {
6325
+ .live-chat-changelog-header::before {
6326
6326
  content: '';
6327
6327
  position: absolute;
6328
6328
  top: -20px;
@@ -6334,7 +6334,7 @@
6334
6334
  pointer-events: none;
6335
6335
  }
6336
6336
 
6337
- .web-chat-changelog-header::after {
6337
+ .live-chat-changelog-header::after {
6338
6338
  content: '';
6339
6339
  position: absolute;
6340
6340
  top: -10px;
@@ -6346,40 +6346,40 @@
6346
6346
  pointer-events: none;
6347
6347
  }
6348
6348
 
6349
- .web-chat-changelog-header-top {
6349
+ .live-chat-changelog-header-top {
6350
6350
  display: flex;
6351
6351
  align-items: center;
6352
6352
  justify-content: center;
6353
6353
  position: relative;
6354
6354
  }
6355
6355
 
6356
- .web-chat-changelog-header-top h2 {
6356
+ .live-chat-changelog-header-top h2 {
6357
6357
  margin: 0;
6358
6358
  font-size: var(--font-size-xl);
6359
6359
  font-weight: var(--font-weight-semibold);
6360
6360
  color: var(--msg-text);
6361
6361
  }
6362
6362
 
6363
- .web-chat-changelog-close-btn {
6363
+ .live-chat-changelog-close-btn {
6364
6364
  position: absolute;
6365
6365
  right: 0;
6366
6366
  top: 50%;
6367
6367
  transform: translateY(-50%);
6368
6368
  }
6369
6369
 
6370
- .web-chat-changelog-body {
6370
+ .live-chat-changelog-body {
6371
6371
  flex: 1;
6372
6372
  overflow-y: auto;
6373
6373
  }
6374
6374
 
6375
- .web-chat-changelog-list {
6375
+ .live-chat-changelog-list {
6376
6376
  display: flex;
6377
6377
  flex-direction: column;
6378
6378
  gap: var(--spacing-3);
6379
6379
  padding: var(--spacing-4) var(--spacing-5);
6380
6380
  }
6381
6381
 
6382
- .web-chat-changelog-card {
6382
+ .live-chat-changelog-card {
6383
6383
  display: flex;
6384
6384
  flex-direction: column;
6385
6385
  border: 1px solid var(--msg-border);
@@ -6389,43 +6389,43 @@
6389
6389
  transition: box-shadow var(--transition-base), transform var(--transition-base);
6390
6390
  }
6391
6391
 
6392
- .web-chat-changelog-card:hover {
6392
+ .live-chat-changelog-card:hover {
6393
6393
  box-shadow: var(--shadow-md);
6394
6394
  transform: translateY(-1px);
6395
6395
  }
6396
6396
 
6397
- .web-chat-changelog-card:active {
6397
+ .live-chat-changelog-card:active {
6398
6398
  transform: translateY(0);
6399
6399
  transition-duration: 100ms;
6400
6400
  }
6401
6401
 
6402
- .web-chat-changelog-content {
6402
+ .live-chat-changelog-content {
6403
6403
  display: flex;
6404
6404
  flex-direction: column;
6405
6405
  gap: var(--spacing-1);
6406
6406
  padding: var(--spacing-3) var(--spacing-4);
6407
6407
  }
6408
6408
 
6409
- .web-chat-changelog-meta {
6409
+ .live-chat-changelog-meta {
6410
6410
  display: flex;
6411
6411
  align-items: center;
6412
6412
  gap: var(--spacing-2);
6413
6413
  flex-wrap: wrap;
6414
6414
  }
6415
6415
 
6416
- .web-chat-changelog-date {
6416
+ .live-chat-changelog-date {
6417
6417
  font-size: var(--font-size-xs);
6418
6418
  font-weight: var(--font-weight-medium);
6419
6419
  color: var(--msg-text-tertiary);
6420
6420
  }
6421
6421
 
6422
- .web-chat-changelog-tags {
6422
+ .live-chat-changelog-tags {
6423
6423
  display: flex;
6424
6424
  flex-wrap: wrap;
6425
6425
  gap: var(--spacing-1);
6426
6426
  }
6427
6427
 
6428
- .web-chat-changelog-tag {
6428
+ .live-chat-changelog-tag {
6429
6429
  display: inline-flex;
6430
6430
  align-items: center;
6431
6431
  padding: 1px 8px;
@@ -6435,7 +6435,7 @@
6435
6435
  line-height: 1.5;
6436
6436
  }
6437
6437
 
6438
- .web-chat-changelog-title {
6438
+ .live-chat-changelog-title {
6439
6439
  margin: 0;
6440
6440
  font-size: var(--font-size-base);
6441
6441
  font-weight: var(--font-weight-semibold);
@@ -6443,7 +6443,7 @@
6443
6443
  line-height: var(--line-height-snug);
6444
6444
  }
6445
6445
 
6446
- .web-chat-changelog-description {
6446
+ .live-chat-changelog-description {
6447
6447
  margin: 0;
6448
6448
  font-size: var(--font-size-sm);
6449
6449
  color: var(--msg-text-secondary);
@@ -6454,13 +6454,13 @@
6454
6454
  overflow: hidden;
6455
6455
  }
6456
6456
 
6457
- .web-chat-changelog-thumb {
6457
+ .live-chat-changelog-thumb {
6458
6458
  width: 100%;
6459
6459
  overflow: hidden;
6460
6460
  border-bottom: 1px solid var(--msg-border);
6461
6461
  }
6462
6462
 
6463
- .web-chat-changelog-thumb img {
6463
+ .live-chat-changelog-thumb img {
6464
6464
  width: 100%;
6465
6465
  height: 180px;
6466
6466
  display: block;
@@ -6468,11 +6468,11 @@
6468
6468
  }
6469
6469
  `;
6470
6470
 
6471
- const webChatStyles =
6472
- webChatCoreStyles +
6473
- webChatViewsStyles +
6474
- webChatComponentsStyles +
6475
- webChatFeaturesStyles;
6471
+ const liveChatStyles =
6472
+ liveChatCoreStyles +
6473
+ liveChatViewsStyles +
6474
+ liveChatComponentsStyles +
6475
+ liveChatFeaturesStyles;
6476
6476
 
6477
6477
  const CSS_STYLES =
6478
6478
  designTokens +
@@ -6481,7 +6481,7 @@
6481
6481
  feedbackStyles +
6482
6482
  changelogStyles +
6483
6483
  surveyStyles +
6484
- webChatStyles;
6484
+ liveChatStyles;
6485
6485
 
6486
6486
  function generateId(prefix = 'feedback') {
6487
6487
  const timestamp = Date.now();
@@ -9596,7 +9596,7 @@
9596
9596
  const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
9597
9597
  let wsURL = this.baseURL.replace(/^https?:/, wsProtocol);
9598
9598
  wsURL = wsURL.replace('/api/v1', '');
9599
- wsURL = `${wsURL}/api/v1/widget/web-chat/ws?token=${encodeURIComponent(this.sessionToken)}`;
9599
+ wsURL = `${wsURL}/api/v1/widget/live-chat/ws?token=${encodeURIComponent(this.sessionToken)}`;
9600
9600
 
9601
9601
  try {
9602
9602
  this.ws = new WebSocket(wsURL);
@@ -9819,7 +9819,7 @@
9819
9819
  }
9820
9820
  }
9821
9821
 
9822
- function applywebChatCustomStyles(options = {}) {
9822
+ function applyliveChatCustomStyles(options = {}) {
9823
9823
  const {
9824
9824
  primaryColor = '#155EEF',
9825
9825
  textColor = '#1d1d1f',
@@ -9827,11 +9827,11 @@
9827
9827
  theme = 'light',
9828
9828
  } = options;
9829
9829
 
9830
- let styleElement = document.getElementById('product7-web-chat-custom-styles');
9830
+ let styleElement = document.getElementById('product7-live-chat-custom-styles');
9831
9831
 
9832
9832
  if (!styleElement) {
9833
9833
  styleElement = document.createElement('style');
9834
- styleElement.id = 'product7-web-chat-custom-styles';
9834
+ styleElement.id = 'product7-live-chat-custom-styles';
9835
9835
  document.head.appendChild(styleElement);
9836
9836
  }
9837
9837
 
@@ -9858,16 +9858,16 @@
9858
9858
  adjustColor(backgroundColor, 34);
9859
9859
 
9860
9860
  styleElement.textContent = `
9861
- #product7-web-chat-widget {
9861
+ #product7-live-chat-widget {
9862
9862
  --color-primary: ${primaryColor} !important;
9863
9863
  --color-primary-hover: ${adjustColor(primaryColor, -10)} !important;
9864
9864
  }
9865
9865
 
9866
- .web-chat-launcher-btn {
9866
+ .live-chat-launcher-btn {
9867
9867
  background: ${primaryColor} !important;
9868
9868
  }
9869
9869
 
9870
- .web-chat-launcher-btn:hover {
9870
+ .live-chat-launcher-btn:hover {
9871
9871
  box-shadow: 0 8px 24px ${adjustColor(primaryColor, 0, 0.3)} !important;
9872
9872
  }
9873
9873
 
@@ -9881,25 +9881,25 @@
9881
9881
  border-color: ${adjustColor(primaryColor, -10)} !important;
9882
9882
  }
9883
9883
 
9884
- .web-chat-compose-send:hover:not(:disabled) {
9884
+ .live-chat-compose-send:hover:not(:disabled) {
9885
9885
  background: ${primaryColor} !important;
9886
9886
  border-color: ${primaryColor} !important;
9887
9887
  color: #FFFFFF !important;
9888
9888
  }
9889
9889
 
9890
- .web-chat-nav-tab.active .web-chat-nav-icon,
9891
- .web-chat-nav-tab.active .web-chat-nav-label {
9890
+ .live-chat-nav-tab.active .live-chat-nav-icon,
9891
+ .live-chat-nav-tab.active .live-chat-nav-label {
9892
9892
  color: ${primaryColor} !important;
9893
9893
  }
9894
9894
 
9895
- .web-chat-home-view::before {
9895
+ .live-chat-home-view::before {
9896
9896
  background: radial-gradient(circle, ${adjustColor(primaryColor, 0, 0.08)} 0%, transparent 70%) !important;
9897
9897
  }
9898
9898
 
9899
9899
  ${
9900
9900
  backgroundColor !== '#ffffff'
9901
9901
  ? `
9902
- .web-chat-panel-content {
9902
+ .live-chat-panel-content {
9903
9903
  background: ${backgroundColor} !important;
9904
9904
  }
9905
9905
  `
@@ -9909,23 +9909,23 @@
9909
9909
  ${
9910
9910
  textColor !== '#1d1d1f'
9911
9911
  ? `
9912
- .web-chat-panel-content,
9913
- .web-chat-view {
9912
+ .live-chat-panel-content,
9913
+ .live-chat-view {
9914
9914
  color: ${textColor} !important;
9915
9915
  }
9916
9916
  `
9917
9917
  : ''
9918
9918
  }
9919
9919
 
9920
- /* Dark theme is now handled by CSS custom properties in web-chat-core.js */
9920
+ /* Dark theme is now handled by CSS custom properties in live-chat-core.js */
9921
9921
  `;
9922
9922
 
9923
9923
  console.log('✅ Custom web chat styles applied:', { primaryColor, theme });
9924
9924
  }
9925
9925
 
9926
- function removewebChatCustomStyles() {
9926
+ function removeliveChatCustomStyles() {
9927
9927
  const styleElement = document.getElementById(
9928
- 'product7-web-chat-custom-styles'
9928
+ 'product7-live-chat-custom-styles'
9929
9929
  );
9930
9930
  if (styleElement && styleElement.parentNode) {
9931
9931
  styleElement.parentNode.removeChild(styleElement);
@@ -10075,7 +10075,7 @@
10075
10075
  }
10076
10076
  }
10077
10077
 
10078
- class WebChatState {
10078
+ class LiveChatState {
10079
10079
  constructor(options = {}) {
10080
10080
  this.currentView = 'home';
10081
10081
  this.isOpen = false;
@@ -10401,7 +10401,7 @@
10401
10401
  }
10402
10402
  }
10403
10403
 
10404
- class WebChatLauncher {
10404
+ class LiveChatLauncher {
10405
10405
  constructor(state, options = {}) {
10406
10406
  this.state = state;
10407
10407
  this.options = {
@@ -10415,7 +10415,7 @@
10415
10415
 
10416
10416
  render() {
10417
10417
  this.element = document.createElement('div');
10418
- this.element.className = `web-chat-launcher web-chat-launcher-${this.options.position}`;
10418
+ this.element.className = `live-chat-launcher live-chat-launcher-${this.options.position}`;
10419
10419
 
10420
10420
  this._updateContent();
10421
10421
  this._attachEvents();
@@ -10435,22 +10435,22 @@
10435
10435
  _updateContent() {
10436
10436
  const badgeHtml =
10437
10437
  this.state.unreadCount > 0
10438
- ? `<span class="web-chat-launcher-badge">${this.state.unreadCount > 9 ? '9+' : this.state.unreadCount}</span>`
10438
+ ? `<span class="live-chat-launcher-badge">${this.state.unreadCount > 9 ? '9+' : this.state.unreadCount}</span>`
10439
10439
  : '';
10440
10440
 
10441
10441
  this.element.innerHTML = `
10442
- <button class="web-chat-launcher-btn" aria-label="Open web chat">
10443
- <span class="web-chat-launcher-icon web-chat-launcher-icon-chat">
10442
+ <button class="live-chat-launcher-btn" aria-label="Open live chat">
10443
+ <span class="live-chat-launcher-icon live-chat-launcher-icon-chat">
10444
10444
  <iconify-icon icon="ph:chats-circle-duotone" width="24" height="24"></iconify-icon>
10445
10445
  </span>
10446
- <span class="web-chat-launcher-icon web-chat-launcher-icon-close" style="display: none;">
10446
+ <span class="live-chat-launcher-icon live-chat-launcher-icon-close" style="display: none;">
10447
10447
  <iconify-icon icon="ph:caret-down-bold" width="22" height="22"></iconify-icon>
10448
10448
  </span>
10449
10449
  ${badgeHtml}
10450
10450
  </button>
10451
10451
  `;
10452
10452
 
10453
- const btn = this.element.querySelector('.web-chat-launcher-btn');
10453
+ const btn = this.element.querySelector('.live-chat-launcher-btn');
10454
10454
  if (btn && this.options.primaryColor) {
10455
10455
  btn.style.setProperty(
10456
10456
  'background',
@@ -10462,32 +10462,32 @@
10462
10462
 
10463
10463
  _attachEvents() {
10464
10464
  this.element
10465
- .querySelector('.web-chat-launcher-btn')
10465
+ .querySelector('.live-chat-launcher-btn')
10466
10466
  .addEventListener('click', () => {
10467
10467
  this.state.setOpen(!this.state.isOpen);
10468
10468
  });
10469
10469
  }
10470
10470
 
10471
10471
  _updateIcon() {
10472
- const chatIcon = this.element.querySelector('.web-chat-launcher-icon-chat');
10472
+ const chatIcon = this.element.querySelector('.live-chat-launcher-icon-chat');
10473
10473
  const closeIcon = this.element.querySelector(
10474
- '.web-chat-launcher-icon-close'
10474
+ '.live-chat-launcher-icon-close'
10475
10475
  );
10476
10476
 
10477
10477
  if (this.state.isOpen) {
10478
10478
  chatIcon.style.display = 'none';
10479
10479
  closeIcon.style.display = 'flex';
10480
- this.element.classList.add('web-chat-launcher-open');
10480
+ this.element.classList.add('live-chat-launcher-open');
10481
10481
  } else {
10482
10482
  chatIcon.style.display = 'flex';
10483
10483
  closeIcon.style.display = 'none';
10484
- this.element.classList.remove('web-chat-launcher-open');
10484
+ this.element.classList.remove('live-chat-launcher-open');
10485
10485
  }
10486
10486
  }
10487
10487
 
10488
10488
  _updateBadge() {
10489
10489
  const existingBadge = this.element.querySelector(
10490
- '.web-chat-launcher-badge'
10490
+ '.live-chat-launcher-badge'
10491
10491
  );
10492
10492
  if (existingBadge) {
10493
10493
  existingBadge.remove();
@@ -10495,10 +10495,10 @@
10495
10495
 
10496
10496
  if (this.state.unreadCount > 0 && !this.state.isOpen) {
10497
10497
  const badge = document.createElement('span');
10498
- badge.className = 'web-chat-launcher-badge';
10498
+ badge.className = 'live-chat-launcher-badge';
10499
10499
  badge.textContent =
10500
10500
  this.state.unreadCount > 9 ? '9+' : this.state.unreadCount;
10501
- this.element.querySelector('.web-chat-launcher-btn').appendChild(badge);
10501
+ this.element.querySelector('.live-chat-launcher-btn').appendChild(badge);
10502
10502
  }
10503
10503
  }
10504
10504
 
@@ -10534,7 +10534,7 @@
10534
10534
 
10535
10535
  render() {
10536
10536
  this.element = document.createElement('div');
10537
- this.element.className = 'web-chat-panel-nav';
10537
+ this.element.className = 'live-chat-panel-nav';
10538
10538
 
10539
10539
  this._updateContent();
10540
10540
  this._attachEvents();
@@ -10581,15 +10581,15 @@
10581
10581
  const isActive = this.state.currentView === tab.id;
10582
10582
  const badgeHtml =
10583
10583
  tab.badge && tab.badge > 0
10584
- ? `<span class="web-chat-nav-badge">${tab.badge > 9 ? '9+' : tab.badge}</span>`
10584
+ ? `<span class="live-chat-nav-badge">${tab.badge > 9 ? '9+' : tab.badge}</span>`
10585
10585
  : '';
10586
10586
 
10587
10587
  return `
10588
- <button class="web-chat-nav-tab ${isActive ? 'active' : ''}" data-tab="${tab.id}">
10589
- <span class="web-chat-nav-icon">
10588
+ <button class="live-chat-nav-tab ${isActive ? 'active' : ''}" data-tab="${tab.id}">
10589
+ <span class="live-chat-nav-icon">
10590
10590
  <iconify-icon icon="${tab.icon}" width="22" height="22"></iconify-icon>
10591
10591
  </span>
10592
- <span class="web-chat-nav-label">${tab.label}</span>
10592
+ <span class="live-chat-nav-label">${tab.label}</span>
10593
10593
  ${badgeHtml}
10594
10594
  </button>
10595
10595
  `;
@@ -10597,11 +10597,11 @@
10597
10597
  .join('');
10598
10598
 
10599
10599
  this.element.innerHTML = `
10600
- <div class="web-chat-nav-tabs">
10600
+ <div class="live-chat-nav-tabs">
10601
10601
  ${tabsHtml}
10602
10602
  </div>
10603
- <div class="web-chat-nav-footer">
10604
- <a href="https://product7.io" target="_blank" rel="noopener noreferrer" class="web-chat-powered-by">
10603
+ <div class="live-chat-nav-footer">
10604
+ <a href="https://product7.io" target="_blank" rel="noopener noreferrer" class="live-chat-powered-by">
10605
10605
  <svg width="12" height="14" viewBox="0 0 28 32" fill="none" xmlns="http://www.w3.org/2000/svg">
10606
10606
  <path fill-rule="evenodd" clip-rule="evenodd" d="M15.0615 5.28044C8.5161 4.42949 3.30825 11.1456 5.89967 17.6588C6.9321 20.2538 9.06268 22.2644 11.8777 23.1968C16.2682 24.6507 18.4038 22.3222 19.0483 23.9691C19.4055 24.8894 18.7282 25.3209 17.988 25.4938C10.9146 27.15 5.15304 22.7566 3.5869 17.5531C1.52205 10.6941 5.98684 4.6667 11.3483 3.41065C17.8801 1.88094 24.0325 6.19355 24.3926 12.7175C24.7448 19.0921 18.6217 24.5978 11.927 22.2036C10.8789 21.8285 8.8419 20.6682 8.46823 19.858C8.06026 18.9727 8.80261 18.1725 9.68285 18.3576C10.2223 18.4726 10.3116 18.8706 11.3161 19.5372C14.4549 21.6213 19.1276 20.6132 21.2046 17.0972C23.991 12.3817 21.0481 6.05351 15.06 5.27758L15.0615 5.28044Z" fill="#21244A"/>
10607
10607
  <path fill-rule="evenodd" clip-rule="evenodd" d="M15.2492 2.19833C11.944 1.71463 8.88819 3.07214 6.91479 4.49682C2.27067 7.85488 0.76169 14.5038 3.49672 19.8731C4.08535 21.0096 4.84379 22.0497 5.7459 22.9576L7.16343 24.2515C7.67214 24.9131 7.27203 25.7176 6.64115 25.9269C5.13502 26.4271 2.0499 21.8172 1.42044 20.5383C0.0872204 17.8297 -0.312889 14.9047 0.242977 11.503C1.66908 2.77063 11.221 -2.51652 19.7197 1.21021C27.7548 4.73331 30.2733 15.4555 23.9351 22.0773C23.3107 22.7296 21.6352 24.4823 20.6278 23.8907C20.0076 23.5263 19.8933 22.6446 20.5192 22.1238C21.0301 21.6986 21.4759 21.435 21.9896 20.9734C23.6665 19.4688 25.2562 16.8752 25.3477 13.5636C25.4427 10.2055 24.1266 7.5848 22.3904 5.74859C20.6392 3.89665 18.6751 2.69919 15.2456 2.19691L15.2492 2.19833Z" fill="#F69F06"/>
@@ -10616,7 +10616,7 @@
10616
10616
 
10617
10617
  _attachEvents() {
10618
10618
  this.element.addEventListener('click', (e) => {
10619
- const tab = e.target.closest('.web-chat-nav-tab');
10619
+ const tab = e.target.closest('.live-chat-nav-tab');
10620
10620
  if (tab) {
10621
10621
  const tabId = tab.dataset.tab;
10622
10622
  this.state.setView(tabId);
@@ -10625,18 +10625,18 @@
10625
10625
  }
10626
10626
 
10627
10627
  _updateActiveTab() {
10628
- const tabs = this.element.querySelectorAll('.web-chat-nav-tab');
10628
+ const tabs = this.element.querySelectorAll('.live-chat-nav-tab');
10629
10629
  tabs.forEach((tab) => {
10630
10630
  const isActive = tab.dataset.tab === this.state.currentView;
10631
10631
  tab.classList.toggle('active', isActive);
10632
10632
 
10633
10633
  if (tab.dataset.tab === 'messages') {
10634
- const existingBadge = tab.querySelector('.web-chat-nav-badge');
10634
+ const existingBadge = tab.querySelector('.live-chat-nav-badge');
10635
10635
  if (existingBadge) existingBadge.remove();
10636
10636
 
10637
10637
  if (this.state.unreadCount > 0) {
10638
10638
  const badge = document.createElement('span');
10639
- badge.className = 'web-chat-nav-badge';
10639
+ badge.className = 'live-chat-nav-badge';
10640
10640
  badge.textContent =
10641
10641
  this.state.unreadCount > 9 ? '9+' : this.state.unreadCount;
10642
10642
  tab.appendChild(badge);
@@ -10655,7 +10655,7 @@
10655
10655
  }
10656
10656
  }
10657
10657
 
10658
- class WebChatPanel {
10658
+ class LiveChatPanel {
10659
10659
  constructor(state, options = {}) {
10660
10660
  this.state = state;
10661
10661
  this.options = {
@@ -10675,17 +10675,17 @@
10675
10675
 
10676
10676
  render() {
10677
10677
  this.element = document.createElement('div');
10678
- this.element.className = `web-chat-panel web-chat-panel-${this.options.position}`;
10678
+ this.element.className = `live-chat-panel live-chat-panel-${this.options.position}`;
10679
10679
 
10680
10680
  this.element.innerHTML = `
10681
- <div class="web-chat-panel-content">
10682
- <div class="web-chat-panel-views"></div>
10683
- <div class="web-chat-panel-nav"></div>
10681
+ <div class="live-chat-panel-content">
10682
+ <div class="live-chat-panel-views"></div>
10683
+ <div class="live-chat-panel-nav"></div>
10684
10684
  </div>
10685
10685
  `;
10686
10686
 
10687
10687
  this.navigationTabs = new NavigationTabs(this.state, this.options);
10688
- const navContainer = this.element.querySelector('.web-chat-panel-nav');
10688
+ const navContainer = this.element.querySelector('.live-chat-panel-nav');
10689
10689
  navContainer.appendChild(this.navigationTabs.render());
10690
10690
 
10691
10691
  this._renderCurrentView();
@@ -10700,8 +10700,8 @@
10700
10700
  }
10701
10701
 
10702
10702
  _renderCurrentView() {
10703
- const viewsContainer = this.element.querySelector('.web-chat-panel-views');
10704
- const navContainer = this.element.querySelector('.web-chat-panel-nav');
10703
+ const viewsContainer = this.element.querySelector('.live-chat-panel-views');
10704
+ const navContainer = this.element.querySelector('.live-chat-panel-nav');
10705
10705
 
10706
10706
  if (this.currentViewComponent && this.currentViewComponent.destroy) {
10707
10707
  this.currentViewComponent.destroy();
@@ -10714,7 +10714,7 @@
10714
10714
  this.currentViewComponent = new ViewClass(this.state, this.options);
10715
10715
  viewsContainer.appendChild(this.currentViewComponent.render());
10716
10716
  } else {
10717
- viewsContainer.innerHTML = `<div class="web-chat-empty-state">
10717
+ viewsContainer.innerHTML = `<div class="live-chat-empty-state">
10718
10718
  <p>View not found: ${this.state.currentView}</p>
10719
10719
  </div>`;
10720
10720
  }
@@ -10743,7 +10743,7 @@
10743
10743
  }
10744
10744
 
10745
10745
  setHeader(headerContent) {
10746
- const header = this.element.querySelector('.web-chat-panel-header');
10746
+ const header = this.element.querySelector('.live-chat-panel-header');
10747
10747
  if (header) {
10748
10748
  header.innerHTML = headerContent;
10749
10749
  }
@@ -10778,7 +10778,7 @@
10778
10778
 
10779
10779
  render() {
10780
10780
  this.element = document.createElement('div');
10781
- this.element.className = 'web-chat-view web-chat-changelog-view';
10781
+ this.element.className = 'live-chat-view live-chat-changelog-view';
10782
10782
 
10783
10783
  this._updateContent();
10784
10784
 
@@ -10793,17 +10793,17 @@
10793
10793
 
10794
10794
  _updateContent() {
10795
10795
  this.element.innerHTML = `
10796
- <div class="web-chat-changelog-header">
10797
- <div class="web-chat-changelog-header-top">
10796
+ <div class="live-chat-changelog-header">
10797
+ <div class="live-chat-changelog-header-top">
10798
10798
  <h2>Latest Updates</h2>
10799
- <button class="sdk-close-btn web-chat-changelog-close-btn web-chat-mobile-close-btn" aria-label="Close">
10799
+ <button class="sdk-close-btn live-chat-changelog-close-btn live-chat-mobile-close-btn" aria-label="Close">
10800
10800
  <iconify-icon icon="ph:x" width="18" height="18"></iconify-icon>
10801
10801
  </button>
10802
10802
  </div>
10803
10803
  </div>
10804
10804
 
10805
- <div class="web-chat-changelog-body">
10806
- <div class="web-chat-changelog-list"></div>
10805
+ <div class="live-chat-changelog-body">
10806
+ <div class="live-chat-changelog-list"></div>
10807
10807
  </div>
10808
10808
  `;
10809
10809
 
@@ -10813,7 +10813,7 @@
10813
10813
 
10814
10814
  _updateChangelogList() {
10815
10815
  const changelogContainer = this.element.querySelector(
10816
- '.web-chat-changelog-list'
10816
+ '.live-chat-changelog-list'
10817
10817
  );
10818
10818
  const changelogItems = this.state.changelogItems;
10819
10819
 
@@ -10838,11 +10838,11 @@
10838
10838
 
10839
10839
  _renderChangelogCard(item) {
10840
10840
  return `
10841
- <div class="web-chat-changelog-card" data-changelog-id="${item.id}">
10842
- ${item.coverImage ? `<div class="web-chat-changelog-thumb"><img src="${item.coverImage}" alt="${item.title}" onerror="this.parentElement.style.display='none';" /></div>` : ''}
10843
- <div class="web-chat-changelog-content">
10844
- <h3 class="web-chat-changelog-title">${item.title}</h3>
10845
- ${item.description ? `<p class="web-chat-changelog-description">${this._stripHtml(item.description)}</p>` : ''}
10841
+ <div class="live-chat-changelog-card" data-changelog-id="${item.id}">
10842
+ ${item.coverImage ? `<div class="live-chat-changelog-thumb"><img src="${item.coverImage}" alt="${item.title}" onerror="this.parentElement.style.display='none';" /></div>` : ''}
10843
+ <div class="live-chat-changelog-content">
10844
+ <h3 class="live-chat-changelog-title">${item.title}</h3>
10845
+ ${item.description ? `<p class="live-chat-changelog-description">${this._stripHtml(item.description)}</p>` : ''}
10846
10846
  </div>
10847
10847
  </div>
10848
10848
  `;
@@ -10859,8 +10859,8 @@
10859
10859
 
10860
10860
  _renderEmptyState() {
10861
10861
  return `
10862
- <div class="web-chat-empty-state">
10863
- <div class="web-chat-empty-state-icon">
10862
+ <div class="live-chat-empty-state">
10863
+ <div class="live-chat-empty-state-icon">
10864
10864
  <iconify-icon icon="ph:megaphone-duotone" width="48" height="48"></iconify-icon>
10865
10865
  </div>
10866
10866
  <h3>No changelog yet</h3>
@@ -10887,7 +10887,7 @@
10887
10887
 
10888
10888
  _attachEvents() {
10889
10889
  const mobileCloseBtn = this.element.querySelector(
10890
- '.web-chat-changelog-close-btn'
10890
+ '.live-chat-changelog-close-btn'
10891
10891
  );
10892
10892
  if (mobileCloseBtn) {
10893
10893
  mobileCloseBtn.addEventListener('click', () => {
@@ -10900,7 +10900,7 @@
10900
10900
 
10901
10901
  _attachChangelogEvents() {
10902
10902
  this.element
10903
- .querySelectorAll('.web-chat-changelog-card')
10903
+ .querySelectorAll('.live-chat-changelog-card')
10904
10904
  .forEach((card) => {
10905
10905
  card.addEventListener('click', () => {
10906
10906
  const changelogId = card.dataset.changelogId;
@@ -10943,14 +10943,14 @@
10943
10943
 
10944
10944
  render() {
10945
10945
  this.element = document.createElement('div');
10946
- this.element.className = 'web-chat-view web-chat-chat-view';
10946
+ this.element.className = 'live-chat-view live-chat-chat-view';
10947
10947
 
10948
10948
  this._updateContent();
10949
10949
 
10950
10950
  this._unsubscribe = this.state.subscribe((type, data) => {
10951
10951
  if (type === 'connectionChange') {
10952
10952
  const banner = this.element?.querySelector(
10953
- '.web-chat-connection-banner'
10953
+ '.live-chat-connection-banner'
10954
10954
  );
10955
10955
  if (banner) {
10956
10956
  banner.style.display = data.connected ? 'none' : 'flex';
@@ -11016,50 +11016,50 @@
11016
11016
  : `<iconify-icon icon="ph:chats-circle-duotone" width="20" height="20"></iconify-icon>`;
11017
11017
 
11018
11018
  this.element.innerHTML = `
11019
- <div class="web-chat-chat-header">
11020
- <button class="sdk-btn-icon web-chat-back-btn" aria-label="Back">
11019
+ <div class="live-chat-chat-header">
11020
+ <button class="sdk-btn-icon live-chat-back-btn" aria-label="Back">
11021
11021
  <iconify-icon icon="ph:arrow-left" width="20" height="20"></iconify-icon>
11022
11022
  </button>
11023
- <div class="web-chat-chat-header-avatar">
11023
+ <div class="live-chat-chat-header-avatar">
11024
11024
  ${headerAvatarHtml}
11025
11025
  </div>
11026
- <div class="web-chat-chat-header-info">
11027
- <span class="web-chat-chat-title">${this._escapeHtml(teamName)}</span>
11028
- <span class="web-chat-chat-subtitle">${isClosed ? 'Conversation resolved' : this.state.responseTime || 'Typically replies within minutes'}</span>
11026
+ <div class="live-chat-chat-header-info">
11027
+ <span class="live-chat-chat-title">${this._escapeHtml(teamName)}</span>
11028
+ <span class="live-chat-chat-subtitle">${isClosed ? 'Conversation resolved' : this.state.responseTime || 'Typically replies within minutes'}</span>
11029
11029
  </div>
11030
- <div class="web-chat-chat-header-actions">
11031
- <button class="sdk-btn-icon sdk-close-btn web-chat-mobile-close-btn" aria-label="Close">
11030
+ <div class="live-chat-chat-header-actions">
11031
+ <button class="sdk-btn-icon sdk-close-btn live-chat-mobile-close-btn" aria-label="Close">
11032
11032
  <iconify-icon icon="ph:x" width="18" height="18"></iconify-icon>
11033
11033
  </button>
11034
11034
  </div>
11035
11035
  </div>
11036
11036
 
11037
- <div class="web-chat-connection-banner" style="display:none;">
11037
+ <div class="live-chat-connection-banner" style="display:none;">
11038
11038
  <iconify-icon icon="ph:wifi-slash" width="14" height="14"></iconify-icon>
11039
11039
  <span>Reconnecting…</span>
11040
11040
  </div>
11041
11041
 
11042
- <div class="web-chat-chat-messages">
11042
+ <div class="live-chat-chat-messages">
11043
11043
  ${messagesHtml}
11044
11044
  ${
11045
11045
  isClosed
11046
11046
  ? `
11047
- <div class="web-chat-closed-banner">
11047
+ <div class="live-chat-closed-banner">
11048
11048
  <iconify-icon icon="ph:check-circle-duotone" width="18" height="18"></iconify-icon>
11049
11049
  <span>This conversation has been resolved</span>
11050
11050
  </div>
11051
11051
  `
11052
11052
  : ''
11053
11053
  }
11054
- <div class="web-chat-typing-indicator">
11055
- <div class="web-chat-typing-dots">
11054
+ <div class="live-chat-typing-indicator">
11055
+ <div class="live-chat-typing-dots">
11056
11056
  <span></span><span></span><span></span>
11057
11057
  </div>
11058
- <span class="web-chat-typing-text"></span>
11058
+ <span class="live-chat-typing-text"></span>
11059
11059
  </div>
11060
11060
  </div>
11061
11061
 
11062
- <div class="web-chat-scroll-pill" style="display:none;">
11062
+ <div class="live-chat-scroll-pill" style="display:none;">
11063
11063
  <iconify-icon icon="ph:arrow-down" width="14" height="14"></iconify-icon>
11064
11064
  <span>New message</span>
11065
11065
  </div>
@@ -11068,33 +11068,33 @@
11068
11068
  isClosed
11069
11069
  ? ''
11070
11070
  : `
11071
- <div class="web-chat-compose-attachments-preview"></div>
11071
+ <div class="live-chat-compose-attachments-preview"></div>
11072
11072
 
11073
- <div class="web-chat-chat-compose">
11074
- <div class="web-chat-compose-input-wrapper">
11075
- <textarea class="web-chat-compose-input" placeholder="${placeholder}" rows="1"></textarea>
11073
+ <div class="live-chat-chat-compose">
11074
+ <div class="live-chat-compose-input-wrapper">
11075
+ <textarea class="live-chat-compose-input" placeholder="${placeholder}" rows="1"></textarea>
11076
11076
  </div>
11077
- <div class="web-chat-compose-bottom">
11078
- <div class="web-chat-compose-actions">
11079
- <button class="sdk-btn-icon web-chat-compose-attach" aria-label="Attach file">
11077
+ <div class="live-chat-compose-bottom">
11078
+ <div class="live-chat-compose-actions">
11079
+ <button class="sdk-btn-icon live-chat-compose-attach" aria-label="Attach file">
11080
11080
  <iconify-icon icon="ph:paperclip-duotone" width="20" height="20"></iconify-icon>
11081
11081
  </button>
11082
- <button class="sdk-btn-icon web-chat-emoji-btn" aria-label="Emoji">
11082
+ <button class="sdk-btn-icon live-chat-emoji-btn" aria-label="Emoji">
11083
11083
  <iconify-icon icon="ph:smiley-duotone" width="20" height="20"></iconify-icon>
11084
11084
  </button>
11085
11085
  </div>
11086
- <button class="web-chat-compose-send" aria-label="Send" disabled>
11086
+ <button class="live-chat-compose-send" aria-label="Send" disabled>
11087
11087
  <iconify-icon icon="ph:paper-plane-right" width="20" height="20"></iconify-icon>
11088
11088
  </button>
11089
11089
  </div>
11090
- <input type="file" class="web-chat-compose-file-input" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip" />
11090
+ <input type="file" class="live-chat-compose-file-input" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip" />
11091
11091
  </div>
11092
11092
  `
11093
11093
  }
11094
11094
  `;
11095
11095
 
11096
11096
  this._typingIndicator = this.element.querySelector(
11097
- '.web-chat-typing-indicator'
11097
+ '.live-chat-typing-indicator'
11098
11098
  );
11099
11099
  this._attachEvents();
11100
11100
  this._scrollToBottom();
@@ -11106,11 +11106,11 @@
11106
11106
  const logoUrl = this.options.logoUrl;
11107
11107
 
11108
11108
  const logoHtml = logoUrl
11109
- ? `<div class="web-chat-chat-empty-logo"><img src="${this._escapeHtml(logoUrl)}" alt="${this._escapeHtml(this.state.teamName)}" /></div>`
11109
+ ? `<div class="live-chat-chat-empty-logo"><img src="${this._escapeHtml(logoUrl)}" alt="${this._escapeHtml(this.state.teamName)}" /></div>`
11110
11110
  : '';
11111
11111
 
11112
11112
  return `
11113
- <div class="web-chat-chat-empty">
11113
+ <div class="live-chat-chat-empty">
11114
11114
  ${logoHtml}
11115
11115
  <h3>${isNewConversation ? 'Start a new conversation' : 'Start the conversation'}</h3>
11116
11116
  </div>
@@ -11122,12 +11122,12 @@
11122
11122
  return attachments
11123
11123
  .map((att) => {
11124
11124
  if (att.type === 'image') {
11125
- return `<img class="web-chat-message-image" src="${this._escapeHtml(att.url)}" alt="${this._escapeHtml(att.name || 'image')}" data-url="${this._escapeHtml(att.url)}" />`;
11125
+ return `<img class="live-chat-message-image" src="${this._escapeHtml(att.url)}" alt="${this._escapeHtml(att.name || 'image')}" data-url="${this._escapeHtml(att.url)}" />`;
11126
11126
  }
11127
- return `<a class="web-chat-message-file" href="${this._escapeHtml(att.url)}" data-url="${this._escapeHtml(att.url)}" data-name="${this._escapeHtml(att.name || 'file')}">
11127
+ return `<a class="live-chat-message-file" href="${this._escapeHtml(att.url)}" data-url="${this._escapeHtml(att.url)}" data-name="${this._escapeHtml(att.name || 'file')}">
11128
11128
  <iconify-icon icon="ph:file-duotone" width="18" height="18"></iconify-icon>
11129
11129
  <span>${this._escapeHtml(att.name || 'file')}</span>
11130
- <iconify-icon icon="ph:download-simple" width="16" height="16" class="web-chat-file-download-icon"></iconify-icon>
11130
+ <iconify-icon icon="ph:download-simple" width="16" height="16" class="live-chat-file-download-icon"></iconify-icon>
11131
11131
  </a>`;
11132
11132
  })
11133
11133
  .join('');
@@ -11140,8 +11140,8 @@
11140
11140
 
11141
11141
  const isOwn = message.isOwn;
11142
11142
  const messageClass = isOwn
11143
- ? 'web-chat-message-own'
11144
- : 'web-chat-message-received';
11143
+ ? 'live-chat-message-own'
11144
+ : 'live-chat-message-received';
11145
11145
  const timeStr = isLastInGroup
11146
11146
  ? this._formatMessageTime(message.timestamp)
11147
11147
  : '';
@@ -11149,25 +11149,25 @@
11149
11149
  const isOptimistic = message.isOptimistic;
11150
11150
 
11151
11151
  const contentHtml = message.content
11152
- ? `<div class="web-chat-message-content">${this._formatMessageContent(message.content)}</div>`
11152
+ ? `<div class="live-chat-message-content">${this._formatMessageContent(message.content)}</div>`
11153
11153
  : '';
11154
11154
  const bubbleHtml = contentHtml
11155
- ? `<div class="web-chat-message-bubble">${contentHtml}</div>`
11155
+ ? `<div class="live-chat-message-bubble">${contentHtml}</div>`
11156
11156
  : '';
11157
11157
 
11158
11158
  if (isOwn) {
11159
11159
  const sentIndicator = isLastInGroup
11160
- ? `<div class="web-chat-message-meta web-chat-message-meta-own">
11160
+ ? `<div class="live-chat-message-meta live-chat-message-meta-own">
11161
11161
  ${
11162
11162
  isOptimistic
11163
- ? `<span class="web-chat-message-sent-status">Sending…</span>`
11164
- : `<span class="web-chat-message-sent-status">Sent</span>`
11163
+ ? `<span class="live-chat-message-sent-status">Sending…</span>`
11164
+ : `<span class="live-chat-message-sent-status">Sent</span>`
11165
11165
  }
11166
11166
  ${timeStr ? `<span>·</span><span>${timeStr}</span>` : ''}
11167
11167
  </div>`
11168
11168
  : '';
11169
11169
  return `
11170
- <div class="web-chat-message ${messageClass}${isOptimistic ? ' web-chat-message-optimistic' : ''}">
11170
+ <div class="live-chat-message ${messageClass}${isOptimistic ? ' live-chat-message-optimistic' : ''}">
11171
11171
  ${bubbleHtml}
11172
11172
  ${attachmentsHtml}
11173
11173
  ${sentIndicator}
@@ -11177,15 +11177,15 @@
11177
11177
 
11178
11178
  const avatarHtml = this._renderSenderAvatar(message.sender);
11179
11179
  return `
11180
- <div class="web-chat-message ${messageClass}">
11181
- <div class="web-chat-message-row">
11182
- <div class="web-chat-message-avatar">${avatarHtml}</div>
11183
- <div class="web-chat-message-wrapper">
11180
+ <div class="live-chat-message ${messageClass}">
11181
+ <div class="live-chat-message-row">
11182
+ <div class="live-chat-message-avatar">${avatarHtml}</div>
11183
+ <div class="live-chat-message-wrapper">
11184
11184
  ${bubbleHtml}
11185
11185
  ${attachmentsHtml}
11186
11186
  </div>
11187
11187
  </div>
11188
- ${timeStr ? `<div class="web-chat-message-meta"><span>${timeStr}</span></div>` : ''}
11188
+ ${timeStr ? `<div class="live-chat-message-meta"><span>${timeStr}</span></div>` : ''}
11189
11189
  </div>
11190
11190
  `;
11191
11191
  }
@@ -11214,11 +11214,11 @@
11214
11214
  const action = rawAction.charAt(0).toUpperCase() + rawAction.slice(1);
11215
11215
 
11216
11216
  return `
11217
- <div class="web-chat-message-system-event">
11218
- <div class="web-chat-message-system-event-avatar">${logoHtml}</div>
11219
- <span class="web-chat-message-system-event-name">${this._escapeHtml(name)}</span>
11220
- <span class="web-chat-message-system-event-action">${this._escapeHtml(action)}</span>
11221
- ${timeStr ? `<span class="web-chat-message-system-event-time">${timeStr}</span>` : ''}
11217
+ <div class="live-chat-message-system-event">
11218
+ <div class="live-chat-message-system-event-avatar">${logoHtml}</div>
11219
+ <span class="live-chat-message-system-event-name">${this._escapeHtml(name)}</span>
11220
+ <span class="live-chat-message-system-event-action">${this._escapeHtml(action)}</span>
11221
+ ${timeStr ? `<span class="live-chat-message-system-event-time">${timeStr}</span>` : ''}
11222
11222
  </div>
11223
11223
  `;
11224
11224
  }
@@ -11232,16 +11232,16 @@
11232
11232
  const timeStr = this._formatMessageTime(message.timestamp);
11233
11233
 
11234
11234
  return `
11235
- <div class="web-chat-message web-chat-message-received">
11236
- <div class="web-chat-message-row">
11237
- <div class="web-chat-message-avatar">${avatarHtml}</div>
11238
- <div class="web-chat-message-wrapper">
11239
- <div class="web-chat-message-bubble">
11240
- <div class="web-chat-message-content">${this._formatMessageContent(content)}</div>
11235
+ <div class="live-chat-message live-chat-message-received">
11236
+ <div class="live-chat-message-row">
11237
+ <div class="live-chat-message-avatar">${avatarHtml}</div>
11238
+ <div class="live-chat-message-wrapper">
11239
+ <div class="live-chat-message-bubble">
11240
+ <div class="live-chat-message-content">${this._formatMessageContent(content)}</div>
11241
11241
  </div>
11242
11242
  </div>
11243
11243
  </div>
11244
- ${timeStr ? `<div class="web-chat-message-meta"><span>${timeStr}</span></div>` : ''}
11244
+ ${timeStr ? `<div class="live-chat-message-meta"><span>${timeStr}</span></div>` : ''}
11245
11245
  </div>
11246
11246
  `;
11247
11247
  }
@@ -11270,7 +11270,7 @@
11270
11270
  })
11271
11271
  .join('');
11272
11272
 
11273
- return `<div class="web-chat-avatar-stack">${avatarItems}</div>`;
11273
+ return `<div class="live-chat-avatar-stack">${avatarItems}</div>`;
11274
11274
  }
11275
11275
 
11276
11276
  _formatMessageTime(timestamp) {
@@ -11300,9 +11300,9 @@
11300
11300
 
11301
11301
  _appendMessage(message) {
11302
11302
  const messagesContainer = this.element.querySelector(
11303
- '.web-chat-chat-messages'
11303
+ '.live-chat-chat-messages'
11304
11304
  );
11305
- const emptyState = messagesContainer.querySelector('.web-chat-chat-empty');
11305
+ const emptyState = messagesContainer.querySelector('.live-chat-chat-empty');
11306
11306
  if (emptyState) {
11307
11307
  emptyState.remove();
11308
11308
  }
@@ -11322,14 +11322,14 @@
11322
11322
  if (isNearBottom) {
11323
11323
  this._scrollToBottom();
11324
11324
  } else if (!message.isOwn) {
11325
- const pill = this.element.querySelector('.web-chat-scroll-pill');
11325
+ const pill = this.element.querySelector('.live-chat-scroll-pill');
11326
11326
  if (pill) pill.style.display = 'flex';
11327
11327
  }
11328
11328
  }
11329
11329
 
11330
11330
  _scrollToBottom() {
11331
11331
  const messagesContainer = this.element.querySelector(
11332
- '.web-chat-chat-messages'
11332
+ '.live-chat-chat-messages'
11333
11333
  );
11334
11334
  if (messagesContainer) {
11335
11335
  setTimeout(() => {
@@ -11340,9 +11340,9 @@
11340
11340
 
11341
11341
  _setupScrollPill() {
11342
11342
  const messagesContainer = this.element.querySelector(
11343
- '.web-chat-chat-messages'
11343
+ '.live-chat-chat-messages'
11344
11344
  );
11345
- const pill = this.element.querySelector('.web-chat-scroll-pill');
11345
+ const pill = this.element.querySelector('.live-chat-scroll-pill');
11346
11346
  if (!messagesContainer || !pill) return;
11347
11347
 
11348
11348
  pill.addEventListener('click', () => {
@@ -11397,8 +11397,8 @@
11397
11397
  }
11398
11398
 
11399
11399
  _updateSendButtonState() {
11400
- const input = this.element.querySelector('.web-chat-compose-input');
11401
- const sendBtn = this.element.querySelector('.web-chat-compose-send');
11400
+ const input = this.element.querySelector('.live-chat-compose-input');
11401
+ const sendBtn = this.element.querySelector('.live-chat-compose-send');
11402
11402
  if (input && sendBtn) {
11403
11403
  sendBtn.disabled =
11404
11404
  !input.value.trim() && this._pendingAttachments.length === 0;
@@ -11407,7 +11407,7 @@
11407
11407
 
11408
11408
  _renderAttachmentPreviews() {
11409
11409
  const container = this.element.querySelector(
11410
- '.web-chat-compose-attachments-preview'
11410
+ '.live-chat-compose-attachments-preview'
11411
11411
  );
11412
11412
  if (!container) return;
11413
11413
 
@@ -11422,18 +11422,18 @@
11422
11422
  .map((att, i) => {
11423
11423
  const isImage = att.type.startsWith('image');
11424
11424
  const thumb = isImage
11425
- ? `<img class="web-chat-attachment-thumb" src="${att.preview}" alt="${this._escapeHtml(att.file.name)}" />`
11426
- : `<div class="web-chat-attachment-thumb web-chat-attachment-file-icon"><iconify-icon icon="ph:file-duotone" width="24" height="24"></iconify-icon></div>`;
11425
+ ? `<img class="live-chat-attachment-thumb" src="${att.preview}" alt="${this._escapeHtml(att.file.name)}" />`
11426
+ : `<div class="live-chat-attachment-thumb live-chat-attachment-file-icon"><iconify-icon icon="ph:file-duotone" width="24" height="24"></iconify-icon></div>`;
11427
11427
  return `
11428
- <div class="web-chat-attachment-preview" data-index="${i}">
11428
+ <div class="live-chat-attachment-preview" data-index="${i}">
11429
11429
  ${thumb}
11430
- <button class="web-chat-attachment-remove" data-index="${i}" aria-label="Remove">&times;</button>
11430
+ <button class="live-chat-attachment-remove" data-index="${i}" aria-label="Remove">&times;</button>
11431
11431
  </div>
11432
11432
  `;
11433
11433
  })
11434
11434
  .join('');
11435
11435
 
11436
- container.querySelectorAll('.web-chat-attachment-remove').forEach((btn) => {
11436
+ container.querySelectorAll('.live-chat-attachment-remove').forEach((btn) => {
11437
11437
  btn.addEventListener('click', (e) => {
11438
11438
  const idx = parseInt(e.currentTarget.dataset.index, 10);
11439
11439
  this._pendingAttachments.splice(idx, 1);
@@ -11445,13 +11445,13 @@
11445
11445
 
11446
11446
  _attachEvents() {
11447
11447
  this.element
11448
- .querySelector('.web-chat-back-btn')
11448
+ .querySelector('.live-chat-back-btn')
11449
11449
  .addEventListener('click', () => {
11450
11450
  this.state.setView('messages');
11451
11451
  });
11452
11452
 
11453
11453
  const mobileCloseBtn = this.element.querySelector(
11454
- '.web-chat-mobile-close-btn'
11454
+ '.live-chat-mobile-close-btn'
11455
11455
  );
11456
11456
  if (mobileCloseBtn) {
11457
11457
  mobileCloseBtn.addEventListener('click', () => {
@@ -11459,8 +11459,8 @@
11459
11459
  });
11460
11460
  }
11461
11461
 
11462
- const input = this.element.querySelector('.web-chat-compose-input');
11463
- const sendBtn = this.element.querySelector('.web-chat-compose-send');
11462
+ const input = this.element.querySelector('.live-chat-compose-input');
11463
+ const sendBtn = this.element.querySelector('.live-chat-compose-send');
11464
11464
 
11465
11465
  if (input && sendBtn) {
11466
11466
  input.addEventListener('input', () => {
@@ -11485,7 +11485,7 @@
11485
11485
  });
11486
11486
  }
11487
11487
 
11488
- const emojiBtn = this.element.querySelector('.web-chat-emoji-btn');
11488
+ const emojiBtn = this.element.querySelector('.live-chat-emoji-btn');
11489
11489
  if (emojiBtn) {
11490
11490
  emojiBtn.addEventListener('click', (e) => {
11491
11491
  e.stopPropagation();
@@ -11493,9 +11493,9 @@
11493
11493
  });
11494
11494
  }
11495
11495
 
11496
- const attachBtn = this.element.querySelector('.web-chat-compose-attach');
11496
+ const attachBtn = this.element.querySelector('.live-chat-compose-attach');
11497
11497
  const fileInput = this.element.querySelector(
11498
- '.web-chat-compose-file-input'
11498
+ '.live-chat-compose-file-input'
11499
11499
  );
11500
11500
 
11501
11501
  if (attachBtn && fileInput) {
@@ -11524,11 +11524,11 @@
11524
11524
  }
11525
11525
 
11526
11526
  const messagesContainer = this.element.querySelector(
11527
- '.web-chat-chat-messages'
11527
+ '.live-chat-chat-messages'
11528
11528
  );
11529
11529
  if (messagesContainer) {
11530
11530
  messagesContainer.addEventListener('click', (e) => {
11531
- const fileLink = e.target.closest('.web-chat-message-file');
11531
+ const fileLink = e.target.closest('.live-chat-message-file');
11532
11532
  if (fileLink) {
11533
11533
  e.preventDefault();
11534
11534
  const url = fileLink.dataset.url;
@@ -11537,7 +11537,7 @@
11537
11537
  return;
11538
11538
  }
11539
11539
 
11540
- const img = e.target.closest('.web-chat-message-image');
11540
+ const img = e.target.closest('.live-chat-message-image');
11541
11541
  if (img) {
11542
11542
  const url = img.dataset.url || img.src;
11543
11543
  window.open(url, '_blank');
@@ -11576,7 +11576,7 @@
11576
11576
  async _sendMessage() {
11577
11577
  if (this._isConversationClosed) return;
11578
11578
 
11579
- const input = this.element.querySelector('.web-chat-compose-input');
11579
+ const input = this.element.querySelector('.live-chat-compose-input');
11580
11580
  const content = input.value.trim();
11581
11581
  const hasAttachments = this._pendingAttachments.length > 0;
11582
11582
 
@@ -11641,7 +11641,7 @@
11641
11641
 
11642
11642
  async _toggleEmojiPicker() {
11643
11643
  const existing = this.element.querySelector(
11644
- '.web-chat-emoji-picker-container'
11644
+ '.live-chat-emoji-picker-container'
11645
11645
  );
11646
11646
  if (existing) {
11647
11647
  existing.remove();
@@ -11660,12 +11660,12 @@
11660
11660
  }
11661
11661
 
11662
11662
  const container = document.createElement('div');
11663
- container.className = 'web-chat-emoji-picker-container';
11663
+ container.className = 'live-chat-emoji-picker-container';
11664
11664
 
11665
11665
  const picker = document.createElement('emoji-picker');
11666
11666
  container.appendChild(picker);
11667
11667
 
11668
- const compose = this.element.querySelector('.web-chat-chat-compose');
11668
+ const compose = this.element.querySelector('.live-chat-chat-compose');
11669
11669
  compose.parentNode.insertBefore(container, compose);
11670
11670
  this._emojiPickerOpen = true;
11671
11671
 
@@ -11682,7 +11682,7 @@
11682
11682
  this._emojiOutsideHandler = (e) => {
11683
11683
  if (
11684
11684
  !container.contains(e.target) &&
11685
- !e.target.closest('.web-chat-emoji-btn')
11685
+ !e.target.closest('.live-chat-emoji-btn')
11686
11686
  ) {
11687
11687
  container.remove();
11688
11688
  this._emojiPickerOpen = false;
@@ -11697,7 +11697,7 @@
11697
11697
  }
11698
11698
 
11699
11699
  _insertEmoji(emoji) {
11700
- const input = this.element.querySelector('.web-chat-compose-input');
11700
+ const input = this.element.querySelector('.live-chat-compose-input');
11701
11701
  if (!input) return;
11702
11702
  const start = input.selectionStart;
11703
11703
  const end = input.selectionEnd;
@@ -11741,7 +11741,7 @@
11741
11741
  if (this._typingIndicator) {
11742
11742
  this._typingIndicator.style.display = 'flex';
11743
11743
  const textEl = this._typingIndicator.querySelector(
11744
- '.web-chat-typing-text'
11744
+ '.live-chat-typing-text'
11745
11745
  );
11746
11746
  if (textEl) {
11747
11747
  textEl.textContent = `${userName || 'Support'} is typing...`;
@@ -11792,7 +11792,7 @@
11792
11792
 
11793
11793
  render() {
11794
11794
  this.element = document.createElement('div');
11795
- this.element.className = 'web-chat-view web-chat-conversations-view';
11795
+ this.element.className = 'live-chat-view live-chat-conversations-view';
11796
11796
 
11797
11797
  this._updateContent();
11798
11798
  this._attachEvents();
@@ -11823,8 +11823,8 @@
11823
11823
  let conversationsHtml;
11824
11824
  if (conversations.length === 0) {
11825
11825
  conversationsHtml = `
11826
- <div class="web-chat-empty-state">
11827
- <div class="web-chat-empty-state-icon">
11826
+ <div class="live-chat-empty-state">
11827
+ <div class="live-chat-empty-state-icon">
11828
11828
  <iconify-icon icon="ph:chat-circle-duotone" width="48" height="48"></iconify-icon>
11829
11829
  </div>
11830
11830
  <h3>No conversations yet</h3>
@@ -11833,26 +11833,26 @@
11833
11833
  `;
11834
11834
  } else {
11835
11835
  conversationsHtml = `
11836
- <div class="web-chat-conversations-list">
11836
+ <div class="live-chat-conversations-list">
11837
11837
  ${conversations.map((conv) => this._renderConversationItem(conv)).join('')}
11838
11838
  </div>
11839
11839
  `;
11840
11840
  }
11841
11841
 
11842
11842
  this.element.innerHTML = `
11843
- <div class="web-chat-conversations-header">
11843
+ <div class="live-chat-conversations-header">
11844
11844
  <h2>Messages</h2>
11845
- <button class="sdk-close-btn web-chat-mobile-close-btn" aria-label="Close">
11845
+ <button class="sdk-close-btn live-chat-mobile-close-btn" aria-label="Close">
11846
11846
  <iconify-icon icon="ph:x" width="18" height="18"></iconify-icon>
11847
11847
  </button>
11848
11848
  </div>
11849
11849
 
11850
- <div class="web-chat-conversations-body">
11850
+ <div class="live-chat-conversations-body">
11851
11851
  ${conversationsHtml}
11852
11852
  </div>
11853
11853
 
11854
- <div class="web-chat-conversations-footer">
11855
- <button class="web-chat-new-message-btn">
11854
+ <div class="live-chat-conversations-footer">
11855
+ <button class="live-chat-new-message-btn">
11856
11856
  <iconify-icon icon="ph:pencil-simple" width="16" height="16" style="flex-shrink: 0; color: var(--msg-text-secondary);"></iconify-icon>
11857
11857
  <span style="flex: 1;">New conversation</span>
11858
11858
  <iconify-icon icon="ph:caret-right" width="16" height="16" style="flex-shrink: 0; color: var(--msg-text-tertiary);"></iconify-icon>
@@ -11873,19 +11873,19 @@
11873
11873
  );
11874
11874
 
11875
11875
  return `
11876
- <div class="web-chat-conversation-item ${unreadClass} ${closedClass}" data-conversation-id="${conversation.id}">
11877
- <div class="web-chat-conversation-avatars">
11876
+ <div class="live-chat-conversation-item ${unreadClass} ${closedClass}" data-conversation-id="${conversation.id}">
11877
+ <div class="live-chat-conversation-avatars">
11878
11878
  ${avatarsHtml}
11879
11879
  </div>
11880
- <div class="web-chat-conversation-content">
11881
- <div class="web-chat-conversation-header">
11882
- <span class="web-chat-conversation-title">${conversation.title || 'Chat with team'}</span>
11883
- <span class="web-chat-conversation-time">${timeAgo}</span>
11880
+ <div class="live-chat-conversation-content">
11881
+ <div class="live-chat-conversation-header">
11882
+ <span class="live-chat-conversation-title">${conversation.title || 'Chat with team'}</span>
11883
+ <span class="live-chat-conversation-time">${timeAgo}</span>
11884
11884
  </div>
11885
- <div class="web-chat-conversation-preview">
11886
- ${conversation.unread > 0 ? '<span class="web-chat-unread-dot"></span>' : ''}
11887
- ${isClosed ? '<span class="web-chat-conversation-resolved-badge">Resolved</span>' : ''}
11888
- <span class="web-chat-conversation-message">${this._truncateMessage(conversation.lastMessage)}</span>
11885
+ <div class="live-chat-conversation-preview">
11886
+ ${conversation.unread > 0 ? '<span class="live-chat-unread-dot"></span>' : ''}
11887
+ ${isClosed ? '<span class="live-chat-conversation-resolved-badge">Resolved</span>' : ''}
11888
+ <span class="live-chat-conversation-message">${this._truncateMessage(conversation.lastMessage)}</span>
11889
11889
  </div>
11890
11890
  </div>
11891
11891
  </div>
@@ -11913,7 +11913,7 @@
11913
11913
  const color1 = this._getAvatarColor('S');
11914
11914
  const color2 = this._getAvatarColor('T');
11915
11915
  return `
11916
- <div class="web-chat-avatar-stack">
11916
+ <div class="live-chat-avatar-stack">
11917
11917
  <div class="sdk-avatar sdk-avatar-sm" style="background-color: ${color1};">S</div>
11918
11918
  <div class="sdk-avatar sdk-avatar-sm" style="background-color: ${color2};">T</div>
11919
11919
  </div>
@@ -11932,7 +11932,7 @@
11932
11932
  })
11933
11933
  .join('');
11934
11934
 
11935
- return `<div class="web-chat-avatar-stack">${avatarItems}</div>`;
11935
+ return `<div class="live-chat-avatar-stack">${avatarItems}</div>`;
11936
11936
  }
11937
11937
 
11938
11938
  _formatTimeAgo(timestamp) {
@@ -11967,7 +11967,7 @@
11967
11967
  }
11968
11968
 
11969
11969
  this.element
11970
- .querySelectorAll('.web-chat-conversation-item')
11970
+ .querySelectorAll('.live-chat-conversation-item')
11971
11971
  .forEach((item) => {
11972
11972
  item.addEventListener('click', () => {
11973
11973
  const convId = item.dataset.conversationId;
@@ -11981,7 +11981,7 @@
11981
11981
  });
11982
11982
  });
11983
11983
 
11984
- const newMsgBtn = this.element.querySelector('.web-chat-new-message-btn');
11984
+ const newMsgBtn = this.element.querySelector('.live-chat-new-message-btn');
11985
11985
  if (newMsgBtn) {
11986
11986
  newMsgBtn.addEventListener('click', () => {
11987
11987
  this._startNewConversation();
@@ -12032,7 +12032,7 @@
12032
12032
 
12033
12033
  render() {
12034
12034
  this.element = document.createElement('div');
12035
- this.element.className = 'web-chat-view web-chat-help-view';
12035
+ this.element.className = 'live-chat-view live-chat-help-view';
12036
12036
 
12037
12037
  this._updateContent();
12038
12038
 
@@ -12049,27 +12049,27 @@
12049
12049
  const searchQuery = this.state.helpSearchQuery || '';
12050
12050
 
12051
12051
  this.element.innerHTML = `
12052
- <div class="web-chat-help-header">
12053
- <div class="web-chat-help-header-top">
12052
+ <div class="live-chat-help-header">
12053
+ <div class="live-chat-help-header-top">
12054
12054
  <h2>Help</h2>
12055
- <button class="sdk-close-btn web-chat-help-close-btn web-chat-mobile-close-btn" aria-label="Close">
12055
+ <button class="sdk-close-btn live-chat-help-close-btn live-chat-mobile-close-btn" aria-label="Close">
12056
12056
  <iconify-icon icon="ph:x" width="18" height="18"></iconify-icon>
12057
12057
  </button>
12058
12058
  </div>
12059
- <div class="web-chat-help-search-wrap">
12060
- <span class="web-chat-help-search-icon">
12059
+ <div class="live-chat-help-search-wrap">
12060
+ <span class="live-chat-help-search-icon">
12061
12061
  <iconify-icon icon="ph:magnifying-glass-duotone" width="16" height="16"></iconify-icon>
12062
12062
  </span>
12063
12063
  <input
12064
12064
  type="text"
12065
- class="web-chat-help-search-input"
12065
+ class="live-chat-help-search-input"
12066
12066
  placeholder="Search for help..."
12067
12067
  value="${searchQuery}"
12068
12068
  />
12069
12069
  </div>
12070
12070
  </div>
12071
- <div class="web-chat-help-body">
12072
- <div class="web-chat-help-collections"></div>
12071
+ <div class="live-chat-help-body">
12072
+ <div class="live-chat-help-collections"></div>
12073
12073
  </div>
12074
12074
  `;
12075
12075
 
@@ -12078,7 +12078,7 @@
12078
12078
  }
12079
12079
 
12080
12080
  _updateCollectionsList() {
12081
- const container = this.element.querySelector('.web-chat-help-collections');
12081
+ const container = this.element.querySelector('.live-chat-help-collections');
12082
12082
  const collections = (this.state.helpArticles || []).filter(
12083
12083
  (c) => (c.articleCount || 0) > 0
12084
12084
  );
@@ -12136,7 +12136,7 @@
12136
12136
  return `<img
12137
12137
  src="${collection.author.picture}"
12138
12138
  alt="${collection.author.name || ''}"
12139
- class="web-chat-help-collection-avatar"
12139
+ class="live-chat-help-collection-avatar"
12140
12140
  title="${collection.author.name || ''}"
12141
12141
  />`;
12142
12142
  }
@@ -12147,7 +12147,7 @@
12147
12147
  : 'A';
12148
12148
 
12149
12149
  return `<span
12150
- class="web-chat-help-collection-avatar web-chat-help-collection-avatar--initials"
12150
+ class="live-chat-help-collection-avatar live-chat-help-collection-avatar--initials"
12151
12151
  style="background-color: ${bg}; color: ${text};"
12152
12152
  title="${collection.author?.name || 'Author'}"
12153
12153
  >${initials}</span>`;
@@ -12157,11 +12157,11 @@
12157
12157
  if (!icon) return this._defaultCollectionIcon();
12158
12158
 
12159
12159
  if (icon.trimStart().startsWith('<')) {
12160
- return `<span class="web-chat-help-collection-icon">${icon}</span>`;
12160
+ return `<span class="live-chat-help-collection-icon">${icon}</span>`;
12161
12161
  }
12162
12162
 
12163
12163
  if (icon.startsWith('ph:')) {
12164
- return `<span class="web-chat-help-collection-icon">
12164
+ return `<span class="live-chat-help-collection-icon">
12165
12165
  <iconify-icon icon="${icon}"></iconify-icon>
12166
12166
  </span>`;
12167
12167
  }
@@ -12170,7 +12170,7 @@
12170
12170
  }
12171
12171
 
12172
12172
  _defaultCollectionIcon() {
12173
- return `<span class="web-chat-help-collection-icon">
12173
+ return `<span class="live-chat-help-collection-icon">
12174
12174
  <iconify-icon icon="ph:book-open-duotone"></iconify-icon>
12175
12175
  </span>`;
12176
12176
  }
@@ -12179,14 +12179,14 @@
12179
12179
  const articleCount = collection.articleCount || 0;
12180
12180
 
12181
12181
  return `
12182
- <div class="web-chat-help-collection" data-collection-id="${collection.id}">
12182
+ <div class="live-chat-help-collection" data-collection-id="${collection.id}">
12183
12183
  ${this._resolveCollectionIcon(collection.icon)}
12184
- <div class="web-chat-help-collection-content">
12185
- <div class="web-chat-help-collection-title">${collection.title}</div>
12186
- ${collection.description ? `<p class="web-chat-help-collection-desc">${collection.description}</p>` : ''}
12187
- <div class="web-chat-help-collection-meta">
12184
+ <div class="live-chat-help-collection-content">
12185
+ <div class="live-chat-help-collection-title">${collection.title}</div>
12186
+ ${collection.description ? `<p class="live-chat-help-collection-desc">${collection.description}</p>` : ''}
12187
+ <div class="live-chat-help-collection-meta">
12188
12188
  ${this._renderAuthorAvatar(collection)}
12189
- <span class="web-chat-help-collection-count">
12189
+ <span class="live-chat-help-collection-count">
12190
12190
  ${articleCount} ${articleCount === 1 ? 'article' : 'articles'}
12191
12191
  </span>
12192
12192
  </div>
@@ -12198,8 +12198,8 @@
12198
12198
  _renderEmptyState() {
12199
12199
  if (this.state.helpSearchQuery) {
12200
12200
  return `
12201
- <div class="web-chat-empty-state">
12202
- <div class="web-chat-empty-state-icon">
12201
+ <div class="live-chat-empty-state">
12202
+ <div class="live-chat-empty-state-icon">
12203
12203
  <iconify-icon icon="ph:magnifying-glass-duotone" width="48" height="48"></iconify-icon>
12204
12204
  </div>
12205
12205
  <h3>No results found</h3>
@@ -12209,8 +12209,8 @@
12209
12209
  }
12210
12210
 
12211
12211
  return `
12212
- <div class="web-chat-empty-state">
12213
- <div class="web-chat-empty-state-icon">
12212
+ <div class="live-chat-empty-state">
12213
+ <div class="live-chat-empty-state-icon">
12214
12214
  <iconify-icon icon="ph:books-duotone" width="48" height="48"></iconify-icon>
12215
12215
  </div>
12216
12216
  <h3>Help collections</h3>
@@ -12221,7 +12221,7 @@
12221
12221
 
12222
12222
  _attachEvents() {
12223
12223
  const mobileCloseBtn = this.element.querySelector(
12224
- '.web-chat-help-close-btn'
12224
+ '.live-chat-help-close-btn'
12225
12225
  );
12226
12226
  if (mobileCloseBtn) {
12227
12227
  mobileCloseBtn.addEventListener('click', () => {
@@ -12230,7 +12230,7 @@
12230
12230
  }
12231
12231
 
12232
12232
  const searchInput = this.element.querySelector(
12233
- '.web-chat-help-search-input'
12233
+ '.live-chat-help-search-input'
12234
12234
  );
12235
12235
  let searchTimeout;
12236
12236
  searchInput.addEventListener('input', (e) => {
@@ -12245,7 +12245,7 @@
12245
12245
 
12246
12246
  _attachCollectionEvents() {
12247
12247
  this.element
12248
- .querySelectorAll('.web-chat-help-collection')
12248
+ .querySelectorAll('.live-chat-help-collection')
12249
12249
  .forEach((item) => {
12250
12250
  item.addEventListener('click', () => {
12251
12251
  const collection = this.state.helpArticles.find(
@@ -12277,7 +12277,7 @@
12277
12277
 
12278
12278
  render() {
12279
12279
  this.element = document.createElement('div');
12280
- this.element.className = 'web-chat-view web-chat-home-view';
12280
+ this.element.className = 'live-chat-view live-chat-home-view';
12281
12281
 
12282
12282
  this._updateContent();
12283
12283
 
@@ -12299,21 +12299,21 @@
12299
12299
  const recentChangelogHtml = this._renderRecentChangelog();
12300
12300
 
12301
12301
  this.element.innerHTML = `
12302
- <div class="web-chat-home-scroll">
12303
- <div class="web-chat-home-header">
12304
- <div class="web-chat-home-header-top">
12305
- <div class="web-chat-home-logo">
12302
+ <div class="live-chat-home-scroll">
12303
+ <div class="live-chat-home-header">
12304
+ <div class="live-chat-home-header-top">
12305
+ <div class="live-chat-home-logo">
12306
12306
  ${this.options.logoUrl ? `<img src="${this.options.logoUrl}" alt="${this.state.teamName}" />` : ''}
12307
12307
  </div>
12308
- <div class="web-chat-home-avatars">${avatarsHtml}</div>
12308
+ <div class="live-chat-home-avatars">${avatarsHtml}</div>
12309
12309
  </div>
12310
- <div class="web-chat-home-welcome">
12311
- <span class="web-chat-home-greeting">${this.state.greetingMessage}</span>
12312
- <span class="web-chat-home-question">${this.state.welcomeMessage}</span>
12310
+ <div class="live-chat-home-welcome">
12311
+ <span class="live-chat-home-greeting">${this.state.greetingMessage}</span>
12312
+ <span class="live-chat-home-question">${this.state.welcomeMessage}</span>
12313
12313
  </div>
12314
12314
  </div>
12315
12315
 
12316
- <div class="web-chat-home-body">
12316
+ <div class="live-chat-home-body">
12317
12317
  ${this._renderMessageButton()}
12318
12318
  ${this._renderFeaturedCard()}
12319
12319
  ${recentChangelogHtml}
@@ -12342,7 +12342,7 @@
12342
12342
  })
12343
12343
  .join('');
12344
12344
 
12345
- return `<div class="web-chat-avatar-stack">${avatarItems}</div>`;
12345
+ return `<div class="live-chat-avatar-stack">${avatarItems}</div>`;
12346
12346
  }
12347
12347
 
12348
12348
  _renderAvailabilityStatus() {
@@ -12350,17 +12350,17 @@
12350
12350
 
12351
12351
  if (isOnline) {
12352
12352
  return `
12353
- <div class="web-chat-home-availability">
12354
- <span class="web-chat-availability-dot web-chat-availability-online"></span>
12355
- <span class="web-chat-availability-text">${this.state.onlineMessage}</span>
12353
+ <div class="live-chat-home-availability">
12354
+ <span class="live-chat-availability-dot live-chat-availability-online"></span>
12355
+ <span class="live-chat-availability-text">${this.state.onlineMessage}</span>
12356
12356
  </div>
12357
12357
  `;
12358
12358
  }
12359
12359
 
12360
12360
  return `
12361
- <div class="web-chat-home-availability">
12362
- <span class="web-chat-availability-dot web-chat-availability-away"></span>
12363
- <span class="web-chat-availability-text">${this.state.responseTime}</span>
12361
+ <div class="live-chat-home-availability">
12362
+ <span class="live-chat-availability-dot live-chat-availability-away"></span>
12363
+ <span class="live-chat-availability-text">${this.state.responseTime}</span>
12364
12364
  </div>
12365
12365
  `;
12366
12366
  }
@@ -12382,14 +12382,14 @@
12382
12382
 
12383
12383
  return `
12384
12384
  ${recentCardHtml}
12385
- <button class="web-chat-home-message-btn">
12386
- <div class="web-chat-home-continue-info">
12387
- <span class="web-chat-home-continue-label">Send us a message</span>
12388
- <span class="web-chat-home-message-subtext">${responseTime}</span>
12385
+ <button class="live-chat-home-message-btn">
12386
+ <div class="live-chat-home-continue-info">
12387
+ <span class="live-chat-home-continue-label">Send us a message</span>
12388
+ <span class="live-chat-home-message-subtext">${responseTime}</span>
12389
12389
  </div>
12390
12390
  ${sendIcon}
12391
12391
  </button>
12392
- <button class="web-chat-home-message-btn web-chat-feedback-btn" data-action="feedback">
12392
+ <button class="live-chat-home-message-btn live-chat-feedback-btn" data-action="feedback">
12393
12393
  <span>Leave us feedback</span>
12394
12394
  ${caretIcon}
12395
12395
  </button>
@@ -12400,8 +12400,8 @@
12400
12400
  const logoUrl = this.options.logoUrl;
12401
12401
  const teamName = this.state.teamName || 'Support';
12402
12402
  const logoHtml = logoUrl
12403
- ? `<div class="web-chat-home-recent-avatar web-chat-home-recent-avatar-logo"><img src="${logoUrl}" alt="${teamName}" /></div>`
12404
- : `<div class="web-chat-home-recent-avatar" style="background: var(--color-primary);">${teamName.charAt(0).toUpperCase()}</div>`;
12403
+ ? `<div class="live-chat-home-recent-avatar live-chat-home-recent-avatar-logo"><img src="${logoUrl}" alt="${teamName}" /></div>`
12404
+ : `<div class="live-chat-home-recent-avatar" style="background: var(--color-primary);">${teamName.charAt(0).toUpperCase()}</div>`;
12405
12405
 
12406
12406
  const title = conversation.title || teamName;
12407
12407
  const timeAgo = this._formatTimeAgo(conversation.lastMessageTime);
@@ -12412,18 +12412,18 @@
12412
12412
  const hasUnread = conversation.unread > 0;
12413
12413
 
12414
12414
  return `
12415
- <div class="web-chat-home-recent-card" data-conversation-id="${conversation.id}">
12416
- <div class="web-chat-home-recent-card-label">Recent message</div>
12417
- <div class="web-chat-home-recent-card-row">
12415
+ <div class="live-chat-home-recent-card" data-conversation-id="${conversation.id}">
12416
+ <div class="live-chat-home-recent-card-label">Recent message</div>
12417
+ <div class="live-chat-home-recent-card-row">
12418
12418
  ${logoHtml}
12419
- <div class="web-chat-home-recent-card-content">
12420
- <div class="web-chat-home-recent-card-header">
12421
- <span class="web-chat-home-recent-card-name">${title}</span>
12422
- <span class="web-chat-home-recent-card-time">${timeAgo}</span>
12419
+ <div class="live-chat-home-recent-card-content">
12420
+ <div class="live-chat-home-recent-card-header">
12421
+ <span class="live-chat-home-recent-card-name">${title}</span>
12422
+ <span class="live-chat-home-recent-card-time">${timeAgo}</span>
12423
12423
  </div>
12424
- <div class="web-chat-home-recent-card-preview">
12425
- <span class="web-chat-home-recent-card-message">${preview}</span>
12426
- ${hasUnread ? '<span class="web-chat-home-recent-unread-dot"></span>' : ''}
12424
+ <div class="live-chat-home-recent-card-preview">
12425
+ <span class="live-chat-home-recent-card-message">${preview}</span>
12426
+ ${hasUnread ? '<span class="live-chat-home-recent-unread-dot"></span>' : ''}
12427
12427
  </div>
12428
12428
  </div>
12429
12429
  </div>
@@ -12455,13 +12455,13 @@
12455
12455
  this.options.featuredContent;
12456
12456
 
12457
12457
  return `
12458
- <div class="web-chat-home-featured">
12459
- ${imageUrl ? `<img src="${imageUrl}" alt="${title}" class="web-chat-home-featured-image" onerror="this.style.display='none';" />` : ''}
12460
- <div class="web-chat-home-featured-divider"></div>
12461
- <div class="web-chat-home-featured-content">
12458
+ <div class="live-chat-home-featured">
12459
+ ${imageUrl ? `<img src="${imageUrl}" alt="${title}" class="live-chat-home-featured-image" onerror="this.style.display='none';" />` : ''}
12460
+ <div class="live-chat-home-featured-divider"></div>
12461
+ <div class="live-chat-home-featured-content">
12462
12462
  <h3>${title}</h3>
12463
12463
  ${description ? `<p>${description}</p>` : ''}
12464
- ${action ? `<button class="sdk-btn sdk-btn-primary web-chat-home-featured-btn" data-action="${action.type}" data-value="${action.value}">${action.label}</button>` : ''}
12464
+ ${action ? `<button class="sdk-btn sdk-btn-primary live-chat-home-featured-btn" data-action="${action.type}" data-value="${action.value}">${action.label}</button>` : ''}
12465
12465
  </div>
12466
12466
  </div>
12467
12467
  `;
@@ -12476,20 +12476,20 @@
12476
12476
  const changelogHtml = changelogItems
12477
12477
  .map(
12478
12478
  (item) => `
12479
- <div class="web-chat-home-changelog-card" data-changelog-id="${item.id}">
12479
+ <div class="live-chat-home-changelog-card" data-changelog-id="${item.id}">
12480
12480
  ${
12481
12481
  item.coverImage
12482
12482
  ? `
12483
- <div class="web-chat-home-changelog-cover">
12483
+ <div class="live-chat-home-changelog-cover">
12484
12484
  <img src="${item.coverImage}" alt="${item.title}" onerror="this.style.display='none';" />
12485
- ${item.coverText ? `<span class="web-chat-home-changelog-cover-text">${item.coverText}</span>` : ''}
12485
+ ${item.coverText ? `<span class="live-chat-home-changelog-cover-text">${item.coverText}</span>` : ''}
12486
12486
  </div>
12487
12487
  `
12488
12488
  : ''
12489
12489
  }
12490
- <div class="web-chat-home-changelog-card-content">
12491
- <h4 class="web-chat-home-changelog-card-title">${item.title}</h4>
12492
- <p class="web-chat-home-changelog-card-desc">${this._stripHtml(item.description)}</p>
12490
+ <div class="live-chat-home-changelog-card-content">
12491
+ <h4 class="live-chat-home-changelog-card-title">${item.title}</h4>
12492
+ <p class="live-chat-home-changelog-card-desc">${this._stripHtml(item.description)}</p>
12493
12493
  </div>
12494
12494
  </div>
12495
12495
  `
@@ -12497,7 +12497,7 @@
12497
12497
  .join('');
12498
12498
 
12499
12499
  return `
12500
- <div class="web-chat-home-changelog-section">
12500
+ <div class="live-chat-home-changelog-section">
12501
12501
  ${changelogHtml}
12502
12502
  </div>
12503
12503
  `;
@@ -12523,7 +12523,7 @@
12523
12523
  }
12524
12524
 
12525
12525
  _attachEvents() {
12526
- const recentCard = this.element.querySelector('.web-chat-home-recent-card');
12526
+ const recentCard = this.element.querySelector('.live-chat-home-recent-card');
12527
12527
  if (recentCard) {
12528
12528
  recentCard.addEventListener('click', () => {
12529
12529
  const convId = recentCard.dataset.conversationId;
@@ -12537,7 +12537,7 @@
12537
12537
  }
12538
12538
 
12539
12539
  const msgBtn = this.element.querySelector(
12540
- '.web-chat-home-message-btn:not(.web-chat-feedback-btn)'
12540
+ '.live-chat-home-message-btn:not(.live-chat-feedback-btn)'
12541
12541
  );
12542
12542
  if (msgBtn) {
12543
12543
  msgBtn.addEventListener('click', () => {
@@ -12546,7 +12546,7 @@
12546
12546
  });
12547
12547
  }
12548
12548
 
12549
- const feedbackBtn = this.element.querySelector('.web-chat-feedback-btn');
12549
+ const feedbackBtn = this.element.querySelector('.live-chat-feedback-btn');
12550
12550
  if (feedbackBtn) {
12551
12551
  feedbackBtn.addEventListener('click', () => {
12552
12552
  if (this.options.onFeedbackClick) {
@@ -12559,7 +12559,7 @@
12559
12559
  }
12560
12560
 
12561
12561
  this.element
12562
- .querySelectorAll('.web-chat-home-changelog-card')
12562
+ .querySelectorAll('.live-chat-home-changelog-card')
12563
12563
  .forEach((card) => {
12564
12564
  card.addEventListener('click', () => {
12565
12565
  const item = this.state.homeChangelogItems.find(
@@ -12574,7 +12574,7 @@
12574
12574
  });
12575
12575
 
12576
12576
  const seeAllBtn = this.element.querySelector(
12577
- '.web-chat-home-changelog-all'
12577
+ '.live-chat-home-changelog-all'
12578
12578
  );
12579
12579
  if (seeAllBtn) {
12580
12580
  seeAllBtn.addEventListener('click', () => {
@@ -12583,7 +12583,7 @@
12583
12583
  }
12584
12584
 
12585
12585
  const featuredBtn = this.element.querySelector(
12586
- '.web-chat-home-featured-btn'
12586
+ '.live-chat-home-featured-btn'
12587
12587
  );
12588
12588
  if (featuredBtn) {
12589
12589
  featuredBtn.addEventListener('click', () => {
@@ -12618,42 +12618,42 @@
12618
12618
 
12619
12619
  render() {
12620
12620
  this.element = document.createElement('div');
12621
- this.element.className = 'web-chat-view web-chat-prechat-view';
12621
+ this.element.className = 'live-chat-view live-chat-prechat-view';
12622
12622
  this._updateContent();
12623
12623
  return this.element;
12624
12624
  }
12625
12625
 
12626
12626
  _updateContent() {
12627
12627
  this.element.innerHTML = `
12628
- <div class="web-chat-prechat-overlay">
12629
- <div class="web-chat-prechat-card">
12630
- <div class="web-chat-prechat-icon">
12628
+ <div class="live-chat-prechat-overlay">
12629
+ <div class="live-chat-prechat-card">
12630
+ <div class="live-chat-prechat-icon">
12631
12631
  <iconify-icon icon="ph:chat-teardrop-dots-duotone" width="36" height="36"></iconify-icon>
12632
12632
  </div>
12633
- <h4 class="web-chat-prechat-title">Before we continue</h4>
12634
- <p class="web-chat-prechat-subtitle">Enter your details so we can get back to you.</p>
12635
- <form class="web-chat-prechat-form" novalidate>
12636
- <div class="web-chat-prechat-field">
12633
+ <h4 class="live-chat-prechat-title">Before we continue</h4>
12634
+ <p class="live-chat-prechat-subtitle">Enter your details so we can get back to you.</p>
12635
+ <form class="live-chat-prechat-form" novalidate>
12636
+ <div class="live-chat-prechat-field">
12637
12637
  <input
12638
12638
  type="text"
12639
12639
  name="name"
12640
- class="web-chat-prechat-input"
12640
+ class="live-chat-prechat-input"
12641
12641
  placeholder="Your name"
12642
12642
  autocomplete="name"
12643
12643
  />
12644
12644
  </div>
12645
- <div class="web-chat-prechat-field">
12645
+ <div class="live-chat-prechat-field">
12646
12646
  <input
12647
12647
  type="email"
12648
12648
  name="email"
12649
- class="web-chat-prechat-input"
12649
+ class="live-chat-prechat-input"
12650
12650
  placeholder="Your email address"
12651
12651
  autocomplete="email"
12652
12652
  required
12653
12653
  />
12654
- <span class="web-chat-prechat-error" style="display:none;"></span>
12654
+ <span class="live-chat-prechat-error" style="display:none;"></span>
12655
12655
  </div>
12656
- <button type="submit" class="web-chat-prechat-submit">
12656
+ <button type="submit" class="live-chat-prechat-submit">
12657
12657
  Start chat
12658
12658
  </button>
12659
12659
  </form>
@@ -12665,7 +12665,7 @@
12665
12665
  }
12666
12666
 
12667
12667
  _attachEvents() {
12668
- const form = this.element.querySelector('.web-chat-prechat-form');
12668
+ const form = this.element.querySelector('.live-chat-prechat-form');
12669
12669
  form.addEventListener('submit', async (e) => {
12670
12670
  e.preventDefault();
12671
12671
  await this._handleSubmit();
@@ -12677,8 +12677,8 @@
12677
12677
 
12678
12678
  const emailInput = this.element.querySelector('input[name="email"]');
12679
12679
  const nameInput = this.element.querySelector('input[name="name"]');
12680
- const errorEl = this.element.querySelector('.web-chat-prechat-error');
12681
- const submitBtn = this.element.querySelector('.web-chat-prechat-submit');
12680
+ const errorEl = this.element.querySelector('.live-chat-prechat-error');
12681
+ const submitBtn = this.element.querySelector('.live-chat-prechat-submit');
12682
12682
 
12683
12683
  const email = emailInput.value.trim();
12684
12684
  const name = nameInput.value.trim();
@@ -12736,9 +12736,9 @@
12736
12736
  }
12737
12737
  }
12738
12738
 
12739
- class WebChatWidget extends BaseWidget {
12739
+ class LiveChatWidget extends BaseWidget {
12740
12740
  constructor(options) {
12741
- super({ ...options, type: 'webChat' });
12741
+ super({ ...options, type: 'liveChat' });
12742
12742
  this._explicitOptions = options || {};
12743
12743
  const resolvedTheme = options.theme || 'light';
12744
12744
  const hasExplicitTextColor = Object.prototype.hasOwnProperty.call(
@@ -12758,7 +12758,7 @@
12758
12758
  ? options.enableChangelog
12759
12759
  : options.enableNews !== false;
12760
12760
 
12761
- this.webChatOptions = {
12761
+ this.liveChatOptions = {
12762
12762
  position: options.position || 'right',
12763
12763
  theme: resolvedTheme,
12764
12764
  primaryColor: options.primaryColor || '#155EEF',
@@ -12794,27 +12794,27 @@
12794
12794
 
12795
12795
  const sdkMetadata = this.sdk?.apiService?.getMetadata() || null;
12796
12796
 
12797
- this.WebChatState = new WebChatState({
12798
- teamName: this.webChatOptions.teamName,
12799
- teamAvatars: this.webChatOptions.teamAvatars,
12800
- greetingMessage: this.webChatOptions.greetingMessage,
12801
- welcomeMessage: this.webChatOptions.welcomeMessage,
12802
- onlineMessage: this.webChatOptions.onlineMessage,
12803
- responseTime: this.webChatOptions.responseTime,
12804
- enableHelp: this.webChatOptions.enableHelp,
12805
- enableChangelog: this.webChatOptions.enableChangelog,
12797
+ this.LiveChatState = new LiveChatState({
12798
+ teamName: this.liveChatOptions.teamName,
12799
+ teamAvatars: this.liveChatOptions.teamAvatars,
12800
+ greetingMessage: this.liveChatOptions.greetingMessage,
12801
+ welcomeMessage: this.liveChatOptions.welcomeMessage,
12802
+ onlineMessage: this.liveChatOptions.onlineMessage,
12803
+ responseTime: this.liveChatOptions.responseTime,
12804
+ enableHelp: this.liveChatOptions.enableHelp,
12805
+ enableChangelog: this.liveChatOptions.enableChangelog,
12806
12806
  metadata: sdkMetadata,
12807
12807
  urls: {
12808
- feedback: this.webChatOptions.feedbackUrl,
12809
- changelog: this.webChatOptions.changelogUrl,
12810
- help: this.webChatOptions.helpUrl,
12811
- roadmap: this.webChatOptions.roadmapUrl,
12808
+ feedback: this.liveChatOptions.feedbackUrl,
12809
+ changelog: this.liveChatOptions.changelogUrl,
12810
+ help: this.liveChatOptions.helpUrl,
12811
+ roadmap: this.liveChatOptions.roadmapUrl,
12812
12812
  },
12813
12813
  });
12814
12814
 
12815
12815
  // If identify() was called before this widget was created, pre-seed identity
12816
12816
  if (this.sdk?.identified && sdkMetadata) {
12817
- this.WebChatState.isIdentified = true;
12817
+ this.LiveChatState.isIdentified = true;
12818
12818
  }
12819
12819
 
12820
12820
  this.launcher = null;
@@ -12857,62 +12857,62 @@
12857
12857
  trigger: false,
12858
12858
  displayMode: 'modal',
12859
12859
  boardName:
12860
- this.webChatOptions.feedbackBoardName || this.sdk.config.boardName,
12861
- primaryColor: this.webChatOptions.primaryColor,
12862
- theme: this.webChatOptions.theme,
12860
+ this.liveChatOptions.feedbackBoardName || this.sdk.config.boardName,
12861
+ primaryColor: this.liveChatOptions.primaryColor,
12862
+ theme: this.liveChatOptions.theme,
12863
12863
  });
12864
12864
  widget.mount();
12865
12865
  return widget;
12866
12866
  } catch (e) {
12867
- console.warn('[WebChat] Could not create internal feedback widget:', e);
12867
+ console.warn('[LiveChat] Could not create internal feedback widget:', e);
12868
12868
  return null;
12869
12869
  }
12870
12870
  }
12871
12871
 
12872
12872
  _render() {
12873
12873
  const container = document.createElement('div');
12874
- container.className = `web-chat-widget theme-${this.webChatOptions.theme}`;
12874
+ container.className = `live-chat-widget theme-${this.liveChatOptions.theme}`;
12875
12875
  container.style.zIndex = '999999';
12876
12876
 
12877
- applywebChatCustomStyles({
12878
- primaryColor: this.webChatOptions.primaryColor,
12879
- textColor: this.webChatOptions.textColor,
12880
- backgroundColor: this.webChatOptions.backgroundColor,
12881
- theme: this.webChatOptions.theme,
12877
+ applyliveChatCustomStyles({
12878
+ primaryColor: this.liveChatOptions.primaryColor,
12879
+ textColor: this.liveChatOptions.textColor,
12880
+ backgroundColor: this.liveChatOptions.backgroundColor,
12881
+ theme: this.liveChatOptions.theme,
12882
12882
  });
12883
12883
 
12884
12884
  // Create internal feedback widget (no floating button) so the
12885
12885
  // "Leave a feedback" button in the home view can open it inline.
12886
- if (!this.webChatOptions.onFeedbackClick) {
12886
+ if (!this.liveChatOptions.onFeedbackClick) {
12887
12887
  this._feedbackWidget = this._createInternalFeedbackWidget();
12888
12888
  }
12889
12889
 
12890
12890
  if (this._hasTrigger()) {
12891
- this.launcher = new WebChatLauncher(this.WebChatState, {
12892
- position: this.webChatOptions.position,
12893
- primaryColor: this.webChatOptions.primaryColor,
12891
+ this.launcher = new LiveChatLauncher(this.LiveChatState, {
12892
+ position: this.liveChatOptions.position,
12893
+ primaryColor: this.liveChatOptions.primaryColor,
12894
12894
  });
12895
12895
  container.appendChild(this.launcher.render());
12896
12896
  }
12897
12897
 
12898
- this.panel = new WebChatPanel(this.WebChatState, {
12899
- position: this.webChatOptions.position,
12900
- theme: this.webChatOptions.theme,
12901
- primaryColor: this.webChatOptions.primaryColor,
12902
- logoUrl: this.webChatOptions.logoUrl,
12903
- featuredContent: this.webChatOptions.featuredContent,
12898
+ this.panel = new LiveChatPanel(this.LiveChatState, {
12899
+ position: this.liveChatOptions.position,
12900
+ theme: this.liveChatOptions.theme,
12901
+ primaryColor: this.liveChatOptions.primaryColor,
12902
+ logoUrl: this.liveChatOptions.logoUrl,
12903
+ featuredContent: this.liveChatOptions.featuredContent,
12904
12904
  onSendMessage:
12905
- this.webChatOptions.onSendMessage || this._handleSendMessage.bind(this),
12905
+ this.liveChatOptions.onSendMessage || this._handleSendMessage.bind(this),
12906
12906
  onStartConversation: this._handleStartConversation.bind(this),
12907
12907
  onTyping: this.sendTypingIndicator.bind(this),
12908
12908
  onSelectConversation: this._handleSelectConversation.bind(this),
12909
12909
  onStartNewConversation: this._handleNewConversationClick.bind(this),
12910
12910
  onIdentifyContact: this._handleIdentifyContact.bind(this),
12911
12911
  onFeedbackClick:
12912
- this.webChatOptions.onFeedbackClick ||
12912
+ this.liveChatOptions.onFeedbackClick ||
12913
12913
  (this._feedbackWidget ? () => this._feedbackWidget.open() : null),
12914
- onArticleClick: this.webChatOptions.onArticleClick,
12915
- onChangelogClick: this.webChatOptions.onChangelogClick,
12914
+ onArticleClick: this.liveChatOptions.onArticleClick,
12915
+ onChangelogClick: this.liveChatOptions.onChangelogClick,
12916
12916
  });
12917
12917
 
12918
12918
  this.panel.registerView('home', HomeView);
@@ -12929,7 +12929,7 @@
12929
12929
  }
12930
12930
 
12931
12931
  _attachEvents() {
12932
- this._stateUnsubscribe = this.WebChatState.subscribe((type, data) => {
12932
+ this._stateUnsubscribe = this.LiveChatState.subscribe((type, data) => {
12933
12933
  if (type === 'openChange') {
12934
12934
  this._handleOpenChange(data.isOpen);
12935
12935
  }
@@ -12945,11 +12945,11 @@
12945
12945
  _handleOpenChange(isOpen) {
12946
12946
  if (isOpen) {
12947
12947
  this.panel.show();
12948
- this.sdk.eventBus.emit('webChat:opened', { widget: this });
12948
+ this.sdk.eventBus.emit('liveChat:opened', { widget: this });
12949
12949
  } else {
12950
12950
  this.panel.hide();
12951
- this.WebChatState.reset();
12952
- this.sdk.eventBus.emit('webChat:closed', { widget: this });
12951
+ this.LiveChatState.reset();
12952
+ this.sdk.eventBus.emit('liveChat:closed', { widget: this });
12953
12953
  }
12954
12954
  }
12955
12955
 
@@ -12968,21 +12968,21 @@
12968
12968
 
12969
12969
  async _handleStartConversation(messageContent, pendingAttachments) {
12970
12970
  try {
12971
- if (!this.WebChatState.isIdentified) {
12972
- this.WebChatState.pendingMessage = {
12971
+ if (!this.LiveChatState.isIdentified) {
12972
+ this.LiveChatState.pendingMessage = {
12973
12973
  content: messageContent,
12974
12974
  attachments: pendingAttachments,
12975
12975
  };
12976
- this.WebChatState.setView('prechat');
12976
+ this.LiveChatState.setView('prechat');
12977
12977
  return null;
12978
12978
  }
12979
12979
 
12980
- const openConversation = this.WebChatState.conversations.find(
12980
+ const openConversation = this.LiveChatState.conversations.find(
12981
12981
  (c) => c.status === 'open'
12982
12982
  );
12983
12983
 
12984
12984
  if (openConversation) {
12985
- this.WebChatState.setActiveConversation(openConversation.id);
12985
+ this.LiveChatState.setActiveConversation(openConversation.id);
12986
12986
  await this._handleSendMessage(
12987
12987
  openConversation.id,
12988
12988
  { content: messageContent },
@@ -12997,7 +12997,7 @@
12997
12997
  pendingAttachments
12998
12998
  );
12999
12999
  } catch (error) {
13000
- console.error('[WebChatWidget] Failed to start conversation:', error);
13000
+ console.error('[LiveChatWidget] Failed to start conversation:', error);
13001
13001
  return null;
13002
13002
  }
13003
13003
  }
@@ -13006,36 +13006,36 @@
13006
13006
  try {
13007
13007
  await this.fetchMessages(conversationId);
13008
13008
  } catch (error) {
13009
- console.error('[WebChatWidget] Failed to fetch messages:', error);
13009
+ console.error('[LiveChatWidget] Failed to fetch messages:', error);
13010
13010
  }
13011
13011
  }
13012
13012
 
13013
13013
  _handleNewConversationClick() {
13014
- const openConversation = this.WebChatState.conversations.find(
13014
+ const openConversation = this.LiveChatState.conversations.find(
13015
13015
  (c) => c.status === 'open'
13016
13016
  );
13017
13017
 
13018
13018
  if (openConversation) {
13019
- this.WebChatState.setActiveConversation(openConversation.id);
13020
- this.WebChatState.setView('chat');
13019
+ this.LiveChatState.setActiveConversation(openConversation.id);
13020
+ this.LiveChatState.setView('chat');
13021
13021
  this._handleSelectConversation(openConversation.id);
13022
13022
  } else {
13023
- this.WebChatState.setActiveConversation(null);
13024
- this.WebChatState.setView('chat');
13023
+ this.LiveChatState.setActiveConversation(null);
13024
+ this.LiveChatState.setView('chat');
13025
13025
  }
13026
13026
  }
13027
13027
 
13028
13028
  async _handleIdentifyContact(contactData) {
13029
13029
  try {
13030
13030
  // Route through sdk.identify() so the SDK-level identity state is updated
13031
- // and applyIdentity() handles the web chat state + WebSocket as a side effect.
13031
+ // and applyIdentity() handles the live chat state + WebSocket as a side effect.
13032
13032
  const result = await this.sdk.identify({
13033
13033
  email: contactData.email,
13034
13034
  name: contactData.name,
13035
13035
  });
13036
13036
  return result;
13037
13037
  } catch (error) {
13038
- console.error('[WebChatWidget] Failed to identify contact:', error);
13038
+ console.error('[LiveChatWidget] Failed to identify contact:', error);
13039
13039
  throw error;
13040
13040
  }
13041
13041
  }
@@ -13047,7 +13047,7 @@
13047
13047
  }
13048
13048
 
13049
13049
  applyIdentity(metadata = {}) {
13050
- this.WebChatState.setIdentified(true, metadata);
13050
+ this.LiveChatState.setIdentified(true, metadata);
13051
13051
 
13052
13052
  if (this.apiService?.sessionToken && !this.wsService?.isConnected) {
13053
13053
  this._initWebSocket();
@@ -13062,7 +13062,7 @@
13062
13062
  }
13063
13063
  throw new Error('Upload failed');
13064
13064
  } catch (error) {
13065
- console.error('[WebChatWidget] Failed to upload file:', error);
13065
+ console.error('[LiveChatWidget] Failed to upload file:', error);
13066
13066
  throw error;
13067
13067
  }
13068
13068
  }
@@ -13081,7 +13081,7 @@
13081
13081
  });
13082
13082
  } catch (err) {
13083
13083
  console.error(
13084
- '[WebChatWidget] Skipping failed attachment upload:',
13084
+ '[LiveChatWidget] Skipping failed attachment upload:',
13085
13085
  att.file.name,
13086
13086
  err
13087
13087
  );
@@ -13091,7 +13091,7 @@
13091
13091
  }
13092
13092
 
13093
13093
  async _handleSendMessage(conversationId, message, pendingAttachments) {
13094
- this.sdk.eventBus.emit('webChat:messageSent', {
13094
+ this.sdk.eventBus.emit('liveChat:messageSent', {
13095
13095
  widget: this,
13096
13096
  conversationId,
13097
13097
  message,
@@ -13107,7 +13107,7 @@
13107
13107
  });
13108
13108
 
13109
13109
  if (response.status && response.data) {
13110
- console.log('[WebChatWidget] Message sent:', response.data.id);
13110
+ console.log('[LiveChatWidget] Message sent:', response.data.id);
13111
13111
  }
13112
13112
 
13113
13113
  if (this.apiService?.mock) {
@@ -13122,11 +13122,11 @@
13122
13122
  avatarUrl: null,
13123
13123
  },
13124
13124
  };
13125
- this.WebChatState.addMessage(conversationId, mockResponse);
13125
+ this.LiveChatState.addMessage(conversationId, mockResponse);
13126
13126
  }, 1500);
13127
13127
  }
13128
13128
  } catch (error) {
13129
- console.error('[WebChatWidget] Failed to send message:', error);
13129
+ console.error('[LiveChatWidget] Failed to send message:', error);
13130
13130
  }
13131
13131
  }
13132
13132
 
@@ -13158,20 +13158,20 @@
13158
13158
  },
13159
13159
  };
13160
13160
 
13161
- this.WebChatState.upsertMessage(conversation_id, localMessage, {
13161
+ this.LiveChatState.upsertMessage(conversation_id, localMessage, {
13162
13162
  reconcileOwnOptimistic: true,
13163
13163
  optimisticMatchWindowMs: 30000,
13164
13164
  });
13165
13165
 
13166
13166
  const isOwnMessage = message.sender_type === 'customer';
13167
13167
 
13168
- if (!isOwnMessage && this.WebChatState.isIdentified) {
13168
+ if (!isOwnMessage && this.LiveChatState.isIdentified) {
13169
13169
  this._notificationSound.play();
13170
13170
  }
13171
13171
 
13172
13172
  if (
13173
- !this.WebChatState.isOpen ||
13174
- this.WebChatState.activeConversationId !== conversation_id
13173
+ !this.LiveChatState.isOpen ||
13174
+ this.LiveChatState.activeConversationId !== conversation_id
13175
13175
  ) {
13176
13176
  this._updateUnreadCount();
13177
13177
  }
@@ -13179,7 +13179,7 @@
13179
13179
 
13180
13180
  _handleTypingStarted(data) {
13181
13181
  if (data.is_agent) {
13182
- this.WebChatState._notify('typingStarted', {
13182
+ this.LiveChatState._notify('typingStarted', {
13183
13183
  conversationId: data.conversation_id,
13184
13184
  userName: data.user_name,
13185
13185
  });
@@ -13187,7 +13187,7 @@
13187
13187
  }
13188
13188
 
13189
13189
  _handleTypingStopped(data) {
13190
- this.WebChatState._notify('typingStopped', {
13190
+ this.LiveChatState._notify('typingStopped', {
13191
13191
  conversationId: data.conversation_id,
13192
13192
  });
13193
13193
  }
@@ -13197,7 +13197,7 @@
13197
13197
  data?.conversation_id || data?.id || data?.conversation?.id;
13198
13198
  if (!conversationId) return;
13199
13199
 
13200
- this.WebChatState.updateConversation(conversationId, {
13200
+ this.LiveChatState.updateConversation(conversationId, {
13201
13201
  status: 'closed',
13202
13202
  });
13203
13203
  }
@@ -13206,13 +13206,13 @@
13206
13206
  try {
13207
13207
  const response = await this.apiService.getUnreadCount();
13208
13208
  if (response.status && response.data) {
13209
- this.WebChatState.unreadCount = response.data.unread_count || 0;
13210
- this.WebChatState._notify('unreadCountChange', {
13211
- count: this.WebChatState.unreadCount,
13209
+ this.LiveChatState.unreadCount = response.data.unread_count || 0;
13210
+ this.LiveChatState._notify('unreadCountChange', {
13211
+ count: this.LiveChatState.unreadCount,
13212
13212
  });
13213
13213
  }
13214
13214
  } catch (error) {
13215
- console.error('[WebChatWidget] Failed to get unread count:', error);
13215
+ console.error('[LiveChatWidget] Failed to get unread count:', error);
13216
13216
  }
13217
13217
  }
13218
13218
 
@@ -13242,23 +13242,23 @@
13242
13242
  );
13243
13243
  this._wsUnsubscribers.push(
13244
13244
  this.wsService.on('connected', () => {
13245
- console.log('[WebChatWidget] WebSocket connected');
13246
- if (this.WebChatState.activeConversationId) {
13245
+ console.log('[LiveChatWidget] WebSocket connected');
13246
+ if (this.LiveChatState.activeConversationId) {
13247
13247
  this.wsService.send('conversation:subscribe', {
13248
- conversation_id: this.WebChatState.activeConversationId,
13248
+ conversation_id: this.LiveChatState.activeConversationId,
13249
13249
  });
13250
13250
  }
13251
13251
  })
13252
13252
  );
13253
13253
  this._wsUnsubscribers.push(
13254
13254
  this.wsService.on('disconnected', () => {
13255
- console.log('[WebChatWidget] WebSocket disconnected');
13256
- this.WebChatState._notify('connectionChange', { connected: false });
13255
+ console.log('[LiveChatWidget] WebSocket disconnected');
13256
+ this.LiveChatState._notify('connectionChange', { connected: false });
13257
13257
  })
13258
13258
  );
13259
13259
  this._wsUnsubscribers.push(
13260
13260
  this.wsService.on('connected', () => {
13261
- this.WebChatState._notify('connectionChange', { connected: true });
13261
+ this.LiveChatState._notify('connectionChange', { connected: true });
13262
13262
  })
13263
13263
  );
13264
13264
 
@@ -13266,78 +13266,78 @@
13266
13266
  }
13267
13267
 
13268
13268
  open() {
13269
- this.WebChatState.setOpen(true);
13269
+ this.LiveChatState.setOpen(true);
13270
13270
  }
13271
13271
 
13272
13272
  close() {
13273
- this.WebChatState.setOpen(false);
13273
+ this.LiveChatState.setOpen(false);
13274
13274
  }
13275
13275
 
13276
13276
  toggle() {
13277
- this.WebChatState.setOpen(!this.WebChatState.isOpen);
13277
+ this.LiveChatState.setOpen(!this.LiveChatState.isOpen);
13278
13278
  }
13279
13279
 
13280
13280
  navigateTo(view) {
13281
- this.WebChatState.setView(view);
13282
- if (!this.WebChatState.isOpen) {
13281
+ this.LiveChatState.setView(view);
13282
+ if (!this.LiveChatState.isOpen) {
13283
13283
  this.open();
13284
13284
  }
13285
13285
  }
13286
13286
 
13287
13287
  setConversations(conversations) {
13288
- this.WebChatState.setConversations(conversations);
13288
+ this.LiveChatState.setConversations(conversations);
13289
13289
  }
13290
13290
 
13291
13291
  addMessage(conversationId, message) {
13292
- this.WebChatState.addMessage(conversationId, message);
13292
+ this.LiveChatState.addMessage(conversationId, message);
13293
13293
  }
13294
13294
 
13295
13295
  setHelpArticles(articles) {
13296
- this.WebChatState.setHelpArticles(articles);
13296
+ this.LiveChatState.setHelpArticles(articles);
13297
13297
  }
13298
13298
 
13299
13299
  setHomeChangelogItems(items) {
13300
- this.WebChatState.setHomeChangelogItems(items);
13300
+ this.LiveChatState.setHomeChangelogItems(items);
13301
13301
  }
13302
13302
 
13303
13303
  setChangelogItems(items) {
13304
- this.WebChatState.setChangelogItems(items);
13304
+ this.LiveChatState.setChangelogItems(items);
13305
13305
  }
13306
13306
 
13307
13307
  setUnreadCount(count) {
13308
- this.WebChatState.unreadCount = count;
13309
- this.WebChatState._notify('unreadCountChange', { count });
13308
+ this.LiveChatState.unreadCount = count;
13309
+ this.LiveChatState._notify('unreadCountChange', { count });
13310
13310
  }
13311
13311
 
13312
13312
  getState() {
13313
13313
  return {
13314
- isOpen: this.WebChatState.isOpen,
13315
- currentView: this.WebChatState.currentView,
13316
- unreadCount: this.WebChatState.unreadCount,
13317
- conversations: this.WebChatState.conversations,
13314
+ isOpen: this.LiveChatState.isOpen,
13315
+ currentView: this.LiveChatState.currentView,
13316
+ unreadCount: this.LiveChatState.unreadCount,
13317
+ conversations: this.LiveChatState.conversations,
13318
13318
  };
13319
13319
  }
13320
13320
 
13321
13321
  _applyPreviewData() {
13322
- const data = this.webChatOptions.previewData;
13322
+ const data = this.liveChatOptions.previewData;
13323
13323
  if (!data || typeof data !== 'object') {
13324
13324
  return;
13325
13325
  }
13326
13326
 
13327
13327
  if (Array.isArray(data.conversations)) {
13328
- this.WebChatState.setConversations(data.conversations);
13328
+ this.LiveChatState.setConversations(data.conversations);
13329
13329
  }
13330
13330
 
13331
13331
  if (Array.isArray(data.helpArticles)) {
13332
- this.WebChatState.setHelpArticles(data.helpArticles);
13332
+ this.LiveChatState.setHelpArticles(data.helpArticles);
13333
13333
  }
13334
13334
 
13335
13335
  if (Array.isArray(data.homeChangelogItems)) {
13336
- this.WebChatState.setHomeChangelogItems(data.homeChangelogItems);
13336
+ this.LiveChatState.setHomeChangelogItems(data.homeChangelogItems);
13337
13337
  }
13338
13338
 
13339
13339
  if (Array.isArray(data.changelogItems)) {
13340
- this.WebChatState.setChangelogItems(data.changelogItems);
13340
+ this.LiveChatState.setChangelogItems(data.changelogItems);
13341
13341
  }
13342
13342
 
13343
13343
  if (typeof data.unreadCount === 'number') {
@@ -13346,49 +13346,49 @@
13346
13346
 
13347
13347
  if (data.availability && typeof data.availability === 'object') {
13348
13348
  const availability = data.availability;
13349
- this.WebChatState.agentsOnline = Boolean(
13349
+ this.LiveChatState.agentsOnline = Boolean(
13350
13350
  availability.agentsOnline ??
13351
13351
  availability.agents_online ??
13352
13352
  availability.is_online
13353
13353
  );
13354
- this.WebChatState.onlineCount =
13354
+ this.LiveChatState.onlineCount =
13355
13355
  availability.onlineCount ?? availability.online_count ?? 0;
13356
- this.WebChatState.responseTime =
13356
+ this.LiveChatState.responseTime =
13357
13357
  availability.responseTime ??
13358
13358
  availability.response_time ??
13359
- this.WebChatState.responseTime;
13360
- this.WebChatState._notify('availabilityUpdate', availability);
13359
+ this.LiveChatState.responseTime;
13360
+ this.LiveChatState._notify('availabilityUpdate', availability);
13361
13361
  }
13362
13362
 
13363
13363
  if (typeof data.currentView === 'string') {
13364
- this.WebChatState.setView(data.currentView);
13364
+ this.LiveChatState.setView(data.currentView);
13365
13365
  }
13366
13366
  }
13367
13367
 
13368
13368
  async loadInitialData() {
13369
13369
  try {
13370
13370
  const conversations = await this._fetchConversations();
13371
- this.WebChatState.setConversations(conversations);
13371
+ this.LiveChatState.setConversations(conversations);
13372
13372
  } catch (error) {
13373
- console.error('[WebChatWidget] Failed to load conversations:', error);
13373
+ console.error('[LiveChatWidget] Failed to load conversations:', error);
13374
13374
  }
13375
13375
 
13376
- if (this.webChatOptions.enableHelp) {
13376
+ if (this.liveChatOptions.enableHelp) {
13377
13377
  try {
13378
13378
  const articles = await this._fetchHelpArticles();
13379
- this.WebChatState.setHelpArticles(articles);
13379
+ this.LiveChatState.setHelpArticles(articles);
13380
13380
  } catch (error) {
13381
- console.error('[WebChatWidget] Failed to load help articles:', error);
13381
+ console.error('[LiveChatWidget] Failed to load help articles:', error);
13382
13382
  }
13383
13383
  }
13384
13384
 
13385
- if (this.webChatOptions.enableChangelog) {
13385
+ if (this.liveChatOptions.enableChangelog) {
13386
13386
  try {
13387
13387
  const { homeItems, changelogItems } = await this._fetchChangelog();
13388
- this.WebChatState.setHomeChangelogItems(homeItems);
13389
- this.WebChatState.setChangelogItems(changelogItems);
13388
+ this.LiveChatState.setHomeChangelogItems(homeItems);
13389
+ this.LiveChatState.setChangelogItems(changelogItems);
13390
13390
  } catch (error) {
13391
- console.error('[WebChatWidget] Failed to load changelog:', error);
13391
+ console.error('[LiveChatWidget] Failed to load changelog:', error);
13392
13392
  }
13393
13393
  }
13394
13394
  }
@@ -13418,7 +13418,7 @@
13418
13418
  }
13419
13419
  return [];
13420
13420
  } catch (error) {
13421
- console.error('[WebChatWidget] Failed to fetch conversations:', error);
13421
+ console.error('[LiveChatWidget] Failed to fetch conversations:', error);
13422
13422
  return [];
13423
13423
  }
13424
13424
  }
@@ -13428,7 +13428,7 @@
13428
13428
  const response = await this.apiService.getHelpCollections();
13429
13429
  if (response.success && response.data) {
13430
13430
  const collections = response.data.collections || response.data;
13431
- const helpBase = (this.webChatOptions.helpUrl || '').replace(/\/$/, '');
13431
+ const helpBase = (this.liveChatOptions.helpUrl || '').replace(/\/$/, '');
13432
13432
 
13433
13433
  const sorted = [...collections].sort(
13434
13434
  (a, b) => (a.order ?? 0) - (b.order ?? 0)
@@ -13449,7 +13449,7 @@
13449
13449
  }
13450
13450
  return [];
13451
13451
  } catch (error) {
13452
- console.error('[WebChatWidget] Failed to fetch help articles:', error);
13452
+ console.error('[LiveChatWidget] Failed to fetch help articles:', error);
13453
13453
  return [];
13454
13454
  }
13455
13455
  }
@@ -13486,16 +13486,16 @@
13486
13486
  },
13487
13487
  };
13488
13488
  });
13489
- this.WebChatState.setMessages(conversationId, messages);
13489
+ this.LiveChatState.setMessages(conversationId, messages);
13490
13490
 
13491
13491
  await this.apiService.markConversationAsRead(conversationId);
13492
- this.WebChatState.markAsRead(conversationId);
13492
+ this.LiveChatState.markAsRead(conversationId);
13493
13493
 
13494
13494
  return messages;
13495
13495
  }
13496
13496
  return [];
13497
13497
  } catch (error) {
13498
- console.error('[WebChatWidget] Failed to fetch messages:', error);
13498
+ console.error('[LiveChatWidget] Failed to fetch messages:', error);
13499
13499
  return [];
13500
13500
  }
13501
13501
  }
@@ -13523,7 +13523,7 @@
13523
13523
  status: 'open',
13524
13524
  };
13525
13525
 
13526
- this.WebChatState.addConversation(newConversation);
13526
+ this.LiveChatState.addConversation(newConversation);
13527
13527
 
13528
13528
  const initialMessages = [
13529
13529
  {
@@ -13536,23 +13536,23 @@
13536
13536
 
13537
13537
  initialMessages.push({
13538
13538
  id: 'system_rt_' + Date.now(),
13539
- content: this.WebChatState.agentsOnline
13539
+ content: this.LiveChatState.agentsOnline
13540
13540
  ? 'One of our customer support agents will be with you shortly.'
13541
- : this.WebChatState.responseTime,
13541
+ : this.LiveChatState.responseTime,
13542
13542
  isSystem: true,
13543
13543
  timestamp: new Date().toISOString(),
13544
13544
  });
13545
13545
 
13546
- this.WebChatState.setMessages(conv.id, initialMessages);
13546
+ this.LiveChatState.setMessages(conv.id, initialMessages);
13547
13547
 
13548
- this.WebChatState.setActiveConversation(conv.id);
13549
- this.WebChatState.setView('chat');
13548
+ this.LiveChatState.setActiveConversation(conv.id);
13549
+ this.LiveChatState.setView('chat');
13550
13550
 
13551
13551
  return conv;
13552
13552
  }
13553
13553
  return null;
13554
13554
  } catch (error) {
13555
- console.error('[WebChatWidget] Failed to start conversation:', error);
13555
+ console.error('[LiveChatWidget] Failed to start conversation:', error);
13556
13556
  return null;
13557
13557
  }
13558
13558
  }
@@ -13567,28 +13567,28 @@
13567
13567
 
13568
13568
  async _fetchAndApplySettings() {
13569
13569
  try {
13570
- const response = await this.apiService.getWebChatSettings();
13570
+ const response = await this.apiService.getLiveChatSettings();
13571
13571
  if (!response?.status || !response?.data) return;
13572
13572
 
13573
13573
  const s = response.data;
13574
13574
 
13575
13575
  // Only apply values that were NOT explicitly passed in options
13576
13576
  if (s.team_name && !this._hasExplicitOption('teamName')) {
13577
- this.webChatOptions.teamName = s.team_name;
13578
- this.WebChatState.teamName = s.team_name;
13577
+ this.liveChatOptions.teamName = s.team_name;
13578
+ this.LiveChatState.teamName = s.team_name;
13579
13579
  }
13580
13580
  if (s.logo_url && !this._hasExplicitOption('logoUrl')) {
13581
- this.webChatOptions.logoUrl = s.logo_url;
13581
+ this.liveChatOptions.logoUrl = s.logo_url;
13582
13582
  }
13583
13583
  if (s.greeting_message && !this._hasExplicitOption('greetingMessage')) {
13584
- this.WebChatState.greetingMessage = s.greeting_message;
13584
+ this.LiveChatState.greetingMessage = s.greeting_message;
13585
13585
  }
13586
13586
  if (s.response_time && !this._hasExplicitOption('responseTime')) {
13587
- this.WebChatState.responseTime = s.response_time;
13587
+ this.LiveChatState.responseTime = s.response_time;
13588
13588
  }
13589
13589
 
13590
13590
  // Notify views to re-render with new values
13591
- this.WebChatState._notify('availabilityUpdate', {});
13591
+ this.LiveChatState._notify('availabilityUpdate', {});
13592
13592
  } catch (e) {
13593
13593
  // non-fatal
13594
13594
  }
@@ -13605,23 +13605,23 @@
13605
13605
  try {
13606
13606
  const response = await this.apiService.checkAgentsOnline();
13607
13607
  if (response.status && response.data) {
13608
- this.WebChatState.agentsOnline =
13608
+ this.LiveChatState.agentsOnline =
13609
13609
  response.data.agents_online ?? response.data.is_online ?? false;
13610
- this.WebChatState.onlineCount = response.data.online_count || 0;
13611
- this.WebChatState.responseTime = response.data.response_time || '';
13610
+ this.LiveChatState.onlineCount = response.data.online_count || 0;
13611
+ this.LiveChatState.responseTime = response.data.response_time || '';
13612
13612
 
13613
13613
  if (response.data.available_agents) {
13614
- this.WebChatState.setTeamAvatarsFromAgents(
13614
+ this.LiveChatState.setTeamAvatarsFromAgents(
13615
13615
  response.data.available_agents
13616
13616
  );
13617
13617
  }
13618
13618
 
13619
- this.WebChatState._notify('availabilityUpdate', response.data);
13619
+ this.LiveChatState._notify('availabilityUpdate', response.data);
13620
13620
  return response.data;
13621
13621
  }
13622
13622
  return { agents_online: false, online_count: 0 };
13623
13623
  } catch (error) {
13624
- console.error('[WebChatWidget] Failed to check availability:', error);
13624
+ console.error('[LiveChatWidget] Failed to check availability:', error);
13625
13625
  return { agents_online: false, online_count: 0 };
13626
13626
  }
13627
13627
  }
@@ -13712,7 +13712,7 @@
13712
13712
 
13713
13713
  if (response.success && response.data) {
13714
13714
  const changelogs = Array.isArray(response.data) ? response.data : [];
13715
- const changelogBase = (this.webChatOptions.changelogUrl || '').replace(
13715
+ const changelogBase = (this.liveChatOptions.changelogUrl || '').replace(
13716
13716
  /\/$/,
13717
13717
  ''
13718
13718
  );
@@ -13738,7 +13738,7 @@
13738
13738
 
13739
13739
  return { homeItems: [], changelogItems: [] };
13740
13740
  } catch (error) {
13741
- console.error('[WebChatWidget] Failed to fetch changelog:', error);
13741
+ console.error('[LiveChatWidget] Failed to fetch changelog:', error);
13742
13742
  return { homeItems: [], changelogItems: [] };
13743
13743
  }
13744
13744
  }
@@ -13746,7 +13746,7 @@
13746
13746
  async onMount() {
13747
13747
  this._applyPreviewData();
13748
13748
 
13749
- if (this.webChatOptions.autoLoadData) {
13749
+ if (this.liveChatOptions.autoLoadData) {
13750
13750
  // Fetch workspace settings and apply only if not explicitly configured
13751
13751
  this._fetchAndApplySettings();
13752
13752
 
@@ -13764,10 +13764,10 @@
13764
13764
  }
13765
13765
 
13766
13766
  if (
13767
- this.webChatOptions.initialView &&
13768
- this.webChatOptions.initialView !== this.WebChatState.currentView
13767
+ this.liveChatOptions.initialView &&
13768
+ this.liveChatOptions.initialView !== this.LiveChatState.currentView
13769
13769
  ) {
13770
- this.WebChatState.setView(this.webChatOptions.initialView);
13770
+ this.LiveChatState.setView(this.liveChatOptions.initialView);
13771
13771
  }
13772
13772
  }
13773
13773
 
@@ -13789,7 +13789,7 @@
13789
13789
  }
13790
13790
 
13791
13791
  destroy() {
13792
- removewebChatCustomStyles();
13792
+ removeliveChatCustomStyles();
13793
13793
 
13794
13794
  if (this.launcher) {
13795
13795
  this.launcher.destroy();
@@ -13808,7 +13808,7 @@
13808
13808
  ['tab', TabWidget],
13809
13809
  ['inline', InlineWidget],
13810
13810
  ['survey', SurveyWidget],
13811
- ['webChat', WebChatWidget],
13811
+ ['liveChat', LiveChatWidget],
13812
13812
  ['changelog', ChangelogWidget],
13813
13813
  ]);
13814
13814
 
@@ -13918,7 +13918,12 @@
13918
13918
 
13919
13919
  const serverConfig = initData.config ? { ...initData.config } : {};
13920
13920
  if (initData.widgets) {
13921
- serverConfig.widgets = initData.widgets;
13921
+ const widgets = { ...initData.widgets };
13922
+ if (widgets.web_chat && !widgets.liveChat) {
13923
+ widgets.liveChat = widgets.web_chat;
13924
+ delete widgets.web_chat;
13925
+ }
13926
+ serverConfig.widgets = widgets;
13922
13927
  }
13923
13928
  if (Object.keys(serverConfig).length > 0) {
13924
13929
  this.config = deepMerge(serverConfig, this.config);
@@ -13990,8 +13995,8 @@
13990
13995
  return this.createWidget('feedback', options);
13991
13996
  }
13992
13997
 
13993
- createWebChatWidget(options = {}) {
13994
- return this.createWidget('webChat', options);
13998
+ createLiveChatWidget(options = {}) {
13999
+ return this.createWidget('liveChat', options);
13995
14000
  }
13996
14001
 
13997
14002
  createChangelogWidget(options = {}) {
@@ -14783,7 +14788,7 @@
14783
14788
  _bindMethods() {
14784
14789
  this.createWidget = this.createWidget.bind(this);
14785
14790
  this.createFeedbackWidget = this.createFeedbackWidget.bind(this);
14786
- this.createWebChatWidget = this.createWebChatWidget.bind(this);
14791
+ this.createLiveChatWidget = this.createLiveChatWidget.bind(this);
14787
14792
  this.createChangelogWidget = this.createChangelogWidget.bind(this);
14788
14793
  this.createSurveyWidget = this.createSurveyWidget.bind(this);
14789
14794
  this.destroyWidget = this.destroyWidget.bind(this);
@@ -14993,7 +14998,7 @@
14993
14998
  _organization: null,
14994
14999
  _q: [],
14995
15000
  _feedbackWidget: null,
14996
- _WebChatWidget: null,
15001
+ _LiveChatWidget: null,
14997
15002
  _surveyWidget: null,
14998
15003
 
14999
15004
  version: '1.0.0',
@@ -15183,10 +15188,10 @@
15183
15188
  // Web Chat
15184
15189
  // ==================
15185
15190
 
15186
- async webChat(options = {}, callback) {
15191
+ async liveChat(options = {}, callback) {
15187
15192
  const sdk = await ensureSDK(options);
15188
15193
  if (!sdk) {
15189
- Product7._q.push(['webChat', options, callback]);
15194
+ Product7._q.push(['liveChat', options, callback]);
15190
15195
  return null;
15191
15196
  }
15192
15197
 
@@ -15227,30 +15232,30 @@
15227
15232
  widgetOptions.enabled = true;
15228
15233
 
15229
15234
  try {
15230
- const widget = sdk.createWebChatWidget(widgetOptions);
15235
+ const widget = sdk.createLiveChatWidget(widgetOptions);
15231
15236
  widget.mount();
15232
15237
  widget.show();
15233
15238
 
15234
- Product7._WebChatWidget = widget;
15239
+ Product7._LiveChatWidget = widget;
15235
15240
 
15236
15241
  if (typeof callback === 'function') {
15237
15242
  callback({ action: 'widgetReady' });
15238
15243
 
15239
- sdk.eventBus.on('webChat:messageSent', (data) => {
15244
+ sdk.eventBus.on('liveChat:messageSent', (data) => {
15240
15245
  callback({ action: 'messageSent', message: data });
15241
15246
  });
15242
15247
 
15243
- sdk.eventBus.on('webChat:opened', () => {
15244
- callback({ action: 'webChatOpened' });
15248
+ sdk.eventBus.on('liveChat:opened', () => {
15249
+ callback({ action: 'liveChatOpened' });
15245
15250
  });
15246
15251
 
15247
- sdk.eventBus.on('webChat:closed', () => {
15248
- callback({ action: 'webChatClosed' });
15252
+ sdk.eventBus.on('liveChat:closed', () => {
15253
+ callback({ action: 'liveChatClosed' });
15249
15254
  });
15250
15255
  }
15251
15256
 
15252
- // Listen for data-product7-web-chat clicks
15253
- Product7._setupWebChatAttributeTriggers();
15257
+ // Listen for data-product7-live-chat clicks
15258
+ Product7._setupLiveChatAttributeTriggers();
15254
15259
  Product7._setupPostMessageListener();
15255
15260
 
15256
15261
  return widget;
@@ -15261,23 +15266,23 @@
15261
15266
  }
15262
15267
  },
15263
15268
 
15264
- openWebChat() {
15265
- if (Product7._WebChatWidget) {
15266
- Product7._WebChatWidget.open?.() || Product7._WebChatWidget.openPanel?.();
15269
+ openLiveChat() {
15270
+ if (Product7._LiveChatWidget) {
15271
+ Product7._LiveChatWidget.open?.() || Product7._LiveChatWidget.openPanel?.();
15267
15272
  }
15268
15273
  },
15269
15274
 
15270
- closeWebChat() {
15271
- if (Product7._WebChatWidget) {
15272
- Product7._WebChatWidget.close?.() ||
15273
- Product7._WebChatWidget.closePanel?.();
15275
+ closeLiveChat() {
15276
+ if (Product7._LiveChatWidget) {
15277
+ Product7._LiveChatWidget.close?.() ||
15278
+ Product7._LiveChatWidget.closePanel?.();
15274
15279
  }
15275
15280
  },
15276
15281
 
15277
- destroyWebChat() {
15278
- if (Product7._WebChatWidget) {
15279
- Product7._WebChatWidget.destroy();
15280
- Product7._WebChatWidget = null;
15282
+ destroyLiveChat() {
15283
+ if (Product7._LiveChatWidget) {
15284
+ Product7._LiveChatWidget.destroy();
15285
+ Product7._LiveChatWidget = null;
15281
15286
  }
15282
15287
  },
15283
15288
 
@@ -15581,7 +15586,7 @@
15581
15586
 
15582
15587
  destroy() {
15583
15588
  Product7.destroyFeedback();
15584
- Product7.destroyWebChat();
15589
+ Product7.destroyLiveChat();
15585
15590
  Product7.destroySurvey();
15586
15591
  if (Product7._sdk) {
15587
15592
  Product7._sdk.destroy();
@@ -15591,7 +15596,7 @@
15591
15596
  Product7._organization = null;
15592
15597
  Product7._q = [];
15593
15598
  Product7._feedbackListenerAttached = false;
15594
- Product7._webChatListenerAttached = false;
15599
+ Product7._liveChatListenerAttached = false;
15595
15600
  Product7._postMessageListenerAttached = false;
15596
15601
  },
15597
15602
 
@@ -15622,16 +15627,16 @@
15622
15627
  });
15623
15628
  },
15624
15629
 
15625
- _setupWebChatAttributeTriggers() {
15630
+ _setupLiveChatAttributeTriggers() {
15626
15631
  if (typeof document === 'undefined') return;
15627
- if (Product7._webChatListenerAttached) return;
15628
- Product7._webChatListenerAttached = true;
15632
+ if (Product7._liveChatListenerAttached) return;
15633
+ Product7._liveChatListenerAttached = true;
15629
15634
 
15630
15635
  document.addEventListener('click', (e) => {
15631
- const trigger = e.target.closest('[data-product7-web-chat]');
15636
+ const trigger = e.target.closest('[data-product7-live-chat]');
15632
15637
  if (trigger) {
15633
15638
  e.preventDefault();
15634
- Product7.openWebChat();
15639
+ Product7.openLiveChat();
15635
15640
  }
15636
15641
  });
15637
15642
  },
@@ -15652,11 +15657,11 @@
15652
15657
  case 'closeFeedback':
15653
15658
  Product7.closeFeedback();
15654
15659
  break;
15655
- case 'openWebChat':
15656
- Product7.openWebChat();
15660
+ case 'openLiveChat':
15661
+ Product7.openLiveChat();
15657
15662
  break;
15658
- case 'closeWebChat':
15659
- Product7.closeWebChat();
15663
+ case 'closeLiveChat':
15664
+ Product7.closeLiveChat();
15660
15665
  break;
15661
15666
  case 'closeSurvey':
15662
15667
  Product7.closeSurvey();
@@ -15673,7 +15678,7 @@
15673
15678
  TabWidget,
15674
15679
  InlineWidget,
15675
15680
  SurveyWidget,
15676
- WebChatWidget,
15681
+ LiveChatWidget,
15677
15682
  WidgetFactory,
15678
15683
  EventBus,
15679
15684
  APIService,
@@ -15705,12 +15710,12 @@
15705
15710
  exports.ConfigError = ConfigError;
15706
15711
  exports.EventBus = EventBus;
15707
15712
  exports.InlineWidget = InlineWidget;
15713
+ exports.LiveChatWidget = LiveChatWidget;
15708
15714
  exports.Product7 = Product7$1;
15709
15715
  exports.SDKError = SDKError;
15710
15716
  exports.SurveyWidget = SurveyWidget;
15711
15717
  exports.TabWidget = TabWidget;
15712
15718
  exports.ValidationError = ValidationError;
15713
- exports.WebChatWidget = WebChatWidget;
15714
15719
  exports.WidgetError = WidgetError;
15715
15720
  exports.WidgetFactory = WidgetFactory;
15716
15721
  exports.default = Product7;