@pocketping/widget 1.2.0 → 1.4.0

package/dist/index.js

@@ -228,6 +228,94 @@ function styles(primaryColor, theme) {
       padding: 10px 14px;
       border-radius: 16px;
       word-wrap: break-word;
+      position: relative;
+      user-select: text;
+      -webkit-user-select: text;
+    }
+
+    /* Hover actions container - positioned above message (Slack style) */
+    .pp-message-actions {
+      position: absolute;
+      top: -28px;
+      display: flex;
+      gap: 2px;
+      background: ${colors.bg};
+      border: 1px solid ${colors.border};
+      border-radius: 6px;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+      padding: 2px;
+      opacity: 0;
+      animation: pp-actions-fade-in 0.12s ease forwards;
+      z-index: 10;
+      /* Reset color inheritance from message */
+      color: ${colors.textSecondary};
+    }
+
+    @keyframes pp-actions-fade-in {
+      from { opacity: 0; transform: translateY(4px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    /* Visitor messages: actions aligned right */
+    .pp-actions-left {
+      right: 0;
+    }
+
+    /* Operator messages: actions aligned left */
+    .pp-actions-right {
+      left: 0;
+    }
+
+    .pp-message-actions .pp-action-btn {
+      width: 24px;
+      height: 24px;
+      border: none;
+      background: transparent;
+      border-radius: 4px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: ${colors.textSecondary} !important;
+      transition: background 0.1s, color 0.1s;
+    }
+
+    .pp-message-actions .pp-action-btn:hover {
+      background: ${colors.bgSecondary};
+      color: ${colors.text} !important;
+    }
+
+    .pp-message-actions .pp-action-btn svg {
+      width: 14px;
+      height: 14px;
+      stroke: ${colors.textSecondary};
+    }
+
+    .pp-message-actions .pp-action-btn:hover svg {
+      stroke: ${colors.text};
+    }
+
+    .pp-message-actions .pp-action-delete:hover {
+      background: #fef2f2;
+    }
+
+    .pp-message-actions .pp-action-delete:hover svg {
+      stroke: #ef4444;
+    }
+
+    .pp-theme-dark .pp-message-actions .pp-action-delete:hover {
+      background: #7f1d1d;
+    }
+
+    .pp-theme-dark .pp-message-actions .pp-action-delete:hover svg {
+      stroke: #fca5a5;
+    }
+
+    /* Hide hover actions on mobile */
+    @media (hover: none) and (pointer: coarse) {
+      .pp-message-actions {
+        display: none;
+      }
     }
 
     .pp-message-visitor {
@@ -609,9 +697,8 @@ function styles(primaryColor, theme) {
     }
 
     /* Drag & Drop */
-    .pp-dragging {
-      position: relative;
-    }
+    /* Note: .pp-window already has position: fixed which acts as
+       containing block for the absolutely positioned overlay */
 
     .pp-drop-overlay {
       position: absolute;
@@ -817,6 +904,8 @@ function styles(primaryColor, theme) {
       margin-bottom: 6px;
       border-radius: 0 4px 4px 0;
       font-size: 12px;
+      position: relative;
+      z-index: 1;
     }
 
     .pp-reply-sender {
@@ -834,6 +923,17 @@ function styles(primaryColor, theme) {
       text-overflow: ellipsis;
     }
 
+    /* Reply quote in visitor message bubble needs higher contrast */
+    .pp-message-visitor .pp-reply-quote {
+      background: rgba(255, 255, 255, 0.18);
+      border-left-color: rgba(255, 255, 255, 0.7);
+    }
+
+    .pp-message-visitor .pp-reply-sender,
+    .pp-message-visitor .pp-reply-content {
+      color: rgba(255, 255, 255, 0.9);
+    }
+
     /* Deleted Message */
     .pp-message-deleted {
       opacity: 0.6;
@@ -878,6 +978,8 @@ function ChatWidget({ client: client2, config: initialConfig }) {
   const [editContent, setEditContent] = useState("");
   const [messageMenu, setMessageMenu] = useState(null);
   const [isDragging, setIsDragging] = useState(false);
+  const [hoveredMessageId, setHoveredMessageId] = useState(null);
+  const [longPressTimer, setLongPressTimer] = useState(null);
   const [config, setConfig] = useState(initialConfig);
   const messagesEndRef = useRef(null);
   const inputRef = useRef(null);
@@ -1105,6 +1207,25 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       y: mouseEvent.clientY
     });
   };
+  const handleTouchStart = (message) => {
+    const timer = setTimeout(() => {
+      if (navigator.vibrate) navigator.vibrate(50);
+      setMessageMenu({
+        message,
+        x: window.innerWidth / 2 - 60,
+        // Center horizontally
+        y: window.innerHeight / 2 - 50
+        // Center vertically
+      });
+    }, 500);
+    setLongPressTimer(timer);
+  };
+  const handleTouchEnd = () => {
+    if (longPressTimer) {
+      clearTimeout(longPressTimer);
+      setLongPressTimer(null);
+    }
+  };
   useEffect(() => {
     if (!messageMenu) return;
     const handleClickOutside = () => setMessageMenu(null);
@@ -1186,6 +1307,7 @@ function ChatWidget({ client: client2, config: initialConfig }) {
   const position = config.position ?? "bottom-right";
   const theme = getTheme(config.theme ?? "auto");
   const primaryColor = config.primaryColor ?? "#6366f1";
+  const actionIconColor = theme === "dark" ? "#9ca3af" : "#6b7280";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("style", { children: styles(primaryColor, theme) }),
     /* @__PURE__ */ jsxs(
@@ -1243,18 +1365,70 @@ function ChatWidget({ client: client2, config: initialConfig }) {
             messages.map((msg) => {
               const isDeleted = !!msg.deletedAt;
               const isEdited = !!msg.editedAt;
-              const replyToMsg = msg.replyTo ? messages.find((m) => m.id === msg.replyTo) : null;
+              let replyData = null;
+              if (msg.replyTo) {
+                if (typeof msg.replyTo === "object") {
+                  replyData = msg.replyTo;
+                } else {
+                  const replyToMsg = messages.find((m) => m.id === msg.replyTo);
+                  if (replyToMsg) {
+                    replyData = {
+                      sender: replyToMsg.sender,
+                      content: replyToMsg.content,
+                      deleted: !!replyToMsg.deletedAt
+                    };
+                  }
+                }
+              }
+              const isHovered = hoveredMessageId === msg.id;
+              const showActions = isHovered && !isDeleted;
               return /* @__PURE__ */ jsxs(
                 "div",
                 {
                   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: [
-                    replyToMsg && /* @__PURE__ */ jsxs("div", { class: "pp-reply-quote", children: [
-                      /* @__PURE__ */ jsx("span", { class: "pp-reply-sender", children: replyToMsg.sender === "visitor" ? "You" : "Support" }),
+                    showActions && /* @__PURE__ */ jsxs("div", { class: `pp-message-actions ${msg.sender === "visitor" ? "pp-actions-left" : "pp-actions-right"}`, children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          class: "pp-action-btn",
+                          onClick: () => handleReply(msg),
+                          title: "Reply",
+                          children: /* @__PURE__ */ jsx(ReplyIcon, { color: actionIconColor })
+                        }
+                      ),
+                      msg.sender === "visitor" && /* @__PURE__ */ jsxs(Fragment2, { children: [
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            class: "pp-action-btn",
+                            onClick: () => handleStartEdit(msg),
+                            title: "Edit",
+                            children: /* @__PURE__ */ jsx(EditIcon, { color: actionIconColor })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            class: "pp-action-btn pp-action-delete",
+                            onClick: () => handleDelete(msg),
+                            title: "Delete",
+                            children: /* @__PURE__ */ jsx(DeleteIcon, { color: actionIconColor })
+                          }
+                        )
+                      ] })
+                    ] }),
+                    replyData && replyData.content && /* @__PURE__ */ jsxs("div", { class: "pp-reply-quote", children: [
+                      /* @__PURE__ */ jsx("span", { class: "pp-reply-sender", children: replyData.sender === "visitor" ? "You" : "Support" }),
                       /* @__PURE__ */ jsxs("span", { class: "pp-reply-content", children: [
-                        replyToMsg.deletedAt ? "Message deleted" : replyToMsg.content.slice(0, 50),
-                        replyToMsg.content.length > 50 ? "..." : ""
+                        replyData.deleted ? "Message deleted" : (replyData.content || "").slice(0, 50),
+                        (replyData.content || "").length > 50 ? "..." : ""
                       ] })
                     ] }),
                     isDeleted ? /* @__PURE__ */ jsxs("div", { class: "pp-message-content pp-deleted-content", children: [
@@ -1289,16 +1463,16 @@ function ChatWidget({ client: client2, config: initialConfig }) {
               style: { top: `${messageMenu.y}px`, left: `${messageMenu.x}px` },
               children: [
                 /* @__PURE__ */ jsxs("button", { onClick: () => handleReply(messageMenu.message), children: [
-                  /* @__PURE__ */ jsx(ReplyIcon, {}),
+                  /* @__PURE__ */ jsx(ReplyIcon, { color: actionIconColor }),
                   " Reply"
                 ] }),
                 messageMenu.message.sender === "visitor" && !messageMenu.message.deletedAt && /* @__PURE__ */ jsxs(Fragment2, { children: [
                   /* @__PURE__ */ jsxs("button", { onClick: () => handleStartEdit(messageMenu.message), children: [
-                    /* @__PURE__ */ jsx(EditIcon, {}),
+                    /* @__PURE__ */ jsx(EditIcon, { color: actionIconColor }),
                     " Edit"
                   ] }),
                   /* @__PURE__ */ jsxs("button", { class: "pp-menu-delete", onClick: () => handleDelete(messageMenu.message), children: [
-                    /* @__PURE__ */ jsx(DeleteIcon, {}),
+                    /* @__PURE__ */ jsx(DeleteIcon, { color: "#ef4444" }),
                     " Delete"
                   ] })
                 ] })
@@ -1464,17 +1638,20 @@ function StatusIcon({ status }) {
 function AttachIcon() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: /* @__PURE__ */ jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) });
 }
-function ReplyIcon() {
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
+function ReplyIcon({ color, size = 16 }) {
+  const strokeColor = color || "currentColor";
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", "stroke-width": "2", style: { stroke: strokeColor, width: `${size}px`, minWidth: `${size}px`, height: `${size}px`, display: "block", flexShrink: 0 }, children: [
     /* @__PURE__ */ jsx("polyline", { points: "9 17 4 12 9 7" }),
     /* @__PURE__ */ jsx("path", { d: "M20 18v-2a4 4 0 0 0-4-4H4" })
   ] });
 }
-function EditIcon() {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: /* @__PURE__ */ jsx("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" }) });
+function EditIcon({ color, size = 16 }) {
+  const strokeColor = color || "currentColor";
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", "stroke-width": "2", style: { stroke: strokeColor, width: `${size}px`, minWidth: `${size}px`, height: `${size}px`, display: "block", flexShrink: 0 }, children: /* @__PURE__ */ jsx("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" }) });
 }
-function DeleteIcon() {
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
+function DeleteIcon({ color, size = 16 }) {
+  const strokeColor = color || "currentColor";
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", "stroke-width": "2", style: { stroke: strokeColor, width: `${size}px`, minWidth: `${size}px`, height: `${size}px`, display: "block", flexShrink: 0 }, children: [
     /* @__PURE__ */ jsx("polyline", { points: "3 6 5 6 21 6" }),
     /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
   ] });
@@ -2472,7 +2649,14 @@ var PocketPingClient = class {
   }
   connectSSE() {
     if (!this.session) return;
-    const sseUrl = this.config.endpoint.replace(/\/$/, "") + `/stream?sessionId=${this.session.sessionId}`;
+    const params = new URLSearchParams({
+      sessionId: this.session.sessionId
+    });
+    const lastEventTimestamp = this.getLastEventTimestamp();
+    if (lastEventTimestamp) {
+      params.set("after", lastEventTimestamp);
+    }
+    const sseUrl = this.config.endpoint.replace(/\/$/, "") + `/stream?${params.toString()}`;
     try {
       this.sse = new EventSource(sseUrl);
       const connectionTimeout = setTimeout(() => {
@@ -2527,6 +2711,19 @@ var PocketPingClient = class {
   handleRealtimeEvent(event) {
     this.handleWebSocketEvent(event);
   }
+  getLastEventTimestamp() {
+    if (!this.session) return null;
+    let latest = null;
+    for (const msg of this.session.messages) {
+      const candidates = [msg.timestamp, msg.editedAt, msg.deletedAt, msg.deliveredAt, msg.readAt].filter(Boolean).map((value) => new Date(value)).filter((date) => !isNaN(date.getTime()));
+      for (const date of candidates) {
+        if (!latest || date > latest) {
+          latest = date;
+        }
+      }
+    }
+    return latest ? latest.toISOString() : null;
+  }
   handleWebSocketEvent(event) {
     switch (event.type) {
       case "message":
@@ -2549,12 +2746,41 @@ var PocketPingClient = class {
           }
           if (existingIndex >= 0) {
             const existing = this.session.messages[existingIndex];
+            let updated = false;
             if (message.status && message.status !== existing.status) {
               existing.status = message.status;
-              if (message.deliveredAt) existing.deliveredAt = message.deliveredAt;
-              if (message.readAt) existing.readAt = message.readAt;
+              updated = true;
+              if (message.deliveredAt) {
+                existing.deliveredAt = message.deliveredAt;
+              }
+              if (message.readAt) {
+                existing.readAt = message.readAt;
+              }
               this.emit("read", { messageIds: [message.id], status: message.status });
             }
+            if (message.content !== void 0 && message.content !== existing.content) {
+              existing.content = message.content;
+              updated = true;
+            }
+            if (message.editedAt !== void 0 && message.editedAt !== existing.editedAt) {
+              existing.editedAt = message.editedAt;
+              updated = true;
+            }
+            if (message.deletedAt !== void 0 && message.deletedAt !== existing.deletedAt) {
+              existing.deletedAt = message.deletedAt;
+              updated = true;
+            }
+            if (message.replyTo !== void 0) {
+              existing.replyTo = message.replyTo;
+              updated = true;
+            }
+            if (message.attachments !== void 0) {
+              existing.attachments = message.attachments;
+              updated = true;
+            }
+            if (updated) {
+              this.emit("message", existing);
+            }
           } else {
             this.session.messages.push(message);
             this.emit("message", message);
@@ -2593,6 +2819,29 @@ var PocketPingClient = class {
         }
         this.emit("read", readData);
         break;
+      case "message_edited":
+        if (this.session) {
+          const editData = event.data;
+          const msgIndex = this.session.messages.findIndex((m) => m.id === editData.messageId);
+          if (msgIndex >= 0) {
+            const existing = this.session.messages[msgIndex];
+            existing.content = editData.content;
+            existing.editedAt = editData.editedAt ?? (/* @__PURE__ */ new Date()).toISOString();
+            this.emit("message", existing);
+          }
+        }
+        break;
+      case "message_deleted":
+        if (this.session) {
+          const deleteData = event.data;
+          const msgIndex = this.session.messages.findIndex((m) => m.id === deleteData.messageId);
+          if (msgIndex >= 0) {
+            const existing = this.session.messages[msgIndex];
+            existing.deletedAt = deleteData.deletedAt ?? (/* @__PURE__ */ new Date()).toISOString();
+            this.emit("message", existing);
+          }
+        }
+        break;
       case "event":
         const customEvent = event.data;
         this.emitCustomEvent(customEvent);
@@ -2652,11 +2901,45 @@ var PocketPingClient = class {
     const poll = async () => {
       if (!this.session) return;
       try {
-        const lastMessageId = this.session.messages[this.session.messages.length - 1]?.id;
-        const newMessages = await this.fetchMessages(lastMessageId);
+        const lastEventTimestamp = this.getLastEventTimestamp();
+        const newMessages = await this.fetchMessages(lastEventTimestamp ?? void 0);
         this.pollingFailures = 0;
         for (const message of newMessages) {
-          if (!this.session.messages.find((m) => m.id === message.id)) {
+          const existingIndex = this.session.messages.findIndex((m) => m.id === message.id);
+          if (existingIndex >= 0) {
+            const existing = this.session.messages[existingIndex];
+            let updated = false;
+            if (message.status && message.status !== existing.status) {
+              existing.status = message.status;
+              updated = true;
+              if (message.deliveredAt) existing.deliveredAt = message.deliveredAt;
+              if (message.readAt) existing.readAt = message.readAt;
+              this.emit("read", { messageIds: [message.id], status: message.status });
+            }
+            if (message.content !== void 0 && message.content !== existing.content) {
+              existing.content = message.content;
+              updated = true;
+            }
+            if (message.editedAt !== void 0 && message.editedAt !== existing.editedAt) {
+              existing.editedAt = message.editedAt;
+              updated = true;
+            }
+            if (message.deletedAt !== void 0 && message.deletedAt !== existing.deletedAt) {
+              existing.deletedAt = message.deletedAt;
+              updated = true;
+            }
+            if (message.replyTo !== void 0) {
+              existing.replyTo = message.replyTo;
+              updated = true;
+            }
+            if (message.attachments !== void 0) {
+              existing.attachments = message.attachments;
+              updated = true;
+            }
+            if (updated) {
+              this.emit("message", existing);
+            }
+          } else {
             this.session.messages.push(message);
             this.emit("message", message);
             this.config.onMessage?.(message);