@spacinbox/sdk 2.0.0

package/dist/index.cjs

@@ -0,0 +1,1494 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/widget/state.ts
+var import_signals, appId, visitorId, sessionToken, tokenExpiresAt, isOpen, currentUser, metadata, isOnline, isSetup, refetchSessionCounter;
+var init_state = __esm({
+  "src/widget/state.ts"() {
+    "use strict";
+    import_signals = require("@preact/signals");
+    appId = (0, import_signals.signal)(null);
+    visitorId = (0, import_signals.signal)(null);
+    sessionToken = (0, import_signals.signal)(null);
+    tokenExpiresAt = (0, import_signals.signal)(null);
+    isOpen = (0, import_signals.signal)(false);
+    currentUser = (0, import_signals.signal)(null);
+    metadata = (0, import_signals.signal)({});
+    isOnline = (0, import_signals.signal)(true);
+    isSetup = (0, import_signals.signal)(false);
+    refetchSessionCounter = (0, import_signals.signal)(0);
+  }
+});
+
+// src/widget/modules/api/mock.ts
+function scheduleAutoClose(conversationId) {
+  const existing = autoCloseTimers.get(conversationId);
+  if (existing) clearTimeout(existing);
+  const timer = setTimeout(() => {
+    const conv = CONVERSATIONS.find((c) => c.id === conversationId);
+    if (conv) conv.status = "CLOSED";
+    autoCloseTimers.delete(conversationId);
+  }, 8e3);
+  autoCloseTimers.set(conversationId, timer);
+}
+var AGENTS, CONVERSATIONS, MESSAGES, autoCloseTimers, delay, mockService;
+var init_mock = __esm({
+  "src/widget/modules/api/mock.ts"() {
+    "use strict";
+    AGENTS = [
+      { id: "agent-1", name: "Alice Martin", picture: void 0 },
+      { id: "agent-2", name: "Bob Chen", picture: void 0 }
+    ];
+    CONVERSATIONS = [
+      {
+        id: "conv-1",
+        agentId: AGENTS[1].id,
+        agent: AGENTS[1],
+        status: "OPEN",
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        unread_contact_count: 0
+      },
+      {
+        id: "conv-2",
+        agentId: AGENTS[0].id,
+        agent: AGENTS[0],
+        status: "OPEN",
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        unread_contact_count: 0
+      },
+      {
+        id: "conv-3",
+        agentId: AGENTS[1].id,
+        agent: AGENTS[1],
+        status: "OPEN",
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        unread_contact_count: 0
+      },
+      {
+        id: "conv-4",
+        agentId: AGENTS[0].id,
+        agent: AGENTS[0],
+        status: "OPEN",
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        unread_contact_count: 0
+      }
+    ];
+    MESSAGES = [];
+    autoCloseTimers = /* @__PURE__ */ new Map();
+    delay = (ms = 300) => new Promise((res) => setTimeout(res, ms));
+    mockService = {
+      async createSession(_dto) {
+        await delay();
+        return {
+          access_token: `mock-token-${Date.now()}`,
+          token_type: "Bearer",
+          expires_in: 3600,
+          visitor_id: _dto.visitorId
+        };
+      },
+      async getSession() {
+        return { count_notifications: 1 };
+      },
+      async identifyVisitor(_dto) {
+        await delay();
+        return { visitor_id: null, access_token: null };
+      },
+      async getAgents() {
+        await delay();
+        return AGENTS;
+      },
+      async getConversation(conversationId) {
+        await delay();
+        const conv = CONVERSATIONS.find((c) => c.id === conversationId);
+        if (!conv) throw new Error(`Conversation ${conversationId} not found`);
+        return conv;
+      },
+      async reopenConversation(conversationId) {
+        await delay();
+        const conv = CONVERSATIONS.find((c) => c.id === conversationId);
+        if (conv) conv.status = "OPEN";
+      },
+      async getConversationSocketToken(conversationId) {
+        await delay();
+        return { access_token: `mock-conv-socket-token-${conversationId}-${Date.now()}` };
+      },
+      async createConversation(dto) {
+        await delay();
+        const conversation = {
+          id: `conv-${Date.now()}`,
+          agentId: dto.agentId,
+          status: "OPEN",
+          createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+          messages: [],
+          unread_contact_count: 0
+        };
+        if (dto.text) {
+          const message = {
+            id: `msg-${Date.now()}`,
+            sender: "user",
+            text: dto.text,
+            createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+            conversationId: conversation.id
+          };
+          conversation.messages?.push(message);
+          scheduleAutoClose(conversation.id);
+        }
+        CONVERSATIONS.push(conversation);
+        return conversation;
+      },
+      async getConversations() {
+        await delay();
+        return CONVERSATIONS.map((conv) => {
+          const all = [
+            ...conv.messages ?? [],
+            ...MESSAGES.filter((m) => m.conversationId === conv.id)
+          ];
+          const lastMessage = all.sort(
+            (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+          )[0];
+          return { ...conv, lastMessage };
+        });
+      },
+      async getMessages(conversationId, _params) {
+        await delay();
+        const messages = MESSAGES.filter((m) => m.conversationId === conversationId);
+        return { messages, hasMore: false, nextCursor: null };
+      },
+      async sendMessage(conversationId, dto) {
+        await delay();
+        const message = {
+          id: `msg-${Date.now()}`,
+          conversationId,
+          text: dto.text,
+          sender: "user",
+          createdAt: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        MESSAGES.push(message);
+        scheduleAutoClose(conversationId);
+        return message;
+      }
+    };
+  }
+});
+
+// src/widget/modules/visitor/service.ts
+var service_exports = {};
+__export(service_exports, {
+  VisitorService: () => VisitorService
+});
+var STORAGE_KEY, REFRESH_THRESHOLD_MS, VisitorService;
+var init_service = __esm({
+  "src/widget/modules/visitor/service.ts"() {
+    "use strict";
+    init_state();
+    init_service2();
+    STORAGE_KEY = "spacinbox_vid";
+    REFRESH_THRESHOLD_MS = 6e4;
+    VisitorService = {
+      async init() {
+        let id = localStorage.getItem(STORAGE_KEY);
+        if (!id) {
+          id = crypto.randomUUID();
+          localStorage.setItem(STORAGE_KEY, id);
+        }
+        visitorId.value = id;
+        await this.refreshSession(id);
+        isSetup.value = true;
+      },
+      async refreshSession(visitor_id = visitorId.value) {
+        if (!visitor_id) {
+          return;
+        }
+        try {
+          const response = await ApiService.createSession({ visitorId: visitor_id });
+          sessionToken.value = response.access_token;
+          visitorId.value = response.visitor_id;
+          localStorage.setItem(STORAGE_KEY, response.visitor_id);
+          tokenExpiresAt.value = Date.now() + response.expires_in * 1e3;
+        } catch (err) {
+          isOnline.value = false;
+          throw err;
+        }
+      },
+      isTokenExpiringSoon() {
+        if (!tokenExpiresAt.value) return true;
+        return tokenExpiresAt.value - Date.now() < REFRESH_THRESHOLD_MS;
+      },
+      identify(user) {
+        ApiService.identifyVisitor({
+          externalId: user.userId,
+          name: user.name,
+          email: user.email
+        }).then(({ visitor_id, access_token }) => {
+          if (access_token) {
+            sessionToken.value = access_token;
+          }
+          if (visitor_id && visitor_id !== visitorId.value) {
+            visitorId.value = visitor_id;
+            localStorage.setItem(STORAGE_KEY, visitor_id);
+          }
+        });
+      },
+      clear() {
+        localStorage.removeItem(STORAGE_KEY);
+        visitorId.value = null;
+        sessionToken.value = null;
+        tokenExpiresAt.value = null;
+        isSetup.value = false;
+      }
+    };
+  }
+});
+
+// src/widget/modules/api/service.ts
+async function doFetch(method, path, body) {
+  if (!appId.value) throw new Error("Spacinbox: boot() must be called before any API request");
+  const headers = {
+    "Content-Type": "application/json",
+    "x-app-id": appId.value,
+    "x-visitor-id": visitorId.value ?? ""
+  };
+  if (sessionToken.value) {
+    headers["Authorization"] = `Bearer ${sessionToken.value}`;
+  }
+  return fetch(`${BASE_URL}/widget${path}`, {
+    method,
+    headers,
+    body: body ? JSON.stringify(body) : void 0
+  });
+}
+async function request(method, path, body) {
+  if (path !== "/sessions") {
+    const { VisitorService: VisitorService2 } = await Promise.resolve().then(() => (init_service(), service_exports));
+    if (VisitorService2.isTokenExpiringSoon()) {
+      await VisitorService2.refreshSession();
+    }
+  }
+  let res = await doFetch(method, path, body);
+  if (res.status === 401 && path !== "/sessions") {
+    const { VisitorService: VisitorService2 } = await Promise.resolve().then(() => (init_service(), service_exports));
+    await VisitorService2.refreshSession();
+    res = await doFetch(method, path, body);
+  }
+  if (!res.ok) throw new Error(`[Spacinbox] ${method} ${path} failed with status ${res.status}`);
+  return res.json();
+}
+var BASE_URL, IS_MOCKED, ApiService;
+var init_service2 = __esm({
+  "src/widget/modules/api/service.ts"() {
+    "use strict";
+    init_state();
+    init_mock();
+    BASE_URL = "https://api.spacinbox.com";
+    IS_MOCKED = false;
+    ApiService = IS_MOCKED ? mockService : {
+      createSession(dto) {
+        return request("POST", "/sessions", dto);
+      },
+      getSession() {
+        return request("GET", "/sessions");
+      },
+      identifyVisitor(dto) {
+        return request("POST", "/visitors/identify", dto);
+      },
+      getAgents() {
+        return request("GET", "/agents");
+      },
+      getConversations() {
+        return request("GET", "/conversations");
+      },
+      createConversation(dto) {
+        return request("POST", "/conversations", dto);
+      },
+      getConversation(conversationId) {
+        return request("GET", `/conversations/${conversationId}`);
+      },
+      reopenConversation(conversationId) {
+        return request("POST", `/conversations/${conversationId}/reopen`);
+      },
+      getConversationSocketToken(conversationId) {
+        return request("GET", `/conversations/${conversationId}/token`);
+      },
+      getMessages(conversationId, params) {
+        const qs = new URLSearchParams();
+        if (params?.before) qs.set("before", params.before);
+        if (params?.limit) qs.set("limit", String(params.limit));
+        const query = qs.toString();
+        return request(
+          "GET",
+          `/conversations/${conversationId}/messages${query ? `?${query}` : ""}`
+        );
+      },
+      sendMessage(conversationId, dto) {
+        return request("POST", `/conversations/${conversationId}/messages`, dto);
+      }
+    };
+  }
+});
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/widget/mount.tsx
+var import_preact2 = require("preact");
+
+// src/widget/Widget.tsx
+var import_lucide_preact6 = require("lucide-preact");
+var import_hooks12 = require("preact/hooks");
+
+// src/widget/components/Layout.tsx
+init_state();
+
+// src/widget/ui/Loader.tsx
+var import_lucide_preact = require("lucide-preact");
+var import_jsx_runtime = require("preact/jsx-runtime");
+var Loader = ({ size = 20, class: cls }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_preact.Loader2, { size, class: `animate-spin text-inherit ${cls ?? ""}` });
+
+// src/widget/components/Layout.tsx
+var import_jsx_runtime2 = require("preact/jsx-runtime");
+var Layout = ({ isOpen: isOpen2, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      class: `fixed bottom-20 right-4 w-80 h-112 bg-white rounded-xl shadow-2xl border border-gray-200 flex flex-col overflow-hidden ${!isOpen2 && "hidden"}`,
+      children: [
+        !isOnline.value && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { class: "bg-amber-50 border-b border-amber-200 px-3 py-2 text-xs text-amber-700 text-center", children: [
+          "Connecting... ",
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loader, {})
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { class: "flex-1 overflow-y-auto", children })
+      ]
+    }
+  );
+};
+
+// src/widget/hooks/useNewMessage.tsx
+var import_hooks = require("preact/hooks");
+
+// src/widget/modules/socket/service.ts
+var import_signals2 = require("@preact/signals");
+var import_socket = require("socket.io-client");
+init_state();
+init_service2();
+init_service();
+var socket = (0, import_signals2.signal)(null);
+var SocketService = {
+  async connect() {
+    const token = sessionToken.value;
+    socket.value = (0, import_socket.io)("https://ws.spacinbox.com", {
+      auth: { token },
+      reconnection: true
+    });
+    socket.value.on("connect", () => {
+      isOnline.value = true;
+    });
+    socket.value.on("disconnect", (reason) => {
+      if (reason !== "io client disconnect") {
+        isOnline.value = false;
+      }
+    });
+    socket.value.on("connect_error", async (err) => {
+      if (err.message === "Missing token" || err.message === "Invalid token") {
+        await VisitorService.refreshSession();
+        if (socket.value) {
+          socket.value.auth = { token: sessionToken.value };
+          socket.value.connect();
+        }
+      } else {
+        isOnline.value = false;
+      }
+    });
+  },
+  async joinRoom(conversationId) {
+    if (!socket.value) {
+      return;
+    }
+    const { access_token: token } = await ApiService.getConversationSocketToken(conversationId);
+    return new Promise((resolve, reject) => {
+      socket.value.emit("join-room", { token }, (response) => {
+        if (!response?.ok) {
+          reject(new Error());
+        } else {
+          resolve();
+        }
+      });
+    });
+  },
+  leaveRoom(conversationId) {
+    socket.value?.emit("leave-room", { room_id: `conversation:${conversationId}` });
+  },
+  typingStart(conversationId) {
+    socket.value?.emit("typing-start", { room_id: `conversation:${conversationId}` });
+  },
+  typingStop(conversationId) {
+    socket.value?.emit("typing-stop", { room_id: `conversation:${conversationId}` });
+  },
+  on(event, handler) {
+    socket.value?.on(event, handler);
+  },
+  off(event, handler) {
+    socket.value?.off(event, handler);
+  },
+  disconnect() {
+    socket.value?.disconnect();
+    socket.value = null;
+  }
+};
+
+// src/widget/hooks/useNewMessage.tsx
+var useOnNewMessage = (handler) => {
+  (0, import_hooks.useEffect)(() => {
+    if (!socket.value) {
+      return;
+    }
+    SocketService.on("new-message", () => handler());
+    return () => {
+      SocketService.off("new-message", () => handler());
+    };
+  }, [socket.value]);
+};
+
+// src/widget/hooks/useQuery.ts
+var import_hooks2 = require("preact/hooks");
+var cache = /* @__PURE__ */ new Map();
+var invalidateQuery = (queryKey) => cache.delete(serializeKey(queryKey));
+function serializeKey(key) {
+  return typeof key === "string" ? key : JSON.stringify(key);
+}
+function useQuery({ queryKey, queryFn, enabled = true, cache: useCache = true, onSuccess, onError, onSettled }) {
+  const key = serializeKey(queryKey);
+  const cached = useCache ? cache.get(key) : void 0;
+  const [refetchCounter, setRefetchCounter] = (0, import_hooks2.useState)(0);
+  const [state, setState] = (0, import_hooks2.useState)(
+    cached !== void 0 ? { data: cached, loading: false, error: null, isSuccess: true, isFetched: true } : { data: null, loading: enabled, error: null, isSuccess: false, isFetched: false }
+  );
+  (0, import_hooks2.useEffect)(() => {
+    if (!enabled) return;
+    let cancelled = false;
+    const isRefetch = refetchCounter > 0;
+    if (cached === void 0 || isRefetch) {
+      setState((s) => ({ ...s, loading: true, error: null, isSuccess: false }));
+    }
+    queryFn().then((data) => {
+      if (cancelled) return;
+      if (useCache) cache.set(key, data);
+      setState({ data, loading: false, error: null, isSuccess: true, isFetched: true });
+      onSuccess?.(data);
+      onSettled?.(data, null);
+    }).catch((error) => {
+      if (cancelled) return;
+      setState((s) => ({ ...s, loading: false, error, isSuccess: false, isFetched: true }));
+      onError?.(error);
+      onSettled?.(null, error);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [key, enabled, refetchCounter]);
+  const refetch = (0, import_hooks2.useCallback)(() => setRefetchCounter((c) => c + 1), []);
+  return { ...state, refetch };
+}
+
+// src/widget/Widget.tsx
+init_service2();
+
+// src/widget/pages/conversation.tsx
+var import_signals4 = require("@preact/signals");
+var import_hooks10 = require("preact/hooks");
+
+// src/widget/hooks/useMessages.ts
+var import_hooks3 = require("preact/hooks");
+init_service2();
+function useMessages(conversationId, limit = 30) {
+  const [state, setState] = (0, import_hooks3.useState)({
+    messages: [],
+    hasMore: false,
+    nextCursor: null,
+    loading: !!conversationId,
+    loadingMore: false
+  });
+  const stateRef = (0, import_hooks3.useRef)(state);
+  stateRef.current = state;
+  (0, import_hooks3.useEffect)(() => {
+    if (!conversationId) return;
+    let cancelled = false;
+    setState({ messages: [], hasMore: false, nextCursor: null, loading: true, loadingMore: false });
+    ApiService.getMessages(conversationId, { limit }).then(({ messages, hasMore, nextCursor }) => {
+      if (cancelled) {
+        return;
+      }
+      setState({ messages, hasMore, nextCursor, loading: false, loadingMore: false });
+    }).catch(() => {
+      if (cancelled) return;
+      setState((s) => ({ ...s, loading: false }));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [conversationId]);
+  const loadMore = (0, import_hooks3.useCallback)(async () => {
+    const { hasMore, nextCursor, loadingMore } = stateRef.current;
+    if (!hasMore || loadingMore || !nextCursor || !conversationId) return;
+    setState((s) => ({ ...s, loadingMore: true }));
+    try {
+      const {
+        messages: older,
+        hasMore: newHasMore,
+        nextCursor: newCursor
+      } = await ApiService.getMessages(conversationId, { before: nextCursor, limit });
+      setState((s) => ({
+        ...s,
+        messages: [...s.messages, ...older],
+        hasMore: newHasMore,
+        nextCursor: newCursor,
+        loadingMore: false
+      }));
+    } catch {
+      setState((s) => ({ ...s, loadingMore: false }));
+    }
+  }, [conversationId]);
+  const append = (0, import_hooks3.useCallback)((message) => {
+    setState((item) => {
+      if (item.messages.some((m) => m.id === message.id)) {
+        return item;
+      }
+      return { ...item, messages: [message, ...item.messages] };
+    });
+  }, []);
+  const replace = (0, import_hooks3.useCallback)((tempId, message) => {
+    setState((s) => ({
+      ...s,
+      messages: s.messages.filter((m) => m.id !== message.id).map((m) => m.id === tempId ? message : m)
+    }));
+  }, []);
+  const remove = (0, import_hooks3.useCallback)((id) => {
+    setState((s) => ({ ...s, messages: s.messages.filter((m) => m.id !== id) }));
+  }, []);
+  return { ...state, loadMore, append, replace, remove };
+}
+
+// src/widget/hooks/useMutation.ts
+var import_hooks4 = require("preact/hooks");
+function useMutation({ mutationFn, onSuccess, onError, onSettled }) {
+  const [state, setState] = (0, import_hooks4.useState)({
+    data: null,
+    loading: false,
+    error: null,
+    isSuccess: false,
+    isFetched: false
+  });
+  const mutate = async (variables) => {
+    setState({ data: null, loading: true, error: null, isSuccess: false, isFetched: false });
+    try {
+      const data = await mutationFn(variables);
+      setState({ data, loading: false, error: null, isSuccess: true, isFetched: true });
+      onSuccess?.(data, variables);
+      onSettled?.(data, null, variables);
+      return data;
+    } catch (error) {
+      const err = error;
+      setState({ data: null, loading: false, error: err, isSuccess: false, isFetched: true });
+      onError?.(err, variables);
+      onSettled?.(null, err, variables);
+    }
+  };
+  return { ...state, mutate };
+}
+
+// src/widget/pages/conversation.tsx
+init_service2();
+
+// src/widget/modules/conversation/components/Header.tsx
+var import_lucide_preact2 = require("lucide-preact");
+
+// src/widget/router.ts
+var import_signals3 = require("@preact/signals");
+var pageStack = (0, import_signals3.signal)([{ page: "home" }]);
+var currentRoute = (0, import_signals3.computed)(() => pageStack.value.at(-1));
+var currentPage = (0, import_signals3.computed)(() => currentRoute.value.page);
+var canGoBack = (0, import_signals3.computed)(() => pageStack.value.length > 1);
+var navigate = (page, params) => {
+  pageStack.value = [...pageStack.value, { page, params }];
+};
+var goBack = () => {
+  if (pageStack.value.length > 1)
+    pageStack.value = pageStack.value.slice(0, -1);
+};
+var resetRouter = () => {
+  pageStack.value = [{ page: "home" }];
+};
+
+// src/widget/ui/Avatar.tsx
+var import_jsx_runtime3 = require("preact/jsx-runtime");
+var sizes = {
+  sm: "w-7 h-7 text-xs",
+  md: "w-9 h-9 text-sm",
+  lg: "w-12 h-12 text-base"
+};
+var Avatar = ({ src, children, size = "md", class: cls }) => {
+  const sizeClass = typeof size === "number" ? "" : sizes[size];
+  const sizeStyle = typeof size === "number" ? { width: `${size}px`, height: `${size}px`, fontSize: `${Math.round(size * 0.4)}px` } : void 0;
+  const base = `inline-flex items-center justify-center rounded-full overflow-hidden shrink-0 bg-blue-100 text-blue-700 font-medium border-2 border-blue-400 ${sizeClass} ${cls ?? ""}`;
+  if (src) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { src, class: `${base} object-cover`, style: sizeStyle, alt: children ?? "" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { class: base, style: sizeStyle, children: children ? children.charAt(0).toUpperCase() : "?" });
+};
+
+// src/widget/ui/Button.tsx
+var import_jsx_runtime4 = require("preact/jsx-runtime");
+var variants = {
+  filled: "bg-blue-600 hover:bg-blue-700 text-white",
+  subtle: "bg-neutral-100 hover:bg-neutral-200 text-neutral-800",
+  light: "bg-transparent hover:text-neutral-800 text-neutral-500",
+  outline: "border border-neutral-200 hover:bg-neutral-50 text-neutral-800"
+};
+var Button = ({ children, onClick, variant = "filled", fullWidth, class: cls }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  "button",
+  {
+    onClick,
+    class: `
+      inline-flex items-center justify-center gap-2
+      px-4 py-2 rounded-lg text-sm font-medium
+      transition-colors cursor-pointer
+      ${variants[variant]}
+      ${fullWidth ? "w-full" : ""}
+      ${cls ?? ""}
+    `,
+    children
+  }
+);
+
+// src/widget/ui/Group.tsx
+var import_jsx_runtime5 = require("preact/jsx-runtime");
+var gaps = {
+  xs: "gap-1",
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6"
+};
+var justifies = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between"
+};
+var aligns = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end"
+};
+var Group = ({ children, gap = "sm", justify = "start", align = "center", class: cls }) => {
+  const gapClass = typeof gap === "number" ? "" : gaps[gap];
+  const gapStyle = typeof gap === "number" ? { gap: `${gap * 4}px` } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { class: `flex flex-row ${gapClass} ${justifies[justify]} ${aligns[align]} ${cls ?? ""}`, style: gapStyle, children });
+};
+
+// src/widget/ui/Indicator.tsx
+var import_jsx_runtime6 = require("preact/jsx-runtime");
+var colors = {
+  default: "bg-blue-500",
+  green: "bg-green-500",
+  red: "bg-red-500"
+};
+var positions = {
+  "top-right": "top-0 right-0 translate-x-1/2 -translate-y-1/2",
+  "bottom-right": "bottom-0 right-0"
+};
+var sizes2 = {
+  sm: { dot: "w-2.5 h-2.5", badge: "h-4 min-w-4 text-[10px]" },
+  md: { dot: "w-3.5 h-3.5", badge: "h-5 min-w-5 text-xs" },
+  lg: { dot: "w-4 h-4", badge: "h-6 min-w-6 text-sm" }
+};
+var Indicator = ({
+  children,
+  active = true,
+  visible = true,
+  color = "default",
+  label,
+  size = "sm",
+  position = "bottom-right",
+  offset
+}) => {
+  const show = active && visible;
+  const offsetStyle = offset ? { transform: `translate(calc(50% + ${offset.x ?? 0}px), calc(-50% + ${offset.y ?? 0}px))` } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { class: "relative inline-flex", children: [
+    children,
+    show && (label !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "span",
+      {
+        style: offsetStyle,
+        class: `absolute ${positions[position]} ${sizes2[size].badge} px-1 ${colors[color]} text-white font-semibold rounded-full flex items-center justify-center`,
+        children: label
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "span",
+      {
+        style: offsetStyle,
+        class: `absolute ${positions[position]} ${sizes2[size].dot} ${colors[color]} border-2 border-white rounded-full`
+      }
+    ))
+  ] });
+};
+
+// src/widget/ui/Text.tsx
+var import_jsx_runtime7 = require("preact/jsx-runtime");
+var sizes3 = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+  xl: "text-xl"
+};
+var weights = {
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold"
+};
+var colors2 = {
+  default: "text-neutral-900",
+  dimmed: "text-neutral-400"
+};
+var Text = ({
+  children,
+  size = "sm",
+  weight = "normal",
+  color = "default",
+  lineClamp,
+  class: cls
+}) => {
+  const clampStyle = lineClamp ? {
+    overflow: "hidden",
+    display: "-webkit-box",
+    WebkitLineClamp: lineClamp,
+    WebkitBoxOrient: "vertical"
+  } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { class: `${sizes3[size]} ${weights[weight]} ${colors2[color]} ${cls ?? ""}`, style: clampStyle, children });
+};
+
+// src/widget/modules/conversation/components/Header.tsx
+var import_jsx_runtime8 = require("preact/jsx-runtime");
+var Header = ({ agent, loading }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Group, { class: "border-b border-neutral-100 p-2", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { variant: "light", onClick: goBack, "aria-label": "Back", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_preact2.ArrowLeft, {}) }),
+  loading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { class: "w-8 h-8 rounded-full bg-neutral-200 animate-pulse shrink-0" }) : agent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Indicator, { color: "green", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Avatar, { size: "sm", src: agent.picture, children: agent.name.charAt(0) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { weight: "medium", children: agent.name })
+  ] }) : null
+] });
+
+// src/widget/modules/conversation/components/InputMessage.tsx
+var import_hooks5 = require("preact/hooks");
+var import_lucide_preact3 = require("lucide-preact");
+var import_jsx_runtime9 = require("preact/jsx-runtime");
+var InputMessage = ({ onSend, onType, disabled }) => {
+  const ref = (0, import_hooks5.useRef)(null);
+  (0, import_hooks5.useEffect)(() => {
+    if (!disabled) ref.current?.focus();
+  }, [disabled]);
+  const resize = () => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  };
+  const submit = () => {
+    const el = ref.current;
+    if (!el || disabled) return;
+    const text = el.value.trim();
+    if (!text) return;
+    onSend(text);
+    el.value = "";
+    el.style.height = "auto";
+  };
+  const onKeyDown = (e) => {
+    if (e.key !== "Enter") return;
+    if (e.metaKey || e.ctrlKey) {
+      e.preventDefault();
+      const el = ref.current;
+      const start = el.selectionStart ?? el.value.length;
+      const end = el.selectionEnd ?? el.value.length;
+      el.value = el.value.slice(0, start) + "\n" + el.value.slice(end);
+      el.selectionStart = el.selectionEnd = start + 1;
+      resize();
+    } else if (!e.shiftKey) {
+      e.preventDefault();
+      submit();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { class: "flex items-end gap-2 px-3 py-3 border-t border-neutral-100", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "textarea",
+      {
+        ref,
+        rows: 1,
+        placeholder: "Write a message...",
+        onInput: () => {
+          resize();
+          onType?.();
+        },
+        onKeyDown,
+        disabled,
+        class: "flex-1 text-sm bg-neutral-100 rounded-2xl px-4 py-2 outline-none placeholder:text-neutral-400 disabled:opacity-50 resize-none overflow-y-auto leading-5",
+        style: { maxHeight: "120px" }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "button",
+      {
+        onClick: submit,
+        disabled,
+        class: "w-8 h-8 flex items-center justify-center bg-blue-600 hover:bg-blue-700 text-white rounded-full transition-colors cursor-pointer shrink-0 disabled:opacity-50 disabled:cursor-not-allowed mb-0.5",
+        "aria-label": "Send",
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_preact3.Send, { size: 14 })
+      }
+    )
+  ] });
+};
+
+// src/widget/modules/conversation/components/MessageList.tsx
+var import_preact = require("preact");
+var import_hooks6 = require("preact/hooks");
+
+// src/widget/modules/conversation/components/DateSeparator.tsx
+var import_jsx_runtime10 = require("preact/jsx-runtime");
+function formatLabel(dateStr) {
+  const date = new Date(dateStr);
+  const today = /* @__PURE__ */ new Date();
+  const yesterday = new Date(today);
+  yesterday.setDate(today.getDate() - 1);
+  const sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+  if (sameDay(date, today)) return "Today";
+  if (sameDay(date, yesterday)) return "Yesterday";
+  return date.toLocaleDateString("en-GB", { weekday: "short", day: "numeric", month: "short" }).replace(",", "");
+}
+var DateSeparator = ({ date }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { class: "flex items-center gap-2 my-3", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { class: "flex-1 h-px bg-neutral-200" }),
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { class: "text-xs text-neutral-400 font-medium px-1", children: formatLabel(date) }),
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { class: "flex-1 h-px bg-neutral-200" })
+] });
+
+// src/widget/modules/conversation/components/MessageBubble.tsx
+var import_jsx_runtime11 = require("preact/jsx-runtime");
+function formatTime(dateStr) {
+  return new Date(dateStr).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+var MessageBubble = ({ message, agent, isFirstInGroup }) => {
+  const isUser = message.sender === "user";
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { class: `flex gap-2 items-end ${isUser ? "flex-row-reverse" : "flex-row"}`, children: [
+    !isUser && (isFirstInGroup ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { class: "w-7 h-7 rounded-full bg-neutral-200 shrink-0 overflow-hidden flex items-center justify-center text-xs font-semibold text-neutral-600 self-end mb-0.5", children: agent?.picture ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("img", { src: agent.picture, alt: agent.name, class: "w-full h-full object-cover" }) : agent?.name?.charAt(0) ?? "?" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { class: "w-7 shrink-0" })),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { class: `flex flex-col gap-0.5 max-w-[72%] ${isUser ? "items-end" : "items-start"}`, children: [
+      !isUser && isFirstInGroup && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { class: "text-xs text-neutral-500 font-semibold px-1", children: agent?.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { class: `relative px-3 pt-2 pb-5 min-w-18 rounded-2xl text-sm leading-snug whitespace-pre-wrap ${isUser ? "bg-blue-600 text-white rounded-br-sm" : "bg-neutral-100 text-neutral-900 rounded-bl-sm"}`, children: [
+        message.text,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { class: `absolute bottom-1.5 right-2.5 text-[10px] leading-none ${isUser ? "text-blue-200" : "text-neutral-400"}`, children: formatTime(message.createdAt) })
+      ] })
+    ] })
+  ] });
+};
+
+// src/widget/modules/conversation/components/MessageList.tsx
+var import_jsx_runtime12 = require("preact/jsx-runtime");
+function isSameDay(a, b) {
+  return new Date(a).toDateString() === new Date(b).toDateString();
+}
+var MessageList = ({
+  messages,
+  agent,
+  scrollKey,
+  hasMore,
+  loadingMore,
+  onLoadMore,
+  isTyping
+}) => {
+  const containerRef = (0, import_hooks6.useRef)(null);
+  (0, import_hooks6.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const onScroll = () => {
+      const canTrigger = Math.abs(container.scrollTop) > container.scrollHeight - container.clientHeight - 100;
+      if (hasMore && !loadingMore && canTrigger) {
+        onLoadMore?.();
+      }
+    };
+    container.addEventListener("scroll", onScroll, { passive: true });
+    return () => container.removeEventListener("scroll", onScroll);
+  }, [hasMore, loadingMore, onLoadMore]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { class: "flex-1 flex flex-col overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ref: containerRef, class: "flex-1 overflow-y-auto flex flex-col-reverse gap-1 px-3 py-4", children: [
+    isTyping && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { class: "flex gap-2 items-end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { class: "w-7 h-7 rounded-full bg-neutral-200 shrink-0 overflow-hidden flex items-center justify-center text-xs font-semibold text-neutral-600 self-end mb-0.5", children: agent?.picture ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("img", { src: agent.picture, alt: agent.name, class: "w-full h-full object-cover" }) : agent?.name?.charAt(0) ?? "?" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { class: "bg-neutral-100 rounded-2xl rounded-bl-sm px-3 py-2.5 flex gap-1 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { class: "w-1.5 h-1.5 rounded-full bg-neutral-400 animate-bounce", style: { animationDelay: "0ms" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { class: "w-1.5 h-1.5 rounded-full bg-neutral-400 animate-bounce", style: { animationDelay: "150ms" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { class: "w-1.5 h-1.5 rounded-full bg-neutral-400 animate-bounce", style: { animationDelay: "300ms" } })
+      ] })
+    ] }),
+    messages.map((msg, i) => {
+      const next = messages[i + 1];
+      const showDate = !next || !isSameDay(next.createdAt, msg.createdAt);
+      const isFirstInGroup = showDate || next?.sender !== msg.sender;
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_preact.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MessageBubble, { message: msg, agent, isFirstInGroup }),
+        showDate && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DateSeparator, { date: msg.createdAt })
+      ] }, msg.id);
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "div",
+      {
+        class: `flex justify-center py-2 border-b border-neutral-100 ${!loadingMore && "opacity-0"}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Loader, { size: 16 })
+      }
+    )
+  ] }) });
+};
+
+// src/widget/modules/conversation/components/ResolvedBanner.tsx
+var import_lucide_preact4 = require("lucide-preact");
+var import_hooks7 = require("preact/hooks");
+
+// src/widget/ui/Stack.tsx
+var import_jsx_runtime13 = require("preact/jsx-runtime");
+var gaps2 = {
+  xs: "gap-1",
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6"
+};
+var aligns2 = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+};
+var justifies2 = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between"
+};
+var Stack = ({ children, gap = "md", align, justify, class: cls }) => {
+  const gapClass = gaps2[gap] ?? `gap-${gap}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { class: `flex flex-col ${gapClass} ${align ? aligns2[align] : ""} ${justify ? justifies2[justify] : ""} ${cls ?? ""}`, children });
+};
+
+// src/widget/modules/conversation/components/ResolvedBanner.tsx
+var import_jsx_runtime14 = require("preact/jsx-runtime");
+var ResolvedBanner = ({ onYes, onNo }) => {
+  const [thanked, setThanked] = (0, import_hooks7.useState)(false);
+  (0, import_hooks7.useEffect)(() => {
+    if (!thanked) return;
+    const timer = setTimeout(onYes, 3e3);
+    return () => clearTimeout(timer);
+  }, [thanked]);
+  if (thanked) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Stack, { class: "border-t border-neutral-100 p-4 min-h-[175px]", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_preact4.CheckCircle, { size: 20, class: "text-green-500" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { size: "sm", weight: "semibold", children: "Glad we could help" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { size: "sm", color: "dimmed", children: "See you next time" })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Stack, { class: "border-t border-neutral-100 p-4 min-h-[175px]", align: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_preact4.CheckCircle, { size: 20, class: "text-green-500" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Stack, { gap: 0, align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { size: "sm", children: "This conversation has been resolved" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { size: "sm", color: "dimmed", children: "Did we answer your question?" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Group, { class: "w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { class: "flex-1", variant: "outline", fullWidth: true, onClick: onNo, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Stack, { gap: 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { children: "No" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { size: "xs", color: "dimmed", children: "I need more help" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { class: "flex-1", onClick: () => setThanked(true), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Stack, { gap: 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { class: "text-white", weight: "semibold", children: "Yes" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { size: "xs", class: "text-white", children: "Thanks" })
+      ] }) })
+    ] })
+  ] });
+};
+
+// src/widget/modules/socket/useOnTyping.ts
+var import_hooks8 = require("preact/hooks");
+var TYPING_TIMEOUT_MS = 1e4;
+var useOnTyping = ({ room_id }) => {
+  const [isTyping, setIsTyping] = (0, import_hooks8.useState)(false);
+  const stopTimerRef = (0, import_hooks8.useRef)(null);
+  const clearStopTimer = () => {
+    if (stopTimerRef.current) {
+      clearTimeout(stopTimerRef.current);
+      stopTimerRef.current = null;
+    }
+  };
+  const stopTyping = () => {
+    clearStopTimer();
+    setIsTyping(false);
+  };
+  (0, import_hooks8.useEffect)(() => {
+    if (!socket.value) {
+      return;
+    }
+    const handlerStart = (payload) => {
+      const canSkip = room_id && !payload.room_id.includes(room_id);
+      if (canSkip) {
+        return;
+      }
+      setIsTyping(true);
+      clearStopTimer();
+      stopTimerRef.current = setTimeout(stopTyping, TYPING_TIMEOUT_MS);
+    };
+    const handlerStop = (payload) => {
+      const canSkip = room_id && !payload.room_id.includes(room_id);
+      if (canSkip) {
+        return;
+      }
+      stopTyping();
+    };
+    socket.value.on("typing-start", handlerStart);
+    socket.value.on("typing-stop", handlerStop);
+    return () => {
+      socket.value?.off("typing-start", handlerStart);
+      socket.value?.off("typing-stop", handlerStop);
+      clearStopTimer();
+    };
+  }, [room_id, socket]);
+  return { isTyping };
+};
+
+// src/widget/modules/socket/useTyping.ts
+var import_hooks9 = require("preact/hooks");
+var TYPING_START_DELAY_MS = 3e3;
+var TYPING_HEARTBEAT_MS = 5e3;
+var TYPING_STOP_DELAY_MS = 5e3;
+var useTyping = ({ room_id }) => {
+  const startTimerRef = (0, import_hooks9.useRef)(null);
+  const stopTimerRef = (0, import_hooks9.useRef)(null);
+  const lastEmitRef = (0, import_hooks9.useRef)(0);
+  const onType = () => {
+    if (!socket.value) {
+      return;
+    }
+    const now = Date.now();
+    if (lastEmitRef.current > 0 && now - lastEmitRef.current >= TYPING_HEARTBEAT_MS) {
+      SocketService.typingStart(room_id);
+      lastEmitRef.current = now;
+    }
+    if (lastEmitRef.current === 0 && !startTimerRef.current) {
+      startTimerRef.current = setTimeout(() => {
+        SocketService.typingStart(room_id);
+        lastEmitRef.current = Date.now();
+        startTimerRef.current = null;
+      }, TYPING_START_DELAY_MS);
+    }
+    if (stopTimerRef.current) {
+      clearTimeout(stopTimerRef.current);
+    }
+    stopTimerRef.current = setTimeout(() => {
+      if (startTimerRef.current) {
+        clearTimeout(startTimerRef.current);
+        startTimerRef.current = null;
+      }
+      if (lastEmitRef.current > 0) {
+        SocketService.typingStop(room_id);
+        lastEmitRef.current = 0;
+      }
+      stopTimerRef.current = null;
+    }, TYPING_STOP_DELAY_MS);
+  };
+  const stopTyping = () => {
+    if (startTimerRef.current) {
+      clearTimeout(startTimerRef.current);
+      startTimerRef.current = null;
+    }
+    if (stopTimerRef.current) {
+      clearTimeout(stopTimerRef.current);
+      stopTimerRef.current = null;
+    }
+    if (lastEmitRef.current > 0) {
+      SocketService.typingStop(room_id);
+      lastEmitRef.current = 0;
+    }
+  };
+  return { onType, stopTyping };
+};
+
+// src/widget/pages/conversation.tsx
+init_state();
+var import_jsx_runtime15 = require("preact/jsx-runtime");
+var Conversation = (props) => {
+  const conversationId = (0, import_signals4.useSignal)(props.conversationId);
+  const isCreating = (0, import_signals4.useSignal)(false);
+  const agentsQuery = useQuery({
+    queryKey: ["agents"],
+    queryFn: () => ApiService.getAgents()
+  });
+  const conversationQuery = useQuery({
+    queryKey: [`conversation-${conversationId}`],
+    queryFn: () => ApiService.getConversation(conversationId.value),
+    enabled: !!conversationId.value
+  });
+  const { messages, hasMore, loadingMore, loadMore, append, replace, remove } = useMessages(
+    conversationId.value
+  );
+  const reopenMutation = useMutation({
+    mutationFn: () => ApiService.reopenConversation(conversationId.value),
+    onSuccess: () => conversationQuery.refetch()
+  });
+  const agent = conversationQuery.data?.agent ?? agentsQuery.data?.[0];
+  const isResolved = conversationQuery.data?.status === "CLOSED";
+  const isOpen2 = conversationQuery.data?.status === "OPEN";
+  const canConnectSocket = conversationId.value && isOpen2;
+  const onNewMessage = (message) => {
+    append(message);
+  };
+  (0, import_hooks10.useEffect)(() => {
+    if (!conversationId.value) {
+      return;
+    }
+    SocketService.on("conversation-updated", () => conversationQuery.refetch());
+    return () => {
+      SocketService.off("conversation-updated", () => conversationQuery.refetch());
+    };
+  }, [conversationId.value]);
+  (0, import_hooks10.useEffect)(() => {
+    if (!canConnectSocket) {
+      return;
+    }
+    const id = conversationId.value;
+    SocketService.joinRoom(id).then(() => {
+      refetchSessionCounter.value += 1;
+    }).catch((error) => {
+    });
+    SocketService.on("new-message", onNewMessage);
+    return () => {
+      SocketService.leaveRoom(id);
+      SocketService.off("new-message", onNewMessage);
+    };
+  }, [canConnectSocket]);
+  const send = async (text) => {
+    if (!agent || isCreating.value) return;
+    stopTyping();
+    const tempId = `temp-${Date.now()}`;
+    const optimistic = {
+      id: tempId,
+      conversationId: conversationId.value ?? "pending",
+      text,
+      sender: "user",
+      createdAt: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    append(optimistic);
+    try {
+      if (!conversationId.value) {
+        isCreating.value = true;
+        const conversation = await ApiService.createConversation({ agentId: agent.id, text });
+        conversationId.value = conversation.id;
+        invalidateQuery(["conversations"]);
+      } else {
+        const message = await ApiService.sendMessage(conversationId.value, { text });
+        replace(tempId, message);
+      }
+    } catch {
+      remove(tempId);
+    } finally {
+      isCreating.value = false;
+    }
+  };
+  const handleYes = () => {
+    goBack();
+  };
+  const handleNo = () => {
+    reopenMutation.mutate();
+  };
+  const { onType, stopTyping } = useTyping({ room_id: conversationId.value ?? "" });
+  const { isTyping } = useOnTyping({ room_id: conversationId.value });
+  const disabled = !agent || isCreating.value;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { class: "flex flex-col h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      Header,
+      {
+        agent,
+        loading: !agent && (agentsQuery.loading || conversationQuery.loading)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      MessageList,
+      {
+        messages,
+        agent,
+        scrollKey: isResolved,
+        hasMore,
+        loadingMore,
+        onLoadMore: loadMore,
+        isTyping
+      }
+    ),
+    isResolved ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ResolvedBanner, { onYes: handleYes, onNo: handleNo }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(InputMessage, { onSend: send, onType, disabled })
+  ] });
+};
+
+// src/widget/pages/home.tsx
+var import_lucide_preact5 = require("lucide-preact");
+var import_hooks11 = require("preact/hooks");
+init_service2();
+init_state();
+
+// src/widget/ui/Card.tsx
+var import_jsx_runtime16 = require("preact/jsx-runtime");
+var Card = ({ children, onClick, class: cls }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  "div",
+  {
+    onClick,
+    class: `
+      p-4 rounded-lg border border-neutral-200 bg-white
+      ${onClick ? "cursor-pointer hover:bg-neutral-50 transition-colors" : ""}
+      ${cls ?? ""}
+    `,
+    children
+  }
+);
+
+// src/widget/ui/Title.tsx
+var import_jsx_runtime17 = require("preact/jsx-runtime");
+var styles = {
+  1: { tag: "h1", cls: "text-2xl font-semibold" },
+  2: { tag: "h2", cls: "text-lg font-semibold" },
+  3: { tag: "h3", cls: "text-base font-medium" }
+};
+var colors3 = {
+  default: "text-neutral-800",
+  dimmed: "text-neutral-400"
+};
+var Title = ({ children, order = 1, color = "default", lineClamp, class: cls }) => {
+  const { tag: Tag, cls: base } = styles[order];
+  const colorClass = colors3[color] ?? color;
+  const clampStyle = lineClamp ? { overflow: "hidden", display: "-webkit-box", WebkitLineClamp: lineClamp, WebkitBoxOrient: "vertical" } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Tag, { class: `${base} ${cls ?? ""} ${colorClass}`, style: clampStyle, children });
+};
+
+// src/widget/pages/home.tsx
+var import_jsx_runtime18 = require("preact/jsx-runtime");
+var Home = () => {
+  const agentsQuery = useQuery({ queryKey: ["agents"], queryFn: () => ApiService.getAgents() });
+  const conversationsQuery = useQuery({
+    queryKey: ["conversations"],
+    queryFn: () => ApiService.getConversations()
+  });
+  const agents = agentsQuery.data ?? [];
+  const conversations = conversationsQuery.data ?? [];
+  const userName = currentUser.value?.name;
+  useOnNewMessage(() => {
+    conversationsQuery.refetch();
+  });
+  (0, import_hooks11.useEffect)(() => {
+    conversationsQuery.refetch();
+  }, [visitorId.value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Stack, { class: "flex flex-col p-4 gradient-header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Group, { justify: "end", children: agents?.map((agent) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Indicator, { color: "green", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Avatar, { src: agent.picture, children: agent.name }) }, agent.id)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Stack, { gap: 0, class: "mt-12", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Title, { color: "dimmed", lineClamp: 2, children: userName ? `Hey ${userName} \u{1F44B}` : `Hey \u{1F44B}` }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Title, { children: "How can we help?" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Card, { class: "mb-8", onClick: () => navigate("conversation"), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Group, { align: "center", justify: "between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Stack, { gap: 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { class: "font-semibold", children: "Send us a message" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { color: "dimmed", children: "Usual reply time is a few minutes" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_preact5.SendHorizonal, {})
+    ] }) }),
+    conversations && conversations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Stack, { gap: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { color: "dimmed", class: "text-xs font-medium uppercase tracking-wide px-1", children: "Previous conversations" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Stack, { gap: 1, children: conversations.map((conv) => {
+        const agent = conv.agent;
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          Card,
+          {
+            onClick: () => navigate("conversation", { conversationId: conv.id }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Group, { align: "center", justify: "between", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Group, { align: "center", gap: 2, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Avatar, { size: "sm", src: agent?.picture, children: agent?.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Stack, { gap: 0, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { class: "font-medium text-xs", children: agent?.name ?? "Support" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { color: "dimmed", class: "text-xs truncate max-w-[180px]", children: conv.lastMessage?.text ?? "No messages yet" })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                Indicator,
+                {
+                  color: "red",
+                  label: conv.unread_contact_count,
+                  visible: conv.unread_contact_count > 0,
+                  position: "top-right",
+                  offset: { x: -36, y: 15 },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_preact5.ChevronRight, { size: 14, class: "text-neutral-400 shrink-0" })
+                }
+              )
+            ] })
+          },
+          conv.id
+        );
+      }) })
+    ] })
+  ] });
+};
+
+// src/widget/Widget.tsx
+init_state();
+var import_jsx_runtime19 = require("preact/jsx-runtime");
+var renderPage = () => {
+  const route = currentRoute.value;
+  switch (route.page) {
+    case "home":
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Home, {});
+    case "conversation":
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Conversation, { conversationId: route.params?.conversationId });
+  }
+};
+var Internal = ({ hideButton }) => {
+  const sessionQuery = useQuery({
+    queryFn: () => ApiService.getSession(),
+    queryKey: ["session"],
+    enabled: !!sessionToken.value
+  });
+  useOnNewMessage(() => {
+    sessionQuery.refetch();
+  });
+  (0, import_hooks12.useEffect)(() => {
+    if (sessionQuery.loading) {
+      return;
+    }
+    sessionQuery.refetch();
+  }, [refetchSessionCounter.value]);
+  const countNotifications = sessionQuery.data?.count_notifications ?? 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Layout, { isOpen: isOpen.value, children: renderPage() }),
+    !hideButton && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "button",
+      {
+        onClick: () => isOpen.value = !isOpen.value,
+        class: "fixed bottom-4 right-4 w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg flex items-center justify-center text-2xl transition-colors cursor-pointer",
+        "aria-label": isOpen.value ? "Close support chat" : "Open support chat",
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          Indicator,
+          {
+            label: countNotifications,
+            visible: countNotifications > 0,
+            position: "top-right",
+            size: "md",
+            color: "red",
+            children: isOpen.value ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_preact6.X, {}) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_preact6.MessageCircle, {})
+          }
+        )
+      }
+    )
+  ] });
+};
+var Widget = (props) => {
+  if (!isSetup.value) {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, {});
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Internal, { ...props });
+};
+
+// src/widget/compiled-css.ts
+var compiled_css_default = '/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\n      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\n      "Courier New", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-amber-50: oklch(98.7% 0.022 95.277);\n    --color-amber-200: oklch(92.4% 0.12 95.746);\n    --color-amber-700: oklch(55.5% 0.163 48.998);\n    --color-green-500: oklch(72.3% 0.219 149.579);\n    --color-blue-100: oklch(93.2% 0.032 255.585);\n    --color-blue-200: oklch(88.2% 0.059 254.128);\n    --color-blue-400: oklch(70.7% 0.165 254.624);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-blue-600: oklch(54.6% 0.245 262.881);\n    --color-blue-700: oklch(48.8% 0.243 264.376);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-neutral-50: oklch(98.5% 0 0);\n    --color-neutral-100: oklch(97% 0 0);\n    --color-neutral-200: oklch(92.2% 0 0);\n    --color-neutral-300: oklch(87% 0 0);\n    --color-neutral-400: oklch(70.8% 0 0);\n    --color-neutral-500: oklch(55.6% 0 0);\n    --color-neutral-600: oklch(43.9% 0 0);\n    --color-neutral-800: oklch(26.9% 0 0);\n    --color-neutral-900: oklch(20.5% 0 0);\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-normal: 400;\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --tracking-wide: 0.025em;\n    --leading-snug: 1.375;\n    --radius-sm: 0.25rem;\n    --radius-lg: 0.5rem;\n    --radius-xl: 0.75rem;\n    --radius-2xl: 1rem;\n    --animate-spin: spin 1s linear infinite;\n    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    --animate-bounce: bounce 1s infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden="until-found"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .visible {\n    visibility: visible;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .start {\n    inset-inline-start: var(--spacing);\n  }\n  .end {\n    inset-inline-end: var(--spacing);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .right-2\\.5 {\n    right: calc(var(--spacing) * 2.5);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-0 {\n    bottom: calc(var(--spacing) * 0);\n  }\n  .bottom-1\\.5 {\n    bottom: calc(var(--spacing) * 1.5);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .bottom-20 {\n    bottom: calc(var(--spacing) * 20);\n  }\n  .container {\n    width: 100%;\n    @media (width >= 40rem) {\n      max-width: 40rem;\n    }\n    @media (width >= 48rem) {\n      max-width: 48rem;\n    }\n    @media (width >= 64rem) {\n      max-width: 64rem;\n    }\n    @media (width >= 80rem) {\n      max-width: 80rem;\n    }\n    @media (width >= 96rem) {\n      max-width: 96rem;\n    }\n  }\n  .my-3 {\n    margin-block: calc(var(--spacing) * 3);\n  }\n  .mt-12 {\n    margin-top: calc(var(--spacing) * 12);\n  }\n  .mb-0\\.5 {\n    margin-bottom: calc(var(--spacing) * 0.5);\n  }\n  .mb-8 {\n    margin-bottom: calc(var(--spacing) * 8);\n  }\n  .flex {\n    display: flex;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-1\\.5 {\n    height: calc(var(--spacing) * 1.5);\n  }\n  .h-2\\.5 {\n    height: calc(var(--spacing) * 2.5);\n  }\n  .h-3\\.5 {\n    height: calc(var(--spacing) * 3.5);\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n  .h-7 {\n    height: calc(var(--spacing) * 7);\n  }\n  .h-8 {\n    height: calc(var(--spacing) * 8);\n  }\n  .h-9 {\n    height: calc(var(--spacing) * 9);\n  }\n  .h-12 {\n    height: calc(var(--spacing) * 12);\n  }\n  .h-14 {\n    height: calc(var(--spacing) * 14);\n  }\n  .h-112 {\n    height: calc(var(--spacing) * 112);\n  }\n  .h-full {\n    height: 100%;\n  }\n  .h-px {\n    height: 1px;\n  }\n  .min-h-\\[175px\\] {\n    min-height: 175px;\n  }\n  .w-1\\.5 {\n    width: calc(var(--spacing) * 1.5);\n  }\n  .w-2\\.5 {\n    width: calc(var(--spacing) * 2.5);\n  }\n  .w-3\\.5 {\n    width: calc(var(--spacing) * 3.5);\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-7 {\n    width: calc(var(--spacing) * 7);\n  }\n  .w-8 {\n    width: calc(var(--spacing) * 8);\n  }\n  .w-9 {\n    width: calc(var(--spacing) * 9);\n  }\n  .w-12 {\n    width: calc(var(--spacing) * 12);\n  }\n  .w-14 {\n    width: calc(var(--spacing) * 14);\n  }\n  .w-80 {\n    width: calc(var(--spacing) * 80);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-\\[72\\%\\] {\n    max-width: 72%;\n  }\n  .max-w-\\[180px\\] {\n    max-width: 180px;\n  }\n  .min-w-4 {\n    min-width: calc(var(--spacing) * 4);\n  }\n  .min-w-5 {\n    min-width: calc(var(--spacing) * 5);\n  }\n  .min-w-6 {\n    min-width: calc(var(--spacing) * 6);\n  }\n  .min-w-18 {\n    min-width: calc(var(--spacing) * 18);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .translate-x-1\\/2 {\n    --tw-translate-x: calc(1 / 2 * 100%);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-bounce {\n    animation: var(--animate-bounce);\n  }\n  .animate-pulse {\n    animation: var(--animate-pulse);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .resize {\n    resize: both;\n  }\n  .resize-none {\n    resize: none;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-col-reverse {\n    flex-direction: column-reverse;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-row-reverse {\n    flex-direction: row-reverse;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-end {\n    align-items: flex-end;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0\\.5 {\n    gap: calc(var(--spacing) * 0.5);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .gap-6 {\n    gap: calc(var(--spacing) * 6);\n  }\n  .self-end {\n    align-self: flex-end;\n  }\n  .truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded-2xl {\n    border-radius: var(--radius-2xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .rounded-xl {\n    border-radius: var(--radius-xl);\n  }\n  .rounded-br-sm {\n    border-bottom-right-radius: var(--radius-sm);\n  }\n  .rounded-bl-sm {\n    border-bottom-left-radius: var(--radius-sm);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-2 {\n    border-style: var(--tw-border-style);\n    border-width: 2px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-amber-200 {\n    border-color: var(--color-amber-200);\n  }\n  .border-blue-400 {\n    border-color: var(--color-blue-400);\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-neutral-100 {\n    border-color: var(--color-neutral-100);\n  }\n  .border-neutral-200 {\n    border-color: var(--color-neutral-200);\n  }\n  .border-white {\n    border-color: var(--color-white);\n  }\n  .bg-amber-50 {\n    background-color: var(--color-amber-50);\n  }\n  .bg-blue-100 {\n    background-color: var(--color-blue-100);\n  }\n  .bg-blue-500 {\n    background-color: var(--color-blue-500);\n  }\n  .bg-blue-600 {\n    background-color: var(--color-blue-600);\n  }\n  .bg-green-500 {\n    background-color: var(--color-green-500);\n  }\n  .bg-neutral-100 {\n    background-color: var(--color-neutral-100);\n  }\n  .bg-neutral-200 {\n    background-color: var(--color-neutral-200);\n  }\n  .bg-neutral-400 {\n    background-color: var(--color-neutral-400);\n  }\n  .bg-red-500 {\n    background-color: var(--color-red-500);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .object-cover {\n    object-fit: cover;\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .px-1 {\n    padding-inline: calc(var(--spacing) * 1);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-2\\.5 {\n    padding-block: calc(var(--spacing) * 2.5);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .py-4 {\n    padding-block: calc(var(--spacing) * 4);\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2);\n  }\n  .pb-5 {\n    padding-bottom: calc(var(--spacing) * 5);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-base {\n    font-size: var(--text-base);\n    line-height: var(--tw-leading, var(--text-base--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .text-\\[10px\\] {\n    font-size: 10px;\n  }\n  .leading-5 {\n    --tw-leading: calc(var(--spacing) * 5);\n    line-height: calc(var(--spacing) * 5);\n  }\n  .leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .leading-snug {\n    --tw-leading: var(--leading-snug);\n    line-height: var(--leading-snug);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-normal {\n    --tw-font-weight: var(--font-weight-normal);\n    font-weight: var(--font-weight-normal);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .tracking-wide {\n    --tw-tracking: var(--tracking-wide);\n    letter-spacing: var(--tracking-wide);\n  }\n  .whitespace-pre-wrap {\n    white-space: pre-wrap;\n  }\n  .text-amber-700 {\n    color: var(--color-amber-700);\n  }\n  .text-blue-200 {\n    color: var(--color-blue-200);\n  }\n  .text-blue-700 {\n    color: var(--color-blue-700);\n  }\n  .text-green-500 {\n    color: var(--color-green-500);\n  }\n  .text-inherit {\n    color: inherit;\n  }\n  .text-neutral-400 {\n    color: var(--color-neutral-400);\n  }\n  .text-neutral-500 {\n    color: var(--color-neutral-500);\n  }\n  .text-neutral-600 {\n    color: var(--color-neutral-600);\n  }\n  .text-neutral-800 {\n    color: var(--color-neutral-800);\n  }\n  .text-neutral-900 {\n    color: var(--color-neutral-900);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .uppercase {\n    text-transform: uppercase;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-2xl {\n    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .placeholder\\:text-neutral-400 {\n    &::placeholder {\n      color: var(--color-neutral-400);\n    }\n  }\n  .hover\\:bg-blue-700 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-blue-700);\n      }\n    }\n  }\n  .hover\\:bg-neutral-50 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-neutral-50);\n      }\n    }\n  }\n  .hover\\:bg-neutral-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-neutral-200);\n      }\n    }\n  }\n  .hover\\:text-neutral-800 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-neutral-800);\n      }\n    }\n  }\n  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n  .disabled\\:opacity-50 {\n    &:disabled {\n      opacity: 50%;\n    }\n  }\n}\n*, ::before, ::after {\n  --tw-border-style: solid;\n}\n.gradient-header {\n  background: linear-gradient(to bottom, var(--color-neutral-200) 0%, var(--color-white) 60%);\n}\n.lucide {\n  height: 1em;\n  width: 1em;\n  display: inline-block;\n}\n::-webkit-scrollbar {\n  width: 4px;\n}\n::-webkit-scrollbar-track {\n  background: transparent;\n}\n::-webkit-scrollbar-thumb {\n  background: var(--color-neutral-300);\n  border-radius: 9999px;\n}\n@property --tw-translate-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-border-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-leading {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-tracking {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: "<length>";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: "*";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes bounce {\n  0%, 100% {\n    transform: translateY(-25%);\n    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  }\n  50% {\n    transform: none;\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-tracking: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n    }\n  }\n}\n';
+
+// src/widget/mount.tsx
+init_service();
+init_state();
+var import_jsx_runtime20 = require("preact/jsx-runtime");
+function mountWidget(options) {
+  const { appId: id, hideButton = false } = options;
+  appId.value = id;
+  VisitorService.init().then(() => SocketService.connect());
+  const host = document.createElement("div");
+  host.id = "spacinbox-widget";
+  document.body.appendChild(host);
+  const shadow = host.attachShadow({ mode: "open" });
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(compiled_css_default);
+  shadow.adoptedStyleSheets = [sheet];
+  const mountPoint = document.createElement("div");
+  shadow.appendChild(mountPoint);
+  (0, import_preact2.render)(/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Widget, { hideButton }), mountPoint);
+  return {
+    open() {
+      isOpen.value = true;
+    },
+    close() {
+      isOpen.value = false;
+    },
+    identify(user) {
+      currentUser.value = user;
+      VisitorService.identify(user);
+    },
+    setMetadata(data) {
+      metadata.value = { ...metadata.value, ...data };
+    },
+    shutdown() {
+      (0, import_preact2.render)(null, mountPoint);
+      host.remove();
+      isOpen.value = false;
+      currentUser.value = null;
+      metadata.value = {};
+      visitorId.value = null;
+      sessionToken.value = null;
+      resetRouter();
+      VisitorService.clear();
+      SocketService.disconnect();
+    }
+  };
+}
+
+// src/index.ts
+var controller = null;
+var Spacinbox = {
+  boot(options) {
+    if (typeof document === "undefined") {
+      return;
+    }
+    if (controller) {
+      return;
+    }
+    controller = mountWidget(options);
+  },
+  identify(user) {
+    controller?.identify(user);
+  },
+  setMetadata(data) {
+    controller?.setMetadata(data);
+  },
+  open() {
+    controller?.open();
+  },
+  close() {
+    controller?.close();
+  },
+  shutdown() {
+    controller?.shutdown();
+    controller = null;
+  }
+};
+var index_default = Spacinbox;
+//# sourceMappingURL=index.cjs.map