@pocketping/widget 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1045 @@
+// src/index.ts
+import { render, h as h2 } from "preact";
+
+// src/components/ChatWidget.tsx
+import { Fragment } from "preact";
+import { useState, useEffect, useRef, useCallback } from "preact/hooks";
+
+// src/components/styles.ts
+function styles(primaryColor, theme) {
+  const isDark = theme === "dark";
+  const colors = {
+    bg: isDark ? "#1f2937" : "#ffffff",
+    bgSecondary: isDark ? "#374151" : "#f3f4f6",
+    text: isDark ? "#f9fafb" : "#111827",
+    textSecondary: isDark ? "#9ca3af" : "#6b7280",
+    border: isDark ? "#4b5563" : "#e5e7eb",
+    messageBg: isDark ? "#374151" : "#f3f4f6"
+  };
+  return `
+    #pocketping-container {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      font-size: 14px;
+      line-height: 1.5;
+      color: ${colors.text};
+    }
+
+    .pp-toggle {
+      position: fixed;
+      width: 56px;
+      height: 56px;
+      border-radius: 50%;
+      background: ${primaryColor};
+      color: white;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      transition: transform 0.2s, box-shadow 0.2s;
+      z-index: 9999;
+    }
+
+    .pp-toggle:hover {
+      transform: scale(1.05);
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+    }
+
+    .pp-toggle svg {
+      width: 24px;
+      height: 24px;
+    }
+
+    .pp-toggle.pp-bottom-right {
+      bottom: 20px;
+      right: 20px;
+    }
+
+    .pp-toggle.pp-bottom-left {
+      bottom: 20px;
+      left: 20px;
+    }
+
+    .pp-online-dot {
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      width: 12px;
+      height: 12px;
+      background: #22c55e;
+      border-radius: 50%;
+      border: 2px solid white;
+    }
+
+    .pp-window {
+      position: fixed;
+      width: 380px;
+      height: 520px;
+      max-height: calc(100vh - 100px);
+      background: ${colors.bg};
+      border-radius: 16px;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      z-index: 9998;
+    }
+
+    .pp-window.pp-bottom-right {
+      bottom: 88px;
+      right: 20px;
+    }
+
+    .pp-window.pp-bottom-left {
+      bottom: 88px;
+      left: 20px;
+    }
+
+    @media (max-width: 480px) {
+      .pp-window {
+        width: calc(100vw - 20px);
+        height: calc(100vh - 100px);
+        bottom: 80px;
+        right: 10px;
+        left: 10px;
+        border-radius: 12px;
+      }
+    }
+
+    .pp-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px;
+      background: ${primaryColor};
+      color: white;
+    }
+
+    .pp-header-info {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .pp-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      object-fit: cover;
+    }
+
+    .pp-header-title {
+      font-weight: 600;
+      font-size: 16px;
+    }
+
+    .pp-header-status {
+      font-size: 12px;
+      opacity: 0.9;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .pp-status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.5);
+    }
+
+    .pp-status-dot.pp-online {
+      background: #22c55e;
+    }
+
+    .pp-close-btn {
+      background: transparent;
+      border: none;
+      color: white;
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 4px;
+      opacity: 0.8;
+      transition: opacity 0.2s;
+    }
+
+    .pp-close-btn:hover {
+      opacity: 1;
+    }
+
+    .pp-close-btn svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    .pp-messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .pp-welcome {
+      text-align: center;
+      color: ${colors.textSecondary};
+      padding: 24px;
+      font-size: 13px;
+    }
+
+    .pp-message {
+      max-width: 80%;
+      padding: 10px 14px;
+      border-radius: 16px;
+      word-wrap: break-word;
+    }
+
+    .pp-message-visitor {
+      align-self: flex-end;
+      background: ${primaryColor};
+      color: white;
+      border-bottom-right-radius: 4px;
+    }
+
+    .pp-message-operator,
+    .pp-message-ai {
+      align-self: flex-start;
+      background: ${colors.messageBg};
+      color: ${colors.text};
+      border-bottom-left-radius: 4px;
+    }
+
+    .pp-message-content {
+      margin-bottom: 4px;
+    }
+
+    .pp-message-time {
+      font-size: 11px;
+      opacity: 0.7;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .pp-ai-badge {
+      background: rgba(0, 0, 0, 0.1);
+      padding: 1px 4px;
+      border-radius: 4px;
+      font-size: 10px;
+      font-weight: 600;
+    }
+
+    .pp-status {
+      display: inline-flex;
+      align-items: center;
+      margin-left: 4px;
+    }
+
+    .pp-status svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    .pp-check,
+    .pp-check-double {
+      stroke: rgba(255, 255, 255, 0.7);
+    }
+
+    .pp-check-read {
+      stroke: #34b7f1;
+    }
+
+    .pp-status-sending .pp-check {
+      opacity: 0.5;
+    }
+
+    .pp-typing {
+      display: flex;
+      gap: 4px;
+      padding: 14px 18px;
+    }
+
+    .pp-typing span {
+      width: 8px;
+      height: 8px;
+      background: ${colors.textSecondary};
+      border-radius: 50%;
+      animation: pp-bounce 1.4s infinite ease-in-out both;
+    }
+
+    .pp-typing span:nth-child(1) { animation-delay: -0.32s; }
+    .pp-typing span:nth-child(2) { animation-delay: -0.16s; }
+
+    @keyframes pp-bounce {
+      0%, 80%, 100% { transform: scale(0); }
+      40% { transform: scale(1); }
+    }
+
+    .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;
+    }
+  `;
+}
+
+// src/components/ChatWidget.tsx
+import { Fragment as Fragment2, jsx, jsxs } from "preact/jsx-runtime";
+function ChatWidget({ client: client2, config }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [messages, setMessages] = useState([]);
+  const [inputValue, setInputValue] = useState("");
+  const [isTyping, setIsTyping] = useState(false);
+  const [operatorOnline, setOperatorOnline] = useState(false);
+  const [isConnected, setIsConnected] = useState(false);
+  const messagesEndRef = useRef(null);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    const unsubOpen = client2.on("openChange", setIsOpen);
+    const unsubMessage = client2.on("message", () => {
+      setMessages([...client2.getMessages()]);
+    });
+    const unsubTyping = client2.on("typing", (data) => {
+      setIsTyping(data.isTyping);
+    });
+    const unsubPresence = client2.on("presence", (data) => {
+      setOperatorOnline(data.online);
+    });
+    const unsubConnect = client2.on("connect", () => {
+      setIsConnected(true);
+      setMessages(client2.getMessages());
+      setOperatorOnline(client2.getSession()?.operatorOnline ?? false);
+    });
+    if (client2.isConnected()) {
+      setIsConnected(true);
+      setMessages(client2.getMessages());
+      setOperatorOnline(client2.getSession()?.operatorOnline ?? false);
+    }
+    return () => {
+      unsubOpen();
+      unsubMessage();
+      unsubTyping();
+      unsubPresence();
+      unsubConnect();
+    };
+  }, [client2]);
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  useEffect(() => {
+    if (isOpen) {
+      inputRef.current?.focus();
+    }
+  }, [isOpen]);
+  const markMessagesAsRead = useCallback(() => {
+    if (!isOpen || !isConnected) return;
+    const unreadMessages = messages.filter(
+      (msg) => msg.sender !== "visitor" && msg.status !== "read"
+    );
+    if (unreadMessages.length > 0) {
+      const messageIds = unreadMessages.map((msg) => msg.id);
+      client2.sendReadStatus(messageIds, "read");
+    }
+  }, [isOpen, isConnected, messages, client2]);
+  useEffect(() => {
+    if (!isOpen || !isConnected) return;
+    const timer = setTimeout(() => {
+      markMessagesAsRead();
+    }, 1e3);
+    return () => clearTimeout(timer);
+  }, [isOpen, isConnected, messages, markMessagesAsRead]);
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "visible" && isOpen) {
+        markMessagesAsRead();
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
+  }, [isOpen, markMessagesAsRead]);
+  useEffect(() => {
+    const unsubRead = client2.on(
+      "read",
+      () => {
+        setMessages([...client2.getMessages()]);
+      }
+    );
+    return () => unsubRead();
+  }, [client2]);
+  const shouldShow = checkPageVisibility(config);
+  if (!shouldShow) return null;
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!inputValue.trim()) return;
+    const content = inputValue;
+    setInputValue("");
+    try {
+      await client2.sendMessage(content);
+    } catch (err) {
+      console.error("[PocketPing] Failed to send message:", err);
+    }
+  };
+  const handleInputChange = (e) => {
+    const target = e.target;
+    setInputValue(target.value);
+    client2.sendTyping(true);
+  };
+  const position = config.position ?? "bottom-right";
+  const theme = getTheme(config.theme ?? "auto");
+  const primaryColor = config.primaryColor ?? "#6366f1";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: styles(primaryColor, theme) }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        class: `pp-toggle pp-${position}`,
+        onClick: () => client2.toggleOpen(),
+        "aria-label": isOpen ? "Close chat" : "Open chat",
+        children: [
+          isOpen ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(ChatIcon, {}),
+          !isOpen && operatorOnline && /* @__PURE__ */ jsx("span", { class: "pp-online-dot" })
+        ]
+      }
+    ),
+    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 }) })
+              ] })
+            ]
+          },
+          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://github.com/pocketping/pocketping", target: "_blank", rel: "noopener", children: "PocketPing" })
+      ] })
+    ] })
+  ] });
+}
+function checkPageVisibility(config) {
+  const path = window.location.pathname;
+  if (config.hideOnPages?.some((pattern) => new RegExp(pattern).test(path))) {
+    return false;
+  }
+  if (config.showOnPages?.length) {
+    return config.showOnPages.some((pattern) => new RegExp(pattern).test(path));
+  }
+  return true;
+}
+function getTheme(theme) {
+  if (theme === "auto") {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  return theme;
+}
+function formatTime(timestamp) {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+function ChatIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
+    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] });
+}
+function SendIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", children: [
+    /* @__PURE__ */ jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+    /* @__PURE__ */ jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+  ] });
+}
+function StatusIcon({ status }) {
+  if (!status || status === "sending" || status === "sent") {
+    return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2", class: "pp-check", children: /* @__PURE__ */ jsx("polyline", { points: "3 8 7 12 13 4" }) });
+  }
+  if (status === "delivered") {
+    return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 16", fill: "none", stroke: "currentColor", "stroke-width": "2", class: "pp-check-double", children: [
+      /* @__PURE__ */ jsx("polyline", { points: "1 8 5 12 11 4" }),
+      /* @__PURE__ */ jsx("polyline", { points: "7 8 11 12 17 4" })
+    ] });
+  }
+  if (status === "read") {
+    return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 16", fill: "none", stroke: "currentColor", "stroke-width": "2", class: "pp-check-double pp-check-read", children: [
+      /* @__PURE__ */ jsx("polyline", { points: "1 8 5 12 11 4" }),
+      /* @__PURE__ */ jsx("polyline", { points: "7 8 11 12 17 4" })
+    ] });
+  }
+  return null;
+}
+
+// src/client.ts
+var PocketPingClient = class {
+  constructor(config) {
+    this.session = null;
+    this.ws = null;
+    this.isOpen = false;
+    this.listeners = /* @__PURE__ */ new Map();
+    this.reconnectAttempts = 0;
+    this.maxReconnectAttempts = 5;
+    this.reconnectTimeout = null;
+    this.config = config;
+  }
+  // ─────────────────────────────────────────────────────────────────
+  // Public API
+  // ─────────────────────────────────────────────────────────────────
+  async connect() {
+    const visitorId = this.getOrCreateVisitorId();
+    const storedSessionId = this.getStoredSessionId();
+    const response = await this.fetch("/connect", {
+      method: "POST",
+      body: JSON.stringify({
+        visitorId,
+        sessionId: storedSessionId,
+        metadata: {
+          url: window.location.href,
+          referrer: document.referrer || void 0,
+          pageTitle: document.title || void 0,
+          userAgent: navigator.userAgent,
+          timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+          language: navigator.language,
+          screenResolution: `${window.screen.width}x${window.screen.height}`
+        }
+      })
+    });
+    this.session = {
+      sessionId: response.sessionId,
+      visitorId: response.visitorId,
+      operatorOnline: response.operatorOnline ?? false,
+      messages: response.messages ?? []
+    };
+    this.storeSessionId(response.sessionId);
+    this.connectWebSocket();
+    this.emit("connect", this.session);
+    this.config.onConnect?.(response.sessionId);
+    return this.session;
+  }
+  disconnect() {
+    this.ws?.close();
+    this.ws = null;
+    this.session = null;
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout);
+    }
+  }
+  async sendMessage(content) {
+    if (!this.session) {
+      throw new Error("Not connected");
+    }
+    const tempId = `temp-${this.generateId()}`;
+    const tempMessage = {
+      id: tempId,
+      sessionId: this.session.sessionId,
+      content,
+      sender: "visitor",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      status: "sending"
+    };
+    this.session.messages.push(tempMessage);
+    this.emit("message", tempMessage);
+    try {
+      const response = await this.fetch("/message", {
+        method: "POST",
+        body: JSON.stringify({
+          sessionId: this.session.sessionId,
+          content,
+          sender: "visitor"
+        })
+      });
+      const messageIndex = this.session.messages.findIndex((m) => m.id === tempId);
+      if (messageIndex >= 0) {
+        this.session.messages[messageIndex].id = response.messageId;
+        this.session.messages[messageIndex].timestamp = response.timestamp;
+        this.session.messages[messageIndex].status = "sent";
+        this.emit("message", this.session.messages[messageIndex]);
+      }
+      const message = this.session.messages[messageIndex] || {
+        id: response.messageId,
+        sessionId: this.session.sessionId,
+        content,
+        sender: "visitor",
+        timestamp: response.timestamp,
+        status: "sent"
+      };
+      this.config.onMessage?.(message);
+      return message;
+    } catch (error) {
+      const messageIndex = this.session.messages.findIndex((m) => m.id === tempId);
+      if (messageIndex >= 0) {
+        this.session.messages.splice(messageIndex, 1);
+        this.emit("message", tempMessage);
+      }
+      throw error;
+    }
+  }
+  async fetchMessages(after) {
+    if (!this.session) {
+      throw new Error("Not connected");
+    }
+    const params = new URLSearchParams({
+      sessionId: this.session.sessionId
+    });
+    if (after) {
+      params.set("after", after);
+    }
+    const response = await this.fetch(
+      `/messages?${params}`,
+      { method: "GET" }
+    );
+    return response.messages;
+  }
+  async sendTyping(isTyping = true) {
+    if (!this.session) return;
+    await this.fetch("/typing", {
+      method: "POST",
+      body: JSON.stringify({
+        sessionId: this.session.sessionId,
+        sender: "visitor",
+        isTyping
+      })
+    });
+  }
+  async sendReadStatus(messageIds, status) {
+    if (!this.session || messageIds.length === 0) return;
+    try {
+      await this.fetch("/read", {
+        method: "POST",
+        body: JSON.stringify({
+          sessionId: this.session.sessionId,
+          messageIds,
+          status
+        })
+      });
+      for (const msg of this.session.messages) {
+        if (messageIds.includes(msg.id)) {
+          msg.status = status;
+          if (status === "delivered") {
+            msg.deliveredAt = (/* @__PURE__ */ new Date()).toISOString();
+          } else if (status === "read") {
+            msg.readAt = (/* @__PURE__ */ new Date()).toISOString();
+          }
+        }
+      }
+      this.emit("readStatusSent", { messageIds, status });
+    } catch (err) {
+      console.error("[PocketPing] Failed to send read status:", err);
+    }
+  }
+  async getPresence() {
+    return this.fetch("/presence", { method: "GET" });
+  }
+  // ─────────────────────────────────────────────────────────────────
+  // State
+  // ─────────────────────────────────────────────────────────────────
+  getSession() {
+    return this.session;
+  }
+  getMessages() {
+    return this.session?.messages ?? [];
+  }
+  isConnected() {
+    return this.session !== null;
+  }
+  isWidgetOpen() {
+    return this.isOpen;
+  }
+  setOpen(open2) {
+    this.isOpen = open2;
+    this.emit("openChange", open2);
+    if (open2) {
+      this.config.onOpen?.();
+    } else {
+      this.config.onClose?.();
+    }
+  }
+  toggleOpen() {
+    this.setOpen(!this.isOpen);
+  }
+  // ─────────────────────────────────────────────────────────────────
+  // Events
+  // ─────────────────────────────────────────────────────────────────
+  on(event, listener) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this.listeners.get(event).add(listener);
+    return () => {
+      this.listeners.get(event)?.delete(listener);
+    };
+  }
+  emit(event, data) {
+    this.listeners.get(event)?.forEach((listener) => listener(data));
+  }
+  // ─────────────────────────────────────────────────────────────────
+  // WebSocket
+  // ─────────────────────────────────────────────────────────────────
+  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.ws.onopen = () => {
+        this.reconnectAttempts = 0;
+        this.emit("wsConnected", null);
+      };
+      this.ws.onmessage = (event) => {
+        try {
+          const wsEvent = JSON.parse(event.data);
+          this.handleWebSocketEvent(wsEvent);
+        } catch (err) {
+          console.error("[PocketPing] Failed to parse WS message:", err);
+        }
+      };
+      this.ws.onclose = () => {
+        this.emit("wsDisconnected", null);
+        this.scheduleReconnect();
+      };
+      this.ws.onerror = (err) => {
+        console.error("[PocketPing] WebSocket error:", err);
+      };
+    } catch (err) {
+      console.warn("[PocketPing] WebSocket unavailable, using polling");
+      this.startPolling();
+    }
+  }
+  handleWebSocketEvent(event) {
+    switch (event.type) {
+      case "message":
+        const message = event.data;
+        if (this.session) {
+          let existingIndex = this.session.messages.findIndex((m) => m.id === message.id);
+          if (existingIndex < 0 && message.sender === "visitor") {
+            existingIndex = this.session.messages.findIndex(
+              (m) => m.id.startsWith("temp-") && m.content === message.content && m.sender === "visitor"
+            );
+            if (existingIndex >= 0) {
+              this.session.messages[existingIndex].id = message.id;
+            }
+          }
+          if (existingIndex < 0 && message.sender !== "visitor") {
+            const msgTime = new Date(message.timestamp).getTime();
+            existingIndex = this.session.messages.findIndex(
+              (m) => m.sender === message.sender && m.content === message.content && Math.abs(new Date(m.timestamp).getTime() - msgTime) < 2e3
+            );
+          }
+          if (existingIndex >= 0) {
+            const existing = this.session.messages[existingIndex];
+            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;
+              this.emit("read", { messageIds: [message.id], status: message.status });
+            }
+          } else {
+            this.session.messages.push(message);
+            this.emit("message", message);
+            this.config.onMessage?.(message);
+          }
+        }
+        if (message.sender !== "visitor") {
+          this.emit("typing", { isTyping: false });
+        }
+        break;
+      case "typing":
+        const typingData = event.data;
+        if (typingData.sender !== "visitor") {
+          this.emit("typing", { isTyping: typingData.isTyping });
+        }
+        break;
+      case "presence":
+        if (this.session) {
+          this.session.operatorOnline = event.data.online;
+        }
+        this.emit("presence", event.data);
+        break;
+      case "ai_takeover":
+        this.emit("aiTakeover", event.data);
+        break;
+      case "read":
+        const readData = event.data;
+        if (this.session) {
+          for (const msg of this.session.messages) {
+            if (readData.messageIds.includes(msg.id)) {
+              msg.status = readData.status;
+              if (readData.deliveredAt) msg.deliveredAt = readData.deliveredAt;
+              if (readData.readAt) msg.readAt = readData.readAt;
+            }
+          }
+        }
+        this.emit("read", readData);
+        break;
+    }
+  }
+  scheduleReconnect() {
+    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+      console.warn("[PocketPing] Max reconnect attempts reached, switching to polling");
+      this.startPolling();
+      return;
+    }
+    const delay = Math.min(1e3 * Math.pow(2, this.reconnectAttempts), 3e4);
+    this.reconnectAttempts++;
+    this.reconnectTimeout = setTimeout(() => {
+      this.connectWebSocket();
+    }, delay);
+  }
+  startPolling() {
+    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);
+        for (const message of newMessages) {
+          if (!this.session.messages.find((m) => m.id === message.id)) {
+            this.session.messages.push(message);
+            this.emit("message", message);
+            this.config.onMessage?.(message);
+          }
+        }
+      } catch (err) {
+        console.error("[PocketPing] Polling error:", err);
+      }
+      if (this.session) {
+        setTimeout(poll, 3e3);
+      }
+    };
+    poll();
+  }
+  // ─────────────────────────────────────────────────────────────────
+  // HTTP
+  // ─────────────────────────────────────────────────────────────────
+  async fetch(path, options) {
+    const url = this.config.endpoint.replace(/\/$/, "") + path;
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        "Content-Type": "application/json",
+        ...options.headers
+      }
+    });
+    if (!response.ok) {
+      const error = await response.text();
+      throw new Error(`PocketPing API error: ${response.status} ${error}`);
+    }
+    return response.json();
+  }
+  // ─────────────────────────────────────────────────────────────────
+  // Storage
+  // ─────────────────────────────────────────────────────────────────
+  getOrCreateVisitorId() {
+    const key = "pocketping_visitor_id";
+    let visitorId = localStorage.getItem(key);
+    if (!visitorId) {
+      visitorId = this.generateId();
+      localStorage.setItem(key, visitorId);
+    }
+    return visitorId;
+  }
+  getStoredSessionId() {
+    return localStorage.getItem("pocketping_session_id");
+  }
+  storeSessionId(sessionId) {
+    localStorage.setItem("pocketping_session_id", sessionId);
+  }
+  generateId() {
+    return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 11)}`;
+  }
+};
+
+// src/index.ts
+var client = null;
+var container = null;
+function init(config) {
+  if (client) {
+    console.warn("[PocketPing] Already initialized");
+    return client;
+  }
+  if (!config.endpoint) {
+    throw new Error("[PocketPing] endpoint is required");
+  }
+  client = new PocketPingClient(config);
+  container = document.createElement("div");
+  container.id = "pocketping-container";
+  document.body.appendChild(container);
+  render(h2(ChatWidget, { client, config }), container);
+  client.connect().catch((err) => {
+    console.error("[PocketPing] Failed to connect:", err);
+  });
+  return client;
+}
+function destroy() {
+  if (container) {
+    render(null, container);
+    container.remove();
+    container = null;
+  }
+  if (client) {
+    client.disconnect();
+    client = null;
+  }
+}
+function open() {
+  client?.setOpen(true);
+}
+function close() {
+  client?.setOpen(false);
+}
+function toggle() {
+  client?.toggleOpen();
+}
+function sendMessage(content) {
+  if (!client) {
+    throw new Error("[PocketPing] Not initialized");
+  }
+  return client.sendMessage(content);
+}
+if (typeof document !== "undefined") {
+  const script = document.currentScript;
+  if (script?.dataset.endpoint) {
+    init({
+      endpoint: script.dataset.endpoint,
+      theme: script.dataset.theme || "auto",
+      position: script.dataset.position || "bottom-right"
+    });
+  }
+}
+var index_default = { init, destroy, open, close, toggle, sendMessage };
+export {
+  close,
+  index_default as default,
+  destroy,
+  init,
+  open,
+  sendMessage,
+  toggle
+};