@pocketping/widget 1.10.0 → 1.11.0

package/dist/index.cjs

@@ -515,6 +515,33 @@ function styles(options) {
       display: inline;
     }
 
+    /* Markdown styles */
+    .pp-message-content strong {
+      font-weight: 600;
+    }
+
+    .pp-message-content em {
+      font-style: italic;
+    }
+
+    .pp-message-content code {
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      font-size: 0.9em;
+      background: ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.06)"};
+      padding: 1px 4px;
+      border-radius: 3px;
+    }
+
+    .pp-md-list {
+      margin: 4px 0;
+      padding-left: 20px;
+      display: block;
+    }
+
+    .pp-md-list li {
+      margin: 2px 0;
+    }
+
     /* WhatsApp-style inline timestamp - floats to the right */
     .pp-message-time {
       font-size: 11px;
@@ -1886,6 +1913,40 @@ function PreChatForm({ client: client2, config, onComplete, onSkip }) {
   ] });
 }
 
+// src/utils/markdown.ts
+function renderMarkdown(text) {
+  if (!text) return "";
+  let html = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  const lines = html.split("\n");
+  let inList = false;
+  const processedLines = [];
+  for (const line of lines) {
+    const listMatch = line.match(/^[\s]*[*-]\s+(.+)$/);
+    if (listMatch) {
+      if (!inList) {
+        processedLines.push('<ul class="pp-md-list">');
+        inList = true;
+      }
+      processedLines.push(`<li>${processInline(listMatch[1])}</li>`);
+    } else {
+      if (inList) {
+        processedLines.push("</ul>");
+        inList = false;
+      }
+      processedLines.push(processInline(line));
+    }
+  }
+  if (inList) {
+    processedLines.push("</ul>");
+  }
+  html = processedLines.join("<br />");
+  html = html.replace(/<br \/><ul/g, "<ul").replace(/<\/ul><br \/>/g, "</ul>").replace(/<br \/><li>/g, "<li>").replace(/<\/li><br \/>/g, "</li>");
+  return html;
+}
+function processInline(text) {
+  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>");
+}
+
 // src/components/ChatWidget.tsx
 var import_jsx_runtime2 = require("preact/jsx-runtime");
 function formatDateSeparator(date) {
@@ -2468,7 +2529,7 @@ function ChatWidget({ client: client2, config: initialConfig }) {
                           " Message deleted"
                         ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
                           msg.content && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { class: "pp-message-content", children: [
-                            msg.content,
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { dangerouslySetInnerHTML: { __html: renderMarkdown(msg.content) } }),
                             /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { class: "pp-message-time", children: [
                               formatTime(msg.timestamp),
                               isEdited && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { class: "pp-edited-badge", children: "edited" }),

package/dist/index.js

@@ -474,6 +474,33 @@ function styles(options) {
       display: inline;
     }
 
+    /* Markdown styles */
+    .pp-message-content strong {
+      font-weight: 600;
+    }
+
+    .pp-message-content em {
+      font-style: italic;
+    }
+
+    .pp-message-content code {
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      font-size: 0.9em;
+      background: ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.06)"};
+      padding: 1px 4px;
+      border-radius: 3px;
+    }
+
+    .pp-md-list {
+      margin: 4px 0;
+      padding-left: 20px;
+      display: block;
+    }
+
+    .pp-md-list li {
+      margin: 2px 0;
+    }
+
     /* WhatsApp-style inline timestamp - floats to the right */
     .pp-message-time {
       font-size: 11px;
@@ -1845,6 +1872,40 @@ function PreChatForm({ client: client2, config, onComplete, onSkip }) {
   ] });
 }
 
+// src/utils/markdown.ts
+function renderMarkdown(text) {
+  if (!text) return "";
+  let html = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  const lines = html.split("\n");
+  let inList = false;
+  const processedLines = [];
+  for (const line of lines) {
+    const listMatch = line.match(/^[\s]*[*-]\s+(.+)$/);
+    if (listMatch) {
+      if (!inList) {
+        processedLines.push('<ul class="pp-md-list">');
+        inList = true;
+      }
+      processedLines.push(`<li>${processInline(listMatch[1])}</li>`);
+    } else {
+      if (inList) {
+        processedLines.push("</ul>");
+        inList = false;
+      }
+      processedLines.push(processInline(line));
+    }
+  }
+  if (inList) {
+    processedLines.push("</ul>");
+  }
+  html = processedLines.join("<br />");
+  html = html.replace(/<br \/><ul/g, "<ul").replace(/<\/ul><br \/>/g, "</ul>").replace(/<br \/><li>/g, "<li>").replace(/<\/li><br \/>/g, "</li>");
+  return html;
+}
+function processInline(text) {
+  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>");
+}
+
 // src/components/ChatWidget.tsx
 import { Fragment as Fragment3, jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
 function formatDateSeparator(date) {
@@ -2427,7 +2488,7 @@ function ChatWidget({ client: client2, config: initialConfig }) {
                           " Message deleted"
                         ] }) : /* @__PURE__ */ jsxs2(Fragment3, { children: [
                           msg.content && /* @__PURE__ */ jsxs2("div", { class: "pp-message-content", children: [
-                            msg.content,
+                            /* @__PURE__ */ jsx2("span", { dangerouslySetInnerHTML: { __html: renderMarkdown(msg.content) } }),
                             /* @__PURE__ */ jsxs2("span", { class: "pp-message-time", children: [
                               formatTime(msg.timestamp),
                               isEdited && /* @__PURE__ */ jsx2("span", { class: "pp-edited-badge", children: "edited" }),