@anakin824/prdg-chat-ui 0.1.0

package/dist/index.js

@@ -0,0 +1,1959 @@
+'use strict';
+
+var reactQuery = require('@tanstack/react-query');
+var react = require('react');
+var framerMotion = require('framer-motion');
+var dateFns = require('date-fns');
+var Lightbox = require('yet-another-react-lightbox');
+require('yet-another-react-lightbox/styles.css');
+var WaveSurfer = require('wavesurfer.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Lightbox__default = /*#__PURE__*/_interopDefault(Lightbox);
+var WaveSurfer__default = /*#__PURE__*/_interopDefault(WaveSurfer);
+
+// src/chat/provider/ChatProvider.tsx
+
+// src/chat/lib/api.ts
+var ChatAPI = class {
+  constructor(baseUrl, getToken, onAuthError) {
+    this.baseUrl = baseUrl;
+    this.getToken = getToken;
+    this.onAuthError = onAuthError;
+  }
+  baseUrl;
+  getToken;
+  onAuthError;
+  headers(tokenOverride) {
+    const t = tokenOverride ?? this.getToken();
+    const h = { "Content-Type": "application/json" };
+    if (t) h.Authorization = `Bearer ${t}`;
+    return h;
+  }
+  async json(path, init) {
+    let res = await fetch(`${this.baseUrl}${path}`, {
+      ...init,
+      headers: { ...this.headers(), ...init?.headers || {} }
+    });
+    if (res.status === 401 && this.onAuthError) {
+      const newToken = await this.onAuthError();
+      if (newToken) {
+        res = await fetch(`${this.baseUrl}${path}`, {
+          ...init,
+          headers: { ...this.headers(newToken), ...init?.headers || {} }
+        });
+      }
+    }
+    if (!res.ok) {
+      const err = await res.text();
+      throw new Error(err || res.statusText);
+    }
+    return res.json();
+  }
+  listConversations(cursor, limit = 50) {
+    const q = new URLSearchParams();
+    if (cursor) q.set("cursor", cursor);
+    q.set("limit", String(limit));
+    return this.json(`/conversations?${q}`);
+  }
+  listMessages(conversationId, cursor, limit = 50) {
+    const q = new URLSearchParams();
+    if (cursor) q.set("cursor", cursor);
+    q.set("limit", String(limit));
+    return this.json(`/conversations/${conversationId}/messages?${q}`);
+  }
+  findOrCreateDirect(peerUserId) {
+    return this.json("/conversations/direct", {
+      method: "POST",
+      body: JSON.stringify({ peer_user_id: peerUserId })
+    });
+  }
+  createGroup(title, members) {
+    return this.json("/conversations/group", {
+      method: "POST",
+      body: JSON.stringify({ title, members })
+    });
+  }
+  findOrCreateEntity(input) {
+    return this.json("/conversations/entity", {
+      method: "POST",
+      body: JSON.stringify({
+        title: input.title,
+        entity_ref: input.entity_ref,
+        entity_uuid: input.entity_uuid,
+        members: input.members ?? []
+      })
+    });
+  }
+  listConversationMembers(conversationId) {
+    return this.json(`/conversations/${conversationId}/members`);
+  }
+  listContacts(q, limit = 50) {
+    const params = new URLSearchParams();
+    params.set("limit", String(limit));
+    if (q) params.set("q", q);
+    return this.json(`/users?${params}`);
+  }
+  sendMessage(conversationId, body) {
+    return this.json(`/conversations/${conversationId}/messages`, {
+      method: "POST",
+      body: JSON.stringify(body)
+    });
+  }
+  presignPut(filename, contentType) {
+    return this.json("/storage/presign-put", {
+      method: "POST",
+      body: JSON.stringify({ filename, content_type: contentType })
+    });
+  }
+  presignGet(key) {
+    return this.json("/storage/presign-get", {
+      method: "POST",
+      body: JSON.stringify({ key })
+    });
+  }
+};
+
+// src/chat/lib/queryKeys.ts
+var chatKeys = {
+  all: ["chat"],
+  conversations: () => [...chatKeys.all, "conversations"],
+  messages: (conversationId) => [...chatKeys.all, "messages", conversationId],
+  members: (conversationId) => [...chatKeys.all, "members", conversationId],
+  contacts: (q) => [...chatKeys.all, "contacts", q]
+};
+var ChatContext = react.createContext(null);
+function useChat() {
+  const v = react.useContext(ChatContext);
+  if (!v) throw new Error("useChat must be used within ChatProvider");
+  return v;
+}
+
+// src/chat/hooks/useConversations.ts
+function useConversations() {
+  const { api, wsConnected, config } = useChat();
+  const interval = config.pollIntervalMs ?? 3e4;
+  return reactQuery.useQuery({
+    queryKey: chatKeys.conversations(),
+    queryFn: () => api.listConversations(void 0, 50),
+    refetchInterval: wsConnected ? false : interval
+  });
+}
+
+// src/chat/lib/natsRealtime.ts
+function natsUrlToWebSocketUrl(url) {
+  const u = url.trim();
+  if (!u) return u;
+  if (/^nats:\/\//i.test(u)) return u.replace(/^nats:\/\//i, "ws://");
+  if (/^tls:\/\//i.test(u)) return u.replace(/^tls:\/\//i, "wss://");
+  return u;
+}
+function parseNatsWebSocketServers(raw) {
+  return raw.split(",").map((s) => natsUrlToWebSocketUrl(s)).filter((s) => s.length > 0);
+}
+function userInboxSubject(natsTenantId, userId) {
+  return `chat.${natsTenantId}.user.${userId}`;
+}
+function entityConversationSubject(natsTenantId, conversationId) {
+  return `chat.${natsTenantId}.conversation.${conversationId}`;
+}
+function invalidateQueriesFromNatsPayload(payload, queryClient) {
+  if (!payload || typeof payload !== "object") return;
+  const p = payload;
+  if (p.type !== "chat.message.new") return;
+  const ed = p.event_data;
+  if (!ed || typeof ed !== "object") return;
+  const convId = ed.conversation_id;
+  if (typeof convId !== "string" || !convId.trim()) return;
+  void queryClient.invalidateQueries({ queryKey: chatKeys.messages(convId) });
+  void queryClient.invalidateQueries({ queryKey: chatKeys.conversations() });
+}
+
+// src/chat/provider/ChatNatsBridge.tsx
+function ChatNatsBridge({ natsWsUrl, natsToken, onConnectedChange }) {
+  const { natsTenantId, userId } = useChat();
+  const queryClient = reactQuery.useQueryClient();
+  const { data: convData } = useConversations();
+  const entityConversationIds = react.useMemo(() => {
+    const items = convData?.items ?? [];
+    return items.filter((c) => String(c.kind).toLowerCase() === "entity").map((c) => c.id).sort();
+  }, [convData?.items]);
+  const entityKey = entityConversationIds.join(",");
+  const servers = react.useMemo(() => parseNatsWebSocketServers(natsWsUrl), [natsWsUrl]);
+  const onConnectedChangeRef = react.useRef(onConnectedChange);
+  onConnectedChangeRef.current = onConnectedChange;
+  const connRef = react.useRef(null);
+  react.useEffect(() => {
+    if (servers.length === 0) return;
+    let cancelled = false;
+    void (async () => {
+      try {
+        const { connect, JSONCodec } = await import('nats.ws');
+        const jc = JSONCodec();
+        const opts = {
+          servers,
+          maxReconnectAttempts: -1,
+          name: `prdg-chat-web:${userId}`
+        };
+        if (natsToken?.trim()) opts.token = natsToken.trim();
+        const conn = await connect(opts);
+        if (cancelled) {
+          await conn.drain();
+          return;
+        }
+        connRef.current = conn;
+        onConnectedChangeRef.current(true);
+        const handleMsg = (data, subject) => {
+          if (process.env.NODE_ENV === "development") {
+            console.debug("[NATS] raw message received on subject:", subject, "bytes:", data.length);
+          }
+          let payload;
+          try {
+            payload = jc.decode(data);
+          } catch (decodeErr) {
+            if (process.env.NODE_ENV === "development") {
+              console.error("[NATS] JSONCodec decode failed:", decodeErr, "raw:", new TextDecoder().decode(data));
+            }
+            return;
+          }
+          if (process.env.NODE_ENV === "development") {
+            console.debug("[NATS] decoded payload:", payload);
+          }
+          invalidateQueriesFromNatsPayload(payload, queryClient);
+          if (process.env.NODE_ENV === "development") {
+            if (payload && typeof payload === "object" && payload.type === "chat.message.new") {
+              const p = payload;
+              const ed = p.event_data;
+              const rawTs = typeof ed?.timestamp_utc === "string" ? ed.timestamp_utc : null;
+              const localTime = rawTs ? new Date(rawTs).toLocaleTimeString(void 0, {
+                hour: "numeric",
+                minute: "2-digit",
+                hour12: true
+              }) : (/* @__PURE__ */ new Date()).toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit", hour12: true });
+              console.log(
+                `%c[NATS] chat.message.new`,
+                "color:#7c3aed;font-weight:bold",
+                `
+  subject:      ${subject}`,
+                `
+  conversation: ${typeof ed?.conversation_id === "string" ? ed.conversation_id : "?"}`,
+                `
+  sender:       ${typeof ed?.sender_id === "string" ? ed.sender_id : "?"}`,
+                `
+  body:         ${typeof ed?.body === "string" ? ed.body.slice(0, 200) : "(no body)"}`,
+                `
+  time (local): ${localTime}`
+              );
+            } else {
+              console.debug(
+                "[NATS] message received \u2014 unexpected type:",
+                typeof payload === "object" && payload ? payload.type : typeof payload,
+                payload
+              );
+            }
+          }
+        };
+        const inbox = userInboxSubject(natsTenantId, userId);
+        const subInbox = conn.subscribe(inbox);
+        void (async () => {
+          for await (const m of subInbox) {
+            if (cancelled) break;
+            handleMsg(m.data, m.subject);
+          }
+        })();
+        for (const convId of entityConversationIds) {
+          const subj = entityConversationSubject(natsTenantId, convId);
+          const sub = conn.subscribe(subj);
+          void (async () => {
+            for await (const m of sub) {
+              if (cancelled) break;
+              handleMsg(m.data, m.subject);
+            }
+          })();
+        }
+        if (process.env.NODE_ENV === "development") {
+          const subjectList = [
+            inbox,
+            ...entityConversationIds.map((id) => entityConversationSubject(natsTenantId, id))
+          ];
+          console.info("[NATS] WebSocket connected \u2014 servers:", servers, "subjects:", subjectList);
+          void (async () => {
+            for await (const s of conn.status()) {
+              if (cancelled) break;
+              console.debug("[NATS] connection status:", s.type, s.data ?? "");
+            }
+          })();
+        }
+        await conn.closed();
+        connRef.current = null;
+        if (!cancelled) onConnectedChangeRef.current(false);
+      } catch (err) {
+        connRef.current = null;
+        if (process.env.NODE_ENV === "development") {
+          console.error("[NATS] WebSocket connect failed \u2014 check ws:// URL, NATS websocket block, and CORS/mixed content:", err);
+        }
+        if (!cancelled) onConnectedChangeRef.current(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+      onConnectedChangeRef.current(false);
+      const c = connRef.current;
+      connRef.current = null;
+      void c?.drain();
+    };
+  }, [servers, natsToken, natsTenantId, userId, entityKey, queryClient, entityConversationIds]);
+  return null;
+}
+
+// src/chat/provider/ChatProvider.tsx
+var defaultTheme = {
+  primary: "#0a84ff",
+  bubbleSent: "#0a84ff",
+  bubbleReceived: "#2c2c2e",
+  textOnSent: "#ffffff",
+  textOnReceived: "#f5f5f7",
+  radius: "18px",
+  fontFamily: "system-ui, -apple-system, sans-serif",
+  surface: "#1c1c1e",
+  border: "#3a3a3c",
+  mutedFill: "rgba(0, 0, 0, 0.2)",
+  composerShadow: "0 2px 16px rgba(0, 0, 0, 0.38)"
+};
+function ChatProvider({
+  apiUrl,
+  token,
+  userId,
+  tenantId,
+  conduitlyTenantId,
+  theme,
+  pollIntervalMs = 3e4,
+  onUnreadChange: _onUnreadChange,
+  onTokenRefresh,
+  callEnabled = false,
+  natsWsUrl,
+  natsToken,
+  children
+}) {
+  const queryClient = react.useMemo(
+    () => new reactQuery.QueryClient({
+      defaultOptions: {
+        queries: { staleTime: 5e3 }
+      }
+    }),
+    []
+  );
+  const tokenRef = react.useRef(token);
+  react.useEffect(() => {
+    tokenRef.current = token;
+  }, [token]);
+  const handleAuthError = react.useCallback(async () => {
+    if (!onTokenRefresh) return null;
+    const newToken = await onTokenRefresh();
+    if (newToken) tokenRef.current = newToken;
+    return newToken;
+  }, [onTokenRefresh]);
+  const api = react.useMemo(
+    () => new ChatAPI(apiUrl.replace(/\/$/, ""), () => tokenRef.current, handleAuthError),
+    [apiUrl, handleAuthError]
+  );
+  const mergedTheme = react.useMemo(() => ({ ...defaultTheme, ...theme }), [theme]);
+  const styleTag = react.useMemo(() => {
+    const t = mergedTheme;
+    return `[data-chat-root] {
+      --chat-primary: ${t.primary};
+      --chat-bubble-sent: ${t.bubbleSent};
+      --chat-bubble-received: ${t.bubbleReceived};
+      --chat-text-on-sent: ${t.textOnSent};
+      --chat-text-on-received: ${t.textOnReceived};
+      --chat-radius: ${t.radius};
+      --chat-font-family: ${t.fontFamily};
+      --chat-surface: ${t.surface};
+      --chat-border: ${t.border};
+      --chat-muted-fill: ${t.mutedFill};
+      ${t.composerShadow ? `--chat-composer-shadow: ${t.composerShadow};` : ""}
+    }`;
+  }, [mergedTheme]);
+  const [natsConnected, setNatsConnected] = react.useState(false);
+  const natsUrl = natsWsUrl?.trim() ?? "";
+  const wsConnected = Boolean(natsUrl) && natsConnected;
+  const natsTenantId = react.useMemo(() => {
+    const c = conduitlyTenantId?.trim();
+    if (c) return c;
+    if (process.env.NODE_ENV === "development" && natsUrl) {
+      console.warn(
+        "[NATS] Missing conduitly_tenant_id \u2014 subjects will not match Conduitly. Set `conduitly_tenant_id` in public/dev.json or NEXT_PUBLIC_CONDUITLY_TENANT_ID (e.g. hdmme-20261703)."
+      );
+    }
+    return tenantId.trim();
+  }, [conduitlyTenantId, tenantId, natsUrl]);
+  const typingByConversation = react.useMemo(() => ({}), []);
+  const sendTyping = react.useCallback((_conversationId) => {
+  }, []);
+  const sendTypingStop = react.useCallback((_conversationId) => {
+  }, []);
+  const sendRead = react.useCallback((_conversationId, _messageId) => {
+  }, []);
+  const config = react.useMemo(
+    () => ({
+      apiUrl: apiUrl.replace(/\/$/, ""),
+      token,
+      userId,
+      tenantId,
+      pollIntervalMs,
+      callEnabled: Boolean(callEnabled)
+    }),
+    [apiUrl, token, userId, tenantId, pollIntervalMs, callEnabled]
+  );
+  const value = react.useMemo(
+    () => ({
+      api,
+      config,
+      theme: mergedTheme,
+      queryClient,
+      userId,
+      tenantId,
+      natsTenantId,
+      wsConnected,
+      sendTyping,
+      sendTypingStop,
+      sendRead,
+      typingByConversation
+    }),
+    [
+      api,
+      config,
+      mergedTheme,
+      queryClient,
+      userId,
+      tenantId,
+      natsTenantId,
+      wsConnected,
+      sendTyping,
+      sendTypingStop,
+      sendRead,
+      typingByConversation
+    ]
+  );
+  const layoutStyle = {
+    flex: 1,
+    minHeight: 0,
+    display: "flex",
+    flexDirection: "column",
+    boxSizing: "border-box"
+  };
+  return /* @__PURE__ */ React.createElement(reactQuery.QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React.createElement(ChatContext.Provider, { value }, /* @__PURE__ */ React.createElement("div", { style: layoutStyle }, natsUrl ? /* @__PURE__ */ React.createElement(ChatNatsBridge, { natsWsUrl: natsUrl, natsToken, onConnectedChange: setNatsConnected }) : null, /* @__PURE__ */ React.createElement("style", { dangerouslySetInnerHTML: { __html: styleTag } }), /* @__PURE__ */ React.createElement("div", { "data-chat-root": true, style: { ...layoutStyle, flex: 1 } }, children))));
+}
+function useChatActions() {
+  const { api } = useChat();
+  const queryClient = reactQuery.useQueryClient();
+  const openOrCreateDirect = react.useCallback(
+    async (peerUserId) => {
+      const c = await api.findOrCreateDirect(peerUserId);
+      await queryClient.invalidateQueries({ queryKey: chatKeys.conversations() });
+      await queryClient.invalidateQueries({ queryKey: chatKeys.messages(c.id) });
+      return c;
+    },
+    [api, queryClient]
+  );
+  const createGroup = react.useCallback(
+    async (title, members) => {
+      const c = await api.createGroup(title, members);
+      await queryClient.invalidateQueries({ queryKey: chatKeys.conversations() });
+      await queryClient.invalidateQueries({ queryKey: chatKeys.messages(c.id) });
+      return c;
+    },
+    [api, queryClient]
+  );
+  const findOrCreateEntity = react.useCallback(
+    async (input) => {
+      const c = await api.findOrCreateEntity(input);
+      await queryClient.invalidateQueries({ queryKey: chatKeys.conversations() });
+      await queryClient.invalidateQueries({ queryKey: chatKeys.messages(c.id) });
+      return c;
+    },
+    [api, queryClient]
+  );
+  const invalidateConversations = react.useCallback(() => {
+    return queryClient.invalidateQueries({ queryKey: chatKeys.conversations() });
+  }, [queryClient]);
+  const invalidateMessages = react.useCallback(
+    (conversationId) => {
+      return queryClient.invalidateQueries({ queryKey: chatKeys.messages(conversationId) });
+    },
+    [queryClient]
+  );
+  const invalidateMembers = react.useCallback(
+    (conversationId) => {
+      return queryClient.invalidateQueries({ queryKey: chatKeys.members(conversationId) });
+    },
+    [queryClient]
+  );
+  const invalidateAllChat = react.useCallback(() => {
+    return queryClient.invalidateQueries({ queryKey: chatKeys.all });
+  }, [queryClient]);
+  return {
+    api,
+    openOrCreateDirect,
+    createGroup,
+    findOrCreateEntity,
+    invalidateConversations,
+    invalidateMessages,
+    invalidateMembers,
+    invalidateAllChat
+  };
+}
+function useConversationMembers(conversationId) {
+  const { api } = useChat();
+  return reactQuery.useQuery({
+    queryKey: conversationId ? chatKeys.members(conversationId) : ["chat", "members", "none"],
+    queryFn: () => api.listConversationMembers(conversationId),
+    enabled: !!conversationId,
+    staleTime: 6e4
+  });
+}
+
+// src/chat/lib/reconcile.ts
+function mergeMessagePages(server, prev) {
+  if (!prev?.items.length) return server;
+  const serverIds = new Set(server.items.map((m) => m.id));
+  const extras = prev.items.filter((m) => !serverIds.has(m.id));
+  const merged = [...server.items, ...extras];
+  merged.sort(
+    (a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+  );
+  const seen = /* @__PURE__ */ new Set();
+  const items = [];
+  for (const m of merged) {
+    if (seen.has(m.id)) continue;
+    seen.add(m.id);
+    items.push(m);
+  }
+  return { items, next_cursor: server.next_cursor };
+}
+function appendOlderMessages(current, older) {
+  const currentIds = new Set(current.items.map((m) => m.id));
+  const dedupedOlder = older.items.filter((m) => !currentIds.has(m.id));
+  return {
+    items: [...current.items, ...dedupedOlder],
+    next_cursor: older.next_cursor
+  };
+}
+
+// src/chat/hooks/useMessages.ts
+var INITIAL_MESSAGE_PAGE_SIZE = 30;
+function useMessages(conversationId) {
+  const { api, wsConnected, config, queryClient } = useChat();
+  const interval = config.pollIntervalMs ?? 3e4;
+  const [isFetchingOlder, setIsFetchingOlder] = react.useState(false);
+  const fetchingRef = react.useRef(false);
+  const query = reactQuery.useQuery({
+    queryKey: chatKeys.messages(conversationId),
+    queryFn: async () => {
+      const res = await api.listMessages(conversationId, void 0, INITIAL_MESSAGE_PAGE_SIZE);
+      const prev = queryClient.getQueryData(chatKeys.messages(conversationId));
+      return mergeMessagePages(res, prev);
+    },
+    enabled: !!conversationId,
+    refetchInterval: wsConnected ? false : interval
+  });
+  const fetchOlderMessages = react.useCallback(async () => {
+    if (!conversationId || fetchingRef.current) return;
+    const current = queryClient.getQueryData(chatKeys.messages(conversationId));
+    if (!current?.next_cursor) return;
+    fetchingRef.current = true;
+    setIsFetchingOlder(true);
+    try {
+      const older = await api.listMessages(conversationId, current.next_cursor, INITIAL_MESSAGE_PAGE_SIZE);
+      queryClient.setQueryData(chatKeys.messages(conversationId), (prev) => {
+        if (!prev) return older;
+        return appendOlderMessages(prev, older);
+      });
+    } finally {
+      fetchingRef.current = false;
+      setIsFetchingOlder(false);
+    }
+  }, [conversationId, queryClient, api]);
+  const cached = queryClient.getQueryData(chatKeys.messages(conversationId));
+  const hasMoreMessages = !!cached?.next_cursor;
+  return {
+    ...query,
+    fetchOlderMessages,
+    isFetchingOlder,
+    hasMoreMessages
+  };
+}
+
+// src/chat/hooks/useChatPanelController.ts
+function useChatPanelController({
+  conversationId: initialId,
+  peerUserId,
+  entityContext,
+  showNewChat = true,
+  onConversationChange
+}) {
+  const { openOrCreateDirect, findOrCreateEntity } = useChatActions();
+  const { typingByConversation } = useChat();
+  const queryClient = reactQuery.useQueryClient();
+  const [selectedId, setSelectedId] = react.useState(initialId ?? null);
+  const [newChatOpen, setNewChatOpen] = react.useState(false);
+  const setSelected = react.useCallback(
+    (id) => {
+      setSelectedId(id);
+      onConversationChange?.(id);
+    },
+    [onConversationChange]
+  );
+  const refreshFromServer = react.useCallback(() => {
+    void queryClient.invalidateQueries({ queryKey: chatKeys.conversations() });
+    if (selectedId) void queryClient.invalidateQueries({ queryKey: chatKeys.messages(selectedId) });
+  }, [queryClient, selectedId]);
+  react.useEffect(() => {
+    if (!peerUserId) return;
+    void openOrCreateDirect(peerUserId).then((c) => setSelected(c.id)).catch(console.error);
+  }, [peerUserId, openOrCreateDirect]);
+  react.useEffect(() => {
+    if (!entityContext) return;
+    void findOrCreateEntity({
+      entity_ref: entityContext.entity_ref,
+      entity_uuid: entityContext.entity_uuid,
+      title: entityContext.title ?? entityContext.entity_ref,
+      members: entityContext.members
+    }).then((c) => setSelected(c.id)).catch(console.error);
+  }, [entityContext?.entity_ref, entityContext?.entity_uuid]);
+  react.useEffect(() => {
+    if (initialId !== void 0) setSelectedId(initialId);
+  }, [initialId]);
+  const { data: convData } = useConversations();
+  const {
+    data: msgData,
+    isLoading: loadMsg,
+    fetchOlderMessages,
+    isFetchingOlder,
+    hasMoreMessages
+  } = useMessages(selectedId);
+  const { data: membersForSelected = [] } = useConversationMembers(selectedId);
+  const membersById = react.useMemo(
+    () => Object.fromEntries(membersForSelected.map((m) => [m.id, m])),
+    [membersForSelected]
+  );
+  const typingNames = react.useMemo(() => {
+    if (!selectedId) return [];
+    const ids = typingByConversation[selectedId] ?? [];
+    return ids.map((id) => membersById[id]?.display_name ?? "Someone");
+  }, [selectedId, typingByConversation, membersById]);
+  return {
+    selectedId,
+    setSelected,
+    newChatOpen,
+    setNewChatOpen,
+    refreshFromServer,
+    convItems: convData?.items ?? [],
+    messages: msgData?.items ?? [],
+    loadMsg,
+    fetchOlderMessages,
+    isFetchingOlder,
+    hasMoreMessages,
+    typingNames,
+    showNewChat,
+    membersForSelected
+  };
+}
+
+// scss-module:./chat.module.css#scss-module
+var chat_module_default = { "list": "chat__list", "row": "chat__row", "rowActive": "chat__rowActive", "thread": "chat__thread", "threadFlex": "chat__threadFlex", "bubbleRow": "chat__bubbleRow", "bubbleRowOwn": "chat__bubbleRowOwn", "bubbleRowOther": "chat__bubbleRowOther", "bubble": "chat__bubble", "bubbleOwn": "chat__bubbleOwn", "bubbleOther": "chat__bubbleOther", "meta": "chat__meta", "bubbleRowCompact": "chat__bubbleRowCompact", "olderSentinel": "chat__olderSentinel", "olderHint": "chat__olderHint", "olderSpinner": "chat__olderSpinner", "olderDot": "chat__olderDot", "bubbleRowAnimateIn": "chat__bubbleRowAnimateIn", "bubbleFailed": "chat__bubbleFailed", "statusSending": "chat__statusSending", "statusSpinner": "chat__statusSpinner", "statusFailed": "chat__statusFailed", "composer": "chat__composer", "toolBtn": "chat__toolBtn", "toolBtnRecording": "chat__toolBtnRecording", "composerDivider": "chat__composerDivider", "textareaGrow": "chat__textareaGrow", "textareaMirror": "chat__textareaMirror", "textarea": "chat__textarea", "sendBtn": "chat__sendBtn", "sendBtnIcon": "chat__sendBtnIcon", "iconBtn": "chat__iconBtn", "mediaThumb": "chat__mediaThumb", "imageWrap": "chat__imageWrap", "imageBtn": "chat__imageBtn", "imageSkeletonFill": "chat__imageSkeletonFill", "imageSkeletonOverlay": "chat__imageSkeletonOverlay", "videoWrap": "chat__videoWrap", "videoPoster": "chat__videoPoster", "playOverlay": "chat__playOverlay", "voiceWrap": "chat__voiceWrap", "voiceBar": "chat__voiceBar", "fileChip": "chat__fileChip", "widgetFab": "chat__widgetFab", "fabBr": "chat__fabBr", "fabBl": "chat__fabBl", "widgetPanel": "chat__widgetPanel", "panelBr": "chat__panelBr", "panelBl": "chat__panelBl", "widgetHeader": "chat__widgetHeader", "widgetBody": "chat__widgetBody", "chatPanelInner": "chat__chatPanelInner", "panelToolbar": "chat__panelToolbar", "refreshBtn": "chat__refreshBtn", "chatPanelThread": "chat__chatPanelThread", "typing": "chat__typing", "typingIndicator": "chat__typingIndicator", "typingDots": "chat__typingDots", "bubbleDeleted": "chat__bubbleDeleted", "editedLabel": "chat__editedLabel", "modalBackdrop": "chat__modalBackdrop", "modalCard": "chat__modalCard", "modalHeader": "chat__modalHeader", "modalTitle": "chat__modalTitle", "modalClose": "chat__modalClose", "modalBody": "chat__modalBody", "modalPanel": "chat__modalPanel", "segmentWrap": "chat__segmentWrap", "segment": "chat__segment", "segmentActive": "chat__segmentActive", "modalLabel": "chat__modalLabel", "modalSearch": "chat__modalSearch", "modalList": "chat__modalList", "modalRow": "chat__modalRow", "modalRowHoriz": "chat__modalRowHoriz", "modalRowHorizSelected": "chat__modalRowHorizSelected", "modalRowInner": "chat__modalRowInner", "modalAvatar": "chat__modalAvatar", "modalCheckbox": "chat__modalCheckbox", "modalCheckboxOn": "chat__modalCheckboxOn", "modalName": "chat__modalName", "modalMeta": "chat__modalMeta", "modalEmpty": "chat__modalEmpty", "modalError": "chat__modalError", "modalPrimary": "chat__modalPrimary", "chipRow": "chat__chipRow", "chip": "chat__chip", "chipRemove": "chat__chipRemove", "inputWrap": "chat__inputWrap", "mentionPopover": "chat__mentionPopover", "mentionRow": "chat__mentionRow", "mentionRowActive": "chat__mentionRowActive", "panelToolbarInner": "chat__panelToolbarInner" };
+
+// src/chat/components/ConversationList.tsx
+function ConversationList({ items, selectedId, onSelect }) {
+  return /* @__PURE__ */ React.createElement("div", { className: chat_module_default.list }, items.map((c) => /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      key: c.id,
+      type: "button",
+      className: `${chat_module_default.row} ${selectedId === c.id ? chat_module_default.rowActive : ""}`,
+      onClick: () => onSelect(c.id)
+    },
+    c.title || (c.kind === "direct" ? "Direct" : "Chat")
+  )), items.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: chat_module_default.typing }, "No conversations yet.") : null);
+}
+function useUpload() {
+  const { api } = useChat();
+  const uploadFile = react.useCallback(
+    async (file, meta) => {
+      const ct = file.type || "application/octet-stream";
+      const presign = await api.presignPut(file.name || "file", ct);
+      const res = await fetch(presign.upload_url, {
+        method: "PUT",
+        body: file,
+        headers: { "Content-Type": ct }
+      });
+      if (!res.ok) throw new Error(`upload failed: ${res.status}`);
+      return {
+        storage_key: presign.key,
+        mime_type: ct,
+        byte_size: file.size,
+        original_filename: file.name,
+        ...meta
+      };
+    },
+    [api]
+  );
+  return { uploadFile };
+}
+function useVoiceRecorder() {
+  const [recording, setRecording] = react.useState(false);
+  const mediaRef = react.useRef(null);
+  const chunksRef = react.useRef([]);
+  const start = react.useCallback(async () => {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    const mime = MediaRecorder.isTypeSupported("audio/webm;codecs=opus") ? "audio/webm;codecs=opus" : "audio/webm";
+    const rec = new MediaRecorder(stream, { mimeType: mime });
+    chunksRef.current = [];
+    rec.ondataavailable = (e) => {
+      if (e.data.size) chunksRef.current.push(e.data);
+    };
+    rec.start(100);
+    mediaRef.current = rec;
+    setRecording(true);
+  }, []);
+  const stop = react.useCallback(async () => {
+    const rec = mediaRef.current;
+    if (!rec) return null;
+    return new Promise((resolve) => {
+      rec.onstop = () => {
+        const blob = new Blob(chunksRef.current, { type: rec.mimeType });
+        rec.stream.getTracks().forEach((t) => t.stop());
+        mediaRef.current = null;
+        setRecording(false);
+        resolve({ blob, mimeType: rec.mimeType });
+      };
+      rec.stop();
+    });
+  }, []);
+  return { recording, start, stop };
+}
+var urlCache = /* @__PURE__ */ new Map();
+function primePresignedUrl(storageKey, url) {
+  if (!urlCache.has(storageKey)) {
+    urlCache.set(storageKey, url);
+  }
+}
+function usePresignedUrl(storageKey) {
+  const { api } = useChat();
+  const [url, setUrl] = react.useState(() => {
+    return storageKey ? urlCache.get(storageKey) ?? null : null;
+  });
+  const [error, setError] = react.useState(null);
+  react.useEffect(() => {
+    if (!storageKey) {
+      setUrl(null);
+      return;
+    }
+    const cached = urlCache.get(storageKey);
+    if (cached) {
+      setUrl(cached);
+      return;
+    }
+    let cancelled = false;
+    setError(null);
+    api.presignGet(storageKey).then((r) => {
+      if (!cancelled) {
+        urlCache.set(storageKey, r.url);
+        setUrl(r.url);
+      }
+    }).catch((e) => {
+      if (!cancelled) setError(e instanceof Error ? e : new Error(String(e)));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [storageKey, api]);
+  return { url, error };
+}
+
+// src/chat/components/MessageInput.tsx
+function escapeReg(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function MessageInput({ conversationId }) {
+  const { api, sendTyping, sendTypingStop, userId } = useChat();
+  const qc = reactQuery.useQueryClient();
+  const { uploadFile } = useUpload();
+  const { recording, start, stop } = useVoiceRecorder();
+  const [text, setText] = react.useState("");
+  const fileRef = react.useRef(null);
+  const taRef = react.useRef(null);
+  const { data: members = [] } = useConversationMembers(conversationId);
+  const mentionPickIdsRef = react.useRef(/* @__PURE__ */ new Set());
+  react.useEffect(() => {
+    setText("");
+    mentionPickIdsRef.current.clear();
+    setMentionOpen(false);
+  }, [conversationId]);
+  const lastTypingSentRef = react.useRef(0);
+  const [mentionOpen, setMentionOpen] = react.useState(false);
+  const [mentionFilter, setMentionFilter] = react.useState("");
+  const [mentionIndex, setMentionIndex] = react.useState(0);
+  const [atCaret, setAtCaret] = react.useState(null);
+  const filteredMembers = react.useMemo(() => {
+    const t = mentionFilter.toLowerCase();
+    if (!t) return members;
+    return members.filter(
+      (m) => m.display_name.toLowerCase().includes(t) || m.id.toLowerCase().includes(t)
+    );
+  }, [members, mentionFilter]);
+  const syncMentionUi = react.useCallback(
+    (value, caret) => {
+      const before = value.slice(0, caret);
+      const at = before.lastIndexOf("@");
+      if (at < 0) {
+        setMentionOpen(false);
+        setAtCaret(null);
+        return;
+      }
+      const afterAt = before.slice(at + 1);
+      if (/\s/.test(afterAt)) {
+        setMentionOpen(false);
+        setAtCaret(null);
+        return;
+      }
+      setMentionOpen(true);
+      setAtCaret(at);
+      setMentionFilter(afterAt);
+      setMentionIndex(0);
+    },
+    []
+  );
+  const onTextChange = react.useCallback(
+    (e) => {
+      const v = e.target.value;
+      setText(v);
+      syncMentionUi(v, e.target.selectionStart ?? v.length);
+      if (v.trim()) {
+        const now = Date.now();
+        if (now - lastTypingSentRef.current > 2e3) {
+          sendTyping(conversationId);
+          lastTypingSentRef.current = now;
+        }
+      }
+    },
+    [syncMentionUi, sendTyping, conversationId]
+  );
+  const mirrorRef = react.useRef(null);
+  const onSelectMention = react.useCallback(
+    (u) => {
+      setMentionOpen(false);
+      const ta = taRef.current;
+      if (atCaret == null || !ta) return;
+      const caret = ta.selectionStart ?? text.length;
+      const before = text.slice(0, atCaret);
+      const after = text.slice(caret);
+      const insert = `@${u.display_name} `;
+      const next = before + insert + after;
+      mentionPickIdsRef.current.add(u.id);
+      setText(next);
+      setAtCaret(null);
+      requestAnimationFrame(() => {
+        const pos = before.length + insert.length;
+        ta.focus();
+        ta.setSelectionRange(pos, pos);
+      });
+    },
+    [atCaret, text]
+  );
+  const buildMentionIds = react.useCallback(
+    (body) => {
+      const ids = [...mentionPickIdsRef.current];
+      const out = [];
+      for (const id of ids) {
+        const m = members.find((x) => x.id === id);
+        if (!m) continue;
+        const pat = new RegExp(`@${escapeReg(m.display_name)}(\\s|$)`);
+        if (pat.test(body)) out.push(id);
+      }
+      return [...new Set(out)];
+    },
+    [members]
+  );
+  const mutation = reactQuery.useMutation({
+    mutationFn: async (payload) => {
+      return api.sendMessage(conversationId, payload);
+    },
+    onMutate: async (payload) => {
+      void qc.cancelQueries({ queryKey: chatKeys.messages(conversationId) });
+      setText("");
+      mentionPickIdsRef.current.clear();
+      setMentionOpen(false);
+      const optimisticId = `local-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+      qc.setQueryData(chatKeys.messages(conversationId), (old) => {
+        const optimistic = {
+          id: optimisticId,
+          conversation_id: conversationId,
+          sender_id: userId,
+          body: payload.body ?? null,
+          created_at: (/* @__PURE__ */ new Date()).toISOString(),
+          attachments: payload.attachments?.map((a, i) => ({ ...a, id: `opt-att-${i}` })) ?? [],
+          _status: "sending"
+        };
+        if (!old) return { items: [optimistic], next_cursor: "" };
+        return { ...old, items: [optimistic, ...old.items] };
+      });
+      return { optimisticId };
+    },
+    onError: (_err, payload, context) => {
+      if (typeof payload.body === "string" && payload.body) {
+        setText((prev) => prev ? prev : payload.body);
+      }
+      if (!context?.optimisticId) return;
+      qc.setQueryData(chatKeys.messages(conversationId), (old) => {
+        if (!old) return old;
+        return {
+          ...old,
+          items: old.items.map(
+            (m) => m.id === context.optimisticId ? { ...m, _status: "failed" } : m
+          )
+        };
+      });
+    },
+    onSuccess: (confirmedMessage, _payload, context) => {
+      qc.setQueryData(chatKeys.messages(conversationId), (old) => {
+        if (!old) return old;
+        const optimisticIdx = old.items.findIndex((m) => m.id === context?.optimisticId);
+        if (optimisticIdx !== -1) {
+          const next = [...old.items];
+          next[optimisticIdx] = confirmedMessage;
+          return { ...old, items: next };
+        }
+        const hasReal = old.items.some((m) => m.id === confirmedMessage.id);
+        const cleaned = old.items.filter((m) => m.id !== context?.optimisticId);
+        if (hasReal) return { ...old, items: cleaned };
+        return { ...old, items: [confirmedMessage, ...cleaned] };
+      });
+      void qc.invalidateQueries({ queryKey: chatKeys.conversations() });
+    }
+  });
+  const onSend = react.useCallback(() => {
+    const t = text.trim();
+    if (!t) return;
+    const mids = buildMentionIds(text);
+    mutation.mutate({
+      body: t || null,
+      ...mids.length > 0 ? { mentioned_user_ids: mids } : {}
+    });
+    sendTypingStop(conversationId);
+    lastTypingSentRef.current = 0;
+  }, [text, mutation, buildMentionIds, sendTypingStop, conversationId]);
+  const onBlur = react.useCallback(() => {
+    if (text.trim()) {
+      sendTypingStop(conversationId);
+      lastTypingSentRef.current = 0;
+    }
+  }, [text, sendTypingStop, conversationId]);
+  const onFiles = react.useCallback(
+    async (e) => {
+      const files = e.target.files;
+      if (!files?.length) return;
+      const attachments = [];
+      for (const f of Array.from(files)) {
+        const objectUrl = URL.createObjectURL(f);
+        const meta = await uploadFile(f);
+        primePresignedUrl(meta.storage_key, objectUrl);
+        let duration_seconds;
+        if (f.type.startsWith("audio/")) {
+          const dur = await readAudioDuration(f);
+          if (dur != null) duration_seconds = dur;
+        }
+        attachments.push({
+          storage_key: meta.storage_key,
+          mime_type: meta.mime_type,
+          byte_size: meta.byte_size,
+          original_filename: meta.original_filename,
+          duration_seconds
+        });
+      }
+      mutation.mutate({ body: null, attachments });
+      e.target.value = "";
+    },
+    [mutation, uploadFile]
+  );
+  const onVoiceStop = react.useCallback(async () => {
+    const res = await stop();
+    if (!res) return;
+    const file = new File([res.blob], "voice.webm", { type: res.mimeType });
+    const objectUrl = URL.createObjectURL(file);
+    const dur = await readAudioDuration(file);
+    const meta = await uploadFile(file, { duration_seconds: dur ?? void 0 });
+    primePresignedUrl(meta.storage_key, objectUrl);
+    mutation.mutate({
+      body: null,
+      attachments: [
+        {
+          storage_key: meta.storage_key,
+          mime_type: meta.mime_type,
+          byte_size: meta.byte_size,
+          duration_seconds: meta.duration_seconds ?? dur ?? void 0
+        }
+      ]
+    });
+  }, [stop, uploadFile, mutation]);
+  const onKeyDown = react.useCallback(
+    (e) => {
+      if (mentionOpen && filteredMembers.length > 0) {
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          setMentionIndex((i) => (i + 1) % filteredMembers.length);
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          setMentionIndex((i) => (i - 1 + filteredMembers.length) % filteredMembers.length);
+          return;
+        }
+        if (e.key === "Escape") {
+          e.preventDefault();
+          setMentionOpen(false);
+          return;
+        }
+      }
+      if (e.key === "Enter" && !e.shiftKey) {
+        if (mentionOpen && filteredMembers.length > 0) {
+          e.preventDefault();
+          onSelectMention(filteredMembers[mentionIndex]);
+          return;
+        }
+        e.preventDefault();
+        onSend();
+      }
+    },
+    [mentionOpen, filteredMembers, mentionIndex, onSelectMention, onSend]
+  );
+  return /* @__PURE__ */ React.createElement("div", { className: chat_module_default.composer }, /* @__PURE__ */ React.createElement("input", { ref: fileRef, type: "file", multiple: true, hidden: true, accept: "image/*,video/*,audio/*", onChange: onFiles }), /* @__PURE__ */ React.createElement("button", { type: "button", className: chat_module_default.toolBtn, onClick: () => fileRef.current?.click(), "aria-label": "Attach file" }, /* @__PURE__ */ React.createElement(IconPlus, { "aria-hidden": true })), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: `${chat_module_default.toolBtn} ${recording ? chat_module_default.toolBtnRecording : ""}`,
+      onClick: () => recording ? onVoiceStop() : start(),
+      "aria-label": recording ? "Stop and send recording" : "Record voice message"
+    },
+    recording ? /* @__PURE__ */ React.createElement(IconStop, { "aria-hidden": true }) : /* @__PURE__ */ React.createElement(IconMic, { "aria-hidden": true })
+  ), /* @__PURE__ */ React.createElement("div", { className: chat_module_default.composerDivider, "aria-hidden": true }), /* @__PURE__ */ React.createElement("div", { className: chat_module_default.inputWrap }, mentionOpen && filteredMembers.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: chat_module_default.mentionPopover }, filteredMembers.map((u, i) => /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      key: u.id,
+      type: "button",
+      className: `${chat_module_default.mentionRow} ${i === mentionIndex ? chat_module_default.mentionRowActive : ""}`,
+      onMouseDown: (ev) => {
+        ev.preventDefault();
+        onSelectMention(u);
+      }
+    },
+    u.display_name
+  ))) : null, /* @__PURE__ */ React.createElement("div", { className: chat_module_default.textareaGrow }, /* @__PURE__ */ React.createElement("span", { ref: mirrorRef, className: chat_module_default.textareaMirror, "aria-hidden": true }, text || "Type a message\u2026", "\u200B"), /* @__PURE__ */ React.createElement(
+    "textarea",
+    {
+      ref: taRef,
+      className: chat_module_default.textarea,
+      rows: 1,
+      value: text,
+      onChange: onTextChange,
+      onBlur,
+      onSelect: (e) => syncMentionUi(e.currentTarget.value, e.currentTarget.selectionStart ?? 0),
+      onKeyDown,
+      placeholder: "Type a message\u2026"
+    }
+  ))), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: chat_module_default.sendBtn,
+      onClick: onSend,
+      disabled: !text.trim(),
+      "aria-label": "Send message",
+      title: "Send"
+    },
+    /* @__PURE__ */ React.createElement("span", { className: chat_module_default.sendBtnIcon, "aria-hidden": true }, /* @__PURE__ */ React.createElement(IconSend, null))
+  ));
+}
+function IconPlus({ "aria-hidden": ah }) {
+  return /* @__PURE__ */ React.createElement("svg", { width: 18, height: 18, viewBox: "0 0 24 24", "aria-hidden": ah, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" }, /* @__PURE__ */ React.createElement("path", { d: "M12 5v14M5 12h14" }));
+}
+function IconMic({ "aria-hidden": ah }) {
+  return /* @__PURE__ */ React.createElement("svg", { width: 18, height: 18, viewBox: "0 0 24 24", "aria-hidden": ah, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React.createElement("path", { d: "M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3z" }), /* @__PURE__ */ React.createElement("path", { d: "M19 10v1a7 7 0 0 1-14 0v-1M12 18v4M8 22h8" }));
+}
+function IconStop({ "aria-hidden": ah }) {
+  return /* @__PURE__ */ React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 24 24", "aria-hidden": ah, fill: "currentColor" }, /* @__PURE__ */ React.createElement("rect", { x: 7, y: 7, width: 10, height: 10, rx: 1.5 }));
+}
+function IconSend() {
+  return /* @__PURE__ */ React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React.createElement("path", { d: "M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" }));
+}
+function readAudioDuration(file) {
+  return new Promise((resolve) => {
+    const url = URL.createObjectURL(file);
+    const a = document.createElement("audio");
+    a.preload = "metadata";
+    a.src = url;
+    a.onloadedmetadata = () => {
+      const d = a.duration;
+      URL.revokeObjectURL(url);
+      resolve(Number.isFinite(d) ? d : void 0);
+    };
+    a.onerror = () => {
+      URL.revokeObjectURL(url);
+      resolve(void 0);
+    };
+  });
+}
+
+// src/chat/lib/media.ts
+function isImageMime(m) {
+  return m.startsWith("image/");
+}
+function isVideoMime(m) {
+  return m.startsWith("video/");
+}
+function isAudioMime(m) {
+  return m.startsWith("audio/");
+}
+function formatDurationSeconds(sec) {
+  const s = Math.floor(sec % 60);
+  const m = Math.floor(sec / 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+function ImageMessage({ storageKey }) {
+  const { url } = usePresignedUrl(storageKey);
+  const [open, setOpen] = react.useState(false);
+  const [loaded, setLoaded] = react.useState(false);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: chat_module_default.imageWrap }, !url ? /* @__PURE__ */ React.createElement("div", { className: chat_module_default.imageSkeletonFill, "aria-hidden": true }) : /* @__PURE__ */ React.createElement(React.Fragment, null, !loaded && /* @__PURE__ */ React.createElement("div", { className: chat_module_default.imageSkeletonOverlay, "aria-hidden": true }), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => setOpen(true),
+      className: chat_module_default.imageBtn,
+      "aria-label": "View image",
+      title: "Tap to view"
+    },
+    /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src: url,
+        alt: "",
+        className: chat_module_default.mediaThumb,
+        loading: "lazy",
+        decoding: "async",
+        onLoad: () => setLoaded(true)
+      }
+    )
+  ))), url ? /* @__PURE__ */ React.createElement(Lightbox__default.default, { open, close: () => setOpen(false), slides: [{ src: url }] }) : null);
+}
+function VideoMessage({ storageKey, thumbnailKey }) {
+  const { url: videoUrl } = usePresignedUrl(storageKey);
+  const { url: posterUrl } = usePresignedUrl(thumbnailKey || void 0);
+  const [play, setPlay] = react.useState(false);
+  if (!videoUrl) {
+    return /* @__PURE__ */ React.createElement("div", { className: chat_module_default.videoWrap, "aria-hidden": true });
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: chat_module_default.videoWrap }, play ? /* @__PURE__ */ React.createElement("video", { src: videoUrl, controls: true, playsInline: true }) : /* @__PURE__ */ React.createElement(React.Fragment, null, posterUrl ? /* @__PURE__ */ React.createElement("img", { src: posterUrl, alt: "", className: chat_module_default.videoPoster }) : /* @__PURE__ */ React.createElement("video", { src: videoUrl, preload: "metadata", muted: true, className: chat_module_default.videoPoster }), /* @__PURE__ */ React.createElement("button", { type: "button", className: chat_module_default.playOverlay, onClick: () => setPlay(true), "aria-label": "Play video" }, "\u25B6")));
+}
+function VoiceNotePlayer({ storageKey, durationSeconds, isOwn }) {
+  const { url } = usePresignedUrl(storageKey);
+  const containerRef = react.useRef(null);
+  const waveRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!url || !containerRef.current) return;
+    const w = WaveSurfer__default.default.create({
+      container: containerRef.current,
+      height: 36,
+      waveColor: isOwn ? "rgba(255,255,255,0.45)" : "rgba(255,255,255,0.35)",
+      progressColor: isOwn ? "#fff" : "var(--chat-primary)",
+      cursorWidth: 0,
+      barWidth: 2,
+      barGap: 1
+    });
+    w.load(url);
+    waveRef.current = w;
+    return () => {
+      w.destroy();
+      waveRef.current = null;
+    };
+  }, [url, isOwn]);
+  return /* @__PURE__ */ React.createElement("div", { className: chat_module_default.voiceWrap }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: chat_module_default.iconBtn,
+      style: { marginBottom: 4 },
+      onClick: () => waveRef.current?.playPause(),
+      "aria-label": "Play voice"
+    },
+    "\u25B6"
+  ), /* @__PURE__ */ React.createElement("div", { ref: containerRef, className: chat_module_default.voiceBar }), durationSeconds != null ? /* @__PURE__ */ React.createElement("span", { className: chat_module_default.meta }, formatDurationSeconds(Math.floor(durationSeconds))) : null);
+}
+
+// src/chat/components/MessageBubble.tsx
+function MessageBubble({ message, compact, animateIn }) {
+  const { userId } = useChat();
+  const own = message.sender_id === userId;
+  const isDeleted = !!message.deleted_at;
+  const timeStr = (() => {
+    try {
+      return dateFns.format(dateFns.parseISO(message.created_at), "h:mm a");
+    } catch {
+      return dateFns.format(/* @__PURE__ */ new Date(), "h:mm a");
+    }
+  })();
+  if (isDeleted) {
+    return /* @__PURE__ */ React.createElement("div", { className: `${chat_module_default.bubbleRow} ${own ? chat_module_default.bubbleRowOwn : chat_module_default.bubbleRowOther}` }, /* @__PURE__ */ React.createElement("div", { className: `${chat_module_default.bubble} ${chat_module_default.bubbleDeleted}` }, /* @__PURE__ */ React.createElement("p", { style: { margin: 0, fontStyle: "italic" } }, "This message was deleted.")));
+  }
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: `${chat_module_default.bubbleRow} ${own ? chat_module_default.bubbleRowOwn : chat_module_default.bubbleRowOther} ${compact ? chat_module_default.bubbleRowCompact : ""} ${animateIn ? chat_module_default.bubbleRowAnimateIn : ""}`
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: `${chat_module_default.bubble} ${own ? chat_module_default.bubbleOwn : chat_module_default.bubbleOther} ${message._status === "failed" ? chat_module_default.bubbleFailed : ""}`
+      },
+      message.body ? /* @__PURE__ */ React.createElement("p", { style: { margin: 0 } }, message.body) : null,
+      message.attachments?.map((a) => /* @__PURE__ */ React.createElement("div", { key: a.storage_key || a.id, style: { marginTop: message.body ? 6 : 0 } }, /* @__PURE__ */ React.createElement(AttachmentBlock, { attachment: a, isOwn: own }))),
+      /* @__PURE__ */ React.createElement("div", { className: chat_module_default.meta }, timeStr, message.edited_at ? /* @__PURE__ */ React.createElement("span", { className: chat_module_default.editedLabel }, " \xB7 edited") : null, own && message._status === "sending" ? /* @__PURE__ */ React.createElement("span", { className: chat_module_default.statusSending, "aria-label": "Sending" }, /* @__PURE__ */ React.createElement(IconClock, null)) : null, own && message._status === "failed" ? /* @__PURE__ */ React.createElement("span", { className: chat_module_default.statusFailed, title: "Failed to send" }, "!") : null)
+    )
+  );
+}
+function IconClock() {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      width: 11,
+      height: 11,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2.5,
+      strokeLinecap: "round",
+      className: chat_module_default.statusSpinner
+    },
+    /* @__PURE__ */ React.createElement("circle", { cx: 12, cy: 12, r: 10 }),
+    /* @__PURE__ */ React.createElement("polyline", { points: "12 6 12 12 16 14" })
+  );
+}
+function AttachmentBlock({ attachment: a, isOwn }) {
+  if (isImageMime(a.mime_type)) {
+    return /* @__PURE__ */ React.createElement(ImageMessage, { storageKey: a.storage_key });
+  }
+  if (isVideoMime(a.mime_type)) {
+    return /* @__PURE__ */ React.createElement(VideoMessage, { storageKey: a.storage_key, thumbnailKey: a.thumbnail_storage_key });
+  }
+  if (isAudioMime(a.mime_type)) {
+    return /* @__PURE__ */ React.createElement(VoiceNotePlayer, { storageKey: a.storage_key, durationSeconds: a.duration_seconds, isOwn });
+  }
+  return /* @__PURE__ */ React.createElement("span", { className: chat_module_default.fileChip }, a.mime_type, " \xB7 ", a.byte_size, " bytes");
+}
+
+// src/chat/components/MessageThread.tsx
+function MessageThread({
+  messages,
+  threadClassName,
+  fetchOlderMessages,
+  isFetchingOlder,
+  hasMoreMessages
+}) {
+  const scrollRef = react.useRef(null);
+  const bottomRef = react.useRef(null);
+  const sentinelRef = react.useRef(null);
+  const ordered = [...messages].reverse();
+  const seenIdsRef = react.useRef(/* @__PURE__ */ new Set());
+  const initializedRef = react.useRef(false);
+  const prevCountRef = react.useRef(0);
+  const prevScrollHeightRef = react.useRef(0);
+  react.useEffect(() => {
+    if (isFetchingOlder && scrollRef.current) {
+      prevScrollHeightRef.current = scrollRef.current.scrollHeight;
+    }
+  }, [isFetchingOlder]);
+  react.useLayoutEffect(() => {
+    const el = scrollRef.current;
+    const prev = prevScrollHeightRef.current;
+    if (!el || !prev || isFetchingOlder) return;
+    const diff = el.scrollHeight - prev;
+    if (diff > 0) {
+      el.scrollTop += diff;
+      prevScrollHeightRef.current = 0;
+    }
+  }, [messages.length, isFetchingOlder]);
+  react.useLayoutEffect(() => {
+    const el = scrollRef.current;
+    if (!el || messages.length === 0) return;
+    const hasOptimistic = messages.some((m) => m._status === "sending");
+    const isNewMessage = messages.length > prevCountRef.current;
+    prevCountRef.current = messages.length;
+    if (!initializedRef.current) {
+      el.scrollTop = el.scrollHeight;
+      initializedRef.current = true;
+      return;
+    }
+    if (hasOptimistic) {
+      el.scrollTop = el.scrollHeight;
+      return;
+    }
+    if (isNewMessage) {
+      const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+      if (distFromBottom < 160) {
+        bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+      }
+    }
+  }, [messages.length, messages]);
+  react.useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel || !fetchOlderMessages) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting && hasMoreMessages && !isFetchingOlder) {
+          fetchOlderMessages();
+        }
+      },
+      { root: scrollRef.current, rootMargin: "120px 0px 0px 0px", threshold: 0 }
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [fetchOlderMessages, hasMoreMessages, isFetchingOlder]);
+  react.useEffect(() => {
+    return () => {
+      initializedRef.current = false;
+      prevCountRef.current = 0;
+      seenIdsRef.current = /* @__PURE__ */ new Set();
+    };
+  }, []);
+  react.useEffect(() => {
+    for (const m of ordered) seenIdsRef.current.add(m.id);
+  });
+  return /* @__PURE__ */ React.createElement("div", { ref: scrollRef, className: threadClassName ?? chat_module_default.thread }, /* @__PURE__ */ React.createElement("div", { ref: sentinelRef, className: chat_module_default.olderSentinel }, isFetchingOlder ? /* @__PURE__ */ React.createElement("div", { className: chat_module_default.olderSpinner }, /* @__PURE__ */ React.createElement("span", { className: chat_module_default.olderDot }), /* @__PURE__ */ React.createElement("span", { className: chat_module_default.olderDot }), /* @__PURE__ */ React.createElement("span", { className: chat_module_default.olderDot })) : hasMoreMessages ? /* @__PURE__ */ React.createElement("div", { className: chat_module_default.olderHint }) : null), ordered.map((m, i) => {
+    const prev = ordered[i - 1];
+    const compact = !!prev && prev.sender_id === m.sender_id && new Date(m.created_at).getTime() - new Date(prev.created_at).getTime() < 6e4;
+    const isNew = !seenIdsRef.current.has(m.id) && m._status !== "sending";
+    return /* @__PURE__ */ React.createElement(
+      MessageBubble,
+      {
+        key: m.id,
+        message: m,
+        compact,
+        animateIn: isNew
+      }
+    );
+  }), /* @__PURE__ */ React.createElement("div", { ref: bottomRef }));
+}
+function initials(displayName) {
+  const parts = displayName.trim().split(/\s+/).filter(Boolean);
+  if (parts.length >= 2) {
+    return (parts[0][0] + parts[1][0]).toUpperCase();
+  }
+  const s = displayName.trim();
+  return s.slice(0, 2).toUpperCase() || "?";
+}
+function IconClose() {
+  return /* @__PURE__ */ React.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true }, /* @__PURE__ */ React.createElement("path", { d: "M18 6L6 18M6 6l12 12" }));
+}
+function IconCheck() {
+  return /* @__PURE__ */ React.createElement("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true }, /* @__PURE__ */ React.createElement("path", { d: "M20 6L9 17l-5-5" }));
+}
+function NewChatModal({ open, onClose, onConversationReady }) {
+  const { api, openOrCreateDirect, createGroup } = useChatActions();
+  const [mode, setMode] = react.useState("direct");
+  const [q, setQ] = react.useState("");
+  const [debounced, setDebounced] = react.useState("");
+  const [contacts, setContacts] = react.useState([]);
+  const [loading, setLoading] = react.useState(false);
+  const [err, setErr] = react.useState(null);
+  const [groupTitle, setGroupTitle] = react.useState("");
+  const [selected, setSelected] = react.useState([]);
+  react.useEffect(() => {
+    const t = setTimeout(() => setDebounced(q.trim()), 300);
+    return () => clearTimeout(t);
+  }, [q]);
+  react.useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    setLoading(true);
+    setErr(null);
+    void api.listContacts(debounced || void 0, 50).then((rows) => {
+      if (!cancelled) setContacts(rows);
+    }).catch((e) => {
+      if (!cancelled) setErr(e.message ?? "Failed to load contacts");
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [open, debounced, api]);
+  react.useEffect(() => {
+    if (!open) {
+      setQ("");
+      setDebounced("");
+      setMode("direct");
+      setGroupTitle("");
+      setSelected([]);
+      setErr(null);
+    }
+  }, [open]);
+  const toggleMember = react.useCallback((u) => {
+    setSelected((prev) => {
+      const has = prev.some((x) => x.id === u.id);
+      if (has) return prev.filter((x) => x.id !== u.id);
+      return [...prev, u];
+    });
+  }, []);
+  const onPickDirect = react.useCallback(
+    async (u) => {
+      setErr(null);
+      setLoading(true);
+      try {
+        const c = await openOrCreateDirect(u.id);
+        onConversationReady(c.id);
+        onClose();
+      } catch (e) {
+        setErr(e instanceof Error ? e.message : "Could not open chat");
+      } finally {
+        setLoading(false);
+      }
+    },
+    [openOrCreateDirect, onConversationReady, onClose]
+  );
+  const onCreateGroup = react.useCallback(async () => {
+    const title = groupTitle.trim();
+    if (!title || selected.length === 0) {
+      setErr("Add a title and at least one member.");
+      return;
+    }
+    setErr(null);
+    setLoading(true);
+    try {
+      const c = await createGroup(
+        title,
+        selected.map((u) => u.id)
+      );
+      onConversationReady(c.id);
+      onClose();
+    } catch (e) {
+      setErr(e instanceof Error ? e.message : "Could not create group");
+    } finally {
+      setLoading(false);
+    }
+  }, [groupTitle, selected, createGroup, onConversationReady, onClose]);
+  const directList = react.useMemo(() => contacts, [contacts]);
+  if (!open) return null;
+  return /* @__PURE__ */ React.createElement("div", { className: chat_module_default.modalBackdrop, role: "presentation", onMouseDown: onClose }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: chat_module_default.modalCard,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "new-chat-title",
+      onMouseDown: (e) => e.stopPropagation()
+    },
+    /* @__PURE__ */ React.createElement("div", { className: chat_module_default.modalHeader }, /* @__PURE__ */ React.createElement("h2", { id: "new-chat-title", className: chat_module_default.modalTitle }, "New chat"), /* @__PURE__ */ React.createElement("button", { type: "button", className: chat_module_default.modalClose, onClick: onClose, "aria-label": "Close dialog" }, /* @__PURE__ */ React.createElement(IconClose, null))),
+    /* @__PURE__ */ React.createElement("div", { className: chat_module_default.modalBody }, /* @__PURE__ */ React.createElement("div", { className: chat_module_default.segmentWrap, role: "tablist", "aria-label": "Chat type" }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        id: "tab-direct",
+        "aria-selected": mode === "direct",
+        "aria-controls": "new-chat-panel",
+        className: mode === "direct" ? chat_module_default.segmentActive : chat_module_default.segment,
+        onClick: () => setMode("direct")
+      },
+      "Direct"
+    ), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        id: "tab-group",
+        "aria-selected": mode === "group",
+        "aria-controls": "new-chat-panel",
+        className: mode === "group" ? chat_module_default.segmentActive : chat_module_default.segment,
+        onClick: () => setMode("group")
+      },
+      "Group"
+    )), err ? /* @__PURE__ */ React.createElement("div", { className: chat_module_default.modalError }, err) : null, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        id: "new-chat-panel",
+        className: chat_module_default.modalPanel,
+        role: "tabpanel",
+        "aria-labelledby": mode === "direct" ? "tab-direct" : "tab-group"
+      },
+      mode === "direct" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("label", { className: chat_module_default.modalLabel, htmlFor: "direct-search" }, "Find someone"), /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          id: "direct-search",
+          type: "search",
+          className: chat_module_default.modalSearch,
+          placeholder: "Search by name or email",
+          value: q,
+          onChange: (e) => setQ(e.target.value),
+          autoFocus: true
+        }
+      ), /* @__PURE__ */ React.createElement("div", { className: chat_module_default.modalList }, loading ? /* @__PURE__ */ React.createElement("div", { className: chat_module_default.modalEmpty }, "Loading contacts\u2026") : directList.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: chat_module_default.modalEmpty }, "No contacts match your search.") : directList.map((u) => /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: u.id,
+          type: "button",
+          className: `${chat_module_default.modalRow} ${chat_module_default.modalRowHoriz}`,
+          onClick: () => void onPickDirect(u),
+          disabled: loading
+        },
+        /* @__PURE__ */ React.createElement("span", { className: chat_module_default.modalAvatar, "aria-hidden": true }, initials(u.display_name)),
+        /* @__PURE__ */ React.createElement("span", { className: chat_module_default.modalRowInner }, /* @__PURE__ */ React.createElement("span", { className: chat_module_default.modalName }, u.display_name), u.email ? /* @__PURE__ */ React.createElement("span", { className: chat_module_default.modalMeta }, u.email) : null)
+      )))) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("label", { className: chat_module_default.modalLabel, htmlFor: "group-title" }, "Group name"), /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          id: "group-title",
+          type: "text",
+          className: chat_module_default.modalSearch,
+          placeholder: "e.g. Project Alpha",
+          value: groupTitle,
+          onChange: (e) => setGroupTitle(e.target.value),
+          autoFocus: true
+        }
+      ), /* @__PURE__ */ React.createElement("label", { className: chat_module_default.modalLabel, htmlFor: "group-search" }, "Add people"), /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          id: "group-search",
+          type: "search",
+          className: chat_module_default.modalSearch,
+          placeholder: "Search contacts",
+          value: q,
+          onChange: (e) => setQ(e.target.value)
+        }
+      ), selected.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: chat_module_default.chipRow }, selected.map((u) => /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: u.id,
+          type: "button",
+          className: chat_module_default.chip,
+          onClick: () => toggleMember(u),
+          "aria-label": `Remove ${u.display_name}`
+        },
+        u.display_name,
+        /* @__PURE__ */ React.createElement("span", { className: chat_module_default.chipRemove, "aria-hidden": true }, "\xD7")
+      ))) : null, /* @__PURE__ */ React.createElement("div", { className: chat_module_default.modalList }, loading ? /* @__PURE__ */ React.createElement("div", { className: chat_module_default.modalEmpty }, "Loading contacts\u2026") : contacts.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: chat_module_default.modalEmpty }, "No contacts to show. Try a different search.") : contacts.map((u) => {
+        const on = selected.some((x) => x.id === u.id);
+        return /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            key: u.id,
+            type: "button",
+            className: `${chat_module_default.modalRow} ${chat_module_default.modalRowHoriz} ${on ? chat_module_default.modalRowHorizSelected : ""}`,
+            onClick: () => toggleMember(u),
+            "aria-pressed": on
+          },
+          /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              className: `${chat_module_default.modalCheckbox} ${on ? chat_module_default.modalCheckboxOn : ""}`,
+              "aria-hidden": true
+            },
+            on ? /* @__PURE__ */ React.createElement(IconCheck, null) : null
+          ),
+          /* @__PURE__ */ React.createElement("span", { className: chat_module_default.modalAvatar, "aria-hidden": true }, initials(u.display_name)),
+          /* @__PURE__ */ React.createElement("span", { className: chat_module_default.modalRowInner }, /* @__PURE__ */ React.createElement("span", { className: chat_module_default.modalName }, u.display_name), u.email ? /* @__PURE__ */ React.createElement("span", { className: chat_module_default.modalMeta }, u.email) : null)
+        );
+      })), /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          className: chat_module_default.modalPrimary,
+          disabled: loading || !groupTitle.trim() || selected.length === 0,
+          onClick: () => void onCreateGroup()
+        },
+        "Create group"
+      ))
+    ))
+  ));
+}
+function TypingIndicator({ names }) {
+  if (names.length === 0) return null;
+  let label;
+  if (names.length === 1) {
+    label = `${names[0]} is typing\u2026`;
+  } else if (names.length === 2) {
+    label = `${names[0]} and ${names[1]} are typing\u2026`;
+  } else {
+    label = `${names.length} people are typing\u2026`;
+  }
+  return /* @__PURE__ */ React.createElement(framerMotion.AnimatePresence, null, /* @__PURE__ */ React.createElement(
+    framerMotion.motion.div,
+    {
+      key: "typing",
+      initial: { opacity: 0, y: 4 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: 4 },
+      transition: { duration: 0.15 },
+      className: chat_module_default.typingIndicator
+    },
+    /* @__PURE__ */ React.createElement("span", { className: chat_module_default.typingDots }, /* @__PURE__ */ React.createElement("span", null), /* @__PURE__ */ React.createElement("span", null), /* @__PURE__ */ React.createElement("span", null)),
+    label
+  ));
+}
+
+// src/chat/components/ChatPanel.tsx
+function ChatPanel(props) {
+  const {
+    selectedId,
+    setSelected,
+    newChatOpen,
+    setNewChatOpen,
+    refreshFromServer,
+    convItems,
+    messages,
+    loadMsg,
+    typingNames,
+    showNewChat
+  } = useChatPanelController(props);
+  return /* @__PURE__ */ React.createElement("div", { className: chat_module_default.chatPanelInner }, /* @__PURE__ */ React.createElement("div", { className: chat_module_default.panelToolbar }, /* @__PURE__ */ React.createElement("div", { className: chat_module_default.panelToolbarInner }, showNewChat ? /* @__PURE__ */ React.createElement("button", { type: "button", className: chat_module_default.refreshBtn, onClick: () => setNewChatOpen(true) }, "New chat") : /* @__PURE__ */ React.createElement("span", null), /* @__PURE__ */ React.createElement("button", { type: "button", className: chat_module_default.refreshBtn, onClick: refreshFromServer }, "Refresh"))), /* @__PURE__ */ React.createElement(ConversationList, { items: convItems, selectedId, onSelect: (id) => setSelected(id) }), selectedId ? /* @__PURE__ */ React.createElement("div", { className: chat_module_default.chatPanelThread }, loadMsg ? /* @__PURE__ */ React.createElement("div", { className: chat_module_default.typing }, "Loading\u2026") : /* @__PURE__ */ React.createElement(MessageThread, { messages }), /* @__PURE__ */ React.createElement(TypingIndicator, { names: typingNames }), /* @__PURE__ */ React.createElement(MessageInput, { conversationId: selectedId })) : /* @__PURE__ */ React.createElement("div", { className: chat_module_default.typing }, "Select a conversation or start a new chat."), /* @__PURE__ */ React.createElement(
+    NewChatModal,
+    {
+      open: newChatOpen,
+      onClose: () => setNewChatOpen(false),
+      onConversationReady: (id) => setSelected(id)
+    }
+  ));
+}
+
+// src/chat/components/ChatWidget.tsx
+function ChatWidget({
+  position = "bottom-right",
+  defaultOpen = false,
+  conversationId,
+  peerUserId,
+  showNewChat,
+  onConversationChange
+}) {
+  const [open, setOpen] = react.useState(defaultOpen);
+  const fabCorner = position === "bottom-left" ? chat_module_default.fabBl : chat_module_default.fabBr;
+  const panelCorner = position === "bottom-left" ? chat_module_default.panelBl : chat_module_default.panelBr;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: `${chat_module_default.widgetFab} ${fabCorner}`,
+      onClick: () => setOpen((o) => !o),
+      "aria-label": open ? "Close chat" : "Open chat"
+    },
+    open ? "\u2715" : "\u{1F4AC}"
+  ), /* @__PURE__ */ React.createElement(framerMotion.AnimatePresence, null, open ? /* @__PURE__ */ React.createElement(
+    framerMotion.motion.div,
+    {
+      key: "panel",
+      initial: { opacity: 0, y: 16, scale: 0.98 },
+      animate: { opacity: 1, y: 0, scale: 1 },
+      exit: { opacity: 0, y: 16, scale: 0.98 },
+      transition: { duration: 0.2 },
+      className: `${chat_module_default.widgetPanel} ${panelCorner}`
+    },
+    /* @__PURE__ */ React.createElement("div", { className: chat_module_default.widgetHeader }, "Messages"),
+    /* @__PURE__ */ React.createElement("div", { className: chat_module_default.widgetBody }, /* @__PURE__ */ React.createElement(
+      ChatPanel,
+      {
+        conversationId,
+        peerUserId,
+        showNewChat,
+        onConversationChange
+      }
+    ))
+  ) : null));
+}
+function convDisplayName(c) {
+  if (c.kind === "direct" && c.peer_display_name) return c.peer_display_name;
+  if (c.title) return c.title;
+  return c.kind === "direct" ? "Direct message" : "Group chat";
+}
+function convLabel(c) {
+  return c.title || (c.kind === "direct" ? "Direct" : "Chat");
+}
+function formatConvTime(iso) {
+  try {
+    const d = new Date(iso);
+    const now = /* @__PURE__ */ new Date();
+    const isToday = d.toDateString() === now.toDateString();
+    if (isToday) return dateFns.format(d, "h:mm a");
+    const diffDays = Math.floor((now.getTime() - d.getTime()) / 864e5);
+    if (diffDays < 7) return dateFns.format(d, "EEE");
+    return dateFns.format(d, "MMM d");
+  } catch {
+    return "";
+  }
+}
+function initials2(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
+  return name.slice(0, 2).toUpperCase() || "?";
+}
+
+// scss-module:./standalone-chat.module.css#scss-module
+var standalone_chat_module_default = { "root": "standalone-chat__root", "shell": "standalone-chat__shell", "sidebar": "standalone-chat__sidebar", "sidebarHeader": "standalone-chat__sidebarHeader", "sidebarTitle": "standalone-chat__sidebarTitle", "iconSquare": "standalone-chat__iconSquare", "searchWrap": "standalone-chat__searchWrap", "searchInput": "standalone-chat__searchInput", "searchIcon": "standalone-chat__searchIcon", "tabs": "standalone-chat__tabs", "tab": "standalone-chat__tab", "tabActive": "standalone-chat__tabActive", "listScroll": "standalone-chat__listScroll", "sectionLabel": "standalone-chat__sectionLabel", "convRow": "standalone-chat__convRow", "convRowActive": "standalone-chat__convRowActive", "avatar": "standalone-chat__avatar", "avatarInitials": "standalone-chat__avatarInitials", "avatarDot": "standalone-chat__avatarDot", "convBody": "standalone-chat__convBody", "convTopLine": "standalone-chat__convTopLine", "convName": "standalone-chat__convName", "convPreview": "standalone-chat__convPreview", "convTime": "standalone-chat__convTime", "fab": "standalone-chat__fab", "sidebarFooter": "standalone-chat__sidebarFooter", "main": "standalone-chat__main", "mainHeader": "standalone-chat__mainHeader", "mainHeaderLeft": "standalone-chat__mainHeaderLeft", "mainAvatar": "standalone-chat__mainAvatar", "mainTitle": "standalone-chat__mainTitle", "mainStatus": "standalone-chat__mainStatus", "mainActions": "standalone-chat__mainActions", "actionBtn": "standalone-chat__actionBtn", "threadArea": "standalone-chat__threadArea", "emptyMain": "standalone-chat__emptyMain", "inputArea": "standalone-chat__inputArea", "callsEmpty": "standalone-chat__callsEmpty" };
+
+// src/chat/components/ChatInboxSidebar.tsx
+function ChatInboxSidebar({
+  q,
+  setQ,
+  tab,
+  setTab,
+  tabDefs,
+  filtered,
+  activeRows,
+  restRows,
+  selectedId,
+  onSelectConversation,
+  onRefresh,
+  showNewChat,
+  onNewChat
+}) {
+  const renderRow = (c) => {
+    const name = convDisplayName(c);
+    const timeStr = formatConvTime(c.last_message_at ?? c.updated_at);
+    const preview = c.last_message_preview ?? (c.kind === "group" ? "Group chat" : "");
+    const isActive = selectedId === c.id;
+    return /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        key: c.id,
+        type: "button",
+        className: `${standalone_chat_module_default.convRow} ${isActive ? standalone_chat_module_default.convRowActive : ""}`,
+        onClick: () => onSelectConversation(c.id)
+      },
+      /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.avatar, "aria-hidden": true }, /* @__PURE__ */ React.createElement("span", { className: standalone_chat_module_default.avatarInitials }, initials2(name)), /* @__PURE__ */ React.createElement("span", { className: standalone_chat_module_default.avatarDot })),
+      /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.convBody }, /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.convTopLine }, /* @__PURE__ */ React.createElement("span", { className: standalone_chat_module_default.convName }, name), /* @__PURE__ */ React.createElement("span", { className: standalone_chat_module_default.convTime }, timeStr)), preview ? /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.convPreview }, preview) : null)
+    );
+  };
+  return /* @__PURE__ */ React.createElement("aside", { className: standalone_chat_module_default.sidebar }, /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.sidebarHeader }, /* @__PURE__ */ React.createElement("h1", { className: standalone_chat_module_default.sidebarTitle }, "Messages"), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 8 } }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: standalone_chat_module_default.iconSquare,
+      "aria-label": "Refresh conversations",
+      title: "Refresh",
+      onClick: () => onRefresh()
+    },
+    "\u21BB"
+  ), /* @__PURE__ */ React.createElement("button", { type: "button", className: standalone_chat_module_default.iconSquare, "aria-label": "Settings", title: "Settings" }, "\u2699"))), /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.searchWrap }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "search",
+      className: standalone_chat_module_default.searchInput,
+      placeholder: "Search Chat",
+      value: q,
+      onChange: (e) => setQ(e.target.value),
+      "aria-label": "Search conversations"
+    }
+  ), /* @__PURE__ */ React.createElement("span", { className: standalone_chat_module_default.searchIcon }, "\u2315")), /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.tabs, role: "tablist" }, tabDefs.map(([id, label]) => /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      key: id,
+      type: "button",
+      role: "tab",
+      "aria-selected": tab === id,
+      className: `${standalone_chat_module_default.tab} ${tab === id ? standalone_chat_module_default.tabActive : ""}`,
+      onClick: () => setTab(id)
+    },
+    label
+  ))), /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.listScroll }, tab === "calls" ? /* @__PURE__ */ React.createElement("p", { className: standalone_chat_module_default.callsEmpty }, "No recent calls yet.") : filtered.length === 0 ? /* @__PURE__ */ React.createElement("p", { className: standalone_chat_module_default.callsEmpty }, "No conversations match.") : /* @__PURE__ */ React.createElement(React.Fragment, null, activeRows.length > 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.sectionLabel }, "ACTIVE CHATS"), activeRows.map(renderRow)) : null, restRows.length > 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.sectionLabel }, "ALL CHATS"), restRows.map(renderRow)) : null)), showNewChat ? /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.sidebarFooter }, /* @__PURE__ */ React.createElement("button", { type: "button", className: standalone_chat_module_default.fab, "aria-label": "New chat", onClick: onNewChat }, "+")) : null);
+}
+
+// src/chat/components/ChatMainColumn.tsx
+function ChatMainColumn({
+  selectedId,
+  headerTitle,
+  headerStatus,
+  messages,
+  loadMsg,
+  fetchOlderMessages,
+  isFetchingOlder,
+  hasMoreMessages,
+  typingNames,
+  emptyMessage = "Select a conversation or start a new chat.",
+  threadClassName
+}) {
+  const { config } = useChat();
+  const callEnabled = config.callEnabled === true;
+  if (!selectedId) {
+    return /* @__PURE__ */ React.createElement("main", { className: standalone_chat_module_default.main }, /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.emptyMain }, emptyMessage));
+  }
+  return /* @__PURE__ */ React.createElement("main", { className: standalone_chat_module_default.main }, /* @__PURE__ */ React.createElement("header", { className: standalone_chat_module_default.mainHeader }, /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.mainHeaderLeft }, /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.mainAvatar, "aria-hidden": true }), /* @__PURE__ */ React.createElement("div", { style: { minWidth: 0 } }, /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.mainTitle }, headerTitle), headerStatus ? /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.mainStatus }, headerStatus) : null)), /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.mainActions }, callEnabled ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("button", { type: "button", className: standalone_chat_module_default.actionBtn, "aria-label": "Voice call", title: "Voice call" }, "\u{1F4DE}"), /* @__PURE__ */ React.createElement("button", { type: "button", className: standalone_chat_module_default.actionBtn, "aria-label": "Video call", title: "Video call" }, "\u{1F4F9}")) : null, /* @__PURE__ */ React.createElement("button", { type: "button", className: standalone_chat_module_default.actionBtn, "aria-label": "More", title: "More" }, "\u22EE"))), /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.threadArea }, loadMsg ? /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.emptyMain }, "Loading\u2026") : /* @__PURE__ */ React.createElement(
+    MessageThread,
+    {
+      messages,
+      threadClassName: threadClassName ?? chat_module_default.threadFlex,
+      fetchOlderMessages,
+      isFetchingOlder,
+      hasMoreMessages
+    }
+  ), /* @__PURE__ */ React.createElement(TypingIndicator, { names: typingNames })), /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.inputArea }, /* @__PURE__ */ React.createElement(MessageInput, { conversationId: selectedId })));
+}
+
+// src/chat/components/StandaloneChatPage.tsx
+function StandaloneChatPage(props) {
+  const { config } = useChat();
+  const {
+    selectedId,
+    setSelected,
+    newChatOpen,
+    setNewChatOpen,
+    refreshFromServer,
+    convItems,
+    messages,
+    loadMsg,
+    fetchOlderMessages,
+    isFetchingOlder,
+    hasMoreMessages,
+    typingNames,
+    showNewChat,
+    membersForSelected
+  } = useChatPanelController(props);
+  const [tab, setTab] = react.useState("recent");
+  const [q, setQ] = react.useState("");
+  const callEnabled = config.callEnabled === true;
+  react.useEffect(() => {
+    if (!callEnabled && tab === "calls") setTab("recent");
+  }, [callEnabled, tab]);
+  const filtered = react.useMemo(() => {
+    let list = [...convItems];
+    const needle = q.trim().toLowerCase();
+    if (needle) list = list.filter((c) => convLabel(c).toLowerCase().includes(needle));
+    if (tab === "groups") list = list.filter((c) => c.kind === "group");
+    if (tab === "calls") list = [];
+    list.sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime());
+    return list;
+  }, [convItems, q, tab]);
+  const { activeRows, restRows } = react.useMemo(() => {
+    const active = filtered.slice(0, 4);
+    const rest = filtered.slice(4);
+    return { activeRows: active, restRows: rest };
+  }, [filtered]);
+  const tabDefs = react.useMemo(() => {
+    const rows = [
+      ["recent", "Recent"],
+      ["groups", "Groups"]
+    ];
+    if (callEnabled) rows.push(["calls", "Calls"]);
+    return rows;
+  }, [callEnabled]);
+  const selectedConv = selectedId ? convItems.find((c) => c.id === selectedId) : void 0;
+  const otherMembers = membersForSelected.filter((m) => m.id !== config.userId);
+  const headerTitle = selectedConv ? selectedConv.kind === "direct" ? selectedConv.peer_display_name ?? otherMembers[0]?.display_name ?? convLabel(selectedConv) : convLabel(selectedConv) : "";
+  const headerStatus = typingNames.length > 0 ? `${typingNames.join(", ")} typing\u2026` : selectedId ? "online" : "";
+  return /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.root }, /* @__PURE__ */ React.createElement("div", { className: standalone_chat_module_default.shell }, /* @__PURE__ */ React.createElement(
+    ChatInboxSidebar,
+    {
+      q,
+      setQ,
+      tab,
+      setTab,
+      tabDefs,
+      filtered,
+      activeRows,
+      restRows,
+      selectedId,
+      onSelectConversation: (id) => setSelected(id),
+      onRefresh: refreshFromServer,
+      showNewChat,
+      onNewChat: () => setNewChatOpen(true)
+    }
+  ), /* @__PURE__ */ React.createElement(
+    ChatMainColumn,
+    {
+      selectedId: selectedId && selectedConv ? selectedId : null,
+      headerTitle,
+      headerStatus,
+      messages,
+      loadMsg,
+      fetchOlderMessages,
+      isFetchingOlder,
+      hasMoreMessages,
+      typingNames
+    }
+  )), /* @__PURE__ */ React.createElement(
+    NewChatModal,
+    {
+      open: newChatOpen,
+      onClose: () => setNewChatOpen(false),
+      onConversationReady: (id) => setSelected(id)
+    }
+  ));
+}
+function ChatConversationView({
+  conversationId,
+  header,
+  className,
+  threadAreaClassName,
+  threadClassName,
+  inputAreaClassName,
+  showTyping = true,
+  loadingFallback
+}) {
+  const { typingByConversation } = useChat();
+  const {
+    data: msgData,
+    isLoading: loadMsg,
+    fetchOlderMessages,
+    isFetchingOlder,
+    hasMoreMessages
+  } = useMessages(conversationId);
+  const { data: membersForSelected = [] } = useConversationMembers(conversationId);
+  const membersById = react.useMemo(
+    () => Object.fromEntries(membersForSelected.map((m) => [m.id, m])),
+    [membersForSelected]
+  );
+  const typingNames = react.useMemo(() => {
+    const ids = typingByConversation[conversationId] ?? [];
+    return ids.map((id) => membersById[id]?.display_name ?? "Someone");
+  }, [conversationId, typingByConversation, membersById]);
+  const messages = msgData?.items ?? [];
+  return /* @__PURE__ */ React.createElement("div", { className }, header, /* @__PURE__ */ React.createElement("div", { className: threadAreaClassName }, loadMsg ? loadingFallback ?? /* @__PURE__ */ React.createElement("div", { className: chat_module_default.typing }, "Loading\u2026") : /* @__PURE__ */ React.createElement(
+    MessageThread,
+    {
+      messages,
+      threadClassName: threadClassName ?? chat_module_default.threadFlex,
+      fetchOlderMessages,
+      isFetchingOlder,
+      hasMoreMessages
+    }
+  ), showTyping ? /* @__PURE__ */ React.createElement(TypingIndicator, { names: typingNames }) : null), /* @__PURE__ */ React.createElement("div", { className: inputAreaClassName }, /* @__PURE__ */ React.createElement(MessageInput, { conversationId })));
+}
+
+exports.ChatAPI = ChatAPI;
+exports.ChatComposer = MessageInput;
+exports.ChatConversationView = ChatConversationView;
+exports.ChatInboxSidebar = ChatInboxSidebar;
+exports.ChatMainColumn = ChatMainColumn;
+exports.ChatPanel = ChatPanel;
+exports.ChatProvider = ChatProvider;
+exports.ChatWidget = ChatWidget;
+exports.ConversationList = ConversationList;
+exports.INITIAL_MESSAGE_PAGE_SIZE = INITIAL_MESSAGE_PAGE_SIZE;
+exports.MessageBubble = MessageBubble;
+exports.MessageInput = MessageInput;
+exports.MessageThread = MessageThread;
+exports.NewChatModal = NewChatModal;
+exports.StandaloneChatPage = StandaloneChatPage;
+exports.TypingIndicator = TypingIndicator;
+exports.chatKeys = chatKeys;
+exports.convDisplayName = convDisplayName;
+exports.convLabel = convLabel;
+exports.formatConvTime = formatConvTime;
+exports.initials = initials2;
+exports.mergeMessagePages = mergeMessagePages;
+exports.useChat = useChat;
+exports.useChatActions = useChatActions;
+exports.useChatPanelController = useChatPanelController;
+exports.useConversationMembers = useConversationMembers;
+exports.useConversations = useConversations;
+exports.useMessages = useMessages;
+exports.usePresignedUrl = usePresignedUrl;
+exports.useUpload = useUpload;
+exports.useVoiceRecorder = useVoiceRecorder;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map