@pocketping/widget 1.10.0 → 1.12.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;
@@ -601,23 +628,27 @@ function styles(options) {
       padding: 8px 10px;
       gap: 8px;
       background: ${resolvedFooterColor};
-      align-items: center;
+      align-items: flex-end;
     }
 
     .pp-input {
       flex: 1;
       min-width: 0;
-      height: 42px;
-      line-height: 42px;
-      padding: 0 14px;
+      min-height: 42px;
+      max-height: 120px;
+      padding: 10px 14px;
       border: none;
       border-radius: 8px;
       background: ${isDark ? "#2a3942" : "#ffffff"};
       color: ${isDark ? "#e9edef" : "#111b21"};
       font-size: 15px;
+      line-height: 1.4;
       outline: none;
       box-sizing: border-box;
       margin: 0;
+      resize: none;
+      font-family: inherit;
+      overflow-y: auto;
     }
 
     .pp-input:focus {
@@ -1886,6 +1917,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) {
@@ -2042,6 +2107,9 @@ function ChatWidget({ client: client2, config: initialConfig }) {
     setInputValue("");
     setPendingAttachments([]);
     setReplyingTo(null);
+    if (inputRef.current) {
+      inputRef.current.style.height = "auto";
+    }
     try {
       await client2.sendMessage(content, attachmentIds, replyToId);
     } catch (err) {
@@ -2051,8 +2119,17 @@ function ChatWidget({ client: client2, config: initialConfig }) {
   const handleInputChange = (e) => {
     const target = e.target;
     setInputValue(target.value);
+    target.style.height = "auto";
+    target.style.height = Math.min(target.scrollHeight, 120) + "px";
     client2.sendTyping(true);
   };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      const form = e.target.closest("form");
+      if (form) form.requestSubmit();
+    }
+  };
   const handleFileSelect = async (e) => {
     const target = e.target;
     const files = target.files;
@@ -2468,7 +2545,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" }),
@@ -2597,15 +2674,16 @@ function ChatWidget({ client: client2, config: initialConfig }) {
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              "input",
+              "textarea",
               {
                 ref: inputRef,
-                type: "text",
                 class: "pp-input",
                 placeholder: config.placeholder ?? "Type a message...",
                 value: inputValue,
                 onInput: handleInputChange,
-                disabled: !isConnected
+                onKeyDown: handleKeyDown,
+                disabled: !isConnected,
+                rows: 1
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(

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;
@@ -560,23 +587,27 @@ function styles(options) {
       padding: 8px 10px;
       gap: 8px;
       background: ${resolvedFooterColor};
-      align-items: center;
+      align-items: flex-end;
     }
 
     .pp-input {
       flex: 1;
       min-width: 0;
-      height: 42px;
-      line-height: 42px;
-      padding: 0 14px;
+      min-height: 42px;
+      max-height: 120px;
+      padding: 10px 14px;
       border: none;
       border-radius: 8px;
       background: ${isDark ? "#2a3942" : "#ffffff"};
       color: ${isDark ? "#e9edef" : "#111b21"};
       font-size: 15px;
+      line-height: 1.4;
       outline: none;
       box-sizing: border-box;
       margin: 0;
+      resize: none;
+      font-family: inherit;
+      overflow-y: auto;
     }
 
     .pp-input:focus {
@@ -1845,6 +1876,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) {
@@ -2001,6 +2066,9 @@ function ChatWidget({ client: client2, config: initialConfig }) {
     setInputValue("");
     setPendingAttachments([]);
     setReplyingTo(null);
+    if (inputRef.current) {
+      inputRef.current.style.height = "auto";
+    }
     try {
       await client2.sendMessage(content, attachmentIds, replyToId);
     } catch (err) {
@@ -2010,8 +2078,17 @@ function ChatWidget({ client: client2, config: initialConfig }) {
   const handleInputChange = (e) => {
     const target = e.target;
     setInputValue(target.value);
+    target.style.height = "auto";
+    target.style.height = Math.min(target.scrollHeight, 120) + "px";
     client2.sendTyping(true);
   };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      const form = e.target.closest("form");
+      if (form) form.requestSubmit();
+    }
+  };
   const handleFileSelect = async (e) => {
     const target = e.target;
     const files = target.files;
@@ -2427,7 +2504,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" }),
@@ -2556,15 +2633,16 @@ function ChatWidget({ client: client2, config: initialConfig }) {
               }
             ),
             /* @__PURE__ */ jsx2(
-              "input",
+              "textarea",
               {
                 ref: inputRef,
-                type: "text",
                 class: "pp-input",
                 placeholder: config.placeholder ?? "Type a message...",
                 value: inputValue,
                 onInput: handleInputChange,
-                disabled: !isConnected
+                onKeyDown: handleKeyDown,
+                disabled: !isConnected,
+                rows: 1
               }
             ),
             /* @__PURE__ */ jsx2(