@pocketping/widget 1.0.2 → 1.2.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 {
@@ -372,6 +378,486 @@ function styles(primaryColor, theme) {
     .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;
+    }
+
+    /* 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;
+    }
+
+    .pp-reply-sender {
+      display: block;
+      font-weight: 500;
+      color: ${primaryColor};
+      margin-bottom: 2px;
+    }
+
+    .pp-reply-content {
+      display: block;
+      color: ${colors.textSecondary};
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    /* Deleted Message */
+    .pp-message-deleted {
+      opacity: 0.6;
+    }
+
+    .pp-deleted-content {
+      font-style: italic;
+      color: ${colors.textSecondary};
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .pp-deleted-icon {
+      font-size: 12px;
+    }
+
+    /* Edited Badge */
+    .pp-edited-badge {
+      font-size: 10px;
+      color: ${colors.textSecondary};
+      margin-left: 4px;
+      font-style: italic;
+    }
   `;
 }
 
@@ -385,9 +871,18 @@ 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 [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 +979,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,6 +999,190 @@ 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
+    });
+  };
+  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";
@@ -516,84 +1201,211 @@ 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;
+              const replyToMsg = msg.replyTo ? messages.find((m) => m.id === msg.replyTo) : null;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  class: `pp-message pp-message-${msg.sender} ${isDeleted ? "pp-message-deleted" : ""}`,
+                  onContextMenu: (e) => handleMessageContextMenu(e, msg),
+                  children: [
+                    replyToMsg && /* @__PURE__ */ jsxs("div", { class: "pp-reply-quote", children: [
+                      /* @__PURE__ */ jsx("span", { class: "pp-reply-sender", children: replyToMsg.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 ? "..." : ""
+                      ] })
+                    ] }),
+                    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, {}),
+                  " Reply"
+                ] }),
+                messageMenu.message.sender === "visitor" && !messageMenu.message.deletedAt && /* @__PURE__ */ jsxs(Fragment2, { children: [
+                  /* @__PURE__ */ jsxs("button", { onClick: () => handleStartEdit(messageMenu.message), children: [
+                    /* @__PURE__ */ jsx(EditIcon, {}),
+                    " Edit"
+                  ] }),
+                  /* @__PURE__ */ jsxs("button", { class: "pp-menu-delete", onClick: () => handleDelete(messageMenu.message), children: [
+                    /* @__PURE__ */ jsx(DeleteIcon, {}),
+                    " 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,15 +1461,96 @@ 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() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", 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 DeleteIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", 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 = "1.0.2";
+var VERSION = "0.3.6";
 
 // src/client.ts
 var PocketPingClient = class {
   constructor(config) {
     this.session = null;
     this.ws = null;
+    this.sse = null;
     this.isOpen = false;
     this.listeners = /* @__PURE__ */ new Map();
     this.customEventHandlers = /* @__PURE__ */ new Map();
@@ -670,7 +1563,7 @@ var PocketPingClient = class {
     this.wsConnectedAt = 0;
     this.quickFailureThreshold = 2e3;
     // If WS fails within 2s, assume serverless
-    this.usePollingFallback = false;
+    this.connectionMode = "none";
     this.trackedElementCleanups = [];
     this.currentTrackedElements = [];
     this.inspectorMode = false;
@@ -731,7 +1624,7 @@ var PocketPingClient = class {
       welcomeMessage: this.config.welcomeMessage
     });
     this.storeSessionId(response.sessionId);
-    this.connectWebSocket();
+    this.connectRealtime();
     if (response.inspectorMode) {
       this.enableInspectorMode();
     } else if (response.trackedElements?.length) {
@@ -742,9 +1635,20 @@ var PocketPingClient = class {
     return this.session;
   }
   disconnect() {
-    this.ws?.close();
-    this.ws = null;
+    if (this.ws) {
+      this.ws.onclose = null;
+      this.ws.onmessage = null;
+      this.ws.onerror = null;
+      this.ws.onopen = null;
+      this.ws.close();
+      this.ws = null;
+    }
+    if (this.sse) {
+      this.sse.close();
+      this.sse = null;
+    }
     this.session = null;
+    this.connectionMode = "none";
     if (this.reconnectTimeout) {
       clearTimeout(this.reconnectTimeout);
     }
@@ -752,7 +1656,7 @@ var PocketPingClient = class {
     this.cleanupTrackedElements();
     this.disableInspectorMode();
   }
-  async sendMessage(content) {
+  async sendMessage(content, attachmentIds, replyTo) {
     if (!this.session) {
       throw new Error("Not connected");
     }
@@ -763,7 +1667,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);
@@ -773,7 +1678,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);
@@ -781,6 +1688,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] || {
@@ -789,7 +1699,8 @@ var PocketPingClient = class {
         content,
         sender: "visitor",
         timestamp: response.timestamp,
-        status: "sent"
+        status: "sent",
+        attachments: response.attachments
       };
       this.config.onMessage?.(message);
       return message;
@@ -802,6 +1713,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");
@@ -855,6 +1870,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" });
   }
@@ -1348,19 +2411,40 @@ var PocketPingClient = class {
     return this.inspectorMode;
   }
   // ─────────────────────────────────────────────────────────────────
-  // WebSocket
+  // Real-time Connection (WebSocket → SSE → Polling)
   // ─────────────────────────────────────────────────────────────────
-  connectWebSocket() {
+  connectRealtime() {
     if (!this.session) return;
-    if (this.usePollingFallback) {
+    if (this.connectionMode === "polling") {
       this.startPolling();
       return;
     }
+    if (this.connectionMode === "sse") {
+      this.connectSSE();
+      return;
+    }
+    this.connectWebSocket();
+  }
+  connectWebSocket() {
+    if (!this.session) return;
     const wsUrl = this.config.endpoint.replace(/^http/, "ws").replace(/\/$/, "") + `/stream?sessionId=${this.session.sessionId}`;
     try {
       this.ws = new WebSocket(wsUrl);
       this.wsConnectedAt = Date.now();
+      const connectionTimeout = setTimeout(() => {
+        console.warn("[PocketPing] \u23F1\uFE0F WebSocket timeout - trying SSE");
+        if (this.ws && this.ws.readyState !== WebSocket.OPEN) {
+          this.ws.onclose = null;
+          this.ws.onerror = null;
+          this.ws.onopen = null;
+          this.ws.close();
+          this.ws = null;
+          this.connectSSE();
+        }
+      }, 5e3);
       this.ws.onopen = () => {
+        clearTimeout(connectionTimeout);
+        this.connectionMode = "ws";
         this.reconnectAttempts = 0;
         this.wsConnectedAt = Date.now();
         this.emit("wsConnected", null);
@@ -1368,36 +2452,81 @@ var PocketPingClient = class {
       this.ws.onmessage = (event) => {
         try {
           const wsEvent = JSON.parse(event.data);
-          this.handleWebSocketEvent(wsEvent);
+          this.handleRealtimeEvent(wsEvent);
         } catch (err) {
           console.error("[PocketPing] Failed to parse WS message:", err);
         }
       };
       this.ws.onclose = () => {
+        clearTimeout(connectionTimeout);
         this.emit("wsDisconnected", null);
         this.handleWsFailure();
       };
       this.ws.onerror = () => {
+        clearTimeout(connectionTimeout);
       };
-    } catch (err) {
-      console.warn("[PocketPing] WebSocket unavailable, using polling");
-      this.usePollingFallback = true;
+    } catch {
+      console.warn("[PocketPing] WebSocket unavailable - trying SSE");
+      this.connectSSE();
+    }
+  }
+  connectSSE() {
+    if (!this.session) return;
+    const sseUrl = this.config.endpoint.replace(/\/$/, "") + `/stream?sessionId=${this.session.sessionId}`;
+    try {
+      this.sse = new EventSource(sseUrl);
+      const connectionTimeout = setTimeout(() => {
+        console.warn("[PocketPing] \u23F1\uFE0F SSE timeout - falling back to polling");
+        if (this.sse && this.sse.readyState !== EventSource.OPEN) {
+          this.sse.close();
+          this.sse = null;
+          this.connectionMode = "polling";
+          this.startPolling();
+        }
+      }, 5e3);
+      this.sse.onopen = () => {
+        clearTimeout(connectionTimeout);
+        this.connectionMode = "sse";
+        this.emit("sseConnected", null);
+      };
+      this.sse.addEventListener("message", (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          this.handleRealtimeEvent(data);
+        } catch (err) {
+          console.error("[PocketPing] Failed to parse SSE message:", err);
+        }
+      });
+      this.sse.addEventListener("connected", () => {
+      });
+      this.sse.onerror = () => {
+        clearTimeout(connectionTimeout);
+        console.warn("[PocketPing] \u274C SSE error - falling back to polling");
+        if (this.sse) {
+          this.sse.close();
+          this.sse = null;
+        }
+        this.connectionMode = "polling";
+        this.startPolling();
+      };
+    } catch {
+      console.warn("[PocketPing] SSE unavailable - falling back to polling");
+      this.connectionMode = "polling";
       this.startPolling();
     }
   }
   handleWsFailure() {
     const timeSinceConnect = Date.now() - this.wsConnectedAt;
     if (timeSinceConnect < this.quickFailureThreshold) {
-      this.reconnectAttempts++;
-      if (this.reconnectAttempts >= 2) {
-        console.info("[PocketPing] WebSocket not available (serverless?), using polling");
-        this.usePollingFallback = true;
-        this.startPolling();
-        return;
-      }
+      console.info("[PocketPing] WebSocket failed quickly - trying SSE");
+      this.connectSSE();
+      return;
     }
     this.scheduleReconnect();
   }
+  handleRealtimeEvent(event) {
+    this.handleWebSocketEvent(event);
+  }
   handleWebSocketEvent(event) {
     switch (event.type) {
       case "message":
@@ -1509,8 +2638,8 @@ var PocketPingClient = class {
   }
   scheduleReconnect() {
     if (this.reconnectAttempts >= this.maxReconnectAttempts) {
-      console.warn("[PocketPing] Max reconnect attempts reached, switching to polling");
-      this.startPolling();
+      console.warn("[PocketPing] Max reconnect attempts reached, trying SSE");
+      this.connectSSE();
       return;
     }
     const delay = Math.min(1e3 * Math.pow(2, this.reconnectAttempts), 3e4);
@@ -1535,6 +2664,7 @@ var PocketPingClient = class {
         }
       } catch (err) {
         this.pollingFailures++;
+        console.error(`[PocketPing] \u274C Polling error:`, err);
         if (this.pollingFailures <= 3 || this.pollingFailures % 3 === 0) {
           console.warn(`[PocketPing] Polling failed (${this.pollingFailures}/${this.maxPollingFailures})`);
         }
@@ -1545,11 +2675,11 @@ var PocketPingClient = class {
         }
       }
       if (this.session) {
-        const delay = this.pollingFailures > 0 ? Math.min(3e3 * Math.pow(2, this.pollingFailures - 1), 3e4) : 3e3;
+        const delay = this.pollingFailures > 0 ? Math.min(2e3 * Math.pow(2, this.pollingFailures - 1), 3e4) : 2e3;
         this.pollingTimeout = setTimeout(poll, delay);
       }
     };
-    poll();
+    this.pollingTimeout = setTimeout(poll, 500);
   }
   stopPolling() {
     if (this.pollingTimeout) {
@@ -1691,11 +2821,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) {
@@ -1764,7 +2906,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,
@@ -1781,5 +2923,7 @@ export {
   sendMessage,
   setupTrackedElements,
   toggle,
-  trigger
+  trigger,
+  uploadFile,
+  uploadFiles
 };