@rizvanua/contact-chat 0.1.0

package/dist/ui/index.js

@@ -0,0 +1,604 @@
+import { twMerge } from 'tailwind-merge';
+import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { createContext, useState, useRef, useEffect, Fragment, useCallback, useContext } from 'react';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { Transition, Dialog } from '@headlessui/react';
+import { X, Send } from 'lucide-react';
+
+// src/ui/ChatLauncher.tsx
+var chatOpenAtom = atom(false);
+var chatSessionIdAtom = atom(null);
+var chatNameAtom = atom(null);
+var chatMessagesAtom = atom([]);
+var chatCursorAtom = atom(0);
+var chatUnreadAtom = atom(0);
+var chatStatusAtom = atom("idle");
+var chatErrorAtom = atom(null);
+
+// src/core/name.ts
+var MAX_NAME_LENGTH = 60;
+function sanitizeName(raw) {
+  if (typeof raw !== "string") return "";
+  return raw.replace(/[\u0000-\u001F\u007F]/g, " ").replace(/\s+/g, " ").trim().slice(0, MAX_NAME_LENGTH);
+}
+
+// src/react/client.ts
+function getStoredName(nameStorageKey) {
+  if (typeof window === "undefined") return null;
+  return window.localStorage.getItem(nameStorageKey);
+}
+function storeName(nameStorageKey, name) {
+  window.localStorage.setItem(nameStorageKey, name);
+}
+function getStoredSessionId(sessionStorageKey) {
+  if (typeof window === "undefined") return null;
+  return window.localStorage.getItem(sessionStorageKey);
+}
+function ensureSessionId(sessionStorageKey) {
+  const existing = getStoredSessionId(sessionStorageKey);
+  if (existing) return existing;
+  const created = window.crypto.randomUUID();
+  window.localStorage.setItem(sessionStorageKey, created);
+  return created;
+}
+function mergeMessages(current, incoming) {
+  const seen = new Set(current.map((message) => message.id));
+  const fresh = incoming.filter((message) => !seen.has(message.id));
+  if (fresh.length === 0) return current;
+  return [...current, ...fresh].sort((a, b) => a.ts - b.ts);
+}
+
+// src/core/types.ts
+var MAX_MESSAGE_LENGTH = 1e3;
+var DEFAULT_CHAT_LIMITS = {
+  maxMessageLength: MAX_MESSAGE_LENGTH};
+var DEFAULT_CHAT_CLIENT_CONFIG = {
+  basePath: "/api/chat",
+  sessionStorageKey: "contact-chat-session",
+  nameStorageKey: "contact-chat-name",
+  chime: true,
+  maxMessageLength: DEFAULT_CHAT_LIMITS.maxMessageLength
+};
+var Ctx = createContext(DEFAULT_CHAT_CLIENT_CONFIG);
+function useChatConfig() {
+  return useContext(Ctx);
+}
+
+// src/react/use-chat-actions.ts
+function useChatActions() {
+  const { basePath, sessionStorageKey, nameStorageKey, maxMessageLength, onEvent } = useChatConfig();
+  const [open, originalSetOpen] = useAtom(chatOpenAtom);
+  const messages = useAtomValue(chatMessagesAtom);
+  const setMessages = useSetAtom(chatMessagesAtom);
+  const unread = useAtomValue(chatUnreadAtom);
+  const [status, setStatus] = useAtom(chatStatusAtom);
+  const [error, setError] = useAtom(chatErrorAtom);
+  const [name, setNameAtomValue] = useAtom(chatNameAtom);
+  const setSessionId = useSetAtom(chatSessionIdAtom);
+  const setOpen = useCallback(
+    (v) => {
+      const next = typeof v === "function" ? v(open) : v;
+      originalSetOpen(next);
+      if (next === true) onEvent?.({ type: "chat.open" });
+      else if (next === false) onEvent?.({ type: "chat.close" });
+    },
+    [open, originalSetOpen, onEvent]
+  );
+  const setName = useCallback(
+    (raw) => {
+      const clean = sanitizeName(raw);
+      if (!clean) return false;
+      storeName(nameStorageKey, clean);
+      setNameAtomValue(clean);
+      return true;
+    },
+    [nameStorageKey, setNameAtomValue]
+  );
+  const send = useCallback(
+    async (text) => {
+      const trimmed = text.trim();
+      if (trimmed.length === 0 || trimmed.length > maxMessageLength) return;
+      const sessionId = ensureSessionId(sessionStorageKey);
+      setSessionId(sessionId);
+      setStatus("sending");
+      setError(null);
+      onEvent?.({ type: "chat.send.attempt" });
+      try {
+        const response = await fetch(`${basePath}/send`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            sessionId,
+            text: trimmed,
+            name: getStoredName(nameStorageKey) ?? "",
+            honeypot: ""
+          })
+        });
+        if (!response.ok) {
+          const body = await response.json();
+          setError(body.error);
+          setStatus(
+            body.code === "store_unavailable" ? "unavailable" : "error"
+          );
+          onEvent?.({ type: "chat.send.error", code: body.code });
+          return;
+        }
+        const data = await response.json();
+        setMessages((current) => mergeMessages(current, [data.message]));
+        setStatus("idle");
+        onEvent?.({ type: "chat.send.success" });
+      } catch {
+        setError("Chat is unavailable right now.");
+        setStatus("unavailable");
+        onEvent?.({ type: "chat.send.error", code: "network" });
+      }
+    },
+    [
+      basePath,
+      maxMessageLength,
+      nameStorageKey,
+      onEvent,
+      sessionStorageKey,
+      setError,
+      setMessages,
+      setSessionId,
+      setStatus
+    ]
+  );
+  return {
+    open,
+    setOpen,
+    messages,
+    unread,
+    status,
+    error,
+    name,
+    setName,
+    send,
+    canSend: status !== "sending"
+  };
+}
+
+// src/react/chime.ts
+var context = null;
+function getContext() {
+  if (typeof window === "undefined") return null;
+  const Ctor = window.AudioContext ?? window.webkitAudioContext;
+  if (!Ctor) return null;
+  if (!context) context = new Ctor();
+  return context;
+}
+function playChime() {
+  try {
+    const audio = getContext();
+    if (!audio) return;
+    if (audio.state === "suspended") void audio.resume();
+    const startedAt = audio.currentTime;
+    const notes = [
+      { frequency: 880, offset: 0 },
+      { frequency: 1320, offset: 0.1 }
+    ];
+    for (const { frequency, offset } of notes) {
+      const oscillator = audio.createOscillator();
+      const gain = audio.createGain();
+      oscillator.type = "sine";
+      oscillator.frequency.value = frequency;
+      const start = startedAt + offset;
+      const end = start + 0.09;
+      gain.gain.setValueAtTime(0, start);
+      gain.gain.linearRampToValueAtTime(0.15, start + 0.01);
+      gain.gain.linearRampToValueAtTime(0, end);
+      oscillator.connect(gain).connect(audio.destination);
+      oscillator.start(start);
+      oscillator.stop(end + 0.02);
+    }
+  } catch {
+  }
+}
+
+// src/react/use-chat-sync.ts
+var FAST_INTERVAL_MS = 4e3;
+var SLOW_INTERVAL_MS = 15e3;
+var IDLE_BEFORE_SLOW_MS = 12e4;
+function useChatSync() {
+  const { basePath, sessionStorageKey, nameStorageKey, chime } = useChatConfig();
+  const open = useAtomValue(chatOpenAtom);
+  const setSessionId = useSetAtom(chatSessionIdAtom);
+  const setName = useSetAtom(chatNameAtom);
+  const setMessages = useSetAtom(chatMessagesAtom);
+  const [cursor, setCursor] = useAtom(chatCursorAtom);
+  const setUnread = useSetAtom(chatUnreadAtom);
+  const [active, setActive] = useState(true);
+  const cursorRef = useRef(cursor);
+  const lastMessageAtRef = useRef(0);
+  const hasHydratedRef = useRef(false);
+  useEffect(() => {
+    cursorRef.current = cursor;
+  }, [cursor]);
+  useEffect(() => {
+    const storedSession = getStoredSessionId(sessionStorageKey);
+    if (storedSession) setSessionId(storedSession);
+    const storedName = getStoredName(nameStorageKey);
+    if (storedName) setName(storedName);
+  }, [sessionStorageKey, nameStorageKey, setSessionId, setName]);
+  useEffect(() => {
+    const recompute = () => setActive(document.visibilityState === "visible" || document.hasFocus());
+    recompute();
+    document.addEventListener("visibilitychange", recompute);
+    window.addEventListener("focus", recompute);
+    window.addEventListener("blur", recompute);
+    return () => {
+      document.removeEventListener("visibilitychange", recompute);
+      window.removeEventListener("focus", recompute);
+      window.removeEventListener("blur", recompute);
+    };
+  }, []);
+  const poll = useCallback(async () => {
+    const sessionId = getStoredSessionId(sessionStorageKey);
+    if (!sessionId) return;
+    try {
+      const response = await fetch(
+        `${basePath}/poll?sessionId=${encodeURIComponent(sessionId)}&since=${cursorRef.current}`,
+        { cache: "no-store" }
+      );
+      if (!response.ok) return;
+      const data = await response.json();
+      if (data.messages.length === 0) return;
+      lastMessageAtRef.current = Date.now();
+      setMessages((current) => mergeMessages(current, data.messages));
+      cursorRef.current = data.cursor;
+      setCursor(data.cursor);
+      const fromOwner = data.messages.filter(
+        (message) => message.from === "owner"
+      ).length;
+      const isHydrating = !hasHydratedRef.current;
+      hasHydratedRef.current = true;
+      if (fromOwner > 0 && !isHydrating && chime) playChime();
+      if (fromOwner > 0 && !open) setUnread((count) => count + fromOwner);
+    } catch {
+    }
+  }, [basePath, chime, open, sessionStorageKey, setCursor, setMessages, setUnread]);
+  useEffect(() => {
+    if (!active) return;
+    if (!open) {
+      void poll();
+      return;
+    }
+    let timer = null;
+    let cancelled = false;
+    const tick = async () => {
+      if (cancelled) return;
+      await poll();
+      if (cancelled) return;
+      const since = lastMessageAtRef.current || Date.now();
+      const delay = Date.now() - since > IDLE_BEFORE_SLOW_MS ? SLOW_INTERVAL_MS : FAST_INTERVAL_MS;
+      timer = setTimeout(tick, delay);
+    };
+    lastMessageAtRef.current = Date.now();
+    void tick();
+    return () => {
+      cancelled = true;
+      if (timer) clearTimeout(timer);
+    };
+  }, [open, active, poll]);
+  useEffect(() => {
+    if (open) setUnread(0);
+  }, [open, setUnread]);
+}
+var DEFAULT_CONTAINER_CLASSES = "flex";
+var DEFAULT_BUBBLE_CLASSES = "max-w-[80%] whitespace-pre-wrap break-words rounded-lg px-3 py-2 text-sm";
+var DEFAULT_VISITOR_BUBBLE_CLASSES = "rounded-br-sm bg-purple-600 text-white";
+var DEFAULT_OWNER_BUBBLE_CLASSES = "rounded-bl-sm bg-gray-700 text-gray-100";
+function MessageBubble({ message, classNames = {} }) {
+  const isVisitor = message.from === "visitor";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: twMerge(
+        DEFAULT_CONTAINER_CLASSES,
+        isVisitor ? "justify-end" : "justify-start",
+        classNames.container
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: twMerge(
+            DEFAULT_BUBBLE_CLASSES,
+            isVisitor ? twMerge(DEFAULT_VISITOR_BUBBLE_CLASSES, classNames.visitorBubble) : twMerge(DEFAULT_OWNER_BUBBLE_CLASSES, classNames.ownerBubble),
+            classNames.bubble
+          ),
+          children: message.text
+        }
+      )
+    }
+  );
+}
+var DEFAULT_CONTAINER_CLASSES2 = "space-y-3 p-3 rounded-lg border border-gray-700 bg-gray-800 text-gray-300";
+var DEFAULT_INPUT_CLASSES = "flex-1 rounded border border-gray-600 bg-gray-900 px-2 py-1 text-base text-white focus:outline-none focus:ring-1 focus:ring-purple-500 sm:text-sm";
+var DEFAULT_SUBMIT_CLASSES = "whitespace-nowrap rounded bg-purple-600 px-2 py-1 text-sm font-semibold text-white hover:bg-purple-700";
+var DEFAULT_ERROR_CLASSES = "text-xs text-amber-400";
+function NameGate({ labels = {}, classNames = {} } = {}) {
+  const { setName } = useChatActions();
+  const [value, setValue] = useState("");
+  const [showError, setShowError] = useState(false);
+  const promptText = labels.prompt ?? "Before we start \u2014 what\u2019s your name?";
+  const placeholder = labels.placeholder ?? "Your name";
+  const submitLabel = labels.submitButton ?? "Start chat";
+  const inputAriaLabel = labels.inputAriaLabel ?? "Your name";
+  const errorText = labels.error ?? "Please enter your name.";
+  const submit = () => {
+    if (!setName(value)) {
+      setShowError(true);
+      return;
+    }
+    setShowError(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: twMerge(DEFAULT_CONTAINER_CLASSES2, classNames.container), children: [
+    /* @__PURE__ */ jsx("p", { className: twMerge("text-sm", classNames.prompt), children: promptText }),
+    /* @__PURE__ */ jsxs("div", { className: twMerge("flex gap-2", classNames.inputRow), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value,
+          autoFocus: true,
+          maxLength: MAX_NAME_LENGTH,
+          onChange: (e) => {
+            setValue(e.target.value);
+            if (showError) setShowError(false);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              submit();
+            }
+          },
+          placeholder,
+          "aria-label": inputAriaLabel,
+          className: twMerge(DEFAULT_INPUT_CLASSES, classNames.input)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: submit,
+          className: twMerge(DEFAULT_SUBMIT_CLASSES, classNames.submitButton),
+          children: submitLabel
+        }
+      )
+    ] }),
+    showError && /* @__PURE__ */ jsx("p", { className: twMerge(DEFAULT_ERROR_CLASSES, classNames.error), children: errorText })
+  ] });
+}
+var DEFAULT_OVERLAY_CLASSES = "fixed inset-0 bg-black/50";
+var DEFAULT_PANEL_CLASSES = "flex w-full max-w-md flex-col overflow-hidden rounded-lg border border-gray-700 bg-gray-900 text-left shadow-xl transition-all";
+var DEFAULT_HEADER_CLASSES = "flex items-start justify-between px-4 py-3 bg-purple-600";
+var DEFAULT_TITLE_CLASSES = "min-w-0 truncate text-base font-semibold text-white";
+var DEFAULT_CLOSE_BUTTON_CLASSES = "shrink-0 rounded-md p-1 text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-500";
+var DEFAULT_BODY_CLASSES = "flex-1 space-y-3 overflow-y-auto p-4";
+var DEFAULT_GREETING_CLASSES = "text-xs font-bold text-gray-400";
+var DEFAULT_UNAVAILABLE_CLASSES = "text-xs text-amber-400";
+var DEFAULT_ERROR_TEXT_CLASSES = "text-xs text-amber-400";
+var DEFAULT_COMPOSER_CLASSES = "flex items-end gap-2 border-t border-gray-700 p-3";
+var DEFAULT_TEXTAREA_CLASSES = "flex-1 resize-none rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-base text-white focus:outline-none focus:ring-1 focus:ring-purple-500 sm:text-sm";
+var DEFAULT_SEND_BUTTON_CLASSES = "rounded-full bg-purple-600 p-2 text-white hover:bg-purple-700 disabled:opacity-40";
+var DEFAULT_HONEYPOT_CLASSES = "hidden";
+function ChatDialog({
+  labels = {},
+  classNames = {},
+  renderMessage,
+  nameGate
+} = {}) {
+  const { open, setOpen, messages, status, error, send, canSend, name } = useChatActions();
+  const { maxMessageLength } = useChatConfig();
+  const [draft, setDraft] = useState("");
+  const bottomRef = useRef(null);
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages.length]);
+  const titleText = labels.title ?? "Chat";
+  const titleWithName = labels.titleWithName ?? ((n) => ` \xB7 ${n}`);
+  const greeting = labels.greeting ?? ((n) => `Hi ${n} \u2014 type your message here\u2026 I usually reply within a few minutes.`);
+  const composerPlaceholder = labels.composerPlaceholder ?? ((nameOk) => nameOk ? "Type a message\u2026" : "Enter your name first");
+  const messageAriaLabel = labels.messageAriaLabel ?? "Message";
+  const sendAriaLabel = labels.sendAriaLabel ?? "Send message";
+  const closeAriaLabel = labels.closeAriaLabel ?? "Close chat";
+  const unavailableFallback = labels.unavailableFallback ?? /* @__PURE__ */ jsx("p", { className: twMerge(DEFAULT_UNAVAILABLE_CLASSES, classNames.unavailable), children: "Chat is unreachable right now \u2014 please try again later." });
+  const submit = async () => {
+    if (!name || !canSend || draft.trim().length === 0) return;
+    const text = draft;
+    setDraft("");
+    await send(text);
+  };
+  return /* @__PURE__ */ jsx(Transition, { show: open, as: Fragment, children: /* @__PURE__ */ jsxs(Dialog, { as: "div", className: "relative z-50", onClose: () => setOpen(false), children: [
+    /* @__PURE__ */ jsx(
+      Transition.Child,
+      {
+        as: Fragment,
+        enter: "ease-out duration-200",
+        enterFrom: "opacity-0",
+        enterTo: "opacity-100",
+        leave: "ease-in duration-150",
+        leaveFrom: "opacity-100",
+        leaveTo: "opacity-0",
+        children: /* @__PURE__ */ jsx("div", { className: twMerge(DEFAULT_OVERLAY_CLASSES, classNames.overlay) })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "fixed inset-0 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-full items-center justify-center p-4", children: /* @__PURE__ */ jsx(
+      Transition.Child,
+      {
+        as: Fragment,
+        enter: "ease-out duration-200",
+        enterFrom: "opacity-0 scale-95",
+        enterTo: "opacity-100 scale-100",
+        leave: "ease-in duration-150",
+        leaveFrom: "opacity-100 scale-100",
+        leaveTo: "opacity-0 scale-95",
+        children: /* @__PURE__ */ jsxs(
+          Dialog.Panel,
+          {
+            className: twMerge(DEFAULT_PANEL_CLASSES, classNames.panel),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: twMerge(DEFAULT_HEADER_CLASSES, classNames.header), children: [
+                /* @__PURE__ */ jsxs(
+                  Dialog.Title,
+                  {
+                    className: twMerge(DEFAULT_TITLE_CLASSES, classNames.title),
+                    children: [
+                      titleText,
+                      name ? titleWithName(name) : ""
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setOpen(false),
+                    "aria-label": closeAriaLabel,
+                    className: twMerge(
+                      DEFAULT_CLOSE_BUTTON_CLASSES,
+                      classNames.closeButton
+                    ),
+                    children: /* @__PURE__ */ jsx(X, { size: 18 })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: twMerge(DEFAULT_BODY_CLASSES, classNames.body), children: [
+                name && /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: twMerge(
+                      DEFAULT_GREETING_CLASSES,
+                      classNames.greeting
+                    ),
+                    children: greeting(name)
+                  }
+                ),
+                messages.map(
+                  (message) => renderMessage ? renderMessage(message) : /* @__PURE__ */ jsx(MessageBubble, { message }, message.id)
+                ),
+                status === "unavailable" && unavailableFallback,
+                status === "error" && error && /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: twMerge(
+                      DEFAULT_ERROR_TEXT_CLASSES,
+                      classNames.errorText
+                    ),
+                    children: error
+                  }
+                ),
+                !name && (nameGate !== void 0 ? nameGate : /* @__PURE__ */ jsx(NameGate, {})),
+                /* @__PURE__ */ jsx("div", { ref: bottomRef })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: twMerge(DEFAULT_COMPOSER_CLASSES, classNames.composer),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "text",
+                        name: "website",
+                        tabIndex: -1,
+                        autoComplete: "off",
+                        "aria-hidden": "true",
+                        className: twMerge(DEFAULT_HONEYPOT_CLASSES, classNames.honeypot)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "textarea",
+                      {
+                        value: draft,
+                        onChange: (e) => setDraft(e.target.value),
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter" && !e.shiftKey) {
+                            e.preventDefault();
+                            void submit();
+                          }
+                        },
+                        rows: 2,
+                        maxLength: maxMessageLength,
+                        disabled: !name,
+                        placeholder: composerPlaceholder(!!name),
+                        "aria-label": messageAriaLabel,
+                        className: twMerge(
+                          // text-base (16px) on mobile: iOS Safari auto-zooms the
+                          // page when a focused field is smaller than 16px.
+                          // sm:text-sm restores the desktop size.
+                          DEFAULT_TEXTAREA_CLASSES,
+                          classNames.textarea
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => void submit(),
+                        disabled: !name || !canSend || draft.trim().length === 0,
+                        "aria-label": sendAriaLabel,
+                        className: twMerge(
+                          DEFAULT_SEND_BUTTON_CLASSES,
+                          classNames.sendButton
+                        ),
+                        children: /* @__PURE__ */ jsx(Send, { size: 16 })
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    ) }) })
+  ] }) });
+}
+var DEFAULT_BUTTON_CLASSES = "relative flex items-center justify-center gap-2 rounded-lg bg-purple-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 print:hidden";
+var DEFAULT_BADGE_CLASSES = "absolute right-2 top-1/2 h-2.5 w-2.5 -translate-y-1/2 rounded-full bg-white";
+function ChatLauncher({
+  labels = {},
+  classNames = {},
+  icon,
+  onEvent,
+  children
+} = {}) {
+  const { setOpen, unread } = useChatActions();
+  useChatSync();
+  const buttonText = labels.button ?? "Contact me";
+  const unreadA11y = labels.unreadAriaLabel ?? ((n) => `${n} unread ${n === 1 ? "reply" : "replies"}`);
+  const handleOpen = () => {
+    setOpen(true);
+    onEvent?.({ type: "ui.launcher.open" });
+  };
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleOpen,
+        className: twMerge(DEFAULT_BUTTON_CLASSES, classNames.button),
+        children: [
+          icon,
+          buttonText,
+          unread > 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-label": unreadA11y(unread),
+              className: twMerge(DEFAULT_BADGE_CLASSES, classNames.unreadBadge)
+            }
+          )
+        ]
+      }
+    ),
+    children === void 0 ? /* @__PURE__ */ jsx(ChatDialog, {}) : children
+  ] });
+}
+
+export { ChatDialog, ChatLauncher, MessageBubble, NameGate };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map