@pocketping/widget 1.9.0 → 1.11.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 (4) hide show
  1. package/dist/index.cjs +66 -4
  2. package/dist/index.js +66 -4
  3. package/dist/pocketping.min.global.js +71 -43
  4. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -63,6 +63,7 @@ function styles(options) {
63
63
  const resolvedFooterColor = resolveThemeColor(footerColor, isDark, "#f0f2f5", "#202c33");
64
64
  const resolvedToggleColor = resolveThemeColor(toggleColor, isDark, "#25d366", "#25d366");
65
65
  const resolvedToggleHoverColor = resolvedToggleColor !== "#25d366" ? adjustBrightness(resolvedToggleColor, -10) : "#22c55e";
66
+ const resolvedSendButtonHoverColor = adjustBrightness(resolvedHeaderColor, -15);
66
67
  const whatsappPattern = isDark ? `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")` : `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`;
67
68
  const dotsPattern = isDark ? `url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E")` : `url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23000000' fill-opacity='0.05'/%3E%3C/svg%3E")`;
68
69
  const resolvedChatBg = resolveThemeColor(chatBackground, isDark, "whatsapp", "whatsapp");
@@ -514,6 +515,33 @@ function styles(options) {
514
515
  display: inline;
515
516
  }
516
517
 
518
+ /* Markdown styles */
519
+ .pp-message-content strong {
520
+ font-weight: 600;
521
+ }
522
+
523
+ .pp-message-content em {
524
+ font-style: italic;
525
+ }
526
+
527
+ .pp-message-content code {
528
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
529
+ font-size: 0.9em;
530
+ background: ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.06)"};
531
+ padding: 1px 4px;
532
+ border-radius: 3px;
533
+ }
534
+
535
+ .pp-md-list {
536
+ margin: 4px 0;
537
+ padding-left: 20px;
538
+ display: block;
539
+ }
540
+
541
+ .pp-md-list li {
542
+ margin: 2px 0;
543
+ }
544
+
517
545
  /* WhatsApp-style inline timestamp - floats to the right */
518
546
  .pp-message-time {
519
547
  font-size: 11px;
@@ -632,7 +660,7 @@ function styles(options) {
632
660
  height: 42px;
633
661
  min-width: 42px;
634
662
  border-radius: 50%;
635
- background: #00a884;
663
+ background: ${resolvedHeaderColor};
636
664
  color: white;
637
665
  border: none;
638
666
  cursor: pointer;
@@ -646,7 +674,7 @@ function styles(options) {
646
674
  }
647
675
 
648
676
  .pp-send-btn:not(:disabled):hover {
649
- background: #008f72;
677
+ background: ${resolvedSendButtonHoverColor};
650
678
  }
651
679
 
652
680
  .pp-send-btn:not(:disabled):active {
@@ -672,7 +700,7 @@ function styles(options) {
672
700
  }
673
701
 
674
702
  .pp-footer a {
675
- color: ${isDark ? "#00a884" : "#008069"};
703
+ color: ${primaryColor};
676
704
  text-decoration: none;
677
705
  font-weight: 500;
678
706
  }
@@ -1885,6 +1913,40 @@ function PreChatForm({ client: client2, config, onComplete, onSkip }) {
1885
1913
  ] });
1886
1914
  }
1887
1915
 
1916
+ // src/utils/markdown.ts
1917
+ function renderMarkdown(text) {
1918
+ if (!text) return "";
1919
+ let html = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
1920
+ const lines = html.split("\n");
1921
+ let inList = false;
1922
+ const processedLines = [];
1923
+ for (const line of lines) {
1924
+ const listMatch = line.match(/^[\s]*[*-]\s+(.+)$/);
1925
+ if (listMatch) {
1926
+ if (!inList) {
1927
+ processedLines.push('<ul class="pp-md-list">');
1928
+ inList = true;
1929
+ }
1930
+ processedLines.push(`<li>${processInline(listMatch[1])}</li>`);
1931
+ } else {
1932
+ if (inList) {
1933
+ processedLines.push("</ul>");
1934
+ inList = false;
1935
+ }
1936
+ processedLines.push(processInline(line));
1937
+ }
1938
+ }
1939
+ if (inList) {
1940
+ processedLines.push("</ul>");
1941
+ }
1942
+ html = processedLines.join("<br />");
1943
+ html = html.replace(/<br \/><ul/g, "<ul").replace(/<\/ul><br \/>/g, "</ul>").replace(/<br \/><li>/g, "<li>").replace(/<\/li><br \/>/g, "</li>");
1944
+ return html;
1945
+ }
1946
+ function processInline(text) {
1947
+ return text.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>").replace(/__(.+?)__/g, "<strong>$1</strong>").replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, "<em>$1</em>").replace(/(?<!_)_([^_]+)_(?!_)/g, "<em>$1</em>").replace(/`([^`]+)`/g, "<code>$1</code>");
1948
+ }
1949
+
1888
1950
  // src/components/ChatWidget.tsx
1889
1951
  var import_jsx_runtime2 = require("preact/jsx-runtime");
