@pocketping/widget 1.1.0 → 1.3.0

package/dist/index.js

@@ -190,6 +190,12 @@ function styles(primaryColor, theme) {
       border-radius: 4px;
       opacity: 0.8;
       transition: opacity 0.2s;
+      flex-shrink: 0;
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
 
     .pp-close-btn:hover {
@@ -197,8 +203,8 @@ function styles(primaryColor, theme) {
     }
 
     .pp-close-btn svg {
-      width: 20px;
-      height: 20px;
+      width: 16px;
+      height: 16px;
     }
 
     .pp-messages {
@@ -222,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 {
@@ -305,72 +399,565 @@ function styles(primaryColor, theme) {
       40% { transform: scale(1); }
     }
 
-    .pp-input-form {
-      display: flex;
-      padding: 12px;
-      gap: 8px;
-      border-top: 1px solid ${colors.border};
+    .pp-input-form {
+      display: flex;
+      padding: 12px;
+      gap: 8px;
+      border-top: 1px solid ${colors.border};
+    }
+
+    .pp-input {
+      flex: 1;
+      padding: 10px 14px;
+      border: 1px solid ${colors.border};
+      border-radius: 20px;
+      background: ${colors.bg};
+      color: ${colors.text};
+      font-size: 14px;
+      outline: none;
+      transition: border-color 0.2s;
+    }
+
+    .pp-input:focus {
+      border-color: ${primaryColor};
+    }
+
+    .pp-input::placeholder {
+      color: ${colors.textSecondary};
+    }
+
+    .pp-send-btn {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: ${primaryColor};
+      color: white;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: opacity 0.2s;
+    }
+
+    .pp-send-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .pp-send-btn svg {
+      width: 18px;
+      height: 18px;
+    }
+
+    .pp-footer {
+      text-align: center;
+      padding: 8px;
+      font-size: 11px;
+      color: ${colors.textSecondary};
+      border-top: 1px solid ${colors.border};
+    }
+
+    .pp-footer a {
+      color: ${primaryColor};
+      text-decoration: none;
+    }
+
+    .pp-footer a:hover {
+      text-decoration: underline;
+    }
+
+    /* Attachment Styles */
+    .pp-file-input {
+      /* Use offscreen positioning instead of display:none for better browser compatibility */
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    .pp-attach-btn {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: transparent;
+      color: ${colors.textSecondary};
+      border: 1px solid ${colors.border};
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: color 0.2s, border-color 0.2s;
+      flex-shrink: 0;
+    }
+
+    .pp-attach-btn:hover:not(:disabled) {
+      color: ${primaryColor};
+      border-color: ${primaryColor};
+    }
+
+    .pp-attach-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .pp-attach-btn svg {
+      width: 18px;
+      height: 18px;
+    }
+
+    .pp-attachments-preview {
+      display: flex;
+      gap: 8px;
+      padding: 8px 12px;
+      border-top: 1px solid ${colors.border};
+      overflow-x: auto;
+      background: ${colors.bgSecondary};
+    }
+
+    .pp-attachment-preview {
+      position: relative;
+      width: 60px;
+      height: 60px;
+      border-radius: 8px;
+      overflow: hidden;
+      flex-shrink: 0;
+      background: ${colors.bg};
+      border: 1px solid ${colors.border};
+    }
+
+    .pp-preview-img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .pp-preview-file {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: ${colors.textSecondary};
+    }
+
+    .pp-preview-file svg {
+      width: 24px;
+      height: 24px;
+    }
+
+    .pp-remove-attachment {
+      position: absolute;
+      top: 2px;
+      right: 2px;
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      background: rgba(0, 0, 0, 0.6);
+      color: white;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+    }
+
+    .pp-remove-attachment svg {
+      width: 10px;
+      height: 10px;
+    }
+
+    .pp-upload-progress {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 3px;
+      background: ${primaryColor};
+      transition: width 0.1s;
+    }
+
+    .pp-upload-error {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background: #ef4444;
+      color: white;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+    }
+
+    .pp-attachment-uploading {
+      opacity: 0.7;
+    }
+
+    .pp-attachment-error {
+      border-color: #ef4444;
+    }
+
+    /* Message Attachments */
+    .pp-message-attachments {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin-top: 4px;
+    }
+
+    .pp-attachment {
+      display: block;
+      text-decoration: none;
+      color: inherit;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+
+    .pp-attachment-image img {
+      max-width: 200px;
+      max-height: 200px;
+      border-radius: 8px;
+      display: block;
+    }
+
+    .pp-attachment-audio {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .pp-attachment-audio audio {
+      width: 200px;
+      height: 36px;
+    }
+
+    .pp-attachment-audio .pp-attachment-name {
+      font-size: 11px;
+      opacity: 0.7;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 200px;
+    }
+
+    .pp-attachment-video video {
+      max-width: 200px;
+      max-height: 200px;
+      border-radius: 8px;
+      display: block;
+    }
+
+    .pp-attachment-file {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      background: ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.05)"};
+      border-radius: 8px;
+      transition: background 0.2s;
+    }
+
+    .pp-attachment-file:hover {
+      background: ${isDark ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.08)"};
+    }
+
+    .pp-attachment-file svg {
+      width: 24px;
+      height: 24px;
+      flex-shrink: 0;
+    }
+
+    .pp-attachment-info {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    .pp-attachment-name {
+      font-size: 13px;
+      font-weight: 500;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .pp-attachment-size {
+      font-size: 11px;
+      opacity: 0.7;
+    }
+
+    /* Drag & Drop */
+    .pp-dragging {
+      position: relative;
+    }
+
+    .pp-drop-overlay {
+      position: absolute;
+      inset: 0;
+      background: ${isDark ? "rgba(0,0,0,0.9)" : "rgba(255,255,255,0.95)"};
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      z-index: 100;
+      border: 3px dashed ${primaryColor};
+      border-radius: 16px;
+      margin: 4px;
+      pointer-events: none;
+    }
+
+    .pp-drop-icon svg {
+      width: 48px;
+      height: 48px;
+      color: ${primaryColor};
+    }
+
+    .pp-drop-text {
+      font-size: 16px;
+      font-weight: 500;
+      color: ${colors.text};
+    }
+
+    /* Message Context Menu */
+    .pp-message-menu {
+      position: fixed;
+      background: ${colors.bg};
+      border: 1px solid ${colors.border};
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      padding: 4px;
+      z-index: 200;
+      min-width: 120px;
+    }
+
+    .pp-message-menu button {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      padding: 8px 12px;
+      border: none;
+      background: transparent;
+      color: ${colors.text};
+      font-size: 13px;
+      cursor: pointer;
+      border-radius: 4px;
+      text-align: left;
+    }
+
+    .pp-message-menu button:hover {
+      background: ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.05)"};
+    }
+
+    .pp-message-menu button svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .pp-menu-delete {
+      color: #ef4444 !important;
+    }
+
+    /* Edit Modal */
+    .pp-edit-modal {
+      position: absolute;
+      bottom: 80px;
+      left: 12px;
+      right: 12px;
+      background: ${colors.bg};
+      border: 1px solid ${colors.border};
+      border-radius: 12px;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+      z-index: 150;
+      overflow: hidden;
+    }
+
+    .pp-edit-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 16px;
+      border-bottom: 1px solid ${colors.border};
+      font-weight: 500;
+    }
+
+    .pp-edit-header button {
+      background: transparent;
+      border: none;
+      color: ${colors.textSecondary};
+      cursor: pointer;
+      padding: 4px;
+    }
+
+    .pp-edit-header button svg {
+      width: 18px;
+      height: 18px;
+    }
+
+    .pp-edit-input {
+      width: 100%;
+      padding: 12px 16px;
+      border: none;
+      background: transparent;
+      color: ${colors.text};
+      font-size: 14px;
+      resize: none;
+      min-height: 80px;
+      outline: none;
+    }
+
+    .pp-edit-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      padding: 12px 16px;
+      border-top: 1px solid ${colors.border};
+    }
+
+    .pp-edit-cancel {
+      padding: 8px 16px;
+      border: 1px solid ${colors.border};
+      border-radius: 6px;
+      background: transparent;
+      color: ${colors.text};
+      font-size: 13px;
+      cursor: pointer;
+    }
+
+    .pp-edit-save {
+      padding: 8px 16px;
+      border: none;
+      border-radius: 6px;
+      background: ${primaryColor};
+      color: white;
+      font-size: 13px;
+      cursor: pointer;
+    }
+
+    .pp-edit-save:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    /* Reply Preview */
+    .pp-reply-preview {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      background: ${isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.03)"};
+      border-top: 1px solid ${colors.border};
+      border-left: 3px solid ${primaryColor};
+    }
+
+    .pp-reply-preview-content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .pp-reply-label {
+      display: block;
+      font-size: 11px;
+      color: ${primaryColor};
+      font-weight: 500;
+      margin-bottom: 2px;
+    }
+
+    .pp-reply-text {
+      display: block;
+      font-size: 12px;
+      color: ${colors.textSecondary};
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .pp-reply-cancel {
+      background: transparent;
+      border: none;
+      color: ${colors.textSecondary};
+      cursor: pointer;
+      padding: 4px;
+      flex-shrink: 0;
+    }
+
+    .pp-reply-cancel svg {
+      width: 16px;
+      height: 16px;
     }
 
-    .pp-input {
-      flex: 1;
-      padding: 10px 14px;
-      border: 1px solid ${colors.border};
-      border-radius: 20px;
-      background: ${colors.bg};
-      color: ${colors.text};
-      font-size: 14px;
-      outline: none;
-      transition: border-color 0.2s;
+    /* Reply Quote in Message */
+    .pp-reply-quote {
+      background: ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.05)"};
+      border-left: 2px solid ${primaryColor};
+      padding: 4px 8px;
+      margin-bottom: 6px;
+      border-radius: 0 4px 4px 0;
+      font-size: 12px;
+      position: relative;
+      z-index: 1;
     }
 
-    .pp-input:focus {
-      border-color: ${primaryColor};
+    .pp-reply-sender {
+      display: block;
+      font-weight: 500;
+      color: ${primaryColor};
+      margin-bottom: 2px;
     }
 
-    .pp-input::placeholder {
+    .pp-reply-content {
+      display: block;
       color: ${colors.textSecondary};
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
-    .pp-send-btn {
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      background: ${primaryColor};
-      color: white;
-      border: none;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: opacity 0.2s;
+    /* 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-send-btn:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
+    .pp-message-visitor .pp-reply-sender,
+    .pp-message-visitor .pp-reply-content {
+      color: rgba(255, 255, 255, 0.9);
     }
 
-    .pp-send-btn svg {
-      width: 18px;
-      height: 18px;
+    /* Deleted Message */
+    .pp-message-deleted {
+      opacity: 0.6;
     }
 
-    .pp-footer {
-      text-align: center;
-      padding: 8px;
-      font-size: 11px;
+    .pp-deleted-content {
+      font-style: italic;
       color: ${colors.textSecondary};
-      border-top: 1px solid ${colors.border};
+      display: flex;
+      align-items: center;
+      gap: 4px;
     }
 
-    .pp-footer a {
-      color: ${primaryColor};
-      text-decoration: none;
+    .pp-deleted-icon {
+      font-size: 12px;
     }
 
-    .pp-footer a:hover {
-      text-decoration: underline;
+    /* Edited Badge */
+    .pp-edited-badge {
+      font-size: 10px;
+      color: ${colors.textSecondary};
+      margin-left: 4px;
+      font-style: italic;
     }
   `;
 }
@@ -385,9 +972,20 @@ function ChatWidget({ client: client2, config: initialConfig }) {
   const [operatorOnline, setOperatorOnline] = useState(false);
   const [isConnected, setIsConnected] = useState(false);
   const [unreadCount, setUnreadCount] = useState(0);
+  const [pendingAttachments, setPendingAttachments] = useState([]);
+  const [isUploading, setIsUploading] = useState(false);
+  const [replyingTo, setReplyingTo] = useState(null);
+  const [editingMessage, setEditingMessage] = useState(null);
+  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);
+  const fileInputRef = useRef(null);
+  const messagesContainerRef = useRef(null);
   useEffect(() => {
     const unsubOpen = client2.on("openChange", setIsOpen);
     const unsubMessage = client2.on("message", () => {
@@ -484,11 +1082,17 @@ function ChatWidget({ client: client2, config: initialConfig }) {
   if (!shouldShow) return null;
   const handleSubmit = async (e) => {
     e.preventDefault();
-    if (!inputValue.trim()) return;
+    const hasContent = inputValue.trim().length > 0;
+    const readyAttachments = pendingAttachments.filter((a) => a.status === "ready" && a.attachment);
+    if (!hasContent && readyAttachments.length === 0) return;
     const content = inputValue;
+    const attachmentIds = readyAttachments.map((a) => a.attachment.id);
+    const replyToId = replyingTo?.id;
     setInputValue("");
+    setPendingAttachments([]);
+    setReplyingTo(null);
     try {
-      await client2.sendMessage(content);
+      await client2.sendMessage(content, attachmentIds, replyToId);
     } catch (err) {
       console.error("[PocketPing] Failed to send message:", err);
     }
@@ -498,9 +1102,213 @@ function ChatWidget({ client: client2, config: initialConfig }) {
     setInputValue(target.value);
     client2.sendTyping(true);
   };
+  const handleFileSelect = async (e) => {
+    const target = e.target;
+    const files = target.files;
+    if (!files || files.length === 0) return;
+    const newPending = [];
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      const id = `pending-${Date.now()}-${i}`;
+      let preview;
+      if (file.type.startsWith("image/")) {
+        preview = URL.createObjectURL(file);
+      }
+      newPending.push({
+        id,
+        file,
+        preview,
+        progress: 0,
+        status: "pending"
+      });
+    }
+    setPendingAttachments((prev) => [...prev, ...newPending]);
+    target.value = "";
+    setIsUploading(true);
+    for (const pending of newPending) {
+      try {
+        setPendingAttachments(
+          (prev) => prev.map((a) => a.id === pending.id ? { ...a, status: "uploading" } : a)
+        );
+        const attachment = await client2.uploadFile(pending.file, (progress) => {
+          setPendingAttachments(
+            (prev) => prev.map((a) => a.id === pending.id ? { ...a, progress } : a)
+          );
+        });
+        setPendingAttachments(
+          (prev) => prev.map(
+            (a) => a.id === pending.id ? { ...a, status: "ready", progress: 100, attachment } : a
+          )
+        );
+      } catch (err) {
+        console.error("[PocketPing] Failed to upload file:", err);
+        setPendingAttachments(
+          (prev) => prev.map(
+            (a) => a.id === pending.id ? { ...a, status: "error", error: "Upload failed" } : a
+          )
+        );
+      }
+    }
+    setIsUploading(false);
+  };
+  const handleRemoveAttachment = (id) => {
+    setPendingAttachments((prev) => {
+      const removed = prev.find((a) => a.id === id);
+      if (removed?.preview) {
+        URL.revokeObjectURL(removed.preview);
+      }
+      return prev.filter((a) => a.id !== id);
+    });
+  };
+  const handleReply = (message) => {
+    setReplyingTo(message);
+    setMessageMenu(null);
+    inputRef.current?.focus();
+  };
+  const handleCancelReply = () => {
+    setReplyingTo(null);
+  };
+  const handleStartEdit = (message) => {
+    if (message.sender !== "visitor") return;
+    setEditingMessage(message);
+    setEditContent(message.content);
+    setMessageMenu(null);
+  };
+  const handleCancelEdit = () => {
+    setEditingMessage(null);
+    setEditContent("");
+  };
+  const handleSaveEdit = async () => {
+    if (!editingMessage || !editContent.trim()) return;
+    try {
+      await client2.editMessage(editingMessage.id, editContent.trim());
+      setEditingMessage(null);
+      setEditContent("");
+    } catch (err) {
+      console.error("[PocketPing] Failed to edit message:", err);
+    }
+  };
+  const handleDelete = async (message) => {
+    if (message.sender !== "visitor") return;
+    setMessageMenu(null);
+    if (confirm("Delete this message?")) {
+      try {
+        await client2.deleteMessage(message.id);
+      } catch (err) {
+        console.error("[PocketPing] Failed to delete message:", err);
+      }
+    }
+  };
+  const handleMessageContextMenu = (e, message) => {
+    e.preventDefault();
+    const mouseEvent = e;
+    setMessageMenu({
+      message,
+      x: mouseEvent.clientX,
+      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);
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, [messageMenu]);
+  const dragCounterRef = useRef(0);
+  const handleDragEnter = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current++;
+    if (dragCounterRef.current === 1) {
+      setIsDragging(true);
+    }
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
+    if (dragCounterRef.current === 0) {
+      setIsDragging(false);
+    }
+  };
+  const handleDrop = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current = 0;
+    setIsDragging(false);
+    const files = e.dataTransfer?.files;
+    if (!files || files.length === 0) return;
+    const newPending = [];
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      const id = `pending-${Date.now()}-${i}`;
+      let preview;
+      if (file.type.startsWith("image/")) {
+        preview = URL.createObjectURL(file);
+      }
+      newPending.push({
+        id,
+        file,
+        preview,
+        progress: 0,
+        status: "pending"
+      });
+    }
+    setPendingAttachments((prev) => [...prev, ...newPending]);
+    setIsUploading(true);
+    for (const pending of newPending) {
+      try {
+        setPendingAttachments(
+          (prev) => prev.map((a) => a.id === pending.id ? { ...a, status: "uploading" } : a)
+        );
+        const attachment = await client2.uploadFile(pending.file, (progress) => {
+          setPendingAttachments(
+            (prev) => prev.map((a) => a.id === pending.id ? { ...a, progress } : a)
+          );
+        });
+        setPendingAttachments(
+          (prev) => prev.map(
+            (a) => a.id === pending.id ? { ...a, status: "ready", progress: 100, attachment } : a
+          )
+        );
+      } catch (err) {
+        console.error("[PocketPing] Failed to upload dropped file:", err);
+        setPendingAttachments(
+          (prev) => prev.map(
+            (a) => a.id === pending.id ? { ...a, status: "error", error: "Upload failed" } : a
+          )
+        );
+      }
+    }
+    setIsUploading(false);
+  };
   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(
@@ -516,84 +1324,263 @@ function ChatWidget({ client: client2, config: initialConfig }) {
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs("div", { class: `pp-window pp-${position} pp-theme-${theme}`, children: [
-      /* @__PURE__ */ jsxs("div", { class: "pp-header", children: [
-        /* @__PURE__ */ jsxs("div", { class: "pp-header-info", children: [
-          config.operatorAvatar && /* @__PURE__ */ jsx("img", { src: config.operatorAvatar, alt: "", class: "pp-avatar" }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("div", { class: "pp-header-title", children: config.operatorName ?? "Support" }),
-            /* @__PURE__ */ jsx("div", { class: "pp-header-status", children: operatorOnline ? /* @__PURE__ */ jsxs(Fragment2, { children: [
-              /* @__PURE__ */ jsx("span", { class: "pp-status-dot pp-online" }),
-              " Online"
-            ] }) : /* @__PURE__ */ jsxs(Fragment2, { children: [
-              /* @__PURE__ */ jsx("span", { class: "pp-status-dot" }),
-              " Away"
-            ] }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            class: "pp-close-btn",
-            onClick: () => client2.setOpen(false),
-            "aria-label": "Close chat",
-            children: /* @__PURE__ */ jsx(CloseIcon, {})
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { class: "pp-messages", children: [
-        config.welcomeMessage && messages.length === 0 && /* @__PURE__ */ jsx("div", { class: "pp-welcome", children: config.welcomeMessage }),
-        messages.map((msg) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            class: `pp-message pp-message-${msg.sender}`,
-            children: [
-              /* @__PURE__ */ jsx("div", { class: "pp-message-content", children: msg.content }),
-              /* @__PURE__ */ jsxs("div", { class: "pp-message-time", children: [
-                formatTime(msg.timestamp),
-                msg.sender === "ai" && /* @__PURE__ */ jsx("span", { class: "pp-ai-badge", children: "AI" }),
-                msg.sender === "visitor" && /* @__PURE__ */ jsx("span", { class: `pp-status pp-status-${msg.status ?? "sent"}`, children: /* @__PURE__ */ jsx(StatusIcon, { status: msg.status }) })
+    isOpen && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        class: `pp-window pp-${position} pp-theme-${theme} ${isDragging ? "pp-dragging" : ""}`,
+        onDragEnter: handleDragEnter,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        children: [
+          isDragging && /* @__PURE__ */ jsxs("div", { class: "pp-drop-overlay", children: [
+            /* @__PURE__ */ jsx("div", { class: "pp-drop-icon", children: /* @__PURE__ */ jsx(AttachIcon, {}) }),
+            /* @__PURE__ */ jsx("div", { class: "pp-drop-text", children: "Drop files to upload" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { class: "pp-header", children: [
+            /* @__PURE__ */ jsxs("div", { class: "pp-header-info", children: [
+              config.operatorAvatar && /* @__PURE__ */ jsx("img", { src: config.operatorAvatar, alt: "", class: "pp-avatar" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { class: "pp-header-title", children: config.operatorName ?? "Support" }),
+                /* @__PURE__ */ jsx("div", { class: "pp-header-status", children: operatorOnline ? /* @__PURE__ */ jsxs(Fragment2, { children: [
+                  /* @__PURE__ */ jsx("span", { class: "pp-status-dot pp-online" }),
+                  " Online"
+                ] }) : /* @__PURE__ */ jsxs(Fragment2, { children: [
+                  /* @__PURE__ */ jsx("span", { class: "pp-status-dot" }),
+                  " Away"
+                ] }) })
               ] })
-            ]
-          },
-          msg.id
-        )),
-        isTyping && /* @__PURE__ */ jsxs("div", { class: "pp-message pp-message-operator pp-typing", children: [
-          /* @__PURE__ */ jsx("span", {}),
-          /* @__PURE__ */ jsx("span", {}),
-          /* @__PURE__ */ jsx("span", {})
-        ] }),
-        /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
-      ] }),
-      /* @__PURE__ */ jsxs("form", { class: "pp-input-form", onSubmit: handleSubmit, children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref: inputRef,
-            type: "text",
-            class: "pp-input",
-            placeholder: config.placeholder ?? "Type a message...",
-            value: inputValue,
-            onInput: handleInputChange,
-            disabled: !isConnected
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "submit",
-            class: "pp-send-btn",
-            disabled: !inputValue.trim() || !isConnected,
-            "aria-label": "Send message",
-            children: /* @__PURE__ */ jsx(SendIcon, {})
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { class: "pp-footer", children: [
-        "Powered by ",
-        /* @__PURE__ */ jsx("a", { href: "https://pocketping.io", target: "_blank", rel: "noopener", children: "PocketPing" })
-      ] })
-    ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                class: "pp-close-btn",
+                onClick: () => client2.setOpen(false),
+                "aria-label": "Close chat",
+                children: /* @__PURE__ */ jsx(CloseIcon, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { class: "pp-messages", ref: messagesContainerRef, children: [
+            config.welcomeMessage && messages.length === 0 && /* @__PURE__ */ jsx("div", { class: "pp-welcome", children: config.welcomeMessage }),
+            messages.map((msg) => {
+              const isDeleted = !!msg.deletedAt;
+              const isEdited = !!msg.editedAt;
+              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: [
+                    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: [
+                        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: [
+                      /* @__PURE__ */ jsx("span", { class: "pp-deleted-icon", children: "\u{1F5D1}\uFE0F" }),
+                      " Message deleted"
+                    ] }) : /* @__PURE__ */ jsxs(Fragment2, { children: [
+                      msg.content && /* @__PURE__ */ jsx("div", { class: "pp-message-content", children: msg.content }),
+                      msg.attachments && msg.attachments.length > 0 && /* @__PURE__ */ jsx("div", { class: "pp-message-attachments", children: msg.attachments.map((att) => /* @__PURE__ */ jsx(AttachmentDisplay, { attachment: att }, att.id)) })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { class: "pp-message-time", children: [
+                      formatTime(msg.timestamp),
+                      isEdited && !isDeleted && /* @__PURE__ */ jsx("span", { class: "pp-edited-badge", children: "edited" }),
+                      msg.sender === "ai" && /* @__PURE__ */ jsx("span", { class: "pp-ai-badge", children: "AI" }),
+                      msg.sender === "visitor" && !isDeleted && /* @__PURE__ */ jsx("span", { class: `pp-status pp-status-${msg.status ?? "sent"}`, children: /* @__PURE__ */ jsx(StatusIcon, { status: msg.status }) })
+                    ] })
+                  ]
+                },
+                msg.id
+              );
+            }),
+            isTyping && /* @__PURE__ */ jsxs("div", { class: "pp-message pp-message-operator pp-typing", children: [
+              /* @__PURE__ */ jsx("span", {}),
+              /* @__PURE__ */ jsx("span", {}),
+              /* @__PURE__ */ jsx("span", {})
+            ] }),
+            /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+          ] }),
+          messageMenu && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              class: "pp-message-menu",
+              style: { top: `${messageMenu.y}px`, left: `${messageMenu.x}px` },
+              children: [
+                /* @__PURE__ */ jsxs("button", { onClick: () => handleReply(messageMenu.message), children: [
+                  /* @__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, { color: actionIconColor }),
+                    " Edit"
+                  ] }),
+                  /* @__PURE__ */ jsxs("button", { class: "pp-menu-delete", onClick: () => handleDelete(messageMenu.message), children: [
+                    /* @__PURE__ */ jsx(DeleteIcon, { color: "#ef4444" }),
+                    " Delete"
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          editingMessage && /* @__PURE__ */ jsxs("div", { class: "pp-edit-modal", children: [
+            /* @__PURE__ */ jsxs("div", { class: "pp-edit-header", children: [
+              /* @__PURE__ */ jsx("span", { children: "Edit message" }),
+              /* @__PURE__ */ jsx("button", { onClick: handleCancelEdit, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                class: "pp-edit-input",
+                value: editContent,
+                onInput: (e) => setEditContent(e.target.value),
+                autoFocus: true
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { class: "pp-edit-actions", children: [
+              /* @__PURE__ */ jsx("button", { class: "pp-edit-cancel", onClick: handleCancelEdit, children: "Cancel" }),
+              /* @__PURE__ */ jsx("button", { class: "pp-edit-save", onClick: handleSaveEdit, disabled: !editContent.trim(), children: "Save" })
+            ] })
+          ] }),
+          replyingTo && /* @__PURE__ */ jsxs("div", { class: "pp-reply-preview", children: [
+            /* @__PURE__ */ jsxs("div", { class: "pp-reply-preview-content", children: [
+              /* @__PURE__ */ jsx("span", { class: "pp-reply-label", children: "Replying to" }),
+              /* @__PURE__ */ jsxs("span", { class: "pp-reply-text", children: [
+                replyingTo.content.slice(0, 50),
+                replyingTo.content.length > 50 ? "..." : ""
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("button", { class: "pp-reply-cancel", onClick: handleCancelReply, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+          ] }),
+          pendingAttachments.length > 0 && /* @__PURE__ */ jsx("div", { class: "pp-attachments-preview", children: pendingAttachments.map((pending) => /* @__PURE__ */ jsxs("div", { class: `pp-attachment-preview pp-attachment-${pending.status}`, children: [
+            pending.preview ? /* @__PURE__ */ jsx("img", { src: pending.preview, alt: pending.file.name, class: "pp-preview-img" }) : /* @__PURE__ */ jsx("div", { class: "pp-preview-file", children: /* @__PURE__ */ jsx(FileIcon, { mimeType: pending.file.type }) }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                class: "pp-remove-attachment",
+                onClick: () => handleRemoveAttachment(pending.id),
+                "aria-label": "Remove attachment",
+                type: "button",
+                children: /* @__PURE__ */ jsx(CloseIcon, {})
+              }
+            ),
+            pending.status === "uploading" && /* @__PURE__ */ jsx("div", { class: "pp-upload-progress", style: { width: `${pending.progress}%` } }),
+            pending.status === "error" && /* @__PURE__ */ jsx("div", { class: "pp-upload-error", title: pending.error, children: "!" })
+          ] }, pending.id)) }),
+          /* @__PURE__ */ jsxs("form", { class: "pp-input-form", onSubmit: handleSubmit, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: (el) => {
+                  fileInputRef.current = el;
+                  if (el) {
+                    el.onchange = handleFileSelect;
+                  }
+                },
+                type: "file",
+                class: "pp-file-input",
+                accept: "image/*,audio/*,video/*,.pdf,.doc,.docx,.xls,.xlsx,.txt",
+                multiple: true
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                class: "pp-attach-btn",
+                onClick: () => fileInputRef.current?.click(),
+                disabled: !isConnected || isUploading,
+                "aria-label": "Attach file",
+                children: /* @__PURE__ */ jsx(AttachIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                class: "pp-input",
+                placeholder: config.placeholder ?? "Type a message...",
+                value: inputValue,
+                onInput: handleInputChange,
+                disabled: !isConnected
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "submit",
+                class: "pp-send-btn",
+                disabled: !inputValue.trim() && pendingAttachments.filter((a) => a.status === "ready").length === 0 || !isConnected || isUploading,
+                "aria-label": "Send message",
+                children: /* @__PURE__ */ jsx(SendIcon, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { class: "pp-footer", children: [
+            "Powered by ",
+            /* @__PURE__ */ jsx("a", { href: "https://pocketping.io", target: "_blank", rel: "noopener", children: "PocketPing" })
+          ] })
+        ]
+      }
+    )
   ] });
 }
 function checkPageVisibility(config) {
@@ -649,6 +1636,89 @@ function StatusIcon({ status }) {
   }
   return null;
 }
+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({ 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({ 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({ 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" })
+  ] });
+}
+function FileIcon({ mimeType }) {
+  if (mimeType === "application/pdf") {
+    return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
+      /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+      /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" }),
+      /* @__PURE__ */ jsx("path", { d: "M9 15h6" }),
+      /* @__PURE__ */ jsx("path", { d: "M9 11h6" })
+    ] });
+  }
+  if (mimeType.startsWith("audio/")) {
+    return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
+      /* @__PURE__ */ jsx("path", { d: "M9 18V5l12-2v13" }),
+      /* @__PURE__ */ jsx("circle", { cx: "6", cy: "18", r: "3" }),
+      /* @__PURE__ */ jsx("circle", { cx: "18", cy: "16", r: "3" })
+    ] });
+  }
+  if (mimeType.startsWith("video/")) {
+    return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
+      /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2.18", ry: "2.18" }),
+      /* @__PURE__ */ jsx("line", { x1: "7", y1: "2", x2: "7", y2: "22" }),
+      /* @__PURE__ */ jsx("line", { x1: "17", y1: "2", x2: "17", y2: "22" }),
+      /* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
+      /* @__PURE__ */ jsx("line", { x1: "2", y1: "7", x2: "7", y2: "7" }),
+      /* @__PURE__ */ jsx("line", { x1: "2", y1: "17", x2: "7", y2: "17" }),
+      /* @__PURE__ */ jsx("line", { x1: "17", y1: "17", x2: "22", y2: "17" }),
+      /* @__PURE__ */ jsx("line", { x1: "17", y1: "7", x2: "22", y2: "7" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
+    /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+    /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" })
+  ] });
+}
+function AttachmentDisplay({ attachment }) {
+  const isImage = attachment.mimeType.startsWith("image/");
+  const isAudio = attachment.mimeType.startsWith("audio/");
+  const isVideo = attachment.mimeType.startsWith("video/");
+  const formatSize = (bytes) => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+  if (isImage) {
+    return /* @__PURE__ */ jsx("a", { href: attachment.url, target: "_blank", rel: "noopener", class: "pp-attachment pp-attachment-image", children: /* @__PURE__ */ jsx("img", { src: attachment.thumbnailUrl || attachment.url, alt: attachment.filename }) });
+  }
+  if (isAudio) {
+    return /* @__PURE__ */ jsxs("div", { class: "pp-attachment pp-attachment-audio", children: [
+      /* @__PURE__ */ jsx("audio", { controls: true, preload: "metadata", children: /* @__PURE__ */ jsx("source", { src: attachment.url, type: attachment.mimeType }) }),
+      /* @__PURE__ */ jsx("span", { class: "pp-attachment-name", children: attachment.filename })
+    ] });
+  }
+  if (isVideo) {
+    return /* @__PURE__ */ jsx("div", { class: "pp-attachment pp-attachment-video", children: /* @__PURE__ */ jsx("video", { controls: true, preload: "metadata", children: /* @__PURE__ */ jsx("source", { src: attachment.url, type: attachment.mimeType }) }) });
+  }
+  return /* @__PURE__ */ jsxs("a", { href: attachment.url, target: "_blank", rel: "noopener", class: "pp-attachment pp-attachment-file", children: [
+    /* @__PURE__ */ jsx(FileIcon, { mimeType: attachment.mimeType }),
+    /* @__PURE__ */ jsxs("div", { class: "pp-attachment-info", children: [
+      /* @__PURE__ */ jsx("span", { class: "pp-attachment-name", children: attachment.filename }),
+      /* @__PURE__ */ jsx("span", { class: "pp-attachment-size", children: formatSize(attachment.size) })
+    ] })
+  ] });
+}
 
 // src/version.ts
 var VERSION = "0.3.6";
@@ -764,7 +1834,7 @@ var PocketPingClient = class {
     this.cleanupTrackedElements();
     this.disableInspectorMode();
   }
-  async sendMessage(content) {
+  async sendMessage(content, attachmentIds, replyTo) {
     if (!this.session) {
       throw new Error("Not connected");
     }
@@ -775,7 +1845,8 @@ var PocketPingClient = class {
       content,
       sender: "visitor",
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      status: "sending"
+      status: "sending",
+      replyTo
     };
     this.session.messages.push(tempMessage);
     this.emit("message", tempMessage);
@@ -785,7 +1856,9 @@ var PocketPingClient = class {
         body: JSON.stringify({
           sessionId: this.session.sessionId,
           content,
-          sender: "visitor"
+          sender: "visitor",
+          attachmentIds: attachmentIds || [],
+          replyTo
         })
       });
       const messageIndex = this.session.messages.findIndex((m) => m.id === tempId);
@@ -793,6 +1866,9 @@ var PocketPingClient = class {
         this.session.messages[messageIndex].id = response.messageId;
         this.session.messages[messageIndex].timestamp = response.timestamp;
         this.session.messages[messageIndex].status = "sent";
+        if (response.attachments && response.attachments.length > 0) {
+          this.session.messages[messageIndex].attachments = response.attachments;
+        }
         this.emit("message", this.session.messages[messageIndex]);
       }
       const message = this.session.messages[messageIndex] || {
@@ -801,7 +1877,8 @@ var PocketPingClient = class {
         content,
         sender: "visitor",
         timestamp: response.timestamp,
-        status: "sent"
+        status: "sent",
+        attachments: response.attachments
       };
       this.config.onMessage?.(message);
       return message;
@@ -814,6 +1891,110 @@ var PocketPingClient = class {
       throw error;
     }
   }
+  /**
+   * Upload a file attachment
+   * Returns the attachment data after successful upload
+   * @param file - File object to upload
+   * @param onProgress - Optional callback for upload progress (0-100)
+   * @example
+   * const attachment = await PocketPing.uploadFile(file, (progress) => {
+   *   console.log(`Upload ${progress}% complete`)
+   * })
+   * await PocketPing.sendMessage('Check this file', [attachment.id])
+   */
+  async uploadFile(file, onProgress) {
+    if (!this.session) {
+      throw new Error("Not connected");
+    }
+    this.emit("uploadStart", { filename: file.name, size: file.size });
+    try {
+      const initResponse = await this.fetch("/upload", {
+        method: "POST",
+        body: JSON.stringify({
+          sessionId: this.session.sessionId,
+          filename: file.name,
+          mimeType: file.type || "application/octet-stream",
+          size: file.size
+        })
+      });
+      onProgress?.(10);
+      this.emit("uploadProgress", { filename: file.name, progress: 10 });
+      await this.uploadToPresignedUrl(initResponse.uploadUrl, file, (progress) => {
+        const mappedProgress = 10 + progress * 0.8;
+        onProgress?.(mappedProgress);
+        this.emit("uploadProgress", { filename: file.name, progress: mappedProgress });
+      });
+      const completeResponse = await this.fetch("/upload/complete", {
+        method: "POST",
+        body: JSON.stringify({
+          sessionId: this.session.sessionId,
+          attachmentId: initResponse.attachmentId
+        })
+      });
+      onProgress?.(100);
+      this.emit("uploadComplete", completeResponse);
+      return {
+        id: completeResponse.id,
+        filename: completeResponse.filename,
+        mimeType: completeResponse.mimeType,
+        size: completeResponse.size,
+        url: completeResponse.url,
+        thumbnailUrl: completeResponse.thumbnailUrl,
+        status: completeResponse.status
+      };
+    } catch (error) {
+      this.emit("uploadError", { filename: file.name, error });
+      throw error;
+    }
+  }
+  /**
+   * Upload multiple files at once
+   * @param files - Array of File objects to upload
+   * @param onProgress - Optional callback for overall progress (0-100)
+   * @returns Array of uploaded attachments
+   */
+  async uploadFiles(files, onProgress) {
+    const attachments = [];
+    const totalFiles = files.length;
+    for (let i = 0; i < totalFiles; i++) {
+      const file = files[i];
+      const baseProgress = i / totalFiles * 100;
+      const fileProgress = 100 / totalFiles;
+      const attachment = await this.uploadFile(file, (progress) => {
+        const totalProgress = baseProgress + progress / 100 * fileProgress;
+        onProgress?.(totalProgress);
+      });
+      attachments.push(attachment);
+    }
+    return attachments;
+  }
+  /**
+   * Upload file to presigned URL with progress tracking
+   */
+  uploadToPresignedUrl(url, file, onProgress) {
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      xhr.upload.addEventListener("progress", (event) => {
+        if (event.lengthComputable) {
+          const progress = event.loaded / event.total * 100;
+          onProgress?.(progress);
+        }
+      });
+      xhr.addEventListener("load", () => {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          resolve();
+        } else {
+          reject(new Error(`Upload failed with status ${xhr.status}`));
+        }
+      });
+      xhr.addEventListener("error", () => {
+        reject(new Error("Upload failed"));
+      });
+      xhr.open("PUT", url);
+      xhr.setRequestHeader("Content-Type", file.type || "application/octet-stream");
+      xhr.send(file);
+    });
+  }
   async fetchMessages(after) {
     if (!this.session) {
       throw new Error("Not connected");
@@ -867,6 +2048,54 @@ var PocketPingClient = class {
       console.error("[PocketPing] Failed to send read status:", err);
     }
   }
+  /**
+   * Edit a message (visitor can only edit their own messages)
+   * @param messageId - ID of the message to edit
+   * @param content - New content for the message
+   */
+  async editMessage(messageId, content) {
+    if (!this.session) {
+      throw new Error("Not connected");
+    }
+    const response = await this.fetch(`/message/${messageId}`, {
+      method: "PATCH",
+      body: JSON.stringify({
+        sessionId: this.session.sessionId,
+        content
+      })
+    });
+    const messageIndex = this.session.messages.findIndex((m) => m.id === messageId);
+    if (messageIndex >= 0) {
+      this.session.messages[messageIndex].content = response.message.content;
+      this.session.messages[messageIndex].editedAt = response.message.editedAt;
+      this.emit("messageEdited", this.session.messages[messageIndex]);
+    }
+    return this.session.messages[messageIndex];
+  }
+  /**
+   * Delete a message (soft delete - visitor can only delete their own messages)
+   * @param messageId - ID of the message to delete
+   */
+  async deleteMessage(messageId) {
+    if (!this.session) {
+      throw new Error("Not connected");
+    }
+    const response = await this.fetch(`/message/${messageId}`, {
+      method: "DELETE",
+      body: JSON.stringify({
+        sessionId: this.session.sessionId
+      })
+    });
+    if (response.deleted) {
+      const messageIndex = this.session.messages.findIndex((m) => m.id === messageId);
+      if (messageIndex >= 0) {
+        this.session.messages[messageIndex].deletedAt = (/* @__PURE__ */ new Date()).toISOString();
+        this.session.messages[messageIndex].content = "";
+        this.emit("messageDeleted", this.session.messages[messageIndex]);
+      }
+    }
+    return response.deleted;
+  }
   async getPresence() {
     return this.fetch("/presence", { method: "GET" });
   }
@@ -1421,7 +2650,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(() => {
@@ -1476,6 +2712,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":
@@ -1498,12 +2747,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);
@@ -1542,6 +2820,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);
@@ -1601,11 +2902,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);
@@ -1770,11 +3105,23 @@ function close() {
 function toggle() {
   client?.toggleOpen();
 }
-function sendMessage(content) {
+function sendMessage(content, attachmentIds) {
+  if (!client) {
+    throw new Error("[PocketPing] Not initialized");
+  }
+  return client.sendMessage(content, attachmentIds);
+}
+async function uploadFile(file, onProgress) {
+  if (!client) {
+    throw new Error("[PocketPing] Not initialized");
+  }
+  return client.uploadFile(file, onProgress);
+}
+async function uploadFiles(files, onProgress) {
   if (!client) {
     throw new Error("[PocketPing] Not initialized");
   }
-  return client.sendMessage(content);
+  return client.uploadFiles(files, onProgress);
 }
 function trigger(eventName, data, options) {
   if (!client) {
@@ -1843,7 +3190,7 @@ if (typeof document !== "undefined") {
     }
   }
 }
-var index_default = { init, destroy, open, close, toggle, sendMessage, trigger, onEvent, offEvent, on, identify, reset, getIdentity, setupTrackedElements, getTrackedElements };
+var index_default = { init, destroy, open, close, toggle, sendMessage, uploadFile, uploadFiles, trigger, onEvent, offEvent, on, identify, reset, getIdentity, setupTrackedElements, getTrackedElements };
 export {
   close,
   index_default as default,
@@ -1860,5 +3207,7 @@ export {
   sendMessage,
   setupTrackedElements,
   toggle,
-  trigger
+  trigger,
+  uploadFile,
+  uploadFiles
 };