wakz-chat-widget 4.0.1 → 4.1.0

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 (2) hide show
  1. package/index.js +46 -12
  2. package/package.json +2 -2
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * WAKZ Chat Widget v4.0.0
2
+ * WAKZ Chat Widget v4.1.0
3
3
  * ─────────────────────────────────────────────────────────────────
4
4
  * A production-grade, self-contained chat widget using Shadow DOM.
5
5
  * Liquid Glass design — pill header, floating input, dark user bubbles.
@@ -146,7 +146,13 @@
146
146
  close:
147
147
  '<svg width="14" height="14" viewBox="0 0 24 24" fill="none"><line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/><line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>',
148
148
  error:
149
- '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>'
149
+ '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
150
+ message:
151
+ '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22z"/></svg>',
152
+ whatsapp:
153
+ '<svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>',
154
+ headset:
155
+ '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 18v-6a9 9 0 0 1 18 0v6"/><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3ZM3 19a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H5"/></svg>'
150
156
  };
151
157
 
152
158
  /* ════════════════════════════════════════════════════════════════
@@ -633,6 +639,7 @@
633
639
  ' overflow-y: auto;',
634
640
  ' overflow-x: hidden;',
635
641
  ' padding: 0;',
642
+ ' background: var(--wakz-chat-bg);',
636
643
  ' padding-top: 76px;',
637
644
  ' padding-bottom: 100px;',
638
645
  ' padding-right: 14px;',
@@ -668,8 +675,8 @@
668
675
  '.wakz-user-card {',
669
676
  ' max-width: 78%;',
670
677
  ' padding: 10px 14px 8px;',
671
- ' background: #111111;',
672
- ' color: #ffffff;',
678
+ ' background: var(--wakz-user-bubble);',
679
+ ' color: var(--wakz-user-text);',
673
680
  ' border-radius: 18px 18px 5px 18px;',
674
681
  ' box-shadow: 0 2px 10px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.03);',
675
682
  '}',
@@ -684,7 +691,8 @@
684
691
  '}',
685
692
  '.wakz-user-time {',
686
693
  ' font-size: 9.5px;',
687
- ' color: rgba(255,255,255,0.4);',
694
+ ' color: var(--wakz-user-text);',
695
+ ' opacity: 0.4;',
688
696
  ' display: block;',
689
697
  ' margin-top: 4px;',
690
698
  ' text-align: left;',
@@ -699,6 +707,9 @@
699
707
  ' flex-direction: column;',
700
708
  ' align-items: flex-end;',
701
709
  ' gap: 1px;',
710
+ ' padding: 6px 8px;',
711
+ ' border-radius: 16px;',
712
+ ' background: var(--wakz-bot-bubble);',
702
713
  '}',
703
714
  '.wakz-bot-label {',
704
715
  ' font-size: 10px;',
@@ -712,7 +723,7 @@
712
723
  ' font-size: 13.5px;',
713
724
  ' font-weight: 400;',
714
725
  ' line-height: 1.75;',
715
- ' color: #333333;',
726
+ ' color: var(--wakz-bot-text);',
716
727
  ' white-space: pre-wrap;',
717
728
  ' word-break: break-word;',
718
729
  ' text-align: right;',
@@ -977,8 +988,8 @@
977
988
  '}',
978
989
  /* ── Send Active State ── */
979
990
  '.wakz-send--active {',
980
- ' background: #111111;',
981
- ' border-color: #111111;',
991
+ ' background: var(--wakz-primary);',
992
+ ' border-color: var(--wakz-primary);',
982
993
  ' color: #ffffff;',
983
994
  ' filter: none;',
984
995
  ' backdrop-filter: none;',
@@ -986,7 +997,7 @@
986
997
  ' box-shadow: 0 4px 20px rgba(0,0,0,0.22), 0 1px 6px rgba(0,0,0,0.12);',
987
998
  '}',
988
999
  '.wakz-send--active:hover:not(:disabled) {',
989
- ' background: #222;',
1000
+ ' background: var(--wakz-user-bubble);',
990
1001
  ' transform: scale(1.08);',
991
1002
  ' box-shadow: 0 6px 24px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.14);',
992
1003
  '}',
@@ -1004,6 +1015,28 @@
1004
1015
  ' border-bottom-right-radius: 4px;',
1005
1016
  '}',
1006
1017
 
1018
+ /* ══════════════════════════════════════════════════
1019
+ FULLSCREEN MODE — overrides window to fill viewport
1020
+ ══════════════════════════════════════════════════ */
1021
+ '.wakz-mode-fullscreen {',
1022
+ ' width: 100vw !important;',
1023
+ ' height: 100vh !important;',
1024
+ ' max-width: 100vw !important;',
1025
+ ' max-height: 100vh !important;',
1026
+ ' top: 0 !important;',
1027
+ ' left: 0 !important;',
1028
+ ' transform: none !important;',
1029
+ ' border-radius: 0 !important;',
1030
+ ' box-shadow: none !important;',
1031
+ '}',
1032
+ '.wakz-mode-fullscreen.wakz-visible {',
1033
+ ' transform: none !important;',
1034
+ '}',
1035
+ /* Hide overlay in fullscreen mode — not needed */
1036
+ '.wakz-mode-fullscreen ~ .wakz-overlay {',
1037
+ ' display: none !important;',
1038
+ '}',
1039
+
1007
1040
  /* ══════════════════════════════════════════════════
1008
1041
  RESPONSIVE
1009
1042
  ══════════════════════════════════════════════════ */
@@ -1395,10 +1428,11 @@
1395
1428
 
1396
1429
  /* ── FAB Icon ── */
1397
1430
  var iconKey = cfg.fabIcon || 'chat';
1398
- if (iconKey === 'chat') {
1399
- self._toggleBtn.innerHTML = _ICONS.chatBubble;
1400
- } else if (_ICONS[iconKey]) {
1431
+ if (iconKey === 'chatBubble') iconKey = 'chat';
1432
+ if (_ICONS[iconKey]) {
1401
1433
  self._toggleBtn.innerHTML = _ICONS[iconKey];
1434
+ } else {
1435
+ self._toggleBtn.innerHTML = _ICONS.chatBubble;
1402
1436
  }
1403
1437
  /* Re-append status dot after innerHTML change */
1404
1438
  if (self._statusDot && self._statusDot.parentNode !== self._toggleBtn) {
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "wakz-chat-widget",
3
- "version": "4.0.1",
3
+ "version": "4.1.0",
4
4
  "description": "WAKZ Chat Widget — Liquid Glass design with Shadow DOM isolation, CSS Variables, Data-Driven customization, zero dependencies.",
5
5
  "main": "index.js",
6
6
  "scripts": {
7
- "prepublishOnly": "echo 'Ready to publish wakz-chat-widget v4.0.1'"
7
+ "prepublishOnly": "echo 'Ready to publish wakz-chat-widget v4.1.0'"
8
8
  },
9
9
  "keywords": [
10
10
  "chat",