@pocketping/widget 1.5.1 → 1.6.0

package/dist/index.cjs

@@ -189,7 +189,7 @@ function styles(primaryColor, theme) {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 16px;
+      padding: 12px 14px;
       background: ${primaryColor};
       color: white;
     }
@@ -197,24 +197,24 @@ function styles(primaryColor, theme) {
     .pp-header-info {
       display: flex;
       align-items: center;
-      gap: 12px;
+      gap: 10px;
     }
 
     .pp-avatar {
-      width: 40px;
-      height: 40px;
+      width: 36px;
+      height: 36px;
       border-radius: 50%;
       object-fit: cover;
     }
 
     .pp-header-title {
       font-weight: 600;
-      font-size: 16px;
+      font-size: 15px;
     }
 
     .pp-header-status {
-      font-size: 12px;
-      opacity: 0.9;
+      font-size: 11px;
+      opacity: 0.85;
       display: flex;
       align-items: center;
       gap: 4px;
@@ -260,10 +260,10 @@ function styles(primaryColor, theme) {
     .pp-messages {
       flex: 1;
       overflow-y: auto;
-      padding: 16px;
+      padding: 12px;
       display: flex;
       flex-direction: column;
-      gap: 12px;
+      gap: 3px;
     }
 
     .pp-welcome {
@@ -273,14 +273,32 @@ function styles(primaryColor, theme) {
       font-size: 13px;
     }
 
+    .pp-date-separator {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 16px 0 12px;
+    }
+
+    .pp-date-separator span {
+      background: ${colors.bgSecondary};
+      color: ${colors.textSecondary};
+      font-size: 11px;
+      padding: 4px 12px;
+      border-radius: 12px;
+      font-weight: 500;
+    }
+
     .pp-message {
-      max-width: 80%;
-      padding: 10px 14px;
-      border-radius: 16px;
+      max-width: 85%;
+      padding: 6px 10px;
+      border-radius: 12px;
       word-wrap: break-word;
       position: relative;
       user-select: text;
       -webkit-user-select: text;
+      font-size: 14px;
+      line-height: 1.35;
     }
 
     /* Hover actions container - positioned above message (Slack style) */
@@ -372,7 +390,8 @@ function styles(primaryColor, theme) {
       align-self: flex-end;
       background: ${primaryColor};
       color: white;
-      border-bottom-right-radius: 4px;
+      border-bottom-right-radius: 3px;
+      margin-left: 32px;
     }
 
     .pp-message-operator,
@@ -380,19 +399,31 @@ function styles(primaryColor, theme) {
       align-self: flex-start;
       background: ${colors.messageBg};
       color: ${colors.text};
-      border-bottom-left-radius: 4px;
+      border-bottom-left-radius: 3px;
+      margin-right: 32px;
+    }
+
+    /* Add spacing between different senders */
+    .pp-message-visitor + .pp-message-operator,
+    .pp-message-visitor + .pp-message-ai,
+    .pp-message-operator + .pp-message-visitor,
+    .pp-message-ai + .pp-message-visitor {
+      margin-top: 8px;
     }
 
     .pp-message-content {
-      margin-bottom: 4px;
+      display: inline;
     }
 
     .pp-message-time {
-      font-size: 11px;
-      opacity: 0.7;
-      display: flex;
+      font-size: 10px;
+      opacity: 0.6;
+      display: inline-flex;
       align-items: center;
-      gap: 4px;
+      gap: 3px;
+      float: right;
+      margin-left: 8px;
+      margin-top: 4px;
     }
 
     .pp-ai-badge {
@@ -429,13 +460,13 @@ function styles(primaryColor, theme) {
 
     .pp-typing {
       display: flex;
-      gap: 4px;
-      padding: 14px 18px;
+      gap: 3px;
+      padding: 8px 12px;
     }
 
     .pp-typing span {
-      width: 8px;
-      height: 8px;
+      width: 6px;
+      height: 6px;
       background: ${colors.textSecondary};
       border-radius: 50%;
       animation: pp-bounce 1.4s infinite ease-in-out both;
@@ -451,14 +482,18 @@ function styles(primaryColor, theme) {
 
     .pp-input-form {
       display: flex;
-      padding: 12px;
+      padding: 10px 12px;
       gap: 8px;
       border-top: 1px solid ${colors.border};
+      align-items: center;
     }
 
     .pp-input {
       flex: 1;
-      padding: 10px 14px;
+      min-width: 0;
+      height: 40px;
+      line-height: 40px;
+      padding: 0 16px;
       border: 1px solid ${colors.border};
       border-radius: 20px;
       background: ${colors.bg};
@@ -466,6 +501,8 @@ function styles(primaryColor, theme) {
       font-size: 14px;
       outline: none;
       transition: border-color 0.2s;
+      box-sizing: border-box;
+      margin: 0;
     }
 
     .pp-input:focus {
@@ -479,6 +516,7 @@ function styles(primaryColor, theme) {
     .pp-send-btn {
       width: 40px;
       height: 40px;
+      min-width: 40px;
       border-radius: 50%;
       background: ${primaryColor};
       color: white;
@@ -487,7 +525,18 @@ function styles(primaryColor, theme) {
       display: flex;
       align-items: center;
       justify-content: center;
-      transition: opacity 0.2s;
+      transition: opacity 0.2s, transform 0.1s;
+      flex-shrink: 0;
+      margin: 0;
+      padding: 0;
+    }
+
+    .pp-send-btn:not(:disabled):hover {
+      transform: scale(1.05);
+    }
+
+    .pp-send-btn:not(:disabled):active {
+      transform: scale(0.95);
     }
 
     .pp-send-btn:disabled {
@@ -506,6 +555,7 @@ function styles(primaryColor, theme) {
       font-size: 11px;
       color: ${colors.textSecondary};
       border-top: 1px solid ${colors.border};
+      opacity: 0.7;
     }
 
     .pp-footer a {
@@ -534,6 +584,7 @@ function styles(primaryColor, theme) {
     .pp-attach-btn {
       width: 40px;
       height: 40px;
+      min-width: 40px;
       border-radius: 50%;
       background: transparent;
       color: ${colors.textSecondary};
@@ -542,6 +593,8 @@ function styles(primaryColor, theme) {
       display: flex;
       align-items: center;
       justify-content: center;
+      margin: 0;
+      padding: 0;
       transition: color 0.2s, border-color 0.2s;
       flex-shrink: 0;
     }
@@ -933,17 +986,29 @@ function styles(primaryColor, theme) {
     }
 
     .pp-reply-cancel {
-      background: transparent;
+      background: ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.05)"};
       border: none;
+      border-radius: 50%;
       color: ${colors.textSecondary};
       cursor: pointer;
-      padding: 4px;
+      padding: 0;
+      width: 24px;
+      height: 24px;
+      min-width: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       flex-shrink: 0;
+      transition: background 0.15s;
+    }
+
+    .pp-reply-cancel:hover {
+      background: ${isDark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.1)"};
     }
 
     .pp-reply-cancel svg {
-      width: 16px;
-      height: 16px;
+      width: 14px;
+      height: 14px;
     }
 
     /* Reply Quote in Message */
@@ -1048,6 +1113,24 @@ function styles(primaryColor, theme) {
 
 // src/components/ChatWidget.tsx
 var import_jsx_runtime = require("preact/jsx-runtime");
+function formatDateSeparator(date) {
+  const now = /* @__PURE__ */ new Date();
+  const messageDate = new Date(date);
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const msgDay = new Date(messageDate.getFullYear(), messageDate.getMonth(), messageDate.getDate());
+  const diffDays = Math.floor((today.getTime() - msgDay.getTime()) / (1e3 * 60 * 60 * 24));
+  if (diffDays === 0) return "Today";
+  if (diffDays === 1) return "Yesterday";
+  return messageDate.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: messageDate.getFullYear() !== now.getFullYear() ? "numeric" : void 0
+  });
+}
+function getDateKey(date) {
+  const d = new Date(date);
+  return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+}
 function ChatWidget({ client: client2, config: initialConfig }) {
   const [isOpen, setIsOpen] = (0, import_hooks.useState)(false);
   const [messages, setMessages] = (0, import_hooks.useState)([]);
@@ -1457,9 +1540,12 @@ function ChatWidget({ client: client2, config: initialConfig }) {
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: "pp-messages", ref: messagesContainerRef, children: [
             config.welcomeMessage && messages.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { class: "pp-welcome", children: config.welcomeMessage }),
-            messages.map((msg) => {
+            messages.map((msg, index) => {
               const isDeleted = !!msg.deletedAt;
               const isEdited = !!msg.editedAt;
+              const msgDate = new Date(msg.timestamp);
+              const prevMsg = index > 0 ? messages[index - 1] : null;
+              const showDateSeparator = !prevMsg || getDateKey(new Date(prevMsg.timestamp)) !== getDateKey(msgDate);
               let replyData = null;
               if (msg.replyTo) {
                 if (typeof msg.replyTo === "object") {
@@ -1481,86 +1567,88 @@ function ChatWidget({ client: client2, config: initialConfig }) {
               }
               const isHovered = hoveredMessageId === msg.id;
               const showActions = isHovered && !isDeleted;
-              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                "div",
-                {
-                  id: `pp-msg-${msg.id}`,
-                  class: `pp-message pp-message-${msg.sender} ${isDeleted ? "pp-message-deleted" : ""}`,
-                  onContextMenu: (e) => handleMessageContextMenu(e, msg),
-                  onMouseEnter: () => setHoveredMessageId(msg.id),
-                  onMouseLeave: () => setHoveredMessageId(null),
-                  onTouchStart: () => handleTouchStart(msg),
-                  onTouchEnd: handleTouchEnd,
-                  onTouchCancel: handleTouchEnd,
-                  children: [
-                    showActions && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: `pp-message-actions ${msg.sender === "visitor" ? "pp-actions-left" : "pp-actions-right"}`, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        "button",
-                        {
-                          class: "pp-action-btn",
-                          onClick: () => handleReply(msg),
-                          title: "Reply",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReplyIcon, { color: actionIconColor })
-                        }
-                      ),
-                      msg.sender === "visitor" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_preact.Fragment, { children: [
+                showDateSeparator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { class: "pp-date-separator", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: formatDateSeparator(msgDate) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "div",
+                  {
+                    id: `pp-msg-${msg.id}`,
+                    class: `pp-message pp-message-${msg.sender} ${isDeleted ? "pp-message-deleted" : ""}`,
+                    onContextMenu: (e) => handleMessageContextMenu(e, msg),
+                    onMouseEnter: () => setHoveredMessageId(msg.id),
+                    onMouseLeave: () => setHoveredMessageId(null),
+                    onTouchStart: () => handleTouchStart(msg),
+                    onTouchEnd: handleTouchEnd,
+                    onTouchCancel: handleTouchEnd,
+                    children: [
+                      showActions && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: `pp-message-actions ${msg.sender === "visitor" ? "pp-actions-left" : "pp-actions-right"}`, children: [
                         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                           "button",
                           {
                             class: "pp-action-btn",
-                            onClick: () => handleStartEdit(msg),
-                            title: "Edit",
-                            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditIcon, { color: actionIconColor })
+                            onClick: () => handleReply(msg),
+                            title: "Reply",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReplyIcon, { color: actionIconColor })
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                          "button",
-                          {
-                            class: "pp-action-btn pp-action-delete",
-                            onClick: () => handleDelete(msg),
-                            title: "Delete",
-                            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DeleteIcon, { color: actionIconColor })
-                          }
-                        )
+                        msg.sender === "visitor" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "button",
+                            {
+                              class: "pp-action-btn",
+                              onClick: () => handleStartEdit(msg),
+                              title: "Edit",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditIcon, { color: actionIconColor })
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "button",
+                            {
+                              class: "pp-action-btn pp-action-delete",
+                              onClick: () => handleDelete(msg),
+                              title: "Delete",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DeleteIcon, { color: actionIconColor })
+                            }
+                          )
+                        ] })
+                      ] }),
+                      replyData && (replyData.content || replyData.hasAttachment) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "div",
+                        {
+                          class: "pp-reply-quote pp-reply-quote-clickable",
+                          onClick: () => scrollToMessage(replyData.id),
+                          role: "button",
+                          tabIndex: 0,
+                          onKeyDown: (e) => e.key === "Enter" && scrollToMessage(replyData.id),
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { class: "pp-reply-sender", children: replyData.sender === "visitor" ? "You" : "Support" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { class: "pp-reply-content", children: replyData.deleted ? "Message deleted" : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                              replyData.hasAttachment && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { class: "pp-reply-attachment-icon", children: replyData.attachmentType?.startsWith("image/") ? "\u{1F4F7} " : "\u{1F4CE} " }),
+                              replyData.content ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                                (replyData.content || "").slice(0, 50),
+                                (replyData.content || "").length > 50 ? "..." : ""
+                              ] }) : replyData.attachmentType?.startsWith("image/") ? "Photo" : "File"
+                            ] }) })
+                          ]
+                        }
+                      ),
+                      isDeleted ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: "pp-message-content pp-deleted-content", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { class: "pp-deleted-icon", children: "\u{1F5D1}\uFE0F" }),
+                        " Message deleted"
+                      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                        msg.content && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { class: "pp-message-content", children: msg.content }),
+                        msg.attachments && msg.attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { class: "pp-message-attachments", children: msg.attachments.map((att) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AttachmentDisplay, { attachment: att }, att.id)) })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: "pp-message-time", children: [
+                        formatTime(msg.timestamp),
+                        isEdited && !isDeleted && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { class: "pp-edited-badge", children: "edited" }),
+                        msg.sender === "ai" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { class: "pp-ai-badge", children: "AI" }),
+                        msg.sender === "visitor" && !isDeleted && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { class: `pp-status pp-status-${msg.status ?? "sent"}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusIcon, { status: msg.status }) })
                       ] })
-                    ] }),
-                    replyData && (replyData.content || replyData.hasAttachment) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                      "div",
-                      {
-                        class: "pp-reply-quote pp-reply-quote-clickable",
-                        onClick: () => scrollToMessage(replyData.id),
-                        role: "button",
-                        tabIndex: 0,
-                        onKeyDown: (e) => e.key === "Enter" && scrollToMessage(replyData.id),
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { class: "pp-reply-sender", children: replyData.sender === "visitor" ? "You" : "Support" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { class: "pp-reply-content", children: replyData.deleted ? "Message deleted" : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                            replyData.hasAttachment && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { class: "pp-reply-attachment-icon", children: replyData.attachmentType?.startsWith("image/") ? "\u{1F4F7} " : "\u{1F4CE} " }),
-                            replyData.content ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                              (replyData.content || "").slice(0, 50),
-                              (replyData.content || "").length > 50 ? "..." : ""
-                            ] }) : replyData.attachmentType?.startsWith("image/") ? "Photo" : "File"
-                          ] }) })
-                        ]
-                      }
-                    ),
-                    isDeleted ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: "pp-message-content pp-deleted-content", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { class: "pp-deleted-icon", children: "\u{1F5D1}\uFE0F" }),
-                      " Message deleted"
-                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                      msg.content && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { class: "pp-message-content", children: msg.content }),
-                      msg.attachments && msg.attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { class: "pp-message-attachments", children: msg.attachments.map((att) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AttachmentDisplay, { attachment: att }, att.id)) })
-                    ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: "pp-message-time", children: [
-                      formatTime(msg.timestamp),
-                      isEdited && !isDeleted && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { class: "pp-edited-badge", children: "edited" }),
-                      msg.sender === "ai" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { class: "pp-ai-badge", children: "AI" }),
-                      msg.sender === "visitor" && !isDeleted && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { class: `pp-status pp-status-${msg.status ?? "sent"}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusIcon, { status: msg.status }) })
-                    ] })
-                  ]
-                },
-                msg.id
-              );
+                    ]
+                  }
+                )
+              ] }, msg.id);
             }),
             isTyping && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: "pp-message pp-message-operator pp-typing", children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {}),
@@ -1836,7 +1924,7 @@ function AttachmentDisplay({ attachment }) {
 }
 
 // src/version.ts
-var VERSION = "0.3.6";
+var VERSION = "0.3.7";
 
 // src/client.ts
 var PocketPingClient = class {