1890
1952
  function formatDateSeparator(date) {
@@ -2467,7 +2529,7 @@ function ChatWidget({ client: client2, config: initialConfig }) {
2467
2529
  " Message deleted"
2468
2530
  ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
2469
2531
  msg.content && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { class: "pp-message-content", children: [
2470
- msg.content,
2532
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { dangerouslySetInnerHTML: { __html: renderMarkdown(msg.content) } }),
2471
2533
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { class: "pp-message-time", children: [
2472
2534
  formatTime(msg.timestamp),
2473
2535
  isEdited && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { class: "pp-edited-badge", children: "edited" }),
package/dist/index.js CHANGED
@@ -22,6 +22,7 @@ function styles(options) {
22
22
  const resolvedFooterColor = resolveThemeColor(footerColor, isDark, "#f0f2f5", "#202c33");
23
23
  const resolvedToggleColor = resolveThemeColor(toggleColor, isDark, "#25d366", "#25d366");
24
24
  const resolvedToggleHoverColor = resolvedToggleColor !== "#25d366" ? adjustBrightness(resolvedToggleColor, -10) : "#22c55e";
25
+ const resolvedSendButtonHoverColor = adjustBrightness(resolvedHeaderColor, -15);
25
26
  const whatsappPattern = isDark ? `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")` : `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`;
26
27
  const dotsPattern = isDark ? `url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E")` : `url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23000000' fill-opacity='0.05'/%3E%3C/svg%3E")`;
27
28
  const resolvedChatBg = resolveThemeColor(chatBackground, isDark, "whatsapp", "whatsapp");
@@ -473,6 +474,33 @@ function styles(options) {
473
474
  display: inline;
474
475
  }
475
476
 
477
+ /* Markdown styles */
478
+ .pp-message-content strong {
479
+ font-weight: 600;
480
+ }
481
+
482
+ .pp-message-content em {
483
+ font-style: italic;
484
+ }
485
+
486
+ .pp-message-content code {
487
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
488
+ font-size: 0.9em;
489
+ background: ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.06)"};
490
+ padding: 1px 4px;
491
+ border-radius: 3px;
492
+ }
493
+
494
+ .pp-md-list {
495
+ margin: 4px 0;
496
+ padding-left: 20px;
497
+ display: block;
498
+ }
499
+
500
+ .pp-md-list li {
501
+ margin: 2px 0;
502
+ }
503
+
476
504
  /* WhatsApp-style inline timestamp - floats to the right */
477
505
  .pp-message-time {
478
506
  font-size: 11px;
@@ -591,7 +619,7 @@ function styles(options) {
591
619
  height: 42px;
592
620
  min-width: 42px;
593
621
  border-radius: 50%;
594
- background: #00a884;
622
+ background: ${resolvedHeaderColor};
595
623
  color: white;
596
624
  border: none;
597
625
  cursor: pointer;
@@ -605,7 +633,7 @@ function styles(options) {
605
633
  }
606
634
 
607
635
  .pp-send-btn:not(:disabled):hover {
608
- background: #008f72;
636
+ background: ${resolvedSendButtonHoverColor};
609
637
  }
610
638
 
611
639
  .pp-send-btn:not(:disabled):active {
@@ -631,7 +659,7 @@ function styles(options) {
631
659
  }
632
660
 
633
661
  .pp-footer a {
634
- color: ${isDark ? "#00a884" : "#008069"};
662
+ color: ${primaryColor};
635
663
  text-decoration: none;
636
664
  font-weight: 500;
637
665
  }
@@ -1844,6 +1872,40 @@ function PreChatForm({ client: client2, config, onComplete, onSkip }) {
1844
1872
  ] });
1845
1873
  }
1846
1874
 
1875
+ // src/utils/markdown.ts
1876
+ function renderMarkdown(text) {
1877
+ if (!text) return "";
1878
+ let html = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
1879
+ const lines = html.split("\n");
1880
+ let inList = false;
1881
+ const processedLines = [];
1882
+ for (const line of lines) {
1883
+ const listMatch = line.match(/^[\s]*[*-]\s+(.+)$/);
1884
+ if (listMatch) {
1885
+ if (!inList) {
1886
+ processedLines.push('<ul class="pp-md-list">');
1887
+ inList = true;
1888
+ }
1889
+ processedLines.push(`<li>${processInline(listMatch[1])}</li>`);
1890
+ } else {
1891
+ if (inList) {
1892
+ processedLines.push("</ul>");
1893
+ inList = false;
1894
+ }
1895
+ processedLines.push(processInline(line));
1896
+ }
1897
+ }
1898
+ if (inList) {
1899
+ processedLines.push("</ul>");
1900
+ }
1901
+ html = processedLines.join("<br />");
1902
+ html = html.replace(/<br \/><ul/g, "<ul").replace(/<\/ul><br \/>/g, "</ul>").replace(/<br \/><li>/g, "<li>").replace(/<\/li><br \/>/g, "</li>");
1903
+ return html;
1904
+ }
1905
+ function processInline(text) {
1906
+ return text.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>").replace(/__(.+?)__/g, "<strong>$1</strong>").replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, "<em>$1</em>").replace(/(?<!_)_([^_]+)_(?!_)/g, "<em>$1</em>").replace(/`([^`]+)`/g, "<code>$1</code>");
1907
+ }
1908
+
1847
1909
  // src/components/ChatWidget.tsx
1848
1910
  import { Fragment as Fragment3, jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
1849
1911
  function formatDateSeparator(date) {
@@ -2426,7 +2488,7 @@ function ChatWidget({ client: client2, config: initialConfig }) {
2426
2488
  " Message deleted"
2427
2489
  ] }) : /* @__PURE__ */ jsxs2(Fragment3, { children: [
2428
2490
  msg.content && /* @__PURE__ */ jsxs2("div", { class: "pp-message-content", children: [
2429
- msg.content,
2491
+ /* @__PURE__ */ jsx2("span", { dangerouslySetInnerHTML: { __html: renderMarkdown(msg.content) } }),
2430
2492
  /* @__PURE__ */ jsxs2("span", { class: "pp-message-time", children: [
2431
2493
  formatTime(msg.timestamp),
2432
2494
  isEdited && /* @__PURE__ */ jsx2("span", { class: "pp-edited-badge", children: "edited" }